second and last part of syncing LCARStrek with Firefox 49/50 windows theme changes

[themes.git] / LCARStrek / devtools / toolbars.css

diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css
index 37fd6c6ac8dc7e8880896d5ea66194e251c4903e..a7dfad96924df149e382f697c5f355ddb44b8738 100644 (file)
--- a/LCARStrek/devtools/toolbars.css
+++ b/LCARStrek/devtools/toolbars.css
@@ -13,9 +13,9 @@
   --searchbox-border-color: #9C9CFF;
   --searcbox-no-match-background-color: #400000;
   --searcbox-no-match-border-color: #FF0000;
-  --magnifying-glass-image: url(images/magnifying-glass-light.png);
-  --magnifying-glass-image-2x: url(images/magnifying-glass-light@2x.png);
-  --tool-options-image: url(images/tool-options.svg);
+  --magnifying-glass-image: url(images/search.svg);
+  --filter-image: url(images/filter.svg);
+  --tool-options-image: url(images/tool-options-tbutton.svg);
   --close-button-image: url(chrome://devtools/skin/images/close.svg);
   --icon-filter: invert(1);
   --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
@@ -37,12 +37,17 @@
   --command-measure-image: url(images/command-measure.svg);
 }
 
+#toolbox-container {
+ padding-top: 3px;
+}
+
 /* Toolbars */
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs {
 }
 
 .devtools-toolbar {
+  border-bottom: 3px solid var(--theme-body-background);
 }
 
 .devtools-toolbar checkbox {
@@ -86,7 +91,11 @@
 .devtools-button {
   margin: 0;
   padding: 0;
+  border: none;
+  border-radius: 3px;
   min-width: 16px;
+  height: 100%;
+  margin-inline-start: 2px;
   background: var(--theme-toolbar-background);
   color: var(--theme-body-color);
   /* The icon is absolutely positioned in the button using ::before */
@@ -129,6 +138,24 @@
   border: none;
 /*  min-height: 32px; */
   background-color: var(--theme-button-background);
+  color: var(--theme-button-color);
+  border-radius: 300px;
+}
+
+.devtools-button[standalone]:hover,
+.devtools-button[data-standalone]:hover,
+.devtools-toolbarbutton[standalone]:hover,
+.devtools-toolbarbutton[data-standalone]:hover {
+  background-color: var(--theme-hover-background);
+  color: var(--theme-hover-color);
+}
+
+.devtools-button[standalone]:hover:active,
+.devtools-button[data-standalone]:hover:active,
+.devtools-toolbarbutton[standalone]:hover:active,
+.devtools-toolbarbutton[data-standalone]:hover:active {
+  background-color: var(--theme-active-background);
+  color: var(--theme-active-color);
 }
 
 .devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
@@ -149,8 +176,8 @@
 }
 
 #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
-  -moz-padding-start: 5px;
-  -moz-padding-end: 5px;
+  padding-inline-start: 5px;
+  padding-inline-end: 5px;
   min-width: inherit;
 }
 
@@ -163,7 +190,7 @@
 }
 
 .devtools-toolbar .devtools-toolbarbutton {
-  -moz-margin-start: 2px;
+  margin-inline-start: 2px;
 }
 
 .devtools-toolbarbutton > .toolbarbutton-icon {
@@ -208,15 +235,49 @@
 /*  opacity: 0.5 !important;*/
 }
 
+.devtools-button[standalone]::before,
+.devtools-button[data-standalone]::before,
+.devtools-toolbarbutton[standalone]::before,
+.devtools-toolbarbutton[data-standalone]::before,
+.devtools-button:not([disabled]):hover::before,
+.devtools-button:not([disabled]):hover:active::before,
 .devtools-button[checked]:empty::before,
 .devtools-button[open]:empty::before,
