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