KraftBin.user.css

/* ==UserStyle==
@name         KraftBin
@version      3.13.1
@namespace    ThakshilaDamsak
@description  Cleaner and familiar look for Kbin. Derived from Randdose's KoolBin 
@author       ThakshilaDamsak <thakshiladamsak@hotmail.com> (https://thakshiladamsak.github.io)
@homepageURL  https://github.com/ThakshilaDamsak/KraftBin
@supportURL   https://github.com/ThakshilaDamsak/KraftBin/issues/new
@license      GPL v3
@preprocessor stylus

@var checkbox customLayout "KraftBin Post Layout" 1

@var checkbox menuClickToOpen "Click to Open Menus" 1

@var checkbox reduceMotion "Reduce Extra Motion" 0

@var range kraftbinBorderRadius "Corner Radius —— Turn off `Rounded Edges` option in Kbin to make this work" [8, 0, 25, 1, "px"]

@var select containerMarginTop "Top Margin" {
 "Enabled": "10px",
 "Disabled": "0",
  }

@var select kraftBin-shadow "Extra Shadows"  {
 "Normal": "1",
 "Large": "2",
 "Disabled": "0",
  }

@var checkbox sidebarToggle "Sidebar" 1

@var select containerRatio-sidebar "Sidebar Size" {
 "Small": "350px",
 "Medium": "450px",
 "Large": "550px",
 "Custom": "var(--containerRatio-sidebar-custom, 650px)",
  }

@var text containerRatio-sidebar-custom "Custom Sidebar Size" "650px"

@var checkbox magazinesToggle "Random Magazines" 1

@var checkbox activeUsersToggle "Active Users" 1

@var checkbox randomPostsToggle "Random Posts" 1

@var checkbox randomThreadsToggle "Random Threads" 1

@var select kbinPromo-display "Kbin Promotion" {
 "Show": "flex",
 "Hide": "none",
  }

@var checkbox supportUsToggle "Support Us Card" 1

  
@var select scrolltopToggle "Scroll-to-top Button" {
 "Show": "100%",
 "Hide": "0%",
  }

@var select containerMaxwidth "Content Max Width —— For large screens" {
 "Default": "1250px",
 "Kbin Default": "1360px",
 "Reddit-like": "1000px",
 "Full Width": "auto",
 "Custom": "var(--containerMaxwidth-custom, none)",
  }

@var text containerMaxwidth-custom "Custom Max Width" "1500px"

@var select headerMaxwidth "Header Max Width —— For large screens" {
 "Full Width": "auto",
 "Same as Content": "containerMaxwidth",
 "Kbin Default": "1360px",
 "Custom": "var(--headerMaxwidth-custom, none)",
  }

@var text headerMaxwidth-custom "Header Custom Max Width" "1500px"

==/UserStyle== */
@-moz-document url-prefix("https://kbin.social"),
url-prefix("https://karab.in"),
url-prefix("https://fedia.io") {

	:root {
		--kraftbinBorderRadius: kraftbinBorderRadius;
		--containerMarginTop: containerMarginTop;
		--KraftBin-shadow: none;
		--KraftBin-hover-shadow: none;
		--alertToggle: block;
		--sidebarToggle: block;
		--containerRatio-sidebar: containerRatio-sidebar;
		--containerRatio-sidebar-custom: containerRatio-sidebar-custom;
		--magazinesToggle: block;
		--activeUsersToggle: block;
		--randomPostsToggle: block;
		--randomThreadsToggle: block;
		--kbinPromo-display: kbinPromo-display;
		--scrolltopToggle: scrolltopToggle;
		--containerMaxwidth: containerMaxwidth;
		--containerMaxwidth-custom: containerMaxwidth-custom;
		--headerMaxwidth: headerMaxwidth;
		--headerMaxwidth-custom: headerMaxwidth-custom;
	}

	if (kraftBin-shadow)==2 {
		:root {
			--KraftBin-shadow: 0px 5px 25px rgba(0, 0, 0, .11);
			--KraftBin-hover-shadow: 0px 1px 25px rgba(0, 0, 0, .06);
			--KraftBin-image-shadow: 0 0 15px rgba(0, 0, 0, .17);
		}
	}

	if (kraftBin-shadow)==1 {
		:root {
			--KraftBin-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .07);
			--KraftBin-hover-shadow: 0px 2px 5px rgba(0, 0, 0, .07);
			--KraftBin-image-shadow: 0 2px 10px rgba(0, 0, 0, .07);
		}
	}

	if (kraftBin-shadow)==0 {
		:root {
			--KraftBin-shadow: none;
			--KraftBin-hover-shadow: none;
			--KraftBin-image-shadow: none;
		}
	}

	if not (sidebarToggle) {
		:root {
			--sidebarToggle: none;
		}
	}
	if not (magazinesToggle) {
		:root {
			--magazinesToggle: none;
		}
	}
	if not (activeUsersToggle) {
		:root {
			--activeUsersToggle: none;
		}
	}
	if not (randomPostsToggle) {
		:root {
			--randomPostsToggle: none;
		}
	}
	if not (randomThreadsToggle) {
		:root {
			--randomThreadsToggle: none;
		}
	}

	if not (supportUsToggle){
		.support-us-block {
			display: none;
		}
	}
	
	/*Page*/
	a,
	p {
		transition: 0.2s;
	}

	img {
		filter: drop-shadow(var(--KraftBin-image-shadow));
		transition: 0.2s;
		border-radius: var(--kraftbinBorderRadius);
	}

	code,
	div {
		border-radius: var(--kraftbinBorderRadius) !important;
	}

	div.content {
		border-radius: 0 !important;
	}

	.theme,
	.slider,
	.font-size,
	.radiogroup,
	.switch,
	.enum,
	.options,
	iframe {
		border-radius: var(--kraftbinBorderRadius) !important;
		box-shadow: var(--KraftBin-shadow) !important;
	}

	.slider::before {
		border-radius: var(--kraftbinBorderRadius) !important;
	}

	.dropdown button,
	.options__main,
	.options__top {
		border-radius: var(--kraftbinBorderRadius) !important;
	}

	.loader {
		border-radius: 50% !important;
	}

	aside.options {
		border-radius: var(--kraftbinBorderRadius) !important;
	}

	.kbin-promo img,
	.brand img {
		box-shadow: none !important;
		border-radius: 0 !important;
	}

	article figure {
		transition: 0.2s ease-in;
		box-shadow: var(--KraftBin-shadow);
	}

	article figure a {
		margin-bottom: -6px;
	}

	if not (reduceMotion) {
		article figure img:hover {
			scale: 1.015;
		}

		article figure:hover {
			box-shadow: var(--KraftBin-hover-shadow);
		}

		img.thumb-subject:hover {
			box-shadow: var(--KraftBin-hover-shadow) !important;
			scale: 1.015;
			transition: .2s ease-out;
		}

		a:hover {
			--KraftBin-shadow: var(--KraftBin-hover-shadow);
		}

		html {
			scroll-behavior: smooth;
		}
	}

	#scroll-top {
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, .26);
		border: solid;
		border-width: 1px;
		border-color: #6a6a6a8a;
		border-radius: var(--kraftbinBorderRadius) !important;
		transition: 0.2s;
	}

	#middle {
		top: 0px;
		margin-right: var(--marginsToggle);
		margin-left: var(--marginsToggle);
		transition: 0.2s;
	}

	@media screen and (max-width: 1200px) {
		#middle {
			margin-right: 0;
			margin-left: 0;
		}
	}

	@media screen and (max-width: 990px) {
		#sidebar {
			width: auto !important;
		}
	}

	footer {
		text-align: center;
	}


	#middle .kbin-container {
		grid-template-columns: 1fr 0fr;
		justify-content: center;
		padding-top: var(--containerMarginTop) !important;
		transition: 0.2s;
		max-width: var(--containerMaxwidth);
	}

	#header .kbin-container {
		max-width: var(--headerMaxwidth);
		transition: 0.2s;
	}

	.cover {
		border-radius: var(--kraftbinBorderRadius) var(--kraftbinBorderRadius) 0 0 !important;
	}

	.pagination a,
	.pagination span {
		border-radius: var(--kraftbinBorderRadius);
	}

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

	/*LOL
	header#header.header a.active {
		background: transparent;
	} */
	/*Drop down menus*/
	#header menu .dropdown__menu,
	.ts-dropdown,
	.ts-wrapper .ts-dropdown,
	.ts-wrapper .ts-dropdown.single,
	.ts-wrapper.single .ts-control {
		left: unset;
		backdrop-filter: blur(20px) saturate(3) contrast(0.8);
		transition: 0.2s;
		box-shadow: 0px 10px 25px -10px rgba(0, 0, 0, .3);
	}

	menu {
		transition: 0.2s;
	}

	.dropdown__menu,
	.ts-dropdown,
	.ts-wrapper .ts-dropdown,
	.ts-wrapper .ts-dropdown.single,
	.ts-wrapper.single .ts-control {
		box-shadow: 0px 10px 25px -10px rgba(0, 0, 0, .3);
		border-radius: var(--kraftbinBorderRadius) !important;
	}

	/*Optionbar*/
	.options--top {
		border-radius: var(--kraftbinBorderRadius) !important;
		box-shadow: var(--KraftBin-shadow) !important;
		transition: 0.2s;
	}

	.options {
		box-shadow: var(--KraftBin-shadow) !important;
		transition: 0.2s;
	}

	.section {
		box-shadow: var(--KraftBin-shadow) !important;
	}

	#sidebar {
		display: var(--sidebarToggle);
		width: var(--containerRatio-sidebar);
		transition: 0.2s;
	}

	.kbin-promo {
		box-shadow: none !important;
		display: var(--kbinPromo-display) !important;
		flex-direction: row !important;
	}

	.section--no-bg {
		box-shadow: none !important;
	}

	.related-magazines {
		display: var(--magazinesToggle);
	}

	.active-users {
		display: var(--activeUsersToggle);
	}

	.posts {
		display: var(--randomPostsToggle);
	}

	.entries {
		display: var(--randomThreadsToggle);
	}

	.user-name {
		margin: auto;
		margin-top: 15px;
		font-weight: 500;
	}
	.popover {
		transition: 0.2s;
	}

	.alert__info {
		display: var(--alertToggle);
	}

	#scroll-top {
		scale: var(--scrolltopToggle);
	}

	article {
		padding: 0px !important;
	}
	
	if menuClickToOpen == 1 {
	
		.dropdown:focus-within .dropdown__menu, .dropdown:focus .dropdown__menu {
		  opacity: 1 !important;
		  transform: rotateX(0) translateX(-50%) !important;
		  transition: visibility 0s,opacity .2s !important;
		  visibility: visible !important;
		}

		.dropdown:hover .dropdown__menu {
		  opacity: 0;
		  visibility: hidden;
		}
	
	}
	
}

