143 lines
10 KiB
CSS
143 lines
10 KiB
CSS
/*********************************
|
|
主页面布局样式文件
|
|
**********************************/
|
|
|
|
/*********************************
|
|
菜单图标样式
|
|
**********************************/
|
|
.gtja-img { height: 25px; margin: 11px; }
|
|
.gtja-title { margin: 0px; color: #4b545c; font-weight: 600; font-size: 18px; line-height: 44px; }
|
|
.menu-icon { background: url(/Images/navmenu.png); height: 24px; }
|
|
.iconone { background-position: 0px -4px; }
|
|
.icontwo { background-position: 0px 391px; }
|
|
.iconthree { background-position: 0px 321px; }
|
|
.iconfour { background-position: 0px 283px; }
|
|
.iconfive { background-position: 0px 254px; }
|
|
.iconsix { background-position: 0px 217px; }
|
|
.iconseven { background-position: 0px 179px; }
|
|
.iconeight { background-position: 0px 145px; }
|
|
.iconnine { background-position: 0px 107px; }
|
|
.iconten { background-position: 0px 75px; }
|
|
.iconteleven { background-position: 0px 358px; }
|
|
|
|
/**************************************
|
|
page布局
|
|
**************************************/
|
|
.layout-main { height: 100%; }
|
|
.page-header { background: #fff; border-bottom-style: solid; border-bottom-width: 1px; border-color: lightgray; box-shadow: 0 0 0 0.1rem rgba(200, 200, 200, 0.5); margin: 0 0 1rem 0; /*padding: 1rem 1rem 1rem 1rem;*/ }
|
|
.panel-default .panel-title > .small, .panel-default .panel-title > .small > a, .panel-default .panel-title > a, .panel-default .panel-title > small, .panel-default .panel-title > small > a { color: #2b2b2b }
|
|
.page-container { min-height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex }
|
|
.page-container:not(.container) { width: 100% }
|
|
.page-header { height: 47px }
|
|
.page-header .nav-right { padding: 6px 0 0; }
|
|
.page-header .nav-link { color: #445175; }
|
|
.page-header-fixed .page-header { position: fixed; z-index: 99; left: 190px; right: 0; top: 0 }
|
|
.page-header-fixed .page-container.container .page-header { padding-right: 15px; padding-left: 195px; left: 0; right: 0; margin: auto }
|
|
.page-header-fixed.page-sidebar-collapsed .page-container.container .page-header { padding-right: 15px; padding-left: 75px; left: 0; right: 0; margin: auto }
|
|
.dropdown-notify > a:after { display: none; }
|
|
.dropdown-notify > .dropdown-menu { width: 200px; margin-left: -80px; }
|
|
|
|
@media(min-width:768px) {
|
|
.page-header-fixed .page-container.container .page-header { width: 750px }
|
|
}
|
|
|
|
@media(min-width:992px) {
|
|
.sidebar-toggle-visible { display: none; }
|
|
.page-header-fixed .page-container.container .page-header { width: 970px }
|
|
}
|
|
|
|
@media(min-width:1200px) {
|
|
.page-header-fixed .page-container.container .page-header { width: 1170px }
|
|
}
|
|
|
|
.page-sidebar-collapsed.page-header-fixed .page-header { left: 50px }
|
|
.page-sidebar-fixed .page-header { z-index: 41 }
|
|
.accordion-menu .open:not(.active-page) > a { color: #fff; background: rgba(255,255,255,.1); margin: 0.1rem 0.4rem 0.1rem 0.4rem; border-radius: 0.25rem; font-weight: 500; }
|
|
.accordion-menu .active-page.open > a { font-weight: 500 }
|
|
.accordion-menu .active-page.open > a i { color: #2b2b2b }
|
|
|
|
.page-sidebar-menu ul li a i.accordion-icon { -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; line-height: 22px }
|
|
.page-sidebar { width: 190px; padding-top: 40px; background-color: #4b545c; border-right: 1px solid gray; box-shadow: 0 0 0.1rem 0 rgba(200, 200, 200, 0.5); }
|
|
.page-sidebar { min-height: 100%; float: left; z-index: 100; position: relative }
|
|
.page-sidebar-fixed .page-sidebar { position: fixed; top: 0; bottom: 0; z-index: 100; height: 100% !important }
|
|
.page-sidebar-fixed .page-sidebar .page-sidebar-inner { height: 100% !important; overflow: hidden }
|
|
.page-header-fixed .page-sidebar, .page-sidebar-fixed .page-sidebar, .page-sidebar-fixed.page-header-fixed .page-sidebar { padding-top: 81px }
|
|
.page-sidebar-fixed .page-sidebar .accordion-menu, .page-sidebar-menu { margin-top: 10px }
|
|
.page-sidebar-menu ul { padding: 0; margin: 0 }
|
|
.page-sidebar-menu ul li { list-style-type: none; position: relative }
|
|
.page-sidebar-menu ul li a { display: block; font-weight: 400; font-size: 14px; padding: 5px 20px 5px 5px; color: #fff; line-height: 1.5 !important; -webkit-font-smoothing: antialiased; position: relative; margin: 0.2rem 0.4rem 0.2rem 0.4rem; }
|
|
.page-sidebar-menu ul li.active-page > a i, .page-sidebar-menu ul li.active-page > a i.accordion-icon { color: #fff }
|
|
.page-sidebar-menu ul li.active-page > a { color: #fff; background: #e33333; margin: 0.2rem 0.4rem 0.2rem 0.4rem; border-radius: 0.25rem; font-weight: 500; position: relative }
|
|
.page-sidebar-menu ul li.active-page > a:hover { color: #fff; background: #e33333; margin: 0.2rem 0.4rem 0.2rem 0.4rem; border-radius: 0.25rem; font-weight: 500; position: relative }
|
|
.page-sidebar-menu ul li a:link { text-decoration: none }
|
|
.page-sidebar-menu > ul > li > a:hover { color: #fff; background: rgba(255,255,255,.1); margin: 0.2rem 0.4rem 0.2rem 0.4rem; border-radius: 0.25rem; }
|
|
.page-sidebar-menu > ul > li > a:hover, .page-sidebar-menu > ul > li > a:hover i.accordion-icon { text-decoration: none }
|
|
.page-sidebar-menu ul li a i.menu-icon { display: inline-block; min-width: 30px; margin-bottom: -3px }
|
|
.page-sidebar-menu ul li a span { vertical-align: middle }
|
|
.page-sidebar-menu ul li.menu-divider { display: block; width: 100%; height: 1px; background-color: #e5e9ec; margin: 10px 0 }
|
|
.page-sidebar-menu ul li a i.accordion-icon { float: right; font-size: 15px; vertical-align: text-top; color: #fff; transition: all .2s; margin-top: 3px }
|
|
.page-sidebar-menu ul li a span.label { margin: 3px 0; float: right }
|
|
.page-sidebar-menu ul li.open a i.accordion-icon { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-3) }
|
|
.page-sidebar-menu ul li .sub-menu a:hover { color: #fff; background: rgba(255,255,255,.1); margin: 0.2rem 0.4rem 0.2rem 0.4rem; border-radius: 0.25rem; }
|
|
.accordion-menu .sub-menu { display: none; padding-bottom: 8px }
|
|
.accordion-menu > li.open > .sub-menu { display: block; }
|
|
.page-sidebar-collapsed .accordion-menu .sub-menu { padding-bottom: 0; padding-left: 0 }
|
|
.accordion-menu .sub-menu li a { border-top: 0; padding: 7px 20px 7px 35px; font-size: 13px; color: #fff }
|
|
.accordion-menu .sub-menu li.active > a { color: #343a40; background: rgba(255,255,255,.9); margin: 0.2rem 0.5rem 0.2rem 0.5rem; border-radius: 0.25rem; }
|
|
.page-sidebar-collapsed .page-sidebar { width: 50px }
|
|
.page-sidebar-collapsed.page-sidebar-fixed .page-sidebar { height: 100% }
|
|
.page-sidebar-collapsed .page-sidebar .page-sidebar-inner { height: 100%; overflow: hidden !important }
|
|
.page-sidebar-collapsed .page-sidebar-menu > ul > li { width: 50px; position: relative }
|
|
.page-sidebar-collapsed .page-sidebar-menu > ul > li > a { width: 50px; padding: 5px; position: relative }
|
|
.page-sidebar-collapsed .page-sidebar-menu > ul > li > a > i.menu-icon { margin-right: 20.5px }
|
|
.page-sidebar-collapsed .page-sidebar-menu ul li .sub-menu, .page-sidebar-collapsed .page-sidebar-menu ul li.active-page .sub-menu, .page-sidebar-collapsed .page-sidebar-menu ul li.open .sub-menu { display: none !important; width: 170px }
|
|
.page-sidebar-collapsed .page-sidebar-menu ul li a span:not(.label) { padding-left: 25px }
|
|
.page-sidebar-collapsed .page-sidebar-menu ul li a i.accordion-icon, .page-sidebar-collapsed .page-sidebar-menu ul li a span { display: none }
|
|
.page-sidebar-collapsed .page-sidebar-menu ul li .sub-menu { position: absolute; left: 50px; z-index: 9999; padding-bottom: 14px }
|
|
.page-sidebar-collapsed .page-sidebar-menu ul li .sub-menu a { opacity: 1; padding: 8px 25px }
|
|
.page-sidebar-collapsed .page-sidebar-menu ul li .sub-menu:hover, .page-sidebar-collapsed .page-sidebar-menu ul li a:hover span, .page-sidebar-collapsed .page-sidebar-menu ul li a:hover + .sub-menu, .page-sidebar-collapsed .page-sidebar-menu ul li:hover a span { display: inline !important }
|
|
.page-sidebar-collapsed .page-sidebar-menu > ul > li:hover > a { width: 230px; background: #f7f7f7 }
|
|
.page-main { min-height: 56px; vertical-align: bottom; background: #f5f5f5; width: calc(100% - 190px); float: right }
|
|
.page-sidebar-collapsed .page-main { width: calc(100% - 50px) }
|
|
.page-sidebar-fixed .page-main { margin-left: 190px }
|
|
.page-sidebar-fixed.page-sidebar-collapsed .page-main { margin-left: 50px }
|
|
.page-inner { position: relative; min-height: calc(100% - 102px); background: #f5f5f5; }
|
|
.page-header-fixed .page-inner { margin-top: 81px }
|
|
.page-footer { bottom: 0; left: 0; right: 0; text-align: center; }
|
|
|
|
@media(max-width:991px) {
|
|
.page-header-fixed .page-header { left: 0 }
|
|
.page-sidebar { position: fixed !important; left: -190px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
|
|
.page-main, .page-sidebar-collapsed .page-main { width: 100% }
|
|
.page-sidebar-fixed .page-main, .page-sidebar-fixed.page-sidebar-collapsed .page-main { margin-left: 0 }
|
|
.page-header { padding-left: 25px }
|
|
.page-sidebar-visible .page-sidebar { left: 0 }
|
|
.page-error .page-inner { vertical-align: top; }
|
|
}
|
|
|
|
/**************************************
|
|
page 导航条
|
|
**************************************/
|
|
.page-sidebar-toggle .toggle-collapse { display: block; height: 20px; background: url(/Images/nail2.png) no-repeat; background-size: 20px; background-position-x: 50%; }
|
|
.page-sidebar-toggle .toggle-collapse.using { background-image: url(/Images/nail.png); }
|
|
.page-sidebar-collapsed .toggle-collapse { display: none; }
|
|
.page-title .breadcrumb { background-color: #f5f5f5; height: 2rem; line-height: 2.2rem; padding: 0 0 0 12px; margin-bottom: 8px; }
|
|
.page-title .breadcrumb > .breadcrumb-item { padding: 0; font-size: 1.1rem; }
|
|
|
|
/**************************************
|
|
infopage
|
|
**************************************/
|
|
/*.infopage { padding: 20px; }*/
|
|
|
|
/**************************************
|
|
toast
|
|
**************************************/
|
|
.toast-container { position: fixed; top: 20px; right: 0; width: 240px; z-index: 29999999; }
|
|
.toast-main { background: #405e8e; color: #fff; font-size: 13px; }
|
|
.toast-main > .toast-header { background: #405e8e; color: #fff; font-size: 13px; position: relative; }
|
|
.toast-main > .toast-body { background: #405e8e; color: #fff; font-size: 16px; line-height: 1.8; }
|
|
.toast-main:hover { -moz-box-shadow: 0 0 12px #000; -webkit-box-shadow: 0 0 12px #000; box-shadow: 0 0 12px #000; opacity: 1; cursor: pointer; }
|
|
.toast-main .close { color: orange; text-shadow: none; opacity: 1; font-weight: 800; visibility: hidden; }
|
|
.toast-main .close:focus, .toast-main .close:hover { outline: none; opacity: 1 !important; }
|
|
.toast-main:hover .close { visibility: visible; color: orange; }
|