feat(core): ✨ redesign search page

skinStyles/mediawiki/special/mediawiki.special.search.styles.less

@@ -1,46 +1,155 @@
 /*
- * Citizen - Search Page Styles
- * https://starcitizen.tools
+ * Citizen
+ *
+ * SkinStyles for Special:Search
+ * Module: mediawiki.special.search.styles
+ * Version: 1.39.0
+ *
+ * Date: 2022-10-20
 */
 
 @import '../../../resources/variables.less';
 
-/* Special:Search */
+// Disable default sticky header
+#citizen-body-header-sticky-sentinel {
+	display: none;
+}
+
+// Sticky header
+.mw-search-form-wrapper {
+	position: sticky;
+	top: 0;
+	padding-top: var( --space-md );
+	border-bottom: 1px solid var( --border-color-base );
+	margin-top: ~'calc( var( --space-md ) * -1 )'; // counteract padding
+	background-color: var( --color-surface-0 );
+
+	// Wrapper has a border bottom already
+	.mw-search-profile-tabs:last-child {
+		border-bottom: 0;
+	}
+}
+
+#mw-search-top-table {
+	display: flex;
+	justify-content: space-between;
+	gap: var( --space-lg );
+
+	// Fix weird space between input field and button
+	.oo-ui-actionFieldLayout .oo-ui-textInputWidget {
+		max-width: none;
+	}
+}
+
+.mw-search-profile-tabs {
+	border-color: transparent;
+	border-bottom: 1px solid var( --border-color-base );
+	margin-top: var( --space-xs );
+	background-color: transparent;
+	font-size: 0.875rem;
+}
+
 .search-types {
-	ul {
-		margin: 0 !important; // Cancel out ul margin from common
+	a {
+		border-bottom: 2px solid transparent;
+		color: var( --color-base--subtle );
+		font-weight: 500;
+
+		&:hover {
+			border-color: var( --color-primary--hover );
+			color: var( -color-primary--hover );
+		}
+	}
+
+	.current a {
+		border-color: var( --color-primary );
+		color: var( --color-primary );
 	}
 }
 
-.skin-citizen-dark {
-	.mw-search-profile-tabs {
-		border: 1px solid @dark-bg-30;
-		background-color: @dark-bg-10;
+.results-info {
+	color: var( --color-base--subtle );
+	font-size: 0.8125rem;
+	white-space: nowrap;
+}
+
+#mw-searchoptions {
+	border-color: transparent;
+	border-radius: 0;
+	background-color: var( --color-surface-1 );
+
+	h4 {
+		color: var( --color-base--subtle );
+		font-size: 0.875rem;
+		font-weight: normal;
+		letter-spacing: 0.75px;
 	}
 
-	.search-types .current a {
-		color: @dark-text-90;
+	.divider {
+		border-color: var( --border-color-base );
+	}
+}
+
+#mw-search-interwiki {
+	border-color: var( --border-color-base );
+}
+
+.mw-search-results {
+	li {
+		a {
+			font-size: 1rem;
+		}
+	}
+}
+
+.mw-search-result {
+	&-data {
+		margin-top: var( --space-xs );
+		color: var( --color-base--subtle );
+		font-size: 0.8125rem;
+	}
+}
+
+.mw-search-createlink,
+.mw-search-exists {
+	padding: var( --space-md );
+	border-radius: var( --border-radius--small );
+	background: var( --color-surface-2 );
+	font-size: 0.875rem;
+}
+
+.searchdidyoumean {
+	font-size: 1rem;
+}
+
+// Somehow got overridden
+.citizen-body {
+	.search-types {
+		ul {
+			margin: 0;
+		}
 	}
 
+	.searchresults {
+		h2 {
+			margin-bottom: var( --space-md );
+			font-size: 1rem;
+		}
+	}
+
+	.mw-search-results {
+		margin: 0;
+	}
+}
+
+@media ( max-width: @width-breakpoint-tablet ) {
 	.results-info {
-		color: @dark-text-80;
+		display: none;
 	}
 
+	// Not great but works for now
 	#mw-searchoptions {
-		border: 1px solid @dark-bg-30;
-		background-color: @dark-bg-10;
-	}
-
-	#mw-searchoptions .divider {
-		border-bottom: 1px solid @dark-bg-20;
-	}
-
-	#mw-search-interwiki {
-		border: 1px solid @dark-bg-50;
-	}
-
-	.mw-search-interwiki-project {
-		border-top: 1px solid @dark-bg-30;
-		background-color: @dark-bg-20;
+		overflow: auto;
+		max-height: 20vh;
 	}
 }