diff --git a/.prettierignore b/.prettierignore index 098dac67177..bd382506695 100644 --- a/.prettierignore +++ b/.prettierignore @@ -68,6 +68,7 @@ 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/javascript/styles/application.scss b/app/javascript/styles/application.scss index e16e5368e7d..b328d8ee342 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -1,7 +1,27 @@ -@use 'mastodon/css_variables'; +@use 'mastodon/functions'; +@use 'mastodon/mixins'; @use 'mastodon/variables'; -@use 'common'; +@use 'mastodon/css_variables'; +@use 'fonts/roboto'; +@use 'fonts/roboto-mono'; -html { - color-scheme: dark; -} +@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'; diff --git a/app/javascript/styles/contrast.scss b/app/javascript/styles/contrast.scss index af73c88fef6..367be051f1a 100644 --- a/app/javascript/styles/contrast.scss +++ b/app/javascript/styles/contrast.scss @@ -1,8 +1,3 @@ -@use 'mastodon/css_variables'; -@use 'mastodon/variables'; -@use 'common'; +@use 'contrast/variables'; +@use 'application'; @use 'contrast/diff'; - -html { - color-scheme: dark; -} diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss index d618561d8cc..0adf8802eeb 100644 --- a/app/javascript/styles/contrast/diff.scss +++ b/app/javascript/styles/contrast/diff.scss @@ -1,16 +1,4 @@ -:root { - /* TEXT TOKENS */ - - --clr-text-primary: var(--clr-grey-50); - --clr-text-secondary: var(--clr-grey-300); - --clr-text-tertiary: var(--clr-grey-400); - --clr-text-accent: var(--clr-indigo-300); - --clr-text-status-links: var(--clr-text-accent); - - /* BORDER TOKENS */ - - --clr-border-primary-strength: 18%; -} +@use '../mastodon/variables' as *; .status__content a, .reply-indicator__content a, @@ -43,6 +31,16 @@ } } +.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 new file mode 100644 index 00000000000..e057352ba38 --- /dev/null +++ b/app/javascript/styles/contrast/variables.scss @@ -0,0 +1,25 @@ +@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 494efdbbde9..b530616a3c3 100644 --- a/app/javascript/styles/mastodon-light.scss +++ b/app/javascript/styles/mastodon-light.scss @@ -1,9 +1,4 @@ +@use 'mastodon-light/variables'; @use 'mastodon-light/css_variables'; -@use 'mastodon/variables' with ( - $emojis-requiring-inversion: 'chains' -); -@use 'common'; - -html { - color-scheme: light; -} +@use 'application'; +@use 'mastodon-light/diff'; diff --git a/app/javascript/styles/mastodon-light/css_variables.scss b/app/javascript/styles/mastodon-light/css_variables.scss index e2f4386c2ba..d96c368b251 100644 --- a/app/javascript/styles/mastodon-light/css_variables.scss +++ b/app/javascript/styles/mastodon-light/css_variables.scss @@ -1,196 +1,23 @@ -@use '../mastodon/theme_utils' as utils; +@use 'sass:color'; +@use '../mastodon/variables' as *; +@use 'variables' as *; +@use '../mastodon/functions' as *; -:root { - --clr-black: #000; - --clr-grey-950: #181821; - --clr-grey-800: #292938; - --clr-grey-700: #444664; - --clr-grey-600: #545778; - --clr-grey-500: #696d91; - --clr-grey-400: #8b8dac; - --clr-grey-300: #b4b6cb; - --clr-grey-200: #d8d9e3; - --clr-grey-100: #f0f0f5; - --clr-grey-50: #f0f1ff; - --clr-white: #fff; - --clr-indigo-600: #6147e6; - --clr-indigo-400: #8886ff; - --clr-indigo-300: #a5abfd; - --clr-indigo-200: #c8cdfe; - --clr-indigo-100: #e0e3ff; - --clr-indigo-50: #f0f1ff; - --clr-red-500: #ff637e; - --clr-red-600: #ec003f; - --clr-yellow-400: #ffb900; - --clr-yellow-600: #e17100; - --clr-green-400: #05df72; - --clr-green-600: #00a63e; - - /* TEXT TOKENS */ - - --clr-text-primary: var(--clr-grey-950); - --clr-text-secondary: var(--clr-grey-600); - --clr-text-tertiary: var(--clr-grey-500); - --clr-text-on-inverted: var(--clr-white); - --clr-text-accent: var(--clr-indigo-600); - --clr-text-accent-subtle: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-accent) - ); - --clr-text-on-accent-strong: var(--clr-white); - --clr-text-error: var(--clr-red-600); - --clr-text-on-error-strong: var(--clr-white); - --clr-text-warning: var(--clr-yellow-600); - --clr-text-on-warning-strong: var(--clr-white); - --clr-text-success: var(--clr-green-600); - --clr-text-on-success-strong: var(--clr-white); - --clr-text-disabled: var(--clr-grey-300); - --clr-text-on-disabled: var(--clr-grey-200); - --clr-text-bookmark-highlight: var(--clr-text-error); - --clr-text-favourite-highlight: var(--clr-text-warning); - --clr-text-on-media: var(--clr-white); - --clr-text-status-links: var(--clr-text-accent); - - /* BACKGROUND TOKENS */ - - --clr-bg-primary: var(--clr-white); - --clr-bg-secondary-base: var(--clr-grey-600); - --clr-bg-secondary-strength: 5%; - --clr-bg-secondary: #{color-mix( - in oklab, - var(--clr-bg-primary), - var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength) - )}; - --clr-bg-secondary-solid: #{color-mix( - in srgb, - var(--clr-bg-primary), - var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength) - )}; - --clr-bg-tertiary: #{color-mix( - in oklab, - var(--clr-bg-primary), - var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength)) - )}; - --clr-bg-ambient: var(--clr-bg-primary); - --clr-bg-elevated: var(--clr-bg-primary); - --clr-bg-inverted: var(--clr-grey-950); - --clr-bg-media-base: var(--clr-black); - --clr-bg-media-strength: 65%; - --clr-bg-media: #{utils.css-alpha( - var(--clr-bg-media-base), - var(--clr-bg-media-strength) - )}; - --clr-bg-overlay: var(--clr-bg-primary); - --clr-bg-disabled: var(--clr-grey-400); - --clr-bg-accent-subtle-base: var(--clr-indigo-600); - --clr-bg-accent-subtle-strength: 8%; - --clr-bg-accent-subtle: #{utils.css-alpha( - var(--clr-bg-accent-subtle-base), - var(--clr-bg-accent-subtle-strength) - )}; - --clr-bg-accent-subtle-highlighted: #{utils.css-alpha( - var(--clr-bg-accent-subtle-base), - calc(var(--clr-bg-accent-subtle-strength) * 1.5) - )}; - --clr-bg-accent-strong: var(--clr-indigo-600); - --clr-bg-accent-strong-highlighted: color-mix( - in oklab, - var(--clr-bg-accent-strong), - black var(--clr-bg-accent-subtle-strength) - ); - --clr-bg-error-subtle-base: #f41b3b; - --clr-bg-error-subtle-strength: 12%; - --clr-bg-error-subtle: #{utils.css-alpha( - var(--clr-bg-error-subtle-base), - var(--clr-bg-error-subtle-strength) - )}; - --clr-bg-error-strong: var(--clr-red-600); - --clr-bg-error-strong-highlighted: color-mix( - in oklab, - var(--clr-bg-error-strong), - black var(--clr-bg-error-subtle-strength) - ); - --clr-bg-warning-subtle-base: #ffca1b; - --clr-bg-warning-subtle-strength: 10%; - --clr-bg-warning-subtle: #{utils.css-alpha( - var(--clr-bg-warning-subtle-base), - var(--clr-bg-warning-subtle-strength) - )}; - --clr-bg-warning-strong: var(--clr-yellow-600); - --clr-bg-warning-strong-highlighted: color-mix( - in oklab, - var(--clr-bg-warning-strong), - black var(--clr-bg-warning-subtle-strength) - ); - --clr-bg-success-subtle-base: #17e865; - --clr-bg-success-subtle-strength: 15%; - --clr-bg-success-subtle: #{utils.css-alpha( - var(--clr-bg-success-subtle-base), - var(--clr-bg-success-subtle-strength) - )}; - --clr-bg-success-strong: var(--clr-green-600); - --clr-bg-success-strong-highlighted: color-mix( - in oklab, - var(--clr-bg-success-strong), - black var(--clr-bg-success-subtle-strength) - ); - - /* BORDER TOKENS */ - - --clr-border-primary-base: #000856; - --clr-border-primary-strength: 15%; - --clr-border-primary: color-mix( - in oklab, - var(--clr-bg-primary), - var(--clr-border-primary-base) var(--clr-border-primary-strength) - ); - --clr-border-media: rgb(252 248 255 / 15%); - --clr-border-on-bg-secondary: var(--clr-grey-200); - --clr-border-on-bg-accent-subtle: var(--clr-indigo-200); - --clr-border-on-bg-error-subtle: #{utils.css-alpha( - var(--clr-text-error), - 50% - )}; - --clr-border-on-bg-warning-subtle: #{utils.css-alpha( - var(--clr-text-warning), - 50% - )}; - --clr-border-on-bg-success-subtle: #{utils.css-alpha( - var(--clr-text-success), - 50% - )}; - - /* SHADOW TOKENS */ - - --clr-shadow-primary-base: var(--clr-black); - --clr-shadow-primary-strength: 30%; - --clr-shadow-primary: #{utils.css-alpha( - var(--clr-shadow-primary-base), - var(--clr-shadow-primary-strength) - )}; - --dropdown-shadow: - 0 20px 25px -5px var(--clr-shadow-primary), - 0 8px 10px -6px var(--clr-shadow-primary); - --overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary)); - - /* GRAPHS/CHARTS TOKENS */ - - --clr-graph-primary-stroke: var(--clr-text-accent); - --clr-graph-primary-fill: var(--clr-bg-accent-subtle); - --clr-graph-warning-stroke: var(--clr-text-warning); - --clr-graph-warning-fill: var(--clr-bg-warning-subtle); - --clr-graph-disabled-stroke: var(--clr-text-disabled); - --clr-graph-disabled-fill: var(--clr-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(--clr-text-accent); - --avatar-border-radius: 8px; +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%)}; } diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss new file mode 100644 index 00000000000..665271c5354 --- /dev/null +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -0,0 +1,530 @@ +// 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 new file mode 100644 index 00000000000..a6a5e5556b5 --- /dev/null +++ b/app/javascript/styles/mastodon-light/variables.scss @@ -0,0 +1,46 @@ +@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 new file mode 100644 index 00000000000..a9911edb9d1 --- /dev/null +++ b/app/javascript/styles/mastodon/_functions.scss @@ -0,0 +1,31 @@ +@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 3fa53c65a81..d66fa405819 100644 --- a/app/javascript/styles/mastodon/_mixins.scss +++ b/app/javascript/styles/mastodon/_mixins.scss @@ -1,30 +1,33 @@ +@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(--clr-bg-secondary); - color: var(--clr-text-primary); + background: var(--input-background-color); + color: $darker-text-color; border-radius: 4px; - border: 1px solid var(--clr-border-on-bg-secondary); + border: 1px solid var(--background-border-color); font-size: 17px; line-height: normal; margin: 0; } @mixin search-popout { - background: var(--clr-bg-elevated); + background: $simple-background-color; border-radius: 4px; padding: 10px 14px; padding-bottom: 14px; margin-top: 10px; - color: var(--clr-text-secondary); - box-shadow: 2px 4px 15px var(--clr-shadow-primary); + color: $light-text-color; + box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4); h4 { text-transform: uppercase; - color: var(--clr-text-secondary); + color: $light-text-color; font-size: 13px; font-weight: 500; margin-bottom: 10px; @@ -40,6 +43,6 @@ em { font-weight: 500; - color: var(--clr-text-primary); + color: $inverted-text-color; } } diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss index a948dbc41c5..816a9d9998c 100644 --- a/app/javascript/styles/mastodon/_variables.scss +++ b/app/javascript/styles/mastodon/_variables.scss @@ -1,3 +1,91 @@ +@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 0a9cee5c0e1..ba0605b79e9 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -1,4 +1,5 @@ @use 'variables' as *; +@use 'functions' as *; $maximum-width: 1235px; $fluid-breakpoint: $maximum-width + 20px; @@ -27,7 +28,7 @@ $fluid-breakpoint: $maximum-width + 20px; li { position: relative; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); padding: 1em 1.75em; padding-inline-start: 3em; font-weight: 500; @@ -67,8 +68,8 @@ $fluid-breakpoint: $maximum-width + 20px; position: absolute; inset-inline-start: 0; top: 1em; - background: var(--clr-bg-accent-strong); - color: var(--clr-text-on-accent-strong); + background: $highlight-text-color; + color: $ui-base-color; border-radius: 50%; width: 4ch; height: 4ch; @@ -84,13 +85,13 @@ $fluid-breakpoint: $maximum-width + 20px; } &__text { - color: var(--clr-text-primary); + color: $primary-text-color; } &__hint { font-size: 14px; font-weight: 400; - color: var(--clr-text-secondary); + color: $darker-text-color; } } @@ -103,21 +104,21 @@ $fluid-breakpoint: $maximum-width + 20px; > label { font-size: 14px; font-weight: 600; - color: var(--clr-text-primary); + color: $primary-text-color; } - select { + > select { appearance: none; box-sizing: border-box; font-size: 14px; - color: var(--clr-text-primary); + color: $primary-text-color; display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; - background: var(--clr-bg-secondary); - border: 1px solid var(--clr-border-primary); + background: $ui-base-color; + border: 1px solid var(--background-border-color); border-radius: 4px; padding-inline-start: 10px; padding-inline-end: 30px; @@ -127,4 +128,18 @@ $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 0b8d1b8dd2b..da4b9bdaa81 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -1,5 +1,6 @@ @use 'sass:color'; @use 'variables' as *; +@use 'functions' as *; .card { & > a { @@ -13,7 +14,7 @@ &:active, &:focus { .card__bar { - background: var(--clr-bg-accent-subtle); + background: $ui-base-color; } } } @@ -21,8 +22,8 @@ &__img { height: 130px; position: relative; - background: var(--clr-bg-secondary); - border: 1px solid var(--clr-border-primary); + background: $ui-base-color; + border: 1px solid var(--background-border-color); border-bottom: none; img { @@ -44,8 +45,8 @@ display: flex; justify-content: flex-start; align-items: center; - background: var(--clr-bg-primary); - border: 1px solid var(--clr-border-primary); + background: var(--background-color); + border: 1px solid var(--background-border-color); border-top: none; .avatar { @@ -60,7 +61,7 @@ display: block; margin: 0; border-radius: 4px; - background: var(--clr-bg-secondary); + background: darken($ui-base-color, 8%); object-fit: cover; } } @@ -75,7 +76,7 @@ strong { font-size: 15px; - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 500; overflow: hidden; text-overflow: ellipsis; @@ -84,7 +85,7 @@ span { display: block; font-size: 14px; - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -105,7 +106,7 @@ .page, .gap { font-size: 14px; - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 500; display: inline-block; padding: 6px 10px; @@ -113,9 +114,9 @@ } .current { - color: var(--clr-bg-inverted); - background: var(--clr-text-on-inverted); + background: $simple-background-color; border-radius: 100px; + color: $inverted-text-color; cursor: default; margin: 0 10px; } @@ -127,7 +128,7 @@ .older, .newer { text-transform: uppercase; - color: var(--clr-text-primary); + color: $secondary-text-color; } .older { @@ -142,7 +143,7 @@ .disabled { cursor: default; - color: var(--clr-text-disabled); + color: lighten($inverted-text-color, 10%); } @media screen and (width <= 700px) { @@ -160,8 +161,9 @@ } .nothing-here { - color: var(--clr-text-secondary); - background: var(--clr-bg-primary); + background: $ui-base-color; + box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2); + color: $darker-text-color; font-size: 14px; font-weight: 500; text-align: center; @@ -172,15 +174,6 @@ border-radius: 4px; padding: 20px; min-height: 30vh; - border: 1px solid var(--clr-border-primary); - - @media screen and (min-width: ($no-gap-breakpoint - 1)) { - border-top: 0; - } - - &--no-toolbar { - border-top: 1px solid var(--clr-border-primary); - } &--under-tabs { border-radius: 0 0 4px 4px; @@ -203,7 +196,7 @@ font-size: 12px; line-height: 12px; font-weight: 500; - color: var(--clr-text-primary); + color: $ui-secondary-color; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -213,24 +206,16 @@ .simple_form .overridden, .simple_form .recommended, .simple_form .not_recommended { - background-color: var(--clr-bg-secondary); - border: 1px solid var(--clr-border-primary); -} - -.information-badge { - &.superapp { - color: var(--clr-text-success); - background-color: var(--clr-bg-success-subtle); - border-color: var(--clr-border-on-bg-success-subtle); - } + background-color: color.change($ui-secondary-color, $alpha: 0.1); + border: 1px solid color.change($ui-secondary-color, $alpha: 0.5); } .account-role { display: inline-flex; padding: 4px; padding-inline-end: 8px; - border: 1px solid var(--clr-text-accent); - color: var(--clr-text-accent); + border: 1px solid $highlight-text-color; + color: $highlight-text-color; font-weight: 500; font-size: 12px; letter-spacing: 0.5px; @@ -253,10 +238,18 @@ } } +.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: var(--clr-text-error); - background-color: var(--clr-bg-error-subtle); - border-color: var(--clr-border-on-bg-error-subtle); + color: lighten($error-red, 12%); + background-color: rgba(lighten($error-red, 12%), 0.1); + border-color: rgba(lighten($error-red, 12%), 0.5); } .account__header__fields { @@ -264,14 +257,14 @@ padding: 0; margin: 15px -15px -15px; border: 0 none; - border-top: 1px solid var(--clr-border-primary); - border-bottom: 1px solid var(--clr-border-primary); + border-top: 1px solid lighten($ui-base-color, 12%); + border-bottom: 1px solid lighten($ui-base-color, 12%); font-size: 14px; line-height: 20px; dl { display: flex; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid lighten($ui-base-color, 12%); } dt, @@ -289,17 +282,17 @@ font-weight: 500; width: 120px; flex: 0 0 auto; - color: var(--clr-text-primary); - background: var(--clr-bg-secondary); + color: $secondary-text-color; + background: rgba(darken($ui-base-color, 8%), 0.5); } dd { flex: 1 1 auto; - color: var(--clr-text-secondary); + color: $darker-text-color; } a { - color: var(--clr-text-accent); + color: $highlight-text-color; text-decoration: none; &:hover, @@ -310,16 +303,16 @@ } .verified { - border: 1px solid var(--clr-border-on-bg-success-subtle); - background: var(--clr-bg-success-subtle); + border: 1px solid color.change($valid-value-color, $alpha: 0.5); + background: color.change($valid-value-color, $alpha: 0.25); a { - color: var(--clr-text-success); + color: $valid-value-color; font-weight: 500; } &__mark { - color: var(--clr-text-success); + color: $valid-value-color; } } @@ -334,10 +327,10 @@ .pending-account { &__header { - color: var(--clr-text-secondary); + color: $darker-text-color; a { - color: var(--clr-text-primary); + color: $ui-secondary-color; text-decoration: none; &:hover, @@ -348,7 +341,7 @@ } strong { - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 700; } @@ -363,7 +356,7 @@ } .batch-table__row--muted { - color: var(--clr-text-tertiary); + color: lighten($ui-base-color, 26%); } .batch-table__row--muted .pending-account__header, @@ -372,7 +365,7 @@ &, a, strong { - color: var(--clr-text-tertiary); + color: lighten($ui-base-color, 26%); } } @@ -384,12 +377,12 @@ tbody td.accounts-table__extra, &__count, &__count small { - color: var(--clr-text-tertiary); + color: lighten($ui-base-color, 26%); } } .batch-table__row--attention { - color: var(--clr-text-warning); + color: $gold-star; } .batch-table__row--attention .pending-account__header, @@ -398,7 +391,7 @@ &, a, strong { - color: var(--clr-text-warning); + color: $gold-star; } } @@ -406,6 +399,6 @@ tbody td.accounts-table__extra, &__count, &__count small { - color: var(--clr-text-warning); + color: $gold-star; } } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 17b10887ffa..6a5008909db 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1,5 +1,6 @@ @use 'sass:color'; @use 'sass:math'; +@use 'functions' as *; @use 'variables' as *; $no-columns-breakpoint: 890px; @@ -33,6 +34,7 @@ $content-width: 840px; &__inner { display: flex; justify-content: flex-end; + background: var(--background-color); height: 100%; } } @@ -44,8 +46,8 @@ $content-width: 840px; &__toggle { display: none; - background: var(--clr-bg-primary); - border-bottom: 1px solid var(--clr-border-primary); + background: var(--background-color); + border-bottom: 1px solid lighten($ui-base-color, 4%); align-items: center; &__logo { @@ -59,7 +61,7 @@ $content-width: 840px; &__icon { display: block; - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; flex: 0 0 auto; font-size: 18px; @@ -68,7 +70,7 @@ $content-width: 840px; border-radius: 4px; &:focus { - background: var(--clr-bg-accent-subtle); + background: $ui-base-color; } .material-close { @@ -122,19 +124,20 @@ $content-width: 840px; align-items: center; gap: 6px; padding: 15px; - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; transition: all 200ms linear; transition-property: color, background-color; &:hover { - color: var(--clr-text-primary); + color: $primary-text-color; transition: all 100ms linear; transition-property: color, background-color; } } ul { + background: var(--background-color); margin: 0; a { @@ -144,12 +147,12 @@ $content-width: 840px; } .warning a { - color: var(--clr-text-warning); + color: $gold-star; font-weight: 700; } .simple-navigation-active-leaf a { - color: var(--clr-text-accent); + color: $highlight-text-color; border-bottom: 0; } } @@ -224,7 +227,7 @@ $content-width: 840px; align-items: center; padding: 7px 10px; border-radius: 4px; - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; font-weight: 500; gap: 5px; @@ -237,13 +240,13 @@ $content-width: 840px; &:hover, &:focus, &:active { - background: var(--clr-bg-secondary); + background: lighten($ui-base-color, 4%); } &.selected { font-weight: 700; - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + color: $primary-text-color; + background: $ui-highlight-color; } } } @@ -267,7 +270,7 @@ $content-width: 840px; font-size: 12px; display: block; font-weight: 500; - color: var(--clr-text-secondary); + color: $darker-text-color; line-height: 18px; } @@ -278,14 +281,14 @@ $content-width: 840px; } h2 { - color: var(--clr-text-primary); + color: $secondary-text-color; font-size: 24px; line-height: 36px; font-weight: 700; } h3 { - color: var(--clr-text-primary); + color: $secondary-text-color; font-size: 20px; line-height: 28px; font-weight: 400; @@ -296,28 +299,33 @@ $content-width: 840px; text-transform: uppercase; font-size: 13px; font-weight: 700; - color: var(--clr-text-secondary); + color: $darker-text-color; padding-top: 24px; margin-bottom: 8px; - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); } h6 { font-size: 16px; - color: var(--clr-text-primary); + color: $secondary-text-color; line-height: 28px; font-weight: 500; } .fields-group h6 { - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 500; } + .directory__tag > a, + .directory__tag > div { + box-shadow: none; + } + .directory__tag h4 { font-size: 18px; font-weight: 700; - color: var(--clr-text-primary); + color: $primary-text-color; text-transform: none; padding-bottom: 0; margin-bottom: 0; @@ -331,12 +339,12 @@ $content-width: 840px; &.private-comment { display: block; - color: var(--clr-text-secondary); + color: $darker-text-color; } &.public-comment { display: block; - color: var(--clr-text-primary); + color: $secondary-text-color; } } } @@ -344,11 +352,11 @@ $content-width: 840px; & > p { font-size: 14px; line-height: 21px; - color: var(--clr-text-primary); + color: $secondary-text-color; margin-bottom: 20px; strong { - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 500; @each $lang in $cjk-langs { @@ -363,7 +371,7 @@ $content-width: 840px; width: 100%; height: 0; border: 0; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); margin: 20px 0; &.spacer { @@ -401,7 +409,7 @@ $content-width: 840px; inset-inline-start: 0; bottom: 0; overflow-y: auto; - background: var(--clr-bg-primary); + background: var(--background-color); } } @@ -421,7 +429,7 @@ $content-width: 840px; } ul .simple-navigation-active-leaf a { - border-bottom-color: var(--clr-text-accent); + border-bottom-color: $ui-highlight-color; } } } @@ -437,10 +445,10 @@ hr.spacer { body, .admin-wrapper .content { .muted-hint { - color: var(--clr-text-secondary); + color: $darker-text-color; a { - color: var(--clr-text-accent); + color: $highlight-text-color; } } @@ -460,29 +468,29 @@ body, } .positive-hint { - color: var(--clr-text-success); + color: $valid-value-color; font-weight: 500; } .negative-hint { - color: var(--clr-text-error); + color: $error-value-color; font-weight: 500; } .neutral-hint { - color: var(--clr-text-primary); + color: $dark-text-color; font-weight: 500; } .warning-hint { - color: var(--clr-text-warning); + color: $gold-star; font-weight: 500; } } kbd { font-family: Courier, monospace; - background-color: var(--clr-bg-accent-subtle); + background-color: color.change($ui-secondary-color, $alpha: 0.1); padding: 4px; padding-bottom: 2px; border-radius: 5px; @@ -535,21 +543,21 @@ kbd { a { display: inline-block; - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 500; - border-bottom: 2px solid var(--clr-bg-secondary); + border-bottom: 2px solid $ui-base-color; &:hover { - color: var(--clr-text-primary); - border-bottom: 2px solid var(--clr-bg-tertiary); + color: $primary-text-color; + border-bottom: 2px solid lighten($ui-base-color, 5%); } &.selected { - color: var(--clr-text-accent); - border-bottom: 2px solid var(--clr-text-accent); + color: $highlight-text-color; + border-bottom: 2px solid $ui-highlight-color; } } } @@ -573,7 +581,7 @@ kbd { font-weight: 500; font-size: 14px; line-height: 18px; - color: var(--clr-text-primary); + color: $secondary-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -632,7 +640,7 @@ kbd { font-size: 14px; a { - color: var(--clr-text-accent); + color: $highlight-text-color; text-decoration: none; &:hover { @@ -662,25 +670,25 @@ kbd { line-height: 20px; padding: 15px; padding-inline-start: 15px * 2 + 40px; - background: var(--clr-bg-primary); - border-right: 1px solid var(--clr-border-primary); - border-left: 1px solid var(--clr-border-primary); - border-bottom: 1px solid var(--clr-border-primary); + 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); position: relative; text-decoration: none; - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 14px; &:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); } &:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); } &__avatar { @@ -700,13 +708,13 @@ kbd { } &__timestamp { - color: var(--clr-text-tertiary); + color: $dark-text-color; } a, .username, .target { - color: var(--clr-text-primary); + color: $secondary-text-color; text-decoration: none; font-weight: 500; } @@ -725,12 +733,12 @@ kbd { line-height: 20px; padding: 15px; padding-inline-start: 15px * 2 + 40px; - background: var(--clr-bg-primary); - border: 1px solid var(--clr-border-primary); + background: var(--background-color); + border: 1px solid var(--background-border-color); border-radius: 4px; position: relative; text-decoration: none; - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 14px; margin-bottom: 15px; @@ -751,13 +759,13 @@ kbd { } &__timestamp { - color: var(--clr-text-secondary); + color: $dark-text-color; } &:hover, &:focus, &:active { - background: var(--clr-bg-primary); + background: $ui-base-color; } } @@ -766,10 +774,10 @@ a.name-tag, a.inline-name-tag, .inline-name-tag { text-decoration: none; - color: var(--clr-text-primary); + color: $secondary-text-color; &:hover { - color: var(--clr-text-accent); + color: $highlight-text-color; } .username { @@ -779,7 +787,7 @@ a.inline-name-tag, &.suspended { .username { text-decoration: line-through; - color: var(--clr-text-error); + color: lighten($error-red, 12%); } .avatar { @@ -812,18 +820,18 @@ a.name-tag, .speech-bubble { margin-bottom: 20px; - border-inline-start: 4px solid var(--clr-text-accent); + border-inline-start: 4px solid $ui-highlight-color; &.positive { - border-color: var(--clr-text-success); + border-left-color: $success-green; } &.negative { - border-color: var(--clr-text-error); + border-left-color: lighten($error-red, 12%); } &.warning { - border-color: var(--clr-text-warning); + border-left-color: $gold-star; } &__bubble { @@ -836,7 +844,7 @@ a.name-tag, font-weight: 500; a { - color: var(--clr-text-secondary); + color: $darker-text-color; } } @@ -846,13 +854,13 @@ a.name-tag, } time { - color: var(--clr-text-tertiary); + color: $dark-text-color; } } .report-card { - background: var(--clr-bg-primary); - border: 1px solid var(--clr-border-primary); + background: var(--background-color); + border: 1px solid var(--background-border-color); border-radius: 4px; margin-bottom: 20px; @@ -874,7 +882,7 @@ a.name-tag, &__stats { flex: 0 0 auto; font-weight: 500; - color: var(--clr-text-secondary); + color: $darker-text-color; text-transform: uppercase; text-align: end; @@ -885,12 +893,12 @@ a.name-tag, &:focus, &:hover, &:active { - color: var(--clr-text-accent); + color: $highlight-text-color; } } .red { - color: var(--clr-text-error); + color: $error-value-color; } } } @@ -899,7 +907,7 @@ a.name-tag, &__item { display: flex; justify-content: flex-start; - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); &__reported-by, &__assigned { @@ -907,7 +915,7 @@ a.name-tag, flex: 0 0 auto; box-sizing: border-box; width: 150px; - color: var(--clr-text-secondary); + color: $darker-text-color; &, .username { @@ -933,10 +941,10 @@ a.name-tag, width: 100%; padding: 15px; text-decoration: none; - color: var(--clr-text-secondary); + color: $darker-text-color; &:hover { - color: var(--clr-text-accent); + color: $highlight-text-color; } } } @@ -973,18 +981,18 @@ a.name-tag, .account__header__fields, .account__header__content { - background: var(--clr-bg-primary); - border: 1px solid var(--clr-border-primary); + background: var(--background-color); + border: 1px solid var(--background-border-color); border-radius: 4px; height: 100%; } .account__header__fields { margin: 0; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); a { - color: var(--clr-text-accent); + color: $highlight-text-color; } dl:first-child .verified { @@ -992,14 +1000,14 @@ a.name-tag, } .verified a { - color: var(--clr-text-success); + color: $valid-value-color; } } .account__header__content { box-sizing: border-box; padding: 20px; - color: var(--clr-text-primary); + color: $primary-text-color; } } @@ -1010,8 +1018,8 @@ a.name-tag, .applications-list__item, .filters-list__item { padding: 15px 0; - background: var(--clr-bg-primary); - border: 1px solid var(--clr-border-primary); + background: var(--background-color); + border: 1px solid var(--background-border-color); border-radius: 4px; margin-top: 15px; } @@ -1028,13 +1036,13 @@ a.name-tag, .announcements-list, .filters-list { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px; border-bottom: none; &__item { padding: 15px 0; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &__title { padding: 0 15px; @@ -1042,12 +1050,12 @@ a.name-tag, font-weight: 500; font-size: 18px; line-height: 1.5; - color: var(--clr-text-primary); + color: $secondary-text-color; text-decoration: none; margin-bottom: 10px; &:hover { - color: var(--clr-text-accent); + color: $highlight-text-color; } .account-role { @@ -1063,7 +1071,7 @@ a.name-tag, &:hover, &:focus, &:active { - color: var(--clr-text-primary); + color: $primary-text-color; } } @@ -1080,7 +1088,7 @@ a.name-tag, &__meta { padding: 0 15px; - color: var(--clr-text-tertiary); + color: $dark-text-color; a { color: inherit; @@ -1123,11 +1131,11 @@ a.name-tag, &.expired { .expiration { - color: var(--clr-text-error); + color: lighten($error-red, 12%); } .permissions-list__item__icon { - color: var(--clr-text-secondary); + color: $dark-text-color; } } } @@ -1159,7 +1167,7 @@ a.name-tag, &__table { &__number { - color: var(--clr-bg-primary); + color: var(--background-color); padding: 10px; } @@ -1181,26 +1189,23 @@ a.name-tag, &__label { font-weight: 700; - color: var(--clr-text-secondary); + color: $darker-text-color; } &__box { box-sizing: border-box; - width: 52px; - margin: 1px; + background: var(--background-color); padding: 10px; font-weight: 500; - color: var(--clr-text-primary); - background: var(--clr-bg-primary); + color: $primary-text-color; + width: 52px; + margin: 1px; @for $i from 0 through 10 { &--#{10 * $i} { - @if $i > 5 { - color: var(--clr-text-on-accent-strong); - } - - background-color: rgb( - from var(--clr-bg-accent-strong) r g b / #{math.div(max(1, $i), 10)} + background-color: rgba( + $ui-highlight-color, + 1 * (math.div(max(1, $i), 10)) ); } } @@ -1211,9 +1216,9 @@ a.name-tag, .sparkline { display: block; text-decoration: none; - background: var(--clr-bg-primary); + background: var(--background-color); border-radius: 4px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); padding: 0; position: relative; padding-bottom: 55px + 20px; @@ -1231,22 +1236,22 @@ a.name-tag, margin-inline-end: 10px; font-weight: 500; font-size: 28px; - color: var(--clr-text-primary); + color: $primary-text-color; } &__change { display: block; font-weight: 500; font-size: 18px; - color: var(--clr-text-secondary); + color: $darker-text-color; margin-bottom: -3px; &.positive { - color: var(--clr-text-success); + color: $valid-value-color; } &.negative { - color: var(--clr-text-error); + color: $error-value-color; } } } @@ -1255,7 +1260,7 @@ a.name-tag, padding: 0 20px; padding-bottom: 10px; text-transform: uppercase; - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 500; } @@ -1270,12 +1275,12 @@ a.name-tag, } path:first-child { - fill: var(--clr-graph-primary-fill) !important; + fill: color.change($highlight-text-color, $alpha: 0.25) !important; fill-opacity: 1 !important; } path:last-child { - stroke: var(--clr-graph-primary-stroke) !important; + stroke: lighten($highlight-text-color, 6%) !important; fill: none !important; } } @@ -1285,17 +1290,17 @@ a.sparkline { &:hover, &:focus, &:active { - background: var(--clr-bg-accent-subtle); + background: $ui-base-color; } } .skeleton { - background-color: var(--clr-bg-primary); + background-color: var(--background-color); background-image: linear-gradient( 90deg, - var(--clr-bg-primary), - var(--clr-bg-secondary), - var(--clr-bg-primary) + lighten($ui-base-color, 8%), + lighten($ui-base-color, 12%), + lighten($ui-base-color, 8%) ); background-size: 200px 100%; background-repeat: no-repeat; @@ -1322,7 +1327,7 @@ a.sparkline { } &__item { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid lighten($ui-base-color, 4%); &__key { font-weight: 500; @@ -1331,7 +1336,7 @@ a.sparkline { &__value { text-align: end; - color: var(--clr-text-secondary); + color: $darker-text-color; padding: 11px 10px; } @@ -1340,13 +1345,14 @@ a.sparkline { width: 8px; height: 8px; border-radius: 50%; - background: var(--clr-text-accent); + background: $ui-highlight-color; margin-inline-end: 10px; @for $i from 0 through 10 { &--#{10 * $i} { - background-color: rgb( - from var(--clr-text-accent) r g b / #{math.div(max(1, $i), 10)} + background-color: rgba( + $ui-highlight-color, + 1 * (math.div(max(1, $i), 10)) ); } } @@ -1357,11 +1363,11 @@ a.sparkline { } &.negative { - color: var(--clr-text-error); + color: $error-value-color; font-weight: 700; .dimension__item__value { - color: var(--clr-text-error); + color: $error-value-color; } } } @@ -1369,12 +1375,12 @@ a.sparkline { .report-reason-selector { border-radius: 4px; - background: var(--clr-bg-primary); + background: var(--background-color); margin-bottom: 20px; &__category { cursor: pointer; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid darken($ui-base-color, 8%); &__label { padding: 15px; @@ -1404,7 +1410,7 @@ a.sparkline { &__details { &__item { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); padding: 15px 0; &:last-child { @@ -1435,7 +1441,7 @@ a.sparkline { .account-card { border-radius: 4px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); position: relative; &__warning-badge { @@ -1447,7 +1453,7 @@ a.sparkline { background: url('@/images/warning-stripes.svg') repeat-y left, url('@/images/warning-stripes.svg') repeat-y right, - var(--clr-bg-primary); + var(--background-color); } &__permalink { @@ -1466,7 +1472,7 @@ a.sparkline { width: 100%; height: 100%; object-fit: cover; - background: var(--clr-bg-secondary); + background: darken($ui-base-color, 8%); } } @@ -1484,21 +1490,21 @@ a.sparkline { margin: 0; width: 56px; height: 56px; - background-color: var(--clr-bg-secondary); + background-color: darken($ui-base-color, 8%); border-radius: 8px; - border: 1px solid var(--clr-border-media); + border: 1px solid $ui-base-color; } } .display-name { - color: var(--clr-text-secondary); + color: $darker-text-color; padding-bottom: 15px; font-size: 15px; line-height: 20px; bdi { display: block; - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 700; } } @@ -1527,7 +1533,7 @@ a.sparkline { } a { - color: var(--clr-text-primary); + color: $secondary-text-color; text-decoration: none; unicode-bidi: isolate; @@ -1578,14 +1584,14 @@ a.sparkline { &__item { padding: 15px 0; text-align: center; - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 600; font-size: 15px; line-height: 21px; small { display: block; - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 400; font-size: 13px; line-height: 18px; @@ -1598,11 +1604,11 @@ a.sparkline { margin-bottom: 20px; &__item { - background: var(--clr-bg-primary); + background: var(--background-color); position: relative; padding: 15px; padding-inline-start: 15px * 2 + 40px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); &:first-child { border-top-left-radius: 4px; @@ -1624,13 +1630,13 @@ a.sparkline { } &__header { - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 15px; line-height: 20px; margin-bottom: 4px; .username { - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 500; margin-inline-end: 5px; @@ -1647,7 +1653,7 @@ a.sparkline { } a.timestamp { - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; &:hover, @@ -1668,7 +1674,7 @@ a.sparkline { line-height: 20px; overflow-wrap: break-word; font-weight: 400; - color: var(--clr-text-primary); + color: $primary-text-color; p { margin-bottom: 20px; @@ -1681,7 +1687,7 @@ a.sparkline { } a { - color: var(--clr-text-accent); + color: $highlight-text-color; text-decoration: none; &:hover { @@ -1725,7 +1731,7 @@ a.sparkline { &__description { padding: 15px; font-size: 14px; - color: var(--clr-text-tertiary); + color: $dark-text-color; } } @@ -1753,7 +1759,7 @@ a.sparkline { float: right; a { - color: var(--clr-text-accent); + color: $ui-highlight-color; text-decoration: none; &:hover, @@ -1770,14 +1776,14 @@ a.sparkline { line-height: 20px; overflow-wrap: break-word; font-weight: 400; - color: var(--clr-text-primary); + color: $primary-text-color; box-sizing: border-box; min-height: 100%; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px; a { - color: var(--clr-text-accent); + color: $highlight-text-color; text-decoration: none; &:hover { @@ -1802,34 +1808,34 @@ a.sparkline { list-style: disc; padding-inline-start: 15px; margin-bottom: 20px; - color: var(--clr-text-secondary); + color: $darker-text-color; &:last-child { margin-bottom: 0; } &__text { - color: var(--clr-text-primary); + color: $primary-text-color; } } &__statuses-list { border-radius: 4px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); font-size: 13px; line-height: 18px; overflow: hidden; &__item { padding: 16px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &:last-child { border-bottom: 0; } &__meta { - color: var(--clr-text-secondary); + color: $darker-text-color; } a { @@ -1866,16 +1872,16 @@ a.sparkline { flex: 0 0 auto; width: 4px; height: 21px; - background: var(--clr-bg-secondary); + background: lighten($ui-base-color, 8%); margin: 0 2px; border-radius: 2px; &.positive { - background: var(--clr-bg-success-strong); + background: $valid-value-color; } &.negative { - background: var(--clr-bg-error-strong); + background: $error-value-color; } } } @@ -1904,9 +1910,9 @@ a.sparkline { align-items: center; width: calc(1.375rem + 1px); height: calc(1.375rem + 1px); - background: var(--clr-bg-primary); - border: 1px solid var(--clr-text-accent); - color: var(--clr-text-accent); + background: $ui-base-color; + border: 1px solid $highlight-text-color; + color: $highlight-text-color; border-radius: 8px; } @@ -1914,7 +1920,7 @@ a.sparkline { position: absolute; content: ''; width: 1px; - background: var(--clr-text-accent); + background: $highlight-text-color; bottom: 0; top: calc(1.875rem + 1px); inset-inline-start: 0.6875rem; @@ -1932,14 +1938,14 @@ a.sparkline { &__entry { h5 { font-weight: 500; - color: var(--clr-text-primary); + color: $primary-text-color; line-height: 25px; margin-bottom: 16px; } .status { - border: 1px solid var(--clr-border-primary); - background: var(--clr-bg-secondary); + border: 1px solid lighten($ui-base-color, 4%); + background: $ui-base-color; border-radius: 4px; } } @@ -1952,8 +1958,8 @@ a.sparkline { line-height: 20px; overflow-wrap: break-word; font-weight: 400; - border: 1px solid var(--clr-border-primary); - color: var(--clr-text-primary); + border: 1px solid lighten($ui-base-color, 4%); + color: $primary-text-color; box-sizing: border-box; min-height: 100%; @@ -1988,9 +1994,9 @@ a.sparkline { summary { display: block; box-sizing: border-box; - color: var(--clr-text-primary); - background: var(--clr-bg-accent-subtle); - border: 1px solid var(--clr-border-on-bg-accent-subtle); + background: var(--nested-card-background); + color: var(--nested-card-text); + border: var(--nested-card-border); border-radius: 8px; padding: 8px 13px; position: relative; @@ -2004,7 +2010,7 @@ a.sparkline { display: block; font-size: 15px; line-height: 20px; - color: var(--clr-text-accent); + color: $highlight-text-color; cursor: pointer; border: 0; background: transparent; @@ -2047,7 +2053,7 @@ a.sparkline { } .spoiler-button__overlay__label { - outline: 1px solid var(--clr-border-media); + outline: 1px solid var(--media-outline-color); } .hide-button { @@ -2056,11 +2062,11 @@ a.sparkline { position: absolute; top: 5px; right: 5px; - color: var(--clr-text-on-media); - background: var(--clr-bg-media); - backdrop-filter: $backdrop-blur-filter; - outline: 1px solid var(--clr-border-media); + color: $white; border: 0; + outline: 1px solid var(--media-outline-color); + background-color: color.change($black, $alpha: 0.45); + backdrop-filter: $backdrop-blur-filter; padding: 3px 12px; border-radius: 99px; font-size: 14px; @@ -2069,7 +2075,7 @@ a.sparkline { &:hover, &:focus { - background-color: rgb(from var(--clr-bg-media-base) r g b / 90%); + background-color: color.change($black, $alpha: 0.9); } } @@ -2097,23 +2103,23 @@ a.sparkline { .admin { &__terms-of-service { &__container { - background: var(--clr-bg-tertiary); + background: var(--surface-background-color); border-radius: 8px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); overflow: hidden; &__header { padding: 16px; font-size: 14px; line-height: 20px; - color: var(--clr-text-primary); + color: $secondary-text-color; display: flex; align-items: center; gap: 12px; } &__body { - background: var(--clr-bg-primary); + background: var(--background-color); padding: 16px; overflow-y: scroll; height: 30vh; @@ -2122,7 +2128,7 @@ a.sparkline { &__history { & > li { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &:last-child { border-bottom: 0; @@ -2160,14 +2166,14 @@ a.sparkline { width: 8px; height: 8px; border-radius: 50%; - background: var(--clr-text-tertiary); + background: $dark-text-color; } &.success { - color: var(--clr-text-success); + color: $valid-value-color; .dot-indicator__indicator { - background-color: var(--clr-bg-success-strong); + background-color: $valid-value-color; } } } diff --git a/app/javascript/styles/mastodon/annual_reports.scss b/app/javascript/styles/mastodon/annual_reports.scss index fefc95067b6..96500a18bb6 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(--clr-graph-primary-stroke) !important; + stroke: var(--indigo-3) !important; fill: none !important; } } diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 0bee13881d7..3d8bba7c00c 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -1,4 +1,5 @@ @use 'variables' as *; +@use 'functions' as *; html.has-modal { &, @@ -16,11 +17,11 @@ html.has-modal { body { font-family: $font-sans-serif, sans-serif; - background: var(--clr-bg-ambient); + background: var(--background-color); font-size: 13px; line-height: 18px; font-weight: 400; - color: var(--clr-text-primary); + color: $primary-text-color; text-rendering: optimizelegibility; // Disable kerning for Japanese text to preserve monospaced alignment for readability @@ -117,7 +118,6 @@ body { &.admin { padding: 0; - background: var(--clr-bg-primary); } &.error { @@ -157,7 +157,7 @@ body { a { &:focus { border-radius: 4px; - outline: var(--outline-focus-default); + outline: $ui-button-focus-outline; } &:focus:not(:focus-visible) { @@ -212,7 +212,7 @@ button { font-size: 16px; font-weight: 400; line-height: 1.7; - color: var(--clr-text-error); + color: lighten($error-red, 4%); text-align: center; & > div { @@ -228,7 +228,7 @@ button { } a { - color: var(--clr-text-accent); + color: $highlight-text-color; &:hover, &:focus, @@ -238,11 +238,11 @@ button { } &__footer { - color: var(--clr-text-secondary); + color: $dark-text-color; font-size: 13px; a { - color: var(--clr-text-secondary); + color: $dark-text-color; } } @@ -250,7 +250,7 @@ button { display: inline; border: 0; background: transparent; - color: var(--clr-text-secondary); + color: $dark-text-color; font: inherit; padding: 0; margin: 0; @@ -267,7 +267,7 @@ button { } &.copied { - color: var(--mas-status-success-color); + color: $valid-value-color; transition: none; } } diff --git a/app/javascript/styles/mastodon/branding.scss b/app/javascript/styles/mastodon/branding.scss index db00ed473b1..8e8dd3530bc 100644 --- a/app/javascript/styles/mastodon/branding.scss +++ b/app/javascript/styles/mastodon/branding.scss @@ -1,5 +1,5 @@ @use 'variables' as *; .logo { - color: var(--clr-text-primary); + color: $primary-text-color; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 31b561a7715..bd09f3b8b06 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1,5 +1,6 @@ @use 'sass:color'; @use 'variables' as *; +@use 'functions' as *; @use 'mixins' as *; .app-body { @@ -16,7 +17,7 @@ } .inline-alert { - color: var(--clr-text-success); + color: $valid-value-color; font-weight: 400; .no-reduce-motion & { @@ -28,7 +29,7 @@ display: block; font-size: 15px; line-height: 20px; - color: var(--clr-text-accent); + color: $highlight-text-color; border: 0; background: transparent; padding: 0; @@ -36,7 +37,7 @@ text-decoration: none; &--destructive { - color: var(--clr-text-error); + color: $error-value-color; } &:hover, @@ -45,19 +46,19 @@ } &:disabled { - color: var(--clr-text-primary); + color: $ui-primary-color; cursor: default; } &:focus-visible { - outline: var(--outline-focus-default); + outline: $ui-button-icon-focus-outline; } } .help-button { - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + background: $ui-button-background-color; border: 0; + color: $ui-button-color; border-radius: 20px; cursor: pointer; width: 24px; @@ -69,11 +70,11 @@ &:active, &:focus, &:hover { - background: var(--clr-bg-accent-strong-highlighted); + background-color: $ui-button-focus-background-color; } &:focus-visible { - outline: var(--outline-focus-default); + outline: $ui-button-icon-focus-outline; } .icon { @@ -83,11 +84,11 @@ } .button { - background-color: var(--clr-bg-accent-strong); + background-color: $ui-button-background-color; border: 10px none; border-radius: 4px; box-sizing: border-box; - color: var(--clr-text-on-accent-strong); + color: $ui-button-color; cursor: pointer; display: inline-flex; align-items: center; @@ -110,12 +111,11 @@ &:active, &:focus, &:hover { - background-color: var(--clr-bg-accent-strong-highlighted); + background-color: $ui-button-focus-background-color; } &:focus-visible { - outline: 2px solid var(--clr-bg-accent-strong); - outline-offset: 2px; + outline: $ui-button-icon-focus-outline; } &--compact { @@ -127,17 +127,13 @@ } &--dangerous { - background-color: var(--clr-bg-error-strong); - color: var(--clr-text-on-error-strong); + background-color: var(--error-background-color); + color: var(--on-error-color); &:active, &:focus, &:hover { - background-color: color-mix( - in oklab, - var(--clr-bg-error-strong), - black var(--clr-bg-error-subtle-strength) - ); + background-color: var(--error-active-background-color); transition: none; } } @@ -146,16 +142,14 @@ &:active, &:focus, &:hover { - color: var(--clr-text-on-error-strong); - background-color: var(--clr-bg-error-strong); + background-color: $ui-button-destructive-focus-background-color; transition: none; } } &:disabled, &.disabled { - color: var(--clr-text-on-disabled); - background-color: var(--clr-bg-disabled); + background-color: $ui-button-disabled-color; cursor: not-allowed; } @@ -164,22 +158,21 @@ } &.copied { - color: var(--clr-text-on-success-strong); - background-color: var(--clr-bg-success-strong); + background: $valid-value-color; transition: none; } &.button-secondary { - color: var(--clr-text-accent); + color: $highlight-text-color; background: transparent; padding: 6px 17px; - border: 1px solid var(--clr-text-accent); + border: 1px solid $highlight-text-color; &:active, &:focus, &:hover { - border-color: var(--clr-text-accent); - color: var(--clr-text-accent); + border-color: lighten($highlight-text-color, 4%); + color: lighten($highlight-text-color, 4%); background-color: transparent; text-decoration: none; } @@ -188,27 +181,28 @@ &:active, &:focus, &:hover { - border-color: var(--clr-text-error); - color: var(--clr-text-error); + border-color: $ui-button-destructive-focus-background-color; + color: $ui-button-destructive-focus-background-color; } } &:disabled, &.disabled { - border-color: var(--clr-text-disabled); - color: var(--clr-text-disabled); + opacity: 0.7; + border-color: $ui-button-disabled-color; + color: $ui-button-disabled-color; &:active, &:focus, &:hover { - border-color: var(--clr-text-disabled); - color: var(--clr-text-disabled); + border-color: $ui-button-disabled-color; + color: $ui-button-disabled-color; } } } &.button--plain { - color: var(--clr-text-accent); + color: $highlight-text-color; background: transparent; padding: 6px; @@ -222,7 +216,7 @@ &:focus, &:hover { border-color: transparent; - color: var(--clr-text-accent-subtle); + color: lighten($highlight-text-color, 4%); background-color: transparent; text-decoration: none; } @@ -231,13 +225,57 @@ &.disabled { opacity: 0.7; border-color: transparent; - color: var(--clr-text-disabled); + color: $ui-button-disabled-color; &:active, &:focus, &:hover { border-color: transparent; - color: var(--clr-text-disabled); + 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; } } } @@ -285,17 +323,12 @@ } .icon-button { - --default-icon-color: var(--clr-text-secondary); - --default-bg-color: transparent; - --hover-icon-color: var(--clr-text-primary); - --hover-bg-color: var(--clr-bg-accent-subtle); - display: inline-flex; - color: var(--default-icon-color); + color: $action-button-color; border: 0; padding: 0; border-radius: 4px; - background: var(--default-bg-color); + background: transparent; cursor: pointer; align-items: center; justify-content: center; @@ -312,41 +345,66 @@ &:hover, &:active, &:focus-visible { - color: var(--hover-icon-color); - background-color: var(--hover-bg-color); + color: lighten($action-button-color, 7%); + background-color: color.change($action-button-color, $alpha: 0.15); } &:focus-visible { - outline: 2px solid var(--clr-text-accent); + outline: $ui-button-icon-focus-outline; } &.disabled { - color: var(--clr-text-disabled); - background-color: var(--default-bg-color); + color: darken($action-button-color, 13%); + background-color: transparent; cursor: default; } &.inverted { - --default-icon-color: var(--clr-text-primary); - --hover-icon-color: var(--clr-text-secondary); + 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; + } } &.active { - --default-icon-color: var(--clr-text-accent); - --hover-icon-color: var(--clr-text-accent); - --hover-bg-color: transparent; + color: $highlight-text-color; + + &:hover, + &:active, + &:focus-visible { + color: $highlight-text-color; + background-color: transparent; + } + + &.disabled { + color: lighten($highlight-text-color, 13%); + } } &.overlayed { - --default-icon-color: rgb(from var(--clr-text-on-media) r g b / 70%); - --default-bg-color: var(--clr-bg-media); - --hover-icon-color: var(--clr-text-accent); - --hover-bg-color: rgb(from var(--clr-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 { @@ -365,14 +423,55 @@ } &.copied { - color: var(--clr-text-success); + border-color: $valid-value-color; + color: $valid-value-color; transition: none; - background-color: var(--clr-bg-success-subtle); - border-color: var(--clr-border-on-bg-accent-subtle); + background-color: color.change($valid-value-color, $alpha: 0.15); } } -body > [data-popper-placement] { +.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] { z-index: 9999; } @@ -415,10 +514,10 @@ body > [data-popper-placement] { &__suggestions { box-shadow: var(--dropdown-shadow); - background: var(--clr-bg-elevated); - border: 1px solid var(--clr-border-primary); + background: var(--input-background-color); + border: 1px solid var(--background-border-color); border-radius: 0 0 4px 4px; - color: var(--clr-text-primary); + color: var(--on-input-color); font-size: 14px; padding: 0; @@ -431,7 +530,7 @@ body > [data-popper-placement] { font-size: 14px; line-height: 20px; letter-spacing: 0.25px; - color: var(--clr-text-primary); + color: var(--on-input-color); &:last-child { border-radius: 0 0 4px 4px; @@ -440,7 +539,7 @@ body > [data-popper-placement] { &:hover, &:focus, &:active { - background: var(--clr-bg-secondary); + background: var(--dropdown-border-color); .autosuggest-account .display-name__account { color: inherit; @@ -448,8 +547,8 @@ body > [data-popper-placement] { } &.selected { - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + background: $ui-highlight-color; + color: $ui-button-color; .autosuggest-account .display-name__account { color: inherit; @@ -485,7 +584,7 @@ body > [data-popper-placement] { display: block; line-height: 16px; font-size: 12px; - color: var(--clr-text-secondary); + color: $ui-primary-color; } } @@ -540,27 +639,28 @@ body > [data-popper-placement] { flex-direction: column; flex: 0 1 auto; border-radius: 4px; - border: 1px solid var(--clr-border-on-bg-secondary); + border: 1px solid var(--background-border-color); transition: border-color 300ms linear; position: relative; - background: var(--clr-bg-secondary); + background: var(--input-background-color); &.active { transition: none; - border-color: var(--clr-text-accent); + border-color: $ui-highlight-color; } } &__warning { - color: var(--clr-text-primary); - background: var(--clr-bg-warning-subtle); - border: 1px solid var(--clr-border-on-bg-warning-subtle); + color: $inverted-text-color; + background: $ui-primary-color; + box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.3); 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 { @@ -571,7 +671,7 @@ body > [data-popper-placement] { } a { - color: var(--clr-text-accent); + color: $lighter-text-color; font-weight: 500; text-decoration: underline; @@ -595,7 +695,7 @@ body > [data-popper-placement] { .autosuggest-input { flex: 1 1 auto; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-width: 1px 0; } } @@ -606,8 +706,8 @@ body > [data-popper-placement] { box-sizing: border-box; width: 100%; margin: 0; - color: var(--clr-text-primary); - background: transparent; + color: $secondary-text-color; + background: var(--input-background-color); font-family: inherit; font-size: 14px; padding: 12px; @@ -622,8 +722,8 @@ body > [data-popper-placement] { .spoiler-input__input { padding: 12px 12px - 5px; - background: var(--clr-bg-accent-subtle); - color: var(--clr-text-accent); + background: color.change($ui-highlight-color, $alpha: 0.05); + color: $highlight-text-color; } &__dropdowns { @@ -696,9 +796,8 @@ body > [data-popper-placement] { .icon-button { flex: 0 0 auto; - color: var(--clr-text-on-media); - background: var(--clr-bg-media); - backdrop-filter: $backdrop-blur-filter; + color: $white; + background: rgba(0, 0, 0, 75%); border-radius: 6px; font-size: 12px; line-height: 16px; @@ -731,8 +830,8 @@ body > [data-popper-placement] { padding: 8px; .icon-button.active { - color: var(--clr-text-on-warning-strong); - background: var(--clr-bg-warning-strong); + color: #ffbe2e; + background: rgba(0, 0, 0, 75%); } } } @@ -781,21 +880,22 @@ body > [data-popper-placement] { .icon-button { box-sizing: content-box; - color: var(--clr-text-accent); + color: $highlight-text-color; &:hover, &:focus, &:active { - color: var(--clr-text-accent); + color: $highlight-text-color; } &.disabled { - color: var(--clr-text-disabled); + color: $highlight-text-color; + opacity: 0.5; } &.active { - background: var(--clr-bg-accent-strong); - color: var(--clr-text-on-accent-strong); + background: $ui-highlight-color; + color: $primary-text-color; } } } @@ -819,7 +919,7 @@ body > [data-popper-placement] { .poll__input { width: 17px; height: 17px; - border-color: var(--clr-text-secondary); + border-color: $darker-text-color; } &__footer { @@ -832,7 +932,7 @@ body > [data-popper-placement] { &__sep { width: 1px; height: 22px; - background: var(--clr-border-primary); + background: lighten($ui-base-color, 8%); flex: 0 0 auto; } } @@ -850,7 +950,7 @@ body > [data-popper-placement] { font-weight: 500; line-height: 16px; letter-spacing: 0.5px; - color: var(--clr-text-secondary); + color: $darker-text-color; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -866,8 +966,8 @@ body > [data-popper-placement] { font-weight: 500; line-height: 20px; letter-spacing: 0.1px; - color: var(--clr-text-accent); - background-color: var(--clr-bg-secondary-solid); + color: $highlight-text-color; + background-color: var(--input-background-color); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -878,6 +978,7 @@ body > [data-popper-placement] { .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 { @@ -897,10 +998,10 @@ body > [data-popper-placement] { display: flex; align-items: center; gap: 4px; - color: var(--clr-text-accent); background: transparent; - border: 1px solid var(--clr-text-accent); + color: $highlight-text-color; border-radius: 6px; + border: 1px solid $highlight-text-color; padding: 4px 8px; font-size: 13px; line-height: normal; @@ -911,8 +1012,9 @@ body > [data-popper-placement] { &[disabled] { cursor: default; - color: var(--clr-text-disabled); - border-color: var(--clr-text-disabled); + color: $highlight-text-color; + border-color: $highlight-text-color; + opacity: 0.5; } .icon { @@ -929,19 +1031,18 @@ body > [data-popper-placement] { } &.active { - color: var(--clr-text-on-accent-strong); - border-color: var(--clr-bg-accent-strong); - background: var(--clr-bg-accent-strong); + background: $ui-highlight-color; + border-color: $ui-highlight-color; + color: $primary-text-color; } &.warning { - color: var(--clr-text-warning); - border-color: var(--clr-text-warning); + border-color: var(--goldenrod-2); + color: var(--goldenrod-2); &.active { - color: var(--clr-text-on-warning-strong); - border-color: var(--clr-bg-warning-strong); - background-color: var(--clr-bg-warning-strong); + background-color: var(--goldenrod-2); + color: var(--indigo-1); } } } @@ -952,12 +1053,12 @@ body > [data-popper-placement] { font-size: 14px; font-weight: 400; line-height: normal; - color: var(--clr-text-secondary); + color: $darker-text-color; flex: 1 0 auto; text-align: end; &.character-counter--over { - color: var(--clr-text-error); + color: $error-red; } } @@ -973,7 +1074,7 @@ body > [data-popper-placement] { p { font-size: 15px; line-height: 22px; - color: var(--clr-text-primary); + color: $secondary-text-color; margin-bottom: 20px; strong { @@ -981,7 +1082,7 @@ body > [data-popper-placement] { } a { - color: var(--clr-text-primary); + color: $secondary-text-color; text-decoration: none; unicode-bidi: isolate; @@ -1028,7 +1129,7 @@ body > [data-popper-placement] { font-size: 15px; line-height: 22px; padding-top: 2px; - color: var(--clr-text-primary); + color: $primary-text-color; &:focus { outline: 0; @@ -1059,7 +1160,7 @@ body > [data-popper-placement] { } a { - color: var(--clr-text-status-links); + color: $secondary-text-color; text-decoration: none; unicode-bidi: isolate; @@ -1079,7 +1180,7 @@ body > [data-popper-placement] { } a.unhandled-link { - color: var(--clr-text-accent); + color: $highlight-text-color; } .status__content__text { @@ -1135,7 +1236,7 @@ body > [data-popper-placement] { inset-inline-start: 50%; top: 4px; transform: translateX(-50%); - background: var(--clr-border-primary); + background: lighten($ui-base-color, 8%); width: 2px; height: calc(100% + 32px - 8px); // Account for gap to next element } @@ -1152,12 +1253,12 @@ body > [data-popper-placement] { padding: 0; max-height: 4 * 20px; overflow: hidden; - color: var(--clr-text-secondary); + color: $darker-text-color; } &__attachments { margin-top: 4px; - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 12px; line-height: 16px; display: flex; @@ -1173,11 +1274,11 @@ body > [data-popper-placement] { .edit-indicator { border-radius: 4px 4px 0 0; - background: var(--clr-bg-tertiary); + background: lighten($ui-base-color, 4%); padding: 12px; overflow-y: auto; flex: 0 0 auto; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 0.5px solid lighten($ui-base-color, 8%); display: flex; flex-direction: column; gap: 4px; @@ -1186,7 +1287,7 @@ body > [data-popper-placement] { display: flex; justify-content: space-between; align-items: center; - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 12px; line-height: 16px; overflow: hidden; @@ -1219,7 +1320,7 @@ body > [data-popper-placement] { } &__content { - color: var(--clr-text-primary); + color: $secondary-text-color; font-size: 14px; line-height: 20px; letter-spacing: 0.25px; @@ -1232,12 +1333,12 @@ body > [data-popper-placement] { overflow: hidden; a { - color: var(--clr-text-accent); + color: $highlight-text-color; } } &__attachments { - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 12px; line-height: 16px; opacity: 0.75; @@ -1281,7 +1382,7 @@ body > [data-popper-placement] { } a { - color: var(--clr-text-primary); + color: $secondary-text-color; text-decoration: none; &:hover { @@ -1299,7 +1400,7 @@ body > [data-popper-placement] { } &.unhandled-link { - color: var(--clr-text-accent); + color: $highlight-text-color; } } } @@ -1314,7 +1415,7 @@ body > [data-popper-placement] { align-items: center; font-size: 15px; line-height: 22px; - color: var(--clr-text-accent); + color: $highlight-text-color; border: 0; background: transparent; padding: 0; @@ -1346,11 +1447,11 @@ body > [data-popper-placement] { line-height: 22px; display: flex; justify-content: space-between; - color: var(--clr-text-tertiary); + color: $dark-text-color; } .status__wrapper--filtered { - color: var(--clr-text-tertiary); + color: $dark-text-color; border: 0; font-size: inherit; text-align: center; @@ -1360,11 +1461,11 @@ body > [data-popper-placement] { box-sizing: border-box; width: 100%; clear: both; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &__button { display: inline; - color: var(--clr-text-accent); + color: lighten($ui-highlight-color, 8%); border: 0; background: transparent; padding: 0; @@ -1380,16 +1481,16 @@ body > [data-popper-placement] { .focusable { &:focus-visible { - outline: 2px solid var(--clr-text-accent); + outline: 2px solid $ui-button-focus-outline-color; outline-offset: -2px; - background: var(--clr-bg-accent-subtle); + background: color.change($ui-highlight-color, $alpha: 0.05); } } .status { padding: 16px; min-height: 54px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); cursor: auto; opacity: 1; animation: fade 150ms linear; @@ -1460,14 +1561,12 @@ body > [data-popper-placement] { } &--first-in-thread { - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); } &__line { - --thread-line-color: var(--clr-border-primary); - height: 16px - 4px; - border-inline-start: 2px solid var(--thread-line-color); + border-inline-start: 2px solid lighten($ui-base-color, 8%); width: 0; position: absolute; top: 0; @@ -1484,7 +1583,7 @@ body > [data-popper-placement] { top: 16px - 4px; height: 46px + 4px + 4px; width: 2px; - background: var(--thread-line-color); + background: $ui-base-color; inset-inline-start: -2px; } } @@ -1503,7 +1602,7 @@ body > [data-popper-placement] { content: ''; position: absolute; inset: 0; - background: var(--clr-bg-accent-subtle); + background: rgb(from $ui-highlight-color r g b / 20%); opacity: 0; animation: fade 0.7s reverse both 0.3s; pointer-events: none; @@ -1517,11 +1616,11 @@ body > [data-popper-placement] { height: 40px; order: 2; flex: 0 0 auto; - color: var(--clr-text-secondary); + color: $dark-text-color; } .notification__relative_time { - color: var(--clr-text-tertiary); + color: $dark-text-color; float: right; font-size: 14px; padding-bottom: 1px; @@ -1538,7 +1637,7 @@ body > [data-popper-placement] { } .status__display-name { - color: var(--clr-text-secondary); + color: $dark-text-color; } .status__info .status__display-name { @@ -1588,7 +1687,7 @@ body > [data-popper-placement] { padding: 0 10px; .detailed-status__display-name { - color: var(--clr-text-tertiary); + color: $dark-text-color; span { display: inline; @@ -1625,7 +1724,7 @@ body > [data-popper-placement] { font-size: 15px; line-height: 22px; font-weight: 500; - color: var(--clr-text-secondary); + color: $dark-text-color; &__icon { display: flex; @@ -1651,11 +1750,22 @@ body > [data-popper-placement] { } } +.status__wrapper-direct, +.notification-ungrouped--direct, +.notification-group--direct, +.notification-group--annual-report { + background: color.change($ui-highlight-color, $alpha: 0.05); + + &:focus { + background: color.change($ui-highlight-color, $alpha: 0.1); + } +} + .status__wrapper-direct, .notification-ungrouped--direct { .status__prepend, .notification-ungrouped__header { - color: var(--clr-text-accent); + color: $highlight-text-color; } } @@ -1677,7 +1787,7 @@ body > [data-popper-placement] { .detailed-status { padding: 16px; - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); .status__content { font-size: 19px; @@ -1712,7 +1822,7 @@ body > [data-popper-placement] { .logo { width: 40px; height: 40px; - color: var(--clr-text-tertiary); + color: $dark-text-color; } } @@ -1739,12 +1849,12 @@ body > [data-popper-placement] { .detailed-status__meta { margin-top: 24px; - color: var(--clr-text-tertiary); + color: $dark-text-color; font-size: 14px; line-height: 18px; &__line { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); padding: 8px 0; display: flex; align-items: center; @@ -1766,14 +1876,14 @@ body > [data-popper-placement] { } .animated-number { - color: var(--clr-text-primary); + color: $secondary-text-color; font-weight: 500; } } .detailed-status__action-bar { - border-top: 1px solid var(--clr-border-primary); - border-bottom: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--background-border-color); display: flex; flex-direction: row; padding: 10px 0; @@ -1782,11 +1892,30 @@ body > [data-popper-placement] { .detailed-status__wrapper-direct { .detailed-status, .detailed-status__action-bar { - background: var(--clr-bg-accent-subtle); + 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% + ); } .status__prepend { - color: var(--clr-text-accent); + color: $highlight-text-color; } } @@ -1797,12 +1926,11 @@ body > [data-popper-placement] { --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(--clr-text-primary); - border: 1px solid var(--clr-border-primary); + color: var(--nested-card-text); + border: 1px solid var(--surface-border-color); } .status__quote--error { @@ -1836,8 +1964,8 @@ body > [data-popper-placement] { font-weight: 400; line-height: 20px; letter-spacing: 0.25px; - color: var(--clr-text-secondary); - background: var(--clr-bg-accent-subtle); + color: $darker-text-color; + background: var(--surface-variant-background-color); border-radius: 8px; cursor: default; } @@ -1901,14 +2029,14 @@ body > [data-popper-placement] { .domain { padding: 16px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); display: flex; align-items: center; gap: 8px; &__domain-name { flex: 1 1 auto; - color: var(--clr-text-primary); + color: $primary-text-color; font-size: 15px; line-height: 21px; font-weight: 500; @@ -1917,14 +2045,14 @@ body > [data-popper-placement] { .account { padding: 16px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); .account__display-name { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; - color: var(--clr-text-secondary); + color: $darker-text-color; overflow: hidden; text-decoration: none; font-size: 14px; @@ -1935,7 +2063,6 @@ body > [data-popper-placement] { .display-name strong { display: inline; - color: var(--clr-text-primary); } } @@ -1960,24 +2087,24 @@ body > [data-popper-placement] { &__domain-pill { display: inline-flex; - background: var(--clr-bg-accent-subtle); + background: color.change($highlight-text-color, $alpha: 0.2); border-radius: 4px; border: 0; - color: var(--clr-text-accent); + color: $highlight-text-color; font-weight: 500; font-size: 12px; line-height: 16px; padding: 4px 8px; &.active { - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + color: $white; + background: $ui-highlight-color; } &__popout { - background: var(--clr-bg-elevated); + background: var(--dropdown-background-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--dropdown-border-color); box-shadow: var(--dropdown-shadow); max-width: 320px; padding: 16px; @@ -1987,7 +2114,7 @@ body > [data-popper-placement] { gap: 24px; font-size: 14px; line-height: 20px; - color: var(--clr-text-secondary); + color: $darker-text-color; .link-button { display: inline; @@ -2003,8 +2130,8 @@ body > [data-popper-placement] { &__icon { width: 40px; height: 40px; - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + background: $ui-highlight-color; + color: $white; display: flex; align-items: center; justify-content: center; @@ -2015,15 +2142,15 @@ body > [data-popper-placement] { h3 { font-size: 17px; line-height: 22px; - color: var(--clr-text-primary); + color: $primary-text-color; } } &__handle { - border: 2px dashed var(--clr-border-on-accent-subtle); - background: var(--clr-bg-accent-subtle); + border: 2px dashed $highlight-text-color; + background: color.change($highlight-text-color, $alpha: 0.1); padding: 12px 8px; - color: var(--clr-text-accent); + color: $highlight-text-color; border-radius: 4px; &__label { @@ -2059,14 +2186,14 @@ body > [data-popper-placement] { align-items: center; justify-content: center; flex-shrink: 0; - color: var(--clr-text-accent); + color: $highlight-text-color; } h6 { font-size: 14px; line-height: 20px; font-weight: 500; - color: var(--clr-text-primary); + color: $primary-text-color; } } } @@ -2082,10 +2209,10 @@ body > [data-popper-placement] { -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top: 10px; - color: var(--clr-text-secondary); + color: $darker-text-color; &--missing { - color: var(--clr-text-tertiary); + color: $dark-text-color; } p { @@ -2149,7 +2276,7 @@ body > [data-popper-placement] { display: block; position: relative; border-radius: var(--avatar-border-radius); - background: var(--clr-bg-tertiary); + background: var(--surface-background-color); flex-shrink: 0; img { @@ -2161,7 +2288,7 @@ body > [data-popper-placement] { } &--loading { - background-color: var(--clr-bg-tertiary); + background-color: var(--surface-background-color); } &--inline { @@ -2192,8 +2319,8 @@ body > [data-popper-placement] { top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); - color: var(--clr-text-primary); - text-shadow: 1px 1px 2px var(--clr-shadow-primary-base); + color: $primary-text-color; + text-shadow: 1px 1px 2px $base-shadow-color; font-weight: 700; font-size: 15px; } @@ -2212,11 +2339,11 @@ body > [data-popper-placement] { 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(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + background-color: $ui-button-background-color; + color: $white; border-width: 1px; border-style: solid; - border-color: var(--clr-bg-primary); + border-color: var(--background-color); font-size: 11px; font-weight: 500; text-align: center; @@ -2254,7 +2381,7 @@ a .account__avatar { } .account__avatar { - box-shadow: 0 0 0 2px var(--clr-bg-primary); + box-shadow: 0 0 0 2px var(--background-color); } } @@ -2279,7 +2406,7 @@ a .account__avatar { .account__relationship, .explore-suggestions-card { .icon-button { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px; box-sizing: content-box; padding: 5px; @@ -2319,7 +2446,7 @@ a .account__avatar { .status__display-name, .account__display-name { .display-name strong { - color: var(--clr-text-primary); + color: $primary-text-color; } } @@ -2350,7 +2477,7 @@ a.account__display-name { } .detailed-status__display-name { - color: var(--clr-text-secondary); + color: $darker-text-color; display: flex; align-items: center; gap: 10px; @@ -2367,7 +2494,7 @@ a.account__display-name { } strong { - color: var(--clr-text-primary); + color: $primary-text-color; } } @@ -2375,11 +2502,11 @@ a.account__display-name { .status__content, .status__content p, .status__content a { - color: var(--clr-text-tertiary); + color: $dark-text-color; } .status__display-name strong { - color: var(--clr-text-tertiary); + color: $dark-text-color; } .status__avatar { @@ -2389,7 +2516,7 @@ a.account__display-name { .notification__report { padding: 16px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); display: flex; gap: 10px; @@ -2402,7 +2529,7 @@ a.account__display-name { display: flex; justify-content: space-between; align-items: center; - color: var(--clr-text-secondary); + color: $darker-text-color; gap: 10px; font-size: 15px; line-height: 22px; @@ -2425,7 +2552,7 @@ a.account__display-name { } .notification-group--link { - color: var(--clr-text-primary); + color: $secondary-text-color; text-decoration: none; .notification-group__main { @@ -2454,7 +2581,7 @@ a.account__display-name { padding: 16px; padding-bottom: 0; cursor: default; - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 15px; line-height: 22px; font-weight: 500; @@ -2463,13 +2590,13 @@ a.account__display-name { gap: 10px; .icon { - color: var(--clr-text-accent); + color: $highlight-text-color; width: 18px; height: 18px; } .icon-star { - color: var(--clr-text-favourite-highlight); + color: $gold-star; } > span { @@ -2480,11 +2607,11 @@ a.account__display-name { } .icon-button.star-icon.active { - color: var(--clr-text-favourite-highlight); + color: $gold-star; } .icon-button.bookmark-icon.active { - color: var(--clr-text-bookmark-highlight); + color: $red-bookmark; } .no-reduce-motion .icon-button.star-icon { @@ -2554,7 +2681,7 @@ a.account__display-name { max-height: $media-modal-media-max-height; width: auto; height: auto; - outline: 1px solid var(--clr-border-media); + outline: 1px solid var(--media-outline-color); outline-offset: -1px; border-radius: 8px; touch-action: none; @@ -2583,7 +2710,7 @@ a.account__display-name { max-height: $media-modal-media-max-height; position: absolute; z-index: 1; - outline: 1px solid var(--clr-border-media); + outline: 1px solid var(--media-outline-color); outline-offset: -1px; border-radius: 8px; overflow: hidden; @@ -2634,7 +2761,7 @@ a.account__display-name { .icon-button { padding: 8px; - color: var(--clr-text-primary); + color: $secondary-text-color; } .icon-button .icon { @@ -2671,15 +2798,15 @@ a.account__display-name { } .dropdown-menu__separator { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--dropdown-border-color); margin: 5px 0; height: 0; } .dropdown-menu { - background: var(--clr-bg-elevated); + background: var(--dropdown-background-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--dropdown-border-color); padding: 4px; border-radius: 4px; box-shadow: var(--dropdown-shadow); @@ -2713,13 +2840,13 @@ a.account__display-name { &__container { &__header { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--dropdown-border-color); padding: 10px 14px; padding-bottom: 14px; margin-bottom: 4px; font-size: 13px; line-height: 18px; - color: var(--clr-text-secondary); + color: $darker-text-color; } &__list { @@ -2763,11 +2890,11 @@ a.account__display-name { display: block; &--dangerous { - color: var(--clr-text-error); + color: $error-value-color; } &--highlighted { - color: var(--clr-text-accent); + color: $highlight-text-color; } &-content { @@ -2801,7 +2928,7 @@ a.account__display-name { &:hover, &:active { &:not(:disabled, [aria-disabled='true']) { - background: var(--clr-bg-secondary); + background: var(--dropdown-border-color); outline: 0; } } @@ -2809,12 +2936,12 @@ a.account__display-name { button:disabled, button[aria-disabled='true'] { - color: var(--clr-text-disabled); + color: $dark-text-color; cursor: default; &:focus { - color: rgb(from var(--clr-text-disabled) r g b / 70%); - background: var(--clr-bg-disabled); + color: rgb(from $dark-text-color r g b / 70%); + background: var(--dropdown-border-color); outline: 0; } } @@ -2893,8 +3020,6 @@ a.account__display-name { flex-direction: column; contain: inline-size layout paint style; container: column / inline-size; - color: var(--clr-text-primary); - background-color: var(--clr-bg-primary); @media screen and (min-width: $no-gap-breakpoint) { max-width: 600px; @@ -2913,9 +3038,9 @@ a.account__display-name { width: 100%; gap: 8px; padding-bottom: env(safe-area-inset-bottom); - background: var(--clr-bg-primary); + background: var(--background-color); backdrop-filter: $backdrop-blur-filter; - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); box-sizing: border-box; .layout-multiple-columns & { @@ -2958,7 +3083,7 @@ a.account__display-name { color: inherit; &.active { - color: var(--clr-text-accent); + color: $highlight-text-color; } &:focus { @@ -2966,22 +3091,22 @@ a.account__display-name { } &:focus-visible { - border-top-color: var(--clr-text-accent); + border-top-color: $ui-button-focus-outline-color; border-radius: 0; } } } .tabs-bar__wrapper { - background: var(--clr-bg-primary); + background: var(--background-color); backdrop-filter: $backdrop-blur-filter; position: sticky; top: 0; z-index: 2; - border-top: 0; + padding-top: 0; @media screen and (min-width: $no-gap-breakpoint) { - border-top: 10px solid var(--clr-bg-ambient); + padding-top: 10px; } } @@ -3009,13 +3134,13 @@ a.account__display-name { flex-direction: column; > .scrollable { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; border-radius: 0 0 4px 4px; &.about, &.privacy-policy { - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); border-radius: 4px; @media screen and (max-width: $no-gap-breakpoint) { @@ -3083,7 +3208,7 @@ a.account__display-name { display: flex; flex: 1 1 auto; padding: 13px 3px 11px; - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; text-align: center; font-size: 16px; @@ -3215,7 +3340,7 @@ a.account__display-name { .navigation-panel { margin: 0; - border-inline-start: 1px solid var(--clr-border-primary); + border-inline-start: 1px solid var(--background-border-color); height: 100dvh; } @@ -3265,7 +3390,7 @@ a.account__display-name { .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { pointer-events: auto; - background: var(--clr-bg-primary); + background: var(--background-color); position: fixed; width: 284px + 70px; inset-inline-end: -70px; @@ -3296,7 +3421,7 @@ a.account__display-name { .columns-area__panels__pane--overlay { pointer-events: auto; - background: rgb(from var(--clr-bg-overlay) r g b / 50%); + background: color.change($base-overlay-background, $alpha: 0.5); z-index: 3; .columns-area__panels__pane__inner { @@ -3315,7 +3440,7 @@ a.account__display-name { gap: 8px; display: flex; flex-direction: column; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &:last-child { border-bottom: 0; @@ -3324,7 +3449,7 @@ a.account__display-name { &__source { font-size: 13px; line-height: 16px; - color: var(--clr-text-tertiary); + color: $dark-text-color; @container (width >= 400px) { padding-inline-start: 60px; @@ -3365,14 +3490,14 @@ a.account__display-name { .display-name { font-size: 15px; line-height: 20px; - color: var(--clr-text-primary); + color: $secondary-text-color; strong { font-weight: 700; } &__account { - color: var(--clr-text-secondary); + color: $darker-text-color; display: block; } } @@ -3410,14 +3535,14 @@ a.account__display-name { position: absolute; inset-inline-start: 9px; top: -13px; - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); - border: 2px solid var(--clr-bg-primary); + background: $ui-highlight-color; + border: 2px solid var(--background-color); padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 500; line-height: 14px; + color: $primary-text-color; } &__issue-badge { @@ -3425,7 +3550,7 @@ a.account__display-name { inset-inline-start: 11px; bottom: 1px; display: block; - background: var(--clr-text-error); + background: $error-red; border-radius: 50%; width: 0.625rem; height: 0.625rem; @@ -3433,7 +3558,7 @@ a.account__display-name { } .column-link--transparent .icon-with-badge__badge { - border-color: var(--clr-bg-primary); + border-color: var(--background-color); } .column-title { @@ -3451,7 +3576,7 @@ a.account__display-name { font-size: 16px; line-height: 24px; font-weight: 400; - color: var(--clr-text-secondary); + color: $darker-text-color; } @media screen and (width >= 600px) { @@ -3460,11 +3585,11 @@ a.account__display-name { } .copy-paste-text { - background: var(--clr-bg-secondary); + background: lighten($ui-base-color, 4%); border-radius: 8px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); padding: 16px; - color: var(--clr-text-primary); + color: $primary-text-color; font-size: 15px; line-height: 22px; display: flex; @@ -3477,11 +3602,11 @@ a.account__display-name { &.focused { transition: none; outline: 0; - border-color: var(--clr-text-accent); + border-color: $highlight-text-color; } &.copied { - border-color: var(--clr-text-success); + border-color: $valid-value-color; transition: none; } @@ -3508,7 +3633,7 @@ a.account__display-name { margin-top: -20px; .app-form__avatar-input { - border: 2px solid var(--clr-bg-primary); + border: 2px solid var(--background-color); position: absolute; inset-inline-start: -2px; bottom: -40px; @@ -3532,7 +3657,6 @@ a.account__display-name { flex-direction: column; height: calc(100% - 10px); overflow-y: auto; - scrollbar-width: thin; .compose-form { flex: 1 1 auto; @@ -3551,7 +3675,6 @@ a.account__display-name { flex: 1 1 auto; min-height: 0; overflow-y: auto; - scrollbar-width: thin; } &__list-panel { @@ -3563,7 +3686,7 @@ a.account__display-name { &__sep { width: 0; height: 24px; - border-left: 1px solid var(--clr-border-primary); + border-left: 1px solid var(--background-border-color); } .column-link { @@ -3663,7 +3786,7 @@ a.account__display-name { flex: 0 0 auto; border: 0; background: transparent; - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); margin: 10px 0; } @@ -3680,14 +3803,14 @@ a.account__display-name { overflow: hidden; display: flex; border-radius: 4px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); } .drawer__inner { position: absolute; top: 0; inset-inline-start: 0; - background: var(--clr-bg-primary); + background: var(--background-color); box-sizing: border-box; padding: 0; display: flex; @@ -3700,12 +3823,12 @@ a.account__display-name { } .drawer__inner__mastodon { - position: relative; - background: var(--clr-bg-primary); + background: var(--background-color) + url('data:image/svg+xml;utf8,') + no-repeat bottom / 100% auto; flex: 1; min-height: 47px; display: none; - contain: content; > img { display: block; @@ -3725,7 +3848,7 @@ a.account__display-name { .drawer__header { flex: 0 0 auto; font-size: 16px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); margin-bottom: 10px; display: flex; flex-direction: row; @@ -3735,7 +3858,7 @@ a.account__display-name { a:hover, a:focus, a:active { - color: var(--clr-text-primary); + color: $primary-text-color; } } @@ -3744,7 +3867,6 @@ a.account__display-name { overflow-x: hidden; flex: 1 1 auto; -webkit-overflow-scrolling: touch; - scrollbar-width: thin; &.optionally-scrollable { overflow-y: auto; @@ -3782,9 +3904,9 @@ a.account__display-name { box-sizing: border-box; width: 100%; background: transparent; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px 4px 0 0; - color: var(--clr-text-accent); + color: $highlight-text-color; cursor: pointer; flex: 0 0 auto; font-size: 16px; @@ -3810,7 +3932,7 @@ a.account__display-name { background: transparent; border: 0; font-family: inherit; - color: var(--clr-text-accent); + color: $highlight-text-color; cursor: pointer; white-space: nowrap; font-size: 16px; @@ -3836,19 +3958,13 @@ 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; @@ -3872,25 +3988,15 @@ a.account__display-name { height: 20px; padding: 0; border-radius: 10px; - background-color: rgb(from var(--clr-bg-accent-subtle) r g b / 50%); - border: 1px solid rgb(from var(--clr-text-accent) r g b / 50%); - box-sizing: border-box; + background-color: $ui-primary-color; +} - .react-toggle:hover:not(.react-toggle--disabled) & { - background-color: rgb( - from var(--clr-bg-accent-subtle) r g b / - calc(50% + var(--clr-bg-accent-subtle-strength)) - ); - } +.react-toggle--focus { + outline: $ui-button-focus-outline; +} - .react-toggle--checked & { - background-color: var(--clr-bg-accent-strong); - border-color: var(--clr-bg-accent-strong); - } - - .react-toggle--checked:not(.react-toggle--disabled):hover & { - background-color: var(--clr-bg-accent-strong-highlighted); - } +.react-toggle--checked .react-toggle-track { + background-color: $ui-highlight-color; } .react-toggle-track-check, @@ -3905,21 +4011,30 @@ a.account__display-name { width: 16px; height: 16px; border-radius: 50%; - background-color: var(--clr-text-on-accent-strong); + background-color: $ui-button-color; 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(--clr-bg-accent-strong); - } +.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%); } .follow_requests-unlocked_explanation, .switch-to-advanced { - color: var(--clr-text-secondary); - background-color: var(--clr-bg-secondary); + color: $light-text-color; + background-color: $ui-base-color; padding: 15px; border-radius: 4px; margin-top: 4px; @@ -3928,7 +4043,7 @@ a.account__display-name { line-height: 18px; a { - color: var(--clr-text-accent); + color: $ui-button-tertiary-color; font-weight: bold; } } @@ -3944,11 +4059,7 @@ a.account__display-name { text-decoration: none; overflow: hidden; white-space: nowrap; - color: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-secondary) - ); + color: $secondary-text-color; background: transparent; border: 0; border-left: 4px solid transparent; @@ -3957,11 +4068,11 @@ a.account__display-name { &:hover, &:focus, &:active { - color: var(--clr-text-primary); + color: $primary-text-color; } &.active { - color: var(--clr-text-accent); + color: $highlight-text-color; } &:focus { @@ -3969,7 +4080,7 @@ a.account__display-name { } &:focus-visible { - border-color: var(--clr-text-accent); + border-color: $ui-button-focus-outline-color; border-radius: 0; } @@ -3991,14 +4102,14 @@ a.account__display-name { font-size: 12px; line-height: 19px; font-weight: 500; - background: var(--clr-bg-primary); + background: $ui-base-color; padding: 4px 8px; margin: -6px 10px; } .column-subheading { - background: var(--clr-bg-secondary); - color: var(--clr-text-secondary); + background: var(--surface-background-color); + color: $darker-text-color; padding: 8px 20px; font-size: 12px; font-weight: 500; @@ -4015,9 +4126,9 @@ a.account__display-name { } .getting-started { - color: var(--clr-text-tertiary); + color: $dark-text-color; overflow: auto; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; &__trends { @@ -4027,14 +4138,14 @@ a.account__display-name { margin-top: 10px; h4 { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); padding: 10px; font-size: 12px; text-transform: uppercase; font-weight: 500; a { - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; } } @@ -4044,7 +4155,7 @@ a.account__display-name { padding: 10px; &__current { - color: var(--clr-text-secondary); + color: $darker-text-color; } } } @@ -4065,6 +4176,9 @@ 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%); } } @@ -4073,11 +4187,11 @@ a.account__display-name { align-items: center; position: relative; font-size: 14px; - color: var(--clr-text-secondary); + color: $darker-text-color; margin-top: 14px; text-decoration: none; overflow: hidden; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 8px; contain: inline-size layout paint style; @@ -4097,7 +4211,7 @@ a.account__display-name { cursor: pointer; & > div { - background: rgb(from var(--clr-shadow-primary-base) r g b / 60%); + background: color.change($base-shadow-color, $alpha: 0.6); border-radius: 8px; padding: 12px 9px; backdrop-filter: $backdrop-blur-filter; @@ -4110,7 +4224,7 @@ a.account__display-name { button, a { display: inline; - color: var(--clr-text-primary); + color: $secondary-text-color; background: transparent; border: 0; padding: 0 8px; @@ -4121,7 +4235,7 @@ a.account__display-name { &:hover, &:active, &:focus { - color: var(--clr-text-primary); + color: $primary-text-color; } } @@ -4143,7 +4257,7 @@ a.status-card { .status-card__host, .status-card__author, .status-card__description { - color: var(--clr-text-accent); + color: $highlight-text-color; } } } @@ -4159,7 +4273,7 @@ a.status-card { .status-card__host, .status-card__author, .status-card__description { - color: var(--clr-text-accent); + color: $highlight-text-color; } } } @@ -4189,7 +4303,7 @@ a.status-card { font-weight: 700; font-size: 19px; line-height: 24px; - color: var(--clr-text-primary); + color: $primary-text-color; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -4224,7 +4338,7 @@ a.status-card { display: block; margin-top: 8px; font-size: 14px; - color: var(--clr-text-primary); + color: $primary-text-color; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -4247,7 +4361,7 @@ a.status-card { flex: 0 0 auto; width: 120px; aspect-ratio: 1; - background: var(--clr-bg-secondary); + background: lighten($ui-base-color, 8%); position: relative; & > .icon { @@ -4281,7 +4395,7 @@ a.status-card { top: 0; inset-inline-start: 0; z-index: 0; - background: var(--clr-bg-primary); + background: $base-overlay-background; &--hidden { display: none; @@ -4330,7 +4444,7 @@ a.status-card { display: flex; align-items: center; justify-content: center; - color: var(--clr-text-primary); + color: $dark-text-color; background-color: transparent; border: 0; font-size: inherit; @@ -4341,11 +4455,11 @@ a.status-card { text-decoration: none; &:hover { - background: var(--clr-bg-secondary); + background: var(--on-surface-color); } &:focus-visible { - outline: 2px solid var(--clr-text-accent); + outline: 2px solid $ui-button-focus-outline-color; outline-offset: -2px; } @@ -4356,12 +4470,12 @@ a.status-card { } .load-gap { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); } .timeline-hint { text-align: center; - color: var(--clr-text-secondary); + color: $dark-text-color; padding: 16px; box-sizing: border-box; width: 100%; @@ -4373,25 +4487,25 @@ a.status-card { } a { - color: var(--clr-text-accent); + color: $highlight-text-color; text-decoration: none; &:hover, &:focus, &:active { text-decoration: underline; - color: var(--clr-text-accent-subtle); + color: lighten($highlight-text-color, 4%); } } &--with-descendants { - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); } } .regeneration-indicator { - color: var(--clr-text-secondary); - border: 1px solid var(--clr-border-primary); + color: $darker-text-color; + border: 1px solid var(--background-border-color); border-top: 0; cursor: default; display: flex; @@ -4417,7 +4531,7 @@ a.status-card { font-weight: 500; display: block; margin-bottom: 10px; - color: var(--clr-text-secondary); + color: $darker-text-color; } span { @@ -4432,7 +4546,7 @@ a.status-card { z-index: 1; &.active { - box-shadow: 0 1px 0 var(--clr-bg-accent-subtle); + box-shadow: 0 1px 0 color.change($highlight-text-color, $alpha: 0.3); &::before { display: block; @@ -4448,8 +4562,8 @@ a.status-card { z-index: 1; background: radial-gradient( ellipse, - rgb(from var(--clr-bg-accent-subtle-base) r g b / 23%) 0%, - transparent 60% + color.change($ui-highlight-color, $alpha: 0.23) 0%, + color.change($ui-highlight-color, $alpha: 0) 60% ); } } @@ -4463,7 +4577,7 @@ a.status-card { .column-header__select-row { border-width: 0 1px 1px; border-style: solid; - border-color: var(--clr-border-primary); + border-color: var(--background-border-color); padding: 15px; display: flex; align-items: center; @@ -4479,12 +4593,12 @@ a.status-card { &__mode-button { margin-left: auto; - color: var(--clr-text-accent); + color: $highlight-text-color; font-weight: bold; font-size: 14px; &:hover { - color: var(--clr-text-accent-subtle); + color: lighten($highlight-text-color, 6%); } } } @@ -4492,7 +4606,7 @@ a.status-card { .column-header { display: flex; font-size: 16px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px 4px 0 0; flex: 0 0 auto; cursor: pointer; @@ -4518,7 +4632,7 @@ a.status-card { flex: 1; &:focus-visible { - outline: var(--outline-focus-default); + outline: $ui-button-icon-focus-outline; } .logo { @@ -4532,18 +4646,18 @@ a.status-card { .column-header__back-button { flex: 1; - color: var(--clr-text-accent); + color: $highlight-text-color; &.compact { flex: 0 0 auto; - color: var(--clr-text-primary); + color: $primary-text-color; } } &.active { .column-header__icon { - color: var(--clr-text-accent); - text-shadow: 0 0 10px var(--clr-bg-accent-subtle); + color: $highlight-text-color; + text-shadow: 0 0 10px color.change($highlight-text-color, $alpha: 0.4); } } @@ -4583,7 +4697,7 @@ a.status-card { justify-content: center; align-items: center; border: 0; - color: var(--clr-text-primary); + color: $darker-text-color; background: transparent; cursor: pointer; font-size: 16px; @@ -4594,23 +4708,23 @@ a.status-card { } &:hover { - color: var(--clr-text-secondary); + color: lighten($darker-text-color, 4%); } &:focus-visible { - outline: var(--outline-focus-default); + outline: $ui-button-focus-outline; } &.active { - color: var(--clr-text-accent); + color: $primary-text-color; &:hover { - color: var(--clr-text-accent); + color: $primary-text-color; } } &:disabled { - color: var(--clr-text-disabled); + color: $dark-text-color; cursor: default; } } @@ -4623,16 +4737,16 @@ a.status-card { max-height: 70vh; overflow: hidden; overflow-y: auto; - color: var(--clr-text-secondary); + color: $darker-text-color; transition: max-height 150ms ease-in-out, opacity 300ms linear; opacity: 1; z-index: 1; position: relative; - border-left: 1px solid var(--clr-border-primary); - border-right: 1px solid var(--clr-border-primary); - border-bottom: 1px solid var(--clr-border-primary); + border-left: 1px solid var(--background-border-color); + border-right: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--background-border-color); @media screen and (max-width: $no-gap-breakpoint) { border-left: 0; @@ -4653,7 +4767,7 @@ a.status-card { height: 0; background: transparent; border: 0; - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); margin: 10px 0; } } @@ -4665,7 +4779,7 @@ a.status-card { .column-header__setting-btn { &:hover, &:focus { - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: underline; } } @@ -4706,15 +4820,16 @@ a.status-card { } .column-header__issue-btn { - color: var(--clr-text-error); + color: $warning-red; &:hover { + color: $error-red; text-decoration: underline; } } .loading-indicator { - color: var(--clr-text-secondary); + color: $dark-text-color; font-size: 12px; font-weight: 400; text-transform: uppercase; @@ -4748,18 +4863,18 @@ a.status-card { } .icon-button .loading-indicator .circular-progress { - color: var(--clr-text-tertiary); + color: lighten($ui-base-color, 26%); width: 12px; height: 12px; margin: 6px; } .load-more .loading-indicator .circular-progress { - color: var(--clr-text-tertiary); + color: lighten($ui-base-color, 26%); } .circular-progress { - color: var(--clr-text-tertiary); + color: lighten($ui-base-color, 26%); animation: 1.4s linear 0s infinite normal none running simple-rotate; circle { @@ -4843,8 +4958,8 @@ a.status-card { .video-error-cover { align-items: center; - background: var(--clr-bg-primary); - color: var(--clr-text-primary); + background: $base-overlay-background; + color: $primary-text-color; cursor: pointer; display: flex; flex-direction: column; @@ -4882,12 +4997,12 @@ a.status-card { padding: 0; margin: 0; border: 0; - color: var(--clr-text-on-media); + color: $white; line-height: 20px; font-size: 14px; &__label { - background-color: var(--clr-bg-media); + background-color: color.change($black, $alpha: 0.45); backdrop-filter: $backdrop-blur-filter; border-radius: 8px; padding: 12px 16px; @@ -4907,15 +5022,19 @@ a.status-card { &:hover, &:focus { .spoiler-button__overlay__label { - background-color: rgb(from var(--clr-bg-media-base) r g b / 90%); + background-color: color.change($black, $alpha: 0.9); } } } } +.modal-container--preloader { + background: lighten($ui-base-color, 8%); +} + .account--panel { - border-top: 1px solid var(--clr-border-primary); - border-bottom: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--background-border-color); display: flex; flex-direction: row; padding: 10px 0; @@ -4933,7 +5052,7 @@ a.status-card { &__section { // FIXME: Legacy - color: var(--clr-text-secondary); + color: $darker-text-color; cursor: default; display: block; font-weight: 500; @@ -4945,7 +5064,7 @@ a.status-card { section { padding: 16px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &:last-child { border-bottom: 0; @@ -4957,7 +5076,7 @@ a.status-card { line-height: 24px; letter-spacing: 0.5px; font-weight: 500; - color: var(--clr-text-primary); + color: $primary-text-color; margin-bottom: 16px; } @@ -4986,11 +5105,7 @@ a.status-card { @include search-input; &::placeholder { - color: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-secondary) - ); + color: lighten($darker-text-color, 4%); } &::-moz-focus-inner { @@ -5004,7 +5119,7 @@ a.status-card { } &:focus { - background: var(--clr-bg-secondary); + background: lighten($ui-base-color, 4%); } @media screen and (width <= 600px) { @@ -5013,7 +5128,7 @@ a.status-card { } &__placeholder { - color: var(--clr-text-tertiary); + color: $dark-text-color; padding-inline-start: 2px; font-size: 12px; } @@ -5023,7 +5138,7 @@ a.status-card { } &__multi-value { - background: var(--clr-bg-secondary); + background: lighten($ui-base-color, 8%); &__remove { cursor: pointer; @@ -5031,12 +5146,8 @@ a.status-card { &:hover, &:active, &:focus { - background: var(--clr-bg-accent-subtle); - color: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-secondary) - ); + background: lighten($ui-base-color, 12%); + color: lighten($darker-text-color, 4%); } } } @@ -5044,31 +5155,31 @@ a.status-card { &__multi-value__label, &__input, &__input-container { - color: var(--clr-text-secondary); + color: $darker-text-color; } &__clear-indicator, &__dropdown-indicator { cursor: pointer; transition: none; - color: var(--clr-text-tertiary); + color: $dark-text-color; &:hover, &:active, &:focus { - color: var(--clr-text-secondary); + color: lighten($dark-text-color, 4%); } } &__indicator-separator { - background-color: var(--clr-border-primary); + background-color: lighten($ui-base-color, 8%); } &__menu { @include search-popout; padding: 0; - background: var(--clr-bg-elevated); + background: $ui-secondary-color; } &__menu-list { @@ -5076,14 +5187,13 @@ a.status-card { } &__option { - color: var(--clr-text-primary); + color: $inverted-text-color; border-radius: 4px; font-size: 14px; &--is-focused, &--is-selected { - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + background: darken($ui-secondary-color, 10%); } } } @@ -5102,12 +5212,12 @@ a.status-card { } .setting-toggle__label { - color: var(--clr-text-secondary); + color: $darker-text-color; } .limited-account-hint { p { - color: var(--clr-text-primary); + color: $secondary-text-color; font-size: 15px; font-weight: 500; margin-bottom: 20px; @@ -5115,7 +5225,7 @@ a.status-card { } .empty-column-indicator { - color: var(--clr-text-secondary); + color: $dark-text-color; text-align: center; padding: 20px; font-size: 14px; @@ -5132,7 +5242,7 @@ a.status-card { } a { - color: var(--clr-text-accent); + color: $highlight-text-color; text-decoration: none; &:hover { @@ -5159,7 +5269,7 @@ a.status-card { .error-column { padding: 20px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px; display: flex; flex: 1 1 auto; @@ -5176,7 +5286,7 @@ a.status-card { &__message { text-align: center; - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 15px; line-height: 22px; @@ -5185,7 +5295,7 @@ a.status-card { line-height: 33px; font-weight: 700; margin-bottom: 15px; - color: var(--clr-text-primary); + color: $primary-text-color; } p { @@ -5238,9 +5348,9 @@ a.status-card { position: relative; margin-top: 5px; z-index: 2; - background: var(--clr-bg-elevated); + background: var(--dropdown-background-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--dropdown-border-color); box-shadow: var(--dropdown-shadow); border-radius: 5px; @@ -5265,8 +5375,8 @@ a.status-card { z-index: 4; top: -5px; inset-inline-start: -9px; - background: var(--clr-bg-elevated); - border: 1px solid var(--clr-border-primary); + background: var(--dropdown-background-color); + border: 1px solid var(--dropdown-border-color); border-radius: 4px; box-shadow: var(--dropdown-shadow); overflow: hidden; @@ -5281,7 +5391,7 @@ a.status-card { &:hover, &:focus, &:active { - background: var(--clr-border-primary); + background: var(--dropdown-border-color); } } @@ -5298,7 +5408,7 @@ a.status-card { .upload-area { align-items: center; - background: rgb(from var(--clr-bg-overlay) r g b / 80%); + background: color.change($base-overlay-background, $alpha: 0.8); display: flex; height: 100vh; justify-content: center; @@ -5332,8 +5442,8 @@ a.status-card { inset-inline-start: 0; z-index: -1; border-radius: 4px; - background: var(--clr-bg-elevated); - box-shadow: 0 0 5px var(--clr-shadow-primary); + background: $ui-base-color; + box-shadow: 0 0 5px color.change($base-shadow-color, $alpha: 0.2); } .upload-area__content { @@ -5342,15 +5452,15 @@ a.status-card { align-items: center; justify-content: center; text-align: center; - color: var(--clr-text-primary); + color: $secondary-text-color; font-size: 18px; font-weight: 500; - border: 2px dashed var(--clr-border-primary); + border: 2px dashed $ui-base-lighter-color; border-radius: 4px; } .upload-progress { - color: var(--clr-text-secondary); + color: $darker-text-color; overflow: hidden; display: flex; gap: 8px; @@ -5360,7 +5470,7 @@ a.status-card { .icon { width: 24px; height: 24px; - color: var(--clr-text-accent); + color: $ui-highlight-color; } span { @@ -5379,7 +5489,7 @@ a.status-card { width: 100%; height: 6px; border-radius: 6px; - background: var(--clr-bg-primary); + background: var(--background-color); position: relative; margin-top: 5px; } @@ -5389,7 +5499,7 @@ a.status-card { inset-inline-start: 0; top: 0; height: 6px; - background: var(--clr-text-accent); + background: $ui-highlight-color; border-radius: 6px; } @@ -5423,7 +5533,7 @@ a.status-card { &:focus-visible { img { - outline: var(--outline-focus-default); + outline: $ui-button-icon-focus-outline; } } } @@ -5437,8 +5547,9 @@ a.status-card { .language-dropdown__dropdown, .visibility-dropdown__dropdown { box-shadow: var(--dropdown-shadow); - background: var(--clr-bg-elevated); - border: 1px solid var(--clr-border-primary); + background: var(--dropdown-background-color); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--dropdown-border-color); padding: 4px; border-radius: 4px; overflow: hidden; @@ -5464,6 +5575,8 @@ 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; @@ -5473,7 +5586,7 @@ a.status-card { align-items: center; gap: 12px; border-radius: 4px; - color: var(--clr-text-primary); + color: var(--dropdown-text-color); // Make sure adjacent hover/active states don't have a meeting radius. &:hover + &:is(:focus, .active), @@ -5492,13 +5605,13 @@ a.status-card { &:hover, &:active { - background: var(--clr-bg-secondary); + background: var(--dropdown-border-color); } &:focus, &.active { - background: var(--clr-bg-accent-strong); - color: var(--clr-text-on-accent-strong); + background: $ui-highlight-color; + color: var(--dropdown-text-color); outline: 0; .privacy-dropdown__option__content, @@ -5507,7 +5620,7 @@ a.status-card { .visibility-dropdown__option__content, .visibility-dropdown__option__content strong, .visibility-dropdown__option__additional { - color: var(--clr-text-on-accent-strong); + color: var(--dropdown-text-color); } } @@ -5515,7 +5628,7 @@ a.status-card { display: flex; align-items: center; justify-content: center; - color: var(--clr-text-secondary); + color: $darker-text-color; cursor: help; } } @@ -5530,10 +5643,10 @@ a.status-card { .privacy-dropdown__option__content, .visibility-dropdown__option__content { flex: 1 1 auto; - color: var(--clr-text-secondary); + color: $darker-text-color; strong { - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 500; display: block; @@ -5552,13 +5665,13 @@ a.status-card { .emoji-mart-search { padding: 10px; - background: var(--clr-bg-elevated); + background: var(--dropdown-background-color); input { padding: 8px 12px; - background: var(--clr-bg-primary); - border: 1px solid var(--clr-border-primary); - color: var(--clr-text-secondary); + background: $ui-base-color; + border: 1px solid var(--background-border-color); + color: $darker-text-color; @media screen and (width <= 600px) { font-size: 16px; @@ -5571,7 +5684,7 @@ a.status-card { .emoji-mart-search-icon { inset-inline-end: 15px; opacity: 1; - color: var(--clr-text-primary); + color: $darker-text-color; .icon { width: 18px; @@ -5579,13 +5692,13 @@ a.status-card { } &:disabled { - color: var(--clr-text-secondary); + opacity: 0.38; } } .emoji-mart-scroll { padding: 0 10px 10px; - background: var(--clr-bg-elevated); + background: var(--dropdown-background-color); } &__results { @@ -5594,7 +5707,7 @@ a.status-card { align-items: center; gap: 0.5em; cursor: pointer; - color: var(--clr-text-primary); + color: $primary-text-color; font-size: 14px; line-height: 20px; letter-spacing: 0.25px; @@ -5606,23 +5719,23 @@ a.status-card { text-overflow: ellipsis; &__common-name { - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 400; } &:active, &:hover { - background: var(--clr-bg-secondary); + background: var(--dropdown-border-color); } &:focus, &.active { - background: var(--clr-bg-accent-strong); - color: var(--clr-text-on-accent-strong); + background: $ui-highlight-color; + color: $primary-text-color; outline: 0; .language-dropdown__dropdown__results__item__common-name { - color: var(--clr-text-on-accent-strong); + color: $primary-text-color; } } } @@ -5649,9 +5762,9 @@ a.status-card { &__button { display: flex; align-items: center; - color: var(--clr-text-primary); - background: var(--clr-bg-secondary-solid); - border: 1px solid var(--clr-border-primary); + color: $primary-text-color; + background: var(--input-background-color); + border: 1px solid var(--background-border-color); padding: 8px 12px; width: 100%; text-align: left; @@ -5674,7 +5787,7 @@ a.status-card { &__helper { margin-top: 4px; font-size: 0.8em; - color: var(--clr-text-tertiary); + color: $dark-text-color; } } @@ -5693,8 +5806,8 @@ a.status-card { inset-inline-start: 0; margin-top: -2px; width: 100%; - background: var(--clr-bg-elevated); - border: 1px solid var(--clr-border-primary); + background: var(--input-background-color); + border: 1px solid var(--background-border-color); border-radius: 0 0 4px 4px; box-shadow: var(--dropdown-shadow); z-index: 99; @@ -5703,7 +5816,7 @@ a.status-card { h4 { text-transform: uppercase; - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 500; padding: 0 10px; margin-bottom: 10px; @@ -5711,7 +5824,7 @@ a.status-card { .icon-button { padding: 0; - color: var(--clr-text-secondary); + color: $darker-text-color; } .icon { @@ -5727,7 +5840,7 @@ a.status-card { } &__message { - color: var(--clr-text-secondary); + color: $darker-text-color; padding: 0 10px; } @@ -5738,7 +5851,7 @@ a.status-card { border: 0; font: inherit; background: transparent; - color: var(--clr-text-secondary); + color: $darker-text-color; padding: 10px; cursor: pointer; border-radius: 4px; @@ -5760,18 +5873,18 @@ a.status-card { &:focus, &:active, &.selected { - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + background: $ui-highlight-color; + color: $primary-text-color; .icon-button { - color: inherit; + color: $primary-text-color; } } mark { background: transparent; font-weight: 700; - color: var(--clr-text-primary); + color: $primary-text-color; } span { @@ -5834,7 +5947,7 @@ a.status-card { grid-area: 1 / 1; transition: all 100ms linear; transition-property: transform, opacity; - color: var(--clr-text-secondary); + color: $darker-text-color; } .search__icon.icon-search { @@ -5863,7 +5976,7 @@ a.status-card { } &:focus-visible { - box-shadow: 0 0 0 2px var(--clr-text-accent); + box-shadow: 0 0 0 2px $ui-button-focus-outline-color; } &[aria-hidden='true'] { @@ -5874,19 +5987,19 @@ a.status-card { } .search-results__section { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &:last-child { border-bottom: 0; } &__header { - border-bottom: 1px solid var(--clr-border-primary); - background: var(--clr-bg-tertiary); + border-bottom: 1px solid var(--background-border-color); + background: var(--surface-background-color); padding: 15px; font-weight: 500; font-size: 14px; - color: var(--clr-text-secondary); + color: $darker-text-color; display: flex; justify-content: space-between; @@ -5897,7 +6010,7 @@ a.status-card { } button { - color: var(--clr-text-accent); + color: $highlight-text-color; padding: 0; border: 0; background: 0; @@ -5919,7 +6032,7 @@ a.status-card { .search-results__info { padding: 20px; - color: var(--clr-text-secondary); + color: $darker-text-color; text-align: center; } @@ -5935,7 +6048,7 @@ a.status-card { inset-inline-end: 0; bottom: 0; opacity: 0.9; - background: var(--clr-bg-overlay); + background: $base-overlay-background; transition: background 0.5s; } @@ -5994,13 +6107,7 @@ a.status-card { align-items: center; .icon-button { - --default-icon-color: var(--clr-text-on-media); - --default-bg-color: transparent; - --hover-icon-color: var(--clr-text-on-media); - --hover-bg-color: rgb( - from var(--clr-text-on-media) r g b / var(--clr-bg-secondary-strength) - ); - + color: color.change($white, $alpha: 0.7); padding: 8px; .icon { @@ -6008,6 +6115,17 @@ 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); + } } } } @@ -6047,30 +6165,23 @@ a.status-card { background: transparent; box-sizing: border-box; border: 0; - color: var(--clr-text-on-media); + color: color.change($white, $alpha: 0.7); cursor: pointer; display: flex; align-items: center; font-size: 24px; height: 20vmax; margin: auto 0; - padding: 30px 5px; + padding: 30px 15px; 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(--clr-text-on-media) r g b / var(--clr-bg-secondary-strength) - ); + &:hover, + &:focus, + &:active { + color: $white; } } @@ -6098,37 +6209,54 @@ a.status-card { padding: 16px; .icon-button { - --default-icon-color: var(--clr-text-on-media); - --default-bg-color: transparent; - --hover-icon-color: var(--clr-text-on-media); - --hover-bg-color: rgb( - from var(--clr-text-on-media) r g b / - var(--clr-bg-accent-subtle-strength) - ); + color: $white; .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 { - --default-icon-color: var(--clr-text-accent); - --hover-icon-color: var(--clr-text-accent); - --hover-bg-color: var(--clr-bg-accent-subtle-highlighted); + 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); + } } &.star-icon.active { - --default-icon-color: var(--clr-text-favourite-highlight); - --hover-icon-color: var(--clr-text-favourite-highlight); - --hover-bg-color: rgb( - from var(--clr-text-favourite-highlight) r g b / - var(--clr-bg-accent-subtle-strength) - ); + color: $gold-star; + + &:hover, + &:focus, + &:active { + background: color.change($gold-star, $alpha: 0.15); + } + + &:focus { + background: color.change($gold-star, $alpha: 0.3); + } } &.disabled { - --default-icon-color: var(--clr-text-on-media); - --default-bg-color: transparent; - + color: $white; + background-color: transparent; cursor: default; opacity: 0.4; } @@ -6144,8 +6272,9 @@ a.status-card { .media-modal__page-dot { flex: 0 0 auto; - background-color: rgb(from var(--clr-text-on-media) r g b / 40%); + background-color: $white; filter: var(--overlay-icon-shadow); + opacity: 0.4; height: 6px; width: 6px; border-radius: 50%; @@ -6153,16 +6282,15 @@ a.status-card { padding: 0; border: 0; font-size: 0; - transition: background-color 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; &.active { - background-color: var(--clr-text-on-media); + opacity: 1; } &:focus { - opacity: 1; - outline: 2px solid var(--clr-text-on-media); - outline-offset: 2px; + outline: 0; + background-color: $highlight-text-color; } } @@ -6170,9 +6298,9 @@ a.status-card { width: 588px; min-height: 478px; flex-direction: column; - background: var(--clr-bg-primary); + background: var(--modal-background-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--modal-border-color); border-radius: 16px; &__error { @@ -6214,9 +6342,9 @@ a.status-card { gap: 8px; padding: 24px; flex-direction: column; - background: var(--clr-bg-primary); + background: var(--modal-background-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--modal-border-color); } &__top { @@ -6242,12 +6370,12 @@ a.status-card { align-items: center; font-size: 14px; line-height: 20px; - color: var(--clr-text-secondary); + color: $darker-text-color; &__icon { border-radius: 64px; - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + background: $ui-highlight-color; + color: $white; display: flex; align-items: center; justify-content: center; @@ -6264,19 +6392,19 @@ a.status-card { h1 { font-size: 22px; line-height: 28px; - color: var(--clr-text-primary); + color: $primary-text-color; } } &__confirmation { font-size: 14px; line-height: 20px; - color: var(--clr-text-secondary); + color: $darker-text-color; h1 { font-size: 16px; line-height: 24px; - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 500; &:not(:only-child) { @@ -6286,12 +6414,12 @@ a.status-card { strong { font-weight: 700; - color: var(--clr-text-primary); + color: $primary-text-color; } } &__status { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--modal-border-color); border-radius: 8px; padding: 8px; cursor: pointer; @@ -6301,7 +6429,7 @@ a.status-card { align-items: center; gap: 4px; margin-bottom: 8px; - color: var(--clr-text-tertiary); + color: $dark-text-color; bdi { color: inherit; @@ -6312,7 +6440,7 @@ a.status-card { display: -webkit-box; font-size: 15px; line-height: 22px; - color: var(--clr-text-tertiary); + color: $dark-text-color; line-clamp: 4; -webkit-line-clamp: 4; -webkit-box-orient: vertical; @@ -6329,7 +6457,7 @@ a.status-card { margin-top: 0; font-size: 15px; line-height: 22px; - color: var(--clr-text-tertiary); + color: $dark-text-color; } } @@ -6351,7 +6479,7 @@ a.status-card { } &--deemphasized { - color: var(--clr-text-primary); + color: $secondary-text-color; } &__icon { @@ -6403,7 +6531,7 @@ a.status-card { } &.active { - background: var(--clr-bg-secondary); + background: var(--modal-background-variant-color); padding-top: 24px; .safety-action-modal__bottom__collapsible { @@ -6421,7 +6549,7 @@ a.status-card { &__hint { font-size: 14px; line-height: 20px; - color: var(--clr-text-tertiary); + color: $dark-text-color; } .link-button { @@ -6435,14 +6563,14 @@ a.status-card { width: 588px; max-height: 80vh; flex-direction: column; - background: var(--clr-bg-elevated); + background: var(--modal-background-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--modal-border-color); border-radius: 16px; &__header { box-sizing: border-box; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--modal-border-color); display: flex; align-items: center; justify-content: space-between; @@ -6466,7 +6594,7 @@ a.status-card { &__description { margin: 24px 24px 0; - color: var(--clr-text-secondary); + color: $darker-text-color; a { color: inherit; @@ -6487,7 +6615,7 @@ a.status-card { align-items: center; justify-content: center; padding: 24px; - background: var(--clr-bg-media-base); + background: #000; img { display: block; @@ -6495,7 +6623,7 @@ a.status-card { img, .gifv video { - outline: 1px solid var(--clr-border-media); + outline: 1px solid var(--media-outline-color); outline-offset: -1px; border-radius: 8px; } @@ -6519,9 +6647,9 @@ a.status-card { } &__popout { - background: var(--clr-bg-elevated); + background: var(--dropdown-background-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--dropdown-border-color); box-shadow: var(--dropdown-shadow); max-width: 320px; padding: 16px; @@ -6529,7 +6657,7 @@ a.status-card { z-index: 9999 !important; font-size: 14px; line-height: 20px; - color: var(--clr-text-secondary); + color: $darker-text-color; } .copy-paste-text { @@ -6541,16 +6669,22 @@ 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(--clr-bg-primary); - color: var(--clr-text-primary); + background: var(--background-color); + color: $primary-text-color; border-radius: 4px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); overflow: hidden; max-width: 90vw; width: 480px; @@ -6574,20 +6708,43 @@ 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(--clr-border-primary); + border: 1px solid var(--background-border-color); } .report-dialog-modal { max-width: 90vw; width: 480px; height: 80vh; - background: var(--clr-bg-primary); - color: var(--clr-text-primary); + background: var(--background-color); + color: $primary-text-color; border-radius: 4px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); overflow: hidden; position: relative; flex-direction: column; @@ -6595,7 +6752,7 @@ a.status-card { &__container { box-sizing: border-box; - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); padding: 20px; flex-grow: 1; display: flex; @@ -6625,12 +6782,12 @@ a.status-card { &__lead { font-size: 17px; line-height: 22px; - color: var(--clr-text-primary); + color: $secondary-text-color; margin-bottom: 30px; a { text-decoration: none; - color: var(--clr-text-accent); + color: $highlight-text-color; font-weight: 500; &:hover { @@ -6655,12 +6812,12 @@ a.status-card { } .status__content a { - color: var(--clr-text-accent); + color: $highlight-text-color; } .status__content, .status__content p { - color: var(--clr-text-primary); + color: $primary-text-color; } .dialog-option { @@ -6669,7 +6826,8 @@ a.status-card { } .dialog-option .poll__input { - color: var(--clr-text-secondary); + border-color: $darker-text-color; + color: $ui-secondary-color; display: inline-flex; align-items: center; justify-content: center; @@ -6682,21 +6840,20 @@ a.status-card { &:active, &:focus, &:hover { - border-color: var(--clr-text-success); + border-color: $valid-value-color; border-width: 4px; } &.active { - color: var(--clr-text-on-success-strong); - background: var(--clr-bg-success-strong); - border-color: var(--clr-bg-success-strong); + border-color: $valid-value-color; + background: $valid-value-color; } } .poll__option.dialog-option { padding: 15px 0; flex: 0 0 auto; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &:last-child { border-bottom: 0; @@ -6704,13 +6861,13 @@ a.status-card { & > .poll__option__text { font-size: 13px; - color: var(--clr-text-primary); + color: $secondary-text-color; strong { font-size: 17px; font-weight: 500; line-height: 22px; - color: var(--clr-text-primary); + color: $primary-text-color; display: block; margin-bottom: 4px; @@ -6729,15 +6886,15 @@ a.status-card { display: block; box-sizing: border-box; width: 100%; - color: var(--clr-text-primary); - background: var(--clr-bg-secondary); + color: $primary-text-color; + background: $ui-base-color; padding: 10px; font-family: inherit; font-size: 17px; line-height: 22px; resize: vertical; border: 0; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); outline: 0; border-radius: 4px; margin: 20px 0; @@ -6762,16 +6919,16 @@ a.status-card { } .button.button-secondary { - border-color: var(--clr-text-error); - color: var(--clr-text-error); + border-color: $ui-button-destructive-background-color; + color: $ui-button-destructive-background-color; flex: 0 0 auto; &:hover, &:focus, &:active { - color: var(--clr-text-on-error-strong); - background: var(--clr-bg-error-strong); - border-color: var(--clr-bg-error-strong); + background: $ui-button-destructive-background-color; + border-color: $ui-button-destructive-background-color; + color: $white; } } @@ -6790,6 +6947,55 @@ 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; @@ -6801,9 +7007,9 @@ a.status-card { .actions-modal { border-radius: 8px 8px 0 0; - background: var(--clr-bg-elevated); + background: var(--dropdown-background-color); backdrop-filter: $backdrop-blur-filter; - border-color: var(--clr-border-primary); + border-color: var(--dropdown-border-color); box-shadow: var(--dropdown-shadow); max-height: 80vh; max-width: 80vw; @@ -6830,7 +7036,7 @@ a.status-card { &:hover, &:active, &:focus { - background: var(--clr-bg-accent-subtle); + background: var(--dropdown-border-color); } } } @@ -6866,7 +7072,7 @@ a.status-card { .compare-history-modal { .report-modal__target { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); } &__container { @@ -6876,7 +7082,7 @@ a.status-card { } .status__content { - color: var(--clr-text-primary); + color: $secondary-text-color; font-size: 19px; line-height: 24px; @@ -6887,13 +7093,13 @@ a.status-card { } a { - color: var(--clr-text-accent); + color: $highlight-text-color; } hr { height: 0.25rem; padding: 0; - background-color: var(--clr-text-primary); + background-color: $ui-secondary-color; border: 0; margin: 20px 0; } @@ -6907,7 +7113,7 @@ a.status-card { } .loading-bar { - background-color: var(--clr-bg-accent-strong); + background-color: $highlight-text-color; height: 3px; position: fixed; top: 0; @@ -6925,10 +7131,10 @@ a.status-card { &__pill { display: block; - color: var(--clr-text-on-media); - background: var(--clr-bg-media); - backdrop-filter: $backdrop-blur-filter; + color: $white; border: 0; + background: color.change($black, $alpha: 0.65); + backdrop-filter: $backdrop-blur-filter; padding: 3px 12px; border-radius: 99px; font-size: 14px; @@ -6950,10 +7156,10 @@ a.status-card { .relationship-tag { display: block; text-align: center; - color: var(--clr-text-on-media); - background: var(--clr-bg-media); - backdrop-filter: $backdrop-blur-filter; + color: $white; border: 0; + background: color.change($black, $alpha: 0.65); + backdrop-filter: $backdrop-blur-filter; padding: 3px 8px; border-radius: 4px; font-size: 12px; @@ -6974,8 +7180,8 @@ a.status-card { } .info-tooltip { - color: var(--clr-text-on-media); - background: var(--clr-bg-media); + color: $white; + background: color.change($black, $alpha: 0.65); backdrop-filter: $backdrop-blur-filter; border-radius: 4px; box-shadow: var(--dropdown-shadow); @@ -6985,12 +7191,18 @@ a.status-card { max-width: 22em; max-height: 30em; overflow-y: auto; - z-index: 10; &--solid { - color: var(--clr-text-primary); - background: var(--clr-bg-elevated); - border: 1px solid var(--clr-border-primary); + 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); } h4 { @@ -7015,17 +7227,17 @@ a.status-card { .attachment-list { display: flex; font-size: 14px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px; margin-top: 16px; overflow: hidden; &__icon { flex: 0 0 auto; - color: var(--clr-text-tertiary); + color: $dark-text-color; padding: 8px 18px; cursor: default; - border-inline-end: 1px solid var(--clr-border-primary); + border-inline-end: 1px solid var(--background-border-color); display: flex; flex-direction: column; align-items: center; @@ -7048,7 +7260,7 @@ a.status-card { a { text-decoration: none; - color: var(--clr-text-tertiary); + color: $dark-text-color; font-weight: 500; &:hover { @@ -7066,7 +7278,7 @@ a.status-card { } .icon { - color: var(--clr-text-tertiary); + color: $dark-text-color; vertical-align: middle; } } @@ -7156,7 +7368,7 @@ a.status-card { position: relative; border-radius: 8px; overflow: hidden; - outline: 1px solid var(--clr-border-media); + outline: 1px solid var(--media-outline-color); outline-offset: -1px; z-index: 1; @@ -7192,8 +7404,8 @@ a.status-card { } .icon { - color: var(--clr-text-on-media); - filter: drop-shadow(0 0 6px var(--clr-bg-media-base)); + color: $white; + filter: var(--overlay-icon-shadow); } } @@ -7206,7 +7418,7 @@ a.status-card { cursor: pointer; display: block; text-decoration: none; - color: var(--clr-text-primary); + color: $secondary-text-color; position: relative; z-index: -1; @@ -7229,7 +7441,7 @@ a.status-card { top: 0; inset-inline-start: 0; z-index: -2; - background: var(--clr-bg-overlay); + background: $base-overlay-background; &--hidden { display: none; @@ -7266,12 +7478,6 @@ 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(--clr-text-on-media); - --player-background-color: var(--clr-bg-media-base); - --player-accent-color: var(--clr-text-accent); - box-sizing: border-box; container: audio-player / inline-size; position: relative; @@ -7281,9 +7487,9 @@ a.status-card { width: 100%; aspect-ratio: 16 / 9; color: var(--player-foreground-color); - background: var(--player-background-color); + background: var(--player-background-color, var(--background-color)); border-radius: 8px; - outline: 1px solid var(--clr-border-media); + outline: 1px solid var(--media-outline-color); outline-offset: -1px; &__controls { @@ -7416,14 +7622,14 @@ a.status-card { .video-player { overflow: hidden; position: relative; - color: var(--clr-text-on-media); - background: var(--clr-bg-media); + background: $base-shadow-color; max-width: 100%; border-radius: 8px; box-sizing: border-box; + color: $white; display: flex; align-items: center; - outline: 1px solid var(--clr-border-media); + outline: 1px solid var(--media-outline-color); outline-offset: -1px; z-index: 2; @@ -7457,8 +7663,8 @@ a.status-card { box-sizing: border-box; background: linear-gradient( 0deg, - rgb(from var(--clr-bg-media-base) r g b / 85%) 0, - rgb(from var(--clr-bg-media-base) r g b / 45%) 60%, + color.change($base-shadow-color, $alpha: 0.85) 0, + color.change($base-shadow-color, $alpha: 0.45) 60%, transparent ); padding: 0 15px; @@ -7498,8 +7704,8 @@ a.status-card { height: 100%; z-index: 4; border: 0; - background: var(--clr-bg-primary); - color: var(--clr-text-secondary); + background: $base-overlay-background; + color: $darker-text-color; transition: none; pointer-events: none; @@ -7510,11 +7716,7 @@ a.status-card { &:hover, &:active, &:focus { - color: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-secondary) - ); + color: lighten($darker-text-color, 7%); } } @@ -7558,13 +7760,13 @@ a.status-card { flex: 0 0 auto; background: transparent; border: 0; - color: rgb(from var(--clr-text-on-media) r g b / 75%); + color: color.change($white, $alpha: 0.75); font-weight: 500; &:active, &:hover, &:focus { - color: var(--clr-text-on-media); + color: $white; } } } @@ -7583,16 +7785,24 @@ a.status-card { &__time-sep, &__time-total, &__time-current { - color: var(--clr-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; @@ -7614,7 +7824,7 @@ a.status-card { &::before { content: ''; width: 50px; - background: rgb(from var(--clr-text-on-media) r g b / 35%); + background: color.change($white, $alpha: 0.35); border-radius: 4px; display: block; position: absolute; @@ -7632,7 +7842,7 @@ a.status-card { inset-inline-start: 0; top: 50%; transform: translate(0, -50%); - background: var(--clr-text-on-media); + background: $white; } &__handle { @@ -7645,8 +7855,8 @@ a.status-card { inset-inline-start: 0; margin-inline-start: -6px; transform: translate(0, -50%); - background: var(--clr-text-on-media); - box-shadow: 1px 2px 6px var(--clr-shadow-primary); + background: $white; + box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2); opacity: 0; .no-reduce-motion & { @@ -7666,7 +7876,7 @@ a.status-card { text-decoration: none; font-size: 14px; font-weight: 500; - color: var(--clr-text-on-media); + color: $white; &:hover, &:active, @@ -7684,7 +7894,7 @@ a.status-card { &::before { content: ''; width: 100%; - background: rgb(from var(--clr-text-on-media) r g b / 35%); + background: color.change($white, $alpha: 0.35); border-radius: 4px; display: block; position: absolute; @@ -7699,11 +7909,11 @@ a.status-card { height: 4px; border-radius: 4px; top: 14px; - background: var(--clr-text-on-media); + background: $white; } &__buffer { - background: rgb(from var(--clr-text-on-media) r g b / 20%); + background: color.change($white, $alpha: 0.2); } &__handle { @@ -7715,8 +7925,8 @@ a.status-card { height: 12px; top: 10px; margin-inline-start: -6px; - background: var(--clr-text-on-media); - box-shadow: 1px 2px 6px var(--clr-shadow-primary); + background: $white; + box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2); .no-reduce-motion & { transition: opacity 0.1s ease; @@ -7740,9 +7950,9 @@ a.status-card { top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); - color: var(--clr-text-on-media); - background: var(--clr-bg-media); + background: color.change($base-shadow-color, $alpha: 0.45); backdrop-filter: $backdrop-blur-filter; + color: $white; border-radius: 8px; padding: 16px 24px; display: flex; @@ -7789,7 +7999,7 @@ a.status-card { .scrollable .account-card__title__avatar { img { - border: 2px solid var(--clr-bg-primary); + border: 2px solid var(--background-color); } .account__avatar { @@ -7804,7 +8014,7 @@ a.status-card { } .scrollable .account-card__bio::after { - background: linear-gradient(to left, var(--clr-bg-primary), transparent); + background: linear-gradient(to left, var(--background-color), transparent); } .account-gallery__container { @@ -7824,7 +8034,7 @@ a.status-card { .notification__filter-bar, .account__section-headline { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; cursor: default; display: flex; @@ -7845,7 +8055,7 @@ a.status-card { a { display: block; flex: 1 1 auto; - color: var(--clr-text-secondary); + color: $darker-text-color; padding: 15px 0; font-size: 14px; font-weight: 500; @@ -7856,7 +8066,7 @@ a.status-card { white-space: nowrap; &.active { - color: var(--clr-text-primary); + color: $primary-text-color; &::before { display: block; @@ -7868,7 +8078,7 @@ a.status-card { width: 40px; height: 3px; border-radius: 4px 4px 0 0; - background: var(--clr-text-accent); + background: $highlight-text-color; } } } @@ -7880,7 +8090,7 @@ a.status-card { } .filter-form { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &__column { display: flex; @@ -7910,7 +8120,7 @@ a.status-card { text-overflow: ellipsis; cursor: pointer; gap: 10px; - color: var(--clr-text-primary); + color: $secondary-text-color; input[type='radio'], input[type='checkbox'] { @@ -7922,7 +8132,7 @@ a.status-card { align-items: center; justify-content: center; position: relative; - border: 2px solid var(--clr-text-primary); + border: 2px solid $secondary-text-color; box-sizing: border-box; width: 20px; height: 20px; @@ -7931,7 +8141,7 @@ a.status-card { &.checked, &.indeterminate { - border-color: var(--clr-text-accent); + border-color: $ui-highlight-color; } .icon { @@ -7947,7 +8157,7 @@ a.status-card { border-radius: 50%; width: calc(100% - 4px); height: calc(100% - 4px); - background: var(--clr-text-accent); + background: $ui-highlight-color; } .check-box { @@ -7958,8 +8168,8 @@ a.status-card { &.checked, &.indeterminate { - background: var(--clr-bg-accent-strong); - color: var(--clr-text-on-accent-strong); + background: $ui-highlight-color; + color: $white; } } } @@ -7976,11 +8186,11 @@ noscript { div { font-size: 14px; margin: 30px auto; - color: var(--clr-text-primary); + color: $secondary-text-color; max-width: 400px; a { - color: var(--clr-text-accent); + color: $highlight-text-color; text-decoration: underline; &:hover { @@ -8008,13 +8218,13 @@ noscript { .follow-request-banner, .account-memorial-banner { padding: 20px; - background: var(--clr-bg-tertiary); + background: var(--surface-background-color); display: flex; align-items: center; flex-direction: column; &__message { - color: var(--clr-text-secondary); + color: $darker-text-color; padding: 8px 0; padding-top: 0; padding-bottom: 4px; @@ -8051,7 +8261,7 @@ noscript { justify-content: flex-start; gap: 15px; align-items: center; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; label { @@ -8075,7 +8285,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - background: rgb(from var(--clr-bg-overlay) r g b / 50%); + background: color.change($base-overlay-background, $alpha: 0.5); } .focal-point { @@ -8095,15 +8305,15 @@ noscript { width: 100px; height: 100px; transform: translate(-50%, -50%); - border: 2px solid var(--clr-text-on-media); + border: 2px solid #fff; border-radius: 50%; - box-shadow: 0 0 0 9999em var(--clr-shadow-primary); + box-shadow: 0 0 0 9999em color.change($base-shadow-color, $alpha: 0.35); pointer-events: none; } } .account__header__content { - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 14px; font-weight: 400; overflow: hidden; @@ -8155,8 +8365,8 @@ noscript { overflow: hidden; height: 145px; position: relative; - background: var(--clr-bg-tertiary); - border-bottom: 1px solid var(--clr-border-primary); + background: darken($ui-base-color, 4%); + border-bottom: 1px solid var(--background-border-color); img { object-fit: cover; @@ -8170,15 +8380,15 @@ noscript { &__bar { position: relative; padding: 0 20px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); .avatar { display: block; flex: 0 0 auto; .account__avatar { - background: var(--clr-bg-primary); - border: 1px solid var(--clr-border-primary); + background: var(--background-color); + border: 1px solid var(--background-border-color); border-radius: var(--avatar-border-radius); } } @@ -8216,7 +8426,7 @@ noscript { h1 { font-size: 17px; line-height: 22px; - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 600; overflow: hidden; white-space: nowrap; @@ -8228,7 +8438,7 @@ noscript { gap: 4px; font-size: 14px; line-height: 20px; - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -8299,7 +8509,7 @@ noscript { } .icon-button { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px; box-sizing: content-box; padding: 5px; @@ -8310,26 +8520,26 @@ noscript { } &.copied { - border-color: var(--clr-text-success); + border-color: $valid-value-color; } } } &__bio { .account__header__content { - color: var(--clr-text-primary); + color: $primary-text-color; } .account__header__fields { margin: 0; margin-top: 16px; border-radius: 4px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); dl { display: block; padding: 11px 16px; - border-bottom-color: var(--clr-border-primary); + border-bottom-color: var(--background-border-color); } dd, @@ -8344,15 +8554,15 @@ noscript { width: auto; background: transparent; text-transform: uppercase; - color: var(--clr-text-tertiary); + color: $dark-text-color; } dd { - color: var(--clr-text-secondary); + color: $darker-text-color; } a { - color: var(--clr-text-accent); + color: lighten($ui-highlight-color, 8%); } .icon { @@ -8361,7 +8571,7 @@ noscript { } .verified { - border: 1px solid var(--clr-text-success); + border: 1px solid color.change($valid-value-color, $alpha: 0.5); margin-top: -1px; margin-inline: -1px; @@ -8378,7 +8588,7 @@ noscript { dt, dd { - color: var(--clr-text-success); + color: $valid-value-color; } dd { @@ -8392,7 +8602,7 @@ noscript { } a { - color: var(--clr-text-success); + color: $valid-value-color; } } } @@ -8403,28 +8613,28 @@ noscript { &__links { font-size: 14px; - color: var(--clr-text-secondary); + color: $darker-text-color; margin: 0 -10px; padding-top: 16px; padding-bottom: 10px; a { display: inline-block; - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; padding: 5px 10px; font-weight: 500; strong { font-weight: 700; - color: var(--clr-text-primary); + color: $primary-text-color; } } } } &__account-note { - color: var(--clr-text-primary); + color: $primary-text-color; font-size: 14px; font-weight: 400; margin-bottom: 10px; @@ -8447,7 +8657,7 @@ noscript { display: block; font-size: 12px; font-weight: 500; - color: var(--clr-text-secondary); + color: $darker-text-color; text-transform: uppercase; margin-bottom: 5px; } @@ -8456,7 +8666,7 @@ noscript { display: block; box-sizing: border-box; width: calc(100% + 20px); - color: var(--clr-text-primary); + color: $secondary-text-color; background: transparent; padding: 10px; margin: 0 -10px; @@ -8468,12 +8678,12 @@ noscript { border-radius: 4px; &::placeholder { - color: var(--clr-text-tertiary); + color: $dark-text-color; opacity: 1; } &:focus { - background: var(--clr-bg-accent-subtle); + background: $ui-base-color; } } } @@ -8483,12 +8693,12 @@ noscript { align-items: center; gap: 10px; margin-block: 16px; - color: var(--clr-text-secondary); + color: $darker-text-color; a:any-link { font-weight: 500; text-decoration: none; - color: var(--clr-text-primary); + color: $primary-text-color; } } } @@ -8506,7 +8716,7 @@ noscript { .verified-badge { display: inline-flex; align-items: center; - color: var(--clr-text-success); + color: $valid-value-color; gap: 4px; overflow: hidden; white-space: nowrap; @@ -8533,12 +8743,12 @@ noscript { display: flex; align-items: center; padding: 16px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); gap: 8px; &__name { flex: 1 1 auto; - color: var(--clr-text-secondary); + color: $dark-text-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -8548,7 +8758,7 @@ noscript { } a { - color: var(--clr-text-primary); + color: $darker-text-color; text-decoration: none; font-size: 14px; font-weight: 500; @@ -8572,7 +8782,7 @@ noscript { font-size: 24px; font-weight: 500; text-align: end; - color: var(--clr-text-primary); + color: $secondary-text-color; text-decoration: none; } @@ -8581,60 +8791,60 @@ noscript { width: 50px; path:first-child { - fill: var(--clr-graph-primary-fill) !important; + fill: color.change($highlight-text-color, $alpha: 0.25) !important; fill-opacity: 1 !important; } path:last-child { - stroke: var(--clr-graph-primary-stroke) !important; + stroke: lighten($highlight-text-color, 6%) !important; fill: none !important; } } &--requires-review { .trends__item__name { - color: var(--clr-text-warning); + color: $gold-star; a { - color: var(--clr-text-warning); + color: $gold-star; } } .trends__item__current { - color: var(--clr-text-warning); + color: $gold-star; } .trends__item__sparkline { path:first-child { - fill: var(--clr-graph-warning-fill) !important; + fill: color.change($gold-star, $alpha: 0.25) !important; } path:last-child { - stroke: var(--clr-graph-warning-stroke) !important; + stroke: lighten($gold-star, 6%) !important; } } } &--disabled { .trends__item__name { - color: var(--clr-text-disabled); + color: lighten($ui-base-color, 12%); a { - color: var(--clr-text-disabled); + color: lighten($ui-base-color, 12%); } } .trends__item__current { - color: var(--clr-text-disabled); + color: lighten($ui-base-color, 12%); } .trends__item__sparkline { path:first-child { - fill: var(--clr-graph-disabled-fill) !important; + fill: rgba(lighten($ui-base-color, 12%), 0.25) !important; } path:last-child { - stroke: var(--clr-graph-disabled-stroke) !important; + stroke: lighten(lighten($ui-base-color, 12%), 6%) !important; } } } @@ -8647,12 +8857,12 @@ noscript { .conversation { display: flex; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); padding: 5px; padding-bottom: 0; &:focus { - background: var(--clr-bg-secondary); + background: lighten($ui-base-color, 2%); outline: 0; } @@ -8666,7 +8876,7 @@ noscript { &__unread { display: inline-block; - background: var(--clr-text-accent); + background: $highlight-text-color; border-radius: 50%; width: 0.625rem; height: 0.625rem; @@ -8688,12 +8898,12 @@ noscript { &__relative-time { font-size: 15px; - color: var(--clr-text-secondary); + color: $darker-text-color; padding-inline-start: 15px; } &__names { - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 15px; white-space: nowrap; overflow: hidden; @@ -8703,7 +8913,7 @@ noscript { flex-grow: 1; a { - color: var(--clr-text-primary); + color: $primary-text-color; text-decoration: none; &:hover, @@ -8731,7 +8941,7 @@ noscript { } &__root { - background: var(--clr-bg-accent-subtle); + background: lighten($ui-base-color, 8%); font-size: 13px; display: flex; align-items: flex-end; @@ -8779,7 +8989,7 @@ noscript { top: 19px; inset-inline-end: 19px; display: block; - background: var(--clr-text-accent); + background: $highlight-text-color; border-radius: 50%; width: 0.625rem; height: 0.625rem; @@ -8787,7 +8997,7 @@ noscript { &__pagination { padding: 15px; - color: var(--clr-text-secondary); + color: $darker-text-color; position: absolute; bottom: 3px; inset-inline-end: 0; @@ -8815,15 +9025,10 @@ noscript { &__item { flex-shrink: 0; - background: var(--clr-bg-accent-subtle); - color: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-secondary) - ); - border: 1px solid var(--clr-border-on-bg-accent-subtle); + background: lighten($ui-base-color, 12%); + color: $darker-text-color; + border: 0; border-radius: 3px; - box-sizing: border-box; margin: 2px; cursor: pointer; user-select: none; @@ -8862,18 +9067,21 @@ noscript { &:hover, &:focus, &:active { - color: var(--clr-text-primary); - background: var(--clr-bg-accent-subtle-highlighted); + background: lighten($ui-base-color, 16%); transition: all 200ms ease-out; transition-property: background-color, color; + color: lighten($darker-text-color, 4%); } &.active { - color: var(--clr-text-accent); - background-color: var(--clr-bg-accent-subtle); - border-color: var(--clr-text-accent); 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%); } } @@ -8887,7 +9095,7 @@ noscript { } .emoji-button { - color: var(--clr-text-secondary); + color: $darker-text-color; margin: 0; font-size: 16px; width: auto; @@ -8904,11 +9112,7 @@ noscript { &:active, &:focus { opacity: 1; - color: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-secondary) - ); + color: lighten($darker-text-color, 4%); transition: all 200ms ease-out; transition-property: background-color, color; } @@ -8938,7 +9142,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - border-inline-start: 4px solid var(--clr-text-accent); + border-inline-start: 4px solid $highlight-text-color; pointer-events: none; } } @@ -8953,9 +9157,9 @@ noscript { &__footer { border-radius: 0 0 4px 4px; - background: var(--clr-bg-secondary); + background: var(--modal-background-variant-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--modal-border-color); border-top: 0; padding: 12px; display: flex; @@ -8964,9 +9168,9 @@ noscript { &__header { border-radius: 4px 4px 0 0; - background: var(--clr-bg-secondary); + background: var(--modal-background-variant-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--modal-border-color); border-bottom: 0; padding: 12px; display: flex; @@ -8987,7 +9191,7 @@ noscript { } .display-name { - color: var(--clr-text-primary); + color: $primary-text-color; text-decoration: none; strong, @@ -8998,7 +9202,7 @@ noscript { } span { - color: var(--clr-text-secondary); + color: $darker-text-color; } } } @@ -9012,7 +9216,7 @@ noscript { .picture-in-picture-placeholder { border-radius: 8px; box-sizing: border-box; - border: 1px dashed var(--clr-border-primary); + border: 1px dashed var(--background-border-color); display: flex; flex-direction: column; align-items: center; @@ -9022,7 +9226,7 @@ noscript { line-height: 21px; font-weight: 500; cursor: pointer; - color: var(--clr-text-tertiary); + color: $dark-text-color; aspect-ratio: 16 / 9; .icon { @@ -9034,18 +9238,18 @@ noscript { &:hover, &:active, &:focus { - color: var(--clr-text-secondary); + color: $darker-text-color; } &:focus-visible { - outline: var(--outline-focus-default); + outline: $ui-button-focus-outline; border-color: transparent; } } .notifications-permission-banner { padding: 30px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); display: flex; flex-direction: column; align-items: center; @@ -9066,7 +9270,7 @@ noscript { } p { - color: var(--clr-text-secondary); + color: $darker-text-color; margin-bottom: 15px; text-align: center; @@ -9081,7 +9285,7 @@ noscript { .explore__search-header { justify-content: center; align-items: center; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; border-bottom: 0; padding: 16px; @@ -9093,18 +9297,19 @@ noscript { } .search__input { + border: 1px solid var(--background-border-color); padding-block: 12px; padding-inline-end: 30px; } .search__popout { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); } .search__icon { top: 12px; inset-inline-end: 12px; - color: var(--clr-text-tertiary); + color: $dark-text-color; } } @@ -9122,7 +9327,7 @@ noscript { flex-direction: column; @media screen and (min-width: $no-gap-breakpoint) { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; @@ -9132,9 +9337,9 @@ noscript { .story { display: flex; align-items: center; - color: var(--clr-text-primary); + color: $primary-text-color; padding: 16px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); gap: 16px; &:last-child { @@ -9145,7 +9350,7 @@ noscript { flex: 1 1 auto; &__publisher { - color: var(--clr-text-secondary); + color: $darker-text-color; margin-bottom: 8px; font-size: 14px; line-height: 20px; @@ -9158,26 +9363,26 @@ noscript { font-weight: 500; margin-bottom: 8px; text-decoration: none; - color: var(--clr-text-primary); + color: $primary-text-color; &:hover, &:active, &:focus { - color: var(--clr-text-accent); + color: $highlight-text-color; } } &__shared { display: flex; align-items: baseline; - color: var(--clr-text-secondary); + color: $darker-text-color; gap: 8px; justify-content: space-between; font-size: 14px; line-height: 20px; &__pill { - background: var(--clr-bg-tertiary); + background: var(--surface-variant-background-color); border-radius: 4px; color: inherit; text-decoration: none; @@ -9192,14 +9397,14 @@ noscript { display: inline-flex; align-items: center; gap: 4px; - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 500; text-decoration: none; &:hover, &:active, &:focus { - color: var(--clr-text-accent); + color: $highlight-text-color; } } } @@ -9269,7 +9474,7 @@ noscript { &__introduction { font-size: 15px; line-height: 22px; - color: var(--clr-text-secondary); + color: $darker-text-color; margin-bottom: 20px; strong { @@ -9296,14 +9501,14 @@ noscript { margin-bottom: 20px; aspect-ratio: 1.9; border: 0; - background: var(--clr-bg-tertiary); + background: $ui-base-color; object-fit: cover; } &__description { font-size: 15px; line-height: 22px; - color: var(--clr-text-secondary); + color: $darker-text-color; margin-bottom: 20px; } @@ -9321,19 +9526,19 @@ noscript { &__number { font-weight: 600; - color: var(--clr-text-primary); + color: $primary-text-color; font-size: 14px; } &__number-label { - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 500; font-size: 14px; } h4 { text-transform: uppercase; - color: var(--clr-text-secondary); + color: $darker-text-color; margin-bottom: 10px; font-weight: 600; } @@ -9364,9 +9569,9 @@ noscript { position: relative; display: block; border-radius: 16px; - background: var(--clr-bg-primary); + background: var(--modal-background-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--modal-border-color); padding: 24px; box-sizing: border-box; @@ -9390,10 +9595,10 @@ noscript { text-align: center; font-size: 17px; line-height: 22px; - color: var(--clr-text-secondary); + color: $darker-text-color; strong { - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 700; } } @@ -9418,9 +9623,9 @@ noscript { &__input { @include search-input; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); padding: 4px 6px; - color: var(--clr-text-primary); + color: $primary-text-color; font-size: 16px; line-height: 18px; display: flex; @@ -9436,11 +9641,7 @@ noscript { min-width: 0; &::placeholder { - color: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-secondary) - ); + color: lighten($darker-text-color, 4%); } &:focus { @@ -9457,11 +9658,11 @@ noscript { margin-top: -1px; padding-top: 5px; padding-bottom: 5px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); } &.invalid &__input { - border-color: var(--clr-text-error); + border-color: $error-red; } &.expanded .search__popout { @@ -9486,7 +9687,7 @@ noscript { } p { - color: var(--clr-text-secondary); + color: $darker-text-color; margin-bottom: 20px; font-size: 15px; } @@ -9517,6 +9718,49 @@ 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; @@ -9530,7 +9774,7 @@ noscript { } .prose { - color: var(--clr-text-primary); + color: $secondary-text-color; font-size: 15px; line-height: 22px; @@ -9614,7 +9858,7 @@ noscript { ul > li::before { content: ''; position: absolute; - background-color: var(--clr-text-secondary); + background-color: $darker-text-color; border-radius: 50%; width: 0.375em; height: 0.375em; @@ -9665,7 +9909,7 @@ noscript { h6, strong, b { - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 700; } @@ -9675,7 +9919,7 @@ noscript { } a { - color: var(--clr-text-accent); + color: $highlight-text-color; text-decoration: underline; &:focus, @@ -9687,14 +9931,14 @@ noscript { code { font-size: 0.875em; - background: var(--clr-bg-secondary); + background: darken($ui-base-color, 8%); border-radius: 4px; padding: 0.2em 0.3em; } hr { border: 0; - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid lighten($ui-base-color, 4%); margin-top: 3em; margin-bottom: 3em; } @@ -9732,8 +9976,8 @@ noscript { margin: 10px; margin-bottom: 5px; border-radius: 8px; - border: 1px solid var(--clr-border-on-bg-accent-subtle); - background: var(--clr-bg-accent-subtle); + border: 1px solid $highlight-text-color; + background: color.change($highlight-text-color, $alpha: 0.15); overflow: hidden; flex-shrink: 0; @@ -9753,7 +9997,7 @@ noscript { font-size: 15px; line-height: 22px; font-weight: 500; - color: var(--clr-text-primary); + color: $primary-text-color; p { margin-bottom: 15px; @@ -9764,7 +10008,7 @@ noscript { } h1 { - color: var(--clr-text-accent); + color: $highlight-text-color; font-size: 22px; line-height: 33px; font-weight: 700; @@ -9786,6 +10030,11 @@ noscript { flex-grow: 1; } } + + .button-tertiary { + background: color.change($ui-base-color, $alpha: 0.15); + backdrop-filter: blur(8px); + } } &__action { @@ -9793,22 +10042,22 @@ noscript { padding: 15px 10px; .icon-button { - color: var(--clr-text-accent); + color: $highlight-text-color; } } } .warning-banner { - border: 1px solid var(--clr-border-on-bg-error-subtle); - background: var(--clr-bg-error-subtle); + border: 1px solid $warning-red; + background: color.change($warning-red, $alpha: 0.15); &__message { h1 { - color: var(--clr-text-error); + color: $warning-red; } a { - color: var(--clr-text-primary); + color: $primary-text-color; } } } @@ -9856,7 +10105,7 @@ noscript { } p { - color: var(--clr-text-secondary); + color: $dark-text-color; margin-bottom: 20px; .version { @@ -9868,7 +10117,7 @@ noscript { } a { - color: var(--clr-text-secondary); + color: $dark-text-color; text-decoration: underline; &:hover, @@ -9882,14 +10131,14 @@ noscript { .about { padding: 20px; - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); @media screen and (min-width: $no-gap-breakpoint) { border-radius: 4px; } &__footer { - color: var(--clr-text-tertiary); + color: $dark-text-color; text-align: center; font-size: 15px; line-height: 22px; @@ -9903,7 +10152,7 @@ noscript { width: 100%; height: auto; aspect-ratio: 1.9; - background: var(--clr-bg-tertiary); + background: lighten($ui-base-color, 4%); border-radius: 8px; margin-bottom: 30px; } @@ -9924,12 +10173,12 @@ noscript { font-size: 16px; line-height: 24px; font-weight: 400; - color: var(--clr-text-secondary); + color: $darker-text-color; } } &__meta { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px; display: flex; margin-bottom: 30px; @@ -9945,7 +10194,7 @@ noscript { width: 0; border: 0; border-style: solid; - border-color: var(--clr-border-primary); + border-color: var(--background-border-color); border-left-width: 1px; min-height: calc(100% - 60px); flex: 0 0 auto; @@ -9954,7 +10203,7 @@ noscript { h4 { font-size: 15px; text-transform: uppercase; - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 500; margin-bottom: 20px; } @@ -10005,7 +10254,7 @@ noscript { } &__mail { - color: var(--clr-text-primary); + color: $primary-text-color; text-decoration: none; font-weight: 500; @@ -10053,8 +10302,8 @@ noscript { line-height: 22px; padding: 20px; border-radius: 4px; - border: 1px solid var(--clr-border-primary); - color: var(--clr-text-accent); + border: 1px solid var(--background-border-color); + color: $highlight-text-color; cursor: pointer; width: 100%; background: none; @@ -10065,7 +10314,7 @@ noscript { } &__body { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; padding: 20px; font-size: 15px; @@ -10075,17 +10324,17 @@ noscript { &__domain-blocks { margin-top: 30px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px; &__domain { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); padding: 10px; font-size: 15px; - color: var(--clr-text-secondary); + color: $darker-text-color; &:nth-child(2n) { - background: var(--clr-bg-secondary); + background: darken($ui-base-color, 4%); } &:last-child { @@ -10101,7 +10350,7 @@ noscript { } h6 { - color: var(--clr-text-primary); + color: $secondary-text-color; font-size: inherit; white-space: nowrap; overflow: hidden; @@ -10136,14 +10385,14 @@ noscript { width: auto; padding: 15px; margin: 0; - color: var(--clr-text-on-inverted); - background: var(--clr-bg-inverted); + color: $white; + background: color.change($black, $alpha: 0.85); backdrop-filter: blur(8px); - border: 1px solid var(--clr-border-on-bg-inverted); + border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85); border-radius: 8px; box-shadow: - 0 10px 15px -3px var(--clr-shadow-primary), - 0 4px 6px -4px var(--clr-shadow-primary); + 0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25), + 0 4px 6px -4px color.change($base-shadow-color, $alpha: 0.25); cursor: default; font-size: 15px; line-height: 21px; @@ -10183,7 +10432,7 @@ noscript { background: transparent; text-transform: uppercase; cursor: pointer; - color: var(--clr-text-accent); + color: $blurple-300; font-weight: 700; border-radius: 4px; padding: 0 4px; @@ -10191,7 +10440,7 @@ noscript { &:hover, &:focus, &:active { - background: var(--clr-bg-accent-subtle); + background: color.change($white, $alpha: 0.15); } } @@ -10215,18 +10464,18 @@ noscript { margin-inline-start: 2px; svg { - color: var(--clr-text-on-media); + color: $white; height: var(--spinner-size); width: var(--spinner-size); } } .hashtag-header { - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); padding: 15px; font-size: 17px; line-height: 22px; - color: var(--clr-text-secondary); + color: $darker-text-color; strong { font-weight: 700; @@ -10240,7 +10489,7 @@ noscript { gap: 15px; h1 { - color: var(--clr-text-primary); + color: $primary-text-color; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -10261,7 +10510,7 @@ noscript { } .icon-button { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px; box-sizing: content-box; padding: 5px; @@ -10282,25 +10531,21 @@ noscript { font-size: 12px; line-height: 16px; gap: 6px; - color: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-secondary) - ); + color: $darker-text-color; a { display: inline-flex; color: inherit; text-decoration: none; padding: 4px 12px; - background: var(--clr-bg-accent-subtle); + background: var(--surface-variant-background-color); border-radius: 4px; font-weight: 500; &:hover, &:focus, &:active { - background: var(--clr-bg-accent-subtle-highlighted); + background: var(--surface-variant-active-background-color); } } @@ -10318,11 +10563,11 @@ noscript { gap: 12px; padding: 16px 0; padding-bottom: 0; - border-bottom: 1px solid var(--clr-border-primary); - background: var(--clr-bg-accent-subtle); + border-bottom: 1px solid var(--background-border-color); + background: color.change($ui-highlight-color, $alpha: 0.05); &.focusable:focus-visible { - background: var(--clr-bg-accent-subtle); + background: color.change($ui-highlight-color, $alpha: 0.05); } &__header { @@ -10359,7 +10604,7 @@ noscript { border: none; cursor: pointer; top: 0; - color: var(--clr-text-primary); + color: $primary-text-color; opacity: 0.5; &.left { @@ -10372,8 +10617,7 @@ noscript { &__icon { border-radius: 50%; - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + background: $ui-highlight-color; display: flex; align-items: center; justify-content: center; @@ -10390,6 +10634,10 @@ noscript { &:focus, &:active { opacity: 1; + + .inline-follow-suggestions__body__scroll-button__icon { + background: lighten($ui-highlight-color, 4%); + } } } @@ -10407,8 +10655,8 @@ noscript { scrollbar-width: none; &__card { - background: var(--clr-bg-primary); - border: 1px solid var(--clr-border-primary); + background: var(--background-color); + border: 1px solid var(--background-border-color); border-radius: 4px; display: flex; flex-direction: column; @@ -10445,8 +10693,8 @@ noscript { .account__avatar { flex-shrink: 0; align-self: flex-end; - border: 1px solid var(--clr-border-primary); - background-color: var(--clr-bg-tertiary); + border: 1px solid var(--background-border-color); + background-color: $ui-base-color; } &__text-stack { @@ -10463,7 +10711,7 @@ noscript { &__source { display: inline-flex; align-items: center; - color: var(--clr-text-tertiary); + color: $dark-text-color; gap: 4px; overflow: hidden; white-space: nowrap; @@ -10494,12 +10742,12 @@ noscript { &__html { font-size: 15px; font-weight: 500; - color: var(--clr-text-primary); + color: $secondary-text-color; } &__account { font-size: 14px; - color: var(--clr-text-secondary); + color: $darker-text-color; } } @@ -10520,16 +10768,16 @@ noscript { .filtered-notifications-banner { display: flex; align-items: center; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); padding: 16px 24px; gap: 8px; - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; &:hover, &:active, &:focus { - color: var(--clr-text-primary); + color: $secondary-text-color; } .notification-group__icon { @@ -10549,8 +10797,8 @@ noscript { } &__badge { - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + background: $ui-button-background-color; + color: $white; border-radius: 100px; padding: 2px 8px; } @@ -10563,7 +10811,7 @@ noscript { padding: $padding; gap: 8px; position: relative; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &__checkbox { position: absolute; @@ -10595,7 +10843,7 @@ noscript { &__name { flex: 1 1 auto; - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 14px; line-height: 20px; overflow: hidden; @@ -10608,7 +10856,7 @@ noscript { font-size: 16px; letter-spacing: 0.5px; line-height: 24px; - color: var(--clr-text-primary); + color: $secondary-text-color; bdi { overflow: hidden; @@ -10618,10 +10866,10 @@ noscript { } .filtered-notifications-banner__badge { - color: var(--clr-text-on-accent-strong); - background: var(--clr-bg-accent-strong); + background: $ui-button-background-color; border-radius: 4px; padding: 1px 6px; + color: $white; } } @@ -10632,7 +10880,7 @@ noscript { .icon-button { border-radius: 4px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); padding: 5px; } } @@ -10645,7 +10893,7 @@ noscript { cursor: pointer; &:hover { - background: var(--clr-bg-secondary); + background: var(--on-surface-color); } .notification-request__checkbox { @@ -10666,9 +10914,9 @@ noscript { .more-from-author { box-sizing: border-box; font-size: 14px; - color: var(--clr-text-secondary); - background: var(--clr-bg-tertiary); - border: 1px solid var(--clr-border-primary); + color: $darker-text-color; + background: var(--surface-background-color); + border: 1px solid var(--background-border-color); border-top: 0; border-radius: 0 0 8px 8px; padding: 15px; @@ -10680,7 +10928,7 @@ noscript { .logo { width: 16px; height: 16px; - color: var(--clr-text-secondary); + color: $darker-text-color; } & > span { @@ -10694,14 +10942,14 @@ noscript { align-items: center; gap: 4px; font-weight: 500; - color: var(--clr-text-primary); + color: $primary-text-color; text-decoration: none; min-width: 0; &:hover, &:focus, &:active { - color: var(--clr-text-accent); + color: $highlight-text-color; } } } @@ -10711,7 +10959,7 @@ noscript { align-items: flex-start; gap: 8px; padding: 16px 24px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &__icon { width: 40px; @@ -10719,7 +10967,7 @@ noscript { align-items: center; justify-content: center; flex: 0 0 auto; - color: var(--clr-text-tertiary); + color: $dark-text-color; .icon { width: 28px; @@ -10729,25 +10977,25 @@ noscript { &--follow &__icon, &--follow-request &__icon { - color: var(--clr-text-accent); + color: $highlight-text-color; } &--favourite &__icon { - color: var(--clr-text-favourite-highlight); + color: $gold-star; } &--reblog &__icon { - color: var(--clr-text-success); + color: $valid-value-color; } &--relationships-severance-event &__icon, &--admin-report &__icon, &--admin-sign-up &__icon { - color: var(--clr-text-tertiary); + color: $dark-text-color; } &--moderation-warning &__icon { - color: var(--clr-text-bookmark-highlight); + color: $red-bookmark; } &--follow-request &__actions { @@ -10756,7 +11004,7 @@ noscript { gap: 8px; .icon-button { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 50%; padding: 1px; } @@ -10786,7 +11034,7 @@ noscript { gap: 2px 8px; font-size: 15px; line-height: 22px; - color: var(--clr-text-secondary); + color: $darker-text-color; a { color: inherit; @@ -10795,11 +11043,11 @@ noscript { bdi { font-weight: 700; - color: var(--clr-text-primary); + color: $primary-text-color; } time { - color: var(--clr-text-tertiary); + color: $dark-text-color; } @container (width < 350px) { @@ -10812,13 +11060,13 @@ noscript { } &__status { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 8px; padding: 8px; } &__additional-content { - color: var(--clr-text-tertiary); + color: $dark-text-color; margin-top: -8px; // to offset the parent's `gap` property font-size: 15px; line-height: 22px; @@ -10840,12 +11088,12 @@ noscript { display: flex; align-items: center; gap: 4px; - color: var(--clr-text-tertiary); + color: $dark-text-color; font-size: 15px; line-height: 22px; bdi { - color: var(--clr-text-secondary); + color: $darker-text-color; } .account__avatar { @@ -10857,7 +11105,7 @@ noscript { display: -webkit-box; font-size: 15px; line-height: 22px; - color: var(--clr-text-secondary); + color: $darker-text-color; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; @@ -10878,7 +11126,7 @@ noscript { margin-top: 0; font-size: 15px; line-height: 22px; - color: var(--clr-text-tertiary); + color: $dark-text-color; } } } @@ -10893,13 +11141,13 @@ noscript { .notification-ungrouped { padding: 16px 24px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &__header { display: flex; align-items: center; gap: 8px; - color: var(--clr-text-tertiary); + color: $dark-text-color; font-size: 15px; line-height: 22px; font-weight: 500; @@ -10983,7 +11231,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - border-inline-start: 4px solid var(--clr-text-accent); + border-inline-start: 4px solid $highlight-text-color; pointer-events: none; } } @@ -10995,9 +11243,9 @@ noscript { .hover-card { box-shadow: var(--dropdown-shadow); - background: var(--clr-bg-primary); + background: var(--modal-background-color); backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--modal-border-color); border-radius: 8px; padding: 16px; width: 270px; @@ -11028,7 +11276,7 @@ noscript { &__numbers { font-size: 15px; line-height: 22px; - color: var(--clr-text-primary); + color: $secondary-text-color; strong { font-weight: 700; @@ -11042,7 +11290,7 @@ noscript { } &__bio { - color: var(--clr-text-primary); + color: $secondary-text-color; font-size: 14px; line-height: 20px; display: -webkit-box; @@ -11070,7 +11318,7 @@ noscript { &__note { &-label { - color: var(--clr-text-tertiary); + color: $dark-text-color; font-size: 12px; font-weight: 500; text-transform: uppercase; @@ -11078,7 +11326,7 @@ noscript { dd { white-space: pre-line; - color: var(--clr-text-primary); + color: $secondary-text-color; overflow: hidden; line-clamp: 3; // Not yet supported in browers display: -webkit-box; // The next 3 properties are needed @@ -11098,17 +11346,17 @@ noscript { bdi { font-weight: 500; - color: var(--clr-text-primary); + color: $primary-text-color; } &__account { display: block; - color: var(--clr-text-tertiary); + color: $dark-text-color; } } .account-fields { - color: var(--clr-text-primary); + color: $secondary-text-color; font-size: 14px; line-height: 20px; @@ -11130,7 +11378,7 @@ noscript { dt { flex: 0 1 auto; - color: var(--clr-text-tertiary); + color: $dark-text-color; min-width: 0; overflow: hidden; white-space: nowrap; @@ -11155,7 +11403,7 @@ noscript { gap: 4px; overflow: hidden; white-space: nowrap; - color: var(--clr-text-success); + color: $valid-value-color; & > span { overflow: hidden; @@ -11179,9 +11427,9 @@ noscript { .content-warning { display: block; box-sizing: border-box; - color: var(--clr-text-primary); - background: var(--clr-bg-accent-subtle); - border: 1px solid var(--clr-border-on-bg-accent-subtle); + background: var(--nested-card-background); + color: var(--nested-card-text); + border: var(--nested-card-border); border-radius: 8px; padding: 8px (5px + 8px); position: relative; @@ -11201,7 +11449,7 @@ noscript { } &--filter { - color: var(--clr-text-secondary); + color: $darker-text-color; p { font-weight: normal; @@ -11209,7 +11457,7 @@ noscript { .filter-name { font-weight: 500; - color: var(--clr-text-primary); + color: $secondary-text-color; } } } @@ -11219,7 +11467,7 @@ noscript { align-items: center; gap: 16px; padding-inline-end: 13px; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); &__title { display: flex; @@ -11229,13 +11477,13 @@ noscript { flex: 1 1 auto; font-size: 16px; line-height: 24px; - color: var(--clr-text-secondary); + color: $secondary-text-color; text-decoration: none; &:is(a):hover, &:is(a):focus, &:is(a):active { - color: var(--clr-text-primary); + color: $primary-text-color; } input { @@ -11250,7 +11498,7 @@ noscript { color: inherit; &::placeholder { - color: var(--clr-text-secondary); + color: var(--input-placeholder-color); opacity: 1; } @@ -11265,16 +11513,16 @@ noscript { display: flex; gap: 12px; align-items: center; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; border-bottom: 0; padding: 16px; padding-bottom: 8px; input { - background: var(--clr-bg-secondary); - border: 1px solid var(--clr-border-primary); - color: var(--clr-text-primary); + background: var(--input-background-color); + border: 1px solid var(--background-border-color); + color: var(--on-input-color); padding: 12px; font-size: 16px; line-height: normal; @@ -11283,7 +11531,7 @@ noscript { flex: 1 1 auto; &::placeholder { - color: var(--clr-text-secondary); + color: var(--input-placeholder-color); opacity: 1; } @@ -11304,7 +11552,7 @@ noscript { .featured-carousel { overflow: hidden; flex-shrink: 0; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); touch-action: pan-y; &__slides { @@ -11326,7 +11574,7 @@ noscript { &__header { padding: 8px 16px; - color: var(--clr-text-secondary); + color: $darker-text-color; 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 6e29a22c8d7..7db9ca409d7 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: var(--clr-text-primary); + color: $primary-text-color; 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(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); @media screen and (width <= 440px) { width: 100%; @@ -89,7 +89,7 @@ .name { flex: 1 1 auto; - color: var(--clr-text-primary); + color: $secondary-text-color; .username { display: block; @@ -97,7 +97,7 @@ line-height: 24px; text-overflow: ellipsis; overflow: hidden; - color: var(--clr-text-primary); + color: $primary-text-color; } } @@ -148,7 +148,7 @@ } a { - color: var(--clr-text-accent); + color: $highlight-text-color; 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 e5872bb6968..78915ae10ee 100644 --- a/app/javascript/styles/mastodon/css_variables.scss +++ b/app/javascript/styles/mastodon/css_variables.scss @@ -1,206 +1,42 @@ -@use 'theme_utils' as utils; +@use 'sass:color'; +@use 'functions' as *; +@use 'variables' as *; :root { - --clr-black: #000; - --clr-grey-950: #181821; - --clr-grey-800: #292938; - --clr-grey-700: #444664; - --clr-grey-600: #545778; - --clr-grey-500: #696d91; - --clr-grey-400: #8b8dac; - --clr-grey-300: #b4b6cb; - --clr-grey-200: #d8d9e3; - --clr-grey-100: #f0f0f5; - --clr-grey-50: #f0f1ff; - --clr-white: #fff; - --clr-indigo-600: #6147e6; - --clr-indigo-400: #8886ff; - --clr-indigo-300: #a5abfd; - --clr-indigo-200: #c8cdfe; - --clr-indigo-100: #e0e3ff; - --clr-indigo-50: #f0f1ff; - --clr-red-500: #ff637e; - --clr-red-600: #ec003f; - --clr-yellow-400: #ffb900; - --clr-yellow-600: #e17100; - --clr-green-400: #05df72; - --clr-green-600: #00a63e; - - /* TEXT TOKENS */ - - --clr-text-primary: var(--clr-grey-50); - --clr-text-secondary: var(--clr-grey-400); - --clr-text-tertiary: var(--clr-grey-500); - --clr-text-on-inverted: var(--clr-grey-950); - --clr-text-accent: var(--clr-indigo-400); - --clr-text-accent-subtle: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-accent) - ); - --clr-text-on-accent-strong: var(--clr-white); - --clr-text-error: var(--clr-red-500); - --clr-text-on-error-strong: var(--clr-white); - --clr-text-warning: var(--clr-yellow-400); - --clr-text-on-warning-strong: var(--clr-white); - --clr-text-success: var(--clr-green-400); - --clr-text-on-success-strong: var(--clr-white); - --clr-text-disabled: var(--clr-grey-600); - --clr-text-on-disabled: var(--clr-grey-400); - --clr-text-bookmark-highlight: var(--clr-text-error); - --clr-text-favourite-highlight: var(--clr-text-warning); - --clr-text-on-media: var(--clr-white); - --clr-text-status-links: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-secondary) - ); - - /* BACKGROUND TOKENS */ - - --clr-bg-primary: var(--clr-grey-950); - --clr-bg-secondary-base: var(--clr-indigo-200); - --clr-bg-secondary-strength: 10%; - --clr-bg-secondary: #{utils.css-alpha( - var(--clr-bg-secondary-base), - var(--clr-bg-secondary-strength) - )}; - --clr-bg-secondary-solid: color-mix( - in srgb, - var(--clr-bg-primary), - var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength) - ); - - /* Secondary with doubled mix amount */ - --clr-bg-tertiary: color-mix( - in oklab, - var(--clr-bg-primary), - var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength)) - ); - --clr-bg-ambient: var(--clr-bg-primary); - --clr-bg-elevated: var(--clr-grey-800); - --clr-bg-inverted: var(--clr-grey-50); - --clr-bg-media-base: var(--clr-black); - --clr-bg-media-strength: 65%; - --clr-bg-media: #{utils.css-alpha( - var(--clr-bg-media-base), - var(--clr-bg-media-strength) - )}; - --clr-bg-overlay: var(--clr-bg-primary); - --clr-bg-disabled: var(--clr-grey-700); - --clr-bg-accent-subtle-base: var(--clr-indigo-400); - --clr-bg-accent-subtle-strength: 10%; - --clr-bg-accent-subtle: #{utils.css-alpha( - var(--clr-bg-accent-subtle-base), - var(--clr-bg-accent-subtle-strength) - )}; - --clr-bg-accent-subtle-highlighted: #{utils.css-alpha( - var(--clr-bg-accent-subtle-base), - calc(var(--clr-bg-accent-subtle-strength) * 1.5) - )}; - --clr-bg-accent-strong: var(--clr-indigo-600); - --clr-bg-accent-strong-highlighted: color-mix( - in oklab, - var(--clr-bg-accent-strong), - black var(--clr-bg-accent-subtle-strength) - ); - --clr-bg-error-subtle-base: #f41b3b; - --clr-bg-error-subtle-strength: 12%; - --clr-bg-error-subtle: #{utils.css-alpha( - var(--clr-bg-error-subtle-base), - var(--clr-bg-error-subtle-strength) - )}; - --clr-bg-error-strong: var(--clr-red-600); - --clr-bg-error-strong-highlighted: color-mix( - in oklab, - var(--clr-bg-error-strong), - black var(--clr-bg-error-subtle-strength) - ); - --clr-bg-warning-subtle-base: #ffca1b; - --clr-bg-warning-subtle-strength: 10%; - --clr-bg-warning-subtle: #{utils.css-alpha( - var(--clr-bg-warning-subtle-base), - var(--clr-bg-warning-subtle-strength) - )}; - --clr-bg-warning-strong: var(--clr-yellow-600); - --clr-bg-warning-strong-highlighted: color-mix( - in oklab, - var(--clr-bg-warning-strong), - black var(--clr-bg-warning-subtle-strength) - ); - --clr-bg-success-subtle-base: #17e865; - --clr-bg-success-subtle-strength: 15%; - --clr-bg-success-subtle: #{utils.css-alpha( - var(--clr-bg-success-subtle-base), - var(--clr-bg-success-subtle-strength) - )}; - --clr-bg-success-strong: var(--clr-green-600); - --clr-bg-success-strong-highlighted: color-mix( - in oklab, - var(--clr-bg-success-strong), - black var(--clr-bg-success-subtle-strength) - ); - - /* BORDER TOKENS */ - - --clr-border-primary-base: var(--clr-indigo-200); - --clr-border-primary-strength: 18%; - --clr-border-primary: #{utils.css-alpha( - var(--clr-border-primary-base), - var(--clr-border-primary-strength) - )}; - --clr-border-media: rgb(252 248 255 / 15%); - --clr-border-on-bg-secondary: #{utils.css-alpha( - var(--clr-border-primary-base), - calc(var(--clr-border-primary-strength) / 1.5) - )}; - --clr-border-on-bg-accent-subtle: var(--clr-border-primary); - --clr-border-on-bg-error-subtle: #{utils.css-alpha( - var(--clr-text-error), - 50% - )}; - --clr-border-on-bg-warning-subtle: #{utils.css-alpha( - var(--clr-text-warning), - 50% - )}; - --clr-border-on-bg-success-subtle: #{utils.css-alpha( - var(--clr-text-success), - 50% - )}; - --clr-border-on-bg-inverted: var(--clr-border-primary); - - /* SHADOW TOKENS */ - - --clr-shadow-primary-base: var(--clr-black); - --clr-shadow-primary-strength: 80%; - --clr-shadow-primary: #{utils.css-alpha( - var(--clr-shadow-primary-base), - var(--clr-shadow-primary-strength) - )}; + --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 var(--clr-shadow-primary), - 0 8px 10px -6px var(--clr-shadow-primary); - --overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary)); - - /* GRAPHS/CHARTS TOKENS */ - - --clr-graph-primary-stroke: var(--clr-text-accent); - --clr-graph-primary-fill: var(--clr-bg-accent-subtle); - --clr-graph-warning-stroke: var(--clr-text-warning); - --clr-graph-warning-fill: var(--clr-bg-warning-subtle); - --clr-graph-disabled-stroke: var(--clr-text-disabled); - --clr-graph-disabled-fill: var(--clr-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(--clr-text-accent); + 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)} + ); + --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}; } body { diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss index c53113a995c..8326022f71a 100644 --- a/app/javascript/styles/mastodon/dashboard.scss +++ b/app/javascript/styles/mastodon/dashboard.scss @@ -1,3 +1,4 @@ +@use 'functions' as *; @use 'variables' as *; .dashboard__counters { @@ -15,9 +16,9 @@ & > div, & > a { padding: 20px; - background: var(--clr-bg-primary); + background: var(--background-color); border-radius: 4px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); box-sizing: border-box; height: 100%; } @@ -30,7 +31,7 @@ &:hover, &:focus, &:active { - background: var(--clr-bg-accent-subtle); + background: $ui-base-color; } } } @@ -40,7 +41,7 @@ text-align: center; font-weight: 500; font-size: 24px; - color: var(--clr-text-primary); + color: $primary-text-color; margin-bottom: 20px; line-height: 30px; } @@ -51,7 +52,7 @@ &__label { font-size: 14px; - color: var(--clr-text-secondary); + color: $darker-text-color; text-align: center; font-weight: 500; } @@ -84,8 +85,8 @@ display: flex; align-items: baseline; border-radius: 4px; - background: var(--clr-bg-accent-strong); - color: var(--clr-text-on-accent-strong); + background: $ui-button-background-color; + color: $primary-text-color; transition: all 100ms ease-in; font-size: 14px; padding: 8px 16px; @@ -95,18 +96,18 @@ &:active, &:focus, &:hover { - background-color: var(--clr-bg-accent-strong-highlighted); + background-color: $ui-button-focus-background-color; transition: all 200ms ease-out; } &.positive { - background: var(--clr-bg-success-subtle); - color: var(--clr-text-success); + background: lighten($ui-base-color, 4%); + color: $valid-value-color; } &.negative { - background: var(--clr-bg-error-subtle); - color: var(--clr-text-error); + background: lighten($ui-base-color, 4%); + color: $error-value-color; } span { diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 0ee977c36b2..716c790e656 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -1,4 +1,5 @@ @use 'variables' as *; +@use 'functions' as *; .emoji-mart { font-size: 13px; @@ -17,8 +18,7 @@ .emoji-mart-bar { &:first-child { - background: var(--clr-bg-tertiary); - border-bottom: 1px solid var(--clr-border-primary); + background: var(--dropdown-border-color); } } @@ -39,22 +39,18 @@ cursor: pointer; background: transparent; border: 0; - color: var(--clr-text-secondary); + color: $darker-text-color; &:hover { - color: color-mix( - in oklab, - var(--clr-text-primary), - var(--clr-text-secondary) - ); + color: lighten($darker-text-color, 4%); } } .emoji-mart-anchor-selected { - color: var(--clr-text-accent); + color: $highlight-text-color; &:hover { - color: var(--clr-text-accent-subtle); + color: lighten($highlight-text-color, 4%); } .emoji-mart-anchor-bar { @@ -68,7 +64,7 @@ inset-inline-start: 0; width: 100%; height: 4px; - background-color: var(--clr-text-accent); + background-color: $highlight-text-color; } .emoji-mart-anchors { @@ -105,9 +101,9 @@ font-family: inherit; display: block; width: 100%; - background: var(--clr-bg-secondary); - color: var(--clr-text-secondary); - border: 1px solid var(--clr-border-primary); + background: $ui-base-color; + color: $darker-text-color; + border: 1px solid var(--background-border-color); border-radius: 4px; &::-moz-focus-inner { @@ -137,6 +133,7 @@ transition: all 100ms linear; transition-property: opacity; pointer-events: auto; + opacity: 0.7; &:disabled { cursor: default; @@ -144,7 +141,7 @@ } svg { - fill: currentColor; + fill: $darker-text-color; } } @@ -168,7 +165,7 @@ inset-inline-start: 0; width: 100%; height: 100%; - background-color: var(--clr-bg-accent-subtle); + background-color: var(--dropdown-border-color); border-radius: 100%; } } @@ -228,7 +225,7 @@ .emoji-mart-no-results { font-size: 14px; - color: var(--clr-text-tertiary); + color: $dark-text-color; 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 dc25b136cfe..e0ccd0a27fd 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -1,5 +1,6 @@ @use 'sass:color'; @use 'variables' as *; +@use 'functions' as *; code { font-family: $font-monospace, monospace; @@ -15,7 +16,7 @@ code { .form-section { border-radius: 8px; - background: var(--clr-bg-secondary); + background: var(--surface-background-color); padding: 24px; margin-bottom: 24px; } @@ -32,7 +33,7 @@ code { display: block; background: linear-gradient( to bottom, - var(--clr-bg-secondary-solid), + var(--surface-background-color), transparent ); position: absolute; @@ -57,16 +58,14 @@ code { width: 40px; height: 40px; border-radius: 50%; - color: var(--clr-text-primary); + color: $primary-text-color; &.success { - color: var(--clr-text-on-success-strong); - background: var(--clr-bg-success-strong); + background: $success-green; } &.failure { - color: var(--clr-text-on-error-strong); - background: var(--clr-bg-error-strong); + background: $error-red; } } @@ -127,7 +126,7 @@ code { font-family: inherit; font-size: 14px; padding-top: 5px; - color: var(--clr-text-primary); + color: $primary-text-color; display: block; width: auto; } @@ -148,7 +147,7 @@ code { } label a { - color: var(--clr-text-accent); + color: $highlight-text-color; text-decoration: underline; &:hover, @@ -190,7 +189,7 @@ code { .lead { font-size: 17px; line-height: 22px; - color: var(--clr-text-primary); + color: $secondary-text-color; margin-bottom: 30px; &.invited-by { @@ -198,7 +197,7 @@ code { } a { - color: var(--clr-text-accent); + color: $highlight-text-color; } } @@ -209,16 +208,16 @@ code { } .hint { - color: var(--clr-text-secondary); + color: $darker-text-color; a { - color: var(--clr-text-accent); + color: $highlight-text-color; } code { border-radius: 3px; padding: 0.2em 0.4em; - background: var(--clr-bg-secondary); + background: darken($ui-base-color, 12%); } li { @@ -243,7 +242,7 @@ code { p.hint { margin-bottom: 15px; - color: var(--clr-text-secondary); + color: $darker-text-color; &.subtle-hint { text-align: center; @@ -279,7 +278,7 @@ code { & > label { font-family: inherit; font-size: 14px; - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 500; min-width: 150px; flex: 0 0 auto; @@ -301,7 +300,7 @@ code { .label_input > label { font-family: inherit; font-size: 14px; - color: var(--clr-text-primary); + color: $primary-text-color; display: block; margin-bottom: 8px; overflow-wrap: break-word; @@ -323,7 +322,7 @@ code { & > label { font-family: inherit; font-size: 14px; - color: var(--clr-text-primary); + color: $primary-text-color; display: block; font-weight: 600; line-height: 20px; @@ -382,7 +381,7 @@ code { .required abbr { text-decoration: none; - color: var(--clr-text-error); + color: lighten($error-value-color, 12%); } .fields-group { @@ -475,7 +474,7 @@ code { margin-bottom: 5px; font-family: inherit; font-size: 14px; - color: var(--clr-text-primary); + color: $primary-text-color; display: block; width: auto; } @@ -485,7 +484,7 @@ code { label { font-family: inherit; font-size: 14px; - color: var(--clr-text-primary); + color: $primary-text-color; display: inline-block; width: auto; position: relative; @@ -506,7 +505,7 @@ code { .input.static .label_input__wrapper { font-size: 14px; padding: 10px; - border: 1px solid var(--clr-border-primary); + border: 1px solid $dark-text-color; border-radius: 4px; } @@ -520,14 +519,14 @@ code { box-sizing: border-box; font-size: 14px; line-height: 20px; - color: var(--clr-text-primary); + color: $primary-text-color; display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; - background: var(--clr-bg-secondary); - border: 1px solid var(--clr-border-primary); + background: $ui-base-color; + border: 1px solid var(--background-border-color); border-radius: 4px; padding: 10px 16px; @@ -536,7 +535,7 @@ code { } &:required:valid { - border-color: var(--clr-text-success); + border-color: $valid-value-color; } @media screen and (width <= 600px) { @@ -551,13 +550,13 @@ code { input[type='datetime-local'] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { - border-color: var(--clr-text-error); + border-color: lighten($error-red, 12%); } } .input.field_with_errors { label { - color: var(--clr-text-error); + color: lighten($error-red, 12%); } input[type='text'], @@ -567,13 +566,13 @@ code { input[type='datetime-local'], textarea, select { - border-color: var(--clr-text-error); + border-color: lighten($error-red, 12%); } .error { display: block; font-weight: 500; - color: var(--clr-text-error); + color: lighten($error-red, 12%); margin-top: 4px; } } @@ -606,8 +605,8 @@ code { width: 100%; border: 0; border-radius: 4px; - background: var(--clr-bg-accent-strong); - color: var(--clr-text-on-accent-strong); + background: $ui-button-background-color; + color: $ui-button-color; font-size: 15px; line-height: 22px; height: auto; @@ -626,22 +625,21 @@ code { &:active, &:focus, &:hover { - background: var(--clr-bg-accent-strong-highlighted); + background-color: $ui-button-focus-background-color; } &:disabled, &:disabled:hover { - color: var(--clr-text-on-disabled); - background: var(--clr-bg-disabled); + background-color: $ui-button-disabled-color; } &.negative { - background: var(--clr-bg-error-strong); + background: $ui-button-destructive-background-color; &:hover, &:active, &:focus { - background: var(--clr-bg-error-strong-highlighted); + background-color: $ui-button-destructive-focus-background-color; } } } @@ -650,14 +648,16 @@ code { appearance: none; box-sizing: border-box; font-size: 14px; - color: var(--clr-text-primary); + color: $primary-text-color; display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; - background: var(--clr-bg-secondary); - border: 1px solid var(--clr-border-primary); + background: $ui-base-color + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 14px; + border: 1px solid var(--background-border-color); border-radius: 4px; padding-inline-start: 10px; padding-inline-end: 30px; @@ -695,7 +695,7 @@ code { top: 1px; padding: 10px; font-size: 14px; - color: var(--clr-text-tertiary); + color: $dark-text-color; font-family: inherit; pointer-events: none; cursor: default; @@ -721,29 +721,6 @@ 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(--clr-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; @@ -752,30 +729,30 @@ code { } .flash-message { - color: var(--clr-text-accent); - background: transparent; - border: 1px solid var(--clr-text-accent); + background: var(--background-color); + color: $highlight-text-color; + border: 1px solid $highlight-text-color; border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; text-align: center; &.notice { - border: 1px solid var(--clr-border-on-bg-success-subtle); - background: var(--clr-bg-success-subtle); - color: var(--clr-text-success); + border: 1px solid color.change($valid-value-color, $alpha: 0.5); + background: color.change($valid-value-color, $alpha: 0.25); + color: $valid-value-color; } &.warning { - border: 1px solid var(--clr-border-on-bg-warning-subtle); - background: var(--clr-bg-warning-subtle); - color: var(--clr-text-warning); + border: 1px solid color.change($gold-star, $alpha: 0.5); + background: color.change($gold-star, $alpha: 0.25); + color: $gold-star; } &.alert { - border: 1px solid var(--clr-border-on-bg-error-subtle); - background: var(--clr-bg-error-subtle); - color: var(--clr-text-error); + border: 1px solid color.change($error-value-color, $alpha: 0.5); + background: color.change($error-value-color, $alpha: 0.1); + color: $error-value-color; } &.hidden { @@ -790,11 +767,11 @@ code { a { display: inline-block; - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; &:hover { - color: var(--clr-text-primary); + color: $primary-text-color; text-decoration: underline; } } @@ -824,8 +801,8 @@ code { border: 0; padding: 10px; font-family: $font-monospace, monospace; - background: var(--clr-bg-secondary); - color: var(--clr-text-primary); + background: $ui-base-color; + color: $primary-text-color; font-size: 14px; margin: 0; @@ -840,7 +817,7 @@ code { } &:focus { - background: var(--clr-bg-accent-subtle); + background: lighten($ui-base-color, 4%); } } @@ -896,7 +873,7 @@ code { text-align: center; a { - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; &:hover { @@ -916,7 +893,7 @@ code { } a { - color: var(--clr-text-accent); + color: $highlight-text-color; text-transform: uppercase; text-decoration: none; font-weight: 700; @@ -924,7 +901,7 @@ code { &:hover, &:focus, &:active { - color: var(--clr-text-accent-subtle); + color: lighten($highlight-text-color, 8%); } } } @@ -932,7 +909,7 @@ code { .oauth-prompt, .follow-prompt { margin-bottom: 30px; - color: var(--clr-text-secondary); + color: $darker-text-color; h2 { font-size: 16px; @@ -941,7 +918,7 @@ code { } strong { - color: var(--clr-text-primary); + color: $secondary-text-color; font-weight: 500; @each $lang in $cjk-langs { @@ -954,7 +931,7 @@ code { .oauth-prompt { h3 { - color: var(--clr-text-primary); + color: $ui-secondary-color; font-size: 17px; line-height: 22px; font-weight: 500; @@ -968,9 +945,9 @@ code { } .permissions-list { - border: 1px solid var(--clr-border-primary); + border: 1px solid $ui-base-color; border-radius: 4px; - background: var(--clr-bg-secondary); + background: darken($ui-base-color, 4%); margin-bottom: 30px; } @@ -996,10 +973,10 @@ code { .qr-code { flex: 0 0 auto; - background: white; + background: $simple-background-color; padding: 4px; margin: 0 10px 20px 0; - box-shadow: 0 0 15px var(--clr-shadow-primary); + box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2); display: inline-block; svg { @@ -1010,7 +987,7 @@ code { .qr-alternative { margin-bottom: 20px; - color: var(--clr-text-primary); + color: $secondary-text-color; flex: 150px; samp { @@ -1019,6 +996,42 @@ 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; @@ -1038,7 +1051,7 @@ code { .post-follow-actions { text-align: center; - color: var(--clr-text-secondary); + color: $darker-text-color; div { margin-bottom: 4px; @@ -1051,7 +1064,7 @@ code { h4 { font-size: 16px; - color: var(--clr-text-primary); + color: $primary-text-color; text-align: center; margin-bottom: 20px; border: 0; @@ -1064,7 +1077,7 @@ code { } .scope-danger { - color: var(--clr-text-error); + color: $warning-red; } .form_admin_settings_site_short_description, @@ -1079,9 +1092,8 @@ code { } .input-copy { - color: var(--clr-text-primary); - background: var(--clr-bg-secondary); - border: 1px solid var(--clr-border-primary); + background: darken($ui-base-color, 10%); + border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; display: flex; align-items: center; @@ -1115,11 +1127,11 @@ code { } &.copied { - border-color: var(--clr-text-success); + border-color: $valid-value-color; transition: none; button { - background: var(--clr-bg-success-strong); + background: $valid-value-color; transition: none; } } @@ -1141,8 +1153,8 @@ code { .permissions-list { &__item { padding: 15px; - color: var(--clr-text-primary); - border-bottom: 1px solid var(--clr-border-primary); + color: $ui-secondary-color; + border-bottom: 1px solid lighten($ui-base-color, 4%); display: flex; align-items: center; @@ -1154,7 +1166,7 @@ code { } &__type { - color: var(--clr-text-secondary); + color: $darker-text-color; overflow-wrap: anywhere; } } @@ -1163,7 +1175,7 @@ code { flex: 0 0 auto; font-size: 18px; width: 30px; - color: var(--clr-text-success); + color: $valid-value-color; display: flex; align-items: center; } @@ -1218,6 +1230,7 @@ code { align-items: center; padding-bottom: 30px; margin-bottom: 30px; + color: $white; li { flex: 0 0 auto; @@ -1226,11 +1239,11 @@ code { .separator { height: 2px; - background: var(--clr-border-primary); + background: $ui-base-lighter-color; flex: 1 1 auto; &.completed { - background: var(--clr-text-accent); + background: $highlight-text-color; } } @@ -1240,7 +1253,7 @@ code { width: 30px; height: 30px; border-radius: 50%; - border: 2px solid var(--clr-border-primary); + border: 2px solid $ui-base-lighter-color; flex: 0 0 auto; display: flex; align-items: center; @@ -1255,7 +1268,7 @@ code { position: absolute; font-size: 14px; font-weight: 500; - color: var(--clr-text-primary); + color: $secondary-text-color; padding-top: 10px; text-align: center; width: 100px; @@ -1278,14 +1291,14 @@ code { } .active .circle { - border-color: var(--clr-text-accent); + border-color: $highlight-text-color; &::before { content: ''; width: 10px; height: 10px; border-radius: 50%; - background: var(--clr-text-accent); + background: $highlight-text-color; position: absolute; left: 50%; top: 50%; @@ -1294,8 +1307,8 @@ code { } .completed .circle { - border-color: var(--clr-text-accent); - background: var(--clr-text-accent); + border-color: $highlight-text-color; + background: $highlight-text-color; } } @@ -1306,14 +1319,10 @@ code { &__header-input { display: block; border-radius: 8px; - background: var(--clr-bg-secondary); + background: var(--surface-variant-background-color); position: relative; cursor: pointer; - &:hover { - background-color: var(--clr-bg-accent-subtle); - } - img { position: absolute; width: 100%; @@ -1328,12 +1337,12 @@ code { inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); - color: var(--clr-text-secondary); + color: $darker-text-color; z-index: 3; } &.selected .icon { - color: var(--clr-text-primary); + color: $primary-text-color; transform: none; inset-inline-start: auto; inset-inline-end: 8px; @@ -1342,7 +1351,7 @@ code { } &.invalid img { - outline: 1px solid var(--clr-text-error); + outline: 1px solid $error-value-color; outline-offset: -1px; } @@ -1352,10 +1361,14 @@ code { width: 100%; height: 100%; position: absolute; - background: var(--clr-bg-error-subtle); + background: color.change($error-value-color, $alpha: 0.25); z-index: 2; border-radius: 8px; } + + &:hover { + background-color: var(--surface-variant-active-background-color); + } } &__avatar-input { @@ -1371,7 +1384,7 @@ code { display: flex; align-items: center; gap: 16px; - color: var(--clr-text-secondary); + color: $darker-text-color; font-size: 14px; line-height: 20px; @@ -1388,14 +1401,14 @@ code { flex: 1 1 auto; strong { - color: var(--clr-text-primary); + color: $primary-text-color; font-weight: 600; } .hint { display: block; font-size: 14px; - color: var(--clr-text-secondary); + color: $darker-text-color; } .recommended { @@ -1413,7 +1426,7 @@ code { &__toggle > div { display: flex; - border-inline-start: 1px solid var(--clr-border-primary); + border-inline-start: 1px solid var(--background-border-color); padding-inline-start: 16px; } } @@ -1424,19 +1437,19 @@ code { padding: 8px 0; align-items: center; text-decoration: none; - color: var(--clr-text-primary); + color: $primary-text-color; margin-bottom: 16px; &__text { flex: 1 1 auto; font-size: 14px; line-height: 20px; - color: var(--clr-text-secondary); + color: $darker-text-color; strong { font-weight: 600; display: block; - color: var(--clr-text-primary); + color: $primary-text-color; } .icon { diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index e58d60adc64..7d060a2681a 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -1,7 +1,10 @@ @use 'variables' as *; +@use 'functions' as *; .modal-layout { - background: var(--clr-bg-accent-subtle); + background: darken($ui-base-color, 4%) + url('data:image/svg+xml;utf8,') + repeat-x bottom fixed; display: flex; flex-direction: column; height: 100vh; @@ -35,19 +38,3 @@ margin-top: 0; } } - -.with-zig-zag-decoration { - &::after { - content: ''; - position: absolute; - inset: auto 0 0; - height: 32px; - background-color: var(--clr-bg-accent-subtle); - - /* 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 d384e1c3fa4..e8f2f5c3940 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -1,5 +1,6 @@ @use 'sass:color'; @use 'variables' as *; +@use 'functions' as *; .poll { margin-top: 16px; @@ -13,12 +14,12 @@ &__chart { border-radius: 4px; display: block; - background: rgb(from var(--clr-text-accent) r g b / 60%); + background: darken($ui-primary-color, 5%); height: 5px; min-width: 1%; &.leading { - background: var(--clr-text-accent); + background: $ui-highlight-color; } } @@ -38,12 +39,12 @@ // duplication &::-moz-progress-bar { border-radius: 4px; - background: rgb(from var(--clr-text-accent) r g b / 60%); + background: darken($ui-primary-color, 5%); } &::-webkit-progress-value { border-radius: 4px; - background: rgb(from var(--clr-text-accent) r g b / 60%); + background: darken($ui-primary-color, 5%); } } @@ -77,16 +78,16 @@ box-sizing: border-box; width: 100%; font-size: 14px; - color: var(--clr-text-primary); + color: $secondary-text-color; outline: 0; font-family: inherit; - background: var(--clr-bg-primary); - border: 1px solid var(--clr-text-secondary); + background: $ui-base-color; + border: 1px solid $darker-text-color; border-radius: 4px; padding: 8px 12px; &:focus { - border-color: var(--clr-text-accent); + border-color: $ui-highlight-color; } @media screen and (width <= 600px) { @@ -110,7 +111,7 @@ &__input { display: block; position: relative; - border: 1px solid var(--clr-text-secondary); + border: 1px solid $ui-primary-color; box-sizing: border-box; width: 17px; height: 17px; @@ -124,13 +125,13 @@ &:active, &:focus, &:hover { - border-color: var(--clr-text-success); + border-color: lighten($valid-value-color, 15%); border-width: 4px; } &.active { - background-color: var(--clr-bg-success-strong); - border-color: var(--clr-text-success); + background-color: $valid-value-color; + border-color: $valid-value-color; } &::-moz-focus-inner { @@ -144,16 +145,16 @@ } &.disabled { - border-color: var(--clr-text-disabled); + border-color: $dark-text-color; &.active { - background: var(--clr-text-disabled); + background: $dark-text-color; } &:active, &:focus, &:hover { - border-color: var(--clr-text-disabled); + border-color: $dark-text-color; border-width: 1px; } } @@ -164,7 +165,7 @@ &:active, &:focus, &:hover { - border-color: var(--clr-text-primary); + border-color: $ui-primary-color; border-width: 1px; } } @@ -188,7 +189,7 @@ &__footer { padding-top: 6px; padding-bottom: 5px; - color: var(--clr-text-tertiary); + color: $dark-text-color; } &__link { @@ -197,7 +198,7 @@ padding: 0; margin: 0; border: 0; - color: var(--clr-text-tertiary); + color: $dark-text-color; text-decoration: underline; font-size: inherit; @@ -207,7 +208,7 @@ &:active, &:focus { - background-color: var(--clr-bg-secondary); + background-color: color.change($dark-text-color, $alpha: 0.1); } } @@ -220,13 +221,13 @@ } .muted .poll { - color: var(--clr-text-tertiary); + color: $dark-text-color; &__chart { - background: rgb(from var(--clr-text-accent) r g b / 40%); + background: rgba(darken($ui-primary-color, 14%), 0.7); &.leading { - background: rgb(from var(--clr-text-accent) r g b / 60%); + background: color.change($ui-highlight-color, $alpha: 0.5); } } } diff --git a/app/javascript/styles/mastodon/reset.scss b/app/javascript/styles/mastodon/reset.scss index f88d7a84eb2..2dce637a061 100644 --- a/app/javascript/styles/mastodon/reset.scss +++ b/app/javascript/styles/mastodon/reset.scss @@ -1,3 +1,5 @@ +@use 'variables' as *; + /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -53,6 +55,32 @@ table { border-spacing: 0; } -html:has(body.custom-scrollbars) { - scrollbar-color: var(--clr-text-secondary) var(--clr-bg-secondary); +@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; + } } diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 48935b75d74..6aa94a97bcf 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -1,3 +1,4 @@ +@use 'functions' as *; @use 'variables' as *; body.rtl { @@ -41,6 +42,12 @@ 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 2e049e22212..e82f2b551c1 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -1,4 +1,5 @@ @use 'variables' as *; +@use 'functions' as *; .table { width: 100%; @@ -11,13 +12,13 @@ padding: 8px; line-height: 18px; vertical-align: top; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--background-border-color); text-align: start; - background: var(--clr-bg-primary); + background: var(--background-color); &.critical { font-weight: 700; - color: var(--clr-text-warning); + color: $gold-star; } } @@ -32,7 +33,7 @@ & > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th { - background: var(--clr-bg-primary); + background: var(--background-color); } & > tbody > tr:last-child > td, @@ -41,11 +42,11 @@ } a { - color: var(--clr-text-secondary); + color: $darker-text-color; text-decoration: none; &:hover { - color: var(--clr-text-accent); + color: $highlight-text-color; } } @@ -83,30 +84,30 @@ & > tbody > tr > td { padding: 11px 10px; background: transparent; - border: 1px solid var(--clr-border-primary); - color: var(--clr-text-primary); + border: 1px solid var(--background-border-color); + color: $secondary-text-color; } & > tbody > tr > th { - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 600; } } &.batch-table { & > thead > tr > th { - background: var(--clr-bg-primary); - border-top: 1px solid var(--clr-border-primary); - border-bottom: 1px solid var(--clr-border-primary); + background: var(--background-color); + border-top: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--background-border-color); &:first-child { border-radius: 4px 0 0; - border-inline-start: 1px solid var(--clr-border-primary); + border-inline-start: 1px solid var(--background-border-color); } &:last-child { border-radius: 0 4px 0 0; - border-inline-end: 1px solid var(--clr-border-primary); + border-inline-end: 1px solid var(--background-border-color); } } } @@ -137,12 +138,12 @@ a.table-action-link { display: inline-block; margin-inline-end: 5px; padding: 0 10px; - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 500; white-space: nowrap; &:hover { - color: var(--clr-text-accent); + color: $highlight-text-color; } &:first-child { @@ -195,8 +196,8 @@ a.table-action-link { position: sticky; top: 0; z-index: 200; - border: 1px solid var(--clr-border-primary); - background: var(--clr-bg-primary); + border: 1px solid var(--background-border-color); + background: var(--background-color); border-radius: 4px 4px 0 0; height: 47px; align-items: center; @@ -212,13 +213,13 @@ a.table-action-link { } &__select-all { - background: var(--clr-bg-primary); + background: var(--background-color); height: 47px; align-items: center; justify-content: center; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; - color: var(--clr-text-primary); + color: $secondary-text-color; display: none; &.active { @@ -247,7 +248,7 @@ a.table-action-link { background: transparent; border: 0; font: inherit; - color: var(--clr-text-accent); + color: $highlight-text-color; border-radius: 4px; font-weight: 700; padding: 8px; @@ -255,16 +256,16 @@ a.table-action-link { &:hover, &:focus, &:active { - background: var(--clr-bg-secondary); + background: lighten($ui-base-color, 8%); } } } &__form { padding: 16px; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; - background: var(--clr-bg-primary); + background: var(--background-color); .fields-row { padding-top: 0; @@ -273,13 +274,13 @@ a.table-action-link { } &__row { - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-top: 0; - background: var(--clr-bg-primary); + background: var(--background-color); @media screen and (max-width: $no-gap-breakpoint) { .optional &:first-child { - border-top: 1px solid var(--clr-border-primary); + border-top: 1px solid var(--background-border-color); } } @@ -330,7 +331,7 @@ a.table-action-link { &__extra { flex: 0 0 auto; text-align: end; - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 500; } } @@ -361,6 +362,21 @@ 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 8fc86c78269..266a9ca9307 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -1,5 +1,6 @@ @use 'sass:color'; @use 'variables' as *; +@use 'functions' as *; .directory { &__tag { @@ -11,24 +12,24 @@ display: flex; align-items: center; justify-content: space-between; - border: 1px solid var(--clr-border-primary); + border: 1px solid var(--background-border-color); border-radius: 4px; padding: 15px; text-decoration: none; color: inherit; - box-shadow: 0 0 15px var(--clr-shadow-primary); + box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2); } & > a { &:hover, &:active, &:focus { - background: var(--clr-bg-primary); + background: $ui-base-color; } } &.active > a { - background: var(--clr-bg-accent-strong); + background: $ui-highlight-color; cursor: default; } @@ -41,13 +42,13 @@ flex: 1 1 auto; font-size: 18px; font-weight: 700; - color: var(--clr-text-primary); + color: $primary-text-color; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; .fa { - color: var(--clr-text-secondary); + color: $darker-text-color; } small { @@ -55,7 +56,7 @@ font-weight: 400; font-size: 15px; margin-top: 8px; - color: var(--clr-text-secondary); + color: $darker-text-color; } } @@ -64,7 +65,7 @@ .fa, small, .trends__item__current { - color: var(--clr-text-primary); + color: $primary-text-color; } } @@ -74,7 +75,7 @@ } &.active .avatar-stack .account__avatar { - border-color: var(--clr-text-accent); + border-color: $ui-highlight-color; } .trends__item__current { @@ -99,7 +100,7 @@ thead th { text-align: center; text-transform: uppercase; - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 700; padding: 10px; @@ -111,7 +112,7 @@ tbody td { padding: 15px 0; vertical-align: middle; - border-bottom: 1px solid var(--clr-border-primary); + border-bottom: 1px solid lighten($ui-base-color, 8%); } tbody tr:last-child td { @@ -123,11 +124,11 @@ text-align: center; font-size: 15px; font-weight: 500; - color: var(--clr-text-primary); + color: $primary-text-color; small { display: block; - color: var(--clr-text-secondary); + color: $darker-text-color; font-weight: 400; font-size: 14px; } @@ -136,7 +137,7 @@ tbody td.accounts-table__extra { width: 120px; text-align: end; - color: var(--clr-text-secondary); + color: $darker-text-color; padding-inline-end: 16px; a { @@ -146,7 +147,7 @@ &:focus, &:hover, &:active { - color: var(--clr-text-accent); + color: $highlight-text-color; } } } @@ -163,15 +164,15 @@ .icon { &.active { - color: var(--clr-text-accent); + color: $highlight-text-color; } &.passive { - color: var(--clr-text-warning); + color: $passive-text-color; } &.active.passive { - color: var(--clr-text-success); + color: $active-passive-text-color; } } diff --git a/app/javascript/styles_new/application.scss b/app/javascript/styles_new/application.scss new file mode 100644 index 00000000000..e16e5368e7d --- /dev/null +++ b/app/javascript/styles_new/application.scss @@ -0,0 +1,7 @@ +@use 'mastodon/css_variables'; +@use 'mastodon/variables'; +@use 'common'; + +html { + color-scheme: dark; +} diff --git a/app/javascript/styles/common.scss b/app/javascript/styles_new/common.scss similarity index 100% rename from app/javascript/styles/common.scss rename to app/javascript/styles_new/common.scss diff --git a/app/javascript/styles_new/contrast.scss b/app/javascript/styles_new/contrast.scss new file mode 100644 index 00000000000..af73c88fef6 --- /dev/null +++ b/app/javascript/styles_new/contrast.scss @@ -0,0 +1,8 @@ +@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 new file mode 100644 index 00000000000..d618561d8cc --- /dev/null +++ b/app/javascript/styles_new/contrast/diff.scss @@ -0,0 +1,54 @@ +:root { + /* TEXT TOKENS */ + + --clr-text-primary: var(--clr-grey-50); + --clr-text-secondary: var(--clr-grey-300); + --clr-text-tertiary: var(--clr-grey-400); + --clr-text-accent: var(--clr-indigo-300); + --clr-text-status-links: var(--clr-text-accent); + + /* BORDER TOKENS */ + + --clr-border-primary-strength: 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 new file mode 100644 index 00000000000..a60045d7be8 --- /dev/null +++ b/app/javascript/styles_new/entrypoints/inert.scss @@ -0,0 +1,14 @@ +/* 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 new file mode 100644 index 00000000000..fcbbd66f4c7 --- /dev/null +++ b/app/javascript/styles_new/entrypoints/mailer.scss @@ -0,0 +1,1030 @@ +@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 new file mode 100644 index 00000000000..816fc75b85a --- /dev/null +++ b/app/javascript/styles_new/fonts/inter.scss @@ -0,0 +1,8 @@ +@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 new file mode 100644 index 00000000000..d51cb01c91f --- /dev/null +++ b/app/javascript/styles_new/fonts/roboto-mono.scss @@ -0,0 +1,13 @@ +@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 new file mode 100644 index 00000000000..ea4b842b0c4 --- /dev/null +++ b/app/javascript/styles_new/fonts/roboto.scss @@ -0,0 +1,55 @@ +@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 new file mode 100644 index 00000000000..494efdbbde9 --- /dev/null +++ b/app/javascript/styles_new/mastodon-light.scss @@ -0,0 +1,9 @@ +@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 new file mode 100644 index 00000000000..e2f4386c2ba --- /dev/null +++ b/app/javascript/styles_new/mastodon-light/css_variables.scss @@ -0,0 +1,196 @@ +@use '../mastodon/theme_utils' as utils; + +:root { + --clr-black: #000; + --clr-grey-950: #181821; + --clr-grey-800: #292938; + --clr-grey-700: #444664; + --clr-grey-600: #545778; + --clr-grey-500: #696d91; + --clr-grey-400: #8b8dac; + --clr-grey-300: #b4b6cb; + --clr-grey-200: #d8d9e3; + --clr-grey-100: #f0f0f5; + --clr-grey-50: #f0f1ff; + --clr-white: #fff; + --clr-indigo-600: #6147e6; + --clr-indigo-400: #8886ff; + --clr-indigo-300: #a5abfd; + --clr-indigo-200: #c8cdfe; + --clr-indigo-100: #e0e3ff; + --clr-indigo-50: #f0f1ff; + --clr-red-500: #ff637e; + --clr-red-600: #ec003f; + --clr-yellow-400: #ffb900; + --clr-yellow-600: #e17100; + --clr-green-400: #05df72; + --clr-green-600: #00a63e; + + /* TEXT TOKENS */ + + --clr-text-primary: var(--clr-grey-950); + --clr-text-secondary: var(--clr-grey-600); + --clr-text-tertiary: var(--clr-grey-500); + --clr-text-on-inverted: var(--clr-white); + --clr-text-accent: var(--clr-indigo-600); + --clr-text-accent-subtle: color-mix( + in oklab, + var(--clr-text-primary), + var(--clr-text-accent) + ); + --clr-text-on-accent-strong: var(--clr-white); + --clr-text-error: var(--clr-red-600); + --clr-text-on-error-strong: var(--clr-white); + --clr-text-warning: var(--clr-yellow-600); + --clr-text-on-warning-strong: var(--clr-white); + --clr-text-success: var(--clr-green-600); + --clr-text-on-success-strong: var(--clr-white); + --clr-text-disabled: var(--clr-grey-300); + --clr-text-on-disabled: var(--clr-grey-200); + --clr-text-bookmark-highlight: var(--clr-text-error); + --clr-text-favourite-highlight: var(--clr-text-warning); + --clr-text-on-media: var(--clr-white); + --clr-text-status-links: var(--clr-text-accent); + + /* BACKGROUND TOKENS */ + + --clr-bg-primary: var(--clr-white); + --clr-bg-secondary-base: var(--clr-grey-600); + --clr-bg-secondary-strength: 5%; + --clr-bg-secondary: #{color-mix( + in oklab, + var(--clr-bg-primary), + var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength) + )}; + --clr-bg-secondary-solid: #{color-mix( + in srgb, + var(--clr-bg-primary), + var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength) + )}; + --clr-bg-tertiary: #{color-mix( + in oklab, + var(--clr-bg-primary), + var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength)) + )}; + --clr-bg-ambient: var(--clr-bg-primary); + --clr-bg-elevated: var(--clr-bg-primary); + --clr-bg-inverted: var(--clr-grey-950); + --clr-bg-media-base: var(--clr-black); + --clr-bg-media-strength: 65%; + --clr-bg-media: #{utils.css-alpha( + var(--clr-bg-media-base), + var(--clr-bg-media-strength) + )}; + --clr-bg-overlay: var(--clr-bg-primary); + --clr-bg-disabled: var(--clr-grey-400); + --clr-bg-accent-subtle-base: var(--clr-indigo-600); + --clr-bg-accent-subtle-strength: 8%; + --clr-bg-accent-subtle: #{utils.css-alpha( + var(--clr-bg-accent-subtle-base), + var(--clr-bg-accent-subtle-strength) + )}; + --clr-bg-accent-subtle-highlighted: #{utils.css-alpha( + var(--clr-bg-accent-subtle-base), + calc(var(--clr-bg-accent-subtle-strength) * 1.5) + )}; + --clr-bg-accent-strong: var(--clr-indigo-600); + --clr-bg-accent-strong-highlighted: color-mix( + in oklab, + var(--clr-bg-accent-strong), + black var(--clr-bg-accent-subtle-strength) + ); + --clr-bg-error-subtle-base: #f41b3b; + --clr-bg-error-subtle-strength: 12%; + --clr-bg-error-subtle: #{utils.css-alpha( + var(--clr-bg-error-subtle-base), + var(--clr-bg-error-subtle-strength) + )}; + --clr-bg-error-strong: var(--clr-red-600); + --clr-bg-error-strong-highlighted: color-mix( + in oklab, + var(--clr-bg-error-strong), + black var(--clr-bg-error-subtle-strength) + ); + --clr-bg-warning-subtle-base: #ffca1b; + --clr-bg-warning-subtle-strength: 10%; + --clr-bg-warning-subtle: #{utils.css-alpha( + var(--clr-bg-warning-subtle-base), + var(--clr-bg-warning-subtle-strength) + )}; + --clr-bg-warning-strong: var(--clr-yellow-600); + --clr-bg-warning-strong-highlighted: color-mix( + in oklab, + var(--clr-bg-warning-strong), + black var(--clr-bg-warning-subtle-strength) + ); + --clr-bg-success-subtle-base: #17e865; + --clr-bg-success-subtle-strength: 15%; + --clr-bg-success-subtle: #{utils.css-alpha( + var(--clr-bg-success-subtle-base), + var(--clr-bg-success-subtle-strength) + )}; + --clr-bg-success-strong: var(--clr-green-600); + --clr-bg-success-strong-highlighted: color-mix( + in oklab, + var(--clr-bg-success-strong), + black var(--clr-bg-success-subtle-strength) + ); + + /* BORDER TOKENS */ + + --clr-border-primary-base: #000856; + --clr-border-primary-strength: 15%; + --clr-border-primary: color-mix( + in oklab, + var(--clr-bg-primary), + var(--clr-border-primary-base) var(--clr-border-primary-strength) + ); + --clr-border-media: rgb(252 248 255 / 15%); + --clr-border-on-bg-secondary: var(--clr-grey-200); + --clr-border-on-bg-accent-subtle: var(--clr-indigo-200); + --clr-border-on-bg-error-subtle: #{utils.css-alpha( + var(--clr-text-error), + 50% + )}; + --clr-border-on-bg-warning-subtle: #{utils.css-alpha( + var(--clr-text-warning), + 50% + )}; + --clr-border-on-bg-success-subtle: #{utils.css-alpha( + var(--clr-text-success), + 50% + )}; + + /* SHADOW TOKENS */ + + --clr-shadow-primary-base: var(--clr-black); + --clr-shadow-primary-strength: 30%; + --clr-shadow-primary: #{utils.css-alpha( + var(--clr-shadow-primary-base), + var(--clr-shadow-primary-strength) + )}; + --dropdown-shadow: + 0 20px 25px -5px var(--clr-shadow-primary), + 0 8px 10px -6px var(--clr-shadow-primary); + --overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary)); + + /* GRAPHS/CHARTS TOKENS */ + + --clr-graph-primary-stroke: var(--clr-text-accent); + --clr-graph-primary-fill: var(--clr-bg-accent-subtle); + --clr-graph-warning-stroke: var(--clr-text-warning); + --clr-graph-warning-fill: var(--clr-bg-warning-subtle); + --clr-graph-disabled-stroke: var(--clr-text-disabled); + --clr-graph-disabled-fill: var(--clr-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(--clr-text-accent); + --avatar-border-radius: 8px; +} diff --git a/app/javascript/styles_new/mastodon/_mixins.scss b/app/javascript/styles_new/mastodon/_mixins.scss new file mode 100644 index 00000000000..3fa53c65a81 --- /dev/null +++ b/app/javascript/styles_new/mastodon/_mixins.scss @@ -0,0 +1,45 @@ +@mixin search-input { + outline: 0; + box-sizing: border-box; + width: 100%; + box-shadow: none; + font-family: inherit; + background: var(--clr-bg-secondary); + color: var(--clr-text-primary); + border-radius: 4px; + border: 1px solid var(--clr-border-on-bg-secondary); + font-size: 17px; + line-height: normal; + margin: 0; +} + +@mixin search-popout { + background: var(--clr-bg-elevated); + border-radius: 4px; + padding: 10px 14px; + padding-bottom: 14px; + margin-top: 10px; + color: var(--clr-text-secondary); + box-shadow: 2px 4px 15px var(--clr-shadow-primary); + + h4 { + text-transform: uppercase; + color: var(--clr-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(--clr-text-primary); + } +} diff --git a/app/javascript/styles/mastodon/_theme_utils.scss b/app/javascript/styles_new/mastodon/_theme_utils.scss similarity index 100% rename from app/javascript/styles/mastodon/_theme_utils.scss rename to app/javascript/styles_new/mastodon/_theme_utils.scss diff --git a/app/javascript/styles_new/mastodon/_variables.scss b/app/javascript/styles_new/mastodon/_variables.scss new file mode 100644 index 00000000000..a948dbc41c5 --- /dev/null +++ b/app/javascript/styles_new/mastodon/_variables.scss @@ -0,0 +1,27 @@ +// 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 new file mode 100644 index 00000000000..0a9cee5c0e1 --- /dev/null +++ b/app/javascript/styles_new/mastodon/about.scss @@ -0,0 +1,130 @@ +@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(--clr-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(--clr-bg-accent-strong); + color: var(--clr-text-on-accent-strong); + 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(--clr-text-primary); + } + + &__hint { + font-size: 14px; + font-weight: 400; + color: var(--clr-text-secondary); + } +} + +.rules-languages { + display: flex; + gap: 1rem; + align-items: center; + position: relative; + + > label { + font-size: 14px; + font-weight: 600; + color: var(--clr-text-primary); + } + + select { + appearance: none; + box-sizing: border-box; + font-size: 14px; + color: var(--clr-text-primary); + display: block; + width: 100%; + outline: 0; + font-family: inherit; + resize: vertical; + background: var(--clr-bg-secondary); + border: 1px solid var(--clr-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 new file mode 100644 index 00000000000..7cd2d4eae39 --- /dev/null +++ b/app/javascript/styles_new/mastodon/accessibility.scss @@ -0,0 +1,13 @@ +@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 new file mode 100644 index 00000000000..0b8d1b8dd2b --- /dev/null +++ b/app/javascript/styles_new/mastodon/accounts.scss @@ -0,0 +1,411 @@ +@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(--clr-bg-accent-subtle); + } + } + } + + &__img { + height: 130px; + position: relative; + background: var(--clr-bg-secondary); + border: 1px solid var(--clr-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(--clr-bg-primary); + border: 1px solid var(--clr-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(--clr-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(--clr-text-primary); + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + } + + span { + display: block; + font-size: 14px; + color: var(--clr-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(--clr-text-primary); + font-weight: 500; + display: inline-block; + padding: 6px 10px; + text-decoration: none; + } + + .current { + color: var(--clr-bg-inverted); + background: var(--clr-text-on-inverted); + border-radius: 100px; + cursor: default; + margin: 0 10px; + } + + .gap { + cursor: default; + } + + .older, + .newer { + text-transform: uppercase; + color: var(--clr-text-primary); + } + + .older { + float: left; + padding-inline-start: 0; + } + + .newer { + float: right; + padding-inline-end: 0; + } + + .disabled { + cursor: default; + color: var(--clr-text-disabled); + } + + @media screen and (width <= 700px) { + padding: 30px 20px; + + .page { + display: none; + } + + .newer, + .older { + display: inline-block; + } + } +} + +.nothing-here { + color: var(--clr-text-secondary); + background: var(--clr-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(--clr-border-primary); + + @media screen and (min-width: ($no-gap-breakpoint - 1)) { + border-top: 0; + } + + &--no-toolbar { + border-top: 1px solid var(--clr-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(--clr-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(--clr-bg-secondary); + border: 1px solid var(--clr-border-primary); +} + +.information-badge { + &.superapp { + color: var(--clr-text-success); + background-color: var(--clr-bg-success-subtle); + border-color: var(--clr-border-on-bg-success-subtle); + } +} + +.account-role { + display: inline-flex; + padding: 4px; + padding-inline-end: 8px; + border: 1px solid var(--clr-text-accent); + color: var(--clr-text-accent); + 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(--clr-text-error); + background-color: var(--clr-bg-error-subtle); + border-color: var(--clr-border-on-bg-error-subtle); +} + +.account__header__fields { + max-width: 100vw; + padding: 0; + margin: 15px -15px -15px; + border: 0 none; + border-top: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--clr-border-primary); + font-size: 14px; + line-height: 20px; + + dl { + display: flex; + border-bottom: 1px solid var(--clr-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(--clr-text-primary); + background: var(--clr-bg-secondary); + } + + dd { + flex: 1 1 auto; + color: var(--clr-text-secondary); + } + + a { + color: var(--clr-text-accent); + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + + .verified { + border: 1px solid var(--clr-border-on-bg-success-subtle); + background: var(--clr-bg-success-subtle); + + a { + color: var(--clr-text-success); + font-weight: 500; + } + + &__mark { + color: var(--clr-text-success); + } + } + + dl:last-child { + border-bottom: 0; + } +} + +.directory__tag .trends__item__current { + width: auto; +} + +.pending-account { + &__header { + color: var(--clr-text-secondary); + + a { + color: var(--clr-text-primary); + text-decoration: none; + + &:hover, + &:active, + &:focus { + text-decoration: underline; + } + } + + strong { + color: var(--clr-text-primary); + font-weight: 700; + } + + .warning-hint { + font-weight: normal !important; + } + } + + &__body { + margin-top: 10px; + } +} + +.batch-table__row--muted { + color: var(--clr-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(--clr-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(--clr-text-tertiary); + } +} + +.batch-table__row--attention { + color: var(--clr-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(--clr-text-warning); + } +} + +.batch-table__row--attention .accounts-table { + tbody td.accounts-table__extra, + &__count, + &__count small { + color: var(--clr-text-warning); + } +} diff --git a/app/javascript/styles_new/mastodon/admin.scss b/app/javascript/styles_new/mastodon/admin.scss new file mode 100644 index 00000000000..17b10887ffa --- /dev/null +++ b/app/javascript/styles_new/mastodon/admin.scss @@ -0,0 +1,2173 @@ +@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(--clr-bg-primary); + border-bottom: 1px solid var(--clr-border-primary); + align-items: center; + + &__logo { + flex: 1 1 auto; + + a { + display: block; + padding: 15px; + } + } + + &__icon { + display: block; + color: var(--clr-text-secondary); + text-decoration: none; + flex: 0 0 auto; + font-size: 18px; + padding: 10px; + margin: 5px 10px; + border-radius: 4px; + + &:focus { + background: var(--clr-bg-accent-subtle); + } + + .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: var(--clr-text-secondary); + text-decoration: none; + transition: all 200ms linear; + transition-property: color, background-color; + + &:hover { + color: var(--clr-text-primary); + transition: all 100ms linear; + transition-property: color, background-color; + } + } + + ul { + margin: 0; + + a { + border: 0; + padding: 15px 35px; + } + } + + .warning a { + color: var(--clr-text-warning); + font-weight: 700; + } + + .simple-navigation-active-leaf a { + color: var(--clr-text-accent); + 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(--clr-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(--clr-bg-secondary); + } + + &.selected { + font-weight: 700; + color: var(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + } + } + } + + &__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(--clr-text-secondary); + line-height: 18px; + } + + @media screen and (max-width: $no-columns-breakpoint) { + border-bottom: 0; + padding-bottom: 0; + } + } + + h2 { + color: var(--clr-text-primary); + font-size: 24px; + line-height: 36px; + font-weight: 700; + } + + h3 { + color: var(--clr-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(--clr-text-secondary); + padding-top: 24px; + margin-bottom: 8px; + border-top: 1px solid var(--clr-border-primary); + } + + h6 { + font-size: 16px; + color: var(--clr-text-primary); + line-height: 28px; + font-weight: 500; + } + + .fields-group h6 { + color: var(--clr-text-primary); + font-weight: 500; + } + + .directory__tag h4 { + font-size: 18px; + font-weight: 700; + color: var(--clr-text-primary); + text-transform: none; + padding-bottom: 0; + margin-bottom: 0; + border-bottom: 0; + + .comment { + display: block; + overflow: hidden; + text-overflow: ellipsis; + margin-top: 4px; + + &.private-comment { + display: block; + color: var(--clr-text-secondary); + } + + &.public-comment { + display: block; + color: var(--clr-text-primary); + } + } + } + + & > p { + font-size: 14px; + line-height: 21px; + color: var(--clr-text-primary); + margin-bottom: 20px; + + strong { + color: var(--clr-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(--clr-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(--clr-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(--clr-text-accent); + } + } + } +} + +hr.spacer { + width: 100%; + border: 0; + margin: 20px 0; + height: 1px; +} + +body, +.admin-wrapper .content { + .muted-hint { + color: var(--clr-text-secondary); + + a { + color: var(--clr-text-accent); + } + } + + .positive-hint, + .negative-hint, + .neutral-hint { + a { + color: inherit; + text-decoration: underline; + + &:focus, + &:hover, + &:active { + text-decoration: none; + } + } + } + + .positive-hint { + color: var(--clr-text-success); + font-weight: 500; + } + + .negative-hint { + color: var(--clr-text-error); + font-weight: 500; + } + + .neutral-hint { + color: var(--clr-text-primary); + font-weight: 500; + } + + .warning-hint { + color: var(--clr-text-warning); + font-weight: 500; + } +} + +kbd { + font-family: Courier, monospace; + background-color: var(--clr-bg-accent-subtle); + 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(--clr-text-secondary); + text-decoration: none; + text-transform: uppercase; + font-size: 12px; + font-weight: 500; + border-bottom: 2px solid var(--clr-bg-secondary); + + &:hover { + color: var(--clr-text-primary); + border-bottom: 2px solid var(--clr-bg-tertiary); + } + + &.selected { + color: var(--clr-text-accent); + border-bottom: 2px solid var(--clr-text-accent); + } + } + } +} + +.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(--clr-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(--clr-text-accent); + 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(--clr-bg-primary); + border-right: 1px solid var(--clr-border-primary); + border-left: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--clr-border-primary); + position: relative; + text-decoration: none; + color: var(--clr-text-secondary); + font-size: 14px; + + &:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-top: 1px solid var(--clr-border-primary); + } + + &:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom: 1px solid var(--clr-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(--clr-text-tertiary); + } + + a, + .username, + .target { + color: var(--clr-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(--clr-bg-primary); + border: 1px solid var(--clr-border-primary); + border-radius: 4px; + position: relative; + text-decoration: none; + color: var(--clr-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(--clr-text-secondary); + } + + &:hover, + &:focus, + &:active { + background: var(--clr-bg-primary); + } +} + +a.name-tag, +.name-tag, +a.inline-name-tag, +.inline-name-tag { + text-decoration: none; + color: var(--clr-text-primary); + + &:hover { + color: var(--clr-text-accent); + } + + .username { + font-weight: 500; + } + + &.suspended { + .username { + text-decoration: line-through; + color: var(--clr-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(--clr-text-accent); + + &.positive { + border-color: var(--clr-text-success); + } + + &.negative { + border-color: var(--clr-text-error); + } + + &.warning { + border-color: var(--clr-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(--clr-text-secondary); + } + } + + &__owner { + padding: 8px; + padding-inline-start: 12px; + } + + time { + color: var(--clr-text-tertiary); + } +} + +.report-card { + background: var(--clr-bg-primary); + border: 1px solid var(--clr-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(--clr-text-secondary); + text-transform: uppercase; + text-align: end; + + a { + color: inherit; + text-decoration: none; + + &:focus, + &:hover, + &:active { + color: var(--clr-text-accent); + } + } + + .red { + color: var(--clr-text-error); + } + } + } + + &__summary { + &__item { + display: flex; + justify-content: flex-start; + border-top: 1px solid var(--clr-border-primary); + + &__reported-by, + &__assigned { + padding: 15px; + flex: 0 0 auto; + box-sizing: border-box; + width: 150px; + color: var(--clr-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(--clr-text-secondary); + + &:hover { + color: var(--clr-text-accent); + } + } + } + } +} + +.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(--clr-bg-primary); + border: 1px solid var(--clr-border-primary); + border-radius: 4px; + height: 100%; + } + + .account__header__fields { + margin: 0; + border: 1px solid var(--clr-border-primary); + + a { + color: var(--clr-text-accent); + } + + dl:first-child .verified { + border-radius: 0 4px 0 0; + } + + .verified a { + color: var(--clr-text-success); + } + } + + .account__header__content { + box-sizing: border-box; + padding: 20px; + color: var(--clr-text-primary); + } +} + +.center-text { + text-align: center; +} + +.applications-list__item, +.filters-list__item { + padding: 15px 0; + background: var(--clr-bg-primary); + border: 1px solid var(--clr-border-primary); + border-radius: 4px; + margin-top: 15px; +} + +.user-role { + color: var(--user-role-accent); +} + +.applications-list { + .icon { + vertical-align: middle; + } +} + +.announcements-list, +.filters-list { + border: 1px solid var(--clr-border-primary); + border-radius: 4px; + border-bottom: none; + + &__item { + padding: 15px 0; + border-bottom: 1px solid var(--clr-border-primary); + + &__title { + padding: 0 15px; + display: block; + font-weight: 500; + font-size: 18px; + line-height: 1.5; + color: var(--clr-text-primary); + text-decoration: none; + margin-bottom: 10px; + + &:hover { + color: var(--clr-text-accent); + } + + .account-role { + vertical-align: middle; + } + } + + .icon { + vertical-align: middle; + } + + a.announcements-list__item__title { + &:hover, + &:focus, + &:active { + color: var(--clr-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(--clr-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(--clr-text-error); + } + + .permissions-list__item__icon { + color: var(--clr-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(--clr-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(--clr-text-secondary); + } + + &__box { + box-sizing: border-box; + width: 52px; + margin: 1px; + padding: 10px; + font-weight: 500; + color: var(--clr-text-primary); + background: var(--clr-bg-primary); + + @for $i from 0 through 10 { + &--#{10 * $i} { + @if $i > 5 { + color: var(--clr-text-on-accent-strong); + } + + background-color: rgb( + from var(--clr-bg-accent-strong) r g b / #{math.div(max(1, $i), 10)} + ); + } + } + } + } +} + +.sparkline { + display: block; + text-decoration: none; + background: var(--clr-bg-primary); + border-radius: 4px; + border: 1px solid var(--clr-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(--clr-text-primary); + } + + &__change { + display: block; + font-weight: 500; + font-size: 18px; + color: var(--clr-text-secondary); + margin-bottom: -3px; + + &.positive { + color: var(--clr-text-success); + } + + &.negative { + color: var(--clr-text-error); + } + } + } + + &__label { + padding: 0 20px; + padding-bottom: 10px; + text-transform: uppercase; + color: var(--clr-text-secondary); + font-weight: 500; + } + + &__graph { + position: absolute; + bottom: 0; + width: 100%; + + svg { + display: block; + margin: 0; + } + + path:first-child { + fill: var(--clr-graph-primary-fill) !important; + fill-opacity: 1 !important; + } + + path:last-child { + stroke: var(--clr-graph-primary-stroke) !important; + fill: none !important; + } + } +} + +a.sparkline { + &:hover, + &:focus, + &:active { + background: var(--clr-bg-accent-subtle); + } +} + +.skeleton { + background-color: var(--clr-bg-primary); + background-image: linear-gradient( + 90deg, + var(--clr-bg-primary), + var(--clr-bg-secondary), + var(--clr-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; +} + +@keyframes skeleton { + 0% { + background-position: -200px 0; + } + + 100% { + background-position: calc(200px + 100%) 0; + } +} + +.dimension { + table { + width: 100%; + } + + &__item { + border-bottom: 1px solid var(--clr-border-primary); + + &__key { + font-weight: 500; + padding: 11px 10px; + } + + &__value { + text-align: end; + color: var(--clr-text-secondary); + padding: 11px 10px; + } + + &__indicator { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--clr-text-accent); + margin-inline-end: 10px; + + @for $i from 0 through 10 { + &--#{10 * $i} { + background-color: rgb( + from var(--clr-text-accent) r g b / #{math.div(max(1, $i), 10)} + ); + } + } + } + + &:last-child { + border-bottom: 0; + } + + &.negative { + color: var(--clr-text-error); + font-weight: 700; + + .dimension__item__value { + color: var(--clr-text-error); + } + } + } +} + +.report-reason-selector { + border-radius: 4px; + background: var(--clr-bg-primary); + margin-bottom: 20px; + + &__category { + cursor: pointer; + border-bottom: 1px solid var(--clr-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(--clr-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(--clr-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(--clr-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(--clr-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(--clr-bg-secondary); + border-radius: 8px; + border: 1px solid var(--clr-border-media); + } + } + + .display-name { + color: var(--clr-text-secondary); + padding-bottom: 15px; + font-size: 15px; + line-height: 20px; + + bdi { + display: block; + color: var(--clr-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(--clr-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(--clr-text-primary); + font-weight: 600; + font-size: 15px; + line-height: 21px; + + small { + display: block; + color: var(--clr-text-secondary); + font-weight: 400; + font-size: 13px; + line-height: 18px; + } + } + } +} + +.report-notes { + margin-bottom: 20px; + + &__item { + background: var(--clr-bg-primary); + position: relative; + padding: 15px; + padding-inline-start: 15px * 2 + 40px; + border: 1px solid var(--clr-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(--clr-text-secondary); + font-size: 15px; + line-height: 20px; + margin-bottom: 4px; + + .username { + color: var(--clr-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(--clr-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(--clr-text-primary); + + p { + margin-bottom: 20px; + white-space: pre-wrap; + unicode-bidi: plaintext; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: var(--clr-text-accent); + 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(--clr-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(--clr-text-accent); + 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(--clr-text-primary); + box-sizing: border-box; + min-height: 100%; + border: 1px solid var(--clr-border-primary); + border-radius: 4px; + + a { + color: var(--clr-text-accent); + 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(--clr-text-secondary); + + &:last-child { + margin-bottom: 0; + } + + &__text { + color: var(--clr-text-primary); + } + } + + &__statuses-list { + border-radius: 4px; + border: 1px solid var(--clr-border-primary); + font-size: 13px; + line-height: 18px; + overflow: hidden; + + &__item { + padding: 16px; + border-bottom: 1px solid var(--clr-border-primary); + + &:last-child { + border-bottom: 0; + } + + &__meta { + color: var(--clr-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(--clr-bg-secondary); + margin: 0 2px; + border-radius: 2px; + + &.positive { + background: var(--clr-bg-success-strong); + } + + &.negative { + background: var(--clr-bg-error-strong); + } + } + } +} + +.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(--clr-bg-primary); + border: 1px solid var(--clr-text-accent); + color: var(--clr-text-accent); + border-radius: 8px; + } + + &::after { + position: absolute; + content: ''; + width: 1px; + background: var(--clr-text-accent); + 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(--clr-text-primary); + line-height: 25px; + margin-bottom: 16px; + } + + .status { + border: 1px solid var(--clr-border-primary); + background: var(--clr-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(--clr-border-primary); + color: var(--clr-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(--clr-text-primary); + background: var(--clr-bg-accent-subtle); + border: 1px solid var(--clr-border-on-bg-accent-subtle); + 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(--clr-text-accent); + 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(--clr-border-media); + } + + .hide-button { + // Toggled to appear when the preview-card is unblurred: + display: none; + position: absolute; + top: 5px; + right: 5px; + color: var(--clr-text-on-media); + background: var(--clr-bg-media); + backdrop-filter: $backdrop-blur-filter; + outline: 1px solid var(--clr-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(--clr-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(--clr-bg-tertiary); + border-radius: 8px; + border: 1px solid var(--clr-border-primary); + overflow: hidden; + + &__header { + padding: 16px; + font-size: 14px; + line-height: 20px; + color: var(--clr-text-primary); + display: flex; + align-items: center; + gap: 12px; + } + + &__body { + background: var(--clr-bg-primary); + padding: 16px; + overflow-y: scroll; + height: 30vh; + } + } + + &__history { + & > li { + border-bottom: 1px solid var(--clr-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(--clr-text-tertiary); + } + + &.success { + color: var(--clr-text-success); + + .dot-indicator__indicator { + background-color: var(--clr-bg-success-strong); + } + } +} diff --git a/app/javascript/styles_new/mastodon/annual_reports.scss b/app/javascript/styles_new/mastodon/annual_reports.scss new file mode 100644 index 00000000000..fefc95067b6 --- /dev/null +++ b/app/javascript/styles_new/mastodon/annual_reports.scss @@ -0,0 +1,342 @@ +@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(--clr-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 new file mode 100644 index 00000000000..0bee13881d7 --- /dev/null +++ b/app/javascript/styles_new/mastodon/basics.scss @@ -0,0 +1,300 @@ +@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(--clr-bg-ambient); + font-size: 13px; + line-height: 18px; + font-weight: 400; + color: var(--clr-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(--clr-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(--clr-text-error); + text-align: center; + + & > div { + max-width: 500px; + } + + p { + margin-bottom: 0.85em; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: var(--clr-text-accent); + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + + &__footer { + color: var(--clr-text-secondary); + font-size: 13px; + + a { + color: var(--clr-text-secondary); + } + } + + button { + display: inline; + border: 0; + background: transparent; + color: var(--clr-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 new file mode 100644 index 00000000000..db00ed473b1 --- /dev/null +++ b/app/javascript/styles_new/mastodon/branding.scss @@ -0,0 +1,5 @@ +@use 'variables' as *; + +.logo { + color: var(--clr-text-primary); +} diff --git a/app/javascript/styles_new/mastodon/components.scss b/app/javascript/styles_new/mastodon/components.scss new file mode 100644 index 00000000000..9d2871d6bcc --- /dev/null +++ b/app/javascript/styles_new/mastodon/components.scss @@ -0,0 +1,11344 @@ +@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(--clr-text-success); + font-weight: 400; + + .no-reduce-motion & { + transition: opacity 200ms ease; + } +} + +.link-button { + display: block; + font-size: 15px; + line-height: 20px; + color: var(--clr-text-accent); + border: 0; + background: transparent; + padding: 0; + cursor: pointer; + text-decoration: none; + + &--destructive { + color: var(--clr-text-error); + } + + &:hover, + &:active { + text-decoration: underline; + } + + &:disabled { + color: var(--clr-text-primary); + cursor: default; + } + + &:focus-visible { + outline: var(--outline-focus-default); + } +} + +.help-button { + color: var(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + border: 0; + border-radius: 20px; + cursor: pointer; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + + &:active, + &:focus, + &:hover { + background: var(--clr-bg-accent-strong-highlighted); + } + + &:focus-visible { + outline: var(--outline-focus-default); + } + + .icon { + width: 14px; + height: 14px; + } +} + +.button { + background-color: var(--clr-bg-accent-strong); + border: 10px none; + border-radius: 4px; + box-sizing: border-box; + color: var(--clr-text-on-accent-strong); + 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(--clr-bg-accent-strong-highlighted); + } + + &:focus-visible { + outline: 2px solid var(--clr-bg-accent-strong); + outline-offset: 2px; + } + + &--compact { + font-size: 14px; + line-height: normal; + font-weight: 700; + padding: 5px 12px; + border-radius: 4px; + } + + &--dangerous { + background-color: var(--clr-bg-error-strong); + color: var(--clr-text-on-error-strong); + + &:active, + &:focus, + &:hover { + background-color: color-mix( + in oklab, + var(--clr-bg-error-strong), + black var(--clr-bg-error-subtle-strength) + ); + transition: none; + } + } + + &--destructive { + &:active, + &:focus, + &:hover { + color: var(--clr-text-on-error-strong); + background-color: var(--clr-bg-error-strong); + transition: none; + } + } + + &:disabled, + &.disabled { + color: var(--clr-text-on-disabled); + background-color: var(--clr-bg-disabled); + cursor: not-allowed; + } + + &.copyable { + transition: background 300ms linear; + } + + &.copied { + color: var(--clr-text-on-success-strong); + background-color: var(--clr-bg-success-strong); + transition: none; + } + + &.button-secondary { + color: var(--clr-text-accent); + background: transparent; + padding: 6px 17px; + border: 1px solid var(--clr-text-accent); + + &:active, + &:focus, + &:hover { + border-color: var(--clr-text-accent); + color: var(--clr-text-accent); + background-color: transparent; + text-decoration: none; + } + + &.button--destructive { + &:active, + &:focus, + &:hover { + border-color: var(--clr-text-error); + color: var(--clr-text-error); + } + } + + &:disabled, + &.disabled { + border-color: var(--clr-text-disabled); + color: var(--clr-text-disabled); + + &:active, + &:focus, + &:hover { + border-color: var(--clr-text-disabled); + color: var(--clr-text-disabled); + } + } + } + + &.button--plain { + color: var(--clr-text-accent); + 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(--clr-text-accent-subtle); + background-color: transparent; + text-decoration: none; + } + + &:disabled, + &.disabled { + opacity: 0.7; + border-color: transparent; + color: var(--clr-text-disabled); + + &:active, + &:focus, + &:hover { + border-color: transparent; + color: var(--clr-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(--clr-text-secondary); + --default-bg-color: transparent; + --hover-icon-color: var(--clr-text-primary); + --hover-bg-color: var(--clr-bg-accent-subtle); + + 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(--clr-text-accent); + } + + &.disabled { + color: var(--clr-text-disabled); + background-color: var(--default-bg-color); + cursor: default; + } + + &.inverted { + --default-icon-color: var(--clr-text-primary); + --hover-icon-color: var(--clr-text-secondary); + } + + &.active { + --default-icon-color: var(--clr-text-accent); + --hover-icon-color: var(--clr-text-accent); + --hover-bg-color: transparent; + } + + &.overlayed { + --default-icon-color: rgb(from var(--clr-text-on-media) r g b / 70%); + --default-bg-color: var(--clr-bg-media); + --hover-icon-color: var(--clr-text-accent); + --hover-bg-color: rgb(from var(--clr-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(--clr-text-success); + transition: none; + background-color: var(--clr-bg-success-subtle); + border-color: var(--clr-border-on-bg-accent-subtle); + } +} + +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(--clr-bg-elevated); + border: 1px solid var(--clr-border-primary); + border-radius: 0 0 4px 4px; + color: var(--clr-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(--clr-text-primary); + + &:last-child { + border-radius: 0 0 4px 4px; + } + + &:hover, + &:focus, + &:active { + background: var(--clr-bg-secondary); + + .autosuggest-account .display-name__account { + color: inherit; + } + } + + &.selected { + color: var(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + + .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(--clr-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(--clr-border-on-bg-secondary); + transition: border-color 300ms linear; + position: relative; + background: var(--clr-bg-secondary); + + &.active { + transition: none; + border-color: var(--clr-text-accent); + } + } + + &__warning { + color: var(--clr-text-primary); + background: var(--clr-bg-warning-subtle); + border: 1px solid var(--clr-border-on-bg-warning-subtle); + 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(--clr-text-accent); + 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(--clr-border-primary); + border-width: 1px 0; + } + } + + .autosuggest-textarea__textarea, + .spoiler-input__input { + display: block; + box-sizing: border-box; + width: 100%; + margin: 0; + color: var(--clr-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(--clr-bg-accent-subtle); + color: var(--clr-text-accent); + } + + &__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 { + position: absolute; + width: 100%; + height: 100%; + border-radius: 6px; + z-index: -1; + top: 0; + inset-inline-start: 0; + } + + &__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(--clr-text-on-media); + background: var(--clr-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(--clr-text-on-warning-strong); + background: var(--clr-bg-warning-strong); + } + } + } + + &__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(--clr-text-accent); + + &:hover, + &:focus, + &:active { + color: var(--clr-text-accent); + } + + &.disabled { + color: var(--clr-text-disabled); + } + + &.active { + background: var(--clr-bg-accent-strong); + color: var(--clr-text-on-accent-strong); + } + } + } + + &__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(--clr-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(--clr-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(--clr-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(--clr-text-accent); + background-color: var(--clr-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(--clr-text-accent); + background: transparent; + border: 1px solid var(--clr-text-accent); + 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(--clr-text-disabled); + border-color: var(--clr-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(--clr-text-on-accent-strong); + border-color: var(--clr-bg-accent-strong); + background: var(--clr-bg-accent-strong); + } + + &.warning { + color: var(--clr-text-warning); + border-color: var(--clr-text-warning); + + &.active { + color: var(--clr-text-on-warning-strong); + border-color: var(--clr-bg-warning-strong); + background-color: var(--clr-bg-warning-strong); + } + } +} + +.character-counter { + cursor: default; + font-family: $font-sans-serif, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: normal; + color: var(--clr-text-secondary); + flex: 1 0 auto; + text-align: end; + + &.character-counter--over { + color: var(--clr-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(--clr-text-primary); + margin-bottom: 20px; + + strong { + font-weight: 700; + } + + a { + color: var(--clr-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(--clr-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(--clr-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(--clr-text-accent); + } + + .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(--clr-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(--clr-text-secondary); + } + + &__attachments { + margin-top: 4px; + color: var(--clr-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(--clr-bg-tertiary); + padding: 12px; + overflow-y: auto; + flex: 0 0 auto; + border-bottom: 1px solid var(--clr-border-primary); + display: flex; + flex-direction: column; + gap: 4px; + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + color: var(--clr-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(--clr-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(--clr-text-accent); + } + } + + &__attachments { + color: var(--clr-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__item__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(--clr-text-primary); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + &.mention { + &:hover { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + + &.unhandled-link { + color: var(--clr-text-accent); + } + } +} + +.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(--clr-text-accent); + 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(--clr-text-tertiary); +} + +.status__wrapper--filtered { + color: var(--clr-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(--clr-border-primary); + + &__button { + display: inline; + color: var(--clr-text-accent); + border: 0; + background: transparent; + padding: 0; + font-size: inherit; + line-height: inherit; + + &:hover, + &:active { + text-decoration: underline; + } + } +} + +.focusable { + &:focus-visible { + outline: 2px solid var(--clr-text-accent); + outline-offset: -2px; + background: var(--clr-bg-accent-subtle); + } +} + +.status { + padding: 16px; + min-height: 54px; + border-bottom: 1px solid var(--clr-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(--clr-border-primary); + } + + &__line { + --thread-line-color: var(--clr-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(--clr-bg-accent-subtle); + 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(--clr-text-secondary); +} + +.notification__relative_time { + color: var(--clr-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(--clr-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(--clr-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(--clr-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 { + .status__prepend, + .notification-ungrouped__header { + color: var(--clr-text-accent); + } +} + +.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(--clr-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(--clr-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(--clr-text-tertiary); + font-size: 14px; + line-height: 18px; + + &__line { + border-bottom: 1px solid var(--clr-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(--clr-text-primary); + font-weight: 500; + } +} + +.detailed-status__action-bar { + border-top: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--clr-border-primary); + display: flex; + flex-direction: row; + padding: 10px 0; +} + +.detailed-status__wrapper-direct { + .detailed-status, + .detailed-status__action-bar { + background: var(--clr-bg-accent-subtle); + } + + .status__prepend { + color: var(--clr-text-accent); + } +} + +.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(--clr-text-primary); + border: 1px solid var(--clr-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(--clr-text-secondary); + background: var(--clr-bg-accent-subtle); + 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(--clr-border-primary); + display: flex; + align-items: center; + gap: 8px; + + &__domain-name { + flex: 1 1 auto; + color: var(--clr-text-primary); + font-size: 15px; + line-height: 21px; + font-weight: 500; + } +} + +.account { + padding: 16px; + border-bottom: 1px solid var(--clr-border-primary); + + .account__display-name { + flex: 1 1 auto; + display: flex; + align-items: center; + gap: 10px; + color: var(--clr-text-secondary); + overflow: hidden; + text-decoration: none; + font-size: 14px; + + .display-name { + margin-bottom: 4px; + } + + .display-name strong { + display: inline; + color: var(--clr-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(--clr-bg-accent-subtle); + border-radius: 4px; + border: 0; + color: var(--clr-text-accent); + font-weight: 500; + font-size: 12px; + line-height: 16px; + padding: 4px 8px; + + &.active { + color: var(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + } + + &__popout { + background: var(--clr-bg-elevated); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-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(--clr-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(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + flex-shrink: 0; + } + + h3 { + font-size: 17px; + line-height: 22px; + color: var(--clr-text-primary); + } + } + + &__handle { + border: 2px dashed var(--clr-border-on-accent-subtle); + background: var(--clr-bg-accent-subtle); + padding: 12px 8px; + color: var(--clr-text-accent); + 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(--clr-text-accent); + } + + h6 { + font-size: 14px; + line-height: 20px; + font-weight: 500; + color: var(--clr-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(--clr-text-secondary); + + &--missing { + color: var(--clr-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(--clr-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(--clr-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(--clr-text-primary); + text-shadow: 1px 1px 2px var(--clr-shadow-primary-base); + 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(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + border-width: 1px; + border-style: solid; + border-color: var(--clr-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(--clr-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(--clr-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(--clr-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(--clr-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(--clr-text-primary); + } +} + +.muted { + .status__content, + .status__content p, + .status__content a { + color: var(--clr-text-tertiary); + } + + .status__display-name strong { + color: var(--clr-text-tertiary); + } + + .status__avatar { + opacity: 0.5; + } +} + +.notification__report { + padding: 16px; + border-bottom: 1px solid var(--clr-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(--clr-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(--clr-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(--clr-text-secondary); + font-size: 15px; + line-height: 22px; + font-weight: 500; + display: flex; + align-items: center; + gap: 10px; + + .icon { + color: var(--clr-text-accent); + width: 18px; + height: 18px; + } + + .icon-star { + color: var(--clr-text-favourite-highlight); + } + + > span { + display: inline; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.icon-button.star-icon.active { + color: var(--clr-text-favourite-highlight); +} + +.icon-button.bookmark-icon.active { + color: var(--clr-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(--clr-border-media); + outline-offset: -1px; + border-radius: 8px; + touch-action: none; + } + + &--zoomed-in { + z-index: 9999; + cursor: grab; + + img { + outline: none; + border-radius: 0; + } + } + + &--dragging { + cursor: grabbing; + } + + &--error img { + visibility: hidden; + } + + &__preview { + max-width: $media-modal-media-max-width; + max-height: $media-modal-media-max-height; + position: absolute; + z-index: 1; + outline: 1px solid var(--clr-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(--clr-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(--clr-border-primary); + margin: 5px 0; + height: 0; +} + +.dropdown-menu { + background: var(--clr-bg-elevated); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-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(--clr-border-primary); + padding: 10px 14px; + padding-bottom: 14px; + margin-bottom: 4px; + font-size: 13px; + line-height: 18px; + color: var(--clr-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(--clr-text-error); + } + + &--highlighted { + color: var(--clr-text-accent); + } + + &-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(--clr-bg-secondary); + outline: 0; + } + } + } + + button:disabled, + button[aria-disabled='true'] { + color: var(--clr-text-disabled); + cursor: default; + + &:focus { + color: rgb(from var(--clr-text-disabled) r g b / 70%); + background: var(--clr-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-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(--clr-text-primary); + background-color: var(--clr-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(--clr-bg-primary); + backdrop-filter: $backdrop-blur-filter; + border-top: 1px solid var(--clr-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(--clr-text-accent); + } + + &:focus { + outline: 0; + } + + &:focus-visible { + border-top-color: var(--clr-text-accent); + border-radius: 0; + } + } +} + +.tabs-bar__wrapper { + background: var(--clr-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(--clr-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(--clr-border-primary); + border-top: 0; + border-radius: 0 0 4px 4px; + + &.about, + &.privacy-policy { + border-top: 1px solid var(--clr-border-primary); + border-radius: 4px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; + border-bottom: 0; + } + } + } +} + +.column__alert { + position: sticky; + bottom: 0; + z-index: 10; + box-sizing: border-box; + display: grid; + width: 100%; + max-width: 360px; + padding: 1rem; + margin: auto auto 0; + overflow: clip; + + &:empty { + padding: 0; + } + + @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; + } +} + +.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(--clr-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; + } + + .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(--clr-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(--clr-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(--clr-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(--clr-border-primary); + + &:last-child { + border-bottom: 0; + } + + &__source { + font-size: 13px; + line-height: 16px; + color: var(--clr-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(--clr-text-primary); + + strong { + font-weight: 700; + } + + &__account { + color: var(--clr-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(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + border: 2px solid var(--clr-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(--clr-text-error); + border-radius: 50%; + width: 0.625rem; + height: 0.625rem; + } +} + +.column-link--transparent .icon-with-badge__badge { + border-color: var(--clr-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(--clr-text-secondary); + } + + @media screen and (width >= 600px) { + padding: 40px; + } +} + +.copy-paste-text { + background: var(--clr-bg-secondary); + border-radius: 8px; + border: 1px solid var(--clr-border-primary); + padding: 16px; + color: var(--clr-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(--clr-text-accent); + } + + &.copied { + border-color: var(--clr-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(--clr-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(--clr-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(--clr-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(--clr-border-primary); +} + +.drawer__inner { + position: absolute; + top: 0; + inset-inline-start: 0; + background: var(--clr-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(--clr-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(--clr-border-primary); + margin-bottom: 10px; + display: flex; + flex-direction: row; + border-radius: 4px; + overflow: hidden; + + a:hover, + a:focus, + a:active { + color: var(--clr-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(--clr-border-primary); + border-radius: 4px 4px 0 0; + color: var(--clr-text-accent); + 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(--clr-text-accent); + 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(--clr-bg-accent-subtle) r g b / 50%); + border: 1px solid rgb(from var(--clr-text-accent) r g b / 50%); + box-sizing: border-box; + + .react-toggle:hover:not(.react-toggle--disabled) & { + background-color: rgb( + from var(--clr-bg-accent-subtle) r g b / + calc(50% + var(--clr-bg-accent-subtle-strength)) + ); + } + + .react-toggle--checked & { + background-color: var(--clr-bg-accent-strong); + border-color: var(--clr-bg-accent-strong); + } + + .react-toggle--checked:not(.react-toggle--disabled):hover & { + background-color: var(--clr-bg-accent-strong-highlighted); + } +} + +.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(--clr-text-on-accent-strong); + 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(--clr-bg-accent-strong); + } +} + +.switch-to-advanced { + color: var(--clr-text-secondary); + background-color: var(--clr-bg-secondary); + padding: 15px; + border-radius: 4px; + margin-top: 4px; + margin-bottom: 12px; + font-size: 13px; + line-height: 18px; + + .switch-to-advanced__toggle { + color: var(--clr-text-accent); + 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(--clr-text-primary), + var(--clr-text-secondary) + ); + background: transparent; + border: 0; + border-left: 4px solid transparent; + box-sizing: border-box; + + &:hover, + &:focus, + &:active { + color: var(--clr-text-primary); + } + + &.active { + color: var(--clr-text-accent); + } + + &:focus { + outline: 0; + } + + &:focus-visible { + border-color: var(--clr-text-accent); + 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(--clr-bg-primary); + padding: 4px 8px; + margin: -6px 10px; +} + +.column-subheading { + background: var(--clr-bg-secondary); + color: var(--clr-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(--clr-text-tertiary); + overflow: auto; + border: 1px solid var(--clr-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(--clr-border-primary); + padding: 10px; + font-size: 12px; + text-transform: uppercase; + font-weight: 500; + + a { + color: var(--clr-text-secondary); + text-decoration: none; + } + } + + .trends__item { + border-bottom: 0; + padding: 10px; + + &__current { + color: var(--clr-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(--clr-text-secondary); + margin-top: 14px; + text-decoration: none; + overflow: hidden; + border: 1px solid var(--clr-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(--clr-shadow-primary-base) 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(--clr-text-primary); + background: transparent; + border: 0; + padding: 0 8px; + text-decoration: none; + font-size: 18px; + line-height: 18px; + + &:hover, + &:active, + &:focus { + color: var(--clr-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(--clr-text-accent); + } + } +} + +.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(--clr-text-accent); + } + } +} + +.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(--clr-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(--clr-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(--clr-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(--clr-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(--clr-text-primary); + background-color: transparent; + border: 0; + font-size: inherit; + line-height: inherit; + width: 100%; + padding: 15px; + box-sizing: border-box; + text-decoration: none; + + &:hover { + background: var(--clr-bg-secondary); + } + + &:focus-visible { + outline: 2px solid var(--clr-text-accent); + outline-offset: -2px; + } + + .icon { + width: 22px; + height: 22px; + } +} + +.load-gap { + border-bottom: 1px solid var(--clr-border-primary); +} + +.timeline-hint { + text-align: center; + color: var(--clr-text-secondary); + padding: 16px; + box-sizing: border-box; + width: 100%; + font-size: 14px; + line-height: 21px; + + strong { + font-weight: 500; + } + + a { + color: var(--clr-text-accent); + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + color: var(--clr-text-accent-subtle); + } + } + + &--with-descendants { + border-top: 1px solid var(--clr-border-primary); + } +} + +.regeneration-indicator { + color: var(--clr-text-secondary); + border: 1px solid var(--clr-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(--clr-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(--clr-bg-accent-subtle); + + &::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(--clr-bg-accent-subtle-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(--clr-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(--clr-text-accent); + font-weight: bold; + font-size: 14px; + + &:hover { + color: var(--clr-text-accent-subtle); + } + } +} + +.column-header { + display: flex; + font-size: 16px; + border: 1px solid var(--clr-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(--clr-text-accent); + + &.compact { + flex: 0 0 auto; + color: var(--clr-text-primary); + } + } + + &.active { + .column-header__icon { + color: var(--clr-text-accent); + text-shadow: 0 0 10px var(--clr-bg-accent-subtle); + } + } + + &: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(--clr-text-primary); + background: transparent; + cursor: pointer; + font-size: 16px; + padding: 0 15px; + + &:last-child { + border-start-end-radius: 4px; + } + + &:hover { + color: var(--clr-text-secondary); + } + + &:focus-visible { + outline: var(--outline-focus-default); + } + + &.active { + color: var(--clr-text-accent); + + &:hover { + color: var(--clr-text-accent); + } + } + + &:disabled { + color: var(--clr-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(--clr-text-secondary); + transition: + max-height 150ms ease-in-out, + opacity 300ms linear; + opacity: 1; + z-index: 1; + position: relative; + border-left: 1px solid var(--clr-border-primary); + border-right: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--clr-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(--clr-border-primary); + margin: 10px 0; + } +} + +.column-header__collapsible-inner { + border-top: 0; +} + +.column-header__setting-btn { + &:hover, + &:focus { + color: var(--clr-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(--clr-text-error); + + &:hover { + text-decoration: underline; + } +} + +.loading-indicator { + color: var(--clr-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(--clr-text-tertiary); + width: 12px; + height: 12px; + margin: 6px; +} + +.load-more .loading-indicator .circular-progress { + color: var(--clr-text-tertiary); +} + +.circular-progress { + color: var(--clr-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(--clr-bg-primary); + color: var(--clr-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(--clr-text-on-media); + line-height: 20px; + font-size: 14px; + + &__label { + background-color: var(--clr-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(--clr-bg-media-base) r g b / 90%); + } + } + } +} + +.account--panel { + border-top: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--clr-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(--clr-text-secondary); + cursor: default; + display: block; + font-weight: 500; + } + + .column-header__links { + margin: 0; + } + + section { + padding: 16px; + border-bottom: 1px solid var(--clr-border-primary); + + &:last-child { + border-bottom: 0; + } + } + + h3 { + font-size: 16px; + line-height: 24px; + letter-spacing: 0.5px; + font-weight: 500; + color: var(--clr-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(--clr-text-primary), + var(--clr-text-secondary) + ); + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: var(--clr-bg-secondary); + } + + @media screen and (width <= 600px) { + font-size: 16px; + } + } + + &__placeholder { + color: var(--clr-text-tertiary); + padding-inline-start: 2px; + font-size: 12px; + } + + &__value-container { + padding-inline-start: 6px; + } + + &__multi-value { + background: var(--clr-bg-secondary); + + &__remove { + cursor: pointer; + + &:hover, + &:active, + &:focus { + background: var(--clr-bg-accent-subtle); + color: color-mix( + in oklab, + var(--clr-text-primary), + var(--clr-text-secondary) + ); + } + } + } + + &__multi-value__label, + &__input, + &__input-container { + color: var(--clr-text-secondary); + } + + &__clear-indicator, + &__dropdown-indicator { + cursor: pointer; + transition: none; + color: var(--clr-text-tertiary); + + &:hover, + &:active, + &:focus { + color: var(--clr-text-secondary); + } + } + + &__indicator-separator { + background-color: var(--clr-border-primary); + } + + &__menu { + @include search-popout; + + padding: 0; + background: var(--clr-bg-elevated); + } + + &__menu-list { + padding: 6px; + } + + &__option { + color: var(--clr-text-primary); + border-radius: 4px; + font-size: 14px; + + &--is-focused, + &--is-selected { + color: var(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + } + } + } +} + +.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(--clr-text-secondary); +} + +.limited-account-hint { + p { + color: var(--clr-text-primary); + font-size: 15px; + font-weight: 500; + margin-bottom: 20px; + } +} + +.empty-column-indicator, +.follow_requests-unlocked_explanation { + color: var(--clr-text-tertiary); + 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(--clr-text-accent); + 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 { + background: var(--clr-bg-tertiary); + border-bottom: 1px solid var(--clr-border-primary); + contain: initial; + flex-grow: 0; +} + +.error-column { + padding: 20px; + border: 1px solid var(--clr-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(--clr-text-secondary); + font-size: 15px; + line-height: 22px; + + h1 { + font-size: 28px; + line-height: 33px; + font-weight: 700; + margin-bottom: 15px; + color: var(--clr-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(--clr-bg-elevated); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-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(--clr-bg-elevated); + border: 1px solid var(--clr-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(--clr-border-primary); + } + } + + .emoji-mart-emoji { + height: 22px; + } +} + +.emoji-mart-emoji { + span { + background-repeat: no-repeat; + } +} + +.upload-area { + align-items: center; + background: rgb(from var(--clr-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(--clr-bg-elevated); + box-shadow: 0 0 5px var(--clr-shadow-primary); +} + +.upload-area__content { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: var(--clr-text-primary); + font-size: 18px; + font-weight: 500; + border: 2px dashed var(--clr-border-primary); + border-radius: 4px; +} + +.upload-progress { + color: var(--clr-text-secondary); + overflow: hidden; + display: flex; + gap: 8px; + align-items: center; + padding: 0 12px; + + .icon { + width: 24px; + height: 24px; + color: var(--clr-text-accent); + } + + 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(--clr-bg-primary); + position: relative; + margin-top: 5px; +} + +.upload-progress__tracker { + position: absolute; + inset-inline-start: 0; + top: 0; + height: 6px; + background: var(--clr-text-accent); + 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(--clr-bg-elevated); + border: 1px solid var(--clr-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(--clr-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(--clr-bg-secondary); + } + + &:focus, + &.active { + background: var(--clr-bg-accent-strong); + color: var(--clr-text-on-accent-strong); + 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(--clr-text-on-accent-strong); + } + } + + &__additional { + display: flex; + align-items: center; + justify-content: center; + color: var(--clr-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(--clr-text-secondary); + + strong { + color: var(--clr-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(--clr-bg-elevated); + + input { + padding: 8px 12px; + background: var(--clr-bg-primary); + border: 1px solid var(--clr-border-primary); + color: var(--clr-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(--clr-text-primary); + + .icon { + width: 18px; + height: 18px; + } + + &:disabled { + color: var(--clr-text-secondary); + } + } + + .emoji-mart-scroll { + padding: 0 10px 10px; + background: var(--clr-bg-elevated); + } + + &__results { + &__item { + display: flex; + align-items: center; + gap: 0.5em; + cursor: pointer; + color: var(--clr-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(--clr-text-secondary); + font-weight: 400; + } + + &:active, + &:hover { + background: var(--clr-bg-secondary); + } + + &:focus, + &.active { + background: var(--clr-bg-accent-strong); + color: var(--clr-text-on-accent-strong); + outline: 0; + + .language-dropdown__dropdown__results__item__common-name { + color: var(--clr-text-on-accent-strong); + } + } + } + } + } +} + +.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(--clr-text-primary); + background: var(--clr-bg-secondary-solid); + border: 1px solid var(--clr-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(--clr-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(--clr-bg-elevated); + border: 1px solid var(--clr-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(--clr-text-secondary); + font-weight: 500; + padding: 0 10px; + margin-bottom: 10px; + } + + .icon-button { + padding: 0; + color: var(--clr-text-secondary); + } + + .icon { + width: 18px; + height: 18px; + } + + &__menu { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + + &__message { + color: var(--clr-text-secondary); + padding: 0 10px; + } + + &__item { + display: block; + box-sizing: border-box; + width: 100%; + border: 0; + font: inherit; + background: transparent; + color: var(--clr-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(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + + .icon-button { + color: inherit; + } + } + + mark { + background: transparent; + font-weight: 700; + color: var(--clr-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(--clr-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(--clr-text-accent); + } + + &[aria-hidden='true'] { + pointer-events: none; + opacity: 0; + transform: rotate(-90deg); + } +} + +.search-results__section { + border-bottom: 1px solid var(--clr-border-primary); + + &:last-child { + border-bottom: 0; + } + + &__header { + border-bottom: 1px solid var(--clr-border-primary); + background: var(--clr-bg-tertiary); + padding: 15px; + font-weight: 500; + font-size: 14px; + color: var(--clr-text-secondary); + display: flex; + justify-content: space-between; + + h3 { + display: flex; + align-items: center; + gap: 5px; + } + + button { + color: var(--clr-text-accent); + 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(--clr-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(--clr-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; + + &__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(--clr-text-on-media); + --default-bg-color: transparent; + --hover-icon-color: var(--clr-text-on-media); + --hover-bg-color: rgb( + from var(--clr-text-on-media) r g b / var(--clr-bg-secondary-strength) + ); + + padding: 8px; + + .icon { + width: 24px; + height: 24px; + filter: var(--overlay-icon-shadow); + } + } + } +} + +.media-modal__closer { + position: absolute; + top: 0; + inset-inline-start: 0; + inset-inline-end: 0; + bottom: 0; +} + +.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(--clr-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(--clr-text-on-media) r g b / var(--clr-bg-secondary-strength) + ); + } +} + +.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(--clr-text-on-media); + --default-bg-color: transparent; + --hover-icon-color: var(--clr-text-on-media); + --hover-bg-color: rgb( + from var(--clr-text-on-media) r g b / + var(--clr-bg-accent-subtle-strength) + ); + + .icon { + filter: var(--overlay-icon-shadow); + } + + &.active { + --default-icon-color: var(--clr-text-accent); + --hover-icon-color: var(--clr-text-accent); + --hover-bg-color: var(--clr-bg-accent-subtle-highlighted); + } + + &.star-icon.active { + --default-icon-color: var(--clr-text-favourite-highlight); + --hover-icon-color: var(--clr-text-favourite-highlight); + --hover-bg-color: rgb( + from var(--clr-text-favourite-highlight) r g b / + var(--clr-bg-accent-subtle-strength) + ); + } + + &.disabled { + --default-icon-color: var(--clr-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(--clr-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(--clr-text-on-media); + } + + &:focus { + opacity: 1; + outline: 2px solid var(--clr-text-on-media); + outline-offset: 2px; + } +} + +.modal-placeholder { + width: 588px; + min-height: 478px; + flex-direction: column; + background: var(--clr-bg-primary); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-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(--clr-bg-primary); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-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(--clr-text-secondary); + + &__icon { + border-radius: 64px; + color: var(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + 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(--clr-text-primary); + } + } + + &__confirmation { + font-size: 14px; + line-height: 20px; + color: var(--clr-text-secondary); + + h1 { + font-size: 16px; + line-height: 24px; + color: var(--clr-text-primary); + font-weight: 500; + + &:not(:only-child) { + margin-bottom: 8px; + } + } + + strong { + font-weight: 700; + color: var(--clr-text-primary); + } + } + + &__status { + border: 1px solid var(--clr-border-primary); + border-radius: 8px; + padding: 8px; + cursor: pointer; + + &__account { + display: flex; + align-items: center; + gap: 4px; + margin-bottom: 8px; + color: var(--clr-text-tertiary); + + bdi { + color: inherit; + } + } + + &__content { + display: -webkit-box; + font-size: 15px; + line-height: 22px; + color: var(--clr-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(--clr-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(--clr-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(--clr-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(--clr-text-tertiary); + } + + .link-button { + padding: 10px 12px; + font-weight: 600; + } + } +} + +.dialog-modal { + width: 588px; + max-height: 80vh; + flex-direction: column; + background: var(--clr-bg-elevated); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-border-primary); + border-radius: 16px; + + &__header { + box-sizing: border-box; + border-bottom: 1px solid var(--clr-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(--clr-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(--clr-bg-media-base); + + img { + display: block; + } + + img, + .gifv video { + outline: 1px solid var(--clr-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(--clr-bg-elevated); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-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(--clr-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(--clr-bg-primary); + color: var(--clr-text-primary); + border-radius: 4px; + border: 1px solid var(--clr-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(--clr-border-primary); +} + +.report-dialog-modal { + max-width: 90vw; + width: 480px; + height: 80vh; + background: var(--clr-bg-primary); + color: var(--clr-text-primary); + border-radius: 4px; + border: 1px solid var(--clr-border-primary); + overflow: hidden; + position: relative; + flex-direction: column; + display: flex; + + &__container { + box-sizing: border-box; + border-top: 1px solid var(--clr-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(--clr-text-primary); + margin-bottom: 30px; + + a { + text-decoration: none; + color: var(--clr-text-accent); + 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(--clr-text-accent); + } + + .status__content, + .status__content p { + color: var(--clr-text-primary); + } + + .dialog-option { + align-items: center; + gap: 12px; + } + + .dialog-option .poll__input { + color: var(--clr-text-secondary); + display: inline-flex; + align-items: center; + justify-content: center; + + svg { + width: 15px; + height: 15px; + } + + &:active, + &:focus, + &:hover { + border-color: var(--clr-text-success); + border-width: 4px; + } + + &.active { + color: var(--clr-text-on-success-strong); + background: var(--clr-bg-success-strong); + border-color: var(--clr-bg-success-strong); + } + } + + .poll__option.dialog-option { + padding: 15px 0; + flex: 0 0 auto; + border-bottom: 1px solid var(--clr-border-primary); + + &:last-child { + border-bottom: 0; + } + + & > .poll__option__text { + font-size: 13px; + color: var(--clr-text-primary); + + strong { + font-size: 17px; + font-weight: 500; + line-height: 22px; + color: var(--clr-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(--clr-text-primary); + background: var(--clr-bg-secondary); + padding: 10px; + font-family: inherit; + font-size: 17px; + line-height: 22px; + resize: vertical; + border: 0; + border: 1px solid var(--clr-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(--clr-text-error); + color: var(--clr-text-error); + flex: 0 0 auto; + + &:hover, + &:focus, + &:active { + color: var(--clr-text-on-error-strong); + background: var(--clr-bg-error-strong); + border-color: var(--clr-bg-error-strong); + } + } + + 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(--clr-bg-elevated); + backdrop-filter: $backdrop-blur-filter; + border-color: var(--clr-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(--clr-bg-accent-subtle); + } + } +} + +.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(--clr-border-primary); + } + + &__container { + padding: 30px; + pointer-events: all; + overflow-y: auto; + } + + .status__content { + color: var(--clr-text-primary); + font-size: 19px; + line-height: 24px; + + .emojione { + width: 24px; + height: 24px; + margin: -1px 0 0; + } + + a { + color: var(--clr-text-accent); + } + + hr { + height: 0.25rem; + padding: 0; + background-color: var(--clr-text-primary); + border: 0; + margin: 20px 0; + } + } + + .media-gallery, + .audio-player, + .video-player { + margin-top: 15px; + } +} + +.loading-bar { + background-color: var(--clr-bg-accent-strong); + 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(--clr-text-on-media); + background: var(--clr-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(--clr-text-on-media); + background: var(--clr-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(--clr-text-on-media); + background: var(--clr-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(--clr-text-primary); + background: var(--clr-bg-elevated); + border: 1px solid var(--clr-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(--clr-border-primary); + border-radius: 4px; + margin-top: 16px; + overflow: hidden; + + &__icon { + flex: 0 0 auto; + color: var(--clr-text-tertiary); + padding: 8px 18px; + cursor: default; + border-inline-end: 1px solid var(--clr-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(--clr-text-tertiary); + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + } + + &.compact { + border: 0; + + .attachment-list__list { + padding: 0; + display: block; + } + + .icon { + color: var(--clr-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-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(--clr-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(--clr-text-on-media); + filter: drop-shadow(0 0 6px var(--clr-bg-media-base)); + } + } + + &--error img { + visibility: hidden; + } +} + +.media-gallery__item-thumbnail { + cursor: pointer; + display: block; + text-decoration: none; + color: var(--clr-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(--clr-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(--clr-text-on-media); + --player-background-color: var(--clr-bg-media-base); + --player-accent-color: var(--clr-text-accent); + + 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(--clr-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(--clr-text-on-media); + background: var(--clr-bg-media); + max-width: 100%; + border-radius: 8px; + box-sizing: border-box; + display: flex; + align-items: center; + outline: 1px solid var(--clr-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(--clr-bg-media-base) r g b / 85%) 0, + rgb(from var(--clr-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(--clr-bg-primary); + color: var(--clr-text-secondary); + transition: none; + pointer-events: none; + + &.active { + display: block; + pointer-events: auto; + + &:hover, + &:active, + &:focus { + color: color-mix( + in oklab, + var(--clr-text-primary), + var(--clr-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(--clr-text-on-media) r g b / 75%); + font-weight: 500; + + &:active, + &:hover, + &:focus { + color: var(--clr-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(--clr-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(--clr-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(--clr-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(--clr-text-on-media); + box-shadow: 1px 2px 6px var(--clr-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(--clr-text-on-media); + + &:hover, + &:active, + &:focus { + text-decoration: underline; + } + } + } + + &__seek { + cursor: pointer; + height: 24px; + position: relative; + + &::before { + content: ''; + width: 100%; + background: rgb(from var(--clr-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(--clr-text-on-media); + } + + &__buffer { + background: rgb(from var(--clr-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(--clr-text-on-media); + box-shadow: 1px 2px 6px var(--clr-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(--clr-text-on-media); + background: var(--clr-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(--clr-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(--clr-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(--clr-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(--clr-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(--clr-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(--clr-text-accent); + } + } + } + + .scrollable & { + border-left: 0; + border-right: 0; + } +} + +.filter-form { + border-bottom: 1px solid var(--clr-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(--clr-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(--clr-text-primary); + box-sizing: border-box; + width: 20px; + height: 20px; + flex: 0 0 auto; + border-radius: 50%; + + &.checked, + &.indeterminate { + border-color: var(--clr-text-accent); + } + + .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(--clr-text-accent); +} + +.check-box { + &__input { + width: 18px; + height: 18px; + border-radius: 2px; + + &.checked, + &.indeterminate { + background: var(--clr-bg-accent-strong); + color: var(--clr-text-on-accent-strong); + } + } +} + +noscript { + text-align: center; + + img { + width: 200px; + opacity: 0.5; + animation: flicker 4s infinite; + } + + div { + font-size: 14px; + margin: 30px auto; + color: var(--clr-text-primary); + max-width: 400px; + + a { + color: var(--clr-text-accent); + 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(--clr-bg-tertiary); + display: flex; + align-items: center; + flex-direction: column; + + &__message { + color: var(--clr-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(--clr-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(--clr-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(--clr-text-on-media); + border-radius: 50%; + box-shadow: 0 0 0 9999em var(--clr-shadow-primary); + pointer-events: none; + } +} + +.account__header__content { + color: var(--clr-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(--clr-bg-tertiary); + border-bottom: 1px solid var(--clr-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(--clr-border-primary); + + .avatar { + display: block; + flex: 0 0 auto; + + .account__avatar { + background: var(--clr-bg-primary); + border: 1px solid var(--clr-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(--clr-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(--clr-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(--clr-border-primary); + border-radius: 4px; + box-sizing: content-box; + padding: 5px; + + .icon { + width: 24px; + height: 24px; + } + + &.copied { + border-color: var(--clr-text-success); + } + } + } + + &__bio { + .account__header__content { + color: var(--clr-text-primary); + } + + .account__header__fields { + margin: 0; + margin-top: 16px; + border-radius: 4px; + border: 1px solid var(--clr-border-primary); + + dl { + display: block; + padding: 11px 16px; + border-bottom-color: var(--clr-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(--clr-text-tertiary); + } + + dd { + color: var(--clr-text-secondary); + } + + a { + color: var(--clr-text-accent); + } + + .icon { + width: 18px; + height: 18px; + } + + .verified { + border: 1px solid var(--clr-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(--clr-text-success); + } + + dd { + display: flex; + align-items: center; + gap: 4px; + + span { + display: flex; + } + } + + a { + color: var(--clr-text-success); + } + } + } + } + + &__extra { + margin-top: 16px; + + &__links { + font-size: 14px; + color: var(--clr-text-secondary); + margin: 0 -10px; + padding-top: 16px; + padding-bottom: 10px; + + a { + display: inline-block; + color: var(--clr-text-secondary); + text-decoration: none; + padding: 5px 10px; + font-weight: 500; + + strong { + font-weight: 700; + color: var(--clr-text-primary); + } + } + } + } + + &__account-note { + color: var(--clr-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(--clr-text-secondary); + text-transform: uppercase; + margin-bottom: 5px; + } + + textarea { + display: block; + box-sizing: border-box; + width: calc(100% + 20px); + color: var(--clr-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(--clr-text-tertiary); + opacity: 1; + } + + &:focus { + background: var(--clr-bg-accent-subtle); + } + } + } + + &__familiar-followers { + display: flex; + align-items: center; + gap: 10px; + margin-block: 16px; + color: var(--clr-text-secondary); + + a:any-link { + font-weight: 500; + text-decoration: none; + color: var(--clr-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(--clr-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(--clr-border-primary); + gap: 8px; + + &__name { + flex: 1 1 auto; + color: var(--clr-text-secondary); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + strong { + font-weight: 500; + } + + a { + color: var(--clr-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(--clr-text-primary); + text-decoration: none; + } + + &__sparkline { + flex: 0 0 auto; + width: 50px; + + path:first-child { + fill: var(--clr-graph-primary-fill) !important; + fill-opacity: 1 !important; + } + + path:last-child { + stroke: var(--clr-graph-primary-stroke) !important; + fill: none !important; + } + } + + &--requires-review { + .trends__item__name { + color: var(--clr-text-warning); + + a { + color: var(--clr-text-warning); + } + } + + .trends__item__current { + color: var(--clr-text-warning); + } + + .trends__item__sparkline { + path:first-child { + fill: var(--clr-graph-warning-fill) !important; + } + + path:last-child { + stroke: var(--clr-graph-warning-stroke) !important; + } + } + } + + &--disabled { + .trends__item__name { + color: var(--clr-text-disabled); + + a { + color: var(--clr-text-disabled); + } + } + + .trends__item__current { + color: var(--clr-text-disabled); + } + + .trends__item__sparkline { + path:first-child { + fill: var(--clr-graph-disabled-fill) !important; + } + + path:last-child { + stroke: var(--clr-graph-disabled-stroke) !important; + } + } + } + } + + &--compact &__item { + padding: 12px; + } +} + +.conversation { + display: flex; + border-bottom: 1px solid var(--clr-border-primary); + padding: 5px; + padding-bottom: 0; + + &:focus { + background: var(--clr-bg-secondary); + outline: 0; + } + + &__avatar { + flex: 0 0 auto; + padding: 10px; + padding-top: 12px; + position: relative; + cursor: pointer; + } + + &__unread { + display: inline-block; + background: var(--clr-text-accent); + 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(--clr-text-secondary); + padding-inline-start: 15px; + } + + &__names { + color: var(--clr-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(--clr-text-primary); + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } + + a { + overflow-wrap: anywhere; + } + } +} + +.announcements { + background: var(--clr-bg-accent-subtle); + 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; + } + } + + &__container { + width: calc(100% - 124px); + flex: 0 0 auto; + position: relative; + + @media screen and (max-width: (124px + 300px)) { + width: 100%; + } + } + + &__item { + box-sizing: border-box; + width: 100%; + padding: 15px; + position: relative; + font-size: 15px; + line-height: 20px; + overflow-wrap: break-word; + font-weight: 400; + max-height: 50vh; + overflow: hidden; + display: flex; + 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(--clr-text-accent); + border-radius: 50%; + width: 0.625rem; + height: 0.625rem; + } + } + + &__pagination { + padding: 15px; + color: var(--clr-text-secondary); + position: absolute; + bottom: 3px; + inset-inline-end: 0; + display: flex; + align-items: center; + } +} + +.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(--clr-bg-accent-subtle); + color: color-mix( + in oklab, + var(--clr-text-primary), + var(--clr-text-secondary) + ); + border: 1px solid var(--clr-border-on-bg-accent-subtle); + 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(--clr-text-primary); + background: var(--clr-bg-accent-subtle-highlighted); + transition: all 200ms ease-out; + transition-property: background-color, color; + } + + &.active { + color: var(--clr-text-accent); + background-color: var(--clr-bg-accent-subtle); + border-color: var(--clr-text-accent); + 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(--clr-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(--clr-text-primary), + var(--clr-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(--clr-text-accent); + 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(--clr-bg-secondary); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-border-primary); + border-top: 0; + padding: 12px; + display: flex; + justify-content: space-between; + } + + &__header { + border-radius: 4px 4px 0 0; + background: var(--clr-bg-secondary); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-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(--clr-text-primary); + text-decoration: none; + + strong, + span { + display: block; + text-overflow: ellipsis; + overflow: hidden; + } + + span { + color: var(--clr-text-secondary); + } + } + } + + .video-player, + .audio-player { + border-radius: 0; + } +} + +.picture-in-picture-placeholder { + border-radius: 8px; + box-sizing: border-box; + border: 1px dashed var(--clr-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(--clr-text-tertiary); + aspect-ratio: 16 / 9; + + .icon { + width: 48px; + height: 48px; + margin-bottom: 8px; + } + + &:hover, + &:active, + &:focus { + color: var(--clr-text-secondary); + } + + &:focus-visible { + outline: var(--outline-focus-default); + border-color: transparent; + } +} + +.notifications-permission-banner { + padding: 30px; + border-bottom: 1px solid var(--clr-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(--clr-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(--clr-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(--clr-border-primary); + } + + .search__icon { + top: 12px; + inset-inline-end: 12px; + color: var(--clr-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(--clr-border-primary); + border-top: 0; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } +} + +.story { + display: flex; + align-items: center; + color: var(--clr-text-primary); + padding: 16px; + border-bottom: 1px solid var(--clr-border-primary); + gap: 16px; + + &:last-child { + border-bottom: 0; + } + + &__details { + flex: 1 1 auto; + + &__publisher { + color: var(--clr-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(--clr-text-primary); + + &:hover, + &:active, + &:focus { + color: var(--clr-text-accent); + } + } + + &__shared { + display: flex; + align-items: baseline; + color: var(--clr-text-secondary); + gap: 8px; + justify-content: space-between; + font-size: 14px; + line-height: 20px; + + &__pill { + background: var(--clr-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(--clr-text-primary); + font-weight: 500; + text-decoration: none; + + &:hover, + &:active, + &:focus { + color: var(--clr-text-accent); + } + } + } + + 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(--clr-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(--clr-bg-tertiary); + object-fit: cover; + } + + &__description { + font-size: 15px; + line-height: 22px; + color: var(--clr-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(--clr-text-primary); + font-size: 14px; + } + + &__number-label { + color: var(--clr-text-secondary); + font-weight: 500; + font-size: 14px; + } + + h4 { + text-transform: uppercase; + color: var(--clr-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(--clr-bg-primary); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-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(--clr-text-secondary); + + strong { + color: var(--clr-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(--clr-border-primary); + padding: 4px 6px; + color: var(--clr-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(--clr-text-primary), + var(--clr-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(--clr-border-primary); + } + + &.invalid &__input { + border-color: var(--clr-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(--clr-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(--clr-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(--clr-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(--clr-text-primary); + font-weight: 700; + } + + em, + i { + font-style: italic; + } + + a { + color: var(--clr-text-accent); + text-decoration: underline; + + &:focus, + &:hover, + &:active { + text-decoration: none; + } + } + + code { + font-size: 0.875em; + background: var(--clr-bg-secondary); + border-radius: 4px; + padding: 0.2em 0.3em; + } + + hr { + border: 0; + border-top: 1px solid var(--clr-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(--clr-border-on-bg-accent-subtle); + background: var(--clr-bg-accent-subtle); + 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(--clr-text-primary); + + p { + margin-bottom: 15px; + + &:last-child { + margin-bottom: 0; + } + } + + h1 { + color: var(--clr-text-accent); + 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(--clr-text-accent); + } + } +} + +.warning-banner { + border: 1px solid var(--clr-border-on-bg-error-subtle); + background: var(--clr-bg-error-subtle); + + &__message { + h1 { + color: var(--clr-text-error); + } + + a { + color: var(--clr-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(--clr-text-secondary); + margin-bottom: 20px; + + .version { + white-space: nowrap; + } + + strong { + font-weight: 500; + } + + a { + color: var(--clr-text-secondary); + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + } +} + +.about { + padding: 20px; + border-top: 1px solid var(--clr-border-primary); + + @media screen and (min-width: $no-gap-breakpoint) { + border-radius: 4px; + } + + &__footer { + color: var(--clr-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(--clr-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(--clr-text-secondary); + } + } + + &__meta { + border: 1px solid var(--clr-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(--clr-border-primary); + border-left-width: 1px; + min-height: calc(100% - 60px); + flex: 0 0 auto; + } + + h4 { + font-size: 15px; + text-transform: uppercase; + color: var(--clr-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(--clr-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(--clr-border-primary); + color: var(--clr-text-accent); + cursor: pointer; + width: 100%; + background: none; + } + + &.active &__title { + border-radius: 4px 4px 0 0; + } + + &__body { + border: 1px solid var(--clr-border-primary); + border-top: 0; + padding: 20px; + font-size: 15px; + line-height: 22px; + } + } + + &__domain-blocks { + margin-top: 30px; + border: 1px solid var(--clr-border-primary); + border-radius: 4px; + + &__domain { + border-bottom: 1px solid var(--clr-border-primary); + padding: 10px; + font-size: 15px; + color: var(--clr-text-secondary); + + &:nth-child(2n) { + background: var(--clr-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(--clr-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(--clr-text-on-inverted); + background: var(--clr-bg-inverted); + backdrop-filter: blur(8px); + border: 1px solid var(--clr-border-on-bg-inverted); + border-radius: 8px; + box-shadow: + 0 10px 15px -3px var(--clr-shadow-primary), + 0 4px 6px -4px var(--clr-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(--clr-text-accent); + font-weight: 700; + border-radius: 4px; + padding: 0 4px; + + &:hover, + &:focus, + &:active { + background: var(--clr-bg-accent-subtle); + } +} + +.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(--clr-text-on-media); + height: var(--spinner-size); + width: var(--spinner-size); + } +} + +.hashtag-header { + border-bottom: 1px solid var(--clr-border-primary); + padding: 15px; + font-size: 17px; + line-height: 22px; + color: var(--clr-text-secondary); + + strong { + font-weight: 700; + } + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + gap: 15px; + + h1 { + color: var(--clr-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(--clr-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(--clr-text-primary), + var(--clr-text-secondary) + ); + + a { + display: inline-flex; + color: inherit; + text-decoration: none; + padding: 4px 12px; + background: var(--clr-bg-accent-subtle); + border-radius: 4px; + font-weight: 500; + + &:hover, + &:focus, + &:active { + background: var(--clr-bg-accent-subtle-highlighted); + } + } + + .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(--clr-border-primary); + background: var(--clr-bg-accent-subtle); + + &.focusable:focus-visible { + background: var(--clr-bg-accent-subtle); + } + + &__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(--clr-text-primary); + opacity: 0.5; + + &.left { + left: 0; + } + + &.right { + right: 0; + } + + &__icon { + border-radius: 50%; + color: var(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + 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(--clr-bg-primary); + border: 1px solid var(--clr-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(--clr-border-primary); + background-color: var(--clr-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(--clr-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(--clr-text-primary); + } + + &__account { + font-size: 14px; + color: var(--clr-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(--clr-border-primary); + padding: 16px 24px; + gap: 8px; + color: var(--clr-text-secondary); + text-decoration: none; + + &:hover, + &:active, + &:focus { + color: var(--clr-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(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + border-radius: 100px; + padding: 2px 8px; + } +} + +.notification-request { + $padding: 15px; + + display: flex; + padding: $padding; + gap: 8px; + position: relative; + border-bottom: 1px solid var(--clr-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(--clr-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(--clr-text-primary); + + bdi { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + .filtered-notifications-banner__badge { + color: var(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); + border-radius: 4px; + padding: 1px 6px; + } + } + + &__actions { + display: flex; + align-items: center; + gap: 8px; + + .icon-button { + border-radius: 4px; + border: 1px solid var(--clr-border-primary); + padding: 5px; + } + } + + .notification-request__link { + transition: padding-inline-start 0.1s ease-in-out; + } + + &--forced-checkbox { + cursor: pointer; + + &:hover { + background: var(--clr-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(--clr-text-secondary); + background: var(--clr-bg-tertiary); + border: 1px solid var(--clr-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(--clr-text-secondary); + } + + & > span { + display: flex; + align-items: center; + gap: 8px; + } + + a { + display: inline-flex; + align-items: center; + gap: 4px; + font-weight: 500; + color: var(--clr-text-primary); + text-decoration: none; + min-width: 0; + + &:hover, + &:focus, + &:active { + color: var(--clr-text-accent); + } + } +} + +.notification-group { + display: flex; + align-items: flex-start; + gap: 8px; + padding: 16px 24px; + border-bottom: 1px solid var(--clr-border-primary); + + &__icon { + width: 40px; + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + color: var(--clr-text-tertiary); + + .icon { + width: 28px; + height: 28px; + } + } + + &--follow &__icon, + &--follow-request &__icon { + color: var(--clr-text-accent); + } + + &--favourite &__icon { + color: var(--clr-text-favourite-highlight); + } + + &--reblog &__icon { + color: var(--clr-text-success); + } + + &--relationships-severance-event &__icon, + &--admin-report &__icon, + &--admin-sign-up &__icon { + color: var(--clr-text-tertiary); + } + + &--moderation-warning &__icon { + color: var(--clr-text-bookmark-highlight); + } + + &--follow-request &__actions { + align-items: center; + display: flex; + gap: 8px; + + .icon-button { + border: 1px solid var(--clr-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(--clr-text-secondary); + + a { + color: inherit; + text-decoration: none; + } + + bdi { + font-weight: 700; + color: var(--clr-text-primary); + } + + time { + color: var(--clr-text-tertiary); + } + + @container (width < 350px) { + time, + &-separator { + display: none; + } + } + } + } + + &__status { + border: 1px solid var(--clr-border-primary); + border-radius: 8px; + padding: 8px; + } + + &__additional-content { + color: var(--clr-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(--clr-text-tertiary); + font-size: 15px; + line-height: 22px; + + bdi { + color: var(--clr-text-secondary); + } + + .account__avatar { + flex: 0 0 auto; + } + } + + &__content { + display: -webkit-box; + font-size: 15px; + line-height: 22px; + color: var(--clr-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(--clr-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(--clr-border-primary); + + &__header { + display: flex; + align-items: center; + gap: 8px; + color: var(--clr-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(--clr-text-accent); + 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(--clr-bg-primary); + backdrop-filter: $backdrop-blur-filter; + border: 1px solid var(--clr-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(--clr-text-primary); + + strong { + font-weight: 700; + } + } + + &__text-row { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__bio { + color: var(--clr-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(--clr-text-tertiary); + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + } + + dd { + white-space: pre-line; + color: var(--clr-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(--clr-text-primary); + } + + &__account { + display: block; + color: var(--clr-text-tertiary); + } + } + + .account-fields { + color: var(--clr-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(--clr-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(--clr-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(--clr-text-primary); + background: var(--clr-bg-accent-subtle); + border: 1px solid var(--clr-border-on-bg-accent-subtle); + 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(--clr-text-secondary); + + p { + font-weight: normal; + } + + .filter-name { + font-weight: 500; + color: var(--clr-text-primary); + } + } +} + +.lists__item { + display: flex; + align-items: center; + gap: 16px; + padding-inline-end: 13px; + border-bottom: 1px solid var(--clr-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(--clr-text-secondary); + text-decoration: none; + + &:is(a):hover, + &:is(a):focus, + &:is(a):active { + color: var(--clr-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(--clr-text-secondary); + opacity: 1; + } + + &:focus { + outline: 0; + } + } + } +} + +.column-search-header { + display: flex; + gap: 12px; + align-items: center; + border: 1px solid var(--clr-border-primary); + border-top: 0; + border-bottom: 0; + padding: 16px; + padding-bottom: 8px; + + input { + background: var(--clr-bg-secondary); + border: 1px solid var(--clr-border-primary); + color: var(--clr-text-primary); + padding: 12px; + font-size: 16px; + line-height: normal; + border-radius: 4px; + display: block; + flex: 1 1 auto; + + &::placeholder { + color: var(--clr-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(--clr-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(--clr-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; + } + } +} diff --git a/app/javascript/styles_new/mastodon/containers.scss b/app/javascript/styles_new/mastodon/containers.scss new file mode 100644 index 00000000000..6e29a22c8d7 --- /dev/null +++ b/app/javascript/styles_new/mastodon/containers.scss @@ -0,0 +1,166 @@ +@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(--clr-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(--clr-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(--clr-text-primary); + + .username { + display: block; + font-size: 16px; + line-height: 24px; + text-overflow: ellipsis; + overflow: hidden; + color: var(--clr-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(--clr-text-accent); + 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 new file mode 100644 index 00000000000..e5872bb6968 --- /dev/null +++ b/app/javascript/styles_new/mastodon/css_variables.scss @@ -0,0 +1,213 @@ +@use 'theme_utils' as utils; + +:root { + --clr-black: #000; + --clr-grey-950: #181821; + --clr-grey-800: #292938; + --clr-grey-700: #444664; + --clr-grey-600: #545778; + --clr-grey-500: #696d91; + --clr-grey-400: #8b8dac; + --clr-grey-300: #b4b6cb; + --clr-grey-200: #d8d9e3; + --clr-grey-100: #f0f0f5; + --clr-grey-50: #f0f1ff; + --clr-white: #fff; + --clr-indigo-600: #6147e6; + --clr-indigo-400: #8886ff; + --clr-indigo-300: #a5abfd; + --clr-indigo-200: #c8cdfe; + --clr-indigo-100: #e0e3ff; + --clr-indigo-50: #f0f1ff; + --clr-red-500: #ff637e; + --clr-red-600: #ec003f; + --clr-yellow-400: #ffb900; + --clr-yellow-600: #e17100; + --clr-green-400: #05df72; + --clr-green-600: #00a63e; + + /* TEXT TOKENS */ + + --clr-text-primary: var(--clr-grey-50); + --clr-text-secondary: var(--clr-grey-400); + --clr-text-tertiary: var(--clr-grey-500); + --clr-text-on-inverted: var(--clr-grey-950); + --clr-text-accent: var(--clr-indigo-400); + --clr-text-accent-subtle: color-mix( + in oklab, + var(--clr-text-primary), + var(--clr-text-accent) + ); + --clr-text-on-accent-strong: var(--clr-white); + --clr-text-error: var(--clr-red-500); + --clr-text-on-error-strong: var(--clr-white); + --clr-text-warning: var(--clr-yellow-400); + --clr-text-on-warning-strong: var(--clr-white); + --clr-text-success: var(--clr-green-400); + --clr-text-on-success-strong: var(--clr-white); + --clr-text-disabled: var(--clr-grey-600); + --clr-text-on-disabled: var(--clr-grey-400); + --clr-text-bookmark-highlight: var(--clr-text-error); + --clr-text-favourite-highlight: var(--clr-text-warning); + --clr-text-on-media: var(--clr-white); + --clr-text-status-links: color-mix( + in oklab, + var(--clr-text-primary), + var(--clr-text-secondary) + ); + + /* BACKGROUND TOKENS */ + + --clr-bg-primary: var(--clr-grey-950); + --clr-bg-secondary-base: var(--clr-indigo-200); + --clr-bg-secondary-strength: 10%; + --clr-bg-secondary: #{utils.css-alpha( + var(--clr-bg-secondary-base), + var(--clr-bg-secondary-strength) + )}; + --clr-bg-secondary-solid: color-mix( + in srgb, + var(--clr-bg-primary), + var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength) + ); + + /* Secondary with doubled mix amount */ + --clr-bg-tertiary: color-mix( + in oklab, + var(--clr-bg-primary), + var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength)) + ); + --clr-bg-ambient: var(--clr-bg-primary); + --clr-bg-elevated: var(--clr-grey-800); + --clr-bg-inverted: var(--clr-grey-50); + --clr-bg-media-base: var(--clr-black); + --clr-bg-media-strength: 65%; + --clr-bg-media: #{utils.css-alpha( + var(--clr-bg-media-base), + var(--clr-bg-media-strength) + )}; + --clr-bg-overlay: var(--clr-bg-primary); + --clr-bg-disabled: var(--clr-grey-700); + --clr-bg-accent-subtle-base: var(--clr-indigo-400); + --clr-bg-accent-subtle-strength: 10%; + --clr-bg-accent-subtle: #{utils.css-alpha( + var(--clr-bg-accent-subtle-base), + var(--clr-bg-accent-subtle-strength) + )}; + --clr-bg-accent-subtle-highlighted: #{utils.css-alpha( + var(--clr-bg-accent-subtle-base), + calc(var(--clr-bg-accent-subtle-strength) * 1.5) + )}; + --clr-bg-accent-strong: var(--clr-indigo-600); + --clr-bg-accent-strong-highlighted: color-mix( + in oklab, + var(--clr-bg-accent-strong), + black var(--clr-bg-accent-subtle-strength) + ); + --clr-bg-error-subtle-base: #f41b3b; + --clr-bg-error-subtle-strength: 12%; + --clr-bg-error-subtle: #{utils.css-alpha( + var(--clr-bg-error-subtle-base), + var(--clr-bg-error-subtle-strength) + )}; + --clr-bg-error-strong: var(--clr-red-600); + --clr-bg-error-strong-highlighted: color-mix( + in oklab, + var(--clr-bg-error-strong), + black var(--clr-bg-error-subtle-strength) + ); + --clr-bg-warning-subtle-base: #ffca1b; + --clr-bg-warning-subtle-strength: 10%; + --clr-bg-warning-subtle: #{utils.css-alpha( + var(--clr-bg-warning-subtle-base), + var(--clr-bg-warning-subtle-strength) + )}; + --clr-bg-warning-strong: var(--clr-yellow-600); + --clr-bg-warning-strong-highlighted: color-mix( + in oklab, + var(--clr-bg-warning-strong), + black var(--clr-bg-warning-subtle-strength) + ); + --clr-bg-success-subtle-base: #17e865; + --clr-bg-success-subtle-strength: 15%; + --clr-bg-success-subtle: #{utils.css-alpha( + var(--clr-bg-success-subtle-base), + var(--clr-bg-success-subtle-strength) + )}; + --clr-bg-success-strong: var(--clr-green-600); + --clr-bg-success-strong-highlighted: color-mix( + in oklab, + var(--clr-bg-success-strong), + black var(--clr-bg-success-subtle-strength) + ); + + /* BORDER TOKENS */ + + --clr-border-primary-base: var(--clr-indigo-200); + --clr-border-primary-strength: 18%; + --clr-border-primary: #{utils.css-alpha( + var(--clr-border-primary-base), + var(--clr-border-primary-strength) + )}; + --clr-border-media: rgb(252 248 255 / 15%); + --clr-border-on-bg-secondary: #{utils.css-alpha( + var(--clr-border-primary-base), + calc(var(--clr-border-primary-strength) / 1.5) + )}; + --clr-border-on-bg-accent-subtle: var(--clr-border-primary); + --clr-border-on-bg-error-subtle: #{utils.css-alpha( + var(--clr-text-error), + 50% + )}; + --clr-border-on-bg-warning-subtle: #{utils.css-alpha( + var(--clr-text-warning), + 50% + )}; + --clr-border-on-bg-success-subtle: #{utils.css-alpha( + var(--clr-text-success), + 50% + )}; + --clr-border-on-bg-inverted: var(--clr-border-primary); + + /* SHADOW TOKENS */ + + --clr-shadow-primary-base: var(--clr-black); + --clr-shadow-primary-strength: 80%; + --clr-shadow-primary: #{utils.css-alpha( + var(--clr-shadow-primary-base), + var(--clr-shadow-primary-strength) + )}; + --dropdown-shadow: + 0 20px 25px -5px var(--clr-shadow-primary), + 0 8px 10px -6px var(--clr-shadow-primary); + --overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary)); + + /* GRAPHS/CHARTS TOKENS */ + + --clr-graph-primary-stroke: var(--clr-text-accent); + --clr-graph-primary-fill: var(--clr-bg-accent-subtle); + --clr-graph-warning-stroke: var(--clr-text-warning); + --clr-graph-warning-fill: var(--clr-bg-warning-subtle); + --clr-graph-disabled-stroke: var(--clr-text-disabled); + --clr-graph-disabled-fill: var(--clr-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(--clr-text-accent); + --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 new file mode 100644 index 00000000000..c53113a995c --- /dev/null +++ b/app/javascript/styles_new/mastodon/dashboard.scss @@ -0,0 +1,120 @@ +@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(--clr-bg-primary); + border-radius: 4px; + border: 1px solid var(--clr-border-primary); + box-sizing: border-box; + height: 100%; + } + + & > a { + text-decoration: none; + color: inherit; + display: block; + + &:hover, + &:focus, + &:active { + background: var(--clr-bg-accent-subtle); + } + } + } + + &__num, + &__text { + text-align: center; + font-weight: 500; + font-size: 24px; + color: var(--clr-text-primary); + margin-bottom: 20px; + line-height: 30px; + } + + &__text { + font-size: 18px; + } + + &__label { + font-size: 14px; + color: var(--clr-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(--clr-bg-accent-strong); + color: var(--clr-text-on-accent-strong); + transition: all 100ms ease-in; + font-size: 14px; + padding: 8px 16px; + text-decoration: none; + margin-bottom: 4px; + + &:active, + &:focus, + &:hover { + background-color: var(--clr-bg-accent-strong-highlighted); + transition: all 200ms ease-out; + } + + &.positive { + background: var(--clr-bg-success-subtle); + color: var(--clr-text-success); + } + + &.negative { + background: var(--clr-bg-error-subtle); + color: var(--clr-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 new file mode 100644 index 00000000000..0ee977c36b2 --- /dev/null +++ b/app/javascript/styles_new/mastodon/emoji_picker.scss @@ -0,0 +1,248 @@ +@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(--clr-bg-tertiary); + border-bottom: 1px solid var(--clr-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(--clr-text-secondary); + + &:hover { + color: color-mix( + in oklab, + var(--clr-text-primary), + var(--clr-text-secondary) + ); + } +} + +.emoji-mart-anchor-selected { + color: var(--clr-text-accent); + + &:hover { + color: var(--clr-text-accent-subtle); + } + + .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(--clr-text-accent); +} + +.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(--clr-bg-secondary); + color: var(--clr-text-secondary); + border: 1px solid var(--clr-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(--clr-bg-accent-subtle); + 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(--clr-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 new file mode 100644 index 00000000000..dc25b136cfe --- /dev/null +++ b/app/javascript/styles_new/mastodon/forms.scss @@ -0,0 +1,1449 @@ +@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(--clr-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(--clr-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(--clr-text-primary); + + &.success { + color: var(--clr-text-on-success-strong); + background: var(--clr-bg-success-strong); + } + + &.failure { + color: var(--clr-text-on-error-strong); + background: var(--clr-bg-error-strong); + } +} + +.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(--clr-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(--clr-text-accent); + 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(--clr-text-primary); + margin-bottom: 30px; + + &.invited-by { + margin-bottom: 15px; + } + + a { + color: var(--clr-text-accent); + } + } + + .rules-list { + font-size: 17px; + line-height: 22px; + margin-bottom: 30px; + } + + .hint { + color: var(--clr-text-secondary); + + a { + color: var(--clr-text-accent); + } + + code { + border-radius: 3px; + padding: 0.2em 0.4em; + background: var(--clr-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(--clr-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(--clr-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(--clr-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(--clr-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(--clr-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(--clr-text-primary); + display: block; + width: auto; + } + + .check_boxes { + .checkbox { + label { + font-family: inherit; + font-size: 14px; + color: var(--clr-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(--clr-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(--clr-text-primary); + display: block; + width: 100%; + outline: 0; + font-family: inherit; + resize: vertical; + background: var(--clr-bg-secondary); + border: 1px solid var(--clr-border-primary); + border-radius: 4px; + padding: 10px 16px; + + &:invalid { + box-shadow: none; + } + + &:required:valid { + border-color: var(--clr-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(--clr-text-error); + } + } + + .input.field_with_errors { + label { + color: var(--clr-text-error); + } + + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='datetime-local'], + textarea, + select { + border-color: var(--clr-text-error); + } + + .error { + display: block; + font-weight: 500; + color: var(--clr-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(--clr-bg-accent-strong); + color: var(--clr-text-on-accent-strong); + 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(--clr-bg-accent-strong-highlighted); + } + + &:disabled, + &:disabled:hover { + color: var(--clr-text-on-disabled); + background: var(--clr-bg-disabled); + } + + &.negative { + background: var(--clr-bg-error-strong); + + &:hover, + &:active, + &:focus { + background: var(--clr-bg-error-strong-highlighted); + } + } + } + + select { + appearance: none; + box-sizing: border-box; + font-size: 14px; + color: var(--clr-text-primary); + display: block; + width: 100%; + outline: 0; + font-family: inherit; + resize: vertical; + background: var(--clr-bg-secondary); + border: 1px solid var(--clr-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(--clr-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(--clr-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(--clr-text-accent); + background: transparent; + border: 1px solid var(--clr-text-accent); + border-radius: 4px; + padding: 15px 10px; + margin-bottom: 30px; + text-align: center; + + &.notice { + border: 1px solid var(--clr-border-on-bg-success-subtle); + background: var(--clr-bg-success-subtle); + color: var(--clr-text-success); + } + + &.warning { + border: 1px solid var(--clr-border-on-bg-warning-subtle); + background: var(--clr-bg-warning-subtle); + color: var(--clr-text-warning); + } + + &.alert { + border: 1px solid var(--clr-border-on-bg-error-subtle); + background: var(--clr-bg-error-subtle); + color: var(--clr-text-error); + } + + &.hidden { + display: none; + } + + &.hidden-on-touch-devices { + @media screen and (pointer: coarse) { + display: none; + } + } + + a { + display: inline-block; + color: var(--clr-text-secondary); + text-decoration: none; + + &:hover { + color: var(--clr-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(--clr-bg-secondary); + color: var(--clr-text-primary); + font-size: 14px; + margin: 0; + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: var(--clr-bg-accent-subtle); + } + } + + 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(--clr-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(--clr-text-accent); + text-transform: uppercase; + text-decoration: none; + font-weight: 700; + + &:hover, + &:focus, + &:active { + color: var(--clr-text-accent-subtle); + } + } +} + +.oauth-prompt, +.follow-prompt { + margin-bottom: 30px; + color: var(--clr-text-secondary); + + h2 { + font-size: 16px; + margin-bottom: 30px; + text-align: center; + } + + strong { + color: var(--clr-text-primary); + font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } +} + +.oauth-prompt { + h3 { + color: var(--clr-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(--clr-border-primary); + border-radius: 4px; + background: var(--clr-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(--clr-shadow-primary); + display: inline-block; + + svg { + display: block; + margin: 0; + } +} + +.qr-alternative { + margin-bottom: 20px; + color: var(--clr-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(--clr-text-secondary); + + div { + margin-bottom: 4px; + } +} + +.alternative-login { + margin-top: 20px; + margin-bottom: 20px; + + h4 { + font-size: 16px; + color: var(--clr-text-primary); + text-align: center; + margin-bottom: 20px; + border: 0; + padding: 0; + } + + .button { + display: block; + } +} + +.scope-danger { + color: var(--clr-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(--clr-text-primary); + background: var(--clr-bg-secondary); + border: 1px solid var(--clr-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(--clr-text-success); + transition: none; + + button { + background: var(--clr-bg-success-strong); + 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(--clr-text-primary); + border-bottom: 1px solid var(--clr-border-primary); + display: flex; + align-items: center; + + &__text { + flex: 1 1 auto; + + &__title { + font-weight: 500; + } + + &__type { + color: var(--clr-text-secondary); + overflow-wrap: anywhere; + } + } + + &__icon { + flex: 0 0 auto; + font-size: 18px; + width: 30px; + color: var(--clr-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(--clr-border-primary); + flex: 1 1 auto; + + &.completed { + background: var(--clr-text-accent); + } + } + + .circle { + box-sizing: border-box; + position: relative; + width: 30px; + height: 30px; + border-radius: 50%; + border: 2px solid var(--clr-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(--clr-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(--clr-text-accent); + + &::before { + content: ''; + width: 10px; + height: 10px; + border-radius: 50%; + background: var(--clr-text-accent); + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + + .completed .circle { + border-color: var(--clr-text-accent); + background: var(--clr-text-accent); + } +} + +.app-form { + padding: 16px; + + &__avatar-input, + &__header-input { + display: block; + border-radius: 8px; + background: var(--clr-bg-secondary); + position: relative; + cursor: pointer; + + &:hover { + background-color: var(--clr-bg-accent-subtle); + } + + 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(--clr-text-secondary); + z-index: 3; + } + + &.selected .icon { + color: var(--clr-text-primary); + transform: none; + inset-inline-start: auto; + inset-inline-end: 8px; + top: auto; + bottom: 8px; + } + + &.invalid img { + outline: 1px solid var(--clr-text-error); + outline-offset: -1px; + } + + &.invalid::before { + display: block; + content: ''; + width: 100%; + height: 100%; + position: absolute; + background: var(--clr-bg-error-subtle); + 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(--clr-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(--clr-text-primary); + font-weight: 600; + } + + .hint { + display: block; + font-size: 14px; + color: var(--clr-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(--clr-border-primary); + padding-inline-start: 16px; + } + } + + &__link { + display: flex; + gap: 16px; + padding: 8px 0; + align-items: center; + text-decoration: none; + color: var(--clr-text-primary); + margin-bottom: 16px; + + &__text { + flex: 1 1 auto; + font-size: 14px; + line-height: 20px; + color: var(--clr-text-secondary); + + strong { + font-weight: 600; + display: block; + color: var(--clr-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 new file mode 100644 index 00000000000..6019cd80028 --- /dev/null +++ b/app/javascript/styles_new/mastodon/lists.scss @@ -0,0 +1,19 @@ +.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 new file mode 100644 index 00000000000..e58d60adc64 --- /dev/null +++ b/app/javascript/styles_new/mastodon/modal.scss @@ -0,0 +1,53 @@ +@use 'variables' as *; + +.modal-layout { + background: var(--clr-bg-accent-subtle); + 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(--clr-bg-accent-subtle); + + /* 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 new file mode 100644 index 00000000000..d384e1c3fa4 --- /dev/null +++ b/app/javascript/styles_new/mastodon/polls.scss @@ -0,0 +1,232 @@ +@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(--clr-text-accent) r g b / 60%); + height: 5px; + min-width: 1%; + + &.leading { + background: var(--clr-text-accent); + } + } + + 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(--clr-text-accent) r g b / 60%); + } + + &::-webkit-progress-value { + border-radius: 4px; + background: rgb(from var(--clr-text-accent) 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(--clr-text-primary); + outline: 0; + font-family: inherit; + background: var(--clr-bg-primary); + border: 1px solid var(--clr-text-secondary); + border-radius: 4px; + padding: 8px 12px; + + &:focus { + border-color: var(--clr-text-accent); + } + + @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(--clr-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(--clr-text-success); + border-width: 4px; + } + + &.active { + background-color: var(--clr-bg-success-strong); + border-color: var(--clr-text-success); + } + + &::-moz-focus-inner { + outline: 0 !important; + border: 0; + } + + &:focus, + &:active { + outline: 0 !important; + } + + &.disabled { + border-color: var(--clr-text-disabled); + + &.active { + background: var(--clr-text-disabled); + } + + &:active, + &:focus, + &:hover { + border-color: var(--clr-text-disabled); + border-width: 1px; + } + } + } + + &__option.editable &__input, + &__option.disabled &__input { + &:active, + &:focus, + &:hover { + border-color: var(--clr-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(--clr-text-tertiary); + } + + &__link { + display: inline; + background: transparent; + padding: 0; + margin: 0; + border: 0; + color: var(--clr-text-tertiary); + text-decoration: underline; + font-size: inherit; + + &:hover { + text-decoration: none; + } + + &:active, + &:focus { + background-color: var(--clr-bg-secondary); + } + } + + .button { + height: 36px; + padding: 0 16px; + margin-inline-end: 10px; + font-size: 14px; + } +} + +.muted .poll { + color: var(--clr-text-tertiary); + + &__chart { + background: rgb(from var(--clr-text-accent) r g b / 40%); + + &.leading { + background: rgb(from var(--clr-text-accent) r g b / 60%); + } + } +} diff --git a/app/javascript/styles_new/mastodon/reset.scss b/app/javascript/styles_new/mastodon/reset.scss new file mode 100644 index 00000000000..f88d7a84eb2 --- /dev/null +++ b/app/javascript/styles_new/mastodon/reset.scss @@ -0,0 +1,58 @@ +/* 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(--clr-text-secondary) var(--clr-bg-secondary); +} diff --git a/app/javascript/styles_new/mastodon/rich_text.scss b/app/javascript/styles_new/mastodon/rich_text.scss new file mode 100644 index 00000000000..4ac3f025fec --- /dev/null +++ b/app/javascript/styles_new/mastodon/rich_text.scss @@ -0,0 +1,116 @@ +.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 new file mode 100644 index 00000000000..48935b75d74 --- /dev/null +++ b/app/javascript/styles_new/mastodon/rtl.scss @@ -0,0 +1,50 @@ +@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 new file mode 100644 index 00000000000..2e049e22212 --- /dev/null +++ b/app/javascript/styles_new/mastodon/tables.scss @@ -0,0 +1,375 @@ +@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(--clr-border-primary); + text-align: start; + background: var(--clr-bg-primary); + + &.critical { + font-weight: 700; + color: var(--clr-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(--clr-bg-primary); + } + + & > tbody > tr:last-child > td, + & > tbody > tr:last-child > th { + border-bottom: 0; + } + + a { + color: var(--clr-text-secondary); + text-decoration: none; + + &:hover { + color: var(--clr-text-accent); + } + } + + 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(--clr-border-primary); + color: var(--clr-text-primary); + } + + & > tbody > tr > th { + color: var(--clr-text-secondary); + font-weight: 600; + } + } + + &.batch-table { + & > thead > tr > th { + background: var(--clr-bg-primary); + border-top: 1px solid var(--clr-border-primary); + border-bottom: 1px solid var(--clr-border-primary); + + &:first-child { + border-radius: 4px 0 0; + border-inline-start: 1px solid var(--clr-border-primary); + } + + &:last-child { + border-radius: 0 4px 0 0; + border-inline-end: 1px solid var(--clr-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(--clr-text-secondary); + font-weight: 500; + white-space: nowrap; + + &:hover { + color: var(--clr-text-accent); + } + + &: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(--clr-border-primary); + background: var(--clr-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(--clr-bg-primary); + height: 47px; + align-items: center; + justify-content: center; + border: 1px solid var(--clr-border-primary); + border-top: 0; + color: var(--clr-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(--clr-text-accent); + border-radius: 4px; + font-weight: 700; + padding: 8px; + + &:hover, + &:focus, + &:active { + background: var(--clr-bg-secondary); + } + } + } + + &__form { + padding: 16px; + border: 1px solid var(--clr-border-primary); + border-top: 0; + background: var(--clr-bg-primary); + + .fields-row { + padding-top: 0; + margin-bottom: 0; + } + } + + &__row { + border: 1px solid var(--clr-border-primary); + border-top: 0; + background: var(--clr-bg-primary); + + @media screen and (max-width: $no-gap-breakpoint) { + .optional &:first-child { + border-top: 1px solid var(--clr-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(--clr-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 new file mode 100644 index 00000000000..8fc86c78269 --- /dev/null +++ b/app/javascript/styles_new/mastodon/widgets.scss @@ -0,0 +1,183 @@ +@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(--clr-border-primary); + border-radius: 4px; + padding: 15px; + text-decoration: none; + color: inherit; + box-shadow: 0 0 15px var(--clr-shadow-primary); + } + + & > a { + &:hover, + &:active, + &:focus { + background: var(--clr-bg-primary); + } + } + + &.active > a { + background: var(--clr-bg-accent-strong); + cursor: default; + } + + &.disabled > div { + opacity: 0.5; + cursor: default; + } + + h4 { + flex: 1 1 auto; + font-size: 18px; + font-weight: 700; + color: var(--clr-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + .fa { + color: var(--clr-text-secondary); + } + + small { + display: block; + font-weight: 400; + font-size: 15px; + margin-top: 8px; + color: var(--clr-text-secondary); + } + } + + &.active h4 { + &, + .fa, + small, + .trends__item__current { + color: var(--clr-text-primary); + } + } + + .avatar-stack { + flex: 0 0 auto; + width: (36px + 4px) * 3; + } + + &.active .avatar-stack .account__avatar { + border-color: var(--clr-text-accent); + } + + .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(--clr-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(--clr-border-primary); + } + + tbody tr:last-child td { + border-bottom: 0; + } + + &__count { + width: 120px; + text-align: center; + font-size: 15px; + font-weight: 500; + color: var(--clr-text-primary); + + small { + display: block; + color: var(--clr-text-secondary); + font-weight: 400; + font-size: 14px; + } + } + + tbody td.accounts-table__extra { + width: 120px; + text-align: end; + color: var(--clr-text-secondary); + padding-inline-end: 16px; + + a { + text-decoration: none; + color: inherit; + + &:focus, + &:hover, + &:active { + color: var(--clr-text-accent); + } + } + } + + &__comment { + width: 50%; + vertical-align: initial !important; + } + + tbody td.accounts-table__interrelationships { + width: 21px; + padding-inline-end: 16px; + } + + .icon { + &.active { + color: var(--clr-text-accent); + } + + &.passive { + color: var(--clr-text-warning); + } + + &.active.passive { + color: var(--clr-text-success); + } + } + + @media screen and (max-width: $no-gap-breakpoint) { + tbody td.optional { + display: none; + } + } +} diff --git a/config/locales/en.yml b/config/locales/en.yml index b647c5ddffc..cbafaaf2df0 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2004,7 +2004,10 @@ en: title: The terms of service of %{domain} are changing themes: contrast: Mastodon (High contrast) + contrast-tokens: Mastodon Design Tokens (High contrast) + dark-tokens: Mastodon Design Tokens (Dark) default: Mastodon (Dark) + light-tokens: Mastodon Design Tokens (Light) mastodon-light: Mastodon (Light) system: Automatic (use system theme) time: diff --git a/config/themes.yml b/config/themes.yml index 9c21c9459f3..d2a446aa0e1 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -1,3 +1,6 @@ default: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss +dark-tokens: styles_new/application.scss +light-tokens: styles_new/mastodon-light.scss +contrast-tokens: styles_new/contrast.scss diff --git a/stylelint.config.js b/stylelint.config.js index b1f34b7f190..29fe8262aa1 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -2,6 +2,7 @@ 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/**/*', @@ -31,7 +32,7 @@ module.exports = { }, overrides: [ { - 'files': ['app/javascript/styles/entrypoints/mailer.scss'], + 'files': ['app/javascript/styles/entrypoints/mailer.scss', 'app/javascript/styles_new/entrypoints/mailer.scss'], rules: { 'property-no-unknown': [ true,