feat(css): tweak and improve styles for graphs

userstyles-world · Jun 28, 2021 · 8084d3a · 8084d3a
1 parent fca0ff8
commit 8084d3a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/handlers/style/view.go b/handlers/style/view.go
@@ -68,9 +68,11 @@ func GetStylePage(c *fiber.Ctx) error {
 
 	// Visualize data.
 	graph := chart.Chart{
-		Width: 1248,
-		XAxis: chart.XAxis{Name: "Date"},
-		YAxis: chart.YAxis{Name: "Count"},
+		Width:      1248,
+		Canvas:     chart.Style{ClassName: "bg inner"},
+		Background: chart.Style{ClassName: "bg outer"},
+		XAxis:      chart.XAxis{Name: "Date"},
+		YAxis:      chart.YAxis{Name: "Count"},
 		Series: []chart.Series{
 			chart.TimeSeries{
 				Name:    "Installs",

diff --git a/scss/ui/_base.scss b/scss/ui/_base.scss
@@ -213,15 +213,20 @@ label[for="remember"] {
     svg[viewBox] {
         width: 100%;
         height: 100%;
+        .bg { fill: var(--bg-2) }
         > path {
-            &[style*='fill:rgba(255'] { fill: transparent !important }
+            &[style*='fill:rgba(255'] { fill: var(--bg-2) !important }
             &[style*='stroke:rgba(51'] { stroke: var(--bg-5) !important }
-            &:nth-last-child(-n+3) {
+            &:nth-last-child(-n+10) {
                 stroke-linecap: round;
                 stroke-linejoin: round;
                 stroke-width: 2 !important;
                 // &:hover { stroke-width: 4 !important }
             }
+            &:nth-last-child(7) {
+                stroke-width: 1 !important;
+                transform: translate(-1px);
+            }
         }
         > text {
             fill: var(--fg-3) !important;