myheats

Live heats, scoring and leaderboard for sport events
git clone https://git.in0rdr.ch/myheats.git
Log | Files | Refs | Pull requests | README | LICENSE

App.css (2810B)

      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 nav {
     16   background: #f9f9fc;
     17   border-bottom: 1px solid white;
     18 }
     19 
     20 nav ul {
     21   display: flex;
     22   flex-wrap: wrap;
     23   justify-content: space-between;
     24   padding: 0;
     25 }
     26 
     27 nav li {
     28   flex: 1;
     29   list-style-type: none;
     30   white-space: nowrap;
     31 }
     32 
     33 nav li a {
     34   text-transform: uppercase;
     35   text-align: center;
     36   font-size: 0.8em;
     37   text-decoration: none;
     38   padding: 10px;
     39   display: block;
     40 }
     41 nav a.active {
     42   font-weight: bold;
     43   background: white;
     44 }
     45 
     46 table {
     47   border-collapse: collapse;
     48   width: 100%;
     49 }
     50 
     51 th, td {
     52   padding: 5px 20px;
     53   text-align: left;
     54 }
     55 
     56 th {
     57   font-weight: normal;
     58   font-size: 0.8em;
     59   text-transform: uppercase;
     60   color: #b0b0b6;
     61 }
     62 
     63 tbody tr:nth-child(even):not(.input) {
     64   background-color: #f9f9fc;
     65 }
     66 
     67 footer {
     68   padding: 5px;
     69   display: flex;
     70   flex-wrap: wrap;
     71   justify-content: space-between;
     72   align-items: center;
     73   border-top: 1px solid white;
     74   background: #f9f9fc;
     75 }
     76 footer span {
     77   flex: 1;
     78 }
     79 footer .login {
     80   text-align: right;
     81 }
     82 footer .login button {
     83   width: auto;
     84 }
     85 
     86 .right {
     87   text-align: right;
     88 }
     89 
     90 .scoreInput {
     91   font-size: 25px;
     92 }
     93 
     94 .loginForm, .exportForm {
     95   margin: 30px;
     96 }
     97 .loginForm button, .loginForm input, .exportForm button {
     98   width: 250px;
     99   display: block;
    100 }
    101 
    102 .heatInfo {
    103   padding: 20px;
    104 }
    105 .heatInfo li {
    106   list-style: none;
    107 }
    108 
    109 /* increment rank row number */
    110 table.leaderboard tr{
    111   counter-increment: rowNumber;
    112 }
    113 table.leaderboard tr td:first-child::before {
    114   content: counter(rowNumber);
    115   min-width: 1em;
    116   margin-right: 0.5em;
    117 }
    118 
    119 /* highlight totals */
    120 table.leaderboard td:last-child {
    121   font-weight: bold;
    122 }
    123 
    124 @media(min-width: 1600px) {
    125   main > div {
    126     width: 75%;
    127     margin: 0 auto;
    128   }
    129 }
    130 
    131 /* https://css-tricks.com/making-tables-responsive-with-minimal-css */
    132 @media(max-width: 1100px) {
    133   table thead {
    134     left: -9999px;
    135     position: absolute;
    136     visibility: hidden;
    137   }
    138 
    139   table tr {
    140     display: flex;
    141     flex-direction: row;
    142     flex-wrap: wrap;
    143     padding: 20px 0;
    144   }
    145 
    146   table tr:not(:last-child) {
    147     border-bottom: 1px solid #e1e1e7;
    148   }
    149 
    150   table td {
    151     margin: 0 -1px -1px 0;
    152     padding-top: 35px;
    153     margin-bottom: 25px;
    154     position: relative;
    155     width: 35%;
    156     text-align: left !important;
    157   }
    158 
    159   table td:before {
    160     content: attr(data-title);
    161     position: absolute;
    162     top: 3px;
    163     left: 20px;
    164     font-size: 0.8em;
    165     text-transform: uppercase;
    166     color: #b0b0b6;
    167   }
    168 
    169   table.leaderboard td:nth-child(-n+6) {
    170     /* background: rgb(236, 236, 236); */
    171   }
    172 
    173   table td button {
    174     position: absolute;
    175     bottom: 0;
    176     height: 50px;
    177     width: 100%;
    178   }
    179 
    180   table td:empty {
    181     display: none;
    182   }
    183 }