realmap/realmap-style.css

Wooritech map chart component library

@charset "UTF-8";

.rm-root {
    --rm-font-family: AppleSDGothicNeo-Light, "HelveticaNeue", "Malgun Gothic", "맑은 고딕", sans-serif;
    --rm-font-size: 16px;

    --rm-focus-stroke: black;
    --rm-focus-stroke-width: 2px;
    --rm-text-fill: #333;

    --rm-title-fill: #333;
    --rm-subtitle-fill: #333;

    --rm-body-background-stroke: none;

    --rm-axis-title-fill: #333;
    --rm-axis-line-stroke: #aaa;
    --rm-axis-baseline-stroke: #333;
    --rm-axis-tick-stroke: #555;
    --rm-axis-label-fill: #555;
    --rm-axis-grid-line-stroke: #ddd;
    --rm-axis-grid-line-stroke-start: none;
    --rm-axis-grid-line-stroke-end: none;
    --rm-axis-grid-line-stroke-width: 1px;
    --rm-axis-scrollbar-track-fill: #fdfdfd;
    --rm-axis-scrollbar-track-stroke: #aaa;
    --rm-axis-scrollbar-thumb-fill: lightgray;
    --rm-axis-scrollbar-rx: 4px;
    
    --rm-legend-background: none;
	--rm-legend-background-stroke: none;
    --rm-legend-background-stroke: none;
    --rm-legend-fill: #333;
    --rm-legend-item-disabled: #aaa;
    --rm-legend-item-disabled-decoration: line-through;

    --rm-point-label-font-size: 0.8em;
    --rm-point-label-font-weight: bold;
    --rm-point-label-stroke: none;
    --rm-point-label-fill: #333;

    --rm-credits-fill: #777;
}
.rm-root[data-theme='dark'] {
    --rm-focus-stroke: #ccc;
    --rm-text-fill: #fff;

    --rm-title-fill: #fff;
    --rm-subtitle-fill: #fff;

    --rm-body-background-stroke: none;
    
    --rm-axis-title-fill: #fff;
    --rm-axis-line-stroke: #fff;
    --rm-axis-baseline-stroke: #fff;
    --rm-axis-tick-stroke: #fff;
    --rm-axis-label-fill: #fff;
    --rm-axis-grid-line-stroke: #fff;
    
    --rm-legend-background: none;
	--rm-legend-background-stroke: none;
    --rm-legend-fill: #fff;
    --rm-legend-item-disabled: #707070;
    --rm-legend-item-disabled-decoration: line-through;

    --rm-point-label-fill: #ddd;

    --rm-credits-fill: #999;
}
.rm-root[data-theme='real'] {
    --rm-focus-stroke: yellow;
    --rm-text-fill: #f0d9be;

    --rm-title-fill: #f0d9be;
    --rm-subtitle-fill: #f0d9be;

    --rm-body-background-stroke: none;
    
    --rm-axis-title-fill: #f0d9be;
    --rm-axis-line-stroke: #f0d9be;
    --rm-axis-tick-stroke: #f0d9be;
    --rm-axis-label-fill: #f0d9be;
    --rm-axis-grid-line-stroke: #f0d9be;
    
    --rm-legend-background: none;
	--rm-legend-background-stroke: none;
    --rm-legend-fill: #f0d9be;
    --rm-legend-item-disabled: #4e7b82;
    --rm-legend-item-disabled-decoration: line-through;

    --rm-point-label-fill: #ddd;

    --rm-credits-fill: #999;
}

.rm-control {
    --rm-background: #fff;
}
.rm-control[data-theme="dark"] {
    --rm-background: #262626;
}
.rm-control[data-theme='real'] {
	--rm-background: #264653;
}
.rm-control {
    background-color: var(--rm-background);
}

.rm-root {
    font-family: var(--rm-font-family);
    font-size: var(--rm-font-size);
    color: #000;
    /* background-color: white; */
    /* word-break: break-all;
    word-wrap: break-word; */
    -webkit-touch-callout: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: auto;
    -ms-touch-action: auto; 
    text-align: initial;
}   

.rm-root {
    padding: 20px;
}
:root, .rm-root {
    --map-series-hover-fill: #0088ff;
    --map-series-hover-label-fill: white;
    --map-series-selected-fill: #555;
    --map-series-selected-label-fill: white;
}

