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

   1 html {
   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 #sparklinehover {
  32         position: absolute;
  33         display: none;
  34         background-color: rgba(0, 0, 0, 0.6);
  35         color: white;
  36         font-size: 10px;
  37         white-space: nowrap;
  38         padding: 5px;
  39         border: 1px solid white;
  40         z-index: 10000;
  41 }
  42 #pvcontainer {
  43         clear: left;
  44         margin-top: 1em;
  45 }
  46 .c1 {
  47         opacity: 0.75;
  48 }
  49 .hidden {
  50         display: none;
  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         transform: translate(0,0);  /* Make it a containing block. */
 102 }
 103 #hiddenboard {
 104         display: none;
 105 }
 106 #bottompanel {
 107         display: block;
 108         width: calc(100% + 4px);
 109         font-size: smaller;
 110         margin-top: 0.5em;
 111         margin-bottom: 0;
 112 }
 113 #numviewers {
 114         width: auto;
 115         text-align: center;
 116 }
 117 #whiteinfo {
 118         float: left;
 119         text-align: left;
 120         min-width: 20%;
 121 }
 122 #blackinfo {
 123         float: right;
 124         text-align: right;
 125         min-width: 20%;
 126         margin-right: 5px;
 127 }
 128 #whiteimbalance img, #blackimbalance img {
 129         vertical-align: text-top;
 130 }
 131 #whiteimbalance {
 132         margin-left: 5px;
 133 }
 134 #blackimbalance {
 135         margin-right: 5px;
 136 }
 137 .running-clock {
 138         font-weight: bold;
 139 }
 140 #analysis {
 141         display: block;
 142         min-width: 400px;
 143         overflow: hidden;
 144 }
 145
 146 /* If the board is too wide for the screen, shrink it to fit,
 147  * and then put the analysis below. */
 148 @media all and (max-width: 400px) {
 149         #boardcontainer {
 150                 width: 100%;
 151                 float: none;
 152         }
 153         #analysis {
 154                 min-width: 0;
 155         }
 156 }
 157
 158 /* If there is almost space for the analysis, shrink the board a bit, too. */
 159 @media all and (min-width: 500px) and (max-width: 810px) {
 160         #boardcontainer {
 161                 float: left;
 162                 width: 50%;
 163         }
 164         #analysis {
 165                 min-width: 0;
 166         }
 167 }
 168 a.move {
 169         color: black;
 170         text-decoration: none;
 171 }
 172 a.move.highlight {
 173         color: red;
 174         font-weight: bold;
 175 }
 176 a.move:hover {
 177         font-weight: bold;
 178         text-decoration: underline;
 179 }
 180
 181 #linenav {
 182         display: none;
 183 }
 184
 185 #games {
 186         font-size: smaller;
 187         margin-bottom: 0.5em;
 188 }
 189 .game {
 190         padding: 0.25em 1em 0.25em 1em;
 191         margin: 0;
 192         background: #eee;
 193         border-right: 1px solid #bbb;
 194 }
 195 .game:last-of-type {
 196         border-right: none;
 197 }
 198
 199 .pv, #pv, #history {  /* Mute move colors a bit. */
 200         color: #555;
 201 }
 202
 203 .imbalance-inverted-piece {
 204         display: none;
 205         filter: invert(1);
 206 }
 207
 208 .imbalance-piece, .imbalance-inverted-piece {
 209         width: 15px;
 210         height: 15px;
 211 }
 212
 213 @media (prefers-color-scheme: dark) {
 214
 215 :root {
 216         background: black;
 217         color: #eee;
 218 }
 219 .pv, #pv, #history {  /* Mute move colors a bit. */
 220         color: #bbb;
 221 }
 222 #numviewers {
 223         color: #bbb;
 224 }
 225 a.move, a.move:link {
 226         color: #eee;
 227 }
 228 a:link {
 229         color: rgb(128,128,238);
 230 }
 231 .imbalance-piece {
 232         display: none;
 233 }
 234 .imbalance-inverted-piece {
 235         display: initial;
 236 }
 237
 238 }