Release Data Tools 0.1.0
This commit is contained in:
+911
@@ -0,0 +1,911 @@
|
||||
:root {
|
||||
--toolbox-background: #f6f7fb;
|
||||
--toolbox-surface: #ffffff;
|
||||
--toolbox-surface-soft: #eff1f7;
|
||||
--toolbox-text: #202332;
|
||||
--toolbox-muted: #656b7d;
|
||||
--toolbox-border: #d9dce7;
|
||||
--toolbox-accent: #5b4ec4;
|
||||
--toolbox-accent-hover: #493caf;
|
||||
--toolbox-accent-soft: #ece9ff;
|
||||
--toolbox-accent-contrast: #ffffff;
|
||||
--toolbox-focus: #137d75;
|
||||
--toolbox-danger: #b42342;
|
||||
--data-success: #11715c;
|
||||
--data-warning: #9a5d06;
|
||||
--data-radius: 0.82rem;
|
||||
--data-shadow: 0 1px 2px rgb(24 31 65 / 4%), 0 10px 30px rgb(24 31 65 / 3%);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
min-width: 20rem;
|
||||
min-height: 100%;
|
||||
background: var(--toolbox-background);
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 20rem;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background: var(--toolbox-background);
|
||||
color: var(--toolbox-text);
|
||||
font-family:
|
||||
Inter,
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in srgb, var(--toolbox-focus) 38%, transparent);
|
||||
}
|
||||
|
||||
.toolbox-shell__main {
|
||||
width: min(100%, 90rem);
|
||||
padding: clamp(0.75rem, 1.8vw, 1.5rem);
|
||||
}
|
||||
|
||||
.workbench {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
color: var(--toolbox-text);
|
||||
}
|
||||
|
||||
.workbench :where(h1, h2, h3),
|
||||
.help-dialog :where(h2, h3),
|
||||
.fatal h1 {
|
||||
margin: 0;
|
||||
color: var(--toolbox-text);
|
||||
font-weight: 760;
|
||||
letter-spacing: -0.027em;
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.workbench h1 {
|
||||
font-size: clamp(1.75rem, 3vw, 2.55rem);
|
||||
}
|
||||
|
||||
.workbench h2,
|
||||
.help-dialog h2 {
|
||||
font-size: clamp(1.2rem, 2vw, 1.55rem);
|
||||
}
|
||||
|
||||
.workbench h3 {
|
||||
font-size: 0.96rem;
|
||||
}
|
||||
|
||||
.workbench p,
|
||||
.workbench ul,
|
||||
.workbench ol,
|
||||
.workbench dl {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.workbench :where(button, input, select, textarea),
|
||||
.help-dialog button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.workbench button,
|
||||
.workbench .button,
|
||||
.help-dialog button {
|
||||
min-height: 2.55rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.55rem 0.8rem;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: 0.64rem;
|
||||
background: var(--toolbox-surface);
|
||||
color: var(--toolbox-text);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 720;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
transition:
|
||||
border-color 140ms ease,
|
||||
background-color 140ms ease,
|
||||
transform 140ms ease;
|
||||
}
|
||||
|
||||
.workbench button:hover:not(:disabled),
|
||||
.workbench .button:hover {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--toolbox-accent) 58%,
|
||||
var(--toolbox-border)
|
||||
);
|
||||
background: var(--toolbox-surface-soft);
|
||||
}
|
||||
|
||||
.workbench button:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.workbench button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.workbench .primary-button {
|
||||
border-color: var(--toolbox-accent);
|
||||
background: var(--toolbox-accent);
|
||||
color: var(--toolbox-accent-contrast);
|
||||
}
|
||||
|
||||
.workbench .primary-button:hover:not(:disabled) {
|
||||
border-color: var(--toolbox-accent-hover);
|
||||
background: var(--toolbox-accent-hover);
|
||||
}
|
||||
|
||||
:where(.workbench, .help-dialog)
|
||||
:where(button, input, select, textarea, summary):focus-visible,
|
||||
.table-scroll:focus-visible {
|
||||
outline: 3px solid color-mix(in srgb, var(--toolbox-focus) 42%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.workbench :where(input:not([type="checkbox"]), select, textarea) {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 2.55rem;
|
||||
padding: 0.58rem 0.7rem;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: 0.62rem;
|
||||
background: var(--toolbox-surface);
|
||||
color: var(--toolbox-text);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.workbench textarea {
|
||||
resize: vertical;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: 0.84rem;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.workbench input[aria-invalid="true"] {
|
||||
border-color: var(--toolbox-danger);
|
||||
}
|
||||
|
||||
.hero,
|
||||
.panel {
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: var(--data-radius);
|
||||
background: var(--toolbox-surface);
|
||||
box-shadow: var(--data-shadow);
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: clamp(1.1rem, 3vw, 2rem);
|
||||
}
|
||||
|
||||
.hero p:not(.eyebrow) {
|
||||
max-width: 55rem;
|
||||
margin-top: 0.55rem;
|
||||
color: var(--toolbox-muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 0.3rem !important;
|
||||
color: var(--toolbox-accent);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 820;
|
||||
letter-spacing: 0.115em;
|
||||
line-height: 1.35;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.privacy-pill,
|
||||
.count-pill {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.38rem 0.64rem;
|
||||
border-radius: 999px;
|
||||
background: var(--toolbox-accent-soft);
|
||||
color: var(--toolbox-accent);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 780;
|
||||
}
|
||||
|
||||
.panel {
|
||||
min-width: 0;
|
||||
padding: clamp(0.9rem, 2vw, 1.2rem);
|
||||
}
|
||||
|
||||
.panel-heading,
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(11rem, 1fr) auto auto auto;
|
||||
align-items: end;
|
||||
gap: 0.55rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.34rem;
|
||||
}
|
||||
|
||||
.field > span,
|
||||
.field-label {
|
||||
font-size: 0.76rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.field small,
|
||||
.toggle small {
|
||||
color: var(--toolbox-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.source-field textarea {
|
||||
min-height: clamp(12rem, 26vh, 21rem);
|
||||
}
|
||||
|
||||
.output-field textarea {
|
||||
min-height: 18rem;
|
||||
}
|
||||
|
||||
.file-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-button input {
|
||||
position: absolute;
|
||||
width: 1px !important;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.34rem 0.55rem;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: 999px;
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.69rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-badge span {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.status-badge[data-status="ready"] {
|
||||
color: var(--data-success);
|
||||
}
|
||||
|
||||
.status-badge[data-status="error"] {
|
||||
color: var(--toolbox-danger);
|
||||
}
|
||||
|
||||
.status-badge[data-status="pending"] {
|
||||
color: var(--toolbox-accent);
|
||||
}
|
||||
|
||||
.status-badge[data-status="pending"] span {
|
||||
animation: status-pulse 900ms ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes status-pulse {
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
.status-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 0.55rem;
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.status-line p:first-child {
|
||||
color: var(--toolbox-text);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.workspace-tabs {
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
padding: 0.1rem 0 0.15rem;
|
||||
}
|
||||
|
||||
.workspace-tabs [role="tablist"] {
|
||||
min-width: max-content;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(9.5rem, 1fr));
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.workspace-tabs button {
|
||||
min-height: 3.55rem;
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
padding: 0.58rem 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.workspace-tabs button small {
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.69rem;
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
.workspace-tabs button[aria-selected="true"] {
|
||||
border-color: var(--toolbox-accent);
|
||||
background: var(--toolbox-accent);
|
||||
color: var(--toolbox-accent-contrast);
|
||||
}
|
||||
|
||||
.workspace-tabs button[aria-selected="true"] small {
|
||||
color: color-mix(in srgb, var(--toolbox-accent-contrast) 78%, transparent);
|
||||
}
|
||||
|
||||
.view-panel {
|
||||
min-height: 21rem;
|
||||
}
|
||||
|
||||
.source-dashboard {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.source-dashboard > div + div {
|
||||
padding-left: 1.25rem;
|
||||
border-left: 1px solid var(--toolbox-border);
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.stats div {
|
||||
min-width: 0;
|
||||
padding: 0.7rem;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: 0.64rem;
|
||||
background: var(--toolbox-surface-soft);
|
||||
}
|
||||
|
||||
.stats dt {
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.67rem;
|
||||
font-weight: 760;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stats dd {
|
||||
margin: 0.25rem 0 0;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.detection-reason,
|
||||
.empty-state,
|
||||
.field-help,
|
||||
.preview-note {
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.detection-reason {
|
||||
margin-top: 0.75rem !important;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 1rem;
|
||||
border: 1px dashed var(--toolbox-border);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--toolbox-surface-soft);
|
||||
}
|
||||
|
||||
.diagnostic-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.diagnostic {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 0.65rem;
|
||||
padding: 0.65rem;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-left: 3px solid var(--toolbox-muted);
|
||||
border-radius: 0.62rem;
|
||||
}
|
||||
|
||||
.diagnostic--error {
|
||||
border-left-color: var(--toolbox-danger);
|
||||
}
|
||||
.diagnostic--warning {
|
||||
border-left-color: var(--data-warning);
|
||||
}
|
||||
.diagnostic--info {
|
||||
border-left-color: var(--toolbox-accent);
|
||||
}
|
||||
|
||||
.diagnostic__severity {
|
||||
padding: 0.2rem 0.35rem;
|
||||
border-radius: 0.3rem;
|
||||
background: var(--toolbox-surface-soft);
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.61rem;
|
||||
font-weight: 820;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.diagnostic strong {
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.diagnostic p {
|
||||
margin-top: 0.18rem;
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.76rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.diagnostic small {
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.tree {
|
||||
max-height: 42rem;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--toolbox-surface-soft);
|
||||
}
|
||||
|
||||
.tree-row {
|
||||
min-width: 44rem;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(9rem, 0.75fr) auto minmax(8rem, 1fr) minmax(
|
||||
12rem,
|
||||
1fr
|
||||
);
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.38rem 0.55rem 0.38rem
|
||||
calc(0.55rem + min(var(--tree-depth), 12) * 0.9rem);
|
||||
border-bottom: 1px solid var(--toolbox-border);
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.tree-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tree-row:hover {
|
||||
background: var(--toolbox-surface);
|
||||
}
|
||||
|
||||
.tree-row__label,
|
||||
.tree-row__summary,
|
||||
.tree-row__path {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tree-row__label {
|
||||
color: var(--toolbox-text);
|
||||
font-weight: 720;
|
||||
}
|
||||
.tree-row__summary {
|
||||
color: var(--toolbox-muted);
|
||||
}
|
||||
.tree-row__path {
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.type-chip {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
padding: 0.17rem 0.35rem;
|
||||
border-radius: 0.3rem;
|
||||
background: var(--toolbox-accent-soft);
|
||||
color: var(--toolbox-accent);
|
||||
font-size: 0.62rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.type-chip--string {
|
||||
color: var(--data-success);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--data-success) 11%,
|
||||
var(--toolbox-surface)
|
||||
);
|
||||
}
|
||||
.type-chip--number {
|
||||
color: #9a4f10;
|
||||
background: color-mix(in srgb, #c96814 12%, var(--toolbox-surface));
|
||||
}
|
||||
.type-chip--boolean {
|
||||
color: #235cb0;
|
||||
background: color-mix(in srgb, #3478cf 12%, var(--toolbox-surface));
|
||||
}
|
||||
.type-chip--null {
|
||||
color: var(--toolbox-muted);
|
||||
background: var(--toolbox-surface-soft);
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
max-height: 38rem;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: 0.65rem;
|
||||
}
|
||||
|
||||
.table-scroll table {
|
||||
min-width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.77rem;
|
||||
}
|
||||
|
||||
.table-scroll :where(th, td) {
|
||||
max-width: 24rem;
|
||||
padding: 0.52rem 0.62rem;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--toolbox-border);
|
||||
border-bottom: 1px solid var(--toolbox-border);
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-scroll th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
background: var(--toolbox-surface-soft);
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.table-scroll tr:hover td {
|
||||
background: var(--toolbox-surface-soft);
|
||||
}
|
||||
.table-scroll :where(th, td):last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.preview-note {
|
||||
padding: 0.65rem;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
color: var(--toolbox-text);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle input {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
flex: 0 0 auto;
|
||||
accent-color: var(--toolbox-accent);
|
||||
}
|
||||
|
||||
.toggle > span {
|
||||
display: grid;
|
||||
gap: 0.08rem;
|
||||
}
|
||||
|
||||
.flatten-panel {
|
||||
margin-top: 0.85rem;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: 0.65rem;
|
||||
}
|
||||
|
||||
.flatten-panel summary {
|
||||
padding: 0.72rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 740;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flatten-panel .table-scroll {
|
||||
margin: 0 0.7rem 0.7rem;
|
||||
}
|
||||
|
||||
.query-controls,
|
||||
.conversion-controls {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.query-controls {
|
||||
grid-template-columns: minmax(12rem, 0.45fr) minmax(14rem, 1fr);
|
||||
}
|
||||
.conversion-controls {
|
||||
grid-template-columns: minmax(12rem, 0.4fr) minmax(15rem, 1fr);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.field-help {
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
.field-error {
|
||||
margin: 0.6rem 0 !important;
|
||||
color: var(--toolbox-danger);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.query-results {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 740;
|
||||
}
|
||||
|
||||
.query-results ol {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.query-results li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(9rem, 0.6fr) auto minmax(9rem, 1fr);
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.52rem 0.6rem;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: 0.55rem;
|
||||
font-size: 0.77rem;
|
||||
}
|
||||
|
||||
.query-results li > :last-child {
|
||||
overflow: hidden;
|
||||
color: var(--toolbox-muted);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.disclosure {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--toolbox-surface-soft);
|
||||
}
|
||||
|
||||
.disclosure--clean {
|
||||
color: var(--data-success);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.disclosure ul {
|
||||
display: grid;
|
||||
gap: 0.38rem;
|
||||
margin-top: 0.55rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.loss-event {
|
||||
display: grid;
|
||||
grid-template-columns: 5.2rem minmax(0, 1fr) minmax(7rem, auto);
|
||||
gap: 0.55rem;
|
||||
padding: 0.48rem 0.55rem;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--toolbox-surface);
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.loss-event strong {
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.64rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.loss-event--loss strong {
|
||||
color: var(--toolbox-danger);
|
||||
}
|
||||
.loss-event--coercion strong {
|
||||
color: var(--data-warning);
|
||||
}
|
||||
.loss-event code {
|
||||
overflow: hidden;
|
||||
color: var(--toolbox-muted);
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.action-notice {
|
||||
min-height: 1.2rem;
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.fatal {
|
||||
width: min(100% - 2rem, 60rem);
|
||||
margin: 2rem auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.help-dialog {
|
||||
width: min(36rem, calc(100% - 2rem));
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: 0.9rem;
|
||||
background: var(--toolbox-surface);
|
||||
color: var(--toolbox-text);
|
||||
}
|
||||
|
||||
.help-dialog::backdrop {
|
||||
background: rgb(20 24 45 / 55%);
|
||||
}
|
||||
.dialog-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
.help-dialog p {
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
@media (max-width: 54rem) {
|
||||
.editor-toolbar {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.source-dashboard {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.source-dashboard > div + div {
|
||||
padding: 1rem 0 0;
|
||||
border-top: 1px solid var(--toolbox-border);
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 42rem) {
|
||||
.hero {
|
||||
flex-direction: column;
|
||||
}
|
||||
.privacy-pill {
|
||||
order: -1;
|
||||
}
|
||||
.editor-toolbar,
|
||||
.query-controls,
|
||||
.conversion-controls {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.editor-toolbar > :not(.format-field) {
|
||||
width: 100%;
|
||||
}
|
||||
.status-line {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.panel-heading,
|
||||
.section-heading {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.section-heading:has(.toggle) {
|
||||
flex-direction: column;
|
||||
}
|
||||
.stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.query-results li {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
.query-results li > :last-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.loss-event {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
.loss-event code {
|
||||
grid-column: 1 / -1;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user