Skip to content

Commit

Permalink
Merge pull request #1 from MEOM/fix
Browse files Browse the repository at this point in the history 
Fix
  • Loading branch information
@jounitl
jounitl authored Feb 8, 2023
2 parents 43a73c8 + 892d3cd commit afccdf9
Showing 1 changed file with 18 additions and 110 deletions.
128 changes: 18 additions & 110 deletions cookiebot.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Containers
*/

#CookieBanner {
#CookieBanner {
position: fixed;
z-index: 2147483645;
min-height: 100vh;
Expand Down Expand Up @@ -30,10 +30,7 @@
}

#CookieBannerOverlay {
/* legacy browser compatibility */
background: rgba(0, 0, 0, 0.4);
/* legacy browser compatibility end */
background: var(--cb-overlay-background, rgba(0, 0, 0, 0.4));
width: 100%;
height: 100%;
position: fixed;
Expand Down Expand Up @@ -64,20 +61,17 @@
}

#CookieBannerNotice {
/* legacy browser compatibility */
color: #0f0f0f;
max-width: 1080px;
/* legacy browser compatibility end */
padding: 40px 28px;
overflow: auto;
max-height: 100vh;
max-height: calc(100vh - 24px);
max-height: calc(100vh - 24px - env(safe-area-inset-bottom, 0));
width: 100%;
width: calc(100% - 24px);
max-width: var(--cb-dialog-max-width, 1080px);
max-width: 1080px;
background: #fff;
color: var(--cb-text-color, #0f0f0f);
color: #0f0f0f;
margin: 0 auto;
z-index: 500;
pointer-events: auto;
Expand All @@ -87,7 +81,6 @@
#CookieBannerNotice {
padding: 24px;
max-height: calc(100vh - 48px);
max-height: calc(100vh - 48px - env(safe-area-inset-bottom, 0));
width: calc(100% - 48px);
}
}
Expand Down Expand Up @@ -177,7 +170,7 @@
}

#CookieBanner ul,
li {
#CookieBanner li {
list-style: none;
margin: 0;
padding: 0;
Expand All @@ -201,14 +194,9 @@ li {
* Content
*/

#CookieBanner .cookiebanner__main {
}

#CookieBanner .cookiebanner__main__inner {
/* legacy browser compatibility */
max-width: 1080px;
/* legacy browser compatibility end */
max-width: var(--cb-dialog-max-width, 1080px);
margin: 0 auto;
}

Expand All @@ -219,45 +207,29 @@ li {
}

#CookieBanner .cookiebanner__main__title {
/* legacy browser compatibility */
font-weight: bold;
font-size: 20px;
/* legacy browser compatibility end */
font-family: var(--cb-title-font-family);
font-weight: var(--cb-title-font-weight, bold);
font-size: var(--cb-title-font-size-mobile, 20px);
margin-top: 0;
margin-bottom: 16px;
}

@media (min-width: 800px) {
#CookieBanner .cookiebanner__main__title {
/* legacy browser compatibility */
font-size: 28px;
/* legacy browser compatibility end */
font-size: var(--cb-title-font-size-desktop, 28px);
margin-bottom: 20px;
}
}

#CookieBanner .cookiebanner__main__description {
/* legacy browser compatibility */
font-size: 15px;
/* legacy browser compatibility end */
font-family: var(--cb-description-font-family);
font-weight: var(--cb-description-font-weight);
font-size: var(--cb-description-font-size-mobile, 15px);
line-height: 1.5;
margin-top: 0;
margin-bottom: 0;
}

@media (min-width: 800px) {
#CookieBanner .cookiebanner__main__description {
/* legacy browser compatibility */
font-size: 16px;
/* legacy browser compatibility end */
font-size: var(--cb-description-font-size-desktop, 16px);
line-height: 1.75;
}
}
Expand Down Expand Up @@ -303,10 +275,7 @@ li {
}

