@bytechain.cn/colamd-themes 0.3.0

package/themes/colly.css

@@ -0,0 +1,370 @@
+/*
+ * ColaMD Theme: colly
+ * Theme extracted from url
+ * Generated by colamd-themes (url: https://colly.com/)
+ *
+ * ═══════════════════════════════════════════════════════════
+ *   SECTION 1 — Design Tokens
+ *   Modify the 5 seed colors + 3 font stacks to change the theme
+ * ═══════════════════════════════════════════════════════════ */
+
+body.theme-custom {
+
+  /* ── 1.1 Seed Palette ── */
+  --seed-accent:        #2b579a;
+  --seed-accent-light:  rgba(43, 87, 154, 0.15);
+  --seed-accent-dark:   #2b579a;
+  --seed-surface:       #ffffff;
+  --seed-panel:         #f8f8f8;
+  --seed-panel-alt:     #f8f8f8;
+  --seed-ink:           #222222;
+  --seed-ink-muted:     #666666;
+  --seed-ink-dim:       #666666;
+  --seed-border:        #cccccc;
+  --seed-border-strong: #cccccc;
+
+  /* ── 1.2 Typography ── */
+  --font-body:    "Noto Serif SC", "Source Han Serif SC", "Inter", "SF Pro Text", -apple-system, Georgia, serif;
+  --font-heading: "Noto Sans SC", "PingFang SC", "Inter", "SF Pro Text", -apple-system, "Microsoft YaHei", sans-serif;
+  --font-code:    "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
+  --font-mermaid: var(--font-heading);
+
+  /* ── 1.3 Font Sizing ── */
+  --font-size-root:     16px;
+  --font-scale-h1:      2;
+  --font-scale-h2:      1.125;
+  --font-scale-h3:      1.25;
+  --font-scale-h4:      1.1;
+  --font-scale-h5:      1;
+  --font-scale-h6:      0.95;
+  --font-size-mermaid:  13px;
+  --line-height-body:   1.75;
+  --line-height-heading: 1.35;
+  --line-height-code:   1.6;
+
+  /* ── 1.4 Radii & Spacing ── */
+  --radius-sm: 3px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --content-width: 820px;
+
+  /* ═══════════════════════════════════════════════════════════
+     SECTION 2 — Semantic Mapping
+     Auto-maps seed tokens → ColaMD built-in variables
+     ═══════════════════════════════════════════════════════════ */
+
+  /* ── 2.1 Surface ── */
+  --bg-color:      var(--seed-surface);
+  --surface-color: var(--seed-panel);
+  --surface-alt:   var(--seed-panel-alt);
+
+  /* ── 2.2 Text ── */
+  --text-color:    var(--seed-ink);
+  --heading-color: var(--seed-ink);
+  --text-muted:    var(--seed-ink-muted);
+  --text-dim:      var(--seed-ink-dim);
+
+  /* ── 2.3 Links & Accent ── */
+  --link-color:   var(--seed-accent);
+  --accent-color: var(--seed-accent);
+  --accent-dark:  var(--seed-accent-dark);
+  --accent-light: var(--seed-accent-light);
+  --selection-bg: rgba(43, 87, 154, 0.15);
+
+  /* ── 2.4 Borders ── */
+  --border-color:      var(--seed-border);
+  --blockquote-border: var(--seed-accent);
+  --hr-color:          var(--seed-border);
+
+  /* ── 2.5 Inline Code ── */
+  --code-bg:    var(--seed-panel);
+  --code-color: var(--seed-accent-dark);
+
+  /* ── 2.6 Code Blocks ── */
+  --code-block-bg:    var(--seed-panel-alt);
+  --code-block-text:  var(--seed-ink);
+  --code-block-color: var(--seed-ink);
+
+  /* ── 2.7 Blockquote ── */
+  --blockquote-bg: var(--seed-panel);
+
+  /* ── 2.8 Tables ── */
+  --table-header-bg: var(--seed-panel);
+  --table-border:    var(--seed-border);
+
+  /* ── 2.9 Scrollbar ── */
+  --scrollbar-thumb:       var(--seed-border-strong);
+  --scrollbar-thumb-hover: var(--seed-ink-muted);
+
+  /* ═══════════════════════════════════════════════════════════
+     SECTION 3 — Mermaid 20 Core Variables
+     Auto-consumed by built-in variables.css for 22 diagram types
+     ═══════════════════════════════════════════════════════════ */
+
+  /* ── 3.1 Container ── */
+  --mermaid-background:    var(--seed-panel);
+  --mermaid-border-color:  var(--seed-border);
+  --mermaid-border-radius: var(--radius-md);
+  --mermaid-padding:       20px;
+
+  /* ── 3.2 Font ── */
+  --mermaid-font-family: var(--font-mermaid);
+  --mermaid-font-size:   var(--font-size-mermaid);
+
+  /* ── 3.3 Nodes ── */
+  --mermaid-node-fill:         var(--seed-panel);
+  --mermaid-node-stroke:       var(--seed-accent);
+  --mermaid-node-stroke-width: 1.5px;
+  --mermaid-node-text:         var(--seed-ink);
+
+  /* ── 3.4 Edges ── */
+  --mermaid-edge-stroke:       var(--seed-ink-muted);
+  --mermaid-edge-stroke-width: 1.5px;
+
+  /* ── 3.5 Clusters ── */
+  --mermaid-cluster-fill:   rgba(43, 87, 154, 0.06);
+  --mermaid-cluster-stroke: var(--seed-accent);
+
+  /* ── 3.6 Labels ── */
+  --mermaid-label-text:      var(--seed-ink);
+  --mermaid-edge-label-text: var(--seed-ink-muted);
+  --mermaid-edge-label-bg:   var(--seed-surface);
+
+  /* ── 3.7 Titles & Axes ── */
+  --mermaid-title-text: var(--seed-ink);
+  --mermaid-axis-text:  var(--seed-ink-muted);
+  --mermaid-highlight:  var(--seed-accent);
+
+  /* ── 3.8 Person Nodes ── */
+  --mermaid-person-stroke: var(--seed-ink);
+  --mermaid-person-fill:   var(--seed-panel);
+
+  /* ── 3.9 Label Offset ── */
+  --mermaid-label-offset-y: 0px;
+
+  /* ── 4. Fine Tuning ── */
+  --line-height-base: var(--line-height-body);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SECTION 5 — Selector-Level Micro Adjustments
+   Only where base.css doesn't cover. All values via var(--*).
+   ═══════════════════════════════════════════════════════════ */
+
+html { font-size: var(--font-size-root); }
+body.theme-custom, html, body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: var(--font-body);
+  line-height: var(--line-height-body);
+}
+
+#write {
+  max-width: var(--content-width);
+  margin: 0 auto;
+  padding: 30px 60px 100px;
+}
+
+body.theme-custom h1, body.theme-custom h2, body.theme-custom h3,
+body.theme-custom h4, body.theme-custom h5, body.theme-custom h6 {
+  font-family: var(--font-heading);
+  color: var(--heading-color);
+  font-weight: 700;
+  line-height: var(--line-height-heading);
+}
+
+body.theme-custom h1 { font-size: calc(var(--font-size-root) * var(--font-scale-h1)); }
+body.theme-custom h2 { font-size: calc(var(--font-size-root) * var(--font-scale-h2)); }
+body.theme-custom h3 { font-size: calc(var(--font-size-root) * var(--font-scale-h3)); }
+body.theme-custom h4 { font-size: calc(var(--font-size-root) * var(--font-scale-h4)); }
+body.theme-custom h5 { font-size: calc(var(--font-size-root) * var(--font-scale-h5)); }
+body.theme-custom h6 { font-size: calc(var(--font-size-root) * var(--font-scale-h6)); }
+
+body.theme-custom strong { color: var(--accent-color); }
+body.theme-custom code {
+  font-family: var(--font-code);
+  background: var(--code-bg);
+  color: var(--code-color);
+}
+
+body.theme-custom pre {
+  background: var(--code-block-bg);
+  font-family: var(--font-code);
+  line-height: var(--line-height-code);
+}
+body.theme-custom pre code { color: var(--code-block-text); background: transparent; }
+
+body.theme-custom blockquote {
+  background: var(--blockquote-bg);
+  border-left: 4px solid var(--blockquote-border);
+}
+
+body.theme-custom table th {
+  background: var(--table-header-bg);
+  font-weight: 700;
+  border-bottom: 2px solid var(--accent-color);
+}
+
+body.theme-custom hr {
+  border: none;
+  border-top: 1px solid var(--hr-color);
+}
+
+body.theme-custom img { max-width: 100%; }
+
+/* ── 5.11 Mermaid caption ── */
+body.theme-custom .mermaid-block + p {
+  text-align: center;
+  font-family: var(--font-heading);
+  font-size: calc(var(--font-size-mermaid) + 2px);
+  color: var(--text-muted);
+}
+
+/* ── 5.12 Responsive ── */
+@media only screen and (max-width: 768px) {
+  #write { padding: 20px; }
+  body.theme-custom .mermaid-block { padding: 12px; }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SECTION 6 — Print / Export
+   Screen mirror: every screen property restated with !important.
+   ═══════════════════════════════════════════════════════════ */
+@media print {
+  @page { margin: 20mm; }
+
+  /* ── 6.0 Variable re-declaration (Chromium strips CSS variables in print) ── */
+  body.theme-custom {
+    --seed-accent:       #2b579a;
+    --seed-accent-dark:  #2b579a;
+    --seed-surface:      #ffffff;
+    --seed-ink:          #222222;
+    --seed-ink-muted:    #666666;
+    --seed-panel:        #f8f8f8;
+    --seed-panel-alt:    #f8f8f8;
+    --seed-border:       #cccccc;
+    --font-size-root:    16px;
+    --line-height-body:  1.75;
+    --line-height-heading: 1.35;
+    --line-height-code:  1.6;
+    --font-scale-h1:     2;
+    --font-scale-h2:     1.125;
+    --font-scale-h3:     1.25;
+    --font-scale-h4:     1.1;
+    --font-scale-h5:     1;
+    --font-scale-h6:     0.95;
+    --content-width:     820px;
+    --font-size-mermaid: 13px;
+    --accent-color:      var(--seed-accent);
+    --accent-dark:       var(--seed-accent-dark);
+    --code-bg:           var(--seed-panel);
+    --code-color:        var(--seed-accent-dark);
+    --code-block-bg:     var(--seed-panel-alt);
+    --code-block-text:   var(--seed-ink);
+    --blockquote-bg:     var(--seed-panel);
+    --table-header-bg:   var(--seed-panel);
+    --border-color:      var(--seed-border);
+    --hr-color:          var(--seed-border);
+  }
+
+  html, body, body.theme-custom {
+    background: var(--seed-surface) !important;
+    color: var(--seed-ink) !important;
+    font-family: var(--font-body) !important;
+    line-height: var(--line-height-body) !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  #write {
+    max-width: var(--content-width) !important;
+    margin: 0 auto !important;
+    padding: 30px 60px 100px !important;
+  }
+
+  body.theme-custom h1, body.theme-custom h2, body.theme-custom h3,
+  body.theme-custom h4, body.theme-custom h5, body.theme-custom h6 {
+    font-family: var(--font-heading) !important;
+    color: var(--seed-ink) !important;
+    font-weight: 700 !important;
+    line-height: var(--line-height-heading) !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+  body.theme-custom h1 { font-size: calc(var(--font-size-root) * var(--font-scale-h1)) !important; }
+  body.theme-custom h2 { font-size: calc(var(--font-size-root) * var(--font-scale-h2)) !important; }
+  body.theme-custom h3 { font-size: calc(var(--font-size-root) * var(--font-scale-h3)) !important; }
+  body.theme-custom h4 { font-size: calc(var(--font-size-root) * var(--font-scale-h4)) !important; }
+  body.theme-custom h5 { font-size: calc(var(--font-size-root) * var(--font-scale-h5)) !important; }
+  body.theme-custom h6 { font-size: calc(var(--font-size-root) * var(--font-scale-h6)) !important; }
+
+  body.theme-custom strong {
+    color: var(--accent-color) !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  body.theme-custom code {
+    font-family: var(--font-code) !important;
+    background: var(--code-bg) !important;
+    color: var(--code-color) !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  body.theme-custom pre {
+    background: var(--code-block-bg) !important;
+    font-family: var(--font-code) !important;
+    line-height: var(--line-height-code) !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+  body.theme-custom pre code { color: var(--code-block-text) !important; background: transparent !important; }
+
+  body.theme-custom blockquote {
+    background: var(--blockquote-bg) !important;
+    border-left: 4px solid var(--seed-accent) !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  body.theme-custom table th {
+    background: var(--table-header-bg) !important;
+    color: var(--seed-ink) !important;
+    font-weight: 700 !important;
+    border-bottom: 2px solid var(--accent-color) !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  body.theme-custom a {
+    color: var(--seed-accent) !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  body.theme-custom hr {
+    border: none !important;
+    border-top: 1px solid var(--hr-color) !important;
+  }
+
+  body.theme-custom img { max-width: 100% !important; }
+
+  body.theme-custom .mermaid-block {
+    background: var(--seed-surface) !important;
+    border-color: var(--seed-border) !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+  body.theme-custom .mermaid-preview svg * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  body.theme-custom .mermaid-block + p {
+    color: var(--seed-ink-muted) !important;
+    text-align: center !important;
+    font-family: var(--font-heading) !important;
+    font-size: calc(var(--font-size-mermaid) + 2px) !important;
+  }
+}