~cytrogen/masto-fe

7cfcd23dadc97a0ef287a2a542e3eb21c88eb70f — Cytrogen 14 days ago 9021f5a 
Convert 17 SCSS files to CSS custom properties (Phase 3-4)

Replace $variables with var(--custom-properties), pre-calculated
color functions with themed custom properties, and unroll Sass
control flow (@each, @for, @extend) into plain CSS. Files keep
.scss extension during transition as index.scss still imports them.
patch browse .tar.gz 
17 files changed, 613 insertions(+), 571 deletions(-)

M app/javascript/flavours/glitch/styles/about.scss
M app/javascript/flavours/glitch/styles/accessibility.scss
M app/javascript/flavours/glitch/styles/accounts.scss
M app/javascript/flavours/glitch/styles/admin.scss
M app/javascript/flavours/glitch/styles/basics.scss
M app/javascript/flavours/glitch/styles/branding.scss
M app/javascript/flavours/glitch/styles/containers.scss
M app/javascript/flavours/glitch/styles/dashboard.scss
M app/javascript/flavours/glitch/styles/forms.scss
M app/javascript/flavours/glitch/styles/login.scss
M app/javascript/flavours/glitch/styles/modal.scss
M app/javascript/flavours/glitch/styles/polls.scss
M app/javascript/flavours/glitch/styles/rich_text.scss
M app/javascript/flavours/glitch/styles/rtl.scss
M app/javascript/flavours/glitch/styles/statuses.scss
M app/javascript/flavours/glitch/styles/tables.scss
M app/javascript/flavours/glitch/styles/widgets.scss

M app/javascript/flavours/glitch/styles/about.scss => app/javascript/flavours/glitch/styles/about.scss +6 -9
@@ 1,13 1,10 @@
$maximum-width: 1235px;
$fluid-breakpoint: $maximum-width + 20px;

