80 lines
7.6 KiB
CSS
80 lines
7.6 KiB
CSS
/* Scope sizing to Cloud Consumption, not other dialogs sharing its components. */
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plans-header { padding: 10px 12px; gap: 12px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plans-header h2 { font-size: 16px; line-height: 22px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plans-header p { font-size: 12px; line-height: 16px; margin-top: 3px; overflow-wrap: anywhere; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plans-tabs { padding: 4px 12px 0; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plan-tab { min-height: 30px; padding: 4px 8px; font-size: 12px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plan-panel { padding: 8px 12px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plan-details { gap: 0 12px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plan-details > div { grid-template-columns: minmax(85px, 35%) minmax(0, 1fr); min-height: 32px; padding: 4px 0; gap: 6px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plan-details dt { font-size: 11px; line-height: 16px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plan-details dd { font-size: 12px; line-height: 16px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-consumption-trend { margin-top: 8px; padding-top: 6px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-consumption-periods button { min-height: 28px; padding: 4px 8px; font-size: 12px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-consumption-navigation { grid-template-columns: 28px minmax(120px, auto) 28px; min-height: 30px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-consumption-navigation strong { font-size: 12px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-consumption-navigation-button { width: 28px; height: 28px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-consumption-svg { height: 100%; max-height: 100%; min-width: 0; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-consumption-legend button { font-size: 11px; padding: 4px; gap: 5px; }
|
|
|
|
/* Small viewports must scroll rather than clip details or collapse the chart. */
|
|
@media (max-height: 560px), (max-width: 700px) {
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plans-panels { overflow: auto; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plan-panel { height: auto; min-height: 100%; grid-template-rows: auto minmax(280px, 1fr); }
|
|
}
|
|
@media (max-width: 700px) {
|
|
[data-consumption-layout="compact"] .opportunities-extension-account-plan-details { grid-template-columns: minmax(0, 1fr); }
|
|
[data-consumption-layout="compact"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
|
|
[data-consumption-layout="compact"] .opportunities-extension-consumption-legend { display: flex; flex-wrap: wrap; }
|
|
}
|
|
|
|
.opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
|
|
.opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }
|
|
.opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }
|
|
.opportunities-extension-plan-detail-skeleton { width: 64px; height: 20px; }
|
|
.opportunities-extension-projection-badge {
|
|
display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;
|
|
padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.3;
|
|
color: #5f5a55; background: #eceae8; white-space: nowrap;
|
|
}
|
|
button.opportunities-extension-projection-badge { cursor: pointer; }
|
|
.opportunities-extension-projection-badge[data-status="forfeit"] { color: #a12424; background: #fbe5e5; }
|
|
.opportunities-extension-projection-badge[data-status="overage"] { color: #185a9d; background: #e0edfc; }
|
|
.opportunities-extension-projection-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
|
|
.opportunities-extension-projection-popover {
|
|
position: fixed; z-index: 8; box-sizing: border-box; padding: 14px; overflow: auto; overscroll-behavior: contain;
|
|
border: 1px solid #b9b4ae; border-radius: 4px; background: #ffffff; color: #312d2a;
|
|
box-shadow: 0 4px 16px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;
|
|
}
|
|
.opportunities-extension-projection-popover[hidden] { display: none; }
|
|
.opportunities-extension-projection-popover .opportunities-extension-projection-dismiss {
|
|
display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-bottom: 8px; padding: 4px; border: 1px solid #b9b4ae;
|
|
border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 12px;
|
|
}
|
|
.opportunities-extension-projection-dismiss svg { width: 14px; height: 14px; }
|
|
.opportunities-extension-projection-line h3 { margin: 0 0 8px; font-size: 12px; }
|
|
.opportunities-extension-projection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
|
|
.opportunities-extension-projection-fields > div { min-width: 0; }
|
|
.opportunities-extension-projection-fields dt { font-weight: 600; color: #5f5a55; font-size: 11px; }
|
|
.opportunities-extension-projection-fields dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
|
|
.opportunities-extension-projection-fields a { color: #006d7a; text-decoration: underline; }
|
|
.opportunities-extension-projection-children { margin-top: 14px; padding-left: 12px; border-left: 2px solid #dedbd7; }
|
|
.opportunities-extension-projection-children > section + section { margin-top: 16px; }
|
|
.opportunities-extension-plan-detail-error { color: #a12424; font-size: 12px; }
|
|
.opportunities-extension-projection-empty { color: #5f5a55; font-size: 12px; }
|
|
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-popover { color: #f1efec; background: #302e2b; border-color: #716b64; }
|
|
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-badge { color: #dedbd7; background: #484541; }
|
|
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-badge[data-status="forfeit"] { color: #ffb9b9; background: #682e32; }
|
|
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-badge[data-status="overage"] { color: #c5dfff; background: #224b76; }
|
|
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-fields dt,
|
|
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-empty { color: #cec9c2; }
|
|
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-fields a { color: #76dbea; }
|
|
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-plan-detail-error { color: #ffb9b9; }
|
|
@media (max-width: 480px) { .opportunities-extension-projection-fields { grid-template-columns: minmax(0, 1fr); } }
|
|
@media (max-width: 480px) {
|
|
.opportunities-extension-consumption-trend-header > .opportunities-extension-consumption-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { .opportunities-extension-plan-detail-skeleton { animation: none; } }
|