Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Link styling (theme.css) #4385

Merged
merged 3 commits into from

3 participants

@jaspermdegroot
Collaborator

Fixed cascade issue bar link styles:
The '.ui-bar-[swatch] .ui-link(:pseudo)' selectors need a higher level of specificity. Otherwise they will be overriden by '.ui-body-[swatch] .ui-link(:pseudo)', as long as the body swatch is the same or comes after the bar swatch.

Reorder ui-link pseudo class rules - visited before hover and active:
By moving the :visited rule in front of the :hover and :active rules all links "respond" to hover.

Added selectors to prevent H5BP anchor styles being applied to JQM buttons:
When JQM is used together with H5BP's style.css buttons get the a:visited and a:hover font color from that stylesheet. Although the user could remove those rules (JQM's ui-link rules override them) we can "protect" the buttons with the suggested changes. H5BP doesn't set color for a:active so this is not included.
Fixes #3444

@Wilto Wilto was assigned
@toddparker

@wilto or @scottjehl - mind reviewing?

@jaspermdegroot jaspermdegroot merged commit 738aa16 into jquery:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 86 additions and 59 deletions.
  1. +86 −59 css/themes/default/jquery.mobile.theme.css
View
145 css/themes/default/jquery.mobile.theme.css
@@ -27,22 +27,23 @@
color: #fff /*{a-bar-color}*/;
}
-.ui-bar-a .ui-link {
+.ui-bar-a a.ui-link {
color: #7cc4e7 /*{a-bar-link-color}*/;
font-weight: bold;
}
-.ui-bar-a .ui-link:hover {
+.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 .ui-link:active {
+.ui-bar-a a.ui-link:active {
color: #2489CE /*{a-bar-link-active}*/;
}
-.ui-bar-a .ui-link:visited {
- color: #2489CE /*{a-bar-link-visited}*/;
-}
.ui-body-a,
.ui-overlay-a {
border: 1px solid #444 /*{a-body-border}*/;
@@ -77,6 +78,10 @@
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}*/;
}
@@ -85,10 +90,6 @@
color: #2489CE /*{a-body-link-active}*/;
}
-.ui-body-a .ui-link:visited {
- color: #2489CE /*{a-body-link-visited}*/;
-}
-
.ui-btn-up-a {
border: 1px solid #111 /*{a-bup-border}*/;
background: #333 /*{a-bup-background-color}*/;
@@ -102,6 +103,7 @@
background-image: -o-linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/);
}
+.ui-btn-up-a:visited,
.ui-btn-up-a a.ui-link-inherit {
color: #fff /*{a-bup-color}*/;
}
@@ -118,6 +120,8 @@
background-image: -o-linear-gradient( #555555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #555555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/);
}
+.ui-btn-hover-a:visited,
+.ui-btn-hover-a:hover,
.ui-btn-hover-a a.ui-link-inherit {
color: #fff /*{a-bhover-color}*/;
}
@@ -134,6 +138,8 @@
background-image: -o-linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/);
}
+.ui-btn-down-a:visited,
+.ui-btn-down-a:hover,
.ui-btn-down-a a.ui-link-inherit {
color: #fff /*{a-bdown-color}*/;
}
@@ -170,22 +176,24 @@
.ui-bar-b .ui-link-inherit {
color: #fff /*{b-bar-color}*/;
}
-.ui-bar-b .ui-link {
+
+.ui-bar-b a.ui-link {
color: #ddf0f8 /*{b-bar-link-color}*/;
font-weight: bold;
}
-.ui-bar-b .ui-link:hover {
+.ui-bar-b a.ui-link:visited {
+ color: #ddf0f8 /*{b-bar-link-visited}*/;
+}
+
+.ui-bar-b a.ui-link:hover {
color: #ddf0f8 /*{b-bar-link-hover}*/;
}
-.ui-bar-b .ui-link:active {
+.ui-bar-b a.ui-link:active {
color: #ddf0f8 /*{b-bar-link-active}*/;
}
-.ui-bar-b .ui-link:visited {
- color: #ddf0f8 /*{b-bar-link-visited}*/;
-}
.ui-body-b,
.ui-overlay-b {
border: 1px solid #999 /*{b-body-border}*/;
@@ -220,6 +228,10 @@
font-weight: bold;
}
+.ui-body-b .ui-link:visited {
+ color: #2489CE /*{b-body-link-visited}*/;
+}
+
.ui-body-b .ui-link:hover {
color: #2489CE /*{b-body-link-hover}*/;
}
@@ -228,10 +240,6 @@
color: #2489CE /*{b-body-link-active}*/;
}
-.ui-body-b .ui-link:visited {
- color: #2489CE /*{b-body-link-visited}*/;
-}
-
.ui-btn-up-b {
border: 1px solid #044062 /*{b-bup-border}*/;
background: #396b9e /*{b-bup-background-color}*/;
@@ -245,6 +253,7 @@
background-image: -o-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/);
}
+.ui-btn-up-b:visited,
.ui-btn-up-b a.ui-link-inherit {
color: #fff /*{b-bup-color}*/;
}
@@ -261,6 +270,8 @@
background-image: -o-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/);
}
+.ui-btn-hover-b:visited,
+.ui-btn-hover-a:hover,
.ui-btn-hover-b a.ui-link-inherit {
color: #fff /*{b-bhover-color}*/;
}
@@ -277,6 +288,8 @@
background-image: -o-linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/);
}
+.ui-btn-down-b:visited,
+.ui-btn-down-b:hover,
.ui-btn-down-b a.ui-link-inherit {
color: #fff /*{b-bdown-color}*/;
}
@@ -304,25 +317,25 @@
background-image: -o-linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/);
}
-
.ui-bar-c .ui-link-inherit {
color: #3E3E3E /*{c-bar-color}*/;
}
-.ui-bar-c .ui-link {
+
+.ui-bar-c a.ui-link {
color: #7cc4e7 /*{c-bar-link-color}*/;
font-weight: bold;
}
-.ui-bar-c .ui-link:hover {
- color: #2489CE /*{c-bar-link-hover}*/;
+.ui-bar-c a.ui-link:visited {
+ color: #2489CE /*{c-bar-link-visited}*/;
}
-.ui-bar-c .ui-link:active {
- color: #2489CE /*{c-bar-link-active}*/;
+.ui-bar-c a.ui-link:hover {
+ color: #2489CE /*{c-bar-link-hover}*/;
}
-.ui-bar-c .ui-link:visited {
- color: #2489CE /*{c-bar-link-visited}*/;
+.ui-bar-c a.ui-link:active {
+ color: #2489CE /*{c-bar-link-active}*/;
}
.ui-bar-c,
@@ -356,7 +369,6 @@
.ui-body-c button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
-
.ui-body-c .ui-link-inherit {
color: #333333 /*{c-body-color}*/;
}
@@ -366,6 +378,10 @@
font-weight: bold;
}
+.ui-body-c .ui-link:visited {
+ color: #2489CE /*{c-body-link-visited}*/;
+}
+
.ui-body-c .ui-link:hover {
color: #2489CE /*{c-body-link-hover}*/;
}
@@ -374,10 +390,6 @@
color: #2489CE /*{c-body-link-active}*/;
}
-.ui-body-c .ui-link:visited {
- color: #2489CE /*{c-body-link-visited}*/;
-}
-
.ui-btn-up-c {
border: 1px solid #ccc /*{c-bup-border}*/;
background: #eee /*{c-bup-background-color}*/;
@@ -391,10 +403,10 @@
background-image: -o-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/);
}
+.ui-btn-up-c:visited,
.ui-btn-up-c a.ui-link-inherit {
color: #2F3E46 /*{c-bup-color}*/;
}
-
.ui-btn-hover-c {
border: 1px solid #bbb /*{c-bhover-border}*/;
background: #dfdfdf /*{c-bhover-background-color}*/;
@@ -408,6 +420,8 @@
background-image: -o-linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/);
}
+.ui-btn-hover-c:visited,
+.ui-btn-hover-c:hover,
.ui-btn-hover-c a.ui-link-inherit {
color: #2F3E46 /*{c-bhover-color}*/;
}
@@ -424,6 +438,8 @@
background-image: -o-linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/);
}
+.ui-btn-down-c:visited,
+.ui-btn-down-c:hover,
.ui-btn-down-c a.ui-link-inherit {
color: #2F3E46 /*{c-bdown-color}*/;
}
@@ -458,25 +474,25 @@
.ui-bar-d button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
-
.ui-bar-d .ui-link-inherit {
color: #333333 /*{d-bar-color}*/;
}
-.ui-bar-d .ui-link {
+
+.ui-bar-d a.ui-link {
color: #2489CE /*{d-bar-link-color}*/;
font-weight: bold;
}
-.ui-bar-d .ui-link:hover {
- color: #2489CE /*{d-bar-link-hover}*/;
+.ui-bar-d a.ui-link:visited {
+ color: #2489CE /*{d-bar-link-visited}*/;
}
-.ui-bar-d .ui-link:active {
- color: #2489CE /*{d-bar-link-active}*/;
+.ui-bar-d a.ui-link:hover {
+ color: #2489CE /*{d-bar-link-hover}*/;
}
-.ui-bar-d .ui-link:visited {
- color: #2489CE /*{d-bar-link-visited}*/;
+.ui-bar-d a.ui-link:active {
+ color: #2489CE /*{d-bar-link-active}*/;
}
.ui-body-d,
@@ -503,7 +519,6 @@
.ui-body-d button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
-
.ui-body-d .ui-link-inherit {
color: #333333 /*{d-body-color}*/;
}
@@ -513,6 +528,10 @@
font-weight: bold;
}
+.ui-body-d .ui-link:visited {
+ color: #2489CE /*{d-body-link-visited}*/;
+}
+
.ui-body-d .ui-link:hover {
color: #2489CE /*{d-body-link-hover}*/;
}
@@ -521,10 +540,6 @@
color: #2489CE /*{d-body-link-active}*/;
}
-.ui-body-d .ui-link:visited {
- color: #2489CE /*{d-body-link-visited}*/;
-}
-
.ui-btn-up-d {
border: 1px solid #bbb /*{d-bup-border}*/;
background: #fff /*{d-bup-background-color}*/;
@@ -538,6 +553,7 @@
background-image: -o-linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/);
}
+.ui-btn-up-d:visited,
.ui-btn-up-d a.ui-link-inherit {
color: #333 /*{d-bup-color}*/;
}
@@ -555,6 +571,8 @@
background-image: -o-linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/);
}
+.ui-btn-hover-d:visited,
+.ui-btn-hover-d:hover,
.ui-btn-hover-d a.ui-link-inherit {
color: #333 /*{d-bhover-color}*/;
}
@@ -571,6 +589,8 @@
background-image: -o-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/);
}
+.ui-btn-down-d:visited,
+.ui-btn-down-d:hover,
.ui-btn-down-d a.ui-link-inherit {
color: #333 /*{d-bdown-color}*/;
}
@@ -608,21 +628,22 @@
.ui-bar-e .ui-link-inherit {
color: #333333 /*{e-bar-color}*/;
}
-.ui-bar-e .ui-link {
+
+.ui-bar-e a.ui-link {
color: #2489CE /*{e-bar-link-color}*/;
font-weight: bold;
}
-.ui-bar-e .ui-link:hover {
- color: #2489CE /*{e-bar-link-hover}*/;
+.ui-bar-e a.ui-link:visited {
+ color: #2489CE /*{e-bar-link-visited}*/;
}
-.ui-bar-e .ui-link:active {
- color: #2489CE /*{e-bar-link-active}*/;
+.ui-bar-e a.ui-link:hover {
+ color: #2489CE /*{e-bar-link-hover}*/;
}
-.ui-bar-e .ui-link:visited {
- color: #2489CE /*{e-bar-link-visited}*/;
+.ui-bar-e a.ui-link:active {
+ color: #2489CE /*{e-bar-link-active}*/;
}
.ui-body-e,
@@ -658,6 +679,10 @@
font-weight: bold;
}
+.ui-body-e .ui-link:visited {
+ color: #2489CE /*{e-body-link-visited}*/;
+}
+
.ui-body-e .ui-link:hover {
color: #2489CE /*{e-body-link-hover}*/;
}
@@ -666,10 +691,6 @@
color: #2489CE /*{e-body-link-active}*/;
}
-.ui-body-e .ui-link:visited {
- color: #2489CE /*{e-body-link-visited}*/;
-}
-
.ui-btn-up-e {
border: 1px solid #F4C63f /*{e-bup-border}*/;
background: #fadb4e /*{e-bup-background-color}*/;
@@ -683,6 +704,7 @@
background-image: -o-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/);
}
+.ui-btn-up-e:visited,
.ui-btn-up-e a.ui-link-inherit {
color: #222 /*{e-bup-color}*/;
}
@@ -699,7 +721,8 @@
background-image: -o-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/);
}
-
+.ui-btn-hover-e:visited,
+.ui-btn-hover-e:hover,
.ui-btn-hover-e a.ui-link-inherit {
color: #333 /*{e-bhover-color}*/;
}
@@ -716,6 +739,8 @@
background-image: -o-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/);
}
+.ui-btn-down-e:visited,
+.ui-btn-down-e:hover,
.ui-btn-down-e a.ui-link-inherit {
color: #333 /*{e-bdown-color}*/;
}
@@ -754,6 +779,8 @@ a.ui-link-inherit {
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: #fff /*{global-active-color}*/;
}
Something went wrong with that request. Please try again.