/* ========================================================================== Hostcloud DDNS — Theme Paleta: negro / blanco / verde / gris + ámbar como acento funcional Tipografía: Space Grotesk (display) · Inter (UI) · JetBrains Mono (datos) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root{ --black:#0B0D0C; --white:#FFFFFF; --pure-white:#FFFFFF; /* always literal white — never swapped by dark mode */ --off-white:#F6F8F6; --green:#14A76C; --green-deep:#0E7A50; --green-tint:#E6F5EE; --gray-900:#1B1E1C; --gray-700:#4B514D; --gray-500:#7C837E; --gray-300:#DCE0DC; --gray-150:#EEF1EE; --amber:#E39A2E; --amber-tint:#FCF0DA; --danger:#C24A3F; --danger-tint:#F8E9E7; --font-display:'Space Grotesk', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'JetBrains Mono', monospace; --radius-lg:14px; --radius:10px; --radius-sm:7px; --shadow-card:0 1px 2px rgba(11,13,12,.05), 0 8px 24px -16px rgba(11,13,12,.12); --shadow-pop:0 12px 32px -12px rgba(11,13,12,.28); } /* ---------- Dark mode ---------- Uses Bootstrap's native [data-bs-theme="dark"] attribute (set on ) so Bootstrap's own components (form-control, table, etc.) repaint too — not just our custom classes. We swap our tokens on the same selector, then re-assert background+text together on every custom component so nothing is left depending on inheritance alone. */ [data-bs-theme="dark"]{ color-scheme:dark; --off-white:#0F1110; --white:#181B19; --black:#000000; --gray-900:#F0F2F0; --gray-700:#B7BDB8; --gray-500:#8B928D; --gray-300:#2E322F; --gray-150:#202422; --green-tint:#0F2B22; --amber-tint:#2C2313; --danger-tint:#301E1B; --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.5); } [data-bs-theme="dark"] body{ background:var(--off-white); color:var(--gray-900); } /* Surfaces */ [data-bs-theme="dark"] .panel, [data-bs-theme="dark"] .stat-card, [data-bs-theme="dark"] .status-chip{ background:var(--white); border-color:var(--gray-300); color:var(--gray-900); } /* Text that lives on those surfaces */ [data-bs-theme="dark"] .panel-title, [data-bs-theme="dark"] .stat-value, [data-bs-theme="dark"] .topbar h1, [data-bs-theme="dark"] .empty-state .font-display{ color:var(--gray-900); } [data-bs-theme="dark"] .stat-label, [data-bs-theme="dark"] .topbar .subtitle, [data-bs-theme="dark"] .panel-title .count, [data-bs-theme="dark"] .empty-state, [data-bs-theme="dark"] .cell-time{ color:var(--gray-500); } /* Table */ [data-bs-theme="dark"] .table-hosts thead th{ color:var(--gray-500); border-bottom-color:var(--gray-300); } [data-bs-theme="dark"] .table-hosts tbody td{ color:var(--gray-900); background:transparent; border-bottom-color:var(--gray-150); } [data-bs-theme="dark"] .table-hosts tbody tr:hover{ background:var(--off-white); } [data-bs-theme="dark"] .cell-ip, [data-bs-theme="dark"] .cell-interval{ color:var(--gray-700); } [data-bs-theme="dark"] .interval-field .unit-label{ color:var(--gray-500); } /* Inputs — this is the one that was rendering as a white square */ [data-bs-theme="dark"] .form-control{ background-color:var(--off-white); border-color:var(--gray-300); color:var(--gray-900); } [data-bs-theme="dark"] .form-control::placeholder{ color:var(--gray-500); } [data-bs-theme="dark"] .form-control:focus{ background-color:var(--off-white); color:var(--gray-900); } /* Icon buttons */ [data-bs-theme="dark"] .btn-icon{ background:var(--white); border-color:var(--gray-300); color:var(--gray-700); } [data-bs-theme="dark"] .btn-outline-dark-custom{ border-color:var(--gray-300); color:var(--gray-900); } [data-bs-theme="dark"] .btn-outline-dark-custom:hover{ background:var(--gray-150); } /* Stat icon chips */ [data-bs-theme="dark"] .stat-icon.i-total, [data-bs-theme="dark"] .stat-icon.i-offline{ background:var(--gray-150); color:var(--gray-700); } /* Status pills */ [data-bs-theme="dark"] .status-pill.is-offline{ background:var(--gray-150); color:var(--gray-700); } *{ box-sizing:border-box; } body{ background:var(--off-white); color:var(--gray-900); font-family:var(--font-body); transition:background .2s ease, color .2s ease; } h1,h2,h3,h4,.font-display{ font-family:var(--font-display); letter-spacing:-.01em; } .text-mono, .mono{ font-family:var(--font-mono); } a{ text-decoration:none; } ::selection{ background:var(--green); color:var(--white); } /* Focus ring uses the amber accent — the one job it has everywhere */ a:focus-visible, button:focus-visible, .form-control:focus-visible, .form-control:focus{ outline:none; box-shadow:0 0 0 3px rgba(227,154,46,.35) !important; border-color:var(--amber) !important; } /* ========================================================================== Layout shell ========================================================================== */ .app-shell{ min-height:100vh; } .sidebar{ background:var(--black); color:var(--pure-white); min-height:100vh; padding:28px 20px; display:flex; flex-direction:column; } .sidebar-logo{ width:100%; max-width:150px; height:auto; display:block; margin:4px auto 30px auto; } .sidebar-nav{ display:flex; flex-direction:column; gap:2px; margin-top:8px; } .nav-link-custom{ display:flex; align-items:center; gap:12px; color:var(--pure-white); opacity:.8; font-size:14.5px; font-weight:500; padding:10px 12px; border-radius:var(--radius-sm); border-left:2px solid transparent; transition:background .15s ease, opacity .15s ease, border-color .15s ease; } .nav-link-custom svg{ flex:0 0 auto; } .nav-link-custom:hover{ opacity:1; background:rgba(255,255,255,.08); } .nav-link-custom.active{ opacity:1; background:rgba(20,167,108,.2); border-left-color:var(--green); } .sidebar-footer{ margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.4); letter-spacing:.02em; } .main-content{ padding:28px 24px 40px; } /* ---------- Topbar ---------- */ .topbar{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; } .topbar h1{ font-size:26px; font-weight:700; margin:0 0 4px; color:var(--gray-900); } .topbar .subtitle{ color:var(--gray-500); font-size:14px; margin:0; } .status-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--gray-300); border-radius:999px; padding:7px 14px 7px 10px; font-size:12.5px; font-weight:600; color:var(--gray-700); box-shadow:var(--shadow-card); } /* ========================================================================== Pulse dot — the signature element ========================================================================== */ .pulse-dot{ position:relative; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); flex:0 0 auto; } .pulse-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--green); animation:pulse-ring 1.8s cubic-bezier(0.4,0,0.6,1) infinite; } .pulse-dot.dim{ background:var(--gray-500); } .pulse-dot.dim::after{ display:none; } @keyframes pulse-ring{ 0% { transform:scale(1); opacity:.55; } 75% { transform:scale(2.6); opacity:0; } 100% { transform:scale(2.6); opacity:0; } } @media (prefers-reduced-motion: reduce){ .pulse-dot::after{ animation:none; display:none; } } /* ========================================================================== Stat cards ========================================================================== */ .stat-card{ background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:18px 18px 16px; height:100%; display:flex; flex-direction:column; gap:14px; } .stat-icon{ width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; } .stat-icon.i-total{ background:var(--gray-150); color:var(--gray-700); } .stat-icon.i-online{ background:var(--green-tint); color:var(--green-deep); } .stat-icon.i-offline{ background:var(--gray-150); color:var(--gray-700); } .stat-icon.i-changes{ background:var(--amber-tint); color:var(--amber); } .stat-label{ font-size:12.5px; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; } .stat-value{ font-family:var(--font-display); font-size:30px; font-weight:700; line-height:1; color:var(--gray-900); } .stat-value.text-green{ color:var(--green-deep); } .stat-value.text-amber{ color:var(--amber); } /* ========================================================================== Cards / panels ========================================================================== */ .panel{ background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:22px; } .panel + .panel{ margin-top:20px; } .panel-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; } .panel-title{ font-size:15px; font-weight:700; color:var(--gray-900); margin:0; } .panel-title .count{ font-family:var(--font-mono); font-weight:500; color:var(--gray-500); font-size:13px; margin-left:6px; } /* ---------- Create host form ---------- */ .create-row{ display:flex; flex-direction:column; gap:10px; } @media (min-width:768px){ .create-row{ flex-direction:row; } } /* ========================================================================== Form controls ========================================================================== */ .form-control{ background:var(--off-white); border:1px solid var(--gray-300); color:var(--gray-900); border-radius:var(--radius-sm); font-size:14px; padding:10px 12px; } .form-control::placeholder{ color:var(--gray-500); } .form-control.mono-input{ font-family:var(--font-mono); font-size:13.5px; } /* ========================================================================== Buttons ========================================================================== */ .btn{ font-family:var(--font-body); font-weight:600; font-size:14px; border-radius:var(--radius-sm); padding:10px 18px; border:1px solid transparent; transition:transform .1s ease, background .15s ease, border-color .15s ease, color .15s ease; } .btn:active{ transform:translateY(1px); } .btn-primary-green{ background:var(--green); border-color:var(--green); color:var(--pure-white); } .btn-primary-green:hover{ background:var(--green-deep); border-color:var(--green-deep); color:var(--pure-white); } .btn-outline-dark-custom{ background:transparent; border-color:var(--gray-300); color:var(--gray-900); } .btn-outline-dark-custom:hover{ background:var(--gray-150); color:var(--gray-900); } .btn-icon{ width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:var(--white); border-color:var(--gray-300); color:var(--gray-700); } .btn-icon:hover{ background:var(--gray-150); } .btn-icon.btn-confirm:hover{ color:var(--green-deep); border-color:var(--green); background:var(--green-tint); } .btn-icon.btn-delete:hover{ color:var(--danger); border-color:var(--danger); background:var(--danger-tint); } /* ========================================================================== Table ========================================================================== */ .table-responsive{ overflow-x:auto; } .table-hosts{ margin:0; } .table-hosts thead th{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); border-bottom:1px solid var(--gray-300); padding:0 12px 12px; background:transparent; white-space:nowrap; } .table-hosts tbody td{ padding:14px 12px; border-bottom:1px solid var(--gray-150); vertical-align:middle; font-size:14px; color:var(--gray-900); } .table-hosts tbody tr:last-child td{ border-bottom:none; } .table-hosts tbody tr:hover{ background:var(--off-white); } .cell-host{ font-family:var(--font-mono); font-weight:600; font-size:13.5px; } .cell-ip{ font-family:var(--font-mono); font-size:13.5px; color:var(--gray-700); } .cell-time{ font-family:var(--font-mono); font-size:12.5px; color:var(--gray-500); } .row-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .row-actions .form-control{ min-width:140px; } .interval-field{ display:flex; align-items:center; gap:6px; } .interval-field .interval-input{ min-width:72px; width:72px; text-align:right; -moz-appearance:textfield; } .interval-field .interval-input::-webkit-outer-spin-button, .interval-field .interval-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .interval-field .unit-label{ font-family:var(--font-mono); font-size:12px; color:var(--gray-500); } .cell-interval{ font-family:var(--font-mono); font-size:12.5px; color:var(--gray-700); } /* ---------- Status pills ---------- */ .status-pill{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.02em; } .status-pill.is-online{ background:var(--green-tint); color:var(--green-deep); } .status-pill.is-offline{ background:var(--gray-150); color:var(--gray-700); } /* ---------- Empty state ---------- */ .empty-state{ text-align:center; padding:48px 20px; color:var(--gray-500); } .empty-state .font-display{ color:var(--gray-700); font-size:16px; margin-bottom:4px; } /* ========================================================================== Login page ========================================================================== */ .login-shell{ min-height:100vh; display:flex; } .login-brand{ display:none; flex-direction:column; justify-content:space-between; background:var(--black); color:var(--pure-white); padding:56px 52px; width:46%; position:relative; overflow:hidden; } @media (min-width:900px){ .login-brand{ display:flex; } } .login-brand::before{ content:""; position:absolute; right:-120px; top:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(20,167,108,.35), transparent 70%); } .login-brand-logo{ width:130px; height:auto; position:relative; z-index:1; } .login-tagline{ font-family:var(--font-display); font-size:30px; font-weight:600; line-height:1.25; max-width:380px; position:relative; z-index:1; } .login-tagline .accent{ color:var(--green); } .login-features{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; } .login-features li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(255,255,255,.75); font-family:var(--font-mono); } .login-brand-footer{ font-family:var(--font-mono); font-size:11.5px; color:rgba(255,255,255,.4); position:relative; z-index:1; } .login-form-side{ flex:1; display:flex; align-items:center; justify-content:center; background:var(--off-white); padding:32px 20px; } .login-card{ width:100%; max-width:380px; } .login-card .mobile-logo{ display:block; width:120px; margin:0 auto 26px; } @media (min-width:900px){ .login-card .mobile-logo{ display:none; } } .login-card h3{ font-size:24px; font-weight:700; margin-bottom:2px; color:var(--gray-900); } .login-card .lead-sub{ color:var(--gray-500); font-size:14px; margin-bottom:26px; } .login-field-label{ font-size:12.5px; font-weight:600; color:var(--gray-700); margin-bottom:6px; display:block; } .btn-login{ width:100%; background:var(--green); border-color:var(--green); color:var(--pure-white); padding:12px; font-size:14.5px; margin-top:6px; } .btn-login:hover{ background:var(--green-deep); border-color:var(--green-deep); color:var(--pure-white); } .login-alert{ background:var(--danger-tint); color:var(--danger); border:1px solid rgba(194,74,63,.25); border-radius:var(--radius-sm); padding:11px 14px; font-size:13.5px; font-weight:500; margin-bottom:18px; } /* ========================================================================== Responsive tweaks ========================================================================== */ @media (max-width:991px){ .sidebar{ min-height:auto; flex-direction:row; align-items:center; justify-content:space-between; padding:14px 18px; } .sidebar-logo{ margin:0; max-width:110px; } .sidebar-nav{ flex-direction:row; gap:4px; margin-top:0; } .nav-link-custom span{ display:none; } .nav-link-custom{ border-left:none; border-bottom:2px solid transparent; padding:8px; } .nav-link-custom.active{ border-bottom-color:var(--green); } .sidebar-footer{ display:none; } .main-content{ padding:20px 16px 32px; } } /* Input group — sufijo de dominio en "Crear host" */ .input-group .input-group-text{ background:var(--gray-150); border:1px solid var(--gray-300); border-left:none; color:var(--gray-500); font-size:13.5px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; } .input-group .form-control{ border-radius:var(--radius-sm) 0 0 var(--radius-sm); } [data-bs-theme="dark"] .input-group .input-group-text{ background:var(--gray-150); border-color:var(--gray-300); color:var(--gray-500); }