senangwebs-aframe-editor 1.6.5

package/src/style/primitiveModal.styl

@@ -0,0 +1,90 @@
+.modal-overlay
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  backdrop-filter blur(4px)
+  background-color rgba(0, 0, 0, .5)
+  display flex
+  justify-content center
+  align-items center
+  z-index 1000 /* Ensure modal is on top */
+
+.modal-content
+  color #eee /* Light text */
+  border-radius 8px
+  min-width 300px
+  max-width 600px
+  width 100%
+  box-shadow 0 4px 15px rgba(0, 0, 0, 0.2)
+
+#primitive-modal .modal-header
+  display flex
+  justify-content space-between
+  align-items center
+
+.modal-body
+  display flex
+  flex-direction column
+
+#primitive-modal h3
+  text-align center
+  color #fff
+  font-size 16px
+  font-weight 500
+  margin 0.6em 0
+
+.primitive-grid
+  display grid
+  grid-template-columns repeat(auto-fit, minmax(100px, 1fr)) /* Responsive grid */
+  gap 16px
+
+.primitive-button
+  background-color #09090B
+  color white
+  padding 8px
+  border-radius 8px
+  cursor pointer
+  transition background-color 0.2s ease, transform 0.1s ease
+  text-align center
+  aspect-ratio 1
+  border none
+  display flex
+  flex-direction column
+  gap 8px
+  justify-content center
+  align-items center
+
+  svg
+    width 48px
+    height 48px
+    margin 4px auto
+    color red
+    opacity .4
+
+.primitive-button:hover
+  border 1px solid #00FF99
+
+  svg
+    opacity 1
+
+
+.primitive-button:active
+  border 1px solid #00FF99
+
+  svg
+    opacity 1
+
+.modal-close-button
+  background-color #777 /* Different color for cancel */
+  color #eee
+  border 1px solid #999
+  padding 8px 15px
+  border-radius 4px
+  cursor pointer
+  transition background-color 0.2s ease
+  align-self flex-end /* Position cancel button to the right */
+
+.modal-close-button:hover
+  background-color #888

package/src/style/scenegraph.styl

@@ -0,0 +1,173 @@
+@import './lib';
+
+#toolbar
+  background-color $bgdark
+
+  .toolbarActions
+    padding 0
+    height 48px
+    display grid
+    grid-template-columns repeat(2, minmax(0, 1fr))
+
+    a.button
+      display flex
+      justify-content center
+      align-items center
+      flex-direction column
+      margin 0
+
+      svg
+        color inherit
+
+      span
+        font-size 12px
+
+    a.button:hover
+      color $primary
+
+    a.disabled
+      color #666
+      cursor default
+
+#leftPanel
+  display flex
+  flex-direction column
+  width 20rem
+  height calc(100vh - 48px)
+
+.scenegraph-menubar
+    display flex
+    height 40px
+    width 100%
+    justify-content space-between
+    background-color $bg
+
+#scenegraph
+  background $bg
+  border-top 1px solid #111
+  display flex
+  flex-direction column
+  overflow auto
+  width 100%
+  height calc(100vh - 40px)
+
+  .entity
+    background $bg
+    cursor pointer
+    display flex
+    justify-content space-between
+    padding 10px
+    white-space nowrap
+
+    &:hover
+      background #1d2f39
+
+    &.active
+      background-color #09090B
+      color #fff
+      .component:hover
+        color rgba(0, 0, 0, 0.5)
+      .entityActions
+        display flex
+
+    &.novisible
+      &.active
+        span,
+        svg,
+        .collapsespace,
+        .id
+          color #999
+
+      &:not(.active)
+        span,
+        svg,
+        .collapsespace,
+        .id
+          color #626262
+
+  .component:hover
+    color rgba(0, 0, 0, 0.5)
+
+  .entityIcons
+    margin-left 2px
+
+  .entityActions
+    display none
+    margin 0 4px
+
+    .button
+      color #fff
+      font-size 12px
+      margin-left 6px
+
+  svg
+    color #CCC
+
+  .entityActions svg:hover
+    color $primary
+
+  .active svg
+    color #FAFAFA
+
+  .id
+    color #ccc
+
+  .option.active .id
+    color #fff
+
+  .collapsespace
+    color #eee
+    display inline-block
+    text-align center
+    width 14px
+    margin-left 8px
+
+  .fa-eye
+    color #bbb
+
+  .icons a.button
+    color #fff
+
+  .search
+    padding 0px
+    font-size 16px
+    position relative
+    overflow hidden
+
+    input
+      color $white
+      background $bg
+      border-radius 0px
+      border-bottom 1px solid $bgdark
+      height 40px
+      text-indent 10px
+      width 100%
+
+    svg
+      position absolute
+      right 12px
+      top 12px
+
+  .outliner
+    background $bg
+    color $white
+    cursor default
+    flex 1 1 auto
+    font-size 14px
+    line-height normal
+    outline none
+    overflow-y auto
+    padding 0px
+    width 100%
+
+.scenegraph-bottom
+  background-color #323232
+  border-top 1px solid #111
+  bottom 10
+  height 40px
+  left 0
+  z-index 100
+
+  a
+    float right
+    margin 10px

