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 /* "keyboard" (list of keys) */
  33
  34 ul {
  35         margin: 0;
  36         padding: 0;
  37         list-style: none;
  38 }
  39 li.row1 {margin-left: 7em} /* row offsets relative to ~6em key width */
  40 li.row2 {margin-left: 8em}
  41 li.row3 {margin-left: 10em} /* should actually align to next key on row0 */
  42         /* ...however rows>=1 are shifted a bit, to make space */
  43
  44 li.row {
  45         clear: both; /* start new row block (keyboard row) */
  46         padding-top: 1ex;
  47 }
  48 li.row > ul > li {
  49         clear: both; /* start new row (screen row) */
  50 } /* css2 selectors ignored by msie<=6 */
  51 li.row ul ul {
  52         clear: both;
  53 } /* css1 alternative as well (doesn't match in gecko for some reason) */
  54
  55 h3      {display: none} /* semantic details (non-css/js) */
  56 li.mode {display: none} /* initially hidden (only show interactively (js)) */
  57
  58 /* individual keys */
  59
  60 dl.legend dt,
  61 ul.keys li {
  62         float: left;
  63         width: 6.2em;
  64         line-height: 2.25ex; /* a little terser (seems to be gecko's default anyway) */
  65         height: 4.5ex; /* 2 lines */
  66         overflow: hidden;
  67         margin: 0 2px -1px;
  68         text-align: center;
  69         border: 1px solid #000;
  70         border-radius: 4px;
  71         -moz-border-radius: 4px;
  72 }
  73 ul.keys li b {
  74         float: left;
  75         font-size: 200%;
  76         line-height: 2.5ex; /* inherits otherwise */
  77         padding-left: 2px;
  78 }
  79 ul.keys.omni li { /* omni-present esc */
  80         width: 8.5em;
  81 }
  82
  83 /* fine tuning of special occurrences */
  84
  85 ul.keys li b[title] { /* mnemonic hover */
  86         cursor: help;
  87 }
  88 ul.keys li[onclick]:hover { /* link */
  89         cursor: pointer;
  90 }
  91 ul.keys.ctrl li b,
  92 ul.keys.lead li b { /* char with ctrl or leading key */
  93         font-size: 100%; /* space is too limited for 2+ double-sized chars */
  94         line-height: 5ex; /* keep double height though */
  95 }
  96 ul.keys.ctrl li b small { /* meta key indicator */
  97         font-size: 70%;
  98         font-weight: normal; /* nice and subtle */
  99 }
 100
 101 /* key type colorization */
 102
 103 .pm {background: #BFB}   /* motion */
 104 .po {background: #DFA}   /* window */
 105 .co {background: #FFA}   /* command */
 106 .ci {background: #BFE}   /* info */
 107 .mi {background: #FCA}   /* insert mode */
 108 .mo {background: #FCC}   /* mode */
 109 .mv {background: #ECE}   /* visual mode */
 110 .me {background: #CCF}   /* key mode */
 111
 112 .mi[onclick]:hover {background: #F97}
 113 .mo[onclick]:hover {background: #F88}
 114 .me[onclick]:hover {background: #99F}
 115 .mv[onclick]:hover {background: #D9D}
 116 .co[onclick]:hover {background: #EE4}
 117
 118 .no {
 119         background: #EEE;
 120 }
 121 ul.keys li.ni {
 122         border: 0;
 123         padding: 1px; /* same size as borderlessless keys */
 124 }
 125
 126 dl.legend dt.vim,
 127 ul.keys li.vim {
 128         border-style: dashed;
 129         -moz-border-radius: 0; /* incompatible with border-style */
 130 }
 131 dl.legend dt.vim7,
 132 ul.keys li.vim7 {
 133         border-style: dotted;
 134         -moz-border-radius: 0;
 135 }
 136
 137 /* footer */
 138
 139 hr {
 140         clear: both;
 141         visibility: hidden;
 142         height: 2ex;
 143         margin: 0;
 144 }
 145
 146 p.footer {
 147         margin: 0;
 148         text-align: center;
 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