Skip to content
This repository

Link styling (theme.css) #4385

Merged
merged 3 commits into from almost 2 years ago

3 participants

Jasper de Groot Todd Parker Mat Marquis
Jasper de Groot
Owner
uGoMobi commented May 18, 2012

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

Todd Parker

@wilto or @scottjehl - mind reviewing?

Jasper de Groot uGoMobi merged commit 738aa16 into from June 07, 2012
Jasper de Groot uGoMobi closed this June 07, 2012
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 1 changed file with 86 additions and 59 deletions. Show diff stats Hide diff stats

  1. 145  css/themes/default/jquery.mobile.theme.css
145  css/themes/default/jquery.mobile.theme.css
@@ -27,22 +27,23 @@
27 27
 	color: #fff /*{a-bar-color}*/;
28 28
 }
29 29
 
30  
-.ui-bar-a .ui-link {
  30
+.ui-bar-a a.ui-link {
31 31
 	color: #7cc4e7 /*{a-bar-link-color}*/;
32 32
 	font-weight: bold;
33 33
 }
34 34
 
35  
-.ui-bar-a .ui-link:hover {
  35
+.ui-bar-a a.ui-link:visited {
  36
+    color: #2489CE /*{a-bar-link-visited}*/;
  37
+}
  38
+
  39
+.ui-bar-a a.ui-link:hover {
36 40
 	color: #2489CE /*{a-bar-link-hover}*/;
37 41
 }
38 42
 
39  
-.ui-bar-a .ui-link:active {
  43
+.ui-bar-a a.ui-link:active {
40 44
 	color: #2489CE /*{a-bar-link-active}*/;
41 45
 }
42 46
 
43  
-.ui-bar-a .ui-link:visited {
44  
-    color: #2489CE /*{a-bar-link-visited}*/;
45  
-}
46 47
 .ui-body-a,
47 48
 .ui-overlay-a {
48 49
 	border: 1px solid 		#444 /*{a-body-border}*/;
@@ -77,6 +78,10 @@
77 78
 	font-weight: bold;
78 79
 }
79 80
 
  81
+.ui-body-a .ui-link:visited {
  82
+    color: #2489CE /*{a-body-link-visited}*/;
  83
+}
  84
+
80 85
 .ui-body-a .ui-link:hover {
81 86
 	color: #2489CE /*{a-body-link-hover}*/;
82 87
 }
@@ -85,10 +90,6 @@
85 90
 	color: #2489CE /*{a-body-link-active}*/;
86 91
 }
87 92
 
88  
-.ui-body-a .ui-link:visited {
89  
-    color: #2489CE /*{a-body-link-visited}*/;
90  
-}
91  
-
92 93
 .ui-btn-up-a {
93 94
 	border: 1px solid 		#111 /*{a-bup-border}*/;
94 95
 	background: 			#333 /*{a-bup-background-color}*/;
@@ -102,6 +103,7 @@
102 103
 	background-image:      -o-linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* Opera 11.10+ */
103 104
 	background-image:         linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/);
104 105
 }
  106
+.ui-btn-up-a:visited,
105 107
 .ui-btn-up-a a.ui-link-inherit {
106 108
 	color: 					#fff /*{a-bup-color}*/;
107 109
 }
@@ -118,6 +120,8 @@
118 120
 	background-image:      -o-linear-gradient( #555555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
119 121
 	background-image:         linear-gradient( #555555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/);
120 122
 }
  123
+.ui-btn-hover-a:visited,
  124
+.ui-btn-hover-a:hover,
121 125
 .ui-btn-hover-a a.ui-link-inherit {
122 126
 	color: 					#fff /*{a-bhover-color}*/;
123 127
 }
@@ -134,6 +138,8 @@
134 138
 	background-image:      -o-linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/); /* Opera 11.10+ */
135 139
 	background-image:         linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/);
136 140
 }
  141
+.ui-btn-down-a:visited,
  142
