asda2432es

✏️ Editing: cookieconsent.less

@import "cookieconsent.core.less";
#cc-window, #cmplz-manage-consent-container, .cmplz-tcf-container {
  //reset checkbox styles for classic
  input[type="checkbox"] {
	width: initial;
	-webkit-appearance: checkbox;
	&:checked::before{
	  content:'';
	}
  }
}
#cc-window {
  .cc-header {
	font-size: 18px;
	font-weight: 700;
	width: 100%;
	margin-bottom: 10px;
  }

//bottom or top
  &.cc-banner {
	.cc-header {
	  display:none;
	}
  }

&.cc-floating {
	min-width: 468px;
  }

@media screen and (max-width: 469px) {
	&.cc-floating {
	  min-width: 100%;
	}
	&.cc-type-categories {
	  &.cc-floating, .cc-btn {
		min-width: 100%;
	  }
	}
  }

a.cc-btn {
	text-decoration: none;

&:hover {
	  text-decoration: underline;
	}
  }

&.cc-theme-block {
	.cc-btn {
	  border: 0;
	}
  }

&.cc-type-categories {
	&.cc-top, &.cc-bottom {
	  .cmplz-categories-wrap {
		line-height: 28px;
	  }
	  .cmplz-slider-checkbox {
		margin:3px 15px 5px 0;
	  }
	  @media screen and (min-width: 768px) {
		.cmplz-categories-wrap {
		  line-height: 29px;
		}
	  }

&.cc-theme-edgeless:not(.cc-floating) {
		.cc-compliance {
		  .cc-dismiss, .cc-save {
			margin: 0;
		  }
		}
	  }
	}

&.cc-floating {
	  .cc-compliance {
		display: block;

.cc-btn {
		  padding: 0.8em 0;
		  margin: 15px 0 0 0;
		}

.cc-accept-all {
		  margin: 15px 0 0 0;
		}

.cc-dismiss {
		  float: left;
		}

.cc-save {
		  float: right;
		}

.cc-accept-all {
		  clear: both;
		  width: 100%;
		}
	  }

&.cmplz-categories-no, &.cmplz-categories-hidden {
		.cc-compliance {
		  .cc-dismiss, .cc-save {
			width: calc(50% - 0.8em);
			margin: 0;
		  }
		}
	  }

&.cc-theme-edgeless{
		.cmplz-categories-wrap{
		  padding-left:1.1em;
		}
		&.cmplz-categories-no, &.cmplz-categories-hidden {
		  .cc-compliance {
			.cc-dismiss, .cc-save {
			  width: 50%;
			}
			.cc-save-settings {
			  margin-top:0;
			}
		  }
		}
	  }

&.cc-theme-edgeless{
		  .cc-compliance {
			.cc-save-settings {
			  margin-top:0;
			}
		  }
	  }

&:not(.cc-theme-edgeless){
		.cc-compliance {
		  .cc-dismiss, .cc-save {
			margin-top:15px;
		  }
		}
	  }

&.cmplz-categories-visible {
		.cc-compliance {
		  .cc-dismiss, .cc-save {
			width: 100%;
		  }
		}

}

&.cmplz-categories-legacy {
		.cc-compliance {
		  .cc-dismiss, .cc-save {
			margin: 0;
		  }

.cc-btn {
			float: initial;
			margin: 15px 0 0 0;
		  }
		}
	  }
	}
  }

&.cc-theme-edgeless {
	.cc-header {
	  margin:1em 1em 0 1.7em;
	}
	.cc-btn {
	  border: 0;
	}
  }

&.cmplz-hide-cats {
	display:none;
  }

/**
  Make sure the text stays within the banne
   */
  .cc-message {
	word-wrap:break-word;
  }
  .cc-deny {
	display:none;
  }
  //because the US banner requires two links, we have a comma after the link, which is ugly with padding
  .cc-link {
	padding-right: 0;
  }

&.cc-center, &.cc-left, &.cc-right{
	&.cc-type-categories .cc-save {
	  margin-top: 15px
	}
  }

&.cc-type-categories.cc-floating.cc-theme-edgeless{
	label {
	  margin-left: 1em;
	}
	.cc-message {
	  margin-bottom: .5em;
	}
  }
}
//end #cc-window

//make sure the popup is over the revoke button.
.cc-revoke {
  z-index:9998;

//because it's now a button, we need to prevent button issues
  border:0;
  &:active {
	outline: none;
	border: none;
  }
}

//Hide Revoke button on mobile screens
@media screen and (max-width: 768px) {
  .cc-revoke {
    display: none !important
  }
}

