ttrss/lib/dijit/themes/nihilo/layout/TabContainer.css

496 lines
13 KiB
CSS
Raw Normal View History

2011-11-08 16:40:44 +00:00
/**
* dijit.layout.TabContainer
*
* To style TabContainer with rounded corners
* you can use these classes: .dijitTab (left), .dijitTabContent (center), dijitTabInnerDiv (right)
* For tabs aligned to top you can style a stripe div right underneath the tabs using .dijitTabStripe
*/
@import url("../Menu.css");
/* Classes for all types of tabs (top/bottom/left/right) */
.nihilo .dijitTabContainer .tabStripRBtn {
margin-right: 21px;
}
.nihilo .dijitTabContainer .tabStripLBtn {
margin-left: 21px;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerBottom .nowrapTabStrip .dijitTab {
2011-11-08 16:40:44 +00:00
top: 0;
}
2011-11-08 16:40:44 +00:00
/* Tabs, shared classes */
.nihilo .dijitTabPaneWrapper {
background:#fff;
border:1px solid #ccc;
margin: 0;
padding: 0;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabInnerDiv {
2011-11-08 16:40:44 +00:00
padding:0 3px 0 0;
margin: 0 0 0 4px;
background: url("../images/tabContainerSprite.gif") no-repeat;
background-position: right -400px;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTab {
line-height:normal;
2011-11-08 16:40:44 +00:00
margin:0 2px 0 0; /* space between one tab and the next in top/bottom mode */
padding:0;
background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px;
color: #6d6d6d;
border-bottom: 1px #ccc solid;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabInnerDiv .dijitTabContent {
padding:3px 3px 3px 4px;
background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
position: relative;
}
2011-11-08 16:40:44 +00:00
/* hovered tab */
.nihilo .dijitTabHover {
color: #243C5F;
2011-11-08 16:40:44 +00:00
background: url("../images/tabContainerSprite.gif") no-repeat 0 -150px;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabHover .dijitTabInnerDiv {
background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
}
2011-11-08 16:40:44 +00:00
/* checked tab*/
.nihilo .dijitTabChecked
{
2011-11-08 16:40:44 +00:00
/* the selected tab (with or without hover) */
background: url("../images/tabContainerSprite.gif") no-repeat 0 -0;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabChecked .dijitTabInnerDiv {
background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
color: #243C5F !important;
}
2011-11-08 16:40:44 +00:00
/* Nested Tabs */
.nihilo .dijitTabContainerNested .dijitTabListWrapper {
height: auto;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerTabListNested {
background: #FDFDFD;
border: none;
2011-11-08 16:40:44 +00:00
margin-bottom: 0; /* override margin: -1px; */
}
.nihilo .dijitTabContainerTabListNested .dijitTab {
background: none;
border: none;
2011-11-08 16:40:44 +00:00
top: 0; /* override top:1px setting of top-level tabs */
}
.nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
.nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
background: none;
}
.nihilo .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
text-decoration: underline;
}
.nihilo .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
text-decoration: underline;
font-weight: bold;
}
.nihilo .dijitTabContainerSpacerNested {
2011-11-08 16:40:44 +00:00
/* thinner line between tab (labels) and content */
height: 0;
border-bottom: 0;
}
.nihilo .dijitTabPaneWrapperNested {
2011-11-08 16:40:44 +00:00
border: none; /* prevent double border */
}
2011-11-08 16:40:44 +00:00
/* Close button */
.nihilo .dijitTabCloseButton {
background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px top;
width: 15px;
height: 15px;
margin-top: -1px;
}
2011-11-08 16:40:44 +00:00
.dj_ie6 .nihilo .dijitTabCloseButton {
background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px top;
}
.nihilo .dijitTabCloseButtonHover {
background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px -15px;
}
.dj_ie6 .nihilo .dijitTabCloseButtonHover {
background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px -15px;
}
2011-11-08 16:40:44 +00:00
/* ================================ */
/* top tabs */
.nihilo .dijitTabContainerTop-tabs {
border-bottom: none;
padding-bottom: 1px;
background-position: bottom;
padding-left: 3px;
}
2011-11-08 16:40:44 +00:00
.dj_ie6 .nihilo .dijitTabListContainer-top,
.dj_ie7 .nihilo .dijitTabListContainer-top {
z-index: 3;
}
2011-11-08 16:40:44 +00:00
.dj_ie6 .nihilo .dijitTabContainerTop-tabs,
.dj_ie7 .nihilo .dijitTabContainerTop-tabs {
border-bottom: 1px solid #ccc;
2011-11-08 16:40:44 +00:00
padding-bottom: 0;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerTopNoStrip {
padding-top: 3px;
}
2011-11-08 16:40:44 +00:00
/* top container */
.nihilo .dijitTabContainerTop-container {
border-top: none;
}
2011-11-08 16:40:44 +00:00
/* checked tabs */
.nihilo .dijitTabContainerTop-tabs .dijitTabChecked {
border-bottom-color: #f8f8f8;
}
2011-11-08 16:40:44 +00:00
/* strip */
.nihilo .dijitTabContainer .dijitTabContainerTopStrip {
border-bottom: none;
padding-top: 1px;
margin-top: 1px;
background: #f2f2f2;
border-top: 1px solid #CCC;
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
}
2011-11-08 16:40:44 +00:00
/* ================================ */
/* bottom tabs */
.nihilo .dijitTabContainerBottom-tabs {
border-top: none;
background-position: top;
padding-left: 3px;
}
2011-11-08 16:40:44 +00:00
.dj_ie6 .nihilo .dijitTabListContainer-bottom,
.dj_ie7 .nihilo .dijitTabListContainer-bottom {
z-index: 3;
}
2011-11-08 16:40:44 +00:00
.dj_ie6 .nihilo .dijitTabContainerBottom-tabs,
.dj_ie7 .nihilo .dijitTabContainerBottom-tabs {
border-top: 1px solid #ccc;
margin-top: -1px;
}
2011-11-08 16:40:44 +00:00
/* bottom container */
.nihilo .dijitTabContainerBottom-container {
border-bottom: none;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerBottom-tabs .dijitTab {
border-bottom: none;
border-top: 1px solid #ccc;
background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
}
2011-11-08 16:40:44 +00:00
/* checked tabs */
.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
border-top-color: #f8f8f8;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
padding-top: 3px;
padding-bottom: 3px;
background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerBottom-tabs .dijitTabHover {
color: #243C5F;
background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
2011-11-08 16:40:44 +00:00
/* the selected tab (with or without hover) */
background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
}
2011-11-08 16:40:44 +00:00
/* strip */
.nihilo .dijitTabContainer .dijitTabContainerBottomStrip {
border: 1px solid #ccc;
background: #f2f2f2;
border-top: none;
padding-bottom: 2px;
}
2011-11-08 16:40:44 +00:00
/* top/bottom strip */
.nihilo .dijitTabContainerBottom-spacer,
.nihilo .dijitTabContainerTop-spacer {
height: 2px;
border: 1px solid #ccc;
background: #f8f8f8;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerTop-spacer {
margin-top: -1px;
}
.nihilo .dijitTabContainerBottom-spacer {
margin-bottom: -1px;
}
2011-11-08 16:40:44 +00:00
/* ================================ */
/* right tabs */
.nihilo .dijitTabContainerRight-tabs {
border-color: #ccc;
padding-top: 3px;
}
.nihilo .dijitTabContainerRight .dijitTabListWrapper {
padding-right: 3px;
}
2011-11-08 16:40:44 +00:00
/* right container */
.nihilo .dijitTabContainerRight-container {
border-right: none;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerRight-tabs .dijitTab {
border-bottom: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #dedede !important;
}
2011-11-08 16:40:44 +00:00
/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabInnerDiv {
border-bottom: solid #fff 1px;
}
2011-11-08 16:40:44 +00:00
/* checked tabs */
.nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
border-left-color: #f8f8f8;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
background: url("../images/tabRightChecked.gif") no-repeat left top !important;
}
2011-11-08 16:40:44 +00:00
/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
border-bottom: solid #efefef 1px;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerRight-tabs .dijitTab {
background: url("../images/tabContainerSprite.gif") no-repeat left -350px;
}
.nihilo .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
background: url("../images/tabContainerSprite.gif") no-repeat left -200px;
}
2011-11-08 16:40:44 +00:00
/* strip */
.nihilo .dijitTabContainerRightStrip {
padding-right: 2px;
border: 1px solid #ccc;
border-left: none;
background: #f2f2f2;
}
2011-11-08 16:40:44 +00:00
/* ================================ */
/* left tabs */
.nihilo .dijitTabContainerLeft-tabs {
border-color: #ccc;
padding-top: 3px;
}
2011-11-08 16:40:44 +00:00
/* left conatiner */
.nihilo .dijitTabContainerLeft-container {
border-left: none;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerLeft-tabs .dijitTab {
border-right: 1px solid #ccc;
border-bottom: 1px solid #dedede;
}
2011-11-08 16:40:44 +00:00
/* checked tabs */
.nihilo .dijitTabContainerLeft-tabs .dijitTabChecked {
border-right: 1px solid #f8f8f8;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
}
.nihilo .dijitTabContainerLeft-tabs .dijitTabHover .dijitTabInnerDiv {
background: url("../images/tabContainerSprite.gif") no-repeat right -200px;
}
.nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
.nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
background: url("../images/tabLeftChecked.gif") no-repeat right top;
}
2011-11-08 16:40:44 +00:00
.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
border-bottom: solid #efefef 1px;
}
2011-11-08 16:40:44 +00:00
.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
border-bottom: solid #fff 1px;
}
2011-11-08 16:40:44 +00:00
/* strip */
.nihilo .dijitTabContainerLeftStrip {
padding-left: 2px;
border: 1px solid #ccc;
border-right: none;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerLeftStrip {
background: #f2f2f2;
}
2011-11-08 16:40:44 +00:00
/* ================================ */
/* left/right tabs */
.nihilo .dijitTabContainerLeft-tabs .dijitTab,
.nihilo .dijitTabContainerRight-tabs .dijitTab {
margin-right:auto;
2011-11-08 16:40:44 +00:00
margin-bottom:2px; /* space between one tab and the next in left/right mode */
}
2011-11-08 16:40:44 +00:00
/* left/right tabstrip */
.nihilo .dijitTabContainerLeft-spacer,
.nihilo .dijitTabContainerRight-spacer {
width: 2px;
border: 1px solid #ccc;
background: #f8f8f8;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerRight-spacer {
border-right: none;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerRight-tabs {
padding-top: 3px;
height: 100%;
}
.nihilo .dijitTabContainerLeft-tabs {
height: 100%;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerLeft-spacer {
border-left: none;
}
2011-11-08 16:40:44 +00:00
/* ================================ */
/* this resets the tabcontainer stripe when within a contentpane */
.nihilo .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
2011-11-08 16:40:44 +00:00
border-left: 0 solid #ccc;
border-top: 0 solid #ccc;
border-right: 0 solid #ccc;
padding-top: 0;
padding-left: 0;
}
2011-11-08 16:40:44 +00:00
/* ================================ */
/* Menu and slider control styles */
.nihilo .dijitTabContainer .tabStripButton {
2011-11-08 16:40:44 +00:00
margin-right: 0;
}
2011-11-08 16:40:44 +00:00
.nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
padding: 5px 0 6px;
}
2011-11-08 16:40:44 +00:00
.dj_ie6 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
.dj_ie7 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
.dj_opera .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
padding-bottom: 7px;
}
2011-11-08 16:40:44 +00:00
.nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
padding: 3px 0 5px;
}
2011-11-08 16:40:44 +00:00
.dj_ie6 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
.dj_ie7 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
.dj_opera .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
padding-top: 4px;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabStripIcon {
height: 14px;
width: 14px;
background: url(../images/spriteRoundedIconsSmall.png) no-repeat left top;
}
2011-11-08 16:40:44 +00:00
.dj_ie6 .nihilo .dijitTabStripIcon {
background-image: url(../images/spriteRoundedIconsSmall.gif);
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabStripSlideRightIcon {
background-position: -30px top;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabStripMenuIcon {
background-position: -15px top;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainerTopNone {
2011-11-08 16:40:44 +00:00
padding-top: 0;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainer .tabStripButton-top {
margin-top: 1px;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainer .tabStripButton-bottom {
background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll left bottom;
border-bottom: medium none;
border-top: 1px solid #CCCCCC;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
}
2011-11-08 16:40:44 +00:00
.nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
background: transparent;
2011-11-08 16:40:44 +00:00
}