0.0.33

Complete UI overhaul

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

README.md

@@ -1,3 +1,2 @@
-# FLO_Messenger
-
-Messenger App based of FLO blockchain and Cloud API
+# messenger
+ 

assets/add contact illustration.svg

@@ -0,0 +1,5 @@
+<svg width="299" height="299" viewBox="0 0 299 299" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="149.5" cy="149.5" r="149" stroke="black"/>
+<path d="M105 149.31H194.605" stroke="black" stroke-width="3"/>
+<path d="M149.359 105L149.359 194.605" stroke="black" stroke-width="3"/>
+</svg>

assets/corner.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="27" viewBox="0 0 29 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.5 26.5V0.5C25.1667 10 11.3 22.9 0.5 26.5" stroke="black"/>
+</svg>

assets/lock.svg

@@ -0,0 +1,24 @@
+<svg width="184" height="280" viewBox="0 0 184 280" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<path d="M61.7756 195.257L70.5122 180.085C73.1971 175.397 78.1833 172.541 83.5958 172.541H101.112C106.524 172.541 111.51 175.439 114.195 180.085L122.932 195.257C125.617 199.945 125.617 205.698 122.932 210.386L114.195 225.558C111.51 230.246 106.524 233.101 101.112 233.101H83.5958C78.1833 233.101 73.1971 230.203 70.5122 225.558L61.7756 210.386C59.0907 205.698 59.0907 199.945 61.7756 195.257ZM81.9337 221.424L83.2548 223.683C84.235 225.345 86.025 226.367 87.9428 226.367H96.8072C98.725 226.367 100.515 225.345 101.495 223.683L102.816 221.424C104.905 217.801 102.305 213.326 98.1284 213.326H86.6216C82.4451 213.284 79.8454 217.801 81.9337 221.424Z" fill="#FBB03B"/>
+<path d="M61.7756 210.386L70.5122 225.558C73.1971 230.246 78.1833 233.101 83.5958 233.101H92.375V226.41H87.9428C86.025 226.41 84.235 225.387 83.2548 223.725L81.9337 221.466C79.8454 217.844 82.4451 213.369 86.6216 213.369H92.375V172.627H83.5958C78.1833 172.627 73.1971 175.525 70.5122 180.17L61.7756 195.342C59.0907 199.945 59.0907 205.698 61.7756 210.386Z" fill="#D8701A"/>
+<path d="M92.8438 29.1333C84.0646 29.1333 76.0951 32.7132 70.2991 38.4665C64.5457 44.2199 60.9659 52.1894 60.9659 61.0112V102.947L74.3478 97.5771V61.0112C74.3478 50.8256 82.6156 42.5578 92.8012 42.5578C97.9153 42.5578 102.518 44.6035 105.842 47.9703C109.166 51.2944 111.255 55.9398 111.255 61.0112V71.964C111.851 72.0066 112.405 72.0918 113.002 72.177L118.329 72.8589L124.679 73.6687V60.9686C124.679 43.4102 110.445 29.1333 92.8438 29.1333Z" fill="#4D4D4D"/>
+<path d="M92.8438 14.899C80.6978 14.899 69.7024 19.8427 61.733 27.7696C53.7635 35.739 48.8625 46.7344 48.8625 58.8804V102.904L67.3585 84.4083V58.8804C67.3585 44.774 78.78 33.3525 92.8864 33.3525C99.9183 33.3525 106.311 36.2078 110.914 40.8105C115.516 45.4132 118.372 51.8059 118.372 58.8378V72.8589L124.722 73.6687L132.904 74.7341L136.868 75.2455V58.8804C136.868 34.5884 117.136 14.899 92.8438 14.899Z" fill="#808080"/>
+<path d="M136.868 58.923V75.2881L132.904 74.7767L124.722 73.7113L118.372 72.9016V58.9656C118.372 51.9337 115.516 45.5411 110.914 40.9384C106.311 36.3357 99.9183 33.4803 92.8864 33.4803V14.899C117.136 14.899 136.868 34.5884 136.868 58.923Z" fill="#CCCCCC"/>
+<path d="M154 91.0567V178.934C154 181.15 152.381 182.983 150.164 183.281L132.862 185.54V84.4509L150.164 86.667C152.381 86.9654 154 88.8405 154 91.0567Z" fill="#D8701A"/>
+<path d="M113.045 81.8939C106.183 80.9989 99.2791 80.5727 92.375 80.5727C85.471 80.5727 78.5669 80.9989 71.7055 81.8939L52.1866 84.4083V185.54L71.7055 188.054C78.5669 188.949 85.471 189.375 92.375 189.375C99.2791 189.375 106.183 188.949 113.045 188.054L132.904 185.497V84.4509L113.045 81.8939Z" fill="#F7931E"/>
+<path d="M52.2293 84.4083V185.54L34.5856 183.238C32.4121 182.94 30.75 181.108 30.75 178.891V91.0566C30.75 88.8405 32.3695 87.008 34.5856 86.7096L52.2293 84.4083Z" fill="#FBB03B"/>
+<path d="M99.3217 211.92H85.4283C80.3995 211.92 77.2458 217.375 79.7602 221.722L81.337 224.492C82.4877 226.495 84.6612 227.774 87.0052 227.774H97.7448C100.089 227.774 102.22 226.538 103.413 224.492L104.99 221.722C107.504 217.375 104.351 211.92 99.3217 211.92ZM101.836 220.017L100.643 222.063C99.7478 223.597 98.1284 224.492 96.381 224.492H88.3263C86.579 224.492 84.9595 223.555 84.0646 222.063L82.8713 220.017C80.9961 216.736 83.3401 212.687 87.133 212.687H97.5743C101.367 212.687 103.711 216.778 101.836 220.017Z" fill="#A03C1D"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0.75" y="0.899048" width="183.25" height="278.202" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="15"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

