Skip to content

Instantly share code, notes, and snippets.

@scottkellum
Last active March 7, 2019 15:18
Show Gist options
  • Save scottkellum/63c82c7c67b59f5ad80dca4377e71500 to your computer and use it in GitHub Desktop.
Save scottkellum/63c82c7c67b59f5ad80dca4377e71500 to your computer and use it in GitHub Desktop.
/*
SETTINGS
All theme settings can be modified here.
You shouldn’t need to dive into any of the other sections
unless you plan on doing things beyond changing colors and fonts. */
body {
--font: sans-serif;
--toot-font: var(--font); /* Modify if different from the interface font */
--actionable: #ff945e;
--actionable-hover: #ffac93;
--text: #000;
--text-secondary: rgba(0,0,0,.6);
--background: #fff;
--background-alt: #f7f9f9;
--body: #eee; /* image URLs and gradints can also be placed here */
}
/* FONTS */
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 {
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 {
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);
}
.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 {
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 {
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment