An evolution of the userstyle "Kbin Slim by the8thbit"
https://userstyles.world/style/10437/kbin-slim
kbin.social compact and reddit-like by virgil31
Details
Authorvirgil31
LicenseNo License
Categorykbin.social
Created
Updated
Size12 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
With a full page width usage, enhanced colors (buttons, magazines, usernames, ...), article images to the left and a placeholder image to keep the formatting.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Reddit like kbin.social - 6/23/2023, 12:00:00 AM
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Reddit like kbin.social
@author virgil31
==/UserStyle== */
@-moz-document url-prefix("https://kbin.social") {
.theme--kbin,
.theme--light,
.theme--dark,
.theme--solarized-light,
.theme--solarized-dark {
--kbin-success-color: #00ce5c !important;
--kbin-danger-color: #FF3131 !important;
}
.btn,
input[type="checkbox"],
markdown-toolbar > * {
cursor: pointer;
}
@media (min-width: 690px) {
.theme--kbin {
--kbin-body-line-height: normal;
}
.dropdown__menu {
padding: 0;
}
#header menu li {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#header menu li a {
padding: 0.5rem 0.75rem 0.5rem;
}
.kbin-container {
padding: 0.5rem;
gap: 0.775rem;
}
#middle {
padding-bottom: 0;
}
#middle #main,
#middle #sidebar {
padding: 0;
}
.options {
height: auto;
}
.options > * a,
.options > * button {
padding: 0.3rem 0.55rem;
height: auto;
border-bottom: none;
}
.options > * a:focus-visible,
.options > * a:hover,
.options > * button.active,
.options > * button:focus-visible,
.options > * button:hover {
border-bottom: none;
height: auto;
}
.options > * a.active {
color: var(--kbin-link-color);
font-weight: bold;
border-bottom: none;
height: auto;
}
.options > * a.active:hover {
color: var(--kbin-link-hover-color);
}
.theme--kbin .options--top,
.theme--kbin .section--top {
margin-top: 0 !important;
}
#sidebar .section {
padding: 0.42rem;
}
#sidebar .info li,
#sidebar .meta li {
min-height: 34px;
padding: 0;
padding-left: 0.3rem;
}
#sidebar .info li,
#sidebar .meta li:last-child {
border-bottom: none;
}
.related-magazines ul > li,
.user-list ul > li {
padding-left: 0.3rem;
}
.user-list ul > li > a,
.user-inline {
opacity: 0.7;
}
.user-inline:hover {
opacity: 1;
}
.user-list ul > li > a:hover {
color: var(--kbin-meta-link-hover-color);
}
.related-magazines ul > li > a,
.user-list ul > li > a {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 2.5px 0 !important;
color: var(--kbin-meta-link-color);
font-weight: 700;
}
.related-magazines ul > li > a > img,
.user-list ul > li > img {
border-radius: 100%;
}
.related-magazines ul > li > a *:first-child,
.user-list ul > li > *:first-child {
order: 1;
}
.preview {
display: unset;
}
.entry {
padding: 0.2rem;
margin-bottom: 5px;
grid-template-areas: "vote title image" "vote shortDesc image" "vote meta image" "vote footer image" "body body body";
grid-template-rows: auto minmax(0, auto) auto auto minmax(0, auto);
}
.view-compact .entry {
grid-template-rows: none;
}
.entry .short-desc {
margin: 0 !important;
padding: 0 !important;
}
.entry .short-desc p {
margin-bottom: 0.25rem;
}
.entry header {
margin: 0.2rem 0;
}
.entry header h2 {
line-height: 1rem;
}
.entry .entry__meta {
font-size: 0.65rem;
margin-top: 0;
}
.entry figure a {
height: 100%;
display: flex;
align-items: center;
border-radius: 2.75px;
background: var(--kbin-body-bg);
}
.entry figure a img {
padding: 0.15rem;
border-radius: 5px;
display: flex;
}
.view-compact .entry figure a img {
height: 85px !important;
width: 102px !important;
}
.entry figure img {
height: 100px;
width: 120px;
}
.entry .vote,
.entry .vote,
.view-compact .entry .vote,
.entry .vote {
margin-right: 0.5rem !important;
margin-left: 0.5rem !important;
gap: 0;
justify-items: end;
align-content: center;
}
.entry .vote form,
.view-compact .entry .vote form {
height: min-content;
line-height: initial;
}
.entry .vote form button,
.view-compact .entry .vote form button {
height: min-content;
padding: 0.1rem;
background: transparent;
}
.entry .vote form button span,
.view-compact .entry .vote form button span {
font-size: 1rem;
font-weight: bold;
}
.entry footer {
display: flex;
align-items: flex-end;
}
.entry footer menu {
align-items: center;
/*min-height: 25px;*/
}
.entry footer menu li {
height: 100%;
padding: 0;
display: flex;
align-items: center;
}
.entry .loader {
position: inherit;
opacity: 0.5;
}
#sidebar .magazine__subscribe {
margin-bottom: 0.75rem;
}
#sidebar .section menu > li {
padding: 0.3rem 0;
display: flex;
align-items: flex-end;
}
#sidebar .section figure > .row:first-child {
display: flex;
width: 100%;
justify-content: flex-start;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.15rem;
padding-right: 0.75rem;
}
#sidebar .section figure > .row:first-child > a {
padding: 0;
margin: 0;
min-width: fit-content;
}
#sidebar .section figure > .row:first-child > a > img {
height: 3.25rem !important;
width: auto;
aspect-ratio: 1;
margin-bottom: 0 !important;
border-radius: 100%;
}
#sidebar .section figure > .row:first-child > blockquote {
margin: 0 !important;
padding: 0 !important;
}
#sidebar .section figure > .row:first-child > blockquote > p {
margin-bottom: 0.4rem;
margin-top: 0;
}
#sidebar .section figure > .row:first-child > blockquote > div {
height: 0;
font-size: 0;
}
#sidebar .section figure > figcaption {
font-size: 0.6rem;
opacity: 0.8;
}
#sidebar .entries figure,
#sidebar .posts figure {
padding: 0 0.15rem;
margin-top: 0.35rem;
}
#sidebar .entries figure:first-child,
#sidebar .posts figure:first-child {
padding-top: 0;
margin-top: 0;
}
#sidebar section h3 {
margin-bottom: 0.4rem;
padding-bottom: 0.1rem;
}
#sidebar .settings .theme {
border: 1px var(--kbin-sidebar-header-text-color) solid;
}
.pagination {
padding: 0;
}
.entry__body {
margin-top: 0.5rem;
}
.comment {
grid-gap: 0;
column-gap: 0.5rem;
padding: 0.5rem;
}
.comment figure > a > img {
border-radius: 5px;
}
.comment footer > .js-container {
margin-top: 0.25rem;
}
.comment footer .comment-add > div {
margin-bottom: 0.5rem;
}
.comment footer .comment-add > div > textarea {
padding: 0.5rem 0.45rem;
}
.user-box .user-main {
padding: 0.5rem !important;
margin: 0 !important;
margin-bottom: 0 !important;
align-items: center;
justify-content: center;
top: 0 !important;
}
.user-box .with-cover .user-main {
margin-top: -60px !important;
}
.user-box .user-main img {
border: var(--kbin-section-border);
border-radius: 5px;
}
.user-box .user-main h1 {
margin-top: 0 !important;
}
.user-box .user-main small {
margin-bottom: 0.5rem !important;
}
.user-box .user-main .user__follow {
margin: 0 !important;
}
.user-box .about {
top: 0 !important;
margin-bottom: 0 !important;
}
}
/* My Styles */
#middle > div.kbin-container {
margin-left: 0px;
margin-right: 0px;
max-width: none;
grid-template-columns: 5fr 1fr;
}
#header > div.kbin-container {
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
max-width: none;
}
a.magazine-inline {
color: lightsalmon;
}
a.user-inline {
color: lightgreen;
}
button[title=Favourite]{
text-align: right;
color: lightse...