252 lines
4.4 KiB
Plaintext
252 lines
4.4 KiB
Plaintext
.cesiumContainer :global {
|
|
pointer-events: auto;
|
|
|
|
.cesium-viewer {
|
|
.cesium-viewer-bottom {
|
|
display: none;
|
|
}
|
|
|
|
.cesium-viewer-toolbar {
|
|
.cesium-baseLayerPicker-dropDown-visible {
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 72px;
|
|
margin-bottom: 8px;
|
|
color: #04fbfd;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 42px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.left-panel {
|
|
position: absolute;
|
|
top: 84px;
|
|
left: 12px;
|
|
bottom: 12px;
|
|
width: 450px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.top-panel {
|
|
flex: 1;
|
|
}
|
|
|
|
.bottom-panel {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.right-panel {
|
|
position: absolute;
|
|
// top: 84px;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
width: 450px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
|
|
.top-panel {
|
|
flex: 1;
|
|
}
|
|
|
|
.bottom-panel {
|
|
flex: 1;
|
|
}
|
|
|
|
.form-panel {
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: auto;
|
|
padding: 12px;
|
|
border: 1px solid #04fbfd;
|
|
color: #02f9ff !important;
|
|
background-color: #000000e7;
|
|
border-radius: 8px;
|
|
|
|
.ant-form-item-label {
|
|
label {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.ant-form-item-control {
|
|
.ant-select-multiple {
|
|
max-height: 300px;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 1px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 6px;
|
|
background: #00a2a2;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
border-radius: 6px;
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.highlight {
|
|
outline: 4px solid #04fbfd;
|
|
box-shadow: 0 0 30px #04e0fd;
|
|
}
|
|
}
|
|
|
|
.one {
|
|
top: 50%;
|
|
}
|
|
|
|
.entity-legend {
|
|
position: absolute;
|
|
bottom: 140px;
|
|
width: 960px;
|
|
left: 25%;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-gap: 10px;
|
|
background-color: #000000e7;
|
|
border: 1px solid #04fbfd;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
color: white;
|
|
user-select: none;
|
|
|
|
.entity-legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
.entity-legend-item-name {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.legend {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
width: 960px;
|
|
left: 25%;
|
|
// height: 40px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #000000e7;
|
|
border: 1px solid #04fbfd;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
|
|
.legend-title {
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.colorbar {
|
|
width: 100%;
|
|
height: 14px;
|
|
display: flex;
|
|
margin: 8px 0;
|
|
|
|
.colorbar-item {
|
|
flex: 1;
|
|
height: 100%;
|
|
// border-radius: 8px;
|
|
border: 1px black solid;
|
|
|
|
&:not(:nth-child(1)) {
|
|
border-left: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.legend-text {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
width: 100%;
|
|
height: 20px;
|
|
margin-left: 8px;
|
|
|
|
.legend-text-item {
|
|
flex: 1;
|
|
text-align: right;
|
|
font-weight: 600;
|
|
color: white;
|
|
-webkit-text-stroke: white 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vertical-legend {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
right: 474px;
|
|
height: 300px;
|
|
width: 130px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #000000e7;
|
|
border: 1px solid #04fbfd;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
|
|
.legend-title {
|
|
color: #04fbfd;
|
|
}
|
|
|
|
.colorbar {
|
|
width: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
|
|
.colorbar-item {
|
|
flex: 1;
|
|
border: 2px black solid;
|
|
border-left: none;
|
|
border-right: none;
|
|
height: 25px;
|
|
width: 25px;
|
|
|
|
&:not(:nth-child(1)) {
|
|
border-top: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.legend-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
|
|
.legend-text-item {
|
|
flex: 1;
|
|
text-align: right;
|
|
font-weight: 600;
|
|
color: white;
|
|
-webkit-text-stroke: #04fbfd 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|