Commit 9b963b2d authored by Mike Herchel's avatar Mike Herchel Committed by Sven Berg Ryen
Browse files

Issue #3215739 by mherchel, zenimagine: Create option to apply styles that... 

Issue #3215739 by mherchel, zenimagine: Create option to apply styles that extend Olivero theme's look and feel
parent f478765c

.tugboat/config.yml

+1 −1
Changes for .tugboat/config.yml: 1 added line, 1 removed line.
Original line number Diff line number Diff line 
services:

  php:

    image: q0rban/tugboat-drupal:9.0

    image: q0rban/tugboat-drupal:9.3

    default: true

    http: false

    depends: mysql

config/install/eu_cookie_compliance.settings.yml

+1 −0
Changes for config/install/eu_cookie_compliance.settings.yml: 1 added line, 0 removed lines.
Original line number Diff line number Diff line
@@ -41,6 +41,7 @@ fixed_top_position: true 
popup_text_hex: 'ffffff'

popup_width: '100%'

use_bare_css: false

use_olivero_css: true

disagree_do_not_show_popup: false

reload_page: false

cookie_name: ''

config/schema/eu_cookie_compliance.schema.yml

+3 −0
Changes for config/schema/eu_cookie_compliance.schema.yml: 3 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -124,6 +124,9 @@ eu_cookie_compliance.settings: 
    use_bare_css:

      type: boolean

      label: 'Include minimal CSS, I want to style the overlay in the theme CSS'

    use_olivero_css:

      type: boolean

      label: 'Include styles to support Drupal Olivero theme default CSS.'

    disagree_do_not_show_popup:

      type: boolean

      label: 'Do not show cookie policy when the user clicks the "Cookie Policy" button.'

css/eu_cookie_compliance_olivero.css

0 → 100644
+215 −0
Changes for css/eu_cookie_compliance_olivero.css: 215 added lines, 0 removed lines.
Original line number Diff line number Diff line 
/*

 * @file

 * Styles meant to extend the Drupal Olivero theme's look and

 * feel into the EU Cookie Compliance module.

 */



/* Override CSS from injected <style> tag. */

div#sliding-popup,

div#sliding-popup .eu-cookie-withdraw-banner,

.eu-cookie-withdraw-tab {

  background: unset;

}



#sliding-popup h1,

#sliding-popup h2,

#sliding-popup h3,

#sliding-popup p,

#sliding-popup label,

#sliding-popup div,

.eu-cookie-compliance-more-button,

.eu-cookie-compliance-secondary-button,

.eu-cookie-withdraw-tab {

  color: unset;

}



#sliding-popup {

  position: fixed;

  right: 0; /* LTR */

  right: var(--drupal-displace-offset-right, 0px); /* LTR */

  z-index: 1000;

  width: 100%;

  max-width: 600px;

  padding: 27px;

  padding: var(--sp1-5, 27px);

  padding-top: 0;

  filter: drop-shadow(0 0 72px rgb(0 0 0 / 10%));

}



@media print {

  #sliding-popup {

    display: none; /* Don't print this. */

  }

}



[dir="rtl"] #sliding-popup {

  left: 0;

  left: var(--drupal-displace-offset-left, 0px);

}



@media (min-width: 1800px) {

  #sliding-popup {

    left: 1100px; /* LTR; Arbitrary number meant to have the popup half cover the content at wide viewports. */

    right: auto; /* LTR */

  }



  [dir="rtl"] #sliding-popup {

    left: auto;

    right: 1100px; /* Arbitrary number meant to have the popup half cover the content at wide viewports. */

  }

}



