Bug 1148050 - Make Reader View type panel look closer to the spec. ui-r=mmaslaney, r=Unfocused, a=sledru
authorBlake Winton <bwinton@latte.ca>
Sat, 28 Mar 2015 10:59:49 -0400
changeset 258275 7b6bd63b68e5
parent 258274 f8e17839eac9
child 258276 b8343ae0a9dc
push id4633
push userryanvm@gmail.com
push date2015-04-06 15:44 +0000
treeherdermozilla-beta@e749a39aaf5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmmaslaney, Unfocused, sledru
bugs1148050
milestone38.0
Bug 1148050 - Make Reader View type panel look closer to the spec. ui-r=mmaslaney, r=Unfocused, a=sledru
toolkit/themes/windows/global/aboutReader.css
--- a/toolkit/themes/windows/global/aboutReader.css
+++ b/toolkit/themes/windows/global/aboutReader.css
@@ -290,34 +290,30 @@ body.loaded {
 .dropdown li {
   margin: 0;
   padding: 0;
 }
 
 /*======= Font style popup =======*/
 
 .dropdown-popup {
-  min-width: 250px;
+  min-width: 300px;
   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 1px 0 1px solid #b5b5b5;
   box-shadow: 0 1px 12px #666;
 }
 
 .dropdown-popup > hr {
-  width: 100%;
-  height: 0;
-  border: 0;
-  border-top: 1px solid #b5b5b5;
-  margin: 0;
+  display: none;
 }
 
 .open > .dropdown-popup {
   visibility: visible;
 }
 
 .dropdown-arrow {
   position: absolute;
@@ -348,55 +344,75 @@ body.loaded {
 #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;
-  padding: 10px;
+  border: 0;
 }
 
 #font-type-buttons > button,
 #font-size-buttons > button {
   width: 50%;
   background-color: transparent;
+  border-left: 1px solid #B5B5B5;
+  border-bottom: 1px solid #B5B5B5;
 }
 
 #color-scheme-buttons > button {
   width: 33.33%;
   font-size: 14px;
 }
 
+#color-scheme-buttons > .dark-button {
+  margin-top: -1px;
+  height: 61px;
+}
+
 #font-type-buttons > button:first-child,
-#font-size-buttons > button:first-child,
-#color-scheme-buttons > button:first-child {
+#font-size-buttons > button:first-child {
   border-left: 0;
 }
 
 #font-type-buttons > button {
   display: inline-block;
-  font-size: 48px;
+  font-size: 58px;
+  height: 100px;
+}
+
+/* Make the serif button content the same size as the sans-serif button content. */
+#font-type-buttons > .serif-button {
+  padding-top: 1px;
+  font-size: 60px;
+}
+
+#font-size-buttons > button,
+#color-scheme-buttons > button {
+  height: 60px;
 }
 
 #font-type-buttons > button:active:hover,
 #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:active:hover,
+#font-type-buttons > button.selected {
+  border-bottom: 1px solid #FC6420;
+}
+
 #font-type-buttons > button > div {
   color: #666;
   font-size: 12px;
+  margin-top: -4px;
 }
 
 .button:hover,
 #font-size-buttons > button:hover,
 #font-type-buttons > button:hover {
   background-color: #ebebeb;
 }
 
@@ -415,17 +431,16 @@ body.loaded {
 .serif-button {
   font-family: "Charis SIL", Georgia, "Times New Roman", serif;
 }
 
 .minus-button,
 .plus-button {
   background-color: transparent;
   border: 0;
-  height: 50px;
   background-size: 18px 18px;
   background-repeat: no-repeat;
   background-position: center;
 }
 
 .footer {
   height: 64px;
   background-color: #ebebeb;