From 00416246c1bee0b2cd2036199f5c0aff3f328187 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 26 Mar 2021 12:03:03 -0400
Subject: [PATCH] feat: add styles for Graph

---
 skin.json                                     |  2 +
 .../extensions/Graph/ext.graph.styles.less    | 78 +++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 skinStyles/extensions/Graph/ext.graph.styles.less

diff --git a/skin.json b/skin.json
index 45159d25..009b1b2b 100644
--- a/skin.json
+++ b/skin.json
@@ -389,6 +389,8 @@
 			"+ext.flow.styles.base": "skinStyles/extensions/Flow/ext.flow.styles.base.less",
 			"+ext.flow.ui": "skinStyles/extensions/Flow/ext.flow.ui.less",
 
+			"+ext.graph.styles": "skinStyles/extensions/Graph/ext.graph.styles.less",
+
 			"+ext.Lingo": "skinStyles/extensions/Lingo/ext.Lingo.less",
 			"+ext.Lingo.jquery.qtip": "skinStyles/extensions/Lingo/ext.Lingo.jquery.qtip.less",
 
diff --git a/skinStyles/extensions/Graph/ext.graph.styles.less b/skinStyles/extensions/Graph/ext.graph.styles.less
new file mode 100644
index 00000000..01a8436d
--- /dev/null
+++ b/skinStyles/extensions/Graph/ext.graph.styles.less
@@ -0,0 +1,78 @@
+/*
+ * Citizen - Graph
+ * https://starcitizen.tools
+*/
+
+@import '../../../resources/variables.less';
+
+.skin-citizen {
+	.vega {
+		background: var( --background-color-dp-00 );
+	}
+
+	/* responsive layout */
+	.mw-graph {
+		overflow: auto;
+		min-width: auto !important;
+		max-width: 100%;
+	}
+}
+
+.client-js {
+	.mw-graph-interactable {
+		&:hover {
+			.mw-graph-layover {
+				background-color: var( --background-color-overlay--lighter );
+			}
+
+			.mw-graph-switch {
+				&.mw-graph-loading {
+					background-color: var( --background-color-dp-00 );
+				}
+
+				&:hover {
+					background-color: var( --background-color-dp-00 );
+				}
+			}
+		}
+	}
+
+	.mw-graph-hover-title {
+		background-color: var( --background-color-dp-00 );
+	}
+
+	/* common button style */
+	.mw-graph-switch {
+		border-color: var( --border-color-base );
+		background-color: var( --background-color-overlay--lighter );
+		color: var( --color-base );
+
+		&:hover {
+			border-color: var( --color-primary );
+			background-color: var( --background-color-dp-00 );
+			color: var( --color-primary );
+		}
+
+		&:active {
+			border-color: var( --color-primary--active );
+			background-color: var( --background-color-dp-00 );
+			color: var( --color-primary );
+		}
+
+		&:focus {
+			border-color: var( --color-primary );
+			box-shadow: inset 0 0 0 1px var( --background-color-dp-00 );
+		}
+
+		/* Loading button style */
+		&.mw-graph-loading {
+			border-color: var( --color-primary--active );
+			background-color: var( --background-color-dp-00 );
+			color: var( --color-base--subtle );
+
+			&:hover {
+				border-color: var( --color-primary );
+			}
+		}
+	}
+}