forked from AkkomaGang/akkoma-fe
remove custom scrollbars
This commit is contained in:
parent
d7688fafd3
commit
6a2cdcfc15
1 changed files with 27 additions and 90 deletions
117
src/App.scss
117
src/App.scss
|
|
@ -28,78 +28,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
// ## Custom scrollbars
|
||||
// Only show custom scrollbars on devices which
|
||||
// have a cursor/pointer to operate them
|
||||
@media (any-pointer: fine) {
|
||||
* {
|
||||
scrollbar-color: var(--btn) transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-button,
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--btn);
|
||||
box-shadow: var(--buttonShadow);
|
||||
border-radius: var(--btnRadius);
|
||||
}
|
||||
|
||||
// horizontal/vertical/increment/decrement are webkit-specific stuff
|
||||
// that indicates whether we're affecting vertical scrollbar, increase button etc
|
||||
// stylelint-disable selector-pseudo-class-no-unknown
|
||||
&::-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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// stylelint-enable selector-pseudo-class-no-unknown
|
||||
}
|
||||
// Body should have background to scrollbar otherwise it will use white (body color?)
|
||||
html {
|
||||
scrollbar-color: var(--selectedMenu) var(--wallpaper);
|
||||
background: var(--wallpaper);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $fallback--link;
|
||||
|
|
@ -110,7 +38,7 @@ h4 {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
i[class*=icon-],
|
||||
i[class*='icon-'],
|
||||
.svg-inline--fa {
|
||||
color: $fallback--icon;
|
||||
color: var(--icon, $fallback--icon);
|
||||
|
|
@ -182,7 +110,7 @@ nav {
|
|||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: var(--miniColumn) var(--maxiColumn);
|
||||
grid-template-areas: "sidebar content";
|
||||
grid-template-areas: 'sidebar content';
|
||||
grid-template-rows: 1fr;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
|
|
@ -228,7 +156,9 @@ nav {
|
|||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin-left: calc(var(--___paddingIncrease) * -1);
|
||||
padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
|
||||
padding-left: calc(
|
||||
var(--___paddingIncrease) + var(--___columnMargin) / 2
|
||||
);
|
||||
|
||||
// On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
|
||||
// might implement old style of hiding scrollbars later if there's demand
|
||||
|
|
@ -236,7 +166,9 @@ nav {
|
|||
&:not(.-show-scrollbar) {
|
||||
scrollbar-width: none;
|
||||
margin-right: calc(var(--___paddingIncrease) * -1);
|
||||
padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
|
||||
padding-right: calc(
|
||||
var(--___paddingIncrease) + var(--___columnMargin) / 2
|
||||
);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: block;
|
||||
|
|
@ -276,21 +208,21 @@ nav {
|
|||
|
||||
&.-reverse:not(.-wide):not(.-mobile) {
|
||||
grid-template-columns: var(--maxiColumn) var(--miniColumn);
|
||||
grid-template-areas: "content sidebar";
|
||||
grid-template-areas: 'content sidebar';
|
||||
}
|
||||
|
||||
&.-wide {
|
||||
grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
|
||||
grid-template-areas: "sidebar content notifs";
|
||||
grid-template-areas: 'sidebar content notifs';
|
||||
|
||||
&.-reverse {
|
||||
grid-template-areas: "notifs content sidebar";
|
||||
grid-template-areas: 'notifs content sidebar';
|
||||
}
|
||||
}
|
||||
|
||||
&.-mobile {
|
||||
grid-template-columns: 100vw;
|
||||
grid-template-areas: "content";
|
||||
grid-template-areas: 'content';
|
||||
padding: 0;
|
||||
|
||||
.column {
|
||||
|
|
@ -347,7 +279,7 @@ nav {
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
i[class*=icon-],
|
||||
i[class*='icon-'],
|
||||
.svg-inline--fa {
|
||||
color: $fallback--text;
|
||||
color: var(--btnText, $fallback--text);
|
||||
|
|
@ -363,7 +295,9 @@ nav {
|
|||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
|
||||
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3),
|
||||
0 1px 0 0 rgba(0, 0, 0, 0.2) inset,
|
||||
0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
|
||||
box-shadow: var(--buttonPressedShadow);
|
||||
color: $fallback--text;
|
||||
color: var(--btnPressedText, $fallback--text);
|
||||
|
|
@ -396,7 +330,9 @@ nav {
|
|||
color: var(--btnToggledText, $fallback--text);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btnToggled, $fallback--fg);
|
||||
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
|
||||
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3),
|
||||
0 1px 0 0 rgba(0, 0, 0, 0.2) inset,
|
||||
0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
|
||||
box-shadow: var(--buttonPressedShadow);
|
||||
|
||||
svg,
|
||||
|
|
@ -461,7 +397,8 @@ textarea,
|
|||
border: none;
|
||||
border-radius: $fallback--inputRadius;
|
||||
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset;
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset,
|
||||
0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset;
|
||||
box-shadow: var(--inputShadow);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--input, $fallback--fg);
|
||||
|
|
@ -479,13 +416,13 @@ textarea,
|
|||
padding: 0 var(--_padding);
|
||||
|
||||
&:disabled,
|
||||
&[disabled=disabled],
|
||||
&[disabled='disabled'],
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&[type=range] {
|
||||
&[type='range'] {
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
|
|
@ -493,7 +430,7 @@ textarea,
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
&[type=radio] {
|
||||
&[type='radio'] {
|
||||
display: none;
|
||||
|
||||
&:checked + label::before {
|
||||
|
|
@ -533,7 +470,7 @@ textarea,
|
|||
}
|
||||
}
|
||||
|
||||
&[type=checkbox] {
|
||||
&[type='checkbox'] {
|
||||
display: none;
|
||||
|
||||
&:checked + label::before {
|
||||
|
|
@ -594,8 +531,8 @@ option {
|
|||
.hide-number-spinner {
|
||||
-moz-appearance: textfield;
|
||||
|
||||
&[type=number]::-webkit-inner-spin-button,
|
||||
&[type=number]::-webkit-outer-spin-button {
|
||||
&[type='number']::-webkit-inner-spin-button,
|
||||
&[type='number']::-webkit-outer-spin-button {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue