fix:🥟 replace @apply with plain CSS in layout style blocks - AdminLayout: replace @apply with explicit CSS properties - admin/index: remove :global() wrapper from style block - BaseLayout: replace @apply with plain CSS for container
swadhinbiswas committed 3 months ago
e4e0855
1 parent bb98ea3
commit e4e0855
3 files changed
+27 -9
Showing 3 changed files+27-9
▼src/layouts/AdminLayout.astro
+3-2
| @@ -18,9 +18,10 @@ const { title } = Astro.props; | ||
18 | 18 | <ViewTransitions /> |
19 | 19 | <style is:global> |
20 | 20 | body { |
21 | - @apply bg-[#050510] text-gray-100 overflow-hidden; | |
21 | + background-color: #050510; | |
22 | + color: #f3f4f6; | |
23 | + overflow: hidden; | |
22 | 24 | } |
23 | - /* Custom scrollbar for small areas */ | |
24 | 25 | ::-webkit-scrollbar { |
25 | 26 | width: 6px; |
26 | 27 | height: 6px; |
27 | 28 | |
▼src/layouts/BaseLayout.astro
+20-1
| @@ -139,7 +139,26 @@ const { | ||
139 | 139 | } |
140 | 140 | |
141 | 141 | .container { |
142 | - @apply mx-auto w-full max-w-7xl px-4 sm:px-5 lg:px-6; | |
142 | + margin-left: auto; | |
143 | + margin-right: auto; | |
144 | + width: 100%; | |
145 | + max-width: 80rem; | |
146 | + padding-left: 1rem; | |
147 | + padding-right: 1rem; | |
148 | + } | |
149 | + | |
150 | + @media (min-width: 640px) { | |
151 | + .container { | |
152 | + padding-left: 1.25rem; | |
153 | + padding-right: 1.25rem; | |
154 | + } | |
155 | + } | |
156 | + | |
157 | + @media (min-width: 1024px) { | |
158 | + .container { | |
159 | + padding-left: 1.5rem; | |
160 | + padding-right: 1.5rem; | |
161 | + } | |
143 | 162 | } |
144 | 163 | |
145 | 164 | /* Responsive text utilities */ |
146 | 165 | |
▼src/pages/admin/index.astro
+4-6
| @@ -13,19 +13,17 @@ if (!user?.isAdmin) return Astro.redirect("/"); | ||
13 | 13 | |
14 | 14 | </div> |
15 | 15 | |
16 | - <style> | |
17 | - /* Glassmorphism utility for the HUD */ | |
18 | - :global(.glass-panel) { | |
16 | + <style is:global> | |
17 | + .glass-panel { | |
19 | 18 | background: rgba(13, 17, 23, 0.3); |
20 | 19 | backdrop-filter: blur(10px); |
21 | 20 | border: 1px solid rgba(255, 255, 255, 0.05); |
22 | 21 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
23 | 22 | } |
24 | - | |
25 | - :global(.custom-scrollbar::-webkit-scrollbar) { | |
23 | + .custom-scrollbar::-webkit-scrollbar { | |
26 | 24 | width: 4px; |
27 | 25 | } |
28 | - :global(.custom-scrollbar::-webkit-scrollbar-thumb) { | |
26 | + .custom-scrollbar::-webkit-scrollbar-thumb { | |
29 | 27 | background: rgba(255,255,255,0.1); |
30 | 28 | border-radius: 2px; |
31 | 29 | } |
32 | 30 | |