File size: 2,636 Bytes
d988ae4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--foreground-rgb: 255, 255, 255;
--background-rgb: 18, 18, 18;
}
html {
scroll-behavior: smooth;
}
body {
color: rgb(var(--foreground-rgb));
background: rgb(var(--background-rgb));
font-family: 'Inter', sans-serif;
min-height: 100vh;
background-image:
radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
}
@layer base {
::selection {
@apply bg-primary/30 text-white;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
from { transform: scale(0.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@keyframes slideUpIn {
from { transform: translateY(10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
}
@layer components {
.btn {
@apply px-4 py-2 rounded-md font-medium transition-all duration-200 shadow-sm;
}
.btn-primary {
@apply bg-primary text-white hover:bg-primary/90 hover:shadow-glow-sm focus:ring-2 focus:ring-primary/50 focus:outline-none;
}
.btn-secondary {
@apply bg-secondary text-white hover:bg-secondary/90 hover:shadow-sm focus:ring-2 focus:ring-secondary/50 focus:outline-none;
}
.btn-accent {
@apply bg-accent text-white hover:bg-accent/90 hover:shadow-sm focus:ring-2 focus:ring-accent/50 focus:outline-none;
}
.btn-ghost {
@apply bg-transparent text-text-primary border border-surface-hover hover:bg-surface-hover focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
.input {
@apply px-4 py-2 bg-surface-hover border border-surface-active rounded-md text-text-primary
focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent
placeholder:text-text-secondary/50;
}
.card {
@apply bg-surface p-6 rounded-lg border border-surface-hover shadow-md backdrop-blur-sm;
}
.card-hover {
@apply transition-all duration-200 hover:shadow-glow-sm hover:border-primary/30;
}
.clipboard-entry {
@apply bg-surface-hover p-4 rounded-md border border-surface-active transition-all duration-200;
}
.clipboard-entry-content {
@apply bg-background-alt p-3 rounded whitespace-pre-wrap break-words text-text-primary;
}
.icon-btn {
@apply p-2 rounded-full transition-all duration-200 hover:bg-surface-active focus:outline-none focus:ring-2 focus:ring-primary/30;
}
}
|