yetangitu/Peertube
1
0
Fork 0
mirror of https://github.com/Chocobozzz/PeerTube.git synced 2025-10-04 18:29:27 +02:00
Code Issues Releases Wiki Activity

Decrease settings menu opacity

Browse source
This commit is contained in:
Chocobozzz 2025-09-15 15:40:01 +02:00
parent cd8ad77515
commit 84dbcb5f11
No known key found for this signature in database
GPG key ID: 583A612D890159BE
5 changed files with 16 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/src/standalone/player/src/sass/shared/_player-variables.scss
View file

@ -1,9 +1,7 @@
@use "sass:color"; @use "sass:color";
$primary-foreground-color: #fff; $fg-opacity: 0.9;
$primary-foreground-opacity: 0.9; $fg-opacity-hover: 1;
$primary-foreground-opacity-hover: 1;
$primary-background-color: rgba(0, 0, 0, 0.8);
$font-size: 13px; $font-size: 13px;

4
client/src/standalone/player/src/sass/shared/context-menu.scss
View file

@ -13,7 +13,7 @@ $context-menu-width: 350px;
z-index: 105; // On top of the progress bar z-index: 105; // On top of the progress bar
.vjs-menu-content { .vjs-menu-content {
opacity: $primary-foreground-opacity; opacity: $fg-opacity;
color: pvar(--embed-fg); color: pvar(--embed-fg);
font-size: $font-size !important; font-size: $font-size !important;
font-weight: $font-semibold; font-weight: $font-semibold;
@ -27,7 +27,7 @@ $context-menu-width: 350px;
justify-content: flex-start; justify-content: flex-start;
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.2); background-color: var(--embed-background-color-hover);
} }
[class^="vjs-icon-"] { [class^="vjs-icon-"] {

12
client/src/standalone/player/src/sass/shared/control-bar.scss
View file

@ -88,10 +88,10 @@ $chapter-marker-size: 9px;
transition: opacity 0.1s; transition: opacity 0.1s;
&:not(.vjs-disabled) { &:not(.vjs-disabled) {
opacity: $primary-foreground-opacity; opacity: $fg-opacity;
&:hover { &:hover {
opacity: $primary-foreground-opacity-hover; opacity: $fg-opacity-hover;
} }
} }
} }
@ -154,7 +154,7 @@ $chapter-marker-size: 9px;
.vjs-duration, .vjs-duration,
.vjs-peertube { .vjs-peertube {
color: pvar(--embed-fg); color: pvar(--embed-fg);
opacity: $primary-foreground-opacity; opacity: $fg-opacity;
} }
.vjs-time-control { .vjs-time-control {
@ -195,7 +195,7 @@ $chapter-marker-size: 9px;
.vjs-pt-live-control { .vjs-pt-live-control {
width: auto; width: auto;
opacity: $primary-foreground-opacity; // videojs adds a .vjs-disabled when the live is synced opacity: $fg-opacity; // videojs adds a .vjs-disabled when the live is synced
font-size: var(--control-bar-font-size); font-size: var(--control-bar-font-size);
@include margin-right(auto); @include margin-right(auto);
@ -204,7 +204,7 @@ $chapter-marker-size: 9px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: $primary-foreground-opacity-hover; opacity: $fg-opacity-hover;
} }
} }
@ -480,7 +480,7 @@ $chapter-marker-size: 9px;
&.enabled, &.enabled,
&.enabled:hover { &.enabled:hover {
opacity: $primary-foreground-opacity !important; opacity: $fg-opacity !important;
} }
&:focus { &:focus {

9
client/src/standalone/player/src/sass/shared/peertube-skin.scss
View file

@ -5,10 +5,11 @@
@use "./_player-mixins" as *; @use "./_player-mixins" as *;
body { body {
--embed-foreground-color: #{$primary-foreground-color}; --embed-foreground-color: #fff;
--embed-background-color: #{$primary-background-color}; --embed-background-color: rgba(0, 0, 0, 0.6);
--embed-background-color-hover: rgba(255, 255, 255, 0.1);
--embed-big-play-background-color: #{$primary-background-color}; --embed-big-play-background-color: rgba(0, 0, 0, 0.8);
// Prevent z-index bug with Firefox PiP button // Prevent z-index bug with Firefox PiP button
// See: // See:
@ -85,7 +86,7 @@ body {
} }
.vjs-control-bar { .vjs-control-bar {
opacity: $primary-foreground-opacity-hover; opacity: $fg-opacity-hover;
} }
} }

2
client/src/standalone/player/src/sass/shared/settings-menu.scss
View file

@ -88,7 +88,7 @@ $setting-transition-easing: ease-out;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: rgba(255, 255, 255, 0.2); background-color: var(--embed-background-color-hover);
} }
&.disabled { &.disabled {