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