src/whiskr
1
0
Fork 0
mirror of https://github.com/coalaura/whiskr.git synced 2025-12-02 20:22:52 +00:00
Code Activity

cleanup colors

Browse Source
This commit is contained in:
Laura
2025-11-11 15:32:27 +01:00
parent 97ab3b0ed4
commit f57b64e8f0
5 changed files with 185 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
static/css/base.css Normal file
View File

@@ -0,0 +1,84 @@
@font-face {
font-family: "Comic Code";
src: url(fonts/ComicCode-Regular.ttf);
font-weight: normal;
}
@font-face {
font-family: "Comic Code";
src: url(fonts/ComicCode-Bold.ttf);
font-weight: 700;
}
@font-face {
font-family: "Comic Code";
src: url(fonts/ComicCode-Italic.ttf);
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Comic Code";
src: url(fonts/ComicCode-BoldItalic.ttf);
font-weight: 700;
font-style: italic;
}
:root {
--font: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
--font-mono: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;
--c-rosewater: #f4dbd6;
--c-mauve: #c6a0f6;
--c-red: #ed8796;
--c-maroon: #ee99a0;
--c-yellow: #eed49f;
--c-green: #a6da95;
--c-sapphire: #7dc4e4;
--c-blue: #8aadf4;
--c-lavender: #b7bdf8;
--c-text: #cad3f5;
--c-subtext: #a5adcb;
--c-overlay2: #939ab7;
--c-overlay0: #6e738d;
--c-surface2: #5b6078;
--c-surface1: #494d64;
--c-surface0: #363a4f;
--c-base: #24273a;
--c-mantle: #1e2030;
--c-crust: #181926;
--c-green-dark: color-mix(in oklab, var(--c-green), black 25%);
--c-overlay0-dark: color-mix(in oklab, var(--c-overlay0), black 10%);
--c-surface0-dark: color-mix(in oklab, var(--c-surface0), black 10%);
--c-base-dark: color-mix(in oklab, var(--c-base), black 10%);
--c-mantle-dark: color-mix(in oklab, var(--c-mantle), black 10%);
--c-crust-dark: color-mix(in oklab, var(--c-crust), black 10%);
}
* {
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: var(--c-text) transparent;
}
:-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--c-text);
border: none;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--c-text);
}

150
static/css/chat.css
View File

