styles changed

example/game.js

@@ -1,6 +1,6 @@
 const game = new Phaser.Game({
 	width: 1920,
-	height: 1200,
+	height: 2000,
 	renderer: Phaser.AUTO,
 	parent: 'game',
 	scaleMode: Phaser.ScaleManager.SHOW_ALL,

src/editor/properties/editors/point/point-property-editor.scss

@@ -0,0 +1,6 @@
+phed-point-property-editor {
+	.property-title.x,
+	.property-title.y {
+		min-width: 10%;
+	}
+}

src/editor/properties/editors/point/point-property-editor.ts

@@ -2,6 +2,8 @@ import { PropertyInspectionData } from 'editor/properties-editors';
 import { NumberPropertyEditor } from '../number/number-property-editor';
 import { PropertyEditor } from '../property-editor';
 
+import './point-property-editor.scss';
+
 export class PointPropertyEditor extends PropertyEditor<PIXI.Point> {
 	public static readonly tagName: string = 'phed-point-property-editor';
 

src/editor/properties/editors/property-editor.scss

@@ -1,38 +1,52 @@
-@import "colors";
+@import 'colors';
 
 $property-input-background: rgba(white, 0.05);
 $property-foreground: $on-background-color;
 
 .property-editor {
 	display: flex;
 	flex-direction: row;
-	padding: 2px 0;
+	padding: 0 2px;
 
 	&.has-children {
-		padding: 5px 0;
+		padding: 8px 0;
+
+		&>.property-content{
+			padding-right: 0;
+		}
 	}
 
 	.property-title {
-		width: 25%;
-		padding: 4px 2px 2px 0;
-		font-size: 14px;
-		color: rgba($on-background-color, 0.6);
+		min-width: 25%;
+		padding: 0 2px;
+		overflow: hidden;
+
+		label {
+			font-size: 14px;
+			color: rgba($on-background-color, 0.6);
+			text-overflow: ellipsis;
+			overflow: hidden;
+			display: inline-block;
+			width: 100%;
+			padding: 0 6px;
+		}
 	}
 
 	.property-content {
 		flex: 1;
 		color: $property-foreground;
-		padding: 2px 0;
+		padding: 1px 4px 1px 0;
+		display: flex;
 
 		input {
-			font-size: 16px;
+			font-size: 14px;
 			color: $property-foreground;
 			padding: 2px 4px;
 			transition: all 0.1s;
 		}
-		
-		input[type="text"],
-		input[type="number"] {
+
+		input[type='text'],
+		input[type='number'] {
 			width: 100%;
 			background-color: $property-input-background;
 			border: 1px solid transparent;

src/editor/properties/editors/property-editor.ts

@@ -17,27 +17,32 @@ export abstract class PropertyEditor<T> extends HTMLElement {
 	public setContent(prop: PropertyInspectionData, value: T, fieldId?: string) {
 		fieldId = fieldId ?? `${prop.name}-${PropertyEditor.randomId()}`;
 		this.prop = prop;
+
+		const titleCol = document.createElement('div');
+		titleCol.classList.add('property-title', prop.name);
+
 		const title = this.createLabel(fieldId, prop);
-		const content = this.createContent(value, fieldId, prop);
+		titleCol.appendChild(title);
+
+		const contentCol = this.createContent(value, fieldId, prop);
 
 		this.setInternalValue(value);
 		this.onchange = this.onValueChanged.bind(this);
 
-		this.appendChild(title);
-		this.appendChild(content);
+		this.appendChild(titleCol);
+		this.appendChild(contentCol);
 	}
 
 	protected createLabel(fieldId: string, prop: PropertyInspectionData): HTMLElement {
 		const label = document.createElement('label');
-		label.classList.add('property-title');
 		label.append(prop.name);
 		label.setAttribute('for', fieldId);
 		return label;
 	}
 
 	protected createContent(value: T, fieldId: string, prop: PropertyInspectionData) {
 		const propContent = document.createElement('div');
-		propContent.classList.add('property-content');
+		propContent.classList.add('property-content', prop.name);
 
 		const innerContent = this.createInnerContent(fieldId, value, prop);
 		propContent.append(innerContent);

src/editor/properties/panel/properties-panel.scss

@@ -1,20 +1,20 @@
-@import "colors";
+@import 'colors';
 
 phed-properties-panel {
 	display: flex;
 	flex-direction: column;
 	justify-content: stretch;
 
 	.title {
+		font-size: 12px;
 		font-weight: bold;
-		font-size: 14px;
 		color: rgba($on-background-color, 0.5);
 		background-color: rgba(black, 0.2);
 		padding: 6px 8px;
 	}
 
 	.content {
-		padding: 12px 18px;
+		padding: 12px 0px;
 		box-shadow: 0 2px 2px $shadow-color;
 	}
 }

src/plugin.scss

@@ -1,7 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
+@import 'colors';
 
 * {
-	font-family: 'Nunito', sans-serif;
+	font-family: 'Lato', sans-serif;
 }
 
 html,
@@ -17,3 +18,20 @@ body {
 	background-color: #1b1b1b;
 	overflow: hidden;
 }
+
+::-webkit-scrollbar {
+	width: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: transparent;
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: $primary-color;
+}