sunrize 1.9.1 → 1.10.2

package/src/assets/themes/{default-template.css → 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(../../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);
+@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,39 @@ body {
   background: var(--selection-background-color);
 }
 
+/* Scrollbars */
+
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+::-webkit-scrollbar-track, /* Track */
+::-webkit-scrollbar-thumb:window-inactive, /* Handle */
+::-webkit-scrollbar-corner { /* Corner */
+  background-color: transparent;
+}
+
+/* Handle */
+:hover::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-color);
+}
+
+/* https://developer.chrome.com/docs/css-ui/scrollbar-styling?hl=de */
+:hover {
+  --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
+}
+
+/* textarea resizer */
+
+::-webkit-resizer {
+  background-color: transparent;
+}
+
+:hover::-webkit-resizer {
+  background-color: var(--scrollbar-thumb-color);
+}
+
 /* common */
 
 .green {
@@ -57,7 +87,7 @@ body {
 
 textarea, input, button, select,
 th, td,
-.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-widget-content {
+.ui-widget, .ui-widget:has(input, select, textarea, button), .ui-widget-content {
   border: none;
   padding: 0;
   background: none;
@@ -177,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;
@@ -350,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;
 }
 
@@ -462,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;
@@ -478,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;
@@ -489,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;
@@ -498,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 {
@@ -521,7 +611,7 @@ body.light .qtip-tipsy {
 }
 
 .large-toolbar .image-icon {
-  background: no-repeat;
+  background-repeat: no-repeat;
   display: block;
   width: 24px;
   height: 24px;
@@ -539,18 +629,6 @@ 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);
-}
-
-.image-icon.straighten {
-  background-image: url(../images/icons/straighten.svg);
-}
-
 /* Browser */
 
 #browser-pane {
@@ -594,7 +672,7 @@ body.dark .dialog ::placeholder {
 }
 
 .dialog .tabs-panel {
-  padding: 0.5em 1em;
+  margin: 0.5em 1em;
 }
 
 .dialog.ui-dialog {
@@ -654,8 +732,8 @@ body.dark .dialog ::placeholder {
   user-select: none;
   position: absolute;
   overflow: scroll;
-  margin: 10px 0;
-  inset: 75px 1em 0 1em;
+  margin: 1rem 1rem 0.5rem 1rem;
+  inset: 75px 0 0 0;
 }
 
 .ui-widget .library-list {
@@ -701,38 +779,101 @@ body.dark .ui-widget .library-list .component {
 /* Node List */
 
 .node-list {
-  overflow: scroll;
+  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 */
@@ -908,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 {
@@ -935,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 {
@@ -1442,10 +1634,7 @@ body.dark .ui-widget .library-list .component {
   all: revert;
 }
 
-.monaco-scrollable-element > .shadow {
-  display: none !important;
-}
-
-.monaco-inputbox > .ibwrapper {
-  height: auto !important;
+/* Fix stange tooltip with placehoder in Find widget */
+.context-view.monaco-component {
+  display: none;
 }

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/themes/system-colors.css

@@ -29,6 +29,7 @@
 
     --selection-color: black;
     --selection-background-color: rgb(246, 196, 197);
+    --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
   }
 
   /* TweakPanel colors */
@@ -90,6 +91,7 @@
 
     --selection-color: white;
     --selection-background-color: rgb(167, 118, 119);
+    --scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
   }
 
   /* TweakPanel colors */

package/src/main.js

@@ -1,6 +1,10 @@
 "use strict";
 
+// Restore cwd.
+
 if (process .argv .at (-2) === "--cwd")
    process .chdir (process .argv .at (-1));
 
+// Run application.
+
 require ("./Application/Application") .run ();