mirror of
https://github.com/iv-org/invidious.git
synced 2025-08-21 02:39:00 -05:00
60c8c55ff2
In order to support both a theme toggle and to automatically use the user's selected theme based on browser/system defaults the stylesheets has to be duplicated twice since the latter requires the css to be wrapped around a media query. This duplication is a painful experience to deal with when adding or changing existing styles. Even more so when it involves jumping around the behemoth default.css from and back to whatever sections you were just working on. I don't believe the we the Invidious team will be able to agree to a proper solution anytime soon (eg css post-processor, modern css light-dark feature, etc) so this commit is here as a stopgap measure. The workaround is to move the theming styles to two separate files which are read at runtime and used to generate a combined stylesheet with the necessary duplication for the media query. This combined stylesheet is then delivered on a new route added to Invidious, bypassing the static file handler.
100 lines
2.4 KiB
CSS
100 lines
2.4 KiB
CSS
/*
|
|
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;
|
|
}
|