devtools need devtools/themes :(

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

diff --git a/LCARStrek/browser/devtools/profiler.css b/LCARStrek/browser/devtools/profiler.css
index dc29a1c6f4b1b37df61fbbb6f2a1833b984c5c84..7d9da809d8a2df4f047e9819a2962165aab034e2 100644 (file)
--- a/LCARStrek/browser/devtools/profiler.css
+++ b/LCARStrek/browser/devtools/profiler.css
@@ -4,6 +4,15 @@
 
 /* === file identical to profiler.inc.css === */
 
+/* CSS Variables specific to this panel that aren't defined by the themes */
+.theme-dark,
+.theme-light {
+  --cell-border-color: #9C9CFF;
+  --focus-cell-border-color: #9C9CFF;
+  --row-alt-background-color: #402800;
+  --row-hover-background-color: #795900;
+}
+
 window {
   padding: 0;
 }
@@ -13,11 +22,8 @@ window {
 .notice-container {
   margin-top: -50vh;
   font-size: 120%;
-}
-
-.notice-container {
-  background: #000000; /* Toolbars */
-  color: #FF9F00; /* Light foreground text */
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
 }
 
 #empty-notice button,
@@ -52,7 +58,7 @@ window {
 
 #recordings-pane > tabs,
 #recordings-pane .devtools-toolbar {
-  -moz-border-end-color: #9C9CFF; /* Splitters */
+  -moz-border-end-color: var(--theme-splitter-color);
 }
 
 #record-button {
@@ -89,7 +95,7 @@ window {
 
 .recording-item-duration,
 .recording-item-save {
-  color: #FF9F00; /* Foreground (Text) - Grey */
+  color: var(--theme-body-color-alt);
 }
 
 #recordings-list .selected label {
@@ -117,12 +123,8 @@ window {
   transition-property: opacity, transform;
 }
 
-.theme-dark #profile-content tab {
-  color: #8fa1b2; /* Body Text */
-}
-
-.theme-light #profile-content tab {
-  color: #18191a; /* Body Text */
+#profile-content tab {
+  color: var(--theme-body-color);
 }
 
 #profile-content tab:not([selected]) {
@@ -136,17 +138,17 @@ window {
 
 #profile-content tab {
   -moz-appearance: none;
-  -moz-border-end: 1px solid #9C9CFF; /* Splitters */
+  -moz-border-end: 1px solid var(--theme-splitter-color);
 }
 
 #profile-content tab:hover {
-  background-color: #FFCF00;
-  color: #000000;
+  background-color: var(--theme-hover-background);
+  color: var(--theme-hover-color);
 }
 
 #profile-content tab[selected] {
-  background-color: #008484; /* Select Highlight Blue */
-  color: #000000; /* Light foreground text */
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 #profile-content tabpanel {
@@ -173,7 +175,7 @@ window {
   background-image: url("newtab.png");
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   #profile-newtab-button {
     background-image: url("newtab@2x.png");
   }
@@ -182,7 +184,7 @@ window {
 /* Profile call tree */
 
 .call-tree-headers-container {
-  border-top: 1px solid #A09090;
+  border-top: 1px solid var(--theme-splitter-color);
 }
 
 .call-tree-cells-container {
@@ -224,17 +226,18 @@ window {
   -moz-box-align: center;
   overflow: hidden;
   padding: 1px 4px;
+  color: var(--theme-body-color);
 }
 
 .call-tree-header:not(:last-child),
 .call-tree-cell:not(:last-child) {
-  -moz-border-end: 1px solid;
+  -moz-border-end-width: 1px;
+  -moz-border-end-style: solid;
 }
 
 .call-tree-header,
 .call-tree-cell {
-  -moz-border-end-color: #9C9CFF;
-  color: #FF9F00; /* Body Text */
+  -moz-border-end-color: var(--cell-border-color);
 }
 
 .call-tree-header:not(:last-child) {
@@ -246,38 +249,39 @@ window {
 }
 
 .call-tree-header {
-  background-color: #A09090; /* Tab Toolbar */
-  color: #000000;
+  background-color: var(--theme-contrastsidebar-background);
+  color: var(--theme-contrastsidebar-color);
 }
 
 .call-tree-item:last-child:not(:focus) {
-  border-bottom: #9C9CFF;
+  border-bottom: 1px solid var(--cell-border-color);
 }
 
 .call-tree-item:nth-child(2n) {
-  background-color: #392900;
+  background-color: var(--row-alt-background-color);
 }
 
 .call-tree-item:hover {
-  background-color: #392900;
+  background-color: var(--row-hover-background-color);
 }
 
 .call-tree-item:focus {
-  background-color: #008484; /* Select Highlight Blue */
-  color: #000000;
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .call-tree-item:focus label {
-  color: #000000 !important; /* Light foreground text */
+  color: var(--theme-selection-color) !important;
 }
 
 .call-tree-item:focus .call-tree-cell {
-  -moz-border-end-color: #9C9CFF;
+  -moz-border-end-color: var(--focus-cell-border-color);
 }
 
 .call-tree-item:not([origin="content"]) .call-tree-name,
 .call-tree-item:not([origin="content"]) .call-tree-url,
-.call-tree-item:not([origin="content"]) .call-tree-line {
+.call-tree-item:not([origin="content"]) .call-tree-line,
+.call-tree-item:not([origin="content"]) .call-tree-column {
   /* Style chrome and non-JS nodes differently. */
   opacity: 0.6;
 }
@@ -292,11 +296,16 @@ window {
 }
 
 .call-tree-url {
-  color: #9C9CFF;
+  color: var(--theme-highlight-blue);
 }
 
 .call-tree-line {
-  color: #A09090;
+  color: var(--theme-content-color2);
+}
+
+.call-tree-column {
+  color: var(--theme-highlight-orange);
+  opacity: 0.6;
 }
 
 .call-tree-host {
@@ -305,11 +314,13 @@ window {
 }
 
 .call-tree-host {
-  color: #E7ADE7;
+  color: var(--theme-highlight-pink);
 }
 
+.call-tree-name[value=""],
 .call-tree-url[value=""],
 .call-tree-line[value=""],
+.call-tree-column[value=""],
 .call-tree-host[value=""] {
   display: none;
 }
@@ -330,7 +341,7 @@ window {
   background-image: url("magnifying-glass.png");
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.25dppx) {
   .call-tree-zoom {
     background-image: url("magnifying-glass@2x.png");
   }