/* ========================================================================== PulseX — app.css Design tokens + layout + componentes compartilhados. Carregar como no . Cada template pode adicionar SEU CSS específico depois desse arquivo. ========================================================================== */ /* --- RESET ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* --- DESIGN TOKENS -------------------------------------------------------- */ :root { /* Superfícies */ --bg: #080a0f; --surface: #0e1117; --surface2: #13161f; --surface3: #181c27; /* Bordas e contornos */ --border: #1a1f2e; --border2: #222840; /* Tipografia */ --text: #dde4f0; --muted: #4a5568; --muted2: #64748b; /* Cores da marca */ --accent: #3b82f6; --accent-dim: rgba(59, 130, 246, 0.08); --accent-glow: rgba(59, 130, 246, 0.18); --accent-bright: rgba(59, 130, 246, 0.30); --green: #10b981; --green-dim: rgba(16, 185, 129, 0.08); --green-glow: rgba(16, 185, 129, 0.20); --red: #ef4444; --red-dim: rgba(239, 68, 68, 0.08); --red-glow: rgba(239, 68, 68, 0.20); --yellow: #f59e0b; --yellow-dim: rgba(245, 158, 11, 0.08); --purple: #8b5cf6; --purple-dim: rgba(139, 92, 246, 0.08); /* Tipografia */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-sans: 'Syne', system-ui, sans-serif; /* Geometria */ --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Sombras */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px rgba(0,0,0,0.4); --shadow-lg: 0 16px 48px rgba(0,0,0,0.5); } /* --- BASE ----------------------------------------------------------------- */ html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; } a { color: inherit; text-decoration: none; } /* --- LAYOUT --------------------------------------------------------------- */ .layout { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; } .content { display: flex; flex-direction: column; min-height: 100vh; } .main { padding: 24px 28px; flex: 1; display: flex; flex-direction: column; gap: 18px; } @media (max-width: 720px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } .main { padding: 16px; } } /* --- SIDEBAR -------------------------------------------------------------- */ .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 24px 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sidebar-logo { padding: 0 20px 24px; border-bottom: 1px solid var(--border); } .logo-mark { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--accent); } .logo-sub { font-size: 10px; color: var(--muted2); text-transform: uppercase; letter-spacing: 2px; margin-top: 3px; } .sidebar-nav { padding: 16px 10px; flex: 1; overflow-y: auto; } .nav-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); padding: 0 10px; margin-bottom: 4px; margin-top: 18px; } .nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius); color: var(--muted2); text-decoration: none; font-size: 13px; font-weight: 500; transition: all .12s; cursor: pointer; border: none; background: none; width: 100%; text-align: left; } .nav-item:hover { color: var(--text); background: var(--surface2); } .nav-item.active { color: var(--accent); background: var(--accent-dim); } .icon { width: 15px; height: 15px; flex-shrink: 0; } .sidebar-footer { padding: 14px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .user-pill { display: flex; align-items: center; gap: 10px; justify-content: center; } .user-avatar { width: 28px; height: 28px; border-radius: 6px; background: var(--accent-dim); border: 1px solid var(--accent-glow); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 700; flex-shrink: 0; } .user-info { flex: 1; min-width: 0; } .user-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 10px; color: var(--muted2); text-transform: uppercase; letter-spacing: .8px; } .logout-btn { color: var(--muted); transition: color .12s; flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; } .logout-btn:hover { color: var(--red); } .lang-switcher { padding: 0 10px 10px; } .lang-select { width: 100%; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 6px 8px; font-size: 12px; color: var(--text); cursor: pointer; outline: none; font-family: var(--font-sans); } /* --- TOPBAR --------------------------------------------------------------- */ .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 28px; height: 52px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; } .breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--muted2); text-transform: uppercase; letter-spacing: 1px; } .breadcrumb span { color: var(--text); } /* --- BADGES --------------------------------------------------------------- */ .badge-running { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 10px; font-weight: 700; background: var(--green-dim); color: var(--green); border: 1px solid var(--green-glow); } .badge-stopped { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 10px; font-weight: 700; background: var(--surface2); color: var(--muted2); border: 1px solid var(--border2); } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s ease-in-out infinite; } /* --- CARDS ---------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .card-header { padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted2); display: flex; align-items: center; gap: 8px; } .card-title-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--accent); } .card-title-dot.blue { background: var(--accent); } .card-title-dot.green { background: var(--green); } .card-title-dot.yellow { background: var(--yellow); } .card-title-dot.red { background: var(--red); } .card-body { padding: 22px; } /* --- FORM FIELDS (usado por todos os contratos) -------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label, .form-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted2); } /* --- BUTTONS -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all .15s; border: 1px solid transparent; text-decoration: none; white-space: nowrap; } .btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } .btn-sm { padding: 6px 12px; font-size: 9px; } .btn-primary { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-bright); } .btn-primary:hover { background: rgba(59,130,246,0.16); } .btn-success { background: var(--green-dim); color: var(--green); border-color: var(--green-glow); } .btn-success:hover { background: rgba(16,185,129,0.16); } .btn-danger { background: var(--red-dim); color: var(--red); border-color: var(--red-glow); } .btn-danger:hover { background: rgba(239,68,68,0.16); } .btn-ghost { background: var(--surface2); color: var(--muted2); border-color: var(--border2); } .btn-ghost:hover { color: var(--text); border-color: var(--accent); } .btn-start { composes: btn-success; } /* aliases para retrocompat */ .btn-stop { composes: btn-danger; } .btn-save { composes: btn-primary; } /* aliases concretos (sem composes pra Thymeleaf puro) */ .btn-start { background: var(--green-dim); color: var(--green); border-color: var(--green-glow); } .btn-start:hover { background: rgba(16,185,129,0.16); } .btn-stop { background: var(--red-dim); color: var(--red); border-color: var(--red-glow); } .btn-stop:hover { background: rgba(239,68,68,0.16); } .btn-save { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-bright); } .btn-save:hover { background: rgba(59,130,246,0.16); } .btn-deriv { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; background: #ff444f; color: #fff; border-radius: var(--radius); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; transition: filter .15s, transform .15s; border: none; cursor: pointer; } .btn-deriv:hover { filter: brightness(1.10); } .btn-deriv:active { transform: translateY(1px); } /* --- FORMS ---------------------------------------------------------------- */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted2); } .form-input { background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text); outline: none; transition: border-color .12s, box-shadow .12s; width: 100%; } .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.10); } .form-hint { font-size: 11px; color: var(--muted2); line-height: 1.6; } .form-hint a { color: var(--accent); } .form-hint a:hover { text-decoration: underline; } /* --- ALERTS --------------------------------------------------------------- */ .alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-radius: var(--radius); font-size: 13px; line-height: 1.5; } .alert-success { background: var(--green-dim); border: 1px solid var(--green-glow); color: var(--green); } .alert-error, .alert-red { background: var(--red-dim); border: 1px solid var(--red-glow); color: var(--red); } .alert-yellow { background: var(--yellow-dim); border: 1px solid rgba(245,158,11,0.20); color: var(--yellow); } .alert-accent { background: var(--accent-dim); border: 1px solid var(--accent-glow); color: var(--accent); } /* --- STAT STRIP ----------------------------------------------------------- */ .stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .stat-item { background: var(--surface); padding: 16px 20px; position: relative; } .stat-item::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; } .stat-item.c-blue::after { background: var(--accent); opacity: 1; } .stat-item.c-green::after { background: var(--green); opacity: 1; } .stat-item.c-yellow::after { background: var(--yellow); opacity: 1; } .stat-item.c-purple::after { background: var(--purple); opacity: 1; } .stat-item.c-red::after { background: var(--red); opacity: 1; } .stat-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted2); margin-bottom: 6px; } .stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 700; line-height: 1; } .stat-value.green { color: var(--green); } .stat-value.red { color: var(--red); } .stat-value.blue { color: var(--accent); } .stat-sub { font-size: 11px; color: var(--muted2); margin-top: 4px; } @media (max-width: 960px) { .stat-strip { grid-template-columns: repeat(3, 1fr); } } /* --- TABELA TRADES -------------------------------------------------------- */ .trades-table { width: 100%; border-collapse: collapse; min-width: 740px; } .trades-table th { padding: 9px 16px; text-align: left; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); background: var(--surface2); border-bottom: 1px solid var(--border); } .trades-table td { padding: 10px 16px; font-size: 12px; border-bottom: 1px solid var(--border); transition: background .1s; } .trades-table tr:last-child td { border-bottom: none; } .trades-table tr:hover td { background: var(--surface2); } .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; } .badge-win { background: var(--green-dim); color: var(--green); } .badge-loss { background: var(--red-dim); color: var(--red); } .badge-open { background: var(--yellow-dim); color: var(--yellow); } .badge-accu { background: var(--accent-dim); color: var(--accent); } .profit-pos { color: var(--green); font-family: var(--font-mono); } .profit-neg { color: var(--red); font-family: var(--font-mono); } .mono { font-family: var(--font-mono); } .muted { color: var(--muted2); } /* --- ANIMAÇÕES ------------------------------------------------------------ */ .fade-in { animation: fi .3s ease both; } .d1 { animation-delay: .05s; } .d2 { animation-delay: .10s; } .d3 { animation-delay: .15s; } .d4 { animation-delay: .20s; } @keyframes fi { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } @keyframes spin { to { transform: rotate(360deg); } } /* --- TOAST ---------------------------------------------------------------- */ .toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; min-width: 280px; max-width: 360px; box-shadow: var(--shadow-md); display: flex; align-items: flex-start; gap: 10px; animation: toast-in .2s ease; } .toast.hiding { animation: toast-out .2s ease both; } @keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-out { to { opacity: 0; transform: translateX(20px); } } .toast-progress { height: 2px; background: var(--accent); border-radius: 1px; margin-top: 8px; animation: progress-drain 15s linear forwards; } @keyframes progress-drain { from { width: 100%; } to { width: 0; } } /* --- STATUS DOTS ---------------------------------------------------------- */ .status-tag { font-size: 10px; font-family: var(--font-mono); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .status-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-ok { color: var(--green); } .status-warn { color: var(--yellow); } .status-error { color: var(--red); } .status-missing { color: var(--muted2); }