@dzhechkov/p-replicator 1.5.6 → 1.5.7

package/README/ru/html/style.css

@@ -0,0 +1,804 @@
+/* ============================================================
+   P-Replicator docs — vanilla CSS, light + dark, mobile-first
+   ============================================================ */
+
+/* ─── CSS Custom Properties (light + dark) ───────────────── */
+
+:root {
+  --header-h: 56px;
+  --sidebar-w: 280px;
+  --content-max: 820px;
+  --radius: 6px;
+  --radius-lg: 10px;
+  --transition: 0.18s ease;
+
+  /* Light theme as default */
+  color-scheme: light;
+  --bg: #ffffff;
+  --bg-secondary: #f6f8fa;
+  --bg-elevated: #ffffff;
+  --text: #1f2328;
+  --text-muted: #6e7781;
+  --accent: #0969da;
+  --accent-bg: rgba(9, 105, 218, 0.08);
+  --accent-bg-strong: rgba(9, 105, 218, 0.15);
+  --border: #d0d7de;
+  --border-muted: #eaeef2;
+  --code-bg: #f6f8fa;
+  --code-text: #1f2328;
+  --kbd-bg: #f6f8fa;
+  --shadow: 0 1px 3px rgba(31, 35, 40, 0.06), 0 4px 12px rgba(31, 35, 40, 0.04);
+  --shadow-strong: 0 4px 16px rgba(31, 35, 40, 0.12);
+  --mark-bg: #fff8c5;
+  --mark-color: #1f2328;
+
+  /* Syntax */
+  --syn-keyword: #cf222e;
+  --syn-string: #0a3069;
+  --syn-comment: #6e7781;
+  --syn-number: #0550ae;
+  --syn-function: #8250df;
+  --syn-tag: #116329;
+  --syn-attr: #0550ae;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #0d1117;
+  --bg-secondary: #161b22;
+  --bg-elevated: #161b22;
+  --text: #e6edf3;
+  --text-muted: #8b949e;
+  --accent: #58a6ff;
+  --accent-bg: rgba(56, 139, 253, 0.10);
+  --accent-bg-strong: rgba(56, 139, 253, 0.20);
+  --border: #30363d;
+  --border-muted: #21262d;
+  --code-bg: #1c2128;
+  --code-text: #e6edf3;
+  --kbd-bg: #21262d;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.20);
+  --shadow-strong: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --mark-bg: rgba(187, 128, 9, 0.4);
+  --mark-color: #e6edf3;
+
+  --syn-keyword: #ff7b72;
+  --syn-string: #a5d6ff;
+  --syn-comment: #8b949e;
+  --syn-number: #79c0ff;
+  --syn-function: #d2a8ff;
+  --syn-tag: #7ee787;
+  --syn-attr: #79c0ff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --bg: #0d1117;
+    --bg-secondary: #161b22;
+    --bg-elevated: #161b22;
+    --text: #e6edf3;
+    --text-muted: #8b949e;
+    --accent: #58a6ff;
+    --accent-bg: rgba(56, 139, 253, 0.10);
+    --accent-bg-strong: rgba(56, 139, 253, 0.20);
+    --border: #30363d;
+    --border-muted: #21262d;
+    --code-bg: #1c2128;
+    --code-text: #e6edf3;
+    --kbd-bg: #21262d;
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.20);
+    --shadow-strong: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --mark-bg: rgba(187, 128, 9, 0.4);
+    --mark-color: #e6edf3;
+    --syn-keyword: #ff7b72;
+    --syn-string: #a5d6ff;
+    --syn-comment: #8b949e;
+    --syn-number: #79c0ff;
+    --syn-function: #d2a8ff;
+    --syn-tag: #7ee787;
+    --syn-attr: #79c0ff;
+  }
+}
+
+/* ─── Reset / base ────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: calc(var(--header-h) + 16px);
+  -webkit-text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
+               "Inter", "Roboto", Arial, sans-serif;
+  font-size: clamp(15px, 0.96vw + 12px, 17px);
+  line-height: 1.65;
+  background: var(--bg);
+  color: var(--text);
+  transition: background-color var(--transition), color var(--transition);
+  min-height: 100vh;
+}
+
+/* Skip to content (a11y) */
+.skip-to-content {
+  position: absolute;
+  top: -100px;
+  left: 8px;
+  background: var(--accent);
+  color: white;
+  padding: 12px 16px;
+  z-index: 1001;
+  text-decoration: none;
+  border-radius: var(--radius);
+  font-weight: 600;
+  transition: top 0.18s;
+}
+.skip-to-content:focus { top: 8px; }
+
+/* ─── Reading progress bar ────────────────────────────────── */
+
+.progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 3px;
+  width: 0;
+  background: linear-gradient(90deg, var(--accent), #79c0ff);
+  z-index: 999;
+  transition: width 0.08s ease-out;
+}
+
+/* ─── Header ──────────────────────────────────────────────── */
+
+.site-header {
+  position: sticky;
+  top: 0;
+  height: var(--header-h);
+  background: var(--bg-elevated);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  z-index: 100;
+  gap: 12px;
+  backdrop-filter: blur(8px);
+}
+
+.site-title {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  text-decoration: none;
+  color: var(--text);
+  font-size: 1.05em;
+}
+.site-title strong { font-weight: 700; }
+.site-title:hover { color: var(--accent); }
+
+.version {
+  color: var(--text-muted);
+  font-size: 0.82em;
+  font-weight: 500;
+  padding: 2px 8px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-muted);
+  border-radius: 999px;
+}
+
+.header-nav {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.header-nav a {
+  color: var(--text-muted);
+  text-decoration: none;
+  padding: 6px 12px;
+  border-radius: var(--radius);
+  transition: background-color var(--transition), color var(--transition);
+  font-size: 0.93em;
+  font-weight: 500;
+}
+.header-nav a:hover {
+  color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.menu-toggle, .theme-toggle {
+  background: none;
+  border: 1px solid var(--border-muted);
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-size: 1.15em;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text);
+  transition: background-color var(--transition), border-color var(--transition);
+}
+.menu-toggle:hover, .theme-toggle:hover {
+  background: var(--bg-secondary);
+  border-color: var(--border);
+}
+.menu-toggle { display: none; }
+
+/* ─── Main layout ─────────────────────────────────────────── */
+
+.layout {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) 1fr;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* ─── Sidebar ─────────────────────────────────────────────── */
+
+.sidebar {
+  position: sticky;
+  top: var(--header-h);
+  height: calc(100vh - var(--header-h));
+  overflow-y: auto;
+  padding: 20px 16px 60px;
+  border-right: 1px solid var(--border);
+  background: var(--bg);
+  scrollbar-gutter: stable;
+}
+
+.search-wrap {
+  position: relative;
+  margin-bottom: 12px;
+}
+.search-input {
+  width: 100%;
+  padding: 9px 36px 9px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+.search-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-bg-strong);
+}
+.search-kbd {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--kbd-bg);
+  border: 1px solid var(--border-muted);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 11px;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  color: var(--text-muted);
+  pointer-events: none;
+  user-select: none;
+}
+
+.search-results {
+  margin-bottom: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+  max-height: 50vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow);
+}
+.search-result {
+  display: block;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-muted);
+  text-decoration: none;
+  color: var(--text);
+  cursor: pointer;
+  transition: background-color var(--transition);
+}
+.search-result:last-child { border-bottom: none; }
+.search-result:hover, .search-result:focus {
+  background: var(--accent-bg);
+  outline: none;
+}
+.search-result-section {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 2px;
+}
+.search-result-title {
+  font-weight: 600;
+  color: var(--accent);
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+.search-result-snippet {
+  font-size: 12.5px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  word-break: break-word;
+}
+.search-result mark {
+  background: var(--mark-bg);
+  color: var(--mark-color);
+  padding: 0 2px;
+  border-radius: 2px;
+  font-weight: 600;
+}
+.search-empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.toc ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+.toc > ul > li {
+  margin-bottom: 4px;
+}
+.toc ul ul {
+  margin-top: 2px;
+  padding-left: 14px;
+  border-left: 1px solid var(--border-muted);
+  font-size: 13.5px;
+}
+.toc ul ul li { margin-bottom: 1px; }
+
+.toc a {
+  display: block;
+  padding: 5px 10px;
+  color: var(--text);
+  text-decoration: none;
+  border-radius: var(--radius);
+  transition: background-color var(--transition), color var(--transition);
+  word-break: break-word;
+  line-height: 1.4;
+}
+.toc a:hover {
+  background: var(--bg-secondary);
+  color: var(--accent);
+}
+.toc a.active {
+  background: var(--accent-bg-strong);
+  color: var(--accent);
+  font-weight: 600;
+}
+.toc-section { font-weight: 600; }
+
+/* ─── Main content ────────────────────────────────────────── */
+
+.main-content {
+  padding: 32px 40px 80px;
+  max-width: var(--content-max);
+  width: 100%;
+  margin: 0 auto;
+}
+
+.section {
+  padding: 24px 0;
+  scroll-margin-top: calc(var(--header-h) + 12px);
+}
+.section + .section {
+  border-top: 1px solid var(--border-muted);
+}
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+  margin: 1.5em 0 0.6em;
+  line-height: 1.3;
+  font-weight: 700;
+}
+h1 {
+  font-size: clamp(1.6em, 2.4vw + 0.5em, 2.1em);
+  margin-top: 0.4em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--border);
+}
+h2 {
+  font-size: clamp(1.3em, 1.6vw + 0.4em, 1.6em);
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--border-muted);
+  margin-top: 2em;
+}
+h3 { font-size: 1.2em; margin-top: 1.6em; }
+h4 { font-size: 1.05em; margin-top: 1.3em; }
+h2[id], h3[id], h4[id] {
+  scroll-margin-top: calc(var(--header-h) + 16px);
+}
+
+p { margin: 0.8em 0; }
+
+/* Links */
+a { color: var(--accent); }
+a:hover { text-decoration: underline; }
+a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Lists */
+ul, ol { padding-left: 1.5em; margin: 0.8em 0; }
+li { margin: 0.3em 0; }
+li > ul, li > ol { margin: 0.3em 0; }
+
+/* Code */
+pre {
+  background: var(--code-bg);
+  border: 1px solid var(--border-muted);
+  padding: 14px 16px;
+  border-radius: var(--radius-lg);
+  overflow-x: auto;
+  font-size: 0.88em;
+  line-height: 1.55;
+  position: relative;
+  margin: 16px 0;
+}
+pre::-webkit-scrollbar { height: 8px; }
+pre::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+pre code {
+  background: none;
+  padding: 0;
+  color: var(--code-text);
+  font-size: inherit;
+}
+code {
+  background: var(--code-bg);
+  padding: 1.5px 6px;
+  border-radius: 3px;
+  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
+  font-size: 0.88em;
+  color: var(--code-text);
+  border: 1px solid var(--border-muted);
+}
+pre code { border: none; }
+
+.copy-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-muted);
+  opacity: 0;
+  transition: opacity var(--transition), color var(--transition);
+}
+pre:hover .copy-btn, pre:focus-within .copy-btn { opacity: 1; }
+.copy-btn:hover { color: var(--accent); }
+.copy-btn[data-state="copied"] { color: #1f883d; }
+
+/* Tables */
+.table-wrap {
+  overflow-x: auto;
+  margin: 16px 0;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-muted);
+}
+table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.93em;
+}
+th, td {
+  border-bottom: 1px solid var(--border-muted);
+  border-right: 1px solid var(--border-muted);
+  padding: 8px 12px;
+  text-align: left;
+  vertical-align: top;
+}
+th:last-child, td:last-child { border-right: none; }
+tr:last-child td { border-bottom: none; }
+th {
+  background: var(--bg-secondary);
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+}
+tbody tr:hover { background: var(--bg-secondary); }
+
+/* Blockquote */
+blockquote {
+  border-left: 4px solid var(--accent);
+  padding: 8px 16px;
+  background: var(--accent-bg);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  color: var(--text);
+  margin: 16px 0;
+}
+blockquote p:first-child { margin-top: 0; }
+blockquote p:last-child { margin-bottom: 0; }
+
+/* HR */
+hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 32px 0;
+}
+
+/* Strong / em */
+strong { font-weight: 700; }
+em { font-style: italic; }
+
+/* ─── Section nav (prev/next) ─────────────────────────────── */
+
+.section-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  gap: 12px;
+  margin-top: 56px;
+  padding-top: 24px;
+  border-top: 1px solid var(--border);
+}
+.section-nav > a {
+  flex: 1 1 calc(50% - 6px);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  color: var(--text);
+  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
+  min-width: 0;
+}
+.section-nav > a:hover {
+  background: var(--accent-bg);
+  border-color: var(--accent);
+  transform: translateY(-1px);
+  text-decoration: none;
+}
+.section-nav .nav-arrow {
+  font-size: 1.4em;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+.section-nav .nav-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.section-nav .nav-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+.section-nav .nav-title {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.section-nav .next { justify-content: flex-end; text-align: right; margin-left: auto; }
+.section-nav .prev { justify-content: flex-start; }
+.section-nav .next .nav-text { align-items: flex-end; }
+.section-nav > span:empty { flex: 1 1 calc(50% - 6px); }
+
+/* ─── Footer ──────────────────────────────────────────────── */
+
+.site-footer {
+  margin-top: 80px;
+  padding: 32px 0 0;
+  border-top: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 14px;
+}
+.footer-row { margin: 6px 0; }
+.footer-muted { color: var(--text-muted); }
+.footer-row code {
+  font-size: 0.92em;
+  padding: 1px 6px;
+}
+.footer-links a {
+  color: var(--text-muted);
+  text-decoration: none;
+  margin: 0 4px;
+}
+.footer-links a:hover { color: var(--accent); }
+
+/* ─── Sidebar overlay (mobile) ────────────────────────────── */
+
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 50;
+  animation: fade-in 0.18s ease;
+}
+.sidebar-overlay.active { display: block; }
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* ─── Back to top ─────────────────────────────────────────── */
+
+.back-to-top {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 48px;
+  height: 48px;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  background: var(--bg-elevated);
+  color: var(--text);
+  font-size: 22px;
+  cursor: pointer;
+  box-shadow: var(--shadow-strong);
+  z-index: 99;
+  transition: opacity var(--transition), transform var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.back-to-top:hover {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+  transform: translateY(-2px);
+}
+
+/* ─── Mark (search highlight) ─────────────────────────────── */
+
+mark {
+  background: var(--mark-bg);
+  color: var(--mark-color);
+  padding: 0 2px;
+  border-radius: 2px;
+}
+
+/* ─── Syntax highlighting tokens ──────────────────────────── */
+
+.tk-keyword { color: var(--syn-keyword); font-weight: 600; }
+.tk-string  { color: var(--syn-string); }
+.tk-comment { color: var(--syn-comment); font-style: italic; }
+.tk-number  { color: var(--syn-number); }
+.tk-function{ color: var(--syn-function); }
+.tk-tag     { color: var(--syn-tag); }
+.tk-attr    { color: var(--syn-attr); }
+.tk-flag    { color: var(--syn-function); font-weight: 600; }
+
+/* ─── Responsive breakpoints ──────────────────────────────── */
+
+/* Tablet & mobile: collapsible sidebar */
+@media (max-width: 1023px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+  .sidebar {
+    position: fixed;
+    top: var(--header-h);
+    left: 0;
+    width: min(85vw, 320px);
+    max-width: 100vw;
+    height: calc(100vh - var(--header-h));
+    background: var(--bg);
+    border-right: 1px solid var(--border);
+    box-shadow: var(--shadow-strong);
+    transform: translateX(-105%);
+    transition: transform 0.22s ease;
+    z-index: 60;
+  }
+  .sidebar.open { transform: translateX(0); }
+  .menu-toggle { display: flex; }
+  .main-content {
+    padding: 24px 20px 60px;
+  }
+  .section {
+    padding: 16px 0;
+  }
+}
+
+/* Mobile: tighter content + smaller header nav */
+@media (max-width: 767px) {
+  :root { --header-h: 52px; }
+  .header-nav {
+    gap: 4px;
+  }
+  .header-nav a {
+    padding: 5px 8px;
+    font-size: 0.85em;
+  }
+  .site-title { font-size: 1em; }
+  .main-content { padding: 16px 14px 60px; }
+  .section { padding: 12px 0; }
+  h1 { font-size: 1.5em; }
+  h2 { font-size: 1.25em; }
+  h3 { font-size: 1.1em; }
+  pre { padding: 12px; font-size: 0.85em; }
+  th, td { padding: 6px 8px; font-size: 0.88em; }
+  .section-nav {
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 36px;
+  }
+  .section-nav > a { flex: 0 0 auto; }
+  .back-to-top {
+    bottom: 16px; right: 16px;
+    width: 44px; height: 44px;
+    font-size: 20px;
+  }
+  .version { display: none; }
+}
+
+@media (max-width: 480px) {
+  .header-nav a { padding: 4px 6px; font-size: 0.8em; }
+}
+
+/* ─── Print stylesheet ────────────────────────────────────── */
+
+@media print {
+  .site-header, .sidebar, .sidebar-overlay, .back-to-top,
+  .progress-bar, .section-nav, .copy-btn, .skip-to-content,
+  .search-results, .search-wrap {
+    display: none !important;
+  }
+  .layout { display: block; }
+  .main-content {
+    padding: 0;
+    max-width: none;
+    width: 100%;
+  }
+  body {
+    background: white !important;
+    color: black !important;
+    font-size: 11pt;
+  }
+  pre, code {
+    background: #f6f8fa !important;
+    color: #1f2328 !important;
+    border: 1px solid #d0d7de !important;
+  }
+  pre { white-space: pre-wrap; word-wrap: break-word; }
+  a { color: #0969da !important; text-decoration: underline; }
+  .section { page-break-before: always; }
+  .section:first-child { page-break-before: auto; }
+  h2, h3 { page-break-after: avoid; }
+  table { page-break-inside: avoid; }
+}
+
+/* ─── Reduced motion ──────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ─── Focus visible ──────────────────────────────────────── */
+
+button:focus-visible, .toc a:focus-visible, .search-input:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}