Spaces:
Running
Running
File size: 5,250 Bytes
7c15d35 |
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 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 |
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #F2F2F7; /* iOS Grouped Background */
color: #000000;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
/* iOS Style Scrollbar (Minimalist) */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
/* Glassmorphism Utilities */
.glass {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.glass-dark {
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* iOS Button Enhancements */
@layer components {
.btn-ios {
@apply relative overflow-hidden transition-all duration-200 ease-ios;
@apply active:scale-[0.97] active:opacity-90;
}
.btn-ios-primary {
@apply btn-ios bg-blue-600 text-white rounded-xl px-5 py-2.5 font-medium;
@apply hover:bg-blue-700 hover:shadow-ios-btn;
}
.btn-ios-secondary {
@apply btn-ios bg-gray-100 text-gray-700 rounded-xl px-5 py-2.5 font-medium;
@apply hover:bg-gray-200;
}
/* Card with entrance animation */
.card-ios {
@apply bg-white rounded-2xl shadow-ios p-6;
@apply transition-all duration-300 ease-ios;
@apply hover:shadow-ios-card hover:-translate-y-0.5;
}
/* Input field iOS style */
.input-ios {
@apply w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl;
@apply focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500;
@apply transition-all duration-200 ease-ios text-sm;
}
/* Toggle switch iOS style */
.toggle-ios {
@apply relative w-12 h-7 rounded-full transition-colors duration-200 ease-ios;
}
.toggle-ios-thumb {
@apply absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full shadow;
@apply transition-transform duration-200 ease-ios-spring;
}
/* Shimmer loading effect */
.shimmer {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0) 100%
);
background-size: 200% 100%;
animation: shimmer 2s linear infinite;
}
/* Skeleton loading */
.skeleton {
@apply bg-gray-200 rounded animate-pulse;
}
/* Icon container with hover effect */
.icon-container {
@apply flex items-center justify-center rounded-xl;
@apply transition-all duration-200 ease-ios;
}
.icon-container:hover {
@apply scale-110;
}
/* Tab item iOS style */
.tab-ios {
@apply px-4 py-2 rounded-lg font-medium text-sm;
@apply transition-all duration-200 ease-ios;
}
.tab-ios-active {
@apply bg-white text-blue-600 shadow-sm;
}
.tab-ios-inactive {
@apply text-gray-500 hover:text-gray-700 hover:bg-gray-100/50;
}
/* Badge styles */
.badge-ios {
@apply px-2 py-0.5 rounded-full text-xs font-medium;
@apply transition-all duration-200 ease-ios;
}
/* Progress bar */
.progress-ios {
@apply h-2 bg-gray-200 rounded-full overflow-hidden;
}
.progress-ios-bar {
@apply h-full bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full;
@apply transition-all duration-500 ease-ios;
}
/* Floating action button */
.fab-ios {
@apply fixed bottom-6 right-6 w-14 h-14 rounded-full;
@apply bg-blue-600 text-white shadow-ios-btn;
@apply flex items-center justify-center;
@apply transition-all duration-200 ease-ios-spring;
@apply hover:scale-110 hover:shadow-lg active:scale-95;
}
}
/* Animation delay utilities */
@layer utilities {
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }
/* Stagger children animation */
.stagger-children > * {
@apply animate-fade-in-up;
animation-fill-mode: both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
/* Hover lift effect */
.hover-lift {
@apply transition-all duration-200 ease-ios;
}
.hover-lift:hover {
@apply -translate-y-1 shadow-ios-card;
}
/* Smooth text gradient */
.text-gradient-blue {
@apply bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-500;
}
}
|