subtle-ise planets

src/inc_css/earth.css

@@ -17,7 +17,7 @@
 #earth {
     --period: 20s;
     --radius: #pr_earth.css;
-    --color: #87ceeb;
+    --color: var(--background-alt);
 
     width: var(--radius);
     height: var(--radius);
@@ -44,5 +44,5 @@
     width:  var(--diameter);
     height: var(--diameter);
 
-    opacity: 0.065;
+    border: #orbit_thickness.css solid var(--background-alt);
 }

src/inc_css/mars.css

@@ -17,7 +17,7 @@
 #mars {
     --period: 37.6s;
     --radius: #pr_mars.css;
-    --color: #ff5349;
+    --color: var(--background-alt);
 
     width: var(--radius);
     height: var(--radius);
@@ -44,5 +44,5 @@
     width:  var(--diameter);
     height: var(--diameter);
 
-    opacity: 0.05;
+    border: #orbit_thickness.css solid var(--background-alt);
 }

src/inc_css/mercury.css

@@ -16,8 +16,8 @@
 }
 #mercury {
     --period: 4.82s;
-    --radius: #pr_mercury.css;
-    --color: #c89d7c;
+    --radius: 30px;
+    --color: var(--background-alt);
 
     width: var(--radius);
     height: var(--radius);
@@ -43,4 +43,6 @@
 
     width:  var(--diameter);
     height: var(--diameter);
+
+    border: #orbit_thickness.css solid var(--background-alt);
 }

src/inc_css/or_earth.css

@@ -1 +1 @@
-420px
+440px

src/inc_css/or_mars.css

@@ -1 +1 @@
-560px
+570px

src/inc_css/or_venus.css

@@ -1 +1 @@
-300px
+320px

src/inc_css/planets.css

@@ -15,15 +15,17 @@
     position: absolute;
     border-radius: 50%;
     display: inline-block;
+
+    width: var(--radius);
+    height: var(--radius);
 }
 
 .orbit {
     position: absolute;
 
-    border: #orbit_thickness.css solid var(--foreground-inactive);
+    /*border: #orbit_thickness.css solid var(--foreground-inactive);*/
     border-radius: 100%;
     background-color: transparent;
-    opacity: 0.2;
 
     z-index:-1;
 }

src/inc_css/pr_earth.css

@@ -1 +1 @@
-70px
+30px

src/inc_css/pr_mars.css

@@ -1 +1 @@
-50px
+30px

src/inc_css/pr_mercury.css

@@ -1 +1 @@
-40px
+30px

src/inc_css/pr_venus.css

@@ -1 +1 @@
-60px
+30px

src/inc_css/venus.css

@@ -17,7 +17,7 @@
 #venus {
     --period: 12.3s;
     --radius: #pr_venus.css;
-    --color: #eed053;
+    --color: var(--background-alt);
 
     width: var(--radius);
     height: var(--radius);
@@ -43,6 +43,5 @@
 
     width:  var(--diameter);
     height: var(--diameter);
-
-    opacity: 0.1;
+    border: #orbit_thickness.css solid var(--background-alt);
 }

src/root/colors.css

@@ -1,6 +1,7 @@
 :root {
     /* Special */
     --background: #eee;
+    --background-alt: #ccc;
     --foreground: #222;
     --foreground-inactive: #777;
     --accent: lightpink;