/* * jQuery Mobile Framework * Copyright (c) jQuery Project * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. * Note: Code is in draft form and is subject to change */ /*#################################################################################################################################### A ####################################################################################################################################*/ .ui-bar-a { font-weight: bold; border: 1px solid #BD610D; background: #FF6700; color: #fff; text-shadow: 0 -1px 1px #94440F; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #FF8700), color-stop(1, #FF6700)); } .ui-btn-up-a { border: 1px solid #BD610D; background: #F26101; color: #fff; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #FF8C3F), color-stop(1, #F26101)); } .ui-btn-up-a a.ui-link-inherit { color: #fff; } .ui-btn-hover-a { border: 1px solid #BD610D; background: #F58134; color: #fff; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #FFA365), color-stop(1, #F58134)); } .ui-btn-hover-a a.ui-link-inherit { color: #fff; } .ui-btn-down-a { border: 1px solid #BD610D; background: #C24E01; color: #fff; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #CC7032), color-stop(1, #C24E01)); } .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a { text-shadow: 0 -1px 1px #94440F; cursor: pointer; font-weight: bold; text-decoration: none; font-family: Helvetica, Arial, sans-serif; } .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; } .ui-bar-a .ui-link-inherit { color: #fff; } .ui-bar-a .ui-link { color: #7cc4e7; font-weight: bold; } .ui-body-a { font-weight: normal; border: 1px solid #222; background: #444; color: #ddd; text-shadow: 0 -1px 1px #000; background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0, #333), color-stop(5%, #333), color-stop(15%, #444), color-stop(60%, #444), color-stop(1, #222)); } .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; } .ui-body-a .ui-link-inherit { color: #fff; } .ui-body-a .ui-link { color: #2489CE; font-weight: bold; } /*#################################################################################################################################### B ####################################################################################################################################*/ .ui-bar-b { font-weight: bold; border: 1px solid #222; background: #FF8700; color: #fff; text-shadow: 0 -1px 1px #111; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #555555), color-stop(1, #333333)); } .ui-btn-up-b { border: 1px solid #232323; background: #4064D2; color: #eee; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #5E5E5E), color-stop(1, #393939)); } .ui-btn-up-b a.ui-link-inherit { color: #eee; } .ui-btn-hover-b { border: 1px solid #232323; background: #494949; color: #fff; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #6E6E6E), color-stop(1, #494949)); } .ui-btn-hover-b a.ui-link-inherit { color: #fff; } .ui-btn-down-b { border: 1px solid #232323; background: #292929; color: #fff; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #4E4E4E), color-stop(1, #292929)); } .ui-btn-down-b a.ui-link-inherit { color: #fff; } .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b { text-shadow: 0 -1px 1px #111; cursor: pointer; font-weight: bold; text-decoration: none; font-family: Helvetica, Arial, sans-serif; } .ui-bar-b, .ui-bar-b input, .ui-bar-b select, .ui-bar-b textarea, .ui-bar-b button { font-family: Helvetica, Arial, sans-serif; } .ui-bar-b .ui-link-inherit { color: #fff; } .ui-bar-b .ui-link { color: #7cc4e7; font-weight: bold; } .ui-body-b { font-weight: normal; border: 1px solid #999; background: #e5e5e5; color: #666; text-shadow: 0 1px 0 #fff; background-image: url(images/texture_05.png); /* background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ddd), color-stop(1, #fff)); */ } .ui-body-b, .ui-body-b input, .ui-body-b select, .ui-body-b textarea, .ui-body-b button { font-family: Helvetica, Arial, sans-serif; } .ui-body-b .ui-link-inherit { color: #333333; } .ui-body-b .ui-link { font-weight: bold; color: #ff6600; } /*#################################################################################################################################### C Styles ####################################################################################################################################*/ .ui-bar-c { font-weight: bold; border: 1px solid #ccc; background: #e5e5e5; color: #111; text-shadow: 0 1px 1px #fff; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #eee), color-stop(1, #e5e5e5)); } .ui-bar-c, .ui-bar-c input, .ui-bar-c select, .ui-bar-c textarea, .ui-bar-c button { font-family: Helvetica, Arial, sans-serif; } .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c { font-family: Helvetica, Arial, sans-serif; cursor: pointer; font-weight: bold; text-decoration: none; text-shadow: 0 1px 1px #fff; } .ui-btn-up-c { border: 1px solid #ccc; background: #e5e5e5; color: #444; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #eee), color-stop(1, #e5e5e5)); } .ui-btn-up-c a.ui-link-inherit { color: #444; } .ui-btn-hover-c { border: 1px solid #ccc; background: #f5f5f5; color: #222; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fff), color-stop(1, #f5f5f5)); } .ui-btn-hover-c a.ui-link-inherit { color: #222; } .ui-btn-down-c { border: 1px solid #ccc; background: #d5d5d5; color: #111; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ddd), color-stop(1, #d5d5d5)); } .ui-btn-down-c a.ui-link-inherit { color: #111; } .ui-body-c { border: 1px solid #ddd; color: #333333; text-shadow: 0 1px 1px #fff; background: #fff; background-image: url(images/texture_075.png); } .ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button { font-family: Helvetica, Arial, sans-serif; } .ui-body-c .ui-link-inherit { color: #333333; } .ui-body-c .ui-link { font-weight: bold; color: #ff6600; } /*#################################################################################################################################### D ####################################################################################################################################*/ .ui-bar-d { font-weight: bold; border: 1px solid #ccc; background: #cbcbcb; color: #666; text-shadow: 0 1px 1px #fff; background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0, #ddd), color-stop(5%, #ccc), color-stop(15%, #bbb), color-stop(95%, #ddd), color-stop(1, #ccc)); } .ui-bar-d, .ui-bar-d input, .ui-bar-d select, .ui-bar-d textarea, .ui-bar-d button { font-family: Helvetica, Arial, sans-serif; } .ui-bar-d .ui-link-inherit { color: #333; } .ui-bar-d .ui-link { font-weight: bold; color: #2489CE; } .ui-btn-up-d { border: 1px solid #bbb; background: #bbb; color: #666; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #d5d5d5), color-stop(1, #ddd)); } .ui-btn-up-d a.ui-link-inherit { color: #666; } .ui-btn-hover-d { border: 1px solid #aaa; background: #c5c5c5; color: #666; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #c5c5c5), color-stop(1, #ccc)); } .ui-btn-hover-d a.ui-link-inherit { color: #666; } .ui-btn-down-d { border: 1px solid #999; background: #b5b5b5; color: #444; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #b5b5b5), color-stop(1, #bbb)); } .ui-btn-up-d a.ui-link { color: #444; } .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d { font-family: Helvetica, Arial, sans-serif; cursor: pointer; font-weight: bold; text-decoration: none; text-shadow: 0 1px 1px #fff; } .ui-body-d, .ui-body-d input, .ui-body-d select, .ui-body-d textarea, .ui-body-d button { font-family: Helvetica, Arial, sans-serif; } .ui-body-d .ui-link-inherit { color: #333333; } .ui-body-d { border: 1px solid #aaa; color: #666; text-shadow: 0 1px 1px #fff; background: #ddd; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fff), color-stop(15%, #f5f5f5), color-stop(1, #eee)); } .ui-body-d .ui-link { font-weight: bold; color: #ff6600; } .ui-body-c .ui-link-inherit { color: #333333; } .ui-body-c .ui-link { font-weight: bold; color: #ff6600; } /*#################################################################################################################################### E ####################################################################################################################################*/ .ui-bar-e { font-weight: bold; border: 1px solid #999; background: #eee; color: #000; text-shadow: 0 1px 1px #fff; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fff), color-stop(.5, #ccc), color-stop(.5, #b5b5b5), color-stop(1, #eee)); } .ui-bar-e, .ui-bar-e input, .ui-bar-e select, .ui-bar-e textarea, .ui-bar-d button { font-family: Helvetica, Arial, sans-serif; } .ui-bar-e .ui-link-inherit { color: #333; } .ui-bar-e .ui-link { color: #2489CE; font-weight: bold; } .ui-btn-up-e { border: 1px solid #999; background: #f5f5f5; color: #333; text-shadow: 0 1px 1px #fff; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #f5f5f5), color-stop(.5, #ccc), color-stop(.5, #b5b5b5), color-stop(1, #f5f5f5)); } .ui-btn-up-e a.ui-link-inherit { color: #333; } .ui-btn-hover-e { border: 1px solid #777; background: #fff; color: #333; text-shadow: 0 1px 1px #fff; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fff), color-stop(.5, #ddd), color-stop(.5, #ccc), color-stop(1, #fff)); } .ui-btn-hover-e a.ui-link-inherit { color: #333; } .ui-btn-down-e { border: 1px solid #888; background: #ddd; color: #333; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ddd), color-stop(.5, #ccc), color-stop(.5, #bbb), color-stop(1, #ddd)); } .ui-btn-down-e a.ui-link-inherit { color: #333; } .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e { font-family: Helvetica, Arial, sans-serif; cursor: pointer; font-weight: bold; text-decoration: none; text-shadow: 0 1px 1px #fff; } .ui-body-e { font-weight: normal; border: 1px solid #aaa; background: #ccc; color: #111; text-shadow: 0 1px 1px #fff; background-image: url(images/texture_075.png); } .ui-body-e, .ui-body-e input, .ui-body-e select, .ui-body-e textarea, .ui-body-e button { font-family: Helvetica, Arial, sans-serif; } .ui-body-e .ui-link-inherit { color: #333333; } .ui-body-e .ui-link { font-weight: bold; color: #ff6600; } a.ui-link-inherit { text-decoration: none !important; } /* Active class used as the "on" state across all themes */ .ui-btn-active { font-weight: bold; cursor: pointer; text-decoration: none; border: 1px solid #155678; background: #4596ce; color: #fff; text-shadow: 0 -1px 1px #145072; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #66a4da), color-stop(1, #1a70b9)); } .ui-btn-active a.ui-link-inherit { color: #fff; } /* button Inner Highlight */ .ui-btn-inner { border-top: 1px solid #fff; border-color: rgba(255,255,255,.25); } /* Container Corner radius */ .ui-corner-tl { -moz-border-radius-topleft: .6em; -webkit-border-top-left-radius: .6em; border-top-left-radius: .6em; } .ui-corner-tr { -moz-border-radius-topright: .6em; -webkit-border-top-right-radius: .6em; border-top-right-radius: .6em; } .ui-corner-bl { -moz-border-radius-bottomleft: .6em; -webkit-border-bottom-left-radius: .6em; border-bottom-left-radius: .6em; } .ui-corner-br { -moz-border-radius-bottomright: .6em; -webkit-border-bottom-right-radius: .6em; border-bottom-right-radius: .6em; } .ui-corner-top { -moz-border-radius-topleft: .6em; -webkit-border-top-left-radius: .6em; border-top-left-radius: .6em; -moz-border-radius-topright: .6em; -webkit-border-top-right-radius: .6em; border-top-right-radius: .6em; } .ui-corner-bottom { -moz-border-radius-bottomleft: .6em; -webkit-border-bottom-left-radius: .6em; border-bottom-left-radius: .6em; -moz-border-radius-bottomright: .6em; -webkit-border-bottom-right-radius: .6em; border-bottom-right-radius: .6em; } .ui-corner-right { -moz-border-radius-topright: .6em; -webkit-border-top-right-radius: .6em; border-top-right-radius: .6em; -moz-border-radius-bottomright: .6em; -webkit-border-bottom-right-radius: .6em; border-bottom-right-radius: .6em; } .ui-corner-left { -moz-border-radius-topleft: .6em; -webkit-border-top-left-radius: .6em; border-top-left-radius: .6em; -moz-border-radius-bottomleft: .6em; -webkit-border-bottom-left-radius: .6em; border-bottom-left-radius: .6em; } .ui-corner-all { -moz-border-radius: .6em; -webkit-border-radius: .6em; border-radius: .6em; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; opacity: .3; } /* Icons ----------------------------------*/ .ui-icon { background-position: 50% 50%; background-repeat: no-repeat; background-color: #fff; background-color: rgba(0,0,0,.4); -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; } /*icons with no bg needed*/ .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on { background-color: transparent; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } /*arrows*/ .ui-icon-arrow-u { background-image: url(images/icon-arrow-white-up.png); } .ui-icon-arrow-r { background-image: url(images/icon-arrow-white-right.png); } .ui-icon-arrow-d { background-image: url(images/icon-arrow-white-down.png); } .ui-icon-arrow-l { background-image: url(images/icon-arrow-white-left.png); } /*plus minus*/ .ui-icon-plus { background-image: url(images/icon-plus-white.png); } .ui-icon-minus { background-image: url(images/icon-minus-white.png); } /* delete/close */ .ui-icon-delete { background-image: url(images/icon-delete.png); } /*checks,radios*/ .ui-icon-checkbox-off { background-image: url(images/form-check-off.png); } .ui-icon-checkbox-on { background-image: url(images/form-check-on.png); } .ui-icon-radio-off { background-image: url(images/form-radio-off.png); } .ui-icon-radio-on { background-image: url(images/form-radio-on.png); } .ui-icon-search { background-image: url(images/icon-search-black.png); } /* loading icon */ .ui-icon-loading { background-image: url(images/ajax-loader.png); width: 40px; height: 40px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } /* btn Corner radius */ .ui-btn-corner-tl { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius: 1em; border-top-left-radius: 1em; } .ui-btn-corner-tr { -moz-border-radius-topright: 1em; -webkit-border-top-right-radius: 1em; border-top-right-radius: 1em; } .ui-btn-corner-bl { -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius: 1em; border-bottom-left-radius: 1em; } .ui-btn-corner-br { -moz-border-radius-bottomright: 1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-top { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius: 1em; border-top-left-radius: 1em; -moz-border-radius-topright: 1em; -webkit-border-top-right-radius: 1em; border-top-right-radius: 1em; } .ui-btn-corner-bottom { -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius: 1em; border-bottom-left-radius: 1em; -moz-border-radius-bottomright: 1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-right { -moz-border-radius-topright: 1em; -webkit-border-top-right-radius: 1em; border-top-right-radius: 1em; -moz-border-radius-bottomright: 1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-left { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius: 1em; border-top-left-radius: 1em; -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius: 1em; border-bottom-left-radius: 1em; } .ui-btn-corner-all { -moz-border-radius: .4em; -webkit-border-radius: .4em; border-radius: .4em; } .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-box; background-clip: padding-box; } /* Overlays */ .ui-overlay { background: #666; opacity: .5; filter:Alpha(Opacity=50); 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 rgba(0,0,0,.3); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3); box-shadow: 0px 1px 4px rgba(0,0,0,.3); } .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); -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4); box-shadow: 0px 1px 0 rgba(255,255,255,.4); } /* set focus state last */ .ui-focus { outline: none; -moz-box-shadow: 0px 0px 12px #387bbe; -webkit-box-shadow: 0px 0px 12px #387bbe; box-shadow: 0px 0px 12px #387bbe; } /*#################################################################################################################################### CUSTOM ADDITIONS ####################################################################################################################################*/ /* Make inline buttons more rounded */ .ui-slider.ui-btn-corner-all .ui-slider-handle.ui-btn-corner-all, .ui-slider.ui-btn-corner-all .ui-slider-handle.ui-btn-corner-all .ui-btn-inner, .ui-slider.ui-btn-corner-all{ -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } a.ui-btn.ui-btn-inline.ui-btn-corner-all, a.ui-btn.ui-btn-inline.ui-btn-corner-all .ui-btn-inner{ -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; } /* .ui-btn-inline .ui-btn-inner, .ui-btn-inline{ -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; } */ /* Give the search input a stronger border */ .ui-input-search{ border: 1px solid #999; } /* Adjustment for indicator icons inside split list & Search Input - Well I hope so :) */ .ui-input-search .ui-btn-icon-notext, .ui-btn-inner .ui-btn-icon-notext{ -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }