anki/sass/buttons.scss
RumovZ f61126a40c
Fix button focus highlight on Windows (#1627)
* Fix button focus highlight on Windows

* Use none instead of none for outline and box-shadow

* Unnest selectors in reviewer-bottom

Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
2022-02-07 19:41:19 +10:00

71 lines
1.3 KiB
SCSS

@use "fusion-vars";
:root {
--focus-color: #0078d7;
.isMac {
--focus-color: rgba(0 103 244 / 0.247);
}
}
.isWin {
button {
font-size: 12px;
}
}
.isMac {
button {
font-size: 13px;
}
}
.isLin {
button {
font-size: 14px;
-webkit-appearance: none;
border-radius: 5px;
padding: 5px;
border: 1px solid var(--border);
}
}
.nightMode {
button {
-webkit-appearance: none;
color: var(--text-fg);
/* match the fusion button gradient */
background: linear-gradient(
0deg,
fusion-vars.$button-gradient-start 0%,
fusion-vars.$button-gradient-end 100%
);
box-shadow: 0 0 3px fusion-vars.$button-outline;
border: 1px solid fusion-vars.$button-border;
border-radius: 5px;
padding: 3px 10px 3px;
&:focus {
outline: none;
box-shadow: 0 0 0 2px var(--focus-color);
}
}
button:hover {
background: fusion-vars.$button-hover-bg;
}
}
/* imitate standard macOS dark mode buttons */
.isMac.nightMode.macos-dark-mode button:not(.linkb) {
background: #656565;
box-shadow: 0 1px 2px #222222;
border-top-color: #848484;
border-width: 0.5px 0 0;
padding: 2px 15px;
color: #e5e5e5;
}