Update web login screen to show frosted minimal chat UI in background

This commit is contained in:
Debanjum Singh Solanky 2024-02-23 18:25:53 +05:30
parent 1b0318564e
commit e10b260988
4 changed files with 21 additions and 2 deletions

View file

@ -9,6 +9,7 @@
--primary-focus: rgba(255, 179, 0, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3;
--frosted-background-color: rgba(245, 244, 243, 0.75);
--main-text-color: #475569;
--summer-sun: #fcc50b;
--water: #44b9da;
@ -26,6 +27,7 @@
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3;
--frosted-background-color: rgba(245, 244, 243, 0.75);
--main-text-color: #475569;
--summer-sun: #fcc50b;
--water: #44b9da;
@ -42,6 +44,7 @@
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3;
--frosted-background-color: rgba(245, 244, 243, 0.75);
--main-text-color: #475569;
--summer-sun: #fcc50b;
--water: #44b9da;

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

View file

@ -65,13 +65,24 @@
padding: 0px;
margin: 0px;
height: 100%;
background: var(--background-color);
background: url('/static/assets/samples/desktop-plain-chat-sample.png') no-repeat center center fixed;
background-size: contain;
color: var(--main-text-color);
font-family: var(--font-family);
font-size: 20px;
font-weight: 300;
line-height: 1.5em;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--frosted-background-color);
backdrop-filter: blur(10px);
}
body > * {
padding: 10px;
margin: 10px;
@ -100,9 +111,9 @@
grid-template-rows: 1fr auto auto 1fr;
gap: 32px;
min-height: 300px;
background: var(--background-color);
margin-left: 25%;
margin-right: 25%;
z-index: 1;
}
div.g_id_signin {
@ -118,9 +129,14 @@
}
@media only screen and (max-width: 700px) {
body{
background: url('/static/assets/samples/phone-plain-chat-sample.png') no-repeat center center fixed;
background-size: contain;
}
div#login-modal {
margin-left: 10%;
margin-right: 10%;
z-index: 1;
}
}