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-image: linear-gradient(to bottom, #3498db, #2980b9);
  69   box-shadow: 0px 2px 3px #666666;
  70   font-family: Arial;
  71   color: #ffffff;
  72   font-size: 20px;
  73   padding: 10px 20px 10px 20px;
  74   text-decoration: none;
  75     cursor: pointer;
  76 }
  77
  78 .btn:hover {
  79   background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  80   text-decoration: none;
  81 }
  82
  83 button.block {
  84     display: block;
  85     margin: 25px auto;
  86 }
  87
  88 table th {
  89     font-weight: bold;
  90 }
  91
  92 .left, .right {
  93     float: left;
  94     width: 50%;
  95 }
  96
  97 .button-container-horizontal, .button-container-vertical {
  98     margin: 15px 0;
  99     text-align: center;
 100 }
 101 .button-container-vertical {
 102     float: left;
 103 }
 104 /* All children except first: margin: 30px */
 105 .button-container-horizontal .btn:not(:first-child) {
 106     margin-left: 30px;
 107 }
 108 .button-container-vertical .btn {
 109     display: block;
 110     margin-left: 30px;
 111 }
 112 .button-container-vertical .btn:not(:first-child) {
 113     margin-top: 30px;
 114 }
 115
 116 button.validate {
 117     background-image: linear-gradient(to bottom, #6fa162, #40992e);
 118 }
 119 button.validate:hover {
 120     background-image: linear-gradient(to bottom, #37cc4e, #40c24f);
 121 }
 122 button.cancel {
 123     background-image: linear-gradient(to bottom, #d93470, #b82b47);
 124 }
 125 button.cancel:hover {
 126     background-image: linear-gradient(to bottom, #fc433c, #d93434);
 127 }
 128
 129 button:disabled, button:disabled:hover {
 130     background-image: linear-gradient(to bottom, #aaa, #777);
 131     cursor: default;
 132 }
 133
 134 /* players div */
 135
 136 #players {
 137     overflow: auto;
 138     margin-bottom: 15px;
 139 }
 140
 141 #players p {
 142     font-weight: bold;
 143     text-align: center;
 144 }
 145
 146 #inactive table {
 147     opacity: 0.6;
 148 }
 149
 150 table.list {
 151     border-collapse: collapse;
 152     width: 400px;
 153     margin: 0 auto;
 154     table-layout: fixed;
 155     font-size: 1.1rem;
 156     cursor: pointer;
 157 }
 158
 159 table.list td
 160 {
 161     border: 1px solid #ddd;
 162     padding: 10px;
 163 }
 164 table.list th {
 165     padding: 1em 10px;
 166     text-align: left;
 167 }
 168
 169 table.list tr:not(.title) {
 170     background-color: #aaa;
 171 }
 172 table.list tr:not(.title):nth-child(even){
 173     background-color: #ccc;
 174 }
 175 table.list tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover {
 176     background-color: lightyellow;
 177 }
 178
 179 /* pairings div */
 180
 181 .warning {
 182     color: red;
 183     margin-top: 25px;
 184 }
 185
 186 span.link {
 187     color: darkblue;
 188     cursor: pointer;
 189 }
 190
 191 .toto {
 192     color: darkgrey;
 193 }
 194
 195 .scored {
 196     background-color: lightgreen;
 197 }
 198
 199 #pairings p {
 200     font-weight: bold;
 201 }
 202
 203 td.score {
 204     padding-left: 30px;
 205 }
 206
 207 .pairing {
 208     float: left;
 209     width: 47%;
 210     padding-left: 3%;
 211     padding-bottom: 10px;
 212     cursor: pointer;
 213 }
 214 .unpaired {
 215     cursor: default;
 216 }
 217
 218 .pairing > table {
 219     font-size: 1.1rem;
 220 }
 221
 222 .pairing:hover:not(.scored) {
 223     background-color: yellow;
 224 }
 225
 226 #scoreInput {
 227     margin: 30px 0;
 228 }
 229
 230 #scoreInput table {
 231     width: 500px;
 232     margin: 0 auto;
 233     table-layout: fixed;
 234     font-size: 1.1rem;
 235 }
 236
 237 #scoreInput table td {overflow:hidden;}
 238
 239 #scoreInput table td:nth-of-type(2) {padding:0 10px;}
 240 #scoreInput table td:nth-of-type(3) {padding: 0 10px;}
 241
 242 #scoreInput table td > input {
 243     padding: 0 3px;
 244 }
 245
 246 #scoreInput table th {
 247     padding-bottom: 10px;
 248 }
 249
 250 /* Timer (dimensions given in javascript) */
 251
 252 #timer {
 253     position: absolute;
 254     z-index: 100;
 255     left: 0;
 256     top: 0;
 257     background-color: white;
 258     cursor: pointer;
 259     text-align: center;
 260 }
 261
 262 .timeout {
 263     color: darkred;
 264 }
 265
 266 #timer input {
 267     color: darkblue;
 268     position: absolute;
 269     display: block;
 270     left: 0;
 271     top: 0;
 272     width: 100%;
 273     height: 100%;
 274     text-align: center;
 275 }
 276
 277 img.close-cross {
 278     display: block;
 279     position: absolute;
 280     top: 0;
 281     right: 0;
 282     width: 30px;
 283 }
 284
 285 /* ranking div */
 286
 287 #ranking {
 288     margin-bottom: 15px;
 289     overflow: auto;
 290 }
 291
 292 table.ranking {
 293     border-collapse: collapse;
 294     width: 500px;
 295     margin: 0 auto;
 296     font-size: 1.1rem;
 297     display: block;
 298     float: left;
 299 }
 300
 301 table.ranking td
 302 {
 303     border: 1px solid #ddd;
 304     padding: 10px;
 305 }
 306 table.ranking th {
 307     padding: 1em 10px;
 308     text-align: left;
 309 }
 310
 311 table.ranking tr:not(.title) {
 312     background-color: #aaa;
 313 }
 314 table.ranking tr:not(.title):nth-child(even){
 315     background-color: #ccc;
 316 }
 317 table.ranking tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover {
 318     background-color: lightyellow;
 319 }