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 /* players div */
  69
  70 #players {
  71     overflow: auto;
  72 }
  73
  74 #players p {
  75     font-weight: bold;
  76     text-align: center;
  77 }
  78
  79 #active, #inactive {
  80     float: left;
  81     width: 50%;
  82 }
  83
  84 #inactive table {
  85     opacity: 0.6;
  86 }
  87
  88 table.list {
  89     border-collapse: collapse;
  90     width: 400px;
  91     margin: 0 auto;
  92     table-layout: fixed;
  93     font-size: 1.1rem;
  94     cursor: pointer;
  95 }
  96
  97 table.list td
  98 {
  99     border: 1px solid #ddd;
 100     padding: 10px;
 101 }
 102 table.list th {
 103     padding: 1em 10px;
 104     text-align: left;
 105 }
 106
 107 table.list tr:not(.title) {
 108     background-color: #aaa;
 109 }
 110 table.list tr:not(.title):nth-child(even){
 111     background-color: #ccc;
 112 }
 113 table.list tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover {
 114     background-color: lightyellow;
 115 }
 116
 117 /* ranking div */
 118
 119 table.ranking {
 120     border-collapse: collapse;
 121     width: 500px;
 122     margin: 0 auto;
 123     font-size: 1.1rem;
 124 }
 125
 126 table.ranking td
 127 {
 128     border: 1px solid #ddd;
 129     padding: 10px;
 130 }
 131 table.ranking th {
 132     padding: 1em 10px;
 133     text-align: left;
 134 }
 135
 136 table.ranking tr:not(.title) {
 137     background-color: #aaa;
 138 }
 139 table.ranking tr:not(.title):nth-child(even){
 140     background-color: #ccc;
 141 }
 142 table.ranking tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover {
 143     background-color: lightyellow;
 144 }
 145
 146 table.ranking th.scoring {
 147     cursor: pointer;
 148 }
 149
 150 .active {
 151     background-color: yellow;
 152 }
 153
 154 /* pairings div */
 155
 156 button.block {
 157     display: block;
 158     margin: 30px auto;
 159 }
 160
 161 .button-container {
 162     margin-top: 30px;
 163     text-align: center;
 164 }
 165
 166 button.cancel {
 167     margin-left: 30px;
 168     background-image: linear-gradient(to bottom, #d93470, #b82b47);
 169 }
 170 button.cancel:hover {
 171     background-image: linear-gradient(to bottom, #fc433c, #d93434);
 172 }
 173
 174 .scored {
 175     background-color: lightgreen;
 176 }
 177
 178 #pairings p {
 179     font-weight: bold;
 180 }
 181
 182 td.score {
 183     padding-left: 30px;
 184 }
 185
 186 .pairing {
 187     float: left;
 188     width: 47%;
 189     padding-left: 3%;
 190     padding-bottom: 10px;
 191     cursor: pointer;
 192 }
 193 .unpaired {
 194     cursor: default;
 195 }
 196 .scored {
 197     cursor: default;
 198 }
 199
 200 .pairing > table {
 201     font-size: 1.1rem;
 202 }
 203
 204 .pairing:hover:not(.scored) {
 205     background-color: yellow;
 206 }
 207
 208 #scoreInput {
 209     margin: 30px 0;
 210 }
 211
 212 #scoreInput table {
 213     width: 500px;
 214     margin: 0 auto;
 215     table-layout: fixed;
 216     font-size: 1.1rem;
 217 }
 218
 219 #scoreInput table td {overflow:hidden;}
 220
 221 #scoreInput table td:nth-of-type(2) {padding:0 10px;}
 222 #scoreInput table td:nth-of-type(3) {padding: 0 10px;}
 223
 224 #scoreInput table td > input {
 225     padding: 0 3px;
 226 }
 227
 228 #scoreInput table th {
 229     padding-bottom: 10px;
 230 }