@-moz-document url-prefix("https://kbin.social"),
url-prefix("https://karab.in"),
url-prefix("https://fedia.io") {

	if(customLayout) {
		/*Posts*/
		.entry {
			grid-template-areas: "vote title title" "vote image image" "vote image image" "vote body  body" "vote desc desc  " "vote meta footer";
			padding: 5px;
			border-radius: var(--kraftbinBorderRadius) !important;
			box-shadow: var(--KraftBin-shadow) !important;
			transition: 0.2s;
		}

		.no-image-placeholder {
			display: none;
		}

		/*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: var(--kraftbinBorderRadius) !important;
		}

		.entry .no-image-placeholder,
		.entry figure {
			justify-self: center;
			border-radius: var(--kraftbinBorderRadius) !important;
			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:not(.entry-cross) .meta {
			width: max-content;
			align-self: unset;
			margin: 10px;
			margin-left: 10px;
			grid-area: footer;
		}

		.entry-cross {
			margin-top: -5px !important;
			margin-bottom: 10px;
		}
		
		.comment {
			margin-top: 2.5px !important;
			margin-bottom: 2.5px !important;
		}
		
		.comments {
			padding-top: 0.5px;
			padding-bottom: 0px;
		}

		/*Short description*/
		.entry .short-desc {
			grid-area: desc;
		}

		/*Contains options like: comments, boost, report, etc*/
		.entry footer {
			margin: auto;
			margin-right: 20px;
			transition: 0.2s;
		}

		.preview img {
			transition: 0.2s ease;
		}

		.kch_header {
			border-radius: var(--kraftbinBorderRadius) var(--kraftbinBorderRadius) 0 0 !important;
		}

		.language-vbnet {
			border-radius: 0 0 var(--kraftbinBorderRadius) var(--kraftbinBorderRadius) !important;
		}

		aside.vote {
			border-radius: var(--kraftbinBorderRadius) 0 0 var(--kraftbinBorderRadius) !important;
		}

		@media screen and (max-width: 689px) {
			.entry:not(.entry-cross) footer {
				padding-top: 25px;
			}

			aside.meta {
				justify-self: right;
				margin-right: 20px !important;
			}
		}
	}

	/*Posts*/
	.entry {
		border-radius: var(--kraftbinBorderRadius) !important;
		box-shadow: var(--KraftBin-shadow) !important;
		transition: 0.2s;
	}

	.entry:hover {
		box-shadow: var(--KraftBin-hover-shadow) !important;
		transition: 0.1s !important;
	}


	/*Post Image*/
	.entry .no-image-placeholder img,
	.entry figure img {
		border-radius: var(--kraftbinBorderRadius);
	}

	.entry .no-image-placeholder,
	.entry figure {
		border-radius: var(--kraftbinBorderRadius) !important;
	}

	div.preview {
		transition: 0.2s;
		overflow: hidden !important;
		border-radius: var(--kraftbinBorderRadius) !important;
		margin-bottom: 5px;
		box-shadow: var(--KraftBin-hover-shadow) !important;
	}

	.preview img {
		transition: 0.2s;
		margin-bottom: -7px;
		box-shadow: none !important;
	}

	.kch_header {
		border-radius: var(--kraftbinBorderRadius) var(--kraftbinBorderRadius) 0 0 !important;
	}

	.language-vbnet {
		border-radius: 0 0 var(--kraftbinBorderRadius) var(--kraftbinBorderRadius) !important;
	}
}

