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;
|
font-style: normal;
|
||||||
line-height: 1.3333333333;
|
line-height: 1.3333333333;
|
||||||
@media (-moz-platform: windows) {
|
@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-outer-border, var(--fill-primary), var(--accent-white));
|
||||||
@include light-dark(--color-focus-border, var(--accent-white), #00000080);
|
@include light-dark(--color-focus-border, var(--accent-white), #00000080);
|
||||||
--width-focus-outer-border: 2px;
|
--width-focus-outer-border: 2px;
|
||||||
|
|
|
@ -10,14 +10,14 @@ input:is([type=button], [type=submit]) {
|
||||||
color: var(--accent-white);
|
color: var(--accent-white);
|
||||||
|
|
||||||
&:not([disabled]) {
|
&:not([disabled]) {
|
||||||
--color-form-element-background: var(--accent-blue);
|
--color-form-element-background: var(--color-accent);
|
||||||
|
|
||||||
&:hover {
|
&: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 {
|
&: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;
|
@include focus-ring;
|
||||||
|
|
|
@ -15,19 +15,19 @@
|
||||||
background-clip: border-box, padding-box;
|
background-clip: border-box, padding-box;
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
border: 1px solid var(--fill-quinary);
|
border: 1px solid var(--fill-quinary);
|
||||||
border-bottom-color: var(--accent-blue);
|
border-bottom-color: var(--color-accent);
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
background-image:
|
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));
|
linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
border: 1px solid var(--fill-quinary);
|
border: 1px solid var(--fill-quinary);
|
||||||
border-bottom-color: var(--accent-blue);
|
border-bottom-color: var(--color-accent);
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
background-image:
|
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));
|
linear-gradient(var(--fill-senary), var(--fill-senary));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -95,7 +95,7 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
&::selection {
|
&::selection {
|
||||||
background-color: var(--accent-blue);
|
background-color: var(--color-accent);
|
||||||
color: var(--accent-white);
|
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/button";
|
||||||
@import "win/components/input";
|
@import "win/components/input";
|
||||||
|
@import "win/components/link";
|
||||||
@import "win/components/menulist";
|
@import "win/components/menulist";
|
||||||
@import "win/components/tabbox";
|
@import "win/components/tabbox";
|
||||||
|
|
Loading…
Add table
Reference in a new issue