panel.less

@import './colors.less';

@title-bar-height: calc(0.65 * var(--su));

.panel {
  .rounded();
  position: fixed;
  top: var(--panel-top);
  left: var(--panel-left);
  right: var(--panel-right);
  bottom: var(--panel-bottom);

  background: fadeout(darken(@blue, 80%), 10%);
  border: 1px solid @blue;
  padding: 0;
  overflow: hidden;
  box-shadow: 5px 5px 10px fadeout(@blue, 80%);

  transition: width 300ms, height 300ms, top 300ms, bottom 300ms, left 300ms, right 300ms;

  > .content {
    position: absolute;
    top: @title-bar-height;
    left: 0; bottom: 0; right: 0;
    overflow: auto;
  }

  h1 {
    color: black;
    margin: 0;
    padding-left: calc(0.26 * var(--su));
    height: @title-bar-height;
    line-height: @title-bar-height;    
    font-size: calc(0.26 * var(--su));
    font-family: 'Menlo', 'Source Code Pro';

    background: fadeout(@blue, 50%);
    color: white;
  }

  code {
    margin: 6px;
    display: block;
    white-space: pre-wrap;
  }

  &.beat-enter {
    animation: slide-in 600ms forwards;
    h1 {
      animation: glow 1000ms forwards;
    }
  }

  &.beat-leave {
    animation: slide-in 600ms reverse forwards;
    h1 {
      animation: glow 1000ms forwards;
    }
  }
}

@keyframes glow {
  0% {
    background: @blue;
    color: black;
  }

  100% {
    background: fadeout(@blue, 50%);
    color: white;
  }
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
    height: @title-bar-height;    
  }

  50% {
    transform: translateX(0%); 
    height: @title-bar-height;   
  }

  100% {
    transform: translateX(0%);
    height: var(--panel-height);
  }
}

.token-line {
  min-height: 1em;

  &[data-highlight=true] {
    background: rgba(255, 0, 255, 0.5);
  }
}