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.

To upgrade a theme to 1.1.2: Click the Import button, paste in your uncompressed theme, then tweak and download the upgraded version.

Import ThemeImport Default Theme

Copy and paste the contents of any uncompressed jQuery Mobile theme file to load it in for editing.

Download Theme

This will generate a Zip file that contains both a compressed (for production) and uncompressed (for editing) version of the theme.

To use your theme, add it to the head of your page before the jquery.mobile.structure file, like this:

				
<!DOCTYPE html>
<html>
<head>

  <title>jQuery Mobile page</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.2/jquery.mobile.structure-1.1.2.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js"></script> 

</head>
				
			

Tip: To edit your theme later, use the import feature to paste in the uncompressed theme file

ThemeRoller Mobile Help

The ThemeRoller Mobile tool makes it easy to create custom-designed themes for your mobile site or app. Just pick colors, download the theme, and drop it into your site.

Theme basics ^ Top

A jQuery Mobile theme contains a both global settings for things like rounded corner radius and active (on) state, and up to to 26 "swatches" lettered from A-Z, each with a unique color scheme that can be mixed and matched for unlimited possibilities. Each swatch sets the colors, textures and font settings for the primary elements: toolbar, content block and button. Buttons have 3 interaction states: normal, hover, pressed.

Getting Started ^ Top

The ThemeRoller interface has 3 major zones: the left column contains the inspector panel, along the top is the QuickSwatch/Kuler bar, and below this is the preview window.

Use the inspector pane to set global theme settings on the first tab and tweak the individual style options for each swatch. Above the tabs, there are links to download, or import a theme.

In the QuickSwatch bar, you can turn the inspector feature on to automatically expand the relevant inspector section when you click on an element in the preview pane. Drag and drop a color from the QuickSwatch panel onto an element in the preview pane and the tool with automatically calculate text color and shadow, borders, gradients and even button states. The sliders make it easy to adjust the lightness and saturation of the colors.

The preview pane shows a sample of common jQuery Mobile widgets that live update each time you make a change to the theme so you can quickly test and tweak the theme.

Downloading themes ^ Top

Once you have created your final theme, click the Download Theme link at the top of the inspector panel. In the download dialog, give your theme a name and press the Download Zip button. This will generate a zip file that contains both the compressed (production-ready) and uncompressed (editable) theme files and a simple test page (index.html) to show that everything worked (whew) and instructions on how to add the theme to your site. It's pretty simple: link your custom theme in the head of the page followed by the jQuery Mobile structure theme and you're ready to go.

Importing themes ^ Top

The import feature is primarily designed to make it easy to either edit a theme you've downloaded or to generate an updated version of a theme for a new release of the library. When you download a theme, be sure keep the uncompressed version of the theme CSS file because this is used in the import process. To import a theme, click the Import link and paste the entire contents of the uncompressed theme file (select all > copy > paste) into the text input in the dialog, and the system will parse the theme into an editable format for downloading or changing further.

Supported browsers ^ Top

This is a beta version of a developer tool so we're committing to supporting the latest versions of popular desktop browsers: Chrome, Firefox, Safari. Even though the tool works in IE9, it doesn't support CSS gradients so we don't recommend recommend using this browser to create themes. If you're running into issues, maybe try a different browser or log an issue in the tracker.

  

jQuery Mobile
Version 1.1.2
    Switch to version:
  • 1.4.5
  • 1.3.2
  • 1.2.1
  • 1.0.1
Undo undo
Redo redo
 Inspector off
