add theme linernotes_dark

app/javascript/styles/linernotes_dark.scss

@@ -0,0 +1,17 @@
+@import 'application';
+
+@import 'mfc/mastodonFlat';
+@import 'linernotes_dark/palette';
+@import 'linernotes_dark/overrides';
+
+@import 'mods/display_breakname';
+@import 'mods/display_fullname';
+@import 'mods/display_browserfont';
+@import 'mods/display_circleavatar';
+@import 'mods/display_collapsedinteractions';
+@import 'mods/display_fadedinteractions';
+@import 'mods/display_transparentmedia';
+@import 'mods/layout_1600px';
+@import 'mods/layout_elefriend';
+@import 'mods/layout_widercolumns';
+@import 'mods/layout_mobile_bottombar';

app/javascript/styles/linernotes_dark/overrides.scss

@@ -0,0 +1,15 @@
+/*---------
+MISC TWEAKS
+---------*/
+
+/* replace elephant friend with vinyl */
+.drawer__inner__mastodon {background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 488.2 488.2' style='enable-background:new 0 0 488.2 488.2;' xml:space='preserve'%3E%3Ccircle style='fill:%232A3332;' cx='244.1' cy='244.2' r='244'/%3E%3Cpath style='fill:%23121C1B;' d='M71.3,71.4c95.2-95.2,249.6-95.2,344.8,0s95.2,249.6,0,344.8'/%3E%3Ccircle style='fill:%23F74D19;' cx='244.1' cy='244.2' r='104.8'/%3E%3Cpath style='fill:%23FF7A17;' d='M139.3,244.2c0-57.6,47.2-104.8,104.8-104.8s104.8,47.2,104.8,104.8'/%3E%3Cpath style='fill:%23E0360E;' d='M263.3,229l-36.8,36.8l69.6,69.6c8-4.8,15.2-10.4,22.4-16.8c5.6-5.6,11.2-12.8,15.2-19.2L263.3,229z' /%3E%3Ccircle style='fill:%23D3DEE2;' cx='244.1' cy='244.2' r='29.6'/%3E%3Cpath style='fill:%23EBF0F2;' d='M244.1,273.8c-16,0-29.6-13.6-29.6-29.6s12.8-29.6,29.6-29.6'/%3E%3Cg%3E%3Cpath style='fill:%23726C6A;' d='M244.1,448.2c-112.8,0-204-91.2-204-204c0-4,3.2-8,8-8c4,0,8,3.2,8,8c-0.8,104,84,188.8,188,188.8 c4,0,8,3.2,8,8C252.1,445,248.1,448.2,244.1,448.2z'/%3E%3Cpath style='fill:%23726C6A;' d='M440.9,252.2c-4,0-8-3.2-8-8c0-104-84.8-188.8-188.8-188.8c-4,0-8-3.2-8-8c0-4,3.2-8,8-8 c112.8,0,204,92,204,204C448.1,248.2,444.9,252.2,440.9,252.2z'/%3E%3Cpath style='fill:%23726C6A;' d='M244.1,401c-86.4,0-156.8-70.4-156.8-156.8c0-4,3.2-8,8-8c4,0,8,3.2,8,8 c0,77.6,63.2,141.6,141.6,141.6c4,0,8,3.2,8,8C252.1,397.8,248.1,401,244.1,401z'/%3E%3Cpath style='fill:%23726C6A;' d='M392.9,252.2c-4,0-8-3.2-8-8c0-77.6-63.2-141.6-141.6-141.6c-4,0-8-3.2-8-8c0-4,3.2-8,8-8 c86.4,0,156.8,70.4,156.8,156.8C400.9,248.2,397.7,252.2,392.9,252.2z'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat bottom center / contain !important;}
+.drawer__inner__mastodon > img {display: none;}
+
+/* repeating musical notes in background */
+.columns-area {background: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='75.000000pt' height='100.000000pt' viewBox='0 0 456.000000 599.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate%280.000000,599.000000%29 scale%280.100000,-0.100000%29' fill='%2300000022' stroke='none'%3E%3Cpath d='M2261 5576 c-51 -226 -189 -845 -306 -1376 -254 -1146 -404 -1813 -410 -1819 -3 -2 -40 18 -82 45 -133 83 -256 142 -380 183 -149 50 -254 65 -397 58 -197 -9 -328 -66 -461 -201 -128 -129 -193 -275 -217 -484 -28 -253 33 -443 192 -603 108 -108 221 -176 365 -222 341 -107 706 -24 1038 237 154 120 139 89 213 442 35 170 78 370 94 444 285 1311 472 2165 475 2168 3 4 1446 -1016 1495 -1056 20 -17 20 -18 -134 -712 -198 -890 -315 -1402 -320 -1408 -3 -2 -45 20 -93 51 -397 248 -767 304 -1063 161 -113 -55 -232 -178 -294 -305 -52 -106 -71 -174 -87 -304 -11 -91 -6 -227 12 -300 48 -196 209 -374 433 -481 351 -166 755 -105 1122 169 37 29 92 74 122 102 l53 50 464 2009 463 2010 -24 18 c-214 169 -1623 1180 -1929 1385 -104 69 -213 137 -236 145 -13 5 -30 -60 -108 -406z m1037 -967 c406 -293 741 -536 746 -540 8 -8 -34 -235 -54 -292 -5 -15 -131 71 -760 519 -415 295 -757 538 -759 540 -2 2 11 74 29 159 26 121 37 155 48 150 7 -3 345 -244 750 -536z'/%3E%3C/g%3E%3C/svg%3E") space 0 0;}
+
+/* vignette on headers and dropdowns */
+.column-header {box-shadow: inset 0 0 8px 8px rgba(0,0,0,0.3);}
+.column-header__button {background: transparent !important;}
+.column-header__collapsible-inner {box-shadow: inset 0 0 10em 10em rgba(0,0,0,0.3);}

app/javascript/styles/linernotes_dark/palette.scss

@@ -0,0 +1,59 @@
+/*------------------------------------------------------------------------------
+* 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.
+------------------------------------------------------------------------------*/
+
+/* linernotes dark */
+
+:root {
+--bg: rgb(26,21,21);
+--text: rgb(225,225,225);
+--textBold: rgb(255,255,255);
+--textMuted: rgb(153,157,156);
+
+--bgPage: rgb(42,38,37);
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: rgb(255,122,23);
+--textHead: var(--textBold);
+--accent: rgb(3, 180, 0);
+--accentText: var(--textBold);
+}

app/javascript/styles/mfc/0-palette.css

@@ -0,0 +1,127 @@
+/*------------------------------------------------------------------------------
+* 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.
+------------------------------------------------------------------------------*/
+
+/* copy and paste the desired palette at the end of this section,
+* or you can delete the ones you don't want, or comment them out.
+*/
+
+
+/* Clean Slate:
+* white columns on a light-grey page, with dark grey headers and blue accent.
+*/
+:root {
+--bg: #fff;
+--text: #123;
+--textBold: #000;
+--textMuted: #666;
+
+--bgPage: #ddd;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #333;
+--textHead: #fff;
+--accent: #09f;
+--accentText: var(--textHead);
+}
+
+/* Droid/Flamingo:
+* dark neutral-grey page, with either Android Green or Flamingo accent.
+*/
+:root {
+--bg: #222;
+--text: #ddd;
+--textBold: #fff;
+--textMuted: #777;
+
+--bgPage: #111;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #333;
+--textHead: var(--textBold);
+--accent: #a4c639;  /* flamingo: #f09 */
+--accentText: var(--textHead);
+}
+
+/* Midnight Blue:
+* a dark blue palette based loosely on Twitter's night mode.
+*/
+:root {
+--bg: #123;
+--text: #d0d8e0;
+--textBold: #fff;
+--textMuted: #808890;
+
+--bgPage: #051119;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #357;
+--textHead: var(--textBold);
+--accent: #09f;
+--accentText: var(--textBold);
+}
+
+/*  
+* Testing palette:
+* light grey columns, slate grey background, turquoise headers, orange accents.
+* (a bit garish, but sufficiently "different" to catch any unthemed elements.)
+*/
+:root {
+--bg: #d9e1e8;
+--text: #234;
+--textBold: #000000;
+--textMuted: #579;
+
+--bgPage: #345;
+--textPage: #ddd;
+--textPageBold: #fff;
+--textPageMuted: #aaa;
+
+--bgHead: darkturquoise;
+--textHead: #345;
+--accent: #ff3e00;
+--accentText: var(--textPageBold);
+}

app/javascript/styles/mfc/1-foreground.css

@@ -0,0 +1,233 @@
+/*------------------------------------------------------------------------------
+* 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,
+        .getting-started__trends .trends__item__current,
+    .account__header__content,
+    .account__header__bio .account__header__content,
+    .account--panel,
+    .account__header__bar,
+/* new conversations */
+    .conversation--unread,
+    .conversation__content__names,
+/* 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 p,
+        .report-modal__comment .setting-toggle__label,
+    .list-editor,
+        .list-editor .drawer__inner,
+        .list-editor .drawer__inner.backdrop,
+    .account__moved-note,
+    .introduction__pager,
+    .introduction__text p,
+/* profile cards */
+    .card__bar,
+        .card>a:active .card__bar,
+        .card>a:focus .card__bar,
+        .card>a:hover .card__bar,
+    .directory__card__bar,
+        .directory__card__extra,
+        .accounts-table__count,
+        .directory__card__img,
+/* public pages */
+    #new_user .lead,
+    .landing .hero-widget__footer,
+        .landing .simple_form .user_agreement .label_input > label,
+        .landing .hero-widget h4,
+        .hero-widget__counter,
+        .landing .hero-widget__counter span,
+        .directory__tag > a, .directory__tag > div
+    .activity-stream .entry,
+    .landing-page #mastodon-timeline,
+        .landing-page #mastodon-timeline p,
+        .landing-page__forms,
+        .landing-page__information,
+        .landing-page li,
+        .landing-page p,
+        .directory__tag h4 small,
+        .directory__tag h4 .fa,
+        .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,
+        .directory__card__bar .display-name strong,
+        .account__header__tabs__name h1,
+        .account__header__extra__links a strong,
+    .account__action-bar__tab strong, /* profile counters */
+    .conversation__content__names a,
+    .conversation--unread .conversation__content__relative-time,
+/* public pages */
+    #new_user .lead strong,
+    .landing-page h3,
+        .landing-page h4,
+        .landing-page em,
+        .landing-page h5,
+        .landing-page h6,
+        .directory__tag h4,
+    .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,
+        .directory__card__bar .display-name span,
+        .accounts-table__count small,
+        .account__header__tabs__name h1 small,
+        .account__header__extra__links a,
+    .detailed-status__meta,
+    .status__relative-time,
+    .status__action-bar__counter__label,
+    .status__prepend,
+        .status__prepend .status__display-name strong,
+    .account__moved-note__message,
+    .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,
+    .search__input::placeholder,
+    .notification__message,
+    .muted .status__content,
+        .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,
+    .conversation__content__relative-time,
+/* 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)
+}
+
+/* fix for conversations font weight */
+.conversation--unread .conversation__content__info {font-weight: 400}
+
+/* fix for border colors */
+.account--panel,
+.account__header__bar,
+.account__header__bio .account__header__fields,
+.status,
+.detailed-status__action-bar,
+.account__header__fields dl,
+.account__header__bio .account__header__fields,
+.account,
+.directory__card__extra .account__header__content,
+.account__section-headline, .notification__filter-bar
+{border-color: var(--textMuted)}
+
+.account__section-headline a.active::after, .account__section-headline button.active::after, .notification__filter-bar a.active::after, .notification__filter-bar button.active::after
+{border-color: transparent transparent var(--bg)}

app/javascript/styles/mfc/2-background.css

@@ -0,0 +1,167 @@
+/*------------------------------------------------------------------------------
+* BACKGROUND COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/*----------------------
+base background and text
+----------------------*/
+
+/* background and drawer */
+    body.app-body,
+    .ui,
+    .drawer__tab,
+    .drawer__inner,
+    .drawer__inner.darker,
+    .drawer__inner__mastodon,
+    .tabs-bar,
+    .getting-started,
+    .search-results__section h5,
+    .account__section-headline,
+        .account__section-headline button,
+    .notification__filter-bar,
+        .notification__filter-bar button,
+/* DMs */
+    .status.status-direct,
+        .status.status-direct:not(.read),
+        .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,
+    .filter-form,
+/* 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,
+/* 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,
+    .introduction__text p code,
+    .list-editor .search__input,
+/* opengraph previews */
+    .status-card__image,
+    .status-card__content,
+    .status-card__description,
+    .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,
+    .brand__tagline
+{
+    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,
+        .account__section-headline button.active,
+        .notification__filter-bar a.active,
+        .notification__filter-bar button.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,
+        .getting-started__footer 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,
+    .list-editor .search__input::placeholder,
+        .list-editor .search__icon .fa,
+        .list-editor .search__icon .fa-times-circle,
+/* 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)
+}
+
+/* border color fix */
+.status.status-direct:not(.read) {border-color: var(--textPageMuted)}

app/javascript/styles/mfc/3-highlights.css

@@ -0,0 +1,189 @@
+/*------------------------------------------------------------------------------
+* HIGHLIGHTS COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/* scrollbar fix */
+html {scrollbar-color: var(--bg) var(--bgPage)}
+
+/*------------------
+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,
+    .column-link__badge,
+/* 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)
+}
+
+/*--------------
+accented buttons
+--------------*/
+
+/* primary buttons */
+.directory__tag > a:hover, .directory__tag > a:active, .directory__tag > a:focus,
+    .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,
+    .conversation__unread,
+/* 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,
+    .radio-button__input.checked,
+/* 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.unhandled-link
+    .getting-started a,
+        .getting-started p a,
+        .getting-started__footer a,
+    .reply-indicator__content a,
+        .reply-indicator__content a.unhandled-link,
+        .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,
+    .account__header__bio .account__header__fields a,
+    .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,
+    .empty-column-indicator a, .error-column a,
+/* 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,
+/* public pages */
+    .simple_form .input.boolean label a,
+    .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)
+}
+
+/* border fix */
+.react-toggle--checked .react-toggle-thumb,
+.radio-button__input.checked
+{border-color: var(--accent)}

app/javascript/styles/mfc/4-fixes.css

@@ -0,0 +1,253 @@
+/*------------------------------------------------------------------------------
+* 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.
+
+TODO: deprecate this and merge into the fg/bg/highlights where applicable?
+*------------------------------------------------------------------------------*/
+
+/* remove registration form gradient */
+.simple_form .label_input__append::after {background-image: none}
+
+/* visible focus indicator */
+.focusable:focus
+{border: 2px solid var(--accent) !important;}
+
+/* webkit scrollbars //todo: firefox equivalent */
+::-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, .scrollable, .report-modal__statuses {scrollbar-color: var(--bg) var(--bgPage);}
+
+/* transparent drawer / gs columns */
+.getting-started,
+    .getting-started__wrapper,
+.drawer__header,
+.flex-spacer,
+.focusable:focus
+{background: none}
+
+
+
+/* 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,
+    .notification__filter-bar button.active::before,
+    .notification__filter-bar button.active::after
+{
+    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
+---------------*/
+
+/* 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,
+.introduction__text,
+.introduction__text p code,
+.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 */
+.domain {border-color: var(--bgPage)}
+.domain .domain__domain-name {background: transparent}
+
+/*
+* Fix glowing elements when there are new toots to be fetched
+* //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)}
+
+/* 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)
+    )
+}

app/javascript/styles/mfc/5-material.css

@@ -0,0 +1,64 @@
+/*-----------------------
+material design overrides
+-----------------------*/
+
+/* turn statuses into cards */
+.drawer__inner darker {filter: drop-shadow(0 0 2px black)}
+.status {
+    box-shadow: 0px 0px 2px black;
+    background: var(--bg);
+    margin: 8px;
+    border-radius: 2px;
+    border: 0
+}
+.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,
+.conversation
+    {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)}
+
+/* borders */
+.account__section-headline, .notification__filter-bar,
+.account--panel, .account__header__bar, .account__header__bio .account__header__fields, .status, .detailed-status__action-bar, .account__header__fields dl, .account__header__bio .account__header__fields, .account, .directory__card__extra .account__header__content, .account__section-headline, .notification__filter-bar,
+.conversation
+{border-color: transparent}
+
+/* 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}

app/javascript/styles/mfc/mastodonFlat.scss

@@ -0,0 +1,7 @@
+@import '0-palette';
+@import '1-foreground';
+@import '2-background';
+@import '3-highlights';
+@import '4-fixes';
+@import '5-material';
+@import '6-actions';

app/javascript/styles/mfc/variables.scss

@@ -0,0 +1,11 @@
+/* define scss variables in palette.scss of subtheme */
+:root {
+--bgPage: $bgPage;
+--bg: $bg;
+--bgHead: $bgHead;
+--text: $text;
+--textBold: $textBold;
+--textMuted: $textMuted;
+--textHead: $textHead;
+--accent: $accent;
+}

