Add some autofocus attributes
[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     width: 100%;
39     height: 100%;
40
41     position: absolute;
42     top: 0;
43     left: 0;
44     bottom: 0;
45     right: 0;
46
47     display: grid;
48     grid-template-columns: 1fr 1fr 1fr;
49     grid-template-rows: 1fr 1fr 1fr;
50     grid-gap: 1em;
51 }
52
53 .mini-grid {
54     width: 100%;
55     height: 100%;
56
57     display: grid;
58     grid-template-columns: 1fr 1fr 1fr;
59     grid-template-rows: 1fr 1fr 1fr;
60
61     border-radius: 6px;
62     border: 3px solid #999;
63
64     position:relative;
65 }
66
67 .mini-grid.active {
68     border: 3px solid var(--accent-color-bright);
69 }
70
71 .mini-grid.o-wins .square, .mini-grid.plus-wins .square {
72     opacity: 0.6;
73 }
74
75 .mini-grid .winner {
76     position: absolute;
77     top: 0;
78     left: 0;
79     bottom: 0;
80     right: 0;
81
82     display: flex;
83     justify-content: center;
84     align-items: center;
85     line-height: 0;
86     font-size: calc(min(35vw, .35 * var(--page-max-width)));
87     font-weight: bold;
88     opacity: 0.20;
89 }
90
91 .square {
92     display: flex;
93     justify-content: center;
94     align-items: center;
95     font-size: calc(min(8vw, .08 * var(--page-max-width)));
96     line-height: 0;
97     font-weight: bold;
98     border-bottom: 1px solid #999;
99     border-right: 1px solid #999;
100 }
101
102 .square.open {
103     cursor: pointer;
104 }
105
106 .square.occupied {
107     cursor: default;
108 }
109
110 .square.glyph-o {
111     background: var(--o-color);
112 }
113
114 .square.glyph-plus {
115     background: var(--plus-color);
116 }
117
118 .square.open:hover {
119     background-color: var(--accent-color-bright);
120 }
121
122 .square.last-move {
123     color: var(--accent-color-bright);
124 }
125
126 .glyphs {
127     padding-top: 0.5em;
128     display: grid;
129     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
130     grid-column-gap: 0.5em;
131     grid-row-gap: 0.25em;
132 }
133
134 .glyph-and-name {
135     display: flex;
136     flex-direction: column;
137     align-items: center;
138 }
139
140 .glyph {
141     width: 8vw;
142 }