Fix stalled icon within green theme

ReflectsLight · Oct 23, 2023 · 942b7f4 · 942b7f4
1 parent ea593f0
commit 942b7f4
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 43 deletions.
diff --git a/src/css/themes/blue.scss b/src/css/themes/blue.scss
@@ -2,6 +2,7 @@
 @import "blue/pages/SurahIndex";
 @import "blue/pages/SurahStream";
 @import "blue/components/Select";
+@import "blue/components/Icon";
 
 .root .content.theme.blue.ar {
   direction: rtl;

diff --git a/src/css/themes/blue/components/_Icon.scss b/src/css/themes/blue/components/_Icon.scss
@@ -1,31 +1,36 @@
+.content.theme.blue {
+  @import "themes/blue/colors";
 
-.play.icon {
-  fill: $blue1;
-  stroke: darken($blue1, 40%);
-  stroke-width: 2px;
-}
+  .footer {
+    .play.icon {
+      fill: $blue1;
+      stroke: darken($blue1, 40%);
+      stroke-width: 2px;
+    }
 
-.pause.icon {
-  background: unset;
-  rect {
-    fill: $blue1;
-    stroke: darken($blue1, 40%);
-    stroke-width: 1px;
-  }
-}
+    .pause.icon {
+      background: unset;
+      rect {
+        fill: $blue1;
+        stroke: darken($blue1, 40%);
+        stroke-width: 1px;
+      }
+    }
 
-.refresh.icon {
-  background: unset;
-  fill: $blue1;
-}
+    .refresh.icon {
+      background: unset;
+      fill: $blue1;
+    }
 
-.stalled.icon {
-  div { background: $gold2; }
-}
+    .stalled.icon {
+      div { background: $gold2; }
+    }
 
-.sound-on.icon, .sound-off.icon {
-  polygon {
-    fill: $blue1;
-    stroke-width: 2;
+    .sound-on.icon, .sound-off.icon {
+      polygon {
+        fill: $blue1;
+        stroke-width: 2;
+      }
+    }
   }
 }
diff --git a/src/css/themes/blue/pages/_SurahStream.scss b/src/css/themes/blue/pages/_SurahStream.scss
@@ -1,6 +1,5 @@
 .root .content.theme.blue {
   @import "themes/blue/colors";
-  @import "themes/blue/components/Icon";
 
   .row.details {
     color: $gold1;

diff --git a/src/css/themes/green.scss b/src/css/themes/green.scss
@@ -2,6 +2,7 @@
 @import "green/pages/SurahIndex";
 @import "green/pages/SurahStream";
 @import "green/components/Select";
+@import "themes/green/components/Icon";
 
 .root .content.theme.green.ar {
   direction: rtl;

diff --git a/src/css/themes/green/components/_Icon.scss b/src/css/themes/green/components/_Icon.scss
@@ -1,24 +1,32 @@
-.footer {
-  .play.icon {
-    background: unset;
-    g path {
-      fill: $green1;
-      stroke: $green1;
-      stroke-width: 3px;
+.content.theme.green {
+  @import "themes/green/colors";
+
+  .footer {
+    .play.icon {
+      background: unset;
+      g path {
+        fill: $green1;
+        stroke: $green1;
+        stroke-width: 3px;
+      }
     }
-  }
 
-  .pause.icon {
-    background: unset;
-    g rect {
+    .pause.icon {
+      background: unset;
+      g rect {
+        fill: $green1;
+        stroke: $green1;
+        stroke-width: 1px;
+      }
+    }
+
+    .refresh.icon {
+      background: unset;
       fill: $green1;
-      stroke: $green1;
-      stroke-width: 1px;
     }
-  }
 
-  .refresh.icon {
-    background: unset;
-    fill: $green1;
+    .stalled.icon {
+      div { background: $green1; }
+    }
   }
 }
diff --git a/src/css/themes/green/pages/_SurahStream.scss b/src/css/themes/green/pages/_SurahStream.scss
@@ -1,6 +1,5 @@
 .root .content.theme.green {
   @import "themes/green/colors";
-  @import "themes/green/components/Icon";
 
   .row.details {
     color: $green1;