Inject precise css styling and fonts into Unfold admin

2026-09-21 10:59:42 +03:00
parent 94a72309c9
commit 94678c2f10
19 changed files with 3448 additions and 0 deletions
@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
+
+/* Apply custom fonts to Unfold */
+:root, [data-theme="dark"], [data-theme="light"] {
+    --font-sans: 'Plus Jakarta Sans', sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
+}
+
+/* Override all headers and headings with Space Grotesk */
+h1, h2, h3, h4, h5, h6, 
+.font-heading, 
+.font-bold, 
+.font-semibold {
+    font-family: 'Space Grotesk', sans-serif !important;
+}
+
+/* Body font override just to be safe */
+body {
+    font-family: 'Plus Jakarta Sans', sans-serif !important;
+}
+
+/* Custom Scrollbars from the design */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    background: #11131b;
+}
+::-webkit-scrollbar-thumb {
+    background: #2a2d39;
+    border-radius: 2px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #3b4052;
+}
+
+/* Specific overrides for Unfold backgrounds in dark mode to perfectly match the design */
+html[data-theme="dark"] body {
+    background-color: #0b0f17 !important;
+}
+
+html[data-theme="dark"] aside,
+html[data-theme="dark"] header {
+    background-color: #11131b !important;
+    border-color: #2a2d39 !important;
+}
+
+/* Cards and table backgrounds */
+html[data-theme="dark"] .bg-white {
+    background-color: #191b23 !important;
+    border-color: #2a2d39 !important;
+}
+
+html[data-theme="dark"] .bg-gray-50 {
+    background-color: #11131b !important;
+    border-color: #2a2d39 !important;
+}
+
+html[data-theme="dark"] .bg-gray-100 {
+    background-color: #12141c !important;
+}
+
+html[data-theme="dark"] input,
+html[data-theme="dark"] textarea,
+html[data-theme="dark"] select {
+    background-color: #12141c !important;
+    border-color: #2a2d39 !important;
+}
+
+html[data-theme="dark"] .border-gray-200,
+html[data-theme="dark"] .border-gray-300,
+html[data-theme="dark"] .border-gray-700,
+html[data-theme="dark"] .border-gray-800 {
+    border-color: #2a2d39 !important;
+}
+
+/* Submit row at bottom */
+html[data-theme="dark"] #submit-row {
+    background-color: #11131b !important;
+    border-color: #2a2d39 !important;
+}