Cookiebot styling met LESS CSS variabelen

@main_clr #748375;

@secondary_clr #EEF0EC;

@escaped_secondary_clr escape(~@{secondary_clr});

@root_font_family Avenir, Avenir, Sans-serif;

@grey_clr #525157;

@light_clr #FFF;

@escaped_light_clr escape(~@{light_clr});

 

.bg-properties(@size contain) {

  background-repeat no-repeat;

  background-position center;

  background-size @size;

}

 Voor Less compiler httpslesscss.orgless-preview 

 

 

 COOKIEBOT STYLING 
 
body {
  #CybotCookiebotDialogHeader {
    background-color @main_clr;
  }
  #CybotCookiebotDialogPoweredbyLink {
    width 250px;
        background-position center left;
    height 48px;
    .bg-properties();
    background-image url('wp-contentuploads202205WRANGU-logo-white_text-Use-on-dark-background-only.png');
  }
  #CybotCookiebotDialogPoweredbyImage {
    opacity 0;
  }
  #CybotCookiebotDialog {
    border-radius 1em;
    outline 1000vh solid fadeout(@main_clr, 80%);
    .CybotCookiebotScrollContainer {
      border unset;
    }
    .CookieCard {
      button {
        &after {
          content unset;
        }
      }
    }
  }
  #CybotCookiebotDialogPoweredbyCybot {
        path {
      fill white;
        }
  }
  #CybotCookiebotDialog,
  #CybotCookiebotDialogBodyUnderlay {
     {
      font-family @root_font_family;
    }
  }
  #CybotCookiebotDialogNav {
    .CybotCookiebotDialogNavItemLink {
      &hover {
        color @secondary_clr;
      }
      &.CybotCookiebotDialogActive {
        color @main_clr;
        border-color @main_clr;
      }
    }
  }
  #CybotCookiebotDialogHeader {
    border-color @grey_clr;
  }
  #CybotCookiebotDialogNav {
    border-color @grey_clr;
  }
  #CybotCookiebotDialogTabContent {
    .CybotCookiebotDialogBodyLevelButtonSlider {
      background-color @grey_clr;
    }
    input {
      &checked {
        &+.CybotCookiebotDialogBodyLevelButtonSlider {
          background-color @secondary_clr;
        }
      }
    }
  }
  #CybotCookiebotDialogFooter {
    #CybotCookiebotDialogBodyButtonAccept, #CybotCookiebotDialogBodyLevelButtonAccept,
    #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
      .bg-secondary;
      border-color @secondary_clr;
      &after {
        background-image url(dataimagesvg+xml,%3Csvg xmlns='httpwww.w3.org2000svg' width='11.708' height='11.708' viewBox='0 0 11.708 11.708'%3E%3Cpath id='Path_3565' data-name='Path 3565' d='M5.854,0,4.79,1.064,8.819,5.094H0V6.614H8.819L4.79,10.644l1.064,1.064,5.854-5.854Z' fill='@{escaped_light_clr}'%3E%3Csvg%3E%0A);
      }
    }
     #CybotCookiebotDialogBodyLevelButtonCustomize,#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
     .CybotCookiebotDialogBodyButton {
      border-color @light_clr;
      background-color @light_clr;
      color @secondary_clr;
      &after {
        background-image url(dataimagesvg+xml,%3Csvg xmlns='httpwww.w3.org2000svg' width='11.708' height='11.708' viewBox='0 0 11.708 11.708'%3E%3Cpath id='Path_3565' data-name='Path 3565' d='M5.854,0,4.79,1.064,8.819,5.094H0V6.614H8.819L4.79,10.644l1.064,1.064,5.854-5.854Z' fill='@{escaped_secondary_clr}'%3E%3Csvg%3E%0A);
      }
      .CybotCookiebotDialogArrow {
        display none;
      }
    }
    .CybotCookiebotDialogBodyButton {
      padding .75em 3em .75em 1.5em;
      border-radius 1em;
      border-width 1px;
      font-weight 700;
    }
    position relative;
    margin-top 3em;
  }
}
 
 END COOKIEBOT STYLING