Rev May 23

assets/chatbutton/floating-wpp.css

@@ -0,0 +1,132 @@
+.floating-wpp {
+    position: fixed;
+    bottom: 15px;
+    left: 15px;
+    font-size: 14px;
+    transition: bottom 0.2s;
+    z-index: 1021;
+}
+
+.floating-wpp .floating-wpp-button {
+    position: relative;
+    border-radius: 50%;
+    box-shadow: 1px 1px 4px rgba(60, 60, 60, 0.4);
+    transition: box-shadow 0.2s;
+    cursor: pointer;
+    overflow: hidden;
+}
+
+.floating-wpp .floating-wpp-button img,
+.floating-wpp .floating-wpp-button svg {
+    position: absolute;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    border-radius: 50%;
+}
+
+.floating-wpp:hover .floating-wpp-button {
+    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.4);
+}
+
+.floating-wpp .floating-wpp-popup {
+    /*border: 2px solid white;*/
+    border-radius: 8px;
+    background-color: #e5ddd5;
+    position: absolute;
+    overflow: hidden;
+    padding: 0;
+    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.25);
+    width: 0px;
+    height: 0px;
+    bottom: 0;
+    opacity: 0;
+    transition: bottom 0.1s ease-out, opacity 0.2s ease-out;
+    transform-origin: bottom;
+}
+
+.floating-wpp .floating-wpp-popup.active {
+    padding: 0 15px 12px 15px;
+    width: 280px;
+    height: auto;
+    bottom: 82px;
+    opacity: 1;
+}
+
+.floating-wpp .floating-wpp-popup .floating-wpp-message {
+    background-color: white;
+    padding: 8px;
+    border-radius: 7.5px 7.5px 7.5px 7.5px;
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    transition: opacity 0.2s;
+    max-width: 100%;
+}
+
+.floating-wpp .floating-wpp-popup.active .floating-wpp-message {
+    opacity: 1;
+    transition-delay: 0.2s;
+}
+
+.floating-wpp .floating-wpp-popup .floating-wpp-head {
+    text-align: left;
+    color: white;
+    margin: 0 -15px 15px -15px;
+    padding: 15px 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    cursor: pointer;
+}
+
+.floating-wpp-headName {
+    margin: 0;
+}
+
+.floating-wpp .floating-wpp-popup .floating-wpp-head .close {
+    position: absolute;
+    top: 14px;
+    right: 8px;
+    color: #ffffff;
+    text-shadow: none;
+    opacity: 1;
+    font-size: inherit;
+}
+
+.floating-wpp .floating-wpp-input-message {
+    background-color: #e5ddd5;
+    margin: 5px -15px -15px -15px;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+}
+
+.floating-wpp .floating-wpp-input-message textarea {
+    border: 1px solid #ffffff;
+    border-radius: 21px;
+    box-shadow: none;
+    padding: 8px 12px;
+    margin: 10px 0 15px 0;
+    width: 100%;
+    max-width: 100%;
+    font-family: inherit;
+    font-size: inherit;
+    resize: none;
+    outline: none;
+    color: #4a4a4a;
+    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.25);
+    visibility: visible !important;
+    animation-delay: 0s;
+    animation-duration: 0s;
+}
+
+.floating-wpp .floating-wpp-btn-send {
+    margin: 10px 0 15px 12px;
+    font-size: 0;
+    cursor: pointer;
+    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.25);
+    border-radius: 50%;
+}