From e3bc10e54b3fcd07259f717724ba58a708678b98 Mon Sep 17 00:00:00 2001 From: "@CyberAndi" Date: Sun, 9 Apr 2023 00:41:59 +0200 Subject: [PATCH] Update default.css --- assets/css/default.css | 1282 +++++++++++++++++++++++++++++++--------- 1 file changed, 1009 insertions(+), 273 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index f8b1c9f7..6d88c328 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -1,101 +1,118 @@ +@font-face{font-family:"OCR-A";src:url("../fonts/OCRAStd.woff");} +@font-face{font-family:"ocr-a";src:url("../fonts/OCRAStd.woff");} + html, body { - font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, - Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, - Arial, sans-serif; + font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, + Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + background-color: #03060b; + background-image: linear-gradient(0deg, transparent, transparent, transparent, rgba(47,121,160,1)); + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + background-attachment: fixed; +} + +body * { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } #contents { - display: flex; - flex-direction: column; - min-height: 100vh; + display: flex; + flex-direction: column; + min-height: 100vh; } .deleted { - background-color: rgb(255, 0, 0, 0.5); + background-color: rgb(255, 0, 0, 0.5); } .underlined { - border-bottom: 1px solid; - margin-bottom: 20px; + border-bottom: 1px solid; + margin-bottom: 20px; } .channel-profile > * { - font-size: 1.17em; - font-weight: bold; - vertical-align: middle; - border-radius: 50%; + font-size: 1.17em; + font-weight: bold; + vertical-align: middle; + border-radius: 50% !important; } .channel-profile > img { - width: 48px; - height: auto; + width: 48px; + height: auto; } body a.channel-owner { - background-color: #008bec; - color: #fff; - border-radius: 9px; - padding: 1px 6px; + 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; + display: inline-block; + padding: 0px 7px 6px 0px; + margin: 0px -7px -4px 0px; } .creator-heart { - position: relative; - width: 16px; - height: 16px; - border: 2px none; + position: relative; + width: 16px; + height: 16px; + border: 2px none; } .creator-heart-background-hearted { - width: 16px; - height: 16px; - padding: 0px; - position: relative; + width: 16px; + height: 16px; + padding: 0px; + position: relative; } .creator-heart-small-hearted { - position: absolute; - right: -7px; - bottom: -4px; + position: absolute; + right: -7px; + bottom: -4px; } .creator-heart-small-container { - position: relative; - width: 13px; - height: 13px; - color: rgb(255, 0, 0); + position: relative; + width: 13px; + height: 13px; + color: rgb(255, 0, 0); } .feed-menu { - display: flex; - justify-content: center; - flex-wrap: wrap; + display: flex; + justify-content: center; + flex-wrap: wrap; } .feed-menu-item { - text-align: center; + text-align: center; } @media screen and (max-width: 640px) { - .feed-menu-item { - flex: 0 0 40%; - } + .feed-menu-item { + flex: 0 0 40%; + } } .h-box { - padding-left: 1em; - padding-right: 1em; + padding-left: 1em; + padding-right: 1em; } .v-box { - padding-top: 1em; - padding-bottom: 1em; + padding-top: 1em; + padding-bottom: 1em; } div { @@ -109,82 +126,82 @@ div { } .playlist-restricted { - height: 20em; - padding-right: 10px; + height: 20em; + padding-right: 10px; } body a.pure-button { - color: rgba(0,0,0,.8); + 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, body a.pure-button-primary, .channel-owner:hover { + background-color: #a0a0a0; + background-color: rgba(160,160,160,0.8); + color: rgba(35, 35, 35, 1); + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(230,230,230,0.5); } button.pure-button-primary:hover, body a.pure-button-primary:hover { - background-color: rgba(0, 182, 240, 1); - color: #fff; + background-color: rgba(0, 182, 240, 1); + color: #fff; } div.thumbnail { - padding: 28.125%; - position: relative; - box-sizing: border-box; + padding: 28.125%; + position: relative; + box-sizing: border-box; } img.thumbnail { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - object-fit: cover; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + object-fit: cover; } div.watched-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(255,255,255,.4); + 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; + position: absolute; + left: 0; + bottom: 0; + height: 4px; + width: 100%; + background-color: red; } .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; + 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; + 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; } /* @@ -192,42 +209,93 @@ div.watched-indicator { */ .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; + margin: 1em 0; + display: flex; + align-items: center; + justify-content: space-between; + background-image: linear-gradient(to right, rgba(17,17,17,.9), rgba(94,149,183,0.8)); + position: sticky; + top: 1em; + height: 3em; + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + border-radius: 0.5em; + border: 0.5px solid rgba(230,230,230,0.2); + backdrop-filter: blur(2.5px); + z-index: 150; } .navbar > div { - flex: 1; + flex: 1; +} + +a.index-link::before { + content: url("/CMovie.svg")"Mediathek"; + visibility: visible; + color: transparent; + display: inline-block; + align-self: center; + overflow-x: clip; + overflow-y: clip; + position: relative; + height: 2.5em; + top: 0.3em; + filter: drop-shadow(0.25em 0.25em 0.5em rgba(0,0,0,0.8)); + -webkit-filter: drop-shadow(0.25em 0.25em 0.5em rgba(0,0,0,0.8)); +} + +a.index-link { + visibility: hidden; + color: transparent; + text-shadow: none; +} + +a.index-link::after { + content: "Mediathek"; + display: inline-block; + font-family: "OCR-A"; + color: #f0f0f0; + visibility: visible; + position: relative; + left: -5em; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + top: -0.55em; +} + +img { + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + border-radius: 0.5em; + border: 0.5px solid rgba(230,230,230,0.2); } .searchbar { - flex-grow: 2; /* take double the space of the other items */ + flex-grow: 2; /* take double the space of the other items */ } .navbar a { - padding: 0; /* this way it will stay aligned with content under */ + padding: 0; /* this way it will stay aligned with content under */ } .navbar .index-link { - font-weight: bold; - display: inline; + font-weight: bold; + display: inline; } -.searchbar .pure-form fieldset { padding: 0; } +.searchbar .pure-form fieldset { + padding: 0; +} .searchbar input[type="search"] { width: 100%; margin: 1px; - - border: 1px solid; + border: 0.5px solid; border-color: rgba(0,0,0,0); - border-bottom-color: #CCC; + border-bottom-color: #f0f0f0; border-radius: 0; - box-shadow: none; + background: none; -webkit-appearance: none; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + color: #f0f0f0 !important; } .searchbar input[type="search"]:focus { @@ -237,69 +305,93 @@ div.watched-indicator { border-bottom-color: #FED; } +.searchbar::after { + content: url('/search.svg'); + position: relative; + top: -1.75em; + left: calc(100% - 1.25em); + margin: 0px; + padding: 0px; + color: #ffffff; + filter: drop-shadow(0.25em 0.25em 0.5em rgba(0,0,0,0.8)); + -webkit-filter: drop-shadow(0.25em 0.25em 0.5em rgba(0,0,0,0.8)); +} + +.searchbar { + height: 2.5em; + overflow-y: clip; +} + +#filters-box { + background: rgba(230,230,230,0.2); + border-radius: 0.5em; + backdrop-filter: blur(2.5px); + box-shadow: 0.25em 0.25em 0.75em rgba(0,0,0,0.8), 0em 0em 0.5em rgba(0,0,0,0.5); +} + /* 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; + -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; } .user-field { - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; } .user-field div { - width: auto; + width: auto; } .user-field div:not(:last-child) { - margin-right: 1em; + margin-right: 1em; } @media only screen and (max-aspect-ratio: 16/9) { - .player-dimensions.vjs-fluid { - padding-top: 46.86% !important; - } + .player-dimensions.vjs-fluid { + padding-top: 46.86% !important; + } - #player-container { - padding-bottom: 46.86% !important; - } + #player-container { + padding-bottom: 46.86% !important; + } } @media screen and (max-width: 767px) { - .navbar { - flex-direction: column; - } + .navbar { + flex-direction: column; + } - .navbar > div { - display: flex; - justify-content: center; - } + .navbar > div { + display: flex; + justify-content: center; + } - .navbar > div:not(:last-child) { - margin-bottom: 1em; - } + .navbar > div:not(:last-child) { + margin-bottom: 1em; + } - .navbar > .searchbar > form { - width: 60%; - } + .navbar > .searchbar > form { + width: 60%; + } - h1 { - font-size: 1.25em; - margin: 0.42em 0; - } + h1 { + font-size: 1.25em; + margin: 0.42em 0; + } } @media screen and (max-width: 320px) { - .navbar > .searchbar > form { - width: 100%; - margin: 0 1em; - } + .navbar > .searchbar > form { + width: 100%; + margin: 0 1em; + } } @@ -307,14 +399,33 @@ input[type="search"]::-webkit-search-cancel-button { * Video "cards" (results/playlist/channel videos) */ -.video-card-row { margin: 15px 0; } +.video-card-row { + margin: 15px 0; +} -.flexible { display: flex; } -.flex-left { flex: 1 1 100%; flex-wrap: wrap; } -.flex-right { flex: 1 0 auto; flex-wrap: nowrap; } +.flexible { + display: flex; +} -p.channel-name { margin: 0; } -p.video-data { margin: 0; font-weight: bold; font-size: 80%; } +.flex-left { + flex: 1 1 100%; + flex-wrap: wrap; +} + +.flex-right { + flex: 1 0 auto; + flex-wrap: nowrap; +} + +p.channel-name { + margin: 0; +} + +p.video-data { + margin: 0; + font-weight: bold; + font-size: 80%; + } /* @@ -322,99 +433,309 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; } */ footer { - color: #919191; - margin-top: auto; - padding: 1.5em 0; - text-align: center; - max-height: 30vh; + color: #919191; + margin-top: auto; + padding: 1.5em 0; + text-align: center; + max-height: 30vh; +} + +footer .pure-g { + display: none; } footer a { - color: #919191 !important; - text-decoration: underline; + color: #919191 !important; + text-decoration: underline; } footer span { - margin: 4px 0; - display: block; + margin: 4px 0; + display: block; } /* keyframes */ @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 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 */ +body.light-theme { + color: #000000; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(230,230,230,0.5); + background-color: #c0c0c0; +} + + .light-theme a:hover, .light-theme a:active, .light-theme summary:hover { - color: #075A9E !important; + } .light-theme a.pure-button-primary:hover { - color: #fff !important; + color: #fff !important; } .light-theme a { - color: #335d7a; - text-decoration: none; + 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; + color: inherit !important; } .light-theme .pure-menu-heading { - color: #565d64; + color: inherit !important; +} + +.light-theme button.pure-button-primary, +.light-theme body a.pure-button-primary, +.light-theme .channel-owner:hover { + background-color: #a0a0a0; + background-color: rgba(160,160,160,0.8); + color: rgba(35, 35, 35, 1); + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(230,230,230,0.5); +} + +.light-theme a[href*="/channel/"], +.light-theme [alt*="/channel/"], +.light-theme a > b, +.light-theme #player-container + .h-box > h1 { + font-family: "OCR-A"; + color: rgba(230,230,230,1) !important; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.75), 0 0 0.15em rgba(0,0,0,1) !important; +} + +.light-theme #filters-box { + background-color: rgba(56,56,56,0.2) !important; +} + +.light-theme input, +.light-theme select, +.light-theme textarea{ + color: #000000 !important; +} + +.light-theme :not(.navbar) a:not(#toggle_theme,[title*="Preferences"],.pure-menu-heading).pure-button { + background-color: rgba(56,56,56,0.2); + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(230,230,230,0.8); +} + +.light-theme a:not(.pure-button):is(:hover,:active,:focus) { + color: rgba(94,149,183,1) !important; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.15em rgba(230,230,230,0.8) !important; +} + +.light-theme :not(.navbar) a:not(#toggle_theme,[title*="Preferences"],.pure-menu-heading).pure-button { + border-radius: 0.3em; + border: solid 0.5px rgba(230,230,230,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.8); + padding: 0.5em 1em; + margin: 0.5em; +} + +.light-theme :not(.navbar) a:not(#toggle_theme,[title*="Preferences"],.pure-menu-heading).pure-button:is(:hover,:active,:focus) { + background-color: rgba(94,149,183,0.8) !important; + border-radius: 0.3em !important; +} + +.light-theme #descriptionWrapper:has(:not(*:empty)) { + padding: 0.5em; + background-color: rgba(56,56,56,0.2); + border-radius: 0.5em; + max-width: 80vw; + white-space: pre-wrap; +} + +.light-theme a[href*="page"], .light-theme a[href*="?continuation="] { + background-color: rgba(56,56,56,0.2); + padding: 2px 4px 3px; + border-radius: 3px; + border: solid 0.5px rgba(56,56,56,0.2); +} + +.light-theme button.pure-button-primary, +.light-theme body a.pure-button-primary, +.light-theme .channel-owner { + background-color: rgba(56,56,56,0.2); + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + padding: 0.5em 1em; + margin: 0.5em; + border: solid 0.5px rgba(230,230,230,0.5); + border-radius: 0.3em; +} + + +.light-theme button.pure-button-primary:is(:hover,:active,:focus,:focus-within), +.light-theme body a.pure-button-primary:is(:hover,:active,:focus,:focus-within), +.light-theme .channel-owner:is(:hover,:active,:focus,:focus-within) { + background-color: rgba(94,149,183,0.8) !important; + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + padding: 0.5em 1em; + margin: 0.5em; + border: solid 0.5px rgba(230,230,230,0.5); + border-radius: 0.3em; +} + +.light-theme .pure-u-1.pure-u-lg-1-5 .h-box { + background-color: rgba(56,56,56,0.2); + padding-top: 0.75em; + padding-bottom: 0.02em; + border-radius: 0.5em; + backdrop-filter: blur(2.5px); + margin-bottom: 0.75em; +} + +.light-theme a, .light-theme summary { + color: rgba(56,56,56,1) !important; + text-decoration: dotted; +} + +.light-theme a[href*="/channel/"], .light-theme [alt*="/channel/"] { + font-family: "OCR-A"; + color: rgba(230,230,230,1) !important; +} + +.light-theme #comments [style*="white-space:pre-wrap"] { + padding: 0.5em; + background-color: rgba(56,56,56,0.2); + border-radius: 0.5em; + max-width: 80vw; +} + +.light-theme select#download_widget{ + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.75), 0 0 0.15em rgba(0,0,0,1); +} + +.light-theme .channel-profile span { + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.8); } @media (prefers-color-scheme: light) { - .no-theme a:hover, - .no-theme a:active, - .no-theme summary:hover { - color: #075A9E !important; - } + .no-theme a:hover, + .no-theme a:active, + .no-theme summary:hover { + color: #f0f0f0 !important; + text-decoration: dotted; + } - .no-theme a.pure-button-primary:hover { - color: #fff !important; - } + .no-theme a.pure-button-primary { + color: #f0f0f0 !important; + text-decoration: none; + } - .no-theme a { - color: #335d7a; - text-decoration: none; - } + .no-theme a { + color: #f0f0f0; + 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; - } + /* 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: #f0f0f0; + } + + .light-theme .pure-menu-heading { + color: #565d64; + color: transparent; + } + + html, body { + background-color: #03060b; + } + + body.light-theme { + color: #000000; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(230,230,230,0.5); + background-color: #c0c0c0; + } + + .no-theme button.pure-button-primary, body a.pure-button-primary, .channel-owner:hover { + background-color: rgba(160,160,160,0.8); + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(230,230,230,0.5); + } + + .pure-u-1-3 a { + color: #f0f0f0 !important; + } + + .pure-u-1.pure-u-lg-1-5 .h-box { + background-color: rgba(230,230,230,0.2); + } + + .no-theme button.pure-button-primary, .no-theme body a.pure-button-primary, .no-theme .channel-owner { + background-color: rgba(230,230,230,0.2); + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + padding: 0.5em 1em; + margin: 0.5em; + border: solid 0.5px rgba(230,230,230,0.5); + border-radius: 0.3em; + } + + .no-theme button.pure-button-primary:is(:hover,:active,:focus,:focus-within), .no-theme body a.pure-button-primary:is(:hover,:active,:focus,:focus-within), .no-theme .channel-owner:is(:hover,:active,:focus,:focus-within) { + background-color: rgba(94,149,183,0.8) !important; + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + padding: 0.5em 1em; + margin: 0.5em; + border: solid 0.5px rgba(230,230,230,0.5); + border-radius: 0.3em; + } + + .no-theme #filters-box { + background-color: rgba(230,230,230,0.2) !important; + } + + .no-theme input, .no-theme select, no-theme textarea{ + color: #000000 !important; + } + + .no-them .light-theme #descriptionWrapper:has(:not(*:empty)) { + padding: 0.5em; + background-color: rgba(230,230,230,0.2); + border-radius: 0.5em; + max-width: 80vw; + white-space: pre-wrap; + } + + .no-theme a[href*="page"],a[href*="?continuation="] { + background-color: rgba(230,230,230,0.2); + padding: 2px 4px 3px; + border-radius: 3px; + border: solid 0.5px rgba(56,56,56,0.2); + } + + .no-theme .pure-u-1.pure-u-lg-1-5 .h-box { + background-color: rgba(230,230,230,0.2); + padding-top: 0.75em; + padding-bottom: 0.02em; + border-radius: 0.5em; + backdrop-filter: blur(2.5px); + margin-bottom: 0.75em; + } - .light-theme .pure-menu-heading { - color: #565d64; - } } /* @@ -424,113 +745,374 @@ span > select { .dark-theme a:hover, .dark-theme a:active, .dark-theme summary:hover { - color: rgb(0, 182, 240); + /*color: rgb(0, 182, 240);*/ + text-decoraton: dotted; } .dark-theme a { - color: #a0a0a0; - text-decoration: none; + color: #f0f0f0; + text-decoration: none; } body.dark-theme { - background-color: rgba(35, 35, 35, 1); - color: #f0f0f0; + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + background-color: #03060b; } .dark-theme .pure-form legend { - color: #f0f0f0; + color: #f0f0f0; } .dark-theme .pure-menu-heading { - color: #f0f0f0; + color: #f0f0f0; + color: transparent; } .dark-theme input, .dark-theme select, .dark-theme textarea { - color: rgba(35, 35, 35, 1); + color: rgba(56, 56, 56, 1); } .dark-theme .pure-form input[type="file"] { - color: #f0f0f0; + color: #f0f0f0; } .dark-theme .searchbar input { - background-color: inherit; - color: inherit; + background-color: inherit; + color: inherit; } +.dark-theme button.pure-button-primary, body a.pure-button-primary, .channel-owner:hover { + background-color: rgba(230,230,230,0.2); + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + padding: 0.5em 1em; + margin: 0.5em; + border: solid 0.5px rgba(230,230,230,0.5); + border-radius: 0.3em; +} + +.dark-theme #filters-box { + background-color: rgba(230,230,230,0.2) !important; +} + +.dark-theme input, .no-theme select, no-theme textarea{ + color: #000000 !important; +} + +.dark-them a:not(.pure-button):is(:hover,:active,:focus) { + color: rgba(94,149,183,1) !important; +} + +.dark-theme :not(.navbar) a:not(#toggle_theme,[title*="Preferences"],.pure-menu-heading).pure-button { + border-radius: 0.3em; + border: solid 0.5px rgba(230,230,230,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.8); + padding: 0.5em 1em; + margin: 0.5em; +} + +.dark-theme :not(.navbar) a:not(#toggle_theme,[title*="Preferences"],.pure-menu-heading).pure-button:is(:hover,:active,:focus) { + background-color: rgba(94,149,183,0.8) !important; + border-radius: 0.3em !important; +} + +.dark-theme a[href*="page"],a[href*="?continuation="] { + background-color: rgba(223,223,223,0.2); + padding: 2px 4px 3px; + border-radius: 3px; + border: solid 0.5px rgba(223,233,233,0.2); +} + +.dark-theme button.pure-button-primary, .dark-theme body a.pure-button-primary, .dark-theme .channel-owner { + background-color: rgba(230,230,230,0.2); + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + padding: 0.5em 1em; + margin: 0.5em; + border: solid 0.5px rgba(230,230,230,0.5); + border-radius: 0.3em; +} + +.dark-theme button.pure-button-primary:is(:hover,:active,:focus,:focus-within), .dark-theme body a.pure-button-primary:is(:hover,:active,:focus,:focus-within), .dark-theme .channel-owner:is(:hover,:active,:focus,:focus-within) { + background-color: rgba(94,149,183,0.8) !important; + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + padding: 0.5em 1em; + margin: 0.5em; + border: solid 0.5px rgba(230,230,230,0.5); + border-radius: 0.3em; +} + +.dark-theme .pure-u-1.pure-u-lg-1-5 .h-box { + background-color: rgba(223,223,223,0.2); + padding-top: 0.75em; + padding-bottom: 0.02em; + border-radius: 0.5em; + backdrop-filter: blur(2.5px); + margin-bottom: 0.75em; +} + + @media (prefers-color-scheme: dark) { - .no-theme a:hover, - .no-theme a:active { - color: rgb(0, 182, 240); - } + .no-theme a:hover, + .no-theme a:active { + color: #f0f0f0; + text-decoraton: dotted; + } - .no-theme a { - color: #a0a0a0; - text-decoration: none; - } + .no-theme a { + color: #f0f0f0; + text-decoration: none; + } - body.no-theme { - background-color: rgba(35, 35, 35, 1); - color: #f0f0f0; - } + body.no-theme { + color: #f0f0f0; + background-color: #03060b; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + } - .no-theme .pure-form legend { - color: #f0f0f0; - } + html, body { + background-color: #03060b; + } - .no-theme .pure-menu-heading { - color: #f0f0f0; - } + .no-theme .pure-form legend { + color: #f0f0f0; + } - .no-theme input, - .no-theme select, - .no-theme textarea { - color: rgba(35, 35, 35, 1); - } + .no-theme .pure-menu-heading { + color: #f0f0f0; + } - .no-theme .pure-form input[type="file"] { - color: #f0f0f0; - } + .no-theme input, + .no-theme select, + .no-theme textarea { + color: rgba(56, 56, 56, 1); + } + + .no-theme .pure-form input[type="file"] { + color: #f0f0f0; + } + + .no-theme .searchbar input { + background-color: inherit; + color: inherit; + } + + .pure-u-1-3 a { + color: #f0f0f0 !important; + } + + .no-theme button.pure-button-primary, .no-theme body a.pure-button-primary, .no-theme .channel-owner { + background-color: rgba(230,230,230,0.2); + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + padding: 0.5em 1em; + margin: 0.5em; + border: solid 0.5px rgba(230,230,230,0.5); + border-radius: 0.3em; + } + + .no-theme button.pure-button-primary:is(:hover,:active,:focus,:focus-within), .no-theme body a.pure-button-primary:is(:hover,:active,:focus,:focus-within), .no-theme .channel-owner:is(:hover,:active,:focus,:focus-within) { + background-color: rgba(94,149,183,0.8) !important; + color: #f0f0f0; + text-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + padding: 0.5em 1em; + margin: 0.5em; + border: solid 0.5px rgba(230,230,230,0.5); + border-radius: 0.3em; + } + + .no-theme #filters-box { + background-color: rgba(230,230,230,0.2) !important; + } + + .no-theme input, .no-theme select, no-theme textarea{ + color: #000000 !important; + } + + .no-theme #descriptionWrapper:has(:not(*:empty)) { + padding: 0.5em; + background-color: rgba(230,230,230,0.2); + border-radius: 0.5em; + max-width: 80vw; + white-space: pre-wrap; + } + + .no-theme a[href*="page"],a[href*="?continuation="] { + background-color: rgba(223,223,223,0.2); + padding: 2px 4px 3px; + border-radius: 3px; + border: solid 0.5px rgba(223,233,233,0.2); + } + + .no-theme .pure-u-1.pure-u-lg-1-5 .h-box { + background-color: rgba(223,223,223,0.2); + padding-top: 0.75em; + padding-bottom: 0.02em; + border-radius: 0.5em; + backdrop-filter: blur(2.5px); + margin-bottom: 0.75em; + } - .no-theme .searchbar input { - background-color: inherit; - color: inherit; - } } /*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; + margin: 10px 0 10px 0; + color: transparent; + visibility: hidden; +} + +.vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before { + content: url('/CMovie-Play.svg') !important; + display: inline-block !important; + height: 1.25em !important; + width: 1.25em !important; + top: .16em !important; + left: 0.5em !important; +} + +.video-js .vjs-play-control .vjs-icon-placeholder:before { + top: 0.15em !important; + left: 0.5em !important; +} + +.video-js .vjs-big-play-button .vjs-icon-placeholder:before { + top: 0.47em !important; + left: 0.5em !important; +} + +.video-js .vjs-big-play-button { + font-size: 3em; + line-height: 1.5em; + height: 2.5em; + width: 2.5em; + display: block; + position: absolute; + padding: 2vmin; + cursor: pointer; + border: 0.7vmin solid #f0f0f0; + background-color: rgba(94,149,183,0.8); + border-radius: 50%; + transition: all 0.4s; + aspect-ratio: 1/1; + top: calc(50%); + left: calc(50%); + transform: translateX(calc(-50%)) translateY(calc(-50%)); + text-decoration: none !important; + box-shadow: 0.23em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + backdrop-filter: blur(2.5px); +} + +.video-js .vjs-progress-control { + color: rgba(94,149,183,1) !important; +} + +.video-js.player-style-invidious .vjs-play-progress { + background-color: rgba(94,149,183,1) !important; +} + +.video-js .vjs-slider:hover, .video-js button:hover { + color: rgba(94,149,183,1) !important; +} + +.vjs-menu li.vjs-menu-item:focus, .vjs-menu li.vjs-menu-item:hover { + color: #f0f0f0 !important; + background-color: rgba(94,149,183,0.8) !important; +} + +.vjs-menu li.vjs-menu-item:focus, .vjs-menu li.vjs-menu-item:hover, .js-focus-visible .vjs-menu li.vjs-menu-item:hover { + background-color: rgba(94,149,183,0.8) !important; +} + +.vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover { + background-color: rgba(94,149,183,0.8) !important; + color: #f0f0f0 !important; +} + +.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar, .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-play-button { + visibility: visible !important; + opacity: 0 !important; + transition: visibility 1s, opacity 1s !important; +} + +.video-js .vjs-overlay-top { + left: unset !important; + margin-left: unset !important; + bottom: 5px !important; + top: unset !important; +} + +.video-js .vjs-overlay-background { + background-image: linear-gradient(to right, rgba(17,17,17,.9), rgba(94,149,183,1)) !important; + border-radius: 0px !important; + padding: 10px !important; + padding-left: 17.5% !important; + width: 100% !important; + height: calc(5em + 6px); +} + +.video-js .vjs-overlay h1 { + color: rgba(255, 255, 255, 1) !important; + left: -20% !important; + position: relative !important; + width: 100% !important; + margin: 0; + padding: 0.5em; +} + +.video-js .vjs-overlay::after { + content: url('/CMovie-Logo.png') !important; + display: block !important; + height: 166px; + box-sizing: border-box !important; + transform: scale(.75); + aspect-ratio: 16/9 !important; + border: solid 4px #f0f0f0 !important; + left: -24.5% !important; + top: calc(-166px + 3em) !important; + position: relative !important; + text-align: left !important; + overflow: hidden; } /* Description Expansion Styling*/ #descexpansionbutton, #music-desc-expansion { - display: none; + display: none; } #descexpansionbutton ~ div { - overflow: hidden; - max-height: 8.3em; + overflow: hidden; +} + +#descexpansionbutton:not(:checked) ~ div { + max-height: 8.3em; } #descexpansionbutton:checked ~ div { - overflow: unset; - height: 100%; + overflow: unset; + height: 100%; } #descexpansionbutton ~ label { - order: 1; - margin-top: 20px; + order: 1; + margin-top: 20px; } label[for="descexpansionbutton"]:hover, label[for="music-desc-expansion"]:hover { - cursor: pointer; + cursor: pointer; } /* Bidi (bidirectional text) support */ @@ -543,47 +1125,201 @@ p, #descriptionWrapper, #description-box, #music-description-box { - unicode-bidi: plaintext; - text-align: start; + unicode-bidi: plaintext; + text-align: start; } -#descriptionWrapper { - max-width: 600px; - white-space: pre-wrap; +h1, +h2, +h3, +h4, +h5 { + font-family: "OCR-A"; +} + +.channel-emoji { + margin: 0 2px; +} + +.channel-profile { + font-family: "OCR-A"; +} + +a[href*="/channel/"], [alt*="/channel/"] { + font-family: "OCR-A"; + color: #f0f0f0 !important; +} + +a[href*="page"],a[href*="?continuation="] { + background-color: rgba(223,223,223,0.2); + padding: 2px 4px 3px; + border-radius: 3px; + border: solid 0.5px rgba(223,233,233,0.2); +} + +.pure-u-1.pure-u-lg-1-5 .h-box { + background-color: rgba(223,223,223,0.2); + padding-top: 0.75em; + padding-bottom: 0.02em; + border-radius: 0.5em; + backdrop-filter: blur(2.5px); + margin-bottom: 0.75em; +} + +#player-container { + position: relative; + padding-left: 0; + padding-right: 0; + margin-left: 1em; + margin-right: 1em; + padding-bottom: 82vh; + height: 0; + border-radius: 0.5em; + overflow: hidden; + border: solid 0.5px rgba(230,230,230,0.2); + background-image: radial-gradient( rgba(47,121,160,1),#03060b) !important; + box-shadow: 0.23em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.5); + aspect-ratio: 16/9 !important; +} + +#player-container video { + background-color: unset !important; + background-image: url('/CMovie.svg'),radial-gradient( rgba(47,121,160,1),#03060b) !important; + background-repeat: no-repeat !important; + background-size: 75%, auto; + background-position-x: center, 0px; + background-position-y: center, 0px; +} + +fieldset > select, +span > select { + color: rgba(49, 49, 51, 1); +} + +.pure-control-group label { + word-wrap: normal; +} + +.pure-u-1.pure-md-1-3 { + font-family: "OCR-A"; +} + +.feed-menu { + display: flex; + justify-content: center; + flex-wrap: wrap; + display: none; +} + +.pure-form .pure-help-inline, .pure-form-message-inline { + display: inline-block; + padding-left: .3em; + color: inherit !important; + vertical-align: middle; + font-size: .875em; +} + +.pure-form legend { + display: block; + width: 100%; + padding: .3em 0; + margin-bottom: .3em; + color: inherit !important; + border-bottom: 1px solid #e5e5e5; +} + +.pure-u-1.pure-u-md-8-24.user-field { + height: 100%; + margin: 0; +} + +.navbar > div { + flex: 1; + margin: 0; + padding: 0; + height: 100%; +} + +#logo > h1 { + color: transparent; + visibility: collapse; +} + +#descriptionWrapper:has(:not(*:empty)) { + padding: 0.5em; + background-color: rgba(230,230,230,0.2); + border-radius: 0.5em; + max-width: 80vw; + white-space: pre-wrap; +} + + +#comments [style*="white-space:pre-wrap"] { + padding: 0.5em; + background-color: rgba(230,230,230,0.2); + border-radius: 0.5em; + max-width: 80vw; +} + +a:not(.pure-button):is(:hover,:active,:focus) { + color: rgba(94,149,183,1) !important; +} + +:not(.navbar) a:not(#toggle_theme,[title*="Preferences"],.pure-menu-heading).pure-button { + border-radius: 0.3em; + border: solid 0.5px rgba(230,230,230,0.5); + box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.8), 0 0 0.5em rgba(0,0,0,0.8); + padding: 0.5em 1em; + margin: 0.5em; +} + +:not(.navbar) a:not(#toggle_theme,[title*="Preferences"],.pure-menu-heading).pure-button:is(:hover,:active,:focus) { + background-color: rgba(94,149,183,0.8) !important; + border-radius: 0.3em !important; +} + +.navbar a { + border: unset !important; + background: unset !important; + box-shadow: unset !important; } #music-description-box { - display: none; + display: none; } #music-desc-expansion:checked ~ #music-description-box { - display: block; + display: block; } #music-desc-expansion ~ label > h3 > .ion-ios-arrow-up, #music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-down { - display: none; + display: none; } #music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-up, #music-desc-expansion ~ label > h3 > .ion-ios-arrow-down { - display: inline; + display: inline; } /* Select all the music items except the first one */ .music-item + .music-item { - border-top: 1px solid #ffffff; + border-top: 1px solid #ffffff; } /* Center the "invidious" logo on the search page */ -#logo > h1 { text-align: center; } +#logo > h1 { + text-align: center; +} /* IE11 fixes */ -:-ms-input-placeholder { color: #888; } +:-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; +.pure-form-aligned .pure-control-group label { + width: 19em; } + +