mirror of
https://github.com/coalaura/whiskr.git
synced 2025-12-02 20:22:52 +00:00
cleanup colors
This commit is contained in:
Laura
84
static/css/base.css
Normal file
84
static/css/base.css
Normal 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);
|
||||
}
|
||||
@@ -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,
|
||||
body {
|
||||
font-family: "Work Sans", sans-serif;
|
||||
font-family: var(--font);
|
||||
font-size: 15px;
|
||||
color: #cad3f5;
|
||||
color: var(--c-text);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
@@ -80,7 +26,7 @@ body.resizing * {
|
||||
font-style: italic;
|
||||
top: 3px;
|
||||
right: 4px;
|
||||
color: #a5adcb;
|
||||
color: var(--c-subtext);
|
||||
}
|
||||
|
||||
#total {
|
||||
@@ -89,7 +35,7 @@ body.resizing * {
|
||||
}
|
||||
|
||||
#version a {
|
||||
color: #a5adcb;
|
||||
color: var(--c-subtext);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -132,7 +78,7 @@ body:not(.loading) #loading {
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
background: #181926;
|
||||
background: var(--c-crust);
|
||||
}
|
||||
|
||||
#floaters .floater {
|
||||
@@ -144,7 +90,7 @@ body:not(.loading) #loading {
|
||||
opacity: 0.3;
|
||||
transform: translate(var(--x), var(--y));
|
||||
transition: transform var(--time, 14s);
|
||||
background: var(--color, #181926);
|
||||
background: var(--color, var(--c-crust));
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@@ -157,14 +103,14 @@ body:not(.loading) #loading {
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
background: #24273a;
|
||||
background: var(--c-base);
|
||||
padding: 12px 15px;
|
||||
border-radius: 6px;
|
||||
width: 280px;
|
||||
margin-bottom: 10px;
|
||||
transition: 250ms;
|
||||
color: #ed8796;
|
||||
border: 2px solid #ed8796;
|
||||
color: var(--c-red);
|
||||
border: 2px solid var(--c-red);
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -191,7 +137,7 @@ body:not(.loading) #loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
background: #1e2030;
|
||||
background: var(--c-mantle);
|
||||
margin: auto;
|
||||
margin-top: 42px;
|
||||
width: 100%;
|
||||
@@ -258,7 +204,7 @@ body:not(.loading) #loading {
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: swivel 1.2s ease-in-out infinite;
|
||||
background: #6e738d;
|
||||
background: var(--c-overlay0);
|
||||
opacity: 0.5;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@@ -276,7 +222,7 @@ body:not(.loading) #loading {
|
||||
|
||||
#messages:empty::before {
|
||||
content: "whiskr - no messages";
|
||||
color: #a5adcb;
|
||||
color: var(--c-subtext);
|
||||
font-style: italic;
|
||||
align-self: center;
|
||||
margin-top: 5px;
|
||||
@@ -286,7 +232,7 @@ body:not(.loading) #loading {
|
||||
.message {
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #24273a;
|
||||
background: var(--c-base);
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
@@ -297,7 +243,7 @@ body:not(.loading) #loading {
|
||||
min-width: 280px;
|
||||
width: max-content;
|
||||
padding-top: 28px;
|
||||
background: #363a4f;
|
||||
background: var(--c-surface0);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -332,7 +278,7 @@ body:not(.loading) #loading {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
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;
|
||||
line-height: 12px;
|
||||
top: 6px;
|
||||
@@ -350,7 +296,7 @@ body:not(.loading) #loading {
|
||||
left: -10px;
|
||||
height: 2px;
|
||||
width: 6px;
|
||||
background: #939ab7;
|
||||
background: var(--c-overlay2);
|
||||
}
|
||||
|
||||
.message .tags {
|
||||
@@ -401,7 +347,7 @@ body:not(.loading) #loading {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 3px;
|
||||
background: #cad3f5;
|
||||
background: var(--c-text);
|
||||
animation: swivel 1.5s ease-in-out infinite;
|
||||
opacity: 0.5;
|
||||
margin-top: 5px;
|
||||
@@ -414,7 +360,7 @@ body:not(.loading) #loading {
|
||||
|
||||
.message textarea.text {
|
||||
display: block;
|
||||
background: #181926;
|
||||
background: var(--c-crust);
|
||||
min-width: 480px;
|
||||
min-height: 100px;
|
||||
max-width: 100%;
|
||||
@@ -430,15 +376,15 @@ body:not(.loading) #loading {
|
||||
.message .tool.invalid,
|
||||
.message .tool .result.error,
|
||||
.message .text .error {
|
||||
color: #ed8796;
|
||||
color: var(--c-red);
|
||||
}
|
||||
|
||||
.message .text .error a {
|
||||
color: #ee99a0;
|
||||
color: var(--c-maroon);
|
||||
}
|
||||
|
||||
.message.errored {
|
||||
border: 2px solid #ed8796;
|
||||
border: 2px solid var(--c-red);
|
||||
}
|
||||
|
||||
.images .image {
|
||||
@@ -450,12 +396,12 @@ body:not(.loading) #loading {
|
||||
max-width: 100%;
|
||||
width: 420px;
|
||||
border-radius: 6px;
|
||||
border: 2px solid #363a4f;
|
||||
border: 2px solid var(--c-surface0);
|
||||
}
|
||||
|
||||
.tool .result pre,
|
||||
.reasoning-text pre {
|
||||
background: #1b1d2a;
|
||||
background: var(--c-mantle-dark);
|
||||
}
|
||||
|
||||
.tool .result pre.l-json .pre-header {
|
||||
@@ -464,7 +410,7 @@ body:not(.loading) #loading {
|
||||
|
||||
.message .tool .result,
|
||||
.message .reasoning-text {
|
||||
background: #1e2030;
|
||||
background: var(--c-mantle);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
margin-top: 16px;
|
||||
@@ -486,7 +432,7 @@ body:not(.loading) #loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: #24273a;
|
||||
background: var(--c-base);
|
||||
}
|
||||
|
||||
.message.collapsed .body {
|
||||
@@ -501,7 +447,7 @@ body:not(.loading) #loading {
|
||||
position: absolute;
|
||||
content: "collapsed...";
|
||||
font-style: italic;
|
||||
color: #939ab7;
|
||||
color: var(--c-overlay2);
|
||||
font-size: 12px;
|
||||
top: 50%;
|
||||
left: 12px;
|
||||
@@ -509,13 +455,13 @@ body:not(.loading) #loading {
|
||||
}
|
||||
|
||||
.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;
|
||||
line-height: 10px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
color: #a5adcb;
|
||||
color: var(--c-subtext);
|
||||
}
|
||||
|
||||
.tool .call,
|
||||
@@ -574,7 +520,7 @@ body:not(.loading) #loading {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -619,7 +565,7 @@ body:not(.loading) #loading {
|
||||
right: 2px;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
color: #a5adcb;
|
||||
color: var(--c-subtext);
|
||||
transition: 150ms opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -715,7 +661,7 @@ body:not(.loading) #loading {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #939ab7;
|
||||
background: var(--c-overlay2);
|
||||
animation: bounce 1.4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@@ -821,7 +767,7 @@ body:not(.loading) #loading {
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
height: 36px;
|
||||
background: #24273a;
|
||||
background: var(--c-base);
|
||||
}
|
||||
|
||||
#chat:has(.has-files) {
|
||||
@@ -866,7 +812,7 @@ body:not(.loading) #loading {
|
||||
}
|
||||
|
||||
.message.editing .files {
|
||||
background: #181926;
|
||||
background: var(--c-crust);
|
||||
padding: 9px;
|
||||
gap: 6px;
|
||||
}
|
||||
@@ -881,12 +827,12 @@ body:not(.loading) #loading {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
background: #24273a;
|
||||
background: var(--c-base);
|
||||
box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 8px 10px;
|
||||
padding-right: 14px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #363a4f;
|
||||
border: 1px solid var(--c-surface0);
|
||||
overflow: hidden;
|
||||
min-width: 140px;
|
||||
}
|
||||
@@ -943,7 +889,7 @@ body:not(.loading) #loading {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 6px;
|
||||
background: #363a4f;
|
||||
background: var(--c-surface0);
|
||||
width: 100%;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
@@ -958,7 +904,7 @@ body:not(.loading) #loading {
|
||||
}
|
||||
|
||||
#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;
|
||||
padding: 0;
|
||||
height: 14px;
|
||||
@@ -1006,7 +952,7 @@ button {
|
||||
|
||||
input,
|
||||
select {
|
||||
background: #363a4f;
|
||||
background: var(--c-surface0);
|
||||
padding: 2px 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -1040,7 +986,7 @@ select {
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
background: #5b6078;
|
||||
background: var(--c-surface2);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@@ -1112,7 +1058,7 @@ body.loading #version,
|
||||
}
|
||||
|
||||
input.invalid {
|
||||
border: 1px solid #ed8796;
|
||||
border: 1px solid var(--c-red);
|
||||
}
|
||||
|
||||
.message .collapse::before {
|
||||
@@ -1349,7 +1295,7 @@ label[for="reasoning-tokens"] {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
gap: 14px;
|
||||
background: #24273a;
|
||||
background: var(--c-base);
|
||||
padding: 18px 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1);
|
||||
@@ -1357,7 +1303,7 @@ label[for="reasoning-tokens"] {
|
||||
}
|
||||
|
||||
.modal .header {
|
||||
background: #363a4f;
|
||||
background: var(--c-surface0);
|
||||
height: 42px;
|
||||
margin: -18px -20px;
|
||||
padding: 10px 20px;
|
||||
@@ -1390,12 +1336,12 @@ label[for="reasoning-tokens"] {
|
||||
}
|
||||
|
||||
.modal .error {
|
||||
background: #ed8796;
|
||||
background: var(--c-red);
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
color: #11111b;
|
||||
color: var(--c-crust-dark);
|
||||
padding: 5px 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
@@ -1405,7 +1351,7 @@ label[for="reasoning-tokens"] {
|
||||
}
|
||||
|
||||
.modal.errored input {
|
||||
border: 1px solid #ed8796;
|
||||
border: 1px solid var(--c-red);
|
||||
}
|
||||
|
||||
.modal .form-group {
|
||||
@@ -1427,8 +1373,8 @@ label[for="reasoning-tokens"] {
|
||||
}
|
||||
|
||||
#login {
|
||||
background: #a6da95;
|
||||
color: #11111b;
|
||||
background: var(--c-green);
|
||||
color: var(--c-crust-dark);
|
||||
padding: 4px 10px;
|
||||
border-radius: 2px;
|
||||
font-weight: 500;
|
||||
@@ -1436,7 +1382,7 @@ label[for="reasoning-tokens"] {
|
||||
}
|
||||
|
||||
#login:hover {
|
||||
background: #89bb77;
|
||||
background: var(--c-green-dark);
|
||||
}
|
||||
|
||||
@keyframes swivel {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.dropdown {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
background: #363a4f;
|
||||
background: var(--c-surface0);
|
||||
padding: 2px 5px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
@@ -16,15 +16,20 @@
|
||||
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 {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(icons/chevron.svg);
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
transform: rotate(180deg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -35,12 +40,12 @@
|
||||
bottom: calc(100% + 4px);
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
background: #363a4f;
|
||||
background: var(--c-surface0);
|
||||
max-height: 250px;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.05),
|
||||
0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #494d64;
|
||||
border: 1px solid var(--c-surface1);
|
||||
}
|
||||
|
||||
.dropdown:not(.open) .cont {
|
||||
@@ -64,19 +69,33 @@
|
||||
.dropdown .opt {
|
||||
padding: 4px 6px;
|
||||
cursor: pointer;
|
||||
background: #363a4f;
|
||||
background: var(--c-surface0);
|
||||
}
|
||||
|
||||
.dropdown .opt:nth-child(2n + 1) {
|
||||
background: #32354a;
|
||||
background: var(--c-surface0-dark);
|
||||
}
|
||||
|
||||
.dropdown .opt:hover {
|
||||
background: #2c2f44;
|
||||
background: var(--c-base);
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -99,9 +118,6 @@
|
||||
.dropdown .tags .tag {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.dropdown .selected:not(.all-tags) .tags:has(.tag:nth-child(3)) {
|
||||
@@ -121,32 +137,32 @@
|
||||
}
|
||||
|
||||
.tags .tag.reasoning {
|
||||
--color: #c6a0f6;
|
||||
--color: var(--c-mauve);
|
||||
background-image: url(icons/tags/reasoning.svg);
|
||||
}
|
||||
|
||||
.tags .tag.tools {
|
||||
--color: #eed49f;
|
||||
--color: var(--c-yellow);
|
||||
background-image: url(icons/tags/tools.svg);
|
||||
}
|
||||
|
||||
.tags .tag.vision {
|
||||
--color: #ed8796;
|
||||
--color: var(--c-red);
|
||||
background-image: url(icons/tags/vision.svg);
|
||||
}
|
||||
|
||||
.tags .tag.json {
|
||||
--color: #7dc4e4;
|
||||
--color: var(--c-sapphire);
|
||||
background-image: url(icons/tags/json.svg);
|
||||
}
|
||||
|
||||
.tags .tag.image {
|
||||
--color: #f4dbd6;
|
||||
--color: var(--c-rosewater);
|
||||
background-image: url(icons/tags/image.svg);
|
||||
}
|
||||
|
||||
.tags .tag.free {
|
||||
--color: #a6da95;
|
||||
--color: var(--c-green);
|
||||
background-image: url(icons/tags/free.svg);
|
||||
}
|
||||
|
||||
@@ -155,8 +171,8 @@
|
||||
}
|
||||
|
||||
.dropdown .search {
|
||||
background: #2a2e41;
|
||||
border-top: 2px solid #494d64;
|
||||
background: var(--c-base-dark);
|
||||
border-top: 2px solid var(--c-surface1);
|
||||
font-size: 15px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
.markdown {
|
||||
font-size: 15px;
|
||||
line-height: 23px;
|
||||
color: #cad3f5;
|
||||
color: var(--c-text);
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@@ -59,7 +59,7 @@
|
||||
}
|
||||
|
||||
.markdown a {
|
||||
color: #8aadf4;
|
||||
color: var(--c-blue);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition:
|
||||
@@ -69,7 +69,7 @@
|
||||
|
||||
.markdown a:hover,
|
||||
.markdown a:focus {
|
||||
color: #b7bdf8;
|
||||
color: var(--c-lavender);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(183, 189, 248, 0.6);
|
||||
}
|
||||
@@ -86,9 +86,9 @@
|
||||
|
||||
.markdown blockquote {
|
||||
padding: 10px 16px;
|
||||
border-left: 4px solid #8aadf4;
|
||||
border-left: 4px solid var(--c-blue);
|
||||
background: rgba(138, 173, 244, 0.05);
|
||||
color: #cad3f5;
|
||||
color: var(--c-text);
|
||||
font-style: italic;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -126,7 +126,7 @@
|
||||
.markdown th {
|
||||
background: rgba(165, 173, 203, 0.07);
|
||||
font-weight: 600;
|
||||
color: #cad3f5;
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.markdown tr:nth-child(even) td {
|
||||
@@ -139,19 +139,19 @@
|
||||
|
||||
.markdown code,
|
||||
.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;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
background: #363a4f;
|
||||
background: var(--c-surface0);
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
background: #1e2030;
|
||||
background: var(--c-mantle);
|
||||
white-space: pre-wrap;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
@@ -168,7 +168,7 @@
|
||||
|
||||
.markdown .pre-header {
|
||||
position: relative;
|
||||
background: #363a4f;
|
||||
background: var(--c-surface0);
|
||||
padding: 8px 12px;
|
||||
margin: -10px -12px;
|
||||
margin-bottom: 10px;
|
||||
@@ -191,7 +191,7 @@
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
color: #5f6386;
|
||||
color: var(--c-overlay0-dark);
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
@@ -224,7 +224,7 @@
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
background: #24273a;
|
||||
background: var(--c-base);
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
@@ -232,7 +232,7 @@
|
||||
cursor: pointer;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #363a4f;
|
||||
border: 1px solid var(--c-surface0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -255,7 +255,7 @@
|
||||
position: relative;
|
||||
top: -5px;
|
||||
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 {
|
||||
@@ -269,7 +269,7 @@
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 3px;
|
||||
background: #cad3f5;
|
||||
background: var(--c-text);
|
||||
animation: swivel 1.5s ease-in-out infinite;
|
||||
opacity: 0.5;
|
||||
bottom: -1px;
|
||||
|
||||
@@ -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="lib/catppuccin.min.css" rel="stylesheet" />
|
||||
<link href="css/base.css" rel="stylesheet" />
|
||||
<link href="css/dropdown.css" rel="stylesheet" />
|
||||
<link href="css/markdown.css" rel="stylesheet" />
|
||||
<link href="css/chat.css" rel="stylesheet" />
|
||||
|
||||
Reference in New Issue
Block a user