package/src/style/select.styl

@@ -0,0 +1,71 @@
+@import './lib';
+
+.select__control
+  border 0
+  border-radius 8px
+  cursor pointer
+  min-height 32px
+  font-family $monospace
+  font-size 14px
+
+.select__indicator
+  height 26px
+
+.select__indicator-separator
+  display none
+
+.select__input
+  min-height auto !important
+
+.select__control,
+.select__menu
+  background $bgdark
+
+.select__option
+  padding 5px 10px
+
+.select__placeholder,
+.select__menu
+  color $white
+
+.select__single-value
+  color white
+
+.select__control--is-focused
+  box-shadow none !important
+
+.select__option
+  cursor pointer
+
+.select__clear-indicator
+  display none
+
+.select__label
+  font-size 14px
+
+.select__option--is-focused
+  background $bg
+
+.select__value-container
+  height 32px
+  position static
+  &.select__value-container--is-multi
+    height auto
+    padding 6px
+
+.select__dropdown-indicator
+  padding 3px 8px
+
+.select__multi-value
+  background $bg
+  color $primary
+
+.select__multi-value__label
+  color $primary
+
+.select__value-container--is-multi > :last-child
+  display none
+
+.select__multi-value__remove:hover
+  color #fff
+  background $bg

package/src/style/textureModal.styl

@@ -0,0 +1,220 @@
+.modal
+  animation animateopacity 0.2s ease-out
+  display flex
+  height 100%
+  left 0
+  overflow auto
+  position fixed
+  top 0
+  width 100%
+  z-index 9999999999
+  backdrop-filter blur(4px)
+  background-color rgba(0, 0, 0, .5)
+
+.modal h3
+  font-size 16px
+  font-weight 500
+  margin 0.6em 0
+
+#textureModal .modal-content
+  height calc(100% - 96px)
+  max-width calc(100% - 96px)
+  border-radius 8px
+
+.modal-content
+  animation animatetop 0.2s ease-out
+  animation-duration 0.2s
+  animation-name animatetop
+  background-color #18181B
+  margin auto
+  overflow hidden
+  padding 0
+
+.close
+  color #ffffff80
+  float right
+  font-size 24px
+  font-weight bold
+
+  &:hover
+    cursor pointer
+    color #ffffff
+
+.closehover,
+.closefocus
+  color #08f
+  cursor pointer
+  text-decoration none
+
+.modal-header
+  color white
+  padding 2px 16px
+
+.modal-body
+  overflow auto
+  padding 16px
+  height inherit
+
+.modal-footer
+  color white
+  padding 2px 16px
+
+/* Gallery */
+.gallery
+  background #232323
+  display flex
+  flex-wrap wrap
+  margin 15px auto 0
+  overflow auto
+  padding 15px 3px 3px
+
+.newimage .gallery
+  padding 8px
+
+.gallery li
+  border-radius 8px
+  box-shadow 0 0 6px rgba(0, 0, 0, 0.6)
+  cursor pointer
+  margin 8px
+  overflow hidden
+  width 155px
+
+.gallery li.selected,
+.gallery li:hover
+  box-shadow 0 0 0 2px #00ff99
+
+.gallery li .detail
+  background-color #323232
+  margin 0
+  min-height 60px
+  padding 4px 8px 8px 8px
+
+.preview
+  padding 10px
+  width 150px
+
+.preview input
+  display block
+  margin 8px 0
+  width 144px
+
+.preview button
+  width 155px
+
+.preview .detail .title
+  color #fff
+  display inline-block
+  max-width 155px
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+
+.gallery li.selected .detail,
+.gallery li:hover .detail
+  background-color #444
+
+.gallery li .detail span
+  color #777
+  display block
+  margin-top 4px
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+  width 140px
+
+.gallery li.selected .detail span,
+.gallery li:hover .detail span
+  color #888
+
+.gallery li .detail span.title
+  color #fff !important
+
+.modal button
+  appearance none
+  border-radius 0
+  box-shadow none
+  cursor pointer
+  display inline-block
+  font-size 12px
+  line-height 1.8
+  margin 0 0 0 0
+  padding 5px 10px
+
+.modal buttonfocus
+  outline none
+
+.modal button
+  background-color #09090b
+  border none
+  color #fff
+  border-radius 8px
+  font-weight 500
+  padding 8px 16px
+  text-transform capitalize
+
+.modal buttonhover,
+.modal button.hover
+  background-color #346392
+  text-shadow -1px 1px #27496d
+
+.modal buttonactive,
+.modal button.active
+  background-color #27496d
+  text-shadow -1px 1px #193047
+
+.modal buttondisabled
+  background-color #888
+  cursor none
+
+.newimage
+  background-color #323232
+  color #A3A3A3
+  display flex
+  font-size 14px
+  justify-content space-between
+  margin-top 16px
+  overflow auto
+  padding 8px
+  border-radius 8px
+
+.newimage input
+  color #00ff99
+  padding 3px 5px
+
+.texture canvas + input
+  margin-left 5px
+
+.texture svg
+  padding-right 5px
+
+.uploader-normal-button .hidden
+  display none
+
+.assets.search
+  position relative
+  margin-top 10px
+  width 200px
+
+.assets.search svg
+  position absolute
+  right 0px
+  top 5px
+
+.new_asset_options
+  margin 10px
+
+.new_asset_options > ul
+  margin-left 10px
+  padding 5px
+
+.new_asset_options > ul > li
+  padding 10px 0
+
+.new_asset_options .imageUrl
+  margin-left 5px
+  width 350px
+
+.texture canvas
+  border 1px solid rgba(255, 255, 255, .15)
+  border-radius 8px
+  cursor pointer