.cc-center.cc-revoke {
  &.cc-animate {
    transform: translateY(2em);
    &:hover{
      transform: translateY(0);
    }
  }
  bottom: 0;
  left: 3em;
  border-top-left-radius: .5em;
  border-top-right-radius: 0.5em;
}

/**IE 11 fix for left:unset */
.cc-revoke{
  &.cc-right {
  	left:auto;
  }
  &.left {
	right:auto;
  }
}

/*
* Hide revoke button
* prevent overriding by script by using !important
*/
.cc-hidden {
  display:none !important;
}

.cc-window{
  &.cc-theme-minimal {
	//-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
	//-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
	//box-shadow: 0 0 10px rgba(0, 0, 0, .4);

&:not(.cc-floating) .cc-message {
	  text-align: center;
	}
  }

&.cc-center {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	min-width: 360px;
	//-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
	//-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
	//box-shadow: 0 0 10px rgba(0, 0, 0, .4)
  }
}

//checkboxes, both for documents and banner
#cc-window.cc-window, #cmplz-manage-consent-container.cmplz-manage-consent-container, #cmplz-tcf-container.cmplz-tcf-container {
  .cmplz-square-checkbox{
	&:checked + .cc-check {
	  svg {
		path {
		  stroke-dashoffset: 60;
		  transition: all .3s linear
		}
		polyline {
		  stroke-dashoffset: 42;
		  transition: all .2s linear;
		  transition-delay: .15s
		}
	  }
	}
	&:focus + .cc-check svg {
	  outline: -webkit-focus-ring-color auto 1px;
	}
  }

//prevent classic checkbox from showing up in square and slider variant
  //We cannot use display none or height 0, as the checkboxes can't be made to enable on keyboard or with screen reader. https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
  input.cmplz-svg-checkbox, .cmplz-slider-checkbox input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	//display: block !important;
	//opacity: 0 !important;
	//height: 0 !important;
  }

/* Slider style checkboxes */
  .cmplz-slider-checkbox {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 21px;

.cmplz-slider {
	  position: absolute;
	  cursor: pointer;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  -webkit-transition: .4s;
	  transition: .4s;
	  &:before {
		position: absolute;
		content: "";
		height: 15px;
		width: 15px;
		left: 4px;
		bottom: 3px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	  }
	  &.cmplz-round {
		border-radius: 20px;
	  }
	  &.cmplz-round:before {
		border-radius: 50%;

}
	}

.cmplz-slider-na {
	  padding: 2px 8px;
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  -webkit-transition: .4s;
	  transition: .4s;
	  &:before {
		position: absolute;
		content: "N/A";
		color:white;
	  }
	  &.cmplz-round {
		border-radius: 20px;
	  }
	}

input:checked + .cmplz-slider {
	  &:before{
		-webkit-transform: translateX(17px);
		-ms-transform: translateX(17px);
		transform: translateX(17px);
	  }
	}
	//set focus style
	input[type="checkbox"]:focus + .cmplz-slider {
	  outline: -webkit-focus-ring-color auto 1px;
	}
  }

label {
	color:inherit;
	font-weight: normal;
	margin-bottom: 0;
	line-height: inherit;

}

div.cc-check {
	display: inline-block;
	padding-bottom: 10px;
  }

.cc-check,
  .cc-check svg {
	//needed to prevent 2020 from overriding this checkbox
	display: inherit;
	transform: translate3d(0, 0, 0)
  }

label:not(.cc-check) {
	white-space: nowrap;
	margin-right: 15px;
	margin-left: 0;
	padding-left:0;
  }

//&.cc-theme-edgeless .cmplz-categories-wrap {
	//.cmplz-classic-checkbox {
	// // margin-left:15px;
	//}
  //}
}

#cc-window.cc-window .cmplz-categories-wrap, #cmplz-manage-consent-container.cmplz-manage-consent-container,#cmplz-tcf-container.cmplz-tcf-container {
  .cmplz-slider-checkbox {
	vertical-align: top;
	margin:3px 15px 10px 0;
  }

.cmplz-consent-checkbox{
	margin-right:15px;
  }
  label {
	box-sizing: initial;
  }

.cc-check {
	cursor: pointer;
	position: relative;
	margin: auto 7px auto auto;
	width: 18px;
	height: 18px;
	-webkit-tap-highlight-color: transparent;
	&:before {
	  content: "";
	  position: absolute;
	  opacity: 0
	}
	&:hover:before {
	  opacity: 1
	}
	svg {
	  position: relative;
	  z-index: 1;
	  fill: none;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	  stroke-width: 3.5;
	  transition: all .2s ease;
	  stroke: #000;
	  path {
		stroke-dasharray: 60;
		stroke-dashoffset: 0
	  }
	  polyline {
		stroke-dasharray: 22;
		stroke-dashoffset: 66
	  }
	}
  }
}

