448 lines
12 KiB
SCSS
Vendored
448 lines
12 KiB
SCSS
Vendored
/* DEBUT DU PARAMETRAGE */
|
|
/* - Choix des FONTS */
|
|
/* - Changement des couleurs et des polices */
|
|
|
|
:root{
|
|
/* PARTIE A RENSEIGNER */
|
|
--primary-color: rgb(100, 100, 100);
|
|
--secondary-color: #0f437e;
|
|
--background-color: #ffffff;
|
|
--shadow-color: 0 .5rem 1rem rgb(0 0 0 / 35%);
|
|
--title-font: "Satisfy", sans-serif;
|
|
--title-size: 25px;
|
|
--text-font: "Barlow", sans-serif;
|
|
--text-size: 14px;
|
|
--accept-color: #33aa33;
|
|
--deny-color: #aa3333;
|
|
--ldcweb-cn-position-left: 30px;
|
|
--ldcweb-cn-position-bottom: 30px;
|
|
--ldcweb-cn-z-index: 200;
|
|
|
|
/* PARTIE A RENSEIGNER FACULTATIF */
|
|
/* FENETRE D'ACCUEIL */
|
|
--ck-bg-color: var(--background-color);
|
|
|
|
/* Title settings */
|
|
--ck-w1-bgcolor-title: var(--background-color);
|
|
--ck-w1-font-family-title: var(--title-font);
|
|
--ck-w1-font-size-title: var(--title-size);
|
|
--ck-w1-color-title: var(--secondary-color);
|
|
|
|
/* Text settings */
|
|
--ck-w1-font-family-txt: var(--text-font);
|
|
--ck-w1-font-size-txt: var(--text-size);
|
|
--ck-w1-color-txt: var(--primary-color);
|
|
--ck-w1-color-href-hover: var(--secondary-color);
|
|
|
|
/* Button settings */
|
|
--ck-w1-color-btn: var(--secondary-color);
|
|
--ck-w1-color-btn-hover: var(--secondary-color);
|
|
--ck-w1-font-family-btn-txt: var(--text-font);
|
|
--ck-w1-font-size-btn-txt: var(--text-size);
|
|
--ck-w1-color-btn-txt: #ffffff;
|
|
--ck-w1-color-btn-txt-hover: #ffffff;
|
|
--ck-w1-color-btn-border: transparent;
|
|
--ck-w1-color-btn-border-hover: transparent;
|
|
|
|
/* FENETRE DE PERSONNALISATION */
|
|
--ck-bg-color-modal-wrapper: #ffffff;
|
|
/* Title settings */
|
|
--ck-w2-bgcolor-title: var(--background-color);
|
|
--ck-w2-font-family-title: var(--title-font);
|
|
--ck-w2-font-size-title: var(--title-size);
|
|
--ck-w2-color-title: var(--secondary-color);
|
|
|
|
/* Text settings */
|
|
--ck-w2-font-family-txt: var(--text-font);
|
|
--ck-w2-font-size-txt: var(--text-size);
|
|
--ck-w2-color-txt: var(--primary-color);
|
|
--ck-w2-color-href-hover: #000000;
|
|
|
|
/* Accept/Deny btn settings */
|
|
--ck-color-accept: #808080;
|
|
--ck-color-accept-hover: var(--accept-color);
|
|
--ck-color-deny: #808080;
|
|
--ck-color-deny-hover: var(--deny-color);
|
|
--ck-color-txt: #ffffff;
|
|
--ck-color-txt-hover: #ffffff;
|
|
|
|
/* Cookies list settings */
|
|
--ck-bgcolor-list: #e4e4e4;
|
|
--ck-font-family-list: var(--text-font);
|
|
--ck-font-size-list: var(--text-size);
|
|
--ck-color-list: #000000;
|
|
--ck-color-title: var(--secondary-color);
|
|
|
|
/* Scroll bar */
|
|
--ck-scroll-bgcolor: var(--primary-color);
|
|
--ck-scroll-barcolor: var(--secondary-color);
|
|
}
|
|
/* FIN DU PARAMETRAGE */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* MOBILE FIRST */
|
|
#template{
|
|
display: none;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
#ldcweb-cn.open-banner .ldcweb-cn-banner{
|
|
display: flex;
|
|
}
|
|
#ldcweb-cn.open-banner, #ldcweb-cn.open-modal{
|
|
display: flex;
|
|
}
|
|
#ldcweb-cn p, #ldcweb-cn a{
|
|
font-family: var(--ck-w1-font-family-txt);
|
|
font-size: var(--ck-w1-font-size-txt);
|
|
color: var(--ck-w1-color-txt);
|
|
}
|
|
#ldcweb-cn a{
|
|
text-decoration: underline;
|
|
transition: 0s;
|
|
}
|
|
#ldcweb-cn .ldcweb-cn-banner, #ldcweb-cn-modal .modal-wrapper{
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
#ldcweb-cn .ldcweb-cn-banner{
|
|
padding: 0;
|
|
margin: 0;
|
|
padding-top: 20px;
|
|
background-color: var(--ck-bg-color);
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: calc(var(--ldcweb-cn-position-bottom) + 60px);
|
|
width: 475px;
|
|
height: auto;
|
|
max-height: 80vh;
|
|
border-radius: 10px;
|
|
z-index: var(--ldcweb-cn-z-index);
|
|
line-height: initial;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-color);
|
|
user-select: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: .3s;
|
|
}
|
|
#ldcweb-cn .ldcweb-cn-banner-open{
|
|
left: var(--ldcweb-cn-position-left);
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.ldcweb-banner-content, .ldcweb-banner-details{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0px 20px 0px 20px;
|
|
}
|
|
.ldcweb-banner-details{
|
|
height: 0;
|
|
transition: .3s;
|
|
text-align: justify;
|
|
overflow: hidden;
|
|
align-items: flex-start;
|
|
}
|
|
.ldcweb-banner-details-open{
|
|
margin-bottom: 6px;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-img{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: auto;
|
|
width: 150px;
|
|
padding-right: 20px;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-img img{
|
|
width: 100%;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-text{
|
|
flex: 2;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-title p{
|
|
font-family: var(--ck-w1-font-family-title);
|
|
font-size: var(--ck-w1-font-size-title);
|
|
font-weight: bold;
|
|
color: var(--ck-w1-color-title);
|
|
text-align: left;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-para-p{
|
|
text-align: justify;
|
|
margin-bottom: 6px;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-btnDetails{
|
|
width: 100%;
|
|
margin: 0 0 20px 0;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-btnDetails-p{
|
|
cursor: pointer;
|
|
color: var(--secondary-color);
|
|
width: fit-content;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-btns{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex{
|
|
width: 66.5%;
|
|
border-top: 1px solid grey;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
.ldcweb-banner-btn-personalize{
|
|
width: 33.5%;
|
|
border-top: 1px solid gray;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex div{
|
|
width: 50%;
|
|
}
|
|
.ldcweb-banner-btn-accept{
|
|
border-left: 1px solid gray;
|
|
border-right: 1px solid gray;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex .ldcweb-cn-accept{
|
|
font-weight: bolder;
|
|
color: var(--secondary-color);
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btns-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 50px;
|
|
background-color: var(--background-color);
|
|
text-decoration: none;
|
|
font-family: var(--ck-w1-font-family-btn-txt);
|
|
font-size: var(--ck-w1-font-size-btn-txt);
|
|
color: var(--primary-color);
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btns-btn:hover{
|
|
color: var(--ck-w1-color-btn-txt-hover);
|
|
background-color: var(--ck-w1-color-btn-hover);
|
|
}
|
|
.ldcweb-btn{
|
|
position: fixed;
|
|
left: var(--ldcweb-cn-position-left);
|
|
bottom: var(--ldcweb-cn-position-bottom);
|
|
z-index: var(--ldcweb-cn-z-index);
|
|
background-color: white;
|
|
padding: 8px;
|
|
border-radius: 100%;
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow-color);
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
.ldcweb-btn-icon path {
|
|
fill: var(--secondary-color);
|
|
}
|
|
.ldcweb-btn-icon circle {
|
|
fill: var(--secondary-color);
|
|
}
|
|
.visibility{
|
|
display: none !important;
|
|
}
|
|
|
|
/* MODAL */
|
|
#ldcweb-cn-modal {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 200;
|
|
opacity: 1;
|
|
}
|
|
#ldcweb-cn-modal .modal-wrapper{
|
|
position: relative;
|
|
max-height: 100vh;
|
|
}
|
|
#ldcweb-cn-modal .modal-wrapper > div:not(:first-of-type){
|
|
width: 100%;
|
|
align-items: flex-end;
|
|
}
|
|
#ldcweb-cn-modal .modal-title{
|
|
padding: 0px 20px 0px 20px;
|
|
}
|
|
#ldcweb-cn-modal .modal-title *{
|
|
text-align: justify;
|
|
margin: 0;
|
|
}
|
|
#ldcweb-cn-modal .modal-title .description, #ldcweb-cn-modal .modal-btns{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-weight: normal;
|
|
line-height: initial;
|
|
}
|
|
#ldcweb-cn-modal .modal-title .description, #ldcweb-cn-modal .modal-btns p, #ldcweb-cn-modal .modal-btns a, #ldcweb-cn-modal .modal-title > .subTitle{
|
|
font-family: var(--ck-w2-font-family-txt);
|
|
font-size: var(--ck-w2-font-size-txt);
|
|
color: var(--ck-w2-color-txt);
|
|
}
|
|
/* TITLE */
|
|
#ldcweb-cn-modal .modal-title .title{
|
|
font-family: var(--ck-w2-font-family-title);
|
|
font-size: var(--ck-w2-font-size-title);
|
|
font-weight: bold;
|
|
color: var(--ck-w2-color-title);
|
|
}
|
|
#ldcweb-cn-modal .modal-title > .subTitle{
|
|
color: var(--ck-w2-color-title);
|
|
margin-bottom: 6px;
|
|
}
|
|
#ldcweb-cn-modal .modal-title .title, #ldcweb-cn-modal .modal-title > .subTitle{
|
|
text-align: center;
|
|
}
|
|
#ldcweb-cn-modal .modal-title a{width: fit-content;}
|
|
|
|
/* DETAILS */
|
|
#ldcweb-cn-modal .modal-details{
|
|
width: 100%;
|
|
height: 153px;
|
|
overflow-y: auto;
|
|
margin: 6px 0;
|
|
}
|
|
#ldcweb-cn-modal .modal-details ul{
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 20px;
|
|
list-style: none;
|
|
}
|
|
#ldcweb-cn-modal .modal-details li > div{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 10px 0;
|
|
padding: 20px;
|
|
border-radius: 20px;
|
|
border: 1px solid var(--ck-bgcolor-list);
|
|
}
|
|
#ldcweb-cn-modal .modal-details li span,
|
|
#ldcweb-cn-modal .modal-details li a,
|
|
#ldcweb-cn-modal .modal-details li label{
|
|
font-family: var(--ck-font-family-list);
|
|
font-size: var(--ck-font-size-list);
|
|
color: var(--ck-color-list);
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-name{
|
|
color: var(--ck-color-title);
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos{
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos span:first-of-type{
|
|
font-size: calc(var(--ck-font-size-list) * 1.25);
|
|
font-weight: bold;
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos .ldcweb-cn-description{
|
|
color: var(--ck-w2-color-txt);
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos a{width: fit-content;}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 200px;
|
|
margin-top: 6px;
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type,
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type{
|
|
transition: all .3s;
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type{
|
|
background: var(--ck-color-accept);
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type{
|
|
background: var(--ck-color-deny);
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{
|
|
display: table;
|
|
text-align: center;
|
|
margin: .5em;
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type input:checked ~ label,
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type input ~label.active{
|
|
background-color: var(--ck-color-deny-hover);
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type input:checked ~ label,
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type input ~ label.active{
|
|
background-color: var(--ck-color-accept-hover);
|
|
}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons input{display: none;}
|
|
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label{
|
|
width: 100px;
|
|
display: block;
|
|
color: var(--ck-color-txt);
|
|
transition: color .3s;
|
|
padding: 6px 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* MEDIA QUERIES */
|
|
@media (max-width: 535px) {
|
|
.ldcweb-banner-content, #ldcweb-cn .ldcweb-banner-btns{
|
|
flex-direction: column;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex, #ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-personalize{
|
|
width: 100%;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex .ldcweb-banner-btn-deny,
|
|
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex .ldcweb-banner-btn-accept{
|
|
width: 50%;
|
|
}
|
|
.ldcweb-banner-btn-accept{
|
|
border-left: 1px solid gray;
|
|
border-right: none;
|
|
}
|
|
#ldcweb-cn .ldcweb-cn-banner{
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
#ldcweb-cn .ldcweb-cn-banner{
|
|
width: 100%;
|
|
max-height: 100vh;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
.ldcweb-banner-details-open {
|
|
height: 0;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-title p{
|
|
text-align: center;
|
|
}
|
|
#ldcweb-cn .ldcweb-banner-img{
|
|
padding: 0 0 20px 0;
|
|
}
|
|
}
|