app/javascript/styles/mods/deprecated/display_bettersearch.css

@@ -0,0 +1,10 @@
+/*
+Make search results look better:
+- adds contrast to search icon
+- overlay-style shadowed background
+
+author: trwnh
+license: Public Domain
+*/
+.search__icon .fa.active {opacity: 1}
+.drawer__inner.darker {background: rgba(0,0,0,0.5)}

app/javascript/styles/mods/display_breakname.css

@@ -0,0 +1,9 @@
+/*
+Add a line break between display name and account handle:
+- this allows user/display names to expand more by default.
+- it also makes names look better in general.
+
+author: trwnh
+license: Public Domain
+*/
+.display-name__html {display: block;}

app/javascript/styles/mods/display_browserfont.css

@@ -0,0 +1,20 @@
+/*
+Use browser default font:
+- override mastodon-font-sans-serif with sans-serif
+- note: this is not the same as "use system default font"
+  in mastodon's preferences! that option uses a font that
+  would be *expected to load on that system*, and ignores
+  your browser's settings entirely. for example, if you
+  are running ms windows, you will see segoe ui, even if
+  your browser's default font is something else!
+
+author: trwnh
+license: Public Domain
+*/
+body,
+.landing-page #mastodon-timeline,
+.landing-page li,
+.landing-page p
+{
+    font-family: sans-serif
+}

