fs
2f0f407268
Restructure Support dashboard into 2 KPI groups (Tickets + Contracts) with section dividers, merge escalations and recommendations into "Attention needed". Redesign Sales dashboard with clickable contract timeline and dialog. Add CSS shimmer skeleton loading for all dashboard tabs and aside. Unify vertical rhythm via * + * sibling combinator on tab content containers. Remove ~265 lines of dead CSS (contract cards, escalation styles) and unused JS functions. Refactor hydrateTicketCategoryFilter into generic hydrateSelectFilter. Fix role="button" CSS bleed from shell and remove extra future year from timeline. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
340 lines
7.6 KiB
CSS
340 lines
7.6 KiB
CSS
@layer layout {
|
|
.app-sidebar {
|
|
background: var(--app-sidebar-background-color);
|
|
--app-sidebar-gap: 0.5rem;
|
|
--app-sidebar-item-gap: 10px;
|
|
--app-sidebar-title-size: var(--text-2xs);
|
|
--app-sidebar-summary-size: var(--text-xs);
|
|
--app-sidebar-tenant-size: var(--text-sm);
|
|
--app-sidebar-titlebar-height: 30px;
|
|
--app-sidebar-border-width: 2px;
|
|
--app-sidebar-summary-max-width: 142px;
|
|
--app-sidebar-section-gap: 2rem;
|
|
--app-sidebar-section-space: 5px;
|
|
--app-sidebar-hover-bg: transparent;
|
|
}
|
|
|
|
.app-sidebar .brand {
|
|
padding: var(--app-spacing);
|
|
}
|
|
|
|
.app-sidebar-titlebar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--app-sidebar-gap);
|
|
padding: 0 var(--app-spacing);
|
|
margin-bottom: 0;
|
|
min-height: var(--app-sidebar-titlebar-height);
|
|
}
|
|
|
|
.aside-pending .app-sidebar-titlebar {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-panel {
|
|
display: block;
|
|
}
|
|
|
|
.app-sidebar-group.app-sidebar-admin-group details summary i {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px; /* icon-font metric — intentional px */
|
|
width: 1.45rem;
|
|
height: 1.45rem;
|
|
border-radius: 6px;
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--app-nav-icon-color, var(--app-primary)) 15%,
|
|
transparent
|
|
);
|
|
color: var(--app-nav-icon-color, var(--app-primary));
|
|
margin-right: 0.1rem;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
/* Per-group icon colors */
|
|
.app-sidebar-admin-group [data-details-key="admin-organization"] {
|
|
--app-nav-icon-color: #2563eb;
|
|
}
|
|
.app-sidebar-admin-group [data-details-key="admin-roles-permissions"] {
|
|
--app-nav-icon-color: #7c3aed;
|
|
}
|
|
.app-sidebar-admin-group [data-details-key="admin-automation"] {
|
|
--app-nav-icon-color: #0891b2;
|
|
}
|
|
.app-sidebar-admin-group [data-details-key="admin-monitoring"] {
|
|
--app-nav-icon-color: #059669;
|
|
}
|
|
.app-sidebar-admin-group [data-details-key="admin-logs"] {
|
|
--app-nav-icon-color: #d97706;
|
|
}
|
|
.app-sidebar-admin-group [data-details-key="admin-system"] {
|
|
--app-nav-icon-color: #6b7280;
|
|
}
|
|
|
|
aside.app-sidebar li:has(> .app-empty-state) {
|
|
padding-inline: 19px;
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-panel[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.app-sidebar.is-collapsed .app-sidebar-panels,
|
|
.app-sidebar.is-collapsed .app-sidebar-titlebar,
|
|
.sidebar-collapsed .app-sidebar .app-sidebar-titlebar,
|
|
.sidebar-collapsed .app-sidebar .app-sidebar-panels {
|
|
display: none;
|
|
}
|
|
|
|
.app-sidebar-tenant-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--app-sidebar-gap);
|
|
padding: var(--app-spacing);
|
|
margin-bottom: var(--app-spacing);
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-tenant-logo a:hover {
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-tenant-logo > a {
|
|
padding: 0;
|
|
flex: 1;
|
|
border: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-tenant-logo img {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 48px;
|
|
width: auto;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.app-sidebar-tenant-toggle {
|
|
display: none;
|
|
border: 1px solid var(--app-border);
|
|
background: transparent;
|
|
margin: 0;
|
|
}
|
|
|
|
.app-sidebar-tenant-toggle:hover {
|
|
color: var(--app-contrast);
|
|
border-color: var(--app-contrast);
|
|
}
|
|
|
|
.app-sidebar-tenant-name {
|
|
font-weight: var(--font-semibold);
|
|
font-size: var(--text-base);
|
|
color: var(--app-contrast);
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.app-sidebar-title {
|
|
text-transform: uppercase;
|
|
font-size: var(--app-sidebar-title-size);
|
|
color: var(--app-muted-color);
|
|
}
|
|
|
|
.app-sidebar-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.app-sidebar-tools .icon-button {
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--app-muted-color);
|
|
padding: 0.25rem;
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.app-sidebar-tools .icon-button:hover {
|
|
color: var(--app-contrast);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.app-sidebar .brand {
|
|
margin-bottom: 1rem;
|
|
padding-block-start: 0.5rem;
|
|
}
|
|
|
|
.app-sidebar-title {
|
|
display: block;
|
|
}
|
|
|
|
.app-sidebar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.app-sidebar-tenant-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.app-sidebar-tenant-logo img {
|
|
max-width: 120px;
|
|
max-height: 40px;
|
|
flex-shrink: 0;
|
|
}
|
|
.app-sidebar {
|
|
border-bottom: 1px solid var(--app-border);
|
|
}
|
|
|
|
.app-sidebar-panels {
|
|
padding-block-end: var(--app-spacing);
|
|
}
|
|
}
|
|
|
|
.app-sidebar a {
|
|
color: inherit;
|
|
display: block;
|
|
padding: 0.375rem var(--app-spacing);
|
|
border-radius: 0;
|
|
margin: 0;
|
|
border-left: var(--app-sidebar-border-width) solid transparent;
|
|
width: 100%;
|
|
font-size: var(--text-base);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-sidebar a:hover,
|
|
.app-sidebar a.active,
|
|
.app-sidebar .active > a {
|
|
color: var(--app-nav-icon-color, var(--app-primary));
|
|
background: var(--app-sidebar-hover-bg);
|
|
border-left: var(--app-sidebar-border-width) solid var(--app-nav-icon-color, var(--app-primary));
|
|
}
|
|
|
|
aside.app-sidebar ul,
|
|
aside.app-sidebar li {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.app-sidebar small {
|
|
margin-top: var(--app-sidebar-section-gap);
|
|
margin-bottom: var(--app-sidebar-section-space);
|
|
display: block;
|
|
padding-inline: var(--app-spacing);
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-group small {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
display: block;
|
|
padding-inline: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-group details {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-group summary {
|
|
padding: 0 var(--app-spacing);
|
|
font-size: var(--app-sidebar-summary-size);
|
|
color: var(--app-muted-color);
|
|
margin: 0;
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-group details[open] > summary:not([role]) {
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
nav#aside-panel-people {
|
|
margin-top: var(--app-spacing);
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-group summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-group details > ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-group summary > span {
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
max-width: var(--app-sidebar-summary-max-width);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-size: var(--text-base);
|
|
font-weight: var(--font-regular);
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
.app-sidebar #aside-panel-admin > ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.app-sidebar #aside-panel-admin .app-sidebar-admin-group {
|
|
width: 100%;
|
|
}
|
|
|
|
.app-sidebar #aside-panel-admin .app-sidebar-admin-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.app-sidebar
|
|
#aside-panel-admin
|
|
.app-sidebar-admin-group
|
|
details
|
|
> ul
|
|
li:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.app-sidebar
|
|
#aside-panel-admin
|
|
.app-sidebar-admin-group
|
|
details
|
|
> ul
|
|
li:last-child {
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.app-sidebar .app-sidebar-group details > ul li:first-child {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
aside.app-sidebar li.app-sidebar-group {
|
|
margin-bottom: var(--app-spacing);
|
|
}
|
|
|
|
nav#aside-panel-bookmarks .app-empty-state {
|
|
max-width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|