Commencer un nouveau sujet

CSS | New scheduling widget look&feel

Here is an example of CSS for the scheduling widget, introducing a new look&feel:


:root{

    /********** COLOR **********/ 

    /* Button */
    --bg-button: #4232A8;
    --bg-button-hover: #352886;
    --bg-button-active:#281e65;
    --color-button: white;
    --color-button-hover: white;
    --color-button-active:white;

    /* Informations */
    --info-title:#252E3F;
    --info-subtitle:#9EA2AA;
    --info-link:#9EA2AA;

    /* Title */
    --title:#252E3F;
    --subtitle:#9EA2AA;

    /* Stepper */
    --stepper-active: #4232A8; 
    --stepper-inactive: #c6c2e5; 

    /* Summary */
    --bg-summary: #4232A8; 
    --color-summary: white;

    /* List */ 
    --bg-list-section : #d9d6ee;
    --color-list-section : #4232A8;
    --bg-list-tag : #d9d6ee;
    --color-list-tag : #4232a8;

    /* DatePicker */
    --bg-timezone : #d9d6ee;
    --color-timezone : #4232A8;
    --bg-datepicker-hover: #8e84cb;
    --color-datepicker-hover: white;
    --bg-datepicker-active: #4232A8;
    --color-datepicker-active: white;
    --bg-datepicker-active-hover: #281e65;
    --color-datepicker-active-hover: white;
    --bg-slot-hover: #4232A8;
    --color-slot-hover: white;

 
    /* Grey */
    --white:white;
    --grey-25:#F9F9FA;
    --grey-50:#F3F3F4;
    --grey-100:#E7E8EA;
    --grey-200:#CFD1D4;
    --grey-300:#B6B9BF;
    --grey-400:#9EA2AA;
    --grey-500: #868B95;
    --grey-600: #6E747F;
    --grey-700: #565D6A;
    --grey-800: #3D4555;
    --grey-900: #252E3F;
    --black:#0D172A;
}

html, body, div, span, applet, object, iframe, h1, h2, p, a, abbr, acronym, address, big, cite, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {font-family: Arial; color:var(--grey-900);}

#body-site {margin:0px; padding:24px;}
#site {display:flex; flex-direction:row; background-color:var(--white); justify-content:center; align-items:stretch;  width:auto; border-radius:8px; box-shadow: 0px 0px 20px rgba(204, 204, 204, 0.6); max-width:1000px; min-height:550px;}
#site .header {display:none;}
#site .left { padding:24px; background:none; width:200px; border-right:1px solid var(--grey-100);}
#site .left #logo {width:100%;}
#site .left .info .content * { margin:0;}
#site .left .info .label { color: var(--info-title); font-weight: bold; font-size: 12px;}
#site .left .info .content label {font-weight:normal;}
#site .left .info.hours .tz {color:var(--info-subtitle);}
#site .left .info.hours .closed * {color:var(--grey-500);}
#site .left .info.hours ul li{ margin:0}
#site .left .info.address img{ width: 100%; height: 100px; object-fit: cover; object-position: 100% 50%;}
#site .left a{color:var(--info-link);}
#site .left a:hover {text-decoration:underline;}

#site .center { margin:0px; flex:1; background:none; padding:0; display:flex; flex-direction:column;}
#site .center #company-title {display:none;}
#site .center .iframe-container {padding:0px; flex:1;}
#site .center .iframe-container #iframe {border:0; height:100%; padding:0; margin:0; border-radius:0;}


/************ WIDGET ************/ 
#widget {display:flex !important; flex-direction:column; height:100vh; background-color:var(--white);}

/************ COMMON ************/
#widget .col-md-1, #widget .col-md-3, #widget .col-md-6 {width:auto;}

/***************** HEADER *****************/ 

/* Title */
#widget .header { padding:16px 16px 8px 16px; min-height:0px; box-sizing: border-box; background-color:var(--white);}
#widget .header h1{ color:var(--title);}
#widget .header #title {margin:0px; padding:0px; color:var(--title);}
#widget .header #subtitle {margin:0px; padding:0px; padding-top:8px; color:var(--subtitle);}

/* Stepper */
#widget .header .nav-circles {color:var(--stepper-active); display:flex; flex-direction:row; align-items:center; justify-content:center; padding:0px; padding-top:16px; padding-bottom:8px}
#widget .header .nav-circles .fa-circle {height:14px; width:14px; background-color:var(--stepper-active); border:1px solid var(--stepper-active); border-radius:50%; display:inline-block;}
#widget .header .nav-circles .fa-circle:before, #widget .header .nav-circles .fa-circle-thin:before  {content:"";}
#widget .header .nav-circles .fa-circle-thin {height:10px; width:10px; background-color:var(--stepper-inactive); border:1px solid var(--stepper-inactive); border-radius:50%; display:inline-block;}

