You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
7.8 KiB
256 lines
7.8 KiB
@import "../common/domButtons/DomButtonWhiteCross.css"; |
|
/* dojox.mobile.TabBar */ |
|
.mblTabBar { |
|
position: relative; |
|
margin: 0px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
padding: 0px 6px; |
|
height: 42px; |
|
text-align: center; |
|
color: white; |
|
border-top: 1px solid #cdd5df; |
|
border-bottom: 1px solid #2d3642; |
|
text-shadow: none; |
|
} |
|
/* dojox.mobile.TabBarButton */ |
|
.mblTabBarFill .mblTabBarButton { |
|
box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
-webkit-box-sizing: border-box; |
|
} |
|
.mblTabBarButton { |
|
overflow: hidden; |
|
cursor: pointer; |
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|
position: relative; |
|
list-style-type: none; |
|
float: left; |
|
} |
|
.mblTabBarButtonIconArea { |
|
margin: 0 auto; |
|
width: 29px; |
|
} |
|
.mblTabBarButtonIconParent1 { |
|
display: block; |
|
} |
|
.mblTabBarButtonIconParent2 { |
|
display: none; |
|
} |
|
.mblTabBarButtonSelected .mblTabBarButtonIconParent1 { |
|
display: none; |
|
} |
|
.mblTabBarButtonSelected .mblTabBarButtonIconParent2 { |
|
display: block; |
|
} |
|
/* barType="tabBar" */ |
|
.mblTabBarTabBar { |
|
height: 48px; |
|
border-top: 1px solid #000000; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#2d2d2d), to(#000000)); |
|
background-image: linear-gradient(to bottom, #2d2d2d 0%, #000000 100%); |
|
} |
|
.mblTabBarTabBar .mblTabBarButtonIconArea { |
|
padding-top: 4px; |
|
} |
|
.mblTabBarTabBar .mblTabBarButtonLabel { |
|
font-family: "Helvetica Neue", Helvetica; |
|
font-size: 11px; |
|
color: white; |
|
} |
|
.mblTabBarTabBar .mblTabBarButtonSelected { |
|
border-radius: 3px; |
|
background-color: #404040; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#484848), to(#242424)); |
|
background-image: linear-gradient(to bottom, #484848 0%, #242424 100%); |
|
} |
|
.mblTabBarTabBar .mblTabBarButtonSelected .mblTabBarButtonLabel { |
|
color: white; |
|
} |
|
/* barType="segmentedControl" */ |
|
.mblTabBarSegmentedControl { |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#9c9e9c), to(#848284)); |
|
background-image: linear-gradient(to bottom, #9c9e9c 0%, #848284 100%); |
|
} |
|
.mblTabBarSegmentedControl.mblTabBarNoText .mblTabBarButton { |
|
width: auto; |
|
padding: 0 3px; |
|
} |
|
.mblTabBarSegmentedControl.mblTabBarNoText .mblTabBarButtonIconArea { |
|
position: relative; |
|
} |
|
.mblTabBarSegmentedControl .mblTabBarButton { |
|
margin: 6px 0; |
|
width: 100px; |
|
height: 29px; |
|
border-width: 1px 1px 1px 0px; |
|
font-family: Helvetica; |
|
font-size: 13px; |
|
font-weight: bold; |
|
text-align: center; |
|
line-height: 29px; |
|
border-style: solid; |
|
border-color: #555555; |
|
color: #000000; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#dfdfdf), to(#a6a6a6)); |
|
background-image: linear-gradient(to bottom, #dfdfdf 0%, #a6a6a6 100%); |
|
} |
|
.mblTabBarSegmentedControl .mblTabBarButton:first-child { |
|
border-left-width: 1px; |
|
border-top-left-radius: 5px; |
|
border-bottom-left-radius: 5px; |
|
} |
|
.mblTabBarSegmentedControl .mblTabBarButton:last-child { |
|
border-top-right-radius: 5px; |
|
border-bottom-right-radius: 5px; |
|
} |
|
.mblTabBarSegmentedControl .mblTabBarButtonIconArea { |
|
position: absolute; |
|
top: 0px; |
|
left: 0px; |
|
} |
|
.mblTabBarSegmentedControl .mblTabBarButtonSelected { |
|
color: #ffffff; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#313031), to(#959595), color-stop(0.5, #5a555a), color-stop(0.5, #616161)); |
|
background-image: linear-gradient(to bottom, #313031 0%, #5a555a 50%, #616161 50%, #959595 100%); |
|
} |
|
.mblHeading .mblTabBarSegmentedControl { |
|
display: inline; |
|
float: left; |
|
height: auto; |
|
border: none; |
|
} |
|
/* barType="standardTab" */ |
|
.mblTabBarStandardTab { |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#9c9e9c), to(#848284)); |
|
background-image: linear-gradient(to bottom, #9c9e9c 0%, #848284 100%); |
|
} |
|
.mblTabBarStandardTab .mblTabBarButton { |
|
margin-top: 9px; |
|
padding: 9px; |
|
border: 1px solid #62676d; |
|
border-top-left-radius: 4px; |
|
border-top-right-radius: 4px; |
|
font-family: Helvetica; |
|
font-size: 14px; |
|
font-weight: bold; |
|
color: #000000; |
|
background-color: #c6c6c6; |
|
/* TODO: to compat */ |
|
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#dfdfdf), to(#a6a6a6)); |
|
background-image: linear-gradient(to bottom, #dfdfdf 0%, #a6a6a6 100%); |
|
} |
|
.mblTabBarStandardTab .mblTabBarButtonIconArea { |
|
position: absolute; |
|
top: 3px; |
|
left: 0px; |
|
} |
|
.mblTabBarStandardTab .mblTabBarButtonSelected { |
|
color: #ffffff; |
|
background-color: #3578b1; |
|
/* TODO: to compat */ |
|
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#313031), to(#959595), color-stop(0.5, #5a555a), color-stop(0.5, #616161)); |
|
background-image: linear-gradient(to bottom, #313031 0%, #5a555a 50%, #616161 50%, #959595 100%); |
|
} |
|
.mblTabBarStandardTab .mblTabBarButtonHasIcon .mblTabBarButtonLabel { |
|
margin-left: 20px; |
|
} |
|
/* barType="slimTab" */ |
|
.mblTabBarSlimTab { |
|
height: 30px; |
|
padding: 0px; |
|
border: 1px solid #2d3642; |
|
background-color: #000000; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#2d2d2d), to(#000000), color-stop(0.5, #141414), color-stop(0.5, #000000)); |
|
background-image: linear-gradient(to bottom, #2d2d2d 0%, #141414 50%, #000000 50%, #000000 100%); |
|
} |
|
.mblTabBarSlimTab .mblTabBarButton { |
|
padding: 7px; |
|
border-right: 1px solid #4e4e4e; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#2d2d2d), to(#000000), color-stop(0.5, #141414), color-stop(0.5, #000000)); |
|
background-image: linear-gradient(to bottom, #2d2d2d 0%, #141414 50%, #000000 50%, #000000 100%); |
|
font-family: Helvetica; |
|
font-size: 14px; |
|
font-weight: bold; |
|
color: white; |
|
text-shadow: rgba(100, 100, 100, 0.6) 0px -1px 0px; |
|
text-align: center; |
|
} |
|
.mblTabBarSlimTab .mblTabBarButton:first-child { |
|
border-left: 1px solid #4e4e4e; |
|
} |
|
.mblTabBarSlimTab .mblTabBarButtonIconArea { |
|
position: absolute; |
|
top: 0px; |
|
left: 0px; |
|
} |
|
.mblTabBarSlimTab .mblTabBarButtonSelected { |
|
background-color: #404040; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#313031), to(#959595), color-stop(0.5, #5a555a), color-stop(0.5, #616161)); |
|
background-image: linear-gradient(to bottom, #313031 0%, #5a555a 50%, #616161 50%, #959595 100%); |
|
} |
|
.mblTabBarSlimTab .mblTabBarButtonHasIcon .mblTabBarButtonLabel { |
|
margin-left: 20px; |
|
} |
|
/* barType="flatTab" */ |
|
.mblTabBarFlatTab { |
|
height: 30px; |
|
padding: 0px; |
|
border-style: none; |
|
background-color: transparent; |
|
background-image: none; |
|
} |
|
.mblTabBarFlatTab .mblTabBarButton { |
|
padding: 7px; |
|
background-image: none; |
|
font-family: Helvetica; |
|
font-size: 14px; |
|
font-weight: bold; |
|
text-shadow: rgba(100, 100, 100, 0.6) 0px -1px 0px; |
|
text-align: center; |
|
} |
|
.mblTabBarFlatTab .mblTabBarButtonIconArea { |
|
position: absolute; |
|
top: 0px; |
|
left: 0px; |
|
} |
|
.mblTabBarFlatTab .mblTabBarButtonHasIcon .mblTabBarButtonLabel { |
|
margin-left: 20px; |
|
} |
|
/* barType="tallTab" */ |
|
.mblTabBarTallTab { |
|
height: 64px; |
|
border-top: 1px solid #cdd5df; |
|
border-bottom: 2px solid #949694; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#2d2d2d), to(#000000)); |
|
background-image: linear-gradient(to bottom, #2d2d2d 0%, #000000 100%); |
|
} |
|
.mblTabBarTallTab .mblTabBarButton { |
|
margin-top: 3px; |
|
margin-right: 2px; |
|
width: 78px; |
|
height: 61px; |
|
border-width: 0px 1px 0px 1px; |
|
border-style: solid; |
|
border-color: black #182018 black #393c39; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#100c10), color-stop(0.1, #313031)); |
|
background-image: linear-gradient(to bottom, #181818 0%, #313031 10%, #100c10 100%); |
|
font-family: Helvetica; |
|
font-size: 13px; |
|
color: white; |
|
text-align: center; |
|
} |
|
.mblTabBarTallTab .mblTabBarButtonIconArea { |
|
margin-top: 8px; |
|
} |
|
.mblTabBarTallTab .mblTabBarButtonLabel { |
|
font-family: "Helvetica Neue", Helvetica; |
|
font-size: 11px; |
|
} |
|
.mblTabBarTallTab .mblTabBarButtonSelected { |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#a59ea5), to(#848284)); |
|
background-image: linear-gradient(to bottom, #a59ea5 0%, #848284 100%); |
|
}
|
|
|