src/: add src/css
This commit is contained in:
parent
b90a4b54fc
commit
8c4646ca5b
4 changed files with 174 additions and 0 deletions
17
src/css/_fonts.scss
Normal file
17
src/css/_fonts.scss
Normal file
|
@ -0,0 +1,17 @@
|
|||
@font-face {
|
||||
font-family: "Vazirmatn Regular";
|
||||
src: url('/quran/fonts/vazirmatn-regular.ttf') format('truetype');
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Kanit Regular";
|
||||
src: url('/quran/fonts/kanit-regular.ttf') format('truetype');
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto Mono Regular";
|
||||
src: url('/quran/fonts/roboto-mono-regular.ttf') format('truetype');
|
||||
font-display: block;
|
||||
}
|
94
src/css/surah.scss
Normal file
94
src/css/surah.scss
Normal file
|
@ -0,0 +1,94 @@
|
|||
@import "fonts";
|
||||
|
||||
body {
|
||||
font-family: "Kanit Regular";
|
||||
}
|
||||
|
||||
.surah .theme {
|
||||
margin: 0 auto;
|
||||
width: 450px;
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 3px;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.timer {
|
||||
margin: 0 auto;
|
||||
font-size: 75%;
|
||||
font-family: "Roboto Mono Regular";
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
font-weight: bold;
|
||||
border-radius: 10px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.flex-image {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 25px 0 25px 0;
|
||||
|
||||
.image {
|
||||
height: 78px;
|
||||
width: 78px;
|
||||
}
|
||||
}
|
||||
|
||||
.about-surah {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
ul.stream {
|
||||
clear: both;
|
||||
list-style-type: none;
|
||||
height: 400px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
li.ayah {
|
||||
span:first-child {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
margin: 3px 0 10px 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.stream.scroll-y {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes FadeIn {
|
||||
0% { opacity: 0;}
|
||||
25% { opacity: 0.25; }
|
||||
50% { opacity: 0.5; }
|
||||
75% { opacity: 0.75 }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.fade {
|
||||
animation: FadeIn 1s;
|
||||
}
|
||||
|
||||
@import "themes/moon";
|
||||
@import "themes/leaf";
|
28
src/css/themes/leaf.scss
Normal file
28
src/css/themes/leaf.scss
Normal file
|
@ -0,0 +1,28 @@
|
|||
.surah .leaf.theme {
|
||||
--green: #606850;
|
||||
--black: #333333;
|
||||
--white: #FFF;
|
||||
|
||||
color: var(--black);
|
||||
|
||||
.flex-image {
|
||||
.image {
|
||||
background-image: url("/images/leaf.svg");
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
li.ayah {
|
||||
span:first-child {
|
||||
color: var(--green);
|
||||
background-color: var(--white);
|
||||
}
|
||||
p {
|
||||
}
|
||||
}
|
||||
|
||||
.timer {
|
||||
background-color: var(--green);
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
35
src/css/themes/moon.scss
Normal file
35
src/css/themes/moon.scss
Normal file
|
@ -0,0 +1,35 @@
|
|||
.surah .moon.theme {
|
||||
--blue: #C4DCF0;
|
||||
--heavy-yellow: #ECB200;
|
||||
--light-red: #FFAF7A
|
||||
--black: #333333;
|
||||
|
||||
color: var(--black);
|
||||
|
||||
.flex-image {
|
||||
.image {
|
||||
background-image: url("/images/moon.svg");
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
li.ayah {
|
||||
span:first-child {
|
||||
color: var(--heavy-yellow);
|
||||
-webkit-text-stroke: 1px var(--black);
|
||||
}
|
||||
p {
|
||||
}
|
||||
}
|
||||
|
||||
.timer {
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
background-color: var(--heavy-yellow);
|
||||
}
|
||||
|
||||
.about-surah {
|
||||
color: var(--heavy-yellow);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue