Bug 1409148 - Improve styling of the plugin Click-to-Play overlay. r=johannh draft
authorFelipe Gomes <felipc@gmail.com>
Fri, 10 Nov 2017 14:05:04 -0200
changeset 696399 d1f612366905fb249b6202ee237c728a4422c681
parent 696398 467fbca59d490e0aca89d6bc10bf309ca701a7a3
child 696400 b86c5b28b7152ac6971fc631ba62d3296dca4c7e
push id88703
push userfelipc@gmail.com
push dateFri, 10 Nov 2017 16:09:56 +0000
reviewersjohannh
bugs1409148
milestone58.0a1
Bug 1409148 - Improve styling of the plugin Click-to-Play overlay. r=johannh MozReview-Commit-ID: RnwWDIw2Sm
toolkit/themes/shared/plugins/pluginProblem.css
--- a/toolkit/themes/shared/plugins/pluginProblem.css
+++ b/toolkit/themes/shared/plugins/pluginProblem.css
@@ -3,16 +3,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace html url(http://www.w3.org/1999/xhtml);
 
 /* These styles affect only the bound element, not other page content. */
 /* Keep any changes to these styles in sync with plugin-doorhanger.inc.css */
 .mainBox {
  --grey-10: #f9f9fa;
+ --grey-60: #4a4a4f;
+ --grey-70: #38383d;
 }
 
 .mainBox {
   font: message-box;
   font-size: 12px;
   text-align: center;
   display: table;
   width: 100%;
@@ -26,22 +28,20 @@
   display: table-cell;
   box-sizing: border-box;
   padding: 5px;
   vertical-align: middle;
   width: 100%;
   height: 100%;
 }
 :-moz-handler-vulnerable-updatable .hoverBox:active,
-:-moz-handler-vulnerable-no-update .hoverBox:active,
-:-moz-handler-clicktoplay .hoverBox:active {
+:-moz-handler-vulnerable-no-update .hoverBox:active {
   background-color: rgb(65, 65, 65);
 }
 
-:-moz-handler-clicktoplay .hoverBox:active .msgClickToPlay,
 :-moz-handler-vulnerable-updatable .hoverBox:active .msgClickToPlay,
 :-moz-handler-vulnerable-no-update .hoverBox:active .msgClickToPlay {
   color: red;
 }
 
 :-moz-handler-vulnerable-updatable .hoverBox,
 :-moz-handler-vulnerable-no-update .hoverBox,
 :-moz-handler-blocked .hoverBox,
@@ -92,20 +92,16 @@ a .icon,
 
 @media (min-resolution: 1.1dppx) {
   .throbber {
     background-image: url(chrome://global/skin/icons/loading@2x.png);
     background-size: 16px;
   }
 }
 
-.msgClickToPlay {
-  text-decoration: underline;
-}
-
 /* on desktop, don't ever show the tap-to-play UI: that is for mobile only */
 :-moz-handler-clicktoplay .msgTapToPlay,
 a .msgTapToPlay  {
   display: none;
 }
 
 .submitStatus div {
   min-height: 19px; /* height of biggest line (with throbber) */
@@ -198,8 +194,27 @@ a .msgTapToPlay  {
 }
 
 :-moz-handler-vulnerable-updatable .action-link {
   background-color: #a81b0c;
 }
 :-moz-handler-vulnerable-updatable .action-link:active {
   background-color: #801409;
 }
+
+/* New Photon styling
+ *
+ * At the moment, these rules are written to only override
+ * :-moz-handler-clicktoplay styling. Once we finish the
+ * redesign for all cases, we can change the CSS directly
+ * above instead of writing these super-specific rules.
+ */
+:-moz-handler-clicktoplay .mainBox {
+  background-color: var(--grey-70);
+}
+
+:-moz-handler-clicktoplay .msgClickToPlay {
+  font-size: 13px;
+}
+
+:-moz-handler-clicktoplay .hoverBox:active {
+  background-color: var(--grey-60);
+}