shrike theming
parent
b06907e4e4
commit
3baf5ac4e1
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)};
|
||||
|
|
|
|||
|
|
@ -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: デフォルト
|
||||
|
|
@ -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
|
||||
Loading…
Reference in New Issue