app/javascript/styles/mods/display_circleavatar.css

@@ -0,0 +1,15 @@
+/*
+* 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.
+*
+* author: trwnh
+* license: Public Domain
+*/
+.card .avatar img,
+.activity-stream .status.light .status__avatar img,
+.account__avatar,
+    .account__avatar-overlay-base,
+    .account__avatar-overlay-overlay
+{border-radius: 50%}

app/javascript/styles/mods/display_collapsedinteractions.css

@@ -0,0 +1,37 @@
+/*
+Collapse fave/boost/poll notifications
+- limits display to just a few lines (~3), so you can at least identify it
+- hides the display name on fave/boost, 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
+
+author: trwnh
+license: Public Domain
+*/
+
+.notification-favourite .status,
+.notification-reblog .status,
+.notification-poll .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;
+}

app/javascript/styles/mods/display_emojizoom.css

@@ -0,0 +1,23 @@
+  /*
+  Emoji hover zoom:
+  - makes emoji grow in size when moused over
+  
+  author: noiob
+  license: CC0 - Public Domain
+  source: https://userstyles.org/styles/150165
+  */
+  
+  .emojione:hover
+  {
+    width: 50px !important;
+ /* set the width and height of the expanded emojo here */
+    height: 50px !important;
+    transition: all 0.3s ease-in-out !important;
+    /* the 0.3s is the animation time for growing the emojo, it can be set to 0 */;
+  }
+
+  .emojione
+  {
+    transition: all 0.2s ease-in-out;
+    /* the 0.2s is the animation time for shrinking the emojo, it can be set to 0 */;
+  }

