Mastodon Theme by 138594189

/* ==UserStyle==
@name         Mastodon Theme
@version      20221219.10.11
@namespace    userstyles.world/user/138594189
@description  A customizable theme for Mastodon
@author       138594189
@license      MIT
==/UserStyle== */

@-moz-document domain("mastodon.social") {
/* ==UserStyle==
@name           Mastodon Theme
@namespace      bsh.com
@version        1.0.0
@description    A theme for Mastodon
@author         BSh
==/UserStyle== */

/* Basic Configuration */
:root {
    /* Colors */
    --primary-hue: 0;
    --on-primary: black;
    --primary: hsl(var(--primary-hue), 100%, 67%);
    --secondary: hsl(var(--primary-hue), 22%, 74%);
    --secondary-text: hsl(var(--primary-hue), 29%, 70%);
    --secondary-text-1: hsl(var(--primary-hue), 8%, 65%);
    --secondary-text-2: hsl(var(--primary-hue), 9%, 45%);
    --secondary-text-10: hsl(var(--primary-hue), 16%, 28%);
    --text-1: white;

    --background-primary-a: hsl(var(--primary-hue), 15%, 12%);
    --background-primary-b: hsl(var(--primary-hue), 16%, 15%);
    --background-primary-c: hsl(var(--primary-hue), 16%, 19%);
    --background-primary-d: hsl(var(--primary-hue), 16%, 23%);
    --background-primary-e: hsl(var(--primary-hue), 16%, 25%);
    --background-primary-f: hsl(var(--primary-hue), 16%, 27%);
    --background-primary-g: hsl(var(--primary-hue), 16%, 45%);
    --background-primary-h: hsl(var(--primary-hue), 16%, 52%);

    --background-primary-light: hsl(var(--primary-hue), 25%, 88%);

    --seperator: hsl(var(--primary-hue), 16%, 27%);

    --trendline-below: hsla(var(--primary-hue), 100%, 77%, 0.25);
    --trendline-color: hsl(var(--primary-hue), 100%, 83%);

    --logo-gradient-top-right: hsl(var(--primary-hue), 100%, 69.4%);
    --logo-gradient-bottom-left: hsl(var(--primary-hue), 58.9%, 51.4%);

    /* Border Radius */
    --default-border-radius: 9999999px;
    --menu-border-radius: 12px;
    --account-card-border-radius: 18px;
}
}

@-moz-document domain("mastodon.social") {
/* Advanced Configuration */
:root {
    /* Colors */
    --primary-btn: var(--primary);
    --active-color: var(--primary);
    --icon-active-color: var(--active-color);

    --link-color: var(--primary);

    --main-background: var(--background-primary-a);
    --account-headline-bg: var(--background-primary-b);
    --notification-filter-bar-bg: var(--background-primary-b);
    --column-header-bg: var(--background-primary-d);
    --column-bg: var(--background-primary-b);
    --search-bg: var(--background-primary-d);
    --scrollbar: var(--background-primary-d);
    --scrollbar-hover: var(--background-primary-e);

    --badge-color: var(--primary);
    --switch-color: var(--primary);

    --tweet-field-bg: var(--background-primary-d);

    /* Border-Radius */
    --search-border-radius: var(--default-border-radius);
    --dropdown-border-radius: var(--menu-border-radius);
    --pfp-radius: var(--default-border-radius);
}
}

@-moz-document domain("mastodon.social") {
/* [Ignore] */
.empty-column-indicator,
.follow_requests-unlocked_explanation {
    color: var(--secondary-text-1);
}

body,
.tabs-bar__wrapper {
    background-color: var(--main-background);
}

.trends__item__sparkline path:last-child {
    stroke: var(--trendline-color) !important;
}

.reply-indicator__content a.unhandled-link,
.status__content a.unhandled-link {
    color: var(--link-color);
}

.icon-button {
    color: var(--background-primary-g);
}

.icon-button:active,
.icon-button:focus,
.icon-button:hover {
    color: var(--background-primary-h);
}

.empty-column-indicator,
.account__header__image,
.follow_requests-unlocked_explanation {
    background-color: var(--background-primary-b);
}

.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 {
    border-color: transparent transparent var(--background-primary-f);
}

.account__section-headline,
.notification__filter-bar {
    border-bottom-color: var(--background-primary-f);
}

.icon-with-badge__badge {
    background-color: var(--badge-color);
    color: var(--on-primary);
}

.trends__item__sparkline path:first-child {
    fill: var(--trendline-below) !important;
}

::-webkit-scrollbar-track:hover {
    background-color: var(--background-primary-b);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-hover);
}

.account__section-headline button,
.notification__filter-bar button {
    background-color: var(--background-primary-b);
}

.account {
    border-bottom-color: var(--seperator);
}

.column > .scrollable {
    background-color: var(--column-bg);
}

