Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fancy scrollbars

Browse source
This commit is contained in:
Henry Jameson 2022-04-07 16:00:28 +03:00
parent b5ded67c06
commit b8b7ae8564
2 changed files with 61 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/App.scss
View file

@ -25,6 +25,63 @@ body {
} }
} }
* {
scrollbar-color: var(--btn) transparent;
&::-webkit-scrollbar {
background: transparent;
}
&::-webkit-scrollbar-button,
&::-webkit-scrollbar-thumb {
background-color: var(--btn);
box-shadow: var(--buttonShadow);
}
&::-webkit-scrollbar-button {
--___bgPadding: 2px;
color: var(--btnText);
background-repeat: no-repeat, no-repeat;
&:horizontal {
background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
&:increment {
background-image:
linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
}
&:decrement {
background-image:
linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
}
}
&:vertical {
background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
&:increment {
background-image:
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
}
&:decrement {
background-image:
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
}
}
}
}
a { a {
text-decoration: none; text-decoration: none;
color: $fallback--link; color: $fallback--link;
@ -207,10 +264,6 @@ nav {
} }
} }
#content,
.column.-scrollable {
}
.text-center { .text-center {
text-align: center; text-align: center;
} }

8
src/services/style_setter/style_setter.js
View file

@ -13,10 +13,10 @@ export const applyTheme = (input) => {
const styleSheet = styleEl.sheet const styleSheet = styleEl.sheet
styleSheet.toString() styleSheet.toString()
styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max') styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max') styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max') styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max') styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
body.classList.remove('hidden') body.classList.remove('hidden')
} }