diff --git a/materialious/src/lib/components/player/Timeline.svelte b/materialious/src/lib/components/player/Timeline.svelte index 78db1d2d..5ebbcfa4 100644 --- a/materialious/src/lib/components/player/Timeline.svelte +++ b/materialious/src/lib/components/player/Timeline.svelte @@ -332,7 +332,7 @@ will-change: transform; padding: 0; display: block; - border-radius: 1rem; + border-radius: var(--border-radius); } .tooltip.thumb { @@ -350,8 +350,8 @@ transform: translateY(-50%); z-index: 1; pointer-events: none; - border-top-right-radius: 2.5rem; - border-bottom-right-radius: 2.5rem; + border-top-right-radius: var(--player-border-radius); + border-bottom-right-radius: var(--player-border-radius); opacity: 0.5; } @@ -362,7 +362,7 @@ left: 0; height: var(--player-timeline-height); background-color: var(--secondary); - border-radius: 2.5rem; + border-radius: var(--player-border-radius); z-index: 2; pointer-events: none; opacity: 0.5; diff --git a/materialious/src/lib/css/global.css b/materialious/src/lib/css/global.css index da90ad09..8f23c694 100644 --- a/materialious/src/lib/css/global.css +++ b/materialious/src/lib/css/global.css @@ -5,6 +5,8 @@ :root { --video-player-height: 0px; --safe-area-inset-top: 0px; + --border-radius: 0.5rem; + --player-border-radius: 0.25rem; } @font-face { @@ -124,8 +126,9 @@ menu { button, .button, -.round { - border-radius: 0.5rem !important; +.round, +menu { + border-radius: var(--border-radius) !important; } .altcha { @@ -141,7 +144,7 @@ menu.player-settings { .player-slider { height: var(--player-timeline-height); margin: 0 auto; - border-radius: 2.5rem; + border-radius: var(--border-radius); } .player-slider.full-width { @@ -156,7 +159,7 @@ menu.player-settings { background: var(--secondary-container); height: 100%; position: relative; - border-radius: 2.5rem; + border-radius: var(--player-border-radius); } .player-slider .range { @@ -164,7 +167,7 @@ menu.player-settings { background: var(--inverse-primary); inset: 0; right: var(--percentage-inv); - border-radius: 2.5rem; + border-radius: var(--player-border-radius); opacity: 0.5; }