Fix some more TB short-form issues.
[remoteglot] / www / css / remoteglot.css
1 body {
2         font-family: sans-serif;
3         background: white;
4         color: black;
5 }
6 h1 {
7         margin-top: 0em;
8 }
9 h3 {
10         margin-top: 1em;
11         margin-bottom: 0;
12 }
13 #scorecontainer {
14         font-size: x-large;
15         margin-top: 0;
16 }
17 #score {
18         float: left;
19 }
20 #scoresparkcontainer {
21         overflow: hidden;
22 }
23 #scorespark {
24         margin-left: 0.5em;
25         margin-right: 0.5em;
26 }
27 #pvcontainer {
28         clear: left;
29         margin-top: 1em;
30 }
31 .window {
32         position: absolute;    
33         width: 0px;
34         height: 0px;
35         opacity: 0.0; 
36 }
37 .c1 {
38         opacity: 0.75;
39 }
40 .l1arrow {
41         opacity: 1.0;
42 }
43 .hidden {
44         display: none;
45 }
46 .vir path {
47         opacity: 0.0;
48 }
49 .vir path.l1arrow {
50         opacity: 1.0;
51 }
52 #news {
53         font-size: smaller;
54 }
55 #credits {
56         font-size: smaller;
57 }
58 td {
59         vertical-align: top;
60 }
61 p {
62         margin-top: 0;
63 }
64 #sortbyscoreholder {
65         font-size: smaller;
66         margin: 0;
67         font-style: italic;
68 }
69 #refutationlines {
70         font-size: smaller;
71 }
72 #refutationlines .move {
73         width: 3.5em;
74 }
75 #refutationlines .score {
76         width: 3em;
77         text-align: right;
78         padding-right: 0.5em;
79 }
80 #refutationlines .depth {
81         width: 2em;
82         text-align: right;
83         padding-right: 0.7em;
84 }
85 .white-1e1d7.nonuglyhighlight {
86         background-color: #cce5cf;
87 }
88 .black-3c85d.nonuglyhighlight {
89         background-color: #9ab6a6;
90 }
91 #boardcontainer {
92         width: 400px;
93         margin-right: 1em;
94         margin-bottom: 1em;
95         float: left;
96 }
97 #board {
98         display: block;
99         width: 100%;
100         padding: 0;
101 }
102 #hiddenboard {
103         display: none;
104 }
105 #bottompanel {
106         display: block;
107         width: 100%;
108         font-size: smaller;
109         margin-top: 0.5em;
110         margin-bottom: 0;
111 }
112 #numviewers {
113         width: auto;
114         text-align: center;
115 }
116 #whiteinfo {
117         float: left;
118         text-align: left;
119         min-width: 20%;
120 }
121 #blackinfo {
122         float: right;
123         text-align: right;
124         min-width: 20%;
125         margin-right: 5px;
126 }
127 #whiteimbalance img, #blackimbalance img {
128         vertical-align: text-top;
129 }
130 #whiteimbalance {
131         margin-left: 5px;
132 }
133 #blackimbalance {
134         margin-right: 5px;
135 }
136 .running-clock {
137         font-weight: bold;
138 }
139 #analysis {
140         display: block;
141         min-width: 400px;
142         overflow: hidden;
143 }
144
145 /* If the board is too wide for the screen, shrink it to fit,
146  * and then put the analysis below. */
147 @media all and (max-width: 400px) {
148         #boardcontainer {
149                 width: 100%;
150                 float: none;
151         }
152         #analysis {
153                 min-width: 0;
154         }
155 }
156
157 /* If there is almost space for the analysis, shrink the board a bit, too. */
158 @media all and (min-width: 500px) and (max-width: 810px) {
159         #boardcontainer {
160                 float: left;
161                 width: 50%;
162         }
163         #analysis {
164                 min-width: 0;
165         }
166 }
167 a.move {
168         color: black;
169         text-decoration: none;
170 }
171 a.move.highlight {
172         color: red;
173         font-weight: bold;
174 }
175 a.move:hover {
176         font-weight: bold;
177         text-decoration: underline;
178 }
179
180 #linenav {
181         display: none;
182 }
183 #lomonosov {
184         display: none;
185 }
186
187 #games {
188         font-size: smaller;
189         margin-bottom: 0.5em;
190 }
191 .game {
192         padding: 0.25em 1em 0.25em 1em;
193         margin: 0;
194         background: #eee;
195         border-right: 1px solid #bbb;
196 }
197 .game:last-of-type {
198         border-right: none;
199 }
200
201 .pv, #pv, #history {  /* Mute move colors a bit. */
202         color: #555;
203 }
204
205 @media (prefers-color-scheme: dark) {
206
207 body {
208         background: black;
209         color: #eee;
210 }
211 .pv, #pv, #history {  /* Mute move colors a bit. */
212         color: #bbb;
213 }
214 #numviewers {
215         color: #bbb;
216 }
217 a.move, a.move:link {
218         color: #eee;
219 }
220 a:link {
221         color: rgb(128,128,238);
222 }
223
224 }