LESSified jQuery Mobile Theme (jQuery Mobile 1.4.0)

jquery-mobile-theme.less

@global-font-family: @contentFontFamily;
@global-corner-radius-blocks: @controlsBorderRadius;
@global-corner-radius-buttons: @controlsBorderRadius;
@global-box-shadow: @shadow;
@global-inset-box-shadow: @shadow;
@global-icon-color: white;
@global-icon-shadow: ~"none"; 

@bar-background-color: @headerBackgroundColor;
@bar-border-color: darken(@headerBackgroundColor, 5%);
@bar-text-color: @headerTextColor;

@page-background-color: @primaryThemeColor;
@page-border-color: lighten(@page-background-color, 10%);
@page-text-color: @primaryTextColor;
@page-text-shadow: ~"none";

@block-background-color: rgba(0, 0, 0, 0.18);
@block-border-color: rgba(0, 0, 0, 0.33);
@block-text-color: @page-text-color;
@block-text-shadow: ~"none";

@link-color: #3388cc;
@visited-link-color: @link-color;
@hover-link-color: #005599;
@active-link-color: @hover-link-color;

@button-up-background-color: lighten(@primaryThemeColor, 3%);
@button-up-border-color: darken(@button-up-background-color, 33%);
@button-up-text-color: @page-text-color;
@button-up-text-shadow: ~"none";

@button-hover-background-color: @button-up-background-color;
@button-hover-border-color: darken(@button-hover-background-color, 33%);
@button-hover-text-color: @button-up-text-color;
@button-hover-text-shadow: ~"none";

@button-down-background-color: @button-up-background-color;
@button-down-border-color: darken(@button-down-background-color, 33%);
@button-down-text-color: @button-up-text-color;
@button-down-text-shadow: ~"none";

@active-background-color: @button-up-background-color;
@active-border-color: darken(@button-down-background-color, 33%);
@active-text-color: @button-up-text-color;
@active-text-shadow: ~"0 0 8px #FFFFFF";


/* Globals */
/* Font
-----------------------------------------------------------------------------------------------------------*/
html 
{
  font-size: 100%;
}

body,
input,
select,
textarea,
button,
.ui-btn 
{
  font-size: 1em;
  line-height: 1.3;
  font-family: @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;
  color: fade(@block-text-color, 88%);
}

