git.sesse.net Git - remoteglot/blob - 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 }