/* Soft Cookie wall */
.cmplz-soft-cookiewall{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

//don't show cookie wall on our own document pages, and hide cookie warning
.cmplz-document .cmplz-soft-cookiewall{
  background-color: transparent;
  display:none;
}

//don't show cookie wall on optout
.cmplz-optout .cmplz-soft-cookiewall{
  position:initial;
}

//this class should not be contained in blocked content container class, to ensure it applies also before the complianz script has added the blocked content classå
.cmplz-video {
  //prevent theme's from hiding the placeholder image with a background color
  &.cmplz-iframe-styles {
	background-color:transparent;
  }
  //hide placeholder video
  &.cmplz-hidden {
	visibility: hidden !important;
  }
}

.cmplz-blocked-content-container{
  iframe {
	max-height: 100%;
	border:0 !important;
  }
  div div {display:none}
  background: #FFF;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 0 1px 0 rgba(0,0,0,0.5), 0 1px 10px 0 rgba(0,0,0,0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  height: inherit;
  position:relative;
  //Geo My WP integration
  &.gmw-map-cover{
	max-height: 100%;
	position: absolute;
  }
  .cmplz-blocked-content-notice{
	&:focus {
	  border:1px dotted #cecece;
	}
	white-space: normal;
	text-transform: initial;
	cursor:pointer;
	position:absolute !important;
	width:100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	max-width: 200px;
	font-size: 14px;
	padding: 10px;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	color:#fff;
	text-align:center;
	/*make sure the container is on top of the iframe, but below our cookie notice */
	z-index: 98;
	/*We need some lineheight, for example Elementor will force a lineheight of 0*/
	line-height: 23px;
  }

}

.cmplz-dismiss {
	opacity: 0;
  display:none;
}

.cmplz-animation-fade {
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;

&.cmplz-dismiss {
		-webkit-animation: fadeOut 1s;
		animation: fadeOut 1s;
	}

@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	@keyframes fadeOut {
		to {
			opacity: 0;
		}
		from {
			opacity: 1;
		}
	}
}

.cmplz-animation-slide.cc-top {
	-webkit-animation: slideInUpBottom 1s;
	animation: slideInUpBottom 1s;

&.cmplz-dismiss {
		-webkit-animation: slideOutUpBottom 1s;
		animation: slideOutUpBottom 1s;
	}
	@keyframes slideInUpBottom {
		from {
			-webkit-transform: translate3d(0, -150%, 0);
			transform: translate3d(0, -150%, 0);
		}
		to {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}
	@keyframes slideOutUpBottom {
		to {
			-webkit-transform: translate3d(0, -150%, 0);
			transform: translate3d(0, -150%, 0);
			opacity: 1;
		}
		from {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			opacity: 1;
		}
	}
}

.cmplz-animation-slide.cc-center {
	-webkit-animation: slideInUpCenter 1s;
	animation: slideInUpCenter 1s;

&.cmplz-dismiss {
		-webkit-animation: slideOutUpCenter 1s;
		animation: slideOutUpCenter 1s;
	}
	@keyframes slideInUpCenter {
		from {
			-webkit-transform: translate3d(-50%, 150%, 0);
			transform: translate3d(-50%, 150%, 0);
		}
		to {
			-webkit-transform: translate3d(-50%, -50%, 0);
			transform: translate3d(-50%, -50%, 0);
		}
	}
	@keyframes slideOutUpCenter {
		to {
			-webkit-transform: translate3d(-50%, 150%, 0);
			transform: translate3d(-50%, 150%, 0);
			opacity: 1;
		}
		from {
			-webkit-transform: translate3d(-50%, -50%, 0);
			transform: translate3d(-50%, -50%, 0);
			opacity: 1;
		}
	}
}

.cmplz-animation-slide.cc-bottom {
	-webkit-animation: slideInUpTop 1s;
	animation: slideInUpTop 1s;

&.cmplz-dismiss {
		-webkit-animation: slideOutUpTop 1s;
		animation: slideOutUpTop 1s;
	}
	@keyframes slideInUpTop {
		from {
			-webkit-transform: translate3d(0, 150%, 0);
			transform: translate3d(0, 150%, 0);
		}
		to {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}
	@keyframes slideOutUpTop {
		to {
			-webkit-transform: translate3d(0, 150%, 0);
			transform: translate3d(0, 150%, 0);
			opacity: 1;
		}
		from {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			opacity: 1;
		}
	}
}

Ubuntu

Sid Gifari From Gifari Industries - BD Cyber Security Team