package/src/style/viewport.styl

@@ -0,0 +1,168 @@
+@import './lib';
+
+#viewportBar
+  align-items center
+  color $white
+  position absolute
+  top 0
+  left 50%
+  transform translateX(-50%)
+  flex-grow 2
+  display flex
+  height 40px
+  font-size 14px
+  justify-content space-between
+  margin 8px auto
+  width auto
+  background $bg
+  border-radius 8px
+
+  .viewportHud-menubar
+    display flex
+    height 40px
+    width 240px
+    align-items center
+    justify-content flex-end
+
+#viewportHud
+  padding 0px 4px
+  margin 0 4px
+  background $bgdark
+  overflow-x auto
+  overflow-y hidden
+  height 30px
+  width 230px
+  border-radius 8px
+  display flex!important
+  align-items center
+  justify-content end
+
+  p
+    margin 0
+    font-size 14px
+
+#pageToolbar
+  display flex
+  align-items center
+  height 48px
+
+  .button
+    width 48px
+    height 48px
+    border 0
+    background none
+    font-size 16px
+    cursor pointer
+
+  .button:hover
+    background #141417
+
+    svg
+      color $primary
+
+.toolbarButtons
+  display flex
+  align-items center
+  height 40px
+
+  *
+    margin-left 0 !important
+    vertical-align middle
+    height 48px
+    display flex
+    align-items center
+
+  a.button
+    & svg
+      padding 12px
+
+    &:not(.active) svg:hover
+      background-color #141417
+
+  .active svg
+    background-color #141417!important
+    color $primary
+
+  .active:hover svg
+    color #fff !important
+
+.local-transform
+  padding-left 10px
+  padding-right 20px
+
+.local-transform label
+  color $lightgray
+  padding-left 8px
+  font-size 14px
+
+.local-transform a.button
+  padding-top 0
+
+#cameraSelect
+  cursor pointer
+  width 120px
+  .select__dropdown-indicator
+    padding-left 3px
+    padding-right 3px
+
+#cameraToolbar
+  align-items center
+  height 40px
+  padding 0 5px
+  display flex
+
+  #cameraSelect
+    width 160px // Adjust width to accommodate icon + text
+    .select__control
+      background-color $bgdark
+      border none
+      min-height 30px // Adjust height
+      height 30px
+      box-shadow none
+      &:hover
+        border-color $grey
+    .select__value-container
+      padding 0 4px
+    .select__single-value
+      color $white
+      display flex
+      align-items center
+      svg
+        margin-right 8px
+        width 16px
+        height 16px
+    .select__indicator-separator
+      display none
+    .select__dropdown-indicator
+      padding 4px
+      color $grey
+      &:hover
+        color $white
+    .select__menu
+      background-color $bgdark
+    .select__option
+      background-color $bgdark
+      color $white
+      display flex
+      align-items center
+      svg
+        margin-right 8px
+        width 24px
+        height 24px
+      &:hover
+        background-color #141417
+        color $primary
+        svg
+          fill $primary
+      &--is-focused
+        background-color #141417 // Keep focus style consistent with hover
+      &--is-selected
+        background-color $bgdark // Keep selected background subtle if needed
+        color $primary
+        svg
+          fill $primary
+
+#viewportHud
+  display none
+  +media--1024()
+    display block