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 }
 103 #hiddenboard {
 104         display: none;
 105 }
 106 #bottompanel {
 107         display: block;
 108         width: 100%;
 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 #lomonosov {
 185         display: none;
 186 }
 187
 188 #games {
 189         font-size: smaller;
 190         margin-bottom: 0.5em;
 191 }
 192 .game {
 193         padding: 0.25em 1em 0.25em 1em;
 194         margin: 0;
 195         background: #eee;
 196         border-right: 1px solid #bbb;
 197 }
 198 .game:last-of-type {
 199         border-right: none;
 200 }
 201
 202 .pv, #pv, #history {  /* Mute move colors a bit. */
 203         color: #555;
 204 }
 205
 206 @media (prefers-color-scheme: dark) {
 207
 208 body {
 209         background: black;
 210         color: #eee;
 211 }
 212 .pv, #pv, #history {  /* Mute move colors a bit. */
 213         color: #bbb;
 214 }
 215 #numviewers {
 216         color: #bbb;
 217 }
 218 a.move, a.move:link {
 219         color: #eee;
 220 }
 221 a:link {
 222         color: rgb(128,128,238);
 223 }
 224
 225 }