/* ══════════════════════════════════════════ DRAINQ CLOUD — Layout v1.0 Shell · Topbar · Sidebar · Nav · Page Header ══════════════════════════════════════════ */ /* ── App Shell ── */ .drainq-app { display: flex; flex-direction: column; min-height: 100vh; } /* ── Topbar (52px) ── */ .topbar { height: 52px; background: var(--topbar-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 12px; position: sticky; top: 0; z-index: 100; flex-shrink: 0; } .topbar-logo { color: var(--text); font-size: 19px; font-weight: 700; letter-spacing: -.04em; display: flex; align-items: center; gap: 6px; margin-right: 8px; text-decoration: none; } /* ── Themen-abhängiger Logo-Slot ── Light → dunkle Wortmarke (logo-drainq.svg), Dark → helle Wortmarke (logo-drainq-light.svg). Umschaltung über die .dark-Klasse auf (theme.js), ohne Razor-Re-Render. */ .logo-light { display: block; } .logo-dark { display: none; } :root.dark .logo-light { display: none; } :root.dark .logo-dark { display: block; } .cloud-badge { font-size: 10px; font-weight: 600; letter-spacing: .06em; background: var(--surface2); color: var(--muted); border-radius: 4px; padding: 2px 8px; text-transform: uppercase; } .topbar-spacer { flex: 1; } .topbar-right { display: flex; align-items: center; gap: 10px; } .topbar-menu-btn { background: transparent; border: none; border-radius: 6px; color: var(--muted); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; } .topbar-menu-btn:hover { background: var(--surface2); color: var(--text); } .topbar-menu-btn svg { width: 16px; height: 16px; } .user-chip { display: flex; align-items: center; gap: 8px; background: var(--surface2); border-radius: 20px; padding: 4px 12px 4px 4px; cursor: default; transition: background .15s; } .user-chip:hover { background: var(--surface2); } .user-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .user-chip-name { font-size: 12px; font-weight: 500; color: var(--text); } .user-chip-role { font-size: 10px; color: var(--muted); } /* ── App Body ── */ .app-body { display: flex; flex: 1; overflow: hidden; } /* ── Sidebar (230px, collapsible) ── */ .sidebar { width: 230px; min-height: calc(100vh - 52px); background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; flex-shrink: 0; transition: width .2s ease, background .2s; } .sidebar-rail { width: 32px; min-width: 32px; flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border); height: calc(100vh - 52px); position: sticky; top: 52px; } .sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; background: transparent; border: none; color: var(--muted); cursor: pointer; flex-shrink: 0; } .sidebar-toggle:hover { color: var(--fg); background: var(--hover-bg, rgba(255,255,255,.06)); } .sidebar-nav { flex: 1; padding: 8px 0; } .sidebar-section-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); padding: 14px 16px 4px; } /* ── Nav Items ── */ .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 1px 8px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; text-decoration: none; border: none; background: none; width: calc(100% - 16px); font-family: 'Inter', sans-serif; position: relative; } .nav-item:hover { background: var(--surface2); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--primary); color: var(--on-primary); font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; background: var(--primary); border-radius: 0 3px 3px 0; } .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; } .nav-item.active svg, .nav-item:hover svg { opacity: 1; } /* ── Sidebar Footer ── */ .sidebar-footer { margin-top: auto; padding: 12px 8px; border-top: 1px solid var(--border); } .logout-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px; border-radius: 6px; background: none; border: none; color: var(--danger); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s; } .logout-btn:hover { background: var(--badge-danger-bg); } .logout-btn svg { width: 16px; height: 16px; flex-shrink: 0; } :root.dark .logout-btn:hover { background: var(--badge-danger-bg); } /* ── Main Content ── */ .main-content { flex: 1; overflow-y: auto; padding: 24px; background: var(--bg); min-width: 0; } /* ── Page Header ── */ .page-header { margin-bottom: 20px; } .page-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 10px; } .page-title svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; } .page-subtitle { font-size: 13px; color: var(--muted); } /* ── Login Layout (SA, Dark-First, brand-first) ── */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; } /* Two-column shell — brand-panel + form on large screens, single column on mobile */ .login-shell { width: 100%; max-width: 420px; display: flex; flex-direction: column; } @media (min-width: 992px) { .login-shell { flex-direction: row; align-items: stretch; max-width: 880px; box-shadow: var(--shadow-md); border-radius: var(--radius-card); overflow: hidden; } .login-shell .login-box { box-shadow: none; border-radius: 0; border: 0; border-left: 1px solid var(--border); flex: 1; } .login-shell .login-box::before { border-radius: 0; } .login-shell .login-brand-panel { display: flex; width: 360px; flex-shrink: 0; } /* In-box logo+brand redundant when brand-panel shows them on the left */ .login-shell .login-box .login-logo img, .login-shell .login-box .login-logo .brand { display: none; } .login-shell .login-box .login-logo { margin-bottom: 18px; margin-top: 4px; } .login-shell .login-box .login-logo .sub { font-size: 16px; font-weight: 600; color: var(--text); } } /* Brand panel — hidden on mobile, shown ≥992px */ .login-brand-panel { display: none; flex-direction: column; justify-content: center; align-items: center; padding: 48px 36px; background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--on-primary); text-align: center; position: relative; } .login-brand-panel::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12) 0%, transparent 60%); pointer-events: none; } .login-brand-panel img { width: 82%; max-width: 240px; margin-bottom: 28px; position: relative; } .login-brand-panel h2 { font-size: 26px; font-weight: 700; margin: 0 0 10px; position: relative; } .login-brand-panel p { font-size: 14px; opacity: .92; line-height: 1.55; margin: 0; position: relative; } .login-box { position: relative; width: 100%; max-width: 420px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 36px 32px; box-shadow: var(--shadow-md); animation: fadeIn .2s ease; } /* Brand-stripe top edge (Amber) */ .login-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 50%, var(--primary) 100%); border-radius: var(--radius-card) var(--radius-card) 0 0; } .login-logo { text-align: center; margin-bottom: 28px; } .login-logo .brand { font-size: 24px; font-weight: 700; color: var(--text); margin-top: 12px; } .login-logo .sub { font-size: 13px; color: var(--muted); margin-top: 4px; } /* Override scoped form styles inside the login box */ .login-box .form-label { color: var(--text); font-weight: 600; } .login-box .form-input { background: var(--surface); color: var(--text); /* getippter Text */ border: 1px solid var(--border-strong); caret-color: var(--text); } .login-box .form-input::placeholder { color: var(--muted); } .login-box .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-container); } .login-box .form-input:disabled { background: var(--surface2); color: var(--muted); } .login-box .alert-danger { background: var(--badge-danger-bg); color: var(--badge-danger-c); border: 1px solid var(--danger); } /* Input with leading icon */ .login-box .input-wrap { position: relative; } .login-box .input-wrap > .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .login-box .input-wrap > .form-input { padding-left: 40px; } .login-divider { height: 1px; background: var(--border); margin: 20px 0; } .login-footer { text-align: center; font-size: 11px; color: var(--muted); }