+.ui-btn-down-a:hover,
137 143
 .ui-btn-down-a a.ui-link-inherit {
138 144
 	color: 					#fff /*{a-bdown-color}*/;
139 145
 }
@@ -170,22 +176,24 @@
170 176
 .ui-bar-b .ui-link-inherit {
171 177
 	color: 	#fff /*{b-bar-color}*/;
172 178
 }
173  
-.ui-bar-b .ui-link {
  179
+
  180
+.ui-bar-b a.ui-link {
174 181
 	color: #ddf0f8 /*{b-bar-link-color}*/;
175 182
 	font-weight: bold;
176 183
 }
177 184
 
178  
-.ui-bar-b .ui-link:hover {
  185
+.ui-bar-b a.ui-link:visited {
  186
+    color: #ddf0f8 /*{b-bar-link-visited}*/;
  187
+}
  188
+
  189
+.ui-bar-b a.ui-link:hover {
179 190
 	color: #ddf0f8 /*{b-bar-link-hover}*/;
180 191
 }
181 192
 
182  
-.ui-bar-b .ui-link:active {
  193
+.ui-bar-b a.ui-link:active {
183 194
 	color: #ddf0f8 /*{b-bar-link-active}*/;
184 195
 }
185 196
 
186  
-.ui-bar-b .ui-link:visited {
187  
-    color: #ddf0f8 /*{b-bar-link-visited}*/;
188  
-}
189 197
 .ui-body-b,
190 198
 .ui-overlay-b {
191 199
 	border: 1px solid 		#999 /*{b-body-border}*/;
@@ -220,6 +228,10 @@
220 228
 	font-weight: bold;
221 229
 }
222 230
 
  231
+.ui-body-b .ui-link:visited {
  232
+    color: #2489CE /*{b-body-link-visited}*/;
  233
+}
  234
+
223 235
 .ui-body-b .ui-link:hover {
224 236
 	color: #2489CE /*{b-body-link-hover}*/;
225 237
 }
@@ -228,10 +240,6 @@
228 240
 	color: #2489CE /*{b-body-link-active}*/;
229 241
 }
230 242
 
231  
-.ui-body-b .ui-link:visited {
232  
-    color: #2489CE /*{b-body-link-visited}*/;
233  
-}
234  
-
235 243
 .ui-btn-up-b {
236 244
 	border: 1px solid 		#044062 /*{b-bup-border}*/;
237 245
 	background: 			#396b9e /*{b-bup-background-color}*/;
@@ -245,6 +253,7 @@
245 253
 	background-image:      -o-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* Opera 11.10+ */
246 254
 	background-image:         linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/);
247 255
 }
  256
+.ui-btn-up-b:visited,
248 257
 .ui-btn-up-b a.ui-link-inherit {
249 258
 	color: 					#fff /*{b-bup-color}*/;
250 259
 }
@@ -261,6 +270,8 @@
261 270
 	background-image:      -o-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/); /* Opera 11.10+ */
262 271
 	background-image:         linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/);
263 272
 }
  273
+.ui-btn-hover-b:visited,
  274
+.ui-btn-hover-a:hover,
264 275
 .ui-btn-hover-b a.ui-link-inherit {
265 276
 	color: 					#fff /*{b-bhover-color}*/;
266 277
 }
@@ -277,6 +288,8 @@
277 288
 	background-image:      -o-linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/); /* Opera 11.10+ */
278 289
 	background-image:         linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/);
279 290
 }
  291
+.ui-btn-down-b:visited,
  292
+.ui-btn-down-b:hover,
280 293
 .ui-btn-down-b a.ui-link-inherit {
281 294
 	color: 					#fff /*{b-bdown-color}*/;
282 295
 }
@@ -304,25 +317,25 @@
304 317
 	background-image:      -o-linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/); /* Opera 11.10+ */
305 318
 	background-image:         linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/);
306 319
 }
