Canta Dark for Mastodon by Monolecte

/* ==UserStyle==
@name         Canta Dark for Mastodon
@version      20231102.17.41
@namespace    ?
==/UserStyle== */

@-moz-document domain("mastodon.xyz"), domain("mamot.fr"), domain("mastodon.social"), domain("framapiaf.org"), domain("mastodon.zaclys.com") {
:root {
	--orange: #FFAC00;
	--orangelight: #FFAC004D;
	--green: #00CE99;
	--darkest: #323232;
	--lightgrey: #dbdbdb;
	--darkgrey: #505050;
	--notifgrey: #3e3e3e;
}
html {
	scrollbar-color: var(--darkgrey) var(--darkest);
}
.scrollbar-color,
.scrollable {
	/* Replace the color by the color of column headers for a better effect. */
	scrollbar-color: var(--darkgrey) var(--darkest);
	/* This is optional but I find the default scrollbars way too fat. */
	scrollbar-width: thin;
}
body.error {
	color: var(--lightgrey);
	background: var(--darkest);
}
div[data-reactroot] {
	background: none !important;
}
body {
	background: var(--darkgrey);
}
.ui {
	background: var(--darkest);
}
body.app-body {
	background: var(--darkest);
}
.loading-bar {
	background-color: var(--green);
}
.loading-indicator__figure {
	border: 6px solid var(--orange);
}
.loading-indicator span {
	color: var(--orange)
}
div.column {
	opacity: 0.9;
	flex-grow: 1;
	flex-shrink: 1;
}
div.drawer {
	opacity: 0.95;
	background-color: transparent !important;
}

.status__content a .fa,
.status__content a .fa:hover {
	color: var(--green);
}
.status__content a,
.reply-indicator__content a,
.getting-started a,
.muted .status__content a,
.account__header .account__header__username {
	color: var(--green);
}
.account__display-name strong,
.status__display-name strong {
	color: var(--green);
}
.account__section-headline {
	background: var(--darkest);
	border-bottom: 1px solid var(--orangelight);
}
.column-header {
	background: var(--darkest);
}
.column-header__button {
	background: var(--darkest);
}
.column-header__back-button {
	background: var(--darkest);
}
.column-header__back-button {
	color: var(--green);
}
.column-header > .column-header__back-button {
	color: var(--green);
}
.column-header__buttons:hover {
	background-color: var(--darkgrey)
}
.status {
	border-bottom: 1px solid var(--orangelight);
}
.account {
	border-bottom: 1px solid var(--orangelight);
}
.status__content {
	font-size: 17px !important;
}
.search {
	width: 95%;
	margin: 0 auto;
	margin-bottom: 10px;
}
.search__input {
	background: var(--darkgrey);
	color: var(--lightgrey);
	Border-radius: 4px;
}
.search__input:focus {
	background: var(--darkgrey);
}
.search__icon .fa-times-circle:hover {
	color: var(--lightgrey);
}
.search__icon .fa-times-circle {
	color: var(--lightgrey);
}
.search__icon .fa.active {
	opacity: .8;
}
.drawer__inner__mastodon {
	background: var(--darkgrey);
	background-color: var(--darkgrey);
}
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
	color: var(--lightgrey);
	background: var(--darkgrey);
	border-bottom: 1px solid var(--orange);
	outline: 0;
}
.compose-form .compose-form__modifiers .compose-form__uploads-wrapper {
	color: var(--lightgrey);
	background: var(--darkgrey);
}
.account__header .account__header__fields dd {
	color: var(--lightgrey);
	background: var(--notifgrey);
}
.account__header .account__header__fields dt {
	color: var(--lightgrey);
	background: var(--notifgrey);
}
.account__action-bar__tab strong {
	color: var(--lightgrey);
}
.account__header > div {
	background: var(--notifgrey);
	opacity: 0.9;
}
.account__header__bar {
	border-bottom: 1px solid var(--orangelight);
}
.account__header__fields {
	border-style: solid none;
	border-width: 1px 0;
}
.compose-form .compose-form__buttons-wrapper {
	background: var(--darkgrey);
}
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter {
	color: var(--lightgrey);
}
.text-icon-button {
	color: var(--lightgrey);
}
.star-icon.active {
	color: var(--orange);
}
.drawer__inner__mastodon {
	display: none !important;
}
.column > .scrollable {
	background: var(--darkest);
	border-top: 1px solid var(--orangelight);
}
.drawer__inner {
	background: var(--darkest);
}
.drawer__header {
	background: var(--darkest);
}
.drawer__header a:hover {
	background: var(--darkgrey);
	-webkit-transition: background 200ms ease-out;
	transition: background 200ms ease-out;
}
.status.status-direct:not(.read) {
	background: var(--darkgrey);
	border-bottom-color: var(--darkgrey);
}
.status__display-name,
.status__prepend .status__display-name strong {
	color: var(--green);
}
.display-name__account {
	font-size: 16px;
	color: var(--orange);
}
.muted .status__content p {
	color: var(--lightgrey);
}
.muted .status__content a {
	color: var(--green);
}
.muted .status__display-name strong {
	color: var(--lightgrey);
}
.attachment-list__list a {
	color: var(--green);
}
.status__prepend > span {
	color: var(--lightgrey) !important;
}
.notification__message > span {
	color: var(--lightgrey) !important;
}
.notification__display-name {
	color: var(--orange);
}
.status__relative-time {
	color: var(--green);
}
.detailed-status {
	background: var(--notifgrey);
}
.reply-indicator {
	background: var(--darkgrey);
}
.reply-indicator__content {
	color: var(--lightgrey);
}
.detailed-status__meta {
	color: var(--lightgrey);
}
.detailed-status__action-bar {
	background: var(--notifgrey);
	border-bottom: 1px solid var(--orangelight);
}
.icon-button.inverted {
	color: var(--lightgrey);
}
.drawer__tab {
	color: var(--lightgrey);
}
.icon-button.inverted:hover,
.icon-button.inverted:active,
.icon-button.inverted:focus {
	color: var(--lightgrey);
}
.icon-button {
	color: var(--lightgrey);
}
.icon-button:hover,
.icon-button:active,
.icon-button:focus {
	color: var(--orange);
	-webkit-transition: color 200ms ease-out !important;
	transition: color 200ms ease-out !important;
}
.reduce-motion button.icon-button i.fa-retweet {
	color: var(--lightgrey);
}
.status.status-direct:not(.read) {
	background: var(--notifgrey);
	border-bottom-color: var(--orangelight);
}
.icon-button.disabled {
	color: var(--lightgrey);
}
.status__content__read-more-button {
	color: var(--green);
}
.column-header__button:hover {
	color: var(--lightgrey);
}
.column-header__button {
	color: var(--lightgrey);
}
.status-card {
	border: 1px solid var(--orange);
}
.status-card__title {
	color: var(--orange);
}
.status-card.compact {
	border-color: var(--orange);
}
.status-card {
	color: var(--orange);
}
.status-card__content {
	color: var(--orange);
}
a.status-card:hover,
a.status-card.compact:hover {
	background-color: var(--darkgrey);
}
.status-card__image:hover {
	background-color: var(--darkgrey);
}
.column-back-button {
	background: var(--darkest);
	color: var(--green);
}
.upload-progress {
	color: var(--lightgrey);
	background: var(--darkgrey);
}
.upload-progress__tracker {
	background: var(--green);
}
.navigation-bar a {
	color: var(--green);
}
.navigation-bar strong {
	color: var(--orange);
	font-size: 1.2em;
}
.column-header__collapsible-inner {
	background: var(--notifgrey);
}
.column-header__button.active:hover {
	background: transparent !important;
}
.react-toggle--checked .react-toggle-track {
	background-color: var(--orange);
}
.react-toggle--checked .react-toggle-thumb {
	left: 27px;
	border-color: var(--orange);
}
.react-toggle-track {
	background-color: var(--darkgrey);
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
	background-color: var(--orangelight);
}
.button {
	background-color: var(--orange);
}
.button:hover {
	background-color: var(--orangelight);
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}
.button:disabled {
	background-color: var(--orangelight);
	cursor: default;
}
.column-header.active {
	-webkit-box-shadow: 0 1px 0 var(--orangelight);
	box-shadow: 0 1px 0 var(--orangelight);
}
.column-header__wrapper.active::before {
	background: radial-gradient(ellipse,var(--orangelight) 0%,transparent 70%);
}
.column-header {
	background: var(--darkest);
}
.column-subheading {
	background: var(--darkest);
	color: var(--lightgrey);
	border-top: 1px solid var(--orangelight);
}
.column-link {
	background: var(--darkest);
}
.column-link:hover {
	background: var(--darkgrey);
}
.getting-started__footer {
	background-color: var(--darkest);
	border-top: 1px solid var(--orangelight);
}
.getting-started__footer p {
	color: var(--lightgrey);
}
.getting-started__footer p a {
	color: var(--green);
	text-decoration: none !important;
}
.getting-started__footer p a:hover {
	text-decoration: underline !important;
}
.account__action-bar__tab.active {
	border-bottom: 2px solid var(--orange);
}
.account__section-headline a.active::after {
	border-color: transparent transparent var(--orange);
}
.status__action-bar__counter__label {
	color: var(--lightgrey);
}
.column-header > button {
	color: var(--orange);
}
.column-header__button.active,
.column-header__button.active:hover {
	background: var(--notifgrey);
}
.setting-toggle__label,
.column-settings__section {
	color: var(--lightgrey);
}
.text-btn {
	color: var(--lightgrey);
}
.notification-favourite {
	background-color: var(--notifgrey);
}
.text-icon-button:hover,
.text-icon-button:active,
.text-icon-button:focus {
	color: var(--lightgrey);
	-webkit-transition: color 200ms ease-out;
	transition: color 200ms ease-out;
}
.detailed-status__application,
.detailed-status__datetime {
	color: var(--green);
}
.load-gap {
	border-bottom: 1px solid var(--darkest);
}
.load-more {
	color: var(--lightgrey);
}
.load-more:hover {
	background-color: var(--darkest);
	color: var(--lightgrey);
}
.privacy-dropdown__option.active:hover {
	background: var(--green);
}
.privacy-dropdown__option:hover,
.privacy-dropdown__option.active {
	background: var(--green);
}
.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
	background-color: var(--green);
}
.compose-form .compose-form__warning {
	background: var(--lightgrey);
}
.dropdown-menu {
	background: var(--lightgrey);
}
.dropdown-menu__item a {
	background: var(--lightgrey);
}
.dropdown-menu__item a:focus,
.dropdown-menu__i...