archive-gh-me/heavyai-charting
1
0
Fork 0
mirror of https://github.com/heavyai/heavyai-charting.git synced 2026-01-25 14:57:45 +00:00
Code Issues Projects Releases Wiki Activity
heavyai-charting/chart.css

1157 lines
46 KiB
CSS
Raw Blame History

/*--------Variables-------*/
body {
font-family: "Roboto", Sans-Serif; }
.lock-measure {
left: 100%;
top: 0;
transform: translate(-20px, -52px); }
.color-legend-restore {
display: none !important; }
.mapboxgl-canvas-container {
position: absolute;
top: 0; }
.panel-default {
overflow: visible; }
.data-count, #data-count {
height: auto !important; }
.anim-button-play, .anim-button-stop {
z-index: 2;
opacity: 1 !important;
border: 1px solid #e2e2e2;
width: 24px;
height: 24px;
cursor: pointer;
bottom: 124px;
background: white; }
.anim-button-play:hover, .anim-button-stop:hover {
background: white !important; }
.anim-button-play .fa, .anim-button-stop .fa {
font-size: 13px !important;
color: #a7a7a7 !important;
position: relative;
top: -1px; }
.mapboxgl-ctrl-attrib {
position: absolute;
right: 20px;
bottom: 4px;
font-size: 11px;
background: rgba(255, 255, 255, 0.4); }
.mapboxgl-ctrl-attrib a, .mapboxgl-ctrl-attrib a:visited {
color: #868686;
padding: 0 4px;
text-decoration: none; }
.anim-button-play {
bottom: 152px; }
.anim-button-play:hover .fa {
color: #00E676 !important; }
.anim-button-play.pause-button:hover .fa {
color: #FFAB40 !important; }
.anim-button-stop:hover .fa {
color: #FF5252 !important; }
.dc-chart {
position: relative;
font-family: "Roboto", Sans-Serif; }
.dc-chart .svg-wrapper:hover .brush .resize path {
opacity: .5; }
.dc-chart .stack-list path.line {
stroke-linecap: round;
stroke-linejoin: round; }
.dc-chart .number-chart-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center; }
.dc-chart .number-chart-wrapper .number-chart-number {
display: inline-block;
position: relative;
font-weight: normal; }
.dc-chart .node {
font-size: 11px;
font-weight: bold; }
.dc-chart .node text {
pointer-events: none; }
.dc-chart .node:hover circle, .dc-chart .node.node-hover circle {
fill-opacity: .8; }
.dc-chart .node.hide-label text {
opacity: 0;
pointer-events: none; }
.dc-chart .node.hide-label.deselected text {
opacity: 0; }
.dc-chart .node.hide-label.selected text {
opacity: .9; }
.dc-chart .node.selected circle {
stroke: none !important; }
.dc-chart .node.deselected text {
display: block !important;
opacity: .5; }
.dc-chart .mouse-out-detect {
fill: white;
fill-opacity: 0; }
.dc-chart .bin-row {
position: absolute;
left: 0;
top: 5px;
z-index: 5;
display: flex;
font-size: 11px;
color: #868686; }
.dc-chart .bin-row span {
font-weight: bold;
margin-right: 4px; }
.dc-chart .bin-row-item {
padding: 0 4px;
cursor: pointer; }
.dc-chart .bin-row-item:hover {
color: #22A7F0; }
.dc-chart .bin-row-item.inactive {
pointer-events: none;
color: #e2e2e2;
display: none; }
.dc-chart .bin-row-item.underline {
border-bottom: #22A7F0 2px solid; }
.dc-chart .bin-row-item.active {
color: #22A7F0;
font-weight: bold; }
.dc-chart .bin-row-item.active:not(:nth-child(2)) {
border-bottom: #22A7F0 2px solid; }
.dc-chart .range-display {
position: absolute;
right: 0;
top: 4px;
font-size: 11px;
color: #868686;
z-index: 6;
display: flex; }
.dc-chart .range-display span {
margin: 0 2px; }
.dc-chart .range-display input {
display: inline-block;
border: 1px solid transparent;
text-align: center; }
.dc-chart .range-display input.active {
border: 1px solid #c7c7c7; }
.dc-chart .range-display input.range-day {
width: 70px;
font-weight: bold; }
.dc-chart .range-display input.range-time {
width: 48px;
border-left: 0; }
.dc-chart .range-display input.range-time.disable {
border-color: transparent;
pointer-events: none;
display: none; }
.dc-chart .axis {
fill: #a7a7a7; }
.dc-chart .axis text {
font-family: "Roboto"; }
.dc-chart .axis path, .dc-chart .axis line {
stroke: #c7c7c7 !important; }
.dc-chart .brush .resize path {
stroke: #868686;
fill: #868686;
opacity: 0;
transition: opacity .25s; }
.dc-chart .brush .resize:hover path {
opacity: 1; }
.dc-chart .brush rect.extent {
fill: #22A7F0;
fill-opacity: .2; }
.dc-chart .geocoder-input {
top: 8px !important;
right: 8px !important;
font-size: 13px;
padding: 0 0 0 8px;
border: 1px solid #e2e2e2;
height: 28px;
border-radius: 0;
z-index: 10;
outline: none; }
.dc-chart .mapboxgl-canvas-container {
position: relative;
top: auto; }
.dc-chart .heat-box {
stroke: white; }
.dc-chart .heatmap .box-group.deselected rect {
stroke: white; }
.dc-chart .pie-slice path {
stroke: white;
stroke-width: 1px; }
.dc-chart .pie-slice.stroke-thick path {
stroke-width: 2px; }
.dc-chart .pie-label {
fill: #404040;
pointer-events: none; }
.dc-chart .pie-label text {
text-anchor: middle; }
.dc-chart .value-dim {
font-weight: bold; }
.dc-chart .row text {
fill: #404040 !important; }
.dc-chart g.deselected path {
fill: #c7c7c7; }
.dc-chart g.deselected path:hover {
fill: #e2e2e2; }
.dc-chart div.x-axis-label, .dc-chart div.y-axis-label {
position: absolute;
font-size: 13px !important;
color: #a7a7a7;
font-weight: bold;
z-index: 2;
pointer-events: none; }
.dc-chart div.y-axis-label {
transform-origin: 50% 0;
transform: translateX(-50%) rotate(270deg);
left: 4px; }
.dc-chart div.x-axis-label {
transform: translateX(-50%);
bottom: 4px; }
.dc-chart .external-axis {
position: absolute;
width: 100%;
height: 52px;
bottom: 0; }
.dc-chart .external-axis .axis path, .dc-chart .external-axis .axis line {
stroke: #c7c7c7 !important; }
.dc-chart .external-axis .axis text {
fill: #a7a7a7 !important; }
.dc-chart .md-table-wrapper {
padding: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column; }
.dc-chart .md-table-wrapper table {
width: 100%;
margin-top: -27px;
margin-bottom: 8px; }
.dc-chart .md-table-wrapper td {
border-bottom: 1px solid #f5f5f5;
font-size: 13px;
padding: 4px 6px; }
.dc-chart .md-table-wrapper td:hover {
color: #22A7F0 !important;
cursor: pointer !important; }
.dc-chart .md-table-wrapper td.filtered {
color: #22A7F0; }
.dc-chart .md-table-wrapper td.disabled {
pointer-events: none; }
.dc-chart .md-table-wrapper th {
border-bottom: 1px solid #e2e2e2;
color: #868686;
font-size: 13px;
padding: 4px 24px 4px 20px;
white-space: nowrap; }
.dc-chart .md-table-wrapper tr.deselected {
background: #f5f5f5; }
.dc-chart .md-table-wrapper tr.deselected td {
color: #a7a7a7; }
.dc-chart .md-table-wrapper tr.grouped-data:hover td {
color: #22A7F0; }
.dc-chart .md-header-spacer {
width: 100%;
height: 27px;
flex-shrink: 0; }
.dc-chart .md-table-scroll {
overflow: auto;
padding: 0 12px;
width: 100%;
flex-grow: 1; }
.dc-chart .md-table-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0 12px;
overflow: hidden; }
.dc-chart .docked-table-header {
display: flex;
position: relative; }
.dc-chart .table-header-item {
position: relative;
white-space: nowrap; }
.dc-chart .table-header-item.isFiltered .unfilter-btn {
display: block; }
.dc-chart .table-header-item .unfilter-btn {
width: 24px;
height: 24px;
position: absolute;
right: 0;
top: 0;
padding: 4px;
display: none;
cursor: pointer; }
.dc-chart .table-header-item .unfilter-btn .svg-icon {
fill: #22A7F0; }
.dc-chart .table-header-item .unfilter-btn:hover .svg-icon {
fill: #ff0000; }
.dc-chart .table-sort {
border-bottom: 1px solid #e2e2e2;
color: #868686;
font-size: 13px;
padding: 4px 24px 4px 20px;
font-weight: bold;
background: white;
position: relative;
user-select: none; }
.dc-chart .table-sort:hover {
color: #22A7F0;
cursor: pointer; }
.dc-chart .table-sort:hover .sort-btn .svg-icon {
fill: #22A7F0; }
.dc-chart .table-sort.active {
color: #22A7F0; }
.dc-chart .table-sort.active:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: -1px;
background: #22A7F0;
left: 0; }
.dc-chart .table-sort.active .sort-btn .svg-icon {
fill: #22A7F0; }
.dc-chart .table-sort.active .svg-icon.icon-sort-arrow {
display: block; }
.dc-chart .table-sort.active .svg-icon.icon-sort {
display: none; }
.dc-chart .table-sort.active.asc .icon-sort-arrow {
transform: rotate(0); }
.dc-chart .table-sort .sort-btn {
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: 1px;
padding: 4px; }
.dc-chart .table-sort .svg-icon {
width: 100%;
height: 100%; }
.dc-chart .table-sort .svg-icon.icon-sort-arrow {
display: none;
transform: rotate(180deg); }
.dc-chart .table-sort.disabled {
pointer-events: none;
padding-left: 8px; }
.dc-chart .table-sort.disabled .sort-btn {
display: none; }
.dc-chart.mapboxgl-map {
overflow: visible; }
.dc-chart .mapboxgl-canvas {
outline: none; }
.dc-chart .map-point {
position: absolute;
transform-origin: 0 0;
animation: showMapPoint .5s; }
.dc-chart .map-point.removePoint {
animation: hideMapPoint .25s; }
.dc-chart .map-point.removePoint .map-point-gfx {
border-width: 0; }
.dc-chart .map-point-new {
position: absolute;
transform-origin: 0 0; }
.dc-chart .map-point-new.popupPoint {
animation: showMapPoint .5s; }
.dc-chart .map-point-new.removePoint {
animation: hideMapPoint .25s; }
.dc-chart .map-point-new.removePoint .map-point-gfx {
border-width: 0; }
.dc-chart .map-point-new.fadeInPoint {
animation: fadeInMapPoint .5s; }
.dc-chart .map-point-new.fadeOutPoint {
animation: fadeOutMapPoint .25s; }
.dc-chart .map-point-gfx {
width: 16px;
height: 16px;
background: #22A7F0;
border-radius: 50%;
transform: translate(-50%, -50%);
border: 3px solid white;
transition: border .25s;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
pointer-events: auto; }
.dc-chart .map-popup, .dc-chart .map-point-wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none; }
.dc-chart .map-point-wrap {
overflow: hidden; }
.dc-chart .map-popup-wrap {
position: absolute;
z-index: 11;
width: 0;
display: flex;
animation: showMapPopup .25s; }
.dc-chart .map-popup-wrap.removePopup {
opacity: 0;
animation: hideMapPopup .25s; }
.dc-chart .map-popup-wrap-new {
position: absolute;
z-index: 11;
width: 0;
display: flex; }
.dc-chart .map-popup-wrap-new.showPopup {
animation: showMapPopup .25s; }
.dc-chart .map-popup-wrap-new.removePopup {
opacity: 0;
animation: hideMapPopup .25s; }
.dc-chart .map-popup-box {
flex-shrink: 0;
min-width: 120px;
max-width: 240px;
padding: 8px 8px 4px 8px;
background: white;
border-radius: 4px;
border: 1px solid #c7c7c7;
position: relative;
word-wrap: break-word;
transform: translate(-50%, -100%);
top: -12px;
pointer-events: auto; }
.dc-chart .map-popup-box.pop-down {
transform: translate(-50%, 0);
top: 12px; }
.dc-chart .map-popup-box.pop-down .map-popup-bridge {
top: 0;
bottom: auto;
transform: translate(-50%, -24px); }
.dc-chart .map-popup-box .map-popup-bridge {
position: absolute;
height: 24px;
width: 24px;
bottom: 0;
left: 50%;
transform: translate(-50%, 24px); }
.dc-chart .map-popup-box .map-popup-item {
font-size: 12px;
line-height: 1.2;
margin-bottom: 4px; }
.dc-chart .map-popup-box .popup-item-key {
font-weight: bold; }
.dc-chart .map-popup-box-new {
flex-shrink: 0;
min-width: 120px;
max-width: 240px;
padding: 8px 8px 4px 8px;
background: white;
border-radius: 4px;
border: 1px solid #c7c7c7;
position: relative;
word-wrap: break-word;
transform: translate(-50%, -50%);
pointer-events: auto; }
.dc-chart .map-popup-box-new .map-popup-item {
font-size: 12px;
line-height: 1.2;
margin-bottom: 4px; }
.dc-chart .map-popup-box-new .popup-item-key {
font-weight: bold; }
.dc-chart .map-poly {
fill: #22A7F0;
stroke: #ffffff;
stroke-width: 2;
pointer-events: none; }
.dc-chart .map-poly.popupPoly {
animation: showMapPoint .5s; }
.dc-chart .map-poly.removePoly {
animation: hideMapPoint .25s; }
.dc-chart .map-poly.fadeInPoly {
animation: fadeInMapPoint .5s; }
.dc-chart .map-poly.fadeOutPoly {
animation: fadeOutMapPoint .25s; }
@keyframes showMapPopup {
0% {
opacity: 0;
transform: translateY(6px); }
100% {
opacity: 1;
transform: translateY(0); } }
@keyframes hideMapPopup {
0% {
opacity: 1;
transform: translateY(0); }
100% {
opacity: 0;
transform: translateY(6px); } }
@keyframes fadeInMapPoint {
0% {
opacity: 0;
transform: scale(1); }
50% {
transform: scale(1.2); }
100% {
opacity: 1;
transform: scale(1); } }
@keyframes fadeOutMapPoint {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes showMapPoint {
0% {
transform: scale(0); }
50% {
transform: scale(1.2); }
100% {
transform: scale(1); } }
@keyframes hideMapPoint {
0% {
transform: scale(1); }
100% {
transform: scale(0); } }
.chart-popup {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
z-index: 1003; }
.chart-popup.hide-delay {
transition: opacity 0;
transition-delay: .1s; }
.chart-popup.hide-delay .chart-popup-box {
transition-delay: 1s; }
.chart-popup.scatter-plot-popup .chart-popup-box {
transition: top .15s, opacity .2s; }
.chart-popup.js-showPopup {
opacity: 1;
transition: none; }
.chart-popup.js-showPopup .chart-popup-box {
opacity: 1;
top: -24px;
transition-delay: 0s; }
.chart-popup.js-showPopup .chart-popup-box.popdown {
top: 24px; }
.chart-popup.js-showPopup .chart-popup-box.align-left-center {
top: 0; }
.chart-popup.popup-scrollable.js-showPopup {
pointer-events: auto; }
.chart-popup.popup-scrollable.js-showPopup.delay-pointer {
pointer-events: none; }
.chart-popup.popup-scrollable .chart-popup-box {
max-height: 160px; }
.chart-popup .popup-bridge {
width: 32px;
height: 48px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 0); }
.chart-popup .bridge-hitbox {
cursor: pointer;
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 100%;
border-radius: 50%; }
.chart-popup th {
border-bottom: 1px solid #e2e2e2;
color: #a7a7a7;
font-size: 11px;
background: white; }
.chart-popup .popup-table {
margin: 0 8px;
font-size: 13px;
white-space: nowrap; }
.chart-popup .popup-table tr:hover {
background: #f5f5f5; }
.chart-popup .popup-table tr.deselected {
opacity: .5; }
.chart-popup .popup-table tr.deselected .table-legend {
background: #c7c7c7 !important; }
.chart-popup .popup-table td, .chart-popup .popup-table th {
padding: 4px;
text-align: center; }
.chart-popup .popup-table td:first-child, .chart-popup .popup-table th:first-child {
text-align: left;
font-weight: bold; }
.chart-popup .popup-table td {
cursor: pointer; }
.chart-popup .popup-table th {
position: relative; }
.chart-popup .popup-table th .ellipse-text {
max-width: 64px;
text-overflow: ellipsis;
overflow: hidden;
position: relative; }
.chart-popup .popup-table th:first-child .ellipse-text {
max-width: 160px; }
.chart-popup .popup-table th .full-text {
position: absolute;
background: white;
top: 0;
opacity: 0;
transition: none; }
.chart-popup .popup-table th .full-text:hover.scroll-text {
opacity: 1;
transition: transform 1s linear; }
.chart-popup .popup-table .table-dim {
display: flex; }
.chart-popup .popup-table .table-dim-val {
min-width: 80px;
max-width: 160px;
font-weight: bold;
line-height: 1.2;
white-space: normal; }
.chart-popup .table-legend {
height: 12px;
width: 12px;
margin-right: 6px;
flex-shrink: 0;
align-self: center; }
.chart-popup .chart-popup-content {
display: flex; }
.chart-popup .chart-popup-content.popup-list {
flex-direction: column;
padding: 0 8px 2px 8px; }
.chart-popup .chart-popup-box {
min-height: 32px;
min-width: 120px;
background: white;
position: absolute;
left: 0;
border: 1px solid #e2e2e2;
border-radius: 4px;
transform: translate(0, -100%);
opacity: 0;
top: 0;
transition: top .35s, opacity .25s; }
.chart-popup .chart-popup-box.align-left-center {
left: 32px;
transform: translate(0, -50%); }
.chart-popup .chart-popup-box.align-right-center {
left: -32px;
transform: translate(-100%, -50%); }
.chart-popup .chart-popup-box.align-center {
transform: translate(-50%, -100%); }
.chart-popup .chart-popup-box.align-right {
transform: translate(-100%, -100%); }
.chart-popup .chart-popup-box.popdown {
transform: translate(-50%, 0); }
.chart-popup .chart-popup-box.popdown .popup-bridge {
bottom: 100%;
top: auto; }
.chart-popup .chart-popup-box.popdown .bridge-hitbox {
top: 0;
bottom: auto; }
.chart-popup .popup-table-wrap {
flex-direction: column;
position: relative;
max-height: 158px; }
.chart-popup .popup-legend {
width: 12px;
height: 12px;
float: left;
margin: 8px;
flex-shrink: 0; }
.chart-popup .popup-value {
font-size: 13px;
line-height: 1.2;
white-space: nowrap;
flex-shrink: 0;
padding: 7px 8px 4px 0; }
.chart-popup .popup-value-dim {
font-weight: bold; }
.chart-popup .popup-header {
border-bottom: 1px solid #e2e2e2;
color: #a7a7a7;
font-size: 10px;
white-space: nowrap;
font-weight: bold;
padding: 4px 4px 2px 4px; }
.chart-popup .popup-item {
display: flex;
align-items: center; }
.chart-popup .popup-item .popup-legend {
flex-shrink: 0;
flex-grow: 0;
padding: 0;
margin: 6px 8px 8px 4px; }
.chart-popup .popup-item-key {
font-size: 12px;
font-weight: bold;
flex-grow: 1;
line-height: 1;
padding-right: 8px;
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis; }
.chart-popup .popup-item-value {
font-size: 13px;
flex-grow: 1; }
.chart-popup .popup-item-value.text-align-right {
text-align: right; }
.legend-cont {
position: absolute;
z-index: 2;
min-height: 32px;
bottom: 0px;
left: 16px;
padding-right: 24px; }
.legend-cont:hover .legend-lock, .legend-cont:hover .legend-title {
opacity: 1;
pointer-events: auto; }
.legend-cont .legend-lock, .legend-cont .legend-title {
opacity: 0;
pointer-events: none; }
.legend-cont .legend-group:hover .legend-label {
display: none; }
.legend-cont .legend-group:hover .legend-item:not(:hover) .legend-swatch {
opacity: .4; }
.legend-cont .legend-item {
float: left;
position: relative;
height: 32px; }
.legend-cont .legend-item:not(:first-child):not(:last-child) .legend-label {
display: none; }
.legend-cont .legend-item:hover .legend-label {
display: block !important; }
.legend-cont .legend-item:first-child .legend-label, .legend-cont .legend-item:last-child .legend-label {
pointer-events: auto; }
.legend-cont .legend-item:first-child .legend-label.active span, .legend-cont .legend-item:last-child .legend-label.active span {
font-size: 12px; }
.legend-cont .legend-item:first-child:hover .legend-label, .legend-cont .legend-item:first-child .legend-label.active, .legend-cont .legend-item:last-child:hover .legend-label, .legend-cont .legend-item:last-child .legend-label.active {
background: none; }
.legend-cont .legend-item:first-child:hover .legend-label span, .legend-cont .legend-item:first-child .legend-label.active span, .legend-cont .legend-item:last-child:hover .legend-label span, .legend-cont .legend-item:last-child .legend-label.active span {
opacity: 0;
pointer-events: none;
position: absolute; }
.legend-cont .legend-item:first-child:hover .legend-label .legend-input, .legend-cont .legend-item:first-child .legend-label.active .legend-input, .legend-cont .legend-item:last-child:hover .legend-label .legend-input, .legend-cont .legend-item:last-child .legend-label.active .legend-input {
position: relative;
display: inline-block;
margin: 0 16px 0 16px; }
.legend-cont .legend-label {
position: absolute;
text-align: center;
transform: translateX(-50%);
left: 6px;
color: #868686;
font-size: 10px;
padding: 2px 2px 0 2px;
background: rgba(255, 255, 255, 0.4); }
.legend-cont .legend-label:hover {
z-index: 2; }
.legend-cont .legend-swatch {
height: 12px;
width: 12px;
background: red;
border: 1px solid white; }
.legend-cont .legend-input {
display: none;
pointer-events: auto; }
.legend-cont .legend-input input {
height: 16px;
width: 32px;
min-width: 32px;
border: 1px solid #c7c7c7;
text-align: center;
float: left;
overflow: visible;
outline: none; }
.legend-cont .legend-input input:focus {
height: 24px;
width: 48px;
min-width: 48px;
font-size: 12px; }
.legend-cont .legend-title {
font-size: 12px;
color: #a7a7a7;
font-weight: bold;
text-align: center;
position: absolute;
top: -16px;
width: 100%;
padding-right: 24px;
white-space: nowrap; }
.legend-cont .legend-title span {
background: white;
padding: 2px 4px; }
.legend-cont .legend-lock {
width: 24px;
height: 24px;
padding: 4px;
position: absolute;
right: 0;
bottom: 14px; }
.legend-cont .legend-lock:hover {
cursor: pointer; }
.legend-cont .legend-lock:hover .svg-icon {
fill: #22A7F0; }
.legend-cont .legend-lock svg {
vector-effect: non-scaling-stroke; }
.legend-cont .legend-lock .icon-lock {
display: none; }
.legend-cont .legend-lock.js-isLocked {
opacity: 1; }
.legend-cont .legend-lock.js-isLocked .icon-lock {
display: block; }
.legend-cont .legend-lock.js-isLocked .icon-unlock {
display: none; }
.svg-icon {
fill: #a7a7a7; }
.map-svg {
left: 0;
position: absolute; }
.dc-legend {
position: absolute;
z-index: 1;
background: rgba(255, 255, 255, 0.9);
bottom: 8px;
left: 8px;
max-width: 160px;
border: 1px solid #e2e2e2;
border-radius: 2px;
font-size: 11px;
min-width: 100px; }
.dc-legend:hover {
background: white; }
.dc-legend:hover .toggle-btn {
opacity: 1; }
.dc-legend:hover .dc-legend-body::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4); }
.dc-legend .dc-legend-header {
border-bottom: 1px solid #e2e2e2;
color: #a7a7a7;
font-weight: bold;
margin: 4px 4px 0 4px;
position: relative;
padding-right: 20px;
padding-bottom: 2px; }
.dc-legend .toggle-btn {
width: 24px;
height: 24px;
position: absolute;
top: -6px;
right: -6px;
cursor: pointer;
transform: scale(0.4);
transition: opacity .25s;
opacity: 0; }
.dc-legend .toggle-btn:after, .dc-legend .toggle-btn:before {
content: '';
position: absolute; }
.dc-legend .toggle-btn:after {
transform: translate(-50%, -50%) rotate(45deg);
top: 50%;
left: 50%;
width: 4px;
height: 24px;
background: #a7a7a7; }
.dc-legend .toggle-btn:before {
width: 16px;
height: 16px;
bottom: 0;
left: 0;
border: 8px solid transparent;
border-left-color: #a7a7a7;
border-bottom-color: #a7a7a7; }
.dc-legend .toggle-btn:hover:after {
background: #22A7F0; }
.dc-legend .toggle-btn:hover:before {
border-left-color: #22A7F0;
border-bottom-color: #22A7F0; }
.dc-legend .dc-legend-body {
max-height: 120px;
overflow-y: auto;
padding: 0 4px 4px 4px; }
.dc-legend .dc-legend-body::-webkit-scrollbar {
-webkit-appearance: none; }
.dc-legend .dc-legend-body::-webkit-scrollbar:vertical {
width: 10px; }
.dc-legend .dc-legend-body::-webkit-scrollbar:horizontal {
height: 10px; }
.dc-legend .dc-legend-body::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
/* should match background, can't be transparent */
background-color: rgba(0, 0, 0, 0.2);
transition: background .25s; }
.dc-legend .dc-legend-body::-webkit-scrollbar-track {
border-radius: 8px; }
.dc-legend .legend-item-color {
width: 8px;
height: 8px;
flex-shrink: 0; }
.dc-legend .legend-item-text {
flex-grow: 1;
padding: 4px;
line-height: 1; }
.dc-legend .dc-legend-item {
display: flex;
align-items: center;
cursor: default;
min-height: 16px; }
.dc-legend.collapsed {
min-width: 0; }
.dc-legend.collapsed .dc-legend-header {
border: 0;
padding: 4px 8px 4px 8px;
margin: 0; }
.dc-legend.collapsed .dc-legend-header:hover {
cursor: pointer;
color: #22A7F0; }
.chart-type-row .dc-legend {
left: auto;
right: 16px !important; }
.chart-type-row .dc-legend .toggle-btn {
right: -4px; }
.chart-type-row .dc-legend .toggle-btn:after {
transform: translate(-50%, -50%) rotate(-45deg); }
.chart-type-row .dc-legend .toggle-btn:before {
transform: scaleX(-1);
left: auto;
right: 0; }
.heatmap-scroll .axes-mask {
position: absolute;
pointer-events: none;
bottom: 0;
left: 0;
width: 48px;
height: 56px;
z-index: 3;
overflow: hidden; }
.heatmap-scroll .axes-mask:after {
content: "";
position: absolute;
background: white;
width: 100%;
height: 100%;
top: 8px;
left: -8px;
box-shadow: 0 0 8px 8px white; }
.heatmap-scroll .svg-wrapper {
position: relative;
overflow: auto;
left: 48px; }
.heatmap-scroll .docked-x-axis {
position: absolute;
bottom: 0;
left: 0;
height: 56px;
z-index: 2; }
.heatmap-scroll .docked-x-axis .center {
transform: translateX(-50%); }
.heatmap-scroll .docked-x-axis .rotate-up {
transform-origin: 0 0;
transform: rotate(-90deg) translateY(-50%);
color: #323232;
font-weight: bold;
font-size: 12px;
text-shadow: 0 0 4px white;
pointer-events: none; }
.heatmap-scroll .docked-x-axis .rotate-up:before {
content: "";
position: absolute;
width: 16px;
height: 100%;
pointer-events: auto;
left: -16px; }
.heatmap-scroll .docked-x-axis .rotate-up:after {
border: 6px solid transparent;
border-left-color: #a7a7a7;
position: absolute;
content: "";
left: -8px;
top: 4px;
opacity: 0; }
.heatmap-scroll .docked-x-axis .rotate-up:hover:after {
opacity: 1; }
.heatmap-scroll .docked-x-axis .rotate-up:active:after {
border-left-color: #22A7F0; }
.heatmap-scroll .docked-x-axis .rotate-down {
transform-origin: 0 0;
transform: rotate(-90deg) translate(-100%, -50%); }
.heatmap-scroll .docked-y-axis {
position: absolute;
top: 0;
left: 48px;
width: 48px;
z-index: 3; }
.heatmap-scroll .docked-y-axis .text {
transform: translate(-100%, -50%); }
.heatmap-scroll .text {
position: absolute;
line-height: 1;
font-size: 10px;
color: #a7a7a7;
white-space: nowrap;
padding: 4px;
pointer-events: auto;
cursor: pointer;
max-width: 72px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.heatmap-scroll .text:active {
color: #22A7F0; }
.heatmap-scroll .docked-axis-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 1; }
.coordinate-chart .dc-legend, .chart-type-backendScatter .dc-legend {
top: 32px !important;
bottom: auto !important;
left: 72px !important; }
.coordinate-chart .dc-legend .toggle-btn, .chart-type-backendScatter .dc-legend .toggle-btn {
right: -6px;
top: -4px; }
.coordinate-chart .dc-legend .toggle-btn:after, .chart-type-backendScatter .dc-legend .toggle-btn:after {
transform: translate(-50%, -50%) rotate(-45deg); }
.coordinate-chart .dc-legend .toggle-btn:before, .chart-type-backendScatter .dc-legend .toggle-btn:before {
transform: scaleY(-1);
left: 0;
top: 0; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
margin: 8px 0 0 8px; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group {
border-radius: 2px;
box-shadow: none !important;
border: 1px solid #e2e2e2; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group > button {
border-bottom: none;
width: 32px;
height: 32px; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group > button:last-child {
position: relative; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group > button:last-child:after {
width: calc(100% - 8px);
height: 1px;
background: #e2e2e2;
position: absolute;
top: 0;
left: 4px;
content: ""; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group > button:hover {
background-color: white !important; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group > button.active {
background-color: #22A7F0 !important; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group .mapbox-gl-draw_trash {
background-size: 20px 20px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0E3QTdBNzt9PC9zdHlsZT48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzYsMTJoLTYuNXYtMmMwLTEuOS0xLjYtMy41LTMuNS0zLjVoLTRjLTEuOSwwLTMuNSwxLjYtMy41LDMuNXYySDEyaC0ydjRoMnYyNmMwLDEuMSwwLjksMiwyLDJoMjBjMS4xLDAsMi0wLjksMi0yVjE2aDJ2LTRIMzZ6IE0yMS41LDEwYzAtMC4zLDAuMi0wLjUsMC41LTAuNWg0YzAuMywwLDAuNSwwLjIsMC41LDAuNXYyaC01VjEweiBNMzIsNDBIMTZWMTZoMTZWNDB6Ii8+PHJlY3QgeD0iMjAiIHk9IjIwIiBjbGFzcz0ic3QwIiB3aWR0aD0iMiIgaGVpZ2h0PSIxNiIvPjxyZWN0IHg9IjI2IiB5PSIyMCIgY2xhc3M9InN0MCIgd2lkdGg9IjIiIGhlaWdodD0iMTYiLz48L2c+PC9zdmc+); }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group .mapbox-gl-draw_trash:hover {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzIyQTdGMDt9PC9zdHlsZT48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzYsMTJoLTYuNXYtMmMwLTEuOS0xLjYtMy41LTMuNS0zLjVoLTRjLTEuOSwwLTMuNSwxLjYtMy41LDMuNXYySDEyaC0ydjRoMnYyNmMwLDEuMSwwLjksMiwyLDJoMjBjMS4xLDAsMi0wLjksMi0yVjE2aDJ2LTRIMzZ6IE0yMS41LDEwYzAtMC4zLDAuMi0wLjUsMC41LTAuNWg0YzAuMywwLDAuNSwwLjIsMC41LDAuNXYyaC01VjEweiBNMzIsNDBIMTZWMTZoMTZWNDB6Ii8+PHJlY3QgeD0iMjAiIHk9IjIwIiBjbGFzcz0ic3QwIiB3aWR0aD0iMiIgaGVpZ2h0PSIxNiIvPjxyZWN0IHg9IjI2IiB5PSIyMCIgY2xhc3M9InN0MCIgd2lkdGg9IjIiIGhlaWdodD0iMTYiLz48L2c+PC9zdmc+); }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group .mapbox-gl-draw_polygon {
background-size: 20px 20px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0E3QTdBNzt9PC9zdHlsZT48Zz48Zz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEzLjksMzkuOCA4LjYsMzguNiA4LjIsMzMuMSAxMi4yLDMyLjggMTIuNCwzNS4zIDE0LjksMzUuOSAiLz48L2c+PGc+PHJlY3QgeD0iNy42IiB5PSIyMi45IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjk5NjYgLTguMjQwOTg3ZS0wMiA4LjI0MDk4N2UtMDIgMC45OTY2IC0yLjE1NzggMC44ODUzKSIgY2xhc3M9InN0MCIgd2lkdGg9IjQiIGhlaWdodD0iNy4zIi8+PC9nPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNy4xLDIwLjQgNi43LDE0LjkgMTEuNywxMi44IDEzLjIsMTYuNSAxMC45LDE3LjUgMTEuMSwyMCAiLz48L2c+PGc+PHJlY3QgeD0iMTQuNyIgeT0iMTAuMiIgdHJhbnNmb3JtPSJtYXRyaXgoMC45MjI0IC0wLjM4NjIgMC4zODYyIDAuOTIyNCAtMy4yODc0IDguMDQ1NykiIGNsYXNzPSJzdDAiIHdpZHRoPSI3LjMiIGhlaWdodD0iNCIvPjwvZz48Zz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjI5LjEsMTIuNSAyNy40LDEwLjYgMjUuMSwxMS42IDIzLjUsNy45IDI4LjUsNS44IDMyLjEsOS45ICIvPjwvZz48Zz48cmVjdCB4PSIzMi44IiB5PSIxMi40IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjc1NzggLTAuNjUyNSAwLjY1MjUgMC43NTc4IC0yLjA2NjMgMjYuNTY2NykiIGNsYXNzPSJzdDAiIHdpZHRoPSI0IiBoZWlnaHQ9IjcuMyIvPjwvZz48Zz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjQxLjIsMjguNCAzNy44LDI2LjMgMzkuMSwyNC4xIDM3LjQsMjIuMiA0MC40LDE5LjYgNDQsMjMuNyAiLz48L2c+PGc+PHJlY3QgeD0iMzIuNSIgeT0iMzAuOCIgdHJhbnNmb3JtPSJtYXRyaXgoMC41MTkyIC0wLjg1NDcgMC44NTQ3IDAuNTE5MiAtMTAuNjg0MiA0Ni42NzQzKSIgY2xhc3M9InN0MCIgd2lkdGg9IjcuMyIgaGVpZ2h0PSI0Ii8+PC9nPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMzEuNyw0NCAyNi40LDQyLjcgMjcuMywzOC45IDI5LjgsMzkuNCAzMS4xLDM3LjMgMzQuNSwzOS4zICIvPjwvZz48Zz48cmVjdCB4PSIxOC42IiB5PSIzNS43IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjIyOTcgLTAuOTczMyAwLjk3MzMgMC4yMjk3IC0yMi4zOTYyIDUwLjM2NTcpIiBjbGFzcz0ic3QwIiB3aWR0aD0iNCIgaGVpZ2h0PSI3LjMiLz48L2c+PC9nPjwvc3ZnPg==); }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group .mapbox-gl-draw_polygon:hover {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzIyQTdGMDt9PC9zdHlsZT48Zz48Zz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEzLjksMzkuOCA4LjYsMzguNiA4LjIsMzMuMSAxMi4yLDMyLjggMTIuNCwzNS4zIDE0LjksMzUuOSAiLz48L2c+PGc+PHJlY3QgeD0iNy42IiB5PSIyMi45IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjk5NjYgLTguMjQwOTg3ZS0wMiA4LjI0MDk4N2UtMDIgMC45OTY2IC0yLjE1NzggMC44ODUzKSIgY2xhc3M9InN0MCIgd2lkdGg9IjQiIGhlaWdodD0iNy4zIi8+PC9nPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNy4xLDIwLjQgNi43LDE0LjkgMTEuNywxMi44IDEzLjIsMTYuNSAxMC45LDE3LjUgMTEuMSwyMCAiLz48L2c+PGc+PHJlY3QgeD0iMTQuNyIgeT0iMTAuMiIgdHJhbnNmb3JtPSJtYXRyaXgoMC45MjI0IC0wLjM4NjIgMC4zODYyIDAuOTIyNCAtMy4yODc0IDguMDQ1NykiIGNsYXNzPSJzdDAiIHdpZHRoPSI3LjMiIGhlaWdodD0iNCIvPjwvZz48Zz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjI5LjEsMTIuNSAyNy40LDEwLjYgMjUuMSwxMS42IDIzLjUsNy45IDI4LjUsNS44IDMyLjEsOS45ICIvPjwvZz48Zz48cmVjdCB4PSIzMi44IiB5PSIxMi40IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjc1NzggLTAuNjUyNSAwLjY1MjUgMC43NTc4IC0yLjA2NjMgMjYuNTY2NykiIGNsYXNzPSJzdDAiIHdpZHRoPSI0IiBoZWlnaHQ9IjcuMyIvPjwvZz48Zz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjQxLjIsMjguNCAzNy44LDI2LjMgMzkuMSwyNC4xIDM3LjQsMjIuMiA0MC40LDE5LjYgNDQsMjMuNyAiLz48L2c+PGc+PHJlY3QgeD0iMzIuNSIgeT0iMzAuOCIgdHJhbnNmb3JtPSJtYXRyaXgoMC41MTkyIC0wLjg1NDcgMC44NTQ3IDAuNTE5MiAtMTAuNjg0MiA0Ni42NzQzKSIgY2xhc3M9InN0MCIgd2lkdGg9IjcuMyIgaGVpZ2h0PSI0Ii8+PC9nPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMzEuNyw0NCAyNi40LDQyLjcgMjcuMywzOC45IDI5LjgsMzkuNCAzMS4xLDM3LjMgMzQuNSwzOS4zICIvPjwvZz48Zz48cmVjdCB4PSIxOC42IiB5PSIzNS43IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjIyOTcgLTAuOTczMyAwLjk3MzMgMC4yMjk3IC0yMi4zOTYyIDUwLjM2NTcpIiBjbGFzcz0ic3QwIiB3aWR0aD0iNCIgaGVpZ2h0PSI3LjMiLz48L2c+PC9nPjwvc3ZnPg==); }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group .mapbox-gl-draw_polygon.active {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGRkZGRjt9PC9zdHlsZT48Zz48Zz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEzLjksMzkuOCA4LjYsMzguNiA4LjIsMzMuMSAxMi4yLDMyLjggMTIuNCwzNS4zIDE0LjksMzUuOSAiLz48L2c+PGc+PHJlY3QgeD0iNy42IiB5PSIyMi45IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjk5NjYgLTguMjQwOTg3ZS0wMiA4LjI0MDk4N2UtMDIgMC45OTY2IC0yLjE1NzggMC44ODUzKSIgY2xhc3M9InN0MCIgd2lkdGg9IjQiIGhlaWdodD0iNy4zIi8+PC9nPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNy4xLDIwLjQgNi43LDE0LjkgMTEuNywxMi44IDEzLjIsMTYuNSAxMC45LDE3LjUgMTEuMSwyMCAiLz48L2c+PGc+PHJlY3QgeD0iMTQuNyIgeT0iMTAuMiIgdHJhbnNmb3JtPSJtYXRyaXgoMC45MjI0IC0wLjM4NjIgMC4zODYyIDAuOTIyNCAtMy4yODc0IDguMDQ1NykiIGNsYXNzPSJzdDAiIHdpZHRoPSI3LjMiIGhlaWdodD0iNCIvPjwvZz48Zz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjI5LjEsMTIuNSAyNy40LDEwLjYgMjUuMSwxMS42IDIzLjUsNy45IDI4LjUsNS44IDMyLjEsOS45ICIvPjwvZz48Zz48cmVjdCB4PSIzMi44IiB5PSIxMi40IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjc1NzggLTAuNjUyNSAwLjY1MjUgMC43NTc4IC0yLjA2NjMgMjYuNTY2NykiIGNsYXNzPSJzdDAiIHdpZHRoPSI0IiBoZWlnaHQ9IjcuMyIvPjwvZz48Zz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjQxLjIsMjguNCAzNy44LDI2LjMgMzkuMSwyNC4xIDM3LjQsMjIuMiA0MC40LDE5LjYgNDQsMjMuNyAiLz48L2c+PGc+PHJlY3QgeD0iMzIuNSIgeT0iMzAuOCIgdHJhbnNmb3JtPSJtYXRyaXgoMC41MTkyIC0wLjg1NDcgMC44NTQ3IDAuNTE5MiAtMTAuNjg0MiA0Ni42NzQzKSIgY2xhc3M9InN0MCIgd2lkdGg9IjcuMyIgaGVpZ2h0PSI0Ii8+PC9nPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMzEuNyw0NCAyNi40LDQyLjcgMjcuMywzOC45IDI5LjgsMzkuNCAzMS4xLDM3LjMgMzQuNSwzOS4zICIvPjwvZz48Zz48cmVjdCB4PSIxOC42IiB5PSIzNS43IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjIyOTcgLTAuOTczMyAwLjk3MzMgMC4yMjk3IC0yMi4zOTYyIDUwLjM2NTcpIiBjbGFzcz0ic3QwIiB3aWR0aD0iNCIgaGVpZ2h0PSI3LjMiLz48L2c+PC9nPjwvc3ZnPg==); }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group .mapbox-gl-draw_circle {
background-size: 20px 20px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6bm9uZTtzdHJva2U6I0E3QTdBNztzdHJva2Utd2lkdGg6NDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5OjgsMzt9PC9zdHlsZT48Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNCIgY3k9IjI0IiByPSIxNiIvPjwvc3ZnPg==); }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group .mapbox-gl-draw_circle:after {
display: none; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group .mapbox-gl-draw_circle:hover {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6bm9uZTtzdHJva2U6IzIyQTdGMDtzdHJva2Utd2lkdGg6NDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5OjgsMzt9PC9zdHlsZT48Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNCIgY3k9IjI0IiByPSIxNiIvPjwvc3ZnPg==); }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group .mapbox-gl-draw_circle.active {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6NDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5OjgsMzt9PC9zdHlsZT48Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNCIgY3k9IjI0IiByPSIxNiIvPjwvc3ZnPg==); }
.mapbox-maplogo {
position: absolute;
display: block;
height: 20px;
width: 65px;
right: 20px;
bottom: 20px;
text-indent: -9999px;
z-index: 99999;
overflow: hidden;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAAAoCAMAAAAFWtJHAAAAwFBMVEUAAAAAAAAAAABtbW0AAAAAAAAAAAAAAAAAAAAAAAClpaUAAADp6ekAAAD5+fna2toAAAAMDAzv7+/Nzc0AAAA2Njb8/Pz9/f3T09MAAAAAAAD7+/sAAAArKyuxsbH39/fs7OwbGxuIiIjz8/N8fHyenp7u7u74+PgAAAC8vLxWVlbx8fF1dXXl5eVcXFyUlJTQ0NDFxcVCQkLAwMC4uLj19fXo6OjW1tarq6ve3t77+/vi4uL6+vrKysrNzc3///8w7gSSAAAAP3RSTlMAOQNdPSYBPywKexLLGPCxNEHXnzFL+v2nGwf1IEiE6dBFad9jd9PuLo1V2mDDV3Cjl06SiuXIq4C3973ym6BQMVUPAAAEXElEQVR4Ae2WCVP6OBiH05L0l1IqrVbkKHJ54I0oHn+PfP9vtUle0z/YdhbH2XVnd58ZnRJIeHiPJOx//mH4vQSAN+8FjAhFxgHIaPvJeZ99hxwEElon5iAQbj85Y98g8ODwjEOMAvGFyeE3FEKgodTBqj0BJGN9DhyNd5Ta3ean9QEopfaA+LsKhnEKRExqg4FSP6Og7oEkAjBWnxSCgBX4xF+kcLoPcOBQrSv0e5kH7s1j37jECQieCTPiFGxL5VHw2zQWCeeJiPt6kjRQw0XSkIdVChf67xGa4alSnZlT6HEQ8CK9ANbhvXUF9xlDkBfTuHDWScgC9+z5FQpPI12TlwC6+sV7ixR8CUMKiwjm2GQeOQWHMGuHGdbnObJAwCEqFJpNU5H6uaPUaEIKiQfg+PHk1+u4OwW9PlWW2ctbA4BHCtp+cNK+H8Jos4gDmC5ar4Nx9waaG/2B13NgDqS7+vm2RgEtEws82P+kwIHhs/pgkQKcFIhfd7CogtGNjYMHTLpurD0ERbYFw4JaD3GlQuNAL/JEsSAF4HqlCnaHACk4WhOn4OgCkMD5hSpYNYDJTD8Y46n+jsE1kPhVCuR6QBXhFK7MUOu9O6b1SWF3b+/9ZVWMGOlu93E8UDaAhgc7bfH+0DHqKXCkHzoNDFfU+zxiVQrUC9QXTuHYtKpN59OA3IxCG4b7jh6ZFuVockaNTW09mkJzOaPU49a6mE9cAchZpQJNpUWcwgV9r6FJswsFKrITp2B5pMBMdnS0z2HZNy2+BNKxSZxZfglkrFYBJxQnpzA5sN/HheR2aFQoZBLAi149dQoyAYYjW0hHlHguBAdMcR0DuDZ5omevX6+AI8qcU7ikKT3GBHCnXwydgmCC0tRwCnGQ2Wp6Be71yNIWfQSkOl9vAI1SBCNWrwC01RROgX7BuT2HI4r7tFAw086p/NwZEdOEa7R1uAFuNmQPuKAEAjYNQ0CyeoUEWHYBnpQVQgpvc0Ph+gsKlAnKg1+vEHsw5LKciLKCAJobiWBzYFGbCKpHqkZZrxBFHEASyFI59vJPCskcwNVGOWZAOqsrR+pKbaNeAMT1CixMEtlnsqopNxUMzVJT3tY35aXZm6a6Y9QhwMN6BUJWbE1lhbMO1WehkO7poO0sK7em9MJGxp1XSbC1gtugzzSLQmGsX7VntJGSwsPZ2d2z3bIPKzdoOp3Wzqt8G4XyMVUoFIxLx1S7+piaHtCvR3FeRVsq0GFdp9C5TbGpcNqsPqyHKxcfd14h21KhuLKUFU4f3osrC7F6uV3WXFnadL7wyAPeKDXw2RoJCO5GY4DouYvb/gepVXheLoewzPseQG9N/vzilrMIjoStE3++zvle4eSurw7XEe76ynI4aq+v7lEyt1x5awiFlFLQbHKIpabnM3eJLym4Szzzc/du7SU+zOXv9UNpECH7IoH/gecURPlN9vdQpeD47yhIFNX0U0QgvID9nENm+yxk/xb+AGAjNfRZuk9qAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 65px 20px; }
.mapd-draw-button-control-group {
margin: 10px 0 0 10px;
float: left;
position: absolute;
border-radius: 2px;
box-shadow: none!important;
border: 1px solid #e2e2e2;
clear: both;
}
.mapd-draw-button-control-group>button {
border-bottom: none;
width: 32px;
height: 32px;
display: block;
padding: 0;
outline: none;
border: none;
box-sizing: border-box;
background-color: white;
cursor: pointer;
}
.mapd-draw-active-button {
background-color: #22a7f0!important;
}
.mapd-draw-button {
background-repeat: no-repeat;
background-position: 50%;
position: relative;
background-size: 20px 20px;
}
.mapd-draw-button-circle {
background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-width:2;stroke-miterlimit:10;}</style><circle class="st0" cx="24" cy="24" r="18"/></svg>');
}
.mapd-draw-button-polyline {
background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{fill:black;}</style><g><path class="st0" transform="rotate(16.257719039916992 50.821998596191385,50.10000228881835)" d="M92.672,40.704L76.688,89.902H24.958L8.972,40.704l41.85-30.406L92.672,40.704z M50.822,14.359L12.833,41.959l14.51,44.658 h46.958l14.51-44.658L50.822,14.359z"/></g></svg>')
}
.mapd-draw-button-lasso {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="-2 -2 28 28" style="enable-background:new 0 0 30 30;" xml:space="preserve"><g><path d="M4.5,24c-0.128,0-0.256-0.049-0.354-0.146c-0.195-0.195-0.195-0.512,0-0.707C6.293,21,6.293,19,4.146,16.854 c-0.195-0.195-0.195-0.512,0-0.707c0.195-0.195,0.512-0.195,0.707,0c2.521,2.521,2.521,5.186,0,7.707C4.756,23.951,4.628,24,4.5,24 z"/><path d="M12,16c-2.249,0-4.448-0.42-6.36-1.215c-0.11-0.046-0.2-0.129-0.253-0.235c-0.201-0.392-0.645-0.604-1.057-0.531 c-0.118,0.019-0.239-0.002-0.342-0.063C1.453,12.441,0,10.271,0,8c0-4.411,5.383-8,12-8s12,3.589,12,8 c0,2.239-1.418,4.389-3.892,5.898c-0.153,0.094-0.346,0.098-0.503,0.01l-4.119-2.288l1.261,3.151 c0.053,0.133,0.047,0.283-0.018,0.411c-0.064,0.128-0.181,0.222-0.319,0.259C14.993,15.812,13.51,16,12,16z M6.179,13.925 c2.804,1.124,6.309,1.38,9.425,0.683l-1.569-3.922c-0.079-0.196-0.025-0.421,0.134-0.561c0.159-0.14,0.389-0.165,0.573-0.062 l5.09,2.828C21.878,11.566,23,9.838,23,8c0-3.86-4.935-7-11-7S1,4.14,1,8c0,1.868,1.219,3.685,3.353,5.007 C5.066,12.936,5.786,13.308,6.179,13.925z"/><path d="M4.5,17c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S5.603,17,4.5,17z M4.5,14c-0.551,0-1,0.449-1,1s0.449,1,1,1 s1-0.449,1-1S5.051,14,4.5,14z"/><path d="M18.5,21c-0.002,0-0.004,0-0.006,0c-0.203-0.002-0.383-0.126-0.458-0.314l-4-10c-0.079-0.196-0.025-0.421,0.134-0.561 c0.159-0.14,0.389-0.165,0.573-0.062l9,5c0.167,0.093,0.267,0.272,0.257,0.462s-0.127,0.359-0.303,0.434l-3.316,1.421l-1.421,3.316 C18.881,20.881,18.7,21,18.5,21z M15.486,11.62l3.03,7.573l1.024-2.39c0.05-0.118,0.145-0.212,0.263-0.263l2.563-1.099 L15.486,11.62z"/></g></svg>');
}
.mapd-draw-canvas {
outline: none;
}
Reference in New Issue View Git Blame Copy Permalink