From 7e0c94b5c76cd134fe0d28ce99c6c901f4d54dd6 Mon Sep 17 00:00:00 2001 From: Anastasia Alexandrova Date: Tue, 27 Feb 2024 16:00:39 +0100 Subject: [PATCH] HD-22392 Added Osano cookie consent (#528) modified: _resource/overrides/main.html modified: _resource/overrides/partials/copyright.html new file: docs/css/osano.css new file: docs/js/consent.js modified: mkdocs-base.yml modified: mkdocs-pdf.yml --- _resource/overrides/main.html | 5 + _resource/overrides/partials/copyright.html | 2 +- docs/css/osano.css | 206 ++++++++++++++++++++ docs/js/consent.js | 6 + mkdocs-base.yml | 11 +- mkdocs-pdf.yml | 2 + 6 files changed, 223 insertions(+), 9 deletions(-) create mode 100644 docs/css/osano.css create mode 100644 docs/js/consent.js diff --git a/_resource/overrides/main.html b/_resource/overrides/main.html index be413bc35..840cfdbf9 100644 --- a/_resource/overrides/main.html +++ b/_resource/overrides/main.html @@ -20,6 +20,11 @@

Contact Us

{%- endmacro %} +{% block scripts %} + +{{ super() }} +{% endblock %} + {% block extrahead %} {{ super() }} {% set title = config.site_name %} diff --git a/_resource/overrides/partials/copyright.html b/_resource/overrides/partials/copyright.html index 4dc9e364a..dd0f101fa 100644 --- a/_resource/overrides/partials/copyright.html +++ b/_resource/overrides/partials/copyright.html @@ -3,7 +3,7 @@ -#}
- Percona LLC and/or its affiliates, © {{ build_date_utc.strftime('%Y') }} + Percona LLC and/or its affiliates, © {{ build_date_utc.strftime('%Y') }} — Cookie Preferences
{% if not config.extra.generator == false %} Made with diff --git a/docs/css/osano.css b/docs/css/osano.css new file mode 100644 index 000000000..b89fa6ac2 --- /dev/null +++ b/docs/css/osano.css @@ -0,0 +1,206 @@ +/* General styling */ + +.osano-cm-window { + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-size: 20px; +} +.osano-cm-dialog--type_bar { + justify-content: center; + color: #000; + background: #fff; + box-shadow: 0 0 0 100vmax rgba(0,0,0,0.66) +} + +.osano-cm-dialog { + font-size: 0.75em; + padding: 2em 1em; + color: var(--md-typeset-color); + background: var(--md-footer-bg-color--dark); +} +.osano-cm-header, +.osano-cm-info-dialog-header { + background: var(--md-default-bg-color); +} +.osano-cm-link, +.osano-cm-disclosure__toggle, +.osano-cm-expansion-panel__toggle { + color: var(--md-typeset-a-color); +} +.osano-cm-link:hover, +.osano-cm-link:active, +.osano-cm-disclosure__toggle:hover, +.osano-cm-disclosure__toggle:active, +.osano-cm-disclosure__toggle:focus, +.osano-cm-expansion-panel__toggle:hover, +.osano-cm-expansion-panel__toggle:active, +.osano-cm-expansion-panel__toggle:focus { + color: var(--md-accent-fg-color); +} +.osano-cm-drawer-links { + display: inline-block; +} +.osano-cm-link.osano-cm-storage-policy { + margin-right: 0.5em; +} +.osano-cm-description { + font-weight: 400; +} +.osano-cm-info { + color: var(--md-typeset-color); + background: var(--md-default-bg-color); + box-shadow: unset; +} +.osano-cm-dialog--hidden, +.osano-cm-info-dialog--hidden { + transition-delay: 0ms, 0ms; +} +.osano-cm-disclosure { + padding-top: 0; +} +.osano-cm-disclosure--collapse { + border-color: var(--md-default-fg-color--lightest); +} + +/* Closing button */ + +.osano-cm-dialog__close, +.osano-cm-dialog__close:hover, +.osano-cm-dialog__close:focus, +.osano-cm-dialog__close:focus:hover { + color: var(--md-typeset-color); + stroke: var(--md-typeset-color); + border-color: transparent; + outline: initial; +} +.osano-cm-dialog__close:focus { + background-color: var(--md-default-fg-color--lightest); +} +.osano-cm-close { + padding: 0.25em; + margin: 0.5em; + stroke-width: 2px; + border-width: 2px; + opacity: 0.4; +} +.osano-cm-close:focus, +.osano-cm-close:hover { + stroke-width: 2px; + opacity: 1; +} +.osano-cm-info-dialog-header__close:focus { + background-color: var(--md-typeset-color); +} + +/* Switch buttons */ + +.osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--lightest); + transition: all 0.1s ease-out; +} +.osano-cm-toggle__input:hover + .osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--light); + border-color: transparent; +} +.osano-cm-toggle__input:focus + .osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--lightest); + border-color: transparent; +} +.osano-cm-toggle__input:focus + .osano-cm-toggle__switch::before { + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:focus:hover + .osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--light); + border-color: transparent; +} +.osano-cm-toggle__input:checked + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked + .osano-cm-toggle__switch { + background-color: var(--md-primary-fg-color); + border-color: var(--md-primary-fg-color); +} +.osano-cm-toggle__input:checked:hover + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:hover + .osano-cm-toggle__switch { + background-color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:checked:focus + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:focus + .osano-cm-toggle__switch { + background-color: var(--md-primary-fg-color); + border-color: var(--md-primary-fg-color); +} +.osano-cm-toggle__input:checked:focus + .osano-cm-toggle__switch::before { + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:checked:focus:hover + .osano-cm-toggle__switch { + background-color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:disabled:checked + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:focus + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:hover + .osano-cm-toggle__switch { + opacity: 0.3; + cursor: not-allowed; +} +.osano-cm-toggle__input + .osano-cm-toggle__switch::after { + background-color: var(--md-default-bg-color) !important; +} +.osano-cm-toggle__input:checked + .osano-cm-toggle__switch::before { + border-color: transparent; +} +.osano-cm-list { + gap: 0.75em; +} + +/* CTA Buttons */ + +.osano-cm-dialog__buttons { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + gap: 0.5em 0.75em; +} +.osano-cm-button { + font-family: var(--fHeading); + flex: 1 1 20em; + color: var(--md-primary-fg-color); + background-color: transparent; + border-width: 2px; + border-color: var(--md-primary-fg-color); + border-radius: 20em; +} +.osano-cm-button:hover { + color: var(--md-accent-fg-color); + background-color: transparent; + border-color: var(--md-accent-fg-color); +} + +/* Widget */ + +.osano-cm-widget { + display: none; + opacity: 0.5; + border-radius: 10em; + bottom: 3em; +} +.osano-cm-widget:focus { + outline-offset: 0.125em; + outline-color: var(--md-default-fg-color--lighter); + outline-width: 0.1875em; +} +.osano-cm-widget__outline { + fill: transparent; + stroke: var(--md-typeset-color); +} +.osano-cm-widget__dot { + fill: var(--md-typeset-color); +} + +/* Media conditions */ + +@media screen and (min-width: 768px) { + .osano-cm-dialog--type_bar .osano-cm-dialog__content { + max-width: 50em; + } + .osano-cm-dialog--type_bar .osano-cm-dialog__buttons { + max-width: 20em; + } +} \ No newline at end of file diff --git a/docs/js/consent.js b/docs/js/consent.js new file mode 100644 index 000000000..b6f8a8ac0 --- /dev/null +++ b/docs/js/consent.js @@ -0,0 +1,6 @@ +var consent = __md_get("__consent") +if (consent && consent.custom) { + /* The user accepted the cookie */ +} else { + /* The user rejected the cookie */ +} \ No newline at end of file diff --git a/mkdocs-base.yml b/mkdocs-base.yml index bce9ede73..83183883d 100644 --- a/mkdocs-base.yml +++ b/mkdocs-base.yml @@ -56,10 +56,12 @@ extra_css: - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css - css/percona.css - css/extra.css + - css/osano.css extra_javascript: - js/version-select.js - js/promptremover.js + - js/consent.js markdown_extensions: attr_list: {} @@ -134,14 +136,7 @@ extra: provider: mike homepage: https://docs.percona.com - consent: - title: Cookie consent - description: >- - We use cookies to recognize your repeated visits and preferences, as well - as to measure the effectiveness of our documentation and whether users - find what they're searching for. With your consent, you're helping us to - make our documentation better. Read more about Percona Cookie Policy. - + nav: - Home: index.md - Release Notes: diff --git a/mkdocs-pdf.yml b/mkdocs-pdf.yml index 4d98550d5..dc84b49f8 100644 --- a/mkdocs-pdf.yml +++ b/mkdocs-pdf.yml @@ -2,6 +2,8 @@ # Usage: ENABLE_PDF_EXPORT=1 mkdocs build -f mkdocs-pdf.yml INHERIT: mkdocs-base.yml +copyright: Percona LLC, © 2024 + markdown_extensions: pymdownx.tabbed: {} admonition: {}