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

UI improvements

Browse Source
This commit is contained in:
sairaj mote 2022-06-20 13:04:22 +05:30
parent fec5729f83
commit 36550e36ad
4 changed files with 384 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
css/main.css
View File

@ -233,6 +233,10 @@ input[type=range]:active {
cursor: grab; cursor: grab;
} }
sm-copy {
font-size: 0.9rem;
}
sm-input, sm-input,
sm-textarea { sm-textarea {
font-size: 0.9rem; font-size: 0.9rem;
@ -662,6 +666,10 @@ ol li::before {
height: 100%; height: 100%;
} }
.inner-page {
background-color: rgba(var(--foreground-color), 0.5);
}
#sign_in, #sign_in,
#sign_up { #sign_up {
justify-items: center; justify-items: center;
@ -1023,18 +1031,21 @@ sm-button[variant=primary] {
overflow: auto hidden; overflow: auto hidden;
} }
#selected_contacts_container:not(:empty) { #selected_contacts_container:not(:empty) {
margin-top: 1.5rem; padding: 0.5rem 0;
margin: 0.5rem 0;
border-bottom: solid thin rgba(var(--text-color), 0.1);
} }
#selected_contacts_container .contact-preview { #selected_contacts_container .contact-preview {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
margin-right: 0.5rem; margin-right: 0.3rem;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
padding: 0 0.2rem; padding-left: 0.2rem;
border-radius: 2rem; border-radius: 2rem;
transform-origin: left; transform-origin: left;
overflow: hidden;
} }
#selected_contacts_container .contact-preview .initial { #selected_contacts_container .contact-preview .initial {
width: 1.6rem; width: 1.6rem;
@ -1047,19 +1058,13 @@ sm-button[variant=primary] {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
#contact_details_popup {
--body-padding: 0 0 1.5rem 0;
}
#contact_details_popup .popup-section { #contact_details_popup .popup-section {
margin: 1.5rem; margin: 1.5rem 0;
} }
#contact_details_popup h5 { #contact_details_popup h5 {
font-weight: 500; font-weight: 500;
opacity: 0.8; opacity: 0.8;
} }
#contact_details_popup .copy-row h4 {
font-weight: 400;
}
#contact_details_popup .group-icon { #contact_details_popup .group-icon {
padding: 0.2rem !important; padding: 0.2rem !important;
height: 3rem; height: 3rem;
@ -1080,11 +1085,6 @@ sm-button[variant=primary] {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
} }
#contact_details_popup .option .icon {
padding: 0;
width: 1.2rem;
background: none;
}
#warn_no_encryption, #warn_no_encryption,
.date-card, .date-card,
@ -1286,22 +1286,6 @@ sm-button[variant=primary] {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }
.option {
display: flex;
align-items: center;
padding: 0.8rem 1.5rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.option .icon {
height: 1.4rem;
width: 1.4rem;
margin-right: 1rem;
stroke: rgba(255, 255, 255, 0.8);
}
#main_navbar { #main_navbar {
display: flex; display: flex;
background: rgba(var(--text-color), 0.03); background: rgba(var(--text-color), 0.03);
@ -1560,34 +1544,7 @@ sm-button[variant=primary] {
#chat_details_panel { #chat_details_panel {
background: rgba(var(--text-color), 0.04); background: rgba(var(--text-color), 0.04);
padding-bottom: 1.5rem; padding: 0 1.5rem 1.5rem 1.5rem;
}
#chat_details_panel .card {
margin: 0 1rem;
padding: 1.5rem 1rem;
border-radius: 0.8rem;
background: rgba(var(--text-color), 0.04);
}
#chat_details_panel .card:not(:last-of-type) {
margin-bottom: 1rem;
}
#chat_details_panel .card .h4 {
font-weight: 400;
font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
margin-bottom: 0.5rem;
}
#chat_details_panel .card > .flex {
margin-bottom: 1rem;
}
#chat_details_panel .card > .flex .h4 {
margin-bottom: 0;
}
#chat_details_panel .card .tip {
margin-bottom: 0.5rem;
}
#chat_details_panel .card .danger:not(:last-of-type) {
margin-bottom: 1rem;
} }
#chat_details_panel header { #chat_details_panel header {
position: -webkit-sticky; position: -webkit-sticky;
@ -1637,6 +1594,11 @@ sm-button[variant=primary] {
overflow-y: auto; overflow-y: auto;
} }
#chat,
#mail {
background-color: rgba(var(--foreground-color), 0.3);
}
#chat { #chat {
position: relative; position: relative;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -1875,7 +1837,7 @@ sm-button[variant=primary] {
opacity: 0.5; opacity: 0.5;
font-weight: 500; font-weight: 500;
} }
#send_message_button.active { #send_message_button:not(:disabled) {
opacity: 1; opacity: 1;
color: var(--accent-color); color: var(--accent-color);
} }
@ -1886,17 +1848,6 @@ sm-button[variant=primary] {
--background: rgba(var(--text-color), 0.1); --background: rgba(var(--text-color), 0.1);
} }
.big-emoji {
flex-direction: column;
}
.big-emoji .message-body {
justify-content: center;
font-size: 2.6rem;
}
.big-emoji .text-emoji {
font-size: 2.6rem !important;
}
#messages_container { #messages_container {
flex: 1; flex: 1;
padding: 0 1rem; padding: 0 1rem;
@ -2099,6 +2050,9 @@ sm-button[variant=primary] {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
width: min(60ch, 100%); width: min(60ch, 100%);
} }
#settings_page section .button {
align-self: flex-start;
}
#settings_page #sign_out::part(button) { #settings_page #sign_out::part(button) {
color: var(--error-color); color: var(--error-color);
} }
@ -2146,6 +2100,17 @@ sm-button[variant=primary] {
width: 100%; width: 100%;
} }
.option {
width: 100%;
justify-content: flex-start;
padding: 0.8rem 0;
color: var(--accent-color);
}
.option .icon {
fill: var(--accent-color);
margin-right: 1rem;
}
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
sm-popup { sm-popup {
--border-radius: 1rem 1rem 0 0; --border-radius: 1rem 1rem 0 0;
@ -2270,7 +2235,7 @@ sm-button[variant=primary] {
grid-area: nav; grid-area: nav;
border-top: none; border-top: none;
flex-direction: column; flex-direction: column;
background-color: rgba(var(--background-color), 0.06); background-color: rgba(var(--foreground-color), 0.3);
} }
#main_navbar ul { #main_navbar ul {
flex-direction: column; flex-direction: column;
@ -2351,6 +2316,7 @@ sm-button[variant=primary] {
@media only screen and (min-width: 1080px) { @media only screen and (min-width: 1080px) {
#chat #messages_container { #chat #messages_container {
padding: 1rem 4rem; padding: 1rem 4rem;
padding-top: 0;
} }
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
@ -2405,8 +2371,7 @@ sm-button[variant=primary] {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
} }
.emoji:hover, .emoji:hover {
.option:hover {
cursor: pointer; cursor: pointer;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
} }
@ -2422,9 +2387,7 @@ sm-button[variant=primary] {
} }
@media (hover: none) { @media (hover: none) {
.contact-preview, .contact-preview,
.contact, .contact {
.icon,
.option {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

110
css/main.scss
View File

@ -212,6 +212,9 @@ input {
} }
} }
} }
sm-copy {
font-size: 0.9rem;
}
sm-input, sm-input,
sm-textarea { sm-textarea {
@ -615,6 +618,9 @@ ol {
height: 100%; height: 100%;
} }
} }
.inner-page {
background-color: rgba(var(--foreground-color), 0.5);
}
#sign_in, #sign_in,
#sign_up { #sign_up {
@ -911,18 +917,21 @@ sm-button[variant="primary"] {
display: flex; display: flex;
overflow: auto hidden; overflow: auto hidden;
&:not(:empty) { &:not(:empty) {
margin-top: 1.5rem; padding: 0.5rem 0;
margin: 0.5rem 0;
border-bottom: solid thin rgba(var(--text-color), 0.1);
} }
.contact-preview { .contact-preview {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
margin-right: 0.5rem; margin-right: 0.3rem;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
padding: 0 0.2rem; padding-left: 0.2rem;
border-radius: 2rem; border-radius: 2rem;
transform-origin: left; transform-origin: left;
overflow: hidden;
.initial { .initial {
width: 1.6rem; width: 1.6rem;
height: 1.6rem; height: 1.6rem;
@ -936,19 +945,13 @@ sm-button[variant="primary"] {
} }
} }
#contact_details_popup { #contact_details_popup {
--body-padding: 0 0 1.5rem 0;
.popup-section { .popup-section {
margin: 1.5rem; margin: 1.5rem 0;
} }
h5 { h5 {
font-weight: 500; font-weight: 500;
opacity: 0.8; opacity: 0.8;
} }
.copy-row {
h4 {
font-weight: 400;
}
}
.group-icon { .group-icon {
padding: 0.2rem !important; padding: 0.2rem !important;
height: 3rem; height: 3rem;
@ -969,13 +972,6 @@ sm-button[variant="primary"] {
font-weight: 500; font-weight: 500;
} }
} }
.option {
.icon {
padding: 0;
width: 1.2rem;
background: none;
}
}
} }
#warn_no_encryption, #warn_no_encryption,
.date-card, .date-card,
@ -1150,18 +1146,6 @@ sm-button[variant="primary"] {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }
.option {
display: flex;
align-items: center;
padding: 0.8rem 1.5rem;
user-select: none;
.icon {
height: 1.4rem;
width: 1.4rem;
margin-right: 1rem;
stroke: rgba(255, 255, 255, 0.8);
}
}
#main_navbar { #main_navbar {
display: flex; display: flex;
background: rgba(var(--text-color), 0.03); background: rgba(var(--text-color), 0.03);
@ -1394,34 +1378,7 @@ sm-button[variant="primary"] {
} }
#chat_details_panel { #chat_details_panel {
background: rgba(var(--text-color), 0.04); background: rgba(var(--text-color), 0.04);
padding-bottom: 1.5rem; padding: 0 1.5rem 1.5rem 1.5rem;
.card {
margin: 0 1rem;
padding: 1.5rem 1rem;
border-radius: 0.8rem;
background: rgba(var(--text-color), 0.04);
&:not(:last-of-type) {
margin-bottom: 1rem;
}
.h4 {
font-weight: 400;
font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
margin-bottom: 0.5rem;
}
& > .flex {
margin-bottom: 1rem;
.h4 {
margin-bottom: 0;
}
}
.tip {
margin-bottom: 0.5rem;
}
.danger:not(:last-of-type) {
margin-bottom: 1rem;
}
}
header { header {
position: sticky; position: sticky;
top: 0; top: 0;
@ -1468,6 +1425,10 @@ sm-button[variant="primary"] {
max-height: 50vh; max-height: 50vh;
overflow-y: auto; overflow-y: auto;
} }
#chat,
#mail {
background-color: rgba(var(--foreground-color), 0.3);
}
#chat { #chat {
position: relative; position: relative;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -1685,7 +1646,7 @@ sm-button[variant="primary"] {
margin-left: 0.5rem; margin-left: 0.5rem;
opacity: 0.5; opacity: 0.5;
font-weight: 500; font-weight: 500;
&.active { &:not(:disabled) {
opacity: 1; opacity: 1;
color: var(--accent-color); color: var(--accent-color);
} }
@ -1695,16 +1656,6 @@ sm-button[variant="primary"] {
--border-radius: 0.5rem; --border-radius: 0.5rem;
--background: rgba(var(--text-color), 0.1); --background: rgba(var(--text-color), 0.1);
} }
.big-emoji {
flex-direction: column;
.message-body {
justify-content: center;
font-size: 2.6rem;
}
.text-emoji {
font-size: 2.6rem !important;
}
}
#messages_container { #messages_container {
flex: 1; flex: 1;
padding: 0 1rem; padding: 0 1rem;
@ -1892,6 +1843,9 @@ sm-button[variant="primary"] {
gap: 0.5rem; gap: 0.5rem;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
width: min(60ch, 100%); width: min(60ch, 100%);
.button {
align-self: flex-start;
}
} }
#sign_out::part(button) { #sign_out::part(button) {
color: var(--error-color); color: var(--error-color);
@ -1939,6 +1893,16 @@ sm-button[variant="primary"] {
width: 100%; width: 100%;
} }
} }
.option {
width: 100%;
justify-content: flex-start;
padding: 0.8rem 0;
color: var(--accent-color);
.icon {
fill: var(--accent-color);
margin-right: 1rem;
}
}
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
sm-popup { sm-popup {
--border-radius: 1rem 1rem 0 0; --border-radius: 1rem 1rem 0 0;
@ -2051,7 +2015,7 @@ sm-button[variant="primary"] {
grid-area: nav; grid-area: nav;
border-top: none; border-top: none;
flex-direction: column; flex-direction: column;
background-color: rgba(var(--background-color), 0.06); background-color: rgba(var(--foreground-color), 0.3);
ul { ul {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
@ -2124,6 +2088,7 @@ sm-button[variant="primary"] {
#chat { #chat {
#messages_container { #messages_container {
padding: 1rem 4rem; padding: 1rem 4rem;
padding-top: 0;
} }
} }
} }
@ -2174,8 +2139,7 @@ sm-button[variant="primary"] {
.interactive:hover { .interactive:hover {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
} }
.emoji:hover, .emoji:hover {
.option:hover {
cursor: pointer; cursor: pointer;
background: rgba(var(--text-color), 0.06); background: rgba(var(--text-color), 0.06);
} }
@ -2193,9 +2157,7 @@ sm-button[variant="primary"] {
} }
@media (hover: none) { @media (hover: none) {
.contact-preview, .contact-preview,
.contact, .contact {
.icon,
.option {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.contact .menu { .contact .menu {

430
index.html
View File

File diff suppressed because one or more lines are too long