aframe-inspector/src/style/index.styl

A visual inspector tool for A-Frame.

@import './lib';

body.aframe-inspector-opened,
.toggle-edit,
.sponsor-btn
  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,
.wf-roboto-n4-active .sponsor-btn
  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';

  .Select,
  code,
  pre,
  input,
  textarea,
  select
    font-family $monospace
    font-size 13px

  .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

  #scenegraph,
  #rightPanel
    z-index 9998

  #sidebar,
  #scenegraph,
    .panel
      cursor default
      user-select none

  .toggle-edit
    background-color $red
    box-sizing content-box
    color #FAFAFA
    font-size 13px
    left 3px
    line-height 16px
    margin 0
    padding 6px 10px
    position fixed
    text-align center
    text-decoration none
    top 3px
    width 100px
    z-index 999999999

  .toggle-edit:hover
    background-color rgb(228, 43, 90)

  .try-editor-btn
    background-color $red
    box-sizing content-box
    color #FAFAFA
    font-size 16px
    line-height 24px
    margin 0
    padding 6px 10px
    text-align center
    text-decoration none
    width 200px
    display flex
    gap 5px
    justify-content center

  .try-editor-btn:hover
    background-color rgb(228, 43, 90)
    color #FAFAFA

  .sponsor-btn
    background-color #ffffff
    box-sizing content-box
    color #000000
    font-size 13px
    left 127px
    line-height 16px
    margin 0
    padding 6px 10px
    position fixed
    text-align center
    text-decoration none
    top 3px
    width 80px
    z-index 999999999
    display flex
    gap 5px
    justify-content center

    svg
      fill currentColor
      color rgb(219, 97, 162)

  .sponsor-btn:hover
    background-color rgb(228, 43, 90)
    color #FAFAFA

  input
    background-color transparent
    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
    background-color transparent !important
    border 0
    color #2cb7ff !important
    cursor col-resize
    font-size 13px
    padding 2px

  input.stringfocus,
  input.numberfocus
    border 1px solid #20b1fb
    color #fff
    cursor auto

  input.error
    border 1px solid #a00

  #sidebar
    background $bg
    width 331px

  #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 #bcbcbc
    font-size 16px
    margin-left 10px
    text-decoration none

    &:hover
      color $primary

  @keyframes animateopacity
    from { opacity: 0 }
    to { opacity: 1 }

  .hide
    display none

  .a-canvas.state-dragging
    cursor grabbing

  #rightPanel
    align-items stretch
    display flex
    justify-content flex-end

  #inspectorContainer
    display flex
    justify-content space-between
    left 0
    height 100%
    pointer-events none
    position fixed
    top 0
    width 100%
    z-index 999999

  #scenegraph,
  #viewportBar,
  #rightPanel
    pointer-events all

  .aframe-inspector-opened a-scene .a-canvas
    background-color #191919
    z-index 9998

  .toggle-sidebar
    align-items center
    display flex
    height 100%
    position absolute
    z-index 9998

    a
      background-color #262626
      color #bcbcbc
      padding 5px
      z-index 9998

    a.hover
      background-color #1faaf2
      color #fff

  .toggle-sidebar.left
    top 0
    left 0

  .toggle-sidebar.right
    top 0
    right 0