Bug 1642166 - Vertically align the Reader control hover labels r=Gijs
authorItiel <itiel_yn8@walla.com>
Thu, 04 Jun 2020 11:53:49 +0000
changeset 597968 bef16d556f0946c0f9210b1be1b522fff5784e22
parent 597967 dd3769eed4d11f8b4c6fdb3a5335d6f3302f9a03
child 597969 5c1025c06228cdae0e3f56bf45d1c804d5d2fe1b
push id13310
push userffxbld-merge
push dateMon, 29 Jun 2020 14:50:06 +0000
treeherdermozilla-beta@15a59a0afa5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1642166
milestone79.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1642166 - Vertically align the Reader control hover labels r=Gijs Also cleanup the CSS a bit Differential Revision: https://phabricator.services.mozilla.com/D77598
toolkit/themes/shared/aboutReader.css
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -22,17 +22,16 @@
   --content-width: 22em;
   --line-height: 1.6em;
   --tooltip-background: var(--grey-90-a80);
   --tooltip-foreground: white;
   --toolbar-button-hover: var(--grey-90-a10);
   --toolbar-button-active: var(--grey-90-a20);
 }
 
-
 body {
   --main-background: #fff;
   --main-foreground: #333;
   --toolbar-border: var(--grey-90-a20);
   --toolbar-box-shadow: var(--grey-90-a10);
   --popup-button-hover: hsla(0,0%,70%,.4);
   --popup-button-active: hsla(240,5%,5%,.15);
   --popup-bgcolor: white;
@@ -57,17 +56,17 @@ body.dark {
   --main-background: #333;
   --main-foreground: #eee;
   --toolbar-border: #4a4a4b;
   --toolbar-box-shadow: black;
   --toolbar-button-hover: var(--grey-90-a30);
   --toolbar-button-active: var(--grey-90-a80);
   --popup-button-active: hsla(0,0%,70%,.6);
   --popup-bgcolor: #4c4a50;
-  --popup-button:  #5c5c61;
+  --popup-button: #5c5c61;
   --popup-line: #5c5c61;
   --opaque-popup-border: #434146;
   --font-value-border: #656468;
   --font-color: #fff;
   --icon-fill: #fff;
   --icon-disabled-fill: #ffffff66;
   --tooltip-background: black;
   --tooltip-foreground: white;
@@ -197,24 +196,24 @@ body.dark blockquote {
   width: 100%;
   margin: 30px 0;
   padding: 0;
 }
 
 .header > .credits {
   font-size: 0.9em;
   line-height: 1.48em;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
   padding: 0;
   font-style: italic;
 }
 
 .header > .meta-data {
   font-size: 0.65em;
-  margin: 0 0 15px 0;
+  margin: 0 0 15px;
 }
 
 .reader-estimated-time {
   text-align: match-parent;
 }
 
 /*======= Controls toolbar =======*/
 
@@ -328,18 +327,19 @@ body.dark blockquote {
 .button:active {
   background-color: var(--toolbar-button-active);
   color: var(--active-color);
   fill: var(--active-color);
 }
 
 .hover-label {
   position: absolute;
-  top: 6px;
+  top: 4px;
   inset-inline-start: 36px;
+  line-height: 16px;
   white-space: pre; /* make sure we don't wrap */
   background-color: var(--tooltip-background);
   color: var(--tooltip-foreground);
   padding: 4px 8px;
   border-radius: 2px;
   visibility: hidden;
   pointer-events: none;
 }
@@ -407,17 +407,17 @@ button:disabled {
 
 .dropdown-arrow {
   position: absolute;
   height: 24px;
   width: 16px;
   inset-inline-start: -16px;
   background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
   display: block;
-  -moz-context-properties:  fill, stroke;
+  -moz-context-properties: fill, stroke;
   fill: var(--popup-bgcolor);
   stroke: var(--opaque-popup-border);
   pointer-events: none;
 }
 
 .dropdown-arrow:dir(rtl) {
   transform: scaleX(-1);
 }
@@ -640,17 +640,17 @@ button:disabled {
   .moz-reader-content code,
   .moz-reader-content pre,
   .moz-reader-content blockquote,
   .moz-reader-content ul,
   .moz-reader-content ol,
   .moz-reader-content li,
   .moz-reader-content figure,
   .moz-reader-content .wp-caption {
-    margin: 0 0 10px 0 !important;
+    margin: 0 0 10px !important;
     padding: 0 !important;
   }
 }
 
 .moz-reader-content h1,
 .moz-reader-content h2,
 .moz-reader-content h3 {
   font-weight: bold;
@@ -696,17 +696,17 @@ button:disabled {
 .moz-reader-content code,
 .moz-reader-content pre,
 .moz-reader-content blockquote,
 .moz-reader-content ul,
 .moz-reader-content ol,
 .moz-reader-content li,
 .moz-reader-content figure,
 .moz-reader-content .wp-caption {
-  margin: -10px -10px 20px -10px;
+  margin: -10px -10px 20px;
   padding: 10px;
   border-radius: 5px;
 }
 
 .moz-reader-content li {
   margin-bottom: 0;
 }
 
@@ -718,18 +718,17 @@ button:disabled {
 .moz-reader-content p > img:only-child,
 .moz-reader-content p > a:only-child > img:only-child,
 .moz-reader-content .wp-caption img,
 .moz-reader-content figure img {
   display: block;
 }
 
 .moz-reader-content img[moz-reader-center] {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 .moz-reader-content .caption,
 .moz-reader-content .wp-caption-text
 .moz-reader-content figcaption {
   font-size: 0.9em;
   line-height: 1.48em;
   font-style: italic;