jws-frontend/src/css/app.scss

@import 'open-props/postcss/style';

@import 'open-props/colors-hsl';
@import 'open-props/shadows';
@import 'open-props/zindex';

html {
  --radius-2: 7px;

  --brand-1: #035aa1;
  --brand-2: #f50000;
  --border-color: var(--gray-2);
  --foreground: black;
  --background: var(--gray-2);
  --surface-0: var(--background);
  --surface-1: white;
  --surface-2: var(--gray-0);
  --surface-3: var(--gray-1);

  --surface-tab: var(--gray-1);

  --text-mute: var(--stone-7-hsl);
  --text-mute-2: var(--stone-9-hsl);

  --info-fg: 0 0% 100%;
  --info-bg: var(--blue-6-hsl);

  --negative-fg: 0 0% 100%;
  --negative-bg: var(--red-9-hsl);

  --positive-fg: 0 0% 100%;
  --positive-bg: var(--teal-7-hsl);

  --warning-fg: 0 0% 100%;
  --warning-bg: var(--yellow-7-hsl);

  --danger-fg: 0 0% 100%;
  --danger-bg: var(--orange-7-hsl);

  --gender-male: var(--blue-5-hsl);
  --gender-female: var(--pink-7-hsl);
  --customer-corp: var(--purple-11-hsl);
  --customer-pers: var(--teal-9-hsl);

  --shadow-color: 220 3% 15%;
  --shadow-strength: 5%;
  --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff,
    inset 0 0.5px 0 0 rgba(0, 0, 0, 0.067);

  color: var(--foreground);
  background-color: var(--background);
}

:where(.dark, .body--dark) {
  --brand-1: #035aa1;
  --brand-2: #f50000;
  --border-color: var(--gray-8);
  --foreground: white;
  --background: var(--gray-11);
  --surface-0: var(--background);
  --surface-1: var(--gray-10);
  --surface-2: var(--gray-9);
  --surface-3: var(--gray-11);

  --surface-tab: var(--gray-9);

  --customer-corp: var(--purple-9-hsl);

  --text-mute: var(--stone-8-hsl);
  --text-mute-2: var(--foreground);

  --shadow-color: 220 0% 100%;
  --shadow-strength: 25%;
  --inner-shadow-highlight: inset 0 -0.5px 0 0 hsla(0, 0%, 100%, 0.067),
    inset 0 0.5px 0 0 rgba(0, 0, 0, 0.467);
}

::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

::-webkit-scrollbar-thumb {
  border: 0.15rem solid rgba(0, 0, 0, 0);
  background-color: hsla(0, 0%, 50%, 0.75);
  background-clip: padding-box;
  border-radius: 0.5rem;
}

*,
::before,
::after {
  transition: 100ms background ease-in-out;
}

.bordered {
  border: 1px solid var(--border-color);
}

.bordered-t {
  border-top: 1px solid var(--border-color);
}

.bordered-b {
  border-bottom: 1px solid var(--border-color);
}

.bordered-l {
  border-left: 1px solid var(--border-color);
}

.bordered-r {
  border-right: 1px solid var(--border-color);
}

.rounded {
  border-radius: var(--radius-2);
}

.surface-0 {
  background-color: var(--surface-0) !important;
}

.surface-1 {
  background-color: var(--surface-1) !important;
}

.surface-2 {
  background-color: var(--surface-2) !important;
}

.surface-3 {
  background-color: var(--surface-3) !important;
}

.surface-tab {
  background-color: var(--surface-tab) !important;
}

.app-text-muted {
  color: hsl(var(--text-mute));
}

.app-text-muted-2 {
  color: hsl(var(--text-mute-2));
}

.app-text-info {
  color: hsl(var(--info-bg));
}

.app-bg-info {
  color: hsl(var(--info-fg));
  background-color: hsl(var(--info-bg));
}

.app-text-negative {
  color: hsl(var(--negative-bg));
}

.app-bg-negative {
  color: hsl(var(--negative-fg));
  background-color: hsl(var(--negative-bg));
}

.app-text-positive {
  color: hsl(var(--positive-bg)) !important;
}

.app-bg-positive {
  color: hsl(var(--positive-fg));
  background-color: hsl(var(--positive-bg));
}

.app-text-warning {
  color: hsl(var(--warning-bg));
}

.app-bg-warning {
  color: hsl(var(--warning-fg));
  background-color: hsl(var(--warning-bg));
}

.app-text-danger {
  color: hsl(var(--danger-bg));
}

.app-bg-danger {
  color: hsl(var(--danger-fg));
  background-color: hsl(var(--danger-bg));
}

.app-text-male {
  color: hsl(var(--gender-male));
}

.app-bg-male {
  color: hsl(var(--positive-fg));
  background-color: hsl(var(--gender-male)) !important;
}

.app-text-female {
  color: hsl(var(--gender-female));
}

.app-bg-female {
  color: hsl(var(--positive-fg));
  background-color: hsl(var(--gender-female)) !important;
}

.app-text-corp {
  color: hsl(var(--customer-corp));
}

.app-bg-corp {
  color: hsl(var(--customer-corp));
  background-color: hsla(var(--customer-corp) / 0.2) !important;
}

.app-text-pers {
  color: hsl(var(--customer-pers));
}

.app-bg-pers {
  color: hsl(var(--customer-pers));
  background-color: hsla(var(--customer-pers) / 0.2) !important;
}

.app-bg-brand-1 {
  color: white;
  background-color: var(--brand-1);
}

@page {
  size: a4 portrait;
  margin-top: 0.5in;
  margin-left: 0.5in;
  margin-right: 0.5in;
  margin-bottom: 0.5in;
}

@media print {
  html {
    background-color: white;
  }

  .no-print {
    display: none;
  }
}

.slide-enter-active {
  transition: all 0.1s ease-out;
}

.slide-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-enter-from,
.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}