63e7d65290
Phase 20 work was executed against go-backend/ (prototype) instead of backend/ (production). This commit ports the Figma-aligned restyle to the correct codebase. Changes: - tablos.templ: replace project-card-top header with tablo-detail-header, tablo-detail-avatar, tablo-detail-title; update tab bar to tablo-tab-bar; localise tab labels to French (Vue d'ensemble, Tâches, Fichiers, Discussion, Événements) - tasks.templ: update KanbanBoard to tablo-kanban-board; KanbanColumn to tablo-kanban-column with new header/count/empty classes; TaskCard to card-style layout (task-card-top-row, task-card-title, task-card-delete) - app.css: add sections 25–27 — tablo detail page, kanban board/columns, and task card (card appearance, hover states) Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
1301 lines
28 KiB
CSS
1301 lines
28 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: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.dashboard-sidebar {
|
|
width: 12rem; /* w-48 = 192px */
|
|
flex-shrink: 0;
|
|
transition: width 0.3s ease;
|
|
padding-left: env(safe-area-inset-left, 0px);
|
|
}
|
|
|
|
/* Collapsed sidebar */
|
|
.dashboard-shell.sidebar-is-collapsed .dashboard-sidebar {
|
|
width: 4rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
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 11b — Sidebar collapse state
|
|
============================================================ */
|
|
|
|
/* When sidebar-is-collapsed is toggled on the shell, shrink the grid column */
|
|
.dashboard-shell.sidebar-is-collapsed {
|
|
grid-template-columns: 4rem 1fr;
|
|
}
|
|
|
|
/* Hide text labels and section headings in collapsed state */
|
|
.dashboard-shell.sidebar-is-collapsed .sidebar-brand-title,
|
|
.dashboard-shell.sidebar-is-collapsed .sidebar-section-label,
|
|
.dashboard-shell.sidebar-is-collapsed .sidebar-nav-label,
|
|
.dashboard-shell.sidebar-is-collapsed .sidebar-project-label {
|
|
display: none;
|
|
}
|
|
|
|
/* Center icons in collapsed state */
|
|
.dashboard-shell.sidebar-is-collapsed .sidebar-nav-link-inner {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Hide the full project list in collapsed state (icons not present for projects) */
|
|
.dashboard-shell.sidebar-is-collapsed .sidebar-project-list {
|
|
display: none;
|
|
}
|
|
|
|
/* Flip the collapse button chevron when collapsed */
|
|
.dashboard-shell.sidebar-is-collapsed .sidebar-collapse-button svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* ── Page header bar ───────────────────────────────────────────────── */
|
|
/* Styling is now handled via Tailwind utilities in PageHeader templ component. */
|
|
/* This class is retained for test assertions. */
|
|
.page-header {
|
|
/* Tailwind handles layout; this class is an anchor for tests */
|
|
}
|
|
|
|
.page-header-right {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.page-header-actions {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Breadcrumb */
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.breadcrumb-separator {
|
|
color: var(--color-text-muted);
|
|
user-select: none;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
color: var(--color-text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.breadcrumb-item--link {
|
|
color: var(--color-text-brand);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb-item--link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.breadcrumb-item--current {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* Search placeholder */
|
|
.header-search-placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border: 1px solid var(--color-border-panel);
|
|
border-radius: 0.375rem;
|
|
background: var(--color-surface-muted-inverse);
|
|
color: var(--color-text-muted);
|
|
font-size: 0.875rem;
|
|
min-width: 16rem;
|
|
max-width: 28rem;
|
|
width: 100%;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Icon buttons (bell, inbox) */
|
|
.header-icon-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 0.375rem;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header-icon-button:hover {
|
|
background: var(--overlay-dark-soft);
|
|
}
|
|
|
|
.header-icon-button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Avatar dropdown */
|
|
.header-avatar-menu {
|
|
position: relative;
|
|
}
|
|
|
|
.header-avatar-menu > summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header-avatar-menu > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.header-avatar-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
background: var(--color-text-brand);
|
|
color: #fff;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.header-avatar-initial {
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.header-avatar-dropdown {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 0.5rem);
|
|
min-width: 14rem;
|
|
background: var(--color-surface-elevated);
|
|
border: 1px solid var(--color-border-panel);
|
|
border-radius: 0.5rem;
|
|
box-shadow: var(--shadow-floating-control);
|
|
z-index: 50;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-dropdown-workspace {
|
|
padding: 0.75rem 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.avatar-dropdown-workspace-name {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-muted);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.avatar-dropdown-workspace-meta {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-muted);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.avatar-dropdown-divider {
|
|
border: none;
|
|
border-top: 1px solid var(--color-border-panel-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.avatar-dropdown-item {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.625rem 1rem;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-muted);
|
|
text-decoration: none;
|
|
background: transparent;
|
|
border: none;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar-dropdown-item:hover {
|
|
background: var(--overlay-dark-soft);
|
|
}
|
|
|
|
.avatar-dropdown-item--danger {
|
|
color: #dc2626; /* red — logout action; no token for this; matches Figma red logout */
|
|
}
|
|
|
|
.avatar-dropdown-item--danger:hover {
|
|
background: #fef2f2;
|
|
}
|
|
|
|
.avatar-dropdown-logout-form {
|
|
display: contents; /* form element itself doesn't affect layout */
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 12 — Dashboard main content area
|
|
============================================================ */
|
|
|
|
.dashboard-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-main-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
padding: 2rem;
|
|
flex: 1;
|
|
}
|
|
|
|
/* ============================================================
|
|
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 20b — Dashboard card progress row and list-row
|
|
============================================================ */
|
|
|
|
/* Progress row wrapper on dashboard cards */
|
|
.project-card-progress-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
/* "Progression: X%" label text */
|
|
.project-card-progress-label {
|
|
color: var(--color-text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Accent-colored progress bar for dashboard cards (overrides --project-color) */
|
|
.project-card-progress-bar {
|
|
background: var(--color-accent);
|
|
border-radius: 999px;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Grid/table view is toggled via .hidden Tailwind class on #tablos-grid / #tablos-table */
|
|
|
|
/* ── View toggle tabs ─────────────────────────────────────── */
|
|
|
|
.view-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 2px solid transparent;
|
|
color: var(--color-text-muted, #6b7280);
|
|
font-size: 0.875rem;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.view-tab:hover {
|
|
color: #374151;
|
|
}
|
|
|
|
.view-tab.is-active {
|
|
border-bottom-color: #9333ea;
|
|
color: #9333ea;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Filter tabs ───────────────────────────────────────────── */
|
|
|
|
.filter-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.625rem 1rem;
|
|
border: 1px solid #EAECF0;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
background: white;
|
|
cursor: pointer;
|
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-tab:hover {
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.filter-tab.is-active {
|
|
border-color: #9333ea;
|
|
background: #faf5ff;
|
|
color: #9333ea;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 20c — View toggle button
|
|
============================================================ */
|
|
|
|
.view-toggle-btn {
|
|
align-items: center;
|
|
background: transparent;
|
|
border: 1px solid var(--color-border-subtle);
|
|
border-radius: 0.5rem;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
height: 2rem;
|
|
justify-content: center;
|
|
padding: 0;
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
width: 2rem;
|
|
}
|
|
|
|
.view-toggle-btn:hover {
|
|
background: var(--color-surface-neutral-hover);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* ============================================================
|
|
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)
|
|
============================================================ */
|
|
|
|
#discussion-messages {
|
|
max-height: 32rem;
|
|
overflow-y: auto;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 25 — Tablo detail page (Figma restyle)
|
|
============================================================ */
|
|
|
|
.tablo-detail-page {
|
|
padding: 24px 32px;
|
|
}
|
|
|
|
.tablo-detail-header {
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.tablo-detail-title-row {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.tablo-detail-avatar {
|
|
align-items: center;
|
|
background: var(--color-surface-muted);
|
|
border-radius: 12px;
|
|
color: #ffffff;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
height: 48px;
|
|
justify-content: center;
|
|
width: 48px;
|
|
}
|
|
|
|
.tablo-detail-title {
|
|
color: var(--color-text-primary);
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Override the existing tablo-metadata-row for the detail page context */
|
|
.tablo-detail-header .tablo-metadata-row {
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
gap: 24px;
|
|
margin-bottom: 0;
|
|
padding-block: 16px;
|
|
}
|
|
|
|
.tablo-meta-segment {
|
|
align-items: center;
|
|
color: var(--color-text-secondary);
|
|
display: flex;
|
|
font-size: 0.875rem;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tablo-meta-progress {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tablo-progress-bar {
|
|
background: var(--color-brand-primary);
|
|
border-radius: 9999px;
|
|
height: 5px;
|
|
}
|
|
|
|
.tablo-tab-bar {
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
display: flex;
|
|
gap: 24px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.tablo-tab-bar .tab-nav-item {
|
|
font-size: 0.875rem;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 26 — Kanban board & columns (Figma restyle)
|
|
============================================================ */
|
|
|
|
.tablo-kanban-board {
|
|
display: flex;
|
|
gap: 16px;
|
|
overflow-x: auto;
|
|
padding-bottom: 16px;
|
|
padding-top: 24px;
|
|
}
|
|
|
|
.tablo-kanban-column {
|
|
background: var(--color-surface-default);
|
|
border: 1px solid var(--color-border-default);
|
|
border-radius: 0.75rem;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
width: 18rem;
|
|
}
|
|
|
|
.tablo-kanban-column-header {
|
|
align-items: center;
|
|
background: var(--color-surface-muted);
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.tablo-kanban-column-title {
|
|
color: var(--color-text-primary);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.tablo-kanban-task-count {
|
|
background: var(--color-surface-default);
|
|
border: 1px solid var(--color-border-muted);
|
|
border-radius: 9999px;
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.75rem;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.tablo-kanban-empty {
|
|
color: var(--color-text-faint);
|
|
font-size: 0.875rem;
|
|
padding: 24px 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ============================================================
|
|
Section 27 — Task card (kanban card style)
|
|
============================================================ */
|
|
|
|
.task-card {
|
|
background: var(--color-surface-default);
|
|
border: 1px solid var(--color-border-default);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin: 8px;
|
|
padding-block: 8px;
|
|
padding-inline: 12px;
|
|
transition: box-shadow 0.12s ease, border-color 0.12s ease;
|
|
}
|
|
|
|
.task-card:hover {
|
|
border-color: var(--color-border-strong);
|
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.task-card-top-row {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.task-card-title {
|
|
color: var(--color-text-primary);
|
|
flex: 1;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.task-card-delete {
|
|
flex-shrink: 0;
|
|
opacity: 0;
|
|
transition: opacity 0.12s ease;
|
|
}
|
|
|
|
.task-card:hover .task-card-delete {
|
|
opacity: 1;
|
|
}
|
|
|
|
.task-card:hover .task-drag-handle {
|
|
opacity: 1;
|
|
}
|