From 783037d0e74377a5eb341a9ede52faf4d48655ed Mon Sep 17 00:00:00 2001
From: Lex Lim <hyperzlink@outlook.com>
Date: Mon, 26 Dec 2022 22:27:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=82=E4=B8=96=E7=95=8C=E7=99=BE=E7=A7=91?=
 =?UTF-8?q?=E4=B8=93=E7=94=A8=E7=9A=84=E4=B8=BB=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

异世界百科专用的主题修改
---
 includes/TimelessTemplate.php                 | 10 +++-
 resources/extensions/Echo.less                | 43 +++++++++++++----
 .../extensions/UniversalLanguageSelector.less | 16 +++++++
 resources/libraries/common-print.less         |  4 ++
 resources/mixins.less                         | 10 ++--
 resources/screen-common.less                  | 48 ++++++++++++-------
 resources/screen-desktop-mid.less             |  4 --
 resources/screen-desktop-small.less           |  2 +
 resources/screen-desktop.less                 | 10 +++-
 resources/screen-misc.less                    | 24 ++++++++++
 resources/screen-mobile.less                  |  2 +-
 resources/themes/isekai.less                  | 47 ++++++++++++++++++
 resources/variables.less                      |  4 +-
 skin.json                                     |  3 +-
 14 files changed, 189 insertions(+), 38 deletions(-)
 create mode 100644 resources/extensions/UniversalLanguageSelector.less
 create mode 100644 resources/themes/isekai.less

diff --git a/includes/TimelessTemplate.php b/includes/TimelessTemplate.php
index 38eeff2..e76e17f 100644
--- a/includes/TimelessTemplate.php
+++ b/includes/TimelessTemplate.php
@@ -108,6 +108,8 @@ class TimelessTemplate extends BaseTemplate {
 
 		$html .= Html::closeElement( 'div' );
 
+		$html .= Html::element( 'div', [ 'id' => 'mw-overscroll-bottom-cover' ] );
+
 		// The unholy echo
 		echo $html;
 	}
@@ -899,7 +901,13 @@ class TimelessTemplate extends BaseTemplate {
 				'rename',
 				'protect',
 				'unprotect',
-				'move'
+				'move',
+				'flowthreadcontrol',
+				'custom-url',
+				'cargo-purge',
+				'short-url',
+				'createdata',
+				'recreatedata'
 			] ) ) {
 				$currentSet = 'page-secondary';
 			} else {
diff --git a/resources/extensions/Echo.less b/resources/extensions/Echo.less
index 0a7feea..53993f6 100644
--- a/resources/extensions/Echo.less
+++ b/resources/extensions/Echo.less
@@ -6,10 +6,20 @@
 	}
 
 	/* Handle and position Echo icons */
-	#pt-notifications-alert .mw-echo-notifications-badge,
-	#pt-notifications-notice .mw-echo-notifications-badge {
-		// Temporary in case Echo is still -5px
-		top: 0;
+	#pt-notifications-alert,
+	#pt-notifications-notice {
+		.mw-echo-notifications-badge {
+			// Temporary in case Echo is still -5px
+			top: 0;
+
+			&.mw-echo-notifications-badge-all-read {
+				opacity: 0.333;
+			}
+
+			&.mw-echo-notifications-badge {
+				background-size: contain;
+			}
+		}
 	}
 
 	#personal-extra {
@@ -18,7 +28,7 @@
 		ul {
 			list-style: none;
 			padding: 0;
-			margin: 0.5em;
+			margin: 0.4em 0.5em;
 		}
 
 		li {
@@ -27,6 +37,12 @@
 		}
 	}
 
+	@media ( min-width: @desktop-mid-floor ) {
+		#personal-extra {
+			margin-left: 1em;
+		}
+	}
+
 	@media ( min-width: @desktop-small-floor ) {
 		div#personal {
 			padding-left: 0;
@@ -34,18 +50,29 @@
 
 		#personal-extra {
 			float: left;
+			margin-left: 0.5em;
 		}
 	}
 
 	@media ( max-width: @mobile-width ) {
 		#personal-extra {
 			position: absolute;
-			top: 0.9em;
-			right: 7.5em;
+			top: 0.8em;
+			right: 8.5em;
 
 			li {
-				margin-right: 0.75em;
+				margin-right: 1.25em;
+
+				&:last-of-type {
+					margin-right: 0;
+				}
 			}
 		}
