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