diff options
| -rw-r--r-- | src/App.scss | 37 | ||||
| -rw-r--r-- | src/components/menu_item.style.js | 3 | ||||
| -rw-r--r-- | src/components/root.style.js | 4 | ||||
| -rw-r--r-- | src/components/scrollbar.style.js | 2 | ||||
| -rw-r--r-- | src/services/style_setter/style_setter.js | 2 |
5 files changed, 36 insertions, 12 deletions
diff --git a/src/App.scss b/src/App.scss index 2476791c..36415ddc 100644 --- a/src/App.scss +++ b/src/App.scss @@ -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%; } } diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js index 3812f894..29376e5e 100644 --- a/src/components/menu_item.style.js +++ b/src/components/menu_item.style.js @@ -7,7 +7,8 @@ export default { 'Input', 'Border', 'ButtonUnstyled', - 'Badge' + 'Badge', + 'Avatar' ], states: { hover: ':hover', diff --git a/src/components/root.style.js b/src/components/root.style.js index e4d33051..53777a4b 100644 --- a/src/components/root.style.js +++ b/src/components/root.style.js @@ -16,7 +16,9 @@ export default { { directives: { '--font': 'generic | sans-serif', - '--monoFont': 'generic | monospace' + '--monoFont': 'generic | monospace', + '--bg': 'color | #000000', // just to establish order + '--wallpaper': 'color | --bg, -2' } } ] diff --git a/src/components/scrollbar.style.js b/src/components/scrollbar.style.js index 76053d6f..94e6135d 100644 --- a/src/components/scrollbar.style.js +++ b/src/components/scrollbar.style.js @@ -4,7 +4,7 @@ export default { defaultRules: [ { directives: { - background: '--bg' + background: '--wallpaper' } } ] diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 1e16d3b5..69619a50 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -33,6 +33,8 @@ export const applyTheme = async (input) => { parts[0], ', ', parts[0].replace(/button/, 'thumb'), + ', ', + parts[0].replace(/scrollbar-button/, 'resizer'), ' {', parts[1], '}' |