#widget .event-info {margin:0px 16px; padding:4px 16px; line-height: normal; min-height:0px; box-sizing: border-box; height:auto; background-color:var(--bg-summary); color:var(--color-summary); font-size:14px;}

/************ PAGE ************/ 
#widget .page {flex:1; padding:16px; height:auto !important;}

/************ SERVICES ************/
#widget #services .group {margin:0; padding:8px 8px; border-radius:4px; background-color:var(--bg-list-section); color:var(--color-list-section);}

/************ SERVICES OPTION ************/
#widget #services-options .fields-page {padding-top:0px !important; max-width:400px; margin:auto;}
#widget #services-options .fields-page p{display:flex; flex-direction:column; width:100%;}
#widget #services-options .fields-page p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; font-weight:bold;}
#widget #services-options .fields-page p select{width:100%;}

/************ DATE ************/ 
#widget #date {height:auto !important; padding:16px 0px;}
#widget #date .timezone {background-color:var(--bg-timezone); margin:0px; padding:8px 16px; margin:0px 16px; color:var(--color-timezone);}
#widget #date .timezone #timezone {margin:0px; background-color:var(--bg-timezone); border:1px solid var(--color-timezone); border-radius:4px; color:var(--color-timezone);}
#widget #date #date-page {margin-top:8px; display:flex; flex-direction:row; justify-content: center; flex-wrap:wrap;}

#widget #date #months {box-sizing: border-box; width:auto; flex:1; min-width:250px; float:none; padding:0px 16px; margin-bottom:24px; overflow:visible !important;}
#widget #date #months .date-header {height:auto;}
#widget #date #months .month {max-width:300px; margin:auto; margin-bottom:40px;}

#widget #date #months .month {margin:auto; margin-top:8px; margin-bottom:8px; }
#widget #date #months .month .day span {width:24px; line-height:24px; padding:0px!important; display:block; margin: auto;}
#widget #date #months .month .dday span {background-color:white; color:var(--grey-200)!important;}
#widget #date #months .month .sday span {background-color:var(--bg-datepicker-active); color:var(--color-datepicker-active)!important;}
#widget #date #months .month .day span:hover {background-color:var(--bg-datepicker-hover); color:var(--color-datepicker-hover); border-radius:4px;}
#widget #date #months .month .dday span:hover {background-color:white;}
#widget #date #months .month .sday span:hover {background-color:var(--bg-datepicker-active-hover); color:var(--color-datepicker-active-hover);}
#widget #date #months p {font-size:12px !important;}

#widget #date #dates {width:auto; margin:0px; flex:1; padding:0px 16px; min-width:250px;}
#widget #date #dates #dates-block {height:auto !important;}
#widget #date #dates #dates-block .table-dates {width:100%;}
#widget #date #dates #dates-block .table-dates td {min-width:150px;}
#widget #date #dates #dates-block .table-dates .list-dates {margin:0px; padding:0px;}
#widget #date #dates #dates-block .table-dates .list-dates .button {width:100%; margin:4px 0px; height:30px; background-color:white; border:1px solid var(--grey-100); border-radius:4px;}
#widget #date #dates #dates-block .table-dates .list-dates .button:hover {border:1px solid var(--bg-slot-hover); background-color:var(--bg-slot-hover); color:var(--color-slot-hover); box-shadow: none;}

