X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/a401632a210413c3a4f0237c8fd8986bdf45934c..5ff4b1c1b790314cd654d32ca6d72368d1748283:/base.css diff --git a/base.css b/base.css index 989f8be..a488e97 100644 --- a/base.css +++ b/base.css @@ -27,8 +27,12 @@ h1, h2 { font-size: 200%; margin: 0; } -h2 { +h2, caption { font-size: 125%; + font-weight: bold; +} +caption { + margin: 1ex; } hr { @@ -55,17 +59,26 @@ p.aside { p.footer { margin: 1em 0 0; } -hr ~ .footer { +.help + .footer { margin: 0; } -/* "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} @@ -86,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, @@ -131,42 +152,61 @@ ul.keys.ctrl li b small { /* meta key indicator */ font-weight: normal; /* nice and subtle */ } -/* character table */ +/* tables */ -table.glyphs { - border-collapse: collapse; +li table { + float: left; + position: relative; /* prevents buggy hovering if table-caption present in gecko */ } -.glyphs thead th, .glyphs td { - text-align: center; - width: 1.6em; /* regular interval */ + +table { + border-collapse: collapse; } -.glyphs th, .glyphs td { +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 */ -.glyphs th, -.glyphs thead td { +th, +thead td { border: 0; background: transparent !important; } .glyphs thead td { width: auto; /* no glyph cells in header */ } -.glyphs th { +th { padding: 0 0.2em; } -.diinfo .glyphs th { +.diinfo th { font-size: 50%; /* mostly insignificant here */ font-weight: normal; } -.diinfo .glyphs tbody th { +.diinfo tbody th { text-align: right; /* variable width so keep near cells */ padding: 0 0.5em; } @@ -236,37 +276,49 @@ table.glyphs.dimap { /* character properties */ td.X {background: #FFF} /* unidentified */ -td.Xr {background: #EEE} /* reverse */ -td.Xa {color: #0A0} /* ascii */ -td.Xl {color: #070} /* latin1 */ - .Xz {color: #D00} /* proposed */ +#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, td.Cs {background: #F00} /* unstyled */ +td.Lm, td.Mc, td.Me, td.Zl, td.Zp {background: #F00} /* unstyled */ /* letter scripts */ -td.Greek {background: #FFE0CF} +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.Hangul {background: #DEA} +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: #FBB} /* number */ +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.Cf, td.Pd, td.Po {background: #CDF} /* punctuation */ +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 {color: #666; background: #BBB} /* control */ +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 */ @@ -276,29 +328,55 @@ 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 {background: #FA9} +td.Greek:hover, td.Armenian:hover {background: #FA8} td.Cyrillic:hover {background: #FB7} -td.Latin:hover {background: #FF6} -td.Hebrew:hover {background: #FFA} +td.Latin:hover {background: #EE4} +td.Hebrew:hover, td.Aramaic:hover {background: #FFA} td.Arabic:hover {background: #CFD} -td.Hangul:hover {background: #CE6} +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.Nd:hover, td.Nl:hover, td.No:hover {background: #F88} /* number */ +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.Cf:hover, td.Pd:hover, td.Po:hover {background: #8AF} /* punctuation */ +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 {background: #DDD} /* control */ +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 */ @@ -320,6 +398,8 @@ td.di-a:hover {background: #CF8} .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} @@ -335,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 */