videofolxtv/client/src/index.css

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

:root {
  --background: hsl(222, 84%, 4.9%);
  --foreground: hsl(210, 40%, 98%);
  --muted: hsl(217, 32.6%, 17.5%);
  --muted-foreground: hsl(215, 20.2%, 65.1%);
  --popover: hsl(222, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);
  --card: hsl(222, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --border: hsl(217, 32.6%, 17.5%);
  --input: hsl(217, 32.6%, 17.5%);
  --primary: hsl(217, 91%, 60%);
  --primary-foreground: hsl(222, 47%, 11%);
  --secondary: hsl(217, 32.6%, 17.5%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --accent: hsl(217, 32.6%, 17.5%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --ring: hsl(217, 91%, 60%);
  --radius: 0.75rem;
  
  /* Custom video app colors */
  --bunny-dark: hsl(222, 84%, 4.9%);
  --bunny-gray: hsl(217, 32.6%, 17.5%);
  --bunny-blue: hsl(217, 91%, 60%);
  --bunny-light: hsl(210, 40%, 98%);
  --bunny-muted: hsl(215, 20.2%, 65.1%);
}

.dark {
  --background: hsl(222, 84%, 4.9%);
  --foreground: hsl(210, 40%, 98%);
  --muted: hsl(217, 32.6%, 17.5%);
  --muted-foreground: hsl(215, 20.2%, 65.1%);
  --popover: hsl(222, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);
  --card: hsl(222, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --border: hsl(217, 32.6%, 17.5%);
  --input: hsl(217, 32.6%, 17.5%);
  --primary: hsl(217, 91%, 60%);
  --primary-foreground: hsl(222, 47%, 11%);
  --secondary: hsl(217, 32.6%, 17.5%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --accent: hsl(217, 32.6%, 17.5%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --ring: hsl(217, 91%, 60%);
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
    background-color: hsl(222, 84%, 4.9%);
    color: hsl(210, 40%, 98%);
  }
}

@layer utilities {
  .bunny-dark {
    background-color: hsl(222, 84%, 4.9%);
  }
  
  .bunny-gray {
    background-color: hsl(217, 32.6%, 17.5%);
  }
  
  .bunny-blue {
    background-color: hsl(217, 91%, 60%);
  }
  
  .bunny-light {
    color: hsl(210, 40%, 98%);
  }
  
  .bunny-muted {
    color: hsl(215, 20.2%, 65.1%);
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Video player volume slider styles */
  .slider {
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
  }

  .slider::-webkit-slider-track {
    background: rgba(255, 255, 255, 0.2);
    height: 4px;
    border-radius: 2px;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: hsl(217, 91%, 60%);
    cursor: pointer;
    border: none;
  }

  .slider::-moz-range-track {
    background: rgba(255, 255, 255, 0.2);
    height: 4px;
    border-radius: 2px;
    border: none;
  }

  .slider::-moz-range-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: hsl(217, 91%, 60%);
    cursor: pointer;
    border: none;
  }

  /* Animation delays for loading indicators */
  .animation-delay-75 {
    animation-delay: 75ms;
  }
  
  .animation-delay-150 {
    animation-delay: 150ms;
  }
}

/* Zagotovi vidnost besedila v input poljih - sivo ozadje z belim besedilom */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  background-color: #374151 !important;
  color: #ffffff !important;
  border: 1px solid #6b7280 !important;
}

.dark input[type="text"], .dark input[type="email"], .dark input[type="password"], .dark textarea, .dark select {
  background-color: #374151 !important;
  color: #ffffff !important;
  border: 1px solid #6b7280 !important;
}

/* Zagotovi vidnost placeholder besedila */
input::placeholder, textarea::placeholder {
  color: #d1d5db !important;
}

.dark input::placeholder, .dark textarea::placeholder {
  color: #d1d5db !important;
}

/* Modal ozadje - temno sivo */
.video-edit-modal {
  background-color: #1f2937 !important;
}

/* Label besedilo - belo */
.video-edit-modal label {
  color: #ffffff !important;
}