moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve scrollbars, add avatar to menu-item since it appears in 

autocomplete, add wallpaper color
This commit is contained in:
Henry Jameson 2024-02-28 14:57:19 +02:00
parent 39eee4412f
commit 8e3637c059
5 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/App.scss
View File

@ -41,12 +41,31 @@ body {
// have a cursor/pointer to operate them // have a cursor/pointer to operate them
@media (any-pointer: fine) { @media (any-pointer: fine) {
* { * {
scrollbar-color: var(--btn) transparent; scrollbar-color: var(--fg) transparent;
&::-webkit-scrollbar { &::-webkit-scrollbar {
background: transparent; 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-button,
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
box-shadow: var(--shadow); box-shadow: var(--shadow);
@ -67,15 +86,15 @@ body {
&:increment { &:increment {
background-image: background-image:
linear-gradient(45deg, var(--text) 50%, transparent 51%), linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px)),
linear-gradient(-45deg, transparent 50%, var(--text) 51%); linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px));
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding); background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
} }
&:decrement { &:decrement {
background-image: background-image:
linear-gradient(45deg, transparent 50%, var(--text) 51%), linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
linear-gradient(-45deg, var(--text) 50%, transparent 51%); linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px));
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding); background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
} }
} }
@ -85,15 +104,15 @@ body {
&:increment { &:increment {
background-image: background-image:
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) 51%); linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px));
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%; background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
} }
&:decrement { &:decrement {
background-image: background-image:
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 51%); linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px));
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%; background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
} }
} }

3
src/components/menu_item.style.js
View File

@ -7,7 +7,8 @@ export default {
'Input', 'Input',
'Border', 'Border',
'ButtonUnstyled', 'ButtonUnstyled',
'Badge' 'Badge',
'Avatar'
], ],
states: { states: {
hover: ':hover', hover: ':hover',

4
src/components/root.style.js
View File

@ -16,7 +16,9 @@ export default {
{ {
directives: { directives: {
'--font': 'generic | sans-serif', '--font': 'generic | sans-serif',
'--monoFont': 'generic | monospace' '--monoFont': 'generic | monospace',
'--bg': 'color | #000000', // just to establish order
'--wallpaper': 'color | --bg, -2'
} }
} }
] ]

2
src/components/scrollbar.style.js
View File

@ -4,7 +4,7 @@ export default {
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
background: '--bg' background: '--wallpaper'
} }
} }
] ]

2
src/services/style_setter/style_setter.js
View File

@ -33,6 +33,8 @@ export const applyTheme = async (input) => {
parts[0], parts[0],
', ', ', ',
parts[0].replace(/button/, 'thumb'), parts[0].replace(/button/, 'thumb'),
', ',
parts[0].replace(/scrollbar-button/, 'resizer'),
' {', ' {',
parts[1], parts[1],
'}' '}'