css/index.css

   1 /* General */
   2
   3 @import '../vendor/Ubuntu_googlefont.css';
   4
   5 body {
   6     font-family: Ubuntu, Verdana, sans-serif;
   7     margin: 0 auto;
   8     width: 800px;
   9     font-size: 1.1rem;
  10 }
  11
  12 .sidenav {
  13     height: 100%;
  14     width: 200px;
  15     position: fixed;
  16     z-index: 1;
  17     top: 0;
  18     left: 0;
  19     background-color: #111;
  20     overflow-x: hidden;
  21     padding: 20px 0 0 0;
  22     margin: 0;
  23 }
  24
  25 @media screen and (max-height: 450px) {
  26     .sidenav {padding-top: 15px;}
  27 }
  28
  29 .sidenav li {
  30     padding: 6px 8px 6px 16px;
  31     font-size: 25px;
  32     color: #818181;
  33     display: block;
  34     cursor: pointer;
  35 }
  36
  37 .sidenav li:hover {
  38     color: #f1f1f1;
  39 }
  40
  41 img.logo {
  42     width: 200px;
  43     position: fixed;
  44     display: block;
  45     left: 0;
  46     overflow-x: hidden;
  47     padding: 20px 0 0 0;
  48     margin: 0;
  49     top: 350px;
  50     z-index: 10;
  51 }
  52
  53 .hide {
  54     display: none;
  55 }
  56
  57 .clear {
  58     clear: both;
  59     overflow: auto;
  60 }
  61
  62 .main {
  63     margin-left: 200px; /* Same as the width of the sidenav */
  64     padding: 0px 10px;
  65 }
  66
  67 .btn {
  68   background-color: #3498db;
  69   background-image: linear-gradient(to bottom, #3498db, #2980b9);
  70   box-shadow: 0px 2px 3px #666666;
  71   font-family: Arial;
  72   color: #ffffff;
  73   font-size: 20px;
  74   padding: 10px 20px 10px 20px;
  75   text-decoration: none;
  76     cursor: pointer;
  77 }
  78
  79 .btn:hover {
  80   background-color: #3cb0fd;
  81   background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  82   text-decoration: none;
  83 }
  84
  85 button.block {
  86     display: block;
  87     margin: 25px auto;
  88 }
  89
  90 table th {
  91     font-weight: bold;
  92 }
  93
  94 .left, .right {
  95     float: left;
  96     width: 50%;
  97 }
  98
  99 .button-container-horizontal, .button-container-vertical {
 100     margin: 15px 0;
 101     text-align: center;
 102 }
 103 .button-container-vertical {
 104     float: left;
 105 }
 106 /* All children except first: margin: 30px */
 107 .button-container-horizontal .btn:not(:first-child) {
 108     margin-left: 30px;
 109 }
 110 .button-container-vertical .btn {
 111     display: block;
 112     margin-left: 30px;
 113 }
 114 .button-container-vertical .btn:not(:first-child) {
 115     margin-top: 30px;
 116 }
 117
 118 button.validate {
 119     background-image: linear-gradient(to bottom, #6fa162, #40992e);
 120 }
 121 button.validate:hover {
 122     background-image: linear-gradient(to bottom, #37cc4e, #40c24f);
 123 }
 124 button.cancel {
 125     background-image: linear-gradient(to bottom, #d93470, #b82b47);
 126 }
 127 button.cancel:hover {
 128     background-image: linear-gradient(to bottom, #fc433c, #d93434);
 129 }
 130
 131 /* players div */
 132
 133 #players {
 134     overflow: auto;
 135     margin-bottom: 15px;
 136 }
 137
 138 #players p {
 139     font-weight: bold;
 140     text-align: center;
 141 }
 142
 143 #inactive table {
 144     opacity: 0.6;
 145 }
 146
 147 table.list {
 148     border-collapse: collapse;
 149     width: 400px;
 150     margin: 0 auto;
 151     table-layout: fixed;
 152     font-size: 1.1rem;
 153     cursor: pointer;
 154 }
 155
 156 table.list td
 157 {
 158     border: 1px solid #ddd;
 159     padding: 10px;
 160 }
 161 table.list th {
 162     padding: 1em 10px;
 163     text-align: left;
 164 }
 165
 166 table.list tr:not(.title) {
 167     background-color: #aaa;
 168 }
 169 table.list tr:not(.title):nth-child(even){
 170     background-color: #ccc;
 171 }
 172 table.list tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover {
 173     background-color: lightyellow;
 174 }
 175
 176 /* pairings div */
 177
 178 .warning {
 179     color: red;
 180     margin-top: 25px;
 181 }
 182
 183 span.link {
 184     color: darkblue;
 185     cursor: pointer;
 186 }
 187
 188 .toto {
 189     color: darkgrey;
 190 }
 191
 192 .scored {
 193     background-color: lightgreen;
 194 }
 195
 196 #pairings p {
 197     font-weight: bold;
 198 }
 199
 200 td.score {
 201     padding-left: 30px;
 202 }
 203
 204 .pairing {
 205     float: left;
 206     width: 47%;
 207     padding-left: 3%;
 208     padding-bottom: 10px;
 209     cursor: pointer;
 210 }
 211 .unpaired {
 212     cursor: default;
 213 }
 214
 215 .pairing > table {
 216     font-size: 1.1rem;
 217 }
 218
 219 .pairing:hover:not(.scored) {
 220     background-color: yellow;
 221 }
 222
 223 #scoreInput {
 224     margin: 30px 0;
 225 }
 226
 227 #scoreInput table {
 228     width: 500px;
 229     margin: 0 auto;
 230     table-layout: fixed;
 231     font-size: 1.1rem;
 232 }
 233
 234 #scoreInput table td {overflow:hidden;}
 235
 236 #scoreInput table td:nth-of-type(2) {padding:0 10px;}
 237 #scoreInput table td:nth-of-type(3) {padding: 0 10px;}
 238
 239 #scoreInput table td > input {
 240     padding: 0 3px;
 241 }
 242
 243 #scoreInput table th {
 244     padding-bottom: 10px;
 245 }
 246
 247 /* Timer (dimensions given in javascript) */
 248
 249 #timer {
 250     position: absolute;
 251     z-index: 100;
 252     left: 0;
 253     top: 0;
 254     background-color: white;
 255     cursor: pointer;
 256     text-align: center;
 257 }
 258
 259 .timeout {
 260     color: red;
 261 }
 262
 263 img.close-cross {
 264     display: block;
 265     position: absolute;
 266     top: 0;
 267     right: 0;
 268     width: 30px;
 269 }
 270
 271 /* ranking div */
 272
 273 #ranking {
 274     margin-bottom: 15px;
 275     overflow: auto;
 276 }
 277
 278 table.ranking {
 279     border-collapse: collapse;
 280     width: 500px;
 281     margin: 0 auto;
 282     font-size: 1.1rem;
 283     display: block;
 284     float: left;
 285 }
 286
 287 table.ranking td
 288 {
 289     border: 1px solid #ddd;
 290     padding: 10px;
 291 }
 292 table.ranking th {
 293     padding: 1em 10px;
 294     text-align: left;
 295 }
 296
 297 table.ranking tr:not(.title) {
 298     background-color: #aaa;
 299 }
 300 table.ranking tr:not(.title):nth-child(even){
 301     background-color: #ccc;
 302 }
 303 table.ranking tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover {
 304     background-color: lightyellow;
 305 }