Bug 1409148 - Improve styling of the plugin Click-to-Play overlay. r=johannh
MozReview-Commit-ID: RnwWDIw2Sm
--- 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);
+}