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