|
|
|
@ -41,12 +41,31 @@ body {
|
|
|
|
|
// have a cursor/pointer to operate them
|
|
|
|
|
@media (any-pointer: fine) {
|
|
|
|
|
* {
|
|
|
|
|
scrollbar-color: var(--btn) transparent;
|
|
|
|
|
scrollbar-color: var(--fg) transparent;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar-corner {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::-webkit-resizer {
|
|
|
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
background-image:
|
|
|
|
|
linear-gradient(
|
|
|
|
|
135deg,
|
|
|
|
|
transparent calc(50% - 1px),
|
|
|
|
|
var(--textFaint) 50%,
|
|
|
|
|
transparent calc(50% + 1px),
|
|
|
|
|
transparent calc(75% - 1px),
|
|
|
|
|
var(--textFaint) 75%,
|
|
|
|
|
transparent calc(75% + 1px),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar-button,
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
|
box-shadow: var(--shadow);
|
|
|
|
@ -67,15 +86,15 @@ body {
|
|
|
|
|
|
|
|
|
|
&:increment {
|
|
|
|
|
background-image:
|
|
|
|
|
linear-gradient(45deg, var(--text) 50%, transparent 51%),
|
|
|
|
|
linear-gradient(-45deg, transparent 50%, var(--text) 51%);
|
|
|
|
|
linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px)),
|
|
|
|
|
linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px));
|
|
|
|
|
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:decrement {
|
|
|
|
|
background-image:
|
|
|
|
|
linear-gradient(45deg, transparent 50%, var(--text) 51%),
|
|
|
|
|
linear-gradient(-45deg, var(--text) 50%, transparent 51%);
|
|
|
|
|
linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
|
|
|
|
|
linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px));
|
|
|
|
|
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -85,15 +104,15 @@ body {
|
|
|
|
|
|
|
|
|
|
&:increment {
|
|
|
|
|
background-image:
|
|
|
|
|
linear-gradient(-45deg, transparent 50%, var(--text) 51%),
|
|
|
|
|
linear-gradient(45deg, transparent 50%, var(--text) 51%);
|
|
|
|
|
linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px)),
|
|
|
|
|
linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px));
|
|
|
|
|
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:decrement {
|
|
|
|
|
background-image:
|
|
|
|
|
linear-gradient(-45deg, var(--text) 50%, transparent 51%),
|
|
|
|
|
linear-gradient(45deg, var(--text) 50%, transparent 51%);
|
|
|
|
|
linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px)),
|
|
|
|
|
linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px));
|
|
|
|
|
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|