translate header style

resources/components/common.less

@@ -34,6 +34,10 @@ table {
   overflow: auto;
 }
 
+hr {
+	display: none;
+}
+
 ul {
   list-style-type: square;
 }

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;

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

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"

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;

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;
+	}
+}

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 {