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