base.css

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