diff --git a/static/keys.css b/static/keys.css new file mode 100644 index 0000000..4e3c297 --- /dev/null +++ b/static/keys.css @@ -0,0 +1,55 @@ +/** + * KEYS.css + * + * A simple stylesheet for rendering beautiful keyboard-style elements. + * + * Author: Michael Hüneburg + * Website: http://michaelhue.com/keyscss + * License: MIT License (see LICENSE.txt) + */ + +/* Base style, essential for every key. */ +kbd, .key { + display: inline; + display: inline-block; + min-width: 1em; + padding: .2em .3em; + font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif; + text-align: center; + text-decoration: none; + -moz-border-radius: .3em; + -webkit-border-radius: .3em; + border-radius: .3em; + border: none; + cursor: default; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} +kbd[title], .key[title] { + cursor: help; +} + +/* Dark style for display on light background. This is the default style. */ +kbd, kbd.dark, .dark-keys kbd, .key, .key.dark, .dark-keys .key { + background: rgb(80, 80, 80); + background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80)); + background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80))); + color: rgb(250, 250, 250); + text-shadow: -1px -1px 0 rgb(70, 70, 70); + -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); + -webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); + box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3); +} + +/* Light style for display on dark background. */ +kbd.light, .light-keys kbd, .key.light, .light-keys .key { + background: rgb(250, 250, 250); + background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)); + background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255))); + color: rgb(50, 50, 50); + text-shadow: 0 0 2px rgb(255, 255, 255); + -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); + -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); + box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); +} diff --git a/templates/boilerplate.html b/templates/boilerplate.html index 99a8d8d..23acf1e 100644 --- a/templates/boilerplate.html +++ b/templates/boilerplate.html @@ -6,6 +6,7 @@