22
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.