style: reuse key command styles for continents

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.

diff --git a/base.css b/base.css
index 139c94cce350e6cebc01e4ff58c15b54449a87e3..078b27d057b8b3364e385d19f79dd3bdee673c1a 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 */
 
 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 }
 /* code syntax */
 .sy-comment    { color: #888 }
 .sy-constant   { color: #008 }


@@ -384,23 +375,38 @@ td.di-a:hover                                      {background: #CF8}
 
 /* key type colorization */
 
 
 /* key type colorization */
 

+td.c-na,

 .pm {background: #BFB}   /* motion */
 .po {background: #DFA}   /* window */
 .pm {background: #BFB}   /* motion */
 .po {background: #DFA}   /* window */

+td.c-af,

 .co {background: #FFA}   /* command */
 .co {background: #FFA}   /* command */

+td.c-sa,

 .ci {background: #BFE}   /* info */
 .ci {background: #BFE}   /* info */

+td.c-eu,

 .cp {background: #FDA}   /* TODO */
 .mi {background: #FCA}   /* insert mode */
 .cp {background: #FDA}   /* TODO */
 .mi {background: #FCA}   /* insert mode */

+td.c-as,

 .mo {background: #FCC}   /* mode */
 .mo {background: #FCC}   /* mode */

+td.c-aa,

 .mv {background: #ECE}   /* visual mode */
 .mv {background: #ECE}   /* visual mode */

+td.c-oc,

 .me {background: #CCF}   /* key mode */
 
 .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}
 .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}
 .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}
 .mi a:hover, .mi[onclick]:hover {background: #F97}

+td.c-as:hover,

 .mo a:hover, .mo[onclick]:hover {background: #F88}
 .mo a:hover, .mo[onclick]:hover {background: #F88}

+td.c-oc:hover,

 .me a:hover, .me[onclick]:hover {background: #99F}
 .me a:hover, .me[onclick]:hover {background: #99F}

+td.c-aa:hover,

 .mv a:hover, .mv[onclick]:hover {background: #D9D}
 .mv a:hover, .mv[onclick]:hover {background: #D9D}

+td.c-af:hover,

 .co a:hover, .co[onclick]:hover {background: #EE4}
 
 .no {
 .co a:hover, .co[onclick]:hover {background: #EE4}
 
 .no {

diff --git a/circus.css b/circus.css
index 7b885dc98ad18688306be7cad4c72e72ebef3dea..d1f6f9e06cafac1d93eac4ee838b8217df2c9e45 100644 (file)
--- a/circus.css
+++ b/circus.css
@@ -1,14 +1,22 @@
 @import url(base.css);
 @import url(terse.css) all and (max-width: 80em);
 
 @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 */
 .pm {background: #8F8} /* motion */
 .po {background: #BF6} /* window */

+td.c-af,

 .co {background: #FF6} /* command */
 .co {background: #FF6} /* command */

+td.c-sa,

 .ci {background: #8FD} /* info */
 .ci {background: #8FD} /* info */

+td.c-eu,

 .cp {background: #FC6}
 .mi {background: #F96} /* insert mode */
 .cp {background: #FC6}
 .mi {background: #F96} /* insert mode */

+td.c-as,

 .mo {background: #F77} /* mode */
 .mo {background: #F77} /* mode */

+td.c-aa,

 .mv {background: #E8E} /* visual mode */
 .mv {background: #E8E} /* visual mode */

+td.c-oc,

 .me {background: #9AF} /* key mode */
 
 {background: #000; color: #7E7}
 .me {background: #9AF} /* key mode */
 
 {background: #000; color: #7E7}


@@ -20,13 +28,23 @@
 {background: #000; color: #99F}
 {background: #000; color: #E8E}
 
 {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}
 .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}
 .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}
 .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}
 .mo a:hover, .mo[onclick]:hover {background: #000; color: #F77}

+td.c-oc:hover,

 .me a:hover, .me[onclick]:hover {background: #000; color: #99F}
 .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,
 .mv a:hover, .mv[onclick]:hover {background: #000; color: #E8E}
 
 dl.legend dt.ext,

diff --git a/countries.plp b/countries.plp
index 838a2886303d70ef867066a9c852ae5825819f1b..38c5e1a2aa3c30aab74cdbc39360dbc8e7c26443 100644 (file)
--- a/countries.plp
+++ b/countries.plp
@@ -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'],
        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'],

 });
 
 :>
 });
 
 :>

diff --git a/dark.css b/dark.css
index 2f2729ebc25b910950e85940cf8857fe86a9c5dd..da7ee26713ebd98efdf2ebebdede9713f801b89d 100644 (file)
--- a/dark.css
+++ b/dark.css
@@ -19,28 +19,6 @@ ul.keys li {
 }
 dl.legend-options dt {background: #333}
 
 }
 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 }
 /* code syntax */
 .sy-comment    { color: #888 }
 .sy-constant   { color: #8AC }


@@ -53,11 +31,11 @@ dl.legend-options dt {background: #333}
 /* character properties */
 
 th, td {
 /* character properties */
 
 th, td {

-       border-color: #333;
-       background: #181818;
+       border-color: #555;
+       background: #222;

 }
 .glyphs.dimap tbody, .glyphs.dimap colgroup {
 }
 .glyphs.dimap tbody, .glyphs.dimap colgroup {

-       border-color: #555;
+       border-color: #665;

 }
 
 .glyphs small.digraph {
 }
 
 .glyphs small.digraph {


@@ -73,25 +51,46 @@ th, td {
 
 td.X  {background: #000} /* unidentified */
 td.Xr {background: #111} /* reverse */
 
 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 */
 
 /* 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
+++ b/darklite.css
@@ -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}
+

diff --git a/unicode.plp b/unicode.plp
index 4a6856e817d84df1c22ba4a821726d74bebfd7be..349ec78d9bb89a667826c48d39d2ab2ef0a78c62 100644 (file)
--- a/unicode.plp
+++ b/unicode.plp
@@ -73,6 +73,8 @@ sub glyph_table {
                        $cell = '';
                }
                else {
                        $cell = '';
                }
                else {

+                       push @class, 'X';
+

                        if ($cell =~ s/^-//) {
                                push @class, 'di-rare'; # discouraged
                        }
                        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/;
                        }
                                push @class, 'di-prop' # unofficial
                                        if $diinfo->{$code}->[2] =~ /\bXz\b/;
                        }

-                       elsif (defined $name) {
-                               push @class, 'X';
-                       }

 
                        if ($cell =~ /[ -~]/) {
                                push @class, 'di-a'; # ascii
 
                        if ($cell =~ /[ -~]/) {
                                push @class, 'di-a'; # ascii