Editor: UI css scope (#32714)

linbingquan · web-flow · commit 66ab25814c83 · 2026-01-12T13:34:39.000+09:00
diff --git a/editor/css/main.css b/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;
 		}
diff --git a/editor/js/libs/ui.js b/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' );

Original file line number	Diff line number	Diff line change
`@@ -18,37 +18,37 @@ hr {`
`18`	`18`	`border-top: 1px solid #ccc;`
`19`	`19`	`}`
`20`	`20`
`21`		`-button {`
	`21`	`+.Button {`
`22`	`22`	`position: relative;`
`23`	`23`	`}`
`24`	`24`
`25`		`-input {`
	`25`	`+.Input {`
`26`	`26`	`vertical-align: middle;`
`27`	`27`	`}`
`28`	`28`
`29`		`- input[type="color"]::-webkit-color-swatch-wrapper {`
	`29`	`+ .Input[type="color"]::-webkit-color-swatch-wrapper {`
`30`	`30`	`padding: 0;`
`31`	`31`	`}`
`32`		`- input[type="color"]::-webkit-color-swatch {`
	`32`	`+ .Input[type="color"]::-webkit-color-swatch {`
`33`	`33`	`border: none;`
`34`	`34`	`}`
`35`	`35`
`36`		`-textarea {`
	`36`	`+.TextArea {`
`37`	`37`	`tab-size: 4;`
`38`	`38`	`white-space: pre;`
`39`	`39`	`word-wrap: normal;`
`40`	`40`	`}`
`41`	`41`
`42`		`- textarea.success {`
	`42`	`+ .TextArea.success {`
`43`	`43`	`border-color: #8b8 !important;`
`44`	`44`	`}`
`45`	`45`
`46`		`- textarea.fail {`
	`46`	`+ .TextArea.fail {`
`47`	`47`	`border-color: #f00 !important;`
`48`	`48`	`background-color: rgba(255,0,0,0.05);`
`49`	`49`	`}`
`50`	`50`
`51`		`-textarea, input { outline: none; } /* osx */`
	`51`	`+.TextArea, .Input { outline: none; } /* osx */`
`52`	`52`
`53`	`53`	`.Panel {`
`54`	`54`	`-moz-user-select: none;`
`@@ -268,7 +268,7 @@ textarea, input { outline: none; } /* osx */`
`268`	`268`
`269`	`269`	`/* */`
`270`	`270`
`271`		`-button {`
	`271`	`+.Button {`
`272`	`272`	`color: #555;`
`273`	`273`	`background-color: #ddd;`
`274`	`274`	`border: 0px;`
`@@ -280,27 +280,27 @@ button {`
`280`	`280`	`outline: none;`
`281`	`281`	`}`
`282`	`282`
`283`		`- button:hover {`
	`283`	`+ .Button:hover {`
`284`	`284`	`background-color: #fff;`
`285`	`285`	`}`
`286`	`286`
`287`		`- button.selected {`
	`287`	`+ .Button.selected {`
`288`	`288`	`background-color: #fff;`
`289`	`289`	`}`
`290`	`290`
`291`		`-input, textarea {`
	`291`	`+.Input, .TextArea {`
`292`	`292`	`border: 1px solid transparent;`
`293`	`293`	`color: #444;`
`294`	`294`	`}`
`295`	`295`
`296`		`-input.Number {`
	`296`	`+.Input.Number {`
`297`	`297`	`color: #08f!important;`
`298`	`298`	`font-size: 12px;`
`299`	`299`	`border: 0px;`
`300`	`300`	`padding: 2px;`
`301`	`301`	`}`
`302`	`302`
`303`		`-select {`
	`303`	`+.Select {`
`304`	`304`	`color: #666;`
`305`	`305`	`background-color: #ddd;`
`306`	`306`	`border: 0px;`
`@@ -309,7 +309,7 @@ select {`
`309`	`309`	`outline: none;`
`310`	`310`	`}`
`311`	`311`
`312`		`- select:hover {`
	`312`	`+ .Select:hover {`
`313`	`313`	`background-color: #fff;`
`314`	`314`	`}`
`315`	`315`
`@@ -537,11 +537,11 @@ select {`
`537`	`537`	`text-align: center;`
`538`	`538`	`}`
`539`	`539`
`540`		`- #toolbar button, #toolbar input {`
	`540`	`+ #toolbar .Button, #toolbar .Input {`
`541`	`541`	`height: 32px;`
`542`	`542`	`}`
`543`	`543`
`544`		`- #toolbar button img {`
	`544`	`+ #toolbar .Button img {`
`545`	`545`	`width: 16px;`
`546`	`546`	`opacity: 0.5;`
`547`	`547`	`}`
`@@ -648,33 +648,33 @@ select {`
`648`	`648`
`649`	`649`	`@media ( prefers-color-scheme: dark ) {`
`650`	`650`
`651`		`- button {`
	`651`	`+ .Button {`
`652`	`652`	`color: #aaa;`
`653`	`653`	`background-color: #222;`
`654`	`654`	`}`
`655`	`655`
`656`		`- button:hover {`
	`656`	`+ .Button:hover {`
`657`	`657`	`color: #ccc;`
`658`	`658`	`background-color: #444;`
`659`	`659`	`}`
`660`	`660`
`661`		`- button.selected {`
	`661`	`+ .Button.selected {`
`662`	`662`	`color: #fff;`
`663`	`663`	`background-color: #08f;`
`664`	`664`	`}`
`665`	`665`
`666`		`- input, textarea {`
	`666`	`+ .Input, .TextArea {`
`667`	`667`	`background-color: #222;`
`668`	`668`	`border: 1px solid transparent;`
`669`	`669`	`color: #888;`
`670`	`670`	`}`
`671`	`671`
`672`		`- select {`
	`672`	`+ .Select {`
`673`	`673`	`color: #aaa;`
`674`	`674`	`background-color: #222;`
`675`	`675`	`}`
`676`	`676`
`677`		`- select:hover {`
	`677`	`+ .Select:hover {`
`678`	`678`	`color: #ccc;`
`679`	`679`	`background-color: #444;`
`680`	`680`	`}`