.container {
  box-sizing: border-box;
  max-width: $maximum-width;
  max-width: 1235px;
  margin: 0 auto;
  position: relative;

  @media screen and (max-width: $fluid-breakpoint) {
  @media screen and (max-width: 1255px) {
    width: 100%;
    padding: 0 10px;
  }


@@ 21,12 18,12 @@ $fluid-breakpoint: $maximum-width + 20px;
.rules-list {
  font-size: 15px;
  line-height: 22px;
  color: $primary-text-color;
  color: var(--primary-text-color);
  counter-reset: list-counter;

  li {
    position: relative;
    border-bottom: 1px solid lighten($ui-base-color, 8%);
    border-bottom: 1px solid var(--ui-base-color-lighten-8);
    padding: 1em 1.75em;
    padding-inline-start: 3em;
    font-weight: 500;


@@ 38,8 35,8 @@ $fluid-breakpoint: $maximum-width + 20px;
      inset-inline-start: 0;
      top: 50%;
      transform: translateY(-50%);
      background: $highlight-text-color;
      color: $ui-base-color;
      background: var(--highlight-text-color);
      color: var(--ui-base-color);
      border-radius: 50%;
      width: 4ch;
      height: 4ch;


M app/javascript/flavours/glitch/styles/accessibility.scss => app/javascript/flavours/glitch/styles/accessibility.scss +20 -13
@@ 1,17 1,24 @@
$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;

%emoji-color-inversion {
  filter: invert(1);
}

.emojione {
  @each $emoji in $emojis-requiring-inversion {
    &[title=':#{$emoji}:'] {
      @extend %emoji-color-inversion;
    }
  &[title=':back:'],
  &[title=':copyright:'],
  &[title=':curly_loop:'],
  &[title=':currency_exchange:'],
  &[title=':end:'],
  &[title=':heavy_check_mark:'],
  &[title=':heavy_division_sign:'],
  &[title=':heavy_dollar_sign:'],
  &[title=':heavy_minus_sign:'],
  &[title=':heavy_multiplication_x:'],
  &[title=':heavy_plus_sign:'],
  &[title=':on:'],
  &[title=':registered:'],
  &[title=':soon:'],
  &[title=':spider:'],
  &[title=':telephone_receiver:'],
  &[title=':tm:'],
  &[title=':top:'],
  &[title=':wavy_dash:'] {
    filter: invert(1);
  }
}



M app/javascript/flavours/glitch/styles/accounts.scss => app/javascript/flavours/glitch/styles/accounts.scss +53 -51
@@ 10,7 10,7 @@
    &:active,
    &:focus {
      .card__bar {
        background: lighten($ui-base-color, 8%);
        background: var(--ui-base-color-lighten-8);
      }
    }
  }


@@ 18,7 18,7 @@
  &__img {
    height: 130px;
    position: relative;
    background: darken($ui-base-color, 12%);
    background: var(--ui-base-color-darken-12);

    img {
      display: block;


@@ 39,13 39,13 @@
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: lighten($ui-base-color, 4%);
    background: var(--ui-base-color-lighten-4);

    .avatar {
      flex: 0 0 auto;
      width: 48px;
      height: 48px;
      @include avatar-size(48px);
      background-size: 48px 48px;

      padding-top: 2px;



@@ 55,9 55,11 @@
        display: block;
        margin: 0;
        border-radius: 4px;
        @include avatar-radius;
        border-radius: var(--ui-avatar-border-size);
        background-position: 50%;
        background-clip: padding-box;

        background: darken($ui-base-color, 8%);
        background: var(--ui-base-color-darken-8);
        object-fit: cover;
      }
    }


@@ 72,7 74,7 @@

      strong {
        font-size: 15px;
        color: $primary-text-color;
        color: var(--primary-text-color);
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;


@@ 81,7 83,7 @@
      span {
        display: block;
        font-size: 14px;
        color: $darker-text-color;
        color: var(--darker-text-color);
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;


@@ 102,7 104,7 @@
  .page,
  .gap {
    font-size: 14px;
    color: $primary-text-color;
    color: var(--primary-text-color);
    font-weight: 500;
    display: inline-block;
    padding: 6px 10px;


@@ 110,9 112,9 @@
  }

  .current {
    background: $simple-background-color;
    background: var(--simple-background-color);
    border-radius: 100px;
    color: $inverted-text-color;
    color: var(--inverted-text-color);
    cursor: default;
    margin: 0 10px;
  }


@@ 124,7 126,7 @@
  .older,
  .newer {
    text-transform: uppercase;
    color: $secondary-text-color;
    color: var(--secondary-text-color);
  }

  .older {


@@ 149,7 151,7 @@

  .disabled {
    cursor: default;
    color: lighten($inverted-text-color, 10%);
    color: var(--inverted-text-color-lighten-10);
  }

  @media screen and (width <= 700px) {


@@ 167,9 169,9 @@
}

.nothing-here {
  background: $ui-base-color;
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  color: $light-text-color;
  background: var(--ui-base-color);
  box-shadow: 0 0 15px var(--base-shadow-color-a20);
  color: var(--light-text-color);
  font-size: 14px;
  font-weight: 500;
  text-align: center;


@@ 204,33 206,33 @@
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  color: $ui-secondary-color;
  background-color: var(--user-role-background, rgba($ui-secondary-color, 0.1));
  border: 1px solid var(--user-role-border, rgba($ui-secondary-color, 0.5));
  color: var(--ui-secondary-color);
  background-color: var(--user-role-background, var(--ui-secondary-color-a10));
  border: 1px solid var(--user-role-border, var(--ui-secondary-color-a50));

  &.moderator {
    color: $success-green;
    background-color: rgba($success-green, 0.1);
    border-color: rgba($success-green, 0.5);
    color: var(--success-green);
    background-color: var(--success-green-a10);
    border-color: var(--success-green-a50);
  }

  &.admin {
    color: lighten($error-red, 12%);
    background-color: rgba(lighten($error-red, 12%), 0.1);
    border-color: rgba(lighten($error-red, 12%), 0.5);
    color: var(--error-red-lighten-12);
    background-color: color-mix(in srgb, var(--error-red-lighten-12) 10%, transparent);
    border-color: color-mix(in srgb, var(--error-red-lighten-12) 50%, transparent);
  }
}

.simple_form .not_recommended {
  color: lighten($error-red, 12%);
  background-color: rgba(lighten($error-red, 12%), 0.1);
  border-color: rgba(lighten($error-red, 12%), 0.5);
  color: var(--error-red-lighten-12);
  background-color: color-mix(in srgb, var(--error-red-lighten-12) 10%, transparent);
  border-color: color-mix(in srgb, var(--error-red-lighten-12) 50%, transparent);
}

.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);
  color: var(--warning-red-lighten-12);
  background-color: color-mix(in srgb, var(--warning-red-lighten-12) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning-red-lighten-12) 50%, transparent);
}

.account__header__fields {


@@ 238,14 240,14 @@
  padding: 0;
  margin: 15px -15px -15px;
  border: 0 none;
  border-top: 1px solid lighten($ui-base-color, 12%);
  border-bottom: 1px solid lighten($ui-base-color, 12%);
  border-top: 1px solid var(--ui-base-color-lighten-12);
  border-bottom: 1px solid var(--ui-base-color-lighten-12);
  font-size: 14px;
  line-height: 20px;

  dl {
    display: flex;
    border-bottom: 1px solid lighten($ui-base-color, 12%);
    border-bottom: 1px solid var(--ui-base-color-lighten-12);
  }

  dt,


@@ 263,17 265,17 @@
    font-weight: 500;
    width: 120px;
    flex: 0 0 auto;
    color: $secondary-text-color;
    background: rgba(darken($ui-base-color, 8%), 0.5);
    color: var(--secondary-text-color);
    background: color-mix(in srgb, var(--ui-base-color-darken-8) 50%, transparent);
  }

  dd {
    flex: 1 1 auto;
    color: $darker-text-color;
    color: var(--darker-text-color);
  }

  a {
    color: $highlight-text-color;
    color: var(--highlight-text-color);
    text-decoration: none;

    &:hover,


@@ 284,16 286,16 @@
  }

  .verified {
    border: 1px solid rgba($valid-value-color, 0.5);
    background: rgba($valid-value-color, 0.25);
    border: 1px solid var(--valid-value-color-a50);
    background: var(--valid-value-color-a25);

    a {
      color: $valid-value-color;
      color: var(--valid-value-color);
      font-weight: 500;
    }

    &__mark {
      color: $valid-value-color;
      color: var(--valid-value-color);
    }
  }



@@ 308,10 310,10 @@

.pending-account {
  &__header {
    color: $darker-text-color;
    color: var(--darker-text-color);

    a {
      color: $ui-secondary-color;
      color: var(--ui-secondary-color);
      text-decoration: none;

      &:hover,


@@ 322,7 324,7 @@
    }

    strong {
      color: $primary-text-color;
      color: var(--primary-text-color);
      font-weight: 700;
    }
  }


@@ 333,7 335,7 @@
}

.batch-table__row--muted {
  color: lighten($ui-base-color, 26%);
  color: var(--ui-base-color-lighten-26);
}

.batch-table__row--muted .pending-account__header,


@@ 342,7 344,7 @@
  &,
  a,
  strong {
    color: lighten($ui-base-color, 26%);
    color: var(--ui-base-color-lighten-26);
  }
}



@@ 354,12 356,12 @@
  tbody td.accounts-table__extra,
  &__count,
  &__count small {
    color: lighten($ui-base-color, 26%);
    color: var(--ui-base-color-lighten-26);
  }
}

.batch-table__row--attention {
  color: $gold-star;
  color: var(--gold-star);
}

.batch-table__row--attention .pending-account__header,


@@ 368,7 370,7 @@
  &,
  a,
  strong {
    color: $gold-star;
    color: var(--gold-star);
  }
}



@@ 376,6 378,6 @@
  tbody td.accounts-table__extra,
  &__count,
  &__count small {
    color: $gold-star;
    color: var(--gold-star);
  }
}


M app/javascript/flavours/glitch/styles/admin.scss => app/javascript/flavours/glitch/styles/admin.scss +252 -194
@@ 1,9 1,3 @@
@use 'sass:math';

$no-columns-breakpoint: 600px;
$sidebar-width: 240px;
$content-width: 840px;

.admin-wrapper {
  display: flex;
  justify-content: center;


@@ 19,20 13,20 @@ $content-width: 840px;
    &__inner {
      display: flex;
      justify-content: flex-end;
      background: $ui-base-color;
      background: var(--ui-base-color);
      height: 100%;
    }
  }

  .sidebar {
    width: $sidebar-width;
    width: 240px;
    padding: 0;
    pointer-events: auto;

    &__toggle {
      display: none;
      background: darken($ui-base-color, 4%);
      border-bottom: 1px solid lighten($ui-base-color, 4%);
      background: var(--ui-base-color-darken-4);
      border-bottom: 1px solid var(--ui-base-color-lighten-4);
      align-items: center;

      &__logo {


@@ 46,7 40,7 @@ $content-width: 840px;

      &__icon {
        display: block;
        color: $darker-text-color;
        color: var(--darker-text-color);
        text-decoration: none;
        flex: 0 0 auto;
        font-size: 18px;


@@ 55,7 49,7 @@ $content-width: 840px;
        border-radius: 4px;

        &:focus {
          background: $ui-base-color;
          background: var(--ui-base-color);
        }

        .fa-times {


@@ 88,7 82,7 @@ $content-width: 840px;
      height: 25px;
    }

    @media screen and (max-width: $no-columns-breakpoint) {
    @media screen and (max-width: 600px) {
      & > a:first-child {
        display: none;
      }


@@ 100,14 94,14 @@ $content-width: 840px;
      overflow: hidden;
      margin-bottom: 20px;

      @media screen and (max-width: $no-columns-breakpoint) {
      @media screen and (max-width: 600px) {
        margin-bottom: 0;
      }

      a {
        display: block;
        padding: 15px;
        color: $darker-text-color;
        color: var(--darker-text-color);
        text-decoration: none;
        transition: all 200ms linear;
        transition-property: color, background-color;


@@ 121,8 115,8 @@ $content-width: 840px;
        }

        &:hover {
          color: $primary-text-color;
          background-color: darken($ui-base-color, 5%);
          color: var(--primary-text-color);
          background-color: var(--ui-base-color-darken-5);
          transition: all 100ms linear;
          transition-property: color, background-color;
        }


@@ 133,7 127,7 @@ $content-width: 840px;
      }

      ul {
        background: darken($ui-base-color, 4%);
        background: var(--ui-base-color-darken-4);
        border-radius: 0 0 0 4px;
        margin: 0;



@@ 144,13 138,13 @@ $content-width: 840px;
      }

      .warning a {
        color: $gold-star;
        color: var(--gold-star);
        font-weight: 700;
      }

      .simple-navigation-active-leaf a {
        color: $primary-text-color;
        background-color: $ui-highlight-color;
        color: var(--primary-text-color);
        background-color: var(--ui-highlight-color);
        border-bottom: 0;
        border-radius: 0;
      }


@@ 164,22 158,22 @@ $content-width: 840px;
  .content-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: $content-width;
    max-width: 840px;
    flex: 1 1 auto;
  }

  @media screen and (max-width: $content-width + $sidebar-width) {
  @media screen and (max-width: 1080px) {
    .sidebar-wrapper--empty {
      display: none;
    }

    .sidebar-wrapper {
      width: $sidebar-width;
      width: 240px;
      flex: 0 0 auto;
    }
  }

  @media screen and (max-width: $no-columns-breakpoint) {
  @media screen and (max-width: 600px) {
    .sidebar-wrapper {
      width: 100%;
    }


@@ 191,7 185,7 @@ $content-width: 840px;
    padding-inline-start: 25px;
    padding-inline-end: 15px;

    @media screen and (max-width: $no-columns-breakpoint) {
    @media screen and (max-width: 600px) {
      max-width: none;
      padding: 15px;
      padding-top: 30px;


@@ 230,7 224,7 @@ $content-width: 840px;
          align-items: center;
          padding: 7px 10px;
          border-radius: 4px;
          color: $darker-text-color;
          color: var(--darker-text-color);
          text-decoration: none;
          font-weight: 500;
          gap: 5px;


@@ 239,13 233,13 @@ $content-width: 840px;
          &:hover,
          &:focus,
          &:active {
            background: lighten($ui-base-color, 4%);
            background: var(--ui-base-color-lighten-4);
          }

          &.selected {
            font-weight: 700;
            color: $primary-text-color;
            background: $ui-highlight-color;
            color: var(--primary-text-color);
            background: var(--ui-highlight-color);
          }
        }
      }


@@ 260,25 254,25 @@ $content-width: 840px;
        font-size: 12px;
        display: block;
        font-weight: 500;
        color: $darker-text-color;
        color: var(--darker-text-color);
        line-height: 18px;
      }

      @media screen and (max-width: $no-columns-breakpoint) {
      @media screen and (max-width: 600px) {
        border-bottom: 0;
        padding-bottom: 0;
      }
    }

    h2 {
      color: $secondary-text-color;
      color: var(--secondary-text-color);
      font-size: 24px;
      line-height: 36px;
      font-weight: 700;
    }

    h3 {
      color: $secondary-text-color;
      color: var(--secondary-text-color);
      font-size: 20px;
      line-height: 28px;
      font-weight: 400;


@@ 289,21 283,21 @@ $content-width: 840px;
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      color: $darker-text-color;
      color: var(--darker-text-color);
      padding-bottom: 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid lighten($ui-base-color, 8%);
      border-bottom: 1px solid var(--ui-base-color-lighten-8);
    }

    h6 {
      font-size: 16px;
      color: $secondary-text-color;
      color: var(--secondary-text-color);
      line-height: 28px;
      font-weight: 500;
    }

    .fields-group h6 {
      color: $primary-text-color;
      color: var(--primary-text-color);
      font-weight: 500;
    }



@@ 319,7 313,7 @@ $content-width: 840px;
    .directory__tag h4 {
      font-size: 18px;
      font-weight: 700;
      color: $primary-text-color;
      color: var(--primary-text-color);
      text-transform: none;
      padding-bottom: 0;
      margin-bottom: 0;


@@ 329,17 323,15 @@ $content-width: 840px;
    & > p {
      font-size: 14px;
      line-height: 21px;
      color: $secondary-text-color;
      color: var(--secondary-text-color);
      margin-bottom: 20px;

      strong {
        color: $primary-text-color;
        color: var(--primary-text-color);
        font-weight: 500;

        @each $lang in $cjk-langs {
          &:lang(#{$lang}) {
            font-weight: 700;
          }
        &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) {
          font-weight: 700;
        }
      }
    }


@@ 348,7 340,7 @@ $content-width: 840px;
      width: 100%;
      height: 0;
      border: 0;
      border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6);
      border-bottom: 1px solid var(--ui-base-lighter-color-a60);
      margin: 20px 0;

      &.spacer {


@@ 358,7 350,7 @@ $content-width: 840px;
    }
  }

  @media screen and (max-width: $no-columns-breakpoint) {
  @media screen and (max-width: 600px) {
    display: block;

    .sidebar-wrapper {


@@ 386,14 378,14 @@ $content-width: 840px;
          inset-inline-start: 0;
          bottom: 0;
          overflow-y: auto;
          background: $ui-base-color;
          background: var(--ui-base-color);
        }
      }

      ul a,
      ul ul a {
        border-radius: 0;
        border-bottom: 1px solid lighten($ui-base-color, 4%);
        border-bottom: 1px solid var(--ui-base-color-lighten-4);
        transition: none;

        &:hover {


@@ 406,7 398,7 @@ $content-width: 840px;
      }

      ul .simple-navigation-active-leaf a {
        border-bottom-color: $ui-highlight-color;
        border-bottom-color: var(--ui-highlight-color);
      }
    }
  }


@@ 422,10 414,10 @@ hr.spacer {
body,
.admin-wrapper .content {
  .muted-hint {
    color: $darker-text-color;
    color: var(--darker-text-color);

    a {
      color: $highlight-text-color;
      color: var(--highlight-text-color);
    }
  }



@@ 445,22 437,22 @@ body,
  }

  .positive-hint {
    color: $valid-value-color;
    color: var(--valid-value-color);
    font-weight: 500;
  }

  .negative-hint {
    color: $error-value-color;
    color: var(--error-value-color);
    font-weight: 500;
  }

  .neutral-hint {
    color: $dark-text-color;
    color: var(--dark-text-color);
    font-weight: 500;
  }

  .warning-hint {
    color: $gold-star;
    color: var(--gold-star);
    font-weight: 500;
  }
}


@@ 498,10 490,8 @@ body,
      text-transform: uppercase;
      font-size: 12px;

      @each $lang in $cjk-langs {
        &:lang(#{$lang}) {
          font-weight: 700;
        }
      &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) {
        font-weight: 700;
      }
    }



@@ 512,21 502,21 @@ body,

    a {
      display: inline-block;
      color: $darker-text-color;
      color: var(--darker-text-color);
      text-decoration: none;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 500;
      border-bottom: 2px solid $ui-base-color;
      border-bottom: 2px solid var(--ui-base-color);

      &:hover {
        color: $primary-text-color;
        border-bottom: 2px solid lighten($ui-base-color, 5%);
        color: var(--primary-text-color);
        border-bottom: 2px solid var(--ui-base-color-lighten-5);
      }

      &.selected {
        color: $highlight-text-color;
        border-bottom: 2px solid $ui-highlight-color;
        color: var(--highlight-text-color);
        border-bottom: 2px solid var(--ui-highlight-color);
      }
    }
  }


@@ 569,12 559,10 @@ body,
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: $secondary-text-color;
    color: var(--secondary-text-color);

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) {
      font-weight: 700;
    }
  }



@@ 661,7 649,7 @@ body,
  font-size: 14px;

  a {
    color: $highlight-text-color;
    color: var(--highlight-text-color);
    text-decoration: none;

    &:hover {


@@ 690,12 678,12 @@ body,
  display: block;
  line-height: 20px;
  padding: 15px;
  padding-inline-start: 15px * 2 + 40px;
  background: $ui-base-color;
  border-bottom: 1px solid darken($ui-base-color, 8%);
  padding-inline-start: 70px;
  background: var(--ui-base-color);
  border-bottom: 1px solid var(--ui-base-color-darken-8);
  position: relative;
  text-decoration: none;
  color: $darker-text-color;
  color: var(--darker-text-color);
  font-size: 14px;

  &:first-child {


@@ 712,7 700,7 @@ body,
  &:hover,
  &:focus,
  &:active {
    background: lighten($ui-base-color, 4%);
    background: var(--ui-base-color-lighten-4);
  }

  &__avatar {


@@ 732,13 720,13 @@ body,
  }

  &__timestamp {
    color: $dark-text-color;
    color: var(--dark-text-color);
  }

  a,
  .username,
  .target {
    color: $secondary-text-color;
    color: var(--secondary-text-color);
    text-decoration: none;
    font-weight: 500;
  }


@@ 757,7 745,7 @@ a.name-tag,
a.inline-name-tag,
.inline-name-tag {
  text-decoration: none;
  color: $secondary-text-color;
  color: var(--secondary-text-color);

  .username {
    font-weight: 500;


@@ 766,7 754,7 @@ a.inline-name-tag,
  &.suspended {
    .username {
      text-decoration: line-through;
      color: lighten($error-red, 12%);
      color: var(--error-red-lighten-12);
    }

    .avatar {


@@ 799,18 787,18 @@ a.name-tag,

.speech-bubble {
  margin-bottom: 20px;
  border-inline-start: 4px solid $ui-highlight-color;
  border-inline-start: 4px solid var(--ui-highlight-color);

  &.positive {
    border-left-color: $success-green;
    border-left-color: var(--success-green);
  }

  &.negative {
    border-left-color: lighten($error-red, 12%);
    border-left-color: var(--error-red-lighten-12);
  }

  &.warning {
    border-left-color: $gold-star;
    border-left-color: var(--gold-star);
  }

  &__bubble {


@@ 823,7 811,7 @@ a.name-tag,
    font-weight: 500;

    a {
      color: $darker-text-color;
      color: var(--darker-text-color);
    }
  }



@@ 833,12 821,12 @@ a.name-tag,
  }

  time {
    color: $dark-text-color;
    color: var(--dark-text-color);
  }
}

.report-card {
  background: $ui-base-color;
  background: var(--ui-base-color);
  border-radius: 4px;
  margin-bottom: 20px;



@@ 860,7 848,7 @@ a.name-tag,
    &__stats {
      flex: 0 0 auto;
      font-weight: 500;
      color: $darker-text-color;
      color: var(--darker-text-color);
      text-transform: uppercase;
      text-align: end;



@@ 871,12 859,12 @@ a.name-tag,
        &:focus,
        &:hover,
        &:active {
          color: lighten($darker-text-color, 8%);
          color: var(--darker-text-color-lighten-8);
        }
      }

      .red {
        color: $error-value-color;
        color: var(--error-value-color);
      }
    }
  }


@@ 885,10 873,10 @@ a.name-tag,
    &__item {
      display: flex;
      justify-content: flex-start;
      border-top: 1px solid darken($ui-base-color, 4%);
      border-top: 1px solid var(--ui-base-color-darken-4);

      &:hover {
        background: lighten($ui-base-color, 2%);
        background: var(--ui-base-color-lighten-2);
      }

      &__reported-by,


@@ 897,7 885,7 @@ a.name-tag,
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 150px;
        color: $darker-text-color;
        color: var(--darker-text-color);

        &,
        .username {


@@ 912,7 900,7 @@ a.name-tag,
        max-width: calc(100% - 300px);

        &__icon {
          color: $dark-text-color;
          color: var(--dark-text-color);
          margin-inline-end: 4px;
          font-weight: 500;
        }


@@ 924,7 912,7 @@ a.name-tag,
        width: 100%;
        padding: 15px;
        text-decoration: none;
        color: $darker-text-color;
        color: var(--darker-text-color);
      }
    }
  }


@@ 960,7 948,7 @@ a.name-tag,

  .account__header__fields,
  .account__header__content {
    background: lighten($ui-base-color, 8%);
    background: var(--ui-base-color-lighten-8);
    border-radius: 4px;
    height: 100%;
  }


@@ 970,7 958,7 @@ a.name-tag,
    border: 0;

    a {
      color: $highlight-text-color;
      color: var(--highlight-text-color);
    }

    dl:first-child .verified {


@@ 978,14 966,14 @@ a.name-tag,
    }

    .verified a {
      color: $valid-value-color;
      color: var(--valid-value-color);
    }
  }

  .account__header__content {
    box-sizing: border-box;
    padding: 20px;
    color: $primary-text-color;
    color: var(--primary-text-color);
  }
}



@@ 996,8 984,8 @@ a.name-tag,
.applications-list__item,
.filters-list__item {
  padding: 15px 0;
  background: $ui-base-color;
  border: 1px solid lighten($ui-base-color, 4%);
  background: var(--ui-base-color);
  border: 1px solid var(--ui-base-color-lighten-4);
  border-radius: 4px;
  margin-top: 15px;
}


@@ 1008,13 996,13 @@ a.name-tag,

.announcements-list,
.filters-list {
  border: 1px solid lighten($ui-base-color, 4%);
  border: 1px solid var(--ui-base-color-lighten-4);
  border-radius: 4px;

  &__item {
    padding: 15px 0;
    background: $ui-base-color;
    border-bottom: 1px solid lighten($ui-base-color, 4%);
    background: var(--ui-base-color);
    border-bottom: 1px solid var(--ui-base-color-lighten-4);

    &__title {
      padding: 0 15px;


@@ 1022,7 1010,7 @@ a.name-tag,
      font-weight: 500;
      font-size: 18px;
      line-height: 1.5;
      color: $secondary-text-color;
      color: var(--secondary-text-color);
      text-decoration: none;
      margin-bottom: 10px;



@@ 1035,13 1023,13 @@ a.name-tag,
      &:hover,
      &:focus,
      &:active {
        color: $primary-text-color;
        color: var(--primary-text-color);
      }
    }

    &__meta {
      padding: 0 15px;
      color: $dark-text-color;
      color: var(--dark-text-color);

      a {
        color: inherit;


@@ 1089,11 1077,11 @@ a.name-tag,

  &.expired {
    .expiration {
      color: lighten($error-red, 12%);
      color: var(--error-red-lighten-12);
    }

    .permissions-list__item__icon {
      color: $dark-text-color;
      color: var(--dark-text-color);
    }
  }
}


@@ 1116,7 1104,7 @@ a.name-tag,

  &__table {
    &__number {
      color: $secondary-text-color;
      color: var(--secondary-text-color);
      padding: 10px;
    }



@@ 1138,25 1126,60 @@ a.name-tag,

    &__label {
      font-weight: 700;
      color: $darker-text-color;
      color: var(--darker-text-color);
    }

    &__box {
      box-sizing: border-box;
      background: $ui-highlight-color;
      background: var(--ui-highlight-color);
      padding: 10px;
      font-weight: 500;
      color: $primary-text-color;
      color: var(--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))
          );
        }
      &--0 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 10%, transparent);
      }

      &--10 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 10%, transparent);
      }

      &--20 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 20%, transparent);
      }

      &--30 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 30%, transparent);
      }

      &--40 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 40%, transparent);
      }

      &--50 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 50%, transparent);
      }

      &--60 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 60%, transparent);
      }

      &--70 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 70%, transparent);
      }

      &--80 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 80%, transparent);
      }

      &--90 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 90%, transparent);
      }

      &--100 {
        background-color: var(--ui-highlight-color);
      }
    }
  }


