arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

feat(20-03): tablo detail header, metadata row, and tab bar CSS

Browse source 
- .tablo-detail-page outer container with 24px 32px padding
- .tablo-detail-header flex column with border-bottom
- .tablo-detail-title-row flex row for avatar + h1
- .tablo-detail-avatar 48x48 colored circle with border-radius 12px
- .tablo-detail-title at 1.75rem weight 600
- .tablo-metadata-row horizontal flex with gap 24px
- .tablo-meta-segment and .tablo-meta-progress helper rules
- .tablo-progress-bar with background var(--color-brand-primary) — NOT project-color
- .tablo-tab-bar and .tablo-tab-bar .tab-nav-item override
This commit is contained in:
Arthur Belleville 2026-05-18 15:53:51 +02:00
parent b05f280089
commit 58710d6eba
No known key found for this signature in database
1 changed files with 85 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
go-backend/internal/web/ui/app.css
View file

@ -1947,3 +1947,88 @@ td.text-right .borderless-icon-button.ui-icon-button-ghost.ui-icon-button-danger
.message-meta .message-author {
font-weight: 600;
}
/* === Tablo Detail Page === */
.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;
margin-bottom: 0;
padding-bottom: 16px;
}
.tablo-detail-avatar {
align-items: center;
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;
}
.tablo-metadata-row {
align-items: center;
border-bottom: 1px solid var(--color-border-muted);
display: flex;
flex-wrap: wrap;
gap: 24px;
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;
margin-top: 0;
padding-top: 8px;
}
.tablo-tab-bar .tab-nav-item {
font-size: 0.875rem;
padding-bottom: 12px;
}