@smbcloud / snac
Code Commits Issues Pulls Cloud Agent CI/CD
main
main
css 168 lines 3.45 KB
Raw
1 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
2
3 @tailwind base;
4 @tailwind components;
5 @tailwind utilities;
6
7 /* RTL Support */
8 [dir="rtl"] {
9 direction: rtl;
10 }
11
12 [dir="ltr"] {
13 direction: ltr;
14 }
15
16 /* RTL-specific adjustments */
17 [dir="rtl"] .space-x-reverse > * + * {
18 margin-right: var(--tw-space-x-reverse);
19 margin-left: calc(var(--tw-space-x-reverse) * 0);
20 }
21
22 ::-webkit-scrollbar {
23 width: 0px;
24 display: none;
25 }
26
27 /* Disable zoom */
28 :root {
29 touch-action: pan-x pan-y;
30 height: 100%;
31 }
32
33 /* Safe Area Support */
34 .safe-area {
35 padding-top: env(safe-area-inset-top);
36 padding-bottom: env(safe-area-inset-bottom);
37 padding-left: env(safe-area-inset-left);
38 padding-right: env(safe-area-inset-right);
39 }
40
41 .top-nav-safe {
42 padding-top: max(0.5rem, env(safe-area-inset-top));
43 }
44
45 /* Optional: Give bottom nav extra safe-area padding */
46 .bottom-nav-safe {
47 padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
48 }
49
50 /* Animations */
51 @layer utilities {
52 .fade-in {
53 animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
54 }
55 @keyframes fadeIn {
56 from {
57 opacity: 0;
58 transform: translateY(12px);
59 }
60 to {
61 opacity: 1;
62 transform: translateY(0);
63 }
64 }
65 .wiggle {
66 animation: wiggle 0.25s linear;
67 }
68 @keyframes wiggle {
69 0% {
70 transform: rotate(-2deg);
71 }
72 25% {
73 transform: rotate(2deg);
74 }
75 50% {
76 transform: rotate(-2deg);
77 }
78 75% {
79 transform: rotate(2deg);
80 }
81 100% {
82 transform: rotate(0);
83 }
84 }
85 }
86
87 @layer base {
88 :root {
89 --background: 0 0% 100%;
90 --foreground: 220 26% 14%;
91
92 --card: 0 0% 100%;
93 --card-foreground: 220 26% 14%;
94
95 --popover: 0 0% 100%;
96 --popover-foreground: 220 26% 14%;
97
98 /* Wise signature lime green */
99 --primary: 93 72% 67%;
100 --primary-foreground: 220 26% 14%;
101
102 /* Dark navy */
103 --secondary: 220 26% 14%;
104 --secondary-foreground: 0 0% 100%;
105
106 --muted: 220 14% 96%;
107 --muted-foreground: 220 13% 46%;
108
109 --accent: 93 72% 67%;
110 --accent-foreground: 220 26% 14%;
111
112 --destructive: 0 84% 60%;
113 --destructive-foreground: 0 0% 100%;
114
115 --border: 220 13% 91%;
116 --input: 220 13% 91%;
117 --ring: 93 72% 67%;
118
119 --radius: 0.75rem;
120
121 /* Custom colors */
122 --navy: 220 26% 14%;
123 --navy-light: 220 20% 20%;
124 --lime: 93 72% 67%;
125 --lime-dark: 93 60% 55%;
126 --gray-warm: 220 14% 96%;
127 }
128
129 .dark {
130 --background: 220 26% 14%;
131 --foreground: 0 0% 98%;
132
133 --card: 220 20% 18%;
134 --card-foreground: 0 0% 98%;
135
136 --popover: 220 20% 18%;
137 --popover-foreground: 0 0% 98%;
138
139 --primary: 93 72% 67%;
140 --primary-foreground: 220 26% 14%;
141
142 --secondary: 220 20% 22%;
143 --secondary-foreground: 0 0% 98%;
144
145 --muted: 220 20% 22%;
146 --muted-foreground: 220 13% 65%;
147
148 --accent: 93 72% 67%;
149 --accent-foreground: 220 26% 14%;
150
151 --destructive: 0 62% 30%;
152 --destructive-foreground: 0 0% 98%;
153
154 --border: 220 20% 22%;
155 --input: 220 20% 22%;
156 --ring: 93 72% 67%;
157 }
158 }
159
160 @layer base {
161 * {
162 @apply border-border;
163 }
164
165 body {
166 @apply bg-background text-foreground;
167 }
168 }