web_writer/assets/bs/versa/_bootswatch.scss

// Versa 5.3.8
// Bootswatch


// Variables

::selection {
  color: $white;
  background-color: $black;
}

$border-dark: rgba(255, 255, 255, .08) !default;

// Mixins

// Tables

.table {
  font-size: $font-size-sm;
}

@include color-mode(dark) {
  body {
    background-color: $body-color;
  }

  .table {
    border-color: $border-dark;

    > :not(caption) * {
      box-shadow: none;
    }

    &-active {
      background-color: $gray-700;
    }
  }
}


// Navbar

.navbar {
  font-weight: $font-weight-medium;

  &.bg-body-tertiary {
    background-color: $white !important;
  }

  .form-control {
    background-color: rgba(0, 0, 0, .04);
    border-width: 0;
  }
}

.nav-link {
  padding-inline: 1rem;
  font-size: $input-btn-font-size;
  border-radius: $border-radius;

  &:hover {
    background-color: rgba(0, 0, 0, .04);
  }
}

[data-bs-theme="dark"] {
  .nav-link {
    &:hover {
      background-color: $border-dark;
    }
  }

  .form-control {
    background-color: $border-dark;
  }

  .dropdown-menu,
  .dropdown-divider {
    color: $light;
    border-color: $border-dark;
  }

  .dropdown-menu {
    background-color: $gray-800;
  }

  .navbar.bg-body-tertiary {
    background-color: $body-color !important;

    .navbar-brand,
    .nav-link {
      color: $light;
    }
  }
}

[data-bs-theme="light"] {

  &.navbar {
    .navbar-brand,
    .nav-link {
      color: $dark;
    }

  }
}

// Buttons

