feat(15-02): port sidebar + project-card CSS into app.css and register in tailwind
- Create backend/internal/web/ui/app.css with dashboard shell, sidebar, and project-card CSS ported verbatim from go-backend - All color values use var(--...) design tokens — no hex colors - Add @import "./internal/web/ui/app.css" to backend/tailwind.input.css
This commit is contained in:
Arthur Belleville
parent
140f400e10
commit
f533d53c74
2 changed files with 451 additions and 0 deletions
450
backend/internal/web/ui/app.css
Normal file
450
backend/internal/web/ui/app.css
Normal file
|
|
@ -0,0 +1,450 @@
|
||||||
|
/* 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 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;
|
||||||
|
}
|
||||||
|
|
@ -18,3 +18,4 @@
|
||||||
@import "./internal/web/ui/icon-button.css";
|
@import "./internal/web/ui/icon-button.css";
|
||||||
@import "./internal/web/ui/form-field.css";
|
@import "./internal/web/ui/form-field.css";
|
||||||
@import "./internal/web/ui/spacing.css";
|
@import "./internal/web/ui/spacing.css";
|
||||||
|
@import "./internal/web/ui/app.css";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue