diff options
Diffstat (limited to 'assets/css/default.css')
| -rw-r--r-- | assets/css/default.css | 303 |
1 files changed, 110 insertions, 193 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index e403e606..ce6c30c9 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -5,6 +5,12 @@ body { Arial, sans-serif; } +#contents { + display: flex; + flex-direction: column; + min-height: 100vh; +} + .deleted { background-color: rgb(255, 0, 0, 0.5); } @@ -172,7 +178,7 @@ img.thumbnail { flex: 1; } -.navbar > .searchbar { +.searchbar { flex-grow: 2; /* take double the space of the other items */ } @@ -185,7 +191,7 @@ img.thumbnail { display: inline; } -.navbar > .searchbar .pure-form input[type="search"] { +.searchbar .pure-form input[type="search"] { margin-bottom: 1px; border-top: 0; @@ -210,12 +216,12 @@ input[type="search"]::-webkit-search-cancel-button { background-size: 14px; } -.navbar > .searchbar .pure-form fieldset { +.searchbar .pure-form fieldset { padding: 0; } /* attract focus to the searchbar by adding a subtle transition */ -.navbar > .searchbar .pure-form input[type="search"]:focus { +.searchbar .pure-form input[type="search"]:focus { margin-bottom: 0px; border-bottom: 2px solid #aaa; } @@ -276,18 +282,35 @@ input[type="search"]::-webkit-search-cancel-button { } } + +/* + * Video "cards" (results/playlist/channel videos) + */ + +.video-card-row { margin: 15px 0; } + +.flexible { display: flex; } +.flex-left { flex: 1 1 100%; flex-wrap: wrap; } +.flex-right { flex: 1 0 max-content; flex-wrap: nowrap; } + +p.channel-name { margin: 0; } +p.video-data { margin: 0; font-weight: bold; font-size: 80%; } + + /* * Footer */ -.footer { - color: #666666; - margin: 2em 0; +footer { + color: #919191; + margin-top: auto; + padding: 1.5em 0; text-align: center; + max-height: 30vh; } -body .footer a { - color: inherit; +footer a { + color: #919191 !important; text-decoration: underline; } @@ -302,200 +325,22 @@ body .footer a { } } -/* 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 { +.light-theme a:active, +.light-theme summary:hover { color: #075A9E !important; } @@ -521,7 +366,8 @@ video.video-js { @media (prefers-color-scheme: light) { .no-theme a:hover, - .no-theme a:active { + .no-theme a:active, + .no-theme summary:hover { color: #075A9E !important; } @@ -551,7 +397,8 @@ video.video-js { */ .dark-theme a:hover, -.dark-theme a:active { +.dark-theme a:active, +.dark-theme summary:hover { color: rgb(0, 182, 240); } @@ -583,7 +430,7 @@ body.dark-theme { color: #f0f0f0; } -.dark-theme .navbar > .searchbar input { +.dark-theme .searchbar input { background-color: inherit; color: inherit; } @@ -622,9 +469,79 @@ body.dark-theme { color: #f0f0f0; } - .no-theme .navbar > .searchbar input { + .no-theme .searchbar input { background-color: inherit; color: inherit; } } +#filters { + display: inline; + margin-top: 15px; +} + +#filters > div { + display: inline-block; +} + +#filters > summary { + display: block; + margin-bottom: 15px; +} + +#filters > summary::before { + content: "[ + ]"; + font-size: 1.5em; +} + +#filters[open] > summary::before { + content: "[ - ]"; + font-size: 1.5em; +} + +/*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 { + display: none +} + +#descexpansionbutton ~ div { + overflow: hidden; + height: 8.3em; +} + +#descexpansionbutton:checked ~ div { + overflow: unset; + height: 100%; +} + +#descexpansionbutton ~ label { + order: 1; + margin-top: 20px; +} + +/* Bidi (bidirectional text) support */ +h1, +h2, +h3, +h4, +h5, +p, +#descriptionWrapper, +#description-box { + unicode-bidi: plaintext; + text-align: start; +} + +#descriptionWrapper { + max-width: 600px; +} + +/* Center the "invidious" logo on the search page */ +#logo > h1 { text-align: center; } |