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
  22 table h2 {
  23         padding: 1ex 0;
  24         margin: 0;
  25         text-align: center;
  26 }
  27 .units thead th, .units tfoot th {
  28         font-size: 70%;
  29         font-weight: normal;
  30 }
  31
  32 .units td.unit {
  33         padding-right: 0;
  34 }
  35 .units td.unit + td.unit {
  36         padding-left: 0;
  37 }
  38 .unit-composed {
  39         font-size: 70%;
  40 }
  41 td .unit-jump,
  42 .hurt .unit-splash {
  43         position: absolute;
  44 }
  45 td .unit-massive {
  46         float: right;
  47         width: 0;
  48 }
  49 td.hurtrel {
  50         padding-left: 1em;
  51 }
  52 td.unit-shield,
  53 td.hurtrel {
  54         font-size: 70%;
  55 }
  56 .unit-detect::before {
  57         content: '!';
  58         font-size: 70%;
  59         vertical-align: super;
  60 }
  61 .unit-jump {
  62         margin-left: -.2em;
  63 }
  64 .unit-magic {
  65         padding-left: 0.5em;
  66 }
  67 .magic-opt:before {
  68         content: '(';
  69         position: absolute;
  70         margin-left: -0.33em;
  71 }
  72 .magic-opt:after {
  73         content: ')';
  74 }
  75 .magic-perma {
  76         text-decoration: underline;
  77 }
  78
  79 .units .val {
  80         white-space: nowrap;
  81         text-align: right;
  82 }
  83
  84 .legend dt {
  85         float: none;
  86         text-align: left;
  87         margin-top: 1ex;
  88         font-weight: bold;
  89 }
  90 .legend dd:before {
  91         content: '• ';
  92 }
  93 .legend dd {
  94         text-indent: -1em;
  95         margin-left: 1em;
  96 }
  97
  98 .legend {
  99         display: table-cell;
 100         min-width: 20em;
 101         text-align: left;
 102 }
 103 .units {
 104         float: left;
 105         padding-bottom: 1em;
 106         margin-right: 2em;
 107 }
 108
 109 @media (max-width: 52em) {
 110         .units {
 111                 width: auto;
 112         }
 113         .units th {
 114         }
 115         .units td {
 116                 height: 2em;
 117         }
 118
 119         .units tbody .cat {
 120                 position: absolute;
 121                 visibility: hidden;
 122         }
 123         .units td:nth-child(2) {
 124                 max-width: 6.5em;
 125                 white-space: normal;
 126                 overflow: hidden;
 127         }
 128
 129         .units thead th:first-child,
 130         .units .cat,
 131         .units .unit-speed,
 132         .units .hurtrel,
 133         .units .unit-pop, .units .unit-type,
 134         .units .unit-shield,
 135         .units .unit-gas {
 136                 padding: 0;
 137                 position: absolute;
 138                 margin-top: 3.2ex;
 139                 margin-top: 1rem;
 140                 min-width: 4em;
 141                 text-align: right;
 142                 margin-left: -4.3em;
 143                 font-size: 70%;
 144         }
 145         .units th.unit-attr {
 146                 position: absolute;
 147         }
 148         .units .unit-type {
 149                 text-align: left;
 150                 margin-left: 0;
 151         }
 152         .units .unit-speed {
 153                 margin-left: -6em;
 154         }
 155         .units .alt thead th:first-child,
 156         .units .alt .cat,
 157         .units .alt .unit-speed,
 158         .units .alt .hurtrel,
 159         .units .alt .unit-pop, .units .alt .unit-type,
 160         .units .alt .unit-shield,
 161         .units .alt .gas {
 162                 margin-top: 2ex;
 163         }
 164         .units .cat {
 165                 margin-top: -2ex;
 166                 margin-left: 0;
 167                 text-align: left;
 168         }
 169
 170         .units thead th:first-child {
 171                 margin-left: 0.5em;
 172         }
 173         .units thead th:first-child,
 174         .units th.unit-speed,
 175         .units th.hurtrel,
 176         .units th.unit-shield,
 177         .units th.gas {
 178                 margin-top: 2.2ex;
 179         }
 180 }
 181