307  
-
308 320
 .ui-bar-c .ui-link-inherit {
309 321
 	color: 	#3E3E3E /*{c-bar-color}*/;
310 322
 }
311  
-.ui-bar-c .ui-link {
  323
+
  324
+.ui-bar-c a.ui-link {
312 325
 	color: #7cc4e7 /*{c-bar-link-color}*/;
313 326
 	font-weight: bold;
314 327
 }
315 328
 
316  
-.ui-bar-c .ui-link:hover {
317  
-	color: #2489CE /*{c-bar-link-hover}*/;
  329
+.ui-bar-c a.ui-link:visited {
  330
+    color: #2489CE /*{c-bar-link-visited}*/;
318 331
 }
319 332
 
320  
-.ui-bar-c .ui-link:active {
321  
-	color: #2489CE /*{c-bar-link-active}*/;
  333
+.ui-bar-c a.ui-link:hover {
  334
+	color: #2489CE /*{c-bar-link-hover}*/;
322 335
 }
323 336
 
324  
-.ui-bar-c .ui-link:visited {
325  
-    color: #2489CE /*{c-bar-link-visited}*/;
  337
+.ui-bar-c a.ui-link:active {
  338
+	color: #2489CE /*{c-bar-link-active}*/;
326 339
 }
327 340
 
328 341
 .ui-bar-c,
@@ -356,7 +369,6 @@
356 369
 .ui-body-c button {
357 370
 	font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
358 371
 }
359  
-
360 372
 .ui-body-c .ui-link-inherit {
361 373
 	color: 	#333333 /*{c-body-color}*/;
362 374
 }
@@ -366,6 +378,10 @@
366 378
 	font-weight: bold;
367 379
 }
368 380
 
  381
+.ui-body-c .ui-link:visited {
  382
+    color: #2489CE /*{c-body-link-visited}*/;
  383
+}
  384
+
369 385
 .ui-body-c .ui-link:hover {
370 386
 	color: #2489CE /*{c-body-link-hover}*/;
371 387
 }
@@ -374,10 +390,6 @@
374 390
 	color: #2489CE /*{c-body-link-active}*/;
375 391
 }
376 392
 
377  
-.ui-body-c .ui-link:visited {
378  
-    color: #2489CE /*{c-body-link-visited}*/;
379  
-}
380  
-
381 393
 .ui-btn-up-c {
382 394
 	border: 1px solid 		#ccc /*{c-bup-border}*/;
383 395
 	background: 			#eee /*{c-bup-background-color}*/;
@@ -391,10 +403,10 @@
391 403
 	background-image:      -o-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/); /* Opera 11.10+ */
392 404
 	background-image:         linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/);
393 405
 }
  406
+.ui-btn-up-c:visited,
394 407
 .ui-btn-up-c a.ui-link-inherit {
395 408
 	color: 					#2F3E46 /*{c-bup-color}*/;
396 409
 }
397  
-
398 410
 .ui-btn-hover-c {
399 411
 	border: 1px solid 		#bbb /*{c-bhover-border}*/;
400 412
 	background: 			#dfdfdf /*{c-bhover-background-color}*/;
@@ -408,6 +420,8 @@
408 420
 	background-image:      -o-linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/); /* Opera 11.10+ */
409 421
 	background-image:         linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/);
410 422
 }
  423
+.ui-btn-hover-c:visited,
  424
+.ui-btn-hover-c:hover,
411 425
 .ui-btn-hover-c a.ui-link-inherit {
412 426
 	color: 					#2F3E46 /*{c-bhover-color}*/;
413 427
 }
@@ -424,6 +438,8 @@
424 438
 	background-image:      -o-linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/); /* Opera 11.10+ */
425 439
 	background-image:         linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/);
426 440
 }
  441
+.ui-btn-down-c:visited,
  442
+.ui-btn-down-c:hover,
427 443
 .ui-btn-down-c a.ui-link-inherit {
428 444
 	color: 					#2F3E46 /*{c-bdown-color}*/;
429 445
 }
