ff46c18164
Now that themes are controlled with a class instead of setting media="none" on the stylesheet link and both themes already being duplicated in default.css for the automatic themeing it makes sense to have all theme related CSS in the same place. This commit also fixes the missing dark theme on embeds.
611 lines
10 KiB
CSS
611 lines
10 KiB
CSS
html,
|
|
body {
|
|
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen,
|
|
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica,
|
|
Arial, sans-serif;
|
|
}
|
|
|
|
.deleted {
|
|
background-color: rgb(255, 0, 0, 0.5);
|
|
}
|
|
|
|
.channel-profile > * {
|
|
font-size: 1.17em;
|
|
font-weight: bold;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.channel-profile > img {
|
|
width: 48px;
|
|
height: auto;
|
|
}
|
|
|
|
.channel-owner {
|
|
background-color: #008bec;
|
|
color: #fff;
|
|
border-radius: 9px;
|
|
padding: 1px 6px;
|
|
}
|
|
|
|
.creator-heart-container {
|
|
display: inline-block;
|
|
padding: 0px 7px 6px 0px;
|
|
margin: 0px -7px -4px 0px;
|
|
}
|
|
|
|
.creator-heart {
|
|
position: relative;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px none;
|
|
}
|
|
|
|
.creator-heart-background-hearted {
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
.creator-heart-small-hearted {
|
|
position: absolute;
|
|
right: -7px;
|
|
bottom: -4px;
|
|
}
|
|
|
|
.creator-heart-small-container {
|
|
position: relative;
|
|
width: 13px;
|
|
height: 13px;
|
|
color: rgb(255, 0, 0);
|
|
}
|
|
|
|
.feed-menu {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.feed-menu-item {
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.feed-menu-item {
|
|
flex: 0 0 40%;
|
|
}
|
|
}
|
|
|
|
.h-box {
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.v-box {
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
div {
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.loading {
|
|
display: inline-block;
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
.playlist-restricted {
|
|
height: 20em;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
button.pure-button-primary,
|
|
a.pure-button-primary,
|
|
.channel-owner:hover {
|
|
background-color: #a0a0a0;
|
|
color: rgba(35, 35, 35, 1);
|
|
}
|
|
|
|
button.pure-button-primary:hover,
|
|
a.pure-button-primary:hover {
|
|
background-color: rgba(0, 182, 240, 1);
|
|
color: #fff;
|
|
}
|
|
|
|
div.thumbnail {
|
|
padding: 28.125%;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
img.thumbnail {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.length {
|
|
z-index: 100;
|
|
position: absolute;
|
|
background-color: rgba(35, 35, 35, 0.75);
|
|
color: #fff;
|
|
border-radius: 2px;
|
|
padding: 2px;
|
|
font-size: 16px;
|
|
right: 0.25em;
|
|
bottom: -0.75em;
|
|
}
|
|
|
|
.watched {
|
|
z-index: 100;
|
|
position: absolute;
|
|
background-color: rgba(35, 35, 35, 0.75);
|
|
color: #fff;
|
|
border-radius: 2px;
|
|
padding: 4px 8px 4px 8px;
|
|
font-size: 16px;
|
|
left: 0.2em;
|
|
top: -0.7em;
|
|
}
|
|
|
|
/*
|
|
* Navbar
|
|
*/
|
|
|
|
.navbar {
|
|
margin: 1em 0;
|
|
display: flex; /* this is also defined in framework, but in case of future changes */
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.navbar > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.navbar > .searchbar {
|
|
flex-grow: 2; /* take double the space of the other items */
|
|
}
|
|
|
|
.navbar a {
|
|
padding: 0; /* this way it will stay aligned with content under */
|
|
}
|
|
|
|
.navbar .index-link {
|
|
font-weight: bold;
|
|
display: inline;
|
|
}
|
|
|
|
.navbar > .searchbar .pure-form input[type="search"] {
|
|
margin-bottom: 1px;
|
|
|
|
border-top: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-bottom: 1px solid #ccc;
|
|
border-radius: 0;
|
|
|
|
padding: initial 0;
|
|
|
|
box-shadow: none;
|
|
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/* https://stackoverflow.com/a/55170420 */
|
|
input[type="search"]::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
height: 14px;
|
|
width: 14px;
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
|
|
background-size: 14px;
|
|
}
|
|
|
|
.navbar > .searchbar .pure-form fieldset {
|
|
padding: 0;
|
|
}
|
|
|
|
/* attract focus to the searchbar by adding a subtle transition */
|
|
.navbar > .searchbar .pure-form input[type="search"]:focus {
|
|
margin-bottom: 0px;
|
|
border-bottom: 2px solid #aaa;
|
|
}
|
|
|
|
.user-field {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-field div {
|
|
width: initial;
|
|
}
|
|
|
|
.user-field div:not(:last-child) {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
@media only screen and (max-aspect-ratio: 16/9) {
|
|
.player-dimensions.vjs-fluid {
|
|
padding-top: 46.86% !important;
|
|
}
|
|
|
|
#player-container {
|
|
padding-bottom: 46.86% !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.navbar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.navbar > div {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.navbar > div:not(:last-child) {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.navbar > .searchbar > form {
|
|
width: 60%;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.25em;
|
|
margin: 0.42em 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
.navbar > .searchbar > form {
|
|
width: 100%;
|
|
margin: 0 1em;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Footer
|
|
*/
|
|
|
|
.footer {
|
|
color: #666666;
|
|
margin: 2em 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* keyframes */
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Control Bar */
|
|
@media screen and (max-width: 640px) {
|
|
.video-js .vjs-control-bar,
|
|
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
|
|
overflow-x: scroll;
|
|
}
|
|
}
|
|
|
|
ul.vjs-menu-content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.vjs-user-inactive {
|
|
cursor: none;
|
|
}
|
|
|
|
.video-js .vjs-text-track-display > div > div > div {
|
|
background-color: rgba(0, 0, 0, 0.75) !important;
|
|
border-radius: 9px !important;
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.vjs-play-control,
|
|
.vjs-volume-panel,
|
|
.vjs-current-time,
|
|
.vjs-time-control,
|
|
.vjs-duration,
|
|
.vjs-progress-control,
|
|
.vjs-remaining-time {
|
|
order: 1;
|
|
}
|
|
|
|
.vjs-captions-button {
|
|
order: 2;
|
|
}
|
|
|
|
.vjs-quality-selector,
|
|
.video-js .vjs-http-source-selector {
|
|
order: 3;
|
|
}
|
|
|
|
.vjs-playback-rate {
|
|
order: 4;
|
|
}
|
|
|
|
.vjs-share-control {
|
|
order: 5;
|
|
}
|
|
|
|
.vjs-fullscreen-control {
|
|
order: 6;
|
|
}
|
|
|
|
.vjs-playback-rate > .vjs-menu {
|
|
width: 50px;
|
|
}
|
|
|
|
.vjs-control-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.vjs-control-bar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.video-js .vjs-icon-cog {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.video-js .vjs-control-bar,
|
|
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
|
|
background-color: rgba(35, 35, 35, 0.75);
|
|
}
|
|
|
|
.vjs-menu li.vjs-menu-item:focus,
|
|
.vjs-menu li.vjs-menu-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.75);
|
|
color: rgba(49, 49, 51, 0.75);
|
|
}
|
|
|
|
.vjs-menu li.vjs-selected,
|
|
.vjs-menu li.vjs-selected:focus,
|
|
.vjs-menu li.vjs-selected:hover {
|
|
background-color: rgba(0, 182, 240, 0.75);
|
|
}
|
|
|
|
/* Progress Bar */
|
|
.video-js .vjs-slider {
|
|
background-color: rgba(15, 15, 15, 0.5);
|
|
}
|
|
|
|
fieldset > select,
|
|
span > select {
|
|
color: rgba(49, 49, 51, 1);
|
|
}
|
|
|
|
.video-js .vjs-load-progress,
|
|
.video-js .vjs-load-progress div {
|
|
background: rgba(87, 87, 88, 1);
|
|
}
|
|
|
|
.video-js .vjs-slider:hover,
|
|
.video-js button:hover {
|
|
color: rgba(0, 182, 240, 1);
|
|
}
|
|
|
|
.video-js .vjs-play-progress {
|
|
background-color: rgba(0, 182, 240, 1);
|
|
}
|
|
|
|
/* Overlay */
|
|
.video-js .vjs-overlay {
|
|
background-color: rgba(35, 35, 35, 0.75);
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
/* ProgressBar marker */
|
|
.vjs-marker {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Big "Play" Button */
|
|
.video-js .vjs-big-play-button {
|
|
background-color: rgba(35, 35, 35, 0.5);
|
|
}
|
|
|
|
.video-js:hover .vjs-big-play-button {
|
|
background-color: rgba(35, 35, 35, 0.75);
|
|
}
|
|
|
|
.video-js .vjs-current-time,
|
|
.video-js .vjs-time-divider,
|
|
.video-js .vjs-duration {
|
|
display: block;
|
|
}
|
|
|
|
.video-js .vjs-time-divider {
|
|
min-width: 0px;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.video-js .vjs-poster {
|
|
background-size: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.player-dimensions.vjs-fluid {
|
|
padding-top: 82vh;
|
|
}
|
|
|
|
video.video-js {
|
|
position: absolute;
|
|
height: 100%;
|
|
}
|
|
|
|
#player-container {
|
|
position: relative;
|
|
padding-bottom: 82vh;
|
|
height: 0;
|
|
}
|
|
|
|
.pure-control-group label {
|
|
word-wrap: normal;
|
|
}
|
|
|
|
.video-js.player-style-invidious {
|
|
/* This is already the default */
|
|
}
|
|
|
|
.video-js.player-style-youtube .vjs-control-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.video-js.player-style-youtube .vjs-big-play-button {
|
|
/*
|
|
Styles copied from video-js.min.css, definition of
|
|
.vjs-big-play-centered .vjs-big-play-button
|
|
*/
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -0.81666em;
|
|
margin-left: -1.5em;
|
|
}
|
|
|
|
/*
|
|
* Light theme
|
|
*/
|
|
|
|
.light-theme a:hover,
|
|
.light-theme a:active {
|
|
color: #167ac6 !important;
|
|
}
|
|
|
|
.light-theme a {
|
|
color: #61809b;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* All links that do not fit with the default color goes here */
|
|
.light-theme a:not([data-id]) > .icon,
|
|
.light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
|
|
.light-theme .playlist-restricted > ol > li > a {
|
|
color: #303030;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.no-theme a:hover,
|
|
.no-theme a:active {
|
|
color: #167ac6 !important;
|
|
}
|
|
|
|
.no-theme a {
|
|
color: #61809b;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* All links that do not fit with the default color goes here */
|
|
.no-theme a:not([data-id]) > .icon,
|
|
.no-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
|
|
.no-theme .playlist-restricted > ol > li > a {
|
|
color: #303030;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Dark theme
|
|
*/
|
|
|
|
.dark-theme a:hover,
|
|
.dark-theme a:active {
|
|
color: rgb(0, 182, 240);
|
|
}
|
|
|
|
.dark-theme a {
|
|
color: #a0a0a0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
body.dark-theme {
|
|
background-color: rgba(35, 35, 35, 1);
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.dark-theme .pure-form legend {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.dark-theme .pure-menu-heading {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.dark-theme input,
|
|
.dark-theme select,
|
|
.dark-theme textarea {
|
|
color: rgba(35, 35, 35, 1);
|
|
}
|
|
|
|
.dark-theme .pure-form input[type="file"] {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.dark-theme .navbar > .searchbar input {
|
|
background-color: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.no-theme a:hover,
|
|
.no-theme a:active {
|
|
color: rgb(0, 182, 240);
|
|
}
|
|
|
|
.no-theme a {
|
|
color: #a0a0a0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
body.no-theme {
|
|
background-color: rgba(35, 35, 35, 1);
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.no-theme .pure-form legend {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.no-theme .pure-menu-heading {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.no-theme input,
|
|
.no-theme select,
|
|
.no-theme textarea {
|
|
color: rgba(35, 35, 35, 1);
|
|
}
|
|
|
|
.no-theme .pure-form input[type="file"] {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.no-theme .navbar > .searchbar input {
|
|
background-color: inherit;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|