diff --git a/src/components/Player/player.css b/src/components/Player/player.css index 14ad3a6..20e2446 100644 --- a/src/components/Player/player.css +++ b/src/components/Player/player.css @@ -62,25 +62,12 @@ box-sizing: border-box; padding: var(--inner-padding); - - scrollbar-color: var(--main-color) var(--bg-color); - scrollbar-width: thin; } .ifplayer .output .buffer:empty { display: none; } -.ifplayer .output .buffer::-webkit-scrollbar { - width: 8px; -} - -.ifplayer .output .buffer::-webkit-scrollbar-thumb { - background-color: var(--main-color); - border: 4px solid var(--bg-color); - border-left-width: 0px; -} - .ifplayer .output .gridBuffer { flex-shrink: 0; max-height: 100%; diff --git a/src/index.js b/src/index.js index b3dc447..8968542 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import { render } from 'preact' import '@fontsource/open-sans' import './style/base.scss' -import './style/components.scss' +import './style/controls.scss' import App from './App' diff --git a/src/style/base.scss b/src/style/base.scss index 9a188f2..fec64f4 100644 --- a/src/style/base.scss +++ b/src/style/base.scss @@ -28,8 +28,10 @@ html, body { color: var(--main-color); background-color: var(--bg-color); - /* Fix for Jumping Scrollbar Issue */ - padding-left: calc(100vw - 100%); + /* Fix for Jumping Scrollbar Issue */ + @media (min-width: 800px) { + padding-left: calc(100vw - 100%); + } & > main { flex: 1 1 auto; diff --git a/src/style/components.scss b/src/style/controls.scss similarity index 84% rename from src/style/components.scss rename to src/style/controls.scss index 68a2b1d..8b6cd4e 100644 --- a/src/style/components.scss +++ b/src/style/controls.scss @@ -1,3 +1,22 @@ +/* Scrollbars */ + +body { + * { + scrollbar-color: var(--main-color) var(--bg-color); + scrollbar-width: thin; + } + + *::-webkit-scrollbar { + width: var(--inner-padding); + } + + *::-webkit-scrollbar-thumb { + background-color: var(--main-color); + border: calc(0.5 * var(--inner-padding)) solid var(--bg-color); + border-left-width: 0; + } +} + /* Focus */ *:focus-visible {