/** palette */
:root, .rm-root {
    --color-1: #0098ff;
    --color-2: #66d0ff;
    --color-3: #ff5c35;
    --color-4: #ff9f00;
    --color-5: #ffd938;
    --color-6: #00ac69;
    --color-7: #91cc39;
    --color-8: #8fc6a9;
    --color-9: #c45db9;
    --color-10: #ef5e99;
    --color-11: #afa4c6;
    --color-12: #5b63aa;
}
.rm-root[data-palette="gray"] {
    --color-1: #464646;
    --color-2: #61666a;
    --color-3: #6f6f6d;
    --color-4: #82898f;
    --color-5: #8d8d8b;
    --color-6: #9ea7a6;
    --color-7: #acaba7;
    --color-8: #bcbcbc;
    --color-9: #c5c9ca;
    --color-10: #d9d4ce;
    --color-11: #dedede;
    --color-12: #e8ecef;
}
:root, .rm-root {
    --area-color-1: #B4CBEF;
    --area-color-2: #E4CBDE;
    --area-color-3: #8EC1C2;
    --area-color-4: #FDD69F;
    --area-color-5: #C7B6AE;
    --area-color-6: #B4CF9A;
    --area-color-7: #EDCEBD;
    --area-color-8: #FECCC9;
    --area-color-9: #F9BBAB;
    --area-color-10: #A7D5E1;

    --area-stroke-1: #fff;
    --area-stroke-2: #FFF;
    --area-stroke-3: #FFF;
    --area-stroke-4: #fff;
    --area-stroke-5: #FFF;
    --area-stroke-6: #FFF;
    --area-stroke-7: #FFF;
    --area-stroke-8: #FFF;
    --area-stroke-9: #FFF;
    --area-stroke-10: #FFF;

    --area-label-1: #fff;
    --area-label-2: #fff;
    --area-label-3: #fff;
    --area-label-4: #fff;
    --area-label-5: #fff;
    --area-label-6: #fff;
    --area-label-7: #fff;
    --area-label-8: #fff;
    --area-label-9: #fff;
    --area-label-10: #fff;
}

/** rich text */
.rm-text-bold {
    font-weight: bold;
}
.rm-text-italic {
    font-style: italic;
}

/** button */
.rm-button {
    cursor: pointer;
}

/** zoom panel */
.rm-zoom-panel .rm-button {
    fill: white;
    font-family: Arial;
}
.rm-zoom-panel .rm-button-background {
    fill: #00aaff;
    rx: 5;
}
.rm-zoom-panel .rm-button[data-disabled] {
    fill: #999;
    cursor: default;
}
.rm-zoom-panel .rm-button[data-disabled] .rm-button-background {
    fill: #ddd;
}

/** drilldown panel */
.rm-drilldown-panel .rm-button {
    fill: white;
    font-family: Arial;
}
.rm-drilldown-panel .rm-button-background {
    padding: 4px 5px;
    fill: #00aaff;
    rx: 3;
}
.rm-drilldown-text {
    fill: #333;
}
.rm-drilldown-text[data-history] {
    fill: #08f;
    cursor: pointer;
}
.rm-drilldown-separator {
    fill: #777;
}

/** body view */
.rm-body {
    /* transform-origin: center center;
    transition: transform 0.1s ease-out; */
}

/** credits */
.rm-credits {
    font-size: 0.7em;
    fill: var(--rm-credits-fill);
}

/** title */
.rm-title {
    margin-bottom: 10px;
    font-size: 21px;
    fill: var(--rm-title-fill);
}
.rm-title-background {
    fill: none;
}
.rm-subtitle {
    margin-bottom: 10px;
    font-size: 14px;
    fill: var(--rm-subtitle-fill);
}
.rm-subtitle-background {
    fill: none;
}

/** legend */
.rm-legend {
    fill: var(--rm-legend-fill);
    stroke: none;
    padding: 3px 6px;
}
.rm-legend-background {
    fill: var(--rm-legend-background);
    stroke: var(--rm-legend-background-stroke);
}
.rm-legend-item-label[data-hidden] {
    fill: var(--rm-legend-item-disabled);
    text-decoration: var(--rm-legend-item-disabled-decoration)
}
/* .rm-legend-item-marker {
    stroke: none;
} */
.rm-legend-item-marker[data-hidden] {
    fill: #aaa !important;
    stroke: #aaa !important;
}
.rm-legend-item-marker[data-hidden] path[data-fill] {
    fill: #aaa !important;
}

/** color scale */
.rm-color-scale-background {
    fill: #efefef;
}
.rm-color-scale-bar {
    stroke: #efefef;
}
.rm-color-scale-split {
    stroke: white;
}
.rm-color-scale-marker {
    fill: #555;
}
.rm-color-scale-marker[data-null] {
    fill: #eee;
    stroke: #ccc;
}
.rm-color-scale-tick-line {
    stroke: #999;
    stroke-width: 1px;
}
.rm-color-scale-tick-label {
    fill: #555;
    font-size: 0.9em;
}

/** bubble scale */
.rm-bubble-scale-bubble {
    fill: none;
    stroke: #777;
}
.rm-bubble-scale-line {
    stroke: #777;
}
.rm-bubble-scale-label {
    fill: #777;
    font-size: 14px;
}

