Bug 1409148 - Improve styling of the plugin Click-to-Play overlay. r=johannh
authorFelipe Gomes <felipc@gmail.com>
Fri, 10 Nov 2017 14:05:04 -0200
changeset 444562 b150d1cc8dff64715ba8114a83c9c0a5ab06017d
parent 444561 c21d184abbb02e743ad0a9fb7ef117779d0e7a52
child 444563 8c35f0e7de97155392676d3d6bdb45a873842d37
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: 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);
+}