sunrize 1.11.0 → 1.11.1

package/src/assets/themes/default.css

@@ -52,7 +52,7 @@ body {
   background-color: transparent;
 }
 
-/* Handle */
+/* Scrollbar Handle */
 :hover::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb-color);
 }
@@ -72,6 +72,12 @@ body {
   background-color: var(--scrollbar-thumb-color);
 }
 
+/* inputs */
+
+input[type=checkbox] {
+  accent-color: var(--system-green);
+}
+
 /* common */
 
 .green {
@@ -101,6 +107,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 +141,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);
 }
 
@@ -433,29 +437,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 +466,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 p {
+  margin: 8px 0;
 }
 
-.qtip .qtip-content > div:first-child {
+.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 +545,7 @@ body.light .qtip-tipsy {
   top: 0;
   width: 100%;
   height: var(--toolbar-width);
+  white-space: nowrap;
 }
 
 .vertical-toolbar {
@@ -578,12 +601,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 {
@@ -631,7 +673,8 @@ body.light .qtip-tipsy {
 }
 
 .horizontal-toolbar .right {
-  float: right;
+  position: absolute;
+  right: 0;
 }
 
 .large-toolbar .material-icons {
@@ -694,7 +737,7 @@ body.light .qtip-tipsy {
 /* Dialog */
 
 .dialog ::placeholder {
-  color: var(--system-gray1);
+  color: var(--system-gray2);
 }
 
 body.dark .dialog ::placeholder {
@@ -709,8 +752,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 +770,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 +825,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;
 }
 
@@ -1116,9 +1179,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);
 }
@@ -1643,6 +1713,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 +1750,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/system-colors.css

@@ -1,7 +1,7 @@
 @charset "utf-8";
 
 @media (prefers-color-scheme: light) {
-  body {
+  :root {
     color-scheme: light;
 
     /* Colors */
@@ -31,24 +31,36 @@
 
     --selection-color: black;
     --selection-background-color: rgb(246, 196, 197);
-    --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
     --selection-range: rgba(0, 0, 0, 0.05);
-  }
+    --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
 
-  /* TweakPanel colors */
-  :root {
-    --tp-base-background-color: hsl(230, 7%, 85%);
-    --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
-    --tp-container-background-color: hsl(230, 7%, 90%);
+    /* Filter Colors */
+
+    --filter-system-red: invert(31%) sepia(82%) saturate(3000%) hue-rotate(344deg) brightness(115%) contrast(105%);
+    --filter-system-gray0: invert(36%) sepia(72%) saturate(11%) hue-rotate(222deg) brightness(95%) contrast(90%);
+    --filter-system-gray1: invert(63%) sepia(4%) saturate(334%) hue-rotate(201deg) brightness(89%) contrast(86%);
+
+    /* Special Colors */
+
+    --sidebar-background-color: rgb(208, 219, 231);
+    --tint-color1: rgba(255, 255, 255, 0.5);
+    --tint-color2: rgba(255, 255, 255, 1);
+
+    /* TweakPanel colors */
+
+    --tp-base-border-radius: 12px;
+    --tp-container-background-color: white;
     --tp-container-background-color-active: hsl(230, 7%, 90%);
     --tp-container-background-color-focus: hsl(230, 7%, 90%);
     --tp-container-background-color-hover: hsl(230, 7%, 95%);
+    --tp-base-background-color: var(--system-gray7);
+    --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
     --tp-container-foreground-color: hsl(230, 7%, 17%);
     --tp-groove-foreground-color: hsl(230, 7%, 17%);
     --tp-input-background-color: hsl(230, 7%, 92%);
-    --tp-input-background-color-active: hsl(230, 7%, 96%);
-    --tp-input-background-color-focus: hsl(230, 7%, 96%);
-    --tp-input-background-color-hover: hsl(230, 7%, 96%);
+    --tp-input-background-color-active: hsl(230, 7%, 94%);
+    --tp-input-background-color-focus: hsl(230, 7%, 94%);
+    --tp-input-background-color-hover: hsl(230, 7%, 94%);
     --tp-input-foreground-color: hsl(230, 7%, 17%);
     --tp-button-background-color: var(--tp-input-background-color);
     --tp-button-background-color-active: var(--tp-input-background-color-active);
@@ -66,7 +78,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  body {
+  :root {
     color-scheme: dark;
 
     /* Colors */
@@ -96,12 +108,29 @@
 
     --selection-color: white;
     --selection-background-color: rgb(167, 118, 119);
-    --scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
     --selection-range: rgba(255, 255, 255, 0.05);
-  }
+    --scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
 
-  /* TweakPanel colors */
-  :root {
+    /* Filter Colors */
+
+    --filter-system-red: invert(69%) sepia(59%) saturate(6315%) hue-rotate(336deg) brightness(99%) contrast(108%);
+    --filter-system-gray0: invert(97%) sepia(2%) saturate(509%) hue-rotate(200deg) brightness(84%) contrast(94%);
+    --filter-system-gray1: invert(72%) sepia(0%) saturate(6315%) hue-rotate(205deg) brightness(81%) contrast(62%);
+
+    /* Special Colors */
+
+    --sidebar-background-color: rgb(42, 50, 63);
+    --tint-color1: rgba(0, 0, 0, 0.2);
+    --tint-color2: rgba(0, 0, 0, 0.4);
+
+    /* TweakPanel colors */
+
+    --tp-base-border-radius: 12px;
+    --tp-container-background-color: black;
+    --tp-container-background-color-hover: black;
+    --tp-container-background-color-active: black;
+    --tp-container-background-color-focus: black;
+    --tp-base-background-color: var(--system-gray7);
     --tp-input-background-color: rgba(187, 188, 196, 0.1);
     --tp-input-background-color-active: rgba(187, 188, 196, 0.25);
     --tp-input-background-color-focus: rgba(187, 188, 196, 0.2);
@@ -121,36 +150,6 @@
   }
 }
 
-body {
-  /* Filter Colors */
-
-  --filter-system-red: invert(31%) sepia(82%) saturate(3000%) hue-rotate(344deg) brightness(115%) contrast(105%);
-  --filter-system-gray0: invert(36%) sepia(72%) saturate(11%) hue-rotate(222deg) brightness(95%) contrast(90%);
-  --filter-system-gray1: invert(63%) sepia(4%) saturate(334%) hue-rotate(201deg) brightness(89%) contrast(86%);
-
-  /* Special Colors */
-
-  --sidebar-background-color: rgb(208, 219, 231);
-  --tint-color1: rgba(255, 255, 255, 0.5);
-  --tint-color2: rgba(255, 255, 255, 1);
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    /* Filter Colors */
-
-    --filter-system-red: invert(69%) sepia(59%) saturate(6315%) hue-rotate(336deg) brightness(99%) contrast(108%);
-    --filter-system-gray0: invert(97%) sepia(2%) saturate(509%) hue-rotate(200deg) brightness(84%) contrast(94%);
-    --filter-system-gray1: invert(72%) sepia(0%) saturate(6315%) hue-rotate(205deg) brightness(81%) contrast(62%);
-
-    /* Special Colors */
-
-    --sidebar-background-color: rgb(42, 50, 63);
-    --tint-color1: rgba(0, 0, 0, 0.2);
-    --tint-color2: rgba(0, 0, 0, 0.4);
-  }
-}
-
 body {
   /* Colors */
 
@@ -197,20 +196,26 @@ body {
 
   --tool-backdrop-filter: blur(25px);
   --tool-background-color: rgba(208, 219, 231, 0.8); /* --sidebar-background-color */
-  --tool-border-radius: 6px;
+  --tool-border-radius: 12px;
   --tool-border: 1px solid var(--system-gray8);
   --tool-shadow: 3px 3px 9px rgba(0, 0, 0, 0.6);
 
-  --preview-background-color: white;
-  --preview-border: 1px solid var(--system-gray6);
-
   --background-disabled: repeating-linear-gradient(
     -45deg,
     var(--tint-color1),
     var(--tint-color1) 10px,
     transparent 10px,
     transparent 20px
-  )
+  );
+
+  /*Qtip */
+
+  --qtip-shadow: var(--tool-shadow);
+  --qtip-border-radius: 12px;
+
+  --qtip-background-color: white;
+  --qtip-border: 1px solid var(--system-gray1);
+  --qtip-highlight-color: black;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -234,13 +239,10 @@ body {
     --tool-border: 1px solid var(--system-gray2);
     --tool-shadow: 3px 3px 9px var(--system-gray8);
 
-    --preview-background-color: black;
-    --preview-border: 1px solid var(--system-gray4);
-  }
-}
+    /* Qtip */
 
-body {
-  --qtip-background-color: var(--sidebar-background-color);
-  --qtip-border: var(--tool-border);
-  --qtip-shadow: var(--tool-shadow);
+    --qtip-background-color: black;
+    --qtip-border: 1px solid var(--system-gray4);
+    --qtip-highlight-color: white;
+  }
 }