/* Notion-inspired license portal — light / dark via data-theme on */ :root { --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius: 6px; --radius-lg: 8px; --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-md: 0 4px 16px rgba(15, 15, 15, 0.08); --sidebar-w: 220px; --content-max: 1180px; --icon-size: 16px; --transition: 0.15s ease; /* Typography scale (15px base — readable but still compact) */ --text-xs: 0.8125rem; /* ~13px */ --text-sm: 0.875rem; /* ~14px */ --text-base: 0.9375rem; /* ~15px */ --text-md: 1rem; /* ~16px */ --text-lg: 1.125rem; /* ~18px */ --text-xl: 1.375rem; /* ~22px */ } html[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-subtle: #f7f6f3; --bg-hover: rgba(55, 53, 47, 0.06); --bg-active: rgba(55, 53, 47, 0.1); --surface: #ffffff; --surface-raised: #ffffff; --text: #37352f; --text-secondary: #787774; --text-tertiary: #9b9a97; --border: rgba(55, 53, 47, 0.09); --border-strong: rgba(55, 53, 47, 0.16); --accent: #2383e2; --accent-hover: #1a73d0; --accent-soft: rgba(35, 131, 226, 0.12); --danger: #eb5757; --danger-soft: rgba(235, 87, 87, 0.12); --ok: #0f7b6c; --ok-soft: rgba(15, 123, 108, 0.12); --warn: #d9730d; --warn-soft: rgba(217, 115, 13, 0.12); --btn-text: #37352f; --btn-bg: rgba(55, 53, 47, 0.06); --btn-bg-hover: rgba(55, 53, 47, 0.1); --btn-primary-bg: #2383e2; --btn-primary-text: #ffffff; --input-bg: #ffffff; --flash-bg: rgba(15, 123, 108, 0.08); --flash-border: rgba(15, 123, 108, 0.35); } html[data-theme="dark"] { color-scheme: dark; --bg: #191919; --bg-subtle: #202020; --bg-hover: rgba(255, 255, 255, 0.055); --bg-active: rgba(255, 255, 255, 0.09); --surface: #252525; --surface-raised: #2f2f2f; --text: #ebebea; --text-secondary: #9b9b9b; --text-tertiary: #6f6f6f; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --accent: #529cca; --accent-hover: #6aafe0; --accent-soft: rgba(82, 156, 202, 0.16); --danger: #ff7369; --danger-soft: rgba(255, 115, 105, 0.16); --ok: #4dab9a; --ok-soft: rgba(77, 171, 154, 0.16); --warn: #ffa344; --warn-soft: rgba(255, 163, 68, 0.16); --btn-text: #ebebea; --btn-bg: rgba(255, 255, 255, 0.08); --btn-bg-hover: rgba(255, 255, 255, 0.12); --btn-primary-bg: #529cca; --btn-primary-text: #191919; --input-bg: #2f2f2f; --flash-bg: rgba(77, 171, 154, 0.12); --flash-border: rgba(77, 171, 154, 0.35); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } html { font-size: 16px; } body { font-family: var(--font); font-size: var(--text-base); line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } a.link { color: var(--accent); } a.link:hover { text-decoration: underline; } .mono { font-family: var(--mono); font-size: 0.92em; word-break: break-all; } .muted { color: var(--text-secondary); } .big { font-size: var(--text-md); } /* ——— App shell ——— */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-subtle); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 12px 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 16px; font-weight: 600; font-size: var(--text-md); color: var(--text); } .brand-icon { color: var(--accent); flex-shrink: 0; } .sidebar-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 4px 0; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 42px; border-radius: var(--radius-lg); color: var(--text-secondary); font-size: var(--text-md); font-weight: 500; transition: background var(--transition), color var(--transition); } .nav-item .icon { flex-shrink: 0; opacity: 0.8; width: 18px; height: 18px; } .nav-item:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--bg-active); color: var(--text); font-weight: 600; } .nav-item.active .icon { opacity: 1; color: var(--accent); } .nav-icon { width: 18px; text-align: center; opacity: 0.75; font-size: 13px; } .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; } .theme-toggle { display: flex; align-items: center; gap: 6px; padding: 4px; background: var(--bg-hover); border-radius: var(--radius-lg); border: 1px solid var(--border); } .theme-toggle button { flex: 1; border: none; background: transparent; color: var(--text-secondary); font-size: 12px; padding: 5px 4px; border-radius: 4px; cursor: pointer; font-family: inherit; transition: background var(--transition), color var(--transition); } .theme-toggle button:hover { color: var(--text); } .theme-toggle button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 500; } .main-column { flex: 1; min-width: 0; display: flex; flex-direction: column; } .content { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 16px 28px 32px; } @media (max-width: 900px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; height: auto; position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; } .sidebar-nav { flex-direction: row; flex-wrap: wrap; flex: unset; } .sidebar-footer { margin-top: 0; padding-top: 0; border-top: none; margin-left: auto; } .content { padding: 24px 20px 48px; } } /* ——— Page header (Notion-style) ——— */ .page-cover { margin-bottom: 8px; } .breadcrumb { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: 12px; } .breadcrumb a { color: var(--text-secondary); } .breadcrumb a:hover { color: var(--text); text-decoration: underline; } .breadcrumb-sep { color: var(--text-tertiary); } .page-title { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; margin: 0; color: var(--text); } .page-subtitle { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; } .page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .page-head-tight { margin-bottom: 12px; } .page-head-main { flex: 1 1 160px; min-width: 0; } .page-meta { display: block; font-size: var(--text-sm); color: var(--text-tertiary); margin-top: 2px; } .page-head-actions, .stats-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .stats-inline { flex: 0 1 auto; } .section-title { margin: 32px 0 12px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .section-title:first-child { margin-top: 0; } /* ——— Stats row ——— */ .stats-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 24px; } .stat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg-hover); border: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-secondary); } .stat-pill strong { color: var(--text); font-weight: 600; } /* ——— Cards & blocks ——— */ .notion-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 12px; } .notion-block.flat { background: transparent; border: none; padding: 0; } .stack { display: flex; flex-direction: column; gap: 14px; } .grid.cards { display: grid; gap: 10px; } @media (min-width: 560px) { .grid.cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } .product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; transition: background var(--transition), box-shadow var(--transition); } .product-card:hover { background: var(--bg-hover); box-shadow: var(--shadow-sm); } .product-card h2, .product-card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; } /* ——— License key cards (unified list) ——— */ .key-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .key-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; transition: background var(--transition), border-color var(--transition); } .key-card:hover { border-color: var(--border-strong); background: var(--bg-hover); } .key-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .key-card-title { font-weight: 600; font-size: 15px; margin: 0; color: var(--text); } .key-card-id { font-size: 12px; color: var(--text-tertiary); font-family: var(--mono); } .key-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 16px; margin-bottom: 12px; } .key-prop { display: flex; flex-direction: column; gap: 2px; } .key-prop-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); font-weight: 500; } .key-prop-value { font-size: 13px; color: var(--text); } .key-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); } /* ——— Badges ——— */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 4px; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-bad { background: var(--danger-soft); color: var(--danger); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-muted { background: var(--bg-hover); color: var(--text-secondary); } /* ——— Buttons ——— */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 13px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--btn-bg); color: var(--btn-text); font-size: var(--text-sm); font-family: inherit; cursor: pointer; transition: background var(--transition), border-color var(--transition); text-decoration: none; line-height: 1.4; } .btn:hover { background: var(--btn-bg-hover); text-decoration: none; } .btn-primary { background: var(--btn-primary-bg); border-color: transparent; color: var(--btn-primary-text); font-weight: 500; } .btn-primary:hover { filter: brightness(1.06); background: var(--btn-primary-bg); } .btn-ghost { border-color: transparent; background: transparent; } .btn-ghost:hover { background: var(--bg-hover); } .btn-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); } .btn-danger:hover { filter: brightness(1.05); } .btn-sm { padding: 4px 10px; font-size: var(--text-sm); } .btn-lg { padding: 8px 16px; font-size: 14px; } .inline-form { display: inline; } .inline-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ——— Forms (Notion property style) ——— */ .form-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; } .form-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; background: var(--bg-subtle); } .form-panel-body { padding: 4px 0; } .prop-row { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 8px 16px; align-items: start; padding: 10px 16px; border-bottom: 1px solid var(--border); } .prop-row:last-child { border-bottom: none; } .prop-label { font-size: 13px; color: var(--text-secondary); padding-top: 6px; } .prop-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; } .field { margin: 0; } .field label { display: flex; flex-direction: column; gap: 4px; } .label-text { font-size: 13px; color: var(--text-secondary); } input[type="text"], input[type="password"], input[type="number"], input[type="datetime-local"], textarea, select { width: 100%; max-width: 100%; padding: 7px 11px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: var(--text-sm); font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition); } textarea { min-height: 72px; resize: vertical; line-height: 1.45; } input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } html[data-theme="light"] input[type="datetime-local"] { color-scheme: light; } html[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; } .form-grid { display: grid; gap: 12px; } @media (min-width: 640px) { .form-grid.two-col { grid-template-columns: 1fr 1fr; } } .form-actions { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg-subtle); display: flex; flex-wrap: wrap; gap: 8px; } .error { color: var(--danger); font-size: 13px; margin: 4px 0 0; } .flash { padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--flash-border); background: var(--flash-bg); margin-bottom: 20px; } .flash strong { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; } /* ——— Tables ——— */ .data-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } table.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .data-table th, .data-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: var(--text-sm); } .data-table tr:last-child td { border-bottom: none; } .data-table th { background: var(--bg-subtle); color: var(--text-secondary); font-weight: 500; font-size: var(--text-xs); } .data-table tbody tr:hover td { background: var(--bg-hover); } /* Телеметрия: подсветка строк по важности события */ .data-table tbody tr.tel-row-bad td { background: var(--danger-soft); } .data-table tbody tr.tel-row-warn td { background: var(--warn-soft); } .data-table tbody tr.tel-row-bad:hover td, .data-table tbody tr.tel-row-warn:hover td { filter: brightness(0.97); } .row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .empty-state { text-align: center; padding: 32px 16px; color: var(--text-tertiary); font-size: 14px; } /* ——— Auth pages ——— */ body.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; background: var(--bg-subtle); } .auth-wrap { width: min(100%, 400px); } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-md); } .auth-card.wide { width: min(100%, 440px); } .auth-title { margin: 0 0 8px; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; } .auth-theme { display: flex; justify-content: center; margin-bottom: 16px; } .secret-box { word-break: break-all; padding: 10px 12px; border-radius: var(--radius); border: 1px dashed var(--border-strong); background: var(--bg-hover); font-size: 13px; } .qr-wrap { display: flex; justify-content: center; margin: 16px 0; } /* ——— Misc legacy compat ——— */ .card, .notion-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; } .topbar { display: none; } .wrap { max-width: none; margin: 0; padding: 0; } .product-block { margin-bottom: 10px; } .product-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .product-title { margin: 0; font-size: 14px; font-weight: 600; } .license-address-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .hosts-card { margin-top: 32px; } .stats { display: flex; flex-wrap: wrap; gap: 8px; } .stats span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--bg-hover); border: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); } .stats span strong { color: var(--text); } table:not(.data-table) { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } table:not(.data-table) th, table:not(.data-table) td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; } table:not(.data-table) th { background: var(--bg-subtle); color: var(--text-secondary); font-weight: 500; } table:not(.data-table) tr:last-child td { border-bottom: none; } /* ——— Icons (Lucide) ——— */ .icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } .icon-rotate-270 { transform: rotate(-90deg); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition), color var(--transition); } a.icon-btn { text-decoration: none; } .icon-btn:hover { background: var(--bg-hover); color: var(--text); } .icon-btn-danger:hover { background: var(--danger-soft); color: var(--danger); } .icon-btn-warn:hover { background: var(--warn-soft); color: var(--warn); } .icon-btn-ok:hover { background: var(--ok-soft); color: var(--ok); } .act-icons { display: flex; align-items: center; gap: 2px; justify-content: flex-end; } .btn-block { width: 100%; justify-content: flex-start; } .btn .icon { margin-right: 2px; } /* ——— Compact forms ——— */ .form-compact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 12px; } .fc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .fc-field.fc-span-2 { grid-column: span 2; } .fc-field.fc-narrow { max-width: 140px; } .fc-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; } .fc-hint { font-size: var(--text-sm); color: var(--text-tertiary); margin: 8px 0 0; } .fc-readonly span:last-child { font-size: var(--text-md); padding-top: 4px; } @media (max-width: 720px) { .form-compact { grid-template-columns: 1fr 1fr; } .fc-field.fc-span-2 { grid-column: span 2; } .fc-field.fc-narrow { max-width: none; } } /* ——— Collapsible panels ——— */ .panels-bottom { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .panel-collapse { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .panel-collapse summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); cursor: pointer; user-select: none; list-style: none; } .panel-collapse summary::-webkit-details-marker { display: none; } .panel-collapse summary:hover { background: var(--bg-hover); color: var(--text); } .panel-body { padding: 12px; border-top: 1px solid var(--border); background: var(--bg-subtle); } .panel-body-standalone { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .panel-actions { display: flex; gap: 8px; margin-top: 10px; } .host-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .host-inline-form input[type="text"] { flex: 1 1 200px; max-width: none; } .host-inline-compact { padding: 4px 0; } .host-inline-compact input[type="text"] { flex: 1 1 160px; } /* ——— Dense tables ——— */ .table-section { margin-top: 0; } .table-scroll { max-height: min(62vh, 640px); overflow: auto; } .data-table-dense th, .data-table-dense td { padding: 8px 12px; font-size: var(--text-sm); vertical-align: middle; } .data-table-dense th { position: sticky; top: 0; z-index: 1; background: var(--bg-subtle); box-shadow: 0 1px 0 var(--border); font-size: var(--text-xs); } .data-table-keys .col-id { width: 36px; } .data-table-keys .col-plan { width: 56px; } .data-table-keys .col-inst { width: 52px; white-space: nowrap; } .data-table-keys .col-st { width: 44px; } .data-table-keys .col-act { width: 168px; } .col-act { text-align: right; } .truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nowrap { white-space: nowrap; } .row-link { cursor: pointer; } .row-link:hover td { background: var(--bg-hover); } .row-sub td { background: var(--bg-subtle); padding-top: 4px !important; padding-bottom: 8px !important; } .flash-compact { padding: 10px 12px; margin-bottom: 12px; } .flash-compact code, .key-reveal { display: block; word-break: break-all; font-size: var(--text-sm); margin-top: 4px; } .dns-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .section-title { margin: 20px 0 8px; font-size: var(--text-lg); } .breadcrumb { margin-bottom: 8px; font-size: var(--text-sm); } .stat-pill { padding: 3px 10px; font-size: var(--text-sm); } .empty-state { padding: 22px 14px; font-size: var(--text-sm); } .sidebar { padding: 10px 8px; } .sidebar-brand { padding: 4px 8px 10px; font-size: var(--text-sm); } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; font-size: var(--text-xs); } .nav-icon { display: none; }