dont theme scrollbars in mobile
This commit is contained in:
parent
01a70b8920
commit
6f3cc058fd
40
src/app/font.scss
Normal file
40
src/app/font.scss
Normal file
@ -0,0 +1,40 @@
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodinl.woff2) format("woff2");
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodinm.woff2) format("woff2");
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodindb.woff2) format("woff2");
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodinb.woff2) format("woff2");
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodineb.woff2) format("woff2");
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodinub.woff2) format("woff2");
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: Rodin, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
@ -2,45 +2,8 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodinl.woff2) format("woff2");
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodinm.woff2) format("woff2");
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodindb.woff2) format("woff2");
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodinb.woff2) format("woff2");
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodineb.woff2) format("woff2");
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rodin;
|
||||
src: url(#{$asset-url}fonts/rodinub.woff2) format("woff2");
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: Rodin, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
@import 'font';
|
||||
@import 'scrollbar';
|
||||
|
||||
// offsets for header size of 5.5rem
|
||||
.h-fixed {
|
||||
@ -56,122 +19,6 @@ html {
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--scrollbar-bg: #f4f3f7;
|
||||
--scrollbar-thumb: #c1c1c1;
|
||||
--scrollbar-thumb-hover: #a8a8a8;
|
||||
--scrollbar-thumb-active: #787878;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--scrollbar-bg: hsl(276, 10%, 13%);
|
||||
--scrollbar-thumb: hsl(276, 10%, 30%);
|
||||
--scrollbar-thumb-hover: hsl(276, 10%, 35%);
|
||||
--scrollbar-thumb-active: hsl(276, 10%, 40%);
|
||||
}
|
||||
|
||||
$scrollbar-size: 13px;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: $scrollbar-size;
|
||||
height: $scrollbar-size;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner,
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--scrollbar-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb);
|
||||
background-clip: padding-box;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: var(--scrollbar-thumb-active);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
::-webkit-scrollbar-button:single-button {
|
||||
background-color: var(--scrollbar-bg);
|
||||
|
||||
display: block;
|
||||
background-size: 8px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Up */
|
||||
::-webkit-scrollbar-button:single-button:vertical:decrement {
|
||||
height: $scrollbar-size;
|
||||
width: $scrollbar-size;
|
||||
background-position: center 4px;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
|
||||
}
|
||||
|
||||
/* Down */
|
||||
::-webkit-scrollbar-button:single-button:vertical:increment {
|
||||
height: $scrollbar-size;
|
||||
width: $scrollbar-size;
|
||||
background-position: center 2px;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:vertical:increment:active {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
|
||||
}
|
||||
|
||||
/* Left */
|
||||
::-webkit-scrollbar-button:single-button:horizontal:decrement {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-position: 3px 3px;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
|
||||
}
|
||||
|
||||
/* Right */
|
||||
::-webkit-scrollbar-button:single-button:horizontal:increment {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-position: 3px 3px;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:horizontal:increment:active {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
|
||||
}
|
||||
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 275 22% 96%;
|
||||
|
||||
118
src/app/scrollbar.scss
Normal file
118
src/app/scrollbar.scss
Normal file
@ -0,0 +1,118 @@
|
||||
:root {
|
||||
--scrollbar-bg: #f4f3f7;
|
||||
--scrollbar-thumb: #c1c1c1;
|
||||
--scrollbar-thumb-hover: #a8a8a8;
|
||||
--scrollbar-thumb-active: #787878;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--scrollbar-bg: hsl(276, 10%, 13%);
|
||||
--scrollbar-thumb: hsl(276, 10%, 30%);
|
||||
--scrollbar-thumb-hover: hsl(276, 10%, 35%);
|
||||
--scrollbar-thumb-active: hsl(276, 10%, 40%);
|
||||
}
|
||||
|
||||
$scrollbar-size: 13px;
|
||||
|
||||
// dont theme scrollbars on mobile
|
||||
@media (hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: $scrollbar-size;
|
||||
height: $scrollbar-size;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner,
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--scrollbar-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb);
|
||||
background-clip: padding-box;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: var(--scrollbar-thumb-active);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
::-webkit-scrollbar-button:single-button {
|
||||
background-color: var(--scrollbar-bg);
|
||||
|
||||
display: block;
|
||||
background-size: 8px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Up */
|
||||
::-webkit-scrollbar-button:single-button:vertical:decrement {
|
||||
height: $scrollbar-size;
|
||||
width: $scrollbar-size;
|
||||
background-position: center 4px;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
|
||||
}
|
||||
|
||||
/* Down */
|
||||
::-webkit-scrollbar-button:single-button:vertical:increment {
|
||||
height: $scrollbar-size;
|
||||
width: $scrollbar-size;
|
||||
background-position: center 2px;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:vertical:increment:active {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
|
||||
}
|
||||
|
||||
/* Left */
|
||||
::-webkit-scrollbar-button:single-button:horizontal:decrement {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-position: 3px 3px;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
|
||||
}
|
||||
|
||||
/* Right */
|
||||
::-webkit-scrollbar-button:single-button:horizontal:increment {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-position: 3px 3px;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:horizontal:increment:active {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user