Difference between revisions of "Foreground.css"
From Sega Retro
Scarred Sun (talk | contribs) (Test blanking) Tag: Blanking |
Scarred Sun (talk | contribs) |
||
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | + | @media (max-width: 40em) { | |
+ | /* Hide column labels */ | ||
+ | .filehistory thead tr { | ||
+ | position: absolute; | ||
+ | top: -9999em; | ||
+ | left: -9999em; | ||
+ | } | ||
+ | .filehistory tr { | ||
+ | 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; | ||
+ | } | ||
+ | } |
Latest revision as of 13:54, 6 September 2020
@media (max-width: 40em) { /* Hide column labels */ .filehistory thead tr { position: absolute; top: -9999em; left: -9999em; } .filehistory tr { 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; } }