+
+		#pt-notifications-alert .mw-echo-notifications-badge,
+		#pt-notifications-notice .mw-echo-notifications-badge {
+			width: 25px;
+			height: 25px;
+		}
 	}
 }
diff --git a/resources/extensions/UniversalLanguageSelector.less b/resources/extensions/UniversalLanguageSelector.less
new file mode 100644
index 0000000..c8e05f6
--- /dev/null
+++ b/resources/extensions/UniversalLanguageSelector.less
@@ -0,0 +1,16 @@
+#pt-uls .uls-trigger {
+    padding-top: 0 !important;
+    line-height: 1.33333333em;
+
+    &::before {
+        padding-top: 0.05em;
+    }
+}
+
+.uls-filterinput {
+    margin: 0 !important;
+}
+
+#uls-settings-block > button {
+    background-position-y: center !important;
+}
diff --git a/resources/libraries/common-print.less b/resources/libraries/common-print.less
index b43387f..a50f85f 100644
--- a/resources/libraries/common-print.less
+++ b/resources/libraries/common-print.less
@@ -71,6 +71,10 @@ h6 {
 	/* Pagination */
 	page-break-after: avoid;
 	page-break-before: avoid;
+
+	.mw-headline {
+		padding-inline-start: 8px;
+	}
 }
 
 .firstHeading {
diff --git a/resources/mixins.less b/resources/mixins.less
index 8a2a1400..61ab06c 100644
--- a/resources/mixins.less
+++ b/resources/mixins.less
@@ -41,7 +41,7 @@
 
 .box() {
 	background: @base90;
-	border: solid @base80;
+	border: solid @base75;
 	border-width: 1px 1px @border;
 	padding: 1.25em 1.75em;
 	box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
@@ -60,7 +60,7 @@
 	margin: 1em 0;
 	line-height: 1.125;
 	word-wrap: break-word;
-	font-size: 0.95em;
+	// font-size: 0.95em;
 
 	ul,
 	li {
@@ -82,7 +82,11 @@
 	}
 
 	li {
-		padding: 0.25em 0;
+		padding: 0.175em 0;
+		
+		:first-of-type {
+			padding-top: 0;
+		}
 	}
 }
 
diff --git a/resources/screen-common.less b/resources/screen-common.less
index d3e03ef..82d068f 100644
--- a/resources/screen-common.less
+++ b/resources/screen-common.less
@@ -6,6 +6,7 @@ html,
 body {
 	margin: 0;
 	padding: 0;
+	overscroll-behavior-x: none;
 }
 
 body {
@@ -13,7 +14,7 @@ body {
 	color: @text;
 	// Footer colour; results in a weird distracting dark scrollbar in firefox, but fuck firefox
 	// Setting it here avoids a jump to white after the footer, which is even more distracting
-	background: @base30;
+	background: @base80;
 	font-size: @font-size;
 	line-height: 1.5;
 }
@@ -37,20 +38,21 @@ body {
 .mw-footer-container {
 	border-top: solid 1px @base20;
 	box-shadow: inset 0 7px 2px -4px rgba( 0, 0, 0, 0.1 );
+	background-color: @base30;
 	color: @base100;
 
 	a {
-		color: darken( @blue-bright, 3% );
+		color: @base100;
 
 		&:hover {
-			color: darken( @blue-bright, 6% );
+			color: darken( @base100, 6% );
 		}
 
 		&:visited {
-			color: darken( @blue-bright, 8% );
+			color: @base100;
 
 			&:hover {
-				color: darken( @blue-bright, 12% );
+				color: darken( @base100, 6% );
 			}
 		}
 	}
@@ -60,6 +62,16 @@ body {
 	}
 }
 
+#mw-overscroll-bottom-cover {
+	position: fixed;
+	right: 0;
+	top: 50vh;
+	height: 100vh;
+	width: 100%;
+	background: #777;
+	z-index: -1;
+}
+
 #p-logo {
 	text-align: center;
 	margin: auto;
@@ -164,8 +176,8 @@ body {
 /* Footer */
 
 .mw-footer {
-	padding-top: 0.5em;
-	padding-bottom: 1em;
+	padding-top: 0.5em !important;
+	padding-bottom: 1em !important;
 
 	ul,
 	li {
@@ -333,7 +345,7 @@ a {
 
 	&:hover {
 		color: darken( @link, 10% );
-		text-decoration: underline;
+		text-decoration: none;
 	}
 
 	&:visited {
@@ -525,17 +537,17 @@ pre,
 
 	h1.firstHeading {
 		margin: 0.25em 0 0.5em;
-		border-bottom: solid 4px @blue;
+		border-bottom: solid 4px @red;
 	}
 
 	h1 {
 		font-size: 2em;
-		border-bottom: solid 3px @base70;
+		border-bottom: solid 3px @blue;
 	}
 
 	h2 {
 		font-size: 1.8em;
-		border-bottom: solid 2px @base70;
+		border-bottom: solid 2px @blue-bright;
 	}
 
 	h3 {
@@ -582,13 +594,16 @@ pre,
 			&:after {
 				content: '';
 				display: block;
-				border-bottom: solid 2px @base70;
 				overflow: hidden;
 			}
 		}
 
 		h1:after {
-			border-bottom-width: 3px;
+			border-bottom: solid 3px @blue;
+		}
+
+		h2:after {
+			border-bottom: solid 2px @blue-bright;
 		}
 	}
 }
@@ -727,14 +742,14 @@ ul#filetoc {
 }
 
 .mw-body .toctitle {
-	border-bottom: solid 2px @base70;
 	text-align: unset;
 
 	h2 {
-		font-size: 1em;
+		font-size: 1.2em;
 		font-family: @fonts;
 		margin: 0;
 		display: inline;
+		border-bottom: solid 2px @base70;
 
 		&:after {
 			display: none;
@@ -744,6 +759,7 @@ ul#filetoc {
 
 .toctogglespan {
 	float: right;
+	display: none;
 }
 
 /* Remove brackets around the show/hide button of the TOC
@@ -763,7 +779,7 @@ body :not( :checked ) > .toctogglespan:after {
 }
 
 .tocnumber {
-	color: @base20;
+	color: inherit;
 }
 
 .skin-timeless .mw-body .oo-ui-tagMultiselectWidget-handle,
diff --git a/resources/screen-desktop-mid.less b/resources/screen-desktop-mid.less
index 3839b3d..bace415 100644
--- a/resources/screen-desktop-mid.less
+++ b/resources/screen-desktop-mid.less
@@ -43,10 +43,6 @@
 	display: none;
 }
 
-.color-right {
-	background: @blue-dark;
-}
-
 .ts-inner,
 .color-middle-container {
 	max-width: @content-width - @column-right-size;
diff --git a/resources/screen-desktop-small.less b/resources/screen-desktop-small.less
index a160f5f..0b8f3ec 100644
--- a/resources/screen-desktop-small.less
+++ b/resources/screen-desktop-small.less
@@ -45,10 +45,12 @@
 	display: none !important;
 }
 
+/*
 .color-right,
 .color-middle {
 	background: @red-dark;
 }
+*/
 
 // Have these cover the fixed header color-bar using the mw-header-nav-hack (with its own color-bar at the bottom)
 #mw-site-navigation,
diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less
index de54a91..9e65423 100644
--- a/resources/screen-desktop.less
+++ b/resources/screen-desktop.less
@@ -91,6 +91,7 @@ div.mw-notification-area {
 	position: relative;
 	padding-left: 1.5em;
 	line-height: 1;
+	height: 100%;
 
 	.dropdown {
 		top: 3.15em;
@@ -104,16 +105,21 @@ div.mw-notification-area {
 	}
 
 	h2 {
+		display: flex;
+		align-items: center;
+		height: 1.8em;
 		margin: 0;
-		padding: 0.5em 0 0 25px;
+		padding: 0 0 0 25px !important;
 		font-family: @fonts-secondary;
 		font-weight: normal;
 		font-size: 1.25em;
 		background-image: url( images/user-grey.svg );
-		background-position: left 9px;
+		background-position: left center !important;
 		background-repeat: no-repeat;
 
 		.dropdown-header();
+		padding-top: 0 !important;
+		padding-bottom: 0 !important;
 
 		span {
 			display: inline-block;
diff --git a/resources/screen-misc.less b/resources/screen-misc.less
index 3a2c756..30c5424 100644
--- a/resources/screen-misc.less
+++ b/resources/screen-misc.less
@@ -25,3 +25,27 @@
 		box-shadow: none;
 	}
 }
+/*
+// Top end of large screens
+@media screen and ( min-width: 1425px ) {
+	.color-middle-container,
+	.ts-inner {
+		padding: 0 3em;
+	}
+	.color-middle {
+		margin-left: @column-left-size;
+		margin-right: @column-right-size;
+	}
+}
+
+// Top half end of mid screens
+@media screen and ( min-width: ( @desktop-small-width + @desktop-mid-width ) / 2 ) and ( max-width: @desktop-mid-width ) {
+	.ts-inner {
+		padding: 0 3em;
+	}
+	.color-middle {
+		margin-left: @column-left-size + 3em;
+		margin-right: @column-right-size + 3em;
+	}
+}
+*/
diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less
index 1160c00..fa7e2b3 100644
--- a/resources/screen-mobile.less
+++ b/resources/screen-mobile.less
@@ -1,7 +1,7 @@
 @import 'variables.less';
 
 // Override default here because mobile narrow
-@content-padding: 0.45em;
+@content-padding: 1em;
 
 /* Layout */
 
diff --git a/resources/themes/isekai.less b/resources/themes/isekai.less
new file mode 100644
index 0000000..d14f142
--- /dev/null
+++ b/resources/themes/isekai.less
@@ -0,0 +1,47 @@
+// Colours; see https://design.wikimedia.org/style-guide/visual-style_colors.html
+
+@base100: #fff;
+@base90: #fcfcfc;
+@base80: #f3f3f3;
+@base75: #eee;
+@base70: #c8c8c8;
+@base30: #777;
+@base20: #555;
+@base0: #000;
+
+@red: #d44;
+@red-bright: #f55;
+@red-dark: #900;
+
+@green: #3b7;
+@green-bright: #4c8;
+@green-dark: #396;
+
+@blue: #08d;
+@blue-bright: #2af;
+@blue-dark: #069;
+
+@background: @base100;
+@text: @base0;
+
+@link: @blue;
+@link-visited: @blue-dark;
+
+@link-red: @red;
+@link-red-visited: @red-dark;
+
+@link-ext: #37a;
+@link-ext-visited: darken( @link-ext, 10% );
+
+// Flair
+
+// Fonts are chosen for consistent metrics, not necessarily overall prettiness.
+@fonts-sans: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans', Simhei, 'Arial', sans-serif;
+@fonts-serif: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans', Simhei, 'Arial', sans-serif;
+@fonts-mono: 'Yahei Consolas Hybrid' 'Menlo', 'Consolas', 'Monaco', 'Noto Mono', 'Nimbus Mono L', monospace;
+
+@fonts: @fonts-sans;
+@fonts-secondary: @fonts-serif;
+
+@border: 0.2em;
+@radius: 0.2em;
diff --git a/resources/variables.less b/resources/variables.less
index bb1332e..10926b6 100644
--- a/resources/variables.less
+++ b/resources/variables.less
@@ -1,5 +1,5 @@
 @import 'mediawiki.mixins';
-@import 'themes/wikimedia.less'; // default theme
+@import 'themes/isekai.less'; // default theme
 // .import-themes(); // might be how we apply any selected theme(s); not implemented
 
 // Should really be part of the theme, but currently too much alignment/positioning
@@ -19,7 +19,7 @@
 @desktop-large-floor: 1340px;
 
 // The max-width for the content
-@content-width: 115em;
+@content-width: 102em;
 
 @content-padding: 2em;
 
diff --git a/skin.json b/skin.json
index 428f418..4997d21 100644
--- a/skin.json
+++ b/skin.json
@@ -155,7 +155,8 @@
 			"+ext.wikiLove.icon": "resources/extensions/WikiLove.icon.less",
 			"+ext.proofreadpage.page.navigation": "resources/extensions/Proofreadpage.page.navigation.less",
 			"+ext.CodeMirror": "resources/extensions/CodeMirror.less",
-			"+ext.wikiEditor.styles": "resources/extensions/WikiEditor.less"
+			"+ext.wikiEditor.styles": "resources/extensions/WikiEditor.less",
+			"+ext.uls.pt": "resources/extensions/UniversalLanguageSelector.less"
 		}
 	},
 	"AutoloadNamespaces": {