lightswind/src/styles/globals.css

A professionally designed component library & templates market that brings together functionality, accessibility, and beautiful aesthetics for modern applications.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --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 100% 50%;
    --destructive-foreground: 210 40% 98%;
    --ring: 215 20.2% 65.1%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 222.2 47.4% 11.2%;
    --sidebar-primary: 222.2 47.4% 11.2%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 210 40% 96.1%;
    --sidebar-accent-foreground: 222.2 47.4% 11.2%;
    --sidebar-border: 214.3 31.8% 91.4%;
    --sidebar-ring: 215 20.2% 65.1%;
    --scrollbar-thumb: 215 20.2% 75.1%;
    --scrollbar-track: 210 40% 98%;
    --scrollbar-hover: 215 20.2% 65.1%;
    --primarylw: #9b87f5;
    --primarylw-2: #7E69AB;
    --darklw: #1A1F2C;
    --darklw-2: #6E59A5;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;
    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;
    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;
    --border: 216 34% 17%;
    --input: 216 34% 17%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;
    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --ring: 216 34% 17%;
    --radius: 0.5rem;
    --sidebar-background: 224 71% 4%;
    --sidebar-foreground: 213 31% 91%;
    --sidebar-primary: 210 40% 98%;
    --sidebar-primary-foreground: 222.2 47.4% 1.2%;
    --sidebar-accent: 216 34% 17%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 216 34% 17%;
    --sidebar-ring: 216 34% 17%;
    --scrollbar-thumb: 216 34% 27%;
    --scrollbar-track: 224 71% 8%;
    --scrollbar-hover: 216 34% 37%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Global scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--scrollbar-thumb)) hsl(var(--scrollbar-track));
}

/* WebKit browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: hsl(var(--scrollbar-track));
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: hsl(var(--scrollbar-thumb));
  border-radius: 10px;
  border: 2px solid hsl(var(--scrollbar-track));
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--scrollbar-hover));
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* Hide scrollbar but keep scroll functionality */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

@layer components {
  .card-hover {
    @apply transition-transform duration-300 hover:scale-[1.02] hover:shadow-lg;
  }

  .toggle-switch {
    @apply relative w-10 h-5 rounded-full bg-secondary transition-colors duration-200;
  }

  .toggle-switch.active {
    @apply bg-primary;
  }

  .toggle-switch .toggle-knob {
    @apply absolute top-[2px] left-[2px] w-4 h-4 rounded-full bg-foreground transition-transform duration-200;
  }

  .toggle-switch.active .toggle-knob {
    @apply transform translate-x-5 bg-background;
  }

  /* Dropdown menu enhancements */
  .dropdown-hover-item {
    @apply flex items-center px-2 py-2 text-sm rounded-md hover:bg-accent hover:text-accent-foreground cursor-pointer transition-colors;
  }

  .dropdown-category {
    @apply text-xs font-medium text-muted-foreground uppercase tracking-wider mb-1 px-2;
  }

  .dropdown-category-item {
    @apply flex items-center gap-2 w-full text-sm;
  }

  /* Tabs animation */
  .tabs-bg-indicator {
    @apply absolute rounded-sm bg-primary  transition-all duration-200 ease-out shadow-sm;
    transform-origin: center center;
  }

  /* Sidebar menu animation */
  .sidebar-menu-indicator {
    @apply absolute rounded-sm bg-primary/10 transition-all duration-200 ease-out shadow-sm;
  }

  /* Toast animations and styles */
  @keyframes toast-enter {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }

    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes toast-exit {
    0% {
      transform: translateX(0);
      opacity: 1;
    }

    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  @keyframes toast-enter-mobile {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes toast-exit-mobile {
    0% {
      transform: translateY(0);
      opacity: 1;
    }

    100% {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

  /* Dropdown and popover content max height and scrolling */
  .dropdown-content, 
  .select-content, 
  .popover-content, 
  .command-dialog {
    max-height: calc(90vh - 2rem);
    overflow-y: auto;
  }
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Enhanced custom scrollbar styles */
  .custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(120, 120, 120, 0.3);
    border-radius: 10px;
    transition: all 0.2s ease;
  }

  .custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(120, 120, 120, 0.5);
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(120, 120, 120, 0.7);
  }

  .custom-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
  }

  .flex-wrap-tabs {
    @apply flex flex-wrap gap-1;
  }

  /* Custom Shimmer Animation for Skeletons */
  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  .animate-shimmer {
    animation: shimmer 2s infinite;
  }

  /* Additional animation utilities from tailwind config */
  @keyframes scrollDown {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100%);
    }
  }

  @keyframes dotPatternMotion {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(16px, 16px);
    }
  }

  .animate-scroll-down {
    animation: scrollDown 10s linear infinite;
  }

  .animate-dotPatternMotion {
    animation: dotPatternMotion 1s linear infinite;
  }
}

/* Aurora Text Effect Animations */
@keyframes aurora-1 {
  0% {
    top: 0;
    right: 0;
  }
  50% {
    top: 100%;
    right: 75%;
  }
  75% {
    top: 100%;
    right: 25%;
  }
  100% {
    top: 0;
    right: 0;
  }
}

@keyframes aurora-2 {
  0% {
    top: -50%;
    left: 0%;
  }
  60% {
    top: 100%;
    left: 75%;
  }
  85% {
    top: 100%;
    left: 25%;
  }
  100% {
    top: -50%;
    left: 0%;
  }
}

@keyframes aurora-3 {
  0% {
    bottom: 0;
    left: 0;
  }
  40% {
    bottom: 100%;
    left: 75%;
  }
  65% {
    bottom: 40%;
    left: 50%;
  }
  100% {
    bottom: 0;
    left: 0;
  }
}

@keyframes aurora-4 {
  0% {
    bottom: -50%;
    right: 0;
  }
  50% {
    bottom: 0%;
    right: 40%;
  }
  90% {
    bottom: 50%;
    right: 25%;
  }
  100% {
    bottom: -50%;
    right: 0;
  }
}

@keyframes aurora-border {
  0% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  }
  25% {
    border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
  }
  50% {
    border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
  }
  75% {
    border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
  }
  100% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  }
}

/* Customize the scrollbar for webkit browsers */
.sidebar-scrollable-syntax::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  /* Set the width and height of the scrollbar */
}

/* Customize the scrollbar track */
.sidebar-scrollable-syntax::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  /* Light gray for the track */
  border-radius: 10px;
  /* Rounded edges */
}

/* Customize the scrollbar thumb */
.sidebar-scrollable-syntax::-webkit-scrollbar-thumb {
  background-color: #505050;
  /* Medium gray for the thumb */
  border-radius: 10px;
  /* Rounded edges */
  border: 2px solid #f0f0f0;
  /* Add padding effect with the track color */
}

/* Customize the scrollbar thumb on hover */
.sidebar-scrollable-syntax::-webkit-scrollbar-thumb:hover {
  background-color: #b3b3b3;
  /* Slightly darker gray when hovered */
}

/* Disable scroll on body */
.no-scroll {
  overflow: hidden;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }

  /* Add styles for command dialog backdrop blur */
  body.command-dialog-open,
  body.popover-open {
    @apply overflow-hidden;
  }

  /* Create a smooth backdrop blur transition */
  body.command-dialog-open::after,
  body.popover-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 39;
    backdrop-filter: blur(4px);
    pointer-events: none;
    transition: backdrop-filter 0.2s ease;
  }
}

.syntax-coding{
  text-shadow: 0 5px 25px;
}

/* Importing additional animations from tailwind config */
.animate-scroll-down {
  animation: scrollDown 10s linear infinite;
}

.animate-dotPatternMotion {
  animation: dotPatternMotion 1s linear infinite;
}