rick/rosterchirp-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.3.0

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-09 14:36:19 -04:00
parent f37fe0086f
commit 42ad779750
40 changed files with 1928 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/src/index.css
View File

@@ -28,7 +28,7 @@
--font: 'Google Sans', 'Roboto', sans-serif;
}
html, body, #root { height: 100%; font-family: var(--font); color: var(--text-primary); background: var(--background); }
html, body, #root { height: 100%; min-width: 320px; font-family: var(--font); color: var(--text-primary); background: var(--background); }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, textarea { font-family: var(--font); }
@@ -226,6 +226,9 @@ a { color: inherit; text-decoration: none; }
[data-theme="dark"] .card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .message-input-area { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .message-input-wrap { background: var(--surface-variant); border-color: var(--border); }
[data-theme="dark"] .msg-input:focus { background: var(--surface-variant); color: var(--text-primary); }
/* Light mode: focused input goes white so it pops from the grey background */
[data-theme="light"] .msg-input:focus, :root:not([data-theme="dark"]) .msg-input:focus { background: white; }
[data-theme="dark"] .btn-secondary { border-color: var(--border); color: var(--primary); }
[data-theme="dark"] .btn-secondary:hover { background: var(--primary-light); }
[data-theme="dark"] .search-input { background: var(--surface-variant); color: var(--text-primary); }
@@ -236,6 +239,10 @@ a { color: inherit; text-decoration: none; }
[data-theme="dark"] .footer-menu-item.danger:hover { background: #3a1a1a; }
[data-theme="dark"] .btn-icon { color: var(--text-primary); }
[data-theme="dark"] .btn-icon:hover { background: var(--surface-variant); }
[data-theme="dark"] .sidebar-header { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .newchat-btn { background: var(--surface-variant); border-color: var(--primary); color: var(--primary); }
[data-theme="dark"] .newchat-btn:hover { background: var(--primary); color: white; }
[data-theme="dark"] .newchat-fab { background: var(--primary); }
[data-theme="dark"] .msg-actions { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .reaction-btn:hover { background: var(--surface-variant); }
[data-theme="dark"] .emoji-picker-wrap { background: var(--surface); border-color: var(--border); }
@@ -243,3 +250,92 @@ a { color: inherit; text-decoration: none; }
[data-theme="dark"] .load-more-btn { background: var(--surface-variant); color: var(--text-secondary); }
[data-theme="dark"] .readonly-bar { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
[data-theme="dark"] .warning-banner { background: #2a1f00; border-color: #6a4a00; color: #ffb74d; }
/* ── About Modal ─────────────────────────────────────── */
.about-modal {
max-width: 420px;
text-align: center;
position: relative;
padding: 32px 28px 24px;
}
.about-close {
position: absolute;
top: 12px;
right: 12px;
}
.about-hero {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 28px;
}
.about-logo {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 12px;
}
.about-appname {
font-size: 26px;
font-weight: 800;
color: var(--primary);
margin: 0 0 4px;
}
.about-tagline {
font-size: 13px;
color: var(--text-tertiary);
font-style: italic;
margin: 0;
}
.about-table {
width: 100%;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: visible;
margin-bottom: 20px;
text-align: left;
}
.about-row {
display: flex;
align-items: flex-start;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
gap: 12px;
}
.about-row:last-child { border-bottom: none; }
.about-label {
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 90px;
flex-shrink: 0;
padding-top: 1px;
}
.about-value {
font-size: 14px;
color: var(--text-primary);
flex: 1;
min-width: 0;
overflow-wrap: break-word;
word-break: normal;
white-space: normal;
line-height: 1.5;
}
.about-mono {
font-family: monospace;
font-size: 13px;
}
.about-link {
color: var(--primary);
text-decoration: underline;
}
.about-link:hover { opacity: 0.8; }
.about-footer {
font-size: 12px;
color: var(--text-tertiary);
margin: 0;
}
[data-theme="dark"] .about-table { border-color: var(--border); }
[data-theme="dark"] .about-row { border-color: var(--border); }