/************ FIELDS ************/ 
#widget #fields {padding-top:0px !important;}
#widget #fields p {padding:0px; margin:0px; overflow:hidden;}
#widget #fields .page-content {max-width:400px; margin:auto; height:auto;}
#widget #fields #relationships-takefor-header {padding:0px; width:100%; margin:16px 0px 0px 0px;}
#widget #fields #relationships-takefor-header p {font-size: 14px; margin-bottom:8px;}
#widget #fields #relationships-takefor-header div {float:none !important;}
#widget #fields #new-client {padding-top:16px; padding-bottom:8px;}
#widget #fields #new-client p{display:flex; flex-direction:column; width:100%; position:relative;}
#widget #fields #new-client p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; font-weight:bold; line-height: normal;}
#widget #fields #new-client p input[type=text]:not(.invalid_input),
#widget #fields #new-client p input[type=password], 
#widget #fields #new-client p input[type=tel], 
#widget #fields #new-client p input[type=email], 
#widget #fields #new-client p input[type=password], 
#widget #fields #new-client p textarea, 
#widget #fields #new-client p select, 
#widget #fields #new-client input[type=text]:not(.invalid_input),
#widget #fields #new-client input[type=password], 
#widget #fields #new-client input[type=tel], 
#widget #fields #new-client input[type=email], 
#widget #fields #new-client input[type=password], 
#widget #fields #new-client textarea, 
#widget #fields #new-client select {width:100%; margin-bottom:8px; box-sizing:border-box;}
#widget #fields #new-client p .mand{position:absolute; top:0px; right:0px;}
#widget #fields #new-client .intl-tel-input {display:block;}
#widget #fields #new-client .intl-tel-input .selected-flag {display:flex; flex-direction:row; width:40px; justify-content:space-between; align-items: center; height:23px; padding:0px; padding-left:8px;}
#widget #fields #new-client .intl-tel-input .selected-flag .iti-flag {display:block; position:relative; top:auto; bottom:auto; margin: inherit;}
#widget #fields #new-client .intl-tel-input .selected-flag .iti-arrow {position: relative; top:auto; margin:0; right:auto;} 
#widget #fields #new-client .intl-tel-input .mand {position: absolute; top: -24px; right: 0px;}
#widget #fields #new-client .other-optin {margin-top:8px !important;}
#widget #fields #new-client .other-optin .responsive-label {float:none !important; font-weight:normal; box-sizing: border-box;}
#widget #fields .label-marketing-consent label{float:none !important; font-weight:normal; box-sizing: border-box; width:100%;}
#widget #fields #clt_new_error {background-color:rgb(255, 0, 0); padding:16px 8px; color:white !important; border-radius:4px; margin:8px 0px;}

/************ RELATIONSHIP ************/ 
#widget #relationships {padding-top:0px !important; width:auto; margin:initial;}
#widget #relationships p {padding:0px; margin:0px; overflow:hidden;}
#widget #relationships .page-content {max-width:400px; margin:auto; height:auto;}
#widget #relationships #radio-relationships {padding:0px; width:100%; margin:16px 0px;}
#widget #relationships #new-client-relationships p{display:flex; flex-direction:column; width:100%; position:relative;}
#widget #relationships #new-client-relationships p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; padding-top : 0px; font-weight:bold; line-height: normal; text-align:left;}
#widget #relationships #new-client-relationships p input[type=text]:not(.invalid_input),
#widget #relationships #new-client-relationships p input[type=password], 
#widget #relationships #new-client-relationships p input[type=tel], 
#widget #relationships #new-client-relationships p input[type=email], 
#widget #relationships #new-client-relationships p input[type=password], 
#widget #relationships #new-client-relationships p textarea, 
#widget #relationships #new-client-relationships p select, 
#widget #relationships #new-client-relationships input[type=text]:not(.invalid_input),
#widget #relationships #new-client-relationships input[type=password], 
#widget #relationships #new-client-relationships input[type=tel], 
#widget #relationships #new-client-relationships input[type=email], 
#widget #relationships #new-client-relationships input[type=password], 
#widget #relationships #new-client-relationships textarea, 
#widget #relationships #new-client-relationships select {width:100%; margin-bottom:8px; box-sizing:border-box;}
#widget #relationships #new-client-relationships p .mand{position:absolute; top:0px; right:0px;}
#widget #relationships #relationships_error{background-color:rgb(255, 0, 0); padding:16px 8px; color:white !important; border-radius:4px; margin:8px 0px;}

