mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-08-28 05:24:44 +00:00
website: fixes (#6454)
* add rtl support * enable arabic language * fix colors for navbar on RTL language and when scrolling to footer --------- Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>
This commit is contained in:
M. Sarmad Qadeer
co-authored by
Evgeny Poberezkin
Evgeny Poberezkin
parent
da02bae85e
commit
c9193fb702
@@ -15,9 +15,17 @@ body.change-nav-color {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[dir="ltr"] .logo {
|
||||
border-bottom-right-radius: 12px;
|
||||
padding-right: 24px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[dir="rtl"] .logo {
|
||||
border-bottom-left-radius: 12px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.dark .logo {
|
||||
@@ -42,9 +50,17 @@ body.change-nav-color {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[dir="ltr"] .right-links {
|
||||
border-bottom-left-radius: 12px;
|
||||
padding-left: 24px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[dir="rtl"] .right-links {
|
||||
border-bottom-right-radius: 12px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.dark .right-links {
|
||||
@@ -69,14 +85,46 @@ header#navbar {
|
||||
|
||||
header#navbar>a.logo {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
padding-left: 30px;
|
||||
padding-top: 2px;
|
||||
height: 100%;
|
||||
/* display: flex; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
[dir="ltr"] header#navbar>a.logo {
|
||||
left: 0px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
[dir="rtl"] header#navbar>a.logo {
|
||||
right: 0px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
header#navbar>a.logo.logo-light {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header#navbar>a.logo.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark header#navbar>a.logo.logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark header#navbar>a.logo.logo-dark {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[dir="rtl"].dark .change-nav-color header#navbar>a.logo.logo-light {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[dir="rtl"].dark .change-nav-color header#navbar>a.logo.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header#navbar>a.logo img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
@@ -183,7 +231,7 @@ header#navbar ul a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.change-nav-color .box-btn.token {
|
||||
.dark .change-nav-color .box-btn.token {
|
||||
background: linear-gradient(90deg, #019bfe 0%, #2e3fa0 100%);
|
||||
color: white;
|
||||
}
|
||||
@@ -219,9 +267,13 @@ header#navbar ul a span svg {
|
||||
fill: var(--nav-color);
|
||||
}
|
||||
|
||||
header#navbar nav#menu li.nav-link:hover span svg {
|
||||
[dir="ltr"] header#navbar nav#menu li.nav-link:hover span svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
[dir="rtl"] header#navbar nav#menu li.nav-link:hover span svg {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
header#navbar ul.sub-menu {
|
||||
@@ -348,6 +400,11 @@ header#navbar .nav-link:focus-within .sub-menu {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .flag-container .sub-menu {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
header#navbar button.theme-switch-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -380,14 +437,22 @@ header#navbar button.theme-switch-btn svg path {
|
||||
.right-links {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
padding-right: 20px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .right-links {
|
||||
right: 0px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .right-links {
|
||||
left: 0px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
button#cross-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
@@ -454,9 +519,16 @@ button#cross-btn {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
[dir="ltr"] header#navbar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
[dir="rtl"] header#navbar {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.dark header#navbar {
|
||||
background: #0a0f2b;
|
||||
}
|
||||
@@ -494,13 +566,20 @@ button#cross-btn {
|
||||
header#navbar nav#menu {
|
||||
position: fixed !important;
|
||||
top: 54px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 54px);
|
||||
overflow: auto;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] header#navbar nav#menu {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] header#navbar nav#menu {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
header#navbar nav#menu .nav-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -433,7 +433,6 @@ section.cover div.content p {
|
||||
.publications-btns {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
@@ -441,6 +440,14 @@ section.cover div.content p {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
[dir="ltr"] .publications-btns {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .publications-btns {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.publications-btns img {
|
||||
width: 32px;
|
||||
}
|
||||
@@ -456,8 +463,6 @@ section.cover div.content p {
|
||||
.security-btns {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
transform: translateX(calc((100vw / 2) - 50%));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
@@ -465,6 +470,16 @@ section.cover div.content p {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
[dir="ltr"] .security-btns {
|
||||
left: 0;
|
||||
transform: translateX(calc((100vw / 2) - 50%));
|
||||
}
|
||||
|
||||
[dir="rtl"] .security-btns {
|
||||
right: 0;
|
||||
transform: translateX(calc(-1 * ((100vw / 2) - 50%)));
|
||||
}
|
||||
|
||||
.security-btns img {
|
||||
height: 36px;
|
||||
}
|
||||
@@ -473,27 +488,38 @@ section.cover div.content p {
|
||||
font-size: 14px !important;
|
||||
font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
|
||||
font-weight: 300 !important;
|
||||
text-align: left;
|
||||
color: white;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
[dir="ltr"] .security-audits {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] .security-audits {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.publications-btns {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.security-btns {
|
||||
[dir="ltr"] .security-btns {
|
||||
transform: translateX(0);
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .security-btns {
|
||||
transform: translateX(0);
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.socials {
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
right: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -501,6 +527,14 @@ section.cover div.content p {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
[dir="ltr"] .socials {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .socials {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.socials a img {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
@@ -783,6 +817,12 @@ main .section-bg {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .page-2 .text-container,
|
||||
[dir="rtl"] .page-5 .text-container,
|
||||
[dir="rtl"] .page-6 .text-container {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.page-4 .text-container h2 {
|
||||
max-width: calc(var(--sec-vwu)*26) !important;
|
||||
}
|
||||
@@ -929,6 +969,10 @@ main .section-bg {
|
||||
float: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] .roadmap>p:first-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.roadmap p.title span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user