Added support for PiP and video controls

This commit is contained in:
Niléane 2023-07-14 14:42:08 +02:00
parent 6f06155f88
commit 6e9f913ae2
No known key found for this signature in database
2 changed files with 53 additions and 11 deletions

View file

@ -602,9 +602,9 @@ body.layout-single-column {
.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button { .layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button {
color: #ffffff; color: #ffffff;
} }
.compose-form .compose-form__modifiers .compose-form__upload .icon-button:active, .layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:active,
.compose-form .compose-form__modifiers .compose-form__upload .icon-button:focus, .layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:focus,
.compose-form .compose-form__modifiers .compose-form__upload .icon-button:hover { .layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:hover {
background-color: rgba(0, 0, 0, .4); background-color: rgba(0, 0, 0, .4);
} }
@media screen and (max-width:1174px) { @media screen and (max-width:1174px) {
@ -1869,7 +1869,7 @@ body.layout-single-column {
/* Lists tab */ /* 📋 Lists tab */
.layout-single-column .column-inline-form { .layout-single-column .column-inline-form {
background-color: var(--color-accent-bg); background-color: var(--color-accent-bg);
border-radius: 7px; border-radius: 7px;
@ -1924,7 +1924,7 @@ body.layout-single-column {
} }
/* Follow requests */ /* Follow requests */
.layout-single-column #Follow-requests { .layout-single-column #Follow-requests {
margin-bottom: 0; margin-bottom: 0;
z-index: 0; z-index: 0;
@ -2039,7 +2039,7 @@ body.layout-single-column {
background-color: var(--color-accent-focus); background-color: var(--color-accent-focus);
} }
/* Toggles */ /* ⏺️ Toggles */
.layout-single-column .setting-toggle__label { .layout-single-column .setting-toggle__label {
vertical-align: top; vertical-align: top;
} }
@ -2059,7 +2059,7 @@ body.layout-single-column {
} }
/* Radio buttons */ /* ⏺️ Radio buttons */
.layout-single-column .radio-button { .layout-single-column .radio-button {
color: var(--color-content-fg); color: var(--color-content-fg);
} }
@ -2216,6 +2216,27 @@ body.layout-single-column {
color: var(--color-accent-fg); color: var(--color-accent-fg);
} }
/* 🖼️ Picture in Picture */
.layout-single-column .picture-in-picture {
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
border-radius: 7px;
}
.layout-single-column .picture-in-picture__footer,
.layout-single-column .picture-in-picture__header {
background-color: var(--color-content-bg);
}
.picture-in-picture__header .display-name span {
color: var(--color-content-fg-muted);
}
/* ⏯️ Video controls */
.layout-single-column .video-player__seek__buffer,
.layout-single-column .video-player__seek__progress,
.layout-single-column .video-player__volume__handle,
.layout-single-column .video-player__volume__current {
background-color: var(--color-accent);
}
/* 📄 Meta /* 📄 Meta
------- */ ------- */

View file

@ -1869,7 +1869,7 @@ body.layout-single-column {
/* Lists tab */ /* 📋 Lists tab */
.layout-single-column .column-inline-form { .layout-single-column .column-inline-form {
background-color: var(--color-accent-bg); background-color: var(--color-accent-bg);
border-radius: 7px; border-radius: 7px;
@ -1924,7 +1924,7 @@ body.layout-single-column {
} }
/* Follow requests */ /* Follow requests */
.layout-single-column #Follow-requests { .layout-single-column #Follow-requests {
margin-bottom: 0; margin-bottom: 0;
z-index: 0; z-index: 0;
@ -2039,7 +2039,7 @@ body.layout-single-column {
background-color: var(--color-accent-focus); background-color: var(--color-accent-focus);
} }
/* Toggles */ /* ⏺️ Toggles */
.layout-single-column .setting-toggle__label { .layout-single-column .setting-toggle__label {
vertical-align: top; vertical-align: top;
} }
@ -2059,7 +2059,7 @@ body.layout-single-column {
} }
/* Radio buttons */ /* ⏺️ Radio buttons */
.layout-single-column .radio-button { .layout-single-column .radio-button {
color: var(--color-content-fg); color: var(--color-content-fg);
} }
@ -2216,6 +2216,27 @@ body.layout-single-column {
color: var(--color-accent-fg); color: var(--color-accent-fg);
} }
/* 🖼️ Picture in Picture */
.layout-single-column .picture-in-picture {
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
border-radius: 7px;
}
.layout-single-column .picture-in-picture__footer,
.layout-single-column .picture-in-picture__header {
background-color: var(--color-content-bg);
}
.layout-single-column .picture-in-picture__header .display-name span {
color: var(--color-content-fg-muted);
}
/* ⏯️ Video controls */
.layout-single-column .video-player__seek__buffer,
.layout-single-column .video-player__seek__progress,
.layout-single-column .video-player__volume__handle,
.layout-single-column .video-player__volume__current {
background-color: var(--color-accent);
}
/* 📄 Meta /* 📄 Meta
------- */ ------- */