Difference between revisions of "Foreground.css"
From Sega Retro
Scarred Sun (talk | contribs) |
Scarred Sun (talk | contribs) |
||
Line 1: | Line 1: | ||
− | @media | + | @media (max-width: 40em) { |
− | + | /* Hide column labels */ | |
− | + | .filehistory thead tr { | |
− | } | + | position: absolute; |
− | + | top: -9999em; | |
− | .filehistory | + | left: -9999em; |
− | + | } | |
− | + | .filehistory tr { | |
− | } | + | border: 0.125em solid #333; |
− | + | border-bottom: 0; | |
− | .filehistory | + | } |
− | + | /* Leave a space between table rows */ | |
− | + | .filehistory tr + .filehistory tr { | |
− | } | + | margin-top: 1.5em; |
+ | } | ||
+ | .filehistory th {display:none;} | ||
+ | /* Get table cells to act like rows */ | ||
+ | .filehistory tr, | ||
+ | .filehistory td { | ||
+ | display: block; | ||
+ | } | ||
+ | .filehistory td { | ||
+ | border: none; | ||
+ | /* Leave a space for data labels */ | ||
+ | padding-left: 50%; | ||
+ | } | ||
+ | /* Add data labels */ | ||
+ | .filehistory td:before { | ||
+ | content: attr(data-label) " "; | ||
+ | display: block; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | } | ||
+ | /* Stack labels vertically on smaller screens */ | ||
+ | @media (max-width: 20em) { | ||
+ | .filehistory td { | ||
+ | padding-left: 0.75em; | ||
+ | } | ||
+ | .filehistory td:before { | ||
+ | display: block; | ||
+ | margin-bottom: 0.75em; | ||
+ | margin-left: 0; | ||
+ | } | ||
} | } |
Revision as of 12:53, 6 September 2020
@media (max-width: 40em) { /* Hide column labels */ .filehistory thead tr { position: absolute; top: -9999em; left: -9999em; } .filehistory tr { border: 0.125em solid #333; border-bottom: 0; } /* Leave a space between table rows */ .filehistory tr + .filehistory tr { margin-top: 1.5em; } .filehistory th {display:none;} /* Get table cells to act like rows */ .filehistory tr, .filehistory td { display: block; } .filehistory td { border: none; /* Leave a space for data labels */ padding-left: 50%; } /* Add data labels */ .filehistory td:before { content: attr(data-label) " "; display: block; font-weight: bold; } } /* Stack labels vertically on smaller screens */ @media (max-width: 20em) { .filehistory td { padding-left: 0.75em; } .filehistory td:before { display: block; margin-bottom: 0.75em; margin-left: 0; } }