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

fix scrollbars for real now

Browse source
This commit is contained in:
Henry Jameson 2022-04-08 13:34:11 +03:00
parent 282e6812b3
commit 5b47856329
1 changed files with 59 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
src/App.scss
View file

@ -25,59 +25,61 @@ body {
} }
} }
* { @media (any-pointer: fine) {
scrollbar-color: var(--btn) transparent; * {
scrollbar-color: var(--btn) transparent;
&::-webkit-scrollbar { &::-webkit-scrollbar {
background: transparent; background: transparent;
}
&::-webkit-scrollbar-button,
&::-webkit-scrollbar-thumb {
background-color: var(--btn);
box-shadow: var(--buttonShadow);
border-radius: var(--btnRadius);
}
&::-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 { &::-webkit-scrollbar-button,
background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%; &::-webkit-scrollbar-thumb {
background-color: var(--btn);
box-shadow: var(--buttonShadow);
border-radius: var(--btnRadius);
}
&:increment { &::-webkit-scrollbar-button {
background-image: --___bgPadding: 2px;
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
linear-gradient(45deg, transparent 50%, var(--btnText) 51%); color: var(--btnText);
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%; 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);
}
} }
&:decrement { &:vertical {
background-image: background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
linear-gradient(45deg, var(--btnText) 50%, transparent 51%); &:increment {
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%; 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%;
}
} }
} }
} }
@ -200,21 +202,19 @@ nav {
// Only show custom scrollbars on devices which // Only show custom scrollbars on devices which
// have a cursor/pointer to operate them // have a cursor/pointer to operate them
@media (pointer: fine) { &:not(.-show-scrollbar) {
&:not(.-show-scrollbar) { scrollbar-width: none;
scrollbar-width: none; margin-right: -2em;
margin-right: -2em; padding-right: 2.5em;
padding-right: 2.5em;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: block; display: block;
width: 0; width: 0;
}
} }
}
.panel-heading.-sticky { .panel-heading.-sticky {
top: -10px; top: -10px;
}
} }
} }
} }