youtube miniplayer in playlist sidebar

Makefile

yt-miniplayer-in-playlist-sidebar.user.css: yt-miniplayer-in-playlist-sidebar.user.less
	lessc $< > $@
	sed -i '/^@var/d' $@
	sed -i '/^@preprocessor/d' $@

yt-miniplayer-in-playlist-sidebar.user.css

/* ==UserStyle==
@name           YouTube miniplayer in playlist sidebar
@description    Moves YouTube miniplayer into playlist sidebar when viewing playlist
@namespace      neonfuz.xyz
@version        0.5
@author         neonfuz
@license        MIT
@homepageURL    https://neonfuz.xyz/#youtubeMiniplayerSidebar
@updateURL      https://gist.github.com/neonfuz/6d3790334983b87b638ddecf84d0ab09/raw/yt-miniplayer-in-playlist-sidebar.user.css
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com") {
  ytd-miniplayer.style-scope {
    transition: left 0.13s linear, right 0.13s linear;
    left: calc(100vw - 12px - var(--ytd-miniplayer-width));
  }
}
@-moz-document url-prefix("https://www.youtube.com/playlist?") {
  @media (min-width: 1081px) {
    ytd-miniplayer.style-scope {
      --ytd-miniplayer-width: 360px;
      --ytd-miniplayer-height: calc(360px * 115 / 200);
      --ytd-miniplayer-playlist-height: calc(600px - var(--ytd-miniplayer-height));
      left: 264px;
      right: unset;
      width: 0;
      box-shadow: none;
    }
    ytd-miniplayer .miniplayer video {
      width: 360px !important;
      height: calc(360px * 115 / 200) !important;
    }
    ytd-playlist-sidebar-renderer.style-scope {
      width: 360px;
    }
    ytd-browse[page-subtype="playlist"][has-sidebar_] ytd-two-column-browse-results-renderer.ytd-browse,
    ytd-browse[page-subtype="show"][has-sidebar_] ytd-two-column-browse-results-renderer.ytd-browse {
      padding-left: calc(360px + 28);
    }
  }
  @media (min-width: 1081px) and (max-width: 1312px) {
    ytd-miniplayer.style-scope {
      left: 96px;
    }
  }
}

yt-miniplayer-in-playlist-sidebar.user.less

/* ==UserStyle==
@name           YouTube miniplayer in playlist sidebar
@description    Moves YouTube miniplayer into playlist sidebar when viewing playlist
@namespace      neonfuz.xyz
@version        0.5
@author         neonfuz
@license        MIT
@homepageURL    https://neonfuz.xyz/#youtubeMiniplayerSidebar
@updateURL      https://gist.github.com/neonfuz/6d3790334983b87b638ddecf84d0ab09/raw/yt-miniplayer-in-playlist-sidebar.user.css
@preprocessor   less
@var            number sidebarWidth "Sidebar Width" [400, 200, 800, 50, 'px']
==/UserStyle== */

@sidebarWidth: 360px;

@-moz-document url-prefix("https://www.youtube.com") {
  ytd-miniplayer.style-scope {
    transition: left .13s linear, right .13s linear;
    left: calc(100vw - 12px - var(--ytd-miniplayer-width));
  }
}
@-moz-document url-prefix("https://www.youtube.com/playlist?") {
  @media (min-width: 1081px) {
    ytd-miniplayer.style-scope {
      --ytd-miniplayer-width: @sidebarWidth;
      --ytd-miniplayer-height: calc(@sidebarWidth * 115 / 200);
      --ytd-miniplayer-playlist-height: calc(600px - var(--ytd-miniplayer-height));
      left: 264px;
      right: unset;
      width: 0;
      box-shadow: none;
      @media (max-width: 1312px) {
        left: 96px;
      }
    }
    ytd-miniplayer .miniplayer video {
      width: @sidebarWidth !important;
      height: calc(@sidebarWidth * 115 / 200) !important;
    }
    ytd-playlist-sidebar-renderer.style-scope {
      width: @sidebarWidth;
    }
    ytd-browse[page-subtype="playlist"][has-sidebar_] ytd-two-column-browse-results-renderer.ytd-browse,
    ytd-browse[page-subtype="show"][has-sidebar_] ytd-two-column-browse-results-renderer.ytd-browse {
      padding-left: calc(@sidebarWidth + 28);
    }
  }
}