diff --git a/assets/css/default.css b/assets/css/default.css index a049aff..3a857cc 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -1,3 +1,845 @@ +/* + * Common attributes + */ + +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; + margin: auto; +} + +.h-box { + padding-left: 1em; + padding-right: 1em; +} + +.v-box { + padding-top: 1em; + padding-bottom: 1em; +} + +.deleted { + background-color: rgb(255, 0, 0, 0.5); +} + +.underlined { + border-bottom: 1px solid; + margin-bottom: 20px; +} + +.title { + margin: 0.5em 0 1em 0; +} + +/* A flex container */ +.flexible { + display: flex; + align-items: center; +} + +.flex-left { + display: flex; + flex: 1 1 auto; + flex-flow: row wrap; + justify-content: flex-start; +} +.flex-right { + display: flex; + flex: 2 0 auto; + flex-flow: row nowrap; + justify-content: flex-end; +} + + +/* + * Channel page + */ + +.channel-profile > * { + font-size: 1.17em; + font-weight: bold; + vertical-align: middle; + border-radius: 50%; +} + +.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 { + display: inline-block; + 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 { + display: block; + 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%; + } +} + +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; +} + + +/* + * Buttons + */ + +body a.pure-button { + color: rgba(0,0,0,.8); +} + +button.pure-button-primary, +body a.pure-button-primary, +.channel-owner:hover, +.channel-owner:focus { + background-color: #a0a0a0; + color: rgba(35, 35, 35, 1); +} + +.pure-button-primary, +.pure-button-secondary { + border: 1px solid #a0a0a0; + border-radius: 3px; + margin: 0 .4em; +} + +.pure-button-secondary.low-profile { + padding: 5px 10px; + margin: 0; +} + +/* Has to be combined with flex-left/right */ +.button-container { + flex-flow: wrap; + gap: 0.5em 0.75em; +} + + +/* + * Video thumbnails + */ + +div.thumbnail { + position: relative; + width: 100%; + box-sizing: border-box; +} + +img.thumbnail { + display: block; /* See: https://stackoverflow.com/a/11635197 */ + width: 100%; + object-fit: cover; + aspect-ratio: 16 / 9; +} + +.thumbnail-placeholder { + min-height: 50px; + border: 2px dotted; +} + +div.watched-overlay { + z-index: 50; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(255,255,255,.4); +} + +div.watched-indicator { + position: absolute; + left: 0; + bottom: 0; + height: 4px; + width: 100%; + background-color: red; +} + +div.thumbnail > .top-left-overlay, +div.thumbnail > .bottom-right-overlay { + z-index: 100; + position: absolute; + padding: 0; + margin: 0; + font-size: 16px; +} + +.top-left-overlay { top: 0.6em; left: 0.6em; } +.bottom-right-overlay { bottom: 0.6em; right: 0.6em; } + +.length { + padding: 1px; + margin: -2px 0; + color: #fff; + border-radius: 3px; +} + +.length, .top-left-overlay button { + color: #eee; + background-color: rgba(35, 35, 35, 0.85) !important; +} + + +/* + * 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!important; /* 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 { + display: flex; +} + +.searchbar .pure-form fieldset { + padding: 0; + flex: 1; +} + +.searchbar input[type="search"] { + width: 100%; + margin: 1px; + + border: 1px solid; + border-color: rgba(0,0,0,0); + border-bottom-color: #CCC; + border-radius: 0; + + box-shadow: none; + appearance: none; + -webkit-appearance: none; +} + +.searchbar input[type="search"]:focus { + margin: 0; + border: 2px solid; + border-color: rgba(0,0,0,0); + border-bottom-color: #FED; +} + +/* 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; +} + +.dark-theme .searchbar #searchbutton { + border: 1px solid #4C566A !important; + background: #3B4252; + margin-top: 0; + padding: 0 10px; + font-size: 1.5em; + font-weight:bold; + border-radius: 0px 10px 10px 0px; + box-shadow: rgba(0, 0, 0, 0.35) 1px 1px 1px; +} + +.dark-theme .searchbar #searchbutton:hover { + color: rgb(0, 182, 240); +} + +.light-theme .searchbar #searchbutton { + border: 1px solid #ECEFF4 !important; + background: #D8DEE9; + margin-top: 0; + padding: 0 10px; + font-size: 1.5em; + font-weight:bold; + border-radius: 0px 10px 10px 0px; + box-shadow: rgba(0, 0, 0, 0.35) 1px 1px 1px; +} + +.light-theme .searchbar #searchbutton:hover { + color: rgb(0, 182, 240); +} + + +.user-field { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; +} + +.user-field div { + width: auto; +} + +.user-field div:not(:last-child) { + margin-right: 1em; +} + + +/* + * Responsive rules + */ + +@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; + margin-bottom: 25px; + } + + .navbar > .searchbar > form { + width: 75%; + } + + h1 { + font-size: 1.25em; + margin: 0.42em 0; + } + + /* Space out the subscribe & RSS buttons and align them to the left */ + .title.flexible { display: block; } + .title.flexible > .flex-right { margin: 0.75em 0; justify-content: flex-start; } + + /* Space out buttons to make them easier to tap */ + .user-field { font-size: 125%; } + .user-field > :not(:last-child) { margin-right: 1.75em; } + + .icon-buttons { font-size: 125%; } + .icon-buttons > :not(:last-child) { margin-right: 0.75em; } +} + +@media screen and (max-width: 320px) { + .navbar > .searchbar > form { + width: 100%; + margin: 0 1em; + } +} + + +/* + * Video "cards" (results/playlist/channel videos) + */ + +.video-card-row { margin: 15px 0; } + +p.channel-name { margin: 0; } +p.video-data { margin: 0; font-weight: bold; font-size: 80%; } + + +/* + * Comments & community posts + */ + +.comments { + max-width: 800px; + margin: auto; +} + +/* + * We don't want the top and bottom margin on the post page. + */ +.comments.post-comments { + margin-bottom: 0; + margin-top: 0; +} + +.video-iframe-wrapper { + position: relative; + height: 0; + padding-bottom: 56.25%; +} + +.video-iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} + + +/* + * Page navigation + */ + +.page-nav-container { margin: 15px 0 30px 0; } + +.page-prev-container { text-align: start; } +.page-next-container { text-align: end; } + +.page-prev-container, +.page-next-container { + display: inline-block; +} + + +/* + * Footer + */ + +footer { + margin-top: auto; + padding: 1.5em 0; + text-align: center; + max-height: 30vh; +} + +.light-theme footer { + color: #7c7c7c; +} + +.dark-theme footer { + color: #adadad; +} + +.light-theme footer a { + color: #7c7c7c !important; +} + +.dark-theme footer a { + color: #adadad !important; +} + +footer span { + margin: 4px 0; + display: block; +} + +/* 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 summary:hover, +.light-theme a:focus, +.light-theme summary:focus { + color: #075A9E !important; +} + +.light-theme .pure-button-primary:hover, +.light-theme .pure-button-primary:focus, +.light-theme .pure-button-secondary:hover, +.light-theme .pure-button-secondary:focus { + color: #fff !important; + border-color: rgba(0, 182, 240, 0.75) !important; + background-color: rgba(0, 182, 240, 0.75) !important; +} + +.light-theme .pure-button-secondary:not(.low-profile) { + color: #335d7a; + background-color: #fff2; +} + +.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; +} + +@media (prefers-color-scheme: light) { + .no-theme a:hover, + .no-theme a:active, + .no-theme summary:hover, + .no-theme a:focus, + .no-theme summary:focus { + color: #075A9E !important; + } + + .no-theme .pure-button-primary:hover, + .no-theme .pure-button-primary:focus, + .no-theme .pure-button-secondary:hover, + .no-theme .pure-button-secondary:focus { + color: #fff !important; + border-color: rgba(0, 182, 240, 0.75) !important; + background-color: rgba(0, 182, 240, 0.75) !important; + } + + .no-theme .pure-button-secondary:not(.low-profile) { + color: #335d7a; + background-color: #fff2; + } + + .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 footer { + color: #7c7c7c; + } + + .no-theme footer a { + color: #7c7c7c !important; + } + + .light-theme .pure-menu-heading { + color: #565d64; + } +} + + +/* + * Dark theme + */ + +.dark-theme a:hover, +.dark-theme a:active, +.dark-theme summary:hover, +.dark-theme a:focus, +.dark-theme summary:focus { + color: rgb(0, 182, 240); +} + +.dark-theme .pure-button-primary:hover, +.dark-theme .pure-button-primary:focus, +.dark-theme .pure-button-secondary:hover, +.dark-theme .pure-button-secondary:focus { + color: #fff !important; + border-color: rgb(0, 182, 240) !important; + background-color: rgba(0, 182, 240, 1) !important; +} + +.dark-theme .pure-button-secondary { + background-color: #0002; + color: #ddd; +} + +.dark-theme a { + color: #adadad; + 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 .searchbar input { + background-color: inherit; + color: inherit; +} + +@media (prefers-color-scheme: dark) { + .no-theme a:hover, + .no-theme a:active, + .no-theme a:focus { + color: rgb(0, 182, 240); + } + + .no-theme .pure-button-primary:hover, + .no-theme .pure-button-primary:focus, + .no-theme .pure-button-secondary:hover, + .no-theme .pure-button-secondary:focus { + color: #fff !important; + border-color: rgb(0, 182, 240) !important; + background-color: rgba(0, 182, 240, 1) !important; + } + + .no-theme .pure-button-secondary { + background-color: #0002; + color: #ddd; + } + + .no-theme a { + color: #adadad; + 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 { + color: #adadad; + } + + .no-theme footer a { + color: #adadad !important; + } +} + + +/* + * Miscellanous + */ + + +/*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*/ +#descexpansionbutton, +#music-desc-expansion { + display: none; +} + +#descexpansionbutton ~ div { + overflow: hidden; +} + +#descexpansionbutton:not(:checked) ~ div { + max-height: 8.3em; +} + +#descexpansionbutton:checked ~ div { + overflow: unset; + height: 100%; +} + +#descexpansionbutton ~ label { + order: 1; + margin-top: 20px; +} + +label[for="descexpansionbutton"]:hover, +label[for="music-desc-expansion"]:hover { + cursor: pointer; +} + +/* Bidi (bidirectional text) support */ +h1, h2, h3, h4, h5, p, +#descriptionWrapper, +#description-box, +#music-description-box { + unicode-bidi: plaintext; + text-align: start; +} + +#descriptionWrapper { + max-width: 600px; + white-space: pre-wrap; +} + +#music-description-box { + display: none; +} + +#music-desc-expansion:checked ~ #music-description-box { + display: block; +} + +#music-desc-expansion ~ label > h3 > .ion-ios-arrow-up, +#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-down { + display: none; +} + +#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-up, +#music-desc-expansion ~ label > h3 > .ion-ios-arrow-down { + display: inline; +} + +/* Select all the music items except the first one */ +.music-item + .music-item { + border-top: 1px solid #ffffff; +} + +/* Center the "invidious" logo on the search page */ +#logo > h1 { text-align: center; } + +/* IE11 fixes */ +:-ms-input-placeholder { color: #888; } + +/* Wider settings name to less word wrap */ +.pure-form-aligned .pure-control-group label { width: 19em; } + +.channel-emoji { + margin: 0 2px; +} + +#download_widget { + width: 100%; +} + + +/* CUSTOM THEME */ :root { --Color1: #BF616A; --Color1Hover: rgba(191, 97, 106, 0.9); @@ -769,12 +1611,12 @@ input[type="range"]::-webkit-slider-runnable-track { .pure-u-md-4-24, .pure-u-md-20-24, .pure-u-md-12-24 { - width: 0% !important; + width: 50% !important; } } .pure-u-1.pure-u-md-2-24 { - width: 0%; + width: 50%; } #comments { @@ -808,14 +1650,24 @@ div.watched-indicator { } /* Home Screen: Searchbox */ +#logo > h1 { + margin-bottom:1em; +} + #search-widget h1 { color: var(--Color1); } +#search-widget #searchbox { + max-width:100%; +} + #searchbox { border: transparent; box-shadow: rgba(0, 0, 0, 0.35) 1px 1px 1px; - font-size:1.25em; + font-size:1.125em; + text-align: center; + border-radius: 10px 0px 0px 10px; } /* Home Screen: Watched */ @@ -875,7 +1727,7 @@ i.icon.ion-md-jet:hover { /* Searchbox */ .pure-form input[type="search"] { - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); border-radius: 5px 5px 5px; margin: 0px; } @@ -1011,8 +1863,8 @@ i.icon.ion-md-jet:hover { @media screen and (max-width: 170em) { #player-container { margin-bottom: 6%; - margin-left: -3.2%; - margin-right: -3.2%; + margin-left: 0; + margin-right: 0; } } @@ -1166,13 +2018,18 @@ hr { /* Shadow */ .pure-g:not(.h-box) > .pure-u-md-1-4 .h-box:hover { - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); } #player-container { - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); } .pure-u-md-20-24 > .h-box > img { - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); +} + +/* Temporarly hide the donation link */ +a.pure-menu-heading.feed-menu-item:nth-of-type(1) { + display:none; }