@-moz-document url-prefix("https://kbin.social"),
url-prefix("https://karab.in"),
url-prefix("https://fedia.io") {
	/*Vote*/
	/*Vote wrapper*/
	.vote {
		gap: 0;
		transition: 0.2s;
	}

	aside.vote {
		gap: 5px !important;
		padding: 10px;
		background: #81818114;
		margin: 0px !important;
		border: 1px;
		border-radius: var(--kraftbinBorderRadius);
	}

	/*Vote buttons*/
	.vote button {
		border: 1px;
		transition: 0.2s;
		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .05);
		background: var(--kbin-body-bg);
		border-width: 1px;
		border-color: #89898921;
		border-style: solid;
	}

	.post .vote,
	.comment .vote {
		background: #00800000;
		padding: 0px !important;
	}

	.comment .vote button,
	.post .vote button {
		background: var(--kbin-bg-nth);
		margin-top: 5px;
		height: 25px;
		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .05);
	}

	.comment {
		transition: 0.2s;
	}

	.comment:hover {
		box-shadow: none !important;
	}


	/*Upvote*/
	.vote .vote__up button {
		border-radius: var(--kraftbinBorderRadius);
	}

	/*	.vote .active.vote__up button {

	} */
	/*Downvote*/
	.vote .vote__down button {
		border-radius: var(--kraftbinBorderRadius);
	}

	/*	.vote .active.vote__down button {

	} */
}

