diff --git a/docs/ui/supplemental/css/arcadedb.css b/docs/ui/supplemental/css/arcadedb.css index 9b42f3bb6..861fe3f05 100644 --- a/docs/ui/supplemental/css/arcadedb.css +++ b/docs/ui/supplemental/css/arcadedb.css @@ -10,23 +10,167 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { - --color-primary: #0066CC; - --color-primary-dark: #004C99; - --color-text-primary: #1A1D23; - --color-text-secondary: #4A5568; + --color-bg: #FFFFFF; --color-bg-secondary: #F5F6F7; --color-bg-accent: #F0F4F8; + --color-card: #FFFFFF; + --color-surface: #FAFBFC; --color-border: #E2E8F0; --color-border-light: #EDF2F7; + --color-border-strong: #718096; + --color-text-primary: #1A1D23; + --color-text-secondary: #4A5568; + --color-primary: #0066CC; + --color-primary-dark: #004C99; + --color-on-primary: #FFFFFF; + --color-link: #1565C0; + --color-link-hover: #104D92; + --color-focus: #0066CC; + --color-danger: #D32F2F; --color-code-bg: #1A1D23; --color-code-text: #E4E8EE; + --color-code-comment: #8B95A5; --color-inline-code-bg: #F0F4F8; --color-inline-code-text: #0066CC; + --color-scrollbar: #C1C1C1; + --hero-1: #F0F4F8; + --hero-2: #E2EAF2; + --hero-3: #D9E5F0; + --c-blue: #0066CC; + --c-green: #10B981; + --c-green-text: #047857; + --c-purple: #7C3AED; + --c-amber: #F59E0B; + --c-amber-text: #B45309; + --c-red: #EF4444; + --c-red-text: #B91C1C; + --c-lime: #65A30D; + --c-lime-bright: #84CC16; + --c-teal-text: #0F766E; + --c-fuchsia-text: #A21CAF; + --c-indigo-text: #1D4ED8; + --c-pink-text: #BE185D; + --c-gray-text: #4B5563; + --c-blue-soft: #93C5FD; + --c-purple-soft: #C4B5FD; + --c-green-soft: #6EE7B7; + --c-amber-soft: #FCD34D; + --c-red-soft: #FCA5A5; + --c-blue-bg: #F7FAFE; + --c-amber-bg: #FFFBEB; + color-scheme: light; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-code: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; } +/* Dark theme: the reader's system setting unless the toggle chose light. */ +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --color-bg: #0F1217; + --color-bg-secondary: #151920; + --color-bg-accent: #1C222C; + --color-card: #1A1F27; + --color-surface: #1D232C; + --color-border: #2C3440; + --color-border-light: #232A34; + --color-border-strong: #6B7788; + --color-text-primary: #E8ECF2; + --color-text-secondary: #AEB8C6; + --color-primary: #5AAEFF; + --color-primary-dark: #8CC8FF; + --color-on-primary: #0A1220; + --color-link: #6DB3FF; + --color-link-hover: #9CCBFF; + --color-focus: #8CC8FF; + --color-danger: #FF8A80; + --color-code-bg: #0B0D11; + --color-code-text: #E4E8EE; + --color-code-comment: #8B95A5; + --color-inline-code-bg: #232A36; + --color-inline-code-text: #8CC8FF; + --color-scrollbar: #4B5563; + --hero-1: #1A212C; + --hero-2: #18202B; + --hero-3: #161D27; + --c-blue: #5AAEFF; + --c-green: #34D399; + --c-green-text: #34D399; + --c-purple: #B79CFF; + --c-amber: #FBBF24; + --c-amber-text: #FBBF24; + --c-red: #F87171; + --c-red-text: #FCA5A5; + --c-lime: #A3E635; + --c-lime-bright: #A3E635; + --c-teal-text: #5EEAD4; + --c-fuchsia-text: #F0ABFC; + --c-indigo-text: #93B4FF; + --c-pink-text: #F9A8D4; + --c-gray-text: #C0C7D2; + --c-blue-soft: #3B6EA8; + --c-purple-soft: #6B58A8; + --c-green-soft: #2F8F6B; + --c-amber-soft: #9A7A1E; + --c-red-soft: #A04646; + --c-blue-bg: #18212F; + --c-amber-bg: #2A2415; + color-scheme: dark; + } +} +/* Dark theme chosen with the toggle. */ +:root[data-theme="dark"] { + --color-bg: #0F1217; + --color-bg-secondary: #151920; + --color-bg-accent: #1C222C; + --color-card: #1A1F27; + --color-surface: #1D232C; + --color-border: #2C3440; + --color-border-light: #232A34; + --color-border-strong: #6B7788; + --color-text-primary: #E8ECF2; + --color-text-secondary: #AEB8C6; + --color-primary: #5AAEFF; + --color-primary-dark: #8CC8FF; + --color-on-primary: #0A1220; + --color-link: #6DB3FF; + --color-link-hover: #9CCBFF; + --color-focus: #8CC8FF; + --color-danger: #FF8A80; + --color-code-bg: #0B0D11; + --color-code-text: #E4E8EE; + --color-code-comment: #8B95A5; + --color-inline-code-bg: #232A36; + --color-inline-code-text: #8CC8FF; + --color-scrollbar: #4B5563; + --hero-1: #1A212C; + --hero-2: #18202B; + --hero-3: #161D27; + --c-blue: #5AAEFF; + --c-green: #34D399; + --c-green-text: #34D399; + --c-purple: #B79CFF; + --c-amber: #FBBF24; + --c-amber-text: #FBBF24; + --c-red: #F87171; + --c-red-text: #FCA5A5; + --c-lime: #A3E635; + --c-lime-bright: #A3E635; + --c-teal-text: #5EEAD4; + --c-fuchsia-text: #F0ABFC; + --c-indigo-text: #93B4FF; + --c-pink-text: #F9A8D4; + --c-gray-text: #C0C7D2; + --c-blue-soft: #3B6EA8; + --c-purple-soft: #6B58A8; + --c-green-soft: #2F8F6B; + --c-amber-soft: #9A7A1E; + --c-red-soft: #A04646; + --c-blue-bg: #18212F; + --c-amber-bg: #2A2415; + color-scheme: dark; +} + /* Typography */ body, .doc { font-family: var(--font-body) !important; @@ -59,7 +203,7 @@ a:hover, a:focus { } /* Antora chrome — header/toolbar */ -.navbar { background: #fff; border-bottom: 1px solid var(--color-border); } +.navbar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .navbar-brand .navbar-item { color: var(--color-text-primary); font-family: var(--font-heading); font-weight: 700; padding: 0 1rem; } .navbar-brand-link { display: flex; align-items: center; } .navbar-logo { height: 32px; max-height: 32px; width: auto; } @@ -68,7 +212,7 @@ a:hover, a:focus { .navbar-end .button.is-primary { background: var(--color-primary); border-color: var(--color-primary); - color: #fff; + color: var(--color-on-primary); font-family: var(--font-body); font-weight: 600; padding: 0 1.1em; @@ -79,9 +223,9 @@ a:hover, a:focus { .navbar-end .button.is-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); - color: #fff; + color: var(--color-on-primary); } -.toolbar { background: #fff; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); } +.toolbar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); } .toolbar a, .crumbs a { color: var(--color-text-secondary); } .toolbar a:hover, .crumbs a:hover { color: var(--color-primary); } @@ -143,7 +287,7 @@ a:hover, a:focus { --pagefind-ui-scale: 0.85; --pagefind-ui-primary: var(--color-primary); --pagefind-ui-text: var(--color-text-primary); - --pagefind-ui-background: #ffffff; + --pagefind-ui-background: var(--color-card); --pagefind-ui-border: var(--color-border); --pagefind-ui-tag: var(--color-bg-secondary); --pagefind-ui-border-width: 1px; @@ -174,7 +318,7 @@ a:hover, a:focus { font-family: var(--font-body); } .pagefind-ui__search-input:focus { - background: #ffffff; + background: var(--color-card); border-color: var(--color-primary); } /* The clear ("✕") button sits inside the shorter input. */ @@ -186,7 +330,7 @@ a:hover, a:focus { .pagefind-ui__drawer { position: absolute; z-index: 40; - background: #ffffff; + background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(26, 29, 35, 0.12); @@ -196,8 +340,10 @@ a:hover, a:focus { min-width: 360px; } -/* Antora right TOC ("On this page") */ -aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid var(--color-border-light); } +/* Antora right TOC ("On this page"). One rule line, on the menu, with room before the links: + the aside and the menu both drew it, and the links started 1px from it. */ +aside.toc.sidebar { background: transparent; } +.toc-menu { background: transparent; border-left: 1px solid var(--color-border-light); padding-left: 0.75rem; } .toc-menu .title, aside.toc .title { font-family: var(--font-heading); color: var(--color-text-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75em; } .toc-menu a { color: var(--color-text-secondary); } .toc-menu a:hover, .toc-menu li.is-active > a { color: var(--color-primary); } @@ -253,14 +399,14 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v /* highlight.js dark theme — palette matches the legacy docinfo.html. */ .doc .hljs { background: transparent !important; color: var(--color-code-text); } -.doc .hljs-comment, .doc .hljs-quote { color: #6B7280; font-style: italic; } +.doc .hljs-comment, .doc .hljs-quote { color: var(--color-code-comment); font-style: italic; } .doc .hljs-keyword, .doc .hljs-selector-tag, .doc .hljs-literal, .doc .hljs-section, .doc .hljs-doctag, .doc .hljs-meta { color: #7DD3FC; font-weight: 600; } .doc .hljs-type, .doc .hljs-class .hljs-title, .doc .hljs-title.class_, .doc .hljs-built_in { color: #93C5FD; } .doc .hljs-string, .doc .hljs-regexp, .doc .hljs-attr, .doc .hljs-template-tag { color: #6EE7B7; } /* f-string / template substitutions — must NOT blend with the string color - that surrounds them (#6EE7B7), so use the default code text colour. */ + that surrounds them (var(--c-green-soft)), so use the default code text colour. */ .doc .hljs-subst, .doc .hljs-template-variable { color: var(--color-code-text); } .doc .hljs-number, .doc .hljs-symbol, .doc .hljs-bullet { color: #5EEAD4; } .doc .hljs-name, .doc .hljs-tag { color: #7DD3FC; } @@ -279,36 +425,49 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v border-radius: 8px; border-collapse: separate; border-spacing: 0; - overflow: hidden; - width: 100%; + /* As wide as the content needs, up to the content column; wider content scrolls sideways + (the GitHub markdown pattern) instead of running under the "On this page" sidebar. */ + display: block; + width: max-content; max-width: 100%; + overflow-x: auto; } -/* Allow long identifiers and inline code to wrap inside table cells. - Without this, names like `arcadedb.ha.stopServerOnReplicationFailure` - force a column wider than the content area and the table overflows - under the right-side "On this page" sidebar. */ +/* Text wraps at spaces and splits a word only when it cannot fit on its own line; no automatic + hyphenation (it split words such as "Pack-age"). Long inline code, such as + `arcadedb.ha.stopServerOnReplicationFailure`, may still wrap anywhere. */ .doc table.tableblock td, .doc table.tableblock th { - word-break: break-word; - overflow-wrap: anywhere; + word-break: normal; + overflow-wrap: break-word; + hyphens: manual; } .doc table.tableblock td code, .doc table.tableblock th code { white-space: normal; - word-break: break-all; + word-break: normal; overflow-wrap: anywhere; } +/* On a phone or a small tablet a multi-column table scrolls sideways instead of squeezing + every column to a few characters. */ +@media (max-width: 768px) { + .doc table.tableblock td, + .doc table.tableblock th { min-width: 7.5rem; } + /* The last column usually holds the prose (description, notes): give it a reading width, so a phone + scrolls the table sideways instead of folding the text into a column a few words wide. */ + .doc table.tableblock td:last-child, + .doc table.tableblock th:last-child { min-width: 14rem; } +} .doc table.tableblock thead tr th { background: var(--color-bg-secondary); color: var(--color-text-primary); font-weight: 600; font-family: var(--font-body); - padding: 12px 16px; + padding: 12px; border-bottom: 1px solid var(--color-border); } .doc table.tableblock tbody tr td, .doc table.tableblock tbody tr th { - padding: 12px 16px; + padding: 12px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); } @@ -328,18 +487,18 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v } .doc .admonitionblock.note > table td.content { border-left-color: var(--color-primary); background: rgba(0, 102, 204, 0.05); } .doc .admonitionblock td.icon .icon-note::before { color: var(--color-primary) !important; } -.doc .admonitionblock.tip > table td.content { border-left-color: #10B981; background: rgba(16, 185, 129, 0.05); } -.doc .admonitionblock td.icon .icon-tip::before { color: #10B981 !important; } -.doc .admonitionblock.warning > table td.content { border-left-color: #F59E0B; background: rgba(245, 158, 11, 0.05); } -.doc .admonitionblock td.icon .icon-warning::before { color: #F59E0B !important; } +.doc .admonitionblock.tip > table td.content { border-left-color: var(--c-green); background: rgba(16, 185, 129, 0.05); } +.doc .admonitionblock td.icon .icon-tip::before { color: var(--c-green) !important; } +.doc .admonitionblock.warning > table td.content { border-left-color: var(--c-amber); background: rgba(245, 158, 11, 0.05); } +.doc .admonitionblock td.icon .icon-warning::before { color: var(--c-amber) !important; } .doc .admonitionblock.caution > table td.content, -.doc .admonitionblock.important > table td.content { border-left-color: #EF4444; background: rgba(239, 68, 68, 0.05); } +.doc .admonitionblock.important > table td.content { border-left-color: var(--c-red); background: rgba(239, 68, 68, 0.05); } .doc .admonitionblock td.icon .icon-caution::before, -.doc .admonitionblock td.icon .icon-important::before { color: #EF4444 !important; } +.doc .admonitionblock td.icon .icon-important::before { color: var(--c-red) !important; } /* Sidebar / example / quote blocks */ .doc .sidebarblock { background: var(--color-bg-secondary) !important; border-color: var(--color-border) !important; border-radius: 8px; } -.doc .exampleblock > .content { border-color: var(--color-border); background: #fff; border-radius: 8px; } +.doc .exampleblock > .content { border-color: var(--color-border); background: var(--color-card); border-radius: 8px; } .doc .quoteblock { border-left-color: var(--color-primary); } /* Landing page (home) */ @@ -354,7 +513,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v } .landing-card { display: block; - background: #fff; + background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px; padding: 28px 20px; @@ -390,7 +549,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v flex-direction: column; align-items: center; gap: 8px; - background: #fff; + background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px; padding: 20px 14px; @@ -413,7 +572,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v /get-started.html. Tinted background card with a primary CTA on the left and a secondary on the right. Inspired by neo4j.com/docs. */ .docs-hero { - background: linear-gradient(135deg, #F0F4F8 0%, #E2EAF2 60%, #D9E5F0 100%); + background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 60%, var(--hero-3) 100%); border: 1px solid var(--color-border-light); border-radius: 12px; padding: 48px 40px; @@ -451,7 +610,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v } .docs-hero-button { background: var(--color-primary); - color: #fff !important; + color: var(--color-on-primary) !important; border: 1px solid var(--color-primary); } .docs-hero-button:hover { @@ -526,109 +685,109 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v } .haw-app-link { cursor: pointer; } -.haw-app-window rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease; } +.haw-app-window rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease; } .haw-app-link:hover .haw-app-window > rect:first-of-type { stroke: var(--color-primary); stroke-width: 2; } .haw-app-link:hover .haw-section-label { fill: var(--color-primary); } .haw-app-stack { font-size: 12px; fill: var(--color-text-secondary); font-weight: 500; } .haw-app-caption { font-size: 11px; fill: var(--color-text-secondary); letter-spacing: 0.04em; } .haw-lang { cursor: pointer; } -.haw-lang rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease, fill 0.15s ease; } +.haw-lang rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease, fill 0.15s ease; } .haw-lang text { font-size: 14px; font-weight: 600; } -.haw-lang:hover rect { stroke-width: 2; fill: #FAFBFC; } -.haw-lang-sql text { fill: #0066CC; } .haw-lang-sql:hover rect { stroke: #0066CC; } -.haw-lang-cypher text { fill: #10B981; } .haw-lang-cypher:hover rect { stroke: #10B981; } -.haw-lang-gremlin text { fill: #7C3AED; } .haw-lang-gremlin:hover rect { stroke: #7C3AED; } -.haw-lang-graphql text { fill: #F59E0B; } .haw-lang-graphql:hover rect { stroke: #F59E0B; } -.haw-lang-mongo text { fill: #84CC16; } .haw-lang-mongo:hover rect { stroke: #84CC16; } -.haw-lang-java text { fill: #1A1D23; } .haw-lang-java:hover rect { stroke: #1A1D23; } +.haw-lang:hover rect { stroke-width: 2; fill: var(--color-surface); } +.haw-lang-sql text { fill: var(--c-blue); } .haw-lang-sql:hover rect { stroke: var(--c-blue); } +.haw-lang-cypher text { fill: var(--c-green); } .haw-lang-cypher:hover rect { stroke: var(--c-green); } +.haw-lang-gremlin text { fill: var(--c-purple); } .haw-lang-gremlin:hover rect { stroke: var(--c-purple); } +.haw-lang-graphql text { fill: var(--c-amber); } .haw-lang-graphql:hover rect { stroke: var(--c-amber); } +.haw-lang-mongo text { fill: var(--c-lime-bright); } .haw-lang-mongo:hover rect { stroke: var(--c-lime-bright); } +.haw-lang-java text { fill: var(--color-text-primary); } .haw-lang-java:hover rect { stroke: var(--color-text-primary); } -.haw-server-box { fill: #FAFBFC; stroke: var(--color-border); stroke-width: 1.5; } +.haw-server-box { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.5; } .haw-feature { cursor: pointer; } -.haw-feature rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease; } +.haw-feature rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease; } .haw-feature:hover rect { stroke-width: 2; } .haw-feature text { font-size: 14px; font-weight: 600; } .haw-feature .haw-feature-title { font-size: 14px; font-weight: 700; } .haw-feature .haw-feature-sub { font-size: 11px; font-weight: 500; fill: var(--color-text-secondary); } .haw-bullet { fill: none; stroke-width: 2; } -.haw-feature-query rect { stroke: #93C5FD; } -.haw-feature-query .haw-feature-title { fill: #0066CC; } -.haw-feature-query .haw-bullet { stroke: #0066CC; } -.haw-feature-query:hover rect { stroke: #0066CC; } +.haw-feature-query rect { stroke: var(--c-blue-soft); } +.haw-feature-query .haw-feature-title { fill: var(--c-blue); } +.haw-feature-query .haw-bullet { stroke: var(--c-blue); } +.haw-feature-query:hover rect { stroke: var(--c-blue); } -.haw-feature-http rect { stroke: #6EE7B7; } -.haw-feature-http .haw-feature-title { fill: #10B981; } -.haw-feature-http .haw-bullet { stroke: #10B981; } -.haw-feature-http:hover rect { stroke: #10B981; } +.haw-feature-http rect { stroke: var(--c-green-soft); } +.haw-feature-http .haw-feature-title { fill: var(--c-green); } +.haw-feature-http .haw-bullet { stroke: var(--c-green); } +.haw-feature-http:hover rect { stroke: var(--c-green); } -.haw-feature-acid rect { stroke: #C4B5FD; } .haw-feature-acid text { fill: #7C3AED; } .haw-feature-acid:hover rect { stroke: #7C3AED; } -.haw-feature-ha rect { stroke: #6EE7B7; } .haw-feature-ha text { fill: #10B981; } .haw-feature-ha:hover rect { stroke: #10B981; } -.haw-feature-security rect { stroke: #FCD34D; } .haw-feature-security text { fill: #F59E0B; } .haw-feature-security:hover rect { stroke: #F59E0B; } -.haw-feature-indexing rect { stroke: #FCA5A5; } .haw-feature-indexing text { fill: #EF4444; } .haw-feature-indexing:hover rect { stroke: #EF4444; } -.haw-feature-schema rect { stroke: #93C5FD; } .haw-feature-schema text { fill: #0066CC; } .haw-feature-schema:hover rect { stroke: #0066CC; } -.haw-feature-clustering rect { stroke: #6EE7B7; } .haw-feature-clustering text { fill: #10B981; } .haw-feature-clustering:hover rect { stroke: #10B981; } +.haw-feature-acid rect { stroke: var(--c-purple-soft); } .haw-feature-acid text { fill: var(--c-purple); } .haw-feature-acid:hover rect { stroke: var(--c-purple); } +.haw-feature-ha rect { stroke: var(--c-green-soft); } .haw-feature-ha text { fill: var(--c-green); } .haw-feature-ha:hover rect { stroke: var(--c-green); } +.haw-feature-security rect { stroke: var(--c-amber-soft); } .haw-feature-security text { fill: var(--c-amber); } .haw-feature-security:hover rect { stroke: var(--c-amber); } +.haw-feature-indexing rect { stroke: var(--c-red-soft); } .haw-feature-indexing text { fill: var(--c-red); } .haw-feature-indexing:hover rect { stroke: var(--c-red); } +.haw-feature-schema rect { stroke: var(--c-blue-soft); } .haw-feature-schema text { fill: var(--c-blue); } .haw-feature-schema:hover rect { stroke: var(--c-blue); } +.haw-feature-clustering rect { stroke: var(--c-green-soft); } .haw-feature-clustering text { fill: var(--c-green); } .haw-feature-clustering:hover rect { stroke: var(--c-green); } -.haw-feature-storage rect { fill: #F0F4F8; stroke: #93C5FD; stroke-dasharray: 4 4; } -.haw-feature-storage .haw-feature-title { fill: #0066CC; } -.haw-feature-storage:hover rect { stroke: #0066CC; } +.haw-feature-storage rect { fill: var(--color-bg-accent); stroke: var(--c-blue-soft); stroke-dasharray: 4 4; } +.haw-feature-storage .haw-feature-title { fill: var(--c-blue); } +.haw-feature-storage:hover rect { stroke: var(--c-blue); } .haw-model { cursor: pointer; } -.haw-model rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease, fill 0.15s ease; } -.haw-model:hover rect { stroke-width: 2; fill: #FAFBFC; } +.haw-model rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; transition: stroke 0.15s ease, fill 0.15s ease; } +.haw-model:hover rect { stroke-width: 2; fill: var(--color-surface); } .haw-model .haw-model-title { font-size: 18px; font-weight: 700; } .haw-model .haw-model-sub { font-size: 12px; fill: var(--color-text-secondary); } .haw-model .haw-model-icon { font-size: 16px; font-weight: 600; } -.haw-model-graph .haw-model-title { fill: #0066CC; } -.haw-model-graph circle, .haw-model-graph line { stroke: #0066CC; fill: #0066CC; } +.haw-model-graph .haw-model-title { fill: var(--c-blue); } +.haw-model-graph circle, .haw-model-graph line { stroke: var(--c-blue); fill: var(--c-blue); } .haw-model-graph circle[fill="none"] { fill: none; } -.haw-model-graph:hover rect { stroke: #0066CC; } +.haw-model-graph:hover rect { stroke: var(--c-blue); } -.haw-model-document .haw-model-title { fill: #10B981; } -.haw-model-document .haw-model-icon { fill: #10B981; } -.haw-model-document:hover rect { stroke: #10B981; } +.haw-model-document .haw-model-title { fill: var(--c-green); } +.haw-model-document .haw-model-icon { fill: var(--c-green); } +.haw-model-document:hover rect { stroke: var(--c-green); } -.haw-model-kv .haw-model-title { fill: #7C3AED; } -.haw-model-kv .haw-model-icon { fill: #7C3AED; } -.haw-model-kv:hover rect { stroke: #7C3AED; } +.haw-model-kv .haw-model-title { fill: var(--c-purple); } +.haw-model-kv .haw-model-icon { fill: var(--c-purple); } +.haw-model-kv:hover rect { stroke: var(--c-purple); } -.haw-model-fts .haw-model-title { fill: #F59E0B; } -.haw-model-fts circle, .haw-model-fts line { stroke: #F59E0B; } -.haw-model-fts:hover rect { stroke: #F59E0B; } +.haw-model-fts .haw-model-title { fill: var(--c-amber); } +.haw-model-fts circle, .haw-model-fts line { stroke: var(--c-amber); } +.haw-model-fts:hover rect { stroke: var(--c-amber); } -.haw-model-vector .haw-model-title { fill: #EF4444; } -.haw-model-vector:hover rect { stroke: #EF4444; } +.haw-model-vector .haw-model-title { fill: var(--c-red); } +.haw-model-vector:hover rect { stroke: var(--c-red); } -.haw-model-ts .haw-model-title { fill: #10B981; } -.haw-model-ts polyline { stroke: #10B981; } -.haw-model-ts:hover rect { stroke: #10B981; } +.haw-model-ts .haw-model-title { fill: var(--c-green); } +.haw-model-ts polyline { stroke: var(--c-green); } +.haw-model-ts:hover rect { stroke: var(--c-green); } /* Connectors and animated dot pulses */ .haw-conn { stroke-width: 2; fill: none; stroke-linecap: round; } -.haw-conn-http { stroke: #0066CC; } -.haw-conn-json { stroke: #10B981; stroke-dasharray: 5 5; } -.haw-conn-pg { stroke: #7C3AED; opacity: 0.6; } -.haw-conn-rm { stroke: #EF4444; opacity: 0.6; } -.haw-conn-graph { stroke: #0066CC; opacity: 0.7; } -.haw-conn-document { stroke: #10B981; opacity: 0.7; } -.haw-conn-kv { stroke: #7C3AED; opacity: 0.7; } -.haw-conn-fts { stroke: #F59E0B; opacity: 0.7; } -.haw-conn-vector { stroke: #EF4444; opacity: 0.7; } -.haw-conn-ts { stroke: #10B981; opacity: 0.7; } - -.haw-dot { stroke: #fff; stroke-width: 1; } -.haw-dot-http { fill: #0066CC; } -.haw-dot-json { fill: #10B981; } -.haw-dot-pg { fill: #7C3AED; } -.haw-dot-rm { fill: #EF4444; } -.haw-dot-graph { fill: #0066CC; } -.haw-dot-document { fill: #10B981; } -.haw-dot-kv { fill: #7C3AED; } -.haw-dot-fts { fill: #F59E0B; } -.haw-dot-vector { fill: #EF4444; } -.haw-dot-ts { fill: #10B981; } +.haw-conn-http { stroke: var(--c-blue); } +.haw-conn-json { stroke: var(--c-green); stroke-dasharray: 5 5; } +.haw-conn-pg { stroke: var(--c-purple); opacity: 0.6; } +.haw-conn-rm { stroke: var(--c-red); opacity: 0.6; } +.haw-conn-graph { stroke: var(--c-blue); opacity: 0.7; } +.haw-conn-document { stroke: var(--c-green); opacity: 0.7; } +.haw-conn-kv { stroke: var(--c-purple); opacity: 0.7; } +.haw-conn-fts { stroke: var(--c-amber); opacity: 0.7; } +.haw-conn-vector { stroke: var(--c-red); opacity: 0.7; } +.haw-conn-ts { stroke: var(--c-green); opacity: 0.7; } + +.haw-dot { stroke: var(--color-card); stroke-width: 1; } +.haw-dot-http { fill: var(--c-blue); } +.haw-dot-json { fill: var(--c-green); } +.haw-dot-pg { fill: var(--c-purple); } +.haw-dot-rm { fill: var(--c-red); } +.haw-dot-graph { fill: var(--c-blue); } +.haw-dot-document { fill: var(--c-green); } +.haw-dot-kv { fill: var(--c-purple); } +.haw-dot-fts { fill: var(--c-amber); } +.haw-dot-vector { fill: var(--c-red); } +.haw-dot-ts { fill: var(--c-green); } .haw-conn-label { font-size: 11px; fill: var(--color-text-secondary); font-weight: 500; } @@ -672,88 +831,88 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v .ppd-caption { font-size: 17px; fill: var(--color-text-secondary); font-style: italic; } .ppd-divider { stroke: var(--color-border-light); stroke-width: 1; stroke-dasharray: 4 6; } -.ppd-app rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; } +.ppd-app rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; } .ppd-app-title { font-size: 22px; font-weight: 700; } .ppd-app-sub { font-size: 16px; fill: var(--color-text-secondary); } -.ppd-db rect { fill: #fff; stroke-width: 1.5; } +.ppd-db rect { fill: var(--color-card); stroke-width: 1.5; } .ppd-db text { font-size: 20px; font-weight: 600; } -.ppd-db-pg rect { stroke: #93C5FD; } -.ppd-db-pg text { fill: #0066CC; } -.ppd-db-mongo rect { stroke: #84CC16; } -.ppd-db-mongo text { fill: #65A30D; } -.ppd-db-neo4j rect { stroke: #C4B5FD; } -.ppd-db-neo4j text { fill: #7C3AED; } +.ppd-db-pg rect { stroke: var(--c-blue-soft); } +.ppd-db-pg text { fill: var(--c-blue); } +.ppd-db-mongo rect { stroke: var(--c-lime-bright); } +.ppd-db-mongo text { fill: var(--c-lime); } +.ppd-db-neo4j rect { stroke: var(--c-purple-soft); } +.ppd-db-neo4j text { fill: var(--c-purple); } .ppd-latency { font-size: 18px; font-weight: 600; fill: var(--color-text-secondary); } /* Sequence-diagram classes for the polyglot panel: actor heads, vertical lifelines below them, and message labels that sit above (request) or below (response) each horizontal arrow. */ -.ppd-actor rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; } +.ppd-actor rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; } .ppd-actor-title { font-size: 21px; font-weight: 700; fill: var(--color-text-primary); } -.ppd-actor-pg rect { stroke: #93C5FD; } .ppd-actor-pg .ppd-actor-title { fill: #0066CC; } -.ppd-actor-mongo rect { stroke: #84CC16; } .ppd-actor-mongo .ppd-actor-title { fill: #65A30D; } -.ppd-actor-neo4j rect { stroke: #C4B5FD; } .ppd-actor-neo4j .ppd-actor-title { fill: #7C3AED; } +.ppd-actor-pg rect { stroke: var(--c-blue-soft); } .ppd-actor-pg .ppd-actor-title { fill: var(--c-blue); } +.ppd-actor-mongo rect { stroke: var(--c-lime-bright); } .ppd-actor-mongo .ppd-actor-title { fill: var(--c-lime); } +.ppd-actor-neo4j rect { stroke: var(--c-purple-soft); } .ppd-actor-neo4j .ppd-actor-title { fill: var(--c-purple); } .ppd-lifeline { stroke: var(--color-text-secondary); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0.4; fill: none; } -.ppd-lifeline-pg { stroke: #93C5FD; opacity: 0.55; } -.ppd-lifeline-mongo { stroke: #84CC16; opacity: 0.55; } -.ppd-lifeline-neo4j { stroke: #C4B5FD; opacity: 0.55; } +.ppd-lifeline-pg { stroke: var(--c-blue-soft); opacity: 0.55; } +.ppd-lifeline-mongo { stroke: var(--c-lime-bright); opacity: 0.55; } +.ppd-lifeline-neo4j { stroke: var(--c-purple-soft); opacity: 0.55; } .ppd-msg-label { font-size: 16px; fill: var(--color-text-secondary); font-style: italic; } .ppd-msg-latency { font-style: normal; font-weight: 700; fill: var(--color-text-primary); } -.ppd-arcade rect { fill: #FAFBFC; stroke: var(--color-border); stroke-width: 1.5; } +.ppd-arcade rect { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.5; } .ppd-arcade-title { font-size: 26px; font-weight: 700; fill: var(--color-primary); } .ppd-arcade-sub { font-size: 16px; fill: var(--color-text-secondary); } /* The big ArcadeDB engine box that holds the internal model boxes and their bouncing-data animation. */ -.ppd-arcade-engine rect:first-of-type { fill: #FAFBFC; stroke: var(--color-border); stroke-width: 1.5; } +.ppd-arcade-engine rect:first-of-type { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.5; } .ppd-engine-label { font-size: 17px; font-weight: 600; fill: var(--color-text-secondary); letter-spacing: 0.02em; } /* Internal model boxes inside the ArcadeDB engine. */ -.ppd-model rect { fill: #fff; stroke-width: 1.5; } +.ppd-model rect { fill: var(--color-card); stroke-width: 1.5; } .ppd-model .ppd-model-title { font-size: 19px; font-weight: 700; } .ppd-model .ppd-model-sub { font-size: 14px; fill: var(--color-text-secondary); font-style: italic; } -.ppd-model-graph rect { stroke: #93C5FD; } .ppd-model-graph .ppd-model-title { fill: #0066CC; } -.ppd-model-document rect { stroke: #6EE7B7; } .ppd-model-document .ppd-model-title { fill: #10B981; } -.ppd-model-vector rect { stroke: #FCA5A5; } .ppd-model-vector .ppd-model-title { fill: #EF4444; } -.ppd-model-kv rect { stroke: #C4B5FD; } .ppd-model-kv .ppd-model-title { fill: #7C3AED; } -.ppd-model-ts rect { stroke: #6EE7B7; } .ppd-model-ts .ppd-model-title { fill: #047857; } -.ppd-model-fts rect { stroke: #FCD34D; } .ppd-model-fts .ppd-model-title { fill: #F59E0B; } +.ppd-model-graph rect { stroke: var(--c-blue-soft); } .ppd-model-graph .ppd-model-title { fill: var(--c-blue); } +.ppd-model-document rect { stroke: var(--c-green-soft); } .ppd-model-document .ppd-model-title { fill: var(--c-green); } +.ppd-model-vector rect { stroke: var(--c-red-soft); } .ppd-model-vector .ppd-model-title { fill: var(--c-red); } +.ppd-model-kv rect { stroke: var(--c-purple-soft); } .ppd-model-kv .ppd-model-title { fill: var(--c-purple); } +.ppd-model-ts rect { stroke: var(--c-green-soft); } .ppd-model-ts .ppd-model-title { fill: var(--c-green-text); } +.ppd-model-fts rect { stroke: var(--c-amber-soft); } .ppd-model-fts .ppd-model-title { fill: var(--c-amber); } /* Internal connectors between model boxes — dashed and faint so the data dots stand out as they hop between models. */ .ppd-conn-int { stroke: var(--color-text-secondary); stroke-width: 1.5; fill: none; opacity: 0.45; stroke-dasharray: 3 3; } /* Per-model dot colours for the internal bounce animation. */ -.ppd-dot-graph { fill: #0066CC; stroke: #fff; stroke-width: 1; } -.ppd-dot-document { fill: #10B981; stroke: #fff; stroke-width: 1; } -.ppd-dot-vector { fill: #EF4444; stroke: #fff; stroke-width: 1; } -.ppd-dot-kv { fill: #7C3AED; stroke: #fff; stroke-width: 1; } -.ppd-dot-ts { fill: #047857; stroke: #fff; stroke-width: 1; } -.ppd-dot-fts { fill: #F59E0B; stroke: #fff; stroke-width: 1; } +.ppd-dot-graph { fill: var(--c-blue); stroke: var(--color-card); stroke-width: 1; } +.ppd-dot-document { fill: var(--c-green); stroke: var(--color-card); stroke-width: 1; } +.ppd-dot-vector { fill: var(--c-red); stroke: var(--color-card); stroke-width: 1; } +.ppd-dot-kv { fill: var(--c-purple); stroke: var(--color-card); stroke-width: 1; } +.ppd-dot-ts { fill: var(--c-green-text); stroke: var(--color-card); stroke-width: 1; } +.ppd-dot-fts { fill: var(--c-amber); stroke: var(--color-card); stroke-width: 1; } .ppd-conn { stroke-width: 2; fill: none; stroke-linecap: round; } .ppd-conn-back { stroke-dasharray: 5 5; opacity: 0.7; } -.ppd-conn-pg { stroke: #0066CC; opacity: 0.55; } -.ppd-conn-mongo { stroke: #65A30D; opacity: 0.55; } -.ppd-conn-neo4j { stroke: #7C3AED; opacity: 0.55; } -.ppd-conn-arcade { stroke: #0066CC; opacity: 0.7; } +.ppd-conn-pg { stroke: var(--c-blue); opacity: 0.55; } +.ppd-conn-mongo { stroke: var(--c-lime); opacity: 0.55; } +.ppd-conn-neo4j { stroke: var(--c-purple); opacity: 0.55; } +.ppd-conn-arcade { stroke: var(--c-blue); opacity: 0.7; } -.ppd-dot { stroke: #fff; stroke-width: 1; } -.ppd-dot-pg { fill: #0066CC; } -.ppd-dot-mongo { fill: #65A30D; } -.ppd-dot-neo4j { fill: #7C3AED; } -.ppd-dot-arcade { fill: #0066CC; } +.ppd-dot { stroke: var(--color-card); stroke-width: 1; } +.ppd-dot-pg { fill: var(--c-blue); } +.ppd-dot-mongo { fill: var(--c-lime); } +.ppd-dot-neo4j { fill: var(--c-purple); } +.ppd-dot-arcade { fill: var(--c-blue); } .ppd-total rect { stroke-width: 1.5; } .ppd-total text { font-size: 19px; font-weight: 700; } -.ppd-total-bad rect { fill: rgba(239, 68, 68, 0.08); stroke: #EF4444; } -.ppd-total-bad text { fill: #B91C1C; } -.ppd-total-good rect { fill: rgba(16, 185, 129, 0.08); stroke: #10B981; } -.ppd-total-good text { fill: #047857; } +.ppd-total-bad rect { fill: rgba(239, 68, 68, 0.08); stroke: var(--c-red); } +.ppd-total-bad text { fill: var(--c-red-text); } +.ppd-total-good rect { fill: rgba(16, 185, 129, 0.08); stroke: var(--c-green); } +.ppd-total-good text { fill: var(--c-green-text); } @media (max-width: 700px) { .ppd-svg { display: none; } @@ -780,15 +939,15 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v position: relative; top: -0.15em; } -.fn-badge-graph { background: rgba(0, 102, 204, 0.10); color: #0066CC; border-color: rgba(0, 102, 204, 0.25); } -.fn-badge-math { background: rgba(124, 58, 237, 0.10); color: #7C3AED; border-color: rgba(124, 58, 237, 0.25); } -.fn-badge-collections { background: rgba(16, 185, 129, 0.12); color: #047857; border-color: rgba(16, 185, 129, 0.30); } -.fn-badge-geo { background: rgba(13, 148, 136, 0.12); color: #0F766E; border-color: rgba(13, 148, 136, 0.30); } -.fn-badge-vector { background: rgba(217, 70, 239, 0.10); color: #A21CAF; border-color: rgba(217, 70, 239, 0.25); } -.fn-badge-text { background: rgba(245, 158, 11, 0.12); color: #B45309; border-color: rgba(245, 158, 11, 0.30); } -.fn-badge-date { background: rgba(59, 130, 246, 0.10); color: #1D4ED8; border-color: rgba(59, 130, 246, 0.25); } -.fn-badge-search { background: rgba(236, 72, 153, 0.10); color: #BE185D; border-color: rgba(236, 72, 153, 0.25); } -.fn-badge-misc { background: rgba(107, 114, 128, 0.12); color: #4B5563; border-color: rgba(107, 114, 128, 0.30); } +.fn-badge-graph { background: rgba(0, 102, 204, 0.10); color: var(--c-blue); border-color: rgba(0, 102, 204, 0.25); } +.fn-badge-math { background: rgba(124, 58, 237, 0.10); color: var(--c-purple); border-color: rgba(124, 58, 237, 0.25); } +.fn-badge-collections { background: rgba(16, 185, 129, 0.12); color: var(--c-green-text); border-color: rgba(16, 185, 129, 0.30); } +.fn-badge-geo { background: rgba(13, 148, 136, 0.12); color: var(--c-teal-text); border-color: rgba(13, 148, 136, 0.30); } +.fn-badge-vector { background: rgba(217, 70, 239, 0.10); color: var(--c-fuchsia-text); border-color: rgba(217, 70, 239, 0.25); } +.fn-badge-text { background: rgba(245, 158, 11, 0.12); color: var(--c-amber-text); border-color: rgba(245, 158, 11, 0.30); } +.fn-badge-date { background: rgba(59, 130, 246, 0.10); color: var(--c-indigo-text); border-color: rgba(59, 130, 246, 0.25); } +.fn-badge-search { background: rgba(236, 72, 153, 0.10); color: var(--c-pink-text); border-color: rgba(236, 72, 153, 0.25); } +.fn-badge-misc { background: rgba(107, 114, 128, 0.12); color: var(--c-gray-text); border-color: rgba(107, 114, 128, 0.30); } /* Bucket-selection-strategy diagram (concepts/basics page). Three stacked panels animating round-robin, thread, and partitioned @@ -812,30 +971,30 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v .bss-section-sub { font-size: 21px; fill: var(--color-text-secondary); font-style: italic; } .bss-divider { stroke: var(--color-border-light); stroke-width: 1; stroke-dasharray: 4 6; } -.bss-producer rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; } +.bss-producer rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; } .bss-producer-title { font-size: 21px; font-weight: 600; fill: var(--color-text-secondary); letter-spacing: 0.04em; } -.bss-record rect { fill: #fff; stroke-width: 1.5; } +.bss-record rect { fill: var(--color-card); stroke-width: 1.5; } .bss-record text { font-size: 20px; font-weight: 600; fill: var(--color-text-primary); } -.bss-bucket rect { fill: #fff; stroke-width: 1.5; } +.bss-bucket rect { fill: var(--color-card); stroke-width: 1.5; } .bss-bucket-title { font-size: 20px; font-weight: 700; } .bss-bucket-sub { font-size: 17px; fill: var(--color-text-secondary); } -.bss-bucket-0 rect { stroke: #93C5FD; } .bss-bucket-0 .bss-bucket-title { fill: #0066CC; } -.bss-bucket-1 rect { stroke: #C4B5FD; } .bss-bucket-1 .bss-bucket-title { fill: #7C3AED; } -.bss-bucket-2 rect { stroke: #6EE7B7; } .bss-bucket-2 .bss-bucket-title { fill: #047857; } +.bss-bucket-0 rect { stroke: var(--c-blue-soft); } .bss-bucket-0 .bss-bucket-title { fill: var(--c-blue); } +.bss-bucket-1 rect { stroke: var(--c-purple-soft); } .bss-bucket-1 .bss-bucket-title { fill: var(--c-purple); } +.bss-bucket-2 rect { stroke: var(--c-green-soft); } .bss-bucket-2 .bss-bucket-title { fill: var(--c-green-text); } .bss-conn { stroke: var(--color-text-secondary); stroke-width: 1.5; fill: none; opacity: 0.35; stroke-dasharray: 4 4; stroke-linecap: round; } -.bss-conn-0 { stroke: #93C5FD; opacity: 0.55; } -.bss-conn-1 { stroke: #C4B5FD; opacity: 0.55; } -.bss-conn-2 { stroke: #6EE7B7; opacity: 0.55; } +.bss-conn-0 { stroke: var(--c-blue-soft); opacity: 0.55; } +.bss-conn-1 { stroke: var(--c-purple-soft); opacity: 0.55; } +.bss-conn-2 { stroke: var(--c-green-soft); opacity: 0.55; } -.bss-dot { stroke: #fff; stroke-width: 1; } -.bss-dot-0 { fill: #0066CC; } -.bss-dot-1 { fill: #7C3AED; } -.bss-dot-2 { fill: #10B981; } +.bss-dot { stroke: var(--color-card); stroke-width: 1; } +.bss-dot-0 { fill: var(--c-blue); } +.bss-dot-1 { fill: var(--c-purple); } +.bss-dot-2 { fill: var(--c-green); } -.bss-hash rect { fill: #FAFBFC; stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 5 4; } +.bss-hash rect { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 5 4; } .bss-hash-title { font-size: 20px; font-weight: 700; fill: var(--color-primary); font-family: var(--font-code); } .bss-thread-label { font-size: 18px; font-weight: 700; fill: var(--color-text-secondary); letter-spacing: 0.05em; } @@ -872,28 +1031,28 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v .rel-field-link { fill: var(--color-primary); font-weight: 700; } .rel-field-note { font-size: 15px; fill: var(--color-text-secondary); font-style: italic; } -.rel-vertex circle, .rel-record rect, .rel-edge rect { fill: #fff; stroke-width: 1.5; } -.rel-vertex-a circle { stroke: #93C5FD; } -.rel-vertex-a .rel-node-title { fill: #0066CC; } -.rel-vertex-b circle { stroke: #6EE7B7; } -.rel-vertex-b .rel-node-title { fill: #047857; } -.rel-edge-x rect { stroke: #FCD34D; fill: #FFFBEB; } -.rel-edge-x .rel-node-title { fill: #B45309; } +.rel-vertex circle, .rel-record rect, .rel-edge rect { fill: var(--color-card); stroke-width: 1.5; } +.rel-vertex-a circle { stroke: var(--c-blue-soft); } +.rel-vertex-a .rel-node-title { fill: var(--c-blue); } +.rel-vertex-b circle { stroke: var(--c-green-soft); } +.rel-vertex-b .rel-node-title { fill: var(--c-green-text); } +.rel-edge-x rect { stroke: var(--c-amber-soft); fill: var(--c-amber-bg); } +.rel-edge-x .rel-node-title { fill: var(--c-amber-text); } -.rel-record-a rect { stroke: #93C5FD; } -.rel-record-a .rel-node-title { fill: #0066CC; } -.rel-record-b rect { stroke: #C4B5FD; } -.rel-record-b .rel-node-title { fill: #7C3AED; } +.rel-record-a rect { stroke: var(--c-blue-soft); } +.rel-record-a .rel-node-title { fill: var(--c-blue); } +.rel-record-b rect { stroke: var(--c-purple-soft); } +.rel-record-b .rel-node-title { fill: var(--c-purple); } -.rel-record-container rect { stroke: #93C5FD; fill: #F7FAFE; } -.rel-record-container .rel-node-title { fill: #0066CC; } -.rel-record-embedded rect { stroke: #6EE7B7; fill: #fff; } -.rel-record-embedded .rel-node-title-sm { fill: #047857; } +.rel-record-container rect { stroke: var(--c-blue-soft); fill: var(--c-blue-bg); } +.rel-record-container .rel-node-title { fill: var(--c-blue); } +.rel-record-embedded rect { stroke: var(--c-green-soft); fill: var(--color-card); } +.rel-record-embedded .rel-node-title-sm { fill: var(--c-green-text); } .rel-conn { stroke: var(--color-text-secondary); stroke-width: 2; fill: none; stroke-linecap: round; } -.rel-conn-ref { stroke: #0066CC; } +.rel-conn-ref { stroke: var(--c-blue); } #rel-arrow-graph .rel-arrowhead { fill: var(--color-text-secondary); } -#rel-arrow-ref .rel-arrowhead { fill: #0066CC; } +#rel-arrow-ref .rel-arrowhead { fill: var(--c-blue); } .rel-edge-label { font-size: 18px; font-weight: 700; fill: var(--color-text-primary); } .rel-edge-sub { font-size: 16px; fill: var(--color-text-secondary); font-family: var(--font-code); } @@ -917,18 +1076,18 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v } .dgm-svg text { fill: var(--color-text-primary); } -.dgm-box rect, .dgm-circle circle { fill: #fff; stroke-width: 1.5; } +.dgm-box rect, .dgm-circle circle { fill: var(--color-card); stroke-width: 1.5; } .dgm-title { font-size: 20px; font-weight: 700; } .dgm-sub { font-size: 17px; fill: var(--color-text-secondary); } -.dgm-box-blue rect, .dgm-circle-blue circle { stroke: #93C5FD; } -.dgm-box-blue .dgm-title, .dgm-circle-blue .dgm-title { fill: #0066CC; } -.dgm-box-purple rect, .dgm-circle-purple circle { stroke: #C4B5FD; } -.dgm-box-purple .dgm-title, .dgm-circle-purple .dgm-title { fill: #7C3AED; } -.dgm-box-green rect, .dgm-circle-green circle { stroke: #6EE7B7; } -.dgm-box-green .dgm-title, .dgm-circle-green .dgm-title { fill: #047857; } -.dgm-box-yellow rect, .dgm-circle-yellow circle { stroke: #FCD34D; fill: #FFFBEB; } -.dgm-box-yellow .dgm-title, .dgm-circle-yellow .dgm-title { fill: #B45309; } +.dgm-box-blue rect, .dgm-circle-blue circle { stroke: var(--c-blue-soft); } +.dgm-box-blue .dgm-title, .dgm-circle-blue .dgm-title { fill: var(--c-blue); } +.dgm-box-purple rect, .dgm-circle-purple circle { stroke: var(--c-purple-soft); } +.dgm-box-purple .dgm-title, .dgm-circle-purple .dgm-title { fill: var(--c-purple); } +.dgm-box-green rect, .dgm-circle-green circle { stroke: var(--c-green-soft); } +.dgm-box-green .dgm-title, .dgm-circle-green .dgm-title { fill: var(--c-green-text); } +.dgm-box-yellow rect, .dgm-circle-yellow circle { stroke: var(--c-amber-soft); fill: var(--c-amber-bg); } +.dgm-box-yellow .dgm-title, .dgm-circle-yellow .dgm-title { fill: var(--c-amber-text); } .dgm-box-gray rect, .dgm-circle-gray circle { stroke: var(--color-border); } .dgm-box-gray .dgm-title, .dgm-circle-gray .dgm-title { fill: var(--color-text-primary); } .dgm-box-dashed rect { stroke-dasharray: 5 4; } @@ -974,7 +1133,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v .tutorial-card { display: flex; flex-direction: column; - background: #fff; + background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px; padding: 20px 18px; @@ -1025,7 +1184,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v display: flex; flex-direction: column; position: relative; - background: #fff; + background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px; padding: 22px 20px 18px; @@ -1087,7 +1246,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v .usecase-card { display: flex; flex-direction: column; - background: #fff; + background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px; padding: 22px 20px; @@ -1151,7 +1310,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v transition: background 0.15s ease, border-color 0.15s ease; } .resource-card:hover { - background: #fff; + background: var(--color-card); border-color: var(--color-primary); } .resource-card h3 { @@ -1178,7 +1337,7 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v .chapter-card { display: block; padding: 14px 16px; - background: #fff; + background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none !important; @@ -1244,43 +1403,189 @@ aside.toc.sidebar, .toc-menu { background: transparent; border-left: 1px solid v .obs-svg text { fill: var(--color-text-primary); } /* Request-path pill */ -.obs-path rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; } +.obs-path rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; } .obs-path-label { font-size: 20px; font-weight: 700; fill: var(--color-text-secondary); font-family: var(--font-code); } /* The single Observation source box (ArcadeDB-branded path) */ -.obs-source rect { fill: #FAFBFC; stroke: var(--color-primary); stroke-width: 1.5; } +.obs-source rect { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.5; } .obs-source-title { font-size: 21px; font-weight: 700; fill: var(--color-primary); } .obs-source-sub { font-size: 17px; fill: var(--color-text-secondary); } /* The three sinks — colour-coded per output */ -.obs-sink rect { fill: #fff; stroke-width: 1.5; } +.obs-sink rect { fill: var(--color-card); stroke-width: 1.5; } .obs-sink-title { font-size: 21px; font-weight: 700; } .obs-sink-sub { font-size: 17px; fill: var(--color-text-secondary); } -.obs-sink-timer rect { stroke: #93C5FD; } .obs-sink-timer .obs-sink-title { fill: #0066CC; } -.obs-sink-span rect { stroke: #C4B5FD; } .obs-sink-span .obs-sink-title { fill: #7C3AED; } -.obs-sink-log rect { stroke: #6EE7B7; } .obs-sink-log .obs-sink-title { fill: #047857; } +.obs-sink-timer rect { stroke: var(--c-blue-soft); } .obs-sink-timer .obs-sink-title { fill: var(--c-blue); } +.obs-sink-span rect { stroke: var(--c-purple-soft); } .obs-sink-span .obs-sink-title { fill: var(--c-purple); } +.obs-sink-log rect { stroke: var(--c-green-soft); } .obs-sink-log .obs-sink-title { fill: var(--c-green-text); } /* Collector and pull/log targets */ -.obs-collector rect { fill: #FAFBFC; stroke: var(--color-text-secondary); stroke-width: 1.5; } +.obs-collector rect { fill: var(--color-surface); stroke: var(--color-text-secondary); stroke-width: 1.5; } .obs-collector-title { font-size: 19px; font-weight: 700; fill: var(--color-text-primary); } .obs-collector-sub { font-size: 16px; fill: var(--color-text-secondary); font-style: italic; } -.obs-target rect { fill: #fff; stroke: var(--color-border); stroke-width: 1.5; } +.obs-target rect { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1.5; } .obs-target-title { font-size: 18px; font-weight: 700; fill: var(--color-text-secondary); } .obs-target-sub { font-size: 15px; fill: var(--color-text-secondary); } /* Connectors and dots */ .obs-conn { stroke: var(--color-text-secondary); stroke-width: 2; fill: none; opacity: 0.45; stroke-linecap: round; } -.obs-conn-timer { stroke: #93C5FD; } -.obs-conn-span { stroke: #C4B5FD; } -.obs-conn-log { stroke: #6EE7B7; } +.obs-conn-timer { stroke: var(--c-blue-soft); } +.obs-conn-span { stroke: var(--c-purple-soft); } +.obs-conn-log { stroke: var(--c-green-soft); } .obs-conn-pull { stroke-dasharray: 4 4; } -.obs-arrowhead-pull { fill: #0066CC; } +.obs-arrowhead-pull { fill: var(--c-blue); } -.obs-dot { stroke: #fff; stroke-width: 1; } -.obs-dot-timer { fill: #0066CC; } -.obs-dot-span { fill: #7C3AED; } -.obs-dot-log { fill: #10B981; } +.obs-dot { stroke: var(--color-card); stroke-width: 1; } +.obs-dot-timer { fill: var(--c-blue); } +.obs-dot-span { fill: var(--c-purple); } +.obs-dot-log { fill: var(--c-green); } @media (max-width: 700px) { .obs-svg { display: none; } } + +/* ============================================================ + Theme and accessibility layer. + The tokens in :root above carry every colour; the dark values live + in the two dark blocks next to them. The rules below point the + default UI's hard-coded colours (site.css) at those tokens, so a + theme change needs no per-component code. The theme toggle + (js/theme-toggle.js) sets data-theme on . + ============================================================ */ +html { background: var(--color-bg); scrollbar-color: var(--color-scrollbar) var(--color-bg-secondary); } +body { background: var(--color-bg); } +body * { scrollbar-color: var(--color-scrollbar) transparent; } +html::-webkit-scrollbar { background-color: var(--color-bg-secondary); } +::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar); } + +/* Navbar and the phone menu */ +.navbar-burger span { background-color: var(--color-text-primary); } +.navbar-menu { background: var(--color-bg); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); } +.navbar-dropdown { background: var(--color-bg); border-color: var(--color-border); } +.navbar-menu .navbar-link:hover, .navbar-menu a.navbar-item:hover, +.navbar-dropdown a.navbar-item:hover { background: var(--color-bg-secondary); } + +/* Left navigation */ +.nav { box-shadow: none; } +.nav-menu h3.title { color: var(--color-text-primary); } +.nav-panel-explore { background: var(--color-surface); } +.nav-panel-explore .context { color: var(--color-text-secondary); box-shadow: 0 -1px 0 var(--color-border); } +.nav-panel-explore .components { background: var(--color-bg-secondary); box-shadow: inset 0 1px 5px var(--color-border); } +.nav-panel-explore .component .version a { background: var(--color-border); color: var(--color-text-primary); opacity: 1; } +.nav-panel-explore .component .is-current a { background: var(--color-primary); color: var(--color-on-primary); } +.toolbar { box-shadow: 0 1px 0 var(--color-border); } +.toolbar .edit-this-page a, .page-versions .version.is-missing { color: var(--color-text-secondary); } + +/* Right-hand "On this page" */ +.toc-menu, .toc .toc-menu h3 { color: var(--color-text-secondary); } +.toc .toc-menu h3 { color: var(--color-text-primary); } +.toc .toc-menu a { border-left-color: var(--color-border); } +.toc .toc-menu a:hover { color: var(--color-primary); } +.toc .toc-menu a.is-active { border-left-color: var(--color-primary); color: var(--color-text-primary); } +.sidebar.toc .toc-menu a:focus { background: var(--color-bg-secondary); } + +/* Page content */ +.doc a { color: var(--color-link); } +.doc a:hover { color: var(--color-link-hover); } +.doc a.unresolved { color: var(--color-danger); } +.doc h1.sect0 { background: var(--color-bg-secondary); } +.doc h2:not(.discrete) { border-bottom-color: var(--color-border); } +.doc hr { border-color: var(--color-border); } +.doc .colist > table code, .doc p code, .doc thead code { color: var(--color-inline-code-text); background: var(--color-inline-code-bg); } +.doc table.tableblock, .doc table.tableblock > * > tr > * { border-color: var(--color-border); } +.doc table.stripes-all > tbody > tr, .doc table.stripes-even > tbody > tr:nth-of-type(2n), +.doc table.stripes-odd > tbody > tr:nth-of-type(odd), .doc table.tableblock > tfoot { background: var(--color-bg-secondary); } +.doc .admonitionblock .title, .doc .exampleblock .title, .doc .imageblock .title, .doc .listingblock .title, +.doc .literalblock .title, .doc .openblock .title, .doc .videoblock .title, .doc .tableblock > caption, +.doc details.result > summary { color: var(--color-text-secondary); } +.doc .quoteblock, .doc .verseblock { background: var(--color-bg-secondary); border-left-color: var(--color-border-strong); color: var(--color-text-secondary); } +.doc .quoteblock .attribution { color: var(--color-text-secondary); } +#preamble .abstract blockquote { background: var(--color-bg-secondary); border-left-color: var(--color-border); color: var(--color-text-secondary); } +.doc details.result > .content { background: var(--color-card); border-color: var(--color-border-strong); } +.doc kbd { background: var(--color-bg-secondary); border-color: var(--color-border-strong); color: var(--color-text-primary); + box-shadow: 0 1px 0 var(--color-border-strong), 0 0 0 0.1em var(--color-card) inset; } +nav.pagination { border-top-color: var(--color-border); } +nav.pagination span::before, nav.pagination a::before, nav.pagination a::after { color: var(--color-text-secondary); } +nav.pagination a { color: var(--color-link); } +nav.pagination a:hover { color: var(--color-link-hover); } +footer.footer { background: none; border-top-color: var(--color-border); color: var(--color-text-secondary); } +.footer a { color: var(--color-text-primary); } + +/* Search: the field and its controls are UI components, so the border is the strong token (3:1). */ +.pagefind-ui__search-input { border-color: var(--color-border-strong); color: var(--color-text-primary); } +.pagefind-ui__search-input::placeholder { color: var(--color-text-secondary); opacity: 1; } + +/* Images with a transparent background (diagrams exported for a white page) stay readable on the dark page. */ +:root[data-theme="dark"] .doc .imageblock img { background: #fff; border-radius: 6px; } +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) .doc .imageblock img { background: #fff; border-radius: 6px; } +} + +/* Icons the default UI draws as dark SVG backgrounds (home, menu, folding) need inverting on the dark page. */ +:root[data-theme="dark"] .home-link, :root[data-theme="dark"] .nav-toggle, :root[data-theme="dark"] .nav-menu-toggle, +:root[data-theme="dark"] .page-versions .version-menu-toggle { filter: invert(1); } +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) .home-link, :root:not([data-theme="light"]) .nav-toggle, + :root:not([data-theme="light"]) .nav-menu-toggle, :root:not([data-theme="light"]) .page-versions .version-menu-toggle { filter: invert(1); } +} + +/* Theme toggle (partials/header-content.hbs, js/theme-toggle.js). It cycles system, light, dark. */ +.theme-toggle { + align-self: center; + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2.25rem; + margin: 0 0.5rem; + padding: 0; + background: transparent; + color: var(--color-text-primary); + border: 1px solid var(--color-border-strong); + border-radius: 6px; + cursor: pointer; + flex: none; +} +.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); } +.theme-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } +.theme-toggle .icon-light, .theme-toggle .icon-dark { display: none; } +.theme-toggle[data-mode="light"] .icon-system, .theme-toggle[data-mode="dark"] .icon-system { display: none; } +.theme-toggle[data-mode="light"] .icon-light, .theme-toggle[data-mode="dark"] .icon-dark { display: block; } + +/* Keyboard focus: one visible ring for everything focusable. The default UI removes the outline on some + controls (outline: none), so this is !important. Mouse clicks do not show it (:focus-visible). */ +a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible, +textarea:focus-visible, [tabindex]:focus-visible { + outline: 2px solid var(--color-focus) !important; + outline-offset: 2px !important; +} + +/* Tap targets of at least 24 by 24 CSS pixels (WCAG 2.2, 2.5.8) on small and touch screens. Links inside + running text are exempt in the standard and are not changed. */ +@media (max-width: 768px), (pointer: coarse) { + .navbar-burger { min-height: 2.75rem; } + .navbar-end .navbar-item, .navbar-menu .navbar-item { min-height: 2.75rem; display: flex; align-items: center; } + .nav-link, .nav-text { display: inline-block; padding-top: 0.15rem; padding-bottom: 0.15rem; min-height: 24px; box-sizing: border-box; } + .nav-item-toggle { width: max(1.35em, 24px); height: max(1.35em, 24px); margin-left: max(-1.35em, -24px); background-size: 60%; } + .nav-tab { min-height: 24px; } + .home-link { width: max(1.25rem, 24px); height: max(1.25rem, 24px); margin: 0.5rem 0.625rem; } + .toc .toc-menu a, .crumbs a, .toolbar a, nav.pagination a { display: inline-block; min-height: 24px; box-sizing: border-box; padding-top: 0.15rem; padding-bottom: 0.15rem; } + .theme-toggle { width: 2.75rem; height: 2.75rem; } +} + +/* On a phone the brand row (logo, search, theme toggle, menu button) must fit the screen: the search field + shrinks instead of pushing the buttons off the right edge. */ +@media (max-width: 768px) { + #search { min-width: 0; } + .navbar-brand .navbar-item.search { flex: 1 1 0; min-width: 0; padding: 0 0.25rem; } + .navbar-brand .navbar-item:first-child { padding-right: 0.5rem; } + .theme-toggle { margin: 0 0.25rem; } +} + +/* Reduced motion: no transitions, no hover lift, no smooth scrolling. The animated dots in the inline SVG + diagrams are SMIL, which CSS cannot stop; js/theme-toggle.js pauses them for these readers. */ +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } + .logo-card:hover, .tutorial-card:hover, .academy-card:hover, .usecase-card:hover { transform: none; } +} diff --git a/docs/ui/supplemental/js/theme-toggle.js b/docs/ui/supplemental/js/theme-toggle.js new file mode 100644 index 000000000..1352b9d2c --- /dev/null +++ b/docs/ui/supplemental/js/theme-toggle.js @@ -0,0 +1,71 @@ +// Theme toggle and reduced-motion handling. +// The toggle cycles system -> light -> dark. "System" removes data-theme from , so the CSS +// follows prefers-color-scheme; "light" and "dark" set it and are remembered in localStorage. +// The saved value is applied before first paint by the inline script in partials/head-styles.hbs +// (same key). localStorage can be blocked (private window, site data off): every access is guarded +// and the toggle then works for the current page only. +;(function () { + 'use strict' + + var KEY = 'arcadedb-docs-theme' + var ORDER = ['system', 'light', 'dark'] + var NAMES = { system: 'follows the system', light: 'light', dark: 'dark' } + var root = document.documentElement + + function current () { + var t = root.getAttribute('data-theme') + return t === 'light' || t === 'dark' ? t : 'system' + } + + function apply (mode, save) { + if (mode === 'system') root.removeAttribute('data-theme') + else root.setAttribute('data-theme', mode) + if (save) { + try { + if (mode === 'system') localStorage.removeItem(KEY) + else localStorage.setItem(KEY, mode) + } catch (e) { /* storage unavailable: the choice lasts for this page only */ } + } + } + + function label (btn, mode) { + var next = ORDER[(ORDER.indexOf(mode) + 1) % ORDER.length] + btn.setAttribute('data-mode', mode) + btn.setAttribute('title', 'Color theme: ' + NAMES[mode]) + btn.setAttribute('aria-label', 'Color theme: ' + NAMES[mode] + '. Activate to switch to ' + NAMES[next] + '.') + } + + function ready (fn) { + if (document.readyState !== 'loading') fn() + else document.addEventListener('DOMContentLoaded', fn) + } + + ready(function () { + var btn = document.querySelector('.theme-toggle') + if (btn) { + label(btn, current()) + btn.addEventListener('click', function () { + var mode = ORDER[(ORDER.indexOf(current()) + 1) % ORDER.length] + apply(mode, true) + label(btn, mode) + }) + } + + // The dots that travel along the lines of the inline SVG diagrams are SMIL animations, which CSS + // cannot switch off. Readers who ask for reduced motion get the still diagram. + var rm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)') + function stillDiagrams () { + var svgs = document.querySelectorAll('svg') + for (var i = 0; i < svgs.length; i++) { + try { + if (rm.matches) svgs[i].pauseAnimations() + else svgs[i].unpauseAnimations() + } catch (e) {} + } + } + if (rm) { + stillDiagrams() + if (rm.addEventListener) rm.addEventListener('change', stillDiagrams) + } + }) +})() diff --git a/docs/ui/supplemental/partials/footer-scripts.hbs b/docs/ui/supplemental/partials/footer-scripts.hbs index 6929091a7..5875ef38d 100644 --- a/docs/ui/supplemental/partials/footer-scripts.hbs +++ b/docs/ui/supplemental/partials/footer-scripts.hbs @@ -1,6 +1,7 @@ + diff --git a/docs/ui/supplemental/partials/header-content.hbs b/docs/ui/supplemental/partials/header-content.hbs index 8af19649d..882f2ab02 100644 --- a/docs/ui/supplemental/partials/header-content.hbs +++ b/docs/ui/supplemental/partials/header-content.hbs @@ -7,6 +7,11 @@ +