klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-08 05:39:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
src/khoj/interface/web/assets/khoj.css
View File

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

BIN
src/khoj/interface/web/assets/samples/desktop-plain-chat-sample.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

BIN
src/khoj/interface/web/assets/samples/phone-plain-chat-sample.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

20
src/khoj/interface/web/login.html
View File

@@ -65,13 +65,24 @@
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
height: 100%; 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); color: var(--main-text-color);
font-family: var(--font-family); font-family: var(--font-family);
font-size: 20px; font-size: 20px;
font-weight: 300; font-weight: 300;
line-height: 1.5em; 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 > * { body > * {
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
@@ -100,9 +111,9 @@
grid-template-rows: 1fr auto auto 1fr; grid-template-rows: 1fr auto auto 1fr;
gap: 32px; gap: 32px;
min-height: 300px; min-height: 300px;
background: var(--background-color);
margin-left: 25%; margin-left: 25%;
margin-right: 25%; margin-right: 25%;
z-index: 1;
} }
div.g_id_signin { div.g_id_signin {
@@ -118,9 +129,14 @@
} }
@media only screen and (max-width: 700px) { @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 { div#login-modal {
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
z-index: 1;
} }
} }