/* Темы: data-theme на — light | dark */
:root {
color-scheme: light dark;
}
html[data-theme="light"] {
--bg-page: #f4f5f7;
--bg-panel: #ffffff;
--bg-article: #ffffff;
--text: #1a1d23;
--text-muted: #5c6370;
--link: #0969da;
--link-hover: #0550ae;
--border: #d8dee4;
--code-inline-bg: #eff1f3;
--pre-bg: #f6f8fa;
--blockquote-border: #d0d7de;
--blockquote-bg: #f8f9fb;
--details-bg: #f8f9fb;
--details-summary-bg: #eef1f4;
--hr: #d8dee4;
--btn-bg: #ffffff;
--btn-border: #d0d7de;
--btn-hover: #f3f4f6;
--focus: #0969da;
--shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
html[data-theme="dark"] {
--bg-page: #0f1419;
--bg-panel: #161b22;
--bg-article: #161b22;
--text: #e6edf3;
--text-muted: #8b949e;
--link: #58a6ff;
--link-hover: #79b8ff;
--border: #30363d;
--code-inline-bg: #21262d;
--pre-bg: #0d1117;
--blockquote-border: #3d444d;
--blockquote-bg: #1c2128;
--details-bg: #1c2128;
--details-summary-bg: #252c36;
--hr: #30363d;
--btn-bg: #21262d;
--btn-border: #30363d;
--btn-hover: #30363d;
--focus: #58a6ff;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
transition: background-color 0.2s ease, color 0.2s ease;
}
body {
margin: 0;
min-height: 100vh;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
font-size: 1rem;
line-height: 1.65;
background: var(--bg-page);
color: var(--text);
transition: background-color 0.2s ease, color 0.2s ease;
}
.page {
max-width: 980px;
margin: 0 auto;
padding: 1.25rem 1.25rem 2.5rem;
}
/* Верхняя панель */
.topbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow);
margin-bottom: 1.5rem;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.topbar__left {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.topbar__doc-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
}
.topbar__label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-muted);
}
.topbar__select {
font: inherit;
font-size: 0.875rem;
max-width: min(100%, 22rem);
padding: 0.4rem 2rem 0.4rem 0.65rem;
border-radius: 8px;
border: 1px solid var(--btn-border);
background: var(--btn-bg);
color: var(--text);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.topbar__select:hover {
border-color: var(--link);
}
.topbar__select:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.topbar__title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.topbar__file {
font-size: 0.8125rem;
color: var(--text-muted);
font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
}
.topbar__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.btn {
appearance: none;
cursor: pointer;
font: inherit;
font-size: 0.875rem;
font-weight: 600;
padding: 0.5rem 0.9rem;
border-radius: 8px;
border: 1px solid var(--btn-border);
background: var(--btn-bg);
color: var(--text);
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover {
background: var(--btn-hover);
}
.btn:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.btn--primary {
border-color: var(--link);
color: var(--link);
}
.btn--primary:hover {
background: var(--btn-hover);
border-color: var(--link-hover);
color: var(--link-hover);
}
/* Контент */
.main {
background: var(--bg-article);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.75rem 2rem;
box-shadow: var(--shadow);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.article {
max-width: 100%;
overflow-wrap: break-word;
}
.article :first-child {
margin-top: 0;
}
.article :last-child {
margin-bottom: 0;
}
.article h1,
.article h2,
.article h3 {
line-height: 1.25;
letter-spacing: -0.02em;
margin-top: 1.75rem;
margin-bottom: 0.65rem;
}
.article h1 {
font-size: 1.875rem;
font-weight: 800;
border-bottom: 1px solid var(--border);
padding-bottom: 0.35rem;
}
.article h2 {
font-size: 1.45rem;
font-weight: 700;
}
.article h3 {
font-size: 1.15rem;
font-weight: 700;
}
.article p {
margin: 0.85rem 0;
}
.article ul,
.article ol {
margin: 0.85rem 0;
padding-left: 1.5rem;
}
.article li {
margin: 0.35rem 0;
}
.article a {
color: var(--link);
text-decoration: underline;
text-underline-offset: 2px;
}
.article a:hover {
color: var(--link-hover);
}
.article hr {
border: none;
border-top: 1px solid var(--hr);
margin: 1.75rem 0;
}
.article blockquote {
margin: 1rem 0;
padding: 0.65rem 1rem;
border-left: 4px solid var(--blockquote-border);
background: var(--blockquote-bg);
border-radius: 0 8px 8px 0;
color: var(--text-muted);
}
.article blockquote p {
margin: 0.5rem 0;
}
/* Inline code vs блоки */
.article :not(pre) > code {
font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
font-size: 0.9em;
padding: 0.15em 0.4em;
border-radius: 6px;
background: var(--code-inline-bg);
border: 1px solid var(--border);
}
.article pre {
margin: 1rem 0;
padding: 1rem 1.1rem;
border-radius: 10px;
background: var(--pre-bg);
border: 1px solid var(--border);
overflow-x: auto;
line-height: 1.5;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.article pre code {
font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
font-size: 0.875rem;
display: block;
background: none !important;
border: none !important;
padding: 0 !important;
}
/* Таблицы */
.article table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
font-size: 0.9375rem;
}
.article th,
.article td {
border: 1px solid var(--border);
padding: 0.5rem 0.75rem;
text-align: left;
}
.article th {
background: var(--details-summary-bg);
font-weight: 600;
}
.article tr:nth-child(even) td {
background: rgba(127, 127, 127, 0.06);
}
/* Сворачиваемые блоки — карточка */
.article details {
margin: 1.25rem 0;
padding: 0.75rem 1rem 1rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--details-bg);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.article details > summary {
list-style: none;
font-weight: 600;
cursor: pointer;
padding: 0.5rem 0.65rem;
margin: -0.25rem -0.35rem 0.75rem;
border-radius: 8px;
background: var(--details-summary-bg);
border: 1px solid var(--border);
transition: background 0.15s ease;
}
.article details > summary::-webkit-details-marker {
display: none;
}
.article details > summary::before {
content: "▸ ";
display: inline-block;
transition: transform 0.15s ease;
}
.article details[open] > summary::before {
transform: rotate(90deg);
}
.article details > summary:hover {
filter: brightness(1.03);
}
.article details:focus-within {
outline: none;
}
.article details > summary:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
/* Код внутри details — те же правила pre */
.article details pre {
margin-top: 0.5rem;
}
/* Модальное окно пароля */
body.modal-open {
overflow: hidden;
}
.modal[hidden] {
display: none !important;
}
.modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
}
html[data-theme="dark"] .modal__backdrop {
background: rgba(0, 0, 0, 0.55);
}
.modal__card {
position: relative;
z-index: 1;
width: 100%;
max-width: 400px;
padding: 1.35rem 1.5rem;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--bg-panel);
box-shadow: var(--shadow);
}
.modal__title {
margin: 0 0 0.5rem;
font-size: 1.1rem;
font-weight: 700;
}
.modal__text {
margin: 0 0 1rem;
font-size: 0.9rem;
color: var(--text-muted);
}
.modal__input {
width: 100%;
font: inherit;
font-size: 0.9375rem;
padding: 0.55rem 0.75rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-article);
color: var(--text);
margin-bottom: 0.5rem;
}
.modal__input:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 0;
}
.modal__error {
margin: 0 0 0.75rem;
font-size: 0.8125rem;
color: #cf222e;
}
html[data-theme="dark"] .modal__error {
color: #f85149;
}
.modal__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0.5rem;
}
@media (max-width: 640px) {
.main {
padding: 1.25rem 1rem;
}
.topbar__title {
font-size: 1.1rem;
}
}