Boardwalk for Modern Mastodon Advanced View (Dark) by slippinggitty

/* ==UserStyle==
@name         Boardwalk for Modern Mastodon Advanced View (Dark)
@version      20240903.04.40
@namespace    https://userstyles.world/user/slippinggitty
@description  A sleek new look for (Modern) Mastodon's Advanced view that is dark black. This theme uses a custom font. Be sure to have the proper settings turned on.
@author       slippinggitty
@license      MIT
==/UserStyle== */

@-moz-document domain("wetdry.world"), domain("mastodo.neoliber.al"), domain("mastodon.social"), domain("noc.social") {
:root {
    /* more human-readable color variables */
    --color-black: #000;
    --color-darish-grey: rgb(3, 3, 3);
    --color-dark-gray: rgb(20, 23, 26);
    --color-darker-gray: rgb(4, 4, 4);
    --color-transparent-black-light: rgba(0, 0, 0, 0.07);
    --color-transparent-black-medium: rgba(0, 0, 0, 0.15);
    --color-transparent-black-med-dark: rgba(0, 0, 0, 0.25);
    --color-transparent-black-dark: rgba(0, 0, 0, 0.39);
    --color-transparent-black-darker: rgba(0, 0, 0, 0.4);
    --color-transparent-black-semi: rgba(0, 0, 0, 0.7);
    --color-transparent-black-almost: rgba(0, 0, 0, 0.9);
    --relapse:  rgb(27, 146, 226);
    --relapse2: rgb(23, 164, 192);
    --relapserefill: rgb(17, 137, 193);
    --relapsedeluxe: rgba(82, 220, 248, .8);

    /* simplified existing variables */
    --tl-width: 750px;
    --radius: 12px;
    --radius-round: 24px;
    --hover-color: var(--color-transparent-black-light);
    --elevated-color: var(--color-dark-gray);
    --elevated-tint: var(--color-transparent-black-dark);
    --border-color: var(--color-dark-gray);
    --border-color-2: var(--color-dark-gray);
    --shadow: 0 10px 40px -10px var(--color-transparent-black-medium);
    --shadow-low: 0 8px 16px -10px var(--color-transparent-black-darker);
    --shadow-med: 0 8px 60px -30px var(--color-transparent-black-medium);
    --dropdown-border-color: var(--color-black);
    --dropdown-background-color: var(--color-transparent-black-almost);
    --dropdown-shadow: 0 20px 25px -5px var(--color-transparent-black-med-dark), 0 8px 10px -6px var(--color-transparent-black-med-dark);
    --modal-background-color: var(--color-transparent-black-semi);
    --modal-background-variant-color: var(--color-transparent-black-semi);
    --modal-border-color: var(--color-black);
    --background-border-color: var(--color-black);
    --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
    --background-color: var(--color-black);
    --background-color-tint: var(--color-transparent-black-almost);
    --surface-background-color: var(--color-black);
    --surface-variant-background-color: var(--color-black);
    --surface-variant-active-background-color: var(--color-black);
}

}

@-moz-document domain("wetdry.world"), domain("mastodo.neoliber.al"), domain("mastodon.social"), domain("noc.social") {
html {
    scrollbar-color: var(--color-dark-gray) var(--color-transparent-black-light);
}

@font-face {
    font-family: "Chirp";
    src: url("https://abs.twimg.com/fonts/chirp-regular-web.woff")format("woff");
}
@font-face {
    font-family: "Chirp Bold";
    src: url("https://abs.twimg.com/fonts/chirp-bold-web.woff")format("woff");
}

* {
    font-family: "Chirp" !important;
}

.layout-multiple-columns #mastodon .columns-area > div:first-child {
    background-color: var(--color-black);
}
body.app-body.flavour-glitch > #mastodon .compose-form__highlightable {
    background-color: var(--color-darish-grey);
    border-radius: 4px;
    transition: .1s;
}
body.app-body.flavour-glitch > #mastodon .compose-form__highlightable:hover {
    background: var(--color-darker-gray);
    transition: .1s;
    box-shadow: var(--relapsedeluxe) 0px -1px 5px -1px;
}

.compose-form__actions .icon-button {
    color: var(--relapse) /* No variable replacement */
}

body.app-body.flavour-glitch > #mastodon .compose-form__submit button {
    background: var(--relapse) /* No variable replacement */
}
body.app-body.flavour-glitch > #mastodon .compose-form__submit {
    border-radius: 50px;
    color: white;
    font-weight: bold;
}
body:not(.reduce-motion) .button, .button.button-secondary:disabled, #mastodon .status__content__spoiler-link {
    background-color: var(--relapse);
    border-radius: 50px;
    color: white;
    font-weight: bold; 
}

#mastodon .hashtag-bar a,
#mastodon .hashtag-bar button {
    color: white;
    font-size: 1em;
    font-weight: bold;
    background-color: var(--relapse);
}
#mastodon .column::before {
    border-left: var(--color-dark-gray) solid 1px !important;
    border: var(--color-dark-gray) solid 2px !important;
    border-radius: 5px;
}

#mastodon .column {
    margin: 10px;
    background: var(--color-darish-grey);
    transition: .1s;
}

#mastodon .column:hover {
    border-radius: 15px;
    margin: 6px;
    background: var(--color-darish-grey);
    transition: .1s;
    box-shadow: var(--relapsedeluxe) 0px -1px 5px -1px;
}

