Clean up hardcoded styles in Special:RequestWikiQueue

Author: alistair3149

modules/ext.createwiki.oouiform.ooui.less

@@ -1,21 +1,4 @@
-/* Fix width for the 'reason' selectorother field */
-#mw-input-wpreason {
-	display: inline-flex;
-	width: 100%;
-	max-width: 50em;
-
-	.oo-ui-dropdownInputWidget {
-		max-width: initial;
-	}
-
-	.oo-ui-inputWidget {
-		margin-right: 0;
-	}
-
-	.oo-ui-textInputWidget {
-		margin-left: 0.5em;
-	}
-}
+@import 'mediawiki.skin.variables.less';
 
 .ext-createwiki-tabs {
 	.ext-createwiki-fieldset-wrapper {
@@ -36,7 +19,7 @@
 .ext-createwiki-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
 	/* Decrease contrast of `border` slightly as padding/border combination is sufficient
 	 * accessibility wise and focus of content is more important here. */
-	border-color: #c8ccd1;
+	border-color: @border-color-subtle;
 }
 
 /* JavaScript disabled */
@@ -54,10 +37,8 @@
 		}
 
 		.ext-createwiki-section-fieldset {
-			// <legend> is hard to style, so apply border to top of group
-			> .oo-ui-fieldsetLayout-group {
-				padding-top: 1.5em;
-				border-top: 1px solid #c8ccd1;
+			> .oo-ui-fieldsetLayout-header {
+				margin-bottom: @spacing-150;
 			}
 
 			// Remove spacing between legend and underline
@@ -66,9 +47,8 @@
 			}
 		}
 
-		// Spacing between sections
-		> .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout:not( :last-child ) {
-			margin-bottom: 1em;
+		.oo-ui-tabPanelLayout + .oo-ui-tabPanelLayout {
+			margin-top: @spacing-100;
 		}
 	}
 }
@@ -77,7 +57,7 @@
 .client-js .ext-createwiki-tabs {
 	.oo-ui-tabPanelLayout {
 		// Panels don't need borders as the IndexLayout is inside a framed wrapper.
-		border: 0;
+		border-width: 0;
 
 		// Hide section legend, only used in nojs mode
 		> fieldset > legend {
@@ -93,33 +73,6 @@
 	}
 }
 
-#mw-htmlform-info {
-	> .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
-		display: inline-block;
-		width: 20%;
-		padding: 0;
-		vertical-align: middle;
-	}
-
-	> .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
-		margin-right: 0;
-	}
-
-	> .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
-		display: inline-block;
-		width: 80%;
-		vertical-align: middle;
-	}
-}
-
-/* Compact number inputs */
-.mw-htmlform-field-HTMLFloatField,
-.mw-htmlform-field-HTMLIntField {
-	.oo-ui-inputWidget {
-		max-width: 10em;
-	}
-}
-
 .mw-special-RequestWikiQueue {
 	#mw-section-details,
 	#mw-section-comments,
@@ -130,22 +83,18 @@
 			}
 
 			span > label {
-				font-weight: bold;
+				font-weight: @font-weight-bold;
 			}
 
+			// HACK: Pretend to be a read-only OOUI TextInputWidget
 			div > label {
-				display: block;
-				width: 100%;
-				max-height: 15em;
-				box-sizing: border-box;
-				padding: 8px;
-				border: 1.5px solid #ccc;
-				border-radius: 4px;
-				background-color: #f5f5f5;
-				color: #333;
-				font-family: 'Arial', sans-serif;
-				line-height: 1.5em;
+				max-width: 50em;
 				overflow-y: auto;
+				display: block;
+				background-color: @background-color-interactive-subtle;
+				border: @border-base;
+				padding: @spacing-30 @spacing-50;
+				border-radius: @border-radius-base;
 			}
 		}
 	}