Merge remote-tracking branch 'parent/main' into upstream-20250328

This commit is contained in:
KMY 2025-03-28 08:44:30 +09:00
commit 12ed20b6d5
257 changed files with 3505 additions and 2010 deletions

View file

@ -0,0 +1,21 @@
@use 'sass:color';
$darken-multiplier: -1 !default;
$lighten-multiplier: 1 !default;
// Invert darkened and lightened colors
@function darken($color, $amount) {
@return color.adjust(
$color,
$lightness: $amount * $darken-multiplier,
$space: hsl
);
}
@function lighten($color, $amount) {
@return color.adjust(
$color,
$lightness: $amount * $lighten-multiplier,
$space: hsl
);
}

View file

@ -1,3 +1,5 @@
@use 'variables' as *;
@mixin search-input {
outline: 0;
box-sizing: border-box;

View file

@ -1,4 +1,5 @@
@use 'sass:color';
@use 'functions' as *;
// Commonly used web colors
$black: #000000; // Black
@ -101,43 +102,13 @@ $media-modal-media-max-height: 80%;
$no-gap-breakpoint: 1175px;
$mobile-breakpoint: 630px;
$no-columns-breakpoint: 600px;
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;
:root {
--dropdown-border-color: #{lighten($ui-base-color, 4%)};
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
--modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
--modal-border-color: #{lighten($ui-base-color, 4%)};
--background-border-color: #{lighten($ui-base-color, 4%)};
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
--background-color: #{darken($ui-base-color, 8%)};
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
--surface-background-color: #{darken($ui-base-color, 4%)};
--surface-variant-background-color: #{$ui-base-color};
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
--on-surface-color: #{transparentize($ui-base-color, 0.5)};
--avatar-border-radius: 8px;
--content-font-size: 15px;
--content-emoji-size: 20px;
--content-line-height: 22px;
--detail-content-font-size: 19px;
--detail-content-emoji-size: 24px;
--detail-content-line-height: 24px;
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
--overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
--error-background-color: #{darken($error-red, 16%)};
--error-active-background-color: #{darken($error-red, 12%)};
--on-error-color: #fff;
--rich-text-container-color: rgba(87, 24, 60, 100%);
--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};
}
$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;

View file

@ -1,3 +1,5 @@
@use 'variables' as *;
$maximum-width: 1235px;
$fluid-breakpoint: $maximum-width + 20px;

View file

