ReflectsLight/al-quran.reflectslight.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Iterate on the theme system

Browse source
This commit is contained in:
0x1eef 2024-09-20 21:58:37 -03:00
parent 3f662805e4
commit 188797bf58
21 changed files with 151 additions and 388 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
share/al-quran.reflectslight.io/CHANGELOG
View file

@ -2,6 +2,11 @@
** 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
Two new fonts for RTL languages: Cairo Regular, Cairo Bold

52
src/css/_base.scss
View file

@ -8,40 +8,78 @@ html {
height: 100%;
body {
height: 100%;
color: $black;
color: var(--color-black);
margin: 0;
.root {
height: 100%;
}
.ltr {
font-family: "Kanit Regular";
direction: ltr;
}
.rtl {
font-family: "Cairo Regular", "Arial", "Tahoma", sans-serif;
direction: rtl;
}
.invisible, .hidden {
display: none;
}
.outline-0 {
outline: 0;
}
.scroll-y {
overflow-y: auto;
}
.border-black {
border: 1px $black solid;
}
.font-cairo {
font-family: "Cairo Regular";
}
.font-cairo-bold {
font-family: "Cairo Bold";
}
.font-amiri {
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;
max-width: $breakpoint-md;
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);
}
}
/**

42
src/css/base/_icon.scss
View file

@ -57,6 +57,7 @@
.refresh.icon,
.right-arrow.icon,
.left-arrow.icon {
fill: var(--primary-color);
height: 16px;
width: 16px;
}
@ -69,7 +70,7 @@
g rect {
width: 15px;
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); }
}
}

24
src/css/base/_select.scss
View file

@ -1,4 +1,11 @@
.root .content.theme {
.green {
background: #6d765b !important;
}
.blue {
background: #3383C3 !important;
}
.react-select {
.active {
cursor: pointer;
@ -10,12 +17,27 @@
width: 16px;
height: 16px;
border-radius: 12px;
background: var(--primary-color);
border-radius: 10px;
}
}
.react-select.language-select {
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;
}
}
}
}

27
src/css/main/SurahIndex.scss
View file

@ -3,10 +3,10 @@
@import "themes/green";
body .root .content.theme {
@import "base/colors";
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%;
}
}
@ -31,11 +31,22 @@ body .root .content.theme {
}
footer {
@media screen and (max-width: $breakpoint-kaiOS-landscape) {
display: none;
a {
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) {
@ -65,7 +76,7 @@ body .root .content.theme.rtl {
ul.body.index {
li a {
span:first-child {
border: 1px solid $black;
border: 1px solid var(--black-color);
}
}

38
src/css/themes/blue.scss
View file

@ -3,37 +3,9 @@
}
.root .content.theme.blue {
@import "blue/base/colors";
.color-white {
color: $white !important;
}
.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;
}
--primary-color: #3383C3;
--secondary-color: #3383C3;
--accent-color: #3383C3;
--black-color: #444444;
--white-color: #FFF;
}
@import "blue/base";
@import "blue/main/SurahIndex";
@import "blue/main/SurahStream";

15
src/css/themes/blue/_base.scss
View file

@ -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;
}
}
}

3
src/css/themes/blue/base/_colors.scss
View file

@ -1,3 +0,0 @@
$primary-color: #3383C3;
$secondary-color: #3383C3;
$accent-color: lighten($primary-color, 38%);

40
src/css/themes/blue/base/_icon.scss
View file

@ -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; }
}
}

32
src/css/themes/blue/base/_select.scss
View file

@ -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;
}
}
}
}

53
src/css/themes/blue/main/_SurahIndex.scss
View file

@ -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;
}
}
}
}

19
src/css/themes/blue/main/_SurahStream.scss
View file

@ -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;
}
}
}

39
src/css/themes/green.scss
View file

@ -1,40 +1,11 @@
.root .content.theme.green.rtl {
@import "green/base/colors";
direction: rtl;
}
.root .content.theme.green {
@import "green/base/colors";
.color-primary {
color: $primary-color;
}
.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;
}
--primary-color: #6d765b;
--secondary-color: #6C755A;
--accent-color: #FFF;
--white-color: #FFF;
--black-color: #444;
}
@import "green/base";
@import "green/main/SurahIndex";
@import "green/main/SurahStream";

15
src/css/themes/green/_base.scss
View file

@ -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;
}
}
}

3
src/css/themes/green/base/_colors.scss
View file

@ -1,3 +0,0 @@
$primary-color: #6d765b;
$secondary-color: #6C755A;
$accent-color: #FFF;

41
src/css/themes/green/base/_icon.scss
View file

@ -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; }
}
}

32
src/css/themes/green/base/_select.scss
View file

@ -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;
}
}
}
}

26
src/css/themes/green/main/_SurahIndex.scss
View file

@ -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;
}
}
}
}

29
src/css/themes/green/main/_SurahStream.scss
View file

@ -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;
}
}
}

2
src/js/components/SurahIndex/index.tsx
View file

@ -82,7 +82,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
</ul>
<footer className="flex flex-row justify-between mb-5 h-12 text-lg">
<a
className="flex flex-row items-center no-underline"
className="flex flex-row items-center color-black no-underline"
href={`/${locale.name}/random/`}
>
{locale.direction === "ltr" ? (

2
src/js/components/Timer/index.tsx
View file

@ -66,7 +66,7 @@ export function Timer({
}
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
? formatNumber(locale, 0)
: formatNumber(locale, ms / 1000, { maximumFractionDigits: 0 })}