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