.account__section-headline {
    background-color: var(--account-headline-bg);
}

.notification__filter-bar {
    background-color: var(--notification-filter-bar-bg);
}


.account__avatar {
    border-radius: var(--pfp-radius);
}

.status__content__read-more-button {
    color: var(--secondary-text-1);
}

linearGradient#paint0_linear_89_11 stop:first-child {
    stop-color: var(--logo-gradient-top-right);
}

linearGradient#paint0_linear_89_11 stop:last-child {
    stop-color: var(--logo-gradient-bottom-left);
}

.column-header,
.column-header__button {
    background-color: var(--column-header-bg);
}

.privacy-dropdown__dropdown,
.dropdown-menu,
.dropdown-menu__item > *,
.language-dropdown__dropdown {
    border-radius: var(--dropdown-border-radius);
    background-color: var(--background-primary-light) !important;
}

.privacy-dropdown.active .privacy-dropdown__value.active,
.privacy-dropdown__option.active:hover,
.privacy-dropdown__option.active,
.privacy-dropdown__option:hover,
.dropdown-menu__item a:active,
.dropdown-menu__item a:focus,
.dropdown-menu__item a:hover,
.dropdown-menu__item button:active,
.dropdown-menu__item button:focus,
.dropdown-menu__item button:hover,
.privacy-dropdown__option.active .privacy-dropdown__option__content,
.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
.privacy-dropdown__option:hover .privacy-dropdown__option__content,
.privacy-dropdown__option:hover .privacy-dropdown__option__content strong {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

.account__section-headline a,
.account__section-headline button,
.notification__filter-bar a,
.notification__filter-bar button,
.column-header__button {
    color: var(--secondary-text-1);
}

.link-footer p {
    color: var(--secondary-text-10);
}

.link-footer p a {
    color: var(--secondary-text-2);
}

.account__header__fields > dl:not(.verified) a {
    color: var(--primary) !important;
}

.account__display-name strong,
.status__display-name strong {
    color: var(--text-1);
}

.notification__message,
.account .account__display-name {
    color: var(--primary-text);
}

.icon-button.active,
.icon-button:hover,
.icon-button:focus,
.notification__message .fa {
    color: var(--icon-active-color) !important;
}

.active {
    color: var(--active-color) !important;
}

.search input,
.account__header__tabs__name small {
    border-radius: var(--search-border-radius);
    background-color: var(--search-bg);
}

.account__header__bio .account__header__fields dd,
.search input,
.account__header__tabs__name small {
    color: var(--secondary-text) !important;
}

.account__header__bio .account__header__fields dt {
    color: var(--secondary-text-1);
}

.search__input:focus,
.account__header {
    background-color: var(--background-primary-d);
}

.account__header__bio .account__header__fields {
    background-color: var(--background-primary-b);
    border-radius: var(--account-card-border-radius);
}

:root {
    accent-color: var(--primary);
}

body.admin {
    background-color: var(--background-primary-b);
}

.admin-wrapper .sidebar-wrapper__inner {
    background-color: var(--background-primary-c);
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
    color: var(--on-primary);
    background-color: var(--primary);
}

.admin-wrapper .sidebar ul a.selected {
    background-color: var(--background-primary-d);
    color: white;
}

.admin-wrapper .sidebar ul ul {
    background-color: var(--background-primary-b);
}

.admin-wrapper .sidebar ul a {
    color: var(--secondary);
}

.search input::placeholder {
    color: var(--secondary-text-2);
}

/* Only on pref page */
body.admin .simple_form input,
body.admin .simple_form textarea {
    background-color: var(--background-primary-a);
    border: none;
    transition: background-color 100ms ease-in-out;
}

.directory__tag > a,
.directory__tag > div {
    background-color: var(--background-primary-c);
}

.directory__tag .fa-hashtag,
small,
small a {
    color: var(--secondary) !important;
}

.card > a:active .card__bar,
.card > a:focus .card__bar,
.card > a:hover .card__bar {
    background-color: var(--background-primary-e);
}

.applications-list__item {
    border: none;
    background-color: var(--background-primary-c);
}

.permissions-list__item {
    border-bottom-color: var(--seperator);
}

.permissions-list__item__text__type {
    color: var(--secondary);
}

.announcements-list__item__meta {
    color: var(--secondary-text-1);
}

.muted-hint a,
.hint a {
    color: var(--primary) !important;
}

.display-name span {
    color: var(--secondary) !important;
}

.edit_account .card__img img {
    background-color: var(--background-primary-a);
}

.card__bar {
    background-color: var(--background-primary-d);
}

body:not(.admin) .simple_form input,
body:not(.admin) .simple_form textarea {
    background-color: var(--background-primary-b);
    border: none;
    transition: background-color 100ms ease-in-out;
}

.admin-wrapper .sidebar ul a:hover,
.simple_form .block-button,
.simple_form .button,
.simple_form bu...