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