| Dir : /home/trave494/cheaptravel.live/wp-content/plugins/complianz-gdpr/assets/css/ |
| Server: Linux ngx353.inmotionhosting.com 4.18.0-553.22.1.lve.1.el8.x86_64 #1 SMP Tue Oct 8 15:52:54 UTC 2024 x86_64 IP: 209.182.202.254 |
| Dir : /home/trave494/cheaptravel.live/wp-content/plugins/complianz-gdpr/assets/css/wizard.less |
// out: wizard.css, sourcemap: false, compress: false
// Import Complianz LESS Variables
@import 'variables.less';
/**
* class to add a triangle pointer to each div
*/
.cmplz-pointer {
position:relative;
&:after {
content: " ";
position: absolute;
left: -15px;
top: calc( 50% - 15px );
border-top: 15px solid transparent;
border-right: 15px solid black;
border-left: none;
border-bottom: 15px solid transparent;
}
}
@media only screen and (max-width: 1400px) {
.cmplz-content-area {
grid-template-columns: 24% auto;
}
}
.cmplz-content-area {
display: grid;
grid-template-columns: 22% auto;
gap: var(--rsp-grid-gap);
h1 {
padding: 0;
}
.cmplz-upgrade-to-premium {
font-size:11px;
font-weight:500;
text-decoration: none;
padding:5px;
background-color:#ecf4ed;
color:#333333;
}
.cmplz-wizard-title {
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
display: flex;
font-size:17px;
font-weight:600;
justify-content: space-between;
align-content: center;
border-radius: var(--rsp-border-radius) var(--rsp-border-radius) 0 0;
&.cmplz-section-content-notifications-header {
h1{
font-weight:normal;
}
}
}
.cmplz-wizard-subtitle h2 {
margin: @green-gap @green-gap 0 @green-gap;
font-size: 14px;
}
.cmplz-wizard-menu {
background-color: white;
box-shadow: var(--rsp-box-shadow);
border-radius: var(--rsp-border-radius);
// sticky menu
//top: 50px;
////max-height: calc(100vh - 87px);
//height: 100%;
//min-height: 480px;
.cmplz-wizard-progress-bar {
background: @grey-light;
height: 15px;
margin: var(--rsp-spacing-xs) var(--rsp-spacing-l);
.cmplz-wizard-progress-bar-value {
height: 100%;
background: var(--rsp-green);
border-radius: 4px;
}
}
.cmplz-step {
.cmplz-step-header {
&.incomplete a h2 {
color: var(--rsp-text-color);
}
&.active a h2{
color: var(--rsp-wp-blue);
}
text-decoration: none;
a {
display: inline-block;
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-l);
text-decoration: none;
width: 100%;
h2 {
font-size: 15px;
font-weight:500;
margin: 0;
}
}
&:hover a {
h2 {
text-decoration:underline;
}
}
&.active:hover a {
background: white;
}
}
.cmplz-section {
display: grid;
grid-template-columns: var(--rsp-spacing-m) 1fr;
margin: 0 var(--rsp-spacing-l);
a {
display: inline-block;
text-decoration: none;
padding: 3px 5px;
h3{
font-size: 13px;
font-weight: 400;
margin: 0;
}
&:visited h3{
color:initial ;
}
&:hover h3{
text-decoration:underline;
}
}
&.cmplz-done a h3 {
color: @rsp-black ;
}
&.active a h3 {
color: var(--rsp-wp-blue);
}
&.active:hover a {
background: white;
pointer-events: none;
}
&.active svg path {
fill: var(--rsp-wp-blue);
}
}
}
}
.cmplz-section-content {
p {
margin: 0;
}
p:not(:first-child) {
margin-top: 1em;
}
.cmplz-master-label {
>div {
padding: 0 var(--rsp-spacing-l);
background-color: #fff;
}
}
.cmplz-form {
display: grid;
grid-template-columns: auto 325px;
grid-column-gap: @red-gap;
.cmplz-section-footer {
.cmplz-panel-wrap {margin:0}
}
.cmplz-section-content-title-header {
background-color: white;
}
.cmplz-wizard-intro {
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
padding-top: var(--rsp-spacing-xxs);
background-color: #fff;
& > *:not(:first-child){ // select all descendant elements but not the first child
margin-top: var(--rsp-spacing-s);
}
}
.cmplz-wizard-intro ul {
list-style: inherit;
margin-left: 15px;
}
//if an intro is nested in a field, we don't need the padding, as the field already has padding
.cmplz-field .cmplz-wizard-intro {
padding:0 0 @green-gap 0;
}
.field-group {
grid-column: span 2;
display: grid;
grid-template-columns: auto 325px;
grid-column-gap: @red-gap;
.cmplz-field {
grid-column-start: 1;
select {
font-size:13px;
}
}
}
.cmplz-section-footer {
grid-column-start: 1;
background-color: white;
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
border-radius: 0 0 var(--rsp-border-radius) var(--rsp-border-radius);
box-shadow: var(--rsp-box-shadow);
.cmplz-buttons-container {
display: flex;
gap: var(--rsp-spacing-s);
flex-wrap: wrap;
grid-column-start: 2;
}
}
}
// remove scroll from back-end
.cmplz-scroll {
.cmplz-form:first-child{
.cmplz-settings-item{
margin-top: 0;
}
}
section {
width:100%;
}
.cmplz-checkbox .cmplz-field,
.cmplz-button .cmplz-field,
.cmplz-upload .cmplz-field {
display: flex;
justify-content: space-between;
align-items: center;
}
.cmplz-upload .cmplz-field {
padding-bottom: 5px;
}
.button.button-primary {
min-width: 100px;
text-align:center;
height:30px;
margin: 0 0;
}
.cmplz_add_url, .cmplz_remove_url {
padding: 2px 4px;
margin-left: 4px;
line-height: 22px;
cursor:pointer;
background-color: transparent;
border: 0;
}
.cmplz-multiple-field-button-footer .button.button-primary {
min-width: 0px;
margin-right: 5px;
}
.upload_button {
margin-right:@default-margin;
width: 100px;
height: 30px;
}
input[name="cmplz_import_settings"] {
width: 100px;
height: 30px;
padding-left: 15px;
}
.cmplz-file-chosen {
padding-top: 20px;
padding-left: 20px;
}
.cmplz-text_checkbox .cmplz-field {
display: grid;
grid-template-columns: 500px 1fr;
grid-column-gap: 20px;
.cmplz-text {
grid-column-start: 1;
}
.cmplz-switch {
align-self: center;
justify-self: end;
}
}
.cmplz-cols-2 .cmplz-field {
//grid-column: span 2;
display: grid;
grid-template-columns: 33% 33%;
grid-column-gap: 20px;
.cmplz-label {
grid-column: span 2;
}
}
.cmplz-cols-3 .cmplz-field {
//grid-column: span 2;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-column-gap: 20px;
.cmplz-label {
grid-column: span 3;
}
}
.cmplz-borderradius.cmplz-cols-5 .cmplz-field, .cmplz-borderwidth.cmplz-cols-5 .cmplz-field {
display: grid;
grid-template-columns: 50px 50px 50px 50px 50px;
grid-column-gap: 10px;
.cmplz-label {
grid-column: span 5;
}
}
.cmplz-border-input-type-wrap {
display: grid;
grid-template-rows: 16px 16px;
padding-top: 16px;
.cmplz-grey {
color: darkgrey;
}
span {
cursor: pointer;
}
}
select {
width: 100%;
}
.cmplz-block_script select[data-name=dependency] {
width: 45%;
float:left;
clear:both;
}
.cmplz_deps_desc {
width:45%;
float:left;
padding-top: 5px;
padding-left: 9px;
}
.field-group {
grid-column: span 2;
display: grid;
grid-template-columns: auto 325px;
grid-column-gap: 15px;
&.cmplz-colspan-1 {
grid-column: span 1;
}
&.cmplz-colspan-2 {
grid-column: span 2;
}
&.cmplz-col-1 {
grid-column-start: 1;
}
&.cmplz-col-2 {
grid-column-start: 2;
}
}
.cmplz-borderradius,
.cmplz-borderwidth {
grid-column: span 1;
}
.cmplz-sublabel label {
color: darkgrey;
font-size: 13px;
}
label .cmplz-icon {
display: inline;
}
.cmplz-switch {
margin-top: 0;
}
.wp-picker-input-wrap:not(.hidden) {
display: block;
position: absolute;
z-index: 10;
}
.wp-picker-holder {
position: absolute;
top: 132px;
z-index: 10;
}
.wp-picker-clear {
position: absolute;
}
.cmplz-grid-controls .cmplz-field {
padding: 0;
.cmplz-label {
margin: 0;
}
}
.cmplz-form {
grid-template-columns: auto !important;
}
position: relative;
#services, #plugins {
.cmplz-field {
display: grid;
grid-template-columns: 2.5fr 1fr auto;
label.cmplz-checkbox-container {
margin:0;
min-width:75px;
}
.cmplz-label {
margin-right: auto;
}
.cmplz-switch, .cmplz-checkbox-container {
margin-left:@green-gap;
}
}
}
.cmplz-settings-item {
margin-top:@green-gap;
.cmplz-field {
flex-flow: row wrap;
.cmplz-comment {
flex: 0 0 100%;
}
}
.cmplz-settings-header-container {
display: flex;
justify-content: space-between;
align-content: center;
.cmplz-grid-controls {
margin: auto 0;
select {
font-size:13px;
}
}
.cmplz-settings-header {
grid-column: span 2;
display: grid;
grid-template-columns: 340px 340px;
.cmplz-settings-title, .cmplz-settings-controls {
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
background-color:#fff;
}
.cmplz-settings-title {
border-radius: var(--rsp-border-radius) 0 0 0;
}
.cmplz-settings-controls{
border-radius: 0 var(--rsp-border-radius) 0 0;
}
}
}
.cmplz-settings-body .cmplz-panel-wrap, .field-group, .cmplz-settings-header-container, .cmplz-settings-footer-container {
grid-column: span 2;
display: grid;
grid-template-columns: 680px auto;
grid-column-gap: 0;
.cmplz-settings-footer {
width: 100%;
background-color:#fff;
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
border-radius: 0 0 var(--rsp-border-radius) var(--rsp-border-radius);
display: flex;
gap: var(--rsp-spacing-xs);
box-shadow: var(--rsp-box-shadow);
}
}
.cmplz-settings-body {
position:relative;
.cmplz-settings-overlay {
z-index:99;
display: grid;
grid-template-columns: 680px auto;
position: absolute;
top:0;
left: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
.cmplz-settings-overlay-message{
position:absolute;
width: calc(100% - 70px);
bottom: 0;
background-color: #fff;
padding: @red-gap;
margin:@green-gap;
box-shadow: var(--rsp-box-shadow);
}
}
@media screen and (max-width: 960px) {
.cmplz-settings-overlay {
right: 0;
}
}
}
}
}
}
.cmplz-add-pages-table {
display: grid;
grid-template-columns: auto auto;
gap: var(--rsp-spacing-xs);
align-items: center;
margin-bottom: var(--rsp-spacing-l);
.cmplz-copy-shortcode{
justify-content: flex-start;
}
}
.cmplz-link-to-menu-table {
display: grid;
grid-template-columns: 30% 30%;
grid-gap: 5px;
align-items: center;
h3 {
grid-column: span 2;
margin-top: @green-gap;
margin-bottom: 5px;
&:first-child {
margin-top: 0;
}
}
select {
grid-column-start: 2;
}
}
.cmplz-scan-count {
padding: 0 2px;
}
.cmplz-cookies-table {
h2 {
font-weight: normal;
font-size: 15px;
}
.cmplz-cookies-table-body {
border-radius: 5px;
display: grid;
grid-template-columns: 1fr;
padding: 10px;
background-color: #f0f2f8;
}
}
}
.cmplz-wizard, .cmplz-settings {
/* ----------- Fields ----------- */
/* Customize the label (the container) */
.cmplz-checkbox-container {
display: block;
position: relative;
padding-left: 32px;
margin: var(--rsp-spacing-xs) 0;
/* Hide the browser's default checkbox */
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: -2px;
left: 0;
height: 22px;
width: 22px;
border-radius: 5px;
border: 1px solid @input-border-color;
box-sizing: border-box;
}
/* Checkmark (hidden when not checked) */
.checkmark svg {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
input:checked ~ .checkmark svg {
display: block;
fill: var(--rsp-wp-blue);
stroke: var(--rsp-wp-blue);
}
/* Style the checkmark/indicator */
.checkmark svg {
left: 2.5px;
top: 2px;
width: 15px;
height: 15px;
}
/* Show the default checkmark when default */
.checkmark.cmplz-default svg {
display: block;
fill: #eee;
stroke: #eee;
}
/* Disabled option */
&.cmplz-disabled {
pointer-events: none;
.checkmark {
background-color: #eee;
svg {
stroke: #eee !important;
fill: #eee !important;
}
}
}
}
/* Radio */
/* Customize the label (the container) */
.cmplz-radio-container {
display: block;
position: relative;
padding-left: 32px;
margin: var(--rsp-spacing-xs) 0;
.radiobtn .cmplz-success {
background-color:initial;
}
/* Hide the browser's default checkbox */
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom radio */
.radiobtn {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -2px;
left: 0;
height: 22px;
width: 22px;
border-radius: 100%;
border: 1px solid @input-border-color;
&.disabled {
cursor: not-allowed;
}
}
/* Check icon (hidden when not checked) */
.radiobtn .cmplz-icon {
content: "";
position: absolute;
display: none;
svg{
fill: transparent;
}
}
/* Show check icon when checked */
input:checked ~ .radiobtn .cmplz-icon {
display: flex;
svg{
fill: var(--rsp-wp-blue);
}
}
/* Show the default checkmark when default */
.radiobtn.cmplz-default .cmplz-icon {
display: flex;
background-color: #eee;
}
/* Disabled option */
.radiobtn.disabled {
background-color: #eee;
.cmplz-icon {
background-color: var(--rsp-wp-blue-faded);
}
}
}
/* Text & Email Validation */
textarea.validation,
input[type="text"].validation,
input[type="email"].validation,
input[type="text"].cmplz-valid-page,
input[type="text"].cmplz-deleted-page {
position: relative;
padding-left: 25px;
~ .cmplz-icon {
display: block;
position: absolute;
padding-left: 7px;
margin-top: -25px;
z-index: 1;
svg {
width: 15px;
height: 15px;
}
}
}
textarea.validation {
&:invalid ~ .cmplz-icon,
&:valid ~ .cmplz-icon {
margin-top:-143px;
}
}
textarea.validation,
input[type="text"].validation,
input[type="email"].validation {
&:valid ~ .cmplz-icon-times {
display: none;
}
&:invalid ~ .cmplz-icon-check {
display: none;
}
}
/* Text, Email, Select(2), Textarea Style */
input[type="text"], input[type="email"], select, .select2, textarea, input[type="number"] {
margin-bottom: 2px;
}
textarea {
padding:10px;
}
/* Placeholders */
::placeholder {
color: @grey-light;
}
::placeholder/* Chrome/Opera/Safari */ {
color: @grey-light;
}
::-moz-placeholder /* Firefox 19+ */ {
color: @grey-light;
}
:-ms-input-placeholder /* IE 10+ */ {
color: @grey-light;
}
:-moz-placeholder /* Firefox 18- */ {
color: @grey-light;
}
}
.cmplz-multiple-field-button-footer {
display: flex;
align-items: center;
.button {
margin-right: 5px;
margin-bottom: 10px;
min-width: 0;
}
}
.cmplz-content-area .cmplz-section-content .cmplz-scroll .cmplz-multiple-field-button-footer .button.button-primary{
margin-top: var(--rsp-spacing-m);
}
.cmplz-hidden {
display: none !important;
}
//this breaks the editor height.
.wp-editor-wrap iframe {
//height: initial !important;
}
.cmplz-help-warning-wrap {
max-width:400px;
//display: flex; // make use of Flexbox
align-items: center; // does vertically center the desired content
.cmplz-help-modal {
line-height: 1.5;
font-size: var(--rsp-fs-300);
margin: var(--rsp-spacing-xs) 0 0 var(--rsp-spacing-m);
padding: 10px 15px;
background-color: var(--rsp-blue-faded);
color: var(--rsp-text-color);
text-align: left;
&.cmplz-notice {
background-color: var(--rsp-dark-blue-faded);
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
border-radius: var(--rsp-border-radius);
box-shadow: var(--rsp-box-shadow);
}
&.cmplz-warning {
&:after {
border-right: 15px solid #f8be2e;
}
color: var(--rsp-text-color);
background-color: var(--rsp-yellow-faded);
border-color: var(--rsp-yellow-faded);
}
&:empty {
background-color: #f1f1f1;
}
}
}
#cmplz-settings {
.cmplz-help-warning-wrap {
.cmplz-help-modal {
min-width: 200px;
}
@media screen and (min-width: 1450px) {
.cmplz-help-modal {
min-width: 280px;
}
}
@media screen and (min-width: 1550px) {
.cmplz-help-modal {
min-width: 340px;
}
}
}
}
a:active, a:hover {
color: #333;
}
a.button.cmplz-open-modal {
font-size: 9px;
line-height: 13px;
height: 15px;
min-height: 15px;
padding: 1px 3px;
margin-left: 10px;
}
.cmplz-panel-link {
text-decoration: none;
display: inline-block;
width: 80%;
}
#cmplz_language {
font-size: 15px;
&.cmplz_cookie_language_selector {
margin-bottom: 0;
}
}
.multiple-field > div {
margin-top: 8px;
&:last-child {
margin-bottom: 8px;
clear:both;
}
}
.cmplz-list-container {
margin-bottom: 25px;
.cmplz-cookie-field > div,
.cmplz-service-field > div {
margin-top: 8px;
&:last-child {
margin-bottom: 8px;
}
}
.cmplz-disabled label,
.cmplz-disabled span {
color: #ababab !important;
}
.cmplz-service-cookie-list {
margin-bottom: @green-gap;
&:last-child {
margin-bottom: 0px;
}
}
.cmplz-service-divider {
font-size: 14px;
margin-bottom: 10px;
}
}
.cmplz-legenda {
padding: 10px 10px 0 10px;
display: grid;
grid-template-columns: 25px 200px 25px 300px;
grid-column-gap: 10px;
align-items: center;
}
.cmplz-panel{
background: var(--rsp-white);
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
padding-top: var(--rsp-spacing-xxs);
}
.cmplz-slide-panel {
margin: var(--rsp-spacing-s) 0;
color: #383d41;
background-color: var(--rsp-grey-200);;
padding: 10px 15px;
border-radius: var(--rsp-border-radius-s);
border: 1px solid #f2f2f2;
.cmplz-panel-title {
display: flex;
align-items: center;
grid-gap: 0;
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
cursor: pointer;
.cmplz-custom-btns {
display: flex;
gap: var(--rsp-spacing-xs);
align-content: center;
justify-content: flex-end;
margin-left:auto;
}
}
.cmplz-panel-content {
background-color: #fff;
border-radius: var(--rsp-border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
padding: 10px 15px;
}
// Remove default marker
summary::marker, summary::-webkit-details-marker {
display: none;
content: '';
}
// Checkbox
.cmplz-checkbox {
display: flex;
position: relative;
input.cmplz-checkbox {
&:focus + .cmplz-label:before {
//box-shadow:0 0 0 3px rgba(0, 119, 200, 0.50);
box-shadow:0 0 0 2px #245fcc
//rgb(51 51 51) 0px 0px 0px 3px
}
opacity:0;
margin: 0;
margin-top: -10px;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
width: 40px;
height: 20px;
&:checked + .cmplz-label {
&::before {
background-color: var(--rsp-wp-blue);
content: "";
padding-left: 6px;
}
&:after {
left: 14px;
}
}
}
.cmplz-label {
position: relative;
padding-left: 30px;
margin: 0;
&:before, &:after {
position: absolute;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
transition: background-color 0.3s, left 0.3s;
}
&:before {
content: "";
color: #fff;
box-sizing: border-box;
font-family: 'FontAwesome', sans-serif;
padding-left: 23px;
font-size: 12px;
line-height: 20px;
background-color: @grey;
left: 0px;
top: -7px;
height: 15px;
width: 28px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
&:after {
content: "";
letter-spacing: 20px;
background: white;
left: 4px;
top: -5px;
height: 11px;
width: 11px;
}
}
}
// Complianz marker
.cmplz-icon.cmplz-open {
grid-column-start: 4;
cursor: pointer;
content: '';
background: url(../images/chevron-down.svg) no-repeat;
transform: rotate(0deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
height: 18px;
width: 18px;
margin: 0 0 0 var(--rsp-spacing-xs);
}
// Rotate marker on open
&[open] {
.cmplz-icon.cmplz-open {
transform: rotate(180deg);
}
}
&.cmplz-notice {
padding: 0 0 10px 0;
background-color: white;
}
&.cmplz-toggle-disabled {
color: #aca5a5;
}
&.cmplz-deleted {
background-color: #FFa5aa;
}
.cmplz-field > div {
margin: 10px 0;
}
.cmplz-multiple-field-validation {
float: right;
}
&.cmplz-slide-panel,
&.cmplz-link-panel {
padding: 0;
.cmplz-panel-toggle {
display: flex;
align-items: center;
span {
padding-left: 10px;
}
}
.cmplz-add-to-policy {
text-decoration: underline;
}
}
&.cmplz-link-panel {
&.selected, &:hover {
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 3px 5px rgba(0, 0, 0, 0.13);
}
}
h1 {
font-size: 22px;
}
font-size: 13px !important;
p {
font-size: 13px !important;
}
&.cmplz-notice {
background-color: #fff;
border: 0;
color: black;
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
}
&.cmplz-success {
background-color: @color-success;
color: white;
border-radius: 0 50px 50px 0;
border: #61CE70;
margin-left: -20px;
padding: 5px 15px 5px 5px;
width: fit-content;
}
&.cmplz-warning {
.cmplz-pointer;
&:after {
border-right: 15px solid @color-open;
}
color: #333333;
background-color: @color-open;
border-color: @color-open;
margin: 10px 0 10px 0;
}
&.cmplz-notification:after {
content:initial;
}
ul {
list-style-type: disc;
margin-left: 22px;
}
}
.cmplz-wizard-menu .cmplz-panel.cmplz-success {
border-radius: 50px 0 0 50px;
text-align: right;
margin-right: -20px;
padding: 5px 5px 5px 15px;
}
/*
cool checkbox sliders
*/
.cmplz-switch {
input {
display: none !important;
}
position: relative;
display: inline-block;
width: 40px;
height: 21px;
}
.cmplz-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-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;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
&:before {
position: absolute;
content: "N/A";
color: white;
}
&.cmplz-round {
border-radius: 20px;
}
}
input:checked + .cmplz-slider {
background-color: @brand-primary;
&:before {
-webkit-transform: translateX(17px);
-ms-transform: translateX(17px);
transform: translateX(17px);
}
}
input:disabled + .cmplz-slider {
opacity:0.4;
}
input:focus + .cmplz-slider {
box-shadow: 0 0 1px @brand-primary;
}
#complete_wizard_first_notice {
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */
z-index: 99;
p {
border-radius: 0px;
font-size: 16px;
background-color: @brand-primary;
color: white;
position: relative;
/* height: 100px; */
top: 150px;
padding: 30px;
width: 300px;
text-align: center;
margin: auto;
}
}
//prevent a too small editor width
html .mceContentBody {
max-width: 100% !important;
}
.cmplz-banner-editor {
textarea {
width: 100%;
height: 100px;
}
}
.cmplz-comment {
font-size:12px;
&.cmplz-comment-warning{
color: var(--rsp-red);
border: 1px solid var(--rsp-red);
background: var(--rsp-red-faded);
border-radius: var(--rsp-border-radius-input);
margin-top: 20px;
padding: var(--rsp-spacing-xs) var(--rsp-spacing-s);
}
}
.cmplz-cookie-field {
.cmplz-cookie-header {
margin-bottom: 25px;
}
}
#cmplz-send-data {
input[type=text] {
width: 60%;
}
}
#cmplz-start-mail, #cmplz_close_tb_window {
margin-right: 15px;
margin-top: 15px;
}
/*progress bar */
#cmplz-scan-progress, #cmplz-sync-progress {
background-color: #F1F1F1;
border-radius: 5px;
.cmplz-progress-bar, .cmplz-sync-progress-bar {
height: 20px;
background-color: var(--rsp-wp-blue);
transition: width 0.5s;
-webkit-transition: width 0.5s;
font-weight: bold;
border-radius:5px;
}
}
#cookie-policy-snapshots {
.cmplz-notification {
margin-bottom:@green-gap;
}
}
.cmplz-wizard, .cookie-policy-snapshots, .cmplz-settings {
h1, h2, h3, h4, .cmplz-menu-item, .cmplz-step-title, .cmplz-button {
font-variant: normal;
}
label {
font-size: 13px;
}
.field-group {
position: relative;
.cmplz-field {
background-color: white;
align-self: stretch;
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-l) var(--rsp-spacing-s) var(--rsp-spacing-l);
}
.cmplz-label {
margin-top:0;
label {
display:flex;
font-size:15px;
font-weight: 500;
cursor: default;
gap: 3px;
padding-bottom: var(--rsp-spacing-xs);
}
}
//less margin when it's the editor
&.cmplz-editor .cmplz-label {
margin-bottom:0;
}
.cmplz-field {
.field-group {
grid-column:1;
display:block;
}
.button.button-primary:not(.cmplz-resync) {
margin-bottom:10px;
}
.cmplz-field {
padding:0;
}
}
}
.field-group.sync_progress {
margin-top:@green-gap;
.cmplz-field label {
margin-top:0;
}
}
/*body */
.cmplz-body, .cmplz-content-area {
input[type="text"].cmplz-document-custom-url {
width: 250px;
}
.cmplz-document-custom-url, .cmplz-document-custom-page {
margin-top: 5px;
}
//Add some styling to the remove, rescan and add new cookie buttons to override the default WordPress button styling
.cmplz-remove {
margin-bottom: 12px;
}
.cmplz-rescan {
padding: 0 10px 0 10px;
}
.cmplz-add-new-cookie {
padding: 0;
}
.cmplz-done a {
text-decoration: none;
color: white;
font-size: 14px;
}
.cmplz-to-do a {
color: white;
font-size: 14px;
text-decoration: none;
opacity: 0.6;
}
.cmplz-to-do.active a {
opacity: 1;
}
//Reset the vertical-align: middle that WordPress applies. The vertical-align middle presses the next and previous icons downwards
@media screen and (max-width: 768px) {
input {
vertical-align: top !important;
}
}
}
}
//Dashboard
.cmplz-field {
/* Define the styling of the text input fields */
label {
font-weight: normal;
}
.cmplz-color-picker.wp-color-picker {
margin-top: -11px !important;
}
input[type="text"], input[type="email"], input[type="number"], input[type="password"] {
max-width: 500px;
border-color: @input-border-color;
&:focus {
border-color:initial;
}
}
input[type="text"], input[type="email"], input[type="password"], .cmplz-border-width-wrap input[type="number"], .cmplz-border-radius-wrap input[type="number"] {
width: 100%;
}
select {
border-color: var(--rsp-input-border-color);
background-color: var(--rsp-input-background-color);
vertical-align: initial;
}
textarea.validation:invalid, textarea.validation:valid {
background-position: 0.5% 1.5%;
border-color: @input-border-color;
}
textarea {
min-height: 150px;
min-width: 100%;
}
input[type=radio]:checked:before {
content: "\2022";
text-indent: -9999px;
border-radius: 50px;
font-size: 24px;
width: 6px;
height: 6px;
margin: 4px;
line-height: 16px;
background-color: #1e8cbe;
}
.cmplz-buttons-row-left {
display: flex;
gap: 10px;
align-items: center;
height: auto;
label, input{
margin: 0;
margin-top: 0;
margin-right: 0;
}
}
button[name=cmplz_add_multiple],
.cmplz_script_add {
margin-top: @green-gap;
}
.cmplz-logo-preview {
&.cmplz-clickable {
cursor:pointer;
}
&.cmplz-complianz-logo {
padding: 5px;
svg {
height: 90px;
width: 90px;
}
}
border: 1px black dashed;
display: flex;
align-items: center;
justify-content: center;
float: right;
}
}
.cmplz-use_logo_custom .cmplz-logo-preview {
height: 100px;
img {
max-height: 100px;
max-width: 350px;
}
}
.cmplz-use_logo_site .cmplz-logo-preview {
img {
width: 100px;
height: inherit;
}
}
//Button styling
a.cmplz.button, button.cmplz.button, input.cmplz.button {
//smargin-left:15px;
box-shadow: 0 0 0 #fff;
background-color: @brand-primary;
color: #fff;
padding-right: 20px;
border: 0;
border-radius: 50px;
padding-top: 2px;
&:hover {
background-color: lighten(@brand-primary, 10%);
color: white;
}
.fa-angle-right {
font-weight: 900;
position: absolute;
font-size: 1.8em;
margin-top: 1px;
margin-left: 5px;
}
}
//Icon override
#complianz .dashboard .fa-times {
color: black;
}
#complianz .dashboard .fa-check {
color: @brand-primary;
}
//reset page navigation
input.current-page {
width:initial;
}
.cmplz-wizard-menu-menus {
padding: 10px 0;
padding-top: 0;
}
.cmplz-settings-content {
padding-top: 10px;
display: grid;
grid-template-columns: 100%;
grid-template-rows: calc(100vh - 160px);
}
//#wpbody-content {
// padding-bottom: 0;
//}
.cmplz-settings {
.cmplz-footer-contents {
display:flex;
align-items: center;
width: 100% !important;
border-top: none;
}
/* Firefox */
input[type=number] {
//-moz-appearance: textfield;
}
}
// This will make color pickers overlap
#customization {
z-index: 10;
}
.cc-window {
right: 1em;
}
.cc-window.cc-center {
transform: translate(0%, -50%);
left: initial;
}
.cc-window.cc-left {
left: initial;
}
// At cookie settings, banner center is to the right
@keyframes slideInUpCenter {
from {
-webkit-transform: translate3d(0, 150%, 0);
transform: translate3d(0, 150%, 0);
}
to {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
}
@keyframes slideOutUpCenter {
to {
-webkit-transform: translate3d(0, 150%, 0);
transform: translate3d(0, 150%, 0);
opacity: 1;
}
from {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
opacity: 1;
}
}
#cmplz-proof-of-consent,
#cmplz-cookie-banner {
.cmplz-content-area {
display: block;
h1 {
background-color: white;
padding: @green-gap;
//margin: @red-gap;
width: -webkit-fill-available;
}
input[name=cmplz_generate_snapshot] {
width: 120px;
}
.cmplz_month_select,
.cmplz_year_select,
#post-query-submit {
float: right;
margin-top: -50px;
width: 120px;
}
#post-query-submit {
margin-right: 0;
}
.cmplz_month_select {
margin-right: 290px;
}
.cmplz_year_select {
margin-right: 145px;
}
.tablenav {
display: none;
}
#cmplz-cookiestatement-snapshot-filter {
padding-top: @green-gap;
}
.wp-list-table {
th {
a {
padding: @red-gap;
}
}
}
}
}
.cmplz-status-info {
display:flex;
align-items: center;
> div {
padding: 10px 10px 10px 0;
}
.cmplz-license-status-container {
.cmplz-license-status {
display: block;
min-width: 86px;
text-align: center;
border-radius: 15px;
padding: 4px 8px;
font-size: var(--rsp-fs-100);
font-weight: 600;
&.cmplz-premium {
background-color: var(--rsp-brand-primary);
color: white;
}
&.cmplz-success {
background-color: var(--rsp-green);
color: white;
}
&.cmplz-open {
background-color: var(--rsp-color-open);
}
&.cmplz-warning {
background-color: var(--rsp-color-warning);
color: white;
}
}
}
}
#cmplz-conclusion{
background: @grey-lighter;
padding: 10px 15px;
margin: 10px 0 10px 0;
.cmplz-conclusion__list{
font-size: 0.9rem;
font-weight: 600;
li{
display: flex;
align-items: flex-start;
margin: 15px 0;
p:not(:first-child), .cmplz-conclusion__check--check-text, .cmplz-conclusion__check--report-text{
margin-top: 0;
margin-bottom: 0;
}
&:before{
content: "";
display:block;
height:1rem;
width:1rem;
min-width:1rem;
background-size: 1rem 1rem;
background-repeat: no-repeat;
margin-right: 10px;
margin-top: 1px;
}
&.icon-loading:before{
background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="spinner" class="svg-inline--fa fa-spinner fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"></path></svg>');
// spinning animation
animation-name: rotate-s-loader;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-timing-function: ease-in-out;
position: relative;
}
&.icon-success:before {
background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%2322932e" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>' );
}
&.icon-error:before {
background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-circle" class="svg-inline--fa fa-exclamation-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23D7263D" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>' );
}
&.icon-warning:before {
background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="%23f39c12" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>' );
}
}
}
}
@keyframes rotate-s-loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
// new saved dropdown
.cmplz-settings-saved{
display: none;
opacity: 0;
top: 20px;
height: 45px;
position: fixed;
background-color: #fff;
z-index: 999999;
left: 50%;
transform: translateX(-50%);
text-align: left;
box-shadow: var(--rsp-box-shadow);
border-radius: var(--rsp-border-radius-input);
svg{
margin: 2px 17px;
margin-right: 7px;
}
.cmplz-settings-saved__text_and_icon{
display: flex;
align-content: center;
margin: 10px 0;
padding-right: 40px;
span{
display: flex;
align-self: center;
margin: 2px;
margin-left: 0;
font-size: @default-font-size * 0.9;
font-weight: 400;
color: @grey-darker;
}
div {
display: flex;
align-self: center;
}
}
&.cmplz-settings-saved--fade-in{
display: block;
-webkit-animation: fadeInFromNone 5s ease-in-out;
-moz-animation: fadeInFromNone 5s ease-in-out;
-o-animation: fadeInFromNone 5s ease-in-out;
animation: fadeInFromNone 5s ease-in-out;
}
@-webkit-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
top: 20px;
}
5% {
display: block;
opacity: 0;
top: -10px;
}
15% {
display: block;
opacity: 1;
top: 20px;
}
90% {
display: block;
opacity: 1;
top: 20px;
}
100% {
display: none;
opacity: 0;
top: 20px;
}
}
@-moz-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
top: 20px;
}
5% {
display: block;
opacity: 0;
top: -10px;
}
15% {
display: block;
opacity: 1;
top: 20px;
}
90% {
display: block;
opacity: 1;
top: 20px;
}
100% {
display: none;
opacity: 0;
top: 20px;
}
}
@-o-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
top: 20px;
}
5% {
display: block;
opacity: 0;
top: -10px;
}
15% {
display: block;
opacity: 1;
top: 20px;
}
90% {
display: block;
opacity: 1;
top: 20px;
}
100% {
display: none;
opacity: 0;
top: 20px;
}
}
@keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
top: 20px;
}
5% {
display: block;
opacity: 0;
top: -10px;
}
15% {
display: block;
opacity: 1;
top: 20px;
}
90% {
display: block;
opacity: 1;
top: 20px;
}
100% {
display: none;
opacity: 0;
top: 20px;
}
}
}
// responsive settings
@media screen and (max-width: 960px) {
.cmplz-content-area .cmplz-section-content .cmplz-scroll .cmplz-settings-item{
.cmplz-settings-controls{
&:empty{
display: none;
}
}
}
}
@media screen and (max-width: 1280px) {
#cmplz-wizard, #cmplz-settings {
.cmplz-wizard-menu {
width: calc( 100% - 360px);
height:initial;
margin-bottom:0;
}
.cmplz-content-area {
grid-template-columns: 100%;
}
}
}
@media screen and (max-width: 960px) {
#cmplz-wizard, #cmplz-settings {
.cmplz-wizard-menu {
width:100%;
}
.cmplz-help-warning-wrap,
.cmplz-content-area .cmplz-section-content-notifications-header {
display: none;
}
.cmplz-content-area {
grid-template-columns: 100%;
}
.cmplz-content-area .cmplz-section-content .cmplz-form {
display: grid;
grid-template-columns: 100%;
.field-group {
grid-column: 1;
grid-template-columns: 100%;
}
}
}
.cmplz-content-area .cmplz-section-content .cmplz-scroll .cmplz-settings-item{
.cmplz-settings-body .cmplz-panel-wrap, .field-group, .cmplz-settings-header-container, .cmplz-settings-footer-container {
grid-template-columns: 100%;
}
.cmplz-settings-header-container .cmplz-settings-header {
grid-template-columns: 100%;
}
}
}