github/tinygrad
1
1
Fork 0
mirror of https://github.com/tinygrad/tinygrad.git synced 2026-01-08 22:48:25 -05:00
Code Issues Packages Projects Releases Wiki Activity

tinychat ui +/- 20 lines (#7471)

Browse Source 
Co-authored-by: George Hotz <72895+geohot@users.noreply.github.com>
This commit is contained in:
Anthony DeMattos
2024-11-06 01:23:55 -05:00
committed by GitHub
parent e7b18cf5c0
commit 953ef1b57e
1 changed files with 40 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
examples/tinychat/index.css
View File

@@ -1,31 +1,10 @@
/* define colors */
:root {
--primary-color: #a52e4d;
--primary-color-transparent: #a52e4d66;
--secondary-color: #228039;
--secondary-color-transparent: #22803966;
--red-color: #a52e4d;
--green-color: #228039;
--silver-color: #88808e;
}
@media(prefers-color-scheme: light) {
:root {
--primary-bg-color: #f0f0f0;
--secondary-bg-color: #eeeeee;
--tertiary-bg-color: #dddddd;
--foreground-color: #111111;
--accent-color: #000000;
}
}
@media(prefers-color-scheme: dark) {
:root {
--primary-bg-color: #111111;
--secondary-bg-color: #131313;
--tertiary-bg-color: #232323;
--foreground-color: #f0f0f0;
--accent-color: #aaaaaa;
}
--primary-color: #fff;
--secondary-color: #2a2a2a;
--secondary-color-transparent: #ffffff66;
--primary-bg-color: #1a1a1a;
--foreground-color: #f0f0f0;
}
main {
@@ -81,7 +60,11 @@ main {
top: 0;
position: absolute;
background: linear-gradient(180deg, var(--primary-bg-color) 0%, transparent 100%);
background: linear-gradient(
180deg,
var(--primary-bg-color) 0%,
transparent 100%
);
}
.histories-end {
height: 3rem;
@@ -91,7 +74,11 @@ main {
bottom: 0;
position: absolute;
background: linear-gradient(0deg, var(--primary-bg-color) 0%, transparent 100%);
background: linear-gradient(
0deg,
var(--primary-bg-color) 0%,
transparent 100%
);
}
.history {
@@ -99,7 +86,7 @@ main {
width: 100%;
max-width: 40rem;
background-color: var(--tertiary-bg-color);
background-color: var(--secondary-color);
border-radius: 10px;
border-left: 2px solid var(--primary-color);
@@ -109,7 +96,7 @@ main {
opacity: var(--opacity, 1);
}
.history:hover {
background-color: var(--secondary-bg-color);
background-color: var(--secondary-color);
}
.history-delete-button {
@@ -120,14 +107,14 @@ main {
margin: 0;
outline: none;
border: none;
background-color: var(--secondary-bg-color);
background-color: var(--secondary-color);
color: var(--foreground-color);
border-radius: 0 0 0 10px;
cursor: pointer;
transition: 0.2s;
}
.history-delete-button:hover {
background-color: var(--tertiary-bg-color);
background-color: var(--secondary-color);
padding: 0.75rem;
}
@@ -135,6 +122,7 @@ main {
overflow-y: auto;
height: 100%;
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
@@ -145,24 +133,19 @@ main {
}
.message {
width: 96%;
max-width: 80rem;
display: grid;
background-color: var(--secondary-bg-color);
max-width: 75%;
padding: 0.5rem 1rem;
border-radius: 10px;
border-radius: 20px;
}
.message-role-assistant {
border-bottom: 2px solid var(--primary-color);
border-left: 2px solid var(--primary-color);
box-shadow: -10px 10px 20px 2px var(--primary-color-transparent);
background-color: var(--secondary-color);
margin-right: auto;
color: #fff;
}
.message-role-user {
border-bottom: 2px solid var(--secondary-color);
border-right: 2px solid var(--secondary-color);
box-shadow: 10px 10px 20px 2px var(--secondary-color-transparent);
margin-left: auto;
background-color: var(--primary-color);
color: #000;
}
.message > pre {
@@ -185,14 +168,14 @@ main {
margin: 0;
outline: none;
border: none;
background-color: var(--secondary-bg-color);
background-color: var(--secondary-color);
color: var(--foreground-color);
border-radius: 0 0 0 10px;
cursor: pointer;
transition: 0.2s;
}
.clipboard-button:hover {
background-color: var(--tertiary-bg-color);
background-color: var(--secondary-color);
padding: 0.75rem;
}
@@ -201,9 +184,14 @@ main {
bottom: 0;
/* linear gradient from background-color to transparent on the top */
background: linear-gradient(0deg, var(--primary-bg-color) 55%, transparent 100%);
background: linear-gradient(
0deg,
var(--primary-bg-color) 55%,
transparent 100%
);
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
justify-content: center;
@@ -250,7 +238,7 @@ main {
min-height: 3rem;
max-height: 8rem;
background-color: var(--tertiary-bg-color);
background-color: var(--secondary-color);
color: var(--foreground-color);
border-radius: 10px;
border: none;
@@ -262,8 +250,8 @@ main {
height: 3rem;
width: 4rem;
background-color: var(--secondary-color);
color: var(--foreground-color);
background-color: var(--primary-color);
color: var(--secondary-color);
border-radius: 10px;
padding: 0.5rem;
cursor: pointer;
@@ -272,7 +260,7 @@ main {
background-color: var(--secondary-color-transparent);
}
.input-button:disabled {
background-color: var(--secondary-bg-color);
background-color: var(--secondary-color);
cursor: not-allowed;
}