X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fruleview.css;h=201acf7824b9779c74f857f3931fdd4e729a039d;hp=6e36558e9b1d6e6c956f22620829981a6f3587c3;hb=5497455b20bc5f74484137eae68e957a9d3ef722;hpb=3a0880a969044096e60703908f84629b16830ee2

diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css
index 6e36558e..201acf78 100644
--- a/LCARStrek/browser/devtools/ruleview.css
+++ b/LCARStrek/browser/devtools/ruleview.css
@@ -2,16 +2,35 @@
  * 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/. */
 
+/* CSS Variables specific to this panel that aren't defined by the themes */
+
+.theme-light {
+  --rule-highlight-background-color: #402800;
+}
+
 .ruleview {
   height: 100%;
 }
 
 .ruleview-rule-source {
-  -moz-padding-start: 5px;
-  cursor: pointer;
-  text-align: right;
+  text-align: end;
   float: right;
   -moz-user-select: none;
+  margin-bottom: 2px;
+}
+
+.ruleview-rule-source > label {
+  cursor: pointer;
+  margin: 0;
+}
+
+.ruleview-rule-source[unselectable],
+.ruleview-rule-source[unselectable] > label {
+  cursor: default;
+}
+
+.ruleview-rule-source:not([unselectable]):hover {
+  text-decoration: underline;
 }
 
 .ruleview-header {
@@ -22,10 +41,7 @@
   padding: 1px 4px;
   margin-top: 4px;
   -moz-user-select: none;
-}
-
-.ruleview-rule-source:hover {
-  text-decoration: underline;
+  word-wrap: break-word;
 }
 
 .ruleview-rule,
@@ -33,6 +49,34 @@
   padding: 2px 4px;
 }
 
+/* User agent styles are not editable, display them differently */
+.ruleview-rule[uneditable=true] {
+  background: var(--theme-toolbar-background);
+}
+
+.ruleview-rule[uneditable=true] :focus {
+  outline: none;
+}
+
+.ruleview-rule[uneditable=true] .theme-link {
+  color: var(--theme-text-blue);
+}
+
+.ruleview-rule[uneditable=true] .ruleview-enableproperty {
+  visibility: hidden;
+}
+
+.ruleview-rule[uneditable=true] .ruleview-colorswatch,
+.ruleview-rule[uneditable=true] .ruleview-bezierswatch {
+  cursor: default;
+}
+
+.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
+.ruleview-propertyvalue {
+  border-bottom-color: transparent;
+}
+
 #noResults {
   font: message-box;
   color: #8050B0;
@@ -44,7 +88,7 @@
 }
 
 .ruleview-warning {
-  background: url("chrome://browser/skin/devtools/alerticon-warning.png");
+  background: url("alerticon-warning.png");
   -moz-margin-start: 5px;
   display: inline-block;
   vertical-align: top;
@@ -52,6 +96,12 @@
   height: 12px;
 }
 
+@media (min-resolution: 1.25dppx) {
+  .ruleview-warning {
+    background-image: url("alerticon-warning@2x.png");
+  }
+}
+
 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }
@@ -81,7 +131,7 @@
 }
 
 .ruleview-namecontainer,
-.ruleview-propertycontainer,
+.ruleview-propertyvaluecontainer,
 .ruleview-propertyname,
 .ruleview-propertyvalue {
   text-decoration: inherit;
@@ -96,12 +146,43 @@
   -moz-margin-start: 35px;
 }
 
-.ruleview-colorswatch {
+.ruleview-swatch {
+  cursor: pointer;
   border-radius: 50%;
-  width: 1em;
-  height: 1em;
-  vertical-align: text-top;
+  width: 0.9em;
+  height: 0.9em;
+  vertical-align: middle;
   -moz-margin-end: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+.ruleview-colorswatch::before {
+  content: '';
+  background-color: #9C9CFF;
+  background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
+                    linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 6px;
+  position: absolute;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.ruleview-bezierswatch {
+  background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
+  background-size: 1em;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .ruleview-bezierswatch {
+    background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
+    background-size: 1em;
+  }
 }
 
 .ruleview-overridden {
@@ -114,27 +195,74 @@
 }
 
 .ruleview-property {
-  border-left: 2px solid transparent;
+  border-left: 3px solid transparent;
+  clear: right;
 }
 
-.ruleview-property  > * {
+.ruleview-propertycontainer > * {
   vertical-align: middle;
 }
 
 .ruleview-property[dirty] {
-  border-left-color: #9C9CFF;
+  border-left-color: var(--theme-highlight-green);
+}
+
+.ruleview-highlight {
+  background-color: var(--rule-highlight-background-color);
 }
 
 .ruleview-namecontainer > .ruleview-propertyname,
-.ruleview-propertycontainer > .ruleview-propertyvalue {
+.ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
   border-bottom: 1px dashed transparent;
 }
 
 .ruleview-namecontainer:hover > .ruleview-propertyname,
-.ruleview-propertycontainer:hover > .ruleview-propertyvalue {
+.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
   border-bottom-color: #008484;
 }
 
+.ruleview-selector {
+  word-wrap: break-word;
+}
+
 .ruleview-selector-separator, .ruleview-selector-unmatched {
   color: #8050B0;
 }
+
+.ruleview-selectorhighlighter {
+  background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
+  padding-left: 16px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.ruleview-selectorhighlighter:hover {
+  background-position: -32px 0;
+}
+
+.ruleview-selectorhighlighter:active,
+.ruleview-selectorhighlighter.highlighted {
+  background-position: -16px 0;
+}
+
+#pseudo-class-panel:not([hidden]) {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+#ruleview-add-rule-button::before {
+  background-image: url("chrome://browser/skin/devtools/add.svg#add");
+  background-size: cover;
+}
+#ruleview-add-rule-button:hover::before {
+  background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
+}
+
+#pseudo-class-panel-toggle::before {
+  background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
+  background-size: cover;
+}
+#pseudo-class-panel-toggle:hover::before,
+#pseudo-class-panel-toggle[checked]::before {
+  background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
+  filter: none !important;
+}