plexora 0.0.1__py3-none-any.whl

plexora/client/src/css/import.css

@@ -0,0 +1,474 @@
+/* Styles for the datasource import/config flow (upload.html,
+   datasource_config.html). Design tokens (--surface-*, --text-*, --space-*,
+   etc.) live in tokens.css, loaded by base.html on every page. */
+
+.import-page {
+    background: var(--surface-0);
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    min-height: 95vh;
+    padding: var(--space-6) var(--space-4);
+    width: 100%;
+}
+
+.import-page * {
+    box-sizing: border-box;
+}
+
+#upload-parent {
+    background: transparent;
+    box-shadow: none;
+    max-width: 760px;
+    padding: 0;
+    width: 100%;
+}
+
+.import-card {
+    background: linear-gradient(180deg, rgba(20, 24, 31, 0.98), rgba(10, 13, 18, 0.98));
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    color: var(--text-primary);
+    padding: var(--space-6);
+}
+
+.import-kicker {
+    color: var(--text-muted);
+    display: block;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    margin-bottom: var(--space-2);
+    text-transform: uppercase;
+}
+
+.import-card h1 {
+    color: #ffffff;
+    font-size: 22px;
+    font-weight: 700;
+    margin: 0 0 var(--space-1) 0;
+    word-break: break-word;
+}
+
+.import-subtitle,
+.config-summary {
+    color: var(--text-secondary);
+    font-size: 13px;
+    margin: 0 0 var(--space-5) 0;
+}
+
+.config-summary strong {
+    color: var(--text-primary);
+}
+
+/* Segmented source-type selector */
+.source-type-tabs {
+    background: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    display: flex;
+    gap: var(--space-1);
+    margin-bottom: var(--space-5);
+    padding: var(--space-1);
+}
+
+.source-type-tab {
+    border-radius: var(--radius-sm);
+    color: var(--text-muted);
+    cursor: pointer;
+    flex: 1;
+    font-size: 13px;
+    font-weight: 600;
+    padding: var(--space-2) var(--space-3);
+    text-align: center;
+    transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
+    user-select: none;
+}
+
+.source-type-tab:hover {
+    color: var(--text-secondary);
+}
+
+.source-type-tab.active {
+    background: var(--accent-channel-soft);
+    color: #ffffff;
+}
+
+.import-field {
+    margin-bottom: var(--space-4);
+}
+
+.import-field label,
+.config-section label {
+    color: var(--text-secondary);
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: var(--space-1);
+}
+
+.field-hint {
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 400;
+}
+
+.import-field .field-hint,
+.form-hint {
+    display: block;
+    margin-top: var(--space-1);
+}
+
+.import-page .form-control,
+.import-page .form-select {
+    background: var(--surface-1);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: 13px;
+    padding: 8px 10px;
+}
+
+.import-page .form-control::placeholder {
+    color: var(--text-muted);
+}
+
+.import-field-row {
+    display: flex;
+    gap: var(--space-2);
+    align-items: stretch;
+}
+
+.import-field-row .form-control {
+    flex: 1;
+    min-width: 0;
+}
+
+/* .browse-button lives in main.css: the requirements modal opens over the
+   viewer, which does not load this stylesheet, and a rule kept in both places
+   is a rule that drifts. */
+
+.import-page .form-control[readonly] {
+    color: var(--text-muted);
+    cursor: not-allowed;
+}
+
+.import-page .form-control:focus,
+.import-page .form-select:focus {
+    background: var(--surface-1);
+    border-color: var(--accent-channel);
+    box-shadow: 0 0 0 3px var(--accent-channel-soft);
+    color: var(--text-primary);
+    outline: none;
+}
+
+.import-page .form-control.is-valid {
+    border-color: var(--accent-success);
+}
+
+.import-page .form-control.is-invalid {
+    border-color: var(--accent-danger);
+}
+
+.import-page select[multiple] {
+    padding: var(--space-2);
+}
+
+.import-actions {
+    display: flex;
+    gap: var(--space-2);
+    justify-content: flex-end;
+    margin-top: var(--space-5);
+}
+
+.import-page .btn {
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+    font-weight: 600;
+    padding: 8px 18px;
+}
+
+.import-page .btn-primary {
+    background: var(--accent-channel);
+    border: none;
+    color: #05070a;
+}
+
+.import-page .btn-primary:hover,
+.import-page .btn-primary:focus {
+    background: #5cc9fb;
+    color: #05070a;
+}
+
+.import-page .btn-primary:disabled {
+    background: var(--surface-2);
+    color: var(--text-muted);
+}
+
+.import-page .btn-secondary {
+    background: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+}
+
+.import-page .btn-secondary:hover {
+    background: var(--surface-2);
+    border-color: var(--border-strong);
+    color: #ffffff;
+}
+
+.import-alert {
+    background: var(--accent-danger-soft);
+    border: 1px solid rgba(248, 113, 113, 0.4);
+    border-radius: var(--radius-md);
+    color: #fecaca;
+    font-size: 13px;
+    margin-bottom: var(--space-4);
+    padding: var(--space-3) var(--space-4);
+}
+
+.subset-warning {
+    background: var(--accent-warning-soft);
+    border: 1px solid rgba(243, 184, 69, 0.4);
+    border-radius: var(--radius-md);
+    color: #fde68a;
+    font-size: 12px;
+    margin-top: var(--space-2);
+    padding: var(--space-3);
+}
+
+
+/* Datasource config page: compact progressive-disclosure sections --
+   related controls sit in a single wrapping row instead of stacking one
+   full-width field per line, so a section is 1-2 lines tall rather than
+   reading like a long form. */
+.config-section {
+    border-top: 1px solid var(--border-subtle);
+    margin-top: var(--space-4);
+    padding-top: var(--space-4);
+}
+
+.config-section:first-of-type {
+    border-top: none;
+    margin-top: 0;
+    padding-top: 0;
+}
+
+.config-section-title {
+    color: var(--text-primary);
+    font-size: 13px;
+    font-weight: 700;
+    margin-bottom: var(--space-2);
+}
+
+.config-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+}
+
+.config-row + .config-field {
+    margin-top: var(--space-3);
+}
+
+.config-field {
+    flex: 1 1 150px;
+    min-width: 150px;
+}
+
+.config-field label {
+    color: var(--text-muted);
+    display: block;
+    font-size: 11px;
+    font-weight: 600;
+    margin-bottom: 3px;
+}
+
+/* Single-line checkbox + label + hint row (e.g. "Log1p Transform Data"),
+   overriding Bootstrap's default .form-check (which stacks the label below
+   an absolutely-positioned, unthemed input) to match this page's compact
+   dark form styling. The hint truncates with an ellipsis rather than
+   wrapping if the row ever runs out of room, so the checkbox/label stay put. */
+/* .import-page prefix (matching .import-page .form-control above) is load
+   -bearing, not decoration: Bootstrap's own .form-check{display:block} has
+   equal specificity (one class) and is injected later in the cascade (via
+   vendor_bundle.js's style-loader <style> tag, appended after this <link>),
+   so it wins ties without the extra ancestor class -- confirmed by
+   getComputedStyle showing display:block despite this rule. */
+.import-page .config-check {
+    align-items: center;
+    background: var(--surface-1);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    display: flex;
+    gap: var(--space-2);
+    margin: 0;
+    min-height: 0;
+    padding: var(--space-2) var(--space-3);
+}
+
+.import-page .config-check .form-check-input {
+    background-color: var(--surface-2);
+    border: 1px solid var(--border-strong);
+    flex-shrink: 0;
+    margin: 0;
+    position: static;
+}
+
+.import-page .config-check .form-check-input:checked {
+    background-color: var(--accent-channel);
+    border-color: var(--accent-channel);
+}
+
+.import-page .config-check .form-check-input:focus {
+    border-color: var(--accent-channel);
+    box-shadow: 0 0 0 3px var(--accent-channel-soft);
+    outline: none;
+}
+
+.import-page .config-check .form-check-label {
+    color: var(--text-secondary);
+    flex-shrink: 0;
+    font-size: 12px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.import-page .config-check .field-hint {
+    margin: 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* ------------------------------------------------------------------ */
+/* Column classifier — the marker/metadata split                       */
+/* Two boxes side by side, columns dragged between them. Mounted by the */
+/* CSV import step, the requirements modal, and the project edit page,  */
+/* so everything here is scoped to the component rather than the page.  */
+/* ------------------------------------------------------------------ */
+
+.import-card-wide {
+    max-width: 940px;
+}
+
+.column-classifier {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-4);
+    margin-top: var(--space-5);
+}
+
+/* One column below the breakpoint: side-by-side boxes get too narrow to
+   read a marker name, and dragging vertically still works. */
+@media (max-width: 720px) {
+    .column-classifier {
+        grid-template-columns: 1fr;
+    }
+}
+
+.column-box {
+    background: var(--surface-1);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    padding: var(--space-4);
+    display: flex;
+    flex-direction: column;
+    min-height: 220px;
+}
+
+.column-box-head h2 {
+    font-size: 0.95rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: var(--text-primary);
+    margin: 0 0 var(--space-1);
+}
+
+.column-box-head .field-hint {
+    display: block;
+    margin-bottom: var(--space-3);
+}
+
+.column-roles {
+    display: grid;
+    gap: var(--space-2);
+    padding-bottom: var(--space-3);
+    margin-bottom: var(--space-3);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.column-role {
+    display: grid;
+    grid-template-columns: 1fr 1.2fr;
+    align-items: center;
+    gap: var(--space-3);
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+.column-role .form-select {
+    padding: var(--space-1) var(--space-2);
+    font-size: 0.8rem;
+}
+
+.column-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    align-content: flex-start;
+    /* Grows with the drop target so an empty box is still a target the
+       user can aim at, rather than a zero-height line. */
+    flex: 1;
+    min-height: 64px;
+}
+
+.column-chip {
+    background: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: var(--space-1) var(--space-3);
+    font-size: 0.8rem;
+    color: var(--text-primary);
+    cursor: grab;
+    user-select: none;
+    transition: border-color var(--duration-fast) var(--ease-standard),
+                background var(--duration-fast) var(--ease-standard);
+}
+
+.column-chip:hover {
+    border-color: var(--border-strong);
+    background: var(--surface-1);
+}
+
+.column-chip:active {
+    cursor: grabbing;
+}
+
+.column-chip-ghost {
+    opacity: 0.4;
+    border-style: dashed;
+    border-color: var(--accent-channel);
+}
+
+.column-box[data-group="markers"] .column-chip {
+    border-left: 3px solid var(--accent-channel-soft);
+}
+
+.column-classifier-hint {
+    margin-top: var(--space-3);
+    font-size: 0.78rem;
+    color: var(--text-muted);
+}
+
+/* A field the Tools menu sent the user here to fill in (edit page, reached
+   with ?needs=<tool> when JavaScript did not intercept the click). */
+.field-wanted {
+    border-color: var(--accent-warning) !important;
+    box-shadow: 0 0 0 3px var(--accent-warning-soft);
+}