From 1ca3894048b9db05724466b6efcbea230e368fe4 Mon Sep 17 00:00:00 2001 From: Claire Date: Tue, 2 Dec 2025 21:04:31 +0100 Subject: [PATCH] Replace old glitch-soc themes by the new ones --- .../flavours/glitch/styles/_functions.scss | 31 - .../flavours/glitch/styles/_mixins.scss | 58 - .../flavours/glitch/styles/_variables.scss | 115 - .../flavours/glitch/styles/about.scss | 145 - .../flavours/glitch/styles/accessibility.scss | 35 - .../flavours/glitch/styles/accounts.scss | 411 - .../flavours/glitch/styles/admin.scss | 2204 --- .../glitch/styles/annual_reports.scss | 342 - .../flavours/glitch/styles/application.scss | 34 +- .../flavours/glitch/styles/basics.scss | 300 - .../flavours/glitch/styles/branding.scss | 5 - .../glitch/{styles_new => styles}/common.scss | 0 .../flavours/glitch/styles/components.scss | 12014 ---------------- .../flavours/glitch/styles/containers.scss | 166 - .../flavours/glitch/styles/contrast.scss | 9 +- .../flavours/glitch/styles/contrast/diff.scss | 24 +- .../glitch/styles/contrast/variables.scss | 25 - .../flavours/glitch/styles/css_variables.scss | 49 - .../flavours/glitch/styles/dashboard.scss | 121 - .../flavours/glitch/styles/emoji_picker.scss | 245 - .../flavours/glitch/styles/forms.scss | 1464 -- .../flavours/glitch/styles/glitch_doodle.scss | 86 - .../glitch/styles/glitch_local_settings.scss | 174 - .../flavours/glitch/styles/index.scss | 5 - .../glitch/styles/mastodon-light.scss | 11 +- .../styles/mastodon-light/css_variables.scss | 233 +- .../glitch/styles/mastodon-light/diff.scss | 591 - .../styles/mastodon-light/variables.scss | 46 - .../mastodon/_mixins.scss | 0 .../mastodon/_theme_utils.scss | 0 .../mastodon/_variables.scss | 0 .../mastodon/about.scss | 0 .../mastodon/accessibility.scss | 0 .../mastodon/accounts.scss | 0 .../mastodon/admin.scss | 0 .../mastodon/annual_reports.scss | 0 .../mastodon/basics.scss | 0 .../mastodon/branding.scss | 0 .../mastodon/components.scss | 0 .../mastodon/containers.scss | 0 .../mastodon/css_variables.scss | 0 .../mastodon/dashboard.scss | 0 .../mastodon/emoji_picker.scss | 0 .../mastodon/forms.scss | 0 .../mastodon/glitch/doodle.scss | 0 .../mastodon/glitch/local_settings.scss | 0 .../glitch/styles/{ => mastodon}/lists.scss | 0 .../mastodon/modal.scss | 0 .../mastodon/polls.scss | 0 .../glitch/styles/mastodon/reset.scss | 139 + .../styles/{ => mastodon}/rich_text.scss | 0 .../{styles_new => styles}/mastodon/rtl.scss | 0 .../mastodon/tables.scss | 0 .../mastodon/widgets.scss | 0 .../flavours/glitch/styles/modal.scss | 40 - .../flavours/glitch/styles/polls.scss | 233 - .../flavours/glitch/styles/reset.scss | 86 - .../flavours/glitch/styles/rtl.scss | 100 - .../flavours/glitch/styles/tables.scss | 391 - .../flavours/glitch/styles/widgets.scss | 179 - .../glitch/styles_new/application.scss | 7 - .../flavours/glitch/styles_new/contrast.scss | 8 - .../glitch/styles_new/contrast/diff.scss | 54 - .../glitch/styles_new/mastodon-light.scss | 9 - .../mastodon-light/css_variables.scss | 214 - .../glitch/styles_new/mastodon/lists.scss | 19 - .../glitch/styles_new/mastodon/reset.scss | 58 - .../glitch/styles_new/mastodon/rich_text.scss | 151 - .../skins/glitch/contrast_new/common.scss | 1 - .../skins/glitch/contrast_new/names.yml | 4 - .../skins/glitch/default_new/common.scss | 1 - .../skins/glitch/default_new/names.yml | 4 - .../glitch/mastodon-light_new/common.scss | 1 - .../skins/glitch/mastodon-light_new/names.yml | 4 - 74 files changed, 385 insertions(+), 20261 deletions(-) delete mode 100644 app/javascript/flavours/glitch/styles/_functions.scss delete mode 100644 app/javascript/flavours/glitch/styles/_mixins.scss delete mode 100644 app/javascript/flavours/glitch/styles/_variables.scss delete mode 100644 app/javascript/flavours/glitch/styles/about.scss delete mode 100644 app/javascript/flavours/glitch/styles/accessibility.scss delete mode 100644 app/javascript/flavours/glitch/styles/accounts.scss delete mode 100644 app/javascript/flavours/glitch/styles/admin.scss delete mode 100644 app/javascript/flavours/glitch/styles/annual_reports.scss delete mode 100644 app/javascript/flavours/glitch/styles/basics.scss delete mode 100644 app/javascript/flavours/glitch/styles/branding.scss rename app/javascript/flavours/glitch/{styles_new => styles}/common.scss (100%) delete mode 100644 app/javascript/flavours/glitch/styles/components.scss delete mode 100644 app/javascript/flavours/glitch/styles/containers.scss delete mode 100644 app/javascript/flavours/glitch/styles/contrast/variables.scss delete mode 100644 app/javascript/flavours/glitch/styles/css_variables.scss delete mode 100644 app/javascript/flavours/glitch/styles/dashboard.scss delete mode 100644 app/javascript/flavours/glitch/styles/emoji_picker.scss delete mode 100644 app/javascript/flavours/glitch/styles/forms.scss delete mode 100644 app/javascript/flavours/glitch/styles/glitch_doodle.scss delete mode 100644 app/javascript/flavours/glitch/styles/glitch_local_settings.scss delete mode 100644 app/javascript/flavours/glitch/styles/index.scss delete mode 100644 app/javascript/flavours/glitch/styles/mastodon-light/diff.scss delete mode 100644 app/javascript/flavours/glitch/styles/mastodon-light/variables.scss rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/_mixins.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/_theme_utils.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/_variables.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/about.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/accessibility.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/accounts.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/admin.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/annual_reports.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/basics.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/branding.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/components.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/containers.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/css_variables.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/dashboard.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/emoji_picker.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/forms.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/glitch/doodle.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/glitch/local_settings.scss (100%) rename app/javascript/flavours/glitch/styles/{ => mastodon}/lists.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/modal.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/polls.scss (100%) create mode 100644 app/javascript/flavours/glitch/styles/mastodon/reset.scss rename app/javascript/flavours/glitch/styles/{ => mastodon}/rich_text.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/rtl.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/tables.scss (100%) rename app/javascript/flavours/glitch/{styles_new => styles}/mastodon/widgets.scss (100%) delete mode 100644 app/javascript/flavours/glitch/styles/modal.scss delete mode 100644 app/javascript/flavours/glitch/styles/polls.scss delete mode 100644 app/javascript/flavours/glitch/styles/reset.scss delete mode 100644 app/javascript/flavours/glitch/styles/rtl.scss delete mode 100644 app/javascript/flavours/glitch/styles/tables.scss delete mode 100644 app/javascript/flavours/glitch/styles/widgets.scss delete mode 100644 app/javascript/flavours/glitch/styles_new/application.scss delete mode 100644 app/javascript/flavours/glitch/styles_new/contrast.scss delete mode 100644 app/javascript/flavours/glitch/styles_new/contrast/diff.scss delete mode 100644 app/javascript/flavours/glitch/styles_new/mastodon-light.scss delete mode 100644 app/javascript/flavours/glitch/styles_new/mastodon-light/css_variables.scss delete mode 100644 app/javascript/flavours/glitch/styles_new/mastodon/lists.scss delete mode 100644 app/javascript/flavours/glitch/styles_new/mastodon/reset.scss delete mode 100644 app/javascript/flavours/glitch/styles_new/mastodon/rich_text.scss delete mode 100644 app/javascript/skins/glitch/contrast_new/common.scss delete mode 100644 app/javascript/skins/glitch/contrast_new/names.yml delete mode 100644 app/javascript/skins/glitch/default_new/common.scss delete mode 100644 app/javascript/skins/glitch/default_new/names.yml delete mode 100644 app/javascript/skins/glitch/mastodon-light_new/common.scss delete mode 100644 app/javascript/skins/glitch/mastodon-light_new/names.yml diff --git a/app/javascript/flavours/glitch/styles/_functions.scss b/app/javascript/flavours/glitch/styles/_functions.scss deleted file mode 100644 index a9911edb9d..0000000000 --- a/app/javascript/flavours/glitch/styles/_functions.scss +++ /dev/null @@ -1,31 +0,0 @@ -@use 'sass:color'; -@use 'sass:string'; -@use 'sass:meta'; - -$darken-multiplier: -1 !default; -$lighten-multiplier: 1 !default; - -// Invert darkened and lightened colors -@function darken($color, $amount) { - @return color.adjust( - $color, - $lightness: $amount * $darken-multiplier, - $space: hsl - ); -} - -@function lighten($color, $amount) { - @return color.adjust( - $color, - $lightness: $amount * $lighten-multiplier, - $space: hsl - ); -} - -@function hex-color($color) { - @if meta.type-of($color) == 'color' { - $color: string.slice(color.ie-hex-str($color), 4); - } - - @return '%23' + string.unquote($color); -} diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss deleted file mode 100644 index c1545d50cd..0000000000 --- a/app/javascript/flavours/glitch/styles/_mixins.scss +++ /dev/null @@ -1,58 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; - -@mixin fullwidth-gallery { - &.full-width { - margin-left: -14px; - margin-right: -14px; - width: inherit; - max-width: none; - border-radius: 0; - } -} - -@mixin search-input { - outline: 0; - box-sizing: border-box; - width: 100%; - box-shadow: none; - font-family: inherit; - background: var(--input-background-color); - color: $darker-text-color; - border-radius: 4px; - border: 1px solid var(--background-border-color); - font-size: 17px; - line-height: normal; - margin: 0; -} - -@mixin search-popout { - background: $simple-background-color; - border-radius: 4px; - padding: 10px 14px; - padding-bottom: 14px; - margin-top: 10px; - color: $light-text-color; - box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4); - - h4 { - text-transform: uppercase; - color: $light-text-color; - font-size: 13px; - font-weight: 500; - margin-bottom: 10px; - } - - li { - padding: 4px 0; - } - - ul { - margin-bottom: 10px; - } - - em { - font-weight: 500; - color: $inverted-text-color; - } -} diff --git a/app/javascript/flavours/glitch/styles/_variables.scss b/app/javascript/flavours/glitch/styles/_variables.scss deleted file mode 100644 index 816a9d9998..0000000000 --- a/app/javascript/flavours/glitch/styles/_variables.scss +++ /dev/null @@ -1,115 +0,0 @@ -@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 -$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/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss deleted file mode 100644 index ba0605b79e..0000000000 --- a/app/javascript/flavours/glitch/styles/about.scss +++ /dev/null @@ -1,145 +0,0 @@ -@use 'variables' as *; -@use 'functions' 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(--background-border-color); - 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: $highlight-text-color; - color: $ui-base-color; - 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: $primary-text-color; - } - - &__hint { - font-size: 14px; - font-weight: 400; - color: $darker-text-color; - } -} - -.rules-languages { - display: flex; - gap: 1rem; - align-items: center; - position: relative; - - > label { - font-size: 14px; - font-weight: 600; - color: $primary-text-color; - } - - > select { - appearance: none; - box-sizing: border-box; - font-size: 14px; - color: $primary-text-color; - display: block; - width: 100%; - outline: 0; - font-family: inherit; - resize: vertical; - background: $ui-base-color; - border: 1px solid var(--background-border-color); - border-radius: 4px; - padding-inline-start: 10px; - padding-inline-end: 30px; - height: 41px; - - @media screen and (width <= 600px) { - 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/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss deleted file mode 100644 index a80019925f..0000000000 --- a/app/javascript/flavours/glitch/styles/accessibility.scss +++ /dev/null @@ -1,35 +0,0 @@ -@use 'variables' as *; - -%emoji-color-inversion { - filter: invert(1); -} - -.emojione { - @each $emoji in $emojis-requiring-inversion { - &[title=':#{$emoji}:'] { - @extend %emoji-color-inversion; - } - } -} - -.hicolor-privacy-icons { - .status__visibility-icon.icon-globe, - .privacy-dropdown__option .icon-globe { - color: #1976d2; - } - - .status__visibility-icon.icon-unlock, - .privacy-dropdown__option .icon-unlock { - color: #388e3c; - } - - .status__visibility-icon.icon-lock, - .privacy-dropdown__option .icon-lock { - color: #ffa000; - } - - .status__visibility-icon.icon-envelope, - .privacy-dropdown__option .icon-envelope { - color: #d32f2f; - } -} diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss deleted file mode 100644 index 30cc670253..0000000000 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ /dev/null @@ -1,411 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; -@use 'functions' as *; - -.card { - & > a { - display: block; - text-decoration: none; - color: inherit; - overflow: hidden; - border-radius: 4px; - - &:hover, - &:active, - &:focus { - .card__bar { - background: $ui-base-color; - } - } - } - - &__img { - height: 130px; - position: relative; - background: $ui-base-color; - border: 1px solid var(--background-border-color); - 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(--background-color); - border: 1px solid var(--background-border-color); - 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: darken($ui-base-color, 8%); - object-fit: cover; - } - } - - .display-name { - margin-inline-start: 15px; - text-align: start; - - svg[data-hidden] { - display: none; - } - - strong { - font-size: 15px; - color: $primary-text-color; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - } - - span { - display: block; - font-size: 14px; - color: $darker-text-color; - 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: $primary-text-color; - font-weight: 500; - display: inline-block; - padding: 6px 10px; - text-decoration: none; - } - - .current { - background: $simple-background-color; - border-radius: 100px; - color: $inverted-text-color; - cursor: default; - margin: 0 10px; - } - - .gap { - cursor: default; - } - - .older, - .newer { - text-transform: uppercase; - color: $secondary-text-color; - } - - .older { - float: left; - padding-inline-start: 0; - } - - .newer { - float: right; - padding-inline-end: 0; - } - - .disabled { - cursor: default; - color: lighten($inverted-text-color, 10%); - } - - @media screen and (width <= 700px) { - padding: 30px 20px; - - .page { - display: none; - } - - .newer, - .older { - display: inline-block; - } - } -} - -.nothing-here { - 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; - display: flex; - justify-content: center; - align-items: center; - cursor: default; - border-radius: 4px; - padding: 20px; - min-height: 30vh; - - &--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, -.simple_form .glitch_only { - display: inline-block; - padding: 4px 6px; - cursor: default; - border-radius: 4px; - font-size: 12px; - line-height: 12px; - font-weight: 500; - color: $ui-secondary-color; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.information-badge, -.simple_form .overridden, -.simple_form .recommended, -.simple_form .not_recommended { - background-color: color.change($ui-secondary-color, $alpha: 0.1); - border: 1px solid color.change($ui-secondary-color, $alpha: 0.5); -} - -.account-role { - display: inline-flex; - padding: 4px; - padding-inline-end: 8px; - border: 1px solid $highlight-text-color; - color: $highlight-text-color; - 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; - } -} - -.information-badge { - &.superapp { - color: $success-green; - background-color: color.change($success-green, $alpha: 0.1); - border-color: color.change($success-green, $alpha: 0.5); - } -} - -.simple_form .not_recommended { - color: lighten($error-red, 12%); - background-color: rgba(lighten($error-red, 12%), 0.1); - border-color: rgba(lighten($error-red, 12%), 0.5); -} - -.simple_form .glitch_only { - color: lighten($warning-red, 12%); - background-color: rgba(lighten($warning-red, 12%), 0.1); - border-color: rgba(lighten($warning-red, 12%), 0.5); -} - -.account__header__fields { - max-width: 100vw; - padding: 0; - margin: 15px -15px -15px; - border: 0 none; - border-top: 1px solid lighten($ui-base-color, 12%); - border-bottom: 1px solid lighten($ui-base-color, 12%); - font-size: 14px; - line-height: 20px; - - dl { - display: flex; - border-bottom: 1px solid lighten($ui-base-color, 12%); - } - - 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: $secondary-text-color; - background: rgba(darken($ui-base-color, 8%), 0.5); - } - - dd { - flex: 1 1 auto; - color: $darker-text-color; - } - - a { - color: $highlight-text-color; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - - .verified { - border: 1px solid color.change($valid-value-color, $alpha: 0.5); - background: color.change($valid-value-color, $alpha: 0.25); - - a { - color: $valid-value-color; - font-weight: 500; - } - - &__mark { - color: $valid-value-color; - } - } - - dl:last-child { - border-bottom: 0; - } -} - -.directory__tag .trends__item__current { - width: auto; -} - -.pending-account { - &__header { - color: $darker-text-color; - - a { - color: $ui-secondary-color; - text-decoration: none; - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } - - strong { - color: $primary-text-color; - font-weight: 700; - } - - .warning-hint { - font-weight: normal !important; - } - } - - &__body { - margin-top: 10px; - } -} - -.batch-table__row--muted { - color: lighten($ui-base-color, 26%); -} - -.batch-table__row--muted .pending-account__header, -.batch-table__row--muted .accounts-table, -.batch-table__row--muted .name-tag { - &, - a, - strong { - color: lighten($ui-base-color, 26%); - } -} - -.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: lighten($ui-base-color, 26%); - } -} - -.batch-table__row--attention { - color: $gold-star; -} - -.batch-table__row--attention .pending-account__header, -.batch-table__row--attention .accounts-table, -.batch-table__row--attention .name-tag { - &, - a, - strong { - color: $gold-star; - } -} - -.batch-table__row--attention .accounts-table { - tbody td.accounts-table__extra, - &__count, - &__count small { - color: $gold-star; - } -} diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss deleted file mode 100644 index 4dfdb9e00b..0000000000 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ /dev/null @@ -1,2204 +0,0 @@ -@use 'sass:color'; -@use 'sass:math'; -@use 'functions' as *; -@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; - background: var(--background-color); - height: 100%; - } - } - - .sidebar { - width: $sidebar-width; - padding: 0; - pointer-events: auto; - - &__toggle { - display: none; - background: var(--background-color); - border-bottom: 1px solid lighten($ui-base-color, 4%); - align-items: center; - - &__logo { - flex: 1 1 auto; - - a { - display: block; - padding: 15px; - } - } - - &__icon { - display: block; - color: $darker-text-color; - text-decoration: none; - flex: 0 0 auto; - font-size: 18px; - padding: 10px; - margin: 5px 10px; - border-radius: 4px; - - &:focus { - background: $ui-base-color; - } - - .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: $darker-text-color; - text-decoration: none; - transition: all 200ms linear; - transition-property: color, background-color; - - &:hover { - color: $primary-text-color; - transition: all 100ms linear; - transition-property: color, background-color; - } - } - - ul { - background: var(--background-color); - margin: 0; - - a { - border: 0; - padding: 15px 35px; - } - } - - .warning a { - color: $gold-star; - font-weight: 700; - } - - .simple-navigation-active-leaf a { - color: $highlight-text-color; - 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: $darker-text-color; - 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: lighten($ui-base-color, 4%); - } - - &.selected { - font-weight: 700; - color: $primary-text-color; - background: $ui-highlight-color; - } - } - } - - &__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: $darker-text-color; - line-height: 18px; - } - - @media screen and (max-width: $no-columns-breakpoint) { - border-bottom: 0; - padding-bottom: 0; - } - } - - h2 { - color: $secondary-text-color; - font-size: 24px; - line-height: 36px; - font-weight: 700; - } - - h3 { - color: $secondary-text-color; - font-size: 20px; - line-height: 28px; - font-weight: 400; - margin-bottom: 30px; - } - - h4 { - text-transform: uppercase; - font-size: 13px; - font-weight: 700; - color: $darker-text-color; - padding-top: 24px; - margin-bottom: 8px; - border-top: 1px solid var(--background-border-color); - } - - h6 { - font-size: 16px; - color: $secondary-text-color; - line-height: 28px; - font-weight: 500; - } - - .fields-group h6 { - 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: $primary-text-color; - text-transform: none; - padding-top: 0; - margin-bottom: 0; - border-top: 0; - - .comment { - display: block; - overflow: hidden; - text-overflow: ellipsis; - margin-top: 4px; - - &.private-comment { - display: block; - color: $darker-text-color; - } - - &.public-comment { - display: block; - color: $secondary-text-color; - } - } - } - - & > p { - font-size: 14px; - line-height: 21px; - color: $secondary-text-color; - margin-bottom: 20px; - - strong { - color: $primary-text-color; - 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(--background-border-color); - 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(--background-color); - } - } - - 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: $ui-highlight-color; - } - } - } -} - -hr.spacer { - width: 100%; - border: 0; - margin: 20px 0; - height: 1px; -} - -body, -.admin-wrapper .content { - .muted-hint { - color: $darker-text-color; - - a { - color: $highlight-text-color; - } - } - - .positive-hint, - .negative-hint, - .neutral-hint { - a { - color: inherit; - text-decoration: underline; - - &:focus, - &:hover, - &:active { - text-decoration: none; - } - } - } - - .positive-hint { - color: $valid-value-color; - font-weight: 500; - } - - .negative-hint { - color: $error-value-color; - font-weight: 500; - } - - .neutral-hint { - color: $dark-text-color; - font-weight: 500; - } - - .warning-hint { - color: $gold-star; - font-weight: 500; - } -} - -kbd { - font-family: Courier, monospace; - background-color: color.change($ui-secondary-color, $alpha: 0.1); - 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: $darker-text-color; - text-decoration: none; - text-transform: uppercase; - font-size: 12px; - font-weight: 500; - border-bottom: 2px solid $ui-base-color; - - &:hover { - color: $primary-text-color; - border-bottom: 2px solid lighten($ui-base-color, 5%); - } - - &.selected { - color: $highlight-text-color; - border-bottom: 2px solid $ui-highlight-color; - } - } - } -} - -.flavour-screen { - display: block; - margin: 10px auto; - max-width: 100%; -} - -.flavour-description { - display: block; - font-size: 16px; - margin: 10px 0; - - & > p { - margin: 10px 0; - } -} - -.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-top: 0; - margin-bottom: 10px; - margin-inline-end: 0; - margin-inline-start: -5px; - font-weight: 500; - font-size: 14px; - line-height: 18px; - color: $secondary-text-color; - - @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-bottom: 5px; - margin-inline-end: 5px; - font-size: 14px; - } - - input.button { - margin-bottom: 5px; - margin-inline-end: 5px; - } -} - -.back-link { - margin-bottom: 10px; - font-size: 14px; - - a { - color: $highlight-text-color; - 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(--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: $darker-text-color; - font-size: 14px; - - &:first-child { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - 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(--background-border-color); - } - - &__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: $dark-text-color; - } - - a, - .username, - .target { - color: $secondary-text-color; - 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(--background-color); - border: 1px solid var(--background-border-color); - border-radius: 4px; - position: relative; - text-decoration: none; - color: $darker-text-color; - 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: $dark-text-color; - } - - &:hover, - &:focus, - &:active { - background: $ui-base-color; - } -} - -a.name-tag, -.name-tag, -a.inline-name-tag, -.inline-name-tag { - text-decoration: none; - color: $secondary-text-color; - - &:hover { - color: $highlight-text-color; - } - - .username { - font-weight: 500; - } - - &.suspended { - .username { - text-decoration: line-through; - color: lighten($error-red, 12%); - } - - .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 $ui-highlight-color; - - &.positive { - border-left-color: $success-green; - } - - &.negative { - border-left-color: lighten($error-red, 12%); - } - - &.warning { - border-left-color: $gold-star; - } - - &__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: $darker-text-color; - } - } - - &__owner { - padding: 8px; - padding-inline-start: 12px; - } - - time { - color: $dark-text-color; - } -} - -.report-card { - background: var(--background-color); - border: 1px solid var(--background-border-color); - 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: $darker-text-color; - text-transform: uppercase; - text-align: end; - - a { - color: inherit; - text-decoration: none; - - &:focus, - &:hover, - &:active { - color: $highlight-text-color; - } - } - - .red { - color: $error-value-color; - } - } - } - - &__summary { - &__item { - display: flex; - justify-content: flex-start; - border-top: 1px solid var(--background-border-color); - - &__reported-by, - &__assigned { - padding: 15px; - flex: 0 0 auto; - box-sizing: border-box; - width: 150px; - color: $darker-text-color; - - &, - .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: $darker-text-color; - - &:hover { - color: $highlight-text-color; - } - } - } - } -} - -.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(--background-color); - border: 1px solid var(--background-border-color); - border-radius: 4px; - height: 100%; - } - - .account__header__fields { - margin: 0; - border: 1px solid var(--background-border-color); - - a { - color: $highlight-text-color; - } - - dl:first-child .verified { - border-radius: 0 4px 0 0; - } - - .verified a { - color: $valid-value-color; - } - } - - .account__header__content { - box-sizing: border-box; - padding: 20px; - color: $primary-text-color; - } -} - -.center-text { - text-align: center; -} - -.applications-list__item, -.filters-list__item { - padding: 15px 0; - background: var(--background-color); - border: 1px solid var(--background-border-color); - 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(--background-border-color); - border-radius: 4px; - border-bottom: none; - - &__item { - padding: 15px 0; - border-bottom: 1px solid var(--background-border-color); - - &__title { - padding: 0 15px; - display: block; - font-weight: 500; - font-size: 18px; - line-height: 1.5; - color: $secondary-text-color; - text-decoration: none; - margin-bottom: 10px; - - &:hover { - color: $highlight-text-color; - } - - .account-role { - vertical-align: middle; - } - } - - .icon { - vertical-align: middle; - } - - a.announcements-list__item__title { - &:hover, - &:focus, - &:active { - color: $primary-text-color; - } - } - - &__action-bar { - display: flex; - justify-content: space-between; - align-items: center; - gap: 8px; - - &:not(.no-wrap) { - flex-wrap: wrap; - } - } - - &__meta { - padding: 0 15px; - color: $dark-text-color; - - 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: lighten($error-red, 12%); - } - - .permissions-list__item__icon { - color: $dark-text-color; - } - } -} - -.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(--background-color); - 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: $darker-text-color; - } - - &__box { - box-sizing: border-box; - background: var(--background-color); - padding: 10px; - font-weight: 500; - color: $primary-text-color; - width: 52px; - margin: 1px; - - @for $i from 0 through 10 { - &--#{10 * $i} { - background-color: rgba( - $ui-highlight-color, - 1 * (math.div(max(1, $i), 10)) - ); - } - } - } - } -} - -.sparkline { - display: block; - text-decoration: none; - background: var(--background-color); - border-radius: 4px; - border: 1px solid var(--background-border-color); - 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: $primary-text-color; - } - - &__change { - display: block; - font-weight: 500; - font-size: 18px; - color: $darker-text-color; - margin-bottom: -3px; - - &.positive { - color: $valid-value-color; - } - - &.negative { - color: $error-value-color; - } - } - } - - &__label { - padding: 0 20px; - padding-bottom: 10px; - text-transform: uppercase; - color: $darker-text-color; - font-weight: 500; - } - - &__graph { - position: absolute; - bottom: 0; - width: 100%; - - svg { - display: block; - margin: 0; - } - - path:first-child { - fill: color.change($highlight-text-color, $alpha: 0.25) !important; - fill-opacity: 1 !important; - } - - path:last-child { - stroke: lighten($highlight-text-color, 6%) !important; - fill: none !important; - } - } -} - -a.sparkline { - &:hover, - &:focus, - &:active { - background: $ui-base-color; - } -} - -.skeleton { - background-color: var(--background-color); - background-image: linear-gradient( - 90deg, - lighten($ui-base-color, 8%), - lighten($ui-base-color, 12%), - lighten($ui-base-color, 8%) - ); - background-size: 200px 100%; - background-repeat: no-repeat; - border-radius: 4px; - display: inline-block; - line-height: 1; - width: 100%; - animation: skeleton 1.2s ease-in-out infinite; - - .reduce-motion & { - animation: none; - } -} - -@keyframes skeleton { - 0% { - background-position: -200px 0; - } - - 100% { - background-position: calc(200px + 100%) 0; - } -} - -.dimension { - table { - width: 100%; - } - - &__item { - border-bottom: 1px solid lighten($ui-base-color, 4%); - - &__key { - font-weight: 500; - padding: 11px 10px; - } - - &__value { - text-align: end; - color: $darker-text-color; - padding: 11px 10px; - } - - &__indicator { - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - background: $ui-highlight-color; - margin-inline-end: 10px; - - @for $i from 0 through 10 { - &--#{10 * $i} { - background-color: rgba( - $ui-highlight-color, - 1 * (math.div(max(1, $i), 10)) - ); - } - } - } - - &:last-child { - border-bottom: 0; - } - - &.negative { - color: $error-value-color; - font-weight: 700; - - .dimension__item__value { - color: $error-value-color; - } - } - } -} - -.report-reason-selector { - border-radius: 4px; - background: var(--background-color); - margin-bottom: 20px; - - &__category { - cursor: pointer; - border-bottom: 1px solid darken($ui-base-color, 8%); - - &__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(--background-border-color); - 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(--background-border-color); - 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(--background-color); - } - - &__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: darken($ui-base-color, 8%); - } - } - - &__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: darken($ui-base-color, 8%); - border-radius: 8px; - border: 1px solid $ui-base-color; - } - } - - .display-name { - color: $darker-text-color; - padding-bottom: 15px; - font-size: 15px; - line-height: 20px; - - bdi { - display: block; - color: $primary-text-color; - 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: $secondary-text-color; - 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: $primary-text-color; - font-weight: 600; - font-size: 15px; - line-height: 21px; - - small { - display: block; - color: $darker-text-color; - font-weight: 400; - font-size: 13px; - line-height: 18px; - } - } - } -} - -.report-notes { - margin-bottom: 20px; - - &__item { - background: var(--background-color); - position: relative; - padding: 15px; - padding-inline-start: 15px * 2 + 40px; - border: 1px solid var(--background-border-color); - - &: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: $darker-text-color; - font-size: 15px; - line-height: 20px; - margin-bottom: 4px; - - .username { - color: $primary-text-color; - font-weight: 500; - margin-inline-end: 5px; - - a { - color: inherit; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - - a.timestamp { - color: $darker-text-color; - 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: $primary-text-color; - - p { - margin-bottom: 20px; - white-space: pre-wrap; - unicode-bidi: plaintext; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: $highlight-text-color; - 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: $dark-text-color; - } - } - - @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: $ui-highlight-color; - 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: $primary-text-color; - box-sizing: border-box; - min-height: 100%; - border: 1px solid var(--background-border-color); - border-radius: 4px; - - a { - color: $highlight-text-color; - 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: $darker-text-color; - - &:last-child { - margin-bottom: 0; - } - - &__text { - color: $primary-text-color; - } - } - - &__statuses-list { - border-radius: 4px; - border: 1px solid var(--background-border-color); - font-size: 13px; - line-height: 18px; - overflow: hidden; - - &__item { - padding: 16px; - border-bottom: 1px solid var(--background-border-color); - - &:last-child { - border-bottom: 0; - } - - &__meta { - color: $darker-text-color; - } - - 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: lighten($ui-base-color, 8%); - margin: 0 2px; - border-radius: 2px; - - &.positive { - background: $valid-value-color; - } - - &.negative { - background: $error-value-color; - } - } - } -} - -.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: $ui-base-color; - border: 1px solid $highlight-text-color; - color: $highlight-text-color; - border-radius: 8px; - } - - &::after { - position: absolute; - content: ''; - width: 1px; - background: $highlight-text-color; - 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: $primary-text-color; - line-height: 25px; - margin-bottom: 16px; - } - - .status { - border: 1px solid lighten($ui-base-color, 4%); - background: $ui-base-color; - 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 lighten($ui-base-color, 4%); - color: $primary-text-color; - 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; - background: var(--nested-card-background); - color: var(--nested-card-text); - border: var(--nested-card-border); - 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: $highlight-text-color; - 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(--media-outline-color); - } - - .hide-button { - // Toggled to appear when the preview-card is unblurred: - display: none; - position: absolute; - top: 5px; - right: 5px; - color: $white; - border: 0; - outline: 1px solid var(--media-outline-color); - background-color: color.change($black, $alpha: 0.45); - backdrop-filter: $backdrop-blur-filter; - padding: 3px 12px; - border-radius: 99px; - font-size: 14px; - font-weight: 700; - line-height: 20px; - - &:hover, - &:focus { - background-color: color.change($black, $alpha: 0.9); - } - } - - &.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(--surface-background-color); - border-radius: 8px; - border: 1px solid var(--background-border-color); - overflow: hidden; - - &__header { - padding: 16px; - font-size: 14px; - line-height: 20px; - color: $secondary-text-color; - display: flex; - align-items: center; - gap: 12px; - } - - &__body { - background: var(--background-color); - padding: 16px; - overflow-y: scroll; - height: 30vh; - } - } - - &__history { - & > li { - border-bottom: 1px solid var(--background-border-color); - - &: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: $dark-text-color; - } - - &.success { - color: $valid-value-color; - - .dot-indicator__indicator { - background-color: $valid-value-color; - } - } -} diff --git a/app/javascript/flavours/glitch/styles/annual_reports.scss b/app/javascript/flavours/glitch/styles/annual_reports.scss deleted file mode 100644 index 96500a18bb..0000000000 --- a/app/javascript/flavours/glitch/styles/annual_reports.scss +++ /dev/null @@ -1,342 +0,0 @@ -@use 'variables' as *; - -:root { - --indigo-1: #17063b; - --indigo-2: #2f0c7a; - --indigo-3: #562cfc; - --indigo-5: #858afa; - --indigo-6: #cccfff; - --lime: #baff3b; - --goldenrod-2: #ffc954; -} - -.annual-report { - flex: 0 0 auto; - background: var(--indigo-1); - padding: 24px; - - &__header { - margin-bottom: 16px; - - h1 { - font-size: 25px; - font-weight: 600; - line-height: 30px; - color: var(--lime); - margin-bottom: 8px; - } - - p { - font-size: 16px; - font-weight: 600; - line-height: 20px; - color: var(--indigo-6); - } - } - - &__bento { - display: grid; - gap: 8px; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax( - 0, - auto - ); - - &__box { - padding: 16px; - border-radius: 8px; - background: var(--indigo-2); - color: var(--indigo-5); - } - } - - &__summary { - &__most-boosted-post { - grid-column: span 2; - grid-row: span 2; - padding: 0; - - .status__content, - .content-warning { - color: var(--indigo-6); - } - - .detailed-status { - border: 0; - } - - .content-warning { - border: 0; - background: var(--indigo-1); - - .link-button { - color: var(--indigo-5); - } - } - - .detailed-status__meta__line { - border-bottom-color: var(--indigo-3); - } - - .detailed-status__meta { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .detailed-status__meta, - .poll__footer, - .poll__link, - .detailed-status .logo, - .detailed-status__display-name { - color: var(--indigo-5); - } - - .detailed-status__meta .animated-number, - .detailed-status__display-name strong { - color: var(--indigo-6); - } - - .poll__chart { - background-color: var(--indigo-3); - - &.leading { - background-color: var(--goldenrod-2); - } - } - - .status-card, - .hashtag-bar { - display: none; - } - } - - &__followers { - grid-column: span 1; - text-align: center; - position: relative; - overflow: hidden; - padding-block-start: 24px; - padding-block-end: 24px; - - --sparkline-gradient-top: rgba(86, 44, 252, 50%); - --sparkline-gradient-bottom: rgba(86, 44, 252, 0%); - - &__foreground { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 8px; - position: relative; - z-index: 1; - } - - &__number { - font-size: 31px; - font-weight: 600; - line-height: 37px; - color: var(--lime); - } - - &__label { - font-size: 14px; - font-weight: 600; - line-height: 17px; - color: var(--indigo-6); - } - - &__footnote { - display: block; - font-weight: 400; - opacity: 0.5; - } - - svg { - position: absolute; - bottom: 0; - inset-inline-end: 0; - pointer-events: none; - z-index: 0; - height: 70%; - width: auto; - - path:first-child { - fill: url('#gradient') !important; - fill-opacity: 1 !important; - } - - path:last-child { - stroke: var(--indigo-3) !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/flavours/glitch/styles/application.scss b/app/javascript/flavours/glitch/styles/application.scss index 7f77b55487..e16e5368e7 100644 --- a/app/javascript/flavours/glitch/styles/application.scss +++ b/app/javascript/flavours/glitch/styles/application.scss @@ -1,29 +1,7 @@ -@use 'functions'; -@use 'mixins'; -@use 'variables'; -@use 'css_variables'; -@use '@/styles/fonts/roboto'; -@use '@/styles/fonts/roboto-mono'; +@use 'mastodon/css_variables'; +@use 'mastodon/variables'; +@use 'common'; -@use 'reset'; -@use 'basics'; -@use 'branding'; -@use 'containers'; -@use 'lists'; -@use 'widgets'; -@use 'forms'; -@use 'accounts'; -@use 'components'; -@use 'polls'; -@use 'modal'; -@use 'emoji_picker'; -@use 'annual_reports'; -@use 'about'; -@use 'tables'; -@use 'admin'; -@use 'dashboard'; -@use 'rtl'; -@use 'accessibility'; -@use 'rich_text'; -@use 'glitch_local_settings'; -@use 'glitch_doodle'; +html { + color-scheme: dark; +} diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss deleted file mode 100644 index 3d8bba7c00..0000000000 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ /dev/null @@ -1,300 +0,0 @@ -@use 'variables' as *; -@use 'functions' 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(--background-color); - font-size: 13px; - line-height: 18px; - font-weight: 400; - color: $primary-text-color; - 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; - } - - &.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: $ui-button-focus-outline; - } - - &: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: lighten($error-red, 4%); - text-align: center; - - & > div { - max-width: 500px; - } - - p { - margin-bottom: 0.85em; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: $highlight-text-color; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - - &__footer { - color: $dark-text-color; - font-size: 13px; - - a { - color: $dark-text-color; - } - } - - button { - display: inline; - border: 0; - background: transparent; - color: $dark-text-color; - 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: $valid-value-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/flavours/glitch/styles/branding.scss b/app/javascript/flavours/glitch/styles/branding.scss deleted file mode 100644 index 8e8dd3530b..0000000000 --- a/app/javascript/flavours/glitch/styles/branding.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use 'variables' as *; - -.logo { - color: $primary-text-color; -} diff --git a/app/javascript/flavours/glitch/styles_new/common.scss b/app/javascript/flavours/glitch/styles/common.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/common.scss rename to app/javascript/flavours/glitch/styles/common.scss diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss deleted file mode 100644 index 7fcd50278f..0000000000 --- a/app/javascript/flavours/glitch/styles/components.scss +++ /dev/null @@ -1,12014 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; -@use 'functions' 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: $valid-value-color; - font-weight: 400; - - .no-reduce-motion & { - transition: opacity 200ms ease; - } -} - -.link-button { - display: block; - font-size: 15px; - line-height: 20px; - color: $highlight-text-color; - border: 0; - background: transparent; - padding: 0; - cursor: pointer; - text-decoration: none; - - &--destructive { - color: $error-value-color; - } - - &:hover, - &:active { - text-decoration: underline; - } - - &:disabled { - color: $ui-primary-color; - cursor: default; - } - - &:focus-visible { - outline: $ui-button-icon-focus-outline; - } -} - -.help-button { - background: $ui-button-background-color; - border: 0; - color: $ui-button-color; - border-radius: 20px; - cursor: pointer; - width: 24px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - - &:active, - &:focus, - &:hover { - background-color: $ui-button-focus-background-color; - } - - &:focus-visible { - outline: $ui-button-icon-focus-outline; - } - - .icon { - width: 14px; - height: 14px; - } -} - -.button { - background-color: $ui-button-background-color; - border: 10px none; - border-radius: 4px; - box-sizing: border-box; - color: $ui-button-color; - 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: $ui-button-focus-background-color; - } - - &:focus-visible { - outline: $ui-button-icon-focus-outline; - } - - &--compact { - font-size: 14px; - line-height: normal; - font-weight: 700; - padding: 5px 12px; - border-radius: 4px; - } - - &--dangerous { - background-color: var(--error-background-color); - color: var(--on-error-color); - - &:active, - &:focus, - &:hover { - background-color: var(--error-active-background-color); - transition: none; - } - } - - &--destructive { - &:active, - &:focus, - &:hover { - background-color: $ui-button-destructive-focus-background-color; - transition: none; - } - } - - &:disabled, - &.disabled { - background-color: $ui-button-disabled-color; - cursor: not-allowed; - } - - &.copyable { - transition: background 300ms linear; - } - - &.copied { - background: $valid-value-color; - transition: none; - } - - &.button-secondary { - color: $highlight-text-color; - background: transparent; - padding: 6px 17px; - border: 1px solid $highlight-text-color; - - &:active, - &:focus, - &:hover { - border-color: lighten($highlight-text-color, 4%); - color: lighten($highlight-text-color, 4%); - background-color: transparent; - text-decoration: none; - } - - &.button--destructive { - &:active, - &:focus, - &:hover { - border-color: $ui-button-destructive-focus-background-color; - color: $ui-button-destructive-focus-background-color; - } - } - - &:disabled, - &.disabled { - opacity: 0.7; - border-color: $ui-button-disabled-color; - color: $ui-button-disabled-color; - - &:active, - &:focus, - &:hover { - border-color: $ui-button-disabled-color; - color: $ui-button-disabled-color; - } - } - } - - &.button--plain { - color: $highlight-text-color; - 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: lighten($highlight-text-color, 4%); - background-color: transparent; - text-decoration: none; - } - - &:disabled, - &.disabled { - opacity: 0.7; - border-color: transparent; - color: $ui-button-disabled-color; - - &:active, - &:focus, - &:hover { - border-color: transparent; - color: $ui-button-disabled-color; - } - } - } - - &.button-tertiary { - background: transparent; - padding: 6px 17px; - color: $ui-button-tertiary-color; - border: 1px solid $ui-button-tertiary-border-color; - - &:active, - &:focus, - &:hover { - background-color: $ui-button-tertiary-focus-background-color; - color: $ui-button-tertiary-focus-color; - border: 0; - padding: 7px 18px; - } - - &:disabled { - opacity: 0.5; - } - - &.button--confirmation { - color: $valid-value-color; - border-color: $valid-value-color; - - &:active, - &:focus, - &:hover { - background: $valid-value-color; - color: $primary-text-color; - } - } - - &.button--destructive { - color: $error-value-color; - border-color: $error-value-color; - - &:active, - &:focus, - &:hover { - background: $error-value-color; - color: $primary-text-color; - } - } - } - - &.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 { - display: inline-flex; - color: $action-button-color; - border: 0; - padding: 0; - border-radius: 4px; - background: transparent; - 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: lighten($action-button-color, 7%); - background-color: color.change($action-button-color, $alpha: 0.15); - } - - &:focus-visible { - outline: $ui-button-icon-focus-outline; - } - - &.disabled { - color: darken($action-button-color, 13%); - background-color: transparent; - cursor: default; - } - - &.inverted { - color: $lighter-text-color; - - &:hover, - &:active, - &:focus-visible { - color: darken($lighter-text-color, 7%); - background-color: color.change($lighter-text-color, $alpha: 0.15); - } - - &:focus-visible { - outline: $ui-button-icon-focus-outline; - } - - &.disabled { - color: lighten($lighter-text-color, 7%); - background-color: transparent; - } - } - - &.active { - color: $highlight-text-color; - - &:hover, - &:active, - &:focus-visible { - color: $highlight-text-color; - background-color: transparent; - } - - &.disabled { - color: lighten($highlight-text-color, 13%); - } - } - - &.overlayed { - 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 { - padding-inline-end: 4px; - } - - &__counter { - display: block; - width: auto; - font-size: 12px; - font-weight: 500; - } - - &.copyable { - transition: all 300ms linear; - } - - &.copied { - border-color: $valid-value-color; - color: $valid-value-color; - transition: none; - background-color: color.change($valid-value-color, $alpha: 0.15); - } -} - -.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; -} - -.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(--input-background-color); - border: 1px solid var(--background-border-color); - border-radius: 0 0 4px 4px; - color: var(--on-input-color); - 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(--on-input-color); - - &:last-child { - border-radius: 0 0 4px 4px; - } - - &:hover, - &:focus, - &:active { - background: var(--dropdown-border-color); - - .autosuggest-account .display-name__account { - color: inherit; - } - } - - &.selected { - background: $ui-highlight-color; - color: $ui-button-color; - - .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: $ui-primary-color; - } -} - -.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(--background-border-color); - transition: border-color 300ms linear; - position: relative; - background: var(--input-background-color); - - &.active { - transition: none; - border-color: $ui-highlight-color; - } - } - - &__warning { - 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 { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - a { - color: $lighter-text-color; - 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(--background-border-color); - border-width: 1px 0; - } - } - - .autosuggest-textarea__textarea, - .spoiler-input__input { - display: block; - box-sizing: border-box; - width: 100%; - margin: 0; - color: $secondary-text-color; - background: var(--input-background-color); - 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: color.change($ui-highlight-color, $alpha: 0.05); - color: $highlight-text-color; - } - - &__dropdowns { - display: flex; - align-items: center; - gap: 8px; - margin: 8px; - flex-wrap: wrap; - - & > div { - overflow: hidden; - display: flex; - } - } - - &__uploads { - padding: 0 12px; - aspect-ratio: 3/2; - flex-shrink: 0; - } - - .media-gallery { - gap: 8px; - } - - &__upload { - position: relative; - - &.draggable { - will-change: transform, opacity; - touch-action: none; - cursor: grab; - } - - &.dragging { - opacity: 0; - } - - &.overlay { - height: 100%; - border-radius: 8px; - pointer-events: none; - } - - &__actions { - display: flex; - align-items: flex-start; - justify-content: space-between; - padding: 8px; - } - - &__preview, - &__visualizer { - position: absolute; - width: 100%; - height: 100%; - z-index: -1; - top: 0; - } - - &__preview { - border-radius: 6px; - inset-inline-start: 0; - } - - &__visualizer { - padding: 16px; - box-sizing: border-box; - - .audio-player__visualizer { - margin: 0 auto; - display: block; - height: 100%; - } - - .icon { - position: absolute; - top: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - opacity: 0.75; - color: var(--player-foreground-color); - filter: var(--overlay-icon-shadow); - width: 48px; - height: 48px; - } - } - - &__thumbnail { - width: 100%; - height: 100%; - background-position: center; - background-size: cover; - background-repeat: no-repeat; - overflow: hidden; - } - - .icon-button { - flex: 0 0 auto; - color: $white; - background: rgba(0, 0, 0, 75%); - 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: #ffbe2e; - background: rgba(0, 0, 0, 75%); - } - } - } - - // glitch: reintroduce sensitive button - &__sensitive-button { - padding: 0 12px; - - input[type='checkbox'] { - appearance: none; - display: block; - border: 1px solid $ui-primary-color; - box-sizing: border-box; - width: 17px; - height: 17px; - border-radius: 4px; - flex: 0 0 auto; - - &:active, - &:focus, - &:hover { - border-color: $highlight-text-color; - border-width: 4px; - } - - &:checked { - background-color: $highlight-text-color; - border-color: $highlight-text-color; - } - - &::-moz-focus-inner { - outline: 0 !important; - border: 0; - } - - &:focus, - &:active { - outline: 0 !important; - } - - &:disabled { - opacity: 0.5; - } - } - } - - &__footer { - display: flex; - flex-direction: column; - gap: 12px; - padding: 12px; - } - - &__submit { - display: flex; - flex: 1 0 100%; // glitch: always on its own line - max-width: 100%; - overflow: hidden; - gap: 5px; // glitch: handle secondary post privacy - align-items: stretch; // glitch: handle secondary post privacy - - .button.secondary-post-button { - flex: 0 1 auto; - padding-top: 0; - padding-bottom: 0; - - .icon { - vertical-align: middle; - } - } - } - - &__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: $highlight-text-color; - - &:hover, - &:focus, - &:active { - color: $highlight-text-color; - } - - &.disabled { - color: $highlight-text-color; - opacity: 0.5; - } - - &.active { - background: $ui-highlight-color; - color: $primary-text-color; - } - } - } - - &__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: $darker-text-color; - } - - &__footer { - display: flex; - align-items: center; - gap: 16px; - padding-inline-start: 37px; - padding-inline-end: 40px; - - &__sep { - width: 1px; - height: 22px; - background: lighten($ui-base-color, 8%); - 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: $darker-text-color; - 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: $highlight-text-color; - background-color: var(--input-background-color); - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - } - - .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 { - 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; - background: transparent; - color: $highlight-text-color; - border-radius: 6px; - border: 1px solid $highlight-text-color; - padding: 4px 8px; - font-size: 13px; - line-height: normal; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &[disabled] { - cursor: default; - color: $highlight-text-color; - border-color: $highlight-text-color; - opacity: 0.5; - } - - .icon { - width: 15px; - height: 15px; - flex: 0 0 auto; - } - - &__label { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1 1 auto; - } - - &.active { - background: $ui-highlight-color; - border-color: $ui-highlight-color; - color: $primary-text-color; - } - - &.warning { - border-color: var(--goldenrod-2); - color: var(--goldenrod-2); - - &.active { - background-color: var(--goldenrod-2); - color: var(--indigo-1); - } - } -} - -.character-counter { - cursor: default; - font-family: $font-sans-serif, sans-serif; - font-size: 14px; - font-weight: 400; - line-height: normal; - color: $darker-text-color; - flex: 1 0 auto; - text-align: end; - - &.character-counter--over { - color: $error-red; - } -} - -.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: $secondary-text-color; - margin-bottom: 20px; - - strong { - font-weight: 700; - } - - a { - color: $secondary-text-color; - 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: 20px; - padding-top: 2px; - color: $primary-text-color; - - &: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, - pre { - margin-bottom: 20px; - white-space: pre-wrap; - unicode-bidi: plaintext; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: $secondary-text-color; - text-decoration: none; - unicode-bidi: isolate; - - &:hover { - text-decoration: underline; - } - - &.mention { - &:hover { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - } - - a.unhandled-link { - color: $highlight-text-color; - - .link-origin-tag { - color: $gold-star; - font-size: 0.8em; - } - } - - .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: lighten($ui-base-color, 8%); - 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: $darker-text-color; - } - - &__attachments { - margin-top: 4px; - color: $darker-text-color; - 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: lighten($ui-base-color, 4%); - padding: 12px; - overflow-y: auto; - flex: 0 0 auto; - border-bottom: 0.5px solid lighten($ui-base-color, 8%); - display: flex; - flex-direction: column; - gap: 4px; - - &__header { - display: flex; - justify-content: space-between; - align-items: center; - color: $darker-text-color; - 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: $secondary-text-color; - 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: $highlight-text-color; - } - } - - &__attachments { - color: $darker-text-color; - font-size: 12px; - line-height: 16px; - opacity: 0.75; - display: flex; - align-items: center; - gap: 4px; - - .icon { - width: 18px; - height: 18px; - } - } -} - -.edit-indicator__content, -.reply-indicator__content { - .emojione { - width: 18px; - height: 18px; - margin: -3px 0 0; - } -} - -.announcements__content { - overflow-wrap: break-word; - overflow-y: auto; - - .emojione { - width: 20px; - height: 20px; - margin: -3px 0 0; - } - - p { - margin-bottom: 10px; - white-space: pre-wrap; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: $secondary-text-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - - &.mention { - &:hover { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - - &.unhandled-link { - color: $highlight-text-color; - } - } -} - -.status__content.status__content--collapsed { - max-height: 20px * 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: $highlight-text-color; - 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: 20px; - display: flex; - justify-content: space-between; - color: $dark-text-color; -} - -.status__wrapper--filtered { - color: $dark-text-color; - 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(--background-border-color); - - &__button { - display: inline; - color: lighten($ui-highlight-color, 8%); - border: 0; - background: transparent; - padding: 0; - font-size: inherit; - line-height: inherit; - - &:hover, - &:active { - text-decoration: underline; - } - } -} - -.focusable { - &:focus-visible { - outline: 2px solid $ui-button-focus-outline-color; - outline-offset: -2px; - background: color.change($ui-highlight-color, $alpha: 0.05); - } -} - -.status { - padding: 10px 14px; // glitch: reduced padding - min-height: 54px; - border-bottom: 1px solid var(--background-border-color); - 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: 8px; // glitch: reduced margins - } - - &--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; - - // glitch-soc: disable this for now; flex-grow: 1; - - &:last-child { - flex-grow: 0; - } - } - - &--first-in-thread { - border-top: 1px solid var(--background-border-color); - } - - &__line { - height: 10px - 4px; - border-inline-start: 2px solid lighten($ui-base-color, 8%); - width: 0; - position: absolute; - top: 0; - inset-inline-start: 14px + ((46px - 2px) * 0.5); - - &--full { - top: 0; - height: 100%; - - &::before { - content: ''; - display: block; - position: absolute; - top: 10px - 4px; - height: 46px + 4px + 4px; - width: 2px; - background: $ui-base-color; - inset-inline-start: -2px; - } - } - - &--first { - top: 10px + 46px + 4px; - height: calc(100% - (10px + 46px + 4px)); - - &::before { - display: none; - } - } - } - - .no-reduce-motion &--highlighted-entry::before { - content: ''; - position: absolute; - inset: 0; - background: rgb(from $ui-highlight-color r g b / 20%); - opacity: 0; - animation: fade 0.7s reverse both 0.3s; - pointer-events: none; - } -} - -.status__relative-time { - display: block; - font-size: 14px; - color: $dark-text-color; - text-align: end; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.notification__relative_time { - color: $dark-text-color; - float: right; - font-size: 14px; - padding-bottom: 1px; -} - -.status__display-name { - color: $dark-text-color; -} - -.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: start; // glitch: changed because of our different layout - justify-content: space-between; - gap: 10px; - cursor: pointer; -} - -.status__info__icons { - display: flex; - align-items: center; - height: 1em; - color: $action-button-color; - gap: 4px; - - & > .icon { - width: 16px; - height: 16px; - } -} - -.status-check-box__status { - display: block; - box-sizing: border-box; - width: 100%; - padding: 0 10px; - - .detailed-status__display-name { - color: $dark-text-color; - - 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: 8px 14px; // glitch: reduced padding - padding-bottom: 0; - display: flex; - align-items: center; - gap: 8px; - font-size: 14px; - line-height: 22px; - font-weight: 500; - color: $dark-text-color; - - &__icon { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - - .icon { - width: 16px; - height: 16px; - } - } - - a { - color: inherit; - text-decoration: none; - } - - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.status__wrapper-direct, -.notification-ungrouped--direct, -.notification-group--direct, -.notification-group--annual-report { - background: 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: $highlight-text-color; - } -} - -.status__action-bar { - display: flex; - align-items: center; - gap: 18px; - margin-top: 8px; - - &-spacer { - flex-grow: 1; - } -} - -.detailed-status__action-bar-dropdown { - flex: 1 1 auto; - display: flex; - align-items: center; - justify-content: center; - position: relative; -} - -.detailed-status { - padding: 14px 10px; // glitch: reduced padding - border-top: 1px solid var(--background-border-color); - - .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: 8px; // glitch: reduced margins - } - - .status__prepend { - padding: 0; - margin-bottom: 16px; - } - - .content-warning { - margin-bottom: 16px; - - &:last-child { - margin-bottom: 0; - } - } - - .logo { - width: 40px; - height: 40px; - color: $dark-text-color; - } -} - -.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: $dark-text-color; - font-size: 14px; - line-height: 18px; - - &__line { - border-bottom: 1px solid var(--background-border-color); - 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: $secondary-text-color; - font-weight: 500; - } -} - -.detailed-status__action-bar { - border-top: 1px solid var(--background-border-color); - border-bottom: 1px solid var(--background-border-color); - display: flex; - flex-direction: row; - padding: 8px 0; // glitch: reduced padding -} - -.detailed-status__wrapper-direct { - .detailed-status, - .detailed-status__action-bar { - background: color.mix($ui-base-color, $ui-highlight-color, 95%); - } - - &:focus-visible { - .detailed-status, - .detailed-status__action-bar { - background: color.mix( - lighten($ui-base-color, 4%), - $ui-highlight-color, - 95% - ); - } - } - - .detailed-status__action-bar { - border-top-color: color.mix( - lighten($ui-base-color, 8%), - $ui-highlight-color, - 95% - ); - } - - .status__prepend { - color: $highlight-text-color; - } -} - -.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; - margin-block-start: 16px; - margin-inline-start: calc(var(--quote-margin) + var(--thread-margin, 0px)); - border-radius: 12px; - color: var(--nested-card-text); - border: 1px solid var(--surface-border-color); -} - -.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: $darker-text-color; - background: var(--surface-variant-background-color); - 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(--background-border-color); - display: flex; - align-items: center; - gap: 8px; - - &__domain-name { - flex: 1 1 auto; - color: $primary-text-color; - font-size: 15px; - line-height: 21px; - font-weight: 500; - } -} - -.account { - padding: 10px; // glitch: reduced padding - border-bottom: 1px solid var(--background-border-color); - - .account__display-name { - flex: 1 1 auto; - display: flex; - align-items: center; - gap: 10px; - color: $darker-text-color; - overflow: hidden; - text-decoration: none; - font-size: 14px; - - .display-name { - margin-bottom: 4px; - } - - .display-name strong { - display: inline; - } - } - - &--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: color.change($highlight-text-color, $alpha: 0.2); - border-radius: 4px; - border: 0; - color: $highlight-text-color; - font-weight: 500; - font-size: 12px; - line-height: 16px; - padding: 4px 8px; - - &.active { - color: $white; - background: $ui-highlight-color; - } - - &__popout { - background: var(--dropdown-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--dropdown-border-color); - 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: $darker-text-color; - - .link-button { - display: inline; - font-size: inherit; - line-height: inherit; - } - - &__header { - display: flex; - align-items: center; - gap: 12px; - - &__icon { - width: 40px; - height: 40px; - background: $ui-highlight-color; - color: $white; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - flex-shrink: 0; - } - - h3 { - font-size: 17px; - line-height: 22px; - color: $primary-text-color; - } - } - - &__handle { - border: 2px dashed $highlight-text-color; - background: color.change($highlight-text-color, $alpha: 0.1); - padding: 12px 8px; - color: $highlight-text-color; - 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: $highlight-text-color; - } - - h6 { - font-size: 14px; - line-height: 20px; - font-weight: 500; - color: $primary-text-color; - } - } - } - } - - &__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: $darker-text-color; - - &--missing { - color: $dark-text-color; - } - - 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(--surface-background-color); - 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(--surface-background-color); - } - - &--inline { - display: inline-block; - vertical-align: middle; - margin-inline-end: 5px; - } - - &-composite { - 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: $primary-text-color; - text-shadow: 1px 1px 2px $base-shadow-color; - 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 - background-color: $ui-button-background-color; - color: $white; - border-width: 1px; - border-style: solid; - border-color: var(--background-color); - 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(--background-color); - } -} - -.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(--background-border-color); - 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: $primary-text-color; - } -} - -.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: $darker-text-color; - 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: $primary-text-color; - } -} - -.muted { - .status__content, - .status__content p, - .status__content a { - color: $dark-text-color; - } - - .status__display-name strong { - color: $dark-text-color; - } - - .status__avatar { - opacity: 0.5; - } -} - -.notification__report { - padding: 10px; // glitch: reduced padding - border-bottom: 1px solid var(--background-border-color); - display: flex; - gap: 10px; - - &__avatar { - flex: 0 0 auto; - } - - &__details { - flex: 1 1 auto; - display: flex; - justify-content: space-between; - align-items: center; - color: $darker-text-color; - 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: $secondary-text-color; - 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: 8px 14px; // glitch: reduced padding - padding-bottom: 0; - cursor: default; - color: $darker-text-color; - font-size: 15px; - line-height: 22px; - font-weight: 500; - display: flex; - align-items: center; - gap: 10px; - - .icon { - color: $highlight-text-color; - width: 18px; - height: 18px; - } - - .icon-star { - color: $gold-star; - } - - > span { - display: inline; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.icon-button.star-icon.active { - color: $gold-star; -} - -.icon-button.bookmark-icon.active { - color: $red-bookmark; -} - -.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(--media-outline-color); - outline-offset: -1px; - border-radius: 8px; - touch-action: none; - user-select: none; - } - - &--zoomed-in { - z-index: 9999; - cursor: grab; - - img { - outline: none; - border-radius: 0; - } - } - - &--dragging { - cursor: grabbing; - } - - &--error img { - visibility: hidden; - } - - &__preview { - max-width: $media-modal-media-max-width; - max-height: $media-modal-media-max-height; - position: absolute; - z-index: 1; - outline: 1px solid var(--media-outline-color); - outline-offset: -1px; - border-radius: 8px; - overflow: hidden; - - canvas { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; - z-index: -1; - } - } - - .loading-indicator { - z-index: 2; - mix-blend-mode: luminosity; - } -} - -.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: $secondary-text-color; - } - - .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(--dropdown-border-color); - margin: 2px 0; // glitch: reduced margins - height: 0; -} - -.dropdown-menu { - background: var(--dropdown-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--dropdown-border-color); - padding: 2px; // glitch: reduced padding - 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(--dropdown-border-color); - padding: 6px 14px; // glitch: reduced padding - padding-bottom: 12px; // glitch: reduced padding - margin-bottom: 4px; - font-size: 13px; - line-height: 18px; - color: $darker-text-color; - } - - &__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: $error-value-color; - } - - &--highlighted { - color: $highlight-text-color; - } - - &-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: 6px 14px; // glitch: reduced padding - 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(--dropdown-border-color); - outline: 0; - } - } - } - - button:disabled, - button[aria-disabled='true'] { - color: $dark-text-color; - cursor: default; - - &:focus { - color: rgb(from $dark-text-color r g b / 70%); - background: var(--dropdown-border-color); - outline: 0; - } - } -} - -.reblog-menu-item { - max-width: 360px; -} - -.inline-account { - display: inline-flex; - align-items: center; - vertical-align: top; - - .account__avatar { - margin-inline-end: 5px; - border-radius: 50%; - } - - strong { - font-weight: 600; - } -} - -.columns-area { - display: flex; - flex: 1 1 auto; - flex-direction: row; - justify-content: flex-start; - position: relative; - - .layout-multiple-columns & { - overflow-x: auto; - - &.unscrollable { - overflow-x: hidden; - } - } - - &__panels { - box-sizing: border-box; - display: flex; - justify-content: center; - gap: 16px; - width: 100%; - height: 100%; - min-height: 100vh; - min-height: 100dvh; - padding-inline: 10px; - padding-bottom: env(safe-area-inset-bottom); - - &__pane { - height: 100%; - overflow: hidden; - display: flex; - justify-content: flex-end; - min-width: 285px; - - &--start { - justify-content: flex-start; - } - - &__inner { - position: fixed; - width: 285px; - height: 100%; - } - } - - &__main { - --column-header-height: 62px; - - box-sizing: border-box; - width: 100%; - flex: 0 1 auto; - display: flex; - flex-direction: column; - contain: inline-size layout paint style; - container: column / inline-size; - - @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(--background-color); - backdrop-filter: $backdrop-blur-filter; - border-top: 1px solid var(--background-border-color); - 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: $highlight-text-color; - } - - &:focus { - outline: 0; - } - - &:focus-visible { - border-top-color: $ui-button-focus-outline-color; - border-radius: 0; - } - } -} - -.tabs-bar__wrapper { - background: var(--background-color); - backdrop-filter: $backdrop-blur-filter; - position: sticky; - top: 0; - z-index: 2; - padding-top: 0; - - @media screen and (min-width: $no-gap-breakpoint) { - padding-top: 10px; - } -} - -.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: 350px; - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - - > .scrollable { - border: 1px solid var(--background-border-color); - border-top: 0; - border-radius: 0 0 4px 4px; - - &.about, - &.privacy-policy { - border-top: 1px solid var(--background-border-color); - border-radius: 4px; - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 0; - border-bottom: 0; - } - } - } -} - -.column__alert { - --alert-height: 54px; - - position: sticky; - bottom: 0; - z-index: 10; - box-sizing: border-box; - display: grid; - grid-template-rows: minmax(var(--alert-height), max-content); - align-items: end; - width: 100%; - max-width: 360px; - padding: 1rem; - margin: auto auto 0; - overflow: clip; - pointer-events: none; - - @media (max-width: #{$mobile-menu-breakpoint - 1}) { - // Compensate for mobile menubar - bottom: var(--mobile-bottom-nav-height); - } - - & > * { - // Make all nested alerts occupy the same space - // rather than stack - grid-area: 1 / 1; - pointer-events: initial; - } -} - -.ui { - --mobile-bottom-nav-height: 55px; - --last-content-item-border-width: 2px; - - flex: 0 0 auto; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - - @media (max-width: #{$mobile-menu-breakpoint - 1}) { - padding-bottom: calc( - var(--mobile-bottom-nav-height) - var(--last-content-item-border-width) - ); - } -} - -.drawer { - width: 300px; - 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: $darker-text-color; - text-decoration: none; - text-align: center; - font-size: 16px; - align-items: center; - justify-content: center; -} - -.column, -.drawer { - flex: 1 1 100%; -} - -@media screen and (width > $mobile-breakpoint) { - .columns-area { - padding: 0; - } - - .column, - .drawer { - flex: 0 0 auto; - padding: 10px; - padding-inline-start: 5px; - padding-inline-end: 5px; - - &:first-child { - padding-inline-start: 10px; - } - - &:last-child { - padding-inline-end: 10px; - } - } - - .columns-area > div { - .column, - .drawer { - padding-inline-start: 5px; - padding-inline-end: 5px; - } - } -} - -.columns-area--mobile { - flex-direction: column; - width: 100%; - height: 100%; - margin: 0 auto; - - .column, - .drawer { - width: 100%; - height: 100%; - padding: 0; - } - - .account-card { - margin-bottom: 0; - } - - .filter-form { - display: flex; - flex-wrap: wrap; - } - - .autosuggest-textarea__textarea { - font-size: 16px; - } - - .search__input { - line-height: 18px; - font-size: 16px; - padding-block: 15px; - padding-inline-end: 30px; - } - - .scrollable { - overflow: visible; - - @supports (display: grid) { - contain: content; - } - } - - @media screen and (min-width: $no-gap-breakpoint) { - padding: 10px 0; - padding-top: 0; - } -} - -@media screen and (min-width: $no-gap-breakpoint) { - .react-swipeable-view-container .columns-area--mobile { - height: calc(100% - 10px) !important; - } - - .getting-started__wrapper { - margin-bottom: 10px; - } - - .search-page .search { - display: none; - } - - .navigation-panel__legal, - .navigation-panel__compose-button, - .navigation-panel .navigation-bar { - display: none !important; - } -} - -@media screen and (max-width: ($no-gap-breakpoint - 1px)) { - $sidebar-width: 285px; - - .columns-area__panels__main { - width: calc(100% - $sidebar-width); - } - - .columns-area__panels { - min-height: 100vh; - min-height: 100dvh; - gap: 0; - padding-inline: 0; - } - - .columns-area__panels__pane--navigational { - min-width: $sidebar-width; - - .columns-area__panels__pane__inner { - width: $sidebar-width; - } - - .navigation-panel { - margin: 0; - border-inline-start: 1px solid var(--background-border-color); - 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(--background-color); - 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: color.change($base-overlay-background, $alpha: 0.5); - 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(--background-border-color); - - &:last-child { - border-bottom: 0; - } - - &__source { - font-size: 13px; - line-height: 16px; - color: $dark-text-color; - - @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: $secondary-text-color; - - strong { - font-weight: 700; - } - - &__account { - color: $darker-text-color; - 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; - 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 { - position: absolute; - inset-inline-start: 11px; - bottom: 1px; - display: block; - background: $error-red; - border-radius: 50%; - width: 0.625rem; - height: 0.625rem; - } -} - -.column-link--transparent .icon-with-badge__badge { - border-color: var(--background-color); -} - -.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: $darker-text-color; - } - - @media screen and (width >= 600px) { - padding: 40px; - } -} - -.copy-paste-text { - background: lighten($ui-base-color, 4%); - border-radius: 8px; - border: 1px solid var(--background-border-color); - padding: 16px; - color: $primary-text-color; - 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: $highlight-text-color; - } - - &.copied { - border-color: $valid-value-color; - 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(--background-color); - 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; - - .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; - } - - &__list-panel { - &__header { - display: flex; - align-items: center; - padding-inline-end: 4px; - - &__sep { - width: 0; - height: 24px; - border-left: 1px solid var(--background-border-color); - } - - .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(--background-border-color); - 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(--background-border-color); -} - -.drawer__inner { - position: absolute; - top: 0; - inset-inline-start: 0; - background: var(--background-color); - 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 { - background: var(--background-color) - url('data:image/svg+xml;utf8,') - no-repeat bottom / 100% auto; - flex: 1; - min-height: 47px; - display: none; - - > 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(--background-border-color); - margin-bottom: 10px; - display: flex; - flex-direction: row; - border-radius: 4px; - overflow: hidden; - - a:hover, - a:focus, - a:active { - color: $primary-text-color; - } -} - -.scrollable { - overflow-y: scroll; - overflow-x: hidden; - flex: 1 1 auto; - -webkit-overflow-scrolling: touch; - - &.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(--background-border-color); - border-radius: 4px 4px 0 0; - color: $highlight-text-color; - 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: $highlight-text-color; - 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: color.change( - $base-overlay-background, - $alpha: 0 - ); - -webkit-tap-highlight-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: $ui-primary-color; -} - -.react-toggle--focus { - outline: $ui-button-focus-outline; -} - -.react-toggle--checked .react-toggle-track { - background-color: $ui-highlight-color; -} - -.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: $ui-button-color; - box-sizing: border-box; - transition: all 0.25s ease; - transition-property: border-color, left; -} - -.react-toggle--checked .react-toggle-thumb { - inset-inline-start: 32px - 16px - 2px; - border-color: $ui-highlight-color; -} - -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background: darken($ui-primary-color, 5%); -} - -.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) - .react-toggle-track { - background: lighten($ui-highlight-color, 5%); -} - -.follow_requests-unlocked_explanation, -.switch-to-advanced { - color: $light-text-color; - background-color: $ui-base-color; - padding: 15px; - border-radius: 4px; - margin-top: 4px; - margin-bottom: 12px; - font-size: 13px; - line-height: 18px; - - a { - color: $ui-button-tertiary-color; - 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: $secondary-text-color; - background: transparent; - border: 0; - border-left: 4px solid transparent; - box-sizing: border-box; - - &:hover, - &:focus, - &:active { - color: $primary-text-color; - } - - &.active { - color: $highlight-text-color; - } - - &:focus { - outline: 0; - } - - &:focus-visible { - border-color: $ui-button-focus-outline-color; - 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: $ui-base-color; - padding: 4px 8px; - margin: -6px 10px; -} - -.column-subheading { - background: var(--surface-background-color); - color: $darker-text-color; - 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: $dark-text-color; - overflow: auto; - border: 1px solid var(--background-border-color); - border-top: 0; - - &__trends { - flex: 0 1 auto; - opacity: 1; - animation: fade 150ms linear; - margin-top: 10px; - - h4 { - border-bottom: 1px solid var(--background-border-color); - padding: 10px; - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - - a { - color: $darker-text-color; - text-decoration: none; - } - } - - .trends__item { - border-bottom: 0; - padding: 10px; - - &__current { - color: $darker-text-color; - } - } - } -} - -.keyboard-shortcuts { - padding: 8px 0 0; - overflow: hidden; - - thead { - position: absolute; - inset-inline-start: -9999px; - } - - td { - padding: 0 10px 8px; - } - - kbd { - display: inline-block; - padding: 3px 5px; - background-color: lighten($ui-base-color, 8%); - border: 1px solid darken($ui-base-color, 4%); - } -} - -input.glitch-setting-text { - box-sizing: border-box; - color: $darker-text-color; - background: transparent; - border: 0; - border-bottom: 2px solid $ui-primary-color; - outline: 0; - font-family: inherit; - margin-bottom: 10px; - padding: 7px 0; - width: 100%; - - &:focus, - &:active { - color: $primary-text-color; - border-bottom-color: $ui-highlight-color; - } - - @media screen and (width <= 600px) { - font-size: 16px; - } -} - -.status-card { - display: flex; - align-items: center; - position: relative; - font-size: 14px; - color: $darker-text-color; - margin-top: 14px; - text-decoration: none; - overflow: hidden; - border: 1px solid var(--background-border-color); - 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: color.change($base-shadow-color, $alpha: 0.6); - 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: $secondary-text-color; - background: transparent; - border: 0; - padding: 0 8px; - text-decoration: none; - font-size: 18px; - line-height: 18px; - - &:hover, - &:active, - &:focus { - color: $primary-text-color; - } - } - - 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: $highlight-text-color; - } - } -} - -.status-card a { - color: inherit; - text-decoration: none; - - &:hover, - &:focus, - &:active { - .status-card__title, - .status-card__host, - .status-card__author, - .status-card__description { - color: $highlight-text-color; - } - } -} - -.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: $primary-text-color; - 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: 8px 10px; // glitch: reduced padding - 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: $primary-text-color; - 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: 96px; // glitch: intentional change to better use space - aspect-ratio: 1; - background: lighten($ui-base-color, 8%); - 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: $base-overlay-background; - - &--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: $dark-text-color; - background-color: transparent; - border: 0; - font-size: inherit; - line-height: inherit; - width: 100%; - padding: 15px; - box-sizing: border-box; - text-decoration: none; - - &--large { - padding-block: 32px; - } - - &:is(button) { - &:hover { - background: var(--on-surface-color); - } - - &:focus-visible { - outline: 2px solid $ui-button-focus-outline-color; - outline-offset: -2px; - } - } - - .icon { - width: 22px; - height: 22px; - } -} - -.load-gap { - border-bottom: 1px solid var(--background-border-color); -} - -.timeline-hint { - text-align: center; - color: $dark-text-color; - padding: 16px; - box-sizing: border-box; - width: 100%; - font-size: 14px; - line-height: 21px; - - strong { - font-weight: 500; - } - - a { - color: $highlight-text-color; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - color: lighten($highlight-text-color, 4%); - } - } - - &--with-descendants { - border-top: 1px solid var(--background-border-color); - } -} - -.regeneration-indicator { - color: $darker-text-color; - border: 1px solid var(--background-border-color); - 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: $darker-text-color; - } - - span { - font-size: 15px; - } - } -} - -.column-header__wrapper { - position: relative; - flex: 0 0 auto; - z-index: 1; - - &.active { - box-shadow: 0 1px 0 color.change($highlight-text-color, $alpha: 0.3); - - &::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, - color.change($ui-highlight-color, $alpha: 0.23) 0%, - color.change($ui-highlight-color, $alpha: 0) 60% - ); - } - } - - .announcements { - z-index: 1; - position: relative; - } -} - -.column-header__select-row { - border-width: 0 1px 1px; - border-style: solid; - border-color: var(--background-border-color); - 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: $highlight-text-color; - font-weight: bold; - font-size: 14px; - - &:hover { - color: lighten($highlight-text-color, 6%); - } - } -} - -.column-header { - display: flex; - font-size: 16px; - border: 1px solid var(--background-border-color); - 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: $ui-button-icon-focus-outline; - } - - .logo { - height: 24px; - } - } - - .column-header__back-button + &__title { - padding-inline-start: 0; - } - - .column-header__back-button { - flex: 1; - color: $highlight-text-color; - - &.compact { - flex: 0 0 auto; - color: $primary-text-color; - } - } - - &.active { - .column-header__icon { - color: $highlight-text-color; - text-shadow: 0 0 10px color.change($highlight-text-color, $alpha: 0.4); - } - } - - &: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: $darker-text-color; - background: transparent; - cursor: pointer; - font-size: 16px; - padding: 0 15px; - - &:last-child { - border-start-end-radius: 4px; - } - - &:hover { - color: lighten($darker-text-color, 4%); - } - - &:focus-visible { - outline: $ui-button-focus-outline; - } - - &.active { - color: $primary-text-color; - - &:hover { - color: $primary-text-color; - } - } - - &:disabled { - color: $dark-text-color; - 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: $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(--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; - 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(--background-border-color); - margin: 10px 0; - } -} - -.column-header__collapsible-inner { - border-top: 0; -} - -.column-header__setting-btn { - &:hover, - &:focus { - color: $darker-text-color; - 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; -} - -.column-settings__pillbar { - display: flex; - overflow: hidden; - background-color: transparent; - border: 0; - border-radius: 4px; - margin-bottom: 10px; - align-items: stretch; - gap: 2px; -} - -.pillbar-button { - border: 0; - color: #fafafa; - padding: 2px; - margin: 0; - font-size: inherit; - flex: auto; - background-color: lighten($ui-base-color, 8%); - transition: all 0.2s ease; - transition-property: background-color, box-shadow; - - &[disabled] { - cursor: not-allowed; - opacity: 0.5; - } - - &:not([disabled]) { - &:hover, - &:focus { - background-color: darken($ui-base-color, 10%); - } - - &.active { - background-color: darken($ui-highlight-color, 2%); - - &:hover, - &:focus { - background-color: $ui-highlight-color; - } - } - } -} - -.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: $warning-red; - - &:hover { - color: $error-red; - text-decoration: underline; - } -} - -.loading-indicator { - color: $dark-text-color; - 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: lighten($ui-base-color, 26%); - width: 12px; - height: 12px; - margin: 6px; -} - -.load-more .loading-indicator .circular-progress { - color: lighten($ui-base-color, 26%); -} - -.circular-progress { - color: lighten($ui-base-color, 26%); - 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: $base-overlay-background; - color: $primary-text-color; - 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: $white; - line-height: 20px; - font-size: 14px; - - &__label { - background-color: color.change($black, $alpha: 0.45); - 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: color.change($black, $alpha: 0.9); - } - } - } -} - -.modal-container--preloader { - background: lighten($ui-base-color, 8%); -} - -.account--panel { - border-top: 1px solid var(--background-border-color); - border-bottom: 1px solid var(--background-border-color); - 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: $darker-text-color; - cursor: default; - display: block; - font-weight: 500; - } - - .column-header__links { - margin: 0; - } - - section { - padding: 16px; - border-bottom: 1px solid var(--background-border-color); - - &:last-child { - border-bottom: 0; - } - } - - h3 { - font-size: 16px; - line-height: 24px; - letter-spacing: 0.5px; - font-weight: 500; - color: $primary-text-color; - 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: lighten($darker-text-color, 4%); - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: lighten($ui-base-color, 4%); - } - - @media screen and (width <= 600px) { - font-size: 16px; - } - } - - &__placeholder { - color: $dark-text-color; - padding-inline-start: 2px; - font-size: 12px; - } - - &__value-container { - padding-inline-start: 6px; - } - - &__multi-value { - background: lighten($ui-base-color, 8%); - - &__remove { - cursor: pointer; - - &:hover, - &:active, - &:focus { - background: lighten($ui-base-color, 12%); - color: lighten($darker-text-color, 4%); - } - } - } - - &__multi-value__label, - &__input, - &__input-container { - color: $darker-text-color; - } - - &__clear-indicator, - &__dropdown-indicator { - cursor: pointer; - transition: none; - color: $dark-text-color; - - &:hover, - &:active, - &:focus { - color: lighten($dark-text-color, 4%); - } - } - - &__indicator-separator { - background-color: lighten($ui-base-color, 8%); - } - - &__menu { - @include search-popout; - - padding: 0; - background: $ui-secondary-color; - } - - &__menu-list { - padding: 6px; - } - - &__option { - color: $inverted-text-color; - border-radius: 4px; - font-size: 14px; - - &--is-focused, - &--is-selected { - background: darken($ui-secondary-color, 10%); - } - } - } -} - -.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: $darker-text-color; -} - -.limited-account-hint { - p { - color: $secondary-text-color; - font-size: 15px; - font-weight: 500; - margin-bottom: 20px; - } -} - -.empty-column-indicator { - color: $dark-text-color; - 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: $highlight-text-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.empty-column-indicator { - &__arrow { - position: absolute; - top: 50%; - inset-inline-start: 50%; - pointer-events: none; - transform: translate(100%, -100%) rotate(12deg); - transform-origin: center; - } -} - -.follow_requests-unlocked_explanation { - margin: 16px; - margin-bottom: 0; -} - -.error-column { - padding: 20px; - border: 1px solid var(--background-border-color); - 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: $darker-text-color; - font-size: 15px; - line-height: 22px; - - h1 { - font-size: 28px; - line-height: 33px; - font-weight: 700; - margin-bottom: 15px; - color: $primary-text-color; - } - - 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(--dropdown-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--dropdown-border-color); - 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(--dropdown-background-color); - border: 1px solid var(--dropdown-border-color); - 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(--dropdown-border-color); - } - } - - .emoji-mart-emoji { - height: 22px; - } -} - -.emoji-mart-emoji { - span { - background-repeat: no-repeat; - } -} - -.upload-area { - align-items: center; - background: color.change($base-overlay-background, $alpha: 0.8); - 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: $ui-base-color; - box-shadow: 0 0 5px color.change($base-shadow-color, $alpha: 0.2); -} - -.upload-area__content { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - color: $secondary-text-color; - font-size: 18px; - font-weight: 500; - border: 2px dashed $ui-base-lighter-color; - border-radius: 4px; -} - -.upload-progress { - color: $darker-text-color; - overflow: hidden; - display: flex; - gap: 8px; - align-items: center; - padding: 0 12px; - - .icon { - width: 24px; - height: 24px; - color: $ui-highlight-color; - } - - 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(--background-color); - position: relative; - margin-top: 5px; -} - -.upload-progress__tracker { - position: absolute; - inset-inline-start: 0; - top: 0; - height: 6px; - background: $ui-highlight-color; - 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: $ui-button-icon-focus-outline; - } - } -} - -.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(--dropdown-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--dropdown-border-color); - 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 { - --dropdown-text-color: $primary-text-color; - - 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(--dropdown-text-color); - - // 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(--dropdown-border-color); - } - - &:focus, - &.active { - background: $ui-highlight-color; - color: var(--dropdown-text-color); - 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(--dropdown-text-color); - } - } - - &__additional { - display: flex; - align-items: center; - justify-content: center; - color: $darker-text-color; - 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: $darker-text-color; - - strong { - color: $primary-text-color; - font-weight: 500; - display: block; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } -} - -.icon-badge-wrapper { - position: relative; -} - -.icon-badge { - position: absolute; - display: block; - inset-inline-end: -0.25em; - top: -0.25em; - background-color: $ui-highlight-color; - border-radius: 50%; - font-size: 75%; - width: 1em; - height: 1em; -} - -.ui .flash-message { - margin-top: 10px; - margin-inline-start: auto; - margin-inline-end: auto; - margin-bottom: 0; - min-width: 75%; -} - -.account__disclaimer { - display: flex; - padding: 10px; - gap: 5px; - color: $dark-text-color; - align-items: center; - - strong { - font-weight: 500; - } - - a { - font-weight: 500; - color: inherit; - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } -} - -.account__action-bar { - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); - line-height: 36px; - overflow: hidden; - flex: 0 0 auto; - display: flex; -} - -.account__action-bar-links { - display: flex; - flex: 1 1 auto; - line-height: 18px; - text-align: center; -} - -.account__action-bar__tab { - text-decoration: none; - overflow: hidden; - flex: 0 1 100%; - border-inline-start: 1px solid lighten($ui-base-color, 8%); - padding: 10px 0; - border-bottom: 4px solid transparent; - - &:first-child { - border-inline-start: 0; - } - - &.active { - border-bottom: 4px solid $ui-highlight-color; - } - - & > span { - display: block; - text-transform: uppercase; - font-size: 11px; - color: $darker-text-color; - } - - strong { - display: block; - font-size: 15px; - font-weight: 500; - color: $primary-text-color; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - abbr { - color: $highlight-text-color; - } -} - -.language-dropdown { - &__dropdown { - width: 300px; - padding: 0; - - .emoji-mart-search { - padding: 10px; - background: var(--dropdown-background-color); - - input { - padding: 8px 12px; - background: $ui-base-color; - border: 1px solid var(--background-border-color); - color: $darker-text-color; - - @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: $darker-text-color; - - .icon { - width: 18px; - height: 18px; - } - - &:disabled { - opacity: 0.38; - } - } - - .emoji-mart-scroll { - padding: 0 10px 10px; - background: var(--dropdown-background-color); - } - - &__results { - &__item { - display: flex; - align-items: center; - gap: 0.5em; - cursor: pointer; - color: $primary-text-color; - 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: $darker-text-color; - font-weight: 400; - } - - &:active, - &:hover { - background: var(--dropdown-border-color); - } - - &:focus, - &.active { - background: $ui-highlight-color; - color: $primary-text-color; - outline: 0; - - .language-dropdown__dropdown__results__item__common-name { - color: $primary-text-color; - } - } - } - } - } -} - -.visibility-modal { - &__quote-warning { - color: var(--nested-card-text); - background: - /* This is a bit of a silly hack for layering two background colours - * since --nested-card-background is too transparent for a tooltip */ - linear-gradient( - var(--nested-card-background), - var(--nested-card-background) - ), - linear-gradient(var(--background-color), var(--background-color)); - border: var(--nested-card-border); - padding: 16px; - border-radius: 4px; - - h3 { - font-weight: 500; - margin-bottom: 4px; - color: $darker-text-color; - } - - p { - font-size: 0.8em; - color: $dark-text-color; - } - } -} - -.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: $primary-text-color; - background: var(--input-background-color); - border: 1px solid var(--background-border-color); - 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: $dark-text-color; - } -} - -.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(--input-background-color); - border: 1px solid var(--background-border-color); - 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: $darker-text-color; - font-weight: 500; - padding: 0 10px; - margin-bottom: 10px; - } - - .icon-button { - padding: 0; - color: $darker-text-color; - } - - .icon { - width: 18px; - height: 18px; - } - - &__menu { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - - &__message { - color: $darker-text-color; - padding: 0 10px; - } - - &__item { - display: block; - box-sizing: border-box; - width: 100%; - border: 0; - font: inherit; - background: transparent; - color: $darker-text-color; - 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 { - background: $ui-highlight-color; - color: $primary-text-color; - - .icon-button { - color: $primary-text-color; - } - } - - mark { - background: transparent; - font-weight: 700; - color: $primary-text-color; - } - - 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: $darker-text-color; -} - -.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 $ui-button-focus-outline-color; - } - - &[aria-hidden='true'] { - pointer-events: none; - opacity: 0; - transform: rotate(-90deg); - } -} - -.search-results__section { - border-bottom: 1px solid var(--background-border-color); - - &:last-child { - border-bottom: 0; - } - - &__header { - border-bottom: 1px solid var(--background-border-color); - background: var(--surface-background-color); - padding: 15px; - font-weight: 500; - font-size: 14px; - color: $darker-text-color; - display: flex; - justify-content: space-between; - - h3 { - display: flex; - align-items: center; - gap: 5px; - } - - button { - color: $highlight-text-color; - 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: $darker-text-color; - 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: $base-overlay-background; - transition: background 0.5s; -} - -.modal-root__container { - position: fixed; - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - max-width: 100vw; - max-height: 100vh; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - align-content: space-around; - z-index: 9999; - pointer-events: none; - user-select: none; - overscroll-behavior: none; -} - -.modal-root__modal { - pointer-events: auto; - user-select: text; - display: flex; - max-width: 100vw; - - @media screen and (width <= $mobile-breakpoint) { - margin-top: auto; - } -} - -.video-modal .video-player { - max-height: 80vh; - max-width: 100vw; -} - -.audio-modal__container { - width: 50vw; -} - -.media-modal { - width: 100%; - height: 100%; - position: relative; - touch-action: pan-y; - - &__buttons { - position: absolute; - inset-inline-end: 8px; - top: 8px; - z-index: 100; - display: flex; - gap: 8px; - align-items: center; - - .icon-button { - color: color.change($white, $alpha: 0.7); - padding: 8px; - - .icon { - width: 24px; - 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); - } - } - } -} - -.media-modal__closer { - display: flex; - position: absolute; - top: 0; - inset-inline-start: 0; - inset-inline-end: 0; - bottom: 0; - - > div { - flex-shrink: 0; - overflow: auto; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - } -} - -.media-modal__navigation { - position: absolute; - top: 0; - inset-inline-start: 0; - inset-inline-end: 0; - bottom: 0; - pointer-events: none; - transition: opacity 0.3s linear; - will-change: opacity; - - * { - pointer-events: auto; - } - - &.media-modal__navigation--hidden { - opacity: 0; - - * { - pointer-events: none; - } - } -} - -.media-modal__nav { - background: transparent; - box-sizing: border-box; - border: 0; - color: color.change($white, $alpha: 0.7); - cursor: pointer; - display: flex; - align-items: center; - font-size: 24px; - height: 20vmax; - margin: auto 0; - padding: 30px 15px; - position: absolute; - top: 0; - bottom: 0; - transform: scaleX(var(--text-x-direction)); - - &:hover, - &:focus, - &:active { - color: $white; - } -} - -.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 { - 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 { - 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 { - color: $gold-star; - - &:hover, - &:focus, - &:active { - background: color.change($gold-star, $alpha: 0.15); - } - - &:focus { - background: color.change($gold-star, $alpha: 0.3); - } - } - - &.disabled { - color: $white; - background-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: $white; - filter: var(--overlay-icon-shadow); - opacity: 0.4; - height: 6px; - width: 6px; - border-radius: 50%; - margin: 0 4px; - padding: 0; - border: 0; - font-size: 0; - transition: opacity 0.2s ease-in-out; - - &.active { - opacity: 1; - } - - &:focus { - outline: 0; - background-color: $highlight-text-color; - } -} - -.modal-placeholder { - width: 588px; - min-height: 478px; - flex-direction: column; - background: var(--modal-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); - 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(--modal-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); - } - - &__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: $darker-text-color; - - &__icon { - border-radius: 64px; - background: $ui-highlight-color; - color: $white; - 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: $primary-text-color; - } - } - - &__confirmation { - font-size: 14px; - line-height: 20px; - color: $darker-text-color; - - h1 { - font-size: 16px; - line-height: 24px; - color: $primary-text-color; - font-weight: 500; - - &:not(:only-child) { - margin-bottom: 8px; - } - } - - strong { - font-weight: 700; - color: $primary-text-color; - } - } - - &__status { - border: 1px solid var(--modal-border-color); - border-radius: 8px; - padding: 8px; - cursor: pointer; - - &__account { - display: flex; - align-items: center; - gap: 4px; - margin-bottom: 8px; - color: $dark-text-color; - - bdi { - color: inherit; - } - } - - &__content { - display: -webkit-box; - font-size: 15px; - line-height: 22px; - color: $dark-text-color; - 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: $dark-text-color; - } - } - - &__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: $secondary-text-color; - } - - &__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(--modal-background-variant-color); - 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: $dark-text-color; - } - - .link-button { - padding: 10px 12px; - font-weight: 600; - } - } -} - -.dialog-modal { - width: 588px; - max-height: 80vh; - flex-direction: column; - background: var(--modal-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); - border-radius: 16px; - - &__header { - box-sizing: border-box; - border-bottom: 1px solid var(--modal-border-color); - 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: $darker-text-color; - - 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: #000; - - img { - display: block; - } - - img, - .gifv video { - outline: 1px solid var(--media-outline-color); - 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(--dropdown-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--dropdown-border-color); - box-shadow: var(--dropdown-shadow); - max-width: 320px; - padding: 16px; - border-radius: 8px; - z-index: 9999 !important; - font-size: 14px; - line-height: 20px; - color: $darker-text-color; - } - - .copy-paste-text { - margin-bottom: 0; - } -} - -.hotkey-combination { - display: inline-flex; - align-items: center; - gap: 4px; - - kbd { - padding: 3px 5px; - border: 1px solid var(--background-border-color); - border-radius: 4px; - } -} - -.doodle-modal, -.boost-modal, -.report-modal, -.actions-modal, -.compare-history-modal { - background: var(--background-color); - color: $primary-text-color; - border-radius: 4px; - border: 1px solid var(--background-border-color); - 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; - } -} - -.doodle-modal__action-bar, -.boost-modal__action-bar { - display: flex; - justify-content: space-between; - align-items: center; - background: $ui-secondary-color; - padding: 10px; // purposefully reduce padding in glitch-soc - - & > div { - flex: 1 1 auto; - text-align: end; - color: $lighter-text-color; - padding-inline-end: 10px; - } - - .icon { - vertical-align: middle; - } - - .button { - flex: 0 0 auto; - } -} - -.report-modal { - width: 90vw; - max-width: 700px; - border: 1px solid var(--background-border-color); -} - -.report-dialog-modal { - max-width: 90vw; - width: 480px; - height: 80vh; - background: var(--background-color); - color: $primary-text-color; - border-radius: 4px; - border: 1px solid var(--background-border-color); - overflow: hidden; - position: relative; - flex-direction: column; - display: flex; - - &__container { - box-sizing: border-box; - border-top: 1px solid var(--background-border-color); - 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: $secondary-text-color; - margin-bottom: 30px; - - a { - text-decoration: none; - color: $highlight-text-color; - 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: $highlight-text-color; - } - - .status__content, - .status__content p { - color: $primary-text-color; - } - - .dialog-option { - align-items: center; - gap: 12px; - } - - .dialog-option .poll__input { - border-color: $darker-text-color; - color: $ui-secondary-color; - display: inline-flex; - align-items: center; - justify-content: center; - - svg { - width: 15px; - height: 15px; - } - - &:active, - &:focus, - &:hover { - border-color: $valid-value-color; - border-width: 4px; - } - - &.active { - 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(--background-border-color); - - &:last-child { - border-bottom: 0; - } - - & > .poll__option__text { - font-size: 13px; - color: $secondary-text-color; - - strong { - font-size: 17px; - font-weight: 500; - line-height: 22px; - color: $primary-text-color; - display: block; - margin-bottom: 4px; - - &:last-child { - margin-bottom: 0; - } - } - } - } - - .flex-spacer { - background: transparent; - } - - &__textarea { - display: block; - box-sizing: border-box; - width: 100%; - 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(--background-border-color); - 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: $ui-button-destructive-background-color; - color: $ui-button-destructive-background-color; - flex: 0 0 auto; - - &:hover, - &:focus, - &:active { - background: $ui-button-destructive-background-color; - border-color: $ui-button-destructive-background-color; - color: $white; - } - } - - hr { - border: 0; - background: transparent; - margin: 15px 0; - } - - .emoji-mart-search { - padding-inline-end: 10px; - } - - .emoji-mart-search-icon { - inset-inline-end: 10px + 5px; - } -} - -.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; - margin: 0; - width: 100%; - height: 1px; - margin-bottom: 29px; -} - -.actions-modal { - border-radius: 8px 8px 0 0; - background: var(--dropdown-background-color); - backdrop-filter: $backdrop-blur-filter; - border-color: var(--dropdown-border-color); - 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(--dropdown-border-color); - } - } -} - -.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(--background-border-color); - } - - &__container { - padding: 30px; - pointer-events: all; - overflow-y: auto; - } - - .status__content { - color: $secondary-text-color; - font-size: 19px; - line-height: 24px; - - .emojione { - width: 24px; - height: 24px; - margin: -1px 0 0; - } - - a { - color: $highlight-text-color; - } - - hr { - height: 0.25rem; - padding: 0; - background-color: $ui-secondary-color; - border: 0; - margin: 20px 0; - } - } - - .media-gallery, - .audio-player, - .video-player { - margin-top: 15px; - } -} - -.loading-bar { - background-color: $highlight-text-color; - height: 3px; - position: fixed; - top: 0; - inset-inline-start: 0; - z-index: 9999; -} - -// glitch: deprecated settings modal -img.modal-warning { - display: block; - margin: auto; - margin-bottom: 15px; - width: 60px; -} - -// glitch: optional wide mode -.wide .columns-area:not(.columns-area--mobile) { - .column { - flex: auto; - min-width: 330px; - max-width: 400px; - } - - .drawer { - min-width: 300px; - max-width: 400px; - flex: 1 1 200px; - } -} - -.fullwidth-columns .columns-area:not(.columns-area--mobile) { - .column { - flex: auto; - max-width: unset; - } -} - -.media-gallery__actions { - position: absolute; - top: 6px; - inset-inline-end: 6px; - display: flex; - gap: 2px; - z-index: 2; - - &__pill { - display: block; - 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; - font-weight: 700; - line-height: 20px; - } -} - -.media-gallery__item__badges { - position: absolute; - bottom: 8px; - inset-inline-end: 8px; - display: flex; - gap: 2px; -} - -.media-gallery__alt__label, -.relationship-tag { - display: block; - text-align: center; - 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; - 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: $white; - background: color.change($black, $alpha: 0.65); - 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; - - &--solid { - color: var(--nested-card-text); - background: - /* This is a bit of a silly hack for layering two background colours - * since --nested-card-background is too transparent for a tooltip */ - linear-gradient( - var(--nested-card-background), - var(--nested-card-background) - ), - linear-gradient(var(--background-color), var(--background-color)); - border: var(--nested-card-border); - } - - 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(--background-border-color); - border-radius: 4px; - margin-top: 14px; // glitch: reduced margins - overflow: hidden; - - &__icon { - flex: 0 0 auto; - color: $dark-text-color; - padding: 8px 18px; - cursor: default; - border-inline-end: 1px solid var(--background-border-color); - 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: $dark-text-color; - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } - } - - &.compact { - border: 0; - margin-top: 4px; // glitch: reduced margins - - .attachment-list__list { - padding: 0; - display: block; - } - - .icon { - color: $dark-text-color; - vertical-align: middle; - } - } -} - -/* Media Gallery */ -.media-gallery { - box-sizing: border-box; - margin-top: 8px; - overflow: hidden; - border-radius: 8px; - position: relative; - width: 100%; - min-height: 64px; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - gap: 2px; - - &--layout-1 { - // The size of single images is determined by their - // aspect-ratio, applied via inline style attribute - width: initial; - max-height: 460px; - } - - &--layout-2 { - & > .media-gallery__item:nth-child(1) { - border-end-end-radius: 0; - border-start-end-radius: 0; - } - - & > .media-gallery__item:nth-child(2) { - border-start-start-radius: 0; - border-end-start-radius: 0; - } - } - - &--layout-3 { - min-height: calc(64px * 2 + 8px); - - & > .media-gallery__item:nth-child(1) { - border-end-end-radius: 0; - border-start-end-radius: 0; - } - - & > .media-gallery__item:nth-child(2) { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-end-end-radius: 0; - } - - & > .media-gallery__item:nth-child(3) { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-start-end-radius: 0; - } - } - - &--layout-4 { - min-height: calc(64px * 2 + 8px); - - & > .media-gallery__item:nth-child(1) { - border-end-end-radius: 0; - border-start-end-radius: 0; - border-end-start-radius: 0; - } - - & > .media-gallery__item:nth-child(2) { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-end-end-radius: 0; - } - - & > .media-gallery__item:nth-child(3) { - border-start-start-radius: 0; - border-start-end-radius: 0; - border-end-start-radius: 0; - border-end-end-radius: 0; - } - - & > .media-gallery__item:nth-child(4) { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-start-end-radius: 0; - } - } - - @include fullwidth-gallery; -} - -.media-gallery__item { - border: 0; - box-sizing: border-box; - display: block; - position: relative; - border-radius: 8px; - overflow: hidden; - outline: 1px solid var(--media-outline-color); - outline-offset: -1px; - z-index: 1; - - &--tall { - grid-row: span 2; - } - - &--wide { - grid-column: span 2; - } - - .full-width & { - border-radius: 0; - } - - &.letterbox { - background: $base-shadow-color; - } - - &--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: $white; - filter: var(--overlay-icon-shadow); - } - } - - &--error img { - visibility: hidden; - } -} - -.media-gallery__item-thumbnail { - cursor: pointer; - display: block; - text-decoration: none; - color: $secondary-text-color; - position: relative; - z-index: -1; - - &, - img { - height: 100%; - width: 100%; - object-fit: contain; - - &:not(.letterbox) { - height: 100%; - 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: $base-overlay-background; - - &--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%; - width: 100%; - object-fit: contain; - user-select: none; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } -} - -/* End Media Gallery */ - -.detailed, -.fullscreen { - .video-player__volume__current, - .video-player__volume::before { - bottom: 27px; - } - - .video-player__volume__handle { - bottom: 23px; - } -} - -.audio-player { - 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, var(--background-color)); - border-radius: 8px; - outline: 1px solid var(--media-outline-color); - 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; - background: $base-shadow-color; - max-height: 460px; - border-radius: 8px; - box-sizing: border-box; - color: $white; - display: flex; - outline: 1px solid var(--media-outline-color); - outline-offset: -1px; - z-index: 2; - - .detailed-status & { - width: 100%; - height: 100%; - } - - @include fullwidth-gallery; - - video { - display: block; - max-width: 100vw; - max-height: 80vh; - z-index: -2; - position: relative; - } - - &.fullscreen { - width: 100% !important; - margin: 0; - height: 100% !important; - outline: none; - border-radius: 0; - - video { - max-width: 100% !important; - max-height: 100% !important; - width: 100% !important; - height: 100% !important; - outline: 0; - } - } - - &.inline { - video { - object-fit: contain; - } - } - - &__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, - color.change($base-shadow-color, $alpha: 0.85) 0, - color.change($base-shadow-color, $alpha: 0.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: $base-overlay-background; - color: $darker-text-color; - transition: none; - pointer-events: none; - - &.active { - display: block; - pointer-events: auto; - - &:hover, - &:active, - &:focus { - color: lighten($darker-text-color, 7%); - } - } - - &__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: color.change($white, $alpha: 0.75); - font-weight: 500; - - &:active, - &:hover, - &:focus { - color: $white; - } - } - } - - &__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 { - 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; - 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: color.change($white, $alpha: 0.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: $white; - } - - &__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: $white; - box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2); - 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: $white; - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } - } - - &__seek { - cursor: pointer; - height: 24px; - position: relative; - - &::before { - content: ''; - width: 100%; - background: color.change($white, $alpha: 0.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: $white; - } - - &__buffer { - background: color.change($white, $alpha: 0.2); - } - - &__handle { - position: absolute; - z-index: 3; - opacity: 0; - border-radius: 50%; - width: 12px; - height: 12px; - top: 10px; - margin-inline-start: -6px; - background: $white; - box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2); - - .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%); - background: color.change($base-shadow-color, $alpha: 0.45); - backdrop-filter: $backdrop-blur-filter; - color: $white; - 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(--background-color); - } - - .account__avatar { - border: none; - } -} - -.scrollable .account-card__header { - img { - border-radius: 4px; - } -} - -.scrollable .account-card__bio::after { - background: linear-gradient(to left, var(--background-color), 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(--background-border-color); - 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: $darker-text-color; - padding: 15px 0; - font-size: 14px; - font-weight: 500; - text-align: center; - text-decoration: none; - position: relative; - - &.active { - color: $primary-text-color; - - &::before { - display: block; - content: ''; - position: absolute; - bottom: -1px; - left: 50%; - transform: translateX(-50%); - width: 40px; - height: 3px; - border-radius: 4px 4px 0 0; - background: $highlight-text-color; - } - } - } - - .scrollable & { - border-left: 0; - border-right: 0; - } -} - -.filter-form { - border-bottom: 1px solid var(--background-border-color); - - &__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: $secondary-text-color; - - input[type='radio'], - input[type='checkbox'] { - display: none; - } - - &__input { - display: flex; - align-items: center; - justify-content: center; - position: relative; - border: 2px solid $secondary-text-color; - box-sizing: border-box; - width: 20px; - height: 20px; - flex: 0 0 auto; - border-radius: 50%; - - &.checked, - &.indeterminate { - border-color: $ui-highlight-color; - } - - .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: $ui-highlight-color; -} - -.check-box { - &__input { - width: 18px; - height: 18px; - border-radius: 2px; - - &.checked, - &.indeterminate { - background: $ui-highlight-color; - color: $white; - } - } -} - -noscript { - text-align: center; - - img { - width: 200px; - opacity: 0.5; - animation: flicker 4s infinite; - } - - div { - font-size: 14px; - margin: 30px auto; - color: $secondary-text-color; - max-width: 400px; - - a { - color: $highlight-text-color; - 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(--surface-background-color); - display: flex; - align-items: center; - flex-direction: column; - - &__message { - color: $darker-text-color; - 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(--background-border-color); - 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: color.change($base-overlay-background, $alpha: 0.5); -} - -.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 #fff; - border-radius: 50%; - box-shadow: 0 0 0 9999em color.change($base-shadow-color, $alpha: 0.35); - pointer-events: none; - } -} - -.account__header__content { - color: $darker-text-color; - 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: darken($ui-base-color, 4%); - border-bottom: 1px solid var(--background-border-color); - - img { - object-fit: cover; - display: block; - width: 100%; - height: 100%; - margin: 0; - } - } - - &__bar { - position: relative; - padding: 0 20px; - padding-bottom: 16px; // glitch-soc addition for the different tabs design - border-bottom: 1px solid var(--background-border-color); - - .avatar { - display: block; - flex: 0 0 auto; - - .account__avatar { - background: var(--background-color); - border: 1px solid var(--background-border-color); - 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: $primary-text-color; - 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: $darker-text-color; - 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(--background-border-color); - border-radius: 4px; - box-sizing: content-box; - padding: 5px; - - .icon { - width: 24px; - height: 24px; - } - - &.copied { - border-color: $valid-value-color; - } - } - } - - &__bio { - .account__header__content { - color: $primary-text-color; - } - - .account__header__fields { - margin: 0; - margin-top: 16px; - border-radius: 4px; - border: 1px solid var(--background-border-color); - - dl { - display: block; - padding: 8px 16px; // glitch-soc: padding purposefuly reduced - border-bottom-color: var(--background-border-color); - } - - dd, - dt { - font-size: 13px; - line-height: 18px; - padding: 0; - text-align: initial; - } - - dt { - width: auto; - background: transparent; - text-transform: uppercase; - color: $dark-text-color; - } - - dd { - color: $darker-text-color; - } - - a { - color: lighten($ui-highlight-color, 8%); - } - - .icon { - width: 18px; - height: 18px; - } - - .verified { - border: 1px solid color.change($valid-value-color, $alpha: 0.5); - 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: $valid-value-color; - } - - dd { - display: flex; - align-items: center; - gap: 4px; - - span { - display: flex; - } - } - - a { - color: $valid-value-color; - } - } - } - } - - &__extra { - margin-top: 16px; - - &__links { - font-size: 14px; - color: $darker-text-color; - margin: 0 -10px; - padding-top: 16px; - padding-bottom: 10px; - - a { - display: inline-block; - color: $darker-text-color; - text-decoration: none; - padding: 5px 10px; - font-weight: 500; - - strong { - font-weight: 700; - color: $primary-text-color; - } - } - } - } - - &__account-note { - color: $primary-text-color; - 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: $darker-text-color; - text-transform: uppercase; - margin-bottom: 5px; - } - - textarea { - display: block; - box-sizing: border-box; - width: calc(100% + 20px); - color: $secondary-text-color; - background: transparent; - padding: 10px; - margin: 0 -10px; - font-family: inherit; - font-size: 14px; - resize: none; - border: 0; - outline: 0; - border-radius: 4px; - - &::placeholder { - color: $dark-text-color; - opacity: 1; - } - - &:focus { - background: $ui-base-color; - } - } - } - - &__familiar-followers { - display: flex; - align-items: center; - gap: 10px; - margin-block: 16px; - color: $darker-text-color; - - a:any-link { - font-weight: 500; - text-decoration: none; - color: $primary-text-color; - } - } -} - -.account__contents { - overflow: hidden; -} - -.account__details { - display: flex; - flex-wrap: wrap; - column-gap: 1em; -} - -.verified-badge { - display: inline-flex; - align-items: center; - color: $valid-value-color; - 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(--background-border-color); - gap: 8px; - - &__name { - flex: 1 1 auto; - color: $dark-text-color; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - strong { - font-weight: 500; - } - - a { - color: $darker-text-color; - 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: $secondary-text-color; - text-decoration: none; - } - - &__sparkline { - flex: 0 0 auto; - width: 50px; - - path:first-child { - fill: color.change($highlight-text-color, $alpha: 0.25) !important; - fill-opacity: 1 !important; - } - - path:last-child { - stroke: lighten($highlight-text-color, 6%) !important; - fill: none !important; - } - } - - &--requires-review { - .trends__item__name { - color: $gold-star; - - a { - color: $gold-star; - } - } - - .trends__item__current { - color: $gold-star; - } - - .trends__item__sparkline { - path:first-child { - fill: color.change($gold-star, $alpha: 0.25) !important; - } - - path:last-child { - stroke: lighten($gold-star, 6%) !important; - } - } - } - - &--disabled { - .trends__item__name { - color: lighten($ui-base-color, 12%); - - a { - color: lighten($ui-base-color, 12%); - } - } - - .trends__item__current { - color: lighten($ui-base-color, 12%); - } - - .trends__item__sparkline { - path:first-child { - fill: rgba(lighten($ui-base-color, 12%), 0.25) !important; - } - - path:last-child { - stroke: lighten(lighten($ui-base-color, 12%), 6%) !important; - } - } - } - } - - &--compact &__item { - padding: 12px; - } -} - -.conversation { - display: flex; - border-bottom: 1px solid var(--background-border-color); - padding: 5px; - padding-bottom: 0; - - &:focus { - background: lighten($ui-base-color, 2%); - outline: 0; - } - - &__avatar { - flex: 0 0 auto; - padding: 10px; - padding-top: 12px; - position: relative; - cursor: pointer; - } - - &__unread { - display: inline-block; - background: $highlight-text-color; - 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: $darker-text-color; - padding-inline-start: 15px; - } - - &__names { - color: $darker-text-color; - font-size: 15px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 4px; - flex-basis: 90px; - flex-grow: 1; - - a { - color: $primary-text-color; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - - .status__content { - margin: 0; - } - } -} - -.announcements { - width: calc(100% - 124px); - flex: 0 0 auto; - position: relative; - overflow: hidden; - - .layout-multiple-columns & { - width: 100%; - } - - @media screen and (max-width: (124px + 300px)) { - width: 100%; - } - - &__root { - background: lighten($ui-base-color, 8%); - font-size: 13px; - display: flex; - align-items: flex-end; - } - - &__mastodon { - width: 124px; - flex: 0 0 auto; - - @media screen and (max-width: (124px + 300px)) { - display: none; - } - } - - &__slides { - display: flex; - flex-wrap: nowrap; - align-items: start; - } - - &__slide { - box-sizing: border-box; - width: 100%; - flex: 0 0 100%; - padding: 15px; - position: relative; - font-size: 15px; - line-height: 20px; - overflow-wrap: break-word; - font-weight: 400; - max-height: 50vh; - overflow: hidden; - flex-direction: column; - } - - &__range { - display: block; - font-weight: 500; - margin-bottom: 10px; - padding-inline-end: 18px; - } - - &__unread { - position: absolute; - top: 19px; - inset-inline-end: 19px; - display: block; - background: $highlight-text-color; - border-radius: 50%; - width: 0.625rem; - height: 0.625rem; - } - - &__pagination { - padding: 15px; - color: $darker-text-color; - position: absolute; - bottom: 3px; - inset-inline-end: 0; - display: flex; - align-items: center; - z-index: 1; - } -} - -.layout-multiple-columns .announcements__mastodon { - display: none; -} - -.layout-multiple-columns .announcements__container { - width: 100%; -} - -.reactions-bar { - display: flex; - flex-wrap: wrap; - align-items: center; - margin-top: 15px; - margin-inline-start: -2px; - width: calc(100% - (90px - 33px)); - - &__item { - flex-shrink: 0; - background: lighten($ui-base-color, 12%); - color: $darker-text-color; - border: 0; - border-radius: 3px; - 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 { - background: lighten($ui-base-color, 16%); - transition: all 200ms ease-out; - transition-property: background-color, color; - color: lighten($darker-text-color, 4%); - } - - &.active { - 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%); - } - } - - .emoji-picker-dropdown { - display: flex; - margin: 2px; - } - - &:hover .emoji-button { - opacity: 0.85; - } - - .emoji-button { - color: $darker-text-color; - 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: lighten($darker-text-color, 4%); - 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 $highlight-text-color; - pointer-events: none; - } - } -} - -.picture-in-picture { - position: fixed; - bottom: 20px; - inset-inline-end: 20px; - width: 300px; - box-shadow: var(--dropdown-shadow); - - // glitch: feature to chose which side the pop-in player is displayed - &.left { - inset-inline-end: unset; - inset-inline-start: 20px; - } - - &__footer { - border-radius: 0 0 4px 4px; - background: var(--modal-background-variant-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); - border-top: 0; - padding: 12px; - display: flex; - justify-content: space-between; - } - - &__header { - border-radius: 4px 4px 0 0; - background: var(--modal-background-variant-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); - 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: $primary-text-color; - text-decoration: none; - - strong, - span { - display: block; - text-overflow: ellipsis; - overflow: hidden; - } - - span { - color: $darker-text-color; - } - } - } - - .video-player, - .audio-player { - border-radius: 0; - } -} - -.picture-in-picture-placeholder { - border-radius: 8px; - box-sizing: border-box; - border: 1px dashed var(--background-border-color); - 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: $dark-text-color; - aspect-ratio: 16 / 9; - - .icon { - width: 48px; - height: 48px; - margin-bottom: 8px; - } - - &:hover, - &:active, - &:focus { - color: $darker-text-color; - } - - &:focus-visible { - outline: $ui-button-focus-outline; - border-color: transparent; - } -} - -.notifications-permission-banner { - padding: 30px; - border-bottom: 1px solid var(--background-border-color); - 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: $darker-text-color; - 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(--background-border-color); - border-top: 0; - border-bottom: 0; - padding: 16px; - padding-bottom: 8px; - - .search { - width: 100%; - margin-bottom: 0; - } - - .search__input { - border: 1px solid var(--background-border-color); - padding-block: 12px; - padding-inline-end: 30px; - } - - .search__popout { - border: 1px solid var(--background-border-color); - } - - .search__icon { - top: 12px; - inset-inline-end: 12px; - color: $dark-text-color; - } -} - -.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(--background-border-color); - border-top: 0; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } -} - -.story { - display: flex; - align-items: center; - color: $primary-text-color; - padding: 16px; - border-bottom: 1px solid var(--background-border-color); - gap: 16px; - - &:last-child { - border-bottom: 0; - } - - &__details { - flex: 1 1 auto; - - &__publisher { - color: $darker-text-color; - 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: $primary-text-color; - - &:hover, - &:active, - &:focus { - color: $highlight-text-color; - } - } - - &__shared { - display: flex; - align-items: baseline; - color: $darker-text-color; - gap: 8px; - justify-content: space-between; - font-size: 14px; - line-height: 20px; - - &__pill { - background: var(--surface-variant-background-color); - 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: $primary-text-color; - font-weight: 500; - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: $highlight-text-color; - } - } - } - - strong { - font-weight: 500; - } - } - - &__thumbnail { - flex: 0 0 auto; - position: relative; - width: 120px; - height: 120px; - - .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: $darker-text-color; - 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: $ui-base-color; - object-fit: cover; - } - - &__description { - font-size: 15px; - line-height: 22px; - color: $darker-text-color; - 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: $primary-text-color; - font-size: 14px; - } - - &__number-label { - color: $darker-text-color; - font-weight: 500; - font-size: 14px; - } - - h4 { - text-transform: uppercase; - color: $darker-text-color; - 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(--modal-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); - 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: $darker-text-color; - - strong { - color: $primary-text-color; - 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(--background-border-color); - padding: 4px 6px; - color: $primary-text-color; - 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: lighten($darker-text-color, 4%); - } - - &:focus { - outline: 0; - } - } - - .button { - flex: 0 0 auto; - } - } - - .search__popout { - margin-top: -1px; - padding-top: 5px; - padding-bottom: 5px; - border: 1px solid var(--background-border-color); - } - - &.invalid &__input { - border-color: $error-red; - } - - &.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: $darker-text-color; - 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; - } -} - -.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; - - @media screen and (min-width: $no-gap-breakpoint) { - border-radius: 4px; - } - - &__body { - margin-top: 20px; - } -} - -.prose { - color: $secondary-text-color; - 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: $darker-text-color; - 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: $primary-text-color; - font-weight: 700; - } - - em, - i { - font-style: italic; - } - - a { - color: $highlight-text-color; - text-decoration: underline; - - &:focus, - &:hover, - &:active { - text-decoration: none; - } - } - - code { - font-size: 0.875em; - background: darken($ui-base-color, 8%); - border-radius: 4px; - padding: 0.2em 0.3em; - } - - hr { - border: 0; - border-top: 1px solid lighten($ui-base-color, 4%); - 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 $highlight-text-color; - background: color.change($highlight-text-color, $alpha: 0.15); - 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: $primary-text-color; - - p { - margin-bottom: 15px; - - &:last-child { - margin-bottom: 0; - } - } - - h1 { - color: $highlight-text-color; - 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; - } - } - - .button-tertiary { - background: color.change($ui-base-color, $alpha: 0.15); - backdrop-filter: blur(8px); - } - } - - &__action { - float: right; - padding: 15px 10px; - - .icon-button { - color: $highlight-text-color; - } - } -} - -.warning-banner { - border: 1px solid $warning-red; - background: color.change($warning-red, $alpha: 0.15); - - &__message { - h1 { - color: $warning-red; - } - - a { - color: $primary-text-color; - } - } -} - -.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: $dark-text-color; - margin-bottom: 20px; - - .version { - white-space: nowrap; - } - - strong { - font-weight: 500; - } - - a { - color: $dark-text-color; - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - } -} - -.about { - padding: 20px; - border-top: 1px solid var(--background-border-color); - - @media screen and (min-width: $no-gap-breakpoint) { - border-radius: 4px; - } - - &__footer { - color: $dark-text-color; - 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: lighten($ui-base-color, 4%); - 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: $darker-text-color; - } - } - - &__meta { - border: 1px solid var(--background-border-color); - 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(--background-border-color); - border-left-width: 1px; - min-height: calc(100% - 60px); - flex: 0 0 auto; - } - - h4 { - font-size: 15px; - text-transform: uppercase; - color: $darker-text-color; - 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: $primary-text-color; - 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(--background-border-color); - color: $highlight-text-color; - cursor: pointer; - width: 100%; - background: none; - } - - &.active &__title { - border-radius: 4px 4px 0 0; - } - - &__body { - border: 1px solid var(--background-border-color); - border-top: 0; - padding: 20px; - font-size: 15px; - line-height: 22px; - } - } - - &__domain-blocks { - margin-top: 30px; - border: 1px solid var(--background-border-color); - border-radius: 4px; - - &__domain { - border-bottom: 1px solid var(--background-border-color); - padding: 10px; - font-size: 15px; - color: $darker-text-color; - - &:nth-child(2n) { - background: darken($ui-base-color, 4%); - } - - &:last-child { - border-bottom: 0; - } - - &__header { - display: flex; - gap: 10px; - justify-content: space-between; - font-weight: 500; - margin-bottom: 4px; - } - - h6 { - color: $secondary-text-color; - 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: $white; - background: color.change($black, $alpha: 0.85); - backdrop-filter: blur(8px); - border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85); - border-radius: 8px; - box-shadow: - 0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25), - 0 4px 6px -4px color.change($base-shadow-color, $alpha: 0.25); - 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: $blurple-300; - font-weight: 700; - border-radius: 4px; - padding: 0 4px; - - &:hover, - &:focus, - &:active { - background: color.change($white, $alpha: 0.15); - } -} - -.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: $white; - height: var(--spinner-size); - width: var(--spinner-size); - } -} - -.hashtag-header { - border-bottom: 1px solid var(--background-border-color); - padding: 15px; - font-size: 17px; - line-height: 22px; - color: $darker-text-color; - - strong { - font-weight: 700; - } - - &__header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; - gap: 15px; - - h1 { - color: $primary-text-color; - 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(--background-border-color); - 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: $darker-text-color; - - a { - display: inline-flex; - color: inherit; - text-decoration: none; - padding: 4px 12px; - background: var(--surface-variant-background-color); - border-radius: 4px; - font-weight: 500; - - &:hover, - &:focus, - &:active { - background: var(--surface-variant-active-background-color); - } - } - - .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(--background-border-color); - background: color.change($ui-highlight-color, $alpha: 0.05); - - &.focusable:focus-visible { - background: color.change($ui-highlight-color, $alpha: 0.05); - } - - &__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: $primary-text-color; - opacity: 0.5; - - &.left { - left: 0; - } - - &.right { - right: 0; - } - - &__icon { - border-radius: 50%; - background: $ui-highlight-color; - display: flex; - align-items: center; - justify-content: center; - aspect-ratio: 1; - padding: 8px; - - .icon { - width: 24px; - height: 24px; - } - } - - &:hover, - &:focus, - &:active { - opacity: 1; - - .inline-follow-suggestions__body__scroll-button__icon { - background: lighten($ui-highlight-color, 4%); - } - } - } - - &__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(--background-color); - border: 1px solid var(--background-border-color); - 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(--background-border-color); - background-color: $ui-base-color; - } - - &__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: $dark-text-color; - 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: $secondary-text-color; - } - - &__account { - font-size: 14px; - color: $darker-text-color; - } - } - - .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(--background-border-color); - padding: 16px 24px; - gap: 8px; - color: $darker-text-color; - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: $secondary-text-color; - } - - .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 { - background: $ui-button-background-color; - color: $white; - border-radius: 100px; - padding: 2px 8px; - } -} - -.notification-request { - $padding: 15px; - - display: flex; - padding: $padding; - gap: 8px; - position: relative; - border-bottom: 1px solid var(--background-border-color); - - &__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: $darker-text-color; - 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: $secondary-text-color; - - bdi { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - - .filtered-notifications-banner__badge { - background: $ui-button-background-color; - border-radius: 4px; - padding: 1px 6px; - color: $white; - } - } - - &__actions { - display: flex; - align-items: center; - gap: 8px; - - .icon-button { - border-radius: 4px; - border: 1px solid var(--background-border-color); - padding: 5px; - } - } - - .notification-request__link { - transition: padding-inline-start 0.1s ease-in-out; - } - - &--forced-checkbox { - cursor: pointer; - - &:hover { - background: var(--on-surface-color); - } - - .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: $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; - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 4px 8px; - - .logo { - width: 16px; - height: 16px; - color: $darker-text-color; - } - - & > span { - display: flex; - align-items: center; - gap: 8px; - } - - a { - display: inline-flex; - align-items: center; - gap: 4px; - font-weight: 500; - color: $primary-text-color; - text-decoration: none; - min-width: 0; - - &:hover, - &:focus, - &:active { - color: $highlight-text-color; - } - } -} - -.notification-group { - display: flex; - align-items: flex-start; - gap: 8px; - padding: 10px 14px; // glitch: reduced padding - border-bottom: 1px solid var(--background-border-color); - - &__icon { - width: 40px; - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - color: $dark-text-color; - - .icon { - width: 28px; - height: 28px; - } - } - - &--follow &__icon, - &--follow-request &__icon { - color: $highlight-text-color; - } - - &--favourite &__icon { - color: $gold-star; - } - - &--reblog &__icon { - color: $valid-value-color; - } - - &--relationships-severance-event &__icon, - &--admin-report &__icon, - &--admin-sign-up &__icon { - color: $dark-text-color; - } - - &--moderation-warning &__icon { - color: $red-bookmark; - } - - &--follow-request &__actions { - align-items: center; - display: flex; - gap: 8px; - - .icon-button { - border: 1px solid var(--background-border-color); - 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: $darker-text-color; - - a { - color: inherit; - text-decoration: none; - } - - bdi { - font-weight: 700; - color: $primary-text-color; - } - - time { - color: $dark-text-color; - } - - @container (width < 350px) { - time, - &-separator { - display: none; - } - } - } - } - - &__status { - border: 1px solid var(--background-border-color); - border-radius: 8px; - padding: 8px; - } - - &__additional-content { - color: $dark-text-color; - 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: $dark-text-color; - font-size: 15px; - line-height: 22px; - - bdi { - color: $darker-text-color; - } - - .account__avatar { - flex: 0 0 auto; - } - } - - /* glitch: used for CWs */ - p { - font-size: 15px; - color: $darker-text-color; - } - - &__content { - display: -webkit-box; - font-size: 15px; - line-height: 22px; - color: $darker-text-color; - -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 { - font-size: 15px; - line-height: 22px; - color: $dark-text-color; - } - } -} - -.notification-group__actions, -.compose-form__actions { - .button { - display: block; // Otherwise text-ellipsis doesn't work - flex: 1 1 auto; - } -} - -.notification-ungrouped { - padding: 10px 14px; // glitch: reduced padding - border-bottom: 1px solid var(--background-border-color); - - &__header { - display: flex; - align-items: center; - gap: 8px; - color: $dark-text-color; - 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 $highlight-text-color; - 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(--modal-background-color); - backdrop-filter: $backdrop-blur-filter; - border: 1px solid var(--modal-border-color); - 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: $secondary-text-color; - - strong { - font-weight: 700; - } - } - - &__text-row { - display: flex; - flex-direction: column; - gap: 8px; - } - - &__bio { - color: $secondary-text-color; - 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: $dark-text-color; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - } - - dd { - white-space: pre-line; - color: $secondary-text-color; - 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: $primary-text-color; - } - - &__account { - display: block; - color: $dark-text-color; - } - } - - .account-fields { - color: $secondary-text-color; - 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: $dark-text-color; - 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: $valid-value-color; - - & > span { - overflow: hidden; - text-overflow: ellipsis; - } - - a { - font-weight: 500; - } - - .icon { - width: 16px; - height: 16px; - } - } - } - } - } -} - -.content-warning { - display: block; - box-sizing: border-box; - background: var(--nested-card-background); - color: var(--nested-card-text); - border: var(--nested-card-border); - 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: $darker-text-color; - - p { - font-weight: normal; - } - - .filter-name { - font-weight: 500; - color: $secondary-text-color; - } - } - - .status__content__spoiler-icon { - float: inline-end; - width: 20px; - height: 20px; - } -} - -.lists__item { - display: flex; - align-items: center; - gap: 16px; - padding-inline-end: 13px; - border-bottom: 1px solid var(--background-border-color); - - &__title { - display: flex; - align-items: center; - gap: 5px; - padding: 16px 13px; - flex: 1 1 auto; - font-size: 16px; - line-height: 24px; - color: $secondary-text-color; - text-decoration: none; - - &:is(a):hover, - &:is(a):focus, - &:is(a):active { - color: $primary-text-color; - } - - 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(--input-placeholder-color); - opacity: 1; - } - - &:focus { - outline: 0; - } - } - } -} - -.column-search-header { - display: flex; - gap: 12px; - align-items: center; - border: 1px solid var(--background-border-color); - border-top: 0; - border-bottom: 0; - padding: 16px; - padding-bottom: 8px; - - input { - background: var(--input-background-color); - border: 1px solid var(--background-border-color); - color: var(--on-input-color); - padding: 12px; - font-size: 16px; - line-height: normal; - border-radius: 4px; - display: block; - flex: 1 1 auto; - - &::placeholder { - color: var(--input-placeholder-color); - 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(--background-border-color); - 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; - - // glitch-soc fix for width-constrained - contain: inline-size; - } - - &__header { - padding: 8px 16px; - color: $darker-text-color; - inset-inline-end: 0; - display: flex; - align-items: center; - gap: 4px; - } - - &__title { - flex-grow: 1; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - display: flex; - align-items: center; - gap: 4px; - - .icon { - width: 16px; - height: 16px; - } - } - - &__pagination { - display: flex; - align-items: center; - gap: 4px; - } -} diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss deleted file mode 100644 index 7db9ca409d..0000000000 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ /dev/null @@ -1,166 +0,0 @@ -@use 'variables' as *; - -.container-alt { - width: 700px; - margin: 0 auto; - - @media screen and (width <= 740px) { - width: 100%; - margin: 0; - } -} - -.logo-container { - margin: 50px auto; - - h1 { - display: flex; - justify-content: center; - align-items: center; - - .logo { - height: 42px; - margin-inline-end: 10px; - } - - a { - display: flex; - justify-content: center; - align-items: center; - color: $primary-text-color; - 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(--background-border-color); - - @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: $secondary-text-color; - - .username { - display: block; - font-size: 16px; - line-height: 24px; - text-overflow: ellipsis; - overflow: hidden; - color: $primary-text-color; - } - } - - .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: $highlight-text-color; - font-weight: 500; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - - &__link { - margin-top: 15px; - } -} diff --git a/app/javascript/flavours/glitch/styles/contrast.scss b/app/javascript/flavours/glitch/styles/contrast.scss index 367be051f1..af73c88fef 100644 --- a/app/javascript/flavours/glitch/styles/contrast.scss +++ b/app/javascript/flavours/glitch/styles/contrast.scss @@ -1,3 +1,8 @@ -@use 'contrast/variables'; -@use 'application'; +@use 'mastodon/css_variables'; +@use 'mastodon/variables'; +@use 'common'; @use 'contrast/diff'; + +html { + color-scheme: dark; +} diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss index d4da67cf61..f809c7cdc3 100644 --- a/app/javascript/flavours/glitch/styles/contrast/diff.scss +++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss @@ -1,4 +1,16 @@ -@use '../variables' as *; +:root { + /* TEXT TOKENS */ + + --color-text-primary: var(--color-grey-50); + --color-text-secondary: var(--color-grey-300); + --color-text-tertiary: var(--color-grey-400); + --color-text-brand: var(--color-indigo-300); + --color-text-status-links: var(--color-text-brand); + + /* BORDER TOKENS */ + + --border-strength-primary: 18%; +} .status__content a, .reply-indicator__content a, @@ -31,16 +43,6 @@ } } -.status__content a, -.reply-indicator__content a, -.edit-indicator__content a { - color: $highlight-text-color; -} - -.report-dialog-modal__textarea::placeholder { - color: $inverted-text-color; -} - .link-button:disabled { cursor: not-allowed; diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss deleted file mode 100644 index 8db7d6bad0..0000000000 --- a/app/javascript/flavours/glitch/styles/contrast/variables.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '../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 '../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/flavours/glitch/styles/css_variables.scss b/app/javascript/flavours/glitch/styles/css_variables.scss deleted file mode 100644 index 78915ae10e..0000000000 --- a/app/javascript/flavours/glitch/styles/css_variables.scss +++ /dev/null @@ -1,49 +0,0 @@ -@use 'sass:color'; -@use 'functions' as *; -@use 'variables' as *; - -:root { - --dropdown-border-color: #{lighten($ui-base-color, 4%)}; - --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)}; - --dropdown-shadow: - 0 20px 25px -5px #{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 { - // Variable for easily inverting directional UI elements, - --text-x-direction: 1; - - &.rtl { - --text-x-direction: -1; - } -} diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss deleted file mode 100644 index 8326022f71..0000000000 --- a/app/javascript/flavours/glitch/styles/dashboard.scss +++ /dev/null @@ -1,121 +0,0 @@ -@use 'functions' as *; -@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(--background-color); - border-radius: 4px; - border: 1px solid var(--background-border-color); - box-sizing: border-box; - height: 100%; - } - - & > a { - text-decoration: none; - color: inherit; - display: block; - - &:hover, - &:focus, - &:active { - background: $ui-base-color; - } - } - } - - &__num, - &__text { - text-align: center; - font-weight: 500; - font-size: 24px; - color: $primary-text-color; - margin-bottom: 20px; - line-height: 30px; - } - - &__text { - font-size: 18px; - } - - &__label { - font-size: 14px; - color: $darker-text-color; - 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: $ui-button-background-color; - color: $primary-text-color; - transition: all 100ms ease-in; - font-size: 14px; - padding: 8px 16px; - text-decoration: none; - margin-bottom: 4px; - - &:active, - &:focus, - &:hover { - background-color: $ui-button-focus-background-color; - transition: all 200ms ease-out; - } - - &.positive { - background: lighten($ui-base-color, 4%); - color: $valid-value-color; - } - - &.negative { - background: lighten($ui-base-color, 4%); - color: $error-value-color; - } - - span { - flex: 1 1 auto; - } - - strong { - font-weight: 700; - } - } -} diff --git a/app/javascript/flavours/glitch/styles/emoji_picker.scss b/app/javascript/flavours/glitch/styles/emoji_picker.scss deleted file mode 100644 index 716c790e65..0000000000 --- a/app/javascript/flavours/glitch/styles/emoji_picker.scss +++ /dev/null @@ -1,245 +0,0 @@ -@use 'variables' as *; -@use 'functions' 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(--dropdown-border-color); - } -} - -.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: $darker-text-color; - - &:hover { - color: lighten($darker-text-color, 4%); - } -} - -.emoji-mart-anchor-selected { - color: $highlight-text-color; - - &:hover { - color: lighten($highlight-text-color, 4%); - } - - .emoji-mart-anchor-bar { - bottom: -1px; - } -} - -.emoji-mart-anchor-bar { - position: absolute; - bottom: -5px; - inset-inline-start: 0; - width: 100%; - height: 4px; - background-color: $highlight-text-color; -} - -.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: $ui-base-color; - color: $darker-text-color; - border: 1px solid var(--background-border-color); - 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; - opacity: 0.7; - - &:disabled { - cursor: default; - pointer-events: none; - } - - svg { - fill: $darker-text-color; - } -} - -.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(--dropdown-border-color); - 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: $dark-text-color; - 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/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss deleted file mode 100644 index e11f8768c1..0000000000 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ /dev/null @@ -1,1464 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; -@use 'functions' 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(--surface-background-color); - 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(--surface-background-color), - 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: $primary-text-color; - - &.success { - background: $success-green; - } - - &.failure { - background: $error-red; - } -} - -.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: $primary-text-color; - 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: $highlight-text-color; - text-decoration: underline; - - &:hover, - &:active, - &:focus { - text-decoration: none; - } - } - - .overridden, - .recommended, - .not_recommended, - .glitch_only { - 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: $secondary-text-color; - margin-bottom: 30px; - - &.invited-by { - margin-bottom: 15px; - } - - a { - color: $highlight-text-color; - } - } - - .rules-list { - font-size: 17px; - line-height: 22px; - margin-bottom: 30px; - } - - .hint { - color: $darker-text-color; - - a { - color: $highlight-text-color; - } - - code { - border-radius: 3px; - padding: 0.2em 0.4em; - background: darken($ui-base-color, 12%); - } - - 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: $darker-text-color; - - &.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: $primary-text-color; - 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: $primary-text-color; - 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: $primary-text-color; - 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: lighten($error-value-color, 12%); - } - - .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: $primary-text-color; - display: block; - width: auto; - } - - .check_boxes { - .checkbox { - label { - font-family: inherit; - font-size: 14px; - color: $primary-text-color; - 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 $dark-text-color; - 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: $primary-text-color; - display: block; - width: 100%; - outline: 0; - font-family: inherit; - resize: vertical; - background: $ui-base-color; - border: 1px solid var(--background-border-color); - border-radius: 4px; - padding: 10px 16px; - - &:invalid { - box-shadow: none; - } - - &:required:valid { - border-color: $valid-value-color; - } - - @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: lighten($error-red, 12%); - } - } - - .input.field_with_errors { - label { - color: lighten($error-red, 12%); - } - - input[type='text'], - input[type='number'], - input[type='email'], - input[type='password'], - input[type='datetime-local'], - textarea, - select { - border-color: lighten($error-red, 12%); - } - - .error { - display: block; - font-weight: 500; - color: lighten($error-red, 12%); - 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: $ui-button-background-color; - color: $ui-button-color; - 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-color: $ui-button-focus-background-color; - } - - &:disabled, - &:disabled:hover { - background-color: $ui-button-disabled-color; - } - - &.negative { - background: $ui-button-destructive-background-color; - - &:hover, - &:active, - &:focus { - background-color: $ui-button-destructive-focus-background-color; - } - } - } - - select { - appearance: none; - box-sizing: border-box; - font-size: 14px; - color: $primary-text-color; - display: block; - width: 100%; - outline: 0; - font-family: inherit; - resize: vertical; - background: $ui-base-color - url("data:image/svg+xml;utf8,") - no-repeat right 8px center / auto 14px; - border: 1px solid var(--background-border-color); - 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: $dark-text-color; - 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; - } -} - -.block-icon { - display: block; - margin: 0 auto; - margin-bottom: 10px; - font-size: 24px; -} - -.flash-message { - 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 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 color.change($gold-star, $alpha: 0.5); - background: color.change($gold-star, $alpha: 0.25); - color: $gold-star; - } - - &.alert { - border: 1px solid color.change($error-value-color, $alpha: 0.5); - background: color.change($error-value-color, $alpha: 0.1); - color: $error-value-color; - } - - &.hidden { - display: none; - } - - &.hidden-on-touch-devices { - @media screen and (pointer: coarse) { - display: none; - } - } - - a { - display: inline-block; - color: $darker-text-color; - text-decoration: none; - - &:hover { - color: $primary-text-color; - 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: $ui-base-color; - color: $primary-text-color; - font-size: 14px; - margin: 0; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: lighten($ui-base-color, 4%); - } - } - - 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: $darker-text-color; - 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: $highlight-text-color; - text-transform: uppercase; - text-decoration: none; - font-weight: 700; - - &:hover, - &:focus, - &:active { - color: lighten($highlight-text-color, 8%); - } - } -} - -.oauth-prompt, -.follow-prompt { - margin-bottom: 30px; - color: $darker-text-color; - - h2 { - font-size: 16px; - margin-bottom: 30px; - text-align: center; - } - - strong { - color: $secondary-text-color; - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } -} - -.oauth-prompt { - h3 { - color: $ui-secondary-color; - 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 $ui-base-color; - border-radius: 4px; - background: darken($ui-base-color, 4%); - 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: $simple-background-color; - padding: 4px; - margin-inline-end: 10px; - margin-bottom: 20px; - box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2); - display: inline-block; - - svg { - display: block; - margin: 0; - } -} - -.qr-alternative { - margin-bottom: 20px; - color: $secondary-text-color; - flex: 150px; - - samp { - display: block; - font-size: 14px; - } -} - -.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; - 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: $darker-text-color; - - div { - margin-bottom: 4px; - } -} - -.alternative-login { - margin-top: 20px; - margin-bottom: 20px; - - h4 { - font-size: 16px; - color: $primary-text-color; - text-align: center; - margin-bottom: 20px; - border: 0; - padding: 0; - } - - .button { - display: block; - } -} - -.scope-danger { - color: $warning-red; -} - -.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 { - background: darken($ui-base-color, 10%); - border: 1px solid darken($ui-base-color, 14%); - 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: $valid-value-color; - transition: none; - - button { - background: $valid-value-color; - 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: $ui-secondary-color; - border-bottom: 1px solid lighten($ui-base-color, 4%); - display: flex; - align-items: center; - - &__text { - flex: 1 1 auto; - - &__title { - font-weight: 500; - } - - &__type { - color: $darker-text-color; - overflow-wrap: anywhere; - } - } - - &__icon { - flex: 0 0 auto; - font-size: 18px; - width: 30px; - color: $valid-value-color; - 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; - color: $white; - - li { - flex: 0 0 auto; - position: relative; - } - - .separator { - height: 2px; - background: $ui-base-lighter-color; - flex: 1 1 auto; - - &.completed { - background: $highlight-text-color; - } - } - - .circle { - box-sizing: border-box; - position: relative; - width: 30px; - height: 30px; - border-radius: 50%; - border: 2px solid $ui-base-lighter-color; - 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: $secondary-text-color; - 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: $highlight-text-color; - - &::before { - content: ''; - width: 10px; - height: 10px; - border-radius: 50%; - background: $highlight-text-color; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - } - } - - .completed .circle { - border-color: $highlight-text-color; - background: $highlight-text-color; - } -} - -.app-form { - padding: 16px; - - &__avatar-input, - &__header-input { - display: block; - border-radius: 8px; - background: var(--surface-variant-background-color); - position: relative; - cursor: pointer; - - 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: $darker-text-color; - z-index: 3; - } - - &.selected .icon { - color: $primary-text-color; - transform: none; - inset-inline-start: auto; - inset-inline-end: 8px; - top: auto; - bottom: 8px; - } - - &.invalid img { - outline: 1px solid $error-value-color; - outline-offset: -1px; - } - - &.invalid::before { - display: block; - content: ''; - width: 100%; - height: 100%; - position: absolute; - 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 { - width: 80px; - height: 80px; - } - - &__header-input { - aspect-ratio: 580/193; - } - - &__toggle { - display: flex; - align-items: center; - gap: 16px; - color: $darker-text-color; - font-size: 14px; - line-height: 20px; - - .icon { - flex: 0 0 auto; - } - - .icon { - width: 24px; - height: 24px; - } - - &__label { - flex: 1 1 auto; - - strong { - color: $primary-text-color; - font-weight: 600; - } - - .hint { - display: block; - font-size: 14px; - color: $darker-text-color; - } - - .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(--background-border-color); - padding-inline-start: 16px; - } - } - - &__link { - display: flex; - gap: 16px; - padding: 8px 0; - align-items: center; - text-decoration: none; - color: $primary-text-color; - margin-bottom: 16px; - - &__text { - flex: 1 1 auto; - font-size: 14px; - line-height: 20px; - color: $darker-text-color; - - strong { - font-weight: 600; - display: block; - color: $primary-text-color; - } - - .icon { - vertical-align: -5px; - width: 20px; - height: 20px; - } - } - } -} diff --git a/app/javascript/flavours/glitch/styles/glitch_doodle.scss b/app/javascript/flavours/glitch/styles/glitch_doodle.scss deleted file mode 100644 index eb053c14db..0000000000 --- a/app/javascript/flavours/glitch/styles/glitch_doodle.scss +++ /dev/null @@ -1,86 +0,0 @@ -$doodle-background: #d9e1e8; - -.doodle-modal { - width: unset; -} - -.doodle-modal__container { - background: $doodle-background; - text-align: center; - line-height: 0; // remove weird gap under canvas - canvas { - border: 5px solid $doodle-background; - } -} - -.doodle-modal__action-bar { - .filler { - flex-grow: 1; - margin: 0; - padding: 0; - } - - .doodle-toolbar { - line-height: 1; - display: flex; - flex-direction: column; - flex-grow: 0; - justify-content: space-around; - - &.with-inputs { - label { - display: inline-block; - width: 70px; - text-align: end; - margin-inline-end: 2px; - } - - input[type='number'], - input[type='text'] { - width: 40px; - } - - span.val { - display: inline-block; - text-align: start; - width: 50px; - } - } - } - - .doodle-palette { - padding-inline-end: 0 !important; - border: 1px solid black; - line-height: 0.2rem; - flex-grow: 0; - background: white; - - button { - appearance: none; - width: 1rem; - height: 1rem; - margin: 0; - padding: 0; - text-align: center; - color: black; - text-shadow: 0 0 1px white; - cursor: pointer; - box-shadow: inset 0 0 1px rgba(white, 0.5); - border: 1px solid black; - outline-offset: -1px; - - &.foreground { - outline: 1px dashed white; - } - - &.background { - outline: 1px dashed red; - } - - &.foreground.background { - outline: 1px dashed red; - border-color: white; - } - } - } -} diff --git a/app/javascript/flavours/glitch/styles/glitch_local_settings.scss b/app/javascript/flavours/glitch/styles/glitch_local_settings.scss deleted file mode 100644 index 59f02cb67c..0000000000 --- a/app/javascript/flavours/glitch/styles/glitch_local_settings.scss +++ /dev/null @@ -1,174 +0,0 @@ -@use 'functions' as *; -@use 'variables' as *; - -.glitch.local-settings { - position: relative; - display: flex; - flex-direction: row; - background: $ui-secondary-color; - color: $inverted-text-color; - border-radius: 8px; - height: 80vh; - width: 80vw; - max-width: 740px; - max-height: 450px; - overflow: hidden; - - label, - legend { - display: block; - font-size: 14px; - } - - .boolean label, - .radio_buttons label { - position: relative; - padding-inline-start: 28px; - padding-top: 3px; - - input { - position: absolute; - inset-inline-start: 0; - top: 0; - } - } - - span.hint { - display: block; - color: $lighter-text-color; - } - - h1 { - font-size: 18px; - font-weight: 500; - line-height: 24px; - margin-bottom: 20px; - } - - h2 { - font-size: 15px; - font-weight: 500; - line-height: 20px; - margin-top: 20px; - margin-bottom: 10px; - } -} - -.glitch.local-settings__navigation__item { - display: flex; - gap: 5px; - align-items: center; - padding: 15px 20px; - color: inherit; - background: lighten($ui-secondary-color, 8%); - border: 0; - border-bottom: 1px $ui-secondary-color solid; - cursor: pointer; - text-decoration: none; - outline: none; - transition: background 0.3s; - box-sizing: border-box; - width: 100%; - text-align: start; - font-size: inherit; - - .text-icon-button { - color: inherit; - transition: unset; - unicode-bidi: embed; - } - - &:hover { - background: $ui-secondary-color; - } - - &.active { - background: $ui-highlight-color; - color: $primary-text-color; - } - - &.close, - &.close:hover { - background: $error-value-color; - color: $primary-text-color; - } -} - -.glitch.local-settings__navigation { - background: lighten($ui-secondary-color, 8%); - width: 212px; - font-size: 15px; - line-height: 20px; - overflow-y: auto; -} - -.glitch.local-settings__page { - display: block; - flex: auto; - padding: 15px 20px; - width: 360px; - overflow-y: auto; -} - -.glitch.local-settings__page__item { - margin-bottom: 2px; - - .hint a { - color: $lighter-text-color; - font-weight: 500; - text-decoration: underline; - - &:active, - &:focus, - &:hover { - text-decoration: none; - } - } -} - -.glitch.local-settings__page__item.string, -.glitch.local-settings__page__item.radio_buttons { - margin-top: 10px; - margin-bottom: 10px; -} - -@media screen and (width <= 630px) { - .glitch.local-settings__navigation { - width: 40px; - flex-shrink: 0; - } - - .glitch.local-settings__navigation__item { - padding: 10px; - - span:last-of-type { - display: none; - } - } -} - -.deprecated-settings-label { - white-space: nowrap; -} - -.deprecated-settings-info { - text-align: start; - - ul { - padding: 10px; - margin-inline-start: 12px; - list-style: disc inside; - } - - a { - color: $lighter-text-color; - font-weight: 500; - text-decoration: underline; - - &:active, - &:focus, - &:hover { - text-decoration: none; - } - } -} diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss deleted file mode 100644 index 9475b4c3c8..0000000000 --- a/app/javascript/flavours/glitch/styles/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* This is a compat file so that third-party themes do not have to immediately - update their implementation, as the previous `index.scss` has been renamed - to `application.scss`. */ - -@import 'application'; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light.scss b/app/javascript/flavours/glitch/styles/mastodon-light.scss index b530616a3c..494efdbbde 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light.scss @@ -1,4 +1,9 @@ -@use 'mastodon-light/variables'; @use 'mastodon-light/css_variables'; -@use 'application'; -@use 'mastodon-light/diff'; +@use 'mastodon/variables' with ( + $emojis-requiring-inversion: 'chains' +); +@use 'common'; + +html { + color-scheme: light; +} diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss index c01bf0048a..70745ec071 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss @@ -1,23 +1,214 @@ -@use 'sass:color'; -@use '../variables' as *; -@use 'variables' as *; -@use '../functions' as *; +@use '../mastodon/theme_utils' as utils; -body { - --dropdown-border-color: hsl(240deg, 25%, 88%); - --dropdown-background-color: #fff; - --modal-border-color: hsl(240deg, 25%, 88%); - --modal-background-color: var(--background-color); - --background-border-color: hsl(240deg, 25%, 88%); - --background-color: #fff; - --background-color-tint: rgba(255, 255, 255, 80%); - --background-filter: blur(10px); - --surface-variant-background-color: #f1ebfb; - --surface-border-color: #cac4d0; - --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)}; - --rich-text-container-color: rgba(255, 216, 231, 100%); - --rich-text-text-color: rgba(114, 47, 83, 100%); - --rich-text-decorations-color: rgba(255, 175, 212, 100%); - --input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)}; - --input-background-color: #{darken($ui-base-color, 10%)}; +:root { + --color-black: #000; + --color-grey-950: #181821; + --color-grey-800: #292938; + --color-grey-700: #444664; + --color-grey-600: #545778; + --color-grey-500: #696d91; + --color-grey-400: #8b8dac; + --color-grey-300: #b4b6cb; + --color-grey-200: #d8d9e3; + --color-grey-100: #f0f0f5; + --color-grey-50: #f0f1ff; + --color-white: #fff; + --color-indigo-600: #6147e6; + --color-indigo-400: #8886ff; + --color-indigo-300: #a5abfd; + --color-indigo-200: #c8cdfe; + --color-indigo-100: #e0e3ff; + --color-indigo-50: #f0f1ff; + --color-red-500: #ff637e; + --color-red-600: #ec003f; + --color-yellow-400: #ffb900; + --color-yellow-600: #e17100; + --color-green-400: #05df72; + --color-green-600: #00a63e; + + /* TEXT TOKENS */ + + --color-text-primary: var(--color-grey-950); + --color-text-secondary: var(--color-grey-600); + --color-text-tertiary: var(--color-grey-500); + --color-text-on-inverted: var(--color-white); + --color-text-brand: var(--color-indigo-600); + --color-text-brand-soft: color-mix( + in oklab, + var(--color-text-primary), + var(--color-text-brand) + ); + --color-text-on-brand-base: var(--color-white); + --color-text-error: var(--color-red-600); + --color-text-on-error-base: var(--color-white); + --color-text-warning: var(--color-yellow-600); + --color-text-on-warning-base: var(--color-white); + --color-text-success: var(--color-green-600); + --color-text-on-success-base: var(--color-white); + --color-text-disabled: var(--color-grey-300); + --color-text-on-disabled: var(--color-grey-200); + --color-text-bookmark-highlight: var(--color-text-error); + --color-text-favourite-highlight: var(--color-text-warning); + --color-text-on-media: var(--color-white); + --color-text-status-links: var(--color-text-brand); + + /* BACKGROUND TOKENS */ + + // Neutrals + --color-bg-primary: var(--color-white); + --overlay-strength-secondary: 5%; + --color-bg-secondary-base: var(--color-grey-600); + --color-bg-secondary: #{color-mix( + in oklab, + var(--color-bg-primary), + var(--color-bg-secondary-base) var(--overlay-strength-secondary) + )}; + --color-bg-secondary-solid: #{color-mix( + in srgb, + var(--color-bg-primary), + var(--color-bg-secondary-base) var(--overlay-strength-secondary) + )}; + --color-bg-tertiary: #{color-mix( + in oklab, + var(--color-bg-primary), + var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary)) + )}; + + // Utility + --color-bg-ambient: var(--color-bg-primary); + --color-bg-elevated: var(--color-bg-primary); + --color-bg-inverted: var(--color-grey-950); + --color-bg-media-base: var(--color-black); + --color-bg-media-strength: 65%; + --color-bg-media: #{utils.css-alpha( + var(--color-bg-media-base), + var(--color-bg-media-strength) + )}; + --color-bg-overlay: var(--color-bg-primary); + --color-bg-disabled: var(--color-grey-400); + + // Brand + --overlay-strength-brand: 8%; + --color-bg-brand-base: var(--color-indigo-600); + --color-bg-brand-base-hover: color-mix( + in oklab, + var(--color-bg-brand-base), + black var(--overlay-strength-brand) + ); + --color-bg-brand-soft: #{utils.css-alpha( + var(--color-bg-brand-base), + calc(var(--overlay-strength-brand) * 1.5) + )}; + --color-bg-brand-softer: #{utils.css-alpha( + var(--color-bg-brand-base), + var(--overlay-strength-brand) + )}; + + // Error + --overlay-strength-error: 12%; + --color-bg-error-base: var(--color-red-600); + --color-bg-error-base-hover: color-mix( + in oklab, + var(--color-bg-error-base), + black var(--overlay-strength-error) + ); + --color-bg-error-soft: #{utils.css-alpha( + var(--color-bg-error-base), + calc(var(--overlay-strength-error) * 1.5) + )}; + --color-bg-error-softer: #{utils.css-alpha( + var(--color-bg-error-base), + var(--overlay-strength-error) + )}; + + // Warning + --overlay-strength-warning: 10%; + --color-bg-warning-base: var(--color-yellow-600); + --color-bg-warning-base-hover: color-mix( + in oklab, + var(--color-bg-warning-base), + black var(--overlay-strength-warning) + ); + --color-bg-warning-soft: #{utils.css-alpha( + var(--color-bg-warning-base), + calc(var(--overlay-strength-warning) * 1.5) + )}; + --color-bg-warning-softer: #{utils.css-alpha( + var(--color-bg-warning-base), + var(--overlay-strength-warning) + )}; + + // Success + --overlay-strength-success: 15%; + --color-bg-success-base: var(--color-green-600); + --color-bg-success-base-hover: color-mix( + in oklab, + var(--color-bg-success-base), + black var(--overlay-strength-success) + ); + --color-bg-success-soft: #{utils.css-alpha( + var(--color-bg-success-base), + calc(var(--overlay-strength-success) * 1.5) + )}; + --color-bg-success-softer: #{utils.css-alpha( + var(--color-bg-success-base), + var(--overlay-strength-success) + )}; + + /* BORDER TOKENS */ + + --border-strength-primary: 15%; + --color-border-primary: color-mix( + in oklab, + var(--color-bg-primary), + var(--color-grey-950) var(--border-strength-primary) + ); + --color-border-media: rgb(252 248 255 / 15%); + --color-border-on-bg-secondary: var(--color-grey-200); + --color-border-on-bg-brand-softer: var(--color-indigo-200); + --color-border-on-bg-error-softer: #{utils.css-alpha( + var(--color-text-error), + 50% + )}; + --color-border-on-bg-warning-softer: #{utils.css-alpha( + var(--color-text-warning), + 50% + )}; + --color-border-on-bg-success-softer: #{utils.css-alpha( + var(--color-text-success), + 50% + )}; + --color-border-on-bg-inverted: var(--color-border-primary); + + /* SHADOW TOKENS */ + + --shadow-strength-primary: 30%; + --color-shadow-primary: #{utils.css-alpha( + var(--color-black), + var(--shadow-strength-primary) + )}; + --dropdown-shadow: + 0 20px 25px -5px var(--color-shadow-primary), + 0 8px 10px -6px var(--color-shadow-primary); + --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary)); + + /* GRAPHS/CHARTS TOKENS */ + + --color-graph-primary-stroke: var(--color-text-brand); + --color-graph-primary-fill: var(--color-bg-brand-softer); + --color-graph-warning-stroke: var(--color-text-warning); + --color-graph-warning-fill: var(--color-bg-warning-softer); + --color-graph-disabled-stroke: var(--color-text-disabled); + --color-graph-disabled-fill: var(--color-bg-disabled); + + /* LEGACY TOKENS */ + + --rich-text-container-color: rgb(255 216 231 / 100%); + --rich-text-text-color: rgb(114 47 83 / 100%); + --rich-text-decorations-color: rgb(255 175 212 / 100%); + + /* MISCELLANEOUS */ + + --outline-focus-default: 2px solid var(--color-text-brand); + --avatar-border-radius: 8px; } diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss deleted file mode 100644 index 5807723fa2..0000000000 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ /dev/null @@ -1,591 +0,0 @@ -// Notes! -// Sass color functions, "darken" and "lighten" are automatically replaced. -@use 'sass:color'; -@use '../functions' as *; -@use '../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); - } -} - -// Glitch-soc-specific changes - -.pillbar-button { - background: $ui-secondary-color; - - &:not([disabled]) { - &:hover, - &:focus { - background: darken($ui-secondary-color, 10%); - } - - &.active { - background-color: darken($ui-highlight-color, 2%); - - &:hover, - &:focus { - background: lighten($ui-highlight-color, 10%); - } - } - } -} - -.glitch.local-settings { - background: $ui-base-color; - border: 1px solid lighten($ui-base-color, 8%); -} - -.glitch.local-settings__navigation { - background: darken($ui-base-color, 8%); -} - -.glitch.local-settings__navigation__item { - background: darken($ui-base-color, 8%); - border-bottom: 1px lighten($ui-base-color, 8%) solid; - - &:hover { - background: $ui-base-color; - } - - &.active { - background: $ui-highlight-color; - color: $white; - } - - &.close, - &.close:hover { - background: $error-value-color; - color: $primary-text-color; - } -} - -.drawer__inner__mastodon { - background: $white - url('data:image/svg+xml;utf8,') - no-repeat bottom / 100% auto !important; - - .mastodon { - filter: contrast(75%) brightness(75%) !important; - } -} - -.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/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss deleted file mode 100644 index d8b48f595e..0000000000 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use 'sass:color'; - -@use '../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 '../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/flavours/glitch/styles_new/mastodon/_mixins.scss b/app/javascript/flavours/glitch/styles/mastodon/_mixins.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/_mixins.scss rename to app/javascript/flavours/glitch/styles/mastodon/_mixins.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/_theme_utils.scss b/app/javascript/flavours/glitch/styles/mastodon/_theme_utils.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/_theme_utils.scss rename to app/javascript/flavours/glitch/styles/mastodon/_theme_utils.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/_variables.scss b/app/javascript/flavours/glitch/styles/mastodon/_variables.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/_variables.scss rename to app/javascript/flavours/glitch/styles/mastodon/_variables.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/about.scss b/app/javascript/flavours/glitch/styles/mastodon/about.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/about.scss rename to app/javascript/flavours/glitch/styles/mastodon/about.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/accessibility.scss b/app/javascript/flavours/glitch/styles/mastodon/accessibility.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/accessibility.scss rename to app/javascript/flavours/glitch/styles/mastodon/accessibility.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/accounts.scss b/app/javascript/flavours/glitch/styles/mastodon/accounts.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/accounts.scss rename to app/javascript/flavours/glitch/styles/mastodon/accounts.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/admin.scss b/app/javascript/flavours/glitch/styles/mastodon/admin.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/admin.scss rename to app/javascript/flavours/glitch/styles/mastodon/admin.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/annual_reports.scss b/app/javascript/flavours/glitch/styles/mastodon/annual_reports.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/annual_reports.scss rename to app/javascript/flavours/glitch/styles/mastodon/annual_reports.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/basics.scss b/app/javascript/flavours/glitch/styles/mastodon/basics.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/basics.scss rename to app/javascript/flavours/glitch/styles/mastodon/basics.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/branding.scss b/app/javascript/flavours/glitch/styles/mastodon/branding.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/branding.scss rename to app/javascript/flavours/glitch/styles/mastodon/branding.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/components.scss rename to app/javascript/flavours/glitch/styles/mastodon/components.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/containers.scss b/app/javascript/flavours/glitch/styles/mastodon/containers.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/containers.scss rename to app/javascript/flavours/glitch/styles/mastodon/containers.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/css_variables.scss b/app/javascript/flavours/glitch/styles/mastodon/css_variables.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/css_variables.scss rename to app/javascript/flavours/glitch/styles/mastodon/css_variables.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/dashboard.scss b/app/javascript/flavours/glitch/styles/mastodon/dashboard.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/dashboard.scss rename to app/javascript/flavours/glitch/styles/mastodon/dashboard.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/emoji_picker.scss b/app/javascript/flavours/glitch/styles/mastodon/emoji_picker.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/emoji_picker.scss rename to app/javascript/flavours/glitch/styles/mastodon/emoji_picker.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/forms.scss b/app/javascript/flavours/glitch/styles/mastodon/forms.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/forms.scss rename to app/javascript/flavours/glitch/styles/mastodon/forms.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/glitch/doodle.scss b/app/javascript/flavours/glitch/styles/mastodon/glitch/doodle.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/glitch/doodle.scss rename to app/javascript/flavours/glitch/styles/mastodon/glitch/doodle.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/glitch/local_settings.scss b/app/javascript/flavours/glitch/styles/mastodon/glitch/local_settings.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/glitch/local_settings.scss rename to app/javascript/flavours/glitch/styles/mastodon/glitch/local_settings.scss diff --git a/app/javascript/flavours/glitch/styles/lists.scss b/app/javascript/flavours/glitch/styles/mastodon/lists.scss similarity index 100% rename from app/javascript/flavours/glitch/styles/lists.scss rename to app/javascript/flavours/glitch/styles/mastodon/lists.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/modal.scss b/app/javascript/flavours/glitch/styles/mastodon/modal.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/modal.scss rename to app/javascript/flavours/glitch/styles/mastodon/modal.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/polls.scss b/app/javascript/flavours/glitch/styles/mastodon/polls.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/polls.scss rename to app/javascript/flavours/glitch/styles/mastodon/polls.scss diff --git a/app/javascript/flavours/glitch/styles/mastodon/reset.scss b/app/javascript/flavours/glitch/styles/mastodon/reset.scss new file mode 100644 index 0000000000..456405d2b1 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/mastodon/reset.scss @@ -0,0 +1,139 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +html:has(body.custom-scrollbars) { + scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary); +} diff --git a/app/javascript/flavours/glitch/styles/rich_text.scss b/app/javascript/flavours/glitch/styles/mastodon/rich_text.scss similarity index 100% rename from app/javascript/flavours/glitch/styles/rich_text.scss rename to app/javascript/flavours/glitch/styles/mastodon/rich_text.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/rtl.scss b/app/javascript/flavours/glitch/styles/mastodon/rtl.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/rtl.scss rename to app/javascript/flavours/glitch/styles/mastodon/rtl.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/tables.scss b/app/javascript/flavours/glitch/styles/mastodon/tables.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/tables.scss rename to app/javascript/flavours/glitch/styles/mastodon/tables.scss diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/widgets.scss b/app/javascript/flavours/glitch/styles/mastodon/widgets.scss similarity index 100% rename from app/javascript/flavours/glitch/styles_new/mastodon/widgets.scss rename to app/javascript/flavours/glitch/styles/mastodon/widgets.scss diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss deleted file mode 100644 index 7d060a2681..0000000000 --- a/app/javascript/flavours/glitch/styles/modal.scss +++ /dev/null @@ -1,40 +0,0 @@ -@use 'variables' as *; -@use 'functions' as *; - -.modal-layout { - background: darken($ui-base-color, 4%) - url('data:image/svg+xml;utf8,') - repeat-x bottom fixed; - 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; - } -} diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss deleted file mode 100644 index e8f2f5c394..0000000000 --- a/app/javascript/flavours/glitch/styles/polls.scss +++ /dev/null @@ -1,233 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; -@use 'functions' as *; - -.poll { - margin-top: 16px; - font-size: 14px; - - li { - margin-bottom: 10px; - position: relative; - } - - &__chart { - border-radius: 4px; - display: block; - background: darken($ui-primary-color, 5%); - height: 5px; - min-width: 1%; - - &.leading { - background: $ui-highlight-color; - } - } - - 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: darken($ui-primary-color, 5%); - } - - &::-webkit-progress-value { - border-radius: 4px; - background: darken($ui-primary-color, 5%); - } - } - - &__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: $secondary-text-color; - outline: 0; - font-family: inherit; - background: $ui-base-color; - border: 1px solid $darker-text-color; - border-radius: 4px; - padding: 8px 12px; - - &:focus { - border-color: $ui-highlight-color; - } - - @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 $ui-primary-color; - box-sizing: border-box; - width: 17px; - height: 17px; - border-radius: 50%; - flex: 0 0 auto; - - &.checkbox { - border-radius: 4px; - } - - &:active, - &:focus, - &:hover { - border-color: lighten($valid-value-color, 15%); - border-width: 4px; - } - - &.active { - background-color: $valid-value-color; - border-color: $valid-value-color; - } - - &::-moz-focus-inner { - outline: 0 !important; - border: 0; - } - - &:focus, - &:active { - outline: 0 !important; - } - - &.disabled { - border-color: $dark-text-color; - - &.active { - background: $dark-text-color; - } - - &:active, - &:focus, - &:hover { - border-color: $dark-text-color; - border-width: 1px; - } - } - } - - &__option.editable &__input, - &__option.disabled &__input { - &:active, - &:focus, - &:hover { - border-color: $ui-primary-color; - 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: $dark-text-color; - } - - &__link { - display: inline; - background: transparent; - padding: 0; - margin: 0; - border: 0; - color: $dark-text-color; - text-decoration: underline; - font-size: inherit; - - &:hover { - text-decoration: none; - } - - &:active, - &:focus { - background-color: color.change($dark-text-color, $alpha: 0.1); - } - } - - .button { - height: 36px; - padding: 0 16px; - margin-inline-end: 10px; - font-size: 14px; - } -} - -.muted .poll { - color: $dark-text-color; - - &__chart { - background: rgba(darken($ui-primary-color, 14%), 0.7); - - &.leading { - background: color.change($ui-highlight-color, $alpha: 0.5); - } - } -} diff --git a/app/javascript/flavours/glitch/styles/reset.scss b/app/javascript/flavours/glitch/styles/reset.scss deleted file mode 100644 index 2dce637a06..0000000000 --- a/app/javascript/flavours/glitch/styles/reset.scss +++ /dev/null @@ -1,86 +0,0 @@ -@use 'variables' as *; - -/* 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; -} - -@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/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss deleted file mode 100644 index 77ec7bbb30..0000000000 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ /dev/null @@ -1,100 +0,0 @@ -@use 'functions' as *; -@use 'variables' as *; - -body.rtl { - direction: rtl; - - .reactions-bar { - direction: rtl; - } - - .drawer__inner__mastodon > img { - transform: scaleX(-1); - } - - .boost-modal__status-time { - float: left; - } - - .compose-form .autosuggest-textarea__textarea { - padding-right: 10px; - padding-left: 10px + 22px; - } - - .columns-area { - direction: rtl; - } - - .react-swipeable-view-container > * { - direction: rtl; - } - - .account__avatar-wrapper { - float: right; - } - - .column-header__setting-arrows { - float: left; - } - - .setting-meta__label { - float: left; - } - - .status__info .status__display-name { - padding-left: 25px; - padding-right: 0; - } - - .account__header__tabs__buttons > .icon-button { - margin-right: 0; - margin-left: 8px; - } - - .status__relative-time, - .activity-stream .status.light .status__header .status__meta { - float: left; - text-align: left; - } - - .status__action-bar-button { - float: right; - } - - .status__action-bar-dropdown { - float: right; - } - - .detailed-status__display-name .display-name { - text-align: right; - } - - .detailed-status__display-avatar { - float: right; - } - - .admin-wrapper { - direction: rtl; - } - - .react-swipeable-view-container > * { - direction: rtl; - } - - .column-back-button__icon { - 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 { - float: left; - } - } -} diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss deleted file mode 100644 index e82f2b551c..0000000000 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ /dev/null @@ -1,391 +0,0 @@ -@use 'variables' as *; -@use 'functions' 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(--background-border-color); - text-align: start; - background: var(--background-color); - - &.critical { - font-weight: 700; - color: $gold-star; - } - } - - & > 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(--background-color); - } - - & > tbody > tr:last-child > td, - & > tbody > tr:last-child > th { - border-bottom: 0; - } - - a { - color: $darker-text-color; - text-decoration: none; - - &:hover { - color: $highlight-text-color; - } - } - - 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(--background-border-color); - color: $secondary-text-color; - } - - & > tbody > tr > th { - color: $darker-text-color; - font-weight: 600; - } - } - - &.batch-table { - & > thead > tr > th { - background: var(--background-color); - border-top: 1px solid var(--background-border-color); - border-bottom: 1px solid var(--background-border-color); - - &:first-child { - border-radius: 4px 0 0; - border-inline-start: 1px solid var(--background-border-color); - } - - &:last-child { - border-radius: 0 4px 0 0; - border-inline-end: 1px solid var(--background-border-color); - } - } - } - - &--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: $darker-text-color; - font-weight: 500; - white-space: nowrap; - - &:hover { - color: $highlight-text-color; - } - - &: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(--background-border-color); - background: var(--background-color); - 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(--background-color); - height: 47px; - align-items: center; - justify-content: center; - border: 1px solid var(--background-border-color); - border-top: 0; - color: $secondary-text-color; - 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: $highlight-text-color; - border-radius: 4px; - font-weight: 700; - padding: 8px; - - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 8%); - } - } - } - - &__form { - padding: 16px; - border: 1px solid var(--background-border-color); - border-top: 0; - background: var(--background-color); - - .fields-row { - padding-top: 0; - margin-bottom: 0; - } - } - - &__row { - border: 1px solid var(--background-border-color); - border-top: 0; - background: var(--background-color); - - @media screen and (max-width: $no-gap-breakpoint) { - .optional &:first-child { - border-top: 1px solid var(--background-border-color); - } - } - - &: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: $darker-text-color; - 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; - } - - .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; - } - } -} - -.one-liner { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss deleted file mode 100644 index f3ddf341d2..0000000000 --- a/app/javascript/flavours/glitch/styles/widgets.scss +++ /dev/null @@ -1,179 +0,0 @@ -@use 'sass:color'; -@use 'variables' as *; -@use 'functions' 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(--background-border-color); - border-radius: 4px; - padding: 15px; - text-decoration: none; - color: inherit; - box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2); - } - - & > a { - &:hover, - &:active, - &:focus { - background: $ui-base-color; - } - } - - &.active > a { - background: $ui-highlight-color; - cursor: default; - } - - &.disabled > div { - opacity: 0.5; - cursor: default; - } - - h4 { - flex: 1 1 auto; - font-size: 18px; - font-weight: 700; - color: $primary-text-color; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - small { - display: block; - font-weight: 400; - font-size: 15px; - margin-top: 8px; - color: $darker-text-color; - } - } - - &.active h4 { - &, - small, - .trends__item__current { - color: $primary-text-color; - } - } - - .avatar-stack { - flex: 0 0 auto; - width: (36px + 4px) * 3; - } - - &.active .avatar-stack .account__avatar { - border-color: $ui-highlight-color; - } - - .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: $darker-text-color; - font-weight: 700; - padding: 10px; - - &:first-child { - text-align: start; - } - } - - tbody td { - padding: 15px 0; - vertical-align: middle; - border-bottom: 1px solid lighten($ui-base-color, 8%); - } - - tbody tr:last-child td { - border-bottom: 0; - } - - &__count { - width: 120px; - text-align: center; - font-size: 15px; - font-weight: 500; - color: $primary-text-color; - - small { - display: block; - color: $darker-text-color; - font-weight: 400; - font-size: 14px; - } - } - - tbody td.accounts-table__extra { - width: 120px; - text-align: end; - color: $darker-text-color; - padding-inline-end: 16px; - - a { - text-decoration: none; - color: inherit; - - &:focus, - &:hover, - &:active { - color: $highlight-text-color; - } - } - } - - &__comment { - width: 50%; - vertical-align: initial !important; - } - - tbody td.accounts-table__interrelationships { - width: 21px; - padding-inline-end: 16px; - } - - .icon { - &.active { - color: $highlight-text-color; - } - - &.passive { - color: $passive-text-color; - } - - &.active.passive { - color: $active-passive-text-color; - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - tbody td.optional { - display: none; - } - } -} diff --git a/app/javascript/flavours/glitch/styles_new/application.scss b/app/javascript/flavours/glitch/styles_new/application.scss deleted file mode 100644 index e16e5368e7..0000000000 --- a/app/javascript/flavours/glitch/styles_new/application.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'mastodon/css_variables'; -@use 'mastodon/variables'; -@use 'common'; - -html { - color-scheme: dark; -} diff --git a/app/javascript/flavours/glitch/styles_new/contrast.scss b/app/javascript/flavours/glitch/styles_new/contrast.scss deleted file mode 100644 index af73c88fef..0000000000 --- a/app/javascript/flavours/glitch/styles_new/contrast.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'mastodon/css_variables'; -@use 'mastodon/variables'; -@use 'common'; -@use 'contrast/diff'; - -html { - color-scheme: dark; -} diff --git a/app/javascript/flavours/glitch/styles_new/contrast/diff.scss b/app/javascript/flavours/glitch/styles_new/contrast/diff.scss deleted file mode 100644 index f809c7cdc3..0000000000 --- a/app/javascript/flavours/glitch/styles_new/contrast/diff.scss +++ /dev/null @@ -1,54 +0,0 @@ -:root { - /* TEXT TOKENS */ - - --color-text-primary: var(--color-grey-50); - --color-text-secondary: var(--color-grey-300); - --color-text-tertiary: var(--color-grey-400); - --color-text-brand: var(--color-indigo-300); - --color-text-status-links: var(--color-text-brand); - - /* BORDER TOKENS */ - - --border-strength-primary: 18%; -} - -.status__content a, -.reply-indicator__content a, -.edit-indicator__content a, -.link-footer a, -.status__content__read-more-button, -.status__content__translate-button { - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - - &.mention { - text-decoration: none; - - span { - text-decoration: underline; - } - - &:hover, - &:focus, - &:active { - span { - text-decoration: none; - } - } - } -} - -.link-button:disabled { - cursor: not-allowed; - - &:hover, - &:focus, - &:active { - text-decoration: none !important; - } -} diff --git a/app/javascript/flavours/glitch/styles_new/mastodon-light.scss b/app/javascript/flavours/glitch/styles_new/mastodon-light.scss deleted file mode 100644 index 494efdbbde..0000000000 --- a/app/javascript/flavours/glitch/styles_new/mastodon-light.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'mastodon-light/css_variables'; -@use 'mastodon/variables' with ( - $emojis-requiring-inversion: 'chains' -); -@use 'common'; - -html { - color-scheme: light; -} diff --git a/app/javascript/flavours/glitch/styles_new/mastodon-light/css_variables.scss b/app/javascript/flavours/glitch/styles_new/mastodon-light/css_variables.scss deleted file mode 100644 index 70745ec071..0000000000 --- a/app/javascript/flavours/glitch/styles_new/mastodon-light/css_variables.scss +++ /dev/null @@ -1,214 +0,0 @@ -@use '../mastodon/theme_utils' as utils; - -:root { - --color-black: #000; - --color-grey-950: #181821; - --color-grey-800: #292938; - --color-grey-700: #444664; - --color-grey-600: #545778; - --color-grey-500: #696d91; - --color-grey-400: #8b8dac; - --color-grey-300: #b4b6cb; - --color-grey-200: #d8d9e3; - --color-grey-100: #f0f0f5; - --color-grey-50: #f0f1ff; - --color-white: #fff; - --color-indigo-600: #6147e6; - --color-indigo-400: #8886ff; - --color-indigo-300: #a5abfd; - --color-indigo-200: #c8cdfe; - --color-indigo-100: #e0e3ff; - --color-indigo-50: #f0f1ff; - --color-red-500: #ff637e; - --color-red-600: #ec003f; - --color-yellow-400: #ffb900; - --color-yellow-600: #e17100; - --color-green-400: #05df72; - --color-green-600: #00a63e; - - /* TEXT TOKENS */ - - --color-text-primary: var(--color-grey-950); - --color-text-secondary: var(--color-grey-600); - --color-text-tertiary: var(--color-grey-500); - --color-text-on-inverted: var(--color-white); - --color-text-brand: var(--color-indigo-600); - --color-text-brand-soft: color-mix( - in oklab, - var(--color-text-primary), - var(--color-text-brand) - ); - --color-text-on-brand-base: var(--color-white); - --color-text-error: var(--color-red-600); - --color-text-on-error-base: var(--color-white); - --color-text-warning: var(--color-yellow-600); - --color-text-on-warning-base: var(--color-white); - --color-text-success: var(--color-green-600); - --color-text-on-success-base: var(--color-white); - --color-text-disabled: var(--color-grey-300); - --color-text-on-disabled: var(--color-grey-200); - --color-text-bookmark-highlight: var(--color-text-error); - --color-text-favourite-highlight: var(--color-text-warning); - --color-text-on-media: var(--color-white); - --color-text-status-links: var(--color-text-brand); - - /* BACKGROUND TOKENS */ - - // Neutrals - --color-bg-primary: var(--color-white); - --overlay-strength-secondary: 5%; - --color-bg-secondary-base: var(--color-grey-600); - --color-bg-secondary: #{color-mix( - in oklab, - var(--color-bg-primary), - var(--color-bg-secondary-base) var(--overlay-strength-secondary) - )}; - --color-bg-secondary-solid: #{color-mix( - in srgb, - var(--color-bg-primary), - var(--color-bg-secondary-base) var(--overlay-strength-secondary) - )}; - --color-bg-tertiary: #{color-mix( - in oklab, - var(--color-bg-primary), - var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary)) - )}; - - // Utility - --color-bg-ambient: var(--color-bg-primary); - --color-bg-elevated: var(--color-bg-primary); - --color-bg-inverted: var(--color-grey-950); - --color-bg-media-base: var(--color-black); - --color-bg-media-strength: 65%; - --color-bg-media: #{utils.css-alpha( - var(--color-bg-media-base), - var(--color-bg-media-strength) - )}; - --color-bg-overlay: var(--color-bg-primary); - --color-bg-disabled: var(--color-grey-400); - - // Brand - --overlay-strength-brand: 8%; - --color-bg-brand-base: var(--color-indigo-600); - --color-bg-brand-base-hover: color-mix( - in oklab, - var(--color-bg-brand-base), - black var(--overlay-strength-brand) - ); - --color-bg-brand-soft: #{utils.css-alpha( - var(--color-bg-brand-base), - calc(var(--overlay-strength-brand) * 1.5) - )}; - --color-bg-brand-softer: #{utils.css-alpha( - var(--color-bg-brand-base), - var(--overlay-strength-brand) - )}; - - // Error - --overlay-strength-error: 12%; - --color-bg-error-base: var(--color-red-600); - --color-bg-error-base-hover: color-mix( - in oklab, - var(--color-bg-error-base), - black var(--overlay-strength-error) - ); - --color-bg-error-soft: #{utils.css-alpha( - var(--color-bg-error-base), - calc(var(--overlay-strength-error) * 1.5) - )}; - --color-bg-error-softer: #{utils.css-alpha( - var(--color-bg-error-base), - var(--overlay-strength-error) - )}; - - // Warning - --overlay-strength-warning: 10%; - --color-bg-warning-base: var(--color-yellow-600); - --color-bg-warning-base-hover: color-mix( - in oklab, - var(--color-bg-warning-base), - black var(--overlay-strength-warning) - ); - --color-bg-warning-soft: #{utils.css-alpha( - var(--color-bg-warning-base), - calc(var(--overlay-strength-warning) * 1.5) - )}; - --color-bg-warning-softer: #{utils.css-alpha( - var(--color-bg-warning-base), - var(--overlay-strength-warning) - )}; - - // Success - --overlay-strength-success: 15%; - --color-bg-success-base: var(--color-green-600); - --color-bg-success-base-hover: color-mix( - in oklab, - var(--color-bg-success-base), - black var(--overlay-strength-success) - ); - --color-bg-success-soft: #{utils.css-alpha( - var(--color-bg-success-base), - calc(var(--overlay-strength-success) * 1.5) - )}; - --color-bg-success-softer: #{utils.css-alpha( - var(--color-bg-success-base), - var(--overlay-strength-success) - )}; - - /* BORDER TOKENS */ - - --border-strength-primary: 15%; - --color-border-primary: color-mix( - in oklab, - var(--color-bg-primary), - var(--color-grey-950) var(--border-strength-primary) - ); - --color-border-media: rgb(252 248 255 / 15%); - --color-border-on-bg-secondary: var(--color-grey-200); - --color-border-on-bg-brand-softer: var(--color-indigo-200); - --color-border-on-bg-error-softer: #{utils.css-alpha( - var(--color-text-error), - 50% - )}; - --color-border-on-bg-warning-softer: #{utils.css-alpha( - var(--color-text-warning), - 50% - )}; - --color-border-on-bg-success-softer: #{utils.css-alpha( - var(--color-text-success), - 50% - )}; - --color-border-on-bg-inverted: var(--color-border-primary); - - /* SHADOW TOKENS */ - - --shadow-strength-primary: 30%; - --color-shadow-primary: #{utils.css-alpha( - var(--color-black), - var(--shadow-strength-primary) - )}; - --dropdown-shadow: - 0 20px 25px -5px var(--color-shadow-primary), - 0 8px 10px -6px var(--color-shadow-primary); - --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary)); - - /* GRAPHS/CHARTS TOKENS */ - - --color-graph-primary-stroke: var(--color-text-brand); - --color-graph-primary-fill: var(--color-bg-brand-softer); - --color-graph-warning-stroke: var(--color-text-warning); - --color-graph-warning-fill: var(--color-bg-warning-softer); - --color-graph-disabled-stroke: var(--color-text-disabled); - --color-graph-disabled-fill: var(--color-bg-disabled); - - /* LEGACY TOKENS */ - - --rich-text-container-color: rgb(255 216 231 / 100%); - --rich-text-text-color: rgb(114 47 83 / 100%); - --rich-text-decorations-color: rgb(255 175 212 / 100%); - - /* MISCELLANEOUS */ - - --outline-focus-default: 2px solid var(--color-text-brand); - --avatar-border-radius: 8px; -} diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/lists.scss b/app/javascript/flavours/glitch/styles_new/mastodon/lists.scss deleted file mode 100644 index 6019cd8002..0000000000 --- a/app/javascript/flavours/glitch/styles_new/mastodon/lists.scss +++ /dev/null @@ -1,19 +0,0 @@ -.no-list { - list-style: none; - - li { - display: inline-block; - margin: 0 5px; - } -} - -.recovery-codes { - list-style: none; - margin: 0 auto; - - li { - font-size: 125%; - line-height: 1.5; - letter-spacing: 1px; - } -} diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/reset.scss b/app/javascript/flavours/glitch/styles_new/mastodon/reset.scss deleted file mode 100644 index 3644b94cdf..0000000000 --- a/app/javascript/flavours/glitch/styles_new/mastodon/reset.scss +++ /dev/null @@ -1,58 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -html:has(body.custom-scrollbars) { - scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary); -} diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/rich_text.scss b/app/javascript/flavours/glitch/styles_new/mastodon/rich_text.scss deleted file mode 100644 index 25342b560a..0000000000 --- a/app/javascript/flavours/glitch/styles_new/mastodon/rich_text.scss +++ /dev/null @@ -1,151 +0,0 @@ -.status__content__text, -.e-content, -.edit-indicator__content, -.reply-indicator__content { - code { - background: var(--rich-text-container-color); - padding: 4px; - border-radius: 4px; - color: var(--rich-text-text-color); - font-size: 0.85em; - } - - pre { - background: var(--rich-text-container-color); - padding: 8px; - border-radius: 4px; - color: var(--rich-text-text-color); - - code { - padding: 0; - background: transparent; - } - } - - pre, - blockquote { - margin-bottom: 22px; - white-space: pre-wrap; - unicode-bidi: plaintext; - - &:last-child { - margin-bottom: 0; - } - } - - blockquote { - padding-inline-start: 32px; - color: var(--rich-text-text-color); - white-space: normal; - position: relative; - - &::before { - display: block; - content: ''; - width: 24px; - height: 20px; - mask-image: url('@/images/quote.svg'); - background-color: var(--rich-text-decorations-color); - position: absolute; - inset-inline-start: 0; - top: 0; - } - - blockquote { - margin-top: 4px; - border-inline-start: 3px solid var(--rich-text-decorations-color); - padding-inline-start: 16px; - - &::before { - display: none; - } - } - - p:last-of-type { - margin-bottom: 0; - } - } - - & > ul, - & > ol { - margin-bottom: 22px; - - &:last-child { - margin-bottom: 0; - } - } - - h1, - h2, - h3, - h4, - h5 { - margin-top: 20px; - margin-bottom: 20px; - } - - h1, - h2 { - font-weight: 700; - font-size: 1.2em; - } - - h2 { - font-size: 1.1em; - } - - h3, - h4, - h5 { - font-weight: 500; - } - - b, - strong { - font-weight: 700; - } - - em, - i { - font-style: italic; - } - - sub { - font-size: smaller; - vertical-align: sub; - } - - sup { - font-size: smaller; - vertical-align: super; - } - - 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/skins/glitch/contrast_new/common.scss b/app/javascript/skins/glitch/contrast_new/common.scss deleted file mode 100644 index 7389e70a18..0000000000 --- a/app/javascript/skins/glitch/contrast_new/common.scss +++ /dev/null @@ -1 +0,0 @@ -@use '@/flavours/glitch/styles_new/contrast'; diff --git a/app/javascript/skins/glitch/contrast_new/names.yml b/app/javascript/skins/glitch/contrast_new/names.yml deleted file mode 100644 index 061e1d5c7f..0000000000 --- a/app/javascript/skins/glitch/contrast_new/names.yml +++ /dev/null @@ -1,4 +0,0 @@ -en: - skins: - glitch: - contrast_new: Experimental High contrast diff --git a/app/javascript/skins/glitch/default_new/common.scss b/app/javascript/skins/glitch/default_new/common.scss deleted file mode 100644 index 187e12c0b6..0000000000 --- a/app/javascript/skins/glitch/default_new/common.scss +++ /dev/null @@ -1 +0,0 @@ -@use '@/flavours/glitch/styles_new/application'; diff --git a/app/javascript/skins/glitch/default_new/names.yml b/app/javascript/skins/glitch/default_new/names.yml deleted file mode 100644 index e947dbdddf..0000000000 --- a/app/javascript/skins/glitch/default_new/names.yml +++ /dev/null @@ -1,4 +0,0 @@ -en: - skins: - glitch: - default_new: Experimental Mastodon (default) diff --git a/app/javascript/skins/glitch/mastodon-light_new/common.scss b/app/javascript/skins/glitch/mastodon-light_new/common.scss deleted file mode 100644 index 73abfe2b95..0000000000 --- a/app/javascript/skins/glitch/mastodon-light_new/common.scss +++ /dev/null @@ -1 +0,0 @@ -@use '@/flavours/glitch/styles_new/mastodon-light'; diff --git a/app/javascript/skins/glitch/mastodon-light_new/names.yml b/app/javascript/skins/glitch/mastodon-light_new/names.yml deleted file mode 100644 index cd29903332..0000000000 --- a/app/javascript/skins/glitch/mastodon-light_new/names.yml +++ /dev/null @@ -1,4 +0,0 @@ -en: - skins: - glitch: - mastodon-light_new: Experimental Mastodon (light)