/** tooltip */
.rm-tooltip {
    font-size: 0.8em;
    pointer-events: none;
    opacity: 0.9;
}
.rm-tooltip-back {
    fill: white;
}
.rm-tooltip-tail {
    fill: white;
}
.rm-tooltip-text {
    fill: #333;
    stroke: none;
}

/** axis */
.rm-map-axis-grid {
    stroke: #ddd;
    fill: none !important;
}

/** axis guid */
.rm-axis-guide-label {
    font-size: 0.8em;
}

/** crosshair */
.rm-crosshair-line {
    stroke: #00000088;
}
.rm-crosshair-flag {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    fill: white;
    stroke: none;
}
.rm-crosshair-flag-back {
    padding: 3px 5px;
    fill: #00000090;
    rx: 3
}

/** point label */
.rm-point-label {
    font-size: var(--rm-point-label-font-size);
    font-weight: var(--rm-point-label-font-weight);
    stroke: var(--rm-point-label-stroke);
    fill: var(--rm-point-label-fill);
    text-align: center;
    fill-opacity: 1;
    opacity: 1;
}
.rm-point-label-lines {
    stroke: #585;
    fill: none;
}

/** series */
.rm-series[data-index="0"] {
    fill: var(--color-1);
    stroke: var(--color-1);
}
.rm-series[data-index="1"] {
    fill: var(--color-2);
    stroke: var(--color-2);
}
.rm-series[data-index="2"] {
    fill: var(--color-3);
    stroke: var(--color-3);
}
.rm-series[data-index="3"] {
    fill: var(--color-4);
    stroke: var(--color-4);
}
.rm-series[data-index="4"] {
    fill: var(--color-5);
    stroke: var(--color-5);
}
.rm-series[data-index="5"] {
    fill: var(--color-6);
    stroke: var(--color-6);
}
.rm-series[data-index="6"] {
    fill: var(--color-7);
    stroke: var(--color-7);
}
.rm-series[data-index="7"] {
    fill: var(--color-8);
    stroke: var(--color-8);
}
.rm-series[data-index="8"] {
    fill: var(--color-9);
    stroke: var(--color-9);
}
.rm-series[data-index="9"] {
    fill: var(--color-10);
    stroke: var(--color-10);
}
.rm-series[data-index="10"] {
    fill: var(--color-11);
    stroke: var(--color-11);
}
.rm-series[data-index="11"] {
    fill: var(--color-12);
    stroke: var(--color-12);
}

/** series */
.rm-callout-line {
    stroke: #555;
    stroke-width: 1.5px;
    fill: none !important;
}
.rm-callout-anchor {
    fill: #555;
    stroke: none !important;
}

/** map series */
.rm-map-series[data-index="0"] {
    fill: var(--area-color-1);
    stroke: var(--area-stroke-1);
}
.rm-map-series[data-index="1"] {
    fill: var(--area-color-2);
    stroke: var(--area-stroke-2);
}
.rm-map-series[data-index="2"] {
    fill: var(--area-color-3);
    stroke: var(--area-stroke-3);
}
.rm-map-series[data-index="3"] {
    fill: var(--area-color-4);
    stroke: var(--area-stroke-4);
}
.rm-map-series[data-index="4"] {
    fill: var(--area-color-5);
    stroke: var(--area-stroke-5);
}
.rm-map-series[data-index="5"] {
    fill: var(--area-color-6);
    stroke: var(--area-stroke-6);
}
.rm-map-series[data-index="6"] {
    fill: var(--area-color-7);
    stroke: var(--area-stroke-7);
}
.rm-map-series[data-index="7"] {
    fill: var(--area-color-8);
    stroke: var(--area-stroke-8);
}
.rm-map-series[data-index="8"] {
    fill: var(--area-color-9);
    stroke: var(--area-stroke-9);
}
.rm-map-series[data-index="9"] {
    fill: var(--area-color-10);
    stroke: var(--area-stroke-10);
}

