X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/a84b651b70f484379de8ac84a2abac91e59c1a6e..5ff4b1c1b790314cd654d32ca6d72368d1748283:/base.css diff --git a/base.css b/base.css index 95ba44c..a488e97 100644 --- a/base.css +++ b/base.css @@ -19,17 +19,21 @@ a:active, a:hover { color: #00F; text-decoration: none; } + +/* common sections */ + h1, h2 { text-align: center; font-size: 200%; margin: 0; } -h2 { +h2, caption { font-size: 125%; - margin-bottom: -4ex; + font-weight: bold; +} +caption { + margin: 1ex; } - -/* footer */ hr { clear: both; @@ -38,18 +42,44 @@ hr { margin: 0; } +.diinfo h2 { + margin: 0 1ex; + clear: both; + font-size: 110%; + text-align: left; +} + +p { + text-align: center; + margin: 1ex 0 1em; +} +p.aside { + font-size: 80%; +} p.footer { + margin: 1em 0 0; +} +.help + .footer { margin: 0; - text-align: center; } -/* "keyboard" (list of keys) */ - ul { margin: 0; padding: 0; list-style: none; } + +#source { + text-align: center; +} +#source pre { + display: inline-block; + text-align: left; +} + +/* "keyboard" (list of keys) */ + +ul#rows {margin-top: -5ex} /* top (esc) row fits besides header */ li.row1 {margin-left: 7em} /* row offsets relative to ~6em key width */ li.row2 {margin-left: 8em} li.row3 {margin-left: 10em} /* should actually align to next key on row0 */ @@ -69,6 +99,14 @@ li.row ul ul { h3 {display: none} /* semantic details (non-css/js) */ li.mode {display: none} /* initially hidden (only show interactively (js)) */ +#rows { + width: 82.5em; /* 12 * (2px + 1px + 6.2em + 1px + 2px) + 8em*/ + padding-right: 72px; +} +#rows > li { + margin-right: -72px; +} + /* individual keys */ dl.legend dt, @@ -102,27 +140,267 @@ ul.keys li b[title] { /* mnemonic hover */ ul.keys li[onclick]:hover { /* link */ cursor: pointer; } +ul.keys.meta li b, ul.keys.ctrl li b, ul.keys.lead li b { /* char with ctrl or leading key */ font-size: 100%; /* space is too limited for 2+ double-sized chars */ line-height: 5ex; /* keep double height though */ } +ul.keys.meta li b small, ul.keys.ctrl li b small { /* meta key indicator */ font-size: 70%; font-weight: normal; /* nice and subtle */ } +/* tables */ + +li table { + float: left; + position: relative; /* prevents buggy hovering if table-caption present in gecko */ +} + +table { + border-collapse: collapse; +} +th, td { + border-color: #778; + border: 1px solid #888; + background: #DDD; +} +thead th, td { + text-align: center; +} + +/* character table */ + +.glyphs thead th, .glyphs td { + width: 1.6em; /* regular interval */ +} +.glyphs tbody td { + font-size: 112%; +} +.glyphs.big tbody td { + font-size: 200%; +} +.glyphs .glyphs { + margin: 0.5ex 0; +} +.glyphs .glyphs td { + font-size: 100%; +} + +/* table headers */ + +th, +thead td { + border: 0; + background: transparent !important; +} +.glyphs thead td { + width: auto; /* no glyph cells in header */ +} +th { + padding: 0 0.2em; +} +.diinfo th { + font-size: 50%; /* mostly insignificant here */ + font-weight: normal; +} +.diinfo tbody th { + text-align: right; /* variable width so keep near cells */ + padding: 0 0.5em; +} + +/* digraphs map */ + +table.glyphs.dimap { + table-layout: fixed; /* prevent resizing, notably in msie6 */ +} +.glyphs.dimap thead th, .glyphs.dimap td { + /* below-maximum size (but still average enough to be regular) so we can fit more */ + width: 1.2em; /* msie only looks at the first row */ + min-width: 1em; /* prevents gecko from restricting to page width */ +} +.glyphs.dimap th { + text-align: center; /* row headers are also glyph-sized */ +} + +.glyphs.dimap tbody, .glyphs.dimap colgroup { + border: 2px double #888; /* major character group grid */ +} +.glyphs.dimap tbody { + border-width: 2px 0; /* horizontal group dividers */ +} +.glyphs.dimap colgroup { + border-width: 0 2px; /* vertical divides */ +} + +/* digraph selection */ + +.diinfo { + -moz-column-width: 24em; +} +.diinfo > div { + overflow: hidden; +} + +.diinfo table.glyphs { + margin: 1ex 1ex 2ex; + float: left; +} + +/* glyph cell overlay (digraph labels) */ + +.glyphs.dilabel td { + padding: 0; + padding-bottom: 1.1ex; /* reserve space for label */ + vertical-align: bottom; +} +.glyphs small { + font-size: 50%; + display: block; + margin-top: 0.2ex; + margin-bottom: -2.2ex; /* take cell padding */ +} +.glyphs small.digraph { + background: #000; + color: #FFF; + opacity: 0.3; +} +.glyphs small.value { + background: #600; + color: #FFF; + opacity: 0.3; +} + +/* character properties */ + +td.X {background: #FFF} /* unidentified */ +#digraphs td.Xa {color: #0A0} /* ascii */ +#digraphs td.Xl {color: #070} /* latin1 */ +#digraphs .Xz {color: #D00} /* proposed */ + +td.Lm, td.Mc, td.Me, td.Zl, td.Zp {background: #F00} /* unstyled */ + +/* letter scripts */ +td.Armenian, +td.Greek {background: #FFE8CF} +td.Cyrillic {background: #FFDDA8} +td.Latin {background: #FFB} +td.Aramaic, +td.Hebrew {background: #FFD} +td.Arabic {background: #EFE} +td.African {background: #DED} +td.Brahmic {background: #FBB} /* same as number */ +td.Khmer {background: #FBA} +td.Hangul, +td.Syllabic {background: #DEA} +td.Katakana {background: #DFA} +td.Hiragana {background: #DFC} +td.Bopomofo {background: #BFC} +td.Han {background: #CFD} +td.Alpha {background: #ADA} /* other scripts */ + +/* other categories */ +td.Nd, td.Nl, td.No {background: #FDD} /* number */ +td.Sc {background: #FCD} /* currency */ +td.Sm {background: #ECE} /* math */ +td.So {background: #DCF} /* symbol */ +td.Pd, td.Po, td.Pc {background: #CDF} /* punctuation */ +td.Ps, td.Pe, td.Pi, td.Pf {background: #BEF} /* quote */ +td.Lm, td.Sk {background: #CEE} /* spacing modifier */ +td.Mn {background: #ACC} /* modifier */ +td.Cc, td.Cf {color: #666; background: #BBB} /* control */ +td.Zs {background: #ACB} /* space */ +td.Zs span {background: #EEE} +td.Co {background: #A99} /* private */ +td.Xi, td.Cs {background: #CCC} /* invalid */ +td.Xd {color: #844} /* deprecated */ +td.Xr {color: #888} /* reserved (digraph reverse or proposal) */ +.dimap td.Xr {background: #EEE} /* reversed digraph */ +.ccmap td.Xr {opacity:.4} + +/* implementation-based alternatives */ +td.di-b {background: #FDD} /* bmp */ +td.di-d {background: #FFD} /* rfc-1345 digraph */ +td.di-prop {background: #FED} /* proposed digraph */ +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 } +.sy-type, +.sy-identifier { color: #804 } +.sy-statement { } +.sy-preProc { } +.sy-special { color: #408 } +.sy-error { font-weight: bold; background-color: #F00; color: #FFF } +.sy-todo { background-color: #FF0 } + +/* hover effects */ +td.di-d, +td.X:hover {cursor: help} +td.Greek:hover, td.Armenian:hover {background: #FA8} +td.Cyrillic:hover {background: #FB7} +td.Latin:hover {background: #EE4} +td.Hebrew:hover, td.Aramaic:hover {background: #FFA} +td.Arabic:hover {background: #CFD} +td.African:hover {background: #BDB} +td.Syllabic:hover, td.Hangul:hover {background: #CE6} +td.Katakana:hover {background: #BF7} +td.Hiragana:hover {background: #AF8} +td.Bopomofo:hover {background: #8FA} +td.Brahmic:hover {background: #F77} +td.Khmer:hover {background: #F87} +td.Han:hover {background: #5EB} +td.Alpha:hover {background: #5C5} +td.Nd:hover, td.Nl:hover, td.No:hover {background: #F99} /* number */ +td.Sc:hover {background: #F8C} /* currency */ +td.Sm:hover {background: #F8F} /* math */ +td.So:hover {background: #A8F} /* symbol */ +td.Pd:hover, td.Po:hover, td.Pc:hover {background: #8AF} /* punctuation */ +td.Ps:hover, td.Pe:hover, td.Pi:hover, td.Pf:hover {background: #8DF} /* quote */ +td.Lm:hover, td.Sk:hover {background: #BFF} /* spacing modifier */ +td.Mn:hover {background: #CDE} /* modifier */ +td.Zs:hover {background: #CED} /* space */ +td.Cc:hover, td.Cf:hover {background: #DDD} /* control */ +td.Co:hover {background: #A77} /* private */ +td.Xr:hover {background: #FFF} /* reserved */ +td.Xa:hover {outline: 1px solid #0F0} /* ascii */ +td.Xl:hover {outline: 1px solid #0C0} /* latin1 */ +td.Xz:hover {outline: 1px solid #F00} /* proposed */ +td.di-rare:hover {background: #BBB} +td.di-b:hover {background: #F88} +td.di-d:hover {background: #FF8} +td.di-prop:hover {background: #FC8} +td.di-a:hover {background: #CF8} + /* key type colorization */ .pm {background: #BFB} /* motion */ .po {background: #DFA} /* window */ .co {background: #FFA} /* command */ .ci {background: #BFE} /* info */ +.cp {background: #FDA} /* TODO */ .mi {background: #FCA} /* insert mode */ .mo {background: #FCC} /* mode */ .mv {background: #ECE} /* visual mode */ .me {background: #CCF} /* key mode */ +.pm[onclick]:hover {background: #7E7} +.po[onclick]:hover {background: #CE6} +.ci[onclick]:hover {background: #5ED} .mi[onclick]:hover {background: #F97} .mo[onclick]:hover {background: #F88} .me[onclick]:hover {background: #99F} @@ -137,15 +415,13 @@ ul.keys li.ni { padding: 1px; /* same size as borderlessless keys */ } -dl.legend dt.vim, -ul.keys li.vim { +dl.legend dt.ext, +ul.keys li.ext { border-style: dashed; - -moz-border-radius: 0; /* incompatible with border-style */ } -dl.legend dt.vim7, -ul.keys li.vim7 { - border-style: dotted; - -moz-border-radius: 0; +dl.legend dt.new, +ul.keys li.new { + opacity: .6; } /* l/r help columns */ @@ -209,6 +485,16 @@ ul.legend-set li { margin: 6px 0; /* similar to dl legends */ } +.legend { + margin-top: 1em; +} +.legend table { + width: 100%; +} +.legend td { + padding: 0 0.2em; +} + /* printing hints */ @page { @@ -217,6 +503,6 @@ ul.legend-set li { } @media print { - ul.legend-set {display: none} + ul.legend-set {display: none} /* current options only relevant on dynamic media */ }