style.scss

/**
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this plugin in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/OSL-3.0
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade the plugin to
 * newer versions in the future. If you wish to customize the plugin for
 * your needs please document your changes and make backups before you update.
 *
 *
 * @copyright Copyright (c) 2020-2021 GriefMoDz
 * @license   OSL-3.0 (Open Software License ("OSL") v. 3.0)
 * @link      https://github.com/GriefMoDz/better-status-indicators
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/** General **/
.bsi-clientStatuses, .bsi-statusIcon {
  display: inline;
}

.bsi-clientStatuses svg, .bsi-statusIcon {
  color: var(--channels-default);
  margin-left: 4px;
  vertical-align: -.5px;
}

.status-12NUUC ~ .divider-q3P9HC {
  margin-left: 0;
}

.status-12NUUC ~ .bsi-clientStatuses {
  margin-right: 8px;
  display: flex;

  .icon-1dGlZy:first-of-type {
    margin-left: 0;
  }

  .icon-1dGlZy {
    margin-left: 6px;
  }
}

.status-12NUUC ~ .bsi-statusIcon {
  margin-right: 6px;
  margin-left: 0;
}

.peopleListItem-u6dGxF .userInfo-2WpsYG {
  .bsi-clientStatuses, .bsi-statusIcon {
    visibility: hidden;
  }

  &.hovered-1EO01j {
    .bsi-clientStatuses, .bsi-statusIcon {
      visibility: visible;
    }
  }
}