@@ 1165,11 1188,11 @@ a.name-tag,
.sparkline {
  display: block;
  text-decoration: none;
  background: lighten($ui-base-color, 4%);
  background: var(--ui-base-color-lighten-4);
  border-radius: 4px;
  padding: 0;
  position: relative;
  padding-bottom: 55px + 20px;
  padding-bottom: 75px;
  overflow: hidden;

  &__value {


@@ 1184,22 1207,22 @@ a.name-tag,
      margin-inline-end: 10px;
      font-weight: 500;
      font-size: 28px;
      color: $primary-text-color;
      color: var(--primary-text-color);
    }

    &__change {
      display: block;
      font-weight: 500;
      font-size: 18px;
      color: $darker-text-color;
      color: var(--darker-text-color);
      margin-bottom: -3px;

      &.positive {
        color: $valid-value-color;
        color: var(--valid-value-color);
      }

      &.negative {
        color: $error-value-color;
        color: var(--error-value-color);
      }
    }
  }


@@ 1208,7 1231,7 @@ a.name-tag,
    padding: 0 20px;
    padding-bottom: 10px;
    text-transform: uppercase;
    color: $darker-text-color;
    color: var(--darker-text-color);
    font-weight: 500;
  }



@@ 1223,12 1246,12 @@ a.name-tag,
    }

    path:first-child {
      fill: rgba($highlight-text-color, 0.25) !important;
      fill: var(--highlight-text-color-a25) !important;
      fill-opacity: 1 !important;
    }

    path:last-child {
      stroke: lighten($highlight-text-color, 6%) !important;
      stroke: var(--highlight-text-color-lighten-6) !important;
      fill: none !important;
    }
  }


@@ 1238,17 1261,17 @@ a.sparkline {
  &:hover,
  &:focus,
  &:active {
    background: lighten($ui-base-color, 6%);
    background: var(--ui-base-color-lighten-6);
  }
}

.skeleton {
  background-color: lighten($ui-base-color, 8%);
  background-color: var(--ui-base-color-lighten-8);
  background-image: linear-gradient(
    90deg,
    lighten($ui-base-color, 8%),
    lighten($ui-base-color, 12%),
    lighten($ui-base-color, 8%)
    var(--ui-base-color-lighten-8),
    var(--ui-base-color-lighten-12),
    var(--ui-base-color-lighten-8)
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;


@@ 1275,7 1298,7 @@ a.sparkline {
  }

  &__item {
    border-bottom: 1px solid lighten($ui-base-color, 4%);
    border-bottom: 1px solid var(--ui-base-color-lighten-4);

    &__key {
      font-weight: 500;


@@ 1284,7 1307,7 @@ a.sparkline {

    &__value {
      text-align: end;
      color: $darker-text-color;
      color: var(--darker-text-color);
      padding: 11px 10px;
    }



@@ 1293,16 1316,51 @@ a.sparkline {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: $ui-highlight-color;
      background: var(--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))
          );
        }
      &--0 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 10%, transparent);
      }

      &--10 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 10%, transparent);
      }

      &--20 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 20%, transparent);
      }

      &--30 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 30%, transparent);
      }

      &--40 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 40%, transparent);
      }

      &--50 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 50%, transparent);
      }

      &--60 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 60%, transparent);
      }

      &--70 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 70%, transparent);
      }

      &--80 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 80%, transparent);
      }

      &--90 {
        background-color: color-mix(in srgb, var(--ui-highlight-color) 90%, transparent);
      }

      &--100 {
        background-color: var(--ui-highlight-color);
      }
    }



