Bug 1409148 - Improve styling of the plugin Click-to-Play overlay. r=johannh
☠☠ backed out by a91a0cde388f ☠ ☠
authorFelipe Gomes <felipc@gmail.com>
Thu, 09 Nov 2017 18:35:14 -0200
changeset 444341 331d0da78f3ef01dcd6cda0156b26814f0ab4527
parent 444340 86d7f89e9cfbe228ece390c74d06ddf60bbb56c6
child 444342 bd2913f16345b2e0df4743ba184d7a379f87707e
push id1618
push userCallek@gmail.com
push dateThu, 11 Jan 2018 17:45:48 +0000
treeherdermozilla-release@882ca853e05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1409148
milestone58.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 1409148 - Improve styling of the plugin Click-to-Play overlay. r=johannh MozReview-Commit-ID: I3P65jCm06j
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);
+}