mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-26 02:27:14 +00:00
feat(desktop): align UI with SwiftUI
This commit is contained in:
NimBold
+61
-37
@@ -1,15 +1,15 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
/* Default/fallback Light */
|
||||
/* Default/fallback Light, matching Theme.modernLight. */
|
||||
--main-bg: 0 0% 98%;
|
||||
--sidebar-bg: 0 0% 93%;
|
||||
--sidebar-glass: 0 0% 93% / 0.6;
|
||||
--sidebar-bg: 0 0% 94%;
|
||||
--sidebar-glass: 0 0% 94% / 0.78;
|
||||
--border-color: 0 0% 88%;
|
||||
--item-hover: 0 0% 0% / 0.05;
|
||||
--item-selected: 211 100% 50% / 0.15;
|
||||
|
||||
--accent-color: 211 100% 52%;
|
||||
|
||||
--text-primary: 0 0% 10%;
|
||||
--text-secondary: 0 0% 30%;
|
||||
--text-muted: 0 0% 50%;
|
||||
@@ -19,12 +19,14 @@
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
color-scheme: light;
|
||||
--main-bg: 0 0% 98%;
|
||||
--sidebar-bg: 0 0% 93%;
|
||||
--sidebar-glass: 0 0% 93% / 0.6;
|
||||
--sidebar-bg: 0 0% 94%;
|
||||
--sidebar-glass: 0 0% 94% / 0.78;
|
||||
--border-color: 0 0% 88%;
|
||||
--item-hover: 0 0% 0% / 0.05;
|
||||
--item-selected: 211 100% 50% / 0.15;
|
||||
--accent-color: 211 100% 52%;
|
||||
--text-primary: 0 0% 10%;
|
||||
--text-secondary: 0 0% 30%;
|
||||
--text-muted: 0 0% 50%;
|
||||
@@ -34,58 +36,64 @@
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
/* Modern Mac Dark - Lighter Grays matching SwiftUI */
|
||||
color-scheme: dark;
|
||||
/* Native dark approximation for SwiftUI's system appearance. */
|
||||
--main-bg: 0 0% 16%;
|
||||
--sidebar-bg: 0 0% 14%;
|
||||
--sidebar-glass: 0 0% 14% / 0.6;
|
||||
--border-color: 0 0% 10%;
|
||||
--sidebar-glass: 0 0% 14% / 0.78;
|
||||
--border-color: 0 0% 24%;
|
||||
--item-hover: 0 0% 100% / 0.08;
|
||||
--item-selected: 211 100% 50% / 0.2;
|
||||
--accent-color: 211 100% 52%;
|
||||
--text-primary: 0 0% 98%;
|
||||
--text-secondary: 0 0% 75%;
|
||||
--text-muted: 0 0% 55%;
|
||||
--bg-modal: 0 0% 18%;
|
||||
--bg-input: 0 0% 0% / 0.3;
|
||||
--border-modal: 0 0% 10%;
|
||||
--border-modal: 0 0% 28%;
|
||||
}
|
||||
|
||||
.theme-dracula {
|
||||
/* Dracula Theme */
|
||||
--main-bg: 231 15% 18%;
|
||||
--sidebar-bg: 232 14% 14%;
|
||||
--sidebar-glass: 232 14% 14% / 0.6;
|
||||
--border-color: 232 14% 10%;
|
||||
color-scheme: dark;
|
||||
/* Exact values from Theme.dracula. */
|
||||
--main-bg: 240 14% 19%;
|
||||
--sidebar-bg: 233 13% 31%;
|
||||
--sidebar-glass: 233 13% 31% / 0.78;
|
||||
--border-color: 232 13% 38%;
|
||||
--item-hover: 0 0% 100% / 0.08;
|
||||
--item-selected: 265 89% 78% / 0.2;
|
||||
--text-primary: 60 30% 96%;
|
||||
--text-secondary: 225 27% 65%;
|
||||
--text-muted: 225 27% 55%;
|
||||
--bg-modal: 231 15% 20%;
|
||||
--bg-input: 232 14% 12%;
|
||||
--border-modal: 232 14% 10%;
|
||||
--item-selected: 340 100% 74% / 0.2;
|
||||
--accent-color: 340 100% 74%;
|
||||
--text-primary: 60 25% 96%;
|
||||
--text-secondary: 222 21% 48%;
|
||||
--text-muted: 222 17% 62%;
|
||||
--bg-modal: 240 14% 21%;
|
||||
--bg-input: 240 14% 15%;
|
||||
--border-modal: 233 13% 39%;
|
||||
}
|
||||
|
||||
.theme-nord {
|
||||
/* Nord Theme */
|
||||
color-scheme: dark;
|
||||
/* Exact values from Theme.nord. */
|
||||
--main-bg: 220 16% 22%;
|
||||
--sidebar-bg: 222 16% 19%;
|
||||
--sidebar-glass: 222 16% 19% / 0.6;
|
||||
--border-color: 222 16% 15%;
|
||||
--sidebar-bg: 221 16% 28%;
|
||||
--sidebar-glass: 221 16% 28% / 0.78;
|
||||
--border-color: 220 15% 35%;
|
||||
--item-hover: 0 0% 100% / 0.08;
|
||||
--item-selected: 193 43% 67% / 0.2;
|
||||
--text-primary: 218 27% 92%;
|
||||
--text-secondary: 214 20% 78%;
|
||||
--text-muted: 220 11% 54%;
|
||||
--accent-color: 194 44% 67%;
|
||||
--text-primary: 220 25% 88%;
|
||||
--text-secondary: 212 18% 64%;
|
||||
--text-muted: 212 14% 72%;
|
||||
--bg-modal: 220 16% 25%;
|
||||
--bg-input: 222 16% 15%;
|
||||
--border-modal: 222 16% 10%;
|
||||
--bg-input: 220 16% 19%;
|
||||
--border-modal: 220 15% 36%;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--color-sidebar-bg: hsl(var(--sidebar-bg));
|
||||
--color-sidebar-glass: hsl(var(--sidebar-glass));
|
||||
--color-main-bg: hsl(var(--main-bg));
|
||||
--color-accent: #0A84FF;
|
||||
--color-accent: hsl(var(--accent-color));
|
||||
--color-border-color: hsl(var(--border-color));
|
||||
--color-item-hover: hsl(var(--item-hover));
|
||||
--color-item-selected: hsl(var(--item-selected));
|
||||
@@ -97,7 +105,7 @@
|
||||
--color-bg-input: hsl(var(--bg-input));
|
||||
--color-border-modal: hsl(var(--border-modal));
|
||||
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -124,9 +132,14 @@
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
html[data-font-size="standard"] { font-size: 14px; }
|
||||
html[data-font-size="large"] { font-size: 16px; }
|
||||
html[data-font-size="extra-large"] { font-size: 18px; }
|
||||
:focus-visible {
|
||||
outline: 2px solid hsl(var(--accent-color));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
html[data-font-size="small"] { font-size: 12px; }
|
||||
html[data-font-size="standard"] { font-size: 13px; }
|
||||
html[data-font-size="large"] { font-size: 15px; }
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
@@ -149,3 +162,14 @@
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.settings-tab-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.settings-tab-label {
|
||||
font-size: 9px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user