.rm-map-series .rm-series-points {
    stroke-linejoin: round;
    stroke-linecap: round;
    /* stroke: #ccc; */
}
.rm-map-series .rm-point[data-null] {
    fill: #f4f4f4;
    stroke: #ccc;
    stroke-width: 1px;
}
.rm-map-series .rm-point[data-dummy] {
    fill: #f4f4f4;
    stroke: none;
}
.rm-map-series .rm-point[data-hover] {
    fill: var(--map-series-hover-fill) !important;
    /* stroke: #333; */
    /* stroke-width: 2px; */
}
.rm-map-series .rm-point-label[data-hover] {
    fill: var(--map-series-hover-label-fill) !important;
}
.rm-map-series .rm-point[data-selected] {
    /* fill: var(--map-series-selected-fill) !important; */
    fill: url(#rm-selected-area-fill);
    stroke: #333;
    stroke-width: 2px;
}
.rm-map-series .rm-point-label[data-selected] {
    fill: var(--map-series-selected-label-fill) !important;
}
.rm-map-series-inset {
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke: #aaa;
    fill: none;
}

/** route series */
.rm-route-series {
    stroke-width: 2px;
}

/** pin series */
.rm-pin-series-inner {
    fill: transparent;
}

/** figure series */
.rm-figure-series-inner-label {
    stroke: none;
    fill: #333;
    text-align: center;
}

/** rm-spark-series */
.rm-spark-series-base-line {
    stroke: #333;
    stroke-width: 2px;
}

/** bar series */
.rm-bar-series .rm-series-points  {
    fill-opacity: 0.7;   
}

/** line series */
.rm-line-series .rm-series-points  {
    fill-opacity: 0.7;
}
.rm-line-series-line {
    stroke-width: 2px;
    fill: none !important;
}
.rm-line-series-area {
    stroke: none !important;
    fill-opacity: 0.2;
}

/** pie series */
.rm-pie-series .rm-series-points {
    fill-opacity: 0.7;
}
.rm-pie-series .rm-point {
    stroke: white;
    stroke-width: 1.5px;
}

.rm-pie-series-sector[data-index="0"] {
    fill: var(--color-1);
}
.rm-pie-series-sector[data-index="1"] {
    fill: var(--color-2);
}
.rm-pie-series-sector[data-index="2"] {
    fill: var(--color-3);
}
.rm-pie-series-sector[data-index="3"] {
    fill: var(--color-4);
}
.rm-pie-series-sector[data-index="4"] {
    fill: var(--color-5);
}
.rm-pie-series-sector[data-index="5"] {
    fill: var(--color-6);
}
.rm-pie-series-sector[data-index="6"] {
    fill: var(--color-7);
}
.rm-pie-series-sector[data-index="7"] {
    fill: var(--color-8);
}
.rm-pie-series-sector[data-index="8"] {
    fill: var(--color-9);
}
.rm-pie-series-sector[data-index="9"] {
    fill: var(--color-10);
}
.rm-pie-series-sector[data-index="10"] {
    fill: var(--color-11);
}
.rm-pie-series-sector[data-index="11"] {
    fill: var(--color-12);
}

/** image series */
.rm-image-series .rm-series-points  {
    fill-opacity: 0.7;
}

/** bubble series */
.rm-bubble-series .rm-series-points  {
    fill-opacity: 0.7;
}
/* .rm-bubble-series .rm-point[data-hover] {
    stroke: #333;
    stroke-width: 2px;
} */

/** panel series */
.rm-panel-series .rm-series-points {
    stroke: #999;
    fill: transparent;
    rx: 3px;
}
.rm-panel-series-header {
    fill: #333;
    stroke: none;
    text-align: center;
}
.rm-panel-series-header-back {
    fill: #eee;
    stroke: transparent;
    padding: 2px 4px;
}
.rm-panel-series-body {
    fill: #333;
    stroke: none;
    text-align: center;
}
.rm-panel-series-body-back {
    fill: #fff;
    stroke: transparent;
    padding: 2px 4px;
}

/** circle gauge */
.rm-circle-gauge-face {
    fill: #0000ff10;
    stroke: none;
}
.rm-circle-gauge-rim {
    fill: #ccc;
    stroke: none;
}
.rm-circle-gauge-text {
    fill: #555;
    stroke: none;
    font-weight: bold;
    font-size: 1em;
}

/** clock gauge */
.rm-clock-gauge-face {
    fill: white;
    stroke: none;
    fill-opacity: 0.5;
}
.rm-clock-gauge-rim {
    fill: #ccc;
    stroke: #777;
}
.rm-clock-gauge-label {
    font-size: 0.8em;
}
.rm-clock-gauge-tick-label {
    font-size: 0.5em;
    fill: #333;
    stroke: none;
}
.rm-clock-gauge-hour {
    stroke: #333;
}
.rm-clock-gauge-minute {
    stroke: #333;
}
.rm-clock-gauge-second {
    stroke: red;
}
.rm-clock-gauge-pin {
    stroke: black;
    fill: white;
}
.rm-clock-gauge-label {
    font-size: 0.6em;
    fill: #333;
    stroke: none;
}

/** annotation */
.rm-annotation-background {
    fill: none;
    stroke: none;
}
.rm-text-annotation {
    font-size: 20px;
    fill: #333;
}

/* loading indicator */
.rm-loading-background {
    fill: none;
}

.rm-loading-spinner {
    animation: rm-spin 2.5s linear infinite;
    transform-origin: 32px 32px;
}

@keyframes rm-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}