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. <del>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.</del> 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

<ins> v1.0 - 2023-06-15 </ins>

  • Release

<ins> v1.1 - 2023-07-08 </ins>

  • 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.
AnonymousLlama,
AnonymousLlama avatar

Love it mate, legend !

onyx,
onyx avatar

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.

melroy,
@melroy@kbin.melroy.org avatar

I'm tweaking it a bit. And also running this on: https://kbin.melroy.org/m/updates

melroy,
@melroy@kbin.melroy.org avatar

You are missing for instance the .popover class styling

VulcanSphere,
VulcanSphere avatar

Looks awesome (although too laggy on some devices), now being used on @honkaistarrail magazine.

admin,
admin avatar

So good.

Xperr7,
Xperr7 avatar

Thanks, looks great! Using it on my mag @arknights

miraih,
miraih avatar

This is aboslutely amazing! I was able to install it client-side with the Stylus Extension and now my instance looks like a dream tbh

Amongog, (edited )
Amongog avatar

It looks awesome!
Though it doesn't play well with the mobile PWA, at least on my phone. It makes the page laggy.

minnieo, (edited )
minnieo avatar

this is so gorgeous, thank you for sharing, i used it on my mags @SilentHill and @boycottreddit

  • All
  • Subscribed
  • Moderated
  • Favorites
  • kbinStyles
  • DreamBathrooms
  • mdbf
  • ethstaker
  • magazineikmin
  • GTA5RPClips
  • rosin
  • thenastyranch
  • Youngstown
  • InstantRegret
  • slotface
  • osvaldo12
  • kavyap
  • khanakhh
  • Durango
  • megavids
  • everett
  • cisconetworking
  • normalnudes
  • tester
  • ngwrru68w68
  • cubers
  • modclub
  • tacticalgear
  • provamag3
  • Leos
  • anitta
  • JUstTest
  • lostlight
  • All magazines