diff --git a/css/main.css b/css/main.css
index 53b885c..6e3daaa 100644
--- a/css/main.css
+++ b/css/main.css
@@ -219,7 +219,7 @@ a:any-link {
stroke-linejoin: round;
}
-span.ripple {
+.ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
diff --git a/css/main.min.css b/css/main.min.css
index 1bde7bd..2539521 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-#landing_page,body,body #scroll_to_bottom{background:rgba(var(--foreground-color),1)}p,textarea{line-height:1.6}.contact .last-message,.contact .name,.copy-row .copy,.mail-card .sender,.text-overflow{white-space:nowrap;text-overflow:ellipsis}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{scroll-behavior:smooth;font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%}body{--accent-color:#3D5AFE;--secondary-color:#ffac2e;--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#efefef;--error-color:red;color:rgba(var(--text-color),1)}body #scroll_to_bottom{box-shadow:0 .3rem .4rem rgba(0,0,0,.2)}body[data-theme=dark]{--accent-color:#3D5AFE;--secondary-color:#d60739;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--error-color:rgb(255, 106, 106)}body[data-theme=dark] .initial{color:rgba(var(--text-color),1)!important;box-shadow:0 .1rem .1rem rgba(0,0,0,.16)}body[data-theme=dark] .message,h1,h2,h3,h4,h5,textarea{color:rgba(var(--text-color),1)}body[data-theme=dark] #scroll_to_bottom{background:linear-gradient(rgba(var(--text-color),.1),rgba(var(--text-color),.1)),rgba(var(--foreground-color),1);box-shadow:0 .4rem .4rem rgba(0,0,0,.3)}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.1rem}h5{font-size:.8rem}h1,h2,h3,h4,h5{font-weight:600}textarea{background:rgba(var(--text-color),.06);border:none;border-radius:.3rem;width:100%;padding:1rem;font-size:1rem;resize:none}.fab .icon,.icon{height:1.2rem;width:1.2rem}textarea:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}strong{font-weight:500}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}.justify-right{margin-left:auto}.direction-column{flex-direction:column}.rest{flex:1}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.breakable{overflow-wrap:break-word}.text-overflow{overflow:hidden}.sticky{position:sticky;top:1rem}.light-text{color:rgba(var(--text-color-light),1)}.accent-color{color:var(--accent-color)}.secondary-color{color:var(--secondary-color)}.fab{filter:drop-shadow(0 .4rem .3rem rgba(0, 0, 0, .2));margin:1.5rem;position:fixed;right:0;bottom:0;z-index:1;--padding:0.9rem 1.6rem}.tick,span.ripple{position:absolute}.fab .icon{margin-left:0!important;margin-right:.5rem;stroke-width:8;stroke:#fff}a:any-link{word-wrap:break-word;color:var(--accent-color);font-weight:500}.solid-background{background:var(--background-color)!important}.normal-weight{font-weight:400}.warning{display:flex;background:wheat;color:#111}.icon{fill:none;stroke-width:6;stroke:rgba(var(--text-color),1);overflow:visible;stroke-linecap:round;stroke-linejoin:round}span.ripple{border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}#landing_illustration,.contact,.initial,.interact,.logo-section{position:relative}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}sm-input{--border-radius:0.5rem}sm-popup sm-input+sm-input{margin-top:1rem}.popup-header{padding:.5rem 1.5rem 0;display:flex;align-items:center;width:100%}.popup-header .icon{padding:.7rem;height:2.4rem;width:2.4rem;stroke-width:8;transform:translateX(-.5rem);cursor:pointer;-webkit-tap-highlight-color:transparent}.popup-header .back{transform:none}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}.copy-row h4{margin-bottom:0!important}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.page{align-items:flex-start;width:100%;height:100%}.card{display:flex;flex-direction:column;margin:1rem 0}.tip{font-size:.9rem;color:rgba(var(--text-color),.8)}sm-button[variant=primary]{--foreground-color:255,255,255}.danger{color:var(--error-color)}.logo-section{align-items:center;height:max-content;margin:.5rem 0}.logo-section h5{font-size:1.1rem!important;font-weight:500}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color),1);stroke:none}.logo-section img{width:2rem;margin-right:.5rem}.select-file input[type=file]{display:none}#landing{display:grid;border-radius:.6rem;width:100%;padding:0 1.5rem;height:100%;align-items:center;overflow-y:auto}#landing .logo-section,#sign_in,.frame,.logo-section{padding:1.5rem}#landing .logo-section{display:flex}#landing .title-font{line-height:1.2;font-weight:700;font-size:2.5rem}#frame_1 h4,#frame_1 h5,#landing .left h3,#landing .left h4,#sign_in h2,#sign_in h4,#sign_in h5,.contact .name,.frame .h2,.initial{font-weight:500}#landing .left{display:grid;flex-direction:column;padding-bottom:1.5rem;z-index:1}#landing .left h4{color:rgba(var(--foreground-color),1)}#landing .left p,.contact .last-message,.contact .name{color:rgba(var(--text-color),.8)}#landing .left sm-button{margin:1.5rem 0 2rem;width:max-content}#landing .left p,#mail .flex,#sign_in #remove_account{margin-top:1rem}#landing .left h3{margin-bottom:1rem}#landing .left p{font-size:1.1rem}#landing .left .flex sm-button:first-of-type{margin-right:1rem}#landing_illustration{width:100%}#sign_in{width:100%;height:100%;align-items:flex-start}#sign_in .flex{width:100%;flex:1}#sign_in sm-input{margin:1.5rem 0}#sign_in h2{margin-top:2rem}#sign_in h4{margin-bottom:1.5rem}#sign_in h5{opacity:.8}#sign_in pin-input{margin:1rem 0 2rem}#sign_in sm-button{width:100%;--padding:0.8rem 1.6rem}#sign_in p{margin-bottom:.5rem;max-width:35ch;margin-top:.5rem}.frame{height:100%;display:flex;flex-direction:column;width:min(24rem,100%);justify-self:center}.frame .h2{margin-bottom:1rem}.frame sm-button[variant=primary]{margin-top:1.5rem}#frame_1 .warning{margin:1rem 0;padding:1rem;border-radius:.5rem}#frame_1 #generate_flo_id{width:100%}#frame_1 #credentials_section{animation:slide-down .3s cubic-bezier(.175,.885,.32,1.275);margin:2rem 0}#frame_1 .copy-row:not(:last-of-type){margin-bottom:1.5rem}#frame_2 pin-input{margin:1rem 0}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading_page{height:100%;display:grid;place-content:center;justify-items:center}.page__loader{z-index:1;transform-origin:bottom;height:6rem;width:6rem;animation:bounce .5s infinite alternate ease-in}.shadow{margin-top:-1rem;width:5rem;height:2rem;background:rgba(var(--text-color),.1);border-radius:50%;animation:scale .5s infinite alternate ease-in;margin-left:1rem}.page__tag-line{margin-top:2rem}@keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(.8)}}@keyframes scale{0%{transform:scale(.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}#main_page{width:100%;height:100%}.initial{justify-content:center;font-size:1.2rem;width:2.8rem;height:2.8rem;aspect-ratio:1/1;color:#fff;box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase;user-select:none}.filled{fill:rgba(var(--text-color),.7);stroke:none!important}.group-icon{height:1.6rem;width:1.6rem;fill:#fff;stroke:none}.contact{display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;user-select:none;overflow:hidden}.contact:not(.chat){grid-template-columns:auto 1fr;grid-template-areas:"dp ."}.contact.admin,.contact.chat,.contact.group{grid-template-columns:auto 1fr auto}.contact.chat,.contact.group{grid-template-areas:"dp . time" "dp . menu"}.contact.selected{background-color:rgba(var(--text-color),.06)}.contact .initial{grid-area:dp}.contact .name{width:100%;font-size:1em;overflow:hidden}.contact .last-message{overflow:hidden;font-weight:400;font-size:.9em}.contact .menu{grid-area:menu;justify-self:flex-end;padding:.2rem;fill:rgba(var(--text-color),1)}.contact .time{font-weight:500;color:rgba(var(--text-color),.7);grid-area:time}.contact .admin-tag{padding:.1rem .6rem;font-size:.8rem;border:var(--accent-color) solid thin;border-radius:3rem}.tick{bottom:-.2rem;right:-.2rem;height:1.2rem;width:1.2rem}.tick .icon{height:100%;width:100%;padding:.4rem;stroke-width:16;border-radius:1rem;background:rgba(var(--text-color),1);stroke:rgba(var(--foreground-color),.8)}#selected_contacts{padding:1rem 1.5rem}#selected_contacts h4{font-weight:500;font-size:1rem}#selected_contacts .warning{font-size:.9rem;padding:.5rem .8rem;border-radius:.5rem;margin:1rem 0;line-height:1.5}#selected_contacts sm-button{margin-bottom:0}#selected_contacts_container{display:flex;overflow:auto hidden}#selected_contacts_container:not(:empty){margin-top:1.5rem}#selected_contacts_container .contact-preview{display:flex;flex-shrink:0;align-items:center;cursor:pointer;margin-right:.5rem;background:rgba(var(--text-color),.1);padding:.4rem .5rem;border-radius:2rem}#selected_contacts_container .contact-preview .initial{width:1.6rem;height:1.6rem;font-size:.9rem}#selected_contacts_container .contact-preview .name{font-size:.9rem;color:rgba(var(--text-color),.8);margin-left:.5rem}#selected_contacts_container .contact-preview .tick{position:relative;bottom:auto;right:auto;margin-left:.5rem}#contact_details_popup{--body-padding:0 0 1.5rem 0}#contact_details_popup .popup-section{margin:1.5rem}#contact_details_popup h5{font-weight:500;opacity:.8}#contact_details_popup .copy-row h4{font-weight:400}#contact_details_popup .group-icon{padding:.2rem!important;height:3rem;width:3rem}#contact_details_popup #contact_initial{height:4.6rem;width:4.6rem;font-size:2.4rem;border-radius:4rem;margin-top:3rem;margin-bottom:.5rem}#contact_details_popup #contact_name{margin:.6rem 1.5rem}#contact_details_popup #contact_name::part(text){font-size:1.2rem;font-weight:500}#contact_details_popup .option .icon{padding:0;width:1.2rem;background:0 0}#warn_no_encryption,.date-card,.group-event-card{padding:.4rem .8rem;font-weight:500;background-color:rgba(var(--text-color),.04);border-radius:.5rem;color:rgba(var(--text-color),.8);margin:1rem 0;justify-self:center;align-self:center;text-align:center}.group-event-card{font-size:.8rem;font-weight:400}#warn_no_encryption{background:#fffd8d;color:#111}.mail-card.unread::before{content:"";position:absolute;padding:.4rem;border-radius:1rem;top:0;left:0;background:var(--accent-color)}.contact .initial::after{content:"";position:absolute;bottom:-.1rem;right:-.1rem;height:1rem;width:1rem;background:var(--accent-color);border-radius:100%;border:rgba(var(--foreground-color),1) solid;transform:scale(0);transition:transform .3s}.mail,.mail-card{position:relative}.contact.unread .initial::after{transform:scale(1)}.contact.unread .time,.mail-card.unread .time{color:var(--accent-color)}.contact.unread h4,.mail-card.unread h4{color:rgba(var(--text-color),1)}.contact.unread h4,.contact.unread h5,.contact.unread p,.mail-card.unread h4,.mail-card.unread h5,.mail-card.unread p{font-weight:700}.mail-card{display:flex;flex-direction:column;padding:1rem 1.5rem}.mail-card .sender{color:rgba(var(--text-color),.9);font-weight:500;overflow:hidden;margin-right:1rem}.mail-card .date{margin-left:auto;font-weight:500;white-space:nowrap}.mail-card .subject{font-size:1em;margin-top:.5rem;font-weight:500}.mail-card .description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;margin-top:.2rem;color:rgba(var(--text-color),.8)}@keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}#mail_container{width:100%}.mail:not(:first-of-type){margin-top:2rem;padding-inline-start:1rem}.mail:not(:first-of-type)::before{content:"";position:absolute;left:0;top:0;width:.2rem;height:100%;background:rgba(var(--text-color),.2)}.mail header{align-self:start;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:solid 1px rgba(var(--text-color),.2)}.mail header h4{font-weight:500}.mail header .flo-id{font-weight:400;max-width:90%}.mail .mail-content,.mail .mail-subject{overflow-wrap:break-word;word-wrap:break-word}.mail .mail-subject{margin-bottom:.4em}.mail .mail-content{height:max-content;max-width:60ch;white-space:pre-wrap}.logo-section{display:grid;grid-template-columns:auto 1fr}.option{display:flex;align-items:center;padding:.8rem 1.5rem;user-select:none}.option .icon{height:1.4rem;width:1.4rem;margin-right:1rem;stroke:rgba(255,255,255,.8)}#main_navbar{position:fixed;flex-direction:column;height:100%;bottom:0;top:0;padding:0;width:max(16rem,60vw);background:rgba(var(--foreground-color),1)}#main_navbar .logo-section{padding:0 1rem}#main_navbar .active{background:var(--accent-color)}#main_navbar .active .icon{stroke:#fff}#main_navbar .active .label{color:#fff}#main_navbar .label{font-weight:500;font-size:.9rem}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem}#main_navbar .navbar-item .icon{margin-right:.8rem;height:1.2rem;width:1.2rem}#main_navbar .navbar-item:last-of-type{margin-top:auto}#main_navbar .navbar-item.badge::after{right:0;top:0;position:absolute;content:attr(data-notifications);display:flex;justify-content:center;align-items:center;padding:.4rem;line-height:0;height:calc(1em + .4rem);background:#00C853;color:rgba(var(--foreground-color),1);border-radius:2rem;transition:transform .3s}#chat_details_panel,#contacts #contacts_container{padding-bottom:1.5rem}#main_navbar .navbar-item.badge.active::after,#main_navbar .navbar-item.badge[data-notifications=""]::after,#main_navbar .navbar-item.badge[data-notifications="0"]::after{transform:scale(0)}#auto_complete_contact{position:relative;justify-content:flex-start;padding-bottom:0}#mail_contact_list{max-height:40vh;overflow-y:auto;position:absolute;top:100%;background:rgba(var(--foreground-color),1);z-index:1;border-radius:.4rem;box-shadow:0 .1rem .1rem rgba(0,0,0,.1),0 .2rem .5rem rgba(0,0,0,.16);width:100%}#mail_contact_list .contact{grid-template-columns:auto 1fr;grid-template-areas:"dp ." "dp ."}#mail_contact_list sm-menu{display:none}#contacts{overflow-x:hidden}#contacts #all_contacts,#contacts #group_creation_panel{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;background:rgba(var(--foreground-color),1)}#contacts #all_contacts .header,#contacts #group_creation_panel .header{padding-top:.7rem}#contacts .scrolling-wrapper{height:100%;flex:1;overflow-y:auto}#contacts .scrolling-wrapper .empty-state{padding:1.5rem;text-align:center}#contacts #contacts_container::before{display:flex;content:"Contacts";font-size:.9em;color:rgba(var(--text-color),.9);padding:1rem 1.5rem}#group_creation_panel .grid{padding:1.5rem;gap:1rem}#group_creation_panel .group-icon{background:var(--accent-color);justify-self:center;height:8rem;width:8rem;margin-bottom:1rem;padding:2rem;border-radius:50%;font-size:4rem}#contacts,#mails{position:relative;grid-template-rows:max-content 1fr}#contacts,#mails,#settings_page{height:100%;overflow-y:hidden}#contacts .header,#mails .header,#settings_page .header{padding:1rem 1.5rem;position:relative;gap:.5rem;min-height:4rem}#contacts .header sm-tab::part(tab),#mails .header sm-tab::part(tab),#settings_page .header sm-tab::part(tab){padding:.8rem 1rem}#contacts .header .expanding-search,#mails .header .expanding-search,#settings_page .header .expanding-search{position:absolute;width:100%;padding:.7rem 1.5rem;background:rgba(var(--foreground-color),1);transform:scale(.9);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}#contacts .header .expanding-search.expand,#mails .header .expanding-search.expand,#settings_page .header .expanding-search.expand{transform:none;opacity:1;pointer-events:all}#contacts .header sm-input,#mails .header sm-input,#settings_page .header sm-input{margin:0;width:100%;--padding:0.5rem 1rem}#contacts .header h4,#mails .header h4,#settings_page .header h4{text-transform:capitalize;font-weight:500}#contacts .header .flex .hamburger-menu-button,#contacts .header .icon,#mails .header .flex .hamburger-menu-button,#mails .header .icon,#settings_page .header .flex .hamburger-menu-button,#settings_page .header .icon{-webkit-tap-highlight-color:transparent;margin-right:1rem}#contacts .header .flex h4,#mails .header .flex h4,#settings_page .header .flex h4{flex:1}#contacts .header .flex .icon,#mails .header .flex .icon,#settings_page .header .flex .icon{height:2.2rem;width:2.2rem;padding:.6rem;margin-left:-.4rem;cursor:pointer}#contacts .header .flex sm-menu,#mails .header .flex sm-menu,#settings_page .header .flex sm-menu{margin-right:-.7rem}#contacts .header sm-button,#mails .header sm-button,#settings_page .header sm-button,#type_message{margin:0}#contacts .header sm-button .icon,#mails .header sm-button .icon,#settings_page .header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_page,#mail_page,#settings_page{align-items:flex-start;width:100%;height:100%}#chat_page{overflow:hidden}#chat_details_panel,#chat_left{position:relative;display:flex;flex-direction:column;height:100%;overflow-y:auto}#chat_details_panel{background:rgba(var(--text-color),.04)}#chat_details_panel .card{margin:0 1rem;padding:1.5rem 1rem;border-radius:.8rem;background:rgba(var(--text-color),.04)}#chat_details_panel .card:not(:last-of-type){margin-bottom:1rem}#chat_details_panel .card .h4{font-weight:400;font-size:.9rem;color:rgba(var(--text-color),.8);margin-bottom:.5rem}#chat_details_panel .card>.flex{margin-bottom:1rem}#chat_details_panel .card>.flex .h4{margin-bottom:0}#chat_details_panel .card .tip{margin-bottom:.5rem}#chat_details_panel .card .danger:not(:last-of-type){margin-bottom:1rem}#chat_details_panel header{position:sticky;top:0;padding:1rem;min-height:4rem;background-color:rgba(var(--foreground-color),.8);z-index:1}#chat_details_panel header .icon{height:2.3rem;width:2.3rem;padding:.7rem;cursor:pointer}#chat_details_panel .contact{padding:.5rem 0}#chat_details_panel #chat_profile{display:grid;place-items:center;margin-top:5.5rem;padding-bottom:1.5rem}#chat_details_panel #chat_profile .initial{margin-top:-5.5rem;margin-bottom:1rem;height:8rem;width:8rem;border-radius:50%;font-size:4rem}#chat_details_panel #chat_profile .initial .icon{height:4rem;width:4rem}#chat_details_panel #chat_profile #chat_name{font-weight:500;font-size:1.2rem}#chat_details_panel #chat_profile #last_interaction_time{color:rgba(var(--text-color),.7);font-size:.9rem;margin-top:.5rem}#new_conversation p,#no_mails p,.message{margin-top:.8rem}#chat_details_panel .copy{font-weight:400}#group_members_list{max-height:50vh;overflow-y:auto}#chat{position:relative;grid-template-columns:1fr}.message{position:relative;display:flex;flex-wrap:wrap;width:auto;font-size:.92rem;max-width:max-content;margin-bottom:.2rem;padding:.6em 1em;transition:opacity .3s,transform .3s cubic-bezier(.175,.885,.32,1.275)}.message .sender-name{font-size:.85rem;font-weight:500;margin-bottom:.3rem}.message .message-body{display:flex;align-items:center;flex-wrap:wrap;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;word-break:break-word;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;white-space:pre-wrap;line-height:1.5}.message .message-body a{color:inherit}.message .message-body .text-emoji{align-self:center;font-size:1.4em;letter-spacing:0}.message .time{white-space:nowrap;font-size:.8em;opacity:.8;justify-self:flex-end;padding-left:1rem;align-self:flex-end;margin-top:.2rem;margin-left:auto}.sent{margin-left:auto;color:#efefef;background:var(--accent-color);border-radius:.8rem 0 .8rem .8rem}#settings_page .bg-preview,.received{background:rgba(var(--text-color),.1)}.sent::after{content:"";position:absolute;left:100%;top:0;width:0;height:0;border-style:solid;border-width:.5em .3em 0 0;border-color:var(--accent-color) transparent transparent}.received{margin-right:auto;border-radius:0 .8rem .8rem}.received::after{content:"";position:absolute;left:-.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color),.1) transparent transparent}.received+.received,.sent+.sent{margin-top:0;border-radius:.8rem}.received+.received::after,.sent+.sent::after{display:none}.distinct-sender{display:grid;border-radius:0 .8rem .8rem!important;margin-top:.8rem!important}.distinct-sender::after{display:flex!important;content:"";position:absolute;left:-.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color),.1) transparent transparent}.unconfirmed{opacity:.7;transform-origin:left;animation:pop .3s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes pop{0%{transform:rotate(5deg) translate(-.5rem,1rem)}100%{transform:rotate(0) translate(0,0)}}#chat_header{padding:0 1rem;min-height:4rem;grid-template-columns:1fr auto}#chat_header .flex{height:100%}#chat_header .back-button{height:2rem;width:2rem;padding:.5rem;stroke-width:8;margin-right:.5rem;stroke:rgba(var(--text-color),.8)}#chat_header .initial{cursor:pointer;margin-right:1rem;height:2.2rem;width:2.2rem;flex-shrink:0}#chat_header #receiver_name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#scroll_to_bottom{position:absolute;display:flex;right:0;bottom:4rem;border-radius:4rem;z-index:1;aspect-ratio:1/1;margin:1.5rem;cursor:pointer;transform:scale(0);transition:transform .3s}#scroll_to_bottom.new-message::after{position:absolute;content:"";top:0;right:0;z-index:2;padding:.5rem;border-radius:50%;background:#00E676}.has-bg-image #chat_details_panel,.has-bg-image .date-card,.has-bg-image .group-event-card,.has-bg-image .received{background:rgba(var(--foreground-color),.8)}#scroll_to_bottom .icon{width:2.6rem;height:2.6rem;padding:.9rem;stroke-width:8}#chat_footer .flex{align-items:flex-end;padding:.5rem 1rem .5rem .5rem}#chat_footer sm-textarea{--padding-right:3rem;--border-radius:0.5rem}#emoji_toggle{align-self:center;padding:.6rem;margin-right:.5rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#emoji_toggle path{fill:rgba(var(--text-color),.5)}#emoji_toggle.active path{fill:var(--accent-color)}#send_message_button{position:absolute;right:1.5rem;transform:scale(0);opacity:0;pointer-events:none;z-index:1;align-self:center;height:2.4rem;width:2.4rem;padding:.5rem;cursor:pointer;stroke:none;fill:rgba(var(--text-color),.4);margin-left:1rem;transition:.3s}#send_message_button.active{opacity:1;fill:var(--accent-color);transform:none;pointer-events:all}.big-emoji{flex-direction:column}.big-emoji .message-body{justify-content:center;font-size:2.6rem}.big-emoji .text-emoji{font-size:2.6rem!important}#chat_middle{flex:1;padding:0 1rem}#emoji_picker{--background:rgba(var(--text-color), 0.06);--border-size:0;--input-border-color:rgba(var(--text-color), 0.6);--input-padding:0.4rem 1rem;--outline-color:var(--accent-color);--input-font-color:var(--text-color);--input-placeholder-color:rgba(var(--text-color), 0.6);--indicator-color:var(--accent-color);--button-hover-background:rgba(var(--text-color), 0.2);user-select:none;width:100%;max-height:40vh}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;user-select:none;text-align:center}#new_conversation,#no_mails{height:100%;justify-content:center;text-align:center;padding:1.5rem}#no_mails .new-conversation{height:7rem;margin-bottom:1rem}.new-conversation{height:8rem;width:8rem;align-self:center;stroke-width:16;stroke:rgba(var(--text-color),.4)}#chat_container,#chat_middle,#inbox_mail_container,#mail,#sent_mail_container{width:100%;flex-direction:column;height:100%;overflow-y:auto}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#chat_container{padding-bottom:6rem}#call_controls,#contacts_popup .popup-header{padding:1.5rem}#contacts_popup{--body-padding:0}#contacts_popup .warning{padding:.5rem 1.5rem}sm-tab-panels{overflow:hidden auto}sm-panel{width:100%;overflow-y:auto}#inbox_mail_container,#sent_mail_container{padding-bottom:6rem}.has-bg-image .received::after{border-color:transparent rgba(var(--foreground-color),.6) transparent transparent}.has-bg-image #emoji_picker{--background:rgba(var(--foreground-color), 0.6)}.has-bg-image #emoji_toggle path{fill:rgba(var(--text-color),.8)}.has-bg-image sm-textarea{--background:rgba(var(--foreground-color), 0.6)}#mail{height:100vh;padding:0 1.5rem;align-items:flex-start}#mail .flex sm-button:first-of-type{margin-right:.5rem}#compose_mail_popup sm-input{margin-bottom:1rem}.sidebar-item{display:flex;align-items:center;padding:1rem 1.5rem;text-transform:capitalize;font-weight:500;opacity:.9}.sidebar-item .icon{margin-right:1em;width:1em}.back{padding:.7rem;height:2.4rem;width:2.4rem;margin-left:-.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page #settings_sidebar header{padding:1rem 1.5rem}#settings_page .flex sm-button{margin:0;margin-left:1rem}#settings_page sm-switch{padding:1rem 1.5rem;display:flex;margin-bottom:1rem;width:min(60ch,100%)}#settings_page sm-switch .flex{margin-right:1rem}#settings_page sm-switch h4{margin-bottom:.5rem}#settings_page sm-button{width:100%}#settings_page #settings_title{text-transform:capitalize}#settings_page #settings_sidebar{height:100%}#settings_page #settings_panel{overflow-y:auto;height:100%}#settings_page section{padding:1rem 1.5rem;width:min(60ch,100%);display:grid;gap:.3rem}#settings_page section sm-button{margin-top:.5rem;margin-bottom:0}#settings_page section:not(:last-of-type){margin-bottom:1rem}#settings_page #sign_out::part(button){color:var(--error-color)}#settings_page color-grid{margin:.5rem 0 1.5rem;width:min(60ch,100%)}#settings_page #chat_preview{margin-top:1rem;padding:1rem;border-radius:.5rem}#settings_page #bg_preview_container{padding:1rem 0;gap:.5rem;flex-wrap:wrap}#settings_page .bg-preview{position:relative;display:grid;place-items:center;height:8rem;width:8rem;cursor:pointer;border-radius:1rem;overflow:hidden}#settings_page .bg-preview--selected::after{content:"";position:absolute;height:100%;width:100%;box-shadow:0 0 0 .5rem rgba(var(--text-color),.8) inset}#settings_page .bg-preview__image{object-fit:cover;height:100%;width:100%}#video_call_page{position:relative;display:grid}#video_call_page video{position:fixed;object-fit:cover;object-position:center}#their_video{height:100%}#my_video{width:max(20vh,12rem);bottom:0;right:0;border-radius:1rem;border:solid;margin:1.5rem}#call_controls{margin-top:auto;justify-self:center}#pick_up_call{color:#00C853}.circular-button{align-items:center;--padding:0;--border-radius:50%}.circular-button .filled{height:3rem;width:3rem;padding:1rem}@media screen and (max-width:640px){sm-popup{--border-radius:1rem 1rem 0 0}.hide-on-mobile{position:fixed;max-height:0;opacity:0;pointer-events:none}#landing{grid-template-areas:"illustration" ".";align-items:flex-start}#landing .title-font{text-align:center;font-size:2rem;font-weight:500}#landing .left p{text-align:center}#landing sm-button{display:flex;width:100%!important}#landing_illustration{grid-area:illustration}#sign_in form,.frame form{height:100%}#sign_in .h2,.frame .h2{margin-top:3rem}#sign_in sm-button[variant=primary],.frame sm-button[variant=primary]{margin-top:auto}#main_navbar{transform:translateX(-110%);transition:transform .3s;z-index:4;box-shadow:0 0 1rem rgba(0,0,0,.3)}#main_navbar .logo-section{padding:1rem}#navbar_backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.3);z-index:2;transition:transform .3s,opacity .3s}#chat_container,#contact_container{gap:.2rem}#chat .message{width:auto;max-width:90%}#chat_header{grid-template-columns:auto 1fr auto}#settings_page{overflow-x:hidden}#settings_page #settings_header{position:sticky;top:0;z-index:1;padding:1rem 1.5rem;margin-bottom:.5rem;background:rgba(var(--foreground-color),1)}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}.page{padding-bottom:0}.popup-header{padding-top:1.5rem}.fab{position:absolute}.logo-section{padding:2rem 3rem 0;margin:.5rem 0}sm-popup{--width:24rem;--min-width:24rem;--border-radius:0.5rem}#landing{align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#landing .left h4{color:var(--accent-color)}#sign_in_page{place-content:center}#sign_in{width:24rem}.frame{justify-content:center}#main_navbar{position:relative;width:auto;padding-bottom:.5rem;background:rgba(var(--text-color),.06)}#main_navbar .logo-section{display:flex;justify-content:center;margin:1.5rem 0 2rem}#main_navbar .logo-section .main-logo{margin:0}#main_navbar .navbar-item{margin:0 .5rem;border-radius:.8rem}#main_navbar .navbar-item .icon{margin-right:0}#main_navbar .label{display:none}#add_contact_popup{--min-width:24rem}#compose_mail_popup,#reply_mail_popup{--min-width:36rem}#main_page{grid-template-columns:auto 1fr}#emoji_picker{max-height:18rem}#chat .message{width:auto;align-self:flex-start;max-width:55ch}#chat_page,#mail_page{grid-template-columns:20rem 1fr}#settings_page{display:grid;height:100vh;grid-template-columns:14rem 1fr}#settings_page sm-button{width:max-content}#settings_page .active{background:rgba(var(--text-color),.1)}#settings_page .panel>:first-of-type{margin-top:.5rem}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}}@media only screen and (max-width:1280px){.hide-on-medium{display:none!important}}@media only screen and (min-width:1080px){#chat #messages_container{padding:1rem 4rem}}@media only screen and (min-width:1280px){#landing{gap:4vw;padding:0 8vw}#landing .title-font{font-size:3rem}#chat_page,#mail_page{grid-template-columns:21rem 1fr}#chat_details_panel{position:relative}#chat.expand-side-panel{grid-template-columns:1fr 24rem}#chat.expand-side-panel #messages_container{padding:1rem}#emoji_picker{--num-columns:16}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}}@media (hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.contact:hover,.emoji:hover,.navbar-item:hover,.option:hover{cursor:pointer;background:rgba(var(--text-color),.06)}.contact .menu{opacity:0;transition:opacity .3s}.contact:hover .menu{opacity:1}}@media (hover:none){.contact,.contact-preview,.icon,.option{-webkit-tap-highlight-color:transparent}.contact .menu{display:none}}
\ No newline at end of file
+#landing_page,body,body #scroll_to_bottom{background:rgba(var(--foreground-color),1)}p,textarea{line-height:1.6}.contact .last-message,.contact .name,.copy-row .copy,.mail-card .sender,.text-overflow{white-space:nowrap;text-overflow:ellipsis}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{scroll-behavior:smooth;font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%}body{--accent-color:#3D5AFE;--secondary-color:#ffac2e;--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#efefef;--error-color:red;color:rgba(var(--text-color),1)}body #scroll_to_bottom{box-shadow:0 .3rem .4rem rgba(0,0,0,.2)}body[data-theme=dark]{--accent-color:#3D5AFE;--secondary-color:#d60739;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--error-color:rgb(255, 106, 106)}body[data-theme=dark] .initial{color:rgba(var(--text-color),1)!important;box-shadow:0 .1rem .1rem rgba(0,0,0,.16)}body[data-theme=dark] .message,h1,h2,h3,h4,h5,textarea{color:rgba(var(--text-color),1)}body[data-theme=dark] #scroll_to_bottom{background:linear-gradient(rgba(var(--text-color),.1),rgba(var(--text-color),.1)),rgba(var(--foreground-color),1);box-shadow:0 .4rem .4rem rgba(0,0,0,.3)}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.1rem}h5{font-size:.8rem}h1,h2,h3,h4,h5{font-weight:600}textarea{background:rgba(var(--text-color),.06);border:none;border-radius:.3rem;width:100%;padding:1rem;font-size:1rem;resize:none}.ripple,.shadow{border-radius:50%}.fab .icon,.icon{height:1.2rem;width:1.2rem}textarea:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}strong{font-weight:500}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}.justify-right{margin-left:auto}.direction-column{flex-direction:column}.rest{flex:1}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.breakable{overflow-wrap:break-word}.text-overflow{overflow:hidden}.sticky{position:sticky;top:1rem}.light-text{color:rgba(var(--text-color-light),1)}.accent-color{color:var(--accent-color)}.secondary-color{color:var(--secondary-color)}.fab{filter:drop-shadow(0 .4rem .3rem rgba(0, 0, 0, .2));margin:1.5rem;position:fixed;right:0;bottom:0;z-index:1;--padding:0.9rem 1.6rem}.ripple,.tick{position:absolute}.fab .icon{margin-left:0!important;margin-right:.5rem;stroke-width:8;stroke:#fff}a:any-link{word-wrap:break-word;color:var(--accent-color);font-weight:500}.solid-background{background:var(--background-color)!important}.normal-weight{font-weight:400}.warning{display:flex;background:wheat;color:#111}.icon{fill:none;stroke-width:6;stroke:rgba(var(--text-color),1);overflow:visible;stroke-linecap:round;stroke-linejoin:round}.ripple{transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}#landing_illustration,.contact,.initial,.interact,.logo-section{position:relative}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}sm-input{--border-radius:0.5rem}sm-popup sm-input+sm-input{margin-top:1rem}.popup-header{padding:.5rem 1.5rem 0;display:flex;align-items:center;width:100%}.popup-header .icon{padding:.7rem;height:2.4rem;width:2.4rem;stroke-width:8;transform:translateX(-.5rem);cursor:pointer;-webkit-tap-highlight-color:transparent}.popup-header .back{transform:none}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}.copy-row h4{margin-bottom:0!important}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.page{align-items:flex-start;width:100%;height:100%}.card{display:flex;flex-direction:column;margin:1rem 0}.tip{font-size:.9rem;color:rgba(var(--text-color),.8)}sm-button[variant=primary]{--foreground-color:255,255,255}.danger{color:var(--error-color)}.logo-section{align-items:center;height:max-content;margin:.5rem 0}.logo-section h5{font-size:1.1rem!important;font-weight:500}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color),1);stroke:none}.logo-section img{width:2rem;margin-right:.5rem}.select-file input[type=file]{display:none}#landing{display:grid;border-radius:.6rem;width:100%;padding:0 1.5rem;height:100%;align-items:center;overflow-y:auto}#landing .logo-section,#sign_in,.frame,.logo-section{padding:1.5rem}#landing .logo-section{display:flex}#landing .title-font{line-height:1.2;font-weight:700;font-size:2.5rem}#frame_1 h4,#frame_1 h5,#landing .left h3,#landing .left h4,#sign_in h2,#sign_in h4,#sign_in h5,.contact .name,.frame .h2,.initial{font-weight:500}#landing .left{display:grid;flex-direction:column;padding-bottom:1.5rem;z-index:1}#landing .left h4{color:rgba(var(--foreground-color),1)}#landing .left p,.contact .last-message,.contact .name{color:rgba(var(--text-color),.8)}#landing .left sm-button{margin:1.5rem 0 2rem;width:max-content}#landing .left p,#mail .flex,#sign_in #remove_account{margin-top:1rem}#landing .left h3{margin-bottom:1rem}#landing .left p{font-size:1.1rem}#landing .left .flex sm-button:first-of-type{margin-right:1rem}#landing_illustration{width:100%}#sign_in{width:100%;height:100%;align-items:flex-start}#sign_in .flex{width:100%;flex:1}#sign_in sm-input{margin:1.5rem 0}#sign_in h2{margin-top:2rem}#sign_in h4{margin-bottom:1.5rem}#sign_in h5{opacity:.8}#sign_in pin-input{margin:1rem 0 2rem}#sign_in sm-button{width:100%;--padding:0.8rem 1.6rem}#sign_in p{margin-bottom:.5rem;max-width:35ch;margin-top:.5rem}.frame{height:100%;display:flex;flex-direction:column;width:min(24rem,100%);justify-self:center}.frame .h2{margin-bottom:1rem}.frame sm-button[variant=primary]{margin-top:1.5rem}#frame_1 .warning{margin:1rem 0;padding:1rem;border-radius:.5rem}#frame_1 #generate_flo_id{width:100%}#frame_1 #credentials_section{animation:slide-down .3s cubic-bezier(.175,.885,.32,1.275);margin:2rem 0}#frame_1 .copy-row:not(:last-of-type){margin-bottom:1.5rem}#frame_2 pin-input{margin:1rem 0}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading_page{height:100%;display:grid;place-content:center;justify-items:center}.page__loader{z-index:1;transform-origin:bottom;height:6rem;width:6rem;animation:bounce .5s infinite alternate ease-in}.shadow{margin-top:-1rem;width:5rem;height:2rem;background:rgba(var(--text-color),.1);animation:scale .5s infinite alternate ease-in;margin-left:1rem}.page__tag-line{margin-top:2rem}@keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(.8)}}@keyframes scale{0%{transform:scale(.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}#main_page{width:100%;height:100%}.initial{justify-content:center;font-size:1.2rem;width:2.8rem;height:2.8rem;aspect-ratio:1/1;color:#fff;box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase;user-select:none}.filled{fill:rgba(var(--text-color),.7);stroke:none!important}.group-icon{height:1.6rem;width:1.6rem;fill:#fff;stroke:none}.contact{display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;user-select:none;overflow:hidden}.contact:not(.chat){grid-template-columns:auto 1fr;grid-template-areas:"dp ."}.contact.admin,.contact.chat,.contact.group{grid-template-columns:auto 1fr auto}.contact.chat,.contact.group{grid-template-areas:"dp . time" "dp . menu"}.contact.selected{background-color:rgba(var(--text-color),.06)}.contact .initial{grid-area:dp}.contact .name{width:100%;font-size:1em;overflow:hidden}.contact .last-message{overflow:hidden;font-weight:400;font-size:.9em}.contact .menu{grid-area:menu;justify-self:flex-end;padding:.2rem;fill:rgba(var(--text-color),1)}.contact .time{font-weight:500;color:rgba(var(--text-color),.7);grid-area:time}.contact .admin-tag{padding:.1rem .6rem;font-size:.8rem;border:var(--accent-color) solid thin;border-radius:3rem}.tick{bottom:-.2rem;right:-.2rem;height:1.2rem;width:1.2rem}.tick .icon{height:100%;width:100%;padding:.4rem;stroke-width:16;border-radius:1rem;background:rgba(var(--text-color),1);stroke:rgba(var(--foreground-color),.8)}#selected_contacts{padding:1rem 1.5rem}#selected_contacts h4{font-weight:500;font-size:1rem}#selected_contacts .warning{font-size:.9rem;padding:.5rem .8rem;border-radius:.5rem;margin:1rem 0;line-height:1.5}#selected_contacts sm-button{margin-bottom:0}#selected_contacts_container{display:flex;overflow:auto hidden}#selected_contacts_container:not(:empty){margin-top:1.5rem}#selected_contacts_container .contact-preview{display:flex;flex-shrink:0;align-items:center;cursor:pointer;margin-right:.5rem;background:rgba(var(--text-color),.1);padding:.4rem .5rem;border-radius:2rem}#selected_contacts_container .contact-preview .initial{width:1.6rem;height:1.6rem;font-size:.9rem}#selected_contacts_container .contact-preview .name{font-size:.9rem;color:rgba(var(--text-color),.8);margin-left:.5rem}#selected_contacts_container .contact-preview .tick{position:relative;bottom:auto;right:auto;margin-left:.5rem}#contact_details_popup{--body-padding:0 0 1.5rem 0}#contact_details_popup .popup-section{margin:1.5rem}#contact_details_popup h5{font-weight:500;opacity:.8}#contact_details_popup .copy-row h4{font-weight:400}#contact_details_popup .group-icon{padding:.2rem!important;height:3rem;width:3rem}#contact_details_popup #contact_initial{height:4.6rem;width:4.6rem;font-size:2.4rem;border-radius:4rem;margin-top:3rem;margin-bottom:.5rem}#contact_details_popup #contact_name{margin:.6rem 1.5rem}#contact_details_popup #contact_name::part(text){font-size:1.2rem;font-weight:500}#contact_details_popup .option .icon{padding:0;width:1.2rem;background:0 0}#warn_no_encryption,.date-card,.group-event-card{padding:.4rem .8rem;font-weight:500;background-color:rgba(var(--text-color),.04);border-radius:.5rem;color:rgba(var(--text-color),.8);margin:1rem 0;justify-self:center;align-self:center;text-align:center}.group-event-card{font-size:.8rem;font-weight:400}#warn_no_encryption{background:#fffd8d;color:#111}.mail-card.unread::before{content:"";position:absolute;padding:.4rem;border-radius:1rem;top:0;left:0;background:var(--accent-color)}.contact .initial::after{content:"";position:absolute;bottom:-.1rem;right:-.1rem;height:1rem;width:1rem;background:var(--accent-color);border-radius:100%;border:rgba(var(--foreground-color),1) solid;transform:scale(0);transition:transform .3s}.mail,.mail-card{position:relative}.contact.unread .initial::after{transform:scale(1)}.contact.unread .time,.mail-card.unread .time{color:var(--accent-color)}.contact.unread h4,.mail-card.unread h4{color:rgba(var(--text-color),1)}.contact.unread h4,.contact.unread h5,.contact.unread p,.mail-card.unread h4,.mail-card.unread h5,.mail-card.unread p{font-weight:700}.mail-card{display:flex;flex-direction:column;padding:1rem 1.5rem}.mail-card .sender{color:rgba(var(--text-color),.9);font-weight:500;overflow:hidden;margin-right:1rem}.mail-card .date{margin-left:auto;font-weight:500;white-space:nowrap}.mail-card .subject{font-size:1em;margin-top:.5rem;font-weight:500}.mail-card .description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;margin-top:.2rem;color:rgba(var(--text-color),.8)}@keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}#mail_container{width:100%}.mail:not(:first-of-type){margin-top:2rem;padding-inline-start:1rem}.mail:not(:first-of-type)::before{content:"";position:absolute;left:0;top:0;width:.2rem;height:100%;background:rgba(var(--text-color),.2)}.mail header{align-self:start;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:solid 1px rgba(var(--text-color),.2)}.mail header h4{font-weight:500}.mail header .flo-id{font-weight:400;max-width:90%}.mail .mail-content,.mail .mail-subject{overflow-wrap:break-word;word-wrap:break-word}.mail .mail-subject{margin-bottom:.4em}.mail .mail-content{height:max-content;max-width:60ch;white-space:pre-wrap}.logo-section{display:grid;grid-template-columns:auto 1fr}.option{display:flex;align-items:center;padding:.8rem 1.5rem;user-select:none}.option .icon{height:1.4rem;width:1.4rem;margin-right:1rem;stroke:rgba(255,255,255,.8)}#main_navbar{position:fixed;flex-direction:column;height:100%;bottom:0;top:0;padding:0;width:max(16rem,60vw);background:rgba(var(--foreground-color),1)}#main_navbar .logo-section{padding:0 1rem}#main_navbar .active{background:var(--accent-color)}#main_navbar .active .icon{stroke:#fff}#main_navbar .active .label{color:#fff}#main_navbar .label{font-weight:500;font-size:.9rem}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem}#main_navbar .navbar-item .icon{margin-right:.8rem;height:1.2rem;width:1.2rem}#main_navbar .navbar-item:last-of-type{margin-top:auto}#main_navbar .navbar-item.badge::after{right:0;top:0;position:absolute;content:attr(data-notifications);display:flex;justify-content:center;align-items:center;padding:.4rem;line-height:0;height:calc(1em + .4rem);background:#00C853;color:rgba(var(--foreground-color),1);border-radius:2rem;transition:transform .3s}#chat_details_panel,#contacts #contacts_container{padding-bottom:1.5rem}#main_navbar .navbar-item.badge.active::after,#main_navbar .navbar-item.badge[data-notifications=""]::after,#main_navbar .navbar-item.badge[data-notifications="0"]::after{transform:scale(0)}#auto_complete_contact{position:relative;justify-content:flex-start;padding-bottom:0}#mail_contact_list{max-height:40vh;overflow-y:auto;position:absolute;top:100%;background:rgba(var(--foreground-color),1);z-index:1;border-radius:.4rem;box-shadow:0 .1rem .1rem rgba(0,0,0,.1),0 .2rem .5rem rgba(0,0,0,.16);width:100%}#mail_contact_list .contact{grid-template-columns:auto 1fr;grid-template-areas:"dp ." "dp ."}#mail_contact_list sm-menu{display:none}#contacts{overflow-x:hidden}#contacts #all_contacts,#contacts #group_creation_panel{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;background:rgba(var(--foreground-color),1)}#contacts #all_contacts .header,#contacts #group_creation_panel .header{padding-top:.7rem}#contacts .scrolling-wrapper{height:100%;flex:1;overflow-y:auto}#contacts .scrolling-wrapper .empty-state{padding:1.5rem;text-align:center}#contacts #contacts_container::before{display:flex;content:"Contacts";font-size:.9em;color:rgba(var(--text-color),.9);padding:1rem 1.5rem}#group_creation_panel .grid{padding:1.5rem;gap:1rem}#group_creation_panel .group-icon{background:var(--accent-color);justify-self:center;height:8rem;width:8rem;margin-bottom:1rem;padding:2rem;border-radius:50%;font-size:4rem}#contacts,#mails{position:relative;grid-template-rows:max-content 1fr}#contacts,#mails,#settings_page{height:100%;overflow-y:hidden}#contacts .header,#mails .header,#settings_page .header{padding:1rem 1.5rem;position:relative;gap:.5rem;min-height:4rem}#contacts .header sm-tab::part(tab),#mails .header sm-tab::part(tab),#settings_page .header sm-tab::part(tab){padding:.8rem 1rem}#contacts .header .expanding-search,#mails .header .expanding-search,#settings_page .header .expanding-search{position:absolute;width:100%;padding:.7rem 1.5rem;background:rgba(var(--foreground-color),1);transform:scale(.9);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}#contacts .header .expanding-search.expand,#mails .header .expanding-search.expand,#settings_page .header .expanding-search.expand{transform:none;opacity:1;pointer-events:all}#contacts .header sm-input,#mails .header sm-input,#settings_page .header sm-input{margin:0;width:100%;--padding:0.5rem 1rem}#contacts .header h4,#mails .header h4,#settings_page .header h4{text-transform:capitalize;font-weight:500}#contacts .header .flex .hamburger-menu-button,#contacts .header .icon,#mails .header .flex .hamburger-menu-button,#mails .header .icon,#settings_page .header .flex .hamburger-menu-button,#settings_page .header .icon{-webkit-tap-highlight-color:transparent;margin-right:1rem}#contacts .header .flex h4,#mails .header .flex h4,#settings_page .header .flex h4{flex:1}#contacts .header .flex .icon,#mails .header .flex .icon,#settings_page .header .flex .icon{height:2.2rem;width:2.2rem;padding:.6rem;margin-left:-.4rem;cursor:pointer}#contacts .header .flex sm-menu,#mails .header .flex sm-menu,#settings_page .header .flex sm-menu{margin-right:-.7rem}#contacts .header sm-button,#mails .header sm-button,#settings_page .header sm-button,#type_message{margin:0}#contacts .header sm-button .icon,#mails .header sm-button .icon,#settings_page .header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_page,#mail_page,#settings_page{align-items:flex-start;width:100%;height:100%}#chat_page{overflow:hidden}#chat_details_panel,#chat_left{position:relative;display:flex;flex-direction:column;height:100%;overflow-y:auto}#chat_details_panel{background:rgba(var(--text-color),.04)}#chat_details_panel .card{margin:0 1rem;padding:1.5rem 1rem;border-radius:.8rem;background:rgba(var(--text-color),.04)}#chat_details_panel .card:not(:last-of-type){margin-bottom:1rem}#chat_details_panel .card .h4{font-weight:400;font-size:.9rem;color:rgba(var(--text-color),.8);margin-bottom:.5rem}#chat_details_panel .card>.flex{margin-bottom:1rem}#chat_details_panel .card>.flex .h4{margin-bottom:0}#chat_details_panel .card .tip{margin-bottom:.5rem}#chat_details_panel .card .danger:not(:last-of-type){margin-bottom:1rem}#chat_details_panel header{position:sticky;top:0;padding:1rem;min-height:4rem;background-color:rgba(var(--foreground-color),.8);z-index:1}#chat_details_panel header .icon{height:2.3rem;width:2.3rem;padding:.7rem;cursor:pointer}#chat_details_panel .contact{padding:.5rem 0}#chat_details_panel #chat_profile{display:grid;place-items:center;margin-top:5.5rem;padding-bottom:1.5rem}#chat_details_panel #chat_profile .initial{margin-top:-5.5rem;margin-bottom:1rem;height:8rem;width:8rem;border-radius:50%;font-size:4rem}#chat_details_panel #chat_profile .initial .icon{height:4rem;width:4rem}#chat_details_panel #chat_profile #chat_name{font-weight:500;font-size:1.2rem}#chat_details_panel #chat_profile #last_interaction_time{color:rgba(var(--text-color),.7);font-size:.9rem;margin-top:.5rem}#new_conversation p,#no_mails p,.message{margin-top:.8rem}#chat_details_panel .copy{font-weight:400}#group_members_list{max-height:50vh;overflow-y:auto}#chat{position:relative;grid-template-columns:1fr}.message{position:relative;display:flex;flex-wrap:wrap;width:auto;font-size:.92rem;max-width:max-content;margin-bottom:.2rem;padding:.6em 1em;transition:opacity .3s,transform .3s cubic-bezier(.175,.885,.32,1.275)}.message .sender-name{font-size:.85rem;font-weight:500;margin-bottom:.3rem}.message .message-body{display:flex;align-items:center;flex-wrap:wrap;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;word-break:break-word;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;white-space:pre-wrap;line-height:1.5}.message .message-body a{color:inherit}.message .message-body .text-emoji{align-self:center;font-size:1.4em;letter-spacing:0}.message .time{white-space:nowrap;font-size:.8em;opacity:.8;justify-self:flex-end;padding-left:1rem;align-self:flex-end;margin-top:.2rem;margin-left:auto}.sent{margin-left:auto;color:#efefef;background:var(--accent-color);border-radius:.8rem 0 .8rem .8rem}#settings_page .bg-preview,.received{background:rgba(var(--text-color),.1)}.sent::after{content:"";position:absolute;left:100%;top:0;width:0;height:0;border-style:solid;border-width:.5em .3em 0 0;border-color:var(--accent-color) transparent transparent}.received{margin-right:auto;border-radius:0 .8rem .8rem}.received::after{content:"";position:absolute;left:-.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color),.1) transparent transparent}.received+.received,.sent+.sent{margin-top:0;border-radius:.8rem}.received+.received::after,.sent+.sent::after{display:none}.distinct-sender{display:grid;border-radius:0 .8rem .8rem!important;margin-top:.8rem!important}.distinct-sender::after{display:flex!important;content:"";position:absolute;left:-.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color),.1) transparent transparent}.unconfirmed{opacity:.7;transform-origin:left;animation:pop .3s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes pop{0%{transform:rotate(5deg) translate(-.5rem,1rem)}100%{transform:rotate(0) translate(0,0)}}#chat_header{padding:0 1rem;min-height:4rem;grid-template-columns:1fr auto}#chat_header .flex{height:100%}#chat_header .back-button{height:2rem;width:2rem;padding:.5rem;stroke-width:8;margin-right:.5rem;stroke:rgba(var(--text-color),.8)}#chat_header .initial{cursor:pointer;margin-right:1rem;height:2.2rem;width:2.2rem;flex-shrink:0}#chat_header #receiver_name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#scroll_to_bottom{position:absolute;display:flex;right:0;bottom:4rem;border-radius:4rem;z-index:1;aspect-ratio:1/1;margin:1.5rem;cursor:pointer;transform:scale(0);transition:transform .3s}#scroll_to_bottom.new-message::after{position:absolute;content:"";top:0;right:0;z-index:2;padding:.5rem;border-radius:50%;background:#00E676}.has-bg-image #chat_details_panel,.has-bg-image .date-card,.has-bg-image .group-event-card,.has-bg-image .received{background:rgba(var(--foreground-color),.8)}#scroll_to_bottom .icon{width:2.6rem;height:2.6rem;padding:.9rem;stroke-width:8}#chat_footer .flex{align-items:flex-end;padding:.5rem 1rem .5rem .5rem}#chat_footer sm-textarea{--padding-right:3rem;--border-radius:0.5rem}#emoji_toggle{align-self:center;padding:.6rem;margin-right:.5rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#emoji_toggle path{fill:rgba(var(--text-color),.5)}#emoji_toggle.active path{fill:var(--accent-color)}#send_message_button{position:absolute;right:1.5rem;transform:scale(0);opacity:0;pointer-events:none;z-index:1;align-self:center;height:2.4rem;width:2.4rem;padding:.5rem;cursor:pointer;stroke:none;fill:rgba(var(--text-color),.4);margin-left:1rem;transition:.3s}#send_message_button.active{opacity:1;fill:var(--accent-color);transform:none;pointer-events:all}.big-emoji{flex-direction:column}.big-emoji .message-body{justify-content:center;font-size:2.6rem}.big-emoji .text-emoji{font-size:2.6rem!important}#chat_middle{flex:1;padding:0 1rem}#emoji_picker{--background:rgba(var(--text-color), 0.06);--border-size:0;--input-border-color:rgba(var(--text-color), 0.6);--input-padding:0.4rem 1rem;--outline-color:var(--accent-color);--input-font-color:var(--text-color);--input-placeholder-color:rgba(var(--text-color), 0.6);--indicator-color:var(--accent-color);--button-hover-background:rgba(var(--text-color), 0.2);user-select:none;width:100%;max-height:40vh}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;user-select:none;text-align:center}#new_conversation,#no_mails{height:100%;justify-content:center;text-align:center;padding:1.5rem}#no_mails .new-conversation{height:7rem;margin-bottom:1rem}.new-conversation{height:8rem;width:8rem;align-self:center;stroke-width:16;stroke:rgba(var(--text-color),.4)}#chat_container,#chat_middle,#inbox_mail_container,#mail,#sent_mail_container{width:100%;flex-direction:column;height:100%;overflow-y:auto}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#chat_container{padding-bottom:6rem}#call_controls,#contacts_popup .popup-header{padding:1.5rem}#contacts_popup{--body-padding:0}#contacts_popup .warning{padding:.5rem 1.5rem}sm-tab-panels{overflow:hidden auto}sm-panel{width:100%;overflow-y:auto}#inbox_mail_container,#sent_mail_container{padding-bottom:6rem}.has-bg-image .received::after{border-color:transparent rgba(var(--foreground-color),.6) transparent transparent}.has-bg-image #emoji_picker{--background:rgba(var(--foreground-color), 0.6)}.has-bg-image #emoji_toggle path{fill:rgba(var(--text-color),.8)}.has-bg-image sm-textarea{--background:rgba(var(--foreground-color), 0.6)}#mail{height:100vh;padding:0 1.5rem;align-items:flex-start}#mail .flex sm-button:first-of-type{margin-right:.5rem}#compose_mail_popup sm-input{margin-bottom:1rem}.sidebar-item{display:flex;align-items:center;padding:1rem 1.5rem;text-transform:capitalize;font-weight:500;opacity:.9}.sidebar-item .icon{margin-right:1em;width:1em}.back{padding:.7rem;height:2.4rem;width:2.4rem;margin-left:-.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page #settings_sidebar header{padding:1rem 1.5rem}#settings_page .flex sm-button{margin:0;margin-left:1rem}#settings_page sm-switch{padding:1rem 1.5rem;display:flex;margin-bottom:1rem;width:min(60ch,100%)}#settings_page sm-switch .flex{margin-right:1rem}#settings_page sm-switch h4{margin-bottom:.5rem}#settings_page sm-button{width:100%}#settings_page #settings_title{text-transform:capitalize}#settings_page #settings_sidebar{height:100%}#settings_page #settings_panel{overflow-y:auto;height:100%}#settings_page section{padding:1rem 1.5rem;width:min(60ch,100%);display:grid;gap:.3rem}#settings_page section sm-button{margin-top:.5rem;margin-bottom:0}#settings_page section:not(:last-of-type){margin-bottom:1rem}#settings_page #sign_out::part(button){color:var(--error-color)}#settings_page color-grid{margin:.5rem 0 1.5rem;width:min(60ch,100%)}#settings_page #chat_preview{margin-top:1rem;padding:1rem;border-radius:.5rem}#settings_page #bg_preview_container{padding:1rem 0;gap:.5rem;flex-wrap:wrap}#settings_page .bg-preview{position:relative;display:grid;place-items:center;height:8rem;width:8rem;cursor:pointer;border-radius:1rem;overflow:hidden}#settings_page .bg-preview--selected::after{content:"";position:absolute;height:100%;width:100%;box-shadow:0 0 0 .5rem rgba(var(--text-color),.8) inset}#settings_page .bg-preview__image{object-fit:cover;height:100%;width:100%}#video_call_page{position:relative;display:grid}#video_call_page video{position:fixed;object-fit:cover;object-position:center}#their_video{height:100%}#my_video{width:max(20vh,12rem);bottom:0;right:0;border-radius:1rem;border:solid;margin:1.5rem}#call_controls{margin-top:auto;justify-self:center}#pick_up_call{color:#00C853}.circular-button{align-items:center;--padding:0;--border-radius:50%}.circular-button .filled{height:3rem;width:3rem;padding:1rem}@media screen and (max-width:640px){sm-popup{--border-radius:1rem 1rem 0 0}.hide-on-mobile{position:fixed;max-height:0;opacity:0;pointer-events:none}#landing{grid-template-areas:"illustration" ".";align-items:flex-start}#landing .title-font{text-align:center;font-size:2rem;font-weight:500}#landing .left p{text-align:center}#landing sm-button{display:flex;width:100%!important}#landing_illustration{grid-area:illustration}#sign_in form,.frame form{height:100%}#sign_in .h2,.frame .h2{margin-top:3rem}#sign_in sm-button[variant=primary],.frame sm-button[variant=primary]{margin-top:auto}#main_navbar{transform:translateX(-110%);transition:transform .3s;z-index:4;box-shadow:0 0 1rem rgba(0,0,0,.3)}#main_navbar .logo-section{padding:1rem}#navbar_backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.3);z-index:2;transition:transform .3s,opacity .3s}#chat_container,#contact_container{gap:.2rem}#chat .message{width:auto;max-width:90%}#chat_header{grid-template-columns:auto 1fr auto}#settings_page{overflow-x:hidden}#settings_page #settings_header{position:sticky;top:0;z-index:1;padding:1rem 1.5rem;margin-bottom:.5rem;background:rgba(var(--foreground-color),1)}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}.page{padding-bottom:0}.popup-header{padding-top:1.5rem}.fab{position:absolute}.logo-section{padding:2rem 3rem 0;margin:.5rem 0}sm-popup{--width:24rem;--min-width:24rem;--border-radius:0.5rem}#landing{align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#landing .left h4{color:var(--accent-color)}#sign_in_page{place-content:center}#sign_in{width:24rem}.frame{justify-content:center}#main_navbar{position:relative;width:auto;padding-bottom:.5rem;background:rgba(var(--text-color),.06)}#main_navbar .logo-section{display:flex;justify-content:center;margin:1.5rem 0 2rem}#main_navbar .logo-section .main-logo{margin:0}#main_navbar .navbar-item{margin:0 .5rem;border-radius:.8rem}#main_navbar .navbar-item .icon{margin-right:0}#main_navbar .label{display:none}#add_contact_popup{--min-width:24rem}#compose_mail_popup,#reply_mail_popup{--min-width:36rem}#main_page{grid-template-columns:auto 1fr}#emoji_picker{max-height:18rem}#chat .message{width:auto;align-self:flex-start;max-width:55ch}#chat_page,#mail_page{grid-template-columns:20rem 1fr}#settings_page{display:grid;height:100vh;grid-template-columns:14rem 1fr}#settings_page sm-button{width:max-content}#settings_page .active{background:rgba(var(--text-color),.1)}#settings_page .panel>:first-of-type{margin-top:.5rem}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}}@media only screen and (max-width:1280px){.hide-on-medium{display:none!important}}@media only screen and (min-width:1080px){#chat #messages_container{padding:1rem 4rem}}@media only screen and (min-width:1280px){#landing{gap:4vw;padding:0 8vw}#landing .title-font{font-size:3rem}#chat_page,#mail_page{grid-template-columns:21rem 1fr}#chat_details_panel{position:relative}#chat.expand-side-panel{grid-template-columns:1fr 24rem}#chat.expand-side-panel #messages_container{padding:1rem}#emoji_picker{--num-columns:16}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}}@media (hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.contact:hover,.emoji:hover,.navbar-item:hover,.option:hover{cursor:pointer;background:rgba(var(--text-color),.06)}.contact .menu{opacity:0;transition:opacity .3s}.contact:hover .menu{opacity:1}}@media (hover:none){.contact,.contact-preview,.icon,.option{-webkit-tap-highlight-color:transparent}.contact .menu{display:none}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index dbd8045..59cd859 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -183,7 +183,7 @@ a:any-link{
stroke-linecap: round;
stroke-linejoin: round;
}
-span.ripple{
+.ripple{
position: absolute;
border-radius: 50%;
transform: scale(0);
diff --git a/index.html b/index.html
index d4bfc07..c2414ba 100644
--- a/index.html
+++ b/index.html
@@ -1295,9 +1295,10 @@
const circle = document.createElement("span");
const diameter = Math.max(target.clientWidth, target.clientHeight);
const radius = diameter / 2;
+ const targetDimensions = target.getBoundingClientRect()
circle.style.width = circle.style.height = `${diameter}px`;
- circle.style.left = `${event.clientX - (target.getBoundingClientRect().left + radius)}px`;
- circle.style.top = `${event.clientY - (target.getBoundingClientRect().top + radius)}px`;
+ circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+ circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
circle.classList.add("ripple");
const rippleAnimation = circle.animate([
@@ -1337,8 +1338,11 @@
getRef('private_key_input_field').classList.remove('hide-completely')
getRef("type_of_key").textContent = 'FLO private key'
getRef("remove_account").classList.add("hide-completely");
- } else if (type === "PIN/Password") {
- getRef('get_pin').removeAttribute('disable')
+ setTimeout(() => {
+ getRef('private_key_input_field').focusIn()
+ },100)
+ } else if (type === "PIN/Password") {
+ getRef('get_pin').removeAttribute('disable')
getRef('get_pin').classList.remove('hide-completely')
getRef('private_key_input_field').setAttribute('disable', '')
getRef('private_key_input_field').classList.add('hide-completely')
@@ -1346,18 +1350,25 @@
getRef("remove_account").classList.remove("hide-completely");
showPage('sign_in_page')
isPinSet = true;
+ setTimeout(() => {
+ getRef('get_pin').focusIn()
+ }, 100);
}
getRef('sign_in_button').addEventListener('clicked', () => {
let key
if (type === "PRIVATE_KEY"){
key = getRef('private_key_input_field').value;
- getRef('private_key_input_field').value = ''
+ setTimeout(() => {
+ getRef('private_key_input_field').value = ''
+ }, 300);
}
else if (type === "PIN/Password") {
key = getRef('get_pin').value;
- getRef('get_pin').clear()
+ setTimeout(() => {
+ getRef('get_pin').clear()
+ }, 300);
}
- console.log(key)
+ showPage('loading_page')
resolve(key)
})
getRef('sign_in_with').addEventListener('clicked', () => {
@@ -1712,13 +1723,24 @@
lastSender = sender
}
- if(isValidUrl(message)){
- const anchorTag = document.createElement('a')
- anchorTag.href = message
- anchorTag.target="_blank"
- anchorTag.rel="noopener"
- anchorTag.textContent = message
- messageContent.append(anchorTag)
+ if(hasURL(message)){
+ const chunks = message.split(' ')
+ const chunksLength = chunks.length - 1
+ chunks.forEach((chunk, index) => {
+ if(hasURL(chunk)){
+ const anchorTag = document.createElement('a')
+ anchorTag.href = /^https?:\/\//i.test(chunk) ? chunk : `http://${chunk}`
+ anchorTag.target="_blank"
+ anchorTag.rel="noopener"
+ anchorTag.textContent = chunksLength !== index ? `${chunk} ` : chunk
+ messageContent.append(anchorTag)
+ }
+ else{
+ const text = chunksLength !== index ? `${chunk} ` : chunk
+ const textNode = document.createTextNode(text)
+ messageContent.append(textNode)
+ }
+ })
}
else{
let [messageBody, isOnlyEmoji] = isEmoji(message)
@@ -1809,14 +1831,7 @@
renderedDates = new Map(),
lastSender
- const isValidUrl = (url) => {
- try {
- new URL(url);
- } catch (e) {
- return false;
- }
- return true;
- };
+ const hasURL = text => /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/.test(text)
const isEmoji = (txt) => {
const rx = /([\uD800-\uDBFF][\uDC00-\uDFFF](?:[\u200D\uFE0F][\uD800-\uDBFF][\uDC00-\uDFFF]){2,}|\uD83D\uDC69(?:\u200D(?:(?:\uD83D\uDC69\u200D)?\uD83D\uDC67|(?:\uD83D\uDC69\u200D)?\uD83D\uDC66)|\uD83C[\uDFFB-\uDFFF])|\uD83D\uDC69\u200D(?:\uD83D\uDC69\u200D)?\uD83D\uDC66\u200D\uD83D\uDC66|\uD83D\uDC69\u200D(?:\uD83D\uDC69\u200D)?\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67])|\uD83C\uDFF3\uFE0F\u200D\uD83C\uDF08|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3D\uDD3E\uDDD6-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2640\u2642]\uFE0F|\uD83D\uDC69(?:\uD83C[\uDFFB-\uDFFF])\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC6F\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3C-\uDD3E\uDDD6-\uDDDF])\u200D[\u2640\u2642]\uFE0F|\uD83C\uDDFD\uD83C\uDDF0|\uD83C\uDDF6\uD83C\uDDE6|\uD83C\uDDF4\uD83C\uDDF2|\uD83C\uDDE9(?:\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF])|\uD83C\uDDF7(?:\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC])|\uD83C\uDDE8(?:\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF])|(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)(?:\uFE0F\u200D[\u2640\u2642]|(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2640\u2642])\uFE0F|(?:\uD83D\uDC41\uFE0F\u200D\uD83D\uDDE8|\uD83D\uDC69(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2695\u2696\u2708]|\uD83D\uDC69\u200D[\u2695\u2696\u2708]|\uD83D\uDC68(?:(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2695\u2696\u2708]|\u200D[\u2695\u2696\u2708]))\uFE0F|\uD83C\uDDF2(?:\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF])|\uD83D\uDC69\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\u2764\uFE0F\u200D(?:\uD83D\uDC8B\u200D(?:\uD83D[\uDC68\uDC69])|\uD83D[\uDC68\uDC69]))|\uD83C\uDDF1(?:\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE])|\uD83C\uDDEF(?:\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5])|\uD83C\uDDED(?:\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA])|\uD83C\uDDEB(?:\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7])|[#\*0-9]\uFE0F\u20E3|\uD83C\uDDE7(?:\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF])|\uD83C\uDDE6(?:\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF])|\uD83C\uDDFF(?:\uD83C[\uDDE6\uDDF2\uDDFC])|\uD83C\uDDF5(?:\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE])|\uD83C\uDDFB(?:\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA])|\uD83C\uDDF3(?:\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF])|\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62(?:\uDB40\uDC77\uDB40\uDC6C\uDB40\uDC73|\uDB40\uDC73\uDB40\uDC63\uDB40\uDC74|\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67)\uDB40\uDC7F|\uD83D\uDC68(?:\u200D(?:\u2764\uFE0F\u200D(?:\uD83D\uDC8B\u200D)?\uD83D\uDC68|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC66\u200D\uD83D\uDC66|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83C[\uDFFB-\uDFFF])\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]))|\uD83C\uDDF8(?:\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF])|\uD83C\uDDF0(?:\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF])|\uD83C\uDDFE(?:\uD83C[\uDDEA\uDDF9])|\uD83C\uDDEE(?:\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9])|\uD83C\uDDF9(?:\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF])|\uD83C\uDDEC(?:\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE])|\uD83C\uDDFA(?:\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF])|\uD83C\uDDEA(?:\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA])|\uD83C\uDDFC(?:\uD83C[\uDDEB\uDDF8])|(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)(?:\uD83C[\uDFFB-\uDFFF])|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3D\uDD3E\uDDD6-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u261D\u270A-\u270D]|\uD83C[\uDF85\uDFC2\uDFC7]|\uD83D[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC70\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDCAA\uDD74\uDD7A\uDD90\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC]|\uD83E[\uDD18-\uDD1C\uDD1E\uDD1F\uDD30-\uDD36\uDDD1-\uDDD5])(?:\uD83C[\uDFFB-\uDFFF])|\uD83D\uDC68(?:\u200D(?:(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC67|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC66)|\uD83C[\uDFFB-\uDFFF])|(?:[\u261D\u26F9\u270A-\u270D]|\uD83C[\uDF85\uDFC2-\uDFC4\uDFC7\uDFCA-\uDFCC]|\uD83D[\uDC42\uDC43\uDC46-\uDC50\uDC66-\uDC69\uDC6E\uDC70-\uDC78\uDC7C\uDC81-\uDC83\uDC85-\uDC87\uDCAA\uDD74\uDD75\uDD7A\uDD90\uDD95\uDD96\uDE45-\uDE47\uDE4B-\uDE4F\uDEA3\uDEB4-\uDEB6\uDEC0\uDECC]|\uD83E[\uDD18-\uDD1C\uDD1E\uDD1F\uDD26\uDD30-\uDD39\uDD3D\uDD3E\uDDD1-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])?|(?:[\u231A\u231B\u23E9-\u23EC\u23F0\u23F3\u25FD\u25FE\u2614\u2615\u2648-\u2653\u267F\u2693\u26A1\u26AA\u26AB\u26BD\u26BE\u26C4\u26C5\u26CE\u26D4\u26EA\u26F2\u26F3\u26F5\u26FA\u26FD\u2705\u270A\u270B\u2728\u274C\u274E\u2753-\u2755\u2757\u2795-\u2797\u27B0\u27BF\u2B1B\u2B1C\u2B50\u2B55]|\uD83C[\uDC04\uDCCF\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF7C\uDF7E-\uDF93\uDFA0-\uDFCA\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF4\uDFF8-\uDFFF]|\uD83D[\uDC00-\uDC3E\uDC40\uDC42-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDD7A\uDD95\uDD96\uDDA4\uDDFB-\uDE4F\uDE80-\uDEC5\uDECC\uDED0-\uDED2\uDEEB\uDEEC\uDEF4-\uDEF8]|\uD83E[\uDD10-\uDD3A\uDD3C-\uDD3E\uDD40-\uDD45\uDD47-\uDD4C\uDD50-\uDD6B\uDD80-\uDD97\uDDC0\uDDD0-\uDDE6])|(?:[#\*0-9\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u261D\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267B\u267F\u2692-\u2697\u2699\u269B\u269C\u26A0\u26A1\u26AA\u26AB\u26B0\u26B1\u26BD\u26BE\u26C4\u26C5\u26C8\u26CE\u26CF\u26D1\u26D3\u26D4\u26E9\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763\u2764\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC04\uDCCF\uDD70\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE02\uDE1A\uDE2F\uDE32-\uDE3A\uDE50\uDE51\uDF00-\uDF21\uDF24-\uDF93\uDF96\uDF97\uDF99-\uDF9B\uDF9E-\uDFF0\uDFF3-\uDFF5\uDFF7-\uDFFF]|\uD83D[\uDC00-\uDCFD\uDCFF-\uDD3D\uDD49-\uDD4E\uDD50-\uDD67\uDD6F\uDD70\uDD73-\uDD7A\uDD87\uDD8A-\uDD8D\uDD90\uDD95\uDD96\uDDA4\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA-\uDE4F\uDE80-\uDEC5\uDECB-\uDED2\uDEE0-\uDEE5\uDEE9\uDEEB\uDEEC\uDEF0\uDEF3-\uDEF8]|\uD83E[\uDD10-\uDD3A\uDD3C-\uDD3E\uDD40-\uDD45\uDD47-\uDD4C\uDD50-\uDD6B\uDD80-\uDD97\uDDC0\uDDD0-\uDDE6])\uFE0F)/;
@@ -3429,16 +3444,6 @@
document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
switch(targetPage){
case 'sign_in_page':
- if(isPinSet){
- setTimeout(() => {
- getRef('get_pin').focusIn()
- }, 100);
- }
- else{
- setTimeout(() => {
- getRef('private_key_input_field').focusIn()
- },100)
- }
break;
}
}
@@ -3489,6 +3494,32 @@
}
else{
getRef('pin_error').classList.remove('hide-completely')
+ getRef('pin_error').animate(
+ [
+ {
+ transform: 'translateX(0)'
+ },
+ {
+ transform: 'translateX(-1rem)'
+ },
+ {
+ transform: 'translateX(1rem)'
+ },
+ {
+ transform: 'translateX(-0.5rem)'
+ },
+ {
+ transform: 'translateX(0.5rem)'
+ },
+ {
+ transform: 'translateX(0)'
+ }
+ ],
+ {
+ duration: 600,
+ easing: 'ease'
+ }
+ )
}
}
catch(error){
diff --git a/scripts/components.js b/scripts/components.js
index 0a4f25f..6b53883 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -64,12 +64,15 @@ smButton.innerHTML = `
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
text-transform: capitalize;
+ font-family: inherit;
font-size: 0.9rem;
font-weight: 500;
background: var(--background);
-webkit-tap-highlight-color: transparent;
outline: none;
overflow: hidden;
+ border: none;
+ color: inherit;
}
:host(:not([disable])) .button:focus-visible{
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
@@ -100,9 +103,9 @@ smButton.innerHTML = `
}
}
-
+
`;
+`;
customElements.define('sm-button',
class extends HTMLElement {
constructor() {
@@ -149,10 +152,6 @@ customElements.define('sm-button',
this.addEventListener('click', (e) => {
this.dispatch()
})
- this.addEventListener('keydown', (e) => {
- if (e.code === "Enter" || e.code === "Space")
- this.click()
- })
}
})
@@ -3939,11 +3938,6 @@ pinInput.innerHTML = `
width: auto;
gap: 0.5rem;
}
- label{
- position: relative;
- display: grid;
- place-items: center;
- }
input{
width: 100%;
display: flex;
@@ -3959,13 +3953,6 @@ pinInput.innerHTML = `
input:valid{
background-color: transparent;
}
- input[type="password"]:valid ~ .dot{
- content: '';
- position: absolute;
- padding: 0.4rem;
- border-radius: 1rem;
- background: rgba(var(--text-color), 1);
- }
input:focus,
button:focus{
outline: none;
@@ -4008,7 +3995,7 @@ customElements.define('pin-input',
}
set value(val) {
- this.arrayOfInput.forEach((input, index) => input.children[0].value = val[index] ? val[index] : '')
+ this.arrayOfInput.forEach((input, index) => input.value = val[index] ? val[index] : '')
}
get value() {
@@ -4023,7 +4010,7 @@ customElements.define('pin-input',
}
get isValid(){
- return this.arrayOfInput.every(input => input.children[0].value.trim().length)
+ return this.arrayOfInput.every(input => input.value.trim().length)
}
clear = () => {
@@ -4031,12 +4018,12 @@ customElements.define('pin-input',
}
focusIn = () => {
- this.arrayOfInput[0].children[0].focus();
+ this.arrayOfInput[0].focus();
}
getValue = () => {
return this.arrayOfInput.reduce((acc, val) => {
- return acc += val.children[0].value
+ return acc += val.value
}, '')
}
@@ -4045,11 +4032,11 @@ customElements.define('pin-input',
const frag = document.createDocumentFragment();
for (let i = 0; i < this.pinDigits; i++) {
- const inputBox = document.createElement('label')
- inputBox.innerHTML = `
-
-
- `
+ const inputBox = document.createElement('input')
+ inputBox.setAttribute('type', 'password')
+ inputBox.setAttribute('inputmode', 'numeric')
+ inputBox.setAttribute('maxlength', '1')
+ inputBox.setAttribute('required', '')
this.arrayOfInput.push(inputBox);
frag.append(inputBox);
}
@@ -4057,9 +4044,9 @@ customElements.define('pin-input',
}
handleKeydown = (e) => {
- const activeInput = e.target.closest('label')
+ const activeInput = e.target.closest('input')
if (/[0-9]/.test(e.key)) {
- if (activeInput.children[0].value.trim().length > 2) {
+ if (activeInput.value.trim().length > 2) {
e.preventDefault();
}
else {
@@ -4100,17 +4087,17 @@ customElements.define('pin-input',
}
toggleVisiblity = () => {
- if (this.arrayOfInput[0].children[0].getAttribute('type') === 'password') {
+ if (this.arrayOfInput[0].getAttribute('type') === 'password') {
this.toggleButton.innerHTML = `
`
- this.arrayOfInput.forEach(input => input.children[0].setAttribute('type', 'text'))
+ this.arrayOfInput.forEach(input => input.setAttribute('type', 'text'))
}
else {
this.toggleButton.innerHTML = `
`
- this.arrayOfInput.forEach(input => input.children[0].setAttribute('type', 'password'))
+ this.arrayOfInput.forEach(input => input.setAttribute('type', 'password'))
}
}