@@ -458,25 +474,25 @@
458 474
 .ui-bar-d button {
459 475
 	font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
460 476
 }
461  
-
462 477
 .ui-bar-d .ui-link-inherit {
463 478
 	color: 	#333333 /*{d-bar-color}*/;
464 479
 }
465  
-.ui-bar-d .ui-link {
  480
+
  481
+.ui-bar-d a.ui-link {
466 482
 	color: #2489CE /*{d-bar-link-color}*/;
467 483
 	font-weight: bold;
468 484
 }
469 485
 
470  
-.ui-bar-d .ui-link:hover {
471  
-	color: #2489CE /*{d-bar-link-hover}*/;
  486
+.ui-bar-d a.ui-link:visited {
  487
+    color: #2489CE /*{d-bar-link-visited}*/;
472 488
 }
473 489
 
474  
-.ui-bar-d .ui-link:active {
475  
-	color: #2489CE /*{d-bar-link-active}*/;
  490
+.ui-bar-d a.ui-link:hover {
  491
+	color: #2489CE /*{d-bar-link-hover}*/;
476 492
 }
477 493
 
478  
-.ui-bar-d .ui-link:visited {
479  
-    color: #2489CE /*{d-bar-link-visited}*/;
  494
+.ui-bar-d a.ui-link:active {
  495
+	color: #2489CE /*{d-bar-link-active}*/;
480 496
 }
481 497
 
482 498
 .ui-body-d,
@@ -503,7 +519,6 @@
503 519
 .ui-body-d button {
504 520
 	font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
505 521
 }
506  
-
507 522
 .ui-body-d .ui-link-inherit {
508 523
 	color: 	#333333 /*{d-body-color}*/;
509 524
 }
@@ -513,6 +528,10 @@
513 528
 	font-weight: bold;
514 529
 }
515 530
 
  531
+.ui-body-d .ui-link:visited {
  532
+    color: #2489CE /*{d-body-link-visited}*/;
  533
+}
  534
+
516 535
 .ui-body-d .ui-link:hover {
517 536
 	color: #2489CE /*{d-body-link-hover}*/;
518 537
 }
@@ -521,10 +540,6 @@
521 540
 	color: #2489CE /*{d-body-link-active}*/;
522 541
 }
523 542
 
524  
-.ui-body-d .ui-link:visited {
525  
-    color: #2489CE /*{d-body-link-visited}*/;
526  
-}
527  
-
528 543
 .ui-btn-up-d {
529 544
 	border: 1px solid 		#bbb /*{d-bup-border}*/;
530 545
 	background: 			#fff /*{d-bup-background-color}*/;
@@ -538,6 +553,7 @@
538 553
 	background-image:      -o-linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* Opera 11.10+ */
539 554
 	background-image:         linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/);
540 555
 }
  556
+.ui-btn-up-d:visited,
541 557
 .ui-btn-up-d a.ui-link-inherit {
542 558
 	color: 					#333 /*{d-bup-color}*/;
543 559
 }
@@ -555,6 +571,8 @@
555 571
 	background-image:      -o-linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/); /* Opera 11.10+ */
556 572
 	background-image:         linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/);
557 573
 }
  574
+.ui-btn-hover-d:visited,
  575
+.ui-btn-hover-d:hover,
558 576
 .ui-btn-hover-d a.ui-link-inherit {
559 577
 	color: 					#333 /*{d-bhover-color}*/;
560 578
 }
@@ -571,6 +589,8 @@
571 589
 	background-image:      -o-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* Opera 11.10+ */
572 590
 	background-image:         linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/);
573 591
 }
  592
+.ui-btn-down-d:visited,
  593
+.ui-btn-down-d:hover,
574 594
 .ui-btn-down-d a.ui-link-inherit {
575 595
 	color: 					#333 /*{d-bdown-color}*/;
576 596
 }