app/javascript/styles/mods/display_fadedinteractions.css

@@ -0,0 +1,9 @@
+/*
+Fade out faved/boosted toots in notifications:
+- for "x favourited your toot" / "x boosted your toot",
+  make the faved/boosted toot half-transparent.
+
+author: trwnh
+license: Public Domain
+*/
+.status.muted {opacity: 0.5}

app/javascript/styles/mods/display_fullmedia.css

@@ -0,0 +1,31 @@
+/*
+Full-height media previews:
+- normal media previews are forced to be 16:9 for consistency
+- use this if you prefer to see the aspect ratio unchanged
+
+author: Kevin
+license: CC0 - Public Domain
+source: https://userstyles.org/styles/167207 [in part]
+*/
+
+.media-gallery {
+    max-height: 100% !important;
+    height: 100% !important;
+}
+
+.media-gallery__item-gifv-thumbnail, .media-gallery__item-gifv-thumbnail img {
+    transform: translateY(0%) !important;
+    max-height: 100% !important;
+}
+
+.media-gallery__item-thumbnail, .media-gallery__item-thumbnail img, .media-gallery__gifv {
+    max-height: 100% !important;
+}
+
+.media-gallery__item {
+    width: 100% !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    inset: 0 !important;
+    margin-bottom: 4px;
+}

