From dfa59b25879f5ce7116f283a7a1a2c4d01e78e29 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 11 Jan 2021 15:57:03 +0530 Subject: [PATCH] Unified time display method to show relative time --- assets/messenger-favicon.png | Bin 888 -> 0 bytes assets/messenger-favicon.svg | 1 - assets/messenger-favicon_1.png | Bin 0 -> 8090 bytes css/main.css | 7 +- css/main.min.css | 2 +- css/main.scss | 7 +- index.html | 168 ++++++++++++++++++--------------- 7 files changed, 100 insertions(+), 85 deletions(-) delete mode 100644 assets/messenger-favicon.png delete mode 100644 assets/messenger-favicon.svg create mode 100644 assets/messenger-favicon_1.png diff --git a/assets/messenger-favicon.png b/assets/messenger-favicon.png deleted file mode 100644 index e4552be4554bc16959aef90444f90595654e57e0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 888 zcmV-;1Bd*HP)fx829-CE zC#W?+r3q?pAWh)liX*^?q(zZOijqITfFUV1-s9czNHZU9w;MbtIRKO&A5i-i04f0Z z0|3vDWB>{;0pK41d>0p=l*iTw3jYNFKXl60Y(N13ukvW?SepR_6*mTt$f(PF#%VCdS|CO7ClrrwLK~2x zc%VA;pO6L^7a%iJivoy*ssTBzw^QUrHXuXD~+O{1{vY%>5H{PbTb?J0ozU zz*e~ukDAu@mFqVy)qs{p`>foV2uCNlQLcnVba>w45snD(odIm=X?Ac9cO6UmakStX zbs3Hn(9PG}>_do0mQVv)>JEdz(FcU?0lvC6IX3u4KA^=nH%e2vq>v zSQ{)U8qm_`dav|s@G)Q;U=J{=c*Ms5?hq9%ZZz?T&os!j1s;7DNXE4l&OOCnsi!~8 zC0yWYz~qewn${|6X@kz~Q*cQE%+tThRh3>6Y`sq(8Q52vDl_SDec)We$-`b4A@Dhz3v`1 zSR!LJ05>6j)BEUsdJOK>fJ~b5j&toZm~R-PlwZ8nBTB zud3LY7#6{bOeofv?>gifP)Y|B9zr}K3=rpWR$J^$U \ No newline at end of file diff --git a/assets/messenger-favicon_1.png b/assets/messenger-favicon_1.png new file mode 100644 index 0000000000000000000000000000000000000000..79ea100a2744f07f67e87299df5dcfa59bf9b576 GIT binary patch literal 8090 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 DGmY9p literal 0 HcmV?d00001 diff --git a/css/main.css b/css/main.css index 16a6071..42a03b0 100644 --- a/css/main.css +++ b/css/main.css @@ -628,6 +628,7 @@ sm-button[variant=primary] .icon { } .mail-card .date { margin-left: auto; + font-weight: 500; white-space: nowrap; } .mail-card .subject { @@ -1136,7 +1137,7 @@ sm-button[variant=primary] .icon { } #dm_container { - transition: 0.3s; + padding-bottom: 3.5rem; } sm-tab-panels { @@ -1145,7 +1146,7 @@ sm-tab-panels { #inbox_mail_container, #sent_mail_container { - padding-bottom: 6rem; + padding-bottom: 3.5rem; } #chat, #mail { @@ -1154,7 +1155,7 @@ sm-tab-panels { #mail { height: 100vh; - padding: 1.5rem; + padding: 0 1.5rem; align-items: flex-start; } #mail .flex { diff --git a/css/main.min.css b/css/main.min.css index dd59d08..28efe79 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -#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}*,::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:#1976D2;--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 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}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;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{filter:drop-shadow(0 .4rem .3rem rgba(0, 0, 0, .2));margin-right:1rem;position:fixed;right:0;bottom: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);pointer-events:none}#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;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{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),.8);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,.contact .last-message,.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{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.5rem;height:2.5rem;color:#fff;box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase}.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;color:rgba(var(--text-color),.8)}.contact .last-message{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgba(var(--text-color),.9)}.contact .time{font-weight:400;opacity:.8;grid-area:menu;align-self:flex-start}#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}#contacts header,#mails header,.mail-card{padding:1rem 1.5rem}.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}.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;flex-direction:column;bottom:0;top:0;padding:0;width:max(18rem,80vw);height:100vh;background:rgba(var(--foreground-color),1)}#chat .sent .message-body,#main_navbar .active{background:var(--accent-color)}#main_navbar .logo-section{margin:1rem 0 1.5rem;padding:0 1rem}#main_navbar .active .icon{stroke:#fff}#main_navbar .active .label{color:#fff}#main_navbar .label{font-size:.9rem}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem 1.2rem}#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}#contacts #all_contacts,.back{background-color:rgba(var(--foreground-color),1)}#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 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){border-radius:3rem;padding:.5rem 1rem}#contacts #all_contacts{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;z-index:1;transition:transform .3s;transform:translateX(-100%)}#selected_contacts{padding:1.5rem;background:rgba(var(--text-color),.06)}#selected_contacts h4{font-weight:500;font-size:1rem}#selected_contacts sm-button{margin-bottom:0}#contacts,#mails{overflow-y:hidden;position:relative;grid-template-rows:max-content 1fr;height:100vh}#contacts header h4,#mails header h4{text-transform:capitalize}#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}#chat header .back-button{padding:.1rem;stroke-width:8;margin-right:.5rem}#chat header .initial{margin-right:1rem}#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 1rem 1rem .4rem}#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 rgba(0,0,0,.16);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{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;text-align:center}.big-emoji::after{display:none}.big-emoji .message-body{background:0 0!important;box-shadow:none!important;padding:0!important;font-size:2.6rem}#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;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{height:100vh}#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_title{text-transform:capitalize}#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}#main_navbar{transform:translateX(-100%);transition:transform .3s;z-index:4}#chat header{padding:1rem}#chat header .initial{width:2rem;height:2rem}#chat .message{width:fit-content;max-width:90%}#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);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.hide-on-desktop{display:none!important}.page{padding-bottom:0}.fab{position:absolute}.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{position:relative;width:auto;background:rgba(var(--text-color),.06);padding-bottom:.5rem}#main_navbar .navbar-item{margin:0 .5rem;border-radius:.5rem}#main_navbar .navbar-item .icon{margin-right:0}#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;box-shadow:0 0 1rem rgba(0,0,0,.1);z-index:1}#contacts,#mails,#settings_sidebar{height:100vh;background-color:rgba(157,166,255,.063)}#settings_page{display:grid;height:100vh;box-shadow:0 0 1rem rgba(0,0,0,.1);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}#main_navbar{width:12rem}#main_navbar .navbar-item .icon{margin-right:.8rem}#main_navbar .label{display:block}#chat_page,#mail_page{grid-template-columns:21rem 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}.emoji:hover{background:rgba(var(--text-color),.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}.hide,span.ripple{pointer-events:none}.contact .last-message,.copy-row .copy,.mail-card .sender,.text-overflow{text-overflow:ellipsis;white-space:nowrap}*,::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:#1976D2;--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 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}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}.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-right:1rem;position:fixed;right:0;bottom: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;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: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 h5{font-size:1.1rem!important;font-weight:500}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color),.8);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,.contact .last-message,.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{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.5rem;height:2.5rem;color:#fff;box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase}#contacts header h4,#mails header h4,#settings_page #settings_title,.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;color:rgba(var(--text-color),.8)}.contact .last-message{overflow:hidden;color:rgba(var(--text-color),.9)}.contact .time{font-weight:400;opacity:.8;grid-area:menu;align-self:flex-start}#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}#contacts header,#mails header,.mail-card{padding:1rem 1.5rem}.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}.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)}#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;flex-direction:column;bottom:0;top:0;padding:0;width:max(18rem,80vw);height:100vh;background:rgba(var(--foreground-color),1)}#chat .sent .message-body,#main_navbar .active{background:var(--accent-color)}#main_navbar .logo-section{margin:1rem 0 1.5rem;padding:0 1rem}#main_navbar .active .icon{stroke:#fff}#main_navbar .active .label{color:#fff}#main_navbar .label{font-size:.9rem}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem 1.2rem}#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}#contacts #all_contacts,.back{background-color:rgba(var(--foreground-color),1)}#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 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){border-radius:3rem;padding:.5rem 1rem}#contacts #all_contacts{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;z-index:1;transition:transform .3s;transform:translateX(-100%)}#selected_contacts{padding:1.5rem;background:rgba(var(--text-color),.06)}#selected_contacts h4{font-weight:500;font-size:1rem}#selected_contacts sm-button{margin-bottom:0}#contacts,#mails{overflow-y:hidden;position:relative;grid-template-rows:max-content 1fr;height:100vh}#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}#chat header .back-button{padding:.1rem;stroke-width:8;margin-right:.5rem}#chat header .initial{margin-right:1rem}#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 1rem 1rem .4rem}#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 rgba(0,0,0,.16);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{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;text-align:center}.big-emoji::after{display:none}.big-emoji .message-body{background:0 0!important;box-shadow:none!important;padding:0!important;font-size:2.6rem}#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,#inbox_mail_container,#sent_mail_container{padding-bottom:3.5rem}#chat,#mail{background:rgba(var(--foreground-color),1)}#mail{height:100vh;padding:0 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;margin-left:-.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page{height:100vh}#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}#main_navbar{transform:translateX(-100%);transition:transform .3s;z-index:4}#chat header{padding:1rem}#chat header .initial{width:2rem;height:2rem}#chat .message{width:fit-content;max-width:90%}#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);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.hide-on-desktop{display:none!important}.page{padding-bottom:0}.fab{position:absolute}.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{position:relative;width:auto;background:rgba(var(--text-color),.06);padding-bottom:.5rem}#main_navbar .navbar-item{margin:0 .5rem;border-radius:.5rem}#main_navbar .navbar-item .icon{margin-right:0}#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;box-shadow:0 0 1rem rgba(0,0,0,.1);z-index:1}#contacts,#mails,#settings_sidebar{height:100vh;background-color:rgba(157,166,255,.063)}#settings_page{display:grid;height:100vh;box-shadow:0 0 1rem rgba(0,0,0,.1);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}#main_navbar{width:12rem}#main_navbar .navbar-item .icon{margin-right:.8rem}#main_navbar .label{display:block}#chat_page,#mail_page{grid-template-columns:21rem 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}.emoji:hover{background:rgba(var(--text-color),.1)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 85ea364..6d5c1f6 100644 --- a/css/main.scss +++ b/css/main.scss @@ -573,6 +573,7 @@ sm-button[variant="primary"]{ } .date{ margin-left: auto; + font-weight: 500; white-space: nowrap; } .subject{ @@ -1071,7 +1072,7 @@ sm-button[variant="primary"]{ display: none; } #dm_container{ - transition: 0.3s; + padding-bottom: 3.5rem; } sm-tab-panels{ overflow: hidden auto; @@ -1080,14 +1081,14 @@ sm-tab-panels{ #inbox_mail_container, #sent_mail_container { - padding-bottom: 6rem; + padding-bottom: 3.5rem; } #chat, #mail{ background: rgba(var(--foreground-color), 1); } #mail{ height: 100vh; - padding: 1.5rem; + padding: 0 1.5rem; align-items: flex-start; .flex{margin-top: 1rem; sm-button:first-of-type{ diff --git a/index.html b/index.html index e9618a8..56834e6 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ FLO Messenger - + @@ -242,14 +242,13 @@ @@ -300,7 +299,7 @@
-

