/*---------
MISC TWEAKS
---------*/
/* no borders */
* {border: 0 !important}
/* custom font */
body {
font-family: Roboto Condensed, Arial, sans-serif;
}
/*------------------
DEFINE COLOR PALETTE
------------------*/
/* midnight blue */
/* :root {
--bgPage: #051119;
--bg: #123;
--bgHead: #357;
--text: #e0e8f0;
--textBold: #fff;
--textMuted: #808890;
--textHead: var(--textBold);
--accent: #09f;
} */
/* clean slate */
/*
:root {
--bgPage: #ddd;
--bg: #fff;
--bgHead: #333;
--text: #123;
--textBold: #000;
--textMuted: #666;
--textHead: #fff;
--accent: #09f;
}
*/
/* flamingo */
:root {
--bgPage: #111;
--bg: #222;
--bgHead: #333;
--text: #eee;
--textBold: #fff;
--textMuted: #888;
--textHead: var(--textBold);
--accent: #F4511E;
}
/* droid */
/*
:root {
--bgPage: #111;
--bg: #222;
--bgHead: #333;
--text: #ddd;
--textBold: #fff;
--textMuted: #777;
--textHead: #fff;
--accent: #a4c639
}
*/
/*----------
TEXT STYLING
----------*/
body,
.status__content__spoiler-link,
.drawer__tab,
.search-results__section h5 span, .search-results__header,
.column-link,
.dropdown-menu, .dropdown-menu__item a,
.status__content__spoiler-link:hover,
.actions-modal, .boost-modal, .confirmation-modal, .mute-modal, .report-modal,
.embed-modal, .error-modal, .onboarding-modal,
.report-modal__comment .setting-text,
.actions-modal ul li:not(:empty) a,
.upload-progress,
.report-modal__comment .setting-toggle__label {
color: var(--text)
}
.account__display-name strong, .notification__display-name:hover,
.status__display-name strong, .detailed-status__display-name strong,
.account__section-headline a.active,
.account__action-bar__tab strong, .navigation-bar strong,
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.compose-form .compose-form__modifiers,
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter,
.reply-indicator__display-name, .reply-indicator__content,
.privacy-dropdown__option, .privacy-dropdown__option strong,
.search-popout em,
.activity-stream .status.light .display-name strong,
.activity-stream-tabs a.active,
.activity-stream .status.light .status__content,
.regeneration-indicator__label strong,
.embed-modal h4, .status-card__title,
.account__section-headline a.active, .community-timeline__section-headline a.active, .public-timeline__section-headline a.active {
color: var(--textBold)
}
.notification__message, .status__prepend, .status__relative-time,
.muted .status__content a, .muted .status__content p,
.muted .status__display-name strong,
.status__prepend .status__display-name strong,
.status__display-name, .detailed-status__display-name,
.navigation-bar, .getting-started p,
.search__input, .search__icon .fa, .search-results__hashtag,
.search-popout, .search-popout h4,
.account .account__display-name, .account__section-headline a,
.account__action-bar__tab > span, .account__action-bar-dropdown .icon-button,
.icon-button.inverted, .text-icon-button, .icon-button,
.icon-button:active, .icon-button:focus, .icon-button:hover,
.icon-button.disabled, .status.status-direct .icon-button.disabled,
.empty-column-indicator, .error-column, .column-subheading,
.regeneration-indicator, .nothing-here, .account__disclaimer,
.attachment-list__list a, .attachment-list.compact .fa,
.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, .embed-modal .embed-modal__container .embed-modal__html,
.privacy-dropdown__option__content,
.activity-stream .status.light .display-name span, .activity-stream .pre-header,
.activity-stream .status.light .status__header .status__meta .status__relative-time,
.activity-stream .pre-header .status__display-name.muted strong,
.account__section-headline a, .community-timeline__section-headline a, .public-timeline__section-headline a,
.status-card__host
{
color: var(--textMuted)
}
.reply-indicator__content a,
.status__content a,
.search-results__hashtag:active,
.search-results__hashtag:focus,
.search-results__hashtag:hover,
.column-header__setting-btn:hover,
.column-header__back-button:hover,
.column-header.active .column-header__icon,
.account__action-bar-dropdown .icon-button.active,
.account__action-bar-dropdown .icon-button:hover,
.icon-button.inverted:active, .icon-button.inverted:focus, .icon-button.inverted:hover,
.text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover,
.compose-form .compose-form__warning a,
.account__header__fields a,
.getting-started p a, .getting-started a,
.activity-stream .status.light .status__content a, .activity-stream-tabs a,
.card .name small, .report-modal__statuses .status__content a
{
color: var(--accent)
}
.column-header, .column-back-button,
.column-header__button, .column-header__button:hover,
.column-header__button.active, .column-header__button.active:hover,
.column-header__collapsible, .column-header__back-button,
.column-header>.column-header__back-button,
.column-settings__section,
.setting-text, .setting-meta__label, .setting-toggle__label,
.setting-text:active, .setting-text:focus,
.status__content__spoiler-link,
.compose-form .compose-form__warning,
.embed-modal .embed-modal__container .embed-modal__html:focus,
.activity-stream .status.light .status__content a.status__content__spoiler-link {
color: var(--textHead)
}
.icon-button.disabled:hover {
color: var(--bg)
}
/*---------
BACKGROUNDS
---------*/
.search__input, .search__input:focus,
.search-popout, .search-results__section h5 span, .search-results__header,
.drawer__inner.darker, .drawer__header a:hover,
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.compose-form .compose-form__modifiers,
.privacy-dropdown__option,
.column>.scrollable,
.empty-column-indicator, .error-column, .column-link,
.detailed-status, .detailed-status__action-bar,
.activity-stream .entry, .activity-stream-tabs,
.regeneration-indicator,
.actions-modal, .boost-modal, .confirmation-modal, .mute-modal, .report-modal,
.embed-modal, .error-modal, .onboarding-modal,
.privacy-dropdown.active .privacy-dropdown__value, .account__action-bar {
background: var(--bg);
}
body, body.app-body, .status.status-direct,
.drawer__header, .tabs-bar,
.drawer__inner.backdrop,
.compose-form .compose-form__buttons-wrapper,
.reply-indicator, .list-editor,
.column-subheading, .focusable:focus,
.dropdown-menu, .dropdown-menu__item a,
.focusable:focus .detailed-status,
.focusable:focus .detailed-status__action-bar,
.accounts-grid, .account__moved-note,
.boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar,
.embed-modal .embed-modal__container .embed-modal__html,
.report-modal__comment .setting-text, .status-card,
.account__section-headline, .community-timeline__section-headline, .public-timeline__section-headline,
.flex-spacer, .getting-started, .getting-started__wrapper {
background: var(--bgPage)
}
.column-header,
.column-header__button,
.column-back-button,
.column-header__back-button,
.column-header__button.active,
.column-header__collapsible-inner,
.column-inline-form,
.compose-form__publish:hover .button,
.status__content .status__content__spoiler-link,
.list-editor h4,
.keyboard-shortcuts kbd,
.compose-form .compose-form__warning,
.embed-modal .embed-modal__container .embed-modal__html:focus,
.activity-stream .status.light .status__content a.status__content__spoiler-link,
.button, a.status-card:hover {
background: var(--bgHead);
}
.compose-form__publish .button,
.column-header__button:hover, .column-header__button.active:hover,
.column-link:hover, .column-back-button:hover,
.column-header>.column-header__back-button:hover,
.react-toggle--checked .react-toggle-track,
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track,
.status__content .status__content__spoiler-link:hover,
.activity-stream .status.light .status__content a.status__content__spoiler-link:hover,
.button:active, .button:focus, .button:hover,
.dropdown-menu__item a:active, .dropdown-menu__item a:focus, .dropdown-menu__item a:hover,
.floating-action-button
{
background: var(--accent)
}
.ui, .drawer__inner, .drawer__inner__mastodon {
background: transparent
}
.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)
}
/*----------------
ADDITIONS AND MODS
----------------*/
/*------------------------------
always show full name and handle
*/
.display-name {overflow: visible; white-space: normal;}
.account__avatar-wrapper {margin-left: 0px;}
/*line break between name and handle*/
.display-name__html {display: block;}
/*-----------------
circle profile pics
*/
.card .avatar img,
.activity-stream .status.light .status__avatar img,
.account__avatar,
.account__avatar-overlay-base,
.account__avatar-overlay-overlay
{border-radius: 20%}
/*-----------------------------------------
release elephant friend from their confines
*/
.drawer__inner__mastodon > img {
position: fixed;
bottom: 0;
left: 0;
height: 180px;
z-index: -1
}
/*--------------------------------------------------------------------
make "getting started" column height consistent with all other columns
*/
.getting-started__footer {margin-top: auto}
/*----------------------------------------------------------
make transparent images actually transparent in media modals
*/
.media-modal canvas, .media-modal img {background: none}
/*---------------------------------------------------------
fix glowing elements when there are new toots to be fetched
*/
.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%);}
/* --------------------------------------------
* various tweaks related to making account view
* look a bit better
*/
/* profile fields - styled separately because i'm not final on the transparent look */
.account__header .account__header__fields dt,
.account__header .account__header__fields dd
{background: rgba(0,0,0,0.5);}
.account__header .account__header__fields dd
{color: white;}
.account__header .account__header__fields dt
{color: var(--textMuted); font-weight: 700}
/* fix weird tiling issue due to new "fields" feature in 2.4.0 */
.account__header {background-size: cover !important;}
/* profile bio theming */
.account__header {background: var(--bgHead)}
.account__header>div {background: rgba(0,0,0,0.5)}
.account__header__content 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(0,0,0,0.5); padding: 0.5em; border-radius: 50%;}
.account--action-button .icon-button {color: #fff}
.account--action-button:hover {background: var(--accent)}
/* account page tab underline */
.card .counter.active:after {border-bottom: 4px solid var(--accent)}
/* account pages bio overlay */
.card .card__bio, .account__header__fields, .account__header__fields dt {background: rgba(0,0,0,0.5)}
/* -------------------------------
* toots in columns button recolor,
* but more complicated bc of
* boosts and inline svg
*/
.icon-button:active .fa-reply,
.icon-button:focus .fa-reply,
.icon-button:hover .fa-reply,
.icon-button:active .fa-reply-all,
.icon-button:focus .fa-reply-all,
.icon-button:hover .fa-reply-all,
.notification__message .fa,
.account__relationship .icon-button.active
{color: #09f}
.icon-button:active .fa-star,
.icon-button:focus .fa-star,
.icon-button:hover .fa-star,
.star-icon.active,
.notification__favourite-icon-wrapper .star-icon
{color: #f90}
.icon-button:active .fa-ellipsis-h,
.icon-button:focus .fa-ellipsis-h,
.icon-button:hover .fa-ellipsis-h
{color: #f09}
button.icon-button i.fa-retweet
{background: var(--textMuted)}
button.icon-button:hover i.fa-retweet,
button.icon-button.active i.fa-retweet
{background: #0f9}
button.icon-button i.fa-retweet,
button.icon-button:hover i.fa-retweet,
button.icon-button.active i.fa-retweet
{
mask: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}