try even more mac-specific toolbar adjustments

[themes.git] / LCARStrek / browser / devtools / widgets.css

diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css
index 81300be26394f7f61c11668f2c7bc0de9b7f3786..0b0a6e77271b17d8d870b9366a971749adfc5854 100644 (file)
--- a/LCARStrek/browser/devtools/widgets.css
+++ b/LCARStrek/browser/devtools/widgets.css
@@ -18,6 +18,33 @@
   transition: margin 0.25s ease-in-out;
 }
 
+/* Responsive container */
+
+.devtools-responsive-container {
+  -moz-box-orient: horizontal;
+}
+
+@media (max-width: 700px) {
+  .devtools-responsive-container {
+    -moz-box-orient: vertical;
+  }
+
+  .devtools-responsive-container > .devtools-side-splitter {
+    border: 0;
+    margin: 0;
+    min-height: 3px;
+    height: 3px;
+    margin-bottom: -3px;
+    /* In some edge case the cursor is not changed to n-resize */
+    cursor: n-resize;
+  }
+
+  .devtools-responsive-container > .devtools-sidebar-tabs {
+    min-height: 35vh;
+    max-height: 75vh;
+  }
+}
+
 /* BreacrumbsWidget */
 
 .breadcrumbs-widget-container {
@@ -155,7 +182,7 @@
   width: 25px;
   height: 25px;
   transform: translateX(-18px) rotate(45deg);
-  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .breadcrumbs-widget-item {
@@ -457,6 +484,12 @@
   padding: 2px;
 }
 
+.variables-view-scope:focus > .title,
+.theme-dark .variable-or-property:focus > .title {
+  background-color: #008484; /* Selection colors */
+  color: #FFCF00;
+}
+
 .variables-view-scope > .title {
   background-color: #A09090;
   color: #000000;
@@ -478,10 +511,6 @@
   color: inherit !important;
 }
 
-.variable-or-property > .title > .value {
-  -moz-box-flex: 1;
-}
-
 .variable-or-property > .title > .arrow {
   -moz-margin-start: 3px;
 }
@@ -546,6 +575,7 @@
 
 .variable-or-property-non-writable-icon {
   background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
+  background-size: cover;
   width: 16px;
   height: 16px;
   opacity: 0.5;
@@ -554,13 +584,13 @@
 @media (min-resolution: 2dppx) {
   .variable-or-property-non-writable-icon > .title:after {
     background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
-    background-size: 32px;
   }
 }
 
 .variable-or-property-frozen-label,
 .variable-or-property-sealed-label,
 .variable-or-property-non-extensible-label {
+  height: 16px;
   -moz-padding-end: 4px;
 }
 
@@ -587,9 +617,29 @@
 
 /* Actions first */
 
+.variables-view-open-inspector {
+  -moz-box-ordinal-group: 1;
+}
+
+.variables-view-edit,
+.variables-view-add-property {
+  -moz-box-ordinal-group: 2;
+}
+
+.variable-or-property-frozen-label,
+.variable-or-property-sealed-label,
+.variable-or-property-non-extensible-label,
+.variable-or-property-non-writable-icon {
+  -moz-box-ordinal-group: 3;
+}
+
+.variables-view-delete {
+  -moz-box-ordinal-group: 4;
+}
+
 .variables-view-container[actions-first] .variables-view-delete,
-.variables-view-container[actions-first] .variables-view-open-inspector,
-.variables-view-container[actions-first] .variables-view-add-property {
+.variables-view-container[actions-first] .variables-view-add-property,
+.variables-view-container[actions-first] .variables-view-open-inspector {
   -moz-box-ordinal-group: 0;
 }
 
@@ -625,70 +675,88 @@
 /* Variables and properties editing */
 
 .variables-view-delete {
-  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
-  -moz-image-region: rect(0,16px,16px,0);
+  background: url("chrome://browser/skin/devtools/vview-delete.png");
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+}
+
+@media (min-resolution: 2dppx) {
+  .variables-view-delete {
+    background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
+  }
 }
 
 .variables-view-delete:hover {
-  -moz-image-region: rect(0,48px,16px,32px);
+  background-position: 32px;
 }
 
 .variables-view-delete:active {
-  -moz-image-region: rect(0,32px,16px,16px);
+  background-position: 16px;
 }
 
-.variable-or-property:focus .variables-view-delete {
-/*  -moz-image-region: rect(0,16px,16px,0); */
+.variable-or-property:focus > .title > .variables-view-delete {
+/*  background-position: 0px; */
 }
 
 .variables-view-edit {
-  list-style-image: url("chrome://browser/skin/devtools/vview-edit.png");
-  -moz-image-region: rect(0,16px,16px,0);
+  background: url("chrome://browser/skin/devtools/vview-edit.png");
+  background-size: cover;
+  width: 16px;
+  height: 16px;
   cursor: pointer;
-  padding-left: 2px;
+}
+
+@media (min-resolution: 2dppx) {
+  .variables-view-edit {
+    background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
+  }
 }
 
 .variables-view-edit:hover {
- -moz-image-region: rect(0,48px,16px,32px);
+  background-position: 32px;
 }
 
 .variables-view-edit:active {
-  -moz-image-region: rect(0,32px,16px,16px);
+  background-position: 16px;
 }
 
-.variable-or-property:focus .variables-view-edit {
-/*  -moz-image-region: rect(0,16px,16px,0); */
+.variable-or-property:focus > .title > .variables-view-edit {
+/*  background-position: 0px; */
 }
 
 .variables-view-open-inspector {
-  list-style-image: url("chrome://browser/skin/devtools/vview-open-inspector.png");
-  -moz-image-region: rect(0,16px,16px,0);
+  background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
+  background-size: cover;
+  width: 16px;
+  height: 16px;
   cursor: pointer;
 }
 
 .variables-view-open-inspector:hover {
-  -moz-image-region: rect(0,48px,16px,32px);
+  background-position: 32px;
 }
 
 .variables-view-open-inspector:active {
-  -moz-image-region: rect(0,32px,16px,16px);
+  background-position: 16px;
 }
 
-.variable-or-property:focus .variables-view-open-inspector {
-/*  -moz-image-region: rect(0,16px,16px,0); */
+.variable-or-property:focus > .title > .variables-view-open-inspector {
+/*  background-position: 0px; */
 }
 
-.variables-view-throbber {
-  background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
-  width: 16px;
-  height: 16px;
-}
+/* Variables and properties input boxes */
 
-.element-value-input {
+.variable-or-property > .title > .separator + .element-value-input {
   -moz-margin-start: -2px !important;
   -moz-margin-end: 2px !important;
 }
 
+.variable-or-property > .title > .separator[hidden=true] + .element-value-input {
+  -moz-margin-start: 4px !important;
+  -moz-margin-end: 2px !important;
+}
+
 .element-name-input {
   -moz-margin-start: -2px !important;
   -moz-margin-end: 2px !important;
@@ -905,6 +973,7 @@
 .manifest-editor .variables-view-delete:hover,
 .manifest-editor .variables-view-delete:active,
 .manifest-editor .variable-or-property:focus .variables-view-delete,
+.manifest-editor .variables-view-add-property,
 .manifest-editor .variables-view-add-property:hover,
 .manifest-editor .variables-view-add-property:active,
 .manifest-editor .variable-or-property:focus .variables-view-add-property {