From 3baf5ac4e1d523df298d5e9c3a23350b2199eb26 Mon Sep 17 00:00:00 2001 From: Ruby Tartakovsky Date: Wed, 4 Sep 2024 00:24:37 +0000 Subject: [PATCH] shrike theming --- .../flavours/glitch/styles/components.scss | 20 +++++-- .../glitch/styles/contrast/variables.scss | 23 +++++--- .../styles/mastodon-light/variables.scss | 34 ++++++------ .../flavours/glitch/styles/variables.scss | 52 ++++++++++--------- app/javascript/flavours/vanilla/names.yml | 41 --------------- app/javascript/flavours/vanilla/theme.yml | 17 ------ 6 files changed, 78 insertions(+), 109 deletions(-) delete mode 100644 app/javascript/flavours/vanilla/names.yml delete mode 100644 app/javascript/flavours/vanilla/theme.yml diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index ca841b5e47..e0b72d4e2d 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -1432,9 +1432,10 @@ body > [data-popper-placement] { .status { padding: 10px 14px; // glitch: reduced padding min-height: 54px; - border-bottom: 1px solid var(--background-border-color); + border: 0 solid var(--background-border-color); cursor: auto; opacity: 1; + border-radius: inherit; animation: fade 150ms linear; @keyframes fade { @@ -3120,6 +3121,7 @@ $ui-header-logo-wordmark-width: 99px; .columns-area__panels__pane--navigational { min-width: $sidebar-width; + display: none; .columns-area__panels__pane__inner { width: $sidebar-width; @@ -3180,6 +3182,7 @@ $ui-header-logo-wordmark-width: 99px; .columns-area__panels__pane--navigational { min-width: $sidebar-width; + display: none; .columns-area__panels__pane__inner { width: $sidebar-width; @@ -7491,6 +7494,14 @@ img.modal-warning { } } +.media-gallery__preview--hidden { + display: block; +} + +.media-gallery__item-thumbnail .media-gallery__preview--hidden { + display: none; +} + .media-gallery__gifv { height: 100%; overflow: hidden; @@ -9267,6 +9278,9 @@ noscript { .notification, .status__wrapper { position: relative; + background-color: $ui-base-over-color; + margin-bottom: 5px; + border-radius: 8pt; &.unread { &::before { @@ -10512,7 +10526,7 @@ noscript { color: $white; background: rgba($black, 0.85); backdrop-filter: blur(8px); - border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85); + border: 1px solid rgba(lighten($shrike-base-color, 4%), 0.85); border-radius: 8px; box-shadow: 0 10px 15px -3px rgba($base-shadow-color, 0.25), @@ -10544,7 +10558,7 @@ noscript { text-transform: uppercase; margin-inline-start: 10px; cursor: pointer; - color: $blurple-300; + color: $cardinal-300; border-radius: 4px; padding: 0 4px; diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss index 766591ba40..2b9f404407 100644 --- a/app/javascript/flavours/glitch/styles/contrast/variables.scss +++ b/app/javascript/flavours/glitch/styles/contrast/variables.scss @@ -1,15 +1,22 @@ // Dependent colors $black: #000000; -$classic-base-color: hsl(240deg, 16%, 19%); -$classic-primary-color: hsl(240deg, 29%, 70%); -$classic-secondary-color: hsl(255deg, 25%, 88%); -$classic-highlight-color: hsl(240deg, 100%, 69%); +$cardinal-700: hsla(359deg, 23%, 35%, 100%); +$cardinal-600: hsla(5deg, 67%, 32%, 100%); +$cardinal-500: hsla(5deg, 72%, 38%, 100%); +$cardinal-400: hsla(9deg, 60%, 44%, 100%); +$cardinal-300: hsla(6deg, 85%, 44%, 100%); -$ui-base-color: $classic-base-color !default; -$ui-primary-color: $classic-primary-color !default; -$ui-secondary-color: $classic-secondary-color !default; -$ui-highlight-color: $classic-highlight-color !default; +$shrike-base-color: hsla(20deg, 7%, 19%, 100%); +$shrike-primary-color: hsla(36deg, 17%, 57%, 100%); +$shrike-secondary-color: hsla(37deg, 35%, 79%, 100%); +$shrike-highlight-color: $cardinal-500; + +$ui-base-color: $shrike-base-color !default; +$ui-base-over-color: lighten($ui-base-color, 8%) !default; // Lighter darkest +$ui-primary-color: $shrike-primary-color !default; +$ui-secondary-color: $shrike-secondary-color !default; +$ui-highlight-color: $shrike-highlight-color !default; $darker-text-color: lighten($ui-primary-color, 20%) !default; $dark-text-color: lighten($ui-primary-color, 12%) !default; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss index 76ede26233..abb78fd926 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss @@ -2,14 +2,17 @@ $black: #000000; $white: #ffffff; -$classic-base-color: hsl(240deg, 16%, 19%); -$classic-primary-color: hsl(240deg, 29%, 70%); -$classic-secondary-color: hsl(255deg, 25%, 88%); -$classic-highlight-color: hsl(240deg, 100%, 69%); +$cardinal-700: hsla(359deg, 23%, 35%, 100%); +$cardinal-600: hsla(5deg, 67%, 32%, 100%); +$cardinal-500: hsla(5deg, 72%, 38%, 100%); +$cardinal-400: hsla(9deg, 60%, 44%, 100%); +$cardinal-300: hsla(6deg, 85%, 44%, 100%); + +$shrike-base-color: hsla(20deg, 7%, 19%, 100%); +$shrike-primary-color: hsla(36deg, 17%, 57%, 100%); +$shrike-secondary-color: hsla(37deg, 35%, 79%, 100%); +$shrike-highlight-color: $cardinal-500; -$blurple-600: hsl(252deg, 59%, 51%); // Iris -$blurple-500: hsl(240deg, 100%, 69%); // Brand purple -$blurple-300: hsl(237deg, 92%, 75%); // Faded Blue $grey-600: hsl(240deg, 8%, 33%); // Trout $grey-100: hsl(240deg, 51%, 90%); // Topaz @@ -19,27 +22,28 @@ $success-green: lighten(hsl(138deg, 32%, 35%), 8%); $base-overlay-background: $white !default; $valid-value-color: $success-green !default; -$ui-base-color: $classic-secondary-color !default; +$ui-base-color: $shrike-secondary-color !default; +$ui-base-over-color: lighten($ui-base-color, 8%) !default; // Lighter darkest $ui-base-lighter-color: hsl(250deg, 24%, 75%); -$ui-primary-color: $classic-primary-color !default; -$ui-secondary-color: $classic-base-color !default; -$ui-highlight-color: $classic-highlight-color !default; +$ui-primary-color: $shrike-primary-color !default; +$ui-secondary-color: $shrike-base-color !default; +$ui-highlight-color: $shrike-highlight-color !default; $ui-button-secondary-color: $grey-600 !default; $ui-button-secondary-border-color: $grey-600 !default; $ui-button-secondary-focus-color: $white !default; -$ui-button-tertiary-color: $blurple-500 !default; -$ui-button-tertiary-border-color: $blurple-500 !default; +$ui-button-tertiary-color: $cardinal-500 !default; +$ui-button-tertiary-border-color: $cardinal-500 !default; $primary-text-color: $black !default; -$darker-text-color: $classic-base-color !default; +$darker-text-color: $shrike-base-color !default; $highlight-text-color: $ui-highlight-color !default; $dark-text-color: hsl(240deg, 16%, 32%); $action-button-color: hsl(240deg, 16%, 45%); $inverted-text-color: $black !default; -$lighter-text-color: $classic-base-color !default; +$lighter-text-color: $shrike-base-color !default; $light-text-color: hsl(240deg, 16%, 32%); // Newly added colors diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 8dd2cd0cda..6201c83dd4 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -3,13 +3,15 @@ $black: #000000; // Black $white: #ffffff; // White $red-600: #b7253d !default; // Deep Carmine $red-500: #df405a !default; // Cerise -$blurple-600: #563acc; // Iris -$blurple-500: #6364ff; // Brand purple -$blurple-400: #7477fd; // Medium slate blue -$blurple-300: #858afa; // Faded Blue $grey-600: hsl(240deg, 8%, 33%); // Trout $grey-100: hsl(240deg, 51%, 90%); // Topaz +$cardinal-700: hsla(359deg, 23%, 35%, 100%); +$cardinal-600: hsla(5deg, 67%, 32%, 100%); +$cardinal-500: hsla(5deg, 72%, 38%, 100%); +$cardinal-400: hsla(9deg, 60%, 44%, 100%); +$cardinal-300: hsla(6deg, 85%, 44%, 100%); + $success-green: #79bd9a !default; // Padua $error-red: $red-500 !default; // Cerise $warning-red: #ff5050 !default; // Sunset Orange @@ -17,43 +19,43 @@ $gold-star: #ca8f04 !default; // Dark Goldenrod $red-bookmark: $warning-red; -// Values from the classic Mastodon UI -$classic-base-color: hsl(240deg, 16%, 19%); -$classic-primary-color: hsl(240deg, 29%, 70%); -$classic-secondary-color: hsl(255deg, 25%, 88%); -$classic-highlight-color: $blurple-500; +$shrike-base-color: hsla(20deg, 7%, 19%, 100%); +$shrike-primary-color: hsla(36deg, 17%, 57%, 100%); +$shrike-secondary-color: hsla(37deg, 35%, 79%, 100%); +$shrike-highlight-color: $cardinal-500; // Variables for defaults in UI $base-shadow-color: $black !default; $base-overlay-background: $black !default; -$base-border-color: $white !default; +$base-border-color: #00000000 !default; $simple-background-color: $white !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; // Darkest +$ui-base-color: $shrike-base-color !default; // Darkest +$ui-base-over-color: lighten($ui-base-color, 3%) !default; // Lighter darkest $ui-base-lighter-color: lighten( $ui-base-color, 26% ) !default; // Lighter darkest -$ui-primary-color: $classic-primary-color !default; // Lighter -$ui-secondary-color: $classic-secondary-color !default; // Lightest -$ui-highlight-color: $classic-highlight-color !default; +$ui-primary-color: $shrike-primary-color !default; // Lighter +$ui-secondary-color: $shrike-secondary-color !default; // Lightest +$ui-highlight-color: $shrike-highlight-color !default; $ui-button-color: $white !default; -$ui-button-background-color: $blurple-500 !default; -$ui-button-focus-background-color: $blurple-600 !default; -$ui-button-focus-outline-color: $blurple-400 !default; +$ui-button-background-color: $cardinal-500 !default; +$ui-button-focus-background-color: $cardinal-600 !default; +$ui-button-focus-outline-color: $cardinal-400 !default; $ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default; -$ui-button-secondary-color: $blurple-500 !default; -$ui-button-secondary-border-color: $blurple-500 !default; -$ui-button-secondary-focus-border-color: $blurple-300 !default; -$ui-button-secondary-focus-color: $blurple-300 !default; +$ui-button-secondary-color: $cardinal-500 !default; +$ui-button-secondary-border-color: $cardinal-500 !default; +$ui-button-secondary-focus-border-color: $cardinal-300 !default; +$ui-button-secondary-focus-color: $cardinal-300 !default; -$ui-button-tertiary-color: $blurple-300 !default; -$ui-button-tertiary-border-color: $blurple-300 !default; -$ui-button-tertiary-focus-background-color: $blurple-600 !default; +$ui-button-tertiary-color: $cardinal-300 !default; +$ui-button-tertiary-border-color: $cardinal-300 !default; +$ui-button-tertiary-focus-background-color: $cardinal-600 !default; $ui-button-tertiary-focus-color: $white !default; $ui-button-destructive-background-color: $red-500 !default; @@ -108,7 +110,7 @@ $dismiss-overlay-width: 4rem; --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)}; --modal-background-variant-color: #{rgba($ui-base-color, 0.7)}; --modal-border-color: #{lighten($ui-base-color, 4%)}; - --background-border-color: #{lighten($ui-base-color, 4%)}; + --background-border-color: #00000000; --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); --background-color: #{darken($ui-base-color, 8%)}; --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)}; diff --git a/app/javascript/flavours/vanilla/names.yml b/app/javascript/flavours/vanilla/names.yml deleted file mode 100644 index 9b7fc189d4..0000000000 --- a/app/javascript/flavours/vanilla/names.yml +++ /dev/null @@ -1,41 +0,0 @@ -en: - flavours: - vanilla: - description: The theme used by vanilla Mastodon instances. This theme might not support all of the features of GlitchSoc. - name: Vanilla Mastodon - skins: - vanilla: - default: Default -cs: - flavours: - vanilla: - description: Standardní rozhraní Mastodonu. Některé funkce GlitchSoc v něm nejsou podporované. - name: Standardní Mastodon - skins: - vanilla: - default: Výchozí -pl: - flavours: - vanilla: - description: Motyw używany przez instancje czystego Mastodona. Może nie obsługiwać wszystkich funkcji GlitchSoc. - name: Mastodon Vanilla - skins: - vanilla: - default: Domyślny -es: - flavours: - vanilla: - description: El diseño predeterminado en las instancias de Mastodon. Puede que no soporte todas las características de GlitchSoc. - name: Mastodon Original - skins: - vanilla: - default: Predeterminado - -ja: - flavours: - vanilla: - description: バニラのMastodonインスタンスで使われるテーマです。このテーマはGlitchSocのすべての機能をサポートしない可能性があります。 - name: Vanilla Mastodon - skins: - vanilla: - default: デフォルト diff --git a/app/javascript/flavours/vanilla/theme.yml b/app/javascript/flavours/vanilla/theme.yml deleted file mode 100644 index 0f531a3fe7..0000000000 --- a/app/javascript/flavours/vanilla/theme.yml +++ /dev/null @@ -1,17 +0,0 @@ -# (REQUIRED) The directory which contains the pack files. -pack_directory: app/javascript/entrypoints - -# (OPTIONAL) Define files to be preloaded when a logged-in user is -# visiting the main web app. -signed_in_preload: - - features/compose.js - - features/home_timeline.js - - features/notifications.js - -# (OPTIONAL) The directory which contains localization files for -# the flavour, relative to this directory. -locales: ../../mastodon/locales - -# (OPTIONAL) A file to use as the preview screenshot for the flavour, -# or an array thereof. These are the full path from `app/javascript/`. -screenshot: images/screenshot.png