Direct Messages

+

Chats

Create a group @@ -661,7 +660,7 @@ }) function setAttributes(el, attrs) { - for (var key in attrs) { + for (key in attrs) { el.setAttribute(key, attrs[key]); } } @@ -752,15 +751,19 @@ function getFormatedTime(time, relative) { try { if (String(time).indexOf('_')) - time = String(time).split('_')[0] - let timeFrag = new Date(parseInt(time)).toString().split(' '), + time = String(time).split('_')[0] + const intTime = parseInt(time) + if(String(intTime).length < 13) + time *= 1000 + let timeFrag = new Date(intTime).toString().split(' '), day = timeFrag[0], month = timeFrag[1], date = timeFrag[2], year = timeFrag[3], - minutes = new Date(parseInt(time)).getMinutes(), - hours = new Date(parseInt(time)).getHours(), + minutes = new Date(intTime).getMinutes(), + hours = new Date(intTime).getHours(), currentTime = new Date().toString().split(' ') + minutes = minutes < 10 ? `0${minutes}` : minutes let finalHours = ``; if (hours > 12) @@ -773,12 +776,23 @@ finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM` if (relative) { if (year == currentYear) { - if (currentTime[1] === month && date === currentTime[2]) - return `Today at ${finalHours}`; + if (currentTime[1] === month){ + const dateDiff = (parseInt(currentTime[2]) - parseInt(date)) + if(dateDiff === 0) + return `${finalHours}`; + else if(dateDiff === 1) + return `yesterday`; + else if(dateDiff > 1 && dateDiff < 8) + return currentTime[0]; + else + return ` ${date} ${month}`; + } else return ` ${date} ${month}`; } + else + return `${month} ${year}`; } else return `${month} ${date} ${year}`; @@ -1058,18 +1072,9 @@ // render elements const render = { mailCard(floID, ref, subject, timestamp, content, markUnread){ + console.log(timestamp) let card = getRef('mail_card_template').content.cloneNode(true), - cardContainer = card.querySelector('.mail-card'), - time = new Date(timestamp).toString(), - minutes = String(new Date(timestamp).getMinutes()), - hours = new Date(timestamp).getHours(), - dateTime - minutes = minutes.length === 1 ? `0${minutes}` : minutes - let finalHours = hours - 12 > 0 ? `${hours - 12}:${minutes} pm` : `${hours}:${minutes} am` - if(new Date().getDate() === new Date(timestamp).getDate()) - dateTime = finalHours - else - dateTime = time.slice(4, 10) + cardContainer = card.firstElementChild let mailSummery = content.split(' ') mailSummery.splice(16) mailSummery = mailSummery.join(' ') @@ -1089,26 +1094,16 @@ contact = floGlobals.contacts[floID] || floID if(markUnread) cardContainer.classList.add('unread') - card.querySelector('.sender').textContent = contact - card.querySelector('.subject').textContent = subject - card.querySelector('.date').textContent = dateTime - card.querySelector('.description').textContent = mailSummery + cardContainer.querySelector('.sender').textContent = contact + cardContainer.querySelector('.subject').textContent = subject + cardContainer.querySelector('.date').textContent = getFormatedTime(timestamp, true) + cardContainer.querySelector('.description').textContent = mailSummery return card }, mail(from, to, subject, timestamp, content){ let card = getRef('mail_template').content.cloneNode(true), - cardContainer = card.querySelector('.mail'), - time = new Date(timestamp).toString(), - minutes = String(new Date(timestamp).getMinutes()), - hours = new Date(timestamp).getHours(), - dateTime - minutes = minutes.length === 1 ? `0${minutes}` : minutes - let finalHours = hours - 12 > 0 ? `${hours - 12}:${minutes} pm` : `${hours}:${minutes} am` - if(new Date().getDate() === new Date(timestamp).getDate()) - dateTime = finalHours - else - dateTime = time.slice(4, 10) + cardContainer = card.querySelector('.mail') let senderName, floID if(from === myFloID){ let count = 0, list = []; @@ -1128,7 +1123,7 @@ card.querySelector('.sender-name').textContent = senderName card.querySelector('.flo-id').textContent = floID card.querySelector('.mail-subject').textContent = subject - card.querySelector('.date').textContent = dateTime; + card.querySelector('.date').textContent = getFormatedTime(timestamp); card.querySelector('.mail-content').textContent = content return card }, @@ -1137,10 +1132,13 @@ cardContainer = card.firstElementChild cardContainer.setAttribute("name", name || 'Unknown') cardContainer.setAttribute("flo-id", floID) - card.querySelector('.name').textContent = name || 'Unknown' - const lastMessage = Object.values(await messenger.getChat(floID)).pop() - card.querySelector('.last-message').textContent = lastMessage.message - card.querySelector('.time').textContent = getFormatedTime(lastMessage.time, true) + cardContainer.querySelector('.name').textContent = name || 'Unknown' + messenger.getChat(floID).then(chat => { + const lastMessage = Object.values(chat).pop() + console.log(chat, lastMessage) + cardContainer.querySelector('.last-message').textContent = lastMessage.message + cardContainer.querySelector('.time').textContent = getFormatedTime(lastMessage.time, true) + }) let initial = card.querySelector('.initial') initial.textContent = name ? name.charAt(0) : 'U' let color = randomColor() @@ -1173,8 +1171,13 @@ cardContainer.classList.add('unconfirmed') cardContainer.classList.add(category) - if(isValidUrl(message)) - cardContainer.children[0].innerHTML = `${message}` + if(isValidUrl(message)){ + const anchorTag = document.createElement('a') + anchorTag.href = message + anchorTag.target="_blank" + anchorTag.textContent = message + cardContainer.children[0].append(anchorTag) + } else{ if(message.length === 2 && isEmoji(message)) cardContainer.classList.add('big-emoji') @@ -1292,6 +1295,10 @@ else getRef('mail_contact_list').lastElementChild.focus() } + if(e.code === 'Enter' || e.code === 'Space'){ + getRef('send_mail_to').value = document.activeElement.getAttribute('flo-id') + getRef('mail_contact_list').classList.add('hide-completely') + } } }) @@ -1338,14 +1345,10 @@ if(target.dataset.target) showPanel(target, target.dataset.target) } - else if(e.target.closest('.contact')){ + else if(e.target.closest('.contact') && e.target.closest('#mail_contact_list')){ getRef('send_mail_to').value = e.target.closest('.contact').getAttribute('flo-id') getRef('mail_contact_list').classList.add('hide-completely') } - else if(e.target.closest('.contact') && e.code === 'Enter' || e.code === 'Space'){ - getRef('send_mail_to').value = document.activeElement.getAttribute('flo-id') - getRef('mail_contact_list').classList.add('hide-completely') - } if(e.target.closest('.navbar-item') && activePage.button !== e.target.closest('.navbar-item')){ let targetButton = e.target.closest('.navbar-item'), targetPage = getRef(targetButton.dataset.target) @@ -1379,26 +1382,6 @@ getRef('send_mail_to').value = floID; return false; } - - //detect click on chat cards - if (!e.target.closest("sm-menu") && e.target.closest(".contact")){ - const contact = e.target.closest(".contact") - if(activeChat['chatCard'] === contact && window.innerWidth > 640) return - getRef('chat_page_button').setAttribute('data-notifications', '0') - getRef('chat').classList.remove('hide-completely') - contact.classList.remove('unread') - viewConversation(contact) - if(activeChat['chatCard']) - activeChat['chatCard'].classList.remove('active') - contact.classList.add('active') - activeChat['chatCard'] = 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')){ @@ -1407,6 +1390,39 @@ } }) + let clickedContact = {} + getRef('contacts').addEventListener('click', e => { + //detect click on chat cards + if (e.target.closest(".contact")){ + const contact = e.target.closest(".contact") + clickedContact['card'] = contact + clickedContact['floID'] = contact.getAttribute("flo-id") + if(e.target.closest("sm-menu")){ + //show contact detail popup + } + else if(isCreatingGroup){ + // code for adding group members + } + else{ + if(activeChat['chatCard'] === contact && window.innerWidth > 640) return + getRef('chat_page_button').setAttribute('data-notifications', '0') + getRef('chat').classList.remove('hide-completely') + contact.classList.remove('unread') + viewConversation(contact) + if(activeChat['chatCard']) + activeChat['chatCard'].classList.remove('active') + contact.classList.add('active') + activeChat['chatCard'] = 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') + } + } + } + }) + const emojis = ["๐Ÿ˜€", "๐Ÿ˜ƒ", "๐Ÿ˜„", "๐Ÿ˜", "๐Ÿ˜†", "๐Ÿ˜…", "๐Ÿ˜‚", "๐Ÿคฃ", "๐Ÿ˜Š", "๐Ÿ˜‡", "๐Ÿ™‚", "๐Ÿ™ƒ", "๐Ÿ˜‰", "๐Ÿ˜Œ", "๐Ÿ˜", "๐Ÿฅฐ", "๐Ÿ˜˜", "๐Ÿ˜—","๐Ÿ˜™", "๐Ÿ˜š", "๐Ÿ˜‹", "๐Ÿ˜›", "๐Ÿ˜", "๐Ÿ˜œ", "๐Ÿคช", "๐Ÿคจ", "๐Ÿง", "๐Ÿค“", "๐Ÿ˜Ž", "๐Ÿคฉ", "๐Ÿฅณ", "๐Ÿ˜", "๐Ÿ˜’", "๐Ÿ˜ž", "๐Ÿ˜”", "๐Ÿ˜Ÿ", "๐Ÿ˜•", "๐Ÿ™", "โ˜น๏ธ", "๐Ÿ˜ฃ", "๐Ÿ˜–", "๐Ÿ˜ซ", "๐Ÿ˜ฉ", "๐Ÿฅบ", "๐Ÿ˜ข", "๐Ÿ˜ญ", "๐Ÿ˜ค", "๐Ÿ˜ ", "๐Ÿ˜ก", "๐Ÿคฌ", "๐Ÿคฏ", "๐Ÿ˜ณ", "๐Ÿฅต", "๐Ÿฅถ", "๐Ÿ˜ฑ", "๐Ÿ˜จ", "๐Ÿ˜ฐ", "๐Ÿ˜ฅ", "๐Ÿ˜“", "๐Ÿค—", "๐Ÿค”", "๐Ÿคญ", "๐Ÿคซ", "๐Ÿคฅ", "๐Ÿ˜ถ", "๐Ÿ˜", "๐Ÿ˜‘", "๐Ÿ˜ฌ", "๐Ÿ™„", "๐Ÿ˜ฏ", "๐Ÿ˜ฆ", "๐Ÿ˜ง", "๐Ÿ˜ฎ", "๐Ÿ˜ฒ", "๐Ÿฅฑ", "๐Ÿ˜ด", "๐Ÿคค", "๐Ÿ˜ช", "๐Ÿ˜ต", "๐Ÿค", "๐Ÿฅด", @@ -1447,21 +1463,19 @@ }) } - let isEnterSendToggle = getRef('is_enter_send_toggle'), - isEnterSend = true - + let isEnterSend = true if(localStorage.getItem('isEnterSend') === null) localStorage.setItem('isEnterSend', 'true') if (localStorage.isEnterSend === 'true') { isEnterSend = true - isEnterSendToggle.checked = true; + getRef('is_enter_send_toggle').checked = true; } else { isEnterSend = false - isEnterSendToggle.checked = false; + getRef('is_enter_send_toggle').checked = false; } - isEnterSendToggle.addEventListener('change', function(){ + getRef('is_enter_send_toggle').addEventListener('change', function(){ if(this.checked){ isEnterSend = true localStorage.setItem("isEnterSend", 'true'); @@ -1711,7 +1725,7 @@ async function renderChatList() { getRef('dm_container').innerHTML = '' for (floID of messenger.getChatOrder().direct){ - await render.contactCard(floID, floGlobals.contacts[floID], 'chat') + render.contactCard(floID, floGlobals.contacts[floID], 'chat') } } @@ -1764,7 +1778,7 @@ async function viewConversation(contact) { getRef('chat_container').innerHTML = '' - let floID = contact.getAttribute("flo-id"), + let floID = clickedContact['floID'], name = contact.getAttribute('name'), textColor = contact.getAttribute('text-color'), backgroundColor = contact.getAttribute('background-color')