This css will transform the look of your magazine to be glassy-like!
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
}
v1.0 - 2023-06-15
v1.1 - 2023-07-08
@onyx
@kbin.social