Adapted from: https://userstyles.org/styles/153362/mfc-mastodon-flat-css /*------------------------------------------------------------------------------ * MISC TWEAKS * * Miscellaneous tweaks that are more like extensions of the theme, * rather than subsets or features. These could ostensibly be their * own user-styles, and are only bundled in here for convenience. * Or, they are not supported in all browsers. They may be removed * without significantly affecting or compromising the theme. * * They are at the top of the style sheet for easy editing. ------------------------------------------------------------------------------*/ /* custom font */ body, .landing-page #mastodon-timeline, .landing-page li, .landing-page p { font-family: sans-serif } /* visible focus indicator */ .focusable:focus {border: 2px solid var(--accent) !important;} /* webkit scrollbars */ ::-webkit-scrollbar-track {background: rgba(0,0,0,0.4)} ::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.4)} /* recolor scrollbars in firefox */ html {scrollbar-color: var(--bgHead) #222;} /*------------------------------------------------------------------------------ * DEFINE COLOR PALETTE * * Choose the CSS Variables that will be applied to recolor elements. * The current format is to use hex codes, e.g. #00FF00. * * A future refactor to use rgb() instead may allow transparency mods * via using these variables with rgba(). Hex codes currently do not * work with rgba(), so no transparency mods are included except for * those defined in absolute terms (i.e., non-variable colors). * * Foreground Colors: * --bg: | Background for foreground elements. * --text: | A color that stands out against bg. * --textBold: | A color that stands out strongly against bg. * --textMuted: | A color that stands out slightly against bg. * * Background Colors: * --bgPage: | Background for non-foreground elements. * --textPage: | A color that stands out against bgPage. * --textPageBold: | A color that stands out strongly against bgPage. * --textPageMuted: | A color that stands out slightly against bgPage. * * Highlights Colors: * --bgHead: | Background for column headers. * --textHead: | A color that stands out (strongly) against bgHead. * --accent: | An accent color for links and buttons. * --accentText: | A color that stands out (strongly) against accent. * * Palette advisories for choosing colors: * - Consider using an off-white or off-black for text tones, * but not necessary as long as there is sufficient contrast. * - Bold colors are highly recommended to be strong colors, * like pure white or pure black. * - Muted colors can be off-grey or any mid-tone with slight contrast. * - It might be best to base the background palette on a slightly * darker or lighter version of the foreground palette, but * this is no longer strictly necessary; you may use mixed palettes. * It is now possible to use a dark bgPage and light bg, or vice-versa. ------------------------------------------------------------------------------*/ :root { --bg: #282c37; --text: #d0d8e0; --textBold: #fff; --textMuted: #6c737b; --bgPage: #282c37; --textPage: var(--text); --textPageBold: var(--textBold); --textPageMuted: var(--textMuted); --bgHead: #151515; --textHead: var(--textBold); --accent: #8c8dff; --accentText: var(--textBold); } /* My changes */ .drawer__header, .search__input { background-color: var(--bgHead) !important; } .compose-form, .navigation-bar { padding-left: 0; padding-right: 0 } .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input, .compose-form__uploads-wrapper, .compose-form__sensitive-button, .upload-progress { background-color: #191919; } .autosuggest-textarea__textarea { color: var(--text) !important; } .compose-form__buttons-wrapper { background-color: #101010 !important; } .emoji-button { filter: brightness(0.4) } .emoji-button:hover { filter: brightness(0.7) } .status__content__spoiler-link { background-color: var(--bgHead) !important; } .status__content__spoiler-link:hover { background-color: var(--accent) !important; } .sidebar { background-color: var(--bg); } /* Remove profile borders */ .account__header__bio .account__header__fields { border-top: none; } .account__header__bar { border-bottom: none; } /*------------------------------------------------------------------------------ * FOREGROUND COLOR PALETTE ===================================================== *------------------------------------------------------------------------------/ /*---------------------- base background and text ----------------------*/ /* status columns */ .column>.scrollable, .status, .status__content, .detailed-status, .detailed-status__action-bar, .focusable:focus .detailed-status, .focusable:focus .detailed-status__action-bar, .setting-text, .setting-text:active, .setting-text:focus, /*.status-direct .status__content .status__content__spoiler-link,*/ .column-link, .getting-started a.column-link, /* search */ /*.search__input, .search__input:focus,*/ .search-results .account, .trends__item, .trends__item__name a, .trends__item__current, /* compose form */ .reply-indicator__content, /* in reply to */ /* .compose-form .spoiler-input__input, .compose-form .autosuggest-textarea__textarea, .compose-form .compose-form__modifiers, .compose-form .compose-form__buttons-wrapper, */ /* settings page */ .simple_form textarea, .simple_form textarea:active, .simple_form textarea:focus, .simple_form input[type=email], .simple_form input[type=email]:active, .simple_form input[type=email]:focus, .simple_form input[type=number], .simple_form input[type=number]:active, .simple_form input[type=number]:focus, .simple_form input[type=password], .simple_form input[type=password]:active, .simple_form input[type=password]:focus, .simple_form input[type=text], .simple_form input[type=text]:active, .simple_form input[type=text]:focus, .table td, .table th, .table.inline-table>tbody>tr:nth-child(odd)>td, .table.inline-table>tbody>tr:nth-child(odd)>th, .table>tbody>tr:nth-child(odd)>td, .table>tbody>tr:nth-child(odd)>th, .column-inline-form label, /* modals */ .actions-modal, .boost-modal, .confirmation-modal, .mute-modal, .report-modal, .report-modal__statuses .status__content, .report-modal__statuses .status__content p, .report-modal__comment .setting-toggle__label, .list-editor, .list-editor .drawer__inner.backdrop, .account__moved-note, /* profile cards */ .card__bar, .card>a:active .card__bar, .card>a:focus .card__bar, .card>a:hover .card__bar, /* public pages */ .activity-stream .entry, .landing-page #mastodon-timeline, .landing-page #mastodon-timeline p, .landing-page__forms, .landing-page__information, .landing-page li, .landing-page p, .landing-page .features-list .features-list__row .text, .landing-page .features-list .features-list__row .visual .fa, .landing-page__short-description h1, .landing-page .separator-or span, .box-widget, .contact-widget, .landing-page__information.contact-widget, .rich-formatting li, .rich-formatting p, .public-layout .public-account-bio .account__header__content, .public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra, .public-layout .public-account-header__bar::before, .account__header__fields dt, .account__header__fields dd, .hero-widget__text, .load-more, .button.button-secondary { background: var(--bg); color: var(--text) } /*-------------------- override for bold text --------------------*/ /* primary elements */ .account__display-name strong, .status__display-name strong, .detailed-status__display-name strong, .card__bar .display-name strong, .account__action-bar__tab strong, /* profile counters */ /* public pages */ .landing-page h3, .landing-page h4, .landing-page em, .landing-page h5, .landing-page h6, .rich-formatting h3, .rich-formatting h4, .public-layout .public-account-header__tabs__tabs .counter .counter-number, .account__header__fields dt { color: var(--textBold) } /*--------------------- override for muted text ---------------------*/ /* secondary elements */ .display-name__account, .account .account__display-name, .card__bar .display-name span, .detailed-status__meta, .status__relative-time, .status__action-bar__counter__label, .status__prepend, .status__prepend .status__display-name strong, .attachment-list.compact .fa, .icon-button, .icon-button.disabled, .icon-button.active:hover, .account__action-bar__tab>span, .compose-form .icon-button.inverted, .compose-form .text-icon-button, .compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter, .upload-progress, .search__icon .fa, .search__icon .fa-times-circle, .trends__item__name, .notification__message, .account__moved-note__message, .muted .status__content a, .muted .status__content p, .muted .status__display-name strong, .attachment-list__list a, a.table-action-link, .table a.table-action-link, button.table-action-link, .status__wrapper--filtered, /* public pages */ .landing-page__short-description h1 small, .landing-page__short-description h1 small span, .simple_form p.hint.subtle-hint, .public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra, .public-layout .public-account-header__tabs__tabs .counter, .load-more, .account__disclaimer, .hashtag-bar { color: var(--textMuted) } .hashtag-bar span, .hashtag-bar span a, .hashtag-bar a { color: inherit; } /*------------------------------------------------------------------------------ * BACKGROUND COLOR PALETTE ===================================================== *------------------------------------------------------------------------------/ /*---------------------- base background and text ----------------------*/ /* background and drawer */ .ui, /*.drawer__tab,*/ .tabs-bar, .search-results__section h5, .account__section-headline, .account__section-headline button, .notification__filter-bar, .notification__filter-bar button, /* DMs */ .status.status-direct, .focusable:focus .status.status-direct, .status-direct .status__content, .notification-favourite .status.status-direct, /* column preferences */ .column-settings__section, .column-header__collapsible, .column-header__collapsible-inner, .column-header__button.active, .setting-meta__label, .setting-toggle__label, .column-subheading, .content-wrapper, .media-spoiler, .video-player__spoiler, .video-player__spoiler.active:active, .video-player__spoiler.active:focus, .react-toggle-track, /* in reply to */ .reply-indicator, .reply-indicator__display-name, .reply-indicator__content, .reply-indicator__cancel .icon-button.inverted, /*.reply-indicator__content .status__content__spoiler-link,*/ /* cw show more */ .status__content .status__content__spoiler-link, .compose__action-bar .icon-button, /* settings page */ .admin-wrapper .sidebar-wrapper, .admin-wrapper .sidebar ul a, .admin-wrapper .sidebar ul a.selected, .admin-wrapper .sidebar ul ul a, .admin-wrapper .content h2, .admin-wrapper .content h6, .simple_form .input.with_label .label_input>label, .simple_form .input.with_label.boolean .label_input>label, .simple_form .input.with_block_label>label, .simple_form .check_boxes .checkbox label, .simple_form .input.radio_buttons .radio label, .label_input, .input input, /* modals */ .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .confirmation-modal__action-bar .confirmation-modal__cancel-button, .confirmation-modal__action-bar .mute-modal__cancel-button, .mute-modal__action-bar .confirmation-modal__cancel-button, .mute-modal__action-bar .mute-modal__cancel-button, .error-column, .regeneration-indicator, .empty-column-indicator, .report-modal__comment .setting-text, /* opengraph previews */ .status-card__content, .status-card__description, .status-card__image, .button:disabled, /* public pages */ body, body.lighter, .button.button-alternative, .button.button-alternative-2, .landing-page__call-to-action, .public-layout .header .nav-button, .nothing-here { background: var(--bgPage); color: var(--textPage) } /*-------------------- override for bold text --------------------*/ /* strong elements */ .navigation-bar strong, .status-card__title, .status-direct .display-name strong, .reply-indicator__display-name strong, .admin-wrapper .content>p strong, .simple_form strong, .regeneration-indicator__label strong, .account__section-headline a.active, /* public pages */ .information-board__section, .information-board__section span:last-child, .endorsements-widget .display-name__html, .endorsements-widget h4, .pagination .page, .pagination .gap, .pagination .newer, .pagination .older, .pagination a { color: var(--textPageBold) } /*--------------------- override for muted text ---------------------*/ /* de-emphasized elements */ .navigation-bar, .getting-started, .getting-started p, .column-subheading, .account__section-headline a, .status-direct .icon-button, .status-direct .display-name, .status-direct .status__relative-time, .status-direct .status__action-bar__counter__label, .status-direct.muted .status__content p, .status-direct.muted .status__content a, .status-direct.muted .display-name strong, .notification-favourite .status.status-direct .icon-button.disabled, .simple_form p.hint, .simple_form span.hint, .admin-wrapper .content .muted-hint, .admin-wrapper .content>p, .status-card__host, .button:disabled, .loading-indicator, /* public pages */ .endorsements-widget .display-name__account, .public-layout .footer h4, .public-layout .footer ul a, .public-layout .footer ul li, .public-layout .footer .grid .column-2 h4 a, .public-layout .header .nav-button, /* log in, sign up, forgot passwd */ .form-footer a, .lighter .simple_form p.hint.subtle-hint { color: var(--textPageMuted) } .status__info { align-items: center; cursor: pointer; display: flex; font-size: 15px; gap: 10px; justify-content: space-between; padding-bottom: 10px; } .status__relative-time { color: #606984; display: block; flex: 0 0 auto; font-size: 15px; height: 40px; line-height: 22px; order: 2; } .status__info .status__display-name { align-items: center; display: flex; font-size: 15px; gap: 10px; line-height: 22px; max-width: 100%; overflow: hidden; } .reply-indicator__content a.unhandled-link, .status__content a.unhandled-link { color: var(--accent); } .reply-indicator__content p, .status__content p { white-space: pre-wrap; } .reply-indicator__content, .status__content { word-wrap: break-word; color: #fff; font-size: 15px; font-weight: 400; line-height: 22px; } .status__content--with-action { cursor: pointer; } .status { cursor: auto; } a.unhandled-link { color: var(--accent); } /*------------------------------------------------------------------------------ * HIGHLIGHTS COLOR PALETTE ===================================================== *------------------------------------------------------------------------------/ /*------------------ headers and warnings ------------------*/ /* columns view */ .column-header, .column-header__button, .column-header__back-button, .column-header__button:hover, .column-header__back-button:hover, .column-back-button, .column-header>.column-header__back-button, .column-header.active .column-header__icon, .search-results__header, .keyboard-shortcuts kbd, .compose-form__warning, .compose-form .compose-form__warning, .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track, .report-modal__target, .media-modal__close.icon-button, /* settings pages */ .list-editor h4, .admin-wrapper .content h4, .admin-wrapper .sidebar ul ul a.selected, .flash-message, .flash-message.notice, .column-inline-form, .column-inline-form .icon-button, .simple_form .warning, .table-form .warning, .pagination .current, .account-role { background: var(--bgHead); color: var(--textHead) } /*-------------- accented buttons --------------*/ /* primary buttons */ .button, .button:active, .button:focus, .button:hover, .icon-button.overlayed:hover, .floating-action-button, .simple_form button, .simple_form button:active, .simple_form button:focus, .simple_form button:hover, .simple_form .button, .simple_form .button:active, .simple_form .button:focus, .simple_form .button:hover, .simple_form .block-button, .simple_form .block-button:active, .simple_form .block-button:focus, .simple_form .block-button:hover, .button.button-alternative:hover, .button.button-alternative-2:hover, .column-link:hover, .getting-started a.column-link:hover, .column-header__button:hover, .column-header__button.active:hover, .column-header__back-button:hover, .column-back-button:hover, .drawer__header a:hover, .react-toggle--checked .react-toggle-track, .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track, .privacy-dropdown.active .privacy-dropdown__value.active, .privacy-dropdown__option:hover, .privacy-dropdown__option.active, .privacy-dropdown__option.active:hover, .admin-wrapper .sidebar ul a:hover, .admin-wrapper .sidebar ul ul a.selected:hover, .reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover, .load-more:hover, /* modals */ .confirmation-modal__action-bar .confirmation-modal__cancel-button:active, .confirmation-modal__action-bar .confirmation-modal__cancel-button:focus, .confirmation-modal__action-bar .confirmation-modal__cancel-button:hover, .confirmation-modal__action-bar .mute-modal__cancel-button:active, .confirmation-modal__action-bar .mute-modal__cancel-button:focus, .confirmation-modal__action-bar .mute-modal__cancel-button:hover, .mute-modal__action-bar .confirmation-modal__cancel-button:active, .mute-modal__action-bar .confirmation-modal__cancel-button:focus, .mute-modal__action-bar .confirmation-modal__cancel-button:hover, .mute-modal__action-bar .mute-modal__cancel-button:active, .mute-modal__action-bar .mute-modal__cancel-button:focus, .mute-modal__action-bar .mute-modal__cancel-button:hover, .upload-progress__tracker, /* public pages */ .public-layout .header .nav-button:hover, .button.button-secondary:hover, /* settings pages */ .pagination .page.current:hover, /* video player ui */ .video-player__seek__buffer, .video-player__seek__progress, .video-player__volume__current, .video-player__volume__handle { background: var(--accent); color: var(--accentText); } /*------------ accented links ------------*/ /* status links */ .status__content a, .status__content a:not(.mention), .getting-started a, .getting-started p a, .reply-indicator__content a, .reply-indicator__content a:not(.mention), .reply-indicator__cancel .icon-button.inverted:hover, .status__content__read-more-button, .icon-button.active, .icon-button:focus, .icon-button:hover, .search__icon .fa:hover, .notification-follow .account .icon-button:hover, .notification__message .fa, .notification__display-name:hover, .admin-wrapper .content .muted-hint a, .table a, a.table-action-link:hover, button.table-action-link:hover, .media-spoiler:active, .media-spoiler:focus, .media-spoiler:hover, .video-player__spoiler.active:hover, .column-header__setting-btn:hover, .column-inline-form .icon-button:hover, /* post options */ .compose-form .text-icon-button:hover, .text-icon-button.active, .drawer__inner .icon-button:hover, .icon-button.inverted.active.disabled, .navigation-bar__profile-edit:hover, .navigation-bar__profile-account:hover, .account__action-bar-dropdown .icon-button:hover, .account__section-headline a:hover, .compose-form .compose-form__warning a, /* modals */ .list-editor .account .icon-button:hover, .list-editor .account .icon-button:active, .list-editor .account .icon-button:focus, .report-modal__statuses .status__content a .media-modal__close.icon-button:hover, .media-modal__close.icon-button:focus, /* public pages */ .landing-page__short-description p a, .landing-page #mastodon-timeline p a, .simple_form p.hint.subtle-hint a, .contact-widget__mail a, .public-layout .footer ul a:hover, .public-layout .footer .grid .column-2 h4 a:hover, .public-layout .public-account-bio .account__header__fields a, .form-footer a:hover, /* settings pages */ .pagination a:hover, .pagination .newer:hover, .pagination .older:hover, /* mobile elements */ .tabs-bar__link.active { color: var(--accent) } /*------------------------------------------------------------------------------ * FIXES * * Due to the extensive level of recolors, some elements will need slight fixes. * This section contains any overrides that are mostly necessary to beautify or * otherwise make elements look like they belong in the new palette. *------------------------------------------------------------------------------/ @media screen and (max-width: 600px) { .public-layout .public-account-header__bar {background: var(--bg)} .public-layout .public-account-header__tabs__name h1, .public-layout .public-account-header__extra__links a strong {color: var(--textBold)} .public-layout .public-account-header__extra__links a, .public-layout .public-account-header__tabs__name h1 small {color: var(--textMuted)} } @media screen and (max-width: 415px) { .public-layout .card-grid>div .card__bar {background: var(--bg)} .public-layout .card-grid>div .card__bar:active, .public-layout .card-grid>div .card__bar:focus, .public-layout .card-grid>div .card__bar:hover {background: var(--bgPage)} } /* transparent drawer / gs columns */ .getting-started, .getting-started__wrapper, /*.drawer__header,*/ .flex-spacer, .focusable:focus, .drawer__inner.darker {background: none} /* make search results look better*/ .search__icon .fa.active {opacity: 1} .drawer__inner {height: auto;} /* triangle tab popout (from toots/replies/media) */ .account__section-headline a.active:after, .account__section-headline a.active:before, .community-timeline__section-headline a.active:after, .community-timeline__section-headline a.active:before, .public-timeline__section-headline a.active:after, .public-timeline__section-headline a.active:before { border-color: transparent transparent var(--bg) } /* color trending taglines with accent color */ .trends__item__sparkline path {stroke: var(--accent) !important} /* hover feedback for buttons //todo: make this look better */ .button:hover, .block-button:hover, .simple_form button:hover, .compose-form__publish button:hover {text-decoration: underline} /* fixes for 70ch maxwidths */ .landing-page__footer p {margin: 0 auto} /* remove black artefacts from settings menu */ .admin-wrapper .sidebar ul, .admin-wrapper .sidebar ul a, .admin-wrapper .sidebar ul a.selected, .admin-wrapper .sidebar ul ul {border-radius: 0} /* make tables in settings look consistent //todo:cleanup */ .admin-wrapper .content h4 {padding: 8px; font-weight: 700; font-size: 16px} .table thead th, .table thead td {font-family: "Arial Black"} .table td:first-child, .table>tbody>tr:nth-child(odd)>td:first-child {background: rgba(0,0,0,0.5); color: #ddd} .column-inline-form label input {padding: 6px} /*--------------- public page fixes ---------------*/ /* colorize logo */ .landing-page__logo img { filter: sepia(100%) hue-rotate(160deg) saturate(400%) brightness(40%); mix-blend-mode: normal } /* add shadow to help with visibility on light bg */ .brand img {filter: drop-shadow(1px 1px 1px black)} /* footer logo recolor */ .public-layout .footer .brand svg path {fill: var(--textPageMuted)} .public-layout .footer .brand:hover svg path {fill: var(--accent)} /* cleanup stray background elements */ .endorsements-widget .account, .public-layout .header, .public-layout .public-account-header__bar .avatar img, .simple_form .input-with-append .append::after, .public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover {background: none} /* flatten toots view */ .activity-stream, .activity-stream .entry:first-child .status, .activity-stream .entry:first-child .detailed-status, .activity-stream .entry:first-child .load-more, .activity-stream .entry:last-child .status, .activity-stream .entry:last-child .detailed-status, .activity-stream .entry:last-child .load-more, .public-layout .header, .nothing-here {box-shadow: none; border-radius: 0px} /* toots, following, followers */ .public-layout .public-account-header__tabs__tabs .counter::after {border-bottom: 4px solid var(--textMuted)} .public-layout .public-account-header__tabs__tabs .counter.active::after, .public-layout .public-account-header__tabs__tabs .counter:hover::after {border-bottom: 4px solid var(--accent)} /* make profile field keys bold */ .account__header__fields dt {font-weight: 700} /* improve avatar and profile-card look */ .card__bar .avatar img {background: none} .card__img {background: rgba(0,0,0,0.5)} /*--------------- deal with borders ---------------*/ /* remove most borders */ .status-card, .setting-text, .flash-message.notice, .account__moved-note, .account__header__fields dl, .account__header .account__header__fields dl, .account__section-headline, .notification__filter-bar, .search-results__section h5, .public-layout .public-account-header__bar .avatar img, .public-layout .public-account-header__tabs__tabs .counter {border: none} /* recolor some other borders */ .account, .status, .status__wrapper--filtered, .load-gap, .loading-indicator__figure, .button.button-secondary, .account__header__fields, .account__header__fields dl:last-child, .account__action-bar, .account__action-bar__tab, .account__disclaimer, .admin-wrapper .content h4 {border-color: var(--textPageMuted) !important} /* active tabs */ .account__action-bar__tab {border-bottom: 0px solid transparent} .account__action-bar__tab.active, .tabs-bar__link.active {border-bottom-color: var(--accent) !important} /* fix detailed status borders */ .detailed-status__action-bar {border-color: transparent transparent var(--bgPage) transparent !important} /* domain blocks and report modal */ .domain, .report-modal__container, .report-modal__comment, .report-modal__comment:active, .report-modal__comment:focus, .report-modal__comment .setting-text, .status-check-box {border-color: var(--bgPage)} .domain .domain__domain-name {background: transparent} /*------------------------------------------------------------------------------ * ADDITIONS AND MODS * * Tweaks and redesigns that improve the look of the overall style. * These may be enabled or disabled, but are recommended to enable. * They may also be extensions, but not "miscellaneous" enough. *------------------------------------------------------------------------------/ /* * Add a line break between display name and account handle: * - this allows user/display names to expand more. */ .display-name__html {display: block;} /* * Always show full name and handle: * - this removes the `...` and allows text to overflow past the column. * - this can look worse, but it can also prevent having to mouse over * to see the full name or handle. */ /* * Rounded avatars: * - adjust the border radius around all avatar elements. * - default override is 50% (i.e. turn squares into circles), * but you can set it to whatever you want. */ .card .avatar img, .activity-stream .status.light .status__avatar img, .account__avatar, .account__avatar img, .account__avatar-overlay-base, .account__avatar-overlay-overlay { border-radius: 50%; width: 46px; height: 46px; } .u-photo { width: 46px; height: 46px; } .logo, .logo--icon { width: 46px; height: 46px; } /* * Fade out faved/boosted toots in notifications: * - for "x favourited your toot" / "x boosted your toot", * - make the faved/boosted toot half-transparent. */ .status.muted {opacity: 0.5} /* * Collapse fave/boost notifications * - limits display to just a few lines (~3), so you can at least identify it * - hides the display name, because you already know you posted it * - tighter margins, remove space between CW and content * - hides the buttons, but you can expand a status to interact with it */ .notification-favourite .status, .notification-reblog .status { max-height: 4em; overflow: hidden; } .notification-favourite .display-name, .notification-reblog .display-name { display: none; } .notification-favourite .status__content, .notification-reblog .status__content { margin-top: -4px; } .notification-favourite .status__content p, .notification-reblog .status__content p { margin-bottom: 0px; } .notification-favourite .status__action-bar, .notification-reblog .status__action-bar { display: none; } /* * Release elephant friend from their confines: * - elephant friend will now hang out in the corner of your browser, * instead of being trapped in the drawer. */ .drawer__inner, .drawer__inner__mastodon { background: none; z-index: 0 } .drawer__inner__mastodon > img { position: fixed; bottom: 0; left: 0; height: 180px; z-index: -1 } .compose-form {z-index: 1} .drawer__inner {height: 100%} /* firefox bug highlights drawer text on click */ /* * Make "getting started" column height consistent with all other columns: * - puts the footer back at the bottom of the page, instead of floating. */ .getting-started { height: 100%; display: flex; flex-flow: column; justify-content: space-between } /* * Remove the checker-board background from the media modal: * - this makes transparent images actually transparent */ .media-modal canvas, .media-modal img {background: none} /* * Fix glowing elements when there are new toots to be fetched * - this is technically a fix, but it hasn't been fully fixed. * //todo: try to find a way to make this look good against bgHead */ .column-header.active .column-header__icon { text-shadow: 0 0 10px var(--accent); } .column-header.active { box-shadow: 0 0 0; } .column-header__wrapper.active:before { background: radial-gradient(ellipse, var(--accent) 0, rgba(0,0,0,0) 60%); } /* * Fix highlights on unread DM conversations * - new conversations view in 2.6.0 * - 2.6.0 adds highlight, :not(.read) has its own bg * - instead, let's add a dot next to the timestamp */ .status.status-direct:not(.read) {background: var(--bgPage);} .column[aria-label="Direct messages"] .status.status-direct:not(.read) .status__relative-time:before { content: "⏺ "; font-size: 1em; color: var(--accent); } /* ------------------------------------------------------------ various tweaks related to making account view look a bit better -------------------------------------------------------------*/ /* profile field keys //todo */ .account__header .account__header__fields dd, .public-account-bio .account__header__fields dd {background: var(--bg); color: var(--text)} /* profile field values //todo */ .account__header .account__header__fields dt, .public-account-bio .account__header__fields dt {background: var(--bg); color: var(--text)} /* verified links */ .account__header .account__header__fields dd.verified {background: var(--bg)} /* bold profile field keys */ .account__header .account__header__fields dt {font-weight: 700} /* view profile - shadow overlay style */ .account__header {background: var(--bgHead)} .account__header>div {background: rgba(0,0,0,0.5)} .account__header .account__header__display-name {color: #fff} .account__header .account__header__content {color: #eee} .account__header .account__header__content a, .account__header__fields a {color: var(--accent)} /* padded background around @handle */ .account__header .account__header__username { display: inline-block; padding: 7px 7px 8px 7px; border-radius: 8px; margin-bottom: 0px; background: rgba(0,0,0,0.6); color: #ccc; } /* adjust margins to account for padding */ .account__header__content p {margin-bottom: 16px;} /* floating follow/edit profile button */ .account--action-button {background: rgba(255,255,255,0.5); padding: 0.5em; border-radius: 50%;} .account--action-button .icon-button, .account--action-button .icon-button.active {color: #fff} .account--action-button:hover {background: var(--accent)} .account--action-button:hover .icon-button {color: var(--accentText)} /* account page tab underline */ .card .counter.active:after {border-bottom: 4px solid var(--accent)} /* make footer logo visible against light bg */ .footer .powered-by a { filter: drop-shadow( 0px 0px 2px rgba(0,0,0,0.6) ) } /* Hide buttons that can't be clicked - columns on /about and tag pages have buttons that don't work. - so, this snippet hides those nonworking buttons to save space - and to avoid confusion. - unboostable buttons are made transparent on hover instead. */ .status__action-bar .icon-button.disabled:hover, .notification-favourite .status.status-direct .icon-button.disabled:hover { color: transparent !important } #mastodon-timeline .status__action-bar {display: none} /*----------------------- material design overrides -----------------------*/ /* turn statuses into cards */ .drawer__inner.darker {filter: drop-shadow(0 0 2px black); background: transparent} .status { box-shadow: 0px 0px 2px black; background: var(--bg); margin: 8px; border-radius: 2px; border: 0 } .status__wrapper--filtered {border: none} .detailed-status__wrapper {margin: 8px;} /*might look weird in older versions pre-2.6?*/ /* recolors */ .column>.scrollable, .landing-page #mastodon-timeline, .activity-stream .entry {background: none !important} .account-timeline__header, .account {background: var(--bg)} .notification .account, .load-more {background: var(--bgPage)} .status__prepend, .notification__message, .status__prepend .status__display-name strong, .keyboard-shortcuts {color: var(--textPage) !important} .notification-follow .display-name__html {color: var(--textPageBold)} .notification-follow .display-name__account, .notification-follow .account .icon-button, .status__wrapper--filtered, .load-more {color: var(--textPageMuted)} /* triangle tab indicator */ .account__section-headline a.active:after, .account__section-headline a.active:before, .community-timeline__section-headline a.active:after, .community-timeline__section-headline a.active:before, .public-timeline__section-headline a.active:after, .public-timeline__section-headline a.active:before, .notification__filter-bar button.active::before, .notification__filter-bar button.active::after { border-color: transparent transparent var(--bgHead) } /* fix rounding on end toots in stream */ .activity-stream .entry:first-child .status, .activity-stream .entry:last-child .status {border-radius: 2px} /* remove borders from account view */ .account, .account__header__fields, .account__header__fields dl:last-child, .account__action-bar, .account__action-bar__tab, .account__disclaimer {border: none} /*------------------------------------------------------------------------------ * RECOLOR STATUS ACTIONS * * This tweak gets its own section because it's pretty messy and long. * * Replies, follows, faves, dropdown menu, and share can easily be themed, * but I can't figure out how to make them look good against the palette. * Manual color selection may be required, if these colors don't fit well. * * Recoloring boosts is another nightmare altogether, because of improper * SVG embedding in the background-image rather than directly in HTML. * This leads to two options: * * 1) attempt to use filter() to manually add sepia tones and hue-shift * - complicated and imprecise adjustments of filter() * - cannot use CSS variables in url()s (as in background-image) * + however, it does preserve the SVG boosting animation * * 2) replace the background-image with a mask-image * + less complicated; override background-image with color * + can apply CSS variable colors from palette easily * - requires extremely long rule to add mask-image * - breaks boosting animation * * I have chosen option 2. ------------------------------------------------------------------------------*/ /* add shadow on hover and active states */ .status__action-bar .icon-button:hover, .status__action-bar .icon-button:active, .status__action-bar .icon-button.active, .detailed-status__action-bar .icon-button:hover, .detailed-status__action-bar .icon-button:active, .detailed-status__action-bar .icon-button.active {filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.6))} /* replies and follows */ .status__action-bar-button.icon-button:nth-child(1):hover, .status__action-bar-button.icon-button:nth-child(1):active, .status__action-bar-button.icon-button:nth-child(1).active, .status__action-bar-button.icon-button:nth-child(1):focus, .detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:hover, .detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:active, .detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button.active, .detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:focus, .notification__message .fa.fa-user-plus, .account .icon-button:active, .account .icon-button.active, .account .icon-button:focus, .account .icon-button:hover {color: #0bf;} /* favourites */ .status__action-bar-button.icon-button:nth-child(3):hover, .status__action-bar-button.icon-button:nth-child(3):active, .status__action-bar-button.icon-button:nth-child(3).active, .status__action-bar-button.icon-button:nth-child(3):focus, .detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:hover, .detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:active, .detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button.active, .detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:focus, .notification__favourite-icon-wrapper .star-icon {color: #f90;} /* menu */ .status__action-bar-dropdown .icon-button:hover, .status__action-bar-dropdown .icon-button:active, .status__action-bar-dropdown .icon-button.active, .status__action-bar-dropdown .icon-button.focus, .detailed-status__action-bar-dropdown .icon-button:hover, .detailed-status__action-bar-dropdown .icon-button:active, .detailed-status__action-bar-dropdown .icon-button.active, .detailed-status__action-bar-dropdown .icon-button:focus {color: #90f;} /* share */ .icon-button:hover .fa-share-alt {color: #f09;} /* boosts */ .notification__message .fa.fa-retweet, .icon-button:hover .fa-retweet {color: #0d9;} /* fully recolor boosts (while breaking animation) */ button.icon-button:hover i.fa-retweet, button.icon-button.active i.fa-retweet {background: #0d9 !important;} .no-reduce-motion button.icon-button i.fa-retweet, button.icon-button i.fa-retweet, button.icon-button:hover i.fa-retweet, button.icon-button.active i.fa-retweet { background: var(--textMuted); mask: url("data:image/svg+xml;utf8,"); -webkit-mask-image: url("data:image/svg+xml;utf8,"); }