You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
GCSGUI/src/components/styles/cesium-compass.css

191 lines
3.8 KiB
CSS

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/*重写比例尺、罗盘、缩放控件样式 */
/*比例尺背景*/
.distance-legend {
position: absolute;
padding-left: 0;
padding-right: 0;
right: .1rem;
height: 2rem;
bottom: .2rem;
font-weight: bolder;
box-sizing: content-box;
z-index: 2;
}
/*比例尺文本*/
.distance-legend-label {
display: inline-block;
font-family: 'Roboto', sans-serif;
padding-left: .5rem;
font-size: .9rem;
line-height: 1rem;
color: #FFFFFF;
width: 7.5rem;
text-align: center;
}
/*比例尺线段*/
.distance-legend-scale-bar {
border-left: .1rem solid #FFFFFF;
border-right: .1rem solid #FFFFFF;
border-bottom: .1rem solid #FFFFFF;
position: absolute;
height: .7rem;
top: 1rem;
}
@media print {
.distance-legend {
display: none;
}
}
@media screen and (max-width: 700px),
screen and (max-height: 420px) {
.distance-legend {
display: none;
}
}
/*缩放按钮外边框*/
.navigation-controls {
position: absolute;
right: 1.8rem;
top: 65vh;
width: 2rem;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: .3rem .3rem .3rem .3rem;
font-weight: 300;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.naviagation-control:active {
color: #FFF;
}
.navigation-control-last {
cursor: pointer;
border-bottom: 1px solid #b5b4b4;
border-bottom: 0;
}
/* + 按钮*/
.navigation-control-icon-zoom-in {
position: relative;
text-align: center;
font-size: 1.2rem;
color: #FFFFFF;
padding-bottom: 4px;
}
.navigation-control-icon-zoom-in:hover {
background: rgba(204, 204, 204, 0.78);
border-radius: .3rem .3rem 0 0;
}
/* - 按钮*/
.navigation-control-icon-zoom-out {
position: relative;
text-align: center;
font-size: 1.4rem;
color: #FFFFFF;
}
.navigation-control-icon-zoom-out:hover {
background: rgba(204, 204, 204, 0.78);
border-radius: 0 0 .3rem .3rem;
}
/* reset 按钮*/
.navigation-control-icon-reset {
position: relative;
height: 0;
fill: rgba(255, 255, 255, 0.8);
padding: 0 0 0 0; /* 显示reset按钮 padding: 0 0 1.5rem 0; */
box-sizing: content-box;
}
/*罗盘*/
.compass {
pointer-events: auto;
position: absolute;
right: 0;
top: 50vh;
width: 6rem;
height: 6rem;
overflow: hidden;
}
.compass-outer-ring {
position: absolute;
top: 0;
width: 6rem;;
height: 6rem;;
fill: rgba(255, 255, 255, 0.5);
}
.compass-outer-ring-background {
position: absolute;
top: 14px;
left: 14px;
width: 44px;
height: 44px;
border-radius: 44px;
border: 12px solid rgba(47, 53, 60, 0.8);
box-sizing: content-box;
}
.compass-gyro {
pointer-events: none;
position: absolute;
top: 0;
width: 95px;
height: 95px;
fill: #faf6f6;
}
.compass-gyro-active {
fill: #68ADFE;
}
.compass-gyro-background {
position: absolute;
top: 31px;
left: 31px;
width: 2rem;
height: 2rem;
border-radius: 33px;
background-color: rgba(47, 53, 60, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: content-box;
}
.compass-gyro-background:hover+.compass-gyro {
fill: #68ADFE;
}
.compass-rotation-marker {
position: absolute;
top: 0;
width: 95px;
height: 95px;
fill: #68ADFE;
}
@media screen and (max-width: 700px),
screen and (max-height: 420px) {
.navigation-controls {
display: none;
}
.compass {
display: none;
}
}
@media print {
.navigation-controls {
display: none;
}
.compass {
display: none;
}
}