style/_dark.scss

   1 body {
   2         background: #000;
   3         color: #CCC;
   4 }
   5 a, a:visited {
   6         color: #BBB;
   7 }
   8 .l:hover a:active, .l:hover a:hover, /* prevent override */
   9 a:active, a:hover {
  10         color: #44E;
  11         text-decoration: none;
  12 }
  13
  14 dl.legend dt,
  15 .keys td {
  16         border-color: #888;
  17 }
  18 dl.legend-options dt {background: #333}
  19
  20 /* syntax highlighting */
  21
  22 .sy-comment    { color: #888 }
  23 .sy-constant   { color: #8AC }
  24 .sy-type,
  25 .sy-identifier { color: #C9B }
  26 .sy-special    { color: #A9C }
  27 .sy-error      { font-weight: bold; background-color: #800; color: #EEE }
  28 .sy-todo       { background-color: #880 }
  29
  30 .glyphs b      { color: #C44 }
  31
  32 /* character properties */
  33
  34 th, td {
  35         border-color: #555;
  36         background: #222;
  37 }
  38 .mapped tbody, .mapped colgroup,
  39 .dimap tbody, .dimap colgroup {
  40         border-color: #665;
  41 }
  42
  43 .glyphs small.digraph {
  44         background: #444;
  45         color: #AAA;
  46         opacity: 0.5;
  47 }
  48 .glyphs small.value {
  49         background: #633;
  50         color: #AAA;
  51         opacity: 0.4;
  52 }
  53
  54 .X  {background: #000} /* unidentified */
  55 .X > span {background: #898; background: rgba(255, 255, 255, .25)} /* invisible contents */
  56
  57 /* letter scripts */
  58 .Armenian,
  59 .Greek    {background: #532}
  60 .Cyrillic {background: #420}
  61 .Latin    {background: #440}
  62 .Aramaic,
  63 .Hebrew   {background: #452}
  64 .Arabic   {background: #343}
  65 .African  {background: #434}
  66 .Brahmic  {background: #411} /* same as number */
  67 .Khmer    {background: #410}
  68 .Hangul,
  69 .Syllabic {background: #230}
  70 .Katakana {background: #240}
  71 .Hiragana {background: #241}
  72 .Bopomofo {background: #041}
  73 .Han      {background: #143}
  74 .Alpha    {background: #020} /* other scripts */
  75
  76 /* other categories */
  77 .Nd, .Nl, .No         {background: #411} /* number */
  78 .Sc                   {background: #401} /* currency */
  79 .Sm                   {background: #303} /* math */
  80 .So                   {background: #204} /* symbol */
  81 .Pd, .Po, .Pc         {background: #124} /* punctuation */
  82 .Ps, .Pe, .Pi, .Pf    {background: #024} /* quote */
  83 .Lm, .Sk              {background: #044} /* spacing modifier */
  84 .Mn                   {background: #022} /* modifier */
  85 .Cc, .Cf {color: #AAA; background: #556} /* control */
  86 .Zs                   {background: #142} /* space */
  87 .Co, .Xi.Co           {background: #322} /* private */
  88 .Xi, .Cs              {background: #444} /* invalid */
  89 .Xd                   {color: #844} /* deprecated */
  90 .Xr                   {color: #888} /* reserved (digraph reverse or proposal) */
  91 .dimap .Xr            {background: #333} /* reversed digraph */
  92 .ccmap .Xr {opacity:.4}
  93
  94 /* implementation-based alternatives */
  95 .l1 {background: #411} /* bmp */
  96 .l2 {background: #321} /* proposed digraph */
  97 .l3 {background: #330} /* rfc-1345 digraph */
  98 .l4 {background: #030} /* ascii */
  99 .l5 {background: #00331D} /* ascii */
 100 .l0 {background: #222}
 101 .ex {     color: #777} /* disfavoured */
 102 .u-invalid {background: #333} /* impossible */
 103
 104 /* foreground representation */
 105 #digraphs .u-l4 {color: #4A4} /* partial */
 106 #digraphs .u-l5 {color: #6C4} /* experimental */
 107 #digraphs .u-l2 {color: #A44; color: rgba(191, 127, 127, .8)} /* unofficial */
 108 #digraphs .u-l1 {color: #D00; color: rgba(255, 63, 63, .8)} /* missing */
 109
 110 .p4::after {color: #F44}
 111 .p3::after {color: #E66}
 112 .p2::after {color: #C88}
 113 .p1::after,
 114 .p0::after {color: #CCC}
 115
 116 /* general colorization */
 117
 118 .c-sa,
 119 .g1 {background: #044}
 120 .c-na,
 121 .g2 {background: #040}
 122 .g3 {background: #340}
 123 .c-af,
 124 .g4 {background: #440}
 125 .c-eu,
 126 .g5 {background: #530}
 127 .g6 {background: #520}
 128 .c-as,
 129 .g7 {background: #500}
 130 .c-an,
 131 .g8 {background: #503}
 132 .c-oc,
 133 .g9 {background: #205}
 134 .no {background: #222}
 135
 136 .X:hover,
 137 .l:hover a, .l:hover a:visited,
 138 .g9 a:hover, .g9[onclick]:hover,
 139 .g8 a:hover, .g8[onclick]:hover,
 140 .g7 a:hover, .g7[onclick]:hover,
 141 .g6 a:hover, .g6[onclick]:hover,
 142 .g5 a:hover, .g5[onclick]:hover,
 143 .g4 a:hover, .g4[onclick]:hover,
 144 .g3 a:hover, .g3[onclick]:hover,
 145 .g2 a:hover, .g2[onclick]:hover {
 146         color: #000; /* on default (light) background hover */
 147 }
 148 .legend .ex:hover {background: #666}
 149 .X:hover small {color: #FFF}
 150
 151 /* images */
 152
 153 figcaption {
 154         color: #FFF;
 155         background: rgba(0, 0, 0, .5);
 156 }
 157 .gallery figure:hover ~ ul figcaption {
 158         /* mark all children */
 159         color: #000;
 160         background: rgba(255, 255, 255, .5);
 161 }
 162
 163 /* keyboard */
 164
 165 @media (max-width: 79em) {
 166         .keys td b,
 167         .keys .meta td b,
 168         .keys .ctrl td b,
 169         .keys .lead td b {
 170                 color: #000;
 171         }
 172 }