mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +00:00
652 lines
11 KiB
CSS
652 lines
11 KiB
CSS
.skin-blue .main-header .navbar .nav>li>a {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.navbar {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.navcontentfixed {
|
||
width: 100%;
|
||
height: 72px;
|
||
}
|
||
|
||
/* 头部右侧部分 */
|
||
.navbar-rightbar{
|
||
float: right;
|
||
margin-right: 24px;
|
||
font-size: 16px;
|
||
}
|
||
.navbar-rightbar>ul>li{
|
||
float: left;
|
||
height: 72px;
|
||
padding: 24px 16px;
|
||
position: relative;
|
||
}
|
||
.navbar-rightbar>ul>li>a{
|
||
display: inline-block;
|
||
line-height: 24px;
|
||
height: 24px;
|
||
font-weight: 400;
|
||
color: var(--text-color);
|
||
}
|
||
.navbar-rightbar>ul>li>a::before{
|
||
position: absolute;
|
||
display: inline-block;
|
||
top: calc((100% - 16px) / 2);
|
||
left: -16px;
|
||
margin: 0 16px;
|
||
background: var(--suffix-color);
|
||
width: 1px;
|
||
height: 16px;
|
||
content: "";
|
||
}
|
||
|
||
/*logo的样式*/
|
||
|
||
#logo {
|
||
width: 106px;
|
||
height: 48px;
|
||
margin: 12px 0;
|
||
display: inline-block;
|
||
}
|
||
|
||
.navbar .project-title {
|
||
text-decoration: none;
|
||
vertical-align: middle;
|
||
/* letter-spacing: -0.16px; */
|
||
font-weight: 400;
|
||
}
|
||
|
||
#title {
|
||
font-size: 16px;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.pre-release {
|
||
font-size: 12px;
|
||
color: var(--text-color-third);
|
||
vertical-align: super;
|
||
}
|
||
|
||
.main-header .sidebar-toggle {
|
||
float: left;
|
||
background-color: transparent;
|
||
background-image: none;
|
||
padding: 15px 17px;
|
||
}
|
||
|
||
.main-header .sidebar-toggle:before {
|
||
content: "\f03b";
|
||
}
|
||
|
||
/*头部选项选中时的颜色*/
|
||
|
||
.skin-blue .main-header .navbar .nav>li>a:hover,
|
||
.skin-blue .main-header .navbar .nav>li>a:active,
|
||
.skin-blue .main-header .navbar .nav>li>a:focus,
|
||
.skin-blue .main-header .navbar .nav .open>a,
|
||
.skin-blue .main-header .navbar .nav .open>a:hover,
|
||
.skin-blue .main-header .navbar .nav .open>a:focus {
|
||
background: transparent;
|
||
color: var(--active-color);
|
||
border: none;
|
||
/* border-color: transparent; */
|
||
}
|
||
|
||
.skin-blue .main-header .navbar .nav>li>a:hover {
|
||
background: transparent;
|
||
color: var(--active-color);
|
||
}
|
||
|
||
.navbar-toggle {
|
||
/* height: 72px; */
|
||
padding: 0;
|
||
}
|
||
|
||
.navbar-toggle>a::after {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: inline-block;
|
||
background: url(../img/svg/navheadermenu.svg);
|
||
content: '';
|
||
}
|
||
.navbar-toggle>a[aria-expanded="true"]::after {
|
||
background: url(../img/svg/navheadermenuclose.svg);
|
||
}
|
||
|
||
.navbar.default .navbar-title {
|
||
height: 100%;
|
||
/*width: 460px;*/
|
||
}
|
||
|
||
/*头部选项下拉菜单框的样式*/
|
||
|
||
.nav-header {
|
||
box-shadow: 0px 2px 4px 0px var(--shadow-color);
|
||
}
|
||
|
||
.navbar ul {
|
||
list-style: none outside none;
|
||
padding: 0;
|
||
}
|
||
|
||
|
||
.navbar-nav>li {
|
||
position: static !important;
|
||
height: 72px;
|
||
display: flex;
|
||
}
|
||
.navbar-nav>li.dropdown {
|
||
position: relative !important;
|
||
}
|
||
|
||
.navbar-nav>li>a {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.dropdown .dropdown-menu {
|
||
min-width: auto;
|
||
width: 120px;
|
||
padding: 4px 0;
|
||
left: 20px !important;
|
||
border: none;
|
||
border-radius: 4px !important;
|
||
background-color: var(--dropdown-background-color);
|
||
box-shadow: 0px 6px 18px 0px var(--dropdown-shadow-color);
|
||
display: none;
|
||
}
|
||
.navbar-rightbar .dropdown .dropdown-menu{
|
||
left: -20px !important;
|
||
}
|
||
.dropdown>.dropdown-box {
|
||
position: relative;
|
||
padding: 24px 20px;
|
||
}
|
||
.dropdown .dropdown-menu>li{
|
||
width: 120px
|
||
}
|
||
.dropdown .dropdown-menu>li>a{
|
||
color: var(--text-color);
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
padding: 9px 12px;
|
||
}
|
||
.dropdown .dropdown-menu>li>a:hover {
|
||
background-color: var(--dropdown-active-background);
|
||
color: var(--active-color);
|
||
}
|
||
|
||
.menu-sub-warp {
|
||
max-height: 0px;
|
||
}
|
||
|
||
.show_menu-sub-warp {
|
||
max-height: 660px;
|
||
transform-origin: 50% 0;
|
||
-webkit-transform-origin: 50% 0;
|
||
-moz-transform-origin: 50% 0;
|
||
transition: all .5s ease-out 0.2s;
|
||
-webkit-transition: all .5s ease-out 0.2s;
|
||
-moz-transition: all .5s ease-out 0.2s;
|
||
}
|
||
|
||
|
||
.navbar .project-log-container {
|
||
vertical-align: middle;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.lang-option {
|
||
cursor: pointer;
|
||
z-index: -1;
|
||
}
|
||
|
||
.menu-box {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 72px;
|
||
}
|
||
|
||
.menu-box .menu-sub-warp {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
overflow: auto;
|
||
line-height: normal;
|
||
color: white;
|
||
background-color: var(--background-color);
|
||
box-shadow: 0px 4px 16px 0px var(--border-color);
|
||
}
|
||
|
||
#versions-menu .icl-nav-menu-box {
|
||
padding: 0;
|
||
padding-left: 210px;
|
||
}
|
||
|
||
.menu-box .menu-sub-warp::-webkit-scrollbar {
|
||
width: 3px;
|
||
}
|
||
|
||
.menu-box .menu-sub-warp::-webkit-scrollbar-thumb {
|
||
border-radius: 12px;
|
||
background: rgba(0, 0, 0, .8);
|
||
}
|
||
|
||
.navbar-nav>li>a {
|
||
padding-bottom: 17px;
|
||
}
|
||
|
||
ul.icl-nav-menu-box {
|
||
margin: 0;
|
||
padding: 10px;
|
||
}
|
||
|
||
.icl-nav-menu-box>li {
|
||
display: inline-block;
|
||
vertical-align: text-top;
|
||
width: 160px;
|
||
margin-right: 56px;
|
||
text-align: left;
|
||
}
|
||
.icl-nav-menu-box>li:last-child{
|
||
margin-right: 0;
|
||
}
|
||
|
||
.navbar-nav>li>a {
|
||
padding: 24px 20px;
|
||
}
|
||
.navbar-nav>li>img {
|
||
margin: auto;
|
||
margin-left: -12px;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
li.navbar-menu>a{
|
||
text-shadow: 0px 2px 4px var(--shadow-color);
|
||
line-height: 24px;
|
||
}
|
||
li.navbar-menu>a:hover,
|
||
li.navbar-menu>a:focus {
|
||
outline: none;
|
||
}
|
||
|
||
li.navbar-menu:hover{
|
||
cursor: pointer;
|
||
}
|
||
|
||
.skin-blue .main-header .navbar .nav>.active>a{
|
||
background: transparent;
|
||
color: var(--active-color);
|
||
}
|
||
|
||
ul.icl-nav-menu-sub:nth-child(1) {
|
||
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||
}
|
||
|
||
.icl-nav-menu-title {
|
||
display: block;
|
||
color: var(--text-color);
|
||
font-size: 14px;
|
||
text-align: left;
|
||
margin: 20px 0 16px;
|
||
padding: 4px 0px;
|
||
}
|
||
|
||
.icl-nav-menu-title:link,
|
||
.icl-nav-menu-title:hover,
|
||
.icl-nav-menu-title:focus,
|
||
.icl-nav-menu-title:visited {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.icl-nav-menu-box li a:not(.disabled):hover,
|
||
.icl-nav-menu-box li a:not(.disabled):focus {
|
||
color: var(--active-color);
|
||
}
|
||
|
||
.icl-nav-menu-sub {
|
||
font-size: 1.4rem;
|
||
max-height: 600px;
|
||
margin-bottom: 10px;
|
||
/* overflow: auto; */
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.icl-nav-menu-sub a {
|
||
font-weight: 400;
|
||
color: var(--text-color-secondary);
|
||
}
|
||
|
||
.icl-nav-menu-sub li {
|
||
text-align: match-parent;
|
||
line-height: 22px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.icl-nav-menu-sub .red-circle {
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 6px;
|
||
position: absolute;
|
||
left: -10px;
|
||
top: 7px;
|
||
background: var(--active-color);
|
||
}
|
||
|
||
.icl-nav-menu-sub::-webkit-scrollbar {
|
||
width: 3px;
|
||
}
|
||
|
||
.icl-nav-menu-sub::-webkit-scrollbar-thumb {
|
||
border-radius: 12px;
|
||
background: rgba(0, 0, 0, .8);
|
||
}
|
||
|
||
.icl-nav-menu-item:not(.icl-nav-menu-overivew)>li:last-child {
|
||
width: 135px;
|
||
}
|
||
|
||
.icl-line {
|
||
width:1392px;
|
||
height: 1px;
|
||
background: rgba(255, 255, 255, 1);
|
||
opacity: 0.12;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
|
||
@media screen and (max-width: 1600px) {
|
||
#product-menu .tabbable .nav-tabs {
|
||
width: 296px;
|
||
}
|
||
.product-img img {
|
||
width: 272px;
|
||
height: 185px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1440px) {
|
||
.introduction-header .navbar-header {
|
||
margin: 0 8px;
|
||
}
|
||
.introduction-header #title {
|
||
font-size: 18px;
|
||
}
|
||
.introduction-header .navbar ul {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
|
||
@media screen and (max-width: 1199px) {
|
||
|
||
.navbar.default .navbar-toggle {
|
||
display: block;
|
||
float: right;
|
||
}
|
||
|
||
.navbar.default .navbar-collapse.collapse {
|
||
display: none !important;
|
||
}
|
||
|
||
#navbar-collapse.in {
|
||
display: flex !important;
|
||
}
|
||
|
||
}
|
||
|
||
@media screen and (max-width: 992px) {
|
||
|
||
/*尺寸小于992时下拉菜单的样式*/
|
||
.navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
|
||
border: 0;
|
||
background: #C30022;
|
||
}
|
||
|
||
.navbar-custom-menu>.navbar-nav>li>.dropdown-menu>li {
|
||
position: relative;
|
||
right: 0;
|
||
left: auto;
|
||
border: 0;
|
||
background: #C30022;
|
||
}
|
||
|
||
.icl-nav-menu-title {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.icl-nav-menu-overivew>li {
|
||
margin: 0 20px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
@media (max-width: 991px) {
|
||
.navbar-custom-menu>.navbar-nav>li {
|
||
position: relative;
|
||
}
|
||
.navbar-custom-menu .navbar-nav>li>a{
|
||
padding: 24px 20px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
|
||
position: absolute;
|
||
top: auto;
|
||
right: 0;
|
||
left: auto;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 826px) {
|
||
.icl-nav-menu-overivew>li {
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
|
||
|
||
.navbar-nav>li>.dropdown-menu {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.skin-blue .main-header .navbar .dropdown-menu li a {
|
||
color: var(--text-color);
|
||
}
|
||
.skin-blue .main-header .navbar .dropdown-menu li a:hover {
|
||
color: var(--active-color);
|
||
background-color: var(--dropdown-active-background);
|
||
}
|
||
|
||
/*尺寸小于768px时，logo和产品名称的样式*/
|
||
|
||
.navbar-header{
|
||
margin: 0 24px;
|
||
}
|
||
.navbar-rightbar{
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.navbar-toggle>img {
|
||
width: 34px;
|
||
height: 34px;
|
||
}
|
||
|
||
|
||
.pre-release {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.navbar-toggle {
|
||
height: 60px;
|
||
padding-left: 10px;
|
||
padding-top: 15px
|
||
}
|
||
|
||
.navbar-collapse.in {
|
||
overflow-y: visible;
|
||
}
|
||
|
||
.navbar-menu {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
|
||
@media screen and (max-width: 640px) {
|
||
.navbar-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 0 8px;
|
||
}
|
||
.navbar-rightbar{
|
||
margin-right: 0px;
|
||
}
|
||
|
||
}
|
||
|
||
@media screen and (max-width: 540px) {
|
||
.navbar-custom-menu>.navbar-nav>li.navbar-menu {
|
||
position: static;
|
||
}
|
||
|
||
.navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
|
||
position: absolute;
|
||
top: auto;
|
||
right: auto;
|
||
left: auto;
|
||
}
|
||
#title {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
/*尺寸小于510px时，logo和产品名称的样式，主要是为了适应iphone6 plus等移动端的浏览器*/
|
||
|
||
@media screen and (max-width: 510px) {
|
||
|
||
.navbar.default .navbar-toggle {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.navbar-rightbar>ul>li{
|
||
padding: 24px 12px;
|
||
}
|
||
|
||
#title {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.pre-release {
|
||
font-size: 8px;
|
||
}
|
||
|
||
/*尺寸小于510时,利用按钮展开的头部选项的样式*/
|
||
.navbar-custom-menu .navbar-nav>li>a {
|
||
padding: 24px 20px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.skin-blue .main-header .navbar .nav>li>a {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.navbar-toggle>img {
|
||
width: 28px;
|
||
}
|
||
|
||
}
|
||
|
||
@media screen and (max-width: 424px) {
|
||
.skin-blue .main-header .navbar .nav>li>a {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
/*尺寸小于410px时，logo、产品名称、右侧收缩按钮的样式，主要是为了适应iphone6等移动端的浏览器*/
|
||
|
||
@media screen and (max-width: 410px) {
|
||
|
||
#title {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.pre-release {
|
||
font-size: 5px;
|
||
}
|
||
|
||
.navbar-rightbar>ul>li{
|
||
padding: 24px 8px;
|
||
}
|
||
|
||
/*尺寸小于400时,利用按钮展开的头部选项的样式*/
|
||
.navbar-custom-menu .navbar-nav>li>a {
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
}
|
||
}
|
||
|
||
/*尺寸小于358px时，logo、产品名称、右侧收缩按钮的样式，主要是为了适应iphone5等移动端的浏览器*/
|
||
|
||
@media screen and (max-width: 358px) {
|
||
.navbar-rightbar>ul>li{
|
||
padding: 24px 6px;
|
||
}
|
||
|
||
#logo {
|
||
width: 22px;
|
||
}
|
||
.navbar-toggle>img {
|
||
width: 22px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.navbar-rightbar .arrow,
|
||
.navbar-nav>li>.arrow {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-left: -8px;
|
||
background: url('../img/arrowDown.png') no-repeat center center / contain;
|
||
|
||
|
||
}
|
||
.dark .navbar-rightbar .arrow,
|
||
.dark .navbar-nav>li>.arrow {
|
||
background-image: url('../img/arrowDown-dark.png');
|
||
line-height: 60px;
|
||
float: left;
|
||
margin-top: 30px;
|
||
}
|
||
.navbar-menu:hover .arrow,
|
||
.dropdown:hover .arrow {
|
||
rotate: 180deg;
|
||
}
|
||
.dropdown:hover .dropdown-menu{
|
||
display: block;
|
||
}
|
||
.navbar-nav li.navbar-menu>a{
|
||
text-shadow: 0px 2px 4px var(--shadow-color);
|
||
/* line-height: 24px;
|
||
height: 24px;
|
||
padding: 0; */
|
||
}
|
||
|
||
|