app/javascript/styles/mods/display_fullname.css

@@ -0,0 +1,11 @@
+/*
+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.
+- by default, it will also break long names onto a new line.
+
+author: trwnh
+license: Public Domain
+*/
+.display-name {overflow: visible; white-space: normal; word-wrap: break-word}

app/javascript/styles/mods/display_hidefollowcounts.css

@@ -0,0 +1,10 @@
+/*
+Hide the following and follower counters on profiles.
+- full counts are still available by hovering over the text, though
+author: trwnh
+license: Public Domain
+*/
+.account__header__extra__links a:not(:first-child) strong
+{display: none}
+.details-counters .counter:not(:first-child) .counter-number
+{visibility: hidden}

app/javascript/styles/mods/display_hidereplycounts.css

@@ -0,0 +1,7 @@
+/*
+Hide the 0/1/1+ counters of replies.
+
+author: trwnh
+license: Public Domain
+*/
+.status__action-bar__counter__label {display: none}

app/javascript/styles/mods/display_starstohearts.css

@@ -0,0 +1,16 @@
+/*
+Turn stars into hearts:
+- similar to twitter's change
+
+author: numimyon
+license: CC0 - Public Domain
+source: https://userstyles.org/styles/151233
+*/
+
+.notification__favourite-icon-wrapper .star-icon,
+.star-icon.active,
+.star-icon:hover,
+.star-icon:active
+{color: crimson !important;}
+
+.fa-star:before {content: "";}

