1411 lines
25 KiB
CSS
1411 lines
25 KiB
CSS
.ad-root {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
isolation: isolate;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.ad-root::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: -80px 0 auto auto;
|
|
width: min(560px, 52vw);
|
|
height: 420px;
|
|
background: var(--asset-warm-elements) center / cover no-repeat;
|
|
opacity: 0.045;
|
|
filter: saturate(0.75);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ad-head {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: var(--sp-4);
|
|
flex-wrap: wrap;
|
|
padding: 0 2px 2px;
|
|
}
|
|
|
|
.ad-head h1 {
|
|
margin: 6px 0 0;
|
|
color: var(--text-strong);
|
|
font-size: var(--fs-h2);
|
|
line-height: 1.28;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.ad-head p {
|
|
margin: 6px 0 0;
|
|
max-width: 720px;
|
|
color: var(--text-body);
|
|
font-size: var(--fs-xs);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.ad-head__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ad-status {
|
|
display: grid;
|
|
grid-template-columns: 12px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--accent-tint) 42%, var(--bg-surface)), var(--bg-surface));
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.ad-status__dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--warn-solid);
|
|
}
|
|
|
|
.ad-status--ok .ad-status__dot {
|
|
background: var(--pos-solid);
|
|
}
|
|
|
|
.ad-status--down .ad-status__dot {
|
|
background: var(--crit-solid);
|
|
}
|
|
|
|
.ad-status b {
|
|
display: block;
|
|
color: var(--text-strong);
|
|
font-size: var(--fs-body);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.ad-status span {
|
|
display: block;
|
|
margin-top: 3px;
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
.ad-status time {
|
|
color: var(--text-muted);
|
|
font-family: var(--font-num);
|
|
font-size: var(--fs-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ad-error {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
border-radius: var(--radius);
|
|
background: var(--crit-tint);
|
|
color: var(--crit-text);
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
.ad-kpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
background: var(--bg-surface);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.ad-kpi {
|
|
min-width: 0;
|
|
padding: 12px;
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.ad-kpi + .ad-kpi {
|
|
border-left: 1px solid var(--hair);
|
|
}
|
|
|
|
.ad-kpi__lab {
|
|
display: block;
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
font-weight: 650;
|
|
}
|
|
|
|
.ad-kpi b {
|
|
display: block;
|
|
color: var(--text-strong);
|
|
font-family: var(--font-num);
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ad-kpi small {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.ad-overview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.ad-panel,
|
|
.ad-policy,
|
|
.ad-ticket {
|
|
min-width: 0;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
background: var(--bg-surface);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.ad-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.ad-panel--wide {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.ad-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ad-section__head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--sp-3);
|
|
}
|
|
|
|
.ad-section__head h2 {
|
|
margin: 0;
|
|
color: var(--text-strong);
|
|
font-size: var(--fs-body);
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.ad-section__head span {
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
.ad-flow-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.ad-flow {
|
|
min-width: 0;
|
|
padding: 12px;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-surface-2);
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.ad-flow span,
|
|
.ad-flow small,
|
|
.ad-cost span,
|
|
.ad-availability span {
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.ad-flow b,
|
|
.ad-cost b,
|
|
.ad-availability b {
|
|
color: var(--text-strong);
|
|
font-family: var(--font-num);
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ad-availability {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ad-availability > div,
|
|
.ad-ticket-trend {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 10px 0;
|
|
border-top: 1px solid var(--paper-2);
|
|
}
|
|
|
|
.ad-availability > div:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.ad-cost {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.ad-cost b {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.ad-ticket-mini {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ad-ticket-mini > div {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 3px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--paper-2);
|
|
}
|
|
|
|
.ad-ticket-mini > div:first-child {
|
|
padding-top: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
.ad-ticket-mini b {
|
|
color: var(--text-strong);
|
|
font-size: var(--fs-sm);
|
|
line-height: 1.35;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-ticket-mini span {
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.ad-empty-state {
|
|
min-height: 108px;
|
|
display: grid;
|
|
align-content: center;
|
|
gap: 6px;
|
|
padding: 14px;
|
|
border: 1px dashed var(--hair);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-surface-2);
|
|
}
|
|
|
|
.ad-empty-state b {
|
|
color: var(--text-strong);
|
|
font-size: var(--fs-sm);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.ad-empty-state p {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ad-services {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
background: var(--bg-surface);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.ad-service {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1.3fr) minmax(170px, 0.7fr);
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
border-top: 1px solid var(--paper-2);
|
|
transition:
|
|
border-color var(--dur-fast) var(--ease-out),
|
|
background var(--dur-fast) var(--ease-out);
|
|
}
|
|
|
|
.ad-service:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.ad-service--ok {
|
|
background: color-mix(in srgb, var(--pos-tint) 22%, var(--bg-surface));
|
|
}
|
|
|
|
.ad-service--degraded {
|
|
background: color-mix(in srgb, var(--warn-tint) 28%, var(--bg-surface));
|
|
}
|
|
|
|
.ad-service--down {
|
|
background: color-mix(in srgb, var(--crit-tint) 28%, var(--bg-surface));
|
|
}
|
|
|
|
.ad-service:hover {
|
|
background: var(--bg-surface-2);
|
|
}
|
|
|
|
.ad-service__top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ad-service__name {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
}
|
|
|
|
.ad-service__name b {
|
|
color: var(--text-strong);
|
|
font-size: var(--fs-sm);
|
|
line-height: 1.35;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-service p {
|
|
margin: 0;
|
|
color: var(--text-body);
|
|
font-size: var(--fs-xs);
|
|
line-height: 1.45;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-service__meter {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ad-service__meter span {
|
|
min-width: 0;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-num);
|
|
font-size: var(--fs-xs);
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
text-align: right;
|
|
}
|
|
|
|
.ad-service--skeleton,
|
|
.ad-user--skeleton {
|
|
min-height: 58px;
|
|
background: var(--bg-surface-2);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.ad-empty,
|
|
.ad-users-empty {
|
|
padding: var(--sp-5);
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-sm);
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
}
|
|
|
|
.ad-skel {
|
|
display: block;
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, var(--paper-2) 25%, var(--bg-surface) 50%, var(--paper-2) 75%);
|
|
background-size: 200% 100%;
|
|
animation: ad-shimmer 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
.ad-skel--name {
|
|
width: 62%;
|
|
}
|
|
|
|
.ad-skel--detail {
|
|
width: 92%;
|
|
}
|
|
|
|
.ad-skel--meter {
|
|
width: 72%;
|
|
}
|
|
|
|
.ad-skel--action {
|
|
width: 74px;
|
|
justify-self: end;
|
|
}
|
|
|
|
@keyframes ad-shimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ad-skel {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.ad-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.ad-tabs button {
|
|
flex: 0 0 auto;
|
|
height: 34px;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
background: var(--bg-surface);
|
|
color: var(--text-body);
|
|
padding: 0 12px;
|
|
font: 700 var(--fs-xs) / 1 var(--font-sans);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ad-tabs button:hover {
|
|
background: var(--bg-surface-2);
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.ad-tabs button.is-active {
|
|
background: var(--accent-tint);
|
|
border-color: color-mix(in srgb, var(--accent) 34%, var(--hair));
|
|
color: var(--accent-deep);
|
|
}
|
|
|
|
.ad-user-create {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
align-items: end;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ad-user-create label,
|
|
.ad-users-toolbar label,
|
|
.ad-user__fields label {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.ad-user-create .ad-checkline,
|
|
.ad-user__fields .ad-checkline {
|
|
min-height: 36px;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ad-user-create span,
|
|
.ad-users-toolbar label span,
|
|
.ad-user__fields span {
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
font-weight: 650;
|
|
}
|
|
|
|
.ad-user-create input,
|
|
.ad-user-create select,
|
|
.ad-users-toolbar input,
|
|
.ad-user__fields input,
|
|
.ad-user__fields select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 36px;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-surface-2);
|
|
color: var(--text-strong);
|
|
padding: 0 10px;
|
|
font: var(--fs-sm) / 1.3 var(--font-sans);
|
|
}
|
|
.ad-user-create .ad-checkline input,
|
|
.ad-user__fields .ad-checkline input {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.ad-user-create input:focus,
|
|
.ad-user-create select:focus,
|
|
.ad-users-toolbar input:focus,
|
|
.ad-user__fields input:focus,
|
|
.ad-user__fields select:focus {
|
|
outline: none;
|
|
border-color: var(--border-focus);
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
}
|
|
|
|
.ad-user-create .vg-btn {
|
|
width: 100%;
|
|
height: 36px;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
.ad-users-note {
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius);
|
|
background: var(--info-tint);
|
|
color: var(--info-text);
|
|
font-size: var(--fs-xs);
|
|
line-height: 1.5;
|
|
border: 1px solid color-mix(in srgb, var(--info-solid) 18%, transparent);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-users-note--warn {
|
|
background: var(--warn-tint);
|
|
color: var(--warn-text);
|
|
border-color: color-mix(in srgb, var(--warn-solid) 20%, transparent);
|
|
}
|
|
|
|
.ad-users-toolbar {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ad-users-toolbar label {
|
|
width: min(100%, 360px);
|
|
}
|
|
|
|
.ad-users-toolbar > span {
|
|
min-width: 0;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-num);
|
|
font-size: var(--fs-xs);
|
|
text-align: right;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-users {
|
|
flex: 1 1 auto;
|
|
max-height: min(760px, calc(100vh - 116px));
|
|
overflow: auto;
|
|
scrollbar-gutter: stable;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
background: var(--bg-surface);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ad-approval-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.ad-approval-head h2 {
|
|
margin: 0;
|
|
color: var(--text-strong);
|
|
font-size: var(--fs-lg);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.ad-approval-head p {
|
|
margin: 4px 0 0;
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-sm);
|
|
line-height: 1.45;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-approval-metrics {
|
|
min-width: min(100%, 320px);
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.ad-approval-metrics span {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-surface-2);
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
text-align: center;
|
|
}
|
|
|
|
.ad-approval-metrics b {
|
|
color: var(--text-strong);
|
|
font-family: var(--font-num);
|
|
font-size: 18px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.ad-approval-list {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
background: var(--bg-surface);
|
|
}
|
|
|
|
.ad-approval {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1fr) max-content;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border-top: 1px solid var(--paper-2);
|
|
background: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-surface-2));
|
|
}
|
|
|
|
.ad-approval:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.ad-approval:hover {
|
|
background: var(--bg-surface-2);
|
|
}
|
|
|
|
.ad-approval__meta {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px 10px;
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
.ad-approval__meta span {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-approval__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ad-approval__actions .vg-btn {
|
|
min-width: 72px;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ad-user {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(190px, 0.75fr) minmax(420px, 1.4fr) minmax(138px, 0.42fr) max-content;
|
|
align-items: center;
|
|
gap: 10px 12px;
|
|
padding: 9px 12px;
|
|
border-top: 1px solid var(--paper-2);
|
|
background: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-surface-2));
|
|
}
|
|
.ad-user:hover {
|
|
background: var(--bg-surface-2);
|
|
}
|
|
|
|
.ad-user:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.ad-user__top,
|
|
.ad-user__id,
|
|
.ad-user__actions {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ad-user__top {
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ad-user__id {
|
|
gap: 10px;
|
|
}
|
|
|
|
.ad-user__id > span {
|
|
width: 34px;
|
|
height: 34px;
|
|
flex: none;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--accent-tint);
|
|
color: var(--accent-deep);
|
|
font-weight: 750;
|
|
}
|
|
|
|
.ad-user__id b {
|
|
display: block;
|
|
color: var(--text-strong);
|
|
font-size: var(--fs-sm);
|
|
line-height: 1.35;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-user__id p {
|
|
margin: 2px 0 0;
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-user__badges {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ad-user__fields {
|
|
display: grid;
|
|
grid-template-columns: minmax(130px, 1.1fr) 96px 104px 112px minmax(118px, 0.95fr) minmax(110px, 0.85fr);
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ad-user__fields span {
|
|
display: none;
|
|
}
|
|
|
|
.ad-user__fields input,
|
|
.ad-user__fields select {
|
|
height: 32px;
|
|
font-size: 12.5px;
|
|
padding-inline: 9px;
|
|
}
|
|
|
|
.ad-user__meta {
|
|
display: grid;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-num);
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
.ad-user__meta span {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-user__actions {
|
|
flex-wrap: nowrap;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
justify-self: end;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.ad-user__actions .vg-btn {
|
|
min-width: 74px;
|
|
padding-inline: 10px;
|
|
}
|
|
|
|
.ad-role-stack {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ad-role-meter {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ad-role-meter > div {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ad-role-meter span {
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
.ad-role-meter b {
|
|
color: var(--text-strong);
|
|
font-family: var(--font-num);
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
.ad-activity-table,
|
|
.ad-access-table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
background: var(--bg-surface-2);
|
|
}
|
|
|
|
.ad-activity-table > div,
|
|
.ad-access-table__head,
|
|
.ad-access-row {
|
|
display: grid;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 12px;
|
|
}
|
|
|
|
.ad-activity-table > div {
|
|
grid-template-columns: minmax(180px, 1fr) 92px 86px 118px;
|
|
border-top: 1px solid var(--hair);
|
|
color: var(--text-body);
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
.ad-activity-table > div:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.ad-activity-table b,
|
|
.ad-access-row b {
|
|
color: var(--text-strong);
|
|
font-size: var(--fs-sm);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.ad-activity-table small {
|
|
display: block;
|
|
margin-top: 2px;
|
|
color: var(--text-muted);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-policy-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.ad-policy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ad-policy p {
|
|
margin: 0;
|
|
color: var(--text-body);
|
|
font-size: var(--fs-sm);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ad-policy small {
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.ad-chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ad-chip-row span {
|
|
min-height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-surface-2);
|
|
color: var(--text-body);
|
|
padding: 0 9px;
|
|
font-size: var(--fs-xs);
|
|
font-weight: 650;
|
|
}
|
|
|
|
.ad-access-table__head,
|
|
.ad-access-row {
|
|
grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(100px, 0.7fr));
|
|
}
|
|
|
|
.ad-access-table--compact .ad-access-table__head,
|
|
.ad-access-table--compact .ad-access-row {
|
|
grid-template-columns: 120px minmax(220px, 1fr) 120px;
|
|
}
|
|
|
|
.ad-access-table__head {
|
|
background: var(--bg-app);
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.ad-access-row {
|
|
border-top: 1px solid var(--hair);
|
|
color: var(--text-body);
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
.ad-ticket-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
background: var(--bg-surface);
|
|
}
|
|
|
|
.ad-ticket-filter {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(132px, 0.45fr)) minmax(140px, 0.5fr) max-content max-content;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.ad-ticket-filter input,
|
|
.ad-ticket-filter select {
|
|
min-width: 0;
|
|
min-height: 36px;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-surface);
|
|
color: var(--text-body);
|
|
padding: 0 10px;
|
|
font: inherit;
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
.ad-ticket-filter__check {
|
|
min-height: 36px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-surface);
|
|
color: var(--text-body);
|
|
padding: 0 10px;
|
|
font-size: var(--fs-xs);
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ad-ticket-filter__check input {
|
|
min-height: auto;
|
|
width: 14px;
|
|
height: 14px;
|
|
padding: 0;
|
|
}
|
|
|
|
.ad-ticket-queues {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.ad-ticket-queues button {
|
|
min-height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-surface);
|
|
color: var(--text-body);
|
|
padding: 0 10px;
|
|
font: inherit;
|
|
font-size: var(--fs-xs);
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ad-ticket-queues button:hover,
|
|
.ad-ticket-queues button.is-active {
|
|
border-color: color-mix(in srgb, var(--accent) 55%, var(--hair));
|
|
background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface));
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.ad-ticket-queues b {
|
|
color: var(--text-strong);
|
|
font-family: var(--font-num);
|
|
}
|
|
|
|
.ad-ticket {
|
|
display: grid;
|
|
grid-template-columns: minmax(260px, 1fr) 84px 90px minmax(150px, max-content);
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
border: 0;
|
|
border-top: 1px solid var(--paper-2);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-surface-2));
|
|
}
|
|
.ad-ticket:first-child {
|
|
border-top: 0;
|
|
}
|
|
.ad-ticket:hover {
|
|
background: var(--bg-surface-2);
|
|
}
|
|
|
|
.ad-ticket > div:first-child {
|
|
min-width: 0;
|
|
}
|
|
|
|
.ad-ticket__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px 10px;
|
|
}
|
|
|
|
.ad-ticket span,
|
|
.ad-ticket time {
|
|
color: var(--text-muted);
|
|
font-family: var(--font-num);
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
.ad-ticket h2 {
|
|
margin: 3px 0;
|
|
color: var(--text-strong);
|
|
font-size: var(--fs-body);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.ad-ticket p {
|
|
margin: 0;
|
|
color: var(--text-body);
|
|
font-size: var(--fs-xs);
|
|
line-height: 1.45;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-ticket small {
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ad-ticket__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ad-ticket__actions .vg-btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ad-ticket__actions--history span {
|
|
align-self: center;
|
|
border: 1px solid var(--hair);
|
|
border-radius: 999px;
|
|
padding: 5px 9px;
|
|
background: var(--bg-app);
|
|
color: var(--text-muted);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.ad-ticket-list--history .ad-ticket {
|
|
background: var(--bg-surface);
|
|
}
|
|
|
|
.ad-ticket-trend span {
|
|
color: var(--text-muted);
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
.ad-ticket-trend b {
|
|
color: var(--text-strong);
|
|
font-family: var(--font-num);
|
|
font-size: 20px;
|
|
}
|
|
|
|
@media (max-width: 1179px) {
|
|
.ad-ticket-filter {
|
|
grid-template-columns: minmax(180px, 1fr) minmax(132px, 0.6fr) minmax(132px, 0.6fr);
|
|
}
|
|
|
|
.ad-user {
|
|
grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.2fr) max-content;
|
|
}
|
|
|
|
.ad-user__fields {
|
|
grid-template-columns: minmax(0, 1fr) 104px;
|
|
}
|
|
|
|
.ad-user__fields span {
|
|
display: block;
|
|
}
|
|
|
|
.ad-user__meta {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px 14px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.ad-kpis,
|
|
.ad-flow-grid,
|
|
.ad-policy-grid,
|
|
.ad-overview-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.ad-panel--wide {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.ad-service {
|
|
grid-template-columns: minmax(160px, 0.85fr) minmax(0, 1fr);
|
|
}
|
|
|
|
.ad-service__meter {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.ad-user {
|
|
grid-template-columns: 1fr;
|
|
align-items: start;
|
|
}
|
|
|
|
.ad-approval {
|
|
grid-template-columns: 1fr;
|
|
align-items: start;
|
|
}
|
|
|
|
.ad-user__actions {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.ad-approval__actions {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.ad-user-create {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.ad-ticket-filter {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.ad-ticket {
|
|
grid-template-columns: minmax(0, 1fr) 84px;
|
|
}
|
|
|
|
.ad-ticket__actions {
|
|
grid-column: 1 / -1;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.ad-root::before {
|
|
display: none;
|
|
}
|
|
|
|
.ad-head {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ad-head .vg-btn,
|
|
.ad-head__actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.ad-head .vg-btn {
|
|
justify-content: center;
|
|
}
|
|
|
|
.ad-kpis,
|
|
.ad-flow-grid,
|
|
.ad-policy-grid,
|
|
.ad-overview-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ad-ticket-filter {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ad-kpi + .ad-kpi {
|
|
border-left: 0;
|
|
border-top: 1px solid var(--hair);
|
|
}
|
|
|
|
.ad-panel--wide {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.ad-service,
|
|
.ad-ticket,
|
|
.ad-activity-table > div,
|
|
.ad-access-table__head,
|
|
.ad-access-row,
|
|
.ad-access-table--compact .ad-access-table__head,
|
|
.ad-access-table--compact .ad-access-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ad-ticket__actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.ad-ticket__actions .vg-btn {
|
|
flex: 1 1 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ad-service__meter {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.ad-service__meter {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ad-service__meter span {
|
|
text-align: left;
|
|
}
|
|
|
|
.ad-user-create {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ad-users-toolbar {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ad-users-toolbar label {
|
|
width: 100%;
|
|
}
|
|
|
|
.ad-users-toolbar > span {
|
|
text-align: left;
|
|
}
|
|
|
|
.ad-approval-head {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ad-approval-metrics {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ad-approval__actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.ad-approval__actions .vg-btn {
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.ad-users {
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.ad-status {
|
|
grid-template-columns: 12px minmax(0, 1fr);
|
|
}
|
|
|
|
.ad-status time {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.ad-user__top {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ad-user__fields {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ad-user__actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
width: 100%;
|
|
}
|
|
|
|
.ad-approval-metrics {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ad-approval__actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.ad-user__actions .vg-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ad-approval__actions .vg-btn {
|
|
width: 100%;
|
|
}
|
|
}
|