-.units {
- border-collapse: separate;
- border-spacing: 0;
- margin: 0 auto;
- white-space: nowrap;
-}
-.units th, .units td {
- border: 0;
- padding: 0 0.2em;
- background: transparent;
- text-align: left;
-}
-tr.alt td {
- font-size: 70%;
- padding-left: 0.5em;
-}
-.units tr th:first-child {
- padding-left: 0;
-}
-
table h2 {
padding: 1ex 0;
margin: 0;
text-align: center;
}
-.units thead th, .units tfoot th {
+tr.alt td {
font-size: 70%;
- font-weight: normal;
+ padding-left: 0.5em;
}
-.units td.unit {
- padding-right: 0;
-}
-.units td.unit + td.unit {
- padding-left: 0;
+.units {
+ border-collapse: separate;
+ border-spacing: 0;
+ margin: 0 auto;
+ white-space: nowrap;
+
+ th, td {
+ border: 0;
+ padding: 0 0.2em;
+ background: transparent;
+ text-align: left;
+ }
+
+ tr th:first-child {
+ padding-left: 0;
+ }
+
+ thead th, tfoot th {
+ font-size: 70%;
+ font-weight: normal;
+ }
+
+ td.unit {
+ & {
+ padding-right: 0;
+ }
+ & + td.unit {
+ padding-left: 0;
+ }
+ }
+
+ .val {
+ white-space: nowrap;
+ text-align: right;
+ }
}
+
.unit-composed {
font-size: 70%;
}
font-variant: small-caps;
}
-.units .val {
- white-space: nowrap;
- text-align: right;
-}
-
-.legend dt {
- float: none;
- text-align: left;
- margin-top: 1ex;
- font-weight: bold;
-}
-.legend dd:before {
- content: '• ';
-}
-.legend dd {
- text-indent: -1em;
- margin-left: 1em;
-}
-
.legend {
- display: table-cell;
- min-width: 20em;
- text-align: left;
+ dt {
+ float: none;
+ text-align: left;
+ margin-top: 1ex;
+ font-weight: bold;
+ }
+ dd:before {
+ content: '• ';
+ }
+ dd {
+ text-indent: -1em;
+ margin-left: 1em;
+ }
+
+ & {
+ display: table-cell;
+ min-width: 20em;
+ text-align: left;
+ }
}
.units {
float: left;
padding-bottom: 1em;
margin-right: 2em;
-}
-@media (max-width: 52em) {
- .units thead th:first-child,
- .units tbody .cat {
- position: absolute;
- visibility: hidden;
+ @media (max-width: 52em) {
+ thead th:first-child,
+ tbody .cat {
+ position: absolute;
+ visibility: hidden;
+ }
}
}
@media (max-width: 48em) {
.units {
- width: auto;
+ & {
+ width: auto;
+ }
+ th, td {
+ vertical-align: top;
+ }
+ td {
+ height: 2em;
+ }
+
+ td:nth-child(2) {
+ white-space: normal;
+ padding: 0;
+ }
+
+ tr.sub td:nth-child(2),
+ .cat,
+ .unit-speed,
+ .hurtrel,
+ .unit-pop, .unit-type,
+ .unit-shield,
+ .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%;
+ }
+ th.unit-attr {
+ position: absolute;
+ }
+ .unit-type {
+ text-align: left;
+ margin-left: 0;
+ }
+ .unit-speed {
+ margin-left: -6em;
+ }
+ .alt {
+ thead th:first-child,
+ .cat,
+ .unit-speed,
+ .hurtrel,
+ .unit-pop, .unit-type,
+ .unit-shield,
+ .gas {
+ margin-top: 2ex;
+ }
+ }
+ .cat {
+ margin-top: -2ex;
+ margin-left: 0;
+ text-align: left;
+ }
+
+ thead th:first-child {
+ margin-left: 0.5em;
+ }
+ thead th:first-child,
+ th.unit-speed,
+ th.hurtrel,
+ th.unit-shield,
+ th.gas {
+ margin-top: 2.2ex;
+ }
}
- .units th, .units td {
- vertical-align: top;
+}
+
+.units tbody tr:hover:not(.race) {
+ background: #EEE;
+}
+.unit-gas {
+ color: #040;
+}
+.unit-min, .unit-min a:not(:hover) {
+ color: #004;
+}
+.unit-supply {
+ color: #080;
+}
+.unit-o {color: #C08} /* organic */
+.unit-u {color: #44C} /* mechanic */
+.unit-p {color: #0A8} /* psionic */
+.unit-composed {
+ color: #C88;
+}
+.unit-air {
+ color: #08C;
+}
+.unit-x {color: #888}
+.unit-s {color: #890}
+.unit-m {color: #C70}
+.unit-l {color: #D22}
+.unit-h {color: #804}
+.magic-opt:before,
+.magic-opt:after {
+ color: #000;
+}
+.hurtrel, .units .hurtrel {
+ color: #778;
+}
+tbody .unit-shield {
+ color: #64A;
+}
+.unit-pdd {
+ color: #A8C;
+}
+.unit-splash {
+ color: #4A0;
+}
+.hurt-a {
+ color: #036;
+}
+.hurt-g {
+ color: #063;
+}
+.unit-massive {
+ color: #D88;
+}
+.unit-detect::before {
+ color: #0A8;
+}
+.unit-jump {
+ color: #8A4;
+}
+body .magic-perma {
+ text-decoration-color: #8C0;
+ -moz-text-decoration-color: #8C0;
+ -webkit-text-decoration-color: #8C0;
+}
+
+.s-dark {
+ .units tbody tr:hover:not(.race) {
+ background: #222;
}
- .units td {
- height: 2em;
+ .unit-gas {
+ color: #AC9;
}
-
- .units td:nth-child(2) {
- white-space: normal;
- padding: 0;
+ .unit-min, .unit-min a:not(:hover) {
+ color: #ABC;
}
-
- .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%;
+ .unit-supply {
+ color: #8C6;
}
- .units th.unit-attr {
- position: absolute;
+ .unit-o {color: #C5A} /* organic */
+ .unit-u {color: #66B} /* mechanic */
+ .unit-p {color: #0A8} /* psionic */
+ .unit-composed {
+ color: #A44;
}
- .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;
+ .unit-air {
+ color: #4AC;
}
-
- .units thead th:first-child {
- margin-left: 0.5em;
+ .unit-x {color: #666}
+ .unit-s {color: #AC6}
+ .unit-m {color: #C70}
+ .unit-l {color: #C44}
+ .unit-h {color: #C06}
+ .magic-opt:before,
+ .magic-opt:after {
+ color: #CCC;
+ }
+ .hurtrel, .units .hurtrel {
+ color: #887;
+ }
+ tbody .unit-shield {
+ color: #88A;
+ }
+ .unit-pdd {
+ color: #A8C;
+ }
+ .unit-splash {
+ color: #4A0;
+ }
+ .hurt-a {
+ color: #8AC;
+ }
+ .hurt-g {
+ color: #8CA;
+ }
+ .unit-massive {
+ color: #844;
+ }
+ .unit-detect::before {
+ color: #0A8;
}
- .units thead th:first-child,
- .units th.unit-speed,
- .units th.hurtrel,
- .units th.unit-shield,
- .units th.gas {
- margin-top: 2.2ex;
+ .unit-jump {
+ color: #780;
+ }
+ body .magic-perma {
+ text-decoration-color: #460;
+ -moz-text-decoration-color: #460;
+ -webkit-text-decoration-color: #460;
}
}
+.s-mono {
+ .unit-min {color: #000}
+ .unit-gas {color: #888}
+
+ .unit-o {color: #888}
+ .unit-u {color: #444}
+ .unit-p {color: #666}
+ .unit-supply {color: #888}
+
+ // distinctions significant in bonus damage
+ .unit-air {color: #AAA}
+ .unit-x {color: #000; text-shadow: #888 0 0 .1em}
+ .unit-s {color: #888}
+ .unit-m {color: #444}
+ .unit-l {color: #222}
+ .unit-h {color: #000}
+
+ tbody .unit-shield {
+ color: #888;
+ }
+ .unit-pdd {
+ color: #666;
+ }
+ .unit-splash {
+ color: #444;
+ }
+ .hurt-a {
+ color: #000;
+ }
+ .hurt-g {
+ color: #000;
+ }
+ .unit-massive {
+ color: #444;
+ }
+ .unit-detect::before {
+ color: #888;
+ }
+ .unit-jump {
+ color: #222;
+ }
+}