diff --git a/ui/scss/component/_videojs.scss b/ui/scss/component/_videojs.scss index 78dde5394..38b9b9d39 100644 --- a/ui/scss/component/_videojs.scss +++ b/ui/scss/component/_videojs.scss @@ -13,7 +13,7 @@ height: 5rem; width: 100%; background: rgba(20, 20, 20, 0.45); - background: linear-gradient(0deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,0) 100%); + background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 10%, rgba(0, 0, 0, 0) 100%); } } @@ -29,7 +29,7 @@ // Circle play head .vjs-play-progress::before { transform: scale(0); - transition: transform .3s; + transition: transform 0.3s; } &:hover { @@ -57,7 +57,7 @@ // Primary Color Progress .vjs-slider-bar { - background-color: var(--color-primary); + background-color: var(--color-gray-5); } // Inner Progress Bar @@ -87,24 +87,23 @@ // Volume slider .vjs-volume-panel { &.vjs-control { - transition: .2s; + transition: 0.2s; } .vjs-volume-control.vjs-volume-horizontal { - transition: .2s; + transition: 0.2s; } } } - // Tooltip .vjs-mouse-display .vjs-time-tooltip { - color: var(--color-primary); + color: white; } // Tooltip .video-js { - .vjs-progress-control{ + .vjs-progress-control { .vjs-play-progress { .vjs-time-tooltip { display: none; @@ -113,29 +112,26 @@ } } - // Transitions control bar between active / inactive .vjs-has-started { .vjs-control-bar { opacity: 1; - transition: .1s; + transition: 0.1s; } &.vjs-user-inactive.vjs-playing { .vjs-control-bar { opacity: 0; - transition: .3s; + transition: 0.3s; } } &.vjs-user-active.vjs-playing { .vjs-control-bar { - } } } - // Button glow .video-js { .vjs-control, diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index 5662f185d..cbeaaabed 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -11,7 +11,7 @@ // Structure --color-background: var(--color-gray-9); - --color-background-overlay: #11182795; + --color-background-overlay: #21252999; --color-border: var(--color-gray-7); --color-card-background: var(--color-gray-8); --color-card-background-highlighted: var(--color-gray-9); @@ -45,8 +45,7 @@ --color-button-alt-bg-hover: var(--color-gray-6); --color-button-alt-text: var(--color-gray-1); --color-button-border: var(--color-gray-5); - --color-button-toggle-bg: var(--color-secondary); - --color-button-toggle-text: var(--color-text); + --color-button-toggle-text: var(--color-gray-1); --color-link: var(--color-primary-alt-3); --color-link-hover: var(--color-text); --color-link-focus-bg: var(--color-gray-7);