Use system accent color on Windows
This commit is contained in:
parent
d2dc9dd3c0
commit
0c3dce781c
5 changed files with 16 additions and 9 deletions
|
@ -4,7 +4,7 @@
|
|||
font-style: normal;
|
||||
line-height: 1.3333333333;
|
||||
@media (-moz-platform: windows) {
|
||||
--color-accent: var(--accent-blue);
|
||||
--color-accent: -moz-accent-color;
|
||||
@include light-dark(--color-focus-outer-border, var(--fill-primary), var(--accent-white));
|
||||
@include light-dark(--color-focus-border, var(--accent-white), #00000080);
|
||||
--width-focus-outer-border: 2px;
|
||||
|
|
|
@ -10,14 +10,14 @@ input:is([type=button], [type=submit]) {
|
|||
color: var(--accent-white);
|
||||
|
||||
&:not([disabled]) {
|
||||
--color-form-element-background: var(--accent-blue);
|
||||
--color-form-element-background: var(--color-accent);
|
||||
|
||||
&:hover {
|
||||
--color-form-element-background: rgba(64, 114, 229, 0.9);
|
||||
--color-form-element-background: color-mix(in srgb, var(--color-accent) 90%, transparent);
|
||||
}
|
||||
|
||||
&:active {
|
||||
--color-form-element-background: rgba(64, 114, 229, 0.8);
|
||||
--color-form-element-background: color-mix(in srgb, var(--color-accent) 80%, transparent);
|
||||
}
|
||||
|
||||
@include focus-ring;
|
||||
|
|
|
@ -15,19 +15,19 @@
|
|||
background-clip: border-box, padding-box;
|
||||
@media (prefers-color-scheme: light) {
|
||||
border: 1px solid var(--fill-quinary);
|
||||
border-bottom-color: var(--accent-blue);
|
||||
border-bottom-color: var(--color-accent);
|
||||
background-color: unset;
|
||||
background-image:
|
||||
linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%),
|
||||
linear-gradient(to top, var(--color-accent) 2px, transparent 2px 100%),
|
||||
linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border: 1px solid var(--fill-quinary);
|
||||
border-bottom-color: var(--accent-blue);
|
||||
border-bottom-color: var(--color-accent);
|
||||
background-color: unset;
|
||||
background-image:
|
||||
linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%),
|
||||
linear-gradient(to top, var(--color-accent) 2px, transparent 2px 100%),
|
||||
linear-gradient(var(--fill-senary), var(--fill-senary));
|
||||
}
|
||||
}
|
||||
|
@ -95,7 +95,7 @@ textarea {
|
|||
}
|
||||
|
||||
&::selection {
|
||||
background-color: var(--accent-blue);
|
||||
background-color: var(--color-accent);
|
||||
color: var(--accent-white);
|
||||
}
|
||||
|
||||
|
|
6
scss/win/components/_link.scss
Normal file
6
scss/win/components/_link.scss
Normal file
|
@ -0,0 +1,6 @@
|
|||
.text-link,
|
||||
.zotero-text-link,
|
||||
a {
|
||||
// Overwrite the -moz-nativehyperlinktext to respect the accent color
|
||||
color: var(--color-accent) !important;
|
||||
}
|
|
@ -20,5 +20,6 @@
|
|||
|
||||
@import "win/components/button";
|
||||
@import "win/components/input";
|
||||
@import "win/components/link";
|
||||
@import "win/components/menulist";
|
||||
@import "win/components/tabbox";
|
||||
|
|
Loading…
Reference in a new issue