senangwebs-aframe-editor 1.6.5

package/src/style/components.styl

@@ -0,0 +1,275 @@
+@import './lib';
+
+propertyRowDefined() {
+  .propertyRowDefined {
+    {block}
+  }
+}
+
+.sidebar-header
+  height 16px
+  font-weight 600
+  color white
+
+.componentHeader.title
+  height 40px
+  width 100%
+  display flex
+  align-items center
+  justify-content space-between
+  background-color $bg
+
+  h3
+    margin 0px auto 0px 15px
+    font-size 14px
+    font-family ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  a
+    width 40px
+    height 40px
+    display flex
+    align-items center
+    justify-content center
+    font-size 16px
+    cursor pointer
+
+.components
+  background-color $bg
+  color #A3A3A3
+  overflow auto
+  width 100%
+
+div.vec2,
+div.vec3,
+div.vec4
+  display flex
+  gap 4px
+
+.vec2 input.number,
+.vec3 input.number
+  width 50px
+
+.vec4 input.number
+  width 34px
+
+.collapsible-header
+  align-items center
+  display flex
+  justify-content space-between
+  .entityPrint
+    color #fff
+
+.collapsible-content
+  padding 5px 0
+  display flex
+  flex-direction column
+  gap 8px
+
+.componentTitle span
+  max-width 200px
+  overflow hidden
+  text-overflow ellipsis
+  text-transform uppercase
+  white-space nowrap
+  color #fff
+  font-weight 600
+  vertical-align bottom !important
+  display flex
+
+.collapsible .static
+  background $bglight
+  border-bottom 2px solid $bg
+  box-sizing content-box
+  cursor pointer
+  padding 12px 10px
+  vertical-align bottom
+  font-size 12px
+  &:hover
+    background $bglighter
+/*
+.collapsible
+  &.collapsed
+    background-color $grayalt
+    .static,
+    .componentHeaderActions
+      color #dedede
+    &:hover
+      background-color $grayhover
+*/
+.collapsible .menu
+  text-align right
+
+.collapsible .menuafter
+  color #bbb
+  content '\2807'
+  font-size 12px
+  padding 5px
+  text-align right
+
+.collapsible .static
+  margin 0
+
+.collapsible .static .collapse-button
+  border 6px solid transparent
+  float left
+  height 0
+  margin-right 10px
+  margin-left 2px
+  width 0
+
+.collapsible.collapsed .static .collapse-button
+  border-left-color $white
+  margin-top 4px
+
+.collapsible:not(.collapsed) .static .collapse-button
+  border-top-color $white
+  margin-top 7px
+
+.propertyRow
+  display flex
+  flex-direction column
+  font-size 12px
+  min-height 30px
+  padding 2px 15px
+
+  .text
+    cursor default
+    display inline-block
+    overflow hidden
+    padding-bottom 4px
+    text-overflow ellipsis
+    vertical-align middle
+    width 180px
+    text-transform capitalize
+
+  .map_value
+    margin 0 0 0 5px
+    width 68px
+
+  .Select-control
+    font-size 11px
+    height 24px
+
+  .Select-placeholder,
+  .Select--single > .Select-control .Select-value
+    line-height 19px
+
+  .Select-input
+    height 22px
+
+  input[type=text],
+  input[type=number],
+  input.string,
+  input.number
+    background $bgdark
+    border-radius 8px
+    color white
+    min-height 32px
+    padding-bottom 1px
+    padding-left 8px
+    padding-right 8px
+    padding-top 1px
+    &:last-child
+      padding-right 0
+
+  input.string
+    padding-left 8px
+    box-sizing border-box
+    width 100%
+
+  input[type=text]:focus,
+  input.string:focus
+    box-shadow none
+
+  .color_value
+    margin 0 0 0 5px
+    width 68px
+    letter-spacing 1px
+
+.propertyRowDefined .text
+  color $red
+  font-weight 500
+
+.components *
+  vertical-align middle
+
+span.subcomponent
+  color #999
+  float none !important
+  margin-left 10px
+  vertical-align top !important
+
+a.help-link
+  opacity 0.4
+
+a.help-linkhover
+  opacity 1
+
+#addComponentContainer
+  align-items center
+  display flex
+  flex-direction column
+  justify-content center
+  padding 20px 10px
+  background $bgdark
+
+  #addComponent
+    text-align left
+    width 200px
+    .select__control
+      background #161616
+      height 35px
+      color $primary
+    .option
+      display flex
+      justify-content space-between
+      span
+        color $primary
+
+  #addComponentHeader
+    font-size 15px
+    margin 5px 0 10px 0
+
+  input[type=text]:focus
+    box-shadow none
+
+.Select-menu-outer .is-focused span
+  color #fff
+
+.component-title
+  align-items center
+  display flex
+
+#componentEntityHeader
+  .collapsible-header
+    position relative
+  .collapse-button
+    display none
+  .static
+    height 14px
+    background $bgdark
+  .entityPrint
+    font-size 14px
+    padding-left 5px
+  .entityName
+    max-width 160px
+    top 0
+  .entityIcons
+    color #FAFAFA
+
+#mixinSelect
+  width 100%
+
+.propertyRow .texture
+  display flex
+  gap 4px
+  input
+    margin-left 0
+
+#componentEntityHeader .gltfIcon img
+  top 0
+
+svg
+  color $white
+  &:hover
+    color $primary

