css/index.css

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