/* Власні стилі OrthoView — доповнюють класи Tailwind.
Кольори беруться зі змінних теми (див. static/css/tailwind.input.css). */
/* ---------------------------------------------------------------------------
М'яке кольорове сяйво на тлі сторінки. Воно закріплене за вікном і не рухається
під час прокручування — так інтерфейс виглядає спокійнішим.
--------------------------------------------------------------------------- */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(55rem 28rem at 15% -8%, var(--c-glow-1), transparent 65%),
radial-gradient(45rem 24rem at 92% 4%, var(--c-glow-2), transparent 65%);
}
/* Посилена версія для головної сторінки та сторінок входу */
.hero-glow::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(60rem 30rem at 50% -12%, var(--c-glow-1), transparent 70%);
}
/* ---------------------------------------------------------------------------
Перемикання теми має відбуватися в один кадр.
Інакше картки й кнопки плавно «доганяють» нове тло (у них є власні переходи
кольору), і здається, що елементи перемикаються не разом і з запізненням.
Тому на час зміни теми всі переходи вимикаються.
--------------------------------------------------------------------------- */
:root[data-theme-switching] *,
:root[data-theme-switching] *::before,
:root[data-theme-switching] *::after {
transition: none !important;
animation-duration: 0s !important;
}
/* ---------------------------------------------------------------------------
Іконки сонця й місяця в кнопці теми: показуємо потрібну без участі JavaScript,
тому правильна іконка видно одразу, ще до завантаження скриптів.
--------------------------------------------------------------------------- */
.icon-sun { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
/* ---------------------------------------------------------------------------
Індикатор стану сервера (колір залежить від атрибута data-state)
--------------------------------------------------------------------------- */
.status-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background: var(--c-ink-subtle);
transition: background-color 0.2s, box-shadow 0.2s;
}
[data-state="ok"] .status-dot {
background: var(--c-success);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-success) 22%, transparent);
}
[data-state="error"] .status-dot {
background: var(--c-danger);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-danger) 22%, transparent);
}
/* Зона завантаження файлів, коли над нею перетягують файл */
[data-dropzone][data-dragging] {
border-color: var(--c-brand);
background-color: var(--c-brand-soft);
}
/* ---------------------------------------------------------------------------
Інструкції з експорту файлів (сторінка «Як експортувати»)
--------------------------------------------------------------------------- */
.guide { font-size: 0.875rem; line-height: 1.65; color: var(--c-ink-muted); }
.guide h4 { margin: 1.25rem 0 0.5rem; font-weight: 600; color: var(--c-ink); }
.guide h4:first-child { margin-top: 0; }
.guide ol { list-style: decimal; padding-left: 1.25rem; }
.guide ul { list-style: disc; padding-left: 1.25rem; }
.guide li + li { margin-top: 0.4rem; }
/* Звичайний абзац усередині інструкції (підпис перед схемою папки) */
.guide p { margin-top: 0.75rem; }
.guide b { font-weight: 600; color: var(--c-ink); }
.guide code {
background: var(--c-surface-2);
border: 1px solid var(--c-line);
border-radius: 0.375rem;
padding: 0.05rem 0.35rem;
font-size: 0.8em;
color: var(--c-brand-ink);
white-space: nowrap;
}
.guide-note, .guide-warning { margin-top: 0.75rem; border-radius: 0.875rem; padding: 0.7rem 0.9rem; }
.guide-note { background: var(--c-surface-2); border: 1px solid var(--c-line); }
.guide-warning { background: var(--c-warning-soft); border: 1px solid color-mix(in srgb, var(--c-warning) 35%, transparent); color: var(--c-warning-ink); }
.guide-table { margin-top: 0.75rem; overflow-x: auto; }
/* ---------------------------------------------------------------------------
Схема папки кейсу в інструкціях.
Раніше це був чорний блок з деревом, намальованим псевдографікою
(├── └──), а пояснення до нього — окремою таблицею під ним. Людині
доводилось стрибати очима туди-сюди, а підписи в 7 мовах вирівнювались
пробілами вручну. Тепер дерево — звичайна вкладеність
/- , лінії
малює CSS, а пояснення стоїть одразу в тому ж рядку, що й файл.
--------------------------------------------------------------------------- */
/* ul.tree, а не просто .tree: вище вже є правило .guide ul з крапками і
відступом, і в них має бути однакова вага, щоб перемагало те, що нижче. */
ul.tree { margin-top: 0.85rem; font-size: 0.8125rem; line-height: 1.5; }
ul.tree, .tree ul { margin-bottom: 0; padding: 0; list-style: none; }
.tree ul { padding-left: 1.05rem; }
/* Так само знімаємо відступ між пунктами з .guide li + li — інакше
вертикальна лінія дерева розривалася б між рядками. */
.tree li + li { margin-top: 0; }
/* Лінії дерева: вертикаль веде вниз по списку, а «коліно» — до кожного рядка.
В останнього в списку вертикаль прозора, тож лінія не звисає в порожнечу. */
.tree ul > li { position: relative; padding-left: 0.95rem; border-left: 1px solid var(--c-line); }
.tree ul > li:last-child { border-left-color: transparent; }
.tree ul > li::before {
content: "";
position: absolute;
left: -1px;
top: 0;
width: 0.7rem;
height: 0.95rem;
border-left: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
border-bottom-left-radius: 0.3rem;
}
.tree-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding: 0.2rem 0; }
/* Іконка — маска з кольором тексту рядка, тож вона правильна в обох темах */
.tree-icon {
width: 1rem;
height: 1rem;
flex: none;
background-color: currentColor;
-webkit-mask: var(--tree-icon) center / contain no-repeat;
mask: var(--tree-icon) center / contain no-repeat;
}
.tree li[data-kind="folder"] > .tree-row { color: var(--c-brand); }
.tree li[data-kind="file"] > .tree-row { color: var(--c-ink-subtle); }
.tree li[data-kind="folder"] > .tree-row .tree-icon {
--tree-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3.2 6.4A1.8 1.8 0 0 1 5 4.6h3.3c.5 0 1 .2 1.3.6l1.2 1.2h7.2A1.8 1.8 0 0 1 19.8 8.2v9.2a1.8 1.8 0 0 1-1.8 1.8H5a1.8 1.8 0 0 1-1.8-1.8z'/%3E%3C/svg%3E");
}
.tree li[data-kind="file"] > .tree-row .tree-icon {
--tree-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 2.8H6.8A1.8 1.8 0 0 0 5 4.6v14.8a1.8 1.8 0 0 0 1.8 1.8h10.4a1.8 1.8 0 0 0 1.8-1.8V8.3z'/%3E%3Cpath d='M13.5 2.8V8.3H19'/%3E%3C/svg%3E");
}
.tree-name {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.8125rem;
color: var(--c-ink);
}
.tree li[data-kind="folder"] > .tree-row .tree-name { font-weight: 600; color: var(--c-brand-ink); }
.tree-note { color: var(--c-ink-muted); }
.tree-note::before { content: "— "; color: var(--c-ink-subtle); }
/* На вузькому екрані пояснення переходить під назву, а не тисне її */
@media (max-width: 30rem) {
.tree-note { flex-basis: 100%; padding-left: 1.45rem; }
}
.guide-table table { width: 100%; border-collapse: collapse; }
.guide-table th, .guide-table td { border-top: 1px solid var(--c-line); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; }
/* Ліва колонка вузька, але може переноситись: у неї трапляються довгі назви
файлів (Maxilla.stl · Mandible.stl), і заборона переносу виштовхувала б
таблицю за край екрана на телефоні. */
.guide-table th { width: 9rem; font-weight: 600; color: var(--c-ink); }
.guide-table code { white-space: normal; }
/* Але сама назва файлу не рветься навпіл */
.guide-table th code { white-space: nowrap; }
/* Плавна поява карток і блоків — ледь помітна, але відчутна деталь */
@media (prefers-reduced-motion: no-preference) {
.rise-in {
animation: rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rise-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
}
/* ---------------------------------------------------------------------------
Перемикач мови: прибираємо стандартний трикутник у
--------------------------------------------------------------------------- */
[data-language-menu] > summary { list-style: none; }
[data-language-menu] > summary::-webkit-details-marker { display: none; }
[data-language-menu] > summary::marker { content: ""; }