diff --git a/.prettierignore b/.prettierignore
index da7e1dcd6a..4d6ba882c9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -96,6 +96,7 @@ AUTHORS.md
# Ignore glitch-soc vendored CSS reset
app/javascript/flavours/glitch/styles/reset.scss
+app/javascript/flavours/glitch/styles_new/mastodon/reset.scss
# Ignore win95 theme
app/javascript/styles/win95.scss
\ No newline at end of file
diff --git a/app/javascript/flavours/glitch/styles_new/application.scss b/app/javascript/flavours/glitch/styles_new/application.scss
new file mode 100644
index 0000000000..e16e5368e7
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/application.scss
@@ -0,0 +1,7 @@
+@use 'mastodon/css_variables';
+@use 'mastodon/variables';
+@use 'common';
+
+html {
+ color-scheme: dark;
+}
diff --git a/app/javascript/flavours/glitch/styles_new/common.scss b/app/javascript/flavours/glitch/styles_new/common.scss
new file mode 100644
index 0000000000..b08803c1a5
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/common.scss
@@ -0,0 +1,26 @@
+@use 'mastodon/mixins';
+@use '@/styles/fonts/roboto';
+@use '@/styles/fonts/roboto-mono';
+
+@use 'mastodon/reset';
+@use 'mastodon/basics';
+@use 'mastodon/branding';
+@use 'mastodon/containers';
+@use 'mastodon/lists';
+@use 'mastodon/widgets';
+@use 'mastodon/forms';
+@use 'mastodon/accounts';
+@use 'mastodon/components';
+@use 'mastodon/polls';
+@use 'mastodon/modal';
+@use 'mastodon/emoji_picker';
+@use 'mastodon/annual_reports';
+@use 'mastodon/about';
+@use 'mastodon/tables';
+@use 'mastodon/admin';
+@use 'mastodon/dashboard';
+@use 'mastodon/rtl';
+@use 'mastodon/accessibility';
+@use 'mastodon/rich_text';
+@use 'mastodon/glitch/local_settings';
+@use 'mastodon/glitch/doodle';
diff --git a/app/javascript/flavours/glitch/styles_new/contrast.scss b/app/javascript/flavours/glitch/styles_new/contrast.scss
new file mode 100644
index 0000000000..af73c88fef
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/contrast.scss
@@ -0,0 +1,8 @@
+@use 'mastodon/css_variables';
+@use 'mastodon/variables';
+@use 'common';
+@use 'contrast/diff';
+
+html {
+ color-scheme: dark;
+}
diff --git a/app/javascript/flavours/glitch/styles_new/contrast/diff.scss b/app/javascript/flavours/glitch/styles_new/contrast/diff.scss
new file mode 100644
index 0000000000..f809c7cdc3
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/contrast/diff.scss
@@ -0,0 +1,54 @@
+: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
new file mode 100644
index 0000000000..494efdbbde
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon-light.scss
@@ -0,0 +1,9 @@
+@use 'mastodon-light/css_variables';
+@use 'mastodon/variables' with (
+ $emojis-requiring-inversion: 'chains'
+);
+@use 'common';
+
+html {
+ color-scheme: light;
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon-light/css_variables.scss b/app/javascript/flavours/glitch/styles_new/mastodon-light/css_variables.scss
new file mode 100644
index 0000000000..70745ec071
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon-light/css_variables.scss
@@ -0,0 +1,214 @@
+@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/_mixins.scss b/app/javascript/flavours/glitch/styles_new/mastodon/_mixins.scss
new file mode 100644
index 0000000000..f825659c1d
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/_mixins.scss
@@ -0,0 +1,56 @@
+// glitch-soc addition
+@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(--color-bg-secondary);
+ color: var(--color-text-primary);
+ border-radius: 4px;
+ border: 1px solid var(--color-border-on-bg-secondary);
+ font-size: 17px;
+ line-height: normal;
+ margin: 0;
+}
+
+@mixin search-popout {
+ background: var(--color-bg-elevated);
+ border-radius: 4px;
+ padding: 10px 14px;
+ padding-bottom: 14px;
+ margin-top: 10px;
+ color: var(--color-text-secondary);
+ box-shadow: 2px 4px 15px var(--color-shadow-primary);
+
+ h4 {
+ text-transform: uppercase;
+ color: var(--color-text-secondary);
+ font-size: 13px;
+ font-weight: 500;
+ margin-bottom: 10px;
+ }
+
+ li {
+ padding: 4px 0;
+ }
+
+ ul {
+ margin-bottom: 10px;
+ }
+
+ em {
+ font-weight: 500;
+ color: var(--color-text-primary);
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/_theme_utils.scss b/app/javascript/flavours/glitch/styles_new/mastodon/_theme_utils.scss
new file mode 100644
index 0000000000..1c03c2f65c
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/_theme_utils.scss
@@ -0,0 +1,3 @@
+@function css-alpha($base-color, $amount) {
+ @return #{rgb(from $base-color r g b / $amount)};
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/_variables.scss b/app/javascript/flavours/glitch/styles_new/mastodon/_variables.scss
new file mode 100644
index 0000000000..a948dbc41c
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/_variables.scss
@@ -0,0 +1,27 @@
+// Keep this filter a SCSS variable rather than
+// a CSS Custom Property due to this Safari bug:
+// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
+$backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 1175px;
+$mobile-menu-breakpoint: 760px;
+$mobile-breakpoint: 630px;
+$no-columns-breakpoint: 600px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
+
+$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
+ 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
+ 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
+ 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/about.scss b/app/javascript/flavours/glitch/styles_new/mastodon/about.scss
new file mode 100644
index 0000000000..0bb2c8c9eb
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/about.scss
@@ -0,0 +1,130 @@
+@use 'variables' as *;
+
+$maximum-width: 1235px;
+$fluid-breakpoint: $maximum-width + 20px;
+
+.container {
+ box-sizing: border-box;
+ max-width: $maximum-width;
+ margin: 0 auto;
+ position: relative;
+
+ @media screen and (max-width: $fluid-breakpoint) {
+ width: 100%;
+ padding: 0 10px;
+ }
+}
+
+.brand {
+ position: relative;
+ text-decoration: none;
+}
+
+.rules-list {
+ font-size: 15px;
+ line-height: 22px;
+ counter-reset: list-counter;
+
+ li {
+ position: relative;
+ border-bottom: 1px solid var(--color-border-primary);
+ padding: 1em 1.75em;
+ padding-inline-start: 3em;
+ font-weight: 500;
+ counter-increment: list-counter;
+ min-height: 4ch;
+
+ button {
+ background: transparent;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ text-align: start;
+ font: inherit;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: transparent;
+ }
+
+ &[aria-expanded='false'] .rules-list__hint {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ @supports (-webkit-line-clamp: 2) {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ white-space: normal;
+ }
+ }
+ }
+
+ &::before {
+ content: counter(list-counter);
+ position: absolute;
+ inset-inline-start: 0;
+ top: 1em;
+ background: var(--color-bg-brand-base);
+ color: var(--color-text-on-brand-base);
+ border-radius: 50%;
+ width: 4ch;
+ height: 4ch;
+ font-weight: 500;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+
+ &__text {
+ color: var(--color-text-primary);
+ }
+
+ &__hint {
+ font-size: 14px;
+ font-weight: 400;
+ color: var(--color-text-secondary);
+ }
+}
+
+.rules-languages {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ position: relative;
+
+ > label {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ }
+
+ select {
+ appearance: none;
+ box-sizing: border-box;
+ font-size: 14px;
+ color: var(--color-text-primary);
+ display: block;
+ width: 100%;
+ outline: 0;
+ font-family: inherit;
+ resize: vertical;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ padding-inline-start: 10px;
+ padding-inline-end: 30px;
+ height: 41px;
+
+ @media screen and (width <= 600px) {
+ font-size: 16px;
+ }
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/accessibility.scss b/app/javascript/flavours/glitch/styles_new/mastodon/accessibility.scss
new file mode 100644
index 0000000000..42117ac20f
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/accessibility.scss
@@ -0,0 +1,36 @@
+@use 'variables' as *;
+
+%emoji-color-inversion {
+ filter: invert(1);
+}
+
+.emojione {
+ @each $emoji in $emojis-requiring-inversion {
+ &[title=':#{$emoji}:'] {
+ @extend %emoji-color-inversion;
+ }
+ }
+}
+
+// glitch-soc addition
+.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_new/mastodon/accounts.scss b/app/javascript/flavours/glitch/styles_new/mastodon/accounts.scss
new file mode 100644
index 0000000000..421cc04626
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/accounts.scss
@@ -0,0 +1,418 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+.card {
+ & > a {
+ display: block;
+ text-decoration: none;
+ color: inherit;
+ overflow: hidden;
+ border-radius: 4px;
+
+ &:hover,
+ &:active,
+ &:focus {
+ .card__bar {
+ background: var(--color-bg-brand-softer);
+ }
+ }
+ }
+
+ &__img {
+ height: 130px;
+ position: relative;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border-primary);
+ border-bottom: none;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ object-fit: cover;
+ }
+
+ @media screen and (width <= 600px) {
+ height: 200px;
+ }
+ }
+
+ &__bar {
+ position: relative;
+ padding: 15px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ background: var(--color-bg-primary);
+ border: 1px solid var(--color-border-primary);
+ border-top: none;
+
+ .avatar {
+ flex: 0 0 auto;
+ width: 48px;
+ height: 48px;
+ padding-top: 2px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ display: block;
+ margin: 0;
+ border-radius: 4px;
+ background: var(--color-bg-secondary);
+ object-fit: cover;
+ }
+ }
+
+ .display-name {
+ margin-inline-start: 15px;
+ text-align: start;
+
+ svg[data-hidden] {
+ display: none;
+ }
+
+ strong {
+ font-size: 15px;
+ color: var(--color-text-primary);
+ font-weight: 500;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ span {
+ display: block;
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+}
+
+.pagination {
+ padding: 30px 0;
+ text-align: center;
+ overflow: hidden;
+
+ a,
+ .current,
+ .newer,
+ .older,
+ .page,
+ .gap {
+ font-size: 14px;
+ color: var(--color-text-primary);
+ font-weight: 500;
+ display: inline-block;
+ padding: 6px 10px;
+ text-decoration: none;
+ }
+
+ .current {
+ color: var(--color-bg-inverted);
+ background: var(--color-text-on-inverted);
+ border-radius: 100px;
+ cursor: default;
+ margin: 0 10px;
+ }
+
+ .gap {
+ cursor: default;
+ }
+
+ .older,
+ .newer {
+ text-transform: uppercase;
+ color: var(--color-text-primary);
+ }
+
+ .older {
+ float: left;
+ padding-inline-start: 0;
+ }
+
+ .newer {
+ float: right;
+ padding-inline-end: 0;
+ }
+
+ .disabled {
+ cursor: default;
+ color: var(--color-text-disabled);
+ }
+
+ @media screen and (width <= 700px) {
+ padding: 30px 20px;
+
+ .page {
+ display: none;
+ }
+
+ .newer,
+ .older {
+ display: inline-block;
+ }
+ }
+}
+
+.nothing-here {
+ color: var(--color-text-secondary);
+ background: var(--color-bg-primary);
+ font-size: 14px;
+ font-weight: 500;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: default;
+ border-radius: 4px;
+ padding: 20px;
+ min-height: 30vh;
+ border: 1px solid var(--color-border-primary);
+
+ @media screen and (min-width: ($no-gap-breakpoint - 1)) {
+ border-top: 0;
+ }
+
+ &--no-toolbar {
+ border-top: 1px solid var(--color-border-primary);
+ }
+
+ &--under-tabs {
+ border-radius: 0 0 4px 4px;
+ }
+
+ &--flexible {
+ box-sizing: border-box;
+ min-height: 100%;
+ }
+}
+
+.information-badge,
+.simple_form .overridden,
+.simple_form .recommended,
+.simple_form .not_recommended,
+.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: var(--color-text-primary);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.information-badge,
+.simple_form .overridden,
+.simple_form .recommended,
+.simple_form .not_recommended {
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border-primary);
+}
+
+.information-badge {
+ &.superapp {
+ color: var(--color-text-success);
+ background-color: var(--color-bg-success-softer);
+ border-color: var(--color-border-on-bg-success-softer);
+ }
+}
+
+.account-role {
+ display: inline-flex;
+ padding: 4px;
+ padding-inline-end: 8px;
+ border: 1px solid var(--color-text-brand);
+ color: var(--color-text-brand);
+ font-weight: 500;
+ font-size: 12px;
+ letter-spacing: 0.5px;
+ line-height: 16px;
+ gap: 4px;
+ border-radius: 6px;
+ align-items: center;
+
+ svg {
+ width: auto;
+ height: 15px;
+ opacity: 0.85;
+ fill: currentColor;
+ }
+
+ &__domain {
+ font-weight: 400;
+ opacity: 0.75;
+ letter-spacing: 0;
+ }
+}
+
+.simple_form .not_recommended {
+ color: var(--color-text-error);
+ background-color: var(--color-bg-error-softer);
+ border-color: var(--color-border-on-bg-error-softer);
+}
+
+.simple_form .glitch_only {
+ color: var(--color-text-warning);
+ background-color: var(--color-bg-warning-softer);
+ border-color: var(--color-border-on-bg-warning-softer);
+}
+
+.account__header__fields {
+ max-width: 100vw;
+ padding: 0;
+ margin: 15px -15px -15px;
+ border: 0 none;
+ border-top: 1px solid var(--color-border-primary);
+ border-bottom: 1px solid var(--color-border-primary);
+ font-size: 14px;
+ line-height: 20px;
+
+ dl {
+ display: flex;
+ border-bottom: 1px solid var(--color-border-primary);
+ }
+
+ dt,
+ dd {
+ box-sizing: border-box;
+ padding: 14px;
+ text-align: center;
+ max-height: 48px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ dt {
+ font-weight: 500;
+ width: 120px;
+ flex: 0 0 auto;
+ color: var(--color-text-primary);
+ background: var(--color-bg-secondary);
+ }
+
+ dd {
+ flex: 1 1 auto;
+ color: var(--color-text-secondary);
+ }
+
+ a {
+ color: var(--color-text-brand);
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+
+ .verified {
+ border: 1px solid var(--color-border-on-bg-success-softer);
+ background: var(--color-bg-success-softer);
+
+ a {
+ color: var(--color-text-success);
+ font-weight: 500;
+ }
+
+ &__mark {
+ color: var(--color-text-success);
+ }
+ }
+
+ dl:last-child {
+ border-bottom: 0;
+ }
+}
+
+.directory__tag .trends__item__current {
+ width: auto;
+}
+
+.pending-account {
+ &__header {
+ color: var(--color-text-secondary);
+
+ a {
+ color: var(--color-text-primary);
+ text-decoration: none;
+
+ &:hover,
+ &:active,
+ &:focus {
+ text-decoration: underline;
+ }
+ }
+
+ strong {
+ color: var(--color-text-primary);
+ font-weight: 700;
+ }
+
+ .warning-hint {
+ font-weight: normal !important;
+ }
+ }
+
+ &__body {
+ margin-top: 10px;
+ }
+}
+
+.batch-table__row--muted {
+ color: var(--color-text-tertiary);
+}
+
+.batch-table__row--muted .pending-account__header,
+.batch-table__row--muted .accounts-table,
+.batch-table__row--muted .name-tag {
+ &,
+ a,
+ strong {
+ color: var(--color-text-tertiary);
+ }
+}
+
+.batch-table__row--muted .name-tag .avatar {
+ opacity: 0.5;
+}
+
+.batch-table__row--muted .accounts-table {
+ tbody td.accounts-table__extra,
+ &__count,
+ &__count small {
+ color: var(--color-text-tertiary);
+ }
+}
+
+.batch-table__row--attention {
+ color: var(--color-text-warning);
+}
+
+.batch-table__row--attention .pending-account__header,
+.batch-table__row--attention .accounts-table,
+.batch-table__row--attention .name-tag {
+ &,
+ a,
+ strong {
+ color: var(--color-text-warning);
+ }
+}
+
+.batch-table__row--attention .accounts-table {
+ tbody td.accounts-table__extra,
+ &__count,
+ &__count small {
+ color: var(--color-text-warning);
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/admin.scss b/app/javascript/flavours/glitch/styles_new/mastodon/admin.scss
new file mode 100644
index 0000000000..9885511989
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/admin.scss
@@ -0,0 +1,2189 @@
+@use 'sass:color';
+@use 'sass:math';
+@use 'variables' as *;
+
+$no-columns-breakpoint: 890px;
+$sidebar-width: 300px;
+$content-width: 840px;
+
+.admin-wrapper {
+ display: flex;
+ justify-content: center;
+ box-sizing: border-box;
+ width: 100%;
+ min-height: 100vh;
+ min-height: 100dvh;
+ padding: env(safe-area-inset-top) env(safe-area-inset-right)
+ env(safe-area-inset-bottom) env(safe-area-inset-left);
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ vertical-align: top;
+ margin: 0 2px;
+ }
+
+ .sidebar-wrapper {
+ min-height: 100vh;
+ min-height: 100dvh;
+ overflow: hidden;
+ pointer-events: none;
+ flex: 1 1 auto;
+
+ &__inner {
+ display: flex;
+ justify-content: flex-end;
+ height: 100%;
+ }
+ }
+
+ .sidebar {
+ width: $sidebar-width;
+ padding: 0;
+ pointer-events: auto;
+
+ &__toggle {
+ display: none;
+ background: var(--color-bg-primary);
+ border-bottom: 1px solid var(--color-border-primary);
+ align-items: center;
+
+ &__logo {
+ flex: 1 1 auto;
+
+ a {
+ display: block;
+ padding: 15px;
+ }
+ }
+
+ &__icon {
+ display: block;
+ color: var(--color-text-secondary);
+ text-decoration: none;
+ flex: 0 0 auto;
+ font-size: 18px;
+ padding: 10px;
+ margin: 5px 10px;
+ border-radius: 4px;
+
+ &:focus {
+ background: var(--color-bg-brand-softer);
+ }
+
+ .material-close {
+ display: none;
+ }
+
+ &.active {
+ .material-close {
+ display: block;
+ }
+
+ .material-menu {
+ display: none;
+ }
+ }
+ }
+ }
+
+ .logo {
+ display: block;
+ margin: 40px auto;
+ width: 100px;
+ height: 100px;
+ }
+
+ .logo--wordmark {
+ display: inherit;
+ margin: inherit;
+ width: inherit;
+ height: 25px;
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ & > a:first-child {
+ display: none;
+ }
+ }
+
+ ul {
+ list-style: none;
+ overflow: hidden;
+ margin-bottom: 20px;
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ margin-bottom: 0;
+ }
+
+ a {
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 15px;
+ color: var(--color-text-secondary);
+ text-decoration: none;
+ transition: all 200ms linear;
+ transition-property: color, background-color;
+
+ &:hover {
+ color: var(--color-text-primary);
+ transition: all 100ms linear;
+ transition-property: color, background-color;
+ }
+ }
+
+ ul {
+ margin: 0;
+
+ a {
+ border: 0;
+ padding: 15px 35px;
+ }
+ }
+
+ .warning a {
+ color: var(--color-text-warning);
+ font-weight: 700;
+ }
+
+ .simple-navigation-active-leaf a {
+ color: var(--color-text-brand);
+ border-bottom: 0;
+ }
+ }
+ }
+
+ .content-wrapper {
+ box-sizing: border-box;
+ width: 100%;
+ max-width: $content-width;
+ flex: 1 1 auto;
+ }
+
+ @media screen and (max-width: ($content-width + $sidebar-width)) {
+ .sidebar-wrapper--empty {
+ display: none;
+ }
+
+ .sidebar-wrapper {
+ width: $sidebar-width;
+ flex: 0 0 auto;
+ }
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ .sidebar-wrapper {
+ width: 100%;
+ }
+ }
+
+ .content {
+ padding-top: 55px;
+ padding-bottom: 20px;
+ padding-inline-start: 25px;
+ padding-inline-end: 15px;
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ max-width: none;
+ padding: 15px;
+ padding-top: 30px;
+ }
+
+ &__heading {
+ margin-bottom: 45px;
+
+ &__row {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: -15px;
+ margin-inline-end: -15px;
+
+ & > * {
+ margin-top: 15px;
+ margin-inline-end: 15px;
+ }
+ }
+
+ &__tabs {
+ margin-top: 30px;
+ width: 100%;
+
+ & > div {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ }
+
+ a {
+ font-size: 14px;
+ display: inline-flex;
+ align-items: center;
+ padding: 7px 10px;
+ border-radius: 4px;
+ color: var(--color-text-secondary);
+ text-decoration: none;
+ font-weight: 500;
+ gap: 5px;
+ white-space: nowrap;
+
+ @media screen and (max-width: $mobile-breakpoint) {
+ flex: 1 0 50%;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: var(--color-bg-secondary);
+ }
+
+ &.selected {
+ font-weight: 700;
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ }
+ }
+ }
+
+ &__actions {
+ display: inline-flex;
+ flex-flow: wrap;
+ gap: 5px;
+ align-items: center;
+
+ .time-period {
+ padding: 0 10px;
+ }
+
+ .back-link {
+ margin-bottom: 0;
+ }
+ }
+
+ h2 small {
+ font-size: 12px;
+ display: block;
+ font-weight: 500;
+ color: var(--color-text-secondary);
+ line-height: 18px;
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ border-bottom: 0;
+ padding-bottom: 0;
+ }
+ }
+
+ h2 {
+ color: var(--color-text-primary);
+ font-size: 24px;
+ line-height: 36px;
+ font-weight: 700;
+ }
+
+ h3 {
+ color: var(--color-text-primary);
+ font-size: 20px;
+ line-height: 28px;
+ font-weight: 400;
+ margin-bottom: 30px;
+ }
+
+ h4 {
+ text-transform: uppercase;
+ font-size: 13px;
+ font-weight: 700;
+ color: var(--color-text-secondary);
+ padding-top: 24px;
+ margin-bottom: 8px;
+ border-top: 1px solid var(--color-border-primary);
+ }
+
+ h6 {
+ font-size: 16px;
+ color: var(--color-text-primary);
+ line-height: 28px;
+ font-weight: 500;
+ }
+
+ .fields-group h6 {
+ color: var(--color-text-primary);
+ font-weight: 500;
+ }
+
+ .directory__tag h4 {
+ font-size: 18px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+ text-transform: none;
+ padding-top: 0;
+ margin-bottom: 0;
+ border-top: 0;
+
+ .comment {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-top: 4px;
+
+ &.private-comment {
+ display: block;
+ color: var(--color-text-secondary);
+ }
+
+ &.public-comment {
+ display: block;
+ color: var(--color-text-primary);
+ }
+ }
+ }
+
+ & > p {
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--color-text-primary);
+ margin-bottom: 20px;
+
+ strong {
+ color: var(--color-text-primary);
+ font-weight: 500;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+ }
+
+ hr {
+ width: 100%;
+ height: 0;
+ border: 0;
+ border-bottom: 1px solid var(--color-border-primary);
+ margin: 20px 0;
+
+ &.spacer {
+ height: 1px;
+ border: 0;
+ }
+ }
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ display: block;
+
+ .sidebar-wrapper {
+ min-height: 0;
+ }
+
+ .sidebar {
+ width: 100%;
+ padding: 0;
+ height: auto;
+
+ &__toggle {
+ display: flex;
+ }
+
+ & > ul {
+ display: none;
+
+ &.visible {
+ display: block;
+ position: fixed;
+ z-index: 10;
+ width: 100%;
+ height: calc(100% - 56px);
+ inset-inline-start: 0;
+ bottom: 0;
+ overflow-y: auto;
+ background: var(--color-bg-primary);
+ }
+ }
+
+ ul a,
+ ul ul a {
+ font-size: 16px;
+ border-radius: 0;
+ transition: none;
+
+ &:hover {
+ transition: none;
+ }
+ }
+
+ ul ul {
+ border-radius: 0;
+ }
+
+ ul .simple-navigation-active-leaf a {
+ border-bottom-color: var(--color-text-brand);
+ }
+ }
+ }
+}
+
+hr.spacer {
+ width: 100%;
+ border: 0;
+ margin: 20px 0;
+ height: 1px;
+}
+
+body,
+.admin-wrapper .content {
+ .muted-hint {
+ color: var(--color-text-secondary);
+
+ a {
+ color: var(--color-text-brand);
+ }
+ }
+
+ .positive-hint,
+ .negative-hint,
+ .neutral-hint {
+ a {
+ color: inherit;
+ text-decoration: underline;
+
+ &:focus,
+ &:hover,
+ &:active {
+ text-decoration: none;
+ }
+ }
+ }
+
+ .positive-hint {
+ color: var(--color-text-success);
+ font-weight: 500;
+ }
+
+ .negative-hint {
+ color: var(--color-text-error);
+ font-weight: 500;
+ }
+
+ .neutral-hint {
+ color: var(--color-text-primary);
+ font-weight: 500;
+ }
+
+ .warning-hint {
+ color: var(--color-text-warning);
+ font-weight: 500;
+ }
+}
+
+kbd {
+ font-family: Courier, monospace;
+ background-color: var(--color-bg-brand-softer);
+ padding: 4px;
+ padding-bottom: 2px;
+ border-radius: 5px;
+}
+
+.filters {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 40px;
+
+ .filter-subset {
+ flex: 0 0 auto;
+ margin-bottom: 20px;
+
+ &:last-child {
+ margin-bottom: 30px;
+ }
+
+ ul {
+ margin-top: 5px;
+ list-style: none;
+
+ li {
+ display: inline-block;
+ margin-inline-end: 5px;
+ }
+ }
+
+ & > div {
+ display: flex;
+ gap: 5px;
+ }
+
+ strong {
+ font-weight: 500;
+ text-transform: uppercase;
+ font-size: 12px;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+
+ &--with-select strong {
+ display: block;
+ margin-bottom: 10px;
+ }
+
+ a {
+ display: inline-block;
+ color: var(--color-text-secondary);
+ text-decoration: none;
+ text-transform: uppercase;
+ font-size: 12px;
+ font-weight: 500;
+ border-bottom: 2px solid var(--color-bg-secondary);
+
+ &:hover {
+ color: var(--color-text-primary);
+ border-bottom: 2px solid var(--color-bg-tertiary);
+ }
+
+ &.selected {
+ color: var(--color-text-brand);
+ border-bottom: 2px solid var(--color-text-brand);
+ }
+ }
+ }
+}
+
+.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: 0 0 10px -5px;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 18px;
+ color: var(--color-text-primary);
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+
+ .account-card {
+ flex: 1 1 auto;
+ }
+}
+
+.report-status,
+.account-status {
+ display: flex;
+ margin-bottom: 10px;
+}
+
+.report-status__actions,
+.account-status__actions {
+ flex: 0 0 auto;
+ display: flex;
+ flex-direction: column;
+
+ .icon-button {
+ font-size: 24px;
+ width: 24px;
+ text-align: center;
+ margin-bottom: 10px;
+ }
+}
+
+.simple_form.new_report_note,
+.simple_form.new_account_moderation_note {
+ max-width: 100%;
+}
+
+.batch-form-box {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 5px;
+
+ #form_status_batch_action {
+ margin: 0 5px 5px 0;
+ font-size: 14px;
+ }
+
+ input.button {
+ margin: 0 5px 5px 0;
+ }
+}
+
+.back-link {
+ margin-bottom: 10px;
+ font-size: 14px;
+
+ a {
+ color: var(--color-text-brand);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
+
+.special-action-button,
+.back-link {
+ text-align: end;
+ flex: 1 1 auto;
+}
+
+.action-buttons {
+ display: flex;
+ overflow: hidden;
+ justify-content: space-between;
+}
+
+.spacer {
+ flex: 1 1 auto;
+}
+
+.log-entry {
+ display: block;
+ line-height: 20px;
+ padding: 15px;
+ padding-inline-start: 15px * 2 + 40px;
+ background: var(--color-bg-primary);
+ border-right: 1px solid var(--color-border-primary);
+ border-left: 1px solid var(--color-border-primary);
+ border-bottom: 1px solid var(--color-border-primary);
+ position: relative;
+ text-decoration: none;
+ color: var(--color-text-secondary);
+ font-size: 14px;
+
+ &:first-child {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ border-top: 1px solid var(--color-border-primary);
+ }
+
+ &:last-child {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-bottom: 1px solid var(--color-border-primary);
+ }
+
+ &__avatar {
+ position: absolute;
+ inset-inline-start: 15px;
+ top: 15px;
+
+ .avatar {
+ border-radius: var(--avatar-border-radius);
+ width: 40px;
+ height: 40px;
+ }
+ }
+
+ &__title {
+ overflow-wrap: break-word;
+ }
+
+ &__timestamp {
+ color: var(--color-text-tertiary);
+ }
+
+ a,
+ .username,
+ .target {
+ color: var(--color-text-primary);
+ text-decoration: none;
+ font-weight: 500;
+ }
+
+ a {
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+}
+
+.strike-entry {
+ display: block;
+ line-height: 20px;
+ padding: 15px;
+ padding-inline-start: 15px * 2 + 40px;
+ background: var(--color-bg-primary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ position: relative;
+ text-decoration: none;
+ color: var(--color-text-secondary);
+ font-size: 14px;
+ margin-bottom: 15px;
+
+ &__avatar {
+ position: absolute;
+ inset-inline-start: 15px;
+ top: 15px;
+
+ .avatar {
+ border-radius: var(--avatar-border-radius);
+ width: 40px;
+ height: 40px;
+ }
+ }
+
+ &__title {
+ overflow-wrap: break-word;
+ }
+
+ &__timestamp {
+ color: var(--color-text-secondary);
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: var(--color-bg-primary);
+ }
+}
+
+a.name-tag,
+.name-tag,
+a.inline-name-tag,
+.inline-name-tag {
+ text-decoration: none;
+ color: var(--color-text-primary);
+
+ &:hover {
+ color: var(--color-text-brand);
+ }
+
+ .username {
+ font-weight: 500;
+ }
+
+ &.suspended {
+ .username {
+ text-decoration: line-through;
+ color: var(--color-text-error);
+ }
+
+ .avatar {
+ filter: grayscale(100%);
+ opacity: 0.8;
+ }
+ }
+}
+
+a.name-tag,
+.name-tag {
+ display: inline-flex;
+ align-items: center;
+ vertical-align: top;
+
+ .avatar {
+ display: block;
+ margin: 0;
+ margin-inline-end: 5px;
+ border-radius: 50%;
+ }
+
+ &.suspended {
+ .avatar {
+ filter: grayscale(100%);
+ opacity: 0.8;
+ }
+ }
+}
+
+.speech-bubble {
+ margin-bottom: 20px;
+ border-inline-start: 4px solid var(--color-text-brand);
+
+ &.positive {
+ border-color: var(--color-text-success);
+ }
+
+ &.negative {
+ border-color: var(--color-text-error);
+ }
+
+ &.warning {
+ border-color: var(--color-text-warning);
+ }
+
+ &__bubble {
+ padding: 16px;
+ padding-inline-start: 14px;
+ font-size: 15px;
+ line-height: 20px;
+ border-radius: 4px 4px 4px 0;
+ position: relative;
+ font-weight: 500;
+
+ a {
+ color: var(--color-text-secondary);
+ }
+ }
+
+ &__owner {
+ padding: 8px;
+ padding-inline-start: 12px;
+ }
+
+ time {
+ color: var(--color-text-tertiary);
+ }
+}
+
+.report-card {
+ background: var(--color-bg-primary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ margin-bottom: 20px;
+
+ &__profile {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px;
+
+ .account {
+ padding: 0;
+ border: none;
+
+ &__avatar-wrapper {
+ margin-inline-start: 0;
+ }
+ }
+
+ &__stats {
+ flex: 0 0 auto;
+ font-weight: 500;
+ color: var(--color-text-secondary);
+ text-transform: uppercase;
+ text-align: end;
+
+ a {
+ color: inherit;
+ text-decoration: none;
+
+ &:focus,
+ &:hover,
+ &:active {
+ color: var(--color-text-brand);
+ }
+ }
+
+ .red {
+ color: var(--color-text-error);
+ }
+ }
+ }
+
+ &__summary {
+ &__item {
+ display: flex;
+ justify-content: flex-start;
+ border-top: 1px solid var(--color-border-primary);
+
+ &__reported-by,
+ &__assigned {
+ padding: 15px;
+ flex: 0 0 auto;
+ box-sizing: border-box;
+ width: 150px;
+ color: var(--color-text-secondary);
+
+ &,
+ .username {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ &__content {
+ flex: 1 1 auto;
+ max-width: calc(100% - 300px);
+
+ &__icon {
+ margin-inline-end: 4px;
+ font-weight: 500;
+ }
+ }
+
+ &__content a {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 15px;
+ text-decoration: none;
+ color: var(--color-text-secondary);
+
+ &:hover {
+ color: var(--color-text-brand);
+ }
+ }
+ }
+ }
+}
+
+.one-line {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ellipsized-ip {
+ display: inline-block;
+ max-width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+
+.admin-account-bio {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0 -5px;
+ margin-top: 20px;
+
+ > div {
+ box-sizing: border-box;
+ padding: 0 5px;
+ margin-bottom: 10px;
+ flex: 1 0 50%;
+ max-width: 100%;
+ }
+
+ .account__header__fields,
+ .account__header__content {
+ background: var(--color-bg-primary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ height: 100%;
+ }
+
+ .account__header__fields {
+ margin: 0;
+ border: 1px solid var(--color-border-primary);
+
+ a {
+ color: var(--color-text-brand);
+ }
+
+ dl:first-child .verified {
+ border-radius: 0 4px 0 0;
+ }
+
+ .verified a {
+ color: var(--color-text-success);
+ }
+ }
+
+ .account__header__content {
+ box-sizing: border-box;
+ padding: 20px;
+ color: var(--color-text-primary);
+ }
+}
+
+.center-text {
+ text-align: center;
+}
+
+.applications-list__item,
+.filters-list__item {
+ padding: 15px 0;
+ background: var(--color-bg-primary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ margin-top: 15px;
+}
+
+.applications-list {
+ .icon {
+ vertical-align: middle;
+ }
+}
+
+.announcements-list,
+.filters-list {
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ border-bottom: none;
+
+ &__item {
+ padding: 15px 0;
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &__title {
+ padding: 0 15px;
+ display: block;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 1.5;
+ color: var(--color-text-primary);
+ text-decoration: none;
+ margin-bottom: 10px;
+
+ &:hover {
+ color: var(--color-text-brand);
+ }
+
+ .account-role {
+ vertical-align: middle;
+ }
+ }
+
+ .icon {
+ vertical-align: middle;
+ }
+
+ a.announcements-list__item__title {
+ &:hover,
+ &:focus,
+ &:active {
+ color: var(--color-text-primary);
+ }
+ }
+
+ &__action-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+
+ &:not(.no-wrap) {
+ flex-wrap: wrap;
+ }
+ }
+
+ &__meta {
+ padding: 0 15px;
+ color: var(--color-text-tertiary);
+
+ a {
+ color: inherit;
+ text-decoration: underline;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+ }
+ }
+
+ &__actions {
+ margin-inline-start: auto;
+ }
+
+ &__permissions {
+ margin-top: 10px;
+ }
+ }
+}
+
+.filters-list__item {
+ &__title {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 0;
+ overflow-wrap: anywhere;
+ }
+
+ &__permissions {
+ margin-top: 0;
+ margin-bottom: 10px;
+ }
+
+ .expiration {
+ font-size: 13px;
+ }
+
+ &.expired {
+ .expiration {
+ color: var(--color-text-error);
+ }
+
+ .permissions-list__item__icon {
+ color: var(--color-text-secondary);
+ }
+ }
+}
+
+.rule-actions {
+ display: flex;
+ flex-direction: column;
+
+ a.table-action-link {
+ padding-inline-start: 0;
+ }
+}
+
+.dashboard__counters.admin-account-counters {
+ margin-top: 10px;
+}
+
+.account-badges {
+ margin: -2px 0;
+}
+
+.retention {
+ overflow: auto;
+
+ > h4 {
+ position: sticky;
+ inset-inline-start: 0;
+ }
+
+ &__table {
+ &__number {
+ color: var(--color-bg-primary);
+ padding: 10px;
+ }
+
+ &__date {
+ white-space: nowrap;
+ padding: 10px 0;
+ text-align: start;
+ min-width: 120px;
+
+ &.retention__table__average {
+ font-weight: 700;
+ }
+ }
+
+ &__size {
+ text-align: center;
+ padding: 10px;
+ }
+
+ &__label {
+ font-weight: 700;
+ color: var(--color-text-secondary);
+ }
+
+ &__box {
+ box-sizing: border-box;
+ width: 52px;
+ margin: 1px;
+ padding: 10px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+ background: var(--color-bg-primary);
+
+ @for $i from 0 through 10 {
+ &--#{10 * $i} {
+ @if $i > 5 {
+ color: var(--color-text-on-brand-base);
+ }
+
+ background-color: rgb(
+ from var(--color-bg-brand-base) r g b / #{math.div(max(1, $i), 10)}
+ );
+ }
+ }
+ }
+ }
+}
+
+.sparkline {
+ display: block;
+ text-decoration: none;
+ background: var(--color-bg-primary);
+ border-radius: 4px;
+ border: 1px solid var(--color-border-primary);
+ padding: 0;
+ position: relative;
+ padding-bottom: 55px + 20px;
+ overflow: hidden;
+
+ &__value {
+ display: flex;
+ line-height: 33px;
+ align-items: flex-end;
+ padding: 20px;
+ padding-bottom: 10px;
+
+ &__total {
+ display: block;
+ margin-inline-end: 10px;
+ font-weight: 500;
+ font-size: 28px;
+ color: var(--color-text-primary);
+ }
+
+ &__change {
+ display: block;
+ font-weight: 500;
+ font-size: 18px;
+ color: var(--color-text-secondary);
+ margin-bottom: -3px;
+
+ &.positive {
+ color: var(--color-text-success);
+ }
+
+ &.negative {
+ color: var(--color-text-error);
+ }
+ }
+ }
+
+ &__label {
+ padding: 0 20px;
+ padding-bottom: 10px;
+ text-transform: uppercase;
+ color: var(--color-text-secondary);
+ font-weight: 500;
+ }
+
+ &__graph {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+
+ svg {
+ display: block;
+ margin: 0;
+ }
+
+ path:first-child {
+ fill: var(--color-graph-primary-fill) !important;
+ fill-opacity: 1 !important;
+ }
+
+ path:last-child {
+ stroke: var(--color-graph-primary-stroke) !important;
+ fill: none !important;
+ }
+ }
+}
+
+a.sparkline {
+ &:hover,
+ &:focus,
+ &:active {
+ background: var(--color-bg-brand-softer);
+ }
+}
+
+.skeleton {
+ background-color: var(--color-bg-primary);
+ background-image: linear-gradient(
+ 90deg,
+ var(--color-bg-primary),
+ var(--color-bg-secondary),
+ var(--color-bg-primary)
+ );
+ background-size: 200px 100%;
+ background-repeat: no-repeat;
+ border-radius: 4px;
+ display: inline-block;
+ line-height: 1;
+ width: 100%;
+ animation: skeleton 1.2s ease-in-out infinite;
+
+ .reduce-motion & {
+ animation: none;
+ }
+}
+
+@keyframes skeleton {
+ 0% {
+ background-position: -200px 0;
+ }
+
+ 100% {
+ background-position: calc(200px + 100%) 0;
+ }
+}
+
+.dimension {
+ table {
+ width: 100%;
+ }
+
+ &__item {
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &__key {
+ font-weight: 500;
+ padding: 11px 10px;
+ }
+
+ &__value {
+ text-align: end;
+ color: var(--color-text-secondary);
+ padding: 11px 10px;
+ }
+
+ &__indicator {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--color-text-brand);
+ margin-inline-end: 10px;
+
+ @for $i from 0 through 10 {
+ &--#{10 * $i} {
+ background-color: rgb(
+ from var(--color-text-brand) r g b / #{math.div(max(1, $i), 10)}
+ );
+ }
+ }
+ }
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &.negative {
+ color: var(--color-text-error);
+ font-weight: 700;
+
+ .dimension__item__value {
+ color: var(--color-text-error);
+ }
+ }
+ }
+}
+
+.report-reason-selector {
+ border-radius: 4px;
+ background: var(--color-bg-primary);
+ margin-bottom: 20px;
+
+ &__category {
+ cursor: pointer;
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &__label {
+ padding: 15px;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ }
+
+ &__rules {
+ margin-inline-start: 30px;
+ }
+ }
+
+ &__rule {
+ cursor: pointer;
+ padding: 15px;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ }
+}
+
+.report-header {
+ display: grid;
+ gap: 15px;
+ grid-template-columns: minmax(0, 1fr) 300px;
+
+ &__details {
+ &__item {
+ border-bottom: 1px solid var(--color-border-primary);
+ padding: 15px 0;
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &__header {
+ font-weight: 600;
+ padding: 4px 0;
+ }
+ }
+
+ &--horizontal {
+ display: grid;
+ grid-auto-columns: minmax(0, 1fr);
+ grid-auto-flow: column;
+
+ .report-header__details__item {
+ border-bottom: 0;
+ }
+ }
+ }
+
+ @media screen and (width <= 930px) {
+ grid-template-columns: minmax(0, 1fr);
+ }
+}
+
+.account-card {
+ border-radius: 4px;
+ border: 1px solid var(--color-border-primary);
+ position: relative;
+
+ &__warning-badge {
+ position: absolute;
+ padding: 4px 10px;
+ top: 10px;
+ inset-inline-start: 10px;
+ border-radius: 4px;
+ background:
+ url('@/images/warning-stripes.svg') repeat-y left,
+ url('@/images/warning-stripes.svg') repeat-y right,
+ var(--color-bg-primary);
+ }
+
+ &__permalink {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ &__header {
+ padding: 4px;
+ border-radius: 4px;
+ height: 128px;
+
+ img {
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ background: var(--color-bg-secondary);
+ }
+ }
+
+ &__title {
+ margin-top: -(15px + 8px);
+ display: flex;
+ align-items: flex-end;
+
+ &__avatar {
+ padding: 14px;
+
+ img,
+ .account__avatar {
+ display: block;
+ margin: 0;
+ width: 56px;
+ height: 56px;
+ background-color: var(--color-bg-secondary);
+ border-radius: 8px;
+ border: 1px solid var(--color-border-media);
+ }
+ }
+
+ .display-name {
+ color: var(--color-text-secondary);
+ padding-bottom: 15px;
+ font-size: 15px;
+ line-height: 20px;
+
+ bdi {
+ display: block;
+ color: var(--color-text-primary);
+ font-weight: 700;
+ }
+ }
+ }
+
+ &__bio {
+ padding: 0 15px;
+ margin: 8px 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ overflow-wrap: break-word;
+ max-height: 21px * 2;
+ position: relative;
+ font-size: 15px;
+ line-height: 21px;
+
+ &::after {
+ display: block;
+ content: '';
+ width: 50px;
+ height: 21px;
+ position: absolute;
+ bottom: 0;
+ inset-inline-end: 15px;
+ pointer-events: none;
+ }
+
+ a {
+ color: var(--color-text-primary);
+ text-decoration: none;
+ unicode-bidi: isolate;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &.mention {
+ &:hover {
+ text-decoration: none;
+
+ span {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+
+ &__actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ &__button {
+ flex-shrink: 1;
+ padding: 0 15px;
+ overflow: hidden;
+
+ .button {
+ min-width: 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 100%;
+ }
+ }
+ }
+
+ &__counters {
+ flex: 1 1 auto;
+ display: grid;
+ grid-auto-columns: minmax(0, 1fr);
+ grid-auto-flow: column;
+ max-width: 340px;
+ min-width: 65px * 3;
+
+ &__item {
+ padding: 15px 0;
+ text-align: center;
+ color: var(--color-text-primary);
+ font-weight: 600;
+ font-size: 15px;
+ line-height: 21px;
+
+ small {
+ display: block;
+ color: var(--color-text-secondary);
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 18px;
+ }
+ }
+ }
+}
+
+.report-notes {
+ margin-bottom: 20px;
+
+ &__item {
+ background: var(--color-bg-primary);
+ position: relative;
+ padding: 15px;
+ padding-inline-start: 15px * 2 + 40px;
+ border: 1px solid var(--color-border-primary);
+
+ &:first-child {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+
+ &:last-child {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+
+ &__avatar {
+ position: absolute;
+ inset-inline-start: 15px;
+ top: 15px;
+ border-radius: var(--avatar-border-radius);
+ width: 40px;
+ height: 40px;
+ }
+
+ &__header {
+ color: var(--color-text-secondary);
+ font-size: 15px;
+ line-height: 20px;
+ margin-bottom: 4px;
+
+ .username {
+ color: var(--color-text-primary);
+ font-weight: 500;
+ margin-inline-end: 5px;
+
+ a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ a.timestamp {
+ color: var(--color-text-secondary);
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+
+ time {
+ margin-inline-start: 5px;
+ vertical-align: baseline;
+ }
+ }
+
+ &__content {
+ font-size: 15px;
+ line-height: 20px;
+ overflow-wrap: break-word;
+ font-weight: 400;
+ color: var(--color-text-primary);
+
+ p {
+ margin-bottom: 20px;
+ white-space: pre-wrap;
+ unicode-bidi: plaintext;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ color: var(--color-text-brand);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__actions {
+ position: absolute;
+ top: 15px;
+ inset-inline-end: 15px;
+ text-align: end;
+ }
+ }
+}
+
+.report-actions {
+ &__item {
+ display: flex;
+ align-items: center;
+ line-height: 18px;
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &__button {
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ width: 200px;
+ padding: 15px;
+ padding-inline-end: 0;
+
+ .button {
+ display: block;
+ width: 100%;
+ }
+ }
+
+ &__description {
+ padding: 15px;
+ font-size: 14px;
+ color: var(--color-text-tertiary);
+ }
+ }
+
+ @media screen and (width <= 800px) {
+ border: 0;
+
+ &__item {
+ flex-direction: column;
+ border: 0;
+
+ &__button {
+ width: 100%;
+ padding: 15px 0;
+ }
+
+ &__description {
+ padding: 0;
+ padding-bottom: 15px;
+ }
+ }
+ }
+}
+
+.section-skip-link {
+ float: right;
+
+ a {
+ color: var(--color-text-brand);
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+}
+
+.strike-card {
+ padding: 15px;
+ font-size: 15px;
+ line-height: 20px;
+ overflow-wrap: break-word;
+ font-weight: 400;
+ color: var(--color-text-primary);
+ box-sizing: border-box;
+ min-height: 100%;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+
+ a {
+ color: var(--color-text-brand);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ p {
+ margin-bottom: 20px;
+ unicode-bidi: plaintext;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ strong {
+ font-weight: 700;
+ }
+ }
+
+ &__rules {
+ list-style: disc;
+ padding-inline-start: 15px;
+ margin-bottom: 20px;
+ color: var(--color-text-secondary);
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &__text {
+ color: var(--color-text-primary);
+ }
+ }
+
+ &__statuses-list {
+ border-radius: 4px;
+ border: 1px solid var(--color-border-primary);
+ font-size: 13px;
+ line-height: 18px;
+ overflow: hidden;
+
+ &__item {
+ padding: 16px;
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &__meta {
+ color: var(--color-text-secondary);
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+}
+
+.availability-indicator {
+ display: flex;
+ align-items: center;
+ margin-bottom: 30px;
+ font-size: 14px;
+ line-height: 21px;
+
+ &__hint {
+ padding: 0 15px;
+ }
+
+ &__graphic {
+ display: flex;
+ margin: 0 -2px;
+
+ &__item {
+ display: block;
+ flex: 0 0 auto;
+ width: 4px;
+ height: 21px;
+ background: var(--color-bg-secondary);
+ margin: 0 2px;
+ border-radius: 2px;
+
+ &.positive {
+ background: var(--color-bg-success-base);
+ }
+
+ &.negative {
+ background: var(--color-bg-error-base);
+ }
+ }
+ }
+}
+
+.history {
+ counter-reset: step 0;
+ font-size: 15px;
+ line-height: 22px;
+
+ > li {
+ counter-increment: step 1;
+ padding-inline-start: 2.5rem;
+ padding-bottom: 8px;
+ position: relative;
+ margin-bottom: 8px;
+
+ &::before {
+ position: absolute;
+ content: counter(step);
+ font-size: 0.625rem;
+ font-weight: 500;
+ inset-inline-start: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: calc(1.375rem + 1px);
+ height: calc(1.375rem + 1px);
+ background: var(--color-bg-primary);
+ border: 1px solid var(--color-text-brand);
+ color: var(--color-text-brand);
+ border-radius: 8px;
+ }
+
+ &::after {
+ position: absolute;
+ content: '';
+ width: 1px;
+ background: var(--color-text-brand);
+ bottom: 0;
+ top: calc(1.875rem + 1px);
+ inset-inline-start: 0.6875rem;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+
+ &::after {
+ display: none;
+ }
+ }
+ }
+
+ &__entry {
+ h5 {
+ font-weight: 500;
+ color: var(--color-text-primary);
+ line-height: 25px;
+ margin-bottom: 16px;
+ }
+
+ .status {
+ border: 1px solid var(--color-border-primary);
+ background: var(--color-bg-secondary);
+ border-radius: 4px;
+ }
+ }
+}
+
+.status__card {
+ padding: 15px;
+ border-radius: 4px;
+ font-size: 15px;
+ line-height: 20px;
+ overflow-wrap: break-word;
+ font-weight: 400;
+ border: 1px solid var(--color-border-primary);
+ color: var(--color-text-primary);
+ box-sizing: border-box;
+ min-height: 100%;
+
+ &.status--has-quote {
+ .quote-inline {
+ display: none;
+ }
+ }
+
+ .status__quote & {
+ // Remove the border from the .status__card within .status__quote
+ border: none;
+
+ .display-name__account {
+ line-height: inherit;
+ }
+
+ .status__avatar,
+ .status__avatar .account__avatar {
+ width: 32px;
+ height: 32px;
+ }
+ }
+
+ .status__prepend {
+ padding: 0 0 15px;
+ gap: 4px;
+ align-items: center;
+ }
+
+ > details {
+ summary {
+ display: block;
+ box-sizing: border-box;
+ color: var(--color-text-primary);
+ background: var(--color-bg-brand-softer);
+ border: 1px solid var(--color-border-on-bg-brand-softer);
+ border-radius: 8px;
+ padding: 8px 13px;
+ position: relative;
+ font-size: 15px;
+ line-height: 22px;
+ cursor: pointer;
+
+ &::after {
+ content: attr(data-show, 'Show more');
+ margin-top: 8px;
+ display: block;
+ font-size: 15px;
+ line-height: 20px;
+ color: var(--color-text-brand);
+ cursor: pointer;
+ border: 0;
+ background: transparent;
+ padding: 0;
+ text-decoration: none;
+ font-weight: 500;
+ }
+
+ &:hover,
+ &:focus-visible {
+ &::after {
+ text-decoration: underline !important;
+ }
+ }
+ }
+
+ &[open] summary {
+ margin-bottom: 16px;
+
+ &::after {
+ content: attr(data-hide, 'Hide post');
+ }
+ }
+ }
+
+ .preview-card {
+ position: relative;
+ max-width: 566px;
+
+ .status-card__image {
+ &--video {
+ aspect-ratio: 16 / 9;
+ }
+
+ &--large {
+ aspect-ratio: 1.91 / 1;
+ }
+
+ aspect-ratio: 1;
+ }
+
+ .spoiler-button__overlay__label {
+ outline: 1px solid var(--color-border-media);
+ }
+
+ .hide-button {
+ // Toggled to appear when the preview-card is unblurred:
+ display: none;
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ color: var(--color-text-on-media);
+ background: var(--color-bg-media);
+ backdrop-filter: $backdrop-blur-filter;
+ outline: 1px solid var(--color-border-media);
+ border: 0;
+ padding: 3px 12px;
+ border-radius: 99px;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 20px;
+
+ &:hover,
+ &:focus {
+ background-color: rgb(from var(--color-bg-media-base) r g b / 90%);
+ }
+ }
+
+ &.preview-card--image-visible {
+ .hide-button {
+ display: block;
+ }
+
+ .spoiler-button__overlay,
+ .status-card__image-preview {
+ display: none;
+ }
+ }
+ }
+
+ .detailed-status__meta {
+ .detailed-status__application,
+ .detailed-status__datetime,
+ .detailed-status__link {
+ color: inherit;
+ }
+ }
+}
+
+.admin {
+ &__terms-of-service {
+ &__container {
+ background: var(--color-bg-tertiary);
+ border-radius: 8px;
+ border: 1px solid var(--color-border-primary);
+ overflow: hidden;
+
+ &__header {
+ padding: 16px;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--color-text-primary);
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ }
+
+ &__body {
+ background: var(--color-bg-primary);
+ padding: 16px;
+ overflow-y: scroll;
+ height: 30vh;
+ }
+ }
+
+ &__history {
+ & > li {
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+
+ &__item {
+ padding: 16px 0;
+ padding-bottom: 8px;
+
+ h5 {
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 600;
+ margin-bottom: 16px;
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+ }
+ }
+ }
+ }
+}
+
+.dot-indicator {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-weight: 500;
+
+ &__indicator {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--color-text-tertiary);
+ }
+
+ &.success {
+ color: var(--color-text-success);
+
+ .dot-indicator__indicator {
+ background-color: var(--color-bg-success-base);
+ }
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/annual_reports.scss b/app/javascript/flavours/glitch/styles_new/mastodon/annual_reports.scss
new file mode 100644
index 0000000000..a9b7e0ddee
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/annual_reports.scss
@@ -0,0 +1,342 @@
+@use 'variables' as *;
+
+:root {
+ --indigo-1: #17063b;
+ --indigo-2: #2f0c7a;
+ --indigo-3: #562cfc;
+ --indigo-5: #858afa;
+ --indigo-6: #cccfff;
+ --lime: #baff3b;
+ --goldenrod-2: #ffc954;
+}
+
+.annual-report {
+ flex: 0 0 auto;
+ background: var(--indigo-1);
+ padding: 24px;
+
+ &__header {
+ margin-bottom: 16px;
+
+ h1 {
+ font-size: 25px;
+ font-weight: 600;
+ line-height: 30px;
+ color: var(--lime);
+ margin-bottom: 8px;
+ }
+
+ p {
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 20px;
+ color: var(--indigo-6);
+ }
+ }
+
+ &__bento {
+ display: grid;
+ gap: 8px;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+ grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(
+ 0,
+ auto
+ );
+
+ &__box {
+ padding: 16px;
+ border-radius: 8px;
+ background: var(--indigo-2);
+ color: var(--indigo-5);
+ }
+ }
+
+ &__summary {
+ &__most-boosted-post {
+ grid-column: span 2;
+ grid-row: span 2;
+ padding: 0;
+
+ .status__content,
+ .content-warning {
+ color: var(--indigo-6);
+ }
+
+ .detailed-status {
+ border: 0;
+ }
+
+ .content-warning {
+ border: 0;
+ background: var(--indigo-1);
+
+ .link-button {
+ color: var(--indigo-5);
+ }
+ }
+
+ .detailed-status__meta__line {
+ border-bottom-color: var(--indigo-3);
+ }
+
+ .detailed-status__meta {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .detailed-status__meta,
+ .poll__footer,
+ .poll__link,
+ .detailed-status .logo,
+ .detailed-status__display-name {
+ color: var(--indigo-5);
+ }
+
+ .detailed-status__meta .animated-number,
+ .detailed-status__display-name strong {
+ color: var(--indigo-6);
+ }
+
+ .poll__chart {
+ background-color: var(--indigo-3);
+
+ &.leading {
+ background-color: var(--goldenrod-2);
+ }
+ }
+
+ .status-card,
+ .hashtag-bar {
+ display: none;
+ }
+ }
+
+ &__followers {
+ grid-column: span 1;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ padding-block-start: 24px;
+ padding-block-end: 24px;
+
+ --sparkline-gradient-top: rgba(86, 44, 252, 50%);
+ --sparkline-gradient-bottom: rgba(86, 44, 252, 0%);
+
+ &__foreground {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ position: relative;
+ z-index: 1;
+ }
+
+ &__number {
+ font-size: 31px;
+ font-weight: 600;
+ line-height: 37px;
+ color: var(--lime);
+ }
+
+ &__label {
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 17px;
+ color: var(--indigo-6);
+ }
+
+ &__footnote {
+ display: block;
+ font-weight: 400;
+ opacity: 0.5;
+ }
+
+ svg {
+ position: absolute;
+ bottom: 0;
+ inset-inline-end: 0;
+ pointer-events: none;
+ z-index: 0;
+ height: 70%;
+ width: auto;
+
+ path:first-child {
+ fill: url('#gradient') !important;
+ fill-opacity: 1 !important;
+ }
+
+ path:last-child {
+ stroke: var(--color-graph-primary-stroke) !important;
+ fill: none !important;
+ }
+ }
+ }
+
+ &__archetype {
+ grid-column: span 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ gap: 8px;
+ padding: 0;
+
+ img {
+ display: block;
+ width: 100%;
+ height: auto;
+ border-radius: 8px;
+ }
+
+ &__label {
+ padding: 16px;
+ padding-bottom: 8px;
+ font-size: 14px;
+ line-height: 17px;
+ font-weight: 600;
+ color: var(--lime);
+ }
+ }
+
+ &__most-used-app {
+ grid-column: span 1;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ box-sizing: border-box;
+
+ &__label {
+ font-size: 14px;
+ line-height: 17px;
+ font-weight: 600;
+ color: var(--indigo-6);
+ }
+
+ &__icon {
+ font-size: 14px;
+ line-height: 17px;
+ font-weight: 600;
+ color: var(--goldenrod-2);
+ }
+ }
+
+ &__percentile {
+ grid-row: span 2;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ text-align: center;
+ text-wrap: balance;
+ padding: 16px 8px;
+
+ &__label {
+ font-size: 14px;
+ line-height: 17px;
+ }
+
+ &__number {
+ font-size: 54px;
+ font-weight: 600;
+ line-height: 73px;
+ color: var(--goldenrod-2);
+ }
+
+ &__footnote {
+ font-size: 11px;
+ line-height: 14px;
+ opacity: 0.5;
+ }
+ }
+
+ &__new-posts {
+ grid-column: span 2;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+
+ &__label {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ color: var(--indigo-6);
+ z-index: 1;
+ position: relative;
+ }
+
+ &__number {
+ font-size: 76px;
+ font-weight: 600;
+ line-height: 91px;
+ color: var(--goldenrod-2);
+ z-index: 1;
+ position: relative;
+ }
+
+ svg {
+ position: absolute;
+ inset-inline-start: -7px;
+ top: -4px;
+ z-index: 0;
+ }
+ }
+
+ &__most-used-hashtag {
+ grid-column: span 2;
+ text-align: center;
+ overflow: hidden;
+
+ &__hashtag {
+ font-size: 42px;
+ font-weight: 600;
+ line-height: 58px;
+ color: var(--indigo-6);
+ margin-inline-start: -100%;
+ margin-inline-end: -100%;
+ }
+
+ &__label {
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 17px;
+ }
+ }
+ }
+}
+
+.annual-report-modal {
+ max-width: 600px;
+ background: var(--indigo-1);
+ border-radius: 16px;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+
+ .loading-indicator .circular-progress {
+ color: var(--lime);
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ border-bottom: 0;
+ border-radius: 16px 16px 0 0;
+ }
+}
+
+.notification-group--annual-report {
+ .notification-group__icon {
+ color: var(--lime);
+ }
+
+ .notification-group__main .link-button {
+ font-weight: 500;
+ color: var(--lime);
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/basics.scss b/app/javascript/flavours/glitch/styles_new/mastodon/basics.scss
new file mode 100644
index 0000000000..6298409d15
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/basics.scss
@@ -0,0 +1,300 @@
+@use 'variables' as *;
+
+html.has-modal {
+ &,
+ body {
+ touch-action: none;
+ overscroll-behavior: none;
+ -webkit-overflow-scrolling: auto;
+ scrollbar-gutter: stable;
+ }
+
+ body {
+ overflow: hidden !important;
+ }
+}
+
+body {
+ font-family: $font-sans-serif, sans-serif;
+ background: var(--color-bg-ambient);
+ font-size: 13px;
+ line-height: 18px;
+ font-weight: 400;
+ color: var(--color-text-primary);
+ text-rendering: optimizelegibility;
+
+ // Disable kerning for Japanese text to preserve monospaced alignment for readability
+ &:not(:lang(ja)) {
+ font-feature-settings: 'kern';
+ }
+
+ text-size-adjust: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+ -webkit-tap-highlight-color: transparent;
+
+ &.system-font {
+ // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
+ // -apple-system => Safari <11 specific
+ // BlinkMacSystemFont => Chrome <56 on macOS specific
+ // Segoe UI => Windows 7/8/10
+ // Oxygen => KDE
+ // Ubuntu => Unity/Ubuntu
+ // Cantarell => GNOME
+ // Fira Sans => Firefox OS
+ // Droid Sans => Older Androids (<4.0)
+ // Helvetica Neue => Older macOS <10.11
+ // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ 'Segoe UI',
+ Oxygen,
+ Ubuntu,
+ Cantarell,
+ 'Fira Sans',
+ 'Droid Sans',
+ 'Helvetica Neue',
+ $font-sans-serif,
+ sans-serif;
+ }
+
+ &.app-body {
+ padding: 0;
+ padding-left: env(safe-area-inset-left);
+ padding-right: env(safe-area-inset-right);
+ box-sizing: border-box;
+
+ &.layout-single-column {
+ height: auto;
+ min-height: 100vh;
+ min-height: 100dvh;
+ overflow-y: scroll;
+ }
+
+ &.layout-multiple-columns {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ padding-bottom: env(safe-area-inset-bottom);
+ }
+ }
+
+ &.player {
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+
+ & > div {
+ height: 100%;
+ }
+
+ .video-player video {
+ width: 100%;
+ height: 100%;
+ max-height: 100vh;
+ }
+
+ .media-gallery {
+ margin-top: 0;
+ height: 100% !important;
+ border-radius: 0;
+ }
+
+ .media-gallery__item {
+ border-radius: 0;
+ }
+ }
+
+ &.embed {
+ margin: 0;
+ padding-bottom: 0;
+ overflow: hidden;
+ }
+
+ &.admin {
+ padding: 0;
+ background: var(--color-bg-primary);
+ }
+
+ &.error {
+ position: absolute;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .dialog {
+ vertical-align: middle;
+ margin: 20px;
+
+ &__illustration {
+ img {
+ display: block;
+ max-width: 470px;
+ width: 100%;
+ height: auto;
+ margin-top: -120px;
+ margin-bottom: -45px;
+ }
+ }
+
+ h1 {
+ font-size: 20px;
+ line-height: 28px;
+ font-weight: 400;
+ }
+ }
+ }
+}
+
+a {
+ &:focus {
+ border-radius: 4px;
+ outline: var(--outline-focus-default);
+ }
+
+ &:focus:not(:focus-visible) {
+ outline: none;
+ }
+}
+
+button {
+ font-family: inherit;
+ cursor: pointer;
+
+ &:focus:not(:focus-visible) {
+ outline: none;
+ }
+}
+
+.app-holder {
+ &,
+ & > div,
+ & > noscript {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ outline: 0 !important;
+ }
+
+ & > noscript {
+ min-height: 100vh;
+ min-height: 100dvh;
+ }
+}
+
+.layout-single-column .app-holder {
+ &,
+ & > div {
+ min-height: 100vh;
+ min-height: 100dvh;
+ }
+}
+
+.layout-multiple-columns .app-holder {
+ &,
+ & > div {
+ height: 100%;
+ }
+}
+
+.error-boundary,
+.app-holder noscript {
+ flex-direction: column;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 1.7;
+ color: var(--color-text-error);
+ text-align: center;
+
+ & > div {
+ max-width: 500px;
+ }
+
+ p {
+ margin-bottom: 0.85em;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ color: var(--color-text-brand);
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+ }
+
+ &__footer {
+ color: var(--color-text-secondary);
+ font-size: 13px;
+
+ a {
+ color: var(--color-text-secondary);
+ }
+ }
+
+ button {
+ display: inline;
+ border: 0;
+ background: transparent;
+ color: var(--color-text-secondary);
+ font: inherit;
+ padding: 0;
+ margin: 0;
+ line-height: inherit;
+ cursor: pointer;
+ outline: 0;
+ transition: color 300ms linear;
+ text-decoration: underline;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+
+ &.copied {
+ color: var(--mas-status-success-color);
+ transition: none;
+ }
+ }
+}
+
+.logo-resources {
+ // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029
+ visibility: hidden;
+ user-select: none;
+ pointer-events: none;
+ width: 0;
+ height: 0;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ z-index: -1000;
+}
+
+// NoScript adds a __ns__pop2top class to the full ancestry of blocked elements,
+// to set the z-index to a high value, which messes with modals and dropdowns.
+// Blocked elements can in theory only be media and frames/embeds, so they
+// should only appear in statuses, under divs and articles.
+body,
+div,
+article {
+ .__ns__pop2top {
+ z-index: unset !important;
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/branding.scss b/app/javascript/flavours/glitch/styles_new/mastodon/branding.scss
new file mode 100644
index 0000000000..a7cc9c500e
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/branding.scss
@@ -0,0 +1,5 @@
+@use 'variables' as *;
+
+.logo {
+ color: var(--color-text-primary);
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/components.scss b/app/javascript/flavours/glitch/styles_new/mastodon/components.scss
new file mode 100644
index 0000000000..61faaf1f32
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/components.scss
@@ -0,0 +1,11789 @@
+@use 'sass:color';
+@use 'variables' as *;
+@use 'mixins' as *;
+
+.app-body {
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+.animated-number {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: stretch;
+ overflow: hidden;
+ position: relative;
+}
+
+.inline-alert {
+ color: var(--color-text-success);
+ font-weight: 400;
+
+ .no-reduce-motion & {
+ transition: opacity 200ms ease;
+ }
+}
+
+.link-button {
+ display: block;
+ font-size: 15px;
+ line-height: 20px;
+ color: var(--color-text-brand);
+ border: 0;
+ background: transparent;
+ padding: 0;
+ cursor: pointer;
+ text-decoration: none;
+
+ &--destructive {
+ color: var(--color-text-error);
+ }
+
+ &:hover,
+ &:active {
+ text-decoration: underline;
+ }
+
+ &:disabled {
+ color: var(--color-text-primary);
+ cursor: default;
+ }
+
+ &:focus-visible {
+ outline: var(--outline-focus-default);
+ }
+}
+
+.help-button {
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ border: 0;
+ border-radius: 20px;
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background: var(--color-bg-brand-base-hover);
+ }
+
+ &:focus-visible {
+ outline: var(--outline-focus-default);
+ }
+
+ .icon {
+ width: 14px;
+ height: 14px;
+ }
+}
+
+.button {
+ background-color: var(--color-bg-brand-base);
+ border: 10px none;
+ border-radius: 4px;
+ box-sizing: border-box;
+ color: var(--color-text-on-brand-base);
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ font-family: inherit;
+ font-size: 15px;
+ font-weight: 500;
+ letter-spacing: 0;
+ line-height: 22px;
+ overflow: hidden;
+ padding: 7px 18px;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: auto;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: var(--color-bg-brand-base-hover);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--color-bg-brand-base);
+ outline-offset: 2px;
+ }
+
+ &--compact {
+ font-size: 14px;
+ line-height: normal;
+ font-weight: 700;
+ padding: 5px 12px;
+ border-radius: 4px;
+ }
+
+ &--dangerous {
+ background-color: var(--color-bg-error-base);
+ color: var(--color-text-on-error-base);
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: var(--color-bg-error-base-hover);
+ transition: none;
+ }
+ }
+
+ &--destructive {
+ &:active,
+ &:focus,
+ &:hover {
+ color: var(--color-text-on-error-base);
+ background-color: var(--color-bg-error-base);
+ transition: none;
+ }
+ }
+
+ &:disabled,
+ &.disabled {
+ color: var(--color-text-on-disabled);
+ background-color: var(--color-bg-disabled);
+ cursor: not-allowed;
+ }
+
+ &.copyable {
+ transition: background 300ms linear;
+ }
+
+ &.copied {
+ color: var(--color-text-on-success-base);
+ background-color: var(--color-bg-success-base);
+ transition: none;
+ }
+
+ &.button-secondary {
+ color: var(--color-text-brand);
+ background: transparent;
+ padding: 6px 17px;
+ border: 1px solid var(--color-text-brand);
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: var(--color-text-brand);
+ color: var(--color-text-brand);
+ background-color: transparent;
+ text-decoration: none;
+ }
+
+ &.button--destructive {
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: var(--color-text-error);
+ color: var(--color-text-error);
+ }
+ }
+
+ &:disabled,
+ &.disabled {
+ border-color: var(--color-text-disabled);
+ color: var(--color-text-disabled);
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: var(--color-text-disabled);
+ color: var(--color-text-disabled);
+ }
+ }
+ }
+
+ &.button--plain {
+ color: var(--color-text-brand);
+ background: transparent;
+ padding: 6px;
+
+ // The button has no outline, so we use negative margin to
+ // visually align its label with its surroundings while maintaining
+ // a generous click target
+ margin-inline: -6px;
+ border: 1px solid transparent;
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: transparent;
+ color: var(--color-text-brand-soft);
+ background-color: transparent;
+ text-decoration: none;
+ }
+
+ &:disabled,
+ &.disabled {
+ opacity: 0.7;
+ border-color: transparent;
+ color: var(--color-text-disabled);
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: transparent;
+ color: var(--color-text-disabled);
+ }
+ }
+ }
+
+ &.button--block {
+ width: 100%;
+ }
+
+ &.loading {
+ cursor: wait;
+
+ .button__label-wrapper {
+ // Hide the label only visually, so that
+ // it keeps its layout and accessibility
+ opacity: 0;
+ }
+
+ .loading-indicator {
+ position: absolute;
+ inset: 0;
+ }
+ }
+
+ .icon {
+ width: 18px;
+ height: 18px;
+ }
+}
+
+.column__wrapper {
+ display: flex;
+ flex: 1 1 auto;
+ position: relative;
+}
+
+.icon {
+ flex: 0 0 auto;
+ width: 24px;
+ height: 24px;
+ aspect-ratio: 1;
+
+ path {
+ fill: currentColor;
+ }
+}
+
+.icon-button {
+ --default-icon-color: var(--color-text-secondary);
+ --default-bg-color: transparent;
+ --hover-icon-color: var(--color-text-primary);
+ --hover-bg-color: var(--color-bg-brand-softer);
+
+ display: inline-flex;
+ color: var(--default-icon-color);
+ border: 0;
+ padding: 0;
+ border-radius: 4px;
+ background: var(--default-bg-color);
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ gap: 4px;
+ flex: 0 0 auto;
+
+ a {
+ display: flex;
+ color: inherit;
+ text-decoration: none;
+ }
+
+ &:hover,
+ &:active,
+ &:focus-visible {
+ color: var(--hover-icon-color);
+ background-color: var(--hover-bg-color);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--color-text-brand);
+ }
+
+ &.disabled {
+ color: var(--color-text-disabled);
+ background-color: var(--default-bg-color);
+ cursor: default;
+ }
+
+ &.inverted {
+ --default-icon-color: var(--color-text-primary);
+ --hover-icon-color: var(--color-text-secondary);
+ }
+
+ &.active {
+ --default-icon-color: var(--color-text-brand);
+ --hover-icon-color: var(--color-text-brand);
+ --hover-bg-color: transparent;
+ }
+
+ &.overlayed {
+ --default-icon-color: rgb(from var(--color-text-on-media) r g b / 70%);
+ --default-bg-color: var(--color-bg-media);
+ --hover-icon-color: var(--color-text-brand);
+ --hover-bg-color: rgb(from var(--color-bg-media-base) r g b / 90%);
+
+ box-sizing: content-box;
+ backdrop-filter: $backdrop-blur-filter;
+ border-radius: 4px;
+ padding: 2px;
+ }
+
+ &--with-counter {
+ padding-inline-end: 4px;
+ }
+
+ &__counter {
+ display: block;
+ width: auto;
+ font-size: 12px;
+ font-weight: 500;
+ }
+
+ &.copyable {
+ transition: all 300ms linear;
+ }
+
+ &.copied {
+ color: var(--color-text-success);
+ transition: none;
+ background-color: var(--color-bg-success-softer);
+ border-color: var(--color-border-on-bg-brand-softer);
+ }
+}
+
+body > [data-popper-placement] {
+ z-index: 9999;
+}
+
+.invisible {
+ font-size: 0;
+ line-height: 0;
+ display: inline-block;
+ width: 0;
+ height: 0;
+ position: absolute;
+
+ img,
+ svg {
+ margin: 0 !important;
+ border: 0 !important;
+ padding: 0 !important;
+ width: 0 !important;
+ height: 0 !important;
+ }
+}
+
+.ellipsis {
+ &::after {
+ content: '…';
+ }
+}
+
+.autosuggest-textarea {
+ &__textarea {
+ background: transparent;
+ min-height: 100px;
+ padding-bottom: 0;
+ resize: none;
+ scrollbar-color: initial;
+
+ &::-webkit-scrollbar {
+ all: unset;
+ }
+ }
+
+ &__suggestions {
+ box-shadow: var(--dropdown-shadow);
+ background: var(--color-bg-elevated);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 0 0 4px 4px;
+ color: var(--color-text-primary);
+ font-size: 14px;
+ padding: 0;
+
+ &__item {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ height: 48px;
+ cursor: pointer;
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: var(--color-text-primary);
+
+ &:last-child {
+ border-radius: 0 0 4px 4px;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: var(--color-bg-secondary);
+
+ .autosuggest-account .display-name__account {
+ color: inherit;
+ }
+ }
+
+ &.selected {
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+
+ .autosuggest-account .display-name__account {
+ color: inherit;
+ }
+ }
+ }
+ }
+}
+
+.autosuggest-account,
+.autosuggest-emoji,
+.autosuggest-hashtag {
+ flex: 1 0 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 12px;
+ padding: 8px 12px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.autosuggest-account {
+ .display-name {
+ font-weight: 400;
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 0;
+ }
+
+ .display-name__account {
+ display: block;
+ line-height: 16px;
+ font-size: 12px;
+ color: var(--color-text-secondary);
+ }
+}
+
+.autosuggest-hashtag {
+ justify-content: space-between;
+
+ &__name {
+ flex: 1 1 auto;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &__uses {
+ flex: 0 0 auto;
+ text-align: end;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
+
+.autosuggest-emoji {
+ &__name {
+ flex: 1 0 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
+
+.autosuggest-account .account__avatar,
+.autosuggest-emoji img {
+ display: block;
+ width: 24px;
+ height: 24px;
+ flex: 0 0 auto;
+}
+
+.compose-form {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ .layout-multiple-columns &,
+ .column & {
+ padding: 15px;
+ }
+
+ &__highlightable {
+ display: flex;
+ flex-direction: column;
+ flex: 0 1 auto;
+ border-radius: 4px;
+ border: 1px solid var(--color-border-on-bg-secondary);
+ transition: border-color 300ms linear;
+ position: relative;
+ background: var(--color-bg-secondary);
+
+ &.active {
+ transition: none;
+ border-color: var(--color-text-brand);
+ }
+ }
+
+ &__warning {
+ color: var(--color-text-primary);
+ background: var(--color-bg-warning-softer);
+ border: 1px solid var(--color-border-on-bg-warning-softer);
+ padding: 8px 10px;
+ border-radius: 4px;
+ font-size: 13px;
+ font-weight: 400;
+
+ strong {
+ font-weight: 500;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+
+ a {
+ color: var(--color-text-brand);
+ font-weight: 500;
+ text-decoration: underline;
+
+ &:hover,
+ &:active,
+ &:focus {
+ text-decoration: none;
+ }
+ }
+ }
+
+ .spoiler-input {
+ display: flex;
+ align-items: stretch;
+
+ &__border {
+ background: url('@/images/warning-stripes.svg') repeat-y;
+ width: 5px;
+ flex: 0 0 auto;
+ }
+
+ .autosuggest-input {
+ flex: 1 1 auto;
+ border: 1px solid var(--color-border-primary);
+ border-width: 1px 0;
+ }
+ }
+
+ .autosuggest-textarea__textarea,
+ .spoiler-input__input {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ margin: 0;
+ color: var(--color-text-primary);
+ background: transparent;
+ font-family: inherit;
+ font-size: 14px;
+ padding: 12px;
+ line-height: normal;
+ border: 0;
+ outline: 0;
+
+ &:focus {
+ outline: 0;
+ }
+ }
+
+ .spoiler-input__input {
+ padding: 12px 12px - 5px;
+ background: var(--color-bg-brand-softer);
+ color: var(--color-text-brand);
+ }
+
+ &__dropdowns {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: 8px;
+ flex-wrap: wrap;
+
+ & > div {
+ overflow: hidden;
+ display: flex;
+ }
+ }
+
+ &__uploads {
+ padding: 0 12px;
+ aspect-ratio: 3/2;
+ flex-shrink: 0;
+ }
+
+ .media-gallery {
+ gap: 8px;
+ }
+
+ &__upload {
+ position: relative;
+
+ &.draggable {
+ will-change: transform, opacity;
+ touch-action: none;
+ cursor: grab;
+ }
+
+ &.dragging {
+ opacity: 0;
+ }
+
+ &.overlay {
+ height: 100%;
+ border-radius: 8px;
+ pointer-events: none;
+ }
+
+ &__actions {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding: 8px;
+ }
+
+ &__preview,
+ &__visualizer {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ top: 0;
+ }
+
+ &__preview {
+ border-radius: 6px;
+ inset-inline-start: 0;
+ }
+
+ &__visualizer {
+ padding: 16px;
+ box-sizing: border-box;
+
+ .audio-player__visualizer {
+ margin: 0 auto;
+ display: block;
+ height: 100%;
+ }
+
+ .icon {
+ position: absolute;
+ top: 50%;
+ inset-inline-start: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0.75;
+ color: var(--player-foreground-color);
+ filter: var(--overlay-icon-shadow);
+ width: 48px;
+ height: 48px;
+ }
+ }
+
+ &__thumbnail {
+ width: 100%;
+ height: 100%;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ overflow: hidden;
+ }
+
+ .icon-button {
+ flex: 0 0 auto;
+ color: var(--color-text-on-media);
+ background: var(--color-bg-media);
+ backdrop-filter: $backdrop-blur-filter;
+ border-radius: 6px;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 500;
+ padding: 4px 8px;
+ font-family: inherit;
+
+ .icon {
+ width: 15px;
+ height: 15px;
+ }
+ }
+
+ .icon-button.compose-form__upload__delete {
+ padding: 2px;
+ border-radius: 50%;
+
+ .icon {
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ &__warning {
+ position: absolute;
+ z-index: 2;
+ bottom: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ padding: 8px;
+
+ .icon-button.active {
+ color: var(--color-text-on-warning-base);
+ background: var(--color-bg-warning-base);
+ }
+ }
+ }
+
+ &__footer {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 12px;
+ }
+
+ // glitch: reintroduce sensitive button
+ &__sensitive-button {
+ padding: 0 12px;
+
+ input[type='checkbox'] {
+ appearance: none;
+ display: block;
+ border: 1px solid var(--color-text-secondary);
+ box-sizing: border-box;
+ width: 17px;
+ height: 17px;
+ border-radius: 4px;
+ flex: 0 0 auto;
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: var(--color-text-success);
+ border-width: 4px;
+ }
+
+ &:checked {
+ background-color: var(--color-text-success);
+ border-color: var(--color-text-success);
+ }
+
+ &::-moz-focus-inner {
+ outline: 0 !important;
+ border: 0;
+ }
+
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ }
+ }
+ }
+
+ &__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: var(--color-text-brand);
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: var(--color-text-brand);
+ }
+
+ &.disabled {
+ color: var(--color-text-disabled);
+ }
+
+ &.active {
+ background: var(--color-bg-brand-base);
+ color: var(--color-text-on-brand-base);
+ }
+ }
+ }
+
+ &__poll {
+ margin-top: 8px;
+ display: flex;
+ flex-direction: column;
+ align-self: stretch;
+ gap: 8px;
+
+ .poll__option {
+ padding: 0 12px;
+ gap: 8px;
+
+ &.empty:not(:focus-within) {
+ opacity: 0.5;
+ }
+ }
+
+ .poll__input {
+ width: 17px;
+ height: 17px;
+ border-color: var(--color-text-secondary);
+ }
+
+ &__footer {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding-inline-start: 37px;
+ padding-inline-end: 40px;
+
+ &__sep {
+ width: 1px;
+ height: 22px;
+ background: var(--color-border-primary);
+ flex: 0 0 auto;
+ }
+ }
+
+ &__select {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ flex: 1 1 auto;
+ min-width: 0;
+
+ &__label {
+ flex: 0 0 auto;
+ font-size: 11px;
+ font-weight: 500;
+ line-height: 16px;
+ letter-spacing: 0.5px;
+ color: var(--color-text-secondary);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ &__value {
+ flex: 0 0 auto;
+ appearance: none;
+ background: transparent;
+ border: none;
+ padding: 0;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0.1px;
+ color: var(--color-text-brand);
+ background-color: var(--color-bg-secondary-solid);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+ }
+
+ .status__quote {
+ margin: 0 8px;
+ max-height: 220px;
+
+ // Override .status__content .status__content__text.status__content__text--visible
+ .status__content__text.status__content__text {
+ display: -webkit-box;
+ }
+
+ .status__content__text {
+ -webkit-line-clamp: 4;
+ line-clamp: 4;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+ }
+}
+
+.dropdown-button {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: var(--color-text-brand);
+ background: transparent;
+ border: 1px solid var(--color-text-brand);
+ border-radius: 6px;
+ padding: 4px 8px;
+ font-size: 13px;
+ line-height: normal;
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ &[disabled] {
+ cursor: default;
+ color: var(--color-text-disabled);
+ border-color: var(--color-text-disabled);
+ }
+
+ .icon {
+ width: 15px;
+ height: 15px;
+ flex: 0 0 auto;
+ }
+
+ &__label {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1 1 auto;
+ }
+
+ &.active {
+ color: var(--color-text-on-brand-base);
+ border-color: var(--color-bg-brand-base);
+ background: var(--color-bg-brand-base);
+ }
+
+ &.warning {
+ color: var(--color-text-warning);
+ border-color: var(--color-text-warning);
+
+ &.active {
+ color: var(--color-text-on-warning-base);
+ border-color: var(--color-bg-warning-base);
+ background-color: var(--color-bg-warning-base);
+ }
+ }
+}
+
+.character-counter {
+ cursor: default;
+ font-family: $font-sans-serif, sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: normal;
+ color: var(--color-text-secondary);
+ flex: 1 0 auto;
+ text-align: end;
+
+ &.character-counter--over {
+ color: var(--color-text-error);
+ }
+}
+
+.no-reduce-motion .spoiler-input {
+ transition:
+ height 0.4s ease,
+ opacity 0.4s ease;
+}
+
+.sign-in-banner {
+ padding: 10px;
+
+ p {
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--color-text-primary);
+ margin-bottom: 20px;
+
+ strong {
+ font-weight: 700;
+ }
+
+ a {
+ color: var(--color-text-primary);
+ text-decoration: none;
+ unicode-bidi: isolate;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .button {
+ margin-bottom: 10px;
+ }
+}
+
+.emojione {
+ font-size: inherit;
+ vertical-align: middle;
+ object-fit: contain;
+ margin: -0.2ex 0.15em 0.2ex;
+ width: 16px;
+ height: 16px;
+
+ img {
+ width: auto;
+ }
+}
+
+.status__content--with-action {
+ cursor: pointer;
+}
+
+.status__content {
+ clear: both;
+}
+
+.status__content,
+.edit-indicator__content,
+.reply-indicator__content {
+ position: relative;
+ overflow-wrap: break-word;
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 15px;
+ line-height: 20px;
+ padding-top: 2px;
+ color: var(--color-text-primary);
+
+ &:focus {
+ outline: 0;
+ }
+
+ &.status__content--with-spoiler {
+ white-space: normal;
+
+ .status__content__text {
+ white-space: pre-wrap;
+ }
+ }
+
+ .emojione {
+ width: 20px;
+ height: 20px;
+ margin: -3px 0 0;
+ }
+
+ p,
+ pre {
+ margin-bottom: 20px;
+ white-space: pre-wrap;
+ unicode-bidi: plaintext;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ color: var(--color-text-status-links);
+ text-decoration: none;
+ unicode-bidi: isolate;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &.mention {
+ &:hover {
+ text-decoration: none;
+
+ span {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+
+ a.unhandled-link {
+ color: var(--color-text-brand);
+
+ .link-origin-tag {
+ color: var(--color-text-warning);
+ 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: var(--color-border-primary);
+ width: 2px;
+ height: calc(100% + 32px - 8px); // Account for gap to next element
+ }
+ }
+
+ &__content {
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ display: -webkit-box;
+ line-clamp: 4;
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ padding: 0;
+ max-height: 4 * 20px;
+ overflow: hidden;
+ color: var(--color-text-secondary);
+ }
+
+ &__attachments {
+ margin-top: 4px;
+ color: var(--color-text-secondary);
+ font-size: 12px;
+ line-height: 16px;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ .icon {
+ width: 18px;
+ height: 18px;
+ }
+ }
+}
+
+.edit-indicator {
+ border-radius: 4px 4px 0 0;
+ background: var(--color-bg-tertiary);
+ padding: 12px;
+ overflow-y: auto;
+ flex: 0 0 auto;
+ border-bottom: 1px solid var(--color-border-primary);
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+
+ &__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: var(--color-text-secondary);
+ font-size: 12px;
+ line-height: 16px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__cancel {
+ display: flex;
+
+ .icon {
+ width: 18px;
+ height: 18px;
+ }
+ }
+
+ &__display-name {
+ display: flex;
+ gap: 4px;
+
+ a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__content {
+ color: var(--color-text-primary);
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ padding-top: 0 !important;
+ display: -webkit-box;
+ line-clamp: 4;
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ max-height: 4 * 20px;
+ overflow: hidden;
+
+ a {
+ color: var(--color-text-brand);
+ }
+ }
+
+ &__attachments {
+ color: var(--color-text-secondary);
+ font-size: 12px;
+ line-height: 16px;
+ opacity: 0.75;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ .icon {
+ width: 18px;
+ height: 18px;
+ }
+ }
+}
+
+.edit-indicator__content,
+.reply-indicator__content {
+ .emojione {
+ width: 18px;
+ height: 18px;
+ margin: -3px 0 0;
+ }
+}
+
+.announcements__content {
+ overflow-wrap: break-word;
+ overflow-y: auto;
+
+ .emojione {
+ width: 20px;
+ height: 20px;
+ margin: -3px 0 0;
+ }
+
+ p {
+ margin-bottom: 10px;
+ white-space: pre-wrap;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ color: var(--color-text-primary);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &.mention {
+ &:hover {
+ text-decoration: none;
+
+ span {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &.unhandled-link {
+ color: var(--color-text-brand);
+ }
+ }
+}
+
+.status__content.status__content--collapsed {
+ max-height: 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: var(--color-text-brand);
+ border: 0;
+ background: transparent;
+ padding: 0;
+ margin-top: 16px;
+ text-decoration: none;
+ text-wrap: nowrap;
+
+ .status--is-quote & {
+ // Needed to prevent buttons from stretching across whole
+ // status width in Safari due to line-clamp
+ width: min-content;
+ white-space: nowrap;
+ }
+
+ &:hover,
+ &:active {
+ text-decoration: underline;
+ }
+
+ .icon {
+ width: 15px;
+ height: 15px;
+ }
+}
+
+.translate-button {
+ margin-top: 16px;
+ font-size: 15px;
+ line-height: 20px;
+ display: flex;
+ justify-content: space-between;
+ color: var(--color-text-tertiary);
+}
+
+.status__wrapper--filtered {
+ color: var(--color-text-tertiary);
+ border: 0;
+ font-size: inherit;
+ text-align: center;
+ line-height: inherit;
+ margin: 0;
+ padding: 15px;
+ box-sizing: border-box;
+ width: 100%;
+ clear: both;
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &__button {
+ display: inline;
+ color: var(--color-text-brand);
+ border: 0;
+ background: transparent;
+ padding: 0;
+ font-size: inherit;
+ line-height: inherit;
+
+ &:hover,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+}
+
+.focusable {
+ &:focus-visible {
+ outline: 2px solid var(--color-text-brand);
+ outline-offset: -2px;
+ background: var(--color-bg-brand-softer);
+ }
+}
+
+.status {
+ padding: 10px 14px; // glitch: reduced padding
+ min-height: 54px;
+ border-bottom: 1px solid var(--color-border-primary);
+ cursor: auto;
+ opacity: 1;
+ animation: fade 150ms linear;
+
+ @keyframes fade {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+ }
+
+ .content-warning {
+ margin-bottom: 10px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .media-gallery,
+ .video-player,
+ .audio-player,
+ .attachment-list {
+ margin-top: 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(--color-border-primary);
+ }
+
+ &__line {
+ --thread-line-color: var(--color-border-primary);
+
+ height: 10px - 4px;
+ border-inline-start: 2px solid var(--thread-line-color);
+ 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: var(--thread-line-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: var(--color-bg-brand-softer);
+ opacity: 0;
+ animation: fade 0.7s reverse both 0.3s;
+ pointer-events: none;
+ }
+}
+
+.status__relative-time {
+ display: block;
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ text-align: end;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.notification__relative_time {
+ color: var(--color-text-tertiary);
+ float: right;
+ font-size: 14px;
+ padding-bottom: 1px;
+}
+
+.status__display-name {
+ color: var(--color-text-secondary);
+}
+
+.status__info .status__display-name {
+ max-width: 100%;
+ display: flex;
+ font-size: 15px;
+ line-height: 22px;
+ align-items: start; // glitch: changed because of our different layout
+ 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;
+ justify-content: space-between;
+ gap: 10px;
+ cursor: pointer;
+}
+
+.status__info__icons {
+ display: flex;
+ align-items: center;
+ height: 1em;
+ color: var(--color-text-tertiary);
+ 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: var(--color-text-tertiary);
+
+ span {
+ display: inline;
+ }
+
+ &:hover strong {
+ text-decoration: none;
+ }
+ }
+
+ .media-gallery,
+ .audio-player,
+ .video-player {
+ margin-top: 15px;
+ max-width: 250px;
+ }
+
+ .status__content {
+ padding: 0;
+ white-space: normal;
+ }
+
+ .media-gallery__item-thumbnail {
+ cursor: default;
+ }
+}
+
+.status__prepend {
+ padding: 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: var(--color-text-secondary);
+
+ &__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ }
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ > span {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+
+.status__wrapper-direct,
+.notification-ungrouped--direct,
+.notification-group--direct,
+.notification-group--annual-report {
+ background: var(--color-bg-brand-softer);
+
+ &:focus {
+ background: var(--color-bg-brand-soft);
+ }
+}
+
+.status__wrapper-direct,
+.notification-ungrouped--direct {
+ .status__prepend,
+ .notification-ungrouped__header {
+ color: var(--color-text-brand);
+ }
+}
+
+.status__action-bar {
+ display: flex;
+ 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(--color-border-primary);
+
+ .status__content {
+ font-size: 19px;
+ line-height: 24px;
+
+ .emojione {
+ width: 24px;
+ height: 24px;
+ margin: -1px 0 0;
+ }
+ }
+
+ .media-gallery,
+ .video-player,
+ .audio-player {
+ margin-top: 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: var(--color-text-tertiary);
+ }
+}
+
+.embed {
+ position: relative;
+
+ &__overlay {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ .detailed-status {
+ border-top: 0;
+ }
+}
+
+.scrollable > div:first-child .detailed-status {
+ border-top: 0;
+}
+
+.detailed-status__meta {
+ margin-top: 24px;
+ color: var(--color-text-tertiary);
+ font-size: 14px;
+ line-height: 18px;
+
+ &__line {
+ border-bottom: 1px solid var(--color-border-primary);
+ padding: 8px 0;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &:first-child {
+ padding-top: 0;
+ }
+
+ &:last-child {
+ padding-bottom: 0;
+ border-bottom: 0;
+ }
+ }
+
+ .icon {
+ width: 18px;
+ height: 18px;
+ }
+
+ .animated-number {
+ color: var(--color-text-primary);
+ font-weight: 500;
+ }
+}
+
+.detailed-status__action-bar {
+ border-top: 1px solid var(--color-border-primary);
+ border-bottom: 1px solid var(--color-border-primary);
+ display: flex;
+ flex-direction: row;
+ padding: 8px 0; // glitch: reduced padding
+}
+
+.detailed-status__wrapper-direct {
+ .detailed-status,
+ .detailed-status__action-bar {
+ background: var(--color-bg-brand-softer);
+ }
+
+ .status__prepend {
+ color: var(--color-text-brand);
+ }
+}
+
+.status__quote {
+ // --status-gutter-width is currently only set inside of
+ // .notification-ungrouped, so everywhere else this will fall back
+ // to the pixel values
+ --quote-margin: var(--status-gutter-width);
+
+ position: relative;
+ overflow: hidden;
+ margin-block-start: 16px;
+ margin-inline-start: calc(var(--quote-margin) + var(--thread-margin, 0px));
+ border-radius: 12px;
+ color: var(--color-text-primary);
+ border: 1px solid var(--color-border-primary);
+}
+
+.status__quote--error {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ padding: 12px;
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ min-height: 56px;
+
+ .link-button {
+ font-size: inherit;
+ line-height: inherit;
+ letter-spacing: inherit;
+ }
+}
+
+.status__quote-author-button {
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ margin-top: 8px;
+ padding: 8px 12px;
+ align-items: center;
+ font-family: inherit;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ color: var(--color-text-secondary);
+ background: var(--color-bg-brand-softer);
+ border-radius: 8px;
+ cursor: default;
+}
+
+.status--is-quote {
+ border: none;
+ padding: 12px;
+
+ .status__info {
+ padding-bottom: 8px;
+ }
+
+ .display-name,
+ .status__relative-time {
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.1px;
+ }
+
+ .display-name__account {
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0.5px;
+ }
+
+ .status__content {
+ display: -webkit-box;
+ font-size: 14px;
+ letter-spacing: 0.25px;
+ line-height: 20px;
+ -webkit-line-clamp: 4;
+ line-clamp: 4;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+
+ p {
+ margin-bottom: 20px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ .media-gallery,
+ .video-player,
+ .audio-player,
+ .attachment-list,
+ .poll {
+ margin-top: 8px;
+ }
+}
+
+.detailed-status__link {
+ display: inline-flex;
+ align-items: center;
+ color: inherit;
+ text-decoration: none;
+ gap: 6px;
+}
+
+.domain {
+ padding: 16px;
+ border-bottom: 1px solid var(--color-border-primary);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &__domain-name {
+ flex: 1 1 auto;
+ color: var(--color-text-primary);
+ font-size: 15px;
+ line-height: 21px;
+ font-weight: 500;
+ }
+}
+
+.account {
+ padding: 10px; // glitch: reduced padding
+ border-bottom: 1px solid var(--color-border-primary);
+
+ .account__display-name {
+ flex: 1 1 auto;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ color: var(--color-text-secondary);
+ overflow: hidden;
+ text-decoration: none;
+ font-size: 14px;
+
+ .display-name {
+ margin-bottom: 4px;
+ }
+
+ .display-name strong {
+ display: inline;
+ color: var(--color-text-primary);
+ }
+ }
+
+ &--minimal {
+ .account__display-name {
+ .display-name {
+ margin-bottom: 0;
+ }
+
+ .display-name strong {
+ display: block;
+ }
+ }
+ }
+
+ &__avatar-wrapper .account__avatar {
+ @container (width < 360px) {
+ width: 35px !important;
+ height: 35px !important;
+ }
+ }
+
+ &__domain-pill {
+ display: inline-flex;
+ background: var(--color-bg-brand-softer);
+ border-radius: 4px;
+ border: 0;
+ color: var(--color-text-brand);
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 16px;
+ padding: 4px 8px;
+
+ &.active {
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ }
+
+ &__popout {
+ background: var(--color-bg-elevated);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ box-shadow: var(--dropdown-shadow);
+ max-width: 320px;
+ padding: 16px;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--color-text-secondary);
+
+ .link-button {
+ display: inline;
+ font-size: inherit;
+ line-height: inherit;
+ }
+
+ &__header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ &__icon {
+ width: 40px;
+ height: 40px;
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ flex-shrink: 0;
+ }
+
+ h3 {
+ font-size: 17px;
+ line-height: 22px;
+ color: var(--color-text-primary);
+ }
+ }
+
+ &__handle {
+ border: 2px dashed var(--color-border-on-brand-softer);
+ background: var(--color-bg-brand-softer);
+ padding: 12px 8px;
+ color: var(--color-text-brand);
+ border-radius: 4px;
+
+ &__label {
+ font-size: 11px;
+ line-height: 16px;
+ font-weight: 500;
+ }
+
+ &__handle {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ user-select: all;
+ }
+ }
+
+ &__parts {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ font-size: 12px;
+ line-height: 16px;
+
+ & > div {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ }
+
+ &__icon {
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ color: var(--color-text-brand);
+ }
+
+ h6 {
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+ }
+ }
+ }
+ }
+
+ &__note {
+ font-size: 14px;
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ line-clamp: 1;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ margin-top: 10px;
+ color: var(--color-text-secondary);
+
+ &--missing {
+ color: var(--color-text-tertiary);
+ }
+
+ p {
+ margin-bottom: 10px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ color: inherit;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+ }
+ }
+}
+
+.learn-more__popout {
+ gap: 8px;
+
+ &__content {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ h6 {
+ font-size: inherit;
+ font-weight: 500;
+ line-height: inherit;
+ letter-spacing: 0.1px;
+ }
+
+ .link-button {
+ font-weight: 500;
+ }
+}
+
+.account__wrapper {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ justify-content: end;
+}
+
+.account__wrapper--with-bio {
+ align-items: start;
+}
+
+.account__info-wrapper {
+ flex: 1 1 auto;
+ min-width: 0;
+}
+
+.account__avatar {
+ display: block;
+ position: relative;
+ border-radius: var(--avatar-border-radius);
+ background: var(--color-bg-tertiary);
+ flex-shrink: 0;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: var(--avatar-border-radius);
+ display: inline-block; // to not show broken images
+ }
+
+ &--loading {
+ background-color: var(--color-bg-tertiary);
+ }
+
+ &--inline {
+ display: inline-block;
+ vertical-align: middle;
+ margin-inline-end: 5px;
+ }
+
+ &-composite {
+ overflow: hidden;
+ position: relative;
+
+ & > div {
+ float: left;
+ position: relative;
+ box-sizing: border-box;
+ }
+
+ .account__avatar {
+ width: 100% !important;
+ height: 100% !important;
+ }
+
+ &__label {
+ display: block;
+ position: absolute;
+ top: 50%;
+ inset-inline-start: 50%;
+ transform: translate(-50%, -50%);
+ color: var(--color-text-primary);
+ text-shadow: 1px 1px 2px
+ rgb(from var(--color-shadow-primary) r g b / 100%);
+ font-weight: 700;
+ font-size: 15px;
+ }
+ }
+
+ &__counter {
+ $height: 16px;
+ $h-padding: 5px;
+
+ position: absolute;
+ bottom: -3px;
+ inset-inline-end: -3px;
+ padding-left: $h-padding;
+ padding-right: $h-padding;
+ height: $height;
+ border-radius: $height;
+ min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle
+ line-height: $height + 1px; // to visually center the numbers
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-bg-primary);
+ font-size: 11px;
+ font-weight: 500;
+ text-align: center;
+ }
+}
+
+a .account__avatar {
+ cursor: pointer;
+}
+
+.avatar-group {
+ display: flex;
+
+ --avatar-height: 28px;
+
+ &:not(.avatar-group--compact) {
+ gap: 8px;
+ flex-wrap: wrap;
+ height: var(--avatar-height);
+ overflow-y: clip;
+ }
+}
+
+.avatar-group--compact {
+ & > :not(:first-child) {
+ margin-inline-start: -12px;
+ }
+
+ & > :first-child {
+ transform: rotate(-4deg);
+ }
+
+ & > :nth-child(2) {
+ transform: rotate(-2deg);
+ }
+
+ .account__avatar {
+ box-shadow: 0 0 0 2px var(--color-bg-primary);
+ }
+}
+
+.account__avatar-overlay {
+ position: relative;
+
+ &-overlay {
+ position: absolute;
+ bottom: 0;
+ inset-inline-end: 0;
+ z-index: 1;
+ }
+}
+
+.account__relationship {
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.account__relationship,
+.explore-suggestions-card {
+ .icon-button {
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ box-sizing: content-box;
+ padding: 5px;
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ }
+ }
+}
+
+.account-authorize {
+ padding: 14px 10px;
+
+ .detailed-status__display-name {
+ display: block;
+ margin-bottom: 15px;
+ overflow: hidden;
+ }
+}
+
+.account-authorize__avatar {
+ float: left;
+ margin-inline-end: 10px;
+}
+
+.status__display-name,
+.status__relative-time,
+.detailed-status__display-name,
+.detailed-status__datetime,
+.detailed-status__application,
+.detailed-status__link,
+.account__display-name {
+ text-decoration: none;
+}
+
+.status__display-name,
+.account__display-name {
+ .display-name strong {
+ color: var(--color-text-primary);
+ }
+}
+
+.muted {
+ .emojione {
+ opacity: 0.5;
+ }
+}
+
+.status__display-name,
+.detailed-status__display-name,
+a.account__display-name {
+ &:hover .display-name strong {
+ text-decoration: underline;
+ }
+}
+
+.account__display-name .display-name strong {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.detailed-status__application,
+.detailed-status__datetime,
+.detailed-status__link {
+ color: inherit;
+}
+
+.detailed-status__display-name {
+ color: var(--color-text-secondary);
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 15px;
+ line-height: 22px;
+ margin-bottom: 16px;
+ overflow: hidden;
+
+ strong,
+ span {
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ strong {
+ color: var(--color-text-primary);
+ }
+}
+
+.muted {
+ .status__content,
+ .status__content p,
+ .status__content a {
+ color: var(--color-text-tertiary);
+ }
+
+ .status__display-name strong {
+ color: var(--color-text-tertiary);
+ }
+
+ .status__avatar {
+ opacity: 0.5;
+ }
+}
+
+.notification__report {
+ padding: 10px; // glitch: reduced padding
+ border-bottom: 1px solid var(--color-border-primary);
+ display: flex;
+ gap: 10px;
+
+ &__avatar {
+ flex: 0 0 auto;
+ }
+
+ &__details {
+ flex: 1 1 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: var(--color-text-secondary);
+ gap: 10px;
+ font-size: 15px;
+ line-height: 22px;
+ white-space: nowrap;
+ overflow: hidden;
+
+ & > div {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ strong {
+ font-weight: 500;
+ }
+ }
+
+ &__actions {
+ flex: 0 0 auto;
+ }
+}
+
+.notification-group--link {
+ color: var(--color-text-primary);
+ text-decoration: none;
+
+ .notification-group__main {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ flex-grow: 1;
+ font-size: 15px;
+ line-height: 22px;
+
+ strong,
+ bdi {
+ font-weight: 700;
+ }
+
+ .link-button {
+ font-size: inherit;
+ line-height: inherit;
+ font-weight: inherit;
+ }
+ }
+}
+
+.notification__message {
+ padding: 8px 14px; // glitch: reduced padding
+ padding-bottom: 0;
+ cursor: default;
+ color: var(--color-text-secondary);
+ font-size: 15px;
+ line-height: 22px;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ .icon {
+ color: var(--color-text-brand);
+ width: 18px;
+ height: 18px;
+ }
+
+ .icon-star {
+ color: var(--color-text-favourite-highlight);
+ }
+
+ > span {
+ display: inline;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+
+.icon-button.star-icon.active {
+ color: var(--color-text-favourite-highlight);
+}
+
+.icon-button.bookmark-icon.active {
+ color: var(--color-text-bookmark-highlight);
+}
+
+.no-reduce-motion .icon-button.star-icon {
+ &.activate {
+ & > .icon {
+ animation: spring-rotate-in 1s linear;
+ transform-origin: 50% 52%;
+ }
+ }
+
+ &.deactivate {
+ & > .icon {
+ animation: spring-rotate-out 1s linear;
+ transform-origin: 50% 52%;
+ }
+ }
+}
+
+.notification__display-name {
+ color: inherit;
+ font-weight: 500;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+.display-name {
+ display: block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ &__account {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+}
+
+.display-name__html {
+ font-weight: 500;
+}
+
+.status__relative-time,
+.detailed-status__datetime,
+.detailed-status__link {
+ &:is(a):hover {
+ text-decoration: underline;
+ }
+}
+
+.zoomable-image {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ scrollbar-width: none;
+ overflow: hidden;
+ user-select: none;
+
+ img {
+ max-width: $media-modal-media-max-width;
+ max-height: $media-modal-media-max-height;
+ width: auto;
+ height: auto;
+ outline: 1px solid var(--color-border-media);
+ outline-offset: -1px;
+ border-radius: 8px;
+ touch-action: none;
+ user-select: none;
+ }
+
+ &--zoomed-in {
+ z-index: 9999;
+ cursor: grab;
+
+ img {
+ outline: none;
+ border-radius: 0;
+ }
+ }
+
+ &--dragging {
+ cursor: grabbing;
+ }
+
+ &--error img {
+ visibility: hidden;
+ }
+
+ &__preview {
+ max-width: $media-modal-media-max-width;
+ max-height: $media-modal-media-max-height;
+ position: absolute;
+ z-index: 1;
+ outline: 1px solid var(--color-border-media);
+ outline-offset: -1px;
+ border-radius: 8px;
+ overflow: hidden;
+
+ canvas {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: -1;
+ }
+ }
+
+ .loading-indicator {
+ z-index: 2;
+ mix-blend-mode: luminosity;
+ }
+}
+
+.navigation-bar {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ cursor: default;
+ gap: 10px;
+
+ .column > & {
+ padding: 15px;
+ }
+
+ .account {
+ border-bottom: 0;
+ padding: 0;
+ flex: 1 1 auto;
+ min-width: 0;
+
+ &__display-name {
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 500;
+
+ .display-name__account {
+ font-size: 14px;
+ font-weight: 400;
+ }
+ }
+ }
+
+ .icon-button {
+ padding: 8px;
+ color: var(--color-text-primary);
+ }
+
+ .icon-button .icon {
+ width: 24px;
+ height: 24px;
+ }
+}
+
+.dropdown-animation {
+ animation: dropdown 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
+
+ @keyframes dropdown {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+ }
+
+ .reduce-motion & {
+ animation: none;
+ }
+}
+
+.dropdown {
+ display: inline-block;
+}
+
+.dropdown__content {
+ display: none;
+ position: absolute;
+}
+
+.dropdown-menu__separator {
+ border-bottom: 1px solid var(--color-border-primary);
+ margin: 2px 0; // glitch: reduced margins
+ height: 0;
+}
+
+.dropdown-menu {
+ background: var(--color-bg-elevated);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ 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(--color-border-primary);
+ padding: 6px 14px; // glitch: reduced padding
+ padding-bottom: 12px; // glitch: reduced padding
+ margin-bottom: 4px;
+ font-size: 13px;
+ line-height: 18px;
+ color: var(--color-text-secondary);
+ }
+
+ &__list {
+ list-style: none;
+
+ &--scrollable {
+ max-height: 300px;
+ overflow-y: scroll;
+ }
+ }
+
+ &--loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 30px 45px;
+ }
+ }
+
+ &.left {
+ transform-origin: 100% 50%;
+ }
+
+ &.top {
+ transform-origin: 50% 100%;
+ }
+
+ &.bottom {
+ transform-origin: 50% 0;
+ }
+
+ &.right {
+ transform-origin: 0 50%;
+ }
+}
+
+.dropdown-menu__item {
+ font-size: 13px;
+ line-height: 18px;
+ font-weight: 500;
+ display: block;
+
+ &--dangerous {
+ color: var(--color-text-error);
+ }
+
+ &--highlighted {
+ color: var(--color-text-brand);
+ }
+
+ &-content {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &-subtitle {
+ font-weight: 400;
+ }
+
+ a,
+ button {
+ font: inherit;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ white-space: inherit;
+ width: 100%;
+ padding: 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(--color-bg-secondary);
+ outline: 0;
+ }
+ }
+ }
+
+ button:disabled,
+ button[aria-disabled='true'] {
+ color: var(--color-text-disabled);
+ cursor: default;
+
+ &:focus {
+ color: rgb(from var(--color-text-disabled) r g b / 70%);
+ background: var(--color-bg-disabled);
+ outline: 0;
+ }
+ }
+}
+
+.reblog-menu-item {
+ max-width: 360px;
+}
+
+.inline-account {
+ display: inline-flex;
+ align-items: center;
+ vertical-align: top;
+
+ .account__avatar {
+ margin-inline-end: 5px;
+ border-radius: 50%;
+ }
+
+ strong {
+ font-weight: 600;
+ }
+}
+
+.columns-area {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: row;
+ justify-content: flex-start;
+ position: relative;
+
+ .layout-multiple-columns & {
+ overflow-x: auto;
+
+ &.unscrollable {
+ overflow-x: hidden;
+ }
+ }
+
+ &__panels {
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ width: 100%;
+ height: 100%;
+ min-height: 100vh;
+ min-height: 100dvh;
+ padding-inline: 10px;
+ padding-bottom: env(safe-area-inset-bottom);
+
+ &__pane {
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ justify-content: flex-end;
+ min-width: 285px;
+
+ &--start {
+ justify-content: flex-start;
+ }
+
+ &__inner {
+ position: fixed;
+ width: 285px;
+ height: 100%;
+ }
+ }
+
+ &__main {
+ --column-header-height: 62px;
+
+ box-sizing: border-box;
+ width: 100%;
+ flex: 0 1 auto;
+ display: flex;
+ flex-direction: column;
+ contain: inline-size layout paint style;
+ container: column / inline-size;
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-primary);
+
+ @media screen and (min-width: $no-gap-breakpoint) {
+ max-width: 600px;
+ }
+ }
+ }
+}
+
+.ui__navigation-bar {
+ position: fixed;
+ bottom: 0;
+ z-index: 3;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ gap: 8px;
+ padding-bottom: env(safe-area-inset-bottom);
+ background: var(--color-bg-primary);
+ backdrop-filter: $backdrop-blur-filter;
+ border-top: 1px solid var(--color-border-primary);
+ box-sizing: border-box;
+
+ .layout-multiple-columns & {
+ display: none;
+ }
+
+ &__items {
+ display: grid;
+ grid-auto-columns: minmax(0, 1fr);
+ grid-auto-flow: column;
+ padding: 0 16px;
+
+ &.active {
+ flex: 1;
+ padding: 0;
+ }
+ }
+
+ &__sign-up {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding-inline-start: 16px;
+ }
+
+ &__item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: transparent;
+ border: none;
+ gap: 8px;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ padding-top: 11px;
+ padding-bottom: 15px;
+ border-top: 4px solid transparent;
+ text-decoration: none;
+ color: inherit;
+
+ &.active {
+ color: var(--color-text-brand);
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ &:focus-visible {
+ border-top-color: var(--color-text-brand);
+ border-radius: 0;
+ }
+ }
+}
+
+.tabs-bar__wrapper {
+ background: var(--color-bg-primary);
+ backdrop-filter: $backdrop-blur-filter;
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ border-top: 0;
+
+ @media screen and (min-width: $no-gap-breakpoint) {
+ border-top: 10px solid var(--color-bg-ambient);
+ }
+}
+
+.react-swipeable-view-container {
+ &,
+ .columns-area,
+ .drawer,
+ .column {
+ height: 100%;
+ }
+}
+
+.react-swipeable-view-container > * {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+
+.column {
+ width: 350px;
+ position: relative;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+
+ > .scrollable {
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
+
+ &.about,
+ &.privacy-policy {
+ border-top: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ border-bottom: 0;
+ }
+ }
+ }
+}
+
+.column__alert {
+ --alert-height: 54px;
+
+ position: sticky;
+ bottom: 0;
+ z-index: 10;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-rows: minmax(var(--alert-height), max-content);
+ align-items: end;
+ width: 100%;
+ max-width: 360px;
+ padding: 1rem;
+ margin: auto auto 0;
+ overflow: clip;
+ pointer-events: none;
+
+ @media (max-width: #{$mobile-menu-breakpoint - 1}) {
+ // Compensate for mobile menubar
+ bottom: var(--mobile-bottom-nav-height);
+ }
+
+ & > * {
+ // Make all nested alerts occupy the same space
+ // rather than stack
+ grid-area: 1 / 1;
+ pointer-events: initial;
+ }
+}
+
+.ui {
+ --mobile-bottom-nav-height: 55px;
+ --last-content-item-border-width: 2px;
+
+ flex: 0 0 auto;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+
+ @media (max-width: #{$mobile-menu-breakpoint - 1}) {
+ padding-bottom: calc(
+ var(--mobile-bottom-nav-height) - var(--last-content-item-border-width)
+ );
+ }
+}
+
+.drawer {
+ width: 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: var(--color-text-secondary);
+ text-decoration: none;
+ text-align: center;
+ font-size: 16px;
+ align-items: center;
+ justify-content: center;
+}
+
+.column,
+.drawer {
+ flex: 1 1 100%;
+}
+
+@media screen and (width > $mobile-breakpoint) {
+ .columns-area {
+ padding: 0;
+ }
+
+ .column,
+ .drawer {
+ flex: 0 0 auto;
+ padding: 10px;
+ padding-inline-start: 5px;
+ padding-inline-end: 5px;
+
+ &:first-child {
+ padding-inline-start: 10px;
+ }
+
+ &:last-child {
+ padding-inline-end: 10px;
+ }
+ }
+
+ .columns-area > div {
+ .column,
+ .drawer {
+ padding-inline-start: 5px;
+ padding-inline-end: 5px;
+ }
+ }
+}
+
+.columns-area--mobile {
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+
+ .column,
+ .drawer {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ }
+
+ .account-card {
+ margin-bottom: 0;
+ }
+
+ .filter-form {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .autosuggest-textarea__textarea {
+ font-size: 16px;
+ }
+
+ .search__input {
+ line-height: 18px;
+ font-size: 16px;
+ padding-block: 15px;
+ padding-inline-end: 30px;
+ }
+
+ .scrollable {
+ overflow: visible;
+
+ @supports (display: grid) {
+ contain: content;
+ }
+ }
+
+ @media screen and (min-width: $no-gap-breakpoint) {
+ padding: 10px 0;
+ padding-top: 0;
+ }
+}
+
+@media screen and (min-width: $no-gap-breakpoint) {
+ .react-swipeable-view-container .columns-area--mobile {
+ height: calc(100% - 10px) !important;
+ }
+
+ .getting-started__wrapper {
+ margin-bottom: 10px;
+ }
+
+ .search-page .search {
+ display: none;
+ }
+
+ .navigation-panel__legal,
+ .navigation-panel__compose-button,
+ .navigation-panel .navigation-bar {
+ display: none !important;
+ }
+}
+
+@media screen and (max-width: ($no-gap-breakpoint - 1px)) {
+ $sidebar-width: 285px;
+
+ .columns-area__panels__main {
+ width: calc(100% - $sidebar-width);
+ }
+
+ .columns-area__panels {
+ min-height: 100vh;
+ min-height: 100dvh;
+ gap: 0;
+ padding-inline: 0;
+ }
+
+ .columns-area__panels__pane--navigational {
+ min-width: $sidebar-width;
+
+ .columns-area__panels__pane__inner {
+ width: $sidebar-width;
+ }
+
+ .navigation-panel {
+ margin: 0;
+ border-inline-start: 1px solid var(--color-border-primary);
+ height: 100dvh;
+ }
+
+ .navigation-panel__banner,
+ .navigation-panel__logo,
+ .getting-started__trends {
+ display: none;
+ }
+ }
+
+ .layout-single-column {
+ .column > .scrollable,
+ .tabs-bar__wrapper .column-header,
+ .tabs-bar__wrapper .column-back-button,
+ .explore__search-header,
+ .column-search-header {
+ border-left: 0;
+ border-right: 0;
+ }
+
+ .column-header,
+ .column-back-button,
+ .scrollable,
+ .error-column {
+ border-radius: 0 !important;
+ }
+
+ .column-header,
+ .column-back-button {
+ border-top: 0;
+ }
+ }
+}
+
+@media screen and (width <= 759px) {
+ .columns-area__panels__main {
+ width: 100%;
+ }
+
+ .columns-area__panels__pane--navigational {
+ position: fixed;
+ inset-inline-end: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ }
+
+ .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
+ pointer-events: auto;
+ background: var(--color-bg-primary);
+ position: fixed;
+ width: 284px + 70px;
+ inset-inline-end: -70px;
+ touch-action: pan-y;
+
+ .navigation-panel {
+ width: 284px;
+ overflow-y: auto;
+ scrollbar-width: thin;
+
+ &__menu {
+ flex-shrink: 0;
+ min-height: none;
+ overflow: hidden;
+ padding-bottom: calc(65px + env(safe-area-inset-bottom));
+ }
+
+ &__logo {
+ display: none;
+ }
+ }
+ }
+}
+
+.columns-area__panels__pane--navigational {
+ transition: background 500ms;
+}
+
+.columns-area__panels__pane--overlay {
+ pointer-events: auto;
+ background: rgb(from var(--color-bg-overlay) r g b / 50%);
+ z-index: 3;
+
+ .columns-area__panels__pane__inner {
+ box-shadow: var(--dropdown-shadow);
+ }
+}
+
+@media screen and (width >= 760px) {
+ .ui__navigation-bar {
+ display: none;
+ }
+}
+
+.explore-suggestions-card {
+ padding: 12px 16px;
+ gap: 8px;
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &__source {
+ font-size: 13px;
+ line-height: 16px;
+ color: var(--color-text-tertiary);
+
+ @container (width >= 400px) {
+ padding-inline-start: 60px;
+ }
+ }
+
+ &__body {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ justify-content: end;
+ }
+
+ &__avatar {
+ flex-shrink: 0;
+
+ @container (width < 360px) {
+ width: 35px !important;
+ height: 35px !important;
+ }
+ }
+
+ &__link {
+ flex: 1 1 auto;
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ text-decoration: none;
+ min-width: 0;
+
+ &:hover,
+ &:focus-visible {
+ .display-name__html {
+ text-decoration: underline;
+ }
+ }
+
+ .display-name {
+ font-size: 15px;
+ line-height: 20px;
+ color: var(--color-text-primary);
+
+ strong {
+ font-weight: 700;
+ }
+
+ &__account {
+ color: var(--color-text-secondary);
+ display: block;
+ }
+ }
+ }
+
+ &__actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ justify-content: end;
+
+ .button {
+ min-width: 80px;
+ }
+ }
+
+ &__dismiss-button {
+ @container (width < 400px) {
+ display: none;
+ }
+ }
+}
+
+@media screen and (max-width: ($no-gap-breakpoint - 1px)) {
+ .columns-area__panels__pane--compositional {
+ display: none;
+ }
+}
+
+.icon-with-badge {
+ display: inline-flex;
+ position: relative;
+
+ &__badge {
+ position: absolute;
+ inset-inline-start: 9px;
+ top: -13px;
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ border: 2px solid var(--color-bg-primary);
+ padding: 1px 6px;
+ border-radius: 6px;
+ font-size: 10px;
+ font-weight: 500;
+ line-height: 14px;
+ }
+
+ &__issue-badge {
+ position: absolute;
+ inset-inline-start: 11px;
+ bottom: 1px;
+ display: block;
+ background: var(--color-text-error);
+ border-radius: 50%;
+ width: 0.625rem;
+ height: 0.625rem;
+ }
+}
+
+.column-link--transparent .icon-with-badge__badge {
+ border-color: var(--color-bg-primary);
+}
+
+.column-title {
+ text-align: center;
+ padding-bottom: 32px;
+
+ h3 {
+ font-size: 24px;
+ line-height: 1.5;
+ font-weight: 700;
+ margin-bottom: 10px;
+ }
+
+ p {
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+ color: var(--color-text-secondary);
+ }
+
+ @media screen and (width >= 600px) {
+ padding: 40px;
+ }
+}
+
+.copy-paste-text {
+ background: var(--color-bg-secondary);
+ border-radius: 8px;
+ border: 1px solid var(--color-border-primary);
+ padding: 16px;
+ color: var(--color-text-primary);
+ font-size: 15px;
+ line-height: 22px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ transition: border-color 300ms linear;
+ margin-bottom: 30px;
+
+ &:focus,
+ &.focused {
+ transition: none;
+ outline: 0;
+ border-color: var(--color-text-brand);
+ }
+
+ &.copied {
+ border-color: var(--color-text-success);
+ transition: none;
+ }
+
+ textarea {
+ width: 100%;
+ height: auto;
+ background: transparent;
+ color: inherit;
+ font: inherit;
+ border: 0;
+ padding: 0;
+ margin-bottom: 30px;
+ resize: none;
+
+ &:focus {
+ outline: 0;
+ }
+ }
+}
+
+.onboarding__profile {
+ position: relative;
+ margin-bottom: 40px + 20px;
+ margin-top: -20px;
+
+ .app-form__avatar-input {
+ border: 2px solid var(--color-bg-primary);
+ position: absolute;
+ inset-inline-start: -2px;
+ bottom: -40px;
+ z-index: 2;
+ }
+
+ .app-form__header-input {
+ margin: 0 -20px;
+ border-radius: 0;
+
+ img {
+ border-radius: 0;
+ }
+ }
+}
+
+.compose-panel {
+ width: 285px;
+ margin-top: 10px;
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 10px);
+ overflow-y: auto;
+ scrollbar-width: thin;
+
+ .compose-form {
+ flex: 1 1 auto;
+ }
+}
+
+.navigation-panel {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ height: calc(100% - 20px);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+
+ &__menu {
+ flex: 1 1 auto;
+ min-height: 0;
+ overflow-y: auto;
+ scrollbar-width: thin;
+ }
+
+ &__list-panel {
+ &__header {
+ display: flex;
+ align-items: center;
+ padding-inline-end: 4px;
+
+ &__sep {
+ width: 0;
+ height: 24px;
+ border-left: 1px solid var(--color-border-primary);
+ }
+
+ .column-link {
+ flex: 1 1 auto;
+ }
+
+ .icon-button {
+ padding: 8px;
+ }
+ }
+
+ &__items {
+ padding-inline-start: 24px + 8px;
+
+ .icon {
+ display: none;
+ }
+ }
+ }
+
+ &__compose-button {
+ display: flex;
+ justify-content: flex-start;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ padding-inline-start: 12px - 7px;
+ padding-inline-end: 12px;
+ gap: 8px;
+ margin: 12px;
+ border-radius: 6px;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 18px;
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ }
+ }
+
+ .navigation-bar {
+ padding: 16px;
+ }
+
+ .search {
+ margin: 16px;
+ margin-bottom: 12px;
+ }
+
+ .logo {
+ height: 30px;
+ width: auto;
+ }
+
+ &__logo {
+ margin-bottom: 12px;
+ }
+
+ .getting-started__trends h4 {
+ padding: 10px 12px;
+ padding-inline-start: 16px;
+ }
+
+ .getting-started__trends .trends__item {
+ padding: 10px 12px;
+ padding-inline-start: 16px;
+ }
+
+ @media screen and (height <= 930px) {
+ &__portal .trends__item:nth-child(n + 5) {
+ display: none;
+ }
+ }
+
+ @media screen and (height <= (930px - 56px)) {
+ &__portal .trends__item:nth-child(n + 4) {
+ display: none;
+ }
+ }
+
+ @media screen and (height <= (930px - 56px * 2)) {
+ &__portal .trends__item:nth-child(n + 3) {
+ display: none;
+ }
+ }
+
+ @media screen and (height <= (930px - 56px * 3)) {
+ &__portal {
+ display: none;
+ }
+ }
+}
+
+.navigation-panel,
+.compose-panel {
+ hr {
+ flex: 0 0 auto;
+ border: 0;
+ background: transparent;
+ border-top: 1px solid var(--color-border-primary);
+ margin: 10px 0;
+ }
+
+ .flex-spacer {
+ background: transparent;
+ }
+}
+
+.drawer__pager {
+ box-sizing: border-box;
+ padding: 0;
+ flex-grow: 1;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ border-radius: 4px;
+ border: 1px solid var(--color-border-primary);
+}
+
+.drawer__inner {
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ background: var(--color-bg-primary);
+ box-sizing: border-box;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ overflow-y: auto;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+}
+
+.drawer__inner__mastodon {
+ position: relative;
+ background: var(--color-bg-primary);
+ flex: 1;
+ min-height: 47px;
+ display: none;
+ contain: content;
+
+ > img {
+ display: block;
+ object-fit: contain;
+ object-position: bottom left;
+ width: 85%;
+ height: 100%;
+ pointer-events: none;
+ user-select: none;
+ }
+
+ @media screen and (height >= 640px) {
+ display: block;
+ }
+}
+
+.drawer__header {
+ flex: 0 0 auto;
+ font-size: 16px;
+ border: 1px solid var(--color-border-primary);
+ margin-bottom: 10px;
+ display: flex;
+ flex-direction: row;
+ border-radius: 4px;
+ overflow: hidden;
+
+ a:hover,
+ a:focus,
+ a:active {
+ color: var(--color-text-primary);
+ }
+}
+
+.scrollable {
+ overflow-y: scroll;
+ overflow-x: hidden;
+ flex: 1 1 auto;
+ -webkit-overflow-scrolling: touch;
+ scrollbar-width: thin;
+
+ &.optionally-scrollable {
+ overflow-y: auto;
+ }
+
+ @supports (display: grid) {
+ // hack to fix Chrome <57
+ contain: strict;
+ }
+
+ &--flex {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__append {
+ flex: 1 1 auto;
+ position: relative;
+ min-height: 120px;
+ }
+
+ .scrollable {
+ flex: 1 1 auto;
+ }
+}
+
+.scrollable.fullscreen {
+ @supports (display: grid) {
+ // hack to fix Chrome <57
+ contain: none;
+ }
+}
+
+.column-back-button {
+ box-sizing: border-box;
+ width: 100%;
+ background: transparent;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px 4px 0 0;
+ color: var(--color-text-brand);
+ cursor: pointer;
+ flex: 0 0 auto;
+ font-size: 16px;
+ line-height: inherit;
+ text-align: unset;
+ padding: 13px;
+ margin: 0;
+ z-index: 3;
+ outline: 0;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+.column-header__back-button {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ background: transparent;
+ border: 0;
+ font-family: inherit;
+ color: var(--color-text-brand);
+ cursor: pointer;
+ white-space: nowrap;
+ font-size: 16px;
+ padding: 13px;
+ z-index: 3;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &.compact {
+ padding-inline-end: 5px;
+ flex: 0 0 auto;
+ }
+}
+
+.react-toggle {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ background-color: transparent;
+ border: 0;
+ border-radius: 10px;
+ padding: 0;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.react-toggle--focus,
+.react-toggle:focus-within {
+ outline: var(--outline-focus-default);
+ outline-offset: 2px;
+
+ .react-toggle-track {
+ border-color: transparent;
+ }
+}
+
+.react-toggle-screenreader-only,
+.sr-only {
+ border: 0;
+ clip-path: inset(50%);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+
+.react-toggle--disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+ transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+ width: 32px;
+ height: 20px;
+ padding: 0;
+ border-radius: 10px;
+ background-color: rgb(from var(--color-bg-brand-softer) r g b / 50%);
+ border: 1px solid rgb(from var(--color-text-brand) r g b / 50%);
+ box-sizing: border-box;
+
+ .react-toggle:hover:not(.react-toggle--disabled) & {
+ background-color: rgb(
+ from var(--color-bg-brand-softer) r g b /
+ calc(50% + var(--overlay-strength-brand))
+ );
+ }
+
+ .react-toggle--checked & {
+ background-color: var(--color-bg-brand-base);
+ border-color: var(--color-bg-brand-base);
+ }
+
+ .react-toggle--checked:not(.react-toggle--disabled):hover & {
+ background-color: var(--color-bg-brand-base-hover);
+ }
+}
+
+.react-toggle-track-check,
+.react-toggle-track-x {
+ display: none;
+}
+
+.react-toggle-thumb {
+ position: absolute;
+ top: 2px;
+ inset-inline-start: 2px;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background-color: var(--color-text-on-brand-base);
+ box-sizing: border-box;
+ transition: all 0.25s ease;
+ transition-property: border-color, left;
+
+ .react-toggle--checked & {
+ inset-inline-start: 32px - 16px - 2px;
+ border-color: var(--color-bg-brand-base);
+ }
+}
+
+.follow_requests-unlocked_explanation,
+.switch-to-advanced {
+ color: var(--color-text-secondary);
+ background-color: var(--color-bg-secondary);
+ padding: 15px;
+ border-radius: 4px;
+ margin-top: 4px;
+ margin-bottom: 12px;
+ font-size: 13px;
+ line-height: 18px;
+
+ a {
+ color: var(--color-text-brand);
+ font-weight: bold;
+ }
+}
+
+.column-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 12px;
+ font-size: 16px;
+ font-weight: 400;
+ text-decoration: none;
+ overflow: hidden;
+ white-space: nowrap;
+ color: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-secondary)
+ );
+ background: transparent;
+ border: 0;
+ border-left: 4px solid transparent;
+ box-sizing: border-box;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: var(--color-text-primary);
+ }
+
+ &.active {
+ color: var(--color-text-brand);
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ &:focus-visible {
+ border-color: var(--color-text-brand);
+ border-radius: 0;
+ }
+
+ &--logo {
+ background: transparent;
+ padding: 10px;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: transparent;
+ }
+ }
+}
+
+.column-link__badge {
+ display: inline-block;
+ border-radius: 4px;
+ font-size: 12px;
+ line-height: 19px;
+ font-weight: 500;
+ background: var(--color-bg-primary);
+ padding: 4px 8px;
+ margin: -6px 10px;
+}
+
+.column-subheading {
+ background: var(--color-bg-secondary);
+ color: var(--color-text-secondary);
+ padding: 8px 20px;
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ cursor: default;
+}
+
+.getting-started__wrapper {
+ flex: 0 0 auto;
+}
+
+.flex-spacer {
+ flex: 1 1 auto;
+}
+
+.getting-started {
+ color: var(--color-text-tertiary);
+ overflow: auto;
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+
+ &__trends {
+ flex: 0 1 auto;
+ opacity: 1;
+ animation: fade 150ms linear;
+ margin-top: 10px;
+
+ h4 {
+ border-bottom: 1px solid var(--color-border-primary);
+ padding: 10px;
+ font-size: 12px;
+ text-transform: uppercase;
+ font-weight: 500;
+
+ a {
+ color: var(--color-text-secondary);
+ text-decoration: none;
+ }
+ }
+
+ .trends__item {
+ border-bottom: 0;
+ padding: 10px;
+
+ &__current {
+ color: var(--color-text-secondary);
+ }
+ }
+ }
+}
+
+.keyboard-shortcuts {
+ padding: 8px 0 0;
+ overflow: hidden;
+
+ thead {
+ position: absolute;
+ inset-inline-start: -9999px;
+ }
+
+ td {
+ padding: 0 10px 8px;
+ }
+
+ kbd {
+ display: inline-block;
+ }
+}
+
+input.glitch-setting-text {
+ box-sizing: border-box;
+ color: var(--color-text-secondary);
+ background: transparent;
+ border: 0;
+ border-bottom: 2px solid var(--color-text-secondary);
+ outline: 0;
+ font-family: inherit;
+ margin-bottom: 10px;
+ padding: 7px 0;
+ width: 100%;
+
+ &:focus,
+ &:active {
+ color: var(--color-text-on-brand-base);
+ border-bottom-color: var(--color-bg-brand-base);
+ }
+
+ @media screen and (width <= 600px) {
+ font-size: 16px;
+ }
+}
+
+.status-card {
+ display: flex;
+ align-items: center;
+ position: relative;
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ margin-top: 14px;
+ text-decoration: none;
+ overflow: hidden;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 8px;
+ contain: inline-size layout paint style;
+
+ &.bottomless {
+ border-radius: 8px 8px 0 0;
+ }
+
+ &__actions {
+ bottom: 0;
+ inset-inline-start: 0;
+ position: absolute;
+ inset-inline-end: 0;
+ top: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ & > div {
+ background: rgb(from var(--color-shadow-primary) r g b / 60%);
+ border-radius: 8px;
+ padding: 12px 9px;
+ backdrop-filter: $backdrop-blur-filter;
+ flex: 0 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ button,
+ a {
+ display: inline;
+ color: var(--color-text-primary);
+ background: transparent;
+ border: 0;
+ padding: 0 8px;
+ text-decoration: none;
+ font-size: 18px;
+ line-height: 18px;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: var(--color-text-primary);
+ }
+ }
+
+ a {
+ font-size: 19px;
+ position: relative;
+ bottom: -1px;
+ }
+ }
+}
+
+a.status-card {
+ cursor: pointer;
+
+ &:hover,
+ &:focus,
+ &:active {
+ .status-card__title,
+ .status-card__host,
+ .status-card__author,
+ .status-card__description {
+ color: var(--color-text-brand);
+ }
+ }
+}
+
+.status-card a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ .status-card__title,
+ .status-card__host,
+ .status-card__author,
+ .status-card__description {
+ color: var(--color-text-brand);
+ }
+ }
+}
+
+.status-card-photo {
+ cursor: zoom-in;
+ display: block;
+ text-decoration: none;
+ width: 100%;
+ height: auto;
+ margin: 0;
+}
+
+.status-card-video {
+ // Firefox has a bug where frameborder=0 iframes add some extra blank space
+ // see https://bugzilla.mozilla.org/show_bug.cgi?id=155174
+ overflow: hidden;
+
+ iframe {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.status-card__title {
+ display: block;
+ font-weight: 700;
+ font-size: 19px;
+ line-height: 24px;
+ color: var(--color-text-primary);
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.status-card.expanded .status-card__title {
+ white-space: normal;
+ display: -webkit-box;
+ line-clamp: 2;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+}
+
+.status-card__content {
+ flex: 1 1 auto;
+ overflow: hidden;
+ padding: 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: var(--color-text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ strong {
+ font-weight: 500;
+ }
+}
+
+.status-card__description {
+ display: block;
+ margin-top: 8px;
+ font-size: 14px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.status-card__image {
+ flex: 0 0 auto;
+ width: 96px; // glitch: intentional change to better use space
+ aspect-ratio: 1;
+ background: var(--color-bg-secondary);
+ position: relative;
+
+ & > .icon {
+ width: 18px;
+ height: 18px;
+ position: absolute;
+ transform-origin: 50% 50%;
+ top: 50%;
+ inset-inline-start: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
+
+.status-card__image-image {
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ background-size: cover;
+ background-position: center center;
+}
+
+.status-card__image-preview {
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: fill;
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ z-index: 0;
+ background: var(--color-bg-primary);
+
+ &--hidden {
+ display: none;
+ }
+}
+
+.status-card.expanded {
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.status-card.expanded .status-card__image {
+ width: 100%;
+ aspect-ratio: auto;
+}
+
+.status-card__image,
+.status-card__image-image,
+.status-card__image-preview {
+ border-start-start-radius: 8px;
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+ border-end-start-radius: 8px;
+}
+
+.status-card.expanded .status-card__image,
+.status-card.expanded .status-card__image-image,
+.status-card.expanded .status-card__image-preview {
+ border-start-end-radius: 8px;
+ border-end-end-radius: 0;
+ border-end-start-radius: 0;
+}
+
+.status-card.bottomless .status-card__image,
+.status-card.bottomless .status-card__image-image,
+.status-card.bottomless .status-card__image-preview {
+ border-end-end-radius: 0;
+ border-end-start-radius: 0;
+}
+
+.status-card.expanded > a {
+ width: 100%;
+}
+
+.load-more {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--color-text-primary);
+ background-color: transparent;
+ border: 0;
+ font-size: inherit;
+ line-height: inherit;
+ width: 100%;
+ padding: 15px;
+ box-sizing: border-box;
+ text-decoration: none;
+
+ &--large {
+ padding-block: 32px;
+ }
+
+ &:is(button) {
+ &:hover {
+ background: var(--color-bg-secondary);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--color-text-brand);
+ outline-offset: -2px;
+ }
+ }
+
+ .icon {
+ width: 22px;
+ height: 22px;
+ }
+}
+
+.load-gap {
+ border-bottom: 1px solid var(--color-border-primary);
+}
+
+.timeline-hint {
+ text-align: center;
+ color: var(--color-text-secondary);
+ padding: 16px;
+ box-sizing: border-box;
+ width: 100%;
+ font-size: 14px;
+ line-height: 21px;
+
+ strong {
+ font-weight: 500;
+ }
+
+ a {
+ color: var(--color-text-brand);
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ color: var(--color-text-brand-soft);
+ }
+ }
+
+ &--with-descendants {
+ border-top: 1px solid var(--color-border-primary);
+ }
+}
+
+.regeneration-indicator {
+ color: var(--color-text-secondary);
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ cursor: default;
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+
+ &__figure {
+ display: block;
+ width: 100%;
+ height: auto;
+ max-width: 350px;
+ margin-top: -50px;
+ }
+
+ &__label {
+ text-align: center;
+ font-size: 16px;
+
+ strong {
+ font-weight: 500;
+ display: block;
+ margin-bottom: 10px;
+ color: var(--color-text-secondary);
+ }
+
+ span {
+ font-size: 15px;
+ }
+ }
+}
+
+.column-header__wrapper {
+ position: relative;
+ flex: 0 0 auto;
+ z-index: 1;
+
+ &.active {
+ box-shadow: 0 1px 0 var(--color-bg-brand-softer);
+
+ &::before {
+ display: block;
+ content: '';
+ position: absolute;
+ bottom: -13px;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ margin: 0 auto;
+ width: 60%;
+ pointer-events: none;
+ height: 28px;
+ z-index: 1;
+ background: radial-gradient(
+ ellipse,
+ rgb(from var(--color-bg-brand-softer-base) r g b / 23%) 0%,
+ transparent 60%
+ );
+ }
+ }
+
+ .announcements {
+ z-index: 1;
+ position: relative;
+ }
+}
+
+.column-header__select-row {
+ border-width: 0 1px 1px;
+ border-style: solid;
+ border-color: var(--color-border-primary);
+ padding: 15px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &__checkbox .check-box {
+ display: flex;
+ }
+
+ &__select-menu:disabled {
+ visibility: hidden;
+ }
+
+ &__mode-button {
+ margin-left: auto;
+ color: var(--color-text-brand);
+ font-weight: bold;
+ font-size: 14px;
+
+ &:hover {
+ color: var(--color-text-brand-soft);
+ }
+ }
+}
+
+.column-header {
+ display: flex;
+ font-size: 16px;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px 4px 0 0;
+ flex: 0 0 auto;
+ cursor: pointer;
+ position: relative;
+ z-index: 2;
+ outline: 0;
+
+ &__title {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ margin: 0;
+ border: 0;
+ padding: 13px;
+ padding-inline-end: 0;
+ color: inherit;
+ background: transparent;
+ font: inherit;
+ text-align: start;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ flex: 1;
+
+ &:focus-visible {
+ outline: var(--outline-focus-default);
+ }
+
+ .logo {
+ height: 24px;
+ }
+ }
+
+ .column-header__back-button + &__title {
+ padding-inline-start: 0;
+ }
+
+ .column-header__back-button {
+ flex: 1;
+ color: var(--color-text-brand);
+
+ &.compact {
+ flex: 0 0 auto;
+ color: var(--color-text-primary);
+ }
+ }
+
+ &.active {
+ .column-header__icon {
+ color: var(--color-text-brand);
+ text-shadow: 0 0 10px var(--color-bg-brand-softer);
+ }
+ }
+
+ &:focus,
+ &:active {
+ outline: 0;
+ }
+
+ &__advanced-buttons {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px;
+ padding-top: 0;
+
+ &:first-child {
+ padding-top: 16px;
+ }
+ }
+}
+
+.column-header__buttons {
+ height: 48px;
+ display: flex;
+}
+
+.column-header__links {
+ margin-bottom: 14px;
+}
+
+.column-header__links .text-btn {
+ margin-inline-end: 10px;
+}
+
+.column-header__button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 0;
+ color: var(--color-text-primary);
+ background: transparent;
+ cursor: pointer;
+ font-size: 16px;
+ padding: 0 15px;
+
+ &:last-child {
+ border-start-end-radius: 4px;
+ }
+
+ &:hover {
+ color: var(--color-text-secondary);
+ }
+
+ &:focus-visible {
+ outline: var(--outline-focus-default);
+ }
+
+ &.active {
+ color: var(--color-text-brand);
+
+ &:hover {
+ color: var(--color-text-brand);
+ }
+ }
+
+ &:disabled {
+ color: var(--color-text-disabled);
+ cursor: default;
+ }
+}
+
+.no-reduce-motion .column-header__button .icon-sliders {
+ transition: transform 150ms ease-in-out;
+}
+
+.column-header__collapsible {
+ max-height: 70vh;
+ overflow: hidden;
+ overflow-y: auto;
+ color: var(--color-text-secondary);
+ transition:
+ max-height 150ms ease-in-out,
+ opacity 300ms linear;
+ opacity: 1;
+ z-index: 1;
+ position: relative;
+ border-left: 1px solid var(--color-border-primary);
+ border-right: 1px solid var(--color-border-primary);
+ border-bottom: 1px solid var(--color-border-primary);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-left: 0;
+ border-right: 0;
+ }
+
+ &.collapsed {
+ max-height: 0;
+ opacity: 0.5;
+ border-bottom: 0;
+ }
+
+ &.animating {
+ overflow-y: hidden;
+ }
+
+ hr {
+ height: 0;
+ background: transparent;
+ border: 0;
+ border-top: 1px solid var(--color-border-primary);
+ margin: 10px 0;
+ }
+}
+
+.column-header__collapsible-inner {
+ border-top: 0;
+}
+
+.column-header__setting-btn {
+ &:hover,
+ &:focus {
+ color: var(--color-text-secondary);
+ text-decoration: underline;
+ }
+}
+
+.column-header__collapsible__extra + .column-header__setting-btn {
+ padding-top: 5px;
+}
+
+.column-header__permission-btn {
+ display: inline;
+ font-weight: inherit;
+ text-decoration: underline;
+}
+
+.column-header__setting-arrows {
+ display: flex;
+ align-items: center;
+}
+
+.column-settings__pillbar {
+ display: flex;
+ background-color: transparent;
+ margin-bottom: 10px;
+ align-items: stretch;
+ gap: 2px;
+
+ .pillbar-button:first-child {
+ border-start-start-radius: 4px;
+ border-end-start-radius: 4px;
+ }
+
+ .pillbar-button:last-child {
+ border-start-end-radius: 4px;
+ border-end-end-radius: 4px;
+ }
+}
+
+.pillbar-button {
+ border: 0;
+ color: var(--color-text-primary);
+ padding: 2px;
+ margin: 0;
+ font-size: inherit;
+ flex: auto;
+ background-color: var(--color-bg-elevated);
+ transition: all 0.2s ease;
+ transition-property: background-color, box-shadow;
+
+ &[disabled] {
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+
+ &:not([disabled]) {
+ &:hover,
+ &:active {
+ background: var(--color-bg-secondary);
+ }
+
+ &.active {
+ background-color: var(--color-bg-brand-base);
+ color: var(--color-text-on-brand-base);
+ }
+
+ &:focus-visible {
+ outline: var(--outline-focus-default);
+ }
+ }
+}
+
+.text-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 0;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ color: inherit;
+ border: 0;
+ background: transparent;
+ cursor: pointer;
+ text-decoration: none;
+
+ .icon {
+ width: 13px;
+ height: 13px;
+ }
+}
+
+.column-header__issue-btn {
+ color: var(--color-text-error);
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+.loading-indicator {
+ color: var(--color-text-secondary);
+ font-size: 12px;
+ font-weight: 400;
+ text-transform: uppercase;
+ overflow: visible;
+ position: absolute;
+ top: 50%;
+ inset-inline-start: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.load-more .loading-indicator,
+.button .loading-indicator,
+.icon-button .loading-indicator {
+ position: static;
+ transform: none;
+ color: inherit;
+
+ .circular-progress {
+ color: inherit;
+ width: 22px;
+ height: 22px;
+ }
+}
+
+.button--compact .loading-indicator .circular-progress {
+ width: 17px;
+ height: 17px;
+}
+
+.icon-button .loading-indicator .circular-progress {
+ color: var(--color-text-tertiary);
+ width: 12px;
+ height: 12px;
+ margin: 6px;
+}
+
+.load-more .loading-indicator .circular-progress {
+ color: var(--color-text-tertiary);
+}
+
+.circular-progress {
+ color: var(--color-text-tertiary);
+ animation: 1.4s linear 0s infinite normal none running simple-rotate;
+
+ circle {
+ stroke: currentColor;
+ stroke-dasharray: 80px, 200px;
+ stroke-dashoffset: 0;
+ animation: circular-progress 1.4s ease-in-out infinite;
+ }
+}
+
+@keyframes circular-progress {
+ 0% {
+ stroke-dasharray: 1px, 200px;
+ stroke-dashoffset: 0;
+ }
+
+ 50% {
+ stroke-dasharray: 100px, 200px;
+ stroke-dashoffset: -15px;
+ }
+
+ 100% {
+ stroke-dasharray: 100px, 200px;
+ stroke-dashoffset: -125px;
+ }
+}
+
+@keyframes simple-rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes spring-rotate-in {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 30% {
+ transform: rotate(-484.8deg);
+ }
+
+ 60% {
+ transform: rotate(-316.7deg);
+ }
+
+ 90% {
+ transform: rotate(-375deg);
+ }
+
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+
+@keyframes spring-rotate-out {
+ 0% {
+ transform: rotate(-360deg);
+ }
+
+ 30% {
+ transform: rotate(124.8deg);
+ }
+
+ 60% {
+ transform: rotate(-43.27deg);
+ }
+
+ 90% {
+ transform: rotate(15deg);
+ }
+
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
+.video-error-cover {
+ align-items: center;
+ background: var(--color-bg-primary);
+ color: var(--color-text-primary);
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: center;
+ margin-top: 8px;
+ position: relative;
+ text-align: center;
+ z-index: 100;
+}
+
+.spoiler-button {
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 100;
+
+ &--hidden {
+ display: none;
+ }
+
+ &--click-thru {
+ pointer-events: none;
+ }
+
+ &__overlay {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: transparent;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ color: var(--color-text-on-media);
+ line-height: 20px;
+ font-size: 14px;
+
+ &__label {
+ background-color: var(--color-bg-media);
+ backdrop-filter: $backdrop-blur-filter;
+ border-radius: 8px;
+ padding: 12px 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ flex-direction: column;
+ font-weight: 600;
+ }
+
+ &__action {
+ font-weight: 400;
+ font-size: 13px;
+ }
+
+ &:hover,
+ &:focus {
+ .spoiler-button__overlay__label {
+ background-color: rgb(from var(--color-bg-media-base) r g b / 90%);
+ }
+ }
+ }
+}
+
+.account--panel {
+ border-top: 1px solid var(--color-border-primary);
+ border-bottom: 1px solid var(--color-border-primary);
+ display: flex;
+ flex-direction: row;
+ padding: 10px 0;
+}
+
+.account--panel__button,
+.detailed-status__button {
+ flex: 1 1 auto;
+ text-align: center;
+}
+
+.column-settings {
+ display: flex;
+ flex-direction: column;
+
+ &__section {
+ // FIXME: Legacy
+ color: var(--color-text-secondary);
+ cursor: default;
+ display: block;
+ font-weight: 500;
+ }
+
+ .column-header__links {
+ margin: 0;
+ }
+
+ section {
+ padding: 16px;
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+
+ h3 {
+ font-size: 16px;
+ line-height: 24px;
+ letter-spacing: 0.5px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+ margin-bottom: 16px;
+ }
+
+ &__row {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .app-form__toggle {
+ &__toggle > div {
+ border: 0;
+ }
+ }
+}
+
+.column-settings__hashtags {
+ margin-top: 15px;
+
+ .column-settings__row {
+ margin-bottom: 15px;
+ }
+
+ .column-select {
+ &__control {
+ @include search-input;
+
+ &::placeholder {
+ color: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-secondary)
+ );
+ }
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
+
+ &:focus {
+ background: var(--color-bg-secondary);
+ }
+
+ @media screen and (width <= 600px) {
+ font-size: 16px;
+ }
+ }
+
+ &__placeholder {
+ color: var(--color-text-tertiary);
+ padding-inline-start: 2px;
+ font-size: 12px;
+ }
+
+ &__value-container {
+ padding-inline-start: 6px;
+ }
+
+ &__multi-value {
+ background: var(--color-bg-secondary);
+
+ &__remove {
+ cursor: pointer;
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: var(--color-bg-brand-softer);
+ color: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-secondary)
+ );
+ }
+ }
+ }
+
+ &__multi-value__label,
+ &__input,
+ &__input-container {
+ color: var(--color-text-secondary);
+ }
+
+ &__clear-indicator,
+ &__dropdown-indicator {
+ cursor: pointer;
+ transition: none;
+ color: var(--color-text-tertiary);
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: var(--color-text-secondary);
+ }
+ }
+
+ &__indicator-separator {
+ background-color: var(--color-border-primary);
+ }
+
+ &__menu {
+ @include search-popout;
+
+ padding: 0;
+ background: var(--color-bg-elevated);
+ }
+
+ &__menu-list {
+ padding: 6px;
+ }
+
+ &__option {
+ color: var(--color-text-primary);
+ border-radius: 4px;
+ font-size: 14px;
+
+ &--is-focused,
+ &--is-selected {
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ }
+ }
+ }
+}
+
+.column-settings__row {
+ .text-btn:not(.column-header__permission-btn) {
+ margin-bottom: 15px;
+ }
+}
+
+.setting-toggle {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.setting-toggle__label {
+ color: var(--color-text-secondary);
+}
+
+.limited-account-hint {
+ p {
+ color: var(--color-text-primary);
+ font-size: 15px;
+ font-weight: 500;
+ margin-bottom: 20px;
+ }
+}
+
+.empty-column-indicator {
+ color: var(--color-text-secondary);
+ text-align: center;
+ padding: 20px;
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 400;
+ cursor: default;
+ display: flex;
+ flex: 1 1 auto;
+ align-items: center;
+ justify-content: center;
+
+ & > span {
+ max-width: 500px;
+ }
+
+ a {
+ color: var(--color-text-brand);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
+
+.empty-column-indicator {
+ &__arrow {
+ position: absolute;
+ top: 50%;
+ inset-inline-start: 50%;
+ pointer-events: none;
+ transform: translate(100%, -100%) rotate(12deg);
+ transform-origin: center;
+ }
+}
+
+.follow_requests-unlocked_explanation {
+ margin: 16px;
+ margin-bottom: 0;
+}
+
+.error-column {
+ padding: 20px;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ display: flex;
+ flex: 1 1 auto;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ cursor: default;
+
+ &__image {
+ width: 70%;
+ max-width: 350px;
+ margin-top: -50px;
+ }
+
+ &__message {
+ text-align: center;
+ color: var(--color-text-secondary);
+ font-size: 15px;
+ line-height: 22px;
+
+ h1 {
+ font-size: 28px;
+ line-height: 33px;
+ font-weight: 700;
+ margin-bottom: 15px;
+ color: var(--color-text-primary);
+ }
+
+ p {
+ max-width: 48ch;
+ }
+
+ &__actions {
+ margin-top: 30px;
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+}
+
+@keyframes heartbeat {
+ 0% {
+ transform: scale(1);
+ animation-timing-function: ease-out;
+ }
+
+ 10% {
+ transform: scale(0.91);
+ animation-timing-function: ease-in;
+ }
+
+ 17% {
+ transform: scale(0.98);
+ animation-timing-function: ease-out;
+ }
+
+ 33% {
+ transform: scale(0.87);
+ animation-timing-function: ease-in;
+ }
+
+ 45% {
+ transform: scale(1);
+ animation-timing-function: ease-out;
+ }
+}
+
+.no-reduce-motion .pulse-loading {
+ transform-origin: center center;
+ animation: heartbeat 1.5s ease-in-out infinite both;
+}
+
+.emoji-picker-dropdown__menu {
+ position: relative;
+ margin-top: 5px;
+ z-index: 2;
+ background: var(--color-bg-elevated);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ box-shadow: var(--dropdown-shadow);
+ border-radius: 5px;
+
+ .emoji-mart-scroll {
+ transition: opacity 200ms ease;
+ }
+
+ &.selecting .emoji-mart-scroll {
+ opacity: 0.5;
+ }
+}
+
+.emoji-picker-dropdown__modifiers {
+ position: absolute;
+ top: 60px;
+ inset-inline-end: 11px;
+ cursor: pointer;
+}
+
+.emoji-picker-dropdown__modifiers__menu {
+ position: absolute;
+ z-index: 4;
+ top: -5px;
+ inset-inline-start: -9px;
+ background: var(--color-bg-elevated);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ box-shadow: var(--dropdown-shadow);
+ overflow: hidden;
+
+ button {
+ display: block;
+ cursor: pointer;
+ border: 0;
+ padding: 4px 8px;
+ background: transparent;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: var(--color-border-primary);
+ }
+ }
+
+ .emoji-mart-emoji {
+ height: 22px;
+ }
+}
+
+.emoji-mart-emoji {
+ span {
+ background-repeat: no-repeat;
+ }
+}
+
+.upload-area {
+ align-items: center;
+ background: rgb(from var(--color-bg-overlay) r g b / 80%);
+ display: flex;
+ height: 100vh;
+ justify-content: center;
+ inset-inline-start: 0;
+ opacity: 0;
+ position: fixed;
+ top: 0;
+ visibility: hidden;
+ width: 100vw;
+ z-index: 2000;
+
+ * {
+ pointer-events: none;
+ }
+}
+
+.upload-area__drop {
+ width: 320px;
+ height: 160px;
+ display: flex;
+ box-sizing: border-box;
+ position: relative;
+ padding: 8px;
+}
+
+.upload-area__background {
+ position: absolute;
+ top: 0;
+ inset-inline-end: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ z-index: -1;
+ border-radius: 4px;
+ background: var(--color-bg-elevated);
+ box-shadow: 0 0 5px var(--color-shadow-primary);
+}
+
+.upload-area__content {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: var(--color-text-primary);
+ font-size: 18px;
+ font-weight: 500;
+ border: 2px dashed var(--color-border-primary);
+ border-radius: 4px;
+}
+
+.upload-progress {
+ color: var(--color-text-secondary);
+ overflow: hidden;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ padding: 0 12px;
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ color: var(--color-text-brand);
+ }
+
+ span {
+ font-size: 12px;
+ text-transform: uppercase;
+ font-weight: 500;
+ display: block;
+ }
+}
+
+.upload-progress__message {
+ flex: 1 1 auto;
+}
+
+.upload-progress__backdrop {
+ width: 100%;
+ height: 6px;
+ border-radius: 6px;
+ background: var(--color-bg-primary);
+ position: relative;
+ margin-top: 5px;
+}
+
+.upload-progress__tracker {
+ position: absolute;
+ inset-inline-start: 0;
+ top: 0;
+ height: 6px;
+ background: var(--color-text-brand);
+ border-radius: 6px;
+}
+
+.emoji-button {
+ display: block;
+ padding-top: 5px;
+ padding-bottom: 2px;
+ padding-inline-start: 2px;
+ padding-inline-end: 5px;
+ outline: 0;
+ cursor: pointer;
+
+ img {
+ filter: grayscale(100%);
+ opacity: 0.8;
+ display: block;
+ margin: 0;
+ width: 22px;
+ height: 22px;
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ img {
+ opacity: 1;
+ filter: none;
+ border-radius: 100%;
+ }
+ }
+
+ &:focus-visible {
+ img {
+ outline: var(--outline-focus-default);
+ }
+ }
+}
+
+.dropdown--active .emoji-button img {
+ opacity: 1;
+ filter: none;
+}
+
+.privacy-dropdown__dropdown,
+.language-dropdown__dropdown,
+.visibility-dropdown__dropdown {
+ box-shadow: var(--dropdown-shadow);
+ background: var(--color-bg-elevated);
+ border: 1px solid var(--color-border-primary);
+ padding: 4px;
+ border-radius: 4px;
+ overflow: hidden;
+ z-index: 2;
+
+ &.top {
+ transform-origin: 50% 100%;
+ }
+
+ &.bottom {
+ transform-origin: 50% 0;
+ }
+}
+
+.modal-root__container .privacy-dropdown {
+ flex-grow: 0;
+}
+
+.modal-root__container .privacy-dropdown__dropdown {
+ pointer-events: auto;
+ z-index: 9999;
+}
+
+.privacy-dropdown__option,
+.visibility-dropdown__option {
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ padding: 8px 12px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ border-radius: 4px;
+ color: var(--color-text-primary);
+
+ // Make sure adjacent hover/active states don't have a meeting radius.
+ &:hover + &:is(:focus, .active),
+ &:is(:focus, .active) + &:hover,
+ &:is(:focus, .active) + &:is(:focus, .active) {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ &:hover:has(+ :focus, .active),
+ &:is(:focus, .active):has(+ :hover),
+ &:is(:focus, .active):has(+ :is(:focus, .active)) {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &:hover,
+ &:active {
+ background: var(--color-bg-secondary);
+ }
+
+ &:focus,
+ &.active {
+ background: var(--color-bg-brand-base);
+ color: var(--color-text-on-brand-base);
+ outline: 0;
+
+ .privacy-dropdown__option__content,
+ .privacy-dropdown__option__content strong,
+ .privacy-dropdown__option__additional,
+ .visibility-dropdown__option__content,
+ .visibility-dropdown__option__content strong,
+ .visibility-dropdown__option__additional {
+ color: var(--color-text-on-brand-base);
+ }
+ }
+
+ &__additional {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--color-text-secondary);
+ cursor: help;
+ }
+}
+
+.privacy-dropdown__option__icon,
+.visibility-dropdown__option__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.privacy-dropdown__option__content,
+.visibility-dropdown__option__content {
+ flex: 1 1 auto;
+ color: var(--color-text-secondary);
+
+ strong {
+ color: var(--color-text-primary);
+ font-weight: 500;
+ display: block;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+}
+
+.icon-badge-wrapper {
+ position: relative;
+}
+
+.icon-badge {
+ position: absolute;
+ display: block;
+ inset-inline-end: -0.25em;
+ top: -0.25em;
+ background-color: var(--color-bg-brand-base);
+ 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: var(--color-text-tertiary);
+ 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 var(--color-border-primary);
+ border-bottom: 1px solid var(--color-border-primary);
+ 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 var(--color-border-primary);
+ padding: 10px 0;
+ border-bottom: 4px solid transparent;
+
+ &:first-child {
+ border-inline-start: 0;
+ }
+
+ &.active {
+ border-bottom: 4px solid var(--color-text-brand);
+ }
+
+ & > span {
+ display: block;
+ text-transform: uppercase;
+ font-size: 11px;
+ color: var(--color-text-secondary);
+ }
+
+ strong {
+ display: block;
+ font-size: 15px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+
+ abbr {
+ color: var(--color-text-brand);
+ }
+}
+
+.language-dropdown {
+ &__dropdown {
+ width: 300px;
+ padding: 0;
+
+ .emoji-mart-search {
+ padding: 10px;
+ background: var(--color-bg-elevated);
+
+ input {
+ padding: 8px 12px;
+ background: var(--color-bg-primary);
+ border: 1px solid var(--color-border-primary);
+ color: var(--color-text-secondary);
+
+ @media screen and (width <= 600px) {
+ font-size: 16px;
+ line-height: 24px;
+ letter-spacing: 0.5px;
+ }
+ }
+ }
+
+ .emoji-mart-search-icon {
+ inset-inline-end: 15px;
+ opacity: 1;
+ color: var(--color-text-primary);
+
+ .icon {
+ width: 18px;
+ height: 18px;
+ }
+
+ &:disabled {
+ color: var(--color-text-secondary);
+ }
+ }
+
+ .emoji-mart-scroll {
+ padding: 0 10px 10px;
+ background: var(--color-bg-elevated);
+ }
+
+ &__results {
+ &__item {
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
+ cursor: pointer;
+ color: var(--color-text-primary);
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ font-weight: 500;
+ padding: 8px 12px;
+ border-radius: 4px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+
+ &__common-name {
+ color: var(--color-text-secondary);
+ font-weight: 400;
+ }
+
+ &:active,
+ &:hover {
+ background: var(--color-bg-secondary);
+ }
+
+ &:focus,
+ &.active {
+ background: var(--color-bg-brand-base);
+ color: var(--color-text-on-brand-base);
+ outline: 0;
+
+ .language-dropdown__dropdown__results__item__common-name {
+ color: var(--color-text-on-brand-base);
+ }
+ }
+ }
+ }
+ }
+}
+
+.visibility-modal {
+ &__quote-warning {
+ color: var(--color-text-primary);
+ background: var(--color-bg-warning-softer);
+ padding: 16px;
+ border-radius: 4px;
+
+ h3 {
+ font-weight: 500;
+ margin-bottom: 4px;
+ }
+
+ p {
+ font-size: 0.8em;
+ }
+ }
+}
+
+.visibility-dropdown {
+ &__overlay[data-popper-placement] {
+ z-index: 9999;
+ }
+
+ &.disabled {
+ opacity: 0.6;
+ cursor: default;
+ }
+
+ &__label {
+ display: block;
+ font-weight: 500;
+ margin-bottom: 8px;
+ }
+
+ &__button {
+ display: flex;
+ align-items: center;
+ color: var(--color-text-primary);
+ background: var(--color-bg-secondary-solid);
+ border: 1px solid var(--color-border-primary);
+ padding: 8px 12px;
+ width: 100%;
+ text-align: left;
+ border-radius: 4px;
+ font-size: 14px;
+ height: 40px;
+
+ &:disabled {
+ cursor: default;
+ }
+ }
+
+ &__icon {
+ margin-inline: auto -4px;
+ width: 18px;
+ height: 18px;
+ opacity: 0.5;
+ }
+
+ &__helper {
+ margin-top: 4px;
+ font-size: 0.8em;
+ color: var(--color-text-tertiary);
+ }
+}
+
+.search {
+ margin-bottom: 32px;
+ position: relative;
+
+ .layout-multiple-columns & {
+ margin-bottom: 10px;
+ }
+
+ &__popout {
+ box-sizing: border-box;
+ display: none;
+ position: absolute;
+ inset-inline-start: 0;
+ margin-top: -2px;
+ width: 100%;
+ background: var(--color-bg-elevated);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 0 0 4px 4px;
+ box-shadow: var(--dropdown-shadow);
+ z-index: 99;
+ font-size: 13px;
+ padding: 15px 5px;
+
+ h4 {
+ text-transform: uppercase;
+ color: var(--color-text-secondary);
+ font-weight: 500;
+ padding: 0 10px;
+ margin-bottom: 10px;
+ }
+
+ .icon-button {
+ padding: 0;
+ color: var(--color-text-secondary);
+ }
+
+ .icon {
+ width: 18px;
+ height: 18px;
+ }
+
+ &__menu {
+ margin-bottom: 20px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &__message {
+ color: var(--color-text-secondary);
+ padding: 0 10px;
+ }
+
+ &__item {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ border: 0;
+ font: inherit;
+ background: transparent;
+ color: var(--color-text-secondary);
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 4px;
+ text-align: start;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+
+ &--flex {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .icon-button {
+ transition: none;
+ }
+
+ &:hover,
+ &:focus,
+ &:active,
+ &.selected {
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+
+ .icon-button {
+ color: inherit;
+ }
+ }
+
+ mark {
+ background: transparent;
+ font-weight: 700;
+ color: var(--color-text-primary);
+ }
+
+ span {
+ overflow: inherit;
+ text-overflow: inherit;
+ }
+ }
+ }
+ }
+
+ &.active {
+ .search__input {
+ border-radius: 4px 4px 0 0;
+ }
+
+ .search__popout {
+ display: block;
+ }
+ }
+}
+
+.search__input {
+ @include search-input;
+
+ display: block;
+ padding: 12px 16px;
+ padding-inline-start: 16px + 15px + 8px;
+ line-height: normal;
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
+}
+
+.search__icon-wrapper {
+ position: absolute;
+ top: 14px;
+ display: grid;
+ margin-inline-start: 16px - 2px;
+ width: 20px;
+ height: 20px;
+
+ .icon {
+ width: 100%;
+ height: 100%;
+ }
+
+ &:not(.has-value) {
+ pointer-events: none;
+ }
+}
+
+.search__icon {
+ grid-area: 1 / 1;
+ transition: all 100ms linear;
+ transition-property: transform, opacity;
+ color: var(--color-text-secondary);
+}
+
+.search__icon.icon-search {
+ .has-value & {
+ pointer-events: none;
+ opacity: 0;
+ transform: rotate(90deg);
+ }
+}
+
+.search__icon--clear-button {
+ background: transparent;
+ border: 0;
+ padding: 0;
+ width: 20px;
+ height: 20px;
+ border-radius: 100%;
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus {
+ outline: 0 !important;
+ }
+
+ &:focus-visible {
+ box-shadow: 0 0 0 2px var(--color-text-brand);
+ }
+
+ &[aria-hidden='true'] {
+ pointer-events: none;
+ opacity: 0;
+ transform: rotate(-90deg);
+ }
+}
+
+.search-results__section {
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &__header {
+ border-bottom: 1px solid var(--color-border-primary);
+ background: var(--color-bg-tertiary);
+ padding: 15px;
+ font-weight: 500;
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ display: flex;
+ justify-content: space-between;
+
+ h3 {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ }
+
+ button {
+ color: var(--color-text-brand);
+ padding: 0;
+ border: 0;
+ background: 0;
+ font: inherit;
+
+ &:hover,
+ &:active,
+ &:focus {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .account:last-child,
+ & > div:last-child .status {
+ border-bottom: 0;
+ }
+}
+
+.search-results__info {
+ padding: 20px;
+ color: var(--color-text-secondary);
+ text-align: center;
+}
+
+.modal-root {
+ position: relative;
+ z-index: 9998;
+}
+
+.modal-root__overlay {
+ position: fixed;
+ top: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ bottom: 0;
+ opacity: 0.9;
+ background: var(--color-bg-overlay);
+ transition: background 0.5s;
+}
+
+.modal-root__container {
+ position: fixed;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ max-width: 100vw;
+ max-height: 100vh;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ align-content: space-around;
+ z-index: 9999;
+ pointer-events: none;
+ user-select: none;
+ overscroll-behavior: none;
+}
+
+.modal-root__modal {
+ pointer-events: auto;
+ user-select: text;
+ display: flex;
+ max-width: 100vw;
+
+ @media screen and (width <= $mobile-breakpoint) {
+ margin-top: auto;
+ }
+}
+
+.video-modal .video-player {
+ max-height: 80vh;
+ max-width: 100vw;
+}
+
+.audio-modal__container {
+ width: 50vw;
+}
+
+.media-modal {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ touch-action: pan-y;
+
+ &__buttons {
+ position: absolute;
+ inset-inline-end: 8px;
+ top: 8px;
+ z-index: 100;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+
+ .icon-button {
+ --default-icon-color: var(--color-text-on-media);
+ --default-bg-color: transparent;
+ --hover-icon-color: var(--color-text-on-media);
+ --hover-bg-color: rgb(
+ from var(--color-text-on-media) r g b /
+ var(--overlay-strength-secondary)
+ );
+
+ padding: 8px;
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ filter: var(--overlay-icon-shadow);
+ }
+ }
+ }
+}
+
+.media-modal__closer {
+ display: flex;
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ bottom: 0;
+ align-items: center;
+ justify-content: space-around; // If set to center, the fullscreen image overlay is misaligned.
+
+ > div {
+ flex-shrink: 0;
+ overflow: auto;
+ }
+}
+
+.media-modal__navigation {
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ bottom: 0;
+ pointer-events: none;
+ transition: opacity 0.3s linear;
+ will-change: opacity;
+
+ * {
+ pointer-events: auto;
+ }
+
+ &.media-modal__navigation--hidden {
+ opacity: 0;
+
+ * {
+ pointer-events: none;
+ }
+ }
+}
+
+.media-modal__nav {
+ background: transparent;
+ box-sizing: border-box;
+ border: 0;
+ color: var(--color-text-on-media);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ font-size: 24px;
+ height: 20vmax;
+ margin: auto 0;
+ padding: 30px 5px;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ transform: scaleX(var(--text-x-direction));
+
+ .icon {
+ border-radius: 5px;
+ padding: 10px;
+ }
+
+ &:hover .icon,
+ &:focus .icon,
+ &:active .icon {
+ background: rgb(
+ from var(--color-text-on-media) r g b / var(--overlay-strength-secondary)
+ );
+ }
+}
+
+.media-modal__nav--prev {
+ inset-inline-start: 0;
+}
+
+.media-modal__nav--next {
+ inset-inline-end: 0;
+}
+
+.media-modal__overlay {
+ max-width: 600px;
+ position: absolute;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ bottom: 0;
+ margin: 0 auto;
+
+ .picture-in-picture__footer {
+ border-radius: 0;
+ border: none;
+ background: transparent;
+ backdrop-filter: none;
+ padding: 16px;
+
+ .icon-button {
+ --default-icon-color: var(--color-text-on-media);
+ --default-bg-color: transparent;
+ --hover-icon-color: var(--color-text-on-media);
+ --hover-bg-color: rgb(
+ from var(--color-text-on-media) r g b / var(--overlay-strength-brand)
+ );
+
+ .icon {
+ filter: var(--overlay-icon-shadow);
+ }
+
+ &.active {
+ --default-icon-color: var(--color-text-brand);
+ --hover-icon-color: var(--color-text-brand);
+ --hover-bg-color: var(--color-bg-brand-soft);
+ }
+
+ &.star-icon.active {
+ --default-icon-color: var(--color-text-favourite-highlight);
+ --hover-icon-color: var(--color-text-favourite-highlight);
+ --hover-bg-color: rgb(
+ from var(--color-text-favourite-highlight) r g b /
+ var(--overlay-strength-brand)
+ );
+ }
+
+ &.disabled {
+ --default-icon-color: var(--color-text-on-media);
+ --default-bg-color: transparent;
+
+ cursor: default;
+ opacity: 0.4;
+ }
+ }
+ }
+}
+
+.media-modal__pagination {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 20px;
+}
+
+.media-modal__page-dot {
+ flex: 0 0 auto;
+ background-color: rgb(from var(--color-text-on-media) r g b / 40%);
+ filter: var(--overlay-icon-shadow);
+ height: 6px;
+ width: 6px;
+ border-radius: 50%;
+ margin: 0 4px;
+ padding: 0;
+ border: 0;
+ font-size: 0;
+ transition: background-color 0.2s ease-in-out;
+
+ &.active {
+ background-color: var(--color-text-on-media);
+ }
+
+ &:focus {
+ opacity: 1;
+ outline: 2px solid var(--color-text-on-media);
+ outline-offset: 2px;
+ }
+}
+
+.modal-placeholder {
+ width: 588px;
+ min-height: 478px;
+ flex-direction: column;
+ background: var(--color-bg-primary);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 16px;
+
+ &__error {
+ padding: 24px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+
+ &__image {
+ width: 70%;
+ max-width: 350px;
+ }
+
+ &__message {
+ text-align: center;
+ text-wrap: balance;
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+
+ &__actions {
+ margin-top: 24px;
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+}
+
+.safety-action-modal {
+ width: 600px;
+ flex-direction: column;
+
+ &__top,
+ &__bottom {
+ display: flex;
+ gap: 8px;
+ padding: 24px;
+ flex-direction: column;
+ background: var(--color-bg-primary);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ }
+
+ &__top {
+ border-radius: 16px 16px 0 0;
+ border-bottom: 0;
+ gap: 16px;
+ }
+
+ &__bottom {
+ border-radius: 0 0 16px 16px;
+ border-top: 0;
+
+ @media screen and (max-width: $mobile-breakpoint) {
+ border-radius: 0;
+ border-bottom: 0;
+ padding-bottom: 32px;
+ }
+ }
+
+ &__header {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--color-text-secondary);
+
+ &__icon {
+ border-radius: 64px;
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ flex-shrink: 0;
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ }
+ }
+
+ h1 {
+ font-size: 22px;
+ line-height: 28px;
+ color: var(--color-text-primary);
+ }
+ }
+
+ &__confirmation {
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--color-text-secondary);
+
+ h1 {
+ font-size: 16px;
+ line-height: 24px;
+ color: var(--color-text-primary);
+ font-weight: 500;
+
+ &:not(:only-child) {
+ margin-bottom: 8px;
+ }
+ }
+
+ strong {
+ font-weight: 700;
+ color: var(--color-text-primary);
+ }
+ }
+
+ &__status {
+ border: 1px solid var(--color-border-primary);
+ border-radius: 8px;
+ padding: 8px;
+ cursor: pointer;
+
+ &__account {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 8px;
+ color: var(--color-text-tertiary);
+
+ bdi {
+ color: inherit;
+ }
+ }
+
+ &__content {
+ display: -webkit-box;
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--color-text-tertiary);
+ line-clamp: 4;
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ max-height: 4 * 22px;
+ overflow: hidden;
+
+ p,
+ a {
+ color: inherit;
+ }
+ }
+
+ .reply-indicator__attachments {
+ margin-top: 0;
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--color-text-tertiary);
+ }
+ }
+
+ &__bullet-points {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ font-size: 16px;
+ line-height: 24px;
+
+ & > div {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+
+ strong {
+ font-weight: 700;
+ }
+ }
+
+ &--deemphasized {
+ color: var(--color-text-primary);
+ }
+
+ &__icon {
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ }
+ }
+ }
+
+ &__field-group {
+ display: flex;
+ flex-direction: column;
+
+ label {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ font-size: 16px;
+ line-height: 24px;
+ height: 32px;
+ padding: 0 12px;
+ }
+ }
+
+ &__caveats {
+ font-size: 14px;
+ padding: 0 12px;
+
+ strong {
+ font-weight: 500;
+ }
+ }
+
+ &__bottom {
+ padding-top: 0;
+
+ &__collapsible {
+ display: none;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ &.active {
+ background: var(--color-bg-secondary);
+ padding-top: 24px;
+
+ .safety-action-modal__bottom__collapsible {
+ display: flex;
+ }
+ }
+ }
+
+ &__actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ justify-content: flex-end;
+
+ &__hint {
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--color-text-tertiary);
+ }
+
+ .link-button {
+ padding: 10px 12px;
+ font-weight: 600;
+ }
+ }
+}
+
+.dialog-modal {
+ width: 588px;
+ max-height: 80vh;
+ flex-direction: column;
+ background: var(--color-bg-elevated);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 16px;
+
+ &__header {
+ box-sizing: border-box;
+ border-bottom: 1px solid var(--color-border-primary);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-direction: row-reverse;
+ padding: 12px 24px;
+ min-height: 61px;
+
+ &__title {
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 500;
+ letter-spacing: 0.15px;
+ }
+ }
+
+ &__content {
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0.25px;
+ overflow-y: auto;
+
+ &__description {
+ margin: 24px 24px 0;
+ color: var(--color-text-secondary);
+
+ a {
+ color: inherit;
+ }
+ }
+
+ &__form {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 24px;
+ }
+
+ &__preview {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+ background: var(--color-bg-media-base);
+
+ img {
+ display: block;
+ }
+
+ img,
+ .gifv video {
+ outline: 1px solid var(--color-border-media);
+ outline-offset: -1px;
+ border-radius: 8px;
+ }
+
+ img,
+ .gifv video,
+ .video-player,
+ .audio-player {
+ max-width: 360px;
+ max-height: 45vh;
+ }
+ }
+
+ &__actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ justify-content: flex-end;
+ padding: 0 24px 24px;
+ }
+ }
+
+ &__popout {
+ background: var(--color-bg-elevated);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ box-shadow: var(--dropdown-shadow);
+ max-width: 320px;
+ padding: 16px;
+ border-radius: 8px;
+ z-index: 9999 !important;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--color-text-secondary);
+ }
+
+ .copy-paste-text {
+ margin-bottom: 0;
+ }
+}
+
+.hotkey-combination {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.doodle-modal,
+.boost-modal,
+.report-modal,
+.actions-modal,
+.compare-history-modal {
+ background: var(--color-bg-primary);
+ color: var(--color-text-primary);
+ border-radius: 4px;
+ border: 1px solid var(--color-border-primary);
+ overflow: hidden;
+ max-width: 90vw;
+ width: 480px;
+ position: relative;
+ flex-direction: column;
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ border-bottom: 0;
+ border-radius: 4px 4px 0 0;
+ padding-bottom: env(safe-area-inset-bottom);
+ }
+}
+
+.doodle-modal__action-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: var(--color-bg-elevated);
+ padding: 10px; // purposefully reduce padding in glitch-soc
+
+ & > div {
+ flex: 1 1 auto;
+ text-align: end;
+ color: var(--color-text-brand);
+ padding-inline-end: 10px;
+ }
+
+ .icon {
+ vertical-align: middle;
+ }
+
+ .button {
+ flex: 0 0 auto;
+ }
+}
+
+.boost-modal__container {
+ overflow-y: auto;
+ padding: 10px;
+
+ .status {
+ user-select: text;
+ border-bottom: 0;
+ }
+}
+
+.report-modal {
+ width: 90vw;
+ max-width: 700px;
+ border: 1px solid var(--color-border-primary);
+}
+
+.report-dialog-modal {
+ max-width: 90vw;
+ width: 480px;
+ height: 80vh;
+ background: var(--color-bg-primary);
+ color: var(--color-text-primary);
+ border-radius: 4px;
+ border: 1px solid var(--color-border-primary);
+ overflow: hidden;
+ position: relative;
+ flex-direction: column;
+ display: flex;
+
+ &__container {
+ box-sizing: border-box;
+ border-top: 1px solid var(--color-border-primary);
+ padding: 20px;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ overflow: auto;
+ }
+
+ &__title {
+ font-size: 28px;
+ line-height: 33px;
+ font-weight: 700;
+ margin-bottom: 15px;
+
+ @media screen and (height <= 800px) {
+ font-size: 22px;
+ }
+ }
+
+ &__subtitle {
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 22px;
+ margin-bottom: 4px;
+ }
+
+ &__lead {
+ font-size: 17px;
+ line-height: 22px;
+ color: var(--color-text-primary);
+ margin-bottom: 30px;
+
+ a {
+ text-decoration: none;
+ color: var(--color-text-brand);
+ font-weight: 500;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__actions {
+ margin-top: 30px;
+ display: flex;
+
+ .button {
+ flex: 1 1 auto;
+ }
+ }
+
+ &__statuses {
+ flex-grow: 1;
+ min-height: 0;
+ overflow: auto;
+ }
+
+ .status__content a {
+ color: var(--color-text-brand);
+ }
+
+ .status__content,
+ .status__content p {
+ color: var(--color-text-primary);
+ }
+
+ .dialog-option {
+ align-items: center;
+ gap: 12px;
+ }
+
+ .dialog-option .poll__input {
+ color: var(--color-text-secondary);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ svg {
+ width: 15px;
+ height: 15px;
+ }
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: var(--color-text-success);
+ border-width: 4px;
+ }
+
+ &.active {
+ color: var(--color-text-on-success-base);
+ background: var(--color-bg-success-base);
+ border-color: var(--color-bg-success-base);
+ }
+ }
+
+ .poll__option.dialog-option {
+ padding: 15px 0;
+ flex: 0 0 auto;
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ & > .poll__option__text {
+ font-size: 13px;
+ color: var(--color-text-primary);
+
+ strong {
+ font-size: 17px;
+ font-weight: 500;
+ line-height: 22px;
+ color: var(--color-text-primary);
+ display: block;
+ margin-bottom: 4px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+
+ .flex-spacer {
+ background: transparent;
+ }
+
+ &__textarea {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ color: var(--color-text-primary);
+ background: var(--color-bg-secondary);
+ padding: 10px;
+ font-family: inherit;
+ font-size: 17px;
+ line-height: 22px;
+ resize: vertical;
+ border: 0;
+ border: 1px solid var(--color-border-primary);
+ outline: 0;
+ border-radius: 4px;
+ margin: 20px 0;
+
+ &:focus {
+ outline: 0;
+ }
+ }
+
+ &__toggle {
+ display: flex;
+ align-items: center;
+ margin-bottom: 16px;
+ gap: 8px;
+
+ & > span {
+ display: block;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ }
+ }
+
+ .button.button-secondary {
+ border-color: var(--color-text-error);
+ color: var(--color-text-error);
+ flex: 0 0 auto;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: var(--color-text-on-error-base);
+ background: var(--color-bg-error-base);
+ border-color: var(--color-bg-error-base);
+ }
+ }
+
+ hr {
+ border: 0;
+ background: transparent;
+ margin: 15px 0;
+ }
+
+ .emoji-mart-search {
+ padding-inline-end: 10px;
+ }
+
+ .emoji-mart-search-icon {
+ inset-inline-end: 10px + 5px;
+ }
+}
+
+.setting-divider {
+ background: transparent;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 1px;
+ margin-bottom: 29px;
+}
+
+.actions-modal {
+ border-radius: 8px 8px 0 0;
+ background: var(--color-bg-elevated);
+ backdrop-filter: $backdrop-blur-filter;
+ border-color: var(--color-border-primary);
+ box-shadow: var(--dropdown-shadow);
+ max-height: 80vh;
+ max-width: 80vw;
+
+ ul {
+ overflow-y: auto;
+ padding-bottom: 8px;
+ }
+
+ a,
+ button {
+ color: inherit;
+ display: flex;
+ padding: 16px;
+ font-size: 15px;
+ line-height: 21px;
+ background: transparent;
+ border: none;
+ align-items: center;
+ text-decoration: none;
+ width: 100%;
+ box-sizing: border-box;
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: var(--color-bg-brand-softer);
+ }
+ }
+}
+
+.report-modal__target {
+ padding: 30px;
+ font-size: 16px;
+
+ strong {
+ font-weight: 500;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+}
+
+.report-modal__target {
+ text-align: center;
+}
+
+.report-modal__target {
+ padding: 15px;
+
+ .report-modal__close {
+ position: absolute;
+ top: 10px;
+ inset-inline-end: 10px;
+ }
+}
+
+.compare-history-modal {
+ .report-modal__target {
+ border-bottom: 1px solid var(--color-border-primary);
+ }
+
+ &__container {
+ padding: 30px;
+ pointer-events: all;
+ overflow-y: auto;
+ }
+
+ .status__content {
+ color: var(--color-text-primary);
+ font-size: 19px;
+ line-height: 24px;
+
+ .emojione {
+ width: 24px;
+ height: 24px;
+ margin: -1px 0 0;
+ }
+
+ a {
+ color: var(--color-text-brand);
+ }
+
+ hr {
+ height: 0.25rem;
+ padding: 0;
+ background-color: var(--color-text-primary);
+ border: 0;
+ margin: 20px 0;
+ }
+ }
+
+ .media-gallery,
+ .audio-player,
+ .video-player {
+ margin-top: 15px;
+ }
+}
+
+.loading-bar {
+ background-color: var(--color-bg-brand-base);
+ height: 3px;
+ position: fixed;
+ top: 0;
+ inset-inline-start: 0;
+ z-index: 9999;
+}
+
+// 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: var(--color-text-on-media);
+ background: var(--color-bg-media);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 0;
+ padding: 3px 12px;
+ border-radius: 99px;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 20px;
+ }
+}
+
+.media-gallery__item__badges {
+ position: absolute;
+ bottom: 8px;
+ inset-inline-end: 8px;
+ display: flex;
+ gap: 2px;
+ pointer-events: none;
+}
+
+.media-gallery__alt__label,
+.relationship-tag {
+ display: block;
+ text-align: center;
+ color: var(--color-text-on-media);
+ background: var(--color-bg-media);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 0;
+ padding: 3px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 700;
+ z-index: 1;
+ line-height: 20px;
+ cursor: pointer;
+ pointer-events: auto;
+
+ &--non-interactive {
+ pointer-events: none;
+ }
+}
+
+.relationship-tag {
+ text-transform: uppercase;
+ cursor: default;
+}
+
+.info-tooltip {
+ color: var(--color-text-on-media);
+ background: var(--color-bg-media);
+ backdrop-filter: $backdrop-blur-filter;
+ border-radius: 4px;
+ box-shadow: var(--dropdown-shadow);
+ padding: 16px;
+ min-width: 16em;
+ min-height: 2em;
+ max-width: 22em;
+ max-height: 30em;
+ overflow-y: auto;
+ z-index: 10;
+
+ &--solid {
+ color: var(--color-text-primary);
+ background: var(--color-bg-elevated);
+ border: 1px solid var(--color-border-primary);
+ }
+
+ h4 {
+ font-size: 15px;
+ line-height: 20px;
+ font-weight: 500;
+ margin-bottom: 8px;
+ }
+
+ p {
+ font-size: 15px;
+ line-height: 20px;
+ opacity: 0.85;
+ white-space: pre-line;
+ }
+
+ .button {
+ margin-block-start: 8px;
+ }
+}
+
+.attachment-list {
+ display: flex;
+ font-size: 14px;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ margin-top: 14px; // glitch: reduced margins
+ overflow: hidden;
+
+ &__icon {
+ flex: 0 0 auto;
+ color: var(--color-text-tertiary);
+ padding: 8px 18px;
+ cursor: default;
+ border-inline-end: 1px solid var(--color-border-primary);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 26px;
+ }
+
+ &__list {
+ list-style: none;
+ padding: 4px 0;
+ padding-inline-start: 8px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ li {
+ display: block;
+ padding: 4px 0;
+ }
+
+ a {
+ text-decoration: none;
+ color: var(--color-text-tertiary);
+ font-weight: 500;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &.compact {
+ border: 0;
+ margin-top: 4px; // glitch: reduced margins
+
+ .attachment-list__list {
+ padding: 0;
+ display: block;
+ }
+
+ .icon {
+ color: var(--color-text-tertiary);
+ vertical-align: middle;
+ }
+ }
+}
+
+/* Media Gallery */
+.media-gallery {
+ box-sizing: border-box;
+ margin-top: 8px;
+ overflow: hidden;
+ border-radius: 8px;
+ position: relative;
+ width: 100%;
+ min-height: 64px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 2px;
+
+ &--layout-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(--color-border-media);
+ outline-offset: -1px;
+ z-index: 1;
+
+ &--tall {
+ grid-row: span 2;
+ }
+
+ &--wide {
+ grid-column: span 2;
+ }
+
+ .full-width & {
+ border-radius: 0;
+ }
+
+ &.letterbox {
+ background: var(--color-bg-media);
+ }
+
+ &--square {
+ aspect-ratio: 1;
+ }
+
+ &__overlay {
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ padding: 8px;
+ z-index: 1;
+
+ &--corner {
+ align-items: flex-start;
+ justify-content: flex-end;
+ }
+
+ .icon {
+ color: var(--color-text-on-media);
+ filter: drop-shadow(0 0 6px var(--color-bg-media-base));
+ }
+ }
+
+ &--error img {
+ visibility: hidden;
+ }
+}
+
+.media-gallery__item-thumbnail {
+ cursor: pointer;
+ display: block;
+ text-decoration: none;
+ color: var(--color-text-primary);
+ position: relative;
+ z-index: -1;
+
+ &,
+ img {
+ height: 100%;
+ width: 100%;
+ 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: var(--color-bg-overlay);
+
+ &--hidden {
+ display: none;
+ }
+}
+
+.media-gallery__gifv {
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+ z-index: -1;
+}
+
+.media-gallery__item-gifv-thumbnail {
+ cursor: pointer;
+ height: 100%;
+ 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 {
+ /* These are only fallback values, the AudioPlayer component inserts
+ * the real colours dynamically as inline styles */
+ --player-foreground-color: var(--color-text-on-media);
+ --player-background-color: var(--color-bg-media-base);
+ --player-accent-color: var(--color-text-brand);
+
+ box-sizing: border-box;
+ container: audio-player / inline-size;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ color: var(--player-foreground-color);
+ background: var(--player-background-color);
+ border-radius: 8px;
+ outline: 1px solid var(--color-border-media);
+ outline-offset: -1px;
+
+ &__controls {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ height: 100%;
+
+ &__play {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+
+ .player-button {
+ position: absolute;
+ top: 50%;
+ inset-inline-start: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ .icon {
+ filter: var(--overlay-icon-shadow);
+ }
+ }
+
+ .player-button {
+ display: inline-block;
+ outline: 0;
+ padding: 5px;
+ flex: 0 0 auto;
+ background: transparent;
+ border: 0;
+ color: var(--player-foreground-color);
+ opacity: 0.75;
+
+ .icon {
+ width: 48px;
+ height: 48px;
+ }
+
+ &:active,
+ &:hover,
+ &:focus {
+ opacity: 1;
+ }
+ }
+ }
+
+ &__visualizer {
+ width: 100%;
+ max-width: 200px;
+ }
+
+ .video-player__seek {
+ position: absolute;
+ inset: 0 0 auto;
+ height: 24px;
+ z-index: 1; /* Ensure this renders on top of audio player controls */
+ }
+
+ &.inactive {
+ .video-player__seek,
+ .audio-player__controls,
+ .video-player__controls {
+ visibility: hidden;
+ }
+ }
+
+ .video-player__volume::before,
+ .video-player__seek::before {
+ background: currentColor;
+ opacity: 0.15;
+ }
+
+ .video-player__seek__buffer {
+ background: currentColor;
+ opacity: 0.2;
+ }
+
+ .video-player__seek__progress,
+ .video-player__seek__handle,
+ .video-player__volume__current,
+ .video-player__volume__handle {
+ background-color: var(--player-accent-color);
+ }
+
+ .video-player__buttons button,
+ .video-player__buttons a {
+ color: currentColor;
+ opacity: 0.75;
+
+ &:active,
+ &:hover,
+ &:focus {
+ color: currentColor;
+ opacity: 1;
+ }
+ }
+
+ .video-player__time-sep,
+ .video-player__time-total,
+ .video-player__time-current {
+ color: currentColor;
+ }
+
+ @container audio-player (max-width: 400px) {
+ .video-player__time,
+ .player-button.video-player__download__icon {
+ display: none;
+ }
+ }
+
+ .video-player__seek::before,
+ .video-player__seek__buffer,
+ .video-player__seek__progress {
+ top: 0;
+ }
+
+ .video-player__seek__handle {
+ top: -4px;
+ }
+
+ .video-player__controls {
+ padding-top: 10px;
+ background: transparent;
+ z-index: 1;
+ }
+}
+
+.video-player {
+ overflow: hidden;
+ position: relative;
+ color: var(--color-text-on-media);
+ background: var(--color-bg-media);
+ max-width: 100%;
+ border-radius: 8px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ outline: 1px solid var(--color-border-media);
+ outline-offset: -1px;
+ z-index: 2;
+
+ // TODO: might be able to delete this block
+ .detailed-status & {
+ width: 100%;
+ height: 100%;
+ }
+
+ @include fullwidth-gallery;
+
+ video {
+ display: block;
+ max-width: 100vw; // TODO: might be able to delete this
+ max-height: 80vh; // TODO: might be able to delete this
+ z-index: -2;
+ position: relative; // TODO: might be able to delete this
+ }
+
+ &.fullscreen {
+ width: 100% !important;
+ height: 100% !important;
+ margin: 0;
+ aspect-ratio: auto !important;
+ outline: none;
+ border-radius: 0;
+
+ video {
+ max-width: 100% !important; // TODO: might be able to delete this
+ max-height: 100% !important; // TODO: might be able to delete this
+ 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,
+ rgb(from var(--color-bg-media-base) r g b / 85%) 0,
+ rgb(from var(--color-bg-media-base) r g b / 45%) 60%,
+ transparent
+ );
+ padding: 0 15px;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.1s ease;
+ will-change: opacity, pointer-events;
+
+ &.active {
+ opacity: 1;
+ pointer-events: auto;
+ }
+ }
+
+ .media-gallery__actions {
+ opacity: 0;
+ transition: opacity 0.1s ease;
+
+ &.active {
+ opacity: 1;
+ }
+ }
+
+ &.inactive {
+ video,
+ .video-player__controls {
+ visibility: hidden;
+ }
+ }
+
+ &__spoiler {
+ display: none;
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 4;
+ border: 0;
+ background: var(--color-bg-primary);
+ color: var(--color-text-secondary);
+ transition: none;
+ pointer-events: none;
+
+ &.active {
+ display: block;
+ pointer-events: auto;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-secondary)
+ );
+ }
+ }
+
+ &__title {
+ display: block;
+ font-size: 14px;
+ }
+
+ &__subtitle {
+ display: block;
+ font-size: 11px;
+ font-weight: 500;
+ }
+ }
+
+ &__buttons-bar {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 8px;
+ margin: 0 -5px;
+
+ .video-player__download__icon {
+ color: inherit;
+ }
+ }
+
+ &__buttons {
+ display: flex;
+ flex: 0 1 auto;
+ min-width: 30px;
+ align-items: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ gap: 5px;
+
+ .player-button {
+ display: inline-block;
+ outline: 0;
+ padding: 5px;
+ flex: 0 0 auto;
+ background: transparent;
+ border: 0;
+ color: rgb(from var(--color-text-on-media) r g b / 75%);
+ font-weight: 500;
+
+ &:active,
+ &:hover,
+ &:focus {
+ color: var(--color-text-on-media);
+ }
+ }
+ }
+
+ &__time {
+ display: inline;
+ flex: 0 1 auto;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0 5px;
+
+ // Ensure digits maintain a consistent width
+ font-variant-numeric: tabular-nums;
+ }
+
+ &__time-sep,
+ &__time-total,
+ &__time-current {
+ color: var(--color-text-on-media);
+ font-size: 14px;
+ font-weight: 500;
+ }
+
+ &__time-sep {
+ display: inline-block;
+ margin: 0 6px;
+ }
+
+ &__volume {
+ flex: 0 0 auto;
+ display: inline-flex;
+ cursor: pointer;
+ height: 24px;
+ position: relative;
+ overflow: hidden;
+
+ .no-reduce-motion & {
+ transition: all 100ms linear;
+ }
+
+ &.active {
+ overflow: visible;
+ width: 50px;
+ margin-inline-end: 16px;
+ }
+
+ &::before {
+ content: '';
+ width: 50px;
+ background: rgb(from var(--color-text-on-media) r g b / 35%);
+ border-radius: 4px;
+ display: block;
+ position: absolute;
+ height: 4px;
+ inset-inline-start: 0;
+ top: 50%;
+ transform: translate(0, -50%);
+ }
+
+ &__current {
+ display: block;
+ position: absolute;
+ height: 4px;
+ border-radius: 4px;
+ inset-inline-start: 0;
+ top: 50%;
+ transform: translate(0, -50%);
+ background: var(--color-text-on-media);
+ }
+
+ &__handle {
+ position: absolute;
+ z-index: 3;
+ border-radius: 50%;
+ width: 12px;
+ height: 12px;
+ top: 50%;
+ inset-inline-start: 0;
+ margin-inline-start: -6px;
+ transform: translate(0, -50%);
+ background: var(--color-text-on-media);
+ box-shadow: 1px 2px 6px var(--color-shadow-primary);
+ opacity: 0;
+
+ .no-reduce-motion & {
+ transition: opacity 100ms linear;
+ }
+ }
+
+ &.active &__handle {
+ opacity: 1;
+ }
+ }
+
+ &__link {
+ padding: 2px 10px;
+
+ a {
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--color-text-on-media);
+
+ &:hover,
+ &:active,
+ &:focus {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__seek {
+ cursor: pointer;
+ height: 24px;
+ position: relative;
+
+ &::before {
+ content: '';
+ width: 100%;
+ background: rgb(from var(--color-text-on-media) r g b / 35%);
+ border-radius: 4px;
+ display: block;
+ position: absolute;
+ height: 4px;
+ top: 14px;
+ }
+
+ &__progress,
+ &__buffer {
+ display: block;
+ position: absolute;
+ height: 4px;
+ border-radius: 4px;
+ top: 14px;
+ background: var(--color-text-on-media);
+ }
+
+ &__buffer {
+ background: rgb(from var(--color-text-on-media) r g b / 20%);
+ }
+
+ &__handle {
+ position: absolute;
+ z-index: 3;
+ opacity: 0;
+ border-radius: 50%;
+ width: 12px;
+ height: 12px;
+ top: 10px;
+ margin-inline-start: -6px;
+ background: var(--color-text-on-media);
+ box-shadow: 1px 2px 6px var(--color-shadow-primary);
+
+ .no-reduce-motion & {
+ transition: opacity 0.1s ease;
+ }
+
+ &.active {
+ opacity: 1;
+ cursor: grabbing;
+ }
+ }
+
+ &:hover {
+ .video-player__seek__handle {
+ opacity: 1;
+ }
+ }
+ }
+
+ &__hotkey-indicator {
+ position: absolute;
+ top: 50%;
+ inset-inline-start: 50%;
+ transform: translate(-50%, -50%);
+ color: var(--color-text-on-media);
+ background: var(--color-bg-media);
+ backdrop-filter: $backdrop-blur-filter;
+ border-radius: 8px;
+ padding: 16px 24px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+
+ &__label {
+ font-size: 15px;
+ font-weight: 500;
+ }
+ }
+
+ &.detailed,
+ &.fullscreen {
+ .video-player__buttons {
+ .player-button {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+ }
+ }
+}
+
+.gifv {
+ position: relative;
+
+ canvas {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ }
+
+ video {
+ max-width: 100vw;
+ max-height: 80vh;
+ }
+}
+
+.scrollable .account-card {
+ margin: 10px;
+}
+
+.scrollable .account-card__title__avatar {
+ img {
+ border: 2px solid var(--color-bg-primary);
+ }
+
+ .account__avatar {
+ border: none;
+ }
+}
+
+.scrollable .account-card__header {
+ img {
+ border-radius: 4px;
+ }
+}
+
+.scrollable .account-card__bio::after {
+ background: linear-gradient(to left, var(--color-bg-primary), transparent);
+}
+
+.account-gallery__container {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 2px;
+
+ .media-gallery__item {
+ border-radius: 0;
+ }
+
+ .load-more,
+ .timeline-hint {
+ grid-column: span 3;
+ }
+}
+
+.notification__filter-bar,
+.account__section-headline {
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ cursor: default;
+ display: flex;
+ flex-shrink: 0;
+
+ @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
+ border-right: 0;
+ border-left: 0;
+ }
+
+ button {
+ background: transparent;
+ border: 0;
+ margin: 0;
+ }
+
+ button,
+ a {
+ display: block;
+ flex: 1 1 auto;
+ color: var(--color-text-secondary);
+ padding: 15px 0;
+ font-size: 14px;
+ font-weight: 500;
+ text-align: center;
+ text-decoration: none;
+ position: relative;
+
+ &.active {
+ color: var(--color-text-primary);
+
+ &::before {
+ display: block;
+ content: '';
+ position: absolute;
+ bottom: -1px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 40px;
+ height: 3px;
+ border-radius: 4px 4px 0 0;
+ background: var(--color-text-brand);
+ }
+ }
+ }
+
+ .scrollable & {
+ border-left: 0;
+ border-right: 0;
+ }
+}
+
+.filter-form {
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &__column {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ padding: 15px;
+ }
+
+ .radio-button {
+ display: flex;
+ }
+}
+
+.column-settings__row .radio-button {
+ display: flex;
+}
+
+.radio-button,
+.check-box {
+ font-size: 14px;
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ line-height: 18px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: pointer;
+ gap: 10px;
+ color: var(--color-text-primary);
+
+ input[type='radio'],
+ input[type='checkbox'] {
+ display: none;
+ }
+
+ &__input {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ border: 2px solid var(--color-text-primary);
+ box-sizing: border-box;
+ width: 20px;
+ height: 20px;
+ flex: 0 0 auto;
+ border-radius: 50%;
+
+ &.checked,
+ &.indeterminate {
+ border-color: var(--color-text-brand);
+ }
+
+ .icon {
+ width: 18px;
+ height: 18px;
+ }
+ }
+}
+
+.radio-button__input.checked::before {
+ content: '';
+ display: block;
+ border-radius: 50%;
+ width: calc(100% - 4px);
+ height: calc(100% - 4px);
+ background: var(--color-text-brand);
+}
+
+.check-box {
+ &__input {
+ width: 18px;
+ height: 18px;
+ border-radius: 2px;
+
+ &.checked,
+ &.indeterminate {
+ background: var(--color-bg-brand-base);
+ color: var(--color-text-on-brand-base);
+ }
+ }
+}
+
+noscript {
+ text-align: center;
+
+ img {
+ width: 200px;
+ opacity: 0.5;
+ animation: flicker 4s infinite;
+ }
+
+ div {
+ font-size: 14px;
+ margin: 30px auto;
+ color: var(--color-text-primary);
+ max-width: 400px;
+
+ a {
+ color: var(--color-text-brand);
+ text-decoration: underline;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ }
+}
+
+@keyframes flicker {
+ 0% {
+ opacity: 1;
+ }
+
+ 30% {
+ opacity: 0.75;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+.moved-account-banner,
+.follow-request-banner,
+.account-memorial-banner {
+ padding: 20px;
+ background: var(--color-bg-tertiary);
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+
+ &__message {
+ color: var(--color-text-secondary);
+ padding: 8px 0;
+ padding-top: 0;
+ padding-bottom: 4px;
+ font-size: 14px;
+ font-weight: 500;
+ text-align: center;
+ margin-bottom: 16px;
+ }
+
+ &__action {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 15px;
+ width: 100%;
+ }
+
+ .detailed-status__display-name {
+ margin-bottom: 0;
+ }
+}
+
+.follow-request-banner .button {
+ width: 100%;
+}
+
+.account-memorial-banner__message {
+ margin-bottom: 0;
+}
+
+.column-inline-form {
+ padding: 15px;
+ display: flex;
+ justify-content: flex-start;
+ gap: 15px;
+ align-items: center;
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+
+ label {
+ flex: 1 1 auto;
+
+ input {
+ width: 100%;
+ }
+ }
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-left: 0;
+ border-right: 0;
+ }
+}
+
+.drawer__backdrop {
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ background: rgb(from var(--color-bg-overlay) r g b / 50%);
+}
+
+.focal-point {
+ position: relative;
+ cursor: grab;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &.dragging {
+ cursor: grabbing;
+ }
+
+ &__reticle {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ transform: translate(-50%, -50%);
+ border: 2px solid var(--color-text-on-media);
+ border-radius: 50%;
+ box-shadow: 0 0 0 9999em var(--color-shadow-primary);
+ pointer-events: none;
+ }
+}
+
+.account__header__content {
+ color: var(--color-text-secondary);
+ font-size: 14px;
+ font-weight: 400;
+ overflow: hidden;
+ word-break: normal;
+ overflow-wrap: break-word;
+
+ p {
+ margin-bottom: 20px;
+ unicode-bidi: plaintext;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ color: inherit;
+ text-decoration: underline;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+}
+
+.account__header {
+ overflow: hidden;
+ container: account-header / inline-size;
+
+ &.inactive {
+ opacity: 0.5;
+
+ .account__header__image,
+ .account__avatar {
+ filter: grayscale(100%);
+ }
+ }
+
+ &__info {
+ position: absolute;
+ top: 20px;
+ inset-inline-end: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2px;
+ }
+
+ &__image {
+ overflow: hidden;
+ height: 145px;
+ position: relative;
+ background: var(--color-bg-tertiary);
+ border-bottom: 1px solid var(--color-border-primary);
+
+ img {
+ object-fit: cover;
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ }
+ }
+
+ &__bar {
+ position: relative;
+ padding: 0 20px;
+ padding-bottom: 16px; // glitch-soc addition for the different tabs design
+ border-bottom: 1px solid var(--color-border-primary);
+
+ .avatar {
+ display: block;
+ flex: 0 0 auto;
+
+ .account__avatar {
+ background: var(--color-bg-primary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: var(--avatar-border-radius);
+ }
+ }
+ }
+
+ &__badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+
+ .account-role {
+ line-height: unset;
+ }
+ }
+
+ &__tabs {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ margin-top: -55px;
+ padding-top: 10px;
+ gap: 8px;
+ overflow: hidden;
+ margin-inline-start: -2px; // aligns the pfp with content below
+
+ &__name {
+ margin-top: 16px;
+ margin-bottom: 16px;
+
+ .emojione {
+ width: 22px;
+ height: 22px;
+ }
+
+ h1 {
+ font-size: 17px;
+ line-height: 22px;
+ color: var(--color-text-primary);
+ font-weight: 600;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+
+ small {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--color-text-secondary);
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ user-select: all;
+ }
+
+ .icon-lock {
+ height: 18px;
+ width: 18px;
+ }
+ }
+ }
+ }
+
+ .spacer {
+ flex: 1 1 auto;
+ }
+ }
+
+ &__follow-button {
+ flex-grow: 1;
+ }
+
+ &__buttons {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ $button-breakpoint: 420px;
+ $button-fallback-breakpoint: #{$button-breakpoint} + 55px;
+
+ &--desktop {
+ margin-top: 55px;
+
+ @container (width < #{$button-breakpoint}) {
+ display: none;
+ }
+
+ @supports (not (container-type: inline-size)) {
+ @media (max-width: #{$button-fallback-breakpoint}) {
+ display: none;
+ }
+ }
+ }
+
+ &--mobile {
+ margin-block: 16px;
+
+ @container (width >= #{$button-breakpoint}) {
+ display: none;
+ }
+
+ @supports (not (container-type: inline-size)) {
+ @media (min-width: (#{$button-fallback-breakpoint} + 1px)) {
+ display: none;
+ }
+ }
+ }
+
+ .button {
+ flex-shrink: 1;
+ white-space: nowrap;
+ min-width: 80px;
+ }
+
+ .icon-button {
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ box-sizing: content-box;
+ padding: 5px;
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ }
+
+ &.copied {
+ border-color: var(--color-text-success);
+ }
+ }
+ }
+
+ &__bio {
+ .account__header__content {
+ color: var(--color-text-primary);
+ }
+
+ .account__header__fields {
+ margin: 0;
+ margin-top: 16px;
+ border-radius: 4px;
+ border: 1px solid var(--color-border-primary);
+
+ dl {
+ display: block;
+ padding: 8px 16px; // glitch-soc: padding purposefuly reduced
+ border-bottom-color: var(--color-border-primary);
+ }
+
+ dd,
+ dt {
+ font-size: 13px;
+ line-height: 18px;
+ padding: 0;
+ text-align: initial;
+ }
+
+ dt {
+ width: auto;
+ background: transparent;
+ text-transform: uppercase;
+ color: var(--color-text-tertiary);
+ }
+
+ dd {
+ color: var(--color-text-secondary);
+ }
+
+ a {
+ color: var(--color-text-brand);
+ }
+
+ .icon {
+ width: 18px;
+ height: 18px;
+ }
+
+ .verified {
+ border: 1px solid var(--color-text-success);
+ margin-top: -1px;
+ margin-inline: -1px;
+
+ &:first-child {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+
+ &:last-child {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ margin-bottom: -1px;
+ }
+
+ dt,
+ dd {
+ color: var(--color-text-success);
+ }
+
+ dd {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ span {
+ display: flex;
+ }
+ }
+
+ a {
+ color: var(--color-text-success);
+ }
+ }
+ }
+ }
+
+ &__extra {
+ margin-top: 16px;
+
+ &__links {
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ margin: 0 -10px;
+ padding-top: 16px;
+ padding-bottom: 10px;
+
+ a {
+ display: inline-block;
+ color: var(--color-text-secondary);
+ text-decoration: none;
+ padding: 5px 10px;
+ font-weight: 500;
+
+ strong {
+ font-weight: 700;
+ color: var(--color-text-primary);
+ }
+ }
+ }
+ }
+
+ &__account-note {
+ color: var(--color-text-primary);
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 10px;
+
+ &__loading-indicator-wrapper {
+ position: relative;
+ height: 37px;
+
+ .loading-indicator {
+ left: 10px;
+ }
+
+ .circular-progress {
+ width: 14px;
+ height: 14px;
+ }
+ }
+
+ label {
+ display: block;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--color-text-secondary);
+ text-transform: uppercase;
+ margin-bottom: 5px;
+ }
+
+ textarea {
+ display: block;
+ box-sizing: border-box;
+ width: calc(100% + 20px);
+ color: var(--color-text-primary);
+ background: transparent;
+ padding: 10px;
+ margin: 0 -10px;
+ font-family: inherit;
+ font-size: 14px;
+ resize: none;
+ border: 0;
+ outline: 0;
+ border-radius: 4px;
+
+ &::placeholder {
+ color: var(--color-text-tertiary);
+ opacity: 1;
+ }
+
+ &:focus {
+ background: var(--color-bg-brand-softer);
+ }
+ }
+ }
+
+ &__familiar-followers {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-block: 16px;
+ color: var(--color-text-secondary);
+
+ a:any-link {
+ font-weight: 500;
+ text-decoration: none;
+ color: var(--color-text-primary);
+ }
+ }
+}
+
+.account__contents {
+ overflow: hidden;
+}
+
+.account__details {
+ display: flex;
+ flex-wrap: wrap;
+ column-gap: 1em;
+}
+
+.verified-badge {
+ display: inline-flex;
+ align-items: center;
+ color: var(--color-text-success);
+ gap: 4px;
+ overflow: hidden;
+ white-space: nowrap;
+
+ > span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ a {
+ color: inherit;
+ font-weight: 500;
+ text-decoration: none;
+ }
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.trends {
+ &__item {
+ display: flex;
+ align-items: center;
+ padding: 16px;
+ border-bottom: 1px solid var(--color-border-primary);
+ gap: 8px;
+
+ &__name {
+ flex: 1 1 auto;
+ color: var(--color-text-secondary);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ strong {
+ font-weight: 500;
+ }
+
+ a {
+ color: var(--color-text-primary);
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: 500;
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ &:hover,
+ &:focus,
+ &:active {
+ span {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+
+ &__current {
+ flex: 0 0 auto;
+ font-size: 24px;
+ font-weight: 500;
+ text-align: end;
+ color: var(--color-text-primary);
+ text-decoration: none;
+ }
+
+ &__sparkline {
+ flex: 0 0 auto;
+ width: 50px;
+
+ path:first-child {
+ fill: var(--color-graph-primary-fill) !important;
+ fill-opacity: 1 !important;
+ }
+
+ path:last-child {
+ stroke: var(--color-graph-primary-stroke) !important;
+ fill: none !important;
+ }
+ }
+
+ &--requires-review {
+ .trends__item__name {
+ color: var(--color-text-warning);
+
+ a {
+ color: var(--color-text-warning);
+ }
+ }
+
+ .trends__item__current {
+ color: var(--color-text-warning);
+ }
+
+ .trends__item__sparkline {
+ path:first-child {
+ fill: var(--color-graph-warning-fill) !important;
+ }
+
+ path:last-child {
+ stroke: var(--color-graph-warning-stroke) !important;
+ }
+ }
+ }
+
+ &--disabled {
+ .trends__item__name {
+ color: var(--color-text-disabled);
+
+ a {
+ color: var(--color-text-disabled);
+ }
+ }
+
+ .trends__item__current {
+ color: var(--color-text-disabled);
+ }
+
+ .trends__item__sparkline {
+ path:first-child {
+ fill: var(--color-graph-disabled-fill) !important;
+ }
+
+ path:last-child {
+ stroke: var(--color-graph-disabled-stroke) !important;
+ }
+ }
+ }
+ }
+
+ &--compact &__item {
+ padding: 12px;
+ }
+}
+
+.conversation {
+ display: flex;
+ border-bottom: 1px solid var(--color-border-primary);
+ padding: 5px;
+ padding-bottom: 0;
+
+ &:focus {
+ background: var(--color-bg-secondary);
+ outline: 0;
+ }
+
+ &__avatar {
+ flex: 0 0 auto;
+ padding: 10px;
+ padding-top: 12px;
+ position: relative;
+ cursor: pointer;
+ }
+
+ &__unread {
+ display: inline-block;
+ background: var(--color-text-brand);
+ border-radius: 50%;
+ width: 0.625rem;
+ height: 0.625rem;
+ margin: -0.1ex 0.15em 0.1ex;
+ }
+
+ &__content {
+ flex: 1 1 auto;
+ padding: 10px 5px;
+ padding-inline-end: 15px;
+ overflow: hidden;
+
+ &__info {
+ overflow: hidden;
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ }
+
+ &__relative-time {
+ font-size: 15px;
+ color: var(--color-text-secondary);
+ padding-inline-start: 15px;
+ }
+
+ &__names {
+ color: var(--color-text-secondary);
+ font-size: 15px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 4px;
+ flex-basis: 90px;
+ flex-grow: 1;
+
+ a {
+ color: var(--color-text-primary);
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .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: var(--color-bg-brand-softer);
+ font-size: 13px;
+ display: flex;
+ align-items: flex-end;
+ }
+
+ &__mastodon {
+ width: 124px;
+ flex: 0 0 auto;
+
+ @media screen and (max-width: (124px + 300px)) {
+ display: none;
+ }
+ }
+
+ &__slides {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: start;
+ }
+
+ &__slide {
+ box-sizing: border-box;
+ width: 100%;
+ flex: 0 0 100%;
+ padding: 15px;
+ position: relative;
+ font-size: 15px;
+ line-height: 20px;
+ overflow-wrap: break-word;
+ font-weight: 400;
+ max-height: 50vh;
+ overflow: hidden;
+ flex-direction: column;
+ }
+
+ &__range {
+ display: block;
+ font-weight: 500;
+ margin-bottom: 10px;
+ padding-inline-end: 18px;
+ }
+
+ &__unread {
+ position: absolute;
+ top: 19px;
+ inset-inline-end: 19px;
+ display: block;
+ background: var(--color-text-brand);
+ border-radius: 50%;
+ width: 0.625rem;
+ height: 0.625rem;
+ }
+
+ &__pagination {
+ padding: 15px;
+ color: var(--color-text-secondary);
+ position: absolute;
+ bottom: 3px;
+ inset-inline-end: 0;
+ display: flex;
+ align-items: center;
+ z-index: 1;
+ }
+}
+
+.layout-multiple-columns .announcements__mastodon {
+ display: none;
+}
+
+.layout-multiple-columns .announcements__container {
+ width: 100%;
+}
+
+.reactions-bar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-top: 15px;
+ margin-inline-start: -2px;
+ width: calc(100% - (90px - 33px));
+
+ &__item {
+ flex-shrink: 0;
+ background: var(--color-bg-brand-softer);
+ color: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-secondary)
+ );
+ border: 1px solid var(--color-border-on-bg-brand-softer);
+ border-radius: 3px;
+ box-sizing: border-box;
+ margin: 2px;
+ cursor: pointer;
+ user-select: none;
+ padding: 0 6px;
+ display: flex;
+ align-items: center;
+ transition: all 100ms ease-in;
+ transition-property: background-color, color;
+
+ &__emoji {
+ display: block;
+ margin: 3px 0;
+ width: 16px;
+ height: 16px;
+
+ img {
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ min-width: auto;
+ min-height: auto;
+ object-fit: contain;
+ }
+ }
+
+ &__count {
+ display: block;
+ min-width: 9px;
+ font-size: 13px;
+ font-weight: 500;
+ text-align: center;
+ margin-inline-start: 6px;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: var(--color-text-primary);
+ background: var(--color-bg-brand-soft);
+ transition: all 200ms ease-out;
+ transition-property: background-color, color;
+ }
+
+ &.active {
+ color: var(--color-text-brand);
+ background-color: var(--color-bg-brand-softer);
+ border-color: var(--color-text-brand);
+ transition: all 100ms ease-in;
+ transition-property: background-color, color;
+ }
+ }
+
+ .emoji-picker-dropdown {
+ display: flex;
+ margin: 2px;
+ }
+
+ &:hover .emoji-button {
+ opacity: 0.85;
+ }
+
+ .emoji-button {
+ color: var(--color-text-secondary);
+ margin: 0;
+ font-size: 16px;
+ width: auto;
+ flex-shrink: 0;
+ padding: 0 6px;
+ height: 22px;
+ display: flex;
+ align-items: center;
+ opacity: 0.5;
+ transition: all 100ms ease-in;
+ transition-property: background-color, color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ opacity: 1;
+ color: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-secondary)
+ );
+ transition: all 200ms ease-out;
+ transition-property: background-color, color;
+ }
+ }
+
+ &--empty {
+ .emoji-button {
+ padding: 0;
+ }
+ }
+}
+
+.notification,
+.status__wrapper,
+.conversation {
+ position: relative;
+
+ // When scrolling these elements into view, take into account
+ // the column header height
+ scroll-margin-top: var(--column-header-height, 0);
+
+ &.unread {
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ border-inline-start: 4px solid var(--color-text-brand);
+ pointer-events: none;
+ }
+ }
+}
+
+.picture-in-picture {
+ position: fixed;
+ bottom: 20px;
+ inset-inline-end: 20px;
+ width: 300px;
+ box-shadow: var(--dropdown-shadow);
+
+ // 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(--color-bg-secondary);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ padding: 12px;
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__header {
+ border-radius: 4px 4px 0 0;
+ background: var(--color-bg-secondary);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ border-bottom: 0;
+ padding: 12px;
+ display: flex;
+ justify-content: space-between;
+
+ .icon-button {
+ padding: 6px;
+ }
+
+ &__account {
+ display: flex;
+ text-decoration: none;
+ overflow: hidden;
+ }
+
+ .account__avatar {
+ margin-inline-end: 8px;
+ }
+
+ .display-name {
+ color: var(--color-text-primary);
+ text-decoration: none;
+
+ strong,
+ span {
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ span {
+ color: var(--color-text-secondary);
+ }
+ }
+ }
+
+ .video-player,
+ .audio-player {
+ border-radius: 0;
+ }
+}
+
+.picture-in-picture-placeholder {
+ border-radius: 8px;
+ box-sizing: border-box;
+ border: 1px dashed var(--color-border-primary);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 16px;
+ font-size: 15px;
+ line-height: 21px;
+ font-weight: 500;
+ cursor: pointer;
+ color: var(--color-text-tertiary);
+ aspect-ratio: 16 / 9;
+
+ .icon {
+ width: 48px;
+ height: 48px;
+ margin-bottom: 8px;
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: var(--color-text-secondary);
+ }
+
+ &:focus-visible {
+ outline: var(--outline-focus-default);
+ border-color: transparent;
+ }
+}
+
+.notifications-permission-banner {
+ padding: 30px;
+ border-bottom: 1px solid var(--color-border-primary);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+
+ &__close {
+ position: absolute;
+ top: 10px;
+ inset-inline-end: 10px;
+ }
+
+ h2 {
+ font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 15px;
+ text-align: center;
+ }
+
+ p {
+ color: var(--color-text-secondary);
+ margin-bottom: 15px;
+ text-align: center;
+
+ .icon {
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ }
+ }
+}
+
+.explore__search-header {
+ justify-content: center;
+ align-items: center;
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ border-bottom: 0;
+ padding: 16px;
+ padding-bottom: 8px;
+
+ .search {
+ width: 100%;
+ margin-bottom: 0;
+ }
+
+ .search__input {
+ padding-block: 12px;
+ padding-inline-end: 30px;
+ }
+
+ .search__popout {
+ border: 1px solid var(--color-border-primary);
+ }
+
+ .search__icon {
+ top: 12px;
+ inset-inline-end: 12px;
+ color: var(--color-text-tertiary);
+ }
+}
+
+.layout-single-column .explore__search-header {
+ display: none;
+
+ @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
+ display: flex;
+ }
+}
+
+.explore__search-results {
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
+
+ @media screen and (min-width: $no-gap-breakpoint) {
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+}
+
+.story {
+ display: flex;
+ align-items: center;
+ color: var(--color-text-primary);
+ padding: 16px;
+ border-bottom: 1px solid var(--color-border-primary);
+ gap: 16px;
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &__details {
+ flex: 1 1 auto;
+
+ &__publisher {
+ color: var(--color-text-secondary);
+ margin-bottom: 8px;
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ &__title {
+ display: block;
+ font-size: 19px;
+ line-height: 24px;
+ font-weight: 500;
+ margin-bottom: 8px;
+ text-decoration: none;
+ color: var(--color-text-primary);
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: var(--color-text-brand);
+ }
+ }
+
+ &__shared {
+ display: flex;
+ align-items: baseline;
+ color: var(--color-text-secondary);
+ gap: 8px;
+ justify-content: space-between;
+ font-size: 14px;
+ line-height: 20px;
+
+ &__pill {
+ background: var(--color-bg-tertiary);
+ border-radius: 4px;
+ color: inherit;
+ text-decoration: none;
+ padding: 4px 12px;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ flex-shrink: 0;
+ }
+
+ &__author-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ color: var(--color-text-primary);
+ font-weight: 500;
+ text-decoration: none;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: var(--color-text-brand);
+ }
+ }
+ }
+
+ strong {
+ font-weight: 500;
+ }
+ }
+
+ &__thumbnail {
+ flex: 0 0 auto;
+ position: relative;
+ width: 120px;
+ aspect-ratio: 1;
+
+ .skeleton {
+ width: 100%;
+ height: 100%;
+ }
+
+ img {
+ border-radius: 8px;
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ &__preview {
+ border-radius: 8px;
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: fill;
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ z-index: 0;
+
+ &--hidden {
+ display: none;
+ }
+ }
+ }
+
+ &.expanded {
+ flex-direction: column;
+
+ .story__thumbnail {
+ order: 1;
+ width: 100%;
+ height: auto;
+ aspect-ratio: 1.91 / 1;
+ }
+
+ .story__details {
+ order: 2;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+ }
+}
+
+.server-banner {
+ &__introduction {
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--color-text-secondary);
+ margin-bottom: 20px;
+
+ strong {
+ font-weight: 700;
+ }
+
+ a {
+ color: inherit;
+ text-decoration: underline;
+
+ &:hover,
+ &:active,
+ &:focus {
+ text-decoration: none;
+ }
+ }
+ }
+
+ &__hero {
+ display: block;
+ border-radius: 4px;
+ width: 100%;
+ height: auto;
+ margin-bottom: 20px;
+ aspect-ratio: 1.9;
+ border: 0;
+ background: var(--color-bg-tertiary);
+ object-fit: cover;
+ }
+
+ &__description {
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--color-text-secondary);
+ margin-bottom: 20px;
+ }
+
+ &__meta {
+ display: flex;
+ gap: 10px;
+ max-width: 100%;
+
+ &__column {
+ flex: 0 0 auto;
+ width: calc(50% - 5px);
+ overflow: hidden;
+ }
+ }
+
+ &__number {
+ font-weight: 600;
+ color: var(--color-text-primary);
+ font-size: 14px;
+ }
+
+ &__number-label {
+ color: var(--color-text-secondary);
+ font-weight: 500;
+ font-size: 14px;
+ }
+
+ h4 {
+ text-transform: uppercase;
+ color: var(--color-text-secondary);
+ margin-bottom: 10px;
+ font-weight: 600;
+ }
+
+ .account {
+ padding: 0;
+ border: 0;
+ }
+
+ .account__avatar-wrapper {
+ margin-inline-start: 0;
+ }
+
+ .spacer {
+ margin: 10px 0;
+ }
+}
+
+.safety-action-modal,
+.interaction-modal {
+ max-width: 100vw;
+ width: 600px;
+ overflow-y: auto;
+}
+
+.interaction-modal {
+ overflow: visible;
+ position: relative;
+ display: block;
+ border-radius: 16px;
+ background: var(--color-bg-primary);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ padding: 24px;
+ box-sizing: border-box;
+
+ @media screen and (max-width: $mobile-breakpoint) {
+ border-radius: 16px 16px 0 0;
+ border-bottom: 0;
+ padding-bottom: 32px;
+ }
+
+ h3 {
+ font-size: 22px;
+ line-height: 33px;
+ font-weight: 700;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ }
+
+ p {
+ text-align: center;
+ font-size: 17px;
+ line-height: 22px;
+ color: var(--color-text-secondary);
+
+ strong {
+ color: var(--color-text-primary);
+ font-weight: 700;
+ }
+ }
+
+ p.hint {
+ margin-bottom: 14px;
+ font-size: 14px;
+ }
+
+ &__lead {
+ margin-bottom: 20px;
+
+ h3 {
+ margin-bottom: 15px;
+ }
+ }
+
+ &__login {
+ position: relative;
+ margin-bottom: 20px;
+
+ &__input {
+ @include search-input;
+
+ border: 1px solid var(--color-border-primary);
+ padding: 4px 6px;
+ color: var(--color-text-primary);
+ font-size: 16px;
+ line-height: 18px;
+ display: flex;
+ align-items: center;
+
+ input {
+ background: transparent;
+ color: inherit;
+ font: inherit;
+ border: 0;
+ padding: 15px - 4px 15px - 6px;
+ flex: 1 1 auto;
+ min-width: 0;
+
+ &::placeholder {
+ color: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-secondary)
+ );
+ }
+
+ &:focus {
+ outline: 0;
+ }
+ }
+
+ .button {
+ flex: 0 0 auto;
+ }
+ }
+
+ .search__popout {
+ margin-top: -1px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ border: 1px solid var(--color-border-primary);
+ }
+
+ &.invalid &__input {
+ border-color: var(--color-text-error);
+ }
+
+ &.expanded .search__popout {
+ display: block;
+ }
+
+ &.expanded &__input {
+ border-radius: 4px 4px 0 0;
+ }
+ }
+
+ &__choices {
+ display: flex;
+ gap: 40px;
+
+ &__choice {
+ flex: 1;
+ box-sizing: border-box;
+
+ h3 {
+ margin-bottom: 20px;
+ }
+
+ p {
+ color: var(--color-text-secondary);
+ margin-bottom: 20px;
+ font-size: 15px;
+ }
+
+ .button {
+ margin-bottom: 10px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+
+ @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
+ &__choices {
+ flex-direction: column;
+
+ &__choice {
+ margin-top: 40px;
+ }
+ }
+ }
+
+ .link-button {
+ font-size: inherit;
+ display: inline;
+ }
+}
+
+.privacy-policy {
+ padding: 20px;
+
+ @media screen and (min-width: $no-gap-breakpoint) {
+ border-radius: 4px;
+ }
+
+ &__body {
+ margin-top: 20px;
+ }
+}
+
+.prose {
+ color: var(--color-text-primary);
+ font-size: 15px;
+ line-height: 22px;
+
+ p,
+ ul,
+ ol {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+ }
+
+ img {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ max-width: 100%;
+ }
+
+ video {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ max-width: 100%;
+ }
+
+ figure {
+ margin-top: 2em;
+ margin-bottom: 2em;
+
+ figcaption {
+ font-size: 0.875em;
+ line-height: 1.4285714;
+ margin-top: 0.8571429em;
+ }
+ }
+
+ figure > * {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ h1 {
+ font-size: 1.5em;
+ margin-top: 0;
+ margin-bottom: 1em;
+ line-height: 1.33;
+ }
+
+ h2 {
+ font-size: 1.25em;
+ margin-top: 1.6em;
+ margin-bottom: 0.6em;
+ line-height: 1.6;
+ }
+
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin-top: 1.5em;
+ margin-bottom: 0.5em;
+ line-height: 1.5;
+ }
+
+ ol {
+ counter-reset: list-counter;
+ }
+
+ li {
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ }
+
+ ol > li {
+ counter-increment: list-counter;
+
+ &::before {
+ content: counter(list-counter) '.';
+ position: absolute;
+ inset-inline-start: 0;
+ }
+ }
+
+ ul > li::before {
+ content: '';
+ position: absolute;
+ background-color: var(--color-text-secondary);
+ border-radius: 50%;
+ width: 0.375em;
+ height: 0.375em;
+ top: 0.5em;
+ inset-inline-start: 0.25em;
+ }
+
+ ul > li,
+ ol > li {
+ position: relative;
+ padding-inline-start: 1.75em;
+ }
+
+ & > ul > li p {
+ margin-top: 0.75em;
+ margin-bottom: 0.75em;
+ }
+
+ & > ul > li > *:first-child {
+ margin-top: 1.25em;
+ }
+
+ & > ul > li > *:last-child {
+ margin-bottom: 1.25em;
+ }
+
+ & > ol > li > *:first-child {
+ margin-top: 1.25em;
+ }
+
+ & > ol > li > *:last-child {
+ margin-bottom: 1.25em;
+ }
+
+ ul ul,
+ ul ol,
+ ol ul,
+ ol ol {
+ margin-top: 0.75em;
+ margin-bottom: 0.75em;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ strong,
+ b {
+ color: var(--color-text-primary);
+ font-weight: 700;
+ }
+
+ em,
+ i {
+ font-style: italic;
+ }
+
+ a {
+ color: var(--color-text-brand);
+ text-decoration: underline;
+
+ &:focus,
+ &:hover,
+ &:active {
+ text-decoration: none;
+ }
+ }
+
+ code {
+ font-size: 0.875em;
+ background: var(--color-bg-secondary);
+ border-radius: 4px;
+ padding: 0.2em 0.3em;
+ }
+
+ hr {
+ border: 0;
+ border-top: 1px solid var(--color-border-primary);
+ margin-top: 3em;
+ margin-bottom: 3em;
+ }
+
+ hr + * {
+ margin-top: 0;
+ }
+
+ h2 + * {
+ margin-top: 0;
+ }
+
+ h3 + * {
+ margin-top: 0;
+ }
+
+ h4 + *,
+ h5 + *,
+ h6 + * {
+ margin-top: 0;
+ }
+
+ & > :first-child {
+ margin-top: 0;
+ }
+
+ & > :last-child {
+ margin-bottom: 0;
+ }
+}
+
+.dismissable-banner,
+.warning-banner {
+ position: relative;
+ margin: 10px;
+ margin-bottom: 5px;
+ border-radius: 8px;
+ border: 1px solid var(--color-border-on-bg-brand-softer);
+ background: var(--color-bg-brand-softer);
+ overflow: hidden;
+ flex-shrink: 0;
+
+ &__background-image {
+ width: 125%;
+ position: absolute;
+ bottom: -25%;
+ inset-inline-end: -25%;
+ z-index: -1;
+ opacity: 0.15;
+ mix-blend-mode: luminosity;
+ }
+
+ &__message {
+ flex: 1 1 auto;
+ padding: 15px;
+ font-size: 15px;
+ line-height: 22px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+
+ p {
+ margin-bottom: 15px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ h1 {
+ color: var(--color-text-brand);
+ font-size: 22px;
+ line-height: 33px;
+ font-weight: 700;
+ margin-bottom: 15px;
+ }
+
+ &__actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+
+ &__wrapper {
+ display: flex;
+ margin-top: 30px;
+ }
+
+ .button {
+ display: block;
+ flex-grow: 1;
+ }
+ }
+ }
+
+ &__action {
+ float: right;
+ padding: 15px 10px;
+
+ .icon-button {
+ color: var(--color-text-brand);
+ }
+ }
+}
+
+.warning-banner {
+ border: 1px solid var(--color-border-on-bg-error-softer);
+ background: var(--color-bg-error-softer);
+
+ &__message {
+ h1 {
+ color: var(--color-text-error);
+ }
+
+ a {
+ color: var(--color-text-primary);
+ }
+ }
+}
+
+.image {
+ position: relative;
+ overflow: hidden;
+
+ &__preview {
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ &.loaded &__preview {
+ display: none;
+ }
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border: 0;
+ background: transparent;
+ opacity: 0;
+ }
+
+ &.loaded img {
+ opacity: 1;
+ }
+}
+
+.link-footer {
+ flex: 0 0 auto;
+ padding-top: 20px;
+ z-index: 1;
+ font-size: 13px;
+
+ .column & {
+ padding: 15px;
+ }
+
+ p {
+ color: var(--color-text-secondary);
+ margin-bottom: 20px;
+
+ .version {
+ white-space: nowrap;
+ }
+
+ strong {
+ font-weight: 500;
+ }
+
+ a {
+ color: var(--color-text-secondary);
+ text-decoration: underline;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+ }
+ }
+}
+
+.about {
+ padding: 20px;
+ border-top: 1px solid var(--color-border-primary);
+
+ @media screen and (min-width: $no-gap-breakpoint) {
+ border-radius: 4px;
+ }
+
+ &__footer {
+ color: var(--color-text-tertiary);
+ text-align: center;
+ font-size: 15px;
+ line-height: 22px;
+ margin-top: 20px;
+ }
+
+ &__header {
+ margin-bottom: 30px;
+
+ &__hero {
+ width: 100%;
+ height: auto;
+ aspect-ratio: 1.9;
+ background: var(--color-bg-tertiary);
+ border-radius: 8px;
+ margin-bottom: 30px;
+ }
+
+ h1,
+ p {
+ text-align: center;
+ }
+
+ h1 {
+ font-size: 24px;
+ line-height: 1.5;
+ font-weight: 700;
+ margin-bottom: 10px;
+ }
+
+ p {
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+ color: var(--color-text-secondary);
+ }
+ }
+
+ &__meta {
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ display: flex;
+ margin-bottom: 30px;
+ font-size: 15px;
+
+ &__column {
+ box-sizing: border-box;
+ width: 50%;
+ padding: 20px;
+ }
+
+ &__divider {
+ width: 0;
+ border: 0;
+ border-style: solid;
+ border-color: var(--color-border-primary);
+ border-left-width: 1px;
+ min-height: calc(100% - 60px);
+ flex: 0 0 auto;
+ }
+
+ h4 {
+ font-size: 15px;
+ text-transform: uppercase;
+ color: var(--color-text-secondary);
+ font-weight: 500;
+ margin-bottom: 20px;
+ }
+
+ @media screen and (width <= 600px) {
+ display: block;
+
+ h4 {
+ text-align: center;
+ }
+
+ &__column {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ &__divider {
+ min-height: 0;
+ width: 100%;
+ border-left-width: 0;
+ border-top-width: 1px;
+ }
+ }
+
+ .layout-multiple-columns & {
+ display: block;
+
+ h4 {
+ text-align: center;
+ }
+
+ &__column {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ &__divider {
+ min-height: 0;
+ width: 100%;
+ border-left-width: 0;
+ border-top-width: 1px;
+ }
+ }
+ }
+
+ &__mail {
+ color: var(--color-text-primary);
+ text-decoration: none;
+ font-weight: 500;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+
+ .link-footer {
+ padding: 0;
+ margin-top: 60px;
+ text-align: center;
+ font-size: 15px;
+ line-height: 22px;
+
+ @media screen and (min-width: $no-gap-breakpoint) {
+ display: none;
+ }
+ }
+
+ .account {
+ padding: 0;
+ border: 0;
+ }
+
+ .account__avatar-wrapper {
+ margin-inline-start: 0;
+ }
+
+ .account__relationship {
+ display: none;
+ }
+
+ &__section {
+ margin-bottom: 10px;
+
+ &__title {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 22px;
+ padding: 20px;
+ border-radius: 4px;
+ border: 1px solid var(--color-border-primary);
+ color: var(--color-text-brand);
+ cursor: pointer;
+ width: 100%;
+ background: none;
+ }
+
+ &.active &__title {
+ border-radius: 4px 4px 0 0;
+ }
+
+ &__body {
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ padding: 20px;
+ font-size: 15px;
+ line-height: 22px;
+ }
+ }
+
+ &__domain-blocks {
+ margin-top: 30px;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+
+ &__domain {
+ border-bottom: 1px solid var(--color-border-primary);
+ padding: 10px;
+ font-size: 15px;
+ color: var(--color-text-secondary);
+
+ &:nth-child(2n) {
+ background: var(--color-bg-secondary);
+ }
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &__header {
+ display: flex;
+ gap: 10px;
+ justify-content: space-between;
+ font-weight: 500;
+ margin-bottom: 4px;
+ }
+
+ h6 {
+ color: var(--color-text-primary);
+ font-size: inherit;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ p {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+}
+
+.notification-list {
+ position: fixed;
+ bottom: 2rem;
+ inset-inline-start: 1rem;
+ z-index: 9999;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.notification-bar {
+ --alert-edge-spacing: 1rem;
+
+ display: flex;
+ gap: 10px;
+ flex: 0 0 auto;
+ width: auto;
+ padding: 15px;
+ margin: 0;
+ color: var(--color-text-on-inverted);
+ background: var(--color-bg-inverted);
+ backdrop-filter: blur(8px);
+ border: 1px solid var(--color-border-on-bg-inverted);
+ border-radius: 8px;
+ box-shadow:
+ 0 10px 15px -3px var(--color-shadow-primary),
+ 0 4px 6px -4px var(--color-shadow-primary);
+ cursor: default;
+ font-size: 15px;
+ line-height: 21px;
+
+ &.from-side {
+ translate: calc(
+ -1 * (100% + var(--alert-edge-spacing)) * var(--text-x-direction)
+ );
+ }
+
+ &.from-below {
+ translate: 0 calc(100% + var(--alert-edge-spacing));
+ }
+
+ &.notification-bar--active {
+ translate: none;
+ }
+
+ .no-reduce-motion & {
+ transition: 0.5s cubic-bezier(0.89, 0.01, 0.5, 1.1);
+ will-change: translate;
+ }
+}
+
+.notification-bar__content {
+ margin-inline-end: auto;
+}
+
+.notification-bar__title {
+ margin-inline-end: 5px;
+ font-weight: 700;
+}
+
+.notification-bar__action {
+ display: inline-block;
+ border: 0;
+ background: transparent;
+ text-transform: uppercase;
+ cursor: pointer;
+ color: var(--color-text-brand);
+ font-weight: 700;
+ border-radius: 4px;
+ padding: 0 4px;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: var(--color-bg-brand-softer);
+ }
+}
+
+.notification-bar__dismiss-button {
+ margin-top: -2px;
+ color: rgb(from currentColor r g b / 85%);
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: currentColor;
+ }
+}
+
+.notification-bar__loading-indicator {
+ --spinner-size: 22px;
+
+ position: relative;
+ height: var(--spinner-size);
+ width: var(--spinner-size);
+ margin-inline-start: 2px;
+
+ svg {
+ color: var(--color-text-on-media);
+ height: var(--spinner-size);
+ width: var(--spinner-size);
+ }
+}
+
+.hashtag-header {
+ border-bottom: 1px solid var(--color-border-primary);
+ padding: 15px;
+ font-size: 17px;
+ line-height: 22px;
+ color: var(--color-text-secondary);
+
+ strong {
+ font-weight: 700;
+ }
+
+ &__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 15px;
+ gap: 15px;
+
+ h1 {
+ color: var(--color-text-primary);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ font-size: 22px;
+ line-height: 33px;
+ font-weight: 700;
+ }
+
+ &__buttons {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .button {
+ flex-shrink: 1;
+ white-space: nowrap;
+ min-width: 80px;
+ }
+
+ .icon-button {
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ box-sizing: content-box;
+ padding: 5px;
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ }
+ }
+ }
+ }
+}
+
+.hashtag-bar {
+ margin-top: 16px;
+ display: flex;
+ flex-wrap: wrap;
+ font-size: 12px;
+ line-height: 16px;
+ gap: 6px;
+ color: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-secondary)
+ );
+
+ a {
+ display: inline-flex;
+ color: inherit;
+ text-decoration: none;
+ padding: 4px 12px;
+ background: var(--color-bg-brand-softer);
+ border-radius: 4px;
+ font-weight: 500;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: var(--color-bg-brand-soft);
+ }
+ }
+
+ .link-button {
+ color: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ padding: 0;
+ }
+}
+
+.inline-follow-suggestions {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 16px 0;
+ padding-bottom: 0;
+ border-bottom: 1px solid var(--color-border-primary);
+ background: var(--color-bg-brand-softer);
+
+ &.focusable:focus-visible {
+ background: var(--color-bg-brand-softer);
+ }
+
+ &__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 16px;
+
+ h3 {
+ font-size: 15px;
+ line-height: 22px;
+ font-weight: 500;
+ }
+
+ &__actions {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ }
+
+ .link-button {
+ font-size: 13px;
+ font-weight: 500;
+ }
+ }
+
+ &__body {
+ position: relative;
+
+ &__scroll-button {
+ position: absolute;
+ height: 100%;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ top: 0;
+ color: var(--color-text-primary);
+ opacity: 0.5;
+
+ &.left {
+ left: 0;
+ }
+
+ &.right {
+ right: 0;
+ }
+
+ &__icon {
+ border-radius: 50%;
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ aspect-ratio: 1;
+ padding: 8px;
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ }
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ opacity: 1;
+ }
+ }
+
+ &__scrollable {
+ box-sizing: border-box;
+ display: flex;
+ flex-wrap: nowrap;
+ min-height: 228px;
+ gap: 16px;
+ padding: 16px;
+ scroll-snap-type: x mandatory;
+ scroll-padding: 16px;
+ scroll-behavior: smooth;
+ overflow-x: scroll;
+ scrollbar-width: none;
+
+ &__card {
+ background: var(--color-bg-primary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ align-items: center;
+ padding: 12px;
+ scroll-snap-align: start;
+ flex: 0 0 auto;
+ width: 200px;
+ box-sizing: border-box;
+ position: relative;
+
+ a {
+ text-decoration: none;
+ }
+
+ & > .icon-button {
+ position: absolute;
+ inset-inline-end: 8px;
+ top: 8px;
+ opacity: 0.75;
+ }
+
+ &__avatar {
+ height: 48px;
+ display: flex;
+
+ a {
+ display: flex;
+ text-decoration: none;
+ }
+ }
+
+ .account__avatar {
+ flex-shrink: 0;
+ align-self: flex-end;
+ border: 1px solid var(--color-border-primary);
+ background-color: var(--color-bg-tertiary);
+ }
+
+ &__text-stack {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ align-items: center;
+ max-width: 100%;
+
+ a {
+ max-width: 100%;
+ }
+
+ &__source {
+ display: inline-flex;
+ align-items: center;
+ color: var(--color-text-tertiary);
+ gap: 4px;
+ overflow: hidden;
+ white-space: nowrap;
+ cursor: help;
+
+ > span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+
+ .display-name {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ align-items: center;
+
+ & > * {
+ max-width: 100%;
+ }
+
+ &__html {
+ font-size: 15px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+ }
+
+ &__account {
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ }
+ }
+
+ .verified-badge {
+ font-size: 14px;
+ max-width: 100%;
+ }
+
+ .button {
+ display: block;
+ width: 100%;
+ }
+ }
+ }
+ }
+}
+
+.filtered-notifications-banner {
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid var(--color-border-primary);
+ padding: 16px 24px;
+ gap: 8px;
+ color: var(--color-text-secondary);
+ text-decoration: none;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: var(--color-text-primary);
+ }
+
+ .notification-group__icon {
+ color: inherit;
+ }
+
+ &__text {
+ flex: 1 1 auto;
+ font-size: 14px;
+ line-height: 20px;
+
+ strong {
+ font-size: 16px;
+ line-height: 24px;
+ display: block;
+ }
+ }
+
+ &__badge {
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ border-radius: 100px;
+ padding: 2px 8px;
+ }
+}
+
+.notification-request {
+ $padding: 15px;
+
+ display: flex;
+ padding: $padding;
+ gap: 8px;
+ position: relative;
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &__checkbox {
+ position: absolute;
+ inset-inline-start: $padding;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 0;
+ overflow: hidden;
+ opacity: 0;
+
+ .check-box {
+ display: flex;
+ }
+ }
+
+ &__link {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex: 1 1 auto;
+ text-decoration: none;
+ color: inherit;
+ overflow: hidden;
+
+ .account__avatar {
+ flex-shrink: 0;
+ }
+ }
+
+ &__name {
+ flex: 1 1 auto;
+ color: var(--color-text-secondary);
+ font-size: 14px;
+ line-height: 20px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &__display-name {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 16px;
+ letter-spacing: 0.5px;
+ line-height: 24px;
+ color: var(--color-text-primary);
+
+ bdi {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .filtered-notifications-banner__badge {
+ color: var(--color-text-on-brand-base);
+ background: var(--color-bg-brand-base);
+ border-radius: 4px;
+ padding: 1px 6px;
+ }
+ }
+
+ &__actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .icon-button {
+ border-radius: 4px;
+ border: 1px solid var(--color-border-primary);
+ padding: 5px;
+ }
+ }
+
+ .notification-request__link {
+ transition: padding-inline-start 0.1s ease-in-out;
+ }
+
+ &--forced-checkbox {
+ cursor: pointer;
+
+ &:hover {
+ background: var(--color-bg-secondary);
+ }
+
+ .notification-request__checkbox {
+ opacity: 1;
+ width: 30px;
+ }
+
+ .notification-request__link {
+ padding-inline-start: 30px;
+ }
+
+ .notification-request__actions {
+ display: none;
+ }
+ }
+}
+
+.more-from-author {
+ box-sizing: border-box;
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ background: var(--color-bg-tertiary);
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ border-radius: 0 0 8px 8px;
+ padding: 15px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 4px 8px;
+
+ .logo {
+ width: 16px;
+ height: 16px;
+ color: var(--color-text-secondary);
+ }
+
+ & > span {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ a {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+ text-decoration: none;
+ min-width: 0;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: var(--color-text-brand);
+ }
+ }
+}
+
+.notification-group {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ padding: 10px 14px; // glitch: reduced padding
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &__icon {
+ width: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+ color: var(--color-text-tertiary);
+
+ .icon {
+ width: 28px;
+ height: 28px;
+ }
+ }
+
+ &--follow &__icon,
+ &--follow-request &__icon {
+ color: var(--color-text-brand);
+ }
+
+ &--favourite &__icon {
+ color: var(--color-text-favourite-highlight);
+ }
+
+ &--reblog &__icon {
+ color: var(--color-text-success);
+ }
+
+ &--relationships-severance-event &__icon,
+ &--admin-report &__icon,
+ &--admin-sign-up &__icon {
+ color: var(--color-text-tertiary);
+ }
+
+ &--moderation-warning &__icon {
+ color: var(--color-text-bookmark-highlight);
+ }
+
+ &--follow-request &__actions {
+ align-items: center;
+ display: flex;
+ gap: 8px;
+
+ .icon-button {
+ border: 1px solid var(--color-border-primary);
+ border-radius: 50%;
+ padding: 1px;
+ }
+ }
+
+ &__main {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ flex: 1 1 auto;
+ overflow: hidden;
+ container-type: inline-size;
+
+ &__header {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &__wrapper {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__label {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2px 8px;
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--color-text-secondary);
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ bdi {
+ font-weight: 700;
+ color: var(--color-text-primary);
+ }
+
+ time {
+ color: var(--color-text-tertiary);
+ }
+
+ @container (width < 350px) {
+ time,
+ &-separator {
+ display: none;
+ }
+ }
+ }
+ }
+
+ &__status {
+ border: 1px solid var(--color-border-primary);
+ border-radius: 8px;
+ padding: 8px;
+ }
+
+ &__additional-content {
+ color: var(--color-text-tertiary);
+ margin-top: -8px; // to offset the parent's `gap` property
+ font-size: 15px;
+ line-height: 22px;
+ }
+ }
+
+ .status {
+ padding: 0;
+ border: 0;
+ }
+
+ &__embedded-status {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ cursor: pointer;
+
+ &__account {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: var(--color-text-tertiary);
+ font-size: 15px;
+ line-height: 22px;
+
+ bdi {
+ color: var(--color-text-secondary);
+ }
+
+ .account__avatar {
+ flex: 0 0 auto;
+ }
+ }
+
+ /* glitch: used for CWs */
+ p {
+ font-size: 15px;
+ color: var(--color-text-secondary);
+ }
+
+ &__content {
+ display: -webkit-box;
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--color-text-secondary);
+ -webkit-line-clamp: 4;
+ line-clamp: 4;
+ -webkit-box-orient: vertical;
+ max-height: none;
+ overflow: hidden;
+
+ p,
+ a {
+ color: inherit;
+ }
+
+ p {
+ margin-bottom: 8px;
+ }
+ }
+
+ .reply-indicator__attachments {
+ margin-top: 0;
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--color-text-tertiary);
+ }
+ }
+}
+
+.notification-group__actions,
+.compose-form__actions {
+ .button {
+ display: block; // Otherwise text-ellipsis doesn't work
+ flex: 1 1 auto;
+ }
+}
+
+.notification-ungrouped {
+ padding: 10px 14px; // glitch: reduced padding
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &__header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--color-text-tertiary);
+ font-size: 15px;
+ line-height: 22px;
+ font-weight: 500;
+ padding-inline-start: 24px;
+ margin-bottom: 16px;
+
+ &__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ }
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+ }
+
+ .status:not(.status--is-quote) {
+ border: 0;
+ padding: 0;
+ }
+
+ .status__wrapper-direct {
+ background: transparent;
+ }
+
+ .status {
+ // 40px avatar + 8px gap
+ --status-gutter-width: 48px;
+ }
+
+ .status--is-quote {
+ --status-gutter-width: 0;
+ }
+
+ .status__content,
+ .status__action-bar,
+ .media-gallery,
+ .video-player,
+ .audio-player,
+ .attachment-list,
+ .picture-in-picture-placeholder,
+ .more-from-author,
+ .status-card,
+ .hashtag-bar,
+ .content-warning,
+ .filter-warning {
+ margin-inline-start: var(--status-gutter-width);
+ width: calc(100% - var(--status-gutter-width));
+ }
+
+ .more-from-author {
+ width: calc(100% - var(--status-gutter-width) + 2px);
+ }
+
+ .status__content__read-more-button {
+ margin-inline-start: var(--status-gutter-width);
+ }
+
+ .notification__report {
+ border: 0;
+ padding: 0;
+ }
+}
+
+.notification-group--unread,
+.notification-ungrouped--unread {
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ border-inline-start: 4px solid var(--color-text-brand);
+ pointer-events: none;
+ }
+}
+
+.hover-card-controller[data-popper-reference-hidden='true'] {
+ opacity: 0;
+ pointer-events: none;
+}
+
+.hover-card {
+ box-shadow: var(--dropdown-shadow);
+ background: var(--color-bg-primary);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 8px;
+ padding: 16px;
+ width: 270px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ &--loading {
+ position: relative;
+ min-height: 100px;
+ }
+
+ &__name {
+ display: flex;
+ gap: 12px;
+ text-decoration: none;
+ color: inherit;
+ }
+
+ &__numbers,
+ &__familiar-followers {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 2px 10px;
+ }
+
+ &__numbers {
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--color-text-primary);
+
+ strong {
+ font-weight: 700;
+ }
+ }
+
+ &__text-row {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ &__bio {
+ color: var(--color-text-primary);
+ font-size: 14px;
+ line-height: 20px;
+ display: -webkit-box;
+ line-clamp: 2;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ max-height: 2 * 20px;
+ overflow: hidden;
+
+ p {
+ margin-bottom: 0;
+ }
+
+ a {
+ color: inherit;
+ text-decoration: underline;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+ }
+ }
+
+ &__note {
+ &-label {
+ color: var(--color-text-tertiary);
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ }
+
+ dd {
+ white-space: pre-line;
+ color: var(--color-text-primary);
+ overflow: hidden;
+ line-clamp: 3; // Not yet supported in browers
+ display: -webkit-box; // The next 3 properties are needed
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ }
+ }
+
+ &__limited-account-note {
+ text-align: center;
+ font-weight: 500;
+ }
+
+ .display-name {
+ font-size: 15px;
+ line-height: 22px;
+
+ bdi {
+ font-weight: 500;
+ color: var(--color-text-primary);
+ }
+
+ &__account {
+ display: block;
+ color: var(--color-text-tertiary);
+ }
+ }
+
+ .account-fields {
+ color: var(--color-text-primary);
+ font-size: 14px;
+ line-height: 20px;
+
+ a {
+ color: inherit;
+ text-decoration: none;
+
+ &:focus,
+ &:hover,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+
+ dl {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ dt {
+ flex: 0 1 auto;
+ color: var(--color-text-tertiary);
+ min-width: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ dd {
+ flex: 1 1 auto;
+ font-weight: 500;
+ min-width: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ text-align: end;
+ }
+
+ &.verified {
+ dd {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 4px;
+ overflow: hidden;
+ white-space: nowrap;
+ color: var(--color-text-success);
+
+ & > span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ a {
+ font-weight: 500;
+ }
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+ }
+ }
+}
+
+.content-warning {
+ display: block;
+ box-sizing: border-box;
+ color: var(--color-text-primary);
+ background: var(--color-bg-brand-softer);
+ border: 1px solid var(--color-border-on-bg-brand-softer);
+ border-radius: 8px;
+ padding: 8px (5px + 8px);
+ position: relative;
+ font-size: 15px;
+ line-height: 22px;
+ cursor: pointer;
+
+ p {
+ margin-bottom: 8px;
+ font-weight: 500;
+ }
+
+ .link-button {
+ font-size: inherit;
+ line-height: inherit;
+ font-weight: 500;
+ }
+
+ &--filter {
+ color: var(--color-text-secondary);
+
+ p {
+ font-weight: normal;
+ }
+
+ .filter-name {
+ font-weight: 500;
+ color: var(--color-text-primary);
+ }
+ }
+
+ .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(--color-border-primary);
+
+ &__title {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ padding: 16px 13px;
+ flex: 1 1 auto;
+ font-size: 16px;
+ line-height: 24px;
+ color: var(--color-text-secondary);
+ text-decoration: none;
+
+ &:is(a):hover,
+ &:is(a):focus,
+ &:is(a):active {
+ color: var(--color-text-primary);
+ }
+
+ input {
+ display: block;
+ width: 100%;
+ background: transparent;
+ border: 0;
+ padding: 0;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ color: inherit;
+
+ &::placeholder {
+ color: var(--color-text-secondary);
+ opacity: 1;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+ }
+ }
+}
+
+.column-search-header {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ border-bottom: 0;
+ padding: 16px;
+ padding-bottom: 8px;
+
+ input {
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border-primary);
+ color: var(--color-text-primary);
+ padding: 12px;
+ font-size: 16px;
+ line-height: normal;
+ border-radius: 4px;
+ display: block;
+ flex: 1 1 auto;
+
+ &::placeholder {
+ color: var(--color-text-secondary);
+ opacity: 1;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+ }
+}
+
+.column-footer {
+ padding: 16px;
+}
+
+.lists-scrollable {
+ min-height: 50vh;
+}
+
+.featured-carousel {
+ overflow: hidden;
+ flex-shrink: 0;
+ border-bottom: 1px solid var(--color-border-primary);
+ touch-action: pan-y;
+
+ &__slides {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: start;
+ }
+
+ &__slide {
+ flex: 0 0 auto;
+ flex-basis: 100%;
+ width: 100%;
+ overflow: hidden;
+ }
+
+ .status {
+ border-bottom: 0;
+
+ // glitch-soc fix for width-constrained
+ contain: inline-size;
+ }
+
+ &__header {
+ padding: 8px 16px;
+ color: var(--color-text-secondary);
+ inset-inline-end: 0;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ }
+
+ &__title {
+ flex-grow: 1;
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ }
+ }
+
+ &__pagination {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/containers.scss b/app/javascript/flavours/glitch/styles_new/mastodon/containers.scss
new file mode 100644
index 0000000000..57c62a29e3
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/containers.scss
@@ -0,0 +1,166 @@
+@use 'variables' as *;
+
+.container-alt {
+ width: 700px;
+ margin: 0 auto;
+
+ @media screen and (width <= 740px) {
+ width: 100%;
+ margin: 0;
+ }
+}
+
+.logo-container {
+ margin: 50px auto;
+
+ h1 {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .logo {
+ height: 42px;
+ margin-inline-end: 10px;
+ }
+
+ a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--color-text-primary);
+ text-decoration: none;
+ outline: 0;
+ padding: 12px 16px;
+ line-height: 32px;
+ font-weight: 500;
+ font-size: 14px;
+ }
+ }
+}
+
+.compose-standalone {
+ .compose-form {
+ width: 400px;
+ margin: 0 auto;
+ padding: 10px 0;
+ padding-bottom: 20px;
+ box-sizing: border-box;
+
+ @media screen and (width <= 400px) {
+ width: 100%;
+ padding: 20px;
+ }
+ }
+}
+
+.account-header {
+ width: 400px;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 14px;
+ line-height: 20px;
+ box-sizing: border-box;
+ padding: 20px 0;
+ margin-top: 40px;
+ margin-bottom: 10px;
+ border-bottom: 1px solid var(--color-border-primary);
+
+ @media screen and (width <= 440px) {
+ width: 100%;
+ margin: 0;
+ padding: 20px;
+ }
+
+ .avatar {
+ width: 48px;
+ height: 48px;
+ flex: 0 0 auto;
+
+ img {
+ width: 100%;
+ height: 100%;
+ display: block;
+ margin: 0;
+ border-radius: var(--avatar-border-radius);
+ }
+ }
+
+ .name {
+ flex: 1 1 auto;
+ color: var(--color-text-primary);
+
+ .username {
+ display: block;
+ font-size: 16px;
+ line-height: 24px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ color: var(--color-text-primary);
+ }
+ }
+
+ .logout-link {
+ display: block;
+ font-size: 32px;
+ line-height: 40px;
+ flex: 0 0 auto;
+ }
+}
+
+.redirect {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ font-size: 14px;
+ line-height: 18px;
+
+ &__logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 30px;
+
+ img {
+ height: 48px;
+ }
+ }
+
+ &__message {
+ text-align: center;
+
+ h1 {
+ font-size: 17px;
+ line-height: 22px;
+ font-weight: 700;
+ margin-bottom: 30px;
+ }
+
+ p {
+ margin-bottom: 30px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ color: var(--color-text-brand);
+ font-weight: 500;
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__link {
+ margin-top: 15px;
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/css_variables.scss b/app/javascript/flavours/glitch/styles_new/mastodon/css_variables.scss
new file mode 100644
index 0000000000..ba3319a6b4
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/css_variables.scss
@@ -0,0 +1,228 @@
+@use 'theme_utils' as utils;
+
+:root {
+ --color-black: #000;
+ --color-grey-950: #181821;
+ --color-grey-800: #292938;
+ --color-grey-700: #444664;
+ --color-grey-600: #545778;
+ --color-grey-500: #696d91;
+ --color-grey-400: #8b8dac;
+ --color-grey-300: #b4b6cb;
+ --color-grey-200: #d8d9e3;
+ --color-grey-100: #f0f0f5;
+ --color-grey-50: #f0f1ff;
+ --color-white: #fff;
+ --color-indigo-600: #6147e6;
+ --color-indigo-400: #8886ff;
+ --color-indigo-300: #a5abfd;
+ --color-indigo-200: #c8cdfe;
+ --color-indigo-100: #e0e3ff;
+ --color-indigo-50: #f0f1ff;
+ --color-red-500: #ff637e;
+ --color-red-600: #ec003f;
+ --color-yellow-400: #ffb900;
+ --color-yellow-600: #e17100;
+ --color-green-400: #05df72;
+ --color-green-600: #00a63e;
+
+ /* TEXT TOKENS */
+
+ --color-text-primary: var(--color-grey-50);
+ --color-text-secondary: var(--color-grey-400);
+ --color-text-tertiary: var(--color-grey-500);
+ --color-text-on-inverted: var(--color-grey-950);
+ --color-text-brand: var(--color-indigo-400);
+ --color-text-brand-soft: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-brand)
+ );
+ --color-text-on-brand-base: var(--color-white);
+ --color-text-error: var(--color-red-500);
+ --color-text-on-error-base: var(--color-white);
+ --color-text-warning: var(--color-yellow-400);
+ --color-text-on-warning-base: var(--color-white);
+ --color-text-success: var(--color-green-400);
+ --color-text-on-success-base: var(--color-white);
+ --color-text-disabled: var(--color-grey-600);
+ --color-text-on-disabled: var(--color-grey-400);
+ --color-text-bookmark-highlight: var(--color-text-error);
+ --color-text-favourite-highlight: var(--color-text-warning);
+ --color-text-on-media: var(--color-white);
+ --color-text-status-links: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-secondary)
+ );
+
+ /* BACKGROUND TOKENS */
+
+ // Neutrals
+ --color-bg-primary: var(--color-grey-950);
+ --overlay-strength-secondary: 10%;
+ --color-bg-secondary-base: var(--color-indigo-200);
+ --color-bg-secondary: #{utils.css-alpha(
+ var(--color-bg-secondary-base),
+ var(--overlay-strength-secondary)
+ )};
+ --color-bg-secondary-solid: color-mix(
+ in srgb,
+ var(--color-bg-primary),
+ var(--color-bg-secondary-base) var(--overlay-strength-secondary)
+ );
+ --color-bg-tertiary: color-mix(
+ in oklab,
+ var(--color-bg-primary),
+ var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
+ );
+
+ // Utility
+ --color-bg-ambient: var(--color-bg-primary);
+ --color-bg-elevated: var(--color-grey-800);
+ --color-bg-inverted: var(--color-grey-50);
+ --color-bg-media-base: var(--color-black);
+ --color-bg-media-strength: 65%;
+ --color-bg-media: #{utils.css-alpha(
+ var(--color-bg-media-base),
+ var(--color-bg-media-strength)
+ )};
+ --color-bg-overlay: var(--color-bg-primary);
+ --color-bg-disabled: var(--color-grey-700);
+
+ // Brand
+ --overlay-strength-brand: 10%;
+ --color-bg-brand-base: var(--color-indigo-600);
+ --color-bg-brand-base-hover: color-mix(
+ in oklab,
+ var(--color-bg-brand-base),
+ black var(--overlay-strength-brand)
+ );
+ --color-bg-brand-soft: #{utils.css-alpha(
+ var(--color-bg-brand-base),
+ calc(var(--overlay-strength-brand) * 1.5)
+ )};
+ --color-bg-brand-softer: #{utils.css-alpha(
+ var(--color-bg-brand-base),
+ var(--overlay-strength-brand)
+ )};
+
+ // Error
+ --overlay-strength-error: 12%;
+ --color-bg-error-base: var(--color-red-600);
+ --color-bg-error-base-hover: color-mix(
+ in oklab,
+ var(--color-bg-error-base),
+ black var(--overlay-strength-error)
+ );
+ --color-bg-error-soft: #{utils.css-alpha(
+ var(--color-bg-error-base),
+ calc(var(--overlay-strength-error) * 1.5)
+ )};
+ --color-bg-error-softer: #{utils.css-alpha(
+ var(--color-bg-error-base),
+ var(--overlay-strength-error)
+ )};
+
+ // Warning
+ --overlay-strength-warning: 10%;
+ --color-bg-warning-base: var(--color-yellow-600);
+ --color-bg-warning-base-hover: color-mix(
+ in oklab,
+ var(--color-bg-warning-base),
+ black var(--overlay-strength-warning)
+ );
+ --color-bg-warning-soft: #{utils.css-alpha(
+ var(--color-bg-warning-base),
+ calc(var(--overlay-strength-warning) * 1.5)
+ )};
+ --color-bg-warning-softer: #{utils.css-alpha(
+ var(--color-bg-warning-base),
+ var(--overlay-strength-warning)
+ )};
+
+ // Success
+ --overlay-strength-success: 15%;
+ --color-bg-success-base: var(--color-green-600);
+ --color-bg-success-base-hover: color-mix(
+ in oklab,
+ var(--color-bg-success-base),
+ black var(--overlay-strength-success)
+ );
+ --color-bg-success-soft: #{utils.css-alpha(
+ var(--color-bg-success-base),
+ calc(var(--overlay-strength-success) * 1.5)
+ )};
+ --color-bg-success-softer: #{utils.css-alpha(
+ var(--color-bg-success-base),
+ var(--overlay-strength-success)
+ )};
+
+ /* BORDER TOKENS */
+
+ --border-strength-primary: 18%;
+ --color-border-primary: #{utils.css-alpha(
+ var(--color-indigo-200),
+ var(--border-strength-primary)
+ )};
+ --color-border-media: rgb(252 248 255 / 15%);
+ --color-border-on-bg-secondary: #{utils.css-alpha(
+ var(--color-indigo-200),
+ calc(var(--border-strength-primary) / 1.5)
+ )};
+ --color-border-on-bg-brand-softer: var(--color-border-primary);
+ --color-border-on-bg-error-softer: #{utils.css-alpha(
+ var(--color-text-error),
+ 50%
+ )};
+ --color-border-on-bg-warning-softer: #{utils.css-alpha(
+ var(--color-text-warning),
+ 50%
+ )};
+ --color-border-on-bg-success-softer: #{utils.css-alpha(
+ var(--color-text-success),
+ 50%
+ )};
+ --color-border-on-bg-inverted: var(--color-border-primary);
+
+ /* SHADOW TOKENS */
+
+ --shadow-strength-primary: 80%;
+ --color-shadow-primary: #{utils.css-alpha(
+ var(--color-black),
+ var(--shadow-strength-primary)
+ )};
+ --dropdown-shadow:
+ 0 20px 25px -5px var(--color-shadow-primary),
+ 0 8px 10px -6px var(--color-shadow-primary);
+ --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
+
+ /* GRAPHS/CHARTS TOKENS */
+
+ --color-graph-primary-stroke: var(--color-text-brand);
+ --color-graph-primary-fill: var(--color-bg-brand-softer);
+ --color-graph-warning-stroke: var(--color-text-warning);
+ --color-graph-warning-fill: var(--color-bg-warning-softer);
+ --color-graph-disabled-stroke: var(--color-text-disabled);
+ --color-graph-disabled-fill: var(--color-bg-disabled);
+
+ /* LEGACY TOKENS */
+
+ --rich-text-container-color: rgb(87 24 60 / 100%);
+ --rich-text-text-color: rgb(255 175 212 / 100%);
+ --rich-text-decorations-color: rgb(128 58 95 / 100%);
+
+ /* MISCELLANEOUS */
+
+ --outline-focus-default: 2px solid var(--color-text-brand);
+ --avatar-border-radius: 8px;
+}
+
+body {
+ // Variable for easily inverting directional UI elements,
+ --text-x-direction: 1;
+
+ &.rtl {
+ --text-x-direction: -1;
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/dashboard.scss b/app/javascript/flavours/glitch/styles_new/mastodon/dashboard.scss
new file mode 100644
index 0000000000..db3f0e8a84
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/dashboard.scss
@@ -0,0 +1,120 @@
+@use 'variables' as *;
+
+.dashboard__counters {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0 -5px;
+ margin-bottom: 20px;
+
+ & > div {
+ box-sizing: border-box;
+ flex: 0 0 33.333%;
+ padding: 0 5px;
+ margin-bottom: 10px;
+
+ & > div,
+ & > a {
+ padding: 20px;
+ background: var(--color-bg-primary);
+ border-radius: 4px;
+ border: 1px solid var(--color-border-primary);
+ box-sizing: border-box;
+ height: 100%;
+ }
+
+ & > a {
+ text-decoration: none;
+ color: inherit;
+ display: block;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: var(--color-bg-brand-softer);
+ }
+ }
+ }
+
+ &__num,
+ &__text {
+ text-align: center;
+ font-weight: 500;
+ font-size: 24px;
+ color: var(--color-text-primary);
+ margin-bottom: 20px;
+ line-height: 30px;
+ }
+
+ &__text {
+ font-size: 18px;
+ }
+
+ &__label {
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ text-align: center;
+ font-weight: 500;
+ }
+}
+
+.dashboard {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+ gap: 10px;
+
+ @media screen and (width <= 1350px) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ }
+
+ &__item {
+ &--span-double-column {
+ grid-column: span 2;
+ }
+
+ &--span-double-row {
+ grid-row: span 2;
+ }
+
+ h4 {
+ padding-top: 20px;
+ }
+ }
+
+ &__quick-access {
+ display: flex;
+ align-items: baseline;
+ border-radius: 4px;
+ background: var(--color-bg-brand-base);
+ color: var(--color-text-on-brand-base);
+ transition: all 100ms ease-in;
+ font-size: 14px;
+ padding: 8px 16px;
+ text-decoration: none;
+ margin-bottom: 4px;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: var(--color-bg-brand-base-hover);
+ transition: all 200ms ease-out;
+ }
+
+ &.positive {
+ background: var(--color-bg-success-softer);
+ color: var(--color-text-success);
+ }
+
+ &.negative {
+ background: var(--color-bg-error-softer);
+ color: var(--color-text-error);
+ }
+
+ span {
+ flex: 1 1 auto;
+ }
+
+ strong {
+ font-weight: 700;
+ }
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/emoji_picker.scss b/app/javascript/flavours/glitch/styles_new/mastodon/emoji_picker.scss
new file mode 100644
index 0000000000..ad2f2f630d
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/emoji_picker.scss
@@ -0,0 +1,248 @@
+@use 'variables' as *;
+
+.emoji-mart {
+ font-size: 13px;
+ display: inline-block;
+
+ &,
+ * {
+ box-sizing: border-box;
+ line-height: 1.15;
+ }
+
+ .emoji-mart-emoji {
+ padding: 6px;
+ }
+}
+
+.emoji-mart-bar {
+ &:first-child {
+ background: var(--color-bg-tertiary);
+ border-bottom: 1px solid var(--color-border-primary);
+ }
+}
+
+.emoji-mart-anchors {
+ display: flex;
+ justify-content: space-between;
+ padding: 0 6px;
+ line-height: 0;
+}
+
+.emoji-mart-anchor {
+ position: relative;
+ flex: 1;
+ text-align: center;
+ padding: 12px 4px;
+ overflow: hidden;
+ transition: color 0.1s ease-out;
+ cursor: pointer;
+ background: transparent;
+ border: 0;
+ color: var(--color-text-secondary);
+
+ &:hover {
+ color: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-secondary)
+ );
+ }
+}
+
+.emoji-mart-anchor-selected {
+ color: var(--color-text-brand);
+
+ &:hover {
+ color: var(--color-text-brand-soft);
+ }
+
+ .emoji-mart-anchor-bar {
+ bottom: -1px;
+ }
+}
+
+.emoji-mart-anchor-bar {
+ position: absolute;
+ bottom: -5px;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 4px;
+ background-color: var(--color-text-brand);
+}
+
+.emoji-mart-anchors {
+ i {
+ display: inline-block;
+ width: 100%;
+ max-width: 22px;
+ }
+
+ svg {
+ fill: currentColor;
+ max-height: 18px;
+ }
+}
+
+.emoji-mart-scroll {
+ overflow-y: scroll;
+ height: 270px;
+ max-height: 35vh;
+ padding: 0 6px 6px;
+ will-change: transform;
+}
+
+.emoji-mart-search {
+ padding: 10px;
+ padding-inline-end: 45px;
+ position: relative;
+
+ input {
+ font-size: 16px;
+ font-weight: 400;
+ padding: 7px 9px;
+ padding-inline-end: 25px;
+ font-family: inherit;
+ display: block;
+ width: 100%;
+ background: var(--color-bg-secondary);
+ color: var(--color-text-secondary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &:active,
+ &:focus {
+ outline: none !important;
+ border-width: 1px !important;
+ }
+
+ &::-webkit-search-cancel-button {
+ display: none;
+ }
+ }
+}
+
+.emoji-mart-search-icon {
+ position: absolute;
+ top: 18px;
+ inset-inline-end: 45px + 5px;
+ z-index: 2;
+ padding: 2px 5px 1px;
+ border: 0;
+ background: none;
+ transition: all 100ms linear;
+ transition-property: opacity;
+ pointer-events: auto;
+
+ &:disabled {
+ cursor: default;
+ pointer-events: none;
+ }
+
+ svg {
+ fill: currentColor;
+ }
+}
+
+.emoji-mart-category .emoji-mart-emoji {
+ cursor: pointer;
+
+ span {
+ z-index: 1;
+ position: relative;
+ text-align: center;
+ display: inline-flex !important;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &:hover::before {
+ z-index: -1;
+ content: '';
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100%;
+ background-color: var(--color-bg-brand-softer);
+ border-radius: 100%;
+ }
+}
+
+.emoji-mart-category-label {
+ z-index: 2;
+ position: relative;
+ position: -webkit-sticky;
+ position: sticky;
+ top: 0;
+
+ span {
+ display: block;
+ width: 100%;
+ font-weight: 500;
+ padding: 5px 6px;
+ }
+}
+
+/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
+.emoji-mart-sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip-path: inset(50%);
+ border: 0;
+}
+
+.emoji-mart-category-list {
+ margin: 0;
+ padding: 0;
+}
+
+.emoji-mart-category-list li {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.emoji-mart-emoji {
+ position: relative;
+ display: inline-block;
+ background: transparent;
+ border: 0;
+ padding: 0;
+ font-size: 0;
+
+ span {
+ width: 22px;
+ height: 22px;
+ }
+}
+
+.emoji-mart-no-results {
+ font-size: 14px;
+ color: var(--color-text-tertiary);
+ text-align: center;
+ padding: 5px 6px;
+ padding-top: 70px;
+
+ .emoji-mart-no-results-label {
+ margin-top: 0.2em;
+ }
+
+ .emoji-mart-emoji:hover::before {
+ cursor: default;
+ content: none;
+ }
+}
+
+.emoji-mart-preview {
+ display: none;
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/forms.scss b/app/javascript/flavours/glitch/styles_new/mastodon/forms.scss
new file mode 100644
index 0000000000..a66d6c52f0
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/forms.scss
@@ -0,0 +1,1450 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+code {
+ font-family: $font-monospace, monospace;
+ font-weight: 400;
+}
+
+.form-container {
+ max-width: 450px;
+ padding: 20px;
+ padding-bottom: 50px;
+ margin: 50px auto;
+}
+
+.form-section {
+ border-radius: 8px;
+ background: var(--color-bg-secondary);
+ padding: 24px;
+ margin-bottom: 24px;
+}
+
+.fade-out-top {
+ position: relative;
+ overflow: hidden;
+ height: 160px;
+ max-width: 566px;
+ margin-inline: auto;
+
+ &::after {
+ content: '';
+ display: block;
+ background: linear-gradient(
+ to bottom,
+ var(--color-bg-secondary-solid),
+ transparent
+ );
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 100px;
+ pointer-events: none;
+ }
+
+ & > div {
+ position: absolute;
+ inset-inline-start: 0;
+ bottom: 0;
+ }
+}
+
+.indicator-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ color: var(--color-text-primary);
+
+ &.success {
+ color: var(--color-text-on-success-base);
+ background: var(--color-bg-success-base);
+ }
+
+ &.failure {
+ color: var(--color-text-on-error-base);
+ background: var(--color-bg-error-base);
+ }
+}
+
+.simple_form {
+ &.hidden {
+ display: none;
+ }
+
+ .input {
+ margin-bottom: 16px;
+ overflow: hidden;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &__toolbar {
+ margin-top: 16px;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+ .character-counter {
+ flex: 0 0 auto;
+ }
+ }
+
+ &.hidden {
+ margin: 0;
+ }
+
+ &.radio_buttons {
+ .radio {
+ margin-bottom: 15px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .radio > label {
+ position: relative;
+ padding-inline-start: 28px;
+
+ input {
+ position: absolute;
+ top: -2px;
+ inset-inline-start: 0;
+ }
+ }
+ }
+
+ &.boolean {
+ position: relative;
+ margin-bottom: 0;
+
+ .label_input > label {
+ font-family: inherit;
+ font-size: 14px;
+ padding-top: 5px;
+ color: var(--color-text-primary);
+ display: block;
+ width: auto;
+ }
+
+ .label_input,
+ .hint {
+ padding-inline-start: 28px;
+ }
+
+ .label_input__wrapper {
+ position: static;
+ }
+
+ label.checkbox {
+ position: absolute;
+ top: 2px;
+ inset-inline-start: 0;
+ }
+
+ label a {
+ color: var(--color-text-brand);
+ text-decoration: underline;
+
+ &:hover,
+ &:active,
+ &:focus {
+ text-decoration: none;
+ }
+ }
+
+ .overridden,
+ .recommended,
+ .not_recommended,
+ .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: var(--color-text-primary);
+ margin-bottom: 30px;
+
+ &.invited-by {
+ margin-bottom: 15px;
+ }
+
+ a {
+ color: var(--color-text-brand);
+ }
+ }
+
+ .rules-list {
+ font-size: 17px;
+ line-height: 22px;
+ margin-bottom: 30px;
+ }
+
+ .hint {
+ color: var(--color-text-secondary);
+
+ a {
+ color: var(--color-text-brand);
+ }
+
+ code {
+ border-radius: 3px;
+ padding: 0.2em 0.4em;
+ background: var(--color-bg-secondary);
+ }
+
+ li {
+ list-style: disc;
+ margin-inline-start: 18px;
+ }
+
+ .icon {
+ vertical-align: -3px;
+ }
+ }
+
+ ul.hint {
+ margin-bottom: 15px;
+ }
+
+ span.hint {
+ display: block;
+ font-size: 12px;
+ margin-top: 4px;
+ }
+
+ p.hint {
+ margin-bottom: 15px;
+ color: var(--color-text-secondary);
+
+ &.subtle-hint {
+ text-align: center;
+ font-size: 12px;
+ line-height: 18px;
+ margin-top: 15px;
+ margin-bottom: 0;
+ }
+ }
+
+ .authentication-hint {
+ margin-bottom: 25px;
+ }
+
+ .card {
+ margin-bottom: 15px;
+ }
+
+ strong {
+ font-weight: 500;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+
+ .input.with_floating_label {
+ .label_input {
+ display: flex;
+
+ & > label {
+ font-family: inherit;
+ font-size: 14px;
+ color: var(--color-text-primary);
+ font-weight: 500;
+ min-width: 150px;
+ flex: 0 0 auto;
+ }
+
+ input,
+ select {
+ flex: 1 1 auto;
+ }
+ }
+
+ &.select .hint {
+ margin-top: 6px;
+ margin-inline-start: 150px;
+ }
+ }
+
+ .input.with_label {
+ .label_input > label {
+ font-family: inherit;
+ font-size: 14px;
+ color: var(--color-text-primary);
+ display: block;
+ margin-bottom: 8px;
+ overflow-wrap: break-word;
+ font-weight: 500;
+ }
+
+ .hint {
+ margin-top: 6px;
+ }
+
+ ul {
+ flex: 390px;
+ }
+ }
+
+ .input.with_block_label {
+ max-width: none;
+
+ & > label {
+ font-family: inherit;
+ font-size: 14px;
+ color: var(--color-text-primary);
+ display: block;
+ font-weight: 600;
+ line-height: 20px;
+ }
+
+ .hint {
+ line-height: 16px;
+ margin-bottom: 12px;
+ }
+
+ ul {
+ columns: 2;
+
+ @media screen and (max-width: $mobile-breakpoint) {
+ columns: 1;
+ }
+ }
+ }
+
+ .input.with_block_label.user_role_permissions_as_keys ul {
+ columns: unset;
+ }
+
+ .input.datetime .label_input,
+ .input.date .label_input {
+ display: flex;
+ gap: 4px;
+ align-items: center;
+
+ select {
+ display: inline-block;
+ width: auto;
+ flex: 0;
+ }
+ }
+
+ .input.date_of_birth .label_input {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+
+ input {
+ box-sizing: content-box;
+ width: 32px;
+ flex: 0;
+
+ &:last-child {
+ width: 64px;
+ }
+ }
+ }
+
+ .input.select.select--languages {
+ min-width: 32ch;
+ }
+
+ .required abbr {
+ text-decoration: none;
+ color: var(--color-text-error);
+ }
+
+ .fields-group {
+ margin-bottom: 25px;
+
+ .input:last-child {
+ margin-bottom: 0;
+ }
+
+ &__thumbnail {
+ display: block;
+ margin: 0;
+ margin-bottom: 10px;
+ max-width: 100%;
+ height: auto;
+ border-radius: var(--avatar-border-radius);
+ background: url('@/images/void.png');
+
+ &[src$='missing.png'] {
+ visibility: hidden;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &#account_avatar-preview {
+ width: 90px;
+ height: 90px;
+ object-fit: cover;
+ }
+ }
+ }
+
+ .fields-row {
+ display: flex;
+ margin: 0 -10px;
+ padding-top: 5px;
+ margin-bottom: 25px;
+
+ .input {
+ max-width: none;
+ }
+
+ &__column {
+ box-sizing: border-box;
+ padding: 0 10px;
+ flex: 1 1 auto;
+ min-height: 1px;
+
+ &-6 {
+ max-width: 50%;
+ }
+
+ .actions {
+ margin-top: 27px;
+ }
+ }
+
+ .fields-group:last-child,
+ .fields-row__column.fields-group {
+ margin-bottom: 0;
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ display: block;
+ margin-bottom: 0;
+
+ &__column {
+ max-width: none;
+ }
+
+ .fields-group:last-child,
+ .fields-row__column.fields-group,
+ .fields-row__column {
+ margin-bottom: 25px;
+ }
+ }
+
+ .fields-group.invited-by {
+ margin-bottom: 30px;
+
+ .hint {
+ text-align: center;
+ }
+ }
+ }
+
+ .input.radio_buttons .radio label {
+ margin-bottom: 5px;
+ font-family: inherit;
+ font-size: 14px;
+ color: var(--color-text-primary);
+ display: block;
+ width: auto;
+ }
+
+ .check_boxes {
+ .checkbox {
+ label {
+ font-family: inherit;
+ font-size: 14px;
+ color: var(--color-text-primary);
+ display: inline-block;
+ width: auto;
+ position: relative;
+ padding-top: 5px;
+ padding-inline-start: 25px;
+ flex: 1 1 auto;
+ }
+
+ input[type='checkbox'] {
+ position: absolute;
+ inset-inline-start: 0;
+ top: 5px;
+ margin: 0;
+ }
+ }
+ }
+
+ .input.static .label_input__wrapper {
+ font-size: 14px;
+ padding: 10px;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ }
+
+ input[type='text'],
+ input[type='number'],
+ input[type='email'],
+ input[type='password'],
+ input[type='url'],
+ input[type='datetime-local'],
+ textarea {
+ box-sizing: border-box;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--color-text-primary);
+ display: block;
+ width: 100%;
+ outline: 0;
+ font-family: inherit;
+ resize: vertical;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ padding: 10px 16px;
+
+ &:invalid {
+ box-shadow: none;
+ }
+
+ &:required:valid {
+ border-color: var(--color-text-success);
+ }
+
+ @media screen and (width <= 600px) {
+ font-size: 16px;
+ }
+ }
+
+ input[type='text'],
+ input[type='number'],
+ input[type='email'],
+ input[type='password'],
+ input[type='datetime-local'] {
+ &:focus:invalid:not(:placeholder-shown),
+ &:required:invalid:not(:placeholder-shown) {
+ border-color: var(--color-text-error);
+ }
+ }
+
+ .input.field_with_errors {
+ label {
+ color: var(--color-text-error);
+ }
+
+ input[type='text'],
+ input[type='number'],
+ input[type='email'],
+ input[type='password'],
+ input[type='datetime-local'],
+ textarea,
+ select {
+ border-color: var(--color-text-error);
+ }
+
+ .error {
+ display: block;
+ font-weight: 500;
+ color: var(--color-text-error);
+ margin-top: 4px;
+ }
+ }
+
+ .input.disabled {
+ opacity: 0.5;
+ }
+
+ .actions {
+ margin-top: 30px;
+ display: flex;
+ gap: 10px;
+
+ &.actions--top {
+ margin-top: 0;
+ margin-bottom: 30px;
+ }
+ }
+
+ .stacked-actions {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-top: 30px;
+ margin-bottom: 15px;
+ }
+
+ .btn {
+ display: block;
+ width: 100%;
+ border: 0;
+ border-radius: 4px;
+ background: var(--color-bg-brand-base);
+ color: var(--color-text-on-brand-base);
+ font-size: 15px;
+ line-height: 22px;
+ height: auto;
+ padding: 7px 18px;
+ text-decoration: none;
+ text-align: center;
+ box-sizing: border-box;
+ cursor: pointer;
+ font-weight: 500;
+ outline: 0;
+
+ &:last-child {
+ margin-inline-end: 0;
+ }
+
+ &:active,
+ &:focus,
+ &:hover {
+ background: var(--color-bg-brand-base-hover);
+ }
+
+ &:disabled,
+ &:disabled:hover {
+ color: var(--color-text-on-disabled);
+ background: var(--color-bg-disabled);
+ }
+
+ &.negative {
+ background: var(--color-bg-error-base);
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: var(--color-bg-error-base-hover);
+ }
+ }
+ }
+
+ select {
+ appearance: none;
+ box-sizing: border-box;
+ font-size: 14px;
+ color: var(--color-text-primary);
+ display: block;
+ width: 100%;
+ outline: 0;
+ font-family: inherit;
+ resize: vertical;
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ padding-inline-start: 10px;
+ padding-inline-end: 30px;
+ height: 41px;
+
+ @media screen and (width <= 600px) {
+ font-size: 16px;
+ }
+ }
+
+ h4 {
+ margin-bottom: 15px !important;
+ }
+
+ .label_input {
+ position: relative;
+
+ &__loading-indicator {
+ box-sizing: border-box;
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ border: 1px solid transparent;
+ padding: 10px 16px;
+ width: 100%;
+ }
+
+ &__wrapper {
+ position: relative;
+ }
+
+ &__append {
+ position: absolute;
+ inset-inline-end: 3px;
+ top: 1px;
+ padding: 10px;
+ font-size: 14px;
+ color: var(--color-text-tertiary);
+ font-family: inherit;
+ pointer-events: none;
+ cursor: default;
+ max-width: 50%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ inset-inline-end: 0;
+ bottom: 1px;
+ width: 5px;
+ }
+ }
+ }
+
+ .status-card {
+ contain: unset;
+ }
+}
+
+/* Double-chevron icon for custom select components */
+.select-wrapper,
+.select .label_input__wrapper {
+ width: 100%;
+
+ &::after {
+ --icon-size: 11px;
+
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-end: 9px;
+ width: var(--icon-size);
+ background-color: var(--color-text-tertiary);
+ pointer-events: none;
+ mask-image: url("data:image/svg+xml;utf8,");
+ mask-position: right center;
+ mask-size: var(--icon-size);
+ mask-repeat: no-repeat;
+ }
+}
+
+.block-icon {
+ display: block;
+ margin: 0 auto;
+ margin-bottom: 10px;
+ font-size: 24px;
+}
+
+.flash-message {
+ color: var(--color-text-brand);
+ background: transparent;
+ border: 1px solid var(--color-text-brand);
+ border-radius: 4px;
+ padding: 15px 10px;
+ margin-bottom: 30px;
+ text-align: center;
+
+ &.notice {
+ border: 1px solid var(--color-border-on-bg-success-softer);
+ background: var(--color-bg-success-softer);
+ color: var(--color-text-success);
+ }
+
+ &.warning {
+ border: 1px solid var(--color-border-on-bg-warning-softer);
+ background: var(--color-bg-warning-softer);
+ color: var(--color-text-warning);
+ }
+
+ &.alert {
+ border: 1px solid var(--color-border-on-bg-error-softer);
+ background: var(--color-bg-error-softer);
+ color: var(--color-text-error);
+ }
+
+ &.hidden {
+ display: none;
+ }
+
+ &.hidden-on-touch-devices {
+ @media screen and (pointer: coarse) {
+ display: none;
+ }
+ }
+
+ a {
+ display: inline-block;
+ color: var(--color-text-secondary);
+ text-decoration: none;
+
+ &:hover {
+ color: var(--color-text-primary);
+ text-decoration: underline;
+ }
+ }
+
+ &.warning a {
+ font-weight: 700;
+ color: inherit;
+ text-decoration: underline;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ color: inherit;
+ }
+ }
+
+ p {
+ margin-bottom: 15px;
+ }
+
+ .oauth-code {
+ outline: 0;
+ box-sizing: border-box;
+ display: block;
+ width: 100%;
+ border: 0;
+ padding: 10px;
+ font-family: $font-monospace, monospace;
+ background: var(--color-bg-secondary);
+ color: var(--color-text-primary);
+ font-size: 14px;
+ margin: 0;
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
+
+ &:focus {
+ background: var(--color-bg-brand-softer);
+ }
+ }
+
+ strong {
+ font-weight: 500;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+
+ @media screen and (440px < width <= 740px) {
+ margin-top: 40px;
+ }
+
+ &.translation-prompt {
+ text-align: unset;
+ color: unset;
+
+ a {
+ text-decoration: underline;
+ }
+ }
+}
+
+.flash-message-stack {
+ margin-bottom: 30px;
+
+ .flash-message {
+ border-radius: 0;
+ margin-bottom: 0;
+ border-top-width: 0;
+
+ &:first-child {
+ border-radius: 4px 4px 0 0;
+ border-top-width: 1px;
+ }
+
+ &:last-child {
+ border-radius: 0 0 4px 4px;
+
+ &:first-child {
+ border-radius: 4px;
+ }
+ }
+ }
+}
+
+.form-footer {
+ margin-top: 30px;
+ text-align: center;
+
+ a {
+ color: var(--color-text-secondary);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
+
+.quick-nav {
+ list-style: none;
+ margin-bottom: 25px;
+ font-size: 14px;
+
+ li {
+ display: inline-block;
+ margin-inline-end: 10px;
+ }
+
+ a {
+ color: var(--color-text-brand);
+ text-transform: uppercase;
+ text-decoration: none;
+ font-weight: 700;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: var(--color-text-brand-soft);
+ }
+ }
+}
+
+.oauth-prompt,
+.follow-prompt {
+ margin-bottom: 30px;
+ color: var(--color-text-secondary);
+
+ h2 {
+ font-size: 16px;
+ margin-bottom: 30px;
+ text-align: center;
+ }
+
+ strong {
+ color: var(--color-text-primary);
+ font-weight: 500;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+}
+
+.oauth-prompt {
+ h3 {
+ color: var(--color-text-primary);
+ font-size: 17px;
+ line-height: 22px;
+ font-weight: 500;
+ margin-bottom: 30px;
+ }
+
+ p {
+ font-size: 14px;
+ line-height: 18px;
+ margin-bottom: 30px;
+ }
+
+ .permissions-list {
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ background: var(--color-bg-secondary);
+ margin-bottom: 30px;
+ }
+
+ .actions {
+ margin: 0 -10px;
+ display: flex;
+
+ form {
+ box-sizing: border-box;
+ padding: 0 10px;
+ flex: 1 1 auto;
+ min-height: 1px;
+ width: 50%;
+ }
+ }
+}
+
+.qr-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+}
+
+.qr-code {
+ flex: 0 0 auto;
+ background: white;
+ padding: 4px;
+ margin: 0 10px 20px 0;
+ box-shadow: 0 0 15px var(--color-shadow-primary);
+ display: inline-block;
+
+ svg {
+ display: block;
+ margin: 0;
+ }
+}
+
+.qr-alternative {
+ margin-bottom: 20px;
+ color: var(--color-text-primary);
+ flex: 150px;
+
+ samp {
+ display: block;
+ font-size: 14px;
+ }
+}
+
+.action-pagination {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+
+ .actions,
+ .pagination {
+ flex: 1 1 auto;
+ }
+
+ .actions {
+ padding: 30px 0;
+ padding-inline-end: 20px;
+ flex: 0 0 auto;
+ }
+}
+
+.post-follow-actions {
+ text-align: center;
+ color: var(--color-text-secondary);
+
+ div {
+ margin-bottom: 4px;
+ }
+}
+
+.alternative-login {
+ margin-top: 20px;
+ margin-bottom: 20px;
+
+ h4 {
+ font-size: 16px;
+ color: var(--color-text-primary);
+ text-align: center;
+ margin-bottom: 20px;
+ border: 0;
+ padding: 0;
+ }
+
+ .button {
+ display: block;
+ }
+}
+
+.scope-danger {
+ color: var(--color-text-error);
+}
+
+.form_admin_settings_site_short_description,
+.form_admin_settings_site_description,
+.form_admin_settings_site_extended_description,
+.form_admin_settings_site_terms,
+.form_admin_settings_custom_css,
+.form_admin_settings_closed_registrations_message {
+ textarea {
+ font-family: $font-monospace, monospace;
+ }
+}
+
+.input-copy {
+ color: var(--color-text-primary);
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ padding-inline-end: 4px;
+ position: relative;
+ top: 1px;
+ transition: border-color 300ms linear;
+
+ &__wrapper {
+ flex: 1 1 auto;
+ }
+
+ input[type='text'] {
+ background: transparent;
+ border: 0;
+ padding: 10px;
+ font-size: 14px;
+ font-family: $font-monospace, monospace;
+ }
+
+ button {
+ flex: 0 0 auto;
+ margin: 4px;
+ text-transform: none;
+ font-weight: 400;
+ font-size: 14px;
+ padding: 7px 18px;
+ padding-bottom: 6px;
+ width: auto;
+ transition: background 300ms linear;
+ }
+
+ &.copied {
+ border-color: var(--color-text-success);
+ transition: none;
+
+ button {
+ background: var(--color-bg-success-base);
+ transition: none;
+ }
+ }
+}
+
+.input.user_confirm_password,
+.input.user_website {
+ &:not(.field_with_errors) {
+ display: none;
+ }
+}
+
+.simple_form .h-captcha {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 30px;
+}
+
+.permissions-list {
+ &__item {
+ padding: 15px;
+ color: var(--color-text-primary);
+ border-bottom: 1px solid var(--color-border-primary);
+ display: flex;
+ align-items: center;
+
+ &__text {
+ flex: 1 1 auto;
+
+ &__title {
+ font-weight: 500;
+ }
+
+ &__type {
+ color: var(--color-text-secondary);
+ overflow-wrap: anywhere;
+ }
+ }
+
+ &__icon {
+ flex: 0 0 auto;
+ font-size: 18px;
+ width: 30px;
+ color: var(--color-text-success);
+ display: flex;
+ align-items: center;
+ }
+
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+}
+
+// Only remove padding when listing applications, to prevent styling issues on
+// the Authorization page.
+.applications-list {
+ .permissions-list__item:last-child {
+ padding-bottom: 0;
+ }
+}
+
+.keywords-table {
+ thead {
+ th {
+ white-space: nowrap;
+ }
+
+ th:first-child {
+ width: 100%;
+ }
+ }
+
+ tfoot {
+ td {
+ border: 0;
+ }
+ }
+
+ .input.string {
+ margin-bottom: 0;
+ }
+
+ .label_input__wrapper {
+ margin-top: 10px;
+ }
+
+ .table-action-link {
+ margin-top: 10px;
+ white-space: nowrap;
+ }
+}
+
+.progress-tracker {
+ display: flex;
+ align-items: center;
+ padding-bottom: 30px;
+ margin-bottom: 30px;
+
+ li {
+ flex: 0 0 auto;
+ position: relative;
+ }
+
+ .separator {
+ height: 2px;
+ background: var(--color-border-primary);
+ flex: 1 1 auto;
+
+ &.completed {
+ background: var(--color-text-brand);
+ }
+ }
+
+ .circle {
+ box-sizing: border-box;
+ position: relative;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ border: 2px solid var(--color-border-primary);
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ svg {
+ width: 16px;
+ }
+ }
+
+ .label {
+ position: absolute;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+ padding-top: 10px;
+ text-align: center;
+ width: 100px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ li:first-child .label {
+ inset-inline-start: 0;
+ inset-inline-end: auto;
+ text-align: start;
+ transform: none;
+ }
+
+ li:last-child .label {
+ inset-inline-start: auto;
+ inset-inline-end: 0;
+ text-align: end;
+ transform: none;
+ }
+
+ .active .circle {
+ border-color: var(--color-text-brand);
+
+ &::before {
+ content: '';
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: var(--color-text-brand);
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+
+ .completed .circle {
+ border-color: var(--color-text-brand);
+ background: var(--color-text-brand);
+ }
+}
+
+.app-form {
+ padding: 16px;
+
+ &__avatar-input,
+ &__header-input {
+ display: block;
+ border-radius: 8px;
+ background: var(--color-bg-secondary);
+ position: relative;
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--color-bg-brand-softer);
+ }
+
+ img {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 8px;
+ z-index: 0;
+ }
+
+ .icon {
+ position: absolute;
+ inset-inline-start: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ color: var(--color-text-secondary);
+ z-index: 3;
+ }
+
+ &.selected .icon {
+ color: var(--color-text-primary);
+ transform: none;
+ inset-inline-start: auto;
+ inset-inline-end: 8px;
+ top: auto;
+ bottom: 8px;
+ }
+
+ &.invalid img {
+ outline: 1px solid var(--color-text-error);
+ outline-offset: -1px;
+ }
+
+ &.invalid::before {
+ display: block;
+ content: '';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background: var(--color-bg-error-softer);
+ z-index: 2;
+ border-radius: 8px;
+ }
+ }
+
+ &__avatar-input {
+ width: 80px;
+ height: 80px;
+ }
+
+ &__header-input {
+ aspect-ratio: 580/193;
+ }
+
+ &__toggle {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ color: var(--color-text-secondary);
+ font-size: 14px;
+ line-height: 20px;
+
+ .icon {
+ flex: 0 0 auto;
+ }
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ }
+
+ &__label {
+ flex: 1 1 auto;
+
+ strong {
+ color: var(--color-text-primary);
+ font-weight: 600;
+ }
+
+ .hint {
+ display: block;
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ }
+
+ .recommended {
+ position: absolute;
+ margin: 0 4px;
+ margin-top: -2px;
+ }
+ }
+
+ &__toggle {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ }
+
+ &__toggle > div {
+ display: flex;
+ border-inline-start: 1px solid var(--color-border-primary);
+ padding-inline-start: 16px;
+ }
+ }
+
+ &__link {
+ display: flex;
+ gap: 16px;
+ padding: 8px 0;
+ align-items: center;
+ text-decoration: none;
+ color: var(--color-text-primary);
+ margin-bottom: 16px;
+
+ &__text {
+ flex: 1 1 auto;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--color-text-secondary);
+
+ strong {
+ font-weight: 600;
+ display: block;
+ color: var(--color-text-primary);
+ }
+
+ .icon {
+ vertical-align: -5px;
+ width: 20px;
+ height: 20px;
+ }
+ }
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/glitch/doodle.scss b/app/javascript/flavours/glitch/styles_new/mastodon/glitch/doodle.scss
new file mode 100644
index 0000000000..eb053c14db
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/glitch/doodle.scss
@@ -0,0 +1,86 @@
+$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_new/mastodon/glitch/local_settings.scss b/app/javascript/flavours/glitch/styles_new/mastodon/glitch/local_settings.scss
new file mode 100644
index 0000000000..c016428da2
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/glitch/local_settings.scss
@@ -0,0 +1,174 @@
+@use '../variables' as *;
+
+.glitch.local-settings {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ border-radius: 16px;
+ background: var(--color-bg-primary);
+ backdrop-filter: $backdrop-blur-filter;
+ border: 1px solid var(--color-border-primary);
+ 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: var(--color-text-secondary);
+ }
+
+ 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: var(--color-bg-secondary);
+ border: 0;
+ border-bottom: 1px var(--color-border-on-bg-secondary) solid;
+ cursor: pointer;
+ text-decoration: none;
+ outline: none;
+ box-sizing: border-box;
+ width: 100%;
+ text-align: start;
+ font-size: inherit;
+
+ .text-icon-button {
+ color: inherit;
+ transition: unset;
+ unicode-bidi: embed;
+ }
+
+ &:hover {
+ background: var(--color-bg-brand-soft);
+ color: var(--color-text-on-brand-base);
+ }
+
+ &.active {
+ background: var(--color-bg-brand-base);
+ color: var(--color-text-on-brand-base);
+ }
+
+ &.close,
+ &.close:hover {
+ color: var(--color-text-on-error-base);
+ background-color: var(--color-bg-error-base);
+ }
+}
+
+.glitch.local-settings__navigation {
+ background: var(--color-bg-secondary);
+ 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: var(--color-text-secondary);
+ 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: var(--color-text-secondary);
+ font-weight: 500;
+ text-decoration: underline;
+
+ &:active,
+ &:focus,
+ &:hover {
+ text-decoration: none;
+ }
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/lists.scss b/app/javascript/flavours/glitch/styles_new/mastodon/lists.scss
new file mode 100644
index 0000000000..6019cd8002
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/lists.scss
@@ -0,0 +1,19 @@
+.no-list {
+ list-style: none;
+
+ li {
+ display: inline-block;
+ margin: 0 5px;
+ }
+}
+
+.recovery-codes {
+ list-style: none;
+ margin: 0 auto;
+
+ li {
+ font-size: 125%;
+ line-height: 1.5;
+ letter-spacing: 1px;
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/modal.scss b/app/javascript/flavours/glitch/styles_new/mastodon/modal.scss
new file mode 100644
index 0000000000..6af2a182b6
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/modal.scss
@@ -0,0 +1,53 @@
+@use 'variables' as *;
+
+.modal-layout {
+ background: var(--color-bg-brand-softer);
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ padding: 0;
+}
+
+.modal-layout__mastodon {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: flex-end;
+
+ > div {
+ flex: 1;
+ max-height: 235px;
+ position: relative;
+
+ img {
+ max-height: 100%;
+ max-width: 100%;
+ height: 100%;
+ position: absolute;
+ bottom: 0;
+ inset-inline-start: 0;
+ }
+ }
+}
+
+@media screen and (width <= 600px) {
+ .account-header {
+ margin-top: 0;
+ }
+}
+
+.with-zig-zag-decoration {
+ &::after {
+ content: '';
+ position: absolute;
+ inset: auto 0 0;
+ height: 32px;
+ background-color: var(--color-bg-brand-softer);
+
+ /* Decorative zig-zag pattern at the bottom of the page */
+ mask-image: url('data:image/svg+xml;utf8,');
+ mask-position: bottom;
+ mask-repeat: repeat-x;
+ z-index: -1;
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/polls.scss b/app/javascript/flavours/glitch/styles_new/mastodon/polls.scss
new file mode 100644
index 0000000000..19fb8dd505
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/polls.scss
@@ -0,0 +1,232 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+.poll {
+ margin-top: 16px;
+ font-size: 14px;
+
+ li {
+ margin-bottom: 10px;
+ position: relative;
+ }
+
+ &__chart {
+ border-radius: 4px;
+ display: block;
+ background: rgb(from var(--color-text-brand) r g b / 60%);
+ height: 5px;
+ min-width: 1%;
+
+ &.leading {
+ background: var(--color-text-brand);
+ }
+ }
+
+ progress {
+ border: 0;
+ display: block;
+ width: 100%;
+ height: 5px;
+ appearance: none;
+ background: transparent;
+
+ &::-webkit-progress-bar {
+ background: transparent;
+ }
+
+ // Those rules need to be entirely separate or they won't work, hence the
+ // duplication
+ &::-moz-progress-bar {
+ border-radius: 4px;
+ background: rgb(from var(--color-text-brand) r g b / 60%);
+ }
+
+ &::-webkit-progress-value {
+ border-radius: 4px;
+ background: rgb(from var(--color-text-brand) r g b / 60%);
+ }
+ }
+
+ &__option {
+ position: relative;
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ padding: 6px 0;
+ line-height: 18px;
+ cursor: default;
+ overflow: hidden;
+
+ &__text {
+ display: inline-block;
+ overflow-wrap: break-word;
+ max-width: calc(100% - 45px - 25px);
+ }
+
+ input[type='radio'],
+ input[type='checkbox'] {
+ display: none;
+ }
+
+ .autosuggest-input {
+ flex: 1 1 auto;
+ }
+
+ input[type='text'] {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ font-size: 14px;
+ color: var(--color-text-primary);
+ outline: 0;
+ font-family: inherit;
+ background: var(--color-bg-primary);
+ border: 1px solid var(--color-text-secondary);
+ border-radius: 4px;
+ padding: 8px 12px;
+
+ &:focus {
+ border-color: var(--color-text-brand);
+ }
+
+ @media screen and (width <= 600px) {
+ font-size: 16px;
+ line-height: 24px;
+ letter-spacing: 0.5px;
+ }
+ }
+
+ &.selectable {
+ cursor: pointer;
+ }
+
+ &.editable,
+ &.disabled {
+ align-items: center;
+ overflow: visible;
+ }
+ }
+
+ &__input {
+ display: block;
+ position: relative;
+ border: 1px solid var(--color-text-secondary);
+ box-sizing: border-box;
+ width: 17px;
+ height: 17px;
+ border-radius: 50%;
+ flex: 0 0 auto;
+
+ &.checkbox {
+ border-radius: 4px;
+ }
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: var(--color-text-success);
+ border-width: 4px;
+ }
+
+ &.active {
+ background-color: var(--color-bg-success-base);
+ border-color: var(--color-text-success);
+ }
+
+ &::-moz-focus-inner {
+ outline: 0 !important;
+ border: 0;
+ }
+
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
+
+ &.disabled {
+ border-color: var(--color-text-disabled);
+
+ &.active {
+ background: var(--color-text-disabled);
+ }
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: var(--color-text-disabled);
+ border-width: 1px;
+ }
+ }
+ }
+
+ &__option.editable &__input,
+ &__option.disabled &__input {
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: var(--color-text-primary);
+ border-width: 1px;
+ }
+ }
+
+ &__number {
+ display: inline-block;
+ width: 45px;
+ font-weight: 700;
+ flex: 0 0 45px;
+ }
+
+ &__voted {
+ padding: 0 5px;
+ display: inline-block;
+
+ &__mark {
+ font-size: 18px;
+ }
+ }
+
+ &__footer {
+ padding-top: 6px;
+ padding-bottom: 5px;
+ color: var(--color-text-tertiary);
+ }
+
+ &__link {
+ display: inline;
+ background: transparent;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ color: var(--color-text-tertiary);
+ text-decoration: underline;
+ font-size: inherit;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &:active,
+ &:focus {
+ background-color: var(--color-bg-secondary);
+ }
+ }
+
+ .button {
+ height: 36px;
+ padding: 0 16px;
+ margin-inline-end: 10px;
+ font-size: 14px;
+ }
+}
+
+.muted .poll {
+ color: var(--color-text-tertiary);
+
+ &__chart {
+ background: rgb(from var(--color-text-brand) r g b / 40%);
+
+ &.leading {
+ background: rgb(from var(--color-text-brand) r g b / 60%);
+ }
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/reset.scss b/app/javascript/flavours/glitch/styles_new/mastodon/reset.scss
new file mode 100644
index 0000000000..3644b94cdf
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/reset.scss
@@ -0,0 +1,58 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+blockquote, q {
+ quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+html:has(body.custom-scrollbars) {
+ scrollbar-color: var(--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
new file mode 100644
index 0000000000..25342b560a
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/rich_text.scss
@@ -0,0 +1,151 @@
+.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/flavours/glitch/styles_new/mastodon/rtl.scss b/app/javascript/flavours/glitch/styles_new/mastodon/rtl.scss
new file mode 100644
index 0000000000..0a9ff38baf
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/rtl.scss
@@ -0,0 +1,89 @@
+@use 'variables' as *;
+
+body.rtl {
+ direction: rtl;
+
+ .reactions-bar {
+ direction: rtl;
+ }
+
+ .announcements__mastodon,
+ .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;
+ }
+
+ .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 {
+ 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);
+ }
+
+ .dismissable-banner,
+ .warning-banner {
+ &__action {
+ float: left;
+ }
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/tables.scss b/app/javascript/flavours/glitch/styles_new/mastodon/tables.scss
new file mode 100644
index 0000000000..8e303aff68
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/tables.scss
@@ -0,0 +1,375 @@
+@use 'variables' as *;
+
+.table {
+ width: 100%;
+ max-width: 100%;
+ border-spacing: 0;
+ border-collapse: collapse;
+
+ th,
+ td {
+ padding: 8px;
+ line-height: 18px;
+ vertical-align: top;
+ border-bottom: 1px solid var(--color-border-primary);
+ text-align: start;
+ background: var(--color-bg-primary);
+
+ &.critical {
+ font-weight: 700;
+ color: var(--color-text-warning);
+ }
+ }
+
+ & > thead > tr > th {
+ vertical-align: bottom;
+ font-weight: 500;
+ }
+
+ & > tbody > tr > th {
+ font-weight: 500;
+ }
+
+ & > tbody > tr:nth-child(odd) > td,
+ & > tbody > tr:nth-child(odd) > th {
+ background: var(--color-bg-primary);
+ }
+
+ & > tbody > tr:last-child > td,
+ & > tbody > tr:last-child > th {
+ border-bottom: 0;
+ }
+
+ a {
+ color: var(--color-text-secondary);
+ text-decoration: none;
+
+ &:hover {
+ color: var(--color-text-brand);
+ }
+ }
+
+ strong {
+ font-weight: 500;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+
+ &.inline-table {
+ & > tbody > tr:nth-child(odd) {
+ & > td,
+ & > th {
+ background: transparent;
+ }
+ }
+
+ & > tbody > tr:first-child {
+ & > td,
+ & > th {
+ border-top: 0;
+ }
+ }
+ }
+
+ &.horizontal-table {
+ border-collapse: collapse;
+ border-style: hidden;
+
+ & > tbody > tr > th,
+ & > tbody > tr > td {
+ padding: 11px 10px;
+ background: transparent;
+ border: 1px solid var(--color-border-primary);
+ color: var(--color-text-primary);
+ }
+
+ & > tbody > tr > th {
+ color: var(--color-text-secondary);
+ font-weight: 600;
+ }
+ }
+
+ &.batch-table {
+ & > thead > tr > th {
+ background: var(--color-bg-primary);
+ border-top: 1px solid var(--color-border-primary);
+ border-bottom: 1px solid var(--color-border-primary);
+
+ &:first-child {
+ border-radius: 4px 0 0;
+ border-inline-start: 1px solid var(--color-border-primary);
+ }
+
+ &:last-child {
+ border-radius: 0 4px 0 0;
+ border-inline-end: 1px solid var(--color-border-primary);
+ }
+ }
+ }
+
+ &--invites tbody td {
+ vertical-align: middle;
+ }
+}
+
+.table-wrapper {
+ overflow: auto;
+ margin-bottom: 20px;
+}
+
+samp {
+ font-family: $font-monospace, monospace;
+}
+
+button.table-action-link {
+ background: transparent;
+ border: 0;
+ font: inherit;
+}
+
+button.table-action-link,
+a.table-action-link {
+ text-decoration: none;
+ display: inline-block;
+ margin-inline-end: 5px;
+ padding: 0 10px;
+ color: var(--color-text-secondary);
+ font-weight: 500;
+ white-space: nowrap;
+
+ &:hover {
+ color: var(--color-text-brand);
+ }
+
+ &:first-child {
+ padding-inline-start: 0;
+ }
+}
+
+.batch-table {
+ &--no-toolbar {
+ .batch-table__toolbar {
+ position: static;
+ height: 4px;
+ border-bottom: none;
+ }
+ }
+
+ &__toolbar,
+ &__row {
+ display: flex;
+
+ &__select {
+ box-sizing: border-box;
+ padding: 8px 16px;
+ cursor: pointer;
+ min-height: 100%;
+
+ input {
+ margin-top: 8px;
+ }
+
+ &--aligned {
+ display: flex;
+ align-items: center;
+
+ input {
+ margin-top: 0;
+ }
+ }
+ }
+
+ &__actions,
+ &__content {
+ padding: 8px 0;
+ padding-inline-end: 16px;
+ flex: 1 1 auto;
+ }
+ }
+
+ &__toolbar {
+ position: sticky;
+ top: 0;
+ z-index: 200;
+ border: 1px solid var(--color-border-primary);
+ background: var(--color-bg-primary);
+ border-radius: 4px 4px 0 0;
+ height: 47px;
+ align-items: center;
+
+ &__actions {
+ text-align: end;
+ padding-inline-end: 16px - 5px;
+
+ .table-action-link {
+ padding: 0;
+ }
+ }
+ }
+
+ &__select-all {
+ background: var(--color-bg-primary);
+ height: 47px;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ color: var(--color-text-primary);
+ display: none;
+
+ &.active {
+ display: flex;
+ }
+
+ .selected,
+ .not-selected {
+ display: none;
+
+ &.active {
+ display: block;
+ }
+ }
+
+ strong {
+ font-weight: 700;
+ }
+
+ span {
+ padding: 8px;
+ display: inline-block;
+ }
+
+ button {
+ background: transparent;
+ border: 0;
+ font: inherit;
+ color: var(--color-text-brand);
+ border-radius: 4px;
+ font-weight: 700;
+ padding: 8px;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: var(--color-bg-secondary);
+ }
+ }
+ }
+
+ &__form {
+ padding: 16px;
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ background: var(--color-bg-primary);
+
+ .fields-row {
+ padding-top: 0;
+ margin-bottom: 0;
+ }
+ }
+
+ &__row {
+ border: 1px solid var(--color-border-primary);
+ border-top: 0;
+ background: var(--color-bg-primary);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ .optional &:first-child {
+ border-top: 1px solid var(--color-border-primary);
+ }
+ }
+
+ &:last-child {
+ border-radius: 0 0 4px 4px;
+ }
+
+ &__content {
+ padding-top: 12px;
+ padding-bottom: 16px;
+ overflow: hidden;
+
+ &--unpadded {
+ padding: 0;
+ }
+
+ &--padded {
+ padding: 12px 16px 16px;
+ }
+
+ &--with-image {
+ display: flex;
+ align-items: center;
+ }
+
+ &__image {
+ flex: 0 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-inline-end: 10px;
+
+ .emojione {
+ width: 32px;
+ height: 32px;
+ }
+ }
+
+ &__text {
+ flex: 1 1 auto;
+ }
+
+ &__quote {
+ padding: 12px;
+ padding-top: 0;
+ }
+
+ &__extra {
+ flex: 0 0 auto;
+ text-align: end;
+ color: var(--color-text-secondary);
+ font-weight: 500;
+ }
+ }
+
+ .directory__tag {
+ margin: 0;
+ width: 100%;
+
+ a {
+ background: transparent;
+ border-radius: 0;
+ }
+ }
+ }
+
+ &.optional .batch-table__toolbar,
+ &.optional .batch-table__row__select {
+ @media screen and (max-width: $no-gap-breakpoint) {
+ display: none;
+ }
+ }
+
+ // Reset the status card to not have borders, background or padding when
+ // inline in the table of statuses
+ .batch-table__row__content > .status__card {
+ border: none;
+ background: none;
+ padding: 0;
+ }
+
+ @media screen and (width <= 870px) {
+ .accounts-table tbody td.optional {
+ display: none;
+ }
+ }
+}
+
+.one-liner {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/widgets.scss b/app/javascript/flavours/glitch/styles_new/mastodon/widgets.scss
new file mode 100644
index 0000000000..69c79cd1e6
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles_new/mastodon/widgets.scss
@@ -0,0 +1,178 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+.directory {
+ &__tag {
+ box-sizing: border-box;
+ margin-bottom: 10px;
+
+ & > a,
+ & > div {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border: 1px solid var(--color-border-primary);
+ border-radius: 4px;
+ padding: 15px;
+ text-decoration: none;
+ color: inherit;
+ box-shadow: 0 0 15px var(--color-shadow-primary);
+ }
+
+ & > a {
+ &:hover,
+ &:active,
+ &:focus {
+ background: var(--color-bg-primary);
+ }
+ }
+
+ &.active > a {
+ background: var(--color-bg-brand-base);
+ cursor: default;
+ }
+
+ &.disabled > div {
+ opacity: 0.5;
+ cursor: default;
+ }
+
+ h4 {
+ flex: 1 1 auto;
+ font-size: 18px;
+ font-weight: 700;
+ color: var(--color-text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ small {
+ display: block;
+ font-weight: 400;
+ font-size: 15px;
+ margin-top: 8px;
+ color: var(--color-text-secondary);
+ }
+ }
+
+ &.active h4 {
+ &,
+ small,
+ .trends__item__current {
+ color: var(--color-text-primary);
+ }
+ }
+
+ .avatar-stack {
+ flex: 0 0 auto;
+ width: (36px + 4px) * 3;
+ }
+
+ &.active .avatar-stack .account__avatar {
+ border-color: var(--color-text-brand);
+ }
+
+ .trends__item__current {
+ padding-inline-end: 0;
+ }
+ }
+}
+
+.accounts-table {
+ width: 100%;
+
+ .account {
+ max-width: calc(56px + 30ch);
+ padding: 0;
+ border: 0;
+ }
+
+ strong {
+ font-weight: 700;
+ }
+
+ thead th {
+ text-align: center;
+ text-transform: uppercase;
+ color: var(--color-text-secondary);
+ font-weight: 700;
+ padding: 10px;
+
+ &:first-child {
+ text-align: start;
+ }
+ }
+
+ tbody td {
+ padding: 15px 0;
+ vertical-align: middle;
+ border-bottom: 1px solid var(--color-border-primary);
+ }
+
+ tbody tr:last-child td {
+ border-bottom: 0;
+ }
+
+ &__count {
+ width: 120px;
+ text-align: center;
+ font-size: 15px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+
+ small {
+ display: block;
+ color: var(--color-text-secondary);
+ font-weight: 400;
+ font-size: 14px;
+ }
+ }
+
+ tbody td.accounts-table__extra {
+ width: 120px;
+ text-align: end;
+ color: var(--color-text-secondary);
+ padding-inline-end: 16px;
+
+ a {
+ text-decoration: none;
+ color: inherit;
+
+ &:focus,
+ &:hover,
+ &:active {
+ color: var(--color-text-brand);
+ }
+ }
+ }
+
+ &__comment {
+ width: 50%;
+ vertical-align: initial !important;
+ }
+
+ tbody td.accounts-table__interrelationships {
+ width: 21px;
+ padding-inline-end: 16px;
+ }
+
+ .icon {
+ &.active {
+ color: var(--color-text-brand);
+ }
+
+ &.passive {
+ color: var(--color-text-warning);
+ }
+
+ &.active.passive {
+ color: var(--color-text-success);
+ }
+ }
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ tbody td.optional {
+ display: none;
+ }
+ }
+}
diff --git a/app/javascript/skins/glitch/contrast_new/common.scss b/app/javascript/skins/glitch/contrast_new/common.scss
new file mode 100644
index 0000000000..7389e70a18
--- /dev/null
+++ b/app/javascript/skins/glitch/contrast_new/common.scss
@@ -0,0 +1 @@
+@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
new file mode 100644
index 0000000000..061e1d5c7f
--- /dev/null
+++ b/app/javascript/skins/glitch/contrast_new/names.yml
@@ -0,0 +1,4 @@
+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
new file mode 100644
index 0000000000..187e12c0b6
--- /dev/null
+++ b/app/javascript/skins/glitch/default_new/common.scss
@@ -0,0 +1 @@
+@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
new file mode 100644
index 0000000000..e947dbdddf
--- /dev/null
+++ b/app/javascript/skins/glitch/default_new/names.yml
@@ -0,0 +1,4 @@
+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
new file mode 100644
index 0000000000..73abfe2b95
--- /dev/null
+++ b/app/javascript/skins/glitch/mastodon-light_new/common.scss
@@ -0,0 +1 @@
+@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
new file mode 100644
index 0000000000..cd29903332
--- /dev/null
+++ b/app/javascript/skins/glitch/mastodon-light_new/names.yml
@@ -0,0 +1,4 @@
+en:
+ skins:
+ glitch:
+ mastodon-light_new: Experimental Mastodon (light)
diff --git a/stylelint.config.js b/stylelint.config.js
index 67a59cdac9..202c23321b 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -4,6 +4,7 @@ module.exports = {
'app/javascript/styles/mastodon/reset.scss',
'app/javascript/styles_new/mastodon/reset.scss',
'app/javascript/flavours/glitch/styles/reset.scss',
+ 'app/javascript/flavours/glitch/styles_new/mastodon/reset.scss',
'app/javascript/styles/win95.scss',
'coverage/**/*',
'node_modules/**/*',