mirror of
https://github.com/owncast/owncast.git
synced 2024-12-21 08:49:16 +03:00
25119561fb
* Add className prop to some components * Give mobile chatbox height priority over other elements * Optimize for mobile landscape mode * Make thumbnail background black * Fix overflow issues on narrow screens * Adjust layout for offline mode on mobile * Fix main content width on Desktop * Fix offline layout for desktop
81 lines
2.1 KiB
SCSS
81 lines
2.1 KiB
SCSS
/* Change all text and icon colors in the player. */
|
|
.vjs-owncast {
|
|
.video-js {
|
|
color: var(--theme-color-components-text-on-light);
|
|
}
|
|
|
|
.vjs-menu li {
|
|
color: var(--theme-color-components-text-on-dark);
|
|
}
|
|
|
|
.vjs-big-play-button {
|
|
z-index: 10;
|
|
color: var(--theme-color-action);
|
|
|
|
// Setting the font size resizes the video.js
|
|
// BigPlayButton due to its style definitions
|
|
// (see https://github.com/videojs/video.js/blob/b306ce614e70e6d3305348d1b69e1434031d73ef/src/css/components/_big-play.scss)
|
|
// 30vmin determined by trial & error to not cause
|
|
// overflow with weird (small) x or y dimensions.
|
|
// min and max are also arbitrary; max was the old
|
|
// constant value. feel free to change if necessary,
|
|
// but check short and narrow screen sizes for overflow
|
|
// issues.
|
|
font-size: clamp(1rem, 30vmin, 8rem) !important;
|
|
|
|
border-color: transparent !important;
|
|
border-radius: var(--theme-rounded-corners) !important;
|
|
background-color: transparent !important;
|
|
text-shadow: 2px 3px 4px #0000005f;
|
|
|
|
-webkit-text-stroke: 2px white;
|
|
text-stroke: 2px white;
|
|
|
|
:hover {
|
|
transition: all 0.2s ease-in-out;
|
|
font-size: 10rem;
|
|
text-shadow: 2px 5px 4px #00000093;
|
|
}
|
|
}
|
|
|
|
.vjs-loading-spinner {
|
|
z-index: 10;
|
|
display: block;
|
|
color: var(--theme-color-components-text-on-light);
|
|
}
|
|
|
|
.vjs-control-bar {
|
|
color: var(--theme-color-components-text-on-light);
|
|
background-color: var(--theme-color-background-main) !important;
|
|
}
|
|
|
|
.vjs-control {
|
|
color: var(--theme-color-components-text-on-light);
|
|
}
|
|
}
|
|
|
|
.vjs-airplay {
|
|
.vjs-icon-placeholder::before {
|
|
content: url('../airplay.svg');
|
|
width: 50% !important;
|
|
height: 50% !important;
|
|
top: 15% !important;
|
|
left: 15% !important;
|
|
}
|
|
}
|
|
|
|
.vjs-quality-selector {
|
|
.vjs-icon-placeholder {
|
|
font-family: VideoJS, serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
|
|
&::before {
|
|
content: '\f110';
|
|
}
|
|
}
|
|
}
|
|
|
|
.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
|
|
color: var(--theme-color-components-video-live-indicator) !important;
|
|
}
|