@ -1,7 +1,4 @@
$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
@use 'variables' as *;
%emoji-color-inversion {
filter: invert(1);

View file

@ -1,3 +1,6 @@
@use 'variables' as *;
@use 'functions' as *;
.card {
& > a {
display: block;

View file

@ -1,4 +1,6 @@
@use 'sass:math';
@use 'functions' as *;
@use 'variables' as *;
$no-columns-breakpoint: 890px;
$sidebar-width: 300px;

View file

@ -1,3 +1,5 @@
@use 'variables' as *;
:root {
--indigo-1: #17063b;
--indigo-2: #2f0c7a;

View file

@ -1,3 +1,6 @@
@use 'variables' as *;
@use 'functions' as *;
@function hex-color($color) {
@if type-of($color) == 'color' {
$color: str-slice(ie-hex-str($color), 4);
@ -92,6 +95,7 @@ body {
&.with-modals--active {
overflow-y: hidden;
overscroll-behavior: none;
}
}

View file

@ -1,3 +1,5 @@
@use 'variables' as *;
.logo {
color: $primary-text-color;
}

View file

@ -1,3 +1,8 @@
@use 'sass:color';
@use 'variables' as *;
@use 'functions' as *;
@use 'mixins' as *;
.app-body {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
@ -1911,18 +1916,22 @@ body > [data-popper-placement] {
.detailed-status__wrapper-direct {
.detailed-status,
.detailed-status__action-bar {
background: mix($ui-base-color, $ui-highlight-color, 95%);
background: color.mix($ui-base-color, $ui-highlight-color, 95%);
}
&:focus {
.detailed-status,
.detailed-status__action-bar {
background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
background: color.mix(
lighten($ui-base-color, 4%),
$ui-highlight-color,
95%
);
}
}
.detailed-status__action-bar {
border-top-color: mix(
border-top-color: color.mix(
lighten($ui-base-color, 8%),
$ui-highlight-color,
95%
@ -2528,49 +2537,6 @@ a.account__display-name {
}
}
.image-loader {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
* {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
&::-webkit-scrollbar,
*::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent; /* Chrome/Safari/Webkit */
}
.image-loader__preview-canvas {
max-width: $media-modal-media-max-width;
max-height: $media-modal-media-max-height;
background: url('../images/void.png') repeat;
object-fit: contain;
}
.loading-bar__container {
position: relative;
}
.loading-bar {
position: absolute;
}
&.image-loader--amorphous .image-loader__preview-canvas {
display: none;
}
}
.zoomable-image {
position: relative;
width: 100%;
@ -2578,13 +2544,61 @@ a.account__display-name {
display: flex;
align-items: center;
justify-content: center;
scrollbar-width: none;
overflow: hidden;
user-select: none;
img {
max-width: $media-modal-media-max-width;
max-height: $media-modal-media-max-height;
width: auto;
height: auto;
object-fit: contain;
outline: 1px solid var(--media-outline-color);
outline-offset: -1px;
border-radius: 8px;
touch-action: none;
}
&--zoomed-in {
z-index: 9999;
cursor: grab;
img {
outline: none;
border-radius: 0;
}
}
&--dragging {
cursor: grabbing;
}
&--error img {
visibility: hidden;
}
&__preview {
max-width: $media-modal-media-max-width;
max-height: $media-modal-media-max-height;
position: absolute;
z-index: 1;
outline: 1px solid var(--media-outline-color);
outline-offset: -1px;
border-radius: 8px;
overflow: hidden;
canvas {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
}
.loading-indicator {
z-index: 2;
mix-blend-mode: luminosity;
}
}
@ -5887,6 +5901,7 @@ a.status-card {
z-index: 9999;
pointer-events: none;
user-select: none;
overscroll-behavior: none;
}
.modal-root__modal {
@ -6020,7 +6035,7 @@ a.status-card {
.picture-in-picture__footer {
border-radius: 0;
background: transparent;
padding: 20px 0;
padding: 16px;
.icon-button {
color: $white;
@ -7235,6 +7250,10 @@ a.status-card {
filter: var(--overlay-icon-shadow);
}
}
&--error img {
visibility: hidden;
}
}
.media-gallery__item-thumbnail {
@ -8858,7 +8877,7 @@ noscript {
&.active {
transition: all 100ms ease-in;
transition-property: background-color, color;
background-color: mix(
background-color: color.mix(
lighten($ui-base-color, 12%),
$ui-highlight-color,
80%
@ -9759,6 +9778,7 @@ noscript {
border: 1px solid $highlight-text-color;
background: rgba($highlight-text-color, 0.15);
overflow: hidden;
flex-shrink: 0;
&__background-image {
width: 125%;
@ -10186,6 +10206,9 @@ noscript {
}
.notification-bar-action {
display: inline-block;
border: 0;
background: transparent;
text-transform: uppercase;
margin-inline-start: 10px;
cursor: pointer;

View file

@ -1,3 +1,5 @@
@use 'variables' as *;
.container-alt {
width: 700px;
margin: 0 auto;

View file

@ -0,0 +1,39 @@
@use 'sass:color';
@use 'functions' as *;
@use 'variables' as *;
:root {
--dropdown-border-color: #{lighten($ui-base-color, 4%)};
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
--modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
--modal-border-color: #{lighten($ui-base-color, 4%)};
--background-border-color: #{lighten($ui-base-color, 4%)};
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
--background-color: #{darken($ui-base-color, 8%)};
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
--surface-background-color: #{darken($ui-base-color, 4%)};
--surface-variant-background-color: #{$ui-base-color};
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
--avatar-border-radius: 8px;
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
--overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
--error-background-color: #{darken($error-red, 16%)};
--error-active-background-color: #{darken($error-red, 12%)};
--on-error-color: #fff;
--rich-text-container-color: rgba(87, 24, 60, 100%);
--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};
--content-font-size: 15px;
--content-emoji-size: 20px;
--content-line-height: 22px;
--detail-content-font-size: 19px;
--detail-content-emoji-size: 24px;
--detail-content-line-height: 24px;
}

View file

@ -1,3 +1,6 @@
@use 'functions' as *;
@use 'variables' as *;
.dashboard__counters {
display: flex;
flex-wrap: wrap;

View file

@ -1,3 +1,6 @@
@use 'variables' as *;
@use 'functions' as *;
.emoji-mart {
font-size: 13px;
display: inline-block;

View file

@ -1,4 +1,5 @@
$no-columns-breakpoint: 600px;
@use 'variables' as *;
@use 'functions' as *;
code {
font-family: $font-monospace, monospace;
@ -365,6 +366,22 @@ code {
}
}
.input.date_of_birth .label_input {
display: flex;
gap: 8px;
align-items: center;
input {
box-sizing: content-box;
width: 32px;
flex: 0;
&:last-child {
width: 64px;
}
}
}
.input.select.select--languages {
min-width: 32ch;
}

View file

@ -1,3 +1,6 @@
@use 'variables' as *;
@use 'functions' as *;
.modal-layout {
background: darken($ui-base-color, 4%)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')

View file

@ -1,3 +1,6 @@
@use 'variables' as *;
@use 'functions' as *;
.poll {
margin-top: 16px;
font-size: 14px;

View file

@ -1,3 +1,5 @@
@use 'variables' as *;
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)

View file

@ -1,3 +1,6 @@
@use 'functions' as *;
@use 'variables' as *;
body.rtl {
direction: rtl;

View file

@ -1,3 +1,6 @@
@use 'variables' as *;
@use 'functions' as *;
.table {
width: 100%;
max-width: 100%;

View file

@ -1,3 +1,6 @@
@use 'variables' as *;
@use 'functions' as *;
.directory {
&__tag {
box-sizing: border-box;