]> git.wh0rd.org - tt-rss.git/blobdiff - lib/dijit/themes/nihilo/layout/TabContainer.css
upgrade Dojo to 1.6.1
[tt-rss.git] / lib / dijit / themes / nihilo / layout / TabContainer.css
index 3652f229bd4199599defdeee24288190c098359e..21266577e0f675940e4dfbf2d429325de00e2fc5 100644 (file)
+/**
+ * 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 .dijitMenu,
-.nihilo .dijitMenuBar {
-       border: 1px solid #d3d3d3;
-       margin: 0px;
-       padding: 0px;
-       background-color: #fff;
-}
-.nihilo .dijitBorderContainer .dijitMenuBar {
-       border: 1px #ccc solid;
-}
-.nihilo .dijitMenuItem {
-       font-family: sans-serif;
-       margin: 0px;
-       color: #243C5F;
-}
-.nihilo .dijitMenuBar .dijitMenuItem {
-       padding: 4px 5px;
-}
-.nihilo .dijitMenuPreviousButton, .nihilo .dijitMenuNextButton {
-       font-style: italic;
-}
-.nihilo .dijitMenuItem TD {
-       padding:1px;
-}
-.nihilo .dijitMenuPassive .dijitMenuItemHover,
-.nihilo .dijitMenuItemSelected {
-       background-color: #ffe284; 
-       color: #243C5F;
-}
-.nihilo .dijitMenuItemIcon {
-       width: 15px;
-       height: 15px;
-}
-.nihilo .dijitMenuExpand {
-       width:15px;
-       height:15px;
-       background-image: url(../images/spriteRoundedIconsSmall.png);
-       background-position: -30px top;
-}
-.dj_ie6 .nihilo .dijitMenuExpand {
-       background-image:url(../images/spriteRoundedIconsSmall.gif);
-}
-.nihilo .dijitMenuSeparator {
-       height: 1px;
-}
-.nihilo .dijitMenuSeparatorTop {
-       border-bottom: 1px solid #fff; 
-}
-.nihilo .dijitMenuSeparatorBottom {
-       border-top: 1px solid #d3d3d3;
-}
-.nihilo .dijitCheckedMenuItemIconChar {
-       display: none;
-}
-.nihilo .dijitCheckedMenuItemIcon {
-       background-image: url(../images/spriteCheckbox.gif);
-       background-position: -80px;
-}
-.nihilo .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
-       background-position: -64px;
-}
 .nihilo .dijitTabContainer .tabStripRBtn {
        margin-right: 21px;
 }
 .nihilo .dijitTabContainer .tabStripLBtn {
        margin-left: 21px;
 }
+
 .nihilo .dijitTabContainerBottom .nowrapTabStrip .dijitTab {
-       top: 0px;
+       top: 0;
 }
+
+/* Tabs, shared classes */
 .nihilo .dijitTabPaneWrapper {
        background:#fff;
        border:1px solid #ccc;
        margin: 0;
        padding: 0;
 }
+
 .nihilo .dijitTabInnerDiv {
-       padding:0px 3px 0px 0px;
+       padding:0 3px 0 0;
        margin: 0 0 0 4px;
        background: url("../images/tabContainerSprite.gif") no-repeat;
        background-position: right -400px;
 }
+
 .nihilo .dijitTab {
        line-height:normal;
-       margin:0 2px 0 0;       
-       padding:0px;
+       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;
 }
+
 .nihilo .dijitTabInnerDiv .dijitTabContent {
        padding:3px 3px 3px 4px;
        background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
        position: relative;
 }
+
+/* hovered tab */
 .nihilo .dijitTabHover {
        color: #243C5F;
-       background: url("../images/tabContainerSprite.gif") no-repeat 0px -150px;
+       background: url("../images/tabContainerSprite.gif") no-repeat 0 -150px;
 }
+
 .nihilo .dijitTabHover .dijitTabInnerDiv {
        background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
 }
+
 .nihilo .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
        background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
 }
+
+/* checked tab*/
 .nihilo .dijitTabChecked
 {
-       
-       background: url("../images/tabContainerSprite.gif") no-repeat 0px -0px;
+       /* the selected tab (with or without hover) */
+       background: url("../images/tabContainerSprite.gif") no-repeat 0 -0;
 }
+
 .nihilo .dijitTabChecked .dijitTabInnerDiv {
        background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
 }
+
 .nihilo .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
        background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
        color: #243C5F !important;
 }
+
+/* Nested Tabs */
 .nihilo .dijitTabContainerNested .dijitTabListWrapper {
        height: auto;
 }
