900 lines
20 KiB
CSS
900 lines
20 KiB
CSS
#chd-admin-root {
|
|
width: 100%;
|
|
max-width: none;
|
|
min-height: calc(100vh - var(--header-height, 50px));
|
|
box-sizing: border-box;
|
|
overflow-wrap: anywhere;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
overscroll-behavior: contain;
|
|
padding: 4px 8px 24px;
|
|
}
|
|
|
|
#app-content #chd-admin-root,
|
|
#app-content-vue #chd-admin-root,
|
|
#body-settings #chd-admin-root {
|
|
max-height: none;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#app-content,
|
|
#app-content-vue,
|
|
#body-settings {
|
|
height: 100%;
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#chd-admin-root h2 {
|
|
margin: 4px 0 6px;
|
|
font-size: 34px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
#chd-admin-root .chd-note {
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
color: var(--color-text-maxcontrast);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
#chd-admin-root .chd-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
#chd-admin-root .chd-actions--inline {
|
|
margin-bottom: 0;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#chd-admin-root .chd-section-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 10px 0 16px;
|
|
}
|
|
|
|
#chd-admin-root .chd-section-nav .button {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#chd-admin-root [id^="chd-admin-section-"] {
|
|
scroll-margin-top: 16px;
|
|
}
|
|
|
|
#chd-admin-root .chd-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
#chd-admin-root .chd-card {
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
background:
|
|
linear-gradient(160deg, color-mix(in srgb, var(--color-main-background) 84%, var(--color-primary) 16%), var(--color-main-background));
|
|
box-shadow: 0 2px 12px color-mix(in srgb, var(--color-text-maxcontrast) 8%, transparent);
|
|
}
|
|
|
|
#chd-admin-root .chd-card--wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
#chd-admin-root .chd-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#chd-admin-root .chd-card h3 {
|
|
margin: 0;
|
|
font-size: 25px;
|
|
font-weight: 720;
|
|
}
|
|
|
|
#chd-admin-root .chd-card h4 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 680;
|
|
}
|
|
|
|
#chd-admin-root .chd-card-head--compact {
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid color-mix(in srgb, var(--color-border) 58%, transparent);
|
|
}
|
|
|
|
#chd-admin-root pre {
|
|
margin: 0;
|
|
padding: 12px;
|
|
background: color-mix(in srgb, var(--color-main-background) 76%, var(--color-background-dark) 24%);
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
border-radius: 10px;
|
|
max-height: min(56vh, 32rem);
|
|
overflow: auto;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
#chd-admin-root .chd-json-editor {
|
|
width: 100%;
|
|
min-height: min(52vh, 24rem);
|
|
margin: 0 0 10px;
|
|
padding: 12px;
|
|
border-radius: 10px;
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
background: color-mix(in srgb, var(--color-main-background) 76%, var(--color-background-dark) 24%);
|
|
color: var(--color-main-text);
|
|
font: 12px/1.45 var(--font-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);
|
|
white-space: pre;
|
|
overflow: auto;
|
|
resize: vertical;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(36rem, 100%), 1fr));
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-block {
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-primary) 10%);
|
|
}
|
|
|
|
#chd-admin-root .chd-config-block h4 {
|
|
margin: 0 0 6px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#chd-admin-root .chd-field-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 1fr);
|
|
gap: 8px 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
#chd-admin-root .chd-field-grid input,
|
|
#chd-admin-root .chd-field-grid select,
|
|
#chd-admin-root .chd-config-block input,
|
|
#chd-admin-root .chd-config-block select,
|
|
#chd-admin-root .chd-config-block textarea {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#chd-admin-root .chd-table-wrap {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-pill-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#chd-admin-root .chd-note--status {
|
|
min-height: 1.2em;
|
|
}
|
|
|
|
#chd-admin-root .chd-note--warning {
|
|
color: var(--color-warning, #9a6700);
|
|
font-weight: 600;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.5fr) minmax(8rem, 10rem) minmax(0, 1.6fr) auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row--audience {
|
|
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr auto;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row--offer {
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(7rem, 9rem) auto;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row--product {
|
|
grid-template-columns: minmax(0, 1.35fr) minmax(7rem, 9rem) minmax(0, 1.1fr) minmax(0, 1.35fr) auto;
|
|
align-items: start;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row--product .button {
|
|
align-self: start;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__summary {
|
|
grid-column: 1 / 5;
|
|
min-height: 6.5rem;
|
|
resize: vertical;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__helper {
|
|
grid-column: 1 / 5;
|
|
margin-bottom: 0;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__pricing {
|
|
grid-column: 1 / 5;
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
background: color-mix(in srgb, var(--color-main-background) 92%, var(--color-primary) 8%);
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__pricing--live {
|
|
background: color-mix(in srgb, var(--color-success, #1e8e3e) 10%, var(--color-main-background) 90%);
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__pricing--fallback {
|
|
background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-text-maxcontrast) 10%);
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__pricing--missing {
|
|
background: color-mix(in srgb, var(--color-border) 20%, var(--color-main-background) 80%);
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__pricing-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__pricing-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
background: color-mix(in srgb, var(--color-main-background) 88%, transparent);
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__pricing-chip--live {
|
|
border-color: color-mix(in srgb, var(--color-success, #1e8e3e) 45%, transparent);
|
|
color: var(--color-success, #1e8e3e);
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__pricing-chip--fallback {
|
|
border-color: color-mix(in srgb, var(--color-text-maxcontrast) 36%, transparent);
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__pricing-chip--missing {
|
|
border-color: color-mix(in srgb, var(--color-text-maxcontrast) 28%, transparent);
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__pricing-chip--neutral {
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
#chd-admin-root .chd-preview-surface {
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
background: color-mix(in srgb, var(--color-main-background) 92%, var(--color-primary) 8%);
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
#chd-admin-root .chd-preview-section h5 {
|
|
margin: 0 0 6px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#chd-admin-root .chd-preview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-preview-card {
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
background: color-mix(in srgb, var(--color-main-background) 88%, var(--color-primary) 12%);
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-editor-hero {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-editor-hero h5 {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-editor-section + .chd-audience-editor-section {
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-editor-section h5 {
|
|
margin: 0 0 6px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-option-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-option {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: start;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--color-main-background) 88%, var(--color-primary) 12%);
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-option input {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-option-copy {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-option-copy strong {
|
|
font-size: 13px;
|
|
}
|
|
|
|
#chd-admin-root .chd-audience-option-copy span {
|
|
font-size: 12px;
|
|
color: var(--color-text-lighter);
|
|
}
|
|
|
|
#chd-admin-root .chd-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#chd-admin-root .chd-wallet-status {
|
|
font-weight: 600;
|
|
}
|
|
|
|
#chd-admin-root .chd-wallet-status-ok {
|
|
color: var(--color-success, #1f8f4a);
|
|
}
|
|
|
|
#chd-admin-root .chd-wallet-status-locked {
|
|
color: var(--color-error, #c43d2f);
|
|
}
|
|
|
|
#chd-admin-root .chd-wallet-status-unknown {
|
|
color: var(--color-warning, #b07000);
|
|
}
|
|
|
|
#chd-admin-root .chd-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 3000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
}
|
|
|
|
#chd-admin-root .chd-modal__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: color-mix(in srgb, #000 58%, transparent);
|
|
}
|
|
|
|
#chd-admin-root .chd-modal__panel {
|
|
position: relative;
|
|
width: min(32rem, 100%);
|
|
max-height: min(85vh, 42rem);
|
|
overflow: auto;
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
background: var(--color-main-background);
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
|
|
box-shadow: 0 18px 50px color-mix(in srgb, #000 28%, transparent);
|
|
}
|
|
|
|
#chd-admin-root .chd-modal__panel input[type="password"] {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#chd-admin-root .chd-preview-card-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
#chd-admin-root .chd-preview-card-meta {
|
|
font-size: 12px;
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
#chd-admin-root .chd-preview-card-meta--summary {
|
|
margin-bottom: 6px;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
#chd-admin-root .chd-preview-debug {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-preview-debug > summary {
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
#chd-admin-root .chd-snapshot-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-summary-item {
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent);
|
|
border-radius: 10px;
|
|
padding: 8px;
|
|
background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-primary) 10%);
|
|
}
|
|
|
|
#chd-admin-root .chd-summary-item--wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
#chd-admin-root .chd-summary-label {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 620;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--color-text-maxcontrast);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
#chd-admin-root .chd-summary-value {
|
|
font-size: 13px;
|
|
font-weight: 620;
|
|
word-break: break-word;
|
|
}
|
|
|
|
#chd-admin-root .chd-summary-empty {
|
|
color: var(--color-text-maxcontrast);
|
|
font-size: 12px;
|
|
}
|
|
|
|
#chd-admin-root .chd-status-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
#chd-admin-root .chd-status-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border-radius: 999px;
|
|
padding: 4px 10px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
#chd-admin-root .chd-status-pill[data-level="good"] {
|
|
color: color-mix(in srgb, var(--color-success, #15803d) 94%, var(--color-main-text) 6%);
|
|
border-color: color-mix(in srgb, var(--color-success, #15803d) 54%, transparent);
|
|
background: color-mix(in srgb, var(--color-success, #15803d) 16%, transparent);
|
|
}
|
|
|
|
#chd-admin-root .chd-status-pill[data-level="partial"] {
|
|
color: color-mix(in srgb, var(--color-warning, #b45309) 94%, var(--color-main-text) 6%);
|
|
border-color: color-mix(in srgb, var(--color-warning, #b45309) 58%, transparent);
|
|
background: color-mix(in srgb, var(--color-warning, #b45309) 16%, transparent);
|
|
}
|
|
|
|
#chd-admin-root .chd-status-pill[data-level="issues"] {
|
|
color: color-mix(in srgb, var(--color-error, #b42318) 94%, var(--color-main-text) 6%);
|
|
border-color: color-mix(in srgb, var(--color-error, #b42318) 58%, transparent);
|
|
background: color-mix(in srgb, var(--color-error, #b42318) 14%, transparent);
|
|
}
|
|
|
|
#chd-admin-root .chd-instance-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-instance-card {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
|
|
background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-primary) 10%);
|
|
}
|
|
|
|
#chd-admin-root .chd-instance-card--removed {
|
|
border-style: dashed;
|
|
background: color-mix(in srgb, var(--color-main-background) 94%, var(--color-background-dark) 6%);
|
|
}
|
|
|
|
#chd-admin-root .chd-instance-main {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
#chd-admin-root .chd-instance-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#chd-admin-root .chd-chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
#chd-admin-root .chd-chip {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
|
|
background: color-mix(in srgb, var(--color-main-background) 84%, var(--color-primary) 16%);
|
|
}
|
|
|
|
#chd-admin-root .chd-instance-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
#chd-admin-root .chd-button--action-required {
|
|
border-color: color-mix(in srgb, var(--color-success, #15803d) 72%, transparent);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success, #15803d) 44%, transparent);
|
|
color: color-mix(in srgb, var(--color-success, #15803d) 92%, var(--color-main-text) 8%);
|
|
background: color-mix(in srgb, var(--color-main-background) 92%, var(--color-success, #15803d) 8%);
|
|
}
|
|
|
|
#chd-admin-root .chd-removed-panel {
|
|
margin: 8px 0 10px;
|
|
border: 1px dashed color-mix(in srgb, var(--color-border) 60%, transparent);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
background: color-mix(in srgb, var(--color-main-background) 94%, var(--color-background-dark) 6%);
|
|
}
|
|
|
|
#chd-admin-root .chd-removed-panel > summary {
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#chd-admin-root .chd-removed-panel[open] > summary {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#chd-admin-root ul {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
#chd-admin-root .chd-module-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-module {
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
background: color-mix(in srgb, var(--color-main-background) 88%, var(--color-primary) 12%);
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-item {
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-primary) 10%);
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-item--attention {
|
|
border-color: color-mix(in srgb, var(--color-warning, #b45309) 55%, transparent);
|
|
background: linear-gradient(
|
|
160deg,
|
|
color-mix(in srgb, var(--color-main-background) 86%, var(--color-warning, #b45309) 14%),
|
|
var(--color-main-background)
|
|
);
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-item--grant {
|
|
border-left: 4px solid color-mix(in srgb, var(--color-primary, #0f766e) 72%, transparent);
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-item-main {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-meta {
|
|
font-size: 12px;
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-amount-control {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-amount-control input {
|
|
width: 8rem;
|
|
min-height: 32px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-form {
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
background: color-mix(in srgb, var(--color-main-background) 92%, var(--color-primary) 8%);
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-form h5 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-form-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 2fr);
|
|
gap: 8px 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-form-grid input,
|
|
#chd-admin-root .chd-ops-form-grid select,
|
|
#chd-admin-root .chd-ops-form-grid textarea {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#chd-admin-root .chd-status {
|
|
font-size: 13px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-status.chd-error,
|
|
#chd-admin-root .chd-error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
#chd-admin-root .chd-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#chd-admin-root .chd-qapp-frame-wrap {
|
|
width: 100%;
|
|
min-height: 540px;
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--color-main-background) 90%, var(--color-background-dark) 10%);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
#chd-admin-root .chd-qapp-frame {
|
|
display: block;
|
|
width: 100%;
|
|
height: min(76vh, 980px);
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
#chd-admin-root .chd-loading-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.18);
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#chd-admin-root .chd-loading-card {
|
|
width: min(420px, calc(100% - 24px));
|
|
padding: 14px 16px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
background: rgba(14, 18, 26, 0.9);
|
|
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
|
|
color: #f4f7fb;
|
|
text-align: center;
|
|
}
|
|
|
|
#chd-admin-root .chd-loading-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
#chd-admin-root .chd-loading-status {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #8bd9ff;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#chd-admin-root .chd-loading-progress-track {
|
|
width: 100%;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.14);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#chd-admin-root .chd-loading-progress-bar {
|
|
height: 100%;
|
|
width: 0%;
|
|
background: linear-gradient(90deg, #2fa8ff, #40e0d0);
|
|
border-radius: 999px;
|
|
transition: width 200ms ease;
|
|
}
|
|
|
|
#chd-admin-root .chd-loading-meta {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: rgba(244, 247, 251, 0.85);
|
|
min-height: 1.1em;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
#chd-admin-root {
|
|
padding: 4px 6px 18px;
|
|
}
|
|
|
|
#chd-admin-root h2 {
|
|
font-size: 26px;
|
|
}
|
|
|
|
#chd-admin-root .chd-qapp-frame-wrap {
|
|
min-height: 420px;
|
|
}
|
|
|
|
#chd-admin-root .chd-qapp-frame {
|
|
height: min(68vh, 760px);
|
|
}
|
|
|
|
#chd-admin-root .chd-field-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row,
|
|
#chd-admin-root .chd-config-row--audience,
|
|
#chd-admin-root .chd-config-row--offer {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#chd-admin-root .chd-config-row__summary,
|
|
#chd-admin-root .chd-config-row__helper {
|
|
grid-column: 1;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-item {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
#chd-admin-root .chd-ops-form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#chd-admin-root .chd-instance-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#chd-admin-root .chd-instance-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|