Added support for PiP and video controls
This commit is contained in:
parent
6f06155f88
commit
6e9f913ae2
2 changed files with 53 additions and 11 deletions
|
@ -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
|
||||||
------- */
|
------- */
|
||||||
|
|
|
@ -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
|
||||||
------- */
|
------- */
|
||||||
|
|
Loading…
Reference in a new issue