fix some parsing errors etc. and make new HTML-based buttons with ::before work in...

[themes.git] / LCARStrek / devtools / dark-theme.css

diff --git a/LCARStrek/devtools/dark-theme.css b/LCARStrek/devtools/dark-theme.css
index 818ce158acfbf71b39a506cc341691912ab32038..956270f7a2d96f871d92cb82568d87cfd138b373 100644 (file)
--- a/LCARStrek/devtools/dark-theme.css
+++ b/LCARStrek/devtools/dark-theme.css
@@ -3,6 +3,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+@import url(common.css);
+
 /* Colors are taken from:
  * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.
  * Changes should be kept in sync with commandline.css and commandline.inc.css.
@@ -14,7 +16,7 @@
   --theme-contrast-border: #A09090;
   --theme-contrast-background2: #795900;
 
-/*  --theme-tab-toolbar-background: #.252c33; */
+  --theme-tab-toolbar-background: #402800;
   --theme-toolbar-background: #000000;
   --theme-hover-background: #FFCF00;
   --theme-hover-color: #000000;
@@ -255,7 +257,8 @@ body, html {
  * Best effort to match the existing theme, some of the colors
  * are duplicated here to prevent weirdness in the main theme. */
 
-.CodeMirror { /* Inherit platform specific font sizing and styles */
+.CodeMirror,
+.CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
   font-family: inherit;
   font-size: inherit;
   background: transparent;
@@ -618,9 +621,9 @@ div.CodeMirror span.eval-text {
   border: 0 solid var(--theme-splitter-color);
   background: var(--theme-toolbar-background);
   color: var(--theme-body-color);
-  margin: 0;
-  padding: 0;
-  min-width: 32px;
+  margin: 0 1px;
+  padding: 0 6px;
+  min-width: 16px;
   min-height: 18px;
   /* The icon is absolutely positioned in the button using ::before */
   position: relative;
@@ -671,6 +674,18 @@ div.CodeMirror span.eval-text {
   }
 }
 
+:root {
+  --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
+}
+
+.devtools-button.devtools-clear-icon::before {
+  background-image: var(--clear-icon-url);
+}
+
+.devtools-toolbarbutton.devtools-clear-icon {
+  list-style-image: var(--clear-icon-url);
+}
+
 /* Text input */
 
 .devtools-textinput,
@@ -800,6 +815,10 @@ div.CodeMirror span.eval-text {
   display: none;
 }
 
+#toolbox-close::before {
+  background-image: url("chrome://devtools/skin/close@2x.png");
+}
+
 /* In-tools sidebar */
 
 .devtools-sidebar-tabs {
@@ -902,14 +921,17 @@ div.CodeMirror span.eval-text {
   background-position: -16px center;
 }
  
+#toolbox-dock-bottom::before,
 #toolbox-dock-bottom > image {
   background-image: url("chrome://devtools/skin/dock-bottom@2x.png");
 }
  
+#toolbox-dock-side::before,
 #toolbox-dock-side > image {
   background-image: url("chrome://devtools/skin/dock-side@2x.png");
 }
 
+#toolbox-dock-window::before,
 #toolbox-dock-window > image {
   background-image: url("chrome://devtools/skin/undock@2x.png");
 }
@@ -950,6 +972,7 @@ div.CodeMirror span.eval-text {
 
 #toolbox-controls-separator {
   margin: 0;
+  width: 1px;
 }
 
 /* Command buttons */
@@ -964,6 +987,9 @@ div.CodeMirror span.eval-text {
 .command-button:hover:active {
 }
 
+#toolbox-close::before,
+.toolbox-dock-button::before,
+.command-button::before,
 .command-button > image {
   width: 16px;
   height: 16px;
@@ -972,6 +998,14 @@ div.CodeMirror span.eval-text {
   background-repeat: no-repeat;
 }
 
+#toolbox-close:hover::before,
+#toolbox-close:hover:active::before,
+.toolbox-dock-button:hover::before,
+.toolbox-dock-button:hover:active::before,
+.command-button:hover::before,
+.command-button:hover:active::before,
+.command-button[checked=true]::before,
+.command-button[open=true]::before,
 .command-button:hover > image,
 .command-button:hover:active > image,
 .command-button[checked=true] > image,
@@ -979,46 +1013,57 @@ div.CodeMirror span.eval-text {
   background-position: -16px center;
 }
 
+#command-button-paintflashing::before,
 #command-button-paintflashing > image {
   background-image: url("chrome://devtools/skin/command-paintflashing.png");
 }
 
+#command-button-screenshot::before,
 #command-button-screenshot > image {
   background-image: url("chrome://devtools/skin/command-screenshot.png");
 }
 
+#command-button-responsive::before,
 #command-button-responsive > image {
   background-image: url("chrome://devtools/skin/command-responsivemode.png");
 }
 
+#command-button-tilt::before,
 #command-button-tilt > image {
   background-image: url("chrome://devtools/skin/command-tilt.png");
 }
 
+#command-button-scratchpad::before,
 #command-button-scratchpad > image {
   background-image: url("chrome://devtools/skin/command-scratchpad.png");
 }
 
+#command-button-pick::before,
 #command-button-pick > image {
   background-image: url("chrome://devtools/skin/command-pick.png");
 }
 
+#command-button-frames::before,
 #command-button-frames > image {
   background-image: url("chrome://devtools/skin/command-frames.png");
 }
 
+#command-button-splitconsole::before,
 #command-button-splitconsole > image {
   background-image: url("chrome://devtools/skin/command-console.png");
 }
 
+#command-button-eyedropper::before,
 #command-button-eyedropper > image {
   background-image: url("chrome://devtools/skin/command-eyedropper.png");
 }
 
+#command-button-rulers::before,
 #command-button-rulers > image {
   background-image: url("chrome://devtools/skin/command-rulers.png");
 }
 
+#command-button-measure::before,
 #command-button-measure > image {
   background-image: url("chrome://devtools/skin/images/command-measure.png");
 }
@@ -1075,8 +1120,9 @@ div.CodeMirror span.eval-text {
 }
 
 #toolbox-tabs {
-  margin: 0 2px;
-  -moz-padding-start: 3px;
+  padding-inline-start: 3px;
+  margin-inline-start: 2px; /* this is only needed for the old button design */
+  margin-inline-end: 3px; /* this is for the new ::before-based button design */
   background-color: #000000;
   color: #FFCF00;
 }
@@ -1087,6 +1133,7 @@ div.CodeMirror span.eval-text {
   visibility: collapse;
 }
 
+#toolbox-deck[selectedIndex] > .toolbox-panel, /* workaround for Firefox 47 and older */
 .toolbox-panel[selected] {
   visibility: visible;
 }
@@ -1138,9 +1185,14 @@ div.CodeMirror span.eval-text {
   -moz-margin-start: 0;
 }
 
+#toolbox-picker-container {
+  margin-inline-start: 1px;
+}
+
 #toolbox-option-container {
   background-color: #000000;
-  -moz-padding-start: 3px;
+  padding-inline-start: 3px;
+  margin-inline-end: 1px;
 }
 
 #toolbox-tab-options {