assets/mascot.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><defs><style>.a{fill:#fff;}.b{fill:#ccc;}.c{fill:none;}.c,.d,.e{stroke:#000;stroke-miterlimit:10;stroke-width:12px;}.d{fill:#ed1c24;}.e{fill:#d30d41;}</style></defs><title>mascot</title><path class="a" d="M506,367.94v51.19a52,52,0,0,1-52,52H130.4a52,52,0,0,1-52-52V183.69L9.58,40.88,454,43.24a52,52,0,0,1,52,52.05V225.38"/><path class="b" d="M506,98.69V431.58c.57,56.06-149.95,44-149.95,44a52,52,0,0,0,52-52V44.86L454,46.65A52,52,0,0,1,506,98.69Z"/><line class="c" x1="506" y1="273.75" x2="506" y2="327.21"/><path class="c" d="M506,367.94v51.19a52,52,0,0,1-52,52H130.4a52,52,0,0,1-52-52V183.69L9.58,40.88,454,43.24a52,52,0,0,1,52,52.05V225.38"/><path class="d" d="M361.83,340a69.63,69.63,0,1,1-139.26,0C222.57,301.5,361.83,301.5,361.83,340Z"/><path class="c" d="M152,242.43a34.32,34.32,0,0,1,64.68.2"/><path class="c" d="M367.79,242.43a34.32,34.32,0,0,1,64.68.2"/><path class="e" d="M325,314.13c21,4.22,36.85,12.82,36.85,25.8a69.7,69.7,0,0,1-41.09,63.58"/></svg>

assets/new conversation.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 512 512">
+<title>new conversation</title>
+<path d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72"/>
+<ellipse cx="423.3" cy="342.48" rx="84.7" ry="84.7"/>
+<path d="M423.3,261.78a80.7,80.7,0,1,1-80.71,80.7,80.79,80.79,0,0,1,80.71-80.7m0-8a88.7,88.7,0,1,0,88.7,88.7,88.71,88.71,0,0,0-88.7-88.7Z"/>
+<line  x1="423.3" y1="306.34" x2="423.3" y2="379.64"/>
+<line x1="459.95" y1="342.99" x2="386.65" y2="342.99"/>
+</svg>

assets/no-mails.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 512 512">
+<path d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z"/>
+<path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66"/>
+</svg>

css/dist/bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><style>.a{fill:#a579cc;opacity:0.2;}</style></defs><title>bg</title><path class="a" d="M623,1159c-87.68-165.38-129.16-438.77-9-634,37.72-61.28,92.93-117.41,455-293C1411,66.13,1582-16.8,1697-36c82.8-13.83,576.06-96.19,867,204,292.32,301.61,256.84,861.93,14,1172C2127.64,1915.05,909.4,1699.22,623,1159Z"/><path class="a" d="M810,1133c-49.8-128.47-45-298.39,23-435,76.63-154,210-218.3,429-320,274.53-127.47,576.8-267.83,916-172,85.07,24,231.42,67.54,340,204,122.67,154.17,121.49,331.91,121,406-1.57,237.61-115.25,473.71-277,614C1914.69,1818,981.6,1575.63,810,1133Z"/><path class="a" d="M1181,1142c-62.16-209.22,55-403,70-427,156.87-251,473.31-278.8,578-288,74.9-6.58,251.61-19.83,441,75,89.21,44.67,290.7,145.55,328,349,31.94,174.23-75.8,318.54-109,363-83.65,112-184,158.9-317,219-227.94,103-404.87,183-602,115-188.59-65-300.7-232.66-334-288C1217.51,1229.26,1196.3,1193.48,1181,1142Z"/><path class="a" d="M1455,1182c-53.36-145,46.26-302.52,130-380,107.31-99.3,235.1-110.22,291-115,82.39-7,247.07-21.12,360,100,83.24,89.28,112.47,224.24,77,337-76.11,242-411.58,259.25-432,260C1861.81,1384.71,1532.47,1392.52,1455,1182Z"/><path class="a" d="M1729,1156c-47.23-69.45-12.64-170.65,43-225,67.27-65.71,193.24-90.22,259-23,66.79,68.27,41.95,201-37,265C1916,1236.27,1782.44,1234.58,1729,1156Z"/></svg>

css/main.css

@@ -0,0 +1,940 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap");
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+}
+
+:root {
+  scroll-behavior: smooth;
+}
+
+body {
+  --accent-color: #0268D1;
+  --secondary-color: #FDB956;
+  --text-color: 17, 17, 17;
+  --text-color-light: 100, 100, 100;
+  --foreground-color: 255, 255, 255;
+  --background-color: #efefef;
+  --dark-shade: #dadada;
+  --error-color: red;
+  --hue:  210;
+  --saturation: 98%;
+  --lightness: 41%;
+  font-size: 16px;
+  color: rgba(var(--text-color), 1);
+  background: rgba(var(--foreground-color), 1);
+}
+
+body[data-theme='dark'] {
+  --accent-color: #3a9bff;
+  --text-color: 218, 218, 218;
+  --text-color-light: 170, 170, 170;
+  --foreground-color: 20, 20, 20;
+  -color: #111;
+  --dark-shade: #1a1a1a;
+}
+
+p {
+  line-height: 1.6;
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.2rem;
+}
+
+h5 {
+  font-size: 0.8rem;
+}
+
+h1, h2, h3, h4, h5 {
+  color: rgba(var(--text-color), 1);
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+}
+
+textarea {
+  background: rgba(var(--text-color), 0.1);
+  border: none;
+  border-radius: 0.3rem;
+  width: 100%;
+  padding: 1rem;
+  font-size: 1rem;
+}
+
+textarea:focus {
+  outline: none;
+  -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
+          box-shadow: 0 0 0 0.1rem var(--accent-color);
+}
+
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.grid {
+  display: -ms-grid;
+  display: grid;
+}
+
+.grid-2 {
+  -ms-grid-columns: auto auto;
+      grid-template-columns: auto auto;
+  gap: 1em;
+}
+
+.align-center {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.direction-column {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.rest {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hide-completely {
+  display: none !important;
+}
+
+.no-transformations {
+  -webkit-transform: none !important;
+          transform: none !important;
+}
+
+.breakable {
+  overflow-wrap: break-word;
+}
+
+.text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.light-text {
+  color: rgba(var(--text-color-light), 1);
+}
+
+.accent-color {
+  color: var(--accent-color);
+}
+
+.secondary-color {
+  color: var(--secondary-color);
+}
+
+.fab {
+  -webkit-box-shadow: 0 1rem 1rem #00000020;
+          box-shadow: 0 1rem 1rem #00000020;
+  margin-right: 1rem;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.fab .icon {
+  margin-left: 0 !important;
+  margin-right: 0.5rem;
+}
+
+a:-webkit-any-link {
+  text-decoration: none;
+  color: var(--accent-color);
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+a:-moz-any-link {
+  text-decoration: none;
+  color: var(--accent-color);
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+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: normal;
+}
+
+.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;
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+}
+
+.page {
+  display: -ms-grid;
+  display: grid;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 100%;
+  height: 100%;
+}
+
+.card {
+  margin-right: 1rem;
+  min-width: 33%;
+  padding: 1.5rem;
+  background: rgba(var(--text-color), 0.1);
+}
+
+sm-button {
+  --font-family: 'Poppins', sans-serif;
+  margin: 1rem 0;
+}
+
+sm-button .icon {
+  margin-right: 0.4rem;
+}
+
+sm-input {
+  margin-bottom: 1rem;
+}
+
+sm-button[variant="primary"] .icon {
+  -ms-flex-item-align: center;
+      -ms-grid-row-align: center;
+      align-self: center;
+  height: 0.8rem;
+  width: 0.8rem;
+  margin-left: 0.8rem;
+  stroke-width: 10;
+  stroke: rgba(var(--foreground-color), 1);
+}
+
+.icon {
+  fill: none;
+  height: 1rem;
+  width: 1rem;
+  stroke: rgba(var(--text-color), 0.7);
+  stroke-width: 6;
+  overflow: visible;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.icon.primary {
+  stroke: var(--accent-color);
+}
+
+.back-button {
+  margin-right: 1rem;
+}
+
+.logo-section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+  margin: 1rem 0;
+}
+
+.logo-section .main-logo {
+  height: 1.4rem;
+  margin-right: 0.4rem;
+}
+
+#sign_in {
+  display: -ms-grid;
+  display: grid;
+  border-radius: 0.6rem;
+  width: 100%;
+  padding: 0 1.5rem;
+  height: 100%;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+}
+
+#sign_in .logo-section {
+  padding: 1.5rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+#sign_in sm-popup::part(heading) {
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+#sign_in .left {
+  display: -ms-grid;
+  display: grid;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding-bottom: 1.5rem;
+}
+
+#sign_in .left h2 {
+  font-weight: 400;
+}
+
+#sign_in .left h4 {
+  color: rgba(var(--foreground-color), 1);
+}
+
+#sign_in .left .title-font {
+  text-transform: uppercase;
+  line-height: 1;
+  font-weight: 700;
+}
+
+#sign_in .left sm-button {
+  margin-top: 3rem;
+  width: auto;
+}
+
+#sign_in .left sm-button:last-of-type {
+  margin-left: auto;
+}
+
+#sign_in .left sm-button:first-of-type:hover .icon {
+  -webkit-transform: translateX(0.4rem);
+          transform: translateX(0.4rem);
+}
+
+#sign_in .left h3 {
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+
+#sign_in .left p {
+  font-weight: 500;
+}
+
+#sign_in_page {
+  overflow: hidden;
+}
+
+#sign_in_illustration {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 100%;
+}
+
+#sign_in_illustration svg {
+  height: 12rem;
+  width: 12rem;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  overflow: visible;
+  z-index: 1;
+}
+
+#sign_in_illustration .circle {
+  position: absolute;
+  border-radius: 50%;
+}
+
+#sign_in_illustration .circle:nth-of-type(1) {
+  right: -10vh;
+  background: var(--secondary-color);
+  width: 20vh;
+  height: 20vh;
+  z-index: -1;
+}
+
+#sign_in_illustration .circle:nth-of-type(2) {
+  right: 20vh;
+  bottom: -40vh;
+  background: var(--accent-color);
+  width: 60vh;
+  height: 60vh;
+  z-index: -2;
+}
+
+#sign_in_box {
+  width: 100%;
+}
+
+#sign_in_box sm-button, #sign_in_box sm-input {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 100%;
+}
+
+#sign_in_box h2 {
+  margin-bottom: 2rem;
+}
+
+#sign_in_box p {
+  margin-bottom: 1rem;
+}
+
+.contact-list {
+  -ms-grid-rows: max-content 1fr;
+      grid-template-rows: -webkit-max-content 1fr;
+      grid-template-rows: max-content 1fr;
+}
+
+.contact-list header {
+  background: rgba(var(--foreground-color), 1);
+  padding: 1rem 1.5rem 0 1.5rem;
+  display: -ms-grid;
+  display: grid;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 0 1rem;
+  -ms-grid-columns: 1fr auto;
+      grid-template-columns: 1fr auto;
+      grid-template-areas: '. .'
 'search search';
+}
+
+.contact-list header sm-input {
+  -ms-grid-row: 2;
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 2;
+  grid-area: search;
+  margin: 0.5 0 0 0;
+}
+
+.contact {
+  display: -ms-grid;
+  display: grid;
+  gap: 0 1rem;
+  -ms-grid-columns: auto 1fr;
+      grid-template-columns: auto 1fr;
+      grid-template-areas: 'dp .' 'dp .';
+  padding: 0.8rem 1.5rem;
+  cursor: pointer;
+  border-radius: 0.4rem;
+}
+
+.contact .initial {
+  -ms-grid-row: 1;
+  -ms-grid-row-span: 2;
+  -ms-grid-column: 1;
+  grid-area: dp;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  font-size: 1.6rem;
+  width: 3rem;
+  height: 3rem;
+  background: rgba(var(--text-color), 0.1);
+  border-radius: 1rem;
+  text-transform: uppercase;
+}
+
+.contact .name {
+  font-size: 1rem;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.contact .address {
+  font-family: 'Poppins', sans-serif;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: 400;
+  color: rgba(var(--text-color), 0.8);
+}
+
+.mail {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: 1rem 1.5rem;
+  border-radius: 0.4rem;
+}
+
+.mail .sender {
+  color: rgba(var(--text-color), 0.7);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 1rem;
+}
+
+.mail .date {
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.mail .subject {
+  font-size: 1.1rem;
+  margin-top: 0.3rem;
+}
+
+.mail .description {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: rgba(var(--text-color), 0.8);
+}
+
+.mail:hover {
+  background: rgba(var(--text-color), 0.1);
+  cursor: pointer;
+}
+
+#main_navbar {
+  position: fixed;
+  bottom: 0;
+  padding: 0.5rem 1.5rem;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  width: 100%;
+  background: var(--accent-color);
+  -webkit-box-shadow: 0 -0.2rem 1rem #00000016;
+          box-shadow: 0 -0.2rem 1rem #00000016;
+  height: 3.5rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 4;
+}
+
+#main_navbar .logo-section {
+  padding: 0;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: auto 1fr;
+      grid-template-columns: auto 1fr;
+      grid-template-areas: 'logo .' 'logo .';
+}
+
+#main_navbar .logo-section svg {
+  -ms-grid-row: 1;
+  -ms-grid-row-span: 2;
+  -ms-grid-column: 1;
+  grid-area: logo;
+}
+
+#main_navbar .logo-section h4 {
+  line-height: 1;
+  font-size: 1.2rem;
+}
+
+#main_navbar .logo-section h5 {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+#main_navbar .navbar-item {
+  color: rgba(var(--foreground-color), 1) !important;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+#main_navbar .navbar-item .icon {
+  height: 1.2rem;
+  width: 1.2rem;
+}
+
+#main_navbar .active {
+  border-radius: 0.4rem;
+  background: rgba(var(--text-color), 0.16);
+}
+
+#main_navbar .active h5 {
+  color: rgba(var(--foreground-color), 1);
+}
+
+#main_navbar .active .icon {
+  stroke: rgba(var(--foreground-color), 1);
+}
+
+#compose_mail_popup header, #add_contact_popup header {
+  width: 100%;
+  padding: 0 1.5rem;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+}
+
+#compose_mail_popup header .icon, #add_contact_popup header .icon {
+  stroke-width: 8;
+  margin-right: 1rem;
+  height: 0.8rem;
+  cursor: pointer;
+}
+
+#compose_mail_popup header sm-button, #add_contact_popup header sm-button {
+  margin: 0 0 0 auto;
+}
+
+#compose_mail_popup header sm-button::part(button), #add_contact_popup header sm-button::part(button) {
+  padding: 0.5rem 1rem;
+}
+
+#contacts, #mails {
+  position: relative;
+  -ms-grid-rows: max-content 1fr;
+      grid-template-rows: -webkit-max-content 1fr;
+      grid-template-rows: max-content 1fr;
+  height: calc(100vh - 3.5rem);
+}
+
+#contacts header, #mails header {
+  padding: 1.5rem;
+}
+
+#contacts header sm-button, #mails header sm-button {
+  margin: 0 0 0 auto;
+}
+
+#contacts header sm-button .icon, #mails header sm-button .icon {
+  margin-left: 0;
+  margin-right: 0.8rem;
+}
+
+#chat {
+  height: 100vh;
+  -ms-grid-rows: max-content 1fr max-content;
+      grid-template-rows: -webkit-max-content 1fr -webkit-max-content;
+      grid-template-rows: max-content 1fr max-content;
+}
+
+#chat header {
+  padding: 1.5rem 1rem;
+}
+
+#chat header h4 {
+  font-weight: 500;
+}
+
+#chat header sm-menu {
+  margin-left: 1rem;
+}
+
+#chat footer {
+  padding: 0 1rem;
+  -webkit-box-shadow: 0 -0.4rem 0.8rem #00000010;
+          box-shadow: 0 -0.4rem 0.8rem #00000010;
+}
+
+#chat footer sm-button {
+  margin-left: 1rem;
+}
+
+#chat #type_message {
+  margin: 0;
+}
+
+#chat .message {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0.4rem 0.8rem;
+  width: 100%;
+  font-size: 0.9rem;
+  max-width: -webkit-max-content;
+  max-width: -moz-max-content;
+  max-width: max-content;
+  margin-bottom: 0.4rem;
+  margin-top: 0.8rem;
+  -webkit-box-shadow: 0 0 0.2rem #00000020;
+          box-shadow: 0 0 0.2rem #00000020;
+}
+
+#chat .message .message-body {
+  max-width: 60ch;
+}
+
+#chat .message .time {
+  margin-top: auto;
+  margin-left: 0.4rem;
+  font-size: 0.8em;
+  color: rgba(var(--text-color), 0.6);
+}
+
+#chat .sent {
+  margin-left: auto;
+  background: rgba(var(--text-color), 0.1);
+  border-radius: 0.6rem 0 0.6rem 0.6rem;
+}
+
+#chat .received {
+  border-radius: 0 0.6rem 0.6rem 0.6rem;
+  border: solid 1px rgba(var(--text-color), 0.2);
+}
+
+#chat .sent + .sent,
+#chat .received + .received {
+  border-radius: 0.6rem;
+  margin-top: 0;
+}
+
+#chat_container {
+  padding: 1rem;
+}
+
+#contacts_container,
+#chat_container,
+#mails_container,
+#mail {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}
+
+#mail {
+  padding: 1.5rem;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+
+#settings_page {
+  padding: 1.5rem;
+}
+
+@media screen and (max-width: 640px) {
+  .hide-on-mobile {
+    display: none !important;
+  }
+  #sign_in {
+    -ms-grid-rows: 16rem 2fr;
+        grid-template-rows: 16rem 2fr;
+        grid-template-areas: 'illustration' '.';
+    height: 100%;
+  }
+  #sign_in_illustration {
+    -ms-grid-row: 1;
+    -ms-grid-column: 1;
+    grid-area: illustration;
+  }
+}
+
+@media only screen and (min-width: 640px) {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--text-color), 0.3);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--text-color), 0.6);
+  }
+  .hide-on-desktop {
+    display: none !important;
+  }
+  .page {
+    padding-bottom: 0;
+  }
+  #confirmation {
+    width: 24rem;
+  }
+  .logo-section {
+    padding: 2rem 3rem;
+  }
+  #sign_in {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    gap: 4vw;
+    -ms-grid-columns: 1.5fr 1fr;
+        grid-template-columns: 1.5fr 1fr;
+    padding: 0 4vw;
+  }
+  #sign_in .left sm-button:last-of-type {
+    margin-left: 0.5rem;
+  }
+  #sign_in .left h4 {
+    color: var(--accent-color);
+  }
+  #sign_in .circle:nth-of-type(1) {
+    right: -40vh;
+    width: 80vh;
+    height: 80vh;
+  }
+  #sign_in .circle:nth-of-type(2) {
+    right: -70vh;
+    width: 140vh;
+    height: 140vh;
+  }
+  #sign_in_box .icon {
+    width: 1.2rem;
+    height: 1.2rem;
+    cursor: pointer;
+  }
+  #main_navbar {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    position: relative;
+    padding: 0.5rem 1rem;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    height: auto;
+  }
+  #main_navbar .navbar-item {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    padding: 1rem 0.5rem;
+  }
+  #main_navbar .navbar-item .icon {
+    height: 1.2rem;
+    width: 2.4rem;
+  }
+  #main_navbar .navbar-item:hover {
+    background: rgba(var(--text-color), 0.1);
+    border-radius: 0.4rem;
+    cursor: pointer;
+  }
+  #main_navbar .label {
+    display: none;
+  }
+  #compose_mail_popup header, #add_contact_popup header {
+    padding: 1.5rem 1.5rem 0 1.5rem;
+  }
+  #add_contact_popup::part(popup) {
+    min-width: 24rem;
+  }
+  #compose_mail_popup::part(popup) {
+    min-width: 36rem;
+  }
+  #main {
+    height: 100vh;
+    overflow: hidden;
+    -ms-grid-columns: auto 1fr;
+        grid-template-columns: auto 1fr;
+  }
+  #chat_page, #mail_page {
+    -ms-grid-columns: 22rem 1fr;
+        grid-template-columns: 22rem 1fr;
+  }
+  #contacts, #mails {
+    height: 100vh;
+    background: rgba(var(--text-color), 0.06);
+  }
+}
+
+@media only screen and (min-width: 1280px) {
+  #sign_in {
+    gap: 4vw;
+    padding: 0 12vw;
+  }
+  #sign_in .title-font {
+    font-size: 4rem;
+  }
+  #main_navbar {
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+    padding: 0.5rem 1.5rem;
+  }
+  #main_navbar .navbar-item {
+    width: 100%;
+  }
+  #main_navbar .navbar-item .icon {
+    width: 2rem;
+    margin-right: 0.8rem;
+  }
+  #main_navbar .label {
+    display: block;
+  }
+  #chat header {
+    padding: 1.5rem;
+  }
+  #chat #chat_container {
+    padding: 1rem 1.5rem;
+  }
+}
+
+@media only screen and (min-width: 2048px) {
+  body {
+    font-size: 20px;
+  }
+}
+
+@media (hover: hover) {
+  .contact:hover {
+    background: rgba(var(--text-color), 0.1);
+  }
+}
+/*# sourceMappingURL=main.css.map */