this post was submitted on 15 Jun 2023
22 points (100.0% liked)

Kbin Userstyles and Userscripts

15 readers
1 users here now

Custom CSS and JS to help improve your Kbin experience! ### Userscripts Greasy Fork ### Stylesheets UserStyles.world ### Userscript managers

founded 1 year ago
 

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.
top 10 comments
sorted by: hot top controversial new old
[–] [email protected] 3 points 1 year ago* (last edited 1 year ago)

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

[–] [email protected] 3 points 1 year ago

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

[–] [email protected] 2 points 1 year ago
[–] [email protected] 2 points 1 year ago

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

[–] [email protected] 2 points 1 year ago* (last edited 1 year ago)

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

[–] [email protected] 2 points 1 year ago

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

[–] [email protected] 2 points 1 year ago (1 children)

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

[–] [email protected] 1 points 1 year ago

You are missing for instance the .popover class styling

[–] [email protected] 2 points 1 year ago

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.

[–] [email protected] 1 points 1 year ago

Love it mate, legend !

load more comments
view more: next ›