src/themes/jround.scss
@use '../scss/variables' as var;

body[data-theme='jround'] {
  // global
  --color-fg: var(--color-theme-fg);
  --color-bg: var(--color-theme-bg);
  --shadow: 0 0 0.04rem #000000;
  --icon-color: var(--color-fg);
  --icon-shadow: 0 0 0.04rem rgba(0, 0, 0, 0.6);
  --border-radius: 0.11rem;
  --border-radius-inner: 0.07rem;

  // combatant
  --color-combatant-fg: var(--color-fg);
  --shadow-combatant: var(--shadow);

  // encounter
  --color-encounter-fg: var(--color-fg);
  --color-encounter-bg: var(--color-bg);
  --color-cover-fg: var(--color-fg);
  --color-cover-fg-active: var(--color-fg);
  --color-cover-bg: var(--color-bg);
  --color-cover-bg-active: var(--color-cover-bg);
  --shadow-encounter: var(--shadow);
  --shadow-encounter-active: var(--shadow);

  // settings
  --color-settings-fg: var(--color-fg);
  --color-settings-bg: var(--color-theme-bg);
  --color-settings-tab-fg: var(--color-fg);
  --color-settings-tab-bg: var(--color-bg);
  --color-settings-tab-fg-active: #ffffff;
  --color-settings-tab-bg-active: var(--color-theme-bga);
  --shadow-settings: var(--shadow);
  --shadow-settings-tab: var(--shadow);
  --shadow-settings-tab-active: var(--shadow);

  // components
  --color-form-fg: var(--color-fg);
  --color-form-fg-active: var(--color-theme-bga);
  --color-form-fg-disabled: rgba(255, 255, 255, 0.7);
  --color-form-fg-selection: var(--color-fg);
  --color-form-bg: var(--color-theme-bga);
  --color-form-bg-active: #eeeeee;
  --color-form-bg-disabled: var(--color-form-bg);
  --color-form-bg-selection: rgba(32, 149, 243, 0.5);
  --shadow-form: none;
  --shadow-form-active: none;
  --shadow-form-selection: none;

  // extends
  .combatants {
    .combatant {
      background-color: var(--color-bg);
      padding: 0 0.04rem;
      margin: 0 0.06rem;
      border-radius: var(--border-radius);

      &-content {
        border-radius: var(--border-radius-inner);
      }

      &-name {
        padding-bottom: 0.04rem;
        margin-bottom: 0.01rem;
      }

      & .combatant-name {
        padding-top: 0.04rem;
        border-radius: var(--border-radius-inner);
      }

      &.jobtype-tank {
        & .combatant-name {
          background-color: var(--color-jobtype-tank);
        }

        &.job-self {
          box-shadow: 0 0 0.1rem 0.06rem var(--color-jobtype-tank);
        }
      }

      &.jobtype-dps {
        & .combatant-name {
          background-color: var(--color-jobtype-dps);
        }

        &.job-self {
          box-shadow: 0 0 0.1rem 0.06rem var(--color-jobtype-dps);
        }
      }

      &.jobtype-healer {
        & .combatant-name {
          background-color: var(--color-jobtype-heal);
        }

        &.job-self {
          box-shadow: 0 0 0.1rem 0.06rem var(--color-jobtype-heal);
        }
      }

      &-detail {
        margin: 0.08rem 0.04rem 0 0.04rem;
        border-radius: var(--border-radius);
      }
    }
  }

  .encounter {
    padding-top: 0.08rem;

    & > div {
      border-radius: var(--border-radius);
      overflow: hidden;
    }

    &-duration {
      flex: 0 0 var.$size-form * 2 + 0.03rem;
      width: var.$size-form * 2 + 0.03rem;
      margin-right: 0.08rem;
    }
    &-btns {
      margin-left: 0.08rem;
    }
    &-btn:first-child {
      padding-left: 0.02rem;
    }
    &-btn:last-child {
      padding-right: 0.02rem;
    }
  }

  .settings {
    margin-top: 0.08rem;
    border-radius: var(--border-radius);
    background-color: transparent;

    &-tab {
      border-radius: var(--border-radius);

      &item:first-child {
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
      }
      &item:last-child {
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
      }
    }

    &-content {
      margin-top: 0.06rem;
      background-color: var(--color-settings-bg);
      border-radius: var(--border-radius);
    }

    &-btn {
      border-radius: var(--border-radius-inner);
    }

    &-history-row {
      border-radius: var(--border-radius-inner);
      margin-left: var.$padding-lg;
      margin-right: var.$padding-lg;
    }
  }

  .s-ticker {
    border-radius: 0.02rem;
    overflow: hidden;
  }

  .s-select,
  .s-select-value,
  .s-switch,
  .s-input-number,
  .s-input,
  .s-select-options,
  .s-input-color-swatch {
    border-radius: var(--border-radius-inner);
  }
  .s-switch-btn:first-child {
    border-top-left-radius: var(--border-radius-inner);
    border-bottom-left-radius: var(--border-radius-inner);
  }
  .s-input-inner,
  .s-switch-btn:last-child {
    border-top-right-radius: var(--border-radius-inner);
    border-bottom-right-radius: var(--border-radius-inner);
  }
  .s-select-option:first-child {
    border-top-left-radius: var(--border-radius-inner);
    border-top-right-radius: var(--border-radius-inner);
  }
  .s-select-option:last-child {
    border-bottom-left-radius: var(--border-radius-inner);
    border-bottom-right-radius: var(--border-radius-inner);
  }
}
