App.css (4039B)
1 #root { 2 display: flex; 3 flex-direction: column; 4 min-height: 100vh; 5 justify-content: space-between; 6 } 7 8 main { 9 flex: 1; 10 border-top: 1px solid #e1e1e7; 11 border-bottom: 1px solid #e1e1e7; 12 padding: 30px 0; 13 } 14 15 span.logo img { 16 max-height: 33px; 17 } 18 19 nav { 20 background: #f9f9fc; 21 border-bottom: 1px solid white; 22 } 23 24 nav ul { 25 display: flex; 26 flex-wrap: wrap; 27 justify-content: space-between; 28 padding: 0; 29 } 30 31 nav li { 32 flex: 1; 33 list-style-type: none; 34 white-space: nowrap; 35 } 36 37 nav li a { 38 text-transform: uppercase; 39 text-align: center; 40 font-size: 0.8em; 41 text-decoration: none; 42 padding: 10px; 43 display: block; 44 } 45 nav a.active { 46 font-weight: bold; 47 background: white; 48 } 49 50 table { 51 border-collapse: collapse; 52 width: 100%; 53 } 54 55 th, td { 56 padding: 5px 20px; 57 text-align: left; 58 } 59 60 th, label { 61 font-weight: normal; 62 font-size: 0.8em; 63 text-transform: uppercase; 64 color: #b0b0b6; 65 } 66 67 tbody tr:nth-child(even):not(.input) { 68 background-color: #f9f9fc; 69 } 70 71 footer { 72 padding: 5px; 73 display: flex; 74 flex-wrap: wrap; 75 justify-content: center; 76 align-items: center; 77 border-top: 1px solid white; 78 background: #f9f9fc; 79 } 80 footer span { 81 font-size: 0.8em; 82 margin: 5px; 83 } 84 footer span a { 85 font-size: 1em; 86 } 87 footer span button { 88 font-size: 1.5em; 89 flex: 1; 90 margin-left: 20px; 91 } 92 93 .right { 94 text-align: right; 95 } 96 97 .scoreInput { 98 font-size: 25px; 99 } 100 101 .loginForm, .exportForm { 102 margin: 30px; 103 } 104 .loginForm button, .loginForm input, .exportForm button { 105 width: 250px; 106 display: block; 107 } 108 109 .heatInfo { 110 padding: 20px; 111 } 112 .heatInfo li { 113 list-style: none; 114 } 115 116 .hidden { 117 display: none 118 } 119 120 .Leaderboard { 121 position: relative; 122 } 123 124 .Leaderboard header { 125 padding: 0 20px; 126 } 127 128 .loading { 129 width: 80px; 130 position: absolute; 131 right: 120px; 132 top: -29px; 133 font-size: 0.8em; 134 text-transform: uppercase; 135 color: #b0b0b6; 136 } 137 138 /* Show details toggle button */ 139 .show-details { 140 width: 50px; 141 height: 20px; 142 border-radius: 5px; 143 box-shadow: 0 1px #b1b0b6; 144 position: absolute; 145 right: 20px; 146 top: -15px; 147 transition: background 0.1s ease, box-shadow 0.1s ease; 148 } 149 .show-details .thumb { 150 text-transform: uppercase; 151 height: 12px; 152 width: 22px; 153 border-radius: 5px; 154 background: white; 155 border: 1px solid #cfced3; 156 position: absolute; 157 left: 3px; 158 transform: translateX(0); 159 transform: translateY(-50%); 160 transition: left 0.15s ease; 161 } 162 .show-details.toggled { 163 background: #f3f2f7; 164 box-shadow: 0 -1px #b1b0b6; 165 } 166 .show-details.toggled .thumb { 167 left: calc(50px - 29px); 168 } 169 .show-details span { 170 font-size: 0.8em; 171 text-transform: uppercase; 172 color: #b0b0b6; 173 right: 53px; 174 top: 1px; 175 position: absolute; 176 } 177 178 /* increment rank row number */ 179 table.leaderboard:not(.hide-rank) tr { 180 counter-increment: rowNumber; 181 } 182 table.leaderboard:not(.hide-rank) tr td:first-child::before { 183 content: counter(rowNumber); 184 min-width: 1em; 185 margin-right: 0.5em; 186 } 187 188 /* highlight totals */ 189 td.total { 190 font-weight: bold; 191 } 192 193 @media(min-width: 1600px) { 194 main > div { 195 width: 75%; 196 margin: 0 auto; 197 } 198 } 199 200 /* https://css-tricks.com/making-tables-responsive-with-minimal-css */ 201 @media(max-width: 1100px) { 202 table.leaderboard thead { 203 left: -9999px; 204 position: absolute; 205 visibility: hidden; 206 } 207 208 table.leaderboard tr { 209 display: flex; 210 flex-direction: row; 211 flex-wrap: wrap; 212 padding: 20px 0; 213 } 214 215 table.leaderboard tr:not(:last-child) { 216 border-bottom: 1px solid #e1e1e7; 217 } 218 219 table.leaderboard td { 220 margin: 0 -1px -1px 0; 221 padding-top: 35px; 222 margin-bottom: 25px; 223 position: relative; 224 width: 35%; 225 text-align: left !important; 226 } 227 228 table.leaderboard td:before { 229 content: attr(data-title); 230 position: absolute; 231 top: 3px; 232 left: 20px; 233 font-size: 0.8em; 234 text-transform: uppercase; 235 color: #b0b0b6; 236 } 237 238 table.leaderboard td:nth-child(-n+6) { 239 /* background: rgb(236, 236, 236); */ 240 } 241 242 table td button { 243 position: absolute; 244 bottom: 0; 245 height: 50px; 246 width: 100%; 247 } 248 249 table td:empty { 250 display: none; 251 } 252 }