@import "../../Cesium/Widgets/widgets.css";
|
@import "../layui/css/layui.css";
|
@import "./camera.css";
|
body,
|
html,
|
#smartearth-app {
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
user-select: none;
|
}
|
|
.funcBox {
|
position: absolute;
|
top: 30px;
|
padding: 10px;
|
background-color: rgba(0, 0, 0, .7);
|
border-radius: 4px;
|
left: 20px;
|
}
|
|
.funcBox label {
|
color: #fff !important;
|
}
|
|
blockquote,
|
body,
|
button,
|
dd,
|
div,
|
dl,
|
dt,
|
form,
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6,
|
input,
|
li,
|
ol,
|
p,
|
pre,
|
td,
|
textarea,
|
th,
|
ul {
|
margin: 0;
|
padding: 0;
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
}
|
|
a:active,
|
a:hover {
|
outline: 0;
|
}
|
|
li {
|
list-style: none;
|
}
|
|
#sdkContainer {
|
width : 100%;
|
height : 100%;
|
background-color: #000000;
|
background-size : cover;
|
}
|
.cesium-viewer-cesiumInspectorContainer,
|
.cesium-viewer-animationContainer,
|
.cesium-viewer-timelineContainer {
|
display: none;
|
}
|
|
.distance-legend {
|
right : 75px !important;
|
bottom: 38px !important;
|
}
|
|
#distanceLegendDiv {
|
position: absolute;
|
bottom : 230px !important;
|
right : 120px !important;
|
}
|
|
.resultToolTipClose {
|
padding-right: 16px !important;
|
}
|
|
.resultToolTipClose::after {
|
content: "x";
|
font: 16px/14px Tahoma, Verdana, sans-serif;
|
position: absolute;
|
pointer-events: all;
|
cursor: pointer;
|
top: 0;
|
right: 0;
|
padding: 4px 4px 0 0;
|
font-weight: bold;
|
}
|
|
.other-class {
|
border-radius: 5px;
|
background-color: rgba(0, 0, 0, 0.5) !important;
|
border: 1px solid rgba(32, 160, 255, .6) !important;
|
}
|
|
.other-class .layui-layer-title {
|
background: #777;
|
font-weight: bold;
|
color: #fff;
|
}
|
|
.other-class .layui-layer-content {
|
background: rgba(0, 0, 0, 0);
|
}
|
|
.layui-layer-setwin .layui-layer-close1 {
|
background-position: -95px -130px;
|
}
|
|
.layui-layer-iframe {
|
overflow-y: hidden!important;
|
}
|
|
.smartEarthBlackPanel {
|
min-width: 90px;
|
min-height: 35px;
|
position: absolute;
|
left: 16px;
|
bottom: 31px;
|
cursor: default;
|
border-radius: 4px;
|
opacity: 0.96;
|
border: 1px solid #14171c;
|
box-shadow: 0px 2px 21px 0px rgb(33 34 39 / 55%);
|
border-radius: 4px;
|
box-sizing: border-box;
|
background: linear-gradient(0deg, #1e202a 0%, #0d1013 100%);
|
}
|
|
.smartEarthBlackPanel::before {
|
content: "";
|
width: calc(100% + 22px);
|
height: 39px;
|
position: absolute;
|
bottom: -39px;
|
left: -22px;
|
background: url(../image/popupLbl.png) 0px 0px no-repeat;
|
background-position: 0px 0px;
|
}
|
|
|
|
.smartEarthBlackPanel-text {
|
width: 100%;
|
height: 100%;
|
min-height: 33px;
|
text-align: center;
|
padding: 10px 5px 0 5px;
|
margin: 0;
|
font-size: 14px;
|
font-weight: 400;
|
color: #ffffff;
|
border: 1px solid #ffffff4f;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
white-space: nowrap;
|
}
|
|
.smartEarth3d-divBoderLabel {
|
position: absolute;
|
left: 0px;
|
bottom: 0px;
|
cursor: pointer;
|
--animation-name: mars3d-divBoderLabel-animation;
|
--text-left-position: -75px;
|
--text-font-size: 15px;
|
--boder-width: 162px;
|
--clip-width-1: 177px;
|
--clip-width-2: 175px;
|
--boder-height: 30px;
|
--clip-height-1: 40px;
|
--clip-height-2: 38px;
|
--text-color: #ccc;
|
--border-color: #15d1f2;
|
--box-shadow-color: rgba(21, 209, 242, 0.56);
|
}
|
|
.smartEarth3d-divBoderLabel-boder,
|
.smartEarth3d-divBoderLabel-boder::before,
|
.smartEarth3d-divBoderLabel-boder::after {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
}
|
|
|
|
.smartEarth3d-divBoderLabel-boder {
|
width: var(--boder-width);
|
height: var(--boder-height);
|
margin: auto;
|
color: var(--border-color);
|
box-shadow: inset 0 0 0 1px var(--box-shadow-color);
|
}
|
|
.smartEarth3d-divBoderLabel-boder::before {
|
animation-delay: -4s;
|
}
|
|
.smartEarth3d-divBoderLabel-boder::before,
|
.smartEarth3d-divBoderLabel-boder::after {
|
content: "";
|
margin: -5%;
|
box-shadow: inset 0 0 0 2px;
|
animation: mars3d-divBoderLabel-animation 8s linear infinite;
|
}
|
|
|
.smartEarth3d-divBoderLabel-text {
|
color: var(--text-color);
|
font-size: var(--text-font-size);
|
display: flex;
|
width: 100%;
|
height: 100%;
|
align-items: center;
|
justify-content: center;
|
font-weight: bolder;
|
user-select: none;
|
cursor: pointer;
|
}
|
|
|
|
|
|
|
@keyframes mars3d-divBoderLabel-animation {
|
|
0%,
|
100% {
|
clip: rect(0px, var(--clip-width-1), 2px, 0px);
|
}
|
|
25% {
|
clip: rect(0px, 2px, var(--clip-height-1), 0px);
|
}
|
|
50% {
|
clip: rect(var(--clip-height-2), var(--clip-width-1), var(--clip-width-1), 0px);
|
}
|
|
75% {
|
clip: rect(0px, var(--clip-width-1), var(--clip-height-1), var(--clip-width-2));
|
}
|
}
|
|
.smartErath3d-divGraphic {
|
position: absolute;
|
left: 0;
|
top: 0;
|
|
}
|
|
.smartErath3d-animation-point {
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
border: 1px solid hsla(0, 0%, 100%, 0.5);
|
cursor: pointer;
|
color: #0ff;
|
background: currentColor;
|
z-index: 3;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
box-shadow: 0 0 2em currentColor, 0 0 0.5em currentColor;
|
position: absolute;
|
}
|
|
.smartErath3d-animation-point:after,
|
.smartErath3d-animation-point:before,
|
.smartErath3d-animation-point p:after,
|
.smartErath3d-animation-point p:before {
|
content: "";
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
left: 50%;
|
top: 50%;
|
border-radius: 50%;
|
transform: translate(-50%, -50%);
|
}
|
|
.smartErath3d-animation-point:after,
|
.smartErath3d-animation-point:before {
|
border: 1px solid;
|
animation: smartErath3d-animation-point-mapAni 1s ease infinite;
|
|
}
|
|
.smartErath3d-animation-point p:before {
|
border: 1px solid;
|
}
|
|
.smartErath3d-animation-point,
|
.smartErath3d-animation-point:after,
|
.smartErath3d-animation-point:before,
|
.smartErath3d-animation-point p,
|
.smartErath3d-animation-point p:after,
|
.smartErath3d-animation-point p:before {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
|
.smartErath3d-animation-point p {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
width: 0;
|
height: 0;
|
border-radius: 50%;
|
-webkit-transform: translate(-50%, -50%);
|
-moz-transform: translate(-50%, -50%);
|
-o-transform: translate(-50%, -50%);
|
-ms-transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
-webkit-animation: smartErath3d-animation-point-mapAni 2s ease infinite;
|
-moz-animation: smartErath3d-animation-point-mapAni 2s ease infinite;
|
-o-animation: smartErath3d-animation-point-mapAni 2s ease infinite;
|
-ms-animation: smartErath3d-animation-point-mapAni 2s ease infinite;
|
animation: smartErath3d-animation-point-mapAni 2s ease infinite;
|
}
|
|
.smartErath3d-wave-main,
|
.smartErath3d-wave {
|
width: 100px;
|
height: 100px;
|
border-radius: 50%;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
.smartErath3d-wave {
|
|
background: darkturquoise;
|
overflow: hidden;
|
|
}
|
|
.smartErath3d-wave:after {
|
content: "";
|
width: 112px;
|
height: 110px;
|
background: rgba(255, 255, 255, 0.8);
|
position: absolute;
|
left: 50%;
|
top: -5%;
|
transform: var(--transform);
|
border-radius: 40%;
|
animation: smartErath3d-wave 5s linear infinite;
|
|
}
|
|
.smartErath3d-wave::before {
|
content: var(--text-context);
|
position: absolute;
|
left: 50%;
|
top: 0;
|
color: rgb(23, 164, 166);
|
z-index: 99;
|
transform: translate(-50%, 17px);
|
|
}
|
|
@keyframes smartErath3d-wave {
|
100% {
|
transform: var(--transform) rotate(360deg);
|
}
|
}
|
|
@-webkit-keyframes smartErath3d-animation-point-mapAni {
|
0% {
|
width: 0;
|
height: 0;
|
opacity: 1;
|
filter: alpha(opacity=1);
|
}
|
|
25% {
|
width: 120%;
|
height: 120%;
|
opacity: 0.7;
|
filter: alpha(opacity=70);
|
}
|
|
50% {
|
width: 200%;
|
height: 200%;
|
opacity: 0.5;
|
filter: alpha(opacity=50);
|
}
|
|
75% {
|
width: 300%;
|
height: 300%;
|
opacity: 0.2;
|
filter: alpha(opacity=20);
|
}
|
|
to {
|
width: 400%;
|
height: 400%;
|
opacity: 0;
|
filter: alpha(opacity=0);
|
}
|
}
|
|
@-moz-keyframes smartErath3d-animation-point-mapAni {
|
0% {
|
width: 0;
|
height: 0;
|
opacity: 1;
|
filter: alpha(opacity=1);
|
}
|
|
25% {
|
width: 120%;
|
height: 120%;
|
opacity: 0.7;
|
filter: alpha(opacity=70);
|
}
|
|
50% {
|
width: 200%;
|
height: 200%;
|
opacity: 0.5;
|
filter: alpha(opacity=50);
|
}
|
|
75% {
|
width: 300%;
|
height: 300%;
|
opacity: 0.2;
|
filter: alpha(opacity=20);
|
}
|
|
to {
|
width: 400%;
|
height: 400%;
|
opacity: 0;
|
filter: alpha(opacity=0);
|
}
|
}
|
|
@-o-keyframes smartErath3d-animation-point-mapAni {
|
0% {
|
width: 0;
|
height: 0;
|
opacity: 1;
|
filter: alpha(opacity=1);
|
}
|
|
25% {
|
width: 120%;
|
height: 120%;
|
opacity: 0.7;
|
filter: alpha(opacity=70);
|
}
|
|
50% {
|
width: 200%;
|
height: 200%;
|
opacity: 0.5;
|
filter: alpha(opacity=50);
|
}
|
|
75% {
|
width: 300%;
|
height: 300%;
|
opacity: 0.2;
|
filter: alpha(opacity=20);
|
}
|
|
to {
|
width: 400%;
|
height: 400%;
|
opacity: 0;
|
filter: alpha(opacity=0);
|
}
|
}
|
|
@-ms-keyframes smartErath3d-animation-point-mapAni {
|
0% {
|
width: 0;
|
height: 0;
|
opacity: 1;
|
filter: alpha(opacity=1);
|
}
|
|
25% {
|
width: 120%;
|
height: 120%;
|
opacity: 0.7;
|
filter: alpha(opacity=70);
|
}
|
|
50% {
|
width: 200%;
|
height: 200%;
|
opacity: 0.5;
|
filter: alpha(opacity=50);
|
}
|
|
75% {
|
width: 300%;
|
height: 300%;
|
opacity: 0.2;
|
filter: alpha(opacity=20);
|
}
|
|
to {
|
width: 400%;
|
height: 400%;
|
opacity: 0;
|
filter: alpha(opacity=0);
|
}
|
}
|
|
@keyframes smartErath3d-animation-point-mapAni {
|
0% {
|
width: 0;
|
height: 0;
|
opacity: 1;
|
filter: alpha(opacity=1);
|
}
|
|
25% {
|
width: 120%;
|
height: 120%;
|
opacity: 0.7;
|
filter: alpha(opacity=70);
|
}
|
|
50% {
|
width: 200%;
|
height: 200%;
|
opacity: 0.5;
|
filter: alpha(opacity=50);
|
}
|
|
75% {
|
width: 300%;
|
height: 300%;
|
opacity: 0.2;
|
filter: alpha(opacity=20);
|
}
|
|
to {
|
width: 400%;
|
height: 400%;
|
opacity: 0;
|
filter: alpha(opacity=0);
|
}
|
}
|
