/* * Mastodon Boardwalk Dark Theme - Standard CSS * Converted from UserStyle for regular use. * NOTE: This CSS assumes the environment supports standard CSS variables. * Font files are loaded from external URLs using @font-face. */ :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: #0890de; --relapse2: #0890ded6; --relapserefill: #0890dead; --relapsedeluxe: #0890decc; /* 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); } /* Chirp font */ html { scrollbar-color: var(--color-dark-gray) var(--color-transparent-black-light); } .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); } body.app-body.flavour-glitch>#mastodon .compose-form__submit button { background: var(--relapse); } 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, .drawer__inner__mastodon { display: none; } .edit-indicator__content a, .reply-indicator__content a, .status__content a { color: var(--relapse); } .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); } .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); } [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; } body.app-body.flavour-glitch>#mastodon .local-settings { background: black; color: white; border: solid 5px; } .glitch.local-settings__navigation__item.active { background: var(--relapserefill); } /* Icon colors (based on SVG path data attributes) */ /* Hamburger menu (triple bars) */ [d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"] { color: rgb(255, 172, 27); } /* Globe (Public) */ [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); } /* Settings/Gear (primary) */ [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); } /* Another Settings/Gear (duplicate in original) */ [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); } /* Logout/Exit */ [d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"] { color: rgb(254, 42, 12); } /* Compose dropdown (Globe for Public) */ [class="dropdown-button"] [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: var(--relapse2); } /* Boost/Retweet (RT) */ [d="M280-80 120-240l160-160 56 58-62 62h406v-160h80v240H274l62 62-56 58Zm-80-440v-240h486l-62-62 56-58 160 160-160 160-56-58 62-62H280v160h-80Z"] { color: rgb(0, 135, 99); } /* Edit/Undo icons (arrow/box) */ [d="M7 22L3 18L7 14L8.4 15.45L6.85 17H17V13H19V19H6.85L8.4 20.55L7 22ZM5 11V5H17.15L15.6 3.45L17 2L21 6L17 10L15.6 8.55L17.15 7H7V11H5Z"], [d="M9 9H15V15H9V9Z"] { color: rgb(64, 215, 95); } /* Star/Favorite */ [d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z"] { color: rgb(97, 105, 0); } /* React (Thumbs Up) */ [d="M480-480Zm0 400q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q43 0 83 8.5t77 24.5v90q-35-20-75.5-31.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-32-6.5-62T776-600h86q9 29 13.5 58.5T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm320-600v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260Z"] { color: rgb(107, 26, 99); } /* Bookmark */ [d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Zm0-518h400-400Z"] { color: rgb(26, 33, 107); } /* More (three dots) */ [d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"] { color: rgb(109, 75, 24); } /* Reply */ [d="M320-280 80-520l240-240 57 56-184 184 184 184-57 56Zm480 80v-160q0-50-35-85t-85-35H433l144 144-57 56-240-240 240-240 57 56-144 144h247q83 0 141.5 58.5T880-360v160h-80Z"], [d="M760-200v-160q0-50-35-85t-85-35H273l144 144-57 56-240-240 240-240 57 56-144 144h367q83 0 141.5 58.5T840-360v160h-80Z"] { color: rgb(128, 17, 17); } /* Polls */ [d="M280-280h80v-280h-80v280Zm160 0h80v-400h-80v400Zm160 0h80v-160h-80v160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"] { color: rgb(55, 66, 125); } /* Local Timeline (House) */ [class="notification__filter-bar"] [d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"] { color: rgb(94, 24, 93); } /* Follow Requests (Person + plus) */ [d="M720-400v-120H600v-80h120v-120h80v120h120v80H800v120h-80Zm-360-80q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z"] { color: rgb(139, 35, 35); } /* ------- Mobile Support ---- */ .ui__navigation-bar__items.active, tabs-bar__wrapper:before, .ui__navigation-bar:before { background-color:#000; } .ui__navigation-bar__item:after { display: none; }