Use system accent color on Windows

This commit is contained in:
windingwind 2024-03-10 11:59:23 +08:00
parent d2dc9dd3c0
commit 0c3dce781c
5 changed files with 16 additions and 9 deletions

View file

@ -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;

View file

@ -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;

View file

@ -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);
}

View 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;
}

View file

@ -20,5 +20,6 @@
@import "win/components/button";
@import "win/components/input";
@import "win/components/link";
@import "win/components/menulist";
@import "win/components/tabbox";