@@ 1311,11 1369,11 @@ a.sparkline {
    }

    &.negative {
      color: $error-value-color;
      color: var(--error-value-color);
      font-weight: 700;

      .dimension__item__value {
        color: $error-value-color;
        color: var(--error-value-color);
      }
    }
  }


@@ 1323,12 1381,12 @@ a.sparkline {

.report-reason-selector {
  border-radius: 4px;
  background: $ui-base-color;
  background: var(--ui-base-color);
  margin-bottom: 20px;

  &__category {
    cursor: pointer;
    border-bottom: 1px solid darken($ui-base-color, 8%);
    border-bottom: 1px solid var(--ui-base-color-darken-8);

    &:last-child {
      border-bottom: 0;


@@ 1356,7 1414,7 @@ a.sparkline {

  &__details {
    &__item {
      border-bottom: 1px solid lighten($ui-base-color, 8%);
      border-bottom: 1px solid var(--ui-base-color-lighten-8);
      padding: 15px 0;

      &:last-child {


@@ 1386,7 1444,7 @@ a.sparkline {
}

.account-card {
  background: $ui-base-color;
  background: var(--ui-base-color);
  border-radius: 4px;

  &__permalink {


@@ 1405,12 1463,12 @@ a.sparkline {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: darken($ui-base-color, 8%);
      background: var(--ui-base-color-darken-8);
    }
  }

  &__title {
    margin-top: -(15px + 8px);
    margin-top: -23px;
    display: flex;
    align-items: flex-end;



@@ 1423,21 1481,21 @@ a.sparkline {
        margin: 0;
        width: 56px;
        height: 56px;
        background-color: darken($ui-base-color, 8%);
        background-color: var(--ui-base-color-darken-8);
        border-radius: 8px;
        border: 1px solid $ui-base-color;
        border: 1px solid var(--ui-base-color);
      }
    }

    .display-name {
      color: $darker-text-color;
      color: var(--darker-text-color);
      padding-bottom: 15px;
      font-size: 15px;
      line-height: 20px;

      bdi {
        display: block;
        color: $primary-text-color;
        color: var(--primary-text-color);
        font-weight: 700;
      }
    }


@@ 1449,7 1507,7 @@ a.sparkline {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    max-height: 21px * 2;
    max-height: 42px;
    position: relative;
    font-size: 15px;
    line-height: 21px;


@@ 1462,12 1520,12 @@ a.sparkline {
      position: absolute;
      bottom: 0;
      inset-inline-end: 15px;
      background: linear-gradient(to left, $ui-base-color, transparent);
      background: linear-gradient(to left, var(--ui-base-color), transparent);
      pointer-events: none;
    }

    a {
      color: $secondary-text-color;
      color: var(--secondary-text-color);
      text-decoration: none;
      unicode-bidi: isolate;



@@ 1513,19 1571,19 @@ a.sparkline {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    max-width: 340px;
    min-width: 65px * 3;
    min-width: 195px;

    &__item {
      padding: 15px 0;
      text-align: center;
      color: $primary-text-color;
      color: var(--primary-text-color);
      font-weight: 600;
      font-size: 15px;
      line-height: 21px;

      small {
        display: block;
        color: $darker-text-color;
        color: var(--darker-text-color);
        font-weight: 400;
        font-size: 13px;
        line-height: 18px;


@@ 1538,11 1596,11 @@ a.sparkline {
  margin-bottom: 20px;

  &__item {
    background: $ui-base-color;
    background: var(--ui-base-color);
    position: relative;
    padding: 15px;
    padding-inline-start: 15px * 2 + 40px;
    border-bottom: 1px solid darken($ui-base-color, 8%);
    padding-inline-start: 70px;
    border-bottom: 1px solid var(--ui-base-color-darken-8);

    &:first-child {
      border-top-left-radius: 4px;


@@ 1556,7 1614,7 @@ a.sparkline {
    }

    &:hover {
      background-color: lighten($ui-base-color, 4%);
      background-color: var(--ui-base-color-lighten-4);
    }

    &__avatar {


@@ 1569,13 1627,13 @@ a.sparkline {
    }

    &__header {
      color: $darker-text-color;
      color: var(--darker-text-color);
      font-size: 15px;
      line-height: 20px;
      margin-bottom: 4px;

      .username {
        color: $primary-text-color;
        color: var(--primary-text-color);
        font-weight: 500;
        margin-inline-end: 5px;



@@ 1602,7 1660,7 @@ a.sparkline {
      line-height: 20px;
      word-wrap: break-word;
      font-weight: 400;
      color: $primary-text-color;
      color: var(--primary-text-color);

      p {
        margin-bottom: 20px;


@@ 1615,7 1673,7 @@ a.sparkline {
      }

      a {
        color: $highlight-text-color;
        color: var(--highlight-text-color);
        text-decoration: none;

        &:hover {


@@ 1634,13 1692,13 @@ a.sparkline {
}

.report-actions {
  border: 1px solid darken($ui-base-color, 8%);
  border: 1px solid var(--ui-base-color-darken-8);

  &__item {
    display: flex;
    align-items: center;
    line-height: 18px;
    border-bottom: 1px solid darken($ui-base-color, 8%);
    border-bottom: 1px solid var(--ui-base-color-darken-8);

    &:last-child {
      border-bottom: 0;


@@ 1662,7 1720,7 @@ a.sparkline {
    &__description {
      padding: 15px;
      font-size: 14px;
      color: $dark-text-color;
      color: var(--dark-text-color);
    }
  }



@@ 1690,7 1748,7 @@ a.sparkline {
  float: right;

  a {
    color: $ui-highlight-color;
    color: var(--ui-highlight-color);
    text-decoration: none;

    &:hover,


@@ 1704,17 1762,17 @@ a.sparkline {
.strike-card {
  padding: 15px;
  border-radius: 4px;
  background: $ui-base-color;
  background: var(--ui-base-color);
  font-size: 15px;
  line-height: 20px;
  word-wrap: break-word;
  font-weight: 400;
  color: $primary-text-color;
  color: var(--primary-text-color);
  box-sizing: border-box;
  min-height: 100%;

  a {
    color: $highlight-text-color;
    color: var(--highlight-text-color);
    text-decoration: none;

    &:hover {


@@ 1739,35 1797,35 @@ a.sparkline {
    list-style: disc;
    padding-inline-start: 15px;
    margin-bottom: 20px;
    color: $darker-text-color;
    color: var(--darker-text-color);

    &:last-child {
      margin-bottom: 0;
    }

    &__text {
      color: $primary-text-color;
      color: var(--primary-text-color);
    }
  }

  &__statuses-list {
    border-radius: 4px;
    border: 1px solid darken($ui-base-color, 8%);
    border: 1px solid var(--ui-base-color-darken-8);
    font-size: 13px;
    line-height: 18px;
    overflow: hidden;

    &__item {
      padding: 16px;
      background: lighten($ui-base-color, 2%);
      border-bottom: 1px solid darken($ui-base-color, 8%);
      background: var(--ui-base-color-lighten-2);
      border-bottom: 1px solid var(--ui-base-color-darken-8);

      &:last-child {
        border-bottom: 0;
      }

      &__meta {
        color: $darker-text-color;
        color: var(--darker-text-color);
      }

      a {


@@ 1804,16 1862,16 @@ a.sparkline {
      flex: 0 0 auto;
      width: 4px;
      height: 21px;
      background: lighten($ui-base-color, 8%);
      background: var(--ui-base-color-lighten-8);
      margin: 0 2px;
      border-radius: 2px;

      &.positive {
        background: $valid-value-color;
        background: var(--valid-value-color);
      }

      &.negative {
        background: $error-value-color;
        background: var(--error-value-color);
      }
    }
  }


@@ 1842,9 1900,9 @@ a.sparkline {
      align-items: center;
      width: calc(1.375rem + 1px);
      height: calc(1.375rem + 1px);
      background: $ui-base-color;
      border: 1px solid $highlight-text-color;
      color: $highlight-text-color;
      background: var(--ui-base-color);
      border: 1px solid var(--highlight-text-color);
      color: var(--highlight-text-color);
      border-radius: 8px;
    }



@@ 1852,7 1910,7 @@ a.sparkline {
      position: absolute;
      content: '';
      width: 1px;
      background: $highlight-text-color;
      background: var(--highlight-text-color);
      bottom: 0;
      top: calc(1.875rem + 1px);
      inset-inline-start: 0.6875rem;


@@ 1870,14 1928,14 @@ a.sparkline {
  &__entry {
    h5 {
      font-weight: 500;
      color: $primary-text-color;
      color: var(--primary-text-color);
      line-height: 25px;
      margin-bottom: 16px;
    }

    .status {
      border: 1px solid lighten($ui-base-color, 4%);
      background: $ui-base-color;
      border: 1px solid var(--ui-base-color-lighten-4);
      background: var(--ui-base-color);
      border-radius: 4px;
    }
  }


M app/javascript/flavours/glitch/styles/basics.scss => app/javascript/flavours/glitch/styles/basics.scss +16 -24
@@ 1,18 1,10 @@
@function hex-color($color) {
  @if type-of($color) == 'color' {
    $color: str-slice(ie-hex-str($color), 4);
  }

  @return '%23' + unquote($color);
}

body {
  font-family: $font-sans-serif, sans-serif;
  background: darken($ui-base-color, 7%);
  font-family: var(--font-sans-serif), sans-serif;
  background: var(--ui-base-color-darken-7);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: $primary-text-color;
  color: var(--primary-text-color);
  text-rendering: optimizelegibility;
  font-feature-settings: 'kern';
  text-size-adjust: none;


@@ 30,7 22,7 @@ body {
    // 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)
    // var(--font-sans-serif) => web-font (Roboto) fallback and newer Androids (>=4.0)
    font-family:
      system-ui,
      -apple-system,


@@ 42,7 34,7 @@ body {
      'Fira Sans',
      'Droid Sans',
      'Helvetica Neue',
      $font-sans-serif,
      var(--font-sans-serif),
      sans-serif;
  }



@@ 67,7 59,7 @@ body {
  }

  &.lighter {
    background: $ui-base-color;
    background: var(--ui-base-color);
  }

  &.with-modals {


@@ 109,7 101,7 @@ body {
  }

  &.embed {
    background: lighten($ui-base-color, 4%);
    background: var(--ui-base-color-lighten-4);
    margin: 0;
    padding-bottom: 0;



@@ 122,15 114,15 @@ body {
  }

  &.admin {
    background: darken($ui-base-color, 4%);
    background: var(--ui-base-color-darken-4);
    padding: 0;
  }

  &.error {
    position: absolute;
    text-align: center;
    color: $darker-text-color;
    background: $ui-base-color;
    color: var(--darker-text-color);
    background: var(--ui-base-color);
    width: 100%;
    height: 100%;
    padding: 0;


@@ 206,7 198,7 @@ button {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: lighten($error-red, 4%);
  color: var(--error-red-lighten-4);
  text-align: center;

  & > div {


@@ 222,7 214,7 @@ button {
  }

  a {
    color: $highlight-text-color;
    color: var(--highlight-text-color);

    &:hover,
    &:focus,


@@ 232,11 224,11 @@ button {
  }

  &__footer {
    color: $dark-text-color;
    color: var(--dark-text-color);
    font-size: 13px;

    a {
      color: $dark-text-color;
      color: var(--dark-text-color);
    }
  }



@@ 244,7 236,7 @@ button {
    display: inline;
    border: 0;
    background: transparent;
    color: $dark-text-color;
    color: var(--dark-text-color);
    font: inherit;
    padding: 0;
    margin: 0;


@@ 261,7 253,7 @@ button {
    }

    &.copied {
      color: $valid-value-color;
      color: var(--valid-value-color);
      transition: none;
    }
  }


M app/javascript/flavours/glitch/styles/branding.scss => app/javascript/flavours/glitch/styles/branding.scss +1 -1
@@ 1,3 1,3 @@
.logo {
  color: $primary-text-color;
  color: var(--primary-text-color);
}


M app/javascript/flavours/glitch/styles/containers.scss => app/javascript/flavours/glitch/styles/containers.scss +7 -5
@@ 25,7 25,7 @@
      display: flex;
      justify-content: center;
      align-items: center;
      color: $primary-text-color;
      color: var(--primary-text-color);
      text-decoration: none;
      outline: 0;
      padding: 12px 16px;


@@ 62,7 62,7 @@
  padding: 20px 0;
  margin-top: 40px;
  margin-bottom: 10px;
  border-bottom: 1px solid $ui-base-color;
  border-bottom: 1px solid var(--ui-base-color);

  @media screen and (width <= 440px) {
    width: 100%;


@@ 73,7 73,7 @@
  .avatar {
    width: 40px;
    height: 40px;
    @include avatar-size(40px);
    background-size: 40px 40px;

    margin-inline-end: 10px;



@@ 83,13 83,15 @@
      display: block;
      margin: 0;
      border-radius: 4px;
      @include avatar-radius;
      border-radius: var(--ui-avatar-border-size);
      background-position: 50%;
      background-clip: padding-box;
    }
  }

  .name {
    flex: 1 1 auto;
    color: $secondary-text-color;
    color: var(--secondary-text-color);
    width: calc(100% - 90px);

    .username {


M app/javascript/flavours/glitch/styles/dashboard.scss => app/javascript/flavours/glitch/styles/dashboard.scss +11 -11
@@ 13,7 13,7 @@
    & > div,
    & > a {
      padding: 20px;
      background: lighten($ui-base-color, 4%);
      background: var(--ui-base-color-lighten-4);
      border-radius: 4px;
      box-sizing: border-box;
      height: 100%;


@@ 27,7 27,7 @@
      &:hover,
      &:focus,
      &:active {
        background: lighten($ui-base-color, 8%);
        background: var(--ui-base-color-lighten-8);
      }
    }
  }


@@ 37,7 37,7 @@
    text-align: center;
    font-weight: 500;
    font-size: 24px;
    color: $primary-text-color;
    color: var(--primary-text-color);
    margin-bottom: 20px;
    line-height: 30px;
  }


@@ 48,7 48,7 @@

  &__label {
    font-size: 14px;
    color: $darker-text-color;
    color: var(--darker-text-color);
    text-align: center;
    font-weight: 500;
  }


@@ 81,8 81,8 @@
    display: flex;
    align-items: baseline;
    border-radius: 4px;
    background: $ui-button-background-color;
    color: $primary-text-color;
    background: var(--ui-button-background-color);
    color: var(--primary-text-color);
    transition: all 100ms ease-in;
    font-size: 14px;
    padding: 0 16px;


@@ 94,18 94,18 @@
    &:active,
    &:focus,
    &:hover {
      background-color: $ui-button-focus-background-color;
      background-color: var(--ui-button-focus-background-color);
      transition: all 200ms ease-out;
    }

    &.positive {
      background: lighten($ui-base-color, 4%);
      color: $valid-value-color;
      background: var(--ui-base-color-lighten-4);
      color: var(--valid-value-color);
    }

    &.negative {
      background: lighten($ui-base-color, 4%);
      color: $error-value-color;
      background: var(--ui-base-color-lighten-4);
      color: var(--error-value-color);
    }

    span {


M app/javascript/flavours/glitch/styles/forms.scss => app/javascript/flavours/glitch/styles/forms.scss +107 -117
@@ 1,7 1,5 @@
$no-columns-breakpoint: 600px;

code {
  font-family: $font-monospace, monospace;
  font-family: var(--font-monospace), monospace;
  font-weight: 400;
}



@@ 19,14 17,14 @@ code {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: $primary-text-color;
  color: var(--primary-text-color);

  &.success {
    background: $success-green;
    background: var(--success-green);
  }

  &.failure {
    background: $error-red;
    background: var(--error-red);
  }
}



@@ 72,7 70,7 @@ code {
        font-family: inherit;
        font-size: 14px;
        padding-top: 5px;
        color: $primary-text-color;
        color: var(--primary-text-color);
        display: block;
        width: auto;
      }


@@ 93,7 91,7 @@ code {
      }

      label a {
        color: $highlight-text-color;
        color: var(--highlight-text-color);
        text-decoration: underline;

        &:hover,


@@ 136,7 134,7 @@ code {
  .lead {
    font-size: 17px;
    line-height: 22px;
    color: $secondary-text-color;
    color: var(--secondary-text-color);
    margin-bottom: 30px;

    &.invited-by {


@@ 144,7 142,7 @@ code {
    }

    a {
      color: $highlight-text-color;
      color: var(--highlight-text-color);
    }
  }



@@ 155,16 153,16 @@ code {
  }

  .hint {
    color: $darker-text-color;
    color: var(--darker-text-color);

    a {
      color: $highlight-text-color;
      color: var(--highlight-text-color);
    }

    code {
      border-radius: 3px;
      padding: 0.2em 0.4em;
      background: darken($ui-base-color, 12%);
      background: var(--ui-base-color-darken-12);
    }

    li {


@@ 185,7 183,7 @@ code {

  p.hint {
    margin-bottom: 15px;
    color: $darker-text-color;
    color: var(--darker-text-color);

    &.subtle-hint {
      text-align: center;


@@ 207,10 205,8 @@ code {
  strong {
    font-weight: 500;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) {
      font-weight: 700;
    }
  }



@@ 221,7 217,7 @@ code {
      & > label {
        font-family: inherit;
        font-size: 14px;
        color: $primary-text-color;
        color: var(--primary-text-color);
        font-weight: 500;
        min-width: 150px;
        flex: 0 0 auto;


@@ 243,7 239,7 @@ code {
    .label_input > label {
      font-family: inherit;
      font-size: 14px;
      color: $primary-text-color;
      color: var(--primary-text-color);
      display: block;
      margin-bottom: 8px;
      word-wrap: break-word;


@@ 265,7 261,7 @@ code {
    & > label {
      font-family: inherit;
      font-size: 14px;
      color: $primary-text-color;
      color: var(--primary-text-color);
      display: block;
      font-weight: 500;
      padding-top: 5px;


@@ 292,7 288,7 @@ code {

  .required abbr {
    text-decoration: none;
    color: lighten($error-value-color, 12%);
    color: var(--error-value-color-lighten-12);
  }

  .fields-group {


@@ 357,7 353,7 @@ code {
      margin-bottom: 0;
    }

    @media screen and (max-width: $no-columns-breakpoint) {
    @media screen and (max-width: 600px) {
      display: block;
      margin-bottom: 0;



@@ 385,7 381,7 @@ code {
    margin-bottom: 5px;
    font-family: inherit;
    font-size: 14px;
    color: $primary-text-color;
    color: var(--primary-text-color);
    display: block;
    width: auto;
  }


@@ 395,7 391,7 @@ code {
      label {
        font-family: inherit;
        font-size: 14px;
        color: $primary-text-color;
        color: var(--primary-text-color);
        display: inline-block;
        width: auto;
        position: relative;


@@ 416,7 412,7 @@ code {
  .input.static .label_input__wrapper {
    font-size: 16px;
    padding: 10px;
    border: 1px solid $dark-text-color;
    border: 1px solid var(--dark-text-color);
    border-radius: 4px;
  }



@@ 429,19 425,19 @@ code {
  textarea {
    box-sizing: border-box;
    font-size: 16px;
    color: $primary-text-color;
    color: var(--primary-text-color);
    display: block;
    width: 100%;
    outline: 0;
    font-family: inherit;
    resize: vertical;
    background: darken($ui-base-color, 10%);
    border: 1px solid darken($ui-base-color, 14%);
    background: var(--ui-base-color-darken-10);
    border: 1px solid var(--ui-base-color-darken-14);
    border-radius: 4px;
    padding: 10px;

    &::placeholder {
      color: lighten($darker-text-color, 4%);
      color: var(--darker-text-color-lighten-4);
    }

    &:invalid {


@@ 449,17 445,17 @@ code {
    }

    &:required:valid {
      border-color: $valid-value-color;
      border-color: var(--valid-value-color);
    }

    &:hover {
      border-color: darken($ui-base-color, 20%);
      border-color: var(--ui-base-color-darken-20);
    }

    &:active,
    &:focus {
      border-color: $highlight-text-color;
      background: darken($ui-base-color, 8%);
      border-color: var(--highlight-text-color);
      background: var(--ui-base-color-darken-8);
    }
  }



@@ 470,13 466,13 @@ code {
  input[type='datetime-local'] {
    &:focus:invalid:not(:placeholder-shown),
    &:required:invalid:not(:placeholder-shown) {
      border-color: lighten($error-red, 12%);
      border-color: var(--error-red-lighten-12);
    }
  }

  .input.field_with_errors {
    label {
      color: lighten($error-red, 12%);
      color: var(--error-red-lighten-12);
    }

    input[type='text'],


@@ 486,13 482,13 @@ code {
    input[type='datetime-local'],
    textarea,
    select {
      border-color: lighten($error-red, 12%);
      border-color: var(--error-red-lighten-12);
    }

    .error {
      display: block;
      font-weight: 500;
      color: lighten($error-red, 12%);
      color: var(--error-red-lighten-12);
      margin-top: 4px;
    }
  }


@@ 523,8 519,8 @@ code {
    width: 100%;
    border: 0;
    border-radius: 4px;
    background: $ui-button-background-color;
    color: $ui-button-color;
    background: var(--ui-button-background-color);
    color: var(--ui-button-color);
    font-size: 18px;
    line-height: inherit;
    height: auto;


@@ 546,20 542,20 @@ code {
    &:active,
    &:focus,
    &:hover {
      background-color: $ui-button-focus-background-color;
      background-color: var(--ui-button-focus-background-color);
    }

    &:disabled:hover {
      background-color: $ui-primary-color;
      background-color: var(--ui-primary-color);
    }

    &.negative {
      background: $ui-button-destructive-background-color;
      background: var(--ui-button-destructive-background-color);

      &:hover,
      &:active,
      &:focus {
        background-color: $ui-button-destructive-focus-background-color;
        background-color: var(--ui-button-destructive-focus-background-color);
      }
    }
  }


@@ 578,16 574,16 @@ code {
    appearance: none;
    box-sizing: border-box;
    font-size: 16px;
    color: $primary-text-color;
    color: var(--primary-text-color);
    display: block;
    width: 100%;
    outline: 0;
    font-family: inherit;
    resize: vertical;
    background: darken($ui-base-color, 10%)
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
    background: var(--ui-base-color-darken-10)
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%2342485a'/></svg>")
      no-repeat right 8px center / auto 16px;
    border: 1px solid darken($ui-base-color, 14%);
    border: 1px solid var(--ui-base-color-darken-14);
    border-radius: 4px;
    padding-inline-start: 10px;
    padding-inline-end: 30px;


@@ 610,7 606,7 @@ code {
      padding: 10px;
      padding-bottom: 9px;
      font-size: 16px;
      color: $dark-text-color;
      color: var(--dark-text-color);
      font-family: inherit;
      pointer-events: none;
      cursor: default;


@@ 628,8 624,8 @@ code {
        width: 5px;
        background-image: linear-gradient(
          to right,
          rgba(darken($ui-base-color, 10%), 0),
          darken($ui-base-color, 10%)
          transparent,
          var(--ui-base-color-darken-10)
        );
      }
    }


@@ 644,29 640,29 @@ code {
}

.flash-message {
  background: lighten($ui-base-color, 8%);
  color: $darker-text-color;
  background: var(--ui-base-color-lighten-8);
  color: var(--darker-text-color);
  border-radius: 4px;
  padding: 15px 10px;
  margin-bottom: 30px;
  text-align: center;

  &.notice {
    border: 1px solid rgba($valid-value-color, 0.5);
    background: rgba($valid-value-color, 0.25);
    color: $valid-value-color;
    border: 1px solid var(--valid-value-color-a50);
    background: var(--valid-value-color-a25);
    color: var(--valid-value-color);
  }

  &.warning {
    border: 1px solid rgba($gold-star, 0.5);
    background: rgba($gold-star, 0.25);
    color: $gold-star;
    border: 1px solid var(--gold-star-a50);
    background: var(--gold-star-a25);
    color: var(--gold-star);
  }

  &.alert {
    border: 1px solid rgba($error-value-color, 0.5);
    background: rgba($error-value-color, 0.1);
    color: $error-value-color;
    border: 1px solid var(--error-value-color-a50);
    background: var(--error-value-color-a10);
    color: var(--error-value-color);
  }

  &.hidden {


@@ 675,11 671,11 @@ code {

  a {
    display: inline-block;
    color: $darker-text-color;
    color: var(--darker-text-color);
    text-decoration: none;

    &:hover {
      color: $primary-text-color;
      color: var(--primary-text-color);
      text-decoration: underline;
    }
  }


@@ 708,9 704,9 @@ code {
    width: 100%;
    border: 0;
    padding: 10px;
    font-family: $font-monospace, monospace;
    background: $ui-base-color;
    color: $primary-text-color;
    font-family: var(--font-monospace), monospace;
    background: var(--ui-base-color);
    color: var(--primary-text-color);
    font-size: 14px;
    margin: 0;



@@ 725,17 721,15 @@ code {
    }

    &:focus {
      background: lighten($ui-base-color, 4%);
      background: var(--ui-base-color-lighten-4);
    }
  }

  strong {
    font-weight: 500;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) {
      font-weight: 700;
    }
  }



@@ 781,7 775,7 @@ code {
  text-align: center;

  a {
    color: $darker-text-color;
    color: var(--darker-text-color);
    text-decoration: none;

    &:hover {


@@ 801,7 795,7 @@ code {
  }

  a {
    color: $highlight-text-color;
    color: var(--highlight-text-color);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;


@@ 809,7 803,7 @@ code {
    &:hover,
    &:focus,
    &:active {
      color: lighten($highlight-text-color, 8%);
      color: var(--highlight-text-color-lighten-8);
    }
  }
}


@@ 817,7 811,7 @@ code {
.oauth-prompt,
.follow-prompt {
  margin-bottom: 30px;
  color: $darker-text-color;
  color: var(--darker-text-color);

  h2 {
    font-size: 16px;


@@ 826,20 820,18 @@ code {
  }

  strong {
    color: $secondary-text-color;
    color: var(--secondary-text-color);
    font-weight: 500;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) {
      font-weight: 700;
    }
  }
}

.oauth-prompt {
  h3 {
    color: $ui-secondary-color;
    color: var(--ui-secondary-color);
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;


@@ 853,9 845,9 @@ code {
  }

  .permissions-list {
    border: 1px solid $ui-base-color;
    border: 1px solid var(--ui-base-color);
    border-radius: 4px;
    background: darken($ui-base-color, 4%);
    background: var(--ui-base-color-darken-4);
    margin-bottom: 30px;
  }



@@ 881,11 873,11 @@ code {

.qr-code {
  flex: 0 0 auto;
  background: $simple-background-color;
  background: var(--simple-background-color);
  padding: 4px;
  margin-inline-end: 10px;
  margin-bottom: 20px;
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  box-shadow: 0 0 15px var(--base-shadow-color-a20);
  display: inline-block;

  svg {


@@ 896,7 888,7 @@ code {

.qr-alternative {
  margin-bottom: 20px;
  color: $secondary-text-color;
  color: var(--secondary-text-color);
  flex: 150px;

  samp {


@@ 908,16 900,16 @@ code {
.simple_form {
  .warning {
    box-sizing: border-box;
    background: rgba($error-value-color, 0.5);
    color: $primary-text-color;
    text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
    box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
    background: var(--error-value-color-a50);
    color: var(--primary-text-color);
    text-shadow: 1px 1px 0 var(--base-shadow-color-a30);
    box-shadow: 0 2px 6px var(--base-shadow-color-a40);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;

    a {
      color: $primary-text-color;
      color: var(--primary-text-color);
      text-decoration: underline;

      &:hover,


@@ 932,10 924,8 @@ code {
      display: block;
      margin-bottom: 5px;

      @each $lang in $cjk-langs {
        &:lang(#{$lang}) {
          font-weight: 700;
        }
      &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) {
        font-weight: 700;
      }

      .fa {


@@ 964,7 954,7 @@ code {

.post-follow-actions {
  text-align: center;
  color: $darker-text-color;
  color: var(--darker-text-color);

  div {
    margin-bottom: 4px;


@@ 977,7 967,7 @@ code {

  h4 {
    font-size: 16px;
    color: $primary-text-color;
    color: var(--primary-text-color);
    text-align: center;
    margin-bottom: 20px;
    border: 0;


@@ 990,7 980,7 @@ code {
}

.scope-danger {
  color: $warning-red;
  color: var(--warning-red);
}

.form_admin_settings_site_short_description,


@@ 1000,13 990,13 @@ code {
.form_admin_settings_custom_css,
.form_admin_settings_closed_registrations_message {
  textarea {
    font-family: $font-monospace, monospace;
    font-family: var(--font-monospace), monospace;
  }
}

.input-copy {
  background: darken($ui-base-color, 10%);
  border: 1px solid darken($ui-base-color, 14%);
  background: var(--ui-base-color-darken-10);
  border: 1px solid var(--ui-base-color-darken-14);
  border-radius: 4px;
  display: flex;
  align-items: center;


@@ 1024,7 1014,7 @@ code {
    border: 0;
    padding: 10px;
    font-size: 14px;
    font-family: $font-monospace, monospace;
    font-family: var(--font-monospace), monospace;
  }

  button {


@@ 1040,11 1030,11 @@ code {
  }

  &.copied {
    border-color: $valid-value-color;
    border-color: var(--valid-value-color);
    transition: none;

    button {
      background: $valid-value-color;
      background: var(--valid-value-color);
      transition: none;
    }
  }


@@ 1066,8 1056,8 @@ code {
.permissions-list {
  &__item {
    padding: 15px;
    color: $ui-secondary-color;
    border-bottom: 1px solid lighten($ui-base-color, 4%);
    color: var(--ui-secondary-color);
    border-bottom: 1px solid var(--ui-base-color-lighten-4);
    display: flex;
    align-items: center;



@@ 1079,7 1069,7 @@ code {
      }

      &__type {
        color: $darker-text-color;
        color: var(--darker-text-color);
      }
    }



@@ 1087,7 1077,7 @@ code {
      flex: 0 0 auto;
      font-size: 18px;
      width: 30px;
      color: $valid-value-color;
      color: var(--valid-value-color);
      display: flex;
      align-items: center;
    }


@@ 1150,11 1140,11 @@ code {

  .separator {
    height: 2px;
    background: $ui-base-lighter-color;
    background: var(--ui-base-lighter-color);
    flex: 1 1 auto;

    &.completed {
      background: $highlight-text-color;
      background: var(--highlight-text-color);
    }
  }



@@ 1164,7 1154,7 @@ code {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid $ui-base-lighter-color;
    border: 2px solid var(--ui-base-lighter-color);
    flex: 0 0 auto;
    display: flex;
    align-items: center;


@@ 1179,7 1169,7 @@ code {
    position: absolute;
    font-size: 14px;
    font-weight: 500;
    color: $secondary-text-color;
    color: var(--secondary-text-color);
    padding-top: 10px;
    text-align: center;
    width: 100px;


@@ 1202,14 1192,14 @@ code {
  }

  .active .circle {
    border-color: $highlight-text-color;
    border-color: var(--highlight-text-color);

    &::before {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: $highlight-text-color;
      background: var(--highlight-text-color);
      position: absolute;
      left: 50%;
      top: 50%;


@@ 1218,7 1208,7 @@ code {
  }

  .completed .circle {
    border-color: $highlight-text-color;
    background: $highlight-text-color;
    border-color: var(--highlight-text-color);
    background: var(--highlight-text-color);
  }
}


M app/javascript/flavours/glitch/styles/login.scss => app/javascript/flavours/glitch/styles/login.scss +3 -3
@@ 70,7 70,7 @@ button:focus-visible {

button {
    padding: 7px 10px;
    border: 1px solid lighten(#66befe, 7%);
    border: 1px solid #89cdfe;
    border-radius: 4px;
    box-sizing: border-box;
    color: #2a2b2f;


@@ 95,7 95,7 @@ input[type='text'] {
    display: block;
    margin: 0;
    padding: 15px;
    border: 1px solid lighten(#282c37, 7%);
    border: 1px solid #373d4c;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: none;


@@ 109,7 109,7 @@ input[type='text'] {
.content {
    padding: 15px;
    border-radius: 4px;
    border: 1px solid lighten(#39404f, 7%);
    border: 1px solid #485164;
    color: #fff;
    background-color: #39404f;
}


M app/javascript/flavours/glitch/styles/modal.scss => app/javascript/flavours/glitch/styles/modal.scss +2 -2
@@ 1,6 1,6 @@
.modal-layout {
  background: $ui-base-color
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
  background: var(--ui-base-color)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="%2360698433"/></svg>')
    repeat-x bottom fixed;
  display: flex;
  flex-direction: column;


M app/javascript/flavours/glitch/styles/polls.scss => app/javascript/flavours/glitch/styles/polls.scss +36 -36
@@ 16,12 16,12 @@
  &__chart {
    border-radius: 4px;
    display: block;
    background: darken($ui-primary-color, 5%);
    background: var(--ui-primary-color-darken-5);
    height: 5px;
    min-width: 1%;

    &.leading {
      background: $ui-highlight-color;
      background: var(--ui-highlight-color);
    }
  }



@@ 41,17 41,17 @@
    // duplication
    &::-moz-progress-bar {
      border-radius: 4px;
      background: darken($ui-primary-color, 5%);
      background: var(--ui-primary-color-darken-5);
    }

    &::-ms-fill {
      border-radius: 4px;
      background: darken($ui-primary-color, 5%);
      background: var(--ui-primary-color-darken-5);
    }

    &::-webkit-progress-value {
      border-radius: 4px;
      background: darken($ui-primary-color, 5%);
      background: var(--ui-primary-color-darken-5);
    }
  }



@@ 84,16 84,16 @@
      box-sizing: border-box;
      width: 100%;
      font-size: 14px;
      color: $inverted-text-color;
      color: var(--inverted-text-color);
      outline: 0;
      font-family: inherit;
      background: $simple-background-color;
      border: 1px solid darken($simple-background-color, 14%);
      background: var(--simple-background-color);
      border: 1px solid var(--simple-background-color-darken-14);
      border-radius: 4px;
      padding: 6px 10px;

      &:focus {
        border-color: $highlight-text-color;
        border-color: var(--highlight-text-color);
      }
    }



@@ 111,7 111,7 @@
  &__input {
    display: inline-block;
    position: relative;
    border: 1px solid $ui-primary-color;
    border: 1px solid var(--ui-primary-color);
    box-sizing: border-box;
    width: 18px;
    height: 18px;


@@ 130,13 130,13 @@
    &:active,
    &:focus,
    &:hover {
      border-color: lighten($valid-value-color, 15%);
      border-color: var(--valid-value-color-lighten-15);
      border-width: 4px;
    }

    &.active {
      background-color: $valid-value-color;
      border-color: $valid-value-color;
      background-color: var(--valid-value-color);
      border-color: var(--valid-value-color);
    }

    &::-moz-focus-inner {


@@ 150,16 150,16 @@
    }

    &.disabled {
      border-color: $dark-text-color;
      border-color: var(--dark-text-color);

      &.active {
        background: $dark-text-color;
        background: var(--dark-text-color);
      }

      &:active,
      &:focus,
      &:hover {
        border-color: $dark-text-color;
        border-color: var(--dark-text-color);
        border-width: 1px;
      }
    }


@@ 184,7 184,7 @@
  &__footer {
    padding-top: 6px;
    padding-bottom: 5px;
    color: $dark-text-color;
    color: var(--dark-text-color);
  }

  &__link {


@@ 193,7 193,7 @@
    padding: 0;
    margin: 0;
    border: 0;
    color: $dark-text-color;
    color: var(--dark-text-color);
    text-decoration: underline;
    font-size: inherit;



@@ 203,7 203,7 @@

    &:active,
    &:focus {
      background-color: rgba($dark-text-color, 0.1);
      background-color: var(--dark-text-color-a10);
    }
  }



@@ 216,7 216,7 @@
}

.compose-form__poll-wrapper {
  border-top: 1px solid darken($simple-background-color, 8%);
  border-top: 1px solid var(--simple-background-color-darken-8);
  overflow-x: hidden;

  ul {


@@ 227,12 227,12 @@
    &:active,
    &:focus,
    &:hover {
      border-color: $ui-button-focus-background-color;
      border-color: var(--ui-button-focus-background-color);
    }
  }

  .poll__footer {
    border-top: 1px solid darken($simple-background-color, 8%);
    border-top: 1px solid var(--simple-background-color-darken-8);
    padding: 10px;
    display: flex;
    align-items: center;


@@ 243,7 243,7 @@
      flex: 1 1 50%;

      &:focus {
        border-color: $highlight-text-color;
        border-color: var(--highlight-text-color);
      }
    }
  }


@@ 254,16 254,16 @@
    padding: 6px 10px;
    height: auto;
    line-height: inherit;
    color: $action-button-color;
    border-color: $action-button-color;
    color: var(--action-button-color);
    border-color: var(--action-button-color);
    margin-inline-end: 5px;

    &:hover,
    &:focus,
    &.active {
      border-color: $action-button-color;
      background-color: $action-button-color;
      color: $ui-button-color;
      border-color: var(--action-button-color);
      background-color: var(--action-button-color);
      color: var(--ui-button-color);
    }
  }



@@ 282,33 282,33 @@
    appearance: none;
    box-sizing: border-box;
    font-size: 14px;
    color: $inverted-text-color;
    color: var(--inverted-text-color);
    display: inline-block;
    width: auto;
    outline: 0;
    font-family: inherit;
    background: $simple-background-color
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
    background: var(--simple-background-color)
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%23dbdbdb'/></svg>")
      no-repeat right 8px center / auto 16px;
    border: 1px solid darken($simple-background-color, 14%);
    border: 1px solid var(--simple-background-color-darken-14);
    border-radius: 4px;
    padding: 6px 10px;
    padding-inline-end: 30px;
  }

  .icon-button.disabled {
    color: darken($simple-background-color, 14%);
    color: var(--simple-background-color-darken-14);
  }
}

.muted .poll {
  color: $dark-text-color;
  color: var(--dark-text-color);

  &__chart {
    background: rgba(darken($ui-primary-color, 14%), 0.7);
    background: color-mix(in srgb, var(--ui-primary-color-darken-14) 70%, transparent);

    &.leading {
      background: rgba($ui-highlight-color, 0.5);
      background: var(--ui-highlight-color-a50);
    }
  }
}


M app/javascript/flavours/glitch/styles/rich_text.scss => app/javascript/flavours/glitch/styles/rich_text.scss +4 -4
@@ 14,8 14,8 @@

  blockquote {
    padding-inline-start: 10px;
    border-inline-start: 3px solid $darker-text-color;
    color: $darker-text-color;
    border-inline-start: 3px solid var(--darker-text-color);
    color: var(--darker-text-color);
    white-space: normal;

    p:last-child {


@@ 93,7 93,7 @@

.reply-indicator__content {
  blockquote {
    border-inline-start-color: $inverted-text-color;
    color: $inverted-text-color;
    border-inline-start-color: var(--inverted-text-color);
    color: var(--inverted-text-color);
  }
}


M app/javascript/flavours/glitch/styles/rtl.scss => app/javascript/flavours/glitch/styles/rtl.scss +4 -4
@@ 94,15 94,15 @@ body.rtl {
    &::after {
      background-image: linear-gradient(
        to left,
        rgba(darken($ui-base-color, 10%), 0),
        darken($ui-base-color, 10%)
        transparent,
        var(--ui-base-color-darken-10)
      );
    }
  }

  .simple_form select {
    background: darken($ui-base-color, 10%)
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
    background: var(--ui-base-color-darken-10)
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%2342485a'/></svg>")
      no-repeat left 8px center / auto 16px;
  }



M app/javascript/flavours/glitch/styles/statuses.scss => app/javascript/flavours/glitch/styles/statuses.scss +8 -8
@@ 1,10 1,10 @@
.activity-stream {
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  box-shadow: 0 0 15px var(--base-shadow-color-a20);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;

  @media screen and (max-width: $no-gap-breakpoint) {
  @media screen and (max-width: 1175px) {
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;


@@ 26,7 26,7 @@
  }

  .entry {
    background: $ui-base-color;
    background: var(--ui-base-color);

    .detailed-status,
    .status,


@@ 69,7 69,7 @@
  }

  &--highlighted .entry {
    background: lighten($ui-base-color, 8%);
    background: var(--ui-base-color-lighten-8);
  }
}



@@ 78,9 78,9 @@
  height: auto;
  vertical-align: middle;
  margin-inline-end: 5px;
  fill: $primary-text-color;
  fill: var(--primary-text-color);

  @media screen and (max-width: $no-gap-breakpoint) {
  @media screen and (max-width: 1175px) {
    display: none;
  }
}


@@ 164,7 164,7 @@
    }

    .status__relative-time {
      color: $dark-text-color;
      color: var(--dark-text-color);
      float: right;
      font-size: 14px;
      width: auto;


@@ 218,7 218,7 @@
  display: block;
  font-size: 15px;
  line-height: 20px;
  color: $highlight-text-color;
  color: var(--highlight-text-color);
  border: 0;
  background: transparent;
  padding: 0;


M app/javascript/flavours/glitch/styles/tables.scss => app/javascript/flavours/glitch/styles/tables.scss +40 -42
@@ 9,19 9,19 @@
    padding: 8px;
    line-height: 18px;
    vertical-align: top;
    border-top: 1px solid $ui-base-color;
    border-top: 1px solid var(--ui-base-color);
    text-align: start;
    background: darken($ui-base-color, 4%);
    background: var(--ui-base-color-darken-4);

    &.critical {
      font-weight: 700;
      color: $gold-star;
      color: var(--gold-star);
    }
  }

  & > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid $ui-base-color;
    border-bottom: 2px solid var(--ui-base-color);
    border-top: 0;
    font-weight: 500;
  }


@@ 32,11 32,11 @@

  & > tbody > tr:nth-child(odd) > td,
  & > tbody > tr:nth-child(odd) > th {
    background: $ui-base-color;
    background: var(--ui-base-color);
  }

  a {
    color: $highlight-text-color;
    color: var(--highlight-text-color);
    text-decoration: underline;

    &:hover {


@@ 47,10 47,8 @@
  strong {
    font-weight: 500;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) {
      font-weight: 700;
    }
  }



@@ 78,30 76,30 @@
    & > tbody > tr > td {
      padding: 11px 10px;
      background: transparent;
      border: 1px solid lighten($ui-base-color, 8%);
      color: $secondary-text-color;
      border: 1px solid var(--ui-base-color-lighten-8);
      color: var(--secondary-text-color);
    }

    & > tbody > tr > th {
      color: $darker-text-color;
      color: var(--darker-text-color);
      font-weight: 600;
    }
  }

  &.batch-table {
    & > thead > tr > th {
      background: $ui-base-color;
      border-top: 1px solid darken($ui-base-color, 8%);
      border-bottom: 1px solid darken($ui-base-color, 8%);
      background: var(--ui-base-color);
      border-top: 1px solid var(--ui-base-color-darken-8);
      border-bottom: 1px solid var(--ui-base-color-darken-8);

      &:first-child {
        border-radius: 4px 0 0;
        border-inline-start: 1px solid darken($ui-base-color, 8%);
        border-inline-start: 1px solid var(--ui-base-color-darken-8);
      }

      &:last-child {
        border-radius: 0 4px 0 0;
        border-inline-end: 1px solid darken($ui-base-color, 8%);
        border-inline-end: 1px solid var(--ui-base-color-darken-8);
      }
    }
  }


@@ 117,7 115,7 @@
}

samp {
  font-family: $font-monospace, monospace;
  font-family: var(--font-monospace), monospace;
}

button.table-action-link {


@@ 132,11 130,11 @@ a.table-action-link {
  display: inline-block;
  margin-inline-end: 5px;
  padding: 0 10px;
  color: $darker-text-color;
  color: var(--darker-text-color);
  font-weight: 500;

  &:hover {
    color: $primary-text-color;
    color: var(--primary-text-color);
  }

  i.fa {


@@ 186,8 184,8 @@ a.table-action-link {
    position: sticky;
    top: 0;
    z-index: 1;
    border: 1px solid darken($ui-base-color, 8%);
    background: $ui-base-color;
    border: 1px solid var(--ui-base-color-darken-8);
    background: var(--ui-base-color);
    border-radius: 4px 0 0;
    height: 47px;
    align-items: center;


@@ 199,13 197,13 @@ a.table-action-link {
  }

  &__select-all {
    background: $ui-base-color;
    background: var(--ui-base-color);
    height: 47px;
    align-items: center;
    justify-content: center;
    border: 1px solid darken($ui-base-color, 8%);
    border: 1px solid var(--ui-base-color-darken-8);
    border-top: 0;
    color: $secondary-text-color;
    color: var(--secondary-text-color);
    display: none;

    &.active {


@@ 234,7 232,7 @@ a.table-action-link {
      background: transparent;
      border: 0;
      font: inherit;
      color: $highlight-text-color;
      color: var(--highlight-text-color);
      border-radius: 4px;
      font-weight: 700;
      padding: 8px;


@@ 242,16 240,16 @@ a.table-action-link {
      &:hover,
      &:focus,
      &:active {
        background: lighten($ui-base-color, 8%);
        background: var(--ui-base-color-lighten-8);
      }
    }
  }

  &__form {
    padding: 16px;
    border: 1px solid darken($ui-base-color, 8%);
    border: 1px solid var(--ui-base-color-darken-8);
    border-top: 0;
    background: $ui-base-color;
    background: var(--ui-base-color);

    .fields-row {
      padding-top: 0;


@@ 260,25 258,25 @@ a.table-action-link {
  }

  &__row {
    border: 1px solid darken($ui-base-color, 8%);
    border: 1px solid var(--ui-base-color-darken-8);
    border-top: 0;
    background: darken($ui-base-color, 4%);
    background: var(--ui-base-color-darken-4);

    @media screen and (max-width: $no-gap-breakpoint) {
    @media screen and (max-width: 1175px) {
      .optional &:first-child {
        border-top: 1px solid darken($ui-base-color, 8%);
        border-top: 1px solid var(--ui-base-color-darken-8);
      }
    }

    &:hover {
      background: darken($ui-base-color, 2%);
      background: var(--ui-base-color-darken-2);
    }

    &:nth-child(even) {
      background: $ui-base-color;
      background: var(--ui-base-color);

      &:hover {
        background: lighten($ui-base-color, 2%);
        background: var(--ui-base-color-lighten-2);
      }
    }



@@ 321,7 319,7 @@ a.table-action-link {
      &__extra {
        flex: 0 0 auto;
        text-align: end;
        color: $darker-text-color;
        color: var(--darker-text-color);
        font-weight: 500;
      }
    }


@@ 339,7 337,7 @@ a.table-action-link {

  &.optional .batch-table__toolbar,
  &.optional .batch-table__row__select {
    @media screen and (max-width: $no-gap-breakpoint) {
    @media screen and (max-width: 1175px) {
      display: none;
    }
  }


@@ 353,12 351,12 @@ a.table-action-link {
  }

  .nothing-here {
    border: 1px solid darken($ui-base-color, 8%);
    border: 1px solid var(--ui-base-color-darken-8);
    border-top: 0;
    box-shadow: none;

    @media screen and (max-width: $no-gap-breakpoint) {
      border-top: 1px solid darken($ui-base-color, 8%);
    @media screen and (max-width: 1175px) {
      border-top: 1px solid var(--ui-base-color-darken-8);
    }
  }



M app/javascript/flavours/glitch/styles/widgets.scss => app/javascript/flavours/glitch/styles/widgets.scss +43 -47
@@ 1,15 1,13 @@
@use 'sass:math';

.hero-widget {
  margin-bottom: 10px;
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  box-shadow: 0 0 15px var(--base-shadow-color-a20);

  &__img {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: $base-shadow-color;
    background: var(--base-shadow-color);

    img {
      object-fit: cover;


@@ 22,11 20,11 @@
  }

  &__text {
    background: $ui-base-color;
    background: var(--ui-base-color);
    padding: 20px;
    border-radius: 0 0 4px 4px;
    font-size: 15px;
    color: $darker-text-color;
    color: var(--darker-text-color);
    line-height: 20px;
    word-wrap: break-word;
    font-weight: 400;


@@ 54,11 52,11 @@
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      color: lighten($darker-text-color, 10%);
      color: var(--darker-text-color-lighten-10);
    }

    a {
      color: $secondary-text-color;
      color: var(--secondary-text-color);
      text-decoration: none;

      &:hover {


@@ 67,7 65,7 @@
    }
  }

  @media screen and (max-width: $no-gap-breakpoint) {
  @media screen and (max-width: 1175px) {
    display: none;
  }
}


@@ 81,7 79,7 @@
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    color: $darker-text-color;
    color: var(--darker-text-color);
  }

  .account {


@@ 104,16 102,16 @@

.trends-widget {
  h4 {
    color: $darker-text-color;
    color: var(--darker-text-color);
  }
}

.placeholder-widget {
  padding: 16px;
  border-radius: 4px;
  border: 2px dashed $dark-text-color;
  border: 2px dashed var(--dark-text-color);
  text-align: center;
  color: $darker-text-color;
  color: var(--darker-text-color);
  margin-bottom: 10px;
}



@@ 121,9 119,9 @@
  padding: 15px;
  padding-bottom: 20px;
  border-radius: 4px;
  background: $ui-base-color;
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  color: $secondary-text-color;
  background: var(--ui-base-color);
  box-shadow: 0 0 15px var(--base-shadow-color-a20);
  color: var(--secondary-text-color);
  font-weight: 400;
  margin-bottom: 10px;



@@ 131,10 129,8 @@
  a {
    font-weight: 500;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    &:is(:lang(ja), :lang(ko), :lang(zh-CN), :lang(zh-HK), :lang(zh-TW)) {
      font-weight: 700;
    }
  }



@@ 166,7 162,7 @@

    .fa {
      margin-inline-end: 5px;
      color: $darker-text-color;
      color: var(--darker-text-color);
    }
  }



@@ 190,17 186,17 @@
.memoriam-widget {
  padding: 20px;
  border-radius: 4px;
  background: $base-shadow-color;
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  background: var(--base-shadow-color);
  box-shadow: 0 0 15px var(--base-shadow-color-a20);
  font-size: 14px;
  color: $darker-text-color;
  color: var(--darker-text-color);
  margin-bottom: 10px;
}

.directory {
  background: $ui-base-color;
  background: var(--ui-base-color);
  border-radius: 4px;
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  box-shadow: 0 0 15px var(--base-shadow-color-a20);

  &__tag {
    box-sizing: border-box;


@@ 211,24 207,24 @@
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: $ui-base-color;
      background: var(--ui-base-color);
      border-radius: 4px;
      padding: 15px;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
      box-shadow: 0 0 15px var(--base-shadow-color-a20);
    }

    & > a {
      &:hover,
      &:active,
      &:focus {
        background: lighten($ui-base-color, 8%);
        background: var(--ui-base-color-lighten-8);
      }
    }

    &.active > a {
      background: $ui-highlight-color;
      background: var(--ui-highlight-color);
      cursor: default;
    }



@@ 241,13 237,13 @@
      flex: 1 1 auto;
      font-size: 18px;
      font-weight: 700;
      color: $primary-text-color;
      color: var(--primary-text-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .fa {
        color: $darker-text-color;
        color: var(--darker-text-color);
      }

      small {


@@ 255,7 251,7 @@
        font-weight: 400;
        font-size: 15px;
        margin-top: 8px;
        color: $darker-text-color;
        color: var(--darker-text-color);
      }
    }



@@ 263,17 259,17 @@
      &,
      .fa,
      small {
        color: $primary-text-color;
        color: var(--primary-text-color);
      }
    }

    .avatar-stack {
      flex: 0 0 auto;
      width: (36px + 4px) * 3;
      width: 120px;
    }

    &.active .avatar-stack .account__avatar {
      border-color: $ui-highlight-color;
      border-color: var(--ui-highlight-color);
    }
  }
}


@@ 293,7 289,7 @@
  thead th {
    text-align: center;
    text-transform: uppercase;
    color: $darker-text-color;
    color: var(--darker-text-color);
    font-weight: 700;
    padding: 10px;



@@ 305,7 301,7 @@
  tbody td {
    padding: 15px 0;
    vertical-align: middle;
    border-bottom: 1px solid lighten($ui-base-color, 8%);
    border-bottom: 1px solid var(--ui-base-color-lighten-8);
  }

  tbody tr:last-child td {


@@ 317,11 313,11 @@
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: $primary-text-color;
    color: var(--primary-text-color);

    small {
      display: block;
      color: $darker-text-color;
      color: var(--darker-text-color);
      font-weight: 400;
      font-size: 14px;
    }


@@ 330,7 326,7 @@
  tbody td.accounts-table__extra {
    width: 120px;
    text-align: end;
    color: $darker-text-color;
    color: var(--darker-text-color);
    padding-inline-end: 16px;

    a {


@@ 358,19 354,19 @@
    font-size: 16px;

    &.active {
      color: $highlight-text-color;
      color: var(--highlight-text-color);
    }

    &.passive {
      color: $passive-text-color;
      color: var(--passive-text-color);
    }

    &.active.passive {
      color: $active-passive-text-color;
      color: var(--active-passive-text-color);
    }
  }

  @media screen and (max-width: $no-gap-breakpoint) {
  @media screen and (max-width: 1175px) {
    tbody td.optional {
      display: none;
    }


@@ 380,7 376,7 @@
.moved-account-widget,
.memoriam-widget,
.directory {
  @media screen and (max-width: $no-gap-breakpoint) {
  @media screen and (max-width: 1175px) {
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 0;


@@ 391,7 387,7 @@
  a {
    text-decoration: none;
    font-weight: 500;
    color: $ui-highlight-color;
    color: var(--ui-highlight-color);

    &:hover,
    &:focus,