/* ============================================================ Наследие — дизайн-система Токены тем (светлая/тёмная) + базовые стили + оболочка приложения. Тема переключается атрибутом data-theme на (js/theme.js), Bootstrap 5.3 синхронизируется через data-bs-theme. ============================================================ */ :root { --hx-font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --hx-font-display: Georgia, "Times New Roman", serif; --hx-radius: 14px; --hx-radius-sm: 8px; --hx-header-height: 64px; } :root, :root[data-theme="light"] { color-scheme: light; --hx-bg: #f6f3ec; --hx-surface: #fffefb; --hx-surface-2: #efeadf; --hx-border: #e2dccd; --hx-text: #26231c; --hx-text-muted: #716b5d; --hx-primary: #33634a; --hx-primary-hover: #2a5340; --hx-primary-contrast: #ffffff; --hx-primary-soft: rgba(51, 99, 74, 0.1); --hx-focus-ring: rgba(51, 99, 74, 0.25); --hx-accent: #b8874b; --hx-danger: #b3413f; --hx-success: #2e7d4f; --hx-shadow-sm: 0 1px 2px rgba(38, 35, 28, 0.06), 0 1px 6px rgba(38, 35, 28, 0.05); --hx-shadow-lg: 0 12px 40px rgba(38, 35, 28, 0.18); --hx-backdrop: rgba(30, 28, 22, 0.4); /* Дерево */ --hx-node-living: #fdf9ee; --hx-node-deceased: #eef0f3; --hx-node-stroke: #97917f; --hx-node-stroke-hover: #33634a; --hx-node-name: #26231c; --hx-node-years: #716b5d; --hx-avatar-living: #f3e2b8; --hx-avatar-deceased: #d7dde6; --hx-avatar-initials: #6b6b6b; --hx-edge-parent: #5d5a52; --hx-edge-spouse: #c76b98; --hx-edge-sibling: #8ca0bd; --hx-grave-badge: #b3413f; --hx-grave-badge-ring: #ffffff; --hx-canvas-bg: #fbf9f4; } :root[data-theme="dark"] { color-scheme: dark; --hx-bg: #14161b; --hx-surface: #1d2026; --hx-surface-2: #262a31; --hx-border: #343945; --hx-text: #e8e6e0; --hx-text-muted: #9c978c; --hx-primary: #5da77f; --hx-primary-hover: #6fbb91; --hx-primary-contrast: #0f231a; --hx-primary-soft: rgba(93, 167, 127, 0.14); --hx-focus-ring: rgba(93, 167, 127, 0.3); --hx-accent: #d0a86a; --hx-danger: #d76d6a; --hx-success: #63b787; --hx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 8px rgba(0, 0, 0, 0.25); --hx-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); --hx-backdrop: rgba(5, 6, 9, 0.6); /* Дерево */ --hx-node-living: #32362e; --hx-node-deceased: #262a31; --hx-node-stroke: #4d5360; --hx-node-stroke-hover: #6fbb91; --hx-node-name: #e8e6e0; --hx-node-years: #a09b90; --hx-avatar-living: #57503a; --hx-avatar-deceased: #3a414d; --hx-avatar-initials: #cfcabd; --hx-edge-parent: #8b8fa0; --hx-edge-spouse: #d98cb3; --hx-edge-sibling: #7d93b8; --hx-grave-badge: #c96562; --hx-grave-badge-ring: #1d2026; --hx-canvas-bg: #181b21; } /* ---------- Базовые стили ---------- */ html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--hx-font-sans); background: var(--hx-bg); color: var(--hx-text); transition: background-color 200ms ease, color 200ms ease; } h1, h2, h3 { font-family: var(--hx-font-display); letter-spacing: 0.01em; } h1 { font-size: 2rem; margin-bottom: 0.75rem; } h1:focus { outline: none; } a { color: var(--hx-primary); } a:hover { color: var(--hx-primary-hover); } /* ---------- Переопределение Bootstrap под токены ---------- */ .btn-primary { --bs-btn-bg: var(--hx-primary); --bs-btn-border-color: var(--hx-primary); --bs-btn-color: var(--hx-primary-contrast); --bs-btn-hover-bg: var(--hx-primary-hover); --bs-btn-hover-border-color: var(--hx-primary-hover); --bs-btn-hover-color: var(--hx-primary-contrast); --bs-btn-active-bg: var(--hx-primary-hover); --bs-btn-active-border-color: var(--hx-primary-hover); --bs-btn-active-color: var(--hx-primary-contrast); --bs-btn-disabled-bg: var(--hx-primary); --bs-btn-disabled-border-color: var(--hx-primary); --bs-btn-disabled-color: var(--hx-primary-contrast); } .btn-outline-primary { --bs-btn-color: var(--hx-primary); --bs-btn-border-color: var(--hx-primary); --bs-btn-hover-bg: var(--hx-primary); --bs-btn-hover-border-color: var(--hx-primary); --bs-btn-hover-color: var(--hx-primary-contrast); --bs-btn-active-bg: var(--hx-primary); --bs-btn-active-border-color: var(--hx-primary); --bs-btn-active-color: var(--hx-primary-contrast); } .btn-outline-secondary { --bs-btn-color: var(--hx-text-muted); --bs-btn-border-color: var(--hx-border); --bs-btn-hover-bg: var(--hx-surface-2); --bs-btn-hover-border-color: var(--hx-border); --bs-btn-hover-color: var(--hx-text); --bs-btn-active-bg: var(--hx-surface-2); --bs-btn-active-border-color: var(--hx-border); --bs-btn-active-color: var(--hx-text); } .btn { border-radius: var(--hx-radius-sm); } .btn:focus-visible, .form-control:focus, .form-select:focus { border-color: var(--hx-primary); box-shadow: 0 0 0 0.2rem var(--hx-focus-ring); } .form-control, .form-select { background-color: var(--hx-surface); border-color: var(--hx-border); color: var(--hx-text); border-radius: var(--hx-radius-sm); } .form-control:focus, .form-select:focus { background-color: var(--hx-surface); color: var(--hx-text); } .form-label { color: var(--hx-text-muted); font-size: 0.875rem; font-weight: 500; } .table { --bs-table-bg: transparent; --bs-table-color: var(--hx-text); --bs-table-border-color: var(--hx-border); } .text-muted { color: var(--hx-text-muted) !important; } /* ---------- Оболочка приложения ---------- */ .hx-app { min-height: 100vh; display: flex; flex-direction: column; } .hx-header { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--hx-surface) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hx-border); } .hx-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; height: var(--hx-header-height); display: flex; align-items: center; gap: 1.5rem; } .hx-brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--hx-font-display); font-size: 1.35rem; font-weight: 700; color: var(--hx-text); text-decoration: none; white-space: nowrap; } .hx-brand:hover { color: var(--hx-primary); } .hx-brand-mark { width: 30px; height: 30px; color: var(--hx-primary); flex-shrink: 0; } .hx-nav { display: flex; align-items: center; gap: 0.25rem; flex: 1; min-width: 0; } .hx-nav-link { padding: 0.45rem 0.9rem; border-radius: var(--hx-radius-sm); color: var(--hx-text-muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; white-space: nowrap; background: none; border: none; transition: background-color 120ms ease, color 120ms ease; } .hx-nav-link:hover { color: var(--hx-text); background: var(--hx-surface-2); } .hx-nav-link.active { color: var(--hx-primary); background: var(--hx-primary-soft); } .hx-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .hx-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hx-border); background: var(--hx-surface); color: var(--hx-text-muted); cursor: pointer; transition: background-color 120ms ease, color 120ms ease, transform 120ms ease; } .hx-theme-toggle:hover { color: var(--hx-accent); background: var(--hx-surface-2); transform: rotate(15deg); } .hx-theme-toggle svg { width: 18px; height: 18px; } .hx-nav-burger { display: none; background: none; border: 1px solid var(--hx-border); border-radius: var(--hx-radius-sm); color: var(--hx-text); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; } .hx-nav-burger svg { width: 20px; height: 20px; } .hx-main { flex: 1; width: 100%; } .hx-container { max-width: 1200px; margin: 0 auto; padding: 2rem 1.25rem 3rem; } .hx-footer { border-top: 1px solid var(--hx-border); color: var(--hx-text-muted); font-size: 0.85rem; text-align: center; padding: 1.25rem; } /* Мобильная навигация */ @media (max-width: 820px) { .hx-nav-burger { display: inline-flex; margin-left: auto; } .hx-nav { position: absolute; top: var(--hx-header-height); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--hx-surface); border-bottom: 1px solid var(--hx-border); box-shadow: var(--hx-shadow-lg); padding: 0.75rem 1rem 1rem; display: none; } .hx-nav.hx-nav-open { display: flex; } .hx-nav-actions { margin-left: 0; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--hx-border); } } /* ---------- Карточки и секции ---------- */ .hx-card { background: var(--hx-surface); border: 1px solid var(--hx-border); border-radius: var(--hx-radius); box-shadow: var(--hx-shadow-sm); padding: 1.5rem; } .hx-card + .hx-card { margin-top: 1.25rem; } .hx-section-title { font-family: var(--hx-font-sans); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin-bottom: 1rem; color: var(--hx-text); } .hx-canvas-card { background: var(--hx-canvas-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius); box-shadow: var(--hx-shadow-sm); overflow: auto; padding: 0; } /* Канвас на всю доступную высоту окна (публичное дерево, песочница) */ .hx-canvas-fill { height: calc(100vh - 300px); min-height: 420px; background: var(--hx-canvas-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius); box-shadow: var(--hx-shadow-sm); overflow: hidden; } /* ---------- Рабочая область дерева (полноэкранный канвас) ---------- */ .hx-workspace { position: fixed; top: var(--hx-header-height); left: 0; right: 0; bottom: 0; background: var(--hx-canvas-bg); z-index: 1; overflow: hidden; } .hx-workspace-canvas { position: absolute; inset: 0; } .hx-workspace-empty { height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; } .hx-workspace-toolbar { position: absolute; top: 0.9rem; left: 1rem; right: 1rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; pointer-events: none; } .hx-workspace-toolbar > * { pointer-events: auto; } .hx-workspace-tree-name { font-family: var(--hx-font-display); font-weight: 700; font-size: 1.1rem; background: color-mix(in srgb, var(--hx-surface) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--hx-border); border-radius: var(--hx-radius-sm); box-shadow: var(--hx-shadow-sm); padding: 0.4rem 0.9rem; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hx-workspace-root-select { width: auto; max-width: 230px; box-shadow: var(--hx-shadow-sm); } .hx-workspace-toolbar-link { font-size: 0.85rem; background: color-mix(in srgb, var(--hx-surface) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--hx-border); border-radius: var(--hx-radius-sm); box-shadow: var(--hx-shadow-sm); padding: 0.4rem 0.75rem; text-decoration: none; white-space: nowrap; } .hx-workspace-panel-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--hx-border); border-radius: var(--hx-radius-sm); background: color-mix(in srgb, var(--hx-surface) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--hx-shadow-sm); color: var(--hx-text-muted); cursor: pointer; } .hx-workspace-panel-toggle:hover { color: var(--hx-primary); background: var(--hx-surface); } .hx-workspace-panel-toggle svg { width: 18px; height: 18px; } .hx-workspace-side { position: absolute; top: 4.4rem; left: 1rem; bottom: 1rem; width: 330px; max-width: calc(100vw - 2rem); background: color-mix(in srgb, var(--hx-surface) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hx-border); border-radius: var(--hx-radius); box-shadow: var(--hx-shadow-lg); overflow-y: auto; padding: 0.5rem; } /* Аккордеоны боковой панели */ .hx-workspace-side details { border-radius: var(--hx-radius-sm); overflow: hidden; } .hx-workspace-side details + details { margin-top: 0.25rem; } .hx-workspace-side summary { cursor: pointer; list-style: none; padding: 0.6rem 0.75rem; font-weight: 600; font-size: 0.92rem; color: var(--hx-text); border-radius: var(--hx-radius-sm); user-select: none; } .hx-workspace-side summary::-webkit-details-marker { display: none; } .hx-workspace-side summary::before { content: "▸"; display: inline-block; margin-right: 0.5rem; color: var(--hx-text-muted); transition: transform 120ms ease; } .hx-workspace-side details[open] > summary::before { transform: rotate(90deg); } .hx-workspace-side summary:hover { background: var(--hx-surface-2); } .hx-acc-body { padding: 0.25rem 0.75rem 0.9rem; } /* Список людей */ .hx-people-list { display: flex; flex-direction: column; gap: 0.25rem; } .hx-person-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.35rem 0.5rem; background: none; border: none; border-radius: var(--hx-radius-sm); color: var(--hx-text); text-align: left; cursor: pointer; } .hx-person-row:hover { background: var(--hx-primary-soft); } .hx-person-row img, .hx-person-row-placeholder { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; object-fit: cover; } .hx-person-row-placeholder { display: inline-flex; align-items: center; justify-content: center; background: var(--hx-avatar-living); color: var(--hx-avatar-initials); font-size: 0.78rem; font-weight: 600; } .hx-person-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; } @media (max-width: 640px) { .hx-workspace-side { width: calc(100vw - 2rem); } .hx-workspace-tree-name { display: none; } } /* ---------- Страница входа/регистрации ---------- */ .hx-auth-wrap { display: flex; justify-content: center; padding: 3rem 0; } .hx-auth-card { width: min(420px, 100%); background: var(--hx-surface); border: 1px solid var(--hx-border); border-radius: var(--hx-radius); box-shadow: var(--hx-shadow-sm); padding: 2rem; } .hx-auth-card h1 { font-size: 1.6rem; text-align: center; margin-bottom: 1.5rem; } /* ---------- Главная (hero) ---------- */ .hx-hero { text-align: center; padding: 3.5rem 1rem 2.5rem; } .hx-hero h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: 1rem; } .hx-hero p { max-width: 620px; margin: 0 auto 2rem; font-size: 1.1rem; color: var(--hx-text-muted); line-height: 1.65; } .hx-hero-actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .hx-hero-actions .btn { padding: 0.65rem 1.6rem; font-size: 1.05rem; } .hx-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; } .hx-feature { background: var(--hx-surface); border: 1px solid var(--hx-border); border-radius: var(--hx-radius); box-shadow: var(--hx-shadow-sm); padding: 1.5rem; text-align: left; } .hx-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--hx-primary-soft); color: var(--hx-primary); margin-bottom: 0.9rem; } .hx-feature-icon svg { width: 22px; height: 22px; } .hx-feature h3 { font-family: var(--hx-font-sans); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.4rem; } .hx-feature p { color: var(--hx-text-muted); font-size: 0.92rem; margin: 0; line-height: 1.55; } /* ---------- Страница 404 ---------- */ .hx-notfound { text-align: center; padding: 4rem 1rem; } .hx-notfound-code { font-family: var(--hx-font-display); font-size: 5rem; color: var(--hx-text-muted); opacity: 0.35; line-height: 1; margin-bottom: 0.5rem; } /* ---------- Карта ---------- */ .hx-map-frame { border-radius: var(--hx-radius); overflow: hidden; border: 1px solid var(--hx-border); box-shadow: var(--hx-shadow-sm); } :root[data-theme="dark"] .hx-map-frame .leaflet-layer, :root[data-theme="dark"] .hx-map-frame .leaflet-control-zoom, :root[data-theme="dark"] .hx-map-frame .leaflet-control-attribution { filter: brightness(0.75) contrast(1.05); } /* Grave-map marker clustering — grid-based, computed in leafletMap.js (no external plugin). */ .hx-cluster-marker { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--hx-primary); color: var(--hx-primary-contrast); font-weight: 600; font-size: 0.85rem; box-shadow: var(--hx-shadow-sm); border: 2px solid #fff; } /* ---------- Валидация форм ---------- */ .validation-message { color: var(--hx-danger); font-size: 0.85rem; margin-top: 0.25rem; } .invalid { outline: 1px solid var(--hx-danger); } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--hx-success); } /* ---------- Экран загрузки ---------- */ .loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem; } .loading-progress circle { fill: none; stroke: var(--hx-surface-2); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--hx-primary); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; color: var(--hx-text-muted); } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Загрузка"); } /* ---------- Ошибки Blazor ---------- */ #blazor-error-ui { display: none; position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 2000; background: var(--hx-surface); color: var(--hx-text); border: 1px solid var(--hx-danger); border-radius: var(--hx-radius-sm); box-shadow: var(--hx-shadow-lg); padding: 0.75rem 2.5rem 0.75rem 1.25rem; max-width: min(560px, calc(100vw - 2rem)); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.6rem; color: var(--hx-text-muted); } .blazor-error-boundary { background: var(--hx-danger); color: #fff; border-radius: var(--hx-radius-sm); padding: 1rem; } .blazor-error-boundary::after { content: "Произошла ошибка."; } /* ---------- Лендинг (главная страница) ---------- Фирменная палитра лендинга (тёмный нави + золото, docs/assets/banner.svg). Используется только scoped-стилями LandingLayout/Home — лендинг сознательно не зависит от переключаемой темы приложения. */ :root { --color-bg-deep: #141a24; --color-bg-deep-2: #1c2436; --color-bg-panel: #202942; --color-bg-panel-alt: #182032; --color-border-subtle: rgba(255, 255, 255, 0.09); --color-gold: #c98f4a; --color-gold-soft: #e7b878; --color-gold-pale: #f0caa0; --color-glow: #d7a95e; --color-teal: #6fa382; --glow-amber: rgba(215, 169, 94, 0.20); --glow-plum: rgba(124, 74, 110, 0.22); --color-text-primary: #f2f4f8; --color-text-secondary: #9aa5b8; --color-text-tertiary: #6b7690; --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif; }