/************ EXISTING CLIENT ************/ 
#widget #fields #existing-client {width:100%; padding-top:16px; padding-bottom:8px;}
#widget #fields #existing-client p{display:flex; flex-direction:column; width:100%; position:relative; overflow:hidden;}
#widget #fields #existing-client p label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; line-height: normal;}
#widget #fields #existing-client p input[type=text]:not(.invalid_input),
#widget #fields #existing-client p input[type=password], 
#widget #fields #existing-client p input[type=tel], 
#widget #fields #existing-client p input[type=email], 
#widget #fields #existing-client p input[type=password], 
#widget #fields #existing-client p textarea, 
#widget #fields #existing-client p select, 
#widget #fields #existing-client input[type=text]:not(.invalid_input),
#widget #fields #existing-client input[type=password], 
#widget #fields #existing-client input[type=tel], 
#widget #fields #existing-client input[type=email], 
#widget #fields #existing-client input[type=password], 
#widget #fields #existing-client textarea, 
#widget #fields #existing-client select {width:100%; margin-bottom:8px; box-sizing:border-box;}
#widget #fields #existing-client p .mand{position:absolute; top:0px; right:0px;}
#widget #fields #existing-client .intl-tel-input {display:block;}
#widget #fields #existing-client .intl-tel-input .selected-flag {display:flex; flex-direction:row; width:40px; justify-content:space-between; align-items: center; height:23px; padding:0px; padding-left:8px;}
#widget #fields #existing-client .intl-tel-input .selected-flag .iti-flag {display:block; position:relative; top:auto; bottom:auto; margin: inherit;}
#widget #fields #existing-client .intl-tel-input .selected-flag .iti-arrow {position: relative; top:auto; margin:0; right:auto;} 
#widget #fields #existing-client .intl-tel-input .mand {position: absolute; top: -24px; right: 0px;}
#widget #fields #existing-client .other-optin {margin-top:8px;}
#widget #fields #existing-client .checkbox label {padding-left:30px !important;}
#widget #fields #existing-client .other-optin .responsive-label {float:none !important; font-weight:normal; box-sizing: border-box;}
#widget #fields #existing-client .new {position:relative;}

/************ CUSTOM FIELD ************/ 
#widget #fields-1 {padding-top:0px !important; width:auto;}
#widget #fields-1 p {padding:0px; margin:0px; overflow:hidden;}
#widget #fields-1 .page-content {max-width:400px; margin:auto; height:auto;}
#widget #fields-1 #radio-relationships {padding:0px; width:100%; margin:16px 0px;}
#widget #fields-1  p, #widget #fields-1 div {display:flex; flex-direction:column; width:100%; position:relative;}
#widget #fields-1 p label, #widget #fields-1 div label{display:block; width:100%; float:none; margin-right:0px; margin-bottom:8px; padding-top : 0px; font-weight:bold; line-height: normal; text-align:left;}
#widget #fields-1 p input[type=text]:not(.invalid_input),
#widget #fields-1 p input[type=password], 
#widget #fields-1 p input[type=tel], 
#widget #fields-1 p input[type=email], 
#widget #fields-1 p input[type=password], 
#widget #fields-1 p textarea, 
#widget #fields-1 p select, 
#widget #fields-1 input[type=text]:not(.invalid_input),
#widget #fields-1 input[type=password], 
#widget #fields-1 input[type=tel], 
#widget #fields-1 input[type=email], 
#widget #fields-1 input[type=password], 
#widget #fields-1 textarea, 
#widget #fields-1 select {width:100%; margin-bottom:8px; box-sizing:border-box;}
#widget #fields-1 p .mand, #widget #fields-1 .mand{position:absolute; top:0px; right:0px;}
#widget #fields-1 .az_list {margin:0px;}
#widget #fields-1 .az_list li{margin-left:0px;}
#widget #fields-1 .az_list .checkbox {margin:0px;}
#widget #fields-1 .az_list li{margin-left:0px;}
#widget #fields-1 .az_list .radio {margin:0px;}
#widget #fields-1 .title {font-size:16px;}


/************ CONFIRMATION ************/ 
#widget #confirmation .page-content {max-width:400px; margin:auto; height:auto;}

/************ PAIEMENT ************/ 
#widget .payment-box:hover { border: solid 1px var(--bg-button);}

/************ LIST *************/
#widget .items {padding:8px 0px;}
#widget .items li {padding:0px;  margin:0px; border:0px;} 
#widget.items li:active, .items:active .item.center:active {font-size:14px;}
#widget .items li:hover, #widget .items .item.center:hover {background:none; transition-duration: 0s;}
#widget .items li .row {padding:8px; min-height:62px; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--grey-50);}
#widget .items li .row:hover {background-color: var(--grey-25); color:var(--grey-900); transition-duration: 0.7s;}
#widget .items li .row img {padding:0px;}
#widget .items li .row .item {flex:1; padding:0px 8px;}
#widget .items li .row .item.center{line-height:normal; margin:0px; color:var(--grey-800); white-space: nowrap; font-size:14px;}
#widget .items li .row .item h4, #widget .items li .row .item h2 {line-height:normal; margin:0px; color:var(--grey-800); white-space: nowrap; padding:0px; font-size:14px;}
#widget .items li .row:hover .item h4, #widget .items li .row:hover .item h2, #widget .items li .row:hover .item p {color:var(--grey-900);}

