sunrize 1.10.0 → 1.10.2

package/src/assets/themes/default.css

@@ -1,9 +1,6 @@
 @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(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);
+@import url(media.css);
 
 html {
   overflow: hidden;
@@ -24,7 +21,7 @@ body {
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
 }
 
-*:focus {
+:focus {
   outline: none;
 }
 
@@ -37,6 +34,8 @@ body {
   background: var(--selection-background-color);
 }
 
+/* Scrollbars */
+
 ::-webkit-scrollbar {
   width: 14px;
   height: 14px;
@@ -59,7 +58,12 @@ body {
 }
 
 /* textarea resizer */
+
 ::-webkit-resizer {
+  background-color: transparent;
+}
+
+:hover::-webkit-resizer {
   background-color: var(--scrollbar-thumb-color);
 }
 
@@ -203,7 +207,6 @@ tr.disabled ~ tr > td > div {
 
 .vertical-splitter-left,
 .vertical-splitter-right {
-  background-color: var(--background-color);
   position: absolute;
   box-sizing: border-box;
   top: 0;
@@ -376,7 +379,7 @@ tr.disabled ~ tr > td > div {
 
 .ui-tabs > .ui-tabs-nav .ui-tabs-anchor,
 .ui-tabs > .ui-tabs-nav .ui-tabs-active .ui-tabs-anchor {
-  cursor: pointer;
+  cursor: pointer !important;
   color: inherit;
 }
 
@@ -488,12 +491,28 @@ body.light .qtip-tipsy {
   box-sizing: border-box;
 }
 
+.horizontal-toolbar {
+  top: 0;
+  width: 100%;
+  height: var(--toolbar-width);
+}
+
 .vertical-toolbar {
   right: 0;
   height: 100%;
   width: var(--toolbar-width);
 }
 
+.horizontal-toolbar .material-icons,
+.horizontal-toolbar .material-symbols-outlined {
+  display: inline-block;
+  margin: auto 5px;
+  height: var(--icon-size);
+  cursor: pointer;
+  font-size: var(--icon-size);
+  user-select: none;
+}
+
 .vertical-toolbar .material-icons,
 .vertical-toolbar .material-symbols-outlined {
   display: block;
@@ -504,6 +523,12 @@ body.light .qtip-tipsy {
   user-select: none;
 }
 
+.horizontal-toolbar .material-symbols-outlined {
+  font-size: calc(var(--icon-size) + 7px);
+  position: relative;
+  top: 3px;
+}
+
 .vertical-toolbar .material-symbols-outlined {
   font-size: calc(var(--icon-size) + 7px);
   position: relative;
@@ -515,6 +540,32 @@ body.light .qtip-tipsy {
   left: -1px;
 }
 
+.horizontal-toolbar .text {
+  display: inline-block;
+  position: relative;
+  top: -2px;
+  margin: auto 5px;
+  font-size: var(--font-size);
+}
+
+.horizontal-toolbar .input {
+  display: inline-block;
+  position: relative;
+  top: -3px;
+  margin: auto 5px;
+  font-size: var(--font-size);
+  border: 1px solid var(--system-gray3);
+}
+
+.horizontal-toolbar .separator {
+  display: inline-block;
+  margin: auto 10px;
+  width: 0;
+  height: var(--icon-size);
+  border-right: 1px solid var(--separator-color);
+  user-select: none;
+}
+
 .vertical-toolbar .separator {
   display: block;
   margin: 10px auto;
@@ -524,20 +575,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 {
   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 {
   color: var(--accent-color);
 }
 
+.horizontal-toolbar .material-icons.disabled,
+.horizontal-toolbar .material-symbols-outlined.disabled,
+.horizontal-toolbar .text.disabled,
+.horizontal-toolbar .input.disabled,
 .vertical-toolbar .material-icons.disabled,
 .vertical-toolbar .material-symbols-outlined.disabled {
   pointer-events: none;
   color: var(--system-gray3);
+  border-color: var(--system-gray3);
+}
+
+.horizontal-toolbar .right {
+  float: right;
 }
 
 .large-toolbar .material-icons {
@@ -547,7 +611,7 @@ body.light .qtip-tipsy {
 }
 
 .large-toolbar .image-icon {
-  background: no-repeat;
+  background-repeat: no-repeat;
   display: block;
   width: 24px;
   height: 24px;
@@ -565,18 +629,6 @@ body.light .qtip-tipsy {
   filter: var(--filter-accent-color);
 }
 
-.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);
-}
-
-.image-icon.straighten {
-  background-image: url(file:///Users/holger/Desktop/X_ITE/sunrize/src/assets/images/icons/straighten.svg);
-}
-
 /* Browser */
 
 #browser-pane {
@@ -727,38 +779,101 @@ body.dark .ui-widget .library-list .component {
 /* Node List */
 
 .node-list {
+  user-select: none;
   overflow: auto;
   position: absolute;
   inset: 0 0 0 0;
   padding: 0;
 }
 
-.node-list > ul {
+.node-list ul {
   margin: 0;
   padding: 0;
+  width: fit-content;
+  min-width: 100%;
   list-style-type: none;
 }
 
-.node-list > ul > li {
-  cursor: pointer;
-  user-select: none;
+.node-list > ul {
+  padding: 1px 0;
+  color: var(--system-blue);
+}
+
+.node-list > ul > li > ul {
+  color: var(--system-orange);
+}
+
+.node-list .main {
+  color: var(--system-indigo);
+}
+
+.node-list.alternating > ul li:has(li) {
+  border-bottom: 1px solid var(--tint-color2);
+}
+
+.node-list .item {
   margin: 0;
-  padding: 3px 10px;
+  padding: 5px 10px 5px 0;
   white-space: nowrap;
 }
 
-.node-list > ul > li:nth-child(odd) {
+.node-list > ul > li > .item {
+  padding-left: 10px;
+}
+
+.node-list > ul > li > ul > li > .item {
+  padding-left: 20px;
+}
+
+/* .node-list > ul > li:has(> .item:hover) {
+  outline: 1px solid var(--system-blue);
+}
+
+.node-list > ul > li > ul > li:has(> .item:hover) {
+  outline: 1px solid var(--system-orange);
+} */
+
+.node-list.alternating > ul li:not(:has(li)):nth-child(odd) > .item {
   background-color: var(--tint-color1);
 }
 
-.node-list > ul > li:hover {
-  background-color: var(--tint-color2);
+.node-list.alternating > ul .item:hover {
+  background-color: var(--tint-color2) !important;
 }
 
 .node-list .icon {
   position: relative;
-  margin-right: 2px;
+  margin-right: 5px;
+  top: 1px;
+  width: 16px;
+  height: 12px;
+}
+
+.node-list .button {
+  cursor: pointer;
+  position: relative;
   top: 2px;
+  font-size: var(--font-size);
+}
+
+.node-list .button:hover {
+  color: var(--system-cyan);
+}
+
+.node-list .button.on {
+  color: var(--system-blue);
+}
+
+.node-list .button.on:hover {
+  color: var(--system-cyan);
+}
+
+.node-list .button.off {
+  color: var(--system-gray1);
+}
+
+.node-list .button.off:hover {
+  color: var(--system-gray0);
 }
 
 /* Footer */
@@ -934,10 +1049,8 @@ body.dark .ui-widget .library-list .component {
 }
 
 .script-editor .node-list {
-  user-select: none;
   bottom: var(--input-height);
   border-bottom: 1px solid var(--border-color);
-  color: var(--system-blue);
 }
 
 .script-editor .type-name {
@@ -961,9 +1074,62 @@ body.dark .ui-widget .library-list .component {
 /* Animation Editor */
 
 .animation-editor {
+  --input-height: 20px;
+
   box-sizing: border-box;
 }
 
+.animation-editor-toolbar {
+  padding-left: 5px;
+}
+
+.animation-editor-navigation {
+  top: var(--toolbar-width);
+}
+
+.animation-editor .animation-editor-content {
+  position: absolute;
+  box-sizing: border-box;
+  top: var(--toolbar-width);
+  right: var(--toolbar-width);
+  left: 0;
+  bottom: 0;
+  border-top: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+}
+
+.animation-editor .timeline {
+  user-select: none;
+  border-left: 1px solid var(--border-color);
+}
+
+.animation-editor .node-list {
+  bottom: var(--input-height);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.animation-editor .type-name {
+  font-weight: bold;
+}
+
+.animation-editor .node-name {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  height: var(--input-height);
+  border: none;
+  background-color: var(--background-color);
+}
+
+.animation-editor .tracks {
+  position: absolute;
+  display: block;
+  width: calc(100% - var(--toolbar-width));
+  height: calc(100% - var(--toolbar-width));
+  top: var(--toolbar-width);
+  image-rendering: pixelated;
+}
+
 /* Sidebar */
 
 .sidebar.ui-widget.ui-widget-content {

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

@@ -0,0 +1,12 @@
+@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);
+}

package/src/assets/html/application.html

@@ -1,94 +0,0 @@
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <!-- Theme -->
-    <link rel="stylesheet" type="text/css" href="file:///Users/holger/Desktop/X_ITE/sunrize/src/assets/themes/default.css"/>
-  </head>
-  <body>
-    <tab-group sortable="true">
-      <style>
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track, /* Track */
-::-webkit-scrollbar-thumb:window-inactive, /* Handle */
-::-webkit-scrollbar-corner { /* Corner */
-  background-color: transparent;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-color);
-}
-
-.etabs .nav {
-  height: var(--window-tabs-height);
-  background: var(--background-color);
-  box-shadow: none;
-  border: none;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-}
-
-.etabs .tab {
-  background: var(--window-tabs-background-color);
-  border-color: var(--border-color) !important;
-  padding: 4px 3px !important;
-  color: var(--window-tabs-text-color);
-  font-family: var(--sans-serif);
-  box-shadow: none;
-}
-
-.etabs .tab:first-child {
-  border-left: 0;
-}
-
-.etabs .tab.active {
-  z-index: 1100;
-  background: var(--background-color);
-  color: var(--window-tabs-highlight-color);
-}
-
-.etabs::before {
-  z-index: 1000;
-  content: "";
-  position: relative;
-  display: block;
-  height: 1px;
-  width: 100%;
-  box-shadow: var(--tabs-shadow);
-}
-
-.etabs .buttons {
-  border-color: var(--border-color);
-}
-
-.etabs .buttons:hover button,
-.etabs .tab-close button:hover {
-  background: none;
-}
-
-.etabs .buttons button:hover,
-.etabs .tab-close:hover button {
-  color: var(--system-gray0);
-}
-
-.etabs .tab-close button {
-  visibility: hidden;
-}
-
-.etabs .tab.active .tab-close button,
-.etabs .tab:hover .tab-close button {
-  visibility: visible;
-}
-
-.etabs .tab-close {
-  margin-left: 4px;
-}
-      </style>
-    </tab-group>
-  </body>
-</html>

package/src/assets/html/window.html

@@ -1,37 +0,0 @@
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <link rel="stylesheet" type="text/css" href="file:///Users/holger/Desktop/X_ITE/sunrize/node_modules/jquery-ui-dist/jquery-ui.min.css"/>
-    <link rel="stylesheet" type="text/css" href="file:///Users/holger/Desktop/X_ITE/sunrize/node_modules/qtip2/dist/jquery.qtip.min.css"/>
-    <link rel="stylesheet" type="text/css" href="file:///Users/holger/Desktop/X_ITE/sunrize/src/assets/themes/default.css"/>
-  </head>
-  <body>
-    <div id="vertical-splitter" class="vertical-splitter">
-      <div class="vertical-splitter-left">
-        <div id="horizontal-splitter" class="horizontal-splitter">
-          <div class="horizontal-splitter-top">
-            <div id="browser-pane">
-              <div id="browser-frame">
-                <x3d-canvas
-                    id="browser"
-                    cache="false"
-                    contextMenu="false"
-                    debug="true"
-                    preserveDrawingBuffer="true"
-                    splashScreen="false"
-                    xrSessionMode="NONE"></x3d-canvas>
-              </div>
-              <div id="secondary-toolbar" class="toolbar vertical-toolbar large-toolbar secondary-toolbar"></div>
-            </div>
-          </div>
-          <div class="horizontal-splitter-bottom">
-            <div id="footer"></div>
-          </div>
-        </div>
-      </div>
-      <div class="vertical-splitter-right">
-        <div id="sidebar" class="sidebar"></div>
-      </div>
-    </div>
-  </body>
-</html>