KoolBin by Randdose

/* ==UserStyle==
@name         KoolBin
@version      20230819.18.17
@namespace    userstyles.world/user/Randdose
@description  More rounded and cleaner look for KBin. bigger images in "article" elements, and color full, rounded borders.
@author       Randdose
@license      GPL v3 or later
==/UserStyle== */

@-moz-document url-prefix("https://kbin.social") {
/*Page*/
#middle{
	top: 10px;
}

#middle .kbin-container{
	grid-template-columns: 2fr 1fr;
}

/*Headerbar*/
#header{
	position: sticky;
	top: 0;
	backdrop-filter: blur(8px);
}

/*LOL*/
header#header.header a.active{
	background: transparent;
}

/*Drop down menus*/
#header menu .dropdown:last-of-type .dropdown__menu{
	left: 50%;
	transform: translatex(calc(-50% - 2em));
}

#header menu .dropdown__menu{
	backdrop-filter: blur(8px);
	left: 50%;
}

/*Optionbar*/
.options--top{
	border-radius: 5px;
	overflow: hidden;
}
}

@-moz-document url-prefix("https://kbin.social") {
/*Posts*/
.entry{
	grid-template-areas:
		"vote title title"
		"image image image"
		"image image image"
		"desc desc desc  "
		"meta meta footer"
		"body body  body ";
	padding: 5px;
	border-radius: 5px;
}

.entry header{
    margin-top: 0;
}
    
/*Post image wrapper*/
.entry figure{
	display: flex;
	justify-content: center;
	width: unset;
	height: unset;
	position: unset;
	margin: unset;
}

/*Post Image*/
.entry .no-image-placeholder img,
.entry figure img{
	max-height: 400px;
	object-fit: unset;
	position: unset;
	height: unset;
	border-radius: 5px;
}

.entry .no-image-placeholder,
.entry figure{
	justify-self: center;
	border-radius: 5px;
	margin: 10px;
}

.entry .no-image-placeholder .image-filler,
.entry figure .image-filler{
	width: unset;
	height: unset;
	background-position: unset;
	top: unset;
	left: unset;
	right: unset;
}

/*Placeholder for posts with no image*/
.entry .no-image-placeholder{
	width: 200px;
	height: 200px;
}

/*User and magazine info*/
.entry .meta{
    display: flex;
	width: max-content;
	align-self: baseline;
    align-items: center;
    height: 34px;
}

.meta a:first-of-type{
    margin: 0;
}

.meta a{
    margin-left: 4px;
    padding: 0;
}
    
.meta time.timeago{
    margin: 0 4px;
}

/*Short description*/
.entry .short-desc{
	grid-area: desc;
    margin: 0;
    margin-bottom: var(--kbin-entry-element-spacing);
    padding: var(--kbin-entry-element-spacing);
    background: var(--kbin-bg);
    border-radius: 5px;
}

.entry .short-desc p{
    margin: 0;
}

/*Contains options like: comments, boost, report, etc*/
.entry footer{
	margin-left: 25px;
}
}

@-moz-document url-prefix("https://kbin.social") {
/*Vote*/

/*Vote wrapper*/
.entry .vote,
.vote{
	gap: 0;
	display: flex;
	flex-direction: column;
    margin: 0;
}

aside.vote{
	gap: 0 !important;
}

/*Vote buttons*/
.vote button{
	border: solid 1px var(--kbin-header-bg);
}

/*Upvote*/
.vote .vote__up button{
	border-radius: 5px 5px 0 0;
}

.vote .active.vote__up button{
	border-color: var(--kbin-upvoted-color);
}

/*Downvote*/
.vote .vote__down button{
	border-radius: 0 0 5px 5px;
}

.vote .active.vote__down button{
	border-color: var(--kbin-downvoted-color);
}
}

@-moz-document url-prefix("https://kbin.social") {
/*Magazine*/
#sidebar .section figure img{
	aspect-ratio: 1;
	border-radius: 10px;
}

/*Block button*/
.magazine__subscribe form[name*="block"] button,
aside.user__actions > form[name*="block"] button{
	border-radius: 0 5px 5px 0;
}

aside.user__actions div{
    border-radius: 5px 0 0 5px;
}

/*Follower or subscriber count*/
.magazine__subscribe div, .user__follow div{
	border-radius: 5px 0 0 5px;
}

/*Subscribe or follow button*/
aside.magazine__subscribe > form[name*="subscribe"] button,
aside.user__actions > form[name*="follow"] button{
	border-radius: 0;
}

/*Magazine subscribe count and actions in the search page*/
table .magazine__subscribe{
    flex-wrap: nowrap;
    margin: 0;
}

}

@-moz-document url-prefix("https://kbin.social") {
/*Components*/
.section, .btn, select, textarea{
	border-radius: 5px;
}

.btn{
    cursor: pointer;
}

aside div:only-child,
aside .btn:only-child{
    border-radius: 5px;
}

}

@-moz-document url-prefix("https://kbin.social/search"), url-prefix("https://kbin.social/magazines") {
/*Search page*/
.flex{
	gap: 0;
	justify-content: space-evenly;
}

form[method="get"] input{
	border-radius: 5px 0 0 5px;
	outline: none !important;
}

form[method="get"] input:focus{
	border: var(--kbin-button-primary-hover-bg) solid 1px;
}

form[method="get"] input:focus + .btn{
	border: var(--kbin-button-primary-hover-bg) solid 1px;
	border-left: none;
}

form[method="get"] .btn{
	border-radius: 0 5px 5px 0;
	height: 54px;
	aspect-ratio: 1;
}
}