https://mewsie.world/CoraTOWiki/index.php?action=history&feed=atom&title=MediaWiki%3AMindMap.css 2026-05-05T01:44:21Z Revision history for this page on the wiki MediaWiki 1.43.6 https://mewsie.world/CoraTOWiki/index.php?title=MediaWiki:MindMap.css&diff=6615&oldid=prev 2025-12-30T09:56:07Z

<p>Created page with &quot;.mindmap { position: relative; height: 640px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg); box-shadow: 0 6px 24px var(--shadow-soft); margin: 16px 0; overflow: hidden; cursor: grab; user-select: none; } .mindmap.mm-dragging { cursor: grabbing; } .mindmap-stage { position: relative; width: 100%; height: 640px; transform-origin: 0 0; transition: none; touch-action: none; z-index: 1; } @media (max-width:...&quot;</p> <p><b>New page</b></p><div>.mindmap {<br /> position: relative;<br /> height: 640px;<br /> border: 1px solid var(--border);<br /> border-radius: 18px;<br /> background: var(--bg);<br /> box-shadow: 0 6px 24px var(--shadow-soft);<br /> margin: 16px 0;<br /> overflow: hidden;<br /> cursor: grab;<br /> user-select: none;<br /> }<br /> <br /> .mindmap.mm-dragging {<br /> cursor: grabbing;<br /> }<br /> <br /> .mindmap-stage {<br /> position: relative;<br /> width: 100%;<br /> height: 640px;<br /> transform-origin: 0 0;<br /> transition: none;<br /> touch-action: none;<br /> z-index: 1;<br /> }<br /> <br /> @media (max-width: 1023.98px) {<br /> .mindmap {<br /> height: 720px;<br /> }<br /> .mindmap-stage {<br /> height: 720px;<br /> }<br /> }<br /> <br /> .mm-links {<br /> position: absolute;<br /> inset: 0;<br /> pointer-events: none;<br /> z-index: 0;<br /> }<br /> <br /> .mm-node {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> gap: 10px;<br /> padding: 12px 14px;<br /> border-radius: 12px;<br /> background: var(--bg-1);<br /> border: 1px solid var(--border);<br /> box-shadow: 0 6px 18px var(--shadow-soft);<br /> color: var(--heading);<br /> font-weight: 700;<br /> cursor: pointer;<br /> transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;<br /> }<br /> <br /> .mm-node:focus-visible {<br /> outline: 2px solid var(--border-strong);<br /> outline-offset: 4px;<br /> }<br /> <br /> .mm-node:hover {<br /> box-shadow: 0 10px 28px var(--shadow-medium);<br /> }<br /> <br /> .mm-node a {<br /> color: inherit;<br /> text-decoration: none;<br /> }<br /> <br /> .mm-node a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .mm-node:not(.mm-center):hover {<br /> transform: translateY(-1px);<br /> }<br /> <br /> .mm-center {<br /> left: 8%;<br /> top: 50%;<br /> transform: translate(0, -50%);<br /> min-width: 220px;<br /> justify-content: center;<br /> }<br /> <br /> .mm-branch {<br /> position: absolute;<br /> min-width: 220px;<br /> display: flex;<br /> align-items: flex-start;<br /> gap: 34px;<br /> }<br /> <br /> .mm-branch &gt; .mm-node {<br /> position: relative;<br /> }<br /> <br /> .mm-branch .mm-node {<br /> background: var(--bg-2);<br /> border-left: 4px solid var(--border-strong);<br /> color: var(--heading);<br /> }<br /> <br /> .mm-branch .mm-children {<br /> position: relative;<br /> margin-top: 0;<br /> }<br /> <br /> .mm-branch .mm-children {<br /> display: none;<br /> }<br /> <br /> .mm-branch.open .mm-children {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mm-item {<br /> display: flex;<br /> align-items: flex-start;<br /> gap: 26px;<br /> }<br /> <br /> .mm-subchildren {<br /> display: none;<br /> flex-direction: column;<br /> }<br /> <br /> .mm-item.open .mm-subchildren {<br /> display: flex;<br /> }<br /> <br /> .mm-subchildren .mm-node {<br /> margin: 0 0 14px 0;<br /> }<br /> <br /> .mm-subchildren .mm-node:last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .mm-branch .mm-children .mm-node {<br /> position: relative;<br /> display: block;<br /> font-weight: 600;<br /> background: var(--bg-2);<br /> border-left: 4px solid var(--border-strong);<br /> color: var(--heading);<br /> margin: 0 0 14px 0;<br /> }<br /> <br /> .mm-branch .mm-children .mm-node:last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> #mm-locations-coral,<br /> #mm-locations-coral-shop {<br /> background: linear-gradient(135deg, #ff7fb2 0%, #9BCF53 100%);<br /> border-left-color: #5f8f2a;<br /> color: #0c1a0a;<br /> }<br /> <br /> #mm-locations-desert,<br /> #mm-locations-desert-statue,<br /> #mm-locations-desert-mine {<br /> background: linear-gradient(135deg, #ffffff 0%, #F5F5DC 55%, #e6dec7 100%);<br /> border-left-color: #c9c2a5;<br /> color: #2a2418;<br /> }<br /> <br /> #mm-locations-ghostblue,<br /> #mm-locations-ghostblue-gate,<br /> #mm-locations-ghostblue-shop {<br /> background: linear-gradient(135deg, #1a123d 0%, #483D8B 55%, #2f0a5a 100%);<br /> border-left-color: #241f46;<br /> color: #ffffff;<br /> }<br /> <br /> #mm-locations-megalopolis,<br /> #mm-locations-megalopolis-gate {<br /> background: linear-gradient(135deg, #ff7fb2 0%, #FFD700 45%, #00BFFF 100%);<br /> border-left-color: #d4af37;<br /> color: #1a1a1a;<br /> }<br /> <br /> #mm-locations-caballa,<br /> #mm-locations-caballa-gate,<br /> #mm-locations-caballa-field,<br /> #mm-locations-caballa-mine {<br /> background: linear-gradient(135deg, #8B8B00 0%, #6e6e12 55%, #3e3e1a 100%);<br /> border-left-color: #5f5f00;<br /> color: #ffffff;<br /> }<br /> <br /> #mm-locations-oopswarf,<br /> #mm-locations-oopswarf-gate,<br /> #mm-locations-oopswarf-phantom {<br /> background: linear-gradient(135deg, #00002a 0%, #00008B 65%, #07071d 100%);<br /> border-left-color: #00004d;<br /> color: #ffffff;<br /> }<br /> <br /> #mm-locations-mermaid,<br /> #mm-locations-mermaid-gate,<br /> #mm-locations-mermaid-dungeon {<br /> background: linear-gradient(135deg, #00BFFF 0%, #62d8ff 55%, #0099cc 100%);<br /> border-left-color: #0079a6;<br /> color: #003041;<br /> }<br /> <br /> #mm-locations-snowhill,<br /> #mm-locations-snowhill-gate,<br /> #mm-locations-snowhill-mine,<br /> #mm-locations-snowhill-blueice {<br /> background: linear-gradient(135deg, #ffffff 0%, #E0FFFF 55%, #bfefff 100%);<br /> border-left-color: #9fd8d8;<br /> color: #0a2a2a;<br /> }<br /> <br /> #mm-locations-techichi,<br /> #mm-locations-techichi-goldenash,<br /> #mm-locations-techichi-blackash {<br /> background: linear-gradient(135deg, #A52A2A 0%, #7a1f1f 55%, #3a0f0f 100%);<br /> border-left-color: #6f1c1c;<br /> color: #ffffff;<br /> }<br /> <br /> #mm-locations-tapasco,<br /> #mm-locations-tapasco-gate,<br /> #mm-locations-tapasco-mine,<br /> #mm-locations-tapasco-themespa {<br /> background: linear-gradient(135deg, #FF4500 0%, #ff7a2a 55%, #b83200 100%);<br /> border-left-color: #b83200;<br /> color: #ffffff;<br /> }<br /> <br /> #mm-locations-rosegarden,<br /> #mm-locations-rosegarden-gate {<br /> background: linear-gradient(135deg, #7b2a2a 0%, #556B2F 60%, #2f2f1a 100%);<br /> border-left-color: #34421d;<br /> color: #ffffff;<br /> }<br /> <br /> #mm-locations-blackswamp,<br /> #mm-locations-blackswamp-gate-maze,<br /> #mm-locations-blackswamp-mine {<br /> background: linear-gradient(135deg, #0f1f1f 0%, #2F4F4F 60%, #1a2a2a 100%);<br /> border-left-color: #1e3232;<br /> color: #ffffff;<br /> }<br /> <br /> #mm-locations-devroom,<br /> #mm-locations-devroom-lobby {<br /> background: linear-gradient(135deg, #00CED1 0%, #1e90ff 40%, #9400D3 100%);<br /> border-left-color: #00a6a8;<br /> color: #ffffff;<br /> }<br /> <br /> #mm-locations-alteo,<br /> #mm-locations-alteo-gate {<br /> background: linear-gradient(135deg, #c9ffd2 0%, #98FB98 55%, #6dcf7a 100%);<br /> border-left-color: #58b858;<br /> color: #0c2a0c;<br /> }<br /> <br /> #mm-locations-mirage,<br /> #mm-locations-mirage-field {<br /> background: linear-gradient(135deg, #d2b48c 0%, #F0E68C 60%, #c2d68c 100%);<br /> border-left-color: #b9ae57;<br /> color: #2a250c;<br /> }<br /> <br /> #mm-locations-abyss,<br /> #mm-locations-abyss-gate {<br /> background: linear-gradient(135deg, #0000FF 0%, #002a7a 45%, #00FFFF 100%);<br /> border-left-color: #0000b8;<br /> color: #eaf8ff;<br /> }<br /> <br /> .pos-1 { left: 34%; top: 10%; }<br /> .pos-2 { left: 34%; top: 30%; }<br /> .pos-3 { left: 34%; top: 50%; }<br /> .pos-4 { left: 34%; top: 70%; }<br /> .pos-5 { left: 34%; top: 84%; }<br /> .pos-6 { left: 62%; top: 84%; }<br /> <br /> .mm-controls {<br /> position: absolute;<br /> right: 12px;<br /> top: 12px;<br /> display: flex;<br /> gap: 8px;<br /> flex-wrap: nowrap;<br /> z-index: 3;<br /> }<br /> <br /> .mm-controls button {<br /> background: linear-gradient(135deg, var(--heading-gradient-start) 0%, var(--heading-gradient-end) 100%);<br /> color: var(--text-strong);<br /> border: none;<br /> border-radius: 8px;<br /> padding: 8px 12px;<br /> font-weight: 700;<br /> cursor: pointer;<br /> box-shadow: 0 2px 8px var(--shadow-soft);<br /> display: inline-flex;<br /> align-items: center;<br /> justify-content: center;<br /> min-width: 38px;<br /> }<br /> <br /> .mm-detail {<br /> position: absolute;<br /> right: 12px;<br /> bottom: 12px;<br /> max-width: 360px;<br /> background: var(--bg-1);<br /> border: 1px solid var(--border);<br /> border-radius: 12px;<br /> box-shadow: 0 6px 18px var(--shadow-medium);<br /> padding: 12px 14px;<br /> display: none;<br /> z-index: 3;<br /> user-select: text;<br /> color: var(--text);<br /> }<br /> <br /> .mm-detail.active {<br /> display: block;<br /> }<br /> <br /> .mm-table-root {<br /> display: grid;<br /> gap: 18px;<br /> }<br /> <br /> .mm-table-controls {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> align-items: flex-end;<br /> justify-content: space-between;<br /> }<br /> <br /> .mm-table-control {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> min-width: 220px;<br /> }<br /> <br /> .mm-table-meta {<br /> margin-left: auto;<br /> min-width: 80px;<br /> text-align: right;<br /> font-weight: 700;<br /> color: var(--primary);<br /> }<br /> <br /> .mm-table-label {<br /> font-weight: 700;<br /> color: var(--heading);<br /> }<br /> <br /> .mm-table-input,<br /> .mm-table-select {<br /> border: 1px solid var(--border);<br /> border-radius: 12px;<br /> padding: 10px 12px;<br /> background: var(--bg-1);<br /> color: var(--text);<br /> box-shadow: 0 4px 14px var(--shadow-soft);<br /> }<br /> <br /> .mm-table-wrap {<br /> overflow: auto;<br /> border-radius: 14px;<br /> border: 1px solid var(--border);<br /> }<br /> <br /> .mm-table {<br /> width: 100%;<br /> border-collapse: collapse;<br /> background: var(--bg-1);<br /> }<br /> <br /> .mm-table th,<br /> .mm-table td {<br /> padding: 12px 12px;<br /> border-bottom: 1px solid var(--border);<br /> vertical-align: top;<br /> color: var(--text);<br /> }<br /> <br /> .mm-table thead th {<br /> position: sticky;<br /> top: 0;<br /> z-index: 1;<br /> background: var(--bg);<br /> color: var(--heading);<br /> text-align: left;<br /> }<br /> <br /> .mm-table--enhanced thead th[data-key] {<br /> cursor: pointer;<br /> }<br /> <br /> .mm-table a {<br /> color: var(--heading);<br /> font-weight: 700;<br /> text-decoration: none;<br /> }<br /> <br /> .mm-table a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .mm-list {<br /> margin: 0;<br /> padding-left: 18px;<br /> }<br /> <br /> .mm-table-card {<br /> border-radius: 16px;<br /> border: 1px solid var(--border);<br /> background: var(--bg-1);<br /> box-shadow: 0 6px 24px var(--shadow-soft);<br /> padding: 14px;<br /> }<br /> <br /> .mm-table-title {<br /> margin: 0 0 10px 0;<br /> font-size: 18px;<br /> font-weight: 800;<br /> color: var(--heading);<br /> }<br /> <br /> .mm-table-card--beach { --mm-accent: var(--primary); --mm-tint: var(--bg); --mm-tint-strong: var(--bg-1); }<br /> .mm-table-card--cities { --mm-accent: var(--primary); --mm-tint: var(--bg); --mm-tint-strong: var(--bg-1); }<br /> .mm-table-card--volcanic { --mm-accent: var(--primary); --mm-tint: var(--bg); --mm-tint-strong: var(--bg-1); }<br /> .mm-table-card--special { --mm-accent: var(--primary); --mm-tint: var(--bg); --mm-tint-strong: var(--bg-1); }<br /> <br /> .mm-table-card[class*=&quot;mm-table-card--&quot;] {<br /> border-left: 6px solid var(--mm-accent);<br /> }<br /> <br /> .mm-table-card[class*=&quot;mm-table-card--&quot;] .mm-table thead th {<br /> background: var(--mm-tint);<br /> color: var(--mm-accent);<br /> }<br /> <br /> .mm-table-card[class*=&quot;mm-table-card--&quot;] .mm-td-town {<br /> background: var(--mm-tint-strong);<br /> font-weight: 800;<br /> }</div>

Noorisei