package/src/style/entity.styl

@@ -0,0 +1,22 @@
+@import './lib';
+
+.entityPrint
+  font-family $normalfont
+  line-height 1.15em
+
+.entityName
+  display inline-block
+  overflow hidden
+  position relative
+  text-overflow ellipsis
+  top 3px
+  white-space nowrap
+
+[data-entity-name-type="id"]
+  color $red
+
+[data-entity-name-type="class"]
+  color $green
+
+[data-entity-name-type="mixin"]
+  color $orange

package/src/style/help.styl

@@ -0,0 +1,40 @@
+.help-lists
+  display flex
+  justify-content space-around
+
+.help-list
+  list-style none
+  margin 0
+  padding 0 0 10px
+  width 350px
+
+.help-list li
+  margin-right 40px
+
+.help-key-unit
+  line-height 1.8
+  margin-right 2em
+  padding 5px 0
+
+.help-key
+  bottom 2px
+  margin-right 4px
+  min-width 60px
+  position relative
+
+.help-key span
+  background-color #2e2e2e
+  background-repeat repeat-x
+  border 1px solid #666
+  border-radius 3px
+  box-shadow 0 0 5px #000
+  color #999
+  display inline-block
+  font-size 12px
+  padding 0 8px
+  text-align center
+
+.help-key-def
+  color #bbb
+  display inline-block
+  margin-left 1em

package/src/style/index.styl

