hq/basspistol-designs
hq/basspistol-designs
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

give the css/html some light on the stage

Browse source
This commit is contained in:
sakrecoer 2025-03-25 22:33:50 +01:00
parent 3f0ed302f2
commit 3faede7e3e
2 changed files with 212 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

113
WebServices/Peertube/custom-peertube.css Normal file
View file

@ -0,0 +1,113 @@
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);
}