.btn {
  border-color: transparent;
  box-shadow: $box-shadow;

  &-secondary,
  &-outline-secondary {
    &,
    &:hover {
      border-color: $gray-200;
    }

    :not(.btn-check) + &:active {
      border-color: $gray-200;
      border-width: 1px;
    }
  }

  [data-bs-theme="dark"] &-primary {
    background-color: $gray-900;
    border-color: $border-dark;

    &:hover {
      background-color: $gray-800;
    }
  }
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-dark,
.btn-outline-light {
  color: $body-color;
  border-color: $gray-200;
  border-width: 1px;
}

@include color-mode(dark) {

  .btn-primary {
    background-color: $gray-900;
  }

  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-outline-success,
  .btn-outline-info,
  .btn-outline-warning,
  .btn-outline-danger,
  .btn-outline-dark,
  .btn-outline-light {
    color: $white;
    border-color: $border-dark;
  }

  .btn-outline-secondary,
  .btn-outline-light {
    &:hover {
      color: $body-color;
    }
  }

  :not(.btn-group) > .btn-group:has(.btn-primary) {
    border: 1px solid $border-dark;
  }
}

.btn-check + .btn:hover {
  z-index: 0;
  border-color: $gray-200;
}

.btn-check:checked + .btn:hover {
  border-color: $black;
}

@include color-mode(dark) {
  .btn-check:checked + .btn {
    background-color: $gray-800;
    border-color: $border-dark;
  }

  .btn-check + .btn:hover {
    color: $white;
    border-color: $border-dark;
  }

  .btn-check:checked + .btn:hover {
    border-color: $border-dark;
  }
}

.btn-group {
  box-shadow: $box-shadow;

  .btn:first-child {
    border-color: transparent;
    border-width: 0 0 0 1px;
    box-shadow: none;
  }

  .btn-secondary {
    // border-color: $gray-200;

    &:first-child {
      border: 1px solid $gray-200;
    }
  }

  :not(.btn-check) + .btn {
    border-color: $gray-200;
    border-width: 0 0 0 1px;
    box-shadow: none;

    &-secondary {
      // border-color: $gray-200;
      border-width: 1px;
    }

    &:hover {
      z-index: 0;
    }
  }

  [data-bs-theme="dark"] & {

    :not(.btn-check) + .btn {
      border-color: $border-color;

      &:hover {
        border-color: $border-color;
      }
    }
  }
}


// Forms

.input-group {
  border: 1px solid $border-color;
  border-radius: $border-radius;
  box-shadow: $box-shadow;

  .form-control {
    border: none;
    box-shadow: none;
  }
}

@include color-mode(dark) {
  .input-group {
    border-color: $border-dark;
  }
}

.form-control {
  box-shadow: $box-shadow;

  &:disabled {
    &::placeholder {
      color: $input-disabled-color;
    }
  }
}

.form-check-input {
  box-shadow: $box-shadow;
}

.form-range {
  &:disabled::-moz-range-thumb {
    border-color: $border-color;
  }

  [data-bs-theme="dark"] & {

    &::-moz-range-track {
      background-color: $border-dark;
    }

    &:disabled::-moz-range-thumb {
      background-color: $gray-600;
      border: none;
    }
  }
}

// Typography

.blockquote {
  padding-inline: 1.5rem 0;
  margin-bottom: 2rem;
  border-left: 2px solid $gray-200;

  figure.text-center > & {
    padding-inline: 0;
    border: none;
  }

  figure.text-end > & {
    padding-inline: 0 1.5rem;
    border-right: 2px solid $gray-200;
    border-left: none;
  }
}


// Navs

.nav-tabs {
  font-weight: $font-weight-medium;

  .nav-link {
    padding-inline: 1.25rem;
    margin-inline: .25rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .dropdown-menu {
    border-radius: $border-radius;
  }

  [data-bs-theme="dark"] & {

    .nav-link {
      color: $gray-500;

      &.active {
        color: $white;
      }
    }
  }
}

@include color-mode(dark) {
  .nav-tabs {
    border-color: $border-dark;
    border-width: 1px;

    .nav-link {
      &.active,
      &:hover {
        border-top-color: $border-dark;
        border-right-color: $border-dark;
        border-bottom-color: transparent;
        border-left-color: $border-dark;
      }
    }
  }
}

.nav-pills {
  padding: .25rem .1rem;
  font-weight: $font-weight-medium;
  background-color: $gray-100;
  border-radius: $border-radius;

  .nav-link {
    padding-inline: 1.25rem;
    margin-inline: .25rem;

    &:hover {
      background: none;
    }

    &.active {
      box-shadow: $box-shadow;
    }
  }

  .dropdown-menu {
    border-radius: $border-radius;
  }

  [data-bs-theme="dark"] & {
    background-color: $gray-900;
    border-color: $border-dark;

    .nav-link {
      color: $gray-500;

      &:hover {
        background-color: $gray-800;
      }

      &.active {
        color: $white;
        background-color: $gray-800;
        border: 1px solid $border-dark;
      }
    }
  }
}

.tab-content {
  padding: 1rem;
}

.nav-underline {
  font-weight: $font-weight-medium;

  .nav-link {
    padding-inline: 1rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    &.active {
      font-weight: $font-weight-medium;
    }
  }
}

.page-link {
  margin-inline: .375rem;
  border-radius: $border-radius;

  .active > & {
    box-shadow: $box-shadow;

    &:hover {
      background-color: $gray-100;
    }
  }
}

.dropdown-menu {
  box-shadow: $box-shadow-lg;
}

.dropdown-item {
  width: calc(100% - 1rem);
  margin-inline: .5rem;
  border-radius: $border-radius-sm;
}


@include color-mode(dark) {
  .dropdown-header {
    color: $gray-500;
  }

  .blockquote {
    border-left: 2px solid $border-dark;
  }
}

.breadcrumb {
  a {
    color: $gray-600;
    text-decoration: none;

    &:hover {
      color: $body-color;
    }
  }

  [data-bs-theme="dark"] & {

    .breadcrumb-item {
      color: $gray-500;

      &.active {
        color: $white;
      }
    }
  }
}

.breadcrumb-item + .breadcrumb-item::before {
  font-weight: $font-weight-bold;
}

.pagination {

  [data-bs-theme="dark"] & {

    .page-link {
      color: $gray-500;
    }

    .active > .page-link {
      color: $white;
      background-color: $gray-800;
      border-color: $border-dark;
    }
  }
}

// Indicators

.alert {
  font-size: $font-size-sm;
  background: none;
  border-color: $border-color;
  border-radius: $border-radius-lg;

  &.alert-primary {
    color: $primary;
  }

  &.alert-success {
    color: $success;
  }

  &.alert-warning {
    color: $warning;
  }

  &.alert-danger {
    color: $danger;
  }

  &.alert-info {
    color: $info;
  }

  [data-bs-theme="dark"] & {
    background-color: $gray-800;
    border-color: $border-dark;
  }
}

@include color-mode(dark) {
  .alert {
    background-color: $gray-900;

    &.alert-primary {
      color: $white;
    }
  }
}

.alert-link {
  font-weight: inherit;
  color: inherit;
}

.badge {
  &.bg-secondary,
  &.bg-light {
    color: $gray-900;
  }

  &.bg-light {
    border: 1px solid $gray-200;
  }
}

.card {
  box-shadow: $box-shadow-lg;

  &.bg-primary,
  &.bg-success,
  &.bg-danger,
  &.bg-warning,
  &.bg-info {
    color: $white;
  }
}

.list-group,
.accordion {
  font-size: $font-size-sm;
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

.tooltip {
  font-weight: $font-weight-light;
}

.popover,
.toast {
  box-shadow: $box-shadow-lg;
}

.modal-content {
  box-shadow: $box-shadow-lg;
}

.offcanvas {
  padding: $offcanvas-padding-y $offcanvas-padding-x;
}

.vr {
  background-color: $gray-200;
}

@include color-mode(dark) {
  .list-group {
    &-item {
      border-color: $border-dark;
    }
  }

  .accordion {
    &-item {
      border-color: $border-dark;
    }
  }

  .accordion-button:not(.collapsed) {
    color: $white;
  }

  .modal {
    &-header,
    &-footer {
      border-color: $border-dark;
    }
  }

  .toast {
    &-header {
      color: $white;
    }
  }
}