158 lines
4.0 KiB
CSS
158 lines
4.0 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* Tailwind v4: Use .dark class for dark mode instead of prefers-color-scheme */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* Global Resets & Transitions */
|
|
html {
|
|
-webkit-tap-highlight-color: transparent;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
@apply bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100 antialiased font-sans;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
html.theme-transition * {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Force dark mode styles */
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Mobile touch improvements */
|
|
@media (max-width: 640px) {
|
|
input,
|
|
select,
|
|
button {
|
|
font-size: 16px !important;
|
|
}
|
|
.touch-manipulation {
|
|
touch-action: manipulation;
|
|
}
|
|
}
|
|
|
|
/* Global Button Styles */
|
|
button,
|
|
[type='button'],
|
|
[type='reset'],
|
|
[type='submit'] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled,
|
|
[type='button']:disabled,
|
|
[type='reset']:disabled,
|
|
[type='submit']:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Premium Utilities */
|
|
@layer utilities {
|
|
.glass {
|
|
@apply bg-white/70 dark:bg-gray-900/70 backdrop-blur-md border border-white/20 dark:border-gray-800/50;
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.glass-panel {
|
|
@apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50;
|
|
box-shadow:
|
|
0 2px 15px -3px rgba(0, 0, 0, 0.07),
|
|
0 10px 20px -2px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-gray-300 dark:bg-gray-700 rounded-full transition-colors;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-gray-400 dark:bg-gray-600;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Buttons */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm rounded-lg transition-all duration-200 cursor-pointer font-medium
|
|
focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98];
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-gray-900 text-white hover:bg-black shadow-lg shadow-gray-900/20
|
|
dark:bg-gray-100 dark:text-gray-950 dark:hover:bg-white dark:shadow-gray-100/10 border border-transparent;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-white text-gray-700 border border-gray-200 hover:bg-gray-50 hover:border-gray-300 shadow-sm
|
|
dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-700/80 dark:hover:border-gray-600;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply text-gray-600 hover:bg-gray-100/80 hover:text-gray-900
|
|
dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:text-gray-200;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply text-red-600 hover:bg-red-50 hover:text-red-700
|
|
dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300;
|
|
}
|
|
|
|
.btn-sm {
|
|
@apply px-3 py-1.5 text-xs;
|
|
}
|
|
|
|
.btn-md {
|
|
@apply px-4 py-2 text-sm;
|
|
}
|
|
|
|
.btn-icon {
|
|
@apply p-2;
|
|
}
|
|
|
|
.input-field {
|
|
@apply px-3 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700
|
|
rounded-lg outline-none transition-shadow focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500
|
|
placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-100;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700/60 rounded-xl shadow-sm;
|
|
}
|
|
}
|
|
|
|
/* Typography Overrides (Prose) */
|
|
.prose {
|
|
@apply text-gray-600 dark:text-gray-300 max-w-none;
|
|
}
|
|
.prose h1,
|
|
.prose h2,
|
|
.prose h3 {
|
|
@apply text-gray-900 dark:text-gray-50 font-bold tracking-tight;
|
|
}
|
|
.prose a {
|
|
@apply text-indigo-600 dark:text-indigo-400 no-underline hover:underline font-medium;
|
|
}
|
|
.prose code {
|
|
@apply bg-gray-100 dark:bg-gray-800 rounded px-1.5 py-0.5 text-sm text-indigo-600 dark:text-indigo-300 font-mono font-medium before:content-[''] after:content-[''];
|
|
}
|
|
.prose pre {
|
|
@apply bg-gray-900 dark:bg-gray-950/50 border border-gray-200 dark:border-gray-800 rounded-xl shadow-lg;
|
|
}
|