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

• https://kbin.social/m/onyx
• https://kbin.social/m/logicpro

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.