RanchiMall/messenger
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into dev

Browse Source
This commit is contained in:
sairajzero 2022-05-31 03:35:07 +05:30
commit 85d57909ae
4 changed files with 1100 additions and 927 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
css/main.css
View File

@ -188,6 +188,18 @@ strong {
stroke: white; stroke: white;
} }
a:-webkit-any-link {
word-wrap: break-word;
color: var(--accent-color);
font-weight: 500;
}
a:-moz-any-link {
word-wrap: break-word;
color: var(--accent-color);
font-weight: 500;
}
a:any-link { a:any-link {
word-wrap: break-word; word-wrap: break-word;
color: var(--accent-color); color: var(--accent-color);
@ -341,6 +353,8 @@ sm-button[variant=primary] {
display: flex; display: flex;
position: relative; position: relative;
align-items: center; align-items: center;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content; height: max-content;
margin: 0.5rem 0; margin: 0.5rem 0;
} }
@ -393,6 +407,8 @@ sm-button[variant=primary] {
} }
#landing .left sm-button { #landing .left sm-button {
margin: 1.5rem 0 2rem 0; margin: 1.5rem 0 2rem 0;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content; width: max-content;
} }
#landing .left h3 { #landing .left h3 {
@ -489,7 +505,8 @@ sm-button[variant=primary] {
width: 100%; width: 100%;
} }
#frame_1 #credentials_section { #frame_1 #credentials_section {
animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
margin: 2rem 0; margin: 2rem 0;
} }
#frame_1 h4, #frame_1 h5 { #frame_1 h4, #frame_1 h5 {
@ -503,6 +520,15 @@ sm-button[variant=primary] {
margin: 1rem 0; margin: 1rem 0;
} }
@-webkit-keyframes slide-down {
from {
transform: translateY(-1rem);
}
to {
transform: none;
}
}
@keyframes slide-down { @keyframes slide-down {
from { from {
transform: translateY(-1rem); transform: translateY(-1rem);
@ -523,7 +549,8 @@ sm-button[variant=primary] {
transform-origin: bottom; transform-origin: bottom;
height: 6rem; height: 6rem;
width: 6rem; width: 6rem;
animation: bounce 0.5s infinite alternate ease-in; -webkit-animation: bounce 0.5s infinite alternate ease-in;
animation: bounce 0.5s infinite alternate ease-in;
} }
.shadow { .shadow {
@ -532,7 +559,8 @@ sm-button[variant=primary] {
height: 2rem; height: 2rem;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
border-radius: 50%; border-radius: 50%;
animation: scale 0.5s infinite alternate ease-in; -webkit-animation: scale 0.5s infinite alternate ease-in;
animation: scale 0.5s infinite alternate ease-in;
margin-left: 1rem; margin-left: 1rem;
} }
@ -540,6 +568,18 @@ sm-button[variant=primary] {
margin-top: 2rem; margin-top: 2rem;
} }
@-webkit-keyframes bounce {
0% {
transform: scaleY(1) translateY(-4rem);
}
90% {
transform: scaleY(1) translateY(0);
}
100% {
transform: scaleY(0.8);
}
}
@keyframes bounce { @keyframes bounce {
0% { 0% {
transform: scaleY(1) translateY(-4rem); transform: scaleY(1) translateY(-4rem);
@ -551,6 +591,17 @@ sm-button[variant=primary] {
transform: scaleY(0.8); transform: scaleY(0.8);
} }
} }
@-webkit-keyframes scale {
0% {
transform: scale(0.5);
}
90% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes scale { @keyframes scale {
0% { 0% {
transform: scale(0.5); transform: scale(0.5);
@ -579,7 +630,10 @@ sm-button[variant=primary] {
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06); box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
border-radius: 2rem; border-radius: 2rem;
text-transform: uppercase; text-transform: uppercase;
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
.filled { .filled {
@ -601,7 +655,10 @@ sm-button[variant=primary] {
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden; overflow: hidden;
} }
.contact:not(.chat) { .contact:not(.chat) {
@ -829,7 +886,10 @@ sm-button[variant=primary] {
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: "dp sender date" "dp subject subject" "dp desc desc"; grid-template-areas: "dp sender date" "dp subject subject" "dp desc desc";
} }
@ -872,6 +932,17 @@ sm-button[variant=primary] {
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
@-webkit-keyframes slide {
from {
opacity: 0;
transform: translateX(-1rem);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes slide { @keyframes slide {
from { from {
opacity: 0; opacity: 0;
@ -891,7 +962,8 @@ sm-button[variant=primary] {
} }
.mail:not(:first-of-type) { .mail:not(:first-of-type) {
margin-top: 2rem; margin-top: 2rem;
padding-inline-start: 1rem; -webkit-padding-start: 1rem;
padding-inline-start: 1rem;
} }
.mail:not(:first-of-type)::before { .mail:not(:first-of-type)::before {
content: ""; content: "";
@ -931,6 +1003,8 @@ sm-button[variant=primary] {
margin-bottom: 0.4em; margin-bottom: 0.4em;
} }
.mail .mail-content { .mail .mail-content {
height: -webkit-max-content;
height: -moz-max-content;
height: max-content; height: max-content;
max-width: 60ch; max-width: 60ch;
white-space: pre-wrap; white-space: pre-wrap;
@ -945,7 +1019,10 @@ sm-button[variant=primary] {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
.option .icon { .option .icon {
height: 1.4rem; height: 1.4rem;
@ -1099,6 +1176,7 @@ sm-button[variant=primary] {
#contacts, #mails { #contacts, #mails {
position: relative; position: relative;
grid-template-rows: -webkit-max-content 1fr;
grid-template-rows: max-content 1fr; grid-template-rows: max-content 1fr;
} }
@ -1285,6 +1363,8 @@ sm-button[variant=primary] {
flex-wrap: wrap; flex-wrap: wrap;
width: auto; width: auto;
font-size: 0.92rem; font-size: 0.92rem;
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content; max-width: max-content;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
margin-top: 0.8rem; margin-top: 0.8rem;
@ -1304,9 +1384,9 @@ sm-button[variant=primary] {
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
word-break: break-word; word-break: break-word;
-moz-hyphens: auto;
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; -ms-hyphens: auto;
hyphens: auto;
white-space: pre-wrap; white-space: pre-wrap;
line-height: 1.5; line-height: 1.5;
} }
@ -1400,7 +1480,17 @@ sm-button[variant=primary] {
.unconfirmed { .unconfirmed {
opacity: 0.7; opacity: 0.7;
transform-origin: left; transform-origin: left;
animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@-webkit-keyframes pop {
0% {
transform: rotate(5deg) translate(-0.5rem, 1rem);
}
100% {
transform: rotate(0) translate(0, 0);
}
} }
@keyframes pop { @keyframes pop {
@ -1550,7 +1640,10 @@ sm-button[variant=primary] {
--input-placeholder-color: rgba(var(--text-color), 0.6); --input-placeholder-color: rgba(var(--text-color), 0.6);
--indicator-color: var(--accent-color); --indicator-color: var(--accent-color);
--button-hover-background: rgba(var(--text-color), 0.2); --button-hover-background: rgba(var(--text-color), 0.2);
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%; width: 100%;
max-height: 40vh; max-height: 40vh;
} }
@ -1560,7 +1653,10 @@ sm-button[variant=primary] {
cursor: pointer; cursor: pointer;
padding: 0.4rem; padding: 0.4rem;
border-radius: 0.6rem; border-radius: 0.6rem;
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center; text-align: center;
} }
@ -1777,7 +1873,8 @@ sm-button[variant=primary] {
box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset; box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
} }
#settings_page .bg-preview__image { #settings_page .bg-preview__image {
object-fit: cover; -o-object-fit: cover;
object-fit: cover;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
@ -1788,8 +1885,10 @@ sm-button[variant=primary] {
} }
#video_call_page video { #video_call_page video {
position: fixed; position: fixed;
object-fit: cover; -o-object-fit: cover;
object-position: center; object-fit: cover;
-o-object-position: center;
object-position: center;
} }
#their_video { #their_video {
@ -2021,6 +2120,8 @@ sm-button[variant=primary] {
grid-template-columns: 14rem 1fr; grid-template-columns: 14rem 1fr;
} }
#settings_page sm-button { #settings_page sm-button {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content; width: max-content;
} }
#settings_page .active { #settings_page .active {
@ -2130,4 +2231,4 @@ sm-button[variant=primary] {
.contact .menu { .contact .menu {
display: none; display: none;
} }
} }/*# sourceMappingURL=main.css.map */

10
css/main.css.map
View File

File diff suppressed because one or more lines are too long

1752
index.html
View File

File diff suppressed because it is too large Load Diff

130
scripts/components.js
View File

@ -717,71 +717,6 @@ customElements.define('sm-textarea',
} }
}) })
// tab
const smTab = document.createElement('template')
smTab.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
z-index: 1;
}
.tab{
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
padding: 0.4rem 0.8rem;
font-weight: 500;
word-spacing: 0.1rem;
text-align: center;
-webkit-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
text-transform: capitalize;
height: 100%;
}
@media (hover: hover){
:host(.active) .tab{
opacity: 1;
}
.tab{
opacity: 0.7
}
.tab:hover{
opacity: 1
}
}
</style>
<div part="tab" class="tab">
<slot></slot>
</div>
`;
customElements.define('sm-tab', class extends HTMLElement {
constructor() {
super()
this.shadow = this.attachShadow({
mode: 'open'
}).append(smTab.content.cloneNode(true))
}
})
//chcekbox //chcekbox
const smCheckbox = document.createElement('template') const smCheckbox = document.createElement('template')
@ -3356,6 +3291,71 @@ customElements.define('sm-tab-header', class extends HTMLElement {
} }
}) })
// tab
const smTab = document.createElement('template')
smTab.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
z-index: 1;
}
.tab{
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
padding: 0.4rem 0.8rem;
font-weight: 500;
word-spacing: 0.1rem;
text-align: center;
-webkit-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
text-transform: capitalize;
height: 100%;
}
@media (hover: hover){
:host(.active) .tab{
opacity: 1;
}
.tab{
opacity: 0.7
}
.tab:hover{
opacity: 1
}
}
</style>
<div part="tab" class="tab">
<slot></slot>
</div>
`;
customElements.define('sm-tab', class extends HTMLElement {
constructor() {
super()
this.shadow = this.attachShadow({
mode: 'open'
}).append(smTab.content.cloneNode(true))
}
})
// tab-panels // tab-panels
const smTabPanels = document.createElement('template') const smTabPanels = document.createElement('template')