-.devtools-toolbarbutton:not([label]):hover > image,
-.devtools-toolbarbutton:not([label]):hover:active > image,
-.devtools-toolbarbutton:not([label])[checked=true] > image,
-.devtools-toolbarbutton:not([label])[open=true] > image {
+.devtools-button[standalone] > image,
+.devtools-button[data-standalone] > image,
+.devtools-toolbarbutton[standalone] > image,
+.devtools-toolbarbutton[data-standalone] > image,
+.devtools-toolbarbutton:not([disabled]):hover > image,
+.devtools-toolbarbutton:not([disabled]):hover:active > image,
+.devtools-toolbarbutton[checked=true] > image,
+.devtools-toolbarbutton[open=true] > image {
+  filter: url(images/filters.svg#checked-icon-state);
+}
+
+#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,
+#toolbox-close:hover > image,
+#toolbox-close:hover:active > image,
+.toolbox-dock-button:hover > image,
+.toolbox-dock-button:hover:active > image,
+.command-button:hover > image,
+.command-button:hover:active > image,
+.command-button[checked=true] > image,
+.command-button[open=true] > image {
   filter: url(images/filters.svg#checked-icon-state);
 }
 
+.devtools-button[disabled]::before,
+.devtools-toolbarbutton[disabled] > image {
+  filter: url(images/filters.svg#disabled-icon-state);
+}
+
 /* Icon-and-text buttons */
 .devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
   margin-inline-start: .5em !important;
@@ -290,6 +351,7 @@
 /* Text input */
 
 .devtools-textinput,
+.devtools-filterinput,
 .devtools-searchinput {
 /*  -moz-appearance: none;
   margin: 1 3px;
@@ -297,6 +359,8 @@
   border-radius: 2px;
   padding: 4px 6px;
   border-color: var(--theme-splitter-color);*/
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 :root[platform="mac"] .devtools-textinput,
@@ -308,8 +372,8 @@
 /*  margin-top: 1px;
   margin-bottom: 1px;
   padding: 0;*/
-  -moz-padding-start: 22px;
-  -moz-padding-end: 4px;
+  padding-inline-start: 22px;
+  padding-inline-end: 4px;
   background-image: var(--magnifying-glass-image);
   background-position: 8px center;
   background-size: 11px 11px;
@@ -318,7 +382,7 @@
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl),
-.devtools-searchinput:-moz-dir(rtl) {
+.devtools-searchinput:dir(rtl) {
   background-position: calc(100% - 8px) center;
 }
 
@@ -360,7 +424,7 @@
 .devtools-rule-searchbox[filled] {
   background-color: var(--searchbox-background-color);
   border-color: var(--searchbox-border-color);
-  -moz-padding-end: 23px;
+  padding-inline-end: 23px;
 }
 
 .devtools-style-searchbox-no-match {
@@ -385,7 +449,7 @@
   background-color: transparent;
 }
 
-.devtools-searchinput-clear:-moz-dir(rtl) {
+.devtools-searchinput-clear:dir(rtl) {
   right: unset;
   left: 7px;
 }
@@ -414,12 +478,6 @@
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-@media (min-resolution: 1.1dppx) {
-  .devtools-searchinput {
-    background-image: var(--magnifying-glass-image-2x);
-  }
-}
-
 /* Close button */
 
 .devtools-closebutton {
@@ -438,6 +496,11 @@
   background-repeat: no-repeat;
 }
 
+button#toolbox-close {
+  margin-inline-start: 2px;
+  margin-inline-end: 10px;
+}
+
 .devtools-closebutton > .toolbarbutton-icon {
   /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
      use evil CSS to give the impression of smaller content */
@@ -449,7 +512,8 @@
 
 /* In-tools sidebar */
 
-.devtools-sidebar-tabs {
+div.devtools-sidebar-tabs {
+  height: 100%;
 }
 
 .devtools-sidebar-tabs > tabpanels {
@@ -469,7 +533,7 @@
   padding: 0 4px;
   margin: 0;
   border-width: 0 0 1px 0;
-  -moz-border-start-width: 1px;
+  border-inline-start-width: 1px;
   border-style: solid;*/
 }
 
@@ -495,11 +559,11 @@
 }
 
 .devtools-sidebar-tabs tabs > tab:first-of-type {
-  -moz-margin-start: 0;
+  margin-inline-start: 0;
 }
 
 .devtools-sidebar-tabs tabs > tab:last-of-type {
-  -moz-border-end-width: 0;
+  border-inline-end-width: 0;
 }
 
 .devtools-sidebar-tabs tabs > tab {
@@ -601,13 +665,18 @@
 .command-button {
   -moz-appearance: none;
   border: none;
-/*  padding: 0 8px; */
-/*  margin: 0; */
-  width: 16px;
+  margin-inline-start: 2px;
+  width: 20px;
+  height: 100%;
   position: relative;
   -moz-user-focus: normal;
 }
 
+button.toolbox-dock-button,
+button.command-button {
+  padding: 8px;
+}
+
 .command-button:hover {
 /*  background-color: var(--toolbar-tab-hover); */
 }
@@ -630,21 +699,6 @@
   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,
-.command-button[open=true] > image {
-  filter: url(images/filters.svg#checked-icon-state);
-}
-
 /* Toolbox buttons images */
 
 #command-button-paintflashing > image,
@@ -730,9 +784,9 @@
   max-width: 100px;
   color: #000000;
   margin: 0;
-  -moz-margin-end: 3px;
+  margin-inline-end: 3px;
   padding: 1px;
-  -moz-padding-start: 3px;
+  padding-inline-start: 3px;
   background-color: #C09070;
   border-radius: 8px 8px 0 0;
 }
@@ -773,8 +827,8 @@
 }
 
 .devtools-tab > image {
-  -moz-margin-end: 0;
-  -moz-margin-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
 }
 
 #toolbox-picker-container {
@@ -792,7 +846,7 @@
 }
 
 #toolbox-tab-options > image {
-  -moz-margin-end: 3px;
+  margin-inline-end: 3px;
 }
 
 .devtools-tab:not([highlighted]) > .highlighted-icon,
@@ -822,7 +876,7 @@
 #toolbox-option-container .devtools-tab {
 /*  border-color: transparent;
   border-width: 0;
-  -moz-padding-start: 1px;*/
+  padding-inline-start: 1px;*/
 }
 #toolbox-tab-options > image {
 /*  margin: 0 8px;*/
@@ -838,7 +892,7 @@
 }
 
 .devtools-side-splitter {
-/*  -moz-border-end: 1px solid var(--theme-splitter-color);
+/*  border-inline-end: 1px solid var(--theme-splitter-color);
   border-color: var(--theme-splitter-color); / Needed for responsive container at low width. */
 }
 
@@ -853,7 +907,7 @@
   content: "";
   display: inline-block;
   vertical-align: bottom;
-  -moz-margin-end: 0.5em;
+  margin-inline-end: 0.5em;
   width: 1em;
   height: 1em;
   border: 2px solid currentColor;