+
 .nihilo .dijitTabContainerTabListNested {
        background: #FDFDFD;
        border: none;
-       margin-bottom: 0px;             
+       margin-bottom: 0;               /* override margin: -1px; */
 }
 .nihilo .dijitTabContainerTabListNested .dijitTab {
        background: none;
        border: none;
-       top: 0px;       
+       top: 0; /* override top:1px setting of top-level tabs */
 }
 .nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
 .nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
        font-weight: bold;
 }
 .nihilo .dijitTabContainerSpacerNested {
-       
-       height: 0px;
-       border-bottom: 0px;
+       /* thinner line between tab (labels) and content */
+       height: 0;
+       border-bottom: 0;
 }
 .nihilo .dijitTabPaneWrapperNested {
-       border: none;   
+       border: none;   /* prevent double border */
 }
+
+
+/* Close button */
 .nihilo .dijitTabCloseButton {
        background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px top;
        width: 15px;
        height: 15px;
        margin-top: -1px;
 }
+
 .dj_ie6 .nihilo .dijitTabCloseButton {
        background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px top;
 }
 .dj_ie6 .nihilo .dijitTabCloseButtonHover {
        background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px -15px;
 }
-.nihilo .dijitTab .tabLabel {
-       
-       min-height: 15px;
-       display: inline-block;
-}
-.dj_ie6 .nihilo .dijitTabButtonIcon {
-       
-       height: 18px;
-       width: 1px;
-}
+
+/* ================================ */
+/* top tabs */
 .nihilo .dijitTabContainerTop-tabs {
        border-bottom: none;
        padding-bottom: 1px;
        background-position: bottom;
        padding-left: 3px;
 }
+
 .dj_ie6 .nihilo .dijitTabListContainer-top,
 .dj_ie7 .nihilo .dijitTabListContainer-top {
        z-index: 3;
 }
+
 .dj_ie6 .nihilo .dijitTabContainerTop-tabs,
 .dj_ie7 .nihilo .dijitTabContainerTop-tabs {
        border-bottom: 1px solid #ccc;
-       padding-bottom: 0px;
+       padding-bottom: 0;
 }
+
 .nihilo .dijitTabContainerTopNoStrip {
        padding-top: 3px;
 }
+
+/* top container */
 .nihilo .dijitTabContainerTop-container {
        border-top: none;
 }
+
+/* checked tabs */
 .nihilo .dijitTabContainerTop-tabs .dijitTabChecked {
        border-bottom-color: #f8f8f8;
 }
+
+/* strip */
 .nihilo .dijitTabContainer .dijitTabContainerTopStrip {
        border-bottom: none;
        padding-top: 1px;
        border-right: 1px solid #CCC;
        border-left: 1px solid #CCC;
 }
+
+
+/* ================================ */
+/* bottom tabs */
 .nihilo .dijitTabContainerBottom-tabs {
        border-top: none;
        background-position: top;
        padding-left: 3px;
 }
+
 .dj_ie6 .nihilo .dijitTabListContainer-bottom,
 .dj_ie7 .nihilo .dijitTabListContainer-bottom {
        z-index: 3;
 }
+
 .dj_ie6 .nihilo .dijitTabContainerBottom-tabs,
 .dj_ie7 .nihilo .dijitTabContainerBottom-tabs {
        border-top: 1px solid #ccc;
        margin-top: -1px;
 }
+
+/* bottom container */
 .nihilo .dijitTabContainerBottom-container {
        border-bottom: none;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTab {
        border-bottom: none;
        border-top: 1px solid #ccc;
        background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
 }
+
+/* checked tabs */
 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
        border-top-color: #f8f8f8;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
        padding-top: 3px;
        padding-bottom: 3px;
        background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
        background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover {
        color: #243C5F;
        background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
        background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
        background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
-       
+       /* the selected tab (with or without hover) */
        background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
        background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
        background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
 }
+
+/* strip */
 .nihilo .dijitTabContainer .dijitTabContainerBottomStrip {
        border: 1px solid #ccc;
        background: #f2f2f2;
        border-top: none;
        padding-bottom: 2px;
 }
+
+/* top/bottom strip */
 .nihilo .dijitTabContainerBottom-spacer,
 .nihilo .dijitTabContainerTop-spacer {
        height: 2px;
        border: 1px solid #ccc;
        background: #f8f8f8;
 }
+
 .nihilo  .dijitTabContainerTop-spacer {
        margin-top: -1px;
 }
 .nihilo .dijitTabContainerBottom-spacer {
        margin-bottom: -1px;
 }
+
+
+/* ================================ */
+/* right tabs */
 .nihilo .dijitTabContainerRight-tabs {
        border-color: #ccc;
        padding-top: 3px;
 .nihilo .dijitTabContainerRight .dijitTabListWrapper {
        padding-right: 3px;
 }
+
+/* right container */
 .nihilo .dijitTabContainerRight-container {
        border-right: none;
 }
+
 .nihilo .dijitTabContainerRight-tabs .dijitTab {
        border-bottom: none;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #dedede !important;
 }
+
+
+/* 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;
 }
+
+/* checked tabs */
 .nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
        border-left-color: #f8f8f8;
 }
+
 .nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
        background: url("../images/tabRightChecked.gif") no-repeat left top !important;
 }