/* 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:link 
{
  text-decoration: none !important;
}
.ui-btn-active 
{
  cursor: pointer;
}

/* Corner rounding
-----------------------------------------------------------------------------------------------------------*/
.ui-corner-all 
{
  .border-radius(@global-corner-radius-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 
{
  .border-radius(@global-corner-radius-buttons);
}
/* Icon-only buttons */
.ui-btn-icon-notext.ui-btn-corner-all,
.ui-btn-icon-notext.ui-corner-all 
{
  .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: @global-corner-radius-blocks;
  right: @global-corner-radius-blocks;
  top: @global-corner-radius-blocks;
  bottom: @global-corner-radius-blocks;
}

/* Shadow
-----------------------------------------------------------------------------------------------------------*/
.ui-shadow 
{
  .box-shadow(@global-box-shadow);
}
.ui-shadow-inset 
{
  .box-shadow(@global-inset-box-shadow);
}
.ui-overlay-shadow 
{
  .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: @global-icon-color;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  .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: @global-icon-color;
  background-color: rgba(0,0,0,.15);
}
/* 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 
{
  .box-shadow(@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 
{
  .opacity(0.3);
}
.ui-btn.ui-checkbox-off:after,
.ui-btn.ui-checkbox-on:after 
{
  -webkit-border-radius: .1875em;
  .border-radius(0.1875em);
}
.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('../assets/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: @bar-background-color;
  border-color: @bar-border-color;
  color: @bar-text-color;
  text-shadow: none;
  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: @page-background-color;
  border-color: @page-border-color;
  color: @page-text-color;
  text-shadow: @page-text-shadow;
}

/* 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 .ui-group-theme-a .ui-body-inherit,
html .ui-panel-page-container-a 
{
  background: @block-background-color;
  border-color: @block-border-color;
  color: @block-text-color;
  text-shadow: @block-text-shadow;
}
.ui-body-a 
{
  border-width: 1px;
  border-style: solid;
}

/* Links */
.ui-page-theme-a a,
html .ui-bar-a a,
html .ui-body-a a,
html body .ui-group-theme-a a 
{
  color: @link-color;
  font-weight: bold;
}
.ui-page-theme-a a:visited,
html .ui-bar-a a:visited,
html .ui-body-a a:visited,
html body .ui-group-theme-a a:visited 
{
    color: @visited-link-color;
}
.ui-page-theme-a a:hover,
html .ui-bar-a a:hover,
html .ui-body-a a:hover,
html body .ui-group-theme-a a:hover 
{
  color: @hover-link-color;
}
.ui-page-theme-a a:active,
html .ui-bar-a a:active,
html .ui-body-a a:active,
html body .ui-group-theme-a a:active 
{
  color: @active-link-color;
}
/* Button up */
.ui-page-theme-a .ui-btn,
html .ui-bar-a .ui-btn,
html .ui-body-a .ui-btn,
html body .ui-group-theme-a .ui-btn,
html head + body .ui-btn.ui-btn-a,
/* Button visited */
.ui-page-theme-a .ui-btn:visited,
html .ui-bar-a .ui-btn:visited,
html .ui-body-a .ui-btn:visited,
html body .ui-group-theme-a .ui-btn:visited,
html head + body .ui-btn.ui-btn-a:visited 
{
  .box-shadow(~"inset 0px 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 0 rgba(255, 255, 255, 0.3)");
  .gradient(lighten(@button-up-background-color, 3%), darken(@button-up-background-color, 10%));
  background-color: @button-up-background-color;
  border-color: @button-up-border-color;
  color: @button-up-text-color;
  text-shadow: @button-up-text-shadow;
}

/* Button hover */
.ui-page-theme-a .ui-btn:hover,
html .ui-bar-a .ui-btn:hover,
html .ui-body-a .ui-btn:hover,
html body .ui-group-theme-a .ui-btn:hover,
html head + body .ui-btn.ui-btn-a:hover 
{
  .box-shadow(~"inset 0px 1px 0 0 rgba(0, 0, 0, 0.2), inset 0px 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 0 rgba(255, 255, 255, 0.3)");
  .gradient(lighten(@button-hover-background-color, 3%), darken(@button-hover-background-color, 10%));
  background-color: @button-hover-background-color;
  border-color: @button-hover-border-color;
  color: @button-hover-text-color;
  text-shadow: @button-hover-text-shadow;
}

/* Button down */
.ui-page-theme-a .ui-btn:active,
html .ui-bar-a .ui-btn:active,
html .ui-body-a .ui-btn:active,
html body .ui-group-theme-a .ui-btn:active,
html head + body .ui-btn.ui-btn-a:active 
{
  .box-shadow(~"inset 0px 2px 2px 1px rgba(0, 0, 0, 0.33), inset 0px 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 0 rgba(255, 255, 255, 0.3)");
  .gradient(darken(@button-down-background-color, 10%), lighten(@button-down-background-color, 3%));
  background-color: @button-down-background-color;
  border-color: @button-down-border-color;
  color: @button-down-text-color;
  text-shadow: @button-down-text-shadow;
  padding-top: 0.8em;
  padding-bottom: 0.6em;  
}

/* Active button */
.ui-page-theme-a .ui-btn.ui-btn-active,
html .ui-bar-a .ui-btn.ui-btn-active,
html .ui-body-a .ui-btn.ui-btn-active,
html body .ui-group-theme-a .ui-btn.ui-btn-active,
html head + body .ui-btn.ui-btn-a.ui-btn-active,
/* Active checkbox icon */
.ui-page-theme-a .ui-checkbox-on:after,
html .ui-bar-a .ui-checkbox-on:after,
html .ui-body-a .ui-checkbox-on:after,
html body .ui-group-theme-a .ui-checkbox-on:after,
.ui-btn.ui-checkbox-on.ui-btn-a:after,
/* Active flipswitch background */
.ui-page-theme-a .ui-flipswitch-active,
html .ui-bar-a .ui-flipswitch-active,
html .ui-body-a .ui-flipswitch-active,
html body .ui-group-theme-a .ui-flipswitch-active,
html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,
/* Active slider track */
.ui-page-theme-a .ui-slider-track .ui-btn-active,
html .ui-bar-a .ui-slider-track .ui-btn-active,
html .ui-body-a .ui-slider-track .ui-btn-active,
html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
html body div.ui-slider-track.ui-body-a .ui-btn-active 
{
  .box-shadow(~"inset 0px 2px 2px 0 rgba(0, 0, 0, 0.33), inset 0px 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 0 rgba(255, 255, 255, 0.3)");
  .gradient(darken(@active-background-color, 15%), lighten(@active-background-color, 3%));
  background-color: @active-background-color;
  border-color: @active-border-color;
  color: @active-text-color;
  text-shadow: @active-text-shadow;
}

/* Active radio button icon */
.ui-page-theme-a .ui-radio-on:after,
html .ui-bar-a .ui-radio-on:after,
html .ui-body-a .ui-radio-on:after,
html body .ui-group-theme-a .ui-radio-on:after,
.ui-btn.ui-radio-on.ui-btn-a:after 
{
  border-color: @active-background-color;
}
/* Focus */
.ui-page-theme-a .ui-btn:focus,
html .ui-bar-a .ui-btn:focus,
html .ui-body-a .ui-btn:focus,
html body .ui-group-theme-a .ui-btn:focus,
html head + body .ui-btn.ui-btn-a:focus,
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-a .ui-focus,
html .ui-bar-a .ui-focus,
html .ui-body-a .ui-focus,
html body .ui-group-theme-a .ui-focus,
html head + body .ui-btn-a.ui-focus,
html head + body .ui-body-a.ui-focus 
{
  .box-shadow(~"0 0 12px @{active-background-color}");
}

/* Structure */
/* Disabled
-----------------------------------------------------------------------------------------------------------*/
/* Class ui-disabled deprecated in 1.4. :disabled not supported by IE8 so we use [disabled] */
.ui-disabled,
.ui-state-disabled,
button[disabled],
.ui-select .ui-btn.ui-state-disabled 
{
  .opacity(0.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 
{
  .box-shadow(~"none !important");
}
.ui-noboxshadow .ui-btn:focus,
.ui-noboxshadow .ui-focus 
{
  outline-width: 1px;
  outline-style: auto;
}
      

styleguide.less

@primaryThemeColor: rgb(0, 136, 196);
@primaryTextColor: #ffffff;

@headingFontFamily: ~"Helvetica, Arial, sans-serif";
@contentFontFamily: ~"Helvetica, Arial, sans-serif";

@controlsBorderRadius: 0.3em;

@shadowColor: rgba(0, 0, 0, 0.15);
@shadow: ~"0 1px 2px @{shadowColor}";
@insetShadow: ~"inset 0 1px 2px @{shadowColor}";

@headerBackgroundColor: shade(@primaryThemeColor, 15%);
@headerTextColor: #ffffff;

@footerBackgroundColor: @headerBackgroundColor;
@footerTextColor: @headerTextColor;

@inputTextColor: black;