Misstodon - A Misskey Inspired Mastodon Theme Override for the 4.x Interface

misstodon.css

@media screen and (max-width: 1174px) {
    .ui__header,
    .navigation-panel {
        background: #192320 !important;
    }
}

body,
.sidebar-wrapper__inner,
.tabs-bar__wrapper {
    background-color: #141711 !important;
}

.status.light .status__display-name {
    border-radius: 5px;
    padding-left: 0.4rem;
    background: unset !important;
    text-shadow: 1px 0 1px #000, 0.866px 0.5px 1px #000, 0.5px 0.866px 1px #000, 0 1px 1px #000,
    -0.5px 0.866px 1px #000, -0.866px 0.5px 1px #000, -1px 0 1px #000, -0.866px -0.5px 1px #000,
    -0.5px -0.866px 1px #000, 0 -1px 1px #000, 0.5px -0.866px 1px #000, 0.866px -0.5px 1px #000;
}

.display-name__html,
.display-name__account,
.status__content {
    color: white !important;
}

.status.light {
    background-color: rgb(116 255 0 / 3%) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backface-visibility: hidden !important;
    border-radius: 9px;
    border: 1px solid #6d8d00;
}

.modal-root__modal.actions-modal,
.modal-root__modal.actions-modal > * a {
    background-color: rgba(116, 255, 0, 0) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backface-visibility: hidden !important;
}

.modal-root__modal.actions-modal > * .dropdown-menu__separator {
    margin: 5px 7px 6px !important;
}

.modal-root__modal.actions-modal > ul {
    border: solid 1px #1d3c1b;
    border-radius: 10px;
    padding: 0.5rem;
}

button,
.button {
    color: #192320 !important;
    background: linear-gradient(90deg, rgba(189, 230, 73, 1) 0%, rgba(141, 230, 70, 1) 100%) !important;
}

button:hover,
.button:hover {
    transition: unset !important;
    background: #d6fd56 !important;
}

label.icon-button > span:last-child {
    color: #192320 !important;
}

.text-icon-button,
.icon-button {
    color: #dee7e4 !important;
    background: unset !important;
}

.text-icon-button:hover,
.icon-button:hover {
    color: #686969 !important;
}

.status__action-bar-button.star-icon:hover,
.status__action-bar-button.star-icon.active.activate {
    color: #ffc400 !important;
}

.status__action-bar-button.bookmark-icon:hover,
.status__action-bar-button.bookmark-icon.active {
    color: #ff4800 !important;
}

button.table-action-link,
.reply-indicator__content {
    color: #fff !important;
}

.poll__link {
    background: unset !important;
    color: #606984 !important;
}

.video-player__buttons .player-button {
    background: unset !important;
    color: unset !important;
}

.video-player__controls {
    background: linear-gradient(0deg, rgba(27, 65, 0, .85), rgba(27, 65, 0, .45) 60%, transparent) !important;
}

.status-card__actions a,
.status-card__actions button {
    color: #d9e1e8 !important;
    background: transparent !important;
}

a,
.account__section-headline > button,
.notification__filter-bar > button {
    color: #dee7e4 !important;
    background: #192320 !important;
}

a:active,
a:hover,
.selected,
.account__section-headline > button:hover,
.notification__filter-bar > button:hover {
    color: #b4e900 !important;
    background-color: #30411b !important;
}

.account__action-bar__tab.active {
    border-bottom: 4px solid #b4e900 !important;
}

a.table-action-link,
button.table-action-link,
.trends__item__name a,
.column-link--transparent,
.column-header__setting-btn,
.translate > span > a,
.navigation-bar__profile > .edit:hover,
.reply-indicator__content a,
.status__content a,
.detailed-status__display-name,
.detailed-status__display-name:hover,
.detailed-status__link,
.detailed-status__application,
.detailed-status__datetime,
.account__display-name,
.counter a,
.hero-widget__text a,
.avatar,
.contact-widget > a,
.account__header__fields > * a,
.emoji-mart-category-list > * button,
.emoji-mart-anchors > button,
.emoji-mart-search-icon,
.emoji-mart-emoji,
.emoji-mart-emoji:hover,
.status__display-name.muted,
.permalink.acct,
.link-footer > * > a:hover,
.mention.hashtag,
.about__mail:hover,
.about__mail,
.permalink.account__display-name:hover,
.link-footer a,
.account__header__content.translate > p > a,
.account-card__bio.translate > p > a,
.account__disclaimer > a:hover,
.announcements-list__item__title,
.announcements-list__item__title:hover,
.u-url.mention,
.u-url.mention:hover,
.timeline-hint > a:hover {
    background: unset !important;
}

.reply-indicator__content a,
.status__content a {
    color: #b4e900 !important;
}

.compose-form__buttons-wrapper,
.search__input {
    background: #293330 !important;
}

.dropdown-menu.top,
.dropdown-menu.bottom {
    border: solid 1px #1d3c1b;
    background-color: rgb(116 255 0 / 3%) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backface-visibility: hidden !important;
}

.dropdown-menu__container__list--scrollable {
    overflow-y: auto;
}

.dropdown-menu__text-button,
.dropdown-menu__container__header,
.edited-timestamp__history__item > button,
.dropdown-menu__item > a {
    background: unset !important;
    color: #dee7e4 !important;
}

.dropdown-menu__text-button:hover,
.detailed-status__meta > a:hover {
    background: unset !important;
    color: #b4e900 !important;
}

.item-list,
.explore__search-header,
.scrollable,
.empty-column-indicator,
.nav-center,
.nav-right,
.box-widget,
.reply-indicator,
.glitch.local-settings__navigation {
    background: #192320 !important;
}

.status__content__read-more-button,
.status__content__read-more-button:hover {
    background: unset !important;
    color: #b4e900 !important;
}

.simple_form__overlay-area__overlay {
    background: #192320a6 !important;
}

.column-link--transparent.active,
.glitch.local-settings__navigation__item.active,
.focusable:focus {
    background: #30411b !important;
}

.sparkline {
    background: #202020 !important;
}

.status__relative-time {
    background: unset !important;
    padding: 0.2rem;
}

.status__relative-time:hover {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background: unset !important;
}

.detailed-status__display-name {
    border-radius: 5px;
}

.status__display-name {
    border-radius: 5px;
    padding-left: 0.4rem;
    background: linear-gradient(90deg, rgb(162 231 72), rgba(99, 100, 255, 0)) !important;
    text-shadow: 1px 0 1px #000, 0.866px 0.5px 1px #000, 0.5px 0.866px 1px #000, 0 1px 1px #000,
    -0.5px 0.866px 1px #000, -0.866px 0.5px 1px #000, -1px 0 1px #000, -0.866px -0.5px 1px #000,
    -0.5px -0.866px 1px #000, 0 -1px 1px #000, 0.5px -0.866px 1px #000, 0.866px -0.5px 1px #000;
}

.display-name {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-right: 0.4rem;
}

.display-name__account,
.display-name__html {
    padding-left: 0.1rem;
}

.status__prepend,
.status__prepend .status__display-name strong {
    color: #b4e900 !important;
}

.sidebar ul a {
    border-radius: unset !important;
}
.sidebar ul {
    border-radius: 5px !important;
}

.account__header__extra__links > a:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.account__header__extra__links > a:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.account__header__bio .account__header__fields dl:first-child .verified {
    border-radius: unset !important;
}

.column-header__back-button,
.column-header__button {
    background: rgba(141, 230, 70, 1) !important;
    margin: -2px !important;
}

.trends__item__sparkline {
    filter: hue-rotate(238deg);
}

.sparkline__graph {
    filter: hue-rotate(238deg);
}

.trends__item--requires-review > .trends__item__sparkline {
    filter: unset !important;
}

button {
    border: unset !important;
}