git.sesse.net Git - remoteglot/blob - www/css/remoteglot.css

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