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 .units tbody tr:hover:not(.race) {
  21         background: #EEE;
  22 }
  23
  24 table h2 {
  25         padding: 1ex 0;
  26         margin: 0;
  27         text-align: center;
  28 }
  29 .units thead th, .units tfoot th {
  30         font-size: 70%;
  31         font-weight: normal;
  32 }
  33
  34 .units td.unit {
  35         padding-right: 0;
  36 }
  37 .units td.unit + td.unit {
  38         padding-left: 0;
  39 }
  40 .gas {
  41         color: #040;
  42 }
  43 .min {
  44         color: #004;
  45 }
  46 .unit-supply {
  47         color: #080;
  48 }
  49 .unit-o {color: #C08} /* organic */
  50 .unit-u {color: #44C} /* mechanic */
  51 .unit-p {color: #0A8} /* psionic */
  52 .unit-composed {
  53         color: #C88;
  54         font-size: 70%;
  55 }
  56 .unit-air {
  57         color: #08C;
  58 }
  59 .unit-x {color: #888}
  60 .unit-s {color: #890}
  61 .unit-m {color: #C70}
  62 .unit-l {color: #D22}
  63 .unit-h {color: #804}
  64 td .unit-jump,
  65 .hurt .unit-splash {
  66         position: absolute;
  67 }
  68 td .unit-massive {
  69         float: right;
  70         width: 0;
  71 }
  72 .hurtrel, .units .hurtrel {
  73         color: #778;
  74 }
  75 td.hurtrel {
  76         padding-left: 1em;
  77 }
  78 td.unit-shield,
  79 td.hurtrel {
  80         font-size: 70%;
  81 }
  82 tbody .unit-shield {
  83         color: #64A;
  84 }
  85 .unit-pdd {
  86         color: #A8C;
  87 }
  88 .unit-splash {
  89         color: #4A0;
  90 }
  91 .hurt-a {
  92         color: #036;
  93 }
  94 .hurt-g {
  95         color: #063;
  96 }
  97 .unit-massive {
  98         color: #D88;
  99 }
 100 .unit-detect::before {
 101         content: '!';
 102         color: #0A8;
 103         font-size: 70%;
 104         vertical-align: super;
 105 }
 106 .unit-jump {
 107         margin-left: -.2em;
 108         color: #8A4;
 109 }
 110 .unit-magic {
 111         padding-left: 0.5em;
 112 }
 113 .magic-opt::before {
 114         color: #000;
 115         content: '(';
 116         position: absolute;
 117         margin-left: -0.33em;
 118 }
 119 .magic-opt::after {
 120         color: #000;
 121         content: ')';
 122 }
 123 .magic-perma {
 124         text-decoration: underline;
 125                 text-decoration-color: #8C0;
 126            -moz-text-decoration-color: #8C0;
 127         -webkit-text-decoration-color: #8C0;
 128 }
 129
 130 .units .val {
 131         white-space: nowrap;
 132         text-align: right;
 133 }
 134
 135 .legend dt {
 136         float: none;
 137         text-align: left;
 138         margin-top: 1ex;
 139         font-weight: bold;
 140 }
 141 .legend dd:before {
 142         content: '• ';
 143 }
 144 .legend dd {
 145         text-indent: -1em;
 146         margin-left: 1em;
 147 }
 148
 149 .legend {
 150         display: table-cell;
 151         min-width: 20em;
 152         text-align: left;
 153 }
 154 .units {
 155         float: left;
 156         padding-bottom: 1em;
 157         margin-right: 2em;
 158 }
 159