From 16d6c4a1459c52bf652d8de8afb1f7fb489cfbb6 Mon Sep 17 00:00:00 2001 From: fef Date: Wed, 16 Nov 2022 03:55:56 +0000 Subject: [PATCH] rewrite homogay flavour this version attempts to hack more directly into the whole theming stuff, rather than build on top of it like the previous one. --- .../flavours/glitch/styles/homogay.scss | 375 +----------------- .../flavours/glitch/styles/homogay/diff.scss | 73 ++++ .../glitch/styles/homogay/variables.scss | 51 +++ .../flavours/glitch/styles/variables.scss | 10 +- app/javascript/skins/glitch/homogay/names.yml | 4 + 5 files changed, 135 insertions(+), 378 deletions(-) create mode 100644 app/javascript/flavours/glitch/styles/homogay/diff.scss create mode 100644 app/javascript/flavours/glitch/styles/homogay/variables.scss diff --git a/app/javascript/flavours/glitch/styles/homogay.scss b/app/javascript/flavours/glitch/styles/homogay.scss index 3b89c5d7b7..481c6492ee 100644 --- a/app/javascript/flavours/glitch/styles/homogay.scss +++ b/app/javascript/flavours/glitch/styles/homogay.scss @@ -1,375 +1,4 @@ +@import 'homogay/variables'; @import 'index'; - -/* customize ya stuff */ -:root { - --border-radius: 8px; - - /* rgb for transparency to work */ - --text-color: 217, 225, 232; - --text-color-secondary: 96, 105, 132; /* less bright, for unimportant bits */ - - --background-color: 15, 11, 23; - --background-color-brighter: 22, 17, 33; - --app-background-color: 10, 5, 15; /* used only for the VERY background in the back */ - - --accent-color: 222, 24, 163; - --accent-color-secondary: 110, 69, 97; /* less saturated ver of --accent-color */ - --accent-color-bright: 255, 64, 198; -} - -.account__avatar-overlay-base, .account__avatar-overlay-overlay, .account__avatar { - border-radius: var(--border-radius); -} - -/* roundening shenanigans */ - -.drawer > div, nav, .search, .drawer__header a, .drawer--header a, .search__input { - border-radius: var(--border-radius) !important; -} - -.column-header, .column-back-button, .navigation-panel .column-link:nth-child(1), .navigation-panel .column-link:nth-child(11), .navigation-bar { - border-radius: var(--border-radius) var(--border-radius) 0 0; -} -.column > .scrollable, .getting-started, .navigation-panel .column-link:nth-child(9), .navigation-panel .column-link:nth-child(12) { - border-radius: 0 0 var(--border-radius) var(--border-radius); -} - -.button { - border-radius: var(--border-radius); -} - -/* standard fg/bg color changes */ - -.drawer__inner, .drawer__inner__mastodon, .drawer__header, .drawer--header, .actions-modal, .block-modal, .boost-modal, .confirmation-modal, .mute-modal, .report-modal, article, .getting-started, .column-subheading, .column-link, .column-subheading, .column-link, .emoji-mart-scroll, .emoji-mart-search, .emoji-mart-category-label > span, .emoji-picker-dropdown__menu, .scrollable, .empty-column-indicator, .column-inline-form, .dropdown-menu, .dropdown-menu__item a, .account__header__fields dt, .search-popout, .confirmation-modal__action-bar, .reactions-bar__item, .emoji-picker-dropdown__modifiers__menu, .content-wrapper, .sidebar-wrapper--empty, .regeneration-indicator, .tabs-bar, .navigation-bar, .trends__header, .modal-layout { - background-color: rgb(var(--background-color)) !important; - color: rgb(var(--text-color)) !important; -} -.glitch.local-settings__navigation, .glitch.local-settings__navigation__item, .glitch.local-settings__page, .glitch.local-settings { - background-color: rgb(var(--background-color)); - color: rgb(var(--text-color)); -} - -.modal-layout, .modal-layout__mastodon > * { - background-image: none; -} - -.account__section-headline a.active::after, .account__section-headline button.active::after, .notification__filter-bar a.active::after, .notification__filter-bar button.active::after, .account__section-headline a.active::after, .account__section-headline a.active::before, .account__section-headline button.active::after, .account__section-headline button.active::before, .notification__filter-bar a.active::after, .notification__filter-bar a.active::before, .notification__filter-bar button.active::after, .notification__filter-bar button.active::before { - border-color: transparent transparent rgb(var(--background-color)); -} - -.dropdown-menu__arrow { - border-bottom-color: rgb(var(--background-color)) !important; -} -.dropdown-menu__arrow.top { - border-top-color: rgb(var(--background-color)) !important; -} - -.reply-indicator__content, .status__content, .reply-indicator__display-name, .privacy-dropdown__option__icon, .composer--options--dropdown--content--item .icon, .composer--reply > .content { - color: rgb(var(--text-color)) !important; -} - -html { - scrollbar-color: rgb(var(--background-color-brighter)) rgba(0,0,0,0.1); -} - -.tabs-bar__wrapper { - background: rgb(var(--app-background-color)); -} - -.column-header, .column-header__button, .account__section-headline, .notification__filter-bar > button, .emoji-mart-bar, .column-back-button, .column-header__back-button, .announcements, .column-header__collapsible-inner, .status.status-direct:not(.read), .notification__filter-bar, .glitch.local-settings__page { - background-color: rgb(var(--background-color-brighter)) !important; - border-bottom: none; -} - -.reply-indicator, .emoji-picker-dropdown__modifiers__menu button:hover, .compose-form .compose-form__buttons-wrapper, .composer--options-wrapper, .compose-form__poll-wrapper select, .flash-message, .card__bar, .card > a:hover .card__bar, .glitch.local-settings__navigation__item:hover { - background-color: rgb(var(--background-color-brighter)); -} - -.columns-area, .app-body, .getting-started__wrapper { - background-color: rgb(var(--app-background-color)); -} - -.privacy-dropdown__option__content strong, .composer--options--dropdown--content strong, .character-counter, .report-modal__comment .setting-text-label, .compose-form__poll-wrapper select { - color: rgb(var(--text-color)) !important; -} - -input, textarea, .compose-form__modifiers, .privacy-dropdown__dropdown, .composer--options--dropdown--content, .privacy-dropdown__value { - background-color: rgb(var(--background-color-brighter)) !important; - color: rgb(var(--text-color)) !important; -} - -.compose-form__buttons-wrapper, .admin-wrapper .sidebar-wrapper__inner, .admin-wrapper .sidebar ul a:hover, .admin-wrapper .sidebar ul a, .admin-wrapper .sidebar ul a.selected, .account__disclaimer, .account__action-bar-links { - background-color: rgb(var(--background-color-brighter)); -} - -.compose-form .compose-form__autosuggest-wrapper { - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); -} - -.compose-form .compose-form__buttons-wrapper { - border-bottom-left-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); -} - -.compose-form .spoiler-input__input { - border-radius: var(--border-radius); -} - -a.status-card { - border-radius: var(--border-radius); -} - -.detailed-status, .detailed-status__action-bar, .account__header__bar, .focusable:focus { - background-color: rgb(var(--background-color-brighter)) !important; - border-bottom: none; - border-top: none; -} - -.status.collapsed .status__content::after { - background: linear-gradient(rgba(var(--background-color),0), rgba(var(--background-color),0)) !important; -} - -.dismissable-banner { - /*border-top: 1px solid #393f4f;*/ - background-color: rgb(var(--background-color-brighter)); -} - -.status-card__image { - background-color: rgb(var(--background-color-brighter)); -} - -/* accent color changes */ - -.button, .react-toggle--checked .react-toggle-track, .react-toggle--checked:hover .react-toggle-track, .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track, .button.logo-button, .emoji-mart-anchor-bar, .loading-bar, .icon-with-badge__badge, .video-player__volume__current, .video-player__volume__handle, .upload-progress__tracker, .video-player__seek__buffer, .video-player__seek__progress, .floating-action-button { - background-color: rgb(var(--accent-color)); -} -.react-toggle--checked .react-toggle-thumb, .compose-form__sensitive-button .checkbox, .filters .filter-subset a.selected, .account__action-bar__tab.active, .tabs-bar__link.active, .notification.unread::before, .status.unread::before { - border-color: rgb(var(--accent-color)); -} - -.text-icon-button, .icon-button.inverted, button.inverted:hover, .icon-button, .icon-button:hover, .status__action-bar__counter__label, .text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover, .icon-button.disabled, .composer--options--dropdown.open > .value { - color: rgb(var(--accent-color-secondary)); -} -.status__info__icons i { - color: rgb(var(--accent-color-secondary)) !important; -} - -.status__content__spoiler-link { - background-color: rgb(var(--accent-color-secondary)) !important; -} -.column-header__wrapper.active::before { - background: radial-gradient(ellipse, rgba(var(--accent-color),.23) 0%, rgba(var(--accent-color),0) 60%); -} -.column-header__wrapper.active { - box-shadow: 0 1px 0 rgba(var(--accent-color),.3); -} - -.compose-form__sensitive-button .checkbox.active, .poll__chart.leading { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); -} - -.poll__chart { - background-color: rgb(var(--accent-color-secondary)); -} - -.column-header.active .column-header__icon { - text-shadow: 0 0 10px rgba(var(--accent-color),.4); -} - -.text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover, .drawer__header a:hover, .drawer--header a:hover, .drawer--header a:focus, .icon-button:hover, .reactions-bar__item:hover { - background-color: rgba(var(--accent-color-secondary), .1); -} - -.icon-button.inverted:active, .icon-button.inverted:focus, .icon-button.inverted:hover, .reactions-bar__item.active { - background-color: rgba(var(--accent-color-secondary), .25); - color: rgb(var(--accent-color-secondary)); -} - -.button:active, .button:focus, .button:hover, .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover, .simple_form .block-button:hover, .simple_form .button:hover, .simple_form button:hover, .button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover, .floating-action-button:hover, .glitch.local-settings__navigation__item.active:hover { - background-color: rgb(var(--accent-color-bright)); -} - -.privacy-dropdown__option.active, .composer--options--dropdown--content--item.active, .privacy-dropdown__option:hover, .composer--options--dropdown--content--item:hover, .privacy-dropdown__option.active:hover, .composer--options--dropdown--content.active:hover, .admin-wrapper .sidebar ul .simple-navigation-active-leaf a, .simple_form .block-button, .simple_form .button, .simple_form button, .simple_form .block-button:active, .simple_form .block-button:focus, .simple_form .button:active, .simple_form .button:focus, .simple_form button:active, .simple_form button:focus, .composer--options--dropdown.open > .value, .glitch.local-settings__navigation__item.active { - background-color: rgb(var(--accent-color)); -} - -.status__info__icons .icon-button.active i, .tabs-bar__link.active, .status__content a { - color: rgb(var(--accent-color)) !important; -} - - -.trends__item__sparkline path:last-child { - stroke: rgb(var(--accent-color)) !important; -} -.trends__item__sparkline path:first-child { - fill: rgb(var(--accent-color-secondary)) !important; -} - -a.u-url, .status-link, .column-header__back-button, .status__content__read-more-button, .column-header.active .column-header__icon, .column-link.active, .account__section-headline a.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar button.active, .account__header__content a, .account__header__bio .account__header__fields a, .reactions-bar__item.active .reactions-bar__item__count, .emoji-mart-anchor-selected, .reply-indicator__content a, .compose-form .compose-form__warning a, .text-icon-button.active, .icon-button.inverted.active, .drawer__tab:hover, .icon-button.active, .column-back-button, .filters .filter-subset a.selected, .admin-wrapper .content .muted-hint a, body .muted-hint a, .table a, .notification__message .fa, .drawer--header a:hover, .drawer--header a:focus { - color: rgb(var(--accent-color)) !important; -} - -.language-dropdown__dropdown__results__item.active { - background: rgb(var(--accent-color)); -} -.language-dropdown__dropdown__results__item.active:hover, .language-dropdown__dropdown__results__item:hover { - background: rgb(var(--accent-color-bright)); -} - -.emoji-mart-search > input { - border-color: rgba(255, 255, 255, 0.1); -} - -/* fixes */ - -/* boost hack, v2 */ -/* https://codepen.io/sosuke/pen/Pjoqqp */ -button.icon-button i.fa-retweet { - filter: brightness(0) invert(38%) sepia(10%) saturate(1594%) hue-rotate(266deg) brightness(97%) contrast(89%); /* accent-color-secondary */ - color: transparent !important; -} -button.icon-button.active i.fa-retweet { - filter: invert(19%) sepia(75%) saturate(7362%) hue-rotate(308deg) brightness(98%) contrast(88%); /* accent-color */ -} -button.icon-button.disabled i.fa-retweet, button.icon-button.disabled i.fa-lock { - filter: invert(38%) sepia(10%) saturate(1594%) hue-rotate(266deg) brightness(50%) contrast(89%); /* accent-color-secondary with brightness set to 50% */ -} - -.load-more:hover, .mbstobon-2 .drawer__inner__mastodon, .mbstobon-1 .drawer__inner__mastodon, .mbstobon-0 .drawer__inner__mastodon { - background: inherit; -} - -.account__action-bar__tab, .account__action-bar { - border: none; -} - -.notification__filter-bar, .account__header__bar, .admin-wrapper .content-heading, .admin-wrapper .content h4, .tabs-bar__link:not(.active) { - border-bottom: none; -} - -.dropdown-menu__separator, hr { - opacity: 0; -} -.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input, .compose-panel .compose-form__autosuggest-wrapper, .mbstobon-3 .drawer__inner__mastodon { - background: transparent; -} -.status, .account, .account__header__fields dl, .account__header__fields, .account__header__bio .account__header__fields, .glitch.local-settings__navigation__item { - border-top: none; - border-bottom: none; -} - -.report-modal__container, .report-modal__comment, .report-modal__comment .setting-text__wrapper { - border-color: rgba(0, 0, 0, 0) !important; -} - -.drawer__inner__mastodon { - background: inherit; -} - -/* misc */ -.column-link:hover, .dropdown-menu__item a:active, .dropdown-menu__item a:focus, .dropdown-menu__item a:hover { - color: rgb(var(--accent-color-bright)) !important; -} - -.notification__filter-bar button.active, .account__section-headline .active { - border-bottom: 3px solid rgb(var(--accent-color)); -} -.notification__filter-bar button:not(.active):hover { - top: -3px; -} -.account__section-headline a.active::after, .account__section-headline a.active::before { - display: none; -} - -.account__header__extra__links a:hover { - text-decoration: underline; -} -.account__section-headline a:hover, .confirmation-modal__cancel-button span { - color: #fff; -} - -.notification__filter-bar button.active::after { - opacity: 0; -} -.notification__filter-bar button.active::before { - opacity: 0; -} - -.column-link__badge, .column-subheading { - background-color: rgb(var(--accent-color)); - animation-name: flash; - animation-duration: 1s; - animation-iteration-count: infinite; - animation-direction: alternate-reverse; -} - -@keyframes flash { - from {background-color: rgb(var(--accent-color));} - to {background-color: rgb(var(--accent-color-secondary));} -} - -.reply-indicator { - max-height: 38px; - overflow-y: hidden; - transition: max-height 1s; -} -.reply-indicator:hover { - max-height: 100%; -} -.reply-indicator:before { - content: 'Replying to:'; - font-size: 12px; - color: rgb(var(--text-color-secondary)); -} - -.link-footer p:last-of-type:after { - content: '\A be gay do crime uwu'; - white-space: pre; -} - - -/* public/static css */ -/* for pages like /@username */ - -.public-layout .public-account-header__tabs__tabs .counter.active::after { - border-bottom-color: rgb(var(--accent-color)); -} -.public-layout .public-account-bio .account__header__fields a { - color: rgb(var(--accent-color)); -} -.public-layout .header .nav-button { - color: #fff; - background-color: rgb(var(--accent-color)); -} -.public-layout .header .nav-button:active, .public-layout .header .nav-button:focus, .public-layout .header .nav-button:hover { - background-color: rgb(var(--accent-color-bright)) -} -.public-layout .activity-stream .entry, .hero-widget__text, .table-of-contents { - background-color: rgb(var(--background-color)); -} -body { - background-color: rgb(var(--app-background-color)); -} -.public-layout .public-account-header__tabs__tabs .counter { - border-right: none; -} -.public-layout .public-account-bio, .public-layout .public-account-header__bar::before, .public-layout .header, .directory__tag > a, .directory__tag > div, .directory__tag > a:active, .directory__tag > a:focus, .directory__tag > a:hover, .public-layout .header .brand:hover, .landing-page__call-to-action, .box-widget { - background-color: rgb(var(--background-color-brighter)); -} -.public-layout .display-name, .status__relative-time time, .status__relative-time { - color: rgb(var(--text-color-secondary)); -} -.rich-formatting, .rich-formatting p { - color: rgb(var(--text-color)); -} -.rich-formatting table tbody tr, .rich-formatting table thead tr, .notification-follow, .notification-follow-request { - border-bottom: none; -} - -// https://types.pl/@haskal/106569437674907815 -.search-popout em { - color: rgb(var(--accent-color)) !important; -} +@import 'homogay/diff'; diff --git a/app/javascript/flavours/glitch/styles/homogay/diff.scss b/app/javascript/flavours/glitch/styles/homogay/diff.scss new file mode 100644 index 0000000000..99f5fe232e --- /dev/null +++ b/app/javascript/flavours/glitch/styles/homogay/diff.scss @@ -0,0 +1,73 @@ +body { + background: darken($ui-base-color, 3%); +} + +// hashtags in primary color +.status__content a { + color: $highlight-text-color; +} + +// compose panel +.compose-panel .autosuggest-textarea label .autosuggest-textarea__textarea, +.compose-form .autosuggest-input label .autosuggest-textarea__textarea, +.compose-form__buttons-wrapper, +.spoiler-input input, +.compose-form__modifiers, +.reply-indicator { + background: $ui-base-color; + color: $primary-text-color; +} +.compose-panel .compose-form__autosuggest-wrapper { + background-color: #fff0; // transparent background so it doesn't mess with border-radius +} +.poll__option input[type="text"], +.compose-form__poll-wrapper select { + border-color: $ui-base-lighter-color; +} + +.emoji-mart-bar:first-child { + background: lighten($ui-base-color, 7%); + border-bottom-color: #fff0; +} +.emoji-mart-anchor:not(.emoji-mart-anchor-selected) { + color: $ui-base-lighter-color; +} + +// dropdowns +.dropdown-menu, +.dropdown-menu__item a, +.dropdown-menu__item button { + background: $ui-base-lighter-color; +} +.dropdown-menu__arrow.top { + border-top-color: $ui-base-lighter-color; +} +.dropdown-menu__arrow.bottom { + border-bottom-color: $ui-base-lighter-color; +} + +// general modals +.modal-root__modal { + background: $ui-base-color; +} +.report-modal__container { + border-top-color: $ui-base-lighter-color; +} +.report-modal__comment { + border-right-color: $ui-base-lighter-color; +} +.report-modal__comment .setting-text { + background: $ui-base-color; +} + +// app settings modal +.glitch.local-settings { + background: $ui-base-color; +} +.glitch.local-settings__navigation, +.glitch.local-settings__navigation__item { + background: lighten($ui-base-color, 5%); +} +.glitch.local-settings__navigation__item { + border-bottom-color: $ui-base-lighter-color; +} diff --git a/app/javascript/flavours/glitch/styles/homogay/variables.scss b/app/javascript/flavours/glitch/styles/homogay/variables.scss new file mode 100644 index 0000000000..335a22349f --- /dev/null +++ b/app/javascript/flavours/glitch/styles/homogay/variables.scss @@ -0,0 +1,51 @@ +// Commonly used web colors +$black: #000000; +$white: #ffffff; +$success-green: #5fe43d; +$error-red: #c9343b; +$warning-red: #c96932; +$gold-star: #e4ba3d; + +$red-bookmark: $success-green; + +// Values from the classic Mastodon UI +$classic-base-color: #0f0b17; +$classic-primary-color: #d4b6cb; +$classic-secondary-color: #eaddf4; +$classic-highlight-color: #de18a3; + +// Variables for defaults in UI +$base-shadow-color: $black !default; +$base-overlay-background: $black !default; +$base-border-color: $white !default; +$simple-background-color: lighten($classic-base-color, 7%) !default; +$valid-value-color: $success-green !default; +$error-value-color: $error-red !default; + +// Tell UI to use selected colors +$ui-base-color: $classic-base-color !default; +$ui-base-lighter-color: #5f4a6e !default; +$ui-primary-color: $classic-primary-color !default; +$ui-secondary-color: $classic-secondary-color !default; +$ui-highlight-color: $classic-highlight-color !default; + +// Variables for texts +$primary-text-color: $classic-secondary-color !default; +$darker-text-color: $ui-primary-color !default; +$dark-text-color: $ui-base-lighter-color !default; +$secondary-text-color: $ui-secondary-color !default; +$highlight-text-color: lighten($ui-highlight-color, 8%) !default; +$action-button-color: $ui-base-lighter-color !default; +$passive-text-color: $gold-star !default; +$active-passive-text-color: $success-green !default; + +// For texts on inverted backgrounds +$inverted-text-color: $primary-text-color !default; // we don't do inverted backgrounds +$lighter-text-color: $ui-base-lighter-color !default; +$light-text-color: $ui-primary-color !default; + +// Variables for components +$media-modal-media-max-width: 100%; + +// put margins on top and bottom of image to avoid the screen covered by image. +$media-modal-media-max-height: 80%; diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index b865b5a2d1..eaec208468 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -1,12 +1,12 @@ // Commonly used web colors $black: #000000; // Black $white: #ffffff; // White -$success-green: #79bd9a; // Padua -$error-red: #df405a; // Cerise -$warning-red: #ff5050; // Sunset Orange -$gold-star: #ca8f04; // Dark Goldenrod +$success-green: #79bd9a !default; // Padua +$error-red: #df405a !default; // Cerise +$warning-red: #ff5050 !default; // Sunset Orange +$gold-star: #ca8f04 !default; // Dark Goldenrod -$red-bookmark: $warning-red; +$red-bookmark: $warning-red !default; // Values from the classic Mastodon UI $classic-base-color: #282c37; // Midnight Express diff --git a/app/javascript/skins/glitch/homogay/names.yml b/app/javascript/skins/glitch/homogay/names.yml index 0b29f568d9..968051de57 100644 --- a/app/javascript/skins/glitch/homogay/names.yml +++ b/app/javascript/skins/glitch/homogay/names.yml @@ -10,3 +10,7 @@ es: skins: glitch: homogay: homogay (por @anna@girldick.gay) +fr: + skins: + glitch: + homogay: homogay (par @anna@girldick.gay)