Template:Key press/styles.css: Difference between revisions
From Knox Makers Wiki
Created page with ".keyboard-key { border: 1px solid #aaa; border-radius: 0.2em; box-shadow: 0.1em 0.2em 0.2em #ddd; background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee); color: #333; padding: 0.1em 0.3em; font-family: inherit; font-size: 0.85em; }" |
No edit summary |
||
| (8 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
.keyboard-key { | .keyboard-key { | ||
border: 1px solid #aaa; | border: 1px solid var(--border-color-base, #aaa); | ||
border-radius: 0.2em; | |||
box-shadow: 0.1em 0.2em 0.2em #ddd; | |||
background-image: linear-gradient( | |||
color: #333; | to bottom, | ||
var(--background-color-neutral, #eee), | |||
var(--background-color-interactive-subtle, #f9f9f9), | |||
var(--background-color-neutral, #eee) | |||
); | |||
color: var(--color-base, #333); | |||
padding: 0.1em 0.3em; | |||
font-family: inherit; | |||
font-size: 0.85em; | |||
} | } | ||
/* use darker shadow colour for dark mode */ | |||
@media screen { | |||
html.skin-theme-clientpref-night .keyboard-key { | |||
box-shadow: 0.1em 0.2em 0.2em #444; | |||
} | |||
} | |||
@media screen and (prefers-color-scheme: dark) { | |||
/* automatic mode */ | |||
html.skin-theme-clientpref-os .keyboard-key { | |||
box-shadow: 0.1em 0.2em 0.2em #444; | |||
} | |||
} | |||
kbd span.ctrl-or-cmd:first-child::after | |||
{ | |||
content: 'ctrl'; | |||
} | |||
/*@supports (or -moz-osx-font-smoothing: auto) {*/ | |||
/* kbd span.ctrl-or-cmd:first-child::after { content: '⌘ cmd'; }*/ | |||
/*}*/ | |||
Latest revision as of 06:38, 30 July 2025
.keyboard-key {
border: 1px solid var(--border-color-base, #aaa);
border-radius: 0.2em;
box-shadow: 0.1em 0.2em 0.2em #ddd;
background-image: linear-gradient(
to bottom,
var(--background-color-neutral, #eee),
var(--background-color-interactive-subtle, #f9f9f9),
var(--background-color-neutral, #eee)
);
color: var(--color-base, #333);
padding: 0.1em 0.3em;
font-family: inherit;
font-size: 0.85em;
}
/* use darker shadow colour for dark mode */
@media screen {
html.skin-theme-clientpref-night .keyboard-key {
box-shadow: 0.1em 0.2em 0.2em #444;
}
}
@media screen and (prefers-color-scheme: dark) {
/* automatic mode */
html.skin-theme-clientpref-os .keyboard-key {
box-shadow: 0.1em 0.2em 0.2em #444;
}
}
kbd span.ctrl-or-cmd:first-child::after
{
content: 'ctrl';
}
/*@supports (or -moz-osx-font-smoothing: auto) {*/
/* kbd span.ctrl-or-cmd:first-child::after { content: '⌘ cmd'; }*/
/*}*/
