From 3dd5ca4819f769477ecb5e5998724e97f1d2909d Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 8 Jan 2021 20:08:45 +0530 Subject: [PATCH] Added emoji picker and support for specific emoji styling --- css/main.css | 171 ++++++++++++++++++++++---------- css/main.min.css | 2 +- css/main.scss | 164 ++++++++++++++++++++++--------- index.html | 220 +++++++++++++++++++++++++++++------------- scripts/components.js | 14 +-- 5 files changed, 398 insertions(+), 173 deletions(-) diff --git a/css/main.css b/css/main.css index 5acb6c8..45edb36 100644 --- a/css/main.css +++ b/css/main.css @@ -27,6 +27,10 @@ body { color: rgba(var(--text-color), 1); background: rgba(var(--foreground-color), 1); } +body #scroll_to_bottom { + background: rgba(var(--foreground-color), 1); + box-shadow: 0 0.3rem 0.4rem rgba(0, 0, 0, 0.2); +} body[data-theme=dark] { --secondary-color: #FDB956; @@ -35,11 +39,16 @@ body[data-theme=dark] { --foreground-color: 20, 20, 20; } body[data-theme=dark] .initial { + color: rgba(var(--text-color), 1) !important; box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040; } body[data-theme=dark] .message { color: rgba(var(--text-color), 1); } +body[data-theme=dark] #scroll_to_bottom { + background: linear-gradient(rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.1)), rgba(var(--foreground-color), 1); + box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.3); +} p { line-height: 1.6; @@ -171,9 +180,8 @@ textarea:focus { } a:any-link { - text-decoration: none; + word-wrap: break-word; color: var(--accent-color); - text-transform: capitalize; font-weight: 500; } @@ -350,14 +358,13 @@ sm-button[variant=primary] .icon { width: 100%; padding: 0 1.5rem; height: 100%; - align-items: flex-end; + align-items: center; } #landing .logo-section { padding: 1.5rem; display: flex; } #landing .title-font { - text-transform: capitalize; line-height: 1.2; font-weight: 700; font-size: 2.5rem; @@ -370,6 +377,7 @@ sm-button[variant=primary] .icon { } #landing .left h4 { color: rgba(var(--foreground-color), 1); + font-weight: 500; } #landing .left sm-button { margin: 1.5rem 0 2rem 0; @@ -399,9 +407,6 @@ sm-button[variant=primary] .icon { #sign_in_popup::part(popup-body) { padding: 0; } -#sign_in_popup #sign_in .left { - background-size: 60%; -} .sign-in-box { width: 100%; @@ -534,6 +539,7 @@ sm-button[variant=primary] .icon { } } .initial { + position: relative; justify-content: center; font-size: 1.2rem; width: 2.4rem; @@ -544,25 +550,13 @@ sm-button[variant=primary] .icon { text-transform: uppercase; } -.chat { - animation: slide-up 0.3s forwards; -} - -@keyframes slide-up { - from { - transform: translateY(1rem); - } - to { - transform: none; - } -} .contact { position: relative; display: grid; gap: 0 1rem; grid-template-columns: auto 1fr auto; grid-template-areas: "dp . menu" "dp . menu"; - padding: 0.8rem 1rem; + padding: 0.8rem 1.5rem; align-items: center; } .contact:focus { @@ -574,7 +568,7 @@ sm-button[variant=primary] .icon { } .contact .name { font-size: 1rem; - font-weight: 500; + font-weight: 400; text-transform: capitalize; } .contact .address { @@ -604,23 +598,20 @@ sm-button[variant=primary] .icon { } .mail-card.unread::before, -.contact.unread::before { +.contact.unread .initial::before { content: ""; position: absolute; - width: 0.2rem; - height: 100%; + padding: 0.3rem; + border-radius: 1rem; top: 0; left: 0; - background: #00C853; + background: var(--accent-color); } -.mail-card.unread, -.contact.unread { - overflow: hidden; - font-weight: 600; -} -.mail-card.unread h4, -.contact.unread h4 { +.mail-card.unread h4, .mail-card.unread h5, .mail-card.unread p, +.contact.unread h4, +.contact.unread h5, +.contact.unread p { font-weight: 700; } @@ -840,6 +831,7 @@ sm-button[variant=primary] .icon { } #contacts, #mails { + overflow-y: hidden; position: relative; grid-template-rows: max-content 1fr; height: calc(100vh - 3.5rem); @@ -890,14 +882,41 @@ sm-button[variant=primary] .icon { } #chat header .initial { margin-right: 1rem; + width: 1.6em; + height: 1.6em; } #chat header h4 { font-weight: 500; - opacity: 0.8; + font-size: 0.9rem; } -#chat header h5 { - opacity: 0.7; - font-weight: 400; +#chat #scroll_to_bottom { + position: fixed; + right: 0; + bottom: 4rem; + width: 2.6rem; + height: 2.6rem; + padding: 0.9rem; + border-radius: 4rem; + z-index: 1; + margin: 1.5rem; + stroke-width: 8; + cursor: pointer; + transform: scale(0); + transition: transform 0.3s; +} +#chat footer #toggle_emoji { + align-self: center; + padding: 0.6rem; + width: 2.6rem; + height: 2.6rem; + border-radius: 2rem; + cursor: pointer; +} +#chat footer #toggle_emoji path { + fill: rgba(var(--text-color), 0.5); +} +#chat footer #toggle_emoji.active path { + fill: var(--accent-color); } #chat footer .flex { align-items: flex-end; @@ -906,6 +925,7 @@ sm-button[variant=primary] .icon { #chat footer sm-textarea::part(textarea) { background: rgba(var(--text-color), 0.1); padding-right: 3rem; + border-radius: 2rem; } #chat #send_message_button { position: absolute; @@ -944,14 +964,23 @@ sm-button[variant=primary] .icon { #chat .message .message-body { 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; box-shadow: 0 1px 0.1rem #00000020; padding: 0.6em 1em; + line-height: 1.5; +} +#chat .message .message-body a { + color: inherit; } #chat .message .time { + white-space: nowrap; font-size: 0.8em; opacity: 0.8; - margin-top: 0.3rem; } #chat .sent { margin-left: auto; @@ -1004,13 +1033,57 @@ sm-button[variant=primary] .icon { } #chat .unconfirmed { opacity: 0.7; + transform-origin: left; + animation: slide-up 0.3s forwards; } +@keyframes slide-up { + from { + transform: translate(-2rem, 2rem) scale(0.8); + } + to { + transform: none; + } +} #chat_container { flex: 1; padding: 0 1rem; } +#emoji_picker { + display: grid; + background: rgba(var(--text-color), 0.06); + border-radius: 1rem; + margin: 0 1rem; + grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); + box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.3); + padding: 1rem; + overflow-y: auto; + flex-wrap: wrap; + max-height: min(16rem, 30vh); +} + +.emoji { + font-size: 1.6rem; + cursor: pointer; + padding: 0.4rem; + border-radius: 0.6rem; + user-select: none; +} + +.big-emoji::after { + display: none; +} +.big-emoji .message-body { + background: none !important; + padding: 0 !important; + font-size: 2.6rem; +} + +.emoji:hover { + background: rgba(var(--text-color), 0.1); +} + #new_conversation, #no_mails { height: 100%; justify-content: center; @@ -1054,12 +1127,12 @@ sm-button[variant=primary] .icon { display: none; } -sm-tab-panels { - overflow: hidden auto; +#dm_container { + transition: 0.3s; } -sm-tab-header { - --accent-color: rgba(var(--text-color), 0.7); +sm-tab-panels { + overflow: hidden auto; } #inbox_mail_container, @@ -1174,13 +1247,7 @@ sm-tab-header { } #sing_in { - grid-template-rows: 16rem 1fr; max-height: 90vh; - background: url(sign-in-back.svg) no-repeat center 6rem; - background-size: 50%; - } - #sing_in .left { - border-radius: 0.5rem 0.5rem 0 0; } #landing_illustration { @@ -1211,7 +1278,7 @@ sm-tab-header { } ::-webkit-scrollbar-thumb { - background: rgba(var(--text-color), 0.2); + background: rgba(var(--text-color), 0.3); } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--text-color), 0.5); @@ -1250,6 +1317,10 @@ sm-tab-header { color: var(--accent-color); } + #sign_in_popup .popup-header { + padding-top: 1.5rem; + } + #main_navbar { flex-direction: column; position: relative; @@ -1303,7 +1374,7 @@ sm-tab-header { } #chat .message .message-body { - max-width: 50ch; + max-width: 65ch; } #chat_page, #mail_page { @@ -1362,7 +1433,7 @@ sm-tab-header { padding: 0.5rem 1.5rem; } #chat #chat_container { - padding: 1rem 1.5rem; + padding: 1rem 5rem; } } @media (hover: hover) { diff --git a/css/main.min.css b/css/main.min.css index 1836175..fe0ba3c 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -#landing_page,body{background:rgba(var(--foreground-color),1)}body,body[data-theme=dark] .message,h1,h2,h3,h4,h5,textarea{color:rgba(var(--text-color),1)}p,textarea{line-height:1.6}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{scroll-behavior:smooth;font-size:clamp(16px,1.2vw,48px)}body,html{height:100%}body{--accent-color:#0779e4;--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}body[data-theme=dark]{--secondary-color:#FDB956;--text-color:218,218,218;--text-color-light:170,170,170;--foreground-color:20,20,20}body[data-theme=dark] .initial{box-shadow:0 .1rem .1rem #00016,0 .1rem .3rem #00040}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}textarea:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}.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{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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{box-shadow:0 1rem 1rem #00020;margin-right:1rem;position:fixed;bottom:3.5rem;right:0;z-index:1}.fab .icon{margin-left:0!important;margin-right:.5rem;height:.9rem!important;stroke-width:8!important}a:any-link{text-decoration:none;color:var(--accent-color);text-transform:capitalize;font-weight:500}.solid-background{background:var(--background-color)!important}.normal-weight{font-weight:400}.icon{fill:none;stroke-width:6;stroke:rgba(var(--text-color),1);height:1.2rem;width:1.2rem;overflow:visible;stroke-linecap:round;stroke-linejoin:round}span.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}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{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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:2rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.card,sm-button{margin:1rem 0}.page{align-items:flex-start;width:100%;height:100%}.card{display:flex;flex-direction:column}sm-button .icon{margin-right:.4rem}sm-button[variant=primary]{--foreground-color:255,255,255}sm-button[variant=primary] .icon{align-self:center;height:1rem;width:1rem;margin-left:.8rem;stroke-width:6;stroke:#fff}.logo-section{position:relative;align-items:center;height:max-content;margin:.5rem 0}.logo-section h4{font-weight:500;line-height:1;font-size:1rem}.logo-section h5{font-weight:400;opacity:.8;color:rgba(var(--text-color),.7)}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color),1);stroke:none}.select-file input[type=file]{display:none}#landing{display:grid;border-radius:.6rem;width:100%;padding:0 1.5rem;height:100%;align-items:flex-end}#landing .logo-section{padding:1.5rem;display:flex}#landing .title-font{text-transform:capitalize;line-height:1.2;font-weight:700;font-size:2.5rem}#landing .left h3,#landing .left p,.contact .name,.sign-in-box h3,.sign-in-box h4,.sign-in-box h5{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 sm-button{margin:1.5rem 0 2rem;width:max-content}#landing .left h3{margin-bottom:1rem}.logo-section{padding:1.5rem}#landing_illustration{position:relative;width:100%}#sign_in_popup::part(popup-body){padding:0}#sign_in_popup #sign_in .left{background-size:60%}.sign-in-box{width:100%;margin:0 -2rem;z-index:1;justify-self:center;padding:1.5rem;border-radius:.5rem;background:rgba(var(--foreground-color),1)}.sign-in-box sm-input{text-align:left}.sign-in-box sm-panel{width:100%}.sign-in-box sm-tab-header{margin:0;background:0 0;align-self:flex-start}.sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}.sign-in-box sm-tab::part(tab){padding:.4rem 0}.sign-in-box sm-tab-panels{margin-top:1.5rem}.sign-in-box form{width:100%}.sign-in-box h2{margin-bottom:.5rem}.sign-in-box h4{margin-bottom:1.5rem}.sign-in-box h5{opacity:.8}.sign-in-box .copy-row h4{max-width:34ch}.sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}.sign-in-box button{width:auto;margin-top:1rem;padding:.6rem 1.6rem}.sign-in-box p{max-width:35ch;margin-top:.5rem;margin-bottom:1.5rem}.sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}.sign-in-box #sign_in_with{margin-top:2rem}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading_page{height:100vh;display:grid;place-content:center;justify-items:center}#loading_page svg{z-index:1;transform-origin:bottom;height:6rem;width:6rem;animation:bounce .5s infinite alternate ease-in}#loading_page .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}#loading_page h4{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)}}.initial{justify-content:center;font-size:1.2rem;width:2.4rem;height:2.4rem;color:#fff;box-shadow:0 .1rem .1rem #0001a,0 .1rem .3rem #00016;border-radius:2rem;text-transform:uppercase}#contacts header h4,#mails header h4,#settings_page #settings_title,.contact .name,.sidebar-item{text-transform:capitalize}.chat{animation:slide-up .3s forwards}@keyframes slide-up{from{transform:translateY(1rem)}to{transform:none}}.contact{position:relative;display:grid;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"dp . menu" "dp . menu";padding:.8rem 1rem;align-items:center}.contact:focus{background:rgba(var(--text-color),.06);outline:0}.contact .initial{grid-area:dp}.contact .name{font-size:1rem}.contact .address{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;color:rgba(var(--text-color),.8)}.contact sm-menu{grid-area:menu}#warn_no_encryption,.date-card{padding:.4rem .8rem;background:rgba(var(--text-color),.1);font-weight:500;border-radius:.5rem;color:rgba(var(--text-color),.8);margin:1rem 0;justify-self:center;align-self:flex-start}.date-card{align-self:center}.contact.unread::before,.mail-card.unread::before{content:"";position:absolute;width:.2rem;height:100%;top:0;left:0;background:#00C853}.mail,.mail-card{position:relative}.contact.unread,.mail-card.unread{overflow:hidden;font-weight:600}.contact.unread h4,.mail-card.unread h4{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;text-overflow:ellipsis;white-space:nowrap;margin-right:1rem}.mail-card .date{margin-left:auto;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)}#chat .message .message-body,.mail .mail-content,.mail .mail-subject{overflow-wrap:break-word;word-wrap:break-word}@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-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}#main_navbar{position:fixed;bottom:0;padding:0;flex-wrap:wrap;width:100%;background:rgba(var(--foreground-color),1);box-shadow:0 -.2rem 1rem #00016;height:3.5rem;align-items:center;z-index:4}#main_navbar .logo-section{padding:0}#main_navbar .navbar-item{position:relative;height:100%;flex:1;justify-content:center;flex-direction:column;opacity:.8}#main_navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#main_navbar .navbar-item .label{margin-top:.4rem}#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}#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)}#main_navbar .active{opacity:1}#main_navbar .active h5{color:var(--accent-color)}#main_navbar .active .icon{stroke:var(--accent-color)}#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 #00010,0 .2rem .5rem #00020;width:100%}#contacts,#contacts header{position:relative}#mail_contact_list .contact{grid-template-columns:auto 1fr;grid-template-areas:"dp ." "dp ."}#mail_contact_list sm-menu{display:none}#contacts header{gap:.5rem}#contacts header sm-input{margin:0;width:100%}#contacts header sm-input .icon{stroke:rgba(var(--text-color),.5);height:.9rem;width:.9rem}#contacts header sm-input::part(input){padding:.5rem 1rem}#contacts header .flex{padding-bottom:1rem}#contacts #all_contacts{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;z-index:1;background-color:rgba(var(--foreground-color),1);transition:transform .3s;transform:translateX(-100%)}#contacts,#mails{position:relative;grid-template-rows:max-content 1fr;height:calc(100vh - 3.5rem)}#contacts header,#mails header{padding:1rem 1.5rem}#contacts header .grid,#mails header .grid{grid-template-columns:1fr auto;gap:.5rem}#contacts header .grid .icon,#mails header .grid .icon{height:2.2rem;width:2.2rem;padding:.4rem;cursor:pointer}#contacts header sm-button,#mails header sm-button{margin:0 0 0 auto}#contacts header sm-button .icon,#mails header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_page{overflow-y:hidden}#chat{height:100vh}#chat header{padding:.5rem 1rem;box-shadow:0 .2rem .4rem #00016}#chat header .back-button{padding:.1rem;stroke-width:8;margin-right:.5rem}#chat header .initial{margin-right:1rem}#chat header h4{font-weight:500;opacity:.8}#chat header h5{opacity:.7;font-weight:400}#chat footer .flex{align-items:flex-end;padding:1rem}#chat footer sm-textarea::part(textarea){background:rgba(var(--text-color),.1);padding-right:3rem}#chat #send_message_button{position:absolute;right:1.5rem;transform:scale(0);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}#chat #send_message_button.active{fill:var(--accent-color);transform:none}#chat #type_message{margin:0}#chat .message{position:relative;display:grid;grid-auto-flow:column;align-items:center;gap:.5rem;width:100%;font-size:.9rem;max-width:max-content;margin-bottom:.2rem;margin-top:.8rem}#chat .message .message-body{white-space:pre-wrap;box-shadow:0 1px .1rem #00020;padding:.6em 1em}#settings_page,sm-tab-panels{overflow:hidden auto}#chat .message .time{font-size:.8em;opacity:.8;margin-top:.3rem}#chat .sent{margin-left:auto}#chat .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}#chat .sent .message-body{background:var(--accent-color);color:#f0f0f0;border-radius:1.5em 0 1.5em 1.5em}#chat .sent .time{grid-column:1}#chat .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}#chat .received .message-body{background:rgba(var(--text-color),.1);border-radius:0 1.5em 1.5em}#chat .received+.received,#chat .sent+.sent{margin-top:0}#chat .received+.received::after,#chat .sent+.sent::after{display:none}#chat .received+.received .message-body,#chat .sent+.sent .message-body{border-radius:1.5em}#chat .unconfirmed{opacity:.7}#chat_container{flex:1;padding:0 1rem}#new_conversation,#no_mails{height:100%;justify-content:center;text-align:center;padding:1.5rem}#new_conversation p,#no_mails p{margin-top:.8rem}#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,#contacts_container,#dm_container,#inbox_mail_container,#mail,#sent_mail_container{width:100%;flex-direction:column;height:100%;overflow-y:auto}#dm_container:empty{display:none}#dm_container:not(:empty)~.empty-state{display:none}sm-tab-header{--accent-color:rgba(var(--text-color), 0.7)}#inbox_mail_container,#sent_mail_container{padding-bottom:6rem}#chat,#mail{background:rgba(var(--foreground-color),1)}#mail{height:100vh;padding:1.5rem;align-items:flex-start}#mail .flex{margin-top:1rem}#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;font-weight:500;opacity:.9}.sidebar-item .icon{margin-right:1em;width:1em}.back{padding:.7rem;height:2.4rem;width:2.4rem;background-color:rgba(var(--foreground-color),1);margin-left:-.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page{height:calc(100vh - 3.5rem)}#settings_page .flex sm-button{margin:0;margin-left:1rem}#settings_page sm-switch{padding-left:1rem}#settings_page sm-button{width:100%}#settings_page #settings_sidebar{padding:1rem 0}#settings_page #settings_panel{padding:0 1.5rem}#settings_page section{max-width:50ch;display:grid;gap:.3rem}#settings_page section:not(:last-of-type){margin-bottom:1.5rem}#settings_page section.setting-toggle{grid-template-columns:1fr auto}#settings_page section.setting-toggle sm-switch{grid-column:2;grid-row:1/3}#settings_page section.setting-toggle>h4,#settings_page section.setting-toggle>p{grid-column:1}#settings_page #sign_out::part(button){color:var(--error-color)}@media screen and (max-width:640px){.hide-on-mobile{position:fixed;max-height:0;opacity:0;pointer-events:none}#landing{grid-template-areas:"illustration" ".";height:100%}#sing_in{grid-template-rows:16rem 1fr;max-height:90vh;background:url(sign-in-back.svg) center 6rem no-repeat;background-size:50%}#sing_in .left{border-radius:.5rem .5rem 0 0}#landing_illustration{grid-area:illustration}#chat header h5{width:calc(100vw - 12rem)}#chat .message{width:fit-content;max-width:90%}#settings_page{padding-bottom:3.5rem}#settings_page header{position:sticky;top:0;padding:1.5rem 0;background:rgba(var(--foreground-color),1)}}@media only screen and (min-width:640px){#add_contact_popup::part(popup),sm-popup::part(popup){min-width:24rem}::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.hide-on-desktop{display:none!important}.page{padding-bottom:0}.fab{position:absolute;bottom:0}.logo-section{padding:2rem 3rem 0;margin:.5rem 0}#landing{height:calc(100vh - 8rem);align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#landing .left h4{color:var(--accent-color)}#main_navbar{flex-direction:column;position:relative;padding:.5rem;box-shadow:none;height:auto}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem .5rem;border-radius:.4rem}#main_navbar .navbar-item .icon{height:1.2rem;width:2.4rem}#main_navbar .navbar-item:last-of-type{margin-top:auto}#main_navbar .logo-section{margin:1rem 0 1.5rem;padding:0 1rem}#main_navbar .active{background:var(--accent-color);border-radius:.4rem}#main_navbar .active .icon{stroke:#fff}#main_navbar .label{display:none}#compose_mail_popup::part(popup),#reply_mail_popup::part(popup){min-width:36rem}#main{width:100vw;height:100vh;grid-template-columns:auto 1fr}#chat .message .message-body{max-width:50ch}#chat_page,#mail_page{grid-template-columns:20rem 1fr}#contacts,#mails,#settings_sidebar{height:100vh;background-color:#9da6ff10}#settings_page{display:grid;height:100vh;grid-template-columns:14rem 1fr}#settings_page sm-button{width:max-content}#settings_page #settings_panel{padding:1.5rem}#settings_page .active{background:rgba(var(--text-color),.1)}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}#settings_panel{overflow-y:auto;max-height:100vh}}@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:22rem 1fr}#chat header{padding:.5rem 1.5rem}#chat #chat_container{padding:1rem 1.5rem}}@media (hover:hover){.contact:hover,.mail-card:hover,.navbar-item:hover{background:rgba(var(--text-color),.06);cursor:pointer}.contact sm-menu{opacity:0;transition:opacity .3s}.contact:hover sm-menu,sm-menu:focus-within{opacity:1}} \ No newline at end of file +#landing_page,.sign-in-box,body,body #scroll_to_bottom{background:rgba(var(--foreground-color),1)}p,textarea{line-height:1.6}.align-center,.popup-header{align-items:center}.hide,span.ripple{pointer-events:none}.contact .address,.copy-row .copy,.mail-card .sender,.text-overflow{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(16px,1.2vw,48px)}body,html{height:100%}body{--accent-color:#0779e4;--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]{--secondary-color:#FDB956;--text-color:218,218,218;--text-color-light:170,170,170;--foreground-color:20,20,20}body[data-theme=dark] .initial{color:rgba(var(--text-color),1)!important;box-shadow:0 .1rem .1rem #00016,0 .1rem .3rem #00040}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}textarea:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.justify-right{margin-left:auto}.direction-column{flex-direction:column}.rest{flex:1}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.breakable{overflow-wrap:break-word}.text-overflow{white-space:nowrap;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{box-shadow:0 1rem 1rem #00020;margin-right:1rem;position:fixed;bottom:3.5rem;right:0;z-index:1}.fab .icon{margin-left:0!important;margin-right:.5rem;height:.9rem!important;stroke-width:8!important}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}.icon{fill:none;stroke-width:6;stroke:rgba(var(--text-color),1);height:1.2rem;width:1.2rem;overflow:visible;stroke-linecap:round;stroke-linejoin:round}span.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2)}#landing_illustration,.contact,.initial,.interact,.logo-section{position:relative}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}sm-popup sm-input+sm-input{margin-top:1rem}.popup-header{padding:.5rem 1.5rem 0;display:flex;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{white-space:nowrap;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:2rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.card,sm-button{margin:1rem 0}.page{align-items:flex-start;width:100%;height:100%}.card{display:flex;flex-direction:column}sm-button .icon{margin-right:.4rem}sm-button[variant=primary]{--foreground-color:255,255,255}sm-button[variant=primary] .icon{align-self:center;height:1rem;width:1rem;margin-left:.8rem;stroke-width:6;stroke:#fff}.logo-section{align-items:center;height:max-content;margin:.5rem 0}.logo-section h4{font-weight:500;line-height:1;font-size:1rem}.logo-section h5{font-weight:400;opacity:.8;color:rgba(var(--text-color),.7)}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color),1);stroke:none}.select-file input[type=file]{display:none}#landing{display:grid;border-radius:.6rem;width:100%;padding:0 1.5rem;height:100%;align-items:center}#landing .logo-section{padding:1.5rem;display:flex}#landing .title-font{line-height:1.2;font-weight:700;font-size:2.5rem}#landing .left h3,#landing .left h4,#landing .left p,.sign-in-box h3,.sign-in-box h4,.sign-in-box h5{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 sm-button{margin:1.5rem 0 2rem;width:max-content}#landing .left h3{margin-bottom:1rem}.logo-section{padding:1.5rem}#landing_illustration{width:100%}#sign_in_popup::part(popup-body){padding:0}.sign-in-box{width:100%;margin:0 -2rem;z-index:1;justify-self:center;padding:1.5rem;border-radius:.5rem}.sign-in-box sm-input{text-align:left}.sign-in-box sm-panel{width:100%}.sign-in-box sm-tab-header{margin:0;background:0 0;align-self:flex-start}.sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}.sign-in-box sm-tab::part(tab){padding:.4rem 0}.sign-in-box sm-tab-panels{margin-top:1.5rem}.sign-in-box form{width:100%}.sign-in-box h2{margin-bottom:.5rem}.sign-in-box h4{margin-bottom:1.5rem}.sign-in-box h5{opacity:.8}.sign-in-box .copy-row h4{max-width:34ch}.sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}.sign-in-box button{width:auto;margin-top:1rem;padding:.6rem 1.6rem}.sign-in-box p{max-width:35ch;margin-top:.5rem;margin-bottom:1.5rem}.sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}.sign-in-box #sign_in_with{margin-top:2rem}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading_page{height:100vh;display:grid;place-content:center;justify-items:center}#loading_page svg{z-index:1;transform-origin:bottom;height:6rem;width:6rem;animation:bounce .5s infinite alternate ease-in}#loading_page .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}#loading_page h4{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)}}.initial{justify-content:center;font-size:1.2rem;width:2.4rem;height:2.4rem;color:#fff;box-shadow:0 .1rem .1rem #0001a,0 .1rem .3rem #00016;border-radius:2rem;text-transform:uppercase}#contacts header h4,#mails header h4,#settings_page #settings_title,.contact .name,.sidebar-item{text-transform:capitalize}.contact{display:grid;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"dp . menu" "dp . menu";padding:.8rem 1.5rem;align-items:center}.contact:focus{background:rgba(var(--text-color),.06);outline:0}.contact .initial{grid-area:dp}.contact .name{font-size:1rem;font-weight:400}.contact .address{overflow:hidden;white-space:nowrap;font-weight:400;color:rgba(var(--text-color),.8)}.contact sm-menu{grid-area:menu}#warn_no_encryption,.date-card{padding:.4rem .8rem;background:rgba(var(--text-color),.1);font-weight:500;border-radius:.5rem;color:rgba(var(--text-color),.8);margin:1rem 0;justify-self:center;align-self:flex-start}.date-card{align-self:center}.contact.unread .initial::before,.mail-card.unread::before{content:"";position:absolute;padding:.3rem;border-radius:1rem;top:0;left:0;background:var(--accent-color)}.mail,.mail-card{position:relative}.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;white-space:nowrap;margin-right:1rem}.mail-card .date{margin-left:auto;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)}#chat .message .message-body,.mail .mail-content,.mail .mail-subject{overflow-wrap:break-word;word-wrap:break-word}@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-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}#main_navbar{position:fixed;bottom:0;padding:0;flex-wrap:wrap;width:100%;background:rgba(var(--foreground-color),1);box-shadow:0 -.2rem 1rem #00016;height:3.5rem;align-items:center;z-index:4}#main_navbar .logo-section{padding:0}#main_navbar .navbar-item{position:relative;height:100%;flex:1;justify-content:center;flex-direction:column;opacity:.8}#main_navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#main_navbar .navbar-item .label{margin-top:.4rem}#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}#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)}#main_navbar .active{opacity:1}#main_navbar .active h5{color:var(--accent-color)}#main_navbar .active .icon{stroke:var(--accent-color)}#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 #00010,0 .2rem .5rem #00020;width:100%}#mail_contact_list .contact{grid-template-columns:auto 1fr;grid-template-areas:"dp ." "dp ."}#mail_contact_list sm-menu{display:none}#contacts header{position:relative;gap:.5rem}#contacts header sm-input{margin:0;width:100%}#contacts header sm-input .icon{stroke:rgba(var(--text-color),.5);height:.9rem;width:.9rem}#contacts header sm-input::part(input){padding:.5rem 1rem}#contacts header .flex{padding-bottom:1rem}#contacts #all_contacts{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;z-index:1;background-color:rgba(var(--foreground-color),1);transition:transform .3s;transform:translateX(-100%)}#contacts,#mails{overflow-y:hidden;position:relative;grid-template-rows:max-content 1fr;height:calc(100vh - 3.5rem)}#contacts header,#mails header{padding:1rem 1.5rem}#contacts header .grid,#mails header .grid{grid-template-columns:1fr auto;gap:.5rem}#contacts header .grid .icon,#mails header .grid .icon{height:2.2rem;width:2.2rem;padding:.4rem;cursor:pointer}#contacts header sm-button,#mails header sm-button{margin:0 0 0 auto}#contacts header sm-button .icon,#mails header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_page{overflow-y:hidden}#chat{height:100vh}#chat header{padding:.5rem 1rem;box-shadow:0 .2rem .4rem #00016}#chat header .back-button{padding:.1rem;stroke-width:8;margin-right:.5rem}#chat header .initial{margin-right:1rem;width:1.6em;height:1.6em}#chat header h4{font-weight:500;font-size:.9rem}#chat #scroll_to_bottom{position:fixed;right:0;bottom:4rem;width:2.6rem;height:2.6rem;padding:.9rem;border-radius:4rem;z-index:1;margin:1.5rem;stroke-width:8;cursor:pointer;transform:scale(0);transition:transform .3s}#chat footer #toggle_emoji{align-self:center;padding:.6rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#chat footer #toggle_emoji path{fill:rgba(var(--text-color),.5)}#chat footer #toggle_emoji.active path{fill:var(--accent-color)}#chat footer .flex{align-items:flex-end;padding:1rem}#chat footer sm-textarea::part(textarea){background:rgba(var(--text-color),.1);padding-right:3rem;border-radius:2rem}#chat #send_message_button{position:absolute;right:1.5rem;transform:scale(0);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}#chat #send_message_button.active{fill:var(--accent-color);transform:none}#chat #type_message{margin:0}#chat .message{position:relative;display:grid;grid-auto-flow:column;align-items:center;gap:.5rem;width:100%;font-size:.9rem;max-width:max-content;margin-bottom:.2rem;margin-top:.8rem}#chat .message .message-body{word-break:break-all;word-break:break-word;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;white-space:pre-wrap;box-shadow:0 1px .1rem #00020;padding:.6em 1em;line-height:1.5}#settings_page,sm-tab-panels{overflow:hidden auto}#chat .message .message-body a{color:inherit}#chat .message .time{white-space:nowrap;font-size:.8em;opacity:.8}#chat .sent{margin-left:auto}#chat .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}#chat .sent .message-body{background:var(--accent-color);color:#f0f0f0;border-radius:1.5em 0 1.5em 1.5em}#chat .sent .time{grid-column:1}#chat .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}#chat .received .message-body{background:rgba(var(--text-color),.1);border-radius:0 1.5em 1.5em}#chat .received+.received,#chat .sent+.sent{margin-top:0}#chat .received+.received::after,#chat .sent+.sent::after{display:none}#chat .received+.received .message-body,#chat .sent+.sent .message-body{border-radius:1.5em}#chat .unconfirmed{opacity:.7;transform-origin:left;animation:slide-up .3s forwards}@keyframes slide-up{from{transform:translate(-2rem,2rem) scale(.8)}to{transform:none}}#chat_container{flex:1;padding:0 1rem}#emoji_picker{display:grid;background:rgba(var(--text-color),.06);border-radius:1rem;margin:0 1rem;grid-template-columns:repeat(auto-fill,minmax(3rem,1fr));box-shadow:0 .2rem .8rem rgba(0,0,0,.3);padding:1rem;overflow-y:auto;flex-wrap:wrap;max-height:min(16rem,30vh)}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;user-select:none}.big-emoji::after{display:none}.big-emoji .message-body{background:0 0!important;padding:0!important;font-size:2.6rem}.emoji:hover{background:rgba(var(--text-color),.1)}#new_conversation,#no_mails{height:100%;justify-content:center;text-align:center;padding:1.5rem}#new_conversation p,#no_mails p{margin-top:.8rem}#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,#contacts_container,#dm_container,#inbox_mail_container,#mail,#sent_mail_container{width:100%;flex-direction:column;height:100%;overflow-y:auto}#dm_container:empty{display:none}#dm_container:not(:empty)~.empty-state{display:none}#dm_container{transition:.3s}#inbox_mail_container,#sent_mail_container{padding-bottom:6rem}#chat,#mail{background:rgba(var(--foreground-color),1)}#mail{height:100vh;padding:1.5rem;align-items:flex-start}#mail .flex{margin-top:1rem}#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;font-weight:500;opacity:.9}.sidebar-item .icon{margin-right:1em;width:1em}.back{padding:.7rem;height:2.4rem;width:2.4rem;background-color:rgba(var(--foreground-color),1);margin-left:-.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page{height:calc(100vh - 3.5rem)}#settings_page .flex sm-button{margin:0;margin-left:1rem}#settings_page sm-switch{padding-left:1rem}#settings_page sm-button{width:100%}#settings_page #settings_sidebar{padding:1rem 0}#settings_page #settings_panel{padding:0 1.5rem}#settings_page section{max-width:50ch;display:grid;gap:.3rem}#settings_page section:not(:last-of-type){margin-bottom:1.5rem}#settings_page section.setting-toggle{grid-template-columns:1fr auto}#settings_page section.setting-toggle sm-switch{grid-column:2;grid-row:1/3}#settings_page section.setting-toggle>h4,#settings_page section.setting-toggle>p{grid-column:1}#settings_page #sign_out::part(button){color:var(--error-color)}@media screen and (max-width:640px){.hide-on-mobile{position:fixed;max-height:0;opacity:0;pointer-events:none}#landing{grid-template-areas:"illustration" ".";height:100%}#sing_in{max-height:90vh}#landing_illustration{grid-area:illustration}#chat header h5{width:calc(100vw - 12rem)}#chat .message{width:fit-content;max-width:90%}#settings_page{padding-bottom:3.5rem}#settings_page header{position:sticky;top:0;padding:1.5rem 0;background:rgba(var(--foreground-color),1)}}@media only screen and (min-width:640px){#add_contact_popup::part(popup),sm-popup::part(popup){min-width:24rem}::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.hide-on-desktop{display:none!important}.page{padding-bottom:0}.fab{position:absolute;bottom:0}.logo-section{padding:2rem 3rem 0;margin:.5rem 0}#landing{height:calc(100vh - 8rem);align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#landing .left h4{color:var(--accent-color)}#sign_in_popup .popup-header{padding-top:1.5rem}#main_navbar{flex-direction:column;position:relative;padding:.5rem;box-shadow:none;height:auto}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem .5rem;border-radius:.4rem}#main_navbar .navbar-item .icon{height:1.2rem;width:2.4rem}#main_navbar .navbar-item:last-of-type{margin-top:auto}#main_navbar .logo-section{margin:1rem 0 1.5rem;padding:0 1rem}#main_navbar .active{background:var(--accent-color);border-radius:.4rem}#main_navbar .active .icon{stroke:#fff}#main_navbar .label{display:none}#compose_mail_popup::part(popup),#reply_mail_popup::part(popup){min-width:36rem}#main{width:100vw;height:100vh;grid-template-columns:auto 1fr}#chat .message .message-body{max-width:65ch}#chat_page,#mail_page{grid-template-columns:20rem 1fr}#contacts,#mails,#settings_sidebar{height:100vh;background-color:#9da6ff10}#settings_page{display:grid;height:100vh;grid-template-columns:14rem 1fr}#settings_page sm-button{width:max-content}#settings_page #settings_panel{padding:1.5rem}#settings_page .active{background:rgba(var(--text-color),.1)}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}#settings_panel{overflow-y:auto;max-height:100vh}}@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:22rem 1fr}#chat header{padding:.5rem 1.5rem}#chat #chat_container{padding:1rem 5rem}}@media (hover:hover){.contact:hover,.mail-card:hover,.navbar-item:hover{background:rgba(var(--text-color),.06);cursor:pointer}.contact sm-menu{opacity:0;transition:opacity .3s}.contact:hover sm-menu,sm-menu:focus-within{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index bba8e9f..b43967f 100644 --- a/css/main.scss +++ b/css/main.scss @@ -23,6 +23,10 @@ body{ --error-color: red; color: rgba(var(--text-color), 1); background: rgba(var(--foreground-color), 1); + #scroll_to_bottom{ + background: rgba(var(--foreground-color), 1); + box-shadow: 0 0.3rem 0.4rem rgba(0, 0, 0, 0.2); + } } body[data-theme='dark']{ --secondary-color: #FDB956; @@ -30,11 +34,16 @@ body[data-theme='dark']{ --text-color-light: 170, 170, 170; --foreground-color: 20, 20, 20; .initial{ + color: rgba(var(--text-color), 1) !important; box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040; } .message{ color: rgba(var(--text-color), 1); } + #scroll_to_bottom{ + background: linear-gradient(rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.1)), rgba(var(--foreground-color), 1); + box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.3); + } } p{ line-height: 1.6; @@ -141,9 +150,8 @@ textarea{ } } a:any-link{ - text-decoration: none; + word-wrap: break-word; color: var(--accent-color); - text-transform: capitalize; font-weight: 500; } .solid-background{ @@ -304,13 +312,12 @@ sm-button[variant="primary"]{ width: 100%; padding: 0 1.5rem; height: 100%; - align-items: flex-end; + align-items: center; .logo-section{ padding: 1.5rem; display: flex; } .title-font{ - text-transform: capitalize; line-height: 1.2; font-weight: 700; font-size: 2.5rem; @@ -322,6 +329,7 @@ sm-button[variant="primary"]{ z-index: 1; h4{ color: rgba(var(--foreground-color), 1); + font-weight: 500; } sm-button{ margin: 1.5rem 0 2rem 0; @@ -350,11 +358,6 @@ sm-button[variant="primary"]{ &::part(popup-body){ padding: 0; } - #sign_in{ - .left{ - background-size: 60%; - } - } } .sign-in-box{ width: 100%; @@ -487,6 +490,7 @@ sm-button[variant="primary"]{ } } .initial{ + position: relative; justify-content: center; font-size: 1.2rem; width: 2.4rem; @@ -496,17 +500,6 @@ sm-button[variant="primary"]{ border-radius: 2rem; text-transform: uppercase; } -.chat{ - animation: slide-up 0.3s forwards; -} -@keyframes slide-up{ - from{ - transform: translateY(1rem); - } - to{ - transform: none; - } -} .contact{ position: relative; display: grid; @@ -514,7 +507,7 @@ sm-button[variant="primary"]{ grid-template-columns: auto 1fr auto; grid-template-areas: 'dp . menu' 'dp . menu'; - padding: 0.8rem 1rem; + padding: 0.8rem 1.5rem; align-items: center; &:focus{ background: rgba(var(--text-color), 0.06); @@ -525,7 +518,7 @@ sm-button[variant="primary"]{ } .name{ font-size: 1rem; - font-weight: 500; + font-weight: 400; text-transform: capitalize; } .address{ @@ -553,22 +546,20 @@ sm-button[variant="primary"]{ align-self: center; } .mail-card.unread::before, -.contact.unread::before{ +.contact.unread .initial::before{ content: ''; position: absolute; - width: 0.2rem; - height: 100%; + padding: 0.3rem; + border-radius: 1rem; top: 0; left: 0; - background: #00C853; + background: var(--accent-color); } .mail-card.unread, .contact.unread{ - overflow: hidden; - h4{ + h4, h5 ,p{ font-weight: 700; } - font-weight: 600; } .mail-card{ position: relative; @@ -780,6 +771,7 @@ sm-button[variant="primary"]{ } } #contacts, #mails{ + overflow-y: hidden; position: relative; grid-template-rows: max-content 1fr; height: calc(100vh - 3.5rem); @@ -826,17 +818,44 @@ sm-button[variant="primary"]{ } .initial{ margin-right: 1rem; + width: 1.6em; + height: 1.6em; } h4{ font-weight: 500; - opacity: 0.8; - } - h5{ - opacity: 0.7; - font-weight: 400; + font-size: 0.9rem; } } + #scroll_to_bottom{ + position: fixed; + right: 0; + bottom: 4rem; + width: 2.6rem; + height: 2.6rem; + padding: 0.9rem; + border-radius: 4rem; + z-index: 1; + margin: 1.5rem; + stroke-width: 8; + cursor: pointer; + transform: scale(0); + transition: transform 0.3s; + } footer{ + #toggle_emoji{ + align-self: center; + padding: 0.6rem; + width: 2.6rem; + height: 2.6rem; + border-radius: 2rem; + cursor: pointer; + path{ + fill: rgba(var(--text-color), 0.5); + } + &.active path{ + fill: var(--accent-color); + } + } .flex{ align-items: flex-end; padding: 1rem; @@ -844,6 +863,7 @@ sm-button[variant="primary"]{ sm-textarea::part(textarea){ background: rgba(var(--text-color), 0.1); padding-right: 3rem; + border-radius: 2rem; } } #send_message_button{ @@ -882,14 +902,23 @@ sm-button[variant="primary"]{ .message-body{ 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; box-shadow: 0 1px 0.1rem #00000020; padding: 0.6em 1em; + line-height: 1.5; + a{ + color: inherit; + } } .time{ + white-space: nowrap; font-size: 0.8em; opacity: 0.8; - margin-top: 0.3rem; } } .sent{ @@ -945,12 +974,54 @@ sm-button[variant="primary"]{ } .unconfirmed{ opacity: 0.7; + transform-origin: left; + animation: slide-up 0.3s forwards; + } +} +@keyframes slide-up{ + from{ + transform: translate(-2rem, 2rem) scale(0.8); + } + to{ + transform: none; } } #chat_container{ flex: 1; padding: 0 1rem; } +#emoji_picker{ + display: grid; + background: rgba(var(--text-color), 0.06); + border-radius: 1rem; + margin: 0 1rem; + grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); + box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.3); + padding: 1rem; + overflow-y: auto; + flex-wrap: wrap; + max-height: min(16rem, 30vh); +} +.emoji{ + font-size: 1.6rem; + cursor: pointer; + padding: 0.4rem; + border-radius: 0.6rem; + user-select: none; +} +.big-emoji{ + &::after{ + display: none; + } + .message-body{ + background: none !important; + padding: 0 !important; + font-size: 2.6rem; + } +} +.emoji:hover{ + background: rgba(var(--text-color), 0.1); +} #new_conversation, #no_mails{ height: 100%; justify-content: center; @@ -990,12 +1061,12 @@ sm-button[variant="primary"]{ #dm_container:not(:empty) ~ .empty-state{ display: none; } +#dm_container{ + transition: 0.3s; +} sm-tab-panels{ overflow: hidden auto; } -sm-tab-header{ - --accent-color: rgba(var(--text-color), 0.7); -} #inbox_mail_container, #sent_mail_container @@ -1103,13 +1174,7 @@ sm-tab-header{ height: 100%; } #sing_in{ - grid-template-rows: 16rem 1fr; max-height: 90vh; - background: url(sign-in-back.svg) no-repeat center 6rem; - background-size: 50%; - .left{ - border-radius: 0.5rem 0.5rem 0 0; - } } #landing_illustration{ grid-area: illustration; @@ -1141,7 +1206,7 @@ sm-tab-header{ } ::-webkit-scrollbar-thumb{ - background: rgba(var(--text-color), 0.2); + background: rgba(var(--text-color), 0.3); &:hover{ background: rgba(var(--text-color), 0.5); } @@ -1175,6 +1240,11 @@ sm-tab-header{ } } } + #sign_in_popup{ + .popup-header{ + padding-top: 1.5rem; + } + } #main_navbar{ flex-direction: column; position: relative; @@ -1226,7 +1296,7 @@ sm-tab-header{ #chat{ .message{ .message-body{ - max-width: 50ch ; + max-width: 65ch ; } } } @@ -1280,7 +1350,7 @@ sm-tab-header{ padding: 0.5rem 1.5rem; } #chat_container{ - padding: 1rem 1.5rem; + padding: 1rem 5rem; } } } diff --git a/index.html b/index.html index 3e3deff..4e09aaf 100644 --- a/index.html +++ b/index.html @@ -48,14 +48,12 @@

