Template:Key press/styles.css: Difference between revisions

From Knox Makers Wiki
Amos (talk | contribs)
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; }"
 
Amos1 (talk | contribs)
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;
    border-radius: 0.2em;
box-shadow: 0.1em 0.2em 0.2em #ddd;
    box-shadow: 0.1em 0.2em 0.2em #ddd;
background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee);
    background-image: linear-gradient(
     color: #333;
    to bottom,
padding: 0.1em 0.3em;
    var(--background-color-neutral, #eee),
font-family: inherit;
    var(--background-color-interactive-subtle, #f9f9f9),
font-size: 0.85em;
    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'; }*/
/*}*/