al-quran.reflectslight.io/src/css/_base.scss

124 lines
1.7 KiB
SCSS

$black: #454545;
$max-width: 1024px;
html[lang="en"] {
font-family: "Kanit Regular";
}
html[lang="ar"] {
font-family: "Mada Regular";
}
html {
height: 100%;
}
html body {
color: $black;
height: 100%;
margin: 0;
}
body .root {
height: 100%;
}
body .root .content.theme {
margin: 0 auto;
width: 85%;
max-width: $max-width;
header {
.br {
width: 100%;
}
.react-select.theme {
.selected {
display: flex;
justify-content: flex-end;
}
}
.react-select.language {
ul {
position: relative;
top: 15px;
right: 0px;
}
}
}
footer {
.br {
width: 100%;
}
}
.scroll-y {
overflow-y: auto !important;
}
}
/* English-specific rules */
body .root .content.en {
h1 {
font-size: x-large;
}
header {
nav, div {
font-size: large;
}
.react-select.language {
ul {
li.ar span {
position: relative;
bottom: 3px;
}
}
}
}
ul.body {
font-size: large;
}
footer {
font-size: large;
}
}
/* Arabic-specific rules */
body .root .content.theme.ar {
header {
h1 {
font-size: xx-large;
}
nav, div {
direction: ltr;
.react-select.language {
ul {
position: relative;
top: 7.5px;
}
li.en span {
position: relative;
right: 3px;
}
}
.selected {
font-size: x-large;
}
}
}
footer {
font-size: larger;
flex-direction: row-reverse;
}
}
.invisible {
display: none !important;
}
@import "vendor/tail";
@import "base/breakpoints";
@import "base/icon";
@import "base/select";