„custom.css“ hinzufügen
parent
4233bf85ed
commit
d2f5fa1f3a
|
|
@ -0,0 +1,332 @@
|
|||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue