Merge pull request #3375 from bitcoin-dot-org/rtl-updates

RTL improvements

_layouts/wallet-container.html

@@ -25,7 +25,7 @@ max_wallet_text_length: 418 ## Unicode characters
         <div class="features-elements">
           {% for featureName in features %}
             <div class="features-element">
-              <div class="left-column">
+              <div class="features-element-left">
                 <img src="/img/icons/checked.svg" alt="checked" />
                 <p class="features-text">
                   {% translate wizard-feature-{{featureName}} choose-your-wallet %}

_sass/_wallets.scss

@@ -275,7 +275,7 @@ $scores: good $black 600, pass $black 600, neutral $black 600, fail $black 600;
 .line {
   display: none;
 }
-.left-column {
+.features-element-left {
   display: flex;
 }
 .close-btn {
@@ -402,6 +402,11 @@ $scores: good $black 600, pass $black 600, neutral $black 600, fail $black 600;
     justify-content: flex-start;
   }
 }
+@media screen and (max-width: 768px) {
+  .left-column {
+    flex-direction: column;
+  }
+}
 @media screen and (max-width: 700px) {
   .wallet-accordion-btn {
     display: flex;

css/rtl.scss

@@ -39,6 +39,7 @@ p{
 .menusimple li a:visited,
 .menusimple li a:link{
 	font-family:'DroidNaskh', sans-serif;
+	text-align: right;
 }
 .menusimple li ul{
 	right:0;
@@ -50,6 +51,11 @@ p{
 .footermenu a{
 	margin-right:0;
 	margin-left:15px;
+	text-align: right;
+	direction: rtl;
+}
+.footer-title {
+	text-align: right;
 }
 .statusmenu{
 	padding-left:0;
@@ -85,6 +91,9 @@ h2 .rssicon{
 .mainlist-item img {
 	margin: 0 0 0 25px;
 }
+.maindesc-text {
+	text-align: right;
+}
 .contributors{
 	text-align:right;
 }
@@ -159,6 +168,16 @@ h2 .rssicon{
 	border-left:0;
 	margin-right:-1px
 }
+.start p {
+	text-align: right;
+}
+.right-column div {
+	left: auto;
+	right: 0;
+}
+.right-column h2 {
+	text-align: left;
+}
 .anchorAf a{
 	left:0;
 	right:-24px;
@@ -298,6 +317,51 @@ h2 .rssicon{
 }
 .toc-row {
 	direction: ltr;
+	flex-direction: row-reverse;
+}
+.toc > div {
+	padding: 0 0 0 35px;
+}
+.toc div>ul>li>a {
+	text-align: right;
+	direction: rtl;
+}
+.toc div>ul>li>ul a {
+	text-align: right;
+	direction: rtl;
+	padding: 0 20px 0 0;
+}
+.toc + .toccontent {
+	border-left: none;
+	border-right: 1px solid #dfdfdf;
+}
+.toccontent p {
+	direction: rtl;
+	text-align: right;
+}
+.toccontent li {
+	text-align: right;
+	direction: rtl;
+}
+.boxexpand>h1:first-child,
+.boxexpand>h2:first-child,
+.boxexpand>h3:first-child {
+	text-align: right;
+	direction: rtl;
+}
+.boxexpand.expanded>h1:first-child,
+.boxexpand.expanded>h2:first-child,
+.boxexpand.expanded>h3:first-child {
+	padding: 40px 30px 15px 35px;	
+}
+.boxexpand>h1:first-child::after,
+.boxexpand>h2:first-child::after,
+.boxexpand>h3:first-child::after {
+	right: auto;
+	left: 30px;
+}
+.toc ul, .toc li {
+	text-align: right;
 }
 .btn-container {
 	direction: ltr;
@@ -317,6 +381,22 @@ h2 .rssicon{
 .own-text {
 	direction: rtl;
 }
+.own-block {
+	flex-direction: row-reverse;
+}
+.own h3,
+.own p {
+	text-align: right;
+}
+.own-timeline-number {
+	margin: 0 0 0 95px;
+}
+.controll p {
+	text-align: right;
+}
+.mission li {
+	text-align: right;
+}
 .helper-intro-text {
 	text-align: right;
 }
@@ -356,6 +436,9 @@ h2 .rssicon{
 .helper-change-btn {
 	margin: 0 20px 0 0;
 }
+.helper-checkbox-title {
+	text-align: right;
+}
 .helper-checkbox-text {
 	padding: 0 45px 0 0;
 }
@@ -446,6 +529,18 @@ h2 .rssicon{
 	left: auto;
 	right: 15px;
 }
+.download-text {
+	text-align: right;
+}
+.two-column-row:nth-child(odd) .column-text {
+	margin: 0 30px 0 0;
+}
+.two-column-row:nth-child(even) .column-text {
+	margin: 0 0 0 30px;
+}
+.column-text p {
+	text-align: right;
+}
 /*Override UbuntuBold by Droid Naskh*/
 
 @font-face{font-family:'DroidNaskh';src:url('/font/droidnaskh/droidnaskh-regular.eot');font-weight:normal;font-style:normal;}
@@ -567,6 +662,30 @@ h2 .rssicon{
     left: -20px;
 	}
 }
+@media screen and (max-width: 768px) {
+	.start {
+		padding: 0 15px 50px 0;
+	}
+	.start-block {
+		padding-left: 0;
+		padding-right: 30px;
+	}
+	.start-block:not(:last-child)::before {
+		left: auto;
+		right: 0;
+	}
+	.start .start-block::after {
+		left: auto;
+    right: 0;
+		transform: translate(50%, -4px);
+	}
+	.left-column, .left-column h2 {
+		text-align: right;
+	}
+	.right-column, .right-column h2 {
+		text-align: right;
+	}
+}
 @media screen and (max-width: 700px) {
 	.helper-platforms-section + .helper-platforms-section {
 		margin: 30px 0 0;
@@ -706,6 +825,18 @@ h2 .rssicon{
 	.is-expanded+.accordion-content {
     direction: ltr;
 	}
+	.own-timeline-number {
+		margin: 0 0 0 60px;
+  }
+	.two-column-row:nth-child(odd) .column-text {
+		margin: 0;
+	}
+	.two-column-row:nth-child(even) .column-text {
+		margin: 0;
+	}
+	.toc>div {
+		padding: 0 15px 0 20px;
+	}
 }
 @media handheld, only screen and ( max-width: 40em ), only screen and ( max-device-width: 40em ){
 	.maincard img {
@@ -714,4 +845,13 @@ h2 .rssicon{
 	.maincard {
 		text-align: right;
 	}
+	.own-timeline-number {
+		margin: 0 0 0 20px;
+  }
+	.toc-row {
+		flex-direction: column;
+	}
+	.toc>div {
+		padding: 0;
+	}
 }