Template:Key/style.css

/***************************
* Used by [[Template:Key]] *
****************************/

/* Base style, essential for every key. */
kbd, .key {
	display: inline;
	display: inline-block;
	min-width: 1em;
	padding: .2em .3em;
	font: normal 1.2em "Lucida Grande", Lucida, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	border-radius: .3em;
	border: none;
	cursor: default;
	user-select: none;
}
kbd[title], .key[title] {
	cursor: help;
}

/* Dark style for display on light background. This is the default style. */
kbd, kbd.black, .black-keys kbd, .key, .key.black, .black-keys .key {
	background: rgb(80, 80, 80);
	color: rgb(250, 250, 250);
	text-shadow: -1px -1px 0 rgb(70, 70, 70);
	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.white, .white-keys kbd, .key.white, .white-keys .key {
	background: rgb(250, 250, 250);
	color:  rgb(50, 50, 50);
	text-shadow: 0 0 2px rgb(255, 255, 255);
	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);
}

/* Blue */
kbd.blue, .blue-keys kbd, .key.blue, .blue-keys .key {
	background: steelblue;
	color: #eee;
	text-shadow: -1px -1px 0 rgb(70, 70, 70);
	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);
}

/* Orange */
kbd.orange, .orange-keys kbd, .key.orange, .orange-keys .key {
	background: darkorange;
	color: #eee;
	text-shadow: -1px -1px 0 rgb(70, 70, 70);
	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);
}
/**************************
* End Template:Key styles *
***************************/