@vtx/cs-map
Version:
React components for Vortex
76 lines (75 loc) • 1.86 kB
CSS
.cs-tools-legend {
position: absolute;
bottom: 10px;
left: 10px;
padding: 6px 10px;
background: rgba(0, 35, 65, 0.9);
border: 1px solid #26425f;
-webkit-box-shadow: 0 2px 7px 0 rgba(6, 93, 181, 0.5);
box-shadow: 0 2px 7px 0 rgba(6, 93, 181, 0.5);
border-radius: 8px;
color: #97e0ff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.cs-tools-legend .cs-tools-legend-list-column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.cs-tools-legend .cs-tools-legend-title {
font-size: 16px;
letter-spacing: 2px;
}
.cs-tools-legend .cs-tools-legend-content {
cursor: pointer;
}
.cs-tools-legend .cs-tools-legend-list-wrap {
min-width: 60px;
display: none;
}
.cs-tools-legend .cs-tools-legend-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.cs-tools-legend .cs-tools-legend-list .cs-tools-legend-item {
text-align: center;
padding: 4px;
min-width: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.cs-tools-legend .cs-tools-legend-list .cs-tools-legend-item .cs-tools-legend-item-img {
max-height: 28px;
margin-right: 5px;
}
.cs-tools-legend .cs-tools-legend-list .cs-tools-legend-item .cs-tools-legend-item-title {
font-size: 12px;
}
.cs-tools-legend:hover .cs-tools-legend-list-wrap {
display: block;
}
.cs-tools-legend-close-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 999;
color: #fff;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}