/* WebApp/static/css/dashboard.css ========================================================= LibreRecorder Dashboard CSS Schematic / tool-style (not marketing) Theme switches via: ========================================================= */ /* ---------- Base ---------- */ *{ box-sizing:border-box; } html, body{ height:100%; } :root{ --theme:#6a1e55; --theme-ink:#6a1e55; --theme-soft:rgba(106,30,85,0.10); --theme-soft-2:rgba(106,30,85,0.18); --theme-border:rgba(106,30,85,0.35); --theme-dark:#3f1233; --shadow-inset:rgba(0,0,0,0.25); } /* Domains */ body[data-domain="health"]{ --theme:#6a1e55; --theme-ink:#6a1e55; --theme-soft:rgba(106,30,85,0.10); --theme-soft-2:rgba(106,30,85,0.18); --theme-border:rgba(106,30,85,0.35); --theme-dark:#3f1233; } body[data-domain="ecology"]{ --theme:#2f7d5a; --theme-ink:#2f7d5a; --theme-soft:rgba(47,125,90,0.10); --theme-soft-2:rgba(47,125,90,0.18); --theme-border:rgba(47,125,90,0.40); --theme-dark:#0f4f3a; } body[data-domain="veterinary"]{ --theme:#355a9a; --theme-ink:#355a9a; --theme-soft:rgba(53,90,154,0.10); --theme-soft-2:rgba(53,90,154,0.18); --theme-border:rgba(53,90,154,0.42); --theme-dark:#1d3561; } body[data-domain="more"]{ --theme:#555; --theme-ink:#444; --theme-soft:rgba(0,0,0,0.08); --theme-soft-2:rgba(0,0,0,0.14); --theme-border:rgba(0,0,0,0.25); --theme-dark:#2d2d2d; } body{ margin:0; font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; background:#f7f4f5; color:#2a1a1f; } /* ---------- Header ---------- */ .lr-header{ background:var(--theme); color:#fff; padding:20px 28px; box-shadow:0 2px 6px rgba(0,0,0,0.18); } .lr-header h1{ margin:0; font-size:1.9rem; font-weight:800; } /* ---------- Layout Wrapper ---------- */ .lr-wrap{ display:flex; flex-direction:column; min-height:calc(100vh - 82px); } /* ---------- Topbar ---------- */ .topbar{ background:#fbf9fa; border-bottom:1px solid #e2dadd; padding:16px 20px 14px 20px; } /* ---------- Tabs ---------- */ .tabs{ display:flex; gap:6px; flex-wrap:wrap; } .tab{ padding:8px 14px; border-radius:18px; border:1px solid #d7c9d0; background:#ffffff; font-weight:700; font-size:0.9rem; cursor:pointer; color:#5b2b47; } .tab.active{ background:var(--theme-soft); border-color:var(--theme); color:var(--theme-ink); } /* ---------- Controls ---------- */ .controls{ display:flex; gap:8px; align-items:center; } .search{ padding:10px 12px; border-radius:10px; border:1px solid #d7c9d0; min-width:360px; outline:none; } .search:focus{ border-color:var(--theme); box-shadow:0 0 0 3px var(--theme-soft); } .btn{ background:var(--theme); color:#fff; border:none; padding:10px 16px; border-radius:14px; font-weight:800; cursor:pointer; } .btn.secondary{ background:#ede6ea; color:var(--theme-ink); } .btn:hover{ opacity:0.92; } /* ---------- Empty State ---------- */ .empty{ display:none; text-align:center; padding:40px; color:#777; font-style:italic; } /* ---------- Board ---------- */ .board-wrap{ flex:1; overflow:visible; /* allow board to be tall */ background:#f7f4f5; min-height:420px; /* prevents over-trim */ padding-bottom:18px; } .board{ overflow-x:auto; overflow-y:auto; display:flex; gap:14px; padding:18px; max-height:70vh; /* lets resources live below */ } /* ---------- Column ---------- */ .column{ background:#fff; border-radius:12px; min-width:280px; max-width:280px; display:flex; flex-direction:column; border:1px solid #eadfe4; } .column-header{ padding:12px 14px; border-bottom:1px solid #eadfe4; display:flex; justify-content:space-between; align-items:center; } .column-header h3{ margin:0; font-size:0.95rem; font-weight:800; } .column-count{ background:var(--theme-soft-2); color:var(--theme-ink); font-size:0.75rem; font-weight:900; padding:2px 8px; border-radius:10px; } .column-body{ padding:10px; overflow-y:auto; } /* ---------- Cards ---------- */ .card{ background:#fff; border-radius:10px; padding:12px 12px 10px 12px; margin-bottom:10px; border-left:5px solid var(--theme); box-shadow:0 2px 6px rgba(0,0,0,0.06); } .card h4{ margin:0 0 4px 0; font-size:0.95rem; font-weight:900; } .card p{ margin:2px 0; font-size:0.8rem; color:#555; } .card-meta{ display:flex; justify-content:space-between; margin-top:6px; font-size:0.75rem; color:#666; } .card-actions{ margin-top:8px; } .card-actions a{ font-size:0.8rem; font-weight:800; color:var(--theme-ink); text-decoration:none; margin-right:10px; } .card-actions a:hover{ text-decoration:underline; } /* ---------- Resource Panel ---------- */ .resource-panel{ height:300px; display:grid; grid-template-columns:240px 1fr; background:var(--theme-dark); color:#ffffff; border-top:4px solid rgba(0,0,0,0.2); box-shadow: inset 0 6px 18px var(--shadow-inset); } /* Left navigation */ .resource-nav{ padding:18px; border-right:1px solid rgba(255,255,255,0.15); display:flex; flex-direction:column; gap:12px; } .resource-title{ font-weight:900; letter-spacing:0.02em; margin-bottom:8px; opacity:0.92; font-size:1.1rem; } .resource-tab{ background:transparent; border:1px solid rgba(255,255,255,0.35); color:#fff; padding:12px 14px; text-align:left; font-weight:800; cursor:pointer; border-radius:10px; } .resource-tab.active{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.60); } /* Right content */ .resource-content{ padding:22px 30px; overflow-y:auto; } .resource-view{ display:none; max-width:980px; } .resource-view.active{ display:block; } .resource-view h3{ margin-top:0; font-size:1.6rem; font-weight:900; } .resource-view p{ font-size:1rem; line-height:1.45; } .resource-view ul{ margin-top:12px; padding-left:18px; } .resource-view li{ margin-bottom:8px; font-size:0.95rem; } /* ---------- Modal ---------- */ .modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.4); display:flex; justify-content:center; align-items:center; z-index:1000; } .modal{ background:#fff; border-radius:10px; width:760px; max-width:calc(100vw - 40px); max-height:calc(100vh - 40px); display:flex; flex-direction:column; } .modal-head{ padding:14px 18px; border-bottom:1px solid #e2dadd; display:flex; justify-content:space-between; align-items:center; } .modal-body{ padding:18px; display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; overflow-y:auto; } .modal-body label{ font-size:0.75rem; font-weight:900; color:#555; } .modal-body input, .modal-body select, .modal-body textarea{ width:100%; padding:8px; border-radius:8px; border:1px solid #d7c9d0; } .modal-body textarea{ min-height:90px; resize:vertical; } .modal-actions{ padding:14px 18px; border-top:1px solid #e2dadd; display:flex; justify-content:flex-end; gap:10px; } /* ---------- Scroll Hint ---------- */ .scroll-hint{ position:fixed; right:22px; bottom:22px; z-index:900; background: rgba(0,0,0,0.35); color:#fff; padding:10px 14px; border-radius:18px; font-size:0.8rem; font-weight:900; letter-spacing:0.02em; box-shadow:0 6px 18px rgba(0,0,0,0.35); opacity:0; pointer-events:none; transform:translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; } .scroll-hint.visible{ opacity:1; transform:translateY(0); }