energylink/public/sass/components/_view_states.scss

@mixin hide-controls() {
  .add-row-panel-hint,
  .dash-row-menu-container {
    display: none;
  }
  .resize-panel-handle,
  .panel-drop-zone {
    visibility: hidden;
  }
}

.playlist-active {
  @include hide-controls();

  .navbar-inner {
    background: transparent;
  }
  .navbar-brand-btn,
  .navbar-page-btn {
    border: none;
    background: transparent;
    .fa, .icon-gf {
      opacity: 0;
    }
  }

  .dashnav-refresh-action,
  .dashnav-zoom-out,
  .dashnav-action-icons,
  .dashnav-move-timeframe  {
    display: none;
  }

  .dash-playlist-actions {
    a {
      color: $text-color-faint !important;
    }
  }
}

.hide-controls {
  @include hide-controls();
}

.page-kiosk-mode {
  @include hide-controls();
  dashnav {
    display: none;
  }
}

.user-activity-low {
  .add-row-panel-hint,
  .dash-row-menu-container,
  .resize-panel-handle,
  .panel-drop-zone
  .dashnav-refresh-action,
  .dashnav-zoom-out,
  .dashnav-action-icons,
  .dashnav-move-timeframe  {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
  }

  // navbar buttons
  .navbar-brand-btn,
  .navbar-inner {
    border: none;
    background: transparent;
    transition: background 1.5s ease-in-out;
    .fa {
      opacity: 0;
      transition: opacity 1.5s ease-in-out;
    }
  }

  .navbar-page-btn {
    border: none;
    transform: translate3d(-50px, 0, 0);
    background: transparent;
    transition: transform 1.5s ease-in-out;
    .icon-gf {
      opacity: 0;
      transition: opacity 1.5s ease-in-out;
    }
  }

  .gf-timepicker-nav-btn {
    transform: translate3d(40px, 0, 0);
    transition: transform 1.5s ease-in-out;
  }
}