sc-portal/app/src/styles/styles.scss

@import "_variables.scss";

html, body
{
  margin: 0;
  width: 100%;
  height: 100%;
}

body
{
  background-color: #090b17;
  color: #3d5e8e;
  font-family: 'Mukta', sans-serif;
  line-height: 1;
}

body, div, virtual-scroller
{
  scrollbar-width: thin;
  scrollbar-color: #ff9c07 rgba(16, 21, 39, .3);
}

::-webkit-scrollbar
{
  height: 8px;
  width: 8px;
  background: rgba(16, 21, 39, .5);
}

::-webkit-scrollbar-thumb
{
  background: #ff9c07;
  border-radius: .25rem;
}

::-webkit-scrollbar-track
{
}

.btn
{
  border-radius: 2rem;
  line-height: 1.2;
  font-family: "Bebas Neue", sans-serif;

  &.btn-info, &.btn-outline-info, &.text-info
  {
    &:focus
    {
      box-shadow: 0 0 .75rem -.1rem #00e7ff, 0 0 0.25rem #00e7ff, 0 0 3rem -1.25rem #00e7ff inset;
      /*border-color: #00e7ff;*/
    }
  }
}

.btn:not(.btn-lg):not(.btn-sm)
{
  font-size: 1.2rem;
  padding: .375rem .5rem .3rem;
}

.btn-group-sm .btn:not(.btn-lg):not(.btn-sm)
{
  padding: 0 .25rem;

  &:active, &:focus
  {
    box-shadow: none;
  }
}

.btn.btn-lg
{
  font-size: 1.45rem;
  padding-bottom: .35rem;
  line-height: 1;
}

