Small UI tweaks for Mastodon!

mastodon-tweaks.css

/* created by hazycora @[email protected] */
/* mastodon hazy tweaks v1.2.3 */
/* use with credit pls */
/* https://gist.github.com/hazycora/cfb4e726083e9c737ae1c8fd44b1c970 */

:root {
	--accent-clr: #8c8dff;
	--accent-deep-clr: #5455ff;
	--bg-primary: #15171c;
	--bg-secondary: #14161b;
	--bg-tertiary: #101115;
	--bg-quaternary: #0e0f13;
	--bg-selected: #1c1f26;
}
body {
	background-color: var(--bg-quaternary);
	font-family: "DM Sans","mastodon-font-sans-serif",sans-serif;
}
.column-header,
.column-header__back-button,
.column-header__button,
.search__input:focus {
	background-color: var(--bg-primary);
}
.search__input {
	background-color: var(--bg-secondary);
}
.column > .scrollable {
	background-color: var(--bg-primary);
}
.account__section-headline button,
.notification__filter-bar button {
	background: none;
}
.account__section-headline a.active:after,
.account__section-headline button.active:after,
.notification__filter-bar a.active:after,
.notification__filter-bar button.active:after {
	border-color: transparent transparent var(--bg-secondary);
}
.account__section-headline,
.notification__filter-bar {
	background-color: var(--bg-tertiary);
}
.detailed-status,
.detailed-status__action-bar {
	background-color: var(--bg-primary);
}
.status__avatar {
	box-shadow: none;
}
.status.collapsed .status__content:after {
	background: linear-gradient(rgba(40, 44, 55, 0), var(--bg-secondary));
}
.tabs-bar__wrapper {
	background: var(--bg-quaternary);
}
.explore__search-header {
	background-color: var(--bg-primary);
}
.dismissable-banner {
	background-color: var(--bg-primary);
}
.empty-column-indicator,
.follow_requests-unlocked_explanation {
	background: var(--bg-primary);
}
.focusable:focus,
.focusable:focus .detailed-status,
.focusable:focus .detailed-status__action-bar,
.focusable:focus.status.status-direct.muted {
	background-color: var(--bg-selected);
}
.status.collapsed .status__content {
	-webkit-mask-image: linear-gradient(black, transparent);
	mask-image: linear-gradient(black, transparent);
}
.status.collapsed .status__content::after {
	display: none;
}
.column-header__button.active,
.column-header__button.active:hover {
	background-color: var(--bg-selected);
}
.column-header__collapsible-inner {
	background-color: var(--bg-selected);
}
.account__header__tabs__name {
	position: absolute;
	left: 110px;
	top: -11px;
	/* this is really jank i know: */
	max-width: calc(100vw - 328px);
	/* if i could change the markup it would be easier to make sure this doesnt go over the buttons but i cannot do that so i must suffer */
}
.account__header__bar {
	margin-top: 145px;
}
.account__header {
	position: relative;
}
.account__header__image {
	background: none;
	overflow: unset;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.account__header__image img {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--height) * -0.25);
	--height: 400px;
	height: var(--height);
	z-index: -1;
}
.account__header__image img {
	object-position: center;
}
.account__header__bar .avatar .account__avatar {
	background: none;
}
.account__header__bar {
	isolation: isolate;
	position: relative;
	background: none;
}
.account__header__bar::before {
	content: '';
	position: absolute;
	top: -32px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--bg-primary);
	-webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.8), rgb(0 0 0) 110px);
	z-index: -10;
}
.account__header__bar .avatar .account__avatar {
	border: none;
}
.account-memorial-banner,
.follow-request-banner,
.moved-account-banner {
	position: relative;
	z-index: 10;
}
.columns-area__panels {
	flex-direction: row-reverse;
	gap: 16px;
}
.columns-area__panels__pane--navigational .navigation-panel {
	border-inline-start: none;
}
.columns-area__panels__main {
	padding: 0;
}
.ui__header__links a[href="/search"] {
	display: none;
}

@media screen and (min-width: 700.1px) {
	.ui__header__links .button.button-secondary {
		background-color: var(--accent-deep-clr);
		border: none;
	}
}

@media screen and (min-width: 320px) {
	.ui__header__logo .logo--wordmark {
		display: none !important;
	}
	.ui__header__logo .logo--icon {
		display: block !important;
	}
}

@media screen and (max-width: 1174px) and (min-width: 700.1px) {
	.columns-area__panels {
		display: grid;
	}
}

@media screen and (max-width: 1174px) and (min-width: 889px) {
	.columns-area__panels {
		grid-template-columns: 285px 1fr;
	}
}

@media screen and (max-width: 1174px) {
	.layout-single-column .ui__header {
		background: var(--bg-quaternary);
	}
	.columns-area__panels__pane--navigational .navigation-panel {
		background: none;
	}
	.columns-area__panels__pane--navigational {
		min-width: unset;
		grid-column: 1;
		grid-row: 1;
	}
	.columns-area__panels__main {
		width: unset;
		grid-column: 2;
		min-width: 0;
	}
}

@media screen and (max-width: 889px) and (min-width: 700.1px) {
	.columns-area__panels {
		grid-template-columns: 55px 1fr;
	}
}

