style/sc.scss

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