172 lines
2.4 KiB
CSS
172 lines
2.4 KiB
CSS
:root {
|
|
--color-bg: 0 0 0;
|
|
--color-bg-x: 16 16 16;
|
|
--color-fg: 255 255 255;
|
|
--color-off-accent: var(--color-fg);
|
|
--alpha-text: 1;
|
|
|
|
line-height: 1.25;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
::selection {
|
|
background-color: rgb(var(--color-accent) / 0.5);
|
|
}
|
|
|
|
input[type="text"] {
|
|
background-color: rgb(var(--color-bg-x) / 1);
|
|
}
|
|
|
|
button {
|
|
--color-accent: 32 32 32;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
gap: 1em;
|
|
padding: 1em;
|
|
}
|
|
|
|
form input {
|
|
width: 100%;
|
|
}
|
|
|
|
:is(section, article, header) {
|
|
margin: 0;
|
|
}
|
|
|
|
body,
|
|
main,
|
|
.conversation {
|
|
height: 100%;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
.conversation {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 100dvh;
|
|
|
|
& > * {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
.conversation header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: smaller;
|
|
|
|
gap: 1em;
|
|
* {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.chatlog {
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: scroll;
|
|
|
|
article {
|
|
white-space: preserve;
|
|
padding: 1em;
|
|
border-bottom: 1px solid rgb(var(--color-fg) / 0.5);
|
|
}
|
|
|
|
article.user {
|
|
text-align: right;
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
color: rgb(var(--color-text) / 0.5);
|
|
}
|
|
|
|
article.system:not(.error) {
|
|
font-size: 0.5em;
|
|
font-family: var(--font-mono);
|
|
color: rgb(var(--color-fg) / 0.5);
|
|
}
|
|
|
|
article.system.error {
|
|
font-family: var(--font-mono);
|
|
background-color: rgb(127 0 0 / 0.5);
|
|
}
|
|
|
|
summary {
|
|
margin-bottom: 0;
|
|
color: rgb(var(--color-accent) / 1);
|
|
font-weight: bold;
|
|
}
|
|
|
|
details {
|
|
font-size: 0.75rem;
|
|
summary {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
details[data-in-progress] {
|
|
max-height: 4em;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
pre > code {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.hljs-keyword,
|
|
.hljs-selector-tag,
|
|
.hljs-title,
|
|
.hljs-section,
|
|
.hljs-doctag,
|
|
.hljs-name,
|
|
.hljs-strong {
|
|
font-weight: bold;
|
|
color: hsl(293, 63%, 76%);
|
|
}
|
|
|
|
.hljs-comment {
|
|
color: hsl(248, 7%, 56%);
|
|
}
|
|
|
|
.hljs-title,
|
|
.hljs-section,
|
|
.hljs-built_in,
|
|
.hljs-literal,
|
|
.hljs-type,
|
|
.hljs-addition,
|
|
.hljs-tag,
|
|
.hljs-quote,
|
|
.hljs-name,
|
|
.hljs-selector-id,
|
|
.hljs-selector-class {
|
|
color: hsl(263, 68%, 72%);
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-meta,
|
|
.hljs-subst,
|
|
.hljs-symbol,
|
|
.hljs-regexp,
|
|
.hljs-attribute,
|
|
.hljs-deletion,
|
|
.hljs-variable,
|
|
.hljs-template-variable,
|
|
.hljs-link,
|
|
.hljs-bullet {
|
|
color: hsl(330, 100%, 74%);
|
|
}
|
|
|
|
.hljs-number {
|
|
color: hsl(202, 87%, 76%);
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic;
|
|
}
|