Skip to content

Commit

Permalink
Hid osano cookie widget
Browse files Browse the repository at this point in the history
  • Loading branch information
nastena1606 committed Feb 26, 2024
1 parent 2011af3 commit 3775c1c
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 43 deletions.
1 change: 1 addition & 0 deletions _resource/overrides/partials/copyright.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<div class="md-copyright">
<div class="md-copyright__highlight">
<a href='https://percona.com' target='_blank'>Percona LLC and/or its affiliates, </a> &copy; {{ build_date_utc.strftime('%Y') }}
<a href="#" onclick="Osano.cm.showDrawer('osano-cm-dom-info-dialog-open')">Cookie Preferences</a>
</div>
{% if not config.extra.generator == false %}
Made with
Expand Down
224 changes: 181 additions & 43 deletions docs/css/osano.css
Original file line number Diff line number Diff line change
@@ -1,64 +1,202 @@
/* General styling */

.osano-cm-window {
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-size: 20px;
}
.osano-cm-dialog--type_bar {
color: #000;
background: #fff;
box-shadow: 0 0 0 100vmax rgba(0,0,0,0.66)
justify-content: center;
}


.osano-cm-dialog {
background: var(--md-default-bg-color);
color: var(--md-typeset-color);
font-size: 0.75em;
padding: 2em 1em;
color: var(--md-typeset-color);
background: var(--md-footer-bg-color--dark);
}

.osano-cm-save {
background: var(--md-accent-bg-color);
.osano-cm-header,
.osano-cm-info-dialog-header {
background: var(--md-default-bg-color);
}

.osano-cm-button {
background-color: unset;
border-color: var(--md-accent-fg-color);
color: var(--md-accent-fg-color);
border-radius: 10rem;
.osano-cm-link,
.osano-cm-disclosure__toggle,
.osano-cm-expansion-panel__toggle {
color: var(--md-typeset-a-color);
}

.osano-cm-button:focus, .osano-cm-button:hover {
background-color: var(--md-accent-fg-color);
border-color: var(--md-accent-fg-color);
color: var(--md-accent-bg-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-dialog__close:hover {
stroke: #ebebeb;
.osano-cm-drawer-links {
display: inline-block;
}

.osano-cm-link {
color: var(--md-typeset-a-color);
.osano-cm-link.osano-cm-storage-policy {
margin-right: 0.5em;
}

.osano-cm-link:hover, .osano-cm-link:active {
--webkit-tap-highlight-color: transparent;
color: var(--md-typeset-a-color);
.osano-cm-description {
font-weight: 400;
}

.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 {
background-color: var(--md-accent-fg-color);
border-color: var(--md-accent-fg-color);
.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-toggle__input:checked + .osano-cm-toggle__switch {
background-color: var(--md-accent-fg-color);
border-color: var(--md-accent-fg-color);
.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-footer-bg-color);
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-disclosure__toggle:hover, .osano-cm-disclosure__toggle:active, .osano-cm-expansion-panel__toggle:hover, .osano-cm-expansion-panel__toggle:active {
color: var(--md-typeset-a-color);
.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 */

.osano-cm-disclosure__toggle, .osano-cm-expansion-panel__toggle {
color: var(--md-typeset-a-color);
@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;
}
}
1 change: 1 addition & 0 deletions mkdocs-base.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ site_description: documentation
site_author: Percona LLC
copyright: >
<a href="https://www.percona.com/about">Percona LLC</a> and/or its affiliates © 2024
— <a href="#" onclick="Osano.cm.showDrawer('osano-cm-dom-info-dialog-open')">Cookie Preferences</a>
repo_name: percona/pbm-docs
repo_url: https://github.com/percona/pbm-docs
edit_uri: edit/main/docs/
Expand Down

0 comments on commit 3775c1c

Please sign in to comment.