From: Jasper de Groot Date: Fri, 7 Nov 2014 09:43:32 +0000 (+0100) Subject: Theme: Improve default theme styling X-Git-Tag: 1.12.0-beta.1~447 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=79c4fa1e7a09a3d28f0f8ff7a5b9f41a6d6e123d;p=jquery-ui.git Theme: Improve default theme styling Changes tooltip to use the ui-widget-shadow class, which now applies the box-shadow style. .ui-widget-shadow was created when box-shadow wasn't available. By now, there's no point in faking a custom shadow anymore. This removes the only non-structural CSS from a widget-specific file. Updates demos to use the same font-family, removes unused images. Will be available as the new default theme on ThemeRoller called "Base", while "UI Smoothness" and "UI Lightness" will still be available in the gallery. Fixes #10617 Fixes #10880 Closes gh-1436 Ref jquery/download.jqueryui.com#248 --- diff --git a/demos/demos.css b/demos/demos.css index 555352e35..405425328 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -1,5 +1,5 @@ body { - font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; + font-family: Arial, Helvetica, sans-serif; } table { diff --git a/themes/base/images/ui-bg_flat_75_ffffff_40x100.png b/themes/base/images/ui-bg_flat_75_ffffff_40x100.png deleted file mode 100644 index ac8b229af..000000000 Binary files a/themes/base/images/ui-bg_flat_75_ffffff_40x100.png and /dev/null differ diff --git a/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png b/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png deleted file mode 100644 index ad3d6346e..000000000 Binary files a/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png and /dev/null differ diff --git a/themes/base/images/ui-bg_glass_65_ffffff_1x400.png b/themes/base/images/ui-bg_glass_65_ffffff_1x400.png deleted file mode 100644 index 42ccba269..000000000 Binary files a/themes/base/images/ui-bg_glass_65_ffffff_1x400.png and /dev/null differ diff --git a/themes/base/images/ui-bg_glass_75_dadada_1x400.png b/themes/base/images/ui-bg_glass_75_dadada_1x400.png deleted file mode 100644 index 5a46b47cb..000000000 Binary files a/themes/base/images/ui-bg_glass_75_dadada_1x400.png and /dev/null differ diff --git a/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png b/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png deleted file mode 100644 index 86c2baa65..000000000 Binary files a/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png and /dev/null differ diff --git a/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png b/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png deleted file mode 100644 index 4443fdc1a..000000000 Binary files a/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png and /dev/null differ diff --git a/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png b/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png deleted file mode 100644 index 7c9fa6c6e..000000000 Binary files a/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png and /dev/null differ diff --git a/themes/base/images/ui-icons_222222_256x240.png b/themes/base/images/ui-icons_222222_256x240.png deleted file mode 100644 index ee039dc09..000000000 Binary files a/themes/base/images/ui-icons_222222_256x240.png and /dev/null differ diff --git a/themes/base/images/ui-icons_2e83ff_256x240.png b/themes/base/images/ui-icons_2e83ff_256x240.png deleted file mode 100644 index 45e8928e5..000000000 Binary files a/themes/base/images/ui-icons_2e83ff_256x240.png and /dev/null differ diff --git a/themes/base/images/ui-icons_444444_256x240.png b/themes/base/images/ui-icons_444444_256x240.png new file mode 100755 index 000000000..a957b5e56 Binary files /dev/null and b/themes/base/images/ui-icons_444444_256x240.png differ diff --git a/themes/base/images/ui-icons_454545_256x240.png b/themes/base/images/ui-icons_454545_256x240.png deleted file mode 100644 index 7ec70d11b..000000000 Binary files a/themes/base/images/ui-icons_454545_256x240.png and /dev/null differ diff --git a/themes/base/images/ui-icons_555555_256x240.png b/themes/base/images/ui-icons_555555_256x240.png new file mode 100755 index 000000000..5dcdcb41d Binary files /dev/null and b/themes/base/images/ui-icons_555555_256x240.png differ diff --git a/themes/base/images/ui-icons_777620_256x240.png b/themes/base/images/ui-icons_777620_256x240.png new file mode 100755 index 000000000..41f75dd51 Binary files /dev/null and b/themes/base/images/ui-icons_777620_256x240.png differ diff --git a/themes/base/images/ui-icons_777777_256x240.png b/themes/base/images/ui-icons_777777_256x240.png new file mode 100755 index 000000000..067a99208 Binary files /dev/null and b/themes/base/images/ui-icons_777777_256x240.png differ diff --git a/themes/base/images/ui-icons_888888_256x240.png b/themes/base/images/ui-icons_888888_256x240.png deleted file mode 100644 index 5ba708c39..000000000 Binary files a/themes/base/images/ui-icons_888888_256x240.png and /dev/null differ diff --git a/themes/base/images/ui-icons_cc0000_256x240.png b/themes/base/images/ui-icons_cc0000_256x240.png new file mode 100755 index 000000000..1e18edbf0 Binary files /dev/null and b/themes/base/images/ui-icons_cc0000_256x240.png differ diff --git a/themes/base/images/ui-icons_cd0a0a_256x240.png b/themes/base/images/ui-icons_cd0a0a_256x240.png deleted file mode 100644 index 7930a5580..000000000 Binary files a/themes/base/images/ui-icons_cd0a0a_256x240.png and /dev/null differ diff --git a/themes/base/images/ui-icons_ffffff_256x240.png b/themes/base/images/ui-icons_ffffff_256x240.png new file mode 100755 index 000000000..4f624bb2b Binary files /dev/null and b/themes/base/images/ui-icons_ffffff_256x240.png differ diff --git a/themes/base/theme.css b/themes/base/theme.css index c7ad4847a..1b7a7bf1b 100644 --- a/themes/base/theme.css +++ b/themes/base/theme.css @@ -15,7 +15,7 @@ /* Component containers ----------------------------------*/ .ui-widget { - font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; + font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/; font-size: 1em/*{fsDefault}*/; } .ui-widget .ui-widget { @@ -25,25 +25,25 @@ .ui-widget select, .ui-widget textarea, .ui-widget button { - font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; + font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/; font-size: 1em; } .ui-widget-content { - border: 1px solid #aaaaaa/*{borderColorContent}*/; - background: #ffffff/*{bgColorContent}*/ url("images/ui-bg_flat_75_ffffff_40x100.png")/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; - color: #222222/*{fcContent}*/; + border: 1px solid #dddddd/*{borderColorContent}*/; + background: #ffffff/*{bgColorContent}*/ /*{bgImgUrlContent}*/ /*{bgContentXPos}*/ /*{bgContentYPos}*/ /*{bgContentRepeat}*/; + color: #333333/*{fcContent}*/; } .ui-widget-content a { - color: #222222/*{fcContent}*/; + color: #333333/*{fcContent}*/; } .ui-widget-header { - border: 1px solid #aaaaaa/*{borderColorHeader}*/; - background: #cccccc/*{bgColorHeader}*/ url("images/ui-bg_highlight-soft_75_cccccc_1x100.png")/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; - color: #222222/*{fcHeader}*/; + border: 1px solid #dddddd/*{borderColorHeader}*/; + background: #e9e9e9/*{bgColorHeader}*/ /*{bgImgUrlHeader}*/ /*{bgHeaderXPos}*/ /*{bgHeaderYPos}*/ /*{bgHeaderRepeat}*/; + color: #333333/*{fcHeader}*/; font-weight: bold; } .ui-widget-header a { - color: #222222/*{fcHeader}*/; + color: #333333/*{fcHeader}*/; } /* Interaction states @@ -51,15 +51,15 @@ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { - border: 1px solid #d3d3d3/*{borderColorDefault}*/; - background: #e6e6e6/*{bgColorDefault}*/ url("images/ui-bg_glass_75_e6e6e6_1x400.png")/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; + border: 1px solid #c5c5c5/*{borderColorDefault}*/; + background: #f6f6f6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ /*{bgDefaultXPos}*/ /*{bgDefaultYPos}*/ /*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; - color: #555555/*{fcDefault}*/; + color: #454545/*{fcDefault}*/; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { - color: #555555/*{fcDefault}*/; + color: #454545/*{fcDefault}*/; text-decoration: none; } .ui-state-hover, @@ -68,10 +68,10 @@ .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { - border: 1px solid #999999/*{borderColorHover}*/; - background: #dadada/*{bgColorHover}*/ url("images/ui-bg_glass_75_dadada_1x400.png")/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; + border: 1px solid #cccccc/*{borderColorHover}*/; + background: #ededed/*{bgColorHover}*/ /*{bgImgUrlHover}*/ /*{bgHoverXPos}*/ /*{bgHoverYPos}*/ /*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; - color: #212121/*{fcHover}*/; + color: #2b2b2b/*{fcHover}*/; } .ui-state-hover a, .ui-state-hover a:hover, @@ -81,21 +81,21 @@ .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { - color: #212121/*{fcHover}*/; + color: #2b2b2b/*{fcHover}*/; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { - border: 1px solid #aaaaaa/*{borderColorActive}*/; - background: #ffffff/*{bgColorActive}*/ url("images/ui-bg_glass_65_ffffff_1x400.png")/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; + border: 1px solid #003eff/*{borderColorActive}*/; + background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; - color: #212121/*{fcActive}*/; + color: #ffffff/*{fcActive}*/; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { - color: #212121/*{fcActive}*/; + color: #ffffff/*{fcActive}*/; text-decoration: none; } @@ -104,31 +104,31 @@ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { - border: 1px solid #fcefa1/*{borderColorHighlight}*/; - background: #fbf9ee/*{bgColorHighlight}*/ url("images/ui-bg_glass_55_fbf9ee_1x400.png")/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; - color: #363636/*{fcHighlight}*/; + border: 1px solid #dad55e/*{borderColorHighlight}*/; + background: #fffa90/*{bgColorHighlight}*/ /*{bgImgUrlHighlight}*/ /*{bgHighlightXPos}*/ /*{bgHighlightYPos}*/ /*{bgHighlightRepeat}*/; + color: #777620/*{fcHighlight}*/; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { - color: #363636/*{fcHighlight}*/; + color: #777620/*{fcHighlight}*/; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { - border: 1px solid #cd0a0a/*{borderColorError}*/; - background: #fef1ec/*{bgColorError}*/ url("images/ui-bg_glass_95_fef1ec_1x400.png")/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; - color: #cd0a0a/*{fcError}*/; + border: 1px solid #f1a899/*{borderColorError}*/; + background: #fddfdf/*{bgColorError}*/ /*{bgImgUrlError}*/ /*{bgErrorXPos}*/ /*{bgErrorYPos}*/ /*{bgErrorRepeat}*/; + color: #5f3f3f/*{fcError}*/; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { - color: #cd0a0a/*{fcError}*/; + color: #5f3f3f/*{fcError}*/; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { - color: #cd0a0a/*{fcError}*/; + color: #5f3f3f/*{fcError}*/; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, @@ -163,27 +163,27 @@ } .ui-icon, .ui-widget-content .ui-icon { - background-image: url("images/ui-icons_222222_256x240.png")/*{iconsContent}*/; + background-image: url("images/ui-icons_444444_256x240.png")/*{iconsContent}*/; } .ui-widget-header .ui-icon { - background-image: url("images/ui-icons_222222_256x240.png")/*{iconsHeader}*/; + background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/; } .ui-state-default .ui-icon { - background-image: url("images/ui-icons_888888_256x240.png")/*{iconsDefault}*/; + background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/; } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { - background-image: url("images/ui-icons_454545_256x240.png")/*{iconsHover}*/; + background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/; } .ui-state-active .ui-icon { - background-image: url("images/ui-icons_454545_256x240.png")/*{iconsActive}*/; + background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/; } .ui-state-highlight .ui-icon { - background-image: url("images/ui-icons_2e83ff_256x240.png")/*{iconsHighlight}*/; + background-image: url("images/ui-icons_777620_256x240.png")/*{iconsHighlight}*/; } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { - background-image: url("images/ui-icons_cd0a0a_256x240.png")/*{iconsError}*/; + background-image: url("images/ui-icons_cc0000_256x240.png")/*{iconsError}*/; } /* positioning */ @@ -373,38 +373,34 @@ .ui-corner-top, .ui-corner-left, .ui-corner-tl { - border-top-left-radius: 4px/*{cornerRadius}*/; + border-top-left-radius: 3px/*{cornerRadius}*/; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { - border-top-right-radius: 4px/*{cornerRadius}*/; + border-top-right-radius: 3px/*{cornerRadius}*/; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { - border-bottom-left-radius: 4px/*{cornerRadius}*/; + border-bottom-left-radius: 3px/*{cornerRadius}*/; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { - border-bottom-right-radius: 4px/*{cornerRadius}*/; + border-bottom-right-radius: 3px/*{cornerRadius}*/; } /* Overlays */ .ui-widget-overlay { - background: #aaaaaa/*{bgColorOverlay}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; + background: #aaaaaa/*{bgColorOverlay}*/; opacity: .3/*{opacityOverlay}*/; filter: Alpha(Opacity=30)/*{opacityFilterOverlay}*/; /* support: IE8 */ } .ui-widget-shadow { - margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/; - padding: 8px/*{thicknessShadow}*/; - background: #aaaaaa/*{bgColorShadow}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; - opacity: .3/*{opacityShadow}*/; - filter: Alpha(Opacity=30)/*{opacityFilterShadow}*/; /* support: IE8 */ - border-radius: 8px/*{cornerRadiusShadow}*/; + -webkit-box-shadow: 0/*{offsetLeftShadow}*/ 0/*{offsetTopShadow}*/ 5px/*{thicknessShadow}*/ #666666/*{bgColorShadow}*/; + box-shadow: 0/*{offsetLeftShadow}*/ 0/*{offsetTopShadow}*/ 5px/*{thicknessShadow}*/ #666666/*{bgColorShadow}*/; } diff --git a/themes/base/tooltip.css b/themes/base/tooltip.css index f8f7bc841..809b148a2 100644 --- a/themes/base/tooltip.css +++ b/themes/base/tooltip.css @@ -13,8 +13,6 @@ position: absolute; z-index: 9999; max-width: 300px; - -webkit-box-shadow: 0 0 5px #aaa; - box-shadow: 0 0 5px #aaa; } body .ui-tooltip { border-width: 2px; diff --git a/ui/tooltip.js b/ui/tooltip.js index 85c64f2a0..6a9039afe 100644 --- a/ui/tooltip.js +++ b/ui/tooltip.js @@ -406,7 +406,8 @@ return $.widget( "ui.tooltip", { _tooltip: function( element ) { var tooltip = $( "
" ) .attr( "role", "tooltip" ) - .addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " + + // TODO move to classes option + .addClass( "ui-tooltip ui-widget ui-widget-shadow ui-corner-all ui-widget-content " + ( this.options.tooltipClass || "" ) ), id = tooltip.uniqueId().attr( "id" );