// Main dashboard view styling

.dashboard
  min-width: 700px
  min-height: 350px
  padding-left: 200px // width of sidebar
  overflow-y: hidden

.dashboard-initial
  height: 100vh
  position:relative

  .get-started
    max-width: 300px
    padding: 30px
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%,-50%)
    border: $border-med
    border-radius: 10px
    text-align: center

.dashboard-plugins-container
  height: 100vh
  position: relative
  .expandBtn
    height: 24px   
    width: 30px
    float:right
    text-align:center
    line-height:24px
    border: 1px solid #CCC
    margin-right:5px
    margin-top:3px
    border-radius:3px
    cursor:pointer
    color: #999
    
.dashboard-plugins-overlay
  position: absolute
  left:0
  top: 0
  right: 0
  bottom: 0
  background-color: #DDD
  z-index: 1000
  opacity : 1
  transition: opacity
  transition-duration: 700ms
  transition-delay: 200ms
  transition-timing: ease-out
  .message
    text-align:center
    max-width:80%
    margin : auto
    margin-top: calc(25% - 100px)
    .logo
      max-width: 100%
      max-height: 120px
      margin-bottom: 1em
     
    h1
      font-size: 36px
      color: #6b2d81
    h3
      font-size: 16px
      color: #1d0c3d;
      margin-top : 0.5em
      margin-bottom : 0.5em  
    h4
	  font-size: 16px

.dashboard-plugins-overlay.hidden
  opacity: 0
  pointer-events: none
  .message
    .logo
      transform: scale(1.3)

@keyframes bounce {
    0% {
      transform:translateY(0%);
    }
    80% {
        transform:translateY(-15%);
    }
    90% {
        transform:translateY(0%);
    }
    95% {
        transform:translateY(-4%);
    }
    100% {
        transform:translateY(0);
        opacity: 1;
    }
}

.dashboard-plugins-overlay.bounce
  pointer-events: none
  .message
    .logo
      animation: bounce 1.2s ease infinite

.dashboard-plugins
  height: 100%
  // Panel positions and default sizing
  .panel-top,
  .panel-bottom
    position: relative
    overflow: hidden !important
    height: 400px

  .panel-bottom
    margin-top: 8px // height of hsplitter

  // Tabs
  .tab-bar
    height: 30px
    overflow: auto
    background: $grey-light
    border-bottom: $border-med
    font-weight: $font-weight-bold

  .code-text
    font-family: 'Menlo', 'Consolas', 'Lucida Console', Courier, monospace;
    font-size: 12px;
    line-height: 1.5;
  

  .dashboard-button
    border : none;
    background-color: #DDD;
    border-radius: 3px; 
    color: #444;
    &:hover
      background-color: #BBB;	

  .dashboard-input
    padding: 0 0.3em;
    border: 1px solid #ddd;
    border-radius: 3px;

	&:focus
      outline: none;
      border-color: #00b7c7;

  .tab
    height: 100%
    padding: 4px 10px
    position: relative
    display: block
    float: left

    &:not(.active)
      cursor: pointer
      opacity: .5

      &:hover
        opacity: .9

    &:not(.add)
      background: white
      border-right: $border-med

  // Close button styles, not used right now
  // .panel-top

  //   .tab
  //     padding-right: 25px

  //     .close
  //       position: absolute
  //       right: 8px
  //       top: 8px
  //       font-size: 11px
  //       color: #888
  //       cursor: pointer

  //       &:hover
  //         color: #444

  // Plugin container
  .plugin
    width: 100%
    height: calc(100% - 30px) // minus height of tab bar
    overflow: auto
    display: none
    
  .active
    display: block
    
  x-notify
    z-index: 1001;
    
  x-controlbar > *,
  x-controlbar input
    border-radius: 0.25em

  .no-anim
    -webkit-animation: none
    animation: none

  input[type=text]::-webkit-input-placeholder
    color: #AAA
    font-style: italic
  input[type=text]:-moz-placeholder
    color: #AAA
    font-style: italic
  input[type=text]::-moz-placeholder
    color: #AAA
    font-style: italic
  input[type=text]:-ms-input-placeholder
    color: #AAA
    font-style: italic
  input[type=text]::placeholder
    color: #AAA
    font-style: italic