New UV editor progress

css/panels.css

@@ -1126,6 +1126,7 @@
 		border: 4px solid var(--color-ui);
 		box-shadow: 0 0 0 800px var(--color-back);
     	box-sizing: content-box;
+		--color-unselected: var(--color-grid);
 	}
 
 	body[mode=paint] #uv_frame {
@@ -1159,10 +1160,11 @@
 
 	.cube_box_uv {
 		position: absolute;
+		z-index: 2;
 	}
 	.cube_box_uv > div {
 		position: absolute;
-		z-index: 1;
+		z-index: 2;
 		cursor: move;
 		border: 2px solid var(--color-accent);
 		box-sizing: border-box;
@@ -1172,11 +1174,11 @@
 	}
 	.cube_box_uv:hover > div {
 		border-color: var(--color-light);
-		z-index: 2;
+		z-index: 3;
 	}
 	.cube_uv_face {
 		position: absolute;
-		z-index: 1;
+		z-index: 2;
 		width: var(--width);
 		height: var(--height);
 		cursor: move;
@@ -1189,11 +1191,21 @@
 	.cube_uv_face:hover {
 		border-color: var(--color-light);
 		background-color: rgba(50, 70, 240, 0.3);
-		z-index: 2;
+		z-index: 3;
 	}
 	.cube_uv_face.selected {
-		border-color: var(--color-accent);
-		z-index: 3;
+		border-color: var(--color-light);
+		z-index: 4;
+		box-shadow: 0 0 4px #000000cc;
+	}
+	.cube_uv_face.unselected,
+	.cube_box_uv.unselected {
+		pointer-events: none;
+		z-index: 1;
+	}
+	.cube_uv_face.unselected div,
+	.cube_box_uv.unselected div {
+		border-color: var(--color-unselected) !important;
 	}
 
 	.uv_resize_side {
@@ -1214,9 +1226,10 @@
 	.uv_resize_corner {
 		position: absolute;
 		margin: -6px;
-		height: 8px;
-		width: 8px;
-		background-color:  var(--color-text);
+		height: 9px;
+		width: 9px;
+		background-color:  white;
+		border: 1px solid black;
 		z-index: 3;
 	}
 	.uv_resize_corner.uv_c_nw {cursor: nw-resize;}
@@ -1321,6 +1334,26 @@
 		left: 2px;
 	}*/
 
+	.uv_cube_face_bar {
+		display: flex;
+		height: 28px;
+	}
+	.uv_cube_face_bar li {
+		flex-grow: 1;
+		text-align: center;
+		padding: 2px;
+		margin: 0 1px;
+	}
+	.uv_cube_face_bar li:hover {
+		color: var(--color-light);
+	}
+	.uv_cube_face_bar li.selected {
+		border-bottom: 3px solid var(--color-accent);
+	}
+	.uv_cube_face_bar li.disabled {
+		color: var(--color-subtle_text);
+	}
+
 	#texture_selection_rect {
 		position: absolute;
 		pointer-events: none;
@@ -1367,6 +1400,11 @@
 		background-color: var(--color-accent);
 		color: var(--color-accent_text);
 	}
+	.uv_transparent_face {
+		margin: 8px auto auto;
+		color: var(--color-subtle_text);
+		max-width: fit-content;
+	}
 
 /*Chat*/
 	#chat {

js/io/project.js

@@ -172,6 +172,7 @@ class ModelProject {
 		Interface.Panels.outliner.inside_vue.root = this.outliner;
 
 		UVEditor.vue.elements = this.selected_elements;
+		UVEditor.vue.all_elements = this.elements;
 		UVEditor.vue.selected_vertices = this.selected_vertices;
 		UVEditor.vue.selected_faces = this.selected_faces;
 		UVEditor.vue.box_uv = this.box_uv;

lang/en.json

@@ -1361,6 +1361,7 @@
 	"uv_editor.tint_off": "Tint Off",
 	"uv_editor.copy_selection": "Copy Selection",
 	"uv_editor.paste_selection": "Paste Selection",
+	"uv_editor.transparent_face": "Transparent Face",
 
 	"uv_editor.copy_paste_tool.place": "Place",
 	"uv_editor.copy_paste_tool.cut": "Cut",