forked from sagnik/Velocity-OS
Initial commit: Velocity-OS migration
This commit is contained in:
32
webos/src/pillars/pipeline/client360/Client360.module.css
Normal file
32
webos/src/pillars/pipeline/client360/Client360.module.css
Normal file
@@ -0,0 +1,32 @@
|
||||
/* Client360 */
|
||||
.root { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
|
||||
.backBtn { align-self: flex-start; background: none; border: none; color: var(--color-text-tertiary); font-size: var(--text-sm); cursor: pointer; padding: var(--space-4) var(--space-6) 0; font-family: var(--font-sans); transition: color var(--duration-fast) var(--ease-standard); }
|
||||
.backBtn:hover { color: var(--color-text-primary); }
|
||||
/* Header */
|
||||
.header { margin: var(--space-3) var(--space-6) 0; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
|
||||
.headerTop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
|
||||
.identity { display: flex; align-items: center; gap: var(--space-4); }
|
||||
.avatar { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--color-violet-glow); border: 2px solid var(--color-violet); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-violet-light); flex-shrink: 0; overflow: hidden; }
|
||||
.avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.nameBlock { display: flex; flex-direction: column; gap: var(--space-1); }
|
||||
.name { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text-primary); letter-spacing: var(--tracking-tight); margin: 0; }
|
||||
.meta { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
|
||||
.intentBadge { flex-shrink: 0; align-self: flex-start; }
|
||||
/* KPI row */
|
||||
.kpiRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
|
||||
.kpiChip { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
|
||||
.kpiLabel { font-size: 9px; font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-tertiary); }
|
||||
.qdWrap { display: flex; align-items: center; gap: var(--space-3); }
|
||||
.qdValue { font-size: var(--text-2xl); font-weight: var(--font-bold); }
|
||||
.qdDelta { font-size: 10px; display: block; }
|
||||
.kpiValue { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-primary); }
|
||||
.kpiSub { font-size: var(--text-xs); color: var(--color-text-tertiary); }
|
||||
/* Action bar */
|
||||
.actionBar { display: flex; gap: var(--space-3); flex-wrap: wrap; }
|
||||
/* Tabs */
|
||||
.tabNav { display: flex; gap: 0; border-bottom: var(--glass-border); margin: var(--space-4) var(--space-6) 0; }
|
||||
.tabBtn { position: relative; background: none; border: none; padding: var(--space-3) var(--space-5); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-tertiary); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }
|
||||
.tabActive { color: var(--color-text-primary); }
|
||||
.tabUnderline { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--color-violet); border-radius: 1px; }
|
||||
/* Content */
|
||||
.tabContent { padding: var(--space-5) var(--space-6) var(--space-10); flex: 1; }
|
||||
Reference in New Issue
Block a user