/** * styles_volcano.css — sCAFfold volcano plot styles * * Add to on any page that embeds the volcano plot: * * * Relies on CSS variables defined in styles_global.css. */ /* ============================================================ OUTER WRAPPER ============================================================ */ .sc-volcano-wrap { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 16px rgba(13, 42, 74, 0.08); border-top: 3px solid var(--sc-orange); padding: 28px 28px 36px; margin-top: 32px; } .sc-volcano-wrap__title { font-family: var(--sc-font); font-size: 17px; font-weight: 700; color: var(--sc-blue-mid); margin: 0 0 20px; display: flex; align-items: center; gap: 10px; } .sc-volcano-wrap__title::after { content: ''; flex: 1; height: 1px; background: rgba(26, 74, 122, 0.12); } /* ============================================================ CONTROLS BAR ============================================================ */ .sc-volcano__controls { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(26, 74, 122, 0.10); } .sc-volcano__ctrl-label { font-family: var(--sc-font); font-size: 13px; font-weight: 600; color: var(--sc-text-mid); display: flex; align-items: center; gap: 7px; white-space: nowrap; } .sc-volcano__ctrl-input { font-family: var(--sc-font); font-size: 13px; width: 64px; padding: 5px 8px; border: 1.5px solid rgba(26, 74, 122, 0.25); border-radius: 5px; color: var(--sc-text-dark); outline: none; transition: border-color 0.2s; } .sc-volcano__ctrl-input:focus { border-color: var(--sc-blue-mid); } /* Download buttons */ .sc-volcano__dl-btn { font-family: var(--sc-font); font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 6px; border: 1.5px solid var(--sc-blue-mid); background: transparent; color: var(--sc-blue-mid); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.15s; white-space: nowrap; margin-left: auto; /* push DL buttons to the right */ } .sc-volcano__dl-btn:first-of-type { margin-left: auto; } .sc-volcano__dl-btn + .sc-volcano__dl-btn { margin-left: 0; } .sc-volcano__dl-btn:hover { background: var(--sc-blue-mid); color: #ffffff; transform: translateY(-1px); } /* ============================================================ SVG / PLOT AREA ============================================================ */ .sc-volcano__svg { display: block; width: 100%; overflow: visible; } /* Grid lines */ .sc-volcano__grid line { stroke: rgba(26, 74, 122, 0.07); stroke-dasharray: 3 3; } .sc-volcano__grid .domain { display: none; } /* Threshold lines */ .sc-volcano__threshold-line { stroke: #90a4ae; stroke-width: 1.2; stroke-dasharray: 5 4; } /* Axes */ .sc-volcano__axis path, .sc-volcano__axis line { stroke: rgba(26, 74, 122, 0.25); } .sc-volcano__axis text { font-family: var(--sc-font); font-size: 11px; fill: var(--sc-text-mid); } /* Axis labels */ .sc-volcano__axis-label { font-family: var(--sc-font); font-size: 12px; font-weight: 600; fill: var(--sc-text-mid); } /* Auto-labels for top points */ .sc-volcano__auto-label { font-family: var(--sc-font); font-size: 10px; font-weight: 600; fill: var(--sc-text-dark); pointer-events: none; paint-order: stroke; stroke: #ffffff; stroke-width: 3px; stroke-linejoin: round; } /* Highlight label */ .sc-volcano__hl-label { font-family: var(--sc-font); font-size: 11px; font-weight: 700; fill: var(--sc-orange); pointer-events: none; paint-order: stroke; stroke: #ffffff; stroke-width: 3px; stroke-linejoin: round; } /* Legend */ .sc-volcano__legend text, .sc-volcano__legend-text { font-family: var(--sc-font); font-size: 11px; fill: var(--sc-text-mid); } /* Dot cursor */ .sc-volcano__dot { cursor: pointer; transition: r 0.1s; } /* ============================================================ TOOLTIP ============================================================ */ #sc-volcano-tooltip { display: none; position: fixed; z-index: 9999; background: #ffffff; border: 1.5px solid rgba(26, 74, 122, 0.18); border-radius: 8px; box-shadow: 0 6px 24px rgba(13, 42, 74, 0.16); padding: 10px 14px; pointer-events: none; min-width: 150px; border-top: 3px solid var(--sc-orange); } #sc-volcano-tooltip.is-visible { display: flex; flex-direction: column; gap: 4px; } .sc-volcano__tip-name { font-family: var(--sc-font); font-size: 14px; font-weight: 700; color: var(--sc-blue-mid); display: block; margin-bottom: 2px; } .sc-volcano__tip-row { font-family: var(--sc-font); font-size: 12px; color: var(--sc-text-mid); display: block; } .sc-volcano__tip-row em { font-style: normal; font-weight: 600; color: var(--sc-text-dark); } .sc-volcano__tip-badge { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 9px; text-align: center; } .sc-volcano__tip-badge--up { background: rgba(192, 57, 43, 0.10); color: #c0392b; border: 1px solid rgba(192, 57, 43, 0.25); } .sc-volcano__tip-badge--down { background: rgba(26, 74, 122, 0.10); color: var(--sc-blue-mid); border: 1px solid rgba(26, 74, 122, 0.25); } .sc-volcano__tip-badge--ns, .sc-volcano__tip-badge--sig_fc, .sc-volcano__tip-badge--sig_p { background: rgba(144, 164, 174, 0.12); color: #607d8b; border: 1px solid rgba(144, 164, 174, 0.3); } /* ============================================================ TABLE ============================================================ */ #sc-volcano-table-container { margin-top: 32px; } .sc-volcano__table-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .sc-volcano__table-title { font-family: var(--sc-font); font-size: 15px; font-weight: 700; color: var(--sc-blue-mid); } .sc-volcano__search-row { display: flex; align-items: center; gap: 0; border: 1.5px solid rgba(26, 74, 122, 0.25); border-radius: 6px; overflow: hidden; background: #fff; transition: border-color 0.2s; } .sc-volcano__search-row:focus-within { border-color: var(--sc-blue-mid); } .sc-volcano__search-input { font-family: var(--sc-font); font-size: 13px; border: none; outline: none; padding: 7px 12px; width: 220px; color: var(--sc-text-dark); background: transparent; } .sc-volcano__search-clear { font-size: 12px; padding: 7px 10px; border: none; background: transparent; color: #90a4ae; cursor: pointer; line-height: 1; transition: color 0.15s; } .sc-volcano__search-clear:hover { color: var(--sc-orange); } /* Scrollable table container */ .sc-volcano__table-wrap { max-height: 340px; overflow-y: auto; border: 1px solid rgba(26, 74, 122, 0.12); border-radius: 8px; } /* Scrollbar styling */ .sc-volcano__table-wrap::-webkit-scrollbar { width: 6px; } .sc-volcano__table-wrap::-webkit-scrollbar-track { background: #f4f7fb; } .sc-volcano__table-wrap::-webkit-scrollbar-thumb { background: rgba(26, 74, 122, 0.25); border-radius: 3px; } .sc-volcano__table { width: 100%; border-collapse: collapse; font-family: var(--sc-font); font-size: 13px; } .sc-volcano__table thead { position: sticky; top: 0; z-index: 2; } .sc-volcano__table thead th { background: var(--sc-blue-mid); color: #ffffff; font-weight: 600; padding: 10px 14px; text-align: left; white-space: nowrap; } .sc-volcano__table thead th.sortable { cursor: pointer; user-select: none; } .sc-volcano__table thead th.sortable:hover { background: var(--sc-blue-light); } .sc-volcano__table thead th .sort-icon { opacity: 0.65; font-size: 11px; margin-left: 4px; } .sc-volcano__table tbody tr { cursor: pointer; transition: background 0.12s; border-bottom: 1px solid rgba(26, 74, 122, 0.07); } .sc-volcano__table tbody tr:hover { background: var(--sc-bg-light); } .sc-volcano__table tbody td { padding: 8px 14px; color: var(--sc-text-dark); } /* Highlighted row (from search/click) */ .sc-volcano__table-row--hl { background: rgba(224, 120, 32, 0.10) !important; outline: 1.5px solid rgba(224, 120, 32, 0.40); outline-offset: -1px; } /* Regulation badges in table */ .sc-volcano__reg { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 9px; white-space: nowrap; } .sc-volcano__reg--up { background: rgba(192, 57, 43, 0.10); color: #c0392b; } .sc-volcano__reg--down { background: rgba(26, 74, 122, 0.10); color: var(--sc-blue-mid); } .sc-volcano__reg--ns { background: rgba(144, 164, 174, 0.12); color: #607d8b; } .sc-volcano__table-count { font-family: var(--sc-font); font-size: 12px; color: #90a4ae; margin-top: 8px; text-align: right; } /* ============================================================ LOADING / ERROR STATES ============================================================ */ .sc-volcano__loading { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 60px 20px; font-family: var(--sc-font); font-size: 14px; color: var(--sc-text-mid); } .sc-volcano__spinner { width: 24px; height: 24px; border: 3px solid rgba(26, 74, 122, 0.15); border-top-color: var(--sc-blue-mid); border-radius: 50%; animation: sc-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes sc-spin { to { transform: rotate(360deg); } } .sc-volcano__error { font-family: var(--sc-font); font-size: 14px; color: #c0392b; padding: 24px; background: rgba(192, 57, 43, 0.06); border-radius: 8px; border-left: 3px solid #c0392b; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 700px) { .sc-volcano-wrap { padding: 18px 14px 28px; } .sc-volcano__controls { gap: 12px; } .sc-volcano__dl-btn:first-of-type { margin-left: 0; } .sc-volcano__search-input { width: 150px; } .sc-volcano__table-wrap { max-height: 260px; } } /* ============================================================ WIDE LAYOUT — when volcano section is visible, break out of the 900px formfield constraint and split plot / table side by side ============================================================ */ /* Widen the card when the volcano section is showing */ #formfield:has(#volcano-section:not(.hidden)) { max-width: 1400px; } /* Two-column layout inside the volcano wrap */ .sc-volcano-wrap { display: grid; grid-template-columns: 1fr; /* default: single column (before file loaded) */ gap: 0; } .sc-volcano-wrap__title { grid-column: 1 / -1; /* title always spans full width */ } .sc-volcano__controls { grid-column: 1 / -1; /* controls span full width too */ } /* Once content is loaded, the inner div gets two children: #sc-volcano-plot and #sc-volcano-table-container. We target the direct wrapper that volcano.js injects. */ .sc-volcano__body { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; } /* Table column: fixed height with internal scroll so it matches plot height */ .sc-volcano__body #sc-volcano-table-container { margin-top: 0; position: sticky; top: 110px; /* clear the navbar */ } .sc-volcano__body .sc-volcano__table-wrap { max-height: 480px; } @media (max-width: 1000px) { .sc-volcano__body { grid-template-columns: 1fr; } .sc-volcano__body #sc-volcano-table-container { position: static; } #formfield:has(#volcano-section:not(.hidden)) { max-width: 900px; } } /* ── Method name side labels ──────────────────────────────── */ .sc-volcano__side-label { font-family: var(--sc-font); font-size: 11px; font-weight: 700; fill: #607d8b; } .sc-volcano__side-label--right { fill: #c0392b; /* matches up/right colour */ } .sc-volcano__side-label--left { fill: #1a4a7a; /* matches down/left colour */ } /* ── Redraw button ─────────────────────────────────────────── */ .sc-volcano__redraw-btn { font-family: var(--sc-font); font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 6px; border: none; background: var(--sc-orange); color: #ffffff; cursor: pointer; transition: background 0.2s, transform 0.15s; white-space: nowrap; } .sc-volcano__redraw-btn:hover { background: var(--sc-orange-hover); transform: translateY(-1px); } /* ── Regulation filter buttons (All / Up / Down) ─────────── */ .sc-volcano__reg-filter { display: flex; gap: 6px; margin-bottom: 10px; } .sc-volcano__reg-btn { font-family: var(--sc-font); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; border: 1.5px solid rgba(26, 74, 122, 0.20); background: transparent; color: var(--sc-text-mid); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .sc-volcano__reg-btn:hover { border-color: var(--sc-blue-mid); color: var(--sc-blue-mid); } /* Active state — neutral (All) */ .sc-volcano__reg-btn--active { background: var(--sc-blue-mid); color: #ffffff; border-color: var(--sc-blue-mid); } /* Up button active */ .sc-volcano__reg-btn--up.sc-volcano__reg-btn--active { background: #c0392b; border-color: #c0392b; color: #ffffff; } /* Down button active */ .sc-volcano__reg-btn--down.sc-volcano__reg-btn--active { background: var(--sc-blue-mid); border-color: var(--sc-blue-mid); color: #ffffff; }