sidebery.css

/* zcpt for sidebery */

#root.root {--general-margin: 1px;}
#root.root {--accent: #0a84ff;}
#root.root {--nav-btn-accent: #0a84ff;}
#root.root {--tabs-border-radius: 0;}
#root.root {--general-border-radius: 0;}
#root.root {--tabs-activated-shadow: none;}
#root.root {--ntb-border-radius: 0px;}
* {--frame-el-shadow: none;}

body {
	--tab-separator-color: currentColor;
	--tab-outline: #0a84ff;
}

body[style="--s-toolbar-bg: #38383D; --s-toolbar-fg: rgb(249, 249, 250); --s-frame-bg: rgb(44.800000000000004, 44.800000000000004, 48.800000000000004); --s-frame-fg: rgb(249, 249, 250); --s-act-el-bg: rgb(75, 75, 80); --s-act-el-fg: rgb(249, 249, 250); --s-popup-bg: rgb(66,65,77); --s-popup-fg: rgb(251,251,254); --s-popup-border: rgb(82,82,94);"] * {
	--s-toolbar-bg: #323234 !important;
	--s-frame-bg: #323234 !important;
	--s-accent: #0a84ff !important;
	--tabs-activated-bg: #626263 !important;
	--tab-separator-color: #fdfdfd;
	--tab-outline: #0a84ff;
}

.new-tab-btn {box-shadow: none !important}

/* Tabs */
.Tab {
	margin: 0;
	width: 100% !important;
	min-width: 32px
}
body:hover .Tab[data-active="true"] .close {opacity: 1;}
.Tab .close-icon {
	height: 24px !important;
	width: 24px !important;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
}
.Tab[data-active="true"] .t-box {
  mask: linear-gradient(-90deg,transparent,transparent var(--close-btn-offset),#000 calc(var(--close-btn-offset) + 12px),#000);
}
.Tab[data-pin="false"] .body {
	padding-inline: 2px
}
.Tab[data-pin="true"] .body {
	width: 35px;
	margin-inline-start: -1px;
}

/* Tab separators */
.Tab[data-pin="false"]::after {
	display: block;
	content: "";
	postition: absolute;
	height: 1px;
	width: 100%;
	background: color-mix(in srgb, var(--tab-separator-color) 20%, transparent);
}
.Tab[data-pin="true"] .body .fav::after {
	display: block;
	content: "";
	postition: absolute;
	height: 32px;
	width: 1px;
	background: color-mix(in srgb, var(--tab-separator-color) 20%, transparent);
	margin-top: -2px;
	margin-inline-start: 24px
}
:root:not(:hover) .Tab[data-pin="true"] .body .fav::after {
	display: block;
	content: "";
	postition: absolute;
	height: 1px;
	width: 35px;
	background: color-mix(in srgb, var(--tab-separator-color) 20%, transparent);
	margin-top: -2px;
	margin-inline-start: -10px;
}
body .PinnedTabsBar {
	border-bottom: 1px color-mix(in srgb, var(--tab-separator-color) 20%, transparent) solid;
	padding-bottom: 0 !important;
}

.Tab[data-active="true"]::after, .Tab:has(+ .Tab[data-active="true"])::after,
.Tab[data-active="true"][data-pin="true"] .body .fav::after,
:root:hover .tab-wrapper:has(+ .tab-wrapper .Tab[data-active="true"]) .body .fav::after,
:root:not(:hover) .tab-wrapper:has(.Tab[data-active="true"]) + .tab-wrapper .body .fav::after,
:root:not(:hover) .tab-wrapper:first-child .Tab[data-pin="true"] .body .fav::after {
	opacity: 0
}

/* Tab highlights */

.Tab .body .fav::before {
	display: block;
	content: "";
	postition: absolute;
	height: 32px;
	width: 2px;
	background: var(--tab-outline);
	margin-top: -8px;
	margin-inline-start: -9px;
	transition: all 0.25s cubic-bezier(.07,.95,0,1);
	opacity: 0;
	scale: 1 0;
}
.Tab[data-pin="true"] .body .fav::before {
	width: 35px;
	height: 2px;
	margin-inline-start: -10px;
	scale: 0 1;
}
.Tab[data-active="true"] .body .fav::before {
	opacity: 1;
	scale: 1 1;
}
.Tab:hover:not([data-active="true"]) .body .fav::before {
	opacity: 1;
	scale: 1 1;
	filter: grayscale(1) brightness(1.2)
}


/* hover-os */
body {
	transition:0.2s
}
.audio, .t-box {
	transition:0.2s
}
:root:not(:hover) .main-box .audio {
	margin-inline-start: -10px !important;
	margin-top: 2px;
	background: #222;
	width: 16px;
	height: 16px;
	border-radius: 8px;
}
:root:not(:hover) .audio-icon {
	fill: #eee !important
}	
:root:not(:hover) .t-box {
	opacity: 0 !important;
	margin-inline-start: -16px;
}
:root:not(:hover) .Tab {
	padding-inline-start: 0px !important
}
.ScrollBox > .top-shadow {
	opacity: 0 !important
}

.CtxMenu * {
	border-radius: 0 !important
}