X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fruleview.css;h=7e5f8804e5061d58cbd343b1620c30beaa810ec1;hp=00ee6f91eee0f7a7d02114aebdf72b96496be193;hb=983645ee422a34e2c31018511396f078cabafdeb;hpb=d74db93877c7a404babddcf7b0523fa2b1f6f2bf

diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css
index 00ee6f91..7e5f8804 100644
--- a/LCARStrek/browser/devtools/ruleview.css
+++ b/LCARStrek/browser/devtools/ruleview.css
@@ -13,15 +13,15 @@
 }
 
 .ruleview-rule-source {
-  -moz-padding-start: 5px;
   text-align: end;
   float: right;
   -moz-user-select: none;
+  margin-bottom: 2px;
 }
 
-.ruleview-rule-source,
 .ruleview-rule-source > label {
   cursor: pointer;
+  margin: 0;
 }
 
 .ruleview-rule-source[unselectable],
@@ -49,7 +49,11 @@
   padding: 2px 4px;
 }
 
-/* User agent styles are not editable, display them differently */
+/**
+ * Display rules that don't match the current selected element and uneditable
+ * user agent styles differently
+ */
+.ruleview-rule[unmatched=true],
 .ruleview-rule[uneditable=true] {
   background: var(--theme-toolbar-background);
 }
@@ -96,7 +100,7 @@
   height: 12px;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .ruleview-warning {
     background-image: url("alerticon-warning@2x.png");
   }
@@ -146,13 +150,12 @@
   -moz-margin-start: 35px;
 }
 
-.ruleview-colorswatch,
-.ruleview-bezierswatch {
+.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;
@@ -179,7 +182,7 @@
   background-size: 1em;
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
   .ruleview-bezierswatch {
     background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
     background-size: 1em;
@@ -222,14 +225,28 @@
   border-bottom-color: #008484;
 }
 
-.ruleview-selector {
+.ruleview-selectorcontainer {
   word-wrap: break-word;
+  cursor: text;
 }
 
 .ruleview-selector-separator, .ruleview-selector-unmatched {
   color: #8050B0;
 }
 
+.ruleview-selector-matched > .ruleview-selector-attribute {
+  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
+}
+
+.ruleview-selector-matched > .ruleview-selector-pseudo-class {
+  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
+}
+
+.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
+  font-weight: bold;
+  color: var(--theme-highlight-orange);
+}
+
 .ruleview-selectorhighlighter {
   background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
   padding-left: 16px;
@@ -245,3 +262,49 @@
 .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;
+}
+
+/**
+ * These buttons are using opacity instead of background color to indicate
+ * the state
+ */
+/*
+#ruleview-add-rule-button,
+#pseudo-class-panel-toggle {
+  opacity: 0.8;
+}
+
+#ruleview-add-rule-button:not([disabled]):hover,
+#pseudo-class-panel-toggle:hover,
+#pseudo-class-panel-toggle[checked] {
+  opacity: 1;
+}
+
+#ruleview-add-rule-button,
+#pseudo-class-panel-toggle,
+#pseudo-class-panel-toggle:hover,
+#pseudo-class-panel-toggle[checked]::before {
+  background-color: transparent !important;
+}
+*/