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 }
  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