/* Tipsly Trading — FreqUI theme (dark + light). Injected by nginx sub_filter. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ---------- DARK (FreqUI adds .dark on ) ---------- */ html.dark { --tp-bg1: #0b0e17; --tp-bg2: #111827; --tp-glass: rgba(17, 24, 39, 0.55); --tp-glass-strong: rgba(17, 24, 39, 0.78); --tp-border: rgba(148, 163, 184, 0.14); --tp-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --tp-a1: #22d3ee; --tp-a2: #a78bfa; --tp-up: #10b981; --tp-down: #f43f5e; --ui-text: #e5e7eb; --ui-text-highlighted: #ffffff; --ui-text-muted: #94a3b8; --ui-text-dimmed: #64748b; --ui-text-toned: #cbd5e1; --ui-bg: transparent; --ui-bg-muted: rgba(30, 41, 59, 0.45); --ui-bg-elevated: rgba(30, 41, 59, 0.55); --ui-bg-accented: rgba(51, 65, 85, 0.6); --ui-border: var(--tp-border); --ui-border-muted: var(--tp-border); --ui-border-accented: rgba(148, 163, 184, 0.22); --ui-primary: #22d3ee; --ui-secondary: #a78bfa; --ui-success: #10b981; --ui-error: #f43f5e; --color-profit: #10b981; --color-loss: #f43f5e; } /* ---------- LIGHT ---------- */ html:not(.dark) { --tp-bg1: #f8fafc; --tp-bg2: #eef2f7; --tp-glass: rgba(255, 255, 255, 0.72); --tp-glass-strong: rgba(255, 255, 255, 0.9); --tp-border: #e2e8f0; --tp-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); --tp-a1: #0891b2; --tp-a2: #7c3aed; --tp-up: #059669; --tp-down: #e11d48; --ui-text: #0f172a; --ui-text-highlighted: #0f172a; --ui-text-muted: #475569; --ui-text-dimmed: #94a3b8; --ui-text-toned: #334155; --ui-bg: transparent; --ui-bg-muted: rgba(241, 245, 249, 0.7); --ui-bg-elevated: rgba(248, 250, 252, 0.85); --ui-bg-accented: #e2e8f0; --ui-border: #e2e8f0; --ui-border-muted: #e2e8f0; --ui-border-accented: #cbd5e1; --ui-primary: #0891b2; --ui-secondary: #7c3aed; --ui-success: #059669; --ui-error: #e11d48; --color-profit: #059669; --color-loss: #e11d48; } html, body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; font-feature-settings: 'cv11', 'ss01', 'tnum'; -webkit-font-smoothing: antialiased; } body { background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--tp-a1) 10%, transparent), transparent 60%), radial-gradient(900px 500px at 110% 10%, color-mix(in srgb, var(--tp-a2) 10%, transparent), transparent 60%), linear-gradient(160deg, var(--tp-bg1), var(--tp-bg2)) fixed !important; color: var(--ui-text); min-height: 100vh; } #app, #app > div { background: transparent !important; } /* Glass panels: navbar, cards, grid-layout items, popovers, modals */ header, nav, .vue-grid-item > div, .vue-grid-item .card, [data-slot="root"].rounded-lg, [data-slot="content"], [role="dialog"], [role="menu"], [role="listbox"] { background: var(--tp-glass) !important; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--tp-border) !important; box-shadow: var(--tp-shadow); } header, nav { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .vue-grid-item > div, [data-slot="content"], [role="dialog"], [role="menu"], [role="listbox"] { border-radius: 12px !important; overflow: hidden; } [role="dialog"], [role="menu"], [role="listbox"] { background: var(--tp-glass-strong) !important; } /* Buttons & inputs */ button, [role="button"], a.inline-flex { border-radius: 10px !important; transition: box-shadow .2s ease, transform .15s ease, background-color .2s ease, color .2s ease !important; } button:hover, [role="button"]:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tp-a1) 45%, transparent), 0 0 18px color-mix(in srgb, var(--tp-a1) 35%, transparent); } button:active { transform: translateY(1px); } input, select, textarea { border-radius: 10px !important; background: var(--ui-bg-muted) !important; border-color: var(--tp-border) !important; } input:focus, select:focus, textarea:focus { outline: none !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tp-a1) 45%, transparent) !important; } /* Tabs / active nav: accent text + subtle tint only (no border / glow / underline) */ [role="tab"][data-state="active"], [aria-current="page"], a.router-link-active, nav a[data-slot="link"][data-active], header a[data-slot="link"][data-active] { color: var(--tp-a1) !important; background: color-mix(in srgb, var(--tp-a1) 10%, transparent) !important; background-image: none !important; box-shadow: none !important; border: 0 !important; outline: none !important; border-radius: 8px; } nav a[data-slot="link"]::before, nav a[data-slot="link"]::after, header a[data-slot="link"]::before, header a[data-slot="link"]::after, a[aria-current="page"]::before, a[aria-current="page"]::after { box-shadow: none !important; border: 0 !important; outline: none !important; background-image: none !important; } nav a[data-slot="link"]:hover, header a[data-slot="link"]:hover, nav button:hover, header button:hover { box-shadow: none !important; } /* Tables: airy, no zebra, subtle separators */ table { border-collapse: separate !important; border-spacing: 0 !important; } table thead th { background: transparent !important; color: var(--ui-text-muted) !important; font-weight: 600 !important; font-size: .72rem !important; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--tp-border) !important; } table tbody tr, table tbody tr:nth-child(odd), table tbody tr:nth-child(even) { background: transparent !important; } table tbody td { padding-top: .55rem !important; padding-bottom: .55rem !important; border-bottom: 1px solid color-mix(in srgb, var(--tp-border) 60%, transparent) !important; } table tbody tr:hover td { background: color-mix(in srgb, var(--tp-a1) 6%, transparent) !important; } /* Profit / loss */ .text-profit, .profit, [class*="text-green"], [class*="text-success"] { color: var(--tp-up) !important; } .text-loss, .loss, [class*="text-red"], [class*="text-error"] { color: var(--tp-down) !important; } /* Tipsly logo (replaces the Freqtrade mask logo) - round, no glow */ div[title="Freqtrade logo"] { -webkit-mask: none !important; mask: none !important; background: url('/_tipsly/logo.png?v=4') center / contain no-repeat !important; width: 34px !important; height: 34px !important; min-width: 34px; min-height: 34px; border-radius: 50% !important; filter: none !important; box-shadow: none !important; } a:has(> div[title="Freqtrade logo"]), a:has(> div[title="Freqtrade logo"]):hover, div:has(> div[title="Freqtrade logo"]) { box-shadow: none !important; filter: none !important; } /* brand link: no active-route tint box behind the logo/name */ a:has(> div[title="Freqtrade logo"]), a:has(> div[title="Freqtrade logo"]).router-link-active, a:has(> div[title="Freqtrade logo"])[aria-current="page"] { background: transparent !important; outline: none !important; border: 0 !important; } /* Brand text: single solid violet (no gradient) */ header .text-xl.font-bold, nav .text-xl.font-bold, header .text-xl.font-bold .text-primary, nav .text-xl.font-bold .text-primary { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; letter-spacing: -.01em; color: #a78bfa !important; } html:not(.dark) header .text-xl.font-bold, html:not(.dark) nav .text-xl.font-bold, html:not(.dark) header .text-xl.font-bold .text-primary, html:not(.dark) nav .text-xl.font-bold .text-primary { color: #7c3aed !important; } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-text-muted) 40%, transparent) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ui-text-muted) 35%, transparent); border-radius: 8px; } /* Remove FreqUI's primary-colored line under the navbar (both themes) */ div.flex.border-b.border-primary { border-bottom-color: transparent !important; border-bottom-width: 0 !important; }