X-Git-Url: http://git.shiar.net/sheet.git/blobdiff_plain/c09dbeb9c62930fc46ec793d4f18eda815cd8c34..HEAD:/sc.css diff --git a/sc.css b/sc.css index b8e3981..0c0a829 100644 --- a/sc.css +++ b/sc.css @@ -17,9 +17,6 @@ tr.alt td { .units tr th:first-child { padding-left: 0; } -.units tbody tr:hover:not(.race) { - background: #EEE; -} table h2 { padding: 1ex 0; @@ -37,50 +34,45 @@ table h2 { .units td.unit + td.unit { padding-left: 0; } -.unit-o {color: #C08} /* organic */ -.unit-u {color: #44C} /* mechanic */ -.unit-p {color: #0A8} /* psionic */ .unit-composed { - color: #C88; font-size: 70%; } -.unit.unit-s {color: #770} -.unit.unit-m {color: #C70} -.unit.unit-l {color: #D22} -.hurt.unit-s::before { - content: '~'; - color: #773; -} -.hurt.unit-l::before { - content: '*'; - color: #C66; -} -.unit-massive, +td .unit-jump, .hurt .unit-splash { position: absolute; } -.hurtrel, .units .hurtrel { - padding-left: 1em; - font-size: 70%; - color: #778; +td .unit-massive { + float: right; + width: 0; } -.unit-splash { - color: #4A0; +td.hurtrel { + padding-left: 1em; } -.unit-massive { - color: #A76; +td.unit-shield, +td.hurtrel { + font-size: 70%; } .unit-detect::before { content: '!'; - color: #0A8; font-size: 70%; vertical-align: super; } +.unit-jump { + margin-left: -.2em; +} .unit-magic { padding-left: 0.5em; } +.magic-opt:before { + content: '('; + position: absolute; + margin-left: -0.33em; +} +.magic-opt:after { + content: ')'; +} .magic-perma { - text-decoration: underline; + font-variant: small-caps; } .units .val { @@ -113,3 +105,79 @@ table h2 { margin-right: 2em; } +@media (max-width: 52em) { + .units thead th:first-child, + .units tbody .cat { + position: absolute; + visibility: hidden; + } +} +@media (max-width: 48em) { + .units { + width: auto; + } + .units th, .units td { + vertical-align: top; + } + .units td { + height: 2em; + } + + .units td:nth-child(2) { + white-space: normal; + padding: 0; + } + + .units tr.sub td:nth-child(2), + .units .cat, + .units .unit-speed, + .units .hurtrel, + .units .unit-pop, .units .unit-type, + .units .unit-shield, + .units .unit-gas { + padding: 0; + position: absolute; + margin-top: 3.2ex; + margin-top: 1rem; + min-width: 4em; + text-align: right; + margin-left: -4.3em; + font-size: 70%; + } + .units th.unit-attr { + position: absolute; + } + .units .unit-type { + text-align: left; + margin-left: 0; + } + .units .unit-speed { + margin-left: -6em; + } + .units .alt thead th:first-child, + .units .alt .cat, + .units .alt .unit-speed, + .units .alt .hurtrel, + .units .alt .unit-pop, .units .alt .unit-type, + .units .alt .unit-shield, + .units .alt .gas { + margin-top: 2ex; + } + .units .cat { + margin-top: -2ex; + margin-left: 0; + text-align: left; + } + + .units thead th:first-child { + margin-left: 0.5em; + } + .units thead th:first-child, + .units th.unit-speed, + .units th.hurtrel, + .units th.unit-shield, + .units th.gas { + margin-top: 2.2ex; + } +} +