+
+/* 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;
 }
+
 .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;
 }
+
+/* strip */
 .nihilo .dijitTabContainerRightStrip {
        padding-right: 2px;
        border: 1px solid #ccc;
        border-left: none;
        background: #f2f2f2;
 }
+
+/* ================================ */
+/* left tabs */
 .nihilo .dijitTabContainerLeft-tabs {
        border-color: #ccc;
        padding-top: 3px;
 }
+
+/* left conatiner */
 .nihilo .dijitTabContainerLeft-container {
        border-left: none;
 }
+
 .nihilo .dijitTabContainerLeft-tabs .dijitTab {
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #dedede;
 }
+
+/* checked tabs */
 .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked {
        border-right: 1px solid #f8f8f8;
 }
+
 .nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
        background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
 }
 .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
        background: url("../images/tabLeftChecked.gif") no-repeat right top;
 }
+
 .dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
 .dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
        border-bottom: solid #efefef 1px;
 }
+
 .dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
        border-bottom: solid #fff 1px;
 }
+
+/* strip */
 .nihilo .dijitTabContainerLeftStrip {
        padding-left: 2px;
        border: 1px solid #ccc;
        border-right: none;
 }
+
 .nihilo .dijitTabContainerLeftStrip {
        background: #f2f2f2;
 }
+
+/* ================================ */
+/* left/right tabs */
 .nihilo .dijitTabContainerLeft-tabs .dijitTab,
 .nihilo .dijitTabContainerRight-tabs .dijitTab {
        margin-right:auto;
-       margin-bottom:2px;      
+       margin-bottom:2px;      /* space between one tab and the next in left/right mode */
 }
+
+/* left/right tabstrip */
 .nihilo .dijitTabContainerLeft-spacer,
 .nihilo .dijitTabContainerRight-spacer {
        width: 2px;
        border: 1px solid #ccc;
        background: #f8f8f8;
 }
+
 .nihilo .dijitTabContainerRight-spacer {
        border-right: none;
 }
+
 .nihilo .dijitTabContainerRight-tabs {
        padding-top: 3px;
        height: 100%;
 .nihilo .dijitTabContainerLeft-tabs {
        height: 100%;
 }
+
 .nihilo .dijitTabContainerLeft-spacer {
        border-left: none;
 }
+
+/* ================================ */
+
+/* this resets the tabcontainer stripe when within a contentpane */
 .nihilo .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
-       border-left: 0px solid #ccc;
-       border-top: 0px solid #ccc;
-       border-right: 0px solid #ccc;
-       padding-top: 0px;
-       padding-left: 0px;
+       border-left: 0 solid #ccc;
+       border-top: 0 solid #ccc;
+       border-right: 0 solid #ccc;
+       padding-top: 0;
+       padding-left: 0;
 }
+
+/* ================================ */
+
+/* Menu and slider control styles */
 .nihilo .dijitTabContainer .tabStripButton {
-       margin-right: 0px;
+       margin-right: 0;
 }
+
 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
        padding: 5px 0 6px;
 }
+
 .dj_ie6 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 .dj_ie7 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 .dj_opera .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
        padding-bottom: 7px;
 }
+
 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
        padding: 3px 0 5px;
 }
+
 .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;
 }
+
 .nihilo .dijitTabStripIcon {
        height: 14px;
        width: 14px;
        background: url(../images/spriteRoundedIconsSmall.png) no-repeat left top;
 }
+
 .dj_ie6 .nihilo .dijitTabStripIcon {
        background-image: url(../images/spriteRoundedIconsSmall.gif);
 }
+
 .nihilo .dijitTabStripSlideRightIcon {
        background-position: -30px top;
 }
+
 .nihilo .dijitTabStripMenuIcon {
        background-position: -15px top;
 }
+
 .nihilo .dijitTabContainerTopNone {
-       padding-top: 0px;
+       padding-top: 0;
 }
+
 .nihilo .dijitTabContainer .tabStripButton-top {
        margin-top: 1px;
 }
+
 .nihilo .dijitTabContainer .tabStripButton-bottom {
        background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll left bottom;
        border-bottom: medium none;
        border-top: 1px solid #CCCCCC;
 }
+
 .nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
        background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
 }
+
 .nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
        background: transparent;
-}
+}
\ No newline at end of file