Repository: taitems/iOS-Inspired-jQuery-Mobile-Theme Branch: master Commit: 801046d0405f Files: 5 Total size: 43.5 KB Directory structure: gitextract_45kui0tb/ ├── .gitignore ├── README.md ├── index.html └── ios_inspired/ ├── images/ │ └── iconSprite.psd └── styles.css ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ ios_inspired/images/.DS_Store ios_inspired/.DS_Store .DS_Store ================================================ FILE: README.md ================================================ iOS-Inspired Theme for jQuery Mobile ====== - Supports jQuery Mobile 1.2.0 Distributed under the [MIT License](http://en.wikipedia.org/wiki/MIT_License). [View Demo](http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/) ================================================ FILE: index.html ================================================ iOS Inspired jQuery Mobile Theme

Page Header

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.



Form Elements

Back







Choose a pet:
Inactive <a> Active <a>

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

List Example

Back

Headers

Back

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

Back

Blue Bar

Button

Back

Black Bar

Button

Header Buttons

Back

The various styled buttons you can place in a header:

Page Title

Edit

Page Title

Black

Page Title

Delete

Page Title

Done

Page Title

Back

Page Title

Back

Dialogs

Back
All the options Delete Example Post Something

Footer Tabs

Back
Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License.

Popups

Back
Open Popup Open Popup with Overlay iOS Style Popup

This is a completely basic popup, no options set.

This is a completely basic popup, but with an overlay

Saved

================================================ FILE: ios_inspired/styles.css ================================================ /* === PAGE BACKGROUND AND GENERICS === */ .ui-page, .ui-mobile-viewport { background: url(images/tiling_stripes.gif); } .ui-content { color: #4c596e; } .ui-page-header-fullscreen .ui-content, .ui-page-footer-fullscreen .ui-content{ padding-top: 39px;/* fix for fixed toolbar mode */ } /* === IN PAGE BUTTON === */ .ui-btn.ui-btn-plain { padding: 0; background: #FFF; border: 1px solid #bbbbbb; border-radius: 10px; box-shadow: none; background-clip: padding-box; } .ui-btn.ui-btn-plain .ui-btn-inner { background: #FFF; box-shadow: none; border-radius: 10px; } .ui-btn.ui-btn-plain .ui-btn-inner .ui-collapsible-heading-toggle { background: none; padding: 15px 0; } .ui-btn.ui-btn-plain .ui-btn-text { font-weight: bold; font-size: 17px; color: #000; text-shadow: none; } .ui-btn.ui-btn-plain.ui-disabled { opacity: 1; } .ui-btn.ui-btn-plain[disabled] { cursor: default; } .ui-btn.ui-btn-plain[disabled].ui-btn-down-c .ui-btn-inner { background: #FFF; } .ui-btn.ui-btn-plain[disabled] span, .ui-btn.ui-disabled span, .ui-btn.ui-btn-plain[disabled].ui-btn-down-c span, .ui-btn.ui-disabled.ui-btn-down-c span { color: #aaaaaa; } /* button active */ .ui-btn.ui-btn-plain.ui-btn-down-c .ui-btn-inner, .ui-btn.ui-btn-plain.ui-btn-active .ui-btn-inner { background: #008bf5; /* Old browsers */ background: -moz-linear-gradient(top, #008bf5 0%, #0f5be6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008bf5), color-stop(100%,#0f5be6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #008bf5 0%,#0f5be6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #008bf5 0%,#0f5be6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #008bf5 0%,#0f5be6 100%); /* IE10+ */ background: linear-gradient(to bottom, #008bf5 0%,#0f5be6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bf5', endColorstr='#0f5be6',GradientType=0 ); /* IE6-9 */ } .ui-btn.ui-btn-plain.ui-btn-down-c span { color: #FFF; text-shadow: none; } /* === HEADER BARS - DEFAULT AND BLACK === */ .ui-header { border: 0 none; padding: 1px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; background: #b0bccd; /* Old browsers */ background: -moz-linear-gradient(top, #b0bccd 0%, #889bb3 49%, #8094ae 50%, #6d84a2 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%); /* IE10+ */ background: linear-gradient(top, #b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0bccd', endColorstr='#6d84a2',GradientType=0 ); /* IE6-9 */ } .ui-header.ui-bar-b { -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; background: #717172; /* Old browsers */ background: -moz-linear-gradient(top, #717172 0%, #3a3a3a 50%, #0d0d0f 50%, #0f0f10 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%); /* IE10+ */ background: linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#717172', endColorstr='#0f0f10',GradientType=0 ); /* IE6-9 */ } .ui-header .ui-btn-inner { border: 0 none; } .ui-header .ui-title { text-shadow: 0 -1px 0 #4c596a !important; } /* === LIST VIEWS === */ .ui-listview { -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5); -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5); box-shadow: 0 1px 0 rgba(255,255,255,0.5); } .ui-listview, .ui-listview li { border-color: #bbbbbb; background: #ffffff; } .ui-listview .ui-btn-down-c { background: #106ce5; } .ui-listview .ui-btn-down-c a { color: #FFF; text-shadow: none; } .ui-listview .ui-icon-arrow-r { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .ui-listview .ui-li-divider { padding-top: 0.4em; padding-bottom: 0.4em; text-shadow: 0 1px 0 rgba(0,0,0,0.5); border-top: #717d85; border-bottom: #989ea4; -webkit-box-shadow: 0 2px 0 rgba(255,255,255,0.4) inset; -moz-box-shadow: 0 2px 0 rgba(255,255,255,0.4) inset; box-shadow: 0 2px 0 rgba(255,255,255,0.4) inset; background: #6d8291; /* Old browsers */ background: -moz-linear-gradient(top, #6d8291 0%, #8ea0ad 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d8291), color-stop(100%,#8ea0ad)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #6d8291 0%,#8ea0ad 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #6d8291 0%,#8ea0ad 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #6d8291 0%,#8ea0ad 100%); /* IE10+ */ background: linear-gradient(top, #6d8291 0%,#8ea0ad 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d8291', endColorstr='#8ea0ad',GradientType=0 ); /* IE6-9 */ } .ui-listview .ui-icon-arrow-r { background: transparent url(images/arrow_right.png) center center no-repeat !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /* === SLIDER STYLES === */ div.ui-slider { height: 9px; border: 1px solid #929292; background: #bababa; /* Old browsers */ background: -moz-linear-gradient(top, #bababa 0%, #f8f8f8 50%, #f8f8f8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(50%,#f8f8f8), color-stop(100%,#f8f8f8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #bababa 0%,#f8f8f8 50%,#f8f8f8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #bababa 0%,#f8f8f8 50%,#f8f8f8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #bababa 0%,#f8f8f8 50%,#f8f8f8 100%); /* IE10+ */ background: linear-gradient(top, #bababa 0%,#f8f8f8 50%,#f8f8f8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */ } a.ui-slider-handle { width: 20px; height: 20px; border: 1px solid #bbbbbb; margin-top: -12px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.75) inset; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.75) inset; box-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.75) inset; background: #fafafa; /* Old browsers */ background: -moz-linear-gradient(top, #fafafa 100%, #d4d4d4 0%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,#fafafa), color-stop(0%,#d4d4d4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* IE10+ */ background: linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d4d4', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */ } input.ui-slider-input { display: none !important; } /* === SEARCH FIELD === */ .ui-input-search { height: 31px; background-color: #FFF; border: 1px solid #bbbbbb; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; } /* === TEXT FIELD === */ input.ui-input-text { height: 31px; background-color: #FFF; border: 1px solid #bbbbbb; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; } .ui-icon-searchfield .ui-input-text { height: auto; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* === BUTTON STYLES - SURROUNDS DIALOG BUTTONS === */ div.ui-btn { padding: 3px; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; background: #282a2f; /* Old browsers */ background: -moz-linear-gradient(top, #282a2f 0%, #3f434b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282a2f), color-stop(100%,#3f434b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #282a2f 0%,#3f434b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #282a2f 0%,#3f434b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #282a2f 0%,#3f434b 100%); /* IE10+ */ background: linear-gradient(top, #282a2f 0%,#3f434b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282a2f', endColorstr='#3f434b',GradientType=0 ); /* IE6-9 */ } div.ui-btn .ui-btn-inner { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #b0bccd; /* Old browsers */ background: -moz-linear-gradient(top, #b0bccd 0%, #889bb3 50%, #8094ae 51%, #6d84a2 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%); /* IE10+ */ background: linear-gradient(top, #b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0bccd', endColorstr='#6d84a2',GradientType=0 ); /* IE6-9 */ } .ui-dialog { background: rgba(0, 0, 0, 0.6) none !important; margin: 0; } .ui-dialog .ui-dialog-contain { max-width: 100%; width: 100%; position: static; } .ui-dialog .ui-content { position: absolute; bottom: 0; width: 100%; max-width: 100%; /* fixes issue #24 */ padding: 0.75em; margin: 0; border-top: 1px solid #45484d; background: #a8b1bd; /* Old browsers */ background: -moz-linear-gradient(top, #a8b1bd 0%, #646d7b 15%, #535c68 16%, #535c68 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%); /* IE10+ */ background: linear-gradient(top, #a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8b1bd', endColorstr='#535c68',GradientType=0 ); /* IE6-9 */ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ui-dialog .ui-btn { border: none transparent !important; } /* === DIALOG BUTTONS E ===*/ .ui-dialog .ui-btn-up-e .ui-btn-text, .ui-dialog .ui-btn-hover-e .ui-btn-text { color: #FFF; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); } .ui-dialog .ui-btn-up-e .ui-btn-inner, .ui-dialog .ui-btn-hover-e .ui-btn-inner { background: #e18285; /* Old browsers */ background: -moz-linear-gradient(top, #e18285 0%, #d76369 49%, #cd2a27 50%, #bf2321 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%); /* IE10+ */ background: linear-gradient(top, #e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e18285', endColorstr='#bf2321',GradientType=0 ); /* IE6-9 */ } /* === DIALOG BUTTONS D ===*/ .ui-dialog .ui-btn-up-d .ui-btn-text, .ui-dialog .ui-btn-hover-d .ui-btn-text { color: #FFF; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); } .ui-dialog .ui-btn-up-d .ui-btn-inner, .ui-dialog .ui-btn-hover-d .ui-btn-inner { background: #7bbf81; /* Old browsers */ background: -moz-linear-gradient(top, #7bbf81 0%, #31ab3b 49%, #009e0f 50%, #009a0c 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%); /* IE10+ */ background: linear-gradient(top, #7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7bbf81', endColorstr='#009a0c',GradientType=0 ); /* IE6-9 */ } /* === DIALOG BUTTONS C ===*/ .ui-dialog .ui-btn-up-c .ui-btn-text, .ui-dialog .ui-btn-hover-c .ui-btn-text { color: #000; text-shadow: 0 1px 0 rgba(255,255,255,0.7); } .ui-dialog .ui-btn-up-c .ui-btn-inner, .ui-dialog .ui-btn-hover-c .ui-btn-inner { background: #e4d0a0; /* Old browsers */ background: -moz-linear-gradient(top, #e4d0a0 0%, #efcd63 49%, #f0be22 50%, #f9dd24 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%); /* IE10+ */ background: linear-gradient(top, #e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4d0a0', endColorstr='#f9dd24',GradientType=0 ); /* IE6-9 */ } /* === DIALOG BUTTONS B ===*/ .ui-dialog .ui-btn-up-b .ui-btn-text, .ui-dialog .ui-btn-hover-b .ui-btn-text { color: #FFF; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); } .ui-dialog .ui-btn-up-b .ui-btn-inner, .ui-dialog .ui-btn-hover-b .ui-btn-inner { background: #5e636a; /* Old browsers */ background: -moz-linear-gradient(top, #5e636a 0%, #272d37 49%, #171f28 50%, #252d36 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%); /* IE10+ */ background: linear-gradient(top, #5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e636a', endColorstr='#252d36',GradientType=0 ); /* IE6-9 */ } /* === DIALOG BUTTONS A ===*/ .ui-dialog .ui-btn-up-a .ui-btn-text, .ui-dialog .ui-btn-hover-a .ui-btn-text { color: #000; text-shadow: 0 1px 0 rgba(255,255,255,0.7); } .ui-dialog .ui-btn-up-a .ui-btn-inner, .ui-dialog .ui-btn-hover-a .ui-btn-inner { background: #ededee; /* Old browsers */ background: -moz-linear-gradient(top, #ededee 0%, #cfd0d1 49%, #bababb 50%, #bdbfc2 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%); /* IE10+ */ background: linear-gradient(top, #ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededee', endColorstr='#bdbfc2',GradientType=0 ); /* IE6-9 */ } /* === BACK BUTTON === */ a[data-rel='back'], .ui-header a[data-rel='back'] { background: transparent url(images/backButtonSprite.png) 0 0 no-repeat !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; border: 0 none !important; height: 30px; } a[data-rel='back'] .ui-btn-inner { background: transparent url(images/backButtonSprite.png) right 0 no-repeat !important; margin: 0 0 0 15px; padding: 0 8px 0 0 !important; height: 30px; line-height: 30px; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } a[data-rel='back'] .ui-icon { display: none; } /* === BLACK - BACK BUTTON === */ .ui-bar-b a[data-rel='back'] { background-position: 0 -30px !important; } .ui-bar-b a[data-rel='back'] .ui-btn-inner { background-position: right -30px !important; } /* === TOGGLE === */ div.ui-slider-switch { border-color: #9b9b9b; height: 32px; } span.ui-slider-label-b { color: #7f7f7f; background: #f9f9f9 none; -webkit-box-shadow: -10px 15px 0 rgba(0,0,0,0.07) inset, 0 2px 6px rgba(0,0,0,0.5) inset; -moz-box-shadow: -10px 15px 0 rgba(0,0,0,0.07) inset, 0 2px 6px rgba(0,0,0,0.5) inset; box-shadow: -10px 15px 0 rgba(0,0,0,0.07) inset, 0 2px 6px rgba(0,0,0,0.5) inset; } span.ui-slider-label-a { color: #FFF; background: #007fea none; -webkit-box-shadow: 10px 15px 0 rgba(0,0,0,0.1) inset, 0 2px 6px rgba(0,0,0,0.6) inset; -moz-box-shadow: 10px 15px 0 rgba(0,0,0,0.1) inset, 0 2px 6px rgba(0,0,0,0.6) inset; box-shadow: 10px 15px 0 rgba(0,0,0,0.1) inset, 0 2px 6px rgba(0,0,0,0.6) inset; } div.ui-slider-switch a.ui-slider-handle { width: 31px; height: 31px; margin-top: -1px; margin-left: -16px; border-color: #717171; background: #d0d0d0; /* Old browsers */ background: -moz-linear-gradient(top, #d0d0d0 0%, #fcfcfc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0d0d0), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #d0d0d0 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #d0d0d0 0%,#fcfcfc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #d0d0d0 0%,#fcfcfc 100%); /* IE10+ */ background: linear-gradient(top, #d0d0d0 0%,#fcfcfc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */ -webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.7) inset, 0 0 2px rgba(0,0,0,0.25) !important; -moz-box-shadow: 0 1px 1px rgba(255,255,255,0.7) inset, 0 0 2px rgba(0,0,0,0.25) !important; box-shadow: 0 1px 1px rgba(255,255,255,0.7) inset, 0 0 2px rgba(0,0,0,0.25) !important; } div.ui-slider-switch a.ui-slider-handle.ui-focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* === RADIO OPTION === */ .ui-controlgroup-horizontal .ui-radio .ui-btn { background: #fcfcfc; /* Old browsers */ background: -moz-linear-gradient(top, #fcfcfc 0%, #c9c9c9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#c9c9c9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fcfcfc 0%,#c9c9c9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fcfcfc 0%,#c9c9c9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fcfcfc 0%,#c9c9c9 100%); /* IE10+ */ background: linear-gradient(top, #fcfcfc 0%,#c9c9c9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */ } .ui-controlgroup-horizontal .ui-radio .ui-btn-active { background: #376fd4; /* Old browsers */ background: -moz-linear-gradient(top, #376fd4 0%, #417fe7 49%, #4c88e9 50%, #73a8fb 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%); /* IE10+ */ background: linear-gradient(top, #376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#376fd4', endColorstr='#73a8fb',GradientType=0 ); /* IE6-9 */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.5) inset; -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.5) inset; box-shadow: 0 2px 5px rgba(0,0,0,0.5) inset; } .ui-controlgroup-horizontal .ui-radio label { border-width: 0 0 0 1px; border-color: #adaead; } .ui-controlgroup-horizontal .ui-radio .ui-btn-active .ui-btn-text { color: #FFF; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); } .ui-controlgroup-horizontal .ui-radio .ui-btn-text { color: #7f7f7f; text-shadow: 0 1px 0 #FFF; } .ui-controlgroup-horizontal .ui-radio .ui-btn-inner { padding: .6em 1.2em !important; } /* === INPUT - TEXT === */ input.ui-input-text, .ui-input-search { height: 29px; line-height: 29px; padding-top: 0; padding-bottom: 0; border-radius: 100px; box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset; font-size: 14px; } .ui-input-search input { padding: 0 !important; } .ui-input-clear { background: transparent url(images/iconSprite.png) 0 0 no-repeat; width: 19px; height: 19px; border: none; margin-top: -9px !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .ui-input-clear * { display: none; } /* === CUSTOM HEADER BUTTONS === */ .ui-header .ui-btn { border-color: #375074; top: 6px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; background: #89a0be; /* Old browsers */ background: -moz-linear-gradient(top, #89a0be 0%, #5877a2 50%, #486a9a 51%, #4a6c9b 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%); /* IE10+ */ background: linear-gradient(top, #89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89a0be', endColorstr='#4a6c9b',GradientType=0 ); /* IE6-9 */ } .ui-header .ui-btn .ui-btn-inner { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .ui-header .ui-btn-up-b, .ui-header .ui-btn-hover-b { border-color: #000; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; background: #6a6a6a; /* Old browsers */ background: -moz-linear-gradient(top, #6a6a6a 0%, #313131 49%, #000000 50%, #000000 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%); /* IE10+ */ background: linear-gradient(top, #6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a6a6a', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .ui-header .ui-btn-up-b .ui-btn-text, .ui-header .ui-btn-hover-b .ui-btn-text { color: #FFF; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); } .ui-header .ui-btn-up-c, .ui-header .ui-btn-hover-c { border-color: #451c1b; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; background: #dc7679; /* Old browsers */ background: -moz-linear-gradient(top, #dc7679 0%, #dc7679 49%, #cd2a27 50%, #c92a29 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%); /* IE10+ */ background: linear-gradient(top, #dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc7679', endColorstr='#c92a29',GradientType=0 ); /* IE6-9 */ } .ui-header .ui-btn-up-c .ui-btn-text, .ui-header .ui-btn-hover-c .ui-btn-text { color: #FFF; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); } .ui-header .ui-btn-up-d, .ui-header .ui-btn-hover-d { border-color: #375074; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important; background: #376fe0; /* Old browsers */ background: -moz-linear-gradient(top, #376fe0 0%, #376fe0 49%, #2361de 50%, #2463de 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%); /* IE10+ */ background: linear-gradient(top, #376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#376fe0', endColorstr='#2463de',GradientType=0 ); /* IE6-9 */ } .ui-header .ui-btn-up-d .ui-btn-text, .ui-header .ui-btn-hover-d .ui-btn-text { color: #FFF; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); } /* === FOOTER BAR === */ .ui-footer { border-color: #0d0d0d; background: #2d2d2d; /* Old browsers */ background: -moz-linear-gradient(top, #2d2d2d 0%, #151515 49%, #000000 50%, #000000 100%); /* FF3.6+ */ 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+ */ background: -webkit-linear-gradient(top, #2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%); /* IE10+ */ background: linear-gradient(top, #2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .ui-footer .ui-btn { border: 0 none; background: transparent; } .ui-footer .ui-btn-active { background: none rgba(255,255,255,0.14); -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; border-radius: 4px !important; } .ui-footer .ui-btn-inner { border-color: #434343; padding-top: 40px !important; } .ui-footer .ui-btn-text { font-size: 10px; text-shadow: 0 none; } .ui-footer .ui-icon-custom.ui-icon { width: 32px; height: 32px; margin-left: -16px; } /* fixes issue #25 */ .ui-footer .ui-icon-shadow { -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } #tabA .ui-icon { background: url(images/tabSprite.png) 0 0 no-repeat; } #tabA.ui-btn-active .ui-icon { background: url(images/tabSprite.png) -32px 0 no-repeat; } #tabB .ui-icon { background: url(images/tabSprite.png) 0 -32px no-repeat; } #tabB.ui-btn-active .ui-icon { background: url(images/tabSprite.png) -32px -32px no-repeat; } #tabC .ui-icon { background: url(images/tabSprite.png) 0 -64px no-repeat; } #tabC.ui-btn-active .ui-icon { background: url(images/tabSprite.png) -32px -64px no-repeat; } /* === UI POPUPS === */ .ui-popup { background: rgba(0,0,0,0.75); color: #FFF; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .ui-popup p { color: #FFF; text-shadow: none; } .ui-popup.ui-body-a { width: 150px; height: 150px; } .ui-popup.ui-body-a img { margin: 30px auto 20px auto; display: block; } .ui-popup.ui-body-a p { text-align: center; font-size: 1.1em; font-weight: bold; } /* === NAVIGATION BAR === */ .ui-navbar ul { overflow: hidden; } /* === RETINA DEVICE FIXES === */ @media (-webkit-min-device-pixel-ratio : 1.5), (min-device-pixel-ratio : 1.5) { .ui-listview .ui-icon-arrow-r { background-image: url(images/arrow_right@2x.png) !important; background-size: 9.5px 14px; } a[data-rel='back'], .ui-header a[data-rel='back'], a[data-rel="back"] .ui-btn-inner { background-image: url(images/backButtonSprite@2x.png) !important; background-size: 500px 60px; } .ui-input-clear { background-position: right 0; background-size: 100px 250px; } }