#CookieBanner .cookiebanner__buttons__details {
/* legacy browser compatibility */
font-size: 16px;
/* legacy browser compatibility end */
font-size: var(--cb-details-button-font-size, 16px);
margin-top: 8px;
padding: 8px 16px;
width: 100%;
Expand All @@ -321,46 +290,31 @@ li {

#CookieBanner .cookiebanner__buttons__accept,
#CookieBanner .cookiebanner__buttons__deny {
/* legacy browser compatibility */
background: transparent;
border-radius: 3px;
font-weight: bold;
font-size: 16px;
border: 2px solid #0f0f0f;
/* legacy browser compatibility end */
transition: 0.2s ease-in-out;
display: block;
padding: 16px 24px;
background: var(--cb-button-background, transparent);
border-radius: var(--cb-button-border-radius, 3px);
font-weight: var(--cb-button-font-weight, bold);
font-size: var(--cb-button-font-size, 15px);
font-family: var(--cb-button-font-family);
border: var(--cb-button-border, 2px solid #0f0f0f);
color: var(--cb-button-color, #0f0f0f);
text-align: center;
width: 100%;
}

@media (min-width: 800px) {
#CookieBanner .cookiebanner__buttons__accept,
#CookieBanner .cookiebanner__buttons__deny {
font-size: var(--cb-button-font-size, 16px);
font-size: 16px;
padding: 18px 24px;
min-width: 15rem;
}
}

#CookieBanner .cookiebanner__buttons__accept {
color: var(--cb-accept-button-color, var(--cb-button-color, #fff));
background: var(
--cb-accept-button-background,
var(--cb-button-background, #0f0f0f)
);
border: var(
--cb-accept-button-border,
var(--cb-button-border, 2px solid #0f0f0f)
);
color: #fff;
background: #0f0f0f;
border: 2px solid #0f0f0f;
}

#CookieBanner .cookiebanner__buttons__accept:hover,
Expand All @@ -370,39 +324,15 @@ li {
color: #fff;
background: #0f0f0f;
/* legacy browser compatibility end */
color: var(
--cb-accept-button-active-color,
var(--cb-button-active-color, #fff)
);
background: var(
--cb-accept-button-active-background,
var(--cb-button-active-background, #0f0f0f)
);
border: var(
--cb-accept-button-active-border,
var(
--cb-accept-button-border,
var(
--cb-button-active-border,
var(--cb-button-border, 2px solid #0f0f0f)
)
)
);
border: 2px solid #0f0f0f;
}

#CookieBanner .cookiebanner__buttons__deny:hover,
#CookieBanner .cookiebanner__buttons__deny:focus,
#CookieBanner .cookiebanner__buttons__deny:active {
/* legacy browser compatibility */
color: #fff;
background: #0f0f0f;
/* legacy browser compatibility end */
color: var(--cb-button-active-color, #fff);
background: var(--cb-button-active-background, #0f0f0f);
border: var(
--cb-button-active-border,
var(--cb-button-border, 2px solid #0f0f0f)
);
border: 2px solid #0f0f0f;
}

/**
Expand All @@ -417,10 +347,7 @@ li {
display: block;
}
#CookieBanner .cookiebanner__details__inner {
/* legacy browser compatibility */
max-width: 1080px;
/* legacy browser compatibility end */
max-width: var(--cb-dialog-max-width, 1080px);
margin: 0 auto;
}

Expand Down Expand Up @@ -450,9 +377,6 @@ li {
min-width: 0;
}

#CookieBanner .cookiebanner__preference__heading {
}

@media (min-width: 540px) {
#CookieBanner .cookiebanner__preference__heading {
display: flex;
Expand Down Expand Up @@ -673,10 +597,7 @@ li {
input:checked
+ label
.cookiebanner__preference__ui {
/* legacy browser compatibility */
background: #16a085;
/* legacy browser compatibility end */
background: var(--cb-preference-accent-color, #16a085);
}
#CookieBanner
.cookiebanner__preference
Expand All @@ -693,21 +614,12 @@ li {
}

#CookieBanner .cookiebanner__accept-selection {
/* legacy browser compatibility */
background: transparent;
border: 2px solid #0f0f0f;
border-radius: 3px;
font-size: 15px;
font-weight: bold;
/* legacy browser compatibility end */
transition: 0.2s ease-in-out;
border-radius: var(--cb-button-border-radius, 3px);
background: var(--cb-button-background, transparent);
font-weight: var(--cb-button-font-weight, bold);
border: var(--cb-button-border, 2px solid #0f0f0f);
font-size: var(--cb-button-font-size, 15px);
font-family: var(--cb-button-font-family);
color: var(--cb-button-color, #0f0f0f);
display: block;
padding: 16px 24px;
text-align: center;
Expand All @@ -717,17 +629,13 @@ li {
#CookieBanner .cookiebanner__accept-selection:hover,
#CookieBanner .cookiebanner__accept-selection:focus,
#CookieBanner .cookiebanner__accept-selection:active {
/* legacy browser compatibility */
color: #fff;
background: #0f0f0f;
/* legacy browser compatibility end */
color: var(--cb-button-active-color, #fff);
background: var(--cb-button-active-background, #0f0f0f);
border: var(
--cb-button-active-border,
var(--cb-button-border, 2px solid #0f0f0f)
);
}
/* legacy browser compatibility */
color: #fff;
background: #0f0f0f;
/* legacy browser compatibility end */
border: 2px solid #0f0f0f;
}


/**
* Updated
Expand All @@ -739,4 +647,4 @@ li {
}
#CookieBanner .cookiebanner__details__updated p {
font-size: 15px;
}
}

0 comments on commit afccdf9

Please sign in to comment.