style: reuse key command styles for continents
authorMischa POSLAWSKY <perl@shiar.org>
Sat, 6 Feb 2010 01:34:59 +0000 (01:34 +0000)
committerMischa POSLAWSKY <perl@shiar.org>
Sat, 6 Feb 2010 03:14:40 +0000 (03:14 +0000)
Merge the (more saturated) keyboard colours with continent classes for more
consistent palette usage and less maintenance (for example allowing circus
styling for free).

Save less saturated versions (derived from old continent classes) of light
and dark as lite and darklite.

base.css
circus.css
countries.plp
dark.css
darklite.css [new file with mode: 0644]
lite.css [new file with mode: 0644]
unicode.plp

index 139c94c..078b27d 100644 (file)
--- a/base.css
+++ b/base.css
@@ -324,15 +324,6 @@ td.di-a       {background: #EFD} /* ascii */
 td.di-rare    {background: #EEE} /* disfavoured */
 td.di-invalid {background: #BBB} /* impossible */
 
-/* continents */
-td.c-af       {background: #FFC}
-td.c-eu       {background: #FDC}
-td.c-as       {background: #FDD}
-td.c-oc       {background: #EEDDF4}
-td.c-aa       {background: #E3E8FF}
-td.c-sa       {background: #DFF}
-td.c-na       {background: #DFD}
-
 /* code syntax */
 .sy-comment    { color: #888 }
 .sy-constant   { color: #008 }
@@ -384,23 +375,38 @@ td.di-a:hover                                      {background: #CF8}
 
 /* key type colorization */
 
+td.c-na,
 .pm {background: #BFB}   /* motion */
 .po {background: #DFA}   /* window */
+td.c-af,
 .co {background: #FFA}   /* command */
+td.c-sa,
 .ci {background: #BFE}   /* info */
+td.c-eu,
 .cp {background: #FDA}   /* TODO */
 .mi {background: #FCA}   /* insert mode */
+td.c-as,
 .mo {background: #FCC}   /* mode */
+td.c-aa,
 .mv {background: #ECE}   /* visual mode */
+td.c-oc,
 .me {background: #CCF}   /* key mode */
 
+td.c-na:hover,
 .pm a:hover, .pm[onclick]:hover {background: #7E7}
 .po a:hover, .po[onclick]:hover {background: #CE6}
+td.c-sa:hover,
 .ci a:hover, .ci[onclick]:hover {background: #5ED}
+td.c-eu:hover,
+.cp a:hover, .cp[onclick]:hover {background: #FA6}
 .mi a:hover, .mi[onclick]:hover {background: #F97}
+td.c-as:hover,
 .mo a:hover, .mo[onclick]:hover {background: #F88}
+td.c-oc:hover,
 .me a:hover, .me[onclick]:hover {background: #99F}
+td.c-aa:hover,
 .mv a:hover, .mv[onclick]:hover {background: #D9D}
+td.c-af:hover,
 .co a:hover, .co[onclick]:hover {background: #EE4}
 
 .no {
index 7b885dc..d1f6f9e 100644 (file)
@@ -1,14 +1,22 @@
 @import url(base.css);
 @import url(terse.css) all and (max-width: 80em);
 
+td.Co                      {background: #DBB} /* private */
+td.c-na,
 .pm {background: #8F8} /* motion */
 .po {background: #BF6} /* window */
+td.c-af,
 .co {background: #FF6} /* command */
+td.c-sa,
 .ci {background: #8FD} /* info */
+td.c-eu,
 .cp {background: #FC6}
 .mi {background: #F96} /* insert mode */
+td.c-as,
 .mo {background: #F77} /* mode */
+td.c-aa,
 .mv {background: #E8E} /* visual mode */
+td.c-oc,
 .me {background: #9AF} /* key mode */
 
 {background: #000; color: #7E7}
 {background: #000; color: #99F}
 {background: #000; color: #E8E}
 
+td.Co:hover                     {background: #000; color: #DBB} /* private */
+
+td.c-na:hover,
 .pm a:hover, .pm[onclick]:hover {background: #000; color: #7E7}
 .po a:hover, .po[onclick]:hover {background: #000; color: #CE6}
+td.c-sa:hover,
 .ci a:hover, .ci[onclick]:hover {background: #000; color: #8FD}
+td.c-eu:hover,
+.cp a:hover, .cp[onclick]:hover {background: #000; color: #FA6}
+td.c-af:hover,
 .co a:hover, .co[onclick]:hover {background: #000; color: #FF7}
 .mi a:hover, .mi[onclick]:hover {background: #000; color: #FFA070}
+td.c-as:hover,
 .mo a:hover, .mo[onclick]:hover {background: #000; color: #F77}
+td.c-oc:hover,
 .me a:hover, .me[onclick]:hover {background: #000; color: #99F}
+td.c-aa:hover,
 .mv a:hover, .mv[onclick]:hover {background: #000; color: #E8E}
 
 dl.legend dt.ext,
index 838a288..38c5e1a 100644 (file)
@@ -6,7 +6,7 @@ Html({
        description =>
                "Table of ISO-3166-2 country codes with the names of reserved territories.",
        keywords => [qw'country code cc tld territory land table'],
-       stylesheet => [qw'light dark mono red'],
+       stylesheet => [qw'light dark circus mono red'],
 });
 
 :>
index 2f2729e..da7ee26 100644 (file)
--- a/dark.css
+++ b/dark.css
@@ -19,28 +19,6 @@ ul.keys li {
 }
 dl.legend-options dt {background: #333}
 
-.pm {background: #040} /* motion */
-.po {background: #340} /* window */
-.ci {background: #044} /* info */
-.co {background: #440} /* command */
-.cp {background: #530} /* command */
-.mi {background: #520} /* ins */
-.mo {background: #500} /* state */
-.mv {background: #503} /* visual */
-.me {background: #205} /* mode */
-.no {background: #222} /* unassigned */
-
-.pm a:hover, .pm[onclick]:hover,
-.po a:hover, .po[onclick]:hover,
-.ci a:hover, .ci[onclick]:hover,
-.co a:hover, .co[onclick]:hover,
-.mi a:hover, .mi[onclick]:hover,
-.mo a:hover, .mo[onclick]:hover,
-.mv a:hover, .mv[onclick]:hover,
-.me a:hover, .me[onclick]:hover {
-       color: #000; /* on default (light) background hover */
-} /* mode link */
-
 /* code syntax */
 .sy-comment    { color: #888 }
 .sy-constant   { color: #8AC }
@@ -53,11 +31,11 @@ dl.legend-options dt {background: #333}
 /* character properties */
 
 th, td {
-       border-color: #333;
-       background: #181818;
+       border-color: #555;
+       background: #222;
 }
 .glyphs.dimap tbody, .glyphs.dimap colgroup {
-       border-color: #555;
+       border-color: #665;
 }
 
 .glyphs small.digraph {
@@ -73,25 +51,46 @@ th, td {
 
 td.X  {background: #000} /* unidentified */
 td.Xr {background: #111} /* reverse */
-td.Co {background: #181111} /* private */
+td.Co {background: #322} /* private */
 
 /* implementation-based alternatives */
 td.di-b       {background: #411} /* bmp */
 td.di-d       {background: #330} /* rfc-1345 digraph */
-td.di-prop    {background: #3B2200} /* proposed digraph */
-td.di-a       {background: #131} /* ascii */
-td.di-rare    {background: #181818} /* disfavoured */
-td.di-invalid {background: #222} /* impossible */
+td.di-prop    {background: #321} /* proposed digraph */
+td.di-a       {background: #031} /* ascii */
+td.di-rare    {background: #222} /* disfavoured */
+td.di-invalid {background: #333} /* impossible */
+
+/* general colorization */
 
-/* continents */
-td.c-af       {background: #1C1C00}
-td.c-eu       {background: #221400}
-td.c-as       {background: #200}
-td.c-oc       {background: #102}
-td.c-aa       {background: #012}
-td.c-sa       {background: #001A1A}
-td.c-na       {background: #001800}
+td.c-na,
+.pm {background: #040} /* motion */
+.po {background: #340} /* window */
+td.c-sa,
+.ci {background: #044} /* info */
+td.c-af,
+.co {background: #440} /* command */
+td.c-eu,
+.cp {background: #530} /* command */
+.mi {background: #520} /* ins */
+td.c-as,
+.mo {background: #500} /* state */
+td.c-aa,
+.mv {background: #503} /* visual */
+td.c-oc,
+.me {background: #205} /* mode */
+.no {background: #222} /* unassigned */
 
-.glyphs tbody td:hover {color: #000}
-.glyphs tbody td:hover small {color: #FFF}
+td.X:hover,
+.pm a:hover, .pm[onclick]:hover,
+.po a:hover, .po[onclick]:hover,
+.ci a:hover, .ci[onclick]:hover,
+.co a:hover, .co[onclick]:hover,
+.mi a:hover, .mi[onclick]:hover,
+.mo a:hover, .mo[onclick]:hover,
+.mv a:hover, .mv[onclick]:hover,
+.me a:hover, .me[onclick]:hover {
+       color: #000; /* on default (light) background hover */
+}
+td.X:hover small {color: #FFF}
 
diff --git a/darklite.css b/darklite.css
new file mode 100644 (file)
index 0000000..41c915e
--- /dev/null
@@ -0,0 +1,38 @@
+@import url(dark.css);
+
+th, td {
+       border-color: #333;
+       background: #181818;
+}
+.glyphs.dimap tbody, .glyphs.dimap colgroup {
+       border-color: #555;
+}
+
+.glyphs small.digraph {
+       background: #444;
+       color: #AAA;
+       opacity: 0.5;
+}
+.glyphs small.value {
+       background: #633;
+       color: #AAA;
+       opacity: 0.4;
+}
+
+td.X  {background: #000} /* unidentified */
+td.Xr {background: #111} /* reverse */
+td.Co {background: #181111} /* private */
+
+.mo, td.c-as, td.di-b       {background: #200}
+.co, td.c-af, td.di-d       {background: #1C1C00}
+.cp, td.c-eu, td.di-prop    {background: #221400}
+.pm, td.c-na, td.di-a       {background: #002200}
+.po                         {}
+.ci, td.c-sa                {background: #001A1A}
+.mi                         {}
+.mv, td.c-oc                {background: #012}
+.me, td.c-aa                {background: #102}
+.no                         {}
+              td.di-rare    {background: #181818} /* disfavoured */
+              td.di-invalid {background: #222} /* impossible */
+
diff --git a/lite.css b/lite.css
new file mode 100644 (file)
index 0000000..d82fa4c
--- /dev/null
+++ b/lite.css
@@ -0,0 +1,12 @@
+@import url(light.css);
+
+.pm, td.c-na       {background: #DFD}
+.po                {background: #EFC}
+.co, td.c-af       {background: #FFC}
+.ci, td.c-sa       {background: #DFF}
+.cp, td.c-eu       {background: #FED}
+.mi                {background: #FDC}
+.mo, td.c-as       {background: #FDD}
+.mv, td.c-aa       {background: #EEDDF4}
+.me, td.c-oc       {background: #E3E8FF}
+
index 4a6856e..349ec78 100644 (file)
@@ -73,6 +73,8 @@ sub glyph_table {
                        $cell = '';
                }
                else {
+                       push @class, 'X';
+
                        if ($cell =~ s/^-//) {
                                push @class, 'di-rare'; # discouraged
                        }
@@ -86,9 +88,6 @@ sub glyph_table {
                                push @class, 'di-prop' # unofficial
                                        if $diinfo->{$code}->[2] =~ /\bXz\b/;
                        }
-                       elsif (defined $name) {
-                               push @class, 'X';
-                       }
 
                        if ($cell =~ /[ -~]/) {
                                push @class, 'di-a'; # ascii