Skip to content

Simple dark/falt Mastodon Style by task

Screenshot of Simple dark/falt Mastodon Style

Details

Authortask

LicenseCC Zero

Categorymastodon.social

Created

Updated

Size8.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A nice basic dark/flat looking Mastodon 4.3 compatible theme.

Notes

Do not forget to add your Mastodon server domain if missing !!!

Source code

/* ==UserStyle==
@name         Simple dark/falt Mastodon Style
@version      20241125.02.23
@namespace    https://userstyles.world/user/task
@description  A nice basic dark/flat looking Mastodon 4.3 compatible theme.
@author       task
@license      CC Zero
==/UserStyle== */

/* ==UserStyle==
@name         Simple dark and flat Mastodon Style
@version      20241118.01.07
@namespace    https://userstyles.world/user/task
@description  A nice basic dark/flat looking Mastodon 4.3 compatible theme.
@author       task
@license      CC Zero
==/UserStyle== */

@-moz-document domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.social"), domain("misskey.io"), domain("mstdn.jp"), domain("mastodon.cloud"), domain("mstdn.social"), domain("mastodon.online"), domain("mastodon.world"), domain("micro.blog"), domain("mas.to"), domain("lemmy.world"), domain("pixelfed.social"), domain("universeodon.com"), domain("social.growyourown.services"), domain("") {
	@media screen and (min-width: 831px) {
		.column,
		.drawer {
			flex: auto;
		}
	}

	@media (min-width: 1800px) {
		.column {
			width: 25%;
		}
	}

	* {
		/*	--background-border-color: #272628;*/
		--background-border-color: #212123;
		border: 0px solid #534868 !important;
		/*	Serif Fonts:  */
		font-family: "Plovdiv Display", "Patrick Hand", "Mynerve", "LiterationSerif Nerd Font", "Linux Libertine Display", "Gentium Plus", "Free Serif", "Caladea", "Apple Garamond", "Alkalami Light", "Kalam", "Linux Biolinum O", serif !important;
		/*	Sans Serif Fonts:
	font-family: "Porcelain", "Libertinus Sans","Fira Sans Condensed", "Caladea", "Apple Garamond", "Alkalami Light","Linux Biolinum O", serif !important;
	*/
	}

	body {
		background: #212123 !important;
	}

	.column-header__back-button {
		padding: 0rem 0rem 0rem 0rem;
	}

	.column-header__button {
		background: #1f1f20;
		margin: 0rem 0rem;
	}

	.column-back-button {
		box-shadow: 0px 18px 16px -15px #121112;
	}

	.column-header,
	.column-header .active {
		box-shadow: 0px 18px 16px -15px #121112;
		margin-top: 0rem;
		padding: 0px;
	}

	.column-header__wrapper {
		box-shadow: 0 0px 0 #384D1885;
		max-height: 52px;
	}

	.column-header__wrapper.active {
		box-shadow: 0 0px 0 #384D1885;
		max-height: 52px;
	}

	.column-header__collapsible {
		animation: fade 2.0s linear;
		transition: 0.5s;
		top: 0;
		background: linear-gradient(to bottom, #1F1F20, #201825);
		border-bottom-left-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
		background-color: #1F1F20;
		padding: 0.25rem;
		margin: 0rem 0.5rem 1rem 0.25rem;
		box-shadow: 12px 18px 10px -10px #000000AA;
		border-top: 0px solid #FFF2 !important;
		border-left: 1px solid #FFF2 !important;
		border-right: 1px solid #212123 !important;
		border-bottom: 1px solid #212123 !important;
	}

	.load-more {
		border-bottom-left-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
		background-color: #34481585;
		margin: -0.25rem 1.5rem 1rem .5rem !important;
		padding: 1.25rem 0rem;
		color: #EEEEEE;
		box-shadow: 7px 10px 10px -7px #00000066 inset;
		border-bottom: 1px solid #FFFFFF22 !important;
		border-right: 1px solid #FFFFFF22 !important;
	}

	/*.search input {
		padding: 0.5rem 0.5rem 0.85rem 3rem;
		border-radius: 0.35rem !important;
		box-shadow: 9px 10px 10px -9px #00000066 inset;
		background: linear-gradient(to top, #22387B85, #19181A);
		border-right: 1px solid #FFFFFF44 !important;
		border-bottom: 1px solid #FFFFFF88 !important;
	}*/
	.load-more:hover {
		background-color: #384D1885;
		border-bottom: 1px solid #FFFFFF22 !important;
		border-right: 1px solid #FFFFFF22 !important;
		color: #FFFFFF;
	}

	.status {
		animation: fade .5s linear;
		border-top: 1px solid #FFF2 !important;
		border-left: 1px solid #FFF2 !important;
		border-right: 1px solid #212123 !important;
		border-bottom: 1px solid #212123 !important;
		cursor: auto;
		min-height: 54px;
		opacity: 1;
		box-shadow: 4px 6px 10px #0006;
		border-radius: 0.5rem;
		/*background-color: #121112;*/
		background: linear-gradient(to bottom, #1F1F20, #19181a);
		font-size: 1.25rem !important;
		line-height: 1.5rem;
		margin: 1rem 0.5rem !important;
	}

	.status-card__content {
		background: #1F1F20;
		margin: 0px 0px;
		padding: 20px;
		border-radius: 0px 7px 7px 0px;
	}

	.status__prepend {
		background: #1F1F20;
		font-weight: 400;
		gap: 0.2rem;
		padding: 1rem 1rem;
	}

	.status__prepend span {
		color: #534868;
	}

	.search-results__section__header span {
		color: #ADE34F;
	}

	.search-results__section__header {
		margin: 0rem 1.5rem -1.5rem 1.5rem;
		padding: 0.5rem 0.5rem 1.75rem 0.5rem;
		border-radius: 0.35rem;
		color: #ADE34F;
		box-shadow: 12px 10px 10px -10px #00000066 inset;
		background: linear-gradient(to top, #384D1885, #12111288);
		border-right: 1px solid #FFF2 !important;
		border-left: 1px solid #0006 !important;
	}

	.trends__item {
		background-color: #19181A;
		border-radius: 0.35rem;
		padding: 0.75rem 0.75rem;
		margin: 0.5rem 0.5rem
	}

	.status__prepend span {
		color: #7FA6CE;
	}

	.status__prepend,
	.status__prepend span {
		color: #FB7C06;
	}

	.status__prepend {
		margin: 0rem 1.5rem -1.5rem 1.5rem;
		padding: 0.5rem 0.5rem 0.85rem 0.5rem;
		border-radius: 0.35rem !important;
		box-shadow: 9px 10px 10px -9px #00000066 inset;
		background: linear-gradient(to top, #6F0E0E70, #2D0F0F8C);
		border-top: 1px solid #000 !important;
		border-right: 1px solid #FFF2 !important;
		border-left: 1px solid #000 !important;
	}

	.status-public {
		margin: -0.5rem 0rem;
	}

	.status-reply,
	.status-unlisted {
		padding: 1.0rem !important;
		margin: 0rem 0rem 1rem 0rem;
		border-radius: 0.5rem !important;
		background: linear-gradient(to bottom, #1F1F20, #0006);
	}

	.status__wrapper {
		font-size: 1.25rem !important;
	}

	.status__wrapper-public {
		margin: 0rem 0rem 0rem 0rem;
	}

	.notification-group--direct,
	.notification-ungrouped--direct,
	.status__wrapper-direct {
		background: #19181A;
	}

	.search-results__section {
		margin: .75rem 0rem 1rem 0rem;
		padding: 0rem;
	}

	.search-results__section__header {
		padding: 0.5rem 0.5rem;
		margin: 0rem
	}

	.search-results,
	.status__wrapper-public {
		background: #212123;
	}

	.notification-ungrouped--mention {
		background-color: #212123;
	}

	.notification-group--reply {
		background-color: #181E11;
	}

	.notification-group--reblog {
		background-color: #181E11;
	}

	.notification-group--follow {
		background-color: #201825;
	}

	.notification-group--favourite {
		background-color: #211B12;
	}

	.notification-ungrouped {
		border-bottom: 1px solid var(--background-border-color);
		padding: 1rem;
	}

	.column,
	.drawer {
		/*   Change this to "auto" if you do not want horizontal scrolling.   */
		flex: none;
	}

	.columns-area:has(.column+.column+.column+.column) .column {
		width: 450px;
	}

	.column > .scrollable {
		border: 0px solid #534868 !important;
		background: #212123;
	}

	.account {
		animation: fade .5s linear;
		border-top: 1px solid #2D0F0F8C !important;
		border-left: 1px solid #2D0F0F8C !important;
		border-right: 1px solid #FFF2 !important;
		border-bottom: 1px solid #12111200 !important;
		box-shadow: 4px 6px 10px #12111200;
		background: linear-gradient(to top, #121112, #201825);
		border-radius: 0.5rem;
		background-color: #121112;
		padding: 0.5rem 0.9rem !important;
		margin: 0.5rem 0.75rem;
	}

	.account__section-headline {
		margin: 2rem 0rem 0rem 0rem;
		padding: 0px;
		border-radius: 0.5rem;
		border: 1px solid #FFFFFF33;
		box-shadow: 7px 10px 10px -7px #00000066 inset;
		border-bottom: 1px solid #FFF2 !important;
		border-right: 1px solid #FFFFFF22 !important;
		background: linear-gradient(to bottom, #12111200, #1F1F20);
	}

	.account__section-headline a {
		color: #ADE34F;
	}

	.account__section-headline a:hover,
	.account__section-headline a:hover span {
		border-radius: 0.5rem;
		margin: 0px;
		color: #EEEEEE;
		/*background: linear-gradient(to bottom, #12111200, #384D1845);*/
	}

	.account__section-headline .active span {
		color: #ADE34F;
	}

	.account__section-headline .active {
		border-radius: 0.5rem;
		color: #121212;
		margin: 0px;
		background: linear-gradient(to bottom, #12111200, #384D1885);
	}

	.account-gallery__container {
		margin: 0.75rem;
		padding: 0.75rem;
		border-radius: 0.5rem !important;
		box-shadow: 9px 10px 10px -9px #00000066 inset;
		background: linear-gradient(to bottom, #1F1F20, #0006);
		border-right: 1px solid #FFFFFF44 !important;
	}

	.account-timeline__header {
		margin: 0rem 1rem;
	}

	.account__header__image {
		border-bottom-left-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
	}

	.account__header__bio .account__header__fields .verified {
		border-radius: 0.5rem;
	}

	.video-player {
		border-top: 0px solid #000 !important;
		border-left: 0px solid #000 !important;
		border-bottom: 0px solid #000 !important;
		border-right: 0px solid #000 !important;
		background-color: #000;
	}
}

Reviews

No reviews yet.