langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
a066cee326
anki/ts/sass/_buttons.scss

70 lines
1.4 KiB
SCSS
Raw Normal View History

migrate the majority of the sass vars to css variables Allows add-ons to easily override the theme, and allows us to apply styling to elements outside of the normal document flow (like applying the normal background colour to a position: fixed element).
2020-08-27 07:57:24 +02:00
/* night-mode-specific colours */
$fusion-button-gradient-start: #555555;
$fusion-button-gradient-end: #656565;
$fusion-button-outline: #222222;
$fusion-button-hover-bg: #656565;
$fusion-button-border: #646464;
$fusion-button-base-bg: #454545;
basic night mode support Forces the Fusion theme when running night mode, so we don't need to work around platform themes that don't respond to the defined palette. Feedback/suggestions on the chosen colours welcome - _vars.scss is the file to change if you want to experiment with adjustments.
2020-01-23 06:08:10 +01:00
fix webview button alignment on Linux caused by the height: specification inside webview.py
2020-01-26 01:18:24 +01:00
.isWin {
button {
font-size: 12px;
}
}
.isMac {
button {
font-size: 13px;
}
}
.isLin {
button {
font-size: 14px;
-webkit-appearance: none;
border-radius: 3px;
padding: 5px;
migrate the majority of the sass vars to css variables Allows add-ons to easily override the theme, and allows us to apply styling to elements outside of the normal document flow (like applying the normal background colour to a position: fixed element).
2020-08-27 07:57:24 +02:00
border: 1px solid var(--border);
fix webview button alignment on Linux caused by the height: specification inside webview.py
2020-01-26 01:18:24 +01:00
}
}
basic night mode support Forces the Fusion theme when running night mode, so we don't need to work around platform themes that don't respond to the defined palette. Feedback/suggestions on the chosen colours welcome - _vars.scss is the file to change if you want to experiment with adjustments.
2020-01-23 06:08:10 +01:00
.nightMode {
button {
-webkit-appearance: none;
migrate the majority of the sass vars to css variables Allows add-ons to easily override the theme, and allows us to apply styling to elements outside of the normal document flow (like applying the normal background colour to a position: fixed element).
2020-08-27 07:57:24 +02:00
color: var(--text-fg);
basic night mode support Forces the Fusion theme when running night mode, so we don't need to work around platform themes that don't respond to the defined palette. Feedback/suggestions on the chosen colours welcome - _vars.scss is the file to change if you want to experiment with adjustments.
2020-01-23 06:08:10 +01:00
/* match the fusion button gradient */
background: linear-gradient(0deg,
migrate the majority of the sass vars to css variables Allows add-ons to easily override the theme, and allows us to apply styling to elements outside of the normal document flow (like applying the normal background colour to a position: fixed element).
2020-08-27 07:57:24 +02:00
$fusion-button-gradient-start 0%,
$fusion-button-gradient-end 100%);
box-shadow: 0 0 3px $fusion-button-outline;
border: 1px solid $fusion-button-border;
basic night mode support Forces the Fusion theme when running night mode, so we don't need to work around platform themes that don't respond to the defined palette. Feedback/suggestions on the chosen colours welcome - _vars.scss is the file to change if you want to experiment with adjustments.
2020-01-23 06:08:10 +01:00
more contrast on buttons and scrollbars
2020-02-02 03:53:35 +01:00
border-radius: 2px;
padding: 10px;
padding-top: 3px;
padding-bottom: 3px;
basic night mode support Forces the Fusion theme when running night mode, so we don't need to work around platform themes that don't respond to the defined palette. Feedback/suggestions on the chosen colours welcome - _vars.scss is the file to change if you want to experiment with adjustments.
2020-01-23 06:08:10 +01:00
}
button:hover {
migrate the majority of the sass vars to css variables Allows add-ons to easily override the theme, and allows us to apply styling to elements outside of the normal document flow (like applying the normal background colour to a position: fixed element).
2020-08-27 07:57:24 +02:00
background: $fusion-button-hover-bg;
basic night mode support Forces the Fusion theme when running night mode, so we don't need to work around platform themes that don't respond to the defined palette. Feedback/suggestions on the chosen colours welcome - _vars.scss is the file to change if you want to experiment with adjustments.
2020-01-23 06:08:10 +01:00
}
}
use night mode when dark mode active, using standard macOS theme
2020-01-31 04:14:16 +01:00
/* imitate standard macOS dark mode buttons */
when dark mode not active, match fusion buttons
2020-01-31 04:39:52 +01:00
.isMac.nightMode.macos-dark-mode button:not(.linkb) {
use night mode when dark mode active, using standard macOS theme
2020-01-31 04:14:16 +01:00
background: #656565;
box-shadow: 0 1px 2px #222222;
border-top-color: #848484;
border-top-width: 0.5px;
border-bottom: 0;
border-left: 0;
border-right: 0;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
color: #e5e5e5;
Fix scrollbar issue in anki-editable component in two ways - using :host-context(.nightMode) allows for applying the nightmode scroll bar inside the component - apply max-width: 100% to all element within editable, not just images
2021-02-23 15:52:20 +01:00
}
Reference in New Issue Copy Permalink