190 lines
4.0 KiB
CSS
190 lines
4.0 KiB
CSS
.mapArea {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.bgLayer {
|
|
position: absolute;
|
|
inset: var(--map-inset);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
width: calc(100% - var(--map-inset) * 2);
|
|
height: calc(100% - var(--map-inset) * 2);
|
|
background-image: url("/images/region_map_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center center;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: crisp-edges;
|
|
image-rendering: pixelated;
|
|
opacity: 0.7;
|
|
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.02));
|
|
pointer-events: none;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.svgLayer {
|
|
position: absolute;
|
|
inset: var(--map-inset);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
width: calc(100% - var(--map-inset) * 2);
|
|
height: calc(100% - var(--map-inset) * 2);
|
|
}
|
|
|
|
.svgLayer > svg {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: crisp-edges;
|
|
shape-rendering: geometricPrecision;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(path) {
|
|
fill: rgba(0, 150, 255, 0.2) !important;
|
|
stroke: #0066cc;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(.cls-1) {
|
|
fill: rgba(0, 150, 255, 0.2) !important;
|
|
stroke: #0066cc;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(.basin) {
|
|
opacity: 0;
|
|
pointer-events: all;
|
|
transition: opacity 0.15s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(.basin.active),
|
|
.svgContainer :global(svg) :global(.basin:hover) {
|
|
opacity: 1;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(.basin:focus-visible) {
|
|
opacity: 1;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(.basin:focus-visible) :global(path) {
|
|
stroke: #111827;
|
|
stroke-width: 2.5;
|
|
}
|
|
|
|
.svgContainer :global(svg) :global(.basin) :global(path),
|
|
.svgContainer :global(svg) :global(.basin) :global(polygon),
|
|
.svgContainer :global(svg) :global(.basin) :global(polyline) {
|
|
fill: rgba(0, 209, 209, 0.5);
|
|
stroke: #399ac3;
|
|
stroke-width: 1.3;
|
|
}
|
|
|
|
.popup {
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 150px;
|
|
min-width: 220px;
|
|
background: #fff;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 10px;
|
|
box-shadow:
|
|
0 12px 24px rgba(0, 0, 0, 0.18),
|
|
0 2px 0 rgba(0, 0, 0, 0.05);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translate(-50%, -8px) scale(0.98);
|
|
transition:
|
|
opacity 0.12s,
|
|
visibility 0.12s,
|
|
transform 0.12s;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.popup.show {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
transform: translate(-50%, -12px) scale(1) !important;
|
|
}
|
|
|
|
.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.labelsLayer {
|
|
position: absolute;
|
|
inset: var(--map-inset);
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.basinLabel {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
background: #ffffffee;
|
|
border: 2px solid #d0d0d0;
|
|
white-space: nowrap;
|
|
min-width: 60px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.basinLabel.active {
|
|
background: #0056b3;
|
|
color: #fff;
|
|
border-color: #96c3ff;
|
|
box-shadow: 0 4px 12px rgba(0, 107, 248, 0.3);
|
|
}
|
|
|
|
/* 블랙 스킨 (onasys 디자인 design/c 색상 기준) */
|
|
:global([data-theme="black"]) .basinLabel {
|
|
background: #404244ee;
|
|
border-color: #5e6165;
|
|
color: #f1f1f1;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
:global([data-theme="black"]) .basinLabel.active {
|
|
background: #0056b3;
|
|
border-color: #96c3ff;
|
|
color: #fff;
|
|
}
|
|
|
|
:global([data-theme="black"]) .popup {
|
|
background: #404244;
|
|
border-color: #4e5154;
|
|
color: #f1f1f1;
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
:global([data-theme="black"]) .popup > div {
|
|
border-color: #4e5154;
|
|
}
|
|
|
|
:global([data-theme="black"]) .popup > div:first-child {
|
|
background: #4e5154;
|
|
color: #fff;
|
|
}
|