mirror of
https://github.com/clockworklabs/SpacetimeDB.git
synced 2026-07-15 06:41:38 -04:00
Piotr Sarnacki
cd1ec90d16
# Description of Changes This PR renames the templates to always use shorthand for the language, specify a framework (or console) if necessary, and shorten the naming in general # Expected complexity level and risk 1 # Testing I've tested generating templates manually --------- Co-authored-by: clockwork-labs-bot <[email protected]>
137 lines
2.6 KiB
CSS
137 lines
2.6 KiB
CSS
.App {
|
|
display: grid;
|
|
/*
|
|
3 rows:
|
|
1) Profile
|
|
2) Main content (left = message, right = online)
|
|
3) New message
|
|
*/
|
|
grid-template-rows: auto 1fr auto;
|
|
/* 2 columns: left for chat, right for online */
|
|
grid-template-columns: 2fr 1fr;
|
|
|
|
height: 100vh; /* fill viewport height */
|
|
width: clamp(300px, 100%, 1200px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ----- Profile (Row 1, spans both columns) ----- */
|
|
.profile {
|
|
grid-column: 1 / 3;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--theme-color);
|
|
}
|
|
|
|
.profile h1 {
|
|
margin-right: auto; /* pushes name/edit form to the right */
|
|
}
|
|
|
|
.profile form {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.profile form input {
|
|
background-color: var(--textbox-color);
|
|
}
|
|
|
|
/* ----- Chat Messages (Row 2, Col 1) ----- */
|
|
.message-panel {
|
|
grid-row: 2 / 3;
|
|
grid-column: 1 / 2;
|
|
|
|
/* Ensure this section scrolls if content is long */
|
|
overflow-y: auto;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.messages {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.system-message {
|
|
background-color: var(--theme-color);
|
|
color: var(--theme-color-contrast);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.375rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.user-message {
|
|
background-color: var(--textbox-color);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.message h1 {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* ----- Online Panel (Row 2, Col 2) ----- */
|
|
.online {
|
|
grid-row: 2 / 3;
|
|
grid-column: 2 / 3;
|
|
|
|
/* Also scroll independently if needed */
|
|
overflow-y: auto;
|
|
padding: 1rem;
|
|
border-left: 1px solid var(--theme-color);
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* ----- New Message (Row 3, spans columns 1-2) ----- */
|
|
.new-message {
|
|
grid-column: 1 / 3;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
border-top: 1px solid var(--theme-color);
|
|
}
|
|
|
|
.new-message form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.new-message form h3 {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* Distinct background for the textarea */
|
|
.new-message form textarea {
|
|
font-family: monospace;
|
|
font-weight: 400;
|
|
font-size: 1rem;
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
background-color: var(--textbox-color);
|
|
color: inherit;
|
|
|
|
/* Subtle shadow for visibility */
|
|
box-shadow:
|
|
0 1px 3px rgba(0, 0, 0, 0.12),
|
|
0 1px 2px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.new-message form textarea {
|
|
box-shadow: 0 0 0 1px #17492b;
|
|
}
|
|
}
|