diff --git a/src/css/_base.scss b/src/css/_base.scss
index 045bcfb95..d1e95af75 100644
--- a/src/css/_base.scss
+++ b/src/css/_base.scss
@@ -1,4 +1,3 @@
-@import "base/colors";
@import "base/breakpoints";
@import "base/icon";
@import "base/select";
@@ -8,7 +7,7 @@ html {
height: 100%;
body {
height: 100%;
- color: var(--color-black);
+ color: var(--color-accent);
margin: 0;
.root {
@@ -37,10 +36,6 @@ html {
overflow-y: auto;
}
- .border-black {
- border: 1px $black solid;
- }
-
.font-cairo {
font-family: "Cairo Regular";
}
@@ -58,7 +53,7 @@ html {
}
.color-secondary {
- color: var(--secondary-color);
+ color: var(--secondary-color) !important;
}
.color-accent {
diff --git a/src/css/base/_select.scss b/src/css/base/_select.scss
index fed24e83b..0510d3239 100644
--- a/src/css/base/_select.scss
+++ b/src/css/base/_select.scss
@@ -22,18 +22,12 @@
}
}
- .react-select.language-select {
- li a {
- border: 1px solid var(--black-color);
- }
- }
-
.react-select.language-select {
li a {
background: var(--primary-color);
- color: $white;
+ color: var(--secondary-color);
&:active, &:visited, &:link {
- color: var(--white-color);
+ color: var(--secondary-color);
}
&:hover {
font-weight: bold;
diff --git a/src/css/main/SurahIndex.scss b/src/css/main/SurahIndex.scss
index 4dd78f179..4f0347a1b 100644
--- a/src/css/main/SurahIndex.scss
+++ b/src/css/main/SurahIndex.scss
@@ -5,7 +5,7 @@
body .root .content.theme {
ul.body.index {
li, li a {
- color: var(--black-color);
+ color: var(--accent-color);
@media (max-width: $breakpoint-sm) {
width: 100%;
}
@@ -32,9 +32,9 @@ body .root .content.theme {
footer {
a {
- color: var(--black-color);
+ color: var(--accent-color);
&:active, &:link, &:visited {
- color: var(--black-color);
+ color: var(--accent-color);
}
&:hover {
font-weight: bold;
@@ -42,7 +42,7 @@ body .root .content.theme {
}
input {
- color: var(--black-color);
+ color: var(--accent-color);
border: 1px solid var(--primary-color);
&:focus {
outline-color: var(--primary-color);
@@ -74,12 +74,6 @@ body .root .content.theme {
*/
body .root .content.theme.rtl {
ul.body.index {
- li a {
- span:first-child {
- border: 1px solid var(--black-color);
- }
- }
-
li.surah {
span.transliterated { display: none; }
}
diff --git a/src/css/themes/blue.scss b/src/css/themes/blue.scss
index 2a54ea63d..feb19144f 100644
--- a/src/css/themes/blue.scss
+++ b/src/css/themes/blue.scss
@@ -4,8 +4,6 @@
.root .content.theme.blue {
--primary-color: #3383C3;
- --secondary-color: #3383C3;
- --accent-color: #3383C3;
- --black-color: #444444;
- --white-color: #FFF;
+ --secondary-color: #FFF;
+ --accent-color: #444;
}
diff --git a/src/css/themes/green.scss b/src/css/themes/green.scss
index fa9a31c98..e806f7252 100644
--- a/src/css/themes/green.scss
+++ b/src/css/themes/green.scss
@@ -4,8 +4,6 @@
.root .content.theme.green {
--primary-color: #6d765b;
- --secondary-color: #6C755A;
- --accent-color: #FFF;
- --white-color: #FFF;
- --black-color: #444;
+ --secondary-color: #FFF;
+ --accent-color: #444;
}
diff --git a/src/js/components/Head.tsx b/src/js/components/Head.tsx
index 22b2fccaa..399934dfd 100644
--- a/src/js/components/Head.tsx
+++ b/src/js/components/Head.tsx
@@ -24,7 +24,7 @@ export function Head({ locale, theme, setTheme, children }: Props) {
{children}
diff --git a/src/js/components/SurahIndex/index.tsx b/src/js/components/SurahIndex/index.tsx
index 1f861c746..53313ba11 100644
--- a/src/js/components/SurahIndex/index.tsx
+++ b/src/js/components/SurahIndex/index.tsx
@@ -54,11 +54,11 @@ export function SurahIndex({ locale, surahs, t }: Props) {
href={`/${locale.name}/${surah.urlName}/`}
>
{locale.direction === "ltr" ? (
-
+
{formatNumber(locale, surah.id)}
) : (
-
+
{formatNumber(locale, surah.id)}
)}
diff --git a/src/js/components/SurahStream/Stream.tsx b/src/js/components/SurahStream/Stream.tsx
index 2a6eb9f31..530094ad8 100644
--- a/src/js/components/SurahStream/Stream.tsx
+++ b/src/js/components/SurahStream/Stream.tsx
@@ -43,7 +43,7 @@ export function Stream({
"mb-5": !isArabic,
})}
>
-
+
-
+
{ayah.body}