.message-2CShn3 .avatar-2e8lTP {
  overflow: visible;

  &::before {
    display: inline;
  }

  &.bsi-reduced-statuses {
    &[data-bsi-mobile-avatar-status='false'] {
      foreignObject:not([mask*='#svg-mask-avatar-default']) {
        &[mask*='#svg-mask-avatar-status-mobile'] {
          mask: url(#svg-mask-avatar-status-round-80);

          &+ rect {
            width: 9px;
            height: 9px;
            x: 29.5;
            y: 29.5;
          }
        }
      }
    }

    foreignObject:not([mask*='#svg-mask-avatar-default']) {
      &[mask*='#svg-mask-avatar-status-mobile'] {
        mask: url(#svg-mask-avatar-status-mobile-80);

        &+ rect {
          width: 10px;
          height: 14px;
          x: 29;
          y: 25;
        }
      }

      &[mask*='#svg-mask-avatar-status-typing'] {
        mask: url(#svg-mask-avatar-status-typing-80);

        &+ rect {
          width: 18px;
          height: 9px;
          x: 24;
          y: 29.5;

          + svg circle {
            r: 1.5;

            @for $i from 0 to 3 {
              &:nth-child(#{$i + 1}) {
                cy: 3.5;
                cx: 4.5 * ($i + 1);
              }
            }
          }
        }
      }

      &:not([mask*='#svg-mask-avatar-status-mobile']):not([mask*='#svg-mask-avatar-status-typing']) {
        mask: url(#svg-mask-avatar-status-round-80);

        &+ rect {
          width: 9px;
          height: 9px;
          x: 29.5;
          y: 29.5;
        }
      }
    }
  }
}

$avatar-statuses: (
  "online",
  "idle",
  "dnd",
  "streaming",
  "invisible"
);

@mixin avatarStatusCutout ($width: 32, $height: 10px, $x: 22, $y: 22, $avatar-status: false, $mask: avatar-default) {
  @each $status in $avatar-statuses {
    .wrapper-1VLyxH[data-bsi-mobile-avatar-status='#{$avatar-status}'][data-bsi-status='#{$status}'] {
      &[data-bsi-radial-status='true'] {
        + svg > foreignObject[width='#{$width}'] {
          &:not([mask*='#{$mask}']) {
            mask: url(#svg-mask-avatar-default);
          }
        }
      }

      foreignObject[width='#{$width}'] {
        &:not([mask*='#{$mask}']) {
          mask: url(#svg-mask-avatar-status-round-#{$width});
        }

        &::after {
          display: none !important;
        }

        + rect {
          mask: url(#svg-mask-status-#{$status});
          height: $height;
          x: $x;
          y: $y;
        }
      }

      + svg > foreignObject[width='#{$width}'] {
        &:not([mask*='#{$mask}']) {
          mask: url(#svg-mask-avatar-status-round-#{$width});
        }
      }
    }
  }
}

@include avatarStatusCutout();
@include avatarStatusCutout(40, 12px, 28, 28);
@include avatarStatusCutout(80, 16px, 60, 60);
@include avatarStatusCutout(120, 24px, 88, 88);

$statuses: (
  "online",
  "idle",
  "dnd",
  "offline",
  "invisible",
  "streaming",
  "unknown"
);

.bsi-theme-variables {
  #bsi-status-preview .status-menu-item[data-status='invisible']:not(.focused-3qFvc8),
  #status-picker-invisible:not(.focused-3qFvc8),
  .popout-VcNcHB [data-list-item-id$='invisible'] {
    .status-2DiCMd {
      background-color: var(--bsi-invisible-color) !important;
    }
  }

  .wrapper-1VLyxH[data-bsi-status='invisible'] rect[mask='url(#svg-mask-status-offline)'] {
    fill: var(--bsi-invisible-color) !important;
  }
}

@each $status in $statuses {
  .bsi-theme-variables {
    .bsi-clientStatuses, .bsi-statusIcon {
      svg[data-bsi-status=#{$status}] {
        path {
          @if $status == unknown {
            fill: var(--bsi-offline-color) !important;
          } @else {
            fill: var(--bsi-#{$status}-color) !important;
          }
        }
      }
    }

    .wrapper-1VLyxH {
      &[data-bsi-status=#{$status}] {
        rect[mask='url(#svg-mask-status-typing)'],
        rect[mask='url(#svg-mask-status-online-mobile)'],
        rect[mask='url(#svg-mask-status-#{$status})']:not([fill='#ffffff']) {
          @if $status == unknown {
            fill: var(--bsi-offline-color);
          } @else {
            fill: var(--bsi-#{$status}-color);
          }
        }

        .bsi-avatarRadial {
          @if $status == unknown {
            --status-color: var(--bsi-offline-color) !important;
          } @else {
            --status-color: var(--bsi-#{$status}-color) !important;
          }
        }
      }
    }

    .status-12NUUC svg[data-bsi-status=#{$status}] > rect {
      fill: var(--bsi-#{$status}-color) !important;
    }

    foreignObject[mask='url(#svg-mask-status-#{$status})'] div:not([style*='background-color: currentcolor;']) {
      background-color: var(--bsi-#{$status}-color) !important;
    }
  }
}

/** Plugin Compatibility **/

/* BDFDB */
.supporter-Z3FfwL.hasBadge-4rT8_u:not(.customSupporter-thxL4U) {
  .avatar-1BDn8e {
    left: initial;
    margin-top: initial;
  }

  width: 40px;
  height: 40px;
  left: 16px;
  position: absolute;
}

/** Theme Compatibility **/

/* Settings Icons */
.side-2ur1Qk > .item-3XjbnG[data-item-id='better-status-indicators'] {
  white-space: initial;
}

/* Radial Status */
$status-colors: (
  "online": #3ba55c,
  "idle": #faa61a,
  "dnd": #ed4245,
  "offline": #747f8d,
  "invisible": #747f8d,
  "streaming": #593695
);

.message-2CShn3 .wrapper-1VLyxH foreignObject[mask*='mobile'][width='40'] img {
  width: 40px;
}

.wrapper-1VLyxH[data-bsi-radial-status='true'] {
  .bsi-avatarRadial {
    box-shadow: inset 0 0 0 var(--outline-size) var(--status-color),
      inset 0 0 0 var(--avatar-inset) var(--background-secondary);
    border-radius: 50%;

    width: 100%;
    height: 100%;
    grid-area: 1 / 1;
  }

  img {
    border-radius: 50%;
  }

  &:not([data-bsi-client-avatar-status]) + svg > foreignObject[mask='url(#svg-mask-avatar-status-round-80)'] {
    mask: url(#svg-mask-avatar-default);
  }
}

@each $status, $color in $status-colors {
  $status-color: var(--rs-#{$status}-color, $color) !important;

  .wrapper-1VLyxH[data-bsi-status='#{$status}'] {
    foreignObject[mask*='mobile']:after {
      background: $status-color;
    }
  }
}

/** Settings **/
.bsi-settings {
  &-title {
    margin-bottom: 0;
  }

  &-tab-bar {
    margin-bottom: 25px;

    .selected-g-kMVV {
      cursor: pointer !important;
    }
  }

  &-tab-bar ~ .divider-_0um2u {
    margin-bottom: 20px;
  }

  &-tab-bar ~ div > [data-list-id='color-picker'] {
    margin-top: 10px;
    animation: fade-in 1.5s;
  }

  &-status-display-title {
    margin-bottom: 8px;
    font-family: var(--font-primary);
  }

  &-card, &-module-card {
    &:hover {
      .icon-3TvnqF {
        color: var(--interactive-hover);
      }
    }

    &:active {
      .icon-3TvnqF {
        color: var(--interactive-active);
      }
    }

    .icon-3TvnqF {
      margin-left: 1px;
    }
  }

  &-module-card {
    div[role='radiogroup'] > div:not([aria-checked='true']):not(:hover) {
      background-color: var(--background-secondary-alt);
    }
  }

  &-card {
    &:hover {
      background: var(--background-modifier-hover) !important;

      .icon-3TvnqF {
        color: var(--interactive-hover);
      }
    }

    &:active {
      background: var(--background-modifier-active) !important;

      .icon-3TvnqF {
        color: var(--interactive-active);
      }
    }
  }

  .breadcrumbs--Y6d8N + &-status-display-title {
    margin: 0 0 8px 0;
  }
}

.bsi-settings-slider {
  margin: 10px 5px 0;
  width: calc(100% - 15px);
}

.bsi-settings-slider [class|='markValue'] {
  white-space: nowrap;
}

.bsi-settings-avatar-preview {
  width: 100%;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  border: none;
}

html.reduce-motion {
  .bsi-settings-tab-bar ~ div > [data-list-id='color-picker'] {
    animation: fade-in .5s;
  }

  #bsi-status-preview {
    transition: width .25s ease-in-out;
  }
}

.bsi-reset-colors-button {
  width: 100%;
  font-size: 13px;
}

/* Status Preview */
#bsi-status-preview {
  width: 190px;
  display: block;
  padding: 3px 8px;
  transition: width .45s ease-in-out;

  &.animate {
    width: 170px;
  }

  .separator {
    margin: 4px;
    border-bottom: 1px solid var(--background-modifier-accent);
    box-sizing: border-box;
  }

  .status-active {
    color: #fff;
    background-color: var(--background-modifier-hover);
  }

  .status-icon {
    grid-area: icon;
  }

  .status-text {
    grid-area: status span 2;
  }

  .status-menu-item {
    margin: 5px 0;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    cursor: default;
  }

  .status-item {
    display: grid;
    grid-template-areas:
      "icon status"
      ". description";
    grid-template-rows: 24px 1fr;
    grid-template-columns: 24px 1fr;
    align-items: center;
    width: 100%;
    padding: 4px 8px;
    min-height: 24px;
  }
}

.bsi-button-text-input {
  margin-bottom: 5px;

  [type=button]:not([class*='disabled']) div {
    text-overflow: unset;
    overflow: visible;
  }

  &:focus-within, &:hover {
    [type=button]:not([class*='disabled']) {
      width: 160px !important;
    }
  }

  &:not([class*='disabled']) {
    &:focus-within, &:hover {
      border-color: rgba(114, 137, 218, .3);
    }
  }
}

/** Animations **/
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}