treestyletabs.css

/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */
#tabbar {
	border: 0;
	overflow-y: scroll !important;
	margin-left: -2px !important;
}

/* Hide .twisty and adjust margins so favicons have 7px on left. */
.tab .twisty {
	visibility: hidden;
	margin-left: -10px;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state, but still look fine while expanded. */
.tab .label {
	margin-left: 7px;
}

/* Hide close buttons on tabs. */
.tab .closebox {
	visibility: collapse;
}

/* Hide sound playing/muted button. */
.sound-button {
	display: none !important;
}

/* Hide 'new tab' button. */
.newtab-button {
	display: none;
}



/* ##### THEME ############################################ */
@keyframes pulse {
	0% {
		width: 0px;
		height: 0px;
		opacity: 1;
	}
	100% {
		width: 350px;
		height: 350px;
		opacity: 0;
		top: calc(50% - 175px);
		left: calc(50% - 175px);
	}
}



#tabbar {
	border-right: 1px solid #e0e0e0;
	box-shadow: none !important;
	background-color: #e0e0e0;
}



.tab {
	background-color: transparent;
	border-color: #bdbdbd;
	box-shadow: none !important;
}
.tab .label {
	color: rgba(100,100,100,0.75) !important;
}
.tab:hover {
	background-color: #E0E0E0 !important;
}
.tab:hover .label {
	color: rgba(100,100,100,1) !important;
}



.tab.discarded {
	background-color: transparent;
}
.tab.discarded .label {
	color: rgba(100,100,100,0.3) !important;
}
.tab.discarded:hover {
	background-color: #e9e9e9 !important;
}
.tab.discared:hover .label {
	color: rgba(100,100,100,0.5) !important;
}



.tab.active {
	background-color: #9E9E9E;
}
.tab.active .label {
	font-weight: bold;
	color: rgba(250,250,250,1) !important;
}
.tab.active:hover {
	background-color: #9E9E9E !important;
}



/* Adjust style for tab that has sound playing. */
.tab.sound-playing .favicon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	background: #FFFFFF;
	animation: pulse 2s ease-out 0s infinite;
	z-index: -1;
	opacity: 0;
}

/* Adjust style for tab that is muted. */
.tab.muted {
	opacity: 0.5;
}