Align anonymous settings dialog appearance with style guide

Aligning anonymous settings dialog appearance with dialogs
elsewhere by
- setting base `font-size` to 14px to conform with Vector elsewhere –
  size is not inherited to the dialog as it's a direct child of `body`
- increasing contrast on descriptive paragraphs to conform with
  WCAG level AA
- reducing inner `padding`s slighty to conform with 8px grid
- aligning `border-color` and `box-shadow` values
- replacing static value with LESS variable

Also removing stylelintrc override rule which has been only around
for the old `box-shadow` value.

Bug: T178607
Change-Id: I738e0be11f3d1c94ea03288e0dddc1b983a6c729

.stylelintrc.json

@@ -2,7 +2,6 @@
 	"extends": "stylelint-config-wikimedia",
 	"rules": {
 		"selector-no-id": null,
-		"length-zero-no-unit": null,
 		"no-descending-specificity": null
 	}
 }

extension.json

@@ -99,6 +99,11 @@
 				"resources/ext.popups/styles/ext.popups.animation.less",
 				"resources/ext.popups/styles/ext.popups.settings.less"
 			],
+			"skinStyles": {
+				"vector": [
+					"resources/ext.popups/styles/ext.popups.settings.vector.less"
+				]
+			},
 			"messages": [
 				"popups-settings-title",
 				"popups-settings-description",

resources/ext.popups/styles/ext.popups.settings.less

@@ -5,10 +5,10 @@
 	position: fixed;
 	z-index: 1000;
 	background: #fff;
-	width: 450px;
-	border: 1px solid #ccc;
-	box-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.1 );
-	border-radius: 2px;
+	width: 420px;
+	border: 1px solid #a2a9b1;
+	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
+	border-radius: @borderRadius;
 
 	header {
 		.box-sizing( border-box );
@@ -30,6 +30,7 @@
 			width: 100%;
 			font-family: sans-serif;
 			font-size: 18px;
+			font-weight: bold;
 			text-align: center;
 		}
 	}
@@ -37,13 +38,17 @@
 	main {
 		display: block;
 		width: 350px;
-		padding: 50px 0 40px;
+		padding: 32px 0 24px;
 		margin: 0 auto;
 
 		p {
-			color: #999;
+			color: #54595d;
 			font-size: 17px;
-			margin: 0 0 20px 0;
+			margin: 16px 0 0;
+
+			&:first-child {
+				margin-top: 0;
+			}
 		}
 
 		form {

resources/ext.popups/styles/ext.popups.settings.vector.less

@@ -0,0 +1,3 @@
+#mwe-popups-settings {
+	font-size: 0.875em; // not inherited from `.mw-body-content`, as we insert at `body`
+}