Cleaning up.
This commit is contained in:
Tarrien committed
1 parent
06797bb5be
commit
d8f7558302
44 files changed
+4774
-6584
No files matched your search
@@ -1,8 +0,0 @@
|
||||
import 'packs/public-path';
|
||||
import Rails from '@rails/ujs';
|
||||
import 'flavours/glitch/styles/modern.scss';
|
||||
|
||||
start();
|
||||
|
||||
// This ensures that webpack compiles our images.
|
||||
require.context('../images', true);
|
||||
@@ -1,5 +0,0 @@
|
||||
@import 'index';
|
||||
|
||||
@import 'modern/modern';
|
||||
|
||||
@import 'modern/diff';
|
||||
@@ -1,295 +0,0 @@
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.compose-form__autosuggest-wrapper
|
||||
> :last-child {
|
||||
padding-bottom: 2em !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .compose-form__buttons {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.compose-form__buttons
|
||||
> div:last-child {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .compose-form__buttons-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .character-counter__wrapper {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
bottom: 100%;
|
||||
margin: 4px;
|
||||
border-radius: 6px;
|
||||
padding: 0.1em 0.5em;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.character-counter__wrapper
|
||||
span {
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content {
|
||||
height: auto !important;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.collapsed
|
||||
.status__content
|
||||
.status__content__text {
|
||||
mask: linear-gradient(to bottom, #000 50px, transparent) !important;
|
||||
-webkit-mask: linear-gradient(to bottom, #000 50px, transparent) !important;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.collapsed
|
||||
.status__content
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content br {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.collapsed
|
||||
.status__content::after {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.collapsed.muted
|
||||
.status__content__text
|
||||
~ * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.status:not(.status-direct)
|
||||
> .status__content {
|
||||
margin-block: -90px -100px !important;
|
||||
padding-block: 100px !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.status:not(.status-direct)
|
||||
> .status__content
|
||||
.status__content__text {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.status:not(.status-direct)
|
||||
> .status__content
|
||||
> :last-child:not(.status__content__text) {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .status .full-width {
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .status .status__action-bar {
|
||||
position: static;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.status__info
|
||||
.notification__message {
|
||||
padding-top: 0 !important;
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .status__display-name {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .display-name__account {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.media-gallery__item
|
||||
> .media-gallery__preview {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .status__action-bar-spacer {
|
||||
min-width: 5px;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .status__relative-time {
|
||||
margin-inline: auto 5px !important;
|
||||
z-index: 2;
|
||||
flex-grow: 0 !important;
|
||||
min-width: 5ch !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .reactions-bar {
|
||||
width: unset;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button {
|
||||
border-radius: 6px !important;
|
||||
padding-block: 2px;
|
||||
}
|
||||
@media (pointer: coarse) {
|
||||
body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button {
|
||||
padding: 4px 8px !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.reactions-bar
|
||||
button
|
||||
.reactions-bar__item__emoji {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .reactions-bar:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.collapsed
|
||||
> .status__info
|
||||
.notification__message {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.notification
|
||||
> .notification__message {
|
||||
padding-inline: 15px !important;
|
||||
padding-top: 18px !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .notification .account {
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.notification__favourite-icon-wrapper {
|
||||
position: static;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.notification__favourite-icon-wrapper
|
||||
i {
|
||||
width: 1.28571429em !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .status__prepend,
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.status__info
|
||||
.notification__message {
|
||||
padding-bottom: 15px !important;
|
||||
padding-top: 0 !important;
|
||||
margin-top: -5px !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.status__prepend
|
||||
.status__prepend-icon-wrapper,
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.status__info
|
||||
.notification__message
|
||||
.status__prepend-icon-wrapper {
|
||||
all: unset;
|
||||
margin-inline-end: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.status__prepend
|
||||
.status__prepend-icon-wrapper
|
||||
i,
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.status__info
|
||||
.notification__message
|
||||
.status__prepend-icon-wrapper
|
||||
i {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.detailed-status__wrapper
|
||||
.focusable:not(.status)::before {
|
||||
content: unset !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .setting-text {
|
||||
border-radius: 0 !important;
|
||||
margin: 4px;
|
||||
width: calc(100% - 8px);
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .column-settings__pillbar {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch > #mastodon .pillbar-button {
|
||||
border-radius: 0 !important;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.account-card
|
||||
.media-modal__close {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
body.app-body.flavour-modern-glitch
|
||||
> #mastodon
|
||||
.account-card
|
||||
.media-modal__close::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -60px -30px;
|
||||
background: linear-gradient(to right, #000, transparent);
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.layout-multiple-columns.flavour-modern-glitch .drawer__inner {
|
||||
margin-top: -10px;
|
||||
padding-top: 30px !important;
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,3 +0,0 @@
|
||||
@import 'wobbl-light/variables';
|
||||
@import 'index';
|
||||
@import 'mastodon-light/diff';
|
||||
@@ -1,60 +0,0 @@
|
||||
// Dependent colors
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
|
||||
$classic-base-color: #191919;
|
||||
$classic-primary-color: #e7e7e7;
|
||||
$classic-secondary-color: #ff8680;
|
||||
$classic-highlight-color: #850700;
|
||||
|
||||
$blurple-600: #cc3939; // Iris
|
||||
$blurple-500: #850700; // Brand purple
|
||||
$blurple-300: #fa8484; // Faded Blue
|
||||
$grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
|
||||
// Differences
|
||||
$success-green: lighten(#3c754d, 8%);
|
||||
|
||||
$base-overlay-background: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
|
||||
$ui-base-color: $classic-primary-color !default;
|
||||
$ui-base-lighter-color: #b0c0cf;
|
||||
$ui-primary-color: #9bcbed;
|
||||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: $classic-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-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;
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$highlight-text-color: darken($ui-highlight-color, 8%) !default;
|
||||
$dark-text-color: #444b5d;
|
||||
$action-button-color: #606984;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: $classic-base-color !default;
|
||||
$light-text-color: #444b5d;
|
||||
|
||||
// Newly added colors
|
||||
$account-background-color: $white !default;
|
||||
|
||||
// Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||||
}
|
||||
|
||||
$emojis-requiring-inversion: 'chains';
|
||||
@@ -1,101 +0,0 @@
|
||||
// Commonly used web colors
|
||||
$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-300: #858afa; // Faded Blue
|
||||
$grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
|
||||
$success-green: #79bd9a !default; // Padua
|
||||
$error-red: $red-500 !default; // Cerise
|
||||
$warning-red: #ff5050 !default; // Sunset Orange
|
||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||
|
||||
$red-bookmark: $warning-red;
|
||||
|
||||
// Values from the classic Mastodon UI
|
||||
$classic-base-color: #191919;// Dark Gray
|
||||
$classic-primary-color: #E7E7E7;// Platinum
|
||||
$classic-secondary-color: #FF8680; // Paler red
|
||||
$classic-highlight-color: #850700; // Red highlights
|
||||
|
||||
// Variables for defaults in UI
|
||||
$base-shadow-color: $black !default;
|
||||
$base-overlay-background: $black !default;
|
||||
$base-border-color: $white !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-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-button-color: $white !default;
|
||||
$ui-button-background-color: $blurple-500 !default;
|
||||
$ui-button-focus-background-color: $blurple-600 !default;
|
||||
|
||||
$ui-button-secondary-color: $grey-100 !default;
|
||||
$ui-button-secondary-border-color: $grey-100 !default;
|
||||
$ui-button-secondary-focus-background-color: $grey-600 !default;
|
||||
$ui-button-secondary-focus-color: $white !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-focus-color: $white !default;
|
||||
|
||||
$ui-button-destructive-background-color: $red-500 !default;
|
||||
$ui-button-destructive-focus-background-color: $red-600 !default;
|
||||
|
||||
// Variables for texts
|
||||
$primary-text-color: $white !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;
|
||||
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
|
||||
$passive-text-color: $gold-star !default;
|
||||
$active-passive-text-color: $success-green !default;
|
||||
|
||||
// For texts on inverted backgrounds
|
||||
$inverted-text-color: $ui-base-color !default;
|
||||
$lighter-text-color: $ui-base-lighter-color !default;
|
||||
$light-text-color: $ui-primary-color !default;
|
||||
|
||||
// Language codes that uses CJK fonts
|
||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||
|
||||
// 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%;
|
||||
|
||||
$no-gap-breakpoint: 1175px;
|
||||
|
||||
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||||
$font-display: 'mastodon-font-display' !default;
|
||||
$font-monospace: 'mastodon-font-monospace' !default;
|
||||
|
||||
// Avatar border size (8% default, 100% for rounded avatars)
|
||||
$ui-avatar-border-size: 8%;
|
||||
|
||||
// More variables
|
||||
$dismiss-overlay-width: 4rem;
|
||||
|
||||
:root {
|
||||
--dropdown-border-color: #{lighten($ui-base-color, 12%)};
|
||||
--dropdown-background-color: #{lighten($ui-base-color, 4%)};
|
||||
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
|
||||
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
@import 'wobbl-old-light/variables';
|
||||
@import 'index';
|
||||
@import 'mastodon-light/diff';
|
||||
@@ -1,60 +0,0 @@
|
||||
// Dependent colors
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
|
||||
$classic-base-color: #191918;
|
||||
$classic-primary-color: #e7e7e7;
|
||||
$classic-secondary-color: #8c562a;
|
||||
$classic-highlight-color: #c45302;
|
||||
|
||||
$blurple-600: #c45302; // Iris
|
||||
$blurple-500: #fd8128; // Brand purple
|
||||
$blurple-300: #fda15f; // Faded Blue
|
||||
$grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
|
||||
// Differences
|
||||
$success-green: lighten(#3c754d, 8%);
|
||||
|
||||
$base-overlay-background: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
|
||||
$ui-base-color: $classic-primary-color !default;
|
||||
$ui-base-lighter-color: #b0c0cf;
|
||||
$ui-primary-color: #9bcbed;
|
||||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: $classic-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-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;
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$highlight-text-color: darken($ui-highlight-color, 8%) !default;
|
||||
$dark-text-color: #444b5d;
|
||||
$action-button-color: #606984;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: $classic-base-color !default;
|
||||
$light-text-color: #444b5d;
|
||||
|
||||
// Newly added colors
|
||||
$account-background-color: $white !default;
|
||||
|
||||
// Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||||
}
|
||||
|
||||
$emojis-requiring-inversion: 'chains';
|
||||
@@ -1,101 +0,0 @@
|
||||
// Commonly used web colors
|
||||
$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-300: #858afa; // Faded Blue
|
||||
$grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
|
||||
$success-green: #79bd9a !default; // Padua
|
||||
$error-red: $red-500 !default; // Cerise
|
||||
$warning-red: #ff5050 !default; // Sunset Orange
|
||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||
|
||||
$red-bookmark: $warning-red;
|
||||
|
||||
// Values from the classic Mastodon UI
|
||||
$classic-base-color: #191919;// Dark Gray
|
||||
$classic-primary-color: #E7E7E7;// Platinum
|
||||
$classic-secondary-color: #FF8680; // Paler red
|
||||
$classic-highlight-color: #850700; // Red highlights
|
||||
|
||||
// Variables for defaults in UI
|
||||
$base-shadow-color: $black !default;
|
||||
$base-overlay-background: $black !default;
|
||||
$base-border-color: $white !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-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-button-color: $white !default;
|
||||
$ui-button-background-color: $blurple-500 !default;
|
||||
$ui-button-focus-background-color: $blurple-600 !default;
|
||||
|
||||
$ui-button-secondary-color: $grey-100 !default;
|
||||
$ui-button-secondary-border-color: $grey-100 !default;
|
||||
$ui-button-secondary-focus-background-color: $grey-600 !default;
|
||||
$ui-button-secondary-focus-color: $white !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-focus-color: $white !default;
|
||||
|
||||
$ui-button-destructive-background-color: $red-500 !default;
|
||||
$ui-button-destructive-focus-background-color: $red-600 !default;
|
||||
|
||||
// Variables for texts
|
||||
$primary-text-color: $white !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;
|
||||
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
|
||||
$passive-text-color: $gold-star !default;
|
||||
$active-passive-text-color: $success-green !default;
|
||||
|
||||
// For texts on inverted backgrounds
|
||||
$inverted-text-color: $ui-base-color !default;
|
||||
$lighter-text-color: $ui-base-lighter-color !default;
|
||||
$light-text-color: $ui-primary-color !default;
|
||||
|
||||
// Language codes that uses CJK fonts
|
||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||
|
||||
// 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%;
|
||||
|
||||
$no-gap-breakpoint: 1175px;
|
||||
|
||||
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||||
$font-display: 'mastodon-font-display' !default;
|
||||
$font-monospace: 'mastodon-font-monospace' !default;
|
||||
|
||||
// Avatar border size (8% default, 100% for rounded avatars)
|
||||
$ui-avatar-border-size: 8%;
|
||||
|
||||
// More variables
|
||||
$dismiss-overlay-width: 4rem;
|
||||
|
||||
:root {
|
||||
--dropdown-border-color: #{lighten($ui-base-color, 12%)};
|
||||
--dropdown-background-color: #{lighten($ui-base-color, 4%)};
|
||||
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
|
||||
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
@import 'wobbl-old/variables';
|
||||
@import 'index';
|
||||
@@ -1,101 +0,0 @@
|
||||
// Commonly used web colors
|
||||
$black: #000000; // Black
|
||||
$white: #ffffff; // White
|
||||
$red-600: #b7253d !default; // Deep Carmine
|
||||
$red-500: #df405a !default; // Cerise
|
||||
$blurple-600: #c45302; // Iris
|
||||
$blurple-500: #fd8128; // Brand purple
|
||||
$blurple-300: #fda15f; // Faded Blue
|
||||
$grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
|
||||
$success-green: #79bd9a !default; // Padua
|
||||
$error-red: $red-500 !default; // Cerise
|
||||
$warning-red: #ff5050 !default; // Sunset Orange
|
||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||
|
||||
$red-bookmark: $warning-red;
|
||||
|
||||
// Values from the classic Mastodon UI
|
||||
$classic-base-color: #37210f; // Dark Gray
|
||||
$classic-primary-color: #e7e7e7; // Platinum
|
||||
$classic-secondary-color: #e7e7e7; // Paler red
|
||||
$classic-highlight-color: #c45302; // Red highlights
|
||||
|
||||
// Variables for defaults in UI
|
||||
$base-shadow-color: $black !default;
|
||||
$base-overlay-background: $black !default;
|
||||
$base-border-color: $white !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-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-button-color: $white !default;
|
||||
$ui-button-background-color: $blurple-500 !default;
|
||||
$ui-button-focus-background-color: $blurple-600 !default;
|
||||
|
||||
$ui-button-secondary-color: $grey-100 !default;
|
||||
$ui-button-secondary-border-color: $grey-100 !default;
|
||||
$ui-button-secondary-focus-background-color: $grey-600 !default;
|
||||
$ui-button-secondary-focus-color: $white !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-focus-color: $white !default;
|
||||
|
||||
$ui-button-destructive-background-color: $red-500 !default;
|
||||
$ui-button-destructive-focus-background-color: $red-600 !default;
|
||||
|
||||
// Variables for texts
|
||||
$primary-text-color: $white !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;
|
||||
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
|
||||
$passive-text-color: $gold-star !default;
|
||||
$active-passive-text-color: $success-green !default;
|
||||
|
||||
// For texts on inverted backgrounds
|
||||
$inverted-text-color: $ui-base-color !default;
|
||||
$lighter-text-color: $ui-base-lighter-color !default;
|
||||
$light-text-color: $ui-primary-color !default;
|
||||
|
||||
// Language codes that uses CJK fonts
|
||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||
|
||||
// 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%;
|
||||
|
||||
$no-gap-breakpoint: 1175px;
|
||||
|
||||
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||||
$font-display: 'mastodon-font-display' !default;
|
||||
$font-monospace: 'mastodon-font-monospace' !default;
|
||||
|
||||
// Avatar border size (8% default, 100% for rounded avatars)
|
||||
$ui-avatar-border-size: 8%;
|
||||
|
||||
// More variables
|
||||
$dismiss-overlay-width: 4rem;
|
||||
|
||||
:root {
|
||||
--dropdown-border-color: #{lighten($ui-base-color, 12%)};
|
||||
--dropdown-background-color: #{lighten($ui-base-color, 4%)};
|
||||
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
|
||||
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
@import 'wobbl/variables';
|
||||
@import 'index';
|
||||
@@ -1,101 +0,0 @@
|
||||
// Commonly used web colors
|
||||
$black: #000000; // Black
|
||||
$white: #ffffff; // White
|
||||
$red-600: #b7253d !default; // Deep Carmine
|
||||
$red-500: #df405a !default; // Cerise
|
||||
$blurple-600: #cc3939; // Iris
|
||||
$blurple-500: #850700; // Brand purple
|
||||
$blurple-300: #fa8484; // Faded Blue
|
||||
$grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
|
||||
$success-green: #79bd9a !default; // Padua
|
||||
$error-red: $red-500 !default; // Cerise
|
||||
$warning-red: #ff5050 !default; // Sunset Orange
|
||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||
|
||||
$red-bookmark: $warning-red;
|
||||
|
||||
// Values from the classic Mastodon UI
|
||||
$classic-base-color: #191919; // Dark Gray
|
||||
$classic-primary-color: #e7e7e7; // Platinum
|
||||
$classic-secondary-color: #ff8680; // Paler red
|
||||
$classic-highlight-color: #850700; // Red highlights
|
||||
|
||||
// Variables for defaults in UI
|
||||
$base-shadow-color: $black !default;
|
||||
$base-overlay-background: $black !default;
|
||||
$base-border-color: $white !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-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-button-color: $white !default;
|
||||
$ui-button-background-color: $blurple-500 !default;
|
||||
$ui-button-focus-background-color: $blurple-600 !default;
|
||||
|
||||
$ui-button-secondary-color: $grey-100 !default;
|
||||
$ui-button-secondary-border-color: $grey-100 !default;
|
||||
$ui-button-secondary-focus-background-color: $grey-600 !default;
|
||||
$ui-button-secondary-focus-color: $white !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-focus-color: $white !default;
|
||||
|
||||
$ui-button-destructive-background-color: $red-500 !default;
|
||||
$ui-button-destructive-focus-background-color: $red-600 !default;
|
||||
|
||||
// Variables for texts
|
||||
$primary-text-color: $white !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;
|
||||
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
|
||||
$passive-text-color: $gold-star !default;
|
||||
$active-passive-text-color: $success-green !default;
|
||||
|
||||
// For texts on inverted backgrounds
|
||||
$inverted-text-color: $ui-base-color !default;
|
||||
$lighter-text-color: $ui-base-lighter-color !default;
|
||||
$light-text-color: $ui-primary-color !default;
|
||||
|
||||
// Language codes that uses CJK fonts
|
||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||
|
||||
// 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%;
|
||||
|
||||
$no-gap-breakpoint: 1175px;
|
||||
|
||||
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||||
$font-display: 'mastodon-font-display' !default;
|
||||
$font-monospace: 'mastodon-font-monospace' !default;
|
||||
|
||||
// Avatar border size (8% default, 100% for rounded avatars)
|
||||
$ui-avatar-border-size: 8%;
|
||||
|
||||
// More variables
|
||||
$dismiss-overlay-width: 4rem;
|
||||
|
||||
:root {
|
||||
--dropdown-border-color: #{lighten($ui-base-color, 12%)};
|
||||
--dropdown-background-color: #{lighten($ui-base-color, 4%)};
|
||||
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
|
||||
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
en:
|
||||
flavours:
|
||||
modern-glitch:
|
||||
description: Modern Mastodon theme - with Glitch-SOC support
|
||||
name: Modern - Glitch
|
||||
skins:
|
||||
modern-glitch:
|
||||
default: Default
|
||||
@@ -1,49 +0,0 @@
|
||||
# (REQUIRED) The location of the pack files.
|
||||
pack:
|
||||
admin:
|
||||
- packs/admin.jsx
|
||||
- packs/public.jsx
|
||||
auth: packs/public.jsx
|
||||
common:
|
||||
filename: packs/common-modern.js
|
||||
stylesheet: true
|
||||
embed: packs/public.jsx
|
||||
error: packs/error.js
|
||||
home:
|
||||
filename: packs/home.js
|
||||
preload:
|
||||
- flavours/glitch/async/compose
|
||||
- flavours/glitch/async/getting_started
|
||||
- flavours/glitch/async/home_timeline
|
||||
- flavours/glitch/async/notifications
|
||||
mailer:
|
||||
modal:
|
||||
public: packs/public.jsx
|
||||
settings: packs/settings.js
|
||||
sign_up: packs/sign_up.js
|
||||
share: packs/share.jsx
|
||||
|
||||
# (OPTIONAL) The directory which contains localization files for
|
||||
# the flavour, relative to this directory. The contents of this
|
||||
# directory must be `.json` files whose names correspond to
|
||||
# language tags and whose default exports are a messages object.
|
||||
locales: locales
|
||||
|
||||
# (OPTIONAL) Which flavour to inherit locales from
|
||||
inherit_locales: vanilla
|
||||
|
||||
# (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: flavours/glitch/images/modern-preview.jpg
|
||||
|
||||
# (OPTIONAL) The directory which contains the pack files.
|
||||
# Defaults to the theme directory (`app/javascript/themes/[theme]`),
|
||||
# which should be sufficient for like 99% of use-cases lol.
|
||||
|
||||
pack_directory: app/javascript/flavours/glitch
|
||||
|
||||
# (OPTIONAL) By default the theme will fallback to the default theme
|
||||
# if a particular pack is not provided. You can specify different
|
||||
# fallbacks here, or disable fallback behaviours altogether by
|
||||
# specifying a `null` value.
|
||||
fallback:
|
||||
@@ -1 +0,0 @@
|
||||
@import 'flavours/glitch/styles/wobbl-light';
|
||||
@@ -1,4 +0,0 @@
|
||||
en:
|
||||
skins:
|
||||
glitch:
|
||||
wobbl-light: Wobbl (light)
|
||||
@@ -1 +0,0 @@
|
||||
@import 'flavours/glitch/styles/wobbl-old-light';
|
||||
@@ -1,4 +0,0 @@
|
||||
en:
|
||||
skins:
|
||||
glitch:
|
||||
wobbl-old-light: Wobbl Orange (light)
|
||||
@@ -1 +0,0 @@
|
||||
@import 'flavours/glitch/styles/wobbl-old';
|
||||
@@ -1,4 +0,0 @@
|
||||
en:
|
||||
skins:
|
||||
glitch:
|
||||
wobbl-old: Wobbl Orange
|
||||
@@ -1 +0,0 @@
|
||||
@import 'flavours/glitch/styles/wobbl';
|
||||
@@ -1,4 +0,0 @@
|
||||
en:
|
||||
skins:
|
||||
glitch:
|
||||
wobbl: Wobbl
|
||||
@@ -1,3 +0,0 @@
|
||||
@import 'flavours/glitch/styles/mastodon-light/variables';
|
||||
@import 'flavours/glitch/styles/modern';
|
||||
@import 'flavours/glitch/styles/mastodon-light/diff';
|
||||
@@ -1,4 +0,0 @@
|
||||
en:
|
||||
skins:
|
||||
modern-glitch:
|
||||
modern-light: Default (light)
|
||||
@@ -1,3 +0,0 @@
|
||||
@import 'flavours/glitch/styles/wobbl-light/variables';
|
||||
@import 'flavours/glitch/styles/modern';
|
||||
@import 'flavours/glitch/styles/mastodon-light/diff';
|
||||
@@ -1,4 +0,0 @@
|
||||
en:
|
||||
skins:
|
||||
modern-glitch:
|
||||
wobbl-modern-light: Wobbl Red (light)
|
||||
@@ -1,2 +0,0 @@
|
||||
@import 'flavours/glitch/styles/wobbl/variables';
|
||||
@import 'flavours/glitch/styles/modern';
|
||||
@@ -1,4 +0,0 @@
|
||||
en:
|
||||
skins:
|
||||
modern-glitch:
|
||||
wobbl-modern: Wobbl Red
|
||||
@@ -1,3 +0,0 @@
|
||||
@import 'flavours/glitch/styles/wobbl-old-light/variables';
|
||||
@import 'flavours/glitch/styles/modern';
|
||||
@import 'flavours/glitch/styles/mastodon-light/diff';
|
||||
@@ -1,4 +0,0 @@
|
||||
en:
|
||||
skins:
|
||||
modern-glitch:
|
||||
wobbl-old-modern-light: Wobbl Orange (light)
|
||||
@@ -1,2 +0,0 @@
|
||||
@import 'flavours/glitch/styles/wobbl-old/variables';
|
||||
@import 'flavours/glitch/styles/modern';
|
||||
@@ -1,4 +0,0 @@
|
||||
en:
|
||||
skins:
|
||||
modern-glitch:
|
||||
wobbl-old-modern: Wobbl Orange
|
||||
Reference in new issue
Block a user