Merge pull request #4 from natal-chart/transit-styles

Styles for transits, plus more inline style

dev/index.html

@@ -913,7 +913,7 @@
                     <h3 class="d-inline text-primary">Planet Positions</h3>
                 </summary>
                 <div class="accordion-body scrollable-container">
-                    <table class="table table-no-borders">
+                    <table class="table table-no-borders table-hover-dark">
                         <thead>
                             <tr>
                                 <th>Planet</th>

dist/base.css

@@ -4,6 +4,11 @@
     border-bottom-style: none !important;
 }
 
+.table-hover-dark tbody tr:hover
+{
+    background: #0e1c8c;
+}
+
 /* Generated by Glyphter (http://www.glyphter.com) on  Sat Sep 12 2020*/
 @font-face
 {
@@ -426,6 +431,16 @@ svg .radix path
     fill-opacity: 0; stroke: rgba(255, 255, 255, .5);
 }
 
+svg .transiting-house-segment g,
+svg .transiting-house-segment path,
+svg .transiting-house-segment text,
+svg .transiting-house-label g,
+svg .transiting-house-label path,
+svg .transiting-house-label text
+{
+    fill-opacity: 0; stroke: rgba(255, 255, 255, .7); fill: rgba(255, 255, 255, .7);
+}
+
 svg .planet g,
 svg .planet path
 {
@@ -443,6 +458,23 @@ svg .planet-lines path
     stroke: rgba(184, 150, 98, .6);
 }
 
+svg .transiting-planet g,
+svg .transiting-planet path
+{
+    stroke: purple; fill: #670067;
+}
+
+svg .transiting-planet text
+{
+    fill: #670067;
+}
+
+svg .transiting-planet-lines g,
+svg .transiting-planet-lines path
+{
+    stroke: rgba(128, 0, 128, .6);
+}
+
 svg .container-circle
 {
     stroke: #fff;
@@ -595,6 +627,11 @@ svg .synthetic-aspect path
     flex: auto;
 }
 
+.light-links a
+{
+    color: white !important;
+}
+
 .divider-dark
 {
     border-top: .05rem solid #000950 !important;

src/_charts.scss

@@ -16,6 +16,14 @@ svg{
     }
   }
 
+  .transiting-house-segment, .transiting-house-label {
+    g, path, text{
+      fill-opacity: 0;
+      stroke: transparentize($white-color, 0.3);
+      fill: transparentize($white-color, 0.3);
+    }
+  }
+
   .planet {
     g, path{
       stroke: $primary-color;
@@ -33,6 +41,23 @@ svg{
     }
   }
 
+  .transiting-planet {
+    g, path{
+      stroke: $transit-color;
+      fill: darken($transit-color, 5%);
+    }
+
+    text{
+      fill: darken($transit-color, 5%);
+    }
+  }
+
+  .transiting-planet-lines{
+    g, path{
+      stroke: transparentize($transit-color, 0.4);
+    }
+  }
+
   .container-circle{
     stroke: $white-color;
   }

src/_layout.scss

@@ -7,3 +7,4 @@
     flex: auto;
   }
 }
+.light-links a{ color: white !important; }

src/_tables.scss

@@ -3,3 +3,14 @@
     border-bottom-style: none !important;
   }
 }
+
+//.table-hover-dark tr:hover{ border-bottom: .05rem solid #9da8ff !important; }
+.table-hover-dark{
+  tbody{
+    tr{
+      &:hover{
+        background: lighten($darkish-color, 5%);
+      }
+    }
+  }
+}

src/_variables.scss

@@ -17,6 +17,8 @@ $water-color: #07B1E7;
 $earth-color: #00D89C;
 $air-color: #EEB357;
 
+$transit-color: purple;
+
 $success-color: $earth-color;
 $warning-color: $air-color;
 $error-color:   $fire-color;