@@ -0,0 +1,358 @@
+@import './lib';
+
+body.aframe-inspector-opened,
+.toggle-edit
+  font-family BlinkMacSystemFont, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif
+
+.wf-roboto-n4-active body.aframe-inspector-opened,
+.wf-roboto-n4-active .toggle-edit
+  font-family BlinkMacSystemFont, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif
+
+body.aframe-inspector-opened
+  background $bgdark
+  color #fff
+  font-size 12px
+  margin 0
+  overflow hidden
+
+#aframeInspector
+  @import './scenegraph';
+  @import './components';
+  @import './entity';
+  @import './help';
+  @import './select';
+  @import './textureModal';
+  @import './viewport';
+  @import './widgets';
+  @import './primitiveModal';
+
+  .Select,
+  code,
+  pre,
+  input,
+  textarea,
+  select
+    font-family $monospace
+    font-size 14px
+
+  .wf-robotomono-n4-active .Select,
+  .wf-robotomono-n4-active code,
+  .wf-robotomono-n4-active pre,
+  .wf-robotomono-n4-active input,
+  .wf-robotomono-n4-active textarea,
+  .wf-robotomono-n4-active select
+    font-family Roboto Mono, Consolas, Andale Mono, Monaco, Courier New, monospace
+
+  hr
+    border 0
+    border-top 1px solid #ccc
+
+  a
+    cursor pointer
+
+  button
+    position relative
+
+  code
+    font-family Consolas, Andale Mono, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace
+
+  textarea
+    tab-size 4
+    white-space pre
+    word-wrap normal
+
+  textarea.success
+    border-color #8b8 !important
+
+  textarea.fail
+    background-color rgba(255, 0, 0, 0.05)
+    border-color #f00 !important
+
+  textarea,
+  input
+    outline none /* osx */
+
+  .gltfIcon img
+    box-sizing content-box
+    display inline
+    height 20px
+    left 5px
+    padding 0 5px
+    position relative
+    top 4px
+    vertical-align baseline
+    width 20px
+
+  #sidebar,
+  #scenegraph,
+    .panel
+      cursor default
+      user-select none
+
+  #sceneActions
+    display flex
+    flex-direction row
+    position absolute
+    bottom 0
+    z-index 40
+    width calc(20rem - 48px)
+    height 48px
+    background $bg
+    padding-left 48px
+
+  #sceneActions .sceneActionsTitle
+    letter-spacing 0.1em
+    line-height 1rem
+    font-size 0.75rem
+    padding 0.25rem
+    text-align center
+    background #303032
+    color #989899
+    font-weight 500
+
+  #sceneActions .sceneActionsButton
+    display flex
+
+  .toggle-edit
+    background-color $bg
+    box-sizing content-box
+    color white
+    font-size 12px
+    left 0px
+    bottom 0px
+    line-height normal
+    margin 0
+    position absolute
+    text-align center
+    text-decoration none
+    width 48px
+    height 48px
+    display flex
+    align-items center
+    justify-content center
+    z-index 40
+    border-top 1px solid $bgdark
+
+  .toggle-edit:hover
+    background-color #141417
+    color white
+
+    svg
+      color $red
+
+  .toggle-save,
+  .toggle-live
+    background-color $bg
+    color white
+    height 40px
+    display flex
+    align-items center
+    justify-content center
+    border 0
+    font-size 16px
+    font-weight 500
+    cursor pointer
+
+  .toggle-save:hover,
+  .toggle-live:hover
+    background-color $bgdark
+
+  #saveSceneBtn
+    width 10rem
+
+  #liveSceneBtn
+    width 10rem
+
+  input
+    border 1px solid #555
+    color #fff
+
+  input,
+  .texture canvas
+    transition 0.1s background-color ease-in-out, 0.1s border-color ease-in-out, 0.1s color ease-in-out
+
+  input[type=text],
+  input[type=number],
+  input.string,
+  input.number
+    min-height 14px
+    outline none
+
+  input[type="checkbox"]
+    appearance auto
+    cursor pointer
+    margin 0
+    height 18px
+    width 18px
+
+  input[type="checkbox"]:focus
+    box-shadow none
+
+  input.number
+    border 0
+    color white !important
+    cursor col-resize
+    font-size 14px
+    padding 2px
+
+  input.stringfocus,
+  input.numberfocus
+    border 1px solid #00FF99
+    color #fff
+    cursor auto
+
+  input.error
+    border 1px solid #a00
+
+  #sidebar
+    background $bg
+    width 100%
+    flex-grow 1
+    overflow-y auto
+
+  #sidebar *
+    vertical-align middle
+
+  input,
+  textarea,
+  select
+    background $black
+    border 1px solid transparent
+    color #888
+
+  select
+    background $bglighter
+
+  input[type=color]
+    background-color #333
+    border 1px solid #111
+    height 28px
+    cursor pointer
+
+  input[type=color]
+    cursor pointer
+    height 25px
+    padding 0
+    width 50px
+
+  /* Note these vendor-prefixed selectors cannot be grouped! */
+  input[type=color]-webkit-color-swatch
+    border 0  /* To remove the gray border. */
+
+  input[type=color]-webkit-color-swatch-wrapper
+    padding 0  /* To remove the inner padding. */
+
+  input[type=color]-moz-color-swatch
+    border 0
+
+  input[type=color]-moz-focus-inner
+    border 0  /* To remove the inner border (specific to Firefox). */
+    padding 0
+
+  .hidden
+    visibility hidden
+
+  a.button
+    color #A3A3A3
+    font-size 16px
+    margin-left 8px
+    display flex
+    align-items center
+    justify-content center
+    text-decoration none
+
+  a.buttonhover
+    color #00FF99
+
+  @keyframes animateopacity
+    from { opacity: 0 }
+    to { opacity: 1 }
+
+  .hide
+    display none
+
+  .a-canvas.state-dragging
+    cursor grabbing
+
+  #rightPanel
+    top 0
+    width 20rem
+    display flex
+    flex-direction column
+    height calc(100vh - 48px)
+
+  #actionBar
+    width 100vw
+    height 48px
+    background $bg
+    bottom 0
+    position absolute
+
+  #inspectorContainer
+    display flex
+    justify-content space-between
+    left 0
+    height 100%
+    pointer-events none
+    position fixed
+    top 0
+    width 100%
+    z-index 20
+
+  #scenegraph,
+  #viewportBar,
+  #actionBar,
+  #leftPanel,
+  #rightPanel
+    pointer-events all
+
+  .aframe-inspector-opened a-scene .a-canvas
+    background-color #191919
+    z-index 9999
+
+  .toggle-sidebar
+    align-items center
+    display flex
+    height 100%
+    position absolute
+    z-index 40
+
+    a
+      background-color #262626
+      color #A3A3A3
+      padding 5px
+      z-index 40
+
+    a.hover
+      background-color #007370
+      color #fff
+
+  .toggle-sidebar.left
+    top 0
+    left 0
+
+  .toggle-sidebar.right
+    top 0
+    right 0
+
+#rightPanel ::-webkit-scrollbar
+#leftPanel ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+#rightPanel ::-webkit-scrollbar-track
+#leftPanel ::-webkit-scrollbar-track {
+    background: #18181B;
+}
+
+#rightPanel ::-webkit-scrollbar-thumb
+#leftPanel ::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 0;
+}
+
+#rightPanel ::-webkit-scrollbar-thumb:hover
+#leftPanel ::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.75);
+}

package/src/style/lib.styl

@@ -0,0 +1,41 @@
+$primary=#00FF99
+$primaryhover=lighten(#00FF99, 35%)
+
+$bg=#18181B
+$bgdark=#09090B
+$bglight=#18181B
+$bglighter=lighten(#18181B, 10%)
+
+$red=#00FF99
+$green=#22D3EE
+$orange=#d66853
+
+$black=#222
+$gray=#262626
+$grayalt=#323232
+$grayhover=#444
+
+$lightgray=#AAA
+$white=#A3A3A3
+
+$normalfont=system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif
+$monospace=system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif
+
+media--1024() {
+  @media (min-width: 1024px) {
+    {block}
+  }
+}
+
+/* CSS rules from the original FontAwesomeIcon component */
+svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
+  overflow: visible;
+  box-sizing: content-box;
+}
+
+.svg-inline--fa {
+  display: inline-block;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+}