├── .gitignore ├── README.md ├── index.html └── ios_inspired ├── images ├── arrow_right.png ├── arrow_right@2x.png ├── backButtonSprite.png ├── backButtonSprite@2x.png ├── iconSprite.png ├── iconSprite.psd ├── tabSprite.png ├── tick.png └── tiling_stripes.gif └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | ios_inspired/images/.DS_Store 3 | 4 | ios_inspired/.DS_Store 5 | 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | iOS-Inspired Theme for jQuery Mobile 2 | ====== 3 | 4 | - Supports jQuery Mobile 1.2.0 5 | 6 | Distributed under the [MIT License](http://en.wikipedia.org/wiki/MIT_License). 7 | 8 | [View Demo](http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | iOS Inspired jQuery Mobile Theme 6 | 7 | 8 | 9 | 10 | 11 | 20 | 21 | 30 | 31 | 32 | 33 | 34 |

35 | 36 |

37 |

Page Header

38 |

39 | 40 |

41 |

Welcome to the iOS-Inspired jQuery Mobile theme by @taitems. Feel free to have a look around and report and bugs to the GitHub issues page.

42 | 43 | 44 |

Header Bars
Header Buttons
Footer Tabs
Form Elements
List Views
Dialogs
Popups ^New!

53 | 54 |
55 | 56 |
57 | 58 |

59 |

60 | 61 |

62 | 63 |

64 |

Form Elements

65 | Back 66 |

67 | 68 |

69 | 70 |

71 | 72 | Some Fields and Inputs: 73 | 74 |

75 | 76 | 77 | 78 |

79 | 80 | 81 | 82 |

83 | 84 | 85 | 86 |
87 | 88 |

89 | 90 |

91 | Select slider: 92 | 96 |

97 | 98 |

99 |

100 | Choose a pet: 101 | 102 | Cat 103 | 104 | 105 | Dog 106 | 107 | 108 | Hamster 109 |

110 |

111 | 112 | Inactive <a> 113 | 114 | Active <a> 115 | 116 | 117 | 118 | 119 | 120 |

Does the above look funny? Consider it a bug in jQuery mobile where the classes from the underling <button> are not being attached to the new DOM

121 | 122 |

123 | 124 |

125 | 126 |

127 | 128 |

129 |

List Example

130 | Back 131 |

132 | 133 |

134 | 135 |

162 | 163 |

164 | 165 |

166 | 167 |

168 | 169 |

170 |

Headers

171 | Back 172 | 173 |

174 | 175 |

176 | 177 |

178 | The default bar is the blue, but you can also use the black by specifying data-theme="b". 179 |

180 | 181 |

182 | Back 183 |

Blue Bar

184 | Button 185 |

186 | 187 |
188 | 189 |

190 | Back 191 |

Black Bar

192 | Button 193 |

194 | 195 |

196 | 197 |

198 | 199 |

200 | 201 |

202 |

Header Buttons

203 | Back 204 |

205 | 206 |

207 | 208 |

209 | The various styled buttons you can place in a header: 210 |

211 | 212 |

213 |

Page Title

214 | Edit 215 |

216 | 217 |
218 | 219 |

220 |

Page Title

221 | Black 222 |

223 | 224 |
225 | 226 |

227 |

Page Title

228 | Delete 229 |

230 | 231 |
232 | 233 |

234 |

Page Title

235 | Done 236 |

237 | 238 |
239 | 240 |

241 |

Page Title

242 | Back 243 |

244 | 245 |
246 | 247 |

248 |

Page Title

249 | Back 250 |

251 | 252 |

253 | 254 |

255 | 256 |

257 | 258 |

259 | 260 | 261 | 262 | 263 | 264 |

265 | 266 |

267 | 268 |

269 | 270 |

271 | 272 | 273 | 274 |

275 | 276 |

277 | 278 |

279 | 280 |

281 | 282 | 283 | 284 | 285 |

286 | 287 |

288 | 289 |

290 | 291 |

292 |

Dialogs

293 | Back 294 |

295 | 296 |

297 | 298 | All the options 299 | 300 | Delete Example 301 | 302 | Post Something 303 | 304 |

305 | 306 |

307 | 308 |

309 | 310 |

311 |

Footer Tabs

312 | Back 313 |

314 | 315 |

316 | 317 | Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License. 318 | 319 |

320 | 321 |

322 |

323 |

One
Two
Three

328 |

329 |

330 | 331 |

332 | 333 |

334 | 335 |

336 |

Popups

337 | Back 338 |

339 | 340 |

341 | 342 | Open Popup 343 | 344 | Open Popup with Overlay 345 | 346 | iOS Style Popup 347 | 348 |

349 |

This is a completely basic popup, no options set.

350 |

351 | 352 |

353 |

This is a completely basic popup, but with an overlay

354 |

355 | 356 |

357 |

358 |

Saved

359 |

360 | 361 |

362 | 363 |

364 | 365 | 366 | 367 | -------------------------------------------------------------------------------- /ios_inspired/images/arrow_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/801046d0405fdbb5dbe09dd402582086fa2ebe0a/ios_inspired/images/arrow_right.png -------------------------------------------------------------------------------- /ios_inspired/images/arrow_right@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/801046d0405fdbb5dbe09dd402582086fa2ebe0a/ios_inspired/images/arrow_right@2x.png -------------------------------------------------------------------------------- /ios_inspired/images/backButtonSprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/801046d0405fdbb5dbe09dd402582086fa2ebe0a/ios_inspired/images/backButtonSprite.png -------------------------------------------------------------------------------- /ios_inspired/images/backButtonSprite@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/801046d0405fdbb5dbe09dd402582086fa2ebe0a/ios_inspired/images/backButtonSprite@2x.png -------------------------------------------------------------------------------- /ios_inspired/images/iconSprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/801046d0405fdbb5dbe09dd402582086fa2ebe0a/ios_inspired/images/iconSprite.png -------------------------------------------------------------------------------- /ios_inspired/images/iconSprite.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/801046d0405fdbb5dbe09dd402582086fa2ebe0a/ios_inspired/images/iconSprite.psd -------------------------------------------------------------------------------- /ios_inspired/images/tabSprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/801046d0405fdbb5dbe09dd402582086fa2ebe0a/ios_inspired/images/tabSprite.png -------------------------------------------------------------------------------- /ios_inspired/images/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/801046d0405fdbb5dbe09dd402582086fa2ebe0a/ios_inspired/images/tick.png -------------------------------------------------------------------------------- /ios_inspired/images/tiling_stripes.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/801046d0405fdbb5dbe09dd402582086fa2ebe0a/ios_inspired/images/tiling_stripes.gif -------------------------------------------------------------------------------- /ios_inspired/styles.css: -------------------------------------------------------------------------------- 1 | /* === PAGE BACKGROUND AND GENERICS === */ 2 | .ui-page, .ui-mobile-viewport { 3 | background: url(images/tiling_stripes.gif); 4 | } 5 | 6 | .ui-content { 7 | color: #4c596e; 8 | } 9 | 10 | .ui-page-header-fullscreen .ui-content, .ui-page-footer-fullscreen .ui-content{ 11 | padding-top: 39px;/* fix for fixed toolbar mode */ 12 | } 13 | 14 | 15 | /* === IN PAGE BUTTON === */ 16 | .ui-btn.ui-btn-plain { 17 | padding: 0; 18 | background: #FFF; 19 | border: 1px solid #bbbbbb; 20 | border-radius: 10px; 21 | box-shadow: none; 22 | background-clip: padding-box; 23 | } 24 | .ui-btn.ui-btn-plain .ui-btn-inner { 25 | background: #FFF; 26 | box-shadow: none; 27 | border-radius: 10px; 28 | } 29 | .ui-btn.ui-btn-plain .ui-btn-inner .ui-collapsible-heading-toggle { 30 | background: none; 31 | padding: 15px 0; 32 | } 33 | .ui-btn.ui-btn-plain .ui-btn-text { 34 | font-weight: bold; 35 | font-size: 17px; 36 | color: #000; 37 | text-shadow: none; 38 | } 39 | .ui-btn.ui-btn-plain.ui-disabled { 40 | opacity: 1; 41 | } 42 | .ui-btn.ui-btn-plain[disabled] { 43 | cursor: default; 44 | } 45 | .ui-btn.ui-btn-plain[disabled].ui-btn-down-c .ui-btn-inner { 46 | background: #FFF; 47 | } 48 | 49 | .ui-btn.ui-btn-plain[disabled] span, 50 | .ui-btn.ui-disabled span, 51 | .ui-btn.ui-btn-plain[disabled].ui-btn-down-c span, 52 | .ui-btn.ui-disabled.ui-btn-down-c span { 53 | color: #aaaaaa; 54 | } 55 | /* button active */ 56 | .ui-btn.ui-btn-plain.ui-btn-down-c .ui-btn-inner, 57 | .ui-btn.ui-btn-plain.ui-btn-active .ui-btn-inner { 58 | background: #008bf5; /* Old browsers */ 59 | background: -moz-linear-gradient(top, #008bf5 0%, #0f5be6 100%); /* FF3.6+ */ 60 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008bf5), color-stop(100%,#0f5be6)); /* Chrome,Safari4+ */ 61 | background: -webkit-linear-gradient(top, #008bf5 0%,#0f5be6 100%); /* Chrome10+,Safari5.1+ */ 62 | background: -o-linear-gradient(top, #008bf5 0%,#0f5be6 100%); /* Opera 11.10+ */ 63 | background: -ms-linear-gradient(top, #008bf5 0%,#0f5be6 100%); /* IE10+ */ 64 | background: linear-gradient(to bottom, #008bf5 0%,#0f5be6 100%); /* W3C */ 65 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bf5', endColorstr='#0f5be6',GradientType=0 ); /* IE6-9 */ 66 | } 67 | .ui-btn.ui-btn-plain.ui-btn-down-c span { 68 | color: #FFF; 69 | text-shadow: none; 70 | } 71 | 72 | /* === HEADER BARS - DEFAULT AND BLACK === */ 73 | .ui-header { 74 | border: 0 none; 75 | padding: 1px 0; 76 | -webkit-box-sizing: border-box; 77 | -moz-box-sizing: border-box; 78 | box-sizing: border-box; 79 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; 80 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; 81 | box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; 82 | background: #b0bccd; /* Old browsers */ 83 | background: -moz-linear-gradient(top, #b0bccd 0%, #889bb3 49%, #8094ae 50%, #6d84a2 100%); /* FF3.6+ */ 84 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b0bccd), color-stop(49%,#889bb3), color-stop(50%,#8094ae), color-stop(100%,#6d84a2)); /* Chrome,Safari4+ */ 85 | background: -webkit-linear-gradient(top, #b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%); /* Chrome10+,Safari5.1+ */ 86 | background: -o-linear-gradient(top, #b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%); /* Opera 11.10+ */ 87 | background: -ms-linear-gradient(top, #b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%); /* IE10+ */ 88 | background: linear-gradient(top, #b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%); /* W3C */ 89 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0bccd', endColorstr='#6d84a2',GradientType=0 ); /* IE6-9 */ 90 | } 91 | 92 | .ui-header.ui-bar-b { 93 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; 94 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; 95 | box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; 96 | background: #717172; /* Old browsers */ 97 | background: -moz-linear-gradient(top, #717172 0%, #3a3a3a 50%, #0d0d0f 50%, #0f0f10 100%); /* FF3.6+ */ 98 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#717172), color-stop(50%,#3a3a3a), color-stop(50%,#0d0d0f), color-stop(100%,#0f0f10)); /* Chrome,Safari4+ */ 99 | background: -webkit-linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%); /* Chrome10+,Safari5.1+ */ 100 | background: -o-linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%); /* Opera 11.10+ */ 101 | background: -ms-linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%); /* IE10+ */ 102 | background: linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%); /* W3C */ 103 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#717172', endColorstr='#0f0f10',GradientType=0 ); /* IE6-9 */ 104 | } 105 | 106 | .ui-header .ui-btn-inner { 107 | border: 0 none; 108 | } 109 | 110 | .ui-header .ui-title { 111 | text-shadow: 0 -1px 0 #4c596a !important; 112 | } 113 | 114 | /* === LIST VIEWS === */ 115 | .ui-listview { 116 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5); 117 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5); 118 | box-shadow: 0 1px 0 rgba(255,255,255,0.5); 119 | } 120 | 121 | .ui-listview, .ui-listview li { 122 | border-color: #bbbbbb; 123 | background: #ffffff; 124 | } 125 | 126 | .ui-listview .ui-btn-down-c { 127 | background: #106ce5; 128 | } 129 | .ui-listview .ui-btn-down-c a { 130 | color: #FFF; 131 | text-shadow: none; 132 | } 133 | .ui-listview .ui-icon-arrow-r { 134 | -webkit-box-shadow: none; 135 | -moz-box-shadow: none; 136 | box-shadow: none; 137 | } 138 | 139 | .ui-listview .ui-li-divider { 140 | padding-top: 0.4em; 141 | padding-bottom: 0.4em; 142 | text-shadow: 0 1px 0 rgba(0,0,0,0.5); 143 | border-top: #717d85; 144 | border-bottom: #989ea4; 145 | -webkit-box-shadow: 0 2px 0 rgba(255,255,255,0.4) inset; 146 | -moz-box-shadow: 0 2px 0 rgba(255,255,255,0.4) inset; 147 | box-shadow: 0 2px 0 rgba(255,255,255,0.4) inset; 148 | background: #6d8291; /* Old browsers */ 149 | background: -moz-linear-gradient(top, #6d8291 0%, #8ea0ad 100%); /* FF3.6+ */ 150 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d8291), color-stop(100%,#8ea0ad)); /* Chrome,Safari4+ */ 151 | background: -webkit-linear-gradient(top, #6d8291 0%,#8ea0ad 100%); /* Chrome10+,Safari5.1+ */ 152 | background: -o-linear-gradient(top, #6d8291 0%,#8ea0ad 100%); /* Opera 11.10+ */ 153 | background: -ms-linear-gradient(top, #6d8291 0%,#8ea0ad 100%); /* IE10+ */ 154 | background: linear-gradient(top, #6d8291 0%,#8ea0ad 100%); /* W3C */ 155 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d8291', endColorstr='#8ea0ad',GradientType=0 ); /* IE6-9 */ 156 | } 157 | 158 | .ui-listview .ui-icon-arrow-r { 159 | background: transparent url(images/arrow_right.png) center center no-repeat !important; 160 | -webkit-border-radius: 0; 161 | -moz-border-radius: 0; 162 | border-radius: 0; 163 | } 164 | 165 | /* === SLIDER STYLES === */ 166 | div.ui-slider { 167 | height: 9px; 168 | border: 1px solid #929292; 169 | background: #bababa; /* Old browsers */ 170 | background: -moz-linear-gradient(top, #bababa 0%, #f8f8f8 50%, #f8f8f8 100%); /* FF3.6+ */ 171 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(50%,#f8f8f8), color-stop(100%,#f8f8f8)); /* Chrome,Safari4+ */ 172 | background: -webkit-linear-gradient(top, #bababa 0%,#f8f8f8 50%,#f8f8f8 100%); /* Chrome10+,Safari5.1+ */ 173 | background: -o-linear-gradient(top, #bababa 0%,#f8f8f8 50%,#f8f8f8 100%); /* Opera 11.10+ */ 174 | background: -ms-linear-gradient(top, #bababa 0%,#f8f8f8 50%,#f8f8f8 100%); /* IE10+ */ 175 | background: linear-gradient(top, #bababa 0%,#f8f8f8 50%,#f8f8f8 100%); /* W3C */ 176 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */ 177 | } 178 | a.ui-slider-handle { 179 | width: 20px; 180 | height: 20px; 181 | border: 1px solid #bbbbbb; 182 | margin-top: -12px; 183 | -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.75) inset; 184 | -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.75) inset; 185 | box-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.75) inset; 186 | background: #fafafa; /* Old browsers */ 187 | background: -moz-linear-gradient(top, #fafafa 100%, #d4d4d4 0%); /* FF3.6+ */ 188 | background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,#fafafa), color-stop(0%,#d4d4d4)); /* Chrome,Safari4+ */ 189 | background: -webkit-linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* Chrome10+,Safari5.1+ */ 190 | background: -o-linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* Opera 11.10+ */ 191 | background: -ms-linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* IE10+ */ 192 | background: linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* W3C */ 193 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d4d4', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */ 194 | } 195 | input.ui-slider-input { 196 | display: none !important; 197 | } 198 | 199 | /* === SEARCH FIELD === */ 200 | .ui-input-search { 201 | height: 31px; 202 | background-color: #FFF; 203 | border: 1px solid #bbbbbb; 204 | -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; 205 | -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; 206 | box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; 207 | } 208 | 209 | /* === TEXT FIELD === */ 210 | input.ui-input-text { 211 | height: 31px; 212 | background-color: #FFF; 213 | border: 1px solid #bbbbbb; 214 | -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; 215 | -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; 216 | box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; 217 | } 218 | .ui-icon-searchfield .ui-input-text { 219 | height: auto; 220 | -webkit-box-shadow: none; 221 | -moz-box-shadow: none; 222 | box-shadow: none; 223 | } 224 | 225 | /* === BUTTON STYLES - SURROUNDS DIALOG BUTTONS === */ 226 | div.ui-btn { 227 | padding: 3px; 228 | -webkit-border-radius: 9px; 229 | -moz-border-radius: 9px; 230 | border-radius: 9px; 231 | background: #282a2f; /* Old browsers */ 232 | background: -moz-linear-gradient(top, #282a2f 0%, #3f434b 100%); /* FF3.6+ */ 233 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282a2f), color-stop(100%,#3f434b)); /* Chrome,Safari4+ */ 234 | background: -webkit-linear-gradient(top, #282a2f 0%,#3f434b 100%); /* Chrome10+,Safari5.1+ */ 235 | background: -o-linear-gradient(top, #282a2f 0%,#3f434b 100%); /* Opera 11.10+ */ 236 | background: -ms-linear-gradient(top, #282a2f 0%,#3f434b 100%); /* IE10+ */ 237 | background: linear-gradient(top, #282a2f 0%,#3f434b 100%); /* W3C */ 238 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282a2f', endColorstr='#3f434b',GradientType=0 ); /* IE6-9 */ 239 | } 240 | div.ui-btn .ui-btn-inner { 241 | -webkit-border-radius: 8px; 242 | -moz-border-radius: 8px; 243 | border-radius: 8px; 244 | background: #b0bccd; /* Old browsers */ 245 | background: -moz-linear-gradient(top, #b0bccd 0%, #889bb3 50%, #8094ae 51%, #6d84a2 100%); /* FF3.6+ */ 246 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b0bccd), color-stop(50%,#889bb3), color-stop(51%,#8094ae), color-stop(100%,#6d84a2)); /* Chrome,Safari4+ */ 247 | background: -webkit-linear-gradient(top, #b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%); /* Chrome10+,Safari5.1+ */ 248 | background: -o-linear-gradient(top, #b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%); /* Opera 11.10+ */ 249 | background: -ms-linear-gradient(top, #b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%); /* IE10+ */ 250 | background: linear-gradient(top, #b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%); /* W3C */ 251 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0bccd', endColorstr='#6d84a2',GradientType=0 ); /* IE6-9 */ 252 | } 253 | 254 | .ui-dialog { 255 | background: rgba(0, 0, 0, 0.6) none !important; 256 | margin: 0; 257 | } 258 | .ui-dialog .ui-dialog-contain { 259 | max-width: 100%; 260 | width: 100%; 261 | position: static; 262 | } 263 | .ui-dialog .ui-content { 264 | position: absolute; 265 | bottom: 0; 266 | width: 100%; 267 | max-width: 100%; /* fixes issue #24 */ 268 | padding: 0.75em; 269 | margin: 0; 270 | border-top: 1px solid #45484d; 271 | background: #a8b1bd; /* Old browsers */ 272 | background: -moz-linear-gradient(top, #a8b1bd 0%, #646d7b 15%, #535c68 16%, #535c68 100%); /* FF3.6+ */ 273 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8b1bd), color-stop(15%,#646d7b), color-stop(16%,#535c68), color-stop(100%,#535c68)); /* Chrome,Safari4+ */ 274 | background: -webkit-linear-gradient(top, #a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%); /* Chrome10+,Safari5.1+ */ 275 | background: -o-linear-gradient(top, #a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%); /* Opera 11.10+ */ 276 | background: -ms-linear-gradient(top, #a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%); /* IE10+ */ 277 | background: linear-gradient(top, #a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%); /* W3C */ 278 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8b1bd', endColorstr='#535c68',GradientType=0 ); /* IE6-9 */ 279 | -webkit-border-radius: 0; 280 | -moz-border-radius: 0; 281 | border-radius: 0; 282 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; 283 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; 284 | box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; 285 | -webkit-box-sizing: border-box; 286 | -moz-box-sizing: border-box; 287 | box-sizing: border-box; 288 | } 289 | 290 | .ui-dialog .ui-btn { 291 | border: none transparent !important; 292 | } 293 | 294 | /* === DIALOG BUTTONS E ===*/ 295 | .ui-dialog .ui-btn-up-e .ui-btn-text, .ui-dialog .ui-btn-hover-e .ui-btn-text { 296 | color: #FFF; 297 | text-shadow: 0 -1px 0 rgba(0,0,0,0.3); 298 | } 299 | 300 | .ui-dialog .ui-btn-up-e .ui-btn-inner, .ui-dialog .ui-btn-hover-e .ui-btn-inner { 301 | background: #e18285; /* Old browsers */ 302 | background: -moz-linear-gradient(top, #e18285 0%, #d76369 49%, #cd2a27 50%, #bf2321 100%); /* FF3.6+ */ 303 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e18285), color-stop(49%,#d76369), color-stop(50%,#cd2a27), color-stop(100%,#bf2321)); /* Chrome,Safari4+ */ 304 | background: -webkit-linear-gradient(top, #e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%); /* Chrome10+,Safari5.1+ */ 305 | background: -o-linear-gradient(top, #e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%); /* Opera 11.10+ */ 306 | background: -ms-linear-gradient(top, #e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%); /* IE10+ */ 307 | background: linear-gradient(top, #e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%); /* W3C */ 308 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e18285', endColorstr='#bf2321',GradientType=0 ); /* IE6-9 */ 309 | } 310 | 311 | /* === DIALOG BUTTONS D ===*/ 312 | .ui-dialog .ui-btn-up-d .ui-btn-text, .ui-dialog .ui-btn-hover-d .ui-btn-text { 313 | color: #FFF; 314 | text-shadow: 0 -1px 0 rgba(0,0,0,0.3); 315 | } 316 | 317 | .ui-dialog .ui-btn-up-d .ui-btn-inner, .ui-dialog .ui-btn-hover-d .ui-btn-inner { 318 | background: #7bbf81; /* Old browsers */ 319 | background: -moz-linear-gradient(top, #7bbf81 0%, #31ab3b 49%, #009e0f 50%, #009a0c 100%); /* FF3.6+ */ 320 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7bbf81), color-stop(49%,#31ab3b), color-stop(50%,#009e0f), color-stop(100%,#009a0c)); /* Chrome,Safari4+ */ 321 | background: -webkit-linear-gradient(top, #7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%); /* Chrome10+,Safari5.1+ */ 322 | background: -o-linear-gradient(top, #7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%); /* Opera 11.10+ */ 323 | background: -ms-linear-gradient(top, #7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%); /* IE10+ */ 324 | background: linear-gradient(top, #7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%); /* W3C */ 325 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7bbf81', endColorstr='#009a0c',GradientType=0 ); /* IE6-9 */ 326 | } 327 | 328 | /* === DIALOG BUTTONS C ===*/ 329 | .ui-dialog .ui-btn-up-c .ui-btn-text, .ui-dialog .ui-btn-hover-c .ui-btn-text { 330 | color: #000; 331 | text-shadow: 0 1px 0 rgba(255,255,255,0.7); 332 | } 333 | 334 | .ui-dialog .ui-btn-up-c .ui-btn-inner, .ui-dialog .ui-btn-hover-c .ui-btn-inner { 335 | background: #e4d0a0; /* Old browsers */ 336 | background: -moz-linear-gradient(top, #e4d0a0 0%, #efcd63 49%, #f0be22 50%, #f9dd24 100%); /* FF3.6+ */ 337 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4d0a0), color-stop(49%,#efcd63), color-stop(50%,#f0be22), color-stop(100%,#f9dd24)); /* Chrome,Safari4+ */ 338 | background: -webkit-linear-gradient(top, #e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%); /* Chrome10+,Safari5.1+ */ 339 | background: -o-linear-gradient(top, #e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%); /* Opera 11.10+ */ 340 | background: -ms-linear-gradient(top, #e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%); /* IE10+ */ 341 | background: linear-gradient(top, #e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%); /* W3C */ 342 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4d0a0', endColorstr='#f9dd24',GradientType=0 ); /* IE6-9 */ 343 | } 344 | 345 | /* === DIALOG BUTTONS B ===*/ 346 | .ui-dialog .ui-btn-up-b .ui-btn-text, .ui-dialog .ui-btn-hover-b .ui-btn-text { 347 | color: #FFF; 348 | text-shadow: 0 -1px 0 rgba(0,0,0,0.3); 349 | } 350 | 351 | .ui-dialog .ui-btn-up-b .ui-btn-inner, .ui-dialog .ui-btn-hover-b .ui-btn-inner { 352 | background: #5e636a; /* Old browsers */ 353 | background: -moz-linear-gradient(top, #5e636a 0%, #272d37 49%, #171f28 50%, #252d36 100%); /* FF3.6+ */ 354 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e636a), color-stop(49%,#272d37), color-stop(50%,#171f28), color-stop(100%,#252d36)); /* Chrome,Safari4+ */ 355 | background: -webkit-linear-gradient(top, #5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%); /* Chrome10+,Safari5.1+ */ 356 | background: -o-linear-gradient(top, #5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%); /* Opera 11.10+ */ 357 | background: -ms-linear-gradient(top, #5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%); /* IE10+ */ 358 | background: linear-gradient(top, #5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%); /* W3C */ 359 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e636a', endColorstr='#252d36',GradientType=0 ); /* IE6-9 */ 360 | } 361 | 362 | /* === DIALOG BUTTONS A ===*/ 363 | .ui-dialog .ui-btn-up-a .ui-btn-text, .ui-dialog .ui-btn-hover-a .ui-btn-text { 364 | color: #000; 365 | text-shadow: 0 1px 0 rgba(255,255,255,0.7); 366 | } 367 | 368 | .ui-dialog .ui-btn-up-a .ui-btn-inner, .ui-dialog .ui-btn-hover-a .ui-btn-inner { 369 | background: #ededee; /* Old browsers */ 370 | background: -moz-linear-gradient(top, #ededee 0%, #cfd0d1 49%, #bababb 50%, #bdbfc2 100%); /* FF3.6+ */ 371 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededee), color-stop(49%,#cfd0d1), color-stop(50%,#bababb), color-stop(100%,#bdbfc2)); /* Chrome,Safari4+ */ 372 | background: -webkit-linear-gradient(top, #ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%); /* Chrome10+,Safari5.1+ */ 373 | background: -o-linear-gradient(top, #ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%); /* Opera 11.10+ */ 374 | background: -ms-linear-gradient(top, #ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%); /* IE10+ */ 375 | background: linear-gradient(top, #ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%); /* W3C */ 376 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededee', endColorstr='#bdbfc2',GradientType=0 ); /* IE6-9 */ 377 | } 378 | 379 | /* === BACK BUTTON === */ 380 | a[data-rel='back'], .ui-header a[data-rel='back'] { 381 | background: transparent url(images/backButtonSprite.png) 0 0 no-repeat !important; 382 | -webkit-box-shadow: none !important; 383 | -moz-box-shadow: none !important; 384 | box-shadow: none !important; 385 | -webkit-border-radius: 0 !important; 386 | -moz-border-radius: 0 !important; 387 | border-radius: 0 !important; 388 | border: 0 none !important; 389 | height: 30px; 390 | } 391 | 392 | a[data-rel='back'] .ui-btn-inner { 393 | background: transparent url(images/backButtonSprite.png) right 0 no-repeat !important; 394 | margin: 0 0 0 15px; 395 | padding: 0 8px 0 0 !important; 396 | height: 30px; 397 | line-height: 30px; 398 | -webkit-box-shadow: none !important; 399 | -moz-box-shadow: none !important; 400 | box-shadow: none !important; 401 | } 402 | 403 | a[data-rel='back'] .ui-icon { 404 | display: none; 405 | } 406 | 407 | /* === BLACK - BACK BUTTON === */ 408 | .ui-bar-b a[data-rel='back'] { 409 | background-position: 0 -30px !important; 410 | } 411 | .ui-bar-b a[data-rel='back'] .ui-btn-inner { 412 | background-position: right -30px !important; 413 | } 414 | 415 | 416 | /* === TOGGLE === */ 417 | div.ui-slider-switch { 418 | border-color: #9b9b9b; 419 | height: 32px; 420 | } 421 | span.ui-slider-label-b { 422 | color: #7f7f7f; 423 | background: #f9f9f9 none; 424 | -webkit-box-shadow: -10px 15px 0 rgba(0,0,0,0.07) inset, 0 2px 6px rgba(0,0,0,0.5) inset; 425 | -moz-box-shadow: -10px 15px 0 rgba(0,0,0,0.07) inset, 0 2px 6px rgba(0,0,0,0.5) inset; 426 | box-shadow: -10px 15px 0 rgba(0,0,0,0.07) inset, 0 2px 6px rgba(0,0,0,0.5) inset; 427 | } 428 | span.ui-slider-label-a { 429 | color: #FFF; 430 | background: #007fea none; 431 | -webkit-box-shadow: 10px 15px 0 rgba(0,0,0,0.1) inset, 0 2px 6px rgba(0,0,0,0.6) inset; 432 | -moz-box-shadow: 10px 15px 0 rgba(0,0,0,0.1) inset, 0 2px 6px rgba(0,0,0,0.6) inset; 433 | box-shadow: 10px 15px 0 rgba(0,0,0,0.1) inset, 0 2px 6px rgba(0,0,0,0.6) inset; 434 | } 435 | div.ui-slider-switch a.ui-slider-handle { 436 | width: 31px; 437 | height: 31px; 438 | margin-top: -1px; 439 | margin-left: -16px; 440 | border-color: #717171; 441 | background: #d0d0d0; /* Old browsers */ 442 | background: -moz-linear-gradient(top, #d0d0d0 0%, #fcfcfc 100%); /* FF3.6+ */ 443 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0d0d0), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */ 444 | background: -webkit-linear-gradient(top, #d0d0d0 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */ 445 | background: -o-linear-gradient(top, #d0d0d0 0%,#fcfcfc 100%); /* Opera 11.10+ */ 446 | background: -ms-linear-gradient(top, #d0d0d0 0%,#fcfcfc 100%); /* IE10+ */ 447 | background: linear-gradient(top, #d0d0d0 0%,#fcfcfc 100%); /* W3C */ 448 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */ 449 | -webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.7) inset, 0 0 2px rgba(0,0,0,0.25) !important; 450 | -moz-box-shadow: 0 1px 1px rgba(255,255,255,0.7) inset, 0 0 2px rgba(0,0,0,0.25) !important; 451 | box-shadow: 0 1px 1px rgba(255,255,255,0.7) inset, 0 0 2px rgba(0,0,0,0.25) !important; 452 | } 453 | div.ui-slider-switch a.ui-slider-handle.ui-focus { 454 | -webkit-box-shadow: none; 455 | -moz-box-shadow: none; 456 | box-shadow: none; 457 | } 458 | 459 | 460 | 461 | /* === RADIO OPTION === */ 462 | .ui-controlgroup-horizontal .ui-radio .ui-btn { 463 | background: #fcfcfc; /* Old browsers */ 464 | background: -moz-linear-gradient(top, #fcfcfc 0%, #c9c9c9 100%); /* FF3.6+ */ 465 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#c9c9c9)); /* Chrome,Safari4+ */ 466 | background: -webkit-linear-gradient(top, #fcfcfc 0%,#c9c9c9 100%); /* Chrome10+,Safari5.1+ */ 467 | background: -o-linear-gradient(top, #fcfcfc 0%,#c9c9c9 100%); /* Opera 11.10+ */ 468 | background: -ms-linear-gradient(top, #fcfcfc 0%,#c9c9c9 100%); /* IE10+ */ 469 | background: linear-gradient(top, #fcfcfc 0%,#c9c9c9 100%); /* W3C */ 470 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */ 471 | } 472 | .ui-controlgroup-horizontal .ui-radio .ui-btn-active { 473 | background: #376fd4; /* Old browsers */ 474 | background: -moz-linear-gradient(top, #376fd4 0%, #417fe7 49%, #4c88e9 50%, #73a8fb 100%); /* FF3.6+ */ 475 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#376fd4), color-stop(49%,#417fe7), color-stop(50%,#4c88e9), color-stop(100%,#73a8fb)); /* Chrome,Safari4+ */ 476 | background: -webkit-linear-gradient(top, #376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%); /* Chrome10+,Safari5.1+ */ 477 | background: -o-linear-gradient(top, #376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%); /* Opera 11.10+ */ 478 | background: -ms-linear-gradient(top, #376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%); /* IE10+ */ 479 | background: linear-gradient(top, #376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%); /* W3C */ 480 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#376fd4', endColorstr='#73a8fb',GradientType=0 ); /* IE6-9 */ 481 | -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.5) inset; 482 | -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.5) inset; 483 | box-shadow: 0 2px 5px rgba(0,0,0,0.5) inset; 484 | } 485 | .ui-controlgroup-horizontal .ui-radio label { 486 | border-width: 0 0 0 1px; 487 | border-color: #adaead; 488 | } 489 | .ui-controlgroup-horizontal .ui-radio .ui-btn-active .ui-btn-text { 490 | color: #FFF; 491 | text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 492 | } 493 | .ui-controlgroup-horizontal .ui-radio .ui-btn-text { 494 | color: #7f7f7f; 495 | text-shadow: 0 1px 0 #FFF; 496 | } 497 | .ui-controlgroup-horizontal .ui-radio .ui-btn-inner { 498 | padding: .6em 1.2em !important; 499 | } 500 | 501 | 502 | /* === INPUT - TEXT === */ 503 | input.ui-input-text, .ui-input-search { 504 | height: 29px; 505 | line-height: 29px; 506 | padding-top: 0; 507 | padding-bottom: 0; 508 | border-radius: 100px; 509 | box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset; 510 | font-size: 14px; 511 | } 512 | 513 | .ui-input-search input { 514 | padding: 0 !important; 515 | } 516 | 517 | .ui-input-clear { 518 | background: transparent url(images/iconSprite.png) 0 0 no-repeat; 519 | width: 19px; 520 | height: 19px; 521 | border: none; 522 | margin-top: -9px !important; 523 | -moz-box-shadow: none !important; 524 | -webkit-box-shadow: none !important; 525 | box-shadow: none !important; 526 | -moz-border-radius: 0; 527 | -webkit-border-radius: 0; 528 | border-radius: 0; 529 | } 530 | .ui-input-clear * { 531 | display: none; 532 | } 533 | 534 | /* === CUSTOM HEADER BUTTONS === */ 535 | .ui-header .ui-btn { 536 | border-color: #375074; 537 | top: 6px; 538 | -webkit-border-radius: 5px; 539 | -moz-border-radius: 5px; 540 | border-radius: 5px; 541 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 542 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 543 | box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 544 | background: #89a0be; /* Old browsers */ 545 | background: -moz-linear-gradient(top, #89a0be 0%, #5877a2 50%, #486a9a 51%, #4a6c9b 100%); /* FF3.6+ */ 546 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#89a0be), color-stop(50%,#5877a2), color-stop(51%,#486a9a), color-stop(100%,#4a6c9b)); /* Chrome,Safari4+ */ 547 | background: -webkit-linear-gradient(top, #89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%); /* Chrome10+,Safari5.1+ */ 548 | background: -o-linear-gradient(top, #89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%); /* Opera 11.10+ */ 549 | background: -ms-linear-gradient(top, #89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%); /* IE10+ */ 550 | background: linear-gradient(top, #89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%); /* W3C */ 551 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89a0be', endColorstr='#4a6c9b',GradientType=0 ); /* IE6-9 */ 552 | } 553 | .ui-header .ui-btn .ui-btn-inner { 554 | -webkit-border-radius: 0; 555 | -moz-border-radius: 0; 556 | border-radius: 0; 557 | } 558 | .ui-header .ui-btn-up-b, .ui-header .ui-btn-hover-b { 559 | border-color: #000; 560 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 561 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 562 | box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 563 | background: #6a6a6a; /* Old browsers */ 564 | background: -moz-linear-gradient(top, #6a6a6a 0%, #313131 49%, #000000 50%, #000000 100%); /* FF3.6+ */ 565 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6a6a6a), color-stop(49%,#313131), color-stop(50%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */ 566 | background: -webkit-linear-gradient(top, #6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%); /* Chrome10+,Safari5.1+ */ 567 | background: -o-linear-gradient(top, #6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%); /* Opera 11.10+ */ 568 | background: -ms-linear-gradient(top, #6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%); /* IE10+ */ 569 | background: linear-gradient(top, #6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%); /* W3C */ 570 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a6a6a', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ 571 | } 572 | .ui-header .ui-btn-up-b .ui-btn-text, .ui-header .ui-btn-hover-b .ui-btn-text { 573 | color: #FFF; 574 | text-shadow: 0 -1px 0 rgba(0,0,0,0.5); 575 | } 576 | .ui-header .ui-btn-up-c, .ui-header .ui-btn-hover-c { 577 | border-color: #451c1b; 578 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 579 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 580 | box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 581 | background: #dc7679; /* Old browsers */ 582 | background: -moz-linear-gradient(top, #dc7679 0%, #dc7679 49%, #cd2a27 50%, #c92a29 100%); /* FF3.6+ */ 583 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dc7679), color-stop(49%,#dc7679), color-stop(50%,#cd2a27), color-stop(100%,#c92a29)); /* Chrome,Safari4+ */ 584 | background: -webkit-linear-gradient(top, #dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%); /* Chrome10+,Safari5.1+ */ 585 | background: -o-linear-gradient(top, #dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%); /* Opera 11.10+ */ 586 | background: -ms-linear-gradient(top, #dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%); /* IE10+ */ 587 | background: linear-gradient(top, #dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%); /* W3C */ 588 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc7679', endColorstr='#c92a29',GradientType=0 ); /* IE6-9 */ 589 | } 590 | .ui-header .ui-btn-up-c .ui-btn-text, .ui-header .ui-btn-hover-c .ui-btn-text { 591 | color: #FFF; 592 | text-shadow: 0 -1px 0 rgba(0,0,0,0.5); 593 | } 594 | .ui-header .ui-btn-up-d, .ui-header .ui-btn-hover-d { 595 | border-color: #375074; 596 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 597 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 598 | box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; 599 | background: #376fe0; /* Old browsers */ 600 | background: -moz-linear-gradient(top, #376fe0 0%, #376fe0 49%, #2361de 50%, #2463de 100%); /* FF3.6+ */ 601 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#376fe0), color-stop(49%,#376fe0), color-stop(50%,#2361de), color-stop(100%,#2463de)); /* Chrome,Safari4+ */ 602 | background: -webkit-linear-gradient(top, #376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%); /* Chrome10+,Safari5.1+ */ 603 | background: -o-linear-gradient(top, #376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%); /* Opera 11.10+ */ 604 | background: -ms-linear-gradient(top, #376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%); /* IE10+ */ 605 | background: linear-gradient(top, #376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%); /* W3C */ 606 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#376fe0', endColorstr='#2463de',GradientType=0 ); /* IE6-9 */ 607 | } 608 | .ui-header .ui-btn-up-d .ui-btn-text, .ui-header .ui-btn-hover-d .ui-btn-text { 609 | color: #FFF; 610 | text-shadow: 0 -1px 0 rgba(0,0,0,0.5); 611 | } 612 | 613 | 614 | /* === FOOTER BAR === */ 615 | .ui-footer { 616 | border-color: #0d0d0d; 617 | background: #2d2d2d; /* Old browsers */ 618 | background: -moz-linear-gradient(top, #2d2d2d 0%, #151515 49%, #000000 50%, #000000 100%); /* FF3.6+ */ 619 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(49%,#151515), color-stop(50%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */ 620 | background: -webkit-linear-gradient(top, #2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%); /* Chrome10+,Safari5.1+ */ 621 | background: -o-linear-gradient(top, #2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%); /* Opera 11.10+ */ 622 | background: -ms-linear-gradient(top, #2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%); /* IE10+ */ 623 | background: linear-gradient(top, #2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%); /* W3C */ 624 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ 625 | } 626 | .ui-footer .ui-btn { 627 | border: 0 none; 628 | background: transparent; 629 | } 630 | .ui-footer .ui-btn-active { 631 | background: none rgba(255,255,255,0.14); 632 | -webkit-border-radius: 4px !important; 633 | -moz-border-radius: 4px !important; 634 | border-radius: 4px !important; 635 | } 636 | .ui-footer .ui-btn-inner { 637 | border-color: #434343; 638 | padding-top: 40px !important; 639 | } 640 | .ui-footer .ui-btn-text { 641 | font-size: 10px; 642 | text-shadow: 0 none; 643 | } 644 | .ui-footer .ui-icon-custom.ui-icon { 645 | width: 32px; 646 | height: 32px; 647 | margin-left: -16px; 648 | } 649 | /* fixes issue #25 */ 650 | .ui-footer .ui-icon-shadow { 651 | -webkit-box-shadow: none; 652 | -moz-box-shadow: none; 653 | -o-box-shadow: none; 654 | box-shadow: none; 655 | } 656 | #tabA .ui-icon { 657 | background: url(images/tabSprite.png) 0 0 no-repeat; 658 | } 659 | #tabA.ui-btn-active .ui-icon { 660 | background: url(images/tabSprite.png) -32px 0 no-repeat; 661 | } 662 | #tabB .ui-icon { 663 | background: url(images/tabSprite.png) 0 -32px no-repeat; 664 | } 665 | #tabB.ui-btn-active .ui-icon { 666 | background: url(images/tabSprite.png) -32px -32px no-repeat; 667 | } 668 | #tabC .ui-icon { 669 | background: url(images/tabSprite.png) 0 -64px no-repeat; 670 | } 671 | #tabC.ui-btn-active .ui-icon { 672 | background: url(images/tabSprite.png) -32px -64px no-repeat; 673 | } 674 | 675 | /* === UI POPUPS === */ 676 | .ui-popup { 677 | background: rgba(0,0,0,0.75); 678 | color: #FFF; 679 | -webkit-box-shadow: none; 680 | -moz-box-shadow: none; 681 | box-shadow: none; 682 | } 683 | .ui-popup p { 684 | color: #FFF; 685 | text-shadow: none; 686 | } 687 | .ui-popup.ui-body-a { 688 | width: 150px; 689 | height: 150px; 690 | } 691 | .ui-popup.ui-body-a img { 692 | margin: 30px auto 20px auto; 693 | display: block; 694 | } 695 | .ui-popup.ui-body-a p { 696 | text-align: center; 697 | font-size: 1.1em; 698 | font-weight: bold; 699 | } 700 | 701 | 702 | /* === NAVIGATION BAR === */ 703 | .ui-navbar ul { 704 | overflow: hidden; 705 | } 706 | 707 | /* === RETINA DEVICE FIXES === */ 708 | @media (-webkit-min-device-pixel-ratio : 1.5), (min-device-pixel-ratio : 1.5) { 709 | .ui-listview .ui-icon-arrow-r { 710 | background-image: url(images/arrow_right@2x.png) !important; 711 | background-size: 9.5px 14px; 712 | } 713 | a[data-rel='back'], .ui-header a[data-rel='back'], a[data-rel="back"] .ui-btn-inner { 714 | background-image: url(images/backButtonSprite@2x.png) !important; 715 | background-size: 500px 60px; 716 | } 717 | .ui-input-clear { 718 | background-position: right 0; 719 | background-size: 100px 250px; 720 | } 721 | } --------------------------------------------------------------------------------