app/javascript/styles/mods/display_transparentmedia.css

@@ -0,0 +1,10 @@
+/*
+Remove the checker-board background from the media modal:
+- this makes transparent images actually transparent
+
+author: trwnh
+license: Public Domain
+*/
+.media-modal canvas,
+.media-modal img
+{background: none}

app/javascript/styles/mods/layout_1600px.css

@@ -0,0 +1,12 @@
+/*
+Allow for wider layout on bigger screens
+- vanilla max-width is 1200px
+- there is no penalty to slightly expanding flexbox on bigger screens
+- only applies on landing pages (webapp will expand as you add columns)
+
+author: trwnh
+license: Public Domain
+*/
+@media (min-width: 1600px) {
+    .landing-page .container {max-width: 1600px}
+}

app/javascript/styles/mods/layout_elefriend.css

@@ -0,0 +1,20 @@
+/*
+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.
+
+author: trwnh
+license: Public Domain
+*/
+.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? */

app/javascript/styles/mods/layout_gettingstartedheight.css

@@ -0,0 +1,13 @@
+/*
+Make "getting started" column height consistent with all other columns:
+- puts the footer back at the bottom of the page, instead of floating.
+
+author: trwnh
+license: Public Domain
+*/
+.getting-started {
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    justify-content: space-between
+}

