energylink/public/sass/components/_view_states.scss

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

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

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

.playlist-active,
.user-activity-low {
  .add-row-panel-hint,
  .dash-row-menu-container,
  .panel-drop-zone
  .dashnav-refresh-action,
  .dashnav-zoom-out,
  .panel-menu-container,
  .dashnav-action-icons,
  .panel-info-corner--info,
  .panel-info-corner--links,
  .dashnav-move-timeframe  {
    opacity: 0;
    transition: all 1.5s ease-in-out 1s;
  }

  // navbar buttons
  .navbar {
    border-color: transparent;
    background: transparent;
    transition: all 1.5s ease-in-out 1s;
    .fa {
      opacity: 0;
      transition: all 1.5s ease-in-out 1s;
    }
  }

  .navbar {
    box-shadow: none;
  }

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

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

.playlist-active {
  .dash-playlist-actions  {
    .fa {
      opacity: 1;
      color: $text-color-faint !important;
    }
  }
}