sunrize 1.11.1 → 1.11.2

package/src/assets/themes/default.css

@@ -1,6 +1,7 @@
 @charset "utf-8";
 @import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap);
 @import url(media.css);
+@import url(system-colors.css);
 
 html {
   overflow: hidden;
@@ -239,23 +240,20 @@ tr.disabled ~ tr > td > div {
   width: 35%;
 }
 
-.vertical-splitter-left > .ui-resizable-e {
+.ui-resizable-e,
+.ui-resizable-w {
   cursor: col-resize;
-}
-
-.vertical-splitter-left > .ui-resizable-e > div {
-  position: relative;
-  left: 0px;
   width: 4px;
-  height: 100%;
 }
 
-.vertical-splitter-left > .ui-resizable-e:hover > div {
+.ui-resizable-w:hover,
+.ui-resizable-e:hover {
   animation: highlight-splitter 1000ms ease-out;
   animation-fill-mode: forwards;
 }
 
-.vertical-splitter-left > .ui-resizable-e:active > div {
+.ui-resizable-e:active,
+.ui-resizable-e:active {
   background-color: var(--accent-color);
 }
 
@@ -301,33 +299,28 @@ tr.disabled ~ tr > td > div {
   height: 40%;
 }
 
-.horizontal-splitter-top > .ui-resizable-s {
-  cursor: row-resize;
+#horizontal-splitter > .horizontal-splitter-top {
+  height: 60%;
 }
 
-.horizontal-splitter-top > .ui-resizable-s > div {
-  position: relative;
-  top: 1px;
+#horizontal-splitter > .horizontal-splitter-bottom {
+  height: 40%;
+}
+
+.ui-resizable-s {
+  cursor: row-resize;
   height: 4px;
 }
 
-.horizontal-splitter-top > .ui-resizable-s:hover > div {
+.ui-resizable-s:hover {
   animation: highlight-splitter 1000ms ease-out;
   animation-fill-mode: forwards;
 }
 
-.horizontal-splitter-top > .ui-resizable-s:active > div {
+.ui-resizable-s:active {
   background-color: var(--accent-color);
 }
 
-#horizontal-splitter > .horizontal-splitter-top {
-  height: 60%;
-}
-
-#horizontal-splitter > .horizontal-splitter-bottom {
-  height: 40%;
-}
-
 /* Tabs */
 
 .ui-tabs {
@@ -646,27 +639,25 @@ html[platform=darwin] .horizontal-toolbar .select {
   user-select: none;
 }
 
-.horizontal-toolbar .material-icons:hover,
-.horizontal-toolbar .material-symbols-outlined:hover,
-.vertical-toolbar .material-icons:hover,
-.vertical-toolbar .material-symbols-outlined:hover {
+.codicon:hover,
+.material-icons:hover,
+.material-symbols-outlined:hover {
   color: var(--highlight-color);
 }
 
-.horizontal-toolbar .material-icons.active,
-.horizontal-toolbar .material-symbols-outlined.active,
-.vertical-toolbar .material-icons.active,
-.vertical-toolbar .material-symbols-outlined.active {
+.codicon.active,
+.material-icons.active,
+.material-symbols-outlined.active {
   color: var(--accent-color);
 }
 
-.horizontal-toolbar .material-icons.disabled,
-.horizontal-toolbar .material-symbols-outlined.disabled,
+.codicon.disabled,
+.material-icons.disabled,
+.material-symbols-outlined.disabled,
 .horizontal-toolbar .text.disabled,
 .horizontal-toolbar .input.disabled,
 .horizontal-toolbar .select.disabled,
-.vertical-toolbar .material-icons.disabled,
-.vertical-toolbar .material-symbols-outlined.disabled {
+.vertical-toolbar .material-icons.disabled {
   pointer-events: none;
   color: var(--system-gray3);
   border-color: var(--system-gray3);
@@ -702,6 +693,14 @@ html[platform=darwin] .horizontal-toolbar .select {
   filter: var(--filter-accent-color);
 }
 
+.image-icon.hand {
+  background-image: url(../images/icons/hand.svg);
+}
+
+.image-icon.arrow {
+  background-image: url(../images/icons/arrow.svg);
+}
+
 /* Browser */
 
 #browser-pane {
@@ -737,7 +736,7 @@ html[platform=darwin] .horizontal-toolbar .select {
 /* Dialog */
 
 .dialog ::placeholder {
-  color: var(--system-gray2);
+  color: var(--system-gray1);
 }
 
 body.dark .dialog ::placeholder {
@@ -840,6 +839,7 @@ body.dark .dialog ::placeholder {
   font-size: var(--small-font-size);
   border-bottom: 1px solid var(--system-gray1);
   color: var(--system-gray1);
+  clear: both;
 }
 
 body.dark .ui-widget .library-list .component {
@@ -869,6 +869,26 @@ body.dark .ui-widget .library-list .component {
   display: none;
 }
 
+.ui-widget .library-list.materials .component {
+  padding-top: 1em;
+}
+
+.library-list.materials .icon {
+  --padding: 5%;
+  box-sizing: border-box;
+  float: left;
+  width: calc(100% / 6);
+  height: auto;
+  aspect-ratio: 1 / 1;
+  padding: var(--padding);
+  background-size: calc(100% - 2 * var(--padding)) auto;
+  background-position: 50%;
+}
+
+.library-list.materials .text {
+  display: none;
+}
+
 /* Node List */
 
 .node-list {
@@ -1000,6 +1020,7 @@ body.dark .ui-widget .library-list .component {
 }
 
 .console-left {
+  overflow: hidden;
   position: absolute;
   box-sizing: border-box;
   left: 0;
@@ -1125,6 +1146,100 @@ body.dark .ui-widget .library-list .component {
   resize: none;
 }
 
+.console-search {
+  --accent-color: var(--system-blue);
+
+  box-sizing: border-box;
+  display: flex;
+  gap: 5px;
+  position: absolute;
+  top: 0px;
+  right: 30px;
+  width: 300px;
+  height: 33px;
+  padding: 0 8px;
+  background: var(--background-color);
+  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.36);
+  border-left: 2px solid var(--system-gray4);
+}
+
+.console-search-input-elements {
+  position: relative;
+  flex: 1 1 auto;
+}
+
+.console-search-input {
+  box-sizing: border-box;
+  display: block;
+  margin: 5px 0px;
+  padding: 2px 6px;
+  padding-right: 30px;
+  width: 100%;
+  height: 23px;
+  background: var(--system-gray5);
+}
+
+.console-search-input:focus {
+  outline: 1px solid var(--system-blue);
+}
+
+.console-search-case-sensitive {
+  cursor: pointer;
+  position: absolute;
+  right: 7px;
+  top: 9px;
+  padding: 0 1px;
+  border-radius: 2px;
+}
+
+.console-search-case-sensitive:hover {
+  background-color: var(--system-gray3);
+}
+
+.console-search-case-sensitive.active {
+  outline: 1px solid color-mix(in srgb, var(--system-blue), transparent 30%);
+  background: color-mix(in srgb, var(--system-blue), transparent 70%);
+  color: var(--system-gray0);
+}
+
+.console-search-status {
+  flex: 0 0 auto;
+  position: relative;
+  top: 10px;
+  min-width: 60px;
+  font-size: 90%;
+}
+
+.console-search :is(.search-previous, .search-next) {
+  user-select: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  flex: 0 0 auto;
+  top: 5px;
+  height: 23px;
+  padding: 3px 2px;
+  padding-left: 1px;
+  border-radius: 3px;
+  font-size: 16px;
+}
+
+.console-search :is(.search-previous, .search-next):hover {
+  background-color: var(--system-gray5);
+}
+
+.console-search :is(.search-previous, .search-next):focus {
+  outline: 1px solid var(--system-blue);
+}
+
+body.dark .console-output .selected {
+  background: var(--system-gray5);
+}
+
+body.light .console-output .selected {
+  background: color-mix(in srgb, var(--system-yellow), white 80%);
+}
+
 /* Script Editor */
 
 .script-editor {
@@ -1347,6 +1462,16 @@ body.dark .ui-widget .library-list .component {
   outline: 1px solid var(--system-orange);
 }
 
+.tree-view .jstree-node.manually.imported-node,
+.tree-view .jstree-node.manually.exported-node {
+  outline: 1px dashed var(--system-brown);
+}
+
+.tree-view .jstree-node.primary.imported-node,
+.tree-view .jstree-node.manually.exported-node {
+    outline: 1px solid var(--system-brown);
+}
+
 .tree-view .no-select {
   user-select: none;
 }
@@ -1384,6 +1509,7 @@ body.dark .ui-widget .library-list .component {
 
 /* make drag & drop work */
 .scene-graph .last {
+  overflow: hidden;
   height: 2px;
 }
 
@@ -1428,7 +1554,7 @@ body.dark .ui-widget .library-list .component {
 }
 
 .scene-graph .scene > .item .name {
-  font-weight: bold;;
+  font-weight: bold;
   font-style: italic;
   color: var(--system-purple);
 }

package/src/assets/themes/media-template.css

@@ -1,12 +1,4 @@
 @import url(../../node_modules/material-icons/iconfont/material-icons.css);
 @import url(../../node_modules/material-symbols/index.css);
 @import url(../../node_modules/spectrum-colorpicker2/dist/spectrum.css);
-@import url(system-colors.css);
-
-.image-icon.hand {
-  background-image: url(../images/icons/hand.svg);
-}
-
-.image-icon.arrow {
-  background-image: url(../images/icons/arrow.svg);
-}
+@import url(../../node_modules/@vscode/codicons/dist/codicon.css);

package/src/assets/themes/media.css

@@ -1,12 +1,4 @@
 @import url(file:///Users/holger/Desktop/X_ITE/sunrize/node_modules/material-icons/iconfont/material-icons.css);
 @import url(file:///Users/holger/Desktop/X_ITE/sunrize/node_modules/material-symbols/index.css);
 @import url(file:///Users/holger/Desktop/X_ITE/sunrize/node_modules/spectrum-colorpicker2/dist/spectrum.css);
-@import url(file:///Users/holger/Desktop/X_ITE/sunrize/src/assets/themes/system-colors.css);
-
-.image-icon.hand {
-  background-image: url(file:///Users/holger/Desktop/X_ITE/sunrize/src/assets/images/icons/hand.svg);
-}
-
-.image-icon.arrow {
-  background-image: url(file:///Users/holger/Desktop/X_ITE/sunrize/src/assets/images/icons/arrow.svg);
-}
+@import url(file:///Users/holger/Desktop/X_ITE/sunrize/node_modules/@vscode/codicons/dist/codicon.css);

package/src/assets/themes/system-colors.css

@@ -195,7 +195,7 @@ body {
   /* Tools */
 
   --tool-backdrop-filter: blur(25px);
-  --tool-background-color: rgba(208, 219, 231, 0.8); /* --sidebar-background-color */
+  --tool-background-color: color-mix(in srgb, var(--sidebar-background-color), transparent 20%);
   --tool-border-radius: 12px;
   --tool-border: 1px solid var(--system-gray8);
   --tool-shadow: 3px 3px 9px rgba(0, 0, 0, 0.6);
@@ -235,7 +235,7 @@ body {
 
     /* Tools */
 
-    --tool-background-color: rgba(42, 50, 63, 0.8); /* --sidebar-background-color */
+    --tool-background-color: color-mix(in srgb, var(--sidebar-background-color), transparent 20%);
     --tool-border: 1px solid var(--system-gray2);
     --tool-shadow: 3px 3px 9px var(--system-gray8);