|
Server : Apache System : Linux srv.rainic.com 4.18.0-553.47.1.el8_10.x86_64 #1 SMP Wed Apr 2 05:45:37 EDT 2025 x86_64 User : rainic ( 1014) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/stando/www/wp-content/plugins/uwac/public/css/ |
Upload File : |
$easingType: cubic-bezier(0.4, 0.0, 0.2, 1);
.cs-uwac__popup-wrapper{
// Scaffold Variables
--cs-uwac-button-height: 56px;
--cs-uwac-button-margin: 14px;
--cs-uwac-header-height: 104px;
--cs-uwac-widget-margin-top-initial: 20px;
--cs-uwac-widget-margin-bottom-initial: 20px;
--cs-uwac-widget-maxheight: calc(100vh - (var(--cs-uwac-button-height) + var(--cs-uwac-button-margin)));
--cs-uwac-chatbox-bg: var(--cs-uwac-theme_content-bg,white);
width: 350px;
max-width: calc(100% - 50px);
height: auto;
max-height: var(--cs-uwac-widget-maxheight);
pointer-events: none;
position: fixed;
top: var(--cs-uwac-theme_position-top, initial);
right: var(--cs-uwac-theme_position-right, 20px);
bottom: var(--cs-uwac-theme_position-bottom, 20px);
left: var(--cs-uwac-theme_position-left, initial);
transition: all 0.6s $easingType;
z-index: 10000000;
// Variables
--uwac-btn-icon-display: flex;
padding-bottom: 70px;
*{
user-select: none;
box-sizing: border-box;
}
a,
strong{
color: currentColor;
}
// Widget Active State
&.cs-uwac__active{
.cs-uwac__popup-overlay{
pointer-events: initial;
opacity: 1;
visibility: visible;
}
}
// Position Styles
&.cs-uwac__position--bottomright{
--cs-uwac-widget-margin-top: 20px;
--cs-uwac-widget-margin-bottom: var(--cs-uwac-theme_position-bottom);
--cs-uwac-widget-maxheight: calc(100vh - var(--cs-uwac-widget-margin-top));
}
&.cs-uwac__position--bottomleft{
--cs-uwac-widget-margin-top: 20px;
--cs-uwac-widget-margin-bottom: var(--cs-uwac-theme_position-bottom);
--cs-uwac-widget-maxheight: calc(100vh - var(--cs-uwac-widget-margin-top));
// Widget Button
.cs-uwac__popup-btn{
top: initial;
right: initial;
bottom: 0px;
left: 0px;
flex-flow: row-reverse;
}
}
// Hide Widget Button Label
&.cs-uwac__popup--hide-label{
.cs-uwac__popup-btn{
.cs-uwac__popup-btn_txt{
display: none !important;
}
}
}
// GDPR Ready
&.cs-uwac__popup--gdpr-ready{
.cs-uwac__popup-chatbox_notice-gdpr{
display: none;
visibility: hidden;
opacity: 0;
}
}
/**
* Widget Button
*/
.cs-uwac__popup-btn{
position: relative;
z-index: 10;
.cs-uwac__popup-btn_icon{
.cs-uwac__popup-btn_icon-icon{
position: absolute;
span{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
svg{
fill: currentColor;
color: currentColor;
width: 100%;
height: 100%;
}
}
}
.cs-uwac__popup-btn_icon-close{
position: absolute;
span{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
svg{
fill: currentColor;
color: currentColor;
width: 100%;
height: 100%;
}
}
}
}
.cs-uwac__popup-btn_txt{
}
}
/**
* Widget Chat Box
*/
.cs-uwac__popup-chatbox{
position: relative;
z-index: 10;
// Popup Heading
.cs-uwac__popup-chatbox_heading{
.cs-uwac__popup-chatbox_wazap-icon{
span{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
}
.cs-uwac__popup-chatbox_title{
}
.cs-uwac__popup-chatbox_intro{
}
}
// Chatbox Content
.cs-uwac__popup-chatbox_content{
--cs-uwac-chatbox-height: calc(var(--cs-uwac-header-height) + var(--cs-uwac-widget-margin-top,var(--cs-uwac-widget-margin-top-initial)) + var(--cs-uwac-widget-margin-bottom,var(--cs-uwac-widget-margin-bottom-initial)) + var(--cs-uwac-button-height) + var(--cs-uwac-button-margin));
overflow: scroll;
height: calc(100% - 100px);
max-height: calc(100vh - var(--cs-uwac-chatbox-height));
/*
Los 240px o --cs-uwac-chatbox-height se calcularon asi:
- 56px => alto del boton circular
- 20px => margin-top del popup
- 20px => margin-bottom del popup
- 104px => alto del header del popup
- --cs-uwac-wrapperpadding => position personalizada del popup
- 14px => de margen entre el boton y el popup calculado restando el padding de 70px - 56px
*/
// Response Time Notice
.cs-uwac__popup-chatbox_notice{
}
// GDPR Notice
.cs-uwac__popup-chatbox_notice-gdpr{
&--accepted{
}
&--error{
}
label{
input{
}
}
}
// Accounts List
.cs-uwac__popup-chatbox_content-list{
padding-bottom: 20px;
margin-bottom: -20px;
.cs-uwac__popup-chatbox_content-item{
// User Account
.cs-uwac__popup-account{
// User Avatar
.cs-uwac__popup-account_avatar{
&.cs-uwac__popup-account_avatar-img-avatar{
}
&.cs-uwac__popup-account_avatar-no-avatar{
}
// WhatsApp Icon
.cs-uwac__popup-account_avatar-wazap-icon{
display: none;
span{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
}
.cs-uwac__popup-account_avatar-img{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
// Placeholder Account Name Acronym
&::before{
content: attr(data-placeholder);
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: white;
color: var(--cs-uwac-account-status);
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
font-size: 16px;
}
// Imagen
> img{
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
}
// No imagen muestra icono WhatsApp
span{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
}
}
// User Account Content
.cs-uwac__popup-account_content{
display: flex;
flex-flow: column;
align-items: flex-start;
justify-content: center;
width: 100%;
min-height: 48px;
.cs-uwac__account_name{
font-size: 14px;
color: #363c47;
line-height: 1.188em !important;
}
.cs-uwac__account_label{
font-size: 11px;
color: #989b9f;
padding: 2px 0 0;
line-height: 1.125em !important;
}
.cs-uwac__account_status{
color: rgb(255,255,255);
font-size: 10px;
padding: 5px 0 0;
line-height: 1.125em !important;
border-radius: 4px;
background-color: var(--cs-uwac-account-status);
padding: 3px 6px;
display: inline-flex;
margin-top: 3px;
}
}
// WhatsApp Icon
.cs-uwac__popup-account_wazap-icon{
display: none;
span{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
}
}
}
}
}
.cs-uwac__popup-chatbox_content_left{
}
}
/**
* Widget Overlay
*/
.cs-uwac__popup-overlay{
position: fixed;
background: transparent;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: all 0.3s $easingType;
}
}
.cs-uwac__account-button-wrapper{
a.cs-uwac__button-account{
// User Avatar
.cs-uwac__button-account_avatar{
&:not(.cs-uwac__button-account_avatar--no-avatar){
.cs-uwac__button-account_avatar-img{
// Placeholder Account Name Acronym
&::before{
content: attr(data-placeholder);
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: white;
color: var(--cs-uwac-account-status);
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
font-size: 24px;
border-radius: inherit;
}
}
}
.cs-uwac__button-account_avatar-img{
position: relative;
// Avatar Image
> img{
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
position: relative;
}
// WhatsApp Logo Avatar
> span{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
}
.cs-uwac__button-account_avatar-wazap{
span{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
}
}
}
}
@import "animate";
@import "../icons/castor-line-icons/castor-line-icons";