/* =========================== ZA RAMKI — Brand Theme (UI-tuned) theme.css = бренд/оверрайды (последний в ) colors.css = source of truth для цветов =========================== */ /* ---------- Fonts (local) ---------- */ @font-face{ font-family: "Manasco"; src: url("./assets/fonts/Manasco.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; } @font-face{ font-family: "RobotoCustom"; src: url("./assets/fonts/Roboto-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; } @font-face{ font-family: "RobotoCustom"; src: url("./assets/fonts/Roboto-Medium.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; } /* ---------- Typography ---------- */ body{ background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .brand h1{ font-family: "Manasco", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--headings); } .brand small{ color: var(--muted); } .article-title, .markdown h2, .markdown h3{ color: var(--headings); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-weight: 600; } .article-sub, .kv, .pill{ color: var(--muted); } /* Logo smaller */ .logo-img{ height: 30px; width: auto; object-fit: contain; display:block; } /* ---------- Warm (no-blue) component tuning ---------- */ .header{ background: var(--panel); border-bottom: 1px solid var(--border); } .panel, .viewer{ background: var(--panel); border: 1px solid var(--border); } .tabs{ background: var(--item); border-bottom: 1px solid var(--border); display:flex; flex-wrap:wrap; gap:10px; } .tab{ flex:0 0 auto; } .search{ background: var(--panel); border: 1px solid var(--border); } .search input{ color: var(--text); } .item:hover{ border-color: var(--accent-35); } .viewer .empty{ background: var(--item); border: 1px dashed var(--border); color: var(--muted); } .btn{ border: 1px solid var(--border); background: var(--card); color: var(--text); } .btn:hover{ border-color: var(--accent-35); } .btn .dot{ background: var(--accent-95); } .markdown a{ color: var(--headings); text-decoration-color: var(--accent-55); } .markdown blockquote{ border-left: 3px solid var(--accent-60); background: var(--accent-08); color: var(--headings); } /* forms */ input, textarea, select{ border: 1px solid var(--border); background: rgba(26,23,20,.60); color: var(--text); } input:focus, textarea:focus, select:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-12); } /* ---------- Compact buttons (BriefPro) ---------- */ .btn.btn-sm{ font-size: 12px; padding: 6px 10px; line-height: 1.1; } .btn.btn-sm:hover{ opacity: .95; } /* ---------- MultiField link label select ---------- */ .mf-label-select{ background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px; height: 30px; font-size: 12px; } .mf-label-select option{ background: var(--panel); color: var(--text); } .mf-label-select:focus, .mf-label-select:focus-visible, .mf-link:focus, .mf-textitem:focus{ outline: none; box-shadow: 0 0 0 2px var(--accent-12); border-color: var(--accent); } /* ---------- Scrollbar system (final) ---------- */ :root{ color-scheme: dark; } ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-track{ background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb{ background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid var(--scrollbar-track); } ::-webkit-scrollbar-thumb:hover{ background: var(--headings); } *{ scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /* ========================================================= BriefPro Table — SINGLE SOURCE OF TRUTH (table only) Правило: styles.css не содержит table-логики. ========================================================= */ /* Wrap */ .bp-tablewrap{ overflow: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--table-bg); } /* Table base */ .bp-table{ border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1200px; position: relative; isolation: isolate; /* фиксит странные наложения при sticky */ } /* Headers */ .bp-th{ text-align: left; padding: 10px; border-bottom: 1px solid var(--bp-grid); background: var(--bp-head-bg); background-clip: padding-box; } .bp-th.group{ color: var(--headings); } .bp-th.mid{ min-width: 140px; } .bp-th.last{ min-width: 240px; } /* Body cells (room color via --rr-bg if задан RoomRow-ом) */ .bp-table tr[data-room-row]{ --rr-bg: var(--bp-cell-bg); } .bp-table tr[data-room-row] td{ background: var(--rr-bg); border-bottom: 1px solid var(--bp-grid); } /* Hover without blue */ .bp-table tbody tr:hover td{ background: var(--bp-row-hover); } /* ===== Sticky layer map ===== z 30: thead z 20: sticky first column z 10: normal cells */ .bp-table thead th{ position: sticky; top: 0; z-index: 30; } /* Sticky first column: th + td */ .bp-table thead th.bp-th.sticky, .bp-table thead th.sticky{ position: sticky; left: 0; z-index: 40; /* top-left above thead */ background: var(--bp-sticky-bg); border-right: 1px solid var(--bp-sticky-sep); } .bp-table td.rr-sticky, .bp-table tbody td.rr-sticky{ position: sticky; left: 0; z-index: 20; background: var(--bp-sticky-bg); background-clip: padding-box; border-right: 1px solid var(--bp-sticky-sep); } /* Room name cell bits (если используются RoomRow-ом) */ .rr-namebox{ display:flex; flex-direction:column; gap:8px; } .rr-name{ width:100%; padding:10px; border-radius:12px; } .rr-nameview{ white-space:pre-wrap; font-weight:600; color: var(--headings); } .rr-x{ color: #ff5a5a; margin-right:6px; } /* Pending delete confirm */ .rr-del-confirm{ border-color: rgba(255,90,90,.55); background: rgba(255,90,90,.10); } /* Meta block */ .bp-meta{ margin-bottom:12px; } .bp-meta-label{ font-weight:600; margin-bottom:4px; } .bp-meta-input{ width:100%; padding:10px; border-radius:12px; } .bp-meta-text{ white-space:pre-wrap; } .bp-meta-link{ color: var(--headings); } /* 3-col heights */ .bp-3cols{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .bp-3col{ flex:1; min-width:200px; max-width:280px; } .bp-3col-title{ font-weight:700; margin-bottom:6px; } .bp-3col-val{ padding:10px; border-radius:12px; border:1px solid var(--border); background: rgba(26,23,20,.35); } .bp-3col-input{ width:100%; padding:8px 10px; border-radius:12px; } .bp-3col-title-edit{ width:100%; padding:6px 8px; border-radius:10px; font-weight:700; margin-bottom:6px; } /* MultiField spacing */ .mf textarea.mf-text{ width:100%; padding:10px; border-radius:12px; margin-bottom:4px; } .mf-actions{ margin: 0 0 8px 0; } .mf-row{ display:flex; gap:6px; align-items:center; margin-top:6px; } .mf-link{ flex:1; padding:8px 10px; border-radius:12px; } .mf-linkrow{ margin-top:6px; } .mf-linkview{ color: var(--headings); text-decoration-color: var(--accent-55); } .mf-muted{ color: var(--muted); } .mf-textview{ white-space:pre-wrap; }