Created
November 12, 2022 09:04
-
-
Save whoisryosuke/3156c411041f94ac810f56bd1e37eee3 to your computer and use it in GitHub Desktop.
Mastodon Theme - Dark Chakra UI - Based on Mastodon FlatCSS (https://github.com/trwnh/mastomods). Install using Stylus Chrome Extension
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* OK, now back to business... the rest of this code applies only to the instance. | |
*/ | |
/*------------------------------------------------------------------------------ | |
* 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(--bg) var(--bgPage); | |
} | |
/*------------------------------------------------------------------------------ | |
* 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: #171923; | |
--text: #d0d8e0; | |
--textBold: #fff; | |
--textMuted: #808890; | |
--bgPage: #0f1017; | |
--textPage: var(--text); | |
--textPageBold: var(--textBold); | |
--textPageMuted: var(--textMuted); | |
--bgHead: #1A202C; | |
--textHead: var(--textBold); | |
--accent: #09f; | |
--accentText: var(--textBold); | |
} | |
/*------------------------------------------------------------------------------ | |
* 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, | |
/* cw */ | |
.compose-form .autosuggest-textarea__textarea, | |
/* post */ | |
.compose-form .compose-form__modifiers, | |
/* image uploads */ | |
.compose-form .compose-form__buttons-wrapper, | |
/* buttons */ | |
/* 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 { | |
color: var(--textMuted) | |
} | |
/*------------------------------------------------------------------------------ | |
* 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) | |
} | |
/*------------------------------------------------------------------------------ | |
* 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) | |
} | |
.column-header { | |
border-radius: 8px 8px 0 0; | |
} | |
.search__input { | |
border-radius:8px; | |
} | |
/*-------------- | |
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-overlay-base, | |
.account__avatar-overlay-overlay { | |
border-radius: 50% | |
} | |
/* | |
* 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 1.4px rgba(0, 0, 0, 0.035), | |
0px 0px 11px rgba(0, 0, 0, 0.07) | |
; | |
background: var(--bg); | |
margin: 8px; | |
border-radius: 8px; | |
border: 0 | |
} | |
.drawer__inner__mastodon img { | |
display:none; | |
} | |
.drawer__inner__mastodon { | |
background-image: url('https://www.clipartmax.com/png/full/280-2807805_final-fantasy-viii-final-fantasy-viii.png'); | |
background-size: 80% auto; | |
background-repeat: no-repeat; | |
background-position: bottom; | |
} | |
.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,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23606984' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23ffffff' stroke-width='0'/></svg>"); | |
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23606984' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23ffffff' stroke-width='0'/></svg>"); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* I had to place these outside of the main style because | |
* userstyles.org doesn't support @media queries in Chrome | |
* due to the way they convert @document queries. | |
* | |
* https://forum.userstyles.org/discussion/44708/css3-media-query-unsupported | |
* | |
* The actual source places these under misc tweaks. | |
*/ | |
@media (min-width: 640px) { | |
/* wider columns */ | |
#mastodon .column, | |
#mastodon-timeline { | |
min-width: 60ch; | |
} | |
} | |
@media (min-width: 1600px) { | |
/* allow for wider layout on bigger screens */ | |
.landing-page .container { | |
max-width: 1600px | |
} | |
} | |
@media (max-width: 640px) { | |
/* move tab bar to bottom on mobile */ | |
.tabs-bar { | |
position: absolute; | |
bottom: 0; | |
z-index: 1; | |
width: 100%; | |
} | |
.react-swipeable-view-container { | |
height: calc(100% - 50px) | |
} | |
.floating-action-button { | |
margin-bottom: 50px | |
} | |
.tabs-bar { | |
background: var(--bgHead) !important; | |
color: var(--textHead) !important | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment