Realtime preview: improve toolbar button style

* Add hover and active styles to match normal toolbar state styling.
* Move border from right to left on `.section-secondary .group`.
* Add a skinStyle for MonoBook so it doesn't get the button style,
  because it provides its own.

Bug: T303991
Change-Id: I6f08906156a9768729d779b6c50c9e804f51fb98

extension.json

@@ -339,7 +339,12 @@
 				"realtimepreview/TwoPaneLayout.less",
 				"realtimepreview/ErrorLayout.less",
 				"realtimepreview/ManualWidget.less"
-			]
+			],
+			"skinStyles": {
+				"monobook": [
+					"realtimepreview/monobook.less"
+				]
+			}
 		}
 	},
 	"ResourceFileModulePaths": {

modules/jquery.wikiEditor.toolbar-wikimedia.less

@@ -9,10 +9,14 @@
 	box-shadow: 0 2px 1px 0 rgba( 0, 0, 0, 0.1 );
 
 	/* Groups */
+	.group,
+	.section-secondary .group {
+		border-color: #eaecf0;
+	}
+
 	.group {
 		min-height: 32px;
 		margin: 0;
-		border-color: #eaecf0;
 		padding-right: 0;
 
 		.label {

modules/jquery.wikiEditor.toolbar.less

@@ -108,6 +108,12 @@
 
 	.section-secondary {
 		float: right;
+
+		.group {
+			padding-right: 0;
+			padding-left: 6px;
+			border-left: 1px solid #c8ccd1;
+		}
 	}
 
 	/* Groups */

modules/realtimepreview/RealtimePreview.js

@@ -91,7 +91,8 @@ RealtimePreview.prototype.getToolbarButton = function ( context ) {
 		icon: 'article',
 		value: this.enabled,
 		framed: false,
-		classes: [ 'tool' ] // T305953; So we can find usage of this class later: .tool
+		// T305953; So we can find usage of this class later: .tool
+		classes: [ 'tool', 'ext-WikiEditor-realtimepreview-button' ]
 	} );
 	this.button.connect( this, { change: this.toggle } );
 	return this.button;

modules/realtimepreview/RealtimePreview.less

@@ -1,5 +1,13 @@
 @import 'mediawiki.ui/variables.less';
 
+.ext-WikiEditor-realtimepreview-button:hover {
+	background-color: @colorGray14;
+}
+
+.ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-on .oo-ui-labelElement-label {
+	color: @color-primary;
+}
+
 /* stylelint-disable selector-max-id */
 #wpTextbox1,
 .mw-editform #wpTextbox1 {

modules/realtimepreview/monobook.less

@@ -0,0 +1,7 @@
+.ext-WikiEditor-realtimepreview-button:hover {
+	background-color: unset;
+}
+
+.ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-on .oo-ui-labelElement-label {
+	color: unset;
+}