ngx-admin/src/app/pages/dashboard/security-cameras/security-cameras.component.scss

@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@import '~bootstrap/scss/mixins/breakpoints';

@include nb-install-component() {
  nb-card-header {
    padding: 0;
    border: none;
  }

  nb-card-body {
    padding: 0;
    position: relative;
  }

  nb-card-footer {
    padding: 1rem 0;
    border: none;
  }

  .cameras-card-header {
    display: flex;

    .cameras-card-title {
      flex: 1;
      padding: 1.25rem;
    }
  }

  .cameras-filter {
    display: flex;

    a {
      font-size: 2.5rem;
      padding: 0 0.75rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: nb-theme(color-fg);
    }

    a:first-child {
      @include nb-ltr(border-left, 1px solid nb-theme(separator));
      @include nb-rtl(border-right, 1px solid nb-theme(separator));
    }

    a:last-child {
      @include nb-ltr(border-top-right-radius, nb-theme(card-border-radius));
      @include nb-rtl(border-top-left-radius, nb-theme(card-border-radius));
    }

    a.active {
      background-color: nb-theme(color-bg-active);
      color: nb-theme(color-fg-heading);
      border: none;
    }
  }

  .cameras {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
  }

  .cameras.single-view {
    .camera {
      height: 100%;
      width: 100%;

      &::before {
        height: 100%;
      }
    }
  }

  .camera {
    position: relative;
    background-position: center;
    background-size: cover;
    height: 50%;
    padding: 0;

    span {
      position: absolute;
      bottom: 0;
      width: 100%;
      color: white;
      background: rgba(0, 0, 0, 0.4);
      font-family: nb-theme(font-secondary);
      font-weight: nb-theme(font-weight-bolder);
      font-size: 1.25rem;
      padding: 0.5rem 1rem;
    }

    &::before {
      background-color: rgba(255, 255, 255, 0.1);
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 1;
    }

    &:hover::before {
      opacity: 0;
    }
  }

  nb-action {
    padding: 0 0.5rem 0 0;

    i {
      color: nb-theme(color-fg);
      font-size: 3rem;
      margin-right: 0.5rem;

      @include nb-for-theme(corporate) {
        color: nb-theme(actions-fg);
      }
    }

    span {
      font-family: nb-theme(font-secondary);
      font-weight: nb-theme(font-weight-bold);
      color: nb-theme(color-fg-heading);
      text-transform: uppercase;
    }
  }

  @include nb-for-theme(cosmic) {
    .cameras-filter a.active {
      color: nb-theme(color-fg-highlight);
    }

    .camera {
      span {
        background: rgba(88, 73, 184, 0.5);
      }

      &::before {
        background-color: rgba(0, 0, 0, 0.2);
      }
    }

    nb-action span {
      font-weight: nb-theme(font-weight-bolder);
    }
  }

  @include nb-for-theme(corporate) {
    .cameras-filter a {
      &.active {
        color: nb-theme(color-primary);
      }

      &:first-child {
        @include nb-ltr(border-left, 1px solid nb-theme(border-color));
        @include nb-rtl(border-right, 1px solid nb-theme(border-color));
      }
    }
  }

  @include media-breakpoint-down(lg) {
    nb-action {
      padding: 0;
      i {
        margin: 0;
      }
      span {
        display: none;
      }
    }
  }
}