652 lines
12 KiB
CSS
652 lines
12 KiB
CSS
:root {
|
|
--whatsapp-bubble-color: #1e1f20;
|
|
--whatsapp-footer-icon-width: 2.6rem;
|
|
--audio-controller-radius: 1rem
|
|
}
|
|
|
|
.whatsapp-screen {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--main-background-color)
|
|
}
|
|
|
|
.whatsapp-padding {
|
|
padding: 6rem 1rem
|
|
}
|
|
|
|
.whatsapp-logo {
|
|
width: 276px;
|
|
margin: 0 auto;
|
|
height: 276px;
|
|
border-radius: 9999px;
|
|
margin-bottom: 46px
|
|
}
|
|
|
|
.whatsapp-register-screen-header h4 {
|
|
display: flex;
|
|
justify-content: center
|
|
}
|
|
|
|
.whatsapp-register-screen-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: 5rem;
|
|
padding-left: 12px;
|
|
padding-right: 12px
|
|
}
|
|
|
|
.whatsapp-form-input {
|
|
width: 100%;
|
|
border: none;
|
|
border-radius: .5rem;
|
|
padding: 1.2rem 1rem;
|
|
background-color: var(--dark-background-color)
|
|
}
|
|
|
|
.whatsapp-avatar {
|
|
border-radius: 9999px
|
|
}
|
|
|
|
.whatsapp-chat-bg {
|
|
background-image: url(../../img/whatsapp_app/whatsapp-wallpaper-1.jpg);
|
|
background-size: cover;
|
|
background-position: center center;
|
|
background-repeat: no-repeat
|
|
}
|
|
|
|
.whatsapp-chat-message {
|
|
max-width: 100%;
|
|
gap: 4px;
|
|
background-color: var(--whatsapp-bubble-color);
|
|
border-radius: 13px;
|
|
padding: 10px;
|
|
align-self: flex-start;
|
|
display: flex;
|
|
position: relative
|
|
}
|
|
|
|
.whatsapp-chat-message div p {
|
|
color: var(--text-color);
|
|
font-weight: 400
|
|
}
|
|
|
|
#visto-whatsapp {
|
|
position: relative
|
|
}
|
|
|
|
.whatsapp-chat-message div a {
|
|
position: relative;
|
|
right: 2px;
|
|
font-size: 12px
|
|
}
|
|
|
|
.whatsapp-chat-message-container {
|
|
max-width: 85%
|
|
}
|
|
|
|
.whatsapp-chat-message-container.self {
|
|
align-self: flex-end
|
|
}
|
|
|
|
.whatsapp-chat-message-container.self .whatsapp-chat-message {
|
|
background-color: var(--whatsapp-bubble-color-personal)
|
|
}
|
|
|
|
.whatsapp-chat-input::placeholder {
|
|
color: #ccc
|
|
}
|
|
|
|
.whatsapp-chat-fixed-message {
|
|
color: var(--text-color);
|
|
font-size: 1.3rem;
|
|
font-weight: 500;
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
padding: 12px;
|
|
background-color: var(--whatsapp-alert-background-color);
|
|
border-radius: 10px;
|
|
margin-top: 12px;
|
|
letter-spacing: 1px;
|
|
text-align: center
|
|
}
|
|
|
|
.whatsapp-bubble-arrow {
|
|
position: absolute;
|
|
width: 0;
|
|
bottom: 30px;
|
|
left: -12px;
|
|
height: 0
|
|
}
|
|
|
|
.whatsapp-chat-message-container.self .whatsapp-bubble-arrow {
|
|
right: -2px;
|
|
bottom: 30px;
|
|
left: auto
|
|
}
|
|
|
|
.whatsapp-chat-message-container.self .whatsapp-bubble-arrow::after {
|
|
transform: rotate(45deg) scaleY(-1);
|
|
border-top: 9px solid var(--whatsapp-bubble-color-personal)
|
|
}
|
|
|
|
.whatsapp-bubble-arrow::after {
|
|
content: "";
|
|
position: absolute;
|
|
border: 0 solid transparent;
|
|
border-top: 9px solid var(--whatsapp-bubble-color);
|
|
border-radius: 0 20px 0;
|
|
width: 15px;
|
|
height: 30px;
|
|
transform: rotate(145deg)
|
|
}
|
|
|
|
.whatsapp-gray-text {
|
|
color: rgb(165, 165, 165);
|
|
margin: 0
|
|
}
|
|
|
|
.whatsapp-app .emojionearea {
|
|
margin: 0 auto;
|
|
color: red !important;
|
|
width: 84% !important;
|
|
height: 55% !important;
|
|
background: var(--emojinarea-background-color) !important;
|
|
border: 1px solid var(--second-border-color) !important
|
|
}
|
|
|
|
.whatsapp-app .emojionearea-editor {
|
|
color: var(--text-color) !important;
|
|
width: 80% !important;
|
|
left: 0 !important
|
|
}
|
|
|
|
.whatsapp-app .emojionearea-editor::placeholder {
|
|
color: #fff !important
|
|
}
|
|
|
|
#whatsapp-footer {
|
|
background: var(--dark-background-color)
|
|
}
|
|
|
|
.whatsapp-footer-button a {
|
|
position: relative;
|
|
bottom: 2px;
|
|
color: #777;
|
|
font-size: 14px
|
|
}
|
|
|
|
.whatsapp-footer-button.current a {
|
|
color: #0095f6;
|
|
fill: #0095f6
|
|
}
|
|
|
|
#whatsapp-chats section {
|
|
height: 74px
|
|
}
|
|
|
|
#whatsapp-chats img {
|
|
position: relative;
|
|
left: 3px
|
|
}
|
|
|
|
#whatsapp-chats div {
|
|
position: relative;
|
|
font-size: 12px;
|
|
right: 13px;
|
|
margin-bottom: 8px
|
|
}
|
|
|
|
#whatsapp-chats a {
|
|
position: relative;
|
|
left: 14px;
|
|
top: 4px
|
|
}
|
|
|
|
#whatsapp-chats p {
|
|
position: relative;
|
|
font-size: 15px;
|
|
left: 13px;
|
|
top: 2px
|
|
}
|
|
|
|
.whatsapp-footer-button svg {
|
|
position: relative;
|
|
bottom: 5px;
|
|
color: #777;
|
|
fill: #777;
|
|
width: var(--whatsapp-footer-icon-width)
|
|
}
|
|
|
|
.whatsapp-footer-button.current svg {
|
|
color: #0095f6;
|
|
fill: #0095f6
|
|
}
|
|
|
|
.whatsapp-add-to-group {
|
|
position: relative;
|
|
height: 52px
|
|
}
|
|
|
|
.whatsapp-information-add-participants-save {
|
|
font-size: 16px !important
|
|
}
|
|
|
|
.whatsapp-add-to-group a {
|
|
position: relative;
|
|
top: 2px;
|
|
left: 4px;
|
|
font-size: 15px
|
|
}
|
|
|
|
#whatsapp-home-header p {
|
|
margin-left: 3px;
|
|
font-size: 30px;
|
|
font-weight: 600
|
|
}
|
|
|
|
#whatsapp-home-header a {
|
|
font-size: 16px
|
|
}
|
|
|
|
#whatsapp-my-status .addStory {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background-color: #3291fe;
|
|
justify-content: center;
|
|
display: flex;
|
|
right: -5px;
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
box-sizing: content-box
|
|
}
|
|
|
|
#whatsapp-my-status .addStory div {
|
|
color: #fff;
|
|
margin: 0 auto
|
|
}
|
|
|
|
.whatsapp-user-status {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 2%;
|
|
z-index: 1 !important
|
|
}
|
|
|
|
.whatsapp-app .swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 5 !important
|
|
}
|
|
|
|
.whatsapp-app .swiper-slide .whatsapp-status-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
padding: 3px
|
|
}
|
|
|
|
.whatsapp-prev-user-story {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 40%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999 !important;
|
|
opacity: 0
|
|
}
|
|
|
|
.whatsapp-next-user-story {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 40%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999 !important;
|
|
opacity: 0
|
|
}
|
|
|
|
.whatsapp-progress {
|
|
height: 3px;
|
|
flex-grow: 1;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
background-repeat: no-repeat;
|
|
background-size: 200%;
|
|
background-position: 100% 50%;
|
|
animation-timing-function: linear;
|
|
animation-delay: .2s
|
|
}
|
|
|
|
.whatsapp-progress-bar {
|
|
width: 100%;
|
|
background-color: white
|
|
}
|
|
|
|
.whatsapp-status-user-info {
|
|
position: absolute;
|
|
top: 46px;
|
|
left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
z-index: 5;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px
|
|
}
|
|
|
|
@keyframes input_pop {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
75% {
|
|
opacity: 1
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1.2)
|
|
}
|
|
}
|
|
|
|
.whatsapp-create-group-checkbox {
|
|
display: none
|
|
}
|
|
|
|
.whatsapp-create-group-checkbox+label span {
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 19px;
|
|
margin: 0 5px -4px 0
|
|
}
|
|
|
|
.whatsapp-create-group-checkbox+label span:before,
|
|
.whatsapp-create-group-checkbox+label span:after {
|
|
-webkit-transition: all .3s ease-in-out;
|
|
-moz-transition: all .3s ease-in-out;
|
|
transition: all .3s ease-in-out;
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background: transparent;
|
|
border: 2px solid var(--dark-border-color);
|
|
border-radius: 9999px
|
|
}
|
|
|
|
.whatsapp-create-group-checkbox+label span:after {
|
|
z-index: 0;
|
|
border: none
|
|
}
|
|
|
|
.whatsapp-create-group-checkbox:checked+label span:before {
|
|
animation: pop .3s ease;
|
|
z-index: 100;
|
|
background: #3291fe;
|
|
background: #3291fe url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;
|
|
border: 2px solid #3291fe
|
|
}
|
|
|
|
.whatsapp-contact-info-group-participants-list-item:last-child div {
|
|
border: 0
|
|
}
|
|
|
|
.whatsapp-call-button {
|
|
background: var(--main-darker-gray);
|
|
border-radius: 9999px;
|
|
width: 54px;
|
|
height: 54px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all .3s ease
|
|
}
|
|
|
|
.whatsapp-call-button i {
|
|
font-size: 22px;
|
|
color: #fff
|
|
}
|
|
|
|
.whatsapp-call-button[data-type='microphone'].active {
|
|
background: #3291fe
|
|
}
|
|
|
|
.whatsapp-call-button[data-type='speaker'].active {
|
|
background: #38a169
|
|
}
|
|
|
|
.whatsapp-call-user.talking {
|
|
box-shadow: #38a169 0 0 0 3px
|
|
}
|
|
|
|
.whatsapp-call-user:nth-child(odd):last-child {
|
|
grid-column: span 2;
|
|
grid-row: span 2
|
|
}
|
|
|
|
#whatsapp-record-voice-button.recording {
|
|
color: #e53e3e;
|
|
animation: whatsapp-record-voice-animation 1.5s cubic-bezier(0.215, 0.610, 0.355, 1) infinite
|
|
}
|
|
|
|
@keyframes whatsapp-record-voice-animation {
|
|
0% {
|
|
opacity: 1
|
|
}
|
|
|
|
100% {
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
.button-items {
|
|
flex-grow: 1
|
|
}
|
|
|
|
.whatsapp-audio-group .controls {
|
|
position: relative;
|
|
width: 45px;
|
|
height: 45px;
|
|
margin: 5px 7px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.whatsapp-audio-group :is(#play, #pause) {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
padding: 5px;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all .4s
|
|
}
|
|
|
|
.whatsapp-audio-group :is(#play i, #pause i) {
|
|
position: relative;
|
|
bottom: 2px;
|
|
right: 3px;
|
|
color: var(--text-color);
|
|
font-size: 2.5rem
|
|
}
|
|
|
|
.whatsapp-audio-group #slider-timer {
|
|
display: flex;
|
|
position: relative;
|
|
top: 5px;
|
|
height: 35px;
|
|
flex-direction: column;
|
|
justify-content: space-between
|
|
}
|
|
|
|
.whatsapp-audio-group #slider {
|
|
position: relative;
|
|
top: 8px;
|
|
width: 165px;
|
|
height: 4px;
|
|
background: #ccc;
|
|
border-radius: var(--audio-controller-radius)
|
|
}
|
|
|
|
.whatsapp-audio-group #slider #elapsed {
|
|
height: 100%;
|
|
width: 0;
|
|
background: #fff;
|
|
border-radius: var(--audio-controller-radius);
|
|
transition: all 1s cubic-bezier(0.23, 1, 0.320, 1)
|
|
}
|
|
|
|
.whatsapp-audio-group .times {
|
|
display: flex;
|
|
justify-content: space-between
|
|
}
|
|
|
|
.whatsapp-call-user.calling {
|
|
animation: whatsapp-call-animation 1.5s cubic-bezier(0.215, 0.610, 0.355, 1) infinite
|
|
}
|
|
|
|
.whatsapp-wallpaper-custom-grid {
|
|
top: 50px;
|
|
padding: 15px;
|
|
margin-left: 10px
|
|
}
|
|
|
|
.whatsapp-wallpaper-custom img {
|
|
height: 230px;
|
|
width: 111px;
|
|
border-radius: 5px
|
|
}
|
|
|
|
#whatsapp-chat-input-container {
|
|
background: var(--whatsapp-background-color)
|
|
}
|
|
|
|
#whatsapp-chat,
|
|
#whatsapp-chat-input-container {
|
|
background: var(--whatsapp-background-color)
|
|
}
|
|
|
|
.whatsapp-header .whatsapp-chat-call {
|
|
position: relative;
|
|
right: 10px
|
|
}
|
|
|
|
#whatsapp-chat-back {
|
|
position: relative;
|
|
left: 10px
|
|
}
|
|
|
|
.whatsapp-header .whatsapp-contact-avatar {
|
|
position: relative;
|
|
left: 15px
|
|
}
|
|
|
|
.whatsapp-header .whatsapp-contact-name {
|
|
position: relative;
|
|
left: 25px;
|
|
font-weight: 600
|
|
}
|
|
|
|
.whatsapp-wallpaper-custom a {
|
|
width: 100px;
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-align: center
|
|
}
|
|
|
|
.whatsapp-create-chat-list div {
|
|
height: 50px
|
|
}
|
|
|
|
.whatsapp-status-close {
|
|
position: relative;
|
|
top: 69px !important
|
|
}
|
|
|
|
.whatsapp-status-close i {
|
|
position: relative;
|
|
font-size: 15px
|
|
}
|
|
|
|
#whatsapp-calls-home nav {
|
|
width: 83px
|
|
}
|
|
|
|
#whatsapp-calls-home header {
|
|
position: relative;
|
|
}
|
|
|
|
.whatsapp-settings-header-text,
|
|
#whatsapp-status-home a,
|
|
#whatsapp-calls-home a {
|
|
font-weight: 600
|
|
}
|
|
|
|
#whatsapp-calls-home nav i {
|
|
padding: 7px
|
|
}
|
|
|
|
.set-new-waypoint {
|
|
object-fit: cover;
|
|
cursor: pointer
|
|
}
|
|
|
|
#whatsapp-status-list {
|
|
position: relative;
|
|
top: 5px
|
|
}
|
|
|
|
#whatsapp-status-list img {
|
|
position: relative;
|
|
top: 3px
|
|
}
|
|
|
|
#whatsapp-call-history-list {
|
|
position: relative;
|
|
top: 0;
|
|
height: 670px;
|
|
overflow: auto
|
|
}
|
|
|
|
#whatsapp-status-list h4 {
|
|
font-size: 17px;
|
|
font-weight: 100;
|
|
color: gray;
|
|
}
|
|
|
|
@keyframes whatsapp-call-animation {
|
|
0% {
|
|
box-shadow: #3291fe 0 0 0 0
|
|
}
|
|
|
|
50% {
|
|
box-shadow: #3291fe 0 0 0 3px
|
|
}
|
|
|
|
100% {
|
|
box-shadow: #3291fe 0 0 0 0
|
|
}
|
|
} |