/* Tag */
#widget .items li .row .desktop, #widget .items li .row .price{padding:4px 8px; background-color:var(--bg-list-tag); border-radius:4px; margin:4px 4px; line-height:16px; box-sizing: border-box; color: var(--color-list-tag);}
#widget .items li .row .desktop span, #widget .items li .row .price {color:var(--color-list-tag); line-height:16px;}
#widget .items li .row .desktop:empty, #widget .items li .row .price:empty{background:none;}
#widget .items .row p {margin:0px;}


/************ BUTTON ************/
#widget #bbuttons {background-color:var(--white); height:auto; padding:8px 16px; display:flex !important; flex-direction:row; justify-content:space-between;}

/* Primary Button */
#widget .az-btn-blue, #widget #bbuttons .az-btn-blue, #widget #bbuttons #submit-widget{padding:0px 16px; height:36px; border-radius:4px; background-color:var(--bg-button); color:var(--color-button); border:1px solid var(--bg-button); margin:0px; text-transform: none; font-size:12px;}
#widget .az-btn-blue:hover, #widget #bbuttons .az-btn-blue:hover, #widget #bbuttons #submit-widget:hover{ background-color:var(--bg-button-hover); border:1px solid var(--bg-button-hover); transition-duration: 0.7s; color:var(--color-button-hover);}
#widget .az-btn-blue:active, #widget #bbuttons .az-btn-blue:active, #widget #bbuttons #submit-widget:active{background-color:var(--bg-button-active); border:1px solid var(--bg-button-active); transition-duration: 0.7s; color:var(--color-button-active);}

/* Secondary Button */
#widget #bbuttons .az-btn-previous {background-color: var(--white); color: var(--bg-button); border:1px solid var(--bg-button); padding:0px 16px; height:34px; border-radius:4px; text-transform: none; font-size:12px;}
#widget #bbuttons .az-btn-previous:hover {border:1px solid var(--bg-button-hover); transition-duration: 0.7s; color: var(--bg-button-hover);}
#widget #bbuttons .az-btn-previous:active {border:1px solid  var(--bg-button-active); transition-duration: 0.7s; color: var(--bg-button-active);}

/* Button OK */
#widget .az-btn-pos {border:1px solid #4caf50; padding:5px 16px; border-radius:4px; background-color:#4caf50; color:var(--white); margin:0px;}
#widget .az-btn-pos:hover {border:1px solid #388e3c; padding:5px 16px; border-radius:4px; background-color:#388e3c; color:var(--white); margin:0px;transition-duration: 0.7s;}

/* Button KO */
#widget .az-btn-neg{border:1px solid #f44336; padding:5px 16px;  border-radius:4px; background-color:#f44336; color:var(--white); margin:0px;}
#widget .az-btn-neg:hover{border:1px solid #d32f2f; padding:5px 16px;  border-radius:4px; background-color:#d32f2f; color:var(--white); margin:0px; transition-duration: 0.7s;}


/************ FOOTER ************/
#widget .footer {background-color:var(--white); height:auto; padding:4px 8px; display:flex; flex-direction:row; justify-content:center; border-top:1px solid var(--grey-100);}
#widget .footer a {text-transform:none; text-decoration:none;}
#widget .footer a:hover {text-transform:none; text-decoration:underline;}
#widget .footer #powered_by_agendize {text-transform:none;}

/************ PRIVACY ************/ 
#widget  .privacy {position:aboslute; bottom: 8px; left: 8px; height:auto;}

/************ CLOSE ************/ 
#close {color:var(--grey-900);}

/************ MOBILE ************/
@media screen and (max-width: 400px) {
    #widget .event-info {margin:0px 8px;}
    #widget .page {padding:16px 8px;}

    #widget .items li *{ line-height: normal;}
    #widget .items li .row .desktop, #widget .items li .row .price { display:none;}
    #widget .items li .row img {padding:0px; height:auto;}

    #widget #date .timezone #timezone {margin-top:8px;}
    #widget #date .timezone {margin:0px 8px;}
    #widget #date #months {padding:0px 8px}
    #widget #date #dates {padding:0px 8px}

    #widget #bbuttons {padding:8px 8px;}
}

@media only screen and (min-width: 600px) {
    #widget #date {overflow-y: auto!important;}
}


@media only screen and (max-width: 700px) {
    #widget #fields #new-client .intl-tel-input .selected-flag {bottom:auto;}
}


Connexion ou Inscription pour poster un commentaire