/* * spring-ddd theme — recolors the stock Antora default UI to the brand palette. * Loaded after site.css (see partials/head-styles.hbs), so these rules win. * Brand green #6DB33F for bold/large accents; a darker #4a7a2a for body links * (>= 4.5:1 contrast on white). Color/brand only — no layout changes. */ :root { --brand: #6DB33F; --brand-dark: #4a7a2a; --brand-darker: #2f5a18; --ink: #16232F; } /* ---- Body links (was #1565c0) ---- */ .doc a, .doc a code { color: var(--brand-dark); } .doc a:hover { color: var(--brand-darker); } /* ---- Table of contents ---- */ .toc .toc-menu a:hover { color: var(--brand-dark); } .toc .toc-menu a.is-active { border-left-color: var(--brand); color: var(--ink); } /* ---- Left navigation: current page ---- */ .nav-panel-menu .is-current-page > .nav-link, .is-current-page > .nav-text { color: var(--brand-dark); } /* ---- Navbar: light bar, dark text, green bottom accent ---- */ .navbar { background: #fff; color: var(--ink); border-bottom: 3px solid var(--brand); } .navbar-item, .navbar-item a, .navbar-link { color: var(--ink); } .navbar-item a:hover, .navbar-end .navbar-item:hover { color: var(--brand-dark); } /* hamburger bars are white in the stock dark navbar — make them visible on white */ .navbar-burger span { background-color: var(--ink); } /* brand logo sizing in the navbar */ .navbar-brand .navbar-item img, .navbar .brand-logo { height: 30px; width: auto; } /* ---- Primary button (brand-filled) ---- */ .button.is-primary { background: var(--brand); border-color: var(--brand); color: #fff; } .button.is-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); } /* ---- Wider content column ---- The default UI caps .doc at 40rem, and at >=1024px a media query resets it to 46rem — so we must widen it both at the base and inside that breakpoint. ---- */ .doc { max-width: 60rem; } @media screen and (min-width: 1024px) { .doc { max-width: 60rem; } } /* ---- Diagrams fill the content column (responsive, so the SVG text stays as large as possible on small screens). Opt-in via image role=diagram so the logo and any inline images are unaffected. ---- */ .doc .imageblock.diagram img { width: 100%; } /* ---- Right-sidebar links (Edit this page / Project on GitHub) ---- */ .toc.sidebar .sidebar-links { margin-top: 1.25rem; padding-top: 0.85rem; border-top: 1px solid #e1e1e1; display: flex; flex-direction: column; gap: 0.55rem; } .toc.sidebar .sidebar-link { display: inline-flex; align-items: center; gap: 0.5rem; color: #5d5d5d; font-size: 0.8333rem; text-decoration: none; } .toc.sidebar .sidebar-link:hover { color: var(--brand-dark); } .toc.sidebar .sidebar-link-icon { flex: none; color: #8a97a2; } .toc.sidebar .sidebar-link:hover .sidebar-link-icon { color: inherit; } /* The default UI makes only .toc-menu sticky, so anything appended after it (our sidebar links) scrolls away. Make the whole sidebar sticky instead so the TOC and the links stay on screen while scrolling. */ @media screen and (min-width: 1024px) { .toc.sidebar { position: sticky; top: 6rem; align-self: flex-start; max-height: calc(100vh - 7rem); overflow-y: auto; } .toc.sidebar .toc-menu { position: static; top: auto; } } /* ===================================================================== * * Dark mode * Toggled via [data-theme="dark"] on (see head-prelude + the * navbar toggle button). The stock UI is light-only with hardcoded * colours, so we override the main surfaces here. * ===================================================================== */ /* ---- Toggle button + sun/moon icons ---- */ .navbar .theme-toggle { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; color: inherit; } .theme-icon { display: none; } .theme-icon-moon { display: inline-flex; } /* light mode → offer dark */ :root[data-theme="dark"] .theme-icon-moon { display: none; } :root[data-theme="dark"] .theme-icon-sun { display: inline-flex; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { /* render native UI (scrollbars, form controls) dark — fixes Safari painting the left-nav's always-on scrollbar gutter as a bright vertical strip */ color-scheme: dark; --d-bg: #0f1620; --d-surface: #16232f; --d-surface-2: #1d2c3a; --d-text: #c7d0d9; --d-strong: #e8edf2; --d-muted: #93a1ad; --d-border: #2b3a49; /* lighten link green for contrast on dark */ --brand-dark: #8fd35f; --brand-darker: #a9e081; } /* page surfaces */ :root[data-theme="dark"] body, :root[data-theme="dark"] .content { background: var(--d-bg); } :root[data-theme="dark"] body { color: var(--d-text); } :root[data-theme="dark"] .doc { color: var(--d-text); } :root[data-theme="dark"] .doc h1, :root[data-theme="dark"] .doc h2, :root[data-theme="dark"] .doc h3, :root[data-theme="dark"] .doc h4, :root[data-theme="dark"] .doc h5, :root[data-theme="dark"] .doc h6, :root[data-theme="dark"] .doc table.tableblock > caption { color: var(--d-strong); } :root[data-theme="dark"] .doc hr { background: var(--d-border); } /* navbar */ :root[data-theme="dark"] .navbar { background: var(--d-surface); color: var(--d-strong); } :root[data-theme="dark"] .navbar-item, :root[data-theme="dark"] .navbar-item a, :root[data-theme="dark"] .navbar-link { color: var(--d-strong); } :root[data-theme="dark"] .navbar-burger span { background-color: var(--d-strong); } /* toolbar + breadcrumbs */ :root[data-theme="dark"] .toolbar { background: var(--d-surface); color: var(--d-text); box-shadow: inset 0 -1px 0 var(--d-border); } :root[data-theme="dark"] .breadcrumbs a, :root[data-theme="dark"] .toolbar a { color: var(--d-text); } /* left navigation */ :root[data-theme="dark"] .nav, :root[data-theme="dark"] .nav-panel-explore, :root[data-theme="dark"] .nav-panel-explore .components { background: #0c121a; box-shadow: none; } :root[data-theme="dark"] .nav { color: var(--d-text); } :root[data-theme="dark"] .nav-menu h3.title { color: var(--d-strong); } :root[data-theme="dark"] .nav-panel-explore .context { box-shadow: 0 -1px 0 var(--d-border); color: var(--d-muted); } /* right TOC + our sidebar links */ :root[data-theme="dark"] .toc .toc-menu h3 { color: var(--d-strong); } :root[data-theme="dark"] .toc .toc-menu a { color: var(--d-text); border-left-color: var(--d-border); } :root[data-theme="dark"] .toc.sidebar .sidebar-links { border-top-color: var(--d-border); } :root[data-theme="dark"] .toc.sidebar .sidebar-link { color: var(--d-muted); } /* code: blocks + inline */ :root[data-theme="dark"] .doc pre, :root[data-theme="dark"] .doc .listingblock pre, :root[data-theme="dark"] .doc .literalblock pre { background: var(--d-surface); color: var(--d-text); } :root[data-theme="dark"] .doc p code, :root[data-theme="dark"] .doc li code, :root[data-theme="dark"] .doc td code, :root[data-theme="dark"] .doc :not(pre) > code { background: var(--d-surface-2); color: var(--d-strong); } /* tables */ :root[data-theme="dark"] .doc table.tableblock, :root[data-theme="dark"] .doc table.tableblock th, :root[data-theme="dark"] .doc table.tableblock td { border-color: var(--d-border); } :root[data-theme="dark"] .doc table.tableblock thead th { background: var(--d-surface); color: var(--d-strong); } :root[data-theme="dark"] .doc table.tableblock tbody tr:nth-of-type(2n) { background: var(--d-surface); } /* admonitions / sidebars / example blocks */ :root[data-theme="dark"] .doc .admonitionblock > table td.content, :root[data-theme="dark"] .doc .sidebarblock, :root[data-theme="dark"] .doc .exampleblock > .content, :root[data-theme="dark"] .doc details { background: var(--d-surface); border-color: var(--d-border); } :root[data-theme="dark"] .doc .admonitionblock > table td.icon { border-color: var(--d-border); } /* the concept diagrams are light SVGs — keep them on a light card so they stay readable against the dark page */ :root[data-theme="dark"] .doc .imageblock.diagram img { background: #fff; border-radius: 6px; padding: 0.75rem; } /* code blocks: the bright bg is on `pre.highlight > code` and the literal/ listing pres (#fafafa) — override those, not just `pre`. */ :root[data-theme="dark"] .doc pre.highlight > code, :root[data-theme="dark"] .doc .listingblock pre:not(.highlight), :root[data-theme="dark"] .doc .literalblock pre { background: #282c34; color: #abb2bf; box-shadow: inset 0 0 0 1px var(--d-border); } :root[data-theme="dark"] .doc thead code, :root[data-theme="dark"] .doc kbd { background: var(--d-surface-2); color: var(--d-strong); } /* left-nav / content separator: the stock UI draws a bright #c1c1c1 box-shadow (which Safari renders prominently). Kill the shadow (both prefixed and unprefixed) and use a deterministic muted dark-grey border instead. */ :root[data-theme="dark"] .nav { -webkit-box-shadow: none; box-shadow: none; border-right: 1px solid var(--d-border); } /* ---- Logo swap (the slate "Spring" wordmark is invisible on dark) ---- */ .brand-logo-dark { display: none; } :root[data-theme="dark"] .brand-logo-light { display: none; } :root[data-theme="dark"] .brand-logo-dark { display: inline-block; } /* page (index) logo: two image blocks toggled by theme */ .doc .imageblock.logo-dark { display: none; } :root[data-theme="dark"] .doc .imageblock.logo-light { display: none; } :root[data-theme="dark"] .doc .imageblock.logo-dark { display: flex; } /* ===================================================================== * * Syntax highlighting — atom-one-light (light) / atom-one-dark (dark) * Overrides the stock highlight theme baked into site.css, scoped by * the active [data-theme]. Token groups follow highlight.js conventions. * ===================================================================== */ /* base text colour */ :root[data-theme="light"] .doc .hljs { color: #383a42; } :root[data-theme="dark"] .doc .hljs { color: #abb2bf; } /* comment / quote */ :root[data-theme="light"] .doc .hljs-comment, :root[data-theme="light"] .doc .hljs-quote { color: #a0a1a7; font-style: italic; } :root[data-theme="dark"] .doc .hljs-comment, :root[data-theme="dark"] .doc .hljs-quote { color: #5c6370; font-style: italic; } /* keyword / doctag / formula */ :root[data-theme="light"] .doc .hljs-doctag, :root[data-theme="light"] .doc .hljs-keyword, :root[data-theme="light"] .doc .hljs-formula { color: #a626a4; } :root[data-theme="dark"] .doc .hljs-doctag, :root[data-theme="dark"] .doc .hljs-keyword, :root[data-theme="dark"] .doc .hljs-formula { color: #c678dd; } /* section / name / selector-tag / deletion / subst / tag */ :root[data-theme="light"] .doc .hljs-section, :root[data-theme="light"] .doc .hljs-name, :root[data-theme="light"] .doc .hljs-selector-tag, :root[data-theme="light"] .doc .hljs-deletion, :root[data-theme="light"] .doc .hljs-subst { color: #e45649; } :root[data-theme="dark"] .doc .hljs-section, :root[data-theme="dark"] .doc .hljs-name, :root[data-theme="dark"] .doc .hljs-selector-tag, :root[data-theme="dark"] .doc .hljs-deletion, :root[data-theme="dark"] .doc .hljs-subst { color: #e06c75; } /* literal */ :root[data-theme="light"] .doc .hljs-literal { color: #0184bb; } :root[data-theme="dark"] .doc .hljs-literal { color: #56b6c2; } /* string / regexp / addition / attribute */ :root[data-theme="light"] .doc .hljs-string, :root[data-theme="light"] .doc .hljs-regexp, :root[data-theme="light"] .doc .hljs-addition, :root[data-theme="light"] .doc .hljs-attribute, :root[data-theme="light"] .doc .hljs-meta .hljs-string { color: #50a14f; } :root[data-theme="dark"] .doc .hljs-string, :root[data-theme="dark"] .doc .hljs-regexp, :root[data-theme="dark"] .doc .hljs-addition, :root[data-theme="dark"] .doc .hljs-attribute, :root[data-theme="dark"] .doc .hljs-meta .hljs-string { color: #98c379; } /* attr / variable / type / number / selector-class */ :root[data-theme="light"] .doc .hljs-attr, :root[data-theme="light"] .doc .hljs-variable, :root[data-theme="light"] .doc .hljs-template-variable, :root[data-theme="light"] .doc .hljs-type, :root[data-theme="light"] .doc .hljs-selector-class, :root[data-theme="light"] .doc .hljs-selector-attr, :root[data-theme="light"] .doc .hljs-selector-pseudo, :root[data-theme="light"] .doc .hljs-number { color: #986801; } :root[data-theme="dark"] .doc .hljs-attr, :root[data-theme="dark"] .doc .hljs-variable, :root[data-theme="dark"] .doc .hljs-template-variable, :root[data-theme="dark"] .doc .hljs-type, :root[data-theme="dark"] .doc .hljs-selector-class, :root[data-theme="dark"] .doc .hljs-selector-attr, :root[data-theme="dark"] .doc .hljs-selector-pseudo, :root[data-theme="dark"] .doc .hljs-number { color: #d19a66; } /* symbol / bullet / link / meta / selector-id / title */ :root[data-theme="light"] .doc .hljs-symbol, :root[data-theme="light"] .doc .hljs-bullet, :root[data-theme="light"] .doc .hljs-link, :root[data-theme="light"] .doc .hljs-meta, :root[data-theme="light"] .doc .hljs-selector-id, :root[data-theme="light"] .doc .hljs-title { color: #4078f2; } :root[data-theme="dark"] .doc .hljs-symbol, :root[data-theme="dark"] .doc .hljs-bullet, :root[data-theme="dark"] .doc .hljs-link, :root[data-theme="dark"] .doc .hljs-meta, :root[data-theme="dark"] .doc .hljs-selector-id, :root[data-theme="dark"] .doc .hljs-title { color: #61aeee; } /* built_in / class title */ :root[data-theme="light"] .doc .hljs-built_in, :root[data-theme="light"] .doc .hljs-title.class_, :root[data-theme="light"] .doc .hljs-class .hljs-title { color: #c18401; } :root[data-theme="dark"] .doc .hljs-built_in, :root[data-theme="dark"] .doc .hljs-title.class_, :root[data-theme="dark"] .doc .hljs-class .hljs-title { color: #e6c07b; } /* ===================================================================== * Left-nav search box (top of the nav) — @antora/lunr-extension binds * its results dropdown to the #search-input inside this positioned box. * ===================================================================== */ .nav .nav-search { position: relative; /* anchor the .search-result-dropdown-menu (top:100%) */ padding: 0.5rem 0.75rem; border-bottom: 1px solid #e1e6ea; } .nav .nav-search #search-input { width: 100%; box-sizing: border-box; padding: 0.4rem 0.6rem; font-size: 0.85rem; line-height: 1.4; color: var(--ink); background: #fff; border: 1px solid #c9d2d9; border-radius: 4px; outline: none; } .nav .nav-search #search-input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(109, 179, 63, 0.25); } .nav .nav-search #search-input::placeholder { color: #8a97a3; } :root[data-theme="dark"] .nav .nav-search { border-bottom-color: var(--d-border); } :root[data-theme="dark"] .nav .nav-search #search-input { color: var(--d-strong); background: var(--d-surface-2); border-color: var(--d-border); } :root[data-theme="dark"] .nav .nav-search #search-input::placeholder { color: var(--d-muted); } /* The extension's search.css anchors the results dropdown to the right with a * 500px min-width — sized for a top-navbar box. In the left nav that overflows * off-screen, so re-anchor it under the field and cap its width. */ .nav .nav-search .search-result-dropdown-menu { left: 0; right: auto; min-width: 0; width: 340px; max-width: calc(100vw - 2rem); } /* ===================================================================== * Collapsible nav affordances. The stock UI collapses non-current * sections (.nav-item:not(.is-active) > .nav-list { display:none }) and * wires the carets + an expand/collapse-all button in JS — but the caret * and octicon images are dark and vanish on the dark nav background. * Make both affordances visible in each theme. * ===================================================================== */ .nav-item-toggle { opacity: 0.9; } .nav-menu-toggle { opacity: 0.85; } :root[data-theme="dark"] .nav-item-toggle, :root[data-theme="dark"] .nav-menu-toggle { filter: invert(1) brightness(1.6); opacity: 0.9; } /* ===================================================================== * Footer — the stock footer is light; give it a surface treatment and * a dark-mode variant (the site's footer was bright in dark mode). * ===================================================================== */ .footer { color: #6b7884; border-top: 1px solid #e1e6ea; background: #f7f9fb; } .footer a { color: var(--brand-dark); } :root[data-theme="dark"] .footer { color: var(--d-muted); border-top-color: var(--d-border); background: var(--d-surface); } :root[data-theme="dark"] .footer a { color: var(--brand-dark); } /* Search results dropdown — keep the popover legible in dark mode. */ :root[data-theme="dark"] .search-result-dataset { background: var(--d-surface); border-color: var(--d-border); } :root[data-theme="dark"] .search-result-document-title, :root[data-theme="dark"] .search-result-component-header { color: var(--d-strong); } :root[data-theme="dark"] .search-result-section-title, :root[data-theme="dark"] .search-result-document-hit a { color: var(--d-text); }