frontend/src/index.css - dev - kreyndelHam/Konstructorium

frontend/src/index.css
130 строк4 KB
MihahamYT
fix(frontend): theme-safe secondary buttons and badges in dark mode
25 май 2026, 18:01
25 май 2026, 18:010c769bc
@import './styles/theme-tokens.css';

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

@layer base {
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    @apply bg-page text-text-body;
  }

  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  }

  input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='submit']):not([type='button']):not([type='reset']):not([type='image']):not([type='hidden']):not([type='range']):not([type='color']),
  select,
  textarea {
    @apply bg-input text-text-body border-input-border;
  }

  input::placeholder,
  textarea::placeholder {
    @apply text-text-muted;
  }

  select option {
    @apply bg-input text-text-body;
  }

  input:disabled,
  select:disabled,
  textarea:disabled {
    @apply opacity-60 cursor-not-allowed;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-input-bg)) inset;
    -webkit-text-fill-color: rgb(var(--color-text-body));
    caret-color: rgb(var(--color-text-body));
    transition: background-color 9999s ease-out 0s;
  }
}

@layer components {
  .ui-card {
    @apply bg-surface rounded-lg shadow border border-border;
  }

  .ui-input {
    @apply bg-input border border-input-border text-text-body rounded-lg placeholder:text-text-muted focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:opacity-60 disabled:cursor-not-allowed;
  }

  .ui-select {
    @apply bg-input border border-input-border text-text-body rounded-lg placeholder:text-text-muted focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:opacity-60 disabled:cursor-not-allowed;
  }

  .ui-textarea {
    @apply bg-input border border-input-border text-text-body rounded-lg placeholder:text-text-muted focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:opacity-60 disabled:cursor-not-allowed;
  }

  .ui-table-head {
    @apply bg-surface-muted text-text-muted;
  }

  .ui-modal-panel {
    @apply bg-surface rounded-lg shadow-lg border border-border;
  }

  .ui-btn-secondary {
    @apply px-4 py-2 bg-surface-muted text-text-body rounded-lg border border-border
           hover:bg-page transition-colors;
  }

  .ui-btn-secondary-sm {
    @apply px-3 py-1.5 text-sm bg-surface-muted text-text-body rounded-lg border border-border
           hover:bg-page transition-colors;
  }

  .ui-tab-inactive {
    @apply bg-surface-muted text-text-body hover:bg-page transition-colors;
  }
}

/* Custom scrollbar for image thumbnails */
.overflow-x-auto::-webkit-scrollbar {
  height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
  background: rgb(var(--color-scrollbar-track));
  border-radius: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
  background: rgb(var(--color-scrollbar-thumb));
  border-radius: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-scrollbar-thumb-hover));
}

.themed-scrollbar {
  scrollbar-color: rgb(var(--color-scrollbar-thumb)) rgb(var(--color-scrollbar-track));
}

/* Toastify theme alignment */
.Toastify__toast-theme--light {
  @apply bg-surface text-text-body border border-border;
}

.Toastify__toast-theme--dark {
  @apply bg-surface text-text-body border border-border;
}