second part of syncing LCARStrek with Firefox 39 windows theme changes

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

diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css
index 2d595e14b535bc1e12c033fcfa80edce9ff47863..813ce7f894f2ba49989030cf91a36172a2409c2a 100644 (file)
--- a/LCARStrek/browser/devtools/ruleview.css
+++ b/LCARStrek/browser/devtools/ruleview.css
@@ -8,12 +8,25 @@
 
 .ruleview-rule-source {
   -moz-padding-start: 5px;
 
 .ruleview-rule-source {
   -moz-padding-start: 5px;

-  cursor: pointer;
-  text-align: right;
+  text-align: end;

   float: right;
   -moz-user-select: none;
 }
 
   float: right;
   -moz-user-select: none;
 }
 

+.ruleview-rule-source,
+.ruleview-rule-source > label {
+  cursor: pointer;
+}
+
+.ruleview-rule-source[unselectable],
+.ruleview-rule-source[unselectable] > label {
+  cursor: default;
+}
+
+.ruleview-rule-source:not([unselectable]):hover {
+  text-decoration: underline;
+}
+

 .ruleview-header {
   border-top-width: 1px;
   border-bottom-width: 1px;
 .ruleview-header {
   border-top-width: 1px;
   border-bottom-width: 1px;


@@ -25,15 +38,39 @@
   word-wrap: break-word;
 }
 
   word-wrap: break-word;
 }
 

-.ruleview-rule-source:hover {
-  text-decoration: underline;
-}
-

 .ruleview-rule,
 #noResults {
   padding: 2px 4px;
 }
 
 .ruleview-rule,
 #noResults {
   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-propertycontainer > .ruleview-propertyvalue {
+  border-bottom-color: transparent;
+}
+

 #noResults {
   font: message-box;
   color: #8050B0;
 #noResults {
   font: message-box;
   color: #8050B0;


@@ -45,7 +82,7 @@
 }
 
 .ruleview-warning {
 }
 
 .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;
   -moz-margin-start: 5px;
   display: inline-block;
   vertical-align: top;


@@ -53,6 +90,12 @@
   height: 12px;
 }
 
   height: 12px;
 }
 

+@media (min-resolution: 2dppx) {
+  .ruleview-warning {
+    background-image: url("alerticon-warning@2x.png");
+  }
+}
+

 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }
 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }


@@ -97,12 +140,44 @@
   -moz-margin-start: 35px;
 }
 
   -moz-margin-start: 35px;
 }
 

-.ruleview-colorswatch {
+.ruleview-colorswatch,
+.ruleview-bezierswatch {
+  cursor: pointer;

   border-radius: 50%;
   width: 1em;
   height: 1em;
   vertical-align: text-top;
   -moz-margin-end: 5px;
   border-radius: 50%;
   width: 1em;
   height: 1em;
   vertical-align: text-top;
   -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: 2dppx) {
+  .ruleview-bezierswatch {
+    background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
+    background-size: 1em;
+  }

 }
 
 .ruleview-overridden {
 }
 
 .ruleview-overridden {


@@ -124,7 +199,7 @@
 }
 
 .ruleview-property[dirty] {
 }
 
 .ruleview-property[dirty] {

-  border-left-color: #9C9CFF; /* Green */
+  border-left-color: var(--theme-highlight-green);

 }
 
 .ruleview-namecontainer > .ruleview-propertyname,
 }
 
 .ruleview-namecontainer > .ruleview-propertyname,


@@ -144,3 +219,19 @@
 .ruleview-selector-separator, .ruleview-selector-unmatched {
   color: #8050B0;
 }
 .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;
+}