@media screen and (min-width: 1175px) {
	.columns-area__panels__main {
		max-width: 600px;
		max-width: min(600px, 100vw - 618px);
	}
	.columns-area__panels__pane--navigational {
		margin-top: 50px;
	}
	.columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
		height: calc(100% - 50px);
	}
	.ui__header {
		position: fixed;
		left: calc(50% - 600px);
		left: max(50% - 600px, 3px);
		display: flex;
	}
	.ui__header__logo {
		padding: 16px;
	}
	.ui__header__links {
		display: none;
	}
	.ui__header .logo--wordmark {
		display: none;
	}
	.ui__header .logo--icon {
		display: block;
	}
}

.layout-single-column .ui__header {
	border-bottom: none;
}
.column-header {
	border-radius: 4px 4px 0 0 !important;
}
.account__section-headline a.active:after, .account__section-headline a.active:before, .account__section-headline button.active:after, .account__section-headline button.active:before, .notification__filter-bar a.active:after, .notification__filter-bar a.active:before, .notification__filter-bar button.active:after, .notification__filter-bar button.active:before {
	display: none;
}
.account__section-headline a, .account__section-headline a, .account__section-headline button, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar a, .notification__filter-bar button, .notification__filter-bar button {
	border-bottom: 2px solid transparent;
}
.account__section-headline a.active, .account__section-headline a.active, .account__section-headline button.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar a.active, .notification__filter-bar button.active, .notification__filter-bar button.active {
	border-bottom: 2px solid var(--accent-clr);
}
.status__content a.unhandled-link .link-origin-tag {
	color: var(--accent-clr);
}

@media (max-width: 700px) {
	.column-header {
		border-radius: 0 !important;
	}
	.columns-area__panels__pane--navigational .navigation-panel {
		background-color: var(--bg-quaternary);
	}
	.columns-area__panels__main {
		grid-column: unset;
	}
	.navigation-panel > a[href="/explore"]:first-child {
		grid-column: 1 / -1 !important;
		;
	}
	.layout-single-column .app-holder, .layout-single-column .app-holder>div {
		align-items: start;
	}
	.tabs-bar__wrapper {
		top: 0;
	}
	.ui__header {
		position: fixed;
		top: unset;
		right: 0;
		bottom: 50px;
		height: unset;
		padding: 0;
		margin: 20px 10px;
		background: none !important;
	}
	.ui__header__logo {
		display: none;
	}
	.ui__header__links {
		gap: 15px;
		padding: 0;
		flex-direction: column-reverse;
		overflow: unset;
	}
	.ui__header:has(a[href="/auth/sign_in"]) {
		top: 0;
		bottom: unset;
		height: 48px;
		margin: 0;
		padding: 6px;
	}
	.ui__header:has(a[href="/auth/sign_in"]) .ui__header__links {
		flex-direction: row;
	}
	.ui__header__links a[target="_blank"] {
		width: 40px;
		aspect-ratio: 1;
		border-radius: 100%;
		overflow: hidden;
	}
	.ui__header__links a[target="_blank"] .account__avatar {
		width: 100% !important;
		height: 100% !important;
		background-size: cover !important;
	}
	.ui__header__links .button-secondary {
		background-color: var(--accent-deep-clr);
		border: none;
		box-sizing: border-box;
		width: 50px;
		aspect-ratio: 1;
		padding: 10px;
		display: grid;
		place-items: center;
		border-radius: 100%;
	}
	.ui__header__links a[href="/publish"]::before {
		content: '';
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="white"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>');
		width: 20px;
		aspect-ratio: 1;
		background-repeat: no-repeat;
		background-position: center;
	}
	.ui__header__links a[href="/publish"] span {
		display: none;
	}
	.ui__header__links a[href="/auth/sign_in"] {
		width: 100%;
	}
	.ui__header__links a {
		transition: transform 200ms cubic-bezier(0, 0, 0, 1.48);
	}
	.ui__header__links a:hover {
		transform: scale(1.1);
	}
	.ui__header__links .button-secondary:hover {
		background-color: #5455FF;
	}
	.columns-area__panels {
		min-height: 100vh;
		gap: 0;
		display: grid;
		justify-content: stretch;
	}
	.columns-area__panels__main {
		width: 100%;
		min-width: 0;
		padding-bottom: 250px;
		background-color: var(--bg-primary);
	}
	.columns-area__panels__pane--navigational {
		position: fixed;
		width: 100%;
		height: 50px;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.columns-area__panels__pane__inner {
		position: fixed;
		width: 100% !important;
		height: 50px;
	}
	.columns-area__panels__pane--navigational .navigation-panel {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		justify-content: space-around;
		height: 50px;
	}
	.columns-area__panels__pane--navigational:not(:has(a[href="/settings/preferences"])) {
		display: none;
	}
	.columns-area__panels__pane--navigational .navigation-panel .column-link__icon {
		margin: 0;
	}
	.columns-area__panels__pane--navigational .navigation-panel hr,
	.columns-area__panels__pane--navigational .navigation-panel .flex-spacer {
		display: none;
	}
	.navigation-panel > a {
		display: grid;
		place-items: center;
		flex: unset;
	}
	.navigation-panel > a[href="/home"] {
		grid-row: 1;
		grid-column: 1;
	}
	.navigation-panel > a[href="/explore"] {
		grid-row: 1;
		grid-column: 2;
	}
	.navigation-panel > a[href="/notifications"] {
		grid-row: 1;
		grid-column: 3;
	}
	.navigation-panel > a[href="/settings/preferences"] {
		grid-row: 1;
		grid-column: 4;
	}
	.navigation-panel > :is(:not(
		a[href="/notifications"],
		a[href="/home"],
		a[href="/explore"],
		a[href="/settings/preferences"]
	)) {
		display: none;
	}
}