7f8a80fecb
The dashboard root used min-height: calc(100vh - 46px) which expanded to the viewport but bypassed the parent .o_action_manager flex sizing, so the inner overflow-y: auto had nothing to scroll - vertical content was clipped or stuck. Replaced with height: 100% + overflow-y: auto + overflow-x: hidden so the component fills its action container and scrolls naturally. Bumped to 19.0.1.0.6 to bust the asset bundle hash. Co-authored-by: Cursor <cursoragent@cursor.com>
324 lines
8.4 KiB
SCSS
324 lines
8.4 KiB
SCSS
// Fusion Repairs dashboard.
|
|
// Uses tokens from _fr_tokens.scss (registered first in the bundle).
|
|
// Three-layer contrast: page (grayest) -> section -> card (brightest).
|
|
|
|
.o_fusion_repairs_dashboard {
|
|
background-color: $fr-page;
|
|
color: $fr-text;
|
|
// Fill the action manager AND scroll vertically. min-height/100vh broke
|
|
// scrolling because it bypassed the parent's flex sizing.
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 24px;
|
|
|
|
.fr-hero {
|
|
background: linear-gradient(135deg, $fr-accent 0%, color-mix(in srgb, $fr-accent 60%, $fr-success) 100%);
|
|
color: #ffffff;
|
|
border-radius: 12px;
|
|
padding: 28px 32px;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
|
|
h1 {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
color: #ffffff;
|
|
}
|
|
p {
|
|
opacity: 0.9;
|
|
margin: 0;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.fr-section-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.6px;
|
|
color: $fr-muted;
|
|
margin: 24px 0 12px 0;
|
|
}
|
|
|
|
.fr-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
margin-bottom: 8px;
|
|
|
|
&.fr-grid-stats {
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
}
|
|
&.fr-grid-actions {
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
}
|
|
&.fr-grid-portals {
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
}
|
|
&.fr-grid-config {
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
}
|
|
&.fr-grid-lists {
|
|
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
|
}
|
|
}
|
|
|
|
.fr-stat {
|
|
background-color: $fr-card;
|
|
border: 1px solid $fr-border;
|
|
border-radius: 10px;
|
|
padding: 18px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.fr-stat-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
color: $fr-muted;
|
|
}
|
|
.fr-stat-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
color: $fr-text;
|
|
}
|
|
.fr-stat-sub {
|
|
font-size: 12px;
|
|
color: $fr-muted;
|
|
}
|
|
|
|
&.fr-stat-accent .fr-stat-value { color: $fr-accent; }
|
|
&.fr-stat-warning .fr-stat-value { color: $fr-warning; }
|
|
&.fr-stat-danger .fr-stat-value { color: $fr-danger; }
|
|
&.fr-stat-success .fr-stat-value { color: $fr-success; }
|
|
}
|
|
|
|
.fr-action {
|
|
background-color: $fr-card;
|
|
border: 1px solid $fr-border;
|
|
border-radius: 10px;
|
|
padding: 18px 20px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
color: $fr-text;
|
|
font: inherit;
|
|
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
border-color: $fr-accent;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.fr-action-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
min-width: 44px;
|
|
border-radius: 8px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: $fr-info-bg;
|
|
color: $fr-accent;
|
|
font-size: 18px;
|
|
}
|
|
.fr-action-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
.fr-action-title {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: $fr-text;
|
|
}
|
|
.fr-action-sub {
|
|
font-size: 12px;
|
|
color: $fr-muted;
|
|
}
|
|
|
|
&.fr-action-primary {
|
|
background: linear-gradient(135deg, $fr-accent 0%, color-mix(in srgb, $fr-accent 65%, $fr-success) 100%);
|
|
border-color: transparent;
|
|
color: #ffffff;
|
|
|
|
.fr-action-icon {
|
|
background-color: rgba(255, 255, 255, 0.18);
|
|
color: #ffffff;
|
|
}
|
|
.fr-action-title,
|
|
.fr-action-sub {
|
|
color: #ffffff;
|
|
}
|
|
.fr-action-sub { opacity: 0.85; }
|
|
|
|
&:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
|
|
}
|
|
}
|
|
|
|
.fr-portal {
|
|
background-color: $fr-card;
|
|
border: 1px solid $fr-border;
|
|
border-radius: 10px;
|
|
padding: 18px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
.fr-portal-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
|
|
i {
|
|
color: $fr-accent;
|
|
}
|
|
}
|
|
.fr-portal-sub {
|
|
font-size: 12px;
|
|
color: $fr-muted;
|
|
}
|
|
.fr-portal-url {
|
|
background-color: $fr-info-bg;
|
|
color: $fr-text;
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
|
font-size: 12px;
|
|
word-break: break-all;
|
|
}
|
|
.fr-portal-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
|
|
.btn {
|
|
font-size: 12px;
|
|
padding: 6px 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fr-list {
|
|
background-color: $fr-card;
|
|
border: 1px solid $fr-border;
|
|
border-radius: 10px;
|
|
padding: 18px 20px;
|
|
|
|
h3 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin: 0 0 12px 0;
|
|
color: $fr-text;
|
|
}
|
|
.fr-list-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-top: 1px solid $fr-border-soft;
|
|
cursor: pointer;
|
|
gap: 12px;
|
|
|
|
&:first-of-type {
|
|
border-top: none;
|
|
}
|
|
&:hover {
|
|
background-color: $fr-info-bg;
|
|
margin: 0 -8px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
border-radius: 6px;
|
|
}
|
|
.fr-list-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
.fr-list-title {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: $fr-text;
|
|
}
|
|
.fr-list-sub {
|
|
font-size: 12px;
|
|
color: $fr-muted;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.fr-list-meta {
|
|
font-size: 11px;
|
|
color: $fr-muted;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.fr-list-empty {
|
|
text-align: center;
|
|
color: $fr-muted;
|
|
font-size: 13px;
|
|
padding: 24px 0;
|
|
}
|
|
}
|
|
|
|
.fr-pill {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
|
|
&.fr-pill-normal {
|
|
background-color: $fr-border-soft;
|
|
color: $fr-text;
|
|
}
|
|
&.fr-pill-urgent {
|
|
background-color: $fr-warning-bg;
|
|
color: $fr-warning;
|
|
}
|
|
&.fr-pill-safety {
|
|
background-color: $fr-danger-bg;
|
|
color: $fr-danger;
|
|
}
|
|
&.fr-pill-state {
|
|
background-color: $fr-info-bg;
|
|
color: $fr-accent;
|
|
}
|
|
}
|
|
|
|
.fr-loading {
|
|
text-align: center;
|
|
padding: 60px 0;
|
|
color: $fr-muted;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
padding: 16px;
|
|
|
|
.fr-hero { padding: 20px 22px; }
|
|
.fr-hero h1 { font-size: 22px; }
|
|
}
|
|
}
|