mirror of
https://github.com/iv-org/invidious.git
synced 2024-12-27 10:30:18 +05:30
1b569bbc99
This commit adds support for channel home pages and all of the categories within it. However, the frontend code is a mess and thus needs to be refactor soon. Though that would likely require a rework of items.ecr This commit also comes with some general cleanups and improvements. Before this commit channel brand URls would only be supported on the videos page (now home page). It has been improved to be able to handle all channel URLs. The category_type and auxiliary_data property has also been removed from the Category struct. The former was never used and the latter allows for random data to be added to the Struct presenting documentation issues. Since the auxiliary_data variable was mainly used to store values from the browse_endpoint in order to create URLs, its much simpler to instead just get the URL from the webCommandMetadata. As a result of this change the browse_endpoint_data attribute of Category has also been removed.
625 lines
10 KiB
CSS
625 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;
|
|
}
|
|
|
|
#contents {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
body a.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;
|
|
}
|
|
|
|
body a.pure-button {
|
|
color: rgba(0,0,0,.8);
|
|
}
|
|
|
|
button.pure-button-primary,
|
|
body a.pure-button-primary,
|
|
.channel-owner:hover {
|
|
background-color: #a0a0a0;
|
|
color: rgba(35, 35, 35, 1);
|
|
}
|
|
|
|
button.pure-button-primary:hover,
|
|
body 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;
|
|
}
|
|
|
|
.search-button {
|
|
border: none;
|
|
color: #3E4446;
|
|
background: transparent;
|
|
font-size: 1.1em;
|
|
|
|
|
|
}
|
|
|
|
.search-button:hover {
|
|
color: #090909;
|
|
}
|
|
|
|
#right-overlap-search-button {
|
|
float: right;
|
|
position: relative;
|
|
bottom: 1.8em;
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.searchbar .pure-form input[type="search"] {
|
|
margin-bottom: 1px;
|
|
|
|
border-top: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-bottom: 1px solid #3E4446;
|
|
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;
|
|
}
|
|
|
|
.searchbar .pure-form fieldset {
|
|
padding: 0;
|
|
}
|
|
|
|
/* attract focus to the searchbar by adding a subtle transition */
|
|
.searchbar .pure-form input[type="search"]:focus {
|
|
margin-bottom: 0px;
|
|
border-bottom: 2px solid #3E4446;
|
|
}
|
|
|
|
.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: #919191;
|
|
margin-top: 2.5em;
|
|
padding: 1.5em 0;
|
|
}
|
|
|
|
.footer-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
footer .footer-content a {
|
|
color: #919191;
|
|
}
|
|
|
|
.footer-content #about-invidious-description > b {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.footer-section {
|
|
margin-right: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.footer-section-list {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.footer-section-item {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
@media screen and (max-width: 929px) {
|
|
#about-invidious-description {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* keyframes */
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
fieldset > select,
|
|
span > select {
|
|
color: rgba(49, 49, 51, 1);
|
|
}
|
|
|
|
.pure-control-group label {
|
|
word-wrap: normal;
|
|
}
|
|
|
|
/*
|
|
* Light theme
|
|
*/
|
|
|
|
.light-theme a:hover,
|
|
.light-theme a:active,
|
|
.light-theme .simulated_a:hover {
|
|
color: #075A9E !important;
|
|
}
|
|
|
|
.light-theme a.pure-button-primary:hover {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.light-theme a {
|
|
color: #335d7a;
|
|
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;
|
|
}
|
|
|
|
.light-theme .pure-menu-heading {
|
|
color: #565d64;
|
|
}
|
|
|
|
.light-theme footer {
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
.light-theme footer #about-invidious-description > b {
|
|
color: #7a7a7a;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.no-theme a:hover,
|
|
.no-theme a:active,
|
|
.no-theme .simulated_a:hover {
|
|
color: #075A9E !important;
|
|
}
|
|
|
|
.no-theme a.pure-button-primary:hover {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.no-theme a {
|
|
color: #335d7a;
|
|
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;
|
|
}
|
|
|
|
.no-theme .pure-menu-heading {
|
|
color: #565d64;
|
|
}
|
|
|
|
.no-theme footer {
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
.no-theme footer #about-invidious-description > b {
|
|
color: #7a7a7a;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Dark theme
|
|
*/
|
|
|
|
.dark-theme a:hover,
|
|
.dark-theme a:active,
|
|
.dark-theme .simulated_a:hover {
|
|
color: rgb(0, 182, 240) !important;
|
|
}
|
|
|
|
.dark-theme a {
|
|
color: #A8A095;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dark-theme footer {
|
|
background: #16191a;
|
|
}
|
|
|
|
.dark-theme .footer-content #about-invidious-description > b {
|
|
color: #e5e5e5;
|
|
}
|
|
|
|
body.dark-theme {
|
|
background-color: rgba(26, 29, 30, 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 .searchbar input {
|
|
background-color: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.dark-theme .search-button {
|
|
color: #B0ADA4;
|
|
}
|
|
|
|
.dark-theme .search-button:hover {
|
|
color: #CFCBC1;
|
|
}
|
|
|
|
.dark-theme .pure-menu-link:hover, .dark-theme .pure-menu-link:active, .dark-theme .pure-menu-link:focus {
|
|
background-color: rgb(34, 36, 38)
|
|
}
|
|
|
|
.dark-theme .pure-menu-selected > .pure-menu-link {
|
|
color: #EAE7E1;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.no-theme a:hover,
|
|
.no-theme a:active,
|
|
.no-theme .simulated_a:hover {
|
|
color: rgb(0, 182, 240) !important;
|
|
}
|
|
|
|
.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 .searchbar input {
|
|
background-color: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.no-theme footer {
|
|
background: #16191a;
|
|
}
|
|
|
|
.no-theme footer #about-invidious-description > b {
|
|
color: #e5e5e5;
|
|
}
|
|
}
|
|
|
|
/*With commit d9528f5 all contents of the page is now within a flexbox. However,
|
|
the hr element is rendered improperly within one.
|
|
See https://stackoverflow.com/a/34372979 for more info */
|
|
hr {
|
|
margin: 10px 0 10px 0;
|
|
}
|
|
|
|
/* Description Expansion Styling*/
|
|
#description-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#descexpansionbutton {
|
|
display: none
|
|
}
|
|
|
|
#descexpansionbutton ~ div {
|
|
overflow: hidden;
|
|
height: 8.3em;
|
|
}
|
|
|
|
#descexpansionbutton:checked ~ div {
|
|
overflow: unset;
|
|
height: 100%;
|
|
}
|
|
|
|
#descexpansionbutton + label {
|
|
order: 1;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#content-navigation {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
#footer_buffer {
|
|
margin-top: 50vh;
|
|
}
|
|
|
|
@media screen and (max-width: 450px) {
|
|
#footer_buffer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.category {
|
|
margin-bottom: 2em;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.category .heading > p {
|
|
display: inline-block;
|
|
}
|
|
|
|
.category .badge.featured {
|
|
background: #005aa7;
|
|
color: white;
|
|
padding: 3px 4px 1px 4px;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* Temp */
|
|
.category-description {
|
|
color: #A8A095;
|
|
} |