30256895b2
- CR-01: add id="discussion-message-list" to .divide-y; change hx-target to #discussion-message-list so HTMX appends inside the list, not after it. Always render the list div so the target exists even when messages is empty. - WR-01: SSE broadcast now renders IsOwn=false for all recipients so other users don't receive the sender's right-aligned bubble - WR-02: add HX-Retarget/HX-Reswap headers on 422 and 500 error responses so validation errors reach the composer form in the DOM - WR-03: replace hardcoded rgba(128,78,236,0.10) with color-mix() using the --color-brand-primary token - WR-04: remove hardcoded "1 participant" subtitle (no participant count in data) - IN-02: DiscussionMessageFromRow now accepts currentUserID uuid.UUID (matching DiscussionMessagesFromRows) instead of a pre-computed bool Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
761 lines
17 KiB
CSS
761 lines
17 KiB
CSS
/* app.css — dashboard shell, sidebar, and project-card CSS */
|
|
/* Ported verbatim from go-backend/internal/web/ui/app.css */
|
|
/* All color values use var(--...) design tokens — no hard-coded hex values */
|
|
|
|
/* ============================================================
|
|
Section 1 — Dashboard shell and sidebar grid
|
|
============================================================ */
|
|
|
|
.dashboard-shell {
|
|
background: var(--gradient-shell);
|
|
color: var(--foreground);
|
|
display: grid;
|
|
grid-template-columns: minmax(16rem, 18rem) 1fr;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.dashboard-sidebar {
|
|
padding-left: env(safe-area-inset-left, 0px);
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 2 — Sidebar nav shell
|
|
============================================================ */
|
|
|
|
.sidebar-nav-shell {
|
|
background: var(--color-surface-elevated);
|
|
border-right: 1px solid var(--color-border-panel);
|
|
box-shadow: var(--shadow-sidebar);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding: env(safe-area-inset-top, 0px) 0.75rem env(safe-area-inset-bottom, 0px) 0;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 3 — Sidebar brand
|
|
============================================================ */
|
|
|
|
.sidebar-brand {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0.75rem 0.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar-brand-link {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar-brand-logo {
|
|
border-radius: 0.75rem;
|
|
height: 4rem;
|
|
object-fit: cover;
|
|
width: 4rem;
|
|
}
|
|
|
|
.sidebar-brand-title {
|
|
color: var(--color-text-heading-alt);
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 4 — Sidebar collapse button
|
|
============================================================ */
|
|
|
|
.sidebar-collapse-button {
|
|
align-items: center;
|
|
background: var(--color-surface-elevated-strong);
|
|
border: 0;
|
|
border-radius: 999px;
|
|
box-shadow: var(--shadow-floating-control);
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
height: 1.5rem;
|
|
justify-content: center;
|
|
padding: 0.25rem;
|
|
position: absolute;
|
|
right: 0.75rem;
|
|
top: 0.5rem;
|
|
width: 1.5rem;
|
|
}
|
|
|
|
.sidebar-collapse-button svg {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 5 — Sidebar primary, list, divider
|
|
============================================================ */
|
|
|
|
.sidebar-primary {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-list {
|
|
display: grid;
|
|
gap: 0;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0.75rem 0 0;
|
|
}
|
|
|
|
.sidebar-divider {
|
|
margin: 0.5rem 0;
|
|
padding: 0 0.875rem;
|
|
}
|
|
|
|
.sidebar-divider hr,
|
|
.sidebar-projects hr {
|
|
border: 0;
|
|
border-top: 1px solid var(--color-border-panel-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 6 — Sidebar nav items
|
|
============================================================ */
|
|
|
|
.sidebar-nav-item {
|
|
border-radius: 0.9rem;
|
|
color: var(--color-text-muted);
|
|
font-weight: 500;
|
|
margin: 0 0.5rem;
|
|
padding: 0.15rem 0;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.sidebar-nav-item:hover {
|
|
background: var(--overlay-dark-soft);
|
|
color: var(--color-surface-muted-inverse);
|
|
}
|
|
|
|
.sidebar-nav-item.is-active {
|
|
background: var(--overlay-brand-soft-strong);
|
|
color: var(--color-text-brand);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 7 — Sidebar nav link and inner elements
|
|
============================================================ */
|
|
|
|
.sidebar-nav-link {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar-nav-link-inner {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
padding: 0.6rem 0.95rem;
|
|
}
|
|
|
|
.sidebar-nav-icon {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sidebar-nav-icon svg {
|
|
height: 1.35rem;
|
|
width: 1.35rem;
|
|
}
|
|
|
|
.sidebar-nav-label {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 8 — Sidebar projects section
|
|
============================================================ */
|
|
|
|
.sidebar-projects {
|
|
margin-top: 0.4rem;
|
|
padding: 0 0.75rem 0.75rem;
|
|
}
|
|
|
|
.sidebar-section-label {
|
|
color: var(--color-text-muted);
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
margin: 0.9rem 0 0.65rem;
|
|
padding: 0 0.5rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sidebar-project-list {
|
|
display: grid;
|
|
gap: 0.1rem;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 9 — Sidebar project links
|
|
============================================================ */
|
|
|
|
.sidebar-project-link {
|
|
align-items: center;
|
|
border-radius: 0.85rem;
|
|
color: var(--color-text-muted);
|
|
display: flex;
|
|
gap: 0.65rem;
|
|
padding: 0.48rem 0.5rem;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.sidebar-project-link:hover {
|
|
background: var(--overlay-dark-soft);
|
|
color: var(--color-surface-muted-inverse);
|
|
}
|
|
|
|
.sidebar-project-icon {
|
|
align-items: center;
|
|
border: 1px solid var(--color-border-panel-strong);
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
height: 1.55rem;
|
|
justify-content: center;
|
|
width: 1.55rem;
|
|
}
|
|
|
|
.sidebar-project-icon svg {
|
|
height: 0.9rem;
|
|
width: 0.9rem;
|
|
}
|
|
|
|
.sidebar-project-label {
|
|
flex: 1;
|
|
font-size: 0.9rem;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 10 — Sidebar footer links
|
|
============================================================ */
|
|
|
|
.sidebar-footer-links {
|
|
margin-top: auto;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 11 — Sidebar organization footer
|
|
============================================================ */
|
|
|
|
.sidebar-organization {
|
|
background: var(--color-surface-elevated);
|
|
padding: 0 0.5rem 0.9rem;
|
|
}
|
|
|
|
.organization-button {
|
|
align-items: center;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0.95rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 0.65rem;
|
|
padding: 0.55rem 0.65rem;
|
|
text-align: left;
|
|
transition: background-color 0.2s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.organization-button:hover {
|
|
background: var(--overlay-dark-soft);
|
|
}
|
|
|
|
.organization-avatar {
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
height: 1.75rem;
|
|
overflow: hidden;
|
|
width: 1.75rem;
|
|
}
|
|
|
|
.organization-avatar img {
|
|
aspect-ratio: 1;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
|
|
.organization-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.organization-name {
|
|
color: var(--color-text-body-subtle);
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.organization-meta {
|
|
color: var(--color-text-muted);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 12 — Dashboard main content area
|
|
============================================================ */
|
|
|
|
.dashboard-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
min-width: 0;
|
|
padding: 2rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 13 — Overview section heading
|
|
============================================================ */
|
|
|
|
.overview-section {
|
|
padding: 0.25rem 0 0;
|
|
}
|
|
|
|
.overview-section-heading {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.overview-section-heading h1,
|
|
.overview-section-heading h3,
|
|
.tasks-section-header h3 {
|
|
color: var(--color-surface-muted-inverse);
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 14 — Project grid
|
|
============================================================ */
|
|
|
|
.project-grid {
|
|
display: grid;
|
|
gap: 1.25rem;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 15 — Project card and top
|
|
============================================================ */
|
|
|
|
.project-card {
|
|
background: var(--color-surface-default);
|
|
border: 1px solid var(--color-border-subtle);
|
|
border-radius: 1rem;
|
|
cursor: pointer;
|
|
padding: 1rem;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.project-card-top {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 16 — Project card icon button overrides
|
|
============================================================ */
|
|
|
|
.project-card-top .borderless-icon-button {
|
|
padding: 0;
|
|
}
|
|
|
|
.project-card-top .ui-icon-button-ghost.ui-icon-button-neutral:hover {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.project-card-top .ui-icon-button-ghost.ui-icon-button-danger:hover {
|
|
color: var(--color-status-danger-icon-hover);
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 17 — Project card title row and avatar
|
|
============================================================ */
|
|
|
|
.project-card-title-row {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.project-avatar {
|
|
align-items: center;
|
|
background: var(--project-color, var(--color-project-fallback));
|
|
border-radius: 0.85rem;
|
|
color: var(--color-text-inverse);
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
height: 3rem;
|
|
justify-content: center;
|
|
width: 3rem;
|
|
}
|
|
|
|
.project-avatar > svg {
|
|
height: 1.25rem;
|
|
width: 1.25rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 18 — Project date row
|
|
============================================================ */
|
|
|
|
.project-date-row {
|
|
align-items: center;
|
|
color: var(--color-text-muted);
|
|
display: flex;
|
|
font-size: 0.875rem;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 19 — Tasks section (kanban column container)
|
|
============================================================ */
|
|
|
|
.tasks-section {
|
|
background: var(--color-surface-default);
|
|
border: 1px solid var(--color-border-subtle);
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasks-section-header {
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 1.2rem 1rem;
|
|
}
|
|
|
|
.tasks-add-button {
|
|
align-items: center;
|
|
background: var(--color-surface-default);
|
|
border: 1px solid var(--color-border-muted);
|
|
border-radius: 0.7rem;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
font-weight: 500;
|
|
gap: 0.5rem;
|
|
min-height: 2.75rem;
|
|
padding: 0.7rem 1rem;
|
|
}
|
|
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.task-drag-handle {
|
|
color: var(--color-text-faint);
|
|
cursor: grab;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
user-select: none;
|
|
}
|
|
|
|
.task-drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.task-row {
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
padding: 0.9rem 1rem;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.task-row:hover {
|
|
background: var(--color-surface-neutral-hover);
|
|
}
|
|
|
|
.task-check {
|
|
align-items: center;
|
|
background: var(--color-surface-default);
|
|
border: 2px solid var(--color-border-strong);
|
|
border-radius: 999px;
|
|
color: var(--color-text-inverse);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
height: 2rem;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
}
|
|
|
|
.task-check.is-complete {
|
|
background: var(--color-text-brand-strong);
|
|
border-color: var(--color-text-brand-strong);
|
|
}
|
|
|
|
.task-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.task-body p {
|
|
color: var(--color-surface-muted-inverse);
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.task-row.is-complete .task-body p {
|
|
color: var(--color-text-faint);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.task-meta {
|
|
align-items: center;
|
|
color: var(--color-text-muted);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 0.75rem;
|
|
gap: 0.45rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 20 — Progress track and bar
|
|
============================================================ */
|
|
|
|
.project-progress-track {
|
|
background: var(--color-surface-muted);
|
|
border-radius: 999px;
|
|
height: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-progress-bar {
|
|
background: var(--project-color, var(--color-project-fallback));
|
|
border-radius: 999px;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 21 — Tab nav (tablo detail tab bar)
|
|
============================================================ */
|
|
|
|
.tab-nav {
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tab-nav-item {
|
|
align-items: center;
|
|
border-bottom: 2px solid transparent;
|
|
color: var(--color-text-muted);
|
|
display: flex;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
gap: 0.5rem;
|
|
min-height: 44px;
|
|
padding-bottom: 0.75rem;
|
|
padding-inline: 0.25rem;
|
|
transition: color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.tab-nav-item.is-active {
|
|
border-bottom-color: var(--color-brand-primary);
|
|
color: var(--color-text-brand);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-nav-item:hover:not(.is-active) {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 22 — Tablo detail metadata row
|
|
============================================================ */
|
|
|
|
.tablo-metadata-row {
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.tablo-metadata-date {
|
|
align-items: center;
|
|
color: var(--color-text-muted);
|
|
display: flex;
|
|
font-size: 0.875rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.tablo-metadata-date svg {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 23 — Kanban column wrapper
|
|
============================================================ */
|
|
|
|
.kanban-column {
|
|
flex-shrink: 0;
|
|
width: 18rem;
|
|
}
|
|
|
|
/* Scope column h3 to 1rem — base rule is 1.6rem (full-width views).
|
|
18rem columns overflow at 1.6rem. Base rule left unchanged. */
|
|
.kanban-column .tasks-section-header h3 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 24 — Etape group sub-headings inside kanban columns
|
|
============================================================ */
|
|
|
|
.etape-group-header {
|
|
align-items: center;
|
|
background: var(--color-surface-muted);
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.etape-group-color-dot {
|
|
background: var(--project-color, var(--color-project-fallback));
|
|
border-radius: 999px;
|
|
flex-shrink: 0;
|
|
height: 0.5rem;
|
|
width: 0.5rem;
|
|
}
|
|
|
|
.etape-group-label {
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.etape-group-label.is-unassigned {
|
|
color: var(--color-text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 25 — Empty task list placeholder
|
|
============================================================ */
|
|
|
|
.task-list-empty {
|
|
color: var(--color-text-faint);
|
|
font-size: 0.875rem;
|
|
font-style: italic;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 26 — Discussion message bubbles (Phase 17)
|
|
============================================================ */
|
|
|
|
.message-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.message-row.message-own {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.message-row.message-other {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.message-meta {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.message-author {
|
|
color: var(--color-text-primary);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.message-timestamp {
|
|
color: var(--color-text-muted);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.message-bubble {
|
|
border-radius: 0.25rem 0.75rem 0.75rem 0.75rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
max-width: 70%;
|
|
padding: 0.75rem 1rem;
|
|
white-space: pre-wrap;
|
|
word-break: break-words;
|
|
}
|
|
|
|
.message-row.message-own .message-bubble {
|
|
background-color: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
|
|
border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.message-row.message-other .message-bubble {
|
|
background-color: var(--color-surface-default, #ffffff);
|
|
border: 1px solid var(--color-border-default, #e2e8f0);
|
|
color: var(--color-text-primary);
|
|
}
|