Bug 1142298 - Fix reader view font/color control glitches. r=gijs, a=sledru
authorJustin Dolske <dolske@mozilla.com>
Wed, 18 Mar 2015 16:35:47 -0700
changeset 258263 c0496dd61e60
parent 258262 e2efc8489eba
child 258264 a1214cc8c57e
push id4632
push userryanvm@gmail.com
push date2015-04-06 15:16 +0000
treeherdermozilla-beta@887be7f12f1e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgijs, sledru
bugs1142298
milestone38.0
Bug 1142298 - Fix reader view font/color control glitches. r=gijs, a=sledru
toolkit/themes/windows/global/aboutReader.css
--- a/toolkit/themes/windows/global/aboutReader.css
+++ b/toolkit/themes/windows/global/aboutReader.css
@@ -281,17 +281,17 @@ body {
   min-width: 250px;
   text-align: start;
   position: absolute;
   left: 48px; /* offset to account for toolbar width */
   z-index: 1000;
   background-color: #FBFBFB;
   visibility: hidden;
   border-radius: 4px;
-  border: 1px solid #B5B5B5;
+  border: 1px 1px 0 1px solid #B5B5B5;
   box-shadow: 0px 1px 12px #666;
 }
 
 .dropdown-popup > hr {
   width: 100%;
   height: 0px;
   border: 0px;
   border-top: 1px solid #B5B5B5;
@@ -314,16 +314,29 @@ body {
 
 #font-type-buttons,
 #font-size-buttons,
 #color-scheme-buttons {
   display: flex;
   flex-direction: row;
 }
 
+#font-type-buttons > button:first-child {
+  border-top-left-radius: 3px;
+}
+#font-type-buttons > button:last-child {
+  border-top-right-radius: 3px;
+}
+#color-scheme-buttons > button:first-child {
+  border-bottom-left-radius: 3px;
+}
+#color-scheme-buttons > button:last-child {
+  border-bottom-right-radius: 3px;
+}
+
 #font-type-buttons > button,
 #font-size-buttons > button,
 #color-scheme-buttons > button {
   text-align: center;
   border-left: 1px solid #B5B5B5;
   border-right: 0;
   border-top: 0;
   border-bottom: 0;
@@ -332,44 +345,46 @@ body {
 
 #font-type-buttons > button,
 #font-size-buttons > button {
   width: 50%;
   background-color: transparent;
 }
 
 #color-scheme-buttons > button {
-  width: 33%;
+  width: 33.33%;
   font-size: 14px;
 }
 
 #font-type-buttons > button:first-child,
 #font-size-buttons > button:first-child,
 #color-scheme-buttons > button:first-child {
   border-left: 0px;
 }
 
 #font-type-buttons > button {
   display: inline-block;
   font-size: 48px;
-  border-bottom: 3px solid transparent;
 }
 
 #font-type-buttons > button:active:hover,
-#font-type-buttons > button.selected {
-  border-bottom: 3px solid #FC6420;
+#font-type-buttons > button.selected,
+#color-scheme-buttons > button:active:hover,
+#color-scheme-buttons > button.selected {
+  box-shadow: inset 0 -3px 0 0 #FC6420;
 }
 
 #font-type-buttons > button > div {
   color: #666;
   font-size: 12px;
 }
 
 .button:hover,
-#font-size-buttons > button:hover {
+#font-size-buttons > button:hover,
+#font-type-buttons > button:hover {
   background-color: #EBEBEB;
 }
 
 .dropdown.open,
 .button:active,
 #font-size-buttons > button:active,
 #font-size-buttons > button.selected {
   background-color: #DADADA;