diff --git a/.prettierignore b/.prettierignore index bd38250669..098dac6717 100644 --- a/.prettierignore +++ b/.prettierignore @@ -68,7 +68,6 @@ docker-compose.override.yml # Ignore vendored CSS reset app/javascript/styles/mastodon/reset.scss -app/javascript/styles_new/mastodon/reset.scss # Ignore Javascript pending https://github.com/mastodon/mastodon/pull/23631 *.js diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 32734b93af..00b4a6d2b3 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -4,11 +4,11 @@ module ThemeHelper def theme_style_tags(theme) if theme == 'system' ''.html_safe.tap do |tags| - tags << vite_stylesheet_tag(theme_path_for('mastodon-light'), type: :virtual, media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous') - tags << vite_stylesheet_tag(theme_path_for('default'), type: :virtual, media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous') + tags << vite_stylesheet_tag('themes/mastodon-light', type: :virtual, media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous') + tags << vite_stylesheet_tag('themes/default', type: :virtual, media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous') end else - vite_stylesheet_tag theme_path_for(theme), type: :virtual, media: 'all', crossorigin: 'anonymous' + vite_stylesheet_tag "themes/#{theme}", type: :virtual, media: 'all', crossorigin: 'anonymous' end end @@ -53,8 +53,4 @@ module ThemeHelper def theme_color_for(theme) theme == 'mastodon-light' ? Themes::THEME_COLORS[:light] : Themes::THEME_COLORS[:dark] end - - def theme_path_for(theme) - Mastodon::Feature.theme_tokens_enabled? ? "themes/#{theme}_theme_tokens" : "themes/#{theme}" - end end diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index b328d8ee34..e16e5368e7 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -1,27 +1,7 @@ -@use 'mastodon/functions'; -@use 'mastodon/mixins'; -@use 'mastodon/variables'; @use 'mastodon/css_variables'; -@use 'fonts/roboto'; -@use 'fonts/roboto-mono'; +@use 'mastodon/variables'; +@use 'common'; -@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'; +html { + color-scheme: dark; +} diff --git a/app/javascript/styles_new/common.scss b/app/javascript/styles/common.scss similarity index 100% rename from app/javascript/styles_new/common.scss rename to app/javascript/styles/common.scss diff --git a/app/javascript/styles/contrast.scss b/app/javascript/styles/contrast.scss index 367be051f1..af73c88fef 100644 --- a/app/javascript/styles/contrast.scss +++ b/app/javascript/styles/contrast.scss @@ -1,3 +1,8 @@ -@use 'contrast/variables'; -@use 'application'; +@use 'mastodon/css_variables'; +@use 'mastodon/variables'; +@use 'common'; @use 'contrast/diff'; + +html { + color-scheme: dark; +} diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss index 0adf8802ee..f809c7cdc3 100644 --- a/app/javascript/styles/contrast/diff.scss +++ b/app/javascript/styles/contrast/diff.scss @@ -1,4 +1,16 @@ -@use '../mastodon/variables' as *; +:root { + /* TEXT TOKENS */ + + --color-text-primary: var(--color-grey-50); + --color-text-secondary: var(--color-grey-300); + --color-text-tertiary: var(--color-grey-400); + --color-text-brand: var(--color-indigo-300); + --color-text-status-links: var(--color-text-brand); + + /* BORDER TOKENS */ + + --border-strength-primary: 18%; +} .status__content a, .reply-indicator__content a, @@ -31,16 +43,6 @@ } } -.status__content a, -.reply-indicator__content a, -.edit-indicator__content a { - color: $highlight-text-color; -} - -.report-dialog-modal__textarea::placeholder { - color: $inverted-text-color; -} - .link-button:disabled { cursor: not-allowed; diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss deleted file mode 100644 index e057352ba3..0000000000 --- a/app/javascript/styles/contrast/variables.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '../mastodon/functions' as *; - -// Dependent colors -$black: #000; - -$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%); - -$ui-base-color: $classic-base-color !default; -$ui-primary-color: $classic-primary-color !default; -$ui-secondary-color: $classic-secondary-color !default; -$ui-highlight-color: $classic-highlight-color !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: $classic-primary-color -); diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss index b530616a3c..494efdbbde 100644 --- a/app/javascript/styles/mastodon-light.scss +++ b/app/javascript/styles/mastodon-light.scss @@ -1,4 +1,9 @@ -@use 'mastodon-light/variables'; @use 'mastodon-light/css_variables'; -@use 'application'; -@use 'mastodon-light/diff'; +@use 'mastodon/variables' with ( + $emojis-requiring-inversion: 'chains' +); +@use 'common'; + +html { + color-scheme: light; +} diff --git a/app/javascript/styles/mastodon-light/css_variables.scss b/app/javascript/styles/mastodon-light/css_variables.scss index d96c368b25..70745ec071 100644 --- a/app/javascript/styles/mastodon-light/css_variables.scss +++ b/app/javascript/styles/mastodon-light/css_variables.scss @@ -1,23 +1,214 @@ -@use 'sass:color'; -@use '../mastodon/variables' as *; -@use 'variables' as *; -@use '../mastodon/functions' as *; +@use '../mastodon/theme_utils' as utils; -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); - --background-border-color: hsl(240deg, 25%, 88%); - --background-color: #fff; - --background-color-tint: rgba(255, 255, 255, 80%); - --background-filter: blur(10px); - --surface-variant-background-color: #f1ebfb; - --surface-border-color: #cac4d0; - --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%)}; +:root { + --color-black: #000; + --color-grey-950: #181821; + --color-grey-800: #292938; + --color-grey-700: #444664; + --color-grey-600: #545778; + --color-grey-500: #696d91; + --color-grey-400: #8b8dac; + --color-grey-300: #b4b6cb; + --color-grey-200: #d8d9e3; + --color-grey-100: #f0f0f5; + --color-grey-50: #f0f1ff; + --color-white: #fff; + --color-indigo-600: #6147e6; + --color-indigo-400: #8886ff; + --color-indigo-300: #a5abfd; + --color-indigo-200: #c8cdfe; + --color-indigo-100: #e0e3ff; + --color-indigo-50: #f0f1ff; + --color-red-500: #ff637e; + --color-red-600: #ec003f; + --color-yellow-400: #ffb900; + --color-yellow-600: #e17100; + --color-green-400: #05df72; + --color-green-600: #00a63e; + + /* TEXT TOKENS */ + + --color-text-primary: var(--color-grey-950); + --color-text-secondary: var(--color-grey-600); + --color-text-tertiary: var(--color-grey-500); + --color-text-on-inverted: var(--color-white); + --color-text-brand: var(--color-indigo-600); + --color-text-brand-soft: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-brand) + ); + --color-text-on-brand-base: var(--color-white); + --color-text-error: var(--color-red-600); + --color-text-on-error-base: var(--color-white); + --color-text-warning: var(--color-yellow-600); + --color-text-on-warning-base: var(--color-white); + --color-text-success: var(--color-green-600); + --color-text-on-success-base: var(--color-white); + --color-text-disabled: var(--color-grey-300); + --color-text-on-disabled: var(--color-grey-200); + --color-text-bookmark-highlight: var(--color-text-error); + --color-text-favourite-highlight: var(--color-text-warning); + --color-text-on-media: var(--color-white); + --color-text-status-links: var(--color-text-brand); + + /* BACKGROUND TOKENS */ + + // Neutrals + --color-bg-primary: var(--color-white); + --overlay-strength-secondary: 5%; + --color-bg-secondary-base: var(--color-grey-600); + --color-bg-secondary: #{color-mix( + in oklab, + var(--color-bg-primary), + var(--color-bg-secondary-base) var(--overlay-strength-secondary) + )}; + --color-bg-secondary-solid: #{color-mix( + in srgb, + var(--color-bg-primary), + var(--color-bg-secondary-base) var(--overlay-strength-secondary) + )}; + --color-bg-tertiary: #{color-mix( + in oklab, + var(--color-bg-primary), + var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary)) + )}; + + // Utility + --color-bg-ambient: var(--color-bg-primary); + --color-bg-elevated: var(--color-bg-primary); + --color-bg-inverted: var(--color-grey-950); + --color-bg-media-base: var(--color-black); + --color-bg-media-strength: 65%; + --color-bg-media: #{utils.css-alpha( + var(--color-bg-media-base), + var(--color-bg-media-strength) + )}; + --color-bg-overlay: var(--color-bg-primary); + --color-bg-disabled: var(--color-grey-400); + + // Brand + --overlay-strength-brand: 8%; + --color-bg-brand-base: var(--color-indigo-600); + --color-bg-brand-base-hover: color-mix( + in oklab, + var(--color-bg-brand-base), + black var(--overlay-strength-brand) + ); + --color-bg-brand-soft: #{utils.css-alpha( + var(--color-bg-brand-base), + calc(var(--overlay-strength-brand) * 1.5) + )}; + --color-bg-brand-softer: #{utils.css-alpha( + var(--color-bg-brand-base), + var(--overlay-strength-brand) + )}; + + // Error + --overlay-strength-error: 12%; + --color-bg-error-base: var(--color-red-600); + --color-bg-error-base-hover: color-mix( + in oklab, + var(--color-bg-error-base), + black var(--overlay-strength-error) + ); + --color-bg-error-soft: #{utils.css-alpha( + var(--color-bg-error-base), + calc(var(--overlay-strength-error) * 1.5) + )}; + --color-bg-error-softer: #{utils.css-alpha( + var(--color-bg-error-base), + var(--overlay-strength-error) + )}; + + // Warning + --overlay-strength-warning: 10%; + --color-bg-warning-base: var(--color-yellow-600); + --color-bg-warning-base-hover: color-mix( + in oklab, + var(--color-bg-warning-base), + black var(--overlay-strength-warning) + ); + --color-bg-warning-soft: #{utils.css-alpha( + var(--color-bg-warning-base), + calc(var(--overlay-strength-warning) * 1.5) + )}; + --color-bg-warning-softer: #{utils.css-alpha( + var(--color-bg-warning-base), + var(--overlay-strength-warning) + )}; + + // Success + --overlay-strength-success: 15%; + --color-bg-success-base: var(--color-green-600); + --color-bg-success-base-hover: color-mix( + in oklab, + var(--color-bg-success-base), + black var(--overlay-strength-success) + ); + --color-bg-success-soft: #{utils.css-alpha( + var(--color-bg-success-base), + calc(var(--overlay-strength-success) * 1.5) + )}; + --color-bg-success-softer: #{utils.css-alpha( + var(--color-bg-success-base), + var(--overlay-strength-success) + )}; + + /* BORDER TOKENS */ + + --border-strength-primary: 15%; + --color-border-primary: color-mix( + in oklab, + var(--color-bg-primary), + var(--color-grey-950) var(--border-strength-primary) + ); + --color-border-media: rgb(252 248 255 / 15%); + --color-border-on-bg-secondary: var(--color-grey-200); + --color-border-on-bg-brand-softer: var(--color-indigo-200); + --color-border-on-bg-error-softer: #{utils.css-alpha( + var(--color-text-error), + 50% + )}; + --color-border-on-bg-warning-softer: #{utils.css-alpha( + var(--color-text-warning), + 50% + )}; + --color-border-on-bg-success-softer: #{utils.css-alpha( + var(--color-text-success), + 50% + )}; + --color-border-on-bg-inverted: var(--color-border-primary); + + /* SHADOW TOKENS */ + + --shadow-strength-primary: 30%; + --color-shadow-primary: #{utils.css-alpha( + var(--color-black), + var(--shadow-strength-primary) + )}; + --dropdown-shadow: + 0 20px 25px -5px var(--color-shadow-primary), + 0 8px 10px -6px var(--color-shadow-primary); + --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary)); + + /* GRAPHS/CHARTS TOKENS */ + + --color-graph-primary-stroke: var(--color-text-brand); + --color-graph-primary-fill: var(--color-bg-brand-softer); + --color-graph-warning-stroke: var(--color-text-warning); + --color-graph-warning-fill: var(--color-bg-warning-softer); + --color-graph-disabled-stroke: var(--color-text-disabled); + --color-graph-disabled-fill: var(--color-bg-disabled); + + /* LEGACY TOKENS */ + + --rich-text-container-color: rgb(255 216 231 / 100%); + --rich-text-text-color: rgb(114 47 83 / 100%); + --rich-text-decorations-color: rgb(255 175 212 / 100%); + + /* MISCELLANEOUS */ + + --outline-focus-default: 2px solid var(--color-text-brand); + --avatar-border-radius: 8px; } diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss deleted file mode 100644 index 665271c535..0000000000 --- a/app/javascript/styles/mastodon-light/diff.scss +++ /dev/null @@ -1,530 +0,0 @@ -// 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, -.status-card__actions a { - color: color.change($white, $alpha: 0.8); - - &:hover, - &:active, - &:focus { - color: $white; - } -} - -// Change default background colors of columns -.interaction-modal { - background: $white; - border: 1px solid var(--background-border-color); -} - -.rules-list li::before { - background: $ui-highlight-color; -} - -.directory__card__img { - background: lighten($ui-base-color, 12%); -} - -.account__header { - background: $white; -} - -.column-header__button.active { - color: $ui-highlight-color; - - &:hover, - &:active, - &:focus { - color: $ui-highlight-color; - } -} - -.icon-button:disabled { - color: darken($action-button-color, 25%); -} - -.getting-started__footer a { - color: $ui-secondary-color; - text-decoration: underline; -} - -.confirmation-modal__secondary-button, -.confirmation-modal__cancel-button, -.mute-modal__cancel-button, -.block-modal__cancel-button { - color: lighten($ui-base-color, 26%); - - &:hover, - &:focus, - &:active { - color: $primary-text-color; - } -} - -.getting-started .navigation-bar { - border-top: 1px solid var(--background-border-color); - border-bottom: 1px solid var(--background-border-color); - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 0; - } -} - -.search__input, -.search__popout, -.setting-text, -.report-dialog-modal__textarea, -.audio-player { - border: 1px solid var(--background-border-color); -} - -.report-dialog-modal .dialog-option .poll__input { - color: $white; -} - -.upload-progress__backdrop { - background: $ui-base-color; -} - -// Change the background colors of statuses -.focusable:focus-visible { - background: lighten($white, 4%); -} - -.account-gallery__item a { - background-color: $ui-base-color; -} - -// Change the text colors on inverted background -.actions-modal ul li:not(:empty) a.active, -.actions-modal ul li:not(:empty) a.active button, -.actions-modal ul li:not(:empty) a:active, -.actions-modal ul li:not(:empty) a:active button, -.actions-modal ul li:not(:empty) a:focus, -.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 button:not(.button, .link-button) { - color: $white; -} - -.compare-history-modal .report-modal__target, -.report-dialog-modal .poll__option.dialog-option { - border-bottom-color: lighten($ui-base-color, 4%); -} - -.report-dialog-modal__container { - 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 { - background-color: $ui-base-color; -} - -.reactions-bar__item.active { - 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 { - border: 0; -} - -.picture-in-picture__header { - border-bottom: 0; -} - -.announcements, -.picture-in-picture__footer { - border-top: 0; -} - -.icon-with-badge__badge { - border-color: $white; - color: $white; -} - -.column-settings__hashtags .column-select__option { - color: $white; -} - -.dashboard__quick-access, -.focal-point__preview strong, -.admin-wrapper .content__heading__tabs a.selected { - color: $white; -} - -.flash-message.warning { - color: lighten($gold-star, 16%); -} - -.boost-modal__action-bar, -.confirmation-modal__action-bar, -.mute-modal__action-bar, -.block-modal__action-bar, -.onboarding-modal__paginator, -.error-modal__footer { - background: darken($ui-base-color, 6%); - - .onboarding-modal__nav, - .error-modal__nav { - &:hover, - &:focus, - &:active { - background-color: darken($ui-base-color, 12%); - } - } -} - -.display-case__case { - background: $white; -} - -.embed-modal .embed-modal__container .embed-modal__html { - background: $white; - border: 1px solid var(--background-border-color); - - &:focus { - border-color: lighten($ui-base-color, 12%); - background: $white; - } -} - -.react-toggle-track { - background: $ui-primary-color; -} - -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background: lighten($ui-primary-color, 10%); -} - -.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) - .react-toggle-track { - background: lighten($ui-highlight-color, 10%); -} - -// Change the default color used for the text in an empty column or on the error column -.empty-column-indicator, -.error-column { - color: $primary-text-color; - background: $white; -} - -// Change the default colors used on some parts of the profile pages -.activity-stream-tabs { - background: $white; - border-bottom-color: lighten($ui-base-color, 8%); -} - -.nothing-here, -.page-header, -.directory__tag > a, -.directory__tag > div { - background: $white; - border: 1px solid var(--background-border-color); -} - -.picture-in-picture-placeholder { - background: $white; - border-color: lighten($ui-base-color, 8%); - color: lighten($ui-base-color, 8%); -} - -.directory__tag > a { - &:hover, - &:active, - &:focus { - background: $ui-base-color; - } -} - -.batch-table { - &__toolbar, - &__row, - .nothing-here { - border-color: lighten($ui-base-color, 8%); - } -} - -.accounts-grid { - .account-grid-card { - .controls { - .icon-button { - color: $darker-text-color; - } - } - - .name { - a { - color: $primary-text-color; - } - } - - .username { - color: $darker-text-color; - } - - .account__header__content { - color: $primary-text-color; - } - } -} - -.simple_form { - .warning { - box-shadow: none; - background: color.change($error-red, $alpha: 0.5); - text-shadow: none; - } - - .recommended { - border-color: $ui-highlight-color; - color: $ui-highlight-color; - background-color: color.change($ui-highlight-color, $alpha: 0.1); - } - - input[type='text'], - input[type='number'], - input[type='email'], - input[type='password'], - input[type='url'], - input[type='datetime-local'], - textarea { - background: darken($ui-base-color, 10%); - } - - select { - background: darken($ui-base-color, 10%) - url("data:image/svg+xml;utf8,") - no-repeat right 8px center / auto 14px; - } -} - -.compose-form .compose-form__warning { - border-color: $ui-highlight-color; - background-color: color.change($ui-highlight-color, $alpha: 0.1); - - &, - a { - color: $ui-highlight-color; - } -} - -.status__content, -.reply-indicator__content { - a { - color: $highlight-text-color; - } -} - -.notification__filter-bar button.active::after, -.account__section-headline a.active::after { - border-color: transparent transparent $white; -} - -.activity-stream, -.nothing-here, -.directory__tag > a, -.directory__tag > div, -.card > a, -.page-header, -.compose-form, -.compose-form__warning { - box-shadow: none; -} - -.card { - &__img { - background: darken($ui-base-color, 10%); - } - - & > a { - &:hover, - &:active, - &:focus { - .card__bar { - background: darken($ui-base-color, 10%); - } - } - } -} - -.status__wrapper-direct { - background-color: color.change($ui-highlight-color, $alpha: 0.1); - - &:focus { - background-color: color.change($ui-highlight-color, $alpha: 0.15); - } -} - -.compose-form__actions .icon-button.active, -.dropdown-button.active, -.language-dropdown__dropdown__results__item:focus, -.language-dropdown__dropdown__results__item.active, -.language-dropdown__dropdown__results__item:focus - .language-dropdown__dropdown__results__item__common-name, -.language-dropdown__dropdown__results__item.active - .language-dropdown__dropdown__results__item__common-name { - color: $white; -} - -.privacy-dropdown__option, -.visibility-dropdown__option { - &:focus, - &.active { - --dropdown-text-color: #{$white}; - } -} - -.compose-form .spoiler-input__input { - color: lighten($ui-highlight-color, 8%); -} - -.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: color.change($ui-highlight-color, $alpha: 0.1); - border-bottom-color: color.change($ui-highlight-color, $alpha: 0.3); - - &.focusable:focus-visible { - background: color.change($ui-highlight-color, $alpha: 0.1); - } -} - -.inline-follow-suggestions__body__scrollable__card { - background: $white; -} - -.inline-follow-suggestions__body__scroll-button__icon { - color: $white; -} - -a.sparkline { - &:hover, - &:focus, - &:active { - background: darken($ui-base-color, 10%); - } -} - -.dashboard__counters { - & > div { - & > a { - &:hover, - &:focus, - &:active { - background: darken($ui-base-color, 10%); - } - } - } -} - -.directory { - &__tag { - & > a { - &:hover, - &:focus, - &:active { - background: darken($ui-base-color, 10%); - } - } - } -} - -.strike-entry { - &:hover, - &:focus, - &:active { - background: darken($ui-base-color, 10%); - } -} - -.setting-text { - background: darken($ui-base-color, 10%); -} - -.report-dialog-modal__textarea { - background: darken($ui-base-color, 10%); -} - -.autosuggest-account { - .display-name__account { - color: $dark-text-color; - } -} - -.notification-group--annual-report { - .notification-group__icon, - .notification-group__main .link-button { - color: var(--indigo-3); - } -} - -@supports not selector(::-webkit-scrollbar) { - html { - scrollbar-color: color.change($action-button-color, $alpha: 0.25) - var(--background-border-color); - } -} - -.custom-scrollbars { - ::-webkit-scrollbar-thumb { - opacity: 0.25; - } -} - -kbd { - background-color: color.change($ui-highlight-color, $alpha: 0.1); -} diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss deleted file mode 100644 index a6a5e5556b..0000000000 --- a/app/javascript/styles/mastodon-light/variables.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use 'sass:color'; - -@use '../mastodon/functions' with ( - $darken-multiplier: 1, - $lighten-multiplier: -1 -); - -$black: #000; // Black -$white: #fff; // White -$blurple-500: #6364ff; // Brand purple -$grey-600: hsl(240deg, 8%, 33%); // Trout -$grey-100: hsl(240deg, 51%, 90%); // Topaz - -$classic-base-color: hsl(240deg, 16%, 19%); -$classic-secondary-color: hsl(255deg, 25%, 88%); -$classic-highlight-color: $blurple-500; - -@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, - $ui-base-lighter-color: hsl(250deg, 24%, 75%), - $ui-secondary-color: $classic-base-color, - - $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, - - $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, - - $action-button-color: hsl(240deg, 16%, 45%), - $emojis-requiring-inversion: 'chains' -); diff --git a/app/javascript/styles/mastodon/_functions.scss b/app/javascript/styles/mastodon/_functions.scss deleted file mode 100644 index a9911edb9d..0000000000 --- a/app/javascript/styles/mastodon/_functions.scss +++ /dev/null @@ -1,31 +0,0 @@ -@use 'sass:color'; -@use 'sass:string'; -@use 'sass:meta'; - -$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 - ); -} - -@function hex-color($color) { - @if meta.type-of($color) == 'color' { - $color: string.slice(color.ie-hex-str($color), 4); - } - - @return '%23' + string.unquote($color); -} diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss index d66fa40581..effbe82c3d 100644 --- a/app/javascript/styles/mastodon/_mixins.scss +++ b/app/javascript/styles/mastodon/_mixins.scss @@ -1,33 +1,30 @@ -@use 'sass:color'; -@use 'variables' as *; - @mixin search-input { outline: 0; box-sizing: border-box; width: 100%; box-shadow: none; font-family: inherit; - background: var(--input-background-color); - color: $darker-text-color; + background: var(--color-bg-secondary); + color: var(--color-text-primary); border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-on-bg-secondary); font-size: 17px; line-height: normal; margin: 0; } @mixin search-popout { - background: $simple-background-color; + background: var(--color-bg-elevated); border-radius: 4px; padding: 10px 14px; padding-bottom: 14px; margin-top: 10px; - color: $light-text-color; - box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4); + color: var(--color-text-secondary); + box-shadow: 2px 4px 15px var(--color-shadow-primary); h4 { text-transform: uppercase; - color: $light-text-color; + color: var(--color-text-secondary); font-size: 13px; font-weight: 500; margin-bottom: 10px; @@ -43,6 +40,6 @@ em { font-weight: 500; - color: $inverted-text-color; + color: var(--color-text-primary); } } diff --git a/app/javascript/styles_new/mastodon/_theme_utils.scss b/app/javascript/styles/mastodon/_theme_utils.scss similarity index 100% rename from app/javascript/styles_new/mastodon/_theme_utils.scss rename to app/javascript/styles/mastodon/_theme_utils.scss diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss index 816a9d9998..a948dbc41c 100644 --- a/app/javascript/styles/mastodon/_variables.scss +++ b/app/javascript/styles/mastodon/_variables.scss @@ -1,91 +1,3 @@ -@use 'sass:color'; -@use 'functions' as *; - -// Commonly used web colors -$black: #000; // Black -$white: #fff; // White -$red-600: #b7253d !default; // Deep Carmine -$red-500: #df405a !default; // Cerise -$blurple-600: #563acc; // Iris -$blurple-500: #6364ff; // Brand purple -$blurple-400: #7477fd; // Medium slate blue -$blurple-300: #858afa; // Faded Blue -$grey-600: hsl(240deg, 8%, 33%); // Trout -$grey-100: hsl(240deg, 51%, 90%); // Topaz - -$success-green: #79bd9a !default; // Padua -$error-red: $red-500 !default; // Cerise -$warning-red: #ff5050 !default; // Sunset Orange -$gold-star: #ca8f04 !default; // Dark Goldenrod - -$red-bookmark: $warning-red; - -// Values from the classic Mastodon UI -$classic-base-color: hsl(240deg, 16%, 19%); -$classic-primary-color: hsl(240deg, 29%, 70%); -$classic-secondary-color: hsl(255deg, 25%, 88%); -$classic-highlight-color: $blurple-500; - -// Variables for defaults in UI -$base-shadow-color: $black !default; -$base-overlay-background: $black !default; -$base-border-color: $white !default; -$simple-background-color: $white !default; -$valid-value-color: $success-green !default; -$error-value-color: $error-red !default; - -// Tell UI to use selected colors -$ui-base-color: $classic-base-color !default; // Darkest -$ui-base-lighter-color: lighten( - $ui-base-color, - 26% -) !default; // Lighter darkest -$ui-primary-color: $classic-primary-color !default; // Lighter -$ui-secondary-color: $classic-secondary-color !default; // Lightest -$ui-highlight-color: $classic-highlight-color !default; -$ui-button-color: $white !default; -$ui-button-background-color: $blurple-500 !default; -$ui-button-focus-background-color: $blurple-600 !default; -$ui-button-focus-outline-color: $blurple-400 !default; -$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default; - -$ui-button-disabled-color: color.adjust( - $ui-button-background-color, - $alpha: -0.3 -) !default; - -$ui-button-secondary-color: $blurple-500 !default; -$ui-button-secondary-border-color: $blurple-500 !default; -$ui-button-secondary-focus-border-color: $blurple-300 !default; -$ui-button-secondary-focus-color: $blurple-300 !default; - -$ui-button-tertiary-color: $blurple-300 !default; -$ui-button-tertiary-border-color: $blurple-300 !default; -$ui-button-tertiary-focus-background-color: $blurple-600 !default; -$ui-button-tertiary-focus-color: $white !default; - -$ui-button-destructive-background-color: $red-500 !default; -$ui-button-destructive-focus-background-color: $red-600 !default; - -$ui-button-icon-focus-outline: $ui-button-focus-outline !default; -$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default; - -// Variables for texts -$primary-text-color: $white !default; -$darker-text-color: $ui-primary-color !default; -$dark-text-color: $ui-base-lighter-color !default; -$secondary-text-color: $ui-secondary-color !default; -$highlight-text-color: lighten($ui-highlight-color, 8%) !default; -$action-button-color: $ui-base-lighter-color !default; -$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default; -$passive-text-color: $gold-star !default; -$active-passive-text-color: $success-green !default; - -// For texts on inverted backgrounds -$inverted-text-color: $ui-base-color !default; -$lighter-text-color: $ui-base-lighter-color !default; -$light-text-color: $ui-primary-color !default; - // Keep this filter a SCSS variable rather than // a CSS Custom Property due to this Safari bug: // https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245 diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index ba0605b79e..0bb2c8c9eb 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -1,5 +1,4 @@ @use 'variables' as *; -@use 'functions' as *; $maximum-width: 1235px; $fluid-breakpoint: $maximum-width + 20px; @@ -28,7 +27,7 @@ $fluid-breakpoint: $maximum-width + 20px; li { position: relative; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); padding: 1em 1.75em; padding-inline-start: 3em; font-weight: 500; @@ -68,8 +67,8 @@ $fluid-breakpoint: $maximum-width + 20px; position: absolute; inset-inline-start: 0; top: 1em; - background: $highlight-text-color; - color: $ui-base-color; + background: var(--color-bg-brand-base); + color: var(--color-text-on-brand-base); border-radius: 50%; width: 4ch; height: 4ch; @@ -85,13 +84,13 @@ $fluid-breakpoint: $maximum-width + 20px; } &__text { - color: $primary-text-color; + color: var(--color-text-primary); } &__hint { font-size: 14px; font-weight: 400; - color: $darker-text-color; + color: var(--color-text-secondary); } } @@ -104,21 +103,21 @@ $fluid-breakpoint: $maximum-width + 20px; > label { font-size: 14px; font-weight: 600; - color: $primary-text-color; + color: var(--color-text-primary); } - > select { + select { appearance: none; box-sizing: border-box; font-size: 14px; - color: $primary-text-color; + color: var(--color-text-primary); display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; - background: $ui-base-color; - border: 1px solid var(--background-border-color); + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); border-radius: 4px; padding-inline-start: 10px; padding-inline-end: 30px; @@ -128,18 +127,4 @@ $fluid-breakpoint: $maximum-width + 20px; font-size: 16px; } } - - &::after { - display: block; - position: absolute; - width: 15px; - height: 15px; - content: ''; - mask: url("data:image/svg+xml;utf8,") - no-repeat 50% 50%; - mask-size: contain; - right: 8px; - background-color: lighten($ui-base-color, 12%); - pointer-events: none; - } } diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index da4b9bdaa8..d1c35e3f9e 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -1,6 +1,5 @@ @use 'sass:color'; @use 'variables' as *; -@use 'functions' as *; .card { & > a { @@ -14,7 +13,7 @@ &:active, &:focus { .card__bar { - background: $ui-base-color; + background: var(--color-bg-brand-softer); } } } @@ -22,8 +21,8 @@ &__img { height: 130px; position: relative; - background: $ui-base-color; - border: 1px solid var(--background-border-color); + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); border-bottom: none; img { @@ -45,8 +44,8 @@ display: flex; justify-content: flex-start; align-items: center; - background: var(--background-color); - border: 1px solid var(--background-border-color); + background: var(--color-bg-primary); + border: 1px solid var(--color-border-primary); border-top: none; .avatar { @@ -61,7 +60,7 @@ display: block; margin: 0; border-radius: 4px; - background: darken($ui-base-color, 8%); + background: var(--color-bg-secondary); object-fit: cover; } } @@ -76,7 +75,7 @@ strong { font-size: 15px; - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; @@ -85,7 +84,7 @@ span { display: block; font-size: 14px; - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -106,7 +105,7 @@ .page, .gap { font-size: 14px; - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 500; display: inline-block; padding: 6px 10px; @@ -114,9 +113,9 @@ } .current { - background: $simple-background-color; + color: var(--color-bg-primary); + background: var(--color-text-primary); border-radius: 100px; - color: $inverted-text-color; cursor: default; margin: 0 10px; } @@ -128,7 +127,7 @@ .older, .newer { text-transform: uppercase; - color: $secondary-text-color; + color: var(--color-text-primary); } .older { @@ -143,7 +142,7 @@ .disabled { cursor: default; - color: lighten($inverted-text-color, 10%); + color: var(--color-text-disabled); } @media screen and (width <= 700px) { @@ -161,9 +160,8 @@ } .nothing-here { - background: $ui-base-color; - box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2); - color: $darker-text-color; + color: var(--color-text-secondary); + background: var(--color-bg-primary); font-size: 14px; font-weight: 500; text-align: center; @@ -174,6 +172,15 @@ border-radius: 4px; padding: 20px; min-height: 30vh; + border: 1px solid var(--color-border-primary); + + @media screen and (min-width: ($no-gap-breakpoint - 1)) { + border-top: 0; + } + + &--no-toolbar { + border-top: 1px solid var(--color-border-primary); + } &--under-tabs { border-radius: 0 0 4px 4px; @@ -196,7 +203,7 @@ font-size: 12px; line-height: 12px; font-weight: 500; - color: $ui-secondary-color; + color: var(--color-text-primary); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -206,16 +213,24 @@ .simple_form .overridden, .simple_form .recommended, .simple_form .not_recommended { - background-color: color.change($ui-secondary-color, $alpha: 0.1); - border: 1px solid color.change($ui-secondary-color, $alpha: 0.5); + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); +} + +.information-badge { + &.superapp { + color: var(--color-text-success); + background-color: var(--color-bg-success-softer); + border-color: var(--color-border-on-bg-success-softer); + } } .account-role { display: inline-flex; padding: 4px; padding-inline-end: 8px; - border: 1px solid $highlight-text-color; - color: $highlight-text-color; + border: 1px solid var(--color-text-brand); + color: var(--color-text-brand); font-weight: 500; font-size: 12px; letter-spacing: 0.5px; @@ -238,18 +253,10 @@ } } -.information-badge { - &.superapp { - color: $success-green; - background-color: color.change($success-green, $alpha: 0.1); - border-color: color.change($success-green, $alpha: 0.5); - } -} - .simple_form .not_recommended { - color: lighten($error-red, 12%); - background-color: rgba(lighten($error-red, 12%), 0.1); - border-color: rgba(lighten($error-red, 12%), 0.5); + color: var(--color-text-error); + background-color: var(--color-bg-error-softer); + border-color: var(--color-border-on-bg-error-softer); } .account__header__fields { @@ -257,14 +264,14 @@ padding: 0; margin: 15px -15px -15px; border: 0 none; - border-top: 1px solid lighten($ui-base-color, 12%); - border-bottom: 1px solid lighten($ui-base-color, 12%); + border-top: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--color-border-primary); font-size: 14px; line-height: 20px; dl { display: flex; - border-bottom: 1px solid lighten($ui-base-color, 12%); + border-bottom: 1px solid var(--color-border-primary); } dt, @@ -282,17 +289,17 @@ font-weight: 500; width: 120px; flex: 0 0 auto; - color: $secondary-text-color; - background: rgba(darken($ui-base-color, 8%), 0.5); + color: var(--color-text-primary); + background: var(--color-bg-secondary); } dd { flex: 1 1 auto; - color: $darker-text-color; + color: var(--color-text-secondary); } a { - color: $highlight-text-color; + color: var(--color-text-brand); text-decoration: none; &:hover, @@ -303,16 +310,16 @@ } .verified { - border: 1px solid color.change($valid-value-color, $alpha: 0.5); - background: color.change($valid-value-color, $alpha: 0.25); + border: 1px solid var(--color-border-on-bg-success-softer); + background: var(--color-bg-success-softer); a { - color: $valid-value-color; + color: var(--color-text-success); font-weight: 500; } &__mark { - color: $valid-value-color; + color: var(--color-text-success); } } @@ -327,10 +334,10 @@ .pending-account { &__header { - color: $darker-text-color; + color: var(--color-text-secondary); a { - color: $ui-secondary-color; + color: var(--color-text-primary); text-decoration: none; &:hover, @@ -341,7 +348,7 @@ } strong { - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 700; } @@ -356,7 +363,7 @@ } .batch-table__row--muted { - color: lighten($ui-base-color, 26%); + color: var(--color-text-tertiary); } .batch-table__row--muted .pending-account__header, @@ -365,7 +372,7 @@ &, a, strong { - color: lighten($ui-base-color, 26%); + color: var(--color-text-tertiary); } } @@ -377,12 +384,12 @@ tbody td.accounts-table__extra, &__count, &__count small { - color: lighten($ui-base-color, 26%); + color: var(--color-text-tertiary); } } .batch-table__row--attention { - color: $gold-star; + color: var(--color-text-warning); } .batch-table__row--attention .pending-account__header, @@ -391,7 +398,7 @@ &, a, strong { - color: $gold-star; + color: var(--color-text-warning); } } @@ -399,6 +406,6 @@ tbody td.accounts-table__extra, &__count, &__count small { - color: $gold-star; + color: var(--color-text-warning); } } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index c3a14a4fbd..eaa91936b1 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1,6 +1,5 @@ @use 'sass:color'; @use 'sass:math'; -@use 'functions' as *; @use 'variables' as *; $no-columns-breakpoint: 890px; @@ -34,7 +33,6 @@ $content-width: 840px; &__inner { display: flex; justify-content: flex-end; - background: var(--background-color); height: 100%; } } @@ -46,8 +44,8 @@ $content-width: 840px; &__toggle { display: none; - background: var(--background-color); - border-bottom: 1px solid lighten($ui-base-color, 4%); + background: var(--color-bg-primary); + border-bottom: 1px solid var(--color-border-primary); align-items: center; &__logo { @@ -61,7 +59,7 @@ $content-width: 840px; &__icon { display: block; - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; flex: 0 0 auto; font-size: 18px; @@ -70,7 +68,7 @@ $content-width: 840px; border-radius: 4px; &:focus { - background: $ui-base-color; + background: var(--color-bg-brand-softer); } .material-close { @@ -124,20 +122,23 @@ $content-width: 840px; align-items: center; gap: 6px; padding: 15px; - color: $darker-text-color; + color: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); text-decoration: none; transition: all 200ms linear; transition-property: color, background-color; &:hover { - color: $primary-text-color; + color: var(--color-text-primary); transition: all 100ms linear; transition-property: color, background-color; } } ul { - background: var(--background-color); margin: 0; a { @@ -147,12 +148,12 @@ $content-width: 840px; } .warning a { - color: $gold-star; + color: var(--color-text-warning); font-weight: 700; } .simple-navigation-active-leaf a { - color: $highlight-text-color; + color: var(--color-text-brand); border-bottom: 0; } } @@ -227,7 +228,7 @@ $content-width: 840px; align-items: center; padding: 7px 10px; border-radius: 4px; - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; font-weight: 500; gap: 5px; @@ -240,13 +241,13 @@ $content-width: 840px; &:hover, &:focus, &:active { - background: lighten($ui-base-color, 4%); + background: var(--color-bg-secondary); } &.selected { font-weight: 700; - color: $primary-text-color; - background: $ui-highlight-color; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); } } } @@ -270,7 +271,7 @@ $content-width: 840px; font-size: 12px; display: block; font-weight: 500; - color: $darker-text-color; + color: var(--color-text-secondary); line-height: 18px; } @@ -281,14 +282,14 @@ $content-width: 840px; } h2 { - color: $secondary-text-color; + color: var(--color-text-primary); font-size: 24px; line-height: 36px; font-weight: 700; } h3 { - color: $secondary-text-color; + color: var(--color-text-primary); font-size: 20px; line-height: 28px; font-weight: 400; @@ -299,33 +300,28 @@ $content-width: 840px; text-transform: uppercase; font-size: 13px; font-weight: 700; - color: $darker-text-color; + color: var(--color-text-secondary); padding-top: 24px; margin-bottom: 8px; - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); } h6 { font-size: 16px; - color: $secondary-text-color; + color: var(--color-text-primary); line-height: 28px; font-weight: 500; } .fields-group h6 { - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 500; } - .directory__tag > a, - .directory__tag > div { - box-shadow: none; - } - .directory__tag h4 { font-size: 18px; font-weight: 700; - color: $primary-text-color; + color: var(--color-text-primary); text-transform: none; padding-top: 0; margin-bottom: 0; @@ -339,12 +335,12 @@ $content-width: 840px; &.private-comment { display: block; - color: $darker-text-color; + color: var(--color-text-secondary); } &.public-comment { display: block; - color: $secondary-text-color; + color: var(--color-text-primary); } } } @@ -352,11 +348,11 @@ $content-width: 840px; & > p { font-size: 14px; line-height: 21px; - color: $secondary-text-color; + color: var(--color-text-primary); margin-bottom: 20px; strong { - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 500; @each $lang in $cjk-langs { @@ -371,7 +367,7 @@ $content-width: 840px; width: 100%; height: 0; border: 0; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); margin: 20px 0; &.spacer { @@ -409,7 +405,7 @@ $content-width: 840px; inset-inline-start: 0; bottom: 0; overflow-y: auto; - background: var(--background-color); + background: var(--color-bg-primary); } } @@ -429,7 +425,7 @@ $content-width: 840px; } ul .simple-navigation-active-leaf a { - border-bottom-color: $ui-highlight-color; + border-bottom-color: var(--color-text-brand); } } } @@ -445,10 +441,10 @@ hr.spacer { body, .admin-wrapper .content { .muted-hint { - color: $darker-text-color; + color: var(--color-text-secondary); a { - color: $highlight-text-color; + color: var(--color-text-brand); } } @@ -468,29 +464,29 @@ body, } .positive-hint { - color: $valid-value-color; + color: var(--color-text-success); font-weight: 500; } .negative-hint { - color: $error-value-color; + color: var(--color-text-error); font-weight: 500; } .neutral-hint { - color: $dark-text-color; + color: var(--color-text-primary); font-weight: 500; } .warning-hint { - color: $gold-star; + color: var(--color-text-warning); font-weight: 500; } } kbd { font-family: Courier, monospace; - background-color: color.change($ui-secondary-color, $alpha: 0.1); + background-color: var(--color-bg-brand-softer); padding: 4px; padding-bottom: 2px; border-radius: 5px; @@ -543,21 +539,21 @@ kbd { a { display: inline-block; - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 500; - border-bottom: 2px solid $ui-base-color; + border-bottom: 2px solid var(--color-bg-secondary); &:hover { - color: $primary-text-color; - border-bottom: 2px solid lighten($ui-base-color, 5%); + color: var(--color-text-primary); + border-bottom: 2px solid var(--color-bg-tertiary); } &.selected { - color: $highlight-text-color; - border-bottom: 2px solid $ui-highlight-color; + color: var(--color-text-brand); + border-bottom: 2px solid var(--color-text-brand); } } } @@ -581,7 +577,7 @@ kbd { font-weight: 500; font-size: 14px; line-height: 18px; - color: $secondary-text-color; + color: var(--color-text-primary); @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -640,7 +636,7 @@ kbd { font-size: 14px; a { - color: $highlight-text-color; + color: var(--color-text-brand); text-decoration: none; &:hover { @@ -670,25 +666,25 @@ kbd { line-height: 20px; padding: 15px; padding-inline-start: 15px * 2 + 40px; - background: var(--background-color); - border-right: 1px solid var(--background-border-color); - border-left: 1px solid var(--background-border-color); - border-bottom: 1px solid var(--background-border-color); + background: var(--color-bg-primary); + border-right: 1px solid var(--color-border-primary); + border-left: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--color-border-primary); position: relative; text-decoration: none; - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 14px; &:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); } &:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); } &__avatar { @@ -708,13 +704,13 @@ kbd { } &__timestamp { - color: $dark-text-color; + color: var(--color-text-tertiary); } a, .username, .target { - color: $secondary-text-color; + color: var(--color-text-primary); text-decoration: none; font-weight: 500; } @@ -733,12 +729,12 @@ kbd { line-height: 20px; padding: 15px; padding-inline-start: 15px * 2 + 40px; - background: var(--background-color); - border: 1px solid var(--background-border-color); + background: var(--color-bg-primary); + border: 1px solid var(--color-border-primary); border-radius: 4px; position: relative; text-decoration: none; - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 14px; margin-bottom: 15px; @@ -759,13 +755,13 @@ kbd { } &__timestamp { - color: $dark-text-color; + color: var(--color-text-secondary); } &:hover, &:focus, &:active { - background: $ui-base-color; + background: var(--color-bg-primary); } } @@ -774,10 +770,10 @@ a.name-tag, a.inline-name-tag, .inline-name-tag { text-decoration: none; - color: $secondary-text-color; + color: var(--color-text-primary); &:hover { - color: $highlight-text-color; + color: var(--color-text-brand); } .username { @@ -787,7 +783,7 @@ a.inline-name-tag, &.suspended { .username { text-decoration: line-through; - color: lighten($error-red, 12%); + color: var(--color-text-error); } .avatar { @@ -820,18 +816,18 @@ a.name-tag, .speech-bubble { margin-bottom: 20px; - border-inline-start: 4px solid $ui-highlight-color; + border-inline-start: 4px solid var(--color-text-brand); &.positive { - border-left-color: $success-green; + border-color: var(--color-text-success); } &.negative { - border-left-color: lighten($error-red, 12%); + border-color: var(--color-text-error); } &.warning { - border-left-color: $gold-star; + border-color: var(--color-text-warning); } &__bubble { @@ -844,7 +840,7 @@ a.name-tag, font-weight: 500; a { - color: $darker-text-color; + color: var(--color-text-secondary); } } @@ -854,13 +850,13 @@ a.name-tag, } time { - color: $dark-text-color; + color: var(--color-text-tertiary); } } .report-card { - background: var(--background-color); - border: 1px solid var(--background-border-color); + background: var(--color-bg-primary); + border: 1px solid var(--color-border-primary); border-radius: 4px; margin-bottom: 20px; @@ -882,7 +878,7 @@ a.name-tag, &__stats { flex: 0 0 auto; font-weight: 500; - color: $darker-text-color; + color: var(--color-text-secondary); text-transform: uppercase; text-align: end; @@ -893,12 +889,12 @@ a.name-tag, &:focus, &:hover, &:active { - color: $highlight-text-color; + color: var(--color-text-brand); } } .red { - color: $error-value-color; + color: var(--color-text-error); } } } @@ -907,7 +903,7 @@ a.name-tag, &__item { display: flex; justify-content: flex-start; - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); &__reported-by, &__assigned { @@ -915,7 +911,7 @@ a.name-tag, flex: 0 0 auto; box-sizing: border-box; width: 150px; - color: $darker-text-color; + color: var(--color-text-secondary); &, .username { @@ -941,10 +937,10 @@ a.name-tag, width: 100%; padding: 15px; text-decoration: none; - color: $darker-text-color; + color: var(--color-text-secondary); &:hover { - color: $highlight-text-color; + color: var(--color-text-brand); } } } @@ -981,18 +977,18 @@ a.name-tag, .account__header__fields, .account__header__content { - background: var(--background-color); - border: 1px solid var(--background-border-color); + background: var(--color-bg-primary); + border: 1px solid var(--color-border-primary); border-radius: 4px; height: 100%; } .account__header__fields { margin: 0; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); a { - color: $highlight-text-color; + color: var(--color-text-brand); } dl:first-child .verified { @@ -1000,14 +996,14 @@ a.name-tag, } .verified a { - color: $valid-value-color; + color: var(--color-text-success); } } .account__header__content { box-sizing: border-box; padding: 20px; - color: $primary-text-color; + color: var(--color-text-primary); } } @@ -1018,8 +1014,8 @@ a.name-tag, .applications-list__item, .filters-list__item { padding: 15px 0; - background: var(--background-color); - border: 1px solid var(--background-border-color); + background: var(--color-bg-primary); + border: 1px solid var(--color-border-primary); border-radius: 4px; margin-top: 15px; } @@ -1032,13 +1028,13 @@ a.name-tag, .announcements-list, .filters-list { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px; border-bottom: none; &__item { padding: 15px 0; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &__title { padding: 0 15px; @@ -1046,12 +1042,12 @@ a.name-tag, font-weight: 500; font-size: 18px; line-height: 1.5; - color: $secondary-text-color; + color: var(--color-text-primary); text-decoration: none; margin-bottom: 10px; &:hover { - color: $highlight-text-color; + color: var(--color-text-brand); } .account-role { @@ -1067,7 +1063,7 @@ a.name-tag, &:hover, &:focus, &:active { - color: $primary-text-color; + color: var(--color-text-primary); } } @@ -1084,7 +1080,7 @@ a.name-tag, &__meta { padding: 0 15px; - color: $dark-text-color; + color: var(--color-text-tertiary); a { color: inherit; @@ -1127,11 +1123,11 @@ a.name-tag, &.expired { .expiration { - color: lighten($error-red, 12%); + color: var(--color-text-error); } .permissions-list__item__icon { - color: $dark-text-color; + color: var(--color-text-secondary); } } } @@ -1163,7 +1159,7 @@ a.name-tag, &__table { &__number { - color: var(--background-color); + color: var(--color-bg-primary); padding: 10px; } @@ -1185,23 +1181,26 @@ a.name-tag, &__label { font-weight: 700; - color: $darker-text-color; + color: var(--color-text-secondary); } &__box { box-sizing: border-box; - background: var(--background-color); - padding: 10px; - font-weight: 500; - color: $primary-text-color; width: 52px; margin: 1px; + padding: 10px; + font-weight: 500; + color: var(--color-text-primary); + background: var(--color-bg-primary); @for $i from 0 through 10 { &--#{10 * $i} { - background-color: rgba( - $ui-highlight-color, - 1 * (math.div(max(1, $i), 10)) + @if $i > 5 { + color: var(--color-text-on-brand-base); + } + + background-color: rgb( + from var(--color-bg-brand-base) r g b / #{math.div(max(1, $i), 10)} ); } } @@ -1212,9 +1211,9 @@ a.name-tag, .sparkline { display: block; text-decoration: none; - background: var(--background-color); + background: var(--color-bg-primary); border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); padding: 0; position: relative; padding-bottom: 55px + 20px; @@ -1232,22 +1231,22 @@ a.name-tag, margin-inline-end: 10px; font-weight: 500; font-size: 28px; - color: $primary-text-color; + color: var(--color-text-primary); } &__change { display: block; font-weight: 500; font-size: 18px; - color: $darker-text-color; + color: var(--color-text-secondary); margin-bottom: -3px; &.positive { - color: $valid-value-color; + color: var(--color-text-success); } &.negative { - color: $error-value-color; + color: var(--color-text-error); } } } @@ -1256,7 +1255,7 @@ a.name-tag, padding: 0 20px; padding-bottom: 10px; text-transform: uppercase; - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 500; } @@ -1271,12 +1270,12 @@ a.name-tag, } path:first-child { - fill: color.change($highlight-text-color, $alpha: 0.25) !important; + fill: var(--color-graph-primary-fill) !important; fill-opacity: 1 !important; } path:last-child { - stroke: lighten($highlight-text-color, 6%) !important; + stroke: var(--color-graph-primary-stroke) !important; fill: none !important; } } @@ -1286,17 +1285,17 @@ a.sparkline { &:hover, &:focus, &:active { - background: $ui-base-color; + background: var(--color-bg-brand-softer); } } .skeleton { - background-color: var(--background-color); + background-color: var(--color-bg-primary); background-image: linear-gradient( 90deg, - lighten($ui-base-color, 8%), - lighten($ui-base-color, 12%), - lighten($ui-base-color, 8%) + var(--color-bg-primary), + var(--color-bg-secondary), + var(--color-bg-primary) ); background-size: 200px 100%; background-repeat: no-repeat; @@ -1327,7 +1326,7 @@ a.sparkline { } &__item { - border-bottom: 1px solid lighten($ui-base-color, 4%); + border-bottom: 1px solid var(--color-border-primary); &__key { font-weight: 500; @@ -1336,7 +1335,7 @@ a.sparkline { &__value { text-align: end; - color: $darker-text-color; + color: var(--color-text-secondary); padding: 11px 10px; } @@ -1345,14 +1344,13 @@ a.sparkline { width: 8px; height: 8px; border-radius: 50%; - background: $ui-highlight-color; + background: var(--color-text-brand); margin-inline-end: 10px; @for $i from 0 through 10 { &--#{10 * $i} { - background-color: rgba( - $ui-highlight-color, - 1 * (math.div(max(1, $i), 10)) + background-color: rgb( + from var(--color-text-brand) r g b / #{math.div(max(1, $i), 10)} ); } } @@ -1363,11 +1361,11 @@ a.sparkline { } &.negative { - color: $error-value-color; + color: var(--color-text-error); font-weight: 700; .dimension__item__value { - color: $error-value-color; + color: var(--color-text-error); } } } @@ -1375,12 +1373,12 @@ a.sparkline { .report-reason-selector { border-radius: 4px; - background: var(--background-color); + background: var(--color-bg-primary); margin-bottom: 20px; &__category { cursor: pointer; - border-bottom: 1px solid darken($ui-base-color, 8%); + border-bottom: 1px solid var(--color-border-primary); &__label { padding: 15px; @@ -1410,7 +1408,7 @@ a.sparkline { &__details { &__item { - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); padding: 15px 0; &:last-child { @@ -1441,7 +1439,7 @@ a.sparkline { .account-card { border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); position: relative; &__warning-badge { @@ -1453,7 +1451,7 @@ a.sparkline { background: url('@/images/warning-stripes.svg') repeat-y left, url('@/images/warning-stripes.svg') repeat-y right, - var(--background-color); + var(--color-bg-primary); } &__permalink { @@ -1472,7 +1470,7 @@ a.sparkline { width: 100%; height: 100%; object-fit: cover; - background: darken($ui-base-color, 8%); + background: var(--color-bg-secondary); } } @@ -1490,21 +1488,21 @@ a.sparkline { margin: 0; width: 56px; height: 56px; - background-color: darken($ui-base-color, 8%); + background-color: var(--color-bg-secondary); border-radius: 8px; - border: 1px solid $ui-base-color; + border: 1px solid var(--color-border-media); } } .display-name { - color: $darker-text-color; + color: var(--color-text-secondary); padding-bottom: 15px; font-size: 15px; line-height: 20px; bdi { display: block; - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 700; } } @@ -1533,7 +1531,7 @@ a.sparkline { } a { - color: $secondary-text-color; + color: var(--color-text-primary); text-decoration: none; unicode-bidi: isolate; @@ -1584,14 +1582,14 @@ a.sparkline { &__item { padding: 15px 0; text-align: center; - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 600; font-size: 15px; line-height: 21px; small { display: block; - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 400; font-size: 13px; line-height: 18px; @@ -1604,11 +1602,11 @@ a.sparkline { margin-bottom: 20px; &__item { - background: var(--background-color); + background: var(--color-bg-primary); position: relative; padding: 15px; padding-inline-start: 15px * 2 + 40px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); &:first-child { border-top-left-radius: 4px; @@ -1630,13 +1628,13 @@ a.sparkline { } &__header { - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 15px; line-height: 20px; margin-bottom: 4px; .username { - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 500; margin-inline-end: 5px; @@ -1653,7 +1651,7 @@ a.sparkline { } a.timestamp { - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; &:hover, @@ -1674,7 +1672,7 @@ a.sparkline { line-height: 20px; overflow-wrap: break-word; font-weight: 400; - color: $primary-text-color; + color: var(--color-text-primary); p { margin-bottom: 20px; @@ -1687,7 +1685,7 @@ a.sparkline { } a { - color: $highlight-text-color; + color: var(--color-text-brand); text-decoration: none; &:hover { @@ -1731,7 +1729,7 @@ a.sparkline { &__description { padding: 15px; font-size: 14px; - color: $dark-text-color; + color: var(--color-text-tertiary); } } @@ -1759,7 +1757,7 @@ a.sparkline { float: right; a { - color: $ui-highlight-color; + color: var(--color-text-brand); text-decoration: none; &:hover, @@ -1776,14 +1774,14 @@ a.sparkline { line-height: 20px; overflow-wrap: break-word; font-weight: 400; - color: $primary-text-color; + color: var(--color-text-primary); box-sizing: border-box; min-height: 100%; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px; a { - color: $highlight-text-color; + color: var(--color-text-brand); text-decoration: none; &:hover { @@ -1808,34 +1806,34 @@ a.sparkline { list-style: disc; padding-inline-start: 15px; margin-bottom: 20px; - color: $darker-text-color; + color: var(--color-text-secondary); &:last-child { margin-bottom: 0; } &__text { - color: $primary-text-color; + color: var(--color-text-primary); } } &__statuses-list { border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); font-size: 13px; line-height: 18px; overflow: hidden; &__item { padding: 16px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &:last-child { border-bottom: 0; } &__meta { - color: $darker-text-color; + color: var(--color-text-secondary); } a { @@ -1872,16 +1870,16 @@ a.sparkline { flex: 0 0 auto; width: 4px; height: 21px; - background: lighten($ui-base-color, 8%); + background: var(--color-bg-secondary); margin: 0 2px; border-radius: 2px; &.positive { - background: $valid-value-color; + background: var(--color-bg-success-base); } &.negative { - background: $error-value-color; + background: var(--color-bg-error-base); } } } @@ -1910,9 +1908,9 @@ a.sparkline { align-items: center; width: calc(1.375rem + 1px); height: calc(1.375rem + 1px); - background: $ui-base-color; - border: 1px solid $highlight-text-color; - color: $highlight-text-color; + background: var(--color-bg-primary); + border: 1px solid var(--color-text-brand); + color: var(--color-text-brand); border-radius: 8px; } @@ -1920,7 +1918,7 @@ a.sparkline { position: absolute; content: ''; width: 1px; - background: $highlight-text-color; + background: var(--color-text-brand); bottom: 0; top: calc(1.875rem + 1px); inset-inline-start: 0.6875rem; @@ -1938,14 +1936,14 @@ a.sparkline { &__entry { h5 { font-weight: 500; - color: $primary-text-color; + color: var(--color-text-primary); line-height: 25px; margin-bottom: 16px; } .status { - border: 1px solid lighten($ui-base-color, 4%); - background: $ui-base-color; + border: 1px solid var(--color-border-primary); + background: var(--color-bg-secondary); border-radius: 4px; } } @@ -1958,8 +1956,8 @@ a.sparkline { line-height: 20px; overflow-wrap: break-word; font-weight: 400; - border: 1px solid lighten($ui-base-color, 4%); - color: $primary-text-color; + border: 1px solid var(--color-border-primary); + color: var(--color-text-primary); box-sizing: border-box; min-height: 100%; @@ -1994,9 +1992,9 @@ a.sparkline { summary { display: block; box-sizing: border-box; - background: var(--nested-card-background); - color: var(--nested-card-text); - border: var(--nested-card-border); + color: var(--color-text-primary); + background: var(--color-bg-brand-softer); + border: 1px solid var(--color-border-on-bg-brand-softer); border-radius: 8px; padding: 8px 13px; position: relative; @@ -2010,7 +2008,7 @@ a.sparkline { display: block; font-size: 15px; line-height: 20px; - color: $highlight-text-color; + color: var(--color-text-brand); cursor: pointer; border: 0; background: transparent; @@ -2053,7 +2051,7 @@ a.sparkline { } .spoiler-button__overlay__label { - outline: 1px solid var(--media-outline-color); + outline: 1px solid var(--color-border-media); } .hide-button { @@ -2062,11 +2060,11 @@ a.sparkline { position: absolute; top: 5px; right: 5px; - color: $white; - border: 0; - outline: 1px solid var(--media-outline-color); - background-color: color.change($black, $alpha: 0.45); + color: var(--color-text-on-media); + background: var(--color-bg-media); backdrop-filter: $backdrop-blur-filter; + outline: 1px solid var(--color-border-media); + border: 0; padding: 3px 12px; border-radius: 99px; font-size: 14px; @@ -2075,7 +2073,7 @@ a.sparkline { &:hover, &:focus { - background-color: color.change($black, $alpha: 0.9); + background-color: rgb(from var(--color-bg-media-base) r g b / 90%); } } @@ -2103,23 +2101,23 @@ a.sparkline { .admin { &__terms-of-service { &__container { - background: var(--surface-background-color); + background: var(--color-bg-tertiary); border-radius: 8px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); overflow: hidden; &__header { padding: 16px; font-size: 14px; line-height: 20px; - color: $secondary-text-color; + color: var(--color-text-primary); display: flex; align-items: center; gap: 12px; } &__body { - background: var(--background-color); + background: var(--color-bg-primary); padding: 16px; overflow-y: scroll; height: 30vh; @@ -2128,7 +2126,7 @@ a.sparkline { &__history { & > li { - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &:last-child { border-bottom: 0; @@ -2166,14 +2164,14 @@ a.sparkline { width: 8px; height: 8px; border-radius: 50%; - background: $dark-text-color; + background: var(--color-text-tertiary); } &.success { - color: $valid-value-color; + color: var(--color-text-success); .dot-indicator__indicator { - background-color: $valid-value-color; + background-color: var(--color-bg-success-base); } } } diff --git a/app/javascript/styles/mastodon/annual_reports.scss b/app/javascript/styles/mastodon/annual_reports.scss index 96500a18bb..a9b7e0ddee 100644 --- a/app/javascript/styles/mastodon/annual_reports.scss +++ b/app/javascript/styles/mastodon/annual_reports.scss @@ -170,7 +170,7 @@ } path:last-child { - stroke: var(--indigo-3) !important; + stroke: var(--color-graph-primary-stroke) !important; fill: none !important; } } diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 3d8bba7c00..6298409d15 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -1,5 +1,4 @@ @use 'variables' as *; -@use 'functions' as *; html.has-modal { &, @@ -17,11 +16,11 @@ html.has-modal { body { font-family: $font-sans-serif, sans-serif; - background: var(--background-color); + background: var(--color-bg-ambient); font-size: 13px; line-height: 18px; font-weight: 400; - color: $primary-text-color; + color: var(--color-text-primary); text-rendering: optimizelegibility; // Disable kerning for Japanese text to preserve monospaced alignment for readability @@ -118,6 +117,7 @@ body { &.admin { padding: 0; + background: var(--color-bg-primary); } &.error { @@ -157,7 +157,7 @@ body { a { &:focus { border-radius: 4px; - outline: $ui-button-focus-outline; + outline: var(--outline-focus-default); } &:focus:not(:focus-visible) { @@ -212,7 +212,7 @@ button { font-size: 16px; font-weight: 400; line-height: 1.7; - color: lighten($error-red, 4%); + color: var(--color-text-error); text-align: center; & > div { @@ -228,7 +228,7 @@ button { } a { - color: $highlight-text-color; + color: var(--color-text-brand); &:hover, &:focus, @@ -238,11 +238,11 @@ button { } &__footer { - color: $dark-text-color; + color: var(--color-text-secondary); font-size: 13px; a { - color: $dark-text-color; + color: var(--color-text-secondary); } } @@ -250,7 +250,7 @@ button { display: inline; border: 0; background: transparent; - color: $dark-text-color; + color: var(--color-text-secondary); font: inherit; padding: 0; margin: 0; @@ -267,7 +267,7 @@ button { } &.copied { - color: $valid-value-color; + color: var(--mas-status-success-color); transition: none; } } diff --git a/app/javascript/styles/mastodon/branding.scss b/app/javascript/styles/mastodon/branding.scss index 8e8dd3530b..a7cc9c500e 100644 --- a/app/javascript/styles/mastodon/branding.scss +++ b/app/javascript/styles/mastodon/branding.scss @@ -1,5 +1,5 @@ @use 'variables' as *; .logo { - color: $primary-text-color; + color: var(--color-text-primary); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index dbf67cec51..01de2c7d7a 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1,6 +1,5 @@ @use 'sass:color'; @use 'variables' as *; -@use 'functions' as *; @use 'mixins' as *; .app-body { @@ -17,7 +16,7 @@ } .inline-alert { - color: $valid-value-color; + color: var(--color-text-success); font-weight: 400; .no-reduce-motion & { @@ -29,7 +28,7 @@ display: block; font-size: 15px; line-height: 20px; - color: $highlight-text-color; + color: var(--color-text-brand); border: 0; background: transparent; padding: 0; @@ -37,7 +36,7 @@ text-decoration: none; &--destructive { - color: $error-value-color; + color: var(--color-text-error); } &:hover, @@ -46,19 +45,19 @@ } &:disabled { - color: $ui-primary-color; + color: var(--color-text-primary); cursor: default; } &:focus-visible { - outline: $ui-button-icon-focus-outline; + outline: var(--outline-focus-default); } } .help-button { - background: $ui-button-background-color; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); border: 0; - color: $ui-button-color; border-radius: 20px; cursor: pointer; width: 24px; @@ -70,11 +69,11 @@ &:active, &:focus, &:hover { - background-color: $ui-button-focus-background-color; + background: var(--color-bg-brand-base-hover); } &:focus-visible { - outline: $ui-button-icon-focus-outline; + outline: var(--outline-focus-default); } .icon { @@ -84,11 +83,11 @@ } .button { - background-color: $ui-button-background-color; + background-color: var(--color-bg-brand-base); border: 10px none; border-radius: 4px; box-sizing: border-box; - color: $ui-button-color; + color: var(--color-text-on-brand-base); cursor: pointer; display: inline-flex; align-items: center; @@ -111,11 +110,12 @@ &:active, &:focus, &:hover { - background-color: $ui-button-focus-background-color; + background-color: var(--color-bg-brand-base-hover); } &:focus-visible { - outline: $ui-button-icon-focus-outline; + outline: 2px solid var(--color-bg-brand-base); + outline-offset: 2px; } &--compact { @@ -127,13 +127,13 @@ } &--dangerous { - background-color: var(--error-background-color); - color: var(--on-error-color); + background-color: var(--color-bg-error-base); + color: var(--color-text-on-error-base); &:active, &:focus, &:hover { - background-color: var(--error-active-background-color); + background-color: var(--color-bg-error-base-hover); transition: none; } } @@ -142,14 +142,16 @@ &:active, &:focus, &:hover { - background-color: $ui-button-destructive-focus-background-color; + color: var(--color-text-on-error-base); + background-color: var(--color-bg-error-base); transition: none; } } &:disabled, &.disabled { - background-color: $ui-button-disabled-color; + color: var(--color-text-on-disabled); + background-color: var(--color-bg-disabled); cursor: not-allowed; } @@ -158,21 +160,22 @@ } &.copied { - background: $valid-value-color; + color: var(--color-text-on-success-base); + background-color: var(--color-bg-success-base); transition: none; } &.button-secondary { - color: $highlight-text-color; + color: var(--color-text-brand); background: transparent; padding: 6px 17px; - border: 1px solid $highlight-text-color; + border: 1px solid var(--color-text-brand); &:active, &:focus, &:hover { - border-color: lighten($highlight-text-color, 4%); - color: lighten($highlight-text-color, 4%); + border-color: var(--color-text-brand); + color: var(--color-text-brand); background-color: transparent; text-decoration: none; } @@ -181,28 +184,27 @@ &:active, &:focus, &:hover { - border-color: $ui-button-destructive-focus-background-color; - color: $ui-button-destructive-focus-background-color; + border-color: var(--color-text-error); + color: var(--color-text-error); } } &:disabled, &.disabled { - opacity: 0.7; - border-color: $ui-button-disabled-color; - color: $ui-button-disabled-color; + border-color: var(--color-text-disabled); + color: var(--color-text-disabled); &:active, &:focus, &:hover { - border-color: $ui-button-disabled-color; - color: $ui-button-disabled-color; + border-color: var(--color-text-disabled); + color: var(--color-text-disabled); } } } &.button--plain { - color: $highlight-text-color; + color: var(--color-text-brand); background: transparent; padding: 6px; @@ -216,7 +218,7 @@ &:focus, &:hover { border-color: transparent; - color: lighten($highlight-text-color, 4%); + color: var(--color-text-brand-soft); background-color: transparent; text-decoration: none; } @@ -225,57 +227,13 @@ &.disabled { opacity: 0.7; border-color: transparent; - color: $ui-button-disabled-color; + color: var(--color-text-disabled); &:active, &:focus, &:hover { border-color: transparent; - color: $ui-button-disabled-color; - } - } - } - - &.button-tertiary { - background: transparent; - padding: 6px 17px; - color: $ui-button-tertiary-color; - border: 1px solid $ui-button-tertiary-border-color; - - &:active, - &:focus, - &:hover { - background-color: $ui-button-tertiary-focus-background-color; - color: $ui-button-tertiary-focus-color; - border: 0; - padding: 7px 18px; - } - - &:disabled { - opacity: 0.5; - } - - &.button--confirmation { - color: $valid-value-color; - border-color: $valid-value-color; - - &:active, - &:focus, - &:hover { - background: $valid-value-color; - color: $primary-text-color; - } - } - - &.button--destructive { - color: $error-value-color; - border-color: $error-value-color; - - &:active, - &:focus, - &:hover { - background: $error-value-color; - color: $primary-text-color; + color: var(--color-text-disabled); } } } @@ -323,12 +281,17 @@ } .icon-button { + --default-icon-color: var(--color-text-secondary); + --default-bg-color: transparent; + --hover-icon-color: var(--color-text-primary); + --hover-bg-color: var(--color-bg-brand-softer); + display: inline-flex; - color: $action-button-color; + color: var(--default-icon-color); border: 0; padding: 0; border-radius: 4px; - background: transparent; + background: var(--default-bg-color); cursor: pointer; align-items: center; justify-content: center; @@ -345,66 +308,41 @@ &:hover, &:active, &:focus-visible { - color: lighten($action-button-color, 7%); - background-color: color.change($action-button-color, $alpha: 0.15); + color: var(--hover-icon-color); + background-color: var(--hover-bg-color); } &:focus-visible { - outline: $ui-button-icon-focus-outline; + outline: 2px solid var(--color-text-brand); } &.disabled { - color: darken($action-button-color, 13%); - background-color: transparent; + color: var(--color-text-disabled); + background-color: var(--default-bg-color); cursor: default; } &.inverted { - color: $lighter-text-color; - - &:hover, - &:active, - &:focus-visible { - color: darken($lighter-text-color, 7%); - background-color: color.change($lighter-text-color, $alpha: 0.15); - } - - &:focus-visible { - outline: $ui-button-icon-focus-outline; - } - - &.disabled { - color: lighten($lighter-text-color, 7%); - background-color: transparent; - } + --default-icon-color: var(--color-text-primary); + --hover-icon-color: var(--color-text-secondary); } &.active { - color: $highlight-text-color; - - &:hover, - &:active, - &:focus-visible { - color: $highlight-text-color; - background-color: transparent; - } - - &.disabled { - color: lighten($highlight-text-color, 13%); - } + --default-icon-color: var(--color-text-brand); + --hover-icon-color: var(--color-text-brand); + --hover-bg-color: transparent; } &.overlayed { + --default-icon-color: rgb(from var(--color-text-on-media) r g b / 70%); + --default-bg-color: var(--color-bg-media); + --hover-icon-color: var(--color-text-brand); + --hover-bg-color: rgb(from var(--color-bg-media-base) r g b / 90%); + box-sizing: content-box; - background: color.change($black, $alpha: 0.65); backdrop-filter: $backdrop-blur-filter; - color: color.change($white, $alpha: 0.7); border-radius: 4px; padding: 2px; - - &:hover { - background: color.change($black, $alpha: 0.9); - } } &--with-counter { @@ -423,55 +361,14 @@ } &.copied { - border-color: $valid-value-color; - color: $valid-value-color; + color: var(--color-text-success); transition: none; - background-color: color.change($valid-value-color, $alpha: 0.15); + background-color: var(--color-bg-success-softer); + border-color: var(--color-border-on-bg-brand-softer); } } -.text-icon-button { - color: $lighter-text-color; - border: 0; - border-radius: 4px; - background: transparent; - cursor: pointer; - font-weight: 600; - font-size: 11px; - padding: 0 3px; - line-height: 27px; - white-space: nowrap; - - &:hover, - &:active, - &:focus { - color: darken($lighter-text-color, 7%); - background-color: color.change($lighter-text-color, $alpha: 0.15); - } - - &:focus-visible { - outline: $ui-button-icon-focus-outline; - } - - &.disabled { - color: lighten($lighter-text-color, 20%); - background-color: transparent; - cursor: default; - } - - &.active { - color: $highlight-text-color; - - &:hover, - &:active, - &:focus { - color: $highlight-text-color; - background-color: transparent; - } - } -} - -[data-popper-placement] { +body > [data-popper-placement] { z-index: 9999; } @@ -514,10 +411,10 @@ &__suggestions { box-shadow: var(--dropdown-shadow); - background: var(--input-background-color); - border: 1px solid var(--background-border-color); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border-primary); border-radius: 0 0 4px 4px; - color: var(--on-input-color); + color: var(--color-text-primary); font-size: 14px; padding: 0; @@ -530,7 +427,7 @@ font-size: 14px; line-height: 20px; letter-spacing: 0.25px; - color: var(--on-input-color); + color: var(--color-text-primary); &:last-child { border-radius: 0 0 4px 4px; @@ -539,7 +436,7 @@ &:hover, &:focus, &:active { - background: var(--dropdown-border-color); + background: var(--color-bg-secondary); .autosuggest-account .display-name__account { color: inherit; @@ -547,8 +444,8 @@ } &.selected { - background: $ui-highlight-color; - color: $ui-button-color; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); .autosuggest-account .display-name__account { color: inherit; @@ -584,7 +481,7 @@ display: block; line-height: 16px; font-size: 12px; - color: $ui-primary-color; + color: var(--color-text-secondary); } } @@ -639,28 +536,27 @@ flex-direction: column; flex: 0 1 auto; border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-on-bg-secondary); transition: border-color 300ms linear; position: relative; - background: var(--input-background-color); + background: var(--color-bg-secondary); &.active { transition: none; - border-color: $ui-highlight-color; + border-color: var(--color-text-brand); } } &__warning { - color: $inverted-text-color; - background: $ui-primary-color; - box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.3); + color: var(--color-text-primary); + background: var(--color-bg-warning-softer); + border: 1px solid var(--color-border-on-bg-warning-softer); padding: 8px 10px; border-radius: 4px; font-size: 13px; font-weight: 400; strong { - color: $inverted-text-color; font-weight: 500; @each $lang in $cjk-langs { @@ -671,7 +567,7 @@ } a { - color: $lighter-text-color; + color: var(--color-text-brand); font-weight: 500; text-decoration: underline; @@ -695,7 +591,7 @@ .autosuggest-input { flex: 1 1 auto; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-width: 1px 0; } } @@ -706,8 +602,8 @@ box-sizing: border-box; width: 100%; margin: 0; - color: $secondary-text-color; - background: var(--input-background-color); + color: var(--color-text-primary); + background: transparent; font-family: inherit; font-size: 14px; padding: 12px; @@ -722,8 +618,8 @@ .spoiler-input__input { padding: 12px 12px - 5px; - background: color.change($ui-highlight-color, $alpha: 0.05); - color: $highlight-text-color; + background: var(--color-bg-brand-softer); + color: var(--color-text-brand); } &__dropdowns { @@ -823,8 +719,9 @@ .icon-button { flex: 0 0 auto; - color: $white; - background: rgba(0, 0, 0, 75%); + color: var(--color-text-on-media); + background: var(--color-bg-media); + backdrop-filter: $backdrop-blur-filter; border-radius: 6px; font-size: 12px; line-height: 16px; @@ -857,8 +754,8 @@ padding: 8px; .icon-button.active { - color: #ffbe2e; - background: rgba(0, 0, 0, 75%); + color: var(--color-text-on-warning-base); + background: var(--color-bg-warning-base); } } } @@ -907,22 +804,21 @@ .icon-button { box-sizing: content-box; - color: $highlight-text-color; + color: var(--color-text-brand); &:hover, &:focus, &:active { - color: $highlight-text-color; + color: var(--color-text-brand); } &.disabled { - color: $highlight-text-color; - opacity: 0.5; + color: var(--color-text-disabled); } &.active { - background: $ui-highlight-color; - color: $primary-text-color; + background: var(--color-bg-brand-base); + color: var(--color-text-on-brand-base); } } } @@ -946,7 +842,7 @@ .poll__input { width: 17px; height: 17px; - border-color: $darker-text-color; + border-color: var(--color-text-secondary); } &__footer { @@ -959,7 +855,7 @@ &__sep { width: 1px; height: 22px; - background: lighten($ui-base-color, 8%); + background: var(--color-border-primary); flex: 0 0 auto; } } @@ -977,7 +873,7 @@ font-weight: 500; line-height: 16px; letter-spacing: 0.5px; - color: $darker-text-color; + color: var(--color-text-secondary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -993,8 +889,8 @@ font-weight: 500; line-height: 20px; letter-spacing: 0.1px; - color: $highlight-text-color; - background-color: var(--input-background-color); + color: var(--color-text-brand); + background-color: var(--color-bg-secondary-solid); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -1005,7 +901,6 @@ .status__quote { margin: 0 8px; max-height: 220px; - overflow: hidden; // Override .status__content .status__content__text.status__content__text--visible .status__content__text.status__content__text { @@ -1025,10 +920,10 @@ display: flex; align-items: center; gap: 4px; + color: var(--color-text-brand); background: transparent; - color: $highlight-text-color; + border: 1px solid var(--color-text-brand); border-radius: 6px; - border: 1px solid $highlight-text-color; padding: 4px 8px; font-size: 13px; line-height: normal; @@ -1039,9 +934,8 @@ &[disabled] { cursor: default; - color: $highlight-text-color; - border-color: $highlight-text-color; - opacity: 0.5; + color: var(--color-text-disabled); + border-color: var(--color-text-disabled); } .icon { @@ -1058,18 +952,19 @@ } &.active { - background: $ui-highlight-color; - border-color: $ui-highlight-color; - color: $primary-text-color; + color: var(--color-text-on-brand-base); + border-color: var(--color-bg-brand-base); + background: var(--color-bg-brand-base); } &.warning { - border-color: var(--goldenrod-2); - color: var(--goldenrod-2); + color: var(--color-text-warning); + border-color: var(--color-text-warning); &.active { - background-color: var(--goldenrod-2); - color: var(--indigo-1); + color: var(--color-text-on-warning-base); + border-color: var(--color-bg-warning-base); + background-color: var(--color-bg-warning-base); } } } @@ -1080,12 +975,12 @@ font-size: 14px; font-weight: 400; line-height: normal; - color: $darker-text-color; + color: var(--color-text-secondary); flex: 1 0 auto; text-align: end; &.character-counter--over { - color: $error-red; + color: var(--color-text-error); } } @@ -1101,7 +996,7 @@ p { font-size: 15px; line-height: 22px; - color: $secondary-text-color; + color: var(--color-text-primary); margin-bottom: 20px; strong { @@ -1109,7 +1004,7 @@ } a { - color: $secondary-text-color; + color: var(--color-text-primary); text-decoration: none; unicode-bidi: isolate; @@ -1156,7 +1051,7 @@ font-size: 15px; line-height: 22px; padding-top: 2px; - color: $primary-text-color; + color: var(--color-text-primary); &:focus { outline: 0; @@ -1187,7 +1082,7 @@ } a { - color: $secondary-text-color; + color: var(--color-text-status-links); text-decoration: none; unicode-bidi: isolate; @@ -1207,7 +1102,7 @@ } a.unhandled-link { - color: $highlight-text-color; + color: var(--color-text-brand); } .status__content__text { @@ -1263,7 +1158,7 @@ inset-inline-start: 50%; top: 4px; transform: translateX(-50%); - background: lighten($ui-base-color, 8%); + background: var(--color-border-primary); width: 2px; height: calc(100% + 32px - 8px); // Account for gap to next element } @@ -1280,12 +1175,12 @@ padding: 0; max-height: 4 * 20px; overflow: hidden; - color: $darker-text-color; + color: var(--color-text-secondary); } &__attachments { margin-top: 4px; - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 12px; line-height: 16px; display: flex; @@ -1301,11 +1196,11 @@ .edit-indicator { border-radius: 4px 4px 0 0; - background: lighten($ui-base-color, 4%); + background: var(--color-bg-tertiary); padding: 12px; overflow-y: auto; flex: 0 0 auto; - border-bottom: 0.5px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--color-border-primary); display: flex; flex-direction: column; gap: 4px; @@ -1314,7 +1209,7 @@ display: flex; justify-content: space-between; align-items: center; - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 12px; line-height: 16px; overflow: hidden; @@ -1347,7 +1242,7 @@ } &__content { - color: $secondary-text-color; + color: var(--color-text-primary); font-size: 14px; line-height: 20px; letter-spacing: 0.25px; @@ -1360,12 +1255,12 @@ overflow: hidden; a { - color: $highlight-text-color; + color: var(--color-text-brand); } } &__attachments { - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 12px; line-height: 16px; opacity: 0.75; @@ -1409,7 +1304,7 @@ } a { - color: $secondary-text-color; + color: var(--color-text-primary); text-decoration: none; &:hover { @@ -1427,7 +1322,7 @@ } &.unhandled-link { - color: $highlight-text-color; + color: var(--color-text-brand); } } } @@ -1442,7 +1337,7 @@ align-items: center; font-size: 15px; line-height: 22px; - color: $highlight-text-color; + color: var(--color-text-brand); border: 0; background: transparent; padding: 0; @@ -1474,11 +1369,11 @@ line-height: 22px; display: flex; justify-content: space-between; - color: $dark-text-color; + color: var(--color-text-tertiary); } .status__wrapper--filtered { - color: $dark-text-color; + color: var(--color-text-tertiary); border: 0; font-size: inherit; text-align: center; @@ -1488,11 +1383,11 @@ box-sizing: border-box; width: 100%; clear: both; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &__button { display: inline; - color: lighten($ui-highlight-color, 8%); + color: var(--color-text-brand); border: 0; background: transparent; padding: 0; @@ -1508,16 +1403,16 @@ .focusable { &:focus-visible { - outline: 2px solid $ui-button-focus-outline-color; + outline: 2px solid var(--color-text-brand); outline-offset: -2px; - background: color.change($ui-highlight-color, $alpha: 0.05); + background: var(--color-bg-brand-softer); } } .status { padding: 16px; min-height: 54px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); cursor: auto; opacity: 1; animation: fade 150ms linear; @@ -1588,12 +1483,14 @@ } &--first-in-thread { - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); } &__line { + --thread-line-color: var(--color-border-primary); + height: 16px - 4px; - border-inline-start: 2px solid lighten($ui-base-color, 8%); + border-inline-start: 2px solid var(--thread-line-color); width: 0; position: absolute; top: 0; @@ -1610,7 +1507,7 @@ top: 16px - 4px; height: 46px + 4px + 4px; width: 2px; - background: $ui-base-color; + background: var(--thread-line-color); inset-inline-start: -2px; } } @@ -1629,7 +1526,7 @@ content: ''; position: absolute; inset: 0; - background: rgb(from $ui-highlight-color r g b / 20%); + background: var(--color-bg-brand-softer); opacity: 0; animation: fade 0.7s reverse both 0.3s; pointer-events: none; @@ -1643,11 +1540,11 @@ height: 40px; order: 2; flex: 0 0 auto; - color: $dark-text-color; + color: var(--color-text-secondary); } .notification__relative_time { - color: $dark-text-color; + color: var(--color-text-tertiary); float: right; font-size: 14px; padding-bottom: 1px; @@ -1664,7 +1561,7 @@ } .status__display-name { - color: $dark-text-color; + color: var(--color-text-secondary); } .status__info .status__display-name { @@ -1714,7 +1611,7 @@ padding: 0 10px; .detailed-status__display-name { - color: $dark-text-color; + color: var(--color-text-tertiary); span { display: inline; @@ -1751,7 +1648,7 @@ font-size: 15px; line-height: 22px; font-weight: 500; - color: $dark-text-color; + color: var(--color-text-secondary); &__icon { display: flex; @@ -1781,10 +1678,10 @@ .notification-ungrouped--direct, .notification-group--direct, .notification-group--annual-report { - background: color.change($ui-highlight-color, $alpha: 0.05); + background: var(--color-bg-brand-softer); &:focus { - background: color.change($ui-highlight-color, $alpha: 0.1); + background: var(--color-bg-brand-soft); } } @@ -1792,7 +1689,7 @@ .notification-ungrouped--direct { .status__prepend, .notification-ungrouped__header { - color: $highlight-text-color; + color: var(--color-text-brand); } } @@ -1814,7 +1711,7 @@ .detailed-status { padding: 16px; - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); .status__content { font-size: 19px; @@ -1849,7 +1746,7 @@ .logo { width: 40px; height: 40px; - color: $dark-text-color; + color: var(--color-text-tertiary); } } @@ -1876,12 +1773,12 @@ .detailed-status__meta { margin-top: 24px; - color: $dark-text-color; + color: var(--color-text-tertiary); font-size: 14px; line-height: 18px; &__line { - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); padding: 8px 0; display: flex; align-items: center; @@ -1903,14 +1800,14 @@ } .animated-number { - color: $secondary-text-color; + color: var(--color-text-primary); font-weight: 500; } } .detailed-status__action-bar { - border-top: 1px solid var(--background-border-color); - border-bottom: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--color-border-primary); display: flex; flex-direction: row; padding: 10px 0; @@ -1919,30 +1816,11 @@ .detailed-status__wrapper-direct { .detailed-status, .detailed-status__action-bar { - background: color.mix($ui-base-color, $ui-highlight-color, 95%); - } - - &:focus-visible { - .detailed-status, - .detailed-status__action-bar { - background: color.mix( - lighten($ui-base-color, 4%), - $ui-highlight-color, - 95% - ); - } - } - - .detailed-status__action-bar { - border-top-color: color.mix( - lighten($ui-base-color, 8%), - $ui-highlight-color, - 95% - ); + background: var(--color-bg-brand-softer); } .status__prepend { - color: $highlight-text-color; + color: var(--color-text-brand); } } @@ -1953,11 +1831,12 @@ --quote-margin: var(--status-gutter-width); position: relative; + overflow: hidden; margin-block-start: 16px; margin-inline-start: calc(var(--quote-margin) + var(--thread-margin, 0px)); border-radius: 12px; - color: var(--nested-card-text); - border: 1px solid var(--surface-border-color); + color: var(--color-text-primary); + border: 1px solid var(--color-border-primary); } .status__quote--error { @@ -1991,8 +1870,8 @@ font-weight: 400; line-height: 20px; letter-spacing: 0.25px; - color: $darker-text-color; - background: var(--surface-variant-background-color); + color: var(--color-text-secondary); + background: var(--color-bg-brand-softer); border-radius: 8px; cursor: default; } @@ -2056,14 +1935,14 @@ .domain { padding: 16px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); display: flex; align-items: center; gap: 8px; &__domain-name { flex: 1 1 auto; - color: $primary-text-color; + color: var(--color-text-primary); font-size: 15px; line-height: 21px; font-weight: 500; @@ -2072,14 +1951,14 @@ .account { padding: 16px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); .account__display-name { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; - color: $darker-text-color; + color: var(--color-text-secondary); overflow: hidden; text-decoration: none; font-size: 14px; @@ -2090,6 +1969,7 @@ .display-name strong { display: inline; + color: var(--color-text-primary); } } @@ -2114,24 +1994,24 @@ &__domain-pill { display: inline-flex; - background: color.change($highlight-text-color, $alpha: 0.2); + background: var(--color-bg-brand-softer); border-radius: 4px; border: 0; - color: $highlight-text-color; + color: var(--color-text-brand); font-weight: 500; font-size: 12px; line-height: 16px; padding: 4px 8px; &.active { - color: $white; - background: $ui-highlight-color; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); } &__popout { - background: var(--dropdown-background-color); + background: var(--color-bg-elevated); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--dropdown-border-color); + border: 1px solid var(--color-border-primary); box-shadow: var(--dropdown-shadow); max-width: 320px; padding: 16px; @@ -2141,7 +2021,7 @@ gap: 24px; font-size: 14px; line-height: 20px; - color: $darker-text-color; + color: var(--color-text-secondary); .link-button { display: inline; @@ -2157,8 +2037,8 @@ &__icon { width: 40px; height: 40px; - background: $ui-highlight-color; - color: $white; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); display: flex; align-items: center; justify-content: center; @@ -2169,15 +2049,15 @@ h3 { font-size: 17px; line-height: 22px; - color: $primary-text-color; + color: var(--color-text-primary); } } &__handle { - border: 2px dashed $highlight-text-color; - background: color.change($highlight-text-color, $alpha: 0.1); + border: 2px dashed var(--color-border-on-brand-softer); + background: var(--color-bg-brand-softer); padding: 12px 8px; - color: $highlight-text-color; + color: var(--color-text-brand); border-radius: 4px; &__label { @@ -2213,14 +2093,14 @@ align-items: center; justify-content: center; flex-shrink: 0; - color: $highlight-text-color; + color: var(--color-text-brand); } h6 { font-size: 14px; line-height: 20px; font-weight: 500; - color: $primary-text-color; + color: var(--color-text-primary); } } } @@ -2236,10 +2116,10 @@ -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top: 10px; - color: $darker-text-color; + color: var(--color-text-secondary); &--missing { - color: $dark-text-color; + color: var(--color-text-tertiary); } p { @@ -2303,7 +2183,7 @@ display: block; position: relative; border-radius: var(--avatar-border-radius); - background: var(--surface-background-color); + background: var(--color-bg-tertiary); flex-shrink: 0; img { @@ -2315,7 +2195,7 @@ } &--loading { - background-color: var(--surface-background-color); + background-color: var(--color-bg-tertiary); } &--inline { @@ -2346,8 +2226,9 @@ top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); - color: $primary-text-color; - text-shadow: 1px 1px 2px $base-shadow-color; + color: var(--color-text-primary); + text-shadow: 1px 1px 2px + rgb(from var(--color-shadow-primary) r g b / 100%); font-weight: 700; font-size: 15px; } @@ -2366,11 +2247,11 @@ border-radius: $height; min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle line-height: $height + 1px; // to visually center the numbers - background-color: $ui-button-background-color; - color: $white; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); border-width: 1px; border-style: solid; - border-color: var(--background-color); + border-color: var(--color-bg-primary); font-size: 11px; font-weight: 500; text-align: center; @@ -2408,7 +2289,7 @@ a .account__avatar { } .account__avatar { - box-shadow: 0 0 0 2px var(--background-color); + box-shadow: 0 0 0 2px var(--color-bg-primary); } } @@ -2433,7 +2314,7 @@ a .account__avatar { .account__relationship, .explore-suggestions-card { .icon-button { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px; box-sizing: content-box; padding: 5px; @@ -2473,7 +2354,7 @@ a .account__avatar { .status__display-name, .account__display-name { .display-name strong { - color: $primary-text-color; + color: var(--color-text-primary); } } @@ -2504,7 +2385,7 @@ a.account__display-name { } .detailed-status__display-name { - color: $darker-text-color; + color: var(--color-text-secondary); display: flex; align-items: center; gap: 10px; @@ -2521,7 +2402,7 @@ a.account__display-name { } strong { - color: $primary-text-color; + color: var(--color-text-primary); } } @@ -2529,11 +2410,11 @@ a.account__display-name { .status__content, .status__content p, .status__content a { - color: $dark-text-color; + color: var(--color-text-tertiary); } .status__display-name strong { - color: $dark-text-color; + color: var(--color-text-tertiary); } .status__avatar { @@ -2543,7 +2424,7 @@ a.account__display-name { .notification__report { padding: 16px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); display: flex; gap: 10px; @@ -2556,7 +2437,7 @@ a.account__display-name { display: flex; justify-content: space-between; align-items: center; - color: $darker-text-color; + color: var(--color-text-secondary); gap: 10px; font-size: 15px; line-height: 22px; @@ -2579,7 +2460,7 @@ a.account__display-name { } .notification-group--link { - color: $secondary-text-color; + color: var(--color-text-primary); text-decoration: none; .notification-group__main { @@ -2608,7 +2489,7 @@ a.account__display-name { padding: 16px; padding-bottom: 0; cursor: default; - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 15px; line-height: 22px; font-weight: 500; @@ -2617,13 +2498,13 @@ a.account__display-name { gap: 10px; .icon { - color: $highlight-text-color; + color: var(--color-text-brand); width: 18px; height: 18px; } .icon-star { - color: $gold-star; + color: var(--color-text-favourite-highlight); } > span { @@ -2634,11 +2515,11 @@ a.account__display-name { } .icon-button.star-icon.active { - color: $gold-star; + color: var(--color-text-favourite-highlight); } .icon-button.bookmark-icon.active { - color: $red-bookmark; + color: var(--color-text-bookmark-highlight); } .no-reduce-motion .icon-button.star-icon { @@ -2708,7 +2589,7 @@ a.account__display-name { max-height: $media-modal-media-max-height; width: auto; height: auto; - outline: 1px solid var(--media-outline-color); + outline: 1px solid var(--color-border-media); outline-offset: -1px; border-radius: 8px; touch-action: none; @@ -2738,7 +2619,7 @@ a.account__display-name { max-height: $media-modal-media-max-height; position: absolute; z-index: 1; - outline: 1px solid var(--media-outline-color); + outline: 1px solid var(--color-border-media); outline-offset: -1px; border-radius: 8px; overflow: hidden; @@ -2789,7 +2670,7 @@ a.account__display-name { .icon-button { padding: 8px; - color: $secondary-text-color; + color: var(--color-text-primary); } .icon-button .icon { @@ -2826,15 +2707,15 @@ a.account__display-name { } .dropdown-menu__separator { - border-bottom: 1px solid var(--dropdown-border-color); + border-bottom: 1px solid var(--color-border-primary); margin: 5px 0; height: 0; } .dropdown-menu { - background: var(--dropdown-background-color); + background: var(--color-bg-elevated); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--dropdown-border-color); + border: 1px solid var(--color-border-primary); padding: 4px; border-radius: 4px; box-shadow: var(--dropdown-shadow); @@ -2868,13 +2749,13 @@ a.account__display-name { &__container { &__header { - border-bottom: 1px solid var(--dropdown-border-color); + border-bottom: 1px solid var(--color-border-primary); padding: 10px 14px; padding-bottom: 14px; margin-bottom: 4px; font-size: 13px; line-height: 18px; - color: $darker-text-color; + color: var(--color-text-secondary); } &__list { @@ -2918,11 +2799,11 @@ a.account__display-name { display: block; &--dangerous { - color: $error-value-color; + color: var(--color-text-error); } &--highlighted { - color: $highlight-text-color; + color: var(--color-text-brand); } &-content { @@ -2956,7 +2837,7 @@ a.account__display-name { &:hover, &:active { &:not(:disabled, [aria-disabled='true']) { - background: var(--dropdown-border-color); + background: var(--color-bg-secondary); outline: 0; } } @@ -2964,12 +2845,12 @@ a.account__display-name { button:disabled, button[aria-disabled='true'] { - color: $dark-text-color; + color: var(--color-text-disabled); cursor: default; &:focus { - color: rgb(from $dark-text-color r g b / 70%); - background: var(--dropdown-border-color); + color: rgb(from var(--color-text-disabled) r g b / 70%); + background: var(--color-bg-disabled); outline: 0; } } @@ -3049,6 +2930,8 @@ a.account__display-name { flex-direction: column; contain: inline-size layout paint style; container: column / inline-size; + color: var(--color-text-primary); + background-color: var(--color-bg-primary); @media screen and (min-width: $no-gap-breakpoint) { max-width: 600px; @@ -3067,9 +2950,9 @@ a.account__display-name { width: 100%; gap: 8px; padding-bottom: env(safe-area-inset-bottom); - background: var(--background-color); + background: var(--color-bg-primary); backdrop-filter: $backdrop-blur-filter; - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); box-sizing: border-box; .layout-multiple-columns & { @@ -3112,7 +2995,7 @@ a.account__display-name { color: inherit; &.active { - color: $highlight-text-color; + color: var(--color-text-brand); } &:focus { @@ -3120,22 +3003,22 @@ a.account__display-name { } &:focus-visible { - border-top-color: $ui-button-focus-outline-color; + border-top-color: var(--color-text-brand); border-radius: 0; } } } .tabs-bar__wrapper { - background: var(--background-color); + background: var(--color-bg-primary); backdrop-filter: $backdrop-blur-filter; position: sticky; top: 0; z-index: 2; - padding-top: 0; + border-top: 0; @media screen and (min-width: $no-gap-breakpoint) { - padding-top: 10px; + border-top: 10px solid var(--color-bg-ambient); } } @@ -3163,13 +3046,13 @@ a.account__display-name { flex-direction: column; > .scrollable { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; border-radius: 0 0 4px 4px; &.about, &.privacy-policy { - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); border-radius: 4px; @media screen and (max-width: $no-gap-breakpoint) { @@ -3239,7 +3122,7 @@ a.account__display-name { display: flex; flex: 1 1 auto; padding: 13px 3px 11px; - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; text-align: center; font-size: 16px; @@ -3372,7 +3255,7 @@ a.account__display-name { .navigation-panel { margin: 0; - border-inline-start: 1px solid var(--background-border-color); + border-inline-start: 1px solid var(--color-border-primary); height: 100dvh; } @@ -3422,7 +3305,7 @@ a.account__display-name { .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { pointer-events: auto; - background: var(--background-color); + background: var(--color-bg-primary); position: fixed; width: 284px + 70px; inset-inline-end: -70px; @@ -3453,7 +3336,7 @@ a.account__display-name { .columns-area__panels__pane--overlay { pointer-events: auto; - background: color.change($base-overlay-background, $alpha: 0.5); + background: rgb(from var(--color-bg-overlay) r g b / 50%); z-index: 3; .columns-area__panels__pane__inner { @@ -3472,7 +3355,7 @@ a.account__display-name { gap: 8px; display: flex; flex-direction: column; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &:last-child { border-bottom: 0; @@ -3481,7 +3364,7 @@ a.account__display-name { &__source { font-size: 13px; line-height: 16px; - color: $dark-text-color; + color: var(--color-text-tertiary); @container (width >= 400px) { padding-inline-start: 60px; @@ -3522,14 +3405,14 @@ a.account__display-name { .display-name { font-size: 15px; line-height: 20px; - color: $secondary-text-color; + color: var(--color-text-primary); strong { font-weight: 700; } &__account { - color: $darker-text-color; + color: var(--color-text-secondary); display: block; } } @@ -3567,14 +3450,14 @@ a.account__display-name { position: absolute; inset-inline-start: 9px; top: -13px; - background: $ui-highlight-color; - border: 2px solid var(--background-color); + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); + border: 2px solid var(--color-bg-primary); padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 500; line-height: 14px; - color: $primary-text-color; } &__issue-badge { @@ -3582,7 +3465,7 @@ a.account__display-name { inset-inline-start: 11px; bottom: 1px; display: block; - background: $error-red; + background: var(--color-text-error); border-radius: 50%; width: 0.625rem; height: 0.625rem; @@ -3590,7 +3473,7 @@ a.account__display-name { } .column-link--transparent .icon-with-badge__badge { - border-color: var(--background-color); + border-color: var(--color-bg-primary); } .column-title { @@ -3608,7 +3491,7 @@ a.account__display-name { font-size: 16px; line-height: 24px; font-weight: 400; - color: $darker-text-color; + color: var(--color-text-secondary); } @media screen and (width >= 600px) { @@ -3617,11 +3500,11 @@ a.account__display-name { } .copy-paste-text { - background: lighten($ui-base-color, 4%); + background: var(--color-bg-secondary); border-radius: 8px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); padding: 16px; - color: $primary-text-color; + color: var(--color-text-primary); font-size: 15px; line-height: 22px; display: flex; @@ -3634,11 +3517,11 @@ a.account__display-name { &.focused { transition: none; outline: 0; - border-color: $highlight-text-color; + border-color: var(--color-text-brand); } &.copied { - border-color: $valid-value-color; + border-color: var(--color-text-success); transition: none; } @@ -3665,7 +3548,7 @@ a.account__display-name { margin-top: -20px; .app-form__avatar-input { - border: 2px solid var(--background-color); + border: 2px solid var(--color-bg-primary); position: absolute; inset-inline-start: -2px; bottom: -40px; @@ -3689,6 +3572,7 @@ a.account__display-name { flex-direction: column; height: calc(100% - 10px); overflow-y: auto; + scrollbar-width: thin; .compose-form { flex: 1 1 auto; @@ -3707,6 +3591,7 @@ a.account__display-name { flex: 1 1 auto; min-height: 0; overflow-y: auto; + scrollbar-width: thin; } &__list-panel { @@ -3718,7 +3603,7 @@ a.account__display-name { &__sep { width: 0; height: 24px; - border-left: 1px solid var(--background-border-color); + border-left: 1px solid var(--color-border-primary); } .column-link { @@ -3818,7 +3703,7 @@ a.account__display-name { flex: 0 0 auto; border: 0; background: transparent; - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); margin: 10px 0; } @@ -3835,14 +3720,14 @@ a.account__display-name { overflow: hidden; display: flex; border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); } .drawer__inner { position: absolute; top: 0; inset-inline-start: 0; - background: var(--background-color); + background: var(--color-bg-primary); box-sizing: border-box; padding: 0; display: flex; @@ -3855,12 +3740,12 @@ a.account__display-name { } .drawer__inner__mastodon { - background: var(--background-color) - url('data:image/svg+xml;utf8,') - no-repeat bottom / 100% auto; + position: relative; + background: var(--color-bg-primary); flex: 1; min-height: 47px; display: none; + contain: content; > img { display: block; @@ -3880,7 +3765,7 @@ a.account__display-name { .drawer__header { flex: 0 0 auto; font-size: 16px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); margin-bottom: 10px; display: flex; flex-direction: row; @@ -3890,7 +3775,7 @@ a.account__display-name { a:hover, a:focus, a:active { - color: $primary-text-color; + color: var(--color-text-primary); } } @@ -3899,6 +3784,7 @@ a.account__display-name { overflow-x: hidden; flex: 1 1 auto; -webkit-overflow-scrolling: touch; + scrollbar-width: thin; &.optionally-scrollable { overflow-y: auto; @@ -3936,9 +3822,9 @@ a.account__display-name { box-sizing: border-box; width: 100%; background: transparent; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px 4px 0 0; - color: $highlight-text-color; + color: var(--color-text-brand); cursor: pointer; flex: 0 0 auto; font-size: 16px; @@ -3964,7 +3850,7 @@ a.account__display-name { background: transparent; border: 0; font-family: inherit; - color: $highlight-text-color; + color: var(--color-text-brand); cursor: pointer; white-space: nowrap; font-size: 16px; @@ -3990,13 +3876,19 @@ a.account__display-name { border-radius: 10px; padding: 0; user-select: none; - -webkit-tap-highlight-color: color.change( - $base-overlay-background, - $alpha: 0 - ); -webkit-tap-highlight-color: transparent; } +.react-toggle--focus, +.react-toggle:focus-within { + outline: var(--outline-focus-default); + outline-offset: 2px; + + .react-toggle-track { + border-color: transparent; + } +} + .react-toggle-screenreader-only, .sr-only { border: 0; @@ -4020,15 +3912,25 @@ a.account__display-name { height: 20px; padding: 0; border-radius: 10px; - background-color: $ui-primary-color; -} + background-color: rgb(from var(--color-bg-brand-softer) r g b / 50%); + border: 1px solid rgb(from var(--color-text-brand) r g b / 50%); + box-sizing: border-box; -.react-toggle--focus { - outline: $ui-button-focus-outline; -} + .react-toggle:hover:not(.react-toggle--disabled) & { + background-color: rgb( + from var(--color-bg-brand-softer) r g b / + calc(50% + var(--overlay-strength-brand)) + ); + } -.react-toggle--checked .react-toggle-track { - background-color: $ui-highlight-color; + .react-toggle--checked & { + background-color: var(--color-bg-brand-base); + border-color: var(--color-bg-brand-base); + } + + .react-toggle--checked:not(.react-toggle--disabled):hover & { + background-color: var(--color-bg-brand-base-hover); + } } .react-toggle-track-check, @@ -4043,30 +3945,21 @@ a.account__display-name { width: 16px; height: 16px; border-radius: 50%; - background-color: $ui-button-color; + background-color: var(--color-text-on-brand-base); box-sizing: border-box; transition: all 0.25s ease; transition-property: border-color, left; -} -.react-toggle--checked .react-toggle-thumb { - inset-inline-start: 32px - 16px - 2px; - border-color: $ui-highlight-color; -} - -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background: darken($ui-primary-color, 5%); -} - -.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) - .react-toggle-track { - background: lighten($ui-highlight-color, 5%); + .react-toggle--checked & { + inset-inline-start: 32px - 16px - 2px; + border-color: var(--color-bg-brand-base); + } } .follow_requests-unlocked_explanation, .switch-to-advanced { - color: $light-text-color; - background-color: $ui-base-color; + color: var(--color-text-secondary); + background-color: var(--color-bg-secondary); padding: 15px; border-radius: 4px; margin-top: 4px; @@ -4075,7 +3968,7 @@ a.account__display-name { line-height: 18px; a { - color: $ui-button-tertiary-color; + color: var(--color-text-brand); font-weight: bold; } } @@ -4091,7 +3984,11 @@ a.account__display-name { text-decoration: none; overflow: hidden; white-space: nowrap; - color: $secondary-text-color; + color: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); background: transparent; border: 0; border-left: 4px solid transparent; @@ -4100,11 +3997,11 @@ a.account__display-name { &:hover, &:focus, &:active { - color: $primary-text-color; + color: var(--color-text-primary); } &.active { - color: $highlight-text-color; + color: var(--color-text-brand); } &:focus { @@ -4112,7 +4009,7 @@ a.account__display-name { } &:focus-visible { - border-color: $ui-button-focus-outline-color; + border-color: var(--color-text-brand); border-radius: 0; } @@ -4134,14 +4031,14 @@ a.account__display-name { font-size: 12px; line-height: 19px; font-weight: 500; - background: $ui-base-color; + background: var(--color-bg-primary); padding: 4px 8px; margin: -6px 10px; } .column-subheading { - background: var(--surface-background-color); - color: $darker-text-color; + background: var(--color-bg-secondary); + color: var(--color-text-secondary); padding: 8px 20px; font-size: 12px; font-weight: 500; @@ -4158,9 +4055,9 @@ a.account__display-name { } .getting-started { - color: $dark-text-color; + color: var(--color-text-tertiary); overflow: auto; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; &__trends { @@ -4170,14 +4067,14 @@ a.account__display-name { margin-top: 10px; h4 { - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); padding: 10px; font-size: 12px; text-transform: uppercase; font-weight: 500; a { - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; } } @@ -4187,7 +4084,7 @@ a.account__display-name { padding: 10px; &__current { - color: $darker-text-color; + color: var(--color-text-secondary); } } } @@ -4208,9 +4105,6 @@ a.account__display-name { kbd { display: inline-block; - padding: 3px 5px; - background-color: lighten($ui-base-color, 8%); - border: 1px solid darken($ui-base-color, 4%); } } @@ -4219,11 +4113,11 @@ a.account__display-name { align-items: center; position: relative; font-size: 14px; - color: $darker-text-color; + color: var(--color-text-secondary); margin-top: 14px; text-decoration: none; overflow: hidden; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 8px; contain: inline-size layout paint style; @@ -4243,7 +4137,7 @@ a.account__display-name { cursor: pointer; & > div { - background: color.change($base-shadow-color, $alpha: 0.6); + background: rgb(from var(--color-shadow-primary) r g b / 60%); border-radius: 8px; padding: 12px 9px; backdrop-filter: $backdrop-blur-filter; @@ -4256,7 +4150,7 @@ a.account__display-name { button, a { display: inline; - color: $secondary-text-color; + color: var(--color-text-primary); background: transparent; border: 0; padding: 0 8px; @@ -4267,7 +4161,7 @@ a.account__display-name { &:hover, &:active, &:focus { - color: $primary-text-color; + color: var(--color-text-primary); } } @@ -4289,7 +4183,7 @@ a.status-card { .status-card__host, .status-card__author, .status-card__description { - color: $highlight-text-color; + color: var(--color-text-brand); } } } @@ -4305,7 +4199,7 @@ a.status-card { .status-card__host, .status-card__author, .status-card__description { - color: $highlight-text-color; + color: var(--color-text-brand); } } } @@ -4335,7 +4229,7 @@ a.status-card { font-weight: 700; font-size: 19px; line-height: 24px; - color: $primary-text-color; + color: var(--color-text-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -4370,7 +4264,7 @@ a.status-card { display: block; margin-top: 8px; font-size: 14px; - color: $primary-text-color; + color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -4393,7 +4287,7 @@ a.status-card { flex: 0 0 auto; width: 120px; aspect-ratio: 1; - background: lighten($ui-base-color, 8%); + background: var(--color-bg-secondary); position: relative; & > .icon { @@ -4427,7 +4321,7 @@ a.status-card { top: 0; inset-inline-start: 0; z-index: 0; - background: $base-overlay-background; + background: var(--color-bg-primary); &--hidden { display: none; @@ -4476,7 +4370,7 @@ a.status-card { display: flex; align-items: center; justify-content: center; - color: $dark-text-color; + color: var(--color-text-primary); background-color: transparent; border: 0; font-size: inherit; @@ -4492,11 +4386,11 @@ a.status-card { &:is(button) { &:hover { - background: var(--on-surface-color); + background: var(--color-bg-secondary); } &:focus-visible { - outline: 2px solid $ui-button-focus-outline-color; + outline: 2px solid var(--color-text-brand); outline-offset: -2px; } } @@ -4508,12 +4402,12 @@ a.status-card { } .load-gap { - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); } .timeline-hint { text-align: center; - color: $dark-text-color; + color: var(--color-text-secondary); padding: 16px; box-sizing: border-box; width: 100%; @@ -4525,25 +4419,25 @@ a.status-card { } a { - color: $highlight-text-color; + color: var(--color-text-brand); text-decoration: none; &:hover, &:focus, &:active { text-decoration: underline; - color: lighten($highlight-text-color, 4%); + color: var(--color-text-brand-soft); } } &--with-descendants { - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); } } .regeneration-indicator { - color: $darker-text-color; - border: 1px solid var(--background-border-color); + color: var(--color-text-secondary); + border: 1px solid var(--color-border-primary); border-top: 0; cursor: default; display: flex; @@ -4569,7 +4463,7 @@ a.status-card { font-weight: 500; display: block; margin-bottom: 10px; - color: $darker-text-color; + color: var(--color-text-secondary); } span { @@ -4584,7 +4478,7 @@ a.status-card { z-index: 1; &.active { - box-shadow: 0 1px 0 color.change($highlight-text-color, $alpha: 0.3); + box-shadow: 0 1px 0 var(--color-bg-brand-softer); &::before { display: block; @@ -4600,8 +4494,8 @@ a.status-card { z-index: 1; background: radial-gradient( ellipse, - color.change($ui-highlight-color, $alpha: 0.23) 0%, - color.change($ui-highlight-color, $alpha: 0) 60% + rgb(from var(--color-bg-brand-base) r g b / 23%) 0%, + transparent 60% ); } } @@ -4615,7 +4509,7 @@ a.status-card { .column-header__select-row { border-width: 0 1px 1px; border-style: solid; - border-color: var(--background-border-color); + border-color: var(--color-border-primary); padding: 15px; display: flex; align-items: center; @@ -4631,12 +4525,12 @@ a.status-card { &__mode-button { margin-left: auto; - color: $highlight-text-color; + color: var(--color-text-brand); font-weight: bold; font-size: 14px; &:hover { - color: lighten($highlight-text-color, 6%); + color: var(--color-text-brand-soft); } } } @@ -4644,7 +4538,7 @@ a.status-card { .column-header { display: flex; font-size: 16px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px 4px 0 0; flex: 0 0 auto; cursor: pointer; @@ -4670,7 +4564,7 @@ a.status-card { flex: 1; &:focus-visible { - outline: $ui-button-icon-focus-outline; + outline: var(--outline-focus-default); } .logo { @@ -4684,18 +4578,18 @@ a.status-card { .column-header__back-button { flex: 1; - color: $highlight-text-color; + color: var(--color-text-brand); &.compact { flex: 0 0 auto; - color: $primary-text-color; + color: var(--color-text-primary); } } &.active { .column-header__icon { - color: $highlight-text-color; - text-shadow: 0 0 10px color.change($highlight-text-color, $alpha: 0.4); + color: var(--color-text-brand); + text-shadow: 0 0 10px var(--color-bg-brand-softer); } } @@ -4735,7 +4629,7 @@ a.status-card { justify-content: center; align-items: center; border: 0; - color: $darker-text-color; + color: var(--color-text-primary); background: transparent; cursor: pointer; font-size: 16px; @@ -4746,23 +4640,23 @@ a.status-card { } &:hover { - color: lighten($darker-text-color, 4%); + color: var(--color-text-secondary); } &:focus-visible { - outline: $ui-button-focus-outline; + outline: var(--outline-focus-default); } &.active { - color: $primary-text-color; + color: var(--color-text-brand); &:hover { - color: $primary-text-color; + color: var(--color-text-brand); } } &:disabled { - color: $dark-text-color; + color: var(--color-text-disabled); cursor: default; } } @@ -4775,16 +4669,16 @@ a.status-card { max-height: 70vh; overflow: hidden; overflow-y: auto; - color: $darker-text-color; + color: var(--color-text-secondary); transition: max-height 150ms ease-in-out, opacity 300ms linear; opacity: 1; z-index: 1; position: relative; - border-left: 1px solid var(--background-border-color); - border-right: 1px solid var(--background-border-color); - border-bottom: 1px solid var(--background-border-color); + border-left: 1px solid var(--color-border-primary); + border-right: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--color-border-primary); @media screen and (max-width: $no-gap-breakpoint) { border-left: 0; @@ -4805,7 +4699,7 @@ a.status-card { height: 0; background: transparent; border: 0; - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); margin: 10px 0; } } @@ -4817,7 +4711,7 @@ a.status-card { .column-header__setting-btn { &:hover, &:focus { - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: underline; } } @@ -4858,16 +4752,15 @@ a.status-card { } .column-header__issue-btn { - color: $warning-red; + color: var(--color-text-error); &:hover { - color: $error-red; text-decoration: underline; } } .loading-indicator { - color: $dark-text-color; + color: var(--color-text-secondary); font-size: 12px; font-weight: 400; text-transform: uppercase; @@ -4901,18 +4794,18 @@ a.status-card { } .icon-button .loading-indicator .circular-progress { - color: lighten($ui-base-color, 26%); + color: var(--color-text-tertiary); width: 12px; height: 12px; margin: 6px; } .load-more .loading-indicator .circular-progress { - color: lighten($ui-base-color, 26%); + color: var(--color-text-tertiary); } .circular-progress { - color: lighten($ui-base-color, 26%); + color: var(--color-text-tertiary); animation: 1.4s linear 0s infinite normal none running simple-rotate; circle { @@ -4996,8 +4889,8 @@ a.status-card { .video-error-cover { align-items: center; - background: $base-overlay-background; - color: $primary-text-color; + background: var(--color-bg-primary); + color: var(--color-text-primary); cursor: pointer; display: flex; flex-direction: column; @@ -5035,12 +4928,12 @@ a.status-card { padding: 0; margin: 0; border: 0; - color: $white; + color: var(--color-text-on-media); line-height: 20px; font-size: 14px; &__label { - background-color: color.change($black, $alpha: 0.45); + background-color: var(--color-bg-media); backdrop-filter: $backdrop-blur-filter; border-radius: 8px; padding: 12px 16px; @@ -5060,19 +4953,15 @@ a.status-card { &:hover, &:focus { .spoiler-button__overlay__label { - background-color: color.change($black, $alpha: 0.9); + background-color: rgb(from var(--color-bg-media-base) r g b / 90%); } } } } -.modal-container--preloader { - background: lighten($ui-base-color, 8%); -} - .account--panel { - border-top: 1px solid var(--background-border-color); - border-bottom: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--color-border-primary); display: flex; flex-direction: row; padding: 10px 0; @@ -5090,7 +4979,7 @@ a.status-card { &__section { // FIXME: Legacy - color: $darker-text-color; + color: var(--color-text-secondary); cursor: default; display: block; font-weight: 500; @@ -5102,7 +4991,7 @@ a.status-card { section { padding: 16px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &:last-child { border-bottom: 0; @@ -5114,7 +5003,7 @@ a.status-card { line-height: 24px; letter-spacing: 0.5px; font-weight: 500; - color: $primary-text-color; + color: var(--color-text-primary); margin-bottom: 16px; } @@ -5143,7 +5032,11 @@ a.status-card { @include search-input; &::placeholder { - color: lighten($darker-text-color, 4%); + color: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); } &::-moz-focus-inner { @@ -5157,7 +5050,7 @@ a.status-card { } &:focus { - background: lighten($ui-base-color, 4%); + background: var(--color-bg-secondary); } @media screen and (width <= 600px) { @@ -5166,7 +5059,7 @@ a.status-card { } &__placeholder { - color: $dark-text-color; + color: var(--color-text-tertiary); padding-inline-start: 2px; font-size: 12px; } @@ -5176,7 +5069,7 @@ a.status-card { } &__multi-value { - background: lighten($ui-base-color, 8%); + background: var(--color-bg-secondary); &__remove { cursor: pointer; @@ -5184,8 +5077,12 @@ a.status-card { &:hover, &:active, &:focus { - background: lighten($ui-base-color, 12%); - color: lighten($darker-text-color, 4%); + background: var(--color-bg-brand-softer); + color: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); } } } @@ -5193,31 +5090,31 @@ a.status-card { &__multi-value__label, &__input, &__input-container { - color: $darker-text-color; + color: var(--color-text-secondary); } &__clear-indicator, &__dropdown-indicator { cursor: pointer; transition: none; - color: $dark-text-color; + color: var(--color-text-tertiary); &:hover, &:active, &:focus { - color: lighten($dark-text-color, 4%); + color: var(--color-text-secondary); } } &__indicator-separator { - background-color: lighten($ui-base-color, 8%); + background-color: var(--color-border-primary); } &__menu { @include search-popout; padding: 0; - background: $ui-secondary-color; + background: var(--color-bg-elevated); } &__menu-list { @@ -5225,13 +5122,14 @@ a.status-card { } &__option { - color: $inverted-text-color; + color: var(--color-text-primary); border-radius: 4px; font-size: 14px; &--is-focused, &--is-selected { - background: darken($ui-secondary-color, 10%); + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); } } } @@ -5250,12 +5148,12 @@ a.status-card { } .setting-toggle__label { - color: $darker-text-color; + color: var(--color-text-secondary); } .limited-account-hint { p { - color: $secondary-text-color; + color: var(--color-text-primary); font-size: 15px; font-weight: 500; margin-bottom: 20px; @@ -5263,7 +5161,7 @@ a.status-card { } .empty-column-indicator { - color: $dark-text-color; + color: var(--color-text-secondary); text-align: center; padding: 20px; font-size: 14px; @@ -5280,7 +5178,7 @@ a.status-card { } a { - color: $highlight-text-color; + color: var(--color-text-brand); text-decoration: none; &:hover { @@ -5307,7 +5205,7 @@ a.status-card { .error-column { padding: 20px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px; display: flex; flex: 1 1 auto; @@ -5324,7 +5222,7 @@ a.status-card { &__message { text-align: center; - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 15px; line-height: 22px; @@ -5333,7 +5231,7 @@ a.status-card { line-height: 33px; font-weight: 700; margin-bottom: 15px; - color: $primary-text-color; + color: var(--color-text-primary); } p { @@ -5386,9 +5284,9 @@ a.status-card { position: relative; margin-top: 5px; z-index: 2; - background: var(--dropdown-background-color); + background: var(--color-bg-elevated); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--dropdown-border-color); + border: 1px solid var(--color-border-primary); box-shadow: var(--dropdown-shadow); border-radius: 5px; @@ -5413,8 +5311,8 @@ a.status-card { z-index: 4; top: -5px; inset-inline-start: -9px; - background: var(--dropdown-background-color); - border: 1px solid var(--dropdown-border-color); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border-primary); border-radius: 4px; box-shadow: var(--dropdown-shadow); overflow: hidden; @@ -5429,7 +5327,7 @@ a.status-card { &:hover, &:focus, &:active { - background: var(--dropdown-border-color); + background: var(--color-border-primary); } } @@ -5446,7 +5344,7 @@ a.status-card { .upload-area { align-items: center; - background: color.change($base-overlay-background, $alpha: 0.8); + background: rgb(from var(--color-bg-overlay) r g b / 80%); display: flex; height: 100vh; justify-content: center; @@ -5480,8 +5378,8 @@ a.status-card { inset-inline-start: 0; z-index: -1; border-radius: 4px; - background: $ui-base-color; - box-shadow: 0 0 5px color.change($base-shadow-color, $alpha: 0.2); + background: var(--color-bg-elevated); + box-shadow: 0 0 5px var(--color-shadow-primary); } .upload-area__content { @@ -5490,15 +5388,15 @@ a.status-card { align-items: center; justify-content: center; text-align: center; - color: $secondary-text-color; + color: var(--color-text-primary); font-size: 18px; font-weight: 500; - border: 2px dashed $ui-base-lighter-color; + border: 2px dashed var(--color-border-primary); border-radius: 4px; } .upload-progress { - color: $darker-text-color; + color: var(--color-text-secondary); overflow: hidden; display: flex; gap: 8px; @@ -5508,7 +5406,7 @@ a.status-card { .icon { width: 24px; height: 24px; - color: $ui-highlight-color; + color: var(--color-text-brand); } span { @@ -5527,7 +5425,7 @@ a.status-card { width: 100%; height: 6px; border-radius: 6px; - background: var(--background-color); + background: var(--color-bg-primary); position: relative; margin-top: 5px; } @@ -5537,7 +5435,7 @@ a.status-card { inset-inline-start: 0; top: 0; height: 6px; - background: $ui-highlight-color; + background: var(--color-text-brand); border-radius: 6px; } @@ -5571,7 +5469,7 @@ a.status-card { &:focus-visible { img { - outline: $ui-button-icon-focus-outline; + outline: var(--outline-focus-default); } } } @@ -5585,9 +5483,8 @@ a.status-card { .language-dropdown__dropdown, .visibility-dropdown__dropdown { box-shadow: var(--dropdown-shadow); - background: var(--dropdown-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--dropdown-border-color); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border-primary); padding: 4px; border-radius: 4px; overflow: hidden; @@ -5613,8 +5510,6 @@ a.status-card { .privacy-dropdown__option, .visibility-dropdown__option { - --dropdown-text-color: $primary-text-color; - font-size: 14px; line-height: 20px; letter-spacing: 0.25px; @@ -5624,7 +5519,7 @@ a.status-card { align-items: center; gap: 12px; border-radius: 4px; - color: var(--dropdown-text-color); + color: var(--color-text-primary); // Make sure adjacent hover/active states don't have a meeting radius. &:hover + &:is(:focus, .active), @@ -5643,13 +5538,13 @@ a.status-card { &:hover, &:active { - background: var(--dropdown-border-color); + background: var(--color-bg-secondary); } &:focus, &.active { - background: $ui-highlight-color; - color: var(--dropdown-text-color); + background: var(--color-bg-brand-base); + color: var(--color-text-on-brand-base); outline: 0; .privacy-dropdown__option__content, @@ -5658,7 +5553,7 @@ a.status-card { .visibility-dropdown__option__content, .visibility-dropdown__option__content strong, .visibility-dropdown__option__additional { - color: var(--dropdown-text-color); + color: var(--color-text-on-brand-base); } } @@ -5666,7 +5561,7 @@ a.status-card { display: flex; align-items: center; justify-content: center; - color: $darker-text-color; + color: var(--color-text-secondary); cursor: help; } } @@ -5681,10 +5576,10 @@ a.status-card { .privacy-dropdown__option__content, .visibility-dropdown__option__content { flex: 1 1 auto; - color: $darker-text-color; + color: var(--color-text-secondary); strong { - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 500; display: block; @@ -5703,13 +5598,13 @@ a.status-card { .emoji-mart-search { padding: 10px; - background: var(--dropdown-background-color); + background: var(--color-bg-elevated); input { padding: 8px 12px; - background: $ui-base-color; - border: 1px solid var(--background-border-color); - color: $darker-text-color; + background: var(--color-bg-primary); + border: 1px solid var(--color-border-primary); + color: var(--color-text-secondary); @media screen and (width <= 600px) { font-size: 16px; @@ -5722,7 +5617,7 @@ a.status-card { .emoji-mart-search-icon { inset-inline-end: 15px; opacity: 1; - color: $darker-text-color; + color: var(--color-text-primary); .icon { width: 18px; @@ -5730,13 +5625,13 @@ a.status-card { } &:disabled { - opacity: 0.38; + color: var(--color-text-secondary); } } .emoji-mart-scroll { padding: 0 10px 10px; - background: var(--dropdown-background-color); + background: var(--color-bg-elevated); } &__results { @@ -5745,7 +5640,7 @@ a.status-card { align-items: center; gap: 0.5em; cursor: pointer; - color: $primary-text-color; + color: var(--color-text-primary); font-size: 14px; line-height: 20px; letter-spacing: 0.25px; @@ -5757,23 +5652,23 @@ a.status-card { text-overflow: ellipsis; &__common-name { - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 400; } &:active, &:hover { - background: var(--dropdown-border-color); + background: var(--color-bg-secondary); } &:focus, &.active { - background: $ui-highlight-color; - color: $primary-text-color; + background: var(--color-bg-brand-base); + color: var(--color-text-on-brand-base); outline: 0; .language-dropdown__dropdown__results__item__common-name { - color: $primary-text-color; + color: var(--color-text-on-brand-base); } } } @@ -5783,28 +5678,18 @@ a.status-card { .visibility-modal { &__quote-warning { - color: var(--nested-card-text); - background: - /* This is a bit of a silly hack for layering two background colours - * since --nested-card-background is too transparent for a tooltip */ - linear-gradient( - var(--nested-card-background), - var(--nested-card-background) - ), - linear-gradient(var(--background-color), var(--background-color)); - border: var(--nested-card-border); + color: var(--color-text-primary); + background: var(--color-bg-warning-softer); padding: 16px; border-radius: 4px; h3 { font-weight: 500; margin-bottom: 4px; - color: $darker-text-color; } p { font-size: 0.8em; - color: $dark-text-color; } } } @@ -5828,9 +5713,9 @@ a.status-card { &__button { display: flex; align-items: center; - color: $primary-text-color; - background: var(--input-background-color); - border: 1px solid var(--background-border-color); + color: var(--color-text-primary); + background: var(--color-bg-secondary-solid); + border: 1px solid var(--color-border-primary); padding: 8px 12px; width: 100%; text-align: left; @@ -5853,7 +5738,7 @@ a.status-card { &__helper { margin-top: 4px; font-size: 0.8em; - color: $dark-text-color; + color: var(--color-text-tertiary); } } @@ -5872,8 +5757,8 @@ a.status-card { inset-inline-start: 0; margin-top: -2px; width: 100%; - background: var(--input-background-color); - border: 1px solid var(--background-border-color); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border-primary); border-radius: 0 0 4px 4px; box-shadow: var(--dropdown-shadow); z-index: 99; @@ -5882,7 +5767,7 @@ a.status-card { h4 { text-transform: uppercase; - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 500; padding: 0 10px; margin-bottom: 10px; @@ -5890,7 +5775,7 @@ a.status-card { .icon-button { padding: 0; - color: $darker-text-color; + color: var(--color-text-secondary); } .icon { @@ -5906,7 +5791,7 @@ a.status-card { } &__message { - color: $darker-text-color; + color: var(--color-text-secondary); padding: 0 10px; } @@ -5917,7 +5802,7 @@ a.status-card { border: 0; font: inherit; background: transparent; - color: $darker-text-color; + color: var(--color-text-secondary); padding: 10px; cursor: pointer; border-radius: 4px; @@ -5939,18 +5824,18 @@ a.status-card { &:focus, &:active, &.selected { - background: $ui-highlight-color; - color: $primary-text-color; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); .icon-button { - color: $primary-text-color; + color: inherit; } } mark { background: transparent; font-weight: 700; - color: $primary-text-color; + color: var(--color-text-primary); } span { @@ -6013,7 +5898,7 @@ a.status-card { grid-area: 1 / 1; transition: all 100ms linear; transition-property: transform, opacity; - color: $darker-text-color; + color: var(--color-text-secondary); } .search__icon.icon-search { @@ -6042,7 +5927,7 @@ a.status-card { } &:focus-visible { - box-shadow: 0 0 0 2px $ui-button-focus-outline-color; + box-shadow: 0 0 0 2px var(--color-text-brand); } &[aria-hidden='true'] { @@ -6053,19 +5938,19 @@ a.status-card { } .search-results__section { - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &:last-child { border-bottom: 0; } &__header { - border-bottom: 1px solid var(--background-border-color); - background: var(--surface-background-color); + border-bottom: 1px solid var(--color-border-primary); + background: var(--color-bg-tertiary); padding: 15px; font-weight: 500; font-size: 14px; - color: $darker-text-color; + color: var(--color-text-secondary); display: flex; justify-content: space-between; @@ -6076,7 +5961,7 @@ a.status-card { } button { - color: $highlight-text-color; + color: var(--color-text-brand); padding: 0; border: 0; background: 0; @@ -6098,7 +5983,7 @@ a.status-card { .search-results__info { padding: 20px; - color: $darker-text-color; + color: var(--color-text-secondary); text-align: center; } @@ -6114,7 +5999,7 @@ a.status-card { inset-inline-end: 0; bottom: 0; opacity: 0.9; - background: $base-overlay-background; + background: var(--color-bg-overlay); transition: background 0.5s; } @@ -6174,7 +6059,14 @@ a.status-card { align-items: center; .icon-button { - color: color.change($white, $alpha: 0.7); + --default-icon-color: var(--color-text-on-media); + --default-bg-color: transparent; + --hover-icon-color: var(--color-text-on-media); + --hover-bg-color: rgb( + from var(--color-text-on-media) r g b / + var(--overlay-strength-secondary) + ); + padding: 8px; .icon { @@ -6182,17 +6074,6 @@ a.status-card { height: 24px; filter: var(--overlay-icon-shadow); } - - &:hover, - &:focus, - &:active { - color: $white; - background-color: color.change($white, $alpha: 0.15); - } - - &:focus { - background-color: color.change($white, $alpha: 0.3); - } } } } @@ -6242,23 +6123,30 @@ a.status-card { background: transparent; box-sizing: border-box; border: 0; - color: color.change($white, $alpha: 0.7); + color: var(--color-text-on-media); cursor: pointer; display: flex; align-items: center; font-size: 24px; height: 20vmax; margin: auto 0; - padding: 30px 15px; + padding: 30px 5px; position: absolute; top: 0; bottom: 0; transform: scaleX(var(--text-x-direction)); - &:hover, - &:focus, - &:active { - color: $white; + .icon { + border-radius: 5px; + padding: 10px; + } + + &:hover .icon, + &:focus .icon, + &:active .icon { + background: rgb( + from var(--color-text-on-media) r g b / var(--overlay-strength-secondary) + ); } } @@ -6286,54 +6174,36 @@ a.status-card { padding: 16px; .icon-button { - color: $white; + --default-icon-color: var(--color-text-on-media); + --default-bg-color: transparent; + --hover-icon-color: var(--color-text-on-media); + --hover-bg-color: rgb( + from var(--color-text-on-media) r g b / var(--overlay-strength-brand) + ); .icon { filter: var(--overlay-icon-shadow); } - &:hover, - &:focus, - &:active { - color: $white; - background-color: color.change($white, $alpha: 0.15); - } - - &:focus { - background-color: color.change($white, $alpha: 0.3); - } - &.active { - color: $highlight-text-color; - - &:hover, - &:focus, - &:active { - background: color.change($highlight-text-color, $alpha: 0.15); - } - - &:focus { - background: color.change($highlight-text-color, $alpha: 0.3); - } + --default-icon-color: var(--color-text-brand); + --hover-icon-color: var(--color-text-brand); + --hover-bg-color: var(--color-bg-brand-soft); } &.star-icon.active { - color: $gold-star; - - &:hover, - &:focus, - &:active { - background: color.change($gold-star, $alpha: 0.15); - } - - &:focus { - background: color.change($gold-star, $alpha: 0.3); - } + --default-icon-color: var(--color-text-favourite-highlight); + --hover-icon-color: var(--color-text-favourite-highlight); + --hover-bg-color: rgb( + from var(--color-text-favourite-highlight) r g b / + var(--overlay-strength-brand) + ); } &.disabled { - color: $white; - background-color: transparent; + --default-icon-color: var(--color-text-on-media); + --default-bg-color: transparent; + cursor: default; opacity: 0.4; } @@ -6349,9 +6219,8 @@ a.status-card { .media-modal__page-dot { flex: 0 0 auto; - background-color: $white; + background-color: rgb(from var(--color-text-on-media) r g b / 40%); filter: var(--overlay-icon-shadow); - opacity: 0.4; height: 6px; width: 6px; border-radius: 50%; @@ -6359,15 +6228,16 @@ a.status-card { padding: 0; border: 0; font-size: 0; - transition: opacity 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; &.active { - opacity: 1; + background-color: var(--color-text-on-media); } &:focus { - outline: 0; - background-color: $highlight-text-color; + opacity: 1; + outline: 2px solid var(--color-text-on-media); + outline-offset: 2px; } } @@ -6375,9 +6245,9 @@ a.status-card { width: 588px; min-height: 478px; flex-direction: column; - background: var(--modal-background-color); + background: var(--color-bg-primary); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); + border: 1px solid var(--color-border-primary); border-radius: 16px; &__error { @@ -6419,9 +6289,9 @@ a.status-card { gap: 8px; padding: 24px; flex-direction: column; - background: var(--modal-background-color); + background: var(--color-bg-primary); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); + border: 1px solid var(--color-border-primary); } &__top { @@ -6447,12 +6317,12 @@ a.status-card { align-items: center; font-size: 14px; line-height: 20px; - color: $darker-text-color; + color: var(--color-text-secondary); &__icon { border-radius: 64px; - background: $ui-highlight-color; - color: $white; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); display: flex; align-items: center; justify-content: center; @@ -6469,19 +6339,19 @@ a.status-card { h1 { font-size: 22px; line-height: 28px; - color: $primary-text-color; + color: var(--color-text-primary); } } &__confirmation { font-size: 14px; line-height: 20px; - color: $darker-text-color; + color: var(--color-text-secondary); h1 { font-size: 16px; line-height: 24px; - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 500; &:not(:only-child) { @@ -6491,12 +6361,12 @@ a.status-card { strong { font-weight: 700; - color: $primary-text-color; + color: var(--color-text-primary); } } &__status { - border: 1px solid var(--modal-border-color); + border: 1px solid var(--color-border-primary); border-radius: 8px; padding: 8px; cursor: pointer; @@ -6506,7 +6376,7 @@ a.status-card { align-items: center; gap: 4px; margin-bottom: 8px; - color: $dark-text-color; + color: var(--color-text-tertiary); bdi { color: inherit; @@ -6517,7 +6387,7 @@ a.status-card { display: -webkit-box; font-size: 15px; line-height: 22px; - color: $dark-text-color; + color: var(--color-text-tertiary); line-clamp: 4; -webkit-line-clamp: 4; -webkit-box-orient: vertical; @@ -6534,7 +6404,7 @@ a.status-card { margin-top: 0; font-size: 15px; line-height: 22px; - color: $dark-text-color; + color: var(--color-text-tertiary); } } @@ -6556,7 +6426,7 @@ a.status-card { } &--deemphasized { - color: $secondary-text-color; + color: var(--color-text-primary); } &__icon { @@ -6608,7 +6478,7 @@ a.status-card { } &.active { - background: var(--modal-background-variant-color); + background: var(--color-bg-secondary); padding-top: 24px; .safety-action-modal__bottom__collapsible { @@ -6626,7 +6496,7 @@ a.status-card { &__hint { font-size: 14px; line-height: 20px; - color: $dark-text-color; + color: var(--color-text-tertiary); } .link-button { @@ -6640,14 +6510,14 @@ a.status-card { width: 588px; max-height: 80vh; flex-direction: column; - background: var(--modal-background-color); + background: var(--color-bg-elevated); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); + border: 1px solid var(--color-border-primary); border-radius: 16px; &__header { box-sizing: border-box; - border-bottom: 1px solid var(--modal-border-color); + border-bottom: 1px solid var(--color-border-primary); display: flex; align-items: center; justify-content: space-between; @@ -6671,7 +6541,7 @@ a.status-card { &__description { margin: 24px 24px 0; - color: $darker-text-color; + color: var(--color-text-secondary); a { color: inherit; @@ -6692,7 +6562,7 @@ a.status-card { align-items: center; justify-content: center; padding: 24px; - background: #000; + background: var(--color-bg-media-base); img { display: block; @@ -6700,7 +6570,7 @@ a.status-card { img, .gifv video { - outline: 1px solid var(--media-outline-color); + outline: 1px solid var(--color-border-media); outline-offset: -1px; border-radius: 8px; } @@ -6724,9 +6594,9 @@ a.status-card { } &__popout { - background: var(--dropdown-background-color); + background: var(--color-bg-elevated); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--dropdown-border-color); + border: 1px solid var(--color-border-primary); box-shadow: var(--dropdown-shadow); max-width: 320px; padding: 16px; @@ -6734,7 +6604,7 @@ a.status-card { z-index: 9999 !important; font-size: 14px; line-height: 20px; - color: $darker-text-color; + color: var(--color-text-secondary); } .copy-paste-text { @@ -6746,22 +6616,16 @@ a.status-card { display: inline-flex; align-items: center; gap: 4px; - - kbd { - padding: 3px 5px; - border: 1px solid var(--background-border-color); - border-radius: 4px; - } } .boost-modal, .report-modal, .actions-modal, .compare-history-modal { - background: var(--background-color); - color: $primary-text-color; + background: var(--color-bg-primary); + color: var(--color-text-primary); border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); overflow: hidden; max-width: 90vw; width: 480px; @@ -6785,43 +6649,20 @@ a.status-card { } } -.boost-modal__action-bar { - display: flex; - justify-content: space-between; - align-items: center; - background: $ui-secondary-color; - padding: 15px; - - & > div { - flex: 1 1 auto; - text-align: end; - color: $lighter-text-color; - padding-inline-end: 10px; - } - - .icon { - vertical-align: middle; - } - - .button { - flex: 0 0 auto; - } -} - .report-modal { width: 90vw; max-width: 700px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); } .report-dialog-modal { max-width: 90vw; width: 480px; height: 80vh; - background: var(--background-color); - color: $primary-text-color; + background: var(--color-bg-primary); + color: var(--color-text-primary); border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); overflow: hidden; position: relative; flex-direction: column; @@ -6829,7 +6670,7 @@ a.status-card { &__container { box-sizing: border-box; - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); padding: 20px; flex-grow: 1; display: flex; @@ -6859,12 +6700,12 @@ a.status-card { &__lead { font-size: 17px; line-height: 22px; - color: $secondary-text-color; + color: var(--color-text-primary); margin-bottom: 30px; a { text-decoration: none; - color: $highlight-text-color; + color: var(--color-text-brand); font-weight: 500; &:hover { @@ -6889,12 +6730,12 @@ a.status-card { } .status__content a { - color: $highlight-text-color; + color: var(--color-text-brand); } .status__content, .status__content p { - color: $primary-text-color; + color: var(--color-text-primary); } .dialog-option { @@ -6903,8 +6744,7 @@ a.status-card { } .dialog-option .poll__input { - border-color: $darker-text-color; - color: $ui-secondary-color; + color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; @@ -6917,20 +6757,21 @@ a.status-card { &:active, &:focus, &:hover { - border-color: $valid-value-color; + border-color: var(--color-text-success); border-width: 4px; } &.active { - border-color: $valid-value-color; - background: $valid-value-color; + color: var(--color-text-on-success-base); + background: var(--color-bg-success-base); + border-color: var(--color-bg-success-base); } } .poll__option.dialog-option { padding: 15px 0; flex: 0 0 auto; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &:last-child { border-bottom: 0; @@ -6938,13 +6779,13 @@ a.status-card { & > .poll__option__text { font-size: 13px; - color: $secondary-text-color; + color: var(--color-text-primary); strong { font-size: 17px; font-weight: 500; line-height: 22px; - color: $primary-text-color; + color: var(--color-text-primary); display: block; margin-bottom: 4px; @@ -6963,15 +6804,15 @@ a.status-card { display: block; box-sizing: border-box; width: 100%; - color: $primary-text-color; - background: $ui-base-color; + color: var(--color-text-primary); + background: var(--color-bg-secondary); padding: 10px; font-family: inherit; font-size: 17px; line-height: 22px; resize: vertical; border: 0; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); outline: 0; border-radius: 4px; margin: 20px 0; @@ -6996,16 +6837,16 @@ a.status-card { } .button.button-secondary { - border-color: $ui-button-destructive-background-color; - color: $ui-button-destructive-background-color; + border-color: var(--color-text-error); + color: var(--color-text-error); flex: 0 0 auto; &:hover, &:focus, &:active { - background: $ui-button-destructive-background-color; - border-color: $ui-button-destructive-background-color; - color: $white; + color: var(--color-text-on-error-base); + background: var(--color-bg-error-base); + border-color: var(--color-bg-error-base); } } @@ -7024,55 +6865,6 @@ a.status-card { } } -.report-modal__container { - display: flex; - border-top: 1px solid var(--background-border-color); - - @media screen and (width <= 480px) { - flex-wrap: wrap; - overflow-y: auto; - } -} - -.report-modal__statuses, -.report-modal__comment { - box-sizing: border-box; - width: 50%; - min-width: 50%; - - @media screen and (width <= 480px) { - width: 100%; - } -} - -.report-modal__statuses, -.focal-point-modal__content { - flex: 1 1 auto; - min-height: 20vh; - max-height: 80vh; - overflow-y: auto; - overflow-x: hidden; - - .status__content a { - color: $highlight-text-color; - } - - .status__content, - .status__content p { - color: $inverted-text-color; - } - - @media screen and (width <= 480px) { - max-height: 10vh; - } -} - -.focal-point-modal__content { - @media screen and (width <= 480px) { - max-height: 40vh; - } -} - .setting-divider { background: transparent; border: 0; @@ -7084,9 +6876,9 @@ a.status-card { .actions-modal { border-radius: 8px 8px 0 0; - background: var(--dropdown-background-color); + background: var(--color-bg-elevated); backdrop-filter: $backdrop-blur-filter; - border-color: var(--dropdown-border-color); + border-color: var(--color-border-primary); box-shadow: var(--dropdown-shadow); max-height: 80vh; max-width: 80vw; @@ -7113,7 +6905,7 @@ a.status-card { &:hover, &:active, &:focus { - background: var(--dropdown-border-color); + background: var(--color-bg-brand-softer); } } } @@ -7149,7 +6941,7 @@ a.status-card { .compare-history-modal { .report-modal__target { - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); } &__container { @@ -7159,7 +6951,7 @@ a.status-card { } .status__content { - color: $secondary-text-color; + color: var(--color-text-primary); font-size: 19px; line-height: 24px; @@ -7170,13 +6962,13 @@ a.status-card { } a { - color: $highlight-text-color; + color: var(--color-text-brand); } hr { height: 0.25rem; padding: 0; - background-color: $ui-secondary-color; + background-color: var(--color-text-primary); border: 0; margin: 20px 0; } @@ -7190,7 +6982,7 @@ a.status-card { } .loading-bar { - background-color: $highlight-text-color; + background-color: var(--color-bg-brand-base); height: 3px; position: fixed; top: 0; @@ -7208,10 +7000,10 @@ a.status-card { &__pill { display: block; - color: $white; - border: 0; - background: color.change($black, $alpha: 0.65); + color: var(--color-text-on-media); + background: var(--color-bg-media); backdrop-filter: $backdrop-blur-filter; + border: 0; padding: 3px 12px; border-radius: 99px; font-size: 14px; @@ -7233,10 +7025,10 @@ a.status-card { .relationship-tag { display: block; text-align: center; - color: $white; - border: 0; - background: color.change($black, $alpha: 0.65); + color: var(--color-text-on-media); + background: var(--color-bg-media); backdrop-filter: $backdrop-blur-filter; + border: 0; padding: 3px 8px; border-radius: 4px; font-size: 12px; @@ -7257,8 +7049,8 @@ a.status-card { } .info-tooltip { - color: $white; - background: color.change($black, $alpha: 0.65); + color: var(--color-text-on-media); + background: var(--color-bg-media); backdrop-filter: $backdrop-blur-filter; border-radius: 4px; box-shadow: var(--dropdown-shadow); @@ -7268,18 +7060,12 @@ a.status-card { max-width: 22em; max-height: 30em; overflow-y: auto; + z-index: 10; &--solid { - color: var(--nested-card-text); - background: - /* This is a bit of a silly hack for layering two background colours - * since --nested-card-background is too transparent for a tooltip */ - linear-gradient( - var(--nested-card-background), - var(--nested-card-background) - ), - linear-gradient(var(--background-color), var(--background-color)); - border: var(--nested-card-border); + color: var(--color-text-primary); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border-primary); } h4 { @@ -7304,17 +7090,17 @@ a.status-card { .attachment-list { display: flex; font-size: 14px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px; margin-top: 16px; overflow: hidden; &__icon { flex: 0 0 auto; - color: $dark-text-color; + color: var(--color-text-tertiary); padding: 8px 18px; cursor: default; - border-inline-end: 1px solid var(--background-border-color); + border-inline-end: 1px solid var(--color-border-primary); display: flex; flex-direction: column; align-items: center; @@ -7337,7 +7123,7 @@ a.status-card { a { text-decoration: none; - color: $dark-text-color; + color: var(--color-text-tertiary); font-weight: 500; &:hover { @@ -7355,7 +7141,7 @@ a.status-card { } .icon { - color: $dark-text-color; + color: var(--color-text-tertiary); vertical-align: middle; } } @@ -7452,7 +7238,7 @@ a.status-card { position: relative; border-radius: 8px; overflow: hidden; - outline: 1px solid var(--media-outline-color); + outline: 1px solid var(--color-border-media); outline-offset: -1px; z-index: 1; @@ -7488,8 +7274,8 @@ a.status-card { } .icon { - color: $white; - filter: var(--overlay-icon-shadow); + color: var(--color-text-on-media); + filter: drop-shadow(0 0 6px var(--color-bg-media-base)); } } @@ -7502,7 +7288,7 @@ a.status-card { cursor: pointer; display: block; text-decoration: none; - color: $secondary-text-color; + color: var(--color-text-primary); position: relative; z-index: -1; @@ -7525,7 +7311,7 @@ a.status-card { top: 0; inset-inline-start: 0; z-index: -2; - background: $base-overlay-background; + background: var(--color-bg-overlay); &--hidden { display: none; @@ -7562,6 +7348,12 @@ a.status-card { } .audio-player { + /* These are only fallback values, the AudioPlayer component inserts + * the real colours dynamically as inline styles */ + --player-foreground-color: var(--color-text-on-media); + --player-background-color: var(--color-bg-media-base); + --player-accent-color: var(--color-text-brand); + box-sizing: border-box; container: audio-player / inline-size; position: relative; @@ -7571,9 +7363,9 @@ a.status-card { width: 100%; aspect-ratio: 16 / 9; color: var(--player-foreground-color); - background: var(--player-background-color, var(--background-color)); + background: var(--player-background-color); border-radius: 8px; - outline: 1px solid var(--media-outline-color); + outline: 1px solid var(--color-border-media); outline-offset: -1px; &__controls { @@ -7706,13 +7498,13 @@ a.status-card { .video-player { overflow: hidden; position: relative; - background: $base-shadow-color; + color: var(--color-text-on-media); + background: var(--color-bg-media); max-height: 460px; border-radius: 8px; box-sizing: border-box; - color: $white; display: flex; - outline: 1px solid var(--media-outline-color); + outline: 1px solid var(--color-border-media); outline-offset: -1px; z-index: 2; @@ -7746,8 +7538,8 @@ a.status-card { box-sizing: border-box; background: linear-gradient( 0deg, - color.change($base-shadow-color, $alpha: 0.85) 0, - color.change($base-shadow-color, $alpha: 0.45) 60%, + rgb(from var(--color-bg-media-base) r g b / 85%) 0, + rgb(from var(--color-bg-media-base) r g b / 45%) 60%, transparent ); padding: 0 15px; @@ -7787,8 +7579,8 @@ a.status-card { height: 100%; z-index: 4; border: 0; - background: $base-overlay-background; - color: $darker-text-color; + background: var(--color-bg-primary); + color: var(--color-text-secondary); transition: none; pointer-events: none; @@ -7799,7 +7591,11 @@ a.status-card { &:hover, &:active, &:focus { - color: lighten($darker-text-color, 7%); + color: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); } } @@ -7843,13 +7639,13 @@ a.status-card { flex: 0 0 auto; background: transparent; border: 0; - color: color.change($white, $alpha: 0.75); + color: rgb(from var(--color-text-on-media) r g b / 75%); font-weight: 500; &:active, &:hover, &:focus { - color: $white; + color: var(--color-text-on-media); } } } @@ -7868,24 +7664,16 @@ a.status-card { &__time-sep, &__time-total, &__time-current { + color: var(--color-text-on-media); font-size: 14px; font-weight: 500; } - &__time-current { - color: $white; - } - &__time-sep { display: inline-block; margin: 0 6px; } - &__time-sep, - &__time-total { - color: $white; - } - &__volume { flex: 0 0 auto; display: inline-flex; @@ -7907,7 +7695,7 @@ a.status-card { &::before { content: ''; width: 50px; - background: color.change($white, $alpha: 0.35); + background: rgb(from var(--color-text-on-media) r g b / 35%); border-radius: 4px; display: block; position: absolute; @@ -7925,7 +7713,7 @@ a.status-card { inset-inline-start: 0; top: 50%; transform: translate(0, -50%); - background: $white; + background: var(--color-text-on-media); } &__handle { @@ -7938,8 +7726,8 @@ a.status-card { inset-inline-start: 0; margin-inline-start: -6px; transform: translate(0, -50%); - background: $white; - box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2); + background: var(--color-text-on-media); + box-shadow: 1px 2px 6px var(--color-shadow-primary); opacity: 0; .no-reduce-motion & { @@ -7959,7 +7747,7 @@ a.status-card { text-decoration: none; font-size: 14px; font-weight: 500; - color: $white; + color: var(--color-text-on-media); &:hover, &:active, @@ -7977,7 +7765,7 @@ a.status-card { &::before { content: ''; width: 100%; - background: color.change($white, $alpha: 0.35); + background: rgb(from var(--color-text-on-media) r g b / 35%); border-radius: 4px; display: block; position: absolute; @@ -7992,11 +7780,11 @@ a.status-card { height: 4px; border-radius: 4px; top: 14px; - background: $white; + background: var(--color-text-on-media); } &__buffer { - background: color.change($white, $alpha: 0.2); + background: rgb(from var(--color-text-on-media) r g b / 20%); } &__handle { @@ -8008,8 +7796,8 @@ a.status-card { height: 12px; top: 10px; margin-inline-start: -6px; - background: $white; - box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2); + background: var(--color-text-on-media); + box-shadow: 1px 2px 6px var(--color-shadow-primary); .no-reduce-motion & { transition: opacity 0.1s ease; @@ -8033,9 +7821,9 @@ a.status-card { top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); - background: color.change($base-shadow-color, $alpha: 0.45); + color: var(--color-text-on-media); + background: var(--color-bg-media); backdrop-filter: $backdrop-blur-filter; - color: $white; border-radius: 8px; padding: 16px 24px; display: flex; @@ -8082,7 +7870,7 @@ a.status-card { .scrollable .account-card__title__avatar { img { - border: 2px solid var(--background-color); + border: 2px solid var(--color-bg-primary); } .account__avatar { @@ -8097,7 +7885,7 @@ a.status-card { } .scrollable .account-card__bio::after { - background: linear-gradient(to left, var(--background-color), transparent); + background: linear-gradient(to left, var(--color-bg-primary), transparent); } .account-gallery__container { @@ -8117,7 +7905,7 @@ a.status-card { .notification__filter-bar, .account__section-headline { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; cursor: default; display: flex; @@ -8138,7 +7926,7 @@ a.status-card { a { display: block; flex: 1 1 auto; - color: $darker-text-color; + color: var(--color-text-secondary); padding: 15px 0; font-size: 14px; font-weight: 500; @@ -8149,7 +7937,7 @@ a.status-card { white-space: nowrap; &.active { - color: $primary-text-color; + color: var(--color-text-primary); &::before { display: block; @@ -8161,7 +7949,7 @@ a.status-card { width: 40px; height: 3px; border-radius: 4px 4px 0 0; - background: $highlight-text-color; + background: var(--color-text-brand); } } } @@ -8173,7 +7961,7 @@ a.status-card { } .filter-form { - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &__column { display: flex; @@ -8203,7 +7991,7 @@ a.status-card { text-overflow: ellipsis; cursor: pointer; gap: 10px; - color: $secondary-text-color; + color: var(--color-text-primary); input[type='radio'], input[type='checkbox'] { @@ -8215,7 +8003,7 @@ a.status-card { align-items: center; justify-content: center; position: relative; - border: 2px solid $secondary-text-color; + border: 2px solid var(--color-text-primary); box-sizing: border-box; width: 20px; height: 20px; @@ -8224,7 +8012,7 @@ a.status-card { &.checked, &.indeterminate { - border-color: $ui-highlight-color; + border-color: var(--color-text-brand); } .icon { @@ -8240,7 +8028,7 @@ a.status-card { border-radius: 50%; width: calc(100% - 4px); height: calc(100% - 4px); - background: $ui-highlight-color; + background: var(--color-text-brand); } .check-box { @@ -8251,8 +8039,8 @@ a.status-card { &.checked, &.indeterminate { - background: $ui-highlight-color; - color: $white; + background: var(--color-bg-brand-base); + color: var(--color-text-on-brand-base); } } } @@ -8269,11 +8057,11 @@ noscript { div { font-size: 14px; margin: 30px auto; - color: $secondary-text-color; + color: var(--color-text-primary); max-width: 400px; a { - color: $highlight-text-color; + color: var(--color-text-brand); text-decoration: underline; &:hover { @@ -8301,13 +8089,13 @@ noscript { .follow-request-banner, .account-memorial-banner { padding: 20px; - background: var(--surface-background-color); + background: var(--color-bg-tertiary); display: flex; align-items: center; flex-direction: column; &__message { - color: $darker-text-color; + color: var(--color-text-secondary); padding: 8px 0; padding-top: 0; padding-bottom: 4px; @@ -8344,7 +8132,7 @@ noscript { justify-content: flex-start; gap: 15px; align-items: center; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; label { @@ -8368,7 +8156,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - background: color.change($base-overlay-background, $alpha: 0.5); + background: rgb(from var(--color-bg-overlay) r g b / 50%); } .focal-point { @@ -8388,15 +8176,15 @@ noscript { width: 100px; height: 100px; transform: translate(-50%, -50%); - border: 2px solid #fff; + border: 2px solid var(--color-text-on-media); border-radius: 50%; - box-shadow: 0 0 0 9999em color.change($base-shadow-color, $alpha: 0.35); + box-shadow: 0 0 0 9999em var(--color-shadow-primary); pointer-events: none; } } .account__header__content { - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 14px; font-weight: 400; overflow: hidden; @@ -8448,8 +8236,8 @@ noscript { overflow: hidden; height: 145px; position: relative; - background: darken($ui-base-color, 4%); - border-bottom: 1px solid var(--background-border-color); + background: var(--color-bg-tertiary); + border-bottom: 1px solid var(--color-border-primary); img { object-fit: cover; @@ -8463,15 +8251,15 @@ noscript { &__bar { position: relative; padding: 0 20px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); .avatar { display: block; flex: 0 0 auto; .account__avatar { - background: var(--background-color); - border: 1px solid var(--background-border-color); + background: var(--color-bg-primary); + border: 1px solid var(--color-border-primary); border-radius: var(--avatar-border-radius); } } @@ -8509,7 +8297,7 @@ noscript { h1 { font-size: 17px; line-height: 22px; - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 600; overflow: hidden; white-space: nowrap; @@ -8521,7 +8309,7 @@ noscript { gap: 4px; font-size: 14px; line-height: 20px; - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -8592,7 +8380,7 @@ noscript { } .icon-button { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px; box-sizing: content-box; padding: 5px; @@ -8603,26 +8391,26 @@ noscript { } &.copied { - border-color: $valid-value-color; + border-color: var(--color-text-success); } } } &__bio { .account__header__content { - color: $primary-text-color; + color: var(--color-text-primary); } .account__header__fields { margin: 0; margin-top: 16px; border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); dl { display: block; padding: 11px 16px; - border-bottom-color: var(--background-border-color); + border-bottom-color: var(--color-border-primary); } dd, @@ -8637,15 +8425,15 @@ noscript { width: auto; background: transparent; text-transform: uppercase; - color: $dark-text-color; + color: var(--color-text-tertiary); } dd { - color: $darker-text-color; + color: var(--color-text-secondary); } a { - color: lighten($ui-highlight-color, 8%); + color: var(--color-text-brand); } .icon { @@ -8654,7 +8442,7 @@ noscript { } .verified { - border: 1px solid color.change($valid-value-color, $alpha: 0.5); + border: 1px solid var(--color-text-success); margin-top: -1px; margin-inline: -1px; @@ -8671,7 +8459,7 @@ noscript { dt, dd { - color: $valid-value-color; + color: var(--color-text-success); } dd { @@ -8685,7 +8473,7 @@ noscript { } a { - color: $valid-value-color; + color: var(--color-text-success); } } } @@ -8696,28 +8484,28 @@ noscript { &__links { font-size: 14px; - color: $darker-text-color; + color: var(--color-text-secondary); margin: 0 -10px; padding-top: 16px; padding-bottom: 10px; a { display: inline-block; - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; padding: 5px 10px; font-weight: 500; strong { font-weight: 700; - color: $primary-text-color; + color: var(--color-text-primary); } } } } &__account-note { - color: $primary-text-color; + color: var(--color-text-primary); font-size: 14px; font-weight: 400; margin-bottom: 10px; @@ -8740,7 +8528,7 @@ noscript { display: block; font-size: 12px; font-weight: 500; - color: $darker-text-color; + color: var(--color-text-secondary); text-transform: uppercase; margin-bottom: 5px; } @@ -8749,7 +8537,7 @@ noscript { display: block; box-sizing: border-box; width: calc(100% + 20px); - color: $secondary-text-color; + color: var(--color-text-primary); background: transparent; padding: 10px; margin: 0 -10px; @@ -8761,12 +8549,12 @@ noscript { border-radius: 4px; &::placeholder { - color: $dark-text-color; + color: var(--color-text-tertiary); opacity: 1; } &:focus { - background: $ui-base-color; + background: var(--color-bg-brand-softer); } } } @@ -8776,12 +8564,12 @@ noscript { align-items: center; gap: 10px; margin-block: 16px; - color: $darker-text-color; + color: var(--color-text-secondary); a:any-link { font-weight: 500; text-decoration: none; - color: $primary-text-color; + color: var(--color-text-primary); } } } @@ -8799,7 +8587,7 @@ noscript { .verified-badge { display: inline-flex; align-items: center; - color: $valid-value-color; + color: var(--color-text-success); gap: 4px; overflow: hidden; white-space: nowrap; @@ -8826,12 +8614,12 @@ noscript { display: flex; align-items: center; padding: 16px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); gap: 8px; &__name { flex: 1 1 auto; - color: $dark-text-color; + color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -8841,7 +8629,7 @@ noscript { } a { - color: $darker-text-color; + color: var(--color-text-primary); text-decoration: none; font-size: 14px; font-weight: 500; @@ -8865,7 +8653,7 @@ noscript { font-size: 24px; font-weight: 500; text-align: end; - color: $secondary-text-color; + color: var(--color-text-primary); text-decoration: none; } @@ -8874,60 +8662,60 @@ noscript { width: 50px; path:first-child { - fill: color.change($highlight-text-color, $alpha: 0.25) !important; + fill: var(--color-graph-primary-fill) !important; fill-opacity: 1 !important; } path:last-child { - stroke: lighten($highlight-text-color, 6%) !important; + stroke: var(--color-graph-primary-stroke) !important; fill: none !important; } } &--requires-review { .trends__item__name { - color: $gold-star; + color: var(--color-text-warning); a { - color: $gold-star; + color: var(--color-text-warning); } } .trends__item__current { - color: $gold-star; + color: var(--color-text-warning); } .trends__item__sparkline { path:first-child { - fill: color.change($gold-star, $alpha: 0.25) !important; + fill: var(--color-graph-warning-fill) !important; } path:last-child { - stroke: lighten($gold-star, 6%) !important; + stroke: var(--color-graph-warning-stroke) !important; } } } &--disabled { .trends__item__name { - color: lighten($ui-base-color, 12%); + color: var(--color-text-disabled); a { - color: lighten($ui-base-color, 12%); + color: var(--color-text-disabled); } } .trends__item__current { - color: lighten($ui-base-color, 12%); + color: var(--color-text-disabled); } .trends__item__sparkline { path:first-child { - fill: rgba(lighten($ui-base-color, 12%), 0.25) !important; + fill: var(--color-graph-disabled-fill) !important; } path:last-child { - stroke: lighten(lighten($ui-base-color, 12%), 6%) !important; + stroke: var(--color-graph-disabled-stroke) !important; } } } @@ -8940,12 +8728,12 @@ noscript { .conversation { display: flex; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); padding: 5px; padding-bottom: 0; &:focus { - background: lighten($ui-base-color, 2%); + background: var(--color-bg-secondary); outline: 0; } @@ -8959,7 +8747,7 @@ noscript { &__unread { display: inline-block; - background: $highlight-text-color; + background: var(--color-text-brand); border-radius: 50%; width: 0.625rem; height: 0.625rem; @@ -8981,12 +8769,12 @@ noscript { &__relative-time { font-size: 15px; - color: $darker-text-color; + color: var(--color-text-secondary); padding-inline-start: 15px; } &__names { - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 15px; white-space: nowrap; overflow: hidden; @@ -8996,7 +8784,7 @@ noscript { flex-grow: 1; a { - color: $primary-text-color; + color: var(--color-text-primary); text-decoration: none; &:hover, @@ -9028,7 +8816,7 @@ noscript { } &__root { - background: lighten($ui-base-color, 8%); + background: var(--color-bg-brand-softer); font-size: 13px; display: flex; align-items: flex-end; @@ -9076,7 +8864,7 @@ noscript { top: 19px; inset-inline-end: 19px; display: block; - background: $highlight-text-color; + background: var(--color-text-brand); border-radius: 50%; width: 0.625rem; height: 0.625rem; @@ -9084,7 +8872,7 @@ noscript { &__pagination { padding: 15px; - color: $darker-text-color; + color: var(--color-text-secondary); position: absolute; bottom: 3px; inset-inline-end: 0; @@ -9112,10 +8900,15 @@ noscript { &__item { flex-shrink: 0; - background: lighten($ui-base-color, 12%); - color: $darker-text-color; - border: 0; + background: var(--color-bg-brand-softer); + color: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); + border: 1px solid var(--color-border-on-bg-brand-softer); border-radius: 3px; + box-sizing: border-box; margin: 2px; cursor: pointer; user-select: none; @@ -9154,21 +8947,18 @@ noscript { &:hover, &:focus, &:active { - background: lighten($ui-base-color, 16%); + color: var(--color-text-primary); + background: var(--color-bg-brand-soft); transition: all 200ms ease-out; transition-property: background-color, color; - color: lighten($darker-text-color, 4%); } &.active { + color: var(--color-text-brand); + background-color: var(--color-bg-brand-softer); + border-color: var(--color-text-brand); transition: all 100ms ease-in; transition-property: background-color, color; - background-color: color.mix( - lighten($ui-base-color, 12%), - $ui-highlight-color, - 80% - ); - color: lighten($highlight-text-color, 8%); } } @@ -9182,7 +8972,7 @@ noscript { } .emoji-button { - color: $darker-text-color; + color: var(--color-text-secondary); margin: 0; font-size: 16px; width: auto; @@ -9199,7 +8989,11 @@ noscript { &:active, &:focus { opacity: 1; - color: lighten($darker-text-color, 4%); + color: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); transition: all 200ms ease-out; transition-property: background-color, color; } @@ -9229,7 +9023,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - border-inline-start: 4px solid $highlight-text-color; + border-inline-start: 4px solid var(--color-text-brand); pointer-events: none; } } @@ -9244,9 +9038,9 @@ noscript { &__footer { border-radius: 0 0 4px 4px; - background: var(--modal-background-variant-color); + background: var(--color-bg-secondary); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; padding: 12px; display: flex; @@ -9255,9 +9049,9 @@ noscript { &__header { border-radius: 4px 4px 0 0; - background: var(--modal-background-variant-color); + background: var(--color-bg-secondary); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); + border: 1px solid var(--color-border-primary); border-bottom: 0; padding: 12px; display: flex; @@ -9278,7 +9072,7 @@ noscript { } .display-name { - color: $primary-text-color; + color: var(--color-text-primary); text-decoration: none; strong, @@ -9289,7 +9083,7 @@ noscript { } span { - color: $darker-text-color; + color: var(--color-text-secondary); } } } @@ -9303,7 +9097,7 @@ noscript { .picture-in-picture-placeholder { border-radius: 8px; box-sizing: border-box; - border: 1px dashed var(--background-border-color); + border: 1px dashed var(--color-border-primary); display: flex; flex-direction: column; align-items: center; @@ -9313,7 +9107,7 @@ noscript { line-height: 21px; font-weight: 500; cursor: pointer; - color: $dark-text-color; + color: var(--color-text-tertiary); aspect-ratio: 16 / 9; .icon { @@ -9325,18 +9119,18 @@ noscript { &:hover, &:active, &:focus { - color: $darker-text-color; + color: var(--color-text-secondary); } &:focus-visible { - outline: $ui-button-focus-outline; + outline: var(--outline-focus-default); border-color: transparent; } } .notifications-permission-banner { padding: 30px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); display: flex; flex-direction: column; align-items: center; @@ -9357,7 +9151,7 @@ noscript { } p { - color: $darker-text-color; + color: var(--color-text-secondary); margin-bottom: 15px; text-align: center; @@ -9372,7 +9166,7 @@ noscript { .explore__search-header { justify-content: center; align-items: center; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; border-bottom: 0; padding: 16px; @@ -9384,19 +9178,18 @@ noscript { } .search__input { - border: 1px solid var(--background-border-color); padding-block: 12px; padding-inline-end: 30px; } .search__popout { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); } .search__icon { top: 12px; inset-inline-end: 12px; - color: $dark-text-color; + color: var(--color-text-tertiary); } } @@ -9414,7 +9207,7 @@ noscript { flex-direction: column; @media screen and (min-width: $no-gap-breakpoint) { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; @@ -9424,9 +9217,9 @@ noscript { .story { display: flex; align-items: center; - color: $primary-text-color; + color: var(--color-text-primary); padding: 16px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); gap: 16px; &:last-child { @@ -9437,7 +9230,7 @@ noscript { flex: 1 1 auto; &__publisher { - color: $darker-text-color; + color: var(--color-text-secondary); margin-bottom: 8px; font-size: 14px; line-height: 20px; @@ -9450,26 +9243,26 @@ noscript { font-weight: 500; margin-bottom: 8px; text-decoration: none; - color: $primary-text-color; + color: var(--color-text-primary); &:hover, &:active, &:focus { - color: $highlight-text-color; + color: var(--color-text-brand); } } &__shared { display: flex; align-items: baseline; - color: $darker-text-color; + color: var(--color-text-secondary); gap: 8px; justify-content: space-between; font-size: 14px; line-height: 20px; &__pill { - background: var(--surface-variant-background-color); + background: var(--color-bg-tertiary); border-radius: 4px; color: inherit; text-decoration: none; @@ -9484,14 +9277,14 @@ noscript { display: inline-flex; align-items: center; gap: 4px; - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 500; text-decoration: none; &:hover, &:active, &:focus { - color: $highlight-text-color; + color: var(--color-text-brand); } } } @@ -9561,7 +9354,7 @@ noscript { &__introduction { font-size: 15px; line-height: 22px; - color: $darker-text-color; + color: var(--color-text-secondary); margin-bottom: 20px; strong { @@ -9588,14 +9381,14 @@ noscript { margin-bottom: 20px; aspect-ratio: 1.9; border: 0; - background: $ui-base-color; + background: var(--color-bg-tertiary); object-fit: cover; } &__description { font-size: 15px; line-height: 22px; - color: $darker-text-color; + color: var(--color-text-secondary); margin-bottom: 20px; } @@ -9613,19 +9406,19 @@ noscript { &__number { font-weight: 600; - color: $primary-text-color; + color: var(--color-text-primary); font-size: 14px; } &__number-label { - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 500; font-size: 14px; } h4 { text-transform: uppercase; - color: $darker-text-color; + color: var(--color-text-secondary); margin-bottom: 10px; font-weight: 600; } @@ -9656,9 +9449,9 @@ noscript { position: relative; display: block; border-radius: 16px; - background: var(--modal-background-color); + background: var(--color-bg-primary); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); + border: 1px solid var(--color-border-primary); padding: 24px; box-sizing: border-box; @@ -9682,10 +9475,10 @@ noscript { text-align: center; font-size: 17px; line-height: 22px; - color: $darker-text-color; + color: var(--color-text-secondary); strong { - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 700; } } @@ -9710,9 +9503,9 @@ noscript { &__input { @include search-input; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); padding: 4px 6px; - color: $primary-text-color; + color: var(--color-text-primary); font-size: 16px; line-height: 18px; display: flex; @@ -9728,7 +9521,11 @@ noscript { min-width: 0; &::placeholder { - color: lighten($darker-text-color, 4%); + color: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); } &:focus { @@ -9745,11 +9542,11 @@ noscript { margin-top: -1px; padding-top: 5px; padding-bottom: 5px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); } &.invalid &__input { - border-color: $error-red; + border-color: var(--color-text-error); } &.expanded .search__popout { @@ -9774,7 +9571,7 @@ noscript { } p { - color: $darker-text-color; + color: var(--color-text-secondary); margin-bottom: 20px; font-size: 15px; } @@ -9805,49 +9602,6 @@ noscript { } } -.copypaste { - display: flex; - align-items: center; - gap: 10px; - - input { - display: block; - font-family: inherit; - background: darken($ui-base-color, 8%); - border: 1px solid $highlight-text-color; - color: $darker-text-color; - border-radius: 4px; - padding: 6px 9px; - line-height: 22px; - font-size: 14px; - transition: border-color 300ms linear; - flex: 1 1 auto; - overflow: hidden; - - &:focus { - outline: 0; - background: darken($ui-base-color, 4%); - } - } - - .button { - flex: 0 0 auto; - transition: background 300ms linear; - } - - &.copied { - input { - border: 1px solid $valid-value-color; - transition: none; - } - - .button { - background: $valid-value-color; - transition: none; - } - } -} - .privacy-policy { padding: 20px; @@ -9861,7 +9615,7 @@ noscript { } .prose { - color: $secondary-text-color; + color: var(--color-text-primary); font-size: 15px; line-height: 22px; @@ -9945,7 +9699,7 @@ noscript { ul > li::before { content: ''; position: absolute; - background-color: $darker-text-color; + background-color: var(--color-text-secondary); border-radius: 50%; width: 0.375em; height: 0.375em; @@ -9996,7 +9750,7 @@ noscript { h6, strong, b { - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 700; } @@ -10006,7 +9760,7 @@ noscript { } a { - color: $highlight-text-color; + color: var(--color-text-brand); text-decoration: underline; &:focus, @@ -10018,14 +9772,14 @@ noscript { code { font-size: 0.875em; - background: darken($ui-base-color, 8%); + background: var(--color-bg-secondary); border-radius: 4px; padding: 0.2em 0.3em; } hr { border: 0; - border-top: 1px solid lighten($ui-base-color, 4%); + border-top: 1px solid var(--color-border-primary); margin-top: 3em; margin-bottom: 3em; } @@ -10063,8 +9817,8 @@ noscript { margin: 10px; margin-bottom: 5px; border-radius: 8px; - border: 1px solid $highlight-text-color; - background: color.change($highlight-text-color, $alpha: 0.15); + border: 1px solid var(--color-border-on-bg-brand-softer); + background: var(--color-bg-brand-softer); overflow: hidden; flex-shrink: 0; @@ -10084,7 +9838,7 @@ noscript { font-size: 15px; line-height: 22px; font-weight: 500; - color: $primary-text-color; + color: var(--color-text-primary); p { margin-bottom: 15px; @@ -10095,7 +9849,7 @@ noscript { } h1 { - color: $highlight-text-color; + color: var(--color-text-brand); font-size: 22px; line-height: 33px; font-weight: 700; @@ -10117,11 +9871,6 @@ noscript { flex-grow: 1; } } - - .button-tertiary { - background: color.change($ui-base-color, $alpha: 0.15); - backdrop-filter: blur(8px); - } } &__action { @@ -10129,22 +9878,22 @@ noscript { padding: 15px 10px; .icon-button { - color: $highlight-text-color; + color: var(--color-text-brand); } } } .warning-banner { - border: 1px solid $warning-red; - background: color.change($warning-red, $alpha: 0.15); + border: 1px solid var(--color-border-on-bg-error-softer); + background: var(--color-bg-error-softer); &__message { h1 { - color: $warning-red; + color: var(--color-text-error); } a { - color: $primary-text-color; + color: var(--color-text-primary); } } } @@ -10192,7 +9941,7 @@ noscript { } p { - color: $dark-text-color; + color: var(--color-text-secondary); margin-bottom: 20px; .version { @@ -10204,7 +9953,7 @@ noscript { } a { - color: $dark-text-color; + color: var(--color-text-secondary); text-decoration: underline; &:hover, @@ -10218,14 +9967,14 @@ noscript { .about { padding: 20px; - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); @media screen and (min-width: $no-gap-breakpoint) { border-radius: 4px; } &__footer { - color: $dark-text-color; + color: var(--color-text-tertiary); text-align: center; font-size: 15px; line-height: 22px; @@ -10239,7 +9988,7 @@ noscript { width: 100%; height: auto; aspect-ratio: 1.9; - background: lighten($ui-base-color, 4%); + background: var(--color-bg-tertiary); border-radius: 8px; margin-bottom: 30px; } @@ -10260,12 +10009,12 @@ noscript { font-size: 16px; line-height: 24px; font-weight: 400; - color: $darker-text-color; + color: var(--color-text-secondary); } } &__meta { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px; display: flex; margin-bottom: 30px; @@ -10281,7 +10030,7 @@ noscript { width: 0; border: 0; border-style: solid; - border-color: var(--background-border-color); + border-color: var(--color-border-primary); border-left-width: 1px; min-height: calc(100% - 60px); flex: 0 0 auto; @@ -10290,7 +10039,7 @@ noscript { h4 { font-size: 15px; text-transform: uppercase; - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 500; margin-bottom: 20px; } @@ -10341,7 +10090,7 @@ noscript { } &__mail { - color: $primary-text-color; + color: var(--color-text-primary); text-decoration: none; font-weight: 500; @@ -10389,8 +10138,8 @@ noscript { line-height: 22px; padding: 20px; border-radius: 4px; - border: 1px solid var(--background-border-color); - color: $highlight-text-color; + border: 1px solid var(--color-border-primary); + color: var(--color-text-brand); cursor: pointer; width: 100%; background: none; @@ -10401,7 +10150,7 @@ noscript { } &__body { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; padding: 20px; font-size: 15px; @@ -10411,17 +10160,17 @@ noscript { &__domain-blocks { margin-top: 30px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px; &__domain { - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); padding: 10px; font-size: 15px; - color: $darker-text-color; + color: var(--color-text-secondary); &:nth-child(2n) { - background: darken($ui-base-color, 4%); + background: var(--color-bg-secondary); } &:last-child { @@ -10437,7 +10186,7 @@ noscript { } h6 { - color: $secondary-text-color; + color: var(--color-text-primary); font-size: inherit; white-space: nowrap; overflow: hidden; @@ -10472,14 +10221,13 @@ noscript { width: auto; padding: 15px; margin: 0; - color: $white; - background: color.change($black, $alpha: 0.85); + color: var(--color-text-on-inverted); + background: var(--color-bg-inverted); backdrop-filter: blur(8px); - border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85); border-radius: 8px; box-shadow: - 0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25), - 0 4px 6px -4px color.change($base-shadow-color, $alpha: 0.25); + 0 10px 15px -3px var(--color-shadow-primary), + 0 4px 6px -4px var(--color-shadow-primary); cursor: default; font-size: 15px; line-height: 21px; @@ -10519,7 +10267,7 @@ noscript { background: transparent; text-transform: uppercase; cursor: pointer; - color: $blurple-300; + color: var(--color-text-brand); font-weight: 700; border-radius: 4px; padding: 0 4px; @@ -10527,7 +10275,7 @@ noscript { &:hover, &:focus, &:active { - background: color.change($white, $alpha: 0.15); + background: var(--color-bg-brand-softer); } } @@ -10551,18 +10299,18 @@ noscript { margin-inline-start: 2px; svg { - color: $white; + color: var(--color-text-on-media); height: var(--spinner-size); width: var(--spinner-size); } } .hashtag-header { - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); padding: 15px; font-size: 17px; line-height: 22px; - color: $darker-text-color; + color: var(--color-text-secondary); strong { font-weight: 700; @@ -10576,7 +10324,7 @@ noscript { gap: 15px; h1 { - color: $primary-text-color; + color: var(--color-text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -10597,7 +10345,7 @@ noscript { } .icon-button { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px; box-sizing: content-box; padding: 5px; @@ -10618,21 +10366,25 @@ noscript { font-size: 12px; line-height: 16px; gap: 6px; - color: $darker-text-color; + color: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); a { display: inline-flex; color: inherit; text-decoration: none; padding: 4px 12px; - background: var(--surface-variant-background-color); + background: var(--color-bg-brand-softer); border-radius: 4px; font-weight: 500; &:hover, &:focus, &:active { - background: var(--surface-variant-active-background-color); + background: var(--color-bg-brand-soft); } } @@ -10650,11 +10402,11 @@ noscript { gap: 12px; padding: 16px 0; padding-bottom: 0; - border-bottom: 1px solid var(--background-border-color); - background: color.change($ui-highlight-color, $alpha: 0.05); + border-bottom: 1px solid var(--color-border-primary); + background: var(--color-bg-brand-softer); &.focusable:focus-visible { - background: color.change($ui-highlight-color, $alpha: 0.05); + background: var(--color-bg-brand-softer); } &__header { @@ -10691,7 +10443,7 @@ noscript { border: none; cursor: pointer; top: 0; - color: $primary-text-color; + color: var(--color-text-primary); opacity: 0.5; &.left { @@ -10704,7 +10456,8 @@ noscript { &__icon { border-radius: 50%; - background: $ui-highlight-color; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); display: flex; align-items: center; justify-content: center; @@ -10721,10 +10474,6 @@ noscript { &:focus, &:active { opacity: 1; - - .inline-follow-suggestions__body__scroll-button__icon { - background: lighten($ui-highlight-color, 4%); - } } } @@ -10742,8 +10491,8 @@ noscript { scrollbar-width: none; &__card { - background: var(--background-color); - border: 1px solid var(--background-border-color); + background: var(--color-bg-primary); + border: 1px solid var(--color-border-primary); border-radius: 4px; display: flex; flex-direction: column; @@ -10780,8 +10529,8 @@ noscript { .account__avatar { flex-shrink: 0; align-self: flex-end; - border: 1px solid var(--background-border-color); - background-color: $ui-base-color; + border: 1px solid var(--color-border-primary); + background-color: var(--color-bg-tertiary); } &__text-stack { @@ -10798,7 +10547,7 @@ noscript { &__source { display: inline-flex; align-items: center; - color: $dark-text-color; + color: var(--color-text-tertiary); gap: 4px; overflow: hidden; white-space: nowrap; @@ -10829,12 +10578,12 @@ noscript { &__html { font-size: 15px; font-weight: 500; - color: $secondary-text-color; + color: var(--color-text-primary); } &__account { font-size: 14px; - color: $darker-text-color; + color: var(--color-text-secondary); } } @@ -10855,16 +10604,16 @@ noscript { .filtered-notifications-banner { display: flex; align-items: center; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); padding: 16px 24px; gap: 8px; - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; &:hover, &:active, &:focus { - color: $secondary-text-color; + color: var(--color-text-primary); } .notification-group__icon { @@ -10884,8 +10633,8 @@ noscript { } &__badge { - background: $ui-button-background-color; - color: $white; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); border-radius: 100px; padding: 2px 8px; } @@ -10898,7 +10647,7 @@ noscript { padding: $padding; gap: 8px; position: relative; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &__checkbox { position: absolute; @@ -10930,7 +10679,7 @@ noscript { &__name { flex: 1 1 auto; - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 14px; line-height: 20px; overflow: hidden; @@ -10943,7 +10692,7 @@ noscript { font-size: 16px; letter-spacing: 0.5px; line-height: 24px; - color: $secondary-text-color; + color: var(--color-text-primary); bdi { overflow: hidden; @@ -10953,10 +10702,10 @@ noscript { } .filtered-notifications-banner__badge { - background: $ui-button-background-color; + color: var(--color-text-on-brand-base); + background: var(--color-bg-brand-base); border-radius: 4px; padding: 1px 6px; - color: $white; } } @@ -10967,7 +10716,7 @@ noscript { .icon-button { border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); padding: 5px; } } @@ -10980,7 +10729,7 @@ noscript { cursor: pointer; &:hover { - background: var(--on-surface-color); + background: var(--color-bg-secondary); } .notification-request__checkbox { @@ -11001,9 +10750,9 @@ noscript { .more-from-author { box-sizing: border-box; font-size: 14px; - color: $darker-text-color; - background: var(--surface-background-color); - border: 1px solid var(--background-border-color); + color: var(--color-text-secondary); + background: var(--color-bg-tertiary); + border: 1px solid var(--color-border-primary); border-top: 0; border-radius: 0 0 8px 8px; padding: 15px; @@ -11015,7 +10764,7 @@ noscript { .logo { width: 16px; height: 16px; - color: $darker-text-color; + color: var(--color-text-secondary); } & > span { @@ -11029,14 +10778,14 @@ noscript { align-items: center; gap: 4px; font-weight: 500; - color: $primary-text-color; + color: var(--color-text-primary); text-decoration: none; min-width: 0; &:hover, &:focus, &:active { - color: $highlight-text-color; + color: var(--color-text-brand); } } } @@ -11046,7 +10795,7 @@ noscript { align-items: flex-start; gap: 8px; padding: 16px 24px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &__icon { width: 40px; @@ -11054,7 +10803,7 @@ noscript { align-items: center; justify-content: center; flex: 0 0 auto; - color: $dark-text-color; + color: var(--color-text-tertiary); .icon { width: 28px; @@ -11064,25 +10813,25 @@ noscript { &--follow &__icon, &--follow-request &__icon { - color: $highlight-text-color; + color: var(--color-text-brand); } &--favourite &__icon { - color: $gold-star; + color: var(--color-text-favourite-highlight); } &--reblog &__icon { - color: $valid-value-color; + color: var(--color-text-success); } &--relationships-severance-event &__icon, &--admin-report &__icon, &--admin-sign-up &__icon { - color: $dark-text-color; + color: var(--color-text-tertiary); } &--moderation-warning &__icon { - color: $red-bookmark; + color: var(--color-text-bookmark-highlight); } &--follow-request &__actions { @@ -11091,7 +10840,7 @@ noscript { gap: 8px; .icon-button { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 50%; padding: 1px; } @@ -11121,7 +10870,7 @@ noscript { gap: 2px 8px; font-size: 15px; line-height: 22px; - color: $darker-text-color; + color: var(--color-text-secondary); a { color: inherit; @@ -11130,11 +10879,11 @@ noscript { bdi { font-weight: 700; - color: $primary-text-color; + color: var(--color-text-primary); } time { - color: $dark-text-color; + color: var(--color-text-tertiary); } @container (width < 350px) { @@ -11147,13 +10896,13 @@ noscript { } &__status { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 8px; padding: 8px; } &__additional-content { - color: $dark-text-color; + color: var(--color-text-tertiary); margin-top: -8px; // to offset the parent's `gap` property font-size: 15px; line-height: 22px; @@ -11175,12 +10924,12 @@ noscript { display: flex; align-items: center; gap: 4px; - color: $dark-text-color; + color: var(--color-text-tertiary); font-size: 15px; line-height: 22px; bdi { - color: $darker-text-color; + color: var(--color-text-secondary); } .account__avatar { @@ -11192,7 +10941,7 @@ noscript { display: -webkit-box; font-size: 15px; line-height: 22px; - color: $darker-text-color; + color: var(--color-text-secondary); -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; @@ -11213,7 +10962,7 @@ noscript { margin-top: 0; font-size: 15px; line-height: 22px; - color: $dark-text-color; + color: var(--color-text-tertiary); } } } @@ -11228,13 +10977,13 @@ noscript { .notification-ungrouped { padding: 16px 24px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &__header { display: flex; align-items: center; gap: 8px; - color: $dark-text-color; + color: var(--color-text-tertiary); font-size: 15px; line-height: 22px; font-weight: 500; @@ -11318,7 +11067,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - border-inline-start: 4px solid $highlight-text-color; + border-inline-start: 4px solid var(--color-text-brand); pointer-events: none; } } @@ -11330,9 +11079,9 @@ noscript { .hover-card { box-shadow: var(--dropdown-shadow); - background: var(--modal-background-color); + background: var(--color-bg-primary); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); + border: 1px solid var(--color-border-primary); border-radius: 8px; padding: 16px; width: 270px; @@ -11363,7 +11112,7 @@ noscript { &__numbers { font-size: 15px; line-height: 22px; - color: $secondary-text-color; + color: var(--color-text-primary); strong { font-weight: 700; @@ -11377,7 +11126,7 @@ noscript { } &__bio { - color: $secondary-text-color; + color: var(--color-text-primary); font-size: 14px; line-height: 20px; display: -webkit-box; @@ -11405,7 +11154,7 @@ noscript { &__note { &-label { - color: $dark-text-color; + color: var(--color-text-tertiary); font-size: 12px; font-weight: 500; text-transform: uppercase; @@ -11413,7 +11162,7 @@ noscript { dd { white-space: pre-line; - color: $secondary-text-color; + color: var(--color-text-primary); overflow: hidden; line-clamp: 3; // Not yet supported in browers display: -webkit-box; // The next 3 properties are needed @@ -11433,17 +11182,17 @@ noscript { bdi { font-weight: 500; - color: $primary-text-color; + color: var(--color-text-primary); } &__account { display: block; - color: $dark-text-color; + color: var(--color-text-tertiary); } } .account-fields { - color: $secondary-text-color; + color: var(--color-text-primary); font-size: 14px; line-height: 20px; @@ -11465,7 +11214,7 @@ noscript { dt { flex: 0 1 auto; - color: $dark-text-color; + color: var(--color-text-tertiary); min-width: 0; overflow: hidden; white-space: nowrap; @@ -11490,7 +11239,7 @@ noscript { gap: 4px; overflow: hidden; white-space: nowrap; - color: $valid-value-color; + color: var(--color-text-success); & > span { overflow: hidden; @@ -11514,9 +11263,9 @@ noscript { .content-warning { display: block; box-sizing: border-box; - background: var(--nested-card-background); - color: var(--nested-card-text); - border: var(--nested-card-border); + color: var(--color-text-primary); + background: var(--color-bg-brand-softer); + border: 1px solid var(--color-border-on-bg-brand-softer); border-radius: 8px; padding: 8px (5px + 8px); position: relative; @@ -11536,7 +11285,7 @@ noscript { } &--filter { - color: $darker-text-color; + color: var(--color-text-secondary); p { font-weight: normal; @@ -11544,7 +11293,7 @@ noscript { .filter-name { font-weight: 500; - color: $secondary-text-color; + color: var(--color-text-primary); } } } @@ -11554,7 +11303,7 @@ noscript { align-items: center; gap: 16px; padding-inline-end: 13px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); &__title { display: flex; @@ -11564,13 +11313,13 @@ noscript { flex: 1 1 auto; font-size: 16px; line-height: 24px; - color: $secondary-text-color; + color: var(--color-text-secondary); text-decoration: none; &:is(a):hover, &:is(a):focus, &:is(a):active { - color: $primary-text-color; + color: var(--color-text-primary); } input { @@ -11585,7 +11334,7 @@ noscript { color: inherit; &::placeholder { - color: var(--input-placeholder-color); + color: var(--color-text-secondary); opacity: 1; } @@ -11600,16 +11349,16 @@ noscript { display: flex; gap: 12px; align-items: center; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; border-bottom: 0; padding: 16px; padding-bottom: 8px; input { - background: var(--input-background-color); - border: 1px solid var(--background-border-color); - color: var(--on-input-color); + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + color: var(--color-text-primary); padding: 12px; font-size: 16px; line-height: normal; @@ -11618,7 +11367,7 @@ noscript { flex: 1 1 auto; &::placeholder { - color: var(--input-placeholder-color); + color: var(--color-text-secondary); opacity: 1; } @@ -11639,7 +11388,7 @@ noscript { .featured-carousel { overflow: hidden; flex-shrink: 0; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); touch-action: pan-y; &__slides { @@ -11661,7 +11410,7 @@ noscript { &__header { padding: 8px 16px; - color: $darker-text-color; + color: var(--color-text-secondary); inset-inline-end: 0; display: flex; align-items: center; diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 7db9ca409d..57c62a29e3 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -27,7 +27,7 @@ display: flex; justify-content: center; align-items: center; - color: $primary-text-color; + color: var(--color-text-primary); text-decoration: none; outline: 0; padding: 12px 16px; @@ -65,7 +65,7 @@ padding: 20px 0; margin-top: 40px; margin-bottom: 10px; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); @media screen and (width <= 440px) { width: 100%; @@ -89,7 +89,7 @@ .name { flex: 1 1 auto; - color: $secondary-text-color; + color: var(--color-text-primary); .username { display: block; @@ -97,7 +97,7 @@ line-height: 24px; text-overflow: ellipsis; overflow: hidden; - color: $primary-text-color; + color: var(--color-text-primary); } } @@ -148,7 +148,7 @@ } a { - color: $highlight-text-color; + color: var(--color-text-brand); font-weight: 500; text-decoration: none; diff --git a/app/javascript/styles/mastodon/css_variables.scss b/app/javascript/styles/mastodon/css_variables.scss index 78915ae10e..b270bd337f 100644 --- a/app/javascript/styles/mastodon/css_variables.scss +++ b/app/javascript/styles/mastodon/css_variables.scss @@ -1,42 +1,221 @@ -@use 'sass:color'; -@use 'functions' as *; -@use 'variables' as *; +@use 'theme_utils' as utils; :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 #{color.change($base-shadow-color, $alpha: 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-variant-color: #{color.change($ui-base-color, $alpha: 0.7)}; - --modal-border-color: #{lighten($ui-base-color, 4%)}; - --background-border-color: #{lighten($ui-base-color, 4%)}; - --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%)}; - --surface-border-color: #{lighten($ui-base-color, 8%)}; - --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 #{color.change($base-shadow-color, $alpha: 0.35)} + --color-black: #000; + --color-grey-950: #181821; + --color-grey-800: #292938; + --color-grey-700: #444664; + --color-grey-600: #545778; + --color-grey-500: #696d91; + --color-grey-400: #8b8dac; + --color-grey-300: #b4b6cb; + --color-grey-200: #d8d9e3; + --color-grey-100: #f0f0f5; + --color-grey-50: #f0f1ff; + --color-white: #fff; + --color-indigo-600: #6147e6; + --color-indigo-400: #8886ff; + --color-indigo-300: #a5abfd; + --color-indigo-200: #c8cdfe; + --color-indigo-100: #e0e3ff; + --color-indigo-50: #f0f1ff; + --color-red-500: #ff637e; + --color-red-600: #ec003f; + --color-yellow-400: #ffb900; + --color-yellow-600: #e17100; + --color-green-400: #05df72; + --color-green-600: #00a63e; + + /* TEXT TOKENS */ + + --color-text-primary: var(--color-grey-50); + --color-text-secondary: var(--color-grey-400); + --color-text-tertiary: var(--color-grey-500); + --color-text-on-inverted: var(--color-grey-950); + --color-text-brand: var(--color-indigo-400); + --color-text-brand-soft: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-brand) ); - --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%); - --nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%); - --nested-card-text: #{$secondary-text-color}; - --nested-card-border: 1px solid - color(from #{$ui-highlight-color} srgb r g b / 15%); - --input-placeholder-color: #{$dark-text-color}; - --input-background-color: var(--surface-variant-background-color); - --on-input-color: #{$secondary-text-color}; + --color-text-on-brand-base: var(--color-white); + --color-text-error: var(--color-red-500); + --color-text-on-error-base: var(--color-white); + --color-text-warning: var(--color-yellow-400); + --color-text-on-warning-base: var(--color-white); + --color-text-success: var(--color-green-400); + --color-text-on-success-base: var(--color-white); + --color-text-disabled: var(--color-grey-600); + --color-text-on-disabled: var(--color-grey-400); + --color-text-bookmark-highlight: var(--color-text-error); + --color-text-favourite-highlight: var(--color-text-warning); + --color-text-on-media: var(--color-white); + --color-text-status-links: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); + + /* BACKGROUND TOKENS */ + + // Neutrals + --color-bg-primary: var(--color-grey-950); + --overlay-strength-secondary: 10%; + --color-bg-secondary-base: var(--color-indigo-200); + --color-bg-secondary: #{utils.css-alpha( + var(--color-bg-secondary-base), + var(--overlay-strength-secondary) + )}; + --color-bg-secondary-solid: color-mix( + in srgb, + var(--color-bg-primary), + var(--color-bg-secondary-base) var(--overlay-strength-secondary) + ); + --color-bg-tertiary: color-mix( + in oklab, + var(--color-bg-primary), + var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary)) + ); + + // Utility + --color-bg-ambient: var(--color-bg-primary); + --color-bg-elevated: var(--color-bg-primary); + --color-bg-inverted: var(--color-grey-50); + --color-bg-media-base: var(--color-black); + --color-bg-media-strength: 65%; + --color-bg-media: #{utils.css-alpha( + var(--color-bg-media-base), + var(--color-bg-media-strength) + )}; + --color-bg-overlay: var(--color-black); + --color-bg-disabled: var(--color-grey-700); + + // Brand + --overlay-strength-brand: 10%; + --color-bg-brand-base: var(--color-indigo-600); + --color-bg-brand-base-hover: color-mix( + in oklab, + var(--color-bg-brand-base), + black var(--overlay-strength-brand) + ); + --color-bg-brand-soft: #{utils.css-alpha( + var(--color-bg-brand-base), + calc(var(--overlay-strength-brand) * 1.5) + )}; + --color-bg-brand-softer: #{utils.css-alpha( + var(--color-bg-brand-base), + var(--overlay-strength-brand) + )}; + + // Error + --overlay-strength-error: 12%; + --color-bg-error-base: var(--color-red-600); + --color-bg-error-base-hover: color-mix( + in oklab, + var(--color-bg-error-base), + black var(--overlay-strength-error) + ); + --color-bg-error-soft: #{utils.css-alpha( + var(--color-bg-error-base), + calc(var(--overlay-strength-error) * 1.5) + )}; + --color-bg-error-softer: #{utils.css-alpha( + var(--color-bg-error-base), + var(--overlay-strength-error) + )}; + + // Warning + --overlay-strength-warning: 10%; + --color-bg-warning-base: var(--color-yellow-600); + --color-bg-warning-base-hover: color-mix( + in oklab, + var(--color-bg-warning-base), + black var(--overlay-strength-warning) + ); + --color-bg-warning-soft: #{utils.css-alpha( + var(--color-bg-warning-base), + calc(var(--overlay-strength-warning) * 1.5) + )}; + --color-bg-warning-softer: #{utils.css-alpha( + var(--color-bg-warning-base), + var(--overlay-strength-warning) + )}; + + // Success + --overlay-strength-success: 15%; + --color-bg-success-base: var(--color-green-600); + --color-bg-success-base-hover: color-mix( + in oklab, + var(--color-bg-success-base), + black var(--overlay-strength-success) + ); + --color-bg-success-soft: #{utils.css-alpha( + var(--color-bg-success-base), + calc(var(--overlay-strength-success) * 1.5) + )}; + --color-bg-success-softer: #{utils.css-alpha( + var(--color-bg-success-base), + var(--overlay-strength-success) + )}; + + /* BORDER TOKENS */ + + --border-strength-primary: 18%; + --color-border-primary: #{utils.css-alpha( + var(--color-indigo-200), + var(--border-strength-primary) + )}; + --color-border-media: rgb(252 248 255 / 15%); + --color-border-on-bg-secondary: #{utils.css-alpha( + var(--color-indigo-200), + calc(var(--border-strength-primary) / 1.5) + )}; + --color-border-on-bg-brand-softer: var(--color-border-primary); + --color-border-on-bg-error-softer: #{utils.css-alpha( + var(--color-text-error), + 50% + )}; + --color-border-on-bg-warning-softer: #{utils.css-alpha( + var(--color-text-warning), + 50% + )}; + --color-border-on-bg-success-softer: #{utils.css-alpha( + var(--color-text-success), + 50% + )}; + --color-border-on-bg-inverted: var(--color-border-primary); + + /* SHADOW TOKENS */ + + --shadow-strength-primary: 80%; + --color-shadow-primary: #{utils.css-alpha( + var(--color-black), + var(--shadow-strength-primary) + )}; + --dropdown-shadow: + 0 20px 25px -5px var(--color-shadow-primary), + 0 8px 10px -6px var(--color-shadow-primary); + --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary)); + + /* GRAPHS/CHARTS TOKENS */ + + --color-graph-primary-stroke: var(--color-text-brand); + --color-graph-primary-fill: var(--color-bg-brand-softer); + --color-graph-warning-stroke: var(--color-text-warning); + --color-graph-warning-fill: var(--color-bg-warning-softer); + --color-graph-disabled-stroke: var(--color-text-disabled); + --color-graph-disabled-fill: var(--color-bg-disabled); + + /* LEGACY TOKENS */ + + --rich-text-container-color: rgb(87 24 60 / 100%); + --rich-text-text-color: rgb(255 175 212 / 100%); + --rich-text-decorations-color: rgb(128 58 95 / 100%); + + /* MISCELLANEOUS */ + + --outline-focus-default: 2px solid var(--color-text-brand); + --avatar-border-radius: 8px; } body { diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss index 8326022f71..db3f0e8a84 100644 --- a/app/javascript/styles/mastodon/dashboard.scss +++ b/app/javascript/styles/mastodon/dashboard.scss @@ -1,4 +1,3 @@ -@use 'functions' as *; @use 'variables' as *; .dashboard__counters { @@ -16,9 +15,9 @@ & > div, & > a { padding: 20px; - background: var(--background-color); + background: var(--color-bg-primary); border-radius: 4px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); box-sizing: border-box; height: 100%; } @@ -31,7 +30,7 @@ &:hover, &:focus, &:active { - background: $ui-base-color; + background: var(--color-bg-brand-softer); } } } @@ -41,7 +40,7 @@ text-align: center; font-weight: 500; font-size: 24px; - color: $primary-text-color; + color: var(--color-text-primary); margin-bottom: 20px; line-height: 30px; } @@ -52,7 +51,7 @@ &__label { font-size: 14px; - color: $darker-text-color; + color: var(--color-text-secondary); text-align: center; font-weight: 500; } @@ -85,8 +84,8 @@ display: flex; align-items: baseline; border-radius: 4px; - background: $ui-button-background-color; - color: $primary-text-color; + background: var(--color-bg-brand-base); + color: var(--color-text-on-brand-base); transition: all 100ms ease-in; font-size: 14px; padding: 8px 16px; @@ -96,18 +95,18 @@ &:active, &:focus, &:hover { - background-color: $ui-button-focus-background-color; + background-color: var(--color-bg-brand-base-hover); transition: all 200ms ease-out; } &.positive { - background: lighten($ui-base-color, 4%); - color: $valid-value-color; + background: var(--color-bg-success-softer); + color: var(--color-text-success); } &.negative { - background: lighten($ui-base-color, 4%); - color: $error-value-color; + background: var(--color-bg-error-softer); + color: var(--color-text-error); } span { diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 716c790e65..ad2f2f630d 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -1,5 +1,4 @@ @use 'variables' as *; -@use 'functions' as *; .emoji-mart { font-size: 13px; @@ -18,7 +17,8 @@ .emoji-mart-bar { &:first-child { - background: var(--dropdown-border-color); + background: var(--color-bg-tertiary); + border-bottom: 1px solid var(--color-border-primary); } } @@ -39,18 +39,22 @@ cursor: pointer; background: transparent; border: 0; - color: $darker-text-color; + color: var(--color-text-secondary); &:hover { - color: lighten($darker-text-color, 4%); + color: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-secondary) + ); } } .emoji-mart-anchor-selected { - color: $highlight-text-color; + color: var(--color-text-brand); &:hover { - color: lighten($highlight-text-color, 4%); + color: var(--color-text-brand-soft); } .emoji-mart-anchor-bar { @@ -64,7 +68,7 @@ inset-inline-start: 0; width: 100%; height: 4px; - background-color: $highlight-text-color; + background-color: var(--color-text-brand); } .emoji-mart-anchors { @@ -101,9 +105,9 @@ font-family: inherit; display: block; width: 100%; - background: $ui-base-color; - color: $darker-text-color; - border: 1px solid var(--background-border-color); + background: var(--color-bg-secondary); + color: var(--color-text-secondary); + border: 1px solid var(--color-border-primary); border-radius: 4px; &::-moz-focus-inner { @@ -133,7 +137,6 @@ transition: all 100ms linear; transition-property: opacity; pointer-events: auto; - opacity: 0.7; &:disabled { cursor: default; @@ -141,7 +144,7 @@ } svg { - fill: $darker-text-color; + fill: currentColor; } } @@ -165,7 +168,7 @@ inset-inline-start: 0; width: 100%; height: 100%; - background-color: var(--dropdown-border-color); + background-color: var(--color-bg-brand-softer); border-radius: 100%; } } @@ -225,7 +228,7 @@ .emoji-mart-no-results { font-size: 14px; - color: $dark-text-color; + color: var(--color-text-tertiary); text-align: center; padding: 5px 6px; padding-top: 70px; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index e0ccd0a27f..9f716c2126 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -1,6 +1,5 @@ @use 'sass:color'; @use 'variables' as *; -@use 'functions' as *; code { font-family: $font-monospace, monospace; @@ -16,7 +15,7 @@ code { .form-section { border-radius: 8px; - background: var(--surface-background-color); + background: var(--color-bg-secondary); padding: 24px; margin-bottom: 24px; } @@ -33,7 +32,7 @@ code { display: block; background: linear-gradient( to bottom, - var(--surface-background-color), + var(--color-bg-secondary-solid), transparent ); position: absolute; @@ -58,14 +57,16 @@ code { width: 40px; height: 40px; border-radius: 50%; - color: $primary-text-color; + color: var(--color-text-primary); &.success { - background: $success-green; + color: var(--color-text-on-success-base); + background: var(--color-bg-success-base); } &.failure { - background: $error-red; + color: var(--color-text-on-error-base); + background: var(--color-bg-error-base); } } @@ -126,7 +127,7 @@ code { font-family: inherit; font-size: 14px; padding-top: 5px; - color: $primary-text-color; + color: var(--color-text-primary); display: block; width: auto; } @@ -147,7 +148,7 @@ code { } label a { - color: $highlight-text-color; + color: var(--color-text-brand); text-decoration: underline; &:hover, @@ -189,7 +190,7 @@ code { .lead { font-size: 17px; line-height: 22px; - color: $secondary-text-color; + color: var(--color-text-primary); margin-bottom: 30px; &.invited-by { @@ -197,7 +198,7 @@ code { } a { - color: $highlight-text-color; + color: var(--color-text-brand); } } @@ -208,16 +209,16 @@ code { } .hint { - color: $darker-text-color; + color: var(--color-text-secondary); a { - color: $highlight-text-color; + color: var(--color-text-brand); } code { border-radius: 3px; padding: 0.2em 0.4em; - background: darken($ui-base-color, 12%); + background: var(--color-bg-secondary); } li { @@ -242,7 +243,7 @@ code { p.hint { margin-bottom: 15px; - color: $darker-text-color; + color: var(--color-text-secondary); &.subtle-hint { text-align: center; @@ -278,7 +279,7 @@ code { & > label { font-family: inherit; font-size: 14px; - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 500; min-width: 150px; flex: 0 0 auto; @@ -300,7 +301,7 @@ code { .label_input > label { font-family: inherit; font-size: 14px; - color: $primary-text-color; + color: var(--color-text-primary); display: block; margin-bottom: 8px; overflow-wrap: break-word; @@ -322,7 +323,7 @@ code { & > label { font-family: inherit; font-size: 14px; - color: $primary-text-color; + color: var(--color-text-primary); display: block; font-weight: 600; line-height: 20px; @@ -381,7 +382,7 @@ code { .required abbr { text-decoration: none; - color: lighten($error-value-color, 12%); + color: var(--color-text-error); } .fields-group { @@ -474,7 +475,7 @@ code { margin-bottom: 5px; font-family: inherit; font-size: 14px; - color: $primary-text-color; + color: var(--color-text-primary); display: block; width: auto; } @@ -484,7 +485,7 @@ code { label { font-family: inherit; font-size: 14px; - color: $primary-text-color; + color: var(--color-text-primary); display: inline-block; width: auto; position: relative; @@ -505,7 +506,7 @@ code { .input.static .label_input__wrapper { font-size: 14px; padding: 10px; - border: 1px solid $dark-text-color; + border: 1px solid var(--color-border-primary); border-radius: 4px; } @@ -519,14 +520,14 @@ code { box-sizing: border-box; font-size: 14px; line-height: 20px; - color: $primary-text-color; + color: var(--color-text-primary); display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; - background: $ui-base-color; - border: 1px solid var(--background-border-color); + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); border-radius: 4px; padding: 10px 16px; @@ -535,7 +536,7 @@ code { } &:required:valid { - border-color: $valid-value-color; + border-color: var(--color-text-success); } @media screen and (width <= 600px) { @@ -550,13 +551,13 @@ code { input[type='datetime-local'] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { - border-color: lighten($error-red, 12%); + border-color: var(--color-text-error); } } .input.field_with_errors { label { - color: lighten($error-red, 12%); + color: var(--color-text-error); } input[type='text'], @@ -566,13 +567,13 @@ code { input[type='datetime-local'], textarea, select { - border-color: lighten($error-red, 12%); + border-color: var(--color-text-error); } .error { display: block; font-weight: 500; - color: lighten($error-red, 12%); + color: var(--color-text-error); margin-top: 4px; } } @@ -605,8 +606,8 @@ code { width: 100%; border: 0; border-radius: 4px; - background: $ui-button-background-color; - color: $ui-button-color; + background: var(--color-bg-brand-base); + color: var(--color-text-on-brand-base); font-size: 15px; line-height: 22px; height: auto; @@ -625,21 +626,22 @@ code { &:active, &:focus, &:hover { - background-color: $ui-button-focus-background-color; + background: var(--color-bg-brand-base-hover); } &:disabled, &:disabled:hover { - background-color: $ui-button-disabled-color; + color: var(--color-text-on-disabled); + background: var(--color-bg-disabled); } &.negative { - background: $ui-button-destructive-background-color; + background: var(--color-bg-error-base); &:hover, &:active, &:focus { - background-color: $ui-button-destructive-focus-background-color; + background: var(--color-bg-error-base-hover); } } } @@ -648,16 +650,14 @@ code { appearance: none; box-sizing: border-box; font-size: 14px; - color: $primary-text-color; + color: var(--color-text-primary); display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; - background: $ui-base-color - url("data:image/svg+xml;utf8,") - no-repeat right 8px center / auto 14px; - border: 1px solid var(--background-border-color); + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); border-radius: 4px; padding-inline-start: 10px; padding-inline-end: 30px; @@ -695,7 +695,7 @@ code { top: 1px; padding: 10px; font-size: 14px; - color: $dark-text-color; + color: var(--color-text-tertiary); font-family: inherit; pointer-events: none; cursor: default; @@ -721,6 +721,29 @@ code { } } +/* Double-chevron icon for custom select components */ +.select-wrapper, +.select .label_input__wrapper { + width: 100%; + + &::after { + --icon-size: 11px; + + content: ''; + position: absolute; + top: 0; + bottom: 0; + inset-inline-end: 9px; + width: var(--icon-size); + background-color: var(--color-text-tertiary); + pointer-events: none; + mask-image: url("data:image/svg+xml;utf8,"); + mask-position: right center; + mask-size: var(--icon-size); + mask-repeat: no-repeat; + } +} + .block-icon { display: block; margin: 0 auto; @@ -729,30 +752,30 @@ code { } .flash-message { - background: var(--background-color); - color: $highlight-text-color; - border: 1px solid $highlight-text-color; + color: var(--color-text-brand); + background: transparent; + border: 1px solid var(--color-text-brand); border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; text-align: center; &.notice { - border: 1px solid color.change($valid-value-color, $alpha: 0.5); - background: color.change($valid-value-color, $alpha: 0.25); - color: $valid-value-color; + border: 1px solid var(--color-border-on-bg-success-softer); + background: var(--color-bg-success-softer); + color: var(--color-text-success); } &.warning { - border: 1px solid color.change($gold-star, $alpha: 0.5); - background: color.change($gold-star, $alpha: 0.25); - color: $gold-star; + border: 1px solid var(--color-border-on-bg-warning-softer); + background: var(--color-bg-warning-softer); + color: var(--color-text-warning); } &.alert { - border: 1px solid color.change($error-value-color, $alpha: 0.5); - background: color.change($error-value-color, $alpha: 0.1); - color: $error-value-color; + border: 1px solid var(--color-border-on-bg-error-softer); + background: var(--color-bg-error-softer); + color: var(--color-text-error); } &.hidden { @@ -767,11 +790,11 @@ code { a { display: inline-block; - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; &:hover { - color: $primary-text-color; + color: var(--color-text-primary); text-decoration: underline; } } @@ -801,8 +824,8 @@ code { border: 0; padding: 10px; font-family: $font-monospace, monospace; - background: $ui-base-color; - color: $primary-text-color; + background: var(--color-bg-secondary); + color: var(--color-text-primary); font-size: 14px; margin: 0; @@ -817,7 +840,7 @@ code { } &:focus { - background: lighten($ui-base-color, 4%); + background: var(--color-bg-brand-softer); } } @@ -873,7 +896,7 @@ code { text-align: center; a { - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; &:hover { @@ -893,7 +916,7 @@ code { } a { - color: $highlight-text-color; + color: var(--color-text-brand); text-transform: uppercase; text-decoration: none; font-weight: 700; @@ -901,7 +924,7 @@ code { &:hover, &:focus, &:active { - color: lighten($highlight-text-color, 8%); + color: var(--color-text-brand-soft); } } } @@ -909,7 +932,7 @@ code { .oauth-prompt, .follow-prompt { margin-bottom: 30px; - color: $darker-text-color; + color: var(--color-text-secondary); h2 { font-size: 16px; @@ -918,7 +941,7 @@ code { } strong { - color: $secondary-text-color; + color: var(--color-text-primary); font-weight: 500; @each $lang in $cjk-langs { @@ -931,7 +954,7 @@ code { .oauth-prompt { h3 { - color: $ui-secondary-color; + color: var(--color-text-primary); font-size: 17px; line-height: 22px; font-weight: 500; @@ -945,9 +968,9 @@ code { } .permissions-list { - border: 1px solid $ui-base-color; + border: 1px solid var(--color-border-primary); border-radius: 4px; - background: darken($ui-base-color, 4%); + background: var(--color-bg-secondary); margin-bottom: 30px; } @@ -973,10 +996,10 @@ code { .qr-code { flex: 0 0 auto; - background: $simple-background-color; + background: white; padding: 4px; margin: 0 10px 20px 0; - box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2); + box-shadow: 0 0 15px var(--color-shadow-primary); display: inline-block; svg { @@ -987,7 +1010,7 @@ code { .qr-alternative { margin-bottom: 20px; - color: $secondary-text-color; + color: var(--color-text-primary); flex: 150px; samp { @@ -996,42 +1019,6 @@ code { } } -.simple_form { - .warning { - box-sizing: border-box; - background: color.change($error-value-color, $alpha: 0.5); - color: $primary-text-color; - text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3); - box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4); - border-radius: 4px; - padding: 10px; - margin-bottom: 15px; - - a { - color: $primary-text-color; - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - - strong { - font-weight: 600; - display: block; - margin-bottom: 5px; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - } -} - .action-pagination { display: flex; flex-wrap: wrap; @@ -1051,7 +1038,7 @@ code { .post-follow-actions { text-align: center; - color: $darker-text-color; + color: var(--color-text-secondary); div { margin-bottom: 4px; @@ -1064,7 +1051,7 @@ code { h4 { font-size: 16px; - color: $primary-text-color; + color: var(--color-text-primary); text-align: center; margin-bottom: 20px; border: 0; @@ -1077,7 +1064,7 @@ code { } .scope-danger { - color: $warning-red; + color: var(--color-text-error); } .form_admin_settings_site_short_description, @@ -1092,8 +1079,9 @@ code { } .input-copy { - background: darken($ui-base-color, 10%); - border: 1px solid darken($ui-base-color, 14%); + color: var(--color-text-primary); + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); border-radius: 4px; display: flex; align-items: center; @@ -1127,11 +1115,11 @@ code { } &.copied { - border-color: $valid-value-color; + border-color: var(--color-text-success); transition: none; button { - background: $valid-value-color; + background: var(--color-bg-success-base); transition: none; } } @@ -1153,8 +1141,8 @@ code { .permissions-list { &__item { padding: 15px; - color: $ui-secondary-color; - border-bottom: 1px solid lighten($ui-base-color, 4%); + color: var(--color-text-primary); + border-bottom: 1px solid var(--color-border-primary); display: flex; align-items: center; @@ -1166,7 +1154,7 @@ code { } &__type { - color: $darker-text-color; + color: var(--color-text-secondary); overflow-wrap: anywhere; } } @@ -1175,7 +1163,7 @@ code { flex: 0 0 auto; font-size: 18px; width: 30px; - color: $valid-value-color; + color: var(--color-text-success); display: flex; align-items: center; } @@ -1230,7 +1218,6 @@ code { align-items: center; padding-bottom: 30px; margin-bottom: 30px; - color: $white; li { flex: 0 0 auto; @@ -1239,11 +1226,11 @@ code { .separator { height: 2px; - background: $ui-base-lighter-color; + background: var(--color-border-primary); flex: 1 1 auto; &.completed { - background: $highlight-text-color; + background: var(--color-text-brand); } } @@ -1253,7 +1240,7 @@ code { width: 30px; height: 30px; border-radius: 50%; - border: 2px solid $ui-base-lighter-color; + border: 2px solid var(--color-border-primary); flex: 0 0 auto; display: flex; align-items: center; @@ -1268,7 +1255,7 @@ code { position: absolute; font-size: 14px; font-weight: 500; - color: $secondary-text-color; + color: var(--color-text-primary); padding-top: 10px; text-align: center; width: 100px; @@ -1291,14 +1278,14 @@ code { } .active .circle { - border-color: $highlight-text-color; + border-color: var(--color-text-brand); &::before { content: ''; width: 10px; height: 10px; border-radius: 50%; - background: $highlight-text-color; + background: var(--color-text-brand); position: absolute; left: 50%; top: 50%; @@ -1307,8 +1294,8 @@ code { } .completed .circle { - border-color: $highlight-text-color; - background: $highlight-text-color; + border-color: var(--color-text-brand); + background: var(--color-text-brand); } } @@ -1319,10 +1306,14 @@ code { &__header-input { display: block; border-radius: 8px; - background: var(--surface-variant-background-color); + background: var(--color-bg-secondary); position: relative; cursor: pointer; + &:hover { + background-color: var(--color-bg-brand-softer); + } + img { position: absolute; width: 100%; @@ -1337,12 +1328,12 @@ code { inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); - color: $darker-text-color; + color: var(--color-text-secondary); z-index: 3; } &.selected .icon { - color: $primary-text-color; + color: var(--color-text-primary); transform: none; inset-inline-start: auto; inset-inline-end: 8px; @@ -1351,7 +1342,7 @@ code { } &.invalid img { - outline: 1px solid $error-value-color; + outline: 1px solid var(--color-text-error); outline-offset: -1px; } @@ -1361,14 +1352,10 @@ code { width: 100%; height: 100%; position: absolute; - background: color.change($error-value-color, $alpha: 0.25); + background: var(--color-bg-error-softer); z-index: 2; border-radius: 8px; } - - &:hover { - background-color: var(--surface-variant-active-background-color); - } } &__avatar-input { @@ -1384,7 +1371,7 @@ code { display: flex; align-items: center; gap: 16px; - color: $darker-text-color; + color: var(--color-text-secondary); font-size: 14px; line-height: 20px; @@ -1401,14 +1388,14 @@ code { flex: 1 1 auto; strong { - color: $primary-text-color; + color: var(--color-text-primary); font-weight: 600; } .hint { display: block; font-size: 14px; - color: $darker-text-color; + color: var(--color-text-secondary); } .recommended { @@ -1426,7 +1413,7 @@ code { &__toggle > div { display: flex; - border-inline-start: 1px solid var(--background-border-color); + border-inline-start: 1px solid var(--color-border-primary); padding-inline-start: 16px; } } @@ -1437,19 +1424,19 @@ code { padding: 8px 0; align-items: center; text-decoration: none; - color: $primary-text-color; + color: var(--color-text-primary); margin-bottom: 16px; &__text { flex: 1 1 auto; font-size: 14px; line-height: 20px; - color: $darker-text-color; + color: var(--color-text-secondary); strong { font-weight: 600; display: block; - color: $primary-text-color; + color: var(--color-text-primary); } .icon { diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index 7d060a2681..6af2a182b6 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -1,10 +1,7 @@ @use 'variables' as *; -@use 'functions' as *; .modal-layout { - background: darken($ui-base-color, 4%) - url('data:image/svg+xml;utf8,') - repeat-x bottom fixed; + background: var(--color-bg-brand-softer); display: flex; flex-direction: column; height: 100vh; @@ -38,3 +35,19 @@ margin-top: 0; } } + +.with-zig-zag-decoration { + &::after { + content: ''; + position: absolute; + inset: auto 0 0; + height: 32px; + background-color: var(--color-bg-brand-softer); + + /* Decorative zig-zag pattern at the bottom of the page */ + mask-image: url('data:image/svg+xml;utf8,'); + mask-position: bottom; + mask-repeat: repeat-x; + z-index: -1; + } +} diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index e8f2f5c394..19fb8dd505 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -1,6 +1,5 @@ @use 'sass:color'; @use 'variables' as *; -@use 'functions' as *; .poll { margin-top: 16px; @@ -14,12 +13,12 @@ &__chart { border-radius: 4px; display: block; - background: darken($ui-primary-color, 5%); + background: rgb(from var(--color-text-brand) r g b / 60%); height: 5px; min-width: 1%; &.leading { - background: $ui-highlight-color; + background: var(--color-text-brand); } } @@ -39,12 +38,12 @@ // duplication &::-moz-progress-bar { border-radius: 4px; - background: darken($ui-primary-color, 5%); + background: rgb(from var(--color-text-brand) r g b / 60%); } &::-webkit-progress-value { border-radius: 4px; - background: darken($ui-primary-color, 5%); + background: rgb(from var(--color-text-brand) r g b / 60%); } } @@ -78,16 +77,16 @@ box-sizing: border-box; width: 100%; font-size: 14px; - color: $secondary-text-color; + color: var(--color-text-primary); outline: 0; font-family: inherit; - background: $ui-base-color; - border: 1px solid $darker-text-color; + background: var(--color-bg-primary); + border: 1px solid var(--color-text-secondary); border-radius: 4px; padding: 8px 12px; &:focus { - border-color: $ui-highlight-color; + border-color: var(--color-text-brand); } @media screen and (width <= 600px) { @@ -111,7 +110,7 @@ &__input { display: block; position: relative; - border: 1px solid $ui-primary-color; + border: 1px solid var(--color-text-secondary); box-sizing: border-box; width: 17px; height: 17px; @@ -125,13 +124,13 @@ &:active, &:focus, &:hover { - border-color: lighten($valid-value-color, 15%); + border-color: var(--color-text-success); border-width: 4px; } &.active { - background-color: $valid-value-color; - border-color: $valid-value-color; + background-color: var(--color-bg-success-base); + border-color: var(--color-text-success); } &::-moz-focus-inner { @@ -145,16 +144,16 @@ } &.disabled { - border-color: $dark-text-color; + border-color: var(--color-text-disabled); &.active { - background: $dark-text-color; + background: var(--color-text-disabled); } &:active, &:focus, &:hover { - border-color: $dark-text-color; + border-color: var(--color-text-disabled); border-width: 1px; } } @@ -165,7 +164,7 @@ &:active, &:focus, &:hover { - border-color: $ui-primary-color; + border-color: var(--color-text-primary); border-width: 1px; } } @@ -189,7 +188,7 @@ &__footer { padding-top: 6px; padding-bottom: 5px; - color: $dark-text-color; + color: var(--color-text-tertiary); } &__link { @@ -198,7 +197,7 @@ padding: 0; margin: 0; border: 0; - color: $dark-text-color; + color: var(--color-text-tertiary); text-decoration: underline; font-size: inherit; @@ -208,7 +207,7 @@ &:active, &:focus { - background-color: color.change($dark-text-color, $alpha: 0.1); + background-color: var(--color-bg-secondary); } } @@ -221,13 +220,13 @@ } .muted .poll { - color: $dark-text-color; + color: var(--color-text-tertiary); &__chart { - background: rgba(darken($ui-primary-color, 14%), 0.7); + background: rgb(from var(--color-text-brand) r g b / 40%); &.leading { - background: color.change($ui-highlight-color, $alpha: 0.5); + background: rgb(from var(--color-text-brand) r g b / 60%); } } } diff --git a/app/javascript/styles/mastodon/reset.scss b/app/javascript/styles/mastodon/reset.scss index 2dce637a06..3644b94cdf 100644 --- a/app/javascript/styles/mastodon/reset.scss +++ b/app/javascript/styles/mastodon/reset.scss @@ -1,5 +1,3 @@ -@use 'variables' as *; - /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -55,32 +53,6 @@ table { border-spacing: 0; } -@supports not selector(::-webkit-scrollbar) { - html { - scrollbar-color: $action-button-color var(--background-border-color); - } -} - -.custom-scrollbars { - ::-webkit-scrollbar { - width: 8px; - height: 8px; - } - - ::-webkit-scrollbar-thumb { - background-color: $action-button-color; - border: 2px var(--background-border-color); - border-radius: 12px; - width: 6px; - box-shadow: inset 0 0 0 2px var(--background-border-color); - } - - ::-webkit-scrollbar-track { - background-color: var(--background-border-color); - border-radius: 0px; - } - - ::-webkit-scrollbar-corner { - background: transparent; - } +html:has(body.custom-scrollbars) { + scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary); } diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 6aa94a97bc..48935b75d7 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -1,4 +1,3 @@ -@use 'functions' as *; @use 'variables' as *; body.rtl { @@ -42,12 +41,6 @@ body.rtl { transform: scale(-1, 1); } - .simple_form select { - background: $ui-base-color - url("data:image/svg+xml;utf8,") - no-repeat left 8px center / auto 16px; - } - .dismissable-banner, .warning-banner { &__action { diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index e82f2b551c..8e303aff68 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -1,5 +1,4 @@ @use 'variables' as *; -@use 'functions' as *; .table { width: 100%; @@ -12,13 +11,13 @@ padding: 8px; line-height: 18px; vertical-align: top; - border-bottom: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--color-border-primary); text-align: start; - background: var(--background-color); + background: var(--color-bg-primary); &.critical { font-weight: 700; - color: $gold-star; + color: var(--color-text-warning); } } @@ -33,7 +32,7 @@ & > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th { - background: var(--background-color); + background: var(--color-bg-primary); } & > tbody > tr:last-child > td, @@ -42,11 +41,11 @@ } a { - color: $darker-text-color; + color: var(--color-text-secondary); text-decoration: none; &:hover { - color: $highlight-text-color; + color: var(--color-text-brand); } } @@ -84,30 +83,30 @@ & > tbody > tr > td { padding: 11px 10px; background: transparent; - border: 1px solid var(--background-border-color); - color: $secondary-text-color; + border: 1px solid var(--color-border-primary); + color: var(--color-text-primary); } & > tbody > tr > th { - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 600; } } &.batch-table { & > thead > tr > th { - background: var(--background-color); - border-top: 1px solid var(--background-border-color); - border-bottom: 1px solid var(--background-border-color); + background: var(--color-bg-primary); + border-top: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--color-border-primary); &:first-child { border-radius: 4px 0 0; - border-inline-start: 1px solid var(--background-border-color); + border-inline-start: 1px solid var(--color-border-primary); } &:last-child { border-radius: 0 4px 0 0; - border-inline-end: 1px solid var(--background-border-color); + border-inline-end: 1px solid var(--color-border-primary); } } } @@ -138,12 +137,12 @@ a.table-action-link { display: inline-block; margin-inline-end: 5px; padding: 0 10px; - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 500; white-space: nowrap; &:hover { - color: $highlight-text-color; + color: var(--color-text-brand); } &:first-child { @@ -196,8 +195,8 @@ a.table-action-link { position: sticky; top: 0; z-index: 200; - border: 1px solid var(--background-border-color); - background: var(--background-color); + border: 1px solid var(--color-border-primary); + background: var(--color-bg-primary); border-radius: 4px 4px 0 0; height: 47px; align-items: center; @@ -213,13 +212,13 @@ a.table-action-link { } &__select-all { - background: var(--background-color); + background: var(--color-bg-primary); height: 47px; align-items: center; justify-content: center; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; - color: $secondary-text-color; + color: var(--color-text-primary); display: none; &.active { @@ -248,7 +247,7 @@ a.table-action-link { background: transparent; border: 0; font: inherit; - color: $highlight-text-color; + color: var(--color-text-brand); border-radius: 4px; font-weight: 700; padding: 8px; @@ -256,16 +255,16 @@ a.table-action-link { &:hover, &:focus, &:active { - background: lighten($ui-base-color, 8%); + background: var(--color-bg-secondary); } } } &__form { padding: 16px; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; - background: var(--background-color); + background: var(--color-bg-primary); .fields-row { padding-top: 0; @@ -274,13 +273,13 @@ a.table-action-link { } &__row { - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-top: 0; - background: var(--background-color); + background: var(--color-bg-primary); @media screen and (max-width: $no-gap-breakpoint) { .optional &:first-child { - border-top: 1px solid var(--background-border-color); + border-top: 1px solid var(--color-border-primary); } } @@ -331,7 +330,7 @@ a.table-action-link { &__extra { flex: 0 0 auto; text-align: end; - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 500; } } @@ -362,21 +361,6 @@ a.table-action-link { padding: 0; } - .nothing-here { - border: 1px solid var(--background-border-color); - border-top: 0; - box-shadow: none; - background: var(--background-color); - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 1px solid var(--background-border-color); - } - - &--no-toolbar { - border-top: 1px solid var(--background-border-color); - } - } - @media screen and (width <= 870px) { .accounts-table tbody td.optional { display: none; diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index f3ddf341d2..69c79cd1e6 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -1,6 +1,5 @@ @use 'sass:color'; @use 'variables' as *; -@use 'functions' as *; .directory { &__tag { @@ -12,24 +11,24 @@ display: flex; align-items: center; justify-content: space-between; - border: 1px solid var(--background-border-color); + border: 1px solid var(--color-border-primary); border-radius: 4px; padding: 15px; text-decoration: none; color: inherit; - box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2); + box-shadow: 0 0 15px var(--color-shadow-primary); } & > a { &:hover, &:active, &:focus { - background: $ui-base-color; + background: var(--color-bg-primary); } } &.active > a { - background: $ui-highlight-color; + background: var(--color-bg-brand-base); cursor: default; } @@ -42,7 +41,7 @@ flex: 1 1 auto; font-size: 18px; font-weight: 700; - color: $primary-text-color; + color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -52,7 +51,7 @@ font-weight: 400; font-size: 15px; margin-top: 8px; - color: $darker-text-color; + color: var(--color-text-secondary); } } @@ -60,7 +59,7 @@ &, small, .trends__item__current { - color: $primary-text-color; + color: var(--color-text-primary); } } @@ -70,7 +69,7 @@ } &.active .avatar-stack .account__avatar { - border-color: $ui-highlight-color; + border-color: var(--color-text-brand); } .trends__item__current { @@ -95,7 +94,7 @@ thead th { text-align: center; text-transform: uppercase; - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 700; padding: 10px; @@ -107,7 +106,7 @@ tbody td { padding: 15px 0; vertical-align: middle; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--color-border-primary); } tbody tr:last-child td { @@ -119,11 +118,11 @@ text-align: center; font-size: 15px; font-weight: 500; - color: $primary-text-color; + color: var(--color-text-primary); small { display: block; - color: $darker-text-color; + color: var(--color-text-secondary); font-weight: 400; font-size: 14px; } @@ -132,7 +131,7 @@ tbody td.accounts-table__extra { width: 120px; text-align: end; - color: $darker-text-color; + color: var(--color-text-secondary); padding-inline-end: 16px; a { @@ -142,7 +141,7 @@ &:focus, &:hover, &:active { - color: $highlight-text-color; + color: var(--color-text-brand); } } } @@ -159,15 +158,15 @@ .icon { &.active { - color: $highlight-text-color; + color: var(--color-text-brand); } &.passive { - color: $passive-text-color; + color: var(--color-text-warning); } &.active.passive { - color: $active-passive-text-color; + color: var(--color-text-success); } } diff --git a/app/javascript/styles_new/application.scss b/app/javascript/styles_new/application.scss deleted file mode 100644 index e16e5368e7..0000000000 --- a/app/javascript/styles_new/application.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'mastodon/css_variables'; -@use 'mastodon/variables'; -@use 'common'; - -html { - color-scheme: dark; -} diff --git a/app/javascript/styles_new/contrast.scss b/app/javascript/styles_new/contrast.scss deleted file mode 100644 index af73c88fef..0000000000 --- a/app/javascript/styles_new/contrast.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'mastodon/css_variables'; -@use 'mastodon/variables'; -@use 'common'; -@use 'contrast/diff'; - -html { - color-scheme: dark; -} diff --git a/app/javascript/styles_new/contrast/diff.scss b/app/javascript/styles_new/contrast/diff.scss deleted file mode 100644 index f809c7cdc3..0000000000 --- a/app/javascript/styles_new/contrast/diff.scss +++ /dev/null @@ -1,54 +0,0 @@ -:root { - /* TEXT TOKENS */ - - --color-text-primary: var(--color-grey-50); - --color-text-secondary: var(--color-grey-300); - --color-text-tertiary: var(--color-grey-400); - --color-text-brand: var(--color-indigo-300); - --color-text-status-links: var(--color-text-brand); - - /* BORDER TOKENS */ - - --border-strength-primary: 18%; -} - -.status__content a, -.reply-indicator__content a, -.edit-indicator__content a, -.link-footer a, -.status__content__read-more-button, -.status__content__translate-button { - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - - &.mention { - text-decoration: none; - - span { - text-decoration: underline; - } - - &:hover, - &:focus, - &:active { - span { - text-decoration: none; - } - } - } -} - -.link-button:disabled { - cursor: not-allowed; - - &:hover, - &:focus, - &:active { - text-decoration: none !important; - } -} diff --git a/app/javascript/styles_new/entrypoints/inert.scss b/app/javascript/styles_new/entrypoints/inert.scss deleted file mode 100644 index a60045d7be..0000000000 --- a/app/javascript/styles_new/entrypoints/inert.scss +++ /dev/null @@ -1,14 +0,0 @@ -/* This is needed for the wicg-inert polyfill */ - -[inert] { - pointer-events: none; - cursor: default; -} - -[inert], -[inert] * { - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} diff --git a/app/javascript/styles_new/entrypoints/mailer.scss b/app/javascript/styles_new/entrypoints/mailer.scss deleted file mode 100644 index fcbbd66f4c..0000000000 --- a/app/javascript/styles_new/entrypoints/mailer.scss +++ /dev/null @@ -1,1030 +0,0 @@ -@use '../fonts/inter'; - -body { - accent-color: #6364ff; - overflow-wrap: anywhere; - margin: 0; - background-color: #f3f2f5; - padding: 0; - -webkit-text-size-adjust: none; - text-size-adjust: none; -} - -p, -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0; - background-color: transparent; - padding: 0; - border: none; - font-family: Inter, 'Lucida Grande', sans-serif; -} - -img { - max-width: 100%; - height: auto; - border: none; - text-indent: 0; - vertical-align: middle; - color: inherit; - font-family: inherit; -} - -table { - border: none; -} - -table + p { - margin-top: 16px; -} - -.email { - min-width: 280px; - font-family: Inter, 'Lucida Grande', sans-serif; - overflow-wrap: anywhere; - color: #17063b; - background-color: #f3f2f5; -} - -.email-container { - max-width: 740px; - margin: 0 auto; - width: 100%; -} - -// Outer email card -.email-card-table { - border-collapse: collapse; - width: 100%; -} - -.email-card-td { - overflow: hidden; - box-shadow: 0 4px 16px 0 rgba(23, 6, 59, 4%); - background-color: #fff; -} - -// Inner email card -.email-inner-card-table { - border-collapse: separate; - width: 100%; - border-radius: 12px; -} - -.email-inner-card-td-without-padding, -.email-inner-card-td { - border-radius: 12px; - overflow: hidden; - box-shadow: 0 4px 16px 0 rgba(23, 6, 59, 8%); - background-color: #fff; - border: 1px solid #dfdee3; -} - -.email-inner-card-td { - padding: 24px; -} - -.email-inner-nested-card-td { - border-radius: 12px; - padding: 18px; - overflow: hidden; - background-color: #fff; - border: 1px solid #dfdee3; -} - -// Account -.email-account-banner-table { - background-color: #f3f2f5; - border-top-left-radius: 12px; - border-top-right-radius: 12px; -} - -.email-account-banner-td { - border-top-left-radius: 12px; - border-top-right-radius: 12px; - height: 140px; - vertical-align: bottom; - background-position: center !important; - background-size: cover !important; -} - -.email-account-banner-inner-td { - padding: 24px 24px 0; - mso-padding-alt: 24px; -} - -.email-account-banner-overlap-div { - max-height: 42px; -} - -.email-account-banner-icon-table { - width: auto; - margin: 0; - overflow: hidden; - border-radius: 8px; - border-collapse: separate; - background-color: #fff; - border: 2px solid #fff; - - img { - display: block; - max-width: 100%; - border: none; - border-radius: 6px; - } -} - -.email-account-body-td { - padding: 56px 24px 24px; - mso-padding-alt: 24px; -} - -.email-account-name { - font-size: 16px; - font-weight: 600; - line-height: 24px; - color: #17063b; -} - -.email-account-handle { - font-size: 14px; - line-height: 20px; - color: #746a89; -} - -.email-account-stats-table { - td { - padding-right: 16px; - font-size: 14px; - line-height: 20px; - color: #746a89; - } - - b { - font-weight: 600; - color: #17063b; - } - - span { - white-space: nowrap; - } -} - -// Utility classes -.email-w-full { - table-layout: fixed; - width: 100%; -} - -.email-prose { - p, - ul, - ol { - color: #17063b; - font-size: 14px; - line-height: 20px; - - &:not(:last-child) { - margin-bottom: 16px; - } - - a:not([class]) { - color: #6364ff; - text-decoration: none; - - &:hover { - color: #563acc !important; - } - } - } -} - -.email-dir-rtl { - direction: rtl; - - [dir='rtl'] & { - direction: ltr; - } -} - -.email-dir-ltr { - direction: ltr; -} - -.email-padding-24 { - padding: 24px; -} - -.email-padding-top-24 { - padding-top: 24px; -} - -.email-padding-top-16 { - padding-top: 16px; -} - -.email-padding-top-0 { - padding-top: 0; -} - -.email-border-top { - border-top: 1px solid #dfdee3; -} - -.email-border-bottom { - border-bottom: 1px solid #dfdee3; -} - -.email-desktop-flex { - font-size: 0; - max-width: 740px; - margin-left: auto; - margin-right: auto; - - &.email-dir-rtl > .email-desktop-column { - direction: ltr; - - [dir='rtl'] & { - direction: rtl; - } - } -} - -.email-desktop-column { - display: inline-block; - width: 100%; - max-width: none; - text-align: start; - vertical-align: top; - font-size: 16px; -} - -// Header -.email-header-td { - padding: 16px 32px; - background-color: #1b001f; - background-image: url('../../images/mailer-new/common/header-bg-start.png'); - background-position: left top; - background-repeat: repeat; -} - -.email-header-logo-table { - width: auto; - margin: 0; -} - -.email-header-logo-td { - padding: 16px 0; - font-size: 0; - - img { - color: #fff; - font-size: 16px; - font-weight: bold; - max-height: 40px; - } -} - -.email-header-logo-a { - display: inline-block; - - img { - display: inline-block; - color: #fff; - } -} - -.email-header-logo-div { - max-height: 0; -} - -.email-header-logo-p { - word-break: break-all; - padding-left: 40px; - padding-top: 26px; - font-size: 11px; - line-height: 13px; - color: #8d808f; - text-align: left; -} - -.email-header-logo-span { - display: block; - text-align: right; -} - -.email-header-heading-td { - padding: 16px 0; -} - -.email-header-heading-img-td { - width: 56px; - text-align: left; - vertical-align: top; - - img { - width: 56px; - height: 56px; - border-radius: 12px; - } -} - -.email-header-heading-txt-td { - vertical-align: middle; - padding-left: 16px; - padding-right: 16px; - - h1 { - margin-bottom: 5px; - color: #fff; - font-size: 24px; - line-height: 28px; - font-weight: 600; - } - - p { - color: #a399a5; - font-size: 18px; - line-height: 21.6px; - font-weight: 500; - } - - &:only-child { - padding-left: 0; - padding-right: 0; - } -} - -.email-header-card-table { - width: 100%; - border-collapse: separate; - overflow: hidden; - border-radius: 12px; - background-color: #fff; - border: 2px solid #fff; - box-shadow: 0 4px 16px 0 rgba(23, 6, 59, 8%); -} - -.email-header-card { - position: relative; - max-height: 100px; -} - -.email-header-card-banner-td { - border-radius: 12px 12px 0 0; - width: 236px; - height: 80px; - background-color: #f3f2f5 !important; - background-position: center !important; - background-size: cover !important; -} - -.email-header-card-body-td { - padding: 12px; - - .email-btn-table { - width: 100%; - max-width: 212px; - } -} - -.email-header-card-instance { - margin-bottom: 4px; - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; - color: #17063b; - font-size: 14px; - line-height: 20px; - font-weight: 600; - - &:only-of-type { - margin-bottom: 12px; - } -} - -.email-header-card-description { - margin-bottom: 12px; - color: #746a89; - font-size: 12px; - line-height: 16px; - max-height: 32px; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} - -// To make the design work with images off -// we create an empty div that overlaps with -// the rest of the content with a dark background. -.email-header-after-div { - max-height: 0; -} - -.email-header-after-inside-div { - height: 30px; - background-color: #1b001f; -} - -// Body content -.email-body-td { - background-image: url('../../images/mailer-new/common/header-bg-end.png'); - background-position: left top; - background-repeat: no-repeat; -} - -.email-body-padding-td { - padding: 0 32px 32px; - mso-padding-alt: 32px; -} - -.email-body-columns-td { - border-top: 1px solid #dfdee3; - padding: 32px 24px 8px; -} - -.email-body-huge-padding-td { - padding: 110px 32px 32px; - mso-padding-alt: 32px; -} - -.email-body-padding-td { - & > p { - font-size: 14px; - line-height: 20px; - color: #17063b; - - a { - color: #6364ff; - text-decoration: none; - - &:hover { - color: #563acc !important; - } - } - } -} - -// Texts -.email-h2 { - margin-bottom: 4px; - color: #17063b; - font-size: 18px; - font-weight: 600; - line-height: 28px; -} - -.email-h-sub { - margin-bottom: 16px; - color: #746a89; - font-size: 14px; - line-height: 16px; -} - -.email-p { - margin-bottom: 16px; - color: #746a89; - font-size: 14px; - font-weight: 400; - line-height: 20px; -} - -// Footer -.email-footer-td { - padding: 28px 32px 32px; - text-align: center; -} - -.email-footer-logo-a { - display: inline-block; -} - -.email-footer-p { - color: #9b94ab; - text-align: center; - font-size: 12px; - line-height: 20px; - - a { - color: #9b94ab; - text-decoration: underline; - } - - &:first-child { - margin-bottom: 12px; - } -} - -// Button -.email-btn-table { - margin: 0; - max-width: 100%; - border-collapse: separate; - border-radius: 8px; - background-color: #6364ff; -} - -.email-btn-td { - height: 40px; - text-align: center; - mso-padding-alt: 0 35px; - word-break: normal; -} - -.email-btn-a { - display: block; - border-radius: 8px; - padding-left: 35px; - padding-right: 35px; - padding-top: 10px; - padding-bottom: 10px; - text-align: center; - font-family: Inter, 'Lucida Grande', sans-serif; - font-size: 14px; - font-weight: 600; - line-height: 20px; - color: #fff; - text-decoration: none; - transition: background-color 0.3s ease-in-out; -} - -// Status -.email-status-header-img { - vertical-align: top; - width: 48px; - - img { - width: 48px; - height: 48px; - border-radius: 8px; - overflow: hidden; - } -} - -.email-quote-header-img { - width: 34px; - - img { - width: 34px; - height: 34px; - border-radius: 8px; - overflow: hidden; - } -} - -.email-status-header-text { - padding-left: 16px; - padding-right: 16px; - vertical-align: middle; -} - -.email-quote-header-text { - padding-left: 14px; - padding-right: 14px; - vertical-align: middle; -} - -.email-status-header-name { - font-size: 16px; - font-weight: 600; - line-height: 24px; - color: #17063b; -} - -.email-status-header-handle { - font-size: 14px; - line-height: 20px; - color: #746a89; -} - -.email-quote-header-name { - font-size: 14px; - font-weight: 600; - line-height: 18px; - color: #17063b; -} - -.email-quote-header-handle { - font-size: 13px; - line-height: 18px; - color: #746a89; -} - -.email-status-content { - padding-top: 24px; -} - -.email-status-spoiler { - color: #746a89; - font-style: italic; - margin-bottom: 8px; -} - -.email-status-prose { - .quote-inline { - display: none; - } - - p { - font-size: 14px; - line-height: 20px; - margin-bottom: 20px; - color: #17063b; - white-space: pre-wrap; - unicode-bidi: plaintext; - } - - a { - color: #6364ff; - text-decoration: none; - - &:hover { - color: #563acc !important; - } - } - - .invisible { - font-size: 0; - line-height: 0; - display: inline-block; - width: 0; - height: 0; - position: absolute; - } - - .ellipsis { - &::after { - content: '…'; - } - } -} - -.email-status-media { - margin-top: 16px; - font-size: 14px; - line-height: 20px; - color: #17063b; - - img { - border-radius: 8px; - } - - a { - color: #6364ff; - text-decoration: none; - - &:hover { - color: #563acc !important; - } - } -} - -.email-status-footer { - margin-top: 16px; - font-size: 12px; - line-height: 16px; - color: #746a89; - - a { - color: #746a89; - } - - a:hover { - color: #746a89 !important; - text-decoration: underline !important; - } -} - -// Purple frame for emphasis -.email-frame-table { - background-color: #efefff; - border-radius: 8px; -} - -.email-frame-td { - padding: 16px; -} - -.email-frame-wrapper-td { - padding-bottom: 16px; -} - -.email-frame-td > p { - text-align: center; - font-size: 16px; - line-height: 24px; -} - -// Checklist item -.email-checklist-wrapper-td { - padding: 4px 0; -} - -.email-checklist-table { - border-radius: 12px; - border-width: 1px; - border-style: solid; - border-color: #efefff; - background-color: #fff; -} - -.email-checklist-checked { - border-color: #c4e6d7; - background-color: #eaf6f1; -} - -.email-checklist-td { - padding: 16px 16px 6px; -} - -.email-checklist-icons-td { - width: 84px; - vertical-align: top; -} - -.email-checklist-icons-checkbox-td { - width: 20px; - vertical-align: middle; - - img { - max-width: 100%; - width: 20px; - } -} - -.email-checklist-icons-step-td { - width: 64px; - text-align: center; - vertical-align: middle; - - img { - max-width: 100%; - width: 40px; - } -} - -.email-checklist-text-td { - h3 { - margin: 0 0 4px; - color: #17063b; - font-size: 14px; - font-weight: 600; - line-height: 16.8px; - - .email-checklist-checked & { - color: #746a89; - text-decoration: line-through; - } - } - - p { - margin: 0 0 12px; - color: #746a89; - font-size: 14px; - line-height: 16.8px; - } - - .email-btn-table { - width: 100px; - } - - .email-btn-td { - mso-padding-alt: 10px; - } - - .email-btn-a { - padding-left: 10px; - padding-right: 10px; - } - - div + div { - margin-inline-start: auto; - margin-bottom: 12px; - } -} - -// Welcome email -.email-welcome-apps-btns { - font-size: 12px; - line-height: 44px; -} - -.email-column-td { - padding: 0 8px; - vertical-align: top; -} - -.email-link-with-arrow { - color: #6364ff; - font-size: 14px; - font-weight: 600; - line-height: 16.8px; - - &:hover { - color: #563acc !important; - } - - span { - font-size: 12px; - font-weight: 400; - } -} - -.email-column-action-td { - padding: 24px 0; - color: #6364ff; - font-size: 14px; - font-weight: 600; - line-height: 16.8px; - text-align: center; -} - -// Follow and hashtags -.email-mini-wrapper-td { - padding: 4px 0; - - table { - table-layout: fixed; - } -} - -.email-mini-td { - border-radius: 12px; - border: 1px solid #e8e6eb; - background-color: #fff; - padding: 15px 16px; -} - -.email-mini-follow-img-td { - width: 40px; - vertical-align: top; - - img { - border-radius: 8px; - } -} - -.email-mini-follow-text-td { - padding-left: 8px; - padding-right: 16px; - vertical-align: top; - - h3 { - color: #17063b; - font-size: 14px; - font-weight: 600; - line-height: 20px; - } - - p { - color: #746a89; - font-size: 12px; - font-weight: 400; - line-height: 16px; - } -} - -.email-mini-follow-btn-td { - width: 68px; - vertical-align: top; - - .email-btn-table { - width: 100%; - } - - .email-btn-td { - mso-padding-alt: 10px; - } - - .email-btn-a { - padding-left: 10px; - padding-right: 10px; - } -} - -.email-mini-hashtag-td { - height: 40px; - - td { - vertical-align: middle; - } - - h3 { - color: #17063b; - font-size: 14px; - font-weight: 600; - line-height: 20px; - } - - p { - color: #746a89; - font-size: 12px; - font-weight: 400; - line-height: 16px; - word-break: break-all; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.email-mini-hashtag-img-td { - width: 40px; - height: 20px; - white-space: nowrap; - text-indent: -2px; - font-size: 0; - - & + td { - padding-left: 8px; - } -} - -.email-mini-hashtag-img-span { - display: inline-block; - max-width: 12px; - font-size: 12px; - - img { - width: 16px; - height: 16px; - border-radius: 50%; - max-width: none; - border: 2px solid #fff; - vertical-align: middle; - } -} - -// Extra content on light purple background -.email-extra-wave { - height: 42px; - background-image: url('../../images/mailer-new/welcome/purple-extra-soft-wave.png'); - background-position: bottom center; - background-repeat: no-repeat; -} - -.email-extra-td { - padding: 32px 32px 24px; - background-color: #f0f0ff; - background-image: url('../../images/mailer-new/welcome/purple-extra-soft-spacer.png'); // Using an image to maintain the color even in forced dark modes - - .email-column-td { - padding-top: 8px; - padding-bottom: 8px; - } -} - -// Feature card -.email-feature-wrapper-td { - padding: 8px 0; -} - -.email-feature-td { - padding: 24px; - background-color: #fff; - border: 1px solid #e8e6eb; - border-radius: 12px; -} - -// Responsive -/* stylelint-disable-next-line media-feature-range-notation -- Basic media queries have better support across email clients. */ -@media only screen and (min-width: 740px) { - .email-desktop-p-8 { - padding: 32px !important; - } - - .email-desktop-rounded-16px { - border-radius: 16px !important; - } - - .email-header-td { - border-radius: 16px 16px 0 0 !important; - } - - .email-desktop-flex { - display: flex; - } - - .email-header-left { - padding-right: 32px; - } - - .email-header-right { - width: 240px; - margin-inline-start: auto; - } - - .email-desktop-column { - max-width: 346px !important; - } - - .email-desktop-text-right { - text-align: right; - } -} diff --git a/app/javascript/styles_new/fonts/inter.scss b/app/javascript/styles_new/fonts/inter.scss deleted file mode 100644 index 816fc75b85..0000000000 --- a/app/javascript/styles_new/fonts/inter.scss +++ /dev/null @@ -1,8 +0,0 @@ -@font-face { - font-family: Inter; - src: url('../../fonts/inter/inter-variable-font-slnt-wght.woff2') - format('woff2-variations'); - font-weight: 100 900; - font-style: normal; - mso-generic-font-family: swiss; -} diff --git a/app/javascript/styles_new/fonts/roboto-mono.scss b/app/javascript/styles_new/fonts/roboto-mono.scss deleted file mode 100644 index d51cb01c91..0000000000 --- a/app/javascript/styles_new/fonts/roboto-mono.scss +++ /dev/null @@ -1,13 +0,0 @@ -@font-face { - font-family: mastodon-font-monospace; - src: - local('Roboto Mono'), - url('@/fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'), - url('@/fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'), - url('@/fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'), - url('@/fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') - format('svg'); - font-weight: 400; - font-display: swap; - font-style: normal; -} diff --git a/app/javascript/styles_new/fonts/roboto.scss b/app/javascript/styles_new/fonts/roboto.scss deleted file mode 100644 index ea4b842b0c..0000000000 --- a/app/javascript/styles_new/fonts/roboto.scss +++ /dev/null @@ -1,55 +0,0 @@ -@font-face { - font-family: mastodon-font-sans-serif; - src: - local('Roboto Italic'), - url('@/fonts/roboto/roboto-italic-webfont.woff2') format('woff2'), - url('@/fonts/roboto/roboto-italic-webfont.woff') format('woff'), - url('@/fonts/roboto/roboto-italic-webfont.ttf') format('truetype'), - url('@/fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') - format('svg'); - font-weight: normal; - font-display: swap; - font-style: italic; -} - -@font-face { - font-family: mastodon-font-sans-serif; - src: - local('Roboto Bold'), - url('@/fonts/roboto/roboto-bold-webfont.woff2') format('woff2'), - url('@/fonts/roboto/roboto-bold-webfont.woff') format('woff'), - url('@/fonts/roboto/roboto-bold-webfont.ttf') format('truetype'), - url('@/fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') - format('svg'); - font-weight: bold; - font-display: swap; - font-style: normal; -} - -@font-face { - font-family: mastodon-font-sans-serif; - src: - local('Roboto Medium'), - url('@/fonts/roboto/roboto-medium-webfont.woff2') format('woff2'), - url('@/fonts/roboto/roboto-medium-webfont.woff') format('woff'), - url('@/fonts/roboto/roboto-medium-webfont.ttf') format('truetype'), - url('@/fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') - format('svg'); - font-weight: 500; - font-display: swap; - font-style: normal; -} - -@font-face { - font-family: mastodon-font-sans-serif; - src: - local('Roboto'), - url('@/fonts/roboto/roboto-regular-webfont.woff2') format('woff2'), - url('@/fonts/roboto/roboto-regular-webfont.woff') format('woff'), - url('@/fonts/roboto/roboto-regular-webfont.ttf') format('truetype'), - url('@/fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') - format('svg'); - font-weight: normal; - font-display: swap; - font-style: normal; -} diff --git a/app/javascript/styles_new/mastodon-light.scss b/app/javascript/styles_new/mastodon-light.scss deleted file mode 100644 index 494efdbbde..0000000000 --- a/app/javascript/styles_new/mastodon-light.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'mastodon-light/css_variables'; -@use 'mastodon/variables' with ( - $emojis-requiring-inversion: 'chains' -); -@use 'common'; - -html { - color-scheme: light; -} diff --git a/app/javascript/styles_new/mastodon-light/css_variables.scss b/app/javascript/styles_new/mastodon-light/css_variables.scss deleted file mode 100644 index 70745ec071..0000000000 --- a/app/javascript/styles_new/mastodon-light/css_variables.scss +++ /dev/null @@ -1,214 +0,0 @@ -@use '../mastodon/theme_utils' as utils; - -:root { - --color-black: #000; - --color-grey-950: #181821; - --color-grey-800: #292938; - --color-grey-700: #444664; - --color-grey-600: #545778; - --color-grey-500: #696d91; - --color-grey-400: #8b8dac; - --color-grey-300: #b4b6cb; - --color-grey-200: #d8d9e3; - --color-grey-100: #f0f0f5; - --color-grey-50: #f0f1ff; - --color-white: #fff; - --color-indigo-600: #6147e6; - --color-indigo-400: #8886ff; - --color-indigo-300: #a5abfd; - --color-indigo-200: #c8cdfe; - --color-indigo-100: #e0e3ff; - --color-indigo-50: #f0f1ff; - --color-red-500: #ff637e; - --color-red-600: #ec003f; - --color-yellow-400: #ffb900; - --color-yellow-600: #e17100; - --color-green-400: #05df72; - --color-green-600: #00a63e; - - /* TEXT TOKENS */ - - --color-text-primary: var(--color-grey-950); - --color-text-secondary: var(--color-grey-600); - --color-text-tertiary: var(--color-grey-500); - --color-text-on-inverted: var(--color-white); - --color-text-brand: var(--color-indigo-600); - --color-text-brand-soft: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-brand) - ); - --color-text-on-brand-base: var(--color-white); - --color-text-error: var(--color-red-600); - --color-text-on-error-base: var(--color-white); - --color-text-warning: var(--color-yellow-600); - --color-text-on-warning-base: var(--color-white); - --color-text-success: var(--color-green-600); - --color-text-on-success-base: var(--color-white); - --color-text-disabled: var(--color-grey-300); - --color-text-on-disabled: var(--color-grey-200); - --color-text-bookmark-highlight: var(--color-text-error); - --color-text-favourite-highlight: var(--color-text-warning); - --color-text-on-media: var(--color-white); - --color-text-status-links: var(--color-text-brand); - - /* BACKGROUND TOKENS */ - - // Neutrals - --color-bg-primary: var(--color-white); - --overlay-strength-secondary: 5%; - --color-bg-secondary-base: var(--color-grey-600); - --color-bg-secondary: #{color-mix( - in oklab, - var(--color-bg-primary), - var(--color-bg-secondary-base) var(--overlay-strength-secondary) - )}; - --color-bg-secondary-solid: #{color-mix( - in srgb, - var(--color-bg-primary), - var(--color-bg-secondary-base) var(--overlay-strength-secondary) - )}; - --color-bg-tertiary: #{color-mix( - in oklab, - var(--color-bg-primary), - var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary)) - )}; - - // Utility - --color-bg-ambient: var(--color-bg-primary); - --color-bg-elevated: var(--color-bg-primary); - --color-bg-inverted: var(--color-grey-950); - --color-bg-media-base: var(--color-black); - --color-bg-media-strength: 65%; - --color-bg-media: #{utils.css-alpha( - var(--color-bg-media-base), - var(--color-bg-media-strength) - )}; - --color-bg-overlay: var(--color-bg-primary); - --color-bg-disabled: var(--color-grey-400); - - // Brand - --overlay-strength-brand: 8%; - --color-bg-brand-base: var(--color-indigo-600); - --color-bg-brand-base-hover: color-mix( - in oklab, - var(--color-bg-brand-base), - black var(--overlay-strength-brand) - ); - --color-bg-brand-soft: #{utils.css-alpha( - var(--color-bg-brand-base), - calc(var(--overlay-strength-brand) * 1.5) - )}; - --color-bg-brand-softer: #{utils.css-alpha( - var(--color-bg-brand-base), - var(--overlay-strength-brand) - )}; - - // Error - --overlay-strength-error: 12%; - --color-bg-error-base: var(--color-red-600); - --color-bg-error-base-hover: color-mix( - in oklab, - var(--color-bg-error-base), - black var(--overlay-strength-error) - ); - --color-bg-error-soft: #{utils.css-alpha( - var(--color-bg-error-base), - calc(var(--overlay-strength-error) * 1.5) - )}; - --color-bg-error-softer: #{utils.css-alpha( - var(--color-bg-error-base), - var(--overlay-strength-error) - )}; - - // Warning - --overlay-strength-warning: 10%; - --color-bg-warning-base: var(--color-yellow-600); - --color-bg-warning-base-hover: color-mix( - in oklab, - var(--color-bg-warning-base), - black var(--overlay-strength-warning) - ); - --color-bg-warning-soft: #{utils.css-alpha( - var(--color-bg-warning-base), - calc(var(--overlay-strength-warning) * 1.5) - )}; - --color-bg-warning-softer: #{utils.css-alpha( - var(--color-bg-warning-base), - var(--overlay-strength-warning) - )}; - - // Success - --overlay-strength-success: 15%; - --color-bg-success-base: var(--color-green-600); - --color-bg-success-base-hover: color-mix( - in oklab, - var(--color-bg-success-base), - black var(--overlay-strength-success) - ); - --color-bg-success-soft: #{utils.css-alpha( - var(--color-bg-success-base), - calc(var(--overlay-strength-success) * 1.5) - )}; - --color-bg-success-softer: #{utils.css-alpha( - var(--color-bg-success-base), - var(--overlay-strength-success) - )}; - - /* BORDER TOKENS */ - - --border-strength-primary: 15%; - --color-border-primary: color-mix( - in oklab, - var(--color-bg-primary), - var(--color-grey-950) var(--border-strength-primary) - ); - --color-border-media: rgb(252 248 255 / 15%); - --color-border-on-bg-secondary: var(--color-grey-200); - --color-border-on-bg-brand-softer: var(--color-indigo-200); - --color-border-on-bg-error-softer: #{utils.css-alpha( - var(--color-text-error), - 50% - )}; - --color-border-on-bg-warning-softer: #{utils.css-alpha( - var(--color-text-warning), - 50% - )}; - --color-border-on-bg-success-softer: #{utils.css-alpha( - var(--color-text-success), - 50% - )}; - --color-border-on-bg-inverted: var(--color-border-primary); - - /* SHADOW TOKENS */ - - --shadow-strength-primary: 30%; - --color-shadow-primary: #{utils.css-alpha( - var(--color-black), - var(--shadow-strength-primary) - )}; - --dropdown-shadow: - 0 20px 25px -5px var(--color-shadow-primary), - 0 8px 10px -6px var(--color-shadow-primary); - --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary)); - - /* GRAPHS/CHARTS TOKENS */ - - --color-graph-primary-stroke: var(--color-text-brand); - --color-graph-primary-fill: var(--color-bg-brand-softer); - --color-graph-warning-stroke: var(--color-text-warning); - --color-graph-warning-fill: var(--color-bg-warning-softer); - --color-graph-disabled-stroke: var(--color-text-disabled); - --color-graph-disabled-fill: var(--color-bg-disabled); - - /* LEGACY TOKENS */ - - --rich-text-container-color: rgb(255 216 231 / 100%); - --rich-text-text-color: rgb(114 47 83 / 100%); - --rich-text-decorations-color: rgb(255 175 212 / 100%); - - /* MISCELLANEOUS */ - - --outline-focus-default: 2px solid var(--color-text-brand); - --avatar-border-radius: 8px; -} diff --git a/app/javascript/styles_new/mastodon/_mixins.scss b/app/javascript/styles_new/mastodon/_mixins.scss deleted file mode 100644 index effbe82c3d..0000000000 --- a/app/javascript/styles_new/mastodon/_mixins.scss +++ /dev/null @@ -1,45 +0,0 @@ -@mixin search-input { - outline: 0; - box-sizing: border-box; - width: 100%; - box-shadow: none; - font-family: inherit; - background: var(--color-bg-secondary); - color: var(--color-text-primary); - border-radius: 4px; - border: 1px solid var(--color-border-on-bg-secondary); - font-size: 17px; - line-height: normal; - margin: 0; -} - -@mixin search-popout { - background: var(--color-bg-elevated); - border-radius: 4px; - padding: 10px 14px; - padding-bottom: 14px; - margin-top: 10px; - color: var(--color-text-secondary); - box-shadow: 2px 4px 15px var(--color-shadow-primary); - - h4 { - text-transform: uppercase; - color: var(--color-text-secondary); - font-size: 13px; - font-weight: 500; - margin-bottom: 10px; - } - - li { - padding: 4px 0; - } - - ul { - margin-bottom: 10px; - } - - em { - font-weight: 500; - color: var(--color-text-primary); - } -} diff --git a/app/javascript/styles_new/mastodon/_variables.scss b/app/javascript/styles_new/mastodon/_variables.scss deleted file mode 100644 index a948dbc41c..0000000000 --- a/app/javascript/styles_new/mastodon/_variables.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Keep this filter a SCSS variable rather than -// a CSS Custom Property due to this Safari bug: -// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245 -$backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); - -// Language codes that uses CJK fonts -$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; - -// Variables for components -$media-modal-media-max-width: 100%; - -// put margins on top and bottom of image to avoid the screen covered by image. -$media-modal-media-max-height: 80%; - -$no-gap-breakpoint: 1175px; -$mobile-menu-breakpoint: 760px; -$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; - -$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; diff --git a/app/javascript/styles_new/mastodon/about.scss b/app/javascript/styles_new/mastodon/about.scss deleted file mode 100644 index 0bb2c8c9eb..0000000000 --- a/app/javascript/styles_new/mastodon/about.scss +++ /dev/null @@ -1,130 +0,0 @@ -@use 'variables' as *; - -$maximum-width: 1235px; -$fluid-breakpoint: $maximum-width + 20px; - -.container { - box-sizing: border-box; - max-width: $maximum-width; - margin: 0 auto; - position: relative; - - @media screen and (max-width: $fluid-breakpoint) { - width: 100%; - padding: 0 10px; - } -} - -.brand { - position: relative; - text-decoration: none; -} - -.rules-list { - font-size: 15px; - line-height: 22px; - counter-reset: list-counter; - - li { - position: relative; - border-bottom: 1px solid var(--color-border-primary); - padding: 1em 1.75em; - padding-inline-start: 3em; - font-weight: 500; - counter-increment: list-counter; - min-height: 4ch; - - button { - background: transparent; - border: 0; - padding: 0; - margin: 0; - text-align: start; - font: inherit; - - &:hover, - &:focus, - &:active { - background: transparent; - } - - &[aria-expanded='false'] .rules-list__hint { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - @supports (-webkit-line-clamp: 2) { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - white-space: normal; - } - } - } - - &::before { - content: counter(list-counter); - position: absolute; - inset-inline-start: 0; - top: 1em; - background: var(--color-bg-brand-base); - color: var(--color-text-on-brand-base); - border-radius: 50%; - width: 4ch; - height: 4ch; - font-weight: 500; - display: flex; - justify-content: center; - align-items: center; - } - - &:last-child { - border-bottom: 0; - } - } - - &__text { - color: var(--color-text-primary); - } - - &__hint { - font-size: 14px; - font-weight: 400; - color: var(--color-text-secondary); - } -} - -.rules-languages { - display: flex; - gap: 1rem; - align-items: center; - position: relative; - - > label { - font-size: 14px; - font-weight: 600; - color: var(--color-text-primary); - } - - select { - appearance: none; - box-sizing: border-box; - font-size: 14px; - color: var(--color-text-primary); - display: block; - width: 100%; - outline: 0; - font-family: inherit; - resize: vertical; - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - padding-inline-start: 10px; - padding-inline-end: 30px; - height: 41px; - - @media screen and (width <= 600px) { - font-size: 16px; - } - } -} diff --git a/app/javascript/styles_new/mastodon/accessibility.scss b/app/javascript/styles_new/mastodon/accessibility.scss deleted file mode 100644 index 7cd2d4eae3..0000000000 --- a/app/javascript/styles_new/mastodon/accessibility.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use 'variables' as *; - -%emoji-color-inversion { - filter: invert(1); -} - -.emojione { - @each $emoji in $emojis-requiring-inversion { - &[title=':#{$emoji}:'] { - @extend %emoji-color-inversion; - } - } -} diff --git a/app/javascript/styles_new/mastodon/accounts.scss b/app/javascript/styles_new/mastodon/accounts.scss deleted file mode 100644 index d1c35e3f9e..0000000000 --- a/app/javascript/styles_new/mastodon/accounts.scss +++ /dev/null @@ -1,411 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; - -.card { - & > a { - display: block; - text-decoration: none; - color: inherit; - overflow: hidden; - border-radius: 4px; - - &:hover, - &:active, - &:focus { - .card__bar { - background: var(--color-bg-brand-softer); - } - } - } - - &__img { - height: 130px; - position: relative; - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-bottom: none; - - img { - display: block; - width: 100%; - height: 100%; - margin: 0; - object-fit: cover; - } - - @media screen and (width <= 600px) { - height: 200px; - } - } - - &__bar { - position: relative; - padding: 15px; - display: flex; - justify-content: flex-start; - align-items: center; - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - border-top: none; - - .avatar { - flex: 0 0 auto; - width: 48px; - height: 48px; - padding-top: 2px; - - img { - width: 100%; - height: 100%; - display: block; - margin: 0; - border-radius: 4px; - background: var(--color-bg-secondary); - object-fit: cover; - } - } - - .display-name { - margin-inline-start: 15px; - text-align: start; - - svg[data-hidden] { - display: none; - } - - strong { - font-size: 15px; - color: var(--color-text-primary); - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - } - - span { - display: block; - font-size: 14px; - color: var(--color-text-secondary); - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - } - } - } -} - -.pagination { - padding: 30px 0; - text-align: center; - overflow: hidden; - - a, - .current, - .newer, - .older, - .page, - .gap { - font-size: 14px; - color: var(--color-text-primary); - font-weight: 500; - display: inline-block; - padding: 6px 10px; - text-decoration: none; - } - - .current { - color: var(--color-bg-primary); - background: var(--color-text-primary); - border-radius: 100px; - cursor: default; - margin: 0 10px; - } - - .gap { - cursor: default; - } - - .older, - .newer { - text-transform: uppercase; - color: var(--color-text-primary); - } - - .older { - float: left; - padding-inline-start: 0; - } - - .newer { - float: right; - padding-inline-end: 0; - } - - .disabled { - cursor: default; - color: var(--color-text-disabled); - } - - @media screen and (width <= 700px) { - padding: 30px 20px; - - .page { - display: none; - } - - .newer, - .older { - display: inline-block; - } - } -} - -.nothing-here { - color: var(--color-text-secondary); - background: var(--color-bg-primary); - font-size: 14px; - font-weight: 500; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - cursor: default; - border-radius: 4px; - padding: 20px; - min-height: 30vh; - border: 1px solid var(--color-border-primary); - - @media screen and (min-width: ($no-gap-breakpoint - 1)) { - border-top: 0; - } - - &--no-toolbar { - border-top: 1px solid var(--color-border-primary); - } - - &--under-tabs { - border-radius: 0 0 4px 4px; - } - - &--flexible { - box-sizing: border-box; - min-height: 100%; - } -} - -.information-badge, -.simple_form .overridden, -.simple_form .recommended, -.simple_form .not_recommended { - display: inline-block; - padding: 4px 6px; - cursor: default; - border-radius: 4px; - font-size: 12px; - line-height: 12px; - font-weight: 500; - color: var(--color-text-primary); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.information-badge, -.simple_form .overridden, -.simple_form .recommended, -.simple_form .not_recommended { - background-color: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); -} - -.information-badge { - &.superapp { - color: var(--color-text-success); - background-color: var(--color-bg-success-softer); - border-color: var(--color-border-on-bg-success-softer); - } -} - -.account-role { - display: inline-flex; - padding: 4px; - padding-inline-end: 8px; - border: 1px solid var(--color-text-brand); - color: var(--color-text-brand); - font-weight: 500; - font-size: 12px; - letter-spacing: 0.5px; - line-height: 16px; - gap: 4px; - border-radius: 6px; - align-items: center; - - svg { - width: auto; - height: 15px; - opacity: 0.85; - fill: currentColor; - } - - &__domain { - font-weight: 400; - opacity: 0.75; - letter-spacing: 0; - } -} - -.simple_form .not_recommended { - color: var(--color-text-error); - background-color: var(--color-bg-error-softer); - border-color: var(--color-border-on-bg-error-softer); -} - -.account__header__fields { - max-width: 100vw; - padding: 0; - margin: 15px -15px -15px; - border: 0 none; - border-top: 1px solid var(--color-border-primary); - border-bottom: 1px solid var(--color-border-primary); - font-size: 14px; - line-height: 20px; - - dl { - display: flex; - border-bottom: 1px solid var(--color-border-primary); - } - - dt, - dd { - box-sizing: border-box; - padding: 14px; - text-align: center; - max-height: 48px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - dt { - font-weight: 500; - width: 120px; - flex: 0 0 auto; - color: var(--color-text-primary); - background: var(--color-bg-secondary); - } - - dd { - flex: 1 1 auto; - color: var(--color-text-secondary); - } - - a { - color: var(--color-text-brand); - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - - .verified { - border: 1px solid var(--color-border-on-bg-success-softer); - background: var(--color-bg-success-softer); - - a { - color: var(--color-text-success); - font-weight: 500; - } - - &__mark { - color: var(--color-text-success); - } - } - - dl:last-child { - border-bottom: 0; - } -} - -.directory__tag .trends__item__current { - width: auto; -} - -.pending-account { - &__header { - color: var(--color-text-secondary); - - a { - color: var(--color-text-primary); - text-decoration: none; - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } - - strong { - color: var(--color-text-primary); - font-weight: 700; - } - - .warning-hint { - font-weight: normal !important; - } - } - - &__body { - margin-top: 10px; - } -} - -.batch-table__row--muted { - color: var(--color-text-tertiary); -} - -.batch-table__row--muted .pending-account__header, -.batch-table__row--muted .accounts-table, -.batch-table__row--muted .name-tag { - &, - a, - strong { - color: var(--color-text-tertiary); - } -} - -.batch-table__row--muted .name-tag .avatar { - opacity: 0.5; -} - -.batch-table__row--muted .accounts-table { - tbody td.accounts-table__extra, - &__count, - &__count small { - color: var(--color-text-tertiary); - } -} - -.batch-table__row--attention { - color: var(--color-text-warning); -} - -.batch-table__row--attention .pending-account__header, -.batch-table__row--attention .accounts-table, -.batch-table__row--attention .name-tag { - &, - a, - strong { - color: var(--color-text-warning); - } -} - -.batch-table__row--attention .accounts-table { - tbody td.accounts-table__extra, - &__count, - &__count small { - color: var(--color-text-warning); - } -} diff --git a/app/javascript/styles_new/mastodon/admin.scss b/app/javascript/styles_new/mastodon/admin.scss deleted file mode 100644 index eaa91936b1..0000000000 --- a/app/javascript/styles_new/mastodon/admin.scss +++ /dev/null @@ -1,2177 +0,0 @@ -@use 'sass:color'; -@use 'sass:math'; -@use 'variables' as *; - -$no-columns-breakpoint: 890px; -$sidebar-width: 300px; -$content-width: 840px; - -.admin-wrapper { - display: flex; - justify-content: center; - box-sizing: border-box; - width: 100%; - min-height: 100vh; - min-height: 100dvh; - padding: env(safe-area-inset-top) env(safe-area-inset-right) - env(safe-area-inset-bottom) env(safe-area-inset-left); - - .icon { - width: 16px; - height: 16px; - vertical-align: top; - margin: 0 2px; - } - - .sidebar-wrapper { - min-height: 100vh; - min-height: 100dvh; - overflow: hidden; - pointer-events: none; - flex: 1 1 auto; - - &__inner { - display: flex; - justify-content: flex-end; - height: 100%; - } - } - - .sidebar { - width: $sidebar-width; - padding: 0; - pointer-events: auto; - - &__toggle { - display: none; - background: var(--color-bg-primary); - border-bottom: 1px solid var(--color-border-primary); - align-items: center; - - &__logo { - flex: 1 1 auto; - - a { - display: block; - padding: 15px; - } - } - - &__icon { - display: block; - color: var(--color-text-secondary); - text-decoration: none; - flex: 0 0 auto; - font-size: 18px; - padding: 10px; - margin: 5px 10px; - border-radius: 4px; - - &:focus { - background: var(--color-bg-brand-softer); - } - - .material-close { - display: none; - } - - &.active { - .material-close { - display: block; - } - - .material-menu { - display: none; - } - } - } - } - - .logo { - display: block; - margin: 40px auto; - width: 100px; - height: 100px; - } - - .logo--wordmark { - display: inherit; - margin: inherit; - width: inherit; - height: 25px; - } - - @media screen and (max-width: $no-columns-breakpoint) { - & > a:first-child { - display: none; - } - } - - ul { - list-style: none; - overflow: hidden; - margin-bottom: 20px; - - @media screen and (max-width: $no-columns-breakpoint) { - margin-bottom: 0; - } - - a { - font-size: 14px; - display: flex; - align-items: center; - gap: 6px; - padding: 15px; - color: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - text-decoration: none; - transition: all 200ms linear; - transition-property: color, background-color; - - &:hover { - color: var(--color-text-primary); - transition: all 100ms linear; - transition-property: color, background-color; - } - } - - ul { - margin: 0; - - a { - border: 0; - padding: 15px 35px; - } - } - - .warning a { - color: var(--color-text-warning); - font-weight: 700; - } - - .simple-navigation-active-leaf a { - color: var(--color-text-brand); - border-bottom: 0; - } - } - } - - .content-wrapper { - box-sizing: border-box; - width: 100%; - max-width: $content-width; - flex: 1 1 auto; - } - - @media screen and (max-width: ($content-width + $sidebar-width)) { - .sidebar-wrapper--empty { - display: none; - } - - .sidebar-wrapper { - width: $sidebar-width; - flex: 0 0 auto; - } - } - - @media screen and (max-width: $no-columns-breakpoint) { - .sidebar-wrapper { - width: 100%; - } - } - - .content { - padding-top: 55px; - padding-bottom: 20px; - padding-inline-start: 25px; - padding-inline-end: 15px; - - @media screen and (max-width: $no-columns-breakpoint) { - max-width: none; - padding: 15px; - padding-top: 30px; - } - - &__heading { - margin-bottom: 45px; - - &__row { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - margin-top: -15px; - margin-inline-end: -15px; - - & > * { - margin-top: 15px; - margin-inline-end: 15px; - } - } - - &__tabs { - margin-top: 30px; - width: 100%; - - & > div { - display: flex; - flex-wrap: wrap; - gap: 5px; - } - - a { - font-size: 14px; - display: inline-flex; - align-items: center; - padding: 7px 10px; - border-radius: 4px; - color: var(--color-text-secondary); - text-decoration: none; - font-weight: 500; - gap: 5px; - white-space: nowrap; - - @media screen and (max-width: $mobile-breakpoint) { - flex: 1 0 50%; - } - - &:hover, - &:focus, - &:active { - background: var(--color-bg-secondary); - } - - &.selected { - font-weight: 700; - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - } - } - } - - &__actions { - display: inline-flex; - flex-flow: wrap; - gap: 5px; - align-items: center; - - .time-period { - padding: 0 10px; - } - - .back-link { - margin-bottom: 0; - } - } - - h2 small { - font-size: 12px; - display: block; - font-weight: 500; - color: var(--color-text-secondary); - line-height: 18px; - } - - @media screen and (max-width: $no-columns-breakpoint) { - border-bottom: 0; - padding-bottom: 0; - } - } - - h2 { - color: var(--color-text-primary); - font-size: 24px; - line-height: 36px; - font-weight: 700; - } - - h3 { - color: var(--color-text-primary); - font-size: 20px; - line-height: 28px; - font-weight: 400; - margin-bottom: 30px; - } - - h4 { - text-transform: uppercase; - font-size: 13px; - font-weight: 700; - color: var(--color-text-secondary); - padding-top: 24px; - margin-bottom: 8px; - border-top: 1px solid var(--color-border-primary); - } - - h6 { - font-size: 16px; - color: var(--color-text-primary); - line-height: 28px; - font-weight: 500; - } - - .fields-group h6 { - color: var(--color-text-primary); - font-weight: 500; - } - - .directory__tag h4 { - font-size: 18px; - font-weight: 700; - color: var(--color-text-primary); - text-transform: none; - padding-top: 0; - margin-bottom: 0; - border-top: 0; - - .comment { - display: block; - overflow: hidden; - text-overflow: ellipsis; - margin-top: 4px; - - &.private-comment { - display: block; - color: var(--color-text-secondary); - } - - &.public-comment { - display: block; - color: var(--color-text-primary); - } - } - } - - & > p { - font-size: 14px; - line-height: 21px; - color: var(--color-text-primary); - margin-bottom: 20px; - - strong { - color: var(--color-text-primary); - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - } - - hr { - width: 100%; - height: 0; - border: 0; - border-bottom: 1px solid var(--color-border-primary); - margin: 20px 0; - - &.spacer { - height: 1px; - border: 0; - } - } - } - - @media screen and (max-width: $no-columns-breakpoint) { - display: block; - - .sidebar-wrapper { - min-height: 0; - } - - .sidebar { - width: 100%; - padding: 0; - height: auto; - - &__toggle { - display: flex; - } - - & > ul { - display: none; - - &.visible { - display: block; - position: fixed; - z-index: 10; - width: 100%; - height: calc(100% - 56px); - inset-inline-start: 0; - bottom: 0; - overflow-y: auto; - background: var(--color-bg-primary); - } - } - - ul a, - ul ul a { - font-size: 16px; - border-radius: 0; - transition: none; - - &:hover { - transition: none; - } - } - - ul ul { - border-radius: 0; - } - - ul .simple-navigation-active-leaf a { - border-bottom-color: var(--color-text-brand); - } - } - } -} - -hr.spacer { - width: 100%; - border: 0; - margin: 20px 0; - height: 1px; -} - -body, -.admin-wrapper .content { - .muted-hint { - color: var(--color-text-secondary); - - a { - color: var(--color-text-brand); - } - } - - .positive-hint, - .negative-hint, - .neutral-hint { - a { - color: inherit; - text-decoration: underline; - - &:focus, - &:hover, - &:active { - text-decoration: none; - } - } - } - - .positive-hint { - color: var(--color-text-success); - font-weight: 500; - } - - .negative-hint { - color: var(--color-text-error); - font-weight: 500; - } - - .neutral-hint { - color: var(--color-text-primary); - font-weight: 500; - } - - .warning-hint { - color: var(--color-text-warning); - font-weight: 500; - } -} - -kbd { - font-family: Courier, monospace; - background-color: var(--color-bg-brand-softer); - padding: 4px; - padding-bottom: 2px; - border-radius: 5px; -} - -.filters { - display: flex; - flex-wrap: wrap; - gap: 40px; - - .filter-subset { - flex: 0 0 auto; - margin-bottom: 20px; - - &:last-child { - margin-bottom: 30px; - } - - ul { - margin-top: 5px; - list-style: none; - - li { - display: inline-block; - margin-inline-end: 5px; - } - } - - & > div { - display: flex; - gap: 5px; - } - - strong { - font-weight: 500; - text-transform: uppercase; - font-size: 12px; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - &--with-select strong { - display: block; - margin-bottom: 10px; - } - - a { - display: inline-block; - color: var(--color-text-secondary); - text-decoration: none; - text-transform: uppercase; - font-size: 12px; - font-weight: 500; - border-bottom: 2px solid var(--color-bg-secondary); - - &:hover { - color: var(--color-text-primary); - border-bottom: 2px solid var(--color-bg-tertiary); - } - - &.selected { - color: var(--color-text-brand); - border-bottom: 2px solid var(--color-text-brand); - } - } - } -} - -.report-accounts { - display: flex; - flex-wrap: wrap; - margin-bottom: 20px; -} - -.report-accounts__item { - display: flex; - flex: 250px; - flex-direction: column; - margin: 0 5px; - - & > strong { - display: block; - margin: 0 0 10px -5px; - font-weight: 500; - font-size: 14px; - line-height: 18px; - color: var(--color-text-primary); - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - .account-card { - flex: 1 1 auto; - } -} - -.report-status, -.account-status { - display: flex; - margin-bottom: 10px; -} - -.report-status__actions, -.account-status__actions { - flex: 0 0 auto; - display: flex; - flex-direction: column; - - .icon-button { - font-size: 24px; - width: 24px; - text-align: center; - margin-bottom: 10px; - } -} - -.simple_form.new_report_note, -.simple_form.new_account_moderation_note { - max-width: 100%; -} - -.batch-form-box { - display: flex; - flex-wrap: wrap; - margin-bottom: 5px; - - #form_status_batch_action { - margin: 0 5px 5px 0; - font-size: 14px; - } - - input.button { - margin: 0 5px 5px 0; - } -} - -.back-link { - margin-bottom: 10px; - font-size: 14px; - - a { - color: var(--color-text-brand); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.special-action-button, -.back-link { - text-align: end; - flex: 1 1 auto; -} - -.action-buttons { - display: flex; - overflow: hidden; - justify-content: space-between; -} - -.spacer { - flex: 1 1 auto; -} - -.log-entry { - display: block; - line-height: 20px; - padding: 15px; - padding-inline-start: 15px * 2 + 40px; - background: var(--color-bg-primary); - border-right: 1px solid var(--color-border-primary); - border-left: 1px solid var(--color-border-primary); - border-bottom: 1px solid var(--color-border-primary); - position: relative; - text-decoration: none; - color: var(--color-text-secondary); - font-size: 14px; - - &:first-child { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - border-top: 1px solid var(--color-border-primary); - } - - &:last-child { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - border-bottom: 1px solid var(--color-border-primary); - } - - &__avatar { - position: absolute; - inset-inline-start: 15px; - top: 15px; - - .avatar { - border-radius: var(--avatar-border-radius); - width: 40px; - height: 40px; - } - } - - &__title { - overflow-wrap: break-word; - } - - &__timestamp { - color: var(--color-text-tertiary); - } - - a, - .username, - .target { - color: var(--color-text-primary); - text-decoration: none; - font-weight: 500; - } - - a { - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } -} - -.strike-entry { - display: block; - line-height: 20px; - padding: 15px; - padding-inline-start: 15px * 2 + 40px; - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - position: relative; - text-decoration: none; - color: var(--color-text-secondary); - font-size: 14px; - margin-bottom: 15px; - - &__avatar { - position: absolute; - inset-inline-start: 15px; - top: 15px; - - .avatar { - border-radius: var(--avatar-border-radius); - width: 40px; - height: 40px; - } - } - - &__title { - overflow-wrap: break-word; - } - - &__timestamp { - color: var(--color-text-secondary); - } - - &:hover, - &:focus, - &:active { - background: var(--color-bg-primary); - } -} - -a.name-tag, -.name-tag, -a.inline-name-tag, -.inline-name-tag { - text-decoration: none; - color: var(--color-text-primary); - - &:hover { - color: var(--color-text-brand); - } - - .username { - font-weight: 500; - } - - &.suspended { - .username { - text-decoration: line-through; - color: var(--color-text-error); - } - - .avatar { - filter: grayscale(100%); - opacity: 0.8; - } - } -} - -a.name-tag, -.name-tag { - display: inline-flex; - align-items: center; - vertical-align: top; - - .avatar { - display: block; - margin: 0; - margin-inline-end: 5px; - border-radius: 50%; - } - - &.suspended { - .avatar { - filter: grayscale(100%); - opacity: 0.8; - } - } -} - -.speech-bubble { - margin-bottom: 20px; - border-inline-start: 4px solid var(--color-text-brand); - - &.positive { - border-color: var(--color-text-success); - } - - &.negative { - border-color: var(--color-text-error); - } - - &.warning { - border-color: var(--color-text-warning); - } - - &__bubble { - padding: 16px; - padding-inline-start: 14px; - font-size: 15px; - line-height: 20px; - border-radius: 4px 4px 4px 0; - position: relative; - font-weight: 500; - - a { - color: var(--color-text-secondary); - } - } - - &__owner { - padding: 8px; - padding-inline-start: 12px; - } - - time { - color: var(--color-text-tertiary); - } -} - -.report-card { - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - margin-bottom: 20px; - - &__profile { - display: flex; - justify-content: space-between; - align-items: center; - padding: 15px; - - .account { - padding: 0; - border: none; - - &__avatar-wrapper { - margin-inline-start: 0; - } - } - - &__stats { - flex: 0 0 auto; - font-weight: 500; - color: var(--color-text-secondary); - text-transform: uppercase; - text-align: end; - - a { - color: inherit; - text-decoration: none; - - &:focus, - &:hover, - &:active { - color: var(--color-text-brand); - } - } - - .red { - color: var(--color-text-error); - } - } - } - - &__summary { - &__item { - display: flex; - justify-content: flex-start; - border-top: 1px solid var(--color-border-primary); - - &__reported-by, - &__assigned { - padding: 15px; - flex: 0 0 auto; - box-sizing: border-box; - width: 150px; - color: var(--color-text-secondary); - - &, - .username { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - - &__content { - flex: 1 1 auto; - max-width: calc(100% - 300px); - - &__icon { - margin-inline-end: 4px; - font-weight: 500; - } - } - - &__content a { - display: block; - box-sizing: border-box; - width: 100%; - padding: 15px; - text-decoration: none; - color: var(--color-text-secondary); - - &:hover { - color: var(--color-text-brand); - } - } - } - } -} - -.one-line { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.ellipsized-ip { - display: inline-block; - max-width: 120px; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; -} - -.admin-account-bio { - display: flex; - flex-wrap: wrap; - margin: 0 -5px; - margin-top: 20px; - - > div { - box-sizing: border-box; - padding: 0 5px; - margin-bottom: 10px; - flex: 1 0 50%; - max-width: 100%; - } - - .account__header__fields, - .account__header__content { - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - height: 100%; - } - - .account__header__fields { - margin: 0; - border: 1px solid var(--color-border-primary); - - a { - color: var(--color-text-brand); - } - - dl:first-child .verified { - border-radius: 0 4px 0 0; - } - - .verified a { - color: var(--color-text-success); - } - } - - .account__header__content { - box-sizing: border-box; - padding: 20px; - color: var(--color-text-primary); - } -} - -.center-text { - text-align: center; -} - -.applications-list__item, -.filters-list__item { - padding: 15px 0; - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - margin-top: 15px; -} - -.applications-list { - .icon { - vertical-align: middle; - } -} - -.announcements-list, -.filters-list { - border: 1px solid var(--color-border-primary); - border-radius: 4px; - border-bottom: none; - - &__item { - padding: 15px 0; - border-bottom: 1px solid var(--color-border-primary); - - &__title { - padding: 0 15px; - display: block; - font-weight: 500; - font-size: 18px; - line-height: 1.5; - color: var(--color-text-primary); - text-decoration: none; - margin-bottom: 10px; - - &:hover { - color: var(--color-text-brand); - } - - .account-role { - vertical-align: middle; - } - } - - .icon { - vertical-align: middle; - } - - a.announcements-list__item__title { - &:hover, - &:focus, - &:active { - color: var(--color-text-primary); - } - } - - &__action-bar { - display: flex; - justify-content: space-between; - align-items: center; - gap: 8px; - - &:not(.no-wrap) { - flex-wrap: wrap; - } - } - - &__meta { - padding: 0 15px; - color: var(--color-text-tertiary); - - a { - color: inherit; - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - } - - &__actions { - margin-inline-start: auto; - } - - &__permissions { - margin-top: 10px; - } - } -} - -.filters-list__item { - &__title { - display: flex; - justify-content: space-between; - margin-bottom: 0; - overflow-wrap: anywhere; - } - - &__permissions { - margin-top: 0; - margin-bottom: 10px; - } - - .expiration { - font-size: 13px; - } - - &.expired { - .expiration { - color: var(--color-text-error); - } - - .permissions-list__item__icon { - color: var(--color-text-secondary); - } - } -} - -.rule-actions { - display: flex; - flex-direction: column; - - a.table-action-link { - padding-inline-start: 0; - } -} - -.dashboard__counters.admin-account-counters { - margin-top: 10px; -} - -.account-badges { - margin: -2px 0; -} - -.retention { - overflow: auto; - - > h4 { - position: sticky; - inset-inline-start: 0; - } - - &__table { - &__number { - color: var(--color-bg-primary); - padding: 10px; - } - - &__date { - white-space: nowrap; - padding: 10px 0; - text-align: start; - min-width: 120px; - - &.retention__table__average { - font-weight: 700; - } - } - - &__size { - text-align: center; - padding: 10px; - } - - &__label { - font-weight: 700; - color: var(--color-text-secondary); - } - - &__box { - box-sizing: border-box; - width: 52px; - margin: 1px; - padding: 10px; - font-weight: 500; - color: var(--color-text-primary); - background: var(--color-bg-primary); - - @for $i from 0 through 10 { - &--#{10 * $i} { - @if $i > 5 { - color: var(--color-text-on-brand-base); - } - - background-color: rgb( - from var(--color-bg-brand-base) r g b / #{math.div(max(1, $i), 10)} - ); - } - } - } - } -} - -.sparkline { - display: block; - text-decoration: none; - background: var(--color-bg-primary); - border-radius: 4px; - border: 1px solid var(--color-border-primary); - padding: 0; - position: relative; - padding-bottom: 55px + 20px; - overflow: hidden; - - &__value { - display: flex; - line-height: 33px; - align-items: flex-end; - padding: 20px; - padding-bottom: 10px; - - &__total { - display: block; - margin-inline-end: 10px; - font-weight: 500; - font-size: 28px; - color: var(--color-text-primary); - } - - &__change { - display: block; - font-weight: 500; - font-size: 18px; - color: var(--color-text-secondary); - margin-bottom: -3px; - - &.positive { - color: var(--color-text-success); - } - - &.negative { - color: var(--color-text-error); - } - } - } - - &__label { - padding: 0 20px; - padding-bottom: 10px; - text-transform: uppercase; - color: var(--color-text-secondary); - font-weight: 500; - } - - &__graph { - position: absolute; - bottom: 0; - width: 100%; - - svg { - display: block; - margin: 0; - } - - path:first-child { - fill: var(--color-graph-primary-fill) !important; - fill-opacity: 1 !important; - } - - path:last-child { - stroke: var(--color-graph-primary-stroke) !important; - fill: none !important; - } - } -} - -a.sparkline { - &:hover, - &:focus, - &:active { - background: var(--color-bg-brand-softer); - } -} - -.skeleton { - background-color: var(--color-bg-primary); - background-image: linear-gradient( - 90deg, - var(--color-bg-primary), - var(--color-bg-secondary), - var(--color-bg-primary) - ); - background-size: 200px 100%; - background-repeat: no-repeat; - border-radius: 4px; - display: inline-block; - line-height: 1; - width: 100%; - animation: skeleton 1.2s ease-in-out infinite; - - .reduce-motion & { - animation: none; - } -} - -@keyframes skeleton { - 0% { - background-position: -200px 0; - } - - 100% { - background-position: calc(200px + 100%) 0; - } -} - -.dimension { - table { - width: 100%; - } - - &__item { - border-bottom: 1px solid var(--color-border-primary); - - &__key { - font-weight: 500; - padding: 11px 10px; - } - - &__value { - text-align: end; - color: var(--color-text-secondary); - padding: 11px 10px; - } - - &__indicator { - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--color-text-brand); - margin-inline-end: 10px; - - @for $i from 0 through 10 { - &--#{10 * $i} { - background-color: rgb( - from var(--color-text-brand) r g b / #{math.div(max(1, $i), 10)} - ); - } - } - } - - &:last-child { - border-bottom: 0; - } - - &.negative { - color: var(--color-text-error); - font-weight: 700; - - .dimension__item__value { - color: var(--color-text-error); - } - } - } -} - -.report-reason-selector { - border-radius: 4px; - background: var(--color-bg-primary); - margin-bottom: 20px; - - &__category { - cursor: pointer; - border-bottom: 1px solid var(--color-border-primary); - - &__label { - padding: 15px; - display: flex; - gap: 8px; - align-items: center; - } - - &__rules { - margin-inline-start: 30px; - } - } - - &__rule { - cursor: pointer; - padding: 15px; - display: flex; - gap: 8px; - align-items: center; - } -} - -.report-header { - display: grid; - gap: 15px; - grid-template-columns: minmax(0, 1fr) 300px; - - &__details { - &__item { - border-bottom: 1px solid var(--color-border-primary); - padding: 15px 0; - - &:last-child { - border-bottom: 0; - } - - &__header { - font-weight: 600; - padding: 4px 0; - } - } - - &--horizontal { - display: grid; - grid-auto-columns: minmax(0, 1fr); - grid-auto-flow: column; - - .report-header__details__item { - border-bottom: 0; - } - } - } - - @media screen and (width <= 930px) { - grid-template-columns: minmax(0, 1fr); - } -} - -.account-card { - border-radius: 4px; - border: 1px solid var(--color-border-primary); - position: relative; - - &__warning-badge { - position: absolute; - padding: 4px 10px; - top: 10px; - inset-inline-start: 10px; - border-radius: 4px; - background: - url('@/images/warning-stripes.svg') repeat-y left, - url('@/images/warning-stripes.svg') repeat-y right, - var(--color-bg-primary); - } - - &__permalink { - color: inherit; - text-decoration: none; - } - - &__header { - padding: 4px; - border-radius: 4px; - height: 128px; - - img { - display: block; - margin: 0; - width: 100%; - height: 100%; - object-fit: cover; - background: var(--color-bg-secondary); - } - } - - &__title { - margin-top: -(15px + 8px); - display: flex; - align-items: flex-end; - - &__avatar { - padding: 14px; - - img, - .account__avatar { - display: block; - margin: 0; - width: 56px; - height: 56px; - background-color: var(--color-bg-secondary); - border-radius: 8px; - border: 1px solid var(--color-border-media); - } - } - - .display-name { - color: var(--color-text-secondary); - padding-bottom: 15px; - font-size: 15px; - line-height: 20px; - - bdi { - display: block; - color: var(--color-text-primary); - font-weight: 700; - } - } - } - - &__bio { - padding: 0 15px; - margin: 8px 0; - overflow: hidden; - text-overflow: ellipsis; - overflow-wrap: break-word; - max-height: 21px * 2; - position: relative; - font-size: 15px; - line-height: 21px; - - &::after { - display: block; - content: ''; - width: 50px; - height: 21px; - position: absolute; - bottom: 0; - inset-inline-end: 15px; - pointer-events: none; - } - - a { - color: var(--color-text-primary); - text-decoration: none; - unicode-bidi: isolate; - - &:hover { - text-decoration: underline; - } - - &.mention { - &:hover { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - } - } - - &__actions { - display: flex; - justify-content: space-between; - align-items: center; - - &__button { - flex-shrink: 1; - padding: 0 15px; - overflow: hidden; - - .button { - min-width: 0; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - max-width: 100%; - } - } - } - - &__counters { - flex: 1 1 auto; - display: grid; - grid-auto-columns: minmax(0, 1fr); - grid-auto-flow: column; - max-width: 340px; - min-width: 65px * 3; - - &__item { - padding: 15px 0; - text-align: center; - color: var(--color-text-primary); - font-weight: 600; - font-size: 15px; - line-height: 21px; - - small { - display: block; - color: var(--color-text-secondary); - font-weight: 400; - font-size: 13px; - line-height: 18px; - } - } - } -} - -.report-notes { - margin-bottom: 20px; - - &__item { - background: var(--color-bg-primary); - position: relative; - padding: 15px; - padding-inline-start: 15px * 2 + 40px; - border: 1px solid var(--color-border-primary); - - &:first-child { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - } - - &:last-child { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - - &__avatar { - position: absolute; - inset-inline-start: 15px; - top: 15px; - border-radius: var(--avatar-border-radius); - width: 40px; - height: 40px; - } - - &__header { - color: var(--color-text-secondary); - font-size: 15px; - line-height: 20px; - margin-bottom: 4px; - - .username { - color: var(--color-text-primary); - font-weight: 500; - margin-inline-end: 5px; - - a { - color: inherit; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - - a.timestamp { - color: var(--color-text-secondary); - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - - time { - margin-inline-start: 5px; - vertical-align: baseline; - } - } - - &__content { - font-size: 15px; - line-height: 20px; - overflow-wrap: break-word; - font-weight: 400; - color: var(--color-text-primary); - - p { - margin-bottom: 20px; - white-space: pre-wrap; - unicode-bidi: plaintext; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: var(--color-text-brand); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - - &__actions { - position: absolute; - top: 15px; - inset-inline-end: 15px; - text-align: end; - } - } -} - -.report-actions { - &__item { - display: flex; - align-items: center; - line-height: 18px; - - &:last-child { - border-bottom: 0; - } - - &__button { - box-sizing: border-box; - flex: 0 0 auto; - width: 200px; - padding: 15px; - padding-inline-end: 0; - - .button { - display: block; - width: 100%; - } - } - - &__description { - padding: 15px; - font-size: 14px; - color: var(--color-text-tertiary); - } - } - - @media screen and (width <= 800px) { - border: 0; - - &__item { - flex-direction: column; - border: 0; - - &__button { - width: 100%; - padding: 15px 0; - } - - &__description { - padding: 0; - padding-bottom: 15px; - } - } - } -} - -.section-skip-link { - float: right; - - a { - color: var(--color-text-brand); - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } -} - -.strike-card { - padding: 15px; - font-size: 15px; - line-height: 20px; - overflow-wrap: break-word; - font-weight: 400; - color: var(--color-text-primary); - box-sizing: border-box; - min-height: 100%; - border: 1px solid var(--color-border-primary); - border-radius: 4px; - - a { - color: var(--color-text-brand); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - - p { - margin-bottom: 20px; - unicode-bidi: plaintext; - - &:last-child { - margin-bottom: 0; - } - - strong { - font-weight: 700; - } - } - - &__rules { - list-style: disc; - padding-inline-start: 15px; - margin-bottom: 20px; - color: var(--color-text-secondary); - - &:last-child { - margin-bottom: 0; - } - - &__text { - color: var(--color-text-primary); - } - } - - &__statuses-list { - border-radius: 4px; - border: 1px solid var(--color-border-primary); - font-size: 13px; - line-height: 18px; - overflow: hidden; - - &__item { - padding: 16px; - border-bottom: 1px solid var(--color-border-primary); - - &:last-child { - border-bottom: 0; - } - - &__meta { - color: var(--color-text-secondary); - } - - a { - color: inherit; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - } -} - -.availability-indicator { - display: flex; - align-items: center; - margin-bottom: 30px; - font-size: 14px; - line-height: 21px; - - &__hint { - padding: 0 15px; - } - - &__graphic { - display: flex; - margin: 0 -2px; - - &__item { - display: block; - flex: 0 0 auto; - width: 4px; - height: 21px; - background: var(--color-bg-secondary); - margin: 0 2px; - border-radius: 2px; - - &.positive { - background: var(--color-bg-success-base); - } - - &.negative { - background: var(--color-bg-error-base); - } - } - } -} - -.history { - counter-reset: step 0; - font-size: 15px; - line-height: 22px; - - > li { - counter-increment: step 1; - padding-inline-start: 2.5rem; - padding-bottom: 8px; - position: relative; - margin-bottom: 8px; - - &::before { - position: absolute; - content: counter(step); - font-size: 0.625rem; - font-weight: 500; - inset-inline-start: 0; - display: flex; - justify-content: center; - align-items: center; - width: calc(1.375rem + 1px); - height: calc(1.375rem + 1px); - background: var(--color-bg-primary); - border: 1px solid var(--color-text-brand); - color: var(--color-text-brand); - border-radius: 8px; - } - - &::after { - position: absolute; - content: ''; - width: 1px; - background: var(--color-text-brand); - bottom: 0; - top: calc(1.875rem + 1px); - inset-inline-start: 0.6875rem; - } - - &:last-child { - margin-bottom: 0; - - &::after { - display: none; - } - } - } - - &__entry { - h5 { - font-weight: 500; - color: var(--color-text-primary); - line-height: 25px; - margin-bottom: 16px; - } - - .status { - border: 1px solid var(--color-border-primary); - background: var(--color-bg-secondary); - border-radius: 4px; - } - } -} - -.status__card { - padding: 15px; - border-radius: 4px; - font-size: 15px; - line-height: 20px; - overflow-wrap: break-word; - font-weight: 400; - border: 1px solid var(--color-border-primary); - color: var(--color-text-primary); - box-sizing: border-box; - min-height: 100%; - - &.status--has-quote { - .quote-inline { - display: none; - } - } - - .status__quote & { - // Remove the border from the .status__card within .status__quote - border: none; - - .display-name__account { - line-height: inherit; - } - - .status__avatar, - .status__avatar .account__avatar { - width: 32px; - height: 32px; - } - } - - .status__prepend { - padding: 0 0 15px; - gap: 4px; - align-items: center; - } - - > details { - summary { - display: block; - box-sizing: border-box; - color: var(--color-text-primary); - background: var(--color-bg-brand-softer); - border: 1px solid var(--color-border-on-bg-brand-softer); - border-radius: 8px; - padding: 8px 13px; - position: relative; - font-size: 15px; - line-height: 22px; - cursor: pointer; - - &::after { - content: attr(data-show, 'Show more'); - margin-top: 8px; - display: block; - font-size: 15px; - line-height: 20px; - color: var(--color-text-brand); - cursor: pointer; - border: 0; - background: transparent; - padding: 0; - text-decoration: none; - font-weight: 500; - } - - &:hover, - &:focus-visible { - &::after { - text-decoration: underline !important; - } - } - } - - &[open] summary { - margin-bottom: 16px; - - &::after { - content: attr(data-hide, 'Hide post'); - } - } - } - - .preview-card { - position: relative; - max-width: 566px; - - .status-card__image { - &--video { - aspect-ratio: 16 / 9; - } - - &--large { - aspect-ratio: 1.91 / 1; - } - - aspect-ratio: 1; - } - - .spoiler-button__overlay__label { - outline: 1px solid var(--color-border-media); - } - - .hide-button { - // Toggled to appear when the preview-card is unblurred: - display: none; - position: absolute; - top: 5px; - right: 5px; - color: var(--color-text-on-media); - background: var(--color-bg-media); - backdrop-filter: $backdrop-blur-filter; - outline: 1px solid var(--color-border-media); - border: 0; - padding: 3px 12px; - border-radius: 99px; - font-size: 14px; - font-weight: 700; - line-height: 20px; - - &:hover, - &:focus { - background-color: rgb(from var(--color-bg-media-base) r g b / 90%); - } - } - - &.preview-card--image-visible { - .hide-button { - display: block; - } - - .spoiler-button__overlay, - .status-card__image-preview { - display: none; - } - } - } - - .detailed-status__meta { - .detailed-status__application, - .detailed-status__datetime, - .detailed-status__link { - color: inherit; - } - } -} - -.admin { - &__terms-of-service { - &__container { - background: var(--color-bg-tertiary); - border-radius: 8px; - border: 1px solid var(--color-border-primary); - overflow: hidden; - - &__header { - padding: 16px; - font-size: 14px; - line-height: 20px; - color: var(--color-text-primary); - display: flex; - align-items: center; - gap: 12px; - } - - &__body { - background: var(--color-bg-primary); - padding: 16px; - overflow-y: scroll; - height: 30vh; - } - } - - &__history { - & > li { - border-bottom: 1px solid var(--color-border-primary); - - &:last-child { - border-bottom: 0; - } - } - - &__item { - padding: 16px 0; - padding-bottom: 8px; - - h5 { - font-size: 14px; - line-height: 20px; - font-weight: 600; - margin-bottom: 16px; - - a { - color: inherit; - text-decoration: none; - } - } - } - } - } -} - -.dot-indicator { - display: inline-flex; - align-items: center; - gap: 8px; - font-weight: 500; - - &__indicator { - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--color-text-tertiary); - } - - &.success { - color: var(--color-text-success); - - .dot-indicator__indicator { - background-color: var(--color-bg-success-base); - } - } -} diff --git a/app/javascript/styles_new/mastodon/annual_reports.scss b/app/javascript/styles_new/mastodon/annual_reports.scss deleted file mode 100644 index a9b7e0ddee..0000000000 --- a/app/javascript/styles_new/mastodon/annual_reports.scss +++ /dev/null @@ -1,342 +0,0 @@ -@use 'variables' as *; - -:root { - --indigo-1: #17063b; - --indigo-2: #2f0c7a; - --indigo-3: #562cfc; - --indigo-5: #858afa; - --indigo-6: #cccfff; - --lime: #baff3b; - --goldenrod-2: #ffc954; -} - -.annual-report { - flex: 0 0 auto; - background: var(--indigo-1); - padding: 24px; - - &__header { - margin-bottom: 16px; - - h1 { - font-size: 25px; - font-weight: 600; - line-height: 30px; - color: var(--lime); - margin-bottom: 8px; - } - - p { - font-size: 16px; - font-weight: 600; - line-height: 20px; - color: var(--indigo-6); - } - } - - &__bento { - display: grid; - gap: 8px; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax( - 0, - auto - ); - - &__box { - padding: 16px; - border-radius: 8px; - background: var(--indigo-2); - color: var(--indigo-5); - } - } - - &__summary { - &__most-boosted-post { - grid-column: span 2; - grid-row: span 2; - padding: 0; - - .status__content, - .content-warning { - color: var(--indigo-6); - } - - .detailed-status { - border: 0; - } - - .content-warning { - border: 0; - background: var(--indigo-1); - - .link-button { - color: var(--indigo-5); - } - } - - .detailed-status__meta__line { - border-bottom-color: var(--indigo-3); - } - - .detailed-status__meta { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .detailed-status__meta, - .poll__footer, - .poll__link, - .detailed-status .logo, - .detailed-status__display-name { - color: var(--indigo-5); - } - - .detailed-status__meta .animated-number, - .detailed-status__display-name strong { - color: var(--indigo-6); - } - - .poll__chart { - background-color: var(--indigo-3); - - &.leading { - background-color: var(--goldenrod-2); - } - } - - .status-card, - .hashtag-bar { - display: none; - } - } - - &__followers { - grid-column: span 1; - text-align: center; - position: relative; - overflow: hidden; - padding-block-start: 24px; - padding-block-end: 24px; - - --sparkline-gradient-top: rgba(86, 44, 252, 50%); - --sparkline-gradient-bottom: rgba(86, 44, 252, 0%); - - &__foreground { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 8px; - position: relative; - z-index: 1; - } - - &__number { - font-size: 31px; - font-weight: 600; - line-height: 37px; - color: var(--lime); - } - - &__label { - font-size: 14px; - font-weight: 600; - line-height: 17px; - color: var(--indigo-6); - } - - &__footnote { - display: block; - font-weight: 400; - opacity: 0.5; - } - - svg { - position: absolute; - bottom: 0; - inset-inline-end: 0; - pointer-events: none; - z-index: 0; - height: 70%; - width: auto; - - path:first-child { - fill: url('#gradient') !important; - fill-opacity: 1 !important; - } - - path:last-child { - stroke: var(--color-graph-primary-stroke) !important; - fill: none !important; - } - } - } - - &__archetype { - grid-column: span 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - gap: 8px; - padding: 0; - - img { - display: block; - width: 100%; - height: auto; - border-radius: 8px; - } - - &__label { - padding: 16px; - padding-bottom: 8px; - font-size: 14px; - line-height: 17px; - font-weight: 600; - color: var(--lime); - } - } - - &__most-used-app { - grid-column: span 1; - text-align: center; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 8px; - box-sizing: border-box; - - &__label { - font-size: 14px; - line-height: 17px; - font-weight: 600; - color: var(--indigo-6); - } - - &__icon { - font-size: 14px; - line-height: 17px; - font-weight: 600; - color: var(--goldenrod-2); - } - } - - &__percentile { - grid-row: span 2; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - text-align: center; - text-wrap: balance; - padding: 16px 8px; - - &__label { - font-size: 14px; - line-height: 17px; - } - - &__number { - font-size: 54px; - font-weight: 600; - line-height: 73px; - color: var(--goldenrod-2); - } - - &__footnote { - font-size: 11px; - line-height: 14px; - opacity: 0.5; - } - } - - &__new-posts { - grid-column: span 2; - text-align: center; - position: relative; - overflow: hidden; - - &__label { - font-size: 20px; - font-weight: 600; - line-height: 24px; - color: var(--indigo-6); - z-index: 1; - position: relative; - } - - &__number { - font-size: 76px; - font-weight: 600; - line-height: 91px; - color: var(--goldenrod-2); - z-index: 1; - position: relative; - } - - svg { - position: absolute; - inset-inline-start: -7px; - top: -4px; - z-index: 0; - } - } - - &__most-used-hashtag { - grid-column: span 2; - text-align: center; - overflow: hidden; - - &__hashtag { - font-size: 42px; - font-weight: 600; - line-height: 58px; - color: var(--indigo-6); - margin-inline-start: -100%; - margin-inline-end: -100%; - } - - &__label { - font-size: 14px; - font-weight: 600; - line-height: 17px; - } - } - } -} - -.annual-report-modal { - max-width: 600px; - background: var(--indigo-1); - border-radius: 16px; - display: flex; - flex-direction: column; - overflow-y: auto; - - .loading-indicator .circular-progress { - color: var(--lime); - } - - @media screen and (max-width: $no-columns-breakpoint) { - border-bottom: 0; - border-radius: 16px 16px 0 0; - } -} - -.notification-group--annual-report { - .notification-group__icon { - color: var(--lime); - } - - .notification-group__main .link-button { - font-weight: 500; - color: var(--lime); - } -} diff --git a/app/javascript/styles_new/mastodon/basics.scss b/app/javascript/styles_new/mastodon/basics.scss deleted file mode 100644 index 6298409d15..0000000000 --- a/app/javascript/styles_new/mastodon/basics.scss +++ /dev/null @@ -1,300 +0,0 @@ -@use 'variables' as *; - -html.has-modal { - &, - body { - touch-action: none; - overscroll-behavior: none; - -webkit-overflow-scrolling: auto; - scrollbar-gutter: stable; - } - - body { - overflow: hidden !important; - } -} - -body { - font-family: $font-sans-serif, sans-serif; - background: var(--color-bg-ambient); - font-size: 13px; - line-height: 18px; - font-weight: 400; - color: var(--color-text-primary); - text-rendering: optimizelegibility; - - // Disable kerning for Japanese text to preserve monospaced alignment for readability - &:not(:lang(ja)) { - font-feature-settings: 'kern'; - } - - text-size-adjust: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0%); - -webkit-tap-highlight-color: transparent; - - &.system-font { - // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+) - // -apple-system => Safari <11 specific - // BlinkMacSystemFont => Chrome <56 on macOS specific - // Segoe UI => Windows 7/8/10 - // Oxygen => KDE - // Ubuntu => Unity/Ubuntu - // Cantarell => GNOME - // Fira Sans => Firefox OS - // Droid Sans => Older Androids (<4.0) - // Helvetica Neue => Older macOS <10.11 - // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) - font-family: - system-ui, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - $font-sans-serif, - sans-serif; - } - - &.app-body { - padding: 0; - padding-left: env(safe-area-inset-left); - padding-right: env(safe-area-inset-right); - box-sizing: border-box; - - &.layout-single-column { - height: auto; - min-height: 100vh; - min-height: 100dvh; - overflow-y: scroll; - } - - &.layout-multiple-columns { - position: absolute; - width: 100%; - height: 100%; - padding-bottom: env(safe-area-inset-bottom); - } - } - - &.player { - padding: 0; - margin: 0; - position: absolute; - width: 100%; - height: 100%; - overflow: hidden; - - & > div { - height: 100%; - } - - .video-player video { - width: 100%; - height: 100%; - max-height: 100vh; - } - - .media-gallery { - margin-top: 0; - height: 100% !important; - border-radius: 0; - } - - .media-gallery__item { - border-radius: 0; - } - } - - &.embed { - margin: 0; - padding-bottom: 0; - overflow: hidden; - } - - &.admin { - padding: 0; - background: var(--color-bg-primary); - } - - &.error { - position: absolute; - text-align: center; - width: 100%; - height: 100%; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - - .dialog { - vertical-align: middle; - margin: 20px; - - &__illustration { - img { - display: block; - max-width: 470px; - width: 100%; - height: auto; - margin-top: -120px; - margin-bottom: -45px; - } - } - - h1 { - font-size: 20px; - line-height: 28px; - font-weight: 400; - } - } - } -} - -a { - &:focus { - border-radius: 4px; - outline: var(--outline-focus-default); - } - - &:focus:not(:focus-visible) { - outline: none; - } -} - -button { - font-family: inherit; - cursor: pointer; - - &:focus:not(:focus-visible) { - outline: none; - } -} - -.app-holder { - &, - & > div, - & > noscript { - display: flex; - width: 100%; - align-items: center; - justify-content: center; - outline: 0 !important; - } - - & > noscript { - min-height: 100vh; - min-height: 100dvh; - } -} - -.layout-single-column .app-holder { - &, - & > div { - min-height: 100vh; - min-height: 100dvh; - } -} - -.layout-multiple-columns .app-holder { - &, - & > div { - height: 100%; - } -} - -.error-boundary, -.app-holder noscript { - flex-direction: column; - font-size: 16px; - font-weight: 400; - line-height: 1.7; - color: var(--color-text-error); - text-align: center; - - & > div { - max-width: 500px; - } - - p { - margin-bottom: 0.85em; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: var(--color-text-brand); - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - - &__footer { - color: var(--color-text-secondary); - font-size: 13px; - - a { - color: var(--color-text-secondary); - } - } - - button { - display: inline; - border: 0; - background: transparent; - color: var(--color-text-secondary); - font: inherit; - padding: 0; - margin: 0; - line-height: inherit; - cursor: pointer; - outline: 0; - transition: color 300ms linear; - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - - &.copied { - color: var(--mas-status-success-color); - transition: none; - } - } -} - -.logo-resources { - // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029 - visibility: hidden; - user-select: none; - pointer-events: none; - width: 0; - height: 0; - overflow: hidden; - position: absolute; - top: 0; - inset-inline-start: 0; - z-index: -1000; -} - -// NoScript adds a __ns__pop2top class to the full ancestry of blocked elements, -// to set the z-index to a high value, which messes with modals and dropdowns. -// Blocked elements can in theory only be media and frames/embeds, so they -// should only appear in statuses, under divs and articles. -body, -div, -article { - .__ns__pop2top { - z-index: unset !important; - } -} diff --git a/app/javascript/styles_new/mastodon/branding.scss b/app/javascript/styles_new/mastodon/branding.scss deleted file mode 100644 index a7cc9c500e..0000000000 --- a/app/javascript/styles_new/mastodon/branding.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use 'variables' as *; - -.logo { - color: var(--color-text-primary); -} diff --git a/app/javascript/styles_new/mastodon/components.scss b/app/javascript/styles_new/mastodon/components.scss deleted file mode 100644 index 13d19c5b8c..0000000000 --- a/app/javascript/styles_new/mastodon/components.scss +++ /dev/null @@ -1,11441 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; -@use 'mixins' as *; - -.app-body { - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; -} - -.animated-number { - display: inline-flex; - flex-direction: column; - align-items: stretch; - overflow: hidden; - position: relative; -} - -.inline-alert { - color: var(--color-text-success); - font-weight: 400; - - .no-reduce-motion & { - transition: opacity 200ms ease; - } -} - -.link-button { - display: block; - font-size: 15px; - line-height: 20px; - color: var(--color-text-brand); - border: 0; - background: transparent; - padding: 0; - cursor: pointer; - text-decoration: none; - - &--destructive { - color: var(--color-text-error); - } - - &:hover, - &:active { - text-decoration: underline; - } - - &:disabled { - color: var(--color-text-primary); - cursor: default; - } - - &:focus-visible { - outline: var(--outline-focus-default); - } -} - -.help-button { - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - border: 0; - border-radius: 20px; - cursor: pointer; - width: 24px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - - &:active, - &:focus, - &:hover { - background: var(--color-bg-brand-base-hover); - } - - &:focus-visible { - outline: var(--outline-focus-default); - } - - .icon { - width: 14px; - height: 14px; - } -} - -.button { - background-color: var(--color-bg-brand-base); - border: 10px none; - border-radius: 4px; - box-sizing: border-box; - color: var(--color-text-on-brand-base); - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - font-family: inherit; - font-size: 15px; - font-weight: 500; - letter-spacing: 0; - line-height: 22px; - overflow: hidden; - padding: 7px 18px; - position: relative; - text-align: center; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - width: auto; - - &:active, - &:focus, - &:hover { - background-color: var(--color-bg-brand-base-hover); - } - - &:focus-visible { - outline: 2px solid var(--color-bg-brand-base); - outline-offset: 2px; - } - - &--compact { - font-size: 14px; - line-height: normal; - font-weight: 700; - padding: 5px 12px; - border-radius: 4px; - } - - &--dangerous { - background-color: var(--color-bg-error-base); - color: var(--color-text-on-error-base); - - &:active, - &:focus, - &:hover { - background-color: var(--color-bg-error-base-hover); - transition: none; - } - } - - &--destructive { - &:active, - &:focus, - &:hover { - color: var(--color-text-on-error-base); - background-color: var(--color-bg-error-base); - transition: none; - } - } - - &:disabled, - &.disabled { - color: var(--color-text-on-disabled); - background-color: var(--color-bg-disabled); - cursor: not-allowed; - } - - &.copyable { - transition: background 300ms linear; - } - - &.copied { - color: var(--color-text-on-success-base); - background-color: var(--color-bg-success-base); - transition: none; - } - - &.button-secondary { - color: var(--color-text-brand); - background: transparent; - padding: 6px 17px; - border: 1px solid var(--color-text-brand); - - &:active, - &:focus, - &:hover { - border-color: var(--color-text-brand); - color: var(--color-text-brand); - background-color: transparent; - text-decoration: none; - } - - &.button--destructive { - &:active, - &:focus, - &:hover { - border-color: var(--color-text-error); - color: var(--color-text-error); - } - } - - &:disabled, - &.disabled { - border-color: var(--color-text-disabled); - color: var(--color-text-disabled); - - &:active, - &:focus, - &:hover { - border-color: var(--color-text-disabled); - color: var(--color-text-disabled); - } - } - } - - &.button--plain { - color: var(--color-text-brand); - background: transparent; - padding: 6px; - - // The button has no outline, so we use negative margin to - // visually align its label with its surroundings while maintaining - // a generous click target - margin-inline: -6px; - border: 1px solid transparent; - - &:active, - &:focus, - &:hover { - border-color: transparent; - color: var(--color-text-brand-soft); - background-color: transparent; - text-decoration: none; - } - - &:disabled, - &.disabled { - opacity: 0.7; - border-color: transparent; - color: var(--color-text-disabled); - - &:active, - &:focus, - &:hover { - border-color: transparent; - color: var(--color-text-disabled); - } - } - } - - &.button--block { - width: 100%; - } - - &.loading { - cursor: wait; - - .button__label-wrapper { - // Hide the label only visually, so that - // it keeps its layout and accessibility - opacity: 0; - } - - .loading-indicator { - position: absolute; - inset: 0; - } - } - - .icon { - width: 18px; - height: 18px; - } -} - -.column__wrapper { - display: flex; - flex: 1 1 auto; - position: relative; -} - -.icon { - flex: 0 0 auto; - width: 24px; - height: 24px; - aspect-ratio: 1; - - path { - fill: currentColor; - } -} - -.icon-button { - --default-icon-color: var(--color-text-secondary); - --default-bg-color: transparent; - --hover-icon-color: var(--color-text-primary); - --hover-bg-color: var(--color-bg-brand-softer); - - display: inline-flex; - color: var(--default-icon-color); - border: 0; - padding: 0; - border-radius: 4px; - background: var(--default-bg-color); - cursor: pointer; - align-items: center; - justify-content: center; - text-decoration: none; - gap: 4px; - flex: 0 0 auto; - - a { - display: flex; - color: inherit; - text-decoration: none; - } - - &:hover, - &:active, - &:focus-visible { - color: var(--hover-icon-color); - background-color: var(--hover-bg-color); - } - - &:focus-visible { - outline: 2px solid var(--color-text-brand); - } - - &.disabled { - color: var(--color-text-disabled); - background-color: var(--default-bg-color); - cursor: default; - } - - &.inverted { - --default-icon-color: var(--color-text-primary); - --hover-icon-color: var(--color-text-secondary); - } - - &.active { - --default-icon-color: var(--color-text-brand); - --hover-icon-color: var(--color-text-brand); - --hover-bg-color: transparent; - } - - &.overlayed { - --default-icon-color: rgb(from var(--color-text-on-media) r g b / 70%); - --default-bg-color: var(--color-bg-media); - --hover-icon-color: var(--color-text-brand); - --hover-bg-color: rgb(from var(--color-bg-media-base) r g b / 90%); - - box-sizing: content-box; - backdrop-filter: $backdrop-blur-filter; - border-radius: 4px; - padding: 2px; - } - - &--with-counter { - padding-inline-end: 4px; - } - - &__counter { - display: block; - width: auto; - font-size: 12px; - font-weight: 500; - } - - &.copyable { - transition: all 300ms linear; - } - - &.copied { - color: var(--color-text-success); - transition: none; - background-color: var(--color-bg-success-softer); - border-color: var(--color-border-on-bg-brand-softer); - } -} - -body > [data-popper-placement] { - z-index: 9999; -} - -.invisible { - font-size: 0; - line-height: 0; - display: inline-block; - width: 0; - height: 0; - position: absolute; - - img, - svg { - margin: 0 !important; - border: 0 !important; - padding: 0 !important; - width: 0 !important; - height: 0 !important; - } -} - -.ellipsis { - &::after { - content: '…'; - } -} - -.autosuggest-textarea { - &__textarea { - background: transparent; - min-height: 100px; - padding-bottom: 0; - resize: none; - scrollbar-color: initial; - - &::-webkit-scrollbar { - all: unset; - } - } - - &__suggestions { - box-shadow: var(--dropdown-shadow); - background: var(--color-bg-elevated); - border: 1px solid var(--color-border-primary); - border-radius: 0 0 4px 4px; - color: var(--color-text-primary); - font-size: 14px; - padding: 0; - - &__item { - box-sizing: border-box; - display: flex; - align-items: center; - height: 48px; - cursor: pointer; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - color: var(--color-text-primary); - - &:last-child { - border-radius: 0 0 4px 4px; - } - - &:hover, - &:focus, - &:active { - background: var(--color-bg-secondary); - - .autosuggest-account .display-name__account { - color: inherit; - } - } - - &.selected { - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - - .autosuggest-account .display-name__account { - color: inherit; - } - } - } - } -} - -.autosuggest-account, -.autosuggest-emoji, -.autosuggest-hashtag { - flex: 1 0 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - gap: 12px; - padding: 8px 12px; - overflow: hidden; - text-overflow: ellipsis; -} - -.autosuggest-account { - .display-name { - font-weight: 400; - display: flex; - flex-direction: column; - flex: 1 0 0; - } - - .display-name__account { - display: block; - line-height: 16px; - font-size: 12px; - color: var(--color-text-secondary); - } -} - -.autosuggest-hashtag { - justify-content: space-between; - - &__name { - flex: 1 1 auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &__uses { - flex: 0 0 auto; - text-align: end; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.autosuggest-emoji { - &__name { - flex: 1 0 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.autosuggest-account .account__avatar, -.autosuggest-emoji img { - display: block; - width: 24px; - height: 24px; - flex: 0 0 auto; -} - -.compose-form { - display: flex; - flex-direction: column; - gap: 32px; - - .layout-multiple-columns &, - .column & { - padding: 15px; - } - - &__highlightable { - display: flex; - flex-direction: column; - flex: 0 1 auto; - border-radius: 4px; - border: 1px solid var(--color-border-on-bg-secondary); - transition: border-color 300ms linear; - position: relative; - background: var(--color-bg-secondary); - - &.active { - transition: none; - border-color: var(--color-text-brand); - } - } - - &__warning { - color: var(--color-text-primary); - background: var(--color-bg-warning-softer); - border: 1px solid var(--color-border-on-bg-warning-softer); - padding: 8px 10px; - border-radius: 4px; - font-size: 13px; - font-weight: 400; - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - a { - color: var(--color-text-brand); - font-weight: 500; - text-decoration: underline; - - &:hover, - &:active, - &:focus { - text-decoration: none; - } - } - } - - .spoiler-input { - display: flex; - align-items: stretch; - - &__border { - background: url('@/images/warning-stripes.svg') repeat-y; - width: 5px; - flex: 0 0 auto; - } - - .autosuggest-input { - flex: 1 1 auto; - border: 1px solid var(--color-border-primary); - border-width: 1px 0; - } - } - - .autosuggest-textarea__textarea, - .spoiler-input__input { - display: block; - box-sizing: border-box; - width: 100%; - margin: 0; - color: var(--color-text-primary); - background: transparent; - font-family: inherit; - font-size: 14px; - padding: 12px; - line-height: normal; - border: 0; - outline: 0; - - &:focus { - outline: 0; - } - } - - .spoiler-input__input { - padding: 12px 12px - 5px; - background: var(--color-bg-brand-softer); - color: var(--color-text-brand); - } - - &__dropdowns { - display: flex; - align-items: center; - gap: 8px; - margin: 8px; - flex-wrap: wrap; - - & > div { - overflow: hidden; - display: flex; - } - } - - &__uploads { - padding: 0 12px; - aspect-ratio: 3/2; - flex-shrink: 0; - } - - .media-gallery { - gap: 8px; - } - - &__upload { - position: relative; - - &.draggable { - will-change: transform, opacity; - touch-action: none; - cursor: grab; - } - - &.dragging { - opacity: 0; - } - - &.overlay { - height: 100%; - border-radius: 8px; - pointer-events: none; - } - - &__actions { - display: flex; - align-items: flex-start; - justify-content: space-between; - padding: 8px; - } - - &__preview, - &__visualizer { - position: absolute; - width: 100%; - height: 100%; - z-index: -1; - top: 0; - } - - &__preview { - border-radius: 6px; - inset-inline-start: 0; - } - - &__visualizer { - padding: 16px; - box-sizing: border-box; - - .audio-player__visualizer { - margin: 0 auto; - display: block; - height: 100%; - } - - .icon { - position: absolute; - top: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - opacity: 0.75; - color: var(--player-foreground-color); - filter: var(--overlay-icon-shadow); - width: 48px; - height: 48px; - } - } - - &__thumbnail { - width: 100%; - height: 100%; - background-position: center; - background-size: cover; - background-repeat: no-repeat; - overflow: hidden; - } - - .icon-button { - flex: 0 0 auto; - color: var(--color-text-on-media); - background: var(--color-bg-media); - backdrop-filter: $backdrop-blur-filter; - border-radius: 6px; - font-size: 12px; - line-height: 16px; - font-weight: 500; - padding: 4px 8px; - font-family: inherit; - - .icon { - width: 15px; - height: 15px; - } - } - - .icon-button.compose-form__upload__delete { - padding: 2px; - border-radius: 50%; - - .icon { - width: 20px; - height: 20px; - } - } - - &__warning { - position: absolute; - z-index: 2; - bottom: 0; - inset-inline-start: 0; - inset-inline-end: 0; - padding: 8px; - - .icon-button.active { - color: var(--color-text-on-warning-base); - background: var(--color-bg-warning-base); - } - } - } - - &__footer { - display: flex; - flex-direction: column; - gap: 12px; - padding: 12px; - } - - &__submit { - display: flex; - align-items: center; - flex: 1 1 auto; - max-width: 100%; - overflow: hidden; - } - - &__buttons { - display: flex; - gap: 8px; - align-items: center; - flex: 1 1 auto; - - & > div { - display: flex; - } - - .icon-button { - padding: 2px; - } - - .icon-button .icon { - width: 20px; - height: 20px; - } - } - - &__actions { - display: flex; - align-items: center; - flex: 0 0 auto; - gap: 12px; - flex-wrap: wrap; - - .icon-button { - box-sizing: content-box; - color: var(--color-text-brand); - - &:hover, - &:focus, - &:active { - color: var(--color-text-brand); - } - - &.disabled { - color: var(--color-text-disabled); - } - - &.active { - background: var(--color-bg-brand-base); - color: var(--color-text-on-brand-base); - } - } - } - - &__poll { - margin-top: 8px; - display: flex; - flex-direction: column; - align-self: stretch; - gap: 8px; - - .poll__option { - padding: 0 12px; - gap: 8px; - - &.empty:not(:focus-within) { - opacity: 0.5; - } - } - - .poll__input { - width: 17px; - height: 17px; - border-color: var(--color-text-secondary); - } - - &__footer { - display: flex; - align-items: center; - gap: 16px; - padding-inline-start: 37px; - padding-inline-end: 40px; - - &__sep { - width: 1px; - height: 22px; - background: var(--color-border-primary); - flex: 0 0 auto; - } - } - - &__select { - display: flex; - flex-direction: column; - gap: 2px; - flex: 1 1 auto; - min-width: 0; - - &__label { - flex: 0 0 auto; - font-size: 11px; - font-weight: 500; - line-height: 16px; - letter-spacing: 0.5px; - color: var(--color-text-secondary); - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - &__value { - flex: 0 0 auto; - appearance: none; - background: transparent; - border: none; - padding: 0; - font-size: 14px; - font-weight: 500; - line-height: 20px; - letter-spacing: 0.1px; - color: var(--color-text-brand); - background-color: var(--color-bg-secondary-solid); - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - } - - .status__quote { - margin: 0 8px; - max-height: 220px; - - // Override .status__content .status__content__text.status__content__text--visible - .status__content__text.status__content__text { - display: -webkit-box; - } - - .status__content__text { - -webkit-line-clamp: 4; - line-clamp: 4; - -webkit-box-orient: vertical; - overflow: hidden; - } - } -} - -.dropdown-button { - display: flex; - align-items: center; - gap: 4px; - color: var(--color-text-brand); - background: transparent; - border: 1px solid var(--color-text-brand); - border-radius: 6px; - padding: 4px 8px; - font-size: 13px; - line-height: normal; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &[disabled] { - cursor: default; - color: var(--color-text-disabled); - border-color: var(--color-text-disabled); - } - - .icon { - width: 15px; - height: 15px; - flex: 0 0 auto; - } - - &__label { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1 1 auto; - } - - &.active { - color: var(--color-text-on-brand-base); - border-color: var(--color-bg-brand-base); - background: var(--color-bg-brand-base); - } - - &.warning { - color: var(--color-text-warning); - border-color: var(--color-text-warning); - - &.active { - color: var(--color-text-on-warning-base); - border-color: var(--color-bg-warning-base); - background-color: var(--color-bg-warning-base); - } - } -} - -.character-counter { - cursor: default; - font-family: $font-sans-serif, sans-serif; - font-size: 14px; - font-weight: 400; - line-height: normal; - color: var(--color-text-secondary); - flex: 1 0 auto; - text-align: end; - - &.character-counter--over { - color: var(--color-text-error); - } -} - -.no-reduce-motion .spoiler-input { - transition: - height 0.4s ease, - opacity 0.4s ease; -} - -.sign-in-banner { - padding: 10px; - - p { - font-size: 15px; - line-height: 22px; - color: var(--color-text-primary); - margin-bottom: 20px; - - strong { - font-weight: 700; - } - - a { - color: var(--color-text-primary); - text-decoration: none; - unicode-bidi: isolate; - - &:hover { - text-decoration: underline; - } - } - } - - .button { - margin-bottom: 10px; - } -} - -.emojione { - font-size: inherit; - vertical-align: middle; - object-fit: contain; - margin: -0.2ex 0.15em 0.2ex; - width: 16px; - height: 16px; - - img { - width: auto; - } -} - -.status__content--with-action { - cursor: pointer; -} - -.status__content { - clear: both; -} - -.status__content, -.edit-indicator__content, -.reply-indicator__content { - position: relative; - overflow-wrap: break-word; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - font-size: 15px; - line-height: 22px; - padding-top: 2px; - color: var(--color-text-primary); - - &:focus { - outline: 0; - } - - &.status__content--with-spoiler { - white-space: normal; - - .status__content__text { - white-space: pre-wrap; - } - } - - .emojione { - width: 20px; - height: 20px; - margin: -3px 0 0; - } - - p { - margin-bottom: 22px; - white-space: pre-wrap; - unicode-bidi: plaintext; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: var(--color-text-status-links); - text-decoration: none; - unicode-bidi: isolate; - - &:hover { - text-decoration: underline; - } - - &.mention { - &:hover { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - } - - a.unhandled-link { - color: var(--color-text-brand); - } - - .status__content__text { - display: none; - - &.status__content__text--visible { - display: block; - } - } -} - -.reply-indicator { - display: grid; - grid-template-columns: 46px minmax(0, 1fr); - grid-template-rows: 46px max-content; - gap: 0 10px; - - .detailed-status__display-name { - margin-bottom: 4px; - } - - .detailed-status__display-avatar { - grid-column-start: 1; - grid-row-start: 1; - grid-row-end: span 1; - } - - &__main { - grid-column-start: 2; - grid-row-start: 1; - grid-row-end: span 2; - } - - .display-name { - font-size: 14px; - line-height: 16px; - - &__account { - display: none; - } - } - - &__line { - grid-column-start: 1; - grid-row-start: 2; - grid-row-end: span 1; - position: relative; - - &::before { - display: block; - content: ''; - position: absolute; - inset-inline-start: 50%; - top: 4px; - transform: translateX(-50%); - background: var(--color-border-primary); - width: 2px; - height: calc(100% + 32px - 8px); // Account for gap to next element - } - } - - &__content { - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - display: -webkit-box; - line-clamp: 4; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - padding: 0; - max-height: 4 * 20px; - overflow: hidden; - color: var(--color-text-secondary); - } - - &__attachments { - margin-top: 4px; - color: var(--color-text-secondary); - font-size: 12px; - line-height: 16px; - display: flex; - align-items: center; - gap: 4px; - - .icon { - width: 18px; - height: 18px; - } - } -} - -.edit-indicator { - border-radius: 4px 4px 0 0; - background: var(--color-bg-tertiary); - padding: 12px; - overflow-y: auto; - flex: 0 0 auto; - border-bottom: 1px solid var(--color-border-primary); - display: flex; - flex-direction: column; - gap: 4px; - - &__header { - display: flex; - justify-content: space-between; - align-items: center; - color: var(--color-text-secondary); - font-size: 12px; - line-height: 16px; - overflow: hidden; - text-overflow: ellipsis; - } - - &__cancel { - display: flex; - - .icon { - width: 18px; - height: 18px; - } - } - - &__display-name { - display: flex; - gap: 4px; - - a { - color: inherit; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - - &__content { - color: var(--color-text-primary); - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - padding-top: 0 !important; - display: -webkit-box; - line-clamp: 4; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - max-height: 4 * 20px; - overflow: hidden; - - a { - color: var(--color-text-brand); - } - } - - &__attachments { - color: var(--color-text-secondary); - font-size: 12px; - line-height: 16px; - opacity: 0.75; - display: flex; - align-items: center; - gap: 4px; - - .icon { - width: 18px; - height: 18px; - } - } -} - -.edit-indicator__content, -.reply-indicator__content { - .emojione { - width: 18px; - height: 18px; - margin: -3px 0 0; - } -} - -.announcements__content { - overflow-wrap: break-word; - overflow-y: auto; - - .emojione { - width: 20px; - height: 20px; - margin: -3px 0 0; - } - - p { - margin-bottom: 10px; - white-space: pre-wrap; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: var(--color-text-primary); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - - &.mention { - &:hover { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - - &.unhandled-link { - color: var(--color-text-brand); - } - } -} - -.status__content.status__content--collapsed { - max-height: 22px * 15; // 15 lines is roughly above 500 characters -} - -.status__content__read-more-button, -.status__content__translate-button { - display: flex; - align-items: center; - font-size: 15px; - line-height: 22px; - color: var(--color-text-brand); - border: 0; - background: transparent; - padding: 0; - margin-top: 16px; - text-decoration: none; - text-wrap: nowrap; - - .status--is-quote & { - // Needed to prevent buttons from stretching across whole - // status width in Safari due to line-clamp - width: min-content; - white-space: nowrap; - } - - &:hover, - &:active { - text-decoration: underline; - } - - .icon { - width: 15px; - height: 15px; - } -} - -.translate-button { - margin-top: 16px; - font-size: 15px; - line-height: 22px; - display: flex; - justify-content: space-between; - color: var(--color-text-tertiary); -} - -.status__wrapper--filtered { - color: var(--color-text-tertiary); - border: 0; - font-size: inherit; - text-align: center; - line-height: inherit; - margin: 0; - padding: 15px; - box-sizing: border-box; - width: 100%; - clear: both; - border-bottom: 1px solid var(--color-border-primary); - - &__button { - display: inline; - color: var(--color-text-brand); - border: 0; - background: transparent; - padding: 0; - font-size: inherit; - line-height: inherit; - - &:hover, - &:active { - text-decoration: underline; - } - } -} - -.focusable { - &:focus-visible { - outline: 2px solid var(--color-text-brand); - outline-offset: -2px; - background: var(--color-bg-brand-softer); - } -} - -.status { - padding: 16px; - min-height: 54px; - border-bottom: 1px solid var(--color-border-primary); - cursor: auto; - opacity: 1; - animation: fade 150ms linear; - - @keyframes fade { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } - } - - .content-warning { - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - } - - .media-gallery, - .video-player, - .audio-player, - .attachment-list { - margin-top: 16px; - } - - &--in-thread { - --thread-margin: calc(46px + 8px); - - border-bottom: 0; - - & > .status__content, - & > .status__action-bar, - & > .media-gallery, - & > div > .video-player, - & > .audio-player, - & > .attachment-list, - & > .picture-in-picture-placeholder, - & > .more-from-author, - & > .status-card, - & > .hashtag-bar, - & > .content-warning, - & > .filter-warning, - & > .status__quote { - margin-inline-start: var(--thread-margin); - width: calc(100% - var(--thread-margin)); - } - - .more-from-author { - width: calc(100% - var(--thread-margin) + 2px); - } - - .status__content__read-more-button { - margin-inline-start: var(--thread-margin); - } - } - - &__action-bar__button-wrapper { - flex-basis: 0; - flex-grow: 1; - - &:last-child { - flex-grow: 0; - } - } - - &--first-in-thread { - border-top: 1px solid var(--color-border-primary); - } - - &__line { - --thread-line-color: var(--color-border-primary); - - height: 16px - 4px; - border-inline-start: 2px solid var(--thread-line-color); - width: 0; - position: absolute; - top: 0; - inset-inline-start: 16px + ((46px - 2px) * 0.5); - - &--full { - top: 0; - height: 100%; - - &::before { - content: ''; - display: block; - position: absolute; - top: 16px - 4px; - height: 46px + 4px + 4px; - width: 2px; - background: var(--thread-line-color); - inset-inline-start: -2px; - } - } - - &--first { - top: 16px + 46px + 4px; - height: calc(100% - (16px + 46px + 4px)); - - &::before { - display: none; - } - } - } - - .no-reduce-motion &--highlighted-entry::before { - content: ''; - position: absolute; - inset: 0; - background: var(--color-bg-brand-softer); - opacity: 0; - animation: fade 0.7s reverse both 0.3s; - pointer-events: none; - } -} - -.status__relative-time { - display: block; - font-size: 15px; - line-height: 22px; - height: 40px; - order: 2; - flex: 0 0 auto; - color: var(--color-text-secondary); -} - -.notification__relative_time { - color: var(--color-text-tertiary); - float: right; - font-size: 14px; - padding-bottom: 1px; -} - -.status__visibility-icon { - padding: 0 4px; - - .icon { - width: 1em; - height: 1em; - margin-bottom: -2px; - } -} - -.status__display-name { - color: var(--color-text-secondary); -} - -.status__info .status__display-name { - max-width: 100%; - display: flex; - font-size: 15px; - line-height: 22px; - align-items: center; - gap: 10px; - overflow: hidden; - margin-inline-end: auto; - - .display-name { - bdi { - overflow: hidden; - text-overflow: ellipsis; - } - - &__account { - white-space: nowrap; - display: block; - overflow: hidden; - text-overflow: ellipsis; - } - } -} - -.status__quote-cancel { - align-self: self-start; - order: 5; -} - -.status__info { - font-size: 15px; - padding-bottom: 10px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - cursor: pointer; -} - -.status-check-box__status { - display: block; - box-sizing: border-box; - width: 100%; - padding: 0 10px; - - .detailed-status__display-name { - color: var(--color-text-tertiary); - - span { - display: inline; - } - - &:hover strong { - text-decoration: none; - } - } - - .media-gallery, - .audio-player, - .video-player { - margin-top: 15px; - max-width: 250px; - } - - .status__content { - padding: 0; - white-space: normal; - } - - .media-gallery__item-thumbnail { - cursor: default; - } -} - -.status__prepend { - padding: 16px; - padding-bottom: 0; - display: flex; - align-items: center; - gap: 8px; - font-size: 15px; - line-height: 22px; - font-weight: 500; - color: var(--color-text-secondary); - - &__icon { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - - .icon { - width: 16px; - height: 16px; - } - } - - a { - color: inherit; - text-decoration: none; - } - - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.status__wrapper-direct, -.notification-ungrouped--direct, -.notification-group--direct, -.notification-group--annual-report { - background: var(--color-bg-brand-softer); - - &:focus { - background: var(--color-bg-brand-soft); - } -} - -.status__wrapper-direct, -.notification-ungrouped--direct { - .status__prepend, - .notification-ungrouped__header { - color: var(--color-text-brand); - } -} - -.status__action-bar { - display: flex; - justify-content: space-between; - align-items: center; - gap: 18px; - margin-top: 16px; -} - -.detailed-status__action-bar-dropdown { - flex: 1 1 auto; - display: flex; - align-items: center; - justify-content: center; - position: relative; -} - -.detailed-status { - padding: 16px; - border-top: 1px solid var(--color-border-primary); - - .status__content { - font-size: 19px; - line-height: 24px; - - .emojione { - width: 24px; - height: 24px; - margin: -1px 0 0; - } - } - - .media-gallery, - .video-player, - .audio-player { - margin-top: 16px; - } - - .status__prepend { - padding: 0; - margin-bottom: 16px; - } - - .content-warning { - margin-bottom: 16px; - - &:last-child { - margin-bottom: 0; - } - } - - .logo { - width: 40px; - height: 40px; - color: var(--color-text-tertiary); - } -} - -.embed { - position: relative; - - &__overlay { - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - .detailed-status { - border-top: 0; - } -} - -.scrollable > div:first-child .detailed-status { - border-top: 0; -} - -.detailed-status__meta { - margin-top: 24px; - color: var(--color-text-tertiary); - font-size: 14px; - line-height: 18px; - - &__line { - border-bottom: 1px solid var(--color-border-primary); - padding: 8px 0; - display: flex; - align-items: center; - gap: 8px; - - &:first-child { - padding-top: 0; - } - - &:last-child { - padding-bottom: 0; - border-bottom: 0; - } - } - - .icon { - width: 18px; - height: 18px; - } - - .animated-number { - color: var(--color-text-primary); - font-weight: 500; - } -} - -.detailed-status__action-bar { - border-top: 1px solid var(--color-border-primary); - border-bottom: 1px solid var(--color-border-primary); - display: flex; - flex-direction: row; - padding: 10px 0; -} - -.detailed-status__wrapper-direct { - .detailed-status, - .detailed-status__action-bar { - background: var(--color-bg-brand-softer); - } - - .status__prepend { - color: var(--color-text-brand); - } -} - -.status__quote { - // --status-gutter-width is currently only set inside of - // .notification-ungrouped, so everywhere else this will fall back - // to the pixel values - --quote-margin: var(--status-gutter-width); - - position: relative; - overflow: hidden; - margin-block-start: 16px; - margin-inline-start: calc(var(--quote-margin) + var(--thread-margin, 0px)); - border-radius: 12px; - color: var(--color-text-primary); - border: 1px solid var(--color-border-primary); -} - -.status__quote--error { - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - padding: 12px; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - min-height: 56px; - - .link-button { - font-size: inherit; - line-height: inherit; - letter-spacing: inherit; - } -} - -.status__quote-author-button { - position: relative; - overflow: hidden; - display: flex; - margin-top: 8px; - padding: 8px 12px; - align-items: center; - font-family: inherit; - font-size: 14px; - font-weight: 400; - line-height: 20px; - letter-spacing: 0.25px; - color: var(--color-text-secondary); - background: var(--color-bg-brand-softer); - border-radius: 8px; - cursor: default; -} - -.status--is-quote { - border: none; - padding: 12px; - - .status__info { - padding-bottom: 8px; - } - - .display-name, - .status__relative-time { - font-size: 14px; - line-height: 20px; - letter-spacing: 0.1px; - } - - .display-name__account { - font-size: 12px; - line-height: 16px; - letter-spacing: 0.5px; - } - - .status__content { - display: -webkit-box; - font-size: 14px; - letter-spacing: 0.25px; - line-height: 20px; - -webkit-line-clamp: 4; - line-clamp: 4; - -webkit-box-orient: vertical; - overflow: hidden; - - p { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - } - } - - .media-gallery, - .video-player, - .audio-player, - .attachment-list, - .poll { - margin-top: 8px; - } -} - -.detailed-status__link { - display: inline-flex; - align-items: center; - color: inherit; - text-decoration: none; - gap: 6px; -} - -.domain { - padding: 16px; - border-bottom: 1px solid var(--color-border-primary); - display: flex; - align-items: center; - gap: 8px; - - &__domain-name { - flex: 1 1 auto; - color: var(--color-text-primary); - font-size: 15px; - line-height: 21px; - font-weight: 500; - } -} - -.account { - padding: 16px; - border-bottom: 1px solid var(--color-border-primary); - - .account__display-name { - flex: 1 1 auto; - display: flex; - align-items: center; - gap: 10px; - color: var(--color-text-secondary); - overflow: hidden; - text-decoration: none; - font-size: 14px; - - .display-name { - margin-bottom: 4px; - } - - .display-name strong { - display: inline; - color: var(--color-text-primary); - } - } - - &--minimal { - .account__display-name { - .display-name { - margin-bottom: 0; - } - - .display-name strong { - display: block; - } - } - } - - &__avatar-wrapper .account__avatar { - @container (width < 360px) { - width: 35px !important; - height: 35px !important; - } - } - - &__domain-pill { - display: inline-flex; - background: var(--color-bg-brand-softer); - border-radius: 4px; - border: 0; - color: var(--color-text-brand); - font-weight: 500; - font-size: 12px; - line-height: 16px; - padding: 4px 8px; - - &.active { - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - } - - &__popout { - background: var(--color-bg-elevated); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - box-shadow: var(--dropdown-shadow); - max-width: 320px; - padding: 16px; - border-radius: 8px; - display: flex; - flex-direction: column; - gap: 24px; - font-size: 14px; - line-height: 20px; - color: var(--color-text-secondary); - - .link-button { - display: inline; - font-size: inherit; - line-height: inherit; - } - - &__header { - display: flex; - align-items: center; - gap: 12px; - - &__icon { - width: 40px; - height: 40px; - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - flex-shrink: 0; - } - - h3 { - font-size: 17px; - line-height: 22px; - color: var(--color-text-primary); - } - } - - &__handle { - border: 2px dashed var(--color-border-on-brand-softer); - background: var(--color-bg-brand-softer); - padding: 12px 8px; - color: var(--color-text-brand); - border-radius: 4px; - - &__label { - font-size: 11px; - line-height: 16px; - font-weight: 500; - } - - &__handle { - overflow: hidden; - text-overflow: ellipsis; - user-select: all; - } - } - - &__parts { - display: flex; - flex-direction: column; - gap: 8px; - font-size: 12px; - line-height: 16px; - - & > div { - display: flex; - align-items: flex-start; - gap: 12px; - } - - &__icon { - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - color: var(--color-text-brand); - } - - h6 { - font-size: 14px; - line-height: 20px; - font-weight: 500; - color: var(--color-text-primary); - } - } - } - } - - &__note { - font-size: 14px; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - line-clamp: 1; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - margin-top: 10px; - color: var(--color-text-secondary); - - &--missing { - color: var(--color-text-tertiary); - } - - p { - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: inherit; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - } -} - -.learn-more__popout { - gap: 8px; - - &__content { - display: flex; - flex-direction: column; - gap: 4px; - } - - h6 { - font-size: inherit; - font-weight: 500; - line-height: inherit; - letter-spacing: 0.1px; - } - - .link-button { - font-weight: 500; - } -} - -.account__wrapper { - display: flex; - gap: 10px; - align-items: center; - justify-content: end; -} - -.account__wrapper--with-bio { - align-items: start; -} - -.account__info-wrapper { - flex: 1 1 auto; - min-width: 0; -} - -.account__avatar { - display: block; - position: relative; - border-radius: var(--avatar-border-radius); - background: var(--color-bg-tertiary); - flex-shrink: 0; - - img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: var(--avatar-border-radius); - display: inline-block; // to not show broken images - } - - &--loading { - background-color: var(--color-bg-tertiary); - } - - &--inline { - display: inline-block; - vertical-align: middle; - margin-inline-end: 5px; - } - - &-composite { - border-radius: 50%; - overflow: hidden; - position: relative; - - & > div { - float: left; - position: relative; - box-sizing: border-box; - } - - .account__avatar { - width: 100% !important; - height: 100% !important; - } - - &__label { - display: block; - position: absolute; - top: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - color: var(--color-text-primary); - text-shadow: 1px 1px 2px - rgb(from var(--color-shadow-primary) r g b / 100%); - font-weight: 700; - font-size: 15px; - } - } - - &__counter { - $height: 16px; - $h-padding: 5px; - - position: absolute; - bottom: -3px; - inset-inline-end: -3px; - padding-left: $h-padding; - padding-right: $h-padding; - height: $height; - border-radius: $height; - min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle - line-height: $height + 1px; // to visually center the numbers - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - border-width: 1px; - border-style: solid; - border-color: var(--color-bg-primary); - font-size: 11px; - font-weight: 500; - text-align: center; - } -} - -a .account__avatar { - cursor: pointer; -} - -.avatar-group { - display: flex; - - --avatar-height: 28px; - - &:not(.avatar-group--compact) { - gap: 8px; - flex-wrap: wrap; - height: var(--avatar-height); - overflow-y: clip; - } -} - -.avatar-group--compact { - & > :not(:first-child) { - margin-inline-start: -12px; - } - - & > :first-child { - transform: rotate(-4deg); - } - - & > :nth-child(2) { - transform: rotate(-2deg); - } - - .account__avatar { - box-shadow: 0 0 0 2px var(--color-bg-primary); - } -} - -.account__avatar-overlay { - position: relative; - - &-overlay { - position: absolute; - bottom: 0; - inset-inline-end: 0; - z-index: 1; - } -} - -.account__relationship { - white-space: nowrap; - display: flex; - align-items: center; - gap: 8px; -} - -.account__relationship, -.explore-suggestions-card { - .icon-button { - border: 1px solid var(--color-border-primary); - border-radius: 4px; - box-sizing: content-box; - padding: 5px; - - .icon { - width: 24px; - height: 24px; - } - } -} - -.account-authorize { - padding: 14px 10px; - - .detailed-status__display-name { - display: block; - margin-bottom: 15px; - overflow: hidden; - } -} - -.account-authorize__avatar { - float: left; - margin-inline-end: 10px; -} - -.status__display-name, -.status__relative-time, -.detailed-status__display-name, -.detailed-status__datetime, -.detailed-status__application, -.detailed-status__link, -.account__display-name { - text-decoration: none; -} - -.status__display-name, -.account__display-name { - .display-name strong { - color: var(--color-text-primary); - } -} - -.muted { - .emojione { - opacity: 0.5; - } -} - -.status__display-name, -.detailed-status__display-name, -a.account__display-name { - &:hover .display-name strong { - text-decoration: underline; - } -} - -.account__display-name .display-name strong { - display: block; - overflow: hidden; - text-overflow: ellipsis; -} - -.detailed-status__application, -.detailed-status__datetime, -.detailed-status__link { - color: inherit; -} - -.detailed-status__display-name { - color: var(--color-text-secondary); - display: flex; - align-items: center; - gap: 10px; - font-size: 15px; - line-height: 22px; - margin-bottom: 16px; - overflow: hidden; - - strong, - span { - display: block; - text-overflow: ellipsis; - overflow: hidden; - } - - strong { - color: var(--color-text-primary); - } -} - -.muted { - .status__content, - .status__content p, - .status__content a { - color: var(--color-text-tertiary); - } - - .status__display-name strong { - color: var(--color-text-tertiary); - } - - .status__avatar { - opacity: 0.5; - } -} - -.notification__report { - padding: 16px; - border-bottom: 1px solid var(--color-border-primary); - display: flex; - gap: 10px; - - &__avatar { - flex: 0 0 auto; - } - - &__details { - flex: 1 1 auto; - display: flex; - justify-content: space-between; - align-items: center; - color: var(--color-text-secondary); - gap: 10px; - font-size: 15px; - line-height: 22px; - white-space: nowrap; - overflow: hidden; - - & > div { - overflow: hidden; - text-overflow: ellipsis; - } - - strong { - font-weight: 500; - } - } - - &__actions { - flex: 0 0 auto; - } -} - -.notification-group--link { - color: var(--color-text-primary); - text-decoration: none; - - .notification-group__main { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 8px; - flex-grow: 1; - font-size: 15px; - line-height: 22px; - - strong, - bdi { - font-weight: 700; - } - - .link-button { - font-size: inherit; - line-height: inherit; - font-weight: inherit; - } - } -} - -.notification__message { - padding: 16px; - padding-bottom: 0; - cursor: default; - color: var(--color-text-secondary); - font-size: 15px; - line-height: 22px; - font-weight: 500; - display: flex; - align-items: center; - gap: 10px; - - .icon { - color: var(--color-text-brand); - width: 18px; - height: 18px; - } - - .icon-star { - color: var(--color-text-favourite-highlight); - } - - > span { - display: inline; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.icon-button.star-icon.active { - color: var(--color-text-favourite-highlight); -} - -.icon-button.bookmark-icon.active { - color: var(--color-text-bookmark-highlight); -} - -.no-reduce-motion .icon-button.star-icon { - &.activate { - & > .icon { - animation: spring-rotate-in 1s linear; - transform-origin: 50% 52%; - } - } - - &.deactivate { - & > .icon { - animation: spring-rotate-out 1s linear; - transform-origin: 50% 52%; - } - } -} - -.notification__display-name { - color: inherit; - font-weight: 500; - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} - -.display-name { - display: block; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &__account { - text-overflow: ellipsis; - overflow: hidden; - } -} - -.display-name__html { - font-weight: 500; -} - -.status__relative-time, -.detailed-status__datetime, -.detailed-status__link { - &:is(a):hover { - text-decoration: underline; - } -} - -.zoomable-image { - position: relative; - width: 100%; - height: 100%; - 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; - outline: 1px solid var(--color-border-media); - outline-offset: -1px; - border-radius: 8px; - touch-action: none; - user-select: 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(--color-border-media); - 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; - } -} - -.navigation-bar { - display: flex; - align-items: center; - flex-shrink: 0; - cursor: default; - gap: 10px; - - .column > & { - padding: 15px; - } - - .account { - border-bottom: 0; - padding: 0; - flex: 1 1 auto; - min-width: 0; - - &__display-name { - font-size: 14px; - line-height: 20px; - font-weight: 500; - - .display-name__account { - font-size: 14px; - font-weight: 400; - } - } - } - - .icon-button { - padding: 8px; - color: var(--color-text-primary); - } - - .icon-button .icon { - width: 24px; - height: 24px; - } -} - -.dropdown-animation { - animation: dropdown 250ms cubic-bezier(0.1, 0.7, 0.1, 1); - - @keyframes dropdown { - from { - opacity: 0; - } - - to { - opacity: 1; - } - } - - .reduce-motion & { - animation: none; - } -} - -.dropdown { - display: inline-block; -} - -.dropdown__content { - display: none; - position: absolute; -} - -.dropdown-menu__separator { - border-bottom: 1px solid var(--color-border-primary); - margin: 5px 0; - height: 0; -} - -.dropdown-menu { - background: var(--color-bg-elevated); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - padding: 4px; - border-radius: 4px; - box-shadow: var(--dropdown-shadow); - z-index: 9999; - - &__text-button { - display: inline-flex; - align-items: center; - color: inherit; - background: transparent; - border: 0; - margin: 0; - padding: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; - - &:focus-visible { - outline: 1px dotted; - } - - &:hover { - text-decoration: underline; - } - - .icon { - width: 15px; - height: 15px; - } - } - - &__container { - &__header { - border-bottom: 1px solid var(--color-border-primary); - padding: 10px 14px; - padding-bottom: 14px; - margin-bottom: 4px; - font-size: 13px; - line-height: 18px; - color: var(--color-text-secondary); - } - - &__list { - list-style: none; - - &--scrollable { - max-height: 300px; - overflow-y: scroll; - } - } - - &--loading { - display: flex; - align-items: center; - justify-content: center; - padding: 30px 45px; - } - } - - &.left { - transform-origin: 100% 50%; - } - - &.top { - transform-origin: 50% 100%; - } - - &.bottom { - transform-origin: 50% 0; - } - - &.right { - transform-origin: 0 50%; - } -} - -.dropdown-menu__item { - font-size: 13px; - line-height: 18px; - font-weight: 500; - display: block; - - &--dangerous { - color: var(--color-text-error); - } - - &--highlighted { - color: var(--color-text-brand); - } - - &-content { - display: flex; - flex-direction: column; - } - - &-subtitle { - font-weight: 400; - } - - a, - button { - font: inherit; - display: flex; - align-items: center; - gap: 8px; - white-space: inherit; - width: 100%; - padding: 10px 14px; - border: 0; - margin: 0; - background: transparent; - box-sizing: border-box; - text-decoration: none; - color: inherit; - text-align: inherit; - border-radius: 4px; - - &:focus, - &:hover, - &:active { - &:not(:disabled, [aria-disabled='true']) { - background: var(--color-bg-secondary); - outline: 0; - } - } - } - - button:disabled, - button[aria-disabled='true'] { - color: var(--color-text-disabled); - cursor: default; - - &:focus { - color: rgb(from var(--color-text-disabled) r g b / 70%); - background: var(--color-bg-disabled); - outline: 0; - } - } -} - -.reblog-menu-item { - max-width: 360px; -} - -.inline-account { - display: inline-flex; - align-items: center; - vertical-align: top; - - .account__avatar { - margin-inline-end: 5px; - border-radius: 50%; - } - - strong { - font-weight: 600; - } -} - -.columns-area { - display: flex; - flex: 1 1 auto; - flex-direction: row; - justify-content: flex-start; - position: relative; - - .layout-multiple-columns & { - overflow-x: auto; - - &.unscrollable { - overflow-x: hidden; - } - } - - &__panels { - box-sizing: border-box; - display: flex; - justify-content: center; - gap: 16px; - width: 100%; - height: 100%; - min-height: 100vh; - min-height: 100dvh; - padding-inline: 10px; - padding-bottom: env(safe-area-inset-bottom); - - &__pane { - height: 100%; - overflow: hidden; - display: flex; - justify-content: flex-end; - min-width: 285px; - - &--start { - justify-content: flex-start; - } - - &__inner { - position: fixed; - width: 285px; - height: 100%; - } - } - - &__main { - --column-header-height: 62px; - - box-sizing: border-box; - width: 100%; - flex: 0 1 auto; - display: flex; - flex-direction: column; - contain: inline-size layout paint style; - container: column / inline-size; - color: var(--color-text-primary); - background-color: var(--color-bg-primary); - - @media screen and (min-width: $no-gap-breakpoint) { - max-width: 600px; - } - } - } -} - -.ui__navigation-bar { - position: fixed; - bottom: 0; - z-index: 3; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - gap: 8px; - padding-bottom: env(safe-area-inset-bottom); - background: var(--color-bg-primary); - backdrop-filter: $backdrop-blur-filter; - border-top: 1px solid var(--color-border-primary); - box-sizing: border-box; - - .layout-multiple-columns & { - display: none; - } - - &__items { - display: grid; - grid-auto-columns: minmax(0, 1fr); - grid-auto-flow: column; - padding: 0 16px; - - &.active { - flex: 1; - padding: 0; - } - } - - &__sign-up { - display: flex; - align-items: center; - gap: 4px; - padding-inline-start: 16px; - } - - &__item { - display: flex; - flex-direction: column; - align-items: center; - background: transparent; - border: none; - gap: 8px; - font-size: 12px; - font-weight: 500; - line-height: 16px; - padding-top: 11px; - padding-bottom: 15px; - border-top: 4px solid transparent; - text-decoration: none; - color: inherit; - - &.active { - color: var(--color-text-brand); - } - - &:focus { - outline: 0; - } - - &:focus-visible { - border-top-color: var(--color-text-brand); - border-radius: 0; - } - } -} - -.tabs-bar__wrapper { - background: var(--color-bg-primary); - backdrop-filter: $backdrop-blur-filter; - position: sticky; - top: 0; - z-index: 2; - border-top: 0; - - @media screen and (min-width: $no-gap-breakpoint) { - border-top: 10px solid var(--color-bg-ambient); - } -} - -.react-swipeable-view-container { - &, - .columns-area, - .drawer, - .column { - height: 100%; - } -} - -.react-swipeable-view-container > * { - display: flex; - align-items: center; - justify-content: center; - height: 100%; -} - -.column { - width: clamp(380px, calc((100% - 350px) / 4), 400px); - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - - > .scrollable { - border: 1px solid var(--color-border-primary); - border-top: 0; - border-radius: 0 0 4px 4px; - - &.about, - &.privacy-policy { - border-top: 1px solid var(--color-border-primary); - border-radius: 4px; - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 0; - border-bottom: 0; - } - } - } -} - -.column__alert { - --alert-height: 54px; - - position: sticky; - bottom: 0; - z-index: 10; - box-sizing: border-box; - display: grid; - grid-template-rows: minmax(var(--alert-height), max-content); - align-items: end; - width: 100%; - max-width: 360px; - padding: 1rem; - margin: auto auto 0; - overflow: clip; - pointer-events: none; - - @media (max-width: #{$mobile-menu-breakpoint - 1}) { - // Compensate for mobile menubar - bottom: var(--mobile-bottom-nav-height); - } - - & > * { - // Make all nested alerts occupy the same space - // rather than stack - grid-area: 1 / 1; - pointer-events: initial; - } -} - -.ui { - --mobile-bottom-nav-height: 55px; - --last-content-item-border-width: 2px; - - flex: 0 0 auto; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - - @media (max-width: #{$mobile-menu-breakpoint - 1}) { - padding-bottom: calc( - var(--mobile-bottom-nav-height) - var(--last-content-item-border-width) - ); - } -} - -.drawer { - width: 350px; - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow-y: hidden; -} - -.drawer__tab { - display: flex; - flex: 1 1 auto; - padding: 13px 3px 11px; - color: var(--color-text-secondary); - text-decoration: none; - text-align: center; - font-size: 16px; - align-items: center; - justify-content: center; -} - -.column, -.drawer { - flex: 1 1 100%; -} - -@media screen and (width > $mobile-breakpoint) { - .columns-area { - padding: 0; - } - - .column, - .drawer { - flex: 0 0 auto; - padding: 10px; - padding-inline-start: 5px; - padding-inline-end: 5px; - - &:first-child { - padding-inline-start: 10px; - } - - &:last-child { - padding-inline-end: 10px; - } - } - - .columns-area > div { - .column, - .drawer { - padding-inline-start: 5px; - padding-inline-end: 5px; - } - } -} - -.columns-area--mobile { - flex-direction: column; - width: 100%; - height: 100%; - margin: 0 auto; - - .column, - .drawer { - width: 100%; - height: 100%; - padding: 0; - } - - .account-card { - margin-bottom: 0; - } - - .filter-form { - display: flex; - flex-wrap: wrap; - } - - .autosuggest-textarea__textarea { - font-size: 16px; - } - - .search__input { - line-height: 18px; - font-size: 16px; - padding-block: 15px; - padding-inline-end: 30px; - } - - .scrollable { - overflow: visible; - - @supports (display: grid) { - contain: content; - } - } - - @media screen and (min-width: $no-gap-breakpoint) { - padding: 10px 0; - padding-top: 0; - } -} - -@media screen and (min-width: $no-gap-breakpoint) { - .react-swipeable-view-container .columns-area--mobile { - height: calc(100% - 10px) !important; - } - - .getting-started__wrapper { - margin-bottom: 10px; - } - - .search-page .search { - display: none; - } - - .navigation-panel__legal, - .navigation-panel__compose-button, - .navigation-panel .navigation-bar { - display: none !important; - } -} - -@media screen and (max-width: ($no-gap-breakpoint - 1px)) { - $sidebar-width: 285px; - - .columns-area__panels__main { - width: calc(100% - $sidebar-width); - } - - .columns-area__panels { - min-height: 100vh; - min-height: 100dvh; - gap: 0; - padding-inline: 0; - } - - .columns-area__panels__pane--navigational { - min-width: $sidebar-width; - - .columns-area__panels__pane__inner { - width: $sidebar-width; - } - - .navigation-panel { - margin: 0; - border-inline-start: 1px solid var(--color-border-primary); - height: 100dvh; - } - - .navigation-panel__banner, - .navigation-panel__logo, - .getting-started__trends { - display: none; - } - } - - .layout-single-column { - .column > .scrollable, - .tabs-bar__wrapper .column-header, - .tabs-bar__wrapper .column-back-button, - .explore__search-header, - .column-search-header { - border-left: 0; - border-right: 0; - } - - .column-header, - .column-back-button, - .scrollable, - .error-column { - border-radius: 0 !important; - } - - .column-header, - .column-back-button { - border-top: 0; - } - } -} - -@media screen and (width <= 759px) { - .columns-area__panels__main { - width: 100%; - } - - .columns-area__panels__pane--navigational { - position: fixed; - inset-inline-end: 0; - width: 100%; - height: 100%; - pointer-events: none; - } - - .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { - pointer-events: auto; - background: var(--color-bg-primary); - position: fixed; - width: 284px + 70px; - inset-inline-end: -70px; - touch-action: pan-y; - - .navigation-panel { - width: 284px; - overflow-y: auto; - scrollbar-width: thin; - - &__menu { - flex-shrink: 0; - min-height: none; - overflow: hidden; - padding-bottom: calc(65px + env(safe-area-inset-bottom)); - } - - &__logo { - display: none; - } - } - } -} - -.columns-area__panels__pane--navigational { - transition: background 500ms; -} - -.columns-area__panels__pane--overlay { - pointer-events: auto; - background: rgb(from var(--color-bg-overlay) r g b / 50%); - z-index: 3; - - .columns-area__panels__pane__inner { - box-shadow: var(--dropdown-shadow); - } -} - -@media screen and (width >= 760px) { - .ui__navigation-bar { - display: none; - } -} - -.explore-suggestions-card { - padding: 12px 16px; - gap: 8px; - display: flex; - flex-direction: column; - border-bottom: 1px solid var(--color-border-primary); - - &:last-child { - border-bottom: 0; - } - - &__source { - font-size: 13px; - line-height: 16px; - color: var(--color-text-tertiary); - - @container (width >= 400px) { - padding-inline-start: 60px; - } - } - - &__body { - display: flex; - gap: 12px; - align-items: center; - justify-content: end; - } - - &__avatar { - flex-shrink: 0; - - @container (width < 360px) { - width: 35px !important; - height: 35px !important; - } - } - - &__link { - flex: 1 1 auto; - display: flex; - gap: 12px; - align-items: center; - text-decoration: none; - min-width: 0; - - &:hover, - &:focus-visible { - .display-name__html { - text-decoration: underline; - } - } - - .display-name { - font-size: 15px; - line-height: 20px; - color: var(--color-text-primary); - - strong { - font-weight: 700; - } - - &__account { - color: var(--color-text-secondary); - display: block; - } - } - } - - &__actions { - display: flex; - align-items: center; - gap: 8px; - justify-content: end; - - .button { - min-width: 80px; - } - } - - &__dismiss-button { - @container (width < 400px) { - display: none; - } - } -} - -@media screen and (max-width: ($no-gap-breakpoint - 1px)) { - .columns-area__panels__pane--compositional { - display: none; - } -} - -.icon-with-badge { - display: inline-flex; - position: relative; - - &__badge { - position: absolute; - inset-inline-start: 9px; - top: -13px; - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - border: 2px solid var(--color-bg-primary); - padding: 1px 6px; - border-radius: 6px; - font-size: 10px; - font-weight: 500; - line-height: 14px; - } - - &__issue-badge { - position: absolute; - inset-inline-start: 11px; - bottom: 1px; - display: block; - background: var(--color-text-error); - border-radius: 50%; - width: 0.625rem; - height: 0.625rem; - } -} - -.column-link--transparent .icon-with-badge__badge { - border-color: var(--color-bg-primary); -} - -.column-title { - text-align: center; - padding-bottom: 32px; - - h3 { - font-size: 24px; - line-height: 1.5; - font-weight: 700; - margin-bottom: 10px; - } - - p { - font-size: 16px; - line-height: 24px; - font-weight: 400; - color: var(--color-text-secondary); - } - - @media screen and (width >= 600px) { - padding: 40px; - } -} - -.copy-paste-text { - background: var(--color-bg-secondary); - border-radius: 8px; - border: 1px solid var(--color-border-primary); - padding: 16px; - color: var(--color-text-primary); - font-size: 15px; - line-height: 22px; - display: flex; - flex-direction: column; - align-items: flex-end; - transition: border-color 300ms linear; - margin-bottom: 30px; - - &:focus, - &.focused { - transition: none; - outline: 0; - border-color: var(--color-text-brand); - } - - &.copied { - border-color: var(--color-text-success); - transition: none; - } - - textarea { - width: 100%; - height: auto; - background: transparent; - color: inherit; - font: inherit; - border: 0; - padding: 0; - margin-bottom: 30px; - resize: none; - - &:focus { - outline: 0; - } - } -} - -.onboarding__profile { - position: relative; - margin-bottom: 40px + 20px; - margin-top: -20px; - - .app-form__avatar-input { - border: 2px solid var(--color-bg-primary); - position: absolute; - inset-inline-start: -2px; - bottom: -40px; - z-index: 2; - } - - .app-form__header-input { - margin: 0 -20px; - border-radius: 0; - - img { - border-radius: 0; - } - } -} - -.compose-panel { - width: 285px; - margin-top: 10px; - display: flex; - flex-direction: column; - height: calc(100% - 10px); - overflow-y: auto; - scrollbar-width: thin; - - .compose-form { - flex: 1 1 auto; - } -} - -.navigation-panel { - margin-top: 10px; - margin-bottom: 10px; - height: calc(100% - 20px); - overflow: hidden; - display: flex; - flex-direction: column; - - &__menu { - flex: 1 1 auto; - min-height: 0; - overflow-y: auto; - scrollbar-width: thin; - } - - &__list-panel { - &__header { - display: flex; - align-items: center; - padding-inline-end: 4px; - - &__sep { - width: 0; - height: 24px; - border-left: 1px solid var(--color-border-primary); - } - - .column-link { - flex: 1 1 auto; - } - - .icon-button { - padding: 8px; - } - } - - &__items { - padding-inline-start: 24px + 8px; - - .icon { - display: none; - } - } - } - - &__compose-button { - display: flex; - justify-content: flex-start; - padding-top: 8px; - padding-bottom: 8px; - padding-inline-start: 12px - 7px; - padding-inline-end: 12px; - gap: 8px; - margin: 12px; - border-radius: 6px; - font-size: 16px; - font-weight: 600; - line-height: 18px; - - .icon { - width: 24px; - height: 24px; - } - } - - .navigation-bar { - padding: 16px; - } - - .search { - margin: 16px; - margin-bottom: 12px; - } - - .logo { - height: 30px; - width: auto; - } - - &__logo { - margin-bottom: 12px; - } - - .getting-started__trends h4 { - padding: 10px 12px; - padding-inline-start: 16px; - } - - .getting-started__trends .trends__item { - padding: 10px 12px; - padding-inline-start: 16px; - } - - @media screen and (height <= 930px) { - &__portal .trends__item:nth-child(n + 5) { - display: none; - } - } - - @media screen and (height <= (930px - 56px)) { - &__portal .trends__item:nth-child(n + 4) { - display: none; - } - } - - @media screen and (height <= (930px - 56px * 2)) { - &__portal .trends__item:nth-child(n + 3) { - display: none; - } - } - - @media screen and (height <= (930px - 56px * 3)) { - &__portal { - display: none; - } - } -} - -.navigation-panel, -.compose-panel { - hr { - flex: 0 0 auto; - border: 0; - background: transparent; - border-top: 1px solid var(--color-border-primary); - margin: 10px 0; - } - - .flex-spacer { - background: transparent; - } -} - -.drawer__pager { - box-sizing: border-box; - padding: 0; - flex-grow: 1; - position: relative; - overflow: hidden; - display: flex; - border-radius: 4px; - border: 1px solid var(--color-border-primary); -} - -.drawer__inner { - position: absolute; - top: 0; - inset-inline-start: 0; - background: var(--color-bg-primary); - box-sizing: border-box; - padding: 0; - display: flex; - flex-direction: column; - overflow: hidden; - overflow-y: auto; - width: 100%; - height: 100%; - z-index: 0; -} - -.drawer__inner__mastodon { - position: relative; - background: var(--color-bg-primary); - flex: 1; - min-height: 47px; - display: none; - contain: content; - - > img { - display: block; - object-fit: contain; - object-position: bottom left; - width: 85%; - height: 100%; - pointer-events: none; - user-select: none; - } - - @media screen and (height >= 640px) { - display: block; - } -} - -.drawer__header { - flex: 0 0 auto; - font-size: 16px; - border: 1px solid var(--color-border-primary); - margin-bottom: 10px; - display: flex; - flex-direction: row; - border-radius: 4px; - overflow: hidden; - - a:hover, - a:focus, - a:active { - color: var(--color-text-primary); - } -} - -.scrollable { - overflow-y: scroll; - overflow-x: hidden; - flex: 1 1 auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: thin; - - &.optionally-scrollable { - overflow-y: auto; - } - - @supports (display: grid) { - // hack to fix Chrome <57 - contain: strict; - } - - &--flex { - display: flex; - flex-direction: column; - } - - &__append { - flex: 1 1 auto; - position: relative; - min-height: 120px; - } - - .scrollable { - flex: 1 1 auto; - } -} - -.scrollable.fullscreen { - @supports (display: grid) { - // hack to fix Chrome <57 - contain: none; - } -} - -.column-back-button { - box-sizing: border-box; - width: 100%; - background: transparent; - border: 1px solid var(--color-border-primary); - border-radius: 4px 4px 0 0; - color: var(--color-text-brand); - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - line-height: inherit; - text-align: unset; - padding: 13px; - margin: 0; - z-index: 3; - outline: 0; - display: flex; - align-items: center; - gap: 5px; - - &:hover { - text-decoration: underline; - } -} - -.column-header__back-button { - display: flex; - align-items: center; - gap: 5px; - background: transparent; - border: 0; - font-family: inherit; - color: var(--color-text-brand); - cursor: pointer; - white-space: nowrap; - font-size: 16px; - padding: 13px; - z-index: 3; - - &:hover { - text-decoration: underline; - } - - &.compact { - padding-inline-end: 5px; - flex: 0 0 auto; - } -} - -.react-toggle { - display: inline-block; - position: relative; - cursor: pointer; - background-color: transparent; - border: 0; - border-radius: 10px; - padding: 0; - user-select: none; - -webkit-tap-highlight-color: transparent; -} - -.react-toggle--focus, -.react-toggle:focus-within { - outline: var(--outline-focus-default); - outline-offset: 2px; - - .react-toggle-track { - border-color: transparent; - } -} - -.react-toggle-screenreader-only, -.sr-only { - border: 0; - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.react-toggle--disabled { - cursor: not-allowed; - opacity: 0.5; - transition: opacity 0.25s; -} - -.react-toggle-track { - width: 32px; - height: 20px; - padding: 0; - border-radius: 10px; - background-color: rgb(from var(--color-bg-brand-softer) r g b / 50%); - border: 1px solid rgb(from var(--color-text-brand) r g b / 50%); - box-sizing: border-box; - - .react-toggle:hover:not(.react-toggle--disabled) & { - background-color: rgb( - from var(--color-bg-brand-softer) r g b / - calc(50% + var(--overlay-strength-brand)) - ); - } - - .react-toggle--checked & { - background-color: var(--color-bg-brand-base); - border-color: var(--color-bg-brand-base); - } - - .react-toggle--checked:not(.react-toggle--disabled):hover & { - background-color: var(--color-bg-brand-base-hover); - } -} - -.react-toggle-track-check, -.react-toggle-track-x { - display: none; -} - -.react-toggle-thumb { - position: absolute; - top: 2px; - inset-inline-start: 2px; - width: 16px; - height: 16px; - border-radius: 50%; - background-color: var(--color-text-on-brand-base); - box-sizing: border-box; - transition: all 0.25s ease; - transition-property: border-color, left; - - .react-toggle--checked & { - inset-inline-start: 32px - 16px - 2px; - border-color: var(--color-bg-brand-base); - } -} - -.follow_requests-unlocked_explanation, -.switch-to-advanced { - color: var(--color-text-secondary); - background-color: var(--color-bg-secondary); - padding: 15px; - border-radius: 4px; - margin-top: 4px; - margin-bottom: 12px; - font-size: 13px; - line-height: 18px; - - a { - color: var(--color-text-brand); - font-weight: bold; - } -} - -.column-link { - display: flex; - align-items: center; - gap: 8px; - width: 100%; - padding: 12px; - font-size: 16px; - font-weight: 400; - text-decoration: none; - overflow: hidden; - white-space: nowrap; - color: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - background: transparent; - border: 0; - border-left: 4px solid transparent; - box-sizing: border-box; - - &:hover, - &:focus, - &:active { - color: var(--color-text-primary); - } - - &.active { - color: var(--color-text-brand); - } - - &:focus { - outline: 0; - } - - &:focus-visible { - border-color: var(--color-text-brand); - border-radius: 0; - } - - &--logo { - background: transparent; - padding: 10px; - - &:hover, - &:focus, - &:active { - background: transparent; - } - } -} - -.column-link__badge { - display: inline-block; - border-radius: 4px; - font-size: 12px; - line-height: 19px; - font-weight: 500; - background: var(--color-bg-primary); - padding: 4px 8px; - margin: -6px 10px; -} - -.column-subheading { - background: var(--color-bg-secondary); - color: var(--color-text-secondary); - padding: 8px 20px; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - cursor: default; -} - -.getting-started__wrapper { - flex: 0 0 auto; -} - -.flex-spacer { - flex: 1 1 auto; -} - -.getting-started { - color: var(--color-text-tertiary); - overflow: auto; - border: 1px solid var(--color-border-primary); - border-top: 0; - - &__trends { - flex: 0 1 auto; - opacity: 1; - animation: fade 150ms linear; - margin-top: 10px; - - h4 { - border-bottom: 1px solid var(--color-border-primary); - padding: 10px; - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - - a { - color: var(--color-text-secondary); - text-decoration: none; - } - } - - .trends__item { - border-bottom: 0; - padding: 10px; - - &__current { - color: var(--color-text-secondary); - } - } - } -} - -.keyboard-shortcuts { - padding: 8px 0 0; - overflow: hidden; - - thead { - position: absolute; - inset-inline-start: -9999px; - } - - td { - padding: 0 10px 8px; - } - - kbd { - display: inline-block; - } -} - -.status-card { - display: flex; - align-items: center; - position: relative; - font-size: 14px; - color: var(--color-text-secondary); - margin-top: 14px; - text-decoration: none; - overflow: hidden; - border: 1px solid var(--color-border-primary); - border-radius: 8px; - contain: inline-size layout paint style; - - &.bottomless { - border-radius: 8px 8px 0 0; - } - - &__actions { - bottom: 0; - inset-inline-start: 0; - position: absolute; - inset-inline-end: 0; - top: 0; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - - & > div { - background: rgb(from var(--color-shadow-primary) r g b / 60%); - border-radius: 8px; - padding: 12px 9px; - backdrop-filter: $backdrop-blur-filter; - flex: 0 0 auto; - display: flex; - justify-content: center; - align-items: center; - } - - button, - a { - display: inline; - color: var(--color-text-primary); - background: transparent; - border: 0; - padding: 0 8px; - text-decoration: none; - font-size: 18px; - line-height: 18px; - - &:hover, - &:active, - &:focus { - color: var(--color-text-primary); - } - } - - a { - font-size: 19px; - position: relative; - bottom: -1px; - } - } -} - -a.status-card { - cursor: pointer; - - &:hover, - &:focus, - &:active { - .status-card__title, - .status-card__host, - .status-card__author, - .status-card__description { - color: var(--color-text-brand); - } - } -} - -.status-card a { - color: inherit; - text-decoration: none; - - &:hover, - &:focus, - &:active { - .status-card__title, - .status-card__host, - .status-card__author, - .status-card__description { - color: var(--color-text-brand); - } - } -} - -.status-card-photo { - cursor: zoom-in; - display: block; - text-decoration: none; - width: 100%; - height: auto; - margin: 0; -} - -.status-card-video { - // Firefox has a bug where frameborder=0 iframes add some extra blank space - // see https://bugzilla.mozilla.org/show_bug.cgi?id=155174 - overflow: hidden; - - iframe { - width: 100%; - height: 100%; - } -} - -.status-card__title { - display: block; - font-weight: 700; - font-size: 19px; - line-height: 24px; - color: var(--color-text-primary); - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.status-card.expanded .status-card__title { - white-space: normal; - display: -webkit-box; - line-clamp: 2; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} - -.status-card__content { - flex: 1 1 auto; - overflow: hidden; - padding: 15px; - box-sizing: border-box; - max-width: 100%; -} - -.status-card__host { - display: block; - font-size: 14px; - margin-bottom: 8px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.status-card__author { - display: block; - margin-top: 8px; - font-size: 14px; - color: var(--color-text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - strong { - font-weight: 500; - } -} - -.status-card__description { - display: block; - margin-top: 8px; - font-size: 14px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.status-card__image { - flex: 0 0 auto; - width: 120px; - aspect-ratio: 1; - background: var(--color-bg-secondary); - position: relative; - - & > .icon { - width: 18px; - height: 18px; - position: absolute; - transform-origin: 50% 50%; - top: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - } -} - -.status-card__image-image { - display: block; - margin: 0; - width: 100%; - height: 100%; - object-fit: cover; - background-size: cover; - background-position: center center; -} - -.status-card__image-preview { - display: block; - margin: 0; - width: 100%; - height: 100%; - object-fit: fill; - position: absolute; - top: 0; - inset-inline-start: 0; - z-index: 0; - background: var(--color-bg-primary); - - &--hidden { - display: none; - } -} - -.status-card.expanded { - flex-direction: column; - align-items: flex-start; -} - -.status-card.expanded .status-card__image { - width: 100%; - aspect-ratio: auto; -} - -.status-card__image, -.status-card__image-image, -.status-card__image-preview { - border-start-start-radius: 8px; - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: 8px; -} - -.status-card.expanded .status-card__image, -.status-card.expanded .status-card__image-image, -.status-card.expanded .status-card__image-preview { - border-start-end-radius: 8px; - border-end-end-radius: 0; - border-end-start-radius: 0; -} - -.status-card.bottomless .status-card__image, -.status-card.bottomless .status-card__image-image, -.status-card.bottomless .status-card__image-preview { - border-end-end-radius: 0; - border-end-start-radius: 0; -} - -.status-card.expanded > a { - width: 100%; -} - -.load-more { - display: flex; - align-items: center; - justify-content: center; - color: var(--color-text-primary); - background-color: transparent; - border: 0; - font-size: inherit; - line-height: inherit; - width: 100%; - padding: 15px; - box-sizing: border-box; - text-decoration: none; - - &--large { - padding-block: 32px; - } - - &:is(button) { - &:hover { - background: var(--color-bg-secondary); - } - - &:focus-visible { - outline: 2px solid var(--color-text-brand); - outline-offset: -2px; - } - } - - .icon { - width: 22px; - height: 22px; - } -} - -.load-gap { - border-bottom: 1px solid var(--color-border-primary); -} - -.timeline-hint { - text-align: center; - color: var(--color-text-secondary); - padding: 16px; - box-sizing: border-box; - width: 100%; - font-size: 14px; - line-height: 21px; - - strong { - font-weight: 500; - } - - a { - color: var(--color-text-brand); - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - color: var(--color-text-brand-soft); - } - } - - &--with-descendants { - border-top: 1px solid var(--color-border-primary); - } -} - -.regeneration-indicator { - color: var(--color-text-secondary); - border: 1px solid var(--color-border-primary); - border-top: 0; - cursor: default; - display: flex; - flex: 1 1 auto; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 20px; - - &__figure { - display: block; - width: 100%; - height: auto; - max-width: 350px; - margin-top: -50px; - } - - &__label { - text-align: center; - font-size: 16px; - - strong { - font-weight: 500; - display: block; - margin-bottom: 10px; - color: var(--color-text-secondary); - } - - span { - font-size: 15px; - } - } -} - -.column-header__wrapper { - position: relative; - flex: 0 0 auto; - z-index: 1; - - &.active { - box-shadow: 0 1px 0 var(--color-bg-brand-softer); - - &::before { - display: block; - content: ''; - position: absolute; - bottom: -13px; - inset-inline-start: 0; - inset-inline-end: 0; - margin: 0 auto; - width: 60%; - pointer-events: none; - height: 28px; - z-index: 1; - background: radial-gradient( - ellipse, - rgb(from var(--color-bg-brand-base) r g b / 23%) 0%, - transparent 60% - ); - } - } - - .announcements { - z-index: 1; - position: relative; - } -} - -.column-header__select-row { - border-width: 0 1px 1px; - border-style: solid; - border-color: var(--color-border-primary); - padding: 15px; - display: flex; - align-items: center; - gap: 8px; - - &__checkbox .check-box { - display: flex; - } - - &__select-menu:disabled { - visibility: hidden; - } - - &__mode-button { - margin-left: auto; - color: var(--color-text-brand); - font-weight: bold; - font-size: 14px; - - &:hover { - color: var(--color-text-brand-soft); - } - } -} - -.column-header { - display: flex; - font-size: 16px; - border: 1px solid var(--color-border-primary); - border-radius: 4px 4px 0 0; - flex: 0 0 auto; - cursor: pointer; - position: relative; - z-index: 2; - outline: 0; - - &__title { - display: flex; - align-items: center; - gap: 5px; - margin: 0; - border: 0; - padding: 13px; - padding-inline-end: 0; - color: inherit; - background: transparent; - font: inherit; - text-align: start; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - flex: 1; - - &:focus-visible { - outline: var(--outline-focus-default); - } - - .logo { - height: 24px; - } - } - - .column-header__back-button + &__title { - padding-inline-start: 0; - } - - .column-header__back-button { - flex: 1; - color: var(--color-text-brand); - - &.compact { - flex: 0 0 auto; - color: var(--color-text-primary); - } - } - - &.active { - .column-header__icon { - color: var(--color-text-brand); - text-shadow: 0 0 10px var(--color-bg-brand-softer); - } - } - - &:focus, - &:active { - outline: 0; - } - - &__advanced-buttons { - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px; - padding-top: 0; - - &:first-child { - padding-top: 16px; - } - } -} - -.column-header__buttons { - height: 48px; - display: flex; -} - -.column-header__links { - margin-bottom: 14px; -} - -.column-header__links .text-btn { - margin-inline-end: 10px; -} - -.column-header__button { - display: flex; - justify-content: center; - align-items: center; - border: 0; - color: var(--color-text-primary); - background: transparent; - cursor: pointer; - font-size: 16px; - padding: 0 15px; - - &:last-child { - border-start-end-radius: 4px; - } - - &:hover { - color: var(--color-text-secondary); - } - - &:focus-visible { - outline: var(--outline-focus-default); - } - - &.active { - color: var(--color-text-brand); - - &:hover { - color: var(--color-text-brand); - } - } - - &:disabled { - color: var(--color-text-disabled); - cursor: default; - } -} - -.no-reduce-motion .column-header__button .icon-sliders { - transition: transform 150ms ease-in-out; -} - -.column-header__collapsible { - max-height: 70vh; - overflow: hidden; - overflow-y: auto; - color: var(--color-text-secondary); - transition: - max-height 150ms ease-in-out, - opacity 300ms linear; - opacity: 1; - z-index: 1; - position: relative; - border-left: 1px solid var(--color-border-primary); - border-right: 1px solid var(--color-border-primary); - border-bottom: 1px solid var(--color-border-primary); - - @media screen and (max-width: $no-gap-breakpoint) { - border-left: 0; - border-right: 0; - } - - &.collapsed { - max-height: 0; - opacity: 0.5; - border-bottom: 0; - } - - &.animating { - overflow-y: hidden; - } - - hr { - height: 0; - background: transparent; - border: 0; - border-top: 1px solid var(--color-border-primary); - margin: 10px 0; - } -} - -.column-header__collapsible-inner { - border-top: 0; -} - -.column-header__setting-btn { - &:hover, - &:focus { - color: var(--color-text-secondary); - text-decoration: underline; - } -} - -.column-header__collapsible__extra + .column-header__setting-btn { - padding-top: 5px; -} - -.column-header__permission-btn { - display: inline; - font-weight: inherit; - text-decoration: underline; -} - -.column-header__setting-arrows { - display: flex; - align-items: center; -} - -.text-btn { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 0; - font-family: inherit; - font-size: inherit; - font-weight: inherit; - color: inherit; - border: 0; - background: transparent; - cursor: pointer; - text-decoration: none; - - .icon { - width: 13px; - height: 13px; - } -} - -.column-header__issue-btn { - color: var(--color-text-error); - - &:hover { - text-decoration: underline; - } -} - -.loading-indicator { - color: var(--color-text-secondary); - font-size: 12px; - font-weight: 400; - text-transform: uppercase; - overflow: visible; - position: absolute; - top: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - display: flex; - align-items: center; - justify-content: center; -} - -.load-more .loading-indicator, -.button .loading-indicator, -.icon-button .loading-indicator { - position: static; - transform: none; - color: inherit; - - .circular-progress { - color: inherit; - width: 22px; - height: 22px; - } -} - -.button--compact .loading-indicator .circular-progress { - width: 17px; - height: 17px; -} - -.icon-button .loading-indicator .circular-progress { - color: var(--color-text-tertiary); - width: 12px; - height: 12px; - margin: 6px; -} - -.load-more .loading-indicator .circular-progress { - color: var(--color-text-tertiary); -} - -.circular-progress { - color: var(--color-text-tertiary); - animation: 1.4s linear 0s infinite normal none running simple-rotate; - - circle { - stroke: currentColor; - stroke-dasharray: 80px, 200px; - stroke-dashoffset: 0; - animation: circular-progress 1.4s ease-in-out infinite; - } -} - -@keyframes circular-progress { - 0% { - stroke-dasharray: 1px, 200px; - stroke-dashoffset: 0; - } - - 50% { - stroke-dasharray: 100px, 200px; - stroke-dashoffset: -15px; - } - - 100% { - stroke-dasharray: 100px, 200px; - stroke-dashoffset: -125px; - } -} - -@keyframes simple-rotate { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -@keyframes spring-rotate-in { - 0% { - transform: rotate(0deg); - } - - 30% { - transform: rotate(-484.8deg); - } - - 60% { - transform: rotate(-316.7deg); - } - - 90% { - transform: rotate(-375deg); - } - - 100% { - transform: rotate(-360deg); - } -} - -@keyframes spring-rotate-out { - 0% { - transform: rotate(-360deg); - } - - 30% { - transform: rotate(124.8deg); - } - - 60% { - transform: rotate(-43.27deg); - } - - 90% { - transform: rotate(15deg); - } - - 100% { - transform: rotate(0deg); - } -} - -.video-error-cover { - align-items: center; - background: var(--color-bg-primary); - color: var(--color-text-primary); - cursor: pointer; - display: flex; - flex-direction: column; - height: 100%; - justify-content: center; - margin-top: 8px; - position: relative; - text-align: center; - z-index: 100; -} - -.spoiler-button { - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - position: absolute; - z-index: 100; - - &--hidden { - display: none; - } - - &--click-thru { - pointer-events: none; - } - - &__overlay { - display: flex; - align-items: center; - justify-content: center; - background: transparent; - width: 100%; - height: 100%; - padding: 0; - margin: 0; - border: 0; - color: var(--color-text-on-media); - line-height: 20px; - font-size: 14px; - - &__label { - background-color: var(--color-bg-media); - backdrop-filter: $backdrop-blur-filter; - border-radius: 8px; - padding: 12px 16px; - display: flex; - align-items: center; - justify-content: center; - gap: 4px; - flex-direction: column; - font-weight: 600; - } - - &__action { - font-weight: 400; - font-size: 13px; - } - - &:hover, - &:focus { - .spoiler-button__overlay__label { - background-color: rgb(from var(--color-bg-media-base) r g b / 90%); - } - } - } -} - -.account--panel { - border-top: 1px solid var(--color-border-primary); - border-bottom: 1px solid var(--color-border-primary); - display: flex; - flex-direction: row; - padding: 10px 0; -} - -.account--panel__button, -.detailed-status__button { - flex: 1 1 auto; - text-align: center; -} - -.column-settings { - display: flex; - flex-direction: column; - - &__section { - // FIXME: Legacy - color: var(--color-text-secondary); - cursor: default; - display: block; - font-weight: 500; - } - - .column-header__links { - margin: 0; - } - - section { - padding: 16px; - border-bottom: 1px solid var(--color-border-primary); - - &:last-child { - border-bottom: 0; - } - } - - h3 { - font-size: 16px; - line-height: 24px; - letter-spacing: 0.5px; - font-weight: 500; - color: var(--color-text-primary); - margin-bottom: 16px; - } - - &__row { - display: flex; - flex-direction: column; - gap: 12px; - } - - .app-form__toggle { - &__toggle > div { - border: 0; - } - } -} - -.column-settings__hashtags { - margin-top: 15px; - - .column-settings__row { - margin-bottom: 15px; - } - - .column-select { - &__control { - @include search-input; - - &::placeholder { - color: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: var(--color-bg-secondary); - } - - @media screen and (width <= 600px) { - font-size: 16px; - } - } - - &__placeholder { - color: var(--color-text-tertiary); - padding-inline-start: 2px; - font-size: 12px; - } - - &__value-container { - padding-inline-start: 6px; - } - - &__multi-value { - background: var(--color-bg-secondary); - - &__remove { - cursor: pointer; - - &:hover, - &:active, - &:focus { - background: var(--color-bg-brand-softer); - color: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - } - } - } - - &__multi-value__label, - &__input, - &__input-container { - color: var(--color-text-secondary); - } - - &__clear-indicator, - &__dropdown-indicator { - cursor: pointer; - transition: none; - color: var(--color-text-tertiary); - - &:hover, - &:active, - &:focus { - color: var(--color-text-secondary); - } - } - - &__indicator-separator { - background-color: var(--color-border-primary); - } - - &__menu { - @include search-popout; - - padding: 0; - background: var(--color-bg-elevated); - } - - &__menu-list { - padding: 6px; - } - - &__option { - color: var(--color-text-primary); - border-radius: 4px; - font-size: 14px; - - &--is-focused, - &--is-selected { - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - } - } - } -} - -.column-settings__row { - .text-btn:not(.column-header__permission-btn) { - margin-bottom: 15px; - } -} - -.setting-toggle { - display: flex; - align-items: center; - gap: 8px; -} - -.setting-toggle__label { - color: var(--color-text-secondary); -} - -.limited-account-hint { - p { - color: var(--color-text-primary); - font-size: 15px; - font-weight: 500; - margin-bottom: 20px; - } -} - -.empty-column-indicator { - color: var(--color-text-secondary); - text-align: center; - padding: 20px; - font-size: 14px; - line-height: 20px; - font-weight: 400; - cursor: default; - display: flex; - flex: 1 1 auto; - align-items: center; - justify-content: center; - - & > span { - max-width: 500px; - } - - a { - color: var(--color-text-brand); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.empty-column-indicator { - &__arrow { - position: absolute; - top: 50%; - inset-inline-start: 50%; - pointer-events: none; - transform: translate(100%, -100%) rotate(12deg); - transform-origin: center; - } -} - -.follow_requests-unlocked_explanation { - margin: 16px; - margin-bottom: 0; -} - -.error-column { - padding: 20px; - border: 1px solid var(--color-border-primary); - border-radius: 4px; - display: flex; - flex: 1 1 auto; - align-items: center; - justify-content: center; - flex-direction: column; - cursor: default; - - &__image { - width: 70%; - max-width: 350px; - margin-top: -50px; - } - - &__message { - text-align: center; - color: var(--color-text-secondary); - font-size: 15px; - line-height: 22px; - - h1 { - font-size: 28px; - line-height: 33px; - font-weight: 700; - margin-bottom: 15px; - color: var(--color-text-primary); - } - - p { - max-width: 48ch; - } - - &__actions { - margin-top: 30px; - display: flex; - gap: 10px; - align-items: center; - justify-content: center; - } - } -} - -@keyframes heartbeat { - 0% { - transform: scale(1); - animation-timing-function: ease-out; - } - - 10% { - transform: scale(0.91); - animation-timing-function: ease-in; - } - - 17% { - transform: scale(0.98); - animation-timing-function: ease-out; - } - - 33% { - transform: scale(0.87); - animation-timing-function: ease-in; - } - - 45% { - transform: scale(1); - animation-timing-function: ease-out; - } -} - -.no-reduce-motion .pulse-loading { - transform-origin: center center; - animation: heartbeat 1.5s ease-in-out infinite both; -} - -.emoji-picker-dropdown__menu { - position: relative; - margin-top: 5px; - z-index: 2; - background: var(--color-bg-elevated); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - box-shadow: var(--dropdown-shadow); - border-radius: 5px; - - .emoji-mart-scroll { - transition: opacity 200ms ease; - } - - &.selecting .emoji-mart-scroll { - opacity: 0.5; - } -} - -.emoji-picker-dropdown__modifiers { - position: absolute; - top: 60px; - inset-inline-end: 11px; - cursor: pointer; -} - -.emoji-picker-dropdown__modifiers__menu { - position: absolute; - z-index: 4; - top: -5px; - inset-inline-start: -9px; - background: var(--color-bg-elevated); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - box-shadow: var(--dropdown-shadow); - overflow: hidden; - - button { - display: block; - cursor: pointer; - border: 0; - padding: 4px 8px; - background: transparent; - - &:hover, - &:focus, - &:active { - background: var(--color-border-primary); - } - } - - .emoji-mart-emoji { - height: 22px; - } -} - -.emoji-mart-emoji { - span { - background-repeat: no-repeat; - } -} - -.upload-area { - align-items: center; - background: rgb(from var(--color-bg-overlay) r g b / 80%); - display: flex; - height: 100vh; - justify-content: center; - inset-inline-start: 0; - opacity: 0; - position: fixed; - top: 0; - visibility: hidden; - width: 100vw; - z-index: 2000; - - * { - pointer-events: none; - } -} - -.upload-area__drop { - width: 320px; - height: 160px; - display: flex; - box-sizing: border-box; - position: relative; - padding: 8px; -} - -.upload-area__background { - position: absolute; - top: 0; - inset-inline-end: 0; - bottom: 0; - inset-inline-start: 0; - z-index: -1; - border-radius: 4px; - background: var(--color-bg-elevated); - box-shadow: 0 0 5px var(--color-shadow-primary); -} - -.upload-area__content { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - color: var(--color-text-primary); - font-size: 18px; - font-weight: 500; - border: 2px dashed var(--color-border-primary); - border-radius: 4px; -} - -.upload-progress { - color: var(--color-text-secondary); - overflow: hidden; - display: flex; - gap: 8px; - align-items: center; - padding: 0 12px; - - .icon { - width: 24px; - height: 24px; - color: var(--color-text-brand); - } - - span { - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - display: block; - } -} - -.upload-progress__message { - flex: 1 1 auto; -} - -.upload-progress__backdrop { - width: 100%; - height: 6px; - border-radius: 6px; - background: var(--color-bg-primary); - position: relative; - margin-top: 5px; -} - -.upload-progress__tracker { - position: absolute; - inset-inline-start: 0; - top: 0; - height: 6px; - background: var(--color-text-brand); - border-radius: 6px; -} - -.emoji-button { - display: block; - padding-top: 5px; - padding-bottom: 2px; - padding-inline-start: 2px; - padding-inline-end: 5px; - outline: 0; - cursor: pointer; - - img { - filter: grayscale(100%); - opacity: 0.8; - display: block; - margin: 0; - width: 22px; - height: 22px; - } - - &:hover, - &:active, - &:focus { - img { - opacity: 1; - filter: none; - border-radius: 100%; - } - } - - &:focus-visible { - img { - outline: var(--outline-focus-default); - } - } -} - -.dropdown--active .emoji-button img { - opacity: 1; - filter: none; -} - -.privacy-dropdown__dropdown, -.language-dropdown__dropdown, -.visibility-dropdown__dropdown { - box-shadow: var(--dropdown-shadow); - background: var(--color-bg-elevated); - border: 1px solid var(--color-border-primary); - padding: 4px; - border-radius: 4px; - overflow: hidden; - z-index: 2; - - &.top { - transform-origin: 50% 100%; - } - - &.bottom { - transform-origin: 50% 0; - } -} - -.modal-root__container .privacy-dropdown { - flex-grow: 0; -} - -.modal-root__container .privacy-dropdown__dropdown { - pointer-events: auto; - z-index: 9999; -} - -.privacy-dropdown__option, -.visibility-dropdown__option { - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - padding: 8px 12px; - cursor: pointer; - display: flex; - align-items: center; - gap: 12px; - border-radius: 4px; - color: var(--color-text-primary); - - // Make sure adjacent hover/active states don't have a meeting radius. - &:hover + &:is(:focus, .active), - &:is(:focus, .active) + &:hover, - &:is(:focus, .active) + &:is(:focus, .active) { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - &:hover:has(+ :focus, .active), - &:is(:focus, .active):has(+ :hover), - &:is(:focus, .active):has(+ :is(:focus, .active)) { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - - &:hover, - &:active { - background: var(--color-bg-secondary); - } - - &:focus, - &.active { - background: var(--color-bg-brand-base); - color: var(--color-text-on-brand-base); - outline: 0; - - .privacy-dropdown__option__content, - .privacy-dropdown__option__content strong, - .privacy-dropdown__option__additional, - .visibility-dropdown__option__content, - .visibility-dropdown__option__content strong, - .visibility-dropdown__option__additional { - color: var(--color-text-on-brand-base); - } - } - - &__additional { - display: flex; - align-items: center; - justify-content: center; - color: var(--color-text-secondary); - cursor: help; - } -} - -.privacy-dropdown__option__icon, -.visibility-dropdown__option__icon { - display: flex; - align-items: center; - justify-content: center; -} - -.privacy-dropdown__option__content, -.visibility-dropdown__option__content { - flex: 1 1 auto; - color: var(--color-text-secondary); - - strong { - color: var(--color-text-primary); - font-weight: 500; - display: block; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } -} - -.language-dropdown { - &__dropdown { - width: 300px; - padding: 0; - - .emoji-mart-search { - padding: 10px; - background: var(--color-bg-elevated); - - input { - padding: 8px 12px; - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - - @media screen and (width <= 600px) { - font-size: 16px; - line-height: 24px; - letter-spacing: 0.5px; - } - } - } - - .emoji-mart-search-icon { - inset-inline-end: 15px; - opacity: 1; - color: var(--color-text-primary); - - .icon { - width: 18px; - height: 18px; - } - - &:disabled { - color: var(--color-text-secondary); - } - } - - .emoji-mart-scroll { - padding: 0 10px 10px; - background: var(--color-bg-elevated); - } - - &__results { - &__item { - display: flex; - align-items: center; - gap: 0.5em; - cursor: pointer; - color: var(--color-text-primary); - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - font-weight: 500; - padding: 8px 12px; - border-radius: 4px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - &__common-name { - color: var(--color-text-secondary); - font-weight: 400; - } - - &:active, - &:hover { - background: var(--color-bg-secondary); - } - - &:focus, - &.active { - background: var(--color-bg-brand-base); - color: var(--color-text-on-brand-base); - outline: 0; - - .language-dropdown__dropdown__results__item__common-name { - color: var(--color-text-on-brand-base); - } - } - } - } - } -} - -.visibility-modal { - &__quote-warning { - color: var(--color-text-primary); - background: var(--color-bg-warning-softer); - padding: 16px; - border-radius: 4px; - - h3 { - font-weight: 500; - margin-bottom: 4px; - } - - p { - font-size: 0.8em; - } - } -} - -.visibility-dropdown { - &__overlay[data-popper-placement] { - z-index: 9999; - } - - &.disabled { - opacity: 0.6; - cursor: default; - } - - &__label { - display: block; - font-weight: 500; - margin-bottom: 8px; - } - - &__button { - display: flex; - align-items: center; - color: var(--color-text-primary); - background: var(--color-bg-secondary-solid); - border: 1px solid var(--color-border-primary); - padding: 8px 12px; - width: 100%; - text-align: left; - border-radius: 4px; - font-size: 14px; - height: 40px; - - &:disabled { - cursor: default; - } - } - - &__icon { - margin-inline: auto -4px; - width: 18px; - height: 18px; - opacity: 0.5; - } - - &__helper { - margin-top: 4px; - font-size: 0.8em; - color: var(--color-text-tertiary); - } -} - -.search { - margin-bottom: 32px; - position: relative; - - .layout-multiple-columns & { - margin-bottom: 10px; - } - - &__popout { - box-sizing: border-box; - display: none; - position: absolute; - inset-inline-start: 0; - margin-top: -2px; - width: 100%; - background: var(--color-bg-elevated); - border: 1px solid var(--color-border-primary); - border-radius: 0 0 4px 4px; - box-shadow: var(--dropdown-shadow); - z-index: 99; - font-size: 13px; - padding: 15px 5px; - - h4 { - text-transform: uppercase; - color: var(--color-text-secondary); - font-weight: 500; - padding: 0 10px; - margin-bottom: 10px; - } - - .icon-button { - padding: 0; - color: var(--color-text-secondary); - } - - .icon { - width: 18px; - height: 18px; - } - - &__menu { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - - &__message { - color: var(--color-text-secondary); - padding: 0 10px; - } - - &__item { - display: block; - box-sizing: border-box; - width: 100%; - border: 0; - font: inherit; - background: transparent; - color: var(--color-text-secondary); - padding: 10px; - cursor: pointer; - border-radius: 4px; - text-align: start; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - - &--flex { - display: flex; - justify-content: space-between; - } - - .icon-button { - transition: none; - } - - &:hover, - &:focus, - &:active, - &.selected { - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - - .icon-button { - color: inherit; - } - } - - mark { - background: transparent; - font-weight: 700; - color: var(--color-text-primary); - } - - span { - overflow: inherit; - text-overflow: inherit; - } - } - } - } - - &.active { - .search__input { - border-radius: 4px 4px 0 0; - } - - .search__popout { - display: block; - } - } -} - -.search__input { - @include search-input; - - display: block; - padding: 12px 16px; - padding-inline-start: 16px + 15px + 8px; - line-height: normal; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } -} - -.search__icon-wrapper { - position: absolute; - top: 14px; - display: grid; - margin-inline-start: 16px - 2px; - width: 20px; - height: 20px; - - .icon { - width: 100%; - height: 100%; - } - - &:not(.has-value) { - pointer-events: none; - } -} - -.search__icon { - grid-area: 1 / 1; - transition: all 100ms linear; - transition-property: transform, opacity; - color: var(--color-text-secondary); -} - -.search__icon.icon-search { - .has-value & { - pointer-events: none; - opacity: 0; - transform: rotate(90deg); - } -} - -.search__icon--clear-button { - background: transparent; - border: 0; - padding: 0; - width: 20px; - height: 20px; - border-radius: 100%; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus { - outline: 0 !important; - } - - &:focus-visible { - box-shadow: 0 0 0 2px var(--color-text-brand); - } - - &[aria-hidden='true'] { - pointer-events: none; - opacity: 0; - transform: rotate(-90deg); - } -} - -.search-results__section { - border-bottom: 1px solid var(--color-border-primary); - - &:last-child { - border-bottom: 0; - } - - &__header { - border-bottom: 1px solid var(--color-border-primary); - background: var(--color-bg-tertiary); - padding: 15px; - font-weight: 500; - font-size: 14px; - color: var(--color-text-secondary); - display: flex; - justify-content: space-between; - - h3 { - display: flex; - align-items: center; - gap: 5px; - } - - button { - color: var(--color-text-brand); - padding: 0; - border: 0; - background: 0; - font: inherit; - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } - } - - .account:last-child, - & > div:last-child .status { - border-bottom: 0; - } -} - -.search-results__info { - padding: 20px; - color: var(--color-text-secondary); - text-align: center; -} - -.modal-root { - position: relative; - z-index: 9998; -} - -.modal-root__overlay { - position: fixed; - top: 0; - inset-inline-start: 0; - inset-inline-end: 0; - bottom: 0; - opacity: 0.9; - background: var(--color-bg-overlay); - transition: background 0.5s; -} - -.modal-root__container { - position: fixed; - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - max-width: 100vw; - max-height: 100vh; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - align-content: space-around; - z-index: 9999; - pointer-events: none; - user-select: none; - overscroll-behavior: none; -} - -.modal-root__modal { - pointer-events: auto; - user-select: text; - display: flex; - max-width: 100vw; - - @media screen and (width <= $mobile-breakpoint) { - margin-top: auto; - } -} - -.video-modal .video-player { - max-height: 80vh; - max-width: 100vw; -} - -.audio-modal__container { - width: 50vw; -} - -.media-modal { - width: 100%; - height: 100%; - position: relative; - touch-action: pan-y; - - &__buttons { - position: absolute; - inset-inline-end: 8px; - top: 8px; - z-index: 100; - display: flex; - gap: 8px; - align-items: center; - - .icon-button { - --default-icon-color: var(--color-text-on-media); - --default-bg-color: transparent; - --hover-icon-color: var(--color-text-on-media); - --hover-bg-color: rgb( - from var(--color-text-on-media) r g b / - var(--overlay-strength-secondary) - ); - - padding: 8px; - - .icon { - width: 24px; - height: 24px; - filter: var(--overlay-icon-shadow); - } - } - } -} - -.media-modal__closer { - display: flex; - position: absolute; - top: 0; - inset-inline-start: 0; - inset-inline-end: 0; - bottom: 0; - - > div { - flex-shrink: 0; - overflow: auto; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - } -} - -.media-modal__navigation { - position: absolute; - top: 0; - inset-inline-start: 0; - inset-inline-end: 0; - bottom: 0; - pointer-events: none; - transition: opacity 0.3s linear; - will-change: opacity; - - * { - pointer-events: auto; - } - - &.media-modal__navigation--hidden { - opacity: 0; - - * { - pointer-events: none; - } - } -} - -.media-modal__nav { - background: transparent; - box-sizing: border-box; - border: 0; - color: var(--color-text-on-media); - cursor: pointer; - display: flex; - align-items: center; - font-size: 24px; - height: 20vmax; - margin: auto 0; - padding: 30px 5px; - position: absolute; - top: 0; - bottom: 0; - transform: scaleX(var(--text-x-direction)); - - .icon { - border-radius: 5px; - padding: 10px; - } - - &:hover .icon, - &:focus .icon, - &:active .icon { - background: rgb( - from var(--color-text-on-media) r g b / var(--overlay-strength-secondary) - ); - } -} - -.media-modal__nav--prev { - inset-inline-start: 0; -} - -.media-modal__nav--next { - inset-inline-end: 0; -} - -.media-modal__overlay { - max-width: 600px; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - bottom: 0; - margin: 0 auto; - - .picture-in-picture__footer { - border-radius: 0; - border: none; - background: transparent; - backdrop-filter: none; - padding: 16px; - - .icon-button { - --default-icon-color: var(--color-text-on-media); - --default-bg-color: transparent; - --hover-icon-color: var(--color-text-on-media); - --hover-bg-color: rgb( - from var(--color-text-on-media) r g b / var(--overlay-strength-brand) - ); - - .icon { - filter: var(--overlay-icon-shadow); - } - - &.active { - --default-icon-color: var(--color-text-brand); - --hover-icon-color: var(--color-text-brand); - --hover-bg-color: var(--color-bg-brand-soft); - } - - &.star-icon.active { - --default-icon-color: var(--color-text-favourite-highlight); - --hover-icon-color: var(--color-text-favourite-highlight); - --hover-bg-color: rgb( - from var(--color-text-favourite-highlight) r g b / - var(--overlay-strength-brand) - ); - } - - &.disabled { - --default-icon-color: var(--color-text-on-media); - --default-bg-color: transparent; - - cursor: default; - opacity: 0.4; - } - } - } -} - -.media-modal__pagination { - display: flex; - justify-content: center; - margin-bottom: 20px; -} - -.media-modal__page-dot { - flex: 0 0 auto; - background-color: rgb(from var(--color-text-on-media) r g b / 40%); - filter: var(--overlay-icon-shadow); - height: 6px; - width: 6px; - border-radius: 50%; - margin: 0 4px; - padding: 0; - border: 0; - font-size: 0; - transition: background-color 0.2s ease-in-out; - - &.active { - background-color: var(--color-text-on-media); - } - - &:focus { - opacity: 1; - outline: 2px solid var(--color-text-on-media); - outline-offset: 2px; - } -} - -.modal-placeholder { - width: 588px; - min-height: 478px; - flex-direction: column; - background: var(--color-bg-primary); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - border-radius: 16px; - - &__error { - padding: 24px; - display: flex; - align-items: center; - flex-direction: column; - - &__image { - width: 70%; - max-width: 350px; - } - - &__message { - text-align: center; - text-wrap: balance; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - - &__actions { - margin-top: 24px; - display: flex; - gap: 10px; - align-items: center; - justify-content: center; - } - } - } -} - -.safety-action-modal { - width: 600px; - flex-direction: column; - - &__top, - &__bottom { - display: flex; - gap: 8px; - padding: 24px; - flex-direction: column; - background: var(--color-bg-primary); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - } - - &__top { - border-radius: 16px 16px 0 0; - border-bottom: 0; - gap: 16px; - } - - &__bottom { - border-radius: 0 0 16px 16px; - border-top: 0; - - @media screen and (max-width: $mobile-breakpoint) { - border-radius: 0; - border-bottom: 0; - padding-bottom: 32px; - } - } - - &__header { - display: flex; - gap: 16px; - align-items: center; - font-size: 14px; - line-height: 20px; - color: var(--color-text-secondary); - - &__icon { - border-radius: 64px; - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - flex-shrink: 0; - - .icon { - width: 24px; - height: 24px; - } - } - - h1 { - font-size: 22px; - line-height: 28px; - color: var(--color-text-primary); - } - } - - &__confirmation { - font-size: 14px; - line-height: 20px; - color: var(--color-text-secondary); - - h1 { - font-size: 16px; - line-height: 24px; - color: var(--color-text-primary); - font-weight: 500; - - &:not(:only-child) { - margin-bottom: 8px; - } - } - - strong { - font-weight: 700; - color: var(--color-text-primary); - } - } - - &__status { - border: 1px solid var(--color-border-primary); - border-radius: 8px; - padding: 8px; - cursor: pointer; - - &__account { - display: flex; - align-items: center; - gap: 4px; - margin-bottom: 8px; - color: var(--color-text-tertiary); - - bdi { - color: inherit; - } - } - - &__content { - display: -webkit-box; - font-size: 15px; - line-height: 22px; - color: var(--color-text-tertiary); - line-clamp: 4; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - max-height: 4 * 22px; - overflow: hidden; - - p, - a { - color: inherit; - } - } - - .reply-indicator__attachments { - margin-top: 0; - font-size: 15px; - line-height: 22px; - color: var(--color-text-tertiary); - } - } - - &__bullet-points { - display: flex; - flex-direction: column; - gap: 8px; - font-size: 16px; - line-height: 24px; - - & > div { - display: flex; - gap: 16px; - align-items: center; - - strong { - font-weight: 700; - } - } - - &--deemphasized { - color: var(--color-text-primary); - } - - &__icon { - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - - .icon { - width: 24px; - height: 24px; - } - } - } - - &__field-group { - display: flex; - flex-direction: column; - - label { - display: flex; - gap: 16px; - align-items: center; - font-size: 16px; - line-height: 24px; - height: 32px; - padding: 0 12px; - } - } - - &__caveats { - font-size: 14px; - padding: 0 12px; - - strong { - font-weight: 500; - } - } - - &__bottom { - padding-top: 0; - - &__collapsible { - display: none; - flex-direction: column; - gap: 16px; - } - - &.active { - background: var(--color-bg-secondary); - padding-top: 24px; - - .safety-action-modal__bottom__collapsible { - display: flex; - } - } - } - - &__actions { - display: flex; - align-items: center; - gap: 8px; - justify-content: flex-end; - - &__hint { - font-size: 14px; - line-height: 20px; - color: var(--color-text-tertiary); - } - - .link-button { - padding: 10px 12px; - font-weight: 600; - } - } -} - -.dialog-modal { - width: 588px; - max-height: 80vh; - flex-direction: column; - background: var(--color-bg-elevated); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - border-radius: 16px; - - &__header { - box-sizing: border-box; - border-bottom: 1px solid var(--color-border-primary); - display: flex; - align-items: center; - justify-content: space-between; - flex-direction: row-reverse; - padding: 12px 24px; - min-height: 61px; - - &__title { - font-size: 16px; - line-height: 24px; - font-weight: 500; - letter-spacing: 0.15px; - } - } - - &__content { - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - overflow-y: auto; - - &__description { - margin: 24px 24px 0; - color: var(--color-text-secondary); - - a { - color: inherit; - } - } - - &__form { - display: flex; - flex-direction: column; - gap: 16px; - padding: 24px; - } - - &__preview { - display: flex; - flex-direction: column; - gap: 16px; - align-items: center; - justify-content: center; - padding: 24px; - background: var(--color-bg-media-base); - - img { - display: block; - } - - img, - .gifv video { - outline: 1px solid var(--color-border-media); - outline-offset: -1px; - border-radius: 8px; - } - - img, - .gifv video, - .video-player, - .audio-player { - max-width: 360px; - max-height: 45vh; - } - } - - &__actions { - display: flex; - align-items: center; - gap: 8px; - justify-content: flex-end; - padding: 0 24px 24px; - } - } - - &__popout { - background: var(--color-bg-elevated); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - box-shadow: var(--dropdown-shadow); - max-width: 320px; - padding: 16px; - border-radius: 8px; - z-index: 9999 !important; - font-size: 14px; - line-height: 20px; - color: var(--color-text-secondary); - } - - .copy-paste-text { - margin-bottom: 0; - } -} - -.hotkey-combination { - display: inline-flex; - align-items: center; - gap: 4px; -} - -.boost-modal, -.report-modal, -.actions-modal, -.compare-history-modal { - background: var(--color-bg-primary); - color: var(--color-text-primary); - border-radius: 4px; - border: 1px solid var(--color-border-primary); - overflow: hidden; - max-width: 90vw; - width: 480px; - position: relative; - flex-direction: column; - - @media screen and (max-width: $no-columns-breakpoint) { - border-bottom: 0; - border-radius: 4px 4px 0 0; - padding-bottom: env(safe-area-inset-bottom); - } -} - -.boost-modal__container { - overflow-y: auto; - padding: 10px; - - .status { - user-select: text; - border-bottom: 0; - } -} - -.report-modal { - width: 90vw; - max-width: 700px; - border: 1px solid var(--color-border-primary); -} - -.report-dialog-modal { - max-width: 90vw; - width: 480px; - height: 80vh; - background: var(--color-bg-primary); - color: var(--color-text-primary); - border-radius: 4px; - border: 1px solid var(--color-border-primary); - overflow: hidden; - position: relative; - flex-direction: column; - display: flex; - - &__container { - box-sizing: border-box; - border-top: 1px solid var(--color-border-primary); - padding: 20px; - flex-grow: 1; - display: flex; - flex-direction: column; - min-height: 0; - overflow: auto; - } - - &__title { - font-size: 28px; - line-height: 33px; - font-weight: 700; - margin-bottom: 15px; - - @media screen and (height <= 800px) { - font-size: 22px; - } - } - - &__subtitle { - font-size: 17px; - font-weight: 600; - line-height: 22px; - margin-bottom: 4px; - } - - &__lead { - font-size: 17px; - line-height: 22px; - color: var(--color-text-primary); - margin-bottom: 30px; - - a { - text-decoration: none; - color: var(--color-text-brand); - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } - } - - &__actions { - margin-top: 30px; - display: flex; - - .button { - flex: 1 1 auto; - } - } - - &__statuses { - flex-grow: 1; - min-height: 0; - overflow: auto; - } - - .status__content a { - color: var(--color-text-brand); - } - - .status__content, - .status__content p { - color: var(--color-text-primary); - } - - .dialog-option { - align-items: center; - gap: 12px; - } - - .dialog-option .poll__input { - color: var(--color-text-secondary); - display: inline-flex; - align-items: center; - justify-content: center; - - svg { - width: 15px; - height: 15px; - } - - &:active, - &:focus, - &:hover { - border-color: var(--color-text-success); - border-width: 4px; - } - - &.active { - color: var(--color-text-on-success-base); - background: var(--color-bg-success-base); - border-color: var(--color-bg-success-base); - } - } - - .poll__option.dialog-option { - padding: 15px 0; - flex: 0 0 auto; - border-bottom: 1px solid var(--color-border-primary); - - &:last-child { - border-bottom: 0; - } - - & > .poll__option__text { - font-size: 13px; - color: var(--color-text-primary); - - strong { - font-size: 17px; - font-weight: 500; - line-height: 22px; - color: var(--color-text-primary); - display: block; - margin-bottom: 4px; - - &:last-child { - margin-bottom: 0; - } - } - } - } - - .flex-spacer { - background: transparent; - } - - &__textarea { - display: block; - box-sizing: border-box; - width: 100%; - color: var(--color-text-primary); - background: var(--color-bg-secondary); - padding: 10px; - font-family: inherit; - font-size: 17px; - line-height: 22px; - resize: vertical; - border: 0; - border: 1px solid var(--color-border-primary); - outline: 0; - border-radius: 4px; - margin: 20px 0; - - &:focus { - outline: 0; - } - } - - &__toggle { - display: flex; - align-items: center; - margin-bottom: 16px; - gap: 8px; - - & > span { - display: block; - font-size: 14px; - font-weight: 500; - line-height: 20px; - } - } - - .button.button-secondary { - border-color: var(--color-text-error); - color: var(--color-text-error); - flex: 0 0 auto; - - &:hover, - &:focus, - &:active { - color: var(--color-text-on-error-base); - background: var(--color-bg-error-base); - border-color: var(--color-bg-error-base); - } - } - - hr { - border: 0; - background: transparent; - margin: 15px 0; - } - - .emoji-mart-search { - padding-inline-end: 10px; - } - - .emoji-mart-search-icon { - inset-inline-end: 10px + 5px; - } -} - -.setting-divider { - background: transparent; - border: 0; - margin: 0; - width: 100%; - height: 1px; - margin-bottom: 29px; -} - -.actions-modal { - border-radius: 8px 8px 0 0; - background: var(--color-bg-elevated); - backdrop-filter: $backdrop-blur-filter; - border-color: var(--color-border-primary); - box-shadow: var(--dropdown-shadow); - max-height: 80vh; - max-width: 80vw; - - ul { - overflow-y: auto; - padding-bottom: 8px; - } - - a, - button { - color: inherit; - display: flex; - padding: 16px; - font-size: 15px; - line-height: 21px; - background: transparent; - border: none; - align-items: center; - text-decoration: none; - width: 100%; - box-sizing: border-box; - - &:hover, - &:active, - &:focus { - background: var(--color-bg-brand-softer); - } - } -} - -.report-modal__target { - padding: 30px; - font-size: 16px; - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } -} - -.report-modal__target { - text-align: center; -} - -.report-modal__target { - padding: 15px; - - .report-modal__close { - position: absolute; - top: 10px; - inset-inline-end: 10px; - } -} - -.compare-history-modal { - .report-modal__target { - border-bottom: 1px solid var(--color-border-primary); - } - - &__container { - padding: 30px; - pointer-events: all; - overflow-y: auto; - } - - .status__content { - color: var(--color-text-primary); - font-size: 19px; - line-height: 24px; - - .emojione { - width: 24px; - height: 24px; - margin: -1px 0 0; - } - - a { - color: var(--color-text-brand); - } - - hr { - height: 0.25rem; - padding: 0; - background-color: var(--color-text-primary); - border: 0; - margin: 20px 0; - } - } - - .media-gallery, - .audio-player, - .video-player { - margin-top: 15px; - } -} - -.loading-bar { - background-color: var(--color-bg-brand-base); - height: 3px; - position: fixed; - top: 0; - inset-inline-start: 0; - z-index: 9999; -} - -.media-gallery__actions { - position: absolute; - top: 6px; - inset-inline-end: 6px; - display: flex; - gap: 2px; - z-index: 2; - - &__pill { - display: block; - color: var(--color-text-on-media); - background: var(--color-bg-media); - backdrop-filter: $backdrop-blur-filter; - border: 0; - padding: 3px 12px; - border-radius: 99px; - font-size: 14px; - font-weight: 700; - line-height: 20px; - } -} - -.media-gallery__item__badges { - position: absolute; - bottom: 8px; - inset-inline-end: 8px; - display: flex; - gap: 2px; - pointer-events: none; -} - -.media-gallery__alt__label, -.relationship-tag { - display: block; - text-align: center; - color: var(--color-text-on-media); - background: var(--color-bg-media); - backdrop-filter: $backdrop-blur-filter; - border: 0; - padding: 3px 8px; - border-radius: 4px; - font-size: 12px; - font-weight: 700; - z-index: 1; - line-height: 20px; - cursor: pointer; - pointer-events: auto; - - &--non-interactive { - pointer-events: none; - } -} - -.relationship-tag { - text-transform: uppercase; - cursor: default; -} - -.info-tooltip { - color: var(--color-text-on-media); - background: var(--color-bg-media); - backdrop-filter: $backdrop-blur-filter; - border-radius: 4px; - box-shadow: var(--dropdown-shadow); - padding: 16px; - min-width: 16em; - min-height: 2em; - max-width: 22em; - max-height: 30em; - overflow-y: auto; - z-index: 10; - - &--solid { - color: var(--color-text-primary); - background: var(--color-bg-elevated); - border: 1px solid var(--color-border-primary); - } - - h4 { - font-size: 15px; - line-height: 20px; - font-weight: 500; - margin-bottom: 8px; - } - - p { - font-size: 15px; - line-height: 20px; - opacity: 0.85; - white-space: pre-line; - } - - .button { - margin-block-start: 8px; - } -} - -.attachment-list { - display: flex; - font-size: 14px; - border: 1px solid var(--color-border-primary); - border-radius: 4px; - margin-top: 16px; - overflow: hidden; - - &__icon { - flex: 0 0 auto; - color: var(--color-text-tertiary); - padding: 8px 18px; - cursor: default; - border-inline-end: 1px solid var(--color-border-primary); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 26px; - } - - &__list { - list-style: none; - padding: 4px 0; - padding-inline-start: 8px; - display: flex; - flex-direction: column; - justify-content: center; - - li { - display: block; - padding: 4px 0; - } - - a { - text-decoration: none; - color: var(--color-text-tertiary); - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } - } - - &.compact { - border: 0; - - .attachment-list__list { - padding: 0; - display: block; - } - - .icon { - color: var(--color-text-tertiary); - vertical-align: middle; - } - } -} - -/* Media Gallery */ -.media-gallery { - box-sizing: border-box; - margin-top: 8px; - overflow: hidden; - border-radius: 8px; - position: relative; - width: 100%; - min-height: 64px; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - gap: 2px; - - &--layout-1 { - // The size of single images is determined by their - // aspect-ratio, applied via inline style attribute - width: initial; - max-height: 460px; - } - - &--layout-2 { - & > .media-gallery__item:nth-child(1) { - border-end-end-radius: 0; - border-start-end-radius: 0; - } - - & > .media-gallery__item:nth-child(2) { - border-start-start-radius: 0; - border-end-start-radius: 0; - } - } - - &--layout-3 { - min-height: calc(64px * 2 + 8px); - - & > .media-gallery__item:nth-child(1) { - border-end-end-radius: 0; - border-start-end-radius: 0; - } - - & > .media-gallery__item:nth-child(2) { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-end-end-radius: 0; - } - - & > .media-gallery__item:nth-child(3) { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-start-end-radius: 0; - } - } - - &--layout-4 { - min-height: calc(64px * 2 + 8px); - - & > .media-gallery__item:nth-child(1) { - border-end-end-radius: 0; - border-start-end-radius: 0; - border-end-start-radius: 0; - } - - & > .media-gallery__item:nth-child(2) { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-end-end-radius: 0; - } - - & > .media-gallery__item:nth-child(3) { - border-start-start-radius: 0; - border-start-end-radius: 0; - border-end-start-radius: 0; - border-end-end-radius: 0; - } - - & > .media-gallery__item:nth-child(4) { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-start-end-radius: 0; - } - } -} - -.media-gallery__item { - border: 0; - box-sizing: border-box; - display: block; - position: relative; - border-radius: 8px; - overflow: hidden; - outline: 1px solid var(--color-border-media); - outline-offset: -1px; - z-index: 1; - - &--tall { - grid-row: span 2; - } - - &--wide { - grid-column: span 2; - } - - &--square { - aspect-ratio: 1; - } - - &__overlay { - position: absolute; - top: 0; - inset-inline-start: 0; - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - width: 100%; - height: 100%; - pointer-events: none; - padding: 8px; - z-index: 1; - - &--corner { - align-items: flex-start; - justify-content: flex-end; - } - - .icon { - color: var(--color-text-on-media); - filter: drop-shadow(0 0 6px var(--color-bg-media-base)); - } - } - - &--error img { - visibility: hidden; - } -} - -.media-gallery__item-thumbnail { - cursor: pointer; - display: block; - text-decoration: none; - color: var(--color-text-primary); - position: relative; - z-index: -1; - - &, - img { - height: 100%; - width: 100%; - } - - img { - object-fit: cover; - } -} - -.media-gallery__preview { - width: 100%; - height: 100%; - object-fit: cover; - position: absolute; - top: 0; - inset-inline-start: 0; - z-index: -2; - background: var(--color-bg-overlay); - - &--hidden { - display: none; - } -} - -.media-gallery__gifv { - height: 100%; - overflow: hidden; - position: relative; - width: 100%; - z-index: -1; -} - -.media-gallery__item-gifv-thumbnail { - cursor: pointer; - height: 100%; - object-fit: cover; - width: 100%; -} - -/* End Media Gallery */ - -.detailed, -.fullscreen { - .video-player__volume__current, - .video-player__volume::before { - bottom: 27px; - } - - .video-player__volume__handle { - bottom: 23px; - } -} - -.audio-player { - /* These are only fallback values, the AudioPlayer component inserts - * the real colours dynamically as inline styles */ - --player-foreground-color: var(--color-text-on-media); - --player-background-color: var(--color-bg-media-base); - --player-accent-color: var(--color-text-brand); - - box-sizing: border-box; - container: audio-player / inline-size; - position: relative; - overflow: hidden; - display: flex; - flex-direction: column; - width: 100%; - aspect-ratio: 16 / 9; - color: var(--player-foreground-color); - background: var(--player-background-color); - border-radius: 8px; - outline: 1px solid var(--color-border-media); - outline-offset: -1px; - - &__controls { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - height: 100%; - - &__play { - display: flex; - align-items: center; - justify-content: center; - position: relative; - - .player-button { - position: absolute; - top: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - } - - .icon { - filter: var(--overlay-icon-shadow); - } - } - - .player-button { - display: inline-block; - outline: 0; - padding: 5px; - flex: 0 0 auto; - background: transparent; - border: 0; - color: var(--player-foreground-color); - opacity: 0.75; - - .icon { - width: 48px; - height: 48px; - } - - &:active, - &:hover, - &:focus { - opacity: 1; - } - } - } - - &__visualizer { - width: 100%; - max-width: 200px; - } - - .video-player__seek { - position: absolute; - inset: 0 0 auto; - height: 24px; - z-index: 1; /* Ensure this renders on top of audio player controls */ - } - - &.inactive { - .video-player__seek, - .audio-player__controls, - .video-player__controls { - visibility: hidden; - } - } - - .video-player__volume::before, - .video-player__seek::before { - background: currentColor; - opacity: 0.15; - } - - .video-player__seek__buffer { - background: currentColor; - opacity: 0.2; - } - - .video-player__seek__progress, - .video-player__seek__handle, - .video-player__volume__current, - .video-player__volume__handle { - background-color: var(--player-accent-color); - } - - .video-player__buttons button, - .video-player__buttons a { - color: currentColor; - opacity: 0.75; - - &:active, - &:hover, - &:focus { - color: currentColor; - opacity: 1; - } - } - - .video-player__time-sep, - .video-player__time-total, - .video-player__time-current { - color: currentColor; - } - - @container audio-player (max-width: 400px) { - .video-player__time, - .player-button.video-player__download__icon { - display: none; - } - } - - .video-player__seek::before, - .video-player__seek__buffer, - .video-player__seek__progress { - top: 0; - } - - .video-player__seek__handle { - top: -4px; - } - - .video-player__controls { - padding-top: 10px; - background: transparent; - z-index: 1; - } -} - -.video-player { - overflow: hidden; - position: relative; - color: var(--color-text-on-media); - background: var(--color-bg-media); - max-height: 460px; - border-radius: 8px; - box-sizing: border-box; - display: flex; - outline: 1px solid var(--color-border-media); - outline-offset: -1px; - z-index: 2; - - video { - display: block; - z-index: -2; - } - - &.fullscreen { - width: 100% !important; - height: 100% !important; - margin: 0; - aspect-ratio: auto !important; - outline: none; - border-radius: 0; - - video { - width: 100% !important; - height: 100% !important; - outline: 0; - } - } - - &__controls { - position: absolute; - direction: ltr; - z-index: -1; - bottom: 0; - inset-inline-start: 0; - inset-inline-end: 0; - box-sizing: border-box; - background: linear-gradient( - 0deg, - rgb(from var(--color-bg-media-base) r g b / 85%) 0, - rgb(from var(--color-bg-media-base) r g b / 45%) 60%, - transparent - ); - padding: 0 15px; - opacity: 0; - pointer-events: none; - transition: opacity 0.1s ease; - will-change: opacity, pointer-events; - - &.active { - opacity: 1; - pointer-events: auto; - } - } - - .media-gallery__actions { - opacity: 0; - transition: opacity 0.1s ease; - - &.active { - opacity: 1; - } - } - - &.inactive { - video, - .video-player__controls { - visibility: hidden; - } - } - - &__spoiler { - display: none; - position: absolute; - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - z-index: 4; - border: 0; - background: var(--color-bg-primary); - color: var(--color-text-secondary); - transition: none; - pointer-events: none; - - &.active { - display: block; - pointer-events: auto; - - &:hover, - &:active, - &:focus { - color: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - } - } - - &__title { - display: block; - font-size: 14px; - } - - &__subtitle { - display: block; - font-size: 11px; - font-weight: 500; - } - } - - &__buttons-bar { - display: flex; - justify-content: space-between; - padding-bottom: 8px; - margin: 0 -5px; - - .video-player__download__icon { - color: inherit; - } - } - - &__buttons { - display: flex; - flex: 0 1 auto; - min-width: 30px; - align-items: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - gap: 5px; - - .player-button { - display: inline-block; - outline: 0; - padding: 5px; - flex: 0 0 auto; - background: transparent; - border: 0; - color: rgb(from var(--color-text-on-media) r g b / 75%); - font-weight: 500; - - &:active, - &:hover, - &:focus { - color: var(--color-text-on-media); - } - } - } - - &__time { - display: inline; - flex: 0 1 auto; - overflow: hidden; - text-overflow: ellipsis; - margin: 0 5px; - - // Ensure digits maintain a consistent width - font-variant-numeric: tabular-nums; - } - - &__time-sep, - &__time-total, - &__time-current { - color: var(--color-text-on-media); - font-size: 14px; - font-weight: 500; - } - - &__time-sep { - display: inline-block; - margin: 0 6px; - } - - &__volume { - flex: 0 0 auto; - display: inline-flex; - cursor: pointer; - height: 24px; - position: relative; - overflow: hidden; - - .no-reduce-motion & { - transition: all 100ms linear; - } - - &.active { - overflow: visible; - width: 50px; - margin-inline-end: 16px; - } - - &::before { - content: ''; - width: 50px; - background: rgb(from var(--color-text-on-media) r g b / 35%); - border-radius: 4px; - display: block; - position: absolute; - height: 4px; - inset-inline-start: 0; - top: 50%; - transform: translate(0, -50%); - } - - &__current { - display: block; - position: absolute; - height: 4px; - border-radius: 4px; - inset-inline-start: 0; - top: 50%; - transform: translate(0, -50%); - background: var(--color-text-on-media); - } - - &__handle { - position: absolute; - z-index: 3; - border-radius: 50%; - width: 12px; - height: 12px; - top: 50%; - inset-inline-start: 0; - margin-inline-start: -6px; - transform: translate(0, -50%); - background: var(--color-text-on-media); - box-shadow: 1px 2px 6px var(--color-shadow-primary); - opacity: 0; - - .no-reduce-motion & { - transition: opacity 100ms linear; - } - } - - &.active &__handle { - opacity: 1; - } - } - - &__link { - padding: 2px 10px; - - a { - text-decoration: none; - font-size: 14px; - font-weight: 500; - color: var(--color-text-on-media); - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } - } - - &__seek { - cursor: pointer; - height: 24px; - position: relative; - - &::before { - content: ''; - width: 100%; - background: rgb(from var(--color-text-on-media) r g b / 35%); - border-radius: 4px; - display: block; - position: absolute; - height: 4px; - top: 14px; - } - - &__progress, - &__buffer { - display: block; - position: absolute; - height: 4px; - border-radius: 4px; - top: 14px; - background: var(--color-text-on-media); - } - - &__buffer { - background: rgb(from var(--color-text-on-media) r g b / 20%); - } - - &__handle { - position: absolute; - z-index: 3; - opacity: 0; - border-radius: 50%; - width: 12px; - height: 12px; - top: 10px; - margin-inline-start: -6px; - background: var(--color-text-on-media); - box-shadow: 1px 2px 6px var(--color-shadow-primary); - - .no-reduce-motion & { - transition: opacity 0.1s ease; - } - - &.active { - opacity: 1; - cursor: grabbing; - } - } - - &:hover { - .video-player__seek__handle { - opacity: 1; - } - } - } - - &__hotkey-indicator { - position: absolute; - top: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - color: var(--color-text-on-media); - background: var(--color-bg-media); - backdrop-filter: $backdrop-blur-filter; - border-radius: 8px; - padding: 16px 24px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 8px; - - &__label { - font-size: 15px; - font-weight: 500; - } - } - - &.detailed, - &.fullscreen { - .video-player__buttons { - .player-button { - padding-top: 10px; - padding-bottom: 10px; - } - } - } -} - -.gifv { - position: relative; - - canvas { - position: absolute; - width: 100%; - height: 100%; - } - - video { - max-width: 100vw; - max-height: 80vh; - } -} - -.scrollable .account-card { - margin: 10px; -} - -.scrollable .account-card__title__avatar { - img { - border: 2px solid var(--color-bg-primary); - } - - .account__avatar { - border: none; - } -} - -.scrollable .account-card__header { - img { - border-radius: 4px; - } -} - -.scrollable .account-card__bio::after { - background: linear-gradient(to left, var(--color-bg-primary), transparent); -} - -.account-gallery__container { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 2px; - - .media-gallery__item { - border-radius: 0; - } - - .load-more, - .timeline-hint { - grid-column: span 3; - } -} - -.notification__filter-bar, -.account__section-headline { - border: 1px solid var(--color-border-primary); - border-top: 0; - cursor: default; - display: flex; - flex-shrink: 0; - - @media screen and (max-width: ($no-gap-breakpoint - 1px)) { - border-right: 0; - border-left: 0; - } - - button { - background: transparent; - border: 0; - margin: 0; - } - - button, - a { - display: block; - flex: 1 1 auto; - color: var(--color-text-secondary); - padding: 15px 0; - font-size: 14px; - font-weight: 500; - text-align: center; - text-decoration: none; - position: relative; - width: 100%; - white-space: nowrap; - - &.active { - color: var(--color-text-primary); - - &::before { - display: block; - content: ''; - position: absolute; - bottom: -1px; - left: 50%; - transform: translateX(-50%); - width: 40px; - height: 3px; - border-radius: 4px 4px 0 0; - background: var(--color-text-brand); - } - } - } - - .scrollable & { - border-left: 0; - border-right: 0; - } -} - -.filter-form { - border-bottom: 1px solid var(--color-border-primary); - - &__column { - display: flex; - flex-direction: column; - gap: 15px; - padding: 15px; - } - - .radio-button { - display: flex; - } -} - -.column-settings__row .radio-button { - display: flex; -} - -.radio-button, -.check-box { - font-size: 14px; - position: relative; - display: inline-flex; - align-items: center; - line-height: 18px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - gap: 10px; - color: var(--color-text-primary); - - input[type='radio'], - input[type='checkbox'] { - display: none; - } - - &__input { - display: flex; - align-items: center; - justify-content: center; - position: relative; - border: 2px solid var(--color-text-primary); - box-sizing: border-box; - width: 20px; - height: 20px; - flex: 0 0 auto; - border-radius: 50%; - - &.checked, - &.indeterminate { - border-color: var(--color-text-brand); - } - - .icon { - width: 18px; - height: 18px; - } - } -} - -.radio-button__input.checked::before { - content: ''; - display: block; - border-radius: 50%; - width: calc(100% - 4px); - height: calc(100% - 4px); - background: var(--color-text-brand); -} - -.check-box { - &__input { - width: 18px; - height: 18px; - border-radius: 2px; - - &.checked, - &.indeterminate { - background: var(--color-bg-brand-base); - color: var(--color-text-on-brand-base); - } - } -} - -noscript { - text-align: center; - - img { - width: 200px; - opacity: 0.5; - animation: flicker 4s infinite; - } - - div { - font-size: 14px; - margin: 30px auto; - color: var(--color-text-primary); - max-width: 400px; - - a { - color: var(--color-text-brand); - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } - } -} - -@keyframes flicker { - 0% { - opacity: 1; - } - - 30% { - opacity: 0.75; - } - - 100% { - opacity: 1; - } -} - -.moved-account-banner, -.follow-request-banner, -.account-memorial-banner { - padding: 20px; - background: var(--color-bg-tertiary); - display: flex; - align-items: center; - flex-direction: column; - - &__message { - color: var(--color-text-secondary); - padding: 8px 0; - padding-top: 0; - padding-bottom: 4px; - font-size: 14px; - font-weight: 500; - text-align: center; - margin-bottom: 16px; - } - - &__action { - display: flex; - justify-content: space-between; - align-items: center; - gap: 15px; - width: 100%; - } - - .detailed-status__display-name { - margin-bottom: 0; - } -} - -.follow-request-banner .button { - width: 100%; -} - -.account-memorial-banner__message { - margin-bottom: 0; -} - -.column-inline-form { - padding: 15px; - display: flex; - justify-content: flex-start; - gap: 15px; - align-items: center; - border: 1px solid var(--color-border-primary); - border-top: 0; - - label { - flex: 1 1 auto; - - input { - width: 100%; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - border-left: 0; - border-right: 0; - } -} - -.drawer__backdrop { - cursor: pointer; - position: absolute; - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - background: rgb(from var(--color-bg-overlay) r g b / 50%); -} - -.focal-point { - position: relative; - cursor: grab; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - - &.dragging { - cursor: grabbing; - } - - &__reticle { - position: absolute; - width: 100px; - height: 100px; - transform: translate(-50%, -50%); - border: 2px solid var(--color-text-on-media); - border-radius: 50%; - box-shadow: 0 0 0 9999em var(--color-shadow-primary); - pointer-events: none; - } -} - -.account__header__content { - color: var(--color-text-secondary); - font-size: 14px; - font-weight: 400; - overflow: hidden; - word-break: normal; - overflow-wrap: break-word; - - p { - margin-bottom: 20px; - unicode-bidi: plaintext; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: inherit; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } -} - -.account__header { - overflow: hidden; - container: account-header / inline-size; - - &.inactive { - opacity: 0.5; - - .account__header__image, - .account__avatar { - filter: grayscale(100%); - } - } - - &__info { - position: absolute; - top: 20px; - inset-inline-end: 20px; - display: flex; - flex-wrap: wrap; - gap: 2px; - } - - &__image { - overflow: hidden; - height: 145px; - position: relative; - background: var(--color-bg-tertiary); - border-bottom: 1px solid var(--color-border-primary); - - img { - object-fit: cover; - display: block; - width: 100%; - height: 100%; - margin: 0; - } - } - - &__bar { - position: relative; - padding: 0 20px; - border-bottom: 1px solid var(--color-border-primary); - - .avatar { - display: block; - flex: 0 0 auto; - - .account__avatar { - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - border-radius: var(--avatar-border-radius); - } - } - } - - &__badges { - display: flex; - flex-wrap: wrap; - gap: 8px; - - .account-role { - line-height: unset; - } - } - - &__tabs { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-top: -55px; - padding-top: 10px; - gap: 8px; - overflow: hidden; - margin-inline-start: -2px; // aligns the pfp with content below - - &__name { - margin-top: 16px; - margin-bottom: 16px; - - .emojione { - width: 22px; - height: 22px; - } - - h1 { - font-size: 17px; - line-height: 22px; - color: var(--color-text-primary); - font-weight: 600; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - small { - display: flex; - align-items: center; - gap: 4px; - font-size: 14px; - line-height: 20px; - color: var(--color-text-secondary); - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - - span { - overflow: hidden; - text-overflow: ellipsis; - user-select: all; - } - - .icon-lock { - height: 18px; - width: 18px; - } - } - } - } - - .spacer { - flex: 1 1 auto; - } - } - - &__follow-button { - flex-grow: 1; - } - - &__buttons { - display: flex; - align-items: center; - gap: 8px; - - $button-breakpoint: 420px; - $button-fallback-breakpoint: #{$button-breakpoint} + 55px; - - &--desktop { - margin-top: 55px; - - @container (width < #{$button-breakpoint}) { - display: none; - } - - @supports (not (container-type: inline-size)) { - @media (max-width: #{$button-fallback-breakpoint}) { - display: none; - } - } - } - - &--mobile { - margin-block: 16px; - - @container (width >= #{$button-breakpoint}) { - display: none; - } - - @supports (not (container-type: inline-size)) { - @media (min-width: (#{$button-fallback-breakpoint} + 1px)) { - display: none; - } - } - } - - .button { - flex-shrink: 1; - white-space: nowrap; - min-width: 80px; - } - - .icon-button { - border: 1px solid var(--color-border-primary); - border-radius: 4px; - box-sizing: content-box; - padding: 5px; - - .icon { - width: 24px; - height: 24px; - } - - &.copied { - border-color: var(--color-text-success); - } - } - } - - &__bio { - .account__header__content { - color: var(--color-text-primary); - } - - .account__header__fields { - margin: 0; - margin-top: 16px; - border-radius: 4px; - border: 1px solid var(--color-border-primary); - - dl { - display: block; - padding: 11px 16px; - border-bottom-color: var(--color-border-primary); - } - - dd, - dt { - font-size: 13px; - line-height: 18px; - padding: 0; - text-align: initial; - } - - dt { - width: auto; - background: transparent; - text-transform: uppercase; - color: var(--color-text-tertiary); - } - - dd { - color: var(--color-text-secondary); - } - - a { - color: var(--color-text-brand); - } - - .icon { - width: 18px; - height: 18px; - } - - .verified { - border: 1px solid var(--color-text-success); - margin-top: -1px; - margin-inline: -1px; - - &:first-child { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - } - - &:last-child { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - margin-bottom: -1px; - } - - dt, - dd { - color: var(--color-text-success); - } - - dd { - display: flex; - align-items: center; - gap: 4px; - - span { - display: flex; - } - } - - a { - color: var(--color-text-success); - } - } - } - } - - &__extra { - margin-top: 16px; - - &__links { - font-size: 14px; - color: var(--color-text-secondary); - margin: 0 -10px; - padding-top: 16px; - padding-bottom: 10px; - - a { - display: inline-block; - color: var(--color-text-secondary); - text-decoration: none; - padding: 5px 10px; - font-weight: 500; - - strong { - font-weight: 700; - color: var(--color-text-primary); - } - } - } - } - - &__account-note { - color: var(--color-text-primary); - font-size: 14px; - font-weight: 400; - margin-bottom: 10px; - - &__loading-indicator-wrapper { - position: relative; - height: 37px; - - .loading-indicator { - left: 10px; - } - - .circular-progress { - width: 14px; - height: 14px; - } - } - - label { - display: block; - font-size: 12px; - font-weight: 500; - color: var(--color-text-secondary); - text-transform: uppercase; - margin-bottom: 5px; - } - - textarea { - display: block; - box-sizing: border-box; - width: calc(100% + 20px); - color: var(--color-text-primary); - background: transparent; - padding: 10px; - margin: 0 -10px; - font-family: inherit; - font-size: 14px; - resize: none; - border: 0; - outline: 0; - border-radius: 4px; - - &::placeholder { - color: var(--color-text-tertiary); - opacity: 1; - } - - &:focus { - background: var(--color-bg-brand-softer); - } - } - } - - &__familiar-followers { - display: flex; - align-items: center; - gap: 10px; - margin-block: 16px; - color: var(--color-text-secondary); - - a:any-link { - font-weight: 500; - text-decoration: none; - color: var(--color-text-primary); - } - } -} - -.account__contents { - overflow: hidden; -} - -.account__details { - display: flex; - flex-wrap: wrap; - column-gap: 1em; -} - -.verified-badge { - display: inline-flex; - align-items: center; - color: var(--color-text-success); - gap: 4px; - overflow: hidden; - white-space: nowrap; - - > span { - overflow: hidden; - text-overflow: ellipsis; - } - - a { - color: inherit; - font-weight: 500; - text-decoration: none; - } - - .icon { - width: 16px; - height: 16px; - } -} - -.trends { - &__item { - display: flex; - align-items: center; - padding: 16px; - border-bottom: 1px solid var(--color-border-primary); - gap: 8px; - - &__name { - flex: 1 1 auto; - color: var(--color-text-secondary); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - strong { - font-weight: 500; - } - - a { - color: var(--color-text-primary); - text-decoration: none; - font-size: 14px; - font-weight: 500; - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:hover, - &:focus, - &:active { - span { - text-decoration: underline; - } - } - } - } - - &__current { - flex: 0 0 auto; - font-size: 24px; - font-weight: 500; - text-align: end; - color: var(--color-text-primary); - text-decoration: none; - } - - &__sparkline { - flex: 0 0 auto; - width: 50px; - - path:first-child { - fill: var(--color-graph-primary-fill) !important; - fill-opacity: 1 !important; - } - - path:last-child { - stroke: var(--color-graph-primary-stroke) !important; - fill: none !important; - } - } - - &--requires-review { - .trends__item__name { - color: var(--color-text-warning); - - a { - color: var(--color-text-warning); - } - } - - .trends__item__current { - color: var(--color-text-warning); - } - - .trends__item__sparkline { - path:first-child { - fill: var(--color-graph-warning-fill) !important; - } - - path:last-child { - stroke: var(--color-graph-warning-stroke) !important; - } - } - } - - &--disabled { - .trends__item__name { - color: var(--color-text-disabled); - - a { - color: var(--color-text-disabled); - } - } - - .trends__item__current { - color: var(--color-text-disabled); - } - - .trends__item__sparkline { - path:first-child { - fill: var(--color-graph-disabled-fill) !important; - } - - path:last-child { - stroke: var(--color-graph-disabled-stroke) !important; - } - } - } - } - - &--compact &__item { - padding: 12px; - } -} - -.conversation { - display: flex; - border-bottom: 1px solid var(--color-border-primary); - padding: 5px; - padding-bottom: 0; - - &:focus { - background: var(--color-bg-secondary); - outline: 0; - } - - &__avatar { - flex: 0 0 auto; - padding: 10px; - padding-top: 12px; - position: relative; - cursor: pointer; - } - - &__unread { - display: inline-block; - background: var(--color-text-brand); - border-radius: 50%; - width: 0.625rem; - height: 0.625rem; - margin: -0.1ex 0.15em 0.1ex; - } - - &__content { - flex: 1 1 auto; - padding: 10px 5px; - padding-inline-end: 15px; - overflow: hidden; - - &__info { - overflow: hidden; - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - } - - &__relative-time { - font-size: 15px; - color: var(--color-text-secondary); - padding-inline-start: 15px; - } - - &__names { - color: var(--color-text-secondary); - font-size: 15px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 4px; - flex-basis: 90px; - flex-grow: 1; - - a { - color: var(--color-text-primary); - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - - a { - overflow-wrap: anywhere; - } - } -} - -.announcements { - width: calc(100% - 124px); - flex: 0 0 auto; - position: relative; - overflow: hidden; - - .layout-multiple-columns & { - width: 100%; - } - - @media screen and (max-width: (124px + 300px)) { - width: 100%; - } - - &__root { - background: var(--color-bg-brand-softer); - font-size: 13px; - display: flex; - align-items: flex-end; - } - - &__mastodon { - width: 124px; - flex: 0 0 auto; - - @media screen and (max-width: (124px + 300px)) { - display: none; - } - } - - &__slides { - display: flex; - flex-wrap: nowrap; - align-items: start; - } - - &__slide { - box-sizing: border-box; - width: 100%; - flex: 0 0 100%; - padding: 15px; - position: relative; - font-size: 15px; - line-height: 20px; - overflow-wrap: break-word; - font-weight: 400; - max-height: 50vh; - overflow: hidden; - flex-direction: column; - } - - &__range { - display: block; - font-weight: 500; - margin-bottom: 10px; - padding-inline-end: 18px; - } - - &__unread { - position: absolute; - top: 19px; - inset-inline-end: 19px; - display: block; - background: var(--color-text-brand); - border-radius: 50%; - width: 0.625rem; - height: 0.625rem; - } - - &__pagination { - padding: 15px; - color: var(--color-text-secondary); - position: absolute; - bottom: 3px; - inset-inline-end: 0; - display: flex; - align-items: center; - z-index: 1; - } -} - -.layout-multiple-columns .announcements__mastodon { - display: none; -} - -.layout-multiple-columns .announcements__container { - width: 100%; -} - -.reactions-bar { - display: flex; - flex-wrap: wrap; - align-items: center; - margin-top: 15px; - margin-inline-start: -2px; - width: calc(100% - (90px - 33px)); - - &__item { - flex-shrink: 0; - background: var(--color-bg-brand-softer); - color: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - border: 1px solid var(--color-border-on-bg-brand-softer); - border-radius: 3px; - box-sizing: border-box; - margin: 2px; - cursor: pointer; - user-select: none; - padding: 0 6px; - display: flex; - align-items: center; - transition: all 100ms ease-in; - transition-property: background-color, color; - - &__emoji { - display: block; - margin: 3px 0; - width: 16px; - height: 16px; - - img { - display: block; - margin: 0; - width: 100%; - height: 100%; - min-width: auto; - min-height: auto; - object-fit: contain; - } - } - - &__count { - display: block; - min-width: 9px; - font-size: 13px; - font-weight: 500; - text-align: center; - margin-inline-start: 6px; - } - - &:hover, - &:focus, - &:active { - color: var(--color-text-primary); - background: var(--color-bg-brand-soft); - transition: all 200ms ease-out; - transition-property: background-color, color; - } - - &.active { - color: var(--color-text-brand); - background-color: var(--color-bg-brand-softer); - border-color: var(--color-text-brand); - transition: all 100ms ease-in; - transition-property: background-color, color; - } - } - - .emoji-picker-dropdown { - display: flex; - margin: 2px; - } - - &:hover .emoji-button { - opacity: 0.85; - } - - .emoji-button { - color: var(--color-text-secondary); - margin: 0; - font-size: 16px; - width: auto; - flex-shrink: 0; - padding: 0 6px; - height: 22px; - display: flex; - align-items: center; - opacity: 0.5; - transition: all 100ms ease-in; - transition-property: background-color, color; - - &:hover, - &:active, - &:focus { - opacity: 1; - color: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - transition: all 200ms ease-out; - transition-property: background-color, color; - } - } - - &--empty { - .emoji-button { - padding: 0; - } - } -} - -.notification, -.status__wrapper, -.conversation { - position: relative; - - // When scrolling these elements into view, take into account - // the column header height - scroll-margin-top: var(--column-header-height, 0); - - &.unread { - &::before { - content: ''; - position: absolute; - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - border-inline-start: 4px solid var(--color-text-brand); - pointer-events: none; - } - } -} - -.picture-in-picture { - position: fixed; - bottom: 20px; - inset-inline-end: 20px; - width: 300px; - box-shadow: var(--dropdown-shadow); - - &__footer { - border-radius: 0 0 4px 4px; - background: var(--color-bg-secondary); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - border-top: 0; - padding: 12px; - display: flex; - justify-content: space-between; - } - - &__header { - border-radius: 4px 4px 0 0; - background: var(--color-bg-secondary); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - border-bottom: 0; - padding: 12px; - display: flex; - justify-content: space-between; - - .icon-button { - padding: 6px; - } - - &__account { - display: flex; - text-decoration: none; - overflow: hidden; - } - - .account__avatar { - margin-inline-end: 8px; - } - - .display-name { - color: var(--color-text-primary); - text-decoration: none; - - strong, - span { - display: block; - text-overflow: ellipsis; - overflow: hidden; - } - - span { - color: var(--color-text-secondary); - } - } - } - - .video-player, - .audio-player { - border-radius: 0; - } -} - -.picture-in-picture-placeholder { - border-radius: 8px; - box-sizing: border-box; - border: 1px dashed var(--color-border-primary); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 16px; - font-size: 15px; - line-height: 21px; - font-weight: 500; - cursor: pointer; - color: var(--color-text-tertiary); - aspect-ratio: 16 / 9; - - .icon { - width: 48px; - height: 48px; - margin-bottom: 8px; - } - - &:hover, - &:active, - &:focus { - color: var(--color-text-secondary); - } - - &:focus-visible { - outline: var(--outline-focus-default); - border-color: transparent; - } -} - -.notifications-permission-banner { - padding: 30px; - border-bottom: 1px solid var(--color-border-primary); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - - &__close { - position: absolute; - top: 10px; - inset-inline-end: 10px; - } - - h2 { - font-size: 16px; - font-weight: 500; - margin-bottom: 15px; - text-align: center; - } - - p { - color: var(--color-text-secondary); - margin-bottom: 15px; - text-align: center; - - .icon { - width: 20px; - height: 20px; - vertical-align: middle; - } - } -} - -.explore__search-header { - justify-content: center; - align-items: center; - border: 1px solid var(--color-border-primary); - border-top: 0; - border-bottom: 0; - padding: 16px; - padding-bottom: 8px; - - .search { - width: 100%; - margin-bottom: 0; - } - - .search__input { - padding-block: 12px; - padding-inline-end: 30px; - } - - .search__popout { - border: 1px solid var(--color-border-primary); - } - - .search__icon { - top: 12px; - inset-inline-end: 12px; - color: var(--color-text-tertiary); - } -} - -.layout-single-column .explore__search-header { - display: none; - - @media screen and (max-width: ($no-gap-breakpoint - 1px)) { - display: flex; - } -} - -.explore__search-results { - flex: 1 1 auto; - display: flex; - flex-direction: column; - - @media screen and (min-width: $no-gap-breakpoint) { - border: 1px solid var(--color-border-primary); - border-top: 0; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } -} - -.story { - display: flex; - align-items: center; - color: var(--color-text-primary); - padding: 16px; - border-bottom: 1px solid var(--color-border-primary); - gap: 16px; - - &:last-child { - border-bottom: 0; - } - - &__details { - flex: 1 1 auto; - - &__publisher { - color: var(--color-text-secondary); - margin-bottom: 8px; - font-size: 14px; - line-height: 20px; - } - - &__title { - display: block; - font-size: 19px; - line-height: 24px; - font-weight: 500; - margin-bottom: 8px; - text-decoration: none; - color: var(--color-text-primary); - - &:hover, - &:active, - &:focus { - color: var(--color-text-brand); - } - } - - &__shared { - display: flex; - align-items: baseline; - color: var(--color-text-secondary); - gap: 8px; - justify-content: space-between; - font-size: 14px; - line-height: 20px; - - &__pill { - background: var(--color-bg-tertiary); - border-radius: 4px; - color: inherit; - text-decoration: none; - padding: 4px 12px; - font-size: 12px; - font-weight: 500; - line-height: 16px; - flex-shrink: 0; - } - - &__author-link { - display: inline-flex; - align-items: center; - gap: 4px; - color: var(--color-text-primary); - font-weight: 500; - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: var(--color-text-brand); - } - } - } - - strong { - font-weight: 500; - } - } - - &__thumbnail { - flex: 0 0 auto; - position: relative; - width: 120px; - aspect-ratio: 1; - - .skeleton { - width: 100%; - height: 100%; - } - - img { - border-radius: 8px; - display: block; - margin: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - - &__preview { - border-radius: 8px; - display: block; - margin: 0; - width: 100%; - height: 100%; - object-fit: fill; - position: absolute; - top: 0; - inset-inline-start: 0; - z-index: 0; - - &--hidden { - display: none; - } - } - } - - &.expanded { - flex-direction: column; - - .story__thumbnail { - order: 1; - width: 100%; - height: auto; - aspect-ratio: 1.91 / 1; - } - - .story__details { - order: 2; - width: 100%; - flex: 0 0 auto; - } - } -} - -.server-banner { - &__introduction { - font-size: 15px; - line-height: 22px; - color: var(--color-text-secondary); - margin-bottom: 20px; - - strong { - font-weight: 700; - } - - a { - color: inherit; - text-decoration: underline; - - &:hover, - &:active, - &:focus { - text-decoration: none; - } - } - } - - &__hero { - display: block; - border-radius: 4px; - width: 100%; - height: auto; - margin-bottom: 20px; - aspect-ratio: 1.9; - border: 0; - background: var(--color-bg-tertiary); - object-fit: cover; - } - - &__description { - font-size: 15px; - line-height: 22px; - color: var(--color-text-secondary); - margin-bottom: 20px; - } - - &__meta { - display: flex; - gap: 10px; - max-width: 100%; - - &__column { - flex: 0 0 auto; - width: calc(50% - 5px); - overflow: hidden; - } - } - - &__number { - font-weight: 600; - color: var(--color-text-primary); - font-size: 14px; - } - - &__number-label { - color: var(--color-text-secondary); - font-weight: 500; - font-size: 14px; - } - - h4 { - text-transform: uppercase; - color: var(--color-text-secondary); - margin-bottom: 10px; - font-weight: 600; - } - - .account { - padding: 0; - border: 0; - } - - .account__avatar-wrapper { - margin-inline-start: 0; - } - - .spacer { - margin: 10px 0; - } -} - -.safety-action-modal, -.interaction-modal { - max-width: 100vw; - width: 600px; - overflow-y: auto; -} - -.interaction-modal { - overflow: visible; - position: relative; - display: block; - border-radius: 16px; - background: var(--color-bg-primary); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - padding: 24px; - box-sizing: border-box; - - @media screen and (max-width: $mobile-breakpoint) { - border-radius: 16px 16px 0 0; - border-bottom: 0; - padding-bottom: 32px; - } - - h3 { - font-size: 22px; - line-height: 33px; - font-weight: 700; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - } - - p { - text-align: center; - font-size: 17px; - line-height: 22px; - color: var(--color-text-secondary); - - strong { - color: var(--color-text-primary); - font-weight: 700; - } - } - - p.hint { - margin-bottom: 14px; - font-size: 14px; - } - - &__lead { - margin-bottom: 20px; - - h3 { - margin-bottom: 15px; - } - } - - &__login { - position: relative; - margin-bottom: 20px; - - &__input { - @include search-input; - - border: 1px solid var(--color-border-primary); - padding: 4px 6px; - color: var(--color-text-primary); - font-size: 16px; - line-height: 18px; - display: flex; - align-items: center; - - input { - background: transparent; - color: inherit; - font: inherit; - border: 0; - padding: 15px - 4px 15px - 6px; - flex: 1 1 auto; - min-width: 0; - - &::placeholder { - color: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - } - - &:focus { - outline: 0; - } - } - - .button { - flex: 0 0 auto; - } - } - - .search__popout { - margin-top: -1px; - padding-top: 5px; - padding-bottom: 5px; - border: 1px solid var(--color-border-primary); - } - - &.invalid &__input { - border-color: var(--color-text-error); - } - - &.expanded .search__popout { - display: block; - } - - &.expanded &__input { - border-radius: 4px 4px 0 0; - } - } - - &__choices { - display: flex; - gap: 40px; - - &__choice { - flex: 1; - box-sizing: border-box; - - h3 { - margin-bottom: 20px; - } - - p { - color: var(--color-text-secondary); - margin-bottom: 20px; - font-size: 15px; - } - - .button { - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - } - } - } - - @media screen and (max-width: ($no-gap-breakpoint - 1px)) { - &__choices { - flex-direction: column; - - &__choice { - margin-top: 40px; - } - } - } - - .link-button { - font-size: inherit; - display: inline; - } -} - -.privacy-policy { - padding: 20px; - - @media screen and (min-width: $no-gap-breakpoint) { - border-radius: 4px; - } - - &__body { - margin-top: 20px; - } -} - -.prose { - color: var(--color-text-primary); - font-size: 15px; - line-height: 22px; - - p, - ul, - ol { - margin-top: 1.25em; - margin-bottom: 1.25em; - } - - img { - margin-top: 2em; - margin-bottom: 2em; - max-width: 100%; - } - - video { - margin-top: 2em; - margin-bottom: 2em; - max-width: 100%; - } - - figure { - margin-top: 2em; - margin-bottom: 2em; - - figcaption { - font-size: 0.875em; - line-height: 1.4285714; - margin-top: 0.8571429em; - } - } - - figure > * { - margin-top: 0; - margin-bottom: 0; - } - - h1 { - font-size: 1.5em; - margin-top: 0; - margin-bottom: 1em; - line-height: 1.33; - } - - h2 { - font-size: 1.25em; - margin-top: 1.6em; - margin-bottom: 0.6em; - line-height: 1.6; - } - - h3, - h4, - h5, - h6 { - margin-top: 1.5em; - margin-bottom: 0.5em; - line-height: 1.5; - } - - ol { - counter-reset: list-counter; - } - - li { - margin-top: 0.5em; - margin-bottom: 0.5em; - } - - ol > li { - counter-increment: list-counter; - - &::before { - content: counter(list-counter) '.'; - position: absolute; - inset-inline-start: 0; - } - } - - ul > li::before { - content: ''; - position: absolute; - background-color: var(--color-text-secondary); - border-radius: 50%; - width: 0.375em; - height: 0.375em; - top: 0.5em; - inset-inline-start: 0.25em; - } - - ul > li, - ol > li { - position: relative; - padding-inline-start: 1.75em; - } - - & > ul > li p { - margin-top: 0.75em; - margin-bottom: 0.75em; - } - - & > ul > li > *:first-child { - margin-top: 1.25em; - } - - & > ul > li > *:last-child { - margin-bottom: 1.25em; - } - - & > ol > li > *:first-child { - margin-top: 1.25em; - } - - & > ol > li > *:last-child { - margin-bottom: 1.25em; - } - - ul ul, - ul ol, - ol ul, - ol ol { - margin-top: 0.75em; - margin-bottom: 0.75em; - } - - h1, - h2, - h3, - h4, - h5, - h6, - strong, - b { - color: var(--color-text-primary); - font-weight: 700; - } - - em, - i { - font-style: italic; - } - - a { - color: var(--color-text-brand); - text-decoration: underline; - - &:focus, - &:hover, - &:active { - text-decoration: none; - } - } - - code { - font-size: 0.875em; - background: var(--color-bg-secondary); - border-radius: 4px; - padding: 0.2em 0.3em; - } - - hr { - border: 0; - border-top: 1px solid var(--color-border-primary); - margin-top: 3em; - margin-bottom: 3em; - } - - hr + * { - margin-top: 0; - } - - h2 + * { - margin-top: 0; - } - - h3 + * { - margin-top: 0; - } - - h4 + *, - h5 + *, - h6 + * { - margin-top: 0; - } - - & > :first-child { - margin-top: 0; - } - - & > :last-child { - margin-bottom: 0; - } -} - -.dismissable-banner, -.warning-banner { - position: relative; - margin: 10px; - margin-bottom: 5px; - border-radius: 8px; - border: 1px solid var(--color-border-on-bg-brand-softer); - background: var(--color-bg-brand-softer); - overflow: hidden; - flex-shrink: 0; - - &__background-image { - width: 125%; - position: absolute; - bottom: -25%; - inset-inline-end: -25%; - z-index: -1; - opacity: 0.15; - mix-blend-mode: luminosity; - } - - &__message { - flex: 1 1 auto; - padding: 15px; - font-size: 15px; - line-height: 22px; - font-weight: 500; - color: var(--color-text-primary); - - p { - margin-bottom: 15px; - - &:last-child { - margin-bottom: 0; - } - } - - h1 { - color: var(--color-text-brand); - font-size: 22px; - line-height: 33px; - font-weight: 700; - margin-bottom: 15px; - } - - &__actions { - display: flex; - flex-wrap: wrap; - gap: 4px; - - &__wrapper { - display: flex; - margin-top: 30px; - } - - .button { - display: block; - flex-grow: 1; - } - } - } - - &__action { - float: right; - padding: 15px 10px; - - .icon-button { - color: var(--color-text-brand); - } - } -} - -.warning-banner { - border: 1px solid var(--color-border-on-bg-error-softer); - background: var(--color-bg-error-softer); - - &__message { - h1 { - color: var(--color-text-error); - } - - a { - color: var(--color-text-primary); - } - } -} - -.image { - position: relative; - overflow: hidden; - - &__preview { - position: absolute; - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - - &.loaded &__preview { - display: none; - } - - img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - border: 0; - background: transparent; - opacity: 0; - } - - &.loaded img { - opacity: 1; - } -} - -.link-footer { - flex: 0 0 auto; - padding-top: 20px; - z-index: 1; - font-size: 13px; - - .column & { - padding: 15px; - } - - p { - color: var(--color-text-secondary); - margin-bottom: 20px; - - .version { - white-space: nowrap; - } - - strong { - font-weight: 500; - } - - a { - color: var(--color-text-secondary); - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - } -} - -.about { - padding: 20px; - border-top: 1px solid var(--color-border-primary); - - @media screen and (min-width: $no-gap-breakpoint) { - border-radius: 4px; - } - - &__footer { - color: var(--color-text-tertiary); - text-align: center; - font-size: 15px; - line-height: 22px; - margin-top: 20px; - } - - &__header { - margin-bottom: 30px; - - &__hero { - width: 100%; - height: auto; - aspect-ratio: 1.9; - background: var(--color-bg-tertiary); - border-radius: 8px; - margin-bottom: 30px; - } - - h1, - p { - text-align: center; - } - - h1 { - font-size: 24px; - line-height: 1.5; - font-weight: 700; - margin-bottom: 10px; - } - - p { - font-size: 16px; - line-height: 24px; - font-weight: 400; - color: var(--color-text-secondary); - } - } - - &__meta { - border: 1px solid var(--color-border-primary); - border-radius: 4px; - display: flex; - margin-bottom: 30px; - font-size: 15px; - - &__column { - box-sizing: border-box; - width: 50%; - padding: 20px; - } - - &__divider { - width: 0; - border: 0; - border-style: solid; - border-color: var(--color-border-primary); - border-left-width: 1px; - min-height: calc(100% - 60px); - flex: 0 0 auto; - } - - h4 { - font-size: 15px; - text-transform: uppercase; - color: var(--color-text-secondary); - font-weight: 500; - margin-bottom: 20px; - } - - @media screen and (width <= 600px) { - display: block; - - h4 { - text-align: center; - } - - &__column { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - - &__divider { - min-height: 0; - width: 100%; - border-left-width: 0; - border-top-width: 1px; - } - } - - .layout-multiple-columns & { - display: block; - - h4 { - text-align: center; - } - - &__column { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - - &__divider { - min-height: 0; - width: 100%; - border-left-width: 0; - border-top-width: 1px; - } - } - } - - &__mail { - color: var(--color-text-primary); - text-decoration: none; - font-weight: 500; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - - .link-footer { - padding: 0; - margin-top: 60px; - text-align: center; - font-size: 15px; - line-height: 22px; - - @media screen and (min-width: $no-gap-breakpoint) { - display: none; - } - } - - .account { - padding: 0; - border: 0; - } - - .account__avatar-wrapper { - margin-inline-start: 0; - } - - .account__relationship { - display: none; - } - - &__section { - margin-bottom: 10px; - - &__title { - display: flex; - align-items: center; - gap: 6px; - font-size: 17px; - font-weight: 600; - line-height: 22px; - padding: 20px; - border-radius: 4px; - border: 1px solid var(--color-border-primary); - color: var(--color-text-brand); - cursor: pointer; - width: 100%; - background: none; - } - - &.active &__title { - border-radius: 4px 4px 0 0; - } - - &__body { - border: 1px solid var(--color-border-primary); - border-top: 0; - padding: 20px; - font-size: 15px; - line-height: 22px; - } - } - - &__domain-blocks { - margin-top: 30px; - border: 1px solid var(--color-border-primary); - border-radius: 4px; - - &__domain { - border-bottom: 1px solid var(--color-border-primary); - padding: 10px; - font-size: 15px; - color: var(--color-text-secondary); - - &:nth-child(2n) { - background: var(--color-bg-secondary); - } - - &:last-child { - border-bottom: 0; - } - - &__header { - display: flex; - gap: 10px; - justify-content: space-between; - font-weight: 500; - margin-bottom: 4px; - } - - h6 { - color: var(--color-text-primary); - font-size: inherit; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - p { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } -} - -.notification-list { - position: fixed; - bottom: 2rem; - inset-inline-start: 1rem; - z-index: 9999; - display: flex; - flex-direction: column; - gap: 4px; -} - -.notification-bar { - --alert-edge-spacing: 1rem; - - display: flex; - gap: 10px; - flex: 0 0 auto; - width: auto; - padding: 15px; - margin: 0; - color: var(--color-text-on-inverted); - background: var(--color-bg-inverted); - backdrop-filter: blur(8px); - border: 1px solid var(--color-border-on-bg-inverted); - border-radius: 8px; - box-shadow: - 0 10px 15px -3px var(--color-shadow-primary), - 0 4px 6px -4px var(--color-shadow-primary); - cursor: default; - font-size: 15px; - line-height: 21px; - - &.from-side { - translate: calc( - -1 * (100% + var(--alert-edge-spacing)) * var(--text-x-direction) - ); - } - - &.from-below { - translate: 0 calc(100% + var(--alert-edge-spacing)); - } - - &.notification-bar--active { - translate: none; - } - - .no-reduce-motion & { - transition: 0.5s cubic-bezier(0.89, 0.01, 0.5, 1.1); - will-change: translate; - } -} - -.notification-bar__content { - margin-inline-end: auto; -} - -.notification-bar__title { - margin-inline-end: 5px; - font-weight: 700; -} - -.notification-bar__action { - display: inline-block; - border: 0; - background: transparent; - text-transform: uppercase; - cursor: pointer; - color: var(--color-text-brand); - font-weight: 700; - border-radius: 4px; - padding: 0 4px; - - &:hover, - &:focus, - &:active { - background: var(--color-bg-brand-softer); - } -} - -.notification-bar__dismiss-button { - margin-top: -2px; - color: rgb(from currentColor r g b / 85%); - - &:hover, - &:focus, - &:active { - color: currentColor; - } -} - -.notification-bar__loading-indicator { - --spinner-size: 22px; - - position: relative; - height: var(--spinner-size); - width: var(--spinner-size); - margin-inline-start: 2px; - - svg { - color: var(--color-text-on-media); - height: var(--spinner-size); - width: var(--spinner-size); - } -} - -.hashtag-header { - border-bottom: 1px solid var(--color-border-primary); - padding: 15px; - font-size: 17px; - line-height: 22px; - color: var(--color-text-secondary); - - strong { - font-weight: 700; - } - - &__header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; - gap: 15px; - - h1 { - color: var(--color-text-primary); - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - font-size: 22px; - 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(--color-border-primary); - border-radius: 4px; - box-sizing: content-box; - padding: 5px; - - .icon { - width: 24px; - height: 24px; - } - } - } - } -} - -.hashtag-bar { - margin-top: 16px; - display: flex; - flex-wrap: wrap; - font-size: 12px; - line-height: 16px; - gap: 6px; - color: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - - a { - display: inline-flex; - color: inherit; - text-decoration: none; - padding: 4px 12px; - background: var(--color-bg-brand-softer); - border-radius: 4px; - font-weight: 500; - - &:hover, - &:focus, - &:active { - background: var(--color-bg-brand-soft); - } - } - - .link-button { - color: inherit; - font-size: inherit; - line-height: inherit; - padding: 0; - } -} - -.inline-follow-suggestions { - display: flex; - flex-direction: column; - gap: 12px; - padding: 16px 0; - padding-bottom: 0; - border-bottom: 1px solid var(--color-border-primary); - background: var(--color-bg-brand-softer); - - &.focusable:focus-visible { - background: var(--color-bg-brand-softer); - } - - &__header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 16px; - - h3 { - font-size: 15px; - line-height: 22px; - font-weight: 500; - } - - &__actions { - display: flex; - align-items: center; - gap: 24px; - } - - .link-button { - font-size: 13px; - font-weight: 500; - } - } - - &__body { - position: relative; - - &__scroll-button { - position: absolute; - height: 100%; - background: transparent; - border: none; - cursor: pointer; - top: 0; - color: var(--color-text-primary); - opacity: 0.5; - - &.left { - left: 0; - } - - &.right { - right: 0; - } - - &__icon { - border-radius: 50%; - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - display: flex; - align-items: center; - justify-content: center; - aspect-ratio: 1; - padding: 8px; - - .icon { - width: 24px; - height: 24px; - } - } - - &:hover, - &:focus, - &:active { - opacity: 1; - } - } - - &__scrollable { - box-sizing: border-box; - display: flex; - flex-wrap: nowrap; - min-height: 228px; - gap: 16px; - padding: 16px; - scroll-snap-type: x mandatory; - scroll-padding: 16px; - scroll-behavior: smooth; - overflow-x: scroll; - scrollbar-width: none; - - &__card { - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - display: flex; - flex-direction: column; - gap: 12px; - align-items: center; - padding: 12px; - scroll-snap-align: start; - flex: 0 0 auto; - width: 200px; - box-sizing: border-box; - position: relative; - - a { - text-decoration: none; - } - - & > .icon-button { - position: absolute; - inset-inline-end: 8px; - top: 8px; - opacity: 0.75; - } - - &__avatar { - height: 48px; - display: flex; - - a { - display: flex; - text-decoration: none; - } - } - - .account__avatar { - flex-shrink: 0; - align-self: flex-end; - border: 1px solid var(--color-border-primary); - background-color: var(--color-bg-tertiary); - } - - &__text-stack { - display: flex; - flex-direction: column; - gap: 4px; - align-items: center; - max-width: 100%; - - a { - max-width: 100%; - } - - &__source { - display: inline-flex; - align-items: center; - color: var(--color-text-tertiary); - gap: 4px; - overflow: hidden; - white-space: nowrap; - cursor: help; - - > span { - overflow: hidden; - text-overflow: ellipsis; - } - - .icon { - width: 16px; - height: 16px; - } - } - } - - .display-name { - display: flex; - flex-direction: column; - gap: 4px; - align-items: center; - - & > * { - max-width: 100%; - } - - &__html { - font-size: 15px; - font-weight: 500; - color: var(--color-text-primary); - } - - &__account { - font-size: 14px; - color: var(--color-text-secondary); - } - } - - .verified-badge { - font-size: 14px; - max-width: 100%; - } - - .button { - display: block; - width: 100%; - } - } - } - } -} - -.filtered-notifications-banner { - display: flex; - align-items: center; - border-bottom: 1px solid var(--color-border-primary); - padding: 16px 24px; - gap: 8px; - color: var(--color-text-secondary); - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: var(--color-text-primary); - } - - .notification-group__icon { - color: inherit; - } - - &__text { - flex: 1 1 auto; - font-size: 14px; - line-height: 20px; - - strong { - font-size: 16px; - line-height: 24px; - display: block; - } - } - - &__badge { - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - border-radius: 100px; - padding: 2px 8px; - } -} - -.notification-request { - $padding: 15px; - - display: flex; - padding: $padding; - gap: 8px; - position: relative; - border-bottom: 1px solid var(--color-border-primary); - - &__checkbox { - position: absolute; - inset-inline-start: $padding; - top: 50%; - transform: translateY(-50%); - width: 0; - overflow: hidden; - opacity: 0; - - .check-box { - display: flex; - } - } - - &__link { - display: flex; - align-items: center; - gap: 12px; - flex: 1 1 auto; - text-decoration: none; - color: inherit; - overflow: hidden; - - .account__avatar { - flex-shrink: 0; - } - } - - &__name { - flex: 1 1 auto; - color: var(--color-text-secondary); - font-size: 14px; - line-height: 20px; - overflow: hidden; - text-overflow: ellipsis; - - &__display-name { - display: flex; - align-items: center; - gap: 6px; - font-size: 16px; - letter-spacing: 0.5px; - line-height: 24px; - color: var(--color-text-primary); - - bdi { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - - .filtered-notifications-banner__badge { - color: var(--color-text-on-brand-base); - background: var(--color-bg-brand-base); - border-radius: 4px; - padding: 1px 6px; - } - } - - &__actions { - display: flex; - align-items: center; - gap: 8px; - - .icon-button { - border-radius: 4px; - border: 1px solid var(--color-border-primary); - padding: 5px; - } - } - - .notification-request__link { - transition: padding-inline-start 0.1s ease-in-out; - } - - &--forced-checkbox { - cursor: pointer; - - &:hover { - background: var(--color-bg-secondary); - } - - .notification-request__checkbox { - opacity: 1; - width: 30px; - } - - .notification-request__link { - padding-inline-start: 30px; - } - - .notification-request__actions { - display: none; - } - } -} - -.more-from-author { - box-sizing: border-box; - font-size: 14px; - color: var(--color-text-secondary); - background: var(--color-bg-tertiary); - border: 1px solid var(--color-border-primary); - border-top: 0; - border-radius: 0 0 8px 8px; - padding: 15px; - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 4px 8px; - - .logo { - width: 16px; - height: 16px; - color: var(--color-text-secondary); - } - - & > span { - display: flex; - align-items: center; - gap: 8px; - } - - a { - display: inline-flex; - align-items: center; - gap: 4px; - font-weight: 500; - color: var(--color-text-primary); - text-decoration: none; - min-width: 0; - - &:hover, - &:focus, - &:active { - color: var(--color-text-brand); - } - } -} - -.notification-group { - display: flex; - align-items: flex-start; - gap: 8px; - padding: 16px 24px; - border-bottom: 1px solid var(--color-border-primary); - - &__icon { - width: 40px; - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - color: var(--color-text-tertiary); - - .icon { - width: 28px; - height: 28px; - } - } - - &--follow &__icon, - &--follow-request &__icon { - color: var(--color-text-brand); - } - - &--favourite &__icon { - color: var(--color-text-favourite-highlight); - } - - &--reblog &__icon { - color: var(--color-text-success); - } - - &--relationships-severance-event &__icon, - &--admin-report &__icon, - &--admin-sign-up &__icon { - color: var(--color-text-tertiary); - } - - &--moderation-warning &__icon { - color: var(--color-text-bookmark-highlight); - } - - &--follow-request &__actions { - align-items: center; - display: flex; - gap: 8px; - - .icon-button { - border: 1px solid var(--color-border-primary); - border-radius: 50%; - padding: 1px; - } - } - - &__main { - display: flex; - flex-direction: column; - gap: 8px; - flex: 1 1 auto; - overflow: hidden; - container-type: inline-size; - - &__header { - display: flex; - flex-direction: column; - gap: 8px; - - &__wrapper { - display: flex; - justify-content: space-between; - } - - &__label { - display: flex; - flex-wrap: wrap; - gap: 2px 8px; - font-size: 15px; - line-height: 22px; - color: var(--color-text-secondary); - - a { - color: inherit; - text-decoration: none; - } - - bdi { - font-weight: 700; - color: var(--color-text-primary); - } - - time { - color: var(--color-text-tertiary); - } - - @container (width < 350px) { - time, - &-separator { - display: none; - } - } - } - } - - &__status { - border: 1px solid var(--color-border-primary); - border-radius: 8px; - padding: 8px; - } - - &__additional-content { - color: var(--color-text-tertiary); - margin-top: -8px; // to offset the parent's `gap` property - font-size: 15px; - line-height: 22px; - } - } - - .status { - padding: 0; - border: 0; - } - - &__embedded-status { - display: flex; - flex-direction: column; - gap: 8px; - cursor: pointer; - - &__account { - display: flex; - align-items: center; - gap: 4px; - color: var(--color-text-tertiary); - font-size: 15px; - line-height: 22px; - - bdi { - color: var(--color-text-secondary); - } - - .account__avatar { - flex: 0 0 auto; - } - } - - &__content { - display: -webkit-box; - font-size: 15px; - line-height: 22px; - color: var(--color-text-secondary); - -webkit-line-clamp: 4; - line-clamp: 4; - -webkit-box-orient: vertical; - max-height: none; - overflow: hidden; - - p, - a { - color: inherit; - } - - p { - margin-bottom: 8px; - } - } - - .reply-indicator__attachments { - margin-top: 0; - font-size: 15px; - line-height: 22px; - color: var(--color-text-tertiary); - } - } -} - -.notification-group__actions, -.compose-form__actions { - .button { - display: block; // Otherwise text-ellipsis doesn't work - flex: 1 1 auto; - } -} - -.notification-ungrouped { - padding: 16px 24px; - border-bottom: 1px solid var(--color-border-primary); - - &__header { - display: flex; - align-items: center; - gap: 8px; - color: var(--color-text-tertiary); - font-size: 15px; - line-height: 22px; - font-weight: 500; - padding-inline-start: 24px; - margin-bottom: 16px; - - &__icon { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - - .icon { - width: 16px; - height: 16px; - } - } - - a { - color: inherit; - text-decoration: none; - } - } - - .status:not(.status--is-quote) { - border: 0; - padding: 0; - } - - .status__wrapper-direct { - background: transparent; - } - - .status { - // 40px avatar + 8px gap - --status-gutter-width: 48px; - } - - .status--is-quote { - --status-gutter-width: 0; - } - - .status__content, - .status__action-bar, - .media-gallery, - .video-player, - .audio-player, - .attachment-list, - .picture-in-picture-placeholder, - .more-from-author, - .status-card, - .hashtag-bar, - .content-warning, - .filter-warning { - margin-inline-start: var(--status-gutter-width); - width: calc(100% - var(--status-gutter-width)); - } - - .more-from-author { - width: calc(100% - var(--status-gutter-width) + 2px); - } - - .status__content__read-more-button { - margin-inline-start: var(--status-gutter-width); - } - - .notification__report { - border: 0; - padding: 0; - } -} - -.notification-group--unread, -.notification-ungrouped--unread { - position: relative; - - &::before { - content: ''; - position: absolute; - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - border-inline-start: 4px solid var(--color-text-brand); - pointer-events: none; - } -} - -.hover-card-controller[data-popper-reference-hidden='true'] { - opacity: 0; - pointer-events: none; -} - -.hover-card { - box-shadow: var(--dropdown-shadow); - background: var(--color-bg-primary); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--color-border-primary); - border-radius: 8px; - padding: 16px; - width: 270px; - display: flex; - flex-direction: column; - gap: 12px; - - &--loading { - position: relative; - min-height: 100px; - } - - &__name { - display: flex; - gap: 12px; - text-decoration: none; - color: inherit; - } - - &__numbers, - &__familiar-followers { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 2px 10px; - } - - &__numbers { - font-size: 15px; - line-height: 22px; - color: var(--color-text-primary); - - strong { - font-weight: 700; - } - } - - &__text-row { - display: flex; - flex-direction: column; - gap: 8px; - } - - &__bio { - color: var(--color-text-primary); - font-size: 14px; - line-height: 20px; - display: -webkit-box; - line-clamp: 2; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - max-height: 2 * 20px; - overflow: hidden; - - p { - margin-bottom: 0; - } - - a { - color: inherit; - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - } - - &__note { - &-label { - color: var(--color-text-tertiary); - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - } - - dd { - white-space: pre-line; - color: var(--color-text-primary); - overflow: hidden; - line-clamp: 3; // Not yet supported in browers - display: -webkit-box; // The next 3 properties are needed - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - } - } - - &__limited-account-note { - text-align: center; - font-weight: 500; - } - - .display-name { - font-size: 15px; - line-height: 22px; - - bdi { - font-weight: 500; - color: var(--color-text-primary); - } - - &__account { - display: block; - color: var(--color-text-tertiary); - } - } - - .account-fields { - color: var(--color-text-primary); - font-size: 14px; - line-height: 20px; - - a { - color: inherit; - text-decoration: none; - - &:focus, - &:hover, - &:active { - text-decoration: underline; - } - } - - dl { - display: flex; - align-items: center; - gap: 4px; - - dt { - flex: 0 1 auto; - color: var(--color-text-tertiary); - min-width: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - dd { - flex: 1 1 auto; - font-weight: 500; - min-width: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-align: end; - } - - &.verified { - dd { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 4px; - overflow: hidden; - white-space: nowrap; - color: var(--color-text-success); - - & > span { - overflow: hidden; - text-overflow: ellipsis; - } - - a { - font-weight: 500; - } - - .icon { - width: 16px; - height: 16px; - } - } - } - } - } -} - -.content-warning { - display: block; - box-sizing: border-box; - color: var(--color-text-primary); - background: var(--color-bg-brand-softer); - border: 1px solid var(--color-border-on-bg-brand-softer); - border-radius: 8px; - padding: 8px (5px + 8px); - position: relative; - font-size: 15px; - line-height: 22px; - cursor: pointer; - - p { - margin-bottom: 8px; - font-weight: 500; - } - - .link-button { - font-size: inherit; - line-height: inherit; - font-weight: 500; - } - - &--filter { - color: var(--color-text-secondary); - - p { - font-weight: normal; - } - - .filter-name { - font-weight: 500; - color: var(--color-text-primary); - } - } -} - -.lists__item { - display: flex; - align-items: center; - gap: 16px; - padding-inline-end: 13px; - border-bottom: 1px solid var(--color-border-primary); - - &__title { - display: flex; - align-items: center; - gap: 5px; - padding: 16px 13px; - flex: 1 1 auto; - font-size: 16px; - line-height: 24px; - color: var(--color-text-secondary); - text-decoration: none; - - &:is(a):hover, - &:is(a):focus, - &:is(a):active { - color: var(--color-text-primary); - } - - input { - display: block; - width: 100%; - background: transparent; - border: 0; - padding: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; - color: inherit; - - &::placeholder { - color: var(--color-text-secondary); - opacity: 1; - } - - &:focus { - outline: 0; - } - } - } -} - -.column-search-header { - display: flex; - gap: 12px; - align-items: center; - border: 1px solid var(--color-border-primary); - border-top: 0; - border-bottom: 0; - padding: 16px; - padding-bottom: 8px; - - input { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - color: var(--color-text-primary); - padding: 12px; - font-size: 16px; - line-height: normal; - border-radius: 4px; - display: block; - flex: 1 1 auto; - - &::placeholder { - color: var(--color-text-secondary); - opacity: 1; - } - - &:focus { - outline: 0; - } - } -} - -.column-footer { - padding: 16px; -} - -.lists-scrollable { - min-height: 50vh; -} - -.featured-carousel { - overflow: hidden; - flex-shrink: 0; - border-bottom: 1px solid var(--color-border-primary); - touch-action: pan-y; - - &__slides { - display: flex; - flex-wrap: nowrap; - align-items: start; - } - - &__slide { - flex: 0 0 auto; - flex-basis: 100%; - width: 100%; - overflow: hidden; - } - - .status { - border-bottom: 0; - } - - &__header { - padding: 8px 16px; - color: var(--color-text-secondary); - inset-inline-end: 0; - display: flex; - align-items: center; - gap: 4px; - } - - &__title { - flex-grow: 1; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - display: flex; - align-items: center; - gap: 4px; - - .icon { - width: 16px; - height: 16px; - } - } - - &__pagination { - display: flex; - align-items: center; - gap: 4px; - } -} diff --git a/app/javascript/styles_new/mastodon/containers.scss b/app/javascript/styles_new/mastodon/containers.scss deleted file mode 100644 index 57c62a29e3..0000000000 --- a/app/javascript/styles_new/mastodon/containers.scss +++ /dev/null @@ -1,166 +0,0 @@ -@use 'variables' as *; - -.container-alt { - width: 700px; - margin: 0 auto; - - @media screen and (width <= 740px) { - width: 100%; - margin: 0; - } -} - -.logo-container { - margin: 50px auto; - - h1 { - display: flex; - justify-content: center; - align-items: center; - - .logo { - height: 42px; - margin-inline-end: 10px; - } - - a { - display: flex; - justify-content: center; - align-items: center; - color: var(--color-text-primary); - text-decoration: none; - outline: 0; - padding: 12px 16px; - line-height: 32px; - font-weight: 500; - font-size: 14px; - } - } -} - -.compose-standalone { - .compose-form { - width: 400px; - margin: 0 auto; - padding: 10px 0; - padding-bottom: 20px; - box-sizing: border-box; - - @media screen and (width <= 400px) { - width: 100%; - padding: 20px; - } - } -} - -.account-header { - width: 400px; - margin: 0 auto; - display: flex; - align-items: center; - gap: 10px; - font-size: 14px; - line-height: 20px; - box-sizing: border-box; - padding: 20px 0; - margin-top: 40px; - margin-bottom: 10px; - border-bottom: 1px solid var(--color-border-primary); - - @media screen and (width <= 440px) { - width: 100%; - margin: 0; - padding: 20px; - } - - .avatar { - width: 48px; - height: 48px; - flex: 0 0 auto; - - img { - width: 100%; - height: 100%; - display: block; - margin: 0; - border-radius: var(--avatar-border-radius); - } - } - - .name { - flex: 1 1 auto; - color: var(--color-text-primary); - - .username { - display: block; - font-size: 16px; - line-height: 24px; - text-overflow: ellipsis; - overflow: hidden; - color: var(--color-text-primary); - } - } - - .logout-link { - display: block; - font-size: 32px; - line-height: 40px; - flex: 0 0 auto; - } -} - -.redirect { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - font-size: 14px; - line-height: 18px; - - &__logo { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 30px; - - img { - height: 48px; - } - } - - &__message { - text-align: center; - - h1 { - font-size: 17px; - line-height: 22px; - font-weight: 700; - margin-bottom: 30px; - } - - p { - margin-bottom: 30px; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: var(--color-text-brand); - font-weight: 500; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - - &__link { - margin-top: 15px; - } -} diff --git a/app/javascript/styles_new/mastodon/css_variables.scss b/app/javascript/styles_new/mastodon/css_variables.scss deleted file mode 100644 index b270bd337f..0000000000 --- a/app/javascript/styles_new/mastodon/css_variables.scss +++ /dev/null @@ -1,228 +0,0 @@ -@use 'theme_utils' as utils; - -:root { - --color-black: #000; - --color-grey-950: #181821; - --color-grey-800: #292938; - --color-grey-700: #444664; - --color-grey-600: #545778; - --color-grey-500: #696d91; - --color-grey-400: #8b8dac; - --color-grey-300: #b4b6cb; - --color-grey-200: #d8d9e3; - --color-grey-100: #f0f0f5; - --color-grey-50: #f0f1ff; - --color-white: #fff; - --color-indigo-600: #6147e6; - --color-indigo-400: #8886ff; - --color-indigo-300: #a5abfd; - --color-indigo-200: #c8cdfe; - --color-indigo-100: #e0e3ff; - --color-indigo-50: #f0f1ff; - --color-red-500: #ff637e; - --color-red-600: #ec003f; - --color-yellow-400: #ffb900; - --color-yellow-600: #e17100; - --color-green-400: #05df72; - --color-green-600: #00a63e; - - /* TEXT TOKENS */ - - --color-text-primary: var(--color-grey-50); - --color-text-secondary: var(--color-grey-400); - --color-text-tertiary: var(--color-grey-500); - --color-text-on-inverted: var(--color-grey-950); - --color-text-brand: var(--color-indigo-400); - --color-text-brand-soft: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-brand) - ); - --color-text-on-brand-base: var(--color-white); - --color-text-error: var(--color-red-500); - --color-text-on-error-base: var(--color-white); - --color-text-warning: var(--color-yellow-400); - --color-text-on-warning-base: var(--color-white); - --color-text-success: var(--color-green-400); - --color-text-on-success-base: var(--color-white); - --color-text-disabled: var(--color-grey-600); - --color-text-on-disabled: var(--color-grey-400); - --color-text-bookmark-highlight: var(--color-text-error); - --color-text-favourite-highlight: var(--color-text-warning); - --color-text-on-media: var(--color-white); - --color-text-status-links: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - - /* BACKGROUND TOKENS */ - - // Neutrals - --color-bg-primary: var(--color-grey-950); - --overlay-strength-secondary: 10%; - --color-bg-secondary-base: var(--color-indigo-200); - --color-bg-secondary: #{utils.css-alpha( - var(--color-bg-secondary-base), - var(--overlay-strength-secondary) - )}; - --color-bg-secondary-solid: color-mix( - in srgb, - var(--color-bg-primary), - var(--color-bg-secondary-base) var(--overlay-strength-secondary) - ); - --color-bg-tertiary: color-mix( - in oklab, - var(--color-bg-primary), - var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary)) - ); - - // Utility - --color-bg-ambient: var(--color-bg-primary); - --color-bg-elevated: var(--color-bg-primary); - --color-bg-inverted: var(--color-grey-50); - --color-bg-media-base: var(--color-black); - --color-bg-media-strength: 65%; - --color-bg-media: #{utils.css-alpha( - var(--color-bg-media-base), - var(--color-bg-media-strength) - )}; - --color-bg-overlay: var(--color-black); - --color-bg-disabled: var(--color-grey-700); - - // Brand - --overlay-strength-brand: 10%; - --color-bg-brand-base: var(--color-indigo-600); - --color-bg-brand-base-hover: color-mix( - in oklab, - var(--color-bg-brand-base), - black var(--overlay-strength-brand) - ); - --color-bg-brand-soft: #{utils.css-alpha( - var(--color-bg-brand-base), - calc(var(--overlay-strength-brand) * 1.5) - )}; - --color-bg-brand-softer: #{utils.css-alpha( - var(--color-bg-brand-base), - var(--overlay-strength-brand) - )}; - - // Error - --overlay-strength-error: 12%; - --color-bg-error-base: var(--color-red-600); - --color-bg-error-base-hover: color-mix( - in oklab, - var(--color-bg-error-base), - black var(--overlay-strength-error) - ); - --color-bg-error-soft: #{utils.css-alpha( - var(--color-bg-error-base), - calc(var(--overlay-strength-error) * 1.5) - )}; - --color-bg-error-softer: #{utils.css-alpha( - var(--color-bg-error-base), - var(--overlay-strength-error) - )}; - - // Warning - --overlay-strength-warning: 10%; - --color-bg-warning-base: var(--color-yellow-600); - --color-bg-warning-base-hover: color-mix( - in oklab, - var(--color-bg-warning-base), - black var(--overlay-strength-warning) - ); - --color-bg-warning-soft: #{utils.css-alpha( - var(--color-bg-warning-base), - calc(var(--overlay-strength-warning) * 1.5) - )}; - --color-bg-warning-softer: #{utils.css-alpha( - var(--color-bg-warning-base), - var(--overlay-strength-warning) - )}; - - // Success - --overlay-strength-success: 15%; - --color-bg-success-base: var(--color-green-600); - --color-bg-success-base-hover: color-mix( - in oklab, - var(--color-bg-success-base), - black var(--overlay-strength-success) - ); - --color-bg-success-soft: #{utils.css-alpha( - var(--color-bg-success-base), - calc(var(--overlay-strength-success) * 1.5) - )}; - --color-bg-success-softer: #{utils.css-alpha( - var(--color-bg-success-base), - var(--overlay-strength-success) - )}; - - /* BORDER TOKENS */ - - --border-strength-primary: 18%; - --color-border-primary: #{utils.css-alpha( - var(--color-indigo-200), - var(--border-strength-primary) - )}; - --color-border-media: rgb(252 248 255 / 15%); - --color-border-on-bg-secondary: #{utils.css-alpha( - var(--color-indigo-200), - calc(var(--border-strength-primary) / 1.5) - )}; - --color-border-on-bg-brand-softer: var(--color-border-primary); - --color-border-on-bg-error-softer: #{utils.css-alpha( - var(--color-text-error), - 50% - )}; - --color-border-on-bg-warning-softer: #{utils.css-alpha( - var(--color-text-warning), - 50% - )}; - --color-border-on-bg-success-softer: #{utils.css-alpha( - var(--color-text-success), - 50% - )}; - --color-border-on-bg-inverted: var(--color-border-primary); - - /* SHADOW TOKENS */ - - --shadow-strength-primary: 80%; - --color-shadow-primary: #{utils.css-alpha( - var(--color-black), - var(--shadow-strength-primary) - )}; - --dropdown-shadow: - 0 20px 25px -5px var(--color-shadow-primary), - 0 8px 10px -6px var(--color-shadow-primary); - --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary)); - - /* GRAPHS/CHARTS TOKENS */ - - --color-graph-primary-stroke: var(--color-text-brand); - --color-graph-primary-fill: var(--color-bg-brand-softer); - --color-graph-warning-stroke: var(--color-text-warning); - --color-graph-warning-fill: var(--color-bg-warning-softer); - --color-graph-disabled-stroke: var(--color-text-disabled); - --color-graph-disabled-fill: var(--color-bg-disabled); - - /* LEGACY TOKENS */ - - --rich-text-container-color: rgb(87 24 60 / 100%); - --rich-text-text-color: rgb(255 175 212 / 100%); - --rich-text-decorations-color: rgb(128 58 95 / 100%); - - /* MISCELLANEOUS */ - - --outline-focus-default: 2px solid var(--color-text-brand); - --avatar-border-radius: 8px; -} - -body { - // Variable for easily inverting directional UI elements, - --text-x-direction: 1; - - &.rtl { - --text-x-direction: -1; - } -} diff --git a/app/javascript/styles_new/mastodon/dashboard.scss b/app/javascript/styles_new/mastodon/dashboard.scss deleted file mode 100644 index db3f0e8a84..0000000000 --- a/app/javascript/styles_new/mastodon/dashboard.scss +++ /dev/null @@ -1,120 +0,0 @@ -@use 'variables' as *; - -.dashboard__counters { - display: flex; - flex-wrap: wrap; - margin: 0 -5px; - margin-bottom: 20px; - - & > div { - box-sizing: border-box; - flex: 0 0 33.333%; - padding: 0 5px; - margin-bottom: 10px; - - & > div, - & > a { - padding: 20px; - background: var(--color-bg-primary); - border-radius: 4px; - border: 1px solid var(--color-border-primary); - box-sizing: border-box; - height: 100%; - } - - & > a { - text-decoration: none; - color: inherit; - display: block; - - &:hover, - &:focus, - &:active { - background: var(--color-bg-brand-softer); - } - } - } - - &__num, - &__text { - text-align: center; - font-weight: 500; - font-size: 24px; - color: var(--color-text-primary); - margin-bottom: 20px; - line-height: 30px; - } - - &__text { - font-size: 18px; - } - - &__label { - font-size: 14px; - color: var(--color-text-secondary); - text-align: center; - font-weight: 500; - } -} - -.dashboard { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - gap: 10px; - - @media screen and (width <= 1350px) { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - } - - &__item { - &--span-double-column { - grid-column: span 2; - } - - &--span-double-row { - grid-row: span 2; - } - - h4 { - padding-top: 20px; - } - } - - &__quick-access { - display: flex; - align-items: baseline; - border-radius: 4px; - background: var(--color-bg-brand-base); - color: var(--color-text-on-brand-base); - transition: all 100ms ease-in; - font-size: 14px; - padding: 8px 16px; - text-decoration: none; - margin-bottom: 4px; - - &:active, - &:focus, - &:hover { - background-color: var(--color-bg-brand-base-hover); - transition: all 200ms ease-out; - } - - &.positive { - background: var(--color-bg-success-softer); - color: var(--color-text-success); - } - - &.negative { - background: var(--color-bg-error-softer); - color: var(--color-text-error); - } - - span { - flex: 1 1 auto; - } - - strong { - font-weight: 700; - } - } -} diff --git a/app/javascript/styles_new/mastodon/emoji_picker.scss b/app/javascript/styles_new/mastodon/emoji_picker.scss deleted file mode 100644 index ad2f2f630d..0000000000 --- a/app/javascript/styles_new/mastodon/emoji_picker.scss +++ /dev/null @@ -1,248 +0,0 @@ -@use 'variables' as *; - -.emoji-mart { - font-size: 13px; - display: inline-block; - - &, - * { - box-sizing: border-box; - line-height: 1.15; - } - - .emoji-mart-emoji { - padding: 6px; - } -} - -.emoji-mart-bar { - &:first-child { - background: var(--color-bg-tertiary); - border-bottom: 1px solid var(--color-border-primary); - } -} - -.emoji-mart-anchors { - display: flex; - justify-content: space-between; - padding: 0 6px; - line-height: 0; -} - -.emoji-mart-anchor { - position: relative; - flex: 1; - text-align: center; - padding: 12px 4px; - overflow: hidden; - transition: color 0.1s ease-out; - cursor: pointer; - background: transparent; - border: 0; - color: var(--color-text-secondary); - - &:hover { - color: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-secondary) - ); - } -} - -.emoji-mart-anchor-selected { - color: var(--color-text-brand); - - &:hover { - color: var(--color-text-brand-soft); - } - - .emoji-mart-anchor-bar { - bottom: -1px; - } -} - -.emoji-mart-anchor-bar { - position: absolute; - bottom: -5px; - inset-inline-start: 0; - width: 100%; - height: 4px; - background-color: var(--color-text-brand); -} - -.emoji-mart-anchors { - i { - display: inline-block; - width: 100%; - max-width: 22px; - } - - svg { - fill: currentColor; - max-height: 18px; - } -} - -.emoji-mart-scroll { - overflow-y: scroll; - height: 270px; - max-height: 35vh; - padding: 0 6px 6px; - will-change: transform; -} - -.emoji-mart-search { - padding: 10px; - padding-inline-end: 45px; - position: relative; - - input { - font-size: 16px; - font-weight: 400; - padding: 7px 9px; - padding-inline-end: 25px; - font-family: inherit; - display: block; - width: 100%; - background: var(--color-bg-secondary); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - - &::-moz-focus-inner { - border: 0; - } - - &:active, - &:focus { - outline: none !important; - border-width: 1px !important; - } - - &::-webkit-search-cancel-button { - display: none; - } - } -} - -.emoji-mart-search-icon { - position: absolute; - top: 18px; - inset-inline-end: 45px + 5px; - z-index: 2; - padding: 2px 5px 1px; - border: 0; - background: none; - transition: all 100ms linear; - transition-property: opacity; - pointer-events: auto; - - &:disabled { - cursor: default; - pointer-events: none; - } - - svg { - fill: currentColor; - } -} - -.emoji-mart-category .emoji-mart-emoji { - cursor: pointer; - - span { - z-index: 1; - position: relative; - text-align: center; - display: inline-flex !important; - align-items: center; - justify-content: center; - } - - &:hover::before { - z-index: -1; - content: ''; - position: absolute; - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - background-color: var(--color-bg-brand-softer); - border-radius: 100%; - } -} - -.emoji-mart-category-label { - z-index: 2; - position: relative; - position: -webkit-sticky; - position: sticky; - top: 0; - - span { - display: block; - width: 100%; - font-weight: 500; - padding: 5px 6px; - } -} - -/* For screenreaders only, via https://stackoverflow.com/a/19758620 */ -.emoji-mart-sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip-path: inset(50%); - border: 0; -} - -.emoji-mart-category-list { - margin: 0; - padding: 0; -} - -.emoji-mart-category-list li { - list-style: none; - margin: 0; - padding: 0; - display: inline-block; -} - -.emoji-mart-emoji { - position: relative; - display: inline-block; - background: transparent; - border: 0; - padding: 0; - font-size: 0; - - span { - width: 22px; - height: 22px; - } -} - -.emoji-mart-no-results { - font-size: 14px; - color: var(--color-text-tertiary); - text-align: center; - padding: 5px 6px; - padding-top: 70px; - - .emoji-mart-no-results-label { - margin-top: 0.2em; - } - - .emoji-mart-emoji:hover::before { - cursor: default; - content: none; - } -} - -.emoji-mart-preview { - display: none; -} diff --git a/app/javascript/styles_new/mastodon/forms.scss b/app/javascript/styles_new/mastodon/forms.scss deleted file mode 100644 index 9f716c2126..0000000000 --- a/app/javascript/styles_new/mastodon/forms.scss +++ /dev/null @@ -1,1449 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; - -code { - font-family: $font-monospace, monospace; - font-weight: 400; -} - -.form-container { - max-width: 450px; - padding: 20px; - padding-bottom: 50px; - margin: 50px auto; -} - -.form-section { - border-radius: 8px; - background: var(--color-bg-secondary); - padding: 24px; - margin-bottom: 24px; -} - -.fade-out-top { - position: relative; - overflow: hidden; - height: 160px; - max-width: 566px; - margin-inline: auto; - - &::after { - content: ''; - display: block; - background: linear-gradient( - to bottom, - var(--color-bg-secondary-solid), - transparent - ); - position: absolute; - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100px; - pointer-events: none; - } - - & > div { - position: absolute; - inset-inline-start: 0; - bottom: 0; - } -} - -.indicator-icon { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 50%; - color: var(--color-text-primary); - - &.success { - color: var(--color-text-on-success-base); - background: var(--color-bg-success-base); - } - - &.failure { - color: var(--color-text-on-error-base); - background: var(--color-bg-error-base); - } -} - -.simple_form { - &.hidden { - display: none; - } - - .input { - margin-bottom: 16px; - overflow: hidden; - - &:last-child { - margin-bottom: 0; - } - - &__toolbar { - margin-top: 16px; - display: flex; - align-items: center; - gap: 16px; - - .character-counter { - flex: 0 0 auto; - } - } - - &.hidden { - margin: 0; - } - - &.radio_buttons { - .radio { - margin-bottom: 15px; - - &:last-child { - margin-bottom: 0; - } - } - - .radio > label { - position: relative; - padding-inline-start: 28px; - - input { - position: absolute; - top: -2px; - inset-inline-start: 0; - } - } - } - - &.boolean { - position: relative; - margin-bottom: 0; - - .label_input > label { - font-family: inherit; - font-size: 14px; - padding-top: 5px; - color: var(--color-text-primary); - display: block; - width: auto; - } - - .label_input, - .hint { - padding-inline-start: 28px; - } - - .label_input__wrapper { - position: static; - } - - label.checkbox { - position: absolute; - top: 2px; - inset-inline-start: 0; - } - - label a { - color: var(--color-text-brand); - text-decoration: underline; - - &:hover, - &:active, - &:focus { - text-decoration: none; - } - } - - .overridden, - .recommended, - .not_recommended { - position: absolute; - margin: 0 4px; - margin-top: -2px; - } - } - } - - .row { - display: flex; - margin: 0 -5px; - - .input { - box-sizing: border-box; - flex: 1 1 auto; - width: 50%; - padding: 0 5px; - } - } - - .title { - font-size: 28px; - line-height: 33px; - font-weight: 700; - margin-bottom: 15px; - } - - .lead { - font-size: 17px; - line-height: 22px; - color: var(--color-text-primary); - margin-bottom: 30px; - - &.invited-by { - margin-bottom: 15px; - } - - a { - color: var(--color-text-brand); - } - } - - .rules-list { - font-size: 17px; - line-height: 22px; - margin-bottom: 30px; - } - - .hint { - color: var(--color-text-secondary); - - a { - color: var(--color-text-brand); - } - - code { - border-radius: 3px; - padding: 0.2em 0.4em; - background: var(--color-bg-secondary); - } - - li { - list-style: disc; - margin-inline-start: 18px; - } - - .icon { - vertical-align: -3px; - } - } - - ul.hint { - margin-bottom: 15px; - } - - span.hint { - display: block; - font-size: 12px; - margin-top: 4px; - } - - p.hint { - margin-bottom: 15px; - color: var(--color-text-secondary); - - &.subtle-hint { - text-align: center; - font-size: 12px; - line-height: 18px; - margin-top: 15px; - margin-bottom: 0; - } - } - - .authentication-hint { - margin-bottom: 25px; - } - - .card { - margin-bottom: 15px; - } - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - .input.with_floating_label { - .label_input { - display: flex; - - & > label { - font-family: inherit; - font-size: 14px; - color: var(--color-text-primary); - font-weight: 500; - min-width: 150px; - flex: 0 0 auto; - } - - input, - select { - flex: 1 1 auto; - } - } - - &.select .hint { - margin-top: 6px; - margin-inline-start: 150px; - } - } - - .input.with_label { - .label_input > label { - font-family: inherit; - font-size: 14px; - color: var(--color-text-primary); - display: block; - margin-bottom: 8px; - overflow-wrap: break-word; - font-weight: 500; - } - - .hint { - margin-top: 6px; - } - - ul { - flex: 390px; - } - } - - .input.with_block_label { - max-width: none; - - & > label { - font-family: inherit; - font-size: 14px; - color: var(--color-text-primary); - display: block; - font-weight: 600; - line-height: 20px; - } - - .hint { - line-height: 16px; - margin-bottom: 12px; - } - - ul { - columns: 2; - - @media screen and (max-width: $mobile-breakpoint) { - columns: 1; - } - } - } - - .input.with_block_label.user_role_permissions_as_keys ul { - columns: unset; - } - - .input.datetime .label_input, - .input.date .label_input { - display: flex; - gap: 4px; - align-items: center; - - select { - display: inline-block; - width: auto; - flex: 0; - } - } - - .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; - } - - .required abbr { - text-decoration: none; - color: var(--color-text-error); - } - - .fields-group { - margin-bottom: 25px; - - .input:last-child { - margin-bottom: 0; - } - - &__thumbnail { - display: block; - margin: 0; - margin-bottom: 10px; - max-width: 100%; - height: auto; - border-radius: var(--avatar-border-radius); - background: url('@/images/void.png'); - - &[src$='missing.png'] { - visibility: hidden; - } - - &:last-child { - margin-bottom: 0; - } - - &#account_avatar-preview { - width: 90px; - height: 90px; - object-fit: cover; - } - } - } - - .fields-row { - display: flex; - margin: 0 -10px; - padding-top: 5px; - margin-bottom: 25px; - - .input { - max-width: none; - } - - &__column { - box-sizing: border-box; - padding: 0 10px; - flex: 1 1 auto; - min-height: 1px; - - &-6 { - max-width: 50%; - } - - .actions { - margin-top: 27px; - } - } - - .fields-group:last-child, - .fields-row__column.fields-group { - margin-bottom: 0; - } - - @media screen and (max-width: $no-columns-breakpoint) { - display: block; - margin-bottom: 0; - - &__column { - max-width: none; - } - - .fields-group:last-child, - .fields-row__column.fields-group, - .fields-row__column { - margin-bottom: 25px; - } - } - - .fields-group.invited-by { - margin-bottom: 30px; - - .hint { - text-align: center; - } - } - } - - .input.radio_buttons .radio label { - margin-bottom: 5px; - font-family: inherit; - font-size: 14px; - color: var(--color-text-primary); - display: block; - width: auto; - } - - .check_boxes { - .checkbox { - label { - font-family: inherit; - font-size: 14px; - color: var(--color-text-primary); - display: inline-block; - width: auto; - position: relative; - padding-top: 5px; - padding-inline-start: 25px; - flex: 1 1 auto; - } - - input[type='checkbox'] { - position: absolute; - inset-inline-start: 0; - top: 5px; - margin: 0; - } - } - } - - .input.static .label_input__wrapper { - font-size: 14px; - padding: 10px; - border: 1px solid var(--color-border-primary); - border-radius: 4px; - } - - input[type='text'], - input[type='number'], - input[type='email'], - input[type='password'], - input[type='url'], - input[type='datetime-local'], - textarea { - box-sizing: border-box; - font-size: 14px; - line-height: 20px; - color: var(--color-text-primary); - display: block; - width: 100%; - outline: 0; - font-family: inherit; - resize: vertical; - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - padding: 10px 16px; - - &:invalid { - box-shadow: none; - } - - &:required:valid { - border-color: var(--color-text-success); - } - - @media screen and (width <= 600px) { - font-size: 16px; - } - } - - input[type='text'], - input[type='number'], - input[type='email'], - input[type='password'], - input[type='datetime-local'] { - &:focus:invalid:not(:placeholder-shown), - &:required:invalid:not(:placeholder-shown) { - border-color: var(--color-text-error); - } - } - - .input.field_with_errors { - label { - color: var(--color-text-error); - } - - input[type='text'], - input[type='number'], - input[type='email'], - input[type='password'], - input[type='datetime-local'], - textarea, - select { - border-color: var(--color-text-error); - } - - .error { - display: block; - font-weight: 500; - color: var(--color-text-error); - margin-top: 4px; - } - } - - .input.disabled { - opacity: 0.5; - } - - .actions { - margin-top: 30px; - display: flex; - gap: 10px; - - &.actions--top { - margin-top: 0; - margin-bottom: 30px; - } - } - - .stacked-actions { - display: flex; - flex-direction: column; - gap: 10px; - margin-top: 30px; - margin-bottom: 15px; - } - - .btn { - display: block; - width: 100%; - border: 0; - border-radius: 4px; - background: var(--color-bg-brand-base); - color: var(--color-text-on-brand-base); - font-size: 15px; - line-height: 22px; - height: auto; - padding: 7px 18px; - text-decoration: none; - text-align: center; - box-sizing: border-box; - cursor: pointer; - font-weight: 500; - outline: 0; - - &:last-child { - margin-inline-end: 0; - } - - &:active, - &:focus, - &:hover { - background: var(--color-bg-brand-base-hover); - } - - &:disabled, - &:disabled:hover { - color: var(--color-text-on-disabled); - background: var(--color-bg-disabled); - } - - &.negative { - background: var(--color-bg-error-base); - - &:hover, - &:active, - &:focus { - background: var(--color-bg-error-base-hover); - } - } - } - - select { - appearance: none; - box-sizing: border-box; - font-size: 14px; - color: var(--color-text-primary); - display: block; - width: 100%; - outline: 0; - font-family: inherit; - resize: vertical; - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - padding-inline-start: 10px; - padding-inline-end: 30px; - height: 41px; - - @media screen and (width <= 600px) { - font-size: 16px; - } - } - - h4 { - margin-bottom: 15px !important; - } - - .label_input { - position: relative; - - &__loading-indicator { - box-sizing: border-box; - position: absolute; - top: 0; - inset-inline-start: 0; - border: 1px solid transparent; - padding: 10px 16px; - width: 100%; - } - - &__wrapper { - position: relative; - } - - &__append { - position: absolute; - inset-inline-end: 3px; - top: 1px; - padding: 10px; - font-size: 14px; - color: var(--color-text-tertiary); - font-family: inherit; - pointer-events: none; - cursor: default; - max-width: 50%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &::after { - content: ''; - display: block; - position: absolute; - top: 0; - inset-inline-end: 0; - bottom: 1px; - width: 5px; - } - } - } - - .status-card { - contain: unset; - } -} - -/* Double-chevron icon for custom select components */ -.select-wrapper, -.select .label_input__wrapper { - width: 100%; - - &::after { - --icon-size: 11px; - - content: ''; - position: absolute; - top: 0; - bottom: 0; - inset-inline-end: 9px; - width: var(--icon-size); - background-color: var(--color-text-tertiary); - pointer-events: none; - mask-image: url("data:image/svg+xml;utf8,"); - mask-position: right center; - mask-size: var(--icon-size); - mask-repeat: no-repeat; - } -} - -.block-icon { - display: block; - margin: 0 auto; - margin-bottom: 10px; - font-size: 24px; -} - -.flash-message { - color: var(--color-text-brand); - background: transparent; - border: 1px solid var(--color-text-brand); - border-radius: 4px; - padding: 15px 10px; - margin-bottom: 30px; - text-align: center; - - &.notice { - border: 1px solid var(--color-border-on-bg-success-softer); - background: var(--color-bg-success-softer); - color: var(--color-text-success); - } - - &.warning { - border: 1px solid var(--color-border-on-bg-warning-softer); - background: var(--color-bg-warning-softer); - color: var(--color-text-warning); - } - - &.alert { - border: 1px solid var(--color-border-on-bg-error-softer); - background: var(--color-bg-error-softer); - color: var(--color-text-error); - } - - &.hidden { - display: none; - } - - &.hidden-on-touch-devices { - @media screen and (pointer: coarse) { - display: none; - } - } - - a { - display: inline-block; - color: var(--color-text-secondary); - text-decoration: none; - - &:hover { - color: var(--color-text-primary); - text-decoration: underline; - } - } - - &.warning a { - font-weight: 700; - color: inherit; - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - color: inherit; - } - } - - p { - margin-bottom: 15px; - } - - .oauth-code { - outline: 0; - box-sizing: border-box; - display: block; - width: 100%; - border: 0; - padding: 10px; - font-family: $font-monospace, monospace; - background: var(--color-bg-secondary); - color: var(--color-text-primary); - font-size: 14px; - margin: 0; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: var(--color-bg-brand-softer); - } - } - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - @media screen and (440px < width <= 740px) { - margin-top: 40px; - } - - &.translation-prompt { - text-align: unset; - color: unset; - - a { - text-decoration: underline; - } - } -} - -.flash-message-stack { - margin-bottom: 30px; - - .flash-message { - border-radius: 0; - margin-bottom: 0; - border-top-width: 0; - - &:first-child { - border-radius: 4px 4px 0 0; - border-top-width: 1px; - } - - &:last-child { - border-radius: 0 0 4px 4px; - - &:first-child { - border-radius: 4px; - } - } - } -} - -.form-footer { - margin-top: 30px; - text-align: center; - - a { - color: var(--color-text-secondary); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.quick-nav { - list-style: none; - margin-bottom: 25px; - font-size: 14px; - - li { - display: inline-block; - margin-inline-end: 10px; - } - - a { - color: var(--color-text-brand); - text-transform: uppercase; - text-decoration: none; - font-weight: 700; - - &:hover, - &:focus, - &:active { - color: var(--color-text-brand-soft); - } - } -} - -.oauth-prompt, -.follow-prompt { - margin-bottom: 30px; - color: var(--color-text-secondary); - - h2 { - font-size: 16px; - margin-bottom: 30px; - text-align: center; - } - - strong { - color: var(--color-text-primary); - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } -} - -.oauth-prompt { - h3 { - color: var(--color-text-primary); - font-size: 17px; - line-height: 22px; - font-weight: 500; - margin-bottom: 30px; - } - - p { - font-size: 14px; - line-height: 18px; - margin-bottom: 30px; - } - - .permissions-list { - border: 1px solid var(--color-border-primary); - border-radius: 4px; - background: var(--color-bg-secondary); - margin-bottom: 30px; - } - - .actions { - margin: 0 -10px; - display: flex; - - form { - box-sizing: border-box; - padding: 0 10px; - flex: 1 1 auto; - min-height: 1px; - width: 50%; - } - } -} - -.qr-wrapper { - display: flex; - flex-wrap: wrap; - align-items: flex-start; -} - -.qr-code { - flex: 0 0 auto; - background: white; - padding: 4px; - margin: 0 10px 20px 0; - box-shadow: 0 0 15px var(--color-shadow-primary); - display: inline-block; - - svg { - display: block; - margin: 0; - } -} - -.qr-alternative { - margin-bottom: 20px; - color: var(--color-text-primary); - flex: 150px; - - samp { - display: block; - font-size: 14px; - } -} - -.action-pagination { - display: flex; - flex-wrap: wrap; - align-items: center; - - .actions, - .pagination { - flex: 1 1 auto; - } - - .actions { - padding: 30px 0; - padding-inline-end: 20px; - flex: 0 0 auto; - } -} - -.post-follow-actions { - text-align: center; - color: var(--color-text-secondary); - - div { - margin-bottom: 4px; - } -} - -.alternative-login { - margin-top: 20px; - margin-bottom: 20px; - - h4 { - font-size: 16px; - color: var(--color-text-primary); - text-align: center; - margin-bottom: 20px; - border: 0; - padding: 0; - } - - .button { - display: block; - } -} - -.scope-danger { - color: var(--color-text-error); -} - -.form_admin_settings_site_short_description, -.form_admin_settings_site_description, -.form_admin_settings_site_extended_description, -.form_admin_settings_site_terms, -.form_admin_settings_custom_css, -.form_admin_settings_closed_registrations_message { - textarea { - font-family: $font-monospace, monospace; - } -} - -.input-copy { - color: var(--color-text-primary); - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - display: flex; - align-items: center; - padding-inline-end: 4px; - position: relative; - top: 1px; - transition: border-color 300ms linear; - - &__wrapper { - flex: 1 1 auto; - } - - input[type='text'] { - background: transparent; - border: 0; - padding: 10px; - font-size: 14px; - font-family: $font-monospace, monospace; - } - - button { - flex: 0 0 auto; - margin: 4px; - text-transform: none; - font-weight: 400; - font-size: 14px; - padding: 7px 18px; - padding-bottom: 6px; - width: auto; - transition: background 300ms linear; - } - - &.copied { - border-color: var(--color-text-success); - transition: none; - - button { - background: var(--color-bg-success-base); - transition: none; - } - } -} - -.input.user_confirm_password, -.input.user_website { - &:not(.field_with_errors) { - display: none; - } -} - -.simple_form .h-captcha { - display: flex; - justify-content: center; - margin-bottom: 30px; -} - -.permissions-list { - &__item { - padding: 15px; - color: var(--color-text-primary); - border-bottom: 1px solid var(--color-border-primary); - display: flex; - align-items: center; - - &__text { - flex: 1 1 auto; - - &__title { - font-weight: 500; - } - - &__type { - color: var(--color-text-secondary); - overflow-wrap: anywhere; - } - } - - &__icon { - flex: 0 0 auto; - font-size: 18px; - width: 30px; - color: var(--color-text-success); - display: flex; - align-items: center; - } - - &:last-child { - border-bottom: 0; - } - } -} - -// Only remove padding when listing applications, to prevent styling issues on -// the Authorization page. -.applications-list { - .permissions-list__item:last-child { - padding-bottom: 0; - } -} - -.keywords-table { - thead { - th { - white-space: nowrap; - } - - th:first-child { - width: 100%; - } - } - - tfoot { - td { - border: 0; - } - } - - .input.string { - margin-bottom: 0; - } - - .label_input__wrapper { - margin-top: 10px; - } - - .table-action-link { - margin-top: 10px; - white-space: nowrap; - } -} - -.progress-tracker { - display: flex; - align-items: center; - padding-bottom: 30px; - margin-bottom: 30px; - - li { - flex: 0 0 auto; - position: relative; - } - - .separator { - height: 2px; - background: var(--color-border-primary); - flex: 1 1 auto; - - &.completed { - background: var(--color-text-brand); - } - } - - .circle { - box-sizing: border-box; - position: relative; - width: 30px; - height: 30px; - border-radius: 50%; - border: 2px solid var(--color-border-primary); - flex: 0 0 auto; - display: flex; - align-items: center; - justify-content: center; - - svg { - width: 16px; - } - } - - .label { - position: absolute; - font-size: 14px; - font-weight: 500; - color: var(--color-text-primary); - padding-top: 10px; - text-align: center; - width: 100px; - left: 50%; - transform: translateX(-50%); - } - - li:first-child .label { - inset-inline-start: 0; - inset-inline-end: auto; - text-align: start; - transform: none; - } - - li:last-child .label { - inset-inline-start: auto; - inset-inline-end: 0; - text-align: end; - transform: none; - } - - .active .circle { - border-color: var(--color-text-brand); - - &::before { - content: ''; - width: 10px; - height: 10px; - border-radius: 50%; - background: var(--color-text-brand); - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - } - } - - .completed .circle { - border-color: var(--color-text-brand); - background: var(--color-text-brand); - } -} - -.app-form { - padding: 16px; - - &__avatar-input, - &__header-input { - display: block; - border-radius: 8px; - background: var(--color-bg-secondary); - position: relative; - cursor: pointer; - - &:hover { - background-color: var(--color-bg-brand-softer); - } - - img { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 8px; - z-index: 0; - } - - .icon { - position: absolute; - inset-inline-start: 50%; - top: 50%; - transform: translate(-50%, -50%); - color: var(--color-text-secondary); - z-index: 3; - } - - &.selected .icon { - color: var(--color-text-primary); - transform: none; - inset-inline-start: auto; - inset-inline-end: 8px; - top: auto; - bottom: 8px; - } - - &.invalid img { - outline: 1px solid var(--color-text-error); - outline-offset: -1px; - } - - &.invalid::before { - display: block; - content: ''; - width: 100%; - height: 100%; - position: absolute; - background: var(--color-bg-error-softer); - z-index: 2; - border-radius: 8px; - } - } - - &__avatar-input { - width: 80px; - height: 80px; - } - - &__header-input { - aspect-ratio: 580/193; - } - - &__toggle { - display: flex; - align-items: center; - gap: 16px; - color: var(--color-text-secondary); - font-size: 14px; - line-height: 20px; - - .icon { - flex: 0 0 auto; - } - - .icon { - width: 24px; - height: 24px; - } - - &__label { - flex: 1 1 auto; - - strong { - color: var(--color-text-primary); - font-weight: 600; - } - - .hint { - display: block; - font-size: 14px; - color: var(--color-text-secondary); - } - - .recommended { - position: absolute; - margin: 0 4px; - margin-top: -2px; - } - } - - &__toggle { - flex: 0 0 auto; - display: flex; - align-items: center; - } - - &__toggle > div { - display: flex; - border-inline-start: 1px solid var(--color-border-primary); - padding-inline-start: 16px; - } - } - - &__link { - display: flex; - gap: 16px; - padding: 8px 0; - align-items: center; - text-decoration: none; - color: var(--color-text-primary); - margin-bottom: 16px; - - &__text { - flex: 1 1 auto; - font-size: 14px; - line-height: 20px; - color: var(--color-text-secondary); - - strong { - font-weight: 600; - display: block; - color: var(--color-text-primary); - } - - .icon { - vertical-align: -5px; - width: 20px; - height: 20px; - } - } - } -} diff --git a/app/javascript/styles_new/mastodon/lists.scss b/app/javascript/styles_new/mastodon/lists.scss deleted file mode 100644 index 6019cd8002..0000000000 --- a/app/javascript/styles_new/mastodon/lists.scss +++ /dev/null @@ -1,19 +0,0 @@ -.no-list { - list-style: none; - - li { - display: inline-block; - margin: 0 5px; - } -} - -.recovery-codes { - list-style: none; - margin: 0 auto; - - li { - font-size: 125%; - line-height: 1.5; - letter-spacing: 1px; - } -} diff --git a/app/javascript/styles_new/mastodon/modal.scss b/app/javascript/styles_new/mastodon/modal.scss deleted file mode 100644 index 6af2a182b6..0000000000 --- a/app/javascript/styles_new/mastodon/modal.scss +++ /dev/null @@ -1,53 +0,0 @@ -@use 'variables' as *; - -.modal-layout { - background: var(--color-bg-brand-softer); - display: flex; - flex-direction: column; - height: 100vh; - padding: 0; -} - -.modal-layout__mastodon { - display: flex; - flex: 1; - flex-direction: column; - justify-content: flex-end; - - > div { - flex: 1; - max-height: 235px; - position: relative; - - img { - max-height: 100%; - max-width: 100%; - height: 100%; - position: absolute; - bottom: 0; - inset-inline-start: 0; - } - } -} - -@media screen and (width <= 600px) { - .account-header { - margin-top: 0; - } -} - -.with-zig-zag-decoration { - &::after { - content: ''; - position: absolute; - inset: auto 0 0; - height: 32px; - background-color: var(--color-bg-brand-softer); - - /* Decorative zig-zag pattern at the bottom of the page */ - mask-image: url('data:image/svg+xml;utf8,'); - mask-position: bottom; - mask-repeat: repeat-x; - z-index: -1; - } -} diff --git a/app/javascript/styles_new/mastodon/polls.scss b/app/javascript/styles_new/mastodon/polls.scss deleted file mode 100644 index 19fb8dd505..0000000000 --- a/app/javascript/styles_new/mastodon/polls.scss +++ /dev/null @@ -1,232 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; - -.poll { - margin-top: 16px; - font-size: 14px; - - li { - margin-bottom: 10px; - position: relative; - } - - &__chart { - border-radius: 4px; - display: block; - background: rgb(from var(--color-text-brand) r g b / 60%); - height: 5px; - min-width: 1%; - - &.leading { - background: var(--color-text-brand); - } - } - - progress { - border: 0; - display: block; - width: 100%; - height: 5px; - appearance: none; - background: transparent; - - &::-webkit-progress-bar { - background: transparent; - } - - // Those rules need to be entirely separate or they won't work, hence the - // duplication - &::-moz-progress-bar { - border-radius: 4px; - background: rgb(from var(--color-text-brand) r g b / 60%); - } - - &::-webkit-progress-value { - border-radius: 4px; - background: rgb(from var(--color-text-brand) r g b / 60%); - } - } - - &__option { - position: relative; - display: flex; - align-items: flex-start; - gap: 8px; - padding: 6px 0; - line-height: 18px; - cursor: default; - overflow: hidden; - - &__text { - display: inline-block; - overflow-wrap: break-word; - max-width: calc(100% - 45px - 25px); - } - - input[type='radio'], - input[type='checkbox'] { - display: none; - } - - .autosuggest-input { - flex: 1 1 auto; - } - - input[type='text'] { - display: block; - box-sizing: border-box; - width: 100%; - font-size: 14px; - color: var(--color-text-primary); - outline: 0; - font-family: inherit; - background: var(--color-bg-primary); - border: 1px solid var(--color-text-secondary); - border-radius: 4px; - padding: 8px 12px; - - &:focus { - border-color: var(--color-text-brand); - } - - @media screen and (width <= 600px) { - font-size: 16px; - line-height: 24px; - letter-spacing: 0.5px; - } - } - - &.selectable { - cursor: pointer; - } - - &.editable, - &.disabled { - align-items: center; - overflow: visible; - } - } - - &__input { - display: block; - position: relative; - border: 1px solid var(--color-text-secondary); - box-sizing: border-box; - width: 17px; - height: 17px; - border-radius: 50%; - flex: 0 0 auto; - - &.checkbox { - border-radius: 4px; - } - - &:active, - &:focus, - &:hover { - border-color: var(--color-text-success); - border-width: 4px; - } - - &.active { - background-color: var(--color-bg-success-base); - border-color: var(--color-text-success); - } - - &::-moz-focus-inner { - outline: 0 !important; - border: 0; - } - - &:focus, - &:active { - outline: 0 !important; - } - - &.disabled { - border-color: var(--color-text-disabled); - - &.active { - background: var(--color-text-disabled); - } - - &:active, - &:focus, - &:hover { - border-color: var(--color-text-disabled); - border-width: 1px; - } - } - } - - &__option.editable &__input, - &__option.disabled &__input { - &:active, - &:focus, - &:hover { - border-color: var(--color-text-primary); - border-width: 1px; - } - } - - &__number { - display: inline-block; - width: 45px; - font-weight: 700; - flex: 0 0 45px; - } - - &__voted { - padding: 0 5px; - display: inline-block; - - &__mark { - font-size: 18px; - } - } - - &__footer { - padding-top: 6px; - padding-bottom: 5px; - color: var(--color-text-tertiary); - } - - &__link { - display: inline; - background: transparent; - padding: 0; - margin: 0; - border: 0; - color: var(--color-text-tertiary); - text-decoration: underline; - font-size: inherit; - - &:hover { - text-decoration: none; - } - - &:active, - &:focus { - background-color: var(--color-bg-secondary); - } - } - - .button { - height: 36px; - padding: 0 16px; - margin-inline-end: 10px; - font-size: 14px; - } -} - -.muted .poll { - color: var(--color-text-tertiary); - - &__chart { - background: rgb(from var(--color-text-brand) r g b / 40%); - - &.leading { - background: rgb(from var(--color-text-brand) r g b / 60%); - } - } -} diff --git a/app/javascript/styles_new/mastodon/reset.scss b/app/javascript/styles_new/mastodon/reset.scss deleted file mode 100644 index 3644b94cdf..0000000000 --- a/app/javascript/styles_new/mastodon/reset.scss +++ /dev/null @@ -1,58 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -html:has(body.custom-scrollbars) { - scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary); -} diff --git a/app/javascript/styles_new/mastodon/rich_text.scss b/app/javascript/styles_new/mastodon/rich_text.scss deleted file mode 100644 index 4ac3f025fe..0000000000 --- a/app/javascript/styles_new/mastodon/rich_text.scss +++ /dev/null @@ -1,116 +0,0 @@ -.status__content__text, -.e-content, -.edit-indicator__content, -.reply-indicator__content { - code { - background: var(--rich-text-container-color); - padding: 4px; - border-radius: 4px; - color: var(--rich-text-text-color); - font-size: 0.85em; - } - - pre { - background: var(--rich-text-container-color); - padding: 8px; - border-radius: 4px; - color: var(--rich-text-text-color); - - code { - padding: 0; - background: transparent; - } - } - - pre, - blockquote { - margin-bottom: 22px; - white-space: pre-wrap; - unicode-bidi: plaintext; - - &:last-child { - margin-bottom: 0; - } - } - - blockquote { - padding-inline-start: 32px; - color: var(--rich-text-text-color); - white-space: normal; - position: relative; - - &::before { - display: block; - content: ''; - width: 24px; - height: 20px; - mask-image: url('@/images/quote.svg'); - background-color: var(--rich-text-decorations-color); - position: absolute; - inset-inline-start: 0; - top: 0; - } - - blockquote { - margin-top: 4px; - border-inline-start: 3px solid var(--rich-text-decorations-color); - padding-inline-start: 16px; - - &::before { - display: none; - } - } - - p:last-of-type { - margin-bottom: 0; - } - } - - & > ul, - & > ol { - margin-bottom: 22px; - - &:last-child { - margin-bottom: 0; - } - } - - b, - strong { - font-weight: 700; - } - - em, - i { - font-style: italic; - } - - ul, - ol { - padding-inline-start: 24px; - - li { - padding-inline-start: 8px; - - &::marker { - text-align: end; - } - } - - p { - margin: 0; - } - } - - ul { - list-style-type: '•'; - - li::marker { - text-align: start; - } - } - - ol { - list-style-type: decimal; - } -} diff --git a/app/javascript/styles_new/mastodon/rtl.scss b/app/javascript/styles_new/mastodon/rtl.scss deleted file mode 100644 index 48935b75d7..0000000000 --- a/app/javascript/styles_new/mastodon/rtl.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use 'variables' as *; - -body.rtl { - direction: rtl; - - .reactions-bar { - direction: rtl; - } - - .announcements__mastodon, - .drawer__inner__mastodon > img { - transform: scaleX(-1); - } - - .compose-form .autosuggest-textarea__textarea { - padding-right: 10px; - padding-left: 10px + 22px; - } - - .columns-area { - direction: rtl; - } - - .account__avatar-wrapper { - float: right; - } - - .column-header__setting-arrows { - float: left; - } - - .admin-wrapper { - direction: rtl; - } - - .react-swipeable-view-container > * { - direction: rtl; - } - - .column-back-button__icon { - transform: scale(-1, 1); - } - - .dismissable-banner, - .warning-banner { - &__action { - float: left; - } - } -} diff --git a/app/javascript/styles_new/mastodon/tables.scss b/app/javascript/styles_new/mastodon/tables.scss deleted file mode 100644 index 8e303aff68..0000000000 --- a/app/javascript/styles_new/mastodon/tables.scss +++ /dev/null @@ -1,375 +0,0 @@ -@use 'variables' as *; - -.table { - width: 100%; - max-width: 100%; - border-spacing: 0; - border-collapse: collapse; - - th, - td { - padding: 8px; - line-height: 18px; - vertical-align: top; - border-bottom: 1px solid var(--color-border-primary); - text-align: start; - background: var(--color-bg-primary); - - &.critical { - font-weight: 700; - color: var(--color-text-warning); - } - } - - & > thead > tr > th { - vertical-align: bottom; - font-weight: 500; - } - - & > tbody > tr > th { - font-weight: 500; - } - - & > tbody > tr:nth-child(odd) > td, - & > tbody > tr:nth-child(odd) > th { - background: var(--color-bg-primary); - } - - & > tbody > tr:last-child > td, - & > tbody > tr:last-child > th { - border-bottom: 0; - } - - a { - color: var(--color-text-secondary); - text-decoration: none; - - &:hover { - color: var(--color-text-brand); - } - } - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - &.inline-table { - & > tbody > tr:nth-child(odd) { - & > td, - & > th { - background: transparent; - } - } - - & > tbody > tr:first-child { - & > td, - & > th { - border-top: 0; - } - } - } - - &.horizontal-table { - border-collapse: collapse; - border-style: hidden; - - & > tbody > tr > th, - & > tbody > tr > td { - padding: 11px 10px; - background: transparent; - border: 1px solid var(--color-border-primary); - color: var(--color-text-primary); - } - - & > tbody > tr > th { - color: var(--color-text-secondary); - font-weight: 600; - } - } - - &.batch-table { - & > thead > tr > th { - background: var(--color-bg-primary); - border-top: 1px solid var(--color-border-primary); - border-bottom: 1px solid var(--color-border-primary); - - &:first-child { - border-radius: 4px 0 0; - border-inline-start: 1px solid var(--color-border-primary); - } - - &:last-child { - border-radius: 0 4px 0 0; - border-inline-end: 1px solid var(--color-border-primary); - } - } - } - - &--invites tbody td { - vertical-align: middle; - } -} - -.table-wrapper { - overflow: auto; - margin-bottom: 20px; -} - -samp { - font-family: $font-monospace, monospace; -} - -button.table-action-link { - background: transparent; - border: 0; - font: inherit; -} - -button.table-action-link, -a.table-action-link { - text-decoration: none; - display: inline-block; - margin-inline-end: 5px; - padding: 0 10px; - color: var(--color-text-secondary); - font-weight: 500; - white-space: nowrap; - - &:hover { - color: var(--color-text-brand); - } - - &:first-child { - padding-inline-start: 0; - } -} - -.batch-table { - &--no-toolbar { - .batch-table__toolbar { - position: static; - height: 4px; - border-bottom: none; - } - } - - &__toolbar, - &__row { - display: flex; - - &__select { - box-sizing: border-box; - padding: 8px 16px; - cursor: pointer; - min-height: 100%; - - input { - margin-top: 8px; - } - - &--aligned { - display: flex; - align-items: center; - - input { - margin-top: 0; - } - } - } - - &__actions, - &__content { - padding: 8px 0; - padding-inline-end: 16px; - flex: 1 1 auto; - } - } - - &__toolbar { - position: sticky; - top: 0; - z-index: 200; - border: 1px solid var(--color-border-primary); - background: var(--color-bg-primary); - border-radius: 4px 4px 0 0; - height: 47px; - align-items: center; - - &__actions { - text-align: end; - padding-inline-end: 16px - 5px; - - .table-action-link { - padding: 0; - } - } - } - - &__select-all { - background: var(--color-bg-primary); - height: 47px; - align-items: center; - justify-content: center; - border: 1px solid var(--color-border-primary); - border-top: 0; - color: var(--color-text-primary); - display: none; - - &.active { - display: flex; - } - - .selected, - .not-selected { - display: none; - - &.active { - display: block; - } - } - - strong { - font-weight: 700; - } - - span { - padding: 8px; - display: inline-block; - } - - button { - background: transparent; - border: 0; - font: inherit; - color: var(--color-text-brand); - border-radius: 4px; - font-weight: 700; - padding: 8px; - - &:hover, - &:focus, - &:active { - background: var(--color-bg-secondary); - } - } - } - - &__form { - padding: 16px; - border: 1px solid var(--color-border-primary); - border-top: 0; - background: var(--color-bg-primary); - - .fields-row { - padding-top: 0; - margin-bottom: 0; - } - } - - &__row { - border: 1px solid var(--color-border-primary); - border-top: 0; - background: var(--color-bg-primary); - - @media screen and (max-width: $no-gap-breakpoint) { - .optional &:first-child { - border-top: 1px solid var(--color-border-primary); - } - } - - &:last-child { - border-radius: 0 0 4px 4px; - } - - &__content { - padding-top: 12px; - padding-bottom: 16px; - overflow: hidden; - - &--unpadded { - padding: 0; - } - - &--padded { - padding: 12px 16px 16px; - } - - &--with-image { - display: flex; - align-items: center; - } - - &__image { - flex: 0 0 auto; - display: flex; - justify-content: center; - align-items: center; - margin-inline-end: 10px; - - .emojione { - width: 32px; - height: 32px; - } - } - - &__text { - flex: 1 1 auto; - } - - &__quote { - padding: 12px; - padding-top: 0; - } - - &__extra { - flex: 0 0 auto; - text-align: end; - color: var(--color-text-secondary); - font-weight: 500; - } - } - - .directory__tag { - margin: 0; - width: 100%; - - a { - background: transparent; - border-radius: 0; - } - } - } - - &.optional .batch-table__toolbar, - &.optional .batch-table__row__select { - @media screen and (max-width: $no-gap-breakpoint) { - display: none; - } - } - - // Reset the status card to not have borders, background or padding when - // inline in the table of statuses - .batch-table__row__content > .status__card { - border: none; - background: none; - padding: 0; - } - - @media screen and (width <= 870px) { - .accounts-table tbody td.optional { - display: none; - } - } -} - -.one-liner { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} diff --git a/app/javascript/styles_new/mastodon/widgets.scss b/app/javascript/styles_new/mastodon/widgets.scss deleted file mode 100644 index 69c79cd1e6..0000000000 --- a/app/javascript/styles_new/mastodon/widgets.scss +++ /dev/null @@ -1,178 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; - -.directory { - &__tag { - box-sizing: border-box; - margin-bottom: 10px; - - & > a, - & > div { - display: flex; - align-items: center; - justify-content: space-between; - border: 1px solid var(--color-border-primary); - border-radius: 4px; - padding: 15px; - text-decoration: none; - color: inherit; - box-shadow: 0 0 15px var(--color-shadow-primary); - } - - & > a { - &:hover, - &:active, - &:focus { - background: var(--color-bg-primary); - } - } - - &.active > a { - background: var(--color-bg-brand-base); - cursor: default; - } - - &.disabled > div { - opacity: 0.5; - cursor: default; - } - - h4 { - flex: 1 1 auto; - font-size: 18px; - font-weight: 700; - color: var(--color-text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - small { - display: block; - font-weight: 400; - font-size: 15px; - margin-top: 8px; - color: var(--color-text-secondary); - } - } - - &.active h4 { - &, - small, - .trends__item__current { - color: var(--color-text-primary); - } - } - - .avatar-stack { - flex: 0 0 auto; - width: (36px + 4px) * 3; - } - - &.active .avatar-stack .account__avatar { - border-color: var(--color-text-brand); - } - - .trends__item__current { - padding-inline-end: 0; - } - } -} - -.accounts-table { - width: 100%; - - .account { - max-width: calc(56px + 30ch); - padding: 0; - border: 0; - } - - strong { - font-weight: 700; - } - - thead th { - text-align: center; - text-transform: uppercase; - color: var(--color-text-secondary); - font-weight: 700; - padding: 10px; - - &:first-child { - text-align: start; - } - } - - tbody td { - padding: 15px 0; - vertical-align: middle; - border-bottom: 1px solid var(--color-border-primary); - } - - tbody tr:last-child td { - border-bottom: 0; - } - - &__count { - width: 120px; - text-align: center; - font-size: 15px; - font-weight: 500; - color: var(--color-text-primary); - - small { - display: block; - color: var(--color-text-secondary); - font-weight: 400; - font-size: 14px; - } - } - - tbody td.accounts-table__extra { - width: 120px; - text-align: end; - color: var(--color-text-secondary); - padding-inline-end: 16px; - - a { - text-decoration: none; - color: inherit; - - &:focus, - &:hover, - &:active { - color: var(--color-text-brand); - } - } - } - - &__comment { - width: 50%; - vertical-align: initial !important; - } - - tbody td.accounts-table__interrelationships { - width: 21px; - padding-inline-end: 16px; - } - - .icon { - &.active { - color: var(--color-text-brand); - } - - &.passive { - color: var(--color-text-warning); - } - - &.active.passive { - color: var(--color-text-success); - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - tbody td.optional { - display: none; - } - } -} diff --git a/config/vite/plugin-mastodon-themes.ts b/config/vite/plugin-mastodon-themes.ts index 98bda4cab0..a8d75b25f9 100644 --- a/config/vite/plugin-mastodon-themes.ts +++ b/config/vite/plugin-mastodon-themes.ts @@ -40,14 +40,7 @@ export function MastodonThemes(): Plugin { // Get all files mentioned in the themes.yml file. const themes = await loadThemesFromConfig(projectRoot); - const allThemes = { - ...themes, - default_theme_tokens: 'styles_new/application.scss', - 'mastodon-light_theme_tokens': 'styles_new/mastodon-light.scss', - contrast_theme_tokens: 'styles_new/contrast.scss', - }; - - for (const [themeName, themePath] of Object.entries(allThemes)) { + for (const [themeName, themePath] of Object.entries(themes)) { entrypoints[`themes/${themeName}`] = path.resolve(jsRoot, themePath); } @@ -70,11 +63,7 @@ export function MastodonThemes(): Plugin { // Rewrite the URL to the entrypoint if it matches a theme. if (isThemeFile(req.url ?? '', themes)) { const themeName = pathToThemeName(req.url ?? ''); - const themePath = `/packs-dev/${themes[themeName]}`; - const isThemeTokenRequest = req.url.includes('_theme_tokens'); - req.url = isThemeTokenRequest - ? themePath.replace('styles/', 'styles_new/') - : themePath; + req.url = `/packs-dev/${themes[themeName]}`; } next(); }); @@ -87,7 +76,7 @@ export function MastodonThemes(): Plugin { const themePathToName = new Map( Object.entries(themes).map(([themeName, themePath]) => [ path.resolve(jsRoot, themePath), - `/themes/${areThemeTokensEnabled() ? `${themeName}_theme_tokens` : themeName}`, + `/themes/${themeName}`, ]), ); const themeNames = new Set(); @@ -150,7 +139,6 @@ async function loadThemesFromConfig(root: string) { console.warn(`Invalid theme path "${themePath}" in themes.yml, skipping`); continue; } - themes[themeName] = themePath; } @@ -162,7 +150,7 @@ async function loadThemesFromConfig(root: string) { } function pathToThemeName(file: string) { - const basename = path.basename(file.replace('_theme_tokens', '')); + const basename = path.basename(file); return basename.split(/[.?]/)[0] ?? ''; } @@ -174,12 +162,3 @@ function isThemeFile(file: string, themes: Themes) { const basename = pathToThemeName(file); return basename in themes; } - -function areThemeTokensEnabled() { - const raw = process.env.EXPERIMENTAL_FEATURES ?? ''; - const features = raw - .split(',') - .map((s) => s.trim()) - .filter(Boolean); - return features.includes('theme_tokens'); -} diff --git a/stylelint.config.js b/stylelint.config.js index 29fe8262aa..b1f34b7f19 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -2,7 +2,6 @@ module.exports = { extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'], ignoreFiles: [ 'app/javascript/styles/mastodon/reset.scss', - 'app/javascript/styles_new/mastodon/reset.scss', 'coverage/**/*', 'node_modules/**/*', 'public/assets/**/*', @@ -32,7 +31,7 @@ module.exports = { }, overrides: [ { - 'files': ['app/javascript/styles/entrypoints/mailer.scss', 'app/javascript/styles_new/entrypoints/mailer.scss'], + 'files': ['app/javascript/styles/entrypoints/mailer.scss'], rules: { 'property-no-unknown': [ true,