src/index.css - master - ashkunsh/TMC

src/index.css

186 строк5 KB

ashkunsh

Create: .gitignore, components.json, index.html, package.json, pnpm-lock.yaml, README.md, tsconfig.json, tsconfig.node.json, vite.config.ts, button.tsx, card.tsx, utils.ts, favicon-16.png, favicon-192.png, favicon-32.png, favicon-512.png, favicon.ico, App.tsx, AdminRoute.tsx, DashboardLayout.tsx, Header.tsx, LabelPrintDialog.tsx, LabelTemplateEditor.tsx, Sidebar.tsx, button.tsx, card.tsx, input.tsx, label.tsx, useDbMigration.ts, index.css, barcode.ts, utils.ts, main.tsx, AuthLogPage.tsx, BlockLogPage.tsx, BuildingsPage.tsx, DashboardPage.tsx, Home.tsx, LabelSettingsPage.tsx, LoginPage.tsx, NotFound.tsx, RegisterPage.tsx, StorageLocationsPage.tsx, StorageTypesPage.tsx, TmcCompositionPage.tsx, TmcItemsPage.tsx, TmcKindsPage.tsx, TmcTypesPage.tsx, UnitsPage.tsx, UsersCatalog.tsx, UsersPage.tsx, router.tsx, vite-env.d.ts, utils.ts, favicon.ico, .deps-installed, .env

17 июн 2026, 09:24

Верифицирован

17 июн 2026, 09:24e3fc356

@import "tailwindcss";

@theme {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  
  --color-background: oklch(100% 0 0);
  --color-foreground: oklch(9% 0.016 285.75);
  --color-card: oklch(100% 0 0);
  --color-card-foreground: oklch(9% 0.016 285.75);
  --color-popover: oklch(100% 0 0);
  --color-popover-foreground: oklch(9% 0.016 285.75);
  --color-primary: oklch(13% 0.017 285.75);
  --color-primary-foreground: oklch(98% 0.003 285.75);
  --color-secondary: oklch(96.1% 0.003 285.75);
  --color-secondary-foreground: oklch(13% 0.017 285.75);
  --color-muted: oklch(96.1% 0.003 285.75);
  --color-muted-foreground: oklch(51.8% 0.013 285.75);
  --color-accent: oklch(96.1% 0.003 285.75);
  --color-accent-foreground: oklch(13% 0.017 285.75);
  --color-destructive: oklch(62.8% 0.224 29.23);
  --color-destructive-foreground: oklch(98% 0.003 285.75);
  --color-border: oklch(91.4% 0.006 285.75);
  --color-input: oklch(91.4% 0.006 285.75);
  --color-ring: oklch(9% 0.016 285.75);
  
  --radius: 0.5rem;
}

@theme dark {
  --color-background: oklch(9% 0.016 285.75);
  --color-foreground: oklch(98% 0.003 285.75);
  --color-card: oklch(9% 0.016 285.75);
  --color-card-foreground: oklch(98% 0.003 285.75);
  --color-popover: oklch(9% 0.016 285.75);
  --color-popover-foreground: oklch(98% 0.003 285.75);
  --color-primary: oklch(98% 0.003 285.75);
  --color-primary-foreground: oklch(13% 0.017 285.75);
  --color-secondary: oklch(23.5% 0.015 285.75);
  --color-secondary-foreground: oklch(98% 0.003 285.75);
  --color-muted: oklch(23.5% 0.015 285.75);
  --color-muted-foreground: oklch(68.2% 0.012 285.75);
  --color-accent: oklch(23.5% 0.015 285.75);
  --color-accent-foreground: oklch(98% 0.003 285.75);
  --color-destructive: oklch(38.5% 0.175 29.23);
  --color-destructive-foreground: oklch(98% 0.003 285.75);
  --color-border: oklch(23.5% 0.015 285.75);
  --color-input: oklch(23.5% 0.015 285.75);
  --color-ring: oklch(83.9% 0.010 285.75);
}

@layer base {
  * {
    border-color: var(--color-border);
  }
  
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ========================================
   ANIMATIONS & UTILITY CLASSES
   ======================================== */

@keyframes blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(20px, -30px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.9); }
  75% { transform: translate(30px, 10px) scale(1.05); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@layer utilities {
  .animate-blob {
    animation: blob 7s ease-in-out infinite;
  }
  
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  
  .animation-delay-4000 {
    animation-delay: 4s;
  }
  
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  .animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
  }
  
  .animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
  }

  /* Glass morphism utilities */
  .glass {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .glass-dark {
    backdrop-filter: blur(16px);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Text gradient utility */
  .text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .text-gradient-purple-pink {
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}
/* ГЛОБАЛЬНЫЕ СТИЛИ ДЛЯ ВСЕЙ СИСТЕМЫ */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ВСЕ КНОПКИ — ВСЕГДА ВИДИМЫЕ */
button {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ВСЕ ПОЛЯ ВВОДА */
input, select, textarea {
  background-color: #ffffff !important;
  color: #1f2937 !important;
}

.dark input, 
.dark select, 
.dark textarea {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
}

/* ВСЕ МЕТКИ */
label {
  color: #374151 !important;
}

.dark label {
  color: #e5e7eb !important;
}