sc.css

   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         vertical-align: top;
  13 }
  14 tr.alt td {
  15         font-size: 70%;
  16         padding-left: 0.5em;
  17 }
  18 .units tr th:first-child {
  19         padding-left: 0;
  20 }
  21 .units tbody tr:hover:not(.race) {
  22         background: #EEE;
  23 }
  24
  25 table h2 {
  26         padding: 1ex 0;
  27         margin: 0;
  28         text-align: center;
  29 }
  30 .units thead th, .units tfoot th {
  31         font-size: 70%;
  32         font-weight: normal;
  33 }
  34
  35 .units td.unit {
  36         padding-right: 0;
  37 }
  38 .units td.unit + td.unit {
  39         padding-left: 0;
  40 }
  41 .gas {
  42         color: #040;
  43 }
  44 .min, .min a:not(:hover) {
  45         color: #004;
  46 }
  47 .unit-supply {
  48         color: #080;
  49 }
  50 .unit-o {color: #C08} /* organic */
  51 .unit-u {color: #44C} /* mechanic */
  52 .unit-p {color: #0A8} /* psionic */
  53 .unit-composed {
  54         color: #C88;
  55         font-size: 70%;
  56 }
  57 .unit-air {
  58         color: #08C;
  59 }
  60 .unit-x {color: #888}
  61 .unit-s {color: #890}
  62 .unit-m {color: #C70}
  63 .unit-l {color: #D22}
  64 .unit-h {color: #804}
  65 td .unit-jump,
  66 .hurt .unit-splash {
  67         position: absolute;
  68 }
  69 td .unit-massive {
  70         float: right;
  71         width: 0;
  72 }
  73 .hurtrel, .units .hurtrel {
  74         color: #778;
  75 }
  76 td.hurtrel {
  77         padding-left: 1em;
  78 }
  79 td.unit-shield,
  80 td.hurtrel {
  81         font-size: 70%;
  82 }
  83 tbody .unit-shield {
  84         color: #64A;
  85 }
  86 .unit-pdd {
  87         color: #A8C;
  88 }
  89 .unit-splash {
  90         color: #4A0;
  91 }
  92 .hurt-a {
  93         color: #036;
  94 }
  95 .hurt-g {
  96         color: #063;
  97 }
  98 .unit-massive {
  99         color: #D88;
 100 }
 101 .unit-detect::before {
 102         content: '!';
 103         color: #0A8;
 104         font-size: 70%;
 105         vertical-align: super;
 106 }
 107 .unit-jump {
 108         margin-left: -.2em;
 109         color: #8A4;
 110 }
 111 .unit-magic {
 112         padding-left: 0.5em;
 113 }
 114 .magic-opt::before {
 115         color: #000;
 116         content: '(';
 117         position: absolute;
 118         margin-left: -0.33em;
 119 }
 120 .magic-opt::after {
 121         color: #000;
 122         content: ')';
 123 }
 124 .magic-perma {
 125         text-decoration: underline;
 126                 text-decoration-color: #8C0;
 127            -moz-text-decoration-color: #8C0;
 128         -webkit-text-decoration-color: #8C0;
 129 }
 130
 131 .units .val {
 132         white-space: nowrap;
 133         text-align: right;
 134 }
 135
 136 .legend dt {
 137         float: none;
 138         text-align: left;
 139         margin-top: 1ex;
 140         font-weight: bold;
 141 }
 142 .legend dd:before {
 143         content: '• ';
 144 }
 145 .legend dd {
 146         text-indent: -1em;
 147         margin-left: 1em;
 148 }
 149
 150 .legend {
 151         display: table-cell;
 152         min-width: 20em;
 153         text-align: left;
 154 }
 155 .units {
 156         float: left;
 157         padding-bottom: 1em;
 158         margin-right: 2em;
 159 }
 160
 161 @media (max-width: 52em) {
 162         .units {
 163                 width: auto;
 164         }
 165         .units th {
 166         }
 167         .units td {
 168                 height: 2em;
 169         }
 170
 171         .units tbody .cat {
 172                 position: absolute;
 173                 visibility: hidden;
 174         }
 175         .units td:nth-child(2) {
 176                 max-width: 6.5em;
 177                 white-space: normal;
 178                 overflow: hidden;
 179         }
 180
 181         .units thead th:first-child,
 182         .units .cat,
 183         .units .unit-speed,
 184         .units .hurtrel,
 185         .units .unit-pop, .units .unit-type,
 186         .units .unit-shield,
 187         .units .gas {
 188                 padding: 0;
 189                 position: absolute;
 190                 margin-top: 3.2ex;
 191                 margin-top: 1rem;
 192                 min-width: 4em;
 193                 text-align: right;
 194                 margin-left: -4.3em;
 195                 font-size: 70%;
 196         }
 197         .units th.unit-attr {
 198                 position: absolute;
 199         }
 200         .units .unit-type {
 201                 text-align: left;
 202                 margin-left: 0;
 203         }
 204         .units .unit-speed {
 205                 margin-left: -6em;
 206         }
 207         .units .alt thead th:first-child,
 208         .units .alt .cat,
 209         .units .alt .unit-speed,
 210         .units .alt .hurtrel,
 211         .units .alt .unit-pop, .units .alt .unit-type,
 212         .units .alt .unit-shield,
 213         .units .alt .gas {
 214                 margin-top: 2ex;
 215         }
 216         .units .cat {
 217                 margin-top: -2ex;
 218                 margin-left: 0;
 219                 text-align: left;
 220         }
 221
 222         .units thead th:first-child {
 223                 margin-left: 0.5em;
 224         }
 225         .units thead th:first-child,
 226         .units th.unit-speed,
 227         .units th.hurtrel,
 228         .units th.unit-shield,
 229         .units th.gas {
 230                 margin-top: 2.2ex;
 231         }
 232 }
 233