@-moz-document url-prefix("https://kbin.social"),
url-prefix("https://karab.in"),
url-prefix("https://fedia.io") {
	/*Magazine*/
	#sidebar .section figure img {
		aspect-ratio: auto;
	}

	.btn[title="block_magazine"],
	aside.user__follow > form[name*="block"] .btn,
	.btn__secondary,
	aside.magazine__subscribe button,
	aside.user__actions .btn__secondary,
	.domain__subscribe form[name="domain_block"] .btn__secondary {
		border-radius: 0 var(--kraftbinBorderRadius) var(--kraftbinBorderRadius) 0 !important;
	}

	.magazine__subscribe div,
	.user__follow div,
	aside.user__actions div,
	.domain__subscribe div {
		border-radius: var(--kraftbinBorderRadius) 0 0 var(--kraftbinBorderRadius) !important;
	}

	aside.magazine__subscribe > form[name*="subscribe"] .btn,
	aside.user__actions > form[name*="user_follow"] .btn,
	.magazine__subscribe form[name="magazine_subscribe"] .btn.active,
	.domain__subscribe form[name="domain_subscribe"] .btn__secondary {
		border-radius: 0 !important;
	}
	
}

@-moz-document url-prefix("https://kbin.social"),
url-prefix("https://karab.in"),
url-prefix("https://fedia.io") {
	/*Components*/
	.section,
	.btn,
	select,
	textarea,
	input,
	table {
		border-radius: var(--kraftbinBorderRadius) !important;
	}

	.btn {
		cursor: pointer;
		transition: 0.2s;
	}
}

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

	form[method="get"] input {
		border-radius: var(--kraftbinBorderRadius) 0 0 var(--kraftbinBorderRadius) !important;
		outline: none !important;
		transition: 0.2s;
	}

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

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

	form[method="get"] .btn {
		border-radius: 0 var(--kraftbinBorderRadius) var(--kraftbinBorderRadius) 0 !important;
		transition: 0.2s;
		height: 51px;
		aspect-ratio: 1;
		padding: 0;
	}
}

@-moz-document url-prefix("https://kbin.social/magazines"),
url-prefix("https://karab.in/magazines"),
url-prefix("https://fedia.io/magazines") {

	td .magazine__subscribe {
		gap: 7px !important;
	}

	td .magazine__subscribe div,
	td .magazine__subscribe form[name="magazine_subscribe"] .btn.active {
		border-radius: var(--kraftbinBorderRadius) !important;
	}

	td .magazine__subscribe > form[name*="subscribe"] .btn {
		border-radius: var(--kraftbinBorderRadius) !important;
	}

	.btn[title="block_magazine"],
	td aside.user__follow > form[name*="block"] .btn,
	.btn__secondary,
	td aside.magazine__subscribe button,
	td aside.user__actions .btn__secondary {
		border-radius: var(--kraftbinBorderRadius) !important;
	}
}