Bug 1341045 - Remove broken CSS overrides from responsive.html. r=jryans
MozReview-Commit-ID: KCb8G3agjE4
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -67,27 +67,23 @@ body,
*/
.container {
background-color: var(--theme-toolbar-background);
border: 1px solid var(--theme-splitter-color);
}
.toolbar-button {
- margin: 1px 3px;
- width: 16px;
- height: 16px;
- /* Reset styles from .devtools-button */
- min-width: initial;
- min-height: initial;
- align-self: center;
+ margin: 0;
+ padding: 0;
}
-.toolbar-button:active::before {
- filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
+.toolbar-button:active::before,
+.toolbar-button.active::before {
+ filter: var(--checked-icon-filter);
}
select {
-moz-appearance: none;
background-color: var(--theme-toolbar-background);
background-image: var(--viewport-selection-arrow);
background-position: 100% 50%;
background-repeat: no-repeat;
@@ -150,48 +146,35 @@ select > option.divider {
-moz-user-select: none;
}
#global-toolbar > .title {
border-right: 1px solid var(--theme-splitter-color);
padding: 1px 6px 0 2px;
}
-#global-toolbar .toolbar-button {
- margin: 0 0 0 5px;
- padding: 0;
-}
-
-#global-toolbar .toolbar-button,
-#global-toolbar .toolbar-button::before {
+#global-toolbar > .toolbar-button::before {
width: 12px;
height: 12px;
}
#global-touch-simulation-button::before {
background-image: url("./images/touch-events.svg");
- margin: -6px 0 0 -6px;
-}
-
-#global-touch-simulation-button.active::before {
- filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
}
#global-screenshot-button::before {
background-image: url("./images/screenshot.svg");
- margin: -6px 0 0 -6px;
}
#global-exit-button::before {
background-image: url("./images/close.svg");
- margin: -6px 0 0 -6px;
}
#global-screenshot-button:disabled {
- filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
+ filter: var(--checked-icon-filter);
opacity: 1 !important;
}
#global-network-throttling-selector {
height: 15px;
padding-left: 0;
width: 103px;
}