0x1eef
11bd1105fb
When changing between languages, the transition between pages can cause UI glitches, where text could change font for a brief second. The fix makes the main content invisible by default, and applies the 'invisible' class just before switching languages. After the main content has rendered, the 'invisible' class is removed. These changes effectively remove the UI glitches that were present when switching languages.
92 lines
1.3 KiB
SCSS
92 lines
1.3 KiB
SCSS
$black: #454545;
|
|
$max-width: 728px;
|
|
|
|
html[lang="en"] {
|
|
font-family: "Kanit Regular";
|
|
}
|
|
|
|
html[lang="ar"] {
|
|
font-family: "Amiri Quran Regular";
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
html body {
|
|
color: $black;
|
|
height: 85%;
|
|
}
|
|
|
|
body .root {
|
|
height: 100%;
|
|
}
|
|
|
|
body .root .content {
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
max-width: $max-width;
|
|
height: 90%;
|
|
|
|
@media screen and (max-width: $max-width) {
|
|
width: 350px;
|
|
}
|
|
|
|
a.title {
|
|
display: flex;
|
|
place-content: center;
|
|
text-decoration: none;
|
|
width: 100%;
|
|
font-size: large;
|
|
line-height: 38px;
|
|
}
|
|
|
|
ul.body {
|
|
clear: both;
|
|
list-style-type: none;
|
|
height: 90%;
|
|
padding: 0;
|
|
|
|
/* Height of 625px, or less */
|
|
@media screen and (max-height: 625px) {
|
|
height: 330px;
|
|
}
|
|
|
|
/* Height of 595px, or less */
|
|
@media screen and (max-height: 595px) {
|
|
height: 310px;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
direction: ltr;
|
|
}
|
|
|
|
.row.dropdown-row {
|
|
align-items: flex-end;
|
|
line-height: 30px;
|
|
|
|
.react-select.theme {
|
|
width: 35px;
|
|
}
|
|
|
|
.react-select.language {
|
|
width: 70px;
|
|
text-align: right;
|
|
li { font-family: "Kanit Regular"; }
|
|
}
|
|
}
|
|
}
|
|
|
|
body .root .content.ar {
|
|
a.title {
|
|
font-size: xx-large;
|
|
}
|
|
}
|
|
|
|
.invisible {
|
|
display: none !important;
|
|
}
|