dark.css

   1 @import url(light.css?1.11);
   2
   3 body {
   4         background: #000;
   5         color: #CCC;
   6 }
   7 a, a:visited {
   8         color: #BBB;
   9 }
  10 .l:hover a:active, .l:hover a:hover, /* prevent override */
  11 a:active, a:hover {
  12         color: #44E;
  13         text-decoration: none;
  14 }
  15
  16 dl.legend dt,
  17 .keys td {
  18         border-color: #888;
  19 }
  20 dl.legend-options dt {background: #333}
  21
  22 /* syntax highlighting */
  23
  24 .sy-comment    { color: #888 }
  25 .sy-constant   { color: #8AC }
  26 .sy-type,
  27 .sy-identifier { color: #C9B }
  28 .sy-special    { color: #A9C }
  29 .sy-error      { font-weight: bold; background-color: #800; color: #EEE }
  30 .sy-todo       { background-color: #880 }
  31
  32 .glyphs b      { color: #C44 }
  33
  34 /* character properties */
  35
  36 th, td {
  37         border-color: #555;
  38         background: #222;
  39 }
  40 .mapped tbody, .mapped colgroup,
  41 .dimap tbody, .dimap colgroup {
  42         border-color: #665;
  43 }
  44
  45 .glyphs small.digraph {
  46         background: #444;
  47         color: #AAA;
  48         opacity: 0.5;
  49 }
  50 .glyphs small.value {
  51         background: #633;
  52         color: #AAA;
  53         opacity: 0.4;
  54 }
  55
  56 .X  {background: #000} /* unidentified */
  57 .Xr {background: #111} /* reverse */
  58 .Co, .Xi.Co {background: #322} /* private */
  59
  60 /* implementation-based alternatives */
  61 .l1 {background: #411} /* bmp */
  62 .l2 {background: #321} /* proposed digraph */
  63 .l3 {background: #330} /* rfc-1345 digraph */
  64 .l4 {background: #030} /* ascii */
  65 .l5 {background: #00331D} /* ascii */
  66 .l0 {background: #222}
  67 .ex {     color: #777} /* disfavoured */
  68 .u-invalid {background: #333} /* impossible */
  69
  70 .p4::after {color: #F44}
  71 .p3::after {color: #E66}
  72 .p2::after {color: #C88}
  73 .p1::after,
  74 .p0::after {color: #CCC}
  75
  76 /* general colorization */
  77
  78 .c-sa,
  79 .g1 {background: #044}
  80 .c-na,
  81 .g2 {background: #040}
  82 .g3 {background: #340}
  83 .c-af,
  84 .g4 {background: #440}
  85 .c-eu,
  86 .g5 {background: #530}
  87 .g6 {background: #520}
  88 .c-as,
  89 .g7 {background: #500}
  90 .c-an,
  91 .g8 {background: #503}
  92 .c-oc,
  93 .g9 {background: #205}
  94 .no {background: #222}
  95
  96 .X:hover,
  97 .l:hover a, .l:hover a:visited,
  98 .g9 a:hover, .g9[onclick]:hover,
  99 .g8 a:hover, .g8[onclick]:hover,
 100 .g7 a:hover, .g7[onclick]:hover,
 101 .g6 a:hover, .g6[onclick]:hover,
 102 .g5 a:hover, .g5[onclick]:hover,
 103 .g4 a:hover, .g4[onclick]:hover,
 104 .g3 a:hover, .g3[onclick]:hover,
 105 .g2 a:hover, .g2[onclick]:hover {
 106         color: #000; /* on default (light) background hover */
 107 }
 108 .legend .ex:hover {background: #666}
 109 .X:hover small {color: #FFF}
 110
 111 /* images */
 112
 113 figcaption {
 114         color: #FFF;
 115         background: rgba(0, 0, 0, .5);
 116 }
 117 .gallery figure:hover ~ ul figcaption {
 118         /* mark all children */
 119         color: #000;
 120         background: rgba(255, 255, 255, .5);
 121 }
 122
 123 /* starcraft */
 124
 125 .units tbody tr:hover:not(.race) {
 126         background: #222;
 127 }
 128 .unit-gas {
 129         color: #AC9;
 130 }
 131 .unit-min, .unit-min a:not(:hover) {
 132         color: #ABC;
 133 }
 134 .unit-supply {
 135         color: #8C6;
 136 }
 137 .unit-o {color: #C5A} /* organic */
 138 .unit-u {color: #66B} /* mechanic */
 139 .unit-p {color: #0A8} /* psionic */
 140 .unit-composed {
 141         color: #A44;
 142 }
 143 .unit-air {
 144         color: #4AC;
 145 }
 146 .unit-x {color: #666}
 147 .unit-s {color: #AC6}
 148 .unit-m {color: #C70}
 149 .unit-l {color: #C44}
 150 .unit-h {color: #C06}
 151 .magic-opt:before,
 152 .magic-opt:after {
 153         color: #CCC;
 154 }
 155 .hurtrel, .units .hurtrel {
 156         color: #887;
 157 }
 158 tbody .unit-shield {
 159         color: #88A;
 160 }
 161 .unit-pdd {
 162         color: #A8C;
 163 }
 164 .unit-splash {
 165         color: #4A0;
 166 }
 167 .hurt-a {
 168         color: #8AC;
 169 }
 170 .hurt-g {
 171         color: #8CA;
 172 }
 173 .unit-massive {
 174         color: #844;
 175 }
 176 .unit-detect::before {
 177         color: #0A8;
 178 }
 179 .unit-jump {
 180         color: #780;
 181 }
 182 body .magic-perma {
 183                 text-decoration-color: #460;
 184            -moz-text-decoration-color: #460;
 185         -webkit-text-decoration-color: #460;
 186 }
 187
 188 /* keyboard */
 189
 190 @media (max-width: 79em) {
 191         .keys td b,
 192         .keys .meta td b,
 193         .keys .ctrl td b,
 194         .keys .lead td b {
 195                 color: #000;
 196         }
 197 }