style/sc.scss

   1 .units {
   2         border-collapse: separate;
   3         border-spacing: 0;
   4         margin: 0 auto;
   5         white-space: nowrap;
   6 }
   7 .units th, .units td {
   8         border: 0;
   9         padding: 0 0.2em;
  10         background: transparent;
  11         text-align: left;
  12 }
  13 tr.alt td {
  14         font-size: 70%;
  15         padding-left: 0.5em;
  16 }
  17 .units tr th:first-child {
  18         padding-left: 0;
  19 }
  20
  21 table h2 {
  22         padding: 1ex 0;
  23         margin: 0;
  24         text-align: center;
  25 }
  26 .units thead th, .units tfoot th {
  27         font-size: 70%;
  28         font-weight: normal;
  29 }
  30
  31 .units td.unit {
  32         padding-right: 0;
  33 }
  34 .units td.unit + td.unit {
  35         padding-left: 0;
  36 }
  37 .unit-composed {
  38         font-size: 70%;
  39 }
  40 td .unit-jump,
  41 .hurt .unit-splash {
  42         position: absolute;
  43 }
  44 td .unit-massive {
  45         float: right;
  46         width: 0;
  47 }
  48 td.hurtrel {
  49         padding-left: 1em;
  50 }
  51 td.unit-shield,
  52 td.hurtrel {
  53         font-size: 70%;
  54 }
  55 .unit-detect::before {
  56         content: '!';
  57         font-size: 70%;
  58         vertical-align: super;
  59 }
  60 .unit-jump {
  61         margin-left: -.2em;
  62 }
  63 .unit-magic {
  64         padding-left: 0.5em;
  65 }
  66 .magic-opt:before {
  67         content: '(';
  68         position: absolute;
  69         margin-left: -0.33em;
  70 }
  71 .magic-opt:after {
  72         content: ')';
  73 }
  74 .magic-perma {
  75         font-variant: small-caps;
  76 }
  77
  78 .units .val {
  79         white-space: nowrap;
  80         text-align: right;
  81 }
  82
  83 .legend dt {
  84         float: none;
  85         text-align: left;
  86         margin-top: 1ex;
  87         font-weight: bold;
  88 }
  89 .legend dd:before {
  90         content: '• ';
  91 }
  92 .legend dd {
  93         text-indent: -1em;
  94         margin-left: 1em;
  95 }
  96
  97 .legend {
  98         display: table-cell;
  99         min-width: 20em;
 100         text-align: left;
 101 }
 102 .units {
 103         float: left;
 104         padding-bottom: 1em;
 105         margin-right: 2em;
 106 }
 107
 108 @media (max-width: 52em) {
 109         .units thead th:first-child,
 110         .units tbody .cat {
 111                 position: absolute;
 112                 visibility: hidden;
 113         }
 114 }
 115 @media (max-width: 48em) {
 116         .units {
 117                 width: auto;
 118         }
 119         .units th, .units td {
 120                 vertical-align: top;
 121         }
 122         .units td {
 123                 height: 2em;
 124         }
 125
 126         .units td:nth-child(2) {
 127                 white-space: normal;
 128                 padding: 0;
 129         }
 130
 131         .units tr.sub td:nth-child(2),
 132         .units .cat,
 133         .units .unit-speed,
 134         .units .hurtrel,
 135         .units .unit-pop, .units .unit-type,
 136         .units .unit-shield,
 137         .units .unit-gas {
 138                 padding: 0;
 139                 position: absolute;
 140                 margin-top: 3.2ex;
 141                 margin-top: 1rem;
 142                 min-width: 4em;
 143                 text-align: right;
 144                 margin-left: -4.3em;
 145                 font-size: 70%;
 146         }
 147         .units th.unit-attr {
 148                 position: absolute;
 149         }
 150         .units .unit-type {
 151                 text-align: left;
 152                 margin-left: 0;
 153         }
 154         .units .unit-speed {
 155                 margin-left: -6em;
 156         }
 157         .units .alt thead th:first-child,
 158         .units .alt .cat,
 159         .units .alt .unit-speed,
 160         .units .alt .hurtrel,
 161         .units .alt .unit-pop, .units .alt .unit-type,
 162         .units .alt .unit-shield,
 163         .units .alt .gas {
 164                 margin-top: 2ex;
 165         }
 166         .units .cat {
 167                 margin-top: -2ex;
 168                 margin-left: 0;
 169                 text-align: left;
 170         }
 171
 172         .units thead th:first-child {
 173                 margin-left: 0.5em;
 174         }
 175         .units thead th:first-child,
 176         .units th.unit-speed,
 177         .units th.hurtrel,
 178         .units th.unit-shield,
 179         .units th.gas {
 180                 margin-top: 2.2ex;
 181         }
 182 }
 183
 184 .units tbody tr:hover:not(.race) {
 185         background: #EEE;
 186 }
 187 .unit-gas {
 188         color: #040;
 189 }
 190 .unit-min, .unit-min a:not(:hover) {
 191         color: #004;
 192 }
 193 .unit-supply {
 194         color: #080;
 195 }
 196 .unit-o {color: #C08} /* organic */
 197 .unit-u {color: #44C} /* mechanic */
 198 .unit-p {color: #0A8} /* psionic */
 199 .unit-composed {
 200         color: #C88;
 201 }
 202 .unit-air {
 203         color: #08C;
 204 }
 205 .unit-x {color: #888}
 206 .unit-s {color: #890}
 207 .unit-m {color: #C70}
 208 .unit-l {color: #D22}
 209 .unit-h {color: #804}
 210 .magic-opt:before,
 211 .magic-opt:after {
 212         color: #000;
 213 }
 214 .hurtrel, .units .hurtrel {
 215         color: #778;
 216 }
 217 tbody .unit-shield {
 218         color: #64A;
 219 }
 220 .unit-pdd {
 221         color: #A8C;
 222 }
 223 .unit-splash {
 224         color: #4A0;
 225 }
 226 .hurt-a {
 227         color: #036;
 228 }
 229 .hurt-g {
 230         color: #063;
 231 }
 232 .unit-massive {
 233         color: #D88;
 234 }
 235 .unit-detect::before {
 236         color: #0A8;
 237 }
 238 .unit-jump {
 239         color: #8A4;
 240 }
 241 body .magic-perma {
 242                 text-decoration-color: #8C0;
 243            -moz-text-decoration-color: #8C0;
 244         -webkit-text-decoration-color: #8C0;
 245 }
 246
 247 .s-dark {
 248         .units tbody tr:hover:not(.race) {
 249                 background: #222;
 250         }
 251         .unit-gas {
 252                 color: #AC9;
 253         }
 254         .unit-min, .unit-min a:not(:hover) {
 255                 color: #ABC;
 256         }
 257         .unit-supply {
 258                 color: #8C6;
 259         }
 260         .unit-o {color: #C5A} /* organic */
 261         .unit-u {color: #66B} /* mechanic */
 262         .unit-p {color: #0A8} /* psionic */
 263         .unit-composed {
 264                 color: #A44;
 265         }
 266         .unit-air {
 267                 color: #4AC;
 268         }
 269         .unit-x {color: #666}
 270         .unit-s {color: #AC6}
 271         .unit-m {color: #C70}
 272         .unit-l {color: #C44}
 273         .unit-h {color: #C06}
 274         .magic-opt:before,
 275         .magic-opt:after {
 276                 color: #CCC;
 277         }
 278         .hurtrel, .units .hurtrel {
 279                 color: #887;
 280         }
 281         tbody .unit-shield {
 282                 color: #88A;
 283         }
 284         .unit-pdd {
 285                 color: #A8C;
 286         }
 287         .unit-splash {
 288                 color: #4A0;
 289         }
 290         .hurt-a {
 291                 color: #8AC;
 292         }
 293         .hurt-g {
 294                 color: #8CA;
 295         }
 296         .unit-massive {
 297                 color: #844;
 298         }
 299         .unit-detect::before {
 300                 color: #0A8;
 301         }
 302         .unit-jump {
 303                 color: #780;
 304         }
 305         body .magic-perma {
 306                                 text-decoration-color: #460;
 307                    -moz-text-decoration-color: #460;
 308                 -webkit-text-decoration-color: #460;
 309         }
 310 }