From: Mischa POSLAWSKY Date: Sat, 6 Feb 2010 01:34:59 +0000 (+0000) Subject: style: reuse key command styles for continents X-Git-Tag: v1.3~67 X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/5f6d3958e4207035fefe088df2519231b5f07476 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 139c94c..078b27d 100644 --- 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 { diff --git a/circus.css b/circus.css index 7b885dc..d1f6f9e 100644 --- a/circus.css +++ b/circus.css @@ -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} @@ -20,13 +28,23 @@ {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, diff --git a/countries.plp b/countries.plp index 838a288..38c5e1a 100644 --- 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'], - stylesheet => [qw'light dark mono red'], + stylesheet => [qw'light dark circus mono red'], }); :> diff --git a/dark.css b/dark.css index 2f2729e..da7ee26 100644 --- 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 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 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 4a6856e..349ec78 100644 --- a/unicode.plp +++ b/unicode.plp @@ -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