/* RMRG Map Editor — layout on top of the shared design system (../shared/tools.css) */ html, body { height: 100%; } /* The guide styles its global scrollbar with ::-webkit-scrollbar ONLY — it never sets scrollbar-width/scrollbar-color globally (guides/shared/css/site.css). tools.css sets `scrollbar-width: thin` + `scrollbar-color` on , and modern Chrome IGNORES every ::-webkit-scrollbar rule whenever those have a non-auto value — so rmrgmap's webkit colour and arrow-hiding never applied. Reset them to auto so Chrome honours the ::-webkit rules below and renders exactly like the guide. */ html { scrollbar-width: auto; scrollbar-color: auto; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #004d40; } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .editor-page { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* ---- Slim application bar ---- */ .app-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; background: var(--card-bg); border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 8px var(--shadow-color); z-index: 60; } .app-bar-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .app-home { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--primary); } .app-home-logo { width: 28px; height: 28px; object-fit: contain; } .app-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1rem; color: var(--primary); white-space: nowrap; } .app-bar-divider { width: 1px; height: 24px; background: var(--border-color); margin: 0 0.25rem; } .app-bar .theme-toggle { background: var(--section-bg); color: var(--primary); border: 1px solid var(--border-color); } .app-bar .theme-toggle:hover { background: var(--border-color); } .contact-btn.small[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); } /* ---- Main area: map + dock ---- */ .editor-main { flex: 1 1 auto; min-height: 0; display: flex; background: var(--bg-light); } .map-stage { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; } #map { width: 100%; height: 100%; } /* Tiny coordinate readout — visible only on hover, bottom-left */ .map-coords { position: absolute; left: 8px; bottom: 8px; z-index: 500; padding: 0.2rem 0.45rem; border-radius: 6px; background: var(--card-bg); color: var(--secondary-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; line-height: 1.3; pointer-events: none; opacity: 0; transition: opacity 0.2s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .map-coords.visible { opacity: 0.92; } /* Freehand draw button (custom Leaflet control) */ .leaflet-control-freehand { display: flex !important; align-items: center; justify-content: center; width: 30px !important; height: 30px !important; background: #fff; color: #333; line-height: 1 !important; text-decoration: none !important; } .leaflet-control-freehand.active { background: var(--primary); color: #fff; } .leaflet-control-freehand svg { width: 16px; height: 16px; } .editor-page.is-freehand-active #map { cursor: crosshair; touch-action: none; } .editor-page.is-freehand-drawing #map { user-select: none; } .map-point-marker { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .leaflet-control-container { font-family: "Manrope", sans-serif; } /* ---- Right dock ---- */ .side-dock { position: relative; flex: 0 0 var(--dock-width, 440px); width: var(--dock-width, 440px); max-width: 70vw; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border-color); background: var(--card-bg); } .side-dock[hidden] { display: none; } .dock-resize-handle { position: absolute; top: 0; bottom: 0; left: -4px; z-index: 20; width: 8px; cursor: ew-resize; touch-action: none; } .dock-resize-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background 0.15s; } .dock-resize-handle:hover::after, .dock-resize-handle.is-dragging::after { background: var(--primary); } .editor-page.is-resizing-dock { cursor: ew-resize; user-select: none; } .dock-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .dock-panel[hidden] { display: none; } /* Features panel */ .dock-stats { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.75rem; border-bottom: 1px solid var(--border-color); color: var(--secondary-text); font-size: 0.78rem; } .dock-stats strong { color: var(--text-dark); } .dock-stats:empty { display: none; } .feature-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.6rem; padding-right: calc(0.6rem - 5px); display: flex; flex-direction: column; gap: 0.4rem; } .feature-list.can-ungroup.drag-over { outline: 1px dashed var(--primary); outline-offset: -3px; } .feature-group { flex: 0 0 auto; border: 1px solid var(--border-color); border-radius: 9px; background: var(--card-bg); overflow: hidden; } .feature-group-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; background: var(--section-bg); } .feature-group-header.drag-over, .feature-row.drag-over { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); } .feature-group-toggle { min-width: 0; border: 0; background: transparent; color: var(--text-dark); cursor: pointer; display: flex; align-items: center; gap: 0.45rem; padding: 0; text-align: left; } .feature-group-caret { color: var(--tertiary-text); font-size: 0.8rem; line-height: 1; transform: rotate(90deg); transition: transform 0.15s ease; } .feature-group.is-collapsed .feature-group-caret { transform: rotate(0deg); } .feature-group-main { min-width: 0; display: grid; gap: 0.05rem; } .feature-group-name { color: var(--text-dark); font-size: 0.86rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feature-group-meta { color: var(--secondary-text); font-size: 0.72rem; font-weight: 700; } .feature-group-vis { width: auto; accent-color: var(--primary); } .feature-group-settings { border: 1px solid var(--border-color); border-radius: 7px; background: var(--card-bg); color: var(--secondary-text); cursor: pointer; font-size: 0.72rem; font-weight: 800; line-height: 1; padding: 0.32rem 0.48rem; } .feature-group-settings:hover { border-color: var(--primary); color: var(--primary); } .feature-group-items { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.4rem; border-top: 1px solid var(--border-color); } .feature-group-items .feature-row { background: var(--section-bg); } .group-reference { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 38px; padding: 0.45rem 0.55rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--section-bg); } .group-reference span { min-width: 0; color: var(--text-dark); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .group-reference .link-btn { border: 0; background: transparent; color: var(--primary); cursor: pointer; flex: 0 0 auto; font-size: 0.76rem; font-weight: 800; padding: 0; } .group-reference .link-btn:hover { text-decoration: underline; } .group-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--secondary-text); font-size: 0.78rem; font-weight: 700; } .group-member-list { display: grid; gap: 0.35rem; } .group-member-row { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; padding: 0.45rem 0.55rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--section-bg); color: var(--secondary-text); font-size: 0.78rem; font-weight: 700; } .group-member-name { min-width: 0; overflow: hidden; color: var(--text-dark); text-overflow: ellipsis; white-space: nowrap; } .group-member-type { flex: 0 0 auto; font-size: 0.72rem; } /* ---- Reference tags panel ---- */ .autoshape-control { padding: 0 0.6rem 0.65rem; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.55rem; } .autoshape-slider { display: flex; flex-direction: column; gap: 0.25rem; } .autoshape-control label { display: flex; justify-content: space-between; color: var(--secondary-text); font-size: 0.72rem; font-weight: 600; } .autoshape-control input[type="range"] { width: 100%; accent-color: var(--primary); cursor: pointer; } .autoshape-tag-meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.3rem; } .autoshape-btn { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--secondary-text); cursor: pointer; } .autoshape-btn:hover { background: var(--bg-light); color: var(--primary); } .autoshape-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .autoshape-btn svg { width: 16px; height: 16px; pointer-events: none; } .tag-controls { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.6rem 0; } .tag-filter { width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--section-bg); color: var(--text-dark); font-size: 0.82rem; } .tag-control-btns { display: flex; gap: 0.4rem; } .tag-control-btns .contact-btn { flex: 1 1 auto; justify-content: center; } .tag-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.6rem; padding-right: calc(0.6rem - 5px); display: flex; flex-direction: column; gap: 0.35rem; } .tag-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border-color); border-radius: 9px; background: var(--section-bg); cursor: pointer; } .tag-row:hover { border-color: var(--primary); } .tag-row.is-visible { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); } .tag-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.25); flex: 0 0 auto; } .tag-row:not(.is-visible) .tag-swatch { opacity: 0.5; } .tag-name { font-weight: 600; font-size: 0.82rem; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag-count { font-size: 0.72rem; font-weight: 700; color: var(--secondary-text); background: var(--bg-light); border-radius: 999px; padding: 0.1rem 0.45rem; } .feature-empty { color: var(--secondary-text); font-size: 0.85rem; text-align: center; padding: 1.5rem 0.5rem; } .feature-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border-color); border-radius: 9px; background: var(--section-bg); } .feature-row.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .feature-drag { color: var(--tertiary-text); cursor: grab; font-size: 0.9rem; line-height: 1; } .feature-row.dragging { opacity: 0.5; } .feature-vis { width: auto; accent-color: var(--primary); } .feature-main { min-width: 0; cursor: pointer; } .feature-name { font-weight: 700; font-size: 0.85rem; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feature-type { font-size: 0.72rem; color: var(--secondary-text); } .feature-del { border: 0; border-radius: 6px; background: transparent; color: var(--tertiary-text); width: 26px; height: 26px; font-size: 1rem; line-height: 1; } .feature-del:hover { background: var(--danger-bg); color: var(--danger); } /* Properties sub-view */ .props-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .props-head { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-color); } .props-back { border: 0; background: transparent; color: var(--primary); font-weight: 700; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 0.3rem; } .props-back svg { width: 1rem; height: 1rem; } .props-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.75rem; padding-right: calc(0.75rem - 5px); display: flex; flex-direction: column; gap: 0.75rem; } .props-body h4 { color: var(--primary); font-size: 0.82rem; margin-top: 0.25rem; } .prop-field label { display: block; color: var(--secondary-text); font-size: 0.76rem; font-weight: 700; margin-bottom: 0.3rem; } .poly-smooth-field label { display: flex; justify-content: space-between; align-items: baseline; } .poly-smooth-field .poly-smooth-val { color: var(--primary); font-variant-numeric: tabular-nums; } .poly-smooth-range { width: 100%; accent-color: var(--primary); cursor: pointer; } .prop-add-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.4rem; } .prop-add-row button { border: 1px solid var(--primary); border-radius: 8px; background: var(--primary); color: #fff; font-weight: 700; padding: 0 0.7rem; } .props-actions { flex: 0 0 auto; display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--border-color); } .props-actions .contact-btn { flex: 1; } /* Code panel */ .code-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-color); } .code-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; } .segmented { display: inline-flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .segmented-btn { border: 0; background: var(--card-bg); color: var(--secondary-text); padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 700; } .segmented-btn.is-active { background: var(--primary); color: #fff; } .segmented.fill { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } /* Active shade button previews its own tier colour. */ .shade-switch [data-shade="100"].is-active { background: #dab2ff; color: #1a1a1a; } .shade-switch [data-shade="200"].is-active { background: #c27aff; color: #fff; } .shade-switch [data-shade="300"].is-active { background: #9810fa; color: #fff; } .code-content { flex: 1 1 auto; min-height: 0; } #codeEditor { width: 100%; height: 100%; } .code-content .CodeMirror { height: 100% !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; } .code-status { flex: 0 0 auto; padding: 0.45rem 0.75rem; border-top: 1px solid var(--border-color); color: var(--secondary-text); font-size: 0.76rem; font-weight: 600; } .code-status.error { color: var(--danger); } .code-status.success { color: var(--success); } /* ---- Status bar ---- */ .status-bar { flex: 0 0 42px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0; /* override the shared marketing-footer top margin */ min-height: 42px; max-height: 42px; padding: 0.4rem 0.75rem; background: var(--card-bg); border-top: 1px solid var(--border-color); box-shadow: 0 -2px 8px var(--shadow-color); z-index: 60; } .status-group { display: flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--secondary-text); font-size: 0.78rem; font-weight: 600; line-height: 1; white-space: nowrap; } .status-message { flex: 1; justify-content: center; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; height: 18px; min-height: 18px; max-height: 18px; line-height: 18px; align-self: center; } .status-sep { color: var(--border-color); } /* ---- Dialogs ---- */ .modal { display: none; } .modal.open { display: flex; } /* Single upload option now — keep the dialog compact, not the shared 920px. */ #dataDialog .modal-content { width: min(460px, 96vw); } .import-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; } .import-option { display: grid; gap: 0.6rem; align-content: start; } .import-option h4 { color: var(--primary); font-size: 0.95rem; } .import-option-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .file-drop-zone { min-height: 210px; cursor: pointer; } .file-drop-zone svg { width: 28px; height: 28px; color: var(--primary); } .file-formats { color: var(--secondary-text); font-size: 0.8rem; } .append-toggle { display: flex; align-items: center; gap: 0.5rem; color: var(--secondary-text); font-size: 0.82rem; font-weight: 600; } .append-toggle input { width: auto; accent-color: var(--primary); } .export-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; } .export-preview { margin-top: 1rem; max-height: 320px; overflow: auto; border: 1px solid var(--border-color); border-radius: 10px; background: var(--section-bg); padding: 0.85rem; padding-right: calc(0.85rem - 5px); color: var(--text-dark); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; white-space: pre-wrap; word-break: break-word; } .export-preview:empty { display: none; } /* Feature popups on the map */ .feature-popup { display: grid; gap: 0.35rem; } .feature-popup h4 { margin: 0; color: var(--primary); } .feature-popup p { margin: 0; font-size: 0.85rem; } .feature-popup .feature-meta { color: var(--secondary-text); font-size: 0.78rem; font-weight: 700; } .popup-action { margin-top: 0.25rem; border: 1px solid var(--primary); border-radius: 7px; background: var(--primary); color: #fff; padding: 0.35rem 0.6rem; font-weight: 700; font-size: 0.8rem; } /* ---- Responsive: stack dock under the map ---- */ @media (max-width: 860px) { .editor-page { overflow: auto; } .editor-main { flex-direction: column; } .map-stage { height: 60vh; min-height: 360px; } .side-dock { flex-basis: auto; width: 100%; max-width: none; border-left: 0; border-top: 1px solid var(--border-color); height: 60vh; } .dock-resize-handle { display: none; } .app-bar { flex-wrap: wrap; } }