.eu-cookie-compliance-content {

  max-height: calc(100vh - 54px);

  max-height: calc(100vh - 2 * var(--sp1-5, 27px) - var(--drupal-displace-offset-top, 0px));

  overflow: auto;

  background: white;

  background: var(--color--white, white);

  padding: 27px;

  padding: var(--sp1-5, 27px);

  color: #313637;

  color: var(--color--gray-20, #313637);

  border: solid 1px #eaeef0;

  border: solid 1px var(--color--gray-95, #eaeef0);

  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1)

}



@supports (filter: drop-shadow(0 0 72px rgb(0 0 0 / 10%))) {

  .eu-cookie-compliance-content {

    box-shadow: none;

  }

}



.eu-cookie-compliance-categories {

  padding: 18px 0;

  padding: var(--sp, 18px) 0;

  margin-left: 50px; /* LTR; Create room for checkboxes to the left of the categories. */

}



[dir="rtl"] .eu-cookie-compliance-categories {

  margin-left: 0;

  margin-right: 50px;

}



.eu-cookie-compliance-category:not(:last-child) {

  margin-bottom: 9px;

  margin-bottom: var(--sp0-5, 9px);

}



[dir] .eu-cookie-compliance-categories input[type="checkbox"] + label {

  padding-left: 0;

  padding-right: 0;

}



.eu-cookie-compliance-categories input[type="checkbox"] {

  position: absolute;

  margin-top: 5px;

  margin-left: -50px; /* LTR; Pull checkboxes out of document flow to align left of content. */

}





[dir="rtl"] .eu-cookie-compliance-categories input[type="checkbox"] {

  margin-left: 0;

  margin-right: -50px;

}



/* Make the more button look like a link. @todo - this should really be an <a> tag. */

.eu-cookie-compliance-more-button {

  cursor: pointer;

  display: inline;

  height: auto;

  margin: 0;

  padding: 0;

  border: none;

  text-decoration: underline;

  background: none;

}



.eu-cookie-compliance-message {

  margin-bottom: 18px;

  margin-bottom: var(--sp, 18px);

}



.eu-cookie-compliance-message h2 {

  font-size: 22px;

  line-height: 1.2;

  margin: 9px 0;

  margin: var(--sp0-5, 9px) 0;

}



@media (min-width: 700px) {

  .eu-cookie-compliance-message h2 {

    font-size: 28px;

  }

}



.eu-cookie-compliance-message h2:first-child {

  margin-top: 0;

}



.eu-cookie-compliance-message h3 {

  font-size: 12px;

}



.eu-cookie-compliance-message p {

  font-size: 12px;

}



[dir] .eu-cookie-compliance-buttons .button {

  margin-top: 0;

  margin-right: 9px; /* LTR */

  margin-right: var(--sp0-5, 9px); /* LTR */

  margin-bottom: 0;

}



[dir="rtl"] .eu-cookie-compliance-buttons .button {

  margin-left: 9px; /* LTR */

  margin-left: var(--sp0-5, 9px); /* LTR */

}



/* Buttons can stack at narrow widths. Make sure they look good. */

@media (max-width: 500px) {

  [dir] .eu-cookie-compliance-buttons .button {

    margin-bottom: 4px;

  }

}



/* Make the "save preferences" button a little smaller. */

.button.eu-cookie-compliance-save-preferences-button {

  font-size: 14px;

  padding: 5px 15px;

  height: 40px;

}



.eu-cookie-compliance-categories {

  /* Anchor nested input[type="checkboxes"], which is necessary in the event

   * the popup is taller than the viewport and is able to scroll. */

  position: relative;

}



.eu-cookie-compliance-category-description {

  margin: 5px 0;

  color: #5f7581;

  color: var(--color--gray-45, #5f7581);

  font-size: 0.8125rem;

  line-height: 1.125rem;

}



/* "Privacy settings" tab that appears above popup, and shows/hides the popup. This

 * needs to appear against the bottom of the viewport when the popup is hidden. */

.eu-cookie-withdraw-tab {

  position: absolute;

  bottom: calc(100% - 2px);

  left: 50%;

  transform: translateX(-50%);

  display: block;

  padding: 4px 9px;

  border: solid 1px #eaeef0;

  border: solid 1px var(--color--gray-95, #eaeef0);

  border-bottom: 0;

  border-radius: 3px 3px 0 0;

  background: white;

  background: var(--color--white, white);

  appearance: none;

  cursor: pointer;

}

eu_cookie_compliance.libraries.yml

+7 −0
Changes for eu_cookie_compliance.libraries.yml: 7 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -22,6 +22,13 @@ eu_cookie_compliance_bare: 
      css/eu_cookie_compliance.bare.css: {}

  dependencies:

    - eu_cookie_compliance/eu_cookie_compliance

eu_cookie_compliance_olivero:

  version: VERSION

  css:

    state:

      css/eu_cookie_compliance_olivero.css: {}

  dependencies:

    - eu_cookie_compliance/eu_cookie_compliance

admin:

  version: VERSION

  css: