v0.28.81

refactor: using CSS variables instead of ::part() selector

css/main.css

@@ -177,9 +177,7 @@ strong {
   right: 0;
   bottom: 0;
   z-index: 1;
-}
+  --padding: 0.9rem 1.6rem;
-.fab::part(button) {
-  padding: 0.9rem 1.6rem;
 }
 .fab .icon {
   margin-left: 0 !important;
@@ -236,9 +234,10 @@ span.ripple {
   -webkit-tap-highlight-color: transparent;
 }
 
-sm-popup sm-input::part(input) {
+sm-input {
-  border-radius: 0.5rem;
+  --border-radius: 0.5rem;
 }
+
 sm-popup sm-input + sm-input {
   margin-top: 1rem;
 }
@@ -449,9 +448,7 @@ sm-button.danger {
 }
 #sign_in sm-button {
   width: 100%;
-}
+  --padding: 0.8rem 1.6rem;
-#sign_in sm-button::part(button) {
-  padding: 0.8rem 1.6rem;
 }
 #sign_in p {
   margin-bottom: 0.5rem;
@@ -553,7 +550,7 @@ sm-button.danger {
     transform: scale(1);
   }
 }
-#main {
+#main_page {
   width: 100%;
   height: 100%;
 }
@@ -940,7 +937,6 @@ sm-button.danger {
   background: rgba(var(--foreground-color), 1);
 }
 #main_navbar .logo-section {
-  margin: 1rem 0 1.5rem 0;
   padding: 0 1rem;
 }
 #main_navbar .active {
@@ -1109,10 +1105,7 @@ sm-button.danger {
 #contacts .header sm-input, #mails .header sm-input, #settings_page .header sm-input {
   margin: 0;
   width: 100%;
-}
+  --padding: 0.5rem 1rem;
-#contacts .header sm-input::part(input), #mails .header sm-input::part(input), #settings_page .header sm-input::part(input) {
-  border-radius: 0.5rem;
-  padding: 0.5rem 1rem;
 }
 #contacts .header h4, #mails .header h4, #settings_page .header h4 {
   text-transform: capitalize;
@@ -1513,6 +1506,9 @@ sm-button.danger {
   justify-content: center;
   font-size: 2.6rem;
 }
+.big-emoji .text-emoji {
+  font-size: 2.6rem !important;
+}
 
 #chat_middle {
   flex: 1;
@@ -1780,6 +1776,8 @@ sm-panel {
   bottom: 0;
   right: 0;
   border-radius: 1rem;
+  border: solid;
+  margin: 1.5rem;
 }
 
 #call_controls {
@@ -1788,6 +1786,21 @@ sm-panel {
   justify-self: center;
 }
 
+#pick_up_call {
+  color: #00C853;
+}
+
+.circular-button {
+  align-items: center;
+  --padding: 0;
+  --border-radius: 50%;
+}
+.circular-button .filled {
+  height: 3rem;
+  width: 3rem;
+  padding: 1rem;
+}
+
 @media screen and (max-width: 640px) {
   .hide-on-mobile {
     position: fixed;
@@ -1957,7 +1970,7 @@ sm-panel {
     min-width: 36rem;
   }
 
-  #main {
+  #main_page {
     grid-template-columns: auto 1fr;
   }
 

css/main.scss

@@ -147,9 +147,7 @@ strong{
     right: 0;
     bottom: 0;
     z-index: 1;
-    &::part(button){
+    --padding: 0.9rem 1.6rem;
-        padding: 0.9rem 1.6rem;
-    }
     .icon{
         margin-left: 0 !important;
         margin-right: 0.5rem;
@@ -198,10 +196,10 @@ span.ripple{
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 }
+sm-input{
+    --border-radius: 0.5rem;
+}
 sm-popup{
-    sm-input::part(input){
-        border-radius: 0.5rem;
-    }
     sm-input + sm-input{
         margin-top: 1rem;
     }
@@ -397,9 +395,7 @@ sm-button.danger{
     }
     sm-button{
         width: 100%;
-        &::part(button){
+        --padding: 0.8rem 1.6rem;
-            padding: 0.8rem 1.6rem;
-        }
     }
     p {
         margin-bottom: 0.5rem;
@@ -499,7 +495,7 @@ sm-button.danger{
         transform: scale(1);
     }
 }
-#main{
+#main_page{
     width: 100%;
     height: 100%;
 }
@@ -870,7 +866,6 @@ sm-button.danger{
     width: max(16rem, 60vw);
     background: rgba(var(--foreground-color), 1);
     .logo-section{
-        margin: 1rem 0 1.5rem 0;
         padding: 0 1rem;
     }
     .active{
@@ -1035,10 +1030,7 @@ sm-button.danger{
         sm-input{
             margin: 0;
             width: 100%;
-        }
+            --padding: 0.5rem 1rem;
-        sm-input::part(input){
-            border-radius: 0.5rem;
-            padding: 0.5rem 1rem;
         }
         h4{
             text-transform: capitalize;
@@ -1423,6 +1415,9 @@ sm-button.danger{
         justify-content: center;
         font-size: 2.6rem;
     }
+    .text-emoji{
+        font-size: 2.6rem !important;
+    }
 }
 #chat_middle{
     flex: 1;
@@ -1681,12 +1676,27 @@ sm-panel{
     bottom: 0;
     right: 0;
     border-radius: 1rem;
+    border: solid;
+    margin: 1.5rem;
 }
 #call_controls{
     padding: 1.5rem;
     margin-top: auto;
     justify-self: center;
 }
+#pick_up_call{
+    color: #00C853;
+}
+.circular-button{
+    align-items: center;
+    .filled{
+        height: 3rem;
+        width: 3rem;
+        padding: 1rem;
+    }
+    --padding: 0;
+    --border-radius: 50%;
+}
 @media screen and (max-width: 640px){
     .hide-on-mobile{
         position: fixed;
@@ -1839,7 +1849,7 @@ sm-panel{
     #reply_mail_popup::part(popup){
         min-width: 36rem;
     }
-    #main{
+    #main_page{
         grid-template-columns: auto 1fr;
     }
     #emoji_picker{

scripts/components.js

@@ -12,6 +12,9 @@ smButton.innerHTML = `
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
+    --padding: 0.6rem 1.2rem;
+    --border-radius: 0.3rem;
+    --background: rgba(var(--text-color), 0.1);
 }
 :host([disable]) .button{
     cursor: not-allowed;
@@ -45,13 +48,13 @@ smButton.innerHTML = `
     display: -ms-flexbox;
     display: flex;
     width: 100%;
-    padding: 0.6rem 1.2rem;
+    padding: var(--padding);
     cursor: pointer;
     -webkit-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
-    border-radius: 0.3rem; 
+    border-radius: var(--border-radius); 
     -webkit-box-pack: center; 
         -ms-flex-pack: center; 
             justify-content: center;
@@ -63,17 +66,11 @@ smButton.innerHTML = `
     text-transform: capitalize;
     font-size: 0.9rem;
     font-weight: 500;
-    background: rgba(var(--text-color), 0.1); 
+    background: var(--background); 
     -webkit-tap-highlight-color: transparent;
     outline: none;
     overflow: hidden;
 }
-span.ripple {
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    background: rgba(var(--text-color), 0.2);
-}
 :host(:not([disable])) .button:focus-visible{
     -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
             box-shadow: 0 0 0 0.1rem var(--accent-color);
@@ -199,6 +196,8 @@ border: none;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    --border-radius: 0.3rem;
+    --padding: 0.7rem 1rem;
 }
 .hide{
    opacity: 0 !important;
@@ -236,8 +235,8 @@ border: none;
             align-items: center;
     position: relative;
     gap: 0.5rem;
-    padding: 0.7rem 1rem;
+    padding: var(--padding);
-    border-radius: 0.3rem;
+    border-radius: var(--border-radius);
     -webkit-transition: opacity 0.3s;
     -o-transition: opacity 0.3s;
     transition: opacity 0.3s;
@@ -578,6 +577,7 @@ smTextarea.innerHTML = `
 }
 :host{
     display: grid;
+    --border-radius: 0.3s;
 }
 :host(.outlined) .textarea {
     box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
@@ -594,7 +594,7 @@ smTextarea.innerHTML = `
     align-items: stretch;
     max-height: 8rem;
     background: rgba(var(--text-color), 0.06);
-    border-radius: 0.3rem;
+    border-radius: var(--border-radius);
 }
 .textarea::after,
 textarea{