atocci, 11 months ago (edited 11 months ago)

Edit: Added a comment and updated the option bar to match the navbar.
Sure, here you go! I've never done anything like this before so it's probably a formatting disaster, but I've done my best to clean it a bit and add some comments about what does what here. This is what I've come up with after a few hours of just poking around with the inspect element feature and reading some tutorials:

/* Navbar */
#header {
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
position: relative; z-index: 4001
}

/* Page background image */
#middle {
background: url(https://toaru-project.com/railgun_t/core_sys/images/main/common/logo_t.svg) no-repeat center center fixed;
background-size: contain;
}

/* Post box transparency */
.section {
opacity: 0.96;
}

/* kbin footer background */
#footer {
background: linear-gradient(to top right, rgba(229, 0, 32, 1) , rgba(242, 151, 57, 1));
}

/* The little arrow button in the bottom right that takes you back to the top of the page */
#scroll-top {
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
}

/* Options bar */
#options {
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.25);
backdrop-filter: blur(10px);
position: relative
}

/* upvote color */
.vote .active.vote__up button {
color: rgba(242, 151, 57);
}

/* Media viewer background blur */
.goverlay {
background: rgba(0,0,0,.5);
backdrop-filter: blur(15px);
}