/* Styles for the WDC Kyoto Geomagnetic Data Explorer (/hapi/plot) page */ :root { color-scheme: light; /* form controls and scrollbars follow the theme */ --fg:#222; --muted:#666; --bd:#ccc; --accent:#1f6feb; --accent-hover:#175bc4; --primary-bg:#1f6feb; --primary-hover:#175bc4; --bg:#fff; --card:#fafafa; --input-bg:#fff; --bg-soft:#eef4fb; --bg-soft-hover:#e2edfa; /* time bar, map heading */ --empty-bg:#f3f3f3; --empty-bd:#bbb; /* panels with nothing drawn */ --err:#b00020; --err-bg:#fff2f4; --ok:#0a7d28; --info:#0a5aa8; --warn:#7a5a00; --th-bg:#f4f6f8; --badge-fg:#7a5a00; --badge-bg:#fdf1d5; --badge-bd:#e2c98a; --cau-bg:#fdf6e9; --cau-fg:#4a3a1c; --cau-bd:#e0b877; --cau-accent:#d97706; --cau-head:#8a4b00; /* Data availability button: the navy of the heading it opens */ --avail-bg:#0b3d6b; --avail-hover:#0e4f89; } /* Dark mode: toggled from the button at the right of the time bar; plot.js sets . The header navy is shared, and plot.js theme() switches the colours of the figure and the map to match. */ :root[data-theme="dark"] { color-scheme: dark; --fg:#e4e4e4; --muted:#a3a3a3; --bd:#454545; --accent:#7fb2ff; --accent-hover:#a3c8ff; --primary-bg:#2b6fd6; --primary-hover:#3d81e8; --bg:#121212; --card:#1c1c1c; --input-bg:#181818; --bg-soft:#19232e; --bg-soft-hover:#22303f; --empty-bg:#181818; --empty-bd:#555; --err:#ff7b88; --err-bg:#3a1a20; --ok:#62d283; --info:#8ec0ff; --warn:#f0c674; --th-bg:#262a2e; --badge-fg:#f0c674; --badge-bg:#3a2e12; --badge-bd:#6b5420; --cau-bg:#2b2416; --cau-fg:#f1e3c8; --cau-bd:#7a5a2a; --cau-accent:#f0a030; --cau-head:#f5b860; --avail-bg:#1d5a94; --avail-hover:#2670b5; } * { box-sizing: border-box; } body { font-family: system-ui, sans-serif; color: var(--fg); background: var(--bg); margin: 0; } /* Title and server line share one row to save height (they wrap if narrow) */ header { background:#0b3d6b; color:#fff; padding:6px 16px; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; } header h1 { font-size:1.05rem; margin:0; font-weight:600; } header .sub { font-size:.78rem; opacity:.85; } /* WDC Kyoto logo (link to the top page), kept shorter than the theme button so that it does not grow the header band. */ header #wdc-home { display:flex; align-self:center; line-height:0; } /* The logo GIF has a white ground (not transparent); round it on the navy band */ header #wdc-home img { height:22px; width:auto; display:block; border-radius:3px; } /* The server line is also the way in to the /hapi landing page; keep the look */ header .sub #base { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:#fff; text-decoration:underline; text-underline-offset:2px; } header .sub #base:hover { text-decoration-thickness:2px; } /* Theme toggle, right of the title band; the band is navy, so draw it light */ header #theme-btn { margin-left:auto; align-self:center; padding:3px 11px; font-size:.78rem; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.45); border-radius:6px; } header #theme-btn:hover { background:rgba(255,255,255,.24); color:#fff; border-color:rgba(255,255,255,.8); } .wrap { padding: 14px 16px; } /* --- Shared time bar (full-width band under the header) --- Line height, padding and control heights are all tight to save vertical space. */ #topbar { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:flex-end; border-bottom:1px solid var(--bd); padding:6px 16px; background:var(--bg-soft); } #topbar .ctl { gap:1px; } #topbar label { line-height:1.25; } #topbar select, #topbar input { padding:3px 7px; } #topbar .quick button { padding:3px 8px; } #topbar label.chk { padding:2px 0; } .ctl { display:flex; flex-direction:column; gap:4px; } .ctl.grow { flex:1; } .ctl label { font-size:.75rem; color:var(--muted); } /* Facet values that the current filter leaves unselectable */ .ctl-off { opacity:.45; } .ctl-off select { cursor:not-allowed; } select, input[type=text], input[type=number], input[type=datetime-local] { padding:6px 8px; border:1px solid var(--bd); border-radius:5px; font-size:.9rem; background:var(--input-bg); color:var(--fg); } /* Seconds are shown (step=1), so the field grows with its content instead of cutting digits; 215px acts as a lower bound only. */ input[type=datetime-local] { width: auto; min-width: 215px; } /* Values outside min/max (typing can still produce them) get a red border */ input[type=datetime-local]:invalid { border-color:var(--err); background:var(--err-bg); } button { padding:7px 14px; border:1px solid var(--bd); border-radius:6px; background:var(--input-bg); color:var(--fg); font-size:.85rem; cursor:pointer; } button:hover { border-color:var(--accent); color:var(--accent); } button.primary { background:var(--primary-bg); border-color:var(--primary-bg); color:#fff; font-size:.95rem; padding:8px 22px; } button.primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; } button:disabled { opacity:.45; cursor:default; pointer-events:none; } .quick { display:flex; gap:6px; flex-wrap:wrap; } .quick button { padding:5px 9px; font-size:.8rem; } .dl-all-note { font-size:.95em; } label.chk { display:flex; align-items:center; gap:5px; font-size:.85rem; color:var(--fg); padding:6px 0; cursor:pointer; } /* --- Panel cards --- */ #panels { display:flex; flex-direction:column; gap:10px; margin-top:12px; } .panel-card { border:1px solid var(--bd); border-left:5px solid var(--accent); border-radius:8px; padding:10px 12px; background:var(--card); } .panel-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .panel-title { font-weight:600; font-size:.9rem; } .panel-head .spacer { flex:1; } .panel-close { border:0; background:transparent; font-size:1.1rem; line-height:1; color:var(--muted); padding:2px 8px; } .panel-close:hover { color:var(--err); } .panel-up, .panel-down { padding:2px 9px; font-size:.8rem; color:var(--muted); } .panel-row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:6px 0; } /* display:flex beats the UA [hidden]{display:none}, so hide it explicitly (the baseline row is hidden on datasets it does not apply to) */ .panel-row[hidden] { display:none; } .facets select { font-size:.8rem; padding:4px 6px; } .ds-select { min-width:340px; max-width:100%; } .params { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; max-width:760px; } .params label { font-size:.85rem; display:flex; align-items:center; gap:4px; } /* Components with no value in the shown range (not selectable) */ .params label.off { opacity:.4; } .params label.off, .params input:disabled { cursor:not-allowed; } .params .mini { padding:2px 8px; font-size:.72rem; } /* Datasets that show one component at a time use radios; spaced a little wider so they are not taken for check boxes. */ .params.single { gap:8px 18px; } .panel-note { font-size:.8rem; color:var(--err); min-height:1em; } /* Note for a default component swapped out by a change in reported components */ .panel-auto { font-size:.78rem; color:var(--info); } /* Panels missing from the figure. The card stays, so the reason is visible and the panel returns when the range does. */ .panel-card.empty { border-left-color:var(--empty-bd); background:var(--empty-bg); } .panel-badge { font-size:.68rem; font-weight:600; letter-spacing:.02em; color:var(--badge-fg); background:var(--badge-bg); border:1px solid var(--badge-bd); border-radius:10px; padding:1px 8px; } /* Dataset info panel (toggled by the info button) */ .panel-info { padding:2px 9px; font-size:.75rem; color:var(--muted); } .panel-info.on { color:var(--accent); border-color:var(--accent); } .ds-info { border:1px solid var(--bd); border-radius:5px; background:var(--input-bg); padding:10px 12px; margin:6px 0; font-size:.78rem; overflow-x:auto; } .ds-info .ds-desc { margin:0 0 8px; line-height:1.5; } .ds-info table { border-collapse:collapse; margin:0 0 8px; } .ds-info th, .ds-info td { border:1px solid var(--bd); padding:3px 7px; text-align:left; vertical-align:top; } .ds-info .ds-meta th { width:8em; white-space:nowrap; background:var(--th-bg); font-weight:600; } .ds-info .ds-meta td { max-width:60ch; } .ds-info .ds-params { width:100%; } .ds-info .ds-params thead th { background:var(--th-bg); white-space:nowrap; } .ds-info .note { margin:0; font-size:.72rem; color:var(--muted); } /* Footnote for the dagger (magnetic latitude is computed in the page and is not part of /info). On its own line, away from the Raw response link. */ .ds-info .mag-note { display:inline-block; margin-top:3px; line-height:1.45; } /* Always-on notes: the caveat for WDC Kyoto monitor stations (sec_kyo_*) and the source of external data. Not behind a toggle - values read as absolute, or as WDC data, would be wrong by more than a detail. */ .ds-caution { border:1px solid var(--cau-bd); border-left:4px solid var(--cau-accent); border-radius:5px; background:var(--cau-bg); color:var(--cau-fg); padding:8px 12px; margin:6px 0; font-size:.78rem; } .ds-caution .cau-head { margin:0 0 5px; font-weight:700; color:var(--cau-head); } .ds-caution ul { margin:0; padding-left:1.2em; } .ds-caution li { margin:2px 0; line-height:1.45; } .ds-caution .cau-more { margin:6px 0 0; font-size:.72rem; } .ds-caution code { font-size:.95em; } /* Filter (collapsible) */ details.filter { margin:4px 0; } details.filter summary { font-size:.8rem; color:var(--muted); cursor:pointer; user-select:none; } details.filter[open] summary { color:var(--fg); } .filter-body { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:8px 0 2px 14px; } .filter-body input[type=number] { width:110px; } .filter-active { color:var(--accent); font-weight:600; } /* Download */ .dl { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .dl .dl-label { font-size:.75rem; color:var(--muted); } .dl button { padding:5px 12px; font-size:.8rem; } .dl .note { font-size:.72rem; color:var(--muted); } /* Baseline removal (per panel); the mode field greys out while unchecked. The row appears only on panels that draw a magnetic field. */ .panel-row.baseline { align-items:flex-end; } .panel-row.baseline .bl-mode { font-size:.8rem; padding:3px 7px; } .panel-row.baseline .bl-mode:disabled { opacity:.5; } /* --- API code snippets (the same request from other tools) --- */ details.code { margin:4px 0; } details.code summary { font-size:.8rem; color:var(--muted); cursor:pointer; user-select:none; } details.code[open] summary { color:var(--fg); } .code-body { padding:6px 0 2px 14px; } .code-tabs { display:flex; gap:4px; margin-bottom:5px; } .code-tab { padding:2px 10px; font-size:.75rem; } .code-tab.on { color:#fff; background:var(--primary-bg); border-color:var(--primary-bg); } .code-tab.on:hover { color:#fff; background:var(--primary-hover); border-color:var(--primary-hover); } /* Long URLs scroll rather than wrap, so a copied URL is never cut in two */ .code-txt { margin:0; padding:8px 10px; border:1px solid var(--bd); border-radius:5px; background:var(--input-bg); color:var(--fg); font-size:.74rem; line-height:1.45; overflow-x:auto; white-space:pre; max-height:19em; overflow-y:auto; } .code-foot { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:5px; } .code-copy { padding:3px 12px; font-size:.75rem; } .code-foot .hint { font-size:.72rem; color:var(--muted); } /* --- Observatory picker (map / latitude-longitude box) --- */ #picker { margin-top:12px; border:1px solid var(--bd); border-radius:8px; background:var(--input-bg); } /* Colour and background so the collapsed header still reads as clickable */ #picker > summary { padding:10px 12px; font-size:.9rem; cursor:pointer; user-select:none; color:var(--accent); background:var(--bg-soft); border-radius:7px; } #picker > summary:hover { background:var(--bg-soft-hover); } #picker[open] > summary { border-bottom:1px solid var(--bd); border-radius:7px 7px 0 0; } #picker .pk-icon { vertical-align:-2px; margin-right:5px; } #picker .pk-sub { color:var(--muted); font-size:.8rem; } .picker-body { padding:0 8px 8px; } .picker-body .panel-row { margin:6px 0; } /* The cadence selector grows to its longest option, so let it flex but keep a lower bound - below it the option text is cut off mid-word. Rows wrap. */ .picker-body .panel-row .ctl { min-width:0; } .picker-body .ctl.grow { flex:1 1 220px; } .picker-body .ctl.grow select { width:100%; } /* Selecting (All with data / Clear selection) and adding sit in one group, wrapping inside the group when the width runs out. */ .picker-body .ctl.sel { flex:1 1 auto; } .picker-body .ctl.sel .quick button.primary { padding:6px 16px; font-size:.88rem; } .picker-body input[type=number] { width:98px; } /* A global equirectangular map is exactly 2:1, so a 2:1 frame leaves no empty margin around it. The frame sets the height, not plotly: mapLayout() carries no layout.height and draws responsively. */ /* The map fills the frame. Its height is capped by capping the *width* (680px = 340x2): capping the height would leave a 2:1 map with empty sides in a wider frame. Leftover width is shared evenly on both sides. */ #map { width:calc(100% + 16px); max-width:680px; aspect-ratio:2 / 1; min-height:190px; margin-inline:max(-8px, calc((100% - 680px) / 2)); } #sel-hint { margin:4px 2px 0; } /* Collapsed by default; picking on the map is the main path */ .picker-body details.latlon, .picker-body details.maphelp { margin:4px 0; } .picker-body details.latlon > summary, .picker-body details.maphelp > summary { font-size:.8rem; color:var(--muted); cursor:pointer; user-select:none; } .picker-body details.latlon[open] > summary, .picker-body details.maphelp[open] > summary { color:var(--fg); } #skip-hint:not(:empty) { color:var(--warn); } /* --- Add button, status, plot --- */ /* "+ Add panel" is a primary action, so it gets a solid button: a dashed grey outline reads as a drop target rather than something to press. */ #add-panel { margin-top:10px; width:100%; padding:9px; font-size:.95rem; font-weight:600; color:#fff; background:var(--primary-bg); border-color:var(--primary-bg); } #add-panel:hover { background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; } /* Fetch status and errors (in the plot toolbar); takes no space when empty */ #status { font-size:.85rem; } #status.err { color:var(--err); } #status.ok { color:var(--ok); } .hint { font-size:.75rem; color:var(--muted); margin:6px 2px; } /* Empty hints take no space. zoom-hint and skip-hint sit above the figure, so reserving a line each with min-height would push it down even when silent. #zoom-hint holds a button and never matches :empty, so plot.js hides it. */ .hint:empty, .hint[hidden] { display:none; } /* "Refetch this range", shown only while zoomed; a button inside a sentence. */ #zoom-fetch { margin-left:8px; padding:2px 10px; font-size:.75rem; color:var(--accent); border-color:var(--accent); background:var(--input-bg); } #zoom-fetch:hover { color:#fff; background:var(--accent); border-color:var(--accent); } #plot { width:100%; } a { color:var(--accent); }