Merge remote-tracking branch 'parent/main' into upstream-20250328
This commit is contained in:
KMY
commit
12ed20b6d5
257 changed files with 3505 additions and 2010 deletions
|
|
@ -1,25 +1,27 @@
|
|||
@import 'mastodon/mixins';
|
||||
@import 'mastodon/variables';
|
||||
@import 'fonts/roboto';
|
||||
@import 'fonts/roboto-mono';
|
||||
@use 'mastodon/functions';
|
||||
@use 'mastodon/mixins';
|
||||
@use 'mastodon/variables';
|
||||
@use 'mastodon/css_variables';
|
||||
@use 'fonts/roboto';
|
||||
@use 'fonts/roboto-mono';
|
||||
|
||||
@import 'mastodon/reset';
|
||||
@import 'mastodon/basics';
|
||||
@import 'mastodon/branding';
|
||||
@import 'mastodon/containers';
|
||||
@import 'mastodon/lists';
|
||||
@import 'mastodon/widgets';
|
||||
@import 'mastodon/forms';
|
||||
@import 'mastodon/accounts';
|
||||
@import 'mastodon/components';
|
||||
@import 'mastodon/polls';
|
||||
@import 'mastodon/modal';
|
||||
@import 'mastodon/emoji_picker';
|
||||
@import 'mastodon/annual_reports';
|
||||
@import 'mastodon/about';
|
||||
@import 'mastodon/tables';
|
||||
@import 'mastodon/admin';
|
||||
@import 'mastodon/dashboard';
|
||||
@import 'mastodon/rtl';
|
||||
@import 'mastodon/accessibility';
|
||||
@import 'mastodon/rich_text';
|
||||
@use 'mastodon/reset';
|
||||
@use 'mastodon/basics';
|
||||
@use 'mastodon/branding';
|
||||
@use 'mastodon/containers';
|
||||
@use 'mastodon/lists';
|
||||
@use 'mastodon/widgets';
|
||||
@use 'mastodon/forms';
|
||||
@use 'mastodon/accounts';
|
||||
@use 'mastodon/components';
|
||||
@use 'mastodon/polls';
|
||||
@use 'mastodon/modal';
|
||||
@use 'mastodon/emoji_picker';
|
||||
@use 'mastodon/annual_reports';
|
||||
@use 'mastodon/about';
|
||||
@use 'mastodon/tables';
|
||||
@use 'mastodon/admin';
|
||||
@use 'mastodon/dashboard';
|
||||
@use 'mastodon/rtl';
|
||||
@use 'mastodon/accessibility';
|
||||
@use 'mastodon/rich_text';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
@import 'contrast/variables';
|
||||
@import 'application';
|
||||
@import 'contrast/diff';
|
||||
@use 'contrast/variables';
|
||||
@use 'application';
|
||||
@use 'contrast/diff';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use '../mastodon/variables' as *;
|
||||
|
||||
.status__content a,
|
||||
.reply-indicator__content a,
|
||||
.edit-indicator__content a,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use '../mastodon/functions' as *;
|
||||
|
||||
// Dependent colors
|
||||
$black: #000000;
|
||||
|
||||
|
|
@ -14,12 +16,13 @@ $ui-primary-color: $classic-primary-color !default;
|
|||
$ui-secondary-color: $classic-secondary-color !default;
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
|
||||
$darker-text-color: lighten($ui-primary-color, 20%) !default;
|
||||
$dark-text-color: lighten($ui-primary-color, 12%) !default;
|
||||
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
|
||||
$highlight-text-color: lighten($ui-highlight-color, 10%) !default;
|
||||
$action-button-color: lighten($ui-base-color, 50%);
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: darken($ui-base-color, 6%) !default;
|
||||
$light-text-color: darken($ui-primary-color, 40%) !default;
|
||||
@use '../mastodon/variables' with (
|
||||
$darker-text-color: lighten($ui-primary-color, 20%),
|
||||
$dark-text-color: lighten($ui-primary-color, 12%),
|
||||
$secondary-text-color: lighten($ui-secondary-color, 6%),
|
||||
$highlight-text-color: lighten($ui-highlight-color, 10%),
|
||||
$action-button-color: lighten($ui-base-color, 50%),
|
||||
$inverted-text-color: $black,
|
||||
$lighter-text-color: darken($ui-base-color, 6%),
|
||||
$light-text-color: darken($ui-primary-color, 40%)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import 'full-dark/variables';
|
||||
@import 'application';
|
||||
@import 'full-dark/diff';
|
||||
@use 'full-dark/variables';
|
||||
@use 'full-dark/css_variables';
|
||||
@use 'application';
|
||||
@use 'full-dark/diff';
|
||||
|
|
|
|||
4
app/javascript/styles/full-dark/css_variables.scss
Normal file
4
app/javascript/styles/full-dark/css_variables.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@use 'sass:color';
|
||||
@use '../mastodon/variables' as *;
|
||||
@use 'variables' as *;
|
||||
@use '../mastodon/functions' as *;
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
@use 'sass:color';
|
||||
@use '../mastodon/functions' as *;
|
||||
@use '../mastodon/variables' as *;
|
||||
|
||||
input[type='text']:not(#cw-spoiler-input),
|
||||
input[type='search'],
|
||||
input[type='number'],
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'fonts/inter';
|
||||
@use 'fonts/inter';
|
||||
|
||||
body {
|
||||
accent-color: #6364ff;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import 'mastodon-light/variables';
|
||||
@import 'application';
|
||||
@import 'mastodon-light/diff';
|
||||
@use 'mastodon-light/variables';
|
||||
@use 'mastodon-light/css_variables';
|
||||
@use 'application';
|
||||
@use 'mastodon-light/diff';
|
||||
|
|
|
|||
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,5 +1,8 @@
|
|||
// 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;
|
||||
|
|
@ -152,8 +155,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 {
|
||||
|
|
@ -242,7 +249,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%);
|
||||
}
|
||||
|
||||
|
|
@ -284,7 +291,7 @@
|
|||
}
|
||||
|
||||
.entry {
|
||||
background: $account-background-color;
|
||||
background: $white;
|
||||
|
||||
.detailed-status.light,
|
||||
.more.light,
|
||||
|
|
|
|||
|
|
@ -1,87 +1,49 @@
|
|||
@use 'sass:color';
|
||||
|
||||
// Dependent colors
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
@use '../mastodon/functions' with (
|
||||
$darken-multiplier: 1,
|
||||
$lighten-multiplier: -1
|
||||
);
|
||||
|
||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
||||
$classic-primary-color: hsl(240deg, 29%, 70%);
|
||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
||||
$classic-highlight-color: hsl(240deg, 100%, 69%);
|
||||
|
||||
$blurple-600: hsl(252deg, 59%, 51%); // Iris
|
||||
$blurple-500: hsl(240deg, 100%, 69%); // Brand purple
|
||||
$blurple-300: hsl(237deg, 92%, 75%); // Faded Blue
|
||||
$black: #000000; // Black
|
||||
$white: #ffffff; // White
|
||||
$blurple-500: #6364ff; // Brand purple
|
||||
$grey-600: hsl(240deg, 8%, 33%); // Trout
|
||||
$grey-100: hsl(240deg, 51%, 90%); // Topaz
|
||||
|
||||
$emoji-reaction-color: #dfe5f5 !default;
|
||||
$emoji-reaction-selected-color: #9ac1f2 !default;
|
||||
|
||||
// Differences
|
||||
$success-green: lighten(hsl(138deg, 32%, 35%), 8%);
|
||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
||||
$classic-highlight-color: $blurple-500;
|
||||
|
||||
$base-overlay-background: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
@use '../mastodon/variables' with (
|
||||
$success-green: color.adjust(
|
||||
hsl(138deg, 32%, 35%),
|
||||
$lightness: 8%,
|
||||
$space: hsl
|
||||
),
|
||||
$base-overlay-background: $white,
|
||||
|
||||
$ui-base-color: $classic-secondary-color !default;
|
||||
$ui-base-lighter-color: hsl(250deg, 24%, 75%);
|
||||
$ui-primary-color: $classic-primary-color !default;
|
||||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
$ui-base-color: $classic-secondary-color,
|
||||
$ui-base-lighter-color: hsl(250deg, 24%, 75%),
|
||||
$ui-secondary-color: $classic-base-color,
|
||||
|
||||
$ui-button-secondary-color: $grey-600 !default;
|
||||
$ui-button-secondary-border-color: $grey-600 !default;
|
||||
$ui-button-secondary-focus-color: $white !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-tertiary-color: $blurple-500 !default;
|
||||
$ui-button-tertiary-border-color: $blurple-500 !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,
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$highlight-text-color: $ui-highlight-color !default;
|
||||
$dark-text-color: hsl(240deg, 16%, 32%);
|
||||
$action-button-color: hsl(240deg, 16%, 45%);
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: $classic-base-color !default;
|
||||
$light-text-color: hsl(240deg, 16%, 32%);
|
||||
|
||||
// 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)};
|
||||
--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: #{transparentize($dark-text-color, 0.5)};
|
||||
--input-background-color: #{darken($ui-base-color, 10%)};
|
||||
}
|
||||
$action-button-color: hsl(240deg, 16%, 45%),
|
||||
$emojis-requiring-inversion: 'chains'
|
||||
);
|
||||
|
|
|
|||
21
app/javascript/styles/mastodon/_functions.scss
Normal file
21
app/javascript/styles/mastodon/_functions.scss
Normal 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
|
||||
);
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
@mixin search-input {
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
$maximum-width: 1235px;
|
||||
$fluid-breakpoint: $maximum-width + 20px;
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.card {
|
||||
& > a {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
@use 'sass:math';
|
||||
@use 'functions' as *;
|
||||
@use 'variables' as *;
|
||||
|
||||
$no-columns-breakpoint: 890px;
|
||||
$sidebar-width: 300px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
:root {
|
||||
--indigo-1: #17063b;
|
||||
--indigo-2: #2f0c7a;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.logo {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.container-alt {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
39
app/javascript/styles/mastodon/css_variables.scss
Normal file
39
app/javascript/styles/mastodon/css_variables.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'functions' as *;
|
||||
@use 'variables' as *;
|
||||
|
||||
.dashboard__counters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.emoji-mart {
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>')
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.poll {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'functions' as *;
|
||||
@use 'variables' as *;
|
||||
|
||||
body.rtl {
|
||||
direction: rtl;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.directory {
|
||||
&__tag {
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue