diff options
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/carousel.css | 119 | ||||
| -rw-r--r-- | assets/css/default.css | 73 | ||||
| -rw-r--r-- | assets/css/player.css | 1 |
3 files changed, 185 insertions, 8 deletions
diff --git a/assets/css/carousel.css b/assets/css/carousel.css new file mode 100644 index 00000000..4bae92e5 --- /dev/null +++ b/assets/css/carousel.css @@ -0,0 +1,119 @@ +/* +Copyright (c) 2024 by Jennifer (https://codepen.io/jwjertzoch/pen/JjyGeRy) + +Permission is hereby granted, free of charge, to any person +obtaining a copy of this software and associated documentation +files (the "Software"), to deal in the Software without restriction, + including without limitation the rights to use, copy, modify, +merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall +be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER +DEALINGS IN THE SOFTWARE. +*/ + +.carousel { + margin: 0 auto; + overflow: hidden; + text-align: center; +} + +.slides { + width: 100%; + display: flex; + overflow-x: scroll; + scrollbar-width: none; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; +} + +.slides::-webkit-scrollbar { + display: none; +} + +.slides-item { + align-items: center; + border-radius: 10px; + display: flex; + flex-shrink: 0; + font-size: 100px; + height: 600px; + justify-content: center; + margin: 0 1rem; + position: relative; + scroll-snap-align: start; + transform: scale(1); + transform-origin: center center; + transition: transform .5s; + width: 100%; +} + +.carousel__nav { + padding: 1.25rem .5rem; +} + +.slider-nav { + align-items: center; + background-color: #ddd; + border-radius: 50%; + color: #000; + display: inline-flex; + height: 1.5rem; + justify-content: center; + padding: .5rem; + position: relative; + text-decoration: none; + width: 1.5rem; +} + +.skip-link { + height: 1px; + overflow: hidden; + position: absolute; + top: auto; + width: 1px; +} + +.skip-link:focus { + align-items: center; + background-color: #000; + color: #fff; + display: flex; + font-size: 30px; + height: 30px; + justify-content: center; + opacity: .8; + text-decoration: none; + width: 50%; + z-index: 1; +} + +.light-theme .slider-nav { + background-color: #ddd; +} + +.dark-theme .slider-nav { + background-color: #0005; +} + +@media (prefers-color-scheme: light) { + .no-theme .slider-nav { + background-color: #ddd; + } +} + +@media (prefers-color-scheme: dark) { + .no-theme .slider-nav { + background-color: #0005; + } +} diff --git a/assets/css/default.css b/assets/css/default.css index c31b24e5..2cedcf0c 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -13,6 +13,7 @@ body { display: flex; flex-direction: column; min-height: 100vh; + margin: auto; } .h-box { @@ -197,6 +198,7 @@ img.thumbnail { display: block; /* See: https://stackoverflow.com/a/11635197 */ width: 100%; object-fit: cover; + aspect-ratio: 16 / 9; } .thumbnail-placeholder { @@ -276,7 +278,14 @@ div.thumbnail > .bottom-right-overlay { display: inline; } -.searchbar .pure-form fieldset { padding: 0; } +.searchbar .pure-form { + display: flex; +} + +.searchbar .pure-form fieldset { + padding: 0; + flex: 1; +} .searchbar input[type="search"] { width: 100%; @@ -308,6 +317,16 @@ input[type="search"]::-webkit-search-cancel-button { background-size: 14px; } +.searchbar #searchbutton { + border: none; + background: none; + margin-top: 0; +} + +.searchbar #searchbutton:hover { + color: rgb(0, 182, 240); +} + .user-field { display: flex; flex-direction: row; @@ -392,11 +411,19 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; } * Comments & community posts */ -#comments { +.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; @@ -433,16 +460,26 @@ 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; } -footer a { - color: #919191 !important; - text-decoration: underline; +.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 { @@ -548,6 +585,14 @@ span > select { color: #303030; } + .no-theme footer { + color: #7c7c7c; + } + + .no-theme footer a { + color: #7c7c7c !important; + } + .light-theme .pure-menu-heading { color: #565d64; } @@ -581,7 +626,7 @@ span > select { } .dark-theme a { - color: #a0a0a0; + color: #adadad; text-decoration: none; } @@ -635,7 +680,7 @@ body.dark-theme { } .no-theme a { - color: #a0a0a0; + color: #adadad; text-decoration: none; } @@ -666,6 +711,14 @@ body.dark-theme { background-color: inherit; color: inherit; } + + .no-theme footer { + color: #adadad; + } + + .no-theme footer a { + color: #adadad !important; + } } @@ -759,3 +812,7 @@ h1, h2, h3, h4, h5, p, .channel-emoji { margin: 0 2px; } + +#download_widget { + width: 100%; +} diff --git a/assets/css/player.css b/assets/css/player.css index 50c7a748..9cb400ad 100644 --- a/assets/css/player.css +++ b/assets/css/player.css @@ -68,6 +68,7 @@ .video-js.player-style-youtube .vjs-menu-button-popup .vjs-menu { margin-bottom: 2em; + padding-top: 2em } .video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {height: 5px; |