diff --git a/app/javascript/flavours/glitch/styles/_functions.scss b/app/javascript/flavours/glitch/styles/_functions.scss
deleted file mode 100644
index a9911edb9d..0000000000
--- a/app/javascript/flavours/glitch/styles/_functions.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use 'sass:color';
-@use 'sass:string';
-@use 'sass:meta';
-
-$darken-multiplier: -1 !default;
-$lighten-multiplier: 1 !default;
-
-// Invert darkened and lightened colors
-@function darken($color, $amount) {
- @return color.adjust(
- $color,
- $lightness: $amount * $darken-multiplier,
- $space: hsl
- );
-}
-
-@function lighten($color, $amount) {
- @return color.adjust(
- $color,
- $lightness: $amount * $lighten-multiplier,
- $space: hsl
- );
-}
-
-@function hex-color($color) {
- @if meta.type-of($color) == 'color' {
- $color: string.slice(color.ie-hex-str($color), 4);
- }
-
- @return '%23' + string.unquote($color);
-}
diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss
deleted file mode 100644
index c1545d50cd..0000000000
--- a/app/javascript/flavours/glitch/styles/_mixins.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@use 'sass:color';
-@use 'variables' as *;
-
-@mixin fullwidth-gallery {
- &.full-width {
- margin-left: -14px;
- margin-right: -14px;
- width: inherit;
- max-width: none;
- border-radius: 0;
- }
-}
-
-@mixin search-input {
- outline: 0;
- box-sizing: border-box;
- width: 100%;
- box-shadow: none;
- font-family: inherit;
- background: var(--input-background-color);
- color: $darker-text-color;
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
- font-size: 17px;
- line-height: normal;
- margin: 0;
-}
-
-@mixin search-popout {
- background: $simple-background-color;
- border-radius: 4px;
- padding: 10px 14px;
- padding-bottom: 14px;
- margin-top: 10px;
- color: $light-text-color;
- box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4);
-
- h4 {
- text-transform: uppercase;
- color: $light-text-color;
- font-size: 13px;
- font-weight: 500;
- margin-bottom: 10px;
- }
-
- li {
- padding: 4px 0;
- }
-
- ul {
- margin-bottom: 10px;
- }
-
- em {
- font-weight: 500;
- color: $inverted-text-color;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/_variables.scss b/app/javascript/flavours/glitch/styles/_variables.scss
deleted file mode 100644
index 816a9d9998..0000000000
--- a/app/javascript/flavours/glitch/styles/_variables.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-@use 'sass:color';
-@use 'functions' as *;
-
-// Commonly used web colors
-$black: #000; // Black
-$white: #fff; // White
-$red-600: #b7253d !default; // Deep Carmine
-$red-500: #df405a !default; // Cerise
-$blurple-600: #563acc; // Iris
-$blurple-500: #6364ff; // Brand purple
-$blurple-400: #7477fd; // Medium slate blue
-$blurple-300: #858afa; // Faded Blue
-$grey-600: hsl(240deg, 8%, 33%); // Trout
-$grey-100: hsl(240deg, 51%, 90%); // Topaz
-
-$success-green: #79bd9a !default; // Padua
-$error-red: $red-500 !default; // Cerise
-$warning-red: #ff5050 !default; // Sunset Orange
-$gold-star: #ca8f04 !default; // Dark Goldenrod
-
-$red-bookmark: $warning-red;
-
-// Values from the classic Mastodon UI
-$classic-base-color: hsl(240deg, 16%, 19%);
-$classic-primary-color: hsl(240deg, 29%, 70%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
-$classic-highlight-color: $blurple-500;
-
-// Variables for defaults in UI
-$base-shadow-color: $black !default;
-$base-overlay-background: $black !default;
-$base-border-color: $white !default;
-$simple-background-color: $white !default;
-$valid-value-color: $success-green !default;
-$error-value-color: $error-red !default;
-
-// Tell UI to use selected colors
-$ui-base-color: $classic-base-color !default; // Darkest
-$ui-base-lighter-color: lighten(
- $ui-base-color,
- 26%
-) !default; // Lighter darkest
-$ui-primary-color: $classic-primary-color !default; // Lighter
-$ui-secondary-color: $classic-secondary-color !default; // Lightest
-$ui-highlight-color: $classic-highlight-color !default;
-$ui-button-color: $white !default;
-$ui-button-background-color: $blurple-500 !default;
-$ui-button-focus-background-color: $blurple-600 !default;
-$ui-button-focus-outline-color: $blurple-400 !default;
-$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
-
-$ui-button-disabled-color: color.adjust(
- $ui-button-background-color,
- $alpha: -0.3
-) !default;
-
-$ui-button-secondary-color: $blurple-500 !default;
-$ui-button-secondary-border-color: $blurple-500 !default;
-$ui-button-secondary-focus-border-color: $blurple-300 !default;
-$ui-button-secondary-focus-color: $blurple-300 !default;
-
-$ui-button-tertiary-color: $blurple-300 !default;
-$ui-button-tertiary-border-color: $blurple-300 !default;
-$ui-button-tertiary-focus-background-color: $blurple-600 !default;
-$ui-button-tertiary-focus-color: $white !default;
-
-$ui-button-destructive-background-color: $red-500 !default;
-$ui-button-destructive-focus-background-color: $red-600 !default;
-
-$ui-button-icon-focus-outline: $ui-button-focus-outline !default;
-$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
-
-// Variables for texts
-$primary-text-color: $white !default;
-$darker-text-color: $ui-primary-color !default;
-$dark-text-color: $ui-base-lighter-color !default;
-$secondary-text-color: $ui-secondary-color !default;
-$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
-$action-button-color: $ui-base-lighter-color !default;
-$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
-$passive-text-color: $gold-star !default;
-$active-passive-text-color: $success-green !default;
-
-// For texts on inverted backgrounds
-$inverted-text-color: $ui-base-color !default;
-$lighter-text-color: $ui-base-lighter-color !default;
-$light-text-color: $ui-primary-color !default;
-
-// Keep this filter a SCSS variable rather than
-// a CSS Custom Property due to this Safari bug:
-// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
-$backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
-
-// Language codes that uses CJK fonts
-$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
-
-// Variables for components
-$media-modal-media-max-width: 100%;
-
-// put margins on top and bottom of image to avoid the screen covered by image.
-$media-modal-media-max-height: 80%;
-
-$no-gap-breakpoint: 1175px;
-$mobile-menu-breakpoint: 760px;
-$mobile-breakpoint: 630px;
-$no-columns-breakpoint: 600px;
-
-$font-sans-serif: 'mastodon-font-sans-serif' !default;
-$font-display: 'mastodon-font-display' !default;
-$font-monospace: 'mastodon-font-monospace' !default;
-
-$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
- 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
- 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
- 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
deleted file mode 100644
index ba0605b79e..0000000000
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@use 'variables' as *;
-@use 'functions' as *;
-
-$maximum-width: 1235px;
-$fluid-breakpoint: $maximum-width + 20px;
-
-.container {
- box-sizing: border-box;
- max-width: $maximum-width;
- margin: 0 auto;
- position: relative;
-
- @media screen and (max-width: $fluid-breakpoint) {
- width: 100%;
- padding: 0 10px;
- }
-}
-
-.brand {
- position: relative;
- text-decoration: none;
-}
-
-.rules-list {
- font-size: 15px;
- line-height: 22px;
- counter-reset: list-counter;
-
- li {
- position: relative;
- border-bottom: 1px solid var(--background-border-color);
- padding: 1em 1.75em;
- padding-inline-start: 3em;
- font-weight: 500;
- counter-increment: list-counter;
- min-height: 4ch;
-
- button {
- background: transparent;
- border: 0;
- padding: 0;
- margin: 0;
- text-align: start;
- font: inherit;
-
- &:hover,
- &:focus,
- &:active {
- background: transparent;
- }
-
- &[aria-expanded='false'] .rules-list__hint {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-
- @supports (-webkit-line-clamp: 2) {
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- white-space: normal;
- }
- }
- }
-
- &::before {
- content: counter(list-counter);
- position: absolute;
- inset-inline-start: 0;
- top: 1em;
- background: $highlight-text-color;
- color: $ui-base-color;
- border-radius: 50%;
- width: 4ch;
- height: 4ch;
- font-weight: 500;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- &:last-child {
- border-bottom: 0;
- }
- }
-
- &__text {
- color: $primary-text-color;
- }
-
- &__hint {
- font-size: 14px;
- font-weight: 400;
- color: $darker-text-color;
- }
-}
-
-.rules-languages {
- display: flex;
- gap: 1rem;
- align-items: center;
- position: relative;
-
- > label {
- font-size: 14px;
- font-weight: 600;
- color: $primary-text-color;
- }
-
- > select {
- appearance: none;
- box-sizing: border-box;
- font-size: 14px;
- color: $primary-text-color;
- display: block;
- width: 100%;
- outline: 0;
- font-family: inherit;
- resize: vertical;
- background: $ui-base-color;
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- padding-inline-start: 10px;
- padding-inline-end: 30px;
- height: 41px;
-
- @media screen and (width <= 600px) {
- font-size: 16px;
- }
- }
-
- &::after {
- display: block;
- position: absolute;
- width: 15px;
- height: 15px;
- content: '';
- mask: url("data:image/svg+xml;utf8,")
- no-repeat 50% 50%;
- mask-size: contain;
- right: 8px;
- background-color: lighten($ui-base-color, 12%);
- pointer-events: none;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss
deleted file mode 100644
index a80019925f..0000000000
--- a/app/javascript/flavours/glitch/styles/accessibility.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@use 'variables' as *;
-
-%emoji-color-inversion {
- filter: invert(1);
-}
-
-.emojione {
- @each $emoji in $emojis-requiring-inversion {
- &[title=':#{$emoji}:'] {
- @extend %emoji-color-inversion;
- }
- }
-}
-
-.hicolor-privacy-icons {
- .status__visibility-icon.icon-globe,
- .privacy-dropdown__option .icon-globe {
- color: #1976d2;
- }
-
- .status__visibility-icon.icon-unlock,
- .privacy-dropdown__option .icon-unlock {
- color: #388e3c;
- }
-
- .status__visibility-icon.icon-lock,
- .privacy-dropdown__option .icon-lock {
- color: #ffa000;
- }
-
- .status__visibility-icon.icon-envelope,
- .privacy-dropdown__option .icon-envelope {
- color: #d32f2f;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss
deleted file mode 100644
index 30cc670253..0000000000
--- a/app/javascript/flavours/glitch/styles/accounts.scss
+++ /dev/null
@@ -1,411 +0,0 @@
-@use 'sass:color';
-@use 'variables' as *;
-@use 'functions' as *;
-
-.card {
- & > a {
- display: block;
- text-decoration: none;
- color: inherit;
- overflow: hidden;
- border-radius: 4px;
-
- &:hover,
- &:active,
- &:focus {
- .card__bar {
- background: $ui-base-color;
- }
- }
- }
-
- &__img {
- height: 130px;
- position: relative;
- background: $ui-base-color;
- border: 1px solid var(--background-border-color);
- border-bottom: none;
-
- img {
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- object-fit: cover;
- }
-
- @media screen and (width <= 600px) {
- height: 200px;
- }
- }
-
- &__bar {
- position: relative;
- padding: 15px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- background: var(--background-color);
- border: 1px solid var(--background-border-color);
- border-top: none;
-
- .avatar {
- flex: 0 0 auto;
- width: 48px;
- height: 48px;
- padding-top: 2px;
-
- img {
- width: 100%;
- height: 100%;
- display: block;
- margin: 0;
- border-radius: 4px;
- background: darken($ui-base-color, 8%);
- object-fit: cover;
- }
- }
-
- .display-name {
- margin-inline-start: 15px;
- text-align: start;
-
- svg[data-hidden] {
- display: none;
- }
-
- strong {
- font-size: 15px;
- color: $primary-text-color;
- font-weight: 500;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- span {
- display: block;
- font-size: 14px;
- color: $darker-text-color;
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
-}
-
-.pagination {
- padding: 30px 0;
- text-align: center;
- overflow: hidden;
-
- a,
- .current,
- .newer,
- .older,
- .page,
- .gap {
- font-size: 14px;
- color: $primary-text-color;
- font-weight: 500;
- display: inline-block;
- padding: 6px 10px;
- text-decoration: none;
- }
-
- .current {
- background: $simple-background-color;
- border-radius: 100px;
- color: $inverted-text-color;
- cursor: default;
- margin: 0 10px;
- }
-
- .gap {
- cursor: default;
- }
-
- .older,
- .newer {
- text-transform: uppercase;
- color: $secondary-text-color;
- }
-
- .older {
- float: left;
- padding-inline-start: 0;
- }
-
- .newer {
- float: right;
- padding-inline-end: 0;
- }
-
- .disabled {
- cursor: default;
- color: lighten($inverted-text-color, 10%);
- }
-
- @media screen and (width <= 700px) {
- padding: 30px 20px;
-
- .page {
- display: none;
- }
-
- .newer,
- .older {
- display: inline-block;
- }
- }
-}
-
-.nothing-here {
- background: $ui-base-color;
- box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
- color: $darker-text-color;
- font-size: 14px;
- font-weight: 500;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: default;
- border-radius: 4px;
- padding: 20px;
- min-height: 30vh;
-
- &--under-tabs {
- border-radius: 0 0 4px 4px;
- }
-
- &--flexible {
- box-sizing: border-box;
- min-height: 100%;
- }
-}
-
-.information-badge,
-.simple_form .overridden,
-.simple_form .recommended,
-.simple_form .not_recommended,
-.simple_form .glitch_only {
- display: inline-block;
- padding: 4px 6px;
- cursor: default;
- border-radius: 4px;
- font-size: 12px;
- line-height: 12px;
- font-weight: 500;
- color: $ui-secondary-color;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-}
-
-.information-badge,
-.simple_form .overridden,
-.simple_form .recommended,
-.simple_form .not_recommended {
- background-color: color.change($ui-secondary-color, $alpha: 0.1);
- border: 1px solid color.change($ui-secondary-color, $alpha: 0.5);
-}
-
-.account-role {
- display: inline-flex;
- padding: 4px;
- padding-inline-end: 8px;
- border: 1px solid $highlight-text-color;
- color: $highlight-text-color;
- font-weight: 500;
- font-size: 12px;
- letter-spacing: 0.5px;
- line-height: 16px;
- gap: 4px;
- border-radius: 6px;
- align-items: center;
-
- svg {
- width: auto;
- height: 15px;
- opacity: 0.85;
- fill: currentColor;
- }
-
- &__domain {
- font-weight: 400;
- opacity: 0.75;
- letter-spacing: 0;
- }
-}
-
-.information-badge {
- &.superapp {
- color: $success-green;
- background-color: color.change($success-green, $alpha: 0.1);
- border-color: color.change($success-green, $alpha: 0.5);
- }
-}
-
-.simple_form .not_recommended {
- color: lighten($error-red, 12%);
- background-color: rgba(lighten($error-red, 12%), 0.1);
- border-color: rgba(lighten($error-red, 12%), 0.5);
-}
-
-.simple_form .glitch_only {
- color: lighten($warning-red, 12%);
- background-color: rgba(lighten($warning-red, 12%), 0.1);
- border-color: rgba(lighten($warning-red, 12%), 0.5);
-}
-
-.account__header__fields {
- max-width: 100vw;
- padding: 0;
- margin: 15px -15px -15px;
- border: 0 none;
- border-top: 1px solid lighten($ui-base-color, 12%);
- border-bottom: 1px solid lighten($ui-base-color, 12%);
- font-size: 14px;
- line-height: 20px;
-
- dl {
- display: flex;
- border-bottom: 1px solid lighten($ui-base-color, 12%);
- }
-
- dt,
- dd {
- box-sizing: border-box;
- padding: 14px;
- text-align: center;
- max-height: 48px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- dt {
- font-weight: 500;
- width: 120px;
- flex: 0 0 auto;
- color: $secondary-text-color;
- background: rgba(darken($ui-base-color, 8%), 0.5);
- }
-
- dd {
- flex: 1 1 auto;
- color: $darker-text-color;
- }
-
- a {
- color: $highlight-text-color;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
-
- .verified {
- border: 1px solid color.change($valid-value-color, $alpha: 0.5);
- background: color.change($valid-value-color, $alpha: 0.25);
-
- a {
- color: $valid-value-color;
- font-weight: 500;
- }
-
- &__mark {
- color: $valid-value-color;
- }
- }
-
- dl:last-child {
- border-bottom: 0;
- }
-}
-
-.directory__tag .trends__item__current {
- width: auto;
-}
-
-.pending-account {
- &__header {
- color: $darker-text-color;
-
- a {
- color: $ui-secondary-color;
- text-decoration: none;
-
- &:hover,
- &:active,
- &:focus {
- text-decoration: underline;
- }
- }
-
- strong {
- color: $primary-text-color;
- font-weight: 700;
- }
-
- .warning-hint {
- font-weight: normal !important;
- }
- }
-
- &__body {
- margin-top: 10px;
- }
-}
-
-.batch-table__row--muted {
- color: lighten($ui-base-color, 26%);
-}
-
-.batch-table__row--muted .pending-account__header,
-.batch-table__row--muted .accounts-table,
-.batch-table__row--muted .name-tag {
- &,
- a,
- strong {
- color: lighten($ui-base-color, 26%);
- }
-}
-
-.batch-table__row--muted .name-tag .avatar {
- opacity: 0.5;
-}
-
-.batch-table__row--muted .accounts-table {
- tbody td.accounts-table__extra,
- &__count,
- &__count small {
- color: lighten($ui-base-color, 26%);
- }
-}
-
-.batch-table__row--attention {
- color: $gold-star;
-}
-
-.batch-table__row--attention .pending-account__header,
-.batch-table__row--attention .accounts-table,
-.batch-table__row--attention .name-tag {
- &,
- a,
- strong {
- color: $gold-star;
- }
-}
-
-.batch-table__row--attention .accounts-table {
- tbody td.accounts-table__extra,
- &__count,
- &__count small {
- color: $gold-star;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
deleted file mode 100644
index 4dfdb9e00b..0000000000
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ /dev/null
@@ -1,2204 +0,0 @@
-@use 'sass:color';
-@use 'sass:math';
-@use 'functions' as *;
-@use 'variables' as *;
-
-$no-columns-breakpoint: 890px;
-$sidebar-width: 300px;
-$content-width: 840px;
-
-.admin-wrapper {
- display: flex;
- justify-content: center;
- box-sizing: border-box;
- width: 100%;
- min-height: 100vh;
- min-height: 100dvh;
- padding: env(safe-area-inset-top) env(safe-area-inset-right)
- env(safe-area-inset-bottom) env(safe-area-inset-left);
-
- .icon {
- width: 16px;
- height: 16px;
- vertical-align: top;
- margin: 0 2px;
- }
-
- .sidebar-wrapper {
- min-height: 100vh;
- min-height: 100dvh;
- overflow: hidden;
- pointer-events: none;
- flex: 1 1 auto;
-
- &__inner {
- display: flex;
- justify-content: flex-end;
- background: var(--background-color);
- height: 100%;
- }
- }
-
- .sidebar {
- width: $sidebar-width;
- padding: 0;
- pointer-events: auto;
-
- &__toggle {
- display: none;
- background: var(--background-color);
- border-bottom: 1px solid lighten($ui-base-color, 4%);
- align-items: center;
-
- &__logo {
- flex: 1 1 auto;
-
- a {
- display: block;
- padding: 15px;
- }
- }
-
- &__icon {
- display: block;
- color: $darker-text-color;
- text-decoration: none;
- flex: 0 0 auto;
- font-size: 18px;
- padding: 10px;
- margin: 5px 10px;
- border-radius: 4px;
-
- &:focus {
- background: $ui-base-color;
- }
-
- .material-close {
- display: none;
- }
-
- &.active {
- .material-close {
- display: block;
- }
-
- .material-menu {
- display: none;
- }
- }
- }
- }
-
- .logo {
- display: block;
- margin: 40px auto;
- width: 100px;
- height: 100px;
- }
-
- .logo--wordmark {
- display: inherit;
- margin: inherit;
- width: inherit;
- height: 25px;
- }
-
- @media screen and (max-width: $no-columns-breakpoint) {
- & > a:first-child {
- display: none;
- }
- }
-
- ul {
- list-style: none;
- overflow: hidden;
- margin-bottom: 20px;
-
- @media screen and (max-width: $no-columns-breakpoint) {
- margin-bottom: 0;
- }
-
- a {
- font-size: 14px;
- display: flex;
- align-items: center;
- gap: 6px;
- padding: 15px;
- color: $darker-text-color;
- text-decoration: none;
- transition: all 200ms linear;
- transition-property: color, background-color;
-
- &:hover {
- color: $primary-text-color;
- transition: all 100ms linear;
- transition-property: color, background-color;
- }
- }
-
- ul {
- background: var(--background-color);
- margin: 0;
-
- a {
- border: 0;
- padding: 15px 35px;
- }
- }
-
- .warning a {
- color: $gold-star;
- font-weight: 700;
- }
-
- .simple-navigation-active-leaf a {
- color: $highlight-text-color;
- border-bottom: 0;
- }
- }
- }
-
- .content-wrapper {
- box-sizing: border-box;
- width: 100%;
- max-width: $content-width;
- flex: 1 1 auto;
- }
-
- @media screen and (max-width: ($content-width + $sidebar-width)) {
- .sidebar-wrapper--empty {
- display: none;
- }
-
- .sidebar-wrapper {
- width: $sidebar-width;
- flex: 0 0 auto;
- }
- }
-
- @media screen and (max-width: $no-columns-breakpoint) {
- .sidebar-wrapper {
- width: 100%;
- }
- }
-
- .content {
- padding-top: 55px;
- padding-bottom: 20px;
- padding-inline-start: 25px;
- padding-inline-end: 15px;
-
- @media screen and (max-width: $no-columns-breakpoint) {
- max-width: none;
- padding: 15px;
- padding-top: 30px;
- }
-
- &__heading {
- margin-bottom: 45px;
-
- &__row {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: space-between;
- margin-top: -15px;
- margin-inline-end: -15px;
-
- & > * {
- margin-top: 15px;
- margin-inline-end: 15px;
- }
- }
-
- &__tabs {
- margin-top: 30px;
- width: 100%;
-
- & > div {
- display: flex;
- flex-wrap: wrap;
- gap: 5px;
- }
-
- a {
- font-size: 14px;
- display: inline-flex;
- align-items: center;
- padding: 7px 10px;
- border-radius: 4px;
- color: $darker-text-color;
- text-decoration: none;
- font-weight: 500;
- gap: 5px;
- white-space: nowrap;
-
- @media screen and (max-width: $mobile-breakpoint) {
- flex: 1 0 50%;
- }
-
- &:hover,
- &:focus,
- &:active {
- background: lighten($ui-base-color, 4%);
- }
-
- &.selected {
- font-weight: 700;
- color: $primary-text-color;
- background: $ui-highlight-color;
- }
- }
- }
-
- &__actions {
- display: inline-flex;
- flex-flow: wrap;
- gap: 5px;
- align-items: center;
-
- .time-period {
- padding: 0 10px;
- }
-
- .back-link {
- margin-bottom: 0;
- }
- }
-
- h2 small {
- font-size: 12px;
- display: block;
- font-weight: 500;
- color: $darker-text-color;
- line-height: 18px;
- }
-
- @media screen and (max-width: $no-columns-breakpoint) {
- border-bottom: 0;
- padding-bottom: 0;
- }
- }
-
- h2 {
- color: $secondary-text-color;
- font-size: 24px;
- line-height: 36px;
- font-weight: 700;
- }
-
- h3 {
- color: $secondary-text-color;
- font-size: 20px;
- line-height: 28px;
- font-weight: 400;
- margin-bottom: 30px;
- }
-
- h4 {
- text-transform: uppercase;
- font-size: 13px;
- font-weight: 700;
- color: $darker-text-color;
- padding-top: 24px;
- margin-bottom: 8px;
- border-top: 1px solid var(--background-border-color);
- }
-
- h6 {
- font-size: 16px;
- color: $secondary-text-color;
- line-height: 28px;
- font-weight: 500;
- }
-
- .fields-group h6 {
- color: $primary-text-color;
- font-weight: 500;
- }
-
- .directory__tag > a,
- .directory__tag > div {
- box-shadow: none;
- }
-
- .directory__tag h4 {
- font-size: 18px;
- font-weight: 700;
- color: $primary-text-color;
- text-transform: none;
- padding-top: 0;
- margin-bottom: 0;
- border-top: 0;
-
- .comment {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-top: 4px;
-
- &.private-comment {
- display: block;
- color: $darker-text-color;
- }
-
- &.public-comment {
- display: block;
- color: $secondary-text-color;
- }
- }
- }
-
- & > p {
- font-size: 14px;
- line-height: 21px;
- color: $secondary-text-color;
- margin-bottom: 20px;
-
- strong {
- color: $primary-text-color;
- font-weight: 500;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
- }
-
- hr {
- width: 100%;
- height: 0;
- border: 0;
- border-bottom: 1px solid var(--background-border-color);
- margin: 20px 0;
-
- &.spacer {
- height: 1px;
- border: 0;
- }
- }
- }
-
- @media screen and (max-width: $no-columns-breakpoint) {
- display: block;
-
- .sidebar-wrapper {
- min-height: 0;
- }
-
- .sidebar {
- width: 100%;
- padding: 0;
- height: auto;
-
- &__toggle {
- display: flex;
- }
-
- & > ul {
- display: none;
-
- &.visible {
- display: block;
- position: fixed;
- z-index: 10;
- width: 100%;
- height: calc(100% - 56px);
- inset-inline-start: 0;
- bottom: 0;
- overflow-y: auto;
- background: var(--background-color);
- }
- }
-
- ul a,
- ul ul a {
- font-size: 16px;
- border-radius: 0;
- transition: none;
-
- &:hover {
- transition: none;
- }
- }
-
- ul ul {
- border-radius: 0;
- }
-
- ul .simple-navigation-active-leaf a {
- border-bottom-color: $ui-highlight-color;
- }
- }
- }
-}
-
-hr.spacer {
- width: 100%;
- border: 0;
- margin: 20px 0;
- height: 1px;
-}
-
-body,
-.admin-wrapper .content {
- .muted-hint {
- color: $darker-text-color;
-
- a {
- color: $highlight-text-color;
- }
- }
-
- .positive-hint,
- .negative-hint,
- .neutral-hint {
- a {
- color: inherit;
- text-decoration: underline;
-
- &:focus,
- &:hover,
- &:active {
- text-decoration: none;
- }
- }
- }
-
- .positive-hint {
- color: $valid-value-color;
- font-weight: 500;
- }
-
- .negative-hint {
- color: $error-value-color;
- font-weight: 500;
- }
-
- .neutral-hint {
- color: $dark-text-color;
- font-weight: 500;
- }
-
- .warning-hint {
- color: $gold-star;
- font-weight: 500;
- }
-}
-
-kbd {
- font-family: Courier, monospace;
- background-color: color.change($ui-secondary-color, $alpha: 0.1);
- padding: 4px;
- padding-bottom: 2px;
- border-radius: 5px;
-}
-
-.filters {
- display: flex;
- flex-wrap: wrap;
- gap: 40px;
-
- .filter-subset {
- flex: 0 0 auto;
- margin-bottom: 20px;
-
- &:last-child {
- margin-bottom: 30px;
- }
-
- ul {
- margin-top: 5px;
- list-style: none;
-
- li {
- display: inline-block;
- margin-inline-end: 5px;
- }
- }
-
- & > div {
- display: flex;
- gap: 5px;
- }
-
- strong {
- font-weight: 500;
- text-transform: uppercase;
- font-size: 12px;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-
- &--with-select strong {
- display: block;
- margin-bottom: 10px;
- }
-
- a {
- display: inline-block;
- color: $darker-text-color;
- text-decoration: none;
- text-transform: uppercase;
- font-size: 12px;
- font-weight: 500;
- border-bottom: 2px solid $ui-base-color;
-
- &:hover {
- color: $primary-text-color;
- border-bottom: 2px solid lighten($ui-base-color, 5%);
- }
-
- &.selected {
- color: $highlight-text-color;
- border-bottom: 2px solid $ui-highlight-color;
- }
- }
- }
-}
-
-.flavour-screen {
- display: block;
- margin: 10px auto;
- max-width: 100%;
-}
-
-.flavour-description {
- display: block;
- font-size: 16px;
- margin: 10px 0;
-
- & > p {
- margin: 10px 0;
- }
-}
-
-.report-accounts {
- display: flex;
- flex-wrap: wrap;
- margin-bottom: 20px;
-}
-
-.report-accounts__item {
- display: flex;
- flex: 250px;
- flex-direction: column;
- margin: 0 5px;
-
- & > strong {
- display: block;
- margin-top: 0;
- margin-bottom: 10px;
- margin-inline-end: 0;
- margin-inline-start: -5px;
- font-weight: 500;
- font-size: 14px;
- line-height: 18px;
- color: $secondary-text-color;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-
- .account-card {
- flex: 1 1 auto;
- }
-}
-
-.report-status,
-.account-status {
- display: flex;
- margin-bottom: 10px;
-}
-
-.report-status__actions,
-.account-status__actions {
- flex: 0 0 auto;
- display: flex;
- flex-direction: column;
-
- .icon-button {
- font-size: 24px;
- width: 24px;
- text-align: center;
- margin-bottom: 10px;
- }
-}
-
-.simple_form.new_report_note,
-.simple_form.new_account_moderation_note {
- max-width: 100%;
-}
-
-.batch-form-box {
- display: flex;
- flex-wrap: wrap;
- margin-bottom: 5px;
-
- #form_status_batch_action {
- margin-bottom: 5px;
- margin-inline-end: 5px;
- font-size: 14px;
- }
-
- input.button {
- margin-bottom: 5px;
- margin-inline-end: 5px;
- }
-}
-
-.back-link {
- margin-bottom: 10px;
- font-size: 14px;
-
- a {
- color: $highlight-text-color;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
-}
-
-.special-action-button,
-.back-link {
- text-align: end;
- flex: 1 1 auto;
-}
-
-.action-buttons {
- display: flex;
- overflow: hidden;
- justify-content: space-between;
-}
-
-.spacer {
- flex: 1 1 auto;
-}
-
-.log-entry {
- display: block;
- line-height: 20px;
- padding: 15px;
- padding-inline-start: 15px * 2 + 40px;
- background: var(--background-color);
- border-right: 1px solid var(--background-border-color);
- border-left: 1px solid var(--background-border-color);
- border-bottom: 1px solid var(--background-border-color);
- position: relative;
- text-decoration: none;
- color: $darker-text-color;
- font-size: 14px;
-
- &:first-child {
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
- border-top: 1px solid var(--background-border-color);
- }
-
- &:last-child {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- border-bottom: 1px solid var(--background-border-color);
- }
-
- &__avatar {
- position: absolute;
- inset-inline-start: 15px;
- top: 15px;
-
- .avatar {
- border-radius: var(--avatar-border-radius);
- width: 40px;
- height: 40px;
- }
- }
-
- &__title {
- overflow-wrap: break-word;
- }
-
- &__timestamp {
- color: $dark-text-color;
- }
-
- a,
- .username,
- .target {
- color: $secondary-text-color;
- text-decoration: none;
- font-weight: 500;
- }
-
- a {
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
-}
-
-.strike-entry {
- display: block;
- line-height: 20px;
- padding: 15px;
- padding-inline-start: 15px * 2 + 40px;
- background: var(--background-color);
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- position: relative;
- text-decoration: none;
- color: $darker-text-color;
- font-size: 14px;
- margin-bottom: 15px;
-
- &__avatar {
- position: absolute;
- inset-inline-start: 15px;
- top: 15px;
-
- .avatar {
- border-radius: var(--avatar-border-radius);
- width: 40px;
- height: 40px;
- }
- }
-
- &__title {
- overflow-wrap: break-word;
- }
-
- &__timestamp {
- color: $dark-text-color;
- }
-
- &:hover,
- &:focus,
- &:active {
- background: $ui-base-color;
- }
-}
-
-a.name-tag,
-.name-tag,
-a.inline-name-tag,
-.inline-name-tag {
- text-decoration: none;
- color: $secondary-text-color;
-
- &:hover {
- color: $highlight-text-color;
- }
-
- .username {
- font-weight: 500;
- }
-
- &.suspended {
- .username {
- text-decoration: line-through;
- color: lighten($error-red, 12%);
- }
-
- .avatar {
- filter: grayscale(100%);
- opacity: 0.8;
- }
- }
-}
-
-a.name-tag,
-.name-tag {
- display: inline-flex;
- align-items: center;
- vertical-align: top;
-
- .avatar {
- display: block;
- margin: 0;
- margin-inline-end: 5px;
- border-radius: 50%;
- }
-
- &.suspended {
- .avatar {
- filter: grayscale(100%);
- opacity: 0.8;
- }
- }
-}
-
-.speech-bubble {
- margin-bottom: 20px;
- border-inline-start: 4px solid $ui-highlight-color;
-
- &.positive {
- border-left-color: $success-green;
- }
-
- &.negative {
- border-left-color: lighten($error-red, 12%);
- }
-
- &.warning {
- border-left-color: $gold-star;
- }
-
- &__bubble {
- padding: 16px;
- padding-inline-start: 14px;
- font-size: 15px;
- line-height: 20px;
- border-radius: 4px 4px 4px 0;
- position: relative;
- font-weight: 500;
-
- a {
- color: $darker-text-color;
- }
- }
-
- &__owner {
- padding: 8px;
- padding-inline-start: 12px;
- }
-
- time {
- color: $dark-text-color;
- }
-}
-
-.report-card {
- background: var(--background-color);
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- margin-bottom: 20px;
-
- &__profile {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 15px;
-
- .account {
- padding: 0;
- border: none;
-
- &__avatar-wrapper {
- margin-inline-start: 0;
- }
- }
-
- &__stats {
- flex: 0 0 auto;
- font-weight: 500;
- color: $darker-text-color;
- text-transform: uppercase;
- text-align: end;
-
- a {
- color: inherit;
- text-decoration: none;
-
- &:focus,
- &:hover,
- &:active {
- color: $highlight-text-color;
- }
- }
-
- .red {
- color: $error-value-color;
- }
- }
- }
-
- &__summary {
- &__item {
- display: flex;
- justify-content: flex-start;
- border-top: 1px solid var(--background-border-color);
-
- &__reported-by,
- &__assigned {
- padding: 15px;
- flex: 0 0 auto;
- box-sizing: border-box;
- width: 150px;
- color: $darker-text-color;
-
- &,
- .username {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
-
- &__content {
- flex: 1 1 auto;
- max-width: calc(100% - 300px);
-
- &__icon {
- margin-inline-end: 4px;
- font-weight: 500;
- }
- }
-
- &__content a {
- display: block;
- box-sizing: border-box;
- width: 100%;
- padding: 15px;
- text-decoration: none;
- color: $darker-text-color;
-
- &:hover {
- color: $highlight-text-color;
- }
- }
- }
- }
-}
-
-.one-line {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.ellipsized-ip {
- display: inline-block;
- max-width: 120px;
- overflow: hidden;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.admin-account-bio {
- display: flex;
- flex-wrap: wrap;
- margin: 0 -5px;
- margin-top: 20px;
-
- > div {
- box-sizing: border-box;
- padding: 0 5px;
- margin-bottom: 10px;
- flex: 1 0 50%;
- max-width: 100%;
- }
-
- .account__header__fields,
- .account__header__content {
- background: var(--background-color);
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- height: 100%;
- }
-
- .account__header__fields {
- margin: 0;
- border: 1px solid var(--background-border-color);
-
- a {
- color: $highlight-text-color;
- }
-
- dl:first-child .verified {
- border-radius: 0 4px 0 0;
- }
-
- .verified a {
- color: $valid-value-color;
- }
- }
-
- .account__header__content {
- box-sizing: border-box;
- padding: 20px;
- color: $primary-text-color;
- }
-}
-
-.center-text {
- text-align: center;
-}
-
-.applications-list__item,
-.filters-list__item {
- padding: 15px 0;
- background: var(--background-color);
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- margin-top: 15px;
-}
-
-.user-role {
- color: var(--user-role-accent);
-}
-
-.applications-list {
- .icon {
- vertical-align: middle;
- }
-}
-
-.announcements-list,
-.filters-list {
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- border-bottom: none;
-
- &__item {
- padding: 15px 0;
- border-bottom: 1px solid var(--background-border-color);
-
- &__title {
- padding: 0 15px;
- display: block;
- font-weight: 500;
- font-size: 18px;
- line-height: 1.5;
- color: $secondary-text-color;
- text-decoration: none;
- margin-bottom: 10px;
-
- &:hover {
- color: $highlight-text-color;
- }
-
- .account-role {
- vertical-align: middle;
- }
- }
-
- .icon {
- vertical-align: middle;
- }
-
- a.announcements-list__item__title {
- &:hover,
- &:focus,
- &:active {
- color: $primary-text-color;
- }
- }
-
- &__action-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 8px;
-
- &:not(.no-wrap) {
- flex-wrap: wrap;
- }
- }
-
- &__meta {
- padding: 0 15px;
- color: $dark-text-color;
-
- a {
- color: inherit;
- text-decoration: underline;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
- }
-
- &__actions {
- margin-inline-start: auto;
- }
-
- &__permissions {
- margin-top: 10px;
- }
- }
-}
-
-.filters-list__item {
- &__title {
- display: flex;
- justify-content: space-between;
- margin-bottom: 0;
- overflow-wrap: anywhere;
- }
-
- &__permissions {
- margin-top: 0;
- margin-bottom: 10px;
- }
-
- .expiration {
- font-size: 13px;
- }
-
- &.expired {
- .expiration {
- color: lighten($error-red, 12%);
- }
-
- .permissions-list__item__icon {
- color: $dark-text-color;
- }
- }
-}
-
-.rule-actions {
- display: flex;
- flex-direction: column;
-
- a.table-action-link {
- padding-inline-start: 0;
- }
-}
-
-.dashboard__counters.admin-account-counters {
- margin-top: 10px;
-}
-
-.account-badges {
- margin: -2px 0;
-}
-
-.retention {
- overflow: auto;
-
- > h4 {
- position: sticky;
- inset-inline-start: 0;
- }
-
- &__table {
- &__number {
- color: var(--background-color);
- padding: 10px;
- }
-
- &__date {
- white-space: nowrap;
- padding: 10px 0;
- text-align: start;
- min-width: 120px;
-
- &.retention__table__average {
- font-weight: 700;
- }
- }
-
- &__size {
- text-align: center;
- padding: 10px;
- }
-
- &__label {
- font-weight: 700;
- color: $darker-text-color;
- }
-
- &__box {
- box-sizing: border-box;
- background: var(--background-color);
- padding: 10px;
- font-weight: 500;
- color: $primary-text-color;
- width: 52px;
- margin: 1px;
-
- @for $i from 0 through 10 {
- &--#{10 * $i} {
- background-color: rgba(
- $ui-highlight-color,
- 1 * (math.div(max(1, $i), 10))
- );
- }
- }
- }
- }
-}
-
-.sparkline {
- display: block;
- text-decoration: none;
- background: var(--background-color);
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
- padding: 0;
- position: relative;
- padding-bottom: 55px + 20px;
- overflow: hidden;
-
- &__value {
- display: flex;
- line-height: 33px;
- align-items: flex-end;
- padding: 20px;
- padding-bottom: 10px;
-
- &__total {
- display: block;
- margin-inline-end: 10px;
- font-weight: 500;
- font-size: 28px;
- color: $primary-text-color;
- }
-
- &__change {
- display: block;
- font-weight: 500;
- font-size: 18px;
- color: $darker-text-color;
- margin-bottom: -3px;
-
- &.positive {
- color: $valid-value-color;
- }
-
- &.negative {
- color: $error-value-color;
- }
- }
- }
-
- &__label {
- padding: 0 20px;
- padding-bottom: 10px;
- text-transform: uppercase;
- color: $darker-text-color;
- font-weight: 500;
- }
-
- &__graph {
- position: absolute;
- bottom: 0;
- width: 100%;
-
- svg {
- display: block;
- margin: 0;
- }
-
- path:first-child {
- fill: color.change($highlight-text-color, $alpha: 0.25) !important;
- fill-opacity: 1 !important;
- }
-
- path:last-child {
- stroke: lighten($highlight-text-color, 6%) !important;
- fill: none !important;
- }
- }
-}
-
-a.sparkline {
- &:hover,
- &:focus,
- &:active {
- background: $ui-base-color;
- }
-}
-
-.skeleton {
- background-color: var(--background-color);
- background-image: linear-gradient(
- 90deg,
- lighten($ui-base-color, 8%),
- lighten($ui-base-color, 12%),
- lighten($ui-base-color, 8%)
- );
- background-size: 200px 100%;
- background-repeat: no-repeat;
- border-radius: 4px;
- display: inline-block;
- line-height: 1;
- width: 100%;
- animation: skeleton 1.2s ease-in-out infinite;
-
- .reduce-motion & {
- animation: none;
- }
-}
-
-@keyframes skeleton {
- 0% {
- background-position: -200px 0;
- }
-
- 100% {
- background-position: calc(200px + 100%) 0;
- }
-}
-
-.dimension {
- table {
- width: 100%;
- }
-
- &__item {
- border-bottom: 1px solid lighten($ui-base-color, 4%);
-
- &__key {
- font-weight: 500;
- padding: 11px 10px;
- }
-
- &__value {
- text-align: end;
- color: $darker-text-color;
- padding: 11px 10px;
- }
-
- &__indicator {
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: $ui-highlight-color;
- margin-inline-end: 10px;
-
- @for $i from 0 through 10 {
- &--#{10 * $i} {
- background-color: rgba(
- $ui-highlight-color,
- 1 * (math.div(max(1, $i), 10))
- );
- }
- }
- }
-
- &:last-child {
- border-bottom: 0;
- }
-
- &.negative {
- color: $error-value-color;
- font-weight: 700;
-
- .dimension__item__value {
- color: $error-value-color;
- }
- }
- }
-}
-
-.report-reason-selector {
- border-radius: 4px;
- background: var(--background-color);
- margin-bottom: 20px;
-
- &__category {
- cursor: pointer;
- border-bottom: 1px solid darken($ui-base-color, 8%);
-
- &__label {
- padding: 15px;
- display: flex;
- gap: 8px;
- align-items: center;
- }
-
- &__rules {
- margin-inline-start: 30px;
- }
- }
-
- &__rule {
- cursor: pointer;
- padding: 15px;
- display: flex;
- gap: 8px;
- align-items: center;
- }
-}
-
-.report-header {
- display: grid;
- gap: 15px;
- grid-template-columns: minmax(0, 1fr) 300px;
-
- &__details {
- &__item {
- border-bottom: 1px solid var(--background-border-color);
- padding: 15px 0;
-
- &:last-child {
- border-bottom: 0;
- }
-
- &__header {
- font-weight: 600;
- padding: 4px 0;
- }
- }
-
- &--horizontal {
- display: grid;
- grid-auto-columns: minmax(0, 1fr);
- grid-auto-flow: column;
-
- .report-header__details__item {
- border-bottom: 0;
- }
- }
- }
-
- @media screen and (width <= 930px) {
- grid-template-columns: minmax(0, 1fr);
- }
-}
-
-.account-card {
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
- position: relative;
-
- &__warning-badge {
- position: absolute;
- padding: 4px 10px;
- top: 10px;
- inset-inline-start: 10px;
- border-radius: 4px;
- background:
- url('@/images/warning-stripes.svg') repeat-y left,
- url('@/images/warning-stripes.svg') repeat-y right,
- var(--background-color);
- }
-
- &__permalink {
- color: inherit;
- text-decoration: none;
- }
-
- &__header {
- padding: 4px;
- border-radius: 4px;
- height: 128px;
-
- img {
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- background: darken($ui-base-color, 8%);
- }
- }
-
- &__title {
- margin-top: -(15px + 8px);
- display: flex;
- align-items: flex-end;
-
- &__avatar {
- padding: 14px;
-
- img,
- .account__avatar {
- display: block;
- margin: 0;
- width: 56px;
- height: 56px;
- background-color: darken($ui-base-color, 8%);
- border-radius: 8px;
- border: 1px solid $ui-base-color;
- }
- }
-
- .display-name {
- color: $darker-text-color;
- padding-bottom: 15px;
- font-size: 15px;
- line-height: 20px;
-
- bdi {
- display: block;
- color: $primary-text-color;
- font-weight: 700;
- }
- }
- }
-
- &__bio {
- padding: 0 15px;
- margin: 8px 0;
- overflow: hidden;
- text-overflow: ellipsis;
- overflow-wrap: break-word;
- max-height: 21px * 2;
- position: relative;
- font-size: 15px;
- line-height: 21px;
-
- &::after {
- display: block;
- content: '';
- width: 50px;
- height: 21px;
- position: absolute;
- bottom: 0;
- inset-inline-end: 15px;
- pointer-events: none;
- }
-
- a {
- color: $secondary-text-color;
- text-decoration: none;
- unicode-bidi: isolate;
-
- &:hover {
- text-decoration: underline;
- }
-
- &.mention {
- &:hover {
- text-decoration: none;
-
- span {
- text-decoration: underline;
- }
- }
- }
- }
- }
-
- &__actions {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- &__button {
- flex-shrink: 1;
- padding: 0 15px;
- overflow: hidden;
-
- .button {
- min-width: 0;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- max-width: 100%;
- }
- }
- }
-
- &__counters {
- flex: 1 1 auto;
- display: grid;
- grid-auto-columns: minmax(0, 1fr);
- grid-auto-flow: column;
- max-width: 340px;
- min-width: 65px * 3;
-
- &__item {
- padding: 15px 0;
- text-align: center;
- color: $primary-text-color;
- font-weight: 600;
- font-size: 15px;
- line-height: 21px;
-
- small {
- display: block;
- color: $darker-text-color;
- font-weight: 400;
- font-size: 13px;
- line-height: 18px;
- }
- }
- }
-}
-
-.report-notes {
- margin-bottom: 20px;
-
- &__item {
- background: var(--background-color);
- position: relative;
- padding: 15px;
- padding-inline-start: 15px * 2 + 40px;
- border: 1px solid var(--background-border-color);
-
- &:first-child {
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
- }
-
- &:last-child {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- }
-
- &__avatar {
- position: absolute;
- inset-inline-start: 15px;
- top: 15px;
- border-radius: var(--avatar-border-radius);
- width: 40px;
- height: 40px;
- }
-
- &__header {
- color: $darker-text-color;
- font-size: 15px;
- line-height: 20px;
- margin-bottom: 4px;
-
- .username {
- color: $primary-text-color;
- font-weight: 500;
- margin-inline-end: 5px;
-
- a {
- color: inherit;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
-
- a.timestamp {
- color: $darker-text-color;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
-
- time {
- margin-inline-start: 5px;
- vertical-align: baseline;
- }
- }
-
- &__content {
- font-size: 15px;
- line-height: 20px;
- overflow-wrap: break-word;
- font-weight: 400;
- color: $primary-text-color;
-
- p {
- margin-bottom: 20px;
- white-space: pre-wrap;
- unicode-bidi: plaintext;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- a {
- color: $highlight-text-color;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- &__actions {
- position: absolute;
- top: 15px;
- inset-inline-end: 15px;
- text-align: end;
- }
- }
-}
-
-.report-actions {
- &__item {
- display: flex;
- align-items: center;
- line-height: 18px;
-
- &:last-child {
- border-bottom: 0;
- }
-
- &__button {
- box-sizing: border-box;
- flex: 0 0 auto;
- width: 200px;
- padding: 15px;
- padding-inline-end: 0;
-
- .button {
- display: block;
- width: 100%;
- }
- }
-
- &__description {
- padding: 15px;
- font-size: 14px;
- color: $dark-text-color;
- }
- }
-
- @media screen and (width <= 800px) {
- border: 0;
-
- &__item {
- flex-direction: column;
- border: 0;
-
- &__button {
- width: 100%;
- padding: 15px 0;
- }
-
- &__description {
- padding: 0;
- padding-bottom: 15px;
- }
- }
- }
-}
-
-.section-skip-link {
- float: right;
-
- a {
- color: $ui-highlight-color;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
-}
-
-.strike-card {
- padding: 15px;
- font-size: 15px;
- line-height: 20px;
- overflow-wrap: break-word;
- font-weight: 400;
- color: $primary-text-color;
- box-sizing: border-box;
- min-height: 100%;
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
-
- a {
- color: $highlight-text-color;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
-
- p {
- margin-bottom: 20px;
- unicode-bidi: plaintext;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- strong {
- font-weight: 700;
- }
- }
-
- &__rules {
- list-style: disc;
- padding-inline-start: 15px;
- margin-bottom: 20px;
- color: $darker-text-color;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- &__text {
- color: $primary-text-color;
- }
- }
-
- &__statuses-list {
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
- font-size: 13px;
- line-height: 18px;
- overflow: hidden;
-
- &__item {
- padding: 16px;
- border-bottom: 1px solid var(--background-border-color);
-
- &:last-child {
- border-bottom: 0;
- }
-
- &__meta {
- color: $darker-text-color;
- }
-
- a {
- color: inherit;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
- }
-}
-
-.availability-indicator {
- display: flex;
- align-items: center;
- margin-bottom: 30px;
- font-size: 14px;
- line-height: 21px;
-
- &__hint {
- padding: 0 15px;
- }
-
- &__graphic {
- display: flex;
- margin: 0 -2px;
-
- &__item {
- display: block;
- flex: 0 0 auto;
- width: 4px;
- height: 21px;
- background: lighten($ui-base-color, 8%);
- margin: 0 2px;
- border-radius: 2px;
-
- &.positive {
- background: $valid-value-color;
- }
-
- &.negative {
- background: $error-value-color;
- }
- }
- }
-}
-
-.history {
- counter-reset: step 0;
- font-size: 15px;
- line-height: 22px;
-
- > li {
- counter-increment: step 1;
- padding-inline-start: 2.5rem;
- padding-bottom: 8px;
- position: relative;
- margin-bottom: 8px;
-
- &::before {
- position: absolute;
- content: counter(step);
- font-size: 0.625rem;
- font-weight: 500;
- inset-inline-start: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- width: calc(1.375rem + 1px);
- height: calc(1.375rem + 1px);
- background: $ui-base-color;
- border: 1px solid $highlight-text-color;
- color: $highlight-text-color;
- border-radius: 8px;
- }
-
- &::after {
- position: absolute;
- content: '';
- width: 1px;
- background: $highlight-text-color;
- bottom: 0;
- top: calc(1.875rem + 1px);
- inset-inline-start: 0.6875rem;
- }
-
- &:last-child {
- margin-bottom: 0;
-
- &::after {
- display: none;
- }
- }
- }
-
- &__entry {
- h5 {
- font-weight: 500;
- color: $primary-text-color;
- line-height: 25px;
- margin-bottom: 16px;
- }
-
- .status {
- border: 1px solid lighten($ui-base-color, 4%);
- background: $ui-base-color;
- border-radius: 4px;
- }
- }
-}
-
-.status__card {
- padding: 15px;
- border-radius: 4px;
- font-size: 15px;
- line-height: 20px;
- overflow-wrap: break-word;
- font-weight: 400;
- border: 1px solid lighten($ui-base-color, 4%);
- color: $primary-text-color;
- box-sizing: border-box;
- min-height: 100%;
-
- &.status--has-quote {
- .quote-inline {
- display: none;
- }
- }
-
- .status__quote & {
- // Remove the border from the .status__card within .status__quote
- border: none;
-
- .display-name__account {
- line-height: inherit;
- }
-
- .status__avatar,
- .status__avatar .account__avatar {
- width: 32px;
- height: 32px;
- }
- }
-
- .status__prepend {
- padding: 0 0 15px;
- gap: 4px;
- align-items: center;
- }
-
- > details {
- summary {
- display: block;
- box-sizing: border-box;
- background: var(--nested-card-background);
- color: var(--nested-card-text);
- border: var(--nested-card-border);
- border-radius: 8px;
- padding: 8px 13px;
- position: relative;
- font-size: 15px;
- line-height: 22px;
- cursor: pointer;
-
- &::after {
- content: attr(data-show, 'Show more');
- margin-top: 8px;
- display: block;
- font-size: 15px;
- line-height: 20px;
- color: $highlight-text-color;
- cursor: pointer;
- border: 0;
- background: transparent;
- padding: 0;
- text-decoration: none;
- font-weight: 500;
- }
-
- &:hover,
- &:focus-visible {
- &::after {
- text-decoration: underline !important;
- }
- }
- }
-
- &[open] summary {
- margin-bottom: 16px;
-
- &::after {
- content: attr(data-hide, 'Hide post');
- }
- }
- }
-
- .preview-card {
- position: relative;
- max-width: 566px;
-
- .status-card__image {
- &--video {
- aspect-ratio: 16 / 9;
- }
-
- &--large {
- aspect-ratio: 1.91 / 1;
- }
-
- aspect-ratio: 1;
- }
-
- .spoiler-button__overlay__label {
- outline: 1px solid var(--media-outline-color);
- }
-
- .hide-button {
- // Toggled to appear when the preview-card is unblurred:
- display: none;
- position: absolute;
- top: 5px;
- right: 5px;
- color: $white;
- border: 0;
- outline: 1px solid var(--media-outline-color);
- background-color: color.change($black, $alpha: 0.45);
- backdrop-filter: $backdrop-blur-filter;
- padding: 3px 12px;
- border-radius: 99px;
- font-size: 14px;
- font-weight: 700;
- line-height: 20px;
-
- &:hover,
- &:focus {
- background-color: color.change($black, $alpha: 0.9);
- }
- }
-
- &.preview-card--image-visible {
- .hide-button {
- display: block;
- }
-
- .spoiler-button__overlay,
- .status-card__image-preview {
- display: none;
- }
- }
- }
-
- .detailed-status__meta {
- .detailed-status__application,
- .detailed-status__datetime,
- .detailed-status__link {
- color: inherit;
- }
- }
-}
-
-.admin {
- &__terms-of-service {
- &__container {
- background: var(--surface-background-color);
- border-radius: 8px;
- border: 1px solid var(--background-border-color);
- overflow: hidden;
-
- &__header {
- padding: 16px;
- font-size: 14px;
- line-height: 20px;
- color: $secondary-text-color;
- display: flex;
- align-items: center;
- gap: 12px;
- }
-
- &__body {
- background: var(--background-color);
- padding: 16px;
- overflow-y: scroll;
- height: 30vh;
- }
- }
-
- &__history {
- & > li {
- border-bottom: 1px solid var(--background-border-color);
-
- &:last-child {
- border-bottom: 0;
- }
- }
-
- &__item {
- padding: 16px 0;
- padding-bottom: 8px;
-
- h5 {
- font-size: 14px;
- line-height: 20px;
- font-weight: 600;
- margin-bottom: 16px;
-
- a {
- color: inherit;
- text-decoration: none;
- }
- }
- }
- }
- }
-}
-
-.dot-indicator {
- display: inline-flex;
- align-items: center;
- gap: 8px;
- font-weight: 500;
-
- &__indicator {
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: $dark-text-color;
- }
-
- &.success {
- color: $valid-value-color;
-
- .dot-indicator__indicator {
- background-color: $valid-value-color;
- }
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/annual_reports.scss b/app/javascript/flavours/glitch/styles/annual_reports.scss
deleted file mode 100644
index 96500a18bb..0000000000
--- a/app/javascript/flavours/glitch/styles/annual_reports.scss
+++ /dev/null
@@ -1,342 +0,0 @@
-@use 'variables' as *;
-
-:root {
- --indigo-1: #17063b;
- --indigo-2: #2f0c7a;
- --indigo-3: #562cfc;
- --indigo-5: #858afa;
- --indigo-6: #cccfff;
- --lime: #baff3b;
- --goldenrod-2: #ffc954;
-}
-
-.annual-report {
- flex: 0 0 auto;
- background: var(--indigo-1);
- padding: 24px;
-
- &__header {
- margin-bottom: 16px;
-
- h1 {
- font-size: 25px;
- font-weight: 600;
- line-height: 30px;
- color: var(--lime);
- margin-bottom: 8px;
- }
-
- p {
- font-size: 16px;
- font-weight: 600;
- line-height: 20px;
- color: var(--indigo-6);
- }
- }
-
- &__bento {
- display: grid;
- gap: 8px;
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
- grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(
- 0,
- auto
- );
-
- &__box {
- padding: 16px;
- border-radius: 8px;
- background: var(--indigo-2);
- color: var(--indigo-5);
- }
- }
-
- &__summary {
- &__most-boosted-post {
- grid-column: span 2;
- grid-row: span 2;
- padding: 0;
-
- .status__content,
- .content-warning {
- color: var(--indigo-6);
- }
-
- .detailed-status {
- border: 0;
- }
-
- .content-warning {
- border: 0;
- background: var(--indigo-1);
-
- .link-button {
- color: var(--indigo-5);
- }
- }
-
- .detailed-status__meta__line {
- border-bottom-color: var(--indigo-3);
- }
-
- .detailed-status__meta {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
-
- .detailed-status__meta,
- .poll__footer,
- .poll__link,
- .detailed-status .logo,
- .detailed-status__display-name {
- color: var(--indigo-5);
- }
-
- .detailed-status__meta .animated-number,
- .detailed-status__display-name strong {
- color: var(--indigo-6);
- }
-
- .poll__chart {
- background-color: var(--indigo-3);
-
- &.leading {
- background-color: var(--goldenrod-2);
- }
- }
-
- .status-card,
- .hashtag-bar {
- display: none;
- }
- }
-
- &__followers {
- grid-column: span 1;
- text-align: center;
- position: relative;
- overflow: hidden;
- padding-block-start: 24px;
- padding-block-end: 24px;
-
- --sparkline-gradient-top: rgba(86, 44, 252, 50%);
- --sparkline-gradient-bottom: rgba(86, 44, 252, 0%);
-
- &__foreground {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 8px;
- position: relative;
- z-index: 1;
- }
-
- &__number {
- font-size: 31px;
- font-weight: 600;
- line-height: 37px;
- color: var(--lime);
- }
-
- &__label {
- font-size: 14px;
- font-weight: 600;
- line-height: 17px;
- color: var(--indigo-6);
- }
-
- &__footnote {
- display: block;
- font-weight: 400;
- opacity: 0.5;
- }
-
- svg {
- position: absolute;
- bottom: 0;
- inset-inline-end: 0;
- pointer-events: none;
- z-index: 0;
- height: 70%;
- width: auto;
-
- path:first-child {
- fill: url('#gradient') !important;
- fill-opacity: 1 !important;
- }
-
- path:last-child {
- stroke: var(--indigo-3) !important;
- fill: none !important;
- }
- }
- }
-
- &__archetype {
- grid-column: span 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- gap: 8px;
- padding: 0;
-
- img {
- display: block;
- width: 100%;
- height: auto;
- border-radius: 8px;
- }
-
- &__label {
- padding: 16px;
- padding-bottom: 8px;
- font-size: 14px;
- line-height: 17px;
- font-weight: 600;
- color: var(--lime);
- }
- }
-
- &__most-used-app {
- grid-column: span 1;
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 8px;
- box-sizing: border-box;
-
- &__label {
- font-size: 14px;
- line-height: 17px;
- font-weight: 600;
- color: var(--indigo-6);
- }
-
- &__icon {
- font-size: 14px;
- line-height: 17px;
- font-weight: 600;
- color: var(--goldenrod-2);
- }
- }
-
- &__percentile {
- grid-row: span 2;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- text-align: center;
- text-wrap: balance;
- padding: 16px 8px;
-
- &__label {
- font-size: 14px;
- line-height: 17px;
- }
-
- &__number {
- font-size: 54px;
- font-weight: 600;
- line-height: 73px;
- color: var(--goldenrod-2);
- }
-
- &__footnote {
- font-size: 11px;
- line-height: 14px;
- opacity: 0.5;
- }
- }
-
- &__new-posts {
- grid-column: span 2;
- text-align: center;
- position: relative;
- overflow: hidden;
-
- &__label {
- font-size: 20px;
- font-weight: 600;
- line-height: 24px;
- color: var(--indigo-6);
- z-index: 1;
- position: relative;
- }
-
- &__number {
- font-size: 76px;
- font-weight: 600;
- line-height: 91px;
- color: var(--goldenrod-2);
- z-index: 1;
- position: relative;
- }
-
- svg {
- position: absolute;
- inset-inline-start: -7px;
- top: -4px;
- z-index: 0;
- }
- }
-
- &__most-used-hashtag {
- grid-column: span 2;
- text-align: center;
- overflow: hidden;
-
- &__hashtag {
- font-size: 42px;
- font-weight: 600;
- line-height: 58px;
- color: var(--indigo-6);
- margin-inline-start: -100%;
- margin-inline-end: -100%;
- }
-
- &__label {
- font-size: 14px;
- font-weight: 600;
- line-height: 17px;
- }
- }
- }
-}
-
-.annual-report-modal {
- max-width: 600px;
- background: var(--indigo-1);
- border-radius: 16px;
- display: flex;
- flex-direction: column;
- overflow-y: auto;
-
- .loading-indicator .circular-progress {
- color: var(--lime);
- }
-
- @media screen and (max-width: $no-columns-breakpoint) {
- border-bottom: 0;
- border-radius: 16px 16px 0 0;
- }
-}
-
-.notification-group--annual-report {
- .notification-group__icon {
- color: var(--lime);
- }
-
- .notification-group__main .link-button {
- font-weight: 500;
- color: var(--lime);
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/application.scss b/app/javascript/flavours/glitch/styles/application.scss
index 7f77b55487..e16e5368e7 100644
--- a/app/javascript/flavours/glitch/styles/application.scss
+++ b/app/javascript/flavours/glitch/styles/application.scss
@@ -1,29 +1,7 @@
-@use 'functions';
-@use 'mixins';
-@use 'variables';
-@use 'css_variables';
-@use '@/styles/fonts/roboto';
-@use '@/styles/fonts/roboto-mono';
+@use 'mastodon/css_variables';
+@use 'mastodon/variables';
+@use 'common';
-@use 'reset';
-@use 'basics';
-@use 'branding';
-@use 'containers';
-@use 'lists';
-@use 'widgets';
-@use 'forms';
-@use 'accounts';
-@use 'components';
-@use 'polls';
-@use 'modal';
-@use 'emoji_picker';
-@use 'annual_reports';
-@use 'about';
-@use 'tables';
-@use 'admin';
-@use 'dashboard';
-@use 'rtl';
-@use 'accessibility';
-@use 'rich_text';
-@use 'glitch_local_settings';
-@use 'glitch_doodle';
+html {
+ color-scheme: dark;
+}
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
deleted file mode 100644
index 3d8bba7c00..0000000000
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ /dev/null
@@ -1,300 +0,0 @@
-@use 'variables' as *;
-@use 'functions' as *;
-
-html.has-modal {
- &,
- body {
- touch-action: none;
- overscroll-behavior: none;
- -webkit-overflow-scrolling: auto;
- scrollbar-gutter: stable;
- }
-
- body {
- overflow: hidden !important;
- }
-}
-
-body {
- font-family: $font-sans-serif, sans-serif;
- background: var(--background-color);
- font-size: 13px;
- line-height: 18px;
- font-weight: 400;
- color: $primary-text-color;
- text-rendering: optimizelegibility;
-
- // Disable kerning for Japanese text to preserve monospaced alignment for readability
- &:not(:lang(ja)) {
- font-feature-settings: 'kern';
- }
-
- text-size-adjust: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
- -webkit-tap-highlight-color: transparent;
-
- &.system-font {
- // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
- // -apple-system => Safari <11 specific
- // BlinkMacSystemFont => Chrome <56 on macOS specific
- // Segoe UI => Windows 7/8/10
- // Oxygen => KDE
- // Ubuntu => Unity/Ubuntu
- // Cantarell => GNOME
- // Fira Sans => Firefox OS
- // Droid Sans => Older Androids (<4.0)
- // Helvetica Neue => Older macOS <10.11
- // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
- font-family:
- system-ui,
- -apple-system,
- BlinkMacSystemFont,
- 'Segoe UI',
- Oxygen,
- Ubuntu,
- Cantarell,
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- $font-sans-serif,
- sans-serif;
- }
-
- &.app-body {
- padding: 0;
- padding-left: env(safe-area-inset-left);
- padding-right: env(safe-area-inset-right);
- box-sizing: border-box;
-
- &.layout-single-column {
- height: auto;
- min-height: 100vh;
- min-height: 100dvh;
- overflow-y: scroll;
- }
-
- &.layout-multiple-columns {
- position: absolute;
- width: 100%;
- height: 100%;
- padding-bottom: env(safe-area-inset-bottom);
- }
- }
-
- &.player {
- padding: 0;
- margin: 0;
- position: absolute;
- width: 100%;
- height: 100%;
- overflow: hidden;
-
- & > div {
- height: 100%;
- }
-
- .video-player video {
- width: 100%;
- height: 100%;
- max-height: 100vh;
- }
-
- .media-gallery {
- margin-top: 0;
- height: 100% !important;
- border-radius: 0;
- }
-
- .media-gallery__item {
- border-radius: 0;
- }
- }
-
- &.embed {
- margin: 0;
- padding-bottom: 0;
- overflow: hidden;
- }
-
- &.admin {
- padding: 0;
- }
-
- &.error {
- position: absolute;
- text-align: center;
- width: 100%;
- height: 100%;
- padding: 0;
- display: flex;
- justify-content: center;
- align-items: center;
-
- .dialog {
- vertical-align: middle;
- margin: 20px;
-
- &__illustration {
- img {
- display: block;
- max-width: 470px;
- width: 100%;
- height: auto;
- margin-top: -120px;
- margin-bottom: -45px;
- }
- }
-
- h1 {
- font-size: 20px;
- line-height: 28px;
- font-weight: 400;
- }
- }
- }
-}
-
-a {
- &:focus {
- border-radius: 4px;
- outline: $ui-button-focus-outline;
- }
-
- &:focus:not(:focus-visible) {
- outline: none;
- }
-}
-
-button {
- font-family: inherit;
- cursor: pointer;
-
- &:focus:not(:focus-visible) {
- outline: none;
- }
-}
-
-.app-holder {
- &,
- & > div,
- & > noscript {
- display: flex;
- width: 100%;
- align-items: center;
- justify-content: center;
- outline: 0 !important;
- }
-
- & > noscript {
- min-height: 100vh;
- min-height: 100dvh;
- }
-}
-
-.layout-single-column .app-holder {
- &,
- & > div {
- min-height: 100vh;
- min-height: 100dvh;
- }
-}
-
-.layout-multiple-columns .app-holder {
- &,
- & > div {
- height: 100%;
- }
-}
-
-.error-boundary,
-.app-holder noscript {
- flex-direction: column;
- font-size: 16px;
- font-weight: 400;
- line-height: 1.7;
- color: lighten($error-red, 4%);
- text-align: center;
-
- & > div {
- max-width: 500px;
- }
-
- p {
- margin-bottom: 0.85em;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- a {
- color: $highlight-text-color;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
-
- &__footer {
- color: $dark-text-color;
- font-size: 13px;
-
- a {
- color: $dark-text-color;
- }
- }
-
- button {
- display: inline;
- border: 0;
- background: transparent;
- color: $dark-text-color;
- font: inherit;
- padding: 0;
- margin: 0;
- line-height: inherit;
- cursor: pointer;
- outline: 0;
- transition: color 300ms linear;
- text-decoration: underline;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
-
- &.copied {
- color: $valid-value-color;
- transition: none;
- }
- }
-}
-
-.logo-resources {
- // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029
- visibility: hidden;
- user-select: none;
- pointer-events: none;
- width: 0;
- height: 0;
- overflow: hidden;
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- z-index: -1000;
-}
-
-// NoScript adds a __ns__pop2top class to the full ancestry of blocked elements,
-// to set the z-index to a high value, which messes with modals and dropdowns.
-// Blocked elements can in theory only be media and frames/embeds, so they
-// should only appear in statuses, under divs and articles.
-body,
-div,
-article {
- .__ns__pop2top {
- z-index: unset !important;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/branding.scss b/app/javascript/flavours/glitch/styles/branding.scss
deleted file mode 100644
index 8e8dd3530b..0000000000
--- a/app/javascript/flavours/glitch/styles/branding.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use 'variables' as *;
-
-.logo {
- color: $primary-text-color;
-}
diff --git a/app/javascript/flavours/glitch/styles_new/common.scss b/app/javascript/flavours/glitch/styles/common.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/common.scss
rename to app/javascript/flavours/glitch/styles/common.scss
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
deleted file mode 100644
index 7fcd50278f..0000000000
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ /dev/null
@@ -1,12014 +0,0 @@
-@use 'sass:color';
-@use 'variables' as *;
-@use 'functions' as *;
-@use 'mixins' as *;
-
-.app-body {
- -webkit-overflow-scrolling: touch;
- -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-
-.animated-number {
- display: inline-flex;
- flex-direction: column;
- align-items: stretch;
- overflow: hidden;
- position: relative;
-}
-
-.inline-alert {
- color: $valid-value-color;
- font-weight: 400;
-
- .no-reduce-motion & {
- transition: opacity 200ms ease;
- }
-}
-
-.link-button {
- display: block;
- font-size: 15px;
- line-height: 20px;
- color: $highlight-text-color;
- border: 0;
- background: transparent;
- padding: 0;
- cursor: pointer;
- text-decoration: none;
-
- &--destructive {
- color: $error-value-color;
- }
-
- &:hover,
- &:active {
- text-decoration: underline;
- }
-
- &:disabled {
- color: $ui-primary-color;
- cursor: default;
- }
-
- &:focus-visible {
- outline: $ui-button-icon-focus-outline;
- }
-}
-
-.help-button {
- background: $ui-button-background-color;
- border: 0;
- color: $ui-button-color;
- border-radius: 20px;
- cursor: pointer;
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
-
- &:active,
- &:focus,
- &:hover {
- background-color: $ui-button-focus-background-color;
- }
-
- &:focus-visible {
- outline: $ui-button-icon-focus-outline;
- }
-
- .icon {
- width: 14px;
- height: 14px;
- }
-}
-
-.button {
- background-color: $ui-button-background-color;
- border: 10px none;
- border-radius: 4px;
- box-sizing: border-box;
- color: $ui-button-color;
- cursor: pointer;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: 6px;
- font-family: inherit;
- font-size: 15px;
- font-weight: 500;
- letter-spacing: 0;
- line-height: 22px;
- overflow: hidden;
- padding: 7px 18px;
- position: relative;
- text-align: center;
- text-decoration: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: auto;
-
- &:active,
- &:focus,
- &:hover {
- background-color: $ui-button-focus-background-color;
- }
-
- &:focus-visible {
- outline: $ui-button-icon-focus-outline;
- }
-
- &--compact {
- font-size: 14px;
- line-height: normal;
- font-weight: 700;
- padding: 5px 12px;
- border-radius: 4px;
- }
-
- &--dangerous {
- background-color: var(--error-background-color);
- color: var(--on-error-color);
-
- &:active,
- &:focus,
- &:hover {
- background-color: var(--error-active-background-color);
- transition: none;
- }
- }
-
- &--destructive {
- &:active,
- &:focus,
- &:hover {
- background-color: $ui-button-destructive-focus-background-color;
- transition: none;
- }
- }
-
- &:disabled,
- &.disabled {
- background-color: $ui-button-disabled-color;
- cursor: not-allowed;
- }
-
- &.copyable {
- transition: background 300ms linear;
- }
-
- &.copied {
- background: $valid-value-color;
- transition: none;
- }
-
- &.button-secondary {
- color: $highlight-text-color;
- background: transparent;
- padding: 6px 17px;
- border: 1px solid $highlight-text-color;
-
- &:active,
- &:focus,
- &:hover {
- border-color: lighten($highlight-text-color, 4%);
- color: lighten($highlight-text-color, 4%);
- background-color: transparent;
- text-decoration: none;
- }
-
- &.button--destructive {
- &:active,
- &:focus,
- &:hover {
- border-color: $ui-button-destructive-focus-background-color;
- color: $ui-button-destructive-focus-background-color;
- }
- }
-
- &:disabled,
- &.disabled {
- opacity: 0.7;
- border-color: $ui-button-disabled-color;
- color: $ui-button-disabled-color;
-
- &:active,
- &:focus,
- &:hover {
- border-color: $ui-button-disabled-color;
- color: $ui-button-disabled-color;
- }
- }
- }
-
- &.button--plain {
- color: $highlight-text-color;
- background: transparent;
- padding: 6px;
-
- // The button has no outline, so we use negative margin to
- // visually align its label with its surroundings while maintaining
- // a generous click target
- margin-inline: -6px;
- border: 1px solid transparent;
-
- &:active,
- &:focus,
- &:hover {
- border-color: transparent;
- color: lighten($highlight-text-color, 4%);
- background-color: transparent;
- text-decoration: none;
- }
-
- &:disabled,
- &.disabled {
- opacity: 0.7;
- border-color: transparent;
- color: $ui-button-disabled-color;
-
- &:active,
- &:focus,
- &:hover {
- border-color: transparent;
- color: $ui-button-disabled-color;
- }
- }
- }
-
- &.button-tertiary {
- background: transparent;
- padding: 6px 17px;
- color: $ui-button-tertiary-color;
- border: 1px solid $ui-button-tertiary-border-color;
-
- &:active,
- &:focus,
- &:hover {
- background-color: $ui-button-tertiary-focus-background-color;
- color: $ui-button-tertiary-focus-color;
- border: 0;
- padding: 7px 18px;
- }
-
- &:disabled {
- opacity: 0.5;
- }
-
- &.button--confirmation {
- color: $valid-value-color;
- border-color: $valid-value-color;
-
- &:active,
- &:focus,
- &:hover {
- background: $valid-value-color;
- color: $primary-text-color;
- }
- }
-
- &.button--destructive {
- color: $error-value-color;
- border-color: $error-value-color;
-
- &:active,
- &:focus,
- &:hover {
- background: $error-value-color;
- color: $primary-text-color;
- }
- }
- }
-
- &.button--block {
- width: 100%;
- }
-
- &.loading {
- cursor: wait;
-
- .button__label-wrapper {
- // Hide the label only visually, so that
- // it keeps its layout and accessibility
- opacity: 0;
- }
-
- .loading-indicator {
- position: absolute;
- inset: 0;
- }
- }
-
- .icon {
- width: 18px;
- height: 18px;
- }
-}
-
-.column__wrapper {
- display: flex;
- flex: 1 1 auto;
- position: relative;
-}
-
-.icon {
- flex: 0 0 auto;
- width: 24px;
- height: 24px;
- aspect-ratio: 1;
-
- path {
- fill: currentColor;
- }
-}
-
-.icon-button {
- display: inline-flex;
- color: $action-button-color;
- border: 0;
- padding: 0;
- border-radius: 4px;
- background: transparent;
- cursor: pointer;
- align-items: center;
- justify-content: center;
- text-decoration: none;
- gap: 4px;
- flex: 0 0 auto;
-
- a {
- display: flex;
- color: inherit;
- text-decoration: none;
- }
-
- &:hover,
- &:active,
- &:focus-visible {
- color: lighten($action-button-color, 7%);
- background-color: color.change($action-button-color, $alpha: 0.15);
- }
-
- &:focus-visible {
- outline: $ui-button-icon-focus-outline;
- }
-
- &.disabled {
- color: darken($action-button-color, 13%);
- background-color: transparent;
- cursor: default;
- }
-
- &.inverted {
- color: $lighter-text-color;
-
- &:hover,
- &:active,
- &:focus-visible {
- color: darken($lighter-text-color, 7%);
- background-color: color.change($lighter-text-color, $alpha: 0.15);
- }
-
- &:focus-visible {
- outline: $ui-button-icon-focus-outline;
- }
-
- &.disabled {
- color: lighten($lighter-text-color, 7%);
- background-color: transparent;
- }
- }
-
- &.active {
- color: $highlight-text-color;
-
- &:hover,
- &:active,
- &:focus-visible {
- color: $highlight-text-color;
- background-color: transparent;
- }
-
- &.disabled {
- color: lighten($highlight-text-color, 13%);
- }
- }
-
- &.overlayed {
- box-sizing: content-box;
- background: color.change($black, $alpha: 0.65);
- backdrop-filter: $backdrop-blur-filter;
- color: color.change($white, $alpha: 0.7);
- border-radius: 4px;
- padding: 2px;
-
- &:hover {
- background: color.change($black, $alpha: 0.9);
- }
- }
-
- &--with-counter {
- padding-inline-end: 4px;
- }
-
- &__counter {
- display: block;
- width: auto;
- font-size: 12px;
- font-weight: 500;
- }
-
- &.copyable {
- transition: all 300ms linear;
- }
-
- &.copied {
- border-color: $valid-value-color;
- color: $valid-value-color;
- transition: none;
- background-color: color.change($valid-value-color, $alpha: 0.15);
- }
-}
-
-.text-icon-button {
- color: $lighter-text-color;
- border: 0;
- border-radius: 4px;
- background: transparent;
- cursor: pointer;
- font-weight: 600;
- font-size: 11px;
- padding: 0 3px;
- line-height: 27px;
- white-space: nowrap;
-
- &:hover,
- &:active,
- &:focus {
- color: darken($lighter-text-color, 7%);
- background-color: color.change($lighter-text-color, $alpha: 0.15);
- }
-
- &:focus-visible {
- outline: $ui-button-icon-focus-outline;
- }
-
- &.disabled {
- color: lighten($lighter-text-color, 20%);
- background-color: transparent;
- cursor: default;
- }
-
- &.active {
- color: $highlight-text-color;
-
- &:hover,
- &:active,
- &:focus {
- color: $highlight-text-color;
- background-color: transparent;
- }
- }
-}
-
-[data-popper-placement] {
- z-index: 9999;
-}
-
-.invisible {
- font-size: 0;
- line-height: 0;
- display: inline-block;
- width: 0;
- height: 0;
- position: absolute;
-
- img,
- svg {
- margin: 0 !important;
- border: 0 !important;
- padding: 0 !important;
- width: 0 !important;
- height: 0 !important;
- }
-}
-
-.ellipsis {
- &::after {
- content: '…';
- }
-}
-
-.autosuggest-textarea {
- &__textarea {
- background: transparent;
- min-height: 100px;
- padding-bottom: 0;
- resize: none;
- scrollbar-color: initial;
-
- &::-webkit-scrollbar {
- all: unset;
- }
- }
-
- &__suggestions {
- box-shadow: var(--dropdown-shadow);
- background: var(--input-background-color);
- border: 1px solid var(--background-border-color);
- border-radius: 0 0 4px 4px;
- color: var(--on-input-color);
- font-size: 14px;
- padding: 0;
-
- &__item {
- box-sizing: border-box;
- display: flex;
- align-items: center;
- height: 48px;
- cursor: pointer;
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.25px;
- color: var(--on-input-color);
-
- &:last-child {
- border-radius: 0 0 4px 4px;
- }
-
- &:hover,
- &:focus,
- &:active {
- background: var(--dropdown-border-color);
-
- .autosuggest-account .display-name__account {
- color: inherit;
- }
- }
-
- &.selected {
- background: $ui-highlight-color;
- color: $ui-button-color;
-
- .autosuggest-account .display-name__account {
- color: inherit;
- }
- }
- }
- }
-}
-
-.autosuggest-account,
-.autosuggest-emoji,
-.autosuggest-hashtag {
- flex: 1 0 0;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- gap: 12px;
- padding: 8px 12px;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.autosuggest-account {
- .display-name {
- font-weight: 400;
- display: flex;
- flex-direction: column;
- flex: 1 0 0;
- }
-
- .display-name__account {
- display: block;
- line-height: 16px;
- font-size: 12px;
- color: $ui-primary-color;
- }
-}
-
-.autosuggest-hashtag {
- justify-content: space-between;
-
- &__name {
- flex: 1 1 auto;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- &__uses {
- flex: 0 0 auto;
- text-align: end;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-}
-
-.autosuggest-emoji {
- &__name {
- flex: 1 0 0;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-}
-
-.autosuggest-account .account__avatar,
-.autosuggest-emoji img {
- display: block;
- width: 24px;
- height: 24px;
- flex: 0 0 auto;
-}
-
-.compose-form {
- display: flex;
- flex-direction: column;
- gap: 32px;
-
- .layout-multiple-columns &,
- .column & {
- padding: 15px;
- }
-
- &__highlightable {
- display: flex;
- flex-direction: column;
- flex: 0 1 auto;
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
- transition: border-color 300ms linear;
- position: relative;
- background: var(--input-background-color);
-
- &.active {
- transition: none;
- border-color: $ui-highlight-color;
- }
- }
-
- &__warning {
- color: $inverted-text-color;
- background: $ui-primary-color;
- box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.3);
- padding: 8px 10px;
- border-radius: 4px;
- font-size: 13px;
- font-weight: 400;
-
- strong {
- color: $inverted-text-color;
- font-weight: 500;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-
- a {
- color: $lighter-text-color;
- font-weight: 500;
- text-decoration: underline;
-
- &:hover,
- &:active,
- &:focus {
- text-decoration: none;
- }
- }
- }
-
- .spoiler-input {
- display: flex;
- align-items: stretch;
-
- &__border {
- background: url('@/images/warning-stripes.svg') repeat-y;
- width: 5px;
- flex: 0 0 auto;
- }
-
- .autosuggest-input {
- flex: 1 1 auto;
- border: 1px solid var(--background-border-color);
- border-width: 1px 0;
- }
- }
-
- .autosuggest-textarea__textarea,
- .spoiler-input__input {
- display: block;
- box-sizing: border-box;
- width: 100%;
- margin: 0;
- color: $secondary-text-color;
- background: var(--input-background-color);
- font-family: inherit;
- font-size: 14px;
- padding: 12px;
- line-height: normal;
- border: 0;
- outline: 0;
-
- &:focus {
- outline: 0;
- }
- }
-
- .spoiler-input__input {
- padding: 12px 12px - 5px;
- background: color.change($ui-highlight-color, $alpha: 0.05);
- color: $highlight-text-color;
- }
-
- &__dropdowns {
- display: flex;
- align-items: center;
- gap: 8px;
- margin: 8px;
- flex-wrap: wrap;
-
- & > div {
- overflow: hidden;
- display: flex;
- }
- }
-
- &__uploads {
- padding: 0 12px;
- aspect-ratio: 3/2;
- flex-shrink: 0;
- }
-
- .media-gallery {
- gap: 8px;
- }
-
- &__upload {
- position: relative;
-
- &.draggable {
- will-change: transform, opacity;
- touch-action: none;
- cursor: grab;
- }
-
- &.dragging {
- opacity: 0;
- }
-
- &.overlay {
- height: 100%;
- border-radius: 8px;
- pointer-events: none;
- }
-
- &__actions {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- padding: 8px;
- }
-
- &__preview,
- &__visualizer {
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: -1;
- top: 0;
- }
-
- &__preview {
- border-radius: 6px;
- inset-inline-start: 0;
- }
-
- &__visualizer {
- padding: 16px;
- box-sizing: border-box;
-
- .audio-player__visualizer {
- margin: 0 auto;
- display: block;
- height: 100%;
- }
-
- .icon {
- position: absolute;
- top: 50%;
- inset-inline-start: 50%;
- transform: translate(-50%, -50%);
- opacity: 0.75;
- color: var(--player-foreground-color);
- filter: var(--overlay-icon-shadow);
- width: 48px;
- height: 48px;
- }
- }
-
- &__thumbnail {
- width: 100%;
- height: 100%;
- background-position: center;
- background-size: cover;
- background-repeat: no-repeat;
- overflow: hidden;
- }
-
- .icon-button {
- flex: 0 0 auto;
- color: $white;
- background: rgba(0, 0, 0, 75%);
- border-radius: 6px;
- font-size: 12px;
- line-height: 16px;
- font-weight: 500;
- padding: 4px 8px;
- font-family: inherit;
-
- .icon {
- width: 15px;
- height: 15px;
- }
- }
-
- .icon-button.compose-form__upload__delete {
- padding: 2px;
- border-radius: 50%;
-
- .icon {
- width: 20px;
- height: 20px;
- }
- }
-
- &__warning {
- position: absolute;
- z-index: 2;
- bottom: 0;
- inset-inline-start: 0;
- inset-inline-end: 0;
- padding: 8px;
-
- .icon-button.active {
- color: #ffbe2e;
- background: rgba(0, 0, 0, 75%);
- }
- }
- }
-
- // glitch: reintroduce sensitive button
- &__sensitive-button {
- padding: 0 12px;
-
- input[type='checkbox'] {
- appearance: none;
- display: block;
- border: 1px solid $ui-primary-color;
- box-sizing: border-box;
- width: 17px;
- height: 17px;
- border-radius: 4px;
- flex: 0 0 auto;
-
- &:active,
- &:focus,
- &:hover {
- border-color: $highlight-text-color;
- border-width: 4px;
- }
-
- &:checked {
- background-color: $highlight-text-color;
- border-color: $highlight-text-color;
- }
-
- &::-moz-focus-inner {
- outline: 0 !important;
- border: 0;
- }
-
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
- &:disabled {
- opacity: 0.5;
- }
- }
- }
-
- &__footer {
- display: flex;
- flex-direction: column;
- gap: 12px;
- padding: 12px;
- }
-
- &__submit {
- display: flex;
- flex: 1 0 100%; // glitch: always on its own line
- max-width: 100%;
- overflow: hidden;
- gap: 5px; // glitch: handle secondary post privacy
- align-items: stretch; // glitch: handle secondary post privacy
-
- .button.secondary-post-button {
- flex: 0 1 auto;
- padding-top: 0;
- padding-bottom: 0;
-
- .icon {
- vertical-align: middle;
- }
- }
- }
-
- &__buttons {
- display: flex;
- gap: 8px;
- align-items: center;
- flex: 1 1 auto;
-
- & > div {
- display: flex;
- }
-
- .icon-button {
- padding: 2px;
- }
-
- .icon-button .icon {
- width: 20px;
- height: 20px;
- }
- }
-
- &__actions {
- display: flex;
- align-items: center;
- flex: 0 0 auto;
- gap: 12px;
- flex-wrap: wrap;
-
- .icon-button {
- box-sizing: content-box;
- color: $highlight-text-color;
-
- &:hover,
- &:focus,
- &:active {
- color: $highlight-text-color;
- }
-
- &.disabled {
- color: $highlight-text-color;
- opacity: 0.5;
- }
-
- &.active {
- background: $ui-highlight-color;
- color: $primary-text-color;
- }
- }
- }
-
- &__poll {
- margin-top: 8px;
- display: flex;
- flex-direction: column;
- align-self: stretch;
- gap: 8px;
-
- .poll__option {
- padding: 0 12px;
- gap: 8px;
-
- &.empty:not(:focus-within) {
- opacity: 0.5;
- }
- }
-
- .poll__input {
- width: 17px;
- height: 17px;
- border-color: $darker-text-color;
- }
-
- &__footer {
- display: flex;
- align-items: center;
- gap: 16px;
- padding-inline-start: 37px;
- padding-inline-end: 40px;
-
- &__sep {
- width: 1px;
- height: 22px;
- background: lighten($ui-base-color, 8%);
- flex: 0 0 auto;
- }
- }
-
- &__select {
- display: flex;
- flex-direction: column;
- gap: 2px;
- flex: 1 1 auto;
- min-width: 0;
-
- &__label {
- flex: 0 0 auto;
- font-size: 11px;
- font-weight: 500;
- line-height: 16px;
- letter-spacing: 0.5px;
- color: $darker-text-color;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
-
- &__value {
- flex: 0 0 auto;
- appearance: none;
- background: transparent;
- border: none;
- padding: 0;
- font-size: 14px;
- font-weight: 500;
- line-height: 20px;
- letter-spacing: 0.1px;
- color: $highlight-text-color;
- background-color: var(--input-background-color);
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
- }
-
- .status__quote {
- margin: 0 8px;
- max-height: 220px;
- overflow: hidden;
-
- // Override .status__content .status__content__text.status__content__text--visible
- .status__content__text.status__content__text {
- display: -webkit-box;
- }
-
- .status__content__text {
- -webkit-line-clamp: 4;
- line-clamp: 4;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
- }
-}
-
-.dropdown-button {
- display: flex;
- align-items: center;
- gap: 4px;
- background: transparent;
- color: $highlight-text-color;
- border-radius: 6px;
- border: 1px solid $highlight-text-color;
- padding: 4px 8px;
- font-size: 13px;
- line-height: normal;
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- &[disabled] {
- cursor: default;
- color: $highlight-text-color;
- border-color: $highlight-text-color;
- opacity: 0.5;
- }
-
- .icon {
- width: 15px;
- height: 15px;
- flex: 0 0 auto;
- }
-
- &__label {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- flex: 1 1 auto;
- }
-
- &.active {
- background: $ui-highlight-color;
- border-color: $ui-highlight-color;
- color: $primary-text-color;
- }
-
- &.warning {
- border-color: var(--goldenrod-2);
- color: var(--goldenrod-2);
-
- &.active {
- background-color: var(--goldenrod-2);
- color: var(--indigo-1);
- }
- }
-}
-
-.character-counter {
- cursor: default;
- font-family: $font-sans-serif, sans-serif;
- font-size: 14px;
- font-weight: 400;
- line-height: normal;
- color: $darker-text-color;
- flex: 1 0 auto;
- text-align: end;
-
- &.character-counter--over {
- color: $error-red;
- }
-}
-
-.no-reduce-motion .spoiler-input {
- transition:
- height 0.4s ease,
- opacity 0.4s ease;
-}
-
-.sign-in-banner {
- padding: 10px;
-
- p {
- font-size: 15px;
- line-height: 22px;
- color: $secondary-text-color;
- margin-bottom: 20px;
-
- strong {
- font-weight: 700;
- }
-
- a {
- color: $secondary-text-color;
- text-decoration: none;
- unicode-bidi: isolate;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- .button {
- margin-bottom: 10px;
- }
-}
-
-.emojione {
- font-size: inherit;
- vertical-align: middle;
- object-fit: contain;
- margin: -0.2ex 0.15em 0.2ex;
- width: 16px;
- height: 16px;
-
- img {
- width: auto;
- }
-}
-
-.status__content--with-action {
- cursor: pointer;
-}
-
-.status__content {
- clear: both;
-}
-
-.status__content,
-.edit-indicator__content,
-.reply-indicator__content {
- position: relative;
- overflow-wrap: break-word;
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
- font-size: 15px;
- line-height: 20px;
- padding-top: 2px;
- color: $primary-text-color;
-
- &:focus {
- outline: 0;
- }
-
- &.status__content--with-spoiler {
- white-space: normal;
-
- .status__content__text {
- white-space: pre-wrap;
- }
- }
-
- .emojione {
- width: 20px;
- height: 20px;
- margin: -3px 0 0;
- }
-
- p,
- pre {
- margin-bottom: 20px;
- white-space: pre-wrap;
- unicode-bidi: plaintext;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- a {
- color: $secondary-text-color;
- text-decoration: none;
- unicode-bidi: isolate;
-
- &:hover {
- text-decoration: underline;
- }
-
- &.mention {
- &:hover {
- text-decoration: none;
-
- span {
- text-decoration: underline;
- }
- }
- }
- }
-
- a.unhandled-link {
- color: $highlight-text-color;
-
- .link-origin-tag {
- color: $gold-star;
- font-size: 0.8em;
- }
- }
-
- .status__content__text {
- display: none;
-
- &.status__content__text--visible {
- display: block;
- }
- }
-}
-
-.reply-indicator {
- display: grid;
- grid-template-columns: 46px minmax(0, 1fr);
- grid-template-rows: 46px max-content;
- gap: 0 10px;
-
- .detailed-status__display-name {
- margin-bottom: 4px;
- }
-
- .detailed-status__display-avatar {
- grid-column-start: 1;
- grid-row-start: 1;
- grid-row-end: span 1;
- }
-
- &__main {
- grid-column-start: 2;
- grid-row-start: 1;
- grid-row-end: span 2;
- }
-
- .display-name {
- font-size: 14px;
- line-height: 16px;
-
- &__account {
- display: none;
- }
- }
-
- &__line {
- grid-column-start: 1;
- grid-row-start: 2;
- grid-row-end: span 1;
- position: relative;
-
- &::before {
- display: block;
- content: '';
- position: absolute;
- inset-inline-start: 50%;
- top: 4px;
- transform: translateX(-50%);
- background: lighten($ui-base-color, 8%);
- width: 2px;
- height: calc(100% + 32px - 8px); // Account for gap to next element
- }
- }
-
- &__content {
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.25px;
- display: -webkit-box;
- line-clamp: 4;
- -webkit-line-clamp: 4;
- -webkit-box-orient: vertical;
- padding: 0;
- max-height: 4 * 20px;
- overflow: hidden;
- color: $darker-text-color;
- }
-
- &__attachments {
- margin-top: 4px;
- color: $darker-text-color;
- font-size: 12px;
- line-height: 16px;
- display: flex;
- align-items: center;
- gap: 4px;
-
- .icon {
- width: 18px;
- height: 18px;
- }
- }
-}
-
-.edit-indicator {
- border-radius: 4px 4px 0 0;
- background: lighten($ui-base-color, 4%);
- padding: 12px;
- overflow-y: auto;
- flex: 0 0 auto;
- border-bottom: 0.5px solid lighten($ui-base-color, 8%);
- display: flex;
- flex-direction: column;
- gap: 4px;
-
- &__header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: $darker-text-color;
- font-size: 12px;
- line-height: 16px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- &__cancel {
- display: flex;
-
- .icon {
- width: 18px;
- height: 18px;
- }
- }
-
- &__display-name {
- display: flex;
- gap: 4px;
-
- a {
- color: inherit;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
-
- &__content {
- color: $secondary-text-color;
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.25px;
- padding-top: 0 !important;
- display: -webkit-box;
- line-clamp: 4;
- -webkit-line-clamp: 4;
- -webkit-box-orient: vertical;
- max-height: 4 * 20px;
- overflow: hidden;
-
- a {
- color: $highlight-text-color;
- }
- }
-
- &__attachments {
- color: $darker-text-color;
- font-size: 12px;
- line-height: 16px;
- opacity: 0.75;
- display: flex;
- align-items: center;
- gap: 4px;
-
- .icon {
- width: 18px;
- height: 18px;
- }
- }
-}
-
-.edit-indicator__content,
-.reply-indicator__content {
- .emojione {
- width: 18px;
- height: 18px;
- margin: -3px 0 0;
- }
-}
-
-.announcements__content {
- overflow-wrap: break-word;
- overflow-y: auto;
-
- .emojione {
- width: 20px;
- height: 20px;
- margin: -3px 0 0;
- }
-
- p {
- margin-bottom: 10px;
- white-space: pre-wrap;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- a {
- color: $secondary-text-color;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
-
- &.mention {
- &:hover {
- text-decoration: none;
-
- span {
- text-decoration: underline;
- }
- }
- }
-
- &.unhandled-link {
- color: $highlight-text-color;
- }
- }
-}
-
-.status__content.status__content--collapsed {
- max-height: 20px * 15; // 15 lines is roughly above 500 characters
-}
-
-.status__content__read-more-button,
-.status__content__translate-button {
- display: flex;
- align-items: center;
- font-size: 15px;
- line-height: 22px;
- color: $highlight-text-color;
- border: 0;
- background: transparent;
- padding: 0;
- margin-top: 16px;
- text-decoration: none;
- text-wrap: nowrap;
-
- .status--is-quote & {
- // Needed to prevent buttons from stretching across whole
- // status width in Safari due to line-clamp
- width: min-content;
- white-space: nowrap;
- }
-
- &:hover,
- &:active {
- text-decoration: underline;
- }
-
- .icon {
- width: 15px;
- height: 15px;
- }
-}
-
-.translate-button {
- margin-top: 16px;
- font-size: 15px;
- line-height: 20px;
- display: flex;
- justify-content: space-between;
- color: $dark-text-color;
-}
-
-.status__wrapper--filtered {
- color: $dark-text-color;
- border: 0;
- font-size: inherit;
- text-align: center;
- line-height: inherit;
- margin: 0;
- padding: 15px;
- box-sizing: border-box;
- width: 100%;
- clear: both;
- border-bottom: 1px solid var(--background-border-color);
-
- &__button {
- display: inline;
- color: lighten($ui-highlight-color, 8%);
- border: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
- line-height: inherit;
-
- &:hover,
- &:active {
- text-decoration: underline;
- }
- }
-}
-
-.focusable {
- &:focus-visible {
- outline: 2px solid $ui-button-focus-outline-color;
- outline-offset: -2px;
- background: color.change($ui-highlight-color, $alpha: 0.05);
- }
-}
-
-.status {
- padding: 10px 14px; // glitch: reduced padding
- min-height: 54px;
- border-bottom: 1px solid var(--background-border-color);
- cursor: auto;
- opacity: 1;
- animation: fade 150ms linear;
-
- @keyframes fade {
- 0% {
- opacity: 0;
- }
-
- 100% {
- opacity: 1;
- }
- }
-
- .content-warning {
- margin-bottom: 10px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- .media-gallery,
- .video-player,
- .audio-player,
- .attachment-list {
- margin-top: 8px; // glitch: reduced margins
- }
-
- &--in-thread {
- --thread-margin: calc(46px + 8px);
-
- border-bottom: 0;
-
- & > .status__content,
- & > .status__action-bar,
- & > .media-gallery,
- & > div > .video-player,
- & > .audio-player,
- & > .attachment-list,
- & > .picture-in-picture-placeholder,
- & > .more-from-author,
- & > .status-card,
- & > .hashtag-bar,
- & > .content-warning,
- & > .filter-warning,
- & > .status__quote {
- margin-inline-start: var(--thread-margin);
- width: calc(100% - var(--thread-margin));
- }
-
- .more-from-author {
- width: calc(100% - var(--thread-margin) + 2px);
- }
-
- .status__content__read-more-button {
- margin-inline-start: var(--thread-margin);
- }
- }
-
- &__action-bar__button-wrapper {
- flex-basis: 0;
-
- // glitch-soc: disable this for now; flex-grow: 1;
-
- &:last-child {
- flex-grow: 0;
- }
- }
-
- &--first-in-thread {
- border-top: 1px solid var(--background-border-color);
- }
-
- &__line {
- height: 10px - 4px;
- border-inline-start: 2px solid lighten($ui-base-color, 8%);
- width: 0;
- position: absolute;
- top: 0;
- inset-inline-start: 14px + ((46px - 2px) * 0.5);
-
- &--full {
- top: 0;
- height: 100%;
-
- &::before {
- content: '';
- display: block;
- position: absolute;
- top: 10px - 4px;
- height: 46px + 4px + 4px;
- width: 2px;
- background: $ui-base-color;
- inset-inline-start: -2px;
- }
- }
-
- &--first {
- top: 10px + 46px + 4px;
- height: calc(100% - (10px + 46px + 4px));
-
- &::before {
- display: none;
- }
- }
- }
-
- .no-reduce-motion &--highlighted-entry::before {
- content: '';
- position: absolute;
- inset: 0;
- background: rgb(from $ui-highlight-color r g b / 20%);
- opacity: 0;
- animation: fade 0.7s reverse both 0.3s;
- pointer-events: none;
- }
-}
-
-.status__relative-time {
- display: block;
- font-size: 14px;
- color: $dark-text-color;
- text-align: end;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.notification__relative_time {
- color: $dark-text-color;
- float: right;
- font-size: 14px;
- padding-bottom: 1px;
-}
-
-.status__display-name {
- color: $dark-text-color;
-}
-
-.status__info .status__display-name {
- max-width: 100%;
- display: flex;
- font-size: 15px;
- line-height: 22px;
- align-items: center;
- gap: 10px;
- overflow: hidden;
- margin-inline-end: auto;
-
- .display-name {
- bdi {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- &__account {
- white-space: nowrap;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
-}
-
-.status__quote-cancel {
- align-self: self-start;
- order: 5;
-}
-
-.status__info {
- font-size: 15px;
- padding-bottom: 10px;
- display: flex;
- align-items: start; // glitch: changed because of our different layout
- justify-content: space-between;
- gap: 10px;
- cursor: pointer;
-}
-
-.status__info__icons {
- display: flex;
- align-items: center;
- height: 1em;
- color: $action-button-color;
- gap: 4px;
-
- & > .icon {
- width: 16px;
- height: 16px;
- }
-}
-
-.status-check-box__status {
- display: block;
- box-sizing: border-box;
- width: 100%;
- padding: 0 10px;
-
- .detailed-status__display-name {
- color: $dark-text-color;
-
- span {
- display: inline;
- }
-
- &:hover strong {
- text-decoration: none;
- }
- }
-
- .media-gallery,
- .audio-player,
- .video-player {
- margin-top: 15px;
- max-width: 250px;
- }
-
- .status__content {
- padding: 0;
- white-space: normal;
- }
-
- .media-gallery__item-thumbnail {
- cursor: default;
- }
-}
-
-.status__prepend {
- padding: 8px 14px; // glitch: reduced padding
- padding-bottom: 0;
- display: flex;
- align-items: center;
- gap: 8px;
- font-size: 14px;
- line-height: 22px;
- font-weight: 500;
- color: $dark-text-color;
-
- &__icon {
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 0 0 auto;
-
- .icon {
- width: 16px;
- height: 16px;
- }
- }
-
- a {
- color: inherit;
- text-decoration: none;
- }
-
- > span {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-}
-
-.status__wrapper-direct,
-.notification-ungrouped--direct,
-.notification-group--direct,
-.notification-group--annual-report {
- background: color.change($ui-highlight-color, $alpha: 0.05);
-
- &:focus {
- background: color.change($ui-highlight-color, $alpha: 0.1);
- }
-}
-
-.status__wrapper-direct,
-.notification-ungrouped--direct {
- .status__prepend,
- .notification-ungrouped__header {
- color: $highlight-text-color;
- }
-}
-
-.status__action-bar {
- display: flex;
- align-items: center;
- gap: 18px;
- margin-top: 8px;
-
- &-spacer {
- flex-grow: 1;
- }
-}
-
-.detailed-status__action-bar-dropdown {
- flex: 1 1 auto;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
-}
-
-.detailed-status {
- padding: 14px 10px; // glitch: reduced padding
- border-top: 1px solid var(--background-border-color);
-
- .status__content {
- font-size: 19px;
- line-height: 24px;
-
- .emojione {
- width: 24px;
- height: 24px;
- margin: -1px 0 0;
- }
- }
-
- .media-gallery,
- .video-player,
- .audio-player {
- margin-top: 8px; // glitch: reduced margins
- }
-
- .status__prepend {
- padding: 0;
- margin-bottom: 16px;
- }
-
- .content-warning {
- margin-bottom: 16px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- .logo {
- width: 40px;
- height: 40px;
- color: $dark-text-color;
- }
-}
-
-.embed {
- position: relative;
-
- &__overlay {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-
- .detailed-status {
- border-top: 0;
- }
-}
-
-.scrollable > div:first-child .detailed-status {
- border-top: 0;
-}
-
-.detailed-status__meta {
- margin-top: 24px;
- color: $dark-text-color;
- font-size: 14px;
- line-height: 18px;
-
- &__line {
- border-bottom: 1px solid var(--background-border-color);
- padding: 8px 0;
- display: flex;
- align-items: center;
- gap: 8px;
-
- &:first-child {
- padding-top: 0;
- }
-
- &:last-child {
- padding-bottom: 0;
- border-bottom: 0;
- }
- }
-
- .icon {
- width: 18px;
- height: 18px;
- }
-
- .animated-number {
- color: $secondary-text-color;
- font-weight: 500;
- }
-}
-
-.detailed-status__action-bar {
- border-top: 1px solid var(--background-border-color);
- border-bottom: 1px solid var(--background-border-color);
- display: flex;
- flex-direction: row;
- padding: 8px 0; // glitch: reduced padding
-}
-
-.detailed-status__wrapper-direct {
- .detailed-status,
- .detailed-status__action-bar {
- background: color.mix($ui-base-color, $ui-highlight-color, 95%);
- }
-
- &:focus-visible {
- .detailed-status,
- .detailed-status__action-bar {
- background: color.mix(
- lighten($ui-base-color, 4%),
- $ui-highlight-color,
- 95%
- );
- }
- }
-
- .detailed-status__action-bar {
- border-top-color: color.mix(
- lighten($ui-base-color, 8%),
- $ui-highlight-color,
- 95%
- );
- }
-
- .status__prepend {
- color: $highlight-text-color;
- }
-}
-
-.status__quote {
- // --status-gutter-width is currently only set inside of
- // .notification-ungrouped, so everywhere else this will fall back
- // to the pixel values
- --quote-margin: var(--status-gutter-width);
-
- position: relative;
- margin-block-start: 16px;
- margin-inline-start: calc(var(--quote-margin) + var(--thread-margin, 0px));
- border-radius: 12px;
- color: var(--nested-card-text);
- border: 1px solid var(--surface-border-color);
-}
-
-.status__quote--error {
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 8px;
- padding: 12px;
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.25px;
- min-height: 56px;
-
- .link-button {
- font-size: inherit;
- line-height: inherit;
- letter-spacing: inherit;
- }
-}
-
-.status__quote-author-button {
- position: relative;
- overflow: hidden;
- display: flex;
- margin-top: 8px;
- padding: 8px 12px;
- align-items: center;
- font-family: inherit;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- letter-spacing: 0.25px;
- color: $darker-text-color;
- background: var(--surface-variant-background-color);
- border-radius: 8px;
- cursor: default;
-}
-
-.status--is-quote {
- border: none;
- padding: 12px;
-
- .status__info {
- padding-bottom: 8px;
- }
-
- .display-name,
- .status__relative-time {
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.1px;
- }
-
- .display-name__account {
- font-size: 12px;
- line-height: 16px;
- letter-spacing: 0.5px;
- }
-
- .status__content {
- display: -webkit-box;
- font-size: 14px;
- letter-spacing: 0.25px;
- line-height: 20px;
- -webkit-line-clamp: 4;
- line-clamp: 4;
- -webkit-box-orient: vertical;
- overflow: hidden;
-
- p {
- margin-bottom: 20px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
-
- .media-gallery,
- .video-player,
- .audio-player,
- .attachment-list,
- .poll {
- margin-top: 8px;
- }
-}
-
-.detailed-status__link {
- display: inline-flex;
- align-items: center;
- color: inherit;
- text-decoration: none;
- gap: 6px;
-}
-
-.domain {
- padding: 16px;
- border-bottom: 1px solid var(--background-border-color);
- display: flex;
- align-items: center;
- gap: 8px;
-
- &__domain-name {
- flex: 1 1 auto;
- color: $primary-text-color;
- font-size: 15px;
- line-height: 21px;
- font-weight: 500;
- }
-}
-
-.account {
- padding: 10px; // glitch: reduced padding
- border-bottom: 1px solid var(--background-border-color);
-
- .account__display-name {
- flex: 1 1 auto;
- display: flex;
- align-items: center;
- gap: 10px;
- color: $darker-text-color;
- overflow: hidden;
- text-decoration: none;
- font-size: 14px;
-
- .display-name {
- margin-bottom: 4px;
- }
-
- .display-name strong {
- display: inline;
- }
- }
-
- &--minimal {
- .account__display-name {
- .display-name {
- margin-bottom: 0;
- }
-
- .display-name strong {
- display: block;
- }
- }
- }
-
- &__avatar-wrapper .account__avatar {
- @container (width < 360px) {
- width: 35px !important;
- height: 35px !important;
- }
- }
-
- &__domain-pill {
- display: inline-flex;
- background: color.change($highlight-text-color, $alpha: 0.2);
- border-radius: 4px;
- border: 0;
- color: $highlight-text-color;
- font-weight: 500;
- font-size: 12px;
- line-height: 16px;
- padding: 4px 8px;
-
- &.active {
- color: $white;
- background: $ui-highlight-color;
- }
-
- &__popout {
- background: var(--dropdown-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--dropdown-border-color);
- box-shadow: var(--dropdown-shadow);
- max-width: 320px;
- padding: 16px;
- border-radius: 8px;
- display: flex;
- flex-direction: column;
- gap: 24px;
- font-size: 14px;
- line-height: 20px;
- color: $darker-text-color;
-
- .link-button {
- display: inline;
- font-size: inherit;
- line-height: inherit;
- }
-
- &__header {
- display: flex;
- align-items: center;
- gap: 12px;
-
- &__icon {
- width: 40px;
- height: 40px;
- background: $ui-highlight-color;
- color: $white;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- flex-shrink: 0;
- }
-
- h3 {
- font-size: 17px;
- line-height: 22px;
- color: $primary-text-color;
- }
- }
-
- &__handle {
- border: 2px dashed $highlight-text-color;
- background: color.change($highlight-text-color, $alpha: 0.1);
- padding: 12px 8px;
- color: $highlight-text-color;
- border-radius: 4px;
-
- &__label {
- font-size: 11px;
- line-height: 16px;
- font-weight: 500;
- }
-
- &__handle {
- overflow: hidden;
- text-overflow: ellipsis;
- user-select: all;
- }
- }
-
- &__parts {
- display: flex;
- flex-direction: column;
- gap: 8px;
- font-size: 12px;
- line-height: 16px;
-
- & > div {
- display: flex;
- align-items: flex-start;
- gap: 12px;
- }
-
- &__icon {
- width: 40px;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- color: $highlight-text-color;
- }
-
- h6 {
- font-size: 14px;
- line-height: 20px;
- font-weight: 500;
- color: $primary-text-color;
- }
- }
- }
- }
-
- &__note {
- font-size: 14px;
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- line-clamp: 1;
- -webkit-line-clamp: 1;
- -webkit-box-orient: vertical;
- margin-top: 10px;
- color: $darker-text-color;
-
- &--missing {
- color: $dark-text-color;
- }
-
- p {
- margin-bottom: 10px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- a {
- color: inherit;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
- }
-}
-
-.learn-more__popout {
- gap: 8px;
-
- &__content {
- display: flex;
- flex-direction: column;
- gap: 4px;
- }
-
- h6 {
- font-size: inherit;
- font-weight: 500;
- line-height: inherit;
- letter-spacing: 0.1px;
- }
-
- .link-button {
- font-weight: 500;
- }
-}
-
-.account__wrapper {
- display: flex;
- gap: 10px;
- align-items: center;
- justify-content: end;
-}
-
-.account__wrapper--with-bio {
- align-items: start;
-}
-
-.account__info-wrapper {
- flex: 1 1 auto;
- min-width: 0;
-}
-
-.account__avatar {
- display: block;
- position: relative;
- border-radius: var(--avatar-border-radius);
- background: var(--surface-background-color);
- flex-shrink: 0;
-
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- border-radius: var(--avatar-border-radius);
- display: inline-block; // to not show broken images
- }
-
- &--loading {
- background-color: var(--surface-background-color);
- }
-
- &--inline {
- display: inline-block;
- vertical-align: middle;
- margin-inline-end: 5px;
- }
-
- &-composite {
- overflow: hidden;
- position: relative;
-
- & > div {
- float: left;
- position: relative;
- box-sizing: border-box;
- }
-
- .account__avatar {
- width: 100% !important;
- height: 100% !important;
- }
-
- &__label {
- display: block;
- position: absolute;
- top: 50%;
- inset-inline-start: 50%;
- transform: translate(-50%, -50%);
- color: $primary-text-color;
- text-shadow: 1px 1px 2px $base-shadow-color;
- font-weight: 700;
- font-size: 15px;
- }
- }
-
- &__counter {
- $height: 16px;
- $h-padding: 5px;
-
- position: absolute;
- bottom: -3px;
- inset-inline-end: -3px;
- padding-left: $h-padding;
- padding-right: $h-padding;
- height: $height;
- border-radius: $height;
- min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle
- line-height: $height + 1px; // to visually center the numbers
- background-color: $ui-button-background-color;
- color: $white;
- border-width: 1px;
- border-style: solid;
- border-color: var(--background-color);
- font-size: 11px;
- font-weight: 500;
- text-align: center;
- }
-}
-
-a .account__avatar {
- cursor: pointer;
-}
-
-.avatar-group {
- display: flex;
-
- --avatar-height: 28px;
-
- &:not(.avatar-group--compact) {
- gap: 8px;
- flex-wrap: wrap;
- height: var(--avatar-height);
- overflow-y: clip;
- }
-}
-
-.avatar-group--compact {
- & > :not(:first-child) {
- margin-inline-start: -12px;
- }
-
- & > :first-child {
- transform: rotate(-4deg);
- }
-
- & > :nth-child(2) {
- transform: rotate(-2deg);
- }
-
- .account__avatar {
- box-shadow: 0 0 0 2px var(--background-color);
- }
-}
-
-.account__avatar-overlay {
- position: relative;
-
- &-overlay {
- position: absolute;
- bottom: 0;
- inset-inline-end: 0;
- z-index: 1;
- }
-}
-
-.account__relationship {
- white-space: nowrap;
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.account__relationship,
-.explore-suggestions-card {
- .icon-button {
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- box-sizing: content-box;
- padding: 5px;
-
- .icon {
- width: 24px;
- height: 24px;
- }
- }
-}
-
-.account-authorize {
- padding: 14px 10px;
-
- .detailed-status__display-name {
- display: block;
- margin-bottom: 15px;
- overflow: hidden;
- }
-}
-
-.account-authorize__avatar {
- float: left;
- margin-inline-end: 10px;
-}
-
-.status__display-name,
-.status__relative-time,
-.detailed-status__display-name,
-.detailed-status__datetime,
-.detailed-status__application,
-.detailed-status__link,
-.account__display-name {
- text-decoration: none;
-}
-
-.status__display-name,
-.account__display-name {
- .display-name strong {
- color: $primary-text-color;
- }
-}
-
-.muted {
- .emojione {
- opacity: 0.5;
- }
-}
-
-.status__display-name,
-.detailed-status__display-name,
-a.account__display-name {
- &:hover .display-name strong {
- text-decoration: underline;
- }
-}
-
-.account__display-name .display-name strong {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.detailed-status__application,
-.detailed-status__datetime,
-.detailed-status__link {
- color: inherit;
-}
-
-.detailed-status__display-name {
- color: $darker-text-color;
- display: flex;
- align-items: center;
- gap: 10px;
- font-size: 15px;
- line-height: 22px;
- margin-bottom: 16px;
- overflow: hidden;
-
- strong,
- span {
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
- }
-
- strong {
- color: $primary-text-color;
- }
-}
-
-.muted {
- .status__content,
- .status__content p,
- .status__content a {
- color: $dark-text-color;
- }
-
- .status__display-name strong {
- color: $dark-text-color;
- }
-
- .status__avatar {
- opacity: 0.5;
- }
-}
-
-.notification__report {
- padding: 10px; // glitch: reduced padding
- border-bottom: 1px solid var(--background-border-color);
- display: flex;
- gap: 10px;
-
- &__avatar {
- flex: 0 0 auto;
- }
-
- &__details {
- flex: 1 1 auto;
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: $darker-text-color;
- gap: 10px;
- font-size: 15px;
- line-height: 22px;
- white-space: nowrap;
- overflow: hidden;
-
- & > div {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- strong {
- font-weight: 500;
- }
- }
-
- &__actions {
- flex: 0 0 auto;
- }
-}
-
-.notification-group--link {
- color: $secondary-text-color;
- text-decoration: none;
-
- .notification-group__main {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 8px;
- flex-grow: 1;
- font-size: 15px;
- line-height: 22px;
-
- strong,
- bdi {
- font-weight: 700;
- }
-
- .link-button {
- font-size: inherit;
- line-height: inherit;
- font-weight: inherit;
- }
- }
-}
-
-.notification__message {
- padding: 8px 14px; // glitch: reduced padding
- padding-bottom: 0;
- cursor: default;
- color: $darker-text-color;
- font-size: 15px;
- line-height: 22px;
- font-weight: 500;
- display: flex;
- align-items: center;
- gap: 10px;
-
- .icon {
- color: $highlight-text-color;
- width: 18px;
- height: 18px;
- }
-
- .icon-star {
- color: $gold-star;
- }
-
- > span {
- display: inline;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-}
-
-.icon-button.star-icon.active {
- color: $gold-star;
-}
-
-.icon-button.bookmark-icon.active {
- color: $red-bookmark;
-}
-
-.no-reduce-motion .icon-button.star-icon {
- &.activate {
- & > .icon {
- animation: spring-rotate-in 1s linear;
- transform-origin: 50% 52%;
- }
- }
-
- &.deactivate {
- & > .icon {
- animation: spring-rotate-out 1s linear;
- transform-origin: 50% 52%;
- }
- }
-}
-
-.notification__display-name {
- color: inherit;
- font-weight: 500;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
-}
-
-.display-name {
- display: block;
- max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- &__account {
- text-overflow: ellipsis;
- overflow: hidden;
- }
-}
-
-.display-name__html {
- font-weight: 500;
-}
-
-.status__relative-time,
-.detailed-status__datetime,
-.detailed-status__link {
- &:is(a):hover {
- text-decoration: underline;
- }
-}
-
-.zoomable-image {
- position: relative;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- scrollbar-width: none;
- overflow: hidden;
- user-select: none;
-
- img {
- max-width: $media-modal-media-max-width;
- max-height: $media-modal-media-max-height;
- width: auto;
- height: auto;
- outline: 1px solid var(--media-outline-color);
- outline-offset: -1px;
- border-radius: 8px;
- touch-action: none;
- user-select: none;
- }
-
- &--zoomed-in {
- z-index: 9999;
- cursor: grab;
-
- img {
- outline: none;
- border-radius: 0;
- }
- }
-
- &--dragging {
- cursor: grabbing;
- }
-
- &--error img {
- visibility: hidden;
- }
-
- &__preview {
- max-width: $media-modal-media-max-width;
- max-height: $media-modal-media-max-height;
- position: absolute;
- z-index: 1;
- outline: 1px solid var(--media-outline-color);
- outline-offset: -1px;
- border-radius: 8px;
- overflow: hidden;
-
- canvas {
- position: absolute;
- width: 100%;
- height: 100%;
- object-fit: cover;
- z-index: -1;
- }
- }
-
- .loading-indicator {
- z-index: 2;
- mix-blend-mode: luminosity;
- }
-}
-
-.navigation-bar {
- display: flex;
- align-items: center;
- flex-shrink: 0;
- cursor: default;
- gap: 10px;
-
- .column > & {
- padding: 15px;
- }
-
- .account {
- border-bottom: 0;
- padding: 0;
- flex: 1 1 auto;
- min-width: 0;
-
- &__display-name {
- font-size: 14px;
- line-height: 20px;
- font-weight: 500;
-
- .display-name__account {
- font-size: 14px;
- font-weight: 400;
- }
- }
- }
-
- .icon-button {
- padding: 8px;
- color: $secondary-text-color;
- }
-
- .icon-button .icon {
- width: 24px;
- height: 24px;
- }
-}
-
-.dropdown-animation {
- animation: dropdown 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
-
- @keyframes dropdown {
- from {
- opacity: 0;
- }
-
- to {
- opacity: 1;
- }
- }
-
- .reduce-motion & {
- animation: none;
- }
-}
-
-.dropdown {
- display: inline-block;
-}
-
-.dropdown__content {
- display: none;
- position: absolute;
-}
-
-.dropdown-menu__separator {
- border-bottom: 1px solid var(--dropdown-border-color);
- margin: 2px 0; // glitch: reduced margins
- height: 0;
-}
-
-.dropdown-menu {
- background: var(--dropdown-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--dropdown-border-color);
- padding: 2px; // glitch: reduced padding
- border-radius: 4px;
- box-shadow: var(--dropdown-shadow);
- z-index: 9999;
-
- &__text-button {
- display: inline-flex;
- align-items: center;
- color: inherit;
- background: transparent;
- border: 0;
- margin: 0;
- padding: 0;
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
-
- &:focus-visible {
- outline: 1px dotted;
- }
-
- &:hover {
- text-decoration: underline;
- }
-
- .icon {
- width: 15px;
- height: 15px;
- }
- }
-
- &__container {
- &__header {
- border-bottom: 1px solid var(--dropdown-border-color);
- padding: 6px 14px; // glitch: reduced padding
- padding-bottom: 12px; // glitch: reduced padding
- margin-bottom: 4px;
- font-size: 13px;
- line-height: 18px;
- color: $darker-text-color;
- }
-
- &__list {
- list-style: none;
-
- &--scrollable {
- max-height: 300px;
- overflow-y: scroll;
- }
- }
-
- &--loading {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 30px 45px;
- }
- }
-
- &.left {
- transform-origin: 100% 50%;
- }
-
- &.top {
- transform-origin: 50% 100%;
- }
-
- &.bottom {
- transform-origin: 50% 0;
- }
-
- &.right {
- transform-origin: 0 50%;
- }
-}
-
-.dropdown-menu__item {
- font-size: 13px;
- line-height: 18px;
- font-weight: 500;
- display: block;
-
- &--dangerous {
- color: $error-value-color;
- }
-
- &--highlighted {
- color: $highlight-text-color;
- }
-
- &-content {
- display: flex;
- flex-direction: column;
- }
-
- &-subtitle {
- font-weight: 400;
- }
-
- a,
- button {
- font: inherit;
- display: flex;
- align-items: center;
- gap: 8px;
- white-space: inherit;
- width: 100%;
- padding: 6px 14px; // glitch: reduced padding
- border: 0;
- margin: 0;
- background: transparent;
- box-sizing: border-box;
- text-decoration: none;
- color: inherit;
- text-align: inherit;
- border-radius: 4px;
-
- &:focus,
- &:hover,
- &:active {
- &:not(:disabled, [aria-disabled='true']) {
- background: var(--dropdown-border-color);
- outline: 0;
- }
- }
- }
-
- button:disabled,
- button[aria-disabled='true'] {
- color: $dark-text-color;
- cursor: default;
-
- &:focus {
- color: rgb(from $dark-text-color r g b / 70%);
- background: var(--dropdown-border-color);
- outline: 0;
- }
- }
-}
-
-.reblog-menu-item {
- max-width: 360px;
-}
-
-.inline-account {
- display: inline-flex;
- align-items: center;
- vertical-align: top;
-
- .account__avatar {
- margin-inline-end: 5px;
- border-radius: 50%;
- }
-
- strong {
- font-weight: 600;
- }
-}
-
-.columns-area {
- display: flex;
- flex: 1 1 auto;
- flex-direction: row;
- justify-content: flex-start;
- position: relative;
-
- .layout-multiple-columns & {
- overflow-x: auto;
-
- &.unscrollable {
- overflow-x: hidden;
- }
- }
-
- &__panels {
- box-sizing: border-box;
- display: flex;
- justify-content: center;
- gap: 16px;
- width: 100%;
- height: 100%;
- min-height: 100vh;
- min-height: 100dvh;
- padding-inline: 10px;
- padding-bottom: env(safe-area-inset-bottom);
-
- &__pane {
- height: 100%;
- overflow: hidden;
- display: flex;
- justify-content: flex-end;
- min-width: 285px;
-
- &--start {
- justify-content: flex-start;
- }
-
- &__inner {
- position: fixed;
- width: 285px;
- height: 100%;
- }
- }
-
- &__main {
- --column-header-height: 62px;
-
- box-sizing: border-box;
- width: 100%;
- flex: 0 1 auto;
- display: flex;
- flex-direction: column;
- contain: inline-size layout paint style;
- container: column / inline-size;
-
- @media screen and (min-width: $no-gap-breakpoint) {
- max-width: 600px;
- }
- }
- }
-}
-
-.ui__navigation-bar {
- position: fixed;
- bottom: 0;
- z-index: 3;
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- gap: 8px;
- padding-bottom: env(safe-area-inset-bottom);
- background: var(--background-color);
- backdrop-filter: $backdrop-blur-filter;
- border-top: 1px solid var(--background-border-color);
- box-sizing: border-box;
-
- .layout-multiple-columns & {
- display: none;
- }
-
- &__items {
- display: grid;
- grid-auto-columns: minmax(0, 1fr);
- grid-auto-flow: column;
- padding: 0 16px;
-
- &.active {
- flex: 1;
- padding: 0;
- }
- }
-
- &__sign-up {
- display: flex;
- align-items: center;
- gap: 4px;
- padding-inline-start: 16px;
- }
-
- &__item {
- display: flex;
- flex-direction: column;
- align-items: center;
- background: transparent;
- border: none;
- gap: 8px;
- font-size: 12px;
- font-weight: 500;
- line-height: 16px;
- padding-top: 11px;
- padding-bottom: 15px;
- border-top: 4px solid transparent;
- text-decoration: none;
- color: inherit;
-
- &.active {
- color: $highlight-text-color;
- }
-
- &:focus {
- outline: 0;
- }
-
- &:focus-visible {
- border-top-color: $ui-button-focus-outline-color;
- border-radius: 0;
- }
- }
-}
-
-.tabs-bar__wrapper {
- background: var(--background-color);
- backdrop-filter: $backdrop-blur-filter;
- position: sticky;
- top: 0;
- z-index: 2;
- padding-top: 0;
-
- @media screen and (min-width: $no-gap-breakpoint) {
- padding-top: 10px;
- }
-}
-
-.react-swipeable-view-container {
- &,
- .columns-area,
- .drawer,
- .column {
- height: 100%;
- }
-}
-
-.react-swipeable-view-container > * {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
-}
-
-.column {
- width: 350px;
- position: relative;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
-
- > .scrollable {
- border: 1px solid var(--background-border-color);
- border-top: 0;
- border-radius: 0 0 4px 4px;
-
- &.about,
- &.privacy-policy {
- border-top: 1px solid var(--background-border-color);
- border-radius: 4px;
-
- @media screen and (max-width: $no-gap-breakpoint) {
- border-top: 0;
- border-bottom: 0;
- }
- }
- }
-}
-
-.column__alert {
- --alert-height: 54px;
-
- position: sticky;
- bottom: 0;
- z-index: 10;
- box-sizing: border-box;
- display: grid;
- grid-template-rows: minmax(var(--alert-height), max-content);
- align-items: end;
- width: 100%;
- max-width: 360px;
- padding: 1rem;
- margin: auto auto 0;
- overflow: clip;
- pointer-events: none;
-
- @media (max-width: #{$mobile-menu-breakpoint - 1}) {
- // Compensate for mobile menubar
- bottom: var(--mobile-bottom-nav-height);
- }
-
- & > * {
- // Make all nested alerts occupy the same space
- // rather than stack
- grid-area: 1 / 1;
- pointer-events: initial;
- }
-}
-
-.ui {
- --mobile-bottom-nav-height: 55px;
- --last-content-item-border-width: 2px;
-
- flex: 0 0 auto;
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
-
- @media (max-width: #{$mobile-menu-breakpoint - 1}) {
- padding-bottom: calc(
- var(--mobile-bottom-nav-height) - var(--last-content-item-border-width)
- );
- }
-}
-
-.drawer {
- width: 300px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- overflow-y: hidden;
-}
-
-.drawer__tab {
- display: flex;
- flex: 1 1 auto;
- padding: 13px 3px 11px;
- color: $darker-text-color;
- text-decoration: none;
- text-align: center;
- font-size: 16px;
- align-items: center;
- justify-content: center;
-}
-
-.column,
-.drawer {
- flex: 1 1 100%;
-}
-
-@media screen and (width > $mobile-breakpoint) {
- .columns-area {
- padding: 0;
- }
-
- .column,
- .drawer {
- flex: 0 0 auto;
- padding: 10px;
- padding-inline-start: 5px;
- padding-inline-end: 5px;
-
- &:first-child {
- padding-inline-start: 10px;
- }
-
- &:last-child {
- padding-inline-end: 10px;
- }
- }
-
- .columns-area > div {
- .column,
- .drawer {
- padding-inline-start: 5px;
- padding-inline-end: 5px;
- }
- }
-}
-
-.columns-area--mobile {
- flex-direction: column;
- width: 100%;
- height: 100%;
- margin: 0 auto;
-
- .column,
- .drawer {
- width: 100%;
- height: 100%;
- padding: 0;
- }
-
- .account-card {
- margin-bottom: 0;
- }
-
- .filter-form {
- display: flex;
- flex-wrap: wrap;
- }
-
- .autosuggest-textarea__textarea {
- font-size: 16px;
- }
-
- .search__input {
- line-height: 18px;
- font-size: 16px;
- padding-block: 15px;
- padding-inline-end: 30px;
- }
-
- .scrollable {
- overflow: visible;
-
- @supports (display: grid) {
- contain: content;
- }
- }
-
- @media screen and (min-width: $no-gap-breakpoint) {
- padding: 10px 0;
- padding-top: 0;
- }
-}
-
-@media screen and (min-width: $no-gap-breakpoint) {
- .react-swipeable-view-container .columns-area--mobile {
- height: calc(100% - 10px) !important;
- }
-
- .getting-started__wrapper {
- margin-bottom: 10px;
- }
-
- .search-page .search {
- display: none;
- }
-
- .navigation-panel__legal,
- .navigation-panel__compose-button,
- .navigation-panel .navigation-bar {
- display: none !important;
- }
-}
-
-@media screen and (max-width: ($no-gap-breakpoint - 1px)) {
- $sidebar-width: 285px;
-
- .columns-area__panels__main {
- width: calc(100% - $sidebar-width);
- }
-
- .columns-area__panels {
- min-height: 100vh;
- min-height: 100dvh;
- gap: 0;
- padding-inline: 0;
- }
-
- .columns-area__panels__pane--navigational {
- min-width: $sidebar-width;
-
- .columns-area__panels__pane__inner {
- width: $sidebar-width;
- }
-
- .navigation-panel {
- margin: 0;
- border-inline-start: 1px solid var(--background-border-color);
- height: 100dvh;
- }
-
- .navigation-panel__banner,
- .navigation-panel__logo,
- .getting-started__trends {
- display: none;
- }
- }
-
- .layout-single-column {
- .column > .scrollable,
- .tabs-bar__wrapper .column-header,
- .tabs-bar__wrapper .column-back-button,
- .explore__search-header,
- .column-search-header {
- border-left: 0;
- border-right: 0;
- }
-
- .column-header,
- .column-back-button,
- .scrollable,
- .error-column {
- border-radius: 0 !important;
- }
-
- .column-header,
- .column-back-button {
- border-top: 0;
- }
- }
-}
-
-@media screen and (width <= 759px) {
- .columns-area__panels__main {
- width: 100%;
- }
-
- .columns-area__panels__pane--navigational {
- position: fixed;
- inset-inline-end: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- }
-
- .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
- pointer-events: auto;
- background: var(--background-color);
- position: fixed;
- width: 284px + 70px;
- inset-inline-end: -70px;
- touch-action: pan-y;
-
- .navigation-panel {
- width: 284px;
- overflow-y: auto;
- scrollbar-width: thin;
-
- &__menu {
- flex-shrink: 0;
- min-height: none;
- overflow: hidden;
- padding-bottom: calc(65px + env(safe-area-inset-bottom));
- }
-
- &__logo {
- display: none;
- }
- }
- }
-}
-
-.columns-area__panels__pane--navigational {
- transition: background 500ms;
-}
-
-.columns-area__panels__pane--overlay {
- pointer-events: auto;
- background: color.change($base-overlay-background, $alpha: 0.5);
- z-index: 3;
-
- .columns-area__panels__pane__inner {
- box-shadow: var(--dropdown-shadow);
- }
-}
-
-@media screen and (width >= 760px) {
- .ui__navigation-bar {
- display: none;
- }
-}
-
-.explore-suggestions-card {
- padding: 12px 16px;
- gap: 8px;
- display: flex;
- flex-direction: column;
- border-bottom: 1px solid var(--background-border-color);
-
- &:last-child {
- border-bottom: 0;
- }
-
- &__source {
- font-size: 13px;
- line-height: 16px;
- color: $dark-text-color;
-
- @container (width >= 400px) {
- padding-inline-start: 60px;
- }
- }
-
- &__body {
- display: flex;
- gap: 12px;
- align-items: center;
- justify-content: end;
- }
-
- &__avatar {
- flex-shrink: 0;
-
- @container (width < 360px) {
- width: 35px !important;
- height: 35px !important;
- }
- }
-
- &__link {
- flex: 1 1 auto;
- display: flex;
- gap: 12px;
- align-items: center;
- text-decoration: none;
- min-width: 0;
-
- &:hover,
- &:focus-visible {
- .display-name__html {
- text-decoration: underline;
- }
- }
-
- .display-name {
- font-size: 15px;
- line-height: 20px;
- color: $secondary-text-color;
-
- strong {
- font-weight: 700;
- }
-
- &__account {
- color: $darker-text-color;
- display: block;
- }
- }
- }
-
- &__actions {
- display: flex;
- align-items: center;
- gap: 8px;
- justify-content: end;
-
- .button {
- min-width: 80px;
- }
- }
-
- &__dismiss-button {
- @container (width < 400px) {
- display: none;
- }
- }
-}
-
-@media screen and (max-width: ($no-gap-breakpoint - 1px)) {
- .columns-area__panels__pane--compositional {
- display: none;
- }
-}
-
-.icon-with-badge {
- display: inline-flex;
- position: relative;
-
- &__badge {
- position: absolute;
- inset-inline-start: 9px;
- top: -13px;
- background: $ui-highlight-color;
- border: 2px solid var(--background-color);
- padding: 1px 6px;
- border-radius: 6px;
- font-size: 10px;
- font-weight: 500;
- line-height: 14px;
- color: $primary-text-color;
- }
-
- &__issue-badge {
- position: absolute;
- inset-inline-start: 11px;
- bottom: 1px;
- display: block;
- background: $error-red;
- border-radius: 50%;
- width: 0.625rem;
- height: 0.625rem;
- }
-}
-
-.column-link--transparent .icon-with-badge__badge {
- border-color: var(--background-color);
-}
-
-.column-title {
- text-align: center;
- padding-bottom: 32px;
-
- h3 {
- font-size: 24px;
- line-height: 1.5;
- font-weight: 700;
- margin-bottom: 10px;
- }
-
- p {
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
- color: $darker-text-color;
- }
-
- @media screen and (width >= 600px) {
- padding: 40px;
- }
-}
-
-.copy-paste-text {
- background: lighten($ui-base-color, 4%);
- border-radius: 8px;
- border: 1px solid var(--background-border-color);
- padding: 16px;
- color: $primary-text-color;
- font-size: 15px;
- line-height: 22px;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- transition: border-color 300ms linear;
- margin-bottom: 30px;
-
- &:focus,
- &.focused {
- transition: none;
- outline: 0;
- border-color: $highlight-text-color;
- }
-
- &.copied {
- border-color: $valid-value-color;
- transition: none;
- }
-
- textarea {
- width: 100%;
- height: auto;
- background: transparent;
- color: inherit;
- font: inherit;
- border: 0;
- padding: 0;
- margin-bottom: 30px;
- resize: none;
-
- &:focus {
- outline: 0;
- }
- }
-}
-
-.onboarding__profile {
- position: relative;
- margin-bottom: 40px + 20px;
- margin-top: -20px;
-
- .app-form__avatar-input {
- border: 2px solid var(--background-color);
- position: absolute;
- inset-inline-start: -2px;
- bottom: -40px;
- z-index: 2;
- }
-
- .app-form__header-input {
- margin: 0 -20px;
- border-radius: 0;
-
- img {
- border-radius: 0;
- }
- }
-}
-
-.compose-panel {
- width: 285px;
- margin-top: 10px;
- display: flex;
- flex-direction: column;
- height: calc(100% - 10px);
- overflow-y: auto;
-
- .compose-form {
- flex: 1 1 auto;
- }
-}
-
-.navigation-panel {
- margin-top: 10px;
- margin-bottom: 10px;
- height: calc(100% - 20px);
- overflow: hidden;
- display: flex;
- flex-direction: column;
-
- &__menu {
- flex: 1 1 auto;
- min-height: 0;
- overflow-y: auto;
- }
-
- &__list-panel {
- &__header {
- display: flex;
- align-items: center;
- padding-inline-end: 4px;
-
- &__sep {
- width: 0;
- height: 24px;
- border-left: 1px solid var(--background-border-color);
- }
-
- .column-link {
- flex: 1 1 auto;
- }
-
- .icon-button {
- padding: 8px;
- }
- }
-
- &__items {
- padding-inline-start: 24px + 8px;
-
- .icon {
- display: none;
- }
- }
- }
-
- &__compose-button {
- display: flex;
- justify-content: flex-start;
- padding-top: 8px;
- padding-bottom: 8px;
- padding-inline-start: 12px - 7px;
- padding-inline-end: 12px;
- gap: 8px;
- margin: 12px;
- border-radius: 6px;
- font-size: 16px;
- font-weight: 600;
- line-height: 18px;
-
- .icon {
- width: 24px;
- height: 24px;
- }
- }
-
- .navigation-bar {
- padding: 16px;
- }
-
- .search {
- margin: 16px;
- margin-bottom: 12px;
- }
-
- .logo {
- height: 30px;
- width: auto;
- }
-
- &__logo {
- margin-bottom: 12px;
- }
-
- .getting-started__trends h4 {
- padding: 10px 12px;
- padding-inline-start: 16px;
- }
-
- .getting-started__trends .trends__item {
- padding: 10px 12px;
- padding-inline-start: 16px;
- }
-
- @media screen and (height <= 930px) {
- &__portal .trends__item:nth-child(n + 5) {
- display: none;
- }
- }
-
- @media screen and (height <= (930px - 56px)) {
- &__portal .trends__item:nth-child(n + 4) {
- display: none;
- }
- }
-
- @media screen and (height <= (930px - 56px * 2)) {
- &__portal .trends__item:nth-child(n + 3) {
- display: none;
- }
- }
-
- @media screen and (height <= (930px - 56px * 3)) {
- &__portal {
- display: none;
- }
- }
-}
-
-.navigation-panel,
-.compose-panel {
- hr {
- flex: 0 0 auto;
- border: 0;
- background: transparent;
- border-top: 1px solid var(--background-border-color);
- margin: 10px 0;
- }
-
- .flex-spacer {
- background: transparent;
- }
-}
-
-.drawer__pager {
- box-sizing: border-box;
- padding: 0;
- flex-grow: 1;
- position: relative;
- overflow: hidden;
- display: flex;
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
-}
-
-.drawer__inner {
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- background: var(--background-color);
- box-sizing: border-box;
- padding: 0;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- overflow-y: auto;
- width: 100%;
- height: 100%;
- z-index: 0;
-}
-
-.drawer__inner__mastodon {
- background: var(--background-color)
- url('data:image/svg+xml;utf8,')
- no-repeat bottom / 100% auto;
- flex: 1;
- min-height: 47px;
- display: none;
-
- > img {
- display: block;
- object-fit: contain;
- object-position: bottom left;
- width: 85%;
- height: 100%;
- pointer-events: none;
- user-select: none;
- }
-
- @media screen and (height >= 640px) {
- display: block;
- }
-}
-
-.drawer__header {
- flex: 0 0 auto;
- font-size: 16px;
- border: 1px solid var(--background-border-color);
- margin-bottom: 10px;
- display: flex;
- flex-direction: row;
- border-radius: 4px;
- overflow: hidden;
-
- a:hover,
- a:focus,
- a:active {
- color: $primary-text-color;
- }
-}
-
-.scrollable {
- overflow-y: scroll;
- overflow-x: hidden;
- flex: 1 1 auto;
- -webkit-overflow-scrolling: touch;
-
- &.optionally-scrollable {
- overflow-y: auto;
- }
-
- @supports (display: grid) {
- // hack to fix Chrome <57
- contain: strict;
- }
-
- &--flex {
- display: flex;
- flex-direction: column;
- }
-
- &__append {
- flex: 1 1 auto;
- position: relative;
- min-height: 120px;
- }
-
- .scrollable {
- flex: 1 1 auto;
- }
-}
-
-.scrollable.fullscreen {
- @supports (display: grid) {
- // hack to fix Chrome <57
- contain: none;
- }
-}
-
-.column-back-button {
- box-sizing: border-box;
- width: 100%;
- background: transparent;
- border: 1px solid var(--background-border-color);
- border-radius: 4px 4px 0 0;
- color: $highlight-text-color;
- cursor: pointer;
- flex: 0 0 auto;
- font-size: 16px;
- line-height: inherit;
- text-align: unset;
- padding: 13px;
- margin: 0;
- z-index: 3;
- outline: 0;
- display: flex;
- align-items: center;
- gap: 5px;
-
- &:hover {
- text-decoration: underline;
- }
-}
-
-.column-header__back-button {
- display: flex;
- align-items: center;
- gap: 5px;
- background: transparent;
- border: 0;
- font-family: inherit;
- color: $highlight-text-color;
- cursor: pointer;
- white-space: nowrap;
- font-size: 16px;
- padding: 13px;
- z-index: 3;
-
- &:hover {
- text-decoration: underline;
- }
-
- &.compact {
- padding-inline-end: 5px;
- flex: 0 0 auto;
- }
-}
-
-.react-toggle {
- display: inline-block;
- position: relative;
- cursor: pointer;
- background-color: transparent;
- border: 0;
- border-radius: 10px;
- padding: 0;
- user-select: none;
- -webkit-tap-highlight-color: color.change(
- $base-overlay-background,
- $alpha: 0
- );
- -webkit-tap-highlight-color: transparent;
-}
-
-.react-toggle-screenreader-only,
-.sr-only {
- border: 0;
- clip-path: inset(50%);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
-}
-
-.react-toggle--disabled {
- cursor: not-allowed;
- opacity: 0.5;
- transition: opacity 0.25s;
-}
-
-.react-toggle-track {
- width: 32px;
- height: 20px;
- padding: 0;
- border-radius: 10px;
- background-color: $ui-primary-color;
-}
-
-.react-toggle--focus {
- outline: $ui-button-focus-outline;
-}
-
-.react-toggle--checked .react-toggle-track {
- background-color: $ui-highlight-color;
-}
-
-.react-toggle-track-check,
-.react-toggle-track-x {
- display: none;
-}
-
-.react-toggle-thumb {
- position: absolute;
- top: 2px;
- inset-inline-start: 2px;
- width: 16px;
- height: 16px;
- border-radius: 50%;
- background-color: $ui-button-color;
- box-sizing: border-box;
- transition: all 0.25s ease;
- transition-property: border-color, left;
-}
-
-.react-toggle--checked .react-toggle-thumb {
- inset-inline-start: 32px - 16px - 2px;
- border-color: $ui-highlight-color;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
- background: darken($ui-primary-color, 5%);
-}
-
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
- .react-toggle-track {
- background: lighten($ui-highlight-color, 5%);
-}
-
-.follow_requests-unlocked_explanation,
-.switch-to-advanced {
- color: $light-text-color;
- background-color: $ui-base-color;
- padding: 15px;
- border-radius: 4px;
- margin-top: 4px;
- margin-bottom: 12px;
- font-size: 13px;
- line-height: 18px;
-
- a {
- color: $ui-button-tertiary-color;
- font-weight: bold;
- }
-}
-
-.column-link {
- display: flex;
- align-items: center;
- gap: 8px;
- width: 100%;
- padding: 12px;
- font-size: 16px;
- font-weight: 400;
- text-decoration: none;
- overflow: hidden;
- white-space: nowrap;
- color: $secondary-text-color;
- background: transparent;
- border: 0;
- border-left: 4px solid transparent;
- box-sizing: border-box;
-
- &:hover,
- &:focus,
- &:active {
- color: $primary-text-color;
- }
-
- &.active {
- color: $highlight-text-color;
- }
-
- &:focus {
- outline: 0;
- }
-
- &:focus-visible {
- border-color: $ui-button-focus-outline-color;
- border-radius: 0;
- }
-
- &--logo {
- background: transparent;
- padding: 10px;
-
- &:hover,
- &:focus,
- &:active {
- background: transparent;
- }
- }
-}
-
-.column-link__badge {
- display: inline-block;
- border-radius: 4px;
- font-size: 12px;
- line-height: 19px;
- font-weight: 500;
- background: $ui-base-color;
- padding: 4px 8px;
- margin: -6px 10px;
-}
-
-.column-subheading {
- background: var(--surface-background-color);
- color: $darker-text-color;
- padding: 8px 20px;
- font-size: 12px;
- font-weight: 500;
- text-transform: uppercase;
- cursor: default;
-}
-
-.getting-started__wrapper {
- flex: 0 0 auto;
-}
-
-.flex-spacer {
- flex: 1 1 auto;
-}
-
-.getting-started {
- color: $dark-text-color;
- overflow: auto;
- border: 1px solid var(--background-border-color);
- border-top: 0;
-
- &__trends {
- flex: 0 1 auto;
- opacity: 1;
- animation: fade 150ms linear;
- margin-top: 10px;
-
- h4 {
- border-bottom: 1px solid var(--background-border-color);
- padding: 10px;
- font-size: 12px;
- text-transform: uppercase;
- font-weight: 500;
-
- a {
- color: $darker-text-color;
- text-decoration: none;
- }
- }
-
- .trends__item {
- border-bottom: 0;
- padding: 10px;
-
- &__current {
- color: $darker-text-color;
- }
- }
- }
-}
-
-.keyboard-shortcuts {
- padding: 8px 0 0;
- overflow: hidden;
-
- thead {
- position: absolute;
- inset-inline-start: -9999px;
- }
-
- td {
- padding: 0 10px 8px;
- }
-
- kbd {
- display: inline-block;
- padding: 3px 5px;
- background-color: lighten($ui-base-color, 8%);
- border: 1px solid darken($ui-base-color, 4%);
- }
-}
-
-input.glitch-setting-text {
- box-sizing: border-box;
- color: $darker-text-color;
- background: transparent;
- border: 0;
- border-bottom: 2px solid $ui-primary-color;
- outline: 0;
- font-family: inherit;
- margin-bottom: 10px;
- padding: 7px 0;
- width: 100%;
-
- &:focus,
- &:active {
- color: $primary-text-color;
- border-bottom-color: $ui-highlight-color;
- }
-
- @media screen and (width <= 600px) {
- font-size: 16px;
- }
-}
-
-.status-card {
- display: flex;
- align-items: center;
- position: relative;
- font-size: 14px;
- color: $darker-text-color;
- margin-top: 14px;
- text-decoration: none;
- overflow: hidden;
- border: 1px solid var(--background-border-color);
- border-radius: 8px;
- contain: inline-size layout paint style;
-
- &.bottomless {
- border-radius: 8px 8px 0 0;
- }
-
- &__actions {
- bottom: 0;
- inset-inline-start: 0;
- position: absolute;
- inset-inline-end: 0;
- top: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
-
- & > div {
- background: color.change($base-shadow-color, $alpha: 0.6);
- border-radius: 8px;
- padding: 12px 9px;
- backdrop-filter: $backdrop-blur-filter;
- flex: 0 0 auto;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- button,
- a {
- display: inline;
- color: $secondary-text-color;
- background: transparent;
- border: 0;
- padding: 0 8px;
- text-decoration: none;
- font-size: 18px;
- line-height: 18px;
-
- &:hover,
- &:active,
- &:focus {
- color: $primary-text-color;
- }
- }
-
- a {
- font-size: 19px;
- position: relative;
- bottom: -1px;
- }
- }
-}
-
-a.status-card {
- cursor: pointer;
-
- &:hover,
- &:focus,
- &:active {
- .status-card__title,
- .status-card__host,
- .status-card__author,
- .status-card__description {
- color: $highlight-text-color;
- }
- }
-}
-
-.status-card a {
- color: inherit;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- .status-card__title,
- .status-card__host,
- .status-card__author,
- .status-card__description {
- color: $highlight-text-color;
- }
- }
-}
-
-.status-card-photo {
- cursor: zoom-in;
- display: block;
- text-decoration: none;
- width: 100%;
- height: auto;
- margin: 0;
-}
-
-.status-card-video {
- // Firefox has a bug where frameborder=0 iframes add some extra blank space
- // see https://bugzilla.mozilla.org/show_bug.cgi?id=155174
- overflow: hidden;
-
- iframe {
- width: 100%;
- height: 100%;
- }
-}
-
-.status-card__title {
- display: block;
- font-weight: 700;
- font-size: 19px;
- line-height: 24px;
- color: $primary-text-color;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.status-card.expanded .status-card__title {
- white-space: normal;
- display: -webkit-box;
- line-clamp: 2;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
-}
-
-.status-card__content {
- flex: 1 1 auto;
- overflow: hidden;
- padding: 8px 10px; // glitch: reduced padding
- box-sizing: border-box;
- max-width: 100%;
-}
-
-.status-card__host {
- display: block;
- font-size: 14px;
- margin-bottom: 8px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.status-card__author {
- display: block;
- margin-top: 8px;
- font-size: 14px;
- color: $primary-text-color;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-
- strong {
- font-weight: 500;
- }
-}
-
-.status-card__description {
- display: block;
- margin-top: 8px;
- font-size: 14px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.status-card__image {
- flex: 0 0 auto;
- width: 96px; // glitch: intentional change to better use space
- aspect-ratio: 1;
- background: lighten($ui-base-color, 8%);
- position: relative;
-
- & > .icon {
- width: 18px;
- height: 18px;
- position: absolute;
- transform-origin: 50% 50%;
- top: 50%;
- inset-inline-start: 50%;
- transform: translate(-50%, -50%);
- }
-}
-
-.status-card__image-image {
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- background-size: cover;
- background-position: center center;
-}
-
-.status-card__image-preview {
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- object-fit: fill;
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- z-index: 0;
- background: $base-overlay-background;
-
- &--hidden {
- display: none;
- }
-}
-
-.status-card.expanded {
- flex-direction: column;
- align-items: flex-start;
-}
-
-.status-card.expanded .status-card__image {
- width: 100%;
- aspect-ratio: auto;
-}
-
-.status-card__image,
-.status-card__image-image,
-.status-card__image-preview {
- border-start-start-radius: 8px;
- border-start-end-radius: 0;
- border-end-end-radius: 0;
- border-end-start-radius: 8px;
-}
-
-.status-card.expanded .status-card__image,
-.status-card.expanded .status-card__image-image,
-.status-card.expanded .status-card__image-preview {
- border-start-end-radius: 8px;
- border-end-end-radius: 0;
- border-end-start-radius: 0;
-}
-
-.status-card.bottomless .status-card__image,
-.status-card.bottomless .status-card__image-image,
-.status-card.bottomless .status-card__image-preview {
- border-end-end-radius: 0;
- border-end-start-radius: 0;
-}
-
-.status-card.expanded > a {
- width: 100%;
-}
-
-.load-more {
- display: flex;
- align-items: center;
- justify-content: center;
- color: $dark-text-color;
- background-color: transparent;
- border: 0;
- font-size: inherit;
- line-height: inherit;
- width: 100%;
- padding: 15px;
- box-sizing: border-box;
- text-decoration: none;
-
- &--large {
- padding-block: 32px;
- }
-
- &:is(button) {
- &:hover {
- background: var(--on-surface-color);
- }
-
- &:focus-visible {
- outline: 2px solid $ui-button-focus-outline-color;
- outline-offset: -2px;
- }
- }
-
- .icon {
- width: 22px;
- height: 22px;
- }
-}
-
-.load-gap {
- border-bottom: 1px solid var(--background-border-color);
-}
-
-.timeline-hint {
- text-align: center;
- color: $dark-text-color;
- padding: 16px;
- box-sizing: border-box;
- width: 100%;
- font-size: 14px;
- line-height: 21px;
-
- strong {
- font-weight: 500;
- }
-
- a {
- color: $highlight-text-color;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- color: lighten($highlight-text-color, 4%);
- }
- }
-
- &--with-descendants {
- border-top: 1px solid var(--background-border-color);
- }
-}
-
-.regeneration-indicator {
- color: $darker-text-color;
- border: 1px solid var(--background-border-color);
- border-top: 0;
- cursor: default;
- display: flex;
- flex: 1 1 auto;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 20px;
-
- &__figure {
- display: block;
- width: 100%;
- height: auto;
- max-width: 350px;
- margin-top: -50px;
- }
-
- &__label {
- text-align: center;
- font-size: 16px;
-
- strong {
- font-weight: 500;
- display: block;
- margin-bottom: 10px;
- color: $darker-text-color;
- }
-
- span {
- font-size: 15px;
- }
- }
-}
-
-.column-header__wrapper {
- position: relative;
- flex: 0 0 auto;
- z-index: 1;
-
- &.active {
- box-shadow: 0 1px 0 color.change($highlight-text-color, $alpha: 0.3);
-
- &::before {
- display: block;
- content: '';
- position: absolute;
- bottom: -13px;
- inset-inline-start: 0;
- inset-inline-end: 0;
- margin: 0 auto;
- width: 60%;
- pointer-events: none;
- height: 28px;
- z-index: 1;
- background: radial-gradient(
- ellipse,
- color.change($ui-highlight-color, $alpha: 0.23) 0%,
- color.change($ui-highlight-color, $alpha: 0) 60%
- );
- }
- }
-
- .announcements {
- z-index: 1;
- position: relative;
- }
-}
-
-.column-header__select-row {
- border-width: 0 1px 1px;
- border-style: solid;
- border-color: var(--background-border-color);
- padding: 15px;
- display: flex;
- align-items: center;
- gap: 8px;
-
- &__checkbox .check-box {
- display: flex;
- }
-
- &__select-menu:disabled {
- visibility: hidden;
- }
-
- &__mode-button {
- margin-left: auto;
- color: $highlight-text-color;
- font-weight: bold;
- font-size: 14px;
-
- &:hover {
- color: lighten($highlight-text-color, 6%);
- }
- }
-}
-
-.column-header {
- display: flex;
- font-size: 16px;
- border: 1px solid var(--background-border-color);
- border-radius: 4px 4px 0 0;
- flex: 0 0 auto;
- cursor: pointer;
- position: relative;
- z-index: 2;
- outline: 0;
-
- &__title {
- display: flex;
- align-items: center;
- gap: 5px;
- margin: 0;
- border: 0;
- padding: 13px;
- padding-inline-end: 0;
- color: inherit;
- background: transparent;
- font: inherit;
- text-align: start;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- flex: 1;
-
- &:focus-visible {
- outline: $ui-button-icon-focus-outline;
- }
-
- .logo {
- height: 24px;
- }
- }
-
- .column-header__back-button + &__title {
- padding-inline-start: 0;
- }
-
- .column-header__back-button {
- flex: 1;
- color: $highlight-text-color;
-
- &.compact {
- flex: 0 0 auto;
- color: $primary-text-color;
- }
- }
-
- &.active {
- .column-header__icon {
- color: $highlight-text-color;
- text-shadow: 0 0 10px color.change($highlight-text-color, $alpha: 0.4);
- }
- }
-
- &:focus,
- &:active {
- outline: 0;
- }
-
- &__advanced-buttons {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 16px;
- padding-top: 0;
-
- &:first-child {
- padding-top: 16px;
- }
- }
-}
-
-.column-header__buttons {
- height: 48px;
- display: flex;
-}
-
-.column-header__links {
- margin-bottom: 14px;
-}
-
-.column-header__links .text-btn {
- margin-inline-end: 10px;
-}
-
-.column-header__button {
- display: flex;
- justify-content: center;
- align-items: center;
- border: 0;
- color: $darker-text-color;
- background: transparent;
- cursor: pointer;
- font-size: 16px;
- padding: 0 15px;
-
- &:last-child {
- border-start-end-radius: 4px;
- }
-
- &:hover {
- color: lighten($darker-text-color, 4%);
- }
-
- &:focus-visible {
- outline: $ui-button-focus-outline;
- }
-
- &.active {
- color: $primary-text-color;
-
- &:hover {
- color: $primary-text-color;
- }
- }
-
- &:disabled {
- color: $dark-text-color;
- cursor: default;
- }
-}
-
-.no-reduce-motion .column-header__button .icon-sliders {
- transition: transform 150ms ease-in-out;
-}
-
-.column-header__collapsible {
- max-height: 70vh;
- overflow: hidden;
- overflow-y: auto;
- color: $darker-text-color;
- transition:
- max-height 150ms ease-in-out,
- opacity 300ms linear;
- opacity: 1;
- z-index: 1;
- position: relative;
- border-left: 1px solid var(--background-border-color);
- border-right: 1px solid var(--background-border-color);
- border-bottom: 1px solid var(--background-border-color);
-
- @media screen and (max-width: $no-gap-breakpoint) {
- border-left: 0;
- border-right: 0;
- }
-
- &.collapsed {
- max-height: 0;
- opacity: 0.5;
- border-bottom: 0;
- }
-
- &.animating {
- overflow-y: hidden;
- }
-
- hr {
- height: 0;
- background: transparent;
- border: 0;
- border-top: 1px solid var(--background-border-color);
- margin: 10px 0;
- }
-}
-
-.column-header__collapsible-inner {
- border-top: 0;
-}
-
-.column-header__setting-btn {
- &:hover,
- &:focus {
- color: $darker-text-color;
- text-decoration: underline;
- }
-}
-
-.column-header__collapsible__extra + .column-header__setting-btn {
- padding-top: 5px;
-}
-
-.column-header__permission-btn {
- display: inline;
- font-weight: inherit;
- text-decoration: underline;
-}
-
-.column-header__setting-arrows {
- display: flex;
- align-items: center;
-}
-
-.column-settings__pillbar {
- display: flex;
- overflow: hidden;
- background-color: transparent;
- border: 0;
- border-radius: 4px;
- margin-bottom: 10px;
- align-items: stretch;
- gap: 2px;
-}
-
-.pillbar-button {
- border: 0;
- color: #fafafa;
- padding: 2px;
- margin: 0;
- font-size: inherit;
- flex: auto;
- background-color: lighten($ui-base-color, 8%);
- transition: all 0.2s ease;
- transition-property: background-color, box-shadow;
-
- &[disabled] {
- cursor: not-allowed;
- opacity: 0.5;
- }
-
- &:not([disabled]) {
- &:hover,
- &:focus {
- background-color: darken($ui-base-color, 10%);
- }
-
- &.active {
- background-color: darken($ui-highlight-color, 2%);
-
- &:hover,
- &:focus {
- background-color: $ui-highlight-color;
- }
- }
- }
-}
-
-.text-btn {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- padding: 0;
- font-family: inherit;
- font-size: inherit;
- font-weight: inherit;
- color: inherit;
- border: 0;
- background: transparent;
- cursor: pointer;
- text-decoration: none;
-
- .icon {
- width: 13px;
- height: 13px;
- }
-}
-
-.column-header__issue-btn {
- color: $warning-red;
-
- &:hover {
- color: $error-red;
- text-decoration: underline;
- }
-}
-
-.loading-indicator {
- color: $dark-text-color;
- font-size: 12px;
- font-weight: 400;
- text-transform: uppercase;
- overflow: visible;
- position: absolute;
- top: 50%;
- inset-inline-start: 50%;
- transform: translate(-50%, -50%);
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.load-more .loading-indicator,
-.button .loading-indicator,
-.icon-button .loading-indicator {
- position: static;
- transform: none;
- color: inherit;
-
- .circular-progress {
- color: inherit;
- width: 22px;
- height: 22px;
- }
-}
-
-.button--compact .loading-indicator .circular-progress {
- width: 17px;
- height: 17px;
-}
-
-.icon-button .loading-indicator .circular-progress {
- color: lighten($ui-base-color, 26%);
- width: 12px;
- height: 12px;
- margin: 6px;
-}
-
-.load-more .loading-indicator .circular-progress {
- color: lighten($ui-base-color, 26%);
-}
-
-.circular-progress {
- color: lighten($ui-base-color, 26%);
- animation: 1.4s linear 0s infinite normal none running simple-rotate;
-
- circle {
- stroke: currentColor;
- stroke-dasharray: 80px, 200px;
- stroke-dashoffset: 0;
- animation: circular-progress 1.4s ease-in-out infinite;
- }
-}
-
-@keyframes circular-progress {
- 0% {
- stroke-dasharray: 1px, 200px;
- stroke-dashoffset: 0;
- }
-
- 50% {
- stroke-dasharray: 100px, 200px;
- stroke-dashoffset: -15px;
- }
-
- 100% {
- stroke-dasharray: 100px, 200px;
- stroke-dashoffset: -125px;
- }
-}
-
-@keyframes simple-rotate {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(360deg);
- }
-}
-
-@keyframes spring-rotate-in {
- 0% {
- transform: rotate(0deg);
- }
-
- 30% {
- transform: rotate(-484.8deg);
- }
-
- 60% {
- transform: rotate(-316.7deg);
- }
-
- 90% {
- transform: rotate(-375deg);
- }
-
- 100% {
- transform: rotate(-360deg);
- }
-}
-
-@keyframes spring-rotate-out {
- 0% {
- transform: rotate(-360deg);
- }
-
- 30% {
- transform: rotate(124.8deg);
- }
-
- 60% {
- transform: rotate(-43.27deg);
- }
-
- 90% {
- transform: rotate(15deg);
- }
-
- 100% {
- transform: rotate(0deg);
- }
-}
-
-.video-error-cover {
- align-items: center;
- background: $base-overlay-background;
- color: $primary-text-color;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- height: 100%;
- justify-content: center;
- margin-top: 8px;
- position: relative;
- text-align: center;
- z-index: 100;
-}
-
-.spoiler-button {
- top: 0;
- inset-inline-start: 0;
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 100;
-
- &--hidden {
- display: none;
- }
-
- &--click-thru {
- pointer-events: none;
- }
-
- &__overlay {
- display: flex;
- align-items: center;
- justify-content: center;
- background: transparent;
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
- border: 0;
- color: $white;
- line-height: 20px;
- font-size: 14px;
-
- &__label {
- background-color: color.change($black, $alpha: 0.45);
- backdrop-filter: $backdrop-blur-filter;
- border-radius: 8px;
- padding: 12px 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 4px;
- flex-direction: column;
- font-weight: 600;
- }
-
- &__action {
- font-weight: 400;
- font-size: 13px;
- }
-
- &:hover,
- &:focus {
- .spoiler-button__overlay__label {
- background-color: color.change($black, $alpha: 0.9);
- }
- }
- }
-}
-
-.modal-container--preloader {
- background: lighten($ui-base-color, 8%);
-}
-
-.account--panel {
- border-top: 1px solid var(--background-border-color);
- border-bottom: 1px solid var(--background-border-color);
- display: flex;
- flex-direction: row;
- padding: 10px 0;
-}
-
-.account--panel__button,
-.detailed-status__button {
- flex: 1 1 auto;
- text-align: center;
-}
-
-.column-settings {
- display: flex;
- flex-direction: column;
-
- &__section {
- // FIXME: Legacy
- color: $darker-text-color;
- cursor: default;
- display: block;
- font-weight: 500;
- }
-
- .column-header__links {
- margin: 0;
- }
-
- section {
- padding: 16px;
- border-bottom: 1px solid var(--background-border-color);
-
- &:last-child {
- border-bottom: 0;
- }
- }
-
- h3 {
- font-size: 16px;
- line-height: 24px;
- letter-spacing: 0.5px;
- font-weight: 500;
- color: $primary-text-color;
- margin-bottom: 16px;
- }
-
- &__row {
- display: flex;
- flex-direction: column;
- gap: 12px;
- }
-
- .app-form__toggle {
- &__toggle > div {
- border: 0;
- }
- }
-}
-
-.column-settings__hashtags {
- margin-top: 15px;
-
- .column-settings__row {
- margin-bottom: 15px;
- }
-
- .column-select {
- &__control {
- @include search-input;
-
- &::placeholder {
- color: lighten($darker-text-color, 4%);
- }
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
- &:focus {
- background: lighten($ui-base-color, 4%);
- }
-
- @media screen and (width <= 600px) {
- font-size: 16px;
- }
- }
-
- &__placeholder {
- color: $dark-text-color;
- padding-inline-start: 2px;
- font-size: 12px;
- }
-
- &__value-container {
- padding-inline-start: 6px;
- }
-
- &__multi-value {
- background: lighten($ui-base-color, 8%);
-
- &__remove {
- cursor: pointer;
-
- &:hover,
- &:active,
- &:focus {
- background: lighten($ui-base-color, 12%);
- color: lighten($darker-text-color, 4%);
- }
- }
- }
-
- &__multi-value__label,
- &__input,
- &__input-container {
- color: $darker-text-color;
- }
-
- &__clear-indicator,
- &__dropdown-indicator {
- cursor: pointer;
- transition: none;
- color: $dark-text-color;
-
- &:hover,
- &:active,
- &:focus {
- color: lighten($dark-text-color, 4%);
- }
- }
-
- &__indicator-separator {
- background-color: lighten($ui-base-color, 8%);
- }
-
- &__menu {
- @include search-popout;
-
- padding: 0;
- background: $ui-secondary-color;
- }
-
- &__menu-list {
- padding: 6px;
- }
-
- &__option {
- color: $inverted-text-color;
- border-radius: 4px;
- font-size: 14px;
-
- &--is-focused,
- &--is-selected {
- background: darken($ui-secondary-color, 10%);
- }
- }
- }
-}
-
-.column-settings__row {
- .text-btn:not(.column-header__permission-btn) {
- margin-bottom: 15px;
- }
-}
-
-.setting-toggle {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.setting-toggle__label {
- color: $darker-text-color;
-}
-
-.limited-account-hint {
- p {
- color: $secondary-text-color;
- font-size: 15px;
- font-weight: 500;
- margin-bottom: 20px;
- }
-}
-
-.empty-column-indicator {
- color: $dark-text-color;
- text-align: center;
- padding: 20px;
- font-size: 14px;
- line-height: 20px;
- font-weight: 400;
- cursor: default;
- display: flex;
- flex: 1 1 auto;
- align-items: center;
- justify-content: center;
-
- & > span {
- max-width: 500px;
- }
-
- a {
- color: $highlight-text-color;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
-}
-
-.empty-column-indicator {
- &__arrow {
- position: absolute;
- top: 50%;
- inset-inline-start: 50%;
- pointer-events: none;
- transform: translate(100%, -100%) rotate(12deg);
- transform-origin: center;
- }
-}
-
-.follow_requests-unlocked_explanation {
- margin: 16px;
- margin-bottom: 0;
-}
-
-.error-column {
- padding: 20px;
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- display: flex;
- flex: 1 1 auto;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- cursor: default;
-
- &__image {
- width: 70%;
- max-width: 350px;
- margin-top: -50px;
- }
-
- &__message {
- text-align: center;
- color: $darker-text-color;
- font-size: 15px;
- line-height: 22px;
-
- h1 {
- font-size: 28px;
- line-height: 33px;
- font-weight: 700;
- margin-bottom: 15px;
- color: $primary-text-color;
- }
-
- p {
- max-width: 48ch;
- }
-
- &__actions {
- margin-top: 30px;
- display: flex;
- gap: 10px;
- align-items: center;
- justify-content: center;
- }
- }
-}
-
-@keyframes heartbeat {
- 0% {
- transform: scale(1);
- animation-timing-function: ease-out;
- }
-
- 10% {
- transform: scale(0.91);
- animation-timing-function: ease-in;
- }
-
- 17% {
- transform: scale(0.98);
- animation-timing-function: ease-out;
- }
-
- 33% {
- transform: scale(0.87);
- animation-timing-function: ease-in;
- }
-
- 45% {
- transform: scale(1);
- animation-timing-function: ease-out;
- }
-}
-
-.no-reduce-motion .pulse-loading {
- transform-origin: center center;
- animation: heartbeat 1.5s ease-in-out infinite both;
-}
-
-.emoji-picker-dropdown__menu {
- position: relative;
- margin-top: 5px;
- z-index: 2;
- background: var(--dropdown-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--dropdown-border-color);
- box-shadow: var(--dropdown-shadow);
- border-radius: 5px;
-
- .emoji-mart-scroll {
- transition: opacity 200ms ease;
- }
-
- &.selecting .emoji-mart-scroll {
- opacity: 0.5;
- }
-}
-
-.emoji-picker-dropdown__modifiers {
- position: absolute;
- top: 60px;
- inset-inline-end: 11px;
- cursor: pointer;
-}
-
-.emoji-picker-dropdown__modifiers__menu {
- position: absolute;
- z-index: 4;
- top: -5px;
- inset-inline-start: -9px;
- background: var(--dropdown-background-color);
- border: 1px solid var(--dropdown-border-color);
- border-radius: 4px;
- box-shadow: var(--dropdown-shadow);
- overflow: hidden;
-
- button {
- display: block;
- cursor: pointer;
- border: 0;
- padding: 4px 8px;
- background: transparent;
-
- &:hover,
- &:focus,
- &:active {
- background: var(--dropdown-border-color);
- }
- }
-
- .emoji-mart-emoji {
- height: 22px;
- }
-}
-
-.emoji-mart-emoji {
- span {
- background-repeat: no-repeat;
- }
-}
-
-.upload-area {
- align-items: center;
- background: color.change($base-overlay-background, $alpha: 0.8);
- display: flex;
- height: 100vh;
- justify-content: center;
- inset-inline-start: 0;
- opacity: 0;
- position: fixed;
- top: 0;
- visibility: hidden;
- width: 100vw;
- z-index: 2000;
-
- * {
- pointer-events: none;
- }
-}
-
-.upload-area__drop {
- width: 320px;
- height: 160px;
- display: flex;
- box-sizing: border-box;
- position: relative;
- padding: 8px;
-}
-
-.upload-area__background {
- position: absolute;
- top: 0;
- inset-inline-end: 0;
- bottom: 0;
- inset-inline-start: 0;
- z-index: -1;
- border-radius: 4px;
- background: $ui-base-color;
- box-shadow: 0 0 5px color.change($base-shadow-color, $alpha: 0.2);
-}
-
-.upload-area__content {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- color: $secondary-text-color;
- font-size: 18px;
- font-weight: 500;
- border: 2px dashed $ui-base-lighter-color;
- border-radius: 4px;
-}
-
-.upload-progress {
- color: $darker-text-color;
- overflow: hidden;
- display: flex;
- gap: 8px;
- align-items: center;
- padding: 0 12px;
-
- .icon {
- width: 24px;
- height: 24px;
- color: $ui-highlight-color;
- }
-
- span {
- font-size: 12px;
- text-transform: uppercase;
- font-weight: 500;
- display: block;
- }
-}
-
-.upload-progress__message {
- flex: 1 1 auto;
-}
-
-.upload-progress__backdrop {
- width: 100%;
- height: 6px;
- border-radius: 6px;
- background: var(--background-color);
- position: relative;
- margin-top: 5px;
-}
-
-.upload-progress__tracker {
- position: absolute;
- inset-inline-start: 0;
- top: 0;
- height: 6px;
- background: $ui-highlight-color;
- border-radius: 6px;
-}
-
-.emoji-button {
- display: block;
- padding-top: 5px;
- padding-bottom: 2px;
- padding-inline-start: 2px;
- padding-inline-end: 5px;
- outline: 0;
- cursor: pointer;
-
- img {
- filter: grayscale(100%);
- opacity: 0.8;
- display: block;
- margin: 0;
- width: 22px;
- height: 22px;
- }
-
- &:hover,
- &:active,
- &:focus {
- img {
- opacity: 1;
- filter: none;
- border-radius: 100%;
- }
- }
-
- &:focus-visible {
- img {
- outline: $ui-button-icon-focus-outline;
- }
- }
-}
-
-.dropdown--active .emoji-button img {
- opacity: 1;
- filter: none;
-}
-
-.privacy-dropdown__dropdown,
-.language-dropdown__dropdown,
-.visibility-dropdown__dropdown {
- box-shadow: var(--dropdown-shadow);
- background: var(--dropdown-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--dropdown-border-color);
- padding: 4px;
- border-radius: 4px;
- overflow: hidden;
- z-index: 2;
-
- &.top {
- transform-origin: 50% 100%;
- }
-
- &.bottom {
- transform-origin: 50% 0;
- }
-}
-
-.modal-root__container .privacy-dropdown {
- flex-grow: 0;
-}
-
-.modal-root__container .privacy-dropdown__dropdown {
- pointer-events: auto;
- z-index: 9999;
-}
-
-.privacy-dropdown__option,
-.visibility-dropdown__option {
- --dropdown-text-color: $primary-text-color;
-
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.25px;
- padding: 8px 12px;
- cursor: pointer;
- display: flex;
- align-items: center;
- gap: 12px;
- border-radius: 4px;
- color: var(--dropdown-text-color);
-
- // Make sure adjacent hover/active states don't have a meeting radius.
- &:hover + &:is(:focus, .active),
- &:is(:focus, .active) + &:hover,
- &:is(:focus, .active) + &:is(:focus, .active) {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
-
- &:hover:has(+ :focus, .active),
- &:is(:focus, .active):has(+ :hover),
- &:is(:focus, .active):has(+ :is(:focus, .active)) {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
-
- &:hover,
- &:active {
- background: var(--dropdown-border-color);
- }
-
- &:focus,
- &.active {
- background: $ui-highlight-color;
- color: var(--dropdown-text-color);
- outline: 0;
-
- .privacy-dropdown__option__content,
- .privacy-dropdown__option__content strong,
- .privacy-dropdown__option__additional,
- .visibility-dropdown__option__content,
- .visibility-dropdown__option__content strong,
- .visibility-dropdown__option__additional {
- color: var(--dropdown-text-color);
- }
- }
-
- &__additional {
- display: flex;
- align-items: center;
- justify-content: center;
- color: $darker-text-color;
- cursor: help;
- }
-}
-
-.privacy-dropdown__option__icon,
-.visibility-dropdown__option__icon {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.privacy-dropdown__option__content,
-.visibility-dropdown__option__content {
- flex: 1 1 auto;
- color: $darker-text-color;
-
- strong {
- color: $primary-text-color;
- font-weight: 500;
- display: block;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-}
-
-.icon-badge-wrapper {
- position: relative;
-}
-
-.icon-badge {
- position: absolute;
- display: block;
- inset-inline-end: -0.25em;
- top: -0.25em;
- background-color: $ui-highlight-color;
- border-radius: 50%;
- font-size: 75%;
- width: 1em;
- height: 1em;
-}
-
-.ui .flash-message {
- margin-top: 10px;
- margin-inline-start: auto;
- margin-inline-end: auto;
- margin-bottom: 0;
- min-width: 75%;
-}
-
-.account__disclaimer {
- display: flex;
- padding: 10px;
- gap: 5px;
- color: $dark-text-color;
- align-items: center;
-
- strong {
- font-weight: 500;
- }
-
- a {
- font-weight: 500;
- color: inherit;
- text-decoration: underline;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
-}
-
-.account__action-bar {
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- line-height: 36px;
- overflow: hidden;
- flex: 0 0 auto;
- display: flex;
-}
-
-.account__action-bar-links {
- display: flex;
- flex: 1 1 auto;
- line-height: 18px;
- text-align: center;
-}
-
-.account__action-bar__tab {
- text-decoration: none;
- overflow: hidden;
- flex: 0 1 100%;
- border-inline-start: 1px solid lighten($ui-base-color, 8%);
- padding: 10px 0;
- border-bottom: 4px solid transparent;
-
- &:first-child {
- border-inline-start: 0;
- }
-
- &.active {
- border-bottom: 4px solid $ui-highlight-color;
- }
-
- & > span {
- display: block;
- text-transform: uppercase;
- font-size: 11px;
- color: $darker-text-color;
- }
-
- strong {
- display: block;
- font-size: 15px;
- font-weight: 500;
- color: $primary-text-color;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-
- abbr {
- color: $highlight-text-color;
- }
-}
-
-.language-dropdown {
- &__dropdown {
- width: 300px;
- padding: 0;
-
- .emoji-mart-search {
- padding: 10px;
- background: var(--dropdown-background-color);
-
- input {
- padding: 8px 12px;
- background: $ui-base-color;
- border: 1px solid var(--background-border-color);
- color: $darker-text-color;
-
- @media screen and (width <= 600px) {
- font-size: 16px;
- line-height: 24px;
- letter-spacing: 0.5px;
- }
- }
- }
-
- .emoji-mart-search-icon {
- inset-inline-end: 15px;
- opacity: 1;
- color: $darker-text-color;
-
- .icon {
- width: 18px;
- height: 18px;
- }
-
- &:disabled {
- opacity: 0.38;
- }
- }
-
- .emoji-mart-scroll {
- padding: 0 10px 10px;
- background: var(--dropdown-background-color);
- }
-
- &__results {
- &__item {
- display: flex;
- align-items: center;
- gap: 0.5em;
- cursor: pointer;
- color: $primary-text-color;
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.25px;
- font-weight: 500;
- padding: 8px 12px;
- border-radius: 4px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-
- &__common-name {
- color: $darker-text-color;
- font-weight: 400;
- }
-
- &:active,
- &:hover {
- background: var(--dropdown-border-color);
- }
-
- &:focus,
- &.active {
- background: $ui-highlight-color;
- color: $primary-text-color;
- outline: 0;
-
- .language-dropdown__dropdown__results__item__common-name {
- color: $primary-text-color;
- }
- }
- }
- }
- }
-}
-
-.visibility-modal {
- &__quote-warning {
- color: var(--nested-card-text);
- background:
- /* This is a bit of a silly hack for layering two background colours
- * since --nested-card-background is too transparent for a tooltip */
- linear-gradient(
- var(--nested-card-background),
- var(--nested-card-background)
- ),
- linear-gradient(var(--background-color), var(--background-color));
- border: var(--nested-card-border);
- padding: 16px;
- border-radius: 4px;
-
- h3 {
- font-weight: 500;
- margin-bottom: 4px;
- color: $darker-text-color;
- }
-
- p {
- font-size: 0.8em;
- color: $dark-text-color;
- }
- }
-}
-
-.visibility-dropdown {
- &__overlay[data-popper-placement] {
- z-index: 9999;
- }
-
- &.disabled {
- opacity: 0.6;
- cursor: default;
- }
-
- &__label {
- display: block;
- font-weight: 500;
- margin-bottom: 8px;
- }
-
- &__button {
- display: flex;
- align-items: center;
- color: $primary-text-color;
- background: var(--input-background-color);
- border: 1px solid var(--background-border-color);
- padding: 8px 12px;
- width: 100%;
- text-align: left;
- border-radius: 4px;
- font-size: 14px;
- height: 40px;
-
- &:disabled {
- cursor: default;
- }
- }
-
- &__icon {
- margin-inline: auto -4px;
- width: 18px;
- height: 18px;
- opacity: 0.5;
- }
-
- &__helper {
- margin-top: 4px;
- font-size: 0.8em;
- color: $dark-text-color;
- }
-}
-
-.search {
- margin-bottom: 32px;
- position: relative;
-
- .layout-multiple-columns & {
- margin-bottom: 10px;
- }
-
- &__popout {
- box-sizing: border-box;
- display: none;
- position: absolute;
- inset-inline-start: 0;
- margin-top: -2px;
- width: 100%;
- background: var(--input-background-color);
- border: 1px solid var(--background-border-color);
- border-radius: 0 0 4px 4px;
- box-shadow: var(--dropdown-shadow);
- z-index: 99;
- font-size: 13px;
- padding: 15px 5px;
-
- h4 {
- text-transform: uppercase;
- color: $darker-text-color;
- font-weight: 500;
- padding: 0 10px;
- margin-bottom: 10px;
- }
-
- .icon-button {
- padding: 0;
- color: $darker-text-color;
- }
-
- .icon {
- width: 18px;
- height: 18px;
- }
-
- &__menu {
- margin-bottom: 20px;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- &__message {
- color: $darker-text-color;
- padding: 0 10px;
- }
-
- &__item {
- display: block;
- box-sizing: border-box;
- width: 100%;
- border: 0;
- font: inherit;
- background: transparent;
- color: $darker-text-color;
- padding: 10px;
- cursor: pointer;
- border-radius: 4px;
- text-align: start;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-
- &--flex {
- display: flex;
- justify-content: space-between;
- }
-
- .icon-button {
- transition: none;
- }
-
- &:hover,
- &:focus,
- &:active,
- &.selected {
- background: $ui-highlight-color;
- color: $primary-text-color;
-
- .icon-button {
- color: $primary-text-color;
- }
- }
-
- mark {
- background: transparent;
- font-weight: 700;
- color: $primary-text-color;
- }
-
- span {
- overflow: inherit;
- text-overflow: inherit;
- }
- }
- }
- }
-
- &.active {
- .search__input {
- border-radius: 4px 4px 0 0;
- }
-
- .search__popout {
- display: block;
- }
- }
-}
-
-.search__input {
- @include search-input;
-
- display: block;
- padding: 12px 16px;
- padding-inline-start: 16px + 15px + 8px;
- line-height: normal;
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-}
-
-.search__icon-wrapper {
- position: absolute;
- top: 14px;
- display: grid;
- margin-inline-start: 16px - 2px;
- width: 20px;
- height: 20px;
-
- .icon {
- width: 100%;
- height: 100%;
- }
-
- &:not(.has-value) {
- pointer-events: none;
- }
-}
-
-.search__icon {
- grid-area: 1 / 1;
- transition: all 100ms linear;
- transition-property: transform, opacity;
- color: $darker-text-color;
-}
-
-.search__icon.icon-search {
- .has-value & {
- pointer-events: none;
- opacity: 0;
- transform: rotate(90deg);
- }
-}
-
-.search__icon--clear-button {
- background: transparent;
- border: 0;
- padding: 0;
- width: 20px;
- height: 20px;
- border-radius: 100%;
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus {
- outline: 0 !important;
- }
-
- &:focus-visible {
- box-shadow: 0 0 0 2px $ui-button-focus-outline-color;
- }
-
- &[aria-hidden='true'] {
- pointer-events: none;
- opacity: 0;
- transform: rotate(-90deg);
- }
-}
-
-.search-results__section {
- border-bottom: 1px solid var(--background-border-color);
-
- &:last-child {
- border-bottom: 0;
- }
-
- &__header {
- border-bottom: 1px solid var(--background-border-color);
- background: var(--surface-background-color);
- padding: 15px;
- font-weight: 500;
- font-size: 14px;
- color: $darker-text-color;
- display: flex;
- justify-content: space-between;
-
- h3 {
- display: flex;
- align-items: center;
- gap: 5px;
- }
-
- button {
- color: $highlight-text-color;
- padding: 0;
- border: 0;
- background: 0;
- font: inherit;
-
- &:hover,
- &:active,
- &:focus {
- text-decoration: underline;
- }
- }
- }
-
- .account:last-child,
- & > div:last-child .status {
- border-bottom: 0;
- }
-}
-
-.search-results__info {
- padding: 20px;
- color: $darker-text-color;
- text-align: center;
-}
-
-.modal-root {
- position: relative;
- z-index: 9998;
-}
-
-.modal-root__overlay {
- position: fixed;
- top: 0;
- inset-inline-start: 0;
- inset-inline-end: 0;
- bottom: 0;
- opacity: 0.9;
- background: $base-overlay-background;
- transition: background 0.5s;
-}
-
-.modal-root__container {
- position: fixed;
- top: 0;
- inset-inline-start: 0;
- width: 100%;
- height: 100%;
- max-width: 100vw;
- max-height: 100vh;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- align-content: space-around;
- z-index: 9999;
- pointer-events: none;
- user-select: none;
- overscroll-behavior: none;
-}
-
-.modal-root__modal {
- pointer-events: auto;
- user-select: text;
- display: flex;
- max-width: 100vw;
-
- @media screen and (width <= $mobile-breakpoint) {
- margin-top: auto;
- }
-}
-
-.video-modal .video-player {
- max-height: 80vh;
- max-width: 100vw;
-}
-
-.audio-modal__container {
- width: 50vw;
-}
-
-.media-modal {
- width: 100%;
- height: 100%;
- position: relative;
- touch-action: pan-y;
-
- &__buttons {
- position: absolute;
- inset-inline-end: 8px;
- top: 8px;
- z-index: 100;
- display: flex;
- gap: 8px;
- align-items: center;
-
- .icon-button {
- color: color.change($white, $alpha: 0.7);
- padding: 8px;
-
- .icon {
- width: 24px;
- height: 24px;
- filter: var(--overlay-icon-shadow);
- }
-
- &:hover,
- &:focus,
- &:active {
- color: $white;
- background-color: color.change($white, $alpha: 0.15);
- }
-
- &:focus {
- background-color: color.change($white, $alpha: 0.3);
- }
- }
- }
-}
-
-.media-modal__closer {
- display: flex;
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- inset-inline-end: 0;
- bottom: 0;
-
- > div {
- flex-shrink: 0;
- overflow: auto;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- }
-}
-
-.media-modal__navigation {
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- inset-inline-end: 0;
- bottom: 0;
- pointer-events: none;
- transition: opacity 0.3s linear;
- will-change: opacity;
-
- * {
- pointer-events: auto;
- }
-
- &.media-modal__navigation--hidden {
- opacity: 0;
-
- * {
- pointer-events: none;
- }
- }
-}
-
-.media-modal__nav {
- background: transparent;
- box-sizing: border-box;
- border: 0;
- color: color.change($white, $alpha: 0.7);
- cursor: pointer;
- display: flex;
- align-items: center;
- font-size: 24px;
- height: 20vmax;
- margin: auto 0;
- padding: 30px 15px;
- position: absolute;
- top: 0;
- bottom: 0;
- transform: scaleX(var(--text-x-direction));
-
- &:hover,
- &:focus,
- &:active {
- color: $white;
- }
-}
-
-.media-modal__nav--prev {
- inset-inline-start: 0;
-}
-
-.media-modal__nav--next {
- inset-inline-end: 0;
-}
-
-.media-modal__overlay {
- max-width: 600px;
- position: absolute;
- inset-inline-start: 0;
- inset-inline-end: 0;
- bottom: 0;
- margin: 0 auto;
-
- .picture-in-picture__footer {
- border-radius: 0;
- border: none;
- background: transparent;
- backdrop-filter: none;
- padding: 16px;
-
- .icon-button {
- color: $white;
-
- .icon {
- filter: var(--overlay-icon-shadow);
- }
-
- &:hover,
- &:focus,
- &:active {
- color: $white;
- background-color: color.change($white, $alpha: 0.15);
- }
-
- &:focus {
- background-color: color.change($white, $alpha: 0.3);
- }
-
- &.active {
- color: $highlight-text-color;
-
- &:hover,
- &:focus,
- &:active {
- background: color.change($highlight-text-color, $alpha: 0.15);
- }
-
- &:focus {
- background: color.change($highlight-text-color, $alpha: 0.3);
- }
- }
-
- &.star-icon.active {
- color: $gold-star;
-
- &:hover,
- &:focus,
- &:active {
- background: color.change($gold-star, $alpha: 0.15);
- }
-
- &:focus {
- background: color.change($gold-star, $alpha: 0.3);
- }
- }
-
- &.disabled {
- color: $white;
- background-color: transparent;
- cursor: default;
- opacity: 0.4;
- }
- }
- }
-}
-
-.media-modal__pagination {
- display: flex;
- justify-content: center;
- margin-bottom: 20px;
-}
-
-.media-modal__page-dot {
- flex: 0 0 auto;
- background-color: $white;
- filter: var(--overlay-icon-shadow);
- opacity: 0.4;
- height: 6px;
- width: 6px;
- border-radius: 50%;
- margin: 0 4px;
- padding: 0;
- border: 0;
- font-size: 0;
- transition: opacity 0.2s ease-in-out;
-
- &.active {
- opacity: 1;
- }
-
- &:focus {
- outline: 0;
- background-color: $highlight-text-color;
- }
-}
-
-.modal-placeholder {
- width: 588px;
- min-height: 478px;
- flex-direction: column;
- background: var(--modal-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--modal-border-color);
- border-radius: 16px;
-
- &__error {
- padding: 24px;
- display: flex;
- align-items: center;
- flex-direction: column;
-
- &__image {
- width: 70%;
- max-width: 350px;
- }
-
- &__message {
- text-align: center;
- text-wrap: balance;
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.25px;
-
- &__actions {
- margin-top: 24px;
- display: flex;
- gap: 10px;
- align-items: center;
- justify-content: center;
- }
- }
- }
-}
-
-.safety-action-modal {
- width: 600px;
- flex-direction: column;
-
- &__top,
- &__bottom {
- display: flex;
- gap: 8px;
- padding: 24px;
- flex-direction: column;
- background: var(--modal-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--modal-border-color);
- }
-
- &__top {
- border-radius: 16px 16px 0 0;
- border-bottom: 0;
- gap: 16px;
- }
-
- &__bottom {
- border-radius: 0 0 16px 16px;
- border-top: 0;
-
- @media screen and (max-width: $mobile-breakpoint) {
- border-radius: 0;
- border-bottom: 0;
- padding-bottom: 32px;
- }
- }
-
- &__header {
- display: flex;
- gap: 16px;
- align-items: center;
- font-size: 14px;
- line-height: 20px;
- color: $darker-text-color;
-
- &__icon {
- border-radius: 64px;
- background: $ui-highlight-color;
- color: $white;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 40px;
- height: 40px;
- flex-shrink: 0;
-
- .icon {
- width: 24px;
- height: 24px;
- }
- }
-
- h1 {
- font-size: 22px;
- line-height: 28px;
- color: $primary-text-color;
- }
- }
-
- &__confirmation {
- font-size: 14px;
- line-height: 20px;
- color: $darker-text-color;
-
- h1 {
- font-size: 16px;
- line-height: 24px;
- color: $primary-text-color;
- font-weight: 500;
-
- &:not(:only-child) {
- margin-bottom: 8px;
- }
- }
-
- strong {
- font-weight: 700;
- color: $primary-text-color;
- }
- }
-
- &__status {
- border: 1px solid var(--modal-border-color);
- border-radius: 8px;
- padding: 8px;
- cursor: pointer;
-
- &__account {
- display: flex;
- align-items: center;
- gap: 4px;
- margin-bottom: 8px;
- color: $dark-text-color;
-
- bdi {
- color: inherit;
- }
- }
-
- &__content {
- display: -webkit-box;
- font-size: 15px;
- line-height: 22px;
- color: $dark-text-color;
- line-clamp: 4;
- -webkit-line-clamp: 4;
- -webkit-box-orient: vertical;
- max-height: 4 * 22px;
- overflow: hidden;
-
- p,
- a {
- color: inherit;
- }
- }
-
- .reply-indicator__attachments {
- margin-top: 0;
- font-size: 15px;
- line-height: 22px;
- color: $dark-text-color;
- }
- }
-
- &__bullet-points {
- display: flex;
- flex-direction: column;
- gap: 8px;
- font-size: 16px;
- line-height: 24px;
-
- & > div {
- display: flex;
- gap: 16px;
- align-items: center;
-
- strong {
- font-weight: 700;
- }
- }
-
- &--deemphasized {
- color: $secondary-text-color;
- }
-
- &__icon {
- width: 40px;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
-
- .icon {
- width: 24px;
- height: 24px;
- }
- }
- }
-
- &__field-group {
- display: flex;
- flex-direction: column;
-
- label {
- display: flex;
- gap: 16px;
- align-items: center;
- font-size: 16px;
- line-height: 24px;
- height: 32px;
- padding: 0 12px;
- }
- }
-
- &__caveats {
- font-size: 14px;
- padding: 0 12px;
-
- strong {
- font-weight: 500;
- }
- }
-
- &__bottom {
- padding-top: 0;
-
- &__collapsible {
- display: none;
- flex-direction: column;
- gap: 16px;
- }
-
- &.active {
- background: var(--modal-background-variant-color);
- padding-top: 24px;
-
- .safety-action-modal__bottom__collapsible {
- display: flex;
- }
- }
- }
-
- &__actions {
- display: flex;
- align-items: center;
- gap: 8px;
- justify-content: flex-end;
-
- &__hint {
- font-size: 14px;
- line-height: 20px;
- color: $dark-text-color;
- }
-
- .link-button {
- padding: 10px 12px;
- font-weight: 600;
- }
- }
-}
-
-.dialog-modal {
- width: 588px;
- max-height: 80vh;
- flex-direction: column;
- background: var(--modal-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--modal-border-color);
- border-radius: 16px;
-
- &__header {
- box-sizing: border-box;
- border-bottom: 1px solid var(--modal-border-color);
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-direction: row-reverse;
- padding: 12px 24px;
- min-height: 61px;
-
- &__title {
- font-size: 16px;
- line-height: 24px;
- font-weight: 500;
- letter-spacing: 0.15px;
- }
- }
-
- &__content {
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.25px;
- overflow-y: auto;
-
- &__description {
- margin: 24px 24px 0;
- color: $darker-text-color;
-
- a {
- color: inherit;
- }
- }
-
- &__form {
- display: flex;
- flex-direction: column;
- gap: 16px;
- padding: 24px;
- }
-
- &__preview {
- display: flex;
- flex-direction: column;
- gap: 16px;
- align-items: center;
- justify-content: center;
- padding: 24px;
- background: #000;
-
- img {
- display: block;
- }
-
- img,
- .gifv video {
- outline: 1px solid var(--media-outline-color);
- outline-offset: -1px;
- border-radius: 8px;
- }
-
- img,
- .gifv video,
- .video-player,
- .audio-player {
- max-width: 360px;
- max-height: 45vh;
- }
- }
-
- &__actions {
- display: flex;
- align-items: center;
- gap: 8px;
- justify-content: flex-end;
- padding: 0 24px 24px;
- }
- }
-
- &__popout {
- background: var(--dropdown-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--dropdown-border-color);
- box-shadow: var(--dropdown-shadow);
- max-width: 320px;
- padding: 16px;
- border-radius: 8px;
- z-index: 9999 !important;
- font-size: 14px;
- line-height: 20px;
- color: $darker-text-color;
- }
-
- .copy-paste-text {
- margin-bottom: 0;
- }
-}
-
-.hotkey-combination {
- display: inline-flex;
- align-items: center;
- gap: 4px;
-
- kbd {
- padding: 3px 5px;
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- }
-}
-
-.doodle-modal,
-.boost-modal,
-.report-modal,
-.actions-modal,
-.compare-history-modal {
- background: var(--background-color);
- color: $primary-text-color;
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
- overflow: hidden;
- max-width: 90vw;
- width: 480px;
- position: relative;
- flex-direction: column;
-
- @media screen and (max-width: $no-columns-breakpoint) {
- border-bottom: 0;
- border-radius: 4px 4px 0 0;
- padding-bottom: env(safe-area-inset-bottom);
- }
-}
-
-.boost-modal__container {
- overflow-y: auto;
- padding: 10px;
-
- .status {
- user-select: text;
- border-bottom: 0;
- }
-}
-
-.doodle-modal__action-bar,
-.boost-modal__action-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: $ui-secondary-color;
- padding: 10px; // purposefully reduce padding in glitch-soc
-
- & > div {
- flex: 1 1 auto;
- text-align: end;
- color: $lighter-text-color;
- padding-inline-end: 10px;
- }
-
- .icon {
- vertical-align: middle;
- }
-
- .button {
- flex: 0 0 auto;
- }
-}
-
-.report-modal {
- width: 90vw;
- max-width: 700px;
- border: 1px solid var(--background-border-color);
-}
-
-.report-dialog-modal {
- max-width: 90vw;
- width: 480px;
- height: 80vh;
- background: var(--background-color);
- color: $primary-text-color;
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
- overflow: hidden;
- position: relative;
- flex-direction: column;
- display: flex;
-
- &__container {
- box-sizing: border-box;
- border-top: 1px solid var(--background-border-color);
- padding: 20px;
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- min-height: 0;
- overflow: auto;
- }
-
- &__title {
- font-size: 28px;
- line-height: 33px;
- font-weight: 700;
- margin-bottom: 15px;
-
- @media screen and (height <= 800px) {
- font-size: 22px;
- }
- }
-
- &__subtitle {
- font-size: 17px;
- font-weight: 600;
- line-height: 22px;
- margin-bottom: 4px;
- }
-
- &__lead {
- font-size: 17px;
- line-height: 22px;
- color: $secondary-text-color;
- margin-bottom: 30px;
-
- a {
- text-decoration: none;
- color: $highlight-text-color;
- font-weight: 500;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- &__actions {
- margin-top: 30px;
- display: flex;
-
- .button {
- flex: 1 1 auto;
- }
- }
-
- &__statuses {
- flex-grow: 1;
- min-height: 0;
- overflow: auto;
- }
-
- .status__content a {
- color: $highlight-text-color;
- }
-
- .status__content,
- .status__content p {
- color: $primary-text-color;
- }
-
- .dialog-option {
- align-items: center;
- gap: 12px;
- }
-
- .dialog-option .poll__input {
- border-color: $darker-text-color;
- color: $ui-secondary-color;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-
- svg {
- width: 15px;
- height: 15px;
- }
-
- &:active,
- &:focus,
- &:hover {
- border-color: $valid-value-color;
- border-width: 4px;
- }
-
- &.active {
- border-color: $valid-value-color;
- background: $valid-value-color;
- }
- }
-
- .poll__option.dialog-option {
- padding: 15px 0;
- flex: 0 0 auto;
- border-bottom: 1px solid var(--background-border-color);
-
- &:last-child {
- border-bottom: 0;
- }
-
- & > .poll__option__text {
- font-size: 13px;
- color: $secondary-text-color;
-
- strong {
- font-size: 17px;
- font-weight: 500;
- line-height: 22px;
- color: $primary-text-color;
- display: block;
- margin-bottom: 4px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
-
- .flex-spacer {
- background: transparent;
- }
-
- &__textarea {
- display: block;
- box-sizing: border-box;
- width: 100%;
- color: $primary-text-color;
- background: $ui-base-color;
- padding: 10px;
- font-family: inherit;
- font-size: 17px;
- line-height: 22px;
- resize: vertical;
- border: 0;
- border: 1px solid var(--background-border-color);
- outline: 0;
- border-radius: 4px;
- margin: 20px 0;
-
- &:focus {
- outline: 0;
- }
- }
-
- &__toggle {
- display: flex;
- align-items: center;
- margin-bottom: 16px;
- gap: 8px;
-
- & > span {
- display: block;
- font-size: 14px;
- font-weight: 500;
- line-height: 20px;
- }
- }
-
- .button.button-secondary {
- border-color: $ui-button-destructive-background-color;
- color: $ui-button-destructive-background-color;
- flex: 0 0 auto;
-
- &:hover,
- &:focus,
- &:active {
- background: $ui-button-destructive-background-color;
- border-color: $ui-button-destructive-background-color;
- color: $white;
- }
- }
-
- hr {
- border: 0;
- background: transparent;
- margin: 15px 0;
- }
-
- .emoji-mart-search {
- padding-inline-end: 10px;
- }
-
- .emoji-mart-search-icon {
- inset-inline-end: 10px + 5px;
- }
-}
-
-.report-modal__container {
- display: flex;
- border-top: 1px solid var(--background-border-color);
-
- @media screen and (width <= 480px) {
- flex-wrap: wrap;
- overflow-y: auto;
- }
-}
-
-.report-modal__statuses,
-.report-modal__comment {
- box-sizing: border-box;
- width: 50%;
- min-width: 50%;
-
- @media screen and (width <= 480px) {
- width: 100%;
- }
-}
-
-.report-modal__statuses,
-.focal-point-modal__content {
- flex: 1 1 auto;
- min-height: 20vh;
- max-height: 80vh;
- overflow-y: auto;
- overflow-x: hidden;
-
- .status__content a {
- color: $highlight-text-color;
- }
-
- .status__content,
- .status__content p {
- color: $inverted-text-color;
- }
-
- @media screen and (width <= 480px) {
- max-height: 10vh;
- }
-}
-
-.focal-point-modal__content {
- @media screen and (width <= 480px) {
- max-height: 40vh;
- }
-}
-
-.setting-divider {
- background: transparent;
- border: 0;
- margin: 0;
- width: 100%;
- height: 1px;
- margin-bottom: 29px;
-}
-
-.actions-modal {
- border-radius: 8px 8px 0 0;
- background: var(--dropdown-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border-color: var(--dropdown-border-color);
- box-shadow: var(--dropdown-shadow);
- max-height: 80vh;
- max-width: 80vw;
-
- ul {
- overflow-y: auto;
- padding-bottom: 8px;
- }
-
- a,
- button {
- color: inherit;
- display: flex;
- padding: 16px;
- font-size: 15px;
- line-height: 21px;
- background: transparent;
- border: none;
- align-items: center;
- text-decoration: none;
- width: 100%;
- box-sizing: border-box;
-
- &:hover,
- &:active,
- &:focus {
- background: var(--dropdown-border-color);
- }
- }
-}
-
-.report-modal__target {
- padding: 30px;
- font-size: 16px;
-
- strong {
- font-weight: 500;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-}
-
-.report-modal__target {
- text-align: center;
-}
-
-.report-modal__target {
- padding: 15px;
-
- .report-modal__close {
- position: absolute;
- top: 10px;
- inset-inline-end: 10px;
- }
-}
-
-.compare-history-modal {
- .report-modal__target {
- border-bottom: 1px solid var(--background-border-color);
- }
-
- &__container {
- padding: 30px;
- pointer-events: all;
- overflow-y: auto;
- }
-
- .status__content {
- color: $secondary-text-color;
- font-size: 19px;
- line-height: 24px;
-
- .emojione {
- width: 24px;
- height: 24px;
- margin: -1px 0 0;
- }
-
- a {
- color: $highlight-text-color;
- }
-
- hr {
- height: 0.25rem;
- padding: 0;
- background-color: $ui-secondary-color;
- border: 0;
- margin: 20px 0;
- }
- }
-
- .media-gallery,
- .audio-player,
- .video-player {
- margin-top: 15px;
- }
-}
-
-.loading-bar {
- background-color: $highlight-text-color;
- height: 3px;
- position: fixed;
- top: 0;
- inset-inline-start: 0;
- z-index: 9999;
-}
-
-// glitch: deprecated settings modal
-img.modal-warning {
- display: block;
- margin: auto;
- margin-bottom: 15px;
- width: 60px;
-}
-
-// glitch: optional wide mode
-.wide .columns-area:not(.columns-area--mobile) {
- .column {
- flex: auto;
- min-width: 330px;
- max-width: 400px;
- }
-
- .drawer {
- min-width: 300px;
- max-width: 400px;
- flex: 1 1 200px;
- }
-}
-
-.fullwidth-columns .columns-area:not(.columns-area--mobile) {
- .column {
- flex: auto;
- max-width: unset;
- }
-}
-
-.media-gallery__actions {
- position: absolute;
- top: 6px;
- inset-inline-end: 6px;
- display: flex;
- gap: 2px;
- z-index: 2;
-
- &__pill {
- display: block;
- color: $white;
- border: 0;
- background: color.change($black, $alpha: 0.65);
- backdrop-filter: $backdrop-blur-filter;
- padding: 3px 12px;
- border-radius: 99px;
- font-size: 14px;
- font-weight: 700;
- line-height: 20px;
- }
-}
-
-.media-gallery__item__badges {
- position: absolute;
- bottom: 8px;
- inset-inline-end: 8px;
- display: flex;
- gap: 2px;
-}
-
-.media-gallery__alt__label,
-.relationship-tag {
- display: block;
- text-align: center;
- color: $white;
- border: 0;
- background: color.change($black, $alpha: 0.65);
- backdrop-filter: $backdrop-blur-filter;
- padding: 3px 8px;
- border-radius: 4px;
- font-size: 12px;
- font-weight: 700;
- z-index: 1;
- line-height: 20px;
- cursor: pointer;
- pointer-events: auto;
-
- &--non-interactive {
- pointer-events: none;
- }
-}
-
-.relationship-tag {
- text-transform: uppercase;
- cursor: default;
-}
-
-.info-tooltip {
- color: $white;
- background: color.change($black, $alpha: 0.65);
- backdrop-filter: $backdrop-blur-filter;
- border-radius: 4px;
- box-shadow: var(--dropdown-shadow);
- padding: 16px;
- min-width: 16em;
- min-height: 2em;
- max-width: 22em;
- max-height: 30em;
- overflow-y: auto;
-
- &--solid {
- color: var(--nested-card-text);
- background:
- /* This is a bit of a silly hack for layering two background colours
- * since --nested-card-background is too transparent for a tooltip */
- linear-gradient(
- var(--nested-card-background),
- var(--nested-card-background)
- ),
- linear-gradient(var(--background-color), var(--background-color));
- border: var(--nested-card-border);
- }
-
- h4 {
- font-size: 15px;
- line-height: 20px;
- font-weight: 500;
- margin-bottom: 8px;
- }
-
- p {
- font-size: 15px;
- line-height: 20px;
- opacity: 0.85;
- white-space: pre-line;
- }
-
- .button {
- margin-block-start: 8px;
- }
-}
-
-.attachment-list {
- display: flex;
- font-size: 14px;
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- margin-top: 14px; // glitch: reduced margins
- overflow: hidden;
-
- &__icon {
- flex: 0 0 auto;
- color: $dark-text-color;
- padding: 8px 18px;
- cursor: default;
- border-inline-end: 1px solid var(--background-border-color);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: 26px;
- }
-
- &__list {
- list-style: none;
- padding: 4px 0;
- padding-inline-start: 8px;
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- li {
- display: block;
- padding: 4px 0;
- }
-
- a {
- text-decoration: none;
- color: $dark-text-color;
- font-weight: 500;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- &.compact {
- border: 0;
- margin-top: 4px; // glitch: reduced margins
-
- .attachment-list__list {
- padding: 0;
- display: block;
- }
-
- .icon {
- color: $dark-text-color;
- vertical-align: middle;
- }
- }
-}
-
-/* Media Gallery */
-.media-gallery {
- box-sizing: border-box;
- margin-top: 8px;
- overflow: hidden;
- border-radius: 8px;
- position: relative;
- width: 100%;
- min-height: 64px;
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: 1fr 1fr;
- gap: 2px;
-
- &--layout-1 {
- // The size of single images is determined by their
- // aspect-ratio, applied via inline style attribute
- width: initial;
- max-height: 460px;
- }
-
- &--layout-2 {
- & > .media-gallery__item:nth-child(1) {
- border-end-end-radius: 0;
- border-start-end-radius: 0;
- }
-
- & > .media-gallery__item:nth-child(2) {
- border-start-start-radius: 0;
- border-end-start-radius: 0;
- }
- }
-
- &--layout-3 {
- min-height: calc(64px * 2 + 8px);
-
- & > .media-gallery__item:nth-child(1) {
- border-end-end-radius: 0;
- border-start-end-radius: 0;
- }
-
- & > .media-gallery__item:nth-child(2) {
- border-start-start-radius: 0;
- border-end-start-radius: 0;
- border-end-end-radius: 0;
- }
-
- & > .media-gallery__item:nth-child(3) {
- border-start-start-radius: 0;
- border-end-start-radius: 0;
- border-start-end-radius: 0;
- }
- }
-
- &--layout-4 {
- min-height: calc(64px * 2 + 8px);
-
- & > .media-gallery__item:nth-child(1) {
- border-end-end-radius: 0;
- border-start-end-radius: 0;
- border-end-start-radius: 0;
- }
-
- & > .media-gallery__item:nth-child(2) {
- border-start-start-radius: 0;
- border-end-start-radius: 0;
- border-end-end-radius: 0;
- }
-
- & > .media-gallery__item:nth-child(3) {
- border-start-start-radius: 0;
- border-start-end-radius: 0;
- border-end-start-radius: 0;
- border-end-end-radius: 0;
- }
-
- & > .media-gallery__item:nth-child(4) {
- border-start-start-radius: 0;
- border-end-start-radius: 0;
- border-start-end-radius: 0;
- }
- }
-
- @include fullwidth-gallery;
-}
-
-.media-gallery__item {
- border: 0;
- box-sizing: border-box;
- display: block;
- position: relative;
- border-radius: 8px;
- overflow: hidden;
- outline: 1px solid var(--media-outline-color);
- outline-offset: -1px;
- z-index: 1;
-
- &--tall {
- grid-row: span 2;
- }
-
- &--wide {
- grid-column: span 2;
- }
-
- .full-width & {
- border-radius: 0;
- }
-
- &.letterbox {
- background: $base-shadow-color;
- }
-
- &--square {
- aspect-ratio: 1;
- }
-
- &__overlay {
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- box-sizing: border-box;
- width: 100%;
- height: 100%;
- pointer-events: none;
- padding: 8px;
- z-index: 1;
-
- &--corner {
- align-items: flex-start;
- justify-content: flex-end;
- }
-
- .icon {
- color: $white;
- filter: var(--overlay-icon-shadow);
- }
- }
-
- &--error img {
- visibility: hidden;
- }
-}
-
-.media-gallery__item-thumbnail {
- cursor: pointer;
- display: block;
- text-decoration: none;
- color: $secondary-text-color;
- position: relative;
- z-index: -1;
-
- &,
- img {
- height: 100%;
- width: 100%;
- object-fit: contain;
-
- &:not(.letterbox) {
- height: 100%;
- object-fit: cover;
- }
- }
-}
-
-.media-gallery__preview {
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- z-index: -2;
- background: $base-overlay-background;
-
- &--hidden {
- display: none;
- }
-}
-
-.media-gallery__gifv {
- height: 100%;
- overflow: hidden;
- position: relative;
- width: 100%;
- z-index: -1;
-}
-
-.media-gallery__item-gifv-thumbnail {
- cursor: pointer;
- height: 100%;
- width: 100%;
- object-fit: contain;
- user-select: none;
-
- &:not(.letterbox) {
- height: 100%;
- object-fit: cover;
- }
-}
-
-/* End Media Gallery */
-
-.detailed,
-.fullscreen {
- .video-player__volume__current,
- .video-player__volume::before {
- bottom: 27px;
- }
-
- .video-player__volume__handle {
- bottom: 23px;
- }
-}
-
-.audio-player {
- box-sizing: border-box;
- container: audio-player / inline-size;
- position: relative;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- width: 100%;
- aspect-ratio: 16 / 9;
- color: var(--player-foreground-color);
- background: var(--player-background-color, var(--background-color));
- border-radius: 8px;
- outline: 1px solid var(--media-outline-color);
- outline-offset: -1px;
-
- &__controls {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- height: 100%;
-
- &__play {
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
-
- .player-button {
- position: absolute;
- top: 50%;
- inset-inline-start: 50%;
- transform: translate(-50%, -50%);
- }
-
- .icon {
- filter: var(--overlay-icon-shadow);
- }
- }
-
- .player-button {
- display: inline-block;
- outline: 0;
- padding: 5px;
- flex: 0 0 auto;
- background: transparent;
- border: 0;
- color: var(--player-foreground-color);
- opacity: 0.75;
-
- .icon {
- width: 48px;
- height: 48px;
- }
-
- &:active,
- &:hover,
- &:focus {
- opacity: 1;
- }
- }
- }
-
- &__visualizer {
- width: 100%;
- max-width: 200px;
- }
-
- .video-player__seek {
- position: absolute;
- inset: 0 0 auto;
- height: 24px;
- z-index: 1; /* Ensure this renders on top of audio player controls */
- }
-
- &.inactive {
- .video-player__seek,
- .audio-player__controls,
- .video-player__controls {
- visibility: hidden;
- }
- }
-
- .video-player__volume::before,
- .video-player__seek::before {
- background: currentColor;
- opacity: 0.15;
- }
-
- .video-player__seek__buffer {
- background: currentColor;
- opacity: 0.2;
- }
-
- .video-player__seek__progress,
- .video-player__seek__handle,
- .video-player__volume__current,
- .video-player__volume__handle {
- background-color: var(--player-accent-color);
- }
-
- .video-player__buttons button,
- .video-player__buttons a {
- color: currentColor;
- opacity: 0.75;
-
- &:active,
- &:hover,
- &:focus {
- color: currentColor;
- opacity: 1;
- }
- }
-
- .video-player__time-sep,
- .video-player__time-total,
- .video-player__time-current {
- color: currentColor;
- }
-
- @container audio-player (max-width: 400px) {
- .video-player__time,
- .player-button.video-player__download__icon {
- display: none;
- }
- }
-
- .video-player__seek::before,
- .video-player__seek__buffer,
- .video-player__seek__progress {
- top: 0;
- }
-
- .video-player__seek__handle {
- top: -4px;
- }
-
- .video-player__controls {
- padding-top: 10px;
- background: transparent;
- z-index: 1;
- }
-}
-
-.video-player {
- overflow: hidden;
- position: relative;
- background: $base-shadow-color;
- max-height: 460px;
- border-radius: 8px;
- box-sizing: border-box;
- color: $white;
- display: flex;
- outline: 1px solid var(--media-outline-color);
- outline-offset: -1px;
- z-index: 2;
-
- .detailed-status & {
- width: 100%;
- height: 100%;
- }
-
- @include fullwidth-gallery;
-
- video {
- display: block;
- max-width: 100vw;
- max-height: 80vh;
- z-index: -2;
- position: relative;
- }
-
- &.fullscreen {
- width: 100% !important;
- margin: 0;
- height: 100% !important;
- outline: none;
- border-radius: 0;
-
- video {
- max-width: 100% !important;
- max-height: 100% !important;
- width: 100% !important;
- height: 100% !important;
- outline: 0;
- }
- }
-
- &.inline {
- video {
- object-fit: contain;
- }
- }
-
- &__controls {
- position: absolute;
- direction: ltr;
- z-index: -1;
- bottom: 0;
- inset-inline-start: 0;
- inset-inline-end: 0;
- box-sizing: border-box;
- background: linear-gradient(
- 0deg,
- color.change($base-shadow-color, $alpha: 0.85) 0,
- color.change($base-shadow-color, $alpha: 0.45) 60%,
- transparent
- );
- padding: 0 15px;
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.1s ease;
- will-change: opacity, pointer-events;
-
- &.active {
- opacity: 1;
- pointer-events: auto;
- }
- }
-
- .media-gallery__actions {
- opacity: 0;
- transition: opacity 0.1s ease;
-
- &.active {
- opacity: 1;
- }
- }
-
- &.inactive {
- video,
- .video-player__controls {
- visibility: hidden;
- }
- }
-
- &__spoiler {
- display: none;
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- width: 100%;
- height: 100%;
- z-index: 4;
- border: 0;
- background: $base-overlay-background;
- color: $darker-text-color;
- transition: none;
- pointer-events: none;
-
- &.active {
- display: block;
- pointer-events: auto;
-
- &:hover,
- &:active,
- &:focus {
- color: lighten($darker-text-color, 7%);
- }
- }
-
- &__title {
- display: block;
- font-size: 14px;
- }
-
- &__subtitle {
- display: block;
- font-size: 11px;
- font-weight: 500;
- }
- }
-
- &__buttons-bar {
- display: flex;
- justify-content: space-between;
- padding-bottom: 8px;
- margin: 0 -5px;
-
- .video-player__download__icon {
- color: inherit;
- }
- }
-
- &__buttons {
- display: flex;
- flex: 0 1 auto;
- min-width: 30px;
- align-items: center;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- gap: 5px;
-
- .player-button {
- display: inline-block;
- outline: 0;
- padding: 5px;
- flex: 0 0 auto;
- background: transparent;
- border: 0;
- color: color.change($white, $alpha: 0.75);
- font-weight: 500;
-
- &:active,
- &:hover,
- &:focus {
- color: $white;
- }
- }
- }
-
- &__time {
- display: inline;
- flex: 0 1 auto;
- overflow: hidden;
- text-overflow: ellipsis;
- margin: 0 5px;
-
- // Ensure digits maintain a consistent width
- font-variant-numeric: tabular-nums;
- }
-
- &__time-sep,
- &__time-total,
- &__time-current {
- font-size: 14px;
- font-weight: 500;
- }
-
- &__time-current {
- color: $white;
- }
-
- &__time-sep {
- display: inline-block;
- margin: 0 6px;
- }
-
- &__time-sep,
- &__time-total {
- color: $white;
- }
-
- &__volume {
- flex: 0 0 auto;
- display: inline-flex;
- cursor: pointer;
- height: 24px;
- position: relative;
- overflow: hidden;
-
- .no-reduce-motion & {
- transition: all 100ms linear;
- }
-
- &.active {
- overflow: visible;
- width: 50px;
- margin-inline-end: 16px;
- }
-
- &::before {
- content: '';
- width: 50px;
- background: color.change($white, $alpha: 0.35);
- border-radius: 4px;
- display: block;
- position: absolute;
- height: 4px;
- inset-inline-start: 0;
- top: 50%;
- transform: translate(0, -50%);
- }
-
- &__current {
- display: block;
- position: absolute;
- height: 4px;
- border-radius: 4px;
- inset-inline-start: 0;
- top: 50%;
- transform: translate(0, -50%);
- background: $white;
- }
-
- &__handle {
- position: absolute;
- z-index: 3;
- border-radius: 50%;
- width: 12px;
- height: 12px;
- top: 50%;
- inset-inline-start: 0;
- margin-inline-start: -6px;
- transform: translate(0, -50%);
- background: $white;
- box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2);
- opacity: 0;
-
- .no-reduce-motion & {
- transition: opacity 100ms linear;
- }
- }
-
- &.active &__handle {
- opacity: 1;
- }
- }
-
- &__link {
- padding: 2px 10px;
-
- a {
- text-decoration: none;
- font-size: 14px;
- font-weight: 500;
- color: $white;
-
- &:hover,
- &:active,
- &:focus {
- text-decoration: underline;
- }
- }
- }
-
- &__seek {
- cursor: pointer;
- height: 24px;
- position: relative;
-
- &::before {
- content: '';
- width: 100%;
- background: color.change($white, $alpha: 0.35);
- border-radius: 4px;
- display: block;
- position: absolute;
- height: 4px;
- top: 14px;
- }
-
- &__progress,
- &__buffer {
- display: block;
- position: absolute;
- height: 4px;
- border-radius: 4px;
- top: 14px;
- background: $white;
- }
-
- &__buffer {
- background: color.change($white, $alpha: 0.2);
- }
-
- &__handle {
- position: absolute;
- z-index: 3;
- opacity: 0;
- border-radius: 50%;
- width: 12px;
- height: 12px;
- top: 10px;
- margin-inline-start: -6px;
- background: $white;
- box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2);
-
- .no-reduce-motion & {
- transition: opacity 0.1s ease;
- }
-
- &.active {
- opacity: 1;
- cursor: grabbing;
- }
- }
-
- &:hover {
- .video-player__seek__handle {
- opacity: 1;
- }
- }
- }
-
- &__hotkey-indicator {
- position: absolute;
- top: 50%;
- inset-inline-start: 50%;
- transform: translate(-50%, -50%);
- background: color.change($base-shadow-color, $alpha: 0.45);
- backdrop-filter: $backdrop-blur-filter;
- color: $white;
- border-radius: 8px;
- padding: 16px 24px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 8px;
-
- &__label {
- font-size: 15px;
- font-weight: 500;
- }
- }
-
- &.detailed,
- &.fullscreen {
- .video-player__buttons {
- .player-button {
- padding-top: 10px;
- padding-bottom: 10px;
- }
- }
- }
-}
-
-.gifv {
- position: relative;
-
- canvas {
- position: absolute;
- width: 100%;
- height: 100%;
- }
-
- video {
- max-width: 100vw;
- max-height: 80vh;
- }
-}
-
-.scrollable .account-card {
- margin: 10px;
-}
-
-.scrollable .account-card__title__avatar {
- img {
- border: 2px solid var(--background-color);
- }
-
- .account__avatar {
- border: none;
- }
-}
-
-.scrollable .account-card__header {
- img {
- border-radius: 4px;
- }
-}
-
-.scrollable .account-card__bio::after {
- background: linear-gradient(to left, var(--background-color), transparent);
-}
-
-.account-gallery__container {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- gap: 2px;
-
- .media-gallery__item {
- border-radius: 0;
- }
-
- .load-more,
- .timeline-hint {
- grid-column: span 3;
- }
-}
-
-.notification__filter-bar,
-.account__section-headline {
- border: 1px solid var(--background-border-color);
- border-top: 0;
- cursor: default;
- display: flex;
- flex-shrink: 0;
-
- @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
- border-right: 0;
- border-left: 0;
- }
-
- button {
- background: transparent;
- border: 0;
- margin: 0;
- }
-
- button,
- a {
- display: block;
- flex: 1 1 auto;
- color: $darker-text-color;
- padding: 15px 0;
- font-size: 14px;
- font-weight: 500;
- text-align: center;
- text-decoration: none;
- position: relative;
-
- &.active {
- color: $primary-text-color;
-
- &::before {
- display: block;
- content: '';
- position: absolute;
- bottom: -1px;
- left: 50%;
- transform: translateX(-50%);
- width: 40px;
- height: 3px;
- border-radius: 4px 4px 0 0;
- background: $highlight-text-color;
- }
- }
- }
-
- .scrollable & {
- border-left: 0;
- border-right: 0;
- }
-}
-
-.filter-form {
- border-bottom: 1px solid var(--background-border-color);
-
- &__column {
- display: flex;
- flex-direction: column;
- gap: 15px;
- padding: 15px;
- }
-
- .radio-button {
- display: flex;
- }
-}
-
-.column-settings__row .radio-button {
- display: flex;
-}
-
-.radio-button,
-.check-box {
- font-size: 14px;
- position: relative;
- display: inline-flex;
- align-items: center;
- line-height: 18px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- cursor: pointer;
- gap: 10px;
- color: $secondary-text-color;
-
- input[type='radio'],
- input[type='checkbox'] {
- display: none;
- }
-
- &__input {
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- border: 2px solid $secondary-text-color;
- box-sizing: border-box;
- width: 20px;
- height: 20px;
- flex: 0 0 auto;
- border-radius: 50%;
-
- &.checked,
- &.indeterminate {
- border-color: $ui-highlight-color;
- }
-
- .icon {
- width: 18px;
- height: 18px;
- }
- }
-}
-
-.radio-button__input.checked::before {
- content: '';
- display: block;
- border-radius: 50%;
- width: calc(100% - 4px);
- height: calc(100% - 4px);
- background: $ui-highlight-color;
-}
-
-.check-box {
- &__input {
- width: 18px;
- height: 18px;
- border-radius: 2px;
-
- &.checked,
- &.indeterminate {
- background: $ui-highlight-color;
- color: $white;
- }
- }
-}
-
-noscript {
- text-align: center;
-
- img {
- width: 200px;
- opacity: 0.5;
- animation: flicker 4s infinite;
- }
-
- div {
- font-size: 14px;
- margin: 30px auto;
- color: $secondary-text-color;
- max-width: 400px;
-
- a {
- color: $highlight-text-color;
- text-decoration: underline;
-
- &:hover {
- text-decoration: none;
- }
- }
- }
-}
-
-@keyframes flicker {
- 0% {
- opacity: 1;
- }
-
- 30% {
- opacity: 0.75;
- }
-
- 100% {
- opacity: 1;
- }
-}
-
-.moved-account-banner,
-.follow-request-banner,
-.account-memorial-banner {
- padding: 20px;
- background: var(--surface-background-color);
- display: flex;
- align-items: center;
- flex-direction: column;
-
- &__message {
- color: $darker-text-color;
- padding: 8px 0;
- padding-top: 0;
- padding-bottom: 4px;
- font-size: 14px;
- font-weight: 500;
- text-align: center;
- margin-bottom: 16px;
- }
-
- &__action {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 15px;
- width: 100%;
- }
-
- .detailed-status__display-name {
- margin-bottom: 0;
- }
-}
-
-.follow-request-banner .button {
- width: 100%;
-}
-
-.account-memorial-banner__message {
- margin-bottom: 0;
-}
-
-.column-inline-form {
- padding: 15px;
- display: flex;
- justify-content: flex-start;
- gap: 15px;
- align-items: center;
- border: 1px solid var(--background-border-color);
- border-top: 0;
-
- label {
- flex: 1 1 auto;
-
- input {
- width: 100%;
- }
- }
-
- @media screen and (max-width: $no-gap-breakpoint) {
- border-left: 0;
- border-right: 0;
- }
-}
-
-.drawer__backdrop {
- cursor: pointer;
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- width: 100%;
- height: 100%;
- background: color.change($base-overlay-background, $alpha: 0.5);
-}
-
-.focal-point {
- position: relative;
- cursor: grab;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
-
- &.dragging {
- cursor: grabbing;
- }
-
- &__reticle {
- position: absolute;
- width: 100px;
- height: 100px;
- transform: translate(-50%, -50%);
- border: 2px solid #fff;
- border-radius: 50%;
- box-shadow: 0 0 0 9999em color.change($base-shadow-color, $alpha: 0.35);
- pointer-events: none;
- }
-}
-
-.account__header__content {
- color: $darker-text-color;
- font-size: 14px;
- font-weight: 400;
- overflow: hidden;
- word-break: normal;
- overflow-wrap: break-word;
-
- p {
- margin-bottom: 20px;
- unicode-bidi: plaintext;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- a {
- color: inherit;
- text-decoration: underline;
-
- &:hover {
- text-decoration: none;
- }
- }
-}
-
-.account__header {
- overflow: hidden;
- container: account-header / inline-size;
-
- &.inactive {
- opacity: 0.5;
-
- .account__header__image,
- .account__avatar {
- filter: grayscale(100%);
- }
- }
-
- &__info {
- position: absolute;
- top: 20px;
- inset-inline-end: 20px;
- display: flex;
- flex-wrap: wrap;
- gap: 2px;
- }
-
- &__image {
- overflow: hidden;
- height: 145px;
- position: relative;
- background: darken($ui-base-color, 4%);
- border-bottom: 1px solid var(--background-border-color);
-
- img {
- object-fit: cover;
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- }
- }
-
- &__bar {
- position: relative;
- padding: 0 20px;
- padding-bottom: 16px; // glitch-soc addition for the different tabs design
- border-bottom: 1px solid var(--background-border-color);
-
- .avatar {
- display: block;
- flex: 0 0 auto;
-
- .account__avatar {
- background: var(--background-color);
- border: 1px solid var(--background-border-color);
- border-radius: var(--avatar-border-radius);
- }
- }
- }
-
- &__badges {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
-
- .account-role {
- line-height: unset;
- }
- }
-
- &__tabs {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- margin-top: -55px;
- padding-top: 10px;
- gap: 8px;
- overflow: hidden;
- margin-inline-start: -2px; // aligns the pfp with content below
-
- &__name {
- margin-top: 16px;
- margin-bottom: 16px;
-
- .emojione {
- width: 22px;
- height: 22px;
- }
-
- h1 {
- font-size: 17px;
- line-height: 22px;
- color: $primary-text-color;
- font-weight: 600;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-
- small {
- display: flex;
- align-items: center;
- gap: 4px;
- font-size: 14px;
- line-height: 20px;
- color: $darker-text-color;
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
-
- span {
- overflow: hidden;
- text-overflow: ellipsis;
- user-select: all;
- }
-
- .icon-lock {
- height: 18px;
- width: 18px;
- }
- }
- }
- }
-
- .spacer {
- flex: 1 1 auto;
- }
- }
-
- &__follow-button {
- flex-grow: 1;
- }
-
- &__buttons {
- display: flex;
- align-items: center;
- gap: 8px;
-
- $button-breakpoint: 420px;
- $button-fallback-breakpoint: #{$button-breakpoint} + 55px;
-
- &--desktop {
- margin-top: 55px;
-
- @container (width < #{$button-breakpoint}) {
- display: none;
- }
-
- @supports (not (container-type: inline-size)) {
- @media (max-width: #{$button-fallback-breakpoint}) {
- display: none;
- }
- }
- }
-
- &--mobile {
- margin-block: 16px;
-
- @container (width >= #{$button-breakpoint}) {
- display: none;
- }
-
- @supports (not (container-type: inline-size)) {
- @media (min-width: (#{$button-fallback-breakpoint} + 1px)) {
- display: none;
- }
- }
- }
-
- .button {
- flex-shrink: 1;
- white-space: nowrap;
- min-width: 80px;
- }
-
- .icon-button {
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- box-sizing: content-box;
- padding: 5px;
-
- .icon {
- width: 24px;
- height: 24px;
- }
-
- &.copied {
- border-color: $valid-value-color;
- }
- }
- }
-
- &__bio {
- .account__header__content {
- color: $primary-text-color;
- }
-
- .account__header__fields {
- margin: 0;
- margin-top: 16px;
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
-
- dl {
- display: block;
- padding: 8px 16px; // glitch-soc: padding purposefuly reduced
- border-bottom-color: var(--background-border-color);
- }
-
- dd,
- dt {
- font-size: 13px;
- line-height: 18px;
- padding: 0;
- text-align: initial;
- }
-
- dt {
- width: auto;
- background: transparent;
- text-transform: uppercase;
- color: $dark-text-color;
- }
-
- dd {
- color: $darker-text-color;
- }
-
- a {
- color: lighten($ui-highlight-color, 8%);
- }
-
- .icon {
- width: 18px;
- height: 18px;
- }
-
- .verified {
- border: 1px solid color.change($valid-value-color, $alpha: 0.5);
- margin-top: -1px;
- margin-inline: -1px;
-
- &:first-child {
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
- }
-
- &:last-child {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- margin-bottom: -1px;
- }
-
- dt,
- dd {
- color: $valid-value-color;
- }
-
- dd {
- display: flex;
- align-items: center;
- gap: 4px;
-
- span {
- display: flex;
- }
- }
-
- a {
- color: $valid-value-color;
- }
- }
- }
- }
-
- &__extra {
- margin-top: 16px;
-
- &__links {
- font-size: 14px;
- color: $darker-text-color;
- margin: 0 -10px;
- padding-top: 16px;
- padding-bottom: 10px;
-
- a {
- display: inline-block;
- color: $darker-text-color;
- text-decoration: none;
- padding: 5px 10px;
- font-weight: 500;
-
- strong {
- font-weight: 700;
- color: $primary-text-color;
- }
- }
- }
- }
-
- &__account-note {
- color: $primary-text-color;
- font-size: 14px;
- font-weight: 400;
- margin-bottom: 10px;
-
- &__loading-indicator-wrapper {
- position: relative;
- height: 37px;
-
- .loading-indicator {
- left: 10px;
- }
-
- .circular-progress {
- width: 14px;
- height: 14px;
- }
- }
-
- label {
- display: block;
- font-size: 12px;
- font-weight: 500;
- color: $darker-text-color;
- text-transform: uppercase;
- margin-bottom: 5px;
- }
-
- textarea {
- display: block;
- box-sizing: border-box;
- width: calc(100% + 20px);
- color: $secondary-text-color;
- background: transparent;
- padding: 10px;
- margin: 0 -10px;
- font-family: inherit;
- font-size: 14px;
- resize: none;
- border: 0;
- outline: 0;
- border-radius: 4px;
-
- &::placeholder {
- color: $dark-text-color;
- opacity: 1;
- }
-
- &:focus {
- background: $ui-base-color;
- }
- }
- }
-
- &__familiar-followers {
- display: flex;
- align-items: center;
- gap: 10px;
- margin-block: 16px;
- color: $darker-text-color;
-
- a:any-link {
- font-weight: 500;
- text-decoration: none;
- color: $primary-text-color;
- }
- }
-}
-
-.account__contents {
- overflow: hidden;
-}
-
-.account__details {
- display: flex;
- flex-wrap: wrap;
- column-gap: 1em;
-}
-
-.verified-badge {
- display: inline-flex;
- align-items: center;
- color: $valid-value-color;
- gap: 4px;
- overflow: hidden;
- white-space: nowrap;
-
- > span {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- a {
- color: inherit;
- font-weight: 500;
- text-decoration: none;
- }
-
- .icon {
- width: 16px;
- height: 16px;
- }
-}
-
-.trends {
- &__item {
- display: flex;
- align-items: center;
- padding: 16px;
- border-bottom: 1px solid var(--background-border-color);
- gap: 8px;
-
- &__name {
- flex: 1 1 auto;
- color: $dark-text-color;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- strong {
- font-weight: 500;
- }
-
- a {
- color: $darker-text-color;
- text-decoration: none;
- font-size: 14px;
- font-weight: 500;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- &:hover,
- &:focus,
- &:active {
- span {
- text-decoration: underline;
- }
- }
- }
- }
-
- &__current {
- flex: 0 0 auto;
- font-size: 24px;
- font-weight: 500;
- text-align: end;
- color: $secondary-text-color;
- text-decoration: none;
- }
-
- &__sparkline {
- flex: 0 0 auto;
- width: 50px;
-
- path:first-child {
- fill: color.change($highlight-text-color, $alpha: 0.25) !important;
- fill-opacity: 1 !important;
- }
-
- path:last-child {
- stroke: lighten($highlight-text-color, 6%) !important;
- fill: none !important;
- }
- }
-
- &--requires-review {
- .trends__item__name {
- color: $gold-star;
-
- a {
- color: $gold-star;
- }
- }
-
- .trends__item__current {
- color: $gold-star;
- }
-
- .trends__item__sparkline {
- path:first-child {
- fill: color.change($gold-star, $alpha: 0.25) !important;
- }
-
- path:last-child {
- stroke: lighten($gold-star, 6%) !important;
- }
- }
- }
-
- &--disabled {
- .trends__item__name {
- color: lighten($ui-base-color, 12%);
-
- a {
- color: lighten($ui-base-color, 12%);
- }
- }
-
- .trends__item__current {
- color: lighten($ui-base-color, 12%);
- }
-
- .trends__item__sparkline {
- path:first-child {
- fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
- }
-
- path:last-child {
- stroke: lighten(lighten($ui-base-color, 12%), 6%) !important;
- }
- }
- }
- }
-
- &--compact &__item {
- padding: 12px;
- }
-}
-
-.conversation {
- display: flex;
- border-bottom: 1px solid var(--background-border-color);
- padding: 5px;
- padding-bottom: 0;
-
- &:focus {
- background: lighten($ui-base-color, 2%);
- outline: 0;
- }
-
- &__avatar {
- flex: 0 0 auto;
- padding: 10px;
- padding-top: 12px;
- position: relative;
- cursor: pointer;
- }
-
- &__unread {
- display: inline-block;
- background: $highlight-text-color;
- border-radius: 50%;
- width: 0.625rem;
- height: 0.625rem;
- margin: -0.1ex 0.15em 0.1ex;
- }
-
- &__content {
- flex: 1 1 auto;
- padding: 10px 5px;
- padding-inline-end: 15px;
- overflow: hidden;
-
- &__info {
- overflow: hidden;
- display: flex;
- flex-direction: row-reverse;
- justify-content: space-between;
- }
-
- &__relative-time {
- font-size: 15px;
- color: $darker-text-color;
- padding-inline-start: 15px;
- }
-
- &__names {
- color: $darker-text-color;
- font-size: 15px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-bottom: 4px;
- flex-basis: 90px;
- flex-grow: 1;
-
- a {
- color: $primary-text-color;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
-
- .status__content {
- margin: 0;
- }
- }
-}
-
-.announcements {
- width: calc(100% - 124px);
- flex: 0 0 auto;
- position: relative;
- overflow: hidden;
-
- .layout-multiple-columns & {
- width: 100%;
- }
-
- @media screen and (max-width: (124px + 300px)) {
- width: 100%;
- }
-
- &__root {
- background: lighten($ui-base-color, 8%);
- font-size: 13px;
- display: flex;
- align-items: flex-end;
- }
-
- &__mastodon {
- width: 124px;
- flex: 0 0 auto;
-
- @media screen and (max-width: (124px + 300px)) {
- display: none;
- }
- }
-
- &__slides {
- display: flex;
- flex-wrap: nowrap;
- align-items: start;
- }
-
- &__slide {
- box-sizing: border-box;
- width: 100%;
- flex: 0 0 100%;
- padding: 15px;
- position: relative;
- font-size: 15px;
- line-height: 20px;
- overflow-wrap: break-word;
- font-weight: 400;
- max-height: 50vh;
- overflow: hidden;
- flex-direction: column;
- }
-
- &__range {
- display: block;
- font-weight: 500;
- margin-bottom: 10px;
- padding-inline-end: 18px;
- }
-
- &__unread {
- position: absolute;
- top: 19px;
- inset-inline-end: 19px;
- display: block;
- background: $highlight-text-color;
- border-radius: 50%;
- width: 0.625rem;
- height: 0.625rem;
- }
-
- &__pagination {
- padding: 15px;
- color: $darker-text-color;
- position: absolute;
- bottom: 3px;
- inset-inline-end: 0;
- display: flex;
- align-items: center;
- z-index: 1;
- }
-}
-
-.layout-multiple-columns .announcements__mastodon {
- display: none;
-}
-
-.layout-multiple-columns .announcements__container {
- width: 100%;
-}
-
-.reactions-bar {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- margin-top: 15px;
- margin-inline-start: -2px;
- width: calc(100% - (90px - 33px));
-
- &__item {
- flex-shrink: 0;
- background: lighten($ui-base-color, 12%);
- color: $darker-text-color;
- border: 0;
- border-radius: 3px;
- margin: 2px;
- cursor: pointer;
- user-select: none;
- padding: 0 6px;
- display: flex;
- align-items: center;
- transition: all 100ms ease-in;
- transition-property: background-color, color;
-
- &__emoji {
- display: block;
- margin: 3px 0;
- width: 16px;
- height: 16px;
-
- img {
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- min-width: auto;
- min-height: auto;
- object-fit: contain;
- }
- }
-
- &__count {
- display: block;
- min-width: 9px;
- font-size: 13px;
- font-weight: 500;
- text-align: center;
- margin-inline-start: 6px;
- }
-
- &:hover,
- &:focus,
- &:active {
- background: lighten($ui-base-color, 16%);
- transition: all 200ms ease-out;
- transition-property: background-color, color;
- color: lighten($darker-text-color, 4%);
- }
-
- &.active {
- transition: all 100ms ease-in;
- transition-property: background-color, color;
- background-color: color.mix(
- lighten($ui-base-color, 12%),
- $ui-highlight-color,
- 80%
- );
- color: lighten($highlight-text-color, 8%);
- }
- }
-
- .emoji-picker-dropdown {
- display: flex;
- margin: 2px;
- }
-
- &:hover .emoji-button {
- opacity: 0.85;
- }
-
- .emoji-button {
- color: $darker-text-color;
- margin: 0;
- font-size: 16px;
- width: auto;
- flex-shrink: 0;
- padding: 0 6px;
- height: 22px;
- display: flex;
- align-items: center;
- opacity: 0.5;
- transition: all 100ms ease-in;
- transition-property: background-color, color;
-
- &:hover,
- &:active,
- &:focus {
- opacity: 1;
- color: lighten($darker-text-color, 4%);
- transition: all 200ms ease-out;
- transition-property: background-color, color;
- }
- }
-
- &--empty {
- .emoji-button {
- padding: 0;
- }
- }
-}
-
-.notification,
-.status__wrapper,
-.conversation {
- position: relative;
-
- // When scrolling these elements into view, take into account
- // the column header height
- scroll-margin-top: var(--column-header-height, 0);
-
- &.unread {
- &::before {
- content: '';
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- width: 100%;
- height: 100%;
- border-inline-start: 4px solid $highlight-text-color;
- pointer-events: none;
- }
- }
-}
-
-.picture-in-picture {
- position: fixed;
- bottom: 20px;
- inset-inline-end: 20px;
- width: 300px;
- box-shadow: var(--dropdown-shadow);
-
- // glitch: feature to chose which side the pop-in player is displayed
- &.left {
- inset-inline-end: unset;
- inset-inline-start: 20px;
- }
-
- &__footer {
- border-radius: 0 0 4px 4px;
- background: var(--modal-background-variant-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--modal-border-color);
- border-top: 0;
- padding: 12px;
- display: flex;
- justify-content: space-between;
- }
-
- &__header {
- border-radius: 4px 4px 0 0;
- background: var(--modal-background-variant-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--modal-border-color);
- border-bottom: 0;
- padding: 12px;
- display: flex;
- justify-content: space-between;
-
- .icon-button {
- padding: 6px;
- }
-
- &__account {
- display: flex;
- text-decoration: none;
- overflow: hidden;
- }
-
- .account__avatar {
- margin-inline-end: 8px;
- }
-
- .display-name {
- color: $primary-text-color;
- text-decoration: none;
-
- strong,
- span {
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
- }
-
- span {
- color: $darker-text-color;
- }
- }
- }
-
- .video-player,
- .audio-player {
- border-radius: 0;
- }
-}
-
-.picture-in-picture-placeholder {
- border-radius: 8px;
- box-sizing: border-box;
- border: 1px dashed var(--background-border-color);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-top: 16px;
- font-size: 15px;
- line-height: 21px;
- font-weight: 500;
- cursor: pointer;
- color: $dark-text-color;
- aspect-ratio: 16 / 9;
-
- .icon {
- width: 48px;
- height: 48px;
- margin-bottom: 8px;
- }
-
- &:hover,
- &:active,
- &:focus {
- color: $darker-text-color;
- }
-
- &:focus-visible {
- outline: $ui-button-focus-outline;
- border-color: transparent;
- }
-}
-
-.notifications-permission-banner {
- padding: 30px;
- border-bottom: 1px solid var(--background-border-color);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- position: relative;
-
- &__close {
- position: absolute;
- top: 10px;
- inset-inline-end: 10px;
- }
-
- h2 {
- font-size: 16px;
- font-weight: 500;
- margin-bottom: 15px;
- text-align: center;
- }
-
- p {
- color: $darker-text-color;
- margin-bottom: 15px;
- text-align: center;
-
- .icon {
- width: 20px;
- height: 20px;
- vertical-align: middle;
- }
- }
-}
-
-.explore__search-header {
- justify-content: center;
- align-items: center;
- border: 1px solid var(--background-border-color);
- border-top: 0;
- border-bottom: 0;
- padding: 16px;
- padding-bottom: 8px;
-
- .search {
- width: 100%;
- margin-bottom: 0;
- }
-
- .search__input {
- border: 1px solid var(--background-border-color);
- padding-block: 12px;
- padding-inline-end: 30px;
- }
-
- .search__popout {
- border: 1px solid var(--background-border-color);
- }
-
- .search__icon {
- top: 12px;
- inset-inline-end: 12px;
- color: $dark-text-color;
- }
-}
-
-.layout-single-column .explore__search-header {
- display: none;
-
- @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
- display: flex;
- }
-}
-
-.explore__search-results {
- flex: 1 1 auto;
- display: flex;
- flex-direction: column;
-
- @media screen and (min-width: $no-gap-breakpoint) {
- border: 1px solid var(--background-border-color);
- border-top: 0;
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- }
-}
-
-.story {
- display: flex;
- align-items: center;
- color: $primary-text-color;
- padding: 16px;
- border-bottom: 1px solid var(--background-border-color);
- gap: 16px;
-
- &:last-child {
- border-bottom: 0;
- }
-
- &__details {
- flex: 1 1 auto;
-
- &__publisher {
- color: $darker-text-color;
- margin-bottom: 8px;
- font-size: 14px;
- line-height: 20px;
- }
-
- &__title {
- display: block;
- font-size: 19px;
- line-height: 24px;
- font-weight: 500;
- margin-bottom: 8px;
- text-decoration: none;
- color: $primary-text-color;
-
- &:hover,
- &:active,
- &:focus {
- color: $highlight-text-color;
- }
- }
-
- &__shared {
- display: flex;
- align-items: baseline;
- color: $darker-text-color;
- gap: 8px;
- justify-content: space-between;
- font-size: 14px;
- line-height: 20px;
-
- &__pill {
- background: var(--surface-variant-background-color);
- border-radius: 4px;
- color: inherit;
- text-decoration: none;
- padding: 4px 12px;
- font-size: 12px;
- font-weight: 500;
- line-height: 16px;
- flex-shrink: 0;
- }
-
- &__author-link {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- color: $primary-text-color;
- font-weight: 500;
- text-decoration: none;
-
- &:hover,
- &:active,
- &:focus {
- color: $highlight-text-color;
- }
- }
- }
-
- strong {
- font-weight: 500;
- }
- }
-
- &__thumbnail {
- flex: 0 0 auto;
- position: relative;
- width: 120px;
- height: 120px;
-
- .skeleton {
- width: 100%;
- height: 100%;
- }
-
- img {
- border-radius: 8px;
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
-
- &__preview {
- border-radius: 8px;
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- object-fit: fill;
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- z-index: 0;
-
- &--hidden {
- display: none;
- }
- }
- }
-
- &.expanded {
- flex-direction: column;
-
- .story__thumbnail {
- order: 1;
- width: 100%;
- height: auto;
- aspect-ratio: 1.91 / 1;
- }
-
- .story__details {
- order: 2;
- width: 100%;
- flex: 0 0 auto;
- }
- }
-}
-
-.server-banner {
- &__introduction {
- font-size: 15px;
- line-height: 22px;
- color: $darker-text-color;
- margin-bottom: 20px;
-
- strong {
- font-weight: 700;
- }
-
- a {
- color: inherit;
- text-decoration: underline;
-
- &:hover,
- &:active,
- &:focus {
- text-decoration: none;
- }
- }
- }
-
- &__hero {
- display: block;
- border-radius: 4px;
- width: 100%;
- height: auto;
- margin-bottom: 20px;
- aspect-ratio: 1.9;
- border: 0;
- background: $ui-base-color;
- object-fit: cover;
- }
-
- &__description {
- font-size: 15px;
- line-height: 22px;
- color: $darker-text-color;
- margin-bottom: 20px;
- }
-
- &__meta {
- display: flex;
- gap: 10px;
- max-width: 100%;
-
- &__column {
- flex: 0 0 auto;
- width: calc(50% - 5px);
- overflow: hidden;
- }
- }
-
- &__number {
- font-weight: 600;
- color: $primary-text-color;
- font-size: 14px;
- }
-
- &__number-label {
- color: $darker-text-color;
- font-weight: 500;
- font-size: 14px;
- }
-
- h4 {
- text-transform: uppercase;
- color: $darker-text-color;
- margin-bottom: 10px;
- font-weight: 600;
- }
-
- .account {
- padding: 0;
- border: 0;
- }
-
- .account__avatar-wrapper {
- margin-inline-start: 0;
- }
-
- .spacer {
- margin: 10px 0;
- }
-}
-
-.safety-action-modal,
-.interaction-modal {
- max-width: 100vw;
- width: 600px;
- overflow-y: auto;
-}
-
-.interaction-modal {
- overflow: visible;
- position: relative;
- display: block;
- border-radius: 16px;
- background: var(--modal-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--modal-border-color);
- padding: 24px;
- box-sizing: border-box;
-
- @media screen and (max-width: $mobile-breakpoint) {
- border-radius: 16px 16px 0 0;
- border-bottom: 0;
- padding-bottom: 32px;
- }
-
- h3 {
- font-size: 22px;
- line-height: 33px;
- font-weight: 700;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 8px;
- }
-
- p {
- text-align: center;
- font-size: 17px;
- line-height: 22px;
- color: $darker-text-color;
-
- strong {
- color: $primary-text-color;
- font-weight: 700;
- }
- }
-
- p.hint {
- margin-bottom: 14px;
- font-size: 14px;
- }
-
- &__lead {
- margin-bottom: 20px;
-
- h3 {
- margin-bottom: 15px;
- }
- }
-
- &__login {
- position: relative;
- margin-bottom: 20px;
-
- &__input {
- @include search-input;
-
- border: 1px solid var(--background-border-color);
- padding: 4px 6px;
- color: $primary-text-color;
- font-size: 16px;
- line-height: 18px;
- display: flex;
- align-items: center;
-
- input {
- background: transparent;
- color: inherit;
- font: inherit;
- border: 0;
- padding: 15px - 4px 15px - 6px;
- flex: 1 1 auto;
- min-width: 0;
-
- &::placeholder {
- color: lighten($darker-text-color, 4%);
- }
-
- &:focus {
- outline: 0;
- }
- }
-
- .button {
- flex: 0 0 auto;
- }
- }
-
- .search__popout {
- margin-top: -1px;
- padding-top: 5px;
- padding-bottom: 5px;
- border: 1px solid var(--background-border-color);
- }
-
- &.invalid &__input {
- border-color: $error-red;
- }
-
- &.expanded .search__popout {
- display: block;
- }
-
- &.expanded &__input {
- border-radius: 4px 4px 0 0;
- }
- }
-
- &__choices {
- display: flex;
- gap: 40px;
-
- &__choice {
- flex: 1;
- box-sizing: border-box;
-
- h3 {
- margin-bottom: 20px;
- }
-
- p {
- color: $darker-text-color;
- margin-bottom: 20px;
- font-size: 15px;
- }
-
- .button {
- margin-bottom: 10px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
-
- @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
- &__choices {
- flex-direction: column;
-
- &__choice {
- margin-top: 40px;
- }
- }
- }
-
- .link-button {
- font-size: inherit;
- display: inline;
- }
-}
-
-.copypaste {
- display: flex;
- align-items: center;
- gap: 10px;
-
- input {
- display: block;
- font-family: inherit;
- background: darken($ui-base-color, 8%);
- border: 1px solid $highlight-text-color;
- color: $darker-text-color;
- border-radius: 4px;
- padding: 6px 9px;
- line-height: 22px;
- font-size: 14px;
- transition: border-color 300ms linear;
- flex: 1 1 auto;
- overflow: hidden;
-
- &:focus {
- outline: 0;
- background: darken($ui-base-color, 4%);
- }
- }
-
- .button {
- flex: 0 0 auto;
- transition: background 300ms linear;
- }
-
- &.copied {
- input {
- border: 1px solid $valid-value-color;
- transition: none;
- }
-
- .button {
- background: $valid-value-color;
- transition: none;
- }
- }
-}
-
-.privacy-policy {
- padding: 20px;
-
- @media screen and (min-width: $no-gap-breakpoint) {
- border-radius: 4px;
- }
-
- &__body {
- margin-top: 20px;
- }
-}
-
-.prose {
- color: $secondary-text-color;
- font-size: 15px;
- line-height: 22px;
-
- p,
- ul,
- ol {
- margin-top: 1.25em;
- margin-bottom: 1.25em;
- }
-
- img {
- margin-top: 2em;
- margin-bottom: 2em;
- max-width: 100%;
- }
-
- video {
- margin-top: 2em;
- margin-bottom: 2em;
- max-width: 100%;
- }
-
- figure {
- margin-top: 2em;
- margin-bottom: 2em;
-
- figcaption {
- font-size: 0.875em;
- line-height: 1.4285714;
- margin-top: 0.8571429em;
- }
- }
-
- figure > * {
- margin-top: 0;
- margin-bottom: 0;
- }
-
- h1 {
- font-size: 1.5em;
- margin-top: 0;
- margin-bottom: 1em;
- line-height: 1.33;
- }
-
- h2 {
- font-size: 1.25em;
- margin-top: 1.6em;
- margin-bottom: 0.6em;
- line-height: 1.6;
- }
-
- h3,
- h4,
- h5,
- h6 {
- margin-top: 1.5em;
- margin-bottom: 0.5em;
- line-height: 1.5;
- }
-
- ol {
- counter-reset: list-counter;
- }
-
- li {
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- }
-
- ol > li {
- counter-increment: list-counter;
-
- &::before {
- content: counter(list-counter) '.';
- position: absolute;
- inset-inline-start: 0;
- }
- }
-
- ul > li::before {
- content: '';
- position: absolute;
- background-color: $darker-text-color;
- border-radius: 50%;
- width: 0.375em;
- height: 0.375em;
- top: 0.5em;
- inset-inline-start: 0.25em;
- }
-
- ul > li,
- ol > li {
- position: relative;
- padding-inline-start: 1.75em;
- }
-
- & > ul > li p {
- margin-top: 0.75em;
- margin-bottom: 0.75em;
- }
-
- & > ul > li > *:first-child {
- margin-top: 1.25em;
- }
-
- & > ul > li > *:last-child {
- margin-bottom: 1.25em;
- }
-
- & > ol > li > *:first-child {
- margin-top: 1.25em;
- }
-
- & > ol > li > *:last-child {
- margin-bottom: 1.25em;
- }
-
- ul ul,
- ul ol,
- ol ul,
- ol ol {
- margin-top: 0.75em;
- margin-bottom: 0.75em;
- }
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- strong,
- b {
- color: $primary-text-color;
- font-weight: 700;
- }
-
- em,
- i {
- font-style: italic;
- }
-
- a {
- color: $highlight-text-color;
- text-decoration: underline;
-
- &:focus,
- &:hover,
- &:active {
- text-decoration: none;
- }
- }
-
- code {
- font-size: 0.875em;
- background: darken($ui-base-color, 8%);
- border-radius: 4px;
- padding: 0.2em 0.3em;
- }
-
- hr {
- border: 0;
- border-top: 1px solid lighten($ui-base-color, 4%);
- margin-top: 3em;
- margin-bottom: 3em;
- }
-
- hr + * {
- margin-top: 0;
- }
-
- h2 + * {
- margin-top: 0;
- }
-
- h3 + * {
- margin-top: 0;
- }
-
- h4 + *,
- h5 + *,
- h6 + * {
- margin-top: 0;
- }
-
- & > :first-child {
- margin-top: 0;
- }
-
- & > :last-child {
- margin-bottom: 0;
- }
-}
-
-.dismissable-banner,
-.warning-banner {
- position: relative;
- margin: 10px;
- margin-bottom: 5px;
- border-radius: 8px;
- border: 1px solid $highlight-text-color;
- background: color.change($highlight-text-color, $alpha: 0.15);
- overflow: hidden;
- flex-shrink: 0;
-
- &__background-image {
- width: 125%;
- position: absolute;
- bottom: -25%;
- inset-inline-end: -25%;
- z-index: -1;
- opacity: 0.15;
- mix-blend-mode: luminosity;
- }
-
- &__message {
- flex: 1 1 auto;
- padding: 15px;
- font-size: 15px;
- line-height: 22px;
- font-weight: 500;
- color: $primary-text-color;
-
- p {
- margin-bottom: 15px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- h1 {
- color: $highlight-text-color;
- font-size: 22px;
- line-height: 33px;
- font-weight: 700;
- margin-bottom: 15px;
- }
-
- &__actions {
- display: flex;
- flex-wrap: wrap;
- gap: 4px;
-
- &__wrapper {
- display: flex;
- margin-top: 30px;
- }
-
- .button {
- display: block;
- flex-grow: 1;
- }
- }
-
- .button-tertiary {
- background: color.change($ui-base-color, $alpha: 0.15);
- backdrop-filter: blur(8px);
- }
- }
-
- &__action {
- float: right;
- padding: 15px 10px;
-
- .icon-button {
- color: $highlight-text-color;
- }
- }
-}
-
-.warning-banner {
- border: 1px solid $warning-red;
- background: color.change($warning-red, $alpha: 0.15);
-
- &__message {
- h1 {
- color: $warning-red;
- }
-
- a {
- color: $primary-text-color;
- }
- }
-}
-
-.image {
- position: relative;
- overflow: hidden;
-
- &__preview {
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
-
- &.loaded &__preview {
- display: none;
- }
-
- img {
- display: block;
- width: 100%;
- height: 100%;
- object-fit: cover;
- border: 0;
- background: transparent;
- opacity: 0;
- }
-
- &.loaded img {
- opacity: 1;
- }
-}
-
-.link-footer {
- flex: 0 0 auto;
- padding-top: 20px;
- z-index: 1;
- font-size: 13px;
-
- .column & {
- padding: 15px;
- }
-
- p {
- color: $dark-text-color;
- margin-bottom: 20px;
-
- .version {
- white-space: nowrap;
- }
-
- strong {
- font-weight: 500;
- }
-
- a {
- color: $dark-text-color;
- text-decoration: underline;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
- }
-}
-
-.about {
- padding: 20px;
- border-top: 1px solid var(--background-border-color);
-
- @media screen and (min-width: $no-gap-breakpoint) {
- border-radius: 4px;
- }
-
- &__footer {
- color: $dark-text-color;
- text-align: center;
- font-size: 15px;
- line-height: 22px;
- margin-top: 20px;
- }
-
- &__header {
- margin-bottom: 30px;
-
- &__hero {
- width: 100%;
- height: auto;
- aspect-ratio: 1.9;
- background: lighten($ui-base-color, 4%);
- border-radius: 8px;
- margin-bottom: 30px;
- }
-
- h1,
- p {
- text-align: center;
- }
-
- h1 {
- font-size: 24px;
- line-height: 1.5;
- font-weight: 700;
- margin-bottom: 10px;
- }
-
- p {
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
- color: $darker-text-color;
- }
- }
-
- &__meta {
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- display: flex;
- margin-bottom: 30px;
- font-size: 15px;
-
- &__column {
- box-sizing: border-box;
- width: 50%;
- padding: 20px;
- }
-
- &__divider {
- width: 0;
- border: 0;
- border-style: solid;
- border-color: var(--background-border-color);
- border-left-width: 1px;
- min-height: calc(100% - 60px);
- flex: 0 0 auto;
- }
-
- h4 {
- font-size: 15px;
- text-transform: uppercase;
- color: $darker-text-color;
- font-weight: 500;
- margin-bottom: 20px;
- }
-
- @media screen and (width <= 600px) {
- display: block;
-
- h4 {
- text-align: center;
- }
-
- &__column {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- &__divider {
- min-height: 0;
- width: 100%;
- border-left-width: 0;
- border-top-width: 1px;
- }
- }
-
- .layout-multiple-columns & {
- display: block;
-
- h4 {
- text-align: center;
- }
-
- &__column {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- &__divider {
- min-height: 0;
- width: 100%;
- border-left-width: 0;
- border-top-width: 1px;
- }
- }
- }
-
- &__mail {
- color: $primary-text-color;
- text-decoration: none;
- font-weight: 500;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
-
- .link-footer {
- padding: 0;
- margin-top: 60px;
- text-align: center;
- font-size: 15px;
- line-height: 22px;
-
- @media screen and (min-width: $no-gap-breakpoint) {
- display: none;
- }
- }
-
- .account {
- padding: 0;
- border: 0;
- }
-
- .account__avatar-wrapper {
- margin-inline-start: 0;
- }
-
- .account__relationship {
- display: none;
- }
-
- &__section {
- margin-bottom: 10px;
-
- &__title {
- display: flex;
- align-items: center;
- gap: 6px;
- font-size: 17px;
- font-weight: 600;
- line-height: 22px;
- padding: 20px;
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
- color: $highlight-text-color;
- cursor: pointer;
- width: 100%;
- background: none;
- }
-
- &.active &__title {
- border-radius: 4px 4px 0 0;
- }
-
- &__body {
- border: 1px solid var(--background-border-color);
- border-top: 0;
- padding: 20px;
- font-size: 15px;
- line-height: 22px;
- }
- }
-
- &__domain-blocks {
- margin-top: 30px;
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
-
- &__domain {
- border-bottom: 1px solid var(--background-border-color);
- padding: 10px;
- font-size: 15px;
- color: $darker-text-color;
-
- &:nth-child(2n) {
- background: darken($ui-base-color, 4%);
- }
-
- &:last-child {
- border-bottom: 0;
- }
-
- &__header {
- display: flex;
- gap: 10px;
- justify-content: space-between;
- font-weight: 500;
- margin-bottom: 4px;
- }
-
- h6 {
- color: $secondary-text-color;
- font-size: inherit;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
-}
-
-.notification-list {
- position: fixed;
- bottom: 2rem;
- inset-inline-start: 1rem;
- z-index: 9999;
- display: flex;
- flex-direction: column;
- gap: 4px;
-}
-
-.notification-bar {
- --alert-edge-spacing: 1rem;
-
- display: flex;
- gap: 10px;
- flex: 0 0 auto;
- width: auto;
- padding: 15px;
- margin: 0;
- color: $white;
- background: color.change($black, $alpha: 0.85);
- backdrop-filter: blur(8px);
- border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
- border-radius: 8px;
- box-shadow:
- 0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25),
- 0 4px 6px -4px color.change($base-shadow-color, $alpha: 0.25);
- cursor: default;
- font-size: 15px;
- line-height: 21px;
-
- &.from-side {
- translate: calc(
- -1 * (100% + var(--alert-edge-spacing)) * var(--text-x-direction)
- );
- }
-
- &.from-below {
- translate: 0 calc(100% + var(--alert-edge-spacing));
- }
-
- &.notification-bar--active {
- translate: none;
- }
-
- .no-reduce-motion & {
- transition: 0.5s cubic-bezier(0.89, 0.01, 0.5, 1.1);
- will-change: translate;
- }
-}
-
-.notification-bar__content {
- margin-inline-end: auto;
-}
-
-.notification-bar__title {
- margin-inline-end: 5px;
- font-weight: 700;
-}
-
-.notification-bar__action {
- display: inline-block;
- border: 0;
- background: transparent;
- text-transform: uppercase;
- cursor: pointer;
- color: $blurple-300;
- font-weight: 700;
- border-radius: 4px;
- padding: 0 4px;
-
- &:hover,
- &:focus,
- &:active {
- background: color.change($white, $alpha: 0.15);
- }
-}
-
-.notification-bar__dismiss-button {
- margin-top: -2px;
- color: rgb(from currentColor r g b / 85%);
-
- &:hover,
- &:focus,
- &:active {
- color: currentColor;
- }
-}
-
-.notification-bar__loading-indicator {
- --spinner-size: 22px;
-
- position: relative;
- height: var(--spinner-size);
- width: var(--spinner-size);
- margin-inline-start: 2px;
-
- svg {
- color: $white;
- height: var(--spinner-size);
- width: var(--spinner-size);
- }
-}
-
-.hashtag-header {
- border-bottom: 1px solid var(--background-border-color);
- padding: 15px;
- font-size: 17px;
- line-height: 22px;
- color: $darker-text-color;
-
- strong {
- font-weight: 700;
- }
-
- &__header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 15px;
- gap: 15px;
-
- h1 {
- color: $primary-text-color;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- font-size: 22px;
- line-height: 33px;
- font-weight: 700;
- }
-
- &__buttons {
- display: flex;
- align-items: center;
- gap: 8px;
-
- .button {
- flex-shrink: 1;
- white-space: nowrap;
- min-width: 80px;
- }
-
- .icon-button {
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- box-sizing: content-box;
- padding: 5px;
-
- .icon {
- width: 24px;
- height: 24px;
- }
- }
- }
- }
-}
-
-.hashtag-bar {
- margin-top: 16px;
- display: flex;
- flex-wrap: wrap;
- font-size: 12px;
- line-height: 16px;
- gap: 6px;
- color: $darker-text-color;
-
- a {
- display: inline-flex;
- color: inherit;
- text-decoration: none;
- padding: 4px 12px;
- background: var(--surface-variant-background-color);
- border-radius: 4px;
- font-weight: 500;
-
- &:hover,
- &:focus,
- &:active {
- background: var(--surface-variant-active-background-color);
- }
- }
-
- .link-button {
- color: inherit;
- font-size: inherit;
- line-height: inherit;
- padding: 0;
- }
-}
-
-.inline-follow-suggestions {
- display: flex;
- flex-direction: column;
- gap: 12px;
- padding: 16px 0;
- padding-bottom: 0;
- border-bottom: 1px solid var(--background-border-color);
- background: color.change($ui-highlight-color, $alpha: 0.05);
-
- &.focusable:focus-visible {
- background: color.change($ui-highlight-color, $alpha: 0.05);
- }
-
- &__header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0 16px;
-
- h3 {
- font-size: 15px;
- line-height: 22px;
- font-weight: 500;
- }
-
- &__actions {
- display: flex;
- align-items: center;
- gap: 24px;
- }
-
- .link-button {
- font-size: 13px;
- font-weight: 500;
- }
- }
-
- &__body {
- position: relative;
-
- &__scroll-button {
- position: absolute;
- height: 100%;
- background: transparent;
- border: none;
- cursor: pointer;
- top: 0;
- color: $primary-text-color;
- opacity: 0.5;
-
- &.left {
- left: 0;
- }
-
- &.right {
- right: 0;
- }
-
- &__icon {
- border-radius: 50%;
- background: $ui-highlight-color;
- display: flex;
- align-items: center;
- justify-content: center;
- aspect-ratio: 1;
- padding: 8px;
-
- .icon {
- width: 24px;
- height: 24px;
- }
- }
-
- &:hover,
- &:focus,
- &:active {
- opacity: 1;
-
- .inline-follow-suggestions__body__scroll-button__icon {
- background: lighten($ui-highlight-color, 4%);
- }
- }
- }
-
- &__scrollable {
- box-sizing: border-box;
- display: flex;
- flex-wrap: nowrap;
- min-height: 228px;
- gap: 16px;
- padding: 16px;
- scroll-snap-type: x mandatory;
- scroll-padding: 16px;
- scroll-behavior: smooth;
- overflow-x: scroll;
- scrollbar-width: none;
-
- &__card {
- background: var(--background-color);
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- display: flex;
- flex-direction: column;
- gap: 12px;
- align-items: center;
- padding: 12px;
- scroll-snap-align: start;
- flex: 0 0 auto;
- width: 200px;
- box-sizing: border-box;
- position: relative;
-
- a {
- text-decoration: none;
- }
-
- & > .icon-button {
- position: absolute;
- inset-inline-end: 8px;
- top: 8px;
- opacity: 0.75;
- }
-
- &__avatar {
- height: 48px;
- display: flex;
-
- a {
- display: flex;
- text-decoration: none;
- }
- }
-
- .account__avatar {
- flex-shrink: 0;
- align-self: flex-end;
- border: 1px solid var(--background-border-color);
- background-color: $ui-base-color;
- }
-
- &__text-stack {
- display: flex;
- flex-direction: column;
- gap: 4px;
- align-items: center;
- max-width: 100%;
-
- a {
- max-width: 100%;
- }
-
- &__source {
- display: inline-flex;
- align-items: center;
- color: $dark-text-color;
- gap: 4px;
- overflow: hidden;
- white-space: nowrap;
- cursor: help;
-
- > span {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .icon {
- width: 16px;
- height: 16px;
- }
- }
- }
-
- .display-name {
- display: flex;
- flex-direction: column;
- gap: 4px;
- align-items: center;
-
- & > * {
- max-width: 100%;
- }
-
- &__html {
- font-size: 15px;
- font-weight: 500;
- color: $secondary-text-color;
- }
-
- &__account {
- font-size: 14px;
- color: $darker-text-color;
- }
- }
-
- .verified-badge {
- font-size: 14px;
- max-width: 100%;
- }
-
- .button {
- display: block;
- width: 100%;
- }
- }
- }
- }
-}
-
-.filtered-notifications-banner {
- display: flex;
- align-items: center;
- border-bottom: 1px solid var(--background-border-color);
- padding: 16px 24px;
- gap: 8px;
- color: $darker-text-color;
- text-decoration: none;
-
- &:hover,
- &:active,
- &:focus {
- color: $secondary-text-color;
- }
-
- .notification-group__icon {
- color: inherit;
- }
-
- &__text {
- flex: 1 1 auto;
- font-size: 14px;
- line-height: 20px;
-
- strong {
- font-size: 16px;
- line-height: 24px;
- display: block;
- }
- }
-
- &__badge {
- background: $ui-button-background-color;
- color: $white;
- border-radius: 100px;
- padding: 2px 8px;
- }
-}
-
-.notification-request {
- $padding: 15px;
-
- display: flex;
- padding: $padding;
- gap: 8px;
- position: relative;
- border-bottom: 1px solid var(--background-border-color);
-
- &__checkbox {
- position: absolute;
- inset-inline-start: $padding;
- top: 50%;
- transform: translateY(-50%);
- width: 0;
- overflow: hidden;
- opacity: 0;
-
- .check-box {
- display: flex;
- }
- }
-
- &__link {
- display: flex;
- align-items: center;
- gap: 12px;
- flex: 1 1 auto;
- text-decoration: none;
- color: inherit;
- overflow: hidden;
-
- .account__avatar {
- flex-shrink: 0;
- }
- }
-
- &__name {
- flex: 1 1 auto;
- color: $darker-text-color;
- font-size: 14px;
- line-height: 20px;
- overflow: hidden;
- text-overflow: ellipsis;
-
- &__display-name {
- display: flex;
- align-items: center;
- gap: 6px;
- font-size: 16px;
- letter-spacing: 0.5px;
- line-height: 24px;
- color: $secondary-text-color;
-
- bdi {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
-
- .filtered-notifications-banner__badge {
- background: $ui-button-background-color;
- border-radius: 4px;
- padding: 1px 6px;
- color: $white;
- }
- }
-
- &__actions {
- display: flex;
- align-items: center;
- gap: 8px;
-
- .icon-button {
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
- padding: 5px;
- }
- }
-
- .notification-request__link {
- transition: padding-inline-start 0.1s ease-in-out;
- }
-
- &--forced-checkbox {
- cursor: pointer;
-
- &:hover {
- background: var(--on-surface-color);
- }
-
- .notification-request__checkbox {
- opacity: 1;
- width: 30px;
- }
-
- .notification-request__link {
- padding-inline-start: 30px;
- }
-
- .notification-request__actions {
- display: none;
- }
- }
-}
-
-.more-from-author {
- box-sizing: border-box;
- font-size: 14px;
- color: $darker-text-color;
- background: var(--surface-background-color);
- border: 1px solid var(--background-border-color);
- border-top: 0;
- border-radius: 0 0 8px 8px;
- padding: 15px;
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- gap: 4px 8px;
-
- .logo {
- width: 16px;
- height: 16px;
- color: $darker-text-color;
- }
-
- & > span {
- display: flex;
- align-items: center;
- gap: 8px;
- }
-
- a {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- font-weight: 500;
- color: $primary-text-color;
- text-decoration: none;
- min-width: 0;
-
- &:hover,
- &:focus,
- &:active {
- color: $highlight-text-color;
- }
- }
-}
-
-.notification-group {
- display: flex;
- align-items: flex-start;
- gap: 8px;
- padding: 10px 14px; // glitch: reduced padding
- border-bottom: 1px solid var(--background-border-color);
-
- &__icon {
- width: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 0 0 auto;
- color: $dark-text-color;
-
- .icon {
- width: 28px;
- height: 28px;
- }
- }
-
- &--follow &__icon,
- &--follow-request &__icon {
- color: $highlight-text-color;
- }
-
- &--favourite &__icon {
- color: $gold-star;
- }
-
- &--reblog &__icon {
- color: $valid-value-color;
- }
-
- &--relationships-severance-event &__icon,
- &--admin-report &__icon,
- &--admin-sign-up &__icon {
- color: $dark-text-color;
- }
-
- &--moderation-warning &__icon {
- color: $red-bookmark;
- }
-
- &--follow-request &__actions {
- align-items: center;
- display: flex;
- gap: 8px;
-
- .icon-button {
- border: 1px solid var(--background-border-color);
- border-radius: 50%;
- padding: 1px;
- }
- }
-
- &__main {
- display: flex;
- flex-direction: column;
- gap: 8px;
- flex: 1 1 auto;
- overflow: hidden;
- container-type: inline-size;
-
- &__header {
- display: flex;
- flex-direction: column;
- gap: 8px;
-
- &__wrapper {
- display: flex;
- justify-content: space-between;
- }
-
- &__label {
- display: flex;
- flex-wrap: wrap;
- gap: 2px 8px;
- font-size: 15px;
- line-height: 22px;
- color: $darker-text-color;
-
- a {
- color: inherit;
- text-decoration: none;
- }
-
- bdi {
- font-weight: 700;
- color: $primary-text-color;
- }
-
- time {
- color: $dark-text-color;
- }
-
- @container (width < 350px) {
- time,
- &-separator {
- display: none;
- }
- }
- }
- }
-
- &__status {
- border: 1px solid var(--background-border-color);
- border-radius: 8px;
- padding: 8px;
- }
-
- &__additional-content {
- color: $dark-text-color;
- margin-top: -8px; // to offset the parent's `gap` property
- font-size: 15px;
- line-height: 22px;
- }
- }
-
- .status {
- padding: 0;
- border: 0;
- }
-
- &__embedded-status {
- display: flex;
- flex-direction: column;
- gap: 8px;
- cursor: pointer;
-
- &__account {
- display: flex;
- align-items: center;
- gap: 4px;
- color: $dark-text-color;
- font-size: 15px;
- line-height: 22px;
-
- bdi {
- color: $darker-text-color;
- }
-
- .account__avatar {
- flex: 0 0 auto;
- }
- }
-
- /* glitch: used for CWs */
- p {
- font-size: 15px;
- color: $darker-text-color;
- }
-
- &__content {
- display: -webkit-box;
- font-size: 15px;
- line-height: 22px;
- color: $darker-text-color;
- -webkit-line-clamp: 4;
- line-clamp: 4;
- -webkit-box-orient: vertical;
- max-height: none;
- overflow: hidden;
-
- p,
- a {
- color: inherit;
- }
-
- p {
- margin-bottom: 8px;
- }
- }
-
- .reply-indicator__attachments {
- font-size: 15px;
- line-height: 22px;
- color: $dark-text-color;
- }
- }
-}
-
-.notification-group__actions,
-.compose-form__actions {
- .button {
- display: block; // Otherwise text-ellipsis doesn't work
- flex: 1 1 auto;
- }
-}
-
-.notification-ungrouped {
- padding: 10px 14px; // glitch: reduced padding
- border-bottom: 1px solid var(--background-border-color);
-
- &__header {
- display: flex;
- align-items: center;
- gap: 8px;
- color: $dark-text-color;
- font-size: 15px;
- line-height: 22px;
- font-weight: 500;
- padding-inline-start: 24px;
- margin-bottom: 16px;
-
- &__icon {
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 0 0 auto;
-
- .icon {
- width: 16px;
- height: 16px;
- }
- }
-
- a {
- color: inherit;
- text-decoration: none;
- }
- }
-
- .status:not(.status--is-quote) {
- border: 0;
- padding: 0;
- }
-
- .status__wrapper-direct {
- background: transparent;
- }
-
- .status {
- // 40px avatar + 8px gap
- --status-gutter-width: 48px;
- }
-
- .status--is-quote {
- --status-gutter-width: 0;
- }
-
- .status__content,
- .status__action-bar,
- .media-gallery,
- .video-player,
- .audio-player,
- .attachment-list,
- .picture-in-picture-placeholder,
- .more-from-author,
- .status-card,
- .hashtag-bar,
- .content-warning,
- .filter-warning {
- margin-inline-start: var(--status-gutter-width);
- width: calc(100% - var(--status-gutter-width));
- }
-
- .more-from-author {
- width: calc(100% - var(--status-gutter-width) + 2px);
- }
-
- .status__content__read-more-button {
- margin-inline-start: var(--status-gutter-width);
- }
-
- .notification__report {
- border: 0;
- padding: 0;
- }
-}
-
-.notification-group--unread,
-.notification-ungrouped--unread {
- position: relative;
-
- &::before {
- content: '';
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- width: 100%;
- height: 100%;
- border-inline-start: 4px solid $highlight-text-color;
- pointer-events: none;
- }
-}
-
-.hover-card-controller[data-popper-reference-hidden='true'] {
- opacity: 0;
- pointer-events: none;
-}
-
-.hover-card {
- box-shadow: var(--dropdown-shadow);
- background: var(--modal-background-color);
- backdrop-filter: $backdrop-blur-filter;
- border: 1px solid var(--modal-border-color);
- border-radius: 8px;
- padding: 16px;
- width: 270px;
- display: flex;
- flex-direction: column;
- gap: 12px;
-
- &--loading {
- position: relative;
- min-height: 100px;
- }
-
- &__name {
- display: flex;
- gap: 12px;
- text-decoration: none;
- color: inherit;
- }
-
- &__numbers,
- &__familiar-followers {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- gap: 2px 10px;
- }
-
- &__numbers {
- font-size: 15px;
- line-height: 22px;
- color: $secondary-text-color;
-
- strong {
- font-weight: 700;
- }
- }
-
- &__text-row {
- display: flex;
- flex-direction: column;
- gap: 8px;
- }
-
- &__bio {
- color: $secondary-text-color;
- font-size: 14px;
- line-height: 20px;
- display: -webkit-box;
- line-clamp: 2;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- max-height: 2 * 20px;
- overflow: hidden;
-
- p {
- margin-bottom: 0;
- }
-
- a {
- color: inherit;
- text-decoration: underline;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
- }
-
- &__note {
- &-label {
- color: $dark-text-color;
- font-size: 12px;
- font-weight: 500;
- text-transform: uppercase;
- }
-
- dd {
- white-space: pre-line;
- color: $secondary-text-color;
- overflow: hidden;
- line-clamp: 3; // Not yet supported in browers
- display: -webkit-box; // The next 3 properties are needed
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- }
- }
-
- &__limited-account-note {
- text-align: center;
- font-weight: 500;
- }
-
- .display-name {
- font-size: 15px;
- line-height: 22px;
-
- bdi {
- font-weight: 500;
- color: $primary-text-color;
- }
-
- &__account {
- display: block;
- color: $dark-text-color;
- }
- }
-
- .account-fields {
- color: $secondary-text-color;
- font-size: 14px;
- line-height: 20px;
-
- a {
- color: inherit;
- text-decoration: none;
-
- &:focus,
- &:hover,
- &:active {
- text-decoration: underline;
- }
- }
-
- dl {
- display: flex;
- align-items: center;
- gap: 4px;
-
- dt {
- flex: 0 1 auto;
- color: $dark-text-color;
- min-width: 0;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- dd {
- flex: 1 1 auto;
- font-weight: 500;
- min-width: 0;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- text-align: end;
- }
-
- &.verified {
- dd {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- gap: 4px;
- overflow: hidden;
- white-space: nowrap;
- color: $valid-value-color;
-
- & > span {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- a {
- font-weight: 500;
- }
-
- .icon {
- width: 16px;
- height: 16px;
- }
- }
- }
- }
- }
-}
-
-.content-warning {
- display: block;
- box-sizing: border-box;
- background: var(--nested-card-background);
- color: var(--nested-card-text);
- border: var(--nested-card-border);
- border-radius: 8px;
- padding: 8px (5px + 8px);
- position: relative;
- font-size: 15px;
- line-height: 22px;
- cursor: pointer;
-
- p {
- margin-bottom: 8px;
- font-weight: 500;
- }
-
- .link-button {
- font-size: inherit;
- line-height: inherit;
- font-weight: 500;
- }
-
- &--filter {
- color: $darker-text-color;
-
- p {
- font-weight: normal;
- }
-
- .filter-name {
- font-weight: 500;
- color: $secondary-text-color;
- }
- }
-
- .status__content__spoiler-icon {
- float: inline-end;
- width: 20px;
- height: 20px;
- }
-}
-
-.lists__item {
- display: flex;
- align-items: center;
- gap: 16px;
- padding-inline-end: 13px;
- border-bottom: 1px solid var(--background-border-color);
-
- &__title {
- display: flex;
- align-items: center;
- gap: 5px;
- padding: 16px 13px;
- flex: 1 1 auto;
- font-size: 16px;
- line-height: 24px;
- color: $secondary-text-color;
- text-decoration: none;
-
- &:is(a):hover,
- &:is(a):focus,
- &:is(a):active {
- color: $primary-text-color;
- }
-
- input {
- display: block;
- width: 100%;
- background: transparent;
- border: 0;
- padding: 0;
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
- color: inherit;
-
- &::placeholder {
- color: var(--input-placeholder-color);
- opacity: 1;
- }
-
- &:focus {
- outline: 0;
- }
- }
- }
-}
-
-.column-search-header {
- display: flex;
- gap: 12px;
- align-items: center;
- border: 1px solid var(--background-border-color);
- border-top: 0;
- border-bottom: 0;
- padding: 16px;
- padding-bottom: 8px;
-
- input {
- background: var(--input-background-color);
- border: 1px solid var(--background-border-color);
- color: var(--on-input-color);
- padding: 12px;
- font-size: 16px;
- line-height: normal;
- border-radius: 4px;
- display: block;
- flex: 1 1 auto;
-
- &::placeholder {
- color: var(--input-placeholder-color);
- opacity: 1;
- }
-
- &:focus {
- outline: 0;
- }
- }
-}
-
-.column-footer {
- padding: 16px;
-}
-
-.lists-scrollable {
- min-height: 50vh;
-}
-
-.featured-carousel {
- overflow: hidden;
- flex-shrink: 0;
- border-bottom: 1px solid var(--background-border-color);
- touch-action: pan-y;
-
- &__slides {
- display: flex;
- flex-wrap: nowrap;
- align-items: start;
- }
-
- &__slide {
- flex: 0 0 auto;
- flex-basis: 100%;
- width: 100%;
- overflow: hidden;
- }
-
- .status {
- border-bottom: 0;
-
- // glitch-soc fix for width-constrained
- contain: inline-size;
- }
-
- &__header {
- padding: 8px 16px;
- color: $darker-text-color;
- inset-inline-end: 0;
- display: flex;
- align-items: center;
- gap: 4px;
- }
-
- &__title {
- flex-grow: 1;
- font-size: 12px;
- font-weight: 500;
- text-transform: uppercase;
- display: flex;
- align-items: center;
- gap: 4px;
-
- .icon {
- width: 16px;
- height: 16px;
- }
- }
-
- &__pagination {
- display: flex;
- align-items: center;
- gap: 4px;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
deleted file mode 100644
index 7db9ca409d..0000000000
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ /dev/null
@@ -1,166 +0,0 @@
-@use 'variables' as *;
-
-.container-alt {
- width: 700px;
- margin: 0 auto;
-
- @media screen and (width <= 740px) {
- width: 100%;
- margin: 0;
- }
-}
-
-.logo-container {
- margin: 50px auto;
-
- h1 {
- display: flex;
- justify-content: center;
- align-items: center;
-
- .logo {
- height: 42px;
- margin-inline-end: 10px;
- }
-
- a {
- display: flex;
- justify-content: center;
- align-items: center;
- color: $primary-text-color;
- text-decoration: none;
- outline: 0;
- padding: 12px 16px;
- line-height: 32px;
- font-weight: 500;
- font-size: 14px;
- }
- }
-}
-
-.compose-standalone {
- .compose-form {
- width: 400px;
- margin: 0 auto;
- padding: 10px 0;
- padding-bottom: 20px;
- box-sizing: border-box;
-
- @media screen and (width <= 400px) {
- width: 100%;
- padding: 20px;
- }
- }
-}
-
-.account-header {
- width: 400px;
- margin: 0 auto;
- display: flex;
- align-items: center;
- gap: 10px;
- font-size: 14px;
- line-height: 20px;
- box-sizing: border-box;
- padding: 20px 0;
- margin-top: 40px;
- margin-bottom: 10px;
- border-bottom: 1px solid var(--background-border-color);
-
- @media screen and (width <= 440px) {
- width: 100%;
- margin: 0;
- padding: 20px;
- }
-
- .avatar {
- width: 48px;
- height: 48px;
- flex: 0 0 auto;
-
- img {
- width: 100%;
- height: 100%;
- display: block;
- margin: 0;
- border-radius: var(--avatar-border-radius);
- }
- }
-
- .name {
- flex: 1 1 auto;
- color: $secondary-text-color;
-
- .username {
- display: block;
- font-size: 16px;
- line-height: 24px;
- text-overflow: ellipsis;
- overflow: hidden;
- color: $primary-text-color;
- }
- }
-
- .logout-link {
- display: block;
- font-size: 32px;
- line-height: 40px;
- flex: 0 0 auto;
- }
-}
-
-.redirect {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100vh;
- font-size: 14px;
- line-height: 18px;
-
- &__logo {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 30px;
-
- img {
- height: 48px;
- }
- }
-
- &__message {
- text-align: center;
-
- h1 {
- font-size: 17px;
- line-height: 22px;
- font-weight: 700;
- margin-bottom: 30px;
- }
-
- p {
- margin-bottom: 30px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- a {
- color: $highlight-text-color;
- font-weight: 500;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
-
- &__link {
- margin-top: 15px;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/contrast.scss b/app/javascript/flavours/glitch/styles/contrast.scss
index 367be051f1..af73c88fef 100644
--- a/app/javascript/flavours/glitch/styles/contrast.scss
+++ b/app/javascript/flavours/glitch/styles/contrast.scss
@@ -1,3 +1,8 @@
-@use 'contrast/variables';
-@use 'application';
+@use 'mastodon/css_variables';
+@use 'mastodon/variables';
+@use 'common';
@use 'contrast/diff';
+
+html {
+ color-scheme: dark;
+}
diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss
index d4da67cf61..f809c7cdc3 100644
--- a/app/javascript/flavours/glitch/styles/contrast/diff.scss
+++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss
@@ -1,4 +1,16 @@
-@use '../variables' as *;
+:root {
+ /* TEXT TOKENS */
+
+ --color-text-primary: var(--color-grey-50);
+ --color-text-secondary: var(--color-grey-300);
+ --color-text-tertiary: var(--color-grey-400);
+ --color-text-brand: var(--color-indigo-300);
+ --color-text-status-links: var(--color-text-brand);
+
+ /* BORDER TOKENS */
+
+ --border-strength-primary: 18%;
+}
.status__content a,
.reply-indicator__content a,
@@ -31,16 +43,6 @@
}
}
-.status__content a,
-.reply-indicator__content a,
-.edit-indicator__content a {
- color: $highlight-text-color;
-}
-
-.report-dialog-modal__textarea::placeholder {
- color: $inverted-text-color;
-}
-
.link-button:disabled {
cursor: not-allowed;
diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss
deleted file mode 100644
index 8db7d6bad0..0000000000
--- a/app/javascript/flavours/glitch/styles/contrast/variables.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use '../functions' as *;
-
-// Dependent colors
-$black: #000;
-
-$classic-base-color: hsl(240deg, 16%, 19%);
-$classic-primary-color: hsl(240deg, 29%, 70%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
-$classic-highlight-color: hsl(240deg, 100%, 69%);
-
-$ui-base-color: $classic-base-color !default;
-$ui-primary-color: $classic-primary-color !default;
-$ui-secondary-color: $classic-secondary-color !default;
-$ui-highlight-color: $classic-highlight-color !default;
-
-@use '../variables' with (
- $darker-text-color: lighten($ui-primary-color, 20%),
- $dark-text-color: lighten($ui-primary-color, 12%),
- $secondary-text-color: lighten($ui-secondary-color, 6%),
- $highlight-text-color: lighten($ui-highlight-color, 10%),
- $action-button-color: lighten($ui-base-color, 50%),
- $inverted-text-color: $black,
- $lighter-text-color: darken($ui-base-color, 6%),
- $light-text-color: $classic-primary-color
-);
diff --git a/app/javascript/flavours/glitch/styles/css_variables.scss b/app/javascript/flavours/glitch/styles/css_variables.scss
deleted file mode 100644
index 78915ae10e..0000000000
--- a/app/javascript/flavours/glitch/styles/css_variables.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@use 'sass:color';
-@use 'functions' as *;
-@use 'variables' as *;
-
-:root {
- --dropdown-border-color: #{lighten($ui-base-color, 4%)};
- --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
- --dropdown-shadow:
- 0 20px 25px -5px #{color.change($base-shadow-color, $alpha: 0.25)},
- 0 8px 10px -6px #{color.change($base-shadow-color, $alpha: 0.25)};
- --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
- --modal-background-variant-color: #{color.change($ui-base-color, $alpha: 0.7)};
- --modal-border-color: #{lighten($ui-base-color, 4%)};
- --background-border-color: #{lighten($ui-base-color, 4%)};
- --background-color: #{darken($ui-base-color, 8%)};
- --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
- --surface-background-color: #{darken($ui-base-color, 4%)};
- --surface-variant-background-color: #{$ui-base-color};
- --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
- --surface-border-color: #{lighten($ui-base-color, 8%)};
- --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
- --avatar-border-radius: 8px;
- --media-outline-color: #{rgba(#fcf8ff, 0.15)};
- --overlay-icon-shadow: drop-shadow(
- 0 0 8px #{color.change($base-shadow-color, $alpha: 0.35)}
- );
- --error-background-color: #{darken($error-red, 16%)};
- --error-active-background-color: #{darken($error-red, 12%)};
- --on-error-color: #fff;
- --rich-text-container-color: rgba(87, 24, 60, 100%);
- --rich-text-text-color: rgba(255, 175, 212, 100%);
- --rich-text-decorations-color: rgba(128, 58, 95, 100%);
- --nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%);
- --nested-card-text: #{$secondary-text-color};
- --nested-card-border: 1px solid
- color(from #{$ui-highlight-color} srgb r g b / 15%);
- --input-placeholder-color: #{$dark-text-color};
- --input-background-color: var(--surface-variant-background-color);
- --on-input-color: #{$secondary-text-color};
-}
-
-body {
- // Variable for easily inverting directional UI elements,
- --text-x-direction: 1;
-
- &.rtl {
- --text-x-direction: -1;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss
deleted file mode 100644
index 8326022f71..0000000000
--- a/app/javascript/flavours/glitch/styles/dashboard.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-@use 'functions' as *;
-@use 'variables' as *;
-
-.dashboard__counters {
- display: flex;
- flex-wrap: wrap;
- margin: 0 -5px;
- margin-bottom: 20px;
-
- & > div {
- box-sizing: border-box;
- flex: 0 0 33.333%;
- padding: 0 5px;
- margin-bottom: 10px;
-
- & > div,
- & > a {
- padding: 20px;
- background: var(--background-color);
- border-radius: 4px;
- border: 1px solid var(--background-border-color);
- box-sizing: border-box;
- height: 100%;
- }
-
- & > a {
- text-decoration: none;
- color: inherit;
- display: block;
-
- &:hover,
- &:focus,
- &:active {
- background: $ui-base-color;
- }
- }
- }
-
- &__num,
- &__text {
- text-align: center;
- font-weight: 500;
- font-size: 24px;
- color: $primary-text-color;
- margin-bottom: 20px;
- line-height: 30px;
- }
-
- &__text {
- font-size: 18px;
- }
-
- &__label {
- font-size: 14px;
- color: $darker-text-color;
- text-align: center;
- font-weight: 500;
- }
-}
-
-.dashboard {
- display: grid;
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
- gap: 10px;
-
- @media screen and (width <= 1350px) {
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
- }
-
- &__item {
- &--span-double-column {
- grid-column: span 2;
- }
-
- &--span-double-row {
- grid-row: span 2;
- }
-
- h4 {
- padding-top: 20px;
- }
- }
-
- &__quick-access {
- display: flex;
- align-items: baseline;
- border-radius: 4px;
- background: $ui-button-background-color;
- color: $primary-text-color;
- transition: all 100ms ease-in;
- font-size: 14px;
- padding: 8px 16px;
- text-decoration: none;
- margin-bottom: 4px;
-
- &:active,
- &:focus,
- &:hover {
- background-color: $ui-button-focus-background-color;
- transition: all 200ms ease-out;
- }
-
- &.positive {
- background: lighten($ui-base-color, 4%);
- color: $valid-value-color;
- }
-
- &.negative {
- background: lighten($ui-base-color, 4%);
- color: $error-value-color;
- }
-
- span {
- flex: 1 1 auto;
- }
-
- strong {
- font-weight: 700;
- }
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/emoji_picker.scss b/app/javascript/flavours/glitch/styles/emoji_picker.scss
deleted file mode 100644
index 716c790e65..0000000000
--- a/app/javascript/flavours/glitch/styles/emoji_picker.scss
+++ /dev/null
@@ -1,245 +0,0 @@
-@use 'variables' as *;
-@use 'functions' as *;
-
-.emoji-mart {
- font-size: 13px;
- display: inline-block;
-
- &,
- * {
- box-sizing: border-box;
- line-height: 1.15;
- }
-
- .emoji-mart-emoji {
- padding: 6px;
- }
-}
-
-.emoji-mart-bar {
- &:first-child {
- background: var(--dropdown-border-color);
- }
-}
-
-.emoji-mart-anchors {
- display: flex;
- justify-content: space-between;
- padding: 0 6px;
- line-height: 0;
-}
-
-.emoji-mart-anchor {
- position: relative;
- flex: 1;
- text-align: center;
- padding: 12px 4px;
- overflow: hidden;
- transition: color 0.1s ease-out;
- cursor: pointer;
- background: transparent;
- border: 0;
- color: $darker-text-color;
-
- &:hover {
- color: lighten($darker-text-color, 4%);
- }
-}
-
-.emoji-mart-anchor-selected {
- color: $highlight-text-color;
-
- &:hover {
- color: lighten($highlight-text-color, 4%);
- }
-
- .emoji-mart-anchor-bar {
- bottom: -1px;
- }
-}
-
-.emoji-mart-anchor-bar {
- position: absolute;
- bottom: -5px;
- inset-inline-start: 0;
- width: 100%;
- height: 4px;
- background-color: $highlight-text-color;
-}
-
-.emoji-mart-anchors {
- i {
- display: inline-block;
- width: 100%;
- max-width: 22px;
- }
-
- svg {
- fill: currentColor;
- max-height: 18px;
- }
-}
-
-.emoji-mart-scroll {
- overflow-y: scroll;
- height: 270px;
- max-height: 35vh;
- padding: 0 6px 6px;
- will-change: transform;
-}
-
-.emoji-mart-search {
- padding: 10px;
- padding-inline-end: 45px;
- position: relative;
-
- input {
- font-size: 16px;
- font-weight: 400;
- padding: 7px 9px;
- padding-inline-end: 25px;
- font-family: inherit;
- display: block;
- width: 100%;
- background: $ui-base-color;
- color: $darker-text-color;
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &:active,
- &:focus {
- outline: none !important;
- border-width: 1px !important;
- }
-
- &::-webkit-search-cancel-button {
- display: none;
- }
- }
-}
-
-.emoji-mart-search-icon {
- position: absolute;
- top: 18px;
- inset-inline-end: 45px + 5px;
- z-index: 2;
- padding: 2px 5px 1px;
- border: 0;
- background: none;
- transition: all 100ms linear;
- transition-property: opacity;
- pointer-events: auto;
- opacity: 0.7;
-
- &:disabled {
- cursor: default;
- pointer-events: none;
- }
-
- svg {
- fill: $darker-text-color;
- }
-}
-
-.emoji-mart-category .emoji-mart-emoji {
- cursor: pointer;
-
- span {
- z-index: 1;
- position: relative;
- text-align: center;
- display: inline-flex !important;
- align-items: center;
- justify-content: center;
- }
-
- &:hover::before {
- z-index: -1;
- content: '';
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- width: 100%;
- height: 100%;
- background-color: var(--dropdown-border-color);
- border-radius: 100%;
- }
-}
-
-.emoji-mart-category-label {
- z-index: 2;
- position: relative;
- position: -webkit-sticky;
- position: sticky;
- top: 0;
-
- span {
- display: block;
- width: 100%;
- font-weight: 500;
- padding: 5px 6px;
- }
-}
-
-/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
-.emoji-mart-sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip-path: inset(50%);
- border: 0;
-}
-
-.emoji-mart-category-list {
- margin: 0;
- padding: 0;
-}
-
-.emoji-mart-category-list li {
- list-style: none;
- margin: 0;
- padding: 0;
- display: inline-block;
-}
-
-.emoji-mart-emoji {
- position: relative;
- display: inline-block;
- background: transparent;
- border: 0;
- padding: 0;
- font-size: 0;
-
- span {
- width: 22px;
- height: 22px;
- }
-}
-
-.emoji-mart-no-results {
- font-size: 14px;
- color: $dark-text-color;
- text-align: center;
- padding: 5px 6px;
- padding-top: 70px;
-
- .emoji-mart-no-results-label {
- margin-top: 0.2em;
- }
-
- .emoji-mart-emoji:hover::before {
- cursor: default;
- content: none;
- }
-}
-
-.emoji-mart-preview {
- display: none;
-}
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
deleted file mode 100644
index e11f8768c1..0000000000
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ /dev/null
@@ -1,1464 +0,0 @@
-@use 'sass:color';
-@use 'variables' as *;
-@use 'functions' as *;
-
-code {
- font-family: $font-monospace, monospace;
- font-weight: 400;
-}
-
-.form-container {
- max-width: 450px;
- padding: 20px;
- padding-bottom: 50px;
- margin: 50px auto;
-}
-
-.form-section {
- border-radius: 8px;
- background: var(--surface-background-color);
- padding: 24px;
- margin-bottom: 24px;
-}
-
-.fade-out-top {
- position: relative;
- overflow: hidden;
- height: 160px;
- max-width: 566px;
- margin-inline: auto;
-
- &::after {
- content: '';
- display: block;
- background: linear-gradient(
- to bottom,
- var(--surface-background-color),
- transparent
- );
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- width: 100%;
- height: 100px;
- pointer-events: none;
- }
-
- & > div {
- position: absolute;
- inset-inline-start: 0;
- bottom: 0;
- }
-}
-
-.indicator-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- color: $primary-text-color;
-
- &.success {
- background: $success-green;
- }
-
- &.failure {
- background: $error-red;
- }
-}
-
-.simple_form {
- &.hidden {
- display: none;
- }
-
- .input {
- margin-bottom: 16px;
- overflow: hidden;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- &__toolbar {
- margin-top: 16px;
- display: flex;
- align-items: center;
- gap: 16px;
-
- .character-counter {
- flex: 0 0 auto;
- }
- }
-
- &.hidden {
- margin: 0;
- }
-
- &.radio_buttons {
- .radio {
- margin-bottom: 15px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- .radio > label {
- position: relative;
- padding-inline-start: 28px;
-
- input {
- position: absolute;
- top: -2px;
- inset-inline-start: 0;
- }
- }
- }
-
- &.boolean {
- position: relative;
- margin-bottom: 0;
-
- .label_input > label {
- font-family: inherit;
- font-size: 14px;
- padding-top: 5px;
- color: $primary-text-color;
- display: block;
- width: auto;
- }
-
- .label_input,
- .hint {
- padding-inline-start: 28px;
- }
-
- .label_input__wrapper {
- position: static;
- }
-
- label.checkbox {
- position: absolute;
- top: 2px;
- inset-inline-start: 0;
- }
-
- label a {
- color: $highlight-text-color;
- text-decoration: underline;
-
- &:hover,
- &:active,
- &:focus {
- text-decoration: none;
- }
- }
-
- .overridden,
- .recommended,
- .not_recommended,
- .glitch_only {
- position: absolute;
- margin: 0 4px;
- margin-top: -2px;
- }
- }
- }
-
- .row {
- display: flex;
- margin: 0 -5px;
-
- .input {
- box-sizing: border-box;
- flex: 1 1 auto;
- width: 50%;
- padding: 0 5px;
- }
- }
-
- .title {
- font-size: 28px;
- line-height: 33px;
- font-weight: 700;
- margin-bottom: 15px;
- }
-
- .lead {
- font-size: 17px;
- line-height: 22px;
- color: $secondary-text-color;
- margin-bottom: 30px;
-
- &.invited-by {
- margin-bottom: 15px;
- }
-
- a {
- color: $highlight-text-color;
- }
- }
-
- .rules-list {
- font-size: 17px;
- line-height: 22px;
- margin-bottom: 30px;
- }
-
- .hint {
- color: $darker-text-color;
-
- a {
- color: $highlight-text-color;
- }
-
- code {
- border-radius: 3px;
- padding: 0.2em 0.4em;
- background: darken($ui-base-color, 12%);
- }
-
- li {
- list-style: disc;
- margin-inline-start: 18px;
- }
-
- .icon {
- vertical-align: -3px;
- }
- }
-
- ul.hint {
- margin-bottom: 15px;
- }
-
- span.hint {
- display: block;
- font-size: 12px;
- margin-top: 4px;
- }
-
- p.hint {
- margin-bottom: 15px;
- color: $darker-text-color;
-
- &.subtle-hint {
- text-align: center;
- font-size: 12px;
- line-height: 18px;
- margin-top: 15px;
- margin-bottom: 0;
- }
- }
-
- .authentication-hint {
- margin-bottom: 25px;
- }
-
- .card {
- margin-bottom: 15px;
- }
-
- strong {
- font-weight: 500;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-
- .input.with_floating_label {
- .label_input {
- display: flex;
-
- & > label {
- font-family: inherit;
- font-size: 14px;
- color: $primary-text-color;
- font-weight: 500;
- min-width: 150px;
- flex: 0 0 auto;
- }
-
- input,
- select {
- flex: 1 1 auto;
- }
- }
-
- &.select .hint {
- margin-top: 6px;
- margin-inline-start: 150px;
- }
- }
-
- .input.with_label {
- .label_input > label {
- font-family: inherit;
- font-size: 14px;
- color: $primary-text-color;
- display: block;
- margin-bottom: 8px;
- overflow-wrap: break-word;
- font-weight: 500;
- }
-
- .hint {
- margin-top: 6px;
- }
-
- ul {
- flex: 390px;
- }
- }
-
- .input.with_block_label {
- max-width: none;
-
- & > label {
- font-family: inherit;
- font-size: 14px;
- color: $primary-text-color;
- display: block;
- font-weight: 600;
- line-height: 20px;
- }
-
- .hint {
- line-height: 16px;
- margin-bottom: 12px;
- }
-
- ul {
- columns: 2;
-
- @media screen and (max-width: $mobile-breakpoint) {
- columns: 1;
- }
- }
- }
-
- .input.with_block_label.user_role_permissions_as_keys ul {
- columns: unset;
- }
-
- .input.datetime .label_input,
- .input.date .label_input {
- display: flex;
- gap: 4px;
- align-items: center;
-
- select {
- display: inline-block;
- width: auto;
- flex: 0;
- }
- }
-
- .input.date_of_birth .label_input {
- display: flex;
- gap: 8px;
- align-items: center;
-
- input {
- box-sizing: content-box;
- width: 32px;
- flex: 0;
-
- &:last-child {
- width: 64px;
- }
- }
- }
-
- .input.select.select--languages {
- min-width: 32ch;
- }
-
- .required abbr {
- text-decoration: none;
- color: lighten($error-value-color, 12%);
- }
-
- .fields-group {
- margin-bottom: 25px;
-
- .input:last-child {
- margin-bottom: 0;
- }
-
- &__thumbnail {
- display: block;
- margin: 0;
- margin-bottom: 10px;
- max-width: 100%;
- height: auto;
- border-radius: var(--avatar-border-radius);
- background: url('@/images/void.png');
-
- &[src$='missing.png'] {
- visibility: hidden;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
-
- &#account_avatar-preview {
- width: 90px;
- height: 90px;
- object-fit: cover;
- }
- }
- }
-
- .fields-row {
- display: flex;
- margin: 0 -10px;
- padding-top: 5px;
- margin-bottom: 25px;
-
- .input {
- max-width: none;
- }
-
- &__column {
- box-sizing: border-box;
- padding: 0 10px;
- flex: 1 1 auto;
- min-height: 1px;
-
- &-6 {
- max-width: 50%;
- }
-
- .actions {
- margin-top: 27px;
- }
- }
-
- .fields-group:last-child,
- .fields-row__column.fields-group {
- margin-bottom: 0;
- }
-
- @media screen and (max-width: $no-columns-breakpoint) {
- display: block;
- margin-bottom: 0;
-
- &__column {
- max-width: none;
- }
-
- .fields-group:last-child,
- .fields-row__column.fields-group,
- .fields-row__column {
- margin-bottom: 25px;
- }
- }
-
- .fields-group.invited-by {
- margin-bottom: 30px;
-
- .hint {
- text-align: center;
- }
- }
- }
-
- .input.radio_buttons .radio label {
- margin-bottom: 5px;
- font-family: inherit;
- font-size: 14px;
- color: $primary-text-color;
- display: block;
- width: auto;
- }
-
- .check_boxes {
- .checkbox {
- label {
- font-family: inherit;
- font-size: 14px;
- color: $primary-text-color;
- display: inline-block;
- width: auto;
- position: relative;
- padding-top: 5px;
- padding-inline-start: 25px;
- flex: 1 1 auto;
- }
-
- input[type='checkbox'] {
- position: absolute;
- inset-inline-start: 0;
- top: 5px;
- margin: 0;
- }
- }
- }
-
- .input.static .label_input__wrapper {
- font-size: 14px;
- padding: 10px;
- border: 1px solid $dark-text-color;
- border-radius: 4px;
- }
-
- input[type='text'],
- input[type='number'],
- input[type='email'],
- input[type='password'],
- input[type='url'],
- input[type='datetime-local'],
- textarea {
- box-sizing: border-box;
- font-size: 14px;
- line-height: 20px;
- color: $primary-text-color;
- display: block;
- width: 100%;
- outline: 0;
- font-family: inherit;
- resize: vertical;
- background: $ui-base-color;
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- padding: 10px 16px;
-
- &:invalid {
- box-shadow: none;
- }
-
- &:required:valid {
- border-color: $valid-value-color;
- }
-
- @media screen and (width <= 600px) {
- font-size: 16px;
- }
- }
-
- input[type='text'],
- input[type='number'],
- input[type='email'],
- input[type='password'],
- input[type='datetime-local'] {
- &:focus:invalid:not(:placeholder-shown),
- &:required:invalid:not(:placeholder-shown) {
- border-color: lighten($error-red, 12%);
- }
- }
-
- .input.field_with_errors {
- label {
- color: lighten($error-red, 12%);
- }
-
- input[type='text'],
- input[type='number'],
- input[type='email'],
- input[type='password'],
- input[type='datetime-local'],
- textarea,
- select {
- border-color: lighten($error-red, 12%);
- }
-
- .error {
- display: block;
- font-weight: 500;
- color: lighten($error-red, 12%);
- margin-top: 4px;
- }
- }
-
- .input.disabled {
- opacity: 0.5;
- }
-
- .actions {
- margin-top: 30px;
- display: flex;
- gap: 10px;
-
- &.actions--top {
- margin-top: 0;
- margin-bottom: 30px;
- }
- }
-
- .stacked-actions {
- display: flex;
- flex-direction: column;
- gap: 10px;
- margin-top: 30px;
- margin-bottom: 15px;
- }
-
- .btn {
- display: block;
- width: 100%;
- border: 0;
- border-radius: 4px;
- background: $ui-button-background-color;
- color: $ui-button-color;
- font-size: 15px;
- line-height: 22px;
- height: auto;
- padding: 7px 18px;
- text-decoration: none;
- text-align: center;
- box-sizing: border-box;
- cursor: pointer;
- font-weight: 500;
- outline: 0;
-
- &:last-child {
- margin-inline-end: 0;
- }
-
- &:active,
- &:focus,
- &:hover {
- background-color: $ui-button-focus-background-color;
- }
-
- &:disabled,
- &:disabled:hover {
- background-color: $ui-button-disabled-color;
- }
-
- &.negative {
- background: $ui-button-destructive-background-color;
-
- &:hover,
- &:active,
- &:focus {
- background-color: $ui-button-destructive-focus-background-color;
- }
- }
- }
-
- select {
- appearance: none;
- box-sizing: border-box;
- font-size: 14px;
- color: $primary-text-color;
- display: block;
- width: 100%;
- outline: 0;
- font-family: inherit;
- resize: vertical;
- background: $ui-base-color
- url("data:image/svg+xml;utf8,")
- no-repeat right 8px center / auto 14px;
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- padding-inline-start: 10px;
- padding-inline-end: 30px;
- height: 41px;
-
- @media screen and (width <= 600px) {
- font-size: 16px;
- }
- }
-
- h4 {
- margin-bottom: 15px !important;
- }
-
- .label_input {
- position: relative;
-
- &__loading-indicator {
- box-sizing: border-box;
- position: absolute;
- top: 0;
- inset-inline-start: 0;
- border: 1px solid transparent;
- padding: 10px 16px;
- width: 100%;
- }
-
- &__wrapper {
- position: relative;
- }
-
- &__append {
- position: absolute;
- inset-inline-end: 3px;
- top: 1px;
- padding: 10px;
- font-size: 14px;
- color: $dark-text-color;
- font-family: inherit;
- pointer-events: none;
- cursor: default;
- max-width: 50%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-
- &::after {
- content: '';
- display: block;
- position: absolute;
- top: 0;
- inset-inline-end: 0;
- bottom: 1px;
- width: 5px;
- }
- }
- }
-
- .status-card {
- contain: unset;
- }
-}
-
-.block-icon {
- display: block;
- margin: 0 auto;
- margin-bottom: 10px;
- font-size: 24px;
-}
-
-.flash-message {
- background: var(--background-color);
- color: $highlight-text-color;
- border: 1px solid $highlight-text-color;
- border-radius: 4px;
- padding: 15px 10px;
- margin-bottom: 30px;
- text-align: center;
-
- &.notice {
- border: 1px solid color.change($valid-value-color, $alpha: 0.5);
- background: color.change($valid-value-color, $alpha: 0.25);
- color: $valid-value-color;
- }
-
- &.warning {
- border: 1px solid color.change($gold-star, $alpha: 0.5);
- background: color.change($gold-star, $alpha: 0.25);
- color: $gold-star;
- }
-
- &.alert {
- border: 1px solid color.change($error-value-color, $alpha: 0.5);
- background: color.change($error-value-color, $alpha: 0.1);
- color: $error-value-color;
- }
-
- &.hidden {
- display: none;
- }
-
- &.hidden-on-touch-devices {
- @media screen and (pointer: coarse) {
- display: none;
- }
- }
-
- a {
- display: inline-block;
- color: $darker-text-color;
- text-decoration: none;
-
- &:hover {
- color: $primary-text-color;
- text-decoration: underline;
- }
- }
-
- &.warning a {
- font-weight: 700;
- color: inherit;
- text-decoration: underline;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- color: inherit;
- }
- }
-
- p {
- margin-bottom: 15px;
- }
-
- .oauth-code {
- outline: 0;
- box-sizing: border-box;
- display: block;
- width: 100%;
- border: 0;
- padding: 10px;
- font-family: $font-monospace, monospace;
- background: $ui-base-color;
- color: $primary-text-color;
- font-size: 14px;
- margin: 0;
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
- &:focus {
- background: lighten($ui-base-color, 4%);
- }
- }
-
- strong {
- font-weight: 500;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-
- @media screen and (440px < width <= 740px) {
- margin-top: 40px;
- }
-
- &.translation-prompt {
- text-align: unset;
- color: unset;
-
- a {
- text-decoration: underline;
- }
- }
-}
-
-.flash-message-stack {
- margin-bottom: 30px;
-
- .flash-message {
- border-radius: 0;
- margin-bottom: 0;
- border-top-width: 0;
-
- &:first-child {
- border-radius: 4px 4px 0 0;
- border-top-width: 1px;
- }
-
- &:last-child {
- border-radius: 0 0 4px 4px;
-
- &:first-child {
- border-radius: 4px;
- }
- }
- }
-}
-
-.form-footer {
- margin-top: 30px;
- text-align: center;
-
- a {
- color: $darker-text-color;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
-}
-
-.quick-nav {
- list-style: none;
- margin-bottom: 25px;
- font-size: 14px;
-
- li {
- display: inline-block;
- margin-inline-end: 10px;
- }
-
- a {
- color: $highlight-text-color;
- text-transform: uppercase;
- text-decoration: none;
- font-weight: 700;
-
- &:hover,
- &:focus,
- &:active {
- color: lighten($highlight-text-color, 8%);
- }
- }
-}
-
-.oauth-prompt,
-.follow-prompt {
- margin-bottom: 30px;
- color: $darker-text-color;
-
- h2 {
- font-size: 16px;
- margin-bottom: 30px;
- text-align: center;
- }
-
- strong {
- color: $secondary-text-color;
- font-weight: 500;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-}
-
-.oauth-prompt {
- h3 {
- color: $ui-secondary-color;
- font-size: 17px;
- line-height: 22px;
- font-weight: 500;
- margin-bottom: 30px;
- }
-
- p {
- font-size: 14px;
- line-height: 18px;
- margin-bottom: 30px;
- }
-
- .permissions-list {
- border: 1px solid $ui-base-color;
- border-radius: 4px;
- background: darken($ui-base-color, 4%);
- margin-bottom: 30px;
- }
-
- .actions {
- margin: 0 -10px;
- display: flex;
-
- form {
- box-sizing: border-box;
- padding: 0 10px;
- flex: 1 1 auto;
- min-height: 1px;
- width: 50%;
- }
- }
-}
-
-.qr-wrapper {
- display: flex;
- flex-wrap: wrap;
- align-items: flex-start;
-}
-
-.qr-code {
- flex: 0 0 auto;
- background: $simple-background-color;
- padding: 4px;
- margin-inline-end: 10px;
- margin-bottom: 20px;
- box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
- display: inline-block;
-
- svg {
- display: block;
- margin: 0;
- }
-}
-
-.qr-alternative {
- margin-bottom: 20px;
- color: $secondary-text-color;
- flex: 150px;
-
- samp {
- display: block;
- font-size: 14px;
- }
-}
-
-.simple_form {
- .warning {
- box-sizing: border-box;
- background: color.change($error-value-color, $alpha: 0.5);
- color: $primary-text-color;
- text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3);
- box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4);
- border-radius: 4px;
- padding: 10px;
- margin-bottom: 15px;
-
- a {
- color: $primary-text-color;
- text-decoration: underline;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
-
- strong {
- font-weight: 600;
- display: block;
- margin-bottom: 5px;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
- }
-}
-
-.action-pagination {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
-
- .actions,
- .pagination {
- flex: 1 1 auto;
- }
-
- .actions {
- padding: 30px 0;
- padding-inline-end: 20px;
- flex: 0 0 auto;
- }
-}
-
-.post-follow-actions {
- text-align: center;
- color: $darker-text-color;
-
- div {
- margin-bottom: 4px;
- }
-}
-
-.alternative-login {
- margin-top: 20px;
- margin-bottom: 20px;
-
- h4 {
- font-size: 16px;
- color: $primary-text-color;
- text-align: center;
- margin-bottom: 20px;
- border: 0;
- padding: 0;
- }
-
- .button {
- display: block;
- }
-}
-
-.scope-danger {
- color: $warning-red;
-}
-
-.form_admin_settings_site_short_description,
-.form_admin_settings_site_description,
-.form_admin_settings_site_extended_description,
-.form_admin_settings_site_terms,
-.form_admin_settings_custom_css,
-.form_admin_settings_closed_registrations_message {
- textarea {
- font-family: $font-monospace, monospace;
- }
-}
-
-.input-copy {
- background: darken($ui-base-color, 10%);
- border: 1px solid darken($ui-base-color, 14%);
- border-radius: 4px;
- display: flex;
- align-items: center;
- padding-inline-end: 4px;
- position: relative;
- top: 1px;
- transition: border-color 300ms linear;
-
- &__wrapper {
- flex: 1 1 auto;
- }
-
- input[type='text'] {
- background: transparent;
- border: 0;
- padding: 10px;
- font-size: 14px;
- font-family: $font-monospace, monospace;
- }
-
- button {
- flex: 0 0 auto;
- margin: 4px;
- text-transform: none;
- font-weight: 400;
- font-size: 14px;
- padding: 7px 18px;
- padding-bottom: 6px;
- width: auto;
- transition: background 300ms linear;
- }
-
- &.copied {
- border-color: $valid-value-color;
- transition: none;
-
- button {
- background: $valid-value-color;
- transition: none;
- }
- }
-}
-
-.input.user_confirm_password,
-.input.user_website {
- &:not(.field_with_errors) {
- display: none;
- }
-}
-
-.simple_form .h-captcha {
- display: flex;
- justify-content: center;
- margin-bottom: 30px;
-}
-
-.permissions-list {
- &__item {
- padding: 15px;
- color: $ui-secondary-color;
- border-bottom: 1px solid lighten($ui-base-color, 4%);
- display: flex;
- align-items: center;
-
- &__text {
- flex: 1 1 auto;
-
- &__title {
- font-weight: 500;
- }
-
- &__type {
- color: $darker-text-color;
- overflow-wrap: anywhere;
- }
- }
-
- &__icon {
- flex: 0 0 auto;
- font-size: 18px;
- width: 30px;
- color: $valid-value-color;
- display: flex;
- align-items: center;
- }
-
- &:last-child {
- border-bottom: 0;
- }
- }
-}
-
-// Only remove padding when listing applications, to prevent styling issues on
-// the Authorization page.
-.applications-list {
- .permissions-list__item:last-child {
- padding-bottom: 0;
- }
-}
-
-.keywords-table {
- thead {
- th {
- white-space: nowrap;
- }
-
- th:first-child {
- width: 100%;
- }
- }
-
- tfoot {
- td {
- border: 0;
- }
- }
-
- .input.string {
- margin-bottom: 0;
- }
-
- .label_input__wrapper {
- margin-top: 10px;
- }
-
- .table-action-link {
- margin-top: 10px;
- white-space: nowrap;
- }
-}
-
-.progress-tracker {
- display: flex;
- align-items: center;
- padding-bottom: 30px;
- margin-bottom: 30px;
- color: $white;
-
- li {
- flex: 0 0 auto;
- position: relative;
- }
-
- .separator {
- height: 2px;
- background: $ui-base-lighter-color;
- flex: 1 1 auto;
-
- &.completed {
- background: $highlight-text-color;
- }
- }
-
- .circle {
- box-sizing: border-box;
- position: relative;
- width: 30px;
- height: 30px;
- border-radius: 50%;
- border: 2px solid $ui-base-lighter-color;
- flex: 0 0 auto;
- display: flex;
- align-items: center;
- justify-content: center;
-
- svg {
- width: 16px;
- }
- }
-
- .label {
- position: absolute;
- font-size: 14px;
- font-weight: 500;
- color: $secondary-text-color;
- padding-top: 10px;
- text-align: center;
- width: 100px;
- left: 50%;
- transform: translateX(-50%);
- }
-
- li:first-child .label {
- inset-inline-start: 0;
- inset-inline-end: auto;
- text-align: start;
- transform: none;
- }
-
- li:last-child .label {
- inset-inline-start: auto;
- inset-inline-end: 0;
- text-align: end;
- transform: none;
- }
-
- .active .circle {
- border-color: $highlight-text-color;
-
- &::before {
- content: '';
- width: 10px;
- height: 10px;
- border-radius: 50%;
- background: $highlight-text-color;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
- }
-
- .completed .circle {
- border-color: $highlight-text-color;
- background: $highlight-text-color;
- }
-}
-
-.app-form {
- padding: 16px;
-
- &__avatar-input,
- &__header-input {
- display: block;
- border-radius: 8px;
- background: var(--surface-variant-background-color);
- position: relative;
- cursor: pointer;
-
- img {
- position: absolute;
- width: 100%;
- height: 100%;
- object-fit: cover;
- border-radius: 8px;
- z-index: 0;
- }
-
- .icon {
- position: absolute;
- inset-inline-start: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- color: $darker-text-color;
- z-index: 3;
- }
-
- &.selected .icon {
- color: $primary-text-color;
- transform: none;
- inset-inline-start: auto;
- inset-inline-end: 8px;
- top: auto;
- bottom: 8px;
- }
-
- &.invalid img {
- outline: 1px solid $error-value-color;
- outline-offset: -1px;
- }
-
- &.invalid::before {
- display: block;
- content: '';
- width: 100%;
- height: 100%;
- position: absolute;
- background: color.change($error-value-color, $alpha: 0.25);
- z-index: 2;
- border-radius: 8px;
- }
-
- &:hover {
- background-color: var(--surface-variant-active-background-color);
- }
- }
-
- &__avatar-input {
- width: 80px;
- height: 80px;
- }
-
- &__header-input {
- aspect-ratio: 580/193;
- }
-
- &__toggle {
- display: flex;
- align-items: center;
- gap: 16px;
- color: $darker-text-color;
- font-size: 14px;
- line-height: 20px;
-
- .icon {
- flex: 0 0 auto;
- }
-
- .icon {
- width: 24px;
- height: 24px;
- }
-
- &__label {
- flex: 1 1 auto;
-
- strong {
- color: $primary-text-color;
- font-weight: 600;
- }
-
- .hint {
- display: block;
- font-size: 14px;
- color: $darker-text-color;
- }
-
- .recommended {
- position: absolute;
- margin: 0 4px;
- margin-top: -2px;
- }
- }
-
- &__toggle {
- flex: 0 0 auto;
- display: flex;
- align-items: center;
- }
-
- &__toggle > div {
- display: flex;
- border-inline-start: 1px solid var(--background-border-color);
- padding-inline-start: 16px;
- }
- }
-
- &__link {
- display: flex;
- gap: 16px;
- padding: 8px 0;
- align-items: center;
- text-decoration: none;
- color: $primary-text-color;
- margin-bottom: 16px;
-
- &__text {
- flex: 1 1 auto;
- font-size: 14px;
- line-height: 20px;
- color: $darker-text-color;
-
- strong {
- font-weight: 600;
- display: block;
- color: $primary-text-color;
- }
-
- .icon {
- vertical-align: -5px;
- width: 20px;
- height: 20px;
- }
- }
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/glitch_doodle.scss b/app/javascript/flavours/glitch/styles/glitch_doodle.scss
deleted file mode 100644
index eb053c14db..0000000000
--- a/app/javascript/flavours/glitch/styles/glitch_doodle.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-$doodle-background: #d9e1e8;
-
-.doodle-modal {
- width: unset;
-}
-
-.doodle-modal__container {
- background: $doodle-background;
- text-align: center;
- line-height: 0; // remove weird gap under canvas
- canvas {
- border: 5px solid $doodle-background;
- }
-}
-
-.doodle-modal__action-bar {
- .filler {
- flex-grow: 1;
- margin: 0;
- padding: 0;
- }
-
- .doodle-toolbar {
- line-height: 1;
- display: flex;
- flex-direction: column;
- flex-grow: 0;
- justify-content: space-around;
-
- &.with-inputs {
- label {
- display: inline-block;
- width: 70px;
- text-align: end;
- margin-inline-end: 2px;
- }
-
- input[type='number'],
- input[type='text'] {
- width: 40px;
- }
-
- span.val {
- display: inline-block;
- text-align: start;
- width: 50px;
- }
- }
- }
-
- .doodle-palette {
- padding-inline-end: 0 !important;
- border: 1px solid black;
- line-height: 0.2rem;
- flex-grow: 0;
- background: white;
-
- button {
- appearance: none;
- width: 1rem;
- height: 1rem;
- margin: 0;
- padding: 0;
- text-align: center;
- color: black;
- text-shadow: 0 0 1px white;
- cursor: pointer;
- box-shadow: inset 0 0 1px rgba(white, 0.5);
- border: 1px solid black;
- outline-offset: -1px;
-
- &.foreground {
- outline: 1px dashed white;
- }
-
- &.background {
- outline: 1px dashed red;
- }
-
- &.foreground.background {
- outline: 1px dashed red;
- border-color: white;
- }
- }
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/glitch_local_settings.scss b/app/javascript/flavours/glitch/styles/glitch_local_settings.scss
deleted file mode 100644
index 59f02cb67c..0000000000
--- a/app/javascript/flavours/glitch/styles/glitch_local_settings.scss
+++ /dev/null
@@ -1,174 +0,0 @@
-@use 'functions' as *;
-@use 'variables' as *;
-
-.glitch.local-settings {
- position: relative;
- display: flex;
- flex-direction: row;
- background: $ui-secondary-color;
- color: $inverted-text-color;
- border-radius: 8px;
- height: 80vh;
- width: 80vw;
- max-width: 740px;
- max-height: 450px;
- overflow: hidden;
-
- label,
- legend {
- display: block;
- font-size: 14px;
- }
-
- .boolean label,
- .radio_buttons label {
- position: relative;
- padding-inline-start: 28px;
- padding-top: 3px;
-
- input {
- position: absolute;
- inset-inline-start: 0;
- top: 0;
- }
- }
-
- span.hint {
- display: block;
- color: $lighter-text-color;
- }
-
- h1 {
- font-size: 18px;
- font-weight: 500;
- line-height: 24px;
- margin-bottom: 20px;
- }
-
- h2 {
- font-size: 15px;
- font-weight: 500;
- line-height: 20px;
- margin-top: 20px;
- margin-bottom: 10px;
- }
-}
-
-.glitch.local-settings__navigation__item {
- display: flex;
- gap: 5px;
- align-items: center;
- padding: 15px 20px;
- color: inherit;
- background: lighten($ui-secondary-color, 8%);
- border: 0;
- border-bottom: 1px $ui-secondary-color solid;
- cursor: pointer;
- text-decoration: none;
- outline: none;
- transition: background 0.3s;
- box-sizing: border-box;
- width: 100%;
- text-align: start;
- font-size: inherit;
-
- .text-icon-button {
- color: inherit;
- transition: unset;
- unicode-bidi: embed;
- }
-
- &:hover {
- background: $ui-secondary-color;
- }
-
- &.active {
- background: $ui-highlight-color;
- color: $primary-text-color;
- }
-
- &.close,
- &.close:hover {
- background: $error-value-color;
- color: $primary-text-color;
- }
-}
-
-.glitch.local-settings__navigation {
- background: lighten($ui-secondary-color, 8%);
- width: 212px;
- font-size: 15px;
- line-height: 20px;
- overflow-y: auto;
-}
-
-.glitch.local-settings__page {
- display: block;
- flex: auto;
- padding: 15px 20px;
- width: 360px;
- overflow-y: auto;
-}
-
-.glitch.local-settings__page__item {
- margin-bottom: 2px;
-
- .hint a {
- color: $lighter-text-color;
- font-weight: 500;
- text-decoration: underline;
-
- &:active,
- &:focus,
- &:hover {
- text-decoration: none;
- }
- }
-}
-
-.glitch.local-settings__page__item.string,
-.glitch.local-settings__page__item.radio_buttons {
- margin-top: 10px;
- margin-bottom: 10px;
-}
-
-@media screen and (width <= 630px) {
- .glitch.local-settings__navigation {
- width: 40px;
- flex-shrink: 0;
- }
-
- .glitch.local-settings__navigation__item {
- padding: 10px;
-
- span:last-of-type {
- display: none;
- }
- }
-}
-
-.deprecated-settings-label {
- white-space: nowrap;
-}
-
-.deprecated-settings-info {
- text-align: start;
-
- ul {
- padding: 10px;
- margin-inline-start: 12px;
- list-style: disc inside;
- }
-
- a {
- color: $lighter-text-color;
- font-weight: 500;
- text-decoration: underline;
-
- &:active,
- &:focus,
- &:hover {
- text-decoration: none;
- }
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss
deleted file mode 100644
index 9475b4c3c8..0000000000
--- a/app/javascript/flavours/glitch/styles/index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-/* This is a compat file so that third-party themes do not have to immediately
- update their implementation, as the previous `index.scss` has been renamed
- to `application.scss`. */
-
-@import 'application';
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light.scss b/app/javascript/flavours/glitch/styles/mastodon-light.scss
index b530616a3c..494efdbbde 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light.scss
@@ -1,4 +1,9 @@
-@use 'mastodon-light/variables';
@use 'mastodon-light/css_variables';
-@use 'application';
-@use 'mastodon-light/diff';
+@use 'mastodon/variables' with (
+ $emojis-requiring-inversion: 'chains'
+);
+@use 'common';
+
+html {
+ color-scheme: light;
+}
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss
index c01bf0048a..70745ec071 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss
@@ -1,23 +1,214 @@
-@use 'sass:color';
-@use '../variables' as *;
-@use 'variables' as *;
-@use '../functions' as *;
+@use '../mastodon/theme_utils' as utils;
-body {
- --dropdown-border-color: hsl(240deg, 25%, 88%);
- --dropdown-background-color: #fff;
- --modal-border-color: hsl(240deg, 25%, 88%);
- --modal-background-color: var(--background-color);
- --background-border-color: hsl(240deg, 25%, 88%);
- --background-color: #fff;
- --background-color-tint: rgba(255, 255, 255, 80%);
- --background-filter: blur(10px);
- --surface-variant-background-color: #f1ebfb;
- --surface-border-color: #cac4d0;
- --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
- --rich-text-container-color: rgba(255, 216, 231, 100%);
- --rich-text-text-color: rgba(114, 47, 83, 100%);
- --rich-text-decorations-color: rgba(255, 175, 212, 100%);
- --input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
- --input-background-color: #{darken($ui-base-color, 10%)};
+:root {
+ --color-black: #000;
+ --color-grey-950: #181821;
+ --color-grey-800: #292938;
+ --color-grey-700: #444664;
+ --color-grey-600: #545778;
+ --color-grey-500: #696d91;
+ --color-grey-400: #8b8dac;
+ --color-grey-300: #b4b6cb;
+ --color-grey-200: #d8d9e3;
+ --color-grey-100: #f0f0f5;
+ --color-grey-50: #f0f1ff;
+ --color-white: #fff;
+ --color-indigo-600: #6147e6;
+ --color-indigo-400: #8886ff;
+ --color-indigo-300: #a5abfd;
+ --color-indigo-200: #c8cdfe;
+ --color-indigo-100: #e0e3ff;
+ --color-indigo-50: #f0f1ff;
+ --color-red-500: #ff637e;
+ --color-red-600: #ec003f;
+ --color-yellow-400: #ffb900;
+ --color-yellow-600: #e17100;
+ --color-green-400: #05df72;
+ --color-green-600: #00a63e;
+
+ /* TEXT TOKENS */
+
+ --color-text-primary: var(--color-grey-950);
+ --color-text-secondary: var(--color-grey-600);
+ --color-text-tertiary: var(--color-grey-500);
+ --color-text-on-inverted: var(--color-white);
+ --color-text-brand: var(--color-indigo-600);
+ --color-text-brand-soft: color-mix(
+ in oklab,
+ var(--color-text-primary),
+ var(--color-text-brand)
+ );
+ --color-text-on-brand-base: var(--color-white);
+ --color-text-error: var(--color-red-600);
+ --color-text-on-error-base: var(--color-white);
+ --color-text-warning: var(--color-yellow-600);
+ --color-text-on-warning-base: var(--color-white);
+ --color-text-success: var(--color-green-600);
+ --color-text-on-success-base: var(--color-white);
+ --color-text-disabled: var(--color-grey-300);
+ --color-text-on-disabled: var(--color-grey-200);
+ --color-text-bookmark-highlight: var(--color-text-error);
+ --color-text-favourite-highlight: var(--color-text-warning);
+ --color-text-on-media: var(--color-white);
+ --color-text-status-links: var(--color-text-brand);
+
+ /* BACKGROUND TOKENS */
+
+ // Neutrals
+ --color-bg-primary: var(--color-white);
+ --overlay-strength-secondary: 5%;
+ --color-bg-secondary-base: var(--color-grey-600);
+ --color-bg-secondary: #{color-mix(
+ in oklab,
+ var(--color-bg-primary),
+ var(--color-bg-secondary-base) var(--overlay-strength-secondary)
+ )};
+ --color-bg-secondary-solid: #{color-mix(
+ in srgb,
+ var(--color-bg-primary),
+ var(--color-bg-secondary-base) var(--overlay-strength-secondary)
+ )};
+ --color-bg-tertiary: #{color-mix(
+ in oklab,
+ var(--color-bg-primary),
+ var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
+ )};
+
+ // Utility
+ --color-bg-ambient: var(--color-bg-primary);
+ --color-bg-elevated: var(--color-bg-primary);
+ --color-bg-inverted: var(--color-grey-950);
+ --color-bg-media-base: var(--color-black);
+ --color-bg-media-strength: 65%;
+ --color-bg-media: #{utils.css-alpha(
+ var(--color-bg-media-base),
+ var(--color-bg-media-strength)
+ )};
+ --color-bg-overlay: var(--color-bg-primary);
+ --color-bg-disabled: var(--color-grey-400);
+
+ // Brand
+ --overlay-strength-brand: 8%;
+ --color-bg-brand-base: var(--color-indigo-600);
+ --color-bg-brand-base-hover: color-mix(
+ in oklab,
+ var(--color-bg-brand-base),
+ black var(--overlay-strength-brand)
+ );
+ --color-bg-brand-soft: #{utils.css-alpha(
+ var(--color-bg-brand-base),
+ calc(var(--overlay-strength-brand) * 1.5)
+ )};
+ --color-bg-brand-softer: #{utils.css-alpha(
+ var(--color-bg-brand-base),
+ var(--overlay-strength-brand)
+ )};
+
+ // Error
+ --overlay-strength-error: 12%;
+ --color-bg-error-base: var(--color-red-600);
+ --color-bg-error-base-hover: color-mix(
+ in oklab,
+ var(--color-bg-error-base),
+ black var(--overlay-strength-error)
+ );
+ --color-bg-error-soft: #{utils.css-alpha(
+ var(--color-bg-error-base),
+ calc(var(--overlay-strength-error) * 1.5)
+ )};
+ --color-bg-error-softer: #{utils.css-alpha(
+ var(--color-bg-error-base),
+ var(--overlay-strength-error)
+ )};
+
+ // Warning
+ --overlay-strength-warning: 10%;
+ --color-bg-warning-base: var(--color-yellow-600);
+ --color-bg-warning-base-hover: color-mix(
+ in oklab,
+ var(--color-bg-warning-base),
+ black var(--overlay-strength-warning)
+ );
+ --color-bg-warning-soft: #{utils.css-alpha(
+ var(--color-bg-warning-base),
+ calc(var(--overlay-strength-warning) * 1.5)
+ )};
+ --color-bg-warning-softer: #{utils.css-alpha(
+ var(--color-bg-warning-base),
+ var(--overlay-strength-warning)
+ )};
+
+ // Success
+ --overlay-strength-success: 15%;
+ --color-bg-success-base: var(--color-green-600);
+ --color-bg-success-base-hover: color-mix(
+ in oklab,
+ var(--color-bg-success-base),
+ black var(--overlay-strength-success)
+ );
+ --color-bg-success-soft: #{utils.css-alpha(
+ var(--color-bg-success-base),
+ calc(var(--overlay-strength-success) * 1.5)
+ )};
+ --color-bg-success-softer: #{utils.css-alpha(
+ var(--color-bg-success-base),
+ var(--overlay-strength-success)
+ )};
+
+ /* BORDER TOKENS */
+
+ --border-strength-primary: 15%;
+ --color-border-primary: color-mix(
+ in oklab,
+ var(--color-bg-primary),
+ var(--color-grey-950) var(--border-strength-primary)
+ );
+ --color-border-media: rgb(252 248 255 / 15%);
+ --color-border-on-bg-secondary: var(--color-grey-200);
+ --color-border-on-bg-brand-softer: var(--color-indigo-200);
+ --color-border-on-bg-error-softer: #{utils.css-alpha(
+ var(--color-text-error),
+ 50%
+ )};
+ --color-border-on-bg-warning-softer: #{utils.css-alpha(
+ var(--color-text-warning),
+ 50%
+ )};
+ --color-border-on-bg-success-softer: #{utils.css-alpha(
+ var(--color-text-success),
+ 50%
+ )};
+ --color-border-on-bg-inverted: var(--color-border-primary);
+
+ /* SHADOW TOKENS */
+
+ --shadow-strength-primary: 30%;
+ --color-shadow-primary: #{utils.css-alpha(
+ var(--color-black),
+ var(--shadow-strength-primary)
+ )};
+ --dropdown-shadow:
+ 0 20px 25px -5px var(--color-shadow-primary),
+ 0 8px 10px -6px var(--color-shadow-primary);
+ --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
+
+ /* GRAPHS/CHARTS TOKENS */
+
+ --color-graph-primary-stroke: var(--color-text-brand);
+ --color-graph-primary-fill: var(--color-bg-brand-softer);
+ --color-graph-warning-stroke: var(--color-text-warning);
+ --color-graph-warning-fill: var(--color-bg-warning-softer);
+ --color-graph-disabled-stroke: var(--color-text-disabled);
+ --color-graph-disabled-fill: var(--color-bg-disabled);
+
+ /* LEGACY TOKENS */
+
+ --rich-text-container-color: rgb(255 216 231 / 100%);
+ --rich-text-text-color: rgb(114 47 83 / 100%);
+ --rich-text-decorations-color: rgb(255 175 212 / 100%);
+
+ /* MISCELLANEOUS */
+
+ --outline-focus-default: 2px solid var(--color-text-brand);
+ --avatar-border-radius: 8px;
}
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
deleted file mode 100644
index 5807723fa2..0000000000
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ /dev/null
@@ -1,591 +0,0 @@
-// Notes!
-// Sass color functions, "darken" and "lighten" are automatically replaced.
-@use 'sass:color';
-@use '../functions' as *;
-@use '../variables' as *;
-
-.simple_form .button.button-tertiary {
- color: $highlight-text-color;
-
- &:hover,
- &:focus,
- &:active {
- color: $white;
- }
-}
-
-.status-card__actions button,
-.status-card__actions a {
- color: color.change($white, $alpha: 0.8);
-
- &:hover,
- &:active,
- &:focus {
- color: $white;
- }
-}
-
-// Change default background colors of columns
-.interaction-modal {
- background: $white;
- border: 1px solid var(--background-border-color);
-}
-
-.rules-list li::before {
- background: $ui-highlight-color;
-}
-
-.directory__card__img {
- background: lighten($ui-base-color, 12%);
-}
-
-.account__header {
- background: $white;
-}
-
-.column-header__button.active {
- color: $ui-highlight-color;
-
- &:hover,
- &:active,
- &:focus {
- color: $ui-highlight-color;
- }
-}
-
-.icon-button:disabled {
- color: darken($action-button-color, 25%);
-}
-
-.getting-started__footer a {
- color: $ui-secondary-color;
- text-decoration: underline;
-}
-
-.confirmation-modal__secondary-button,
-.confirmation-modal__cancel-button,
-.mute-modal__cancel-button,
-.block-modal__cancel-button {
- color: lighten($ui-base-color, 26%);
-
- &:hover,
- &:focus,
- &:active {
- color: $primary-text-color;
- }
-}
-
-.getting-started .navigation-bar {
- border-top: 1px solid var(--background-border-color);
- border-bottom: 1px solid var(--background-border-color);
-
- @media screen and (max-width: $no-gap-breakpoint) {
- border-top: 0;
- }
-}
-
-.search__input,
-.search__popout,
-.setting-text,
-.report-dialog-modal__textarea,
-.audio-player {
- border: 1px solid var(--background-border-color);
-}
-
-.report-dialog-modal .dialog-option .poll__input {
- color: $white;
-}
-
-.upload-progress__backdrop {
- background: $ui-base-color;
-}
-
-// Change the background colors of statuses
-.focusable:focus-visible {
- background: lighten($white, 4%);
-}
-
-.account-gallery__item a {
- background-color: $ui-base-color;
-}
-
-// Change the text colors on inverted background
-.actions-modal ul li:not(:empty) a.active,
-.actions-modal ul li:not(:empty) a.active button,
-.actions-modal ul li:not(:empty) a:active,
-.actions-modal ul li:not(:empty) a:active button,
-.actions-modal ul li:not(:empty) a:focus,
-.actions-modal ul li:not(:empty) a:focus button,
-.actions-modal ul li:not(:empty) a:hover,
-.actions-modal ul li:not(:empty) a:hover button,
-.simple_form button:not(.button, .link-button) {
- color: $white;
-}
-
-.compare-history-modal .report-modal__target,
-.report-dialog-modal .poll__option.dialog-option {
- border-bottom-color: lighten($ui-base-color, 4%);
-}
-
-.report-dialog-modal__container {
- border-top-color: lighten($ui-base-color, 4%);
-}
-
-.dialog-modal__content__preview {
- background: #fff;
- border-bottom: 1px solid var(--modal-border-color);
-}
-
-.reactions-bar__item:hover,
-.reactions-bar__item:focus,
-.reactions-bar__item:active {
- background-color: $ui-base-color;
-}
-
-.reactions-bar__item.active {
- background-color: color.mix($white, $ui-highlight-color, 80%);
- border-color: color.mix(
- lighten($ui-base-color, 8%),
- $ui-highlight-color,
- 80%
- );
-}
-
-.media-modal__overlay .picture-in-picture__footer {
- border: 0;
-}
-
-.picture-in-picture__header {
- border-bottom: 0;
-}
-
-.announcements,
-.picture-in-picture__footer {
- border-top: 0;
-}
-
-.icon-with-badge__badge {
- border-color: $white;
- color: $white;
-}
-
-.column-settings__hashtags .column-select__option {
- color: $white;
-}
-
-.dashboard__quick-access,
-.focal-point__preview strong,
-.admin-wrapper .content__heading__tabs a.selected {
- color: $white;
-}
-
-.flash-message.warning {
- color: lighten($gold-star, 16%);
-}
-
-.boost-modal__action-bar,
-.confirmation-modal__action-bar,
-.mute-modal__action-bar,
-.block-modal__action-bar,
-.onboarding-modal__paginator,
-.error-modal__footer {
- background: darken($ui-base-color, 6%);
-
- .onboarding-modal__nav,
- .error-modal__nav {
- &:hover,
- &:focus,
- &:active {
- background-color: darken($ui-base-color, 12%);
- }
- }
-}
-
-.display-case__case {
- background: $white;
-}
-
-.embed-modal .embed-modal__container .embed-modal__html {
- background: $white;
- border: 1px solid var(--background-border-color);
-
- &:focus {
- border-color: lighten($ui-base-color, 12%);
- background: $white;
- }
-}
-
-.react-toggle-track {
- background: $ui-primary-color;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
- background: lighten($ui-primary-color, 10%);
-}
-
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
- .react-toggle-track {
- background: lighten($ui-highlight-color, 10%);
-}
-
-// Change the default color used for the text in an empty column or on the error column
-.empty-column-indicator,
-.error-column {
- color: $primary-text-color;
- background: $white;
-}
-
-// Change the default colors used on some parts of the profile pages
-.activity-stream-tabs {
- background: $white;
- border-bottom-color: lighten($ui-base-color, 8%);
-}
-
-.nothing-here,
-.page-header,
-.directory__tag > a,
-.directory__tag > div {
- background: $white;
- border: 1px solid var(--background-border-color);
-}
-
-.picture-in-picture-placeholder {
- background: $white;
- border-color: lighten($ui-base-color, 8%);
- color: lighten($ui-base-color, 8%);
-}
-
-.directory__tag > a {
- &:hover,
- &:active,
- &:focus {
- background: $ui-base-color;
- }
-}
-
-.batch-table {
- &__toolbar,
- &__row,
- .nothing-here {
- border-color: lighten($ui-base-color, 8%);
- }
-}
-
-.accounts-grid {
- .account-grid-card {
- .controls {
- .icon-button {
- color: $darker-text-color;
- }
- }
-
- .name {
- a {
- color: $primary-text-color;
- }
- }
-
- .username {
- color: $darker-text-color;
- }
-
- .account__header__content {
- color: $primary-text-color;
- }
- }
-}
-
-.simple_form {
- .warning {
- box-shadow: none;
- background: color.change($error-red, $alpha: 0.5);
- text-shadow: none;
- }
-
- .recommended {
- border-color: $ui-highlight-color;
- color: $ui-highlight-color;
- background-color: color.change($ui-highlight-color, $alpha: 0.1);
- }
-
- input[type='text'],
- input[type='number'],
- input[type='email'],
- input[type='password'],
- input[type='url'],
- input[type='datetime-local'],
- textarea {
- background: darken($ui-base-color, 10%);
- }
-
- select {
- background: darken($ui-base-color, 10%)
- url("data:image/svg+xml;utf8,")
- no-repeat right 8px center / auto 14px;
- }
-}
-
-.compose-form .compose-form__warning {
- border-color: $ui-highlight-color;
- background-color: color.change($ui-highlight-color, $alpha: 0.1);
-
- &,
- a {
- color: $ui-highlight-color;
- }
-}
-
-.status__content,
-.reply-indicator__content {
- a {
- color: $highlight-text-color;
- }
-}
-
-.notification__filter-bar button.active::after,
-.account__section-headline a.active::after {
- border-color: transparent transparent $white;
-}
-
-.activity-stream,
-.nothing-here,
-.directory__tag > a,
-.directory__tag > div,
-.card > a,
-.page-header,
-.compose-form,
-.compose-form__warning {
- box-shadow: none;
-}
-
-.card {
- &__img {
- background: darken($ui-base-color, 10%);
- }
-
- & > a {
- &:hover,
- &:active,
- &:focus {
- .card__bar {
- background: darken($ui-base-color, 10%);
- }
- }
- }
-}
-
-.status__wrapper-direct {
- background-color: color.change($ui-highlight-color, $alpha: 0.1);
-
- &:focus {
- background-color: color.change($ui-highlight-color, $alpha: 0.15);
- }
-}
-
-// Glitch-soc-specific changes
-
-.pillbar-button {
- background: $ui-secondary-color;
-
- &:not([disabled]) {
- &:hover,
- &:focus {
- background: darken($ui-secondary-color, 10%);
- }
-
- &.active {
- background-color: darken($ui-highlight-color, 2%);
-
- &:hover,
- &:focus {
- background: lighten($ui-highlight-color, 10%);
- }
- }
- }
-}
-
-.glitch.local-settings {
- background: $ui-base-color;
- border: 1px solid lighten($ui-base-color, 8%);
-}
-
-.glitch.local-settings__navigation {
- background: darken($ui-base-color, 8%);
-}
-
-.glitch.local-settings__navigation__item {
- background: darken($ui-base-color, 8%);
- border-bottom: 1px lighten($ui-base-color, 8%) solid;
-
- &:hover {
- background: $ui-base-color;
- }
-
- &.active {
- background: $ui-highlight-color;
- color: $white;
- }
-
- &.close,
- &.close:hover {
- background: $error-value-color;
- color: $primary-text-color;
- }
-}
-
-.drawer__inner__mastodon {
- background: $white
- url('data:image/svg+xml;utf8,')
- no-repeat bottom / 100% auto !important;
-
- .mastodon {
- filter: contrast(75%) brightness(75%) !important;
- }
-}
-
-.compose-form__actions .icon-button.active,
-.dropdown-button.active,
-.language-dropdown__dropdown__results__item:focus,
-.language-dropdown__dropdown__results__item.active,
-.language-dropdown__dropdown__results__item:focus
- .language-dropdown__dropdown__results__item__common-name,
-.language-dropdown__dropdown__results__item.active
- .language-dropdown__dropdown__results__item__common-name {
- color: $white;
-}
-
-.privacy-dropdown__option,
-.visibility-dropdown__option {
- &:focus,
- &.active {
- --dropdown-text-color: #{$white};
- }
-}
-
-.compose-form .spoiler-input__input {
- color: lighten($ui-highlight-color, 8%);
-}
-
-.emoji-mart-search input,
-.language-dropdown__dropdown .emoji-mart-search input,
-.poll__option input[type='text'] {
- background: darken($ui-base-color, 10%);
-}
-
-.dropdown-button.warning {
- border-color: #b3261e;
- color: #b3261e;
-
- &.active {
- background-color: #f9dedc;
- }
-}
-
-.search__popout__menu__item {
- &:hover,
- &:active,
- &:focus,
- &.active {
- color: $white;
-
- mark,
- .icon-button {
- color: $white;
- }
- }
-}
-
-.inline-follow-suggestions {
- background-color: color.change($ui-highlight-color, $alpha: 0.1);
- border-bottom-color: color.change($ui-highlight-color, $alpha: 0.3);
-
- &.focusable:focus-visible {
- background: color.change($ui-highlight-color, $alpha: 0.1);
- }
-}
-
-.inline-follow-suggestions__body__scrollable__card {
- background: $white;
-}
-
-.inline-follow-suggestions__body__scroll-button__icon {
- color: $white;
-}
-
-a.sparkline {
- &:hover,
- &:focus,
- &:active {
- background: darken($ui-base-color, 10%);
- }
-}
-
-.dashboard__counters {
- & > div {
- & > a {
- &:hover,
- &:focus,
- &:active {
- background: darken($ui-base-color, 10%);
- }
- }
- }
-}
-
-.directory {
- &__tag {
- & > a {
- &:hover,
- &:focus,
- &:active {
- background: darken($ui-base-color, 10%);
- }
- }
- }
-}
-
-.strike-entry {
- &:hover,
- &:focus,
- &:active {
- background: darken($ui-base-color, 10%);
- }
-}
-
-.setting-text {
- background: darken($ui-base-color, 10%);
-}
-
-.report-dialog-modal__textarea {
- background: darken($ui-base-color, 10%);
-}
-
-.autosuggest-account {
- .display-name__account {
- color: $dark-text-color;
- }
-}
-
-.notification-group--annual-report {
- .notification-group__icon,
- .notification-group__main .link-button {
- color: var(--indigo-3);
- }
-}
-
-@supports not selector(::-webkit-scrollbar) {
- html {
- scrollbar-color: color.change($action-button-color, $alpha: 0.25)
- var(--background-border-color);
- }
-}
-
-.custom-scrollbars {
- ::-webkit-scrollbar-thumb {
- opacity: 0.25;
- }
-}
-
-kbd {
- background-color: color.change($ui-highlight-color, $alpha: 0.1);
-}
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
deleted file mode 100644
index d8b48f595e..0000000000
--- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@use 'sass:color';
-
-@use '../functions' with (
- $darken-multiplier: 1,
- $lighten-multiplier: -1
-);
-
-$black: #000; // Black
-$white: #fff; // White
-$blurple-500: #6364ff; // Brand purple
-$grey-600: hsl(240deg, 8%, 33%); // Trout
-$grey-100: hsl(240deg, 51%, 90%); // Topaz
-
-$classic-base-color: hsl(240deg, 16%, 19%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
-$classic-highlight-color: $blurple-500;
-
-@use '../variables' with (
- $success-green: color.adjust(
- hsl(138deg, 32%, 35%),
- $lightness: 8%,
- $space: hsl
- ),
- $base-overlay-background: $white,
-
- $ui-base-color: $classic-secondary-color,
- $ui-base-lighter-color: hsl(250deg, 24%, 75%),
- $ui-secondary-color: $classic-base-color,
-
- $ui-button-secondary-color: $grey-600,
- $ui-button-secondary-border-color: $grey-600,
- $ui-button-secondary-focus-color: $white,
- $ui-button-tertiary-color: $blurple-500,
- $ui-button-tertiary-border-color: $blurple-500,
-
- $primary-text-color: $black,
- $darker-text-color: $classic-base-color,
- $lighter-text-color: $classic-base-color,
- $highlight-text-color: $classic-highlight-color,
- $dark-text-color: hsl(240deg, 16%, 32%),
- $light-text-color: hsl(240deg, 16%, 32%),
- $inverted-text-color: $black,
-
- $action-button-color: hsl(240deg, 16%, 45%),
- $emojis-requiring-inversion: 'chains'
-);
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/_mixins.scss b/app/javascript/flavours/glitch/styles/mastodon/_mixins.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/_mixins.scss
rename to app/javascript/flavours/glitch/styles/mastodon/_mixins.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/_theme_utils.scss b/app/javascript/flavours/glitch/styles/mastodon/_theme_utils.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/_theme_utils.scss
rename to app/javascript/flavours/glitch/styles/mastodon/_theme_utils.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/_variables.scss b/app/javascript/flavours/glitch/styles/mastodon/_variables.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/_variables.scss
rename to app/javascript/flavours/glitch/styles/mastodon/_variables.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/about.scss b/app/javascript/flavours/glitch/styles/mastodon/about.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/about.scss
rename to app/javascript/flavours/glitch/styles/mastodon/about.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/accessibility.scss b/app/javascript/flavours/glitch/styles/mastodon/accessibility.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/accessibility.scss
rename to app/javascript/flavours/glitch/styles/mastodon/accessibility.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/accounts.scss b/app/javascript/flavours/glitch/styles/mastodon/accounts.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/accounts.scss
rename to app/javascript/flavours/glitch/styles/mastodon/accounts.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/admin.scss b/app/javascript/flavours/glitch/styles/mastodon/admin.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/admin.scss
rename to app/javascript/flavours/glitch/styles/mastodon/admin.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/annual_reports.scss b/app/javascript/flavours/glitch/styles/mastodon/annual_reports.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/annual_reports.scss
rename to app/javascript/flavours/glitch/styles/mastodon/annual_reports.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/basics.scss b/app/javascript/flavours/glitch/styles/mastodon/basics.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/basics.scss
rename to app/javascript/flavours/glitch/styles/mastodon/basics.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/branding.scss b/app/javascript/flavours/glitch/styles/mastodon/branding.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/branding.scss
rename to app/javascript/flavours/glitch/styles/mastodon/branding.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/components.scss
rename to app/javascript/flavours/glitch/styles/mastodon/components.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/containers.scss b/app/javascript/flavours/glitch/styles/mastodon/containers.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/containers.scss
rename to app/javascript/flavours/glitch/styles/mastodon/containers.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/css_variables.scss b/app/javascript/flavours/glitch/styles/mastodon/css_variables.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/css_variables.scss
rename to app/javascript/flavours/glitch/styles/mastodon/css_variables.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/dashboard.scss b/app/javascript/flavours/glitch/styles/mastodon/dashboard.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/dashboard.scss
rename to app/javascript/flavours/glitch/styles/mastodon/dashboard.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/emoji_picker.scss b/app/javascript/flavours/glitch/styles/mastodon/emoji_picker.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/emoji_picker.scss
rename to app/javascript/flavours/glitch/styles/mastodon/emoji_picker.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/forms.scss b/app/javascript/flavours/glitch/styles/mastodon/forms.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/forms.scss
rename to app/javascript/flavours/glitch/styles/mastodon/forms.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/glitch/doodle.scss b/app/javascript/flavours/glitch/styles/mastodon/glitch/doodle.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/glitch/doodle.scss
rename to app/javascript/flavours/glitch/styles/mastodon/glitch/doodle.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/glitch/local_settings.scss b/app/javascript/flavours/glitch/styles/mastodon/glitch/local_settings.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/glitch/local_settings.scss
rename to app/javascript/flavours/glitch/styles/mastodon/glitch/local_settings.scss
diff --git a/app/javascript/flavours/glitch/styles/lists.scss b/app/javascript/flavours/glitch/styles/mastodon/lists.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles/lists.scss
rename to app/javascript/flavours/glitch/styles/mastodon/lists.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/modal.scss b/app/javascript/flavours/glitch/styles/mastodon/modal.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/modal.scss
rename to app/javascript/flavours/glitch/styles/mastodon/modal.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/polls.scss b/app/javascript/flavours/glitch/styles/mastodon/polls.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/polls.scss
rename to app/javascript/flavours/glitch/styles/mastodon/polls.scss
diff --git a/app/javascript/flavours/glitch/styles/mastodon/reset.scss b/app/javascript/flavours/glitch/styles/mastodon/reset.scss
new file mode 100644
index 0000000000..456405d2b1
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/mastodon/reset.scss
@@ -0,0 +1,139 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+ol,
+ul {
+ list-style: none;
+}
+
+blockquote,
+q {
+ quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+html:has(body.custom-scrollbars) {
+ scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
+}
diff --git a/app/javascript/flavours/glitch/styles/rich_text.scss b/app/javascript/flavours/glitch/styles/mastodon/rich_text.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles/rich_text.scss
rename to app/javascript/flavours/glitch/styles/mastodon/rich_text.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/rtl.scss b/app/javascript/flavours/glitch/styles/mastodon/rtl.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/rtl.scss
rename to app/javascript/flavours/glitch/styles/mastodon/rtl.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/tables.scss b/app/javascript/flavours/glitch/styles/mastodon/tables.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/tables.scss
rename to app/javascript/flavours/glitch/styles/mastodon/tables.scss
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/widgets.scss b/app/javascript/flavours/glitch/styles/mastodon/widgets.scss
similarity index 100%
rename from app/javascript/flavours/glitch/styles_new/mastodon/widgets.scss
rename to app/javascript/flavours/glitch/styles/mastodon/widgets.scss
diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss
deleted file mode 100644
index 7d060a2681..0000000000
--- a/app/javascript/flavours/glitch/styles/modal.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@use 'variables' as *;
-@use 'functions' as *;
-
-.modal-layout {
- background: darken($ui-base-color, 4%)
- url('data:image/svg+xml;utf8,')
- repeat-x bottom fixed;
- display: flex;
- flex-direction: column;
- height: 100vh;
- padding: 0;
-}
-
-.modal-layout__mastodon {
- display: flex;
- flex: 1;
- flex-direction: column;
- justify-content: flex-end;
-
- > div {
- flex: 1;
- max-height: 235px;
- position: relative;
-
- img {
- max-height: 100%;
- max-width: 100%;
- height: 100%;
- position: absolute;
- bottom: 0;
- inset-inline-start: 0;
- }
- }
-}
-
-@media screen and (width <= 600px) {
- .account-header {
- margin-top: 0;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss
deleted file mode 100644
index e8f2f5c394..0000000000
--- a/app/javascript/flavours/glitch/styles/polls.scss
+++ /dev/null
@@ -1,233 +0,0 @@
-@use 'sass:color';
-@use 'variables' as *;
-@use 'functions' as *;
-
-.poll {
- margin-top: 16px;
- font-size: 14px;
-
- li {
- margin-bottom: 10px;
- position: relative;
- }
-
- &__chart {
- border-radius: 4px;
- display: block;
- background: darken($ui-primary-color, 5%);
- height: 5px;
- min-width: 1%;
-
- &.leading {
- background: $ui-highlight-color;
- }
- }
-
- progress {
- border: 0;
- display: block;
- width: 100%;
- height: 5px;
- appearance: none;
- background: transparent;
-
- &::-webkit-progress-bar {
- background: transparent;
- }
-
- // Those rules need to be entirely separate or they won't work, hence the
- // duplication
- &::-moz-progress-bar {
- border-radius: 4px;
- background: darken($ui-primary-color, 5%);
- }
-
- &::-webkit-progress-value {
- border-radius: 4px;
- background: darken($ui-primary-color, 5%);
- }
- }
-
- &__option {
- position: relative;
- display: flex;
- align-items: flex-start;
- gap: 8px;
- padding: 6px 0;
- line-height: 18px;
- cursor: default;
- overflow: hidden;
-
- &__text {
- display: inline-block;
- overflow-wrap: break-word;
- max-width: calc(100% - 45px - 25px);
- }
-
- input[type='radio'],
- input[type='checkbox'] {
- display: none;
- }
-
- .autosuggest-input {
- flex: 1 1 auto;
- }
-
- input[type='text'] {
- display: block;
- box-sizing: border-box;
- width: 100%;
- font-size: 14px;
- color: $secondary-text-color;
- outline: 0;
- font-family: inherit;
- background: $ui-base-color;
- border: 1px solid $darker-text-color;
- border-radius: 4px;
- padding: 8px 12px;
-
- &:focus {
- border-color: $ui-highlight-color;
- }
-
- @media screen and (width <= 600px) {
- font-size: 16px;
- line-height: 24px;
- letter-spacing: 0.5px;
- }
- }
-
- &.selectable {
- cursor: pointer;
- }
-
- &.editable,
- &.disabled {
- align-items: center;
- overflow: visible;
- }
- }
-
- &__input {
- display: block;
- position: relative;
- border: 1px solid $ui-primary-color;
- box-sizing: border-box;
- width: 17px;
- height: 17px;
- border-radius: 50%;
- flex: 0 0 auto;
-
- &.checkbox {
- border-radius: 4px;
- }
-
- &:active,
- &:focus,
- &:hover {
- border-color: lighten($valid-value-color, 15%);
- border-width: 4px;
- }
-
- &.active {
- background-color: $valid-value-color;
- border-color: $valid-value-color;
- }
-
- &::-moz-focus-inner {
- outline: 0 !important;
- border: 0;
- }
-
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
- &.disabled {
- border-color: $dark-text-color;
-
- &.active {
- background: $dark-text-color;
- }
-
- &:active,
- &:focus,
- &:hover {
- border-color: $dark-text-color;
- border-width: 1px;
- }
- }
- }
-
- &__option.editable &__input,
- &__option.disabled &__input {
- &:active,
- &:focus,
- &:hover {
- border-color: $ui-primary-color;
- border-width: 1px;
- }
- }
-
- &__number {
- display: inline-block;
- width: 45px;
- font-weight: 700;
- flex: 0 0 45px;
- }
-
- &__voted {
- padding: 0 5px;
- display: inline-block;
-
- &__mark {
- font-size: 18px;
- }
- }
-
- &__footer {
- padding-top: 6px;
- padding-bottom: 5px;
- color: $dark-text-color;
- }
-
- &__link {
- display: inline;
- background: transparent;
- padding: 0;
- margin: 0;
- border: 0;
- color: $dark-text-color;
- text-decoration: underline;
- font-size: inherit;
-
- &:hover {
- text-decoration: none;
- }
-
- &:active,
- &:focus {
- background-color: color.change($dark-text-color, $alpha: 0.1);
- }
- }
-
- .button {
- height: 36px;
- padding: 0 16px;
- margin-inline-end: 10px;
- font-size: 14px;
- }
-}
-
-.muted .poll {
- color: $dark-text-color;
-
- &__chart {
- background: rgba(darken($ui-primary-color, 14%), 0.7);
-
- &.leading {
- background: color.change($ui-highlight-color, $alpha: 0.5);
- }
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/reset.scss b/app/javascript/flavours/glitch/styles/reset.scss
deleted file mode 100644
index 2dce637a06..0000000000
--- a/app/javascript/flavours/glitch/styles/reset.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-@use 'variables' as *;
-
-/* http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
-
-body {
- line-height: 1;
-}
-
-ol, ul {
- list-style: none;
-}
-
-blockquote, q {
- quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-@supports not selector(::-webkit-scrollbar) {
- html {
- scrollbar-color: $action-button-color var(--background-border-color);
- }
-}
-
-.custom-scrollbars {
- ::-webkit-scrollbar {
- width: 8px;
- height: 8px;
- }
-
- ::-webkit-scrollbar-thumb {
- background-color: $action-button-color;
- border: 2px var(--background-border-color);
- border-radius: 12px;
- width: 6px;
- box-shadow: inset 0 0 0 2px var(--background-border-color);
- }
-
- ::-webkit-scrollbar-track {
- background-color: var(--background-border-color);
- border-radius: 0px;
- }
-
- ::-webkit-scrollbar-corner {
- background: transparent;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss
deleted file mode 100644
index 77ec7bbb30..0000000000
--- a/app/javascript/flavours/glitch/styles/rtl.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-@use 'functions' as *;
-@use 'variables' as *;
-
-body.rtl {
- direction: rtl;
-
- .reactions-bar {
- direction: rtl;
- }
-
- .drawer__inner__mastodon > img {
- transform: scaleX(-1);
- }
-
- .boost-modal__status-time {
- float: left;
- }
-
- .compose-form .autosuggest-textarea__textarea {
- padding-right: 10px;
- padding-left: 10px + 22px;
- }
-
- .columns-area {
- direction: rtl;
- }
-
- .react-swipeable-view-container > * {
- direction: rtl;
- }
-
- .account__avatar-wrapper {
- float: right;
- }
-
- .column-header__setting-arrows {
- float: left;
- }
-
- .setting-meta__label {
- float: left;
- }
-
- .status__info .status__display-name {
- padding-left: 25px;
- padding-right: 0;
- }
-
- .account__header__tabs__buttons > .icon-button {
- margin-right: 0;
- margin-left: 8px;
- }
-
- .status__relative-time,
- .activity-stream .status.light .status__header .status__meta {
- float: left;
- text-align: left;
- }
-
- .status__action-bar-button {
- float: right;
- }
-
- .status__action-bar-dropdown {
- float: right;
- }
-
- .detailed-status__display-name .display-name {
- text-align: right;
- }
-
- .detailed-status__display-avatar {
- float: right;
- }
-
- .admin-wrapper {
- direction: rtl;
- }
-
- .react-swipeable-view-container > * {
- direction: rtl;
- }
-
- .column-back-button__icon {
- transform: scale(-1, 1);
- }
-
- .simple_form select {
- background: $ui-base-color
- url("data:image/svg+xml;utf8,")
- no-repeat left 8px center / auto 16px;
- }
-
- .dismissable-banner,
- .warning-banner {
- &__action {
- float: left;
- }
- }
-}
diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss
deleted file mode 100644
index e82f2b551c..0000000000
--- a/app/javascript/flavours/glitch/styles/tables.scss
+++ /dev/null
@@ -1,391 +0,0 @@
-@use 'variables' as *;
-@use 'functions' as *;
-
-.table {
- width: 100%;
- max-width: 100%;
- border-spacing: 0;
- border-collapse: collapse;
-
- th,
- td {
- padding: 8px;
- line-height: 18px;
- vertical-align: top;
- border-bottom: 1px solid var(--background-border-color);
- text-align: start;
- background: var(--background-color);
-
- &.critical {
- font-weight: 700;
- color: $gold-star;
- }
- }
-
- & > thead > tr > th {
- vertical-align: bottom;
- font-weight: 500;
- }
-
- & > tbody > tr > th {
- font-weight: 500;
- }
-
- & > tbody > tr:nth-child(odd) > td,
- & > tbody > tr:nth-child(odd) > th {
- background: var(--background-color);
- }
-
- & > tbody > tr:last-child > td,
- & > tbody > tr:last-child > th {
- border-bottom: 0;
- }
-
- a {
- color: $darker-text-color;
- text-decoration: none;
-
- &:hover {
- color: $highlight-text-color;
- }
- }
-
- strong {
- font-weight: 500;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-
- &.inline-table {
- & > tbody > tr:nth-child(odd) {
- & > td,
- & > th {
- background: transparent;
- }
- }
-
- & > tbody > tr:first-child {
- & > td,
- & > th {
- border-top: 0;
- }
- }
- }
-
- &.horizontal-table {
- border-collapse: collapse;
- border-style: hidden;
-
- & > tbody > tr > th,
- & > tbody > tr > td {
- padding: 11px 10px;
- background: transparent;
- border: 1px solid var(--background-border-color);
- color: $secondary-text-color;
- }
-
- & > tbody > tr > th {
- color: $darker-text-color;
- font-weight: 600;
- }
- }
-
- &.batch-table {
- & > thead > tr > th {
- background: var(--background-color);
- border-top: 1px solid var(--background-border-color);
- border-bottom: 1px solid var(--background-border-color);
-
- &:first-child {
- border-radius: 4px 0 0;
- border-inline-start: 1px solid var(--background-border-color);
- }
-
- &:last-child {
- border-radius: 0 4px 0 0;
- border-inline-end: 1px solid var(--background-border-color);
- }
- }
- }
-
- &--invites tbody td {
- vertical-align: middle;
- }
-}
-
-.table-wrapper {
- overflow: auto;
- margin-bottom: 20px;
-}
-
-samp {
- font-family: $font-monospace, monospace;
-}
-
-button.table-action-link {
- background: transparent;
- border: 0;
- font: inherit;
-}
-
-button.table-action-link,
-a.table-action-link {
- text-decoration: none;
- display: inline-block;
- margin-inline-end: 5px;
- padding: 0 10px;
- color: $darker-text-color;
- font-weight: 500;
- white-space: nowrap;
-
- &:hover {
- color: $highlight-text-color;
- }
-
- &:first-child {
- padding-inline-start: 0;
- }
-}
-
-.batch-table {
- &--no-toolbar {
- .batch-table__toolbar {
- position: static;
- height: 4px;
- border-bottom: none;
- }
- }
-
- &__toolbar,
- &__row {
- display: flex;
-
- &__select {
- box-sizing: border-box;
- padding: 8px 16px;
- cursor: pointer;
- min-height: 100%;
-
- input {
- margin-top: 8px;
- }
-
- &--aligned {
- display: flex;
- align-items: center;
-
- input {
- margin-top: 0;
- }
- }
- }
-
- &__actions,
- &__content {
- padding: 8px 0;
- padding-inline-end: 16px;
- flex: 1 1 auto;
- }
- }
-
- &__toolbar {
- position: sticky;
- top: 0;
- z-index: 200;
- border: 1px solid var(--background-border-color);
- background: var(--background-color);
- border-radius: 4px 4px 0 0;
- height: 47px;
- align-items: center;
-
- &__actions {
- text-align: end;
- padding-inline-end: 16px - 5px;
-
- .table-action-link {
- padding: 0;
- }
- }
- }
-
- &__select-all {
- background: var(--background-color);
- height: 47px;
- align-items: center;
- justify-content: center;
- border: 1px solid var(--background-border-color);
- border-top: 0;
- color: $secondary-text-color;
- display: none;
-
- &.active {
- display: flex;
- }
-
- .selected,
- .not-selected {
- display: none;
-
- &.active {
- display: block;
- }
- }
-
- strong {
- font-weight: 700;
- }
-
- span {
- padding: 8px;
- display: inline-block;
- }
-
- button {
- background: transparent;
- border: 0;
- font: inherit;
- color: $highlight-text-color;
- border-radius: 4px;
- font-weight: 700;
- padding: 8px;
-
- &:hover,
- &:focus,
- &:active {
- background: lighten($ui-base-color, 8%);
- }
- }
- }
-
- &__form {
- padding: 16px;
- border: 1px solid var(--background-border-color);
- border-top: 0;
- background: var(--background-color);
-
- .fields-row {
- padding-top: 0;
- margin-bottom: 0;
- }
- }
-
- &__row {
- border: 1px solid var(--background-border-color);
- border-top: 0;
- background: var(--background-color);
-
- @media screen and (max-width: $no-gap-breakpoint) {
- .optional &:first-child {
- border-top: 1px solid var(--background-border-color);
- }
- }
-
- &:last-child {
- border-radius: 0 0 4px 4px;
- }
-
- &__content {
- padding-top: 12px;
- padding-bottom: 16px;
- overflow: hidden;
-
- &--unpadded {
- padding: 0;
- }
-
- &--padded {
- padding: 12px 16px 16px;
- }
-
- &--with-image {
- display: flex;
- align-items: center;
- }
-
- &__image {
- flex: 0 0 auto;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-inline-end: 10px;
-
- .emojione {
- width: 32px;
- height: 32px;
- }
- }
-
- &__text {
- flex: 1 1 auto;
- }
-
- &__quote {
- padding: 12px;
- padding-top: 0;
- }
-
- &__extra {
- flex: 0 0 auto;
- text-align: end;
- color: $darker-text-color;
- font-weight: 500;
- }
- }
-
- .directory__tag {
- margin: 0;
- width: 100%;
-
- a {
- background: transparent;
- border-radius: 0;
- }
- }
- }
-
- &.optional .batch-table__toolbar,
- &.optional .batch-table__row__select {
- @media screen and (max-width: $no-gap-breakpoint) {
- display: none;
- }
- }
-
- // Reset the status card to not have borders, background or padding when
- // inline in the table of statuses
- .batch-table__row__content > .status__card {
- border: none;
- background: none;
- padding: 0;
- }
-
- .nothing-here {
- border: 1px solid var(--background-border-color);
- border-top: 0;
- box-shadow: none;
- background: var(--background-color);
-
- @media screen and (max-width: $no-gap-breakpoint) {
- border-top: 1px solid var(--background-border-color);
- }
-
- &--no-toolbar {
- border-top: 1px solid var(--background-border-color);
- }
- }
-
- @media screen and (width <= 870px) {
- .accounts-table tbody td.optional {
- display: none;
- }
- }
-}
-
-.one-liner {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
deleted file mode 100644
index f3ddf341d2..0000000000
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ /dev/null
@@ -1,179 +0,0 @@
-@use 'sass:color';
-@use 'variables' as *;
-@use 'functions' as *;
-
-.directory {
- &__tag {
- box-sizing: border-box;
- margin-bottom: 10px;
-
- & > a,
- & > div {
- display: flex;
- align-items: center;
- justify-content: space-between;
- border: 1px solid var(--background-border-color);
- border-radius: 4px;
- padding: 15px;
- text-decoration: none;
- color: inherit;
- box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
- }
-
- & > a {
- &:hover,
- &:active,
- &:focus {
- background: $ui-base-color;
- }
- }
-
- &.active > a {
- background: $ui-highlight-color;
- cursor: default;
- }
-
- &.disabled > div {
- opacity: 0.5;
- cursor: default;
- }
-
- h4 {
- flex: 1 1 auto;
- font-size: 18px;
- font-weight: 700;
- color: $primary-text-color;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-
- small {
- display: block;
- font-weight: 400;
- font-size: 15px;
- margin-top: 8px;
- color: $darker-text-color;
- }
- }
-
- &.active h4 {
- &,
- small,
- .trends__item__current {
- color: $primary-text-color;
- }
- }
-
- .avatar-stack {
- flex: 0 0 auto;
- width: (36px + 4px) * 3;
- }
-
- &.active .avatar-stack .account__avatar {
- border-color: $ui-highlight-color;
- }
-
- .trends__item__current {
- padding-inline-end: 0;
- }
- }
-}
-
-.accounts-table {
- width: 100%;
-
- .account {
- max-width: calc(56px + 30ch);
- padding: 0;
- border: 0;
- }
-
- strong {
- font-weight: 700;
- }
-
- thead th {
- text-align: center;
- text-transform: uppercase;
- color: $darker-text-color;
- font-weight: 700;
- padding: 10px;
-
- &:first-child {
- text-align: start;
- }
- }
-
- tbody td {
- padding: 15px 0;
- vertical-align: middle;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- }
-
- tbody tr:last-child td {
- border-bottom: 0;
- }
-
- &__count {
- width: 120px;
- text-align: center;
- font-size: 15px;
- font-weight: 500;
- color: $primary-text-color;
-
- small {
- display: block;
- color: $darker-text-color;
- font-weight: 400;
- font-size: 14px;
- }
- }
-
- tbody td.accounts-table__extra {
- width: 120px;
- text-align: end;
- color: $darker-text-color;
- padding-inline-end: 16px;
-
- a {
- text-decoration: none;
- color: inherit;
-
- &:focus,
- &:hover,
- &:active {
- color: $highlight-text-color;
- }
- }
- }
-
- &__comment {
- width: 50%;
- vertical-align: initial !important;
- }
-
- tbody td.accounts-table__interrelationships {
- width: 21px;
- padding-inline-end: 16px;
- }
-
- .icon {
- &.active {
- color: $highlight-text-color;
- }
-
- &.passive {
- color: $passive-text-color;
- }
-
- &.active.passive {
- color: $active-passive-text-color;
- }
- }
-
- @media screen and (max-width: $no-gap-breakpoint) {
- tbody td.optional {
- display: none;
- }
- }
-}
diff --git a/app/javascript/flavours/glitch/styles_new/application.scss b/app/javascript/flavours/glitch/styles_new/application.scss
deleted file mode 100644
index e16e5368e7..0000000000
--- a/app/javascript/flavours/glitch/styles_new/application.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use 'mastodon/css_variables';
-@use 'mastodon/variables';
-@use 'common';
-
-html {
- color-scheme: dark;
-}
diff --git a/app/javascript/flavours/glitch/styles_new/contrast.scss b/app/javascript/flavours/glitch/styles_new/contrast.scss
deleted file mode 100644
index af73c88fef..0000000000
--- a/app/javascript/flavours/glitch/styles_new/contrast.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use 'mastodon/css_variables';
-@use 'mastodon/variables';
-@use 'common';
-@use 'contrast/diff';
-
-html {
- color-scheme: dark;
-}
diff --git a/app/javascript/flavours/glitch/styles_new/contrast/diff.scss b/app/javascript/flavours/glitch/styles_new/contrast/diff.scss
deleted file mode 100644
index f809c7cdc3..0000000000
--- a/app/javascript/flavours/glitch/styles_new/contrast/diff.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-:root {
- /* TEXT TOKENS */
-
- --color-text-primary: var(--color-grey-50);
- --color-text-secondary: var(--color-grey-300);
- --color-text-tertiary: var(--color-grey-400);
- --color-text-brand: var(--color-indigo-300);
- --color-text-status-links: var(--color-text-brand);
-
- /* BORDER TOKENS */
-
- --border-strength-primary: 18%;
-}
-
-.status__content a,
-.reply-indicator__content a,
-.edit-indicator__content a,
-.link-footer a,
-.status__content__read-more-button,
-.status__content__translate-button {
- text-decoration: underline;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
-
- &.mention {
- text-decoration: none;
-
- span {
- text-decoration: underline;
- }
-
- &:hover,
- &:focus,
- &:active {
- span {
- text-decoration: none;
- }
- }
- }
-}
-
-.link-button:disabled {
- cursor: not-allowed;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none !important;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon-light.scss b/app/javascript/flavours/glitch/styles_new/mastodon-light.scss
deleted file mode 100644
index 494efdbbde..0000000000
--- a/app/javascript/flavours/glitch/styles_new/mastodon-light.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use 'mastodon-light/css_variables';
-@use 'mastodon/variables' with (
- $emojis-requiring-inversion: 'chains'
-);
-@use 'common';
-
-html {
- color-scheme: light;
-}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon-light/css_variables.scss b/app/javascript/flavours/glitch/styles_new/mastodon-light/css_variables.scss
deleted file mode 100644
index 70745ec071..0000000000
--- a/app/javascript/flavours/glitch/styles_new/mastodon-light/css_variables.scss
+++ /dev/null
@@ -1,214 +0,0 @@
-@use '../mastodon/theme_utils' as utils;
-
-:root {
- --color-black: #000;
- --color-grey-950: #181821;
- --color-grey-800: #292938;
- --color-grey-700: #444664;
- --color-grey-600: #545778;
- --color-grey-500: #696d91;
- --color-grey-400: #8b8dac;
- --color-grey-300: #b4b6cb;
- --color-grey-200: #d8d9e3;
- --color-grey-100: #f0f0f5;
- --color-grey-50: #f0f1ff;
- --color-white: #fff;
- --color-indigo-600: #6147e6;
- --color-indigo-400: #8886ff;
- --color-indigo-300: #a5abfd;
- --color-indigo-200: #c8cdfe;
- --color-indigo-100: #e0e3ff;
- --color-indigo-50: #f0f1ff;
- --color-red-500: #ff637e;
- --color-red-600: #ec003f;
- --color-yellow-400: #ffb900;
- --color-yellow-600: #e17100;
- --color-green-400: #05df72;
- --color-green-600: #00a63e;
-
- /* TEXT TOKENS */
-
- --color-text-primary: var(--color-grey-950);
- --color-text-secondary: var(--color-grey-600);
- --color-text-tertiary: var(--color-grey-500);
- --color-text-on-inverted: var(--color-white);
- --color-text-brand: var(--color-indigo-600);
- --color-text-brand-soft: color-mix(
- in oklab,
- var(--color-text-primary),
- var(--color-text-brand)
- );
- --color-text-on-brand-base: var(--color-white);
- --color-text-error: var(--color-red-600);
- --color-text-on-error-base: var(--color-white);
- --color-text-warning: var(--color-yellow-600);
- --color-text-on-warning-base: var(--color-white);
- --color-text-success: var(--color-green-600);
- --color-text-on-success-base: var(--color-white);
- --color-text-disabled: var(--color-grey-300);
- --color-text-on-disabled: var(--color-grey-200);
- --color-text-bookmark-highlight: var(--color-text-error);
- --color-text-favourite-highlight: var(--color-text-warning);
- --color-text-on-media: var(--color-white);
- --color-text-status-links: var(--color-text-brand);
-
- /* BACKGROUND TOKENS */
-
- // Neutrals
- --color-bg-primary: var(--color-white);
- --overlay-strength-secondary: 5%;
- --color-bg-secondary-base: var(--color-grey-600);
- --color-bg-secondary: #{color-mix(
- in oklab,
- var(--color-bg-primary),
- var(--color-bg-secondary-base) var(--overlay-strength-secondary)
- )};
- --color-bg-secondary-solid: #{color-mix(
- in srgb,
- var(--color-bg-primary),
- var(--color-bg-secondary-base) var(--overlay-strength-secondary)
- )};
- --color-bg-tertiary: #{color-mix(
- in oklab,
- var(--color-bg-primary),
- var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
- )};
-
- // Utility
- --color-bg-ambient: var(--color-bg-primary);
- --color-bg-elevated: var(--color-bg-primary);
- --color-bg-inverted: var(--color-grey-950);
- --color-bg-media-base: var(--color-black);
- --color-bg-media-strength: 65%;
- --color-bg-media: #{utils.css-alpha(
- var(--color-bg-media-base),
- var(--color-bg-media-strength)
- )};
- --color-bg-overlay: var(--color-bg-primary);
- --color-bg-disabled: var(--color-grey-400);
-
- // Brand
- --overlay-strength-brand: 8%;
- --color-bg-brand-base: var(--color-indigo-600);
- --color-bg-brand-base-hover: color-mix(
- in oklab,
- var(--color-bg-brand-base),
- black var(--overlay-strength-brand)
- );
- --color-bg-brand-soft: #{utils.css-alpha(
- var(--color-bg-brand-base),
- calc(var(--overlay-strength-brand) * 1.5)
- )};
- --color-bg-brand-softer: #{utils.css-alpha(
- var(--color-bg-brand-base),
- var(--overlay-strength-brand)
- )};
-
- // Error
- --overlay-strength-error: 12%;
- --color-bg-error-base: var(--color-red-600);
- --color-bg-error-base-hover: color-mix(
- in oklab,
- var(--color-bg-error-base),
- black var(--overlay-strength-error)
- );
- --color-bg-error-soft: #{utils.css-alpha(
- var(--color-bg-error-base),
- calc(var(--overlay-strength-error) * 1.5)
- )};
- --color-bg-error-softer: #{utils.css-alpha(
- var(--color-bg-error-base),
- var(--overlay-strength-error)
- )};
-
- // Warning
- --overlay-strength-warning: 10%;
- --color-bg-warning-base: var(--color-yellow-600);
- --color-bg-warning-base-hover: color-mix(
- in oklab,
- var(--color-bg-warning-base),
- black var(--overlay-strength-warning)
- );
- --color-bg-warning-soft: #{utils.css-alpha(
- var(--color-bg-warning-base),
- calc(var(--overlay-strength-warning) * 1.5)
- )};
- --color-bg-warning-softer: #{utils.css-alpha(
- var(--color-bg-warning-base),
- var(--overlay-strength-warning)
- )};
-
- // Success
- --overlay-strength-success: 15%;
- --color-bg-success-base: var(--color-green-600);
- --color-bg-success-base-hover: color-mix(
- in oklab,
- var(--color-bg-success-base),
- black var(--overlay-strength-success)
- );
- --color-bg-success-soft: #{utils.css-alpha(
- var(--color-bg-success-base),
- calc(var(--overlay-strength-success) * 1.5)
- )};
- --color-bg-success-softer: #{utils.css-alpha(
- var(--color-bg-success-base),
- var(--overlay-strength-success)
- )};
-
- /* BORDER TOKENS */
-
- --border-strength-primary: 15%;
- --color-border-primary: color-mix(
- in oklab,
- var(--color-bg-primary),
- var(--color-grey-950) var(--border-strength-primary)
- );
- --color-border-media: rgb(252 248 255 / 15%);
- --color-border-on-bg-secondary: var(--color-grey-200);
- --color-border-on-bg-brand-softer: var(--color-indigo-200);
- --color-border-on-bg-error-softer: #{utils.css-alpha(
- var(--color-text-error),
- 50%
- )};
- --color-border-on-bg-warning-softer: #{utils.css-alpha(
- var(--color-text-warning),
- 50%
- )};
- --color-border-on-bg-success-softer: #{utils.css-alpha(
- var(--color-text-success),
- 50%
- )};
- --color-border-on-bg-inverted: var(--color-border-primary);
-
- /* SHADOW TOKENS */
-
- --shadow-strength-primary: 30%;
- --color-shadow-primary: #{utils.css-alpha(
- var(--color-black),
- var(--shadow-strength-primary)
- )};
- --dropdown-shadow:
- 0 20px 25px -5px var(--color-shadow-primary),
- 0 8px 10px -6px var(--color-shadow-primary);
- --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
-
- /* GRAPHS/CHARTS TOKENS */
-
- --color-graph-primary-stroke: var(--color-text-brand);
- --color-graph-primary-fill: var(--color-bg-brand-softer);
- --color-graph-warning-stroke: var(--color-text-warning);
- --color-graph-warning-fill: var(--color-bg-warning-softer);
- --color-graph-disabled-stroke: var(--color-text-disabled);
- --color-graph-disabled-fill: var(--color-bg-disabled);
-
- /* LEGACY TOKENS */
-
- --rich-text-container-color: rgb(255 216 231 / 100%);
- --rich-text-text-color: rgb(114 47 83 / 100%);
- --rich-text-decorations-color: rgb(255 175 212 / 100%);
-
- /* MISCELLANEOUS */
-
- --outline-focus-default: 2px solid var(--color-text-brand);
- --avatar-border-radius: 8px;
-}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/lists.scss b/app/javascript/flavours/glitch/styles_new/mastodon/lists.scss
deleted file mode 100644
index 6019cd8002..0000000000
--- a/app/javascript/flavours/glitch/styles_new/mastodon/lists.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.no-list {
- list-style: none;
-
- li {
- display: inline-block;
- margin: 0 5px;
- }
-}
-
-.recovery-codes {
- list-style: none;
- margin: 0 auto;
-
- li {
- font-size: 125%;
- line-height: 1.5;
- letter-spacing: 1px;
- }
-}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/reset.scss b/app/javascript/flavours/glitch/styles_new/mastodon/reset.scss
deleted file mode 100644
index 3644b94cdf..0000000000
--- a/app/javascript/flavours/glitch/styles_new/mastodon/reset.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
-
-body {
- line-height: 1;
-}
-
-ol, ul {
- list-style: none;
-}
-
-blockquote, q {
- quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-html:has(body.custom-scrollbars) {
- scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
-}
diff --git a/app/javascript/flavours/glitch/styles_new/mastodon/rich_text.scss b/app/javascript/flavours/glitch/styles_new/mastodon/rich_text.scss
deleted file mode 100644
index 25342b560a..0000000000
--- a/app/javascript/flavours/glitch/styles_new/mastodon/rich_text.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-.status__content__text,
-.e-content,
-.edit-indicator__content,
-.reply-indicator__content {
- code {
- background: var(--rich-text-container-color);
- padding: 4px;
- border-radius: 4px;
- color: var(--rich-text-text-color);
- font-size: 0.85em;
- }
-
- pre {
- background: var(--rich-text-container-color);
- padding: 8px;
- border-radius: 4px;
- color: var(--rich-text-text-color);
-
- code {
- padding: 0;
- background: transparent;
- }
- }
-
- pre,
- blockquote {
- margin-bottom: 22px;
- white-space: pre-wrap;
- unicode-bidi: plaintext;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- blockquote {
- padding-inline-start: 32px;
- color: var(--rich-text-text-color);
- white-space: normal;
- position: relative;
-
- &::before {
- display: block;
- content: '';
- width: 24px;
- height: 20px;
- mask-image: url('@/images/quote.svg');
- background-color: var(--rich-text-decorations-color);
- position: absolute;
- inset-inline-start: 0;
- top: 0;
- }
-
- blockquote {
- margin-top: 4px;
- border-inline-start: 3px solid var(--rich-text-decorations-color);
- padding-inline-start: 16px;
-
- &::before {
- display: none;
- }
- }
-
- p:last-of-type {
- margin-bottom: 0;
- }
- }
-
- & > ul,
- & > ol {
- margin-bottom: 22px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- h1,
- h2,
- h3,
- h4,
- h5 {
- margin-top: 20px;
- margin-bottom: 20px;
- }
-
- h1,
- h2 {
- font-weight: 700;
- font-size: 1.2em;
- }
-
- h2 {
- font-size: 1.1em;
- }
-
- h3,
- h4,
- h5 {
- font-weight: 500;
- }
-
- b,
- strong {
- font-weight: 700;
- }
-
- em,
- i {
- font-style: italic;
- }
-
- sub {
- font-size: smaller;
- vertical-align: sub;
- }
-
- sup {
- font-size: smaller;
- vertical-align: super;
- }
-
- ul,
- ol {
- padding-inline-start: 24px;
-
- li {
- padding-inline-start: 8px;
-
- &::marker {
- text-align: end;
- }
- }
-
- p {
- margin: 0;
- }
- }
-
- ul {
- list-style-type: '•';
-
- li::marker {
- text-align: start;
- }
- }
-
- ol {
- list-style-type: decimal;
- }
-}
diff --git a/app/javascript/skins/glitch/contrast_new/common.scss b/app/javascript/skins/glitch/contrast_new/common.scss
deleted file mode 100644
index 7389e70a18..0000000000
--- a/app/javascript/skins/glitch/contrast_new/common.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use '@/flavours/glitch/styles_new/contrast';
diff --git a/app/javascript/skins/glitch/contrast_new/names.yml b/app/javascript/skins/glitch/contrast_new/names.yml
deleted file mode 100644
index 061e1d5c7f..0000000000
--- a/app/javascript/skins/glitch/contrast_new/names.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-en:
- skins:
- glitch:
- contrast_new: Experimental High contrast
diff --git a/app/javascript/skins/glitch/default_new/common.scss b/app/javascript/skins/glitch/default_new/common.scss
deleted file mode 100644
index 187e12c0b6..0000000000
--- a/app/javascript/skins/glitch/default_new/common.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use '@/flavours/glitch/styles_new/application';
diff --git a/app/javascript/skins/glitch/default_new/names.yml b/app/javascript/skins/glitch/default_new/names.yml
deleted file mode 100644
index e947dbdddf..0000000000
--- a/app/javascript/skins/glitch/default_new/names.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-en:
- skins:
- glitch:
- default_new: Experimental Mastodon (default)
diff --git a/app/javascript/skins/glitch/mastodon-light_new/common.scss b/app/javascript/skins/glitch/mastodon-light_new/common.scss
deleted file mode 100644
index 73abfe2b95..0000000000
--- a/app/javascript/skins/glitch/mastodon-light_new/common.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use '@/flavours/glitch/styles_new/mastodon-light';
diff --git a/app/javascript/skins/glitch/mastodon-light_new/names.yml b/app/javascript/skins/glitch/mastodon-light_new/names.yml
deleted file mode 100644
index cd29903332..0000000000
--- a/app/javascript/skins/glitch/mastodon-light_new/names.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-en:
- skins:
- glitch:
- mastodon-light_new: Experimental Mastodon (light)