Merge commit 'c58967c3bd7b7eee0b284ee2b77a48ed9ce6863e' into glitch-soc/merge-upstream
Conflicts: - `lib/sanitize_ext/sanitize_config.rb`: Conflict due to upstream adding fallback support for MathML Core while glitch-soc supported slightly more tags than upstream. Added the MathML Core fallback code to glitch-soc. - `spec/lib/sanitize/config_spec.rb`: Ditto.
This commit is contained in:
Claire committed
commit
7d52d5df0f
204 files changed
+2169
-4238
No files matched your search
@@ -4,7 +4,7 @@
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
font-family: inherit;
|
||||
background: $ui-base-color;
|
||||
background: var(--input-background-color);
|
||||
color: $darker-text-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
@@ -44,6 +44,10 @@
|
||||
color: $ui-primary-color;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: $ui-button-icon-focus-outline;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@@ -419,10 +423,10 @@ body > [data-popper-placement] {
|
||||
|
||||
&__suggestions {
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
background: $ui-base-color;
|
||||
background: var(--input-background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 0 0 4px 4px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--on-input-color);
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
|
||||
@@ -435,7 +439,7 @@ body > [data-popper-placement] {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.25px;
|
||||
color: $secondary-text-color;
|
||||
color: var(--on-input-color);
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
@@ -549,7 +553,7 @@ body > [data-popper-placement] {
|
||||
transition: border-color 300ms linear;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
background: $ui-base-color;
|
||||
background: var(--input-background-color);
|
||||
overflow-y: auto;
|
||||
|
||||
&.active {
|
||||
@@ -622,7 +626,7 @@ body > [data-popper-placement] {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: $secondary-text-color;
|
||||
background: $ui-base-color;
|
||||
background: var(--input-background-color);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 12px;
|
||||
@@ -3247,203 +3251,6 @@ $ui-header-logo-wordmark-width: 99px;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding__footer {
|
||||
margin-top: 30px;
|
||||
color: $dark-text-color;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
||||
.link-button {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
color: $highlight-text-color;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-radius: 8px;
|
||||
padding: 10px 15px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
height: 56px;
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding__illustration {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
max-height: 200px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.onboarding__lead {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
color: $darker-text-color;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding__links {
|
||||
margin-bottom: 30px;
|
||||
|
||||
& > * {
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding__steps {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&__item {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
padding-inline-end: 15px;
|
||||
margin-bottom: 2px;
|
||||
text-decoration: none;
|
||||
text-align: start;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: $highlight-text-color;
|
||||
font-size: 1.2rem;
|
||||
|
||||
@media screen and (width >= 600px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&__progress {
|
||||
flex: 0 0 auto;
|
||||
background: $valid-value-color;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
color: $primary-text-color;
|
||||
|
||||
svg {
|
||||
height: 14px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__go {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
color: $highlight-text-color;
|
||||
font-size: 17px;
|
||||
|
||||
svg {
|
||||
height: 1.5em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
flex: 1 1 auto;
|
||||
line-height: 20px;
|
||||
|
||||
h6 {
|
||||
color: $highlight-text-color;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $darker-text-color;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.follow-recommendations {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.account:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
text-align: center;
|
||||
color: $darker-text-color;
|
||||
font-weight: 500;
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-carousel {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.media-modal__pagination {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-paste-text {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-radius: 8px;
|
||||
@@ -3490,9 +3297,10 @@ $ui-header-logo-wordmark-width: 99px;
|
||||
.onboarding__profile {
|
||||
position: relative;
|
||||
margin-bottom: 40px + 20px;
|
||||
margin-top: -20px;
|
||||
|
||||
.app-form__avatar-input {
|
||||
border: 2px solid $ui-base-color;
|
||||
border: 2px solid var(--background-color);
|
||||
position: absolute;
|
||||
inset-inline-start: -2px;
|
||||
bottom: -40px;
|
||||
@@ -5569,7 +5377,7 @@ a.status-card {
|
||||
inset-inline-start: 0;
|
||||
margin-top: -2px;
|
||||
width: 100%;
|
||||
background: $ui-base-color;
|
||||
background: var(--input-background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 0 0 4px 4px;
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
@@ -6041,119 +5849,44 @@ a.status-card {
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-modal,
|
||||
.error-modal,
|
||||
.embed-modal {
|
||||
background: $ui-secondary-color;
|
||||
color: $inverted-text-color;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
.modal-placeholder {
|
||||
width: 588px;
|
||||
min-height: 478px;
|
||||
flex-direction: column;
|
||||
}
|
||||
background: var(--modal-background-color);
|
||||
backdrop-filter: var(--background-filter);
|
||||
border: 1px solid var(--modal-border-color);
|
||||
border-radius: 16px;
|
||||
|
||||
.error-modal__body {
|
||||
height: 80vh;
|
||||
width: 80vw;
|
||||
max-width: 520px;
|
||||
max-height: 420px;
|
||||
position: relative;
|
||||
|
||||
& > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 25px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&__error {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
user-select: text;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.error-modal__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.onboarding-modal__paginator,
|
||||
.error-modal__footer {
|
||||
flex: 0 0 auto;
|
||||
background: darken($ui-secondary-color, 8%);
|
||||
display: flex;
|
||||
padding: 25px;
|
||||
|
||||
& > div {
|
||||
min-width: 33px;
|
||||
}
|
||||
|
||||
.onboarding-modal__nav,
|
||||
.error-modal__nav {
|
||||
color: $lighter-text-color;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 10px 25px;
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
margin: -10px;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: darken($lighter-text-color, 4%);
|
||||
background-color: darken($ui-secondary-color, 16%);
|
||||
&__image {
|
||||
width: 70%;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
&.onboarding-modal__done,
|
||||
&.onboarding-modal__next {
|
||||
color: $inverted-text-color;
|
||||
&__message {
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.25px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($inverted-text-color, 4%);
|
||||
&__actions {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-modal__footer {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.display-case {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&__label {
|
||||
font-weight: 500;
|
||||
color: $inverted-text-color;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__case {
|
||||
background: $ui-base-color;
|
||||
color: $secondary-text-color;
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.safety-action-modal {
|
||||
width: 600px;
|
||||
flex-direction: column;
|
||||
@@ -8192,7 +7925,7 @@ noscript {
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
border: 1px solid lighten($ui-base-color, 12%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
box-sizing: content-box;
|
||||
padding: 5px;
|
||||
@@ -10144,6 +9877,30 @@ noscript {
|
||||
line-height: 33px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.button {
|
||||
flex-shrink: 1;
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
box-sizing: content-box;
|
||||
padding: 5px;
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11116,19 +10873,22 @@ noscript {
|
||||
|
||||
.column-search-header {
|
||||
display: flex;
|
||||
border-radius: 4px 4px 0 0;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
.column-header__back-button.compact {
|
||||
flex: 0 0 auto;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
padding: 16px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $primary-text-color;
|
||||
background: var(--input-background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
color: var(--on-input-color);
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
|
||||
|
||||
@@ -1255,13 +1255,13 @@ code {
|
||||
}
|
||||
|
||||
.app-form {
|
||||
padding: 20px;
|
||||
padding: 16px;
|
||||
|
||||
&__avatar-input,
|
||||
&__header-input {
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
background: var(--dropdown-background-color);
|
||||
background: var(--surface-variant-background-color);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1309,7 +1309,7 @@ code {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dropdown-border-color);
|
||||
background-color: var(--surface-variant-active-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -120,4 +120,6 @@ $font-monospace: 'mastodon-font-monospace' !default;
|
||||
--rich-text-text-color: rgba(255, 175, 212, 100%);
|
||||
--rich-text-decorations-color: rgba(128, 58, 95, 100%);
|
||||
--input-placeholder-color: #{$dark-text-color};
|
||||
--input-background-color: var(--surface-variant-background-color);
|
||||
--on-input-color: #{$secondary-text-color};
|
||||
}
|
||||
Reference in new issue
Block a user