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
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iOS Inspired jQuery Mobile Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" />
<link href="ios_inspired/styles.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
// all dialog buttons should close their parent dialog
$(".ui-dialog button").live("click", function() {
$("[data-role='dialog']").dialog("close");
});
$(document).on("mobileinit", function(){
$.mobile.defaultPageTransition = "slide";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
#footerTabs {
background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4);
}
.ui-listview sup {
font-size: 0.6em;
color: #cc0000;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Page Header</h1>
</div><!-- /header -->
<div data-role="content">
<p>Welcome to the iOS-Inspired jQuery Mobile theme by <a href="http://twitter.com/taitems" target="_blank">@taitems</a>. Feel free to have a look around and report and bugs to the <a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/issues" target="_blank">GitHub issues page</a>.</p>
<ul data-role="listview" data-inset="true">
<li><a href="#headers">Header Bars</a></li>
<li><a href="#headerButtons">Header Buttons</a></li>
<li><a href="#footerTabs">Footer Tabs</a></li>
<li><a href="#formElements">Form Elements</a></li>
<li><a href="#listViews">List Views</a></li>
<li><a href="#dialogs">Dialogs</a></li>
<li><a href="#popups">Popups <sup>New!</sup></a></li>
</ul>
<br />
<br />
</div><!-- /ui-body wrapper -->
</div><!-- /page -->
<div data-role="page" id="formElements">
<div data-role="header" data-position="fixed">
<h1>Form Elements</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header -->
<div data-role="content">
<div data-role="fieldcontain">
<label>Some Fields and Inputs:</label>
<br /><br />
<input type="range" />
<br /><br />
<input type="search" />
<br /><br />
<input type="email" />
<br />
</div>
<div data-role="fieldcontain">
<label for="slider">Select slider:</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
</fieldset>
</div>
<a disabled="disabled" data-role="button" class="ui-btn-plain">Inactive <a></a>
<a data-role="button" class="ui-btn-plain">Active <a></a>
<button disabled="disabled" class="ui-btn-plain">Inactive <button></button>
<button class="ui-btn-plain">Active <button></button>
<p><small>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</small></p>
</div>
</div>
<div data-role="page" id="listViews">
<div data-role="header" data-position="fixed">
<h1>List Example</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Divider</li>
<li><a href="#">Anatomy of a page</a></li>
<li><a href="#">Page transitions</a></li>
<li><a href="#">Dialogs</a></li>
<li><a href="#">Navigation: Ajax, hashes & history</a></li>
<li><a href="#">Link format examples</a></li>
<li><a href="#">Theming pages</a></li>
<li><a href="#">Anatomy of a page</a></li>
<li><a href="#">Page transitions</a></li>
<li><a href="#">Dialogs</a></li>
<li><a href="#">Navigation: Ajax, hashes & history</a></li>
<li><a href="#">Link format examples</a></li>
<li><a href="#">Theming pages</a></li>
<li><a href="#">Anatomy of a page</a></li>
<li><a href="#">Page transitions</a></li>
<li><a href="#">Dialogs</a></li>
<li><a href="#">Navigation: Ajax, hashes & history</a></li>
<li><a href="#">Link format examples</a></li>
<li><a href="#">Theming pages</a></li>
<li><a href="#">Anatomy of a page</a></li>
<li><a href="#">Page transitions</a></li>
<li><a href="#">Dialogs</a></li>
<li><a href="#">Navigation: Ajax, hashes & history</a></li>
<li><a href="#">Link format examples</a></li>
<li><a href="#">Theming pages</a></li>
</ul>
</div>
</div>
<div data-role="page" id="headers">
<div data-role="header" data-position="fixed">
<h1>Headers</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</a>
</div><!-- /header -->
<div data-role="content">
<p>
The default bar is the blue, but you can also use the black by specifying <em>data-theme="b"</em>.
</p>
<div data-role="header" data-position="inline">
<a href="#" data-rel="back" data-theme="a">Back</a>
<h1>Blue Bar</h1>
<a href="#" data-theme="a">Button</a>
</div>
<br />
<div data-role="header" data-theme="b" data-position="inline">
<a href="#" data-rel="back" data-theme="b">Back</a>
<h1>Black Bar</h1>
<a href="#" data-theme="b">Button</a>
</div>
</div>
</div>
<div data-role="page" id="headerButtons">
<div data-role="header" data-position="fixed">
<h1>Header Buttons</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header -->
<div data-role="content">
<p>
The various styled buttons you can place in a header:
</p>
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="a">Edit</a>
</div>
<br />
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="b">Black</a>
</div>
<br />
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="c">Delete</a>
</div>
<br />
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="d">Done</a>
</div>
<br />
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-rel="back" data-icon="arrow-l" data-theme="a">Back</a>
</div>
<br />
<div data-role="header" data-theme="b" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-rel="back" data-icon="arrow-l" data-theme="b">Back</a>
</div>
</div>
</div>
<div data-role="page" id="allDialogExample">
<div data-role="content">
<button data-theme="e">Button Style E</button>
<button data-theme="d">Button Style D</button>
<button data-theme="c">Button Style C</button>
<button data-theme="b">Button Style B</button>
<button data-theme="a">Button Style A</button>
</div>
</div>
<div data-role="page" id="deleteDialogExample">
<div data-role="content">
<button data-theme="e">Delete Draft</button>
<button data-theme="a">Save Draft</button>
<button data-theme="b">Cancel</button>
</div>
</div>
<div data-role="page" id="postDialogExample">
<div data-role="content">
<button data-theme="a">Post to Twitter</button>
<button data-theme="a">Post to Facebook</button>
<button data-theme="a">Post to YouTube</button>
<button data-theme="b">Cancel</button>
</div>
</div>
<div data-role="page" id="dialogs">
<div data-role="header" data-position="fixed">
<h1>Dialogs</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header -->
<div data-role="content">
<a href="#allDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">All the options</a>
<a href="#deleteDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">Delete Example</a>
<a href="#postDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">Post Something</a>
</div>
</div>
<div data-role="page" id="footerTabs" data-theme="b">
<div data-role="header" data-position="fixed">
<h1>Footer Tabs</h1>
<a href="#" data-rel="back">Back</a>
</div><!-- /header -->
<div data-role="content">
Icons by Joseph Wain / <a href="http://www.glyphish.com" target="_blank">glyphish.com</a>. Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/us/" target="_blank">Creative Commons Attribution 3.0 United States License</a>.
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" id="tabA" data-icon="custom">One</a></li>
<li><a href="#" id="tabB" data-icon="custom" class="ui-btn-active">Two</a></li>
<li><a href="#" id="tabC" data-icon="custom">Three</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<div data-role="page" id="popups" data-theme="b">
<div data-role="header" data-position="fixed">
<h1>Popups</h1>
<a href="#" data-rel="back">Back</a>
</div><!-- /header -->
<div data-role="content">
<a href="#popupBasic" data-rel="popup" data-role="button" class="ui-btn-plain">Open Popup</a>
<a href="#popupOverlay" data-rel="popup" data-role="button" class="ui-btn-plain">Open Popup with Overlay</a>
<a href="#popupiOS" data-rel="popup" data-role="button" class="ui-btn-plain">iOS Style Popup</a>
<div data-role="popup" data-transition="fade" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
<div data-role="popup" data-transition="fade" data-overlay-theme="a" id="popupOverlay">
<p>This is a completely basic popup, but with an overlay<p>
</div>
<div data-role="popup" data-transition="fade" data-theme="a" data-position-to="window" id="popupiOS">
<img src="ios_inspired/images/tick.png">
<p>Saved<p>
</div>
</div>
</div>
</body>
</html>
================================================
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;
}
}
gitextract_45kui0tb/
├── .gitignore
├── README.md
├── index.html
└── ios_inspired/
├── images/
│ └── iconSprite.psd
└── styles.css
Condensed preview — 5 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (48K chars).
[
{
"path": ".gitignore",
"chars": 66,
"preview": "\nios_inspired/images/.DS_Store\n\nios_inspired/.DS_Store\n\n.DS_Store\n"
},
{
"path": "README.md",
"chars": 229,
"preview": "iOS-Inspired Theme for jQuery Mobile\n======\n\n- Supports jQuery Mobile 1.2.0\n\nDistributed under the [MIT License](http://"
},
{
"path": "index.html",
"chars": 11056,
"preview": "<!DOCTYPE html> \r\n<html> \r\n\t<head> \r\n\t<meta charset=\"utf-8\" /> \r\n\t<title>iOS Inspired jQuery Mobile Theme</title> \r\n\t<me"
},
{
"path": "ios_inspired/styles.css",
"chars": 33191,
"preview": "/* === PAGE BACKGROUND AND GENERICS === */\n.ui-page, .ui-mobile-viewport {\n\tbackground: url(images/tiling_stripes.gif);\n"
}
]
// ... and 1 more files (download for full content)
About this extraction
This page contains the full source code of the taitems/iOS-Inspired-jQuery-Mobile-Theme GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 5 files (43.5 KB), approximately 16.4k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.