From aaea2cc7e67a3e5d734c79d4e0ac6c385b620e15 Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Mon, 30 Oct 2023 01:01:40 -0300 Subject: [PATCH] Add custom scrollbar rules, improve CSS --- src/css/_layout.scss | 30 +++++++++++------ src/css/components/Scrollbar.scss | 11 +++++++ src/css/components/Select.scss | 22 ++++++------- src/css/pages/SurahIndex.scss | 5 +++ src/css/pages/SurahStream.scss | 6 ++++ src/css/themes/blue.scss | 1 + .../themes/blue/components/_Scrollbar.scss | 32 +++++++++++++++++++ src/css/themes/green.scss | 1 + .../themes/green/components/_Scrollbar.scss | 32 +++++++++++++++++++ src/js/components/Select.tsx | 2 +- 10 files changed, 121 insertions(+), 21 deletions(-) create mode 100644 src/css/components/Scrollbar.scss create mode 100644 src/css/themes/blue/components/_Scrollbar.scss create mode 100644 src/css/themes/green/components/_Scrollbar.scss diff --git a/src/css/_layout.scss b/src/css/_layout.scss index cc98fda..5da6870 100644 --- a/src/css/_layout.scss +++ b/src/css/_layout.scss @@ -1,5 +1,5 @@ $black: #454545; -$max-width: 856px; +$max-width: 1024px; html[lang="en"] { font-family: "Kanit Regular"; @@ -43,24 +43,32 @@ body .root .content.theme { } } - nav { + nav, div { display: flex; + flex-wrap: wrap; justify-content: space-between; - min-height: 35px; + } - .react-select { + nav { + .react-select { display: flex; - justify-content: center; + flex-direction: row; + align-items: center; } - .react-select.theme { - min-width: 35px; + justify-content: flex-start; } - .react-select.language { + justify-content: flex-end; min-width: 70px; text-align: right; - li { font-family: "Kanit Regular"; } + ul li { + align-items: flex-start; + font-family: "Kanit Regular"; + } + } + .br { + width: 100%; } } } @@ -92,6 +100,10 @@ body .root .content.en { h1 { font-size: x-large; } + header { + nav, div { + } + } } body .root .content.ar { diff --git a/src/css/components/Scrollbar.scss b/src/css/components/Scrollbar.scss new file mode 100644 index 0000000..5a3c29e --- /dev/null +++ b/src/css/components/Scrollbar.scss @@ -0,0 +1,11 @@ +.content.theme { + ul.body { + scrollbar-width: thin; + + /* Chrome, Edge and Safari */ + &::-webkit-scrollbar { + height: 10px; + width: 15px; + } + } +} diff --git a/src/css/components/Select.scss b/src/css/components/Select.scss index b8a5721..d54aa92 100644 --- a/src/css/components/Select.scss +++ b/src/css/components/Select.scss @@ -4,10 +4,9 @@ flex-direction: column; height: 20px; - z-index: 1; + z-index: 3; .selected-option { - z-index: 2; cursor: pointer; } @@ -24,13 +23,12 @@ width: 100%; font-weight: normal; cursor: pointer; + background: #fff; } } .react-select.language { - display: flex; - align-items: flex-end; - flex-direction: column-reverse; + align-items: flex-start; .selected-option.ar { font-size: large; @@ -43,7 +41,7 @@ align-items: center; justify-content: center; font-size: medium; - min-height: 35px; + height: 30px; min-width: 125px; } @@ -54,7 +52,7 @@ li.ar { display: flex; - align-items: flex-start; + align-items: center; justify-content: end; font-family: "Amiri Quran Regular"; font-size: large; @@ -96,8 +94,7 @@ .react-select.language { ul { li.en { - display: flex; - visibility: hidden; + display: none; } } } @@ -105,13 +102,16 @@ .content.theme.ar { .react-select.language { + .selected-option { + line-height: 0; + } ul { li { + align-items: center; justify-content: flex-end; } li.ar { - display: flex; - visibility: hidden; + display: none; } } } diff --git a/src/css/pages/SurahIndex.scss b/src/css/pages/SurahIndex.scss index 4b46fd8..d5229df 100644 --- a/src/css/pages/SurahIndex.scss +++ b/src/css/pages/SurahIndex.scss @@ -1,8 +1,13 @@ @import "layout"; @import "components/Select"; @import "components/Icon"; +@import "components/Scrollbar"; body .root .content.theme { + header { + height: 12vh; + } + ul.body.index { li.surah a { display: flex; diff --git a/src/css/pages/SurahStream.scss b/src/css/pages/SurahStream.scss index 4ffae14..5cd3523 100644 --- a/src/css/pages/SurahStream.scss +++ b/src/css/pages/SurahStream.scss @@ -1,6 +1,7 @@ @import "layout"; @import "components/Select"; @import "components/Icon"; +@import "components/Scrollbar"; .root .content.theme { ul.body.stream { @@ -51,6 +52,11 @@ } .content.theme.en { + header { + nav { + height: 4vh; + } + } ul.body.stream { li { padding: 10px 0 0 0; } } diff --git a/src/css/themes/blue.scss b/src/css/themes/blue.scss index 31c08f0..3fe9435 100644 --- a/src/css/themes/blue.scss +++ b/src/css/themes/blue.scss @@ -3,6 +3,7 @@ @import "blue/pages/SurahStream"; @import "blue/components/Select"; @import "blue/components/Icon"; +@import "blue/components/Scrollbar"; .root .content.theme.blue.ar { direction: rtl; diff --git a/src/css/themes/blue/components/_Scrollbar.scss b/src/css/themes/blue/components/_Scrollbar.scss new file mode 100644 index 0000000..3cb8ad1 --- /dev/null +++ b/src/css/themes/blue/components/_Scrollbar.scss @@ -0,0 +1,32 @@ +.content.theme.blue { + ul.body { + @import "themes/blue/colors"; + scrollbar-color: $blue1; + + ::-webkit-scrollbar-track { + border-radius: 5px; + background-color: #FFF; + } + + ::-webkit-scrollbar-track:hover { + background-color: lighten($blue1, 35%); + } + + ::-webkit-scrollbar-track:active { + background-color: lighten($blue1, 35%); + } + + ::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: $blue1; + } + + ::-webkit-scrollbar-thumb:hover { + background-color: blue1; + } + + ::-webkit-scrollbar-thumb:active { + background-color: $blue1; + } + } +} diff --git a/src/css/themes/green.scss b/src/css/themes/green.scss index 294e704..298d526 100644 --- a/src/css/themes/green.scss +++ b/src/css/themes/green.scss @@ -3,6 +3,7 @@ @import "green/pages/SurahStream"; @import "green/components/Select"; @import "green/components/Icon"; +@import "green/components/Scrollbar"; .root .content.theme.green.ar { @import "green/colors"; diff --git a/src/css/themes/green/components/_Scrollbar.scss b/src/css/themes/green/components/_Scrollbar.scss new file mode 100644 index 0000000..d50b46c --- /dev/null +++ b/src/css/themes/green/components/_Scrollbar.scss @@ -0,0 +1,32 @@ +.content.theme.green { + ul.body { + @import "themes/green/colors"; + scrollbar-color: $green1; + + ::-webkit-scrollbar-track { + border-radius: 5px; + background-color: #FFF; + } + + ::-webkit-scrollbar-track:hover { + background-color: #FFF; + } + + ::-webkit-scrollbar-track:active { + background-color: #FFF; + } + + ::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: $green1; + } + + ::-webkit-scrollbar-thumb:hover { + background-color: $green1; + } + + ::-webkit-scrollbar-thumb:active { + background-color: $green1; + } + } +} diff --git a/src/js/components/Select.tsx b/src/js/components/Select.tsx index 48fcefe..359fb0d 100644 --- a/src/js/components/Select.tsx +++ b/src/js/components/Select.tsx @@ -36,7 +36,7 @@ export function Select({ value, children, onChange, className }: Props) { > {selectedOption.props.children} - +