113 lines
3.2 KiB
CSS
113 lines
3.2 KiB
CSS
body {
|
|
/* */
|
|
/* Set the colors of them primary and hovers */
|
|
/* */
|
|
--primary: #ff9007 !important;
|
|
--border-primary: #ff9007 !important;
|
|
--mainHoverColor: #8b49fd;
|
|
/* */
|
|
/* Sexy background anyone? Sets a centered, fixed background image covering the space, and a gradient over it. Gradient is made for dark theme */
|
|
/* You're going to want to add something spacious in the custom homapage so it can really shine. Or have your visistors land on a channel, that looks good too*/
|
|
/* We could probably derive the gradient colors from existing variables, but hey: they were color-picked from the default dark-theme background variable, so it's a match, right? */
|
|
/* */
|
|
background: linear-gradient(to bottom, hsla(0, 14.3%, 6.9%, 1), hsla(0, 14.3%, 6.9%, .5)), url(https://www.basspistol.com/images/bpist-wireframe-background-outline.svg);
|
|
background-size: cover;
|
|
background-color: transparent !important;
|
|
background-attachment: fixed;
|
|
background-position: center center !important;
|
|
}
|
|
|
|
/* */
|
|
/* Set the colors of the buttons. We should probably look uo the new variable instead but feeling lazy, might do it later */
|
|
/* */
|
|
.primary-button:hover {
|
|
color: var(--on-primary);
|
|
background-color: var(--mainHoverColor);
|
|
border-color: var(--mainHoverColor);
|
|
}
|
|
|
|
/* */
|
|
/* Make sure the sexy background is shining through */
|
|
/* */
|
|
.sub-header-container{
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* */
|
|
/* add blured backdrop effect to the header and make it transparent so we can see the effect */
|
|
/* */
|
|
header.root-header {
|
|
background-color: hsla(0, 14.3%, 6.9%, 0.25) !important;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
header > my-header > div.root {
|
|
background-color: hsla(0, 14.3%, 6.9%, 0.25) !important;
|
|
}
|
|
|
|
/* */
|
|
/* Align the meny and the header of channels */
|
|
/* */
|
|
.menu-container,
|
|
.main-row {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
/* */
|
|
/* Let the hover on buttons and links be smooth AF, based */
|
|
/* */
|
|
a, a:hover, button {
|
|
transition: 0.5s;
|
|
}
|
|
/* */
|
|
/* Let the logo breath out of that little container thingie that looks like it is part of the logo (When not) */
|
|
/* */
|
|
.icon-logo {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
/* */
|
|
/* Kill the gamification. We sane, we good, we bigger than that! Life is not a competition. Enjoy the journey, Namaste! */
|
|
/* */
|
|
my-video-views-counter {
|
|
display: none;
|
|
}
|
|
/* */
|
|
/* Might not for users of peertube-plugin label-pur. If you CAN, you SHOULD enable redundancy. It's the right thing to do! PeerTube operators unite! (https://framagit.org/rigelk/peertube-plugin-label-pur) */
|
|
/* */
|
|
|
|
#label-pur {
|
|
z-index: 1000000;
|
|
}
|
|
|
|
/* */
|
|
/* Match the PUR card to the rest of the jazzband */
|
|
/* */
|
|
.flip-card-back {
|
|
background: --var(--mainHoverColor);
|
|
}
|
|
|
|
/* */
|
|
/* What do we want? Rounded corners!! When do we want them? NOW! */
|
|
/* */
|
|
.channel {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* */
|
|
/* We got channels banners with top-right rounded corener, bottom-right rounded corners, bottom-left rounded corners, top-left rounded corners, Channel banners for everyone! */
|
|
/* */
|
|
.banner img {
|
|
border-radius: 15px 15px 5px 5px;
|
|
}
|
|
|
|
/* */
|
|
/* We like colors and we pick them for text selection too! */
|
|
/* */
|
|
|
|
::selection {
|
|
color: white;
|
|
background: var(--mainHoverColor);
|
|
}
|
|
|