FLO Messenger -

- Messages or Emails?
- Why Not Both! + Truely Secure, + Private and Reliable.

- Sign In / Sign Up -

New here? Sign up and get your FLO private key.

+ Sign In / Up
@@ -63,16 +61,14 @@
+
+ + close + + + +
-
-
- - close - - - -
-
@@ -368,23 +369,25 @@ Go to main page -
-
-

-
-
+
+

Messages are not encrypted until receiver replies
-
+ + + + +
+
+
-
@@ -920,7 +923,7 @@ await floDapps.clearCredentials() setTimeout(() => { onLoadStartUp() - notifications.clearAll() + getRef('notification_drawer').clearAll() }, 1000); } } @@ -976,7 +979,7 @@ getRef('loading_page').classList.remove("hide-completely") //clear Rendered Elements let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'chat_container', - 'receiver_floID', 'receiver_name', 'mail_contact_list' + 'receiver_name', 'mail_contact_list' ] //, "backup_info" elementsToReset.forEach(e => clearElement(getRef(e))) @@ -1037,7 +1040,8 @@ activeChatPage = getRef('contacts'), activeMailPage = getRef('mails'), activeChat, - activeMail + activeMail, + frag = document.createDocumentFragment() const mainPage = document.querySelector('main') @@ -1127,10 +1131,10 @@ card.querySelector('.address').textContent = floID let initial = card.querySelector('.initial') initial.textContent = name ? name.charAt(0) : 'U' - let randomColor = randomHsl(90, 40) - //cardContainer.setAttribute("text-color", randomColor.primary) - cardContainer.setAttribute("background-color", randomColor.primary) - initial.setAttribute(`style`, `background-color: ${randomColor.primary};`) + let randomColor = randomHsl(70, 30) + cardContainer.setAttribute("text-color", randomColor.primary) + cardContainer.setAttribute("background-color", randomColor.light) + initial.setAttribute(`style`, `background-color: ${randomColor.light}; color: ${randomColor.primary};`) if(type === 'contact'){ cardContainer.classList.add('contact') let duplicateCard = card.cloneNode(true); @@ -1157,7 +1161,13 @@ cardContainer.classList.add('unconfirmed') cardContainer.classList.add(category) - cardContainer.children[0].textContent = message + if(isValidUrl(message)) + cardContainer.children[0].innerHTML = `${message}` + else{ + if(message.length === 2 && isEmoji(message)) + cardContainer.classList.add('big-emoji') + cardContainer.children[0].textContent = message + } cardContainer.children[1].textContent = finalHours if(currentFloID !== floID){ currentDate = null @@ -1167,15 +1177,34 @@ let dateCard = document.createElement('h5') dateCard.classList.add('date-card') dateCard.textContent = new Date().getFullYear() !== year ? `${time.slice(4, 10)} ${year}` : time.slice(4, 10) - getRef('chat_container').appendChild(dateCard) currentDate = `${time.slice(4, 10)} ${year}` + let frag = document.createDocumentFragment() + frag.append(dateCard, card) + return frag } - getRef('chat_container').appendChild(card) + else + return card; }, } - let currentDate, currentFloID + const isValidUrl = (url) => { + try { + new URL(url); + } catch (e) { + return false; + } + return true; + }; + + const isEmoji = (txt) => { + if(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/.test(txt)) + return true + else + return false + } + + function renderDirectUI(data) { console.log(data) renderMessages(data.messages); @@ -1193,6 +1222,13 @@ function renderGroupUI(data){ console.log(data) } + + window.addEventListener('focus', e => { + console.log('focused') + }) + window.addEventListener('blur', e => { + console.log('blured') + }) document.addEventListener('keyup', e => { if(e.target.closest('#send_mail_to')){ @@ -1247,6 +1283,16 @@ } }) + let prevScroll + getRef('chat_container').addEventListener('scroll', function() { + if((this.scrollHeight > this.clientHeight) && (prevScroll - this.scrollTop >= 100)){ + getRef('scroll_to_bottom').classList.add('no-transformations') + } + else{ + getRef('scroll_to_bottom').classList.remove('no-transformations') + } + }) + getRef('send_mail_to').addEventListener('input', function() { getRef('mail_contact_list').classList.remove('hide-completely') if(this.value.trim !== ''){ @@ -1310,29 +1356,48 @@ showPopup('compose_mail_popup') } if(e.target.closest('#chat')){ - let floID = getRef("receiver_floID").textContent; - messenger.removeMark(floID, "unread"); + messenger.removeMark(currentReceiver, "unread"); } //detect click on chat cards if (!e.target.closest("sm-menu") && e.target.closest(".contact")){ + const contact = e.target.closest(".contact") + if(activeChat === contact && window.innerWidth > 640) return getRef('chat_page_button').setAttribute('data-notifications', '0') getRef('chat').classList.remove('hide-completely') - e.target.closest(".contact").classList.remove('unread') - viewConversation(e.target.closest(".contact")) + contact.classList.remove('unread') + viewConversation(contact) if(activeChat) activeChat.classList.remove('active') - e.target.closest(".contact").classList.add('active') - activeChat = e.target.closest(".contact") + contact.classList.add('active') + activeChat = contact if(activeChatPage.id === 'contacts'){ getRef('chat').classList.remove('hide-on-mobile') getRef('contacts').classList.add('hide-on-mobile') activeChatPage = getRef('chat') getRef('main_navbar').classList.add('hide-on-mobile') } - } + } + + //Detect emoji clicks + if(e.target.closest('.emoji')){ + getRef('type_message').value += e.target.closest('.emoji').textContent + getRef('type_message').focusIn() + } }) + const emojis = ["๐Ÿ˜€", "๐Ÿ˜ƒ", "๐Ÿ˜„", "๐Ÿ˜", "๐Ÿ˜†", "๐Ÿ˜…", "๐Ÿ˜‚", "๐Ÿคฃ", "๐Ÿ˜Š", "๐Ÿ˜‡", "๐Ÿ™‚", "๐Ÿ™ƒ", "๐Ÿ˜‰", "๐Ÿ˜Œ", "๐Ÿ˜", "๐Ÿฅฐ", "๐Ÿ˜˜", "๐Ÿ˜—", "๐Ÿ˜™", "๐Ÿ˜š", "๐Ÿ˜‹", "๐Ÿ˜›", "๐Ÿ˜", "๐Ÿ˜œ", "๐Ÿคช", "๐Ÿคจ", "๐Ÿง", "๐Ÿค“", "๐Ÿ˜Ž", "๐Ÿคฉ", "๐Ÿฅณ", "๐Ÿ˜", "๐Ÿ˜’", "๐Ÿ˜ž", "๐Ÿ˜”", "๐Ÿ˜Ÿ", "๐Ÿ˜•", "๐Ÿ™", "โ˜น๏ธ", "๐Ÿ˜ฃ", "๐Ÿ˜–", "๐Ÿ˜ซ", "๐Ÿ˜ฉ", "๐Ÿฅบ", "๐Ÿ˜ข", "๐Ÿ˜ญ", "๐Ÿ˜ค", "๐Ÿ˜ ", "๐Ÿ˜ก", "๐Ÿคฌ", "๐Ÿคฏ", "๐Ÿ˜ณ", "๐Ÿฅต", "๐Ÿฅถ", "๐Ÿ˜ฑ", "๐Ÿ˜จ", "๐Ÿ˜ฐ", "๐Ÿ˜ฅ", "๐Ÿ˜“", "๐Ÿค—", "๐Ÿค”", "๐Ÿคญ", "๐Ÿคซ", "๐Ÿคฅ", "๐Ÿ˜ถ", "๐Ÿ˜", "๐Ÿ˜‘", "๐Ÿ˜ฌ", "๐Ÿ™„", "๐Ÿ˜ฏ", "๐Ÿ˜ฆ", "๐Ÿ˜ง", "๐Ÿ˜ฎ", "๐Ÿ˜ฒ", "๐Ÿฅฑ", "๐Ÿ˜ด", "๐Ÿคค", "๐Ÿ˜ช", "๐Ÿ˜ต", "๐Ÿค", "๐Ÿฅด", "๐Ÿคข", "๐Ÿคฎ", "๐Ÿคง", "๐Ÿ˜ท", "๐Ÿค’", "๐Ÿค•", "๐Ÿค‘", "๐Ÿค ", "๐Ÿ˜ˆ", "๐Ÿ‘ฟ", "๐Ÿ‘น", "๐Ÿ‘บ", "๐Ÿคก", "๐Ÿ’ฉ", "๐Ÿ‘ป", "๐Ÿ’€", "โ˜ ๏ธ", "๐Ÿ‘ฝ", "๐Ÿ‘พ", "๐Ÿค–", "๐ŸŽƒ", "๐Ÿ˜บ", "๐Ÿ˜ธ", "๐Ÿ˜น", "๐Ÿ˜ป", "๐Ÿ˜ผ", "๐Ÿ˜ฝ", "๐Ÿ™€", "๐Ÿ˜ฟ", "๐Ÿ˜พ"]; + let renderedEmojis = '' + emojis.forEach(emoji => { + renderedEmojis += `${emoji}` + }) + getRef('emoji_picker').innerHTML = renderedEmojis + + function toggleEmoji(button){ + button.classList.toggle('active') + getRef('emoji_picker').classList.toggle('hide-completely') + } + function copyToClipboard(target, message, parent){ let copyText, copyTarget = target; if(typeof target === 'string'){ @@ -1384,7 +1449,7 @@ getRef('all_contacts').classList.toggle('no-transformations') } - /*function updateHeight(){ + function updateHeight(){ if(window.innerWidth < 640){ getRef('chat').style.height = window.innerHeight + 'px' getRef('landing_page').style.height = window.innerHeight + 'px' @@ -1394,9 +1459,6 @@ getRef('landing_page').style.height = '100vh' } } - window.addEventListener('resize', e => { - requestAnimationFrame(updateHeight) - })*/ function goto(page){ if(page === 'chats'){ @@ -1460,7 +1522,7 @@ } }) - getRef('contacts_container').addEventListener('click', function (e) { + getRef('dm_container').addEventListener('click', function (e) { let floID; if (e.target.closest(".send-mail-option")){ showPopup('compose_mail_popup') @@ -1567,18 +1629,30 @@ }) function sendMessage() { - let receiver = getRef("receiver_floID").textContent; + let receiver = currentReceiver let container; let message = getRef('type_message').value; getRef('type_message').value = '' if(message.trim() === '') return let time = Date.now() - render.messageBubble(receiver, message, time, 'sent', true) - getRef('chat_container').scrollTo({left: 0, top: getRef('chat_container').scrollHeight, behavior: 'smooth'}) - const cloneContact = activeChat.cloneNode(true) - activeChat.remove() - activeChat = cloneContact - getRef('dm_container').prepend(cloneContact) + getRef('chat_container').append(render.messageBubble(receiver, message, time, 'sent', true)) + scrollToBottom(true) + if(activeChat !== getRef('dm_container').children[0]){ + const contact = getRef('dm_container').querySelector(`.chat[flo-id="${activeChat.getAttribute('flo-id')}"]`) + const cloneContact = contact.cloneNode(true) + contact.remove() + activeChat = cloneContact + getRef('dm_container').prepend(cloneContact) + animateTo(getRef('dm_container').children[0], [ + {transform: 'translateY(1rem)'}, + {transform: 'none'}, + ], + { + easing: 'ease', + duration: 300 + } + ) + } messenger.sendMessage(message, receiver).then(data => { getRef(`${receiver}_${time}`).classList.remove('unconfirmed') }).catch(error => notify(error, "error")); @@ -1625,38 +1699,54 @@ data[d].forEach(mark => element.classList.add(mark)) } } + + function scrollToBottom(smooth = false){ + getRef('chat_container').scrollTo({top: getRef('chat_container').scrollHeight, behaviour: smooth ? 'smooth': ''}) + } + function renderMessages(data, markUnread = true, unconfirmed = false) { for (let m in data) { let {floID, message, time, category} = data[m] - render.messageBubble(floID, message, time, category, unconfirmed) - if (markUnread){ - const contact = getRef('contacts').querySelector(`.chat[flo-id='${floID}']`) - contact.classList.add("unread"); - const cloneContact = contact.cloneNode(true) - contact.remove() - getRef('dm_container').prepend(cloneContact) + frag.append(render.messageBubble(floID, message, time, category, unconfirmed)) + if (markUnread && activeChat !== getRef('dm_container').children[0]){ + const contact = getRef('dm_container').querySelector(`.chat[flo-id='${floID}']`) + contact.classList.add("unread"); + const cloneContact = contact.cloneNode(true) + contact.remove() + getRef('dm_container').prepend(cloneContact) + animateTo(getRef('dm_container').children[0], [ + {transform: 'translateY(1rem)'}, + {transform: 'none'}, + ], + { + easing: 'ease', + duration: 300 + } + ) + } } - } - getRef('chat_container').scrollTo(0, getRef('chat_container').scrollHeight) + getRef('chat_container').append(frag) + scrollToBottom() } - + + let currentReceiver async function viewConversation(contact) { getRef('chat_container').innerHTML = '' let floID = contact.getAttribute("flo-id"), name = contact.getAttribute('name'), textColor = contact.getAttribute('text-color'), backgroundColor = contact.getAttribute('background-color') - let currentConversation = getRef("receiver_floID").textContent; + currentReceiver = floID getRef("receiver_initial").textContent = floGlobals.contacts[floID] ? floGlobals.contacts[floID].charAt(0) : name.charAt(0) || ' '; getRef("receiver_initial").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`) getRef("receiver_name").textContent = floGlobals.contacts[floID] || name || ' '; - getRef("receiver_floID").textContent = floID; if (floGlobals.pubKeys[floID]) getRef("warn_no_encryption").classList.add("hide-completely"); else getRef("warn_no_encryption").classList.remove("hide-completely"); renderMessages(await messenger.getChat(floID), false) - getRef('chat_container').scrollTo(0, getRef('chat_container').scrollHeight) + scrollToBottom() + prevScroll = getRef('chat_container').scrollTop messenger.removeMark(floID, "unread"); } @@ -1799,6 +1889,7 @@ } const windowSizeObserver = new ResizeObserver(entries => { + updateHeight() if(entries[0].borderBoxSize[0].inlineSize > 640){ getRef('settings_sidebar').style = '' getRef('settings_panel').style = '' @@ -8747,7 +8838,6 @@ Bitcoin.Util = { } })(); -