feat(blog-share): mirror blog_share_base.css + Ash share theme; fix Cookie @font-face placeholder
- base.css: @font-face Cookie now points at the real font note id (was the unresolved __COOKIE_FONT_ID__ placeholder -> 404 -> BMC button fell through to serif) - base.css: removed selectorless declaration block (dead code from a lost selector), merged the intended a.blog-subcategory gap rule into the existing block - README: document blog-share/ and note that Trilium code notes remain source of truth
This commit is contained in:
Richard Zink committed
1 parent
685bd17144
commit
eadb609dfc
3 files changed
+186
No files matched your search
@@ -74,6 +74,24 @@ Installation (Gitea 1.27+):
|
||||
|
||||
3. Restart Gitea, then pick the theme from **Explore → Preferences → UI theme**.
|
||||
|
||||
## Blog share themes (same palettes)
|
||||
|
||||
The public blog (`richard.familie-zink.org`) runs on Trilium's share feature with a custom EJS
|
||||
template; its frontend styling lives in two note-based stylesheets, mirrored here:
|
||||
|
||||
| File | Role |
|
||||
|---|---|
|
||||
| `blog-share/blog_share_base.css` | Layout/shared widgets (posts, search, pagination, BMC box, code blocks, scrollbars) – theme-independent, driven by the `--*` variables below |
|
||||
| `blog-share/blog_share_theme_ash.css` | Ash palette for both `html.theme-light` / `html.theme-dark`, incl. all Mermaid chart-type rules |
|
||||
|
||||
Notes:
|
||||
|
||||
- **Source of truth** is the matching Trilium code notes (`.blog` folder) which the share links via
|
||||
`shareCss`; this repo copy is the backup/mirror. Copy changes back and forth deliberately.
|
||||
- The `@font-face` for the "Cookie" handwriting font (Buy-Me-a-Coffee button) resolves against a
|
||||
live Trilium **file note id** (`/api/notes/<id>/download`) – it only works when served from the
|
||||
same Trilium instance; the mirrored file contains the real id of this instance.
|
||||
|
||||
## Customising
|
||||
|
||||
The themes are variable-driven. Edit the `--*` values inside the `#trilium-app { ... }` block and the
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
#header-logo img{display:none}#header-logo::before{content:"💻";font-size:1.5em;line-height:1;margin-right:8px;display:inline-block;vertical-align:middle}@font-face{font-family:"Cookie";src:url(/api/notes/qlZKEUC2BfCT/download) format("woff2");font-weight:400;font-display:swap}#bmc-links{margin-top:auto;padding:8px 25px 4px;background:var(--background-secondary);display:flex;flex-direction:column;gap:2px}.bmc-link{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 24px;border-radius:6px;color:var(--text-heading);text-decoration:none;font-size:0.9em;transition:background-color 150ms ease,color 150ms ease}.bmc-link:hover{background:var(--background-highlight);color:var(--text-heading);text-decoration:none}.bmc-link .tn-icon{color:var(--text-link)}.reading-time{font-size:0.8em;color:var(--text-menu);margin:-0.9em 0 1.25em}.blog-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:1.5em 0 0;padding-top:1em;border-top:1px solid var(--background-highlight)}.blog-pagination .blog-page-num{font-size:0.85em;color:var(--text-menu)}#content-footer .navigation{display:none}.blog-prevnext{display:flex;justify-content:space-between;gap:12px;margin:1.5em 0 0;padding-top:1em;border-top:1px solid var(--background-highlight)}a.blog-pn{display:flex;flex-direction:column;gap:2px;max-width:45%;color:var(--text-heading);text-decoration:none;transition:color 150ms ease}.blog-pn.next{margin-left:auto;align-items:flex-end;text-align:right}.blog-pn-label{font-size:0.72em;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-menu)}.blog-pn:hover{color:var(--text-link);text-decoration:none}.blog-pn.empty{display:none}.blog-search{margin:0.5em 0 1em}.blog-search-input{width:100%;box-sizing:border-box;padding:10px 14px;border-radius:8px;border:1px solid var(--background-highlight);background:var(--background-secondary);color:var(--text-heading);font-size:1em}.blog-search-input:focus{outline:none;border-color:var(--text-link)}.blog-search-list{list-style:none;padding:0;margin:1em 0 0}.blog-search-hit{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:8px;border:1px solid var(--background-highlight);background:var(--blog-card-bg);color:var(--text-heading);text-decoration:none;margin-bottom:8px;transition:border-color 150ms ease}.blog-search-hit:hover{border-color:var(--text-link);text-decoration:none}.blog-search-path{font-size:0.8em;color:var(--text-menu)}.blog-search-none{color:var(--text-menu)}.blog-post{padding:1.2em 1.4em;margin-bottom:1.25em;border:1px solid var(--background-highlight);border-radius:10px;background:var(--blog-card-bg);transition:border-color 150ms ease,box-shadow 150ms ease;cursor:pointer}.blog-post:last-child{margin-bottom:0}.blog-post:hover{border-color:var(--text-link);box-shadow:0 2px 8px rgba(0,0,0,0.18)}#content .blog-post:first-of-type{margin-top:1.5em}.blog-post-inner{display:flex;gap:16px;align-items:stretch}.blog-thumb-link{flex:0 0 auto;width:min(256px,35%);text-decoration:none}.blog-thumb{display:block;width:100%;height:100%;max-height:256px;object-fit:cover;border-radius:8px;border:1px solid var(--background-highlight)}.blog-post-body{flex:1;min-width:0}.blog-post-title{margin:0 0 0.25em}.blog-post-title a{color:var(--text-heading);text-decoration:none;transition:color 150ms ease}.blog-post-title a:hover{color:var(--text-link);text-decoration:none}.blog-post-meta{display:flex;gap:12px;font-size:0.85em;color:var(--text-menu);margin-bottom:0.5em}.blog-post-date{font-variant-numeric:tabular-nums;opacity:0.85}.blog-post-category{background:var(--background-highlight);border-radius:8px;padding:1px 10px;color:var(--text-heading);font-weight:600}.blog-post-summary{margin:0 0 0.5em;color:var(--text-primary)}.blog-post-tags{display:flex;flex-wrap:wrap;gap:6px}.tag{font-size:0.78em;color:var(--text-link);background:var(--background-secondary);border:1px solid var(--background-highlight);border-radius:8px;padding:1px 8px}a.tag{text-decoration:none;transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease}a.tag:hover{background:var(--background-highlight);border-color:var(--text-link);color:var(--text-heading);text-decoration:none}.article-meta{display:flex;gap:12px;font-size:0.9em;color:var(--text-menu);margin-bottom:1em;padding-bottom:1em;border-bottom:1px solid var(--background-highlight)}#content figure.image{margin:1.25em auto}#content figure img,#content img:not(.blog-thumb){border-radius:8px}.blog-subcategories{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.25em}.blog-subcategory{display:inline-flex;align-items:center;gap:6px;background:var(--background-secondary);border:1px solid var(--background-highlight);border-radius:8px;padding:4px 12px;color:var(--text-heading);text-decoration:none;font-weight:600;transition:background-color 150ms ease,border-color 150ms ease}.blog-subcategory i{color:var(--text-link)}.blog-subcategory:hover{background:var(--background-highlight);border-color:var(--text-link);colorLine truncated
|
||||
@@ -0,0 +1,167 @@
|
||||
/* Ash theme for blog share - recolored from the Gruvbox active theme.
|
||||
Ash palette: Gruvbox hues cooled/desaturated (yurakuden AshPalette / trilium-themes). */
|
||||
html.theme-light{--background-primary:#e9e3d5;--background-secondary:#dcd5c3;--background-highlight:#c9c1ad;--background-active:#3d6b72;--blog-card-bg:#dcd5c3;--scrollbar-thumb:#c9c1ad;--scrollbar-hover:#c9c1ad;--scrollbar-track:#dcd5c3;--text-primary:#2a2822;--text-heading:#2a2822;--text-menu:#6f685c;--text-link:#3d6b72;--text-menu-active:#e9e3d5;color-scheme:light;--model-viewer-color:#5c6631}html.theme-dark{--background-primary:#1c1b1f;--background-secondary:#100f12;--background-highlight:#3a383d;--background-active:#7c9aa1;--blog-card-bg:#29282c;--scrollbar-thumb:#3a383d;--scrollbar-hover:#454148;--scrollbar-track:#100f12;--text-primary:#e6dfd1;--text-heading:#f3ede1;--text-menu:#999187;--text-link:#7c9aa1;--text-menu-active:#100f12;color-scheme:dark;--model-viewer-color:#8f9a5c}body{font-family:"Inter","Montserrat","Lucida Grande","Lucida Sans Unicode",arial,sans-serif}#menu a{color:var(--text-heading);gap:8px;font-size:0.9em;padding:4px 6px;border-color:transparent;transition:background-color 150ms ease,color 150ms ease}#menu a:hover{background:var(--background-highlight);color:var(--text-heading);border-color:transparent;text-decoration:none}#menu a.active{background:var(--background-active);color:var(--background-secondary);border-color:transparent}#menu .tn-icon{color:var(--text-link)}#bmc-wrap{padding:8px 14px 14px;background:var(--background-secondary);border-top:1px solid var(--background-highlight)}.bmc-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;padding:6px 12px 8px;border-radius:8px;background:#d6b46a;color:#100f12;border:2px solid #100f12;font-family:"Cookie","Brush Script MT",cursive;font-size:1.4em;line-height:1.1;text-decoration:none;transition:background-color 150ms ease,transform 150ms ease}.bmc-btn:hover{background:#e0914f;color:#100f12;text-decoration:none;transform:translateY(-1px)}.bmc-btn .bmc-emoji{font-size:1.15em}.bmc-copyright{margin-top:8px;font-size:0.75em;color:var(--text-menu);display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}.bmc-powered{display:inline-flex;align-items:center;gap:3px;color:var(--text-menu);text-decoration:none;transition:color 150ms ease}.bmc-powered:hover{color:var(--text-link);text-decoration:none}.powered-logo{width:1em;height:1em;display:inline-block}.search-item{position:relative}.blog-search-header-input{flex:1;min-width:0;padding:6px 10px 6px 32px;border-radius:6px;border:1px solid rgba(124,154,161,0.55);background:rgba(124,154,161,0.08);color:var(--text-heading);font-size:0.9em;transition:border-color 150ms ease,box-shadow 150ms ease}html.theme-light .blog-search-header-input{border-color:#3d6b72;background:rgba(61,107,114,0.10)}.blog-search-header-input:focus{outline:none;border-color:#7c9aa1;box-shadow:0 0 0 2px rgba(124,154,161,0.20)}html.theme-light .blog-search-header-input:focus{border-color:#3d6b72;box-shadow:0 0 0 2px rgba(61,107,114,0.15)}.search-item .search-icon{color:rgba(124,154,161,0.85)}html.theme-light .search-item .search-icon{color:#3d6b72}.tn-image{width:18px;height:18px;border-radius:4px;flex-shrink:0;vertical-align:middle}.tn-image-svg{color:var(--text-link)}.title-image{width:34px;height:34px;border-radius:6px;vertical-align:middle;margin-right:10px}.note-fallback{margin:1em 0;overflow:hidden}.note-fallback-link{font-size:0.9em}.mermaid-fallback{margin:1em 0}.mermaid-render{margin:1em 0;padding:14px;background:var(--background-secondary);border:1px solid var(--background-highlight);border-radius:8px;overflow-x:auto}.mermaid-render svg{max-width:100%;height:auto}.mermaid-source{margin:12px 0 0;text-align:center}.mermaid-source summary{cursor:pointer;font-size:0.85em;color:var(--text-menu);user-select:none;padding:4px 10px;border:1px solid var(--background-highlight);border-radius:6px;display:inline-block;background:var(--background-secondary)}.mermaid-source summary:hover{color:var(--text-heading);border-color:var(--text-link)}.mermaid-source pre{width:min(100%,820px);margin:8px auto 0;text-align:left;position:relative;overflow:hidden}#content .mermaid-source .hljs-ln{width:100%}.mindmap-render,.excalidraw-render{margin:1em 0;padding:14px;background:var(--background-secondary);border:1px solid var(--background-highlight);border-radius:8px;overflow-x:auto}.mindmap-svg{display:block;width:100%;height:auto}.excalidraw-svg{display:block;max-width:100%;height:auto}.mindmap-render svg text{user-select:none}.blog-search-overlay{display:none;position:absolute;top:calc(100%+4px);left:0;right:0;z-index:50;background:var(--background-secondary);border:1px solid var(--background-highlight);border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.25)}.blog-search-overlay.open{display:block}.blog-search-overlay-hit{display:flex;flex-direction:column;gap:1px;padding:7px 10px;color:var(--text-heading);text-decoration:none;font-size:0.85em;border-bottom:1px solid var(--background-highlight)}.blog-search-overlay-hit:last-child{border-bottom:none}.bloLine truncated
|
||||
|
||||
|
||||
/* ---------- mermaid xychart-beta (bar & line charts) ----------
|
||||
flowchart selectors (.node/.edgePaths) don't match these; xychart renders
|
||||
unclassed bar rects inside g[class*="bar-plot-N"], line paths inside
|
||||
g[class*="line-plot-N"], axis/zero-line paths inside g[class*="-axis"],
|
||||
plus an opaque full-bleed <rect class="background">. */
|
||||
.mermaid svg rect.background{fill:transparent !important;stroke:none !important}
|
||||
html.theme-dark .mermaid svg g[class*="bar-plot"] rect{fill:#7c9aa1 !important;stroke:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg g[class*="line-plot"] path{fill:none !important;stroke:#e0914f !important;stroke-width:2px !important}
|
||||
html.theme-dark .mermaid svg g[class*="line-plot"] circle{fill:#e0914f !important}
|
||||
html.theme-dark .mermaid svg g[class*="-axis"] path,html.theme-dark .mermaid svg g[class*="-axis"] line{stroke:#999187 !important}
|
||||
html.theme-light .mermaid svg g[class*="bar-plot"] rect{fill:#3d6b72 !important;stroke:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg g[class*="line-plot"] path{fill:none !important;stroke:#a85f1d !important;stroke-width:2px !important}
|
||||
html.theme-light .mermaid svg g[class*="line-plot"] circle{fill:#a85f1d !important}
|
||||
html.theme-light .mermaid svg g[class*="-axis"] path,html.theme-light .mermaid svg g[class*="-axis"] line{stroke:#6f685c !important}
|
||||
|
||||
/* ---------- mermaid: uebrige Diagrammtypen (v11.16, Klassen aus Bundle-Sources verifiziert) ----------
|
||||
Reihenfolge: shared (markers, background) -> sequence -> gantt/journey -> pie -> quadrant
|
||||
-> class/state/er -> gitgraph -> timeline -> mindmap -> packet -> architecture -> sankey -> block */
|
||||
.mermaid svg rect.background{fill:transparent !important}
|
||||
html.theme-dark .mermaid svg marker path{fill:#999187 !important;stroke:#999187 !important}
|
||||
html.theme-light .mermaid svg marker path{fill:#6f685c !important;stroke:#6f685c !important}
|
||||
/* sequence */
|
||||
html.theme-dark .mermaid svg rect.actor,html.theme-dark .mermaid svg polygon.actor,html.theme-dark .mermaid svg path.actor{fill:#29282c !important;stroke:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg .actor-line,html.theme-dark .mermaid svg line.actor-line{stroke:#999187 !important}
|
||||
html.theme-dark .mermaid svg .messageLine0,html.theme-dark .mermaid svg .messageLine1,html.theme-dark .mermaid svg .loopLine,html.theme-dark .mermaid svg line.loopLine{stroke:#999187 !important}
|
||||
html.theme-dark .mermaid svg rect.labelBox{fill:#3a383d !important;stroke:#999187 !important}
|
||||
html.theme-dark .mermaid svg .note,html.theme-dark .mermaid svg path.note{fill:#3a383d !important;stroke:#d6b46a !important}
|
||||
html.theme-dark .mermaid svg rect.box{fill:rgba(28,27,31,0.55) !important;stroke:#454148 !important}
|
||||
html.theme-dark .mermaid svg .actorActivations path,html.theme-dark .mermaid svg path.actorActivations{fill:rgba(124,154,161,0.25) !important;stroke:none !important}
|
||||
html.theme-dark .mermaid svg text.sequenceNumber{fill:#1c1b1f !important}
|
||||
html.theme-light .mermaid svg rect.actor,html.theme-light .mermaid svg polygon.actor,html.theme-light .mermaid svg path.actor{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg .actor-line,html.theme-light .mermaid svg line.actor-line{stroke:#6f685c !important}
|
||||
html.theme-light .mermaid svg .messageLine0,html.theme-light .mermaid svg .messageLine1,html.theme-light .mermaid svg .loopLine,html.theme-light .mermaid svg line.loopLine{stroke:#6f685c !important}
|
||||
html.theme-light .mermaid svg rect.labelBox{fill:#c9c1ad !important;stroke:#6f685c !important}
|
||||
html.theme-light .mermaid svg .note,html.theme-light .mermaid svg path.note{fill:#c9c1ad !important;stroke:#8a6a24 !important}
|
||||
html.theme-light .mermaid svg rect.box{fill:rgba(233,227,213,0.55) !important;stroke:#c9c1ad !important}
|
||||
html.theme-light .mermaid svg .actorActivations path,html.theme-light .mermaid svg path.actorActivations{fill:rgba(61,107,114,0.18) !important;stroke:none !important}
|
||||
/* gantt + user-journey (gleiche task-Klassen-Familie) */
|
||||
html.theme-dark .mermaid svg .grid .tick line{stroke:#3a383d !important}
|
||||
html.theme-dark .mermaid svg .grid path{stroke:#3a383d !important}
|
||||
html.theme-dark .mermaid svg .today{stroke:#c15c46 !important;stroke-width:2px !important}
|
||||
html.theme-dark .mermaid svg rect.task{fill:#3a383d !important;stroke:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg rect.done{fill:#29282c !important;stroke:#454148 !important}
|
||||
html.theme-dark .mermaid svg rect.active{fill:#454148 !important;stroke:#d6b46a !important}
|
||||
html.theme-dark .mermaid svg rect.crit,html.theme-dark .mermaid svg rect.activeCrit,html.theme-dark .mermaid svg rect.doneCrit{fill:#29282c !important;stroke:#c15c46 !important}
|
||||
html.theme-dark .mermaid svg path.milestone{fill:#d6b46a !important;stroke:#d6b46a !important}
|
||||
html.theme-dark .mermaid svg rect.section,html.theme-dark .mermaid svg rect.section0,html.theme-dark .mermaid svg rect.section1{fill:rgba(28,27,31,0.35) !important;stroke:#3a383d !important}
|
||||
html.theme-light .mermaid svg .grid .tick line{stroke:#c9c1ad !important}
|
||||
html.theme-light .mermaid svg .grid path{stroke:#c9c1ad !important}
|
||||
html.theme-light .mermaid svg .today{stroke:#96392a !important;stroke-width:2px !important}
|
||||
html.theme-light .mermaid svg rect.task{fill:#c9c1ad !important;stroke:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg rect.done{fill:#dcd5c3 !important;stroke:#c9c1ad !important}
|
||||
html.theme-light .mermaid svg rect.active{fill:#c9c1ad !important;stroke:#8a6a24 !important}
|
||||
html.theme-light .mermaid svg rect.crit,html.theme-light .mermaid svg rect.activeCrit,html.theme-light .mermaid svg rect.doneCrit{fill:#dcd5c3 !important;stroke:#96392a !important}
|
||||
html.theme-light .mermaid svg path.milestone{fill:#5c6631 !important;stroke:#5c6631 !important}
|
||||
html.theme-light .mermaid svg rect.section,html.theme-light .mermaid svg rect.section0,html.theme-light .mermaid svg rect.section1{fill:rgba(220,213,195,0.4) !important;stroke:#c9c1ad !important}
|
||||
/* pie: 8-Farben-Zyklus statt Default-Palette */
|
||||
html.theme-dark .mermaid svg .pieOuterCircle{stroke:#3a383d !important;fill:none !important}
|
||||
html.theme-dark .mermaid svg path.slice:nth-of-type(8n+1){fill:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg path.slice:nth-of-type(8n+2){fill:#d6b46a !important}
|
||||
html.theme-dark .mermaid svg path.slice:nth-of-type(8n+3){fill:#c15c46 !important}
|
||||
html.theme-dark .mermaid svg path.slice:nth-of-type(8n+4){fill:#8f9a5c !important}
|
||||
html.theme-dark .mermaid svg path.slice:nth-of-type(8n+5){fill:#b47e99 !important}
|
||||
html.theme-dark .mermaid svg path.slice:nth-of-type(8n+6){fill:#e0914f !important}
|
||||
html.theme-dark .mermaid svg path.slice:nth-of-type(8n+7){fill:#8f9a5c !important}
|
||||
html.theme-dark .mermaid svg path.slice:nth-of-type(8n){fill:#999187 !important}
|
||||
html.theme-dark .mermaid svg path.slice{stroke:#1c1b1f !important}
|
||||
html.theme-light .mermaid svg .pieOuterCircle{stroke:#c9c1ad !important;fill:none !important}
|
||||
html.theme-light .mermaid svg path.slice:nth-of-type(8n+1){fill:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg path.slice:nth-of-type(8n+2){fill:#5c6631 !important}
|
||||
html.theme-light .mermaid svg path.slice:nth-of-type(8n+3){fill:#96392a !important}
|
||||
html.theme-light .mermaid svg path.slice:nth-of-type(8n+4){fill:#5c6631 !important}
|
||||
html.theme-light .mermaid svg path.slice:nth-of-type(8n+5){fill:#7c4a66 !important}
|
||||
html.theme-light .mermaid svg path.slice:nth-of-type(8n+6){fill:#a85f1d !important}
|
||||
html.theme-light .mermaid svg path.slice:nth-of-type(8n+7){fill:#6a7539 !important}
|
||||
html.theme-light .mermaid svg path.slice:nth-of-type(8n){fill:#6f685c !important}
|
||||
html.theme-light .mermaid svg path.slice{stroke:#e9e3d5 !important}
|
||||
/* quadrant (nutzt chartBuilder-Achsen wie xychart -> bereits gedeckt) */
|
||||
html.theme-dark .mermaid svg .quadrants rect:nth-of-type(4n+1){fill:rgba(124,154,161,0.20) !important}
|
||||
html.theme-dark .mermaid svg .quadrants rect:nth-of-type(4n+2){fill:rgba(214,180,106,0.15) !important}
|
||||
html.theme-dark .mermaid svg .quadrants rect:nth-of-type(4n+3){fill:rgba(180,126,153,0.15) !important}
|
||||
html.theme-dark .mermaid svg .quadrants rect:nth-of-type(4n){fill:rgba(143,154,92,0.18) !important}
|
||||
html.theme-dark .mermaid svg .quadrants rect{stroke:#3a383d !important}
|
||||
html.theme-dark .mermaid svg .data-point circle{fill:#e0914f !important;stroke:#1c1b1f !important}
|
||||
html.theme-light .mermaid svg .quadrants rect:nth-of-type(4n+1){fill:rgba(61,107,114,0.12) !important}
|
||||
html.theme-light .mermaid svg .quadrants rect:nth-of-type(4n+2){fill:rgba(92,102,49,0.12) !important}
|
||||
html.theme-light .mermaid svg .quadrants rect:nth-of-type(4n+3){fill:rgba(124,74,102,0.12) !important}
|
||||
html.theme-light .mermaid svg .quadrants rect:nth-of-type(4n){fill:rgba(92,102,49,0.12) !important}
|
||||
html.theme-light .mermaid svg .quadrants rect{stroke:#c9c1ad !important}
|
||||
html.theme-light .mermaid svg .data-point circle{fill:#a85f1d !important;stroke:#e9e3d5 !important}
|
||||
/* class / state / er (flow-Familie erbt .node-Regeln; hier die Ergaenzungen) */
|
||||
html.theme-dark .mermaid svg path.divider{stroke:#999187 !important}
|
||||
html.theme-dark .mermaid svg .stateGroup path,html.theme-dark .mermaid svg .stateGroup rect{fill:#29282c !important;stroke:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg .transition path,html.theme-dark .mermaid svg path.transition{fill:none !important;stroke:#999187 !important}
|
||||
html.theme-dark .mermaid svg .relationshipLine,html.theme-dark .mermaid svg .edgePath path{fill:none !important;stroke:#999187 !important}
|
||||
html.theme-light .mermaid svg path.divider{stroke:#6f685c !important}
|
||||
html.theme-light .mermaid svg .stateGroup path,html.theme-light .mermaid svg .stateGroup rect{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg .transition path,html.theme-light .mermaid svg path.transition{fill:none !important;stroke:#6f685c !important}
|
||||
html.theme-light .mermaid svg .relationshipLine,html.theme-light .mermaid svg .edgePath path{fill:none !important;stroke:#6f685c !important}
|
||||
/* gitGraph */
|
||||
html.theme-dark .mermaid svg circle.commit{fill:#d6b46a !important;stroke:#1c1b1f !important}
|
||||
html.theme-dark .mermaid svg path.branch,html.theme-dark .mermaid svg path.arrow{stroke:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg .tag-hole{fill:#1c1b1f !important}
|
||||
html.theme-light .mermaid svg circle.commit{fill:#5c6631 !important;stroke:#e9e3d5 !important}
|
||||
html.theme-light .mermaid svg path.branch,html.theme-light .mermaid svg path.arrow{stroke:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg .tag-hole{fill:#e9e3d5 !important}
|
||||
/* timeline */
|
||||
html.theme-dark .mermaid svg [class*="eventWrapper"] rect,html.theme-dark .mermaid svg [class*="eventWrapper"] path{fill:#29282c !important;stroke:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg [class*="lineWrapper"] path,html.theme-dark .mermaid svg [class*="lineWrapper"] line{stroke:#999187 !important}
|
||||
html.theme-light .mermaid svg [class*="eventWrapper"] rect,html.theme-light .mermaid svg [class*="eventWrapper"] path{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg [class*="lineWrapper"] path,html.theme-light .mermaid svg [class*="lineWrapper"] line{stroke:#6f685c !important}
|
||||
/* mindmap (11.x-Renderer) */
|
||||
html.theme-dark .mermaid svg [class*="node-bkg"]{fill:#29282c !important;stroke:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg [class^="node-line-"]{fill:none !important;stroke:#999187 !important}
|
||||
html.theme-light .mermaid svg [class*="node-bkg"]{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg [class^="node-line-"]{fill:none !important;stroke:#6f685c !important}
|
||||
/* packet */
|
||||
html.theme-dark .mermaid svg .packetBlock rect,html.theme-dark .mermaid svg rect.packetBlock{fill:#29282c !important;stroke:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg .packetByte{stroke:#3a383d !important}
|
||||
html.theme-light .mermaid svg .packetBlock rect,html.theme-light .mermaid svg rect.packetBlock{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg .packetByte{stroke:#c9c1ad !important}
|
||||
/* architecture */
|
||||
html.theme-dark .mermaid svg .architecture-groups rect{fill:rgba(28,27,31,0.35) !important;stroke:#454148 !important}
|
||||
html.theme-dark .mermaid svg .architecture-services rect,html.theme-dark .mermaid svg .architecture-services path{fill:#29282c !important;stroke:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg .architecture-edges path{stroke:#999187 !important;fill:none !important}
|
||||
html.theme-light .mermaid svg .architecture-groups rect{fill:rgba(220,213,195,0.4) !important;stroke:#c9c1ad !important}
|
||||
html.theme-light .mermaid svg .architecture-services rect,html.theme-light .mermaid svg .architecture-services path{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg .architecture-edges path{stroke:#6f685c !important;fill:none !important}
|
||||
/* sankey: siehe Dateiende (sankey v2) */
|
||||
/* block */
|
||||
html.theme-dark .mermaid svg g.block rect,html.theme-dark .mermaid svg g.block path{fill:#29282c !important;stroke:#7c9aa1 !important}
|
||||
html.theme-light .mermaid svg g.block rect,html.theme-light .mermaid svg g.block path{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
|
||||
|
||||
/* ---------- sankey: node-colors kommen jetzt per init-directive aus dem diagramm
|
||||
(conf.nodeColors, gemappt auf node-ids); gradiente folgen automatisch.
|
||||
CSS haelt nur noch blend-mode + trennstroke. ---------- */
|
||||
html.theme-dark .mermaid svg .links g.link{mix-blend-mode:normal !important}
|
||||
html.theme-dark .mermaid svg .nodes g.node rect{stroke:#1c1b1f !important}
|
||||
html.theme-light .mermaid svg .links g.link{mix-blend-mode:normal !important}
|
||||
html.theme-light .mermaid svg .nodes g.node rect{stroke:#e9e3d5 !important}
|
||||
/* ---------- kanban ---------- */
|
||||
html.theme-dark .mermaid svg .sections rect,html.theme-dark .mermaid svg [class*="section"] rect{fill:rgba(28,27,31,0.35) !important;stroke:#3a383d !important}
|
||||
html.theme-dark .mermaid svg .items rect,html.theme-dark .mermaid svg [class*="item"] rect{fill:#29282c !important;stroke:#7c9aa1 !important}
|
||||
html.theme-light .mermaid svg .sections rect,html.theme-light .mermaid svg [class*="section"] rect{fill:rgba(220,213,195,0.4) !important;stroke:#c9c1ad !important}
|
||||
html.theme-light .mermaid svg .items rect,html.theme-light .mermaid svg [class*="item"] rect{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
|
||||
/* ---------- venn ---------- */
|
||||
html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n+1),html.theme-dark .mermaid svg path.venn:nth-of-type(6n+1){fill:#7c9aa1 !important;stroke:#7c9aa1 !important}
|
||||
html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n+2),html.theme-dark .mermaid svg path.venn:nth-of-type(6n+2){fill:#d6b46a !important;stroke:#d6b46a !important}
|
||||
html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n+3),html.theme-dark .mermaid svg path.venn:nth-of-type(6n+3){fill:#b47e99 !important;stroke:#b47e99 !important}
|
||||
html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n+4),html.theme-dark .mermaid svg path.venn:nth-of-type(6n+4){fill:#8f9a5c !important;stroke:#8f9a5c !important}
|
||||
html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n+5),html.theme-dark .mermaid svg path.venn:nth-of-type(6n+5){fill:#e0914f !important;stroke:#e0914f !important}
|
||||
html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n),html.theme-dark .mermaid svg path.venn:nth-of-type(6n){fill:#8f9a5c !important;stroke:#8f9a5c !important}
|
||||
html.theme-dark .mermaid svg [class*="venn"] path{fill-opacity:0.45 !important;stroke-width:2px !important}
|
||||
html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n+1),html.theme-light .mermaid svg path.venn:nth-of-type(6n+1){fill:#3d6b72 !important;stroke:#3d6b72 !important}
|
||||
html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n+2),html.theme-light .mermaid svg path.venn:nth-of-type(6n+2){fill:#5c6631 !important;stroke:#5c6631 !important}
|
||||
html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n+3),html.theme-light .mermaid svg path.venn:nth-of-type(6n+3){fill:#7c4a66 !important;stroke:#7c4a66 !important}
|
||||
html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n+4),html.theme-light .mermaid svg path.venn:nth-of-type(6n+4){fill:#5c6631 !important;stroke:#5c6631 !important}
|
||||
html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n+5),html.theme-light .mermaid svg path.venn:nth-of-type(6n+5){fill:#a85f1d !important;stroke:#a85f1d !important}
|
||||
html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n),html.theme-light .mermaid svg path.venn:nth-of-type(6n){fill:#6a7539 !important;stroke:#6a7539 !important}
|
||||
html.theme-light .mermaid svg [class*="venn"] path{fill-opacity:0.35 !important;stroke-width:2px !important}
|
||||
|
||||
/* ---------- sankey: bars & link-gradiente beziehen ihre farben beide aus conf.nodeColors (init-directive), koennen nicht mehr auseinanderlaufen; flowchart .node-rect-regel ist per :not(:has(> g.nodes)) raus. */
|
||||
Reference in new issue
Block a user