Editor: UI css scope (#32714)

editor/css/main.css

@@ -18,37 +18,37 @@ hr {
 	border-top: 1px solid #ccc;
 }
 
-button {
+.Button {
 	position: relative;
 }
 
-input {
+.Input {
 	vertical-align: middle;
 }
 
-	input[type="color"]::-webkit-color-swatch-wrapper {
+	.Input[type="color"]::-webkit-color-swatch-wrapper {
 		padding: 0;
 	}
-	input[type="color"]::-webkit-color-swatch {
+	.Input[type="color"]::-webkit-color-swatch {
 		border: none;
 	}
 
-textarea {
+.TextArea {
 	tab-size: 4;
 	white-space: pre;
 	word-wrap: normal;
 }
 
-	textarea.success {
+	.TextArea.success {
 		border-color: #8b8 !important;
 	}
 
-	textarea.fail {
+	.TextArea.fail {
 		border-color: #f00 !important;
 		background-color: rgba(255,0,0,0.05);
 	}
 
-textarea, input { outline: none; } /* osx */
+.TextArea, .Input { outline: none; } /* osx */
 
 .Panel {
 	-moz-user-select: none;
@@ -268,7 +268,7 @@ textarea, input { outline: none; } /* osx */
 
 /*  */
 
-button {
+.Button {
 	color: #555;
 	background-color: #ddd;
 	border: 0px;
@@ -280,27 +280,27 @@ button {
 	outline: none;
 }
 
-	button:hover {
+	.Button:hover {
 		background-color: #fff;
 	}
 
-	button.selected {
+	.Button.selected {
 		background-color: #fff;
 	}
 
-input, textarea {
+.Input, .TextArea {
 	border: 1px solid transparent;
 	color: #444;
 }
 
-input.Number {
+.Input.Number {
 	color: #08f!important;
 	font-size: 12px;
 	border: 0px;
 	padding: 2px;
 }
 
-select {
+.Select {
 	color: #666;
 	background-color: #ddd;
 	border: 0px;
@@ -309,7 +309,7 @@ select {
 	outline: none;
 }
 
-	select:hover {
+	.Select:hover {
 		background-color: #fff;
 	}
 
@@ -537,11 +537,11 @@ select {
 	text-align: center;
 }
 
-	#toolbar button, #toolbar input {
+	#toolbar .Button, #toolbar .Input {
 		height: 32px;
 	}
 
-		#toolbar button img {
+		#toolbar .Button img {
 			width: 16px;
 			opacity: 0.5;
 		}
@@ -648,33 +648,33 @@ select {
 
 @media ( prefers-color-scheme: dark ) {
 
-	button {
+	.Button {
 		color: #aaa;
 		background-color: #222;
 	}
 
-		button:hover {
+		.Button:hover {
 			color: #ccc;
 			background-color: #444;
 		}
 
-		button.selected {
+		.Button.selected {
 			color: #fff;
 			background-color: #08f;
 		}
 
-	input, textarea {
+	.Input, .TextArea {
 		background-color: #222;
 		border: 1px solid transparent;
 		color: #888;
 	}
 
-	select {
+	.Select {
 		color: #aaa;
 		background-color: #222;
 	}
 
-		select:hover {
+		.Select:hover {
 			color: #ccc;
 			background-color: #444;
 		}

editor/js/libs/ui.js

@@ -448,7 +448,7 @@ class UICheckbox extends UIElement {
 
 		super( document.createElement( 'input' ) );
 
-		this.dom.className = 'Checkbox';
+		this.dom.className = 'Checkbox Input';
 		this.dom.type = 'checkbox';
 
 		this.dom.addEventListener( 'pointerdown', function ( event ) {
@@ -490,7 +490,7 @@ class UIColor extends UIElement {
 
 		super( document.createElement( 'input' ) );
 
-		this.dom.className = 'Color';
+		this.dom.className = 'Color Input';
 		this.dom.style.width = '32px';
 		this.dom.style.height = '16px';
 		this.dom.style.border = '0px';
@@ -545,7 +545,7 @@ class UINumber extends UIElement {
 		super( document.createElement( 'input' ) );
 
 		this.dom.style.cursor = 'ns-resize';
-		this.dom.className = 'Number';
+		this.dom.className = 'Number Input';
 		this.dom.value = '0.00';
 
 		this.dom.setAttribute( 'autocomplete', 'off' );
@@ -766,7 +766,7 @@ class UIInteger extends UIElement {
 		super( document.createElement( 'input' ) );
 
 		this.dom.style.cursor = 'ns-resize';
-		this.dom.className = 'Number';
+		this.dom.className = 'Number Input';
 		this.dom.value = '0';
 
 		this.dom.setAttribute( 'autocomplete', 'off' );