diff --git a/.grenrc.js b/.grenrc.js index 9c8fa2b8bd..eed3b5415b 100644 --- a/.grenrc.js +++ b/.grenrc.js @@ -1,51 +1,20 @@ module.exports = { - changelogFilename: "CHANGELOG.md", - dataSource: "milestones", + changelogFilename: 'CHANGELOG.md', + dataSource: 'milestones', groupBy: { - "Enhancements": [ - "feature", - ], - "Fixes": [ - "bug" - ], - "Maintenance": [ - "task", - ], - "Uncategorised": [ - "closed", - ], + 'Enhancements': ['feature'], + 'Fixes': ['bug'], + 'Maintenance': ['task'], + 'Uncategorised': ['closed'], }, - ignoreLabels: [ - "asciidoc", - "blocked", - "browser", - "device", - "helpwanted", - "hugo", - "idea", - "mermaid", - "needsfeedback", - "undecided", - ], - ignoreIssuesWith: [ - "discussion", - "documentation", - "duplicate", - "invalid", - "support", - "unresolved", - "update", - "wontchange", - ], - ignoreTagsWith: [ - "Relearn", - "x", - ], - milestoneMatch: "{{tag_name}}", + ignoreLabels: ['asciidoc', 'blocked', 'browser', 'device', 'helpwanted', 'hugo', 'idea', 'mermaid', 'needsfeedback', 'undecided'], + ignoreIssuesWith: ['discussion', 'documentation', 'duplicate', 'invalid', 'support', 'unresolved', 'update', 'wontchange'], + ignoreTagsWith: ['Relearn', 'x'], + milestoneMatch: '{{tag_name}}', onlyMilestones: true, template: { - changelogTitle: "", - group: "\n### {{heading}}\n", - release: ({ body, date, release }) => `## ${release} (` + date.replace( /(\d+)\/(\d+)\/(\d+)/, '$3-$2-$1' ) + `)\n${body}`, + changelogTitle: '', + group: '\n### {{heading}}\n', + release: ({ body, date, release }) => `## ${release} (` + date.replace(/(\d+)\/(\d+)\/(\d+)/, '$3-$2-$1') + `)\n${body}`, }, }; diff --git a/.imgbotconfig b/.imgbotconfig index d3fb1db8ca..cc430d7f18 100644 --- a/.imgbotconfig +++ b/.imgbotconfig @@ -1,7 +1,5 @@ { - "schedule": "daily", - "ignoredFiles": [ - "static/*" - ], - "prTitle": "autobot: optimize images" + "schedule": "daily", + "ignoredFiles": ["static/*"], + "prTitle": "autobot: optimize images" } diff --git a/assets/css/format-print.css b/assets/css/format-print.css index 23897f0b4c..ea76e4b511 100644 --- a/assets/css/format-print.css +++ b/assets/css/format-print.css @@ -4,95 +4,108 @@ @import '{{ printf "chroma-%s.css%s" .themevariant.chroma $assetBusting }}'; #R-sidebar { - display: none; + display: none; } #R-body { - margin-left: 0 !important; - margin-right: 0 !important; - min-width: 100% !important; - max-width: 100% !important; - width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + min-width: 100% !important; + max-width: 100% !important; + width: 100% !important; } #R-body #navigation { - display: none; + display: none; } -html{ - font-size: 8.763pt; +html { + font-size: 8.763pt; } body { - background-color: rgba( 255, 255, 255, 1 ); + background-color: rgba(255, 255, 255, 1); } code.copy-to-clipboard-code { - border-start-end-radius: 2px; - border-end-end-radius: 2px; - border-inline-end-width: 1px; + border-start-end-radius: 2px; + border-end-end-radius: 2px; + border-inline-end-width: 1px; } pre:not(.mermaid) { - border: 1px solid rgba( 204, 204, 204, 1 ); + border: 1px solid rgba(204, 204, 204, 1); } -#R-body #R-topbar{ - background-color: rgba( 255, 255, 255, 1 ); /* avoid background bleeding*/ - border-bottom: 1px solid rgba( 221, 221, 221, 1 ); - border-radius: 0; - color: rgba( 119, 119, 119, 1 ); - padding-left: 0; /* for print, we want to align with the footer to ease the layout */ - padding-right: 0; +#R-body #R-topbar { + background-color: rgba(255, 255, 255, 1); /* avoid background bleeding*/ + border-bottom: 1px solid rgba(221, 221, 221, 1); + border-radius: 0; + color: rgba(119, 119, 119, 1); + padding-left: 0; /* for print, we want to align with the footer to ease the layout */ + padding-right: 0; } #R-body .topbar-button { - /* we don't need the buttons while printing */ - /* we need !important to turn off JS topbar button handling setting element styles */ - display: none !important; + /* we don't need the buttons while printing */ + /* we need !important to turn off JS topbar button handling setting element styles */ + display: none !important; } @media screen and (max-width: 47.999rem) { - #R-body .topbar-breadcrumbs { - visibility: visible; - } + #R-body .topbar-breadcrumbs { + visibility: visible; + } } #R-body .copy-to-clipboard-button { - display: none; + display: none; } #R-body .svg-reset-button { - display: none; + display: none; } -#R-body h1, #R-body h2, #R-body h3, #R-body .article-subheading, #R-body h4, #R-body h5, #R-body h6 { - /* better contrast for colored elements */ - color: rgba( 0, 0, 0, 1 ); +#R-body h1, +#R-body h2, +#R-body h3, +#R-body .article-subheading, +#R-body h4, +#R-body h5, +#R-body h6 { + /* better contrast for colored elements */ + color: rgba(0, 0, 0, 1); } -#R-body th, #R-body td, -#R-body code, #R-body strong, #R-body b, -#R-body li, #R-body dd, #R-body dt, +#R-body th, +#R-body td, +#R-body code, +#R-body strong, +#R-body b, +#R-body li, +#R-body dd, +#R-body dt, #R-body p, -#R-body a, #R-body button, #R-body .badge .badge-content { - /* better contrast for colored elements */ - color: rgba( 0, 0, 0, 1 ); +#R-body a, +#R-body button, +#R-body .badge .badge-content { + /* better contrast for colored elements */ + color: rgba(0, 0, 0, 1); } -#R-body .anchor{ - display: none; +#R-body .anchor { + display: none; } #R-body pre:not(.mermaid), #R-body code { - background-color: rgba( 255, 255, 255, 1 ); - border-color: rgba( 221, 221, 221, 1 ); + background-color: rgba(255, 255, 255, 1); + border-color: rgba(221, 221, 221, 1); } -hr{ - border-bottom: 1px solid rgba( 221, 221, 221, 1 ); +hr { + border-bottom: 1px solid rgba(221, 221, 221, 1); } #R-body #R-body-inner { - overflow: visible; /* turn off limitations for perfect scrollbar */ - /* reset paddings for chapters in screen */ - padding: 0 3.25rem 4rem 3.25rem; + overflow: visible; /* turn off limitations for perfect scrollbar */ + /* reset paddings for chapters in screen */ + padding: 0 3.25rem 4rem 3.25rem; } #R-body #R-body-inner h1 { - border-bottom: 1px solid rgba( 221, 221, 221, 1 ); - margin-bottom: 2rem; - padding-bottom: .75rem; + border-bottom: 1px solid rgba(221, 221, 221, 1); + margin-bottom: 2rem; + padding-bottom: 0.75rem; } #R-body-inner .chapter h3:first-of-type { - margin-top: 2rem; + margin-top: 2rem; } /* Children shortcode */ @@ -100,77 +113,77 @@ hr{ .children-li p, .children-h2 p, .children-h3 p { - font-size: 1rem; + font-size: 1rem; } .footline { - /* in print mode show footer line to signal reader the end of document */ - border-top: 1px solid rgba( 221, 221, 221, 1 ); - color: rgba( 119, 119, 119, 1 ); - margin-top: 1.5rem; - padding-top: .75rem; + /* in print mode show footer line to signal reader the end of document */ + border-top: 1px solid rgba(221, 221, 221, 1); + color: rgba(119, 119, 119, 1); + margin-top: 1.5rem; + padding-top: 0.75rem; } -h1 + .footline{ - /* if we have no content in the page we remove the footer as it is of no real value in print */ - display: none; +h1 + .footline { + /* if we have no content in the page we remove the footer as it is of no real value in print */ + display: none; } #R-body #R-body-inner .headline a, #R-body #R-body-inner .footline a, #R-body #R-body-inner .btn a { - text-decoration: none; + text-decoration: none; } #R-body #R-body-inner a { - /* in print we want to distinguish links in our content from + /* in print we want to distinguish links in our content from normal text even if printed black/white; don't use a.highlight in selector to also get links that are put as HTML into markdown */ - text-decoration-line: underline; + text-decoration-line: underline; } -#R-topbar{ - /* the header is sticky which is not suitable for print; */ - position: initial; +#R-topbar { + /* the header is sticky which is not suitable for print; */ + position: initial; } #R-topbar > .topbar-wrapper { - background-color: initial; + background-color: initial; } #R-body .topbar-sidebar-divider { - border-width: 0; + border-width: 0; } article .R-taxonomy { - display: none; + display: none; } mark.search { - background: inherit; - color: inherit; + background: inherit; + color: inherit; } .mermaid.zoom:hover { - border-color: transparent; + border-color: transparent; } div.box > .box-content { - background-color: rgba( 255, 255, 255, 1 ); + background-color: rgba(255, 255, 255, 1); } .btn, #R-body .tab-nav-button { - color: rgba( 0, 0, 0, 1 ); + color: rgba(0, 0, 0, 1); } #R-body .tab-nav-button.active { - border-bottom-color: rgba( 255, 255, 255, 1 ); - color: rgba( 0, 0, 0, 1 ); + border-bottom-color: rgba(255, 255, 255, 1); + color: rgba(0, 0, 0, 1); } #R-body .tab-nav-button.active > .tab-nav-text { - background-color: rgba( 255, 255, 255, 1 ); + background-color: rgba(255, 255, 255, 1); } #R-body .tab-content-text { - background-color: rgba( 255, 255, 255, 1 ) ; - color: rgba( 0, 0, 0, 1 ); + background-color: rgba(255, 255, 255, 1); + color: rgba(0, 0, 0, 1); } article { - break-before: page; + break-before: page; } #R-body-inner article:first-of-type { - break-before: avoid; + break-before: avoid; } diff --git a/assets/css/swagger.css b/assets/css/swagger.css index e1b377fbb0..490a362d15 100644 --- a/assets/css/swagger.css +++ b/assets/css/swagger.css @@ -4,413 +4,414 @@ /* prettier-ignore */ @import '{{ printf "variables.css%s" $assetBusting }}'; -body{ - line-height: 1.574; - font-variation-settings: var(--INTERNAL-MAIN-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-font-weight); - font-family: var(--INTERNAL-MAIN-font); - letter-spacing: var(--INTERNAL-MAIN-letter-spacing); - margin: 0; - overflow: hidden; +body { + line-height: 1.574; + font-variation-settings: var(--INTERNAL-MAIN-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-font-weight); + font-family: var(--INTERNAL-MAIN-font); + letter-spacing: var(--INTERNAL-MAIN-letter-spacing); + margin: 0; + overflow: hidden; } body, .swagger-ui .info *, #relearn-swagger-ui .renderedMarkdown *, -#relearn-swagger-ui p{ - font-size: 1.015625rem; +#relearn-swagger-ui p { + font-size: 1.015625rem; } -.swagger-ui .scheme-container{ - padding-left: 1rem; - padding-right: 1rem; +.swagger-ui .scheme-container { + padding-left: 1rem; + padding-right: 1rem; } -.swagger-ui .wrapper{ - padding-left: 0; - padding-right: 0; +.swagger-ui .wrapper { + padding-left: 0; + padding-right: 0; } h2 { - color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H2-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); } -svg{ - fill: var(--INTERNAL-MAIN-TEXT-color); +svg { + fill: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .info h2.title { - color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H2-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); } -.relearn-expander{ - display: block; - float: right; - margin: .5rem; +.relearn-expander { + display: block; + float: right; + margin: 0.5rem; } -#relearn-swagger-ui{ - clear: both; +#relearn-swagger-ui { + clear: both; } /* Styles extracted from swagger-dark.css generated by Dark Reader */ html { - background-color: var(--INTERNAL-MAIN-BG-color) !important; - color-scheme: var(--INTERNAL-BROWSER-theme) !important; + background-color: var(--INTERNAL-MAIN-BG-color) !important; + color-scheme: var(--INTERNAL-BROWSER-theme) !important; } -html, body { - background-color: var(--INTERNAL-MAIN-BG-color); - color: var(--INTERNAL-MAIN-TEXT-color); +html, +body { + background-color: var(--INTERNAL-MAIN-BG-color); + color: var(--INTERNAL-MAIN-TEXT-color); } a { - color: var(--INTERNAL-MAIN-LINK-color); + color: var(--INTERNAL-MAIN-LINK-color); } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { - color: var(--INTERNAL-MAIN-TEXT-color) !important; + color: var(--INTERNAL-MAIN-TEXT-color) !important; } ::-webkit-scrollbar-corner { - background-color: var(--INTERNAL-MAIN-BG-color); + background-color: var(--INTERNAL-MAIN-BG-color); } ::selection { - color: var(--INTERNAL-MAIN-TEXT-color) !important; + color: var(--INTERNAL-MAIN-TEXT-color) !important; } ::-moz-selection { - color: var(--INTERNAL-MAIN-TEXT-color) !important; + color: var(--INTERNAL-MAIN-TEXT-color) !important; } -*:not(pre, pre *, code, .far, .fa, .glyphicon, [class*="vjs-"], .fab, .fa-github, .fas, .material-icons, .icofont, .typcn, mu, [class*="mu-"], .glyphicon, .icon) { +*:not(pre, pre *, code, .far, .fa, .glyphicon, [class*='vjs-'], .fab, .fa-github, .fas, .material-icons, .icofont, .typcn, mu, [class*='mu-'], .glyphicon, .icon) { font-variation-settings: var(--INTERNAL-MAIN-font-variation-settings); font-family: var(--INTERNAL-MAIN-font) !important; letter-spacing: var(--INTERNAL-MAIN-letter-spacing) !important; line-height: 1.574 !important; } :root { - --darkreader-neutral-background: var(--INTERNAL-MAIN-BG-color); - --darkreader-neutral-text: var(--INTERNAL-MAIN-TEXT-color); - --darkreader-selection-text: var(--INTERNAL-MAIN-TEXT-color); + --darkreader-neutral-background: var(--INTERNAL-MAIN-BG-color); + --darkreader-neutral-text: var(--INTERNAL-MAIN-TEXT-color); + --darkreader-selection-text: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .nested-links a { - color: var(--INTERNAL-MAIN-LINK-color); + color: var(--INTERNAL-MAIN-LINK-color); } .swagger-ui .nested-links a:focus, .swagger-ui .nested-links a:hover { - color: var(--INTERNAL-MAIN-LINK-HOVER-color); + color: var(--INTERNAL-MAIN-LINK-HOVER-color); } .swagger-ui .opblock-tag { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .opblock-tag small { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .parameter__type { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .opblock .opblock-section-header > label { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .opblock .opblock-section-header h4 { - color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .opblock .opblock-summary-operation-id, .swagger-ui .opblock .opblock-summary-path, .swagger-ui .opblock .opblock-summary-path__deprecated { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .opblock .opblock-summary-description { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .opblock.opblock-post { - border-color: var(--INTERNAL-BOX-GREEN-color); + border-color: var(--INTERNAL-BOX-GREEN-color); } .swagger-ui .opblock.opblock-post .opblock-summary-method { - background-color: var(--INTERNAL-BOX-GREEN-color); + background-color: var(--INTERNAL-BOX-GREEN-color); } .swagger-ui .opblock.opblock-post .opblock-summary { - border-color: var(--INTERNAL-BOX-GREEN-color); + border-color: var(--INTERNAL-BOX-GREEN-color); } .swagger-ui .opblock.opblock-post .tab-header .tab-item.active h4 span::after { - background-color: var(--INTERNAL-BOX-GREEN-color); + background-color: var(--INTERNAL-BOX-GREEN-color); } .swagger-ui .opblock.opblock-put { - border-color: var(--INTERNAL-BOX-ORANGE-color); + border-color: var(--INTERNAL-BOX-ORANGE-color); } .swagger-ui .opblock.opblock-put .opblock-summary-method { - background-color: var(--INTERNAL-BOX-ORANGE-color); + background-color: var(--INTERNAL-BOX-ORANGE-color); } .swagger-ui .opblock.opblock-put .opblock-summary { - border-color: var(--INTERNAL-BOX-ORANGE-color); + border-color: var(--INTERNAL-BOX-ORANGE-color); } .swagger-ui .opblock.opblock-put .tab-header .tab-item.active h4 span::after { - background-color: var(--INTERNAL-BOX-ORANGE-color); + background-color: var(--INTERNAL-BOX-ORANGE-color); } .swagger-ui .opblock.opblock-delete { - border-color: var(--INTERNAL-BOX-RED-color); + border-color: var(--INTERNAL-BOX-RED-color); } .swagger-ui .opblock.opblock-delete .opblock-summary-method { - background-color: var(--INTERNAL-BOX-RED-color); + background-color: var(--INTERNAL-BOX-RED-color); } .swagger-ui .opblock.opblock-delete .opblock-summary { - border-color: var(--INTERNAL-BOX-RED-color); + border-color: var(--INTERNAL-BOX-RED-color); } .swagger-ui .opblock.opblock-delete .tab-header .tab-item.active h4 span::after { - background-color: var(--INTERNAL-BOX-RED-color); + background-color: var(--INTERNAL-BOX-RED-color); } .swagger-ui .opblock.opblock-get { - border-color: var(--INTERNAL-BOX-BLUE-color); + border-color: var(--INTERNAL-BOX-BLUE-color); } .swagger-ui .opblock.opblock-get .opblock-summary-method { - background-color: var(--INTERNAL-BOX-BLUE-color); + background-color: var(--INTERNAL-BOX-BLUE-color); } .swagger-ui .opblock.opblock-get .opblock-summary { - border-color: var(--INTERNAL-BOX-BLUE-color); + border-color: var(--INTERNAL-BOX-BLUE-color); } .swagger-ui .opblock.opblock-get .tab-header .tab-item.active h4 span::after { - background-color: var(--INTERNAL-BOX-BLUE-color); + background-color: var(--INTERNAL-BOX-BLUE-color); } .swagger-ui .opblock.opblock-patch { - border-color: var(--INTERNAL-BOX-CYAN-color); + border-color: var(--INTERNAL-BOX-CYAN-color); } .swagger-ui .opblock.opblock-patch .opblock-summary-method { - background-color: var(--INTERNAL-BOX-CYAN-color); + background-color: var(--INTERNAL-BOX-CYAN-color); } .swagger-ui .opblock.opblock-patch .opblock-summary { - border-color: var(--INTERNAL-BOX-CYAN-color); + border-color: var(--INTERNAL-BOX-CYAN-color); } .swagger-ui .opblock.opblock-patch .tab-header .tab-item.active h4 span::after { - background-color: var(--INTERNAL-BOX-CYAN-color); + background-color: var(--INTERNAL-BOX-CYAN-color); } .swagger-ui .opblock.opblock-options { - border-color: var(--INTERNAL-BOX-MAGENTA-color); + border-color: var(--INTERNAL-BOX-MAGENTA-color); } .swagger-ui .opblock.opblock-options .opblock-summary-method { - background-color: var(--INTERNAL-BOX-MAGENTA-color); + background-color: var(--INTERNAL-BOX-MAGENTA-color); } .swagger-ui .opblock.opblock-options .opblock-summary { - border-color: var(--INTERNAL-BOX-MAGENTA-color); + border-color: var(--INTERNAL-BOX-MAGENTA-color); } .swagger-ui .opblock.opblock-options .tab-header .tab-item.active h4 span::after { - background-color: var(--INTERNAL-BOX-MAGENTA-color); + background-color: var(--INTERNAL-BOX-MAGENTA-color); } .swagger-ui .tab li { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .opblock-description-wrapper, .swagger-ui .opblock-external-docs-wrapper, .swagger-ui .opblock-title_normal { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .opblock-description-wrapper h4, .swagger-ui .opblock-external-docs-wrapper h4, .swagger-ui .opblock-title_normal h4 { - color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .opblock-description-wrapper p, .swagger-ui .opblock-external-docs-wrapper p, .swagger-ui .opblock-title_normal p { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } -.swagger-ui .responses-inner h4{ - color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); +.swagger-ui .responses-inner h4 { + color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .responses-inner h5 { - color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H5-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H5-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); } .swagger-ui .response-col_status { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .response-col_links { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .opblock-body pre.microlight { - background-color: var(--INTERNAL-MAIN-BG-color); - color: var(--INTERNAL-MAIN-TEXT-color); + background-color: var(--INTERNAL-MAIN-BG-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .scheme-container .schemes > label { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .loading-container .loading::after { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui section h3 { - color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H3-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H3-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); } .swagger-ui .btn { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui select { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui label { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui textarea { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .checkbox p { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .dialog-ux .modal-ux-content p { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .dialog-ux .modal-ux-content h4 { - color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .dialog-ux .modal-ux-header h3 { - color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H3-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H3-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); } .swagger-ui .model { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui section.models h4 { - color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui section.models h5 { - color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H5-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H5-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); } .swagger-ui .model-title { - color: var(--INTERNAL-MAIN-TITLES-TEXT-color); + color: var(--INTERNAL-MAIN-TITLES-TEXT-color); } .swagger-ui .prop-format { - color: var(--INTERNAL-MAIN-TITLES-TEXT-color); + color: var(--INTERNAL-MAIN-TITLES-TEXT-color); } .swagger-ui .servers > label { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui table.headers td { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui table thead tr td, .swagger-ui table thead tr th { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .parameter__name { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .info li, .swagger-ui .info p, .swagger-ui .info table { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .info h1 { - color: var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H1-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); - text-align: center; - text-transform: uppercase; + color: var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H1-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); + text-align: center; + text-transform: uppercase; } .swagger-ui .info h2 { - color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H2-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); } .swagger-ui .info h3 { - color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H3-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H3-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); } .swagger-ui .info h4 { - color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .info h5 { - color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H5-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H5-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); } .swagger-ui .info a { - color: var(--INTERNAL-MAIN-LINK-color); + color: var(--INTERNAL-MAIN-LINK-color); } .swagger-ui .info a:hover { - color: var(--INTERNAL-MAIN-LINK-HOVER-color); + color: var(--INTERNAL-MAIN-LINK-HOVER-color); } .swagger-ui .info .base-url { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .info .title { - color: var(--INTERNAL-MAIN-TITLES-TEXT-color); + color: var(--INTERNAL-MAIN-TITLES-TEXT-color); } .swagger-ui .auth-container .errors { - color: var(--INTERNAL-MAIN-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .scopes h2 { - color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H2-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); } .swagger-ui .scopes h2 a { - color: var(--INTERNAL-MAIN-LINK-color); + color: var(--INTERNAL-MAIN-LINK-color); } .swagger-ui .errors-wrapper .errors h4 { - color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .errors-wrapper .errors small { - color: var(--INTERNAL-MAIN-TITLES-TEXT-color); + color: var(--INTERNAL-MAIN-TITLES-TEXT-color); } .swagger-ui .errors-wrapper hgroup h4 { - color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); - !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } body { - background-color: var(--INTERNAL-MAIN-BG-color); + background-color: var(--INTERNAL-MAIN-BG-color); } diff --git a/assets/css/theme-blue.css b/assets/css/theme-blue.css index afab8fc2a7..c71ed55918 100644 --- a/assets/css/theme-blue.css +++ b/assets/css/theme-blue.css @@ -1,41 +1,41 @@ :root { - --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ - --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ - --MAIN-TITLES-H1-TEXT-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ - --MAIN-LINK-color: rgba( 28, 144, 243, 1 ); /* Color of links */ - --MAIN-LINK-HOVER-color: rgba( 22, 122, 208, 1 ); /* Color of hovered links */ - --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ + --MAIN-TEXT-color: rgba(50, 50, 50, 1); /* Color of text by default */ + --MAIN-TITLES-TEXT-color: rgba(94, 94, 94, 1); /* Color of titles h2-h3-h4-h5-h6 */ + --MAIN-TITLES-H1-TEXT-color: rgba(34, 34, 34, 1); /* text color of h1 titles */ + --MAIN-LINK-color: rgba(28, 144, 243, 1); /* Color of links */ + --MAIN-LINK-HOVER-color: rgba(22, 122, 208, 1); /* Color of hovered links */ + --MAIN-BG-color: rgba(255, 255, 255, 1); /* color of text by default */ - --CODE-theme: learn; /* name of the chroma stylesheet file */ - --CODE-BLOCK-color: rgba( 226, 228, 229, 1 ); /* fallback color for code text */ - --CODE-BLOCK-BG-color: rgba( 40, 42, 54, 1 ); /* fallback color for code background */ - --CODE-BLOCK-BORDER-color: rgba( 40, 42, 54, 1 ); /* color of block code border */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* color for inline code text */ - --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* color for inline code background */ - --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* color of inline code border */ + --CODE-theme: learn; /* name of the chroma stylesheet file */ + --CODE-BLOCK-color: rgba(226, 228, 229, 1); /* fallback color for code text */ + --CODE-BLOCK-BG-color: rgba(40, 42, 54, 1); /* fallback color for code background */ + --CODE-BLOCK-BORDER-color: rgba(40, 42, 54, 1); /* color of block code border */ + --CODE-INLINE-color: rgba(94, 94, 94, 1); /* color for inline code text */ + --CODE-INLINE-BG-color: rgba(255, 250, 233, 1); /* color for inline code background */ + --CODE-INLINE-BORDER-color: rgba(248, 232, 200, 1); /* color of inline code border */ - --MENU-HOME-LINK-color: rgba( 45, 54, 63, 1 ); /* Color of the home button text */ - --MENU-HOME-LINK-HOVER-color: rgba( 0, 0, 0, 1 ); /* Color of the hovered home button text */ + --MENU-HOME-LINK-color: rgba(45, 54, 63, 1); /* Color of the home button text */ + --MENU-HOME-LINK-HOVER-color: rgba(0, 0, 0, 1); /* Color of the hovered home button text */ - --MENU-HEADER-BG-color: rgba( 28, 144, 243, 1 ); /* Background color of menu header */ - --MENU-HEADER-BORDER-color: rgba( 51, 161, 255, 1 ); /*Color of menu header border */ + --MENU-HEADER-BG-color: rgba(28, 144, 243, 1); /* Background color of menu header */ + --MENU-HEADER-BORDER-color: rgba(51, 161, 255, 1); /*Color of menu header border */ - --MENU-SEARCH-color: rgba( 255, 255, 255, 1 ); /* Color of search field text */ - --MENU-SEARCH-BG-color: rgba( 22, 122, 208, 1 ); /* Search field background color (by default borders + icons) */ - --MENU-SEARCH-BORDER-color: rgba( 51, 161, 255, 1 ); /* Override search field border color */ + --MENU-SEARCH-color: rgba(255, 255, 255, 1); /* Color of search field text */ + --MENU-SEARCH-BG-color: rgba(22, 122, 208, 1); /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BORDER-color: rgba(51, 161, 255, 1); /* Override search field border color */ - --MENU-SECTIONS-ACTIVE-BG-color: rgba( 32, 39, 43, 1 ); /* Background color of the active section and its children */ - --MENU-SECTIONS-BG-color: rgba( 37, 44, 49, 1 ); /* Background color of other sections */ - --MENU-SECTIONS-LINK-color: rgba( 204, 204, 204, 1 ); /* Color of links in menu */ - --MENU-SECTIONS-LINK-HOVER-color: rgba( 230, 230, 230, 1 ); /* Color of links in menu, when hovered */ - --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 119, 119, 119, 1 ); /* Color of active category text */ - --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */ + --MENU-SECTIONS-ACTIVE-BG-color: rgba(32, 39, 43, 1); /* Background color of the active section and its children */ + --MENU-SECTIONS-BG-color: rgba(37, 44, 49, 1); /* Background color of other sections */ + --MENU-SECTIONS-LINK-color: rgba(204, 204, 204, 1); /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: rgba(230, 230, 230, 1); /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: rgba(119, 119, 119, 1); /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba(255, 255, 255, 1); /* Color of background for the active category (only) */ - --MENU-VISITED-color: rgba( 28, 144, 243, 1 ); /* Color of 'page visited' icons in menu */ - --MENU-SECTION-SEPARATOR-color: rgba( 32, 39, 43, 1 ); /* Color of
separator in menu */ + --MENU-VISITED-color: rgba(28, 144, 243, 1); /* Color of 'page visited' icons in menu */ + --MENU-SECTION-SEPARATOR-color: rgba(32, 39, 43, 1); /* Color of
separator in menu */ - /* base styling for boxes */ - --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */ - --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */ - --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */ + /* base styling for boxes */ + --BOX-CAPTION-color: rgba(255, 255, 255, 1); /* color of the title text */ + --BOX-BG-color: rgba(255, 255, 255, 0.833); /* color of the content background */ + --BOX-TEXT-color: rgba(16, 16, 16, 1); /* fixed color of the content text */ } diff --git a/assets/css/theme-green.css b/assets/css/theme-green.css index b2d0cca75c..6f91b796a3 100644 --- a/assets/css/theme-green.css +++ b/assets/css/theme-green.css @@ -1,41 +1,41 @@ :root { - --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ - --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ - --MAIN-TITLES-H1-TEXT-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ - --MAIN-LINK-color: rgba( 89, 154, 62, 1 ); /* Color of links */ - --MAIN-LINK-HOVER-color: rgba( 63, 109, 44, 1 ); /* Color of hovered links */ - --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ + --MAIN-TEXT-color: rgba(50, 50, 50, 1); /* Color of text by default */ + --MAIN-TITLES-TEXT-color: rgba(94, 94, 94, 1); /* Color of titles h2-h3-h4-h5-h6 */ + --MAIN-TITLES-H1-TEXT-color: rgba(34, 34, 34, 1); /* text color of h1 titles */ + --MAIN-LINK-color: rgba(89, 154, 62, 1); /* Color of links */ + --MAIN-LINK-HOVER-color: rgba(63, 109, 44, 1); /* Color of hovered links */ + --MAIN-BG-color: rgba(255, 255, 255, 1); /* color of text by default */ - --CODE-theme: learn; /* name of the chroma stylesheet file */ - --CODE-BLOCK-color: rgba( 226, 228, 229, 1 ); /* fallback color for code text */ - --CODE-BLOCK-BG-color: rgba( 40, 42, 54, 1 ); /* fallback color for code background */ - --CODE-BLOCK-BORDER-color: rgba( 40, 42, 54, 1 ); /* color of block code border */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* color for inline code text */ - --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* color for inline code background */ - --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* color of inline code border */ + --CODE-theme: learn; /* name of the chroma stylesheet file */ + --CODE-BLOCK-color: rgba(226, 228, 229, 1); /* fallback color for code text */ + --CODE-BLOCK-BG-color: rgba(40, 42, 54, 1); /* fallback color for code background */ + --CODE-BLOCK-BORDER-color: rgba(40, 42, 54, 1); /* color of block code border */ + --CODE-INLINE-color: rgba(94, 94, 94, 1); /* color for inline code text */ + --CODE-INLINE-BG-color: rgba(255, 250, 233, 1); /* color for inline code background */ + --CODE-INLINE-BORDER-color: rgba(248, 232, 200, 1); /* color of inline code border */ - --MENU-HOME-LINK-color: rgba( 46, 59, 46, 1 ); /* Color of the home button text */ - --MENU-HOME-LINK-HOVER-color: rgba( 0, 0, 0, 1 ); /* Color of the hovered home button text */ + --MENU-HOME-LINK-color: rgba(46, 59, 46, 1); /* Color of the home button text */ + --MENU-HOME-LINK-HOVER-color: rgba(0, 0, 0, 1); /* Color of the hovered home button text */ - --MENU-HEADER-BG-color: rgba( 116, 181, 89, 1 ); /* Background color of menu header */ - --MENU-HEADER-BORDER-color: rgba( 156, 212, 132, 1 ); /*Color of menu header border */ + --MENU-HEADER-BG-color: rgba(116, 181, 89, 1); /* Background color of menu header */ + --MENU-HEADER-BORDER-color: rgba(156, 212, 132, 1); /*Color of menu header border */ - --MENU-SEARCH-color: rgba( 255, 255, 255, 1 ); /* Color of search field text */ - --MENU-SEARCH-BG-color: rgba( 89, 154, 62, 1 ); /* Search field background color (by default borders + icons) */ - --MENU-SEARCH-BORDER-color: rgba( 132, 199, 103, 1 ); /* Override search field border color */ + --MENU-SEARCH-color: rgba(255, 255, 255, 1); /* Color of search field text */ + --MENU-SEARCH-BG-color: rgba(89, 154, 62, 1); /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BORDER-color: rgba(132, 199, 103, 1); /* Override search field border color */ - --MENU-SECTIONS-ACTIVE-BG-color: rgba( 27, 33, 28, 1 ); /* Background color of the active section and its children */ - --MENU-SECTIONS-BG-color: rgba( 34, 39, 35, 1 ); /* Background color of other sections */ - --MENU-SECTIONS-LINK-color: rgba( 204, 204, 204, 1 ); /* Color of links in menu */ - --MENU-SECTIONS-LINK-HOVER-color: rgba( 230, 230, 230, 1 ); /* Color of links in menu, when hovered */ - --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 119, 119, 119, 1 ); /* Color of active category text */ - --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */ + --MENU-SECTIONS-ACTIVE-BG-color: rgba(27, 33, 28, 1); /* Background color of the active section and its children */ + --MENU-SECTIONS-BG-color: rgba(34, 39, 35, 1); /* Background color of other sections */ + --MENU-SECTIONS-LINK-color: rgba(204, 204, 204, 1); /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: rgba(230, 230, 230, 1); /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: rgba(119, 119, 119, 1); /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba(255, 255, 255, 1); /* Color of background for the active category (only) */ - --MENU-VISITED-color: rgba( 89, 154, 62, 1 ); /* Color of 'page visited' icons in menu */ - --MENU-SECTION-SEPARATOR-color: rgba( 24, 33, 28, 1 ); /* Color of
separator in menu */ + --MENU-VISITED-color: rgba(89, 154, 62, 1); /* Color of 'page visited' icons in menu */ + --MENU-SECTION-SEPARATOR-color: rgba(24, 33, 28, 1); /* Color of
separator in menu */ - /* base styling for boxes */ - --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */ - --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */ - --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */ + /* base styling for boxes */ + --BOX-CAPTION-color: rgba(255, 255, 255, 1); /* color of the title text */ + --BOX-BG-color: rgba(255, 255, 255, 0.833); /* color of the content background */ + --BOX-TEXT-color: rgba(16, 16, 16, 1); /* fixed color of the content text */ } diff --git a/assets/css/theme-learn.css b/assets/css/theme-learn.css index 28223ce19f..ace689bdb7 100644 --- a/assets/css/theme-learn.css +++ b/assets/css/theme-learn.css @@ -1,49 +1,49 @@ :root { - --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ - --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ - --MAIN-TITLES-H1-TEXT-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ - --MAIN-LINK-color: rgba( 0, 189, 243, 1 ); /* Color of links */ - --MAIN-LINK-HOVER-color: rgba( 0, 130, 167, 1 ); /* Color of hovered links */ - --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ + --MAIN-TEXT-color: rgba(50, 50, 50, 1); /* Color of text by default */ + --MAIN-TITLES-TEXT-color: rgba(94, 94, 94, 1); /* Color of titles h2-h3-h4-h5-h6 */ + --MAIN-TITLES-H1-TEXT-color: rgba(34, 34, 34, 1); /* text color of h1 titles */ + --MAIN-LINK-color: rgba(0, 189, 243, 1); /* Color of links */ + --MAIN-LINK-HOVER-color: rgba(0, 130, 167, 1); /* Color of hovered links */ + --MAIN-BG-color: rgba(255, 255, 255, 1); /* color of text by default */ - --CODE-theme: learn; /* name of the chroma stylesheet file */ - --CODE-BLOCK-color: rgba( 226, 228, 229, 1 ); /* fallback color for code text */ - --CODE-BLOCK-BG-color: rgba( 40, 42, 54, 1 ); /* fallback color for code background */ - --CODE-BLOCK-BORDER-color: rgba( 40, 42, 54, 1 ); /* color of block code border */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* color for inline code text */ - --CODE-INLINE-BG-color: rgba( 255, 247, 221, 1 ); /* color for inline code background */ - --CODE-INLINE-BORDER-color: rgba( 251, 240, 203, 1 ); /* color of inline code border */ + --CODE-theme: learn; /* name of the chroma stylesheet file */ + --CODE-BLOCK-color: rgba(226, 228, 229, 1); /* fallback color for code text */ + --CODE-BLOCK-BG-color: rgba(40, 42, 54, 1); /* fallback color for code background */ + --CODE-BLOCK-BORDER-color: rgba(40, 42, 54, 1); /* color of block code border */ + --CODE-INLINE-color: rgba(94, 94, 94, 1); /* color for inline code text */ + --CODE-INLINE-BG-color: rgba(255, 247, 221, 1); /* color for inline code background */ + --CODE-INLINE-BORDER-color: rgba(251, 240, 203, 1); /* color of inline code border */ - --MENU-HOME-LINK-color: rgba( 224, 224, 224, 1 ); /* Color of the home button text */ - --MENU-HOME-LINK-HOVER-color: rgba( 240, 240, 240, 1 ); /* Color of the hovered home button text */ + --MENU-HOME-LINK-color: rgba(224, 224, 224, 1); /* Color of the home button text */ + --MENU-HOME-LINK-HOVER-color: rgba(240, 240, 240, 1); /* Color of the hovered home button text */ - --MENU-HEADER-BG-color: rgba( 132, 81, 161, 1 ); /* Background color of menu header */ - --MENU-HEADER-BORDER-color: rgba( 156, 111, 182, 1 ); /*Color of menu header border */ + --MENU-HEADER-BG-color: rgba(132, 81, 161, 1); /* Background color of menu header */ + --MENU-HEADER-BORDER-color: rgba(156, 111, 182, 1); /*Color of menu header border */ - --MENU-SEARCH-color: rgba( 255, 255, 255, 1 ); /* Color of search field text */ - --MENU-SEARCH-BG-color: rgba( 118, 72, 144, 1 ); /* Search field background color (by default borders + icons) */ - --MENU-SEARCH-BORDER-color: rgba( 145, 94, 174, 1 ); /* Override search field border color */ + --MENU-SEARCH-color: rgba(255, 255, 255, 1); /* Color of search field text */ + --MENU-SEARCH-BG-color: rgba(118, 72, 144, 1); /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BORDER-color: rgba(145, 94, 174, 1); /* Override search field border color */ - --MENU-SECTIONS-ACTIVE-BG-color: rgba( 37, 31, 41, 1 ); /* Background color of the active section and its children */ - --MENU-SECTIONS-BG-color: rgba( 50, 42, 56, 1 ); /* Background color of other sections */ - --MENU-SECTIONS-LINK-color: rgba( 204, 204, 204, 1 ); /* Color of links in menu */ - --MENU-SECTIONS-LINK-HOVER-color: rgba( 230, 230, 230, 1 ); /* Color of links in menu, when hovered */ - --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 119, 119, 119, 1 ); /* Color of active category text */ - --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */ + --MENU-SECTIONS-ACTIVE-BG-color: rgba(37, 31, 41, 1); /* Background color of the active section and its children */ + --MENU-SECTIONS-BG-color: rgba(50, 42, 56, 1); /* Background color of other sections */ + --MENU-SECTIONS-LINK-color: rgba(204, 204, 204, 1); /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: rgba(230, 230, 230, 1); /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: rgba(119, 119, 119, 1); /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba(255, 255, 255, 1); /* Color of background for the active category (only) */ - --MENU-VISITED-color: rgba( 0, 189, 243, 1 ); /* Color of 'page visited' icons in menu */ - --MENU-SECTION-SEPARATOR-color: rgba( 42, 35, 47, 1 ); /* Color of
separator in menu */ + --MENU-VISITED-color: rgba(0, 189, 243, 1); /* Color of 'page visited' icons in menu */ + --MENU-SECTION-SEPARATOR-color: rgba(42, 35, 47, 1); /* Color of
separator in menu */ - /* base styling for boxes */ - --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */ - --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */ - --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */ + /* base styling for boxes */ + --BOX-CAPTION-color: rgba(255, 255, 255, 1); /* color of the title text */ + --BOX-BG-color: rgba(255, 255, 255, 0.833); /* color of the content background */ + --BOX-TEXT-color: rgba(16, 16, 16, 1); /* fixed color of the content text */ } body a#R-logo, body a#R-logo:hover, body #R-logo svg, body #R-logo svg * { - color: var(--INTERNAL-MENU-SEARCH-color); - fill: var(--INTERNAL-MENU-SEARCH-color) !important; + color: var(--INTERNAL-MENU-SEARCH-color); + fill: var(--INTERNAL-MENU-SEARCH-color) !important; } diff --git a/assets/css/theme-neon.css b/assets/css/theme-neon.css index 33d08858f0..f70f117b7b 100644 --- a/assets/css/theme-neon.css +++ b/assets/css/theme-neon.css @@ -1,150 +1,151 @@ :root { - --PRIMARY-color: rgba( 243, 0, 178, 1 ); /* brand primary color */ - --SECONDARY-color: rgb( 50, 189, 243, 1 ); /* brand secondary color */ - --ACCENT-color: rgba( 255, 255, 0, 1 ); /* brand accent color, used for search highlights */ + --PRIMARY-color: rgba(243, 0, 178, 1); /* brand primary color */ + --SECONDARY-color: rgb(50, 189, 243, 1); /* brand secondary color */ + --ACCENT-color: rgba(255, 255, 0, 1); /* brand accent color, used for search highlights */ - --MAIN-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of content and h1 titles */ - --MAIN-LINK-HOVER-color: rgb( 80, 215, 255, 1 ); /* hovered link color of content */ - --MAIN-BG-color: rgba( 16, 16, 16, 1 ); /* background color of content */ + --MAIN-TEXT-color: rgba(224, 224, 224, 1); /* text color of content and h1 titles */ + --MAIN-LINK-HOVER-color: rgb(80, 215, 255, 1); /* hovered link color of content */ + --MAIN-BG-color: rgba(16, 16, 16, 1); /* background color of content */ - /* optional overwrites for specific headers */ - --MAIN-TITLES-TEXT-color: rgba( 243, 0, 178, 1 ); /* text color of h2-h6 titles and transparent box titles */ - --MAIN-TITLES-H3-TEXT-color: rgba( 255, 255, 0, 1 ); /* text color of h3-h6 titles */ - --MAIN-TITLES-H4-TEXT-color: rgba( 154, 111, 255, 1 ); /* text color of h4-h6 titles */ + /* optional overwrites for specific headers */ + --MAIN-TITLES-TEXT-color: rgba(243, 0, 178, 1); /* text color of h2-h6 titles and transparent box titles */ + --MAIN-TITLES-H3-TEXT-color: rgba(255, 255, 0, 1); /* text color of h3-h6 titles */ + --MAIN-TITLES-H4-TEXT-color: rgba(154, 111, 255, 1); /* text color of h4-h6 titles */ - --CODE-theme: neon; /* name of the chroma stylesheet file */ - --CODE-BLOCK-color: rgba( 248, 248, 242, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BG-color: rgba( 0, 0, 0, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ - --CODE-INLINE-color: rgba( 130, 229, 80, 1 ); /* text color of inline code */ - --CODE-INLINE-BG-color: rgba( 40, 42, 54, 1 ); /* background color of inline code */ - --CODE-INLINE-BORDER-color: rgba( 70, 70, 70, 1 ); /* border color of inline code */ + --CODE-theme: neon; /* name of the chroma stylesheet file */ + --CODE-BLOCK-color: rgba(248, 248, 242, 1); /* fallback text color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BG-color: rgba(0, 0, 0, 1); /* fallback background color of block code; should be adjusted to your selected chroma style */ + --CODE-INLINE-color: rgba(130, 229, 80, 1); /* text color of inline code */ + --CODE-INLINE-BG-color: rgba(40, 42, 54, 1); /* background color of inline code */ + --CODE-INLINE-BORDER-color: rgba(70, 70, 70, 1); /* border color of inline code */ - --BROWSER-theme: dark; /* name of the theme for browser scrollbars of the main section */ - --MERMAID-theme: dark; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-theme: dark; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-CODE-theme: tomorrow-night; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ + --BROWSER-theme: dark; /* name of the theme for browser scrollbars of the main section */ + --MERMAID-theme: dark; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-theme: dark; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-CODE-theme: tomorrow-night; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ - --MENU-HEADER-BG-color: rgba( 0, 0, 0, 0 ); /* background color of menu header */ + --MENU-HEADER-BG-color: rgba(0, 0, 0, 0); /* background color of menu header */ - --MENU-HOME-LINK-color: rgba( 255, 255, 255, 1 ); /* home button color if configured */ - --MENU-HOME-LINK-HOVER-color: rgba( 208, 208, 208, 1 ); /* hovered home button color if configured */ + --MENU-HOME-LINK-color: rgba(255, 255, 255, 1); /* home button color if configured */ + --MENU-HOME-LINK-HOVER-color: rgba(208, 208, 208, 1); /* hovered home button color if configured */ - --MENU-SEARCH-color: rgba( 248, 248, 248, 1 ); /* text and icon color of search box */ - --MENU-SEARCH-BG-color: rgba( 16, 16, 16, .6 ); /* background color of search box */ - --MENU-SEARCH-BORDER-color: rgba( 232, 232, 232, 1 ); /* border color of search box */ + --MENU-SEARCH-color: rgba(248, 248, 248, 1); /* text and icon color of search box */ + --MENU-SEARCH-BG-color: rgba(16, 16, 16, 0.6); /* background color of search box */ + --MENU-SEARCH-BORDER-color: rgba(232, 232, 232, 1); /* border color of search box */ - --MENU-SECTIONS-BG-color: linear-gradient( 165deg, rgba( 243, 0, 178, .825 ) 0%, rgba( 28, 144, 243, .7 ) 65%, rgba( 0, 227, 211, .7 ) 100% ); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ - --MENU-SECTIONS-ACTIVE-BG-color: rgba( 0, 0, 0, .166 ); /* background color of the active menu section */ - --MENU-SECTIONS-LINK-color: rgba( 255, 255, 255, 1 ); /* link color of menu topics */ - --MENU-SECTIONS-LINK-HOVER-color: rgba( 208, 208, 208, 1 ); /* hovered link color of menu topics */ - --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 86, 255, 232, 1 ); /* text color of the displayed menu topic */ - --MENU-SECTION-SEPARATOR-color: rgba( 186, 186, 186, 1 ); /* separator color between menu sections and menu footer */ + --MENU-SECTIONS-BG-color: linear-gradient(165deg, rgba(243, 0, 178, 0.825) 0%, rgba(28, 144, 243, 0.7) 65%, rgba(0, 227, 211, 0.7) 100%); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ + --MENU-SECTIONS-ACTIVE-BG-color: rgba(0, 0, 0, 0.166); /* background color of the active menu section */ + --MENU-SECTIONS-LINK-color: rgba(255, 255, 255, 1); /* link color of menu topics */ + --MENU-SECTIONS-LINK-HOVER-color: rgba(208, 208, 208, 1); /* hovered link color of menu topics */ + --MENU-SECTION-ACTIVE-CATEGORY-color: rgba(86, 255, 232, 1); /* text color of the displayed menu topic */ + --MENU-SECTION-SEPARATOR-color: rgba(186, 186, 186, 1); /* separator color between menu sections and menu footer */ - --MENU-VISITED-color: rgba( 51, 161, 255, 1 ); /* icon color of visited menu topics if configured */ + --MENU-VISITED-color: rgba(51, 161, 255, 1); /* icon color of visited menu topics if configured */ - /* base styling for boxes */ - --BOX-CAPTION-color: rgba( 240, 240, 240, 1 ); /* text color of colored box titles */ - --BOX-BG-color: rgba( 8, 8, 8, 1 ); /* background color of colored boxes */ - --BOX-TEXT-color: initial; /* text color of colored box content */ + /* base styling for boxes */ + --BOX-CAPTION-color: rgba(240, 240, 240, 1); /* text color of colored box titles */ + --BOX-BG-color: rgba(8, 8, 8, 1); /* background color of colored boxes */ + --BOX-TEXT-color: initial; /* text color of colored box content */ - /* optional base colors for colored boxes as in badges, buttons, notice, etc. shortcode */ - --BOX-BLUE-color: rgba( 48, 117, 229, 1 ); /* background color of blue boxes */ - --BOX-BLUE-TEXT-color: var( --BOX-BLUE-color ); /* text color of blue boxes */ - --BOX-CYAN-color: rgba( 30, 190, 190, 1 ); /* background color of cyan boxes */ - --BOX-CYAN-TEXT-color: var( --BOX-CYAN-color ); /* text color of cyan boxes */ - --BOX-GREEN-color: rgba( 42, 178, 24, 1 ); /* background color of green boxes */ - --BOX-GREEN-TEXT-color: var( --BOX-GREEN-color ); /* text color of green boxes */ - --BOX-GREY-color: rgba( 128, 128, 128, 1 ); /* background color of grey boxes */ - --BOX-GREY-TEXT-color: var( --BOX-GREY-color ); /* text color of grey boxes */ - --BOX-MAGENTA-color: rgba( 237, 33, 220, 1 ); /* background color of magenta boxes */ - --BOX-MAGENTA-TEXT-color: var( --BOX-MAGENTA-color ); /* text color of magenta boxes */ - --BOX-ORANGE-color: rgba( 237, 153, 9, 1 ); /* background color of orange boxes */ - --BOX-ORANGE-TEXT-color: var( --BOX-ORANGE-color ); /* text color of orange boxes */ - --BOX-RED-color: rgba( 224, 62, 62, 1 ); /* background color of red boxes */ - --BOX-RED-TEXT-color: var( --BOX-RED-color ); /* text color of red boxes */ + /* optional base colors for colored boxes as in badges, buttons, notice, etc. shortcode */ + --BOX-BLUE-color: rgba(48, 117, 229, 1); /* background color of blue boxes */ + --BOX-BLUE-TEXT-color: var(--BOX-BLUE-color); /* text color of blue boxes */ + --BOX-CYAN-color: rgba(30, 190, 190, 1); /* background color of cyan boxes */ + --BOX-CYAN-TEXT-color: var(--BOX-CYAN-color); /* text color of cyan boxes */ + --BOX-GREEN-color: rgba(42, 178, 24, 1); /* background color of green boxes */ + --BOX-GREEN-TEXT-color: var(--BOX-GREEN-color); /* text color of green boxes */ + --BOX-GREY-color: rgba(128, 128, 128, 1); /* background color of grey boxes */ + --BOX-GREY-TEXT-color: var(--BOX-GREY-color); /* text color of grey boxes */ + --BOX-MAGENTA-color: rgba(237, 33, 220, 1); /* background color of magenta boxes */ + --BOX-MAGENTA-TEXT-color: var(--BOX-MAGENTA-color); /* text color of magenta boxes */ + --BOX-ORANGE-color: rgba(237, 153, 9, 1); /* background color of orange boxes */ + --BOX-ORANGE-TEXT-color: var(--BOX-ORANGE-color); /* text color of orange boxes */ + --BOX-RED-color: rgba(224, 62, 62, 1); /* background color of red boxes */ + --BOX-RED-TEXT-color: var(--BOX-RED-color); /* text color of red boxes */ } body a#R-logo, body a#R-logo:hover, body #R-logo svg, body #R-logo svg * { - color: var(--INTERNAL-MENU-SEARCH-BORDER-color); - fill: var(--INTERNAL-MENU-SEARCH-BORDER-color) !important; + color: var(--INTERNAL-MENU-SEARCH-BORDER-color); + fill: var(--INTERNAL-MENU-SEARCH-BORDER-color) !important; } -body a#R-logo{ - text-shadow: - 0 0 1px var(--INTERNAL-MENU-SEARCH-BORDER-color), - 0 0 2px var(--INTERNAL-MENU-SEARCH-BORDER-color), - 0 0 4px var(--INTERNAL-MENU-SEARCH-BORDER-color), - 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color), - 0 0 8px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color); +body a#R-logo { + text-shadow: + 0 0 1px var(--INTERNAL-MENU-SEARCH-BORDER-color), + 0 0 2px var(--INTERNAL-MENU-SEARCH-BORDER-color), + 0 0 4px var(--INTERNAL-MENU-SEARCH-BORDER-color), + 0 0 8px rgba(128, 128, 128, 1), + 0 0 4px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color), + 0 0 8px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color); } body h1 { - color: rgba( 255, 255, 255, 1 ); - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 4px rgba( 255, 255, 255, 1 ), - 0 0 8px rgba( 255, 255, 255, 1 ), - 0 0 3px var(--INTERNAL-MAIN-TITLES-H1-TEXT-color), - 0 0 6px var(--INTERNAL-MAIN-TITLES-H1-TEXT-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); + color: rgba(255, 255, 255, 1); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 4px rgba(255, 255, 255, 1), + 0 0 8px rgba(255, 255, 255, 1), + 0 0 3px var(--INTERNAL-MAIN-TITLES-H1-TEXT-color), + 0 0 6px var(--INTERNAL-MAIN-TITLES-H1-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); } body h2 { - color: rgba( 255, 255, 255, 1 ); - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MAIN-TITLES-H2-TEXT-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H2-TEXT-color), - 0 0 10px var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + color: rgba(255, 255, 255, 1); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 8px rgba(128, 128, 128, 1), + 0 0 4px var(--INTERNAL-MAIN-TITLES-H2-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H2-TEXT-color), + 0 0 10px var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); } -body h3, body .article-subheading { - color: rgba( 255, 255, 255, 1 ); - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MAIN-TITLES-H3-TEXT-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H3-TEXT-color), - 0 0 10px var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); +body h3, +body .article-subheading { + color: rgba(255, 255, 255, 1); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 8px rgba(128, 128, 128, 1), + 0 0 4px var(--INTERNAL-MAIN-TITLES-H3-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H3-TEXT-color), + 0 0 10px var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); } body h4 { - color: rgba( 255, 255, 255, 1 ); - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MAIN-TITLES-H4-TEXT-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H4-TEXT-color), - 0 0 10px var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + color: rgba(255, 255, 255, 1); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 8px rgba(128, 128, 128, 1), + 0 0 4px var(--INTERNAL-MAIN-TITLES-H4-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H4-TEXT-color), + 0 0 10px var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); } body h5 { - color: rgba( 255, 255, 255, 1 ); - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 3px rgba( 255, 255, 255, 1 ), - 0 0 6px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MAIN-TITLES-H5-TEXT-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); + color: rgba(255, 255, 255, 1); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 3px rgba(255, 255, 255, 1), + 0 0 6px rgba(128, 128, 128, 1), + 0 0 4px var(--INTERNAL-MAIN-TITLES-H5-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); } body h6 { - color: rgba( 255, 255, 255, 1 ); - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 4px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MAIN-TITLES-H6-TEXT-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H6-TEXT-color); + color: rgba(255, 255, 255, 1); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 4px rgba(128, 128, 128, 1), + 0 0 4px var(--INTERNAL-MAIN-TITLES-H6-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H6-TEXT-color); } .swagger-ui h1, @@ -152,18 +153,18 @@ body h6 { .swagger-ui h3, .swagger-ui h4, .swagger-ui h5, -.swagger-ui h6{ - color: rgba( 255, 255, 255, 1 ) !important; +.swagger-ui h6 { + color: rgba(255, 255, 255, 1) !important; } -body #R-sidebar .searchbox button:hover{ - color: rgba( 255, 255, 255, 1 ); - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MENU-SEARCH-color), - 0 0 8px var(--INTERNAL-MENU-SEARCH-color); +body #R-sidebar .searchbox button:hover { + color: rgba(255, 255, 255, 1); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 8px rgba(128, 128, 128, 1), + 0 0 4px var(--INTERNAL-MENU-SEARCH-color), + 0 0 8px var(--INTERNAL-MENU-SEARCH-color); } body #R-sidebar select:hover, @@ -171,34 +172,34 @@ body #R-sidebar .collapsible-menu li:not(.active) > label:hover, body #R-sidebar .menu-control:hover, body #R-sidebar a:hover, body #R-prefooter button:hover { - color: rgba( 255, 255, 255, 1 ); - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color), - 0 0 8px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color); + color: rgba(255, 255, 255, 1); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 8px rgba(128, 128, 128, 1), + 0 0 4px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color), + 0 0 8px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color); } body #R-sidebar li.active > label, -body #R-sidebar li.active > :is( a, span ) { - color: rgba( 255, 255, 255, 1 ); - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color), - 0 0 8px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color); +body #R-sidebar li.active > :is(a, span) { + color: rgba(255, 255, 255, 1); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 8px rgba(128, 128, 128, 1), + 0 0 4px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color), + 0 0 8px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color); } body #R-homelinks.homelinks a:hover { - color: rgba( 255, 255, 255, 1 ); - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MENU-HOME-LINK-HOVER-color), - 0 0 8px var(--INTERNAL-MENU-HOME-LINK-HOVER-color); + color: rgba(255, 255, 255, 1); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 8px rgba(128, 128, 128, 1), + 0 0 4px var(--INTERNAL-MENU-HOME-LINK-HOVER-color), + 0 0 8px var(--INTERNAL-MENU-HOME-LINK-HOVER-color); } body h1 a, @@ -208,90 +209,92 @@ body h4 a, body h5 a, body h6 a, body .anchor { - text-shadow: none; + text-shadow: none; } body .badge, body .btn, body div.box { - box-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 4px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--VARIABLE-BOX-color); + box-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 4px rgba(128, 128, 128, 1), + 0 0 4px var(--VARIABLE-BOX-color); } body .badge > .badge-content, body .btn, body .btn > *, body div.box > .box-label { - text-shadow: - 0 0 1px rgba( 255, 255, 255, 1 ), - 0 0 2px rgba( 255, 255, 255, 1 ), - 0 0 4px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--VARIABLE-BOX-CAPTION-color); + text-shadow: + 0 0 1px rgba(255, 255, 255, 1), + 0 0 2px rgba(255, 255, 255, 1), + 0 0 4px rgba(128, 128, 128, 1), + 0 0 4px var(--VARIABLE-BOX-CAPTION-color); } body .tab-panel-cstyle:not(.transparent), body .badge.cstyle:not(.transparent), body .btn.cstyle { - --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color); + --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color); } body .badge.cstyle.transparent, body .btn.cstyle.transparent { - --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); + --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); } body .btn.cstyle.transparent > * { - border-color: var(--VARIABLE-BOX-color); - color: var(--VARIABLE-BOX-CAPTION-color); + border-color: var(--VARIABLE-BOX-color); + color: var(--VARIABLE-BOX-CAPTION-color); } body .btn.cstyle.interactive.transparent > *:hover, body .btn.cstyle.interactive.transparent > *:active, body .btn.cstyle.interactive.transparent > *:focus { - background-color: var(--INTERNAL-MAIN-TITLES-TEXT-color); - color: var(--INTERNAL-MAIN-TEXT-color); + background-color: var(--INTERNAL-MAIN-TITLES-TEXT-color); + color: var(--INTERNAL-MAIN-TEXT-color); } body .box.cstyle.transparent { - box-shadow: none; + box-shadow: none; } @media print { - #R-body h1, - #R-body h2, - #R-body h3, #R-body .article-subheading, - #R-body h4, - #R-body h5, - #R-body h6 { - text-shadow: none; - } - #R-body .badge, - #R-body .badge > .badge-content, - #R-body .btn, - #R-body .btn > *, - #R-body div.box, - #R-body div.box > .box-label { - box-shadow: none; - text-shadow: none; - } - #R-body .badge.cstyle:not(.transparent), - #R-body .btn.cstyle { - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); - } + #R-body h1, + #R-body h2, + #R-body h3, + #R-body .article-subheading, + #R-body h4, + #R-body h5, + #R-body h6 { + text-shadow: none; + } + #R-body .badge, + #R-body .badge > .badge-content, + #R-body .btn, + #R-body .btn > *, + #R-body div.box, + #R-body div.box > .box-label { + box-shadow: none; + text-shadow: none; + } + #R-body .badge.cstyle:not(.transparent), + #R-body .btn.cstyle { + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); + } } /* if we are in print chapter preview our @media statement from above will not apply, so we have to repeat it here */ .print #R-body h1, .print #R-body h2, -.print #R-body h3, .print #R-body .article-subheading, +.print #R-body h3, +.print #R-body .article-subheading, .print #R-body h4, .print #R-body h5, .print #R-body h6 { - text-shadow: none; + text-shadow: none; } .print #R-body .badge, .print #R-body .badge > .badge-content, @@ -299,15 +302,15 @@ above will not apply, so we have to repeat it here */ .print #R-body .btn > *, .print #R-body div.box, .print #R-body div.box > .box-label { - box-shadow: none; - text-shadow: none; + box-shadow: none; + text-shadow: none; } .print #R-body .badge.cstyle:not(.transparent), .print #R-body .btn.cstyle { - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); } #R-content-wrapper { - --ps-thumb-color: rgba( 208, 208, 208, 1 ); - --ps-thumb-hover-color: rgba( 204, 204, 204, 1 ); + --ps-thumb-color: rgba(208, 208, 208, 1); + --ps-thumb-hover-color: rgba(204, 204, 204, 1); } diff --git a/assets/css/theme-red.css b/assets/css/theme-red.css index 27ccc359ab..05256cff1b 100644 --- a/assets/css/theme-red.css +++ b/assets/css/theme-red.css @@ -1,41 +1,41 @@ :root { - --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ - --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ - --MAIN-TITLES-H1-TEXT-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ - --MAIN-LINK-color: rgba( 243, 28, 28, 1 ); /* Color of links */ - --MAIN-LINK-HOVER-color: rgba( 208, 22, 22, 1 ); /* Color of hovered links */ - --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ + --MAIN-TEXT-color: rgba(50, 50, 50, 1); /* Color of text by default */ + --MAIN-TITLES-TEXT-color: rgba(94, 94, 94, 1); /* Color of titles h2-h3-h4-h5-h6 */ + --MAIN-TITLES-H1-TEXT-color: rgba(34, 34, 34, 1); /* text color of h1 titles */ + --MAIN-LINK-color: rgba(243, 28, 28, 1); /* Color of links */ + --MAIN-LINK-HOVER-color: rgba(208, 22, 22, 1); /* Color of hovered links */ + --MAIN-BG-color: rgba(255, 255, 255, 1); /* color of text by default */ - --CODE-theme: learn; /* name of the chroma stylesheet file */ - --CODE-BLOCK-color: rgba( 226, 228, 229, 1 ); /* fallback color for code text */ - --CODE-BLOCK-BG-color: rgba( 40, 42, 54, 1 ); /* fallback color for code background */ - --CODE-BLOCK-BORDER-color: rgba( 40, 42, 54, 1 ); /* color of block code border */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* color for inline code text */ - --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* color for inline code background */ - --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* color of inline code border */ + --CODE-theme: learn; /* name of the chroma stylesheet file */ + --CODE-BLOCK-color: rgba(226, 228, 229, 1); /* fallback color for code text */ + --CODE-BLOCK-BG-color: rgba(40, 42, 54, 1); /* fallback color for code background */ + --CODE-BLOCK-BORDER-color: rgba(40, 42, 54, 1); /* color of block code border */ + --CODE-INLINE-color: rgba(94, 94, 94, 1); /* color for inline code text */ + --CODE-INLINE-BG-color: rgba(255, 250, 233, 1); /* color for inline code background */ + --CODE-INLINE-BORDER-color: rgba(248, 232, 200, 1); /* color of inline code border */ - --MENU-HOME-LINK-color: rgba( 56, 43, 43, 1 ); /* Color of the home button text */ - --MENU-HOME-LINK-HOVER-color: rgba( 0, 0, 0, 1 ); /* Color of the hovered home button text */ + --MENU-HOME-LINK-color: rgba(56, 43, 43, 1); /* Color of the home button text */ + --MENU-HOME-LINK-HOVER-color: rgba(0, 0, 0, 1); /* Color of the hovered home button text */ - --MENU-HEADER-BG-color: rgba( 220, 16, 16, 1 ); /* Background color of menu header */ - --MENU-HEADER-BORDER-color: rgba( 226, 49, 49, 1 ); /*Color of menu header border */ + --MENU-HEADER-BG-color: rgba(220, 16, 16, 1); /* Background color of menu header */ + --MENU-HEADER-BORDER-color: rgba(226, 49, 49, 1); /*Color of menu header border */ - --MENU-SEARCH-color: rgba( 255, 255, 255, 1 ); /* Color of search field text */ - --MENU-SEARCH-BG-color: rgba( 185, 0, 0, 1 ); /* Search field background color (by default borders + icons) */ - --MENU-SEARCH-BORDER-color: rgba( 239, 32, 32, 1 ); /* Override search field border color */ + --MENU-SEARCH-color: rgba(255, 255, 255, 1); /* Color of search field text */ + --MENU-SEARCH-BG-color: rgba(185, 0, 0, 1); /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BORDER-color: rgba(239, 32, 32, 1); /* Override search field border color */ - --MENU-SECTIONS-ACTIVE-BG-color: rgba( 43, 32, 32, 1 ); /* Background color of the active section and its children */ - --MENU-SECTIONS-BG-color: rgba( 49, 37, 37, 1 ); /* Background color of other sections */ - --MENU-SECTIONS-LINK-color: rgba( 204, 204, 204, 1 ); /* Color of links in menu */ - --MENU-SECTIONS-LINK-HOVER-color: rgba( 230, 230, 230, 1 ); /* Color of links in menu, when hovered */ - --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 119, 119, 119, 1 ); /* Color of active category text */ - --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */ + --MENU-SECTIONS-ACTIVE-BG-color: rgba(43, 32, 32, 1); /* Background color of the active section and its children */ + --MENU-SECTIONS-BG-color: rgba(49, 37, 37, 1); /* Background color of other sections */ + --MENU-SECTIONS-LINK-color: rgba(204, 204, 204, 1); /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: rgba(230, 230, 230, 1); /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: rgba(119, 119, 119, 1); /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba(255, 255, 255, 1); /* Color of background for the active category (only) */ - --MENU-VISITED-color: rgba( 243, 28, 28, 1 ); /* Color of 'page visited' icons in menu */ - --MENU-SECTION-SEPARATOR-color: rgba( 43, 32, 32, 1 ); /* Color of
separator in menu */ + --MENU-VISITED-color: rgba(243, 28, 28, 1); /* Color of 'page visited' icons in menu */ + --MENU-SECTION-SEPARATOR-color: rgba(43, 32, 32, 1); /* Color of
separator in menu */ - /* base styling for boxes */ - --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */ - --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */ - --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */ + /* base styling for boxes */ + --BOX-CAPTION-color: rgba(255, 255, 255, 1); /* color of the title text */ + --BOX-BG-color: rgba(255, 255, 255, 0.833); /* color of the content background */ + --BOX-TEXT-color: rgba(16, 16, 16, 1); /* fixed color of the content text */ } diff --git a/assets/css/theme-relearn-bright.css b/assets/css/theme-relearn-bright.css index 343702bf96..2e7b33314c 100644 --- a/assets/css/theme-relearn-bright.css +++ b/assets/css/theme-relearn-bright.css @@ -1,52 +1,52 @@ :root { - --PRIMARY-color: rgba( 131, 201, 50, 1 ); /* brand primary color */ - --SECONDARY-color: rgba( 99, 128, 208, 1 ); /* brand secondary color */ - --ACCENT-color: rgb( 255, 102, 78, 1 ); /* brand accent color, used for search highlights */ + --PRIMARY-color: rgba(131, 201, 50, 1); /* brand primary color */ + --SECONDARY-color: rgba(99, 128, 208, 1); /* brand secondary color */ + --ACCENT-color: rgb(255, 102, 78, 1); /* brand accent color, used for search highlights */ - --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ - --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hovered link color of content */ - --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* background color of content */ - --MAIN-TITLES-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of h2-h6 titles and transparent box titles */ + --MAIN-TEXT-color: rgba(0, 0, 0, 1); /* text color of content and h1 titles */ + --MAIN-LINK-HOVER-color: rgba(32, 40, 145, 1); /* hovered link color of content */ + --MAIN-BG-color: rgba(255, 255, 255, 1); /* background color of content */ + --MAIN-TITLES-TEXT-color: rgba(16, 16, 16, 1); /* text color of h2-h6 titles and transparent box titles */ - --CODE-theme: relearn-light; /* name of the chroma stylesheet file */ - --CODE-BLOCK-color: rgba( 39, 40, 34, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BG-color: rgba( 250, 250, 250, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BORDER-color: rgba( 216, 216, 216, 1 ); /* border color of block code */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* text color of inline code */ - --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* background color of inline code */ - --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* border color of inline code */ + --CODE-theme: relearn-light; /* name of the chroma stylesheet file */ + --CODE-BLOCK-color: rgba(39, 40, 34, 1); /* fallback text color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BG-color: rgba(250, 250, 250, 1); /* fallback background color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BORDER-color: rgba(216, 216, 216, 1); /* border color of block code */ + --CODE-INLINE-color: rgba(94, 94, 94, 1); /* text color of inline code */ + --CODE-INLINE-BG-color: rgba(255, 250, 233, 1); /* background color of inline code */ + --CODE-INLINE-BORDER-color: rgba(248, 232, 200, 1); /* border color of inline code */ - --BROWSER-theme: light; /* name of the theme for browser scrollbars of the main section */ - --MERMAID-theme: default; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-theme: light; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-CODE-theme: idea; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ + --BROWSER-theme: light; /* name of the theme for browser scrollbars of the main section */ + --MERMAID-theme: default; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-theme: light; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-CODE-theme: idea; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ - --MENU-HEADER-BG-color: rgba( 0, 0, 0, 0 ); /* background color of menu header */ - --MENU-HEADER-SEPARATOR-color: rgba( 96, 96, 96, 1 ); /* separator color between menu header and menu */ + --MENU-HEADER-BG-color: rgba(0, 0, 0, 0); /* background color of menu header */ + --MENU-HEADER-SEPARATOR-color: rgba(96, 96, 96, 1); /* separator color between menu header and menu */ - --MENU-HOME-LINK-color: rgba( 64, 64, 64, 1 ); /* home button color if configured */ - --MENU-HOME-LINK-HOVER-color: rgba( 0, 0, 0, 1 ); /* hovered home button color if configured */ + --MENU-HOME-LINK-color: rgba(64, 64, 64, 1); /* home button color if configured */ + --MENU-HOME-LINK-HOVER-color: rgba(0, 0, 0, 1); /* hovered home button color if configured */ - --MENU-SEARCH-color: rgba( 64, 64, 64, 1 ); /* text and icon color of search box */ - --MENU-SEARCH-BG-color: rgba( 255, 255, 255, .2 ); /* background color of search box */ - --MENU-SEARCH-BORDER-color: transparent; /* border color of search box */ + --MENU-SEARCH-color: rgba(64, 64, 64, 1); /* text and icon color of search box */ + --MENU-SEARCH-BG-color: rgba(255, 255, 255, 0.2); /* background color of search box */ + --MENU-SEARCH-BORDER-color: transparent; /* border color of search box */ - --MENU-SECTIONS-BG-color: rgba( 131, 201, 50, 1 ); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ - --MENU-SECTIONS-ACTIVE-BG-color: transparent; /* background color of the active menu section */ - --MENU-SECTIONS-LINK-color: rgba( 50, 50, 50, 1 ); /* link color of menu topics */ - --MENU-SECTIONS-LINK-HOVER-color: rgba( 255, 255, 255, 1 ); /* hovered link color of menu topics */ - --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 50, 50, 50, 1 ); /* text color of the displayed menu topic */ - --MENU-SECTION-SEPARATOR-color: rgba( 96, 96, 96, 1 ); /* separator color between menu sections and menu footer */ + --MENU-SECTIONS-BG-color: rgba(131, 201, 50, 1); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ + --MENU-SECTIONS-ACTIVE-BG-color: transparent; /* background color of the active menu section */ + --MENU-SECTIONS-LINK-color: rgba(50, 50, 50, 1); /* link color of menu topics */ + --MENU-SECTIONS-LINK-HOVER-color: rgba(255, 255, 255, 1); /* hovered link color of menu topics */ + --MENU-SECTION-ACTIVE-CATEGORY-color: rgba(50, 50, 50, 1); /* text color of the displayed menu topic */ + --MENU-SECTION-SEPARATOR-color: rgba(96, 96, 96, 1); /* separator color between menu sections and menu footer */ - --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* text color of colored box titles */ - --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* background color of colored boxes */ - --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of colored box content */ + --BOX-CAPTION-color: rgba(255, 255, 255, 1); /* text color of colored box titles */ + --BOX-BG-color: rgba(255, 255, 255, 0.833); /* background color of colored boxes */ + --BOX-TEXT-color: rgba(16, 16, 16, 1); /* text color of colored box content */ } body a#R-logo, body a#R-logo:hover, body #R-logo svg, body #R-logo svg * { - color: var(--MENU-SEARCH-color); - fill: var(--MENU-SEARCH-color) !important; + color: var(--MENU-SEARCH-color); + fill: var(--MENU-SEARCH-color) !important; } diff --git a/assets/css/theme-relearn-dark.css b/assets/css/theme-relearn-dark.css index 3827132371..847d8f6fcc 100644 --- a/assets/css/theme-relearn-dark.css +++ b/assets/css/theme-relearn-dark.css @@ -1,43 +1,43 @@ :root { - --PRIMARY-color: rgba( 125, 201, 3, 1 ); /* brand primary color */ - --SECONDARY-color: rgba( 108, 140, 227, 1 ); /* brand secondary color */ - --ACCENT-color: rgb( 255, 102, 78, 1 ); /* brand accent color, used for search highlights */ + --PRIMARY-color: rgba(125, 201, 3, 1); /* brand primary color */ + --SECONDARY-color: rgba(108, 140, 227, 1); /* brand secondary color */ + --ACCENT-color: rgb(255, 102, 78, 1); /* brand accent color, used for search highlights */ - --MAIN-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of content and h1 titles */ - --MAIN-LINK-HOVER-color: rgba( 147, 176, 255, 1 ); /* hovered link color of content */ - --MAIN-BG-color: rgba( 32, 32, 32, 1 ); /* background color of content */ - --MAIN-TITLES-TEXT-color: rgba( 255, 255, 255, 1 ); /* text color of h2-h6 titles and transparent box titles */ + --MAIN-TEXT-color: rgba(224, 224, 224, 1); /* text color of content and h1 titles */ + --MAIN-LINK-HOVER-color: rgba(147, 176, 255, 1); /* hovered link color of content */ + --MAIN-BG-color: rgba(32, 32, 32, 1); /* background color of content */ + --MAIN-TITLES-TEXT-color: rgba(255, 255, 255, 1); /* text color of h2-h6 titles and transparent box titles */ - --CODE-theme: relearn-dark; /* name of the chroma stylesheet file */ - --CODE-BLOCK-color: rgba( 248, 248, 242, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BG-color: rgba( 43, 43, 43, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color of block code */ - --CODE-INLINE-color: rgba( 130, 229, 80, 1 ); /* text color of inline code */ - --CODE-INLINE-BG-color: rgba( 45, 45, 45, 1 ); /* background color of inline code */ - --CODE-INLINE-BORDER-color: rgba( 70, 70, 70, 1 ); /* border color of inline code */ + --CODE-theme: relearn-dark; /* name of the chroma stylesheet file */ + --CODE-BLOCK-color: rgba(248, 248, 242, 1); /* fallback text color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BG-color: rgba(43, 43, 43, 1); /* fallback background color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BORDER-color: rgba(71, 71, 71, 1); /* border color of block code */ + --CODE-INLINE-color: rgba(130, 229, 80, 1); /* text color of inline code */ + --CODE-INLINE-BG-color: rgba(45, 45, 45, 1); /* background color of inline code */ + --CODE-INLINE-BORDER-color: rgba(70, 70, 70, 1); /* border color of inline code */ - --BROWSER-theme: dark; /* name of the theme for browser scrollbars of the main section */ - --MERMAID-theme: dark; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-theme: dark; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-CODE-theme: obsidian; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ + --BROWSER-theme: dark; /* name of the theme for browser scrollbars of the main section */ + --MERMAID-theme: dark; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-theme: dark; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-CODE-theme: obsidian; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ - --MENU-HOME-LINK-color: rgba( 64, 64, 64, 1 ); /* home button color if configured */ - --MENU-HOME-LINK-HOVER-color: rgba( 0, 0, 0, 1 ); /* hovered home button color if configured */ + --MENU-HOME-LINK-color: rgba(64, 64, 64, 1); /* home button color if configured */ + --MENU-HOME-LINK-HOVER-color: rgba(0, 0, 0, 1); /* hovered home button color if configured */ - --MENU-SEARCH-color: rgba( 224, 224, 224, 1 ); /* text and icon color of search box */ - --MENU-SEARCH-BG-color: rgba( 50, 50, 50, 1 ); /* background color of search box */ - --MENU-SEARCH-BORDER-color: rgba( 224, 224, 224, 1 ); /* border color of search box */ + --MENU-SEARCH-color: rgba(224, 224, 224, 1); /* text and icon color of search box */ + --MENU-SEARCH-BG-color: rgba(50, 50, 50, 1); /* background color of search box */ + --MENU-SEARCH-BORDER-color: rgba(224, 224, 224, 1); /* border color of search box */ - --MENU-SECTIONS-BG-color: rgba( 43, 43, 43, 1 ); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ - --MENU-SECTIONS-LINK-color: rgba( 186, 186, 186, 1 ); /* link color of menu topics */ - --MENU-SECTIONS-LINK-HOVER-color: rgba( 255, 255, 255, 1 ); /* hovered link color of menu topics */ - --MENU-SECTIONS-ACTIVE-BG-color: rgba( 50, 50, 50, 1 ); /* background color of the active menu section */ - --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 130, 229, 80, 1 ); /* text color of the displayed menu topic */ - --MENU-SECTION-SEPARATOR-color: rgba( 96, 96, 96, 1 ); /* separator color between menu sections and menu footer */ + --MENU-SECTIONS-BG-color: rgba(43, 43, 43, 1); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ + --MENU-SECTIONS-LINK-color: rgba(186, 186, 186, 1); /* link color of menu topics */ + --MENU-SECTIONS-LINK-HOVER-color: rgba(255, 255, 255, 1); /* hovered link color of menu topics */ + --MENU-SECTIONS-ACTIVE-BG-color: rgba(50, 50, 50, 1); /* background color of the active menu section */ + --MENU-SECTION-ACTIVE-CATEGORY-color: rgba(130, 229, 80, 1); /* text color of the displayed menu topic */ + --MENU-SECTION-SEPARATOR-color: rgba(96, 96, 96, 1); /* separator color between menu sections and menu footer */ - --MENU-VISITED-color: rgba( 72, 106, 201, 1 ); /* icon color of visited menu topics if configured */ + --MENU-VISITED-color: rgba(72, 106, 201, 1); /* icon color of visited menu topics if configured */ - --BOX-CAPTION-color: rgba( 240, 240, 240, 1 ); /* text color of colored box titles */ - --BOX-BG-color: rgba( 20, 20, 20, 1 ); /* background color of colored boxes */ - --BOX-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of colored box content */ + --BOX-CAPTION-color: rgba(240, 240, 240, 1); /* text color of colored box titles */ + --BOX-BG-color: rgba(20, 20, 20, 1); /* background color of colored boxes */ + --BOX-TEXT-color: rgba(224, 224, 224, 1); /* text color of colored box content */ } diff --git a/assets/css/theme-relearn-light.css b/assets/css/theme-relearn-light.css index 1581592d29..01f7181fab 100644 --- a/assets/css/theme-relearn-light.css +++ b/assets/css/theme-relearn-light.css @@ -1,41 +1,41 @@ :root { - --PRIMARY-color: rgba( 125, 201, 3, 1 ); /* brand primary color */ - --SECONDARY-color: rgba( 72, 106, 201, 1 ); /* brand secondary color */ - --ACCENT-color: rgb( 255, 102, 78 ); /* brand accent color, used for search highlights */ + --PRIMARY-color: rgba(125, 201, 3, 1); /* brand primary color */ + --SECONDARY-color: rgba(72, 106, 201, 1); /* brand secondary color */ + --ACCENT-color: rgb(255, 102, 78); /* brand accent color, used for search highlights */ - --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ - --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hovered link color of content */ - --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* background color of content */ - --MAIN-TITLES-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of h2-h6 titles and transparent box titles */ + --MAIN-TEXT-color: rgba(0, 0, 0, 1); /* text color of content and h1 titles */ + --MAIN-LINK-HOVER-color: rgba(32, 40, 145, 1); /* hovered link color of content */ + --MAIN-BG-color: rgba(255, 255, 255, 1); /* background color of content */ + --MAIN-TITLES-TEXT-color: rgba(16, 16, 16, 1); /* text color of h2-h6 titles and transparent box titles */ - --CODE-theme: relearn-light; /* name of the chroma stylesheet file */ - --CODE-BLOCK-color: rgba( 39, 40, 34, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BG-color: rgba( 250, 250, 250, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BORDER-color: rgba( 216, 216, 216, 1 ); /* border color of block code */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* text color of inline code */ - --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* background color of inline code */ - --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* border color of inline code */ + --CODE-theme: relearn-light; /* name of the chroma stylesheet file */ + --CODE-BLOCK-color: rgba(39, 40, 34, 1); /* fallback text color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BG-color: rgba(250, 250, 250, 1); /* fallback background color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BORDER-color: rgba(216, 216, 216, 1); /* border color of block code */ + --CODE-INLINE-color: rgba(94, 94, 94, 1); /* text color of inline code */ + --CODE-INLINE-BG-color: rgba(255, 250, 233, 1); /* background color of inline code */ + --CODE-INLINE-BORDER-color: rgba(248, 232, 200, 1); /* border color of inline code */ - --BROWSER-theme: light; /* name of the theme for browser scrollbars of the main section */ - --MERMAID-theme: default; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-theme: light; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-CODE-theme: idea; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ + --BROWSER-theme: light; /* name of the theme for browser scrollbars of the main section */ + --MERMAID-theme: default; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-theme: light; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-CODE-theme: idea; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ - --MENU-HOME-LINK-color: rgba( 64, 64, 64, 1 ); /* home button color if configured */ - --MENU-HOME-LINK-HOVER-color: rgba( 0, 0, 0, 1 ); /* hovered home button color if configured */ + --MENU-HOME-LINK-color: rgba(64, 64, 64, 1); /* home button color if configured */ + --MENU-HOME-LINK-HOVER-color: rgba(0, 0, 0, 1); /* hovered home button color if configured */ - --MENU-SEARCH-color: rgba( 224, 224, 224, 1 ); /* text and icon color of search box */ - --MENU-SEARCH-BG-color: rgba( 50, 50, 50, 1 ); /* background color of search box */ - --MENU-SEARCH-BORDER-color: rgba( 224, 224, 224, 1 ); /* border color of search box */ + --MENU-SEARCH-color: rgba(224, 224, 224, 1); /* text and icon color of search box */ + --MENU-SEARCH-BG-color: rgba(50, 50, 50, 1); /* background color of search box */ + --MENU-SEARCH-BORDER-color: rgba(224, 224, 224, 1); /* border color of search box */ - --MENU-SECTIONS-BG-color: rgba( 40, 40, 40, 1 ); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ - --MENU-SECTIONS-ACTIVE-BG-color: rgba( 0, 0, 0, .166 ); /* background color of the active menu section */ - --MENU-SECTIONS-LINK-color: rgba( 186, 186, 186, 1 ); /* link color of menu topics */ - --MENU-SECTIONS-LINK-HOVER-color: rgba( 255, 255, 255, 1 ); /* hovered link color of menu topics */ - --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 68, 68, 68, 1 ); /* text color of the displayed menu topic */ - --MENU-SECTION-SEPARATOR-color: rgba( 96, 96, 96, 1 ); /* separator color between menu sections and menu footer */ + --MENU-SECTIONS-BG-color: rgba(40, 40, 40, 1); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ + --MENU-SECTIONS-ACTIVE-BG-color: rgba(0, 0, 0, 0.166); /* background color of the active menu section */ + --MENU-SECTIONS-LINK-color: rgba(186, 186, 186, 1); /* link color of menu topics */ + --MENU-SECTIONS-LINK-HOVER-color: rgba(255, 255, 255, 1); /* hovered link color of menu topics */ + --MENU-SECTION-ACTIVE-CATEGORY-color: rgba(68, 68, 68, 1); /* text color of the displayed menu topic */ + --MENU-SECTION-SEPARATOR-color: rgba(96, 96, 96, 1); /* separator color between menu sections and menu footer */ - --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* text color of colored box titles */ - --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* background color of colored boxes */ - --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of colored box content */ + --BOX-CAPTION-color: rgba(255, 255, 255, 1); /* text color of colored box titles */ + --BOX-BG-color: rgba(255, 255, 255, 0.833); /* background color of colored boxes */ + --BOX-TEXT-color: rgba(16, 16, 16, 1); /* text color of colored box content */ } diff --git a/assets/css/theme-zen-dark.css b/assets/css/theme-zen-dark.css index f3d8eed069..655775e4de 100644 --- a/assets/css/theme-zen-dark.css +++ b/assets/css/theme-zen-dark.css @@ -1,59 +1,59 @@ :root { - --PRIMARY-color: rgba( 47, 129, 235, 1 ); /* brand primary color */ - --SECONDARY-color: rgba( 47, 129, 235, 1 ); /* brand secondary color */ + --PRIMARY-color: rgba(47, 129, 235, 1); /* brand primary color */ + --SECONDARY-color: rgba(47, 129, 235, 1); /* brand secondary color */ - --MAIN-TOPBAR-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color between topbar and content */ - --MAIN-LINK-HOVER-color: rgb(112, 174, 245); /* hovered link color of content */ - --MAIN-BG-color: rgba( 32, 32, 32, 1 ); /* background color of content */ - --MAIN-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of content and h1 titles */ - --MAIN-TITLES-TEXT-color: rgba( 255, 255, 255, 1 ); /* text color of h2-h6 titles and transparent box titles */ + --MAIN-TOPBAR-BORDER-color: rgba(71, 71, 71, 1); /* border color between topbar and content */ + --MAIN-LINK-HOVER-color: rgb(112, 174, 245); /* hovered link color of content */ + --MAIN-BG-color: rgba(32, 32, 32, 1); /* background color of content */ + --MAIN-TEXT-color: rgba(224, 224, 224, 1); /* text color of content and h1 titles */ + --MAIN-TITLES-TEXT-color: rgba(255, 255, 255, 1); /* text color of h2-h6 titles and transparent box titles */ - --CODE-theme: relearn-dark; /* name of the chroma stylesheet file */ - --CODE-BLOCK-color: rgba( 248, 248, 242, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BG-color: rgba( 43, 43, 43, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color of block code */ - --CODE-INLINE-color: rgba( 130, 229, 80, 1 ); /* text color of inline code */ - --CODE-INLINE-BG-color: rgba( 45, 45, 45, 1 ); /* background color of inline code */ - --CODE-INLINE-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color of inline code */ + --CODE-theme: relearn-dark; /* name of the chroma stylesheet file */ + --CODE-BLOCK-color: rgba(248, 248, 242, 1); /* fallback text color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BG-color: rgba(43, 43, 43, 1); /* fallback background color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BORDER-color: rgba(71, 71, 71, 1); /* border color of block code */ + --CODE-INLINE-color: rgba(130, 229, 80, 1); /* text color of inline code */ + --CODE-INLINE-BG-color: rgba(45, 45, 45, 1); /* background color of inline code */ + --CODE-INLINE-BORDER-color: rgba(71, 71, 71, 1); /* border color of inline code */ - --BROWSER-theme: dark; /* name of the theme for browser scrollbars of the main section */ - --MERMAID-theme: dark; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-theme: dark; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-CODE-theme: obsidian; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ + --BROWSER-theme: dark; /* name of the theme for browser scrollbars of the main section */ + --MERMAID-theme: dark; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-theme: dark; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-CODE-theme: obsidian; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ - --MENU-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color between menu and content */ - --MENU-TOPBAR-BORDER-color: rgba( 39, 39, 39, 1 ); /* separator color of vertical line between menu and topbar */ - --MENU-TOPBAR-SEPARATOR-color: rgba( 71, 71, 71, 1 ); /* separator color of vertical line between menu and topbar */ - --MENU-HEADER-BG-color: transparent; /* background color of menu header */ - --MENU-HEADER-BORDER-color: transparent; /* border color between menu header and menu */ - --MENU-HEADER-SEPARATOR-color: rgba( 71, 71, 71, .66 ); /* separator color between menu header and menu */ + --MENU-BORDER-color: rgba(71, 71, 71, 1); /* border color between menu and content */ + --MENU-TOPBAR-BORDER-color: rgba(39, 39, 39, 1); /* separator color of vertical line between menu and topbar */ + --MENU-TOPBAR-SEPARATOR-color: rgba(71, 71, 71, 1); /* separator color of vertical line between menu and topbar */ + --MENU-HEADER-BG-color: transparent; /* background color of menu header */ + --MENU-HEADER-BORDER-color: transparent; /* border color between menu header and menu */ + --MENU-HEADER-SEPARATOR-color: rgba(71, 71, 71, 0.66); /* separator color between menu header and menu */ - --MENU-HOME-LINK-color: rgba( 224, 224, 224, 1 ); /* home button color if configured */ - --MENU-HOME-LINK-HOVER-color: rgba( 47, 129, 235, 1 ); /* hovered home button color if configured */ + --MENU-HOME-LINK-color: rgba(224, 224, 224, 1); /* home button color if configured */ + --MENU-HOME-LINK-HOVER-color: rgba(47, 129, 235, 1); /* hovered home button color if configured */ - --MENU-SEARCH-color: rgba( 47, 129, 235, 1 ); /* text and icon color of search box */ - --MENU-SEARCH-BG-color: rgba( 32, 32, 32, 1 ); /* background color of search box */ - --MENU-SEARCH-BORDER-color: rgba( 71, 71, 71, .66 ); /* border color of search box */ + --MENU-SEARCH-color: rgba(47, 129, 235, 1); /* text and icon color of search box */ + --MENU-SEARCH-BG-color: rgba(32, 32, 32, 1); /* background color of search box */ + --MENU-SEARCH-BORDER-color: rgba(71, 71, 71, 0.66); /* border color of search box */ - --MENU-SECTIONS-BG-color: rgba( 39, 39, 39, 1 ); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ - --MENU-SECTIONS-ACTIVE-BG-color: transparent; /* background color of the active menu section */ - --MENU-SECTIONS-LINK-color: rgba( 224, 224, 224, .75 ); /* link color of menu topics */ - --MENU-SECTIONS-LINK-HOVER-color: rgba( 47, 129, 235, 1 ); /* hoverd link color of menu topics */ - --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 47, 129, 235, 1 ); /* text color of the displayed menu topic */ - --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 32, 32, 32, 1 ); /* background color of the displayed menu topic */ - --MENU-SECTION-SEPARATOR-color: rgba( 71, 71, 71, .66 ); /* separator color between menu sections and menu footer */ + --MENU-SECTIONS-BG-color: rgba(39, 39, 39, 1); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ + --MENU-SECTIONS-ACTIVE-BG-color: transparent; /* background color of the active menu section */ + --MENU-SECTIONS-LINK-color: rgba(224, 224, 224, 0.75); /* link color of menu topics */ + --MENU-SECTIONS-LINK-HOVER-color: rgba(47, 129, 235, 1); /* hoverd link color of menu topics */ + --MENU-SECTION-ACTIVE-CATEGORY-color: rgba(47, 129, 235, 1); /* text color of the displayed menu topic */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba(32, 32, 32, 1); /* background color of the displayed menu topic */ + --MENU-SECTION-SEPARATOR-color: rgba(71, 71, 71, 0.66); /* separator color between menu sections and menu footer */ - --BOX-CAPTION-color: rgba( 240, 240, 240, 1 ); /* text color of colored box titles */ - --BOX-BG-color: rgba( 20, 20, 20, 1 ); /* background color of colored boxes */ - --BOX-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of colored box content */ + --BOX-CAPTION-color: rgba(240, 240, 240, 1); /* text color of colored box titles */ + --BOX-BG-color: rgba(20, 20, 20, 1); /* background color of colored boxes */ + --BOX-TEXT-color: rgba(224, 224, 224, 1); /* text color of colored box content */ - --BOX-GREY-color: rgba( 71, 71, 71, 1 ); /* background color of grey boxes */ + --BOX-GREY-color: rgba(71, 71, 71, 1); /* background color of grey boxes */ } body a#R-logo, body a#R-logo:hover, body #R-logo svg, body #R-logo svg * { - color: var(--MENU-HOME-LINK-color); - fill: var(--MENU-HOME-LINK-color) !important; + color: var(--MENU-HOME-LINK-color); + fill: var(--MENU-HOME-LINK-color) !important; } diff --git a/assets/css/theme-zen-light.css b/assets/css/theme-zen-light.css index 4da24f98b9..e1e510ddfb 100644 --- a/assets/css/theme-zen-light.css +++ b/assets/css/theme-zen-light.css @@ -1,59 +1,59 @@ :root { - --PRIMARY-color: rgba( 26, 115, 232, 1 ); /* brand primary color */ - --SECONDARY-color: rgba( 26, 115, 232, 1 ); /* brand secondary color */ + --PRIMARY-color: rgba(26, 115, 232, 1); /* brand primary color */ + --SECONDARY-color: rgba(26, 115, 232, 1); /* brand secondary color */ - --MAIN-TOPBAR-BORDER-color: rgba( 210, 210, 210, 1 ); /* border color between topbar and content */ - --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hoverd link color of content */ - --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* background color of content */ - --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ - --MAIN-TITLES-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of h2-h6 titles and transparent box titles */ + --MAIN-TOPBAR-BORDER-color: rgba(210, 210, 210, 1); /* border color between topbar and content */ + --MAIN-LINK-HOVER-color: rgba(32, 40, 145, 1); /* hoverd link color of content */ + --MAIN-BG-color: rgba(255, 255, 255, 1); /* background color of content */ + --MAIN-TEXT-color: rgba(0, 0, 0, 1); /* text color of content and h1 titles */ + --MAIN-TITLES-TEXT-color: rgba(16, 16, 16, 1); /* text color of h2-h6 titles and transparent box titles */ - --CODE-theme: relearn-light; /* name of the chroma stylesheet file */ - --CODE-BLOCK-color: rgba( 39, 40, 34, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BG-color: rgba( 250, 250, 250, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ - --CODE-BLOCK-BORDER-color: rgba( 210, 210, 210, 1 ); /* border color of block code */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* text color of inline code */ - --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* background color of inline code */ - --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* border color of inline code */ + --CODE-theme: relearn-light; /* name of the chroma stylesheet file */ + --CODE-BLOCK-color: rgba(39, 40, 34, 1); /* fallback text color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BG-color: rgba(250, 250, 250, 1); /* fallback background color of block code; should be adjusted to your selected chroma style */ + --CODE-BLOCK-BORDER-color: rgba(210, 210, 210, 1); /* border color of block code */ + --CODE-INLINE-color: rgba(94, 94, 94, 1); /* text color of inline code */ + --CODE-INLINE-BG-color: rgba(255, 250, 233, 1); /* background color of inline code */ + --CODE-INLINE-BORDER-color: rgba(248, 232, 200, 1); /* border color of inline code */ - --BROWSER-theme: light; /* name of the theme for browser scrollbars of the main section */ - --MERMAID-theme: default; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-theme: light; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ - --OPENAPI-CODE-theme: idea; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ + --BROWSER-theme: light; /* name of the theme for browser scrollbars of the main section */ + --MERMAID-theme: default; /* name of the default Mermaid theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-theme: light; /* name of the default OpenAPI theme for this variant, can be overridden in hugo.toml */ + --OPENAPI-CODE-theme: idea; /* name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml */ - --MENU-BORDER-color: rgba( 210, 210, 210, 1 ); /* border color between menu and content */ - --MENU-TOPBAR-BORDER-color: rgba( 247, 247, 247, 1 ); /* border color of vertical line between menu and topbar */ - --MENU-TOPBAR-SEPARATOR-color: rgba( 210, 210, 210, 1 ); /* separator color of vertical line between menu and topbar */ - --MENU-HEADER-BG-color: transparent; /* background color of menu header */ - --MENU-HEADER-BORDER-color: transparent; /* border color between menu header and menu */ - --MENU-HEADER-SEPARATOR-color: rgba( 210, 210, 210, .66 ); /* separator color between menu header and menu */ + --MENU-BORDER-color: rgba(210, 210, 210, 1); /* border color between menu and content */ + --MENU-TOPBAR-BORDER-color: rgba(247, 247, 247, 1); /* border color of vertical line between menu and topbar */ + --MENU-TOPBAR-SEPARATOR-color: rgba(210, 210, 210, 1); /* separator color of vertical line between menu and topbar */ + --MENU-HEADER-BG-color: transparent; /* background color of menu header */ + --MENU-HEADER-BORDER-color: transparent; /* border color between menu header and menu */ + --MENU-HEADER-SEPARATOR-color: rgba(210, 210, 210, 0.66); /* separator color between menu header and menu */ - --MENU-HOME-LINK-color: rgba( 64, 64, 64, 1 ); /* home button color if configured */ - --MENU-HOME-LINK-HOVER-color: rgba( 26, 115, 232, 1 ); /* hoverd home button color if configured */ + --MENU-HOME-LINK-color: rgba(64, 64, 64, 1); /* home button color if configured */ + --MENU-HOME-LINK-HOVER-color: rgba(26, 115, 232, 1); /* hoverd home button color if configured */ - --MENU-SEARCH-color: rgba( 26, 115, 232, 1 ); /* text and icon color of search box */ - --MENU-SEARCH-BG-color: rgba( 255, 255, 255, 1 ); /* background color of search box */ - --MENU-SEARCH-BORDER-color: rgba( 210, 210, 210, .66 ); /* border color of search box */ + --MENU-SEARCH-color: rgba(26, 115, 232, 1); /* text and icon color of search box */ + --MENU-SEARCH-BG-color: rgba(255, 255, 255, 1); /* background color of search box */ + --MENU-SEARCH-BORDER-color: rgba(210, 210, 210, 0.66); /* border color of search box */ - --MENU-SECTIONS-BG-color: rgba( 134, 134, 134, .066 ); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ - --MENU-SECTIONS-ACTIVE-BG-color: transparent; /* background color of the active menu section */ - --MENU-SECTIONS-LINK-color: rgba( 16, 16, 16, 1 ); /* link color of menu topics */ - --MENU-SECTIONS-LINK-HOVER-color: rgba( 26, 115, 232, 1 ); /* hoverd link color of menu topics */ - --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 26, 115, 232, 1 ); /* text color of the displayed menu topic */ - --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* background color of the displayed menu topic */ - --MENU-SECTION-SEPARATOR-color: rgba( 210, 210, 210, .66 ); /* separator color between menu sections and menu footer */ + --MENU-SECTIONS-BG-color: rgba(134, 134, 134, 0.066); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ + --MENU-SECTIONS-ACTIVE-BG-color: transparent; /* background color of the active menu section */ + --MENU-SECTIONS-LINK-color: rgba(16, 16, 16, 1); /* link color of menu topics */ + --MENU-SECTIONS-LINK-HOVER-color: rgba(26, 115, 232, 1); /* hoverd link color of menu topics */ + --MENU-SECTION-ACTIVE-CATEGORY-color: rgba(26, 115, 232, 1); /* text color of the displayed menu topic */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba(255, 255, 255, 1); /* background color of the displayed menu topic */ + --MENU-SECTION-SEPARATOR-color: rgba(210, 210, 210, 0.66); /* separator color between menu sections and menu footer */ - --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* text color of colored box titles */ - --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* background color of colored boxes */ - --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of colored box content */ + --BOX-CAPTION-color: rgba(255, 255, 255, 1); /* text color of colored box titles */ + --BOX-BG-color: rgba(255, 255, 255, 0.833); /* background color of colored boxes */ + --BOX-TEXT-color: rgba(16, 16, 16, 1); /* text color of colored box content */ - --BOX-GREY-color: rgba( 210, 210, 210, 1 ); /* background color of grey boxes */ + --BOX-GREY-color: rgba(210, 210, 210, 1); /* background color of grey boxes */ } body a#R-logo, body a#R-logo:hover, body #R-logo svg, body #R-logo svg * { - color: var(--MENU-HOME-LINK-color); - fill: var(--MENU-HOME-LINK-color) !important; + color: var(--MENU-HOME-LINK-color); + fill: var(--MENU-HOME-LINK-color) !important; } diff --git a/assets/css/theme.css b/assets/css/theme.css index 0ccda83505..c7f81d1df7 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -3,130 +3,130 @@ /* until browsers don't let us set length values based on dppx, we need a way to calculate them ourself */ :root { - --dpr: 1; - --bpx: 1; - --bpx1: 1; + --dpr: 1; + --bpx: 1; + --bpx1: 1; } @media (min-resolution: 105dpi) { - :root { - --dpr: 1.1; - --bpx: 1.1; - --bpx1: calc(1/1.1); - } + :root { + --dpr: 1.1; + --bpx: 1.1; + --bpx1: calc(1 / 1.1); + } } @media (min-resolution: 115dpi) { - :root { - --dpr: 1.2; - --bpx: 1.2; - --bpx1: calc(1/1.2); - } + :root { + --dpr: 1.2; + --bpx: 1.2; + --bpx1: calc(1 / 1.2); + } } @media (min-resolution: 120dpi) { - :root { - --dpr: 1.25; - --bpx: 1.25; - --bpx1: calc(1/1.25); - } + :root { + --dpr: 1.25; + --bpx: 1.25; + --bpx1: calc(1 / 1.25); + } } @media (min-resolution: 128dpi) { - :root { - --dpr: 1.333; - --bpx: 1.333; - --bpx1: calc(1/1.333); - } + :root { + --dpr: 1.333; + --bpx: 1.333; + --bpx1: calc(1 / 1.333); + } } @media (min-resolution: 144dpi) { - :root { - --dpr: 1.5; - --bpx: 1.5; - --bpx1: calc(1/1.5); - } + :root { + --dpr: 1.5; + --bpx: 1.5; + --bpx1: calc(1 / 1.5); + } } @media (min-resolution: 160dpi) { - :root { - --dpr: 1.666; - --bpx: 1.666; - --bpx1: calc(1/1.666); - } + :root { + --dpr: 1.666; + --bpx: 1.666; + --bpx1: calc(1 / 1.666); + } } @media (min-resolution: 168dpi) { - :root { - --dpr: 1.75; - --bpx: 1.75; - --bpx1: calc(1/1.75); - } + :root { + --dpr: 1.75; + --bpx: 1.75; + --bpx1: calc(1 / 1.75); + } } @media (min-resolution: 192dpi) { - :root { - --dpr: 2; - --bpx: 1; - --bpx1: 1; - } + :root { + --dpr: 2; + --bpx: 1; + --bpx1: 1; + } } @media (min-resolution: 240dpi) { - :root { - --dpr: 2.5; - --bpx: 1.25; - --bpx1: calc(1/1.25); - } + :root { + --dpr: 2.5; + --bpx: 1.25; + --bpx1: calc(1 / 1.25); + } } @media (min-resolution: 288dpi) { - :root { - --dpr: 3; - --bpx: 1; - --bpx1: 1; - } + :root { + --dpr: 3; + --bpx: 1; + --bpx1: 1; + } } @media (min-resolution: 384dpi) { - :root { - --dpr: 4; - --bpx: 1; - --bpx1: 1; - } + :root { + --dpr: 4; + --bpx: 1; + --bpx1: 1; + } } @media (min-resolution: 480dpi) { - :root { - --dpr: 5; - --bpx: 1.25; - --bpx1: calc(1/1.25); - } + :root { + --dpr: 5; + --bpx: 1.25; + --bpx1: calc(1 / 1.25); + } } @media (min-resolution: 576dpi) { - :root { - --dpr: 6; - --bpx: 1.5; - --bpx1: calc(1/1.5); - } + :root { + --dpr: 6; + --bpx: 1.5; + --bpx1: calc(1 / 1.5); + } } @media (min-resolution: 768dpi) { - :root { - --dpr: 8; - --bpx: 1; - --bpx1: 1; - } + :root { + --dpr: 8; + --bpx: 1; + --bpx1: 1; + } } html { - color-scheme: only var(--INTERNAL-BROWSER-theme); - height: 100%; - width: 100%; + color-scheme: only var(--INTERNAL-BROWSER-theme); + height: 100%; + width: 100%; } body { - background-color: var(--INTERNAL-MAIN-BG-color); - color: var(--INTERNAL-MAIN-TEXT-color); - display: flex; - flex-direction: row-reverse; /* to allow body to have initial focus for PS in some browsers and better SEO and a11y */ - font-size: 1.015625rem; - font-variation-settings: var(--INTERNAL-MAIN-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-font-weight); - font-family: var(--INTERNAL-MAIN-font); - height: 100%; - justify-content: flex-end; - letter-spacing: var(--INTERNAL-MAIN-letter-spacing); - line-height: 1.574; - /* overflow: hidden; PSC removed for #242 #243 #244; to avoid browser scrollbar to flicker before we create our own */ - width: 100%; + background-color: var(--INTERNAL-MAIN-BG-color); + color: var(--INTERNAL-MAIN-TEXT-color); + display: flex; + flex-direction: row-reverse; /* to allow body to have initial focus for PS in some browsers and better SEO and a11y */ + font-size: 1.015625rem; + font-variation-settings: var(--INTERNAL-MAIN-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-font-weight); + font-family: var(--INTERNAL-MAIN-font); + height: 100%; + justify-content: flex-end; + letter-spacing: var(--INTERNAL-MAIN-letter-spacing); + line-height: 1.574; + /* overflow: hidden; PSC removed for #242 #243 #244; to avoid browser scrollbar to flicker before we create our own */ + width: 100%; } b, @@ -134,25 +134,25 @@ strong, label, th, blockquote cite { - font-weight: var(--INTERNAL-MAIN-BOLD-font-weight); + font-weight: var(--INTERNAL-MAIN-BOLD-font-weight); } ul { - list-style: disc; + list-style: disc; } dt { - font-style: italic; + font-style: italic; } dd { - display: list-item; - list-style: circle; + display: list-item; + list-style: circle; } a, -.topbar-button button{ - color: var(--INTERNAL-MAIN-LINK-color); +.topbar-button button { + color: var(--INTERNAL-MAIN-LINK-color); } a:hover, @@ -160,363 +160,363 @@ a:active, a:focus, .topbar-button button:hover, .topbar-button button:active, -.topbar-button button:focus{ - color: var(--INTERNAL-MAIN-LINK-HOVER-color); +.topbar-button button:focus { + color: var(--INTERNAL-MAIN-LINK-HOVER-color); } -.default-animation{ - transition: all 0.35s ease; +.default-animation { + transition: all 0.35s ease; } #R-sidebar { - background: var(--INTERNAL-MENU-SECTIONS-BG-color); - display: flex; - flex-basis: auto; - flex-direction: column; - flex-grow: 0; - flex-shrink: 0; - font-size: .953125rem; - height: 100%; - inset-inline-start: 0; - line-height: 1.574; - min-height: 100%; - position: fixed; - min-width: var(--INTERNAL-MENU-WIDTH-L); - max-width: var(--INTERNAL-MENU-WIDTH-L); - width: var(--INTERNAL-MENU-WIDTH-L); + background: var(--INTERNAL-MENU-SECTIONS-BG-color); + display: flex; + flex-basis: auto; + flex-direction: column; + flex-grow: 0; + flex-shrink: 0; + font-size: 0.953125rem; + height: 100%; + inset-inline-start: 0; + line-height: 1.574; + min-height: 100%; + position: fixed; + min-width: var(--INTERNAL-MENU-WIDTH-L); + max-width: var(--INTERNAL-MENU-WIDTH-L); + width: var(--INTERNAL-MENU-WIDTH-L); } -#R-sidebar a{ - text-decoration: none; +#R-sidebar a { + text-decoration: none; } #R-header-wrapper { - background-color: var(--INTERNAL-MENU-HEADER-BG-color); - color: var(--INTERNAL-MENU-SEARCH-color); - text-align: center; - padding: 1rem; - position: relative; + background-color: var(--INTERNAL-MENU-HEADER-BG-color); + color: var(--INTERNAL-MENU-SEARCH-color); + text-align: center; + padding: 1rem; + position: relative; } #R-header { - border-block-end: 1px solid transparent; - position: relative; - z-index: 1; + border-block-end: 1px solid transparent; + position: relative; + z-index: 1; } #R-header a { - display: inline-block; + display: inline-block; } .searchbox { - background-color: var(--INTERNAL-MENU-SEARCH-BG-color); - border-color: var(--INTERNAL-MENU-SEARCH-BORDER-color); - border-radius: 4px; - border-style: solid; - border-width: 1px; - position: relative; - margin-top: 1rem; + background-color: var(--INTERNAL-MENU-SEARCH-BG-color); + border-color: var(--INTERNAL-MENU-SEARCH-BORDER-color); + border-radius: 4px; + border-style: solid; + border-width: 1px; + position: relative; + margin-top: 1rem; } .searchbox > :first-child { - inset-inline-start: .5rem; - position: absolute; + inset-inline-start: 0.5rem; + position: absolute; } .searchbox > button { - -webkit-appearance: none; - appearance: none; - background-color: transparent; - border: 0; - margin: 0; - padding: 0; - top: .25rem; + -webkit-appearance: none; + appearance: none; + background-color: transparent; + border: 0; + margin: 0; + padding: 0; + top: 0.25rem; } .searchbox > i { - top: .45rem; + top: 0.45rem; } .searchbox > :last-child { - inset-inline-end: .5rem; - position: absolute; + inset-inline-end: 0.5rem; + position: absolute; } #R-sidebar .searchbox > :first-child, -#R-sidebar .searchbox > :last-child{ - color: var(--INTERNAL-MENU-SEARCH-color); - opacity: .65; +#R-sidebar .searchbox > :last-child { + color: var(--INTERNAL-MENU-SEARCH-color); + opacity: 0.65; } #R-sidebar .searchbox button:hover { - opacity: 1; + opacity: 1; } .searchbox input { - display: inline-block; - width: 100%; - height: 1.875rem; - background: transparent; - border: 0; - padding-bottom: 0; - padding-inline-end: 1.6rem; - padding-inline-start: 1.8rem; - padding-top: 0; - margin: 0; + display: inline-block; + width: 100%; + height: 1.875rem; + background: transparent; + border: 0; + padding-bottom: 0; + padding-inline-end: 1.6rem; + padding-inline-start: 1.8rem; + padding-top: 0; + margin: 0; } -.searchbox input::-webkit-input-placeholder{ - color: var(--INTERNAL-MENU-SEARCH-color); +.searchbox input::-webkit-input-placeholder { + color: var(--INTERNAL-MENU-SEARCH-color); } .searchbox input::placeholder { - color: var(--INTERNAL-MENU-SEARCH-color); - opacity: .45; + color: var(--INTERNAL-MENU-SEARCH-color); + opacity: 0.45; } #R-content-wrapper { - --ps-rail-hover-color: rgba( 176, 176, 176, .25 ); - display: flex; - flex-direction: column; - flex: 1; /* fill rest of vertical space */ - overflow: hidden; - position: relative; /* PS */ - z-index: 100; + --ps-rail-hover-color: rgba(176, 176, 176, 0.25); + display: flex; + flex-direction: column; + flex: 1; /* fill rest of vertical space */ + overflow: hidden; + position: relative; /* PS */ + z-index: 100; } #R-sidebar .padding { - padding: 0 1rem; + padding: 0 1rem; } .footerFooter { - font-size: .8125rem; - padding-top: 2rem; - padding-bottom: .75rem; - text-align: center; + font-size: 0.8125rem; + padding-top: 2rem; + padding-bottom: 0.75rem; + text-align: center; } .footerFooter > * { - margin: 0 auto; + margin: 0 auto; } #R-footer { - color: var(--INTERNAL-MENU-SECTIONS-LINK-color); + color: var(--INTERNAL-MENU-SECTIONS-LINK-color); } #R-footer > hr:first-child { - margin-top: 0; + margin-top: 0; } /* increase specifity to override following #R-content-wrapper hr style */ #R-footer > hr:nth-child(n) { - margin-left: 0; - margin-right: 0; + margin-left: 0; + margin-right: 0; } #R-sidebar .R-sidebarmenu > ul { - margin-top: 1rem; + margin-top: 1rem; } #R-sidebar .R-sidebarmenu > .nav-title ~ ul { - margin-top: .8rem; + margin-top: 0.8rem; } #R-sidebar ul { - list-style: none; - padding: 0; - margin: 0; + list-style: none; + padding: 0; + margin: 0; } #R-sidebar ul li { - padding: 0; + padding: 0; } #R-sidebar ul li.visited + span { - margin-inline-end: 1rem; + margin-inline-end: 1rem; } #R-sidebar ul li .read-icon { - display: none; - font-size: .8125rem; - inset-inline-end: 1rem; - margin: .25rem 0 0 0; - min-width: 1rem; - position: absolute; + display: none; + font-size: 0.8125rem; + inset-inline-end: 1rem; + margin: 0.25rem 0 0 0; + min-width: 1rem; + position: absolute; } #R-sidebar ul li > a .read-icon { - color: var(--INTERNAL-MENU-VISITED-color); + color: var(--INTERNAL-MENU-VISITED-color); } #R-sidebar ul li.visited > a .read-icon { - display: inline; + display: inline; } #R-sidebar .nav-title { - color: var(--INTERNAL-MENU-SECTIONS-LINK-color); - font-size: 2rem; - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H1-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); - line-height: 110%; - margin: 1.2rem 0 .8rem 0; - padding-inline-start: 1rem; - text-rendering: optimizeLegibility; - text-transform: uppercase; + color: var(--INTERNAL-MENU-SECTIONS-LINK-color); + font-size: 2rem; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H1-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); + line-height: 110%; + margin: 1.2rem 0 0.8rem 0; + padding-inline-start: 1rem; + text-rendering: optimizeLegibility; + text-transform: uppercase; } #R-sidebar .footermargin { - flex-grow: 1; + flex-grow: 1; } #R-content-wrapper hr { - border-color: var(--INTERNAL-MENU-SECTION-SEPARATOR-color); - border-bottom-style: solid; - border-bottom-width: 1px; - margin: 1.5rem 1rem 1rem 1rem; + border-color: var(--INTERNAL-MENU-SECTION-SEPARATOR-color); + border-bottom-style: solid; + border-bottom-width: 1px; + margin: 1.5rem 1rem 1rem 1rem; } article .R-taxonomy.tags { - --VARIABLE-TAGS-color: var(--INTERNAL-MAIN-BG-color); - --VARIABLE-TAGS-BG-color: var(--VARIABLE-BOX-color); - margin-left: 1rem; - margin-top: 1rem; + --VARIABLE-TAGS-color: var(--INTERNAL-MAIN-BG-color); + --VARIABLE-TAGS-BG-color: var(--VARIABLE-BOX-color); + margin-left: 1rem; + margin-top: 1rem; } article .R-taxonomy.tags ul > li ~ li:before { - content: " " + content: ' '; } article .R-taxonomy.tags a.term-link { - background-color: var(--VARIABLE-TAGS-BG-color); - border-bottom-right-radius: 3px; - border-top-right-radius: 3px; - box-shadow: 0 1px 2px rgba( 0, 0, 0, .2 ); - color: var(--VARIABLE-TAGS-color); - display: inline-block; - font-size: 0.8em; - font-weight: var(--INTERNAL-MAIN-TITLES-font-weight); - line-height: 2em; - margin: 0 0 8px -1px; - margin-inline-end: 16px; - padding: 0 10px 0 12px; - position: relative; + background-color: var(--VARIABLE-TAGS-BG-color); + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + color: var(--VARIABLE-TAGS-color); + display: inline-block; + font-size: 0.8em; + font-weight: var(--INTERNAL-MAIN-TITLES-font-weight); + line-height: 2em; + margin: 0 0 8px -1px; + margin-inline-end: 16px; + padding: 0 10px 0 12px; + position: relative; } article .R-taxonomy.tags a.term-link:before { - border-color: transparent; - border-right-color: var(--VARIABLE-TAGS-BG-color); - border-style: solid; - border-width: 1em 1em 1em 0; - content: ""; - left: -1em; - height: 0; - position: absolute; - top:0; - width: 0; + border-color: transparent; + border-right-color: var(--VARIABLE-TAGS-BG-color); + border-style: solid; + border-width: 1em 1em 1em 0; + content: ''; + left: -1em; + height: 0; + position: absolute; + top: 0; + width: 0; } article .R-taxonomy.tags a.term-link:after { - background-color: var(--VARIABLE-TAGS-color); - border-radius: 100%; - content: ""; - left: 1px; - height: 5px; - position: absolute; - top: 10px; - width: 5px; + background-color: var(--VARIABLE-TAGS-color); + border-radius: 100%; + content: ''; + left: 1px; + height: 5px; + position: absolute; + top: 10px; + width: 5px; } article .R-taxonomy.tags a.term-link:hover:after { - width: 5px; + width: 5px; } #R-body { - display: flex; - flex-basis: 100%; - flex-direction: column; - flex-grow: 1; - flex-shrink: 0; - height: 100%; - margin-inline-start: var(--INTERNAL-MENU-WIDTH-L); - min-height: 100%; - overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */ - position: relative; /* PS */ - min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) ); - max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) ); - width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) ); - z-index: 70; + display: flex; + flex-basis: 100%; + flex-direction: column; + flex-grow: 1; + flex-shrink: 0; + height: 100%; + margin-inline-start: var(--INTERNAL-MENU-WIDTH-L); + min-height: 100%; + overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */ + position: relative; /* PS */ + min-width: calc(100% - var(--INTERNAL-MENU-WIDTH-L)); + max-width: calc(100% - var(--INTERNAL-MENU-WIDTH-L)); + width: calc(100% - var(--INTERNAL-MENU-WIDTH-L)); + z-index: 70; } #R-body img, #R-body figure > figcaption > h4, #R-body figure > figcaption > p, #R-body .video-container { - display: block; - margin-left: auto; - margin-right: auto; - padding: 0; - text-align: center; + display: block; + margin-left: auto; + margin-right: auto; + padding: 0; + text-align: center; } #R-body img:not(.lightbox-image).left { - margin-left: 0; + margin-left: 0; } #R-body img:not(.lightbox-image).right { - margin-right: 0; + margin-right: 0; } #R-body img:not(.lightbox-image).border, #R-body .video-container.border { - background-clip: padding-box; - border: 1px solid rgba( 134, 134, 134, .333 ); + background-clip: padding-box; + border: 1px solid rgba(134, 134, 134, 0.333); } #R-body img:not(.lightbox-image).shadow, #R-body .video-container.shadow { - box-shadow: 0 10px 30px rgba( 176, 176, 176, .666 ); + box-shadow: 0 10px 30px rgba(176, 176, 176, 0.666); } #R-body img:not(.lightbox-image).inline { - display: inline; - margin: 0; - vertical-align: bottom; + display: inline; + margin: 0; + vertical-align: bottom; } -#R-body figure > figcaption{ - margin: 0; +#R-body figure > figcaption { + margin: 0; } -#R-body figure > figcaption > h4{ - font-size: 1.0rem; - font-weight: 500; - margin: 0; +#R-body figure > figcaption > h4 { + font-size: 1rem; + font-weight: 500; + margin: 0; } -#R-body figure > figcaption > p{ - font-size: .85rem; - font-weight: 300; - margin-top: .15rem; +#R-body figure > figcaption > p { + font-size: 0.85rem; + font-weight: 300; + margin-top: 0.15rem; } -#R-body figure > figcaption > h4 + p{ - margin-top: 0; +#R-body figure > figcaption > h4 + p { + margin-top: 0; } #R-body-inner { - display: flex; - flex: auto; - flex-direction: column; - overflow-y: auto; - padding: 0 3.25rem 4rem 3.25rem; - position: relative; /* PS */ + display: flex; + flex: auto; + flex-direction: column; + overflow-y: auto; + padding: 0 3.25rem 4rem 3.25rem; + position: relative; /* PS */ } @media screen and (max-width: 59.999rem) { - #R-body-inner { - padding: 0 2rem 1rem 2rem; - } + #R-body-inner { + padding: 0 2rem 1rem 2rem; + } } @media screen and (max-width: 47.999rem) { - #R-body-inner { - padding: 0 1.25rem .375rem 1.25rem; - } + #R-body-inner { + padding: 0 1.25rem 0.375rem 1.25rem; + } } #R-topbar a:hover:empty, @@ -540,7 +540,7 @@ article a:focus, article a:hover .copy-to-clipboard, article a:active .copy-to-clipboard, article a:focus .copy-to-clipboard { - text-decoration: underline; + text-decoration: underline; } .topbar-content a:hover, .topbar-content a:active, @@ -553,275 +553,277 @@ article a:active .copy-to-clipboard, article a:focus .copy-to-clipboard, article a.lightbox-back:hover > img:only-child:empty, article a.lightbox-back:active > img:only-child:empty, -article a.lightbox-back:focus > img:only-child:empty -article .btn > button:hover, +article a.lightbox-back:focus > img:only-child:empty article .btn > button:hover, article .btn > button:active, -article .btn > button:focus{ - outline: none; +article .btn > button:focus { + outline: none; } article a:hover > img:only-child:empty, article a:active > img:only-child:empty, -article a:focus > img:only-child:empty{ - outline: .15rem solid var(--INTERNAL-MAIN-LINK-HOVER-color); +article a:focus > img:only-child:empty { + outline: 0.15rem solid var(--INTERNAL-MAIN-LINK-HOVER-color); } -#R-body-inner:focus-visible{ - /* remove focus indicator for programatically set focus */ - outline: none; +#R-body-inner:focus-visible { + /* remove focus indicator for programatically set focus */ + outline: none; } #R-body h1 + hr { - margin-bottom: 2rem; - margin-top: -1rem; + margin-bottom: 2rem; + margin-top: -1rem; } #R-body .flex-block-wrapper { - margin-left: auto; - margin-right: auto; - max-width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem ); - width: 100%; + margin-left: auto; + margin-right: auto; + max-width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem); + width: 100%; } -body:not(.print) #R-body .flex-block-wrapper:has( article.narrow ) { - max-width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem ); +body:not(.print) #R-body .flex-block-wrapper:has(article.narrow) { + max-width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem); } /* we limit width if we have large screens */ body.main-width-max #R-body .flex-block-wrapper { - width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem ); + width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem); } -body.main-width-max:not(.print) #R-body .flex-block-wrapper:has( article.narrow ) { - width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem ); +body.main-width-max:not(.print) #R-body .flex-block-wrapper:has(article.narrow) { + width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem); } -body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow ) { - padding: 0 9.75rem 2rem 9.75rem; +body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow) { + padding: 0 9.75rem 2rem 9.75rem; } @media screen and (max-width: 59.999rem) { - body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow ) { - padding: 0 6.5rem 1rem 6.5rem; - } + body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow) { + padding: 0 6.5rem 1rem 6.5rem; + } } @media screen and (max-width: 47.999rem) { - body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow ) { - padding: 0 3.25rem .375rem 3.25rem; - } + body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow) { + padding: 0 3.25rem 0.375rem 3.25rem; + } } body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow p { - font-size: 1.2rem; - text-align: justify; + font-size: 1.2rem; + text-align: justify; } mark { - background: transparent; - background-image: linear-gradient( - to right, - color-mix( in srgb, var(--INTERNAL-ACCENT-color) 20%, transparent ), - color-mix( in srgb, var(--INTERNAL-ACCENT-color) 90%, transparent ) 4%, - color-mix( in srgb, var(--INTERNAL-ACCENT-color) 40%, transparent ) - ); - border-radius: 0.8em 0.3rem; - -webkit-box-decoration-break: clone; - box-decoration-break: clone; - color: rgba( 0, 0, 0, 1 ); - -webkit-print-color-adjust: exact; - color-adjust: exact; - margin: 0 -0.4rem; - padding: 0.1em 0.4rem; + background: transparent; + background-image: linear-gradient(to right, color-mix(in srgb, var(--INTERNAL-ACCENT-color) 20%, transparent), color-mix(in srgb, var(--INTERNAL-ACCENT-color) 90%, transparent) 4%, color-mix(in srgb, var(--INTERNAL-ACCENT-color) 40%, transparent)); + border-radius: 0.8em 0.3rem; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + color: rgba(0, 0, 0, 1); + -webkit-print-color-adjust: exact; + color-adjust: exact; + margin: 0 -0.4rem; + padding: 0.1em 0.4rem; } kbd { - background-color: rgba( 134, 134, 134, .166 ); - border-color: rgba( 134, 134, 134, .5 ); - border-radius: 0.25rem; - border-style: solid; - border-width: 1px; - box-shadow: 0 .0625rem 0 .0625rem rgba( 134, 134, 134, .5 ); - color: var(--INTERNAL-TEXT-color); - -webkit-print-color-adjust: exact; - color-adjust: exact; - line-height: 1; - min-width: 0.75rem; - padding: .125rem .3125rem .125rem .3125rem; - position: relative; - text-align: center; - top: -.125rem; + background-color: rgba(134, 134, 134, 0.166); + border-color: rgba(134, 134, 134, 0.5); + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + box-shadow: 0 0.0625rem 0 0.0625rem rgba(134, 134, 134, 0.5); + color: var(--INTERNAL-TEXT-color); + -webkit-print-color-adjust: exact; + color-adjust: exact; + line-height: 1; + min-width: 0.75rem; + padding: 0.125rem 0.3125rem 0.125rem 0.3125rem; + position: relative; + text-align: center; + top: -0.125rem; } h1 { - color: var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); - font-size: 3.25rem; - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H1-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); - margin: 0.85rem 0 1rem 0; - /* big titles cause a horizontal scrollbar - fixing this by wrapping text */ - overflow-wrap: break-word; - overflow-x: hidden; - text-align: center; - text-rendering: optimizeLegibility; - text-transform: uppercase; + color: var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); + font-size: 3.25rem; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H1-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); + margin: 0.85rem 0 1rem 0; + /* big titles cause a horizontal scrollbar - fixing this by wrapping text */ + overflow-wrap: break-word; + overflow-x: hidden; + text-align: center; + text-rendering: optimizeLegibility; + text-transform: uppercase; } body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 { - border-bottom: 4px solid rgba( 134, 134, 134, .125 ); - font-size: 3.5rem; + border-bottom: 4px solid rgba(134, 134, 134, 0.125); + font-size: 3.5rem; } @media only screen and (min-width: 48rem) and (max-width: 59.999rem) { - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 { - font-size: 2.8rem; - } + body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 { + font-size: 2.8rem; + } } @media only screen and (max-width: 47.999rem) { - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 { - font-size: 2.5rem; - } + body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 { + font-size: 2.5rem; + } } .article-subheading { - color: var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); - font-size: 1.8rem; - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H1-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); - text-align: center; + color: var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); + font-size: 1.8rem; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H1-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); + text-align: center; } #R-body-inner > .flex-block-wrapper article > .article-subheading { - margin-top: 0; + margin-top: 0; } body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { - margin-top: 2rem; + margin-top: 2rem; } @media screen and (max-width: 59.999rem) { - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { - margin-top: 1rem; - } + body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { + margin-top: 1rem; + } } @media screen and (max-width: 47.999rem) { - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { - margin-top: .375rem; - } + body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { + margin-top: 0.375rem; + } } - h2 { - color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); - font-size: 2.2rem; - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H2-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + font-size: 2.2rem; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); } h3 { - color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); - font-size: 1.8rem; - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H3-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); + font-size: 1.8rem; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H3-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); } h4 { - color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); - font-size: 1.85rem; - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-size: 1.85rem; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } h5 { - color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); - font-size: 1.6rem; - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H5-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); + font-size: 1.6rem; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H5-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); } h6 { - color: var(--INTERNAL-MAIN-TITLES-H6-TEXT-color); - font-size: 1.3rem; - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H6-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H6-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H6-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H6-letter-spacing); + color: var(--INTERNAL-MAIN-TITLES-H6-TEXT-color); + font-size: 1.3rem; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H6-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H6-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H6-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H6-letter-spacing); } -h2, h3, .article-subheading, h4, h5, h6 { - margin: 1.5rem 0 1rem 0; - /* big titles cause a horizontal scrollbar - fixing this by wrapping text */ - overflow-wrap: break-word; - overflow-x: hidden; - text-rendering: optimizeLegibility; +h2, +h3, +.article-subheading, +h4, +h5, +h6 { + margin: 1.5rem 0 1rem 0; + /* big titles cause a horizontal scrollbar - fixing this by wrapping text */ + overflow-wrap: break-word; + overflow-x: hidden; + text-rendering: optimizeLegibility; } -h2, h3, h4, h5, h6 { - /* leave space for anchor to avoid overflow */ - padding-inline-end: 2rem; +h2, +h3, +h4, +h5, +h6 { + /* leave space for anchor to avoid overflow */ + padding-inline-end: 2rem; } blockquote { - border-inline-start: .6rem solid rgba( 134, 134, 134, .4 ); + border-inline-start: 0.6rem solid rgba(134, 134, 134, 0.4); } blockquote p { - font-size: 1.06640625rem; - font-style: italic; - opacity: .75; - text-align: justify; + font-size: 1.06640625rem; + font-style: italic; + opacity: 0.75; + text-align: justify; } blockquote cite { - display: block; - opacity: .5; - padding-top: .5rem; - text-align: end; + display: block; + opacity: 0.5; + padding-top: 0.5rem; + text-align: end; } /* colored boxes */ div.box { - background-color: var(--VARIABLE-BOX-color); - border-color: var(--VARIABLE-BOX-color); - margin: 1.5rem 0; - border-style: solid; - border-width: 1px; + background-color: var(--VARIABLE-BOX-color); + border-color: var(--VARIABLE-BOX-color); + margin: 1.5rem 0; + border-style: solid; + border-width: 1px; } div.box > .box-label { - color: var(--VARIABLE-BOX-CAPTION-color); - font-weight: 500; - margin-left: .6rem; - margin-right: .6rem; - padding: .2rem 0; + color: var(--VARIABLE-BOX-CAPTION-color); + font-weight: 500; + margin-left: 0.6rem; + margin-right: 0.6rem; + padding: 0.2rem 0; } div.box > .box-content { - background-color: var(--VARIABLE-BOX-BG-color); - color: var(--VARIABLE-BOX-TEXT-color); - padding-top: 1rem; - padding-bottom: 1rem; - padding-left: 1rem; - padding-right: 1rem; + background-color: var(--VARIABLE-BOX-BG-color); + color: var(--VARIABLE-BOX-TEXT-color); + padding-top: 1rem; + padding-bottom: 1rem; + padding-left: 1rem; + padding-right: 1rem; } /* remove margin if only a single code block is contained in the tab */ -#R-body .box-content:not(:has(> p)):has(> div[class*="highlight"]:only-of-type), -#R-body .box-content:has(> p:empty):has(> div[class*="highlight"]:only-of-type){ - padding: 0; +#R-body .box-content:not(:has(> p)):has(> div[class*='highlight']:only-of-type), +#R-body .box-content:has(> p:empty):has(> div[class*='highlight']:only-of-type) { + padding: 0; } /* remove border from a code block if single */ -#R-body .box-content:not(:has(> p)) > div[class*="highlight"]:only-of-type > pre, -#R-body .box-content:has(> p:empty) > div[class*="highlight"]:only-of-type > pre{ - border: 0; +#R-body .box-content:not(:has(> p)) > div[class*='highlight']:only-of-type > pre, +#R-body .box-content:has(> p:empty) > div[class*='highlight']:only-of-type > pre { + border: 0; } p:empty { - /* in case of image render hook, Hugo may generate empty

s that we want to ignore */ - display: none; + /* in case of image render hook, Hugo may generate empty

s that we want to ignore */ + display: none; } /* in case of image render hook, Hugo may generate empty

s that we want to ignore as well, so a simple :first-child or :last-child is not enough */ @@ -835,7 +837,7 @@ p:empty { #R-body div.expand > .expand-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)), #R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)), #R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)) { - margin-top: 0; + margin-top: 0; } #R-body table th > :nth-last-child(1 of :not(:empty)), @@ -853,28 +855,28 @@ p:empty { #R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)), #R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)), #R-body div.tab-content > .tab-content-text > div:last-child pre:not(.mermaid) { - margin-bottom: 0; + margin-bottom: 0; } /* resources shortcode */ div.attachments .box-content { - display: block; - margin: 0; - padding-inline-start: 1.75rem; + display: block; + margin: 0; + padding-inline-start: 1.75rem; } /* Children shortcode */ .children p { - margin-bottom: 0; - margin-top: 0; - padding-bottom: 0; - padding-top: 0; + margin-bottom: 0; + margin-top: 0; + padding-bottom: 0; + padding-top: 0; } .children-li p { - font-style: italic; + font-style: italic; } .children-h2 p, @@ -882,10 +884,10 @@ div.attachments .box-content { .children-h4 p, .children-h5 p, .children-h6 p { - margin-bottom: 0; - margin-top: 0; - padding-bottom: 0; - padding-top: 0; + margin-bottom: 0; + margin-top: 0; + padding-bottom: 0; + padding-top: 0; } #R-body-inner .children h2, @@ -893,227 +895,227 @@ div.attachments .box-content { #R-body-inner .children h4, #R-body-inner .children h5, #R-body-inner .children h6 { - margin-bottom: 0; - margin-top: 1rem; + margin-bottom: 0; + margin-top: 1rem; } #R-body-inner ul.children-h2, #R-body-inner ul.children-h3, #R-body-inner ul.children-h4, #R-body-inner ul.children-h5, #R-body-inner ul.children-h6 { - /* if we display children with style=h2 but without a containerstyle + /* if we display children with style=h2 but without a containerstyle a ul will be used for structuring; we remove default indention for uls in this case */ - padding-inline-start: 0; + padding-inline-start: 0; } code, kbd, pre:not(.mermaid), samp { - font-size: .934375rem; - font-variation-settings: var(--INTERNAL-CODE-font-variation-settings); - font-weight: var(--INTERNAL-CODE-font-weight); - font-family: var(--INTERNAL-CODE-font); - letter-spacing: var(--INTERNAL-CODE-letter-spacing); - vertical-align: baseline; + font-size: 0.934375rem; + font-variation-settings: var(--INTERNAL-CODE-font-variation-settings); + font-weight: var(--INTERNAL-CODE-font-weight); + font-family: var(--INTERNAL-CODE-font); + letter-spacing: var(--INTERNAL-CODE-letter-spacing); + vertical-align: baseline; } code { - background-color: var(--INTERNAL-CODE-INLINE-BG-color); - border-color: var(--INTERNAL-CODE-INLINE-BORDER-color); - border-radius: 2px; - border-style: solid; - border-width: 1px; - color: var(--INTERNAL-CODE-INLINE-color); - -webkit-print-color-adjust: economy; - color-adjust: economy; - padding-left: 2px; - padding-right: 2px; - white-space: nowrap; + background-color: var(--INTERNAL-CODE-INLINE-BG-color); + border-color: var(--INTERNAL-CODE-INLINE-BORDER-color); + border-radius: 2px; + border-style: solid; + border-width: 1px; + color: var(--INTERNAL-CODE-INLINE-color); + -webkit-print-color-adjust: economy; + color-adjust: economy; + padding-left: 2px; + padding-right: 2px; + white-space: nowrap; } span.copy-to-clipboard { - display: inline-block; - white-space: nowrap; + display: inline-block; + white-space: nowrap; } code.copy-to-clipboard-code { - border-end-end-radius: 0; - border-start-end-radius: 0; - border-inline-end-width: 0; + border-end-end-radius: 0; + border-start-end-radius: 0; + border-inline-end-width: 0; } pre:not(.mermaid) { - background-color: var(--INTERNAL-CODE-BLOCK-BG-color); - border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color); - border-radius: 2px; - border-style: solid; - border-width: 1px; - color: var(--INTERNAL-CODE-BLOCK-color); - -webkit-print-color-adjust: economy; - color-adjust: economy; - line-height: 1.15; - padding: 1rem; - position: relative; + background-color: var(--INTERNAL-CODE-BLOCK-BG-color); + border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color); + border-radius: 2px; + border-style: solid; + border-width: 1px; + color: var(--INTERNAL-CODE-BLOCK-color); + -webkit-print-color-adjust: economy; + color-adjust: economy; + line-height: 1.15; + padding: 1rem; + position: relative; } /* pre:not(.mermaid):has( code ), */ /* the :has() operator isn't available in FF yet, so we patch this by JS */ pre:not(.mermaid).pre-code { - direction: ltr; - text-align: left; + direction: ltr; + text-align: left; } pre:not(.mermaid) code { - background-color: inherit; - border: 0; - color: inherit; - -webkit-print-color-adjust: economy; - color-adjust: economy; - font-size: .9375rem; - margin: 0; - padding: 0; + background-color: inherit; + border: 0; + color: inherit; + -webkit-print-color-adjust: economy; + color-adjust: economy; + font-size: 0.9375rem; + margin: 0; + padding: 0; } -div.highlight{ - position: relative; +div.highlight { + position: relative; } /* we may have special treatment if highlight shortcode was used in table lineno mode */ -div.highlight > div{ - background-color: var(--INTERNAL-CODE-BLOCK-BG-color); - border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color); - border-style: solid; - border-width: 1px; +div.highlight > div { + background-color: var(--INTERNAL-CODE-BLOCK-BG-color); + border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color); + border-style: solid; + border-width: 1px; } /* remove default style for usual markdown tables */ -div.highlight > div table{ - background-color: transparent; - border-width: 0; - margin: 0; +div.highlight > div table { + background-color: transparent; + border-width: 0; + margin: 0; } -div.highlight > div td{ - border-width: 0; +div.highlight > div td { + border-width: 0; } #R-body div.highlight > div a { - line-height: inherit; + line-height: inherit; } #R-body div.highlight > div a:after { - display: none; + display: none; } /* disable selection for lineno cells */ -div.highlight > div td:first-child:not(:last-child){ - -webkit-user-select: none; - user-select: none; +div.highlight > div td:first-child:not(:last-child) { + -webkit-user-select: none; + user-select: none; } /* increase code column to full width if highlight shortcode was used in table lineno mode */ -div.highlight > div td:not(:first-child):last-child{ - width: 100%; +div.highlight > div td:not(:first-child):last-child { + width: 100%; } /* add scrollbars if highlight shortcode was used in table lineno mode */ -div.highlight > div table{ - display: block; - overflow: auto; +div.highlight > div table { + display: block; + overflow: auto; } -div.highlight:not(.wrap-code) pre:not(.mermaid){ - overflow: auto; +div.highlight:not(.wrap-code) pre:not(.mermaid) { + overflow: auto; } -div.highlight:not(.wrap-code) pre:not(.mermaid) code{ - white-space: pre; +div.highlight:not(.wrap-code) pre:not(.mermaid) code { + white-space: pre; } -div.highlight.wrap-code pre:not(.mermaid) code{ - white-space: pre-wrap; +div.highlight.wrap-code pre:not(.mermaid) code { + white-space: pre-wrap; } /* remove border from row cells if highlight shortcode was used in table lineno mode */ div.highlight > div td > pre:not(.mermaid) { - border-radius: 0; - border-width: 0; + border-radius: 0; + border-width: 0; } /* in case of table lineno mode we want to move each row closer together - besides the edges this usually applies only to wrapfix tables but it doesn't hurt for non-wrapfix tables too */ -div.highlight > div tr:not(:first-child) pre:not(.mermaid){ - padding-top: 0; +div.highlight > div tr:not(:first-child) pre:not(.mermaid) { + padding-top: 0; } -div.highlight > div tr:not(:last-child) pre:not(.mermaid){ - padding-bottom: 0; +div.highlight > div tr:not(:last-child) pre:not(.mermaid) { + padding-bottom: 0; } /* in case of table lineno mode we want to move each columns closer together on the inside */ -div.highlight > div td:first-child:not(:last-child) pre:not(.mermaid){ - padding-right: 0; +div.highlight > div td:first-child:not(:last-child) pre:not(.mermaid) { + padding-right: 0; } -div.highlight > div td:not(:first-child):last-child pre:not(.mermaid){ - padding-left: 0; +div.highlight > div td:not(:first-child):last-child pre:not(.mermaid) { + padding-left: 0; } hr { - border-bottom: 4px solid rgba( 134, 134, 134, .125 ); + border-bottom: 4px solid rgba(134, 134, 134, 0.125); } #R-body-inner pre:not(.mermaid) { - white-space: pre-wrap; + white-space: pre-wrap; } table { - background-color: var(--INTERNAL-MAIN-BG-color); - border: 1px solid rgba( 134, 134, 134, .333 ); - margin-bottom: 1rem; - margin-top: 1rem; - table-layout: auto; + background-color: var(--INTERNAL-MAIN-BG-color); + border: 1px solid rgba(134, 134, 134, 0.333); + margin-bottom: 1rem; + margin-top: 1rem; + table-layout: auto; } th, thead td { - background-color: rgba( 134, 134, 134, .166 ); - border: 1px solid rgba( 134, 134, 134, .333 ); - -webkit-print-color-adjust: exact; - color-adjust: exact; - padding: 0.5rem; + background-color: rgba(134, 134, 134, 0.166); + border: 1px solid rgba(134, 134, 134, 0.333); + -webkit-print-color-adjust: exact; + color-adjust: exact; + padding: 0.5rem; } td { - border: 1px solid rgba( 134, 134, 134, .333 ); - padding: 0.5rem; + border: 1px solid rgba(134, 134, 134, 0.333); + padding: 0.5rem; } tbody > tr:nth-child(even) > td { - background-color: rgba( 134, 134, 134, .045 ); + background-color: rgba(134, 134, 134, 0.045); } .tooltipped { - position: relative; + position: relative; } .tooltipped:after { - background: rgba( 0, 0, 0, 1 ); - border: 1px solid rgba( 119, 119, 119, 1 ); - border-radius: 3px; - color: rgba( 255, 255, 255, 1 ); - content: attr(aria-label); - display: none; - font-size: .6875rem; - -webkit-font-smoothing: subpixel-antialiased; - line-height: 1.5; - padding: 5px 8px; - pointer-events: none; - position: absolute; - text-align: center; - text-decoration: none; - text-shadow: none; - text-transform: none; - white-space: pre; - word-wrap: break-word; - z-index: 140; + background: rgba(0, 0, 0, 1); + border: 1px solid rgba(119, 119, 119, 1); + border-radius: 3px; + color: rgba(255, 255, 255, 1); + content: attr(aria-label); + display: none; + font-size: 0.6875rem; + -webkit-font-smoothing: subpixel-antialiased; + line-height: 1.5; + padding: 5px 8px; + pointer-events: none; + position: absolute; + text-align: center; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: pre; + word-wrap: break-word; + z-index: 140; } .tooltipped:before { - border: 5px solid transparent; - color: rgba( 0, 0, 0, 1 ); - content: ""; - display: none; - height: 0; - pointer-events: none; - position: absolute; - width: 0; - z-index: 150; + border: 5px solid transparent; + color: rgba(0, 0, 0, 1); + content: ''; + display: none; + height: 0; + pointer-events: none; + position: absolute; + width: 0; + z-index: 150; } .tooltipped:hover:before, @@ -1122,563 +1124,563 @@ tbody > tr:nth-child(even) > td { .tooltipped:active:after, .tooltipped:focus:before, .tooltipped:focus:after { - display: inline-block; - text-decoration: none; + display: inline-block; + text-decoration: none; } .tooltipped-s:after, .tooltipped-se:after, .tooltipped-sw:after { - margin-top: 5px; - right: 50%; - top: 100%; + margin-top: 5px; + right: 50%; + top: 100%; } .tooltipped-s:before, .tooltipped-se:before, .tooltipped-sw:before { - border-bottom-color: rgba( 0, 0, 0, .8 ); - bottom: -5px; - margin-right: -5px; - right: 50%; - top: auto; + border-bottom-color: rgba(0, 0, 0, 0.8); + bottom: -5px; + margin-right: -5px; + right: 50%; + top: auto; } .tooltipped-se:after { - left: 50%; - margin-left: -15px; - right: auto; + left: 50%; + margin-left: -15px; + right: auto; } .tooltipped-sw:after { - margin-right: -15px; + margin-right: -15px; } .tooltipped-n:after, .tooltipped-ne:after, .tooltipped-nw:after { - bottom: 100%; - margin-bottom: 5px; - right: 50%; + bottom: 100%; + margin-bottom: 5px; + right: 50%; } .tooltipped-n:before, .tooltipped-ne:before, .tooltipped-nw:before { - border-top-color: rgba( 0, 0, 0, .8 ); - bottom: auto; - margin-right: -5px; - right: 50%; - top: -5px; + border-top-color: rgba(0, 0, 0, 0.8); + bottom: auto; + margin-right: -5px; + right: 50%; + top: -5px; } .tooltipped-ne:after { - left: 50%; - margin-left: -15px; - right: auto; + left: 50%; + margin-left: -15px; + right: auto; } .tooltipped-nw:after { - margin-right: -15px; + margin-right: -15px; } .tooltipped-s:after, .tooltipped-n:after { - transform: translateX(50%); + transform: translateX(50%); } .tooltipped-w:after { - bottom: 50%; - margin-right: 5px; - right: 100%; - transform: translateY(50%); + bottom: 50%; + margin-right: 5px; + right: 100%; + transform: translateY(50%); } .tooltipped-w:before { - border-left-color: rgba( 0, 0, 0, .8 ); - bottom: 50%; - left: -5px; - margin-top: -5px; - top: 50%; + border-left-color: rgba(0, 0, 0, 0.8); + bottom: 50%; + left: -5px; + margin-top: -5px; + top: 50%; } .tooltipped-e:after { - bottom: 50%; - left: 100%; - margin-left: 5px; - transform: translateY(50%); + bottom: 50%; + left: 100%; + margin-left: 5px; + transform: translateY(50%); } .tooltipped-e:before { - border-right-color: rgba( 0, 0, 0, .8 ); - bottom: 50%; - margin-top: -5px; - right: -5px; - top: 50%; + border-right-color: rgba(0, 0, 0, 0.8); + bottom: 50%; + margin-top: -5px; + right: -5px; + top: 50%; } #R-topbar { - min-height: 3rem; - position: relative; - z-index: 170; + min-height: 3rem; + position: relative; + z-index: 170; } #R-topbar > .topbar-wrapper { - align-items: center; - background-color: rgba( 134, 134, 134, .066 ); - display: flex; - flex-basis: 100%; - flex-direction: row; - height: 100%; + align-items: center; + background-color: rgba(134, 134, 134, 0.066); + display: flex; + flex-basis: 100%; + flex-direction: row; + height: 100%; } .topbar-button { - display: inline-block; - position: relative; + display: inline-block; + position: relative; } .topbar-button:not([data-origin]) { - display: none; + display: none; } .topbar-button > .topbar-control { - display: inline-block; - padding-left: 1rem; - padding-right: 1rem; + display: inline-block; + padding-left: 1rem; + padding-right: 1rem; } .topbar-wrapper > .topbar-area-start > .topbar-button > .topbar-control { - border-inline-end: 1px solid rgba( 134, 134, 134, .333 ); + border-inline-end: 1px solid rgba(134, 134, 134, 0.333); } .topbar-wrapper > .topbar-area-end > .topbar-button > .topbar-control { - border-inline-start: 1px solid rgba( 134, 134, 134, .333 ); + border-inline-start: 1px solid rgba(134, 134, 134, 0.333); } .topbar-button > button:disabled i, .topbar-button > span i { - color: rgba( 134, 134, 134, .333 ); + color: rgba(134, 134, 134, 0.333); } -.topbar-button button{ - -webkit-appearance: none; - appearance: none; - background-color: transparent; +.topbar-button button { + -webkit-appearance: none; + appearance: none; + background-color: transparent; } .topbar-sidebar-divider { - border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color); - border-inline-start-style: solid; - border-inline-start-width: 1px; - margin-inline-end: -1px; - width: 1px; + border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color); + border-inline-start-style: solid; + border-inline-start-width: 1px; + margin-inline-end: -1px; + width: 1px; } @media screen and (max-width: 47.999rem) { - .topbar-sidebar-divider { - border-inline-start-color: transparent; - } + .topbar-sidebar-divider { + border-inline-start-color: transparent; + } } .topbar-sidebar-divider::after { - content: "\00a0"; + content: '\00a0'; } .topbar-wrapper > .topbar-area-start { - display: flex; - flex-direction: row; - flex-shrink: 0; + display: flex; + flex-direction: row; + flex-shrink: 0; } .topbar-wrapper > .topbar-area-end { - display: flex; - flex-direction: row; - flex-shrink: 0; + display: flex; + flex-direction: row; + flex-shrink: 0; } .topbar-wrapper > .topbar-hidden { - display: none; + display: none; } -html[dir="rtl"] .topbar-button-prev i, -html[dir="rtl"] .topbar-button-next i { - transform: scaleX(-1); +html[dir='rtl'] .topbar-button-prev i, +html[dir='rtl'] .topbar-button-next i { + transform: scaleX(-1); } .topbar-content { - top: .75rem; + top: 0.75rem; } .topbar-wrapper > .topbar-area-start .topbar-content { - inset-inline-start: 1.5rem; + inset-inline-start: 1.5rem; } .topbar-wrapper > .topbar-area-end .topbar-content { - inset-inline-end: 1.5rem; + inset-inline-end: 1.5rem; } -.topbar-content .topbar-content{ - /* we don't allow flyouts in flyouts; come on, don't get funny... */ - display: none; +.topbar-content .topbar-content { + /* we don't allow flyouts in flyouts; come on, don't get funny... */ + display: none; } .topbar-breadcrumbs { - flex-grow: 1; - margin: 0; - padding: 0 1rem; + flex-grow: 1; + margin: 0; + padding: 0 1rem; } @media screen and (max-width: 47.999rem) { - .topbar-breadcrumbs { - /* we just hide the breadcrumbs instead of display: none; + .topbar-breadcrumbs { + /* we just hide the breadcrumbs instead of display: none; this makes sure that the breadcrumbs are still usable for accessability */ - visibility: hidden; - } + visibility: hidden; + } } .breadcrumbs { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - white-space: nowrap; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + white-space: nowrap; } .breadcrumbs meta { - display: none; + display: none; } .breadcrumbs li { - display: inline-block; + display: inline-block; } -#R-body a[aria-disabled="true"] { - color: var(--INTERNAL-MAIN-TEXT-color); - pointer-events: none; - text-decoration: none; +#R-body a[aria-disabled='true'] { + color: var(--INTERNAL-MAIN-TEXT-color); + pointer-events: none; + text-decoration: none; } @media screen and (max-width: 59.999rem) { - #R-sidebar { - min-width: var(--INTERNAL-MENU-WIDTH-M); - max-width: var(--INTERNAL-MENU-WIDTH-M); - width: var(--INTERNAL-MENU-WIDTH-M); - } - #R-body { - margin-inline-start: var(--INTERNAL-MENU-WIDTH-M); - min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) ); - max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) ); - width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) ); - } + #R-sidebar { + min-width: var(--INTERNAL-MENU-WIDTH-M); + max-width: var(--INTERNAL-MENU-WIDTH-M); + width: var(--INTERNAL-MENU-WIDTH-M); + } + #R-body { + margin-inline-start: var(--INTERNAL-MENU-WIDTH-M); + min-width: calc(100% - var(--INTERNAL-MENU-WIDTH-M)); + max-width: calc(100% - var(--INTERNAL-MENU-WIDTH-M)); + width: calc(100% - var(--INTERNAL-MENU-WIDTH-M)); + } } @media screen and (max-width: 47.999rem) { - /* we don't support sidebar flyout in mobile */ - .mobile-support #R-sidebar { - inset-inline-start: calc( -1 * var(--INTERNAL-MENU-WIDTH-S) ); - min-width: var(--INTERNAL-MENU-WIDTH-S); - max-width: var(--INTERNAL-MENU-WIDTH-S); - width: var(--INTERNAL-MENU-WIDTH-S); - } - .mobile-support #navshow{ - display: inline; - } - .mobile-support #R-body { - min-width: 100%; - max-width: 100%; - width: 100%; - } - .mobile-support #R-body { - margin-inline-start: 0; - } - .mobile-support.sidebar-flyout { - overflow: hidden; - } - .mobile-support.sidebar-flyout #R-sidebar { - inset-inline-start: 0; - z-index: 90; - } - .mobile-support.sidebar-flyout #R-body { - margin-inline-start: var(--INTERNAL-MENU-WIDTH-S); - overflow: hidden; - } - .mobile-support.sidebar-flyout #R-body-overlay{ - background-color: rgba( 134, 134, 134, .5 ); - bottom: 0; - cursor: pointer; - height: 100vh; - left: 0; - position: absolute; - right: 0; - top: 0; - z-index: 190; - } + /* we don't support sidebar flyout in mobile */ + .mobile-support #R-sidebar { + inset-inline-start: calc(-1 * var(--INTERNAL-MENU-WIDTH-S)); + min-width: var(--INTERNAL-MENU-WIDTH-S); + max-width: var(--INTERNAL-MENU-WIDTH-S); + width: var(--INTERNAL-MENU-WIDTH-S); + } + .mobile-support #navshow { + display: inline; + } + .mobile-support #R-body { + min-width: 100%; + max-width: 100%; + width: 100%; + } + .mobile-support #R-body { + margin-inline-start: 0; + } + .mobile-support.sidebar-flyout { + overflow: hidden; + } + .mobile-support.sidebar-flyout #R-sidebar { + inset-inline-start: 0; + z-index: 90; + } + .mobile-support.sidebar-flyout #R-body { + margin-inline-start: var(--INTERNAL-MENU-WIDTH-S); + overflow: hidden; + } + .mobile-support.sidebar-flyout #R-body-overlay { + background-color: rgba(134, 134, 134, 0.5); + bottom: 0; + cursor: pointer; + height: 100vh; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 190; + } } .copy-to-clipboard-button { - background-color: var(--INTERNAL-CODE-INLINE-BG-color); - border-color: var(--INTERNAL-CODE-INLINE-BORDER-color); - border-start-start-radius: 0; - border-start-end-radius: 2px; - border-end-end-radius: 2px; - border-end-start-radius: 0; - border-style: solid; - border-width: 1px; - color: var(--INTERNAL-CODE-INLINE-color); - cursor: pointer; - font-size: .934375rem; - line-height: 1.15; + background-color: var(--INTERNAL-CODE-INLINE-BG-color); + border-color: var(--INTERNAL-CODE-INLINE-BORDER-color); + border-start-start-radius: 0; + border-start-end-radius: 2px; + border-end-end-radius: 2px; + border-end-start-radius: 0; + border-style: solid; + border-width: 1px; + color: var(--INTERNAL-CODE-INLINE-color); + cursor: pointer; + font-size: 0.934375rem; + line-height: 1.15; } .copy-to-clipboard-button:hover { - background-color: var(--INTERNAL-CODE-INLINE-color); - color: var(--INTERNAL-CODE-INLINE-BG-color); + background-color: var(--INTERNAL-CODE-INLINE-color); + color: var(--INTERNAL-CODE-INLINE-BG-color); } span > .copy-to-clipboard-button { - border-start-start-radius: 0; - border-start-end-radius: 2px; - border-end-end-radius: 2px; - border-end-start-radius: 0; + border-start-start-radius: 0; + border-start-end-radius: 2px; + border-end-end-radius: 2px; + border-end-start-radius: 0; } .copy-to-clipboard-button > i { - font-size: .859625rem; + font-size: 0.859625rem; } /* only show copy to clipboard on hover for code blocks if configured */ div.highlight .copy-to-clipboard-button { - display: none; + display: none; } @media (any-hover: none) { - /* if there is at least one input device that does not support hover, we want to force the copy button */ - div.highlight .copy-to-clipboard-button { - display: block; - } + /* if there is at least one input device that does not support hover, we want to force the copy button */ + div.highlight .copy-to-clipboard-button { + display: block; + } } div.highlight:hover .copy-to-clipboard-button { - display: block; + display: block; } .disableHoverBlockCopyToClipBoard div.highlight .copy-to-clipboard-button { - display: block; + display: block; } div.highlight > div table + .copy-to-clipboard-button > i, div.highlight pre:not(.mermaid) + .copy-to-clipboard-button > i, .copy-to-clipboard-code + .copy-to-clipboard-button > i { - padding-left: 5px; - padding-right: 5px; + padding-left: 5px; + padding-right: 5px; } div.highlight > div table + .copy-to-clipboard-button, div.highlight pre:not(.mermaid) + .copy-to-clipboard-button, pre:not(.mermaid) > .copy-to-clipboard-button { - background-color: rgba( 160, 160, 160, .2 ); - border-color: transparent; - border-radius: 2px; - border-style: solid; - border-width: 1px; - color: var(--INTERNAL-MAIN-LINK-color); - padding: 5px 3px; - position: absolute; - right: 4px; - top: 4px; + background-color: rgba(160, 160, 160, 0.2); + border-color: transparent; + border-radius: 2px; + border-style: solid; + border-width: 1px; + color: var(--INTERNAL-MAIN-LINK-color); + padding: 5px 3px; + position: absolute; + right: 4px; + top: 4px; } div.highlight > div table + .copy-to-clipboard-button:hover, div.highlight pre:not(.mermaid) + .copy-to-clipboard-button:hover, pre:not(.mermaid) .copy-to-clipboard-button:hover { - background-color: var(--INTERNAL-MAIN-LINK-color); - border-color: var(--INTERNAL-MAIN-LINK-color); - color: var(--INTERNAL-CODE-BLOCK-BG-color); + background-color: var(--INTERNAL-MAIN-LINK-color); + border-color: var(--INTERNAL-MAIN-LINK-color); + color: var(--INTERNAL-CODE-BLOCK-BG-color); } .disableInlineCopyToClipboard span > code.copy-to-clipboard-code + span.copy-to-clipboard-button { - display: none; + display: none; } .disableInlineCopyToClipboard span > code.copy-to-clipboard-code { - border-start-end-radius: 2px; - border-end-end-radius: 2px; - border-inline-end-width: 1px; + border-start-end-radius: 2px; + border-end-end-radius: 2px; + border-inline-end-width: 1px; } #R-homelinks { - background-color: var(--INTERNAL-MENU-HEADER-BORDER-color); - padding: 0; + background-color: var(--INTERNAL-MENU-HEADER-BORDER-color); + padding: 0; } #R-homelinks.homelinks a { - color: var(--INTERNAL-MENU-HOME-LINK-color); + color: var(--INTERNAL-MENU-HOME-LINK-color); } #R-homelinks.homelinks a:hover { - color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color); + color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color); } #R-homelinks ul { - margin: .5rem 0; + margin: 0.5rem 0; } #R-homelinks hr { - border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color); - border-bottom-style: solid; - border-bottom-width: 1px; - margin: 0 1rem 3px 1rem; + border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color); + border-bottom-style: solid; + border-bottom-width: 1px; + margin: 0 1rem 3px 1rem; } option { - color: initial; + color: initial; } .expand { - margin-bottom: 1rem; - margin-top: 1rem; - position: relative; + margin-bottom: 1rem; + margin-top: 1rem; + position: relative; } .expand > input { - -webkit-appearance: none; - appearance: none; - cursor: pointer; + -webkit-appearance: none; + appearance: none; + cursor: pointer; } .expand > label { - cursor: pointer; - display: inline; - font-weight: 300; - inset-inline-start: 0; - position: absolute; + cursor: pointer; + display: inline; + font-weight: 300; + inset-inline-start: 0; + position: absolute; } .expand:not(.box) > label { - color: var(--INTERNAL-MAIN-LINK-color); + color: var(--INTERNAL-MAIN-LINK-color); } .expand > input:active + label, .expand > input:focus + label, .expand > label:hover { - text-decoration: underline; + text-decoration: underline; } .expand:not(.box) > label:hover, .expand:not(.box) > label:active, .expand:not(.box) > label:focus, .expand:not(.box) > input:hover + label, .expand:not(.box) > input:active + label, -.expand:not(.box) > input:focus + label{ - color: var(--INTERNAL-MAIN-LINK-HOVER-color); +.expand:not(.box) > input:focus + label { + color: var(--INTERNAL-MAIN-LINK-HOVER-color); } .expand > label > .expander-icon { - font-size: .8rem; - width: .6rem; + font-size: 0.8rem; + width: 0.6rem; } .expand > .expand-content { - margin-inline-start: 1rem; - margin-top: .5rem; + margin-inline-start: 1rem; + margin-top: 0.5rem; } .box.expand > .expand-content { - margin-inline-start: 0; - margin-top: .4rem; + margin-inline-start: 0; + margin-top: 0.4rem; } .box.expand > .box-spacer { - margin-bottom: .4rem; + margin-bottom: 0.4rem; } /* closed expander */ .expand > input + label ~ .expand-content { - display: none; + display: none; } .expand > input + label > .fa-chevron-down { - display: none; + display: none; } .expand > input + label > .fa-chevron-right { - display: inline-block; + display: inline-block; } /* open expander */ .expand > input:checked + label ~ .expand-content { - display: block; + display: block; } .expand > input:checked + label > .fa-chevron-down { - display: inline-block; + display: inline-block; } .expand > input:checked + label > .fa-chevron-right { - display: none; + display: none; } /* adjust expander for RTL reading direction */ -html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right { - transform: scaleX(-1); +html[dir='rtl'] .expand > .expand-label > i.fa-chevron-right { + transform: scaleX(-1); } -#R-body footer.footline{ - margin-top: 2rem; +#R-body footer.footline { + margin-top: 2rem; } .headline i, -.footline i{ - margin-inline-start: .5rem; +.footline i { + margin-inline-start: 0.5rem; } .headline i:first-child, -.footline i:first-child{ - margin-inline-start: 0; +.footline i:first-child { + margin-inline-start: 0; } .mermaid-container { - margin-bottom: 1.7rem; - margin-top: 1.7rem; + margin-bottom: 1.7rem; + margin-top: 1.7rem; } .mermaid { - display: inline-block; - border: 1px solid transparent; - padding: .5rem .5rem 0 .5rem; - position: relative; - /* don't use display: none, as this will cause no renderinge by Mermaid */ - visibility: hidden; - width: 100%; + display: inline-block; + border: 1px solid transparent; + padding: 0.5rem 0.5rem 0 0.5rem; + position: relative; + /* don't use display: none, as this will cause no renderinge by Mermaid */ + visibility: hidden; + width: 100%; } .mermaid-container.zoomable > .mermaid:hover { - border-color: rgba( 134, 134, 134, .333 ); + border-color: rgba(134, 134, 134, 0.333); } .mermaid.mermaid-render { - visibility: visible; + visibility: visible; } .mermaid > svg { - /* remove inline height from generated diagram */ - height: initial !important; + /* remove inline height from generated diagram */ + height: initial !important; } .mermaid-container.zoomable > .mermaid > svg { - cursor: grab; + cursor: grab; } .svg-reset-button { - background-color: rgba( 160, 160, 160, .2 ); - border-color: transparent; - border-radius: 2px; - border-style: solid; - border-width: 1px; - color: var(--INTERNAL-MAIN-LINK-color); - cursor: pointer; - display: none; - font-size: .934375rem; - line-height: 1.15; - padding: 5px 3px; - position: absolute; - right: 4px; - top: 4px; + background-color: rgba(160, 160, 160, 0.2); + border-color: transparent; + border-radius: 2px; + border-style: solid; + border-width: 1px; + color: var(--INTERNAL-MAIN-LINK-color); + cursor: pointer; + display: none; + font-size: 0.934375rem; + line-height: 1.15; + padding: 5px 3px; + position: absolute; + right: 4px; + top: 4px; } .svg-reset-button:hover { - background-color: var(--INTERNAL-MAIN-LINK-color); - border-color: var(--INTERNAL-MAIN-LINK-color); - color: var(--INTERNAL-MAIN-BG-color); + background-color: var(--INTERNAL-MAIN-LINK-color); + border-color: var(--INTERNAL-MAIN-LINK-color); + color: var(--INTERNAL-MAIN-BG-color); } .mermaid:hover .svg-reset-button.zoomed { - display: block; + display: block; } @media (any-hover: some) { - /* if there is at least one input device that does not support hover, we want to force the reset button if zoomed */ - .svg-reset-button.zoomed { - display: block; - } + /* if there is at least one input device that does not support hover, we want to force the reset button if zoomed */ + .svg-reset-button.zoomed { + display: block; + } } .svg-reset-button > i { - font-size: .859625rem; - padding-left: 5px; - padding-right: 5px; + font-size: 0.859625rem; + padding-left: 5px; + padding-right: 5px; } .mermaid-code { - display: none; + display: none; } .include.hide-first-heading h1:first-of-type, @@ -1687,7 +1689,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right { .include.hide-first-heading h4:first-of-type, .include.hide-first-heading h5:first-of-type, .include.hide-first-heading h6:first-of-type { - display: none; + display: none; } .include.hide-first-heading h1 ~ h2:first-of-type, @@ -1705,156 +1707,156 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right { .include.hide-first-heading h3 ~ h6:first-of-type, .include.hide-first-heading h4 ~ h6:first-of-type, .include.hide-first-heading h5 ~ h6:first-of-type { - display: block; + display: block; } /* Table of contents */ -.topbar-flyout #R-main-overlay{ - bottom: 0; - cursor: pointer; - left: 0; - position: absolute; - right: 0; - top: 3rem; - z-index: 160; +.topbar-flyout #R-main-overlay { + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 3rem; + z-index: 160; } .topbar-content { - background-color: var(--INTERNAL-MAIN-BG-color); - border: 0 solid rgba( 134, 134, 134, .166 ); - box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 ); - height: 0; - opacity: 0; - overflow: hidden; - position: absolute; - visibility: hidden; - width: 0; - z-index: 180; + background-color: var(--INTERNAL-MAIN-BG-color); + border: 0 solid rgba(134, 134, 134, 0.166); + box-shadow: 1px 2px 5px 1px rgba(134, 134, 134, 0.2); + height: 0; + opacity: 0; + overflow: hidden; + position: absolute; + visibility: hidden; + width: 0; + z-index: 180; } .topbar-button.topbar-flyout .topbar-content { - border-width: 1px; - height: auto; - opacity: 1; - visibility: visible; - width: auto; + border-width: 1px; + height: auto; + opacity: 1; + visibility: visible; + width: auto; } .topbar-content .topbar-content-wrapper { - background-color: rgba( 134, 134, 134, .066 ); + background-color: rgba(134, 134, 134, 0.066); } .topbar-content-wrapper { - --ps-rail-hover-color: rgba( 176, 176, 176, .25 ); - max-height: 90vh; - overflow: hidden; - padding: .5rem 1rem; - position: relative; /* PS */ + --ps-rail-hover-color: rgba(176, 176, 176, 0.25); + max-height: 90vh; + overflow: hidden; + padding: 0.5rem 1rem; + position: relative; /* PS */ } .topbar-content .topbar-button .topbar-control { - border-width: 0; - padding: 0; + border-width: 0; + padding: 0; } .topbar-content .topbar-button .topbar-control { - border-width: 0; - padding: .5rem 0; + border-width: 0; + padding: 0.5rem 0; } #TableOfContents, .TableOfContents { - font-size: .8125rem; + font-size: 0.8125rem; } #TableOfContents ul, .TableOfContents ul { - list-style: none; - margin: 0; - padding: 0 1rem; + list-style: none; + margin: 0; + padding: 0 1rem; } #TableOfContents > ul, .TableOfContents > ul { - padding: 0; + padding: 0; } #TableOfContents li, .TableOfContents li { - white-space: nowrap; + white-space: nowrap; } #TableOfContents > ul > li > a, .TableOfContents > ul > li > a { - font-weight: 500; + font-weight: 500; } .btn { - background-color: var(--VARIABLE-BOX-color); - border-radius: 4px; - display: inline-block; - font-size: .9rem; - font-weight: 500; - line-height: 1.1; - margin-bottom: 0; - touch-action: manipulation; - -webkit-user-select: none; - user-select: none; + background-color: var(--VARIABLE-BOX-color); + border-radius: 4px; + display: inline-block; + font-size: 0.9rem; + font-weight: 500; + line-height: 1.1; + margin-bottom: 0; + touch-action: manipulation; + -webkit-user-select: none; + user-select: none; } .btn.interactive { - cursor: pointer; + cursor: pointer; } .btn > span, .btn > a { - display: block; + display: block; } .btn > :where(button) { - -webkit-appearance: none; - appearance: none; - border-width: 0; - margin: 0; - padding: 0; + -webkit-appearance: none; + appearance: none; + border-width: 0; + margin: 0; + padding: 0; } .btn > * { - background-color: transparent; - border-color: var(--VARIABLE-BOX-color); - border-radius: 4px; - border-style: solid; - border-width: 1px; - color: var(--VARIABLE-BOX-CAPTION-color); - padding: 6px 12px; - text-align: center; - touch-action: manipulation; - -webkit-user-select: none; - user-select: none; - white-space: nowrap; + background-color: transparent; + border-color: var(--VARIABLE-BOX-color); + border-radius: 4px; + border-style: solid; + border-width: 1px; + color: var(--VARIABLE-BOX-CAPTION-color); + padding: 6px 12px; + text-align: center; + touch-action: manipulation; + -webkit-user-select: none; + user-select: none; + white-space: nowrap; } .btn > *:after { - /* avoid breakage if no content is given */ - content: "\200b" + /* avoid breakage if no content is given */ + content: '\200b'; } #R-body #R-body-inner .btn > *.highlight:after { - background-color: transparent; + background-color: transparent; } .btn.interactive > .btn-interactive:focus { - outline: none; + outline: none; } .btn.interactive > *:hover, .btn.interactive > *:active, .btn.interactive > *:focus { - background-color: var(--VARIABLE-BOX-BG-color); - color: var(--VARIABLE-BOX-TEXT-color); - text-decoration: none; + background-color: var(--VARIABLE-BOX-BG-color); + color: var(--VARIABLE-BOX-TEXT-color); + text-decoration: none; } .btn.cstyle.transparent { - --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); + --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); } .btn.interactive.cstyle.transparent:hover, @@ -1863,34 +1865,34 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right { .btn.interactive.cstyle.transparent:has(a:hover), .btn.interactive.cstyle.transparent:has(a:focus), .btn.interactive.cstyle.transparent:has(a:active) { - background-color: var(--INTERNAL-BOX-NEUTRAL-color); + background-color: var(--INTERNAL-BOX-NEUTRAL-color); } .btn.cstyle.transparent > * { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); - --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); + --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color); } /* anchors */ .anchor { - color: var(--INTERNAL-MAIN-LINK-color); - cursor: pointer; - font-size: .5em; - margin-inline-start: .66em; - margin-top: .9em; - position: absolute; - visibility: hidden; + color: var(--INTERNAL-MAIN-LINK-color); + cursor: pointer; + font-size: 0.5em; + margin-inline-start: 0.66em; + margin-top: 0.9em; + position: absolute; + visibility: hidden; } @media (any-hover: none) { - /* if there is at least one input device that does not support hover, we want to force the copy button */ - .anchor { - visibility: visible; - } + /* if there is at least one input device that does not support hover, we want to force the copy button */ + .anchor { + visibility: visible; + } } .anchor:hover, .anchor:active, -.anchor:focus{ - color: var(--INTERNAL-MAIN-LINK-HOVER-color); +.anchor:focus { + color: var(--INTERNAL-MAIN-LINK-HOVER-color); } h2:hover .anchor, @@ -1898,7 +1900,7 @@ h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor { - visibility: visible; + visibility: visible; } /* Redfines headers style */ @@ -1909,7 +1911,7 @@ h3 a, h4 a, h5 a, h6 a { - font-weight: inherit; + font-weight: inherit; } #R-body h1 + h2, @@ -1927,140 +1929,142 @@ h6 a { #R-body h4 + h5, #R-body h4 + h6, #R-body h5 + h6 { - margin-top: 1rem; + margin-top: 1rem; } .menu-control .control-style { - cursor: pointer; - height: 1.574em; - overflow: hidden; + cursor: pointer; + height: 1.574em; + overflow: hidden; } .menu-control i { - padding-top: .25em; + padding-top: 0.25em; } .menu-control i, .menu-control span { - cursor: pointer; - display: block; - float: left; + cursor: pointer; + display: block; + float: left; } -html[dir="rtl"] .menu-control i, -html[dir="rtl"] .menu-control span { - float: right; +html[dir='rtl'] .menu-control i, +html[dir='rtl'] .menu-control span { + float: right; } .menu-control :hover, .menu-control i:hover, .menu-control span:hover { - cursor: pointer; + cursor: pointer; } .menu-control select, .menu-control button { - -webkit-appearance: none; - appearance: none; - height: 1.33rem; - outline: none; - width: 100%; + -webkit-appearance: none; + appearance: none; + height: 1.33rem; + outline: none; + width: 100%; } .menu-control button:active, .menu-control button:focus, .menu-control select:active, -.menu-control select:focus{ - outline-style: solid; +.menu-control select:focus { + outline-style: solid; } .menu-control select { - background-color: transparent; - background-image: none; - border: none; - box-shadow: none; - padding-left: 0; - padding-right: 0; + background-color: transparent; + background-image: none; + border: none; + box-shadow: none; + padding-left: 0; + padding-right: 0; } .menu-control option { - color: rgba( 0, 0, 0, 1 ); - padding: 0; - margin: 0; + color: rgba(0, 0, 0, 1); + padding: 0; + margin: 0; } .menu-control button { - background-color: transparent; - cursor: pointer; - display: block; - text-align: start; + background-color: transparent; + cursor: pointer; + display: block; + text-align: start; } .clear { - clear: both; + clear: both; } .footerLangSwitch, .footerVariantSwitch, .footerVisitedLinks, .footerFooter { - display: none; + display: none; } .showLangSwitch, .showVariantSwitch, .showVisitedLinks, .showFooter { - display: block; + display: block; } /* clears the 'X' from Chrome's search input */ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { display: none; } +input[type='search']::-webkit-search-decoration, +input[type='search']::-webkit-search-cancel-button, +input[type='search']::-webkit-search-results-button, +input[type='search']::-webkit-search-results-decoration { + display: none; +} span.math:has(> mjx-container[display]) { - display: block; + display: block; } -@supports selector(.math:has(> mjx-container)){ - .math{ - visibility: hidden; - } - .math:has(> mjx-container){ - visibility: visible; - } +@supports selector(.math:has(> mjx-container)) { + .math { + visibility: hidden; + } + .math:has(> mjx-container) { + visibility: visible; + } } -.math.align-left > mjx-container{ - text-align: left !important; +.math.align-left > mjx-container { + text-align: left !important; } -.math.align-center > mjx-container{ - text-align: center !important; +.math.align-center > mjx-container { + text-align: center !important; } -.math.align-right > mjx-container{ - text-align: right !important; +.math.align-right > mjx-container { + text-align: right !important; } .scrollbar-measure { - /* https://davidwalsh.name/detect-scrollbar-width */ - height: 100px; - overflow: scroll; - position: absolute; - width: 100px; - top: -9999px; + /* https://davidwalsh.name/detect-scrollbar-width */ + height: 100px; + overflow: scroll; + position: absolute; + width: 100px; + top: -9999px; } .a11y-only { - /* idea taken from https://www.filamentgroup.com/lab/a11y-form-labels.html */ - clip-path: polygon(0 0, 1px 0, 1px 1px, 0 1px); - overflow: hidden; - position: absolute; - height: 1px; - transform: translateY(-100%); - transition: transform .5s cubic-bezier(.18,.89,.32,1.28); - white-space: nowrap; - width: 1px; + /* idea taken from https://www.filamentgroup.com/lab/a11y-form-labels.html */ + clip-path: polygon(0 0, 1px 0, 1px 1px, 0 1px); + overflow: hidden; + position: absolute; + height: 1px; + transform: translateY(-100%); + transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28); + white-space: nowrap; + width: 1px; } /* filament style for making action visible on focus - not adapted yet @@ -2088,198 +2092,198 @@ span.math:has(> mjx-container[display]) { } */ -.mermaid-container.align-right { - text-align: right; +.mermaid-container.align-right { + text-align: right; } -.mermaid-container.align-center { - text-align: center; +.mermaid-container.align-center { + text-align: center; } .mermaid-container.align-left { - text-align: left; + text-align: left; } .searchform { - display: flex; + display: flex; } .searchform input { - flex: 1 0 60%; - border-radius: 4px; - border: 2px solid rgba( 134, 134, 134, .125 ); - background: rgba( 134, 134, 134, .125 ); - display: block; - margin: 0; - margin-inline-end: .5rem; + flex: 1 0 60%; + border-radius: 4px; + border: 2px solid rgba(134, 134, 134, 0.125); + background: rgba(134, 134, 134, 0.125); + display: block; + margin: 0; + margin-inline-end: 0.5rem; } .searchform input::-webkit-input-placeholder, .searchform input::placeholder { - color: rgba( 134, 134, 134, 1 ); - opacity: .666; + color: rgba(134, 134, 134, 1); + opacity: 0.666; } .searchform .btn { - display: inline-flex; + display: inline-flex; } .searchhint { - margin-top: 1rem; - height: 1.5rem; + margin-top: 1rem; + height: 1.5rem; } #R-searchresults a.autocomplete-suggestion { - display: block; - font-size: 1.3rem; - font-weight: 500; - line-height: 1.5rem; - padding: 1rem; - text-decoration: none; + display: block; + font-size: 1.3rem; + font-weight: 500; + line-height: 1.5rem; + padding: 1rem; + text-decoration: none; } #R-searchresults a.autocomplete-suggestion:after { - height: 0; + height: 0; } #R-searchresults .autocomplete-suggestion { - color: var(--INTERNAL-MAIN-LINK-color); + color: var(--INTERNAL-MAIN-LINK-color); } #R-searchresults .autocomplete-suggestion > .breadcrumbs { - color: var(--INTERNAL-PRIMARY-color); - font-size: .9rem; - font-weight: 400; - margin-top: .167em; - padding-left: .2em; - padding-right: .2em; + color: var(--INTERNAL-PRIMARY-color); + font-size: 0.9rem; + font-weight: 400; + margin-top: 0.167em; + padding-left: 0.2em; + padding-right: 0.2em; } #R-searchresults .autocomplete-suggestion > .context { - color: var(--INTERNAL-MAIN-TEXT-color); - font-size: 1rem; - font-weight: 300; - margin-top: .66em; - padding-left: .1em; - padding-right: .1em; + color: var(--INTERNAL-MAIN-TEXT-color); + font-size: 1rem; + font-weight: 300; + margin-top: 0.66em; + padding-left: 0.1em; + padding-right: 0.1em; } .badge { - border-radius: 3px; - display: inline-block; - font-size: .8rem; - font-weight: 500; - vertical-align: middle; + border-radius: 3px; + display: inline-block; + font-size: 0.8rem; + font-weight: 500; + vertical-align: middle; } .badge > * { - border-color: var(--VARIABLE-BOX-TEXT-color); - border-radius: 3px; - border-style: solid; - border-width: 1px; - display: inline-block; - padding: 0 .25rem + border-color: var(--VARIABLE-BOX-TEXT-color); + border-radius: 3px; + border-style: solid; + border-width: 1px; + display: inline-block; + padding: 0 0.25rem; } .badge > .badge-title { - background-color: rgba( 16, 16, 16, 1 ); - border-inline-end: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; - color: rgba( 240, 240, 240, 1 ); - filter: contrast(2); - opacity: .75; + background-color: rgba(16, 16, 16, 1); + border-inline-end: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + color: rgba(240, 240, 240, 1); + filter: contrast(2); + opacity: 0.75; } .badge.badge-with-title > .badge-content { - border-start-start-radius: 0; - border-end-start-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .badge > .badge-content { - background-color: var(--VARIABLE-BOX-color); - color: var(--VARIABLE-BOX-CAPTION-color); + background-color: var(--VARIABLE-BOX-color); + color: var(--VARIABLE-BOX-CAPTION-color); } .badge-content:after { - /* avoid breakage if no content is given */ - content: "\200b"; + /* avoid breakage if no content is given */ + content: '\200b'; } -.badge.cstyle.transparent{ - --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); +.badge.cstyle.transparent { + --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); } /* task list and its checkboxes */ -article ul > li:has(> input[type="checkbox"]) { - list-style: none; - margin-inline-start: -1rem; +article ul > li:has(> input[type='checkbox']) { + list-style: none; + margin-inline-start: -1rem; } -article ul > li:has(> input[type="checkbox"])::before { - content: "\200B"; /* accessibilty for Safari https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */ +article ul > li:has(> input[type='checkbox'])::before { + content: '\200B'; /* accessibilty for Safari https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */ } /* https://moderncss.dev/pure-css-custom-checkbox-style/ */ -article ul > li > input[type="checkbox"] { - -webkit-appearance: none; - appearance: none; - background-color: var(--INTERNAL-MAIN-BG-color); /* box background */ - /* For iOS < 15 */ - border: 0.15em solid currentColor; - border-radius: 0.15em; - color: var(--INTERNAL-MAIN-TEXT-color); - display: inline-grid; - font: inherit; - height: 1.15em; - margin: 0; - place-content: center; - transform: translateY(-0.075em); - width: 1.15em; +article ul > li > input[type='checkbox'] { + -webkit-appearance: none; + appearance: none; + background-color: var(--INTERNAL-MAIN-BG-color); /* box background */ + /* For iOS < 15 */ + border: 0.15em solid currentColor; + border-radius: 0.15em; + color: var(--INTERNAL-MAIN-TEXT-color); + display: inline-grid; + font: inherit; + height: 1.15em; + margin: 0; + place-content: center; + transform: translateY(-0.075em); + width: 1.15em; } -article ul > li > input[type="checkbox"]::before { - box-shadow: inset 1em 1em var(--INTERNAL-PRIMARY-color); - clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); - content: ""; - height: 0.65em; - transform: scale(0); - transform-origin: bottom left; - transition: 120ms transform ease-in-out; - width: 0.65em; - /* Windows High Contrast Mode fallback must be last */ - background-color: CanvasText; +article ul > li > input[type='checkbox']::before { + box-shadow: inset 1em 1em var(--INTERNAL-PRIMARY-color); + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + content: ''; + height: 0.65em; + transform: scale(0); + transform-origin: bottom left; + transition: 120ms transform ease-in-out; + width: 0.65em; + /* Windows High Contrast Mode fallback must be last */ + background-color: CanvasText; } -article ul > li > input[type="checkbox"]:checked::before { - transform: scale(1); +article ul > li > input[type='checkbox']:checked::before { + transform: scale(1); } /* CSS Lightbox https://codepen.io/gschier/pen/kyRXVx */ .lightbox-back { - align-items: center; - background: rgba( 0, 0, 0, .8 ); - bottom: 0; - display: none; - justify-content: center; - left: 0; - position: fixed; - right: 0; - text-align: center; - top: 0; - white-space: nowrap; - z-index: 1999; + align-items: center; + background: rgba(0, 0, 0, 0.8); + bottom: 0; + display: none; + justify-content: center; + left: 0; + position: fixed; + right: 0; + text-align: center; + top: 0; + white-space: nowrap; + z-index: 1999; } .lightbox-back:target { - display: flex; + display: flex; } .lightbox-back img { - background-color: var(--INTERNAL-MAIN-BG-color); - max-height: 95%; - max-width: 95%; - overflow: auto; - padding: min(2vh, 2vw); + background-color: var(--INTERNAL-MAIN-BG-color); + max-height: 95%; + max-width: 95%; + overflow: auto; + padding: min(2vh, 2vw); } /* basic menu list styles (non-collapsible) */ @@ -2287,574 +2291,578 @@ article ul > li > input[type="checkbox"]:checked::before { #R-sidebar select, #R-sidebar .collapsible-menu label, #R-sidebar .menu-control, -#R-sidebar :is( a, span ) { - color: var(--INTERNAL-MENU-SECTIONS-LINK-color); +#R-sidebar :is(a, span) { + color: var(--INTERNAL-MENU-SECTIONS-LINK-color); } #R-sidebar select:hover, #R-sidebar .collapsible-menu li:not(.active) > label:hover, #R-sidebar .menu-control:hover, #R-sidebar a:hover { - color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color); + color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color); } #R-sidebar li.active > label, #R-sidebar li.active > a { - color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color); + color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color); } #R-sidebar li.active > a { - background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color); + background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color); } -#R-sidebar ul > li > :is( a, span ) { - display: block; - position: relative; +#R-sidebar ul > li > :is(a, span) { + display: block; + position: relative; } #R-sidebar ul.space li > * { - padding-bottom: .125rem; - padding-top: .125rem; + padding-bottom: 0.125rem; + padding-top: 0.125rem; } #R-sidebar ul.space > li > ul { - padding-bottom: 0; - padding-top: 0; + padding-bottom: 0; + padding-top: 0; } #R-sidebar ul.morespace li > * { - padding-bottom: .25rem; - padding-top: .25rem; + padding-bottom: 0.25rem; + padding-top: 0.25rem; } #R-sidebar ul.morespace li > ul { - padding-bottom: 0; - padding-top: 0; + padding-bottom: 0; + padding-top: 0; } #R-sidebar ul.enlarge > li.parent, #R-sidebar ul.enlarge > li.active { - background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color); + background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color); } -#R-sidebar ul.enlarge > li > :is( a, span ) { - font-size: 1.1rem; - line-height: 2rem; +#R-sidebar ul.enlarge > li > :is(a, span) { + font-size: 1.1rem; + line-height: 2rem; } #R-sidebar ul.enlarge > li > a > .read-icon { - margin-top: .5rem; + margin-top: 0.5rem; } #R-sidebar ul.enlarge > li > ul > li:last-child { - padding-bottom: 1rem; + padding-bottom: 1rem; } #R-sidebar ul ul { - padding-inline-start: 1rem; + padding-inline-start: 1rem; } /* collapsible menu style overrides */ #R-sidebar ul.collapsible-menu > li { - position: relative; + position: relative; } #R-sidebar ul.collapsible-menu > li > input { - -webkit-appearance: none; - appearance: none; - cursor: pointer; - display: inline-block; - margin-left: 0; - margin-right: 0; - margin-top: .65rem; - position: absolute; - width: 1rem; - z-index: 1; + -webkit-appearance: none; + appearance: none; + cursor: pointer; + display: inline-block; + margin-left: 0; + margin-right: 0; + margin-top: 0.65rem; + position: absolute; + width: 1rem; + z-index: 1; } #R-sidebar ul.collapsible-menu.enlarge > li > input { - margin-top: .9rem; + margin-top: 0.9rem; } #R-sidebar ul.collapsible-menu > li > label { - cursor: pointer; - display: inline-block; - inset-inline-start: 0; - margin-bottom: 0; /* nucleus */ - padding-inline-start: .125rem; - position: absolute; - width: 1rem; - z-index: 2; + cursor: pointer; + display: inline-block; + inset-inline-start: 0; + margin-bottom: 0; /* nucleus */ + padding-inline-start: 0.125rem; + position: absolute; + width: 1rem; + z-index: 2; } #R-sidebar ul.collapsible-menu.enlarge > li > label { - font-size: 1.1rem; - line-height: 2rem; + font-size: 1.1rem; + line-height: 2rem; } #R-sidebar ul.collapsible-menu > li > label:after { - content: ""; - display: block; - height: 1px; - transition: width 0.5s ease; - width: 0%; + content: ''; + display: block; + height: 1px; + transition: width 0.5s ease; + width: 0%; } #R-sidebar ul.collapsible-menu > li > label:hover:after { - width: 100%; + width: 100%; } #R-sidebar ul.collapsible-menu > li > label > .fas { - font-size: .8rem; - width: .6rem; + font-size: 0.8rem; + width: 0.6rem; } -#R-sidebar ul.collapsible-menu > li > :is( a, span ) { - display: inline-block; - width: 100%; +#R-sidebar ul.collapsible-menu > li > :is(a, span) { + display: inline-block; + width: 100%; } /* menu states for not(.collapsible-menu) */ #R-sidebar ul ul { - display: none; + display: none; } #R-sidebar ul > li.parent > ul, #R-sidebar ul > li.active > ul, #R-sidebar ul > li.alwaysopen > ul { - display: block; + display: block; } /* closed menu */ #R-sidebar ul.collapsible-menu > li > input + label ~ ul { - display: none; + display: none; } #R-sidebar ul.collapsible-menu > li > input + label > .fa-chevron-down { - display: none; + display: none; } #R-sidebar ul.collapsible-menu > li > input + label > .fa-chevron-right { - display: inline-block; + display: inline-block; } /* open menu */ #R-sidebar ul.collapsible-menu > li > input:checked + label ~ ul { - display: block; + display: block; } #R-sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-down { - display: inline-block; + display: inline-block; } #R-sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-right { - display: none; + display: none; } /* adjust menu for RTL reading direction */ -html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right { - transform: scaleX(-1); +html[dir='rtl'] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right { + transform: scaleX(-1); } a#R-logo { - color: var(--MENU-SECTIONS-BG-color); - font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); - font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); - letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); - text-transform: uppercase; - white-space: nowrap; + color: var(--MENU-SECTIONS-BG-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); + text-transform: uppercase; + white-space: nowrap; } a#R-logo:hover { - color: var(--MENU-SECTIONS-BG-color); + color: var(--MENU-SECTIONS-BG-color); } /* those sizes are for the default logo */ a#R-logo.R-default { - font-size: 1.875rem; + font-size: 1.875rem; } @media only all and (max-width: 59.999rem) { - a#R-logo.R-default { - font-size: 1.5625rem; - } + a#R-logo.R-default { + font-size: 1.5625rem; + } } body #R-logo svg, body #R-logo svg * { - color: var(--MENU-SECTIONS-BG-color); - fill: var(--MENU-SECTIONS-BG-color) !important; + color: var(--MENU-SECTIONS-BG-color); + fill: var(--MENU-SECTIONS-BG-color) !important; } -.columnize{ - column-count: 2; +.columnize { + column-count: 2; } @media screen and (min-width: 79.25rem) { - .columnize{ - column-count: 3; - } + .columnize { + column-count: 3; + } } -.columnize > *{ - break-inside: avoid-column; +.columnize > * { + break-inside: avoid-column; } -.columnize .breadcrumbs{ - font-size: .859625rem; +.columnize .breadcrumbs { + font-size: 0.859625rem; } -#R-body .tab-panel{ - margin-bottom: 1.5rem; - margin-top: 1.5rem; +#R-body .tab-panel { + margin-bottom: 1.5rem; + margin-top: 1.5rem; } -#R-body .tab-nav{ - display: flex; - flex-wrap: wrap; +#R-body .tab-nav { + display: flex; + flex-wrap: wrap; } -#R-body .tab-nav-title{ - font-size: .9rem; - font-weight: 400; - line-height: 1.42857143; - padding: .2rem 0; - margin-inline-start: .6rem; +#R-body .tab-nav-title { + font-size: 0.9rem; + font-weight: 400; + line-height: 1.42857143; + padding: 0.2rem 0; + margin-inline-start: 0.6rem; } -#R-body .tab-nav-button{ - -webkit-appearance: none; - appearance: none; - background-color: transparent; - border: 1px solid transparent; - color: var(--INTERNAL-MAIN-LINK-color); - display: block; - font-size: .9rem; - font-weight: 300; - line-height: 1.42857143; - margin-inline-start: .6rem; +#R-body .tab-nav-button { + -webkit-appearance: none; + appearance: none; + background-color: transparent; + border: 1px solid transparent; + color: var(--INTERNAL-MAIN-LINK-color); + display: block; + font-size: 0.9rem; + font-weight: 300; + line-height: 1.42857143; + margin-inline-start: 0.6rem; } -#R-body .tab-nav-button.active{ - background-color: var(--VARIABLE-BOX-color); - border-bottom-color: var(--VARIABLE-BOX-BG-color); - border-radius: 2px 2px 0 0; - color: var(--VARIABLE-BOX-TEXT-color); - cursor: default; +#R-body .tab-nav-button.active { + background-color: var(--VARIABLE-BOX-color); + border-bottom-color: var(--VARIABLE-BOX-BG-color); + border-radius: 2px 2px 0 0; + color: var(--VARIABLE-BOX-TEXT-color); + cursor: default; } #R-body .tab-nav-button:not(.active):hover, #R-body .tab-nav-button:not(.active):active, #R-body .tab-nav-button:not(.active):focus { - color: var(--INTERNAL-MAIN-LINK-HOVER-color); + color: var(--INTERNAL-MAIN-LINK-HOVER-color); } -#R-body .tab-nav-button > .tab-nav-text{ - border-bottom-color: var(--VARIABLE-BOX-color); - border-bottom-style: solid; - border-bottom-width: .15rem; - display: block; - padding: .2rem .6rem 0 .6rem; +#R-body .tab-nav-button > .tab-nav-text { + border-bottom-color: var(--VARIABLE-BOX-color); + border-bottom-style: solid; + border-bottom-width: 0.15rem; + display: block; + padding: 0.2rem 0.6rem 0 0.6rem; } /* https://stackoverflow.com/a/46452396 */ -#R-body .tab-nav-button.active > .tab-nav-text{ - background-color: var(--VARIABLE-BOX-BG-color); - border-bottom-color: transparent; - border-radius: 1px 1px 0 0; - text-shadow: -0.08ex 0 0 currentColor, 0.08ex 0 0 currentColor; +#R-body .tab-nav-button.active > .tab-nav-text { + background-color: var(--VARIABLE-BOX-BG-color); + border-bottom-color: transparent; + border-radius: 1px 1px 0 0; + text-shadow: + -0.08ex 0 0 currentColor, + 0.08ex 0 0 currentColor; } -@supports (-webkit-text-stroke-width: 0.09ex){ - #R-body .tab-nav-button.active > .tab-nav-text{ - text-shadow: -0.08ex 0 0 currentColor, 0.08ex 0 0 currentColor; - -webkit-text-stroke-width: 0.09ex; - } +@supports (-webkit-text-stroke-width: 0.09ex) { + #R-body .tab-nav-button.active > .tab-nav-text { + text-shadow: + -0.08ex 0 0 currentColor, + 0.08ex 0 0 currentColor; + -webkit-text-stroke-width: 0.09ex; + } } #R-body .tab-nav-button:not(.active):hover > .tab-nav-text, #R-body .tab-nav-button:not(.active):active > .tab-nav-text, #R-body .tab-nav-button:not(.active):focus > .tab-nav-text { - border-bottom-color: var(--INTERNAL-MAIN-LINK-HOVER-color); + border-bottom-color: var(--INTERNAL-MAIN-LINK-HOVER-color); } -#R-body .tab-content{ - background-color: var(--VARIABLE-BOX-color); - border-color: var(--VARIABLE-BOX-color); - border-style: solid; - border-width: 1px; - display: none; - /* if setting a border to 1px, a browser instead sets it to 1dppx which is not +#R-body .tab-content { + background-color: var(--VARIABLE-BOX-color); + border-color: var(--VARIABLE-BOX-color); + border-style: solid; + border-width: 1px; + display: none; + /* if setting a border to 1px, a browser instead sets it to 1dppx which is not usable as a unit yet, so we have to calculate it ourself */ - margin-top: calc( var(--bpx1)*-1px ); - z-index: 10; + margin-top: calc(var(--bpx1) * -1px); + z-index: 10; } -#R-body .tab-content.active{ - display: block; +#R-body .tab-content.active { + display: block; } -#R-body .tab-content-text{ - background-color: var(--VARIABLE-BOX-BG-color); - color: var(--VARIABLE-BOX-TEXT-color); - padding: 1rem; +#R-body .tab-content-text { + background-color: var(--VARIABLE-BOX-BG-color); + color: var(--VARIABLE-BOX-TEXT-color); + padding: 1rem; } /* remove margin if only a single code block is contained in the tab (FF without :has using .codify style) */ -#R-body .tab-content.codify > .tab-content-text{ - padding: 0; +#R-body .tab-content.codify > .tab-content-text { + padding: 0; } -#R-body .tab-content-text:has(> div.highlight:only-child){ - padding: 0; +#R-body .tab-content-text:has(> div.highlight:only-child) { + padding: 0; } /* remove border from code block if single in tab */ #R-body .tab-content-text > div.highlight:only-child > div, #R-body .tab-content-text > div.highlight:only-child pre:not(.mermaid), -#R-body .tab-content-text > pre:not(.mermaid).pre-code:only-child{ - border-width: 0; +#R-body .tab-content-text > pre:not(.mermaid).pre-code:only-child { + border-width: 0; } .tab-panel-style.cstyle.initial, .tab-panel-style.cstyle.default { - --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color); + --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color); } .tab-panel-style.cstyle.transparent { - --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 ); - --VARIABLE-BOX-BG-color: transparent; + --VARIABLE-BOX-color: rgba(134, 134, 134, 0.4); + --VARIABLE-BOX-BG-color: transparent; } #R-body .tab-panel-style.cstyle.initial.tab-nav-button.active, #R-body .tab-panel-style.cstyle.default.tab-nav-button.active, -#R-body .tab-panel-style.cstyle.transparent.tab-nav-button.active{ - background-color: var(--VARIABLE-BOX-BG-color); - border-left-color: var(--VARIABLE-BOX-color); - border-right-color: var(--VARIABLE-BOX-color); - border-top-color: var(--VARIABLE-BOX-color); +#R-body .tab-panel-style.cstyle.transparent.tab-nav-button.active { + background-color: var(--VARIABLE-BOX-BG-color); + border-left-color: var(--VARIABLE-BOX-color); + border-right-color: var(--VARIABLE-BOX-color); + border-top-color: var(--VARIABLE-BOX-color); } -#R-body .tab-panel-style.cstyle.code.tab-nav-button:not(.active){ - --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); +#R-body .tab-panel-style.cstyle.code.tab-nav-button:not(.active) { + --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); } #R-body .tab-panel-style.cstyle.initial.tab-content, #R-body .tab-panel-style.cstyle.default.tab-content, -#R-body .tab-panel-style.cstyle.transparent.tab-content{ - background-color: var(--VARIABLE-BOX-BG-color); +#R-body .tab-panel-style.cstyle.transparent.tab-content { + background-color: var(--VARIABLE-BOX-BG-color); } /* bordering the menu and topbar */ #R-topbar { - background-color: var(--INTERNAL-MAIN-BG-color); - border-bottom-color: var(--INTERNAL-MAIN-TOPBAR-BORDER-color); - border-bottom-style: solid; - border-bottom-width: 1px; + background-color: var(--INTERNAL-MAIN-BG-color); + border-bottom-color: var(--INTERNAL-MAIN-TOPBAR-BORDER-color); + border-bottom-style: solid; + border-bottom-width: 1px; } #R-header-topbar { - border-bottom-color: transparent; - border-bottom-style: solid; - border-bottom-width: 1px; - border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color); - border-inline-end-style: solid; - border-inline-end-width: 1px; - height: 3rem; - position: absolute; - top: 0; - width: 100%; - z-index: 1; + border-bottom-color: transparent; + border-bottom-style: solid; + border-bottom-width: 1px; + border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color); + border-inline-end-style: solid; + border-inline-end-width: 1px; + height: 3rem; + position: absolute; + top: 0; + width: 100%; + z-index: 1; } @media screen and (max-width: 47.999rem) { - .mobile-support #R-header-topbar { - border-inline-end-color: var(--INTERNAL-MENU-BORDER-color); - } + .mobile-support #R-header-topbar { + border-inline-end-color: var(--INTERNAL-MENU-BORDER-color); + } } #R-header-wrapper, #R-homelinks, #R-content-wrapper > * { - border-inline-end-color: var(--INTERNAL-MENU-BORDER-color); - border-inline-end-style: solid; - border-inline-end-width: 1px; + border-inline-end-color: var(--INTERNAL-MENU-BORDER-color); + border-inline-end-style: solid; + border-inline-end-width: 1px; } #topics > ul { - margin-top: 1rem; + margin-top: 1rem; } -#R-sidebar ul.collapsible-menu li.active > a{ - border-bottom-color: var(--INTERNAL-MENU-BORDER-color); - border-top-color: var(--INTERNAL-MENU-BORDER-color); - border-inline-start-color: var(--INTERNAL-MENU-BORDER-color); - border-inline-end-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BORDER-color); - border-style: solid; - border-width: 1px; - padding-left: calc( 1rem - var(--bpx1)*1px); - padding-right: calc( 1rem - var(--bpx1)*1px); - width: calc(100% + var(--bpx1)*1px); +#R-sidebar ul.collapsible-menu li.active > a { + border-bottom-color: var(--INTERNAL-MENU-BORDER-color); + border-top-color: var(--INTERNAL-MENU-BORDER-color); + border-inline-start-color: var(--INTERNAL-MENU-BORDER-color); + border-inline-end-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BORDER-color); + border-style: solid; + border-width: 1px; + padding-left: calc(1rem - var(--bpx1) * 1px); + padding-right: calc(1rem - var(--bpx1) * 1px); + width: calc(100% + var(--bpx1) * 1px); } -#R-sidebar ul.morespace.collapsible-menu li.active > a{ - padding-bottom: calc( .25rem - var(--bpx1)*1px); - padding-top: calc( .25rem - var(--bpx1)*1px); +#R-sidebar ul.morespace.collapsible-menu li.active > a { + padding-bottom: calc(0.25rem - var(--bpx1) * 1px); + padding-top: calc(0.25rem - var(--bpx1) * 1px); } -#R-sidebar ul.space.collapsible-menu li.active > a{ - padding-bottom: calc( .125rem - var(--bpx1)*1px); - padding-top: calc( .125rem - var(--bpx1)*1px); +#R-sidebar ul.space.collapsible-menu li.active > a { + padding-bottom: calc(0.125rem - var(--bpx1) * 1px); + padding-top: calc(0.125rem - var(--bpx1) * 1px); } #R-menu-footer { - padding-bottom: 1rem; + padding-bottom: 1rem; } article .R-taxonomy ul, article .R-taxonomy li { - list-style: none; - display: inline; - padding: 0; + list-style: none; + display: inline; + padding: 0; } -article .R-taxonomy i ~ ul > li:before{ - content: " " +article .R-taxonomy i ~ ul > li:before { + content: ' '; } article .R-taxonomy ul > li ~ li:before { - content: " | " + content: ' | '; } body.notfound p { - text-align: center + text-align: center; } body.notfound #R-body { - margin-inline-start: 0; - max-width: 100%; - min-width: 100%; - width: 100%; + margin-inline-start: 0; + max-width: 100%; + min-width: 100%; + width: 100%; } body.notfound h1 { - color: var(--MAIN-TEXT-color); - line-height: 1; - font-size: 5rem; - overflow: hidden; + color: var(--MAIN-TEXT-color); + line-height: 1; + font-size: 5rem; + overflow: hidden; } body.notfound h1 span { - font-size: 6.5rem; - font-weight: 500; + font-size: 6.5rem; + font-weight: 500; } body.notfound h1 i { - font-size: 5rem; - vertical-align: text-top; + font-size: 5rem; + vertical-align: text-top; } body.notfound h2 { - color: var(--MAIN-TEXT-color); - font-size: 2.5rem; - font-weight: 500; - padding: 0; - text-align: center; + color: var(--MAIN-TEXT-color); + font-size: 2.5rem; + font-weight: 500; + padding: 0; + text-align: center; } body.notfound #shrug svg, body.notfound #shrug svg * { - color: #000000; - color: var(--MAIN-TEXT-color); - fill: #000000 !important; - fill: var(--MAIN-TEXT-color) !important; + color: #000000; + color: var(--MAIN-TEXT-color); + fill: #000000 !important; + fill: var(--MAIN-TEXT-color) !important; } body.notfound #shrug svg { - transform: scaleX(-1); - width: 15rem; + transform: scaleX(-1); + width: 15rem; } /* color style definitions */ .cstyle { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); - --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color); - --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); - -webkit-print-color-adjust: exact; - color-adjust: exact; + --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); + --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color); + --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); + -webkit-print-color-adjust: exact; + color-adjust: exact; } .cstyle.caution { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-CAUTION-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CAUTION-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-CAUTION-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CAUTION-TEXT-color); } .cstyle.important { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-IMPORTANT-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-IMPORTANT-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-IMPORTANT-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-IMPORTANT-TEXT-color); } .cstyle.info { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color); } .cstyle.note { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color); } .cstyle.tip { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color); } .cstyle.warning { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color); } .cstyle.primary { - --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); } .cstyle.secondary { - --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); } .cstyle.accent { - --VARIABLE-BOX-color: var(--INTERNAL-ACCENT-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-ACCENT-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); } .cstyle.blue { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color); } .cstyle.cyan { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-CYAN-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CYAN-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-CYAN-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CYAN-TEXT-color); } .cstyle.green { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color); } .cstyle.grey { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color); } .cstyle.magenta { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-MAGENTA-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-MAGENTA-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-MAGENTA-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-MAGENTA-TEXT-color); } .cstyle.orange { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color); } .cstyle.red { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color); } .cstyle.code { - --VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color); - --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color); - --VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color); + --VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color); + --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color); + --VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color); } .cstyle.transparent { - --VARIABLE-BOX-color: transparent; - --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color); - --VARIABLE-BOX-BG-color: transparent; - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); + --VARIABLE-BOX-color: transparent; + --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color); + --VARIABLE-BOX-BG-color: transparent; + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); } diff --git a/exampleSite/makeTransByConentDir.js b/exampleSite/makeTransByConentDir.js index 9c6b00d361..e155a8f916 100644 --- a/exampleSite/makeTransByConentDir.js +++ b/exampleSite/makeTransByConentDir.js @@ -68,12 +68,12 @@ function processDirectory(directoryPath, oldDirectory, newDirectory, langs) { if (!processDirectory(filePath, oldDirectory, newDirectory, langs)) { return false; } - } else if (stats.isFile()){ + } else if (stats.isFile()) { // non-language files are a different beast: copy the file into all languages that don't have a language file const nonLangRegex = /^(.*?)(\.([^.]+))?$/; const nonLangMatch = file.match(nonLangRegex); const fileName = nonLangMatch[1]; - const fileExtension = nonLangMatch.length > 3 ? nonLangMatch[3] : ""; + const fileExtension = nonLangMatch.length > 3 ? nonLangMatch[3] : ''; Object.keys(langs).forEach((fileLang) => { const langFilePath = path.join(directoryPath, fileName + '.' + fileLang + '.' + fileExtension); const langExists = fs.existsSync(langFilePath); @@ -103,14 +103,12 @@ function processDirectory(directoryPath, oldDirectory, newDirectory, langs) { return true; } -function modifyConfig(configDirectory) { - -} +function modifyConfig(configDirectory) {} function runThatShit(contentDirectory) { const sourceDirectory = contentDirectory; - const backupDirectory = contentDirectory + ".backup"; - const targetDirectory = contentDirectory + ".temp"; + const backupDirectory = contentDirectory + '.backup'; + const targetDirectory = contentDirectory + '.temp'; // check directories try { @@ -149,7 +147,7 @@ function runThatShit(contentDirectory) { // convert that shit const langs = getLanguages(sourceDirectory); - if( !processDirectory(sourceDirectory, sourceDirectory, targetDirectory, langs) ){ + if (!processDirectory(sourceDirectory, sourceDirectory, targetDirectory, langs)) { return false; } @@ -164,7 +162,7 @@ function runThatShit(contentDirectory) { } // edit the config file accordingly - modifyConfig(path.join(sourceDirectory, "..")); + modifyConfig(path.join(sourceDirectory, '..')); return true; } diff --git a/layouts/partials/version.txt b/layouts/partials/version.txt index cc99fe08f2..9a96251c05 100644 --- a/layouts/partials/version.txt +++ b/layouts/partials/version.txt @@ -1 +1 @@ -7.1.1+57defcfab75859c444feb8af753a2b764cb6f64c \ No newline at end of file +7.1.1+85d43bcef3403a38c509d04606f2cd8ca91c8bd5 \ No newline at end of file diff --git a/static/js/search.js b/static/js/search.js index 461984c0a2..c07707492a 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -1,128 +1,130 @@ window.relearn = window.relearn || {}; -window.relearn.runInitialSearch = function(){ - if( window.relearn.isSearchInit && window.relearn.isLunrInit ){ - var input = document.querySelector('#R-search-by-detail'); - if( !input ){ - return; - } - var value = input.value; - searchDetail( value ); +window.relearn.runInitialSearch = function () { + if (window.relearn.isSearchInit && window.relearn.isLunrInit) { + var input = document.querySelector('#R-search-by-detail'); + if (!input) { + return; } -} + var value = input.value; + searchDetail(value); + } +}; var lunrIndex, pagesIndex; -function initLunrIndex( index ){ - pagesIndex = index; - // Set up Lunr by declaring the fields we use - // Also provide their boost level for the ranking - lunrIndex = lunr(function() { - this.use(lunr.multiLanguage.apply(null, contentLangs)); - this.ref('index'); - this.field('title', { - boost: 15 - }); - this.field('tags', { - boost: 10 - }); - this.field('content', { - boost: 5 - }); - - this.pipeline.remove(lunr.stemmer); - this.searchPipeline.remove(lunr.stemmer); - - // Feed Lunr with each file and let LUnr actually index them - pagesIndex.forEach(function(page, idx) { - page.index = idx; - this.add(page); - }, this); +function initLunrIndex(index) { + pagesIndex = index; + // Set up Lunr by declaring the fields we use + // Also provide their boost level for the ranking + lunrIndex = lunr(function () { + this.use(lunr.multiLanguage.apply(null, contentLangs)); + this.ref('index'); + this.field('title', { + boost: 15, + }); + this.field('tags', { + boost: 10, + }); + this.field('content', { + boost: 5, }); - window.relearn.isLunrInit = true; - window.relearn.runInitialSearch(); + this.pipeline.remove(lunr.stemmer); + this.searchPipeline.remove(lunr.stemmer); + + // Feed Lunr with each file and let LUnr actually index them + pagesIndex.forEach(function (page, idx) { + page.index = idx; + this.add(page); + }, this); + }); + + window.relearn.isLunrInit = true; + window.relearn.runInitialSearch(); } -function triggerSearch(){ - var input = document.querySelector('#R-search-by-detail'); - if( !input ){ - return; - } - var value = input.value; - searchDetail( value ); +function triggerSearch() { + var input = document.querySelector('#R-search-by-detail'); + if (!input) { + return; + } + var value = input.value; + searchDetail(value); - // add a new entry to the history after the user - // changed the term; this does not reload the page - // but will add to the history and update the address bar URL - var url = new URL( window.location ); - var oldValue = url.searchParams.get( 'search-by' ); - if( value != oldValue ){ - var state = window.history.state || {}; - state = Object.assign( {}, ( typeof state === 'object' ) ? state : {} ); - url.searchParams.set( 'search-by', value ); - state.search = url.toString(); - // with normal pages, this is handled by the 'pagehide' event, but this - // doesn't fire in case of pushState, so we have to do the same thing - // here, too - state.contentScrollTop = +elc.scrollTop; - window.history.pushState( state, '', url ); - } + // add a new entry to the history after the user + // changed the term; this does not reload the page + // but will add to the history and update the address bar URL + var url = new URL(window.location); + var oldValue = url.searchParams.get('search-by'); + if (value != oldValue) { + var state = window.history.state || {}; + state = Object.assign({}, typeof state === 'object' ? state : {}); + url.searchParams.set('search-by', value); + state.search = url.toString(); + // with normal pages, this is handled by the 'pagehide' event, but this + // doesn't fire in case of pushState, so we have to do the same thing + // here, too + state.contentScrollTop = +elc.scrollTop; + window.history.pushState(state, '', url); + } } -window.addEventListener( 'popstate', function ( event ){ - // restart search if browsed through history - if( event.state ){ - var state = window.history.state || {}; - state = Object.assign( {}, ( typeof state === 'object' ) ? state : {} ); - if( state.search ) { - var url = new URL( state.search ); - if( url.searchParams.has('search-by') ){ - var search = url.searchParams.get( 'search-by' ); +window.addEventListener('popstate', function (event) { + // restart search if browsed through history + if (event.state) { + var state = window.history.state || {}; + state = Object.assign({}, typeof state === 'object' ? state : {}); + if (state.search) { + var url = new URL(state.search); + if (url.searchParams.has('search-by')) { + var search = url.searchParams.get('search-by'); - // we have to insert the old search term into the inputs - var inputs = document.querySelectorAll( 'input.search-by' ); - inputs.forEach( function( e ){ - e.value = search; - var event = document.createEvent( 'Event' ); - event.initEvent( 'input', false, false ); - e.dispatchEvent( event ); - }); + // we have to insert the old search term into the inputs + var inputs = document.querySelectorAll('input.search-by'); + inputs.forEach(function (e) { + e.value = search; + var event = document.createEvent('Event'); + event.initEvent('input', false, false); + e.dispatchEvent(event); + }); - // recreate the last search results and eventually - // restore the previous scrolling position - searchDetail( search ); - } - } + // recreate the last search results and eventually + // restore the previous scrolling position + searchDetail(search); + } } + } }); var input = document.querySelector('#R-search-by-detail'); -if( input ){ - input.addEventListener( 'keydown', function(event) { - // if we are pressing ESC in the searchdetail our focus will - // be stolen by the other event handlers, so we have to refocus - // here after a short while - if (event.key == "Escape") { - setTimeout( function(){ input.focus(); }, 0 ); - } - }); +if (input) { + input.addEventListener('keydown', function (event) { + // if we are pressing ESC in the searchdetail our focus will + // be stolen by the other event handlers, so we have to refocus + // here after a short while + if (event.key == 'Escape') { + setTimeout(function () { + input.focus(); + }, 0); + } + }); } function initLunrJs() { - // new way to load our search index - if( window.index_js_url ){ - var js = document.createElement("script"); - js.src = index_js_url; - js.setAttribute("async", ""); - js.onload = function(){ - initLunrIndex(relearn_searchindex); - }; - js.onerror = function(e){ - console.error('Error getting Hugo index file'); - }; - document.head.appendChild(js); - } + // new way to load our search index + if (window.index_js_url) { + var js = document.createElement('script'); + js.src = index_js_url; + js.setAttribute('async', ''); + js.onload = function () { + initLunrIndex(relearn_searchindex); + }; + js.onerror = function (e) { + console.error('Error getting Hugo index file'); + }; + document.head.appendChild(js); + } } /** @@ -132,158 +134,186 @@ function initLunrJs() { * @return {Array} results */ function search(term) { - // Find the item in our index corresponding to the Lunr one to have more info - // Remove Lunr special search characters: https://lunrjs.com/guides/searching.html - term = term.replace( /[*:^~+-]/g, ' ' ); - var searchTerm = lunr.tokenizer( term ).reduce( function(a,token){return a.concat(searchPatterns(token.str))}, []).join(' '); - return !searchTerm || !lunrIndex ? [] : lunrIndex.search(searchTerm).map(function(result) { - return { index: result.ref, matches: Object.keys(result.matchData.metadata) } - }); + // Find the item in our index corresponding to the Lunr one to have more info + // Remove Lunr special search characters: https://lunrjs.com/guides/searching.html + term = term.replace(/[*:^~+-]/g, ' '); + var searchTerm = lunr + .tokenizer(term) + .reduce(function (a, token) { + return a.concat(searchPatterns(token.str)); + }, []) + .join(' '); + return !searchTerm || !lunrIndex + ? [] + : lunrIndex.search(searchTerm).map(function (result) { + return { index: result.ref, matches: Object.keys(result.matchData.metadata) }; + }); } function searchPatterns(word) { - // for short words high amounts of typos doesn't make sense - // for long words we allow less typos because this largly increases search time - var typos = [ - { len: -1, typos: 1 }, - { len: 60, typos: 2 }, - { len: 40, typos: 3 }, - { len: 20, typos: 4 }, - { len: 16, typos: 3 }, - { len: 12, typos: 2 }, - { len: 8, typos: 1 }, - { len: 4, typos: 0 }, - ]; - return [ - word + '^100', - word + '*^10', - '*' + word + '^10', - word + '~' + typos.reduce( function( a, c, i ){ return word.length < c.len ? c : a; } ).typos + '^1' - ]; + // for short words high amounts of typos doesn't make sense + // for long words we allow less typos because this largly increases search time + var typos = [ + { len: -1, typos: 1 }, + { len: 60, typos: 2 }, + { len: 40, typos: 3 }, + { len: 20, typos: 4 }, + { len: 16, typos: 3 }, + { len: 12, typos: 2 }, + { len: 8, typos: 1 }, + { len: 4, typos: 0 }, + ]; + return [ + word + '^100', + word + '*^10', + '*' + word + '^10', + word + + '~' + + typos.reduce(function (a, c, i) { + return word.length < c.len ? c : a; + }).typos + + '^1', + ]; } +function resolvePlaceholders(s, args) { + var args = args || []; + // use replace to iterate over the string + // select the match and check if the related argument is present + // if yes, replace the match with the argument + return s.replace(/{([0-9]+)}/g, function (match, index) { + // check if the argument is present + return typeof args[index] == 'undefined' ? match : args[index]; + }); +} -function resolvePlaceholders( s, args ) { - var args = args || []; - // use replace to iterate over the string - // select the match and check if the related argument is present - // if yes, replace the match with the argument - return s.replace(/{([0-9]+)}/g, function (match, index) { - // check if the argument is present - return typeof args[index] == 'undefined' ? match : args[index]; +function searchDetail(value) { + var results = document.querySelector('#R-searchresults'); + var hint = document.querySelector('.searchhint'); + hint.innerText = ''; + results.textContent = ''; + var a = search(value); + if (a.length) { + hint.innerText = resolvePlaceholders(window.T_N_results_found, [value, a.length]); + a.forEach(function (item) { + var page = pagesIndex[item.index]; + var numContextWords = 10; + var contextPattern = + '(?:\\S+ +){0,' + + numContextWords + + '}\\S*\\b(?:' + + item.matches + .map(function (match) { + return match.replace(/\W/g, '\\$&'); + }) + .join('|') + + ')\\b\\S*(?: +\\S+){0,' + + numContextWords + + '}'; + var context = page.content.match(new RegExp(contextPattern, 'i')); + var divsuggestion = document.createElement('a'); + divsuggestion.className = 'autocomplete-suggestion'; + divsuggestion.setAttribute('data-term', value); + divsuggestion.setAttribute('data-title', page.title); + divsuggestion.setAttribute('href', window.relearn.relBaseUri + page.uri); + divsuggestion.setAttribute('data-context', context); + var divtitle = document.createElement('div'); + divtitle.className = 'title'; + divtitle.innerText = '» ' + page.title; + divsuggestion.appendChild(divtitle); + var divbreadcrumb = document.createElement('div'); + divbreadcrumb.className = 'breadcrumbs'; + divbreadcrumb.innerText = page.breadcrumb || ''; + divsuggestion.appendChild(divbreadcrumb); + if (context) { + var divcontext = document.createElement('div'); + divcontext.className = 'context'; + divcontext.innerText = context || ''; + divsuggestion.appendChild(divcontext); + } + results.appendChild(divsuggestion); }); -}; + window.relearn.markSearch(); + } else if (value.length) { + hint.innerText = resolvePlaceholders(window.T_No_results_found, [value]); + } + input.focus(); + setTimeout(adjustContentWidth, 0); -function searchDetail( value ) { - var results = document.querySelector('#R-searchresults'); - var hint = document.querySelector('.searchhint'); - hint.innerText = ''; - results.textContent = ''; - var a = search( value ); - if( a.length ){ - hint.innerText = resolvePlaceholders( window.T_N_results_found, [ value, a.length ] ); - a.forEach( function(item){ - var page = pagesIndex[item.index]; - var numContextWords = 10; - var contextPattern = '(?:\\S+ +){0,' + numContextWords + '}\\S*\\b(?:' + - item.matches.map( function(match){return match.replace(/\W/g, '\\$&')} ).join('|') + - ')\\b\\S*(?: +\\S+){0,' + numContextWords + '}'; - var context = page.content.match(new RegExp(contextPattern, 'i')); - var divsuggestion = document.createElement('a'); - divsuggestion.className = 'autocomplete-suggestion'; - divsuggestion.setAttribute('data-term', value); - divsuggestion.setAttribute('data-title', page.title); - divsuggestion.setAttribute('href', window.relearn.relBaseUri + page.uri); - divsuggestion.setAttribute('data-context', context); - var divtitle = document.createElement('div'); - divtitle.className = 'title'; - divtitle.innerText = '» ' + page.title; - divsuggestion.appendChild( divtitle ); - var divbreadcrumb = document.createElement('div'); - divbreadcrumb.className = 'breadcrumbs'; - divbreadcrumb.innerText = (page.breadcrumb || ''); - divsuggestion.appendChild( divbreadcrumb ); - if( context ){ - var divcontext = document.createElement('div'); - divcontext.className = 'context'; - divcontext.innerText = (context || ''); - divsuggestion.appendChild( divcontext ); - } - results.appendChild( divsuggestion ); - }); - window.relearn.markSearch(); - } - else if( value.length ) { - hint.innerText = resolvePlaceholders( window.T_No_results_found, [ value ] ); - } - input.focus(); - setTimeout( adjustContentWidth, 0 ); - - // if we are initiating search because of a browser history - // operation, we have to restore the scrolling postion the - // user previously has used; if this search isn't initiated - // by a browser history operation, it simply does nothing - var state = window.history.state || {}; - state = Object.assign( {}, ( typeof state === 'object' ) ? state : {} ); - if( state.hasOwnProperty( 'contentScrollTop' ) ){ - window.setTimeout( function(){ - elc.scrollTop = +state.contentScrollTop; - }, 10 ); - return; - } + // if we are initiating search because of a browser history + // operation, we have to restore the scrolling postion the + // user previously has used; if this search isn't initiated + // by a browser history operation, it simply does nothing + var state = window.history.state || {}; + state = Object.assign({}, typeof state === 'object' ? state : {}); + if (state.hasOwnProperty('contentScrollTop')) { + window.setTimeout(function () { + elc.scrollTop = +state.contentScrollTop; + }, 10); + return; + } } initLunrJs(); -function startSearch(){ - var input = document.querySelector('#R-search-by-detail'); - if( input ){ - var state = window.history.state || {}; - state = Object.assign( {}, ( typeof state === 'object' ) ? state : {} ); - state.search = window.location.toString(); - window.history.replaceState( state, '', window.location ); - } +function startSearch() { + var input = document.querySelector('#R-search-by-detail'); + if (input) { + var state = window.history.state || {}; + state = Object.assign({}, typeof state === 'object' ? state : {}); + state.search = window.location.toString(); + window.history.replaceState(state, '', window.location); + } - var searchList = new autoComplete({ - /* selector for the search box element */ - selectorToInsert: 'search:has(.searchbox)', - selector: '#R-search-by', - /* source is the callback to perform the search */ - source: function(term, response) { - response(search(term)); - }, - /* renderItem displays individual search results */ - renderItem: function(item, term) { - var page = pagesIndex[item.index]; - var numContextWords = 2; - var contextPattern = '(?:\\S+ +){0,' + numContextWords + '}\\S*\\b(?:' + - item.matches.map( function(match){return match.replace(/\W/g, '\\$&')} ).join('|') + - ')\\b\\S*(?: +\\S+){0,' + numContextWords + '}'; - var context = page.content.match(new RegExp(contextPattern, 'i')); - var divsuggestion = document.createElement('div'); - divsuggestion.className = 'autocomplete-suggestion'; - divsuggestion.setAttribute('data-term', term); - divsuggestion.setAttribute('data-title', page.title); - divsuggestion.setAttribute('data-uri', window.relearn.relBaseUri + page.uri); - divsuggestion.setAttribute('data-context', context); - var divtitle = document.createElement('div'); - divtitle.className = 'title'; - divtitle.innerText = '» ' + page.title; - divsuggestion.appendChild( divtitle ); - if( context ){ - var divcontext = document.createElement('div'); - divcontext.className = 'context'; - divcontext.innerText = (context || ''); - divsuggestion.appendChild( divcontext ); - } - return divsuggestion.outerHTML; - }, - /* onSelect callback fires when a search suggestion is chosen */ - onSelect: function(e, term, item) { - location.href = item.getAttribute('data-uri'); - e.preventDefault(); - } - }); -}; + var searchList = new autoComplete({ + /* selector for the search box element */ + selectorToInsert: 'search:has(.searchbox)', + selector: '#R-search-by', + /* source is the callback to perform the search */ + source: function (term, response) { + response(search(term)); + }, + /* renderItem displays individual search results */ + renderItem: function (item, term) { + var page = pagesIndex[item.index]; + var numContextWords = 2; + var contextPattern = + '(?:\\S+ +){0,' + + numContextWords + + '}\\S*\\b(?:' + + item.matches + .map(function (match) { + return match.replace(/\W/g, '\\$&'); + }) + .join('|') + + ')\\b\\S*(?: +\\S+){0,' + + numContextWords + + '}'; + var context = page.content.match(new RegExp(contextPattern, 'i')); + var divsuggestion = document.createElement('div'); + divsuggestion.className = 'autocomplete-suggestion'; + divsuggestion.setAttribute('data-term', term); + divsuggestion.setAttribute('data-title', page.title); + divsuggestion.setAttribute('data-uri', window.relearn.relBaseUri + page.uri); + divsuggestion.setAttribute('data-context', context); + var divtitle = document.createElement('div'); + divtitle.className = 'title'; + divtitle.innerText = '» ' + page.title; + divsuggestion.appendChild(divtitle); + if (context) { + var divcontext = document.createElement('div'); + divcontext.className = 'context'; + divcontext.innerText = context || ''; + divsuggestion.appendChild(divcontext); + } + return divsuggestion.outerHTML; + }, + /* onSelect callback fires when a search suggestion is chosen */ + onSelect: function (e, term, item) { + location.href = item.getAttribute('data-uri'); + e.preventDefault(); + }, + }); +} -ready( startSearch ); +ready(startSearch); diff --git a/static/js/theme.js b/static/js/theme.js index fe1f906fe7..9d753e201a 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -1,24 +1,24 @@ window.relearn = window.relearn || {}; var theme = true; -var isPrint = document.querySelector( 'body' ).classList.contains( 'print' ); +var isPrint = document.querySelector('body').classList.contains('print'); -var isRtl = document.querySelector( 'html' ).getAttribute( 'dir' ) == 'rtl'; -var lang = document.querySelector( 'html' ).getAttribute( 'lang' ); +var isRtl = document.querySelector('html').getAttribute('dir') == 'rtl'; +var lang = document.querySelector('html').getAttribute('lang'); var dir_padding_start = 'padding-left'; var dir_padding_end = 'padding-right'; var dir_key_start = 37; var dir_key_end = 39; var dir_scroll = 1; -if( isRtl ){ - dir_padding_start = 'padding-right'; - dir_padding_end = 'padding-left'; - dir_key_start = 39; - dir_key_end = 37; - dir_scroll = -1; +if (isRtl) { + dir_padding_start = 'padding-right'; + dir_padding_end = 'padding-left'; + dir_key_start = 39; + dir_key_end = 37; + dir_scroll = -1; } -var touchsupport = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0) +var touchsupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0; var formelements = 'button, datalist, fieldset, input, label, legend, meter, optgroup, option, output, progress, select, textarea'; @@ -28,1788 +28,1826 @@ var psm; var pst = new Map(); var elc = document.querySelector('#R-body-inner'); -function regexEscape( s ){ - return s.replace( /[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&' ); +function regexEscape(s) { + return s.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); } -function documentFocus(){ - elc.focus(); - psc && psc.scrollbarY.focus(); +function documentFocus() { + elc.focus(); + psc && psc.scrollbarY.focus(); } -function scrollbarWidth(){ - // https://davidwalsh.name/detect-scrollbar-width - // Create the measurement node - var scrollDiv = document.createElement("div"); - scrollDiv.className = "scrollbar-measure"; - document.body.appendChild(scrollDiv); - // Get the scrollbar width - var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; - // Delete the DIV - document.body.removeChild(scrollDiv); - return scrollbarWidth; +function scrollbarWidth() { + // https://davidwalsh.name/detect-scrollbar-width + // Create the measurement node + var scrollDiv = document.createElement('div'); + scrollDiv.className = 'scrollbar-measure'; + document.body.appendChild(scrollDiv); + // Get the scrollbar width + var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; + // Delete the DIV + document.body.removeChild(scrollDiv); + return scrollbarWidth; } var scrollbarSize = scrollbarWidth(); -function adjustContentWidth(){ - var start = parseFloat( getComputedStyle( elc ).getPropertyValue( dir_padding_start ) ); - var end = start; - if( elc.scrollHeight > elc.clientHeight ){ - // if we have a scrollbar reduce the end margin by the scrollbar width - end = Math.max( 0, start - scrollbarSize ); - } - elc.style[ dir_padding_end ] = '' + end + 'px'; +function adjustContentWidth() { + var start = parseFloat(getComputedStyle(elc).getPropertyValue(dir_padding_start)); + var end = start; + if (elc.scrollHeight > elc.clientHeight) { + // if we have a scrollbar reduce the end margin by the scrollbar width + end = Math.max(0, start - scrollbarSize); + } + elc.style[dir_padding_end] = '' + end + 'px'; } -function fixCodeTabs(){ - /* if only a single code block is contained in the tab and no style was selected, treat it like style=code */ - var codeTabContents = Array.from( document.querySelectorAll( '.tab-content.tab-panel-style' ) ).filter( function( tabContent ){ - return tabContent.querySelector( '*:scope > .tab-content-text > div.highlight:only-child, *:scope > .tab-content-text > pre:not(.mermaid).pre-code:only-child'); - }); +function fixCodeTabs() { + /* if only a single code block is contained in the tab and no style was selected, treat it like style=code */ + var codeTabContents = Array.from(document.querySelectorAll('.tab-content.tab-panel-style')).filter(function (tabContent) { + return tabContent.querySelector('*:scope > .tab-content-text > div.highlight:only-child, *:scope > .tab-content-text > pre:not(.mermaid).pre-code:only-child'); + }); - codeTabContents.forEach( function( tabContent ){ - var tabId = tabContent.dataset.tabItem; - var tabPanel = tabContent.parentNode.parentNode; - var tabButton = tabPanel.querySelector( '.tab-nav-button.tab-panel-style[data-tab-item="'+tabId+'"]' ); - if( tabContent.classList.contains( 'initial' ) ){ - tabButton.classList.remove( 'initial' ); - tabButton.classList.add( 'code' ); - tabContent.classList.remove( 'initial' ); - tabContent.classList.add( 'code' ); - } - // mark code blocks for FF without :has() - tabContent.classList.add( 'codify' ); - }); + codeTabContents.forEach(function (tabContent) { + var tabId = tabContent.dataset.tabItem; + var tabPanel = tabContent.parentNode.parentNode; + var tabButton = tabPanel.querySelector('.tab-nav-button.tab-panel-style[data-tab-item="' + tabId + '"]'); + if (tabContent.classList.contains('initial')) { + tabButton.classList.remove('initial'); + tabButton.classList.add('code'); + tabContent.classList.remove('initial'); + tabContent.classList.add('code'); + } + // mark code blocks for FF without :has() + tabContent.classList.add('codify'); + }); } function switchTab(tabGroup, tabId) { - var tabs = Array.from( document.querySelectorAll( '.tab-panel[data-tab-group="'+tabGroup+'"]' ) ).filter( function( e ){ - return !!e.querySelector( '[data-tab-item="'+tabId+'"]' ); + var tabs = Array.from(document.querySelectorAll('.tab-panel[data-tab-group="' + tabGroup + '"]')).filter(function (e) { + return !!e.querySelector('[data-tab-item="' + tabId + '"]'); + }); + var allTabItems = + tabs && + tabs.reduce(function (a, e) { + return a.concat( + Array.from(e.querySelectorAll('[data-tab-item]')).filter(function (es) { + return es.parentNode.parentNode == e; + }) + ); + }, []); + var targetTabItems = + tabs && + tabs.reduce(function (a, e) { + return a.concat( + Array.from(e.querySelectorAll('[data-tab-item="' + tabId + '"]')).filter(function (es) { + return es.parentNode.parentNode == e; + }) + ); + }, []); + + // if event is undefined then switchTab was called from restoreTabSelection + // so it's not a button event and we don't need to safe the selction or + // prevent page jump + var isButtonEvent = event && event.target && event.target.getBoundingClientRect; + if (isButtonEvent) { + // save button position relative to viewport + var yposButton = event.target.getBoundingClientRect().top; + } + + allTabItems && + allTabItems.forEach(function (e) { + e.classList.remove('active'); + e.removeAttribute('tabindex'); + }); + targetTabItems && + targetTabItems.forEach(function (e) { + e.classList.add('active'); + e.setAttribute('tabindex', '-1'); }); - var allTabItems = tabs && tabs.reduce( function( a, e ){ - return a.concat( Array.from( e.querySelectorAll( '[data-tab-item]' ) ).filter( function( es ){ - return es.parentNode.parentNode == e; - }) ); - }, [] ); - var targetTabItems = tabs && tabs.reduce( function( a, e ){ - return a.concat( Array.from( e.querySelectorAll( '[data-tab-item="'+tabId+'"]' ) ).filter( function( es ){ - return es.parentNode.parentNode == e; - }) ); - }, [] ); - // if event is undefined then switchTab was called from restoreTabSelection - // so it's not a button event and we don't need to safe the selction or - // prevent page jump - var isButtonEvent = event && event.target && event.target.getBoundingClientRect; - if(isButtonEvent){ - // save button position relative to viewport - var yposButton = event.target.getBoundingClientRect().top; - } + if (isButtonEvent) { + initMermaid(true); - allTabItems && allTabItems.forEach( function( e ){ e.classList.remove( 'active' ); e.removeAttribute( 'tabindex' ); }); - targetTabItems && targetTabItems.forEach( function( e ){ e.classList.add( 'active' ); e.setAttribute( 'tabindex', '-1' ); }); + // reset screen to the same position relative to clicked button to prevent page jump + var yposButtonDiff = event.target.getBoundingClientRect().top - yposButton; + window.scrollTo(window.scrollX, window.scrollY + yposButtonDiff); - if(isButtonEvent){ - initMermaid( true ); - - // reset screen to the same position relative to clicked button to prevent page jump - var yposButtonDiff = event.target.getBoundingClientRect().top - yposButton; - window.scrollTo(window.scrollX, window.scrollY+yposButtonDiff); - - // Store the selection to make it persistent - if(window.localStorage){ - var selectionsJSON = window.localStorage.getItem(window.relearn.absBaseUri+"/tab-selections"); - if(selectionsJSON){ - var tabSelections = JSON.parse(selectionsJSON); - }else{ - var tabSelections = {}; - } - tabSelections[tabGroup] = tabId; - window.localStorage.setItem(window.relearn.absBaseUri+"/tab-selections", JSON.stringify(tabSelections)); + // Store the selection to make it persistent + if (window.localStorage) { + var selectionsJSON = window.localStorage.getItem(window.relearn.absBaseUri + '/tab-selections'); + if (selectionsJSON) { + var tabSelections = JSON.parse(selectionsJSON); + } else { + var tabSelections = {}; } + tabSelections[tabGroup] = tabId; + window.localStorage.setItem(window.relearn.absBaseUri + '/tab-selections', JSON.stringify(tabSelections)); } + } } function restoreTabSelections() { - if(window.localStorage){ - var selectionsJSON = window.localStorage.getItem(window.relearn.absBaseUri+"/tab-selections"); - if(selectionsJSON){ - var tabSelections = JSON.parse(selectionsJSON); - }else{ - var tabSelections = {}; - } - Object.keys(tabSelections).forEach(function(tabGroup) { - var tabItem = tabSelections[tabGroup]; - switchTab(tabGroup, tabItem); - }); + if (window.localStorage) { + var selectionsJSON = window.localStorage.getItem(window.relearn.absBaseUri + '/tab-selections'); + if (selectionsJSON) { + var tabSelections = JSON.parse(selectionsJSON); + } else { + var tabSelections = {}; } + Object.keys(tabSelections).forEach(function (tabGroup) { + var tabItem = tabSelections[tabGroup]; + switchTab(tabGroup, tabItem); + }); + } } -function initMermaid( update, attrs ) { - var doBeside = true; - var isImageRtl = false; +function initMermaid(update, attrs) { + var doBeside = true; + var isImageRtl = false; - // we are either in update or initialization mode; - // during initialization, we want to edit the DOM; - // during update we only want to execute if something changed - var decodeHTML = function( html ){ - var txt = document.createElement( 'textarea' ); - txt.innerHTML = html; - return txt.value; - }; - var encodeHTML = function( text ){ - var html = document.createElement( 'textarea' ); - html.textContent = text; - return html.innerHTML; - }; + // we are either in update or initialization mode; + // during initialization, we want to edit the DOM; + // during update we only want to execute if something changed + var decodeHTML = function (html) { + var txt = document.createElement('textarea'); + txt.innerHTML = html; + return txt.value; + }; + var encodeHTML = function (text) { + var html = document.createElement('textarea'); + html.textContent = text; + return html.innerHTML; + }; - var parseGraph = function( graph ){ - // See https://github.com/mermaid-js/mermaid/blob/9a080bb975b03b2b1d4ef6b7927d09e6b6b62760/packages/mermaid/src/diagram-api/frontmatter.ts#L10 - // for reference on the regex originally taken from jekyll - var YAML=1; - var INIT=2; - var GRAPH=3; - var d = /^(?:\s*[\n\r])*(?:-{3}(\s*[\n\r](?:.*?)[\n\r])-{3}(?:\s*[\n\r]+)+)?(?:\s*(?:%%\s*\{\s*\w+\s*:([^%]*?)%%\s*[\n\r]?))?(.*)$/s - var m = d.exec( graph ); - var yaml = {}; - var dir = {}; - var content = graph; - if( m && m.length == 4 ){ - yaml = m[YAML] ? jsyaml.load( m[YAML] ) : yaml; - dir = m[INIT] ? JSON.parse( '{ "init": ' + m[INIT] ).init : dir; - content = m[GRAPH] ? m[GRAPH] : content; + var parseGraph = function (graph) { + // See https://github.com/mermaid-js/mermaid/blob/9a080bb975b03b2b1d4ef6b7927d09e6b6b62760/packages/mermaid/src/diagram-api/frontmatter.ts#L10 + // for reference on the regex originally taken from jekyll + var YAML = 1; + var INIT = 2; + var GRAPH = 3; + var d = /^(?:\s*[\n\r])*(?:-{3}(\s*[\n\r](?:.*?)[\n\r])-{3}(?:\s*[\n\r]+)+)?(?:\s*(?:%%\s*\{\s*\w+\s*:([^%]*?)%%\s*[\n\r]?))?(.*)$/s; + var m = d.exec(graph); + var yaml = {}; + var dir = {}; + var content = graph; + if (m && m.length == 4) { + yaml = m[YAML] ? jsyaml.load(m[YAML]) : yaml; + dir = m[INIT] ? JSON.parse('{ "init": ' + m[INIT]).init : dir; + content = m[GRAPH] ? m[GRAPH] : content; + } + var ret = { yaml: yaml, dir: dir, content: content.trim() }; + return ret; + }; + + var serializeGraph = function (graph) { + var yamlPart = ''; + if (Object.keys(graph.yaml).length) { + yamlPart = '---\n' + jsyaml.dump(graph.yaml) + '---\n'; + } + var dirPart = ''; + if (Object.keys(graph.dir).length) { + dirPart = '%%{init: ' + JSON.stringify(graph.dir) + '}%%\n'; + } + return yamlPart + dirPart + graph.content; + }; + + var init_func = function (attrs) { + var is_initialized = false; + var theme = attrs.theme; + document.querySelectorAll('.mermaid').forEach(function (element) { + var parse = parseGraph(decodeHTML(element.innerHTML)); + + if (parse.yaml.theme) { + parse.yaml.relearn_user_theme = true; + } + if (parse.dir.theme) { + parse.dir.relearn_user_theme = true; + } + if (!parse.yaml.relearn_user_theme && !parse.dir.relearn_user_theme) { + parse.yaml.theme = theme; + } + is_initialized = true; + + var graph = encodeHTML(serializeGraph(parse)); + var new_element = document.createElement('div'); + Array.from(element.attributes).forEach(function (attr) { + new_element.setAttribute(attr.name, attr.value); + element.removeAttribute(attr.name); + }); + new_element.classList.add('mermaid-container'); + new_element.classList.remove('mermaid'); + element.classList.add('mermaid'); + + element.innerHTML = graph; + if (element.offsetParent !== null) { + element.classList.add('mermaid-render'); + } + new_element.innerHTML = '

' + graph + '
' + element.outerHTML; + element.parentNode.replaceChild(new_element, element); + }); + return is_initialized; + }; + + var update_func = function (attrs) { + var is_initialized = false; + var theme = attrs.theme; + document.querySelectorAll('.mermaid-container').forEach(function (e) { + var element = e.querySelector('.mermaid'); + var code = e.querySelector('.mermaid-code'); + var parse = parseGraph(decodeHTML(code.innerHTML)); + + if (element.classList.contains('mermaid-render')) { + if (parse.yaml.relearn_user_theme || parse.dir.relearn_user_theme) { + return; } - var ret = { yaml: yaml, dir: dir, content: content.trim() } - return ret; - }; - - var serializeGraph = function( graph ){ - var yamlPart = ''; - if( Object.keys( graph.yaml ).length ){ - yamlPart = '---\n' + jsyaml.dump( graph.yaml ) + '---\n'; + if (parse.yaml.theme == theme || parse.dir.theme == theme) { + return; } - var dirPart = ''; - if( Object.keys( graph.dir ).length ){ - dirPart = '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n'; - } - return yamlPart + dirPart + graph.content; - }; + } + if (element.offsetParent !== null) { + element.classList.add('mermaid-render'); + } else { + element.classList.remove('mermaid-render'); + return; + } + is_initialized = true; - var init_func = function( attrs ){ - var is_initialized = false; - var theme = attrs.theme; - document.querySelectorAll('.mermaid').forEach( function( element ){ - var parse = parseGraph( decodeHTML( element.innerHTML ) ); + parse.yaml.theme = theme; + var graph = encodeHTML(serializeGraph(parse)); + element.removeAttribute('data-processed'); + element.innerHTML = graph; + code.innerHTML = graph; + }); + return is_initialized; + }; - if( parse.yaml.theme ){ - parse.yaml.relearn_user_theme = true; - } - if( parse.dir.theme ){ - parse.dir.relearn_user_theme = true; - } - if( !parse.yaml.relearn_user_theme && !parse.dir.relearn_user_theme ){ - parse.yaml.theme = theme; - } - is_initialized = true; + var state = this; + if (update && !state.is_initialized) { + return; + } + if (typeof variants == 'undefined') { + return; + } + if (typeof mermaid == 'undefined' || typeof mermaid.mermaidAPI == 'undefined') { + return; + } - var graph = encodeHTML( serializeGraph( parse ) ); - var new_element = document.createElement( 'div' ); - Array.from( element.attributes ).forEach( function( attr ){ - new_element.setAttribute( attr.name, attr.value ); - element.removeAttribute( attr.name ); - }); - new_element.classList.add( 'mermaid-container' ); - new_element.classList.remove( 'mermaid' ); - element.classList.add( 'mermaid' ); - - element.innerHTML = graph; - if( element.offsetParent !== null ){ - element.classList.add( 'mermaid-render' ); - } - new_element.innerHTML = '
' + graph + '
' + element.outerHTML; - element.parentNode.replaceChild( new_element, element ); + if (!state.is_initialized) { + state.is_initialized = true; + window.addEventListener( + 'beforeprint', + function () { + initMermaid(true, { + 'theme': variants.getColorValue('PRINT-MERMAID-theme'), }); - return is_initialized; - } + }.bind(this) + ); + window.addEventListener( + 'afterprint', + function () { + initMermaid(true); + }.bind(this) + ); + } - var update_func = function( attrs ){ - var is_initialized = false; - var theme = attrs.theme; - document.querySelectorAll( '.mermaid-container' ).forEach( function( e ){ - var element = e.querySelector( '.mermaid' ); - var code = e.querySelector( '.mermaid-code' ); - var parse = parseGraph( decodeHTML( code.innerHTML ) ); + attrs = attrs || { + 'theme': variants.getColorValue('MERMAID-theme'), + }; - if( element.classList.contains( 'mermaid-render' ) ){ - if( parse.yaml.relearn_user_theme || parse.dir.relearn_user_theme ){ - return; - } - if( parse.yaml.theme == theme || parse.dir.theme == theme ){ - return; - } + var search; + if (update) { + search = sessionStorage.getItem(window.relearn.absBaseUri + '/search-value'); + unmark(); + } + var is_initialized = update ? update_func(attrs) : init_func(attrs); + if (is_initialized) { + mermaid.initialize(Object.assign({ 'securityLevel': 'antiscript', 'startOnLoad': false }, window.relearn.mermaidConfig, { theme: attrs.theme })); + mermaid.run({ + postRenderCallback: function (id) { + // zoom for Mermaid + // https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607 + var svgs = d3.selectAll('body:not(.print) .mermaid-container.zoomable > .mermaid > #' + id); + svgs.each(function () { + var parent = this.parentElement; + // we need to copy the maxWidth, otherwise our reset button will not align in the upper right + parent.style.maxWidth = this.style.maxWidth || this.getAttribute('width'); + // if no unit is given for the width + parent.style.maxWidth = parent.style.maxWidth || 'calc( ' + this.getAttribute('width') + 'px + 1rem )'; + var svg = d3.select(this); + svg.html('' + svg.html() + ''); + var inner = svg.select('*:scope > g'); + parent.insertAdjacentHTML('beforeend', ''); + var button = parent.querySelector('.svg-reset-button'); + var zoom = d3.zoom().on('zoom', function (e) { + inner.attr('transform', e.transform); + if (e.transform.k == 1 && e.transform.x == 0 && e.transform.y == 0) { + button.classList.remove('zoomed'); + } else { + button.classList.add('zoomed'); } - if( element.offsetParent !== null ){ - element.classList.add( 'mermaid-render' ); + }); + button.addEventListener('click', function (event) { + svg.transition().duration(350).call(zoom.transform, d3.zoomIdentity); + this.setAttribute('aria-label', window.T_View_reset); + this.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isImageRtl ? 'e' : 'w'))); + }); + button.addEventListener('mouseleave', function () { + if (this.classList.contains('tooltipped')) { + this.classList.remove('tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw'); + this.removeAttribute('aria-label'); } - else{ - element.classList.remove( 'mermaid-render' ); - return; - } - is_initialized = true; - - parse.yaml.theme = theme; - var graph = encodeHTML( serializeGraph( parse ) ); - element.removeAttribute('data-processed'); - element.innerHTML = graph; - code.innerHTML = graph; + }); + svg.call(zoom); }); - return is_initialized; - }; + }, + querySelector: '.mermaid.mermaid-render', + suppressErrors: true, + }); + } + if (update && search && search.length) { + sessionStorage.setItem(window.relearn.absBaseUri + '/search-value', search); + mark(); + } +} - var state = this; - if( update && !state.is_initialized ){ - return; - } - if( typeof variants == 'undefined' ){ - return; - } - if( typeof mermaid == 'undefined' || typeof mermaid.mermaidAPI == 'undefined' ){ - return; - } +function initOpenapi(update, attrs) { + var state = this; + if (update && !state.is_initialized) { + return; + } + if (typeof variants == 'undefined') { + return; + } - if( !state.is_initialized ){ - state.is_initialized = true; - window.addEventListener( 'beforeprint', function(){ - initMermaid( true, { - 'theme': variants.getColorValue( 'PRINT-MERMAID-theme' ), - }); - }.bind( this ) ); - window.addEventListener( 'afterprint', function(){ - initMermaid( true ); - }.bind( this ) ); - } + if (!state.is_initialized) { + state.is_initialized = true; + window.addEventListener( + 'beforeprint', + function () { + initOpenapi(true, { isPrintPreview: true }); + }.bind(this) + ); + window.addEventListener( + 'afterprint', + function () { + initOpenapi(true, { isPrintPreview: false }); + }.bind(this) + ); + } - attrs = attrs || { - 'theme': variants.getColorValue( 'MERMAID-theme' ), - }; + attrs = attrs || { + isPrintPreview: false, + }; - var search; - if( update ){ - search = sessionStorage.getItem( window.relearn.absBaseUri+'/search-value' ); - unmark(); + function addFunctionToResizeEvent() {} + function getFirstAncestorByClass() {} + function renderOpenAPI(oc) { + var relBasePath = window.relearn.relBasePath; + var assetBuster = window.themeUseOpenapi.assetsBuster; + var print = isPrint || attrs.isPrintPreview ? 'PRINT-' : ''; + var theme = print ? `${relBasePath}/css/theme-relearn-light.css${assetBuster}` : document.querySelector('#R-variant-style').attributes.href.value; + var swagger_theme = variants.getColorValue(print + 'OPENAPI-theme'); + var swagger_code_theme = variants.getColorValue(print + 'OPENAPI-CODE-theme'); + + const openapiId = 'relearn-swagger-ui'; + const openapiIframeId = openapiId + '-iframe'; + const openapiIframe = document.getElementById(openapiIframeId); + if (openapiIframe) { + openapiIframe.remove(); } - var is_initialized = ( update ? update_func( attrs ) : init_func( attrs ) ); - if( is_initialized ){ - mermaid.initialize( Object.assign( { "securityLevel": "antiscript", "startOnLoad": false }, window.relearn.mermaidConfig, { theme: attrs.theme } ) ); - mermaid.run({ - postRenderCallback: function( id ){ - // zoom for Mermaid - // https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607 - var svgs = d3.selectAll( 'body:not(.print) .mermaid-container.zoomable > .mermaid > #' + id ); - svgs.each( function(){ - var parent = this.parentElement; - // we need to copy the maxWidth, otherwise our reset button will not align in the upper right - parent.style.maxWidth = this.style.maxWidth || this.getAttribute( 'width' ); - // if no unit is given for the width - parent.style.maxWidth = parent.style.maxWidth || 'calc( ' + this.getAttribute( 'width' ) + 'px + 1rem )'; - var svg = d3.select( this ); - svg.html( '' + svg.html() + '' ); - var inner = svg.select( '*:scope > g' ); - parent.insertAdjacentHTML( 'beforeend', '' ); - var button = parent.querySelector( '.svg-reset-button' ); - var zoom = d3.zoom().on( 'zoom', function( e ){ - inner.attr( 'transform', e.transform ); - if( e.transform.k == 1 && e.transform.x == 0 && e.transform.y == 0 ){ - button.classList.remove( 'zoomed' ); - } - else{ - button.classList.add( 'zoomed' ); - } - }); - button.addEventListener( 'click', function( event ){ - svg.transition() - .duration( 350 ) - .call( zoom.transform, d3.zoomIdentity ); - this.setAttribute( 'aria-label', window.T_View_reset ); - this.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isImageRtl?'e':'w')) ); - }); - button.addEventListener( 'mouseleave', function() { - if( this.classList.contains( 'tooltipped' ) ){ - this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' ); - this.removeAttribute( 'aria-label' ); - } - }); - svg.call( zoom ); + const openapiErrorId = openapiId + '-error'; + const openapiError = document.getElementById(openapiErrorId); + if (openapiError) { + openapiError.remove(); + } + const oi = document.createElement('iframe'); + oi.id = openapiIframeId; + oi.classList.toggle('sc-openapi-iframe', true); + oi.srcdoc = '' + '' + '' + '' + '' + '' + '' + '' + '' + 'Collapse all' + 'Expand all' + '
' + '' + '' + ''; + oi.height = '100%'; + oi.width = '100%'; + oi.onload = function () { + const openapiWrapper = getFirstAncestorByClass(oc, 'sc-openapi-wrapper'); + const openapiPromise = new Promise(function (resolve) { + resolve(); + }); + openapiPromise + .then(function () { + var options = { + defaultModelsExpandDepth: 2, + defaultModelExpandDepth: 2, + docExpansion: isPrint || attrs.isPrintPreview ? 'full' : 'list', + domNode: oi.contentWindow.document.getElementById(openapiId), + filter: !(isPrint || attrs.isPrintPreview), + layout: 'BaseLayout', + onComplete: function () { + if (isPrint || attrs.isPrintPreview) { + oi.contentWindow.document.querySelectorAll('.model-container > .model-box > button[aria-expanded=false]').forEach(function (btn) { + btn.click(); }); + setOpenAPIHeight(oi); + } }, - querySelector: '.mermaid.mermaid-render', - suppressErrors: true + plugins: [SwaggerUIBundle.plugins.DownloadUrl], + presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset], + syntaxHighlight: { + activated: true, + theme: swagger_code_theme, + }, + validatorUrl: 'none', + }; + if (oc.dataset.openapiSpec) { + try { + Object.assign(options, { spec: JSON.parse(oc.dataset.openapiSpec) }); + } catch (err) { + try { + Object.assign(options, { spec: jsyaml.load(oc.dataset.openapiSpec) }); + } catch (err) { + console.error('OpenAPI: file "' + oc.dataset.openapiUrl + '" could not be parsed as JSON or YAML'); + } + } + } else { + Object.assign(options, { url: oc.dataset.openapiUrl }); + } + SwaggerUIBundle(options); + }) + .then(function () { + let observerCallback = function () { + setOpenAPIHeight(oi); + }; + let observer = new MutationObserver(observerCallback); + observer.observe(oi.contentWindow.document.documentElement, { + childList: true, + subtree: true, + }); + }) + .then(function () { + if (openapiWrapper) { + openapiWrapper.classList.toggle('is-loading', false); + } + setOpenAPIHeight(oi); + }) + .catch(function (error) { + const ed = document.createElement('div'); + ed.classList.add('sc-alert', 'sc-alert-error'); + ed.innerHTML = error; + ed.id = openapiErrorId; + while (oc.lastChild) { + oc.removeChild(oc.lastChild); + } + if (openapiWrapper) { + openapiWrapper.classList.toggle('is-loading', false); + openapiWrapper.insertAdjacentElement('afterbegin', ed); + } }); - } - if( update && search && search.length ){ - sessionStorage.setItem( window.relearn.absBaseUri+'/search-value', search ); - mark(); - } -} - -function initOpenapi( update, attrs ){ - var state = this; - if( update && !state.is_initialized ){ - return; - } - if( typeof variants == 'undefined' ){ - return; - } - - if( !state.is_initialized ){ - state.is_initialized = true; - window.addEventListener( 'beforeprint', function(){ - initOpenapi( true, { isPrintPreview: true } ); - }.bind( this ) ); - window.addEventListener( 'afterprint', function(){ - initOpenapi( true, { isPrintPreview: false } ); - }.bind( this ) ); - } - - attrs = attrs || { - isPrintPreview: false }; - - function addFunctionToResizeEvent(){ - + oc.appendChild(oi); + } + function setOpenAPIHeight(oi) { + // add empirical offset if in print preview (GC 103) + oi.style.height = oi.contentWindow.document.documentElement.getBoundingClientRect().height + (attrs.isPrintPreview ? 200 : 0) + 'px'; + } + function resizeOpenAPI() { + let divi = document.getElementsByClassName('sc-openapi-iframe'); + for (let i = 0; i < divi.length; i++) { + setOpenAPIHeight(divi[i]); } - function getFirstAncestorByClass(){ + } + let divo = document.getElementsByClassName('sc-openapi-container'); + for (let i = 0; i < divo.length; i++) { + renderOpenAPI(divo[i]); + } + if (divo.length) { + addFunctionToResizeEvent(resizeOpenAPI); + } +} +function initAnchorClipboard() { + if (window.relearn.disableAnchorCopy && window.relearn.disableAnchorScrolling) { + return; + } + + document.querySelectorAll('h1~h2,h1~h3,h1~h4,h1~h5,h1~h6').forEach(function (element) { + var url = encodeURI((document.location.origin == 'null' ? document.location.protocol + '//' + document.location.host : document.location.origin) + document.location.pathname); + var link = url + '#' + element.id; + var new_element = document.createElement('span'); + new_element.classList.add('anchor'); + if (!window.relearn.disableAnchorCopy) { + new_element.setAttribute('title', window.T_Copy_link_to_clipboard); } - function renderOpenAPI(oc) { - var relBasePath = window.relearn.relBasePath; - var assetBuster = window.themeUseOpenapi.assetsBuster; - var print = isPrint || attrs.isPrintPreview ? "PRINT-" : ""; - var theme = print ? `${relBasePath}/css/theme-relearn-light.css${assetBuster}` : document.querySelector( '#R-variant-style' ).attributes.href.value - var swagger_theme = variants.getColorValue( print + 'OPENAPI-theme' ); - var swagger_code_theme = variants.getColorValue( print + 'OPENAPI-CODE-theme' ); + new_element.setAttribute('data-clipboard-text', link); + new_element.innerHTML = ''; + element.appendChild(new_element); + }); - const openapiId = 'relearn-swagger-ui'; - const openapiIframeId = openapiId + "-iframe"; - const openapiIframe = document.getElementById(openapiIframeId); - if (openapiIframe) { - openapiIframe.remove(); + var anchors = document.querySelectorAll('.anchor'); + if (!window.relearn.disableAnchorCopy) { + for (var i = 0; i < anchors.length; i++) { + anchors[i].addEventListener('mouseleave', function (e) { + this.removeAttribute('aria-label'); + this.classList.remove('tooltipped', 'tooltipped-se', 'tooltipped-sw'); + }); + } + + var clip = new ClipboardJS('.anchor'); + clip.on('success', function (e) { + e.clearSelection(); + e.trigger.setAttribute('aria-label', window.T_Link_copied_to_clipboard); + e.trigger.classList.add('tooltipped', 'tooltipped-s' + (isRtl ? 'e' : 'w')); + if (!window.relearn.disableAnchorScrolling) { + e.trigger.parentElement.scrollIntoView({ behavior: 'smooth' }); + var state = window.history.state || {}; + state = Object.assign({}, typeof state === 'object' ? state : {}); + history.replaceState({}, '', e.text); + } + }); + } else if (!window.relearn.disableAnchorScrolling) { + for (var i = 0; i < anchors.length; i++) { + anchors[i].addEventListener('click', function (e) { + e.target.parentElement.parentElement.scrollIntoView({ behavior: 'smooth' }); + var state = window.history.state || {}; + state = Object.assign({}, typeof state === 'object' ? state : {}); + history.replaceState({}, '', e.text); + }); + } + } +} + +function initCodeClipboard() { + function getCodeText(node) { + // if highlight shortcode is used in inline lineno mode, remove lineno nodes before generating text, otherwise it doesn't hurt + var code = node.cloneNode(true); + Array.from(code.querySelectorAll('*:scope > span > span:first-child:not(:last-child)')).forEach(function (lineno) { + lineno.remove(); + }); + var text = code.textContent; + // remove a trailing line break, this may most likely + // come from the browser / Hugo transformation + text = text.replace(/\n$/, ''); + return text; + } + + function fallbackMessage(action) { + var actionMsg = ''; + var actionKey = action === 'cut' ? 'X' : 'C'; + if (/iPhone|iPad/i.test(navigator.userAgent)) { + actionMsg = 'No support :('; + } else if (/Mac/i.test(navigator.userAgent)) { + actionMsg = 'Press ⌘-' + actionKey + ' to ' + action; + } else { + actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action; + } + return actionMsg; + } + + document.addEventListener('copy', function (ev) { + // shabby FF generates empty lines on cursor selection that we need to filter out; see #925 + var selection = document.getSelection(); + var node = selection.anchorNode; + + // in case of GC, it works without this handler; + // instead GC fails if this handler is active, because it still contains + // the line number nodes with class 'ln' in the selection, although + // they are flagged with 'user-select: none;' see https://issues.chromium.org/issues/41393366; + // so in case of GC we don't want to do anything and bail out early in below code + function selectionContainsLnClass(selection) { + for (var i = 0; i < selection.rangeCount; i++) { + var range = selection.getRangeAt(i); + var fragment = range.cloneContents(); + if (fragment.querySelector('.ln')) { + return true; } - const openapiErrorId = openapiId + '-error'; - const openapiError = document.getElementById(openapiErrorId); - if (openapiError) { - openapiError.remove(); - } - const oi = document.createElement('iframe'); - oi.id = openapiIframeId; - oi.classList.toggle('sc-openapi-iframe', true); - oi.srcdoc = - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - 'Collapse all' + - 'Expand all' + - '
' + - '' + - '' + - ''; - oi.height = '100%'; - oi.width = '100%'; - oi.onload = function(){ - const openapiWrapper = getFirstAncestorByClass(oc, 'sc-openapi-wrapper'); - const openapiPromise = new Promise( function(resolve){ resolve() }); - openapiPromise - .then( function(){ - var options = { - defaultModelsExpandDepth: 2, - defaultModelExpandDepth: 2, - docExpansion: isPrint || attrs.isPrintPreview ? 'full' : 'list', - domNode: oi.contentWindow.document.getElementById(openapiId), - filter: !( isPrint || attrs.isPrintPreview ), - layout: 'BaseLayout', - onComplete: function(){ - if( isPrint || attrs.isPrintPreview ){ - oi.contentWindow.document.querySelectorAll( '.model-container > .model-box > button[aria-expanded=false]' ).forEach( function(btn){ btn.click() }); - setOpenAPIHeight(oi); - } - }, - plugins: [ - SwaggerUIBundle.plugins.DownloadUrl - ], - presets: [ - SwaggerUIBundle.presets.apis, - SwaggerUIStandalonePreset, - ], - syntaxHighlight: { - activated: true, - theme: swagger_code_theme, - }, - validatorUrl: 'none', - }; - if( oc.dataset.openapiSpec ){ - try{ - Object.assign( options, { spec: JSON.parse( oc.dataset.openapiSpec ) }); - } catch( err ){ - try{ - Object.assign( options, { spec: jsyaml.load( oc.dataset.openapiSpec ) }); - } catch( err ){ - console.error( 'OpenAPI: file "' + oc.dataset.openapiUrl + '" could not be parsed as JSON or YAML'); - } - } - } - else{ - Object.assign( options, { url: oc.dataset.openapiUrl }); - } - SwaggerUIBundle( options ); - }) - .then( function(){ - let observerCallback = function () { - setOpenAPIHeight(oi); - }; - let observer = new MutationObserver(observerCallback); - observer.observe(oi.contentWindow.document.documentElement, { - childList: true, - subtree: true, - }); - }) - .then( function(){ - if (openapiWrapper) { - openapiWrapper.classList.toggle('is-loading', false); - } - setOpenAPIHeight(oi); - }) - .catch( function(error){ - const ed = document.createElement('div'); - ed.classList.add('sc-alert', 'sc-alert-error'); - ed.innerHTML = error; - ed.id = openapiErrorId; - while (oc.lastChild) { - oc.removeChild(oc.lastChild); - } - if (openapiWrapper) { - openapiWrapper.classList.toggle('is-loading', false); - openapiWrapper.insertAdjacentElement('afterbegin', ed); - } - }); - }; - oc.appendChild(oi); + } + return false; } - function setOpenAPIHeight(oi) { - // add empirical offset if in print preview (GC 103) - oi.style.height = - (oi.contentWindow.document.documentElement.getBoundingClientRect().height + (attrs.isPrintPreview ? 200 : 0) )+ - 'px'; - } - function resizeOpenAPI() { - let divi = document.getElementsByClassName('sc-openapi-iframe'); - for (let i = 0; i < divi.length; i++) { - setOpenAPIHeight(divi[i]); + + if (!selectionContainsLnClass(selection)) { + while (node) { + // selection could start in a text node, so account for this as it + // obviously does not support `classList` + if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('highlight')) { + // only do this if we are inside of a code highlight node; + // now fix FFs selection by calculating the text ourself + var text = selection.toString(); + ev.clipboardData.setData('text/plain', text); + ev.preventDefault(); + break; } + node = node.parentNode; + } + } + }); + + var codeElements = document.querySelectorAll('code'); + for (var i = 0; i < codeElements.length; i++) { + var code = codeElements[i]; + var text = getCodeText(code); + var inPre = code.parentNode.tagName.toLowerCase() == 'pre'; + var inTable = inPre && code.parentNode.parentNode.tagName.toLowerCase() == 'td' && code.parentNode.parentNode.classList.contains('lntd'); + // avoid copy-to-clipboard for highlight shortcode in table lineno mode + var isFirstLineCell = inTable && code.parentNode.parentNode.parentNode.querySelector('td:first-child > pre > code') == code; + + if (!isFirstLineCell && (inPre || text.length > 5)) { + code.classList.add('copy-to-clipboard-code'); + if (inPre) { + code.classList.add('copy-to-clipboard'); + code.parentNode.classList.add('pre-code'); + } else { + var clone = code.cloneNode(true); + var span = document.createElement('span'); + span.classList.add('copy-to-clipboard'); + span.appendChild(clone); + code.parentNode.replaceChild(span, code); + code = clone; + } + var button = document.createElement('span'); + button.classList.add('copy-to-clipboard-button'); + button.setAttribute('title', window.T_Copy_to_clipboard); + button.innerHTML = ''; + button.addEventListener('mouseleave', function () { + this.removeAttribute('aria-label'); + this.classList.remove('tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw'); + }); + if (inTable) { + var table = code.parentNode.parentNode.parentNode.parentNode.parentNode; + table.dataset.code = text; + table.parentNode.insertBefore(button, table.nextSibling); + } else if (inPre) { + var pre = code.parentNode; + pre.dataset.code = text; + var p = pre.parentNode; + // indented code blocks are missing the div + while (p != document && (p.tagName.toLowerCase() != 'div' || !p.classList.contains('highlight'))) { + p = p.parentNode; + } + if (p == document) { + var clone = pre.cloneNode(true); + var div = document.createElement('div'); + div.classList.add('highlight'); + div.appendChild(clone); + pre.parentNode.replaceChild(div, pre); + pre = clone; + } + pre.parentNode.insertBefore(button, pre.nextSibling); + } else { + code.dataset.code = text; + code.parentNode.insertBefore(button, code.nextSibling); + } + } + } + + var clip = new ClipboardJS('.copy-to-clipboard-button', { + text: function (trigger) { + if (!trigger.previousElementSibling) { + return ''; + } + return trigger.previousElementSibling.dataset.code || ''; + }, + }); + + clip.on('success', function (e) { + e.clearSelection(); + var inPre = e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'pre'; + var isCodeRtl = !inPre ? isRtl : false; + var doBeside = inPre || (e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'table'); + e.trigger.setAttribute('aria-label', window.T_Copied_to_clipboard); + e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isCodeRtl ? 'e' : 'w'))); + }); + + clip.on('error', function (e) { + var inPre = e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'pre'; + var isCodeRtl = !inPre ? isRtl : false; + var doBeside = inPre || (e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'table'); + e.trigger.setAttribute('aria-label', fallbackMessage(e.action)); + e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isCodeRtl ? 'e' : 'w'))); + var f = function () { + e.trigger.setAttribute('aria-label', window.T_Copied_to_clipboard); + e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isCodeRtl ? 'e' : 'w'))); + document.removeEventListener('copy', f); }; - let divo = document.getElementsByClassName('sc-openapi-container'); - for (let i = 0; i < divo.length; i++) { - renderOpenAPI(divo[i]); - } - if (divo.length) { - addFunctionToResizeEvent(resizeOpenAPI); - } + document.addEventListener('copy', f); + }); } -function initAnchorClipboard(){ - if( window.relearn.disableAnchorCopy && window.relearn.disableAnchorScrolling ){ - return; - } - - document.querySelectorAll( 'h1~h2,h1~h3,h1~h4,h1~h5,h1~h6').forEach( function( element ){ - var url = encodeURI( (document.location.origin == "null" ? (document.location.protocol + "//" + document.location.host) : document.location.origin )+ document.location.pathname); - var link = url + "#" + element.id; - var new_element = document.createElement( 'span' ); - new_element.classList.add( 'anchor' ); - if( !window.relearn.disableAnchorCopy ){ - new_element.setAttribute( 'title', window.T_Copy_link_to_clipboard ); - } - new_element.setAttribute( 'data-clipboard-text', link ); - new_element.innerHTML = ''; - element.appendChild( new_element ); - }); - - var anchors = document.querySelectorAll( '.anchor' ); - if( !window.relearn.disableAnchorCopy ){ - for( var i = 0; i < anchors.length; i++ ) { - anchors[i].addEventListener( 'mouseleave', function( e ){ - this.removeAttribute( 'aria-label' ); - this.classList.remove( 'tooltipped', 'tooltipped-se', 'tooltipped-sw' ); - }); - } - - var clip = new ClipboardJS( '.anchor' ); - clip.on( 'success', function( e ){ - e.clearSelection(); - e.trigger.setAttribute( 'aria-label', window.T_Link_copied_to_clipboard ); - e.trigger.classList.add( 'tooltipped', 'tooltipped-s'+(isRtl?'e':'w') ); - if( !window.relearn.disableAnchorScrolling ){ - e.trigger.parentElement.scrollIntoView({ behavior: 'smooth' }); - var state = window.history.state || {}; - state = Object.assign( {}, ( typeof state === 'object' ) ? state : {} ); - history.replaceState( {}, '', e.text ); - } - }); - } - else if ( !window.relearn.disableAnchorScrolling ){ - for( var i = 0; i < anchors.length; i++ ) { - anchors[i].addEventListener( 'click', function( e ){ - e.target.parentElement.parentElement.scrollIntoView({ behavior: 'smooth' }); - var state = window.history.state || {}; - state = Object.assign( {}, ( typeof state === 'object' ) ? state : {} ); - history.replaceState( {}, '', e.text ); - }); - } - } +function initChroma(update) { + var chroma = variants.getColorValue('CODE-theme'); + var link = document.querySelector('#R-variant-chroma-style'); + var old_path = link.getAttribute('href'); + var new_path = old_path.replace(/^(.*\/chroma-).*?(\.css.*)$/, '$1' + chroma + '$2'); + link.setAttribute('href', new_path); } -function initCodeClipboard(){ - function getCodeText( node ){ - // if highlight shortcode is used in inline lineno mode, remove lineno nodes before generating text, otherwise it doesn't hurt - var code = node.cloneNode( true ); - Array.from( code.querySelectorAll( '*:scope > span > span:first-child:not(:last-child)' ) ).forEach( function( lineno ){ - lineno.remove(); - }); - var text = code.textContent; - // remove a trailing line break, this may most likely - // come from the browser / Hugo transformation - text = text.replace( /\n$/, '' ); - return text; - } +function initArrowVerticalNav() { + var topMain = 0; + if (!isPrint) { + topMain = document.querySelector('main').getClientRects()[0].top; + } - function fallbackMessage( action ){ - var actionMsg = ''; - var actionKey = (action === 'cut' ? 'X' : 'C'); - if (/iPhone|iPad/i.test(navigator.userAgent)) { - actionMsg = 'No support :('; - } - else if (/Mac/i.test(navigator.userAgent)) { - actionMsg = 'Press ⌘-' + actionKey + ' to ' + action; - } - else { - actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action; - } - return actionMsg; - } - - document.addEventListener( 'copy', function( ev ){ - // shabby FF generates empty lines on cursor selection that we need to filter out; see #925 - var selection = document.getSelection(); - var node = selection.anchorNode; - - // in case of GC, it works without this handler; - // instead GC fails if this handler is active, because it still contains - // the line number nodes with class 'ln' in the selection, although - // they are flagged with 'user-select: none;' see https://issues.chromium.org/issues/41393366; - // so in case of GC we don't want to do anything and bail out early in below code - function selectionContainsLnClass( selection ) { - for (var i = 0; i < selection.rangeCount; i++) { - var range = selection.getRangeAt(i); - var fragment = range.cloneContents(); - if (fragment.querySelector('.ln')) { - return true; - } - } - return false; - } - - if( !selectionContainsLnClass( selection ) ){ - while( node ){ - // selection could start in a text node, so account for this as it - // obviously does not support `classList` - if( node.nodeType === Node.ELEMENT_NODE && node.classList.contains( 'highlight' ) ){ - // only do this if we are inside of a code highlight node; - // now fix FFs selection by calculating the text ourself - var text = selection.toString(); - ev.clipboardData.setData( 'text/plain', text ); - ev.preventDefault(); - break; - } - node = node.parentNode; - } - } - }); - - var codeElements = document.querySelectorAll( 'code' ); - for( var i = 0; i < codeElements.length; i++ ){ - var code = codeElements[i]; - var text = getCodeText( code ); - var inPre = code.parentNode.tagName.toLowerCase() == 'pre'; - var inTable = inPre && - code.parentNode.parentNode.tagName.toLowerCase() == 'td' && - code.parentNode.parentNode.classList.contains('lntd'); - // avoid copy-to-clipboard for highlight shortcode in table lineno mode - var isFirstLineCell = inTable && - code.parentNode.parentNode.parentNode.querySelector( 'td:first-child > pre > code' ) == code; - - if( !isFirstLineCell && ( inPre || text.length > 5 ) ){ - code.classList.add( 'copy-to-clipboard-code' ); - if( inPre ){ - code.classList.add( 'copy-to-clipboard' ); - code.parentNode.classList.add( 'pre-code' ); - } - else{ - var clone = code.cloneNode( true ); - var span = document.createElement( 'span' ); - span.classList.add( 'copy-to-clipboard' ); - span.appendChild( clone ); - code.parentNode.replaceChild( span, code ); - code = clone; - } - var button = document.createElement( 'span' ); - button.classList.add( 'copy-to-clipboard-button' ); - button.setAttribute( 'title', window.T_Copy_to_clipboard ); - button.innerHTML = ''; - button.addEventListener( 'mouseleave', function() { - this.removeAttribute( 'aria-label' ); - this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' ); - }); - if( inTable ){ - var table = code.parentNode.parentNode.parentNode.parentNode.parentNode; - table.dataset.code = text; - table.parentNode.insertBefore( button, table.nextSibling ); - } - else if( inPre ){ - var pre = code.parentNode; - pre.dataset.code = text; - var p = pre.parentNode; - // indented code blocks are missing the div - while( p != document && ( p.tagName.toLowerCase() != 'div' || !p.classList.contains( 'highlight' ) ) ){ - p = p.parentNode; - } - if( p == document ){ - var clone = pre.cloneNode( true ); - var div = document.createElement( 'div' ); - div.classList.add( 'highlight' ); - div.appendChild( clone ); - pre.parentNode.replaceChild( div, pre ); - pre = clone; - } - pre.parentNode.insertBefore( button, pre.nextSibling ); - } - else{ - code.dataset.code = text; - code.parentNode.insertBefore( button, code.nextSibling ); - } - } - } - - var clip = new ClipboardJS( '.copy-to-clipboard-button', { - text: function( trigger ){ - if( !trigger.previousElementSibling ){ - return ''; - } - return trigger.previousElementSibling.dataset.code || ''; - } - }); - - clip.on( 'success', function( e ){ - e.clearSelection(); - var inPre = e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'pre'; - var isCodeRtl = !inPre ? isRtl : false; - var doBeside = inPre || (e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'table' ); - e.trigger.setAttribute( 'aria-label', window.T_Copied_to_clipboard ); - e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isCodeRtl?'e':'w')) ); - }); - - clip.on( 'error', function( e ){ - var inPre = e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'pre'; - var isCodeRtl = !inPre ? isRtl : false; - var doBeside = inPre || (e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'table' ); - e.trigger.setAttribute( 'aria-label', fallbackMessage(e.action) ); - e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isCodeRtl?'e':'w')) ); - var f = function(){ - e.trigger.setAttribute( 'aria-label', window.T_Copied_to_clipboard ); - e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isCodeRtl?'e':'w')) ); - document.removeEventListener( 'copy', f ); - }; - document.addEventListener( 'copy', f ); - }); -} - -function initChroma( update ){ - var chroma = variants.getColorValue( 'CODE-theme' ); - var link = document.querySelector( '#R-variant-chroma-style' ); - var old_path = link.getAttribute( 'href' ); - var new_path = old_path.replace( /^(.*\/chroma-).*?(\.css.*)$/, '$1' + chroma + '$2' ); - link.setAttribute( 'href', new_path ); -} - -function initArrowVerticalNav(){ - var topMain = 0; - if( !isPrint ){ - topMain = document.querySelector("main").getClientRects()[0].top; - } - - document.addEventListener('keydown', function(event){ - var elems = Array.from( document.querySelectorAll( `main :not(.include.hide-first-heading) > :where( + document.addEventListener('keydown', function (event) { + var elems = Array.from( + document.querySelectorAll(`main :not(.include.hide-first-heading) > :where( .article-subheading, :not(.article-subheading) + h1:not(.a11y-only), h1:not(.a11y-only):first-child, h2, h3, h4, h5, h6 ), main .include.hide-first-heading > :where( h1, h2, h3, h4, h5, h6 ) ~ :where( h1, h2, h3, h4, h5, h6 ) - ` )); - if( !event.shiftKey && !event.ctrlKey && event.altKey && !event.metaKey ){ - if( event.which == 38 ){ // up - var target = isPrint ? document.querySelector( '#R-body' ) : document.querySelector( '.flex-block-wrapper' ); - elems.some( function( elem, i ){ - var top = elem.getBoundingClientRect().top; - var topBoundary = top - topMain; - if( topBoundary > -1 ){ - target.scrollIntoView(); - return true; - } - target = elem - }) - } - else if( event.which == 40 ){ // down - elems.some( function( elem, i ){ - var top = elem.getBoundingClientRect().top; - var topBoundary = top - topMain; - if( topBoundary > -1 && topBoundary < 1 ){ - if( i+1 < elems.length ){ - var target = elems[ i+1 ]; - target.scrollIntoView(); - } - return true; - } - if( topBoundary >= 1 ){ - var target = elem; - target.scrollIntoView(); - return true; - } - }) - } - } - }); -} - -function initArrowHorizontalNav(){ - if( isPrint ){ - return; - } - - // button navigation - var prev = document.querySelector( '.topbar-button-prev a' ); - prev && prev.addEventListener( 'click', navPrev ); - var next = document.querySelector( '.topbar-button-next a' ); - next && next.addEventListener( 'click', navNext ); - - // keyboard navigation - // avoid prev/next navigation if we are not at the start/end of the - // horizontal area - var el = document.querySelector('#R-body-inner'); - var scrollStart = 0; - var scrollEnd = 0; - document.addEventListener('keydown', function(event){ - if( !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey ){ - var f = event.target.matches( formelements ); - if( f ){ - return; - } - if( event.which == dir_key_start ){ - if( !scrollStart && +el.scrollLeft.toFixed()*dir_scroll <= 0 ){ - prev && prev.click(); - } - else if( scrollStart != -1 ){ - clearTimeout( scrollStart ); - } - scrollStart = -1; - } - if( event.which == dir_key_end ){ - if( !scrollEnd && +el.scrollLeft.toFixed()*dir_scroll + +el.clientWidth.toFixed() >= +el.scrollWidth.toFixed() ){ - next && next.click(); - } - else if( scrollEnd != -1 ){ - clearTimeout( scrollEnd ); - } - scrollEnd = -1; - } - } - }); - document.addEventListener('keyup', function(event){ - if( !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey ){ - var f = event.target.matches( formelements ); - if( f ){ - return; - } - if( event.which == dir_key_start ){ - // check for false indication if keyup is delayed after navigation - if( scrollStart == -1 ){ - scrollStart = setTimeout( function(){ scrollStart = 0; }, 300 ); - } - } - if( event.which == dir_key_end ){ - if( scrollEnd == -1 ){ - scrollEnd = setTimeout( function(){ scrollEnd = 0; }, 300 ); - } - } - } - }); -} - -function initMenuScrollbar(){ - if( isPrint ){ - return; - } - - var elm = document.querySelector('#R-content-wrapper'); - var elt = document.querySelector('.topbar-button.topbar-flyout .topbar-content-wrapper'); - - var autofocus = true; - document.addEventListener('keydown', function(event){ - // for initial keyboard scrolling support, no element - // may be hovered, but we still want to react on - // cursor/page up/down. because we can't hack - // the scrollbars implementation, we try to trick - // it and give focus to the scrollbar - only - // to just remove the focus right after scrolling - // happend - autofocus = false; - if( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey || event.which < 32 || event.which > 40 ){ - // if tab key was pressed, we are ended with our initial - // focus job - return; - } - - var c = elc && elc.matches(':hover'); - var m = elm && elm.matches(':hover'); - var t = elt && elt.matches(':hover'); - var f = event.target.matches( formelements ); - if( !c && !m && !t && !f ){ - // only do this hack if none of our scrollbars - // is hovered - // if we are showing the sidebar as a flyout we - // want to scroll the content-wrapper, otherwise we want - // to scroll the body - var nt = document.querySelector('body').matches('.topbar-flyout'); - var nm = document.querySelector('body').matches('.sidebar-flyout'); - if( nt ){ - var psb = pst.get( document.querySelector('.topbar-button.topbar-flyout') ); - psb && psb.scrollbarY.focus(); - } - else if( nm ){ - psm && psm.scrollbarY.focus(); - } - else{ - document.querySelector('#R-body-inner').focus(); - psc && psc.scrollbarY.focus(); - } - } - }); - // scrollbars will install their own keyboard handlers - // that need to be executed inbetween our own handlers - // PSC removed for #242 #243 #244 - // psc = elc && new PerfectScrollbar('#R-body-inner'); - psm = elm && new PerfectScrollbar('#R-content-wrapper', { scrollingThreshold: 2000, swipeEasing: false, wheelPropagation: false }); - document.querySelectorAll('.topbar-button .topbar-content-wrapper').forEach( function( e ){ - var button = getTopbarButtonParent( e ); - if( !button ){ - return; - } - pst.set( button, new PerfectScrollbar( e, { scrollingThreshold: 2000, swipeEasing: false, wheelPropagation: false }) ); - e.addEventListener( 'click', toggleTopbarFlyoutEvent ); - }); - - document.addEventListener('keydown', function(){ - // if we facked initial scrolling, we want to - // remove the focus to not leave visual markers on - // the scrollbar - if( autofocus ){ - psc && psc.scrollbarY.blur(); - psm && psm.scrollbarY.blur(); - pst.forEach( function( psb ){ - psb.scrollbarY.blur(); - }); - autofocus = false; - } - }); - // on resize, we have to redraw the scrollbars to let new height - // affect their size - window.addEventListener('resize', function(){ - pst.forEach( function( psb ){ - setTimeout( function(){ psb.update(); }, 10 ); + `) + ); + if (!event.shiftKey && !event.ctrlKey && event.altKey && !event.metaKey) { + if (event.which == 38) { + // up + var target = isPrint ? document.querySelector('#R-body') : document.querySelector('.flex-block-wrapper'); + elems.some(function (elem, i) { + var top = elem.getBoundingClientRect().top; + var topBoundary = top - topMain; + if (topBoundary > -1) { + target.scrollIntoView(); + return true; + } + target = elem; }); - psm && setTimeout( function(){ psm.update(); }, 10 ); - psc && setTimeout( function(){ psc.update(); }, 10 ); - }); - // now that we may have collapsible menus, we need to call a resize - // for the menu scrollbar if sections are expanded/collapsed - document.querySelectorAll('#R-sidebar .collapsible-menu input').forEach( function(e){ - e.addEventListener('change', function(){ - psm && setTimeout( function(){ psm.update(); }, 10 ); + } else if (event.which == 40) { + // down + elems.some(function (elem, i) { + var top = elem.getBoundingClientRect().top; + var topBoundary = top - topMain; + if (topBoundary > -1 && topBoundary < 1) { + if (i + 1 < elems.length) { + var target = elems[i + 1]; + target.scrollIntoView(); + } + return true; + } + if (topBoundary >= 1) { + var target = elem; + target.scrollIntoView(); + return true; + } }); - }); - // bugfix for PS in RTL mode: the initial scrollbar position is off; - // calling update() once, fixes this - pst.forEach( function( psb ){ - setTimeout( function(){ psb.update(); }, 10 ); - }); - psm && setTimeout( function(){ psm.update(); }, 10 ); - psc && setTimeout( function(){ psc.update(); }, 10 ); - - // finally, we want to adjust the contents end padding if there is a scrollbar visible - window.addEventListener('resize', adjustContentWidth ); - adjustContentWidth(); -} - -function imageEscapeHandler( event ){ - if( event.key == "Escape" ){ - var image = event.target; - image.click(); + } } + }); } -function navShortcutHandler( event ){ - if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 78 /* n */ ){ - toggleNav(); - } -} +function initArrowHorizontalNav() { + if (isPrint) { + return; + } -function searchShortcutHandler( event ){ - if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 70 /* f */ ){ - showSearch(); - } -} + // button navigation + var prev = document.querySelector('.topbar-button-prev a'); + prev && prev.addEventListener('click', navPrev); + var next = document.querySelector('.topbar-button-next a'); + next && next.addEventListener('click', navNext); -function tocShortcutHandler( event ){ - if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 84 /* t */ ){ - toggleToc(); - } -} - -function editShortcutHandler( event ){ - if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 87 /* w */ ){ - showEdit(); - } -} - -function printShortcutHandler( event ){ - if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 80 /* p */ ){ - showPrint(); - } -} - -function showSearch(){ - var s = document.querySelector( '#R-search-by' ); - if( !s ){ + // keyboard navigation + // avoid prev/next navigation if we are not at the start/end of the + // horizontal area + var el = document.querySelector('#R-body-inner'); + var scrollStart = 0; + var scrollEnd = 0; + document.addEventListener('keydown', function (event) { + if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) { + var f = event.target.matches(formelements); + if (f) { return; - } - var b = document.querySelector( 'body' ); - if( s == document.activeElement ){ - if( b.classList.contains( 'sidebar-flyout' ) ){ - closeNav(); + } + if (event.which == dir_key_start) { + if (!scrollStart && +el.scrollLeft.toFixed() * dir_scroll <= 0) { + prev && prev.click(); + } else if (scrollStart != -1) { + clearTimeout(scrollStart); } - documentFocus(); - } else { - if( !b.classList.contains( 'sidebar-flyout' ) ){ - openNav(); + scrollStart = -1; + } + if (event.which == dir_key_end) { + if (!scrollEnd && +el.scrollLeft.toFixed() * dir_scroll + +el.clientWidth.toFixed() >= +el.scrollWidth.toFixed()) { + next && next.click(); + } else if (scrollEnd != -1) { + clearTimeout(scrollEnd); } - s.focus(); + scrollEnd = -1; + } } + }); + document.addEventListener('keyup', function (event) { + if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) { + var f = event.target.matches(formelements); + if (f) { + return; + } + if (event.which == dir_key_start) { + // check for false indication if keyup is delayed after navigation + if (scrollStart == -1) { + scrollStart = setTimeout(function () { + scrollStart = 0; + }, 300); + } + } + if (event.which == dir_key_end) { + if (scrollEnd == -1) { + scrollEnd = setTimeout(function () { + scrollEnd = 0; + }, 300); + } + } + } + }); } -function openNav(){ - closeSomeTopbarButtonFlyout(); - var b = document.querySelector( 'body' ); - b.classList.add( 'sidebar-flyout' ); - psm && setTimeout( function(){ psm.update(); }, 10 ); - psm && psm.scrollbarY.focus(); - var a = document.querySelector( '#R-sidebar a' ) - if( a ){ - a.focus(); +function initMenuScrollbar() { + if (isPrint) { + return; + } + + var elm = document.querySelector('#R-content-wrapper'); + var elt = document.querySelector('.topbar-button.topbar-flyout .topbar-content-wrapper'); + + var autofocus = true; + document.addEventListener('keydown', function (event) { + // for initial keyboard scrolling support, no element + // may be hovered, but we still want to react on + // cursor/page up/down. because we can't hack + // the scrollbars implementation, we try to trick + // it and give focus to the scrollbar - only + // to just remove the focus right after scrolling + // happend + autofocus = false; + if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey || event.which < 32 || event.which > 40) { + // if tab key was pressed, we are ended with our initial + // focus job + return; } + + var c = elc && elc.matches(':hover'); + var m = elm && elm.matches(':hover'); + var t = elt && elt.matches(':hover'); + var f = event.target.matches(formelements); + if (!c && !m && !t && !f) { + // only do this hack if none of our scrollbars + // is hovered + // if we are showing the sidebar as a flyout we + // want to scroll the content-wrapper, otherwise we want + // to scroll the body + var nt = document.querySelector('body').matches('.topbar-flyout'); + var nm = document.querySelector('body').matches('.sidebar-flyout'); + if (nt) { + var psb = pst.get(document.querySelector('.topbar-button.topbar-flyout')); + psb && psb.scrollbarY.focus(); + } else if (nm) { + psm && psm.scrollbarY.focus(); + } else { + document.querySelector('#R-body-inner').focus(); + psc && psc.scrollbarY.focus(); + } + } + }); + // scrollbars will install their own keyboard handlers + // that need to be executed inbetween our own handlers + // PSC removed for #242 #243 #244 + // psc = elc && new PerfectScrollbar('#R-body-inner'); + psm = elm && new PerfectScrollbar('#R-content-wrapper', { scrollingThreshold: 2000, swipeEasing: false, wheelPropagation: false }); + document.querySelectorAll('.topbar-button .topbar-content-wrapper').forEach(function (e) { + var button = getTopbarButtonParent(e); + if (!button) { + return; + } + pst.set(button, new PerfectScrollbar(e, { scrollingThreshold: 2000, swipeEasing: false, wheelPropagation: false })); + e.addEventListener('click', toggleTopbarFlyoutEvent); + }); + + document.addEventListener('keydown', function () { + // if we facked initial scrolling, we want to + // remove the focus to not leave visual markers on + // the scrollbar + if (autofocus) { + psc && psc.scrollbarY.blur(); + psm && psm.scrollbarY.blur(); + pst.forEach(function (psb) { + psb.scrollbarY.blur(); + }); + autofocus = false; + } + }); + // on resize, we have to redraw the scrollbars to let new height + // affect their size + window.addEventListener('resize', function () { + pst.forEach(function (psb) { + setTimeout(function () { + psb.update(); + }, 10); + }); + psm && + setTimeout(function () { + psm.update(); + }, 10); + psc && + setTimeout(function () { + psc.update(); + }, 10); + }); + // now that we may have collapsible menus, we need to call a resize + // for the menu scrollbar if sections are expanded/collapsed + document.querySelectorAll('#R-sidebar .collapsible-menu input').forEach(function (e) { + e.addEventListener('change', function () { + psm && + setTimeout(function () { + psm.update(); + }, 10); + }); + }); + // bugfix for PS in RTL mode: the initial scrollbar position is off; + // calling update() once, fixes this + pst.forEach(function (psb) { + setTimeout(function () { + psb.update(); + }, 10); + }); + psm && + setTimeout(function () { + psm.update(); + }, 10); + psc && + setTimeout(function () { + psc.update(); + }, 10); + + // finally, we want to adjust the contents end padding if there is a scrollbar visible + window.addEventListener('resize', adjustContentWidth); + adjustContentWidth(); } -function closeNav(){ - var b = document.querySelector( 'body' ); - b.classList.remove( 'sidebar-flyout' ); +function imageEscapeHandler(event) { + if (event.key == 'Escape') { + var image = event.target; + image.click(); + } +} + +function navShortcutHandler(event) { + if (!event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 78 /* n */) { + toggleNav(); + } +} + +function searchShortcutHandler(event) { + if (!event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 70 /* f */) { + showSearch(); + } +} + +function tocShortcutHandler(event) { + if (!event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 84 /* t */) { + toggleToc(); + } +} + +function editShortcutHandler(event) { + if (!event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 87 /* w */) { + showEdit(); + } +} + +function printShortcutHandler(event) { + if (!event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 80 /* p */) { + showPrint(); + } +} + +function showSearch() { + var s = document.querySelector('#R-search-by'); + if (!s) { + return; + } + var b = document.querySelector('body'); + if (s == document.activeElement) { + if (b.classList.contains('sidebar-flyout')) { + closeNav(); + } documentFocus(); + } else { + if (!b.classList.contains('sidebar-flyout')) { + openNav(); + } + s.focus(); + } } -function toggleNav(){ - var b = document.querySelector( 'body' ); - if( b.classList.contains( 'sidebar-flyout' ) ){ - closeNav(); - } - else{ - openNav(); - } +function openNav() { + closeSomeTopbarButtonFlyout(); + var b = document.querySelector('body'); + b.classList.add('sidebar-flyout'); + psm && + setTimeout(function () { + psm.update(); + }, 10); + psm && psm.scrollbarY.focus(); + var a = document.querySelector('#R-sidebar a'); + if (a) { + a.focus(); + } } -function navEscapeHandler( event ){ - if( event.key == "Escape" ){ - closeNav(); - } +function closeNav() { + var b = document.querySelector('body'); + b.classList.remove('sidebar-flyout'); + documentFocus(); } -function getTopbarButtonParent( e ){ - var button = e; - while( button && !button.classList.contains( 'topbar-button' ) ){ - button = button.parentElement; - } - return button; -} - -function openTopbarButtonFlyout( button ){ +function toggleNav() { + var b = document.querySelector('body'); + if (b.classList.contains('sidebar-flyout')) { closeNav(); - var body = document.querySelector( 'body' ); - button.classList.add( 'topbar-flyout' ); - body.classList.add( 'topbar-flyout' ); - var psb = pst.get( button ); - psb && setTimeout( function(){ psb.update(); }, 10 ); - psb && psb.scrollbarY.focus(); - var a = button.querySelector( '.topbar-content-wrapper a' ); - if( a ){ - a.focus(); - } + } else { + openNav(); + } } -function closeTopbarButtonFlyout( button ){ - var body = document.querySelector( 'body' ); - button.classList.remove( 'topbar-flyout' ); - body.classList.remove( 'topbar-flyout' ); - documentFocus(); +function navEscapeHandler(event) { + if (event.key == 'Escape') { + closeNav(); + } } -function closeSomeTopbarButtonFlyout(){ - var someButton = document.querySelector( '.topbar-button.topbar-flyout' ); - if( someButton ){ - closeTopbarButtonFlyout( someButton ); - }; - return someButton +function getTopbarButtonParent(e) { + var button = e; + while (button && !button.classList.contains('topbar-button')) { + button = button.parentElement; + } + return button; } -function toggleTopbarButtonFlyout( button ){ - var someButton = closeSomeTopbarButtonFlyout(); - if( button && button != someButton ){ - openTopbarButtonFlyout( button ); - } +function openTopbarButtonFlyout(button) { + closeNav(); + var body = document.querySelector('body'); + button.classList.add('topbar-flyout'); + body.classList.add('topbar-flyout'); + var psb = pst.get(button); + psb && + setTimeout(function () { + psb.update(); + }, 10); + psb && psb.scrollbarY.focus(); + var a = button.querySelector('.topbar-content-wrapper a'); + if (a) { + a.focus(); + } } -function toggleTopbarFlyout( e ){ - var button = getTopbarButtonParent( e ); - if( !button ){ - return; - } - toggleTopbarButtonFlyout( button ); +function closeTopbarButtonFlyout(button) { + var body = document.querySelector('body'); + button.classList.remove('topbar-flyout'); + body.classList.remove('topbar-flyout'); + documentFocus(); } -function toggleTopbarFlyoutEvent( event ){ - if( event.target.classList.contains( 'topbar-content' ) - || event.target.classList.contains( 'topbar-content-wrapper' ) - || event.target.classList.contains( 'ps__rail-x' ) - || event.target.classList.contains( 'ps__rail-y' ) - || event.target.classList.contains( 'ps__thumb-x' ) - || event.target.classList.contains( 'ps__thumb-y' ) - ){ - // the scrollbar was used, don't close flyout - return; - } - toggleTopbarFlyout( event.target ) +function closeSomeTopbarButtonFlyout() { + var someButton = document.querySelector('.topbar-button.topbar-flyout'); + if (someButton) { + closeTopbarButtonFlyout(someButton); + } + return someButton; } -function topbarFlyoutEscapeHandler( event ){ - if( event.key == "Escape" ){ - closeSomeTopbarButtonFlyout(); - } +function toggleTopbarButtonFlyout(button) { + var someButton = closeSomeTopbarButtonFlyout(); + if (button && button != someButton) { + openTopbarButtonFlyout(button); + } } -function toggleToc(){ - toggleTopbarButtonFlyout( document.querySelector( '.topbar-button-toc' ) ); +function toggleTopbarFlyout(e) { + var button = getTopbarButtonParent(e); + if (!button) { + return; + } + toggleTopbarButtonFlyout(button); } -function showEdit(){ - var l = document.querySelector( '.topbar-button-edit a' ); - if( l ){ - l.click(); - } +function toggleTopbarFlyoutEvent(event) { + if (event.target.classList.contains('topbar-content') || event.target.classList.contains('topbar-content-wrapper') || event.target.classList.contains('ps__rail-x') || event.target.classList.contains('ps__rail-y') || event.target.classList.contains('ps__thumb-x') || event.target.classList.contains('ps__thumb-y')) { + // the scrollbar was used, don't close flyout + return; + } + toggleTopbarFlyout(event.target); } -function showPrint(){ - var l = document.querySelector( '.topbar-button-print a' ); - if( l ){ - l.click(); - } +function topbarFlyoutEscapeHandler(event) { + if (event.key == 'Escape') { + closeSomeTopbarButtonFlyout(); + } } -function navPrev(){ - var e = document.querySelector( '.topbar-button-prev a' ); - location.href = e && e.getAttribute( 'href' ); -}; - -function navNext(){ - var e = document.querySelector( '.topbar-button-next a' ); - location.href = e && e.getAttribute( 'href' ); -}; - -function initToc(){ - if( isPrint ){ - return; - } - - document.addEventListener( 'keydown', editShortcutHandler ); - document.addEventListener( 'keydown', navShortcutHandler ); - document.addEventListener( 'keydown', printShortcutHandler ); - document.addEventListener( 'keydown', searchShortcutHandler ); - document.addEventListener( 'keydown', tocShortcutHandler ); - document.addEventListener( 'keydown', navEscapeHandler ); - document.addEventListener( 'keydown', topbarFlyoutEscapeHandler ); - - var b = document.querySelector( '#R-body-overlay' ); - if( b ){ - b.addEventListener( 'click', closeNav ); - } - var m = document.querySelector( '#R-main-overlay' ); - if( m ){ - m.addEventListener( 'click', closeSomeTopbarButtonFlyout ); - } - - // finally give initial focus to allow keyboard scrolling in FF - documentFocus(); +function toggleToc() { + toggleTopbarButtonFlyout(document.querySelector('.topbar-button-toc')); } -function initSwipeHandler(){ - if( !touchsupport ){ - return; - } +function showEdit() { + var l = document.querySelector('.topbar-button-edit a'); + if (l) { + l.click(); + } +} - var startx = null; - var starty = null; - var handleStartX = function(evt) { +function showPrint() { + var l = document.querySelector('.topbar-button-print a'); + if (l) { + l.click(); + } +} + +function navPrev() { + var e = document.querySelector('.topbar-button-prev a'); + location.href = e && e.getAttribute('href'); +} + +function navNext() { + var e = document.querySelector('.topbar-button-next a'); + location.href = e && e.getAttribute('href'); +} + +function initToc() { + if (isPrint) { + return; + } + + document.addEventListener('keydown', editShortcutHandler); + document.addEventListener('keydown', navShortcutHandler); + document.addEventListener('keydown', printShortcutHandler); + document.addEventListener('keydown', searchShortcutHandler); + document.addEventListener('keydown', tocShortcutHandler); + document.addEventListener('keydown', navEscapeHandler); + document.addEventListener('keydown', topbarFlyoutEscapeHandler); + + var b = document.querySelector('#R-body-overlay'); + if (b) { + b.addEventListener('click', closeNav); + } + var m = document.querySelector('#R-main-overlay'); + if (m) { + m.addEventListener('click', closeSomeTopbarButtonFlyout); + } + + // finally give initial focus to allow keyboard scrolling in FF + documentFocus(); +} + +function initSwipeHandler() { + if (!touchsupport) { + return; + } + + var startx = null; + var starty = null; + var handleStartX = function (evt) { + startx = evt.touches[0].clientX; + starty = evt.touches[0].clientY; + }; + var handleMoveX = function (evt) { + if (startx !== null) { + var diffx = startx - evt.touches[0].clientX; + var diffy = starty - evt.touches[0].clientY || 0.1; + if (diffx / Math.abs(diffy) < 2) { + // detect mostly vertical swipes and reset our starting pos + // to not detect a horizontal move if vertical swipe is unprecise startx = evt.touches[0].clientX; - starty = evt.touches[0].clientY; - }; - var handleMoveX = function(evt) { - if( startx !== null ){ - var diffx = startx - evt.touches[0].clientX; - var diffy = starty - evt.touches[0].clientY || .1 ; - if( diffx / Math.abs( diffy ) < 2 ){ - // detect mostly vertical swipes and reset our starting pos - // to not detect a horizontal move if vertical swipe is unprecise - startx = evt.touches[0].clientX; - } - else if( diffx > 30 ){ - startx = null; - starty = null; - closeNav(); - } - } - }; - var handleEndX = function(evt) { + } else if (diffx > 30) { startx = null; starty = null; - }; + closeNav(); + } + } + }; + var handleEndX = function (evt) { + startx = null; + starty = null; + }; - var s = document.querySelector( '#R-body-overlay' ); - s && s.addEventListener("touchstart", handleStartX, { capture: false, passive: true}); - document.querySelector( '#R-sidebar' ).addEventListener("touchstart", handleStartX, { capture: false, passive: true}); - document.querySelectorAll( '#R-sidebar *' ).forEach( function(e){ e.addEventListener("touchstart", handleStartX, { capture: false, passive: true}) }); - s && s.addEventListener("touchmove", handleMoveX, { capture: false, passive: true}); - document.querySelector( '#R-sidebar' ).addEventListener("touchmove", handleMoveX, { capture: false, passive: true}); - document.querySelectorAll( '#R-sidebar *' ).forEach( function(e){ e.addEventListener("touchmove", handleMoveX, { capture: false, passive: true}) }); - s && s.addEventListener("touchend", handleEndX, { capture: false, passive: true}); - document.querySelector( '#R-sidebar' ).addEventListener("touchend", handleEndX, { capture: false, passive: true}); - document.querySelectorAll( '#R-sidebar *' ).forEach( function(e){ e.addEventListener("touchend", handleEndX, { capture: false, passive: true}) }); + var s = document.querySelector('#R-body-overlay'); + s && s.addEventListener('touchstart', handleStartX, { capture: false, passive: true }); + document.querySelector('#R-sidebar').addEventListener('touchstart', handleStartX, { capture: false, passive: true }); + document.querySelectorAll('#R-sidebar *').forEach(function (e) { + e.addEventListener('touchstart', handleStartX, { capture: false, passive: true }); + }); + s && s.addEventListener('touchmove', handleMoveX, { capture: false, passive: true }); + document.querySelector('#R-sidebar').addEventListener('touchmove', handleMoveX, { capture: false, passive: true }); + document.querySelectorAll('#R-sidebar *').forEach(function (e) { + e.addEventListener('touchmove', handleMoveX, { capture: false, passive: true }); + }); + s && s.addEventListener('touchend', handleEndX, { capture: false, passive: true }); + document.querySelector('#R-sidebar').addEventListener('touchend', handleEndX, { capture: false, passive: true }); + document.querySelectorAll('#R-sidebar *').forEach(function (e) { + e.addEventListener('touchend', handleEndX, { capture: false, passive: true }); + }); } -function initImage(){ - document.querySelectorAll( '.lightbox-back' ).forEach( function(e){ e.addEventListener( 'keydown', imageEscapeHandler ); }); +function initImage() { + document.querySelectorAll('.lightbox-back').forEach(function (e) { + e.addEventListener('keydown', imageEscapeHandler); + }); } -function initExpand(){ - document.querySelectorAll( '.expand > input' ).forEach( function(e){ e.addEventListener( 'change', initMermaid.bind( null, true, null ) ); }); +function initExpand() { + document.querySelectorAll('.expand > input').forEach(function (e) { + e.addEventListener('change', initMermaid.bind(null, true, null)); + }); } function clearHistory() { - var visitedItem = window.relearn.absBaseUri + '/visited-url/' - for( var item in sessionStorage ){ - if( item.substring( 0, visitedItem.length ) === visitedItem ){ - sessionStorage.removeItem( item ); - var url = item.substring( visitedItem.length ); - // in case we have `relativeURLs=true` we have to strip the - // relative path to root - url = url.replace( /\.\.\//g, '/' ).replace( /^\/+\//, '/' ); - document.querySelectorAll( '[data-nav-id="'+url+'"]' ).forEach( function( e ){ - e.classList.remove( 'visited' ); - }); - } + var visitedItem = window.relearn.absBaseUri + '/visited-url/'; + for (var item in sessionStorage) { + if (item.substring(0, visitedItem.length) === visitedItem) { + sessionStorage.removeItem(item); + var url = item.substring(visitedItem.length); + // in case we have `relativeURLs=true` we have to strip the + // relative path to root + url = url.replace(/\.\.\//g, '/').replace(/^\/+\//, '/'); + document.querySelectorAll('[data-nav-id="' + url + '"]').forEach(function (e) { + e.classList.remove('visited'); + }); } + } } function initHistory() { - var visitedItem = window.relearn.absBaseUri + '/visited-url/' - sessionStorage.setItem( visitedItem+document.querySelector( 'body' ).dataset.url, 1); + var visitedItem = window.relearn.absBaseUri + '/visited-url/'; + sessionStorage.setItem(visitedItem + document.querySelector('body').dataset.url, 1); - // loop through the sessionStorage and see if something should be marked as visited - for( var item in sessionStorage ){ - if( item.substring( 0, visitedItem.length ) === visitedItem && sessionStorage.getItem( item ) == 1 ){ - var url = item.substring( visitedItem.length ); - // in case we have `relativeURLs=true` we have to strip the - // relative path to root - url = url.replace( /\.\.\//g, '/' ).replace( /^\/+\//, '/' ); - document.querySelectorAll( '[data-nav-id="'+url+'"]' ).forEach( function( e ){ - e.classList.add( 'visited' ); - }); - } + // loop through the sessionStorage and see if something should be marked as visited + for (var item in sessionStorage) { + if (item.substring(0, visitedItem.length) === visitedItem && sessionStorage.getItem(item) == 1) { + var url = item.substring(visitedItem.length); + // in case we have `relativeURLs=true` we have to strip the + // relative path to root + url = url.replace(/\.\.\//g, '/').replace(/^\/+\//, '/'); + document.querySelectorAll('[data-nav-id="' + url + '"]').forEach(function (e) { + e.classList.add('visited'); + }); } + } } -function initScrollPositionSaver(){ - function savePosition( event ){ - var state = window.history.state || {}; - state = Object.assign( {}, ( typeof state === 'object' ) ? state : {} ); - state.contentScrollTop = +elc.scrollTop; - window.history.replaceState( state, '', window.location ); - }; +function initScrollPositionSaver() { + function savePosition(event) { + var state = window.history.state || {}; + state = Object.assign({}, typeof state === 'object' ? state : {}); + state.contentScrollTop = +elc.scrollTop; + window.history.replaceState(state, '', window.location); + } - var ticking = false; - elc.addEventListener( 'scroll', function( event ){ - if( !ticking ){ - window.requestAnimationFrame( function(){ - savePosition(); - ticking = false; - }); - ticking = true; - } - }); + var ticking = false; + elc.addEventListener('scroll', function (event) { + if (!ticking) { + window.requestAnimationFrame(function () { + savePosition(); + ticking = false; + }); + ticking = true; + } + }); - document.addEventListener( "click", savePosition ); + document.addEventListener('click', savePosition); } function scrollToPositions() { - // show active menu entry - window.setTimeout( function(){ - var e = document.querySelector( '#R-sidebar li.active a' ); - if( e && e.scrollIntoView ){ - e.scrollIntoView({ - block: 'center', - }); + // show active menu entry + window.setTimeout(function () { + var e = document.querySelector('#R-sidebar li.active a'); + if (e && e.scrollIntoView) { + e.scrollIntoView({ + block: 'center', + }); + } + }, 10); + + // scroll the content to point of interest; + // if we have a scroll position saved, the user was here + // before in his history stack and we want to reposition + // to the position he was when he left the page; + // otherwise if he used page search before, we want to position + // to its last outcome; + // otherwise he may want to see a specific fragment + + var state = window.history.state || {}; + state = typeof state === 'object' ? state : {}; + if (state.hasOwnProperty('contentScrollTop')) { + window.setTimeout(function () { + elc.scrollTop = +state.contentScrollTop; + }, 10); + return; + } + + var search = sessionStorage.getItem(window.relearn.absBaseUri + '/search-value'); + if (search && search.length) { + search = regexEscape(search); + var found = elementContains(search, elc); + var searchedElem = found.length && found[0]; + if (searchedElem) { + searchedElem.scrollIntoView(); + var scrolledY = window.scrollY; + if (scrolledY) { + window.scroll(0, scrolledY - 125); + } + } + return; + } + + if (window.location.hash && window.location.hash.length > 1) { + window.setTimeout(function () { + try { + var e = document.querySelector(window.location.hash); + if (e && e.scrollIntoView) { + e.scrollIntoView(); } - }, 10 ); - - // scroll the content to point of interest; - // if we have a scroll position saved, the user was here - // before in his history stack and we want to reposition - // to the position he was when he left the page; - // otherwise if he used page search before, we want to position - // to its last outcome; - // otherwise he may want to see a specific fragment - - var state = window.history.state || {}; - state = ( typeof state === 'object') ? state : {}; - if( state.hasOwnProperty( 'contentScrollTop' ) ){ - window.setTimeout( function(){ - elc.scrollTop = +state.contentScrollTop; - }, 10 ); - return; - } - - var search = sessionStorage.getItem( window.relearn.absBaseUri+'/search-value' ); - if( search && search.length ){ - search = regexEscape( search ); - var found = elementContains( search, elc ); - var searchedElem = found.length && found[ 0 ]; - if( searchedElem ){ - searchedElem.scrollIntoView(); - var scrolledY = window.scrollY; - if( scrolledY ){ - window.scroll( 0, scrolledY - 125 ); - } - } - return; - } - - if( window.location.hash && window.location.hash.length > 1 ){ - window.setTimeout( function(){ - try{ - var e = document.querySelector( window.location.hash ); - if( e && e.scrollIntoView ){ - e.scrollIntoView(); - } - } catch( e ){} - }, 10 ); - return; - } + } catch (e) {} + }, 10); + return; + } } -window.addEventListener( 'popstate', function ( event ){ - scrollToPositions(); +window.addEventListener('popstate', function (event) { + scrollToPositions(); }); -const observer = new PerformanceObserver( function(){ - scrollToPositions(); +const observer = new PerformanceObserver(function () { + scrollToPositions(); }); -observer.observe({ type: "navigation" }); +observer.observe({ type: 'navigation' }); function mark() { - // mark some additional stuff as searchable - var bodyInnerLinks = document.querySelectorAll( '#R-body-inner a:not(.lightbox-link):not(.btn):not(.lightbox-back)' ); - for( var i = 0; i < bodyInnerLinks.length; i++ ){ - bodyInnerLinks[i].classList.add( 'highlight' ); - } + // mark some additional stuff as searchable + var bodyInnerLinks = document.querySelectorAll('#R-body-inner a:not(.lightbox-link):not(.btn):not(.lightbox-back)'); + for (var i = 0; i < bodyInnerLinks.length; i++) { + bodyInnerLinks[i].classList.add('highlight'); + } - var value = sessionStorage.getItem( window.relearn.absBaseUri + '/search-value' ); - var highlightableElements = document.querySelectorAll( '.highlightable' ); - highlight( highlightableElements, value, { element: 'mark', className: 'search' } ); + var value = sessionStorage.getItem(window.relearn.absBaseUri + '/search-value'); + var highlightableElements = document.querySelectorAll('.highlightable'); + highlight(highlightableElements, value, { element: 'mark', className: 'search' }); - var markedElements = document.querySelectorAll( 'mark.search' ); - for( var i = 0; i < markedElements.length; i++ ){ - var parent = markedElements[i].parentNode; - while( parent && parent.classList ){ - if( parent.classList.contains( 'expand' ) ){ - var expandInputs = parent.querySelectorAll( 'input:not(.expand-marked)' ); - if( expandInputs.length ){ - expandInputs[0].classList.add( 'expand-marked' ); - expandInputs[0].dataset.checked = expandInputs[0].checked ? 'true' : 'false'; - expandInputs[0].checked = true; - } - } - if( parent.tagName.toLowerCase() === 'li' && parent.parentNode && parent.parentNode.tagName.toLowerCase() === 'ul' && parent.parentNode.classList.contains( 'collapsible-menu' )){ - var toggleInputs = parent.querySelectorAll( 'input:not(.menu-marked)' ); - if( toggleInputs.length ){ - toggleInputs[0].classList.add( 'menu-marked' ); - toggleInputs[0].dataset.checked = toggleInputs[0].checked ? 'true' : 'false'; - toggleInputs[0].checked = true; - } - } - parent = parent.parentNode; + var markedElements = document.querySelectorAll('mark.search'); + for (var i = 0; i < markedElements.length; i++) { + var parent = markedElements[i].parentNode; + while (parent && parent.classList) { + if (parent.classList.contains('expand')) { + var expandInputs = parent.querySelectorAll('input:not(.expand-marked)'); + if (expandInputs.length) { + expandInputs[0].classList.add('expand-marked'); + expandInputs[0].dataset.checked = expandInputs[0].checked ? 'true' : 'false'; + expandInputs[0].checked = true; } + } + if (parent.tagName.toLowerCase() === 'li' && parent.parentNode && parent.parentNode.tagName.toLowerCase() === 'ul' && parent.parentNode.classList.contains('collapsible-menu')) { + var toggleInputs = parent.querySelectorAll('input:not(.menu-marked)'); + if (toggleInputs.length) { + toggleInputs[0].classList.add('menu-marked'); + toggleInputs[0].dataset.checked = toggleInputs[0].checked ? 'true' : 'false'; + toggleInputs[0].checked = true; + } + } + parent = parent.parentNode; } - psm && setTimeout( function(){ psm.update(); }, 10 ); + } + psm && + setTimeout(function () { + psm.update(); + }, 10); } window.relearn.markSearch = mark; -function highlight( es, words, options ){ - var settings = { - className: 'highlight', - element: 'span', - caseSensitive: false, - wordsOnly: false - }; - Object.assign( settings, options ); +function highlight(es, words, options) { + var settings = { + className: 'highlight', + element: 'span', + caseSensitive: false, + wordsOnly: false, + }; + Object.assign(settings, options); - if( !words ){ return; } - if( words.constructor === String ){ - words = [ words ]; - } - words = words.filter( function( word, i ){ - return word != ''; - }); - words = words.map( function( word, i ){ - return regexEscape( word ); - }); - if( words.length == 0 ){ return this; } + if (!words) { + return; + } + if (words.constructor === String) { + words = [words]; + } + words = words.filter(function (word, i) { + return word != ''; + }); + words = words.map(function (word, i) { + return regexEscape(word); + }); + if (words.length == 0) { + return this; + } - var flag = settings.caseSensitive ? '' : 'i'; - var pattern = "(" + words.join( '|' ) + ')'; - if( settings.wordsOnly ){ - pattern = '\\b' + pattern + '\\b'; - } - var re = new RegExp( pattern, flag ); + var flag = settings.caseSensitive ? '' : 'i'; + var pattern = '(' + words.join('|') + ')'; + if (settings.wordsOnly) { + pattern = '\\b' + pattern + '\\b'; + } + var re = new RegExp(pattern, flag); - for( var i = 0; i < es.length; i++ ){ - highlightNode( es[i], re, settings.element, settings.className ); - } -}; + for (var i = 0; i < es.length; i++) { + highlightNode(es[i], re, settings.element, settings.className); + } +} -function highlightNode( node, re, nodeName, className ){ - if( node.nodeType === 3 && node.parentElement && node.parentElement.namespaceURI == 'http://www.w3.org/1999/xhtml' ) { // text nodes - var match = node.data.match( re ); - if( match ){ - var highlight = document.createElement( nodeName || 'span' ); - highlight.className = className || 'highlight'; - var wordNode = node.splitText( match.index ); - wordNode.splitText( match[0].length ); - var wordClone = wordNode.cloneNode( true ); - highlight.appendChild( wordClone ); - wordNode.parentNode.replaceChild( highlight, wordNode ); - return 1; //skip added node in parent - } - } else if( (node.nodeType === 1 && node.childNodes) && // only element nodes that have children - !/(script|style)/i.test(node.tagName) && // ignore script and style nodes - !(node.tagName === nodeName.toUpperCase() && node.className === className) ){ // skip if already highlighted - for( var i = 0; i < node.childNodes.length; i++ ){ - i += highlightNode( node.childNodes[i], re, nodeName, className ); - } +function highlightNode(node, re, nodeName, className) { + if (node.nodeType === 3 && node.parentElement && node.parentElement.namespaceURI == 'http://www.w3.org/1999/xhtml') { + // text nodes + var match = node.data.match(re); + if (match) { + var highlight = document.createElement(nodeName || 'span'); + highlight.className = className || 'highlight'; + var wordNode = node.splitText(match.index); + wordNode.splitText(match[0].length); + var wordClone = wordNode.cloneNode(true); + highlight.appendChild(wordClone); + wordNode.parentNode.replaceChild(highlight, wordNode); + return 1; //skip added node in parent } - return 0; -}; + } else if ( + node.nodeType === 1 && + node.childNodes && // only element nodes that have children + !/(script|style)/i.test(node.tagName) && // ignore script and style nodes + !(node.tagName === nodeName.toUpperCase() && node.className === className) + ) { + // skip if already highlighted + for (var i = 0; i < node.childNodes.length; i++) { + i += highlightNode(node.childNodes[i], re, nodeName, className); + } + } + return 0; +} function unmark() { - sessionStorage.removeItem( window.relearn.absBaseUri + '/search-value' ); - var markedElements = document.querySelectorAll( 'mark.search' ); - for( var i = 0; i < markedElements.length; i++ ){ - var parent = markedElements[i].parentNode; - while( parent && parent.classList ){ - if( parent.tagName.toLowerCase() === 'li' && parent.parentNode && parent.parentNode.tagName.toLowerCase() === 'ul' && parent.parentNode.classList.contains( 'collapsible-menu' )){ - var toggleInputs = parent.querySelectorAll( 'input.menu-marked' ); - if( toggleInputs.length ){ - toggleInputs[0].checked = toggleInputs[0].dataset.checked === 'true'; - toggleInputs[0].dataset.checked = null; - toggleInputs[0].classList.remove( 'menu-marked' ); - } - } - if( parent.classList.contains( 'expand' ) ){ - var expandInputs = parent.querySelectorAll( 'input.expand-marked' ); - if( expandInputs.length ){ - expandInputs[0].checked = expandInputs[0].dataset.checked === 'true'; - expandInputs[0].dataset.checked = null; - expandInputs[0].classList.remove( 'expand-marked' ); - } - } - parent = parent.parentNode; + sessionStorage.removeItem(window.relearn.absBaseUri + '/search-value'); + var markedElements = document.querySelectorAll('mark.search'); + for (var i = 0; i < markedElements.length; i++) { + var parent = markedElements[i].parentNode; + while (parent && parent.classList) { + if (parent.tagName.toLowerCase() === 'li' && parent.parentNode && parent.parentNode.tagName.toLowerCase() === 'ul' && parent.parentNode.classList.contains('collapsible-menu')) { + var toggleInputs = parent.querySelectorAll('input.menu-marked'); + if (toggleInputs.length) { + toggleInputs[0].checked = toggleInputs[0].dataset.checked === 'true'; + toggleInputs[0].dataset.checked = null; + toggleInputs[0].classList.remove('menu-marked'); } + } + if (parent.classList.contains('expand')) { + var expandInputs = parent.querySelectorAll('input.expand-marked'); + if (expandInputs.length) { + expandInputs[0].checked = expandInputs[0].dataset.checked === 'true'; + expandInputs[0].dataset.checked = null; + expandInputs[0].classList.remove('expand-marked'); + } + } + parent = parent.parentNode; } + } - var highlighted = document.querySelectorAll( '.highlightable' ); - unhighlight( highlighted, { element: 'mark', className: 'search' } ); - psm && setTimeout( function(){ psm.update(); }, 10 ); + var highlighted = document.querySelectorAll('.highlightable'); + unhighlight(highlighted, { element: 'mark', className: 'search' }); + psm && + setTimeout(function () { + psm.update(); + }, 10); } -function unhighlight( es, options ){ - var settings = { - className: 'highlight', - element: 'span' - }; - Object.assign( settings, options ); +function unhighlight(es, options) { + var settings = { + className: 'highlight', + element: 'span', + }; + Object.assign(settings, options); - for( var i = 0; i < es.length; i++ ){ - var highlightedElements = es[i].querySelectorAll( settings.element + '.' + settings.className ); - for( var j = 0; j < highlightedElements.length; j++ ){ - var parent = highlightedElements[j].parentNode; - parent.replaceChild( highlightedElements[j].firstChild, highlightedElements[j] ); - parent.normalize(); - } + for (var i = 0; i < es.length; i++) { + var highlightedElements = es[i].querySelectorAll(settings.element + '.' + settings.className); + for (var j = 0; j < highlightedElements.length; j++) { + var parent = highlightedElements[j].parentNode; + parent.replaceChild(highlightedElements[j].firstChild, highlightedElements[j]); + parent.normalize(); } -}; + } +} // replace jQuery.createPseudo with https://stackoverflow.com/a/66318392 -function elementContains( txt, e ){ - var regex = RegExp( txt, 'i' ); - var nodes = []; - if( e ){ - var tree = document.createTreeWalker( e, 4 /* NodeFilter.SHOW_TEXT */, function( node ){ - return regex.test( node.data ); - }, false ); - var node = null; - while( node = tree.nextNode() ){ - nodes.push( node.parentElement ); - } +function elementContains(txt, e) { + var regex = RegExp(txt, 'i'); + var nodes = []; + if (e) { + var tree = document.createTreeWalker( + e, + 4 /* NodeFilter.SHOW_TEXT */, + function (node) { + return regex.test(node.data); + }, + false + ); + var node = null; + while ((node = tree.nextNode())) { + nodes.push(node.parentElement); } - return nodes; + } + return nodes; } -function searchInputHandler( value ){ - unmark(); - if( value.length ){ - sessionStorage.setItem( window.relearn.absBaseUri+'/search-value', value ); - mark(); - } +function searchInputHandler(value) { + unmark(); + if (value.length) { + sessionStorage.setItem(window.relearn.absBaseUri + '/search-value', value); + mark(); + } } function initSearch() { - // sync input/escape between searchbox and searchdetail - var inputs = document.querySelectorAll( 'input.search-by' ); - inputs.forEach( function( e ){ - e.addEventListener( 'keydown', function( event ){ - if( event.key == 'Escape' ){ - var input = event.target; - var search = sessionStorage.getItem( window.relearn.absBaseUri+'/search-value' ); - if( !search || !search.length ){ - input.blur(); - } - searchInputHandler( '' ); - inputs.forEach( function( e ){ - e.value = ''; - }); - if( !search || !search.length ){ - documentFocus(); - } - } - }); - e.addEventListener( 'input', function( event ){ - var input = event.target; - var value = input.value; - searchInputHandler( value ); - inputs.forEach( function( e ){ - if( e != input ){ - e.value = value; - } - }); + // sync input/escape between searchbox and searchdetail + var inputs = document.querySelectorAll('input.search-by'); + inputs.forEach(function (e) { + e.addEventListener('keydown', function (event) { + if (event.key == 'Escape') { + var input = event.target; + var search = sessionStorage.getItem(window.relearn.absBaseUri + '/search-value'); + if (!search || !search.length) { + input.blur(); + } + searchInputHandler(''); + inputs.forEach(function (e) { + e.value = ''; }); + if (!search || !search.length) { + documentFocus(); + } + } }); - - document.querySelectorAll( '[data-search-clear]' ).forEach( function( e ){ - e.addEventListener( 'click', function(){ - inputs.forEach( function( e ){ - e.value = ''; - var event = document.createEvent( 'Event' ); - event.initEvent( 'input', false, false ); - e.dispatchEvent( event ); - }); - unmark(); - }); + e.addEventListener('input', function (event) { + var input = event.target; + var value = input.value; + searchInputHandler(value); + inputs.forEach(function (e) { + if (e != input) { + e.value = value; + } + }); }); + }); - var urlParams = new URLSearchParams( window.location.search ); - var value = urlParams.get( 'search-by' ); - if( value ){ - sessionStorage.setItem( window.relearn.absBaseUri+'/search-value', value ); - } - mark(); + document.querySelectorAll('[data-search-clear]').forEach(function (e) { + e.addEventListener('click', function () { + inputs.forEach(function (e) { + e.value = ''; + var event = document.createEvent('Event'); + event.initEvent('input', false, false); + e.dispatchEvent(event); + }); + unmark(); + }); + }); - // set initial search value for inputs on page load - if( sessionStorage.getItem( window.relearn.absBaseUri+'/search-value' ) ){ - var search = sessionStorage.getItem( window.relearn.absBaseUri+'/search-value' ); - inputs.forEach( function( e ){ - e.value = search; - var event = document.createEvent( 'Event' ); - event.initEvent( 'input', false, false ); - e.dispatchEvent( event ); - }); - } + var urlParams = new URLSearchParams(window.location.search); + var value = urlParams.get('search-by'); + if (value) { + sessionStorage.setItem(window.relearn.absBaseUri + '/search-value', value); + } + mark(); - window.relearn.isSearchInit = true; - window.relearn.runInitialSearch && window.relearn.runInitialSearch(); + // set initial search value for inputs on page load + if (sessionStorage.getItem(window.relearn.absBaseUri + '/search-value')) { + var search = sessionStorage.getItem(window.relearn.absBaseUri + '/search-value'); + inputs.forEach(function (e) { + e.value = search; + var event = document.createEvent('Event'); + event.initEvent('input', false, false); + e.dispatchEvent(event); + }); + } + + window.relearn.isSearchInit = true; + window.relearn.runInitialSearch && window.relearn.runInitialSearch(); } -function updateTheme( detail ){ - if( window.relearn.lastVariant == detail.variant ){ - return; - } - window.relearn.lastVariant = detail.variant; +function updateTheme(detail) { + if (window.relearn.lastVariant == detail.variant) { + return; + } + window.relearn.lastVariant = detail.variant; - initChroma( true ); - initMermaid( true ); - initOpenapi( true ); - document.dispatchEvent( new CustomEvent( 'themeVariantLoaded', { - detail: detail - })); + initChroma(true); + initMermaid(true); + initOpenapi(true); + document.dispatchEvent( + new CustomEvent('themeVariantLoaded', { + detail: detail, + }) + ); } -(function(){ - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { - initChroma( true ); - initMermaid( true ); - initOpenapi( true ); - }); +(function () { + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { + initChroma(true); + initMermaid(true); + initOpenapi(true); + }); })(); -function useMermaid( config ){ - window.relearn.mermaidConfig = config; - if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') { - mermaid.initialize( Object.assign( { "securityLevel": "antiscript", "startOnLoad": false }, config ) ); - if( config.theme && variants ){ - var write_style = variants.findLoadedStylesheet( 'R-variant-style' ); - write_style.setProperty( '--CONFIG-MERMAID-theme', config.theme ); - } +function useMermaid(config) { + window.relearn.mermaidConfig = config; + if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') { + mermaid.initialize(Object.assign({ 'securityLevel': 'antiscript', 'startOnLoad': false }, config)); + if (config.theme && variants) { + var write_style = variants.findLoadedStylesheet('R-variant-style'); + write_style.setProperty('--CONFIG-MERMAID-theme', config.theme); } + } } -if( window.themeUseMermaid ){ - useMermaid( window.themeUseMermaid ); +if (window.themeUseMermaid) { + useMermaid(window.themeUseMermaid); } -function useOpenapi( config ){ - if( config.css && config.cssInProject ){ - config.css = window.relearn.relBasePath + config.css; - } +function useOpenapi(config) { + if (config.css && config.cssInProject) { + config.css = window.relearn.relBasePath + config.css; + } } -if( window.themeUseOpenapi ){ - useOpenapi( window.themeUseOpenapi ); +if (window.themeUseOpenapi) { + useOpenapi(window.themeUseOpenapi); } -ready( function(){ - initArrowVerticalNav(); - initArrowHorizontalNav(); - initMermaid(); - initOpenapi(); - initMenuScrollbar(); - initToc(); - initAnchorClipboard(); - initCodeClipboard(); - fixCodeTabs(); - restoreTabSelections(); - initSwipeHandler(); - initHistory(); - initSearch(); - initImage(); - initExpand(); - initScrollPositionSaver(); +ready(function () { + initArrowVerticalNav(); + initArrowHorizontalNav(); + initMermaid(); + initOpenapi(); + initMenuScrollbar(); + initToc(); + initAnchorClipboard(); + initCodeClipboard(); + fixCodeTabs(); + restoreTabSelections(); + initSwipeHandler(); + initHistory(); + initSearch(); + initImage(); + initExpand(); + initScrollPositionSaver(); }); -(function(){ - var body = document.querySelector( 'body' ); - var topbar = document.querySelector( '#R-topbar' ); - function addTopbarButtonInfos(){ - // initially add some management infos to buttons and areas - var areas = body.querySelectorAll( '.topbar-area' ); - areas.forEach( function( area ){ - area.dataset.area = 'area-' + area.dataset.area; - var buttons = area.querySelectorAll( ':scope > .topbar-button' ); - buttons.forEach( function( button ){ - button.dataset.origin = area.dataset.area; - button.dataset.action = 'show'; - var placeholder = document.createElement( 'div' ); - placeholder.classList.add( 'topbar-placeholder' ); - placeholder.dataset.action = 'show'; - button.insertAdjacentElement( 'afterend', placeholder ); - }); - var placeholder = document.createElement( 'div' ); - area.insertAdjacentElement( 'beforeend', placeholder ); - var hidden = document.createElement( 'div' ); - hidden.classList.add( 'topbar-hidden' ); - hidden.dataset.area = area.dataset.area; - var hplaceholder = document.createElement( 'div' ); - hidden.insertAdjacentElement( 'beforeend', hplaceholder ); - area.insertAdjacentElement( 'afterend', hidden ); - }); - } - function moveAreaTopbarButtons( width ){ - topbar.querySelectorAll( '.topbar-hidden .topbar-button' ).forEach( function( button ){ - // move hidden to origins area - var placeholder = button.parentNode.parentNode.querySelector( ':scope > .topbar-area .topbar-placeholder[data-action="hide"]' ); - placeholder.dataset.action = 'show'; - button.dataset.action = 'show'; - placeholder.insertAdjacentElement( 'beforebegin', button ); - }); - topbar.querySelectorAll( '.topbar-area .topbar-button' ).forEach( function( button ){ - var current_area = button.dataset.action; - var origin_area = button.dataset.origin; - if( current_area != 'show' && origin_area != current_area ){ - // move moved to origins area - var placeholder = topbar.querySelector( '.topbar-area[data-area="' + origin_area + '"] > .topbar-placeholder[data-action="' + current_area + '"]' ); - placeholder.dataset.action = 'show'; - button.dataset.action = 'show'; - placeholder.insertAdjacentElement( 'beforebegin', button ); - } - }); - Array.from( topbar.querySelectorAll( '.topbar-area .topbar-button' ) ).reverse().forEach( function( button ){ - var parent = button.parentElement; - var current_area = parent.dataset.area; - var action = button.dataset[ 'width' + width.toUpperCase() ]; - if( action == 'show' ){ - } - else if( action == 'hide' ){ - // move to origins hidden - var hidden = button.parentNode.parentNode.querySelector( ':scope > .topbar-hidden > *' ); - var placeholder = button.nextSibling; - placeholder.dataset.action = action; - button.dataset.action = action; - hidden.insertAdjacentElement( 'beforebegin', button ); - } - else if( action != current_area ){ - // move to action area - var dest = button.parentNode.parentNode.querySelector( '.topbar-area[data-area="' + action + '"] > *' ); - if( dest ){ - var placeholder = button.nextSibling; - placeholder.dataset.action = action; - button.dataset.action = action; - dest.insertAdjacentElement( 'beforebegin', button ); - } - } - }); - } - function moveTopbarButtons(){ - var isS = body.classList.contains( 'menu-width-s' ); - var isM = body.classList.contains( 'menu-width-m' ); - var isL = body.classList.contains( 'menu-width-l' ); - // move buttons once, width has a distinct value - if( isS && !isM && !isL ){ - moveAreaTopbarButtons( 's' ) - } - else if( !isS && isM && !isL ){ - moveAreaTopbarButtons( 'm' ) - } - else if( !isS && !isM && isL ){ - moveAreaTopbarButtons( 'l' ) +(function () { + var body = document.querySelector('body'); + var topbar = document.querySelector('#R-topbar'); + function addTopbarButtonInfos() { + // initially add some management infos to buttons and areas + var areas = body.querySelectorAll('.topbar-area'); + areas.forEach(function (area) { + area.dataset.area = 'area-' + area.dataset.area; + var buttons = area.querySelectorAll(':scope > .topbar-button'); + buttons.forEach(function (button) { + button.dataset.origin = area.dataset.area; + button.dataset.action = 'show'; + var placeholder = document.createElement('div'); + placeholder.classList.add('topbar-placeholder'); + placeholder.dataset.action = 'show'; + button.insertAdjacentElement('afterend', placeholder); + }); + var placeholder = document.createElement('div'); + area.insertAdjacentElement('beforeend', placeholder); + var hidden = document.createElement('div'); + hidden.classList.add('topbar-hidden'); + hidden.dataset.area = area.dataset.area; + var hplaceholder = document.createElement('div'); + hidden.insertAdjacentElement('beforeend', hplaceholder); + area.insertAdjacentElement('afterend', hidden); + }); + } + function moveAreaTopbarButtons(width) { + topbar.querySelectorAll('.topbar-hidden .topbar-button').forEach(function (button) { + // move hidden to origins area + var placeholder = button.parentNode.parentNode.querySelector(':scope > .topbar-area .topbar-placeholder[data-action="hide"]'); + placeholder.dataset.action = 'show'; + button.dataset.action = 'show'; + placeholder.insertAdjacentElement('beforebegin', button); + }); + topbar.querySelectorAll('.topbar-area .topbar-button').forEach(function (button) { + var current_area = button.dataset.action; + var origin_area = button.dataset.origin; + if (current_area != 'show' && origin_area != current_area) { + // move moved to origins area + var placeholder = topbar.querySelector('.topbar-area[data-area="' + origin_area + '"] > .topbar-placeholder[data-action="' + current_area + '"]'); + placeholder.dataset.action = 'show'; + button.dataset.action = 'show'; + placeholder.insertAdjacentElement('beforebegin', button); + } + }); + Array.from(topbar.querySelectorAll('.topbar-area .topbar-button')) + .reverse() + .forEach(function (button) { + var parent = button.parentElement; + var current_area = parent.dataset.area; + var action = button.dataset['width' + width.toUpperCase()]; + if (action == 'show') { + } else if (action == 'hide') { + // move to origins hidden + var hidden = button.parentNode.parentNode.querySelector(':scope > .topbar-hidden > *'); + var placeholder = button.nextSibling; + placeholder.dataset.action = action; + button.dataset.action = action; + hidden.insertAdjacentElement('beforebegin', button); + } else if (action != current_area) { + // move to action area + var dest = button.parentNode.parentNode.querySelector('.topbar-area[data-area="' + action + '"] > *'); + if (dest) { + var placeholder = button.nextSibling; + placeholder.dataset.action = action; + button.dataset.action = action; + dest.insertAdjacentElement('beforebegin', button); + } } + }); + } + function moveTopbarButtons() { + var isS = body.classList.contains('menu-width-s'); + var isM = body.classList.contains('menu-width-m'); + var isL = body.classList.contains('menu-width-l'); + // move buttons once, width has a distinct value + if (isS && !isM && !isL) { + moveAreaTopbarButtons('s'); + } else if (!isS && isM && !isL) { + moveAreaTopbarButtons('m'); + } else if (!isS && !isM && isL) { + moveAreaTopbarButtons('l'); } - function adjustEmptyTopbarContents(){ - var buttons = Array.from( document.querySelectorAll( '.topbar-button > .topbar-content > .topbar-content-wrapper' ) ); - // we have to reverse order to make sure to handle innermost areas first - buttons.reverse().forEach( function( wrapper ){ - var button = getTopbarButtonParent( wrapper ); - if( button ){ - var isEmpty = true; - var area = wrapper.querySelector( ':scope > .topbar-area'); - if( area ){ - // if it's an area, we have to check each contained button - // manually for its display property - var areabuttons = area.querySelectorAll( ':scope > .topbar-button' ); - isEmpty = true; - areabuttons.forEach( function( ab ){ - if( ab.style.display != 'none' ){ - isEmpty = false; - } - }) - } - else{ - var clone = wrapper.cloneNode( true ); - var irrelevant = clone.querySelectorAll( "div.ps__rail-x, div.ps__rail-y" ); - irrelevant.forEach(function( e ) { - e.parentNode.removeChild( e ); - }); - isEmpty = !clone.innerHTML.trim(); - } - button.querySelector( 'button' ).disabled = isEmpty; - button.style.display = isEmpty && button.dataset.contentEmpty == 'hide' ? 'none' : 'inline-block'; + } + function adjustEmptyTopbarContents() { + var buttons = Array.from(document.querySelectorAll('.topbar-button > .topbar-content > .topbar-content-wrapper')); + // we have to reverse order to make sure to handle innermost areas first + buttons.reverse().forEach(function (wrapper) { + var button = getTopbarButtonParent(wrapper); + if (button) { + var isEmpty = true; + var area = wrapper.querySelector(':scope > .topbar-area'); + if (area) { + // if it's an area, we have to check each contained button + // manually for its display property + var areabuttons = area.querySelectorAll(':scope > .topbar-button'); + isEmpty = true; + areabuttons.forEach(function (ab) { + if (ab.style.display != 'none') { + isEmpty = false; } - }) - } - function setWidthS(e){ body.classList[ e.matches ? "add" : "remove" ]( 'menu-width-s' ); } - function setWidthM(e){ body.classList[ e.matches ? "add" : "remove" ]( 'menu-width-m' ); } - function setWidthL(e){ body.classList[ e.matches ? "add" : "remove" ]( 'menu-width-l' ); } - function onWidthChange( setWidth, e ){ - setWidth( e ); - moveTopbarButtons(); - adjustEmptyTopbarContents(); - } - var mqs = window.matchMedia( 'only screen and (max-width: 47.999rem)' ); - mqs.addEventListener( 'change', onWidthChange.bind( null, setWidthS ) ); - var mqm = window.matchMedia( 'only screen and (min-width: 48rem) and (max-width: 59.999rem)' ); - mqm.addEventListener( 'change', onWidthChange.bind( null, setWidthM ) ); - var mql = window.matchMedia( 'only screen and (min-width: 60rem)' ); - mql.addEventListener( 'change', onWidthChange.bind( null, setWidthL ) ); - - addTopbarButtonInfos(); - setWidthS( mqs ); - setWidthM( mqm ); - setWidthL( mql ); + }); + } else { + var clone = wrapper.cloneNode(true); + var irrelevant = clone.querySelectorAll('div.ps__rail-x, div.ps__rail-y'); + irrelevant.forEach(function (e) { + e.parentNode.removeChild(e); + }); + isEmpty = !clone.innerHTML.trim(); + } + button.querySelector('button').disabled = isEmpty; + button.style.display = isEmpty && button.dataset.contentEmpty == 'hide' ? 'none' : 'inline-block'; + } + }); + } + function setWidthS(e) { + body.classList[e.matches ? 'add' : 'remove']('menu-width-s'); + } + function setWidthM(e) { + body.classList[e.matches ? 'add' : 'remove']('menu-width-m'); + } + function setWidthL(e) { + body.classList[e.matches ? 'add' : 'remove']('menu-width-l'); + } + function onWidthChange(setWidth, e) { + setWidth(e); moveTopbarButtons(); adjustEmptyTopbarContents(); + } + var mqs = window.matchMedia('only screen and (max-width: 47.999rem)'); + mqs.addEventListener('change', onWidthChange.bind(null, setWidthS)); + var mqm = window.matchMedia('only screen and (min-width: 48rem) and (max-width: 59.999rem)'); + mqm.addEventListener('change', onWidthChange.bind(null, setWidthM)); + var mql = window.matchMedia('only screen and (min-width: 60rem)'); + mql.addEventListener('change', onWidthChange.bind(null, setWidthL)); + + addTopbarButtonInfos(); + setWidthS(mqs); + setWidthM(mqm); + setWidthL(mql); + moveTopbarButtons(); + adjustEmptyTopbarContents(); })(); -(function(){ - var body = document.querySelector( 'body' ); - function setWidth(e){ body.classList[ e.matches ? "add" : "remove" ]( 'main-width-max' ); } - function onWidthChange( setWidth, e ){ - setWidth( e ); - } - var width = variants.getColorValue( 'MAIN-WIDTH-MAX' ); - var mqm = window.matchMedia( 'screen and ( min-width: ' + width + ')' ); - mqm.addEventListener( 'change', onWidthChange.bind( null, setWidth ) ); - setWidth( mqm ); +(function () { + var body = document.querySelector('body'); + function setWidth(e) { + body.classList[e.matches ? 'add' : 'remove']('main-width-max'); + } + function onWidthChange(setWidth, e) { + setWidth(e); + } + var width = variants.getColorValue('MAIN-WIDTH-MAX'); + var mqm = window.matchMedia('screen and ( min-width: ' + width + ')'); + mqm.addEventListener('change', onWidthChange.bind(null, setWidth)); + setWidth(mqm); })(); diff --git a/static/js/variant.js b/static/js/variant.js index 1a30535cd6..aba4f19dcb 100644 --- a/static/js/variant.js +++ b/static/js/variant.js @@ -3,604 +3,688 @@ window.relearn = window.relearn || {}; // we need to load this script in the html head to avoid flickering // on page load if the user has selected a non default variant -function ready(fn) { if (document.readyState == 'complete') { fn(); } else { document.addEventListener('DOMContentLoaded',fn); } } +function ready(fn) { + if (document.readyState == 'complete') { + fn(); + } else { + document.addEventListener('DOMContentLoaded', fn); + } +} var variants = { - variant: '', - variants: [], - customvariantname: 'my-custom-variant', - isstylesheetloaded: true, - - init: function( variants ){ - this.variants = variants; - var variant = window.localStorage.getItem( window.relearn.absBaseUri+'/variant' ) || ( this.variants.length ? this.variants[0] : '' ); - this.changeVariant( variant ); - document.addEventListener( 'readystatechange', function(){ - if( document.readyState == 'interactive' ){ - this.markSelectedVariant(); - } - }.bind( this ) ); - }, - - getVariant: function(){ - return this.variant; - }, - - setVariant: function( variant ){ - this.variant = variant; - window.localStorage.setItem( window.relearn.absBaseUri+'/variant', variant ); - }, - - isVariantLoaded: function(){ - return window.theme && this.isstylesheetloaded; - }, - - markSelectedVariant: function(){ - var variant = this.getVariant(); - var select = document.querySelector( '#R-select-variant' ); - if( !select ){ - return; - } - this.addCustomVariantOption(); - if( variant && select.value != variant ){ - select.value = variant; - } - var interval_id = setInterval( function(){ - if( this.isVariantLoaded() ){ - clearInterval( interval_id ); - updateTheme({ variant: variant }); - } - }.bind( this ), 25 ); - // remove selection, because if some uses an arrow navigation" - // by pressing the left or right cursor key, we will automatically - // select a different style - if( document.activeElement ){ - document.activeElement.blur(); - } - }, - - generateVariantPath: function( variant, old_path ){ - var new_path = old_path.replace( new RegExp(`^(.*\/theme-).*?(\.css.*)$`), '$1' + variant + '$2' ); - return new_path; - }, - - addCustomVariantOption: function(){ - var variantbase = window.localStorage.getItem( window.relearn.absBaseUri+'/customvariantbase' ); - if( this.variants.indexOf( variantbase ) < 0 ){ - variantbase = ''; - } - if( !window.localStorage.getItem( window.relearn.absBaseUri+'/customvariant' ) ){ - variantbase = ''; - } - if( !variantbase ){ - return; - } - var select = document.querySelector( '#R-select-variant' ); - if( !select ){ - return; - } - var option = document.querySelector( '#' + this.customvariantname ); - if( !option ){ - option = document.createElement( 'option' ); - option.id = this.customvariantname; - option.value = this.customvariantname; - option.text = this.customvariantname.replace( /-/g, ' ' ).replace(/\w\S*/g, function(w){ return w.replace(/^\w/g, function(c){ return c.toUpperCase(); }); }); - select.appendChild( option ); - document.querySelectorAll( '.footerVariantSwitch' ).forEach( function( e ){ - e.classList.add( 'showVariantSwitch' ); - }); - } - }, - - removeCustomVariantOption: function(){ - var option = document.querySelector( '#' + this.customvariantname ); - if( option ){ - option.remove(); - } - if( this.variants.length <= 1 ){ - document.querySelectorAll( '.footerVariantSwitch' ).forEach( function( e ){ - e.classList.remove( 'showVariantSwitch' ); - }); - } - }, - - saveCustomVariant: function(){ - if( this.getVariant() != this.customvariantname ){ - window.localStorage.setItem( window.relearn.absBaseUri+'/customvariantbase', this.getVariant() ); - } - window.localStorage.setItem( window.relearn.absBaseUri+'/customvariant', this.generateStylesheet() ); - this.setVariant( this.customvariantname ); - this.markSelectedVariant(); - }, - - loadCustomVariant: function(){ - var stylesheet = window.localStorage.getItem( window.relearn.absBaseUri+'/customvariant' ); - - // temp styles to document - var head = document.querySelector( 'head' ); - var style = document.createElement( 'style' ); - style.id = 'R-custom-variant-style'; - style.appendChild( document.createTextNode( stylesheet ) ); - head.appendChild( style ); - - var interval_id = setInterval( function(){ - if( this.findLoadedStylesheet( 'R-variant-style' ) ){ - clearInterval( interval_id ); - // save the styles to the current variant stylesheet - this.variantvariables.forEach( function( e ){ - this.changeColor( e.name, true ); - }.bind( this ) ); - - // remove temp styles - style.remove(); - - this.saveCustomVariant(); - } - }.bind( this ), 25 ); - }, - - resetVariant: function(){ - var variantbase = window.localStorage.getItem( window.relearn.absBaseUri+'/customvariantbase' ); - if( variantbase && confirm( 'You have made changes to your custom variant. Are you sure you want to reset all changes?' ) ){ - window.localStorage.removeItem( window.relearn.absBaseUri+'/customvariantbase' ); - window.localStorage.removeItem( window.relearn.absBaseUri+'/customvariant' ); - this.removeCustomVariantOption(); - if( this.getVariant() == this.customvariantname ){ - this.changeVariant( variantbase ); - } - } - }, - - onLoadStylesheet: function(){ - variants.isstylesheetloaded = true; - }, - - switchStylesheet: function( variant, without_check ){ - var link = document.querySelector( '#R-variant-style' ); - if( !link ){ - return; - } - var old_path = link.getAttribute( 'href' ); - var new_path = this.generateVariantPath( variant, old_path ); - this.isstylesheetloaded = false; - - // Chrome needs a new element to trigger the load callback again - var new_link = document.createElement( 'link' ); - new_link.id = 'R-variant-style'; - new_link.rel = 'stylesheet'; - new_link.onload = this.onLoadStylesheet; - new_link.setAttribute( 'href', new_path ); - link.parentNode.replaceChild( new_link, link ); - }, - - changeVariant: function( variant ){ - if( variant == this.customvariantname ){ - var variantbase = window.localStorage.getItem( window.relearn.absBaseUri+'/customvariantbase' ); - if( this.variants.indexOf( variantbase ) < 0 ){ - variant = ''; - } - if( !window.localStorage.getItem( window.relearn.absBaseUri+'/customvariant' ) ){ - variant = ''; - } - this.setVariant( variant ); - if( !variant ){ - return; - } - this.switchStylesheet( variantbase ); - this.loadCustomVariant(); - } - else{ - if( this.variants.indexOf( variant ) < 0 ){ - variant = this.variants.length ? this.variants[ 0 ] : ''; - } - this.setVariant( variant ); - if( !variant ){ - return; - } - this.switchStylesheet( variant ); - this.markSelectedVariant(); - } - }, - - generator: function( vargenerator ){ - var graphDefinition = this.generateGraph(); - var graphs = document.querySelectorAll( vargenerator ); - graphs.forEach( function( e ){ e.innerHTML = graphDefinition; }); - - var interval_id = setInterval( function(){ - if( document.querySelectorAll( vargenerator + ' .mermaid > svg' ).length ){ - clearInterval( interval_id ); - this.styleGraph(); - } - }.bind( this ), 25 ); - }, - - download: function(data, mimetype, filename){ - var blob = new Blob([data], { type: mimetype }); - var url = window.URL.createObjectURL(blob); - var a = document.createElement('a'); - a.setAttribute('href', url); - a.setAttribute('download', filename); - a.click(); - }, - - getStylesheet: function(){ - var style = this.generateStylesheet(); - if( !style ){ - alert( 'There is nothing to be generated as auto mode variants will be generated by Hugo' ); - return; - } - this.download( style, 'text/css', 'theme-' + this.customvariantname + '.css' ); - }, - - adjustCSSRules: function(selector, props, sheets){ - // get stylesheet(s) - if (!sheets) sheets = [...document.styleSheets]; - else if (sheets.sup){ // sheets is a string - let absoluteURL = new URL(sheets, document.baseURI).href; - sheets = [...document.styleSheets].filter(i => i.href == absoluteURL); - } - else sheets = [sheets]; // sheets is a stylesheet - - // CSS (& HTML) reduce spaces in selector to one. - selector = selector.replace(/\s+/g, ' '); - const findRule = s => [...s.cssRules].reverse().find(i => i.selectorText == selector) - let rule = sheets.map(findRule).filter(i=>i).pop() - - const propsArr = props.sup - ? props.split(/\s*;\s*/).map(i => i.split(/\s*:\s*/)) // from string - : Object.entries(props); // from Object - - if (rule) for (let [prop, val] of propsArr){ - // rule.style[prop] = val; is against the spec, and does not support !important. - rule.style.setProperty(prop, ...val.split(/ *!(?=important)/)); - } - else { - sheet = sheets.pop(); - if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, ''); - sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length); - } - }, - - normalizeColor: function( c ){ - if( !c || !c.trim ){ - return c; - } - c = c.trim(); - c = c.replace( /\s*\(\s*/g, "( " ); - c = c.replace( /\s*\)\s*/g, " )" ); - c = c.replace( /\s*,\s*/g, ", " ); - c = c.replace( /0*\./g, "." ); - c = c.replace( / +/g, " " ); - return c; - }, - - getColorValue: function( c ){ - return this.normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) ); - }, - - getColorProperty: function( c, read_style ){ - var e = this.findColor( c ); - var p = this.normalizeColor( read_style.getPropertyValue( '--'+c ) ).replace( '--INTERNAL-', '--' ); - return p; - }, - - findLoadedStylesheet: function( id ){ - for( var n = 0; n < document.styleSheets.length; ++n ){ - if( document.styleSheets[n].ownerNode.id == id ){ - var s = document.styleSheets[n]; - if( s.rules && s.rules.length ){ - for( var m = 0; m < s.rules.length; ++m ){ - if( s.rules[m].selectorText == ':root' ){ - return s.rules[m].style; - } - if( s.rules[m].cssRules && s.rules[m].cssRules.length ){ - for( var o = 0; o < s.rules[m].cssRules.length; ++o ){ - if( s.rules[m].cssRules[o].selectorText == ':root' ){ - return s.rules[m].cssRules[o].style; - } - } - } - } - } - break; - } - } - return null; - }, - - changeColor: function( c, without_prompt ){ - var with_prompt = !(without_prompt || false); - - var read_style = this.findLoadedStylesheet( 'R-custom-variant-style' ); - var write_style = this.findLoadedStylesheet( 'R-variant-style' ); - if( !read_style ){ - read_style = write_style; - } - if( !read_style ){ - if( with_prompt ){ - alert( 'An auto mode variant can not be changed. Please select its light/dark variant directly to make changes' ); - } - return; - } - - var e = this.findColor( c ); - var v = this.getColorProperty( c, read_style ); - var n = ''; - if( !with_prompt ){ - n = v; - } - else{ - var t = c + '\n\n' + e.tooltip + '\n'; - if( e.fallback ){ - t += '\nInherits value "' + this.getColorValue(e.fallback) + '" from ' + e.fallback + ' if not set\n'; - } - else if( e.default ){ - t += '\nDefaults to value "' + this.normalizeColor(e.default) + '" if not set\n'; - } - n = prompt( t, v ); - if( n === null ){ - // user canceld operation - return; - } - } - - if( n ){ - // value set to specific value - n = this.normalizeColor( n ).replace( '--INTERNAL-', '--' ).replace( '--', '--INTERNAL-' ); - if( !with_prompt || n != v ){ - write_style.setProperty( '--'+c, n ); - } - } - else{ - // value emptied, so delete it - write_style.removeProperty( '--'+c ); - } - - if( with_prompt ){ - this.saveCustomVariant(); - } - }, - - findColor: function( name ){ - var f = this.variantvariables.find( function( x ){ - return x.name == name; - }); - return f; - }, - - generateColorVariable: function( e, read_style ){ - var v = ''; - var gen = this.getColorProperty( e.name, read_style ); - if( gen ){ - v += ' --' + e.name + ': ' + gen + '; /* ' + e.tooltip + ' */\n'; - } - return v; - }, - - generateStylesheet: function(){ - var read_style = this.findLoadedStylesheet( 'R-custom-variant-style' ); - var write_style = this.findLoadedStylesheet( 'R-variant-style' ); - if( !read_style ){ - read_style = write_style; - } - if( !read_style ){ - return; - } - - var style = - '/* ' + this.customvariantname + ' */\n' + - ':root {\n' + - this.variantvariables.reduce( function( a, e ){ return a + this.generateColorVariable( e, read_style ); }.bind( this ), '' ) + - '}\n'; - console.log( style ); - return style; - }, - - styleGraphGroup: function( selector, colorvar ){ - this.adjustCSSRules( '#R-body svg '+selector+' > rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' ); - this.adjustCSSRules( '#R-body svg '+selector+' > .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' ); - this.adjustCSSRules( '#R-body svg '+selector+' > .cluster-label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' ); - this.adjustCSSRules( '#R-body svg '+selector+' .nodeLabel', 'filter: grayscale(1) invert(1) contrast(10000);' ); - }, - - styleGraph: function(){ - this.variantvariables.forEach( function( e ){ - this.styleGraphGroup( '.'+e.name, e.name ); - }.bind( this ) ); - this.styleGraphGroup( '#maincontent', 'MAIN-BG-color' ); - this.styleGraphGroup( '#mainheadings', 'MAIN-BG-color' ); - this.styleGraphGroup( '#code', 'CODE-BLOCK-BG-color' ); - this.styleGraphGroup( '#inlinecode', 'CODE-INLINE-BG-color' ); - this.styleGraphGroup( '#blockcode', 'CODE-BLOCK-BG-color' ); - this.styleGraphGroup( '#thirdparty', 'MAIN-BG-color' ); - this.styleGraphGroup( '#coloredboxes', 'BOX-BG-color' ); - this.styleGraphGroup( '#menu', 'MENU-SECTIONS-BG-color' ); - this.styleGraphGroup( '#menuheader', 'MENU-HEADER-BG-color' ); - this.styleGraphGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' ); - }, - - generateGraphGroupedEdge: function( e ){ - var edge = ''; - if( e.fallback && e.group == this.findColor( e.fallback ).group ){ - edge += e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name; - } - else{ - edge += e.name+':::'+e.name; - } - return edge; - }, - - generateGraphVarGroupedEdge: function( e ){ - var edge = ''; - if( e.fallback && e.group != this.findColor( e.fallback ).group ){ - edge += ' ' + e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name + '\n'; - } - return edge; - }, - - generateGraph: function(){ - var g_groups = {}; - var g_handler = ''; - - this.variantvariables.forEach( function( e ){ - var group = e.group || ' '; - g_groups[ group ] = ( g_groups[ group ] || [] ).concat( e ); - g_handler += ' click '+e.name+' variants.changeColor\n'; - }); - - var graph = - 'flowchart LR\n' + - ' subgraph menu["menu"]\n' + - ' direction TB\n' + - ' subgraph menuheader["header"]\n' + - ' direction LR\n' + - g_groups[ 'header' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + - ' end\n' + - ' subgraph menusections["sections"]\n' + - ' direction LR\n' + - g_groups[ 'sections' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + - ' end\n' + - ' end\n' + - ' subgraph maincontent["content"]\n' + - ' direction TB\n' + - g_groups[ 'content' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + - ' subgraph mainheadings["headings"]\n' + - ' direction LR\n' + - g_groups[ 'headings' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + - ' end\n' + - ' subgraph code["code"]\n' + - ' direction TB\n' + - g_groups[ 'code' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + - ' subgraph inlinecode["inline code"]\n' + - ' direction LR\n' + - g_groups[ 'inline code' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + - ' end\n' + - ' subgraph blockcode["code blocks"]\n' + - ' direction LR\n' + - g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + - ' end\n' + - ' end\n' + - ' subgraph thirdparty["3rd party"]\n' + - ' direction LR\n' + - g_groups[ '3rd party' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + - ' end\n' + - ' subgraph coloredboxes["colored boxes"]\n' + - ' direction LR\n' + - g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) + - ' end\n' + - ' end\n' + - this.variantvariables.reduce( function( a, e ){ return a + this.generateGraphVarGroupedEdge( e ); }.bind( this ), '' ) + - g_handler; - - console.log( graph ); - return graph; - }, - - variantvariables: [ - { name: 'PRIMARY-color', group: 'content', fallback: 'MENU-HEADER-BG-color', tooltip: 'brand primary color', }, - { name: 'SECONDARY-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'brand secondary color', }, - { name: 'ACCENT-color', group: 'content', default: '#ffff00', tooltip: 'brand accent color, used for search highlights', }, - - { name: 'MAIN-TOPBAR-BORDER-color', group: 'content', default: 'transparent', tooltip: 'border color between topbar and content', }, - { name: 'MAIN-LINK-color', group: 'content', fallback: 'SECONDARY-color', tooltip: 'link color of content', }, - { name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'hoverd link color of content', }, - { name: 'MAIN-BG-color', group: 'content', default: '#ffffff', tooltip: 'background color of content', }, - { name: 'TAG-BG-color', group: 'content', fallback: 'PRIMARY-color', tooltip: 'tag color', }, - - { name: 'MAIN-TEXT-color', group: 'content', default: '#101010', tooltip: 'text color of content and h1 titles', }, - - { name: 'MAIN-TITLES-TEXT-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h2-h6 titles and transparent box titles', }, - { name: 'MAIN-TITLES-H1-TEXT-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h1 titles', }, - { name: 'MAIN-TITLES-H2-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color', tooltip: 'text color of h2-h6 titles', }, - { name: 'MAIN-TITLES-H3-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H2-TEXT-color', tooltip: 'text color of h3-h6 titles', }, - { name: 'MAIN-TITLES-H4-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H3-TEXT-color', tooltip: 'text color of h4-h6 titles', }, - { name: 'MAIN-TITLES-H5-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H4-TEXT-color', tooltip: 'text color of h5-h6 titles', }, - { name: 'MAIN-TITLES-H6-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H5-TEXT-color', tooltip: 'text color of h6 titles', }, - - { name: 'MAIN-font', group: 'content', default: '"Roboto Flex", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif', tooltip: 'text font of content and h1 titles', }, - - { name: 'MAIN-TITLES-font', group: 'headings', fallback: 'MAIN-font', tooltip: 'text font of h2-h6 titles and transparent box titles', }, - { name: 'MAIN-TITLES-H1-font', group: 'headings', fallback: 'MAIN-font', tooltip: 'text font of h1 titles', }, - { name: 'MAIN-TITLES-H2-font', group: 'headings', fallback: 'MAIN-TITLES-font', tooltip: 'text font of h2-h6 titles', }, - { name: 'MAIN-TITLES-H3-font', group: 'headings', fallback: 'MAIN-TITLES-H2-font', tooltip: 'text font of h3-h6 titles', }, - { name: 'MAIN-TITLES-H4-font', group: 'headings', fallback: 'MAIN-TITLES-H3-font', tooltip: 'text font of h4-h6 titles', }, - { name: 'MAIN-TITLES-H5-font', group: 'headings', fallback: 'MAIN-TITLES-H4-font', tooltip: 'text font of h5-h6 titles', }, - { name: 'MAIN-TITLES-H6-font', group: 'headings', fallback: 'MAIN-TITLES-H5-font', tooltip: 'text font of h6 titles', }, - - { name: 'CODE-theme', group: 'code', default: 'relearn-light', tooltip: 'name of the chroma stylesheet file', }, - { name: 'CODE-font', group: 'code', default: '"Consolas", menlo, monospace', tooltip: 'text font of code', }, - { name: 'CODE-BLOCK-color', group: 'code blocks', default: '#000000', tooltip: 'fallback text color of block code; should be adjusted to your selected chroma style', }, - { name: 'CODE-BLOCK-BG-color', group: 'code blocks', default: '#f8f8f8', tooltip: 'fallback background color of block code; should be adjusted to your selected chroma style', }, - { name: 'CODE-BLOCK-BORDER-color', group: 'code blocks', fallback: 'CODE-BLOCK-BG-color', tooltip: 'border color of block code', }, - { name: 'CODE-INLINE-color', group: 'inline code', default: '#5e5e5e', tooltip: 'text color of inline code', }, - { name: 'CODE-INLINE-BG-color', group: 'inline code', default: '#fffae9', tooltip: 'background color of inline code', }, - { name: 'CODE-INLINE-BORDER-color', group: 'inline code', default: '#fbf0cb', tooltip: 'border color of inline code', }, - - { name: 'BROWSER-theme', group: '3rd party', default: 'light', tooltip: 'name of the theme for browser scrollbars of the main section', }, - { name: 'MERMAID-theme', group: '3rd party', default: 'default', tooltip: 'name of the default Mermaid theme for this variant, can be overridden in hugo.toml', }, - { name: 'OPENAPI-theme', group: '3rd party', default: 'light', tooltip: 'name of the default OpenAPI theme for this variant, can be overridden in hugo.toml', }, - { name: 'OPENAPI-CODE-theme', group: '3rd party', default: 'obsidian', tooltip: 'name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml', }, - - { name: 'MENU-BORDER-color', group: 'header', default: 'transparent', tooltip: 'border color between menu and content', }, - { name: 'MENU-TOPBAR-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'border color of vertical line between menu and topbar', }, - { name: 'MENU-TOPBAR-SEPARATOR-color', group: 'header', default: 'transparent', tooltip: 'separator color of vertical line between menu and topbar', }, - { name: 'MENU-HEADER-BG-color', group: 'header', fallback: 'PRIMARY-color', tooltip: 'background color of menu header', }, - { name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'border color between menu header and menu', }, - { name: 'MENU-HEADER-SEPARATOR-color', group: 'header', fallback: 'MENU-HEADER-BORDER-color', tooltip: 'separator color between menu header and menu', }, - { name: 'MENU-HOME-LINK-color', group: 'header', default: '#323232', tooltip: 'home button color if configured', }, - { name: 'MENU-HOME-LINK-HOVER-color', group: 'header', default: '#808080', tooltip: 'hoverd home button color if configured', }, - { name: 'MENU-SEARCH-color', group: 'header', default: '#e0e0e0', tooltip: 'text and icon color of search box', }, - { name: 'MENU-SEARCH-BG-color', group: 'header', default: '#323232', tooltip: 'background color of search box', }, - { name: 'MENU-SEARCH-BORDER-color', group: 'header', fallback: 'MENU-SEARCH-BG-color', tooltip: 'border color of search box', }, - - { name: 'MENU-SECTIONS-BG-color', group: 'sections', default: '#282828', tooltip: 'background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc.', }, - { name: 'MENU-SECTIONS-ACTIVE-BG-color', group: 'sections', default: 'rgba( 0, 0, 0, .166 )', tooltip: 'background color of the active menu section', }, - { name: 'MENU-SECTIONS-LINK-color', group: 'sections', default: '#bababa', tooltip: 'link color of menu topics', }, - { name: 'MENU-SECTIONS-LINK-HOVER-color', group: 'sections', fallback: 'MENU-SECTIONS-LINK-color', tooltip: 'hoverd link color of menu topics', }, - { name: 'MENU-SECTION-ACTIVE-CATEGORY-color', group: 'sections', default: '#444444', tooltip: 'text color of the displayed menu topic', }, - { name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections', fallback: 'MAIN-BG-color', tooltip: 'background color of the displayed menu topic', }, - { name: 'MENU-SECTION-ACTIVE-CATEGORY-BORDER-color', group: 'sections', default: 'transparent', tooltip: 'border color between the displayed menu topic and the content', }, - { name: 'MENU-SECTION-SEPARATOR-color', group: 'sections', default: '#606060', tooltip: 'separator color between menu sections and menu footer', }, - { name: 'MENU-VISITED-color', group: 'sections', fallback: 'SECONDARY-color', tooltip: 'icon color of visited menu topics if configured', }, - - { name: 'BOX-CAPTION-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, 1 )', tooltip: 'text color of colored box titles', }, - { name: 'BOX-BG-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, .833 )', tooltip: 'background color of colored boxes', }, - { name: 'BOX-TEXT-color', group: 'colored boxes', fallback: 'MAIN-TEXT-color', tooltip: 'text color of colored box content', }, - - { name: 'BOX-BLUE-color', group: 'colored boxes', default: 'rgba( 48, 117, 229, 1 )', tooltip: 'background color of blue boxes', }, - { name: 'BOX-INFO-color', group: 'colored boxes', fallback: 'BOX-BLUE-color', tooltip: 'background color of info boxes', }, - { name: 'BOX-BLUE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of blue boxes', }, - { name: 'BOX-INFO-TEXT-color', group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color', tooltip: 'text color of info boxes', }, - - { name: 'BOX-CYAN-color', group: 'colored boxes', default: 'rgba( 45, 190, 200, 1 )', tooltip: 'background color of cyan boxes', }, - { name: 'BOX-IMPORTANT-color', group: 'colored boxes', fallback: 'BOX-CYAN-color', tooltip: 'background color of info boxes', }, - { name: 'BOX-CYAN-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of cyan boxes', }, - { name: 'BOX-IMPORTANT-TEXT-color', group: 'colored boxes', fallback: 'BOX-CYAN-TEXT-color', tooltip: 'text color of info boxes', }, - - { name: 'BOX-GREEN-color', group: 'colored boxes', default: 'rgba( 42, 178, 24, 1 )', tooltip: 'background color of green boxes', }, - { name: 'BOX-TIP-color', group: 'colored boxes', fallback: 'BOX-GREEN-color', tooltip: 'background color of tip boxes', }, - { name: 'BOX-GREEN-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of green boxes', }, - { name: 'BOX-TIP-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREEN-TEXT-color', tooltip: 'text color of tip boxes', }, - - { name: 'BOX-GREY-color', group: 'colored boxes', default: 'rgba( 128, 128, 128, 1 )', tooltip: 'background color of grey boxes', }, - { name: 'BOX-NEUTRAL-color', group: 'colored boxes', fallback: 'BOX-GREY-color', tooltip: 'background color of neutral boxes', }, - { name: 'BOX-GREY-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of grey boxes', }, - { name: 'BOX-NEUTRAL-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color', tooltip: 'text color of neutral boxes', }, - - { name: 'BOX-MAGENTA-color', group: 'colored boxes', default: 'rgba( 229, 50, 210, 1 )', tooltip: 'background color of magenta boxes', }, - { name: 'BOX-CAUTION-color', group: 'colored boxes', fallback: 'BOX-MAGENTA-color', tooltip: 'background color of info boxes', }, - { name: 'BOX-MAGENTA-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of magenta boxes', }, - { name: 'BOX-CAUTION-TEXT-color', group: 'colored boxes', fallback: 'BOX-MAGENTA-TEXT-color', tooltip: 'text color of info boxes', }, - - { name: 'BOX-ORANGE-color', group: 'colored boxes', default: 'rgba( 237, 153, 9, 1 )', tooltip: 'background color of orange boxes', }, - { name: 'BOX-NOTE-color', group: 'colored boxes', fallback: 'BOX-ORANGE-color', tooltip: 'background color of note boxes', }, - { name: 'BOX-ORANGE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of orange boxes', }, - { name: 'BOX-NOTE-TEXT-color', group: 'colored boxes', fallback: 'BOX-ORANGE-TEXT-color', tooltip: 'text color of note boxes', }, - - { name: 'BOX-RED-color', group: 'colored boxes', default: 'rgba( 224, 62, 62, 1 )', tooltip: 'background color of red boxes', }, - { name: 'BOX-WARNING-color', group: 'colored boxes', fallback: 'BOX-RED-color', tooltip: 'background color of warning boxes', }, - { name: 'BOX-RED-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of red boxes', }, - { name: 'BOX-WARNING-TEXT-color', group: 'colored boxes', fallback: 'BOX-RED-TEXT-color', tooltip: 'text color of warning boxes', }, - ], + variant: '', + variants: [], + customvariantname: 'my-custom-variant', + isstylesheetloaded: true, + + init: function (variants) { + this.variants = variants; + var variant = window.localStorage.getItem(window.relearn.absBaseUri + '/variant') || (this.variants.length ? this.variants[0] : ''); + this.changeVariant(variant); + document.addEventListener( + 'readystatechange', + function () { + if (document.readyState == 'interactive') { + this.markSelectedVariant(); + } + }.bind(this) + ); + }, + + getVariant: function () { + return this.variant; + }, + + setVariant: function (variant) { + this.variant = variant; + window.localStorage.setItem(window.relearn.absBaseUri + '/variant', variant); + }, + + isVariantLoaded: function () { + return window.theme && this.isstylesheetloaded; + }, + + markSelectedVariant: function () { + var variant = this.getVariant(); + var select = document.querySelector('#R-select-variant'); + if (!select) { + return; + } + this.addCustomVariantOption(); + if (variant && select.value != variant) { + select.value = variant; + } + var interval_id = setInterval( + function () { + if (this.isVariantLoaded()) { + clearInterval(interval_id); + updateTheme({ variant: variant }); + } + }.bind(this), + 25 + ); + // remove selection, because if some uses an arrow navigation" + // by pressing the left or right cursor key, we will automatically + // select a different style + if (document.activeElement) { + document.activeElement.blur(); + } + }, + + generateVariantPath: function (variant, old_path) { + var new_path = old_path.replace(new RegExp(`^(.*\/theme-).*?(\.css.*)$`), '$1' + variant + '$2'); + return new_path; + }, + + addCustomVariantOption: function () { + var variantbase = window.localStorage.getItem(window.relearn.absBaseUri + '/customvariantbase'); + if (this.variants.indexOf(variantbase) < 0) { + variantbase = ''; + } + if (!window.localStorage.getItem(window.relearn.absBaseUri + '/customvariant')) { + variantbase = ''; + } + if (!variantbase) { + return; + } + var select = document.querySelector('#R-select-variant'); + if (!select) { + return; + } + var option = document.querySelector('#' + this.customvariantname); + if (!option) { + option = document.createElement('option'); + option.id = this.customvariantname; + option.value = this.customvariantname; + option.text = this.customvariantname.replace(/-/g, ' ').replace(/\w\S*/g, function (w) { + return w.replace(/^\w/g, function (c) { + return c.toUpperCase(); + }); + }); + select.appendChild(option); + document.querySelectorAll('.footerVariantSwitch').forEach(function (e) { + e.classList.add('showVariantSwitch'); + }); + } + }, + + removeCustomVariantOption: function () { + var option = document.querySelector('#' + this.customvariantname); + if (option) { + option.remove(); + } + if (this.variants.length <= 1) { + document.querySelectorAll('.footerVariantSwitch').forEach(function (e) { + e.classList.remove('showVariantSwitch'); + }); + } + }, + + saveCustomVariant: function () { + if (this.getVariant() != this.customvariantname) { + window.localStorage.setItem(window.relearn.absBaseUri + '/customvariantbase', this.getVariant()); + } + window.localStorage.setItem(window.relearn.absBaseUri + '/customvariant', this.generateStylesheet()); + this.setVariant(this.customvariantname); + this.markSelectedVariant(); + }, + + loadCustomVariant: function () { + var stylesheet = window.localStorage.getItem(window.relearn.absBaseUri + '/customvariant'); + + // temp styles to document + var head = document.querySelector('head'); + var style = document.createElement('style'); + style.id = 'R-custom-variant-style'; + style.appendChild(document.createTextNode(stylesheet)); + head.appendChild(style); + + var interval_id = setInterval( + function () { + if (this.findLoadedStylesheet('R-variant-style')) { + clearInterval(interval_id); + // save the styles to the current variant stylesheet + this.variantvariables.forEach( + function (e) { + this.changeColor(e.name, true); + }.bind(this) + ); + + // remove temp styles + style.remove(); + + this.saveCustomVariant(); + } + }.bind(this), + 25 + ); + }, + + resetVariant: function () { + var variantbase = window.localStorage.getItem(window.relearn.absBaseUri + '/customvariantbase'); + if (variantbase && confirm('You have made changes to your custom variant. Are you sure you want to reset all changes?')) { + window.localStorage.removeItem(window.relearn.absBaseUri + '/customvariantbase'); + window.localStorage.removeItem(window.relearn.absBaseUri + '/customvariant'); + this.removeCustomVariantOption(); + if (this.getVariant() == this.customvariantname) { + this.changeVariant(variantbase); + } + } + }, + + onLoadStylesheet: function () { + variants.isstylesheetloaded = true; + }, + + switchStylesheet: function (variant, without_check) { + var link = document.querySelector('#R-variant-style'); + if (!link) { + return; + } + var old_path = link.getAttribute('href'); + var new_path = this.generateVariantPath(variant, old_path); + this.isstylesheetloaded = false; + + // Chrome needs a new element to trigger the load callback again + var new_link = document.createElement('link'); + new_link.id = 'R-variant-style'; + new_link.rel = 'stylesheet'; + new_link.onload = this.onLoadStylesheet; + new_link.setAttribute('href', new_path); + link.parentNode.replaceChild(new_link, link); + }, + + changeVariant: function (variant) { + if (variant == this.customvariantname) { + var variantbase = window.localStorage.getItem(window.relearn.absBaseUri + '/customvariantbase'); + if (this.variants.indexOf(variantbase) < 0) { + variant = ''; + } + if (!window.localStorage.getItem(window.relearn.absBaseUri + '/customvariant')) { + variant = ''; + } + this.setVariant(variant); + if (!variant) { + return; + } + this.switchStylesheet(variantbase); + this.loadCustomVariant(); + } else { + if (this.variants.indexOf(variant) < 0) { + variant = this.variants.length ? this.variants[0] : ''; + } + this.setVariant(variant); + if (!variant) { + return; + } + this.switchStylesheet(variant); + this.markSelectedVariant(); + } + }, + + generator: function (vargenerator) { + var graphDefinition = this.generateGraph(); + var graphs = document.querySelectorAll(vargenerator); + graphs.forEach(function (e) { + e.innerHTML = graphDefinition; + }); + + var interval_id = setInterval( + function () { + if (document.querySelectorAll(vargenerator + ' .mermaid > svg').length) { + clearInterval(interval_id); + this.styleGraph(); + } + }.bind(this), + 25 + ); + }, + + download: function (data, mimetype, filename) { + var blob = new Blob([data], { type: mimetype }); + var url = window.URL.createObjectURL(blob); + var a = document.createElement('a'); + a.setAttribute('href', url); + a.setAttribute('download', filename); + a.click(); + }, + + getStylesheet: function () { + var style = this.generateStylesheet(); + if (!style) { + alert('There is nothing to be generated as auto mode variants will be generated by Hugo'); + return; + } + this.download(style, 'text/css', 'theme-' + this.customvariantname + '.css'); + }, + + adjustCSSRules: function (selector, props, sheets) { + // get stylesheet(s) + if (!sheets) sheets = [...document.styleSheets]; + else if (sheets.sup) { + // sheets is a string + let absoluteURL = new URL(sheets, document.baseURI).href; + sheets = [...document.styleSheets].filter((i) => i.href == absoluteURL); + } else sheets = [sheets]; // sheets is a stylesheet + + // CSS (& HTML) reduce spaces in selector to one. + selector = selector.replace(/\s+/g, ' '); + const findRule = (s) => [...s.cssRules].reverse().find((i) => i.selectorText == selector); + let rule = sheets + .map(findRule) + .filter((i) => i) + .pop(); + + const propsArr = props.sup + ? props.split(/\s*;\s*/).map((i) => i.split(/\s*:\s*/)) // from string + : Object.entries(props); // from Object + + if (rule) + for (let [prop, val] of propsArr) { + // rule.style[prop] = val; is against the spec, and does not support !important. + rule.style.setProperty(prop, ...val.split(/ *!(?=important)/)); + } + else { + sheet = sheets.pop(); + if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, ''); + sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length); + } + }, + + normalizeColor: function (c) { + if (!c || !c.trim) { + return c; + } + c = c.trim(); + c = c.replace(/\s*\(\s*/g, '( '); + c = c.replace(/\s*\)\s*/g, ' )'); + c = c.replace(/\s*,\s*/g, ', '); + c = c.replace(/0*\./g, '.'); + c = c.replace(/ +/g, ' '); + return c; + }, + + getColorValue: function (c) { + return this.normalizeColor(getComputedStyle(document.documentElement).getPropertyValue('--INTERNAL-' + c)); + }, + + getColorProperty: function (c, read_style) { + var e = this.findColor(c); + var p = this.normalizeColor(read_style.getPropertyValue('--' + c)).replace('--INTERNAL-', '--'); + return p; + }, + + findLoadedStylesheet: function (id) { + for (var n = 0; n < document.styleSheets.length; ++n) { + if (document.styleSheets[n].ownerNode.id == id) { + var s = document.styleSheets[n]; + if (s.rules && s.rules.length) { + for (var m = 0; m < s.rules.length; ++m) { + if (s.rules[m].selectorText == ':root') { + return s.rules[m].style; + } + if (s.rules[m].cssRules && s.rules[m].cssRules.length) { + for (var o = 0; o < s.rules[m].cssRules.length; ++o) { + if (s.rules[m].cssRules[o].selectorText == ':root') { + return s.rules[m].cssRules[o].style; + } + } + } + } + } + break; + } + } + return null; + }, + + changeColor: function (c, without_prompt) { + var with_prompt = !(without_prompt || false); + + var read_style = this.findLoadedStylesheet('R-custom-variant-style'); + var write_style = this.findLoadedStylesheet('R-variant-style'); + if (!read_style) { + read_style = write_style; + } + if (!read_style) { + if (with_prompt) { + alert('An auto mode variant can not be changed. Please select its light/dark variant directly to make changes'); + } + return; + } + + var e = this.findColor(c); + var v = this.getColorProperty(c, read_style); + var n = ''; + if (!with_prompt) { + n = v; + } else { + var t = c + '\n\n' + e.tooltip + '\n'; + if (e.fallback) { + t += '\nInherits value "' + this.getColorValue(e.fallback) + '" from ' + e.fallback + ' if not set\n'; + } else if (e.default) { + t += '\nDefaults to value "' + this.normalizeColor(e.default) + '" if not set\n'; + } + n = prompt(t, v); + if (n === null) { + // user canceld operation + return; + } + } + + if (n) { + // value set to specific value + n = this.normalizeColor(n).replace('--INTERNAL-', '--').replace('--', '--INTERNAL-'); + if (!with_prompt || n != v) { + write_style.setProperty('--' + c, n); + } + } else { + // value emptied, so delete it + write_style.removeProperty('--' + c); + } + + if (with_prompt) { + this.saveCustomVariant(); + } + }, + + findColor: function (name) { + var f = this.variantvariables.find(function (x) { + return x.name == name; + }); + return f; + }, + + generateColorVariable: function (e, read_style) { + var v = ''; + var gen = this.getColorProperty(e.name, read_style); + if (gen) { + v += ' --' + e.name + ': ' + gen + '; /* ' + e.tooltip + ' */\n'; + } + return v; + }, + + generateStylesheet: function () { + var read_style = this.findLoadedStylesheet('R-custom-variant-style'); + var write_style = this.findLoadedStylesheet('R-variant-style'); + if (!read_style) { + read_style = write_style; + } + if (!read_style) { + return; + } + + var style = + '/* ' + + this.customvariantname + + ' */\n' + + ':root {\n' + + this.variantvariables.reduce( + function (a, e) { + return a + this.generateColorVariable(e, read_style); + }.bind(this), + '' + ) + + '}\n'; + console.log(style); + return style; + }, + + styleGraphGroup: function (selector, colorvar) { + this.adjustCSSRules('#R-body svg ' + selector + ' > rect', 'color: var(--INTERNAL-' + colorvar + '); fill: var(--INTERNAL-' + colorvar + '); stroke: #80808080;'); + this.adjustCSSRules('#R-body svg ' + selector + ' > .label .nodeLabel', 'color: var(--INTERNAL-' + colorvar + '); fill: var(--INTERNAL-' + colorvar + '); stroke: #80808080;'); + this.adjustCSSRules('#R-body svg ' + selector + ' > .cluster-label .nodeLabel', 'color: var(--INTERNAL-' + colorvar + '); fill: var(--INTERNAL-' + colorvar + '); stroke: #80808080;'); + this.adjustCSSRules('#R-body svg ' + selector + ' .nodeLabel', 'filter: grayscale(1) invert(1) contrast(10000);'); + }, + + styleGraph: function () { + this.variantvariables.forEach( + function (e) { + this.styleGraphGroup('.' + e.name, e.name); + }.bind(this) + ); + this.styleGraphGroup('#maincontent', 'MAIN-BG-color'); + this.styleGraphGroup('#mainheadings', 'MAIN-BG-color'); + this.styleGraphGroup('#code', 'CODE-BLOCK-BG-color'); + this.styleGraphGroup('#inlinecode', 'CODE-INLINE-BG-color'); + this.styleGraphGroup('#blockcode', 'CODE-BLOCK-BG-color'); + this.styleGraphGroup('#thirdparty', 'MAIN-BG-color'); + this.styleGraphGroup('#coloredboxes', 'BOX-BG-color'); + this.styleGraphGroup('#menu', 'MENU-SECTIONS-BG-color'); + this.styleGraphGroup('#menuheader', 'MENU-HEADER-BG-color'); + this.styleGraphGroup('#menusections', 'MENU-SECTIONS-ACTIVE-BG-color'); + }, + + generateGraphGroupedEdge: function (e) { + var edge = ''; + if (e.fallback && e.group == this.findColor(e.fallback).group) { + edge += e.fallback + ':::' + e.fallback + ' --> ' + e.name + ':::' + e.name; + } else { + edge += e.name + ':::' + e.name; + } + return edge; + }, + + generateGraphVarGroupedEdge: function (e) { + var edge = ''; + if (e.fallback && e.group != this.findColor(e.fallback).group) { + edge += ' ' + e.fallback + ':::' + e.fallback + ' --> ' + e.name + ':::' + e.name + '\n'; + } + return edge; + }, + + generateGraph: function () { + var g_groups = {}; + var g_handler = ''; + + this.variantvariables.forEach(function (e) { + var group = e.group || ' '; + g_groups[group] = (g_groups[group] || []).concat(e); + g_handler += ' click ' + e.name + ' variants.changeColor\n'; + }); + + var graph = + 'flowchart LR\n' + + ' subgraph menu["menu"]\n' + + ' direction TB\n' + + ' subgraph menuheader["header"]\n' + + ' direction LR\n' + + g_groups['header'].reduce( + function (a, e) { + return a + ' ' + this.generateGraphGroupedEdge(e) + '\n'; + }.bind(this), + '' + ) + + ' end\n' + + ' subgraph menusections["sections"]\n' + + ' direction LR\n' + + g_groups['sections'].reduce( + function (a, e) { + return a + ' ' + this.generateGraphGroupedEdge(e) + '\n'; + }.bind(this), + '' + ) + + ' end\n' + + ' end\n' + + ' subgraph maincontent["content"]\n' + + ' direction TB\n' + + g_groups['content'].reduce( + function (a, e) { + return a + ' ' + this.generateGraphGroupedEdge(e) + '\n'; + }.bind(this), + '' + ) + + ' subgraph mainheadings["headings"]\n' + + ' direction LR\n' + + g_groups['headings'].reduce( + function (a, e) { + return a + ' ' + this.generateGraphGroupedEdge(e) + '\n'; + }.bind(this), + '' + ) + + ' end\n' + + ' subgraph code["code"]\n' + + ' direction TB\n' + + g_groups['code'].reduce( + function (a, e) { + return a + ' ' + this.generateGraphGroupedEdge(e) + '\n'; + }.bind(this), + '' + ) + + ' subgraph inlinecode["inline code"]\n' + + ' direction LR\n' + + g_groups['inline code'].reduce( + function (a, e) { + return a + ' ' + this.generateGraphGroupedEdge(e) + '\n'; + }.bind(this), + '' + ) + + ' end\n' + + ' subgraph blockcode["code blocks"]\n' + + ' direction LR\n' + + g_groups['code blocks'].reduce( + function (a, e) { + return a + ' ' + this.generateGraphGroupedEdge(e) + '\n'; + }.bind(this), + '' + ) + + ' end\n' + + ' end\n' + + ' subgraph thirdparty["3rd party"]\n' + + ' direction LR\n' + + g_groups['3rd party'].reduce( + function (a, e) { + return a + ' ' + this.generateGraphGroupedEdge(e) + '\n'; + }.bind(this), + '' + ) + + ' end\n' + + ' subgraph coloredboxes["colored boxes"]\n' + + ' direction LR\n' + + g_groups['colored boxes'].reduce( + function (a, e) { + return a + ' ' + this.generateGraphGroupedEdge(e) + '\n'; + }.bind(this), + '' + ) + + ' end\n' + + ' end\n' + + this.variantvariables.reduce( + function (a, e) { + return a + this.generateGraphVarGroupedEdge(e); + }.bind(this), + '' + ) + + g_handler; + + console.log(graph); + return graph; + }, + + variantvariables: [ + { name: 'PRIMARY-color', group: 'content', fallback: 'MENU-HEADER-BG-color', tooltip: 'brand primary color' }, + { name: 'SECONDARY-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'brand secondary color' }, + { name: 'ACCENT-color', group: 'content', default: '#ffff00', tooltip: 'brand accent color, used for search highlights' }, + + { name: 'MAIN-TOPBAR-BORDER-color', group: 'content', default: 'transparent', tooltip: 'border color between topbar and content' }, + { name: 'MAIN-LINK-color', group: 'content', fallback: 'SECONDARY-color', tooltip: 'link color of content' }, + { name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'hoverd link color of content' }, + { name: 'MAIN-BG-color', group: 'content', default: '#ffffff', tooltip: 'background color of content' }, + { name: 'TAG-BG-color', group: 'content', fallback: 'PRIMARY-color', tooltip: 'tag color' }, + + { name: 'MAIN-TEXT-color', group: 'content', default: '#101010', tooltip: 'text color of content and h1 titles' }, + + { name: 'MAIN-TITLES-TEXT-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h2-h6 titles and transparent box titles' }, + { name: 'MAIN-TITLES-H1-TEXT-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h1 titles' }, + { name: 'MAIN-TITLES-H2-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color', tooltip: 'text color of h2-h6 titles' }, + { name: 'MAIN-TITLES-H3-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H2-TEXT-color', tooltip: 'text color of h3-h6 titles' }, + { name: 'MAIN-TITLES-H4-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H3-TEXT-color', tooltip: 'text color of h4-h6 titles' }, + { name: 'MAIN-TITLES-H5-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H4-TEXT-color', tooltip: 'text color of h5-h6 titles' }, + { name: 'MAIN-TITLES-H6-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H5-TEXT-color', tooltip: 'text color of h6 titles' }, + + { name: 'MAIN-font', group: 'content', default: '"Roboto Flex", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif', tooltip: 'text font of content and h1 titles' }, + + { name: 'MAIN-TITLES-font', group: 'headings', fallback: 'MAIN-font', tooltip: 'text font of h2-h6 titles and transparent box titles' }, + { name: 'MAIN-TITLES-H1-font', group: 'headings', fallback: 'MAIN-font', tooltip: 'text font of h1 titles' }, + { name: 'MAIN-TITLES-H2-font', group: 'headings', fallback: 'MAIN-TITLES-font', tooltip: 'text font of h2-h6 titles' }, + { name: 'MAIN-TITLES-H3-font', group: 'headings', fallback: 'MAIN-TITLES-H2-font', tooltip: 'text font of h3-h6 titles' }, + { name: 'MAIN-TITLES-H4-font', group: 'headings', fallback: 'MAIN-TITLES-H3-font', tooltip: 'text font of h4-h6 titles' }, + { name: 'MAIN-TITLES-H5-font', group: 'headings', fallback: 'MAIN-TITLES-H4-font', tooltip: 'text font of h5-h6 titles' }, + { name: 'MAIN-TITLES-H6-font', group: 'headings', fallback: 'MAIN-TITLES-H5-font', tooltip: 'text font of h6 titles' }, + + { name: 'CODE-theme', group: 'code', default: 'relearn-light', tooltip: 'name of the chroma stylesheet file' }, + { name: 'CODE-font', group: 'code', default: '"Consolas", menlo, monospace', tooltip: 'text font of code' }, + { name: 'CODE-BLOCK-color', group: 'code blocks', default: '#000000', tooltip: 'fallback text color of block code; should be adjusted to your selected chroma style' }, + { name: 'CODE-BLOCK-BG-color', group: 'code blocks', default: '#f8f8f8', tooltip: 'fallback background color of block code; should be adjusted to your selected chroma style' }, + { name: 'CODE-BLOCK-BORDER-color', group: 'code blocks', fallback: 'CODE-BLOCK-BG-color', tooltip: 'border color of block code' }, + { name: 'CODE-INLINE-color', group: 'inline code', default: '#5e5e5e', tooltip: 'text color of inline code' }, + { name: 'CODE-INLINE-BG-color', group: 'inline code', default: '#fffae9', tooltip: 'background color of inline code' }, + { name: 'CODE-INLINE-BORDER-color', group: 'inline code', default: '#fbf0cb', tooltip: 'border color of inline code' }, + + { name: 'BROWSER-theme', group: '3rd party', default: 'light', tooltip: 'name of the theme for browser scrollbars of the main section' }, + { name: 'MERMAID-theme', group: '3rd party', default: 'default', tooltip: 'name of the default Mermaid theme for this variant, can be overridden in hugo.toml' }, + { name: 'OPENAPI-theme', group: '3rd party', default: 'light', tooltip: 'name of the default OpenAPI theme for this variant, can be overridden in hugo.toml' }, + { name: 'OPENAPI-CODE-theme', group: '3rd party', default: 'obsidian', tooltip: 'name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml' }, + + { name: 'MENU-BORDER-color', group: 'header', default: 'transparent', tooltip: 'border color between menu and content' }, + { name: 'MENU-TOPBAR-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'border color of vertical line between menu and topbar' }, + { name: 'MENU-TOPBAR-SEPARATOR-color', group: 'header', default: 'transparent', tooltip: 'separator color of vertical line between menu and topbar' }, + { name: 'MENU-HEADER-BG-color', group: 'header', fallback: 'PRIMARY-color', tooltip: 'background color of menu header' }, + { name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'border color between menu header and menu' }, + { name: 'MENU-HEADER-SEPARATOR-color', group: 'header', fallback: 'MENU-HEADER-BORDER-color', tooltip: 'separator color between menu header and menu' }, + { name: 'MENU-HOME-LINK-color', group: 'header', default: '#323232', tooltip: 'home button color if configured' }, + { name: 'MENU-HOME-LINK-HOVER-color', group: 'header', default: '#808080', tooltip: 'hoverd home button color if configured' }, + { name: 'MENU-SEARCH-color', group: 'header', default: '#e0e0e0', tooltip: 'text and icon color of search box' }, + { name: 'MENU-SEARCH-BG-color', group: 'header', default: '#323232', tooltip: 'background color of search box' }, + { name: 'MENU-SEARCH-BORDER-color', group: 'header', fallback: 'MENU-SEARCH-BG-color', tooltip: 'border color of search box' }, + + { name: 'MENU-SECTIONS-BG-color', group: 'sections', default: '#282828', tooltip: 'background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc.' }, + { name: 'MENU-SECTIONS-ACTIVE-BG-color', group: 'sections', default: 'rgba( 0, 0, 0, .166 )', tooltip: 'background color of the active menu section' }, + { name: 'MENU-SECTIONS-LINK-color', group: 'sections', default: '#bababa', tooltip: 'link color of menu topics' }, + { name: 'MENU-SECTIONS-LINK-HOVER-color', group: 'sections', fallback: 'MENU-SECTIONS-LINK-color', tooltip: 'hoverd link color of menu topics' }, + { name: 'MENU-SECTION-ACTIVE-CATEGORY-color', group: 'sections', default: '#444444', tooltip: 'text color of the displayed menu topic' }, + { name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections', fallback: 'MAIN-BG-color', tooltip: 'background color of the displayed menu topic' }, + { name: 'MENU-SECTION-ACTIVE-CATEGORY-BORDER-color', group: 'sections', default: 'transparent', tooltip: 'border color between the displayed menu topic and the content' }, + { name: 'MENU-SECTION-SEPARATOR-color', group: 'sections', default: '#606060', tooltip: 'separator color between menu sections and menu footer' }, + { name: 'MENU-VISITED-color', group: 'sections', fallback: 'SECONDARY-color', tooltip: 'icon color of visited menu topics if configured' }, + + { name: 'BOX-CAPTION-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, 1 )', tooltip: 'text color of colored box titles' }, + { name: 'BOX-BG-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, .833 )', tooltip: 'background color of colored boxes' }, + { name: 'BOX-TEXT-color', group: 'colored boxes', fallback: 'MAIN-TEXT-color', tooltip: 'text color of colored box content' }, + + { name: 'BOX-BLUE-color', group: 'colored boxes', default: 'rgba( 48, 117, 229, 1 )', tooltip: 'background color of blue boxes' }, + { name: 'BOX-INFO-color', group: 'colored boxes', fallback: 'BOX-BLUE-color', tooltip: 'background color of info boxes' }, + { name: 'BOX-BLUE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of blue boxes' }, + { name: 'BOX-INFO-TEXT-color', group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color', tooltip: 'text color of info boxes' }, + + { name: 'BOX-CYAN-color', group: 'colored boxes', default: 'rgba( 45, 190, 200, 1 )', tooltip: 'background color of cyan boxes' }, + { name: 'BOX-IMPORTANT-color', group: 'colored boxes', fallback: 'BOX-CYAN-color', tooltip: 'background color of info boxes' }, + { name: 'BOX-CYAN-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of cyan boxes' }, + { name: 'BOX-IMPORTANT-TEXT-color', group: 'colored boxes', fallback: 'BOX-CYAN-TEXT-color', tooltip: 'text color of info boxes' }, + + { name: 'BOX-GREEN-color', group: 'colored boxes', default: 'rgba( 42, 178, 24, 1 )', tooltip: 'background color of green boxes' }, + { name: 'BOX-TIP-color', group: 'colored boxes', fallback: 'BOX-GREEN-color', tooltip: 'background color of tip boxes' }, + { name: 'BOX-GREEN-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of green boxes' }, + { name: 'BOX-TIP-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREEN-TEXT-color', tooltip: 'text color of tip boxes' }, + + { name: 'BOX-GREY-color', group: 'colored boxes', default: 'rgba( 128, 128, 128, 1 )', tooltip: 'background color of grey boxes' }, + { name: 'BOX-NEUTRAL-color', group: 'colored boxes', fallback: 'BOX-GREY-color', tooltip: 'background color of neutral boxes' }, + { name: 'BOX-GREY-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of grey boxes' }, + { name: 'BOX-NEUTRAL-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color', tooltip: 'text color of neutral boxes' }, + + { name: 'BOX-MAGENTA-color', group: 'colored boxes', default: 'rgba( 229, 50, 210, 1 )', tooltip: 'background color of magenta boxes' }, + { name: 'BOX-CAUTION-color', group: 'colored boxes', fallback: 'BOX-MAGENTA-color', tooltip: 'background color of info boxes' }, + { name: 'BOX-MAGENTA-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of magenta boxes' }, + { name: 'BOX-CAUTION-TEXT-color', group: 'colored boxes', fallback: 'BOX-MAGENTA-TEXT-color', tooltip: 'text color of info boxes' }, + + { name: 'BOX-ORANGE-color', group: 'colored boxes', default: 'rgba( 237, 153, 9, 1 )', tooltip: 'background color of orange boxes' }, + { name: 'BOX-NOTE-color', group: 'colored boxes', fallback: 'BOX-ORANGE-color', tooltip: 'background color of note boxes' }, + { name: 'BOX-ORANGE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of orange boxes' }, + { name: 'BOX-NOTE-TEXT-color', group: 'colored boxes', fallback: 'BOX-ORANGE-TEXT-color', tooltip: 'text color of note boxes' }, + + { name: 'BOX-RED-color', group: 'colored boxes', default: 'rgba( 224, 62, 62, 1 )', tooltip: 'background color of red boxes' }, + { name: 'BOX-WARNING-color', group: 'colored boxes', fallback: 'BOX-RED-color', tooltip: 'background color of warning boxes' }, + { name: 'BOX-RED-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of red boxes' }, + { name: 'BOX-WARNING-TEXT-color', group: 'colored boxes', fallback: 'BOX-RED-TEXT-color', tooltip: 'text color of warning boxes' }, + ], }; diff --git a/vscode-frontmatter/snippets.de.json b/vscode-frontmatter/snippets.de.json index 46d753d05a..4e8abaafab 100644 --- a/vscode-frontmatter/snippets.de.json +++ b/vscode-frontmatter/snippets.de.json @@ -1,817 +1,546 @@ { - "frontMatter.content.snippets": { - "Badge": { - "body": [ - "{{% badge title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" %}}[[&content]]{{% /badge %}}" - ], - "description": "Zeigt einen kleinen Marker im Text an", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "default": "", - "name": "title", - "title": "Titel", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Stil-Schema", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "CSS-Farbwert", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome Icon", - "type": "string" - } - ] - }, - "Button": { - "body": [ - "{{% button href=\"[[&href]]\" target=\"[[&target]]\" type=\"[[&type]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" iconposition=\"[[&iconposition]]\" %}}[[&content]]{{% /button %}}" - ], - "description": "Zeigt eine anklickbare Schaltfläche an", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "default": "", - "name": "href", - "title": "Ziel-URL", - "type": "string" - }, - { - "default": "", - "name": "target", - "title": "HTML a[target] wie z.B. `_self` oder `_blank`", - "type": "string" - }, - { - "default": "", - "name": "type", - "title": "HTML button[type] wie z.B. `button` oder `submit`", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Stil-Schema", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "CSS-Farbwert", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome Icon", - "type": "string" - }, - { - "choices": [ - "", - "left", - "right" - ], - "default": "", - "name": "iconposition", - "title": "Position des Icons", - "type": "choice" - } - ] - }, - "Children": { - "body": [ - "{{% children description=\"[[&description]]\" depth=\"[[&depth]]\" sort=\"[[&sort]]\" showhidden=\"[[&showhidden]]\" containerstyle=\"[[&containerstyle]]\" style=\"[[&style]]\" %}}" - ], - "description": "Zeigt eine Liste der Unterseiten dieser Seite an", - "fields": [ - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "description", - "title": "Unterseiten-Beschreibung anzeigen", - "type": "choice" - }, - { - "default": "", - "name": "depth", - "title": "Tiefe der anzuzeigenden Unterseiten-Ebenen", - "type": "string" - }, - { - "default": "", - "name": "sort", - "title": "Sortierfeld", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "showhidden", - "title": "Versteckte Unterseiten anzeigen", - "type": "choice" - }, - { - "default": "", - "name": "containerstyle", - "title": "Container-HTML-Element", - "type": "string" - }, - { - "default": "", - "name": "style", - "title": "Container-Kind-HTML-Element", - "type": "string" - } - ] - }, - "Expand": { - "body": [ - "{{% expand title=\"[[&title]]\" expanded=\"[[&expanded]]\" %}}[[&content]]{{% /expand %}}" - ], - "description": "Zeigt einen ein-/ausklappbaren Textblock an", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "default": "", - "name": "title", - "title": "Titel", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "expanded", - "title": "Inhalt initial ausklappen", - "type": "choice" - } - ] - }, - "Highlight": { - "body": [ - "````[[&type]] title=\"[[&title]]\" wrap=\"[[&wrap]]\" lineNos=\"[[&lineNos]]\" anchorLineNos=\"[[&anchorLineNos]]\" lineAnchors=\"[[&lineAnchors]]\" lineNoStart=\"[[&lineNoStart]]\" hl_Lines=\"[[&hl_Lines]]\"", - "[[&content]]", - "````" - ], - "description": "Zeigt formatierten Code an", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "name": "title", - "title": "Titel", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "wrap", - "title": "Zeilen umbrechen", - "type": "choice" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "lineNos", - "title": "Zeilennummern anzeigen", - "type": "choice" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "anchorLineNos", - "title": "Zeilennummern verlinkbar", - "type": "choice" - }, - { - "default": "", - "name": "lineAnchors", - "title": "Eindeutiges Prefix für verlinkbare Zeilennummern", - "type": "string" - }, - { - "default": "", - "name": "lineNoStart", - "title": "Erste Zeilennummer", - "type": "string" - }, - { - "default": "", - "name": "hl_Lines", - "title": "Zu markierende Zeilen", - "type": "string" - } - ] - }, - "Icon": { - "body": [ - "{{% icon [[&icon]] %}}" - ], - "description": "Zeigt ein Font Awesome Icon an", - "fields": [ - { - "name": "icon", - "title": "Font Awesome Icon", - "type": "string" - } - ] - }, - "Include": { - "body": [ - "{{% include file=\"[[&file]]\" hidefirstheading=\"[[&hidefirstheading]]\" %}}" - ], - "description": "Zeigt den Inhalt einer Datei an", - "fields": [ - { - "name": "file", - "title": "Pfad zur Datei", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "hidefirstheading", - "title": "Erste Überschrift verstecken", - "type": "choice" - } - ] - }, - "Math": { - "body": [ - "````math align=\"[[&align]]\"", - "[[&content]]", - "````" - ], - "description": "Zeigt eine mathematische oder chemische Formel mittels MathJax an", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Formel", - "type": "string" - }, - { - "choices": [ - "", - "left", - "center", - "right" - ], - "default": "", - "name": "align", - "title": "Horizontale Ausrichtung", - "type": "choice" - } - ] - }, - "Mermaid": { - "body": [ - "````mermaid align=\"[[&align]]\" zoom=\"[[&zoom]]\"", - "[[&content]]", - "````" - ], - "description": "Zeigt ein Mermaid Diagramm an", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Diagramm", - "type": "string" - }, - { - "choices": [ - "", - "left", - "center", - "right" - ], - "default": "", - "name": "align", - "title": "Horizontale Ausrichtung", - "type": "choice" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "zoom", - "title": "Diagramm schieb- und zoombar", - "type": "choice" - } - ] - }, - "Notice": { - "body": [ - "{{% notice title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" expanded=\"[[&expanded]]\" %}}[[&content]]{{% /notice %}}" - ], - "description": "Zeigt eine konfigurierbare Text-Box an", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "default": "", - "name": "title", - "title": "Titel", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Stil-Schema", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "CSS-Farbwert", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome Icon", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "expanded", - "title": "Inhalt initial ausklappen", - "type": "choice" - } - ] - }, - "OpenAPI": { - "body": [ - "{{< openapi src=\"[[&src]]\" >}}" - ], - "description": "Zeigt eine OpenAPI / Swagger Spezifikation an", - "fields": [ - { - "name": "src", - "title": "URL zur OpenAPI Specifikation", - "type": "string" - } - ] - }, - "Resources": { - "body": [ - "{{% resources title=\"[[&title]]\" pattern=\"[[&pattern]]\" sort=\"[[&sort]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" expanded=\"[[&expanded]]\" /%}}" - ], - "description": "Zeigt eine Liste von Resourcen eines Page Bundles an", - "fields": [ - { - "default": "", - "name": "title", - "title": "Titel", - "type": "string" - }, - { - "default": "", - "name": "pattern", - "title": "Regex zum Filtern der Dateinamen", - "type": "string" - }, - { - "choices": [ - "", - "asc", - "desc" - ], - "default": "", - "name": "sort", - "title": "Ausgabereihenfolge", - "type": "choice" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Stil-Schema", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "CSS-Farbwert", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome Icon", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "expanded", - "title": "Resourceliste initial ausklappen", - "type": "choice" - } - ] - }, - "Site Param": { - "body": [ - "{{% siteparam name=\"[[&name]]\" %}}" - ], - "description": "Zeigt einen \"site parameter\" an", - "fields": [ - { - "name": "name", - "title": "Name des \"site parameter\"", - "type": "string" - } - ] - }, - "Tab": { - "body": [ - "{{% tab title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" %}}", - "[[&content]]", - "{{% /tab %}}" - ], - "description": "Zeigt einen einzelnen Tab an", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "name": "title", - "title": "Titel", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Stil-Schema", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "CSS-Farbwert", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome Icon", - "type": "string" - } - ] - }, - "Tabs": { - "body": [ - "{{< tabs title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" groupid=\"[[&groupid]]\" >}}", - "{{% tab title=\"[[&title1]]\" style=\"[[&style1]]\" color=\"[[&color1]]\" icon=\"[[&icon1]]\" %}}", - "[[&content1]]", - "{{% /tab %}}", - "{{% tab title=\"[[&title2]]\" style=\"[[&style2]]\" color=\"[[&color2]]\" icon=\"[[&icon2]]\" %}}", - "[[&content2]]", - "{{% /tab %}}", - "{{< /tabs >}}" - ], - "description": "Zeigt eine Tabgruppe an", - "fields": [ - { - "default": "", - "name": "title", - "title": "Titel der Tabgruppe", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Standard-Stil-Schema aller Tabs", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "Standard-CSS-Farbwert aller Tabs", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome Icon der Tabgruppe", - "type": "string" - }, - { - "default": "", - "name": "groupid", - "title": "ID, die zum synchronisieren der Tabauswahl über mehrere Tabgruppen hinweg benutzt werden soll", - "type": "string" - }, - { - "default": "FM_SELECTED_TEXT", - "name": "content1", - "title": "Text des ersten Tabs", - "type": "string" - }, - { - "name": "title1", - "title": "Titel des ersten Tabs", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style1", - "title": "Stil-Schema des ersten Tabs", - "type": "choice" - }, - { - "default": "", - "name": "color1", - "title": "CSS-Farbwert des ersten Tabs", - "type": "string" - }, - { - "default": "", - "name": "icon1", - "title": "Font Awesome Icon des ersten Tabs", - "type": "string" - }, - { - "default": "", - "name": "content2", - "title": "Text des zweiten Tabs", - "type": "string" - }, - { - "name": "title2", - "title": "Titel des zweiten Tabs", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style2", - "title": "Stil-Schema des zweiten Tabs", - "type": "choice" - }, - { - "default": "", - "name": "color2", - "title": "CSS-Farbwert des zweiten Tabs", - "type": "string" - }, - { - "default": "", - "name": "icon2", - "title": "Font Awesome Icon des zweiten Tabs", - "type": "string" - } - ] - } - } + "frontMatter.content.snippets": { + "Badge": { + "body": ["{{% badge title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" %}}[[&content]]{{% /badge %}}"], + "description": "Zeigt einen kleinen Marker im Text an", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "default": "", + "name": "title", + "title": "Titel", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Stil-Schema", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "CSS-Farbwert", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome Icon", + "type": "string" + } + ] + }, + "Button": { + "body": ["{{% button href=\"[[&href]]\" target=\"[[&target]]\" type=\"[[&type]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" iconposition=\"[[&iconposition]]\" %}}[[&content]]{{% /button %}}"], + "description": "Zeigt eine anklickbare Schaltfläche an", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "default": "", + "name": "href", + "title": "Ziel-URL", + "type": "string" + }, + { + "default": "", + "name": "target", + "title": "HTML a[target] wie z.B. `_self` oder `_blank`", + "type": "string" + }, + { + "default": "", + "name": "type", + "title": "HTML button[type] wie z.B. `button` oder `submit`", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Stil-Schema", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "CSS-Farbwert", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome Icon", + "type": "string" + }, + { + "choices": ["", "left", "right"], + "default": "", + "name": "iconposition", + "title": "Position des Icons", + "type": "choice" + } + ] + }, + "Children": { + "body": ["{{% children description=\"[[&description]]\" depth=\"[[&depth]]\" sort=\"[[&sort]]\" showhidden=\"[[&showhidden]]\" containerstyle=\"[[&containerstyle]]\" style=\"[[&style]]\" %}}"], + "description": "Zeigt eine Liste der Unterseiten dieser Seite an", + "fields": [ + { + "choices": ["", "false", "true"], + "default": "", + "name": "description", + "title": "Unterseiten-Beschreibung anzeigen", + "type": "choice" + }, + { + "default": "", + "name": "depth", + "title": "Tiefe der anzuzeigenden Unterseiten-Ebenen", + "type": "string" + }, + { + "default": "", + "name": "sort", + "title": "Sortierfeld", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "showhidden", + "title": "Versteckte Unterseiten anzeigen", + "type": "choice" + }, + { + "default": "", + "name": "containerstyle", + "title": "Container-HTML-Element", + "type": "string" + }, + { + "default": "", + "name": "style", + "title": "Container-Kind-HTML-Element", + "type": "string" + } + ] + }, + "Expand": { + "body": ["{{% expand title=\"[[&title]]\" expanded=\"[[&expanded]]\" %}}[[&content]]{{% /expand %}}"], + "description": "Zeigt einen ein-/ausklappbaren Textblock an", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "default": "", + "name": "title", + "title": "Titel", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "expanded", + "title": "Inhalt initial ausklappen", + "type": "choice" + } + ] + }, + "Highlight": { + "body": ["````[[&type]] title=\"[[&title]]\" wrap=\"[[&wrap]]\" lineNos=\"[[&lineNos]]\" anchorLineNos=\"[[&anchorLineNos]]\" lineAnchors=\"[[&lineAnchors]]\" lineNoStart=\"[[&lineNoStart]]\" hl_Lines=\"[[&hl_Lines]]\"", "[[&content]]", "````"], + "description": "Zeigt formatierten Code an", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "name": "title", + "title": "Titel", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "wrap", + "title": "Zeilen umbrechen", + "type": "choice" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "lineNos", + "title": "Zeilennummern anzeigen", + "type": "choice" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "anchorLineNos", + "title": "Zeilennummern verlinkbar", + "type": "choice" + }, + { + "default": "", + "name": "lineAnchors", + "title": "Eindeutiges Prefix für verlinkbare Zeilennummern", + "type": "string" + }, + { + "default": "", + "name": "lineNoStart", + "title": "Erste Zeilennummer", + "type": "string" + }, + { + "default": "", + "name": "hl_Lines", + "title": "Zu markierende Zeilen", + "type": "string" + } + ] + }, + "Icon": { + "body": ["{{% icon [[&icon]] %}}"], + "description": "Zeigt ein Font Awesome Icon an", + "fields": [ + { + "name": "icon", + "title": "Font Awesome Icon", + "type": "string" + } + ] + }, + "Include": { + "body": ["{{% include file=\"[[&file]]\" hidefirstheading=\"[[&hidefirstheading]]\" %}}"], + "description": "Zeigt den Inhalt einer Datei an", + "fields": [ + { + "name": "file", + "title": "Pfad zur Datei", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "hidefirstheading", + "title": "Erste Überschrift verstecken", + "type": "choice" + } + ] + }, + "Math": { + "body": ["````math align=\"[[&align]]\"", "[[&content]]", "````"], + "description": "Zeigt eine mathematische oder chemische Formel mittels MathJax an", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Formel", + "type": "string" + }, + { + "choices": ["", "left", "center", "right"], + "default": "", + "name": "align", + "title": "Horizontale Ausrichtung", + "type": "choice" + } + ] + }, + "Mermaid": { + "body": ["````mermaid align=\"[[&align]]\" zoom=\"[[&zoom]]\"", "[[&content]]", "````"], + "description": "Zeigt ein Mermaid Diagramm an", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Diagramm", + "type": "string" + }, + { + "choices": ["", "left", "center", "right"], + "default": "", + "name": "align", + "title": "Horizontale Ausrichtung", + "type": "choice" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "zoom", + "title": "Diagramm schieb- und zoombar", + "type": "choice" + } + ] + }, + "Notice": { + "body": ["{{% notice title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" expanded=\"[[&expanded]]\" %}}[[&content]]{{% /notice %}}"], + "description": "Zeigt eine konfigurierbare Text-Box an", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "default": "", + "name": "title", + "title": "Titel", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Stil-Schema", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "CSS-Farbwert", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome Icon", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "expanded", + "title": "Inhalt initial ausklappen", + "type": "choice" + } + ] + }, + "OpenAPI": { + "body": ["{{< openapi src=\"[[&src]]\" >}}"], + "description": "Zeigt eine OpenAPI / Swagger Spezifikation an", + "fields": [ + { + "name": "src", + "title": "URL zur OpenAPI Specifikation", + "type": "string" + } + ] + }, + "Resources": { + "body": ["{{% resources title=\"[[&title]]\" pattern=\"[[&pattern]]\" sort=\"[[&sort]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" expanded=\"[[&expanded]]\" /%}}"], + "description": "Zeigt eine Liste von Resourcen eines Page Bundles an", + "fields": [ + { + "default": "", + "name": "title", + "title": "Titel", + "type": "string" + }, + { + "default": "", + "name": "pattern", + "title": "Regex zum Filtern der Dateinamen", + "type": "string" + }, + { + "choices": ["", "asc", "desc"], + "default": "", + "name": "sort", + "title": "Ausgabereihenfolge", + "type": "choice" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Stil-Schema", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "CSS-Farbwert", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome Icon", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "expanded", + "title": "Resourceliste initial ausklappen", + "type": "choice" + } + ] + }, + "Site Param": { + "body": ["{{% siteparam name=\"[[&name]]\" %}}"], + "description": "Zeigt einen \"site parameter\" an", + "fields": [ + { + "name": "name", + "title": "Name des \"site parameter\"", + "type": "string" + } + ] + }, + "Tab": { + "body": ["{{% tab title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" %}}", "[[&content]]", "{{% /tab %}}"], + "description": "Zeigt einen einzelnen Tab an", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "name": "title", + "title": "Titel", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Stil-Schema", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "CSS-Farbwert", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome Icon", + "type": "string" + } + ] + }, + "Tabs": { + "body": ["{{< tabs title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" groupid=\"[[&groupid]]\" >}}", "{{% tab title=\"[[&title1]]\" style=\"[[&style1]]\" color=\"[[&color1]]\" icon=\"[[&icon1]]\" %}}", "[[&content1]]", "{{% /tab %}}", "{{% tab title=\"[[&title2]]\" style=\"[[&style2]]\" color=\"[[&color2]]\" icon=\"[[&icon2]]\" %}}", "[[&content2]]", "{{% /tab %}}", "{{< /tabs >}}"], + "description": "Zeigt eine Tabgruppe an", + "fields": [ + { + "default": "", + "name": "title", + "title": "Titel der Tabgruppe", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Standard-Stil-Schema aller Tabs", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "Standard-CSS-Farbwert aller Tabs", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome Icon der Tabgruppe", + "type": "string" + }, + { + "default": "", + "name": "groupid", + "title": "ID, die zum synchronisieren der Tabauswahl über mehrere Tabgruppen hinweg benutzt werden soll", + "type": "string" + }, + { + "default": "FM_SELECTED_TEXT", + "name": "content1", + "title": "Text des ersten Tabs", + "type": "string" + }, + { + "name": "title1", + "title": "Titel des ersten Tabs", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style1", + "title": "Stil-Schema des ersten Tabs", + "type": "choice" + }, + { + "default": "", + "name": "color1", + "title": "CSS-Farbwert des ersten Tabs", + "type": "string" + }, + { + "default": "", + "name": "icon1", + "title": "Font Awesome Icon des ersten Tabs", + "type": "string" + }, + { + "default": "", + "name": "content2", + "title": "Text des zweiten Tabs", + "type": "string" + }, + { + "name": "title2", + "title": "Titel des zweiten Tabs", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style2", + "title": "Stil-Schema des zweiten Tabs", + "type": "choice" + }, + { + "default": "", + "name": "color2", + "title": "CSS-Farbwert des zweiten Tabs", + "type": "string" + }, + { + "default": "", + "name": "icon2", + "title": "Font Awesome Icon des zweiten Tabs", + "type": "string" + } + ] + } + } } diff --git a/vscode-frontmatter/snippets.en.json b/vscode-frontmatter/snippets.en.json index d47d0facc9..ea2d2d29c8 100644 --- a/vscode-frontmatter/snippets.en.json +++ b/vscode-frontmatter/snippets.en.json @@ -1,817 +1,546 @@ { - "frontMatter.content.snippets": { - "Badge": { - "body": [ - "{{% badge title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" %}}[[&content]]{{% /badge %}}" - ], - "description": "Displays a little marker in the text", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "default": "", - "name": "title", - "title": "Title", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Style scheme", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "CSS color value", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome icon", - "type": "string" - } - ] - }, - "Button": { - "body": [ - "{{% button href=\"[[&href]]\" target=\"[[&target]]\" type=\"[[&type]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" iconposition=\"[[&iconposition]]\" %}}[[&content]]{{% /button %}}" - ], - "description": "Displays a clickable button", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "default": "", - "name": "href", - "title": "Destination URL", - "type": "string" - }, - { - "default": "", - "name": "target", - "title": "HTML a[target] like eg. `_self` or `_blank`", - "type": "string" - }, - { - "default": "", - "name": "type", - "title": "HTML button[type] like eg. `button` or `submit`", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Style scheme", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "CSS color value", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome icon", - "type": "string" - }, - { - "choices": [ - "", - "left", - "right" - ], - "default": "", - "name": "iconposition", - "title": "Position of the icon", - "type": "choice" - } - ] - }, - "Children": { - "body": [ - "{{% children description=\"[[&description]]\" depth=\"[[&depth]]\" sort=\"[[&sort]]\" showhidden=\"[[&showhidden]]\" containerstyle=\"[[&containerstyle]]\" style=\"[[&style]]\" %}}" - ], - "description": "Displays a list of child pages for the page", - "fields": [ - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "description", - "title": "Show child page description", - "type": "choice" - }, - { - "default": "", - "name": "depth", - "title": "Depth of child page level to display", - "type": "string" - }, - { - "default": "", - "name": "sort", - "title": "Sort predicate", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "showhidden", - "title": "Show hidden child pages", - "type": "choice" - }, - { - "default": "", - "name": "containerstyle", - "title": "Container HTML element", - "type": "string" - }, - { - "default": "", - "name": "style", - "title": "Container child HTML element", - "type": "string" - } - ] - }, - "Expand": { - "body": [ - "{{% expand title=\"[[&title]]\" expanded=\"[[&expanded]]\" %}}[[&content]]{{% /expand %}}" - ], - "description": "Displays an expandable/collapsable section of text", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "default": "", - "name": "title", - "title": "Title", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "expanded", - "title": "Initially expand content", - "type": "choice" - } - ] - }, - "Highlight": { - "body": [ - "````[[&type]] title=\"[[&title]]\" wrap=\"[[&wrap]]\" lineNos=\"[[&lineNos]]\" anchorLineNos=\"[[&anchorLineNos]]\" lineAnchors=\"[[&lineAnchors]]\" lineNoStart=\"[[&lineNoStart]]\" hl_Lines=\"[[&hl_Lines]]\"", - "[[&content]]", - "````" - ], - "description": "Displays syntaxhighlighted code", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "name": "title", - "title": "Title", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "wrap", - "title": "Wrap lines", - "type": "choice" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "lineNos", - "title": "Display line number", - "type": "choice" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "anchorLineNos", - "title": "Line numbers linkable", - "type": "choice" - }, - { - "default": "", - "name": "lineAnchors", - "title": "Unique prefix for linkable line numbers", - "type": "string" - }, - { - "default": "", - "name": "lineNoStart", - "title": "First line number", - "type": "string" - }, - { - "default": "", - "name": "hl_Lines", - "title": "Markable lines", - "type": "string" - } - ] - }, - "Icon": { - "body": [ - "{{% icon [[&icon]] %}}" - ], - "description": "Displays a Font Awesome icon", - "fields": [ - { - "name": "icon", - "title": "Font Awesome icon", - "type": "string" - } - ] - }, - "Include": { - "body": [ - "{{% include file=\"[[&file]]\" hidefirstheading=\"[[&hidefirstheading]]\" %}}" - ], - "description": "Displays the content of another file", - "fields": [ - { - "name": "file", - "title": "File path", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "hidefirstheading", - "title": "Hide first heading", - "type": "choice" - } - ] - }, - "Math": { - "body": [ - "````math align=\"[[&align]]\"", - "[[&content]]", - "````" - ], - "description": "Displays a math or chemical formulae using MathJax", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Formulae", - "type": "string" - }, - { - "choices": [ - "", - "left", - "center", - "right" - ], - "default": "", - "name": "align", - "title": "Horizontal alignment", - "type": "choice" - } - ] - }, - "Mermaid": { - "body": [ - "````mermaid align=\"[[&align]]\" zoom=\"[[&zoom]]\"", - "[[&content]]", - "````" - ], - "description": "Displays a Mermaid diagram or flowchart", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Diagram", - "type": "string" - }, - { - "choices": [ - "", - "left", - "center", - "right" - ], - "default": "", - "name": "align", - "title": "Horizontal alignment", - "type": "choice" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "zoom", - "title": "Diagram is pan- and zoomable", - "type": "choice" - } - ] - }, - "Notice": { - "body": [ - "{{% notice title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" expanded=\"[[&expanded]]\" %}}[[&content]]{{% /notice %}}" - ], - "description": "Displays a configurable box of text", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "default": "", - "name": "title", - "title": "Title", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Style scheme", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "CSS color value", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome icon", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "expanded", - "title": "Initially expand content", - "type": "choice" - } - ] - }, - "OpenAPI": { - "body": [ - "{{< openapi src=\"[[&src]]\" >}}" - ], - "description": "Displays a OpenAPI / Swagger specification", - "fields": [ - { - "name": "src", - "title": "URL to the OpenAPI specification", - "type": "string" - } - ] - }, - "Resources": { - "body": [ - "{{% resources title=\"[[&title]]\" pattern=\"[[&pattern]]\" sort=\"[[&sort]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" expanded=\"[[&expanded]]\" /%}}" - ], - "description": "Displays a list of resources contained in a page bundle", - "fields": [ - { - "default": "", - "name": "title", - "title": "Title", - "type": "string" - }, - { - "default": "", - "name": "pattern", - "title": "Regex for filtering file names", - "type": "string" - }, - { - "choices": [ - "", - "asc", - "desc" - ], - "default": "", - "name": "sort", - "title": "Sorting order", - "type": "choice" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Style scheme", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "CSS color value", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome icon", - "type": "string" - }, - { - "choices": [ - "", - "false", - "true" - ], - "default": "", - "name": "expanded", - "title": "Initially expand resource list", - "type": "choice" - } - ] - }, - "Site Param": { - "body": [ - "{{% siteparam name=\"[[&name]]\" %}}" - ], - "description": "Displays the value of a site parameter", - "fields": [ - { - "name": "name", - "title": "The name of the site parameter", - "type": "string" - } - ] - }, - "Tab": { - "body": [ - "{{% tab title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" %}}", - "[[&content]]", - "{{% /tab %}}" - ], - "description": "Display a single tab", - "fields": [ - { - "default": "FM_SELECTED_TEXT", - "name": "content", - "title": "Text", - "type": "string" - }, - { - "name": "title", - "title": "Titel", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Style scheme", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "CSS color value", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome icon", - "type": "string" - } - ] - }, - "Tabs": { - "body": [ - "{{< tabs title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" groupid=\"[[&groupid]]\" >}}", - "{{% tab title=\"[[&title1]]\" style=\"[[&style1]]\" color=\"[[&color1]]\" icon=\"[[&icon1]]\" %}}", - "[[&content1]]", - "{{% /tab %}}", - "{{% tab title=\"[[&title2]]\" style=\"[[&style2]]\" color=\"[[&color2]]\" icon=\"[[&icon2]]\" %}}", - "[[&content2]]", - "{{% /tab %}}", - "{{< /tabs >}}" - ], - "description": "Display a set of tabs in a tab view", - "fields": [ - { - "default": "", - "name": "title", - "title": "Title of the tab view", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style", - "title": "Default style scheme of all tabs", - "type": "choice" - }, - { - "default": "", - "name": "color", - "title": "Default CSS color value of all tabs", - "type": "string" - }, - { - "default": "", - "name": "icon", - "title": "Font Awesome icon of the tab view", - "type": "string" - }, - { - "default": "", - "name": "groupid", - "title": "ID to synchronize the tab selection of multiple Tab snippets", - "type": "string" - }, - { - "default": "FM_SELECTED_TEXT", - "name": "content1", - "title": "Text of the first tab", - "type": "string" - }, - { - "name": "title1", - "title": "Title of the first tab", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style1", - "title": "Style scheme of the first tab", - "type": "choice" - }, - { - "default": "", - "name": "color1", - "title": "CSS color value of the first tab", - "type": "string" - }, - { - "default": "", - "name": "icon1", - "title": "Font Awesome icon of the first tab", - "type": "string" - }, - { - "default": "", - "name": "content2", - "title": "Text of the second tab", - "type": "string" - }, - { - "name": "title2", - "title": "Title of the second tab", - "type": "string" - }, - { - "choices": [ - "", - "caution", - "important", - "info", - "note", - "tip", - "warning", - "primary", - "secondary", - "accent", - "blue", - "cyan", - "green", - "grey", - "magenta", - "orange", - "red", - "default", - "transparent", - "code" - ], - "default": "", - "name": "style2", - "title": "Style scheme of the second tab", - "type": "choice" - }, - { - "default": "", - "name": "color2", - "title": "CSS color value of the second tab", - "type": "string" - }, - { - "default": "", - "name": "icon2", - "title": "Font Awesome icon of the second tab", - "type": "string" - } - ] - } - } + "frontMatter.content.snippets": { + "Badge": { + "body": ["{{% badge title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" %}}[[&content]]{{% /badge %}}"], + "description": "Displays a little marker in the text", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "default": "", + "name": "title", + "title": "Title", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Style scheme", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "CSS color value", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome icon", + "type": "string" + } + ] + }, + "Button": { + "body": ["{{% button href=\"[[&href]]\" target=\"[[&target]]\" type=\"[[&type]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" iconposition=\"[[&iconposition]]\" %}}[[&content]]{{% /button %}}"], + "description": "Displays a clickable button", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "default": "", + "name": "href", + "title": "Destination URL", + "type": "string" + }, + { + "default": "", + "name": "target", + "title": "HTML a[target] like eg. `_self` or `_blank`", + "type": "string" + }, + { + "default": "", + "name": "type", + "title": "HTML button[type] like eg. `button` or `submit`", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Style scheme", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "CSS color value", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome icon", + "type": "string" + }, + { + "choices": ["", "left", "right"], + "default": "", + "name": "iconposition", + "title": "Position of the icon", + "type": "choice" + } + ] + }, + "Children": { + "body": ["{{% children description=\"[[&description]]\" depth=\"[[&depth]]\" sort=\"[[&sort]]\" showhidden=\"[[&showhidden]]\" containerstyle=\"[[&containerstyle]]\" style=\"[[&style]]\" %}}"], + "description": "Displays a list of child pages for the page", + "fields": [ + { + "choices": ["", "false", "true"], + "default": "", + "name": "description", + "title": "Show child page description", + "type": "choice" + }, + { + "default": "", + "name": "depth", + "title": "Depth of child page level to display", + "type": "string" + }, + { + "default": "", + "name": "sort", + "title": "Sort predicate", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "showhidden", + "title": "Show hidden child pages", + "type": "choice" + }, + { + "default": "", + "name": "containerstyle", + "title": "Container HTML element", + "type": "string" + }, + { + "default": "", + "name": "style", + "title": "Container child HTML element", + "type": "string" + } + ] + }, + "Expand": { + "body": ["{{% expand title=\"[[&title]]\" expanded=\"[[&expanded]]\" %}}[[&content]]{{% /expand %}}"], + "description": "Displays an expandable/collapsable section of text", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "default": "", + "name": "title", + "title": "Title", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "expanded", + "title": "Initially expand content", + "type": "choice" + } + ] + }, + "Highlight": { + "body": ["````[[&type]] title=\"[[&title]]\" wrap=\"[[&wrap]]\" lineNos=\"[[&lineNos]]\" anchorLineNos=\"[[&anchorLineNos]]\" lineAnchors=\"[[&lineAnchors]]\" lineNoStart=\"[[&lineNoStart]]\" hl_Lines=\"[[&hl_Lines]]\"", "[[&content]]", "````"], + "description": "Displays syntaxhighlighted code", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "name": "title", + "title": "Title", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "wrap", + "title": "Wrap lines", + "type": "choice" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "lineNos", + "title": "Display line number", + "type": "choice" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "anchorLineNos", + "title": "Line numbers linkable", + "type": "choice" + }, + { + "default": "", + "name": "lineAnchors", + "title": "Unique prefix for linkable line numbers", + "type": "string" + }, + { + "default": "", + "name": "lineNoStart", + "title": "First line number", + "type": "string" + }, + { + "default": "", + "name": "hl_Lines", + "title": "Markable lines", + "type": "string" + } + ] + }, + "Icon": { + "body": ["{{% icon [[&icon]] %}}"], + "description": "Displays a Font Awesome icon", + "fields": [ + { + "name": "icon", + "title": "Font Awesome icon", + "type": "string" + } + ] + }, + "Include": { + "body": ["{{% include file=\"[[&file]]\" hidefirstheading=\"[[&hidefirstheading]]\" %}}"], + "description": "Displays the content of another file", + "fields": [ + { + "name": "file", + "title": "File path", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "hidefirstheading", + "title": "Hide first heading", + "type": "choice" + } + ] + }, + "Math": { + "body": ["````math align=\"[[&align]]\"", "[[&content]]", "````"], + "description": "Displays a math or chemical formulae using MathJax", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Formulae", + "type": "string" + }, + { + "choices": ["", "left", "center", "right"], + "default": "", + "name": "align", + "title": "Horizontal alignment", + "type": "choice" + } + ] + }, + "Mermaid": { + "body": ["````mermaid align=\"[[&align]]\" zoom=\"[[&zoom]]\"", "[[&content]]", "````"], + "description": "Displays a Mermaid diagram or flowchart", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Diagram", + "type": "string" + }, + { + "choices": ["", "left", "center", "right"], + "default": "", + "name": "align", + "title": "Horizontal alignment", + "type": "choice" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "zoom", + "title": "Diagram is pan- and zoomable", + "type": "choice" + } + ] + }, + "Notice": { + "body": ["{{% notice title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" expanded=\"[[&expanded]]\" %}}[[&content]]{{% /notice %}}"], + "description": "Displays a configurable box of text", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "default": "", + "name": "title", + "title": "Title", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Style scheme", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "CSS color value", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome icon", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "expanded", + "title": "Initially expand content", + "type": "choice" + } + ] + }, + "OpenAPI": { + "body": ["{{< openapi src=\"[[&src]]\" >}}"], + "description": "Displays a OpenAPI / Swagger specification", + "fields": [ + { + "name": "src", + "title": "URL to the OpenAPI specification", + "type": "string" + } + ] + }, + "Resources": { + "body": ["{{% resources title=\"[[&title]]\" pattern=\"[[&pattern]]\" sort=\"[[&sort]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" expanded=\"[[&expanded]]\" /%}}"], + "description": "Displays a list of resources contained in a page bundle", + "fields": [ + { + "default": "", + "name": "title", + "title": "Title", + "type": "string" + }, + { + "default": "", + "name": "pattern", + "title": "Regex for filtering file names", + "type": "string" + }, + { + "choices": ["", "asc", "desc"], + "default": "", + "name": "sort", + "title": "Sorting order", + "type": "choice" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Style scheme", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "CSS color value", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome icon", + "type": "string" + }, + { + "choices": ["", "false", "true"], + "default": "", + "name": "expanded", + "title": "Initially expand resource list", + "type": "choice" + } + ] + }, + "Site Param": { + "body": ["{{% siteparam name=\"[[&name]]\" %}}"], + "description": "Displays the value of a site parameter", + "fields": [ + { + "name": "name", + "title": "The name of the site parameter", + "type": "string" + } + ] + }, + "Tab": { + "body": ["{{% tab title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" %}}", "[[&content]]", "{{% /tab %}}"], + "description": "Display a single tab", + "fields": [ + { + "default": "FM_SELECTED_TEXT", + "name": "content", + "title": "Text", + "type": "string" + }, + { + "name": "title", + "title": "Titel", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Style scheme", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "CSS color value", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome icon", + "type": "string" + } + ] + }, + "Tabs": { + "body": ["{{< tabs title=\"[[&title]]\" style=\"[[&style]]\" color=\"[[&color]]\" icon=\"[[&icon]]\" groupid=\"[[&groupid]]\" >}}", "{{% tab title=\"[[&title1]]\" style=\"[[&style1]]\" color=\"[[&color1]]\" icon=\"[[&icon1]]\" %}}", "[[&content1]]", "{{% /tab %}}", "{{% tab title=\"[[&title2]]\" style=\"[[&style2]]\" color=\"[[&color2]]\" icon=\"[[&icon2]]\" %}}", "[[&content2]]", "{{% /tab %}}", "{{< /tabs >}}"], + "description": "Display a set of tabs in a tab view", + "fields": [ + { + "default": "", + "name": "title", + "title": "Title of the tab view", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style", + "title": "Default style scheme of all tabs", + "type": "choice" + }, + { + "default": "", + "name": "color", + "title": "Default CSS color value of all tabs", + "type": "string" + }, + { + "default": "", + "name": "icon", + "title": "Font Awesome icon of the tab view", + "type": "string" + }, + { + "default": "", + "name": "groupid", + "title": "ID to synchronize the tab selection of multiple Tab snippets", + "type": "string" + }, + { + "default": "FM_SELECTED_TEXT", + "name": "content1", + "title": "Text of the first tab", + "type": "string" + }, + { + "name": "title1", + "title": "Title of the first tab", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style1", + "title": "Style scheme of the first tab", + "type": "choice" + }, + { + "default": "", + "name": "color1", + "title": "CSS color value of the first tab", + "type": "string" + }, + { + "default": "", + "name": "icon1", + "title": "Font Awesome icon of the first tab", + "type": "string" + }, + { + "default": "", + "name": "content2", + "title": "Text of the second tab", + "type": "string" + }, + { + "name": "title2", + "title": "Title of the second tab", + "type": "string" + }, + { + "choices": ["", "caution", "important", "info", "note", "tip", "warning", "primary", "secondary", "accent", "blue", "cyan", "green", "grey", "magenta", "orange", "red", "default", "transparent", "code"], + "default": "", + "name": "style2", + "title": "Style scheme of the second tab", + "type": "choice" + }, + { + "default": "", + "name": "color2", + "title": "CSS color value of the second tab", + "type": "string" + }, + { + "default": "", + "name": "icon2", + "title": "Font Awesome icon of the second tab", + "type": "string" + } + ] + } + } }