Add support for detecting glyph shapes
[lmno.games] / scribe / scribe.css
1 :root {
2     /* Colors for the two players. */
3     --o-color: #c2dfff;
4     --plus-color: #fdd7e4;
5 }
6
7 /* We want our board to be the largest square that can
8  * fit. Unfortunately, it requires a bit of CSS magic to make that
9  * happen. We can set a width easily enough, but what we can't easily
10  * do is to set the height to be exactly the same as the width.
11  *
12  * So here's the magic to get that to happen. On the board container
13  * we set the height to 0 and the bottom padding to 100% (which just
14  * happens to be defined as relative to the _width_). So, now we have
15  * a square element. Hurrah!
16  *
17  * The problem is that this element has a nominal height of 0, so if
18  * any child sas "height: 100%" that will result in a 0-height child
19  * and won't be what we want.
20  *
21  * So the last piece of the magic is to use absolute placement of the
22  * board (which requires position:relative on its parent) and set all
23  * of its edges (top, left, bottom, right) to the extents of the
24  * container.
25  *
26  * Ta-da! Now our board element is square and does not have any
27  * dimensions of 0 so child elements can compute their sizes
28  * naturally.
29  */
30 .board-container {
31     position: relative;
32     width: 100%;
33     height: 0;
34     padding-bottom: 100%;
35 }
36
37 .board {
38     position: absolute;
39     top: 0;
40     left: 0;
41     bottom: 0;
42     right: 0;
43
44     display: grid;
45     grid-template-columns: 1fr 1fr 1fr;
46     grid-template-rows: 1fr 1fr 1fr;
47     grid-gap: 1em;
48 }
49
50 .mini-grid {
51     width: 100%;
52     height: 100%;
53
54     display: grid;
55     grid-template-columns: 1fr 1fr 1fr;
56     grid-template-rows: 1fr 1fr 1fr;
57
58     border-radius: 6px;
59     border: 3px solid #999;
60
61     position:relative;
62 }
63
64 .mini-grid.active {
65     border: 3px solid var(--accent-color-bright);
66 }
67
68 .mini-grid.o-wins .square, .mini-grid.plus-wins .square {
69     opacity: 0.6;
70 }
71
72 .mini-grid .winner {
73     position: absolute;
74     top: 0;
75     left: 0;
76     bottom: 0;
77     right: 0;
78
79     display: flex;
80     justify-content: center;
81     align-items: center;
82     line-height: 0;
83     font-size: calc(min(35vw, .35 * var(--page-max-width)));
84     font-weight: bold;
85     opacity: 0.20;
86 }
87
88 .square {
89     display: flex;
90     justify-content: center;
91     align-items: center;
92     font-size: calc(min(8vw, .08 * var(--page-max-width)));
93     line-height: 0;
94     font-weight: bold;
95     border-bottom: 1px solid #999;
96     border-right: 1px solid #999;
97 }
98
99 .square.open {
100     cursor: pointer;
101 }
102
103 .square.occupied {
104     cursor: default;
105 }
106
107 .square.glyph-o {
108     background: var(--o-color);
109 }
110
111 .square.glyph-plus {
112     background: var(--plus-color);
113 }
114
115 .square.open:hover {
116     background-color: var(--accent-color-bright);
117 }
118
119 .square.last-move {
120     color: var(--accent-color-bright);
121 }
122
123 .glyphs {
124     padding-top: 0.5em;
125     display: grid;
126     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
127     grid-column-gap: 0.5em;
128     grid-row-gap: 0.25em;
129 }
130
131 .glyph-and-name {
132     display: flex;
133     flex-direction: column;
134     align-items: center;
135 }
136
137 .glyph {
138     width: 8vw;
139 }