#mastodon .search input {
    border-radius: 5px !important;
    margin: -4px -15px -14px -5px;
    background-color: var(--color-darish-grey);
    border-left: var(--color-dark-gray) solid 1px !important;
    border: var(--color-dark-gray) solid 1px !important;
}
.layout-multiple-columns #mastodon .columns-area .search {
    margin-left: 19px;
    margin-right: 10px;
}
.search__icon .icon-search.active {
    display: none;
}
.edit-indicator__content a,
.reply-indicator__content a,
.status__content a {
    color: var(--relapse); /* No variable replacement */
}
.account__action-bar {
    color: white !important;
}
#mastodon .compose-form > .navigation-bar {
    border-left: var(--color-dark-gray) solid 1px !important;
    border: var(--color-dark-gray) solid 1px !important;
    border-radius: 5px;
    padding: 10px;
    background: var(--color-darish-grey);
}
.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header {
    margin: 15px;
    border: var(--color-dark-gray) solid 2px !important;
    border-radius: 5px;
    background: var(--color-darish-grey);
}
.icon {
    transform: scale(.8);
}
.column-header.active .column-header__icon {
    color: var(--relapsedeluxe); /* No variable replacement */
}

.notification.unread::before,
.status__wrapper.unread::before {
    border-left: 2px solid var(--relapsedeluxe);
}
.notification__filter-bar button.active::before {
    background: var(--relapsedeluxe);
    height: 1px;
    width: 100%;
}

.account__header__fields dl:not(.verified) {
    background-color: var(--color-dark-gray);
}
.account__header__bio .account__header__fields .verified {
    background-color: var(--relapserefill);
}

.notification-group--unread::before, .notification-ungrouped--unread::before {
  border-inline-start: 4px solid var(--relapserefill) !important;
}

.edit-indicator__content a.unhandled-link, .reply-indicator__content a.unhandled-link, .status__content a.unhandled-lin, [class="u-url mention status-link"], [class="icon icon-react"], .mention:not(:focus):not(:hover) span, .unhandled-link:not(:focus):not(:hover) span, .dropdown-button__label, .dropdown-button .icon, .status__content__translate-button, .timeline-hint a:active, .timeline-hint a:focus, .timeline-hint a:hover, .timeline-hint, .account__header__bio .account__header__fields a, .status__content a.unhandled-link {
    color: var(--relapse2) !important;
}

[class="status__relative-time"], .notification__filter-bar button, [class="display-name__account"] {
    color: var(--relapserefill);
}

[class="character-counter"], .timeline-hint a, .notification__filter-bar button.active {
    color: var(--relapse);
}

.notification-group__main__header__label bdi, .status__content p:last-child {
    color: #cdcdcd;
}
.edit-indicator__content p, .edit-indicator__content pre, .reply-indicator__content p, .reply-indicator__content pre, .status__content p, .status__content pre {
    color: #d2cfcf;    
}

.column-header .icon,
[class="icon-with-badge"],
[class="icon icon-eraser"] {
    color: rgb(167, 167, 167); /* No variable replacement */
}

[class="column-header__wrapper"] {
    background-color: var(--color-black);
}

[class="column-header__buttons"] {
    background-color: var(--color-black);
}

.column-header__buttons button:not(.active) {
    background: var(--color-transparent-black-light) !important;
}

}

@-moz-document domain("wetdry.world"), domain("mastodo.neoliber.al"), domain("mastodon.social"), domain("noc.social") {
[d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"] {
    color: rgb(255, 172, 27);
}

[d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q20-22 36-47.5t26.5-53q10.5-27.5 16-56.5t5.5-59q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"] {
    color: rgb(30, 142, 237);
}

[d="m234-480-12-60q-12-5-22.5-10.5T178-564l-58 18-40-68 46-40q-2-13-2-26t2-26l-46-40 40-68 58 18q11-8 21.5-13.5T222-820l12-60h80l12 60q12 5 22.5 10.5T370-796l58-18 40 68-46 40q2 13 2 26t-2 26l46 40-40 68-58-18q-11 8-21.5 13.5T326-540l-12 60h-80Zm40-120q33 0 56.5-23.5T354-680q0-33-23.5-56.5T274-760q-33 0-56.5 23.5T194-680q0 33 23.5 56.5T274-600ZM592-40l-18-84q-17-6-31.5-14.5T514-158l-80 26-56-96 64-56q-2-18-2-36t2-36l-64-56 56-96 80 26q14-11 28.5-19.5T574-516l18-84h112l18 84q17 6 31.5 14.5T782-482l80-26 56 96-64 56q2 18 2 36t-2 36l64 56-56 96-80-26q-14 11-28.5 19.5T722-124l-18 84H592Zm56-160q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"] {
    color: rgb(99, 196, 86);
}

[d="m234-480-12-60q-12-5-22.5-10.5T178-564l-58 18-40-68 46-40q-2-13-2-26t2-26l-46-40 40-68 58 18q11-8 21.5-13.5T222-820l12-60h80l12 60q12 5 22.5 10.5T370-796l58-18 40 68-46 40q2 13 2 26t-2 26l46 40-40 68-58-18q-11 8-21.5 13.5T326-540l-12 60h-80Zm40-120q...