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

UI changes

Browse Source
This commit is contained in:
sairaj mote 2020-12-21 18:32:43 +05:30
parent 0147cb0d34
commit ffc74568c0
8 changed files with 4499 additions and 4609 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3150
components.js
View File

File diff suppressed because it is too large Load Diff

0
css/dist/bg.svg → css/bg.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

1196
css/dist/main.css vendored
View File

File diff suppressed because it is too large Load Diff

1
css/dist/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

1171
css/main.css
View File

File diff suppressed because it is too large Load Diff

1
css/main.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

259
css/main.scss
View File

@ -8,13 +8,14 @@
} }
:root{ :root{
scroll-behavior: smooth; scroll-behavior: smooth;
font-size: clamp(16px, 1.2vmax, 36px);
} }
html, body{ html, body{
height: 100%; height: 100%;
} }
body{ body{
--accent-color: #0268D1; --accent-color: #3042e7;
--secondary-color: #FDB956; --secondary-color: #ffac2e;
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 100, 100, 100; --text-color-light: 100, 100, 100;
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
@ -23,13 +24,11 @@ body{
--hue: 210; --hue: 210;
--saturation: 98%; --saturation: 98%;
--lightness: 41%; --lightness: 41%;
font-size: 16px;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23a579cc;opacity:0.2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg%3C/title%3E%3Cpath 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'/%3E%3Cpath 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'/%3E%3Cpath 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'/%3E%3Cpath 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'/%3E%3Cpath 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'/%3E%3C/svg%3E") fixed no-repeat;
background-size: cover;
} }
body[data-theme='dark']{ body[data-theme='dark']{
--accent-color: #3a9bff; --accent-color: #5365ff;
--secondary-color: #FDB956;
--text-color: 218, 218, 218; --text-color: 218, 218, 218;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20; --foreground-color: 20, 20, 20;
@ -45,6 +44,9 @@ body[data-theme='dark']{
color: rgba(var(--text-color), 1) !important; color: rgba(var(--text-color), 1) !important;
box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040; box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
} }
.message{
color: rgba(var(--text-color), 1);
}
} }
p{ p{
line-height: 1.6; line-height: 1.6;
@ -77,6 +79,7 @@ textarea{
padding: 1rem; padding: 1rem;
font-size: 1rem; font-size: 1rem;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
resize: none;
&:focus{ &:focus{
outline: none; outline: none;
box-shadow: 0 0 0 0.1rem var(--accent-color); box-shadow: 0 0 0 0.1rem var(--accent-color);
@ -170,7 +173,34 @@ a:any-link{
overflow: visible; overflow: visible;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
transition: transform 0.3s; }
span.ripple{
position: absolute;
border-radius: 50%;
transform: scale(0);
background: rgba(var(--text-color), 0.2);
pointer-events: none;
}
.interact{
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#confirmation_popup,
#prompt {
flex-direction: column;
h4 {
font-weight: 500;
margin-bottom: 1.5rem;
}
.flex {
margin-top: 1rem;
sm-button:first-of-type {
margin-right: 0.6rem;
margin-left: auto;
}
}
} }
.page{ .page{
align-items: flex-start; align-items: flex-start;
@ -205,7 +235,10 @@ sm-button[variant="primary"]{
} }
.back-button{ .back-button{
margin-right: 1rem; height: 2.4rem;
width: 2.4rem;
padding: 0.7rem;
transform: translateX(-0.6rem);
} }
.logo-section{ .logo-section{
display: flex; display: flex;
@ -233,21 +266,6 @@ sm-button[variant="primary"]{
display: none; display: none;
} }
} }
#confirmation, #prompt{
p{
max-width: 50ch;
}
h4{
margin-block-end: 1rem;
}
sm-button{
margin-block-start: 1.5rem;
margin-bottom: 0;
}
sm-button:first-of-type{
margin-inline-end: 0.5rem;
}
}
#sign_in{ #sign_in{
display: grid; display: grid;
border-radius: 0.6rem; border-radius: 0.6rem;
@ -416,14 +434,15 @@ sm-button[variant="primary"]{
} }
.initial{ .initial{
justify-content: center; justify-content: center;
font-size: 1.6rem; font-size: 1.2rem;
width: 3rem; width: 2.4rem;
height: 3rem; height: 2.4rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
box-shadow: 0 0.1rem 0.1rem #0000001a, 0 0.1rem 0.3rem #00000016; box-shadow: 0 0.1rem 0.1rem #0000001a, 0 0.1rem 0.3rem #00000016;
border-radius: 2rem; border-radius: 2rem;
text-transform: uppercase; text-transform: uppercase;
} }
.contact{ .contact{
position: relative; position: relative;
display: grid; display: grid;
@ -431,7 +450,8 @@ sm-button[variant="primary"]{
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: 'dp . menu' grid-template-areas: 'dp . menu'
'dp . menu'; 'dp . menu';
padding: 0.8rem 1.5rem; padding: 0.8rem 1rem;
align-items: center;
&:focus{ &:focus{
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
outline: none; outline: none;
@ -461,7 +481,7 @@ sm-button[variant="primary"]{
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
font-weight: 500; font-weight: 500;
border-radius: 0.4rem; border-radius: 0.5rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
margin: 1rem 0; margin: 1rem 0;
justify-self: center; justify-self: center;
@ -470,14 +490,6 @@ sm-button[variant="primary"]{
.date-card{ .date-card{
align-self: center; align-self: center;
} }
#send_message_button{
.icon{
margin: 0;
height: 1.2rem;
width: 1.2rem;
stroke: rgba(var(--foreground-color), 1);
}
}
.mail-card.unread::before, .mail-card.unread::before,
.contact.unread::before{ .contact.unread::before{
content: ''; content: '';
@ -490,6 +502,7 @@ sm-button[variant="primary"]{
} }
.mail-card.unread, .mail-card.unread,
.contact.unread{ .contact.unread{
overflow: hidden;
h4{ h4{
font-weight: 700; font-weight: 700;
} }
@ -694,11 +707,11 @@ sm-button[variant="primary"]{
sm-input{ sm-input{
margin: 0; margin: 0;
width: 100%; width: 100%;
} .icon{
.icon{ stroke: rgba(var(--text-color), 0.5);
stroke: rgba(var(--text-color), 0.5); height: 0.9rem;
height: 1rem; width: 0.9rem;
width: 1rem; }
} }
sm-input::part(input){ sm-input::part(input){
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
@ -710,6 +723,21 @@ sm-button[variant="primary"]{
height: calc(100vh - 3.5rem); height: calc(100vh - 3.5rem);
header{ header{
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
h4{
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.06em;
}
.grid{
grid-template-columns: 1fr auto auto auto;
gap: 0.5rem;
.icon{
height: 2.2rem;
width: 2.2rem;
padding: 0.4rem;
cursor: pointer;
}
}
sm-button{ sm-button{
margin: 0 0 0 auto; margin: 0 0 0 auto;
.icon{ .icon{
@ -720,10 +748,6 @@ sm-button[variant="primary"]{
margin-left: 0; margin-left: 0;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
&[variant="outlined"] .icon{
stroke: var(--accent-color);
}
} }
} }
} }
@ -735,7 +759,7 @@ sm-button[variant="primary"]{
grid-template-rows: max-content 1fr max-content; grid-template-rows: max-content 1fr max-content;
header{ header{
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-bottom: solid 1px rgba(var(--text-color), 0.16); box-shadow: 0 0.2rem 0.4rem #00000016;
.back-button{ .back-button{
margin-right: 0.2rem; margin-right: 0.2rem;
} }
@ -744,8 +768,10 @@ sm-button[variant="primary"]{
} }
h4{ h4{
font-weight: 500; font-weight: 500;
opacity: 0.8;
} }
h5{ h5{
opacity: 0.7;
font-weight: 400; font-weight: 400;
} }
sm-menu{ sm-menu{
@ -755,16 +781,27 @@ sm-button[variant="primary"]{
footer{ footer{
align-items: flex-end; align-items: flex-end;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-top: solid 1px rgba(var(--text-color), 0.16); sm-textarea::part(textarea){
sm-button{ background: rgba(var(--text-color), 0.1);
margin: 0;
margin-left: 1rem;
} }
sm-button::part(button){ }
padding: 0.8rem; #send_message_button{
} position: absolute;
sm-textarea{ right: 1.5rem;
margin: 0; transform: scale(0);
z-index: 1;
align-self: center;
height: 2.4rem;
width: 2.4rem;
padding: 0.5rem;
cursor: pointer;
stroke: none;
fill: rgba(var(--text-color), 0.4);
margin-left: 1rem;
transition: 0.3s;
&.active{
fill: var(--accent-color);
transform: none;
} }
} }
#type_message{ #type_message{
@ -772,40 +809,82 @@ sm-button[variant="primary"]{
} }
.message{ .message{
position: relative; position: relative;
display: inline-flex; display: grid;
flex-direction: column; grid-auto-flow: column;
padding: 0.4rem 0.8rem; align-items: center;
gap: 0.5rem;
width: 100%; width: 100%;
font-size: 0.94rem; font-size: 0.9rem;
max-width: max-content; max-width: max-content;
margin-bottom: 0.4rem; margin-bottom: 0.2rem;
margin-top: 0.8rem; margin-top: 0.8rem;
box-shadow: 0 1px 0.1rem #00000020; .message-body{
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
box-shadow: 0 1px 0.1rem #00000020;
padding: 0.6em 1em;
}
.time{ .time{
align-self: flex-end;
margin-top: auto;
margin-left: 0.4rem;
font-size: 0.8em; font-size: 0.8em;
color: rgba(var(--text-color), 0.6); opacity: 0.8;
margin-top: 0.3rem;
} }
} }
.sent{ .sent{
margin-left: auto; margin-left: auto;
background: hsla(var(--hue), var(--saturation), var(--lightness), 0.1); &::after{
border-radius: 0.6rem 0 0.6rem 0.6rem; content: '';
position: absolute;
left: 100%;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0.5em 0.3em 0 0;
border-color: var(--accent-color) transparent transparent transparent;
}
.message-body{
background: var(--accent-color);
color: #f0f0f0;
border-radius: 0.4em 0 0.4em 0.4em;
}
.time{
grid-column: 1;
}
} }
.received{ .received{
border-radius: 0 0.6rem 0.6rem 0.6rem; &::after{
border: solid 1px rgba(var(--text-color), 0.1); content: '';
position: absolute;
left: -0.5em;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0.5em 0.5em 0;
border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
}
.message-body{
background: rgba(var(--text-color), 0.1);
border-radius: 0 0.4em 0.4em 0.4em;
}
} }
.sent + .sent, .sent + .sent,
.received + .received { .received + .received{
border-radius: 0.6rem;
margin-top: 0; margin-top: 0;
} }
.sent + .sent::after,
.received + .received::after{
display: none;
}
.sent + .sent .message-body,
.received + .received .message-body{
border-radius: 0.4em;
}
.unconfirmed{
opacity: 0.7;
}
} }
#chat_container{ #chat_container{
padding: 0 1rem; padding: 0 1rem;
@ -993,6 +1072,8 @@ sm-tab-header{
padding: 0.5rem; padding: 0.5rem;
box-shadow: none; box-shadow: none;
height: auto; height: auto;
background: #111;
color: #f0f0f0;
.navbar-item{ .navbar-item{
height: auto; height: auto;
justify-content: flex-start; justify-content: flex-start;
@ -1000,16 +1081,29 @@ sm-tab-header{
flex: none; flex: none;
padding: 1rem 0.5rem; padding: 1rem 0.5rem;
border-radius: 0.4rem; border-radius: 0.4rem;
color: #f0f0f0;
.icon{ .icon{
height: 1.2rem; height: 1.2rem;
width: 2.4rem; width: 2.4rem;
} }
.label{
color: #f0f0f0;
}
.icon{
stroke: #f0f0f0;
}
} }
.logo-section{ .logo-section{
padding: 0 1rem; padding: 0 1rem;
.main-logo{
fill: #f0f0f0;
}
.label{
color: #f0f0f0;
}
} }
.active{ .active{
background: rgba(var(--text-color), 0.06); background: var(--accent-color);
border-radius: 0.4rem; border-radius: 0.4rem;
} }
.label{ .label{
@ -1040,13 +1134,17 @@ sm-tab-header{
} }
} }
} }
.contact,
.mail-card{
margin: 0.25rem 0.5rem;
border-radius: 0.5rem;
}
#chat_page, #mail_page{ #chat_page, #mail_page{
grid-template-columns: 20rem 1fr; grid-template-columns: 20rem 1fr;
} }
#contacts, #mails{ #contacts, #mails{
height: 100vh; height: 100vh;
background: rgba(var(--text-color), 0.04); border-right: 1px solid rgba(var(--text-color), 0.2);
backdrop-filter: blur(1rem);
} }
#settings_page{ #settings_page{
height: 100vh; height: 100vh;
@ -1103,13 +1201,6 @@ sm-tab-header{
} }
} }
} }
@media only screen and (min-width: 1920px){
}
@media only screen and (min-width: 2048px){
body{
font-size: 20px;
}
}
@media (hover: hover){ @media (hover: hover){
.contact:hover, .mail-card:hover, .navbar-item:hover{ .contact:hover, .mail-card:hover, .navbar-item:hover{
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);

1218
index.html
View File

File diff suppressed because it is too large Load Diff