themeroller.jquerymobile.comThemeRoller | jQuery Mobile

Welcome to ThemeRoller for jQuery Mobile Create up to 26 theme "swatches" lettered from A-Z, each with a unique color scheme, then mix and match for unlimited possibilities. ToEven though the tool works in IE9, it doesn’t support CSS gradients so we don’t recommend recommend usingby IE8 so we use [disabled] */ .ui-disabled, .ui-state-disabled, button[disabled], .ui-select .ui-btn.ui-state-disabled { filter: Alpha(Opacity=30); opacity: .3; cursor: default !important; pointer-events: none; } /* Focus state outline -*/ .ui-btn:focus, .ui-btn.ui-focus { outline: 0; } /* Unset box-shadow in browsers that don’t do it right */ .ui-noboxshadow .ui-shadow, .ui-noboxshadow .ui-shadow-inset, .ui-noboxshadow .ui-overlay-shadow, .ui-noboxshadow .ui-shadow-icon.ui-btn:after, .ui-noboxshadow .ui-shadow-icon .ui-btn:after, .ui-noboxshadow .ui-focus, .ui-noboxshadow .ui-btn:focus, .ui-noboxshadow input:focus, .ui-noboxshadow .ui-panel { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .ui-noboxshadow .ui-btn:focus, .ui-noboxshadow .ui-focus { outline-width: 1px; outline-style: auto; } /*! * jQuery Mobile 1.4.5 * Git HEAD hash: 68e55e78b292634d3991c795f06f5e37a512deccDate: Fri Oct 31 2014 17:33:30 UTC * http://jquerymobile.com * * Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors * Released under the MIT license. * http://jquery.org/license * */ /* Globals */ /* Font -*/ html { font-size: 100%; } body, input, select, textarea, button, .ui-btn { font-size: 1em; line-height: 1.3; font-family: sans-serif /*{global-font-family}*/; } legend, .ui-input-text input, .ui-input-search input { color: inherit; text-shadow: inherit; } /* Form labels (overrides font-weight bold in bars, and mini font-size) */ .ui-mobile label, div.ui-controlgroup-label { font-weight: normal; font-size: 16px; } /* Separators -*/ /* Field contain separator ( 28em) */ .ui-field-contain { border-bottom-color: #828282; border-bottom-color: rgba(0,0,0,.15); border-bottom-width: 1px; border-bottom-style: solid; } /* Table opt-in classes: strokes between each row, and alternating row stripes */ /* Classes table-stroke and table-stripe are deprecated in 1.4. */ .table-stroke thead th, .table-stripe thead th, .table-stripe tbody tr:last-child { border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */ border-bottom: 1px solid rgba(0,0,0,.1); } .table-stroke tbody th, .table-stroke tbody td { border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback */ border-bottom: 1px solid rgba(0,0,0,.05); } .table-stripe.table-stroke tbody tr:last-child th, .table-stripe.table-stroke tbody tr:last-child td { border-bottom: 0; } .table-stripe tbody tr:nth-child(odd) td, .table-stripe tbody tr:nth-child(odd) th { background-color: #eeeeee; /* non-RGBA fallback */ background-color: rgba(0,0,0,.04); } /* Buttons -*/ .ui-btn, label.ui-btn { font-weight: bold; border-width: 1px; border-style: solid; } .ui-btn { text-decoration: none !important; } .ui-btn-active { cursor: pointer; } /* Corner rounding -*/ /* Class ui-btn-corner-all deprecated in 1.4 */ .ui-corner-all { -webkit-border-radius: .3125em /*{global-radii-blocks}*/; border-radius: .3125em /*{global-radii-blocks}*/; } /* Buttons */ .ui-btn-corner-all, .ui-btn.ui-corner-all, /* Slider track */ .ui-slider-track.ui-corner-all, /* Flipswitch */ .ui-flipswitch.ui-corner-all, /* Count bubble */ .ui-li-count { -webkit-border-radius: .3125em /*{global-radii-buttons}*/; border-radius: .3125em /*{global-radii-buttons}*/; } /* Icon-only buttons */ .ui-btn-icon-notext.ui-btn-corner-all, .ui-btn-icon-notext.ui-corner-all { -webkit-border-radius: 1em; border-radius: 1em; } /* Radius clip workaround for cleaning up corner trapping */ .ui-btn-corner-all, .ui-corner-all { -webkit-background-clip: padding; background-clip: padding-box; } /* Popup arrow */ .ui-popup.ui-corner-all.ui-popup-arrow-guide { left: .6em /*{global-radii-blocks}*/; right: .6em /*{global-radii-blocks}*/; top: .6em /*{global-radii-blocks}*/; bottom: .6em /*{global-radii-blocks}*/; } /* Shadow -*/ .ui-shadow { -webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/; -moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/; box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/; } .ui-shadow-inset { -webkit-box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/; -moz-box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/; box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/; } .ui-overlay-shadow { -webkit-box-shadow: 0 0 12px rgba(0,0,0,.6); -moz-box-shadow: 0 0 12px rgba(0,0,0,.6); box-shadow: 0 0 12px rgba(0,0,0,.6); } /* Icons -*/ .ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after { background-color: #666666 /*{global-icon-color}*/; background-color: rgba(0,0,0,.3) /*{global-icon-disc}*/; background-position: center center; background-repeat: no-repeat; -webkit-border-radius: 1em; border-radius: 1em; } /* Alt icons */ .ui-alt-icon.ui-btn:after, .ui-alt-icon .ui-btn:after, html .ui-alt-icon.ui-checkbox-off:after, html .ui-alt-icon.ui-radio-off:after, html .ui-alt-icon .ui-checkbox-off:after, html .ui-alt-icon .ui-radio-off:after { background-color: #666666 /*{global-icon-color}*/; background-color: rgba(0,0,0,.15) /*{global-icon-disc}*/; } /* No disc */ .ui-nodisc-icon.ui-btn:after, .ui-nodisc-icon .ui-btn:after { background-color: transparent; } /* Icon shadow */ .ui-shadow-icon.ui-btn:after, .ui-shadow-icon .ui-btn:after { -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.3) /*{global-icon-shadow}*/; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.3) /*{global-icon-shadow}*/; box-shadow: 0 1px 0 rgba(255,255,255,.3) /*{global-icon-shadow}*/; } /* Checkbox and radio */ .ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after, .ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after { display: block; width: 18px; height: 18px; margin: -9px 2px 0 2px; } .ui-checkbox-off:after, .ui-btn.ui-radio-off:after { filter: Alpha(Opacity=30); opacity: .3; } .ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after { -webkit-border-radius: .1875em; border-radius: .1875em; } .ui-btn.ui-checkbox-off:after { background-color: #666; background-color: rgba(0,0,0,.3); } .ui-radio .ui-btn.ui-radio-on:after { background-image: none; background-color: #fff; width: 8px; height: 8px; border-width: 5px; border-style: solid; } .ui-alt-icon.ui-btn.ui-radio-on:after, .ui-alt-icon .ui-btn.ui-radio-on:after { background-color: #000; } /* Loader */ .ui-icon-loading { background: url("images/ajax-loader.gif"); background-size: 2.875em 2.875em; } /* Swatches */ /* A -*/ /* Bar: Toolbars, dividers, slider track */ .ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit { background-color: #e9e9e9 /*{a-bar-background-color}*/; border-color: #dddddd /*{a-bar-border}*/; color: #333333 /*{a-bar-color}*/; text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #eeeeee /*{a-bar-shadow-color}*/; font-weight: bold; } .ui-bar-a { border-width: 1px; border-style: solid; } /* Page and overlay */ .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { background-color: #f9f9f9 /*{a-page-background-color}*/; border-color: #bbbbbb /*{a-page-border}*/; color: #333333 /*{a-page-color}*/; text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/; } /* Body: Read-only lists, text inputs, collapsible content */ .ui-body-a, .ui-page-theme-a .ui-body-inherit, html .ui-bar-a .ui-body-inherit, html .ui-body-a .ui-body-inherit, html body...