ldc-groupe/resources/sass/back/app.scss

@use '/node_modules/flag-icons/css/flag-icons.min.css';
@use './fonts';
@use './inputs/wysiwyg';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .light {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --primary: 211.62 98.82% 33.14%;
    --primary-foreground: 0 0% 96%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --successive: 113 100% 38%;
    --successive-foreground: 210 40% 98%;
    --informative: 207 69% 48%;
    --informative-foreground: 210 40% 98%;
    --preventive: 46 100% 50%;
    --preventive-foreground: 210 40% 98%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --sidebar-background: 211.62 98.82% 33.14%;
    --sidebar-foreground: 0 0% 96%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 240 5.9% 10%;
    --foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --card: 240 5.9% 10%;
    --card-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --primary: 222.2 84% 4.9%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --successive: 128 63% 31%;
    --successive-foreground: 210 40% 98%;
    --informative: 212 50% 45%;
    --informative-foreground: 210 40% 98%;
    --preventive: 41 64% 56%;
    --preventive-foreground: 210 40% 98%;
    --ring: 212.7 26.8% 83.9%;
    --radius: 0.5rem;
    --sidebar-background: 222.2 84% 4.9%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

html {
  scroll-behavior: smooth;
}

.animation-transition {
  animation: 0.4s animation-transition linear;
}

@keyframes animation-transition {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.table-actions {
  th:last-child,
  td:last-child {
    @apply bg-gray-50 dark:bg-gray-900 sticky top-0 right-0 w-[72px];
  }
}

// Multiselect input.
.multiselect-singleline-scroll {
  scrollbar-color: hsl(var(--border) / 40%) transparent;
  scrollbar-width: thin;
}

.multiselect-singleline-scroll::-webkit-scrollbar {
  height: 4px;
}

.multiselect-singleline-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.multiselect-singleline-scroll::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: hsl(var(--border) / 30%);
  opacity: 0.7;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
}

.multiselect-singleline-scroll::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--border) / 60%);
  opacity: 1;
}

/* Scrollbar becomes more visible when actively scrolling */
.multiselect-singleline-scroll:active::-webkit-scrollbar-thumb {
  background-color: hsl(var(--border) / 70%);
  opacity: 1;
}

/* Dark theme adjustments - make scrollbar slightly more visible */
.dark .multiselect-singleline-scroll {
  scrollbar-color: hsl(var(--border) / 50%) transparent;
}

.dark .multiselect-singleline-scroll::-webkit-scrollbar-thumb {
  background-color: hsl(var(--border) / 50%);
}

.dark .multiselect-singleline-scroll::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--border) / 80%);
}

/* Table of Contents scrollbar */
.table-of-contents-scroll {
  scrollbar-color: hsl(var(--border) / 30%) transparent;
  scrollbar-width: thin;
}

.table-of-contents-scroll::-webkit-scrollbar {
  width: 4px;
}

.table-of-contents-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.table-of-contents-scroll::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: hsl(var(--border) / 60%);
  transition: background-color 0.2s ease;
}

.table-of-contents-scroll::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--border) / 60%);
}

// JSON editor.
.jer-edit-buttons > div {
  transition: 0.2s;
}

.jer-edit-buttons > div:hover {
  opacity: 0.8;
}

.jer-copy-pulse:hover {
  transform: initial !important;
}

.jer-collection-item-count {
  @apply cursor-pointer;
}