This commit is contained in:
gsinghpal
2026-04-29 03:35:33 -04:00
parent 6ac6d24da6
commit a2fe1fcbcc
61 changed files with 4655 additions and 667 deletions

View File

@@ -0,0 +1,263 @@
// Fusion portal: redesigned /my/projects page
// Tokens are wrapped in CSS custom properties so a future portal dark-mode
// pass can flip the surface colors without rewriting any rules.
$fp-page-bg: var(--fp-page-bg, #f3f4f6);
$fp-card-bg: var(--fp-card-bg, #ffffff);
$fp-border: var(--fp-border, #d8dadd);
$fp-text: var(--fp-text, #0f172a);
$fp-muted: var(--fp-muted, #6b7280);
$fp-track: var(--fp-track, #e5e7eb);
$fp-blue-bg: var(--fp-blue-bg, #dbeafe);
$fp-blue-fg: var(--fp-blue-fg, #1d4ed8);
$fp-green-bg: var(--fp-green-bg, #dcfce7);
$fp-green-fg: var(--fp-green-fg, #166534);
$fp-amber-bg: var(--fp-amber-bg, #fef3c7);
$fp-amber-fg: var(--fp-amber-fg, #92400e);
$fp-cyan-bg: var(--fp-cyan-bg, #cffafe);
$fp-cyan-fg: var(--fp-cyan-fg, #155e75);
$fp-gray-bg: var(--fp-gray-bg, #e5e7eb);
$fp-gray-fg: var(--fp-gray-fg, #374151);
$fp-bar-high: var(--fp-bar-high, #22c55e);
$fp-bar-mid: var(--fp-bar-mid, #3b82f6);
$fp-bar-low: var(--fp-bar-low, #f59e0b);
$fp-radius: 10px;
$fp-radius-sm: 6px;
.fp_projects_page {
.fp_projects_header {
h3 {
color: $fp-text;
}
.fp_projects_search_wrap {
min-width: 220px;
max-width: 280px;
}
}
// 3-column status grid
.fp_projects_cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
@media (max-width: 992px) {
grid-template-columns: 1fr;
gap: 18px;
}
}
// Flat / customer-grouped variants reuse a single column
&[data-current-group="none"] .fp_projects_cols,
&[data-current-group="customer"] .fp_projects_cols {
grid-template-columns: 1fr;
}
.fp_projects_col {
min-width: 0;
.fp_projects_col_head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4px 8px;
border-bottom: 2px solid $fp-track;
margin-bottom: 10px;
.fp_col_label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: $fp-gray-fg;
}
.fp_col_count {
font-size: 11px;
font-weight: 700;
color: $fp-muted;
background: $fp-gray-bg;
padding: 2px 8px;
border-radius: 999px;
}
}
.fp_projects_col_body {
display: flex;
flex-direction: column;
gap: 8px;
}
.fp_col_empty {
color: #9ca3af;
font-size: 12px;
text-align: center;
padding: 22px 8px;
background: $fp-card-bg;
border: 1px dashed $fp-border;
border-radius: $fp-radius;
}
}
.fp_dot {
width: 9px;
height: 9px;
border-radius: 999px;
display: inline-block;
&.fp_dot_green { background: #22c55e; }
&.fp_dot_amber { background: #f59e0b; }
&.fp_dot_gray { background: #9ca3af; }
}
// Card
.fp_project_card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 13px 11px;
background: $fp-card-bg;
border: 1px solid $fp-border;
border-radius: $fp-radius;
text-decoration: none;
color: $fp-text;
transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
&:hover {
border-color: #93c5fd;
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.10);
transform: translateY(-1px);
text-decoration: none;
color: $fp-text;
}
.fp_card_top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
.fp_card_title {
font-weight: 600;
font-size: 14px;
line-height: 1.25;
color: $fp-text;
word-break: break-word;
}
.fp_card_pct {
font-weight: 700;
font-size: 12px;
white-space: nowrap;
&.fp_pct_high { color: #15803d; }
&.fp_pct_mid { color: #1d4ed8; }
&.fp_pct_low { color: #b45309; }
&.fp_card_pct_muted { color: #9ca3af; font-weight: 500; }
}
}
.fp_card_sub {
font-size: 11px;
color: $fp-muted;
min-height: 1em;
}
.fp_card_bar {
height: 5px;
background: $fp-track;
border-radius: 999px;
overflow: hidden;
> span {
display: block;
height: 100%;
background: $fp-bar-mid;
transition: width 200ms ease;
}
&.fp_bar_high > span { background: $fp-bar-high; }
&.fp_bar_mid > span { background: $fp-bar-mid; }
&.fp_bar_low > span { background: $fp-bar-low; }
}
.fp_card_stats {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
.fp_chip {
display: inline-flex;
align-items: center;
font-size: 10.5px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
line-height: 1.4;
white-space: nowrap;
&.fp_chip_blue { background: $fp-blue-bg; color: $fp-blue-fg; }
&.fp_chip_green { background: $fp-green-bg; color: $fp-green-fg; }
&.fp_chip_amber { background: $fp-amber-bg; color: $fp-amber-fg; }
&.fp_chip_cyan { background: $fp-cyan-bg; color: $fp-cyan-fg; }
&.fp_chip_gray { background: $fp-gray-bg; color: $fp-gray-fg; }
}
}
.fp_card_footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2px;
.fp_avatars {
display: inline-flex;
.fp_avatar {
position: relative;
width: 22px;
height: 22px;
border-radius: 999px;
overflow: hidden;
background: #e0e7ff;
color: #3730a3;
font-size: 9.5px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: -6px;
border: 2px solid $fp-card-bg;
&:first-child { margin-left: 0; }
img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.fp_avatar_text {
// hidden when image loads; shown when image fails (handled in JS via classList)
display: none;
}
&.fp_avatar_initials .fp_avatar_text { display: inline; }
&.fp_avatar_initials img { display: none; }
&.fp_avatar_more {
background: $fp-gray-bg;
color: $fp-gray-fg;
}
}
}
}
}
// Empty page state
.fp_projects_empty {
background: $fp-card-bg;
border: 1px dashed $fp-border;
border-radius: $fp-radius;
}
}