@charset "UTF-8"; /*======================================================================* * — the map element's own styles. * * Loaded by the page (``), * or injected as a by mxw-map.js when a page has not declared it, * so dropping in the script alone still works. * * In @layer mxw.map, under `theme` and `site` in the order m:head-layers * declares, so a page restyles it by saying anything at all. Knobs: * * --mxw-map-height the box the map draws into (default 400px) * * The declaration is the load-bearing part, not the layer. Unlayered — * which is how these rules reached the page while they were a string * inside mxw-map.js — the sheet beats everything a page can say back, * whatever its specificity. That is what happened to nacelles /flight/, * whose sheet asks for block-size: auto so the map can take the * instrument panel's height: layered, it lost to the 400px below and the * map stood 80px too tall. But an unknown layer name is appended AFTER * the declared ones, so a page that names no order gets the same defeat * by another route. Declare the order (MoXoW does, inline and first). *======================================================================*/ @layer mxw.map { /* The default box. OpenLayers needs a definite one to draw into: with block-size: auto the element measures 0 and the canvas never appears, so this is a default that has to exist rather than a preference. A page that gives it a size some other way (an aspect-ratio, a grid track) has to say block-size: auto here too. */ mxw-map { display: block; position: relative; /* containing block for the info label below */ inline-size: 100%; block-size: var(--mxw-map-height, 400px); } /* The hover info label ([info]): the hovered feature's name in a small plaque over the map's bottom inline-start corner, above the OL attribution. The leading mark is drawn here (a lowercase i in a ring) so the component owes nothing to an icon font. Knobs: --mxw-map-label-background, --mxw-map-label-color. */ mxw-map > .mxw-map-info { position: absolute; inset-block-end: 0.5em; inset-inline-start: 0.5em; z-index: 1; /* above .ol-viewport */ max-inline-size: calc(100% - 1em); padding: 0.2em 0.6em; font-size: 0.85em; line-height: 1.5; color: var(--mxw-map-label-color, #1a1a1a); background: var(--mxw-map-label-background, rgb(255 255 255 / 0.8)); border-radius: 0.4em; pointer-events: none; /* never steal the map's pointer */ &::before { content: "i"; display: inline-block; inline-size: 1.2em; margin-inline-end: 0.4em; font-style: italic; font-weight: 700; text-align: center; border: 1px solid currentColor; border-radius: 50%; } } /* The div the lightbox holds while the map renders into it. It was two inline style writes in the script; a class is one line here and one there, and a page can size the lightbox map without editing javascript. */ .mxw-map-lightbox-canvas { inline-size: 100%; block-size: 100%; } /* Over a feature that answers to the pointer. The script toggles the state; what it looks like is this sheet's business, and cursor_hover in the options still names the cursor. */ mxw-map.is-over-feature, mxw-map .ol-viewport.is-over-feature { cursor: var(--mxw-map-feature-cursor, pointer); } /* A zoom-locked view pins min == max, so the OL +/- buttons would render but do nothing. [lock=""] and [lock="lock"] are the bare boolean forms, meaning lock everything. */ mxw-map[lock~="zoom"], mxw-map[lock~="all"], mxw-map[lock=""], mxw-map[lock="lock"] { & .ol-zoom { display: none; } } /*== Country info panel ==============================================* * Opt-in, via the country-info attribute: a Popover-API panel pinned * to the map's top-right corner with anchor positioning (Chrome 125+, * Firefox 147+), showing the hovered country's flag, name, capital and * facts. mxw-map.js sets anchor-name on the element and * position-anchor on the panel, per instance — tied to no page id, and * explicit position-anchor is what Firefox >= 151 asks for. * * The --mxw-map-info-* below are the panel's own tokens: a page * that wants another skin sets them on .mxw-map-country-info and * touches nothing else. Component-owned names carry the component's: * the panel was .mxw-country-info with --ci-* tokens, which said * nothing about which component would answer for them. *======================================================================*/ .mxw-map-country-info { --mxw-map-info-bg: oklch(22% 0.03 255 / 0.72); /* dark, translucent slate */ --mxw-map-info-fg: oklch(98% 0 0); --mxw-map-info-muted: oklch(98% 0 0 / 0.62); --mxw-map-info-line: oklch(100% 0 0 / 0.16); --mxw-map-info-accent: rgb(56 201 123); /* the country-hover green */ --mxw-map-info-title: #fff; /* the country's name */ /* `display` is set only while open (below), so it never overrides the UA display: none of a closed popover. */ /* Stated, not inherited: a content region that justifies its prose passes that down, and the panel's rows are a label column against figures. A declaration on the element beats an inherited value whatever layer either sits in. */ text-align: start; position: fixed; inset: auto; inset-block-start: anchor(top); inset-inline-end: anchor(right); margin: 0.6rem; grid-template-columns: auto 1fr; align-items: center; gap: 0.45rem 0.85rem; padding: 0.7rem 0.9rem; inline-size: 19rem; /* fixed, so the panel does not jitter as the content under the pointer changes */ color: var(--mxw-map-info-fg); font-size: 0.8rem; line-height: 1.35; background: var(--mxw-map-info-bg); backdrop-filter: blur(10px) saturate(1.3); border: 1px solid var(--mxw-map-info-line); border-block-start: 2px solid var(--mxw-map-info-accent); border-radius: 0.6rem; box-shadow: 0 8px 24px oklch(0% 0 0 / 0.4); transform-origin: top right; /* grow from the pinned corner */ /* Entrance: fade + scale from that corner. The CLOSING direction carries a 0.12s delay, so a hide-then-show between two adjacent countries never visually moves — which is why the script needs no grace timer of its own. */ opacity: 0; scale: 0.95; transition: opacity 0.18s ease 0.12s, scale 0.18s ease 0.12s, display 0.3s allow-discrete, overlay 0.3s allow-discrete; &:popover-open { display: grid; opacity: 1; scale: 1; transition-delay: 0s; @starting-style { opacity: 0; scale: 0.95; } } @media (prefers-reduced-motion: reduce) { transition: none; } /* The name is stated, not left to inherit the panel's ink: inheritance loses to any rule that matches, and this panel is built in the light DOM inside the page's own content region. This only settles it for a page that says nothing about h3. A page that does wins outright — `mxw` sits BELOW `components` in the declared layer order, so no specificity here can beat it — and then the page owes the panel a colour of its own. www.alux-studio.com is such a page: `.mxw-content h3 { color: #444 }` was painting the country's name near-black on the dark card, 1.4:1, and it sets --mxw-map-info-title in its own layer. */ h3 { grid-column: 1 / -1; margin: 0; padding-block-end: 0.4rem; color: var(--mxw-map-info-title); font-size: 1rem; line-height: 1.35; /* common.css base: h3 { line-height: 1 } */ font-weight: 600; font-variant: small-caps; letter-spacing: 0.03em; text-align: center; text-wrap: balance; border-block-end: 1px solid var(--mxw-map-info-line); } /* One framed box whatever the flag's shape; object-fit takes the odd ratios (square CH/VA, wide QA) without distorting them or blowing the panel's grid out. */ img { inline-size: 5rem; block-size: 3.2rem; object-fit: contain; border-radius: 3px; box-shadow: 0 1px 5px oklch(0% 0 0 / 0.45); } dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.6rem; margin: 0; dt { color: var(--mxw-map-info-muted); font-weight: normal; /* common.css base: dl dt { bold } */ &::after { content: ":"; } } dd { margin: 0; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; /* the figures line up */ } } } }