Iterate on the theme system
This commit is contained in:
parent
3f662805e4
commit
188797bf58
21 changed files with 151 additions and 388 deletions
|
@ -2,6 +2,11 @@
|
||||||
|
|
||||||
** v0.10.0
|
** v0.10.0
|
||||||
|
|
||||||
|
**** Rewrite theme implementation
|
||||||
|
The theme implementation has been reduced to a set of colors
|
||||||
|
that are applied when the theme is active, and in the process
|
||||||
|
we made the creation of new themes easier
|
||||||
|
|
||||||
**** Add Cairo fonts
|
**** Add Cairo fonts
|
||||||
Two new fonts for RTL languages: Cairo Regular, Cairo Bold
|
Two new fonts for RTL languages: Cairo Regular, Cairo Bold
|
||||||
|
|
||||||
|
|
|
@ -8,40 +8,78 @@ html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: $black;
|
color: var(--color-black);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ltr {
|
.ltr {
|
||||||
font-family: "Kanit Regular";
|
font-family: "Kanit Regular";
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rtl {
|
.rtl {
|
||||||
font-family: "Cairo Regular", "Arial", "Tahoma", sans-serif;
|
font-family: "Cairo Regular", "Arial", "Tahoma", sans-serif;
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
|
|
||||||
.invisible, .hidden {
|
.invisible, .hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.outline-0 {
|
.outline-0 {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-y {
|
.scroll-y {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-black {
|
.border-black {
|
||||||
border: 1px $black solid;
|
border: 1px $black solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-cairo {
|
.font-cairo {
|
||||||
font-family: "Cairo Regular";
|
font-family: "Cairo Regular";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-cairo-bold {
|
.font-cairo-bold {
|
||||||
font-family: "Cairo Bold";
|
font-family: "Cairo Bold";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-amiri {
|
.font-amiri {
|
||||||
font-family: "Amiri Quran Regular";
|
font-family: "Amiri Quran Regular";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.color-primary {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-secondary {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-accent {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-white {
|
||||||
|
color: var(--white-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-primary {
|
||||||
|
background: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-secondary {
|
||||||
|
background: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-accent {
|
||||||
|
background: var(--accent-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -49,6 +87,18 @@ body .root .content.theme {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: $breakpoint-md;
|
max-width: $breakpoint-md;
|
||||||
width: 85%;
|
width: 85%;
|
||||||
|
|
||||||
|
header {
|
||||||
|
a[data-testid="h1"] {
|
||||||
|
background: var(--primary-color);
|
||||||
|
border: 1px solid var(--black-color);
|
||||||
|
color: var(--white-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.body {
|
||||||
|
scrollbar-color: var(--primary-color) var(--white-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -57,6 +57,7 @@
|
||||||
.refresh.icon,
|
.refresh.icon,
|
||||||
.right-arrow.icon,
|
.right-arrow.icon,
|
||||||
.left-arrow.icon {
|
.left-arrow.icon {
|
||||||
|
fill: var(--primary-color);
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
}
|
}
|
||||||
|
@ -69,7 +70,7 @@
|
||||||
g rect {
|
g rect {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
fill: #FFF;
|
fill: var(--primary-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -120,3 +121,42 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content.theme {
|
||||||
|
ul.body.stream li, footer {
|
||||||
|
.play.icon {
|
||||||
|
fill: var(--primary-color);
|
||||||
|
stroke: var(--secondary-color);
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pause.icon {
|
||||||
|
rect {
|
||||||
|
fill: var(--primary-color);
|
||||||
|
stroke: var(--secondary-color);
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.refresh.icon {
|
||||||
|
fill: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sound-on.icon, .sound-off.icon {
|
||||||
|
polygon {
|
||||||
|
fill: var(--primary-color);
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-arrow.icon,
|
||||||
|
.left-arrow.icon {
|
||||||
|
g {
|
||||||
|
fill: var(--secondary--color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stalled.icon {
|
||||||
|
div { background: var(--secondary-color); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,4 +1,11 @@
|
||||||
.root .content.theme {
|
.root .content.theme {
|
||||||
|
.green {
|
||||||
|
background: #6d765b !important;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
background: #3383C3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.react-select {
|
.react-select {
|
||||||
.active {
|
.active {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -10,12 +17,27 @@
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
background: var(--primary-color);
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-select.language-select {
|
.react-select.language-select {
|
||||||
li a {
|
li a {
|
||||||
border: 1px solid $black;
|
border: 1px solid var(--black-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-select.language-select {
|
||||||
|
li a {
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: $white;
|
||||||
|
&:active, &:visited, &:link {
|
||||||
|
color: var(--white-color);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,10 +3,10 @@
|
||||||
@import "themes/green";
|
@import "themes/green";
|
||||||
|
|
||||||
body .root .content.theme {
|
body .root .content.theme {
|
||||||
@import "base/colors";
|
|
||||||
ul.body.index {
|
ul.body.index {
|
||||||
@media (max-width: $breakpoint-sm) {
|
li, li a {
|
||||||
li, li a {
|
color: var(--black-color);
|
||||||
|
@media (max-width: $breakpoint-sm) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -31,11 +31,22 @@ body .root .content.theme {
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
@media screen and (max-width: $breakpoint-kaiOS-landscape) {
|
a {
|
||||||
display: none;
|
color: var(--black-color);
|
||||||
|
&:active, &:link, &:visited {
|
||||||
|
color: var(--black-color);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: $breakpoint-kaiOS-portrait) {
|
|
||||||
display: none;
|
input {
|
||||||
|
color: var(--black-color);
|
||||||
|
border: 1px solid var(--primary-color);
|
||||||
|
&:focus {
|
||||||
|
outline-color: var(--primary-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: $breakpoint-sm) {
|
@media(max-width: $breakpoint-sm) {
|
||||||
|
@ -65,7 +76,7 @@ body .root .content.theme.rtl {
|
||||||
ul.body.index {
|
ul.body.index {
|
||||||
li a {
|
li a {
|
||||||
span:first-child {
|
span:first-child {
|
||||||
border: 1px solid $black;
|
border: 1px solid var(--black-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,37 +3,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.root .content.theme.blue {
|
.root .content.theme.blue {
|
||||||
@import "blue/base/colors";
|
--primary-color: #3383C3;
|
||||||
|
--secondary-color: #3383C3;
|
||||||
.color-white {
|
--accent-color: #3383C3;
|
||||||
color: $white !important;
|
--black-color: #444444;
|
||||||
}
|
--white-color: #FFF;
|
||||||
|
|
||||||
.color-primary {
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-secondary {
|
|
||||||
color: $secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-accent {
|
|
||||||
color: $accent-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-primary {
|
|
||||||
background: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-secondary {
|
|
||||||
background: $secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-accent {
|
|
||||||
background: $accent-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "blue/base";
|
|
||||||
@import "blue/main/SurahIndex";
|
|
||||||
@import "blue/main/SurahStream";
|
|
||||||
|
|
|
@ -1,15 +0,0 @@
|
||||||
@import "base/icon";
|
|
||||||
@import "base/select";
|
|
||||||
|
|
||||||
.root .content.theme.blue {
|
|
||||||
@import "base/colors";
|
|
||||||
scrollbar-color: $primary-color #FFF;
|
|
||||||
|
|
||||||
header {
|
|
||||||
a[data-testid="h1"] {
|
|
||||||
background: $primary-color;
|
|
||||||
border: 1px solid $black;
|
|
||||||
color: #FFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,3 +0,0 @@
|
||||||
$primary-color: #3383C3;
|
|
||||||
$secondary-color: #3383C3;
|
|
||||||
$accent-color: lighten($primary-color, 38%);
|
|
|
@ -1,40 +0,0 @@
|
||||||
.content.theme.blue {
|
|
||||||
@import "themes/blue/base/colors";
|
|
||||||
|
|
||||||
ul.body.stream li, footer {
|
|
||||||
.play.icon {
|
|
||||||
fill: $primary-color;
|
|
||||||
stroke: $secondary-color;
|
|
||||||
stroke-width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pause.icon {
|
|
||||||
rect {
|
|
||||||
fill: $primary-color;
|
|
||||||
stroke: $secondary-color;
|
|
||||||
stroke-width: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh.icon {
|
|
||||||
fill: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sound-on.icon, .sound-off.icon {
|
|
||||||
polygon {
|
|
||||||
fill: $primary-color;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right-arrow.icon,
|
|
||||||
.left-arrow.icon {
|
|
||||||
g {
|
|
||||||
fill: $secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stalled.icon {
|
|
||||||
div { background: $secondary-color; }
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,32 +0,0 @@
|
||||||
.content.theme {
|
|
||||||
@import "themes/blue/base/colors";
|
|
||||||
.blue {
|
|
||||||
background: $secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content.theme.blue {
|
|
||||||
@import "themes/blue/base/colors";
|
|
||||||
|
|
||||||
.react-select.theme-select {
|
|
||||||
.active .circle {
|
|
||||||
background: $secondary-color;
|
|
||||||
}
|
|
||||||
ul li.blue .circle {
|
|
||||||
background: $secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-select.language-select {
|
|
||||||
li a {
|
|
||||||
background: $secondary-color;
|
|
||||||
color: $white;
|
|
||||||
&:active, &:visited, &:link {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,53 +0,0 @@
|
||||||
.root .surah-index.content.theme.blue {
|
|
||||||
@import "themes/blue/base/colors";
|
|
||||||
@import "base/breakpoints";
|
|
||||||
|
|
||||||
ul.body.index {
|
|
||||||
li.surah a {
|
|
||||||
color: $black;
|
|
||||||
span.id {
|
|
||||||
color: $secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
a {
|
|
||||||
&:active, &:link, &:visited {
|
|
||||||
color: $black;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
color: $black;
|
|
||||||
border: 1px solid $secondary-color;
|
|
||||||
&:focus {
|
|
||||||
outline-color: $secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.root .content.theme.blue.en {
|
|
||||||
@import "themes/blue/base/colors";
|
|
||||||
header {
|
|
||||||
div {
|
|
||||||
color: $secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.root .content.theme.blue.rtl {
|
|
||||||
@import "themes/blue/base/colors";
|
|
||||||
ul.body.index {
|
|
||||||
li.surah a {
|
|
||||||
span.id {
|
|
||||||
background: $secondary-color;
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,19 +0,0 @@
|
||||||
.root .content.theme.blue {
|
|
||||||
@import "themes/blue/base/colors";
|
|
||||||
@import "base/breakpoints";
|
|
||||||
|
|
||||||
ul.body.stream {
|
|
||||||
li.ayah {
|
|
||||||
span span {
|
|
||||||
color: $secondary-color;
|
|
||||||
}
|
|
||||||
p { }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
.timer {
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,40 +1,11 @@
|
||||||
.root .content.theme.green.rtl {
|
.root .content.theme.green.rtl {
|
||||||
@import "green/base/colors";
|
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root .content.theme.green {
|
.root .content.theme.green {
|
||||||
@import "green/base/colors";
|
--primary-color: #6d765b;
|
||||||
|
--secondary-color: #6C755A;
|
||||||
.color-primary {
|
--accent-color: #FFF;
|
||||||
color: $primary-color;
|
--white-color: #FFF;
|
||||||
}
|
--black-color: #444;
|
||||||
|
|
||||||
.color-secondary {
|
|
||||||
color: $secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-accent {
|
|
||||||
color: $accent-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-white {
|
|
||||||
color: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-primary {
|
|
||||||
background: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-secondary {
|
|
||||||
background: $secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-accent {
|
|
||||||
background: $accent-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "green/base";
|
|
||||||
@import "green/main/SurahIndex";
|
|
||||||
@import "green/main/SurahStream";
|
|
||||||
|
|
|
@ -1,15 +0,0 @@
|
||||||
@import "base/icon";
|
|
||||||
@import "base/select";
|
|
||||||
|
|
||||||
.root .content.theme.green {
|
|
||||||
@import "base/colors";
|
|
||||||
scrollbar-color: $primary-color #FFF;
|
|
||||||
|
|
||||||
header {
|
|
||||||
a[data-testid="h1"] {
|
|
||||||
background: $primary-color;
|
|
||||||
border: 1px solid $black;
|
|
||||||
color: #FFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,3 +0,0 @@
|
||||||
$primary-color: #6d765b;
|
|
||||||
$secondary-color: #6C755A;
|
|
||||||
$accent-color: #FFF;
|
|
|
@ -1,41 +0,0 @@
|
||||||
.content.theme.green {
|
|
||||||
@import "themes/green/base/colors";
|
|
||||||
|
|
||||||
ul.body.stream li, footer {
|
|
||||||
.play.icon {
|
|
||||||
g path {
|
|
||||||
fill: $primary-color;
|
|
||||||
stroke: $primary-color;
|
|
||||||
stroke-width: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pause.icon {
|
|
||||||
g rect {
|
|
||||||
fill: $primary-color;
|
|
||||||
stroke: $primary-color;
|
|
||||||
stroke-width: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh.icon {
|
|
||||||
fill: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sound-on.icon, .sound-off.icon {
|
|
||||||
g polygon {
|
|
||||||
fill: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right-arrow.icon,
|
|
||||||
.left-arrow.icon {
|
|
||||||
g {
|
|
||||||
fill: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stalled.icon {
|
|
||||||
div { background: $primary-color; }
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,32 +0,0 @@
|
||||||
.content.theme {
|
|
||||||
@import "themes/green/base/colors";
|
|
||||||
.green {
|
|
||||||
background: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content.theme.green {
|
|
||||||
@import "themes/green/base/colors";
|
|
||||||
|
|
||||||
.react-select.theme-select {
|
|
||||||
.active {
|
|
||||||
.circle {
|
|
||||||
background: $primary-color;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-select.language-select {
|
|
||||||
li a {
|
|
||||||
background: $primary-color;
|
|
||||||
color: $white;
|
|
||||||
&:active, &:visited, &:link {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,26 +0,0 @@
|
||||||
.root .surah-index.content.theme.green {
|
|
||||||
@import "base/breakpoints";
|
|
||||||
@import "themes/green/base/colors";
|
|
||||||
|
|
||||||
ul.body.index a {
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
a {
|
|
||||||
&:active, &:link, &:visited {
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
color: $black;
|
|
||||||
border: 1px solid $primary-color;
|
|
||||||
&:focus {
|
|
||||||
outline-color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,29 +0,0 @@
|
||||||
.root .content.theme.green {
|
|
||||||
@import "themes/green/base/colors";
|
|
||||||
@import "base/breakpoints";
|
|
||||||
|
|
||||||
header {
|
|
||||||
h1, h1 a { color: $primary-color; }
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.body.stream {
|
|
||||||
li.ayah {
|
|
||||||
color: $primary-color;
|
|
||||||
p { color: $black; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
.timer {
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sound-on.icon, .svg.sound-off.icon {
|
|
||||||
polygon {
|
|
||||||
fill: $primary-color;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -82,7 +82,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
|
||||||
</ul>
|
</ul>
|
||||||
<footer className="flex flex-row justify-between mb-5 h-12 text-lg">
|
<footer className="flex flex-row justify-between mb-5 h-12 text-lg">
|
||||||
<a
|
<a
|
||||||
className="flex flex-row items-center no-underline"
|
className="flex flex-row items-center color-black no-underline"
|
||||||
href={`/${locale.name}/random/`}
|
href={`/${locale.name}/random/`}
|
||||||
>
|
>
|
||||||
{locale.direction === "ltr" ? (
|
{locale.direction === "ltr" ? (
|
||||||
|
|
|
@ -66,7 +66,7 @@ export function Timer({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="timer font-extrabold text-base w-10 flex justify-end">
|
<div className="timer font-extrabold text-base w-10 flex justify-end color-primary">
|
||||||
{!ms || ms / 1000 <= 0
|
{!ms || ms / 1000 <= 0
|
||||||
? formatNumber(locale, 0)
|
? formatNumber(locale, 0)
|
||||||
: formatNumber(locale, ms / 1000, { maximumFractionDigits: 0 })}
|
: formatNumber(locale, ms / 1000, { maximumFractionDigits: 0 })}
|
||||||
|
|
Loading…
Reference in a new issue