Glassmorphism style for your kbin magazines! v1.1 - 2023-07-08
Glassmorphism style for your kbin magazines! v1.1 - 2023-07-08
This css will transform the look of your magazine to be glassy-like!
Demo
Usage
- To be used by magazine owners to style their magazines. Add the CSS to Appearance > CSS.
- Modify the background: url() to use any image you want. Do not use quotation marks in the custom CSS -> This is currently broken.
Notes
- Doesn't play well with light themes (you could add specific styling to solve this)
- Expect some funkiness, the property backdrop-filter does weird things to layers/z-index for some reason.
This is the reason why the options bar appears to not have that glassy look. The dropdown menu's would get rendered under other surrounding elements.Fixed in v1.1 - Have fun !
CSS
body::before {
height: 100%;
background: url(https://user-images.githubusercontent.com/20504972/245808671-5382aab6-d16b-4e9a-8536-f79ef0f9f7fd.jpg);
background-position-x: center;
background-position-y: inherit;
background-repeat: no-repeat;
background-size: cover;
filter: opacity(.5);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: url();
}
#content,
#footer,
#options,
#sidebar {
position: relative
}
#middle {
background: transparent
}
#middle .kbin-container {
margin-top: 0!important;
padding-top: .5rem
}
#comment-add.section,
#footer,
#header .kbin-container,
#options,
#sidebar .options,
#sidebar .section,
.badge-add,
.ban-add,
.comments .section,
.entry.section,
.moderator-add,
.page-entry-create .section,
.page-magazine-panel .section,
.page-people .users .section,
.page-post-front .options:not(#main .options),
.page-post-front .section,
.section--muted,
.section.theme {
-webkit-backdrop-filter: blur(20px) brightness(1.25);
backdrop-filter: blur(20px) brightness(1.25)
}
#header {
background-color: transparent
}
#header .kbin-container {
border-radius: 0 0 .5rem .5rem;
background-color: hsla(0,0%,100%,.07)
}
#footer,
.magazine.section,
.options,
.page-magazine-panel .section,
.section:not(.section.users) {
background-color: hsla(0,0%,100%,.05)
}
#comment-add.section,
#content .section:not(.page-people #content .section),
#sidebar .section,
.comments .section,
.entry--single,
.magazine.section,
.options--top,
.page-entry-front #settings,
.page-magazine-stats #content,
.page-magazine-theme #content,
.section--top,
.section-top,
.users .section {
border: 1px solid hsla(0,0%,100%,.2)!important
}
Changelog
v1.0 - 2023-06-15
- Release
v1.1 - 2023-07-08
- Sidebar sections added to border styling.
- Top options is now correctly styled.
- Background of middle section is now set to be transparent, a fix for last kbin update.
It looks awesome!
Though it doesn't play well with the mobile PWA, at least on my phone. It makes the page laggy.3 0 ReplyThanks, looks great! Using it on my mag @arknights
3 0 ReplySo good.
2 0 ReplyLooks awesome (although too laggy on some devices), now being used on @honkaistarrail magazine.
2 0 Replythis is so gorgeous, thank you for sharing, i used it on my mags @SilentHill and @boycottreddit
2 0 ReplyThis is aboslutely amazing! I was able to install it client-side with the Stylus Extension and now my instance looks like a dream tbh
2 0 ReplyI'm tweaking it a bit. And also running this on: https://kbin.melroy.org/m/updates
2 0 ReplyYou are missing for instance the
.popover
class styling1 0 Reply
Thanks everyone for the nice comments!
I've updated the css code to add fixes for the recent updates and several other improvements.
Changelog & versioning added in OP.
2 0 ReplyLove it mate, legend !
1 0 Reply