From 6f3cc058fdb08e9dc4e31edbd17e67683083379c Mon Sep 17 00:00:00 2001 From: sk1982 Date: Tue, 12 Mar 2024 21:14:03 -0400 Subject: [PATCH] dont theme scrollbars in mobile --- src/app/font.scss | 40 +++++++++++ src/app/globals.scss | 157 +---------------------------------------- src/app/scrollbar.scss | 118 +++++++++++++++++++++++++++++++ 3 files changed, 160 insertions(+), 155 deletions(-) create mode 100644 src/app/font.scss create mode 100644 src/app/scrollbar.scss diff --git a/src/app/font.scss b/src/app/font.scss new file mode 100644 index 0000000..3277c4d --- /dev/null +++ b/src/app/font.scss @@ -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"; +} diff --git a/src/app/globals.scss b/src/app/globals.scss index 89239f9..0409bf3 100644 --- a/src/app/globals.scss +++ b/src/app/globals.scss @@ -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,"); -} - -::-webkit-scrollbar-button:single-button:vertical:decrement:hover { - background-image: url("data:image/svg+xml;utf8,"); -} - -::-webkit-scrollbar-button:single-button:vertical:decrement:active { - background-image: url("data:image/svg+xml;utf8,"); -} - -/* 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,"); -} - -::-webkit-scrollbar-button:single-button:vertical:increment:hover { - background-image: url("data:image/svg+xml;utf8,"); -} - -::-webkit-scrollbar-button:single-button:vertical:increment:active { - background-image: url("data:image/svg+xml;utf8,"); -} - -/* Left */ -::-webkit-scrollbar-button:single-button:horizontal:decrement { - height: 12px; - width: 12px; - background-position: 3px 3px; - background-image: url("data:image/svg+xml;utf8,"); - -} - -::-webkit-scrollbar-button:single-button:horizontal:decrement:hover { - background-image: url("data:image/svg+xml;utf8,"); -} - -::-webkit-scrollbar-button:single-button:horizontal:decrement:active { - background-image: url("data:image/svg+xml;utf8,"); -} - -/* Right */ -::-webkit-scrollbar-button:single-button:horizontal:increment { - height: 12px; - width: 12px; - background-position: 3px 3px; - background-image: url("data:image/svg+xml;utf8,"); -} - -::-webkit-scrollbar-button:single-button:horizontal:increment:hover { - background-image: url("data:image/svg+xml;utf8,"); -} - -::-webkit-scrollbar-button:single-button:horizontal:increment:active { - background-image: url("data:image/svg+xml;utf8,"); -} - - @layer base { :root { --background: 275 22% 96%; diff --git a/src/app/scrollbar.scss b/src/app/scrollbar.scss new file mode 100644 index 0000000..4535bd6 --- /dev/null +++ b/src/app/scrollbar.scss @@ -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,"); + } + + ::-webkit-scrollbar-button:single-button:vertical:decrement:hover { + background-image: url("data:image/svg+xml;utf8,"); + } + + ::-webkit-scrollbar-button:single-button:vertical:decrement:active { + background-image: url("data:image/svg+xml;utf8,"); + } + + /* 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,"); + } + + ::-webkit-scrollbar-button:single-button:vertical:increment:hover { + background-image: url("data:image/svg+xml;utf8,"); + } + + ::-webkit-scrollbar-button:single-button:vertical:increment:active { + background-image: url("data:image/svg+xml;utf8,"); + } + + /* Left */ + ::-webkit-scrollbar-button:single-button:horizontal:decrement { + height: 12px; + width: 12px; + background-position: 3px 3px; + background-image: url("data:image/svg+xml;utf8,"); + + } + + ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover { + background-image: url("data:image/svg+xml;utf8,"); + } + + ::-webkit-scrollbar-button:single-button:horizontal:decrement:active { + background-image: url("data:image/svg+xml;utf8,"); + } + + /* Right */ + ::-webkit-scrollbar-button:single-button:horizontal:increment { + height: 12px; + width: 12px; + background-position: 3px 3px; + background-image: url("data:image/svg+xml;utf8,"); + } + + ::-webkit-scrollbar-button:single-button:horizontal:increment:hover { + background-image: url("data:image/svg+xml;utf8,"); + } + + ::-webkit-scrollbar-button:single-button:horizontal:increment:active { + background-image: url("data:image/svg+xml;utf8,"); + } +} +