/* CasteX Cloud/Instance — admin theme * * Define as variáveis --casx-* e classes utilitárias (.casx-card, * .casx-btn, .casx-input, .casx-label) usadas pelos Components do * Core admin (Cloud*, system_status) e pelos SharedComponents * (CASXAlert, CASXFormBox, CASXStatusBadge, CASXBreadcrumb, etc.). * * Tema base = light (compatível com Components que usam bg-white * hardcoded). Override via aplicado pelo * CASXThemeToggle. */ :root { /* Backgrounds (semântica usada pelos Components/SharedComponents): * --casx-bg = página externa * --casx-bg-secondary = área de conteúdo (page content surface) * --casx-bg-tertiary = chips, buttons secondary, empty states * --casx-card-bg = superfície de card (branco no light) */ --casx-bg: #f0f2f5; --casx-bg-secondary: #f7f8fa; --casx-bg-tertiary: #f3f4f6; --casx-card-bg: #ffffff; /* Borders */ --casx-border: #e5e7eb; --casx-border-light: #f1f5f9; /* Text */ --casx-text: #1f2937; --casx-text-secondary: #4b5563; --casx-text-muted: #6b7280; --casx-header-text: #ffffff; /* Brand */ --casx-primary: #6366f1; --casx-primary-hover: #818cf8; --casx-primary-light: rgba(99, 102, 241, 0.1); --casx-secondary: #8b5cf6; --casx-secondary-light: rgba(139, 92, 246, 0.1); /* Status */ --casx-success: #16a34a; --casx-success-light: rgba(34, 197, 94, 0.12); --casx-warning: #d97706; --casx-warning-light: rgba(234, 179, 8, 0.15); --casx-danger: #dc2626; --casx-danger-light: rgba(239, 68, 68, 0.12); --casx-info: #2563eb; --casx-info-light: rgba(59, 130, 246, 0.12); /* Shape */ --casx-radius: 12px; --casx-radius-sm: 8px; --casx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --casx-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --casx-shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.08); } /* Dark mode — ativado por data-theme="dark" (CASXThemeToggle) */ [data-theme="dark"] { --casx-bg: #0b1220; --casx-bg-secondary: #0f172a; --casx-bg-tertiary: #334155; --casx-card-bg: #1e293b; --casx-border: #334155; --casx-border-light: #475569; --casx-text: #f1f5f9; --casx-text-secondary: #cbd5e1; --casx-text-muted: #94a3b8; --casx-header-text: #ffffff; --casx-primary: #818cf8; --casx-primary-hover: #a5b4fc; --casx-primary-light: rgba(129, 140, 248, 0.18); --casx-secondary: #a78bfa; --casx-secondary-light: rgba(167, 139, 250, 0.18); --casx-success: #4ade80; --casx-success-light: rgba(74, 222, 128, 0.15); --casx-warning: #fbbf24; --casx-warning-light: rgba(251, 191, 36, 0.15); --casx-danger: #f87171; --casx-danger-light: rgba(248, 113, 113, 0.15); --casx-info: #60a5fa; --casx-info-light: rgba(96, 165, 250, 0.15); --casx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --casx-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --casx-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); } /* ========================================================== */ /* Cards */ /* ========================================================== */ .casx-card { background: var(--casx-card-bg); border: 1px solid var(--casx-border); border-radius: var(--casx-radius); box-shadow: var(--casx-shadow-sm); color: var(--casx-text); transition: box-shadow 0.2s ease, transform 0.2s ease; } .casx-card:hover { box-shadow: var(--casx-shadow); } /* ========================================================== */ /* Buttons */ /* ========================================================== */ .casx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1px solid transparent; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; user-select: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; text-decoration: none; white-space: nowrap; } .casx-btn:focus-visible { outline: 2px solid var(--casx-primary); outline-offset: 2px; } .casx-btn:disabled, .casx-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .casx-btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; } /* Primary — gradiente indigo→violet (estilo SignClient bp-btn-primary) */ .casx-btn-primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #ffffff; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); } .casx-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42); } .casx-btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3); } /* Secondary — neutro */ .casx-btn-secondary { background: var(--casx-bg-tertiary); color: var(--casx-text-secondary); border-color: var(--casx-border); } .casx-btn-secondary:hover:not(:disabled) { background: var(--casx-border-light); border-color: var(--casx-border-light); color: var(--casx-text); } [data-theme="dark"] .casx-btn-secondary:hover:not(:disabled) { background: var(--casx-border); color: var(--casx-text); } /* Success — verde gradiente */ .casx-btn-success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #ffffff; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3); } .casx-btn-success:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4); } /* Danger — vermelho gradiente */ .casx-btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #ffffff; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); } .casx-btn-danger:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4); } /* Warning */ .casx-btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #ffffff; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); } .casx-btn-warning:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4); } /* Ghost — transparente, só borda no hover */ .casx-btn-ghost { background: transparent; color: var(--casx-text-secondary); } .casx-btn-ghost:hover:not(:disabled) { background: var(--casx-bg-tertiary); color: var(--casx-text); } /* ========================================================== */ /* Inputs e labels */ /* ========================================================== */ .casx-label { display: block; font-size: 11px; font-weight: 600; color: var(--casx-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } /* .casx-input — sobrescreve a versão Tailwind (output.css) por uma * variante compacta inspirada no SignClient (.bp-input/.cmf-input): * padding 9px 12px, font 13px, border 1px #d1d5db, radius 8px. */ .casx-input, input.casx-input, select.casx-input, textarea.casx-input { width: 100%; padding: 9px 12px; border: 1px solid var(--casx-border); border-radius: var(--casx-radius-sm); font-size: 13px; line-height: 1.4; box-sizing: border-box; background: var(--casx-card-bg); color: var(--casx-text); box-shadow: var(--casx-shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .casx-input:hover, input.casx-input:hover, select.casx-input:hover, textarea.casx-input:hover { border-color: #c7d2fe; } .casx-input:focus, input.casx-input:focus, select.casx-input:focus, textarea.casx-input:focus { outline: none; border-color: var(--casx-primary); box-shadow: 0 0 0 3px var(--casx-primary-light); } .casx-input:disabled, input.casx-input:disabled, select.casx-input:disabled, textarea.casx-input:disabled { background: var(--casx-bg-tertiary); color: var(--casx-text-muted); cursor: not-allowed; } [data-theme="dark"] .casx-input, [data-theme="dark"] input.casx-input, [data-theme="dark"] select.casx-input, [data-theme="dark"] textarea.casx-input { background: var(--casx-bg-tertiary); } [data-theme="dark"] .casx-input:focus, [data-theme="dark"] input.casx-input:focus, [data-theme="dark"] select.casx-input:focus, [data-theme="dark"] textarea.casx-input:focus { background: var(--casx-card-bg); } /* ========================================================== */ /* Form sections (replicando bp-section do SignClient) */ /* ========================================================== */ .casx-section { background: var(--casx-card-bg); border: 1px solid var(--casx-border); border-radius: var(--casx-radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--casx-shadow-sm); } .casx-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--casx-text); margin-bottom: 12px; } /* ========================================================== */ /* Form layout — wrap centrado, rows e grid */ /* ========================================================== */ /* Container central de uma página de form (CASXFormPage envolve * automaticamente o conteúdo aqui). Largura semelhante ao SignClient * cmf-wrap/svf-wrap (~880px) — leitura confortável sem expandir * inputs em telas largas. */ .casx-form-wrap { max-width: 880px; margin: 0 auto; width: 100%; } /* Row horizontal: filhos em colunas iguais, gap 12px, espaço abaixo. */ .casx-form-row { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-end; } .casx-form-row > * { flex: 1; min-width: 0; } /* Grid 2/3/4 colunas. Em telas pequenas vira 1 col. */ .casx-form-grid-2, .casx-form-grid-3, .casx-form-grid-4 { display: grid; gap: 12px; margin-bottom: 12px; } .casx-form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .casx-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .casx-form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 640px) { .casx-form-row { flex-direction: column; align-items: stretch; } .casx-form-grid-2, .casx-form-grid-3, .casx-form-grid-4 { grid-template-columns: 1fr; } } /* Bloco label+input (uso autônomo dentro de rows/grids). */ .casx-form-field { display: flex; flex-direction: column; gap: 4px; } /* Hint/help text abaixo de um input. */ .casx-form-hint { font-size: 11px; color: var(--casx-text-muted); margin-top: 4px; line-height: 1.5; } /* Barra de ações no fim da página de form. */ .casx-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; } /* ========================================================== */ /* Body background quando o admin está em uso */ /* ========================================================== */ [data-theme="dark"] body { background: var(--casx-bg); color: var(--casx-text); }