.btn-primary
{
  background: linear-gradient(135deg, #4488c7 0%, #006ee4 100%);
  color: #FFF;
  text-shadow: 0px 0px 5px rgba(3,51,103,.75);
}

.btn-success
{
  background: linear-gradient(135deg, #44bb53 0%,#169833 100%);
  color: #FFF;
  text-shadow: 0px 0px 5px #19752e;
}

.btn-info
{
  color: #000;
  background: linear-gradient( 135deg, #1fd1f5 0%, #00c3ea 100%);
  border-color: transparent;
}

.modal
{
  backdrop-filter: blur(6px);
  z-index: 1040;
}

.modal-backdrop
{
  background-color: rgb(1, 10, 14);
}

.modal-content
{
  background: linear-gradient( 135deg, #00e7ff 0%, #00e7ff 100%);
  box-shadow: 0rem 0rem 3rem -2rem #00e7ff;
  border: none;
  border-radius: .5rem;
  overflow: hidden;

  .content
  {
    height: calc(100% - 4px);
    margin: 2px;
    padding: 1rem;
    background: linear-gradient( 135deg, #10182b 0%, #0d1321 100%);
    color: #00dcff;
    border-radius: 0.35rem;

    h4
    {
      color: #3d5e8e;
      font-family: "Bebas Neue", sans-serif;
    }
  }
}

.close
{
  position: absolute;
  right: .25rem;
  top: 0;
  padding: .75rem 1rem;
  font-weight: bold;
  z-index: 1;
  outline: none;
  border: none;
  background: none;
  font-size: 2rem;
  color: #3d5e8e;
}

.ngx-datatable
{
  height: calc(100% - 1rem);
  box-shadow: 0 0 0 1px #0d101d;
  background-color: rgba(16, 21, 39, .5);

  .datatable-header, .datatable-body-cell
  {
    padding: 0 .75rem;
  }

  .datatable-body
  {
    padding: .75rem 0;
  }

  .datatable-header, .datatable-footer
  {
    font-family: "Bebas Neue", sans-serif;
    font-variant: small-caps;
    text-transform: lowercase;
    font-size: 1.75rem;
    color: #A3A4B8;
    background-color: rgba(16, 21, 39, .5);
  }

  .datatable-footer
  {
    padding: 0 0 0 .75rem;

    .datatable-pager
    {
      flex: 1 1 80%;
      text-align: right;
      margin: 0 10px;

      li a
      {
        color: #A3A4B8;
        cursor: pointer;
        display: inline-block;
        font-family: "Bebas Neue", sans-serif;
        height: 22px;
        min-width: 24px;
        line-height: 22px;
        padding: 0 6px;
        border-radius: 3px;
        margin: 6px 3px;
        text-align: center;
        vertical-align: top;
        text-decoration: none;
        vertical-align: bottom;
      }

      li.active a
      {
        color: #0e2744;
        background-color: #ff9c07;
        font-weight: bold;
        line-height: 1;
      }

      li, a
      {
        outline: none;
        font-size: 1.5rem;
      }

      .pager, li
      {
        padding: 0;
        margin: 0;
        display: inline-block;
        list-style: none;
      }
    }
  }

  .text-right
  {
    .datatable-header-cell-template-wrap,
    .datatable-body-cell-label
    {
      text-align: right;
    }

    .datatable-header-cell-template-wrap
    {
      padding-right: 1.5rem;
    }
  }

  .datatable-header-cell.sort-active
  {
    color: #ff9c07;
  }

  .datatable-header .datatable-header-cell .sort-btn
  {
    vertical-align: sub !important;
  }

  .empty-row
  {
    padding: 0 1rem;
    font-variant: all-small-caps;
  }
}

.os
{
  background: url('../assets/images/os.png') no-repeat;
  height: 16px;
  width: 16px;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;

  > span
  {
    margin-left: 19px;
  }

  &.smartos
  {
    background-position: 0 0;
  }

  &.windows
  {
    background-position: -16px 0;
  }

  &.linux
  {
    background-position: -32px 0;
  }

  &.bsd
  {
    background-position: -48px 0;
  }
}

.tooltip-wrap .tooltip-inner
{
  white-space: pre-line;
}

.form-floating > label
{
  padding: 1.25rem .75rem;
  opacity: .65;
}

.navbar-nav .nav-link
{
  padding-right: .5rem;
  padding-left: .5rem;
}

.text-danger
{
  color: $danger-color !important;
}

.border-danger
{
  border-color: $danger-color !important;
}

.text-success
{
  color: $success-color !important;
}

.border-success
{
  border-color: $success-color !important;
}

.badge.bg-success
{
  background-color: $success-color !important;
  box-shadow: 0 0 1.5rem -0.35rem $success-color;
  color: #000;
}

.badge.bg-danger
{
  background-color: #dc3545 !important;
  box-shadow: 0 0 1.5rem -0.35rem #ff384b;
  color: #000;
}

.badge.bg-light
{
  background-color: #FFF !important;
  box-shadow: 0 0 1.5rem -0.35rem #FFF;
  color: #000;
}

.toast-container
{
  padding-bottom: 2rem;

  .ngx-toastr
  {
    box-shadow: 0 0 6px #000;
  }
}

.dashboard-tabs
{
  display: flex;
  flex-direction: column;
  height: 100%;

  .dashboard-tab .nav-link
  {
    background: none;
    border-radius: 0;
    border: none;
    font-family: "Bebas Neue", sans-serif;
    text-align: center;
    color: #0dcaf0;
    width: 100%;
  }

  .dashboard-tab .nav-link.active
  {
    background: none;
    border-bottom: 3px solid;
    text-shadow: 0 0 0.5rem;
    box-shadow: 0 -1rem 1rem -1.25rem inset;
  }

  .dashboard-tab.nav-item
  {
    flex: 1 0;
  }

  .nav-tabs
  {
    border: none;
  }

  .tab-content
  {
    flex-grow: 1;

    .tab-pane
    {
      height: 100%;
    }
  }
}

.tooltip-inner
{
  border: 1px solid #fe6daa;
  background-color: #ff4d99;
  color: #FFF;
}


.bs-tooltip-top .tooltip-arrow:before
{
  border-top-color: #fe6daa;
}

.dropdown-menu
{
  .dropdown-item
  {
    padding: .5rem 1rem;

    &:focus, &:hover
    {
      color: #1e2125;
      background-color: rgba(255,255,255,.75);
    }

    &.active, &:active
    {
      color: #0dcaf0;
      background-color: #101a30;
    }

    .ng-fa-icon
    {
      font-size: 1rem;
      vertical-align: middle;
    }
  }
}

.panel
{
  + .panel
  {
    margin-top: 2rem;
  }

  .card
  {
    background-color: rgba(16, 21, 39, 0.75);
    box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px #0b284b, 0 0 10px 3px #0e162a;
    transition: box-shadow .15s ease-out;

    &:hover
    {
      box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px rgba(18, 203, 240, .4), 0 0 10px 3px #0e162a;
    }

    .card-header
    {
      background-color: rgba(16, 21, 39, 0.75);
      border-bottom: none;
      padding: .5rem .75rem;
    }

    .card-body
    {
      padding: 0;
    }
  }
}

.text-faded
{
  opacity: .75;
}

.form-check-label
{
  text-transform: uppercase;
  color: #0dcaf0;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.2rem;
  vertical-align: middle;
}

.form-switch .form-check-input
{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%230dcaf0'%2F%3E%3C%2Fsvg%3E");
  background-color: transparent;
  border-color: #0dcaf0;
  margin-top: 0;
  transition: all .15s cubic-bezier(0, .8, .2, 1);

  &:focus
  {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%230dcaf0'%2F%3E%3C%2Fsvg%3E");
  }

  &:checked
  {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%2310182b'%2F%3E%3C%2Fsvg%3E");
    background-color: #0dcaf0;
    box-shadow: 0 0 0 1px #10182b inset;

    &:focus
    {
      box-shadow: 0 0 0 1px #10182b inset, 0 0 0 0.25rem rgba(13, 110, 253, .25);
    }
  }
}

.form-switch
{
  min-height: auto;
}

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus
{
  -webkit-text-fill-color: #ff9c07 !important; // Hack because color cannot be overridden
  -webkit-box-shadow: 0 0 0px 1000px #0f1626 inset; // Hack because background-color cannot be overridden
}

.form-control, .form-select
{
  border-color: rgb(0 231 255 / 75%);
  background-color: transparent;
  color: #ff9c07;
  border-radius: 3rem;

  &:focus, &:active
  {
    background-color: transparent;
    color: #ff9c07;
  }

  &:focus
  {
    border-color: #00e7ff;
    box-shadow: 0 0 .75rem -.1rem #00e7ff, 0 0 0.25rem #00e7ff, 0 0 .5rem -.25rem #00e7ff inset;
  }

  &:disabled, &[readonly]
  {
    background-color: transparent;
    color: rgba(255, 156, 7, .5);
    border-color: rgba(0, 231, 255, .25);
  }

  &::placeholder
  {
    color: rgba(13, 202, 240, .35);
  }

  &:-ms-input-placeholder
  {
    color: rgba(13, 202, 240, .35);
  }

  &::-ms-input-placeholder
  {
    color: rgba(13, 202, 240, .35);
  }
}

.form-select
{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230596b2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

  option
  {
    background: #11182b;
  }
}

@media (min-width: 576px) and (max-width: 992px)
{
  .modal-dialog.modal-xl
  {
    max-width: 762px;
  }
}

virtual-scroller
{
  flex-grow: 1;

  .scrollable-content
  {
  }

  &.instances .scrollable-content
  {
    max-width: 100%;
    width: auto;
    height: auto;
    padding-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: -1rem;
    /* margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x)/ -2);
    margin-left: calc(var(--bs-gutter-x)/ -2); */
    --bs-gutter-y: 2rem;
    position: relative;

    > *
    {
      flex-shrink: 0;
      max-width: 100%;
      padding-right: calc(var(--bs-gutter-x)/ 2);
      padding-left: calc(var(--bs-gutter-x)/ 2);
      margin-top: var(--bs-gutter-y);
    }
  }
}

@media (min-width: 576px)
{
  virtual-scroller.instances .scrollable-content
  {
    --bs-gutter-x: 1.5rem;
  }

  .flex-grow-sm-0
  {
    flex-grow: 0 !important;
  }

  .w-sm-auto
  {
    width: auto !important;
  }
}

@media (max-width: 576px)
{
  virtual-scroller.instances .scrollable-content
  {
    --bs-gutter-y: 1.5rem;
  }
}

accordion
{
  .panel-heading
  {
    position: sticky;
    top: 0;
    z-index: 1010;
  }
}

.tooltip-inner
{
  max-width: 300px;
}

.dropdown-menu, .menu-popover, .menu-dropdown
{
  background: linear-gradient(135deg, #1fd1f5 0%, #00c3ea 100%);
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.2rem;
  z-index: 1020;
  max-height: 50vh;
  overflow: auto;
}

.dropdown-header
{
  color: #11182b;
  opacity: .5;
}

.menu-popover, .menu-dropdown
{
  .popover-arrow
  {
    display: none;
  }

  .dropdown-header
  {
    padding: 0;
  }
}

.menu-popover
{
  .dropdown-divider
  {
    margin: 1rem 0;
  }

  .btn
  {
    color: #11182b;
    border-color: #11182b;

    &:hover, &:active
    {
      color: #10caf0;
      background-color: #11182b;
    }

    &:focus
    {
      box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, .5)
    }
  }

  .form-control
  {
    border-color: #11182b;
    background: #11182b;
    box-shadow: 0 0 0 1px rgb(0 231 255 / 75%) inset;
    padding: .5rem .75rem .375rem;
  }

  .form-switch
  {
    display: inline-flex;
    align-items: center;
    color: #11182b;

    .form-check-input
    {
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%2310182b'%2F%3E%3C%2Fsvg%3E");
      background-color: transparent;
      border-color: #0dcaf0;
      margin-top: 0;
      margin-right: .5rem;
      box-shadow: 0 0 0 1px #10182b inset;

      &:focus
      {
        box-shadow: 0 0 0 1px #10182b inset, 0 0 0 0.25rem rgba(11, 172, 204, .5);
      }

      &:checked
      {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%23ff9c07'%2F%3E%3C%2Fsvg%3E");
        background-color: #10182b;
        border-color: #10182b;
      }
    }
  }

  .ngx-slider
  {
    .ngx-slider-pointer
    {
      background-color: #10182c;

      &:after
      {
        background: #14ccf1;
      }

      &:focus
      {
        outline: none;
        box-shadow: 0 0 0.75rem -0.1rem #00e7ff, 0 0 0.25rem #00e7ff;
      }

      &.ngx-slider-active:after
      {
        background: #ff9c07;
      }
    }

    .ngx-slider-selection
    {
      background: #ff9c07;
    }

    .ngx-slider-bubble
    {
      color: #11182b;

      &.ngx-slider-limit
      {
        color: #1d4d5d;
      }
    }

    .ngx-slider-tick.ngx-slider-selected
    {
      background: #10182c;
    }
  }
}

.menu-dropdown
{
  overflow: hidden;

  .popover-content
  {
    padding: .5rem 0;
  }
}

.editor-form
{
  .ngx-slider
  {
    .ngx-slider-pointer
    {
      background-color: #00e7ff;

      &:after
      {
        background: #10182c;
      }

      &:hover:after
      {
        background-color: #ff9c07;
      }

      &:focus
      {
        outline: none;
        box-shadow: 0 0 0.75rem -0.1rem #00e7ff, 0 0 0.25rem #00e7ff;
      }

      &.ngx-slider-active:after
      {
        background: #ff9c07;
      }
    }

    .ngx-slider-selection
    {
      background: #ff9c07;
    }

    .ngx-slider-bar, .ngx-slider-tick
    {
      background: #096578;
    }

    .ngx-slider-bubble
    {
      color: #11182b;

      &.ngx-slider-model-value
      {
        color: #ff9c07;
      }

      &.ngx-slider-limit
      {
        color: #1d4d5d;
      }
    }
  }
}

.table
{
  thead
  {
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.2rem;
    color: #A3A4B8;
  }

  tbody
  {
    color: #7dbbf1;
  }

  th
  {
    background-color: rgba(16, 21, 39, 0.75);
    padding: 1rem .5rem 1rem .75rem;
    color: #3d5e8e;
    border-bottom-color: transparent;
  }

  td
  {
    border-style: none;
    vertical-align: middle;
    padding-left: .75rem;
    color: #8881ff;
  }

  &.table-hove tr:hover td
  {
    background-color: rgba(0, 0, 0, .5);
    color: #FFF;
  }
}

.select-list
{
  overflow: auto;
  height: 110px;
  border-radius: .25rem;
  padding: .25rem .5rem .5rem 0;
  border: 1px solid rgba(0, 231, 255, 0.75);
  background-color: rgba(16, 21, 39, .5);
  transition: box-shadow 0.15s ease-out, border 0.15s ease-out;

  &:focus
  {
    border-color: #00e7ff;
    box-shadow: 0 0 0.75rem -0.1rem #00e7ff, 0 0 0.25rem #00e7ff, 0 0 0.5rem -0.25rem #00e7ff inset;
    outline: none;
  }
}

.no-overflow
{
  overflow: hidden;
}