clone

an offline map explorer where each world, from a game map to a city's open data, ships as one .atlas file

feat/atlas-next-horizon
atlas / internal / app / assets / css / mint.css
mint.css 6.4K
1.create-atlas {2 display: inline-flex;3 align-items: center;4 gap: 0.35rem;5 min-height: 2.25rem;6 padding: 0 0.9rem;7 border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));8 border-radius: 999px;9 background: var(--accent-wash);10 color: var(--text-strong);11 font-size: 0.78rem;12 font-weight: 750;13 text-decoration: none;14 white-space: nowrap;15}1617.create-atlas:hover { background: var(--accent-wash-strong); }1819.mint-panel {20 position: absolute;21 z-index: 25;22 inset: 0 0 0 auto;23 width: min(24rem, calc(100% - 2rem));24 padding: 1.15rem;25 overflow: auto;26 border-left: 1px solid var(--line-strong);27 background: color-mix(in srgb, var(--panel) 96%, transparent);28 box-shadow: -1.5rem 0 4rem rgba(0, 0, 0, 0.28);29 transform: translateX(102%);30 transition: transform 180ms ease;31}3233.mint-panel:target,34.mint-panel[data-open="true"] { transform: translateX(0); }3536.mint-panel > header {37 display: flex;38 align-items: flex-start;39 justify-content: space-between;40 gap: 1rem;41}4243.mint-panel header small {44 color: var(--accent);45 font-size: 0.62rem;46 font-weight: 800;47 letter-spacing: 0.12em;48}4950.mint-panel h2 { margin: 0.2rem 0 0; font-size: 1.45rem; }5152.mint-close {53 display: grid;54 place-items: center;55 width: 2rem;56 height: 2rem;57 border-radius: 50%;58 color: var(--muted);59 background: var(--panel-raised);60 text-decoration: none;61 font-size: 1.25rem;62}6364.mint-stages {65 display: grid;66 grid-template-columns: repeat(4, 1fr);67 gap: 0.35rem;68 padding: 0;69 margin: 1rem 0;70 list-style: none;71}7273.mint-stages li {74 padding: 0.38rem 0.2rem;75 border-radius: 0.4rem;76 background: var(--panel-raised);77 color: var(--muted);78 font-size: 0.64rem;79 text-align: center;80}8182.mint-stages .done { color: var(--data); }83.mint-stages .active { color: var(--accent-ink); background: var(--accent); font-weight: 800; }8485.mint-panel label,86.mint-panel legend { color: var(--muted); font-size: 0.68rem; }8788.mint-panel input[type="text"],89.mint-panel input[type="number"],90.mint-panel input:not([type]) {91 width: 100%;92 margin-top: 0.3rem;93 padding: 0.55rem 0.6rem;94 border: 1px solid var(--line-strong);95 border-radius: 0.45rem;96 color: var(--text-strong);97 background: var(--panel-raised);98}99100.mint-title { display: block; margin: 0.8rem 0; }101102.mint-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.8rem; }103.mint-actions button {104 padding: 0.55rem;105 border: 1px solid var(--line-strong);106 border-radius: 0.45rem;107 color: var(--text);108 background: var(--panel-raised);109}110.mint-actions button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }111112.mint-bounds,113.mint-sources { margin: 0.8rem 0; padding: 0.7rem; border: 1px solid var(--line); border-radius: 0.55rem; }114.mint-bounds { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }115.mint-bounds legend,116.mint-sources legend { padding: 0 0.25rem; }117118.mint-detail { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; }119.mint-detail output { color: var(--data); }120121.mint-sources label { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; }122.mint-sources label + label { border-top: 1px solid var(--line); }123.mint-sources span { display: flex; width: 100%; justify-content: space-between; gap: 1rem; }124.mint-sources b { color: var(--text); }125.mint-sources small { color: var(--muted); }126127.mint-presentation { margin: 0.7rem 0; color: var(--muted); font-size: 0.7rem; }128.mint-presentation-grid { display: grid; grid-template-columns: 1fr 5.5rem; gap: 0.55rem; margin-top: 0.65rem; }129.mint-presentation-grid label { min-width: 0; }130.mint-presentation-grid input { display: block; width: 100%; margin-top: 0.25rem; }131.mint-presentation-grid input[type="color"] { height: 2rem; padding: 0.12rem; border: 1px solid var(--line-strong); border-radius: 0.4rem; background: var(--panel-raised); }132133.mint-preview {134 display: grid;135 grid-template-columns: 1fr 1fr;136 gap: 0.45rem;137 margin: 0.8rem 0;138}139.mint-preview span,140.mint-preview[data-error="true"] {141 padding: 0.55rem;142 border: 1px solid var(--line);143 border-radius: 0.45rem;144 background: var(--panel-raised);145 color: var(--muted);146 font-size: 0.65rem;147}148.mint-preview b { display: block; color: var(--text); }149.mint-preview[data-error="true"] { display: block; border-color: var(--warm-strong); }150.mint-preview[data-error="true"] strong { color: var(--warm-strong); }151.mint-preview[data-error="true"] p { margin: 0.25rem 0 0; }152153.mint-submit {154 width: 100%;155 padding: 0.75rem;156 border: 0;157 border-radius: 0.55rem;158 background: var(--accent);159 color: var(--accent-ink);160 font-weight: 800;161}162.mint-working { display: none; }163.mint-submit.htmx-request .mint-ready { display: none; }164.mint-submit.htmx-request .mint-working,165.htmx-request .mint-working { display: inline; }166#atlas-mint-form.htmx-request .mint-submit { pointer-events: none; opacity: 0.82; }167.mint-panel:has(#atlas-mint-form.htmx-request) .mint-stages li { color: var(--data); }168.mint-panel:has(#atlas-mint-form.htmx-request) .mint-stages li:last-child {169 color: var(--accent-ink);170 background: var(--accent);171 font-weight: 800;172}173174.mint-advanced { margin-top: 0.7rem; color: var(--muted); font-size: 0.68rem; }175.mint-advanced p { margin: 0.45rem 0 0; }176177.mint-zone {178 position: absolute;179 z-index: 20;180 inset: 24% 29%;181 border: 2px solid var(--accent);182 background: rgba(32, 138, 174, 0.08);183 box-shadow: 0 0 0 9999px rgba(5, 10, 16, 0.28);184 pointer-events: none;185}186.map-panel:has(.mint-panel:target) .mint-zone { display: block; }187.mint-zone[data-visible="true"] { display: block; }188.mint-zone i {189 position: absolute;190 width: 0.65rem;191 height: 0.65rem;192 border: 2px solid var(--map-surround);193 border-radius: 50%;194 background: var(--accent);195}196.mint-zone i:nth-child(1) { left: -0.4rem; top: -0.4rem; }197.mint-zone i:nth-child(2) { right: -0.4rem; top: -0.4rem; }198.mint-zone i:nth-child(3) { right: -0.4rem; bottom: -0.4rem; }199.mint-zone i:nth-child(4) { left: -0.4rem; bottom: -0.4rem; }200.mint-zone > span {201 position: absolute;202 top: 0.55rem;203 left: 0.55rem;204 padding: 0.3rem 0.45rem;205 border-radius: 0.35rem;206 background: var(--panel);207 color: var(--text);208 font-size: 0.65rem;209}210211.map-panel.mint-drawing atlas-chart { cursor: crosshair; }212213@media (max-width: 720px) {214 .create-atlas { padding: 0 0.6rem; }215 .create-atlas { font-size: 0; }216 .create-atlas span { font-size: 1rem; }217 .mint-panel { width: 100%; }218}