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