Style sitenotice

Note that this wraps localNotice in a box and may mess up custom
sitenotice css that does not expect a box to already be there.

Bug: T182517
Change-Id: I7d25017ba89cb833317aea61f9ea5f8f0a145df8

resources/extensions/DismissableSiteNotice.less

@@ -0,0 +1,15 @@
+@import '../variables.less';
+
+.mw-dismissable-notice-close {
+	margin: 1em 1.25em;
+}
+
+.mw-dismissable-notice-body #localNotice {
+	// reset the default; we're doing this elsewhere here
+	.unbox();
+}
+
+.mw-dismissable-notice {
+	.box();
+	padding: 0;
+}

resources/screen-common.less

@@ -277,6 +277,22 @@ div.suggestions {
 	.background-image-svg( 'images/star-filled.svg', 'images/star-filled.png' );
 }
 
+#siteNotice {
+	font-size: 95%;
+	margin: 0.5em auto 1.5em;
+}
+
+#localNotice {
+	.box();
+	padding: 0;
+	text-align: center;
+
+	p {
+		margin-left: 1em;
+		margin-right: 1em;
+	}
+}
+
 /* Misc */
 
 a {

resources/variables.less

@@ -93,6 +93,13 @@
 	box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
 }
 
+.unbox() {
+	background: transparent;
+	border: 0;
+	padding: 0;
+	box-shadow: none;
+}
+
 // Icons for the page actions menus
 .ca-icon() {
 	.icon;

skin.json

@@ -84,7 +84,8 @@
 			"+oojs-ui-core.styles": "resources/ooui.less",
 			"+ext.echo.styles.badge": "resources/extensions/Echo.less",
 			"+ext.visualEditor.core": "resources/extensions/VisualEditor.core.less",
-			"+ext.visualEditor.desktopArticleTarget.noscript": "resources/extensions/VisualEditor.article.less"
+			"+ext.visualEditor.desktopArticleTarget.noscript": "resources/extensions/VisualEditor.article.less",
+			"+ext.dismissableSiteNotice.styles": "resources/extensions/DismissableSiteNotice.less"
 		}
 	},
 	"AutoloadClasses": {