/** * nth-tabs * author:nethuige * version:2.0 */ .hor-menu{ width:100%; float:left; border-bottom: 1px solid #eee; } .nth-tabs { color: #000; /* font-family: "Helvetica Neue",Helvetica,Tahoma,Arial,"Microsoft Yahei","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif; */ width: 100%; height: 30px; background: #fff; /*background-image: url(./titlebg.png); background: #ECEFF8; */ } .nth-tabs .page-tabs { width: 100%; height: 30px; } .nth-tabs .content-tabs { /* width: calc(100% - 285px); */ width: 100%; height: 100%; background: initial; overflow: hidden; margin-left:45px; } .nth-tabs .content-tabs-container { width: 500%; /* margin-left: 5px; */ overflow: hidden; height: 30px; transition: margin-left 1s; -moz-transition: margin-left 1s; -webkit-transition: margin-left 1s; -o-transition: margin-left 1s; } .tab-content{ overflow: auto; height: calc(100% - 30px); width: 100%; /* height: 100%; */ } .nth-tabs,.tab-pane{ height: 100%; /* height: calc(100% - 40px); */ } .nth-tabs-content{ width:100%; height: 100%; /*height: calc(100% - 40px);*/ position: relative; overflow-x: hidden; } .nth-tabs-frame{ width:100%; height:calc(100% - 5px); position: relative; overflow-x: hidden; } /*选项卡操作相关*/ .nth-tabs .roll-nav { color: #000; position: absolute; width: 45px; height: 30px; text-align: center; z-index: 2; top: 50px; padding-top: 5px; /*font-size: 20px; border-left: 1px solid #FFFFFF; */ } @media (max-width: 600px){ .nth-tabs .roll-nav { top: 100px; } .sidebar-open .nth-tabs .roll-nav { top: 0px; } } .nth-tabs a.roll-nav:hover { color: #fff !important; background-color: #367fa9; text-decoration: none; } .nth-tabs a.roll-nav:active,.nth-tabs a.roll-nav:visited { color: #000; /* color: #000; */ } .nth-tabs .roll-nav-left { border-right: 1px solid #ddd; /*border-left: 1px solid #ddd; border-right: 1px solid #A1A3A5; left: 0; border-bottom: 1px solid #E4EAEC;*/ } .roll-nav-left span{ display: block; font-size: 13px; /* border-right: 1px solid #A1A3A5; */ } .nth-tabs .roll-nav-right { right: 45px; border-right: 1px solid #ddd; border-left: 1px solid #ddd; /* right: 200px; right: 40px; border-bottom: 1px solid #E4EAEC; */ } .roll-nav-right span{ display: block; font-size: 13px; /* border-right: 1px solid #A1A3A5; */ } .nth-tabs .roll-nav-allclose { right: 0px; /* right: 200px; border-right: 1px solid #A1A3A5; border-left: 1px solid #A1A3A5; right: 40px; border-bottom: 1px solid #E4EAEC; */ } .nth-tabs a.tab-icon:active,.nth-tabs a.tab-icon:visited { color: #FFA14F; } .nav-tabs>li.active>a>.tab-icon, .nav-tabs>li.active>a>.tab-icon:focus, .nav-tabs>li.active>a>.tab-icon:hover { color: #FFA14F; } .nth-tabs .tab-icon { color: #ccc; text-align: center; margin-right: 10px; font-size: 12px; } .nth-tabs .tab-close { /* position: absolute; top: 17px; right: 10px; */ width: 16px; height: 16px; text-align: center; line-height: 16px; /* color: #bebebe; */ margin-left: 10px; } .nth-tabs .tab-close:hover { background-color: #f96868; border-radius: 16px; color: #fff; cursor: pointer; } .nth-tabs .tab-refresh { width: 16px; height: 16px; text-align: center; line-height: 16px; margin-left: 10px; } .nth-tabs .tab-refresh:hover { background-color: #3c8dbc; border-radius: 16px; color: #fff; cursor: pointer; } .nth-tabs .tab-down{ /* border-top: 4px solid; -webkit-transition: .25s; -o-transition: .25s; transition: .25s; -webkit-transform: scale(1.001); -ms-transform: scale(1.001); -o-transform: scale(1.001); transform: scale(1.001); display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; */ } /*tab list*/ .nth-tabs .right-nav-list { right: 40px; padding-top: 0px; /* border-right: 1px solid #A1A3A5; border-bottom: 1px solid #E4EAEC; */ } .nth-tabs .right-nav-list a { /* padding:14px 16px 12px 14px; */ color: #000; } .nth-tabs .right-nav-list a:hover { color: #fff !important; background-color: #367fa9; } /*tab-other*/ .nth-tabs .right-menu { right: 105px; } .nth-tabs .right-mess { right: 60px; } .nth-tabs .right-out { font-size: 16px; right: 15px; } .nth-tabs .roll-right { /* border-right: 1px solid #A1A3A5; */ } .nth-tabs .roll-right a { color: #000; } .badge{ position: absolute; top: 0px; right: 0px; font-weight: 100; padding: 3px; } .nth-tabs .roll-right .badge.badge-default { background-color: #36c6d3; color: #000fff; } .nth-tabs .roll-right a:hover { color: #fff !important; background-color: #367fa9; } .tab-list-scrollbar { max-height: 250px; max-width: 180px; } .dropdown-toggle{ /* padding: 15px 16px 7px 15px; */ padding-top: 6px; display: block; height: 100%; text-decoration: none; font-size: 10px; } .dropdown-toggle:hover { color: #fff !important; background-color: #367fa9; text-decoration: none; } .dropdown-menu{ background-color:#fafafa !important; z-index: 99999999 !important; /*left: -141px !important;*/ } .dropdown-menu ul { list-style: none; margin: 0px; text-align: left; padding: 0px; } .dropdown-menu ul li { line-height: 30px; padding: 0px 20px; white-space: nowrap; } .dropdown-menu ul li:hover { background-color: #367fa9; color: #fff; cursor: pointer; text-decoration: none; } .scrollbar-outer { overflow: hidden; } /*重写tab*/ .nav-tabs { /* background-color: #FFFFFF; */ min-height: 20px; margin:0px; float:left; } .nav-tabs a { /* color: #000; */ color: #bebebe; border-radius: 0; } .nav-tabs>li{ /* width:8.1em; margin:10px 2px; */ } .nav-tabs>li>a { /* padding:13px; min-height:22px; padding: 5px 15px; border-radius:4px;*/ margin-right: 0px; text-align: center; min-height: 20px; padding: 5px 10px; border-right: 1px solid #ddd; border-radius:0px; /* border-radius:5px; */ font-weight: bold; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { /* border:1px solid transparent; */ /* background-color: #FFA14F !important; */ /* color: #fff; */ border: 0; border-right: 1px solid #ddd; color: #000; cursor: pointer; -webkit-transition-property: background-color,border-bottom; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; -moz-transition-property: background-color,border-bottom; -moz-transition-duration: 0.2s; -moz-transition-timing-function: ease; -o-transition-property: background-color,border-bottom; -o-transition-duration: 0.2s; -o-transition-timing-function: ease; } .nav>li>a:focus, .nav>li>a:hover { background-color: #367fa9; color: #fff; } /*animation*/ [class*=animation-] { -webkit-animation-duration: .5s; -o-animation-duration: .5s; animation-duration: .5s; -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animation-fade { -webkit-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: .8s; -o-animation-duration: .8s; animation-duration: .8s; -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }