Merge tag 'v4.4.0-rc.1' into chinwag-next
This commit is contained in:
commit
fbbcaf4efd
2660 changed files with 83548 additions and 52192 deletions
21
app/javascript/styles/mastodon-light/css_variables.scss
Normal file
21
app/javascript/styles/mastodon-light/css_variables.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
@use 'sass:color';
|
||||
@use '../mastodon/variables' as *;
|
||||
@use 'variables' as *;
|
||||
@use '../mastodon/functions' as *;
|
||||
|
||||
body {
|
||||
--dropdown-border-color: hsl(240deg, 25%, 88%);
|
||||
--dropdown-background-color: #fff;
|
||||
--modal-border-color: hsl(240deg, 25%, 88%);
|
||||
--modal-background-color: var(--background-color-tint);
|
||||
--background-border-color: hsl(240deg, 25%, 88%);
|
||||
--background-color: #fff;
|
||||
--background-color-tint: rgba(255, 255, 255, 80%);
|
||||
--background-filter: blur(10px);
|
||||
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
|
||||
--rich-text-container-color: rgba(255, 216, 231, 100%);
|
||||
--rich-text-text-color: rgba(114, 47, 83, 100%);
|
||||
--rich-text-decorations-color: rgba(255, 175, 212, 100%);
|
||||
--input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
|
||||
--input-background-color: #{darken($ui-base-color, 10%)};
|
||||
}
|
||||
|
|
@ -1,8 +1,17 @@
|
|||
// Notes!
|
||||
// Sass color functions, "darken" and "lighten" are automatically replaced.
|
||||
@use 'sass:color';
|
||||
@use '../mastodon/functions' as *;
|
||||
@use '../mastodon/variables' as *;
|
||||
|
||||
.simple_form .button.button-tertiary {
|
||||
color: $highlight-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.status-card__actions button,
|
||||
|
|
@ -87,18 +96,6 @@
|
|||
color: $white;
|
||||
}
|
||||
|
||||
.search__input {
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-editor .search .search__input {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.upload-progress__backdrop {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
|
@ -108,17 +105,6 @@
|
|||
background: lighten($white, 4%);
|
||||
}
|
||||
|
||||
// Change the background colors of status__content__spoiler-link
|
||||
.reply-indicator__content .status__content__spoiler-link,
|
||||
.status__content .status__content__spoiler-link {
|
||||
background: $ui-base-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.account-gallery__item a {
|
||||
background-color: $ui-base-color;
|
||||
}
|
||||
|
|
@ -132,9 +118,7 @@
|
|||
.actions-modal ul li:not(:empty) a:focus button,
|
||||
.actions-modal ul li:not(:empty) a:hover,
|
||||
.actions-modal ul li:not(:empty) a:hover button,
|
||||
.simple_form .block-button,
|
||||
.simple_form .button,
|
||||
.simple_form button {
|
||||
.simple_form button:not(.button, .link-button) {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
|
@ -147,6 +131,11 @@
|
|||
border-top-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.dialog-modal__content__preview {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.reactions-bar__item:hover,
|
||||
.reactions-bar__item:focus,
|
||||
.reactions-bar__item:active {
|
||||
|
|
@ -154,8 +143,12 @@
|
|||
}
|
||||
|
||||
.reactions-bar__item.active {
|
||||
background-color: mix($white, $ui-highlight-color, 80%);
|
||||
border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
|
||||
background-color: color.mix($white, $ui-highlight-color, 80%);
|
||||
border-color: color.mix(
|
||||
lighten($ui-base-color, 8%),
|
||||
$ui-highlight-color,
|
||||
80%
|
||||
);
|
||||
}
|
||||
|
||||
.media-modal__overlay .picture-in-picture__footer {
|
||||
|
|
@ -244,7 +237,7 @@
|
|||
|
||||
// Change the default colors used on some parts of the profile pages
|
||||
.activity-stream-tabs {
|
||||
background: $account-background-color;
|
||||
background: $white;
|
||||
border-bottom-color: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
|
|
@ -278,36 +271,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
&--under-tabs {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.entry {
|
||||
background: $account-background-color;
|
||||
|
||||
.detailed-status.light,
|
||||
.more.light,
|
||||
.status.light {
|
||||
border-bottom-color: lighten($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.status.light {
|
||||
.status__content {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accounts-grid {
|
||||
.account-grid-card {
|
||||
.controls {
|
||||
|
|
@ -411,13 +374,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mute-modal select {
|
||||
border: 1px solid var(--background-border-color);
|
||||
background: $simple-background-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
}
|
||||
|
||||
.status__wrapper-direct {
|
||||
background-color: rgba($ui-highlight-color, 0.1);
|
||||
|
||||
|
|
@ -447,17 +403,35 @@
|
|||
color: lighten($ui-highlight-color, 8%);
|
||||
}
|
||||
|
||||
.compose-form .autosuggest-textarea__textarea,
|
||||
.compose-form__highlightable,
|
||||
.autosuggest-textarea__suggestions,
|
||||
.search__input,
|
||||
.search__popout,
|
||||
.emoji-mart-search input,
|
||||
.language-dropdown__dropdown .emoji-mart-search input,
|
||||
.poll__option input[type='text'] {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
.dropdown-button.warning {
|
||||
border-color: #b3261e;
|
||||
color: #b3261e;
|
||||
|
||||
&.active {
|
||||
background-color: #f9dedc;
|
||||
}
|
||||
}
|
||||
|
||||
.search__popout__menu__item {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: $white;
|
||||
|
||||
mark,
|
||||
.icon-button {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inline-follow-suggestions {
|
||||
background-color: rgba($ui-highlight-color, 0.1);
|
||||
border-bottom-color: rgba($ui-highlight-color, 0.3);
|
||||
|
|
@ -525,6 +499,13 @@ a.sparkline {
|
|||
}
|
||||
}
|
||||
|
||||
.notification-group--annual-report {
|
||||
.notification-group__icon,
|
||||
.notification-group__main .link-button {
|
||||
color: var(--indigo-3);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not selector(::-webkit-scrollbar) {
|
||||
html {
|
||||
scrollbar-color: rgba($action-button-color, 0.25)
|
||||
|
|
@ -532,6 +513,8 @@ a.sparkline {
|
|||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
opacity: 0.25;
|
||||
.custom-scrollbars {
|
||||
::-webkit-scrollbar-thumb {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,79 +1,46 @@
|
|||
@use 'sass:color';
|
||||
|
||||
// Dependent colors
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
@use '../mastodon/functions' with (
|
||||
$darken-multiplier: 1,
|
||||
$lighten-multiplier: -1
|
||||
);
|
||||
|
||||
$classic-base-color: #282c37;
|
||||
$classic-primary-color: #bdacbb;
|
||||
$classic-secondary-color: #e0e0d8;
|
||||
$classic-highlight-color: #2c7130;
|
||||
$black: #000; // Black
|
||||
$white: #fff; // White
|
||||
$blurple-500: #1dac1b; // Brand green
|
||||
$grey-600: hsl(240deg, 8%, 33%); // Trout
|
||||
$grey-100: hsl(240deg, 51%, 90%); // Topaz
|
||||
|
||||
$blurple-600: #3b953f; // Deeper green
|
||||
$blurple-500: #1dac1b; // Lighter than that
|
||||
$blurple-300: #94e47c; // Urgh blurple is the worst
|
||||
$grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
||||
$classic-highlight-color: $blurple-500;
|
||||
|
||||
// Differences
|
||||
$success-green: lighten(hsl(138deg, 32%, 35%), 8%);
|
||||
@use '../mastodon/variables' with (
|
||||
$success-green: color.adjust(
|
||||
hsl(138deg, 32%, 35%),
|
||||
$lightness: 8%,
|
||||
$space: hsl
|
||||
),
|
||||
$base-overlay-background: $white,
|
||||
|
||||
$base-overlay-background: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
$ui-base-color: $classic-secondary-color,
|
||||
$ui-base-lighter-color: hsl(250deg, 24%, 75%),
|
||||
$ui-secondary-color: $classic-base-color,
|
||||
|
||||
$ui-base-color: $classic-secondary-color !default;
|
||||
$ui-base-lighter-color: #6abf69;
|
||||
$ui-primary-color: #c3cec3;
|
||||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
$ui-button-secondary-color: $grey-600,
|
||||
$ui-button-secondary-border-color: $grey-600,
|
||||
$ui-button-secondary-focus-color: $white,
|
||||
$ui-button-tertiary-color: $blurple-500,
|
||||
$ui-button-tertiary-border-color: $blurple-500,
|
||||
|
||||
$ui-button-secondary-color: $grey-600 !default;
|
||||
$ui-button-secondary-border-color: $grey-600 !default;
|
||||
$ui-button-secondary-focus-color: $white !default;
|
||||
$primary-text-color: $black,
|
||||
$darker-text-color: $classic-base-color,
|
||||
$lighter-text-color: $classic-base-color,
|
||||
$highlight-text-color: $classic-highlight-color,
|
||||
$dark-text-color: hsl(240deg, 16%, 32%),
|
||||
$light-text-color: hsl(240deg, 16%, 32%),
|
||||
$inverted-text-color: $black,
|
||||
|
||||
$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: #5e5066;
|
||||
$action-button-color: #495542;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: $classic-base-color !default;
|
||||
$light-text-color: #7b807b;
|
||||
|
||||
// Newly added colors
|
||||
$account-background-color: $white !default;
|
||||
|
||||
// Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return hsl(
|
||||
hue($color),
|
||||
color.channel($color, 'saturation', $space: hsl),
|
||||
color.channel($color, 'lightness', $space: hsl) + $amount
|
||||
);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return hsl(
|
||||
hue($color),
|
||||
color.channel($color, 'saturation', $space: hsl),
|
||||
color.channel($color, 'lightness', $space: hsl) - $amount
|
||||
);
|
||||
}
|
||||
|
||||
$emojis-requiring-inversion: 'chains';
|
||||
|
||||
body {
|
||||
--dropdown-border-color: hsl(240deg, 25%, 88%);
|
||||
--dropdown-background-color: #fff;
|
||||
--modal-border-color: hsl(240deg, 25%, 88%);
|
||||
--modal-background-color: var(--background-color-tint);
|
||||
--background-border-color: hsl(240deg, 25%, 88%);
|
||||
--background-color: #fff;
|
||||
--background-color-tint: rgba(255, 255, 255, 80%);
|
||||
--background-filter: blur(10px);
|
||||
--on-surface-color: #{transparentize($ui-base-color, 0.65)};
|
||||
}
|
||||
$action-button-color: hsl(240deg, 16%, 45%),
|
||||
$emojis-requiring-inversion: 'chains'
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue