Template:Key/style.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
(One intermediate revision by the same user not shown) | |||
Line 22: | Line 22: | ||
/* Dark style for display on light background. This is the default style. */ | /* Dark style for display on light background. This is the default style. */ | ||
kbd, kbd. | kbd, kbd.black, .black-keys kbd, .key, .key.black, .black-keys .key { | ||
background: rgb(80, 80, 80); | background: rgb(80, 80, 80); | ||
color: rgb(250, 250, 250); | color: rgb(250, 250, 250); | ||
Line 30: | Line 30: | ||
/* Light style for display on dark background. */ | /* Light style for display on dark background. */ | ||
kbd. | kbd.white, .white-keys kbd, .key.white, .white-keys .key { | ||
background: rgb(250, 250, 250); | background: rgb(250, 250, 250); | ||
color: rgb(50, 50, 50); | color: rgb(50, 50, 50); | ||
Line 39: | Line 39: | ||
/* Blue */ | /* Blue */ | ||
kbd.blue, .blue-keys kbd, .key.blue, .blue-keys .key { | 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); | |||
} | } | ||
Line 46: | Line 48: | ||
kbd.orange, .orange-keys kbd, .key.orange, .orange-keys .key { | kbd.orange, .orange-keys kbd, .key.orange, .orange-keys .key { | ||
background: darkorange; | background: darkorange; | ||
color: | color: #eee; | ||
text-shadow: 0 | text-shadow: -1px -1px 0 rgb(70, 70, 70); | ||
box-shadow: inset 0 0 1px rgb( | 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 * | * End Template:Key styles * | ||
***************************/ | ***************************/ |
Latest revision as of 08:51, 29 June 2022
/***************************
* 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 *
***************************/