sunrize 1.11.0 → 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;
@@ -52,7 +53,7 @@ body {
   background-color: transparent;
 }
 
-/* Handle */
+/* Scrollbar Handle */
 :hover::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb-color);
 }
@@ -72,6 +73,12 @@ body {
   background-color: var(--scrollbar-thumb-color);
 }
 
+/* inputs */
+
+input[type=checkbox] {
+  accent-color: var(--system-green);
+}
+
 /* common */
 
 .green {
@@ -101,6 +108,11 @@ th, td,
   color: var(--text-color);
 }
 
+select {
+  appearance: none;
+  cursor: pointer;
+}
+
 select option {
   font-family: var(--sans-serif);
   font-size: var(--font-size);
@@ -130,20 +142,13 @@ tbody th {
   width: auto;
 }
 
-tbody td {
-  width: 100%;
-}
-
 tbody th th {
   min-width: unset;
   width: unset;
 }
 
-tbody td td {
-  width: unset;
-}
-
-thead tr {
+thead tr,
+tfoot tr {
   background: var(--tint-color2);
 }
 
@@ -235,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);
 }
 
@@ -297,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 {
@@ -433,29 +430,25 @@ tr.disabled ~ tr > td > div {
 
 .qtip-tipsy.qtip {
   border: var(--qtip-border);
+  border-radius: var(--qtip-border-radius);
   background: var(--qtip-background-color);
   box-shadow: var(--qtip-shadow);
+  backdrop-filter: none;
 }
 
 .qtip-tipsy {
   color: var(--system-gray1);
+  text-shadow: none;
 }
 
 body.light .qtip-tipsy {
   color: black;
-  text-shadow: none;
 }
 
 .qtip-tipsy .qtip-tip {
   background: inherit !important;
 }
 
-.qtip-preview.qtip {
-  border: var(--preview-border);
-  background: var(--preview-background-color);
-  backdrop-filter: none;
-}
-
 .qtip-audio.qtip {
   background: rgb(241, 243, 244);
 }
@@ -466,46 +459,68 @@ body.light .qtip-tipsy {
 
 .qtip span {
   display: block;
+  margin: 2px 0;
 }
 
 .qtip input,
 .qtip select,
 .qtip button {
+  box-sizing: border-box;
   display: block;
   width: 100%;
-  background: var(--background-color);
+  background: var(--system-gray5);
   border: 1px solid var(--system-gray7);
+  border-radius: 16px;
+  color: var(--system-gray0);
   filter: opacity(80%);
   margin: 2px 0;
+  padding: 2px 8px;
+  height: 24px;
+}
+
+.qtip ::placeholder {
+  color: var(--system-gray1);
+}
+
+.qtip button {
+  cursor: pointer;
 }
 
 .qtip input[type=checkbox] {
+  cursor: pointer;
   display: inline-block;
+  position: relative;
+  top: 1px;
+  margin: 4px 0;
   width: auto;
-  margin: 4px 0 0 0;
 }
 
 .qtip label {
+  user-select: none;
+  cursor: pointer;
   display: inline-block;
-  width: auto;
   position: relative;
-  margin-left: 5px !important;
-  top: -2px;
-  margin: 4px 0 0 0;
+  top: -7px;
+  margin-left: 5px;
+  width: auto;
 }
 
-.qtip .qtip-content > div:first-child {
+.qtip p {
+  margin: 8px 0;
+}
+
+.qtip .qtip-content > div :first-child {
   margin-top: 0;
 }
 
-.qtip .qtip-content > div:last-child {
+.qtip .qtip-content > div :last-child {
   margin-bottom: 0;
 }
 
 .qtip select:hover,
 .qtip button:hover {
-  background-color: var(--system-gray8);
-  color: var(--system-gray0);
+  background-color: var(--system-gray4);
+  color: var(--qtip-highlight-color);
 }
 
 .qtip-wide {
@@ -523,6 +538,7 @@ body.light .qtip-tipsy {
   top: 0;
   width: 100%;
   height: var(--toolbar-width);
+  white-space: nowrap;
 }
 
 .vertical-toolbar {
@@ -578,12 +594,31 @@ body.light .qtip-tipsy {
 
 .horizontal-toolbar .input,
 .horizontal-toolbar .select {
+  box-sizing: content-box;
   display: inline-block;
   position: relative;
   top: -3px;
   margin: auto 5px;
+  font-family: var(--sans-serif);
   font-size: var(--font-size);
   border: 1px solid var(--system-gray3);
+  border-radius: 9.5px;
+  padding: 0px 6px 0px 6px;
+  height: 16px;
+}
+
+html[platform=win32] .horizontal-toolbar .input,
+html[platform=win32] .horizontal-toolbar .select {
+  padding: 0px 6px 1px 6px;
+}
+
+html[platform=darwin] .horizontal-toolbar .input,
+html[platform=darwin] .horizontal-toolbar .select {
+  padding: 1px 6px 0 6px;
+}
+
+.horizontal-toolbar .select {
+  top: -2.5px;
 }
 
 .horizontal-toolbar .separator {
@@ -604,34 +639,33 @@ body.light .qtip-tipsy {
   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);
 }
 
 .horizontal-toolbar .right {
-  float: right;
+  position: absolute;
+  right: 0;
 }
 
 .large-toolbar .material-icons {
@@ -659,6 +693,14 @@ body.light .qtip-tipsy {
   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 {
@@ -709,8 +751,11 @@ body.dark .dialog ::placeholder {
   z-index: 3000 !important;
 }
 
+.dialog.ui-dialog .ui-dialog-content {
+  padding: 1rem;
+}
+
 .dialog.ui-dialog.ui-widget.ui-widget-content {
-  cursor: move;
   backdrop-filter: var(--tool-backdrop-filter);
   background-color: var(--tool-background-color);
   border-radius: var(--tool-border-radius);
@@ -724,6 +769,23 @@ body.dark .dialog ::placeholder {
   overflow-y: auto;
 }
 
+.scene-properties .button {
+  cursor: pointer;
+}
+
+.scene-properties .drag {
+  cursor: move;
+}
+
+.scene-properties .active {
+  color: var(--accent-color);
+}
+
+.scene-properties .disabled {
+  cursor: inherit;
+  color: var(--system-gray2);
+}
+
 /* Library */
 
 .ui-widget .library-input {
@@ -762,7 +824,7 @@ body.dark .dialog ::placeholder {
   user-select: none;
   position: absolute;
   overflow: scroll;
-  margin: 1rem 1rem 0.5rem 1rem;
+  margin: 1rem 1rem 0 1rem;
   inset: 75px 0 0 0;
 }
 
@@ -777,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 {
@@ -806,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 {
@@ -937,6 +1020,7 @@ body.dark .ui-widget .library-list .component {
 }
 
 .console-left {
+  overflow: hidden;
   position: absolute;
   box-sizing: border-box;
   left: 0;
@@ -1062,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 {
@@ -1116,9 +1294,16 @@ body.dark .ui-widget .library-list .component {
 }
 
 .animation-editor-toolbar {
+  container-type: inline-size;
   padding-left: 5px;
 }
 
+@container (max-width: 630px) {
+  .animation-editor-toolbar .right {
+    display: none;
+  }
+}
+
 .animation-editor-navigation {
   top: var(--toolbar-width);
 }
@@ -1277,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;
 }
@@ -1314,6 +1509,7 @@ body.dark .ui-widget .library-list .component {
 
 /* make drag & drop work */
 .scene-graph .last {
+  overflow: hidden;
   height: 2px;
 }
 
@@ -1358,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);
 }
@@ -1643,6 +1839,12 @@ body.dark .ui-widget .library-list .component {
 
 .tp-dfwv {
   overflow: auto;
+  box-shadow: var(--qtip-shadow);
+  border-radius: var(--tp-base-border-radius);
+}
+
+.tp-rotv {
+  border: var(--qtip-border);
 }
 
 .tp-lblv_v {
@@ -1674,6 +1876,11 @@ body.dark .ui-widget .library-list .component {
   display: none;
 }
 
+/* check mark */
+.tp-ckbv_w svg path {
+  stroke: var(--system-green) !important;
+}
+
 /* monaco editor */
 
 .monaco-editor,

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);