base.css

   1 /* media features */
   2
   3 @import url(terse.css) all and (max-width: 80em);
   4
   5 @import url(mono.css) all and (monochrome);
   6
   7 /* general */
   8
   9 body {
  10         background: #FFF;
  11         color: #000;
  12         font-size: 90%;
  13 }
  14 a, a:visited {
  15         color: #000;
  16         text-decoration: underline;
  17 }
  18 a:active, a:hover {
  19         color: #00F;
  20         text-decoration: none;
  21 }
  22 h1, h2 {
  23         text-align: center;
  24         font-size: 200%;
  25         margin: 0;
  26 }
  27 h2 {
  28         font-size: 125%;
  29         margin-bottom: -4ex;
  30 }
  31
  32 /* footer */
  33
  34 hr {
  35         clear: both;
  36         visibility: hidden;
  37         height: 2ex;
  38         margin: 0;
  39 }
  40
  41 p.footer {
  42         margin: 0;
  43         text-align: center;
  44 }
  45
  46 /* "keyboard" (list of keys) */
  47
  48 ul {
  49         margin: 0;
  50         padding: 0;
  51         list-style: none;
  52 }
  53 li.row1 {margin-left: 7em} /* row offsets relative to ~6em key width */
  54 li.row2 {margin-left: 8em}
  55 li.row3 {margin-left: 10em} /* should actually align to next key on row0 */
  56         /* ...however rows>=1 are shifted a bit, to make space */
  57
  58 li.row {
  59         clear: both; /* start new row block (keyboard row) */
  60         padding-top: 1ex;
  61 }
  62 li.row > ul > li {
  63         clear: both; /* start new row (screen row) */
  64 } /* css2 selectors ignored by msie<=6 */
  65 li.row ul ul {
  66         clear: both;
  67 } /* css1 alternative as well (doesn't match in gecko for some reason) */
  68
  69 h3      {display: none} /* semantic details (non-css/js) */
  70 li.mode {display: none} /* initially hidden (only show interactively (js)) */
  71
  72 /* individual keys */
  73
  74 dl.legend dt,
  75 ul.keys li {
  76         float: left;
  77         width: 6.2em;
  78         line-height: 2.25ex; /* a little terser (seems to be gecko's default anyway) */
  79         height: 4.5ex; /* 2 lines */
  80         overflow: hidden;
  81         margin: 0 2px -1px;
  82         text-align: center;
  83         border: 1px solid #000;
  84         border-radius: 4px;
  85         -moz-border-radius: 4px;
  86 }
  87 ul.keys li b {
  88         float: left;
  89         font-size: 200%;
  90         line-height: 2.5ex; /* inherits otherwise */
  91         padding-left: 2px;
  92 }
  93 ul.keys.omni li { /* omni-present esc */
  94         width: 8.5em;
  95 }
  96
  97 /* fine tuning of special occurrences */
  98
  99 ul.keys li b[title] { /* mnemonic hover */
 100         cursor: help;
 101 }
 102 ul.keys li[onclick]:hover { /* link */
 103         cursor: pointer;
 104 }
 105 ul.keys.ctrl li b,
 106 ul.keys.lead li b { /* char with ctrl or leading key */
 107         font-size: 100%; /* space is too limited for 2+ double-sized chars */
 108         line-height: 5ex; /* keep double height though */
 109 }
 110 ul.keys.ctrl li b small { /* meta key indicator */
 111         font-size: 70%;
 112         font-weight: normal; /* nice and subtle */
 113 }
 114
 115 /* key type colorization */
 116
 117 .pm {background: #BFB}   /* motion */
 118 .po {background: #DFA}   /* window */
 119 .co {background: #FFA}   /* command */
 120 .ci {background: #BFE}   /* info */
 121 .cp {background: #FDA}   /* TODO */
 122 .mi {background: #FCA}   /* insert mode */
 123 .mo {background: #FCC}   /* mode */
 124 .mv {background: #ECE}   /* visual mode */
 125 .me {background: #CCF}   /* key mode */
 126
 127 .ci[onclick]:hover {background: #5ED}
 128 .mi[onclick]:hover {background: #F97}
 129 .mo[onclick]:hover {background: #F88}
 130 .me[onclick]:hover {background: #99F}
 131 .mv[onclick]:hover {background: #D9D}
 132 .co[onclick]:hover {background: #EE4}
 133
 134 .no {
 135         background: #EEE;
 136 }
 137 ul.keys li.ni {
 138         border: 0;
 139         padding: 1px; /* same size as borderlessless keys */
 140 }
 141
 142 dl.legend dt.vim,
 143 ul.keys li.vim {
 144         border-style: dashed;
 145         -moz-border-radius: 0; /* incompatible with border-style */
 146 }
 147 dl.legend dt.vim7,
 148 ul.keys li.vim7 {
 149         border-style: dotted;
 150         -moz-border-radius: 0;
 151 }
 152
 153 /* l/r help columns */
 154
 155 .help {
 156         display: table;
 157         width: 100%;
 158 }
 159 .help > * {
 160         display: table-cell;
 161         width: 20%;
 162         vertical-align: top;
 163 }
 164
 165 .left dl.legend {
 166         margin-left: 6.4em; /* a bit over 6.2em to allow for borders+padding (border-sizing would work too) */
 167 }
 168 .left dl.legend dt {
 169         margin-left: -6.4em; /* msie<=6 multiply this by two for some reason */
 170         float: left;
 171         clear: left;
 172 }
 173 .left dl.legend dd {
 174         float: left; /* align next to dt (except msie<=7 does just the opposite) */
 175 }
 176 .right dl.legend {
 177         margin-right: 6.4em;
 178 }
 179 .right dl.legend dt {
 180         margin-right: -6.4em;
 181         float: right;
 182         clear: right;
 183 }
 184 .right dl.legend dd {
 185         float: right;
 186 }
 187 .right {
 188         text-align: right;
 189 }
 190
 191 /* help/legend */
 192
 193 dl.legend dt {
 194         margin: 0 0 1px; /* distinct keys */
 195         height: auto; /* not key-height */
 196         padding: 2px 0;
 197 }
 198 dl.legend dd {
 199         margin: 3px 0.4em 0; /* align text (add dt border+padding height) */
 200 }
 201
 202 dl.legend-options dt {
 203         background: #CCC;
 204 }
 205
 206 ul.legend-set {
 207         clear: right;
 208         padding-top: 1ex;
 209 }
 210 ul.legend-set li {
 211         margin: 6px 0; /* similar to dl legends */
 212 }
 213
 214 /* printing hints */
 215
 216 @page {
 217         size: landscape;
 218         margin: 0;
 219 }
 220
 221 @media print {
 222         ul.legend-set {display: none}
 223 }
 224