graphs

adsabs · May 11, 2021 · 7c68781 · 7c68781
1 parent 2ad3bf1
commit 7c68781
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 43 deletions.
diff --git a/src/styles/sass/ads-sass/bootstrap-variables.scss b/src/styles/sass/ads-sass/bootstrap-variables.scss
@@ -25,6 +25,7 @@ $brand-danger:         #E44830;
 $darkmode-background: #0d1117;
 $darkmode-border: #30363d;
 $darkmode-text: #c9d1d9;
+$darkmode-text-strong: #eee;
 $darkmode-text-secondary: #8b949e;
 $darkmode-text-dim: #8b949e;
 $darkmode-link: #58a6ff;

diff --git a/src/styles/sass/ads-sass/dark-mode.scss b/src/styles/sass/ads-sass/dark-mode.scss
@@ -175,7 +175,7 @@
   }
 
   .table-hover > tbody > tr:hover {
-    background-color: #464545;
+    background-color: $darkmode-input-bg;
   }
 
   .table > thead > tr > td.active,
@@ -704,6 +704,10 @@
     text-decoration: none;
   }
 
+  .nav-tabs {
+    border-color: $darkmode-border;
+  }
+
   .nav-tabs > li > a {
     background-color: $darkmode-background;
     border-color: $darkmode-border;
@@ -878,7 +882,7 @@
   }
 
   .s-text-bold, strong {
-    color: #eee;
+    color: $darkmode-text-strong;
   }
 
   .dropdown-menu {
@@ -1093,43 +1097,6 @@
     color: $darkmode-text-dim;
   }
 
-  .form-control[readonly] {
-    background-color: $darkmode-container;
-  }
-
-  .s-metrics-title {
-    background-color: $darkmode-container;
-  }
-
-  .s-metrics-svg-container {
-    background-color: $darkmode-text;
-  }
-
-  .s-network-chart {
-    background-color: $darkmode-text;
-  }
-
-  .s-vis-item-format {
-    background: $darkmode-background;
-  }
-
-  .time-series-container {
-    background-color: $darkmode-text;
-    color: $darkmode-background;
-  }
-
-  .s-network-widget .s-filter-names-container {
-    background-color: $darkmode-container;
-  }
-
-  .s-bubble-chart {
-    background-color: $darkmode-text;
-  }
-
-  .s-controls {
-    background-color: $darkmode-background;
-  }
-
   /** results **/
 
   button.filter-operand-remove:hover {
@@ -1246,15 +1213,145 @@
     }
   }
 
-  #year-graph,
-  .graph-facet {
-    background-color: $darkmode-text;
-    color: $darkmode-background;
+  // graphs
+
+  .s-tabs-widget .tab-content {
+    background: transparent;
+    border: 1px solid $darkmode-border;
     border-top-right-radius: 5px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
   }
 
+  #year-graph,
+  .graph-facet {
+    background-color: $darkmode-background;
+    color: $darkmode-text;
+  }
+
+  .x-axis text, .y-axis text,  .s-graph-view .graph-label {
+    fill: $darkmode-text !important;
+  }
+
+  .s-graph-view rect {
+    opacity: 0.5;
+  }
+
+  .form-control[readonly] {
+    background-color: $darkmode-container;
+  }
+
+  .s-control-row {
+    border-color: $darkmode-border;
+  }
+
+  .s-metrics-title {
+    background-color: $darkmode-input-bg;
+    color: $darkmode-text-strong;
+  }
+
+  .s-metrics-svg-container {
+    background: transparent;
+  }
+
+  text {
+    fill: white;
+  }
+
+  .axis text {
+    fill: $darkmode-text;
+  }
+
+  path.link {
+    stroke: white;
+  }
+
+  .x-axis, .y-axis {
+    stroke: white;
+  }
+
+  .axis path, .axis line {
+   stroke: $darkmode-text; 
+  }
+
+  .d3-tip {
+    background-color: $darkmode-input-bg;
+    border-color: $darkmode-input-border;
+    color: $darkmode-text;
+  }
+
+  .popover[role='tooltip'] {
+    background-color: $darkmode-input-bg;
+    border-color: $darkmode-input-border;
+    color: $darkmode-text;
+
+    &.right>.arrow:after {
+      border-right-color: $darkmode-input-bg;
+    }
+
+    .popover-title {
+      background-color: $darkmode-input-bg;
+      border-color: $darkmode-input-border;
+      color: $darkmode-text-strong;
+    }
+
+    .popover-content {
+      background-color: $darkmode-input-bg;
+      border-color: $darkmode-input-border;
+      color: $darkmode-text;
+    }
+  }
+
+  .s-network-chart {
+    background-color: $darkmode-background;
+  }
+
+  .node-label {
+    fill: $darkmode-text;
+
+    &:hover {
+      fill: $darkmode-link;
+    }
+  }
+
+  .selected-label {
+    fill: $darkmode-link;
+  }
+
+  .network-g circle.link-background {
+    fill: rgba(0, 0, 0, 0.5) !important;
+  }
+
+  .network-g .node-containers:first-of-type > path {
+    fill: none !important;
+  }
+
+
+  .network-g circle[fill="#fff"] {
+    fill: $darkmode-background !important;
+  }
+
+  .s-vis-item-format {
+    background: $darkmode-background;
+  }
+
+  .time-series-container {
+    color: $darkmode-background;
+  }
+
+  .s-network-widget .s-filter-names-container {
+    background-color: $darkmode-input-bg;
+    border-color: $darkmode-input-border;
+  }
+
+  .s-bubble-chart {
+    background-color: $darkmode-background;
+  }
+
+  .s-controls {
+    background-color: $darkmode-background;
+  }
+
   /** abstract **/
   .s-nav-container a {
     color: $darkmode-text;