app/javascript/styles/mods/layout_hidedisabled.css

@@ -0,0 +1,17 @@
+/*
+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.
+
+this is fixed in https://github.com/tootsuite/mastodon/pull/10054
+
+author: trwnh
+license: Public Domain
+*/
+.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}

app/javascript/styles/mods/layout_hidefiltered.css

@@ -0,0 +1,9 @@
+/*
+Remove the "Filtered" tombstone from timelines.
+- WARNING: this breaks keyboard scrolling with j/k!
+
+author: trwnh
+license: Public Domain
+*/
+
+.status__wrapper--filtered {display: none}

app/javascript/styles/mods/layout_mobile_bottombar.css

@@ -0,0 +1,28 @@
+/*
+Bottom tabs on mobile:
+- Places the tab bar at the bottom instead of the top.
+- Fixes layout errors that are a result of this change.
+
+author: trwnh
+license: Public Domain
+*/
+@media (max-width: 630px) {
+
+.tabs-bar {
+position: absolute;
+bottom: 0;
+z-index: 1;
+width: 100%;
+margin: 0;
+}
+
+.getting-started {overflow: auto} /* can be removed after PR #10075 is merged */
+
+.columns-area {padding: 0}
+.getting-started__trends, .getting-started__wrapper, .search {margin: 0}
+  
+.floating-action-button, .column .scrollable > div:last-child {margin-bottom: 50px}
+.react-swipeable-view-container {height: calc(100% - 50px)}
+.react-swipeable-view-container .columns-area {height: 100% !important}
+
+}

app/javascript/styles/mods/layout_singlecolumn.css

@@ -0,0 +1,25 @@
+/*
+Single column layout:
+- re-uses tab bar from mobile layout
+- hides search from drawer (redundant with search tab)
+
+author: trwnh
+license: Public Domain
+*/
+
+@media (min-width: 1024px) {
+  /* place constraints on app layout */
+  .ui {max-width: 960px; max-height: 100vh;}
+  .drawer {width: 300px}
+  .column:last-child, .drawer:last-child
+  {display: flex; flex: 1 1 100%;}
+  /* show tabs bar (from mobile layout) as header */
+  .tabs-bar {display: flex;}
+  /* hide redundant ui elements */
+  .column,
+  .drawer__header,
+  .drawer:first-child .search,
+  .drawer:first-child .search-results
+  {display: none;}
+  .drawer:first-child .drawer__inner.darker {z-index: -1}
+}

app/javascript/styles/mods/layout_widercolumns.css

@@ -0,0 +1,10 @@
+/*
+* Wider columns:
+* - Make the multi-column layout use wider columns by default.
+* 
+* author: trwnh
+* license: Public Domain
+*/
+@media (min-width: 640px) {
+    .column, #mastodon-timeline {min-width: 60ch;}
+}

app/javascript/styles/mods/test_colorizedlogo.css

@@ -0,0 +1,12 @@
+/*
+Colorize logo on landing page:
+- DO NOT IMPORT. It works as standalone CSS, but it makes Sass choke.
+
+author: trwnh
+license: Public Domain
+*/
+
+.landing-page__logo img {
+    filter: sepia(100%) hue-rotate(160deg) saturate(400%) brightness(40%);
+    mix-blend-mode: normal
+}

config/themes.yml

@@ -1,3 +1,5 @@
 default: styles/application.scss
 contrast: styles/contrast.scss
 mastodon-light: styles/mastodon-light.scss
+strawberry: styles/strawberry.scss
+linernotes_dark: styles/linernotes_dark.scss