@@ -608,21 +628,22 @@
608 628
 .ui-bar-e .ui-link-inherit {
609 629
 	color: 	#333333 /*{e-bar-color}*/;
610 630
 }
611  
-.ui-bar-e .ui-link {
  631
+
  632
+.ui-bar-e a.ui-link {
612 633
 	color: #2489CE /*{e-bar-link-color}*/;
613 634
 	font-weight: bold;
614 635
 }
615 636
 
616  
-.ui-bar-e .ui-link:hover {
617  
-	color: #2489CE /*{e-bar-link-hover}*/;
  637
+.ui-bar-e a.ui-link:visited {
  638
+    color: #2489CE /*{e-bar-link-visited}*/;
618 639
 }
619 640
 
620  
-.ui-bar-e .ui-link:active {
621  
-	color: #2489CE /*{e-bar-link-active}*/;
  641
+.ui-bar-e a.ui-link:hover {
  642
+	color: #2489CE /*{e-bar-link-hover}*/;
622 643
 }
623 644
 
624  
-.ui-bar-e .ui-link:visited {
625  
-    color: #2489CE /*{e-bar-link-visited}*/;
  645
+.ui-bar-e a.ui-link:active {
  646
+	color: #2489CE /*{e-bar-link-active}*/;
626 647
 }
627 648
 
628 649
 .ui-body-e,
@@ -658,6 +679,10 @@
658 679
 	font-weight: bold;
659 680
 }
660 681
 
  682
+.ui-body-e .ui-link:visited {
  683
+    color: #2489CE /*{e-body-link-visited}*/;
  684
+}
  685
+
661 686
 .ui-body-e .ui-link:hover {
662 687
 	color: #2489CE /*{e-body-link-hover}*/;
663 688
 }
@@ -666,10 +691,6 @@
666 691
 	color: #2489CE /*{e-body-link-active}*/;
667 692
 }
668 693
 
669  
-.ui-body-e .ui-link:visited {
670  
-    color: #2489CE /*{e-body-link-visited}*/;
671  
-}
672  
-
673 694
 .ui-btn-up-e {
674 695
 	border: 1px solid 		#F4C63f /*{e-bup-border}*/;
675 696
 	background: 			#fadb4e /*{e-bup-background-color}*/;
@@ -683,6 +704,7 @@
683 704
 	background-image:      -o-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* Opera 11.10+ */
684 705
 	background-image:         linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/);
685 706
 }
  707
+.ui-btn-up-e:visited,
686 708
 .ui-btn-up-e a.ui-link-inherit {
687 709
 	color: 					#222 /*{e-bup-color}*/;
688 710
 }
@@ -699,7 +721,8 @@
699 721
 	background-image:      -o-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* Opera 11.10+ */
700 722
 	background-image:         linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/);
701 723
 }
702  
-
  724
+.ui-btn-hover-e:visited,
  725
+.ui-btn-hover-e:hover,
703 726
 .ui-btn-hover-e a.ui-link-inherit {
704 727
 	color: 					#333 /*{e-bhover-color}*/;
705 728
 }
@@ -716,6 +739,8 @@
716 739
 	background-image:      -o-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* Opera 11.10+ */
717 740
 	background-image:         linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/);
718 741
 }
  742
+.ui-btn-down-e:visited,
  743
+.ui-btn-down-e:hover,
719 744
 .ui-btn-down-e a.ui-link-inherit {
720 745
 	color: 					#333 /*{e-bdown-color}*/;
721 746
 }
@@ -754,6 +779,8 @@ a.ui-link-inherit {
754 779
 	background-image:         linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/);
755 780
 	font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
756 781
 }
  782
+.ui-btn-active:visited,
  783
+.ui-btn-active:hover,
757 784
 .ui-btn-active a.ui-link-inherit {
758 785
 	color: 					#fff /*{global-active-color}*/;
759 786
 }
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.