Skip to content

Commit 79c4fa1

Browse files
jaspermdegrootjzaefferer
jaspermdegroot
authored and
jzaefferer
committed
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 jquerygh-1436 Ref jquery/download.jqueryui.com#248
1 parent 0aa4e98 commit 79c4fa1

22 files changed

+48
-53
lines changed

‎demos/demos.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
2-
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
2+
font-family: Arial, Helvetica, sans-serif;
33
}
44

55
table {

‎themes/base/images/ui-bg_flat_75_ffffff_40x100.png

-178 Bytes
Binary file not shown.

‎themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png

-120 Bytes
Binary file not shown.

‎themes/base/images/ui-bg_glass_65_ffffff_1x400.png

-105 Bytes
Binary file not shown.

‎themes/base/images/ui-bg_glass_75_dadada_1x400.png

-111 Bytes
Binary file not shown.

‎themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png

-110 Bytes
Binary file not shown.

‎themes/base/images/ui-bg_glass_95_fef1ec_1x400.png

-119 Bytes
Binary file not shown.

‎themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png

-101 Bytes
Binary file not shown.

‎themes/base/images/ui-icons_222222_256x240.png

-4.27 KB
Binary file not shown.

‎themes/base/images/ui-icons_2e83ff_256x240.png

-4.27 KB
Binary file not shown.

‎themes/base/images/ui-icons_444444_256x240.png

6.83 KB
Loading

‎themes/base/images/ui-icons_454545_256x240.png

-4.27 KB
Binary file not shown.

‎themes/base/images/ui-icons_555555_256x240.png

6.82 KB
Loading

‎themes/base/images/ui-icons_777620_256x240.png

4.44 KB
Loading

‎themes/base/images/ui-icons_777777_256x240.png

6.83 KB
Loading

‎themes/base/images/ui-icons_888888_256x240.png

-4.27 KB
Binary file not shown.

‎themes/base/images/ui-icons_cc0000_256x240.png

4.44 KB
Loading

‎themes/base/images/ui-icons_cd0a0a_256x240.png

-4.27 KB
Binary file not shown.

‎themes/base/images/ui-icons_ffffff_256x240.png

6.15 KB
Loading

‎themes/base/theme.css

Lines changed: 45 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
/* Component containers
1616
----------------------------------*/
1717
.ui-widget {
18-
font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
18+
font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/;
1919
font-size: 1em/*{fsDefault}*/;
2020
}
2121
.ui-widget .ui-widget {
@@ -25,41 +25,41 @@
2525
.ui-widget select,
2626
.ui-widget textarea,
2727
.ui-widget button {
28-
font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
28+
font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/;
2929
font-size: 1em;
3030
}
3131
.ui-widget-content {
32-
border: 1px solid #aaaaaa/*{borderColorContent}*/;
33-
background: #ffffff/*{bgColorContent}*/ url("images/ui-bg_flat_75_ffffff_40x100.png")/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
34-
color: #222222/*{fcContent}*/;
32+
border: 1px solid #dddddd/*{borderColorContent}*/;
33+
background: #ffffff/*{bgColorContent}*/ /*{bgImgUrlContent}*/ /*{bgContentXPos}*/ /*{bgContentYPos}*/ /*{bgContentRepeat}*/;
34+
color: #333333/*{fcContent}*/;
3535
}
3636
.ui-widget-content a {
37-
color: #222222/*{fcContent}*/;
37+
color: #333333/*{fcContent}*/;
3838
}
3939
.ui-widget-header {
40-
border: 1px solid #aaaaaa/*{borderColorHeader}*/;
41-
background: #cccccc/*{bgColorHeader}*/ url("images/ui-bg_highlight-soft_75_cccccc_1x100.png")/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;
42-
color: #222222/*{fcHeader}*/;
40+
border: 1px solid #dddddd/*{borderColorHeader}*/;
41+
background: #e9e9e9/*{bgColorHeader}*/ /*{bgImgUrlHeader}*/ /*{bgHeaderXPos}*/ /*{bgHeaderYPos}*/ /*{bgHeaderRepeat}*/;
42+
color: #333333/*{fcHeader}*/;
4343
font-weight: bold;
4444
}
4545
.ui-widget-header a {
46-
color: #222222/*{fcHeader}*/;
46+
color: #333333/*{fcHeader}*/;
4747
}
4848

4949
/* Interaction states
5050
----------------------------------*/
5151
.ui-state-default,
5252
.ui-widget-content .ui-state-default,
5353
.ui-widget-header .ui-state-default {
54-
border: 1px solid #d3d3d3/*{borderColorDefault}*/;
55-
background: #e6e6e6/*{bgColorDefault}*/ url("images/ui-bg_glass_75_e6e6e6_1x400.png")/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
54+
border: 1px solid #c5c5c5/*{borderColorDefault}*/;
55+
background: #f6f6f6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ /*{bgDefaultXPos}*/ /*{bgDefaultYPos}*/ /*{bgDefaultRepeat}*/;
5656
font-weight: normal/*{fwDefault}*/;
57-
color: #555555/*{fcDefault}*/;
57+
color: #454545/*{fcDefault}*/;
5858
}
5959
.ui-state-default a,
6060
.ui-state-default a:link,
6161
.ui-state-default a:visited {
62-
color: #555555/*{fcDefault}*/;
62+
color: #454545/*{fcDefault}*/;
6363
text-decoration: none;
6464
}
6565
.ui-state-hover,
@@ -68,10 +68,10 @@
6868
.ui-state-focus,
6969
.ui-widget-content .ui-state-focus,
7070
.ui-widget-header .ui-state-focus {
71-
border: 1px solid #999999/*{borderColorHover}*/;
72-
background: #dadada/*{bgColorHover}*/ url("images/ui-bg_glass_75_dadada_1x400.png")/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/;
71+
border: 1px solid #cccccc/*{borderColorHover}*/;
72+
background: #ededed/*{bgColorHover}*/ /*{bgImgUrlHover}*/ /*{bgHoverXPos}*/ /*{bgHoverYPos}*/ /*{bgHoverRepeat}*/;
7373
font-weight: normal/*{fwDefault}*/;
74-
color: #212121/*{fcHover}*/;
74+
color: #2b2b2b/*{fcHover}*/;
7575
}
7676
.ui-state-hover a,
7777
.ui-state-hover a:hover,
@@ -81,21 +81,21 @@
8181
.ui-state-focus a:hover,
8282
.ui-state-focus a:link,
8383
.ui-state-focus a:visited {
84-
color: #212121/*{fcHover}*/;
84+
color: #2b2b2b/*{fcHover}*/;
8585
text-decoration: none;
8686
}
8787
.ui-state-active,
8888
.ui-widget-content .ui-state-active,
8989
.ui-widget-header .ui-state-active {
90-
border: 1px solid #aaaaaa/*{borderColorActive}*/;
91-
background: #ffffff/*{bgColorActive}*/ url("images/ui-bg_glass_65_ffffff_1x400.png")/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/;
90+
border: 1px solid #003eff/*{borderColorActive}*/;
91+
background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/;
9292
font-weight: normal/*{fwDefault}*/;
93-
color: #212121/*{fcActive}*/;
93+
color: #ffffff/*{fcActive}*/;
9494
}
9595
.ui-state-active a,
9696
.ui-state-active a:link,
9797
.ui-state-active a:visited {
98-
color: #212121/*{fcActive}*/;
98+
color: #ffffff/*{fcActive}*/;
9999
text-decoration: none;
100100
}
101101

@@ -104,31 +104,31 @@
104104
.ui-state-highlight,
105105
.ui-widget-content .ui-state-highlight,
106106
.ui-widget-header .ui-state-highlight {
107-
border: 1px solid #fcefa1/*{borderColorHighlight}*/;
108-
background: #fbf9ee/*{bgColorHighlight}*/ url("images/ui-bg_glass_55_fbf9ee_1x400.png")/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/;
109-
color: #363636/*{fcHighlight}*/;
107+
border: 1px solid #dad55e/*{borderColorHighlight}*/;
108+
background: #fffa90/*{bgColorHighlight}*/ /*{bgImgUrlHighlight}*/ /*{bgHighlightXPos}*/ /*{bgHighlightYPos}*/ /*{bgHighlightRepeat}*/;
109+
color: #777620/*{fcHighlight}*/;
110110
}
111111
.ui-state-highlight a,
112112
.ui-widget-content .ui-state-highlight a,
113113
.ui-widget-header .ui-state-highlight a {
114-
color: #363636/*{fcHighlight}*/;
114+
color: #777620/*{fcHighlight}*/;
115115
}
116116
.ui-state-error,
117117
.ui-widget-content .ui-state-error,
118118
.ui-widget-header .ui-state-error {
119-
border: 1px solid #cd0a0a/*{borderColorError}*/;
120-
background: #fef1ec/*{bgColorError}*/ url("images/ui-bg_glass_95_fef1ec_1x400.png")/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/;
121-
color: #cd0a0a/*{fcError}*/;
119+
border: 1px solid #f1a899/*{borderColorError}*/;
120+
background: #fddfdf/*{bgColorError}*/ /*{bgImgUrlError}*/ /*{bgErrorXPos}*/ /*{bgErrorYPos}*/ /*{bgErrorRepeat}*/;
121+
color: #5f3f3f/*{fcError}*/;
122122
}
123123
.ui-state-error a,
124124
.ui-widget-content .ui-state-error a,
125125
.ui-widget-header .ui-state-error a {
126-
color: #cd0a0a/*{fcError}*/;
126+
color: #5f3f3f/*{fcError}*/;
127127
}
128128
.ui-state-error-text,
129129
.ui-widget-content .ui-state-error-text,
130130
.ui-widget-header .ui-state-error-text {
131-
color: #cd0a0a/*{fcError}*/;
131+
color: #5f3f3f/*{fcError}*/;
132132
}
133133
.ui-priority-primary,
134134
.ui-widget-content .ui-priority-primary,
@@ -163,27 +163,27 @@
163163
}
164164
.ui-icon,
165165
.ui-widget-content .ui-icon {
166-
background-image: url("images/ui-icons_222222_256x240.png")/*{iconsContent}*/;
166+
background-image: url("images/ui-icons_444444_256x240.png")/*{iconsContent}*/;
167167
}
168168
.ui-widget-header .ui-icon {
169-
background-image: url("images/ui-icons_222222_256x240.png")/*{iconsHeader}*/;
169+
background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/;
170170
}
171171
.ui-state-default .ui-icon {
172-
background-image: url("images/ui-icons_888888_256x240.png")/*{iconsDefault}*/;
172+
background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/;
173173
}
174174
.ui-state-hover .ui-icon,
175175
.ui-state-focus .ui-icon {
176-
background-image: url("images/ui-icons_454545_256x240.png")/*{iconsHover}*/;
176+
background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/;
177177
}
178178
.ui-state-active .ui-icon {
179-
background-image: url("images/ui-icons_454545_256x240.png")/*{iconsActive}*/;
179+
background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/;
180180
}
181181
.ui-state-highlight .ui-icon {
182-
background-image: url("images/ui-icons_2e83ff_256x240.png")/*{iconsHighlight}*/;
182+
background-image: url("images/ui-icons_777620_256x240.png")/*{iconsHighlight}*/;
183183
}
184184
.ui-state-error .ui-icon,
185185
.ui-state-error-text .ui-icon {
186-
background-image: url("images/ui-icons_cd0a0a_256x240.png")/*{iconsError}*/;
186+
background-image: url("images/ui-icons_cc0000_256x240.png")/*{iconsError}*/;
187187
}
188188

189189
/* positioning */
@@ -373,38 +373,34 @@
373373
.ui-corner-top,
374374
.ui-corner-left,
375375
.ui-corner-tl {
376-
border-top-left-radius: 4px/*{cornerRadius}*/;
376+
border-top-left-radius: 3px/*{cornerRadius}*/;
377377
}
378378
.ui-corner-all,
379379
.ui-corner-top,
380380
.ui-corner-right,
381381
.ui-corner-tr {
382-
border-top-right-radius: 4px/*{cornerRadius}*/;
382+
border-top-right-radius: 3px/*{cornerRadius}*/;
383383
}
384384
.ui-corner-all,
385385
.ui-corner-bottom,
386386
.ui-corner-left,
387387
.ui-corner-bl {
388-
border-bottom-left-radius: 4px/*{cornerRadius}*/;
388+
border-bottom-left-radius: 3px/*{cornerRadius}*/;
389389
}
390390
.ui-corner-all,
391391
.ui-corner-bottom,
392392
.ui-corner-right,
393393
.ui-corner-br {
394-
border-bottom-right-radius: 4px/*{cornerRadius}*/;
394+
border-bottom-right-radius: 3px/*{cornerRadius}*/;
395395
}
396396

397397
/* Overlays */
398398
.ui-widget-overlay {
399-
background: #aaaaaa/*{bgColorOverlay}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/;
399+
background: #aaaaaa/*{bgColorOverlay}*/;
400400
opacity: .3/*{opacityOverlay}*/;
401401
filter: Alpha(Opacity=30)/*{opacityFilterOverlay}*/; /* support: IE8 */
402402
}
403403
.ui-widget-shadow {
404-
margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/;
405-
padding: 8px/*{thicknessShadow}*/;
406-
background: #aaaaaa/*{bgColorShadow}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/;
407-
opacity: .3/*{opacityShadow}*/;
408-
filter: Alpha(Opacity=30)/*{opacityFilterShadow}*/; /* support: IE8 */
409-
border-radius: 8px/*{cornerRadiusShadow}*/;
404+
-webkit-box-shadow: 0/*{offsetLeftShadow}*/ 0/*{offsetTopShadow}*/ 5px/*{thicknessShadow}*/ #666666/*{bgColorShadow}*/;
405+
box-shadow: 0/*{offsetLeftShadow}*/ 0/*{offsetTopShadow}*/ 5px/*{thicknessShadow}*/ #666666/*{bgColorShadow}*/;
410406
}

‎themes/base/tooltip.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@
1313
position: absolute;
1414
z-index: 9999;
1515
max-width: 300px;
16-
-webkit-box-shadow: 0 0 5px #aaa;
17-
box-shadow: 0 0 5px #aaa;
1816
}
1917
body .ui-tooltip {
2018
border-width: 2px;

‎ui/tooltip.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -406,7 +406,8 @@ return $.widget( "ui.tooltip", {
406406
_tooltip: function( element ) {
407407
var tooltip = $( "<div>" )
408408
.attr( "role", "tooltip" )
409-
.addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " +
409+
// TODO move to classes option
410+
.addClass( "ui-tooltip ui-widget ui-widget-shadow ui-corner-all ui-widget-content " +
410411
( this.options.tooltipClass || "" ) ),
411412
id = tooltip.uniqueId().attr( "id" );
412413

0 commit comments

Comments
 (0)