antora-ui-hop/src/css/vars.css

:root {
  /* colors */
  --color-white: #fff;
  --color-smoke-10: #fefefe;
  --color-smoke-30: #fafafa;
  --color-smoke-50: #f5f5f5;
  --color-smoke-70: #f0f0f0;
  --color-smoke-90: #e1e1e1;
  --color-gray-10: #c1c1c1;
  --color-gray-30: #8e8e8e;
  --color-gray-50: #808080;
  --color-gray-60: #555;
  --color-gray-70: #5d5d5d;
  --color-jet-20: #4a4a4a;
  --color-jet-30: #424242;
  --color-jet-50: #333;
  --color-jet-70: #222;
  --color-jet-80: #191919;
  --color-black: #000;
  --color-asf-dark-blue: #0e3a5a;
  --color-asf-moderate-blue: #4f51ae;
  --color-camel-hop: #8e8e8e;
  --color-camel-hop-light: #f39421;
  --color-highlight: #0e3a5a;
  --color-glow: #fff7a3;
  --color-wheat: #f5deb3;
  /* fonts */
  --rem-base: 18; /* used to compute rem value from desired pixel value
                    (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
  --body-font-size: 1.0625em; /* 17px */
  --body-font-size--desktop: 1.125em; /* 18px */
  --body-font-size--print: 0.9375em; /* 15px */
  --body-line-height: 1.15;
  --body-font-color: var(--color-jet-50);
  --body-font-family: "Open Sans", sans-serif;
  --body-font-weight-bold: bold;
  --monospace-font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
  --monospace-font-weight-bold: 500;
  /* base */
  --body-background: var(--color-white);
  --panel-background: var(--color-smoke-10);
  --panel-border-color: var(--color-smoke-90);
  --scrollbar-track-color: var(--color-gray-10);
  --scrollbar-thumb-color: var(--color-gray-30);
  --scrollbar-thumb-active-color: var(--color-gray-50);
  --scrollbar-thickness: 0.425em; /* 6.8px */
  --scrollbar-radius: 3.125em; /* 50px */
  /* navbar */
  --navbar-background: var(--color-white);
  --navbar-font-color: var(--color-camel-hop);
  --navbar-hover-font-color: var(--color-camel-hop);
  --navbar-hover-background: var(--color-white);
  --navbar-button-background: var(--color-white);
  --navbar-button-border-color: var(--panel-border-color);
  --navbar-button-font-color: var(--body-font-color);
  --navbar-menu-border-color: var(--panel-border-color);
  --navbar-menu-background: var(--color-white);
  --navbar-menu-font-color: var(--body-font-color);
  --navbar-menu-hover-background: var(--color-smoke-70);
  --navbar-search-result-separator: var(--color-wheat);
  /* nav */
  --nav-background: var(--panel-background);
  --nav-border-color: var(--color-smoke-50);
  --nav-line-height: 1.35;
  --nav-heading-font-color: var(--color-asf-dark-blue);
  --nav-muted-color: var(--color-jet-50);
  --nav-panel-divider-color: var(--color-smoke-50);
  --nav-secondary-background: var(--color-smoke-70);
  /* toolbar */
  --toolbar-background: var(--panel-background);
  --toolbar-border-color: var(--panel-border-color);
  --toolbar-font-color: var(--color-jet-80);
  --toolbar-muted-color: var(--color-jet-80);
  --page-version-menu-background: var(--color-smoke-70);
  --page-version-missing-font-color: var(--color-gray-30);
  /* toc */
  --toc-font-color: var(--nav-muted-color);
  --toc-heading-font-color: var(--doc-font-color);
  --toc-border-color: var(--panel-border-color);
  --toc-line-height: 1.2;
  /* admonitions */
  --caution-color: #a0439c;
  --caution-on-color: var(--color-white);
  --important-color: #d32f2f;
  --important-on-color: var(--color-white);
  --note-color: #217ee7;
  --note-on-color: var(--color-white);
  --tip-color: #4d4fb7;
  --tip-on-color: var(--color-white);
  --warning-color: #e18114;
  --warning-on-color: var(--color-white);
  /* doc */
  --doc-font-color: var(--color-jet-50);
  --doc-font-size: inherit;
  --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
  --doc-line-height: 1.6;
  --doc-margin: 0 auto;
  --doc-margin--desktop: 0 2rem;
  --heading-font-color: var(--color-asf-dark-blue);
  --heading-font-weight: bold;
  --alt-heading-font-weight: var(--body-font-weight-bold);
  --section-divider-color: var(--panel-border-color);
  --link-font-color: #585ac2;
  --link_hover-font-color: #104d92;
  --link_unresolved-font-color: var(--important-color);
  --abstract-background: var(--color-smoke-70);
  --abstract-font-color: var(--color-jet-20);
  --abstract-border-color: var(--panel-border-color);
  --admonition-background: var(--panel-background);
  --admonition-label-font-weight: var(--body-font-weight-bold);
  --caption-font-color: var(--color-gray-70);
  --caption-font-weight: var(--body-font-weight-bold);
  --code-background: var(--panel-background);
  --code-font-color: var(--color-asf-moderate-blue);
  --example-background: var(--color-white);
  --example-border-color: var(--color-gray-10);
  --kbd-background: var(--panel-background);
  --kbd-border-color: var(--color-gray-10);
  --pre-background: var(--panel-background);
  --pre-border-color: var(--panel-border-color);
  --pre-annotation-font-color: var(--color-gray-10);
  --quote-background: var(--panel-background);
  --quote-border-color: var(--color-gray-70);
  --quote-font-color: var(--color-gray-70);
  --quote-attribution-font-color: var(--color-gray-30);
  --sidebar-background: var(--color-smoke-70);
  --table-border-color: var(--color-asf-moderate-blue);
  /* static */
  --static-margin: 0 auto;
  /* frontpage */
  --frontpage-max-width: calc(1366 / var(--rem-base) * 1rem);
  /* footer */
  --footer-line-height: var(--doc-line-height);
  --footer-background: var(--color-smoke-50);
  --footer-font-color: var(--color-gray-70);
  --footer-after-background: var(--color-gray-50);
  --footer-link-font-color: var(--color-jet-80);
  --footer-height: 23rem; /* empirically corresponding current design of the foooter */
  /* dimensions */
  --navbar-height: calc(73 / var(--rem-base) * 1rem);
  --navbar-burger-height: calc(54 / var(--rem-base) * 1rem);
  --navbar-mobile-height: calc(4rem + var(--navbar-height));
  --toolbar-height: calc(45 / var(--rem-base) * 1rem);
  --drawer-height: var(--toolbar-height);
  --body-top: calc(var(--navbar-height) + 1rem);
  --body-mobile-top: calc(var(--navbar-mobile-height) + 1rem);
  --body-min-height: calc(100vh - var(--navbar-height));
  --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
  --nav-height--desktop: var(--body-min-height);
  --nav-panel-height: calc(var(--nav-height) - var(--drawer-height));
  --nav-panel-height--desktop: calc(var(--nav-height--desktop) - var(--drawer-height));
  --nav-width: calc(270 / var(--rem-base) * 1rem);
  --toc-top: calc(var(--body-top) + var(--toolbar-height));
  --toc-mobile-top: calc(3rem + var(--toc-top));
  --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
  --toc-width: calc(162 / var(--rem-base) * 1rem);
  --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);
  --doc-max-width: calc(720 / var(--rem-base) * 1rem);
  --doc-max-width--desktop: calc(1366 / var(--rem-base) * 1rem);
  --static-max-width: calc(720 / var(--rem-base) * 1rem);
  --static-max-width--desktop: calc(1366 / var(--rem-base) * 1rem);
  /* stacking */
  --z-index-nav: 1;
  --z-index-toolbar: 2;
  --z-index-page-version-menu: 3;
  --z-index-navbar: 4;
  --z-index-nav-search: 5;
}