changes
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user