Various personal changes to kbin's appearance.
Pam's kbin Improvements by Pamasich
Details
AuthorPamasich
LicenseMIT
Categorykbin
Created
Updated
Size13 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This is a userstyle containing my personal changes to kbin and KES (kbin enhancement suite), published for easier syncing between my devices. Feel free to use it if you're interested.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Pam's kbin Improvements
@namespace pamasich.kbin
@version 1.0.0
@description My personal changes to kbin's and KES's appearance.
@author Pamasich
@license MIT
@preprocessor stylus
@var checkbox enablePrefs "1: Enable various minor extra styling that doesn't need its own option" 1
@var checkbox enableVoteColors "2: Customize Up-/Downvote Colors" 1
@var color favoriteColor "2.1: Upvote color" #24b270
@var color reduceColor "2.2: Downvote color" #dc2f3f
@var checkbox enableCompactUserPopup "3: More Compact User Popup" 1
@var checkbox hideFollowers "3.1: Hide followers in User Popup" 1
@var checkbox enableAntiScroll "4: Replace the scroll buttons on profiles with multiple rows" 1
@var checkbox enableMoveProfileDesc "5: Move profile description next to the avatar to save space" 1
@var checkbox enableShortMore "6: Shorter comment expansion bar" 1
@var checkbox enableKESReorder "7: [KES] Move the KES settings button to the left of the user" 1
@var checkbox enableWeakBorder "8: Color the bottom border that appears on menu options when hovering over them a different color than when clicked" 1
@var checkbox enableKESOPNoBG "9: [KES] Remove background from the OP label" 1
@var checkbox enableSubduedExpando "10: [KES] Make the expando line added by the Collapsible Comments addon more subdued" 1
@var checkbox enableHideCollections "11: Remove collections from the navbar" 1
@var checkbox enableAltNewComment "12: Emphasize new comments with a border rather than a small yellow triangle" 1
@var color newCommentColor "12.1: New Comment Border Color" hsl(0,0%,50%)
@var checkbox hideNativeMarker "12.2: Hide kbin's native new comment marker" 1
@var checkbox enablePinRecolor "13: Change the color of the pin icon to make it more obvious" 1
@var color pinColor "13.1: Pin Color" hsl(200,100%,70%)
@var checkbox disablePinVote "14: Disable voting on pinned threads" 1
@var checkbox inlineSidebarLines "15: Inline the various content counts in the sidebar" 1
==/UserStyle== */
@-moz-document domain("kbin.social"), domain("kbin.earth")
/*
Condenses the sidebar more by inlining some full lines.
*/
ul.meta > li
display: inline-block !important
border-width: 0px !important
min-height: 0px !important
margin-top: 5px !important
/*
Makes pins more obvious by changing the color of the icon and removing the vote buttons.
The latter is done because there's really no reason to vote on pinned threads. They are already pinned, you're not improving
their discoverability. At the same time, the buttons take up space.
*/
if enablePinRecolor
i[aria-label="Pinned"]:before
color: pinColor
if disablePinVote
article:has(i[aria-label="Pinned"]) > aside.vote > form {
display: none;
}
/*
The small yellow triangle signifying a new comment can be hard to recognize, especially with KES's Collapsible Comments addon enabled,
which means you have to scroll past all a comment's children to see the comment's triangle.
This snippet changes the triangle to a border and only applies it to the first new comment in a chain, not its children (they are implicitly
new already by being replies to a new comment).
*/
if enableAltNewComment
.new-comment
box-shadow: 0 0 5px 0.3px newCommentColor
& .new-comment
// ensure only the first new comment in a chain gets the border
box-shadow: none !important;
&::before
if hideNativeMarker
display: none
/*
Toggle buttons are misaligned by default, the part that moves is placed too far south.
*/
.slider::before
left: 0px
top: 0px
/*
Collections are already accessible by going to Magazines and switching to the Collections tab, there's no reason to have the
collection index in the navbar too.
*/
if enableHideCollections
menu.head-nav__menu > li > a[href$=collections]
display: none !important
/*
Fixes the Activity bar at the bottom of threads overlapping the more dropdown menu.
*/
aside.options
z-index: unset
/*
KES's Collapsible Comments addon adds lines next to comments which collapse the comment when clicked. These lines all have different
colors which can be distracting. This snippet changes them to a subdued gray which lights up when hovering over.
Both colors work on all current themes.
*/
if enableSubduedExpando
.expando
& > .threadLine
background-color: hsla(0,0%,40%,0.2)
&:hover > .threadLine
background-color: hsl(0,0%,40%)
/*
It's impossible to choose that one doesn't want a background color for the OP label added by KES.
This snippet was made to fix that.
*/
if enableKESOPnoBG
a.user-inline::after
background-color: unset !important
/*
When hovering over certain menu buttons like on the profile or in the navbar, a border appears below them. This same
border is also used when the button is active.
This makes the border appear differently when hovering than when active.
*/
if enableWeakBorder
.options >* a:hover, #header a:hover
border-bottom-color: hsl(0,0%,70%) !important // seems to work well on all themes
/*
Moves the settings button added by KES to the left of the user.
*/
if enableKESReorder
#header li
&.dropdown:has(a.login)
order: 2
&#kes-settings #kes-settings-button
if enablePrefs
padding-left: 0px !important
padding-right: 0px !important
min-width: 0px !important
/*
Removes some space from the icon buttons in the navbar, bringing them closer together.
*/
if enablePrefs
#header li.dropdown > a
min-width: unset !important
/*
When KES is configured to show an email symbol next to users on the same instance, that symbol is given an underline.
Removes that underline.
Not made optional for now since this seems like a general improvement. But can make it optional on request.
*/
.kes-mail-link
text-decoration: none !important
/*
Makes the comment expansion bar shorter. There's no reason for it to cover the entire bottom line of the comment.
*/
if enableShortMore
// the bar you can click to expand a comment that's too long
.subject .more
margin-left: 40% !important
width: 30% !important
if enablePrefs
border-radius: 15px !important
&:hover
filter: opacity(85%)
/*
Moves the profile description to the right of the avatar instead of below it.
*/
if enableMoveProfileDesc
// the entire area container the user and description
.user-box > .with-avatar
// the container containing specifically the avatar, username, and buttons, but not the description
& .user-main
display: inline-block
// the avatar
& figure
if enablePrefs
margin-top: 20px
& > div
if enablePrefs
margin-left: 1.5rem
// the description
& .about
display: inline-block
/*
Replaces the scroll button based UI on profiles with multiple lines.
*/
if enableAntiScroll
// the tab list on profiles, with options such as "overview", "threads", "comments", etc
.page-user aside.options:not(.options--top)
if enablePrefs
padding-left: 10px
// enable multiple lines
height: unset
display: block
// the options container
& menu.options__main
display: flex
flex-direction: row
flex-wrap: wrap // causes the options to wrap onto two or more lines instead of overflowing
& menu.scroll
display: none // hide the scroll buttons
/*
Changes the color of the boost button on already boosted comments to help them stand out.
Attribution: Amongog (https://kbin.social/m/kbinStyles/t/12515/Share-your-CSS-and-JS-snippets-here#e...