332 lines
8.1 KiB
CSS
332 lines
8.1 KiB
CSS
body {
|
|
--font: sans-serif;
|
|
--toot-font: var(--font);
|
|
--actionable: #4d8883;
|
|
--actionable-hover: #3a6864;
|
|
--text: #d3dfeb;
|
|
--text-secondary: #d3dfeb;
|
|
--background: #0c2a42;
|
|
--background-alt: #0a2439;
|
|
--input-text: #fff;
|
|
--input-field: #1e272e;
|
|
--body: #0c2a42;
|
|
}
|
|
|
|
body,
|
|
body.system-font {
|
|
font-family: var(--font);
|
|
}
|
|
|
|
.status__content {
|
|
font-family: var(--toot-font);
|
|
}
|
|
|
|
.reply-indicator__content p,
|
|
.status__content p {
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
|
|
/* PRIMARY COLORS */
|
|
|
|
a.status-link,
|
|
.public-layout .public-account-bio .account__header__fields a,
|
|
.reply-indicator__content a,
|
|
.status__content a,
|
|
.column-back-button,
|
|
.account__header .account__header__username,
|
|
.account__header__fields a,
|
|
.emoji-mart-anchor-selected,
|
|
.column-header>.column-header__back-button,
|
|
.column-link:hover,
|
|
.reply-indicator__content .status__content__spoiler-link,
|
|
.status__content .status__content__spoiler-link,
|
|
.text-icon-button.active,
|
|
.account__section-headline button,
|
|
.notification__filter-bar button {
|
|
color: var(--actionable);
|
|
}
|
|
|
|
a.status-link:focus,
|
|
a.status-link:hover,
|
|
.public-layout .public-account-bio .account__header__fields a:hover,
|
|
.reply-indicator__content a,
|
|
.status__content a:hover,
|
|
.column-back-button:hover,
|
|
.account__header .account__header__username:hover,
|
|
.account__header__fields a:hover,
|
|
.notification__display-name:hover,
|
|
.column-header>.column-header__back-button:hover,
|
|
.reply-indicator__content .status__content__spoiler-link,
|
|
.status__content .status__content__spoiler-link:hover,
|
|
{
|
|
color: var(--actionable-hover);
|
|
}
|
|
|
|
.button,
|
|
.admin-wrapper .sidebar ul ul a.selected,
|
|
.simple_form .block-button,
|
|
.simple_form .button,
|
|
.simple_form button,
|
|
.public-layout .public-account-header__tabs__tabs .counter.active:after,
|
|
.button.logo-button,
|
|
.emoji-mart-anchor-bar,
|
|
.privacy-dropdown__option.active,
|
|
.privacy-dropdown__option:hover,
|
|
.privacy-dropdown.active .privacy-dropdown__value.active,
|
|
{
|
|
background-color: var(--actionable);
|
|
}
|
|
|
|
.public-layout .public-account-header__tabs__tabs .counter.active:after {
|
|
border-bottom-color: var(--actionable);
|
|
}
|
|
|
|
.button:hover,
|
|
.admin-wrapper .sidebar ul ul a.selected:hover,
|
|
.simple_form .block-button:hover,
|
|
.simple_form .button:hover,
|
|
.simple_form button:hover,
|
|
.button.logo-button:hover {
|
|
background-color: var(--actionable-hover);
|
|
}
|
|
|
|
.simple_form input[type=email]:active,
|
|
.simple_form input[type=email]:focus,
|
|
.simple_form input[type=number]:active,
|
|
.simple_form input[type=number]:focus,
|
|
.simple_form input[type=password]:active,
|
|
.simple_form input[type=password]:focus,
|
|
.simple_form input[type=text]:active,
|
|
.simple_form input[type=text]:focus,
|
|
.simple_form textarea:active,
|
|
.simple_form textarea:focus {
|
|
border-bottom-color: var(--actionable-hover);
|
|
}
|
|
|
|
|
|
/* BASE COLORS */
|
|
|
|
body,
|
|
body.app-body,
|
|
.ui,
|
|
.tabs-bar__wrapper {
|
|
background: var(--body);
|
|
color: var(--text);
|
|
}
|
|
|
|
.public-layout .public-account-header__tabs__tabs .counter .counter-number,
|
|
.reply-indicator__content,
|
|
.status__content,
|
|
.muted .status__content a,
|
|
.muted .status__content p,
|
|
.muted .status__display-name strong,
|
|
.status__prepend,
|
|
.account__action-bar__tab strong,
|
|
.public-layout .public-account-header__tabs__name h1,
|
|
.public-layout .public-account-header__extra__links a strong {
|
|
color: var(--text);
|
|
text-shadow: none;
|
|
}
|
|
|
|
.public-layout .public-account-header__tabs__tabs .counter,
|
|
.account__section-headline a.active,
|
|
.account__section-headline a,
|
|
.account__display-name strong,
|
|
.status__display-name strong,
|
|
.status__display-name,
|
|
.status__relative-time,
|
|
.account__header__fields dt,
|
|
.account__header__fields dd,
|
|
.public-layout .public-account-bio .roles,
|
|
.public-layout .public-account-bio__extra,
|
|
.icon-button,
|
|
.public-layout .footer,
|
|
.public-layout .footer h4,
|
|
.public-layout .footer ul a,
|
|
.public-layout .footer .grid .column-2 h4 a,
|
|
.status__prepend .status__display-name strong,
|
|
.notification__message,
|
|
.account__action-bar__tab>span,
|
|
.account__header .account__header__fields dd,
|
|
.account__header .account__header__fields dt,
|
|
.navigation-bar strong,
|
|
.navigation-bar,
|
|
.detailed-status__display-name strong,
|
|
.detailed-status__display-name span,
|
|
.detailed-status__display-name strong,
|
|
.flex-spacer,
|
|
.getting-started,
|
|
.getting-started__wrapper,
|
|
.getting-started__footer p,
|
|
.getting-started__footer a,
|
|
.column-link,
|
|
.public-layout .public-account-header__tabs__name h1 small,
|
|
.public-layout .public-account-header__extra__links a {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.column-link--transparent.active {
|
|
text-decoration: underline;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.muted {
|
|
opacity: .6;
|
|
transition: all .2s ease-in-out;
|
|
}
|
|
|
|
.muted:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.drawer__inner,
|
|
.drawer__header,
|
|
.account__section-headline,
|
|
.column-header,
|
|
.column-header__button,
|
|
.column-header__button:hover,
|
|
.column-back-button,
|
|
.account__header,
|
|
.drawer__tab,
|
|
.drawer__tab:hover,
|
|
.account__header .account__header__fields,
|
|
.drawer__header a:hover,
|
|
.search__input,
|
|
.status.status-direct,
|
|
.notification.notification-follow.focusable,
|
|
.focusable:focus,
|
|
.detailed-status,
|
|
.detailed-status__action-bar,
|
|
.column-link__badge,
|
|
.column-subheading,
|
|
.column-link,
|
|
.column-link:hover,
|
|
.public-layout .public-account-header__bar,
|
|
.text-icon-button.active,
|
|
.account__section-headline button,
|
|
.notification__filter-bar button {
|
|
background: var(--background-alt);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.public-layout .header,
|
|
.public-layout .public-account-header__bar:before,
|
|
.activity-stream .entry,
|
|
.public-layout .public-account-bio,
|
|
.column>.scrollable,
|
|
.flex-spacer,
|
|
.getting-started,
|
|
.getting-started__wrapper,
|
|
.column-link,
|
|
.reply-indicator__content .status__content__spoiler-link,
|
|
.status__content .status__content__spoiler-link {
|
|
background: var(--background);
|
|
}
|
|
|
|
.public-layout .public-account-header__bar .avatar img {
|
|
border-color: var(--background);
|
|
}
|
|
|
|
.account__header__fields dt,
|
|
.account__header .account__header__fields dt,
|
|
.account__header>div,
|
|
.account__header .account__header__fields dd,
|
|
.empty-column-indicator,
|
|
.error-column,
|
|
.follow_requests-unlocked_explanation {
|
|
background: none;
|
|
}
|
|
|
|
.public-layout .public-account-header__tabs__tabs .counter,
|
|
.public-layout .public-account-header__tabs__tabs .counter:after,
|
|
.account__section-headline,
|
|
.account__action-bar__tab,
|
|
.account__action-bar,
|
|
.account__header .account__header__fields dl {
|
|
border-color: rgba(100, 100, 100, .1);
|
|
}
|
|
|
|
.public-layout .public-account-header__tabs__tabs .counter:hover:after,
|
|
.account__header__fields dl,
|
|
.status,
|
|
.account__header__fields,
|
|
.status.account__header .account__header__fields dl,
|
|
.account,
|
|
.detailed-status__action-bar,
|
|
.public-layout .public-account-header__extra .public-account-bio .account__header__fields {
|
|
border-color: rgba(100, 100, 100, .2);
|
|
}
|
|
|
|
.account__section-headline a.active:after,
|
|
.account__section-headline a.active:before {
|
|
border-color: transparent transparent rgba(100, 100, 100, .2);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--background-alt) !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0, 0, 0, .1) !important;
|
|
}
|
|
|
|
|
|
/* REMOVE ELEMENTS*/
|
|
|
|
.drawer__inner__mastodon,
|
|
.hero-widget,
|
|
.public-layout .header {
|
|
display: none;
|
|
}
|
|
|
|
.public-layout {
|
|
padding-top: 0;
|
|
}
|
|
|
|
|
|
/* ENHANCEMENTS */
|
|
|
|
.activity-stream {
|
|
overflow: visible;
|
|
}
|
|
|
|
.activity-stream .entry {
|
|
transition: all .2s ease-in-out;
|
|
}
|
|
|
|
@media screen and (min-width: 600px) {
|
|
.activity-stream .entry:hover {
|
|
transform: scale(1.025);
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
|
|
z-index: 100;
|
|
}
|
|
}
|
|
|
|
.compose-panel .compose-form__autosuggest-wrapper {
|
|
background: var(--background-alt);
|
|
}
|
|
|
|
.compose-panel .compose-form__autosuggest-wrapper,
|
|
.compose-form .compose-form__buttons-wrapper,
|
|
.compose-form .compose-form__modifiers {
|
|
background: var(--background-alt);
|
|
}
|
|
|
|
.compose-form .autosuggest-textarea__textarea,
|
|
.compose-form .spoiler-input__input,
|
|
.column-inline-form,
|
|
.column-header__back-button,
|
|
.column-header__collapsible-inner,
|
|
.column-header__button.active,
|
|
.column-header__button.active:hover,
|
|
.column-header__back-button {
|
|
background: var(--background-alt);
|
|
color: var(--input-text);
|
|
}
|
|
|
|
.tabs-bar {
|
|
background: none;
|
|
background-color: none;
|
|
} |