Download
Download theme zip file
Import
Import or upgrade
Help
Help center
1.1.2
/* * jQuery Mobile Framework 1.1.2 9a15f1aaf99faa7913103f5ea19ef6959b73d763 * http://jquerymobile.com * * Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors * Released under the MIT license. * http://jquery.org/license * */ /* Swatches */ /* A -----------------------------------------------------------------------------------------------------------*/ .ui-bar-a { border: 1px solid #B3B3B3 /*{a-bar-border}*/; background: #eeeeee /*{a-bar-background-color}*/; color: #3E3E3E /*{a-bar-color}*/; font-weight: bold; text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #ffffff /*{a-bar-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #f0f0f0 /*{a-bar-background-start}*/), to( #dddddd /*{a-bar-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); } .ui-bar-a .ui-link-inherit { color: #3E3E3E /*{a-bar-color}*/; } .ui-bar-a a.ui-link { color: #7cc4e7 /*{a-bar-link-color}*/; font-weight: bold; } .ui-bar-a a.ui-link:visited { color: #2489CE /*{a-bar-link-visited}*/; } .ui-bar-a a.ui-link:hover { color: #2489CE /*{a-bar-link-hover}*/; } .ui-bar-a a.ui-link:active { color: #2489CE /*{a-bar-link-active}*/; } .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button { font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; } .ui-body-a, .ui-overlay-a { border: 1px solid #aaaaaa /*{a-body-border}*/; color: #333333 /*{a-body-color}*/; text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #ffffff /*{a-body-shadow-color}*/; background: #f9f9f9 /*{a-body-background-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #f9f9f9 /*{a-body-background-start}*/), to( #eeeeee /*{a-body-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #eeeeee /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #eeeeee /*{a-body-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #eeeeee /*{a-body-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #eeeeee /*{a-body-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #eeeeee /*{a-body-background-end}*/); } .ui-overlay-a { background-image: none; border-width: 0; } .ui-body-a, .ui-body-a input, .ui-body-a select, .ui-body-a textarea, .ui-body-a button { font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; } .ui-body-a .ui-link-inherit { color: #333333 /*{a-body-color}*/; } .ui-body-a .ui-link { color: #2489CE /*{a-body-link-color}*/; font-weight: bold; } .ui-body-a .ui-link:visited { color: #2489CE /*{a-body-link-visited}*/; } .ui-body-a .ui-link:hover { color: #2489CE /*{a-body-link-hover}*/; } .ui-body-a .ui-link:active { color: #2489CE /*{a-body-link-active}*/; } .ui-btn-up-a { border: 1px solid #cccccc /*{a-bup-border}*/; background: #eeeeee /*{a-bup-background-color}*/; font-weight: bold; color: #222222 /*{a-bup-color}*/; text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #ffffff /*{a-bup-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #ffffff /*{a-bup-background-start}*/), to( #f1f1f1 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); } .ui-btn-up-a:visited, .ui-btn-up-a a.ui-link-inherit { color: #2F3E46 /*{a-bup-color}*/; } .ui-btn-hover-a { border: 1px solid #bbbbbb /*{a-bhover-border}*/; background: #dfdfdf /*{a-bhover-background-color}*/; font-weight: bold; color: #222222 /*{a-bhover-color}*/; text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #ffffff /*{a-bhover-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #f6f6f6 /*{a-bhover-background-start}*/), to( #e0e0e0 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); } .ui-btn-hover-a:visited, .ui-btn-hover-a:hover, .ui-btn-hover-a a.ui-link-inherit { color: #2F3E46 /*{a-bhover-color}*/; } .ui-btn-down-a { border: 1px solid #bbbbbb /*{a-bdown-border}*/; background: #d6d6d6 /*{a-bdown-background-color}*/; font-weight: bold; color: #222222 /*{a-bdown-color}*/; text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 0 /*{a-bdown-shadow-radius}*/ #ffffff /*{a-bdown-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #d0d0d0 /*{a-bdown-background-start}*/), to( #dfdfdf /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); } .ui-btn-down-a:visited, .ui-btn-down-a:hover, .ui-btn-down-a a.ui-link-inherit { color: #2F3E46 /*{a-bdown-color}*/; } .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a { font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; text-decoration: none; } /* Structure */ /* links within "buttons" -----------------------------------------------------------------------------------------------------------*/ a.ui-link-inherit { text-decoration: none !important; } /* Active class used as the "on" state across all themes -----------------------------------------------------------------------------------------------------------*/ .ui-btn-active { border: 1px solid #2373a5 /*{global-active-border}*/; background: #5393c5 /*{global-active-background-color}*/; font-weight: bold; color: #ffffff /*{global-active-color}*/; cursor: pointer; text-shadow: 0 /*{global-active-shadow-x}*/ 1px /*{global-active-shadow-y}*/ 1px /*{global-active-shadow-radius}*/ #3373a5 /*{global-active-shadow-color}*/; text-decoration: none; background-image: -webkit-gradient(linear, left top, left bottom, from( #5393c5 /*{global-active-background-start}*/), to( #6facd5 /*{global-active-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; } .ui-btn-active:visited, .ui-btn-active:hover, .ui-btn-active a.ui-link-inherit { color: #ffffff /*{global-active-color}*/; } /* button inner top highlight -----------------------------------------------------------------------------------------------------------*/ .ui-btn-inner { border-top: 1px solid #fff; border-color: rgba(255,255,255,.3); } /* corner rounding classes -----------------------------------------------------------------------------------------------------------*/ .ui-corner-tl { -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/; -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/; border-top-left-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-tr { -moz-border-radius-topright: .6em /*{global-radii-blocks}*/; -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/; border-top-right-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-bl { -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/; border-bottom-left-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-br { -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/; border-bottom-right-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-top { -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/; -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/; border-top-left-radius: .6em /*{global-radii-blocks}*/; -moz-border-radius-topright: .6em /*{global-radii-blocks}*/; -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/; border-top-right-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-bottom { -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/; border-bottom-left-radius: .6em /*{global-radii-blocks}*/; -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/; border-bottom-right-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-right { -moz-border-radius-topright: .6em /*{global-radii-blocks}*/; -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/; border-top-right-radius: .6em /*{global-radii-blocks}*/; -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/; border-bottom-right-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-left { -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/; -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/; border-top-left-radius: .6em /*{global-radii-blocks}*/; -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/; border-bottom-left-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-all { -moz-border-radius: .6em /*{global-radii-blocks}*/; -webkit-border-radius: .6em /*{global-radii-blocks}*/; border-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-none { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } /* Form field separator -----------------------------------------------------------------------------------------------------------*/ .ui-br { border-bottom: rgb(130,130,130); border-bottom: rgba(130,130,130,.3); border-bottom-width: 1px; border-bottom-style: solid; } /* Interaction cues -----------------------------------------------------------------------------------------------------------*/ .ui-disabled { filter: Alpha(Opacity=30); opacity: .3; zoom: 1; } .ui-disabled, .ui-disabled a { cursor: default !important; pointer-events: none; } /* Icons -----------------------------------------------------------------------------------------------------------*/ .ui-icon, .ui-icon-searchfield:after { background: #666666 /*{global-icon-color}*/; background: rgba(0,0,0,.4) /*{global-icon-disc}*/; background-image: url(images/icons-18-white.png) /*{global-icon-set}*/; background-repeat: no-repeat; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; } /* Alt icon color -----------------------------------------------------------------------------------------------------------*/ .ui-icon-alt { background: #fff; background: rgba(255,255,255,.3); background-image: url(images/icons-18-black.png); background-repeat: no-repeat; } /* HD/"retina" sprite -----------------------------------------------------------------------------------------------------------*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r, .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check, .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back, .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after, .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on { background-image: url(images/icons-36-white.png); -moz-background-size: 776px 18px; -o-background-size: 776px 18px; -webkit-background-size: 776px 18px; background-size: 776px 18px; } .ui-icon-alt { background-image: url(images/icons-36-black.png); } } /* plus minus */ .ui-icon-plus { background-position: -0 50%; } .ui-icon-minus { background-position: -36px 50%; } /* delete/close */ .ui-icon-delete { background-position: -72px 50%; } /* arrows */ .ui-icon-arrow-r { background-position: -108px 50%; } .ui-icon-arrow-l { background-position: -144px 50%; } .ui-icon-arrow-u { background-position: -180px 50%; } .ui-icon-arrow-d { background-position: -216px 50%; } /* misc */ .ui-icon-check { background-position: -252px 50%; } .ui-icon-gear { background-position: -288px 50%; } .ui-icon-refresh { background-position: -324px 50%; } .ui-icon-forward { background-position: -360px 50%; } .ui-icon-back { background-position: -396px 50%; } .ui-icon-grid { background-position: -432px 50%; } .ui-icon-star { background-position: -468px 50%; } .ui-icon-alert { background-position: -504px 50%; } .ui-icon-info { background-position: -540px 50%; } .ui-icon-home { background-position: -576px 50%; } .ui-icon-search, .ui-icon-searchfield:after { background-position: -612px 50%; } .ui-icon-checkbox-off { background-position: -684px 50%; } .ui-icon-checkbox-on { background-position: -648px 50%; } .ui-icon-radio-off { background-position: -756px 50%; } .ui-icon-radio-on { background-position: -720px 50%; } /* checks,radios */ .ui-checkbox .ui-icon { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .ui-icon-checkbox-off, .ui-icon-radio-off { background-color: transparent; } .ui-checkbox-on .ui-icon, .ui-radio-on .ui-icon { background-color: #4596ce /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */ } /* loading icon */ .ui-icon-loading { background: url(images/ajax-loader.gif); background-size: 46px 46px; } /* Button corner classes -----------------------------------------------------------------------------------------------------------*/ .ui-btn-corner-tl { -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/; -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/; border-top-left-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-tr { -moz-border-radius-topright: 1em /*{global-radii-buttons}*/; -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/; border-top-right-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-bl { -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/; border-bottom-left-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-br { -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/; border-bottom-right-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-top { -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/; -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/; border-top-left-radius: 1em /*{global-radii-buttons}*/; -moz-border-radius-topright: 1em /*{global-radii-buttons}*/; -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/; border-top-right-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-bottom { -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/; border-bottom-left-radius: 1em /*{global-radii-buttons}*/; -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/; border-bottom-right-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-right { -moz-border-radius-topright: 1em /*{global-radii-buttons}*/; -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/; border-top-right-radius: 1em /*{global-radii-buttons}*/; -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/; border-bottom-right-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-left { -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/; -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/; border-top-left-radius: 1em /*{global-radii-buttons}*/; -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/; border-bottom-left-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-all { -moz-border-radius: 1em /*{global-radii-buttons}*/; -webkit-border-radius: 1em /*{global-radii-buttons}*/; border-radius: 1em /*{global-radii-buttons}*/; } /* radius clip workaround for cleaning up corner trapping */ .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br, .ui-corner-top, .ui-corner-bottom, .ui-corner-right, .ui-corner-left, .ui-corner-all, .ui-btn-corner-tl, .ui-btn-corner-tr, .ui-btn-corner-bl, .ui-btn-corner-br, .ui-btn-corner-top, .ui-btn-corner-bottom, .ui-btn-corner-right, .ui-btn-corner-left, .ui-btn-corner-all { -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } /* Overlay / modal -----------------------------------------------------------------------------------------------------------*/ .ui-overlay { background: #666; filter: Alpha(Opacity=50); opacity: .5; position: absolute; width: 100%; height: 100%; } .ui-overlay-shadow { -moz-box-shadow: 0px 0px 12px rgba(0,0,0,.6); -webkit-box-shadow: 0px 0px 12px rgba(0,0,0,.6); box-shadow: 0px 0px 12px rgba(0,0,0,.6); } .ui-shadow { -moz-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/; -webkit-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/; box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/; } .ui-bar-a .ui-shadow, .ui-bar-b .ui-shadow , .ui-bar-c .ui-shadow { -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3); -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3); box-shadow: 0px 1px 0 rgba(255,255,255,.3); } .ui-shadow-inset { -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); } .ui-icon-shadow { -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/; -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/; box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/; } /* Focus state - set here for specificity (note: these classes are added by JavaScript) -----------------------------------------------------------------------------------------------------------*/ .ui-btn:focus, .ui-link-inherit:focus { outline: 0; } .ui-btn.ui-focus { z-index: 1; } .ui-focus, .ui-btn:focus { -moz-box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/; -webkit-box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/; box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/; } .ui-input-text.ui-focus, .ui-input-search.ui-focus { -moz-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/; -webkit-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/; box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/; } /* unset box shadow in browsers that don't do it right -----------------------------------------------------------------------------------------------------------*/ .ui-mobile-nosupport-boxshadow * { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } /* ...and bring back focus */ .ui-mobile-nosupport-boxshadow .ui-focus, .ui-mobile-nosupport-boxshadow .ui-btn:focus, .ui-mobile-nosupport-boxshadow .ui-link-inherit:focus { outline-width: 1px; outline-style: auto; }
/* * jQuery Mobile Framework 1.1.2 9a15f1aaf99faa7913103f5ea19ef6959b73d763 * http://jquerymobile.com * * Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors * Released under the MIT license. * http://jquery.org/license * */ /* Swatches */ /* A -----------------------------------------------------------------------------------------------------------*/ .ui-bar-a { border: 1px solid #B3B3B3 /*{a-bar-border}*/; background: #eeeeee /*{a-bar-background-color}*/; color: #3E3E3E /*{a-bar-color}*/; font-weight: bold; text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #ffffff /*{a-bar-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #f0f0f0 /*{a-bar-background-start}*/), to( #dddddd /*{a-bar-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #f0f0f0 /*{a-bar-background-start}*/, #dddddd /*{a-bar-background-end}*/); } .ui-bar-a .ui-link-inherit { color: #3E3E3E /*{a-bar-color}*/; } .ui-bar-a a.ui-link { color: #7cc4e7 /*{a-bar-link-color}*/; font-weight: bold; } .ui-bar-a a.ui-link:visited { color: #2489CE /*{a-bar-link-visited}*/; } .ui-bar-a a.ui-link:hover { color: #2489CE /*{a-bar-link-hover}*/; } .ui-bar-a a.ui-link:active { color: #2489CE /*{a-bar-link-active}*/; } .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button { font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; } .ui-body-a, .ui-overlay-a { border: 1px solid #aaaaaa /*{a-body-border}*/; color: #333333 /*{a-body-color}*/; text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #ffffff /*{a-body-shadow-color}*/; background: #f9f9f9 /*{a-body-background-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #f9f9f9 /*{a-body-background-start}*/), to( #eeeeee /*{a-body-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #eeeeee /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #eeeeee /*{a-body-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #eeeeee /*{a-body-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #eeeeee /*{a-body-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #eeeeee /*{a-body-background-end}*/); } .ui-overlay-a { background-image: none; border-width: 0; } .ui-body-a, .ui-body-a input, .ui-body-a select, .ui-body-a textarea, .ui-body-a button { font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; } .ui-body-a .ui-link-inherit { color: #333333 /*{a-body-color}*/; } .ui-body-a .ui-link { color: #2489CE /*{a-body-link-color}*/; font-weight: bold; } .ui-body-a .ui-link:visited { color: #2489CE /*{a-body-link-visited}*/; } .ui-body-a .ui-link:hover { color: #2489CE /*{a-body-link-hover}*/; } .ui-body-a .ui-link:active { color: #2489CE /*{a-body-link-active}*/; } .ui-btn-up-a { border: 1px solid #cccccc /*{a-bup-border}*/; background: #eeeeee /*{a-bup-background-color}*/; font-weight: bold; color: #222222 /*{a-bup-color}*/; text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #ffffff /*{a-bup-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #ffffff /*{a-bup-background-start}*/), to( #f1f1f1 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); } .ui-btn-up-a:visited, .ui-btn-up-a a.ui-link-inherit { color: #2F3E46 /*{a-bup-color}*/; } .ui-btn-hover-a { border: 1px solid #bbbbbb /*{a-bhover-border}*/; background: #dfdfdf /*{a-bhover-background-color}*/; font-weight: bold; color: #222222 /*{a-bhover-color}*/; text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #ffffff /*{a-bhover-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #f6f6f6 /*{a-bhover-background-start}*/), to( #e0e0e0 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); } .ui-btn-hover-a:visited, .ui-btn-hover-a:hover, .ui-btn-hover-a a.ui-link-inherit { color: #2F3E46 /*{a-bhover-color}*/; } .ui-btn-down-a { border: 1px solid #bbbbbb /*{a-bdown-border}*/; background: #d6d6d6 /*{a-bdown-background-color}*/; font-weight: bold; color: #222222 /*{a-bdown-color}*/; text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 0 /*{a-bdown-shadow-radius}*/ #ffffff /*{a-bdown-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #d0d0d0 /*{a-bdown-background-start}*/), to( #dfdfdf /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); } .ui-btn-down-a:visited, .ui-btn-down-a:hover, .ui-btn-down-a a.ui-link-inherit { color: #2F3E46 /*{a-bdown-color}*/; } .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a { font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; text-decoration: none; } /* Structure */ /* links within "buttons" -----------------------------------------------------------------------------------------------------------*/ a.ui-link-inherit { text-decoration: none !important; } /* Active class used as the "on" state across all themes -----------------------------------------------------------------------------------------------------------*/ .ui-btn-active { border: 1px solid #2373a5 /*{global-active-border}*/; background: #5393c5 /*{global-active-background-color}*/; font-weight: bold; color: #ffffff /*{global-active-color}*/; cursor: pointer; text-shadow: 0 /*{global-active-shadow-x}*/ 1px /*{global-active-shadow-y}*/ 1px /*{global-active-shadow-radius}*/ #3373a5 /*{global-active-shadow-color}*/; text-decoration: none; background-image: -webkit-gradient(linear, left top, left bottom, from( #5393c5 /*{global-active-background-start}*/), to( #6facd5 /*{global-active-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; } .ui-btn-active:visited, .ui-btn-active:hover, .ui-btn-active a.ui-link-inherit { color: #ffffff /*{global-active-color}*/; } /* button inner top highlight -----------------------------------------------------------------------------------------------------------*/ .ui-btn-inner { border-top: 1px solid #fff; border-color: rgba(255,255,255,.3); } /* corner rounding classes -----------------------------------------------------------------------------------------------------------*/ .ui-corner-tl { -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/; -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/; border-top-left-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-tr { -moz-border-radius-topright: .6em /*{global-radii-blocks}*/; -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/; border-top-right-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-bl { -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/; border-bottom-left-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-br { -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/; border-bottom-right-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-top { -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/; -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/; border-top-left-radius: .6em /*{global-radii-blocks}*/; -moz-border-radius-topright: .6em /*{global-radii-blocks}*/; -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/; border-top-right-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-bottom { -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/; border-bottom-left-radius: .6em /*{global-radii-blocks}*/; -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/; border-bottom-right-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-right { -moz-border-radius-topright: .6em /*{global-radii-blocks}*/; -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/; border-top-right-radius: .6em /*{global-radii-blocks}*/; -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/; border-bottom-right-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-left { -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/; -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/; border-top-left-radius: .6em /*{global-radii-blocks}*/; -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/; -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/; border-bottom-left-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-all { -moz-border-radius: .6em /*{global-radii-blocks}*/; -webkit-border-radius: .6em /*{global-radii-blocks}*/; border-radius: .6em /*{global-radii-blocks}*/; } .ui-corner-none { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } /* Form field separator -----------------------------------------------------------------------------------------------------------*/ .ui-br { border-bottom: rgb(130,130,130); border-bottom: rgba(130,130,130,.3); border-bottom-width: 1px; border-bottom-style: solid; } /* Interaction cues -----------------------------------------------------------------------------------------------------------*/ .ui-disabled { filter: Alpha(Opacity=30); opacity: .3; zoom: 1; } .ui-disabled, .ui-disabled a { cursor: default !important; pointer-events: none; } /* Icons -----------------------------------------------------------------------------------------------------------*/ .ui-icon, .ui-icon-searchfield:after { background: #666666 /*{global-icon-color}*/; background: rgba(0,0,0,.4) /*{global-icon-disc}*/; background-image: url(images/icons-18-white.png) /*{global-icon-set}*/; background-repeat: no-repeat; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; } /* Alt icon color -----------------------------------------------------------------------------------------------------------*/ .ui-icon-alt { background: #fff; background: rgba(255,255,255,.3); background-image: url(images/icons-18-black.png); background-repeat: no-repeat; } /* HD/"retina" sprite -----------------------------------------------------------------------------------------------------------*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r, .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check, .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back, .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after, .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on { background-image: url(images/icons-36-white.png); -moz-background-size: 776px 18px; -o-background-size: 776px 18px; -webkit-background-size: 776px 18px; background-size: 776px 18px; } .ui-icon-alt { background-image: url(images/icons-36-black.png); } } /* plus minus */ .ui-icon-plus { background-position: -0 50%; } .ui-icon-minus { background-position: -36px 50%; } /* delete/close */ .ui-icon-delete { background-position: -72px 50%; } /* arrows */ .ui-icon-arrow-r { background-position: -108px 50%; } .ui-icon-arrow-l { background-position: -144px 50%; } .ui-icon-arrow-u { background-position: -180px 50%; } .ui-icon-arrow-d { background-position: -216px 50%; } /* misc */ .ui-icon-check { background-position: -252px 50%; } .ui-icon-gear { background-position: -288px 50%; } .ui-icon-refresh { background-position: -324px 50%; } .ui-icon-forward { background-position: -360px 50%; } .ui-icon-back { background-position: -396px 50%; } .ui-icon-grid { background-position: -432px 50%; } .ui-icon-star { background-position: -468px 50%; } .ui-icon-alert { background-position: -504px 50%; } .ui-icon-info { background-position: -540px 50%; } .ui-icon-home { background-position: -576px 50%; } .ui-icon-search, .ui-icon-searchfield:after { background-position: -612px 50%; } .ui-icon-checkbox-off { background-position: -684px 50%; } .ui-icon-checkbox-on { background-position: -648px 50%; } .ui-icon-radio-off { background-position: -756px 50%; } .ui-icon-radio-on { background-position: -720px 50%; } /* checks,radios */ .ui-checkbox .ui-icon { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .ui-icon-checkbox-off, .ui-icon-radio-off { background-color: transparent; } .ui-checkbox-on .ui-icon, .ui-radio-on .ui-icon { background-color: #4596ce /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */ } /* loading icon */ .ui-icon-loading { background: url(images/ajax-loader.gif); background-size: 46px 46px; } /* Button corner classes -----------------------------------------------------------------------------------------------------------*/ .ui-btn-corner-tl { -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/; -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/; border-top-left-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-tr { -moz-border-radius-topright: 1em /*{global-radii-buttons}*/; -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/; border-top-right-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-bl { -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/; border-bottom-left-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-br { -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/; border-bottom-right-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-top { -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/; -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/; border-top-left-radius: 1em /*{global-radii-buttons}*/; -moz-border-radius-topright: 1em /*{global-radii-buttons}*/; -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/; border-top-right-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-bottom { -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/; border-bottom-left-radius: 1em /*{global-radii-buttons}*/; -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/; border-bottom-right-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-right { -moz-border-radius-topright: 1em /*{global-radii-buttons}*/; -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/; border-top-right-radius: 1em /*{global-radii-buttons}*/; -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/; border-bottom-right-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-left { -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/; -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/; border-top-left-radius: 1em /*{global-radii-buttons}*/; -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/; -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/; border-bottom-left-radius: 1em /*{global-radii-buttons}*/; } .ui-btn-corner-all { -moz-border-radius: 1em /*{global-radii-buttons}*/; -webkit-border-radius: 1em /*{global-radii-buttons}*/; border-radius: 1em /*{global-radii-buttons}*/; } /* radius clip workaround for cleaning up corner trapping */ .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br, .ui-corner-top, .ui-corner-bottom, .ui-corner-right, .ui-corner-left, .ui-corner-all, .ui-btn-corner-tl, .ui-btn-corner-tr, .ui-btn-corner-bl, .ui-btn-corner-br, .ui-btn-corner-top, .ui-btn-corner-bottom, .ui-btn-corner-right, .ui-btn-corner-left, .ui-btn-corner-all { -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } /* Overlay / modal -----------------------------------------------------------------------------------------------------------*/ .ui-overlay { background: #666; filter: Alpha(Opacity=50); opacity: .5; position: absolute; width: 100%; height: 100%; } .ui-overlay-shadow { -moz-box-shadow: 0px 0px 12px rgba(0,0,0,.6); -webkit-box-shadow: 0px 0px 12px rgba(0,0,0,.6); box-shadow: 0px 0px 12px rgba(0,0,0,.6); } .ui-shadow { -moz-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/; -webkit-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/; box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/; } .ui-bar-a .ui-shadow, .ui-bar-b .ui-shadow , .ui-bar-c .ui-shadow { -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3); -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3); box-shadow: 0px 1px 0 rgba(255,255,255,.3); } .ui-shadow-inset { -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); } .ui-icon-shadow { -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/; -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/; box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/; } /* Focus state - set here for specificity (note: these classes are added by JavaScript) -----------------------------------------------------------------------------------------------------------*/ .ui-btn:focus, .ui-link-inherit:focus { outline: 0; } .ui-btn.ui-focus { z-index: 1; } .ui-focus, .ui-btn:focus { -moz-box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/; -webkit-box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/; box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/; } .ui-input-text.ui-focus, .ui-input-search.ui-focus { -moz-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/; -webkit-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/; box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/; } /* unset box shadow in browsers that don't do it right -----------------------------------------------------------------------------------------------------------*/ .ui-mobile-nosupport-boxshadow * { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } /* ...and bring back focus */ .ui-mobile-nosupport-boxshadow .ui-focus, .ui-mobile-nosupport-boxshadow .ui-btn:focus, .ui-mobile-nosupport-boxshadow .ui-link-inherit:focus { outline-width: 1px; outline-style: auto; }