tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge commit '255d8f3f8c6ece6a9f1fce9ea901d71577b92099' into glitch-soc/merge-upstream

Browse Source
This commit is contained in:
Claire 2025-08-18 22:05:19 +02:00
commit 4ffcf7f7ed
13 changed files with 155 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/reducers/compose.js
View File

@ -512,6 +512,8 @@ export const composeReducer = (state = initialState, action) => {
map.set('sensitive', action.status.get('sensitive')); map.set('sensitive', action.status.get('sensitive'));
map.set('language', action.status.get('language')); map.set('language', action.status.get('language'));
map.set('id', null); map.set('id', null);
// Mastodon-authored posts can be expected to have at most one automatic approval policy
map.set('quote_policy', action.status.getIn(['quote_approval', 'automatic', 0]) || 'nobody');
if (action.status.get('spoiler_text').length > 0) { if (action.status.get('spoiler_text').length > 0) {
map.set('spoiler', true); map.set('spoiler', true);
@ -541,6 +543,8 @@ export const composeReducer = (state = initialState, action) => {
map.set('idempotencyKey', uuid()); map.set('idempotencyKey', uuid());
map.set('sensitive', action.status.get('sensitive')); map.set('sensitive', action.status.get('sensitive'));
map.set('language', action.status.get('language')); map.set('language', action.status.get('language'));
// Mastodon-authored posts can be expected to have at most one automatic approval policy
map.set('quote_policy', action.status.getIn(['quote_approval', 'automatic', 0]) || 'nobody');
if (action.spoiler_text.length > 0) { if (action.spoiler_text.length > 0) {
map.set('spoiler', true); map.set('spoiler', true);

18
app/javascript/styles/mastodon-light/diff.scss
View File

@ -16,7 +16,7 @@
.status-card__actions button, .status-card__actions button,
.status-card__actions a { .status-card__actions a {
color: rgba($white, 0.8); color: color.change($white, $alpha: 0.8);
&:hover, &:hover,
&:active, &:active,
@ -298,14 +298,14 @@
.simple_form { .simple_form {
.warning { .warning {
box-shadow: none; box-shadow: none;
background: rgba($error-red, 0.5); background: color.change($error-red, $alpha: 0.5);
text-shadow: none; text-shadow: none;
} }
.recommended { .recommended {
border-color: $ui-highlight-color; border-color: $ui-highlight-color;
color: $ui-highlight-color; color: $ui-highlight-color;
background-color: rgba($ui-highlight-color, 0.1); background-color: color.change($ui-highlight-color, $alpha: 0.1);
} }
input[type='text'], input[type='text'],
@ -327,7 +327,7 @@
.compose-form .compose-form__warning { .compose-form .compose-form__warning {
border-color: $ui-highlight-color; border-color: $ui-highlight-color;
background-color: rgba($ui-highlight-color, 0.1); background-color: color.change($ui-highlight-color, $alpha: 0.1);
&, &,
a { a {
@ -375,10 +375,10 @@
} }
.status__wrapper-direct { .status__wrapper-direct {
background-color: rgba($ui-highlight-color, 0.1); background-color: color.change($ui-highlight-color, $alpha: 0.1);
&:focus { &:focus {
background-color: rgba($ui-highlight-color, 0.15); background-color: color.change($ui-highlight-color, $alpha: 0.15);
} }
} }
@ -433,8 +433,8 @@
} }
.inline-follow-suggestions { .inline-follow-suggestions {
background-color: rgba($ui-highlight-color, 0.1); background-color: color.change($ui-highlight-color, $alpha: 0.1);
border-bottom-color: rgba($ui-highlight-color, 0.3); border-bottom-color: color.change($ui-highlight-color, $alpha: 0.3);
} }
.inline-follow-suggestions__body__scrollable__card { .inline-follow-suggestions__body__scrollable__card {
@ -508,7 +508,7 @@ a.sparkline {
@supports not selector(::-webkit-scrollbar) { @supports not selector(::-webkit-scrollbar) {
html { html {
scrollbar-color: rgba($action-button-color, 0.25) scrollbar-color: color.change($action-button-color, $alpha: 0.25)
var(--background-border-color); var(--background-border-color);
} }
} }

3
app/javascript/styles/mastodon/_mixins.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
@use 'variables' as *; @use 'variables' as *;
@mixin search-input { @mixin search-input {
@ -22,7 +23,7 @@
padding-bottom: 14px; padding-bottom: 14px;
margin-top: 10px; margin-top: 10px;
color: $light-text-color; color: $light-text-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4);
h4 { h4 {
text-transform: uppercase; text-transform: uppercase;

15
app/javascript/styles/mastodon/accounts.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
@use 'variables' as *; @use 'variables' as *;
@use 'functions' as *; @use 'functions' as *;
@ -161,7 +162,7 @@
.nothing-here { .nothing-here {
background: $ui-base-color; background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
color: $darker-text-color; color: $darker-text-color;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -205,8 +206,8 @@
.simple_form .overridden, .simple_form .overridden,
.simple_form .recommended, .simple_form .recommended,
.simple_form .not_recommended { .simple_form .not_recommended {
background-color: rgba($ui-secondary-color, 0.1); background-color: color.change($ui-secondary-color, $alpha: 0.1);
border: 1px solid rgba($ui-secondary-color, 0.5); border: 1px solid color.change($ui-secondary-color, $alpha: 0.5);
} }
.account-role { .account-role {
@ -240,8 +241,8 @@
.information-badge { .information-badge {
&.superapp { &.superapp {
color: $success-green; color: $success-green;
background-color: rgba($success-green, 0.1); background-color: color.change($success-green, $alpha: 0.1);
border-color: rgba($success-green, 0.5); border-color: color.change($success-green, $alpha: 0.5);
} }
} }
@ -302,8 +303,8 @@
} }
.verified { .verified {
border: 1px solid rgba($valid-value-color, 0.5); border: 1px solid color.change($valid-value-color, $alpha: 0.5);
background: rgba($valid-value-color, 0.25); background: color.change($valid-value-color, $alpha: 0.25);
a { a {
color: $valid-value-color; color: $valid-value-color;

3
app/javascript/styles/mastodon/admin.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
@use 'sass:math'; @use 'sass:math';
@use 'functions' as *; @use 'functions' as *;
@use 'variables' as *; @use 'variables' as *;
@ -1271,7 +1272,7 @@ a.name-tag,
} }
path:first-child { path:first-child {
fill: rgba($highlight-text-color, 0.25) !important; fill: color.change($highlight-text-color, $alpha: 0.25) !important;
fill-opacity: 1 !important; fill-opacity: 1 !important;
} }

125
app/javascript/styles/mastodon/components.scss
View File

@ -311,7 +311,7 @@
&:active, &:active,
&:focus-visible { &:focus-visible {
color: lighten($action-button-color, 7%); color: lighten($action-button-color, 7%);
background-color: rgba($action-button-color, 0.15); background-color: color.change($action-button-color, $alpha: 0.15);
} }
&:focus-visible { &:focus-visible {
@ -331,7 +331,7 @@
&:active, &:active,
&:focus-visible { &:focus-visible {
color: darken($lighter-text-color, 7%); color: darken($lighter-text-color, 7%);
background-color: rgba($lighter-text-color, 0.15); background-color: color.change($lighter-text-color, $alpha: 0.15);
} }
&:focus-visible { &:focus-visible {
@ -361,14 +361,14 @@
&.overlayed { &.overlayed {
box-sizing: content-box; box-sizing: content-box;
background: rgba($black, 0.65); background: color.change($black, $alpha: 0.65);
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
color: rgba($white, 0.7); color: color.change($white, $alpha: 0.7);
border-radius: 4px; border-radius: 4px;
padding: 2px; padding: 2px;
&:hover { &:hover {
background: rgba($black, 0.9); background: color.change($black, $alpha: 0.9);
} }
} }
@ -391,7 +391,7 @@
border-color: $valid-value-color; border-color: $valid-value-color;
color: $valid-value-color; color: $valid-value-color;
transition: none; transition: none;
background-color: rgba($valid-value-color, 0.15); background-color: color.change($valid-value-color, $alpha: 0.15);
} }
} }
@ -411,7 +411,7 @@
&:active, &:active,
&:focus { &:focus {
color: darken($lighter-text-color, 7%); color: darken($lighter-text-color, 7%);
background-color: rgba($lighter-text-color, 0.15); background-color: color.change($lighter-text-color, $alpha: 0.15);
} }
&:focus-visible { &:focus-visible {
@ -618,7 +618,7 @@ body > [data-popper-placement] {
&__warning { &__warning {
color: $inverted-text-color; color: $inverted-text-color;
background: $ui-primary-color; background: $ui-primary-color;
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.3);
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
font-size: 13px; font-size: 13px;
@ -694,7 +694,7 @@ body > [data-popper-placement] {
.spoiler-input__input { .spoiler-input__input {
padding: 12px 12px - 5px; padding: 12px 12px - 5px;
background: rgba($ui-highlight-color, 0.05); background: color.change($ui-highlight-color, $alpha: 0.05);
color: $highlight-text-color; color: $highlight-text-color;
} }
@ -1428,7 +1428,7 @@ body > [data-popper-placement] {
.focusable { .focusable {
&:focus-visible { &:focus-visible {
outline: 0; outline: 0;
background: rgba($ui-highlight-color, 0.05); background: color.change($ui-highlight-color, $alpha: 0.05);
box-shadow: inset 0 0 0 2px $ui-button-focus-outline-color; box-shadow: inset 0 0 0 2px $ui-button-focus-outline-color;
} }
} }
@ -1683,10 +1683,10 @@ body > [data-popper-placement] {
.notification-ungrouped--direct, .notification-ungrouped--direct,
.notification-group--direct, .notification-group--direct,
.notification-group--annual-report { .notification-group--annual-report {
background: rgba($ui-highlight-color, 0.05); background: color.change($ui-highlight-color, $alpha: 0.05);
&:focus { &:focus {
background: rgba($ui-highlight-color, 0.1); background: color.change($ui-highlight-color, $alpha: 0.1);
} }
} }
@ -2016,7 +2016,7 @@ body > [data-popper-placement] {
&__domain-pill { &__domain-pill {
display: inline-flex; display: inline-flex;
background: rgba($highlight-text-color, 0.2); background: color.change($highlight-text-color, $alpha: 0.2);
border-radius: 4px; border-radius: 4px;
border: 0; border: 0;
color: $highlight-text-color; color: $highlight-text-color;
@ -2077,7 +2077,7 @@ body > [data-popper-placement] {
&__handle { &__handle {
border: 2px dashed $highlight-text-color; border: 2px dashed $highlight-text-color;
background: rgba($highlight-text-color, 0.1); background: color.change($highlight-text-color, $alpha: 0.1);
padding: 12px 8px; padding: 12px 8px;
color: $highlight-text-color; color: $highlight-text-color;
border-radius: 4px; border-radius: 4px;
@ -3283,7 +3283,7 @@ a.account__display-name {
.columns-area__panels__pane--overlay { .columns-area__panels__pane--overlay {
pointer-events: auto; pointer-events: auto;
background: rgba($base-overlay-background, 0.5); background: color.change($base-overlay-background, $alpha: 0.5);
z-index: 3; z-index: 3;
.columns-area__panels__pane__inner { .columns-area__panels__pane__inner {
@ -3820,7 +3820,10 @@ a.account__display-name {
border-radius: 10px; border-radius: 10px;
padding: 0; padding: 0;
user-select: none; user-select: none;
-webkit-tap-highlight-color: rgba($base-overlay-background, 0); -webkit-tap-highlight-color: color.change(
$base-overlay-background,
$alpha: 0
);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
@ -4069,7 +4072,7 @@ a.account__display-name {
cursor: pointer; cursor: pointer;
& > div { & > div {
background: rgba($base-shadow-color, 0.6); background: color.change($base-shadow-color, $alpha: 0.6);
border-radius: 8px; border-radius: 8px;
padding: 12px 9px; padding: 12px 9px;
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
@ -4399,7 +4402,7 @@ a.status-card {
z-index: 1; z-index: 1;
&.active { &.active {
box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3); box-shadow: 0 1px 0 color.change($highlight-text-color, $alpha: 0.3);
&::before { &::before {
display: block; display: block;
@ -4415,8 +4418,8 @@ a.status-card {
z-index: 1; z-index: 1;
background: radial-gradient( background: radial-gradient(
ellipse, ellipse,
rgba($ui-highlight-color, 0.23) 0%, color.change($ui-highlight-color, $alpha: 0.23) 0%,
rgba($ui-highlight-color, 0) 60% color.change($ui-highlight-color, $alpha: 0) 60%
); );
} }
} }
@ -4510,7 +4513,7 @@ a.status-card {
&.active { &.active {
.column-header__icon { .column-header__icon {
color: $highlight-text-color; color: $highlight-text-color;
text-shadow: 0 0 10px rgba($highlight-text-color, 0.4); text-shadow: 0 0 10px color.change($highlight-text-color, $alpha: 0.4);
} }
} }
@ -4855,7 +4858,7 @@ a.status-card {
font-size: 14px; font-size: 14px;
&__label { &__label {
background-color: rgba($black, 0.45); background-color: color.change($black, $alpha: 0.45);
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
border-radius: 8px; border-radius: 8px;
padding: 12px 16px; padding: 12px 16px;
@ -4875,7 +4878,7 @@ a.status-card {
&:hover, &:hover,
&:focus { &:focus {
.spoiler-button__overlay__label { .spoiler-button__overlay__label {
background-color: rgba($black, 0.9); background-color: color.change($black, $alpha: 0.9);
} }
} }
} }
@ -5266,7 +5269,7 @@ a.status-card {
.upload-area { .upload-area {
align-items: center; align-items: center;
background: rgba($base-overlay-background, 0.8); background: color.change($base-overlay-background, $alpha: 0.8);
display: flex; display: flex;
height: 100vh; height: 100vh;
justify-content: center; justify-content: center;
@ -5301,7 +5304,7 @@ a.status-card {
z-index: -1; z-index: -1;
border-radius: 4px; border-radius: 4px;
background: $ui-base-color; background: $ui-base-color;
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); box-shadow: 0 0 5px color.change($base-shadow-color, $alpha: 0.2);
} }
.upload-area__content { .upload-area__content {
@ -5939,7 +5942,7 @@ a.status-card {
align-items: center; align-items: center;
.icon-button { .icon-button {
color: rgba($white, 0.7); color: color.change($white, $alpha: 0.7);
padding: 8px; padding: 8px;
.icon { .icon {
@ -5952,11 +5955,11 @@ a.status-card {
&:focus, &:focus,
&:active { &:active {
color: $white; color: $white;
background-color: rgba($white, 0.15); background-color: color.change($white, $alpha: 0.15);
} }
&:focus { &:focus {
background-color: rgba($white, 0.3); background-color: color.change($white, $alpha: 0.3);
} }
} }
} }
@ -5997,7 +6000,7 @@ a.status-card {
background: transparent; background: transparent;
box-sizing: border-box; box-sizing: border-box;
border: 0; border: 0;
color: rgba($white, 0.7); color: color.change($white, $alpha: 0.7);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -6051,11 +6054,11 @@ a.status-card {
&:focus, &:focus,
&:active { &:active {
color: $white; color: $white;
background-color: rgba($white, 0.15); background-color: color.change($white, $alpha: 0.15);
} }
&:focus { &:focus {
background-color: rgba($white, 0.3); background-color: color.change($white, $alpha: 0.3);
} }
&.active { &.active {
@ -6064,11 +6067,11 @@ a.status-card {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: rgba($highlight-text-color, 0.15); background: color.change($highlight-text-color, $alpha: 0.15);
} }
&:focus { &:focus {
background: rgba($highlight-text-color, 0.3); background: color.change($highlight-text-color, $alpha: 0.3);
} }
} }
@ -6078,11 +6081,11 @@ a.status-card {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: rgba($gold-star, 0.15); background: color.change($gold-star, $alpha: 0.15);
} }
&:focus { &:focus {
background: rgba($gold-star, 0.3); background: color.change($gold-star, $alpha: 0.3);
} }
} }
@ -6954,7 +6957,7 @@ a.status-card {
display: block; display: block;
color: $white; color: $white;
border: 0; border: 0;
background: rgba($black, 0.65); background: color.change($black, $alpha: 0.65);
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
padding: 3px 12px; padding: 3px 12px;
border-radius: 99px; border-radius: 99px;
@ -6979,7 +6982,7 @@ a.status-card {
text-align: center; text-align: center;
color: $white; color: $white;
border: 0; border: 0;
background: rgba($black, 0.65); background: color.change($black, $alpha: 0.65);
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
padding: 3px 8px; padding: 3px 8px;
border-radius: 4px; border-radius: 4px;
@ -7001,7 +7004,7 @@ a.status-card {
} }
.media-gallery__alt__popover { .media-gallery__alt__popover {
background: rgba($black, 0.65); background: color.change($black, $alpha: 0.65);
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
border-radius: 4px; border-radius: 4px;
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
@ -7023,7 +7026,7 @@ a.status-card {
p { p {
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
color: rgba($white, 0.85); color: color.change($white, $alpha: 0.85);
white-space: pre-line; white-space: pre-line;
} }
} }
@ -7467,8 +7470,8 @@ a.status-card {
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgba($base-shadow-color, 0.85) 0, color.change($base-shadow-color, $alpha: 0.85) 0,
rgba($base-shadow-color, 0.45) 60%, color.change($base-shadow-color, $alpha: 0.45) 60%,
transparent transparent
); );
padding: 0 15px; padding: 0 15px;
@ -7564,7 +7567,7 @@ a.status-card {
flex: 0 0 auto; flex: 0 0 auto;
background: transparent; background: transparent;
border: 0; border: 0;
color: rgba($white, 0.75); color: color.change($white, $alpha: 0.75);
font-weight: 500; font-weight: 500;
&:active, &:active,
@ -7628,7 +7631,7 @@ a.status-card {
&::before { &::before {
content: ''; content: '';
width: 50px; width: 50px;
background: rgba($white, 0.35); background: color.change($white, $alpha: 0.35);
border-radius: 4px; border-radius: 4px;
display: block; display: block;
position: absolute; position: absolute;
@ -7660,7 +7663,7 @@ a.status-card {
margin-inline-start: -6px; margin-inline-start: -6px;
transform: translate(0, -50%); transform: translate(0, -50%);
background: $white; background: $white;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2);
opacity: 0; opacity: 0;
.no-reduce-motion & { .no-reduce-motion & {
@ -7698,7 +7701,7 @@ a.status-card {
&::before { &::before {
content: ''; content: '';
width: 100%; width: 100%;
background: rgba($white, 0.35); background: color.change($white, $alpha: 0.35);
border-radius: 4px; border-radius: 4px;
display: block; display: block;
position: absolute; position: absolute;
@ -7717,7 +7720,7 @@ a.status-card {
} }
&__buffer { &__buffer {
background: rgba($white, 0.2); background: color.change($white, $alpha: 0.2);
} }
&__handle { &__handle {
@ -7730,7 +7733,7 @@ a.status-card {
top: 10px; top: 10px;
margin-inline-start: -6px; margin-inline-start: -6px;
background: $white; background: $white;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2);
.no-reduce-motion & { .no-reduce-motion & {
transition: opacity 0.1s ease; transition: opacity 0.1s ease;
@ -7754,7 +7757,7 @@ a.status-card {
top: 50%; top: 50%;
inset-inline-start: 50%; inset-inline-start: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: rgba($base-shadow-color, 0.45); background: color.change($base-shadow-color, $alpha: 0.45);
backdrop-filter: $backdrop-blur-filter; backdrop-filter: $backdrop-blur-filter;
color: $white; color: $white;
border-radius: 8px; border-radius: 8px;
@ -8089,7 +8092,7 @@ noscript {
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba($base-overlay-background, 0.5); background: color.change($base-overlay-background, $alpha: 0.5);
} }
.focal-point { .focal-point {
@ -8111,7 +8114,7 @@ noscript {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border: 2px solid #fff; border: 2px solid #fff;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35); box-shadow: 0 0 0 9999em color.change($base-shadow-color, $alpha: 0.35);
pointer-events: none; pointer-events: none;
} }
} }
@ -8353,7 +8356,7 @@ noscript {
} }
.verified { .verified {
border: 1px solid rgba($valid-value-color, 0.5); border: 1px solid color.change($valid-value-color, $alpha: 0.5);
margin-top: -1px; margin-top: -1px;
margin-inline: -1px; margin-inline: -1px;
@ -8573,7 +8576,7 @@ noscript {
width: 50px; width: 50px;
path:first-child { path:first-child {
fill: rgba($highlight-text-color, 0.25) !important; fill: color.change($highlight-text-color, $alpha: 0.25) !important;
fill-opacity: 1 !important; fill-opacity: 1 !important;
} }
@ -8598,7 +8601,7 @@ noscript {
.trends__item__sparkline { .trends__item__sparkline {
path:first-child { path:first-child {
fill: rgba($gold-star, 0.25) !important; fill: color.change($gold-star, $alpha: 0.25) !important;
} }
path:last-child { path:last-child {
@ -9763,7 +9766,7 @@ noscript {
margin-bottom: 5px; margin-bottom: 5px;
border-radius: 8px; border-radius: 8px;
border: 1px solid $highlight-text-color; border: 1px solid $highlight-text-color;
background: rgba($highlight-text-color, 0.15); background: color.change($highlight-text-color, $alpha: 0.15);
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
@ -9818,7 +9821,7 @@ noscript {
} }
.button-tertiary { .button-tertiary {
background: rgba($ui-base-color, 0.15); background: color.change($ui-base-color, $alpha: 0.15);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
} }
@ -9835,7 +9838,7 @@ noscript {
.warning-banner { .warning-banner {
border: 1px solid $warning-red; border: 1px solid $warning-red;
background: rgba($warning-red, 0.15); background: color.change($warning-red, $alpha: 0.15);
&__message { &__message {
h1 { h1 {
@ -10170,13 +10173,13 @@ noscript {
padding: 15px; padding: 15px;
margin: 0; margin: 0;
color: $white; color: $white;
background: rgba($black, 0.85); background: color.change($black, $alpha: 0.85);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85); border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
border-radius: 8px; border-radius: 8px;
box-shadow: box-shadow:
0 10px 15px -3px rgba($base-shadow-color, 0.25), 0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25),
0 4px 6px -4px rgba($base-shadow-color, 0.25); 0 4px 6px -4px color.change($base-shadow-color, $alpha: 0.25);
cursor: default; cursor: default;
font-size: 15px; font-size: 15px;
line-height: 21px; line-height: 21px;
@ -10214,7 +10217,7 @@ noscript {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: rgba($ui-base-color, 0.85); background: color.change($ui-base-color, $alpha: 0.85);
} }
} }
@ -10312,7 +10315,7 @@ noscript {
padding: 16px 0; padding: 16px 0;
padding-bottom: 0; padding-bottom: 0;
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--background-border-color);
background: rgba($ui-highlight-color, 0.05); background: color.change($ui-highlight-color, $alpha: 0.05);
&__header { &__header {
display: flex; display: flex;

10
app/javascript/styles/mastodon/css_variables.scss
View File

@ -6,10 +6,10 @@
--dropdown-border-color: #{lighten($ui-base-color, 4%)}; --dropdown-border-color: #{lighten($ui-base-color, 4%)};
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)}; --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
--dropdown-shadow: --dropdown-shadow:
0 20px 25px -5px #{rgba($base-shadow-color, 0.25)}, 0 20px 25px -5px #{color.change($base-shadow-color, $alpha: 0.25)},
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)}; 0 8px 10px -6px #{color.change($base-shadow-color, $alpha: 0.25)};
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)}; --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
--modal-background-variant-color: #{rgba($ui-base-color, 0.7)}; --modal-background-variant-color: #{color.change($ui-base-color, $alpha: 0.7)};
--modal-border-color: #{lighten($ui-base-color, 4%)}; --modal-border-color: #{lighten($ui-base-color, 4%)};
--background-border-color: #{lighten($ui-base-color, 4%)}; --background-border-color: #{lighten($ui-base-color, 4%)};
--background-color: #{darken($ui-base-color, 8%)}; --background-color: #{darken($ui-base-color, 8%)};
@ -21,7 +21,9 @@
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)}; --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
--avatar-border-radius: 8px; --avatar-border-radius: 8px;
--media-outline-color: #{rgba(#fcf8ff, 0.15)}; --media-outline-color: #{rgba(#fcf8ff, 0.15)};
--overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.35)}); --overlay-icon-shadow: drop-shadow(
0 0 8px #{color.change($base-shadow-color, $alpha: 0.35)}
);
--error-background-color: #{darken($error-red, 16%)}; --error-background-color: #{darken($error-red, 16%)};
--error-active-background-color: #{darken($error-red, 12%)}; --error-active-background-color: #{darken($error-red, 12%)};
--on-error-color: #fff; --on-error-color: #fff;

23
app/javascript/styles/mastodon/forms.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
@use 'variables' as *; @use 'variables' as *;
@use 'functions' as *; @use 'functions' as *;
@ -733,20 +734,20 @@ code {
text-align: center; text-align: center;
&.notice { &.notice {
border: 1px solid rgba($valid-value-color, 0.5); border: 1px solid color.change($valid-value-color, $alpha: 0.5);
background: rgba($valid-value-color, 0.25); background: color.change($valid-value-color, $alpha: 0.25);
color: $valid-value-color; color: $valid-value-color;
} }
&.warning { &.warning {
border: 1px solid rgba($gold-star, 0.5); border: 1px solid color.change($gold-star, $alpha: 0.5);
background: rgba($gold-star, 0.25); background: color.change($gold-star, $alpha: 0.25);
color: $gold-star; color: $gold-star;
} }
&.alert { &.alert {
border: 1px solid rgba($error-value-color, 0.5); border: 1px solid color.change($error-value-color, $alpha: 0.5);
background: rgba($error-value-color, 0.1); background: color.change($error-value-color, $alpha: 0.1);
color: $error-value-color; color: $error-value-color;
} }
@ -965,7 +966,7 @@ code {
background: $simple-background-color; background: $simple-background-color;
padding: 4px; padding: 4px;
margin: 0 10px 20px 0; margin: 0 10px 20px 0;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
display: inline-block; display: inline-block;
svg { svg {
@ -988,10 +989,10 @@ code {
.simple_form { .simple_form {
.warning { .warning {
box-sizing: border-box; box-sizing: border-box;
background: rgba($error-value-color, 0.5); background: color.change($error-value-color, $alpha: 0.5);
color: $primary-text-color; color: $primary-text-color;
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3); text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4); box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4);
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
margin-bottom: 15px; margin-bottom: 15px;
@ -1350,7 +1351,7 @@ code {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
background: rgba($error-value-color, 0.25); background: color.change($error-value-color, $alpha: 0.25);
z-index: 2; z-index: 2;
border-radius: 8px; border-radius: 8px;
} }

5
app/javascript/styles/mastodon/polls.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
@use 'variables' as *; @use 'variables' as *;
@use 'functions' as *; @use 'functions' as *;
@ -206,7 +207,7 @@
&:active, &:active,
&:focus { &:focus {
background-color: rgba($dark-text-color, 0.1); background-color: color.change($dark-text-color, $alpha: 0.1);
} }
} }
@ -225,7 +226,7 @@
background: rgba(darken($ui-primary-color, 14%), 0.7); background: rgba(darken($ui-primary-color, 14%), 0.7);
&.leading { &.leading {
background: rgba($ui-highlight-color, 0.5); background: color.change($ui-highlight-color, $alpha: 0.5);
} }
} }
} }

3
app/javascript/styles/mastodon/widgets.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
@use 'variables' as *; @use 'variables' as *;
@use 'functions' as *; @use 'functions' as *;
@ -16,7 +17,7 @@
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
} }
& > a { & > a {

8
app/models/user.rb
View File

@ -412,7 +412,7 @@ class User < ApplicationRecord
def set_approved def set_approved
self.approved = begin self.approved = begin
if sign_up_from_ip_requires_approval? || sign_up_email_requires_approval? || sign_up_username_requires_approval? if requires_approval?
false false
else else
open_registrations? || valid_invitation? || external? open_registrations? || valid_invitation? || external?
@ -426,7 +426,11 @@ class User < ApplicationRecord
def grant_approval_on_confirmation? def grant_approval_on_confirmation?
# Re-check approval on confirmation if the server has switched to open registrations # Re-check approval on confirmation if the server has switched to open registrations
open_registrations? && !sign_up_from_ip_requires_approval? && !sign_up_email_requires_approval? open_registrations? && !requires_approval?
end
def requires_approval?
sign_up_from_ip_requires_approval? || sign_up_email_requires_approval? || sign_up_username_requires_approval?
end end
def wrap_email_confirmation def wrap_email_confirmation

2
docs/DEVELOPMENT.md
View File

@ -91,7 +91,7 @@ development environment configured with the software needed for this project.
## Next steps ## Next steps
- Once you have successfully set up a development environment, it will be available on http://localhost:3000 - Once you have successfully set up a development environment, it will be available on http://localhost:3000
- Log in as the default admin user with the username `admin@mastodon.local` and the password `mastodonadmin`. - Log in as the default admin user with the username `admin@mastodon.local` or `admin@localhost` (depending on your setup) and the password `mastodonadmin`.
- Check out the [Mastodon docs] for tips on working with emails in development (you'll need this when creating new user accounts) as well as a list of useful commands for testing and updating your dev instance. - Check out the [Mastodon docs] for tips on working with emails in development (you'll need this when creating new user accounts) as well as a list of useful commands for testing and updating your dev instance.
- You can optionally populate your database with sample data by running `bin/rails dev:populate_sample_data`. This will create a `@showcase_account` account with various types of contents. - You can optionally populate your database with sample data by running `bin/rails dev:populate_sample_data`. This will create a `@showcase_account` account with various types of contents.

36
spec/support/examples/models/concerns/user/confirmation.rb
View File

@ -86,6 +86,42 @@ RSpec.shared_examples 'User::Confirmation' do
end end
end end
context 'when the user requires explicit approval because of signup IP address' do
let(:user) { Fabricate(:user, confirmed_at: nil, unconfirmed_email: new_email, approved: false, sign_up_ip: '192.0.2.5') }
before do
Setting.registrations_mode = 'open'
Fabricate(:ip_block, ip: '192.0.2.5', severity: :sign_up_requires_approval)
end
it 'sets email to new_email and marks user as confirmed, but not as approved and does not trigger `account.approved` web hook' do
expect { subject }
.to change { user.reload.email }.to(new_email)
.and change { user.reload.confirmed_at }.from(nil)
.and not_change { user.reload.approved }.from(false)
expect(TriggerWebhookWorker)
.to_not have_received(:perform_async).with('account.approved', 'Account', user.account_id)
end
end
context 'when the user requires explicit approval because of username' do
let(:user) { Fabricate(:user, confirmed_at: nil, unconfirmed_email: new_email, approved: false, account_attributes: { username: 'VeryStrangeUsername' }) }
before do
Setting.registrations_mode = 'open'
Fabricate(:username_block, username: 'StrangeUser', exact: false, allow_with_approval: true)
end
it 'sets email to new_email and marks user as confirmed, but not as approved and does not trigger `account.approved` web hook' do
expect { subject }
.to change { user.reload.email }.to(new_email)
.and change { user.reload.confirmed_at }.from(nil)
.and not_change { user.reload.approved }.from(false)
expect(TriggerWebhookWorker)
.to_not have_received(:perform_async).with('account.approved', 'Account', user.account_id)
end
end
context 'when registrations mode is approved' do context 'when registrations mode is approved' do
before { Setting.registrations_mode = 'approved' } before { Setting.registrations_mode = 'approved' }