@@ -1,62 +1,8 @@
@font-face {
font-family: "Comic Code";
src: url(fonts/ComicCode-Regular.ttf);
font-weight: normal;
}
@font-face {
font-family: "Comic Code";
src: url(fonts/ComicCode-Bold.ttf);
font-weight: 700;
}
@font-face {
font-family: "Comic Code";
src: url(fonts/ComicCode-Italic.ttf);
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Comic Code";
src: url(fonts/ComicCode-BoldItalic.ttf);
font-weight: 700;
font-style: italic;
}
* {
box-sizing: border-box;
}
:-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #cad3f5;
border: none;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #cad3f5;
}
* {
scrollbar-width: thin;
scrollbar-color: #cad3f5 transparent;
}
html, html,
body { body {
font-family: "Work Sans", sans-serif; font-family: var(--font);
font-size: 15px; font-size: 15px;
color: #cad3f5; color: var(--c-text);
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
@@ -80,7 +26,7 @@ body.resizing * {
font-style: italic; font-style: italic;
top: 3px; top: 3px;
right: 4px; right: 4px;
color: #a5adcb; color: var(--c-subtext);
} }
#total { #total {
@@ -89,7 +35,7 @@ body.resizing * {
} }
#version a { #version a {
color: #a5adcb; color: var(--c-subtext);
text-decoration: none; text-decoration: none;
} }
@@ -132,7 +78,7 @@ body:not(.loading) #loading {
inset: 0; inset: 0;
pointer-events: none; pointer-events: none;
z-index: -1; z-index: -1;
background: #181926; background: var(--c-crust);
} }
#floaters .floater { #floaters .floater {
@@ -144,7 +90,7 @@ body:not(.loading) #loading {
opacity: 0.3; opacity: 0.3;
transform: translate(var(--x), var(--y)); transform: translate(var(--x), var(--y));
transition: transform var(--time, 14s); transition: transform var(--time, 14s);
background: var(--color, #181926); background: var(--color, var(--c-crust));
will-change: transform; will-change: transform;
} }
@@ -157,14 +103,14 @@ body:not(.loading) #loading {
.notification { .notification {
position: relative; position: relative;
background: #24273a; background: var(--c-base);
padding: 12px 15px; padding: 12px 15px;
border-radius: 6px; border-radius: 6px;
width: 280px; width: 280px;
margin-bottom: 10px; margin-bottom: 10px;
transition: 250ms; transition: 250ms;
color: #ed8796; color: var(--c-red);
border: 2px solid #ed8796; border: 2px solid var(--c-red);
left: 0px; left: 0px;
overflow: hidden; overflow: hidden;
} }
@@ -191,7 +137,7 @@ body:not(.loading) #loading {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
background: #1e2030; background: var(--c-mantle);
margin: auto; margin: auto;
margin-top: 42px; margin-top: 42px;
width: 100%; width: 100%;
@@ -258,7 +204,7 @@ body:not(.loading) #loading {
top: 0; top: 0;
left: 0; left: 0;
animation: swivel 1.2s ease-in-out infinite; animation: swivel 1.2s ease-in-out infinite;
background: #6e738d; background: var(--c-overlay0);
opacity: 0.5; opacity: 0.5;
border-radius: 6px; border-radius: 6px;
} }
@@ -276,7 +222,7 @@ body:not(.loading) #loading {
#messages:empty::before { #messages:empty::before {
content: "whiskr - no messages"; content: "whiskr - no messages";
color: #a5adcb; color: var(--c-subtext);
font-style: italic; font-style: italic;
align-self: center; align-self: center;
margin-top: 5px; margin-top: 5px;
@@ -286,7 +232,7 @@ body:not(.loading) #loading {
.message { .message {
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background: #24273a; background: var(--c-base);
font: inherit; font: inherit;
color: inherit; color: inherit;
} }
@@ -297,7 +243,7 @@ body:not(.loading) #loading {
min-width: 280px; min-width: 280px;
width: max-content; width: max-content;
padding-top: 28px; padding-top: 28px;
background: #363a4f; background: var(--c-surface0);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -332,7 +278,7 @@ body:not(.loading) #loading {
display: flex; display: flex;
gap: 4px; gap: 4px;
align-items: center; align-items: center;
font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace; font-family: var(--font-mono);
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 12px;
top: 6px; top: 6px;
@@ -350,7 +296,7 @@ body:not(.loading) #loading {
left: -10px; left: -10px;
height: 2px; height: 2px;
width: 6px; width: 6px;
background: #939ab7; background: var(--c-overlay2);
} }
.message .tags { .message .tags {
@@ -401,7 +347,7 @@ body:not(.loading) #loading {
position: relative; position: relative;
width: 32px; width: 32px;
height: 3px; height: 3px;
background: #cad3f5; background: var(--c-text);
animation: swivel 1.5s ease-in-out infinite; animation: swivel 1.5s ease-in-out infinite;
opacity: 0.5; opacity: 0.5;
margin-top: 5px; margin-top: 5px;
@@ -414,7 +360,7 @@ body:not(.loading) #loading {
.message textarea.text { .message textarea.text {
display: block; display: block;
background: #181926; background: var(--c-crust);
min-width: 480px; min-width: 480px;
min-height: 100px; min-height: 100px;
max-width: 100%; max-width: 100%;
@@ -430,15 +376,15 @@ body:not(.loading) #loading {
.message .tool.invalid, .message .tool.invalid,
.message .tool .result.error, .message .tool .result.error,
.message .text .error { .message .text .error {
color: #ed8796; color: var(--c-red);
} }
.message .text .error a { .message .text .error a {
color: #ee99a0; color: var(--c-maroon);
} }
.message.errored { .message.errored {
border: 2px solid #ed8796; border: 2px solid var(--c-red);
} }
.images .image { .images .image {
@@ -450,12 +396,12 @@ body:not(.loading) #loading {
max-width: 100%; max-width: 100%;
width: 420px; width: 420px;
border-radius: 6px; border-radius: 6px;
border: 2px solid #363a4f; border: 2px solid var(--c-surface0);
} }
.tool .result pre, .tool .result pre,
.reasoning-text pre { .reasoning-text pre {
background: #1b1d2a; background: var(--c-mantle-dark);
} }
.tool .result pre.l-json .pre-header { .tool .result pre.l-json .pre-header {
@@ -464,7 +410,7 @@ body:not(.loading) #loading {
.message .tool .result, .message .tool .result,
.message .reasoning-text { .message .reasoning-text {
background: #1e2030; background: var(--c-mantle);
border-radius: 6px; border-radius: 6px;
padding: 10px 12px; padding: 10px 12px;
margin-top: 16px; margin-top: 16px;
@@ -486,7 +432,7 @@ body:not(.loading) #loading {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
background: #24273a; background: var(--c-base);
} }
.message.collapsed .body { .message.collapsed .body {
@@ -501,7 +447,7 @@ body:not(.loading) #loading {
position: absolute; position: absolute;
content: "collapsed..."; content: "collapsed...";
font-style: italic; font-style: italic;
color: #939ab7; color: var(--c-overlay2);
font-size: 12px; font-size: 12px;
top: 50%; top: 50%;
left: 12px; left: 12px;
@@ -509,13 +455,13 @@ body:not(.loading) #loading {
} }
.message .time { .message .time {
font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace; font-family: var(--font-mono);
font-size: 10px; font-size: 10px;
line-height: 10px; line-height: 10px;
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 3px; right: 3px;
color: #a5adcb; color: var(--c-subtext);
} }
.tool .call, .tool .call,
@@ -574,7 +520,7 @@ body:not(.loading) #loading {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace; font-family: var(--font-mono);
font-size: 13px; font-size: 13px;
} }
@@ -619,7 +565,7 @@ body:not(.loading) #loading {
right: 2px; right: 2px;
font-size: 12px; font-size: 12px;
font-style: italic; font-style: italic;
color: #a5adcb; color: var(--c-subtext);
transition: 150ms opacity; transition: 150ms opacity;
opacity: 0; opacity: 0;
} }
@@ -715,7 +661,7 @@ body:not(.loading) #loading {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: #939ab7; background: var(--c-overlay2);
animation: bounce 1.4s infinite ease-in-out; animation: bounce 1.4s infinite ease-in-out;
} }
@@ -821,7 +767,7 @@ body:not(.loading) #loading {
left: 12px; left: 12px;
right: 12px; right: 12px;
height: 36px; height: 36px;
background: #24273a; background: var(--c-base);
} }
#chat:has(.has-files) { #chat:has(.has-files) {
@@ -866,7 +812,7 @@ body:not(.loading) #loading {
} }
.message.editing .files { .message.editing .files {
background: #181926; background: var(--c-crust);
padding: 9px; padding: 9px;
gap: 6px; gap: 6px;
} }
@@ -881,12 +827,12 @@ body:not(.loading) #loading {
display: flex; display: flex;
gap: 4px; gap: 4px;
align-items: center; align-items: center;
background: #24273a; background: var(--c-base);
box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.1);
padding: 8px 10px; padding: 8px 10px;
padding-right: 14px; padding-right: 14px;
border-radius: 6px; border-radius: 6px;
border: 1px solid #363a4f; border: 1px solid var(--c-surface0);
overflow: hidden; overflow: hidden;
min-width: 140px; min-width: 140px;
} }
@@ -943,7 +889,7 @@ body:not(.loading) #loading {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 4px 6px; padding: 4px 6px;
background: #363a4f; background: var(--c-surface0);
width: 100%; width: 100%;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px; border-top-right-radius: 6px;
@@ -958,7 +904,7 @@ body:not(.loading) #loading {
} }
#role .dropdown { #role .dropdown {
font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace; font-family: var(--font-mono);
background: transparent; background: transparent;
padding: 0; padding: 0;
height: 14px; height: 14px;
@@ -1006,7 +952,7 @@ button {
input, input,
select { select {
background: #363a4f; background: var(--c-surface0);
padding: 2px 5px; padding: 2px 5px;
font-size: 14px; font-size: 14px;
} }
@@ -1040,7 +986,7 @@ select {
display: block; display: block;
width: 2px; width: 2px;
height: 12px; height: 12px;
background: #5b6078; background: var(--c-surface2);
margin-right: 4px; margin-right: 4px;
} }
@@ -1112,7 +1058,7 @@ body.loading #version,
} }
input.invalid { input.invalid {
border: 1px solid #ed8796; border: 1px solid var(--c-red);
} }
.message .collapse::before { .message .collapse::before {
@@ -1349,7 +1295,7 @@ label[for="reasoning-tokens"] {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
gap: 14px; gap: 14px;
background: #24273a; background: var(--c-base);
padding: 18px 20px; padding: 18px 20px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1);
@@ -1357,7 +1303,7 @@ label[for="reasoning-tokens"] {
} }
.modal .header { .modal .header {
background: #363a4f; background: var(--c-surface0);
height: 42px; height: 42px;
margin: -18px -20px; margin: -18px -20px;
padding: 10px 20px; padding: 10px 20px;
@@ -1390,12 +1336,12 @@ label[for="reasoning-tokens"] {
} }
.modal .error { .modal .error {
background: #ed8796; background: var(--c-red);
font-weight: 500; font-weight: 500;
font-style: italic; font-style: italic;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 14px; font-size: 14px;
color: #11111b; color: var(--c-crust-dark);
padding: 5px 10px; padding: 5px 10px;
border-radius: 2px; border-radius: 2px;
} }
@@ -1405,7 +1351,7 @@ label[for="reasoning-tokens"] {
} }
.modal.errored input { .modal.errored input {
border: 1px solid #ed8796; border: 1px solid var(--c-red);
} }
.modal .form-group { .modal .form-group {
@@ -1427,8 +1373,8 @@ label[for="reasoning-tokens"] {
} }
#login { #login {
background: #a6da95; background: var(--c-green);
color: #11111b; color: var(--c-crust-dark);
padding: 4px 10px; padding: 4px 10px;
border-radius: 2px; border-radius: 2px;
font-weight: 500; font-weight: 500;
@@ -1436,7 +1382,7 @@ label[for="reasoning-tokens"] {
} }
#login:hover { #login:hover {
background: #89bb77; background: var(--c-green-dark);
} }
@keyframes swivel { @keyframes swivel {

58
static/css/dropdown.css
View File

@@ -1,7 +1,7 @@
.dropdown { .dropdown {
position: relative; position: relative;
user-select: none; user-select: none;
background: #363a4f; background: var(--c-surface0);
padding: 2px 5px; padding: 2px 5px;
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
@@ -16,15 +16,20 @@
cursor: pointer; cursor: pointer;
} }
.dropdown .selected::after,
.dropdown .opt.active::before,
.dropdown .tags .tag {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.dropdown .selected::after { .dropdown .selected::after {
content: ""; content: "";
display: block; display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-image: url(icons/chevron.svg); background-image: url(icons/chevron.svg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transform: rotate(180deg); transform: rotate(180deg);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -35,12 +40,12 @@
bottom: calc(100% + 4px); bottom: calc(100% + 4px);
left: 0; left: 0;
flex-direction: column; flex-direction: column;
background: #363a4f; background: var(--c-surface0);
max-height: 250px; max-height: 250px;
box-shadow: box-shadow:
0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.05),
0 1px 3px rgba(0, 0, 0, 0.1); 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #494d64; border: 1px solid var(--c-surface1);
} }
.dropdown:not(.open) .cont { .dropdown:not(.open) .cont {
@@ -64,19 +69,33 @@
.dropdown .opt { .dropdown .opt {
padding: 4px 6px; padding: 4px 6px;
cursor: pointer; cursor: pointer;
background: #363a4f; background: var(--c-surface0);
} }
.dropdown .opt:nth-child(2n + 1) { .dropdown .opt:nth-child(2n + 1) {
background: #32354a; background: var(--c-surface0-dark);
} }
.dropdown .opt:hover { .dropdown .opt:hover {
background: #2c2f44; background: var(--c-base);
} }
.dropdown .opt.active { .dropdown .opt.active {
background: #24273a; background: var(--c-base-dark);
padding-left: 20px;
position: relative;
}
.dropdown .opt.active::before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
left: 3px;
background-image: url(icons/chevron.svg);
transform: translateY(-50%) rotate(90deg);
} }
.dropdown .opt.filtered { .dropdown .opt.filtered {
@@ -99,9 +118,6 @@
.dropdown .tags .tag { .dropdown .tags .tag {
width: 18px; width: 18px;
height: 18px; height: 18px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
} }
.dropdown .selected:not(.all-tags) .tags:has(.tag:nth-child(3)) { .dropdown .selected:not(.all-tags) .tags:has(.tag:nth-child(3)) {
@@ -121,32 +137,32 @@
} }
.tags .tag.reasoning { .tags .tag.reasoning {
--color: #c6a0f6; --color: var(--c-mauve);
background-image: url(icons/tags/reasoning.svg); background-image: url(icons/tags/reasoning.svg);
} }
.tags .tag.tools { .tags .tag.tools {
--color: #eed49f; --color: var(--c-yellow);
background-image: url(icons/tags/tools.svg); background-image: url(icons/tags/tools.svg);
} }
.tags .tag.vision { .tags .tag.vision {
--color: #ed8796; --color: var(--c-red);
background-image: url(icons/tags/vision.svg); background-image: url(icons/tags/vision.svg);
} }
.tags .tag.json { .tags .tag.json {
--color: #7dc4e4; --color: var(--c-sapphire);
background-image: url(icons/tags/json.svg); background-image: url(icons/tags/json.svg);
} }
.tags .tag.image { .tags .tag.image {
--color: #f4dbd6; --color: var(--c-rosewater);
background-image: url(icons/tags/image.svg); background-image: url(icons/tags/image.svg);
} }
.tags .tag.free { .tags .tag.free {
--color: #a6da95; --color: var(--c-green);
background-image: url(icons/tags/free.svg); background-image: url(icons/tags/free.svg);
} }
@@ -155,8 +171,8 @@
} }
.dropdown .search { .dropdown .search {
background: #2a2e41; background: var(--c-base-dark);
border-top: 2px solid #494d64; border-top: 2px solid var(--c-surface1);
font-size: 15px; font-size: 15px;
padding: 4px 6px; padding: 4px 6px;
} }

30
static/css/markdown.css
View File

@@ -1,7 +1,7 @@
.markdown { .markdown {
font-size: 15px; font-size: 15px;
line-height: 23px; line-height: 23px;
color: #cad3f5; color: var(--c-text);
overflow: hidden; overflow: hidden;
word-wrap: break-word; word-wrap: break-word;
} }
@@ -59,7 +59,7 @@
} }
.markdown a { .markdown a {
color: #8aadf4; color: var(--c-blue);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
transition: transition:
@@ -69,7 +69,7 @@
.markdown a:hover, .markdown a:hover,
.markdown a:focus { .markdown a:focus {
color: #b7bdf8; color: var(--c-lavender);
text-decoration: underline; text-decoration: underline;
text-decoration-color: rgba(183, 189, 248, 0.6); text-decoration-color: rgba(183, 189, 248, 0.6);
} }
@@ -86,9 +86,9 @@
.markdown blockquote { .markdown blockquote {
padding: 10px 16px; padding: 10px 16px;
border-left: 4px solid #8aadf4; border-left: 4px solid var(--c-blue);
background: rgba(138, 173, 244, 0.05); background: rgba(138, 173, 244, 0.05);
color: #cad3f5; color: var(--c-text);
font-style: italic; font-style: italic;
border-radius: 4px; border-radius: 4px;
} }
@@ -126,7 +126,7 @@
.markdown th { .markdown th {
background: rgba(165, 173, 203, 0.07); background: rgba(165, 173, 203, 0.07);
font-weight: 600; font-weight: 600;
color: #cad3f5; color: var(--c-text);
} }
.markdown tr:nth-child(even) td { .markdown tr:nth-child(even) td {
@@ -139,19 +139,19 @@
.markdown code, .markdown code,
.markdown pre { .markdown pre {
font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace; font-family: var(--font-mono);
font-size: 13px; font-size: 13px;
} }
.markdown code { .markdown code {
background: #363a4f; background: var(--c-surface0);
padding: 1px 4px; padding: 1px 4px;
border-radius: 3px; border-radius: 3px;
margin: 0 1px; margin: 0 1px;
} }
.markdown pre { .markdown pre {
background: #1e2030; background: var(--c-mantle);
white-space: pre-wrap; white-space: pre-wrap;
padding: 10px 12px; padding: 10px 12px;
border-radius: 6px; border-radius: 6px;
@@ -168,7 +168,7 @@
.markdown .pre-header { .markdown .pre-header {
position: relative; position: relative;
background: #363a4f; background: var(--c-surface0);
padding: 8px 12px; padding: 8px 12px;
margin: -10px -12px; margin: -10px -12px;
margin-bottom: 10px; margin-bottom: 10px;
@@ -191,7 +191,7 @@
} }
.markdown hr { .markdown hr {
color: #5f6386; color: var(--c-overlay0-dark);
margin: 25px 0; margin: 25px 0;
} }
@@ -224,7 +224,7 @@
display: flex; display: flex;
gap: 4px; gap: 4px;
align-items: center; align-items: center;
background: #24273a; background: var(--c-base);
width: max-content; width: max-content;
max-width: 100%; max-width: 100%;
white-space: nowrap; white-space: nowrap;
@@ -232,7 +232,7 @@
cursor: pointer; cursor: pointer;
padding: 8px 10px; padding: 8px 10px;
border-radius: 6px; border-radius: 6px;
border: 1px solid #363a4f; border: 1px solid var(--c-surface0);
overflow: hidden; overflow: hidden;
} }
@@ -255,7 +255,7 @@
position: relative; position: relative;
top: -5px; top: -5px;
font-size: 10px; font-size: 10px;
font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace; font-family: var(--font-mono);
} }
.markdown .inline-file .download { .markdown .inline-file .download {
@@ -269,7 +269,7 @@
position: absolute; position: absolute;
width: 32px; width: 32px;
height: 3px; height: 3px;
background: #cad3f5; background: var(--c-text);
animation: swivel 1.5s ease-in-out infinite; animation: swivel 1.5s ease-in-out infinite;
opacity: 0.5; opacity: 0.5;
bottom: -1px; bottom: -1px;

1
static/index.html
View File

@@ -9,6 +9,7 @@
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
<link href="lib/catppuccin.min.css" rel="stylesheet" /> <link href="lib/catppuccin.min.css" rel="stylesheet" />
<link href="css/base.css" rel="stylesheet" />
<link href="css/dropdown.css" rel="stylesheet" /> <link href="css/dropdown.css" rel="stylesheet" />
<link href="css/markdown.css" rel="stylesheet" /> <link href="css/markdown.css" rel="stylesheet" />
<link href="css/chat.css" rel="stylesheet" /> <link href="css/chat.css" rel="stylesheet" />