From 75a72397e37fc6f20ac1b85e63e399cad68d8d20 Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Mon, 23 Oct 2023 01:49:36 -0300 Subject: [PATCH] Switch to more straight forward scss $var names --- src/css/themes/blue/_colors.scss | 8 ++++---- src/css/themes/blue/_layout.scss | 4 ++-- src/css/themes/blue/components/_Icon.scss | 14 +++++++------- src/css/themes/blue/components/_Select.scss | 4 ++-- src/css/themes/blue/pages/_SurahIndex.scss | 6 +++--- src/css/themes/blue/pages/_SurahStream.scss | 8 ++++---- src/css/themes/green/_colors.scss | 4 ++-- src/css/themes/green/_layout.scss | 4 ++-- src/css/themes/green/components/_Icon.scss | 10 +++++----- src/css/themes/green/components/_Select.scss | 4 ++-- src/css/themes/green/pages/_SurahIndex.scss | 8 ++++---- src/css/themes/green/pages/_SurahStream.scss | 14 +++++++------- 12 files changed, 44 insertions(+), 44 deletions(-) diff --git a/src/css/themes/blue/_colors.scss b/src/css/themes/blue/_colors.scss index 30a53dc..4bee7de 100644 --- a/src/css/themes/blue/_colors.scss +++ b/src/css/themes/blue/_colors.scss @@ -1,4 +1,4 @@ -$gold-primary: #ECB200; -$gold-secondary: lighten($gold-primary, 5%); -$blue-primary: darken(#e4eff8, 35%); -$white-primary: #FFF; +$gold1: #ECB200; +$gold2: lighten($gold1, 5%); +$blue1: darken(#e4eff8, 35%); +$white: #FFF; diff --git a/src/css/themes/blue/_layout.scss b/src/css/themes/blue/_layout.scss index df3b1df..28efef8 100644 --- a/src/css/themes/blue/_layout.scss +++ b/src/css/themes/blue/_layout.scss @@ -2,10 +2,10 @@ @import "colors"; .row.title { - color: $blue-primary; + color: $blue1; } .row.dropdown-row .react-select { - color: $gold-primary; + color: $gold1; } } diff --git a/src/css/themes/blue/components/_Icon.scss b/src/css/themes/blue/components/_Icon.scss index 24733c3..cc63cab 100644 --- a/src/css/themes/blue/components/_Icon.scss +++ b/src/css/themes/blue/components/_Icon.scss @@ -1,31 +1,31 @@ .play.icon { - fill: $blue-primary; - stroke: darken($blue-primary, 40%); + fill: $blue1; + stroke: darken($blue1, 40%); stroke-width: 2px; } .pause.icon { background: unset; rect { - fill: $blue-primary; - stroke: darken($blue-primary, 40%); + fill: $blue1; + stroke: darken($blue1, 40%); stroke-width: 1px; } } .refresh.icon { background: unset; - fill: $blue-primary; + fill: $blue1; } .stalled.icon { - div { background: $gold-secondary; } + div { background: $gold2; } } .sound-on.icon, .sound-off.icon { polygon { - fill: $blue-primary; + fill: $blue1; stroke-width: 2; } } diff --git a/src/css/themes/blue/components/_Select.scss b/src/css/themes/blue/components/_Select.scss index 60e2078..235ef2b 100644 --- a/src/css/themes/blue/components/_Select.scss +++ b/src/css/themes/blue/components/_Select.scss @@ -2,10 +2,10 @@ @import "themes/blue/colors"; .react-select.theme { .selected-option.blue .circle { - background: $blue-primary; + background: $blue1; } ul li.blue .circle { - background: $blue-primary; + background: $blue1; } } } diff --git a/src/css/themes/blue/pages/_SurahIndex.scss b/src/css/themes/blue/pages/_SurahIndex.scss index 9d236d8..bf0f937 100644 --- a/src/css/themes/blue/pages/_SurahIndex.scss +++ b/src/css/themes/blue/pages/_SurahIndex.scss @@ -7,17 +7,17 @@ ul.body.index li.surah a { &:active, &:link, &:visited { - color: $blue-primary; + color: $blue1; } div:first-child .id { - color: $gold-secondary; + color: $gold2; } } .row.surah.choose-random { &:active, &:link, &:visited { - color: $blue-primary; + color: $blue1; text-decoration: none; } &:hover { diff --git a/src/css/themes/blue/pages/_SurahStream.scss b/src/css/themes/blue/pages/_SurahStream.scss index 6244985..8f76c75 100644 --- a/src/css/themes/blue/pages/_SurahStream.scss +++ b/src/css/themes/blue/pages/_SurahStream.scss @@ -3,17 +3,17 @@ @import "themes/blue/components/Icon"; .row.details { - color: $gold-primary; + color: $gold1; } .row.footer .timer { - color: $blue-primary; + color: $blue1; } ul.body.stream { li.ayah { span.title span { - color: $gold-primary; + color: $gold1; } p { } } @@ -26,7 +26,7 @@ .row.dropdown-row { line-height: 30px; span.surah-name { - color: lighten($gold-primary, 25%); + color: lighten($gold1, 25%); } } } diff --git a/src/css/themes/green/_colors.scss b/src/css/themes/green/_colors.scss index 63e7be1..bdd8247 100644 --- a/src/css/themes/green/_colors.scss +++ b/src/css/themes/green/_colors.scss @@ -1,2 +1,2 @@ -$green: #606850; -$white-primary: #FFF; +$green1: #606850; +$white: #FFF; diff --git a/src/css/themes/green/_layout.scss b/src/css/themes/green/_layout.scss index f5c7dbe..889e2fd 100644 --- a/src/css/themes/green/_layout.scss +++ b/src/css/themes/green/_layout.scss @@ -2,11 +2,11 @@ @import "colors"; .row.title { - color: $green; + color: $green1; } .row.dropdown-row .react-select { background-color: transparent; - color: $green; + color: $green1; } } diff --git a/src/css/themes/green/components/_Icon.scss b/src/css/themes/green/components/_Icon.scss index 60cd59a..9e0f30a 100644 --- a/src/css/themes/green/components/_Icon.scss +++ b/src/css/themes/green/components/_Icon.scss @@ -2,8 +2,8 @@ .play.icon { background: unset; g path { - fill: $green; - stroke: $green; + fill: $green1; + stroke: $green1; stroke-width: 3px; } } @@ -11,14 +11,14 @@ .pause.icon { background: unset; g rect { - fill: $green; - stroke: $green; + fill: $green1; + stroke: $green1; stroke-width: 1px; } } .refresh.icon { background: unset; - fill: $green; + fill: $green1; } } diff --git a/src/css/themes/green/components/_Select.scss b/src/css/themes/green/components/_Select.scss index af174bb..9787628 100644 --- a/src/css/themes/green/components/_Select.scss +++ b/src/css/themes/green/components/_Select.scss @@ -2,10 +2,10 @@ @import "themes/green/colors"; .react-select.theme { .selected-option.green .circle { - background: $green; + background: $green1; } ul li.green .circle { - background: $green; + background: $green1; } } } diff --git a/src/css/themes/green/pages/_SurahIndex.scss b/src/css/themes/green/pages/_SurahIndex.scss index f089602..9c1ecf5 100644 --- a/src/css/themes/green/pages/_SurahIndex.scss +++ b/src/css/themes/green/pages/_SurahIndex.scss @@ -3,12 +3,12 @@ ul.body.index a { &:active, &:link, &:visited { - color: $green; + color: $green1; } .surah.id { - background: $green; - color: $white-primary; + background: $green1; + color: $white; border-radius: 5px; padding: 3px; } @@ -16,7 +16,7 @@ .row.surah.choose-random { &:active, &:link, &:visited { - color: $green; + color: $green1; text-decoration: none; } &:hover { diff --git a/src/css/themes/green/pages/_SurahStream.scss b/src/css/themes/green/pages/_SurahStream.scss index eec19ed..3df27d3 100644 --- a/src/css/themes/green/pages/_SurahStream.scss +++ b/src/css/themes/green/pages/_SurahStream.scss @@ -3,31 +3,31 @@ @import "themes/green/components/Icon"; .row.details { - color: $green; + color: $green1; } ul.body.stream li.ayah { span.title span:first-child { - color: $green; + color: $green1; } } .timer { - color: $green; + color: $green1; } .row .shape.refresh { background: unset; - fill: $green; + fill: $green1; } .stalled.icon { - background: $green; + background: $green1; } .sound-on.icon, .svg.sound-off.icon { polygon { - fill: $green; + fill: $green1; stroke-width: 2; } } @@ -38,7 +38,7 @@ .row.dropdown-row { .surah-name { - color: lighten($green, 15%); + color: lighten($green1, 15%); } }