Changeset 6377

Timestamp:

01/12/2018 08:42:02 PM (7 years ago)

Author:

obenland

Message:

WP.tv: Add focus styles for tab navigation

Props SergeyBiryukov.
Fixes #1472.

File:

• sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/style.css (modified) (13 diffs)

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/style.css

@@ -139 +139 @@
 }
 
-a:hover, a:active {
+a:hover, a:focus, a:active {
     color: #d54e21;
+}
+
+a:focus {
+    outline: thin dotted;
 }
 
@@ -268 +272 @@
 }
 
-#menu li a, #menu li a:link, #menu li a:visited {
+#menu li a,
+#menu li a:link,
+#menu li a:visited {
     padding: 5px;
     color: #555;
     text-decoration: none;
     border: 0;
-}
-
-#menu li a:hover, #menu li a:active {
-    color: #21759b !important;
 }
 
@@ -702 +704 @@
 }
 
-.videowrapper a:hover, .videowrapper a:active {
+.videowrapper a:hover, .videowrapper a:focus, .videowrapper a:active {
     color: #d54e21;
+}
+
+.videowrapper a:focus {
+    text-decoration: underline;
 }
 
@@ -987 +993 @@
 }
 
-.thevideo .ui-tabs a:hover span {
+.thevideo .ui-tabs a:hover span,
+.thevideo .ui-tabs a:focus span {
     background-color: none !important;
 }
@@ -1203 +1210 @@
 }
 
-.ui-tabs a:hover {
+.ui-tabs a:hover,
+.ui-tabs a:focus {
     color: #d54e21;
     cursor: pointer;
@@ -1286 +1294 @@
 }
 
-.searchwordcamptv form #wordcampsubmit:hover {
+.searchwordcamptv form #wordcampsubmit:hover,
+.searchwordcamptv form #wordcampsubmit:focus {
     background: #B3B3B3;
     color: #f7f7f7;
@@ -1403 +1412 @@
 }
 
-.linklist h3 a:hover, .linklist h3 a:active {
+.linklist h3 a:hover, .linklist h3 a:focus, .linklist h3 a:active {
     color: #d54e21;
+}
+
+.linklist h3 a:focus {
+    text-decoration: underline;
 }
 
@@ -1418 +1431 @@
 }
 
-.linklist .more:hover, .linklist .more:active {
+.linklist .more:hover, .linklist .more:focus, .linklist .more:active {
     color: #d54e21;
+}
+
+.linklist .more:focus {
+    text-decoration: underline;
 }
 
@@ -1491 +1508 @@
 }
 
-#comments a:hover, #comments a:active {
+#comments a:hover, #comments a:focus, #comments a:active {
     color: #d54e21;
+}
+
+#comments a:focus {
+    text-decoration: underline;
 }
 
 #comments .commenttext a, #comments .commenttext a:link, #comments .commenttext a:visited {
     color: #21759b;;
-}
-
-#comments a:hover, #comments a:active {
-    color: #d54e21;
 }
 
@@ -1868 +1885 @@
 }
 
-#menu li a:hover {
-    color: #d54e21 !important;
+#menu li a:hover,
+#menu li a:focus {
+    color: #d54e21;
 }
 
@@ -1966 +1984 @@
 }
 
-.breadcrumb a:hover {
+.breadcrumb a:hover,
+.breadcrumb a:focus {
     color: #464646;
+}
+
+.breadcrumb a:focus {
+    text-decoration: underline;
 }
 
@@ -2055 +2078 @@
 }
 
-.wptv-hero .main-video .video-event a:hover {
+.wptv-hero .main-video .video-event a:hover,
+.wptv-hero .main-video .video-event a:focus {
     color: #fff;
+}
+
+.wptv-hero .main-video .video-event a:focus {
+    text-decoration: underline;
 }
 
@@ -2532 +2560 @@
 
 .menu-footer-container a:hover,
-#footer div.menu a:hover {
+.menu-footer-container a:focus,
+#footer div.menu a:hover,
+#footer div.menu a:focus {
     color: #21759b;
+}
+.menu-footer-container a:focus,
+#footer div.menu a:focus {
+    text-decoration: underline;
 }