interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve player settings menu style

This commit is contained in:
Chocobozzz 2023-07-20 10:53:22 +02:00
parent c8defc41ee
commit 4ddf488ab5
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/assets/player/shared/settings/settings-menu-button.ts
View File

@ -198,7 +198,7 @@ class SettingsButton extends Button {
if (height > maxHeight) { if (height > maxHeight) {
height = maxHeight height = maxHeight
width += 17 width += 15
panelEl.style.maxHeight = `${height}px` panelEl.style.maxHeight = `${height}px`
} else if (panelEl.style.maxHeight !== '') { } else if (panelEl.style.maxHeight !== '') {
panelEl.style.maxHeight = '' panelEl.style.maxHeight = ''

14
client/src/sass/player/settings-menu.scss
View File

@ -18,12 +18,13 @@ $setting-transition-easing: ease-out;
.vjs-settings-dialog { .vjs-settings-dialog {
position: absolute; position: absolute;
right: .5em; right: .5em;
bottom: 3.5em; bottom: 4em;
color: pvar(--embedForegroundColor); color: pvar(--embedForegroundColor);
opacity: $primary-foreground-opacity; opacity: $primary-foreground-opacity;
margin: 0 auto; margin: 0 auto;
font-size: $font-size !important; font-size: $font-size !important;
z-index: 100; z-index: 100;
border-radius: 10px;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
@ -54,11 +55,9 @@ $setting-transition-easing: ease-out;
.vjs-settings-panel { .vjs-settings-panel {
position: absolute; position: absolute;
bottom: 0;
right: 0; right: 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
border-radius: 1px;
} }
.vjs-settings-panel-child { .vjs-settings-panel-child {
@ -118,10 +117,10 @@ $setting-transition-easing: ease-out;
outline: 0; outline: 0;
font-weight: $font-semibold; font-weight: $font-semibold;
text-align: end; text-align: end;
padding: 5px 8px; padding: 8px 15px;
&.vjs-back-button { &.vjs-back-button {
padding: 12px 8px; padding: 12px 15px;
margin-bottom: 5px; margin-bottom: 5px;
border-bottom: 1px solid #808080; border-bottom: 1px solid #808080;
text-align: start; text-align: start;
@ -146,7 +145,7 @@ $setting-transition-easing: ease-out;
@include icon(15px); @include icon(15px);
position: absolute; position: absolute;
left: 8px; left: 15px;
content: ' '; content: ' ';
margin-top: 1px; margin-top: 1px;
background-image: url('#{$assets-path}/player/images/tick-white.svg'); background-image: url('#{$assets-path}/player/images/tick-white.svg');
@ -157,13 +156,14 @@ $setting-transition-easing: ease-out;
// Special captions case // Special captions case
// Bigger caption button // Bigger caption button
&.vjs-captions-button { &.vjs-captions-button {
width: 200px; min-width: 200px;
.vjs-menu-item { .vjs-menu-item {
text-align: start; text-align: start;
.vjs-menu-item-text { .vjs-menu-item-text {
@include margin-left(25px); @include margin-left(25px);
text-transform: capitalize; text-transform: capitalize;
} }
} }