diff --git a/web/src/index.css b/web/src/index.css index 3c80bb0..b12882d 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -350,19 +350,6 @@ body { z-index: 50; } -.trading-sidebar-logo { - display: grid; - place-items: center; - width: 44px; - height: 44px; - margin-bottom: 24px; - flex-shrink: 0; - border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); - border-radius: 14px; - background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 62%, var(--bl-success))); - color: var(--primary-foreground); - box-shadow: 0 12px 30px color-mix(in oklab, var(--accent) 26%, transparent); -} .page-section-grid { display: grid; @@ -1421,12 +1408,6 @@ body { .dashboard-shell { padding-bottom: 68px; } - - .dashboard-main { - margin-left: 0; - min-width: 0; - } - .dashboard-content-row { min-width: 0; } @@ -1450,11 +1431,6 @@ body { .trading-header-indices { display: none !important; } - - .dashboard-right-panel { - display: none !important; - } - .trading-sidebar { width: 100%; min-height: 64px; @@ -1476,21 +1452,6 @@ body { display: none !important; } - .trading-sidebar-nav { - flex: 0 1 auto; - flex-direction: row; - width: auto; - max-width: 100%; - align-items: stretch; - gap: 0; - } - - .trading-sidebar-link { - width: 68px; - min-width: 68px; - } -} - @media (max-width: 640px) { .entries-tab-nav { width: 100%; @@ -1547,16 +1508,6 @@ body { box-shadow: 18px 0 50px rgba(15, 23, 42, 0.06); } -.trading-sidebar-logo { - width: auto; - height: 56px; - margin: 0 4px 22px; - padding: 0 14px; - justify-content: flex-start; - gap: 12px; - border-radius: 16px; - background: linear-gradient(135deg, var(--foreground), color-mix(in oklab, var(--accent) 76%, var(--foreground))); -} .trading-sidebar-brand { display: grid; @@ -2637,13 +2588,6 @@ body { overflow-x: visible; } - .trading-sidebar-logo { - display: grid !important; - width: 52px; - height: 52px; - margin: 0 0 18px; - padding: 0; - } .trading-sidebar-avatar { display: grid !important; @@ -2687,114 +2631,8 @@ body { /* Final chrome overrides: keep navigation, alerts, content, and assistant from colliding. */ @media (max-width: 1279px) { - .dashboard-main { - margin-left: var(--trading-shell-tablet-sidebar-width); - } - .dashboard-right-panel { - --trading-shell-right-panel-width: 300px; - } -} - -@media (min-width: 561px) and (max-width: 1023px) { - .dashboard-shell { - padding-bottom: 0; - } - - .dashboard-main { - margin-left: var(--trading-shell-tablet-sidebar-width); - } - - .dashboard-content { - padding: 24px 20px 36px; - } - - .dashboard-right-panel { - display: none !important; - } - - .trading-sidebar { - top: 0; - right: auto; - bottom: 0; - left: 0; - width: var(--trading-shell-tablet-sidebar-width); - height: auto; - min-height: 100vh; - flex-direction: column; - align-items: center; - justify-content: flex-start; - padding: 16px 8px; - border-top: 0; - border-right: 1px solid var(--border); - overflow-x: visible; - } -} - -@media (max-width: 560px) { - :root { - --trading-assistant-bottom: calc(var(--trading-shell-bottom-nav-height) + 18px); - --trading-assistant-right: 16px; - } - - .critical-alert-banner { - min-height: 52px; - padding: 8px 16px; - font-size: 11px; - line-height: 1.45; - letter-spacing: 0.03em; - } - - .dashboard-shell { - padding-bottom: var(--trading-shell-bottom-nav-height); - } - - .dashboard-main { - margin-left: 0; - min-width: 0; - } - - .dashboard-content { - padding: 18px 16px calc(var(--trading-shell-bottom-nav-height) + 28px); - } - - .dashboard-right-panel { - display: none !important; - } - - .trading-sidebar { - width: 100%; - min-height: var(--trading-shell-bottom-nav-height); - height: var(--trading-shell-bottom-nav-height); - top: auto; - right: 0; - bottom: 0; - left: 0; - flex-direction: row; - justify-content: center; - align-items: stretch; - padding: 0 max(8px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-right)); - border-right: 0; - border-top: 1px solid var(--border); - overflow-x: auto; - } - - .trading-sidebar-nav { - flex: 0 1 auto; - flex-direction: row; - width: auto; - max-width: 100%; - align-items: stretch; - gap: 0; - } - - .trading-sidebar-link { - width: 68px; - min-width: 68px; - } -} - -/* Central shell sizing shared by the final breakpoint rules below. */ +@media (min-width: 561px) and (max-width: 1023px) {media (max-width: 560px) {ntral shell sizing shared by the final breakpoint rules below. */ @media (max-width: 1279px) { .dashboard-main { margin-left: var(--trading-shell-tablet-sidebar-width); @@ -2806,23 +2644,9 @@ body { } @media (min-width: 561px) and (max-width: 1023px) { - .dashboard-shell { - padding-bottom: 0; - } - .dashboard-main { margin-left: var(--trading-shell-tablet-sidebar-width); - } - - .dashboard-content { - padding: 24px 20px 36px; - } - - .dashboard-right-panel { - display: none !important; - } - - .trading-sidebar { + } .trading-sidebar { top: 0; right: auto; bottom: 0; @@ -2895,13 +2719,7 @@ body { max-width: 100%; align-items: stretch; gap: 0; - } - - .trading-sidebar-link { - width: 68px; - min-width: 68px; - } -} + }} @media (max-width: 760px) { .markets-opportunity-grid, @@ -2921,11 +2739,6 @@ body { padding-inline: 8px; } - .trading-sidebar-logo { - width: 52px; - padding: 0; - justify-content: center; - } .trading-sidebar-brand { display: none; @@ -3041,13 +2854,6 @@ body { overflow-x: visible; } - .trading-sidebar-logo { - display: grid !important; - width: 52px; - height: 52px; - margin: 0 0 18px; - padding: 0; - } .trading-sidebar-avatar { display: grid !important; diff --git a/web/src/layout-fixes.css b/web/src/layout-fixes.css index afe83b6..cf2a140 100644 --- a/web/src/layout-fixes.css +++ b/web/src/layout-fixes.css @@ -314,23 +314,23 @@ * ============================================================================ */ .trading-sidebar-logo { /* Layout */ - display: flex !important; - align-items: center !important; - justify-content: flex-start !important; - gap: 12px !important; - width: auto !important; - min-height: 60px !important; - height: auto !important; - margin: 4px 4px 22px !important; - padding: 10px 14px !important; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 12px; + width: auto; + min-height: 60px; + height: auto; + margin: 4px 4px 22px; + padding: 10px 14px; /* Visuals */ - border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)) !important; - border-radius: 14px !important; - background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 62%, var(--bl-success))) !important; - box-shadow: 0 12px 30px color-mix(in oklab, var(--accent) 26%, transparent) !important; + border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); + border-radius: 14px; + background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 62%, var(--bl-success))); + box-shadow: 0 12px 30px color-mix(in oklab, var(--accent) 26%, transparent); color: var(--primary-foreground); /* Don't clip the inner text/icon */ - overflow: visible !important; + overflow: visible; } /* Lucide chart icon inside the logo block */ @@ -342,10 +342,10 @@ } .trading-sidebar-brand { - display: flex !important; - flex-direction: column !important; + display: flex; + flex-direction: column; justify-content: center; - gap: 1px !important; + gap: 1px; min-width: 0; flex: 1 1 auto; line-height: 1.2; @@ -361,17 +361,17 @@ } .trading-sidebar-brand strong { - color: var(--primary-foreground) !important; - font-size: 14px !important; - font-weight: 800 !important; - line-height: 1.2 !important; + color: var(--primary-foreground); + font-size: 14px; + font-weight: 800; + line-height: 1.2; } .trading-sidebar-brand span { - color: color-mix(in oklab, var(--primary-foreground) 80%, transparent) !important; - font-size: 11px !important; - font-weight: 600 !important; - line-height: 1.3 !important; + color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); + font-size: 11px; + font-weight: 600; + line-height: 1.3; letter-spacing: 0.02em; } @@ -380,9 +380,9 @@ * .trading-sidebar-brand { display: none } — make sure the logo block recenters. */ @media (max-width: 1279px) { .trading-sidebar-logo { - justify-content: center !important; - padding: 8px !important; - min-height: 52px !important; + justify-content: center; + padding: 8px; + min-height: 52px; } }