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 .mi {background: #FCA}   /* insert mode */
 122 .mo {background: #FCC}   /* mode */
 123 .mv {background: #ECE}   /* visual mode */
 124 .me {background: #CCF}   /* key mode */
 125
 126 .mi[onclick]:hover {background: #F97}
 127 .mo[onclick]:hover {background: #F88}
 128 .me[onclick]:hover {background: #99F}
 129 .mv[onclick]:hover {background: #D9D}
 130 .co[onclick]:hover {background: #EE4}
 131
 132 .no {
 133         background: #EEE;
 134 }
 135 ul.keys li.ni {
 136         border: 0;
 137         padding: 1px; /* same size as borderlessless keys */
 138 }
 139
 140 dl.legend dt.vim,
 141 ul.keys li.vim {
 142         border-style: dashed;
 143         -moz-border-radius: 0; /* incompatible with border-style */
 144 }
 145 dl.legend dt.vim7,
 146 ul.keys li.vim7 {
 147         border-style: dotted;
 148         -moz-border-radius: 0;
 149 }
 150
 151 /* l/r help columns */
 152
 153 .help {
 154         display: table;
 155         width: 100%;
 156 }
 157 .help > * {
 158         display: table-cell;
 159         width: 20%;
 160         vertical-align: top;
 161 }
 162
 163 .left dl.legend {
 164         margin-left: 6.4em; /* a bit over 6.2em to allow for borders+padding (border-sizing would work too) */
 165 }
 166 .left dl.legend dt {
 167         margin-left: -6.4em; /* msie<=6 multiply this by two for some reason */
 168         float: left;
 169         clear: left;
 170 }
 171 .left dl.legend dd {
 172         float: left; /* align next to dt (except msie<=7 does just the opposite) */
 173 }
 174 .right dl.legend {
 175         margin-right: 6.4em;
 176 }
 177 .right dl.legend dt {
 178         margin-right: -6.4em;
 179         float: right;
 180         clear: right;
 181 }
 182 .right dl.legend dd {
 183         float: right;
 184 }
 185 .right {
 186         text-align: right;
 187 }
 188
 189 /* help/legend */
 190
 191 dl.legend dt {
 192         margin: 0 0 1px; /* distinct keys */
 193         height: auto; /* not key-height */
 194         padding: 2px 0;
 195 }
 196 dl.legend dd {
 197         margin: 3px 0.4em 0; /* align text (add dt border+padding height) */
 198 }
 199
 200 dl.legend-options dt {
 201         background: #CCC;
 202 }
 203
 204 ul.legend-set {
 205         clear: right;
 206         padding-top: 1ex;
 207 }
 208 ul.legend-set li {
 209         margin: 6px 0; /* similar to dl legends */
 210 }
 211
 212 /* printing hints */
 213
 214 @page {size: landscape}
 215
 216 @media print {
 217         ul.legend-set {display: none}
 218 }
 219