From f5550d2fe4d051c48a5e01c301998813485bdb2f Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Sat, 10 Aug 2019 16:47:03 -0400
Subject: [PATCH] translate header style

---
 resources/components/common.less            |  4 +++
 resources/components/page-tools.less        |  2 +-
 resources/variables.less                    |  9 +++----
 skin.json                                   |  1 +
 skinStyles/ext.relatedArticles.cards.less   |  1 +
 skinStyles/ext.translate.less               | 27 +++++++++++++++++++++
 skinStyles/ext.translate.tag.languages.less |  4 +++
 7 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 skinStyles/ext.translate.less

diff --git a/resources/components/common.less b/resources/components/common.less
index f3bf3f87..d8accb4b 100644
--- a/resources/components/common.less
+++ b/resources/components/common.less
@@ -34,6 +34,10 @@ table {
   overflow: auto;
 }
 
+hr {
+	display: none;
+}
+
 ul {
   list-style-type: square;
 }
diff --git a/resources/components/page-tools.less b/resources/components/page-tools.less
index cdd6f75a..499b476a 100644
--- a/resources/components/page-tools.less
+++ b/resources/components/page-tools.less
@@ -124,7 +124,7 @@
 }
 
 // TODO: Flexible value
-@media only screen and (max-width: 1250px) {
+@media only screen and (max-width:  @screen2) {
   #page-tools {
     position: relative;
     margin-left: @margin-side / 2;
diff --git a/resources/variables.less b/resources/variables.less
index a83145a5..e6a39c2e 100644
--- a/resources/variables.less
+++ b/resources/variables.less
@@ -173,8 +173,7 @@
  * Viewports
  */
 
- @screen0: @page-width - @margin-side * 7;
- @screen1: @page-width + @margin-side * 2;
- @screen2: @footer-width;
- @screen3: @footer-width + @margin-side * 8;
- 
+ @screen0: @page-width - @margin-side * 7; // 720px
+ @screen1: @page-width + @margin-side * 2; // 900px
+ @screen2: @footer-width; // 1250px
+ @screen3: @footer-width + @margin-side * 8; // 1410px
diff --git a/skin.json b/skin.json
index 2a3e0d04..4b7b846f 100644
--- a/skin.json
+++ b/skin.json
@@ -169,6 +169,7 @@
 			"+ext.echo.styles.badge": "skinStyles/echo.styles.badge.less",
 			"+ext.relatedArticles.cards": "skinStyles/ext.relatedArticles.cards.less",
 			"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less",
+			"+ext.translate": "skinStyles/ext.translate.less",
 			"+ext.translate.tag.languages": "skinStyles/ext.translate.tag.languages.less",
 			"+ext.uls.pt": "skinStyles/ext.uls.pt.less",
 			"+ext.visualEditor.core": "skinStyles/ext.visualEditor.core.less"
diff --git a/skinStyles/ext.relatedArticles.cards.less b/skinStyles/ext.relatedArticles.cards.less
index 0aad0c6d..9d40e376 100644
--- a/skinStyles/ext.relatedArticles.cards.less
+++ b/skinStyles/ext.relatedArticles.cards.less
@@ -9,6 +9,7 @@
 .ext-related-articles-card-list {
 	margin-top: 0;
 	padding-top: @content-margin-top; // Give room for shadows and translate
+	overflow: visible; // Show shadow
 
 	.ext-related-articles-card {
 		border: 0!important;
diff --git a/skinStyles/ext.translate.less b/skinStyles/ext.translate.less
new file mode 100644
index 00000000..be9fe6c4
--- /dev/null
+++ b/skinStyles/ext.translate.less
@@ -0,0 +1,27 @@
+/*
+ * Citizen - Translate Styles
+ * https://starcitizen.tools
+*/
+
+@import '../resources/variables.less';
+
+.mw-pt-translate-header {
+	margin: 8px 0 0 ~"calc(-@{page-width} / 2 + 310px)";
+	width: 90px;
+	position: absolute;
+	border-top: 1px solid currentColor;
+	padding-top: @margin-side / 2;
+	margin-top: 8px;
+	color: #a2a9b1;
+	text-align: left;
+	opacity: 1;
+	transition: @transition-opacity;
+}
+
+@media only screen and (max-width: @screen2) {
+  .mw-pt-translate-header {
+		z-index: -1; // Not interactable
+		pointer-events: none; // Not interactable
+		opacity: 0;
+	}
+}
diff --git a/skinStyles/ext.translate.tag.languages.less b/skinStyles/ext.translate.tag.languages.less
index 877d0822..31cf2053 100644
--- a/skinStyles/ext.translate.tag.languages.less
+++ b/skinStyles/ext.translate.tag.languages.less
@@ -38,6 +38,10 @@
 .mw-pt-languages-ui {
 	font-weight: 400;
 	.boxshadow(2)!important;
+
+	&:hover {
+		transform: none!important;
+	}
 }
 
 .mw-pt-progress {