Issue #517 Part 4: Fix tile pinning

3 files changed, 115 insertions, 18 deletions

diff --git a/application/palemoon/themes/linux/newtab/newTab.css b/application/palemoon/themes/linux/newtab/newTab.css
index 9c132892e..794f25a4e 100644
--- a/application/palemoon/themes/linux/newtab/newTab.css
+++ b/application/palemoon/themes/linux/newtab/newTab.css
@@ -145,15 +145,47 @@
   line-height: 24px;
 }
 
+.newtab-site[pinned] .newtab-title {
+  padding-inline-start: 24px;
+}
+
+.newtab-site[pinned] .newtab-title::before {
+  background-image: url(chrome://browser/skin/newtab/controls.png);
+  background-position: -74px -1px;
+  content: "";
+  left: 2px;
+  top: 2px;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
+
+.newtab-site[pinned] .newtab-title:dir(rtl)::before {
+  left: auto;
+  right: 2px;
+}
+
 /* CONTROLS */
 .newtab-control {
-  width: 24px;
-  height: 24px;
-  padding: 1px 2px 3px;
+  background-color: transparent;
+  background-size: 24px;
   border: none;
+  height: 24px;
+  width: 24px;
+  top: 4px;
   background: transparent url(chrome://browser/skin/newtab/controls.png);
 }
 
+.newtab-control-pin:dir(ltr),
+.newtab-control-block:dir(rtl) {
+  left: 4px;
+}
+
+.newtab-control-block:dir(ltr),
+.newtab-control-pin:dir(rtl) {
+  right: 4px;
+}
+
 .newtab-control-pin:hover {
   background-position: -24px 0;
 }
@@ -162,15 +194,15 @@
   background-position: -48px 0;
 }
 
-.newtab-control-pin[pinned] {
+.newtab-site[pinned] .newtab-control-pin {
   background-position: -72px 0;
 }
 
-.newtab-control-pin[pinned]:hover {
+.newtab-site[pinned] .newtab-control-pin:hover {
   background-position: -96px 0;
 }
 
-.newtab-control-pin[pinned]:active {
+.newtab-site[pinned] .newtab-control-pin:active {
   background-position: -120px 0;
 }
 
diff --git a/application/palemoon/themes/osx/newtab/newTab.css b/application/palemoon/themes/osx/newtab/newTab.css
index d0403004a..83fb0a767 100644
--- a/application/palemoon/themes/osx/newtab/newTab.css
+++ b/application/palemoon/themes/osx/newtab/newTab.css
@@ -147,15 +147,47 @@
   line-height: 24px;
 }
 
+.newtab-site[pinned] .newtab-title {
+  padding-inline-start: 24px;
+}
+
+.newtab-site[pinned] .newtab-title::before {
+  background-image: url(chrome://browser/skin/newtab/controls.png);
+  background-position: -74px -1px;
+  content: "";
+  left: 2px;
+  top: 2px;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
+
+.newtab-site[pinned] .newtab-title:dir(rtl)::before {
+  left: auto;
+  right: 2px;
+}
+
 /* CONTROLS */
 .newtab-control {
-  width: 24px;
-  height: 24px;
-  padding: 1px 2px 3px;
+  background-color: transparent;
+  background-size: 24px;
   border: none;
+  height: 24px;
+  width: 24px;
+  top: 4px;
   background: transparent url(chrome://browser/skin/newtab/controls.png);
 }
 
+.newtab-control-pin:dir(ltr),
+.newtab-control-block:dir(rtl) {
+  left: 4px;
+}
+
+.newtab-control-block:dir(ltr),
+.newtab-control-pin:dir(rtl) {
+  right: 4px;
+}
+
 .newtab-control-pin:hover {
   background-position: -24px 0;
 }
@@ -164,15 +196,15 @@
   background-position: -48px 0;
 }
 
-.newtab-control-pin[pinned] {
+.newtab-site[pinned] .newtab-control-pin {
   background-position: -72px 0;
 }
 
-.newtab-control-pin[pinned]:hover {
+.newtab-site[pinned] .newtab-control-pin:hover {
   background-position: -96px 0;
 }
 
-.newtab-control-pin[pinned]:active {
+.newtab-site[pinned] .newtab-control-pin:active {
   background-position: -120px 0;
 }
 
diff --git a/application/palemoon/themes/windows/newtab/newTab.css b/application/palemoon/themes/windows/newtab/newTab.css
index d0403004a..ec1112c9b 100644
--- a/application/palemoon/themes/windows/newtab/newTab.css
+++ b/application/palemoon/themes/windows/newtab/newTab.css
@@ -147,15 +147,47 @@
   line-height: 24px;
 }
 
+.newtab-site[pinned] .newtab-title {
+  padding-inline-start: 24px;
+}
+
+.newtab-site[pinned] .newtab-title::before {
+  background-image: url(chrome://browser/skin/newtab/controls.png);
+  background-position: -74px -1px;
+  content: "";
+  left: 2px;
+  top: 2px;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
+
+.newtab-site[pinned] .newtab-title:dir(rtl)::before {
+  left: auto;
+  right: 2px;
+}
+
 /* CONTROLS */
 .newtab-control {
-  width: 24px;
-  height: 24px;
-  padding: 1px 2px 3px;
+  background-color: transparent;
+  background-size: 24px;
   border: none;
+  height: 24px;
+  width: 24px;
+  top: 4px;
   background: transparent url(chrome://browser/skin/newtab/controls.png);
 }
 
+.newtab-control-pin:dir(ltr),
+.newtab-control-block:dir(rtl) {
+  left: 4px;
+}
+
+.newtab-control-block:dir(ltr),
+.newtab-control-pin:dir(rtl) {
+  right: 4px;
+}
+
 .newtab-control-pin:hover {
   background-position: -24px 0;
 }
@@ -164,15 +196,15 @@
   background-position: -48px 0;
 }
 
-.newtab-control-pin[pinned] {
+.newtab-site[pinned] .newtab-control-pin {
   background-position: -72px 0;
 }
 
-.newtab-control-pin[pinned]:hover {
+.newtab-site[pinned] .newtab-control-pin:hover {
   background-position: -96px 0;
 }
 
-.newtab-control-pin[pinned]:active {
+.newtab-site[pinned] .newtab-control-pin:active {
   background-position: -120px 0;
 }
 
@@ -187,3 +219,4 @@
 .newtab-control-block:active {
   background-position: -192px 0;
 }
+