klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 21:29:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Put pico.css in local assets. Move common css styling into khoj.css

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2023-06-21 23:52:07 -07:00
parent 20a37697de
commit 2728c714d7
5 changed files with 84 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/khoj/interface/web/assets/khoj.css Normal file
View File

@@ -0,0 +1,70 @@
/* Amber Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #ffb300;
--primary-hover: #ffa000;
--primary-focus: rgba(255, 179, 0, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
/* Amber Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--primary: #ffb300;
--primary-hover: #ffc107;
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
}
/* Amber Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
--primary: #ffb300;
--primary-hover: #ffc107;
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
/* Amber (Common styles) */
:root {
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
}
.khoj-configure {
display: grid;
grid-template-columns: 1fr;
padding: 0 24px;
}
.khoj-header {
display: grid;
grid-auto-flow: row;
gap: 20px;
padding: 16px 0;
margin: 0 0 16px 0;
}
.khoj-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 32px;
justify-self: center;
}
.khoj-nav a {
color: #333;
text-decoration: none;
font-size: 20px;
font-weight: normal;
padding: 8px;
border-radius: 4px;
justify-self: center;
}
.khoj-nav a:hover {
background-color: var(--primary-hover);
}
img.khoj-logo {
width: min(60vw, 150px);
justify-self: center;
}

5
src/khoj/interface/web/assets/pico.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

74
src/khoj/interface/web/base_config.html
View File

@@ -4,7 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png"> <link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png">
<title>Khoj - Settings</title> <title>Khoj - Settings</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"> <link rel="stylesheet" href="/static/assets/pico.min.css">
<link rel="stylesheet" href="/static/assets/khoj.css">
</head> </head>
<body class="khoj-configure"> <body class="khoj-configure">
<div class="khoj-header"> <div class="khoj-header">
@@ -21,82 +22,11 @@
</div> </div>
</body> </body>
<style> <style>
/* Amber Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #ffb300;
--primary-hover: #ffa000;
--primary-focus: rgba(255, 179, 0, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
/* Amber Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--primary: #ffb300;
--primary-hover: #ffc107;
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
}
/* Amber Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
--primary: #ffb300;
--primary-hover: #ffc107;
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
/* Amber (Common styles) */
:root {
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
}
html, body { html, body {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.khoj-configure {
display: grid;
grid-template-columns: 1fr;
padding: 0 24px;
}
.khoj-header {
display: grid;
grid-auto-flow: row;
gap: 20px;
padding: 16px 0;
margin-bottom: 16px;
}
.khoj-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 32px;
justify-self: center;
}
.khoj-nav a {
color: #333;
text-decoration: none;
font-size: 20px;
font-weight: normal;
padding: 8px;
border-radius: 4px;
justify-self: center;
}
.khoj-nav a:hover {
background-color: var(--evening-sun);
}
img.khoj-logo {
width: min(60vw, 150px);
justify-self: center;
}
.page { .page {
display: grid; display: grid;
grid-auto-flow: row; grid-auto-flow: row;

41
src/khoj/interface/web/chat.html
View File

@@ -6,6 +6,7 @@
<link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png"> <link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png">
<link rel="manifest" href="/static/khoj_chat.webmanifest"> <link rel="manifest" href="/static/khoj_chat.webmanifest">
<link rel="stylesheet" href="/static/assets/khoj.css">
</head> </head>
<script> <script>
function formatDate(date) { function formatDate(date) {
@@ -123,10 +124,6 @@
</body> </body>
<style> <style>
:root {
--night-black: #282c34;
--evening-sun: #fbb912;
}
html, body { html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -147,36 +144,6 @@
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
.khoj-header {
display: grid;
grid-auto-flow: row;
gap: 20px;
padding: 16px 0;
margin: 0;
}
.khoj-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 32px;
justify-self: center;
}
.khoj-nav a {
color: #333;
text-decoration: none;
font-size: 20px;
font-weight: normal;
padding: 8px;
border-radius: 4px;
justify-self: center;
}
.khoj-nav a:hover {
background-color: var(--evening-sun);
}
img.khoj-logo {
width: min(60vw, 150px);
justify-self: center;
}
#chat-body { #chat-body {
font-size: medium; font-size: medium;
margin: 0px; margin: 0px;
@@ -213,8 +180,8 @@
} }
/* color chat bubble by khoj blue */ /* color chat bubble by khoj blue */
.chat-message-text.khoj { .chat-message-text.khoj {
color: var(--night-black); color: var(--primary-inverse);
background: var(--evening-sun); background: var(--primary);
margin-left: auto; margin-left: auto;
white-space: pre-line; white-space: pre-line;
} }
@@ -225,7 +192,7 @@
bottom: -2px; bottom: -2px;
left: -7px; left: -7px;
border: 10px solid transparent; border: 10px solid transparent;
border-top-color: var(--evening-sun); border-top-color: var(--primary);
border-bottom: 0; border-bottom: 0;
transform: rotate(-60deg); transform: rotate(-60deg);
} }

36
src/khoj/interface/web/index.html
View File

@@ -6,9 +6,10 @@
<link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png"> <link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png">
<link rel="manifest" href="/static/khoj.webmanifest"> <link rel="manifest" href="/static/khoj.webmanifest">
<link rel="stylesheet" href="/static/assets/khoj.css">
</head> </head>
<script type="text/javascript" src="static/assets/org.min.js"></script> <script type="text/javascript" src="/static/assets/org.min.js"></script>
<script type="text/javascript" src="static/assets/markdown-it.min.js"></script> <script type="text/javascript" src="/static/assets/markdown-it.min.js"></script>
<script> <script>
function render_image(item) { function render_image(item) {
@@ -238,7 +239,6 @@
grid-column: 2; grid-column: 2;
} }
} }
body { body {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@@ -254,36 +254,6 @@
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
.khoj-header {
display: grid;
grid-auto-flow: row;
gap: 20px;
padding: 16px 0;
margin: 0;
}
.khoj-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 32px;
justify-self: center;
}
.khoj-nav a {
color: #333;
text-decoration: none;
font-size: 20px;
font-weight: normal;
padding: 8px;
border-radius: 4px;
justify-self: center;
}
.khoj-nav a:hover {
background-color: var(--evening-sun);
}
img.khoj-logo {
width: min(60vw, 150px);
justify-self: center;
}
#options { #options {
padding: 0; padding: 0;
display: grid; display: grid;