mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-12-20 03:17:44 +00:00
1685c60e3c
* Converted navigation menu into a dropdown menu * Moved collapsed side panel menu icons into top row * Auto refresh when conversation is deleted to update side panel and route back to main page if deletion is on current conversation * Highlight the current conversation in the side panel * Dynamic homepage messages with current day and time of day. * `colorutils` upgraded to have more expansive tailwind color options and dynamic class name generation. * Converted create agent button alert into shadcn `ToolTip` * Colored lines and icons for agents in chat window * Cleaned up border styling in dark mode * fixed three dot menu in side panel to be more easier to click * Add the KhojLogo import in the nav menu and use a default user profile icon when not authenticated * Get rid of custom --box-shadow CSS variable * Pass the agent metadat through the chat body data in order to style the send button * Add login to the unauthenticated login view, redirecto to home if conversation history not loaded * Set a max height for the input text area * Simplify tailwind class names --------- Co-authored-by: sabaimran <narmiabas@gmail.com>
357 lines
8.6 KiB
CSS
357 lines
8.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 224 71.4% 4.1%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 224 71.4% 4.1%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 224 71.4% 4.1%;
|
|
--primary: 24.6 95% 53.1%;
|
|
--primary-foreground: 60 9.1% 97.8%;
|
|
--secondary: 220 14.3% 95.9%;
|
|
--secondary-foreground: 220.9 39.3% 11%;
|
|
--muted: 220 14.3% 95.9%;
|
|
--muted-foreground: 220 8.9% 46.1%;
|
|
--accent: 220 14.3% 95.9%;
|
|
--accent-foreground: 220.9 39.3% 11%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 20% 98%;
|
|
--border: 220 13% 91%;
|
|
--input: 220 13% 91%;
|
|
--ring: 24.6 95% 53.1%;
|
|
--radius: 0.5rem;
|
|
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
|
|
|
/* Khoj Custom Colors */
|
|
--frosted-background-color: 20 13% 95%;
|
|
--border-color: #e2e2e2;
|
|
|
|
/* Imported from Highlight.js */
|
|
pre code.hljs {
|
|
display: block;
|
|
overflow-x: auto;
|
|
padding: 1em
|
|
}
|
|
|
|
code.hljs {
|
|
padding: 3px 5px
|
|
}
|
|
|
|
/*!
|
|
Theme: GitHub
|
|
Description: Light theme as seen on github.com
|
|
Author: github.com
|
|
Maintainer: @Hirse
|
|
Updated: 2021-05-15
|
|
|
|
Outdated base version: https://github.com/primer/github-syntax-light
|
|
Current colors taken from GitHub's CSS
|
|
*/
|
|
.hljs {
|
|
color: #24292e;
|
|
background: #ffffff
|
|
}
|
|
|
|
.hljs-doctag,
|
|
.hljs-keyword,
|
|
.hljs-meta .hljs-keyword,
|
|
.hljs-template-tag,
|
|
.hljs-template-variable,
|
|
.hljs-type,
|
|
.hljs-variable.language_ {
|
|
/* prettylights-syntax-keyword */
|
|
color: #d73a49
|
|
}
|
|
|
|
.hljs-title,
|
|
.hljs-title.class_,
|
|
.hljs-title.class_.inherited__,
|
|
.hljs-title.function_ {
|
|
/* prettylights-syntax-entity */
|
|
color: #6f42c1
|
|
}
|
|
|
|
.hljs-attr,
|
|
.hljs-attribute,
|
|
.hljs-literal,
|
|
.hljs-meta,
|
|
.hljs-number,
|
|
.hljs-operator,
|
|
.hljs-variable,
|
|
.hljs-selector-attr,
|
|
.hljs-selector-class,
|
|
.hljs-selector-id {
|
|
/* prettylights-syntax-constant */
|
|
color: #005cc5
|
|
}
|
|
|
|
.hljs-regexp,
|
|
.hljs-string,
|
|
.hljs-meta .hljs-string {
|
|
/* prettylights-syntax-string */
|
|
color: #032f62
|
|
}
|
|
|
|
.hljs-built_in,
|
|
.hljs-symbol {
|
|
/* prettylights-syntax-variable */
|
|
color: #e36209
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-code,
|
|
.hljs-formula {
|
|
/* prettylights-syntax-comment */
|
|
color: #6a737d
|
|
}
|
|
|
|
.hljs-name,
|
|
.hljs-quote,
|
|
.hljs-selector-tag,
|
|
.hljs-selector-pseudo {
|
|
/* prettylights-syntax-entity-tag */
|
|
color: #22863a
|
|
}
|
|
|
|
.hljs-subst {
|
|
/* prettylights-syntax-storage-modifier-import */
|
|
color: #24292e
|
|
}
|
|
|
|
.hljs-section {
|
|
/* prettylights-syntax-markup-heading */
|
|
color: #005cc5;
|
|
font-weight: bold
|
|
}
|
|
|
|
.hljs-bullet {
|
|
/* prettylights-syntax-markup-list */
|
|
color: #735c0f
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
/* prettylights-syntax-markup-italic */
|
|
color: #24292e;
|
|
font-style: italic
|
|
}
|
|
|
|
.hljs-strong {
|
|
/* prettylights-syntax-markup-bold */
|
|
color: #24292e;
|
|
font-weight: bold
|
|
}
|
|
|
|
.hljs-addition {
|
|
/* prettylights-syntax-markup-inserted */
|
|
color: #22863a;
|
|
background-color: #f0fff4
|
|
}
|
|
|
|
.hljs-deletion {
|
|
/* prettylights-syntax-markup-deleted */
|
|
color: #b31d28;
|
|
background-color: #ffeef0
|
|
}
|
|
|
|
.hljs-char.escape_,
|
|
.hljs-link,
|
|
.hljs-params,
|
|
.hljs-property,
|
|
.hljs-punctuation,
|
|
.hljs-tag {
|
|
/* purposely ignored */
|
|
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
--background: 0 0% 14%;
|
|
--foreground: 210 20% 98%;
|
|
--card: 0 0% 14%;
|
|
--card-foreground: 210 20% 98%;
|
|
--popover: 0 0% 14%;
|
|
--popover-foreground: 210 20% 98%;
|
|
--popover: 20 14.3% 4.1%;
|
|
--popover-foreground: 60 9.1% 97.8%;
|
|
--secondary: 0 0% 9%;
|
|
--secondary-foreground: 210 20% 98%;
|
|
--muted: 0 0% 9%;
|
|
--muted-foreground: 217.9 10.6% 64.9%;
|
|
--accent: 0 0% 9%;
|
|
--accent-foreground: 210 20% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 20% 98%;
|
|
--border: 0 0% 9%;
|
|
--input: 0 0% 9%;
|
|
--ring: 20.5 90.2% 48.2%;
|
|
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
|
|
|
/* Imported from highlight.js */
|
|
pre code.hljs {
|
|
display: block;
|
|
overflow-x: auto;
|
|
padding: 1em
|
|
}
|
|
|
|
code.hljs {
|
|
padding: 3px 5px
|
|
}
|
|
|
|
/*!
|
|
Theme: GitHub Dark
|
|
Description: Dark theme as seen on github.com
|
|
Author: github.com
|
|
Maintainer: @Hirse
|
|
Updated: 2021-05-15
|
|
|
|
Outdated base version: https://github.com/primer/github-syntax-dark
|
|
Current colors taken from GitHub's CSS
|
|
*/
|
|
.hljs {
|
|
color: #c9d1d9;
|
|
background: #0d1117
|
|
}
|
|
|
|
.hljs-doctag,
|
|
.hljs-keyword,
|
|
.hljs-meta .hljs-keyword,
|
|
.hljs-template-tag,
|
|
.hljs-template-variable,
|
|
.hljs-type,
|
|
.hljs-variable.language_ {
|
|
/* prettylights-syntax-keyword */
|
|
color: #ff7b72
|
|
}
|
|
|
|
.hljs-title,
|
|
.hljs-title.class_,
|
|
.hljs-title.class_.inherited__,
|
|
.hljs-title.function_ {
|
|
/* prettylights-syntax-entity */
|
|
color: #d2a8ff
|
|
}
|
|
|
|
.hljs-attr,
|
|
.hljs-attribute,
|
|
.hljs-literal,
|
|
.hljs-meta,
|
|
.hljs-number,
|
|
.hljs-operator,
|
|
.hljs-variable,
|
|
.hljs-selector-attr,
|
|
.hljs-selector-class,
|
|
.hljs-selector-id {
|
|
/* prettylights-syntax-constant */
|
|
color: #79c0ff
|
|
}
|
|
|
|
.hljs-regexp,
|
|
.hljs-string,
|
|
.hljs-meta .hljs-string {
|
|
/* prettylights-syntax-string */
|
|
color: #a5d6ff
|
|
}
|
|
|
|
.hljs-built_in,
|
|
.hljs-symbol {
|
|
/* prettylights-syntax-variable */
|
|
color: #ffa657
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-code,
|
|
.hljs-formula {
|
|
/* prettylights-syntax-comment */
|
|
color: #8b949e
|
|
}
|
|
|
|
.hljs-name,
|
|
.hljs-quote,
|
|
.hljs-selector-tag,
|
|
.hljs-selector-pseudo {
|
|
/* prettylights-syntax-entity-tag */
|
|
color: #7ee787
|
|
}
|
|
|
|
.hljs-subst {
|
|
/* prettylights-syntax-storage-modifier-import */
|
|
color: #c9d1d9
|
|
}
|
|
|
|
.hljs-section {
|
|
/* prettylights-syntax-markup-heading */
|
|
color: #1f6feb;
|
|
font-weight: bold
|
|
}
|
|
|
|
.hljs-bullet {
|
|
/* prettylights-syntax-markup-list */
|
|
color: #f2cc60
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
/* prettylights-syntax-markup-italic */
|
|
color: #c9d1d9;
|
|
font-style: italic
|
|
}
|
|
|
|
.hljs-strong {
|
|
/* prettylights-syntax-markup-bold */
|
|
color: #c9d1d9;
|
|
font-weight: bold
|
|
}
|
|
|
|
.hljs-addition {
|
|
/* prettylights-syntax-markup-inserted */
|
|
color: #aff5b4;
|
|
background-color: #033a16
|
|
}
|
|
|
|
.hljs-deletion {
|
|
/* prettylights-syntax-markup-deleted */
|
|
color: #ffdcd7;
|
|
background-color: #67060c
|
|
}
|
|
|
|
.hljs-char.escape_,
|
|
.hljs-link,
|
|
.hljs-params,
|
|
.hljs-property,
|
|
.hljs-punctuation,
|
|
.hljs-tag {
|
|
/* purposely ignored */
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-4xl font-bold;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
pre code.hljs {
|
|
white-space: preserve;
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|