/* Portal App DB1 — paleta zinc, faixas de status com borda esquerda, sem box-shadow nos cards. Labels em português. Referência: Vercel / Linear. Suporta tema claro e escuro via [data-theme] no . */ :root, :root[data-theme="dark"] { --bg: #18181b; /* zinc-900 */ --surface: #27272a; /* zinc-800 */ --surface-2: #3f3f46; /* zinc-700 */ --surface-hover: #2e2e33; --border: #3f3f46; --border-strong: #52525b; --text: #e4e4e7; /* zinc-200 */ --text-dim: #a1a1aa; /* zinc-400 */ --pill-bg: rgba(255, 255, 255, 0.05); /* Cores reais da marca DB1: navy + ciano */ --navy: #003050; --brand: #1aa9cc; /* ciano — acento, links, faixas, foco */ --brand-solid: #1aa9cc; /* fundo do botão primário */ --brand-solid-hover: #36bbdd; --brand-ink: #04222b; /* texto sobre o botão primário (no escuro) */ --ok: #22c55e; --warn: #f59e0b; --danger: #ef4444; } :root[data-theme="light"] { --bg: #fafafa; /* zinc-50 */ --surface: #ffffff; --surface-2: #f4f4f5; /* zinc-100 */ --surface-hover: #f4f4f5; --border: #e4e4e7; /* zinc-200 */ --border-strong: #d4d4d8; /* zinc-300 */ --text: #18181b; /* zinc-900 */ --text-dim: #52525b; /* zinc-600 */ --pill-bg: rgba(0, 0, 0, 0.04); --navy: #003050; --brand: #0a7d9b; /* ciano mais profundo p/ contraste no claro */ --brand-solid: #0a7d9b; --brand-solid-hover: #086880; --brand-ink: #ffffff; --ok: #16a34a; --warn: #d97706; --danger: #dc2626; } :root { --radius: 6px; --radius-lg: 10px; /* terminal de logs: sempre escuro, independente do tema */ --logs-bg: #0f0f12; --logs-text: #d4d4d8; --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background 0.2s var(--ease), color 0.2s var(--ease); } code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; } /* ── Marca (símbolo DB1 + "App") ────────────────────────── */ .brand { display: flex; align-items: center; gap: 0.55rem; } .brand-logo { height: 26px; width: auto; display: block; } .brand-sep { width: 1px; height: 18px; background: var(--border-strong); display: inline-block; flex: none; } .brand-app { font-weight: 600; font-size: 1.05rem; color: var(--text); letter-spacing: -0.01em; } /* ── Topbar ─────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 30; } .topbar-right { display: flex; align-items: center; gap: 1rem; } .team-wrap { display: flex; align-items: center; gap: 0.5rem; } .team-label { color: var(--text-dim); font-size: 0.85rem; } .team-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.35rem 0.6rem; font-size: 0.9rem; cursor: pointer; } .user { display: flex; align-items: center; gap: 0.75rem; } .user-name { color: var(--text-dim); font-size: 0.9rem; } /* ── Layout ─────────────────────────────────────────────── */ .container { max-width: 920px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; } .page-title h1 { font-size: 1.5rem; margin: 0; letter-spacing: -0.02em; } .page-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--text-dim); } .env-label { font-size: 0.82rem; } .team-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--pill-bg); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--brand); padding: 0.15rem 0.6rem; border-radius: var(--radius); font-weight: 600; font-size: 0.85rem; } .apps-count { font-size: 0.82rem; color: var(--text-dim); } .page-actions { display: flex; gap: 0.6rem; align-items: center; } .search-input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.45rem 0.7rem; font: inherit; font-size: 0.9rem; width: 190px; transition: border-color 0.15s var(--ease), width 0.2s var(--ease); } .search-input:focus { outline: none; border-color: var(--brand); } /* ── Botões ─────────────────────────────────────────────── */ .btn { position: relative; font: inherit; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius); padding: 0.45rem 0.85rem; font-size: 0.9rem; line-height: 1.2; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.05s; } .btn:active { transform: translateY(1px); } .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; } .btn-icon { padding: 0.4rem; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .btn-primary { background: var(--brand-solid); color: var(--brand-ink); font-weight: 600; } .btn-primary:hover { background: var(--brand-solid-hover); } .btn-secondary { background: var(--surface-2); color: var(--text); } .btn-secondary:hover { background: var(--border-strong); } .btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); } .btn-danger:hover { background: var(--danger); color: #fff; } .btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--border); } .btn-ghost:hover { color: var(--text); border-color: var(--border-strong); } /* Botão neutro estilo "Entrar com Microsoft" (cor fica só no ícone) */ .btn-ms { background: #2f2f37; color: #fff; border-color: #3f3f46; } .btn-ms:hover { background: #3a3a42; border-color: #52525b; } :root[data-theme="light"] .btn-ms { background: #fff; color: #18181b; border-color: #d4d4d8; } :root[data-theme="light"] .btn-ms:hover { background: #f4f4f5; border-color: #b9b9c0; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn.is-busy { color: transparent !important; pointer-events: none; } .btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0.9em; height: 0.9em; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; color: var(--text); animation: spin 0.6s linear infinite; } .btn-primary.is-busy::after { color: var(--brand-ink); } @keyframes spin { to { transform: rotate(360deg); } } /* ── Lista de apps ──────────────────────────────────────── */ .apps-list { display: flex; flex-direction: column; gap: 0.6rem; } .app-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--text-dim); border-radius: var(--radius); padding: 0.9rem 1.1rem; cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.08s var(--ease); animation: card-in 0.25s var(--ease) both; } .app-card:hover { background: var(--surface-hover); border-color: var(--border-strong); } .app-card.is-running { border-left-color: var(--ok); } .app-card.is-stopped { border-left-color: var(--text-dim); } .app-card.is-error { border-left-color: var(--danger); } .app-card.is-building { border-left-color: var(--warn); } .app-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .app-name { font-weight: 600; } .app-fqdn { color: var(--text-dim); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-status { display: inline-flex; align-items: center; gap: 0.45rem; flex: none; font-size: 0.85rem; color: var(--text-dim); white-space: nowrap; } @keyframes card-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex: none; } .status-dot.is-running { background: var(--ok); } .status-dot.is-stopped { background: var(--text-dim); } .status-dot.is-error { background: var(--danger); } .status-dot.is-building { background: var(--warn); } /* "batimento": rodando pulsa calmo (vivo); processando/transição pulsa mais rápido */ .status-dot.is-running { animation: pulse 2.4s ease-in-out infinite; } .status-dot.is-building, .status-dot.is-pending { animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.82); } } /* Skeleton de carregamento */ .app-card.skeleton { cursor: default; pointer-events: none; display: block; border-left-color: var(--border); animation: none; } .sk-line { height: 0.8rem; border-radius: 4px; margin: 0.25rem 0; background: linear-gradient(90deg, var(--surface-2) 25%, var(--border-strong) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } .sk-line-lg { width: 40%; } .sk-line-sm { width: 65%; height: 0.7rem; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .empty { text-align: center; color: var(--text-dim); padding: 3rem 1rem; } .empty .btn { margin-top: 1rem; } /* ── Banner / Toast ─────────────────────────────────────── */ .banner { border-left: 3px solid var(--warn); background: var(--surface); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem; } .banner-error { border-left-color: var(--danger); } .toast { position: fixed; bottom: 1.5rem; left: 50%; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ok); padding: 0.7rem 1.1rem; border-radius: var(--radius); font-size: 0.9rem; z-index: 80; transform: translate(-50%, 1.5rem); opacity: 0; pointer-events: none; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); } .toast.is-visible { transform: translate(-50%, 0); opacity: 1; } .toast.is-error { border-left-color: var(--danger); } /* ── Overlay / Drawer / Modal ───────────────────────────── */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 40; opacity: 0; visibility: hidden; transition: opacity 0.18s var(--ease), visibility 0.18s; } .overlay.is-visible { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); background: var(--surface); border-left: 1px solid var(--border); z-index: 50; padding: 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.1rem; transform: translateX(100%); visibility: hidden; transition: transform 0.22s var(--ease), visibility 0.22s; } .drawer.is-open { transform: translateX(0); visibility: visible; } .drawer-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; } .drawer-name { margin: 0; font-size: 1.15rem; word-break: break-word; } .drawer-fqdn { color: var(--brand); font-size: 0.85rem; text-decoration: none; word-break: break-all; } .drawer-fqdn:hover { text-decoration: underline; } .drawer-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-dim); } .drawer-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .force-wrap { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--text-dim); cursor: pointer; } .deploy-status { margin: 0; padding: 0.55rem 0.8rem; border-radius: var(--radius); font-size: 0.85rem; background: var(--bg); border-left: 3px solid var(--text-dim); } .deploy-status.is-building { border-left-color: var(--warn); } .deploy-status.is-running { border-left-color: var(--ok); } .deploy-status.is-error { border-left-color: var(--danger); } .drawer-logs { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-height: 0; } .logs-head { display: flex; align-items: center; justify-content: space-between; } .logs-head h3 { margin: 0; font-size: 1rem; } .logs-pre { background: var(--logs-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; margin: 0; overflow: auto; max-height: 50vh; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; color: var(--logs-text); white-space: pre-wrap; word-break: break-word; } .modal { position: fixed; top: 50%; left: 50%; width: min(480px, 94vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); z-index: 50; padding: 1.25rem; transform: translate(-50%, -48%) scale(0.97); opacity: 0; visibility: hidden; transition: transform 0.18s var(--ease), opacity 0.18s var(--ease), visibility 0.18s; } .modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; } /* O feedback pode abrir POR CIMA do drawer (z 50) — fica acima dele. */ #fb-overlay { z-index: 60; } #fb-modal { z-index: 65; } .drawer-help { align-self: flex-start; color: var(--text-dim); } .drawer-help:hover { color: var(--text); } .danger-zone { border-top: 1px solid var(--border); padding-top: 0.9rem; } .delete-confirm { margin-top: 0.6rem; border-left: 3px solid var(--danger); background: var(--bg); padding: 0.7rem 0.8rem; border-radius: var(--radius); } .delete-confirm p { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--text); } .delete-actions { display: flex; gap: 0.5rem; justify-content: flex-end; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .modal-head h2 { margin: 0; font-size: 1.15rem; } .create-form { display: flex; flex-direction: column; gap: 0.9rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; } .field > span { color: var(--text-dim); } .field input, .field textarea { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.65rem; font: inherit; transition: border-color 0.15s var(--ease); } .field textarea { resize: vertical; min-height: 4.5rem; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); } /* Tipos de feedback (radios como chips) */ .fb-types { display: flex; flex-wrap: wrap; gap: 0.5rem; } .fb-type { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.7rem; font-size: 0.88rem; color: var(--text-dim); transition: border-color 0.15s var(--ease), color 0.15s var(--ease); } .fb-type:has(input:checked) { border-color: var(--brand); color: var(--text); border-left-width: 3px; } .field small { color: var(--text-dim); font-size: 0.78rem; } .field-row { display: flex; gap: 0.8rem; } .field-row .field { flex: 1; } .notice { border-left: 3px solid var(--warn); background: var(--bg); padding: 0.6rem 0.8rem; border-radius: var(--radius); font-size: 0.82rem; color: var(--text-dim); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.25rem; } /* ── Tela de login ──────────────────────────────────────── */ .login-screen { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: var(--bg); padding: 1.5rem; } .login-card { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: var(--radius-lg); padding: 2.5rem 2rem 2.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; } .login-brand { justify-content: center; margin-bottom: 0.4rem; } .login-brand .brand-logo { height: 34px; } .login-brand .brand-app { font-size: 1.25rem; } .login-title { font-size: 1.4rem; margin: 0; letter-spacing: -0.02em; } .login-text { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 0.6rem; max-width: 28ch; } .login-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.65rem 1.1rem; font-size: 0.95rem; } .ms-icon { display: block; flex: none; } .login-msg { color: var(--warn); font-size: 0.85rem; margin: 0.4rem 0 0; } body.not-authed .topbar, body.not-authed .container { display: none; } [hidden] { display: none !important; } /* ── Responsivo ─────────────────────────────────────────── */ @media (max-width: 560px) { .topbar { padding: 0.7rem 1rem; } .user-name { display: none; } .search-input { width: 130px; } .page-head { flex-direction: column; } .page-actions { width: 100%; } .search-input { flex: 1; } } /* ── Acessibilidade: respeita preferência por menos movimento ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }