From 3bf9f5ba4242d244b2eadaa3f5080211ea2bc8bf Mon Sep 17 00:00:00 2001
From: ItielMaN <itiel_yn8@walla.com>
Date: Sat, 21 Mar 2020 23:28:35 +0200
Subject: [PATCH] Convert CSS usage to logical properties

---
 src/content_script.css | 395 +++++++++++++++++++++--------------------
 src/panel.css          |  45 +++--
 2 files changed, 227 insertions(+), 213 deletions(-)

diff --git a/src/content_script.css b/src/content_script.css
index 30f49434e..c1ba80a74 100644
--- a/src/content_script.css
+++ b/src/content_script.css
@@ -1,335 +1,336 @@
 /* Button Replacement */
 .fbc-loginButton {
-	background-size: contain;
-	background-position: center;
-	background-repeat: none;
-	cursor: pointer;
+  background-size: contain;
+  background-position: center;
+  background-repeat: none;
+  cursor: pointer;
 }
 
 .fbc-loginButton.fbc-size-large.fbc-button-type-continue_with {
-	height: 40px;
-	width: 252px;
-	background-image: url(/img/login_continue_large.png);
+  height: 40px;
+  width: 252px;
+  background-image: url(/img/login_continue_large.png);
 }
 
 .fbc-loginButton.fbc-size-medium.fbc-button-type-continue_with {
-	height: 28px;
-	width: 180px;
-	background-image: url(/img/login_continue_medium.png);
+  height: 28px;
+  width: 180px;
+  background-image: url(/img/login_continue_medium.png);
 }
 
 .fbc-loginButton.fbc-size-small.fbc-button-type-continue_with {
-	height: 20px;
-	width: 154px;
-	background-image: url(/img/login_continue_small.png);
+  height: 20px;
+  width: 154px;
+  background-image: url(/img/login_continue_small.png);
 }
 
 .fbc-loginButton.fbc-size-large.fbc-button-type-login_width {
-	height: 40px;
-	width: 236px;
-	background-image: url(/img/login_login_large.png);
+  height: 40px;
+  width: 236px;
+  background-image: url(/img/login_login_large.png);
 }
 
 .fbc-loginButton.fbc-size-medium.fbc-button-type-login_width {
-	height: 28px;
-	width: 166px;
-	background-image: url(/img/login_login_medium.png);
+  height: 28px;
+  width: 166px;
+  background-image: url(/img/login_login_medium.png);
 }
 
 .fbc-loginButton.fbc-size-small.fbc-button-type-login_width {
-	height: 20px;
-	width: 62px;
-	background-image: url(/img/login_login_small.png);
+  height: 20px;
+  width: 62px;
+  background-image: url(/img/login_login_small.png);
 }
 
 /* Overlay */
 
 .fbc-badge {
-	all: initial;
-	position: absolute;
-	z-index: 100;
-	transition: opacity 0.2s ease-out;
-	font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
-	--transition: all .15s cubic-bezier(.07,.95,0,1);
-	--blue60: #0060df;
-	--blue70: #003eaa;
-	--black: #000000;
-	--white: #ffffff;
+  all: initial;
+  position: absolute;
+  z-index: 100;
+  transition: opacity 0.2s ease-out;
+  font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
+  --transition: all .15s cubic-bezier(.07,.95,0,1);
+  --blue60: #0060df;
+  --blue70: #003eaa;
+  --black: #000000;
+  --white: #ffffff;
 }
 
 .fbc-badge.fbc-badge-disabled {
-	display: none;
-	visibility: hidden;
-	opacity: 0;
+  display: none;
+  visibility: hidden;
+  opacity: 0;
 }
 
 .fbc-badge-fence {
-	display: block;
-	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
-	background-position: center center;
-	background-size: 16px auto, 100%;
-	background-image: url(/img/fence-large.svg), linear-gradient(-45deg, #6200A4, #D70022);
-	background-repeat: no-repeat;
-	border-radius: 100%;
-	width: 28px;
-	height: 28px;
-	padding: 0;
-	border: 1px solid white;
-	cursor: pointer;
+  display: block;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
+  background-position: center center;
+  background-size: 16px auto, 100%;
+  background-image: url(/img/fence-large.svg), linear-gradient(-45deg, #6200A4, #D70022);
+  background-repeat: no-repeat;
+  border-radius: 100%;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid white;
+  cursor: pointer;
 }
 
 .fbc-badge.fbc-badge-small .fbc-badge-fence {
-	background-size: 7px auto, 100%;
-	background-image: url(/img/fence-small.svg), linear-gradient(-45deg, #6200A4, #D70022);
-	width: 17px;
-	height: 17px;
+  background-size: 7px auto, 100%;
+  background-image: url(/img/fence-small.svg), linear-gradient(-45deg, #6200A4, #D70022);
+  width: 17px;
+  height: 17px;
 }
 
 .fbc-badge.fbc-badge-fixed {
-	position: fixed;
+  position: fixed;
 }
 
 .fbc-badge:hover .fbc-badge-tooltip {
-	display: block;
+  display: block;
 }
 
 .fbc-badge-share.fbc-badge-tooltip-active .fbc-badge-tooltip {
-	display: block;
+  display: block;
 }
 
 .fbc-badge.active:hover .fbc-badge-tooltip {
-	display: none;
+  display: none;
 }
 
 .fbc-badge.active .fbc-badge-prompt {
-	display: block;
+  display: block;
 }
 
 .fbc-badge-share-passive:hover {
-	display: block;
-	visibility: visible;
-	opacity: 1;
+  display: block;
+  visibility: visible;
+  opacity: 1;
 }
 
 /* Only show first Share badge   */
 .fbc-badge-share-passive, .fbc-badge-share-passive.fbc-badge-share:not(.fbc-badge-disabled), .fbc-badge-share.fbc-badge-disabled, .fbc-badge-share:not(.fbc-badge-disabled):not(.fbc-badge-tooltip-active) ~ .fbc-badge-share:not(.fbc-badge-disabled):not(.fbc-badge-tooltip-active) {
-	display: none;
-	visibility: hidden;
-	opacity: 0;
+  display: none;
+  visibility: hidden;
+  opacity: 0;
 }
 
 .fbc-badge-share:not(.fbc-badge-disabled), .fbc-badge-share.fbc-badge-tooltip-active:not(.fbc-badge-disabled) {
-	display: block;
-	visibility: visible;
-	opacity: 1;
+  display: block;
+  visibility: visible;
+  opacity: 1;
 }
 
 .fbc-badge-prompt {
-	display: none;
-	width: 345px;
-	position: absolute;
-	left: calc( 100% + 20px);
-	top: 50%;
+  display: none;
+  width: 345px;
+  position: absolute;
+  inset-inline-start: calc( 100% + 20px);
+  top: 50%;
   transform: translateY(-50%);
-	color: var(--black);
-	box-shadow: 0 5px 12px 0 rgba(0,0,0,0.2);
-	border: 1px solid rgba(0,0,0,0.2);
-	padding: 0 0 40px;
+  color: var(--black);
+  box-shadow: 0 5px 12px 0 rgba(0,0,0,0.2);
+  border: 1px solid rgba(0,0,0,0.2);
+  padding: 0 0 40px;
 }
 
 .fbc-badge-prompt:after {
-	content: " ";
-	position: absolute;
-	left: -10px;
-	top: 50%;
-	margin-top: -10px;
-	width: 0;
-	height: 0;
-	border-style: solid;
-	border-width: 10px 10px 10px 0;
-	border-color: transparent var(--white) transparent;
+  content: " ";
+  position: absolute;
+  inset-inline-start: -10px;
+  top: 50%;
+  margin-top: -10px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent var(--white) transparent;
 }
 
 .fbc-badge-prompt-align-right .fbc-badge-prompt {
-	left: auto;
-	right: calc( 100% + 20px);
+  inset-inline-start: auto;
+  inset-inline-end: calc( 100% + 20px);
 }
 
 .fbc-badge-prompt-align-right .fbc-badge-prompt:after {
-	left: auto;
-	right: -10px;
-	border-width: 10px 0 10px 10px;
+  inset-inline-start: auto;
+  inset-inline-end: -10px;
+  border-width: 10px 0 10px 10px;
 }
 
 .fbc-badge-prompt-align-top .fbc-badge-prompt {
-	top: -7px;
-	transform: none;
+  top: -7px;
+  transform: none;
 }
 
 .fbc-badge-prompt-align-top .fbc-badge-prompt:after {
-	top: 16px;
+  top: 16px;
 }
 
 .fbc-badge-prompt-align-bottom .fbc-badge-prompt {
-	top: auto;
-	bottom: -20px;
-	transform: none;
+  top: auto;
+  bottom: -20px;
+  transform: none;
 }
 
 .fbc-badge-prompt-align-bottom .fbc-badge-prompt:after {
-	display: none;
+  display: none;
 }
 
 .fbc-badge-prompt h1 {
-	all: unset;
-	letter-spacing: -0.1px;
-	font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
-	font-size: 13px;
-	font-weight: 700;
-	height: 40px;
-	display: flex;
-	width: 100%;
-	margin: 0;
-	padding: 0;
-	justify-content: center;
-	align-items: center;
-	text-align: center;
-	border-bottom: 1px solid #E9E9E9;
-	background: white;
-	color: var(--black);
+  all: unset;
+  letter-spacing: -0.1px;
+  font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
+  font-size: 13px;
+  font-weight: 700;
+  height: 40px;
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-bottom: 1px solid #E9E9E9;
+  background: white;
+  color: var(--black);
 }
 
 .fbc-badge-prompt-contents {
-	padding: 20px;
-	background: var(--white);
+  padding: 20px;
+  background: var(--white);
 }
 
 .fbc-badge-prompt p {
-	all: unset;
-	font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
-	display: block;
-	padding: 0 0 20px;
-	margin: 0;
-	font-size: 13px;
-	line-height: 17px;
-	color: var(--black);
+  all: unset;
+  font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
+  display: block;
+  padding: 0 0 20px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 17px;
+  color: var(--black);
 }
 
 .fbc-badge-prompt p:first-of-type {
-	font-weight: 600;
+  font-weight: 600;
 }
 
 .fbc-badge-prompt form {
-	all: unset;
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
+  all: unset;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .fbc-badge-prompt input {
-	all: unset;
-	margin: 0 5px 0 0;
-	appearance: checkbox;
-	-moz-appearance: checkbox;
-	cursor: pointer;
-	width: 13px;
-	height: 13px;
-	line-height: 14px;
-	display: inline-block;
+  all: unset;
+  margin-block: 0;
+  margin-inline: 0 5px;
+  appearance: checkbox;
+  -moz-appearance: checkbox;
+  cursor: pointer;
+  width: 13px;
+  height: 13px;
+  line-height: 14px;
+  display: inline-block;
 }
 
 .fbc-badge-prompt label {
-	all: unset;
-	font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
-	font-size: 12px;
-	line-height: 16px;
-	color: #0C0C0D;
-	margin: 0;
-	font-weight: normal;
-	cursor: pointer;
-	line-height: 20px;
+  all: unset;
+  font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
+  font-size: 12px;
+  line-height: 16px;
+  color: #0C0C0D;
+  margin: 0;
+  font-weight: normal;
+  cursor: pointer;
+  line-height: 20px;
 }
 
 .fbc-badge-prompt-buttons {
-	position: absolute;
-	bottom: 0.15px;
-	height: 40px;
-	width: 100%;
-	z-index: 0;
+  position: absolute;
+  bottom: 0.15px;
+  height: 40px;
+  width: 100%;
+  z-index: 0;
 }
 
 .fbc-badge-prompt-buttons button {
-	font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
-	all: unset;
-	display: inline-block;
-	height: 40px;
-	width: 50%;
-	appearance: none;
-	border: 0;
-	letter-spacing: -0.1px;
-	font-size: 13px;
-	line-height: 17px;
-	background-color: #F2F2F2;
-	border-top: 1px solid #E9E9E9;
-	transition: var(--transition);
-	color: var(--black);
-	cursor: pointer;
-	text-align: center;
+  font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
+  all: unset;
+  display: inline-block;
+  height: 40px;
+  width: 50%;
+  appearance: none;
+  border: 0;
+  letter-spacing: -0.1px;
+  font-size: 13px;
+  line-height: 17px;
+  background-color: #F2F2F2;
+  border-top: 1px solid #E9E9E9;
+  transition: var(--transition);
+  color: var(--black);
+  cursor: pointer;
+  text-align: center;
 }
 
 .fbc-badge-prompt-buttons button:hover {
-	background: #E9E9E9;
-	color: var(--black);
+  background: #E9E9E9;
+  color: var(--black);
 }
 
 .fbc-badge-prompt-buttons button:last-child {
-	border-top: 1px solid var(--blue70);
-	background: var(--blue60);
-	color: var(--white);
+  border-top: 1px solid var(--blue70);
+  background: var(--blue60);
+  color: var(--white);
 }
 
 .fbc-badge-prompt-buttons button:last-child:hover {
-	background: var(--blue70);
-	color: var(--white);
+  background: var(--blue70);
+  color: var(--white);
 }
 
 
 /* Tooltip */
 .fbc-badge-tooltip {
-	display: none;
-	padding: 5px 10px 10px;
-	width: 250px;
-	max-width: 250px;
-	background: var(--white);
-	z-index: 9999;
-	position: absolute;
-	left: calc( 100% + 0.5em);
-	top: 50%;
-	color: black;
-	font-size: 13px;
-	line-height: 17px;
-	border: 1px solid #BEBEBF;
-	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
-	font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
+  display: none;
+  padding: 5px 10px 10px;
+  width: 250px;
+  max-width: 250px;
+  background: var(--white);
+  z-index: 9999;
+  position: absolute;
+  inset-inline-start: calc( 100% + 0.5em);
+  top: 50%;
+  color: black;
+  font-size: 13px;
+  line-height: 17px;
+  border: 1px solid #BEBEBF;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+  font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
 }
 
 .fbc-badge-prompt-align-right .fbc-badge-tooltip {
-	left: auto;
-	right: calc( 100% + 0.5em );
+  inset-inline-start: auto;
+  inset-inline-end: calc( 100% + 0.5em );
 }
 
 .fbc-badge-prompt-align-bottom .fbc-badge-tooltip {
-	top: auto;
-	bottom: 25%;
+  top: auto;
+  bottom: 25%;
 }
 
 /* .fbc-badge-prompt-align-right .fbc-badge-prompt {
-	left: auto;
-	right: calc( 100% + 20px);
+  inset-inline-start: auto;
+  inset-inline-end: calc( 100% + 20px);
 }
 
 .fbc-badge-prompt-align-right .fbc-badge-prompt:after {
-	left: auto;
-	right: -10px;
-	border-width: 10px 0 10px 10px;
+  inset-inline-start: auto;
+  inset-inline-end: -10px;
+  border-width: 10px 0 10px 10px;
 } */
diff --git a/src/panel.css b/src/panel.css
index dcf872fe7..eab3a8965 100644
--- a/src/panel.css
+++ b/src/panel.css
@@ -59,7 +59,7 @@ h1 { /* "Facebook Container" headline for all panels */
 .btn-return.arrow-left {
   position: absolute;
   border: 0;
-  left: 15px;
+  inset-inline-start: 15px;
   top: 15px;
   width: 1.2rem;
   height: 1.2rem;
@@ -68,6 +68,10 @@ h1 { /* "Facebook Container" headline for all panels */
   cursor: pointer;
 }
 
+.btn-return.arrow-left:dir(rtl) {
+  background-image: url("/img/arrow-icon-right.svg");
+}
+
 h2 { /* panel sub-head for all panels */
   display: flex;
   align-items: center;
@@ -94,7 +98,7 @@ h3 {
   display: inline-block;
   width: 14px;
   height: 12px;
-  margin-left: 4px;
+  margin-inline-start: 4px;
   margin-bottom: -1px;
   content: "";
 }
@@ -111,7 +115,7 @@ h3 {
   display: inline-block;
   width: 16px;
   height: 13px;
-  margin-left: 6px;
+  margin-inline-start: 6px;
   content: "";
 }
 
@@ -155,8 +159,8 @@ a:hover {
   display: inline-block;
   top: 0;
   bottom: 0;
+  inset-inline-end: 15px;
   margin: auto;
-  right: 15px;
   height: 100%;
   width: .35rem;
   background-image: url("/img/arrow-icon-right.svg");
@@ -164,6 +168,10 @@ a:hover {
   transform: scale(1.3);
 }
 
+.highlight-on-hover::after:dir(rtl) {
+  background-image: url("/img/arrow-icon-left.svg");
+}
+
 .highlight-on-hover.add-site-to-container::after {
   width: 16px;
   background-image: url("/img/site-add-icon.svg");
@@ -194,7 +202,7 @@ a:hover {
   max-width: 250px;
   z-index: 9999;
   position: absolute;
-  left: 1rem;
+  inset-inline-start: 1rem;
   bottom: 2em;
   color: black;
   font-size: 13px;
@@ -243,7 +251,7 @@ a:hover {
   background-color: transparent;
   border: none;
   position: absolute;
-  right: 1.65rem;
+  inset-inline-end: 1.65rem;
   height: 1.1rem;
   width: 1.1rem;
   background-image: url("/img/x-close.svg");
@@ -291,10 +299,10 @@ a:hover {
 
 .bottom-btn:first-of-type { /* Onboarding Panels only: The first bottom button ("Cancel", "Back") is always gray */
   border-top: 1px solid rgba(24, 25, 26, 0.14);
-  border-right: 1px solid rgba(24, 25, 26, 0.14);
-  border-left: 0;
+  border-inline-start: 0;
+  border-inline-end: 1px solid rgba(24, 25, 26, 0.14);
   background-color: rgba(12,12,13, 0.05);
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .bottom-btn:first-of-type:hover {
@@ -303,8 +311,8 @@ a:hover {
 
 .bottom-btn:last-of-type { /* Onboarding Panels only: The second bottom button on the onboarding panels is always blue */
   border-top: 1px solid var(--blue70);
-  border-left: 1px solid var(--blue60);
-  border-right: 0;
+  border-inline-start: 1px solid var(--blue60);
+  border-inline-end: 0;
   color: rgba(255, 255, 255, 1);
   background-color: var(--blue60);
   right: 0;
@@ -330,7 +338,7 @@ a:hover {
   width: 23px;
   height: 19px;
   display: block;
-  margin-right: 3px;
+  margin-inline-end: 3px;
 }
 
 .img.in-fbc {
@@ -342,21 +350,26 @@ a:hover {
 .img.trackers-detected {
   background-image: url("/img/image-tracker-detected@2x.png");
   height: 145px;
-  margin: 1.25rem 0 1.75rem -4px;
+  margin-block: 1.25rem 1.75rem;
+  margin-inline: -4px 0;
   background-position: left, center;
 }
 
+.img.trackers-detected:dir(rtl) {
+  background-position: right, center;
+}
+
 .img.onboarding4 {
   background-image: url("/img/image-example@2x.png");
   height: 145px;
-  margin: 1rem auto 1.5rem auto;
+  margin: 1rem auto 1.5rem;
   background-position: center center;
 }
 
 .img.onboarding5 {
   background-image: url("/img/image-addsite@2x.png");
   height: 179px;
-  margin: 1rem auto 1.5rem auto;
+  margin: 1rem auto 1.5rem;
   background-position: center center;
 }
 
@@ -405,7 +418,7 @@ h3.sites-allowed {
   display: inline-block;
   width: 1.1rem;
   height: 1.1rem;
-  margin-right: 1.1rem;
+  margin-inline-end: 1.1rem;
   background-size: contain;
   background-repeat: no-repeat;
 }