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

   1 body {
   2         font-family: sans-serif;
   3 }
   4 h3 {
   5         margin-top: 1em;
   6         margin-bottom: 0;
   7 }
   8 #score {
   9         font-size: x-large;
  10         margin-top: 0;
  11 }
  12 .window {
  13         position: absolute;
  14         width: 0px;
  15         height: 0px;
  16         opacity: 0.0;
  17 }
  18 .c1 {
  19         opacity: 0.75;
  20 }
  21 .l1arrow {
  22         opacity: 1.0;
  23 }
  24 .hidden {
  25         display: none;
  26 }
  27 .vir path {
  28         opacity: 0.0;
  29 }
  30 .vir path.l1arrow {
  31         opacity: 1.0;
  32 }
  33 #news {
  34         font-size: smaller;
  35 }
  36 #credits {
  37         font-size: smaller;
  38 }
  39 td {
  40         vertical-align: top;
  41 }
  42 p {
  43         margin-top: 0;
  44 }
  45 #sortbyscoreholder {
  46         font-size: smaller;
  47         margin: 0;
  48         font-style: italic;
  49 }
  50 #refutationlines {
  51         font-size: smaller;
  52 }
  53 #refutationlines .move {
  54         width: 3.5em;
  55 }
  56 #refutationlines .score {
  57         width: 3em;
  58         text-align: right;
  59         padding-right: 0.5em;
  60 }
  61 #refutationlines .depth {
  62         width: 2em;
  63         text-align: right;
  64         padding-right: 0.7em;
  65 }
  66 .white-1e1d7.nonuglyhighlight {
  67         background-color: #cce5cf;
  68 }
  69 .black-3c85d.nonuglyhighlight {
  70         background-color: #9ab6a6;
  71 }
  72 #boardcontainer {
  73         width: 400px;
  74         margin-right: 1em;
  75         margin-bottom: 1em;
  76         float: left;
  77 }
  78 #board {
  79         display: block;
  80         width: 100%;
  81         padding: 0;
  82 }
  83 #hiddenboard {
  84         display: none;
  85 }
  86 #bottompanel {
  87         display: block;
  88         width: 100%;
  89         font-size: smaller;
  90         margin-top: 0.5em;
  91         margin-bottom: 0;
  92 }
  93 #numviewers {
  94         width: auto;
  95         text-align: center;
  96 }
  97 #whiteclock {
  98         float: left;
  99         width: 20%;
 100         text-align: left;
 101 }
 102 #blackclock {
 103         float: right;
 104         width: 20%;
 105         text-align: right;
 106         margin-right: 5px;
 107 }
 108 .running-clock {
 109         font-weight: bold;
 110 }
 111 #analysis {
 112         display: block;
 113         min-width: 400px;
 114         overflow: hidden;
 115 }
 116 #rootgame {
 117         white-space: pre;
 118         font-family: monospace;
 119 }
 120
 121 /* If the board is too wide for the screen, shrink it to fit,
 122  * and then put the analysis below. */
 123 @media all and (max-width: 400px) {
 124         #boardcontainer {
 125                 width: 100%;
 126                 float: none;
 127         }
 128         #analysis {
 129                 min-width: 0;
 130         }
 131 }
 132
 133 /* If there is almost space for the analysis, shrink the board a bit, too. */
 134 @media all and (min-width: 500px) and (max-width: 810px) {
 135         #boardcontainer {
 136                 float: left;
 137                 width: 50%;
 138         }
 139         #analysis {
 140                 min-width: 0;
 141         }
 142 }
 143 a.move {
 144         color: black;
 145         text-decoration: none;
 146 }
 147 a.move.highlight {
 148         color: red;
 149         font-weight: bold;
 150 }
 151 a.move:hover {
 152         font-weight: bold;
 153         text-decoration: underline;
 154 }
 155
 156 #linenav {
 157         display: none;
 158 }
 159
 160 /* Opening display */
 161 .num {
 162         padding-left: 0.5em;
 163         padding-right: 0.5em;
 164         text-align: right;
 165 }
 166 .winbars {
 167         width: 20em;
 168         font-size: small;
 169         font-weight: bold;
 170         text-align: center;
 171 }
 172 .winbars table {
 173         border: 1px solid black;
 174         width: 100%;
 175         border-collapse: collapse;
 176 }
 177 .winbars table td {
 178         border: 1px solid black;
 179         overflow: hidden;
 180         max-width: 0px;
 181 }
 182 .winbars table td.white {
 183         background-color: white;
 184         color: black;
 185 }
 186 .winbars table td.draw {
 187         background-color: gray;
 188         color: white;
 189 }
 190 .winbars table td.black {
 191         background-color: black;
 192         color: white;
 193 }