Google Play Music Theme

gpmdp.css

/* This is a hacky stylesheet for making GPM not so ugly. */

/* Fix GPMDB's playlist nav on dark themes */
#playlist-drawer paper-header-panel[at-top] paper-toolbar:not([style-scope]):not(.style-scope),
#playlist-drawer .autoplaylist-section,
#playlist-drawer #recent-playlists-container {
  border-bottom-color: <<BACK_SECONDARY>>;
}

/* Remove Hero image */
#material-hero-image {
  display: none;
}
.material-detail-view .has-hero-image {
  margin-top: 35px;
}

/* Constrained table widths */
paper-header-panel #music-content .g-content {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Minimal playlist header */
.material-detail-view .material-container-details .cover .cover-card {
  display: none;
}
.material-container-details,
.material-detail-view .material-container-details .info,
.material .song-table {
  margin: 0;
  height: auto;
}

/* --- Compact listing layouts --- */
/*
This is commented out by default because it breaks listings if not injected
early enough in the render. It has to be included before the scrolling hijack is
initialized, since it apparently only determines the number of items to show
when first initialized, likely based on resolution rather than window size to
prevent having to recalculate any time the window or a containing element is
resized. Basically it's just a pain.
*/

/** Set line height to 32px */
/*.song-row .column-content,
.material .song-row td,
.material .upload-progress-row td {
  height: 32px;
  line-height: 32px;
  max-height: 32px;
  min-height: 32px;
}*/

/** Hide album art and play icons */
/*.material .song-table [data-col="title"] img,
.material .song-table.mini [data-col="song-details"] img {
  display: none;
}
.material .song-row [data-col="index"] .hover-button[data-id="play"],
.material .song-row [data-col="track"] .hover-button[data-id="play"],
.material .song-row .hover-button[data-id="play"] {
  display: none;
}*/

/** Resize row icons */
/*.material .song-row paper-icon-button[data-id="menu"] {
  margin: 0;
  padding: 4px 8px;
  width: 32px !important;
  height: 32px;
}
.song-row .aria-play-button {
  width: 20px;
  height: 20px;
}
.material .song-row .song-indicator {
  margin: 5px 10px 5px -8px;
  width: 20px !important;
  height: 20px !important;
}*/

/** Tweak rating icons for new row height */
/*.material .song-row .rating-container.thumbs [data-rating] {
  margin-top: 4px;
}
.material .song-row [data-col="rating"][data-rating="4"],
.material .song-row [data-col="rating"][data-rating="5"] {
  background-position: -510px -272px;
}
.material .song-row [data-col="rating"][data-rating="1"],
.material .song-row [data-col="rating"][data-rating="2"] {
  background-position: -396px -14px;
}*/

/** Resize things differently for auto-playlists */
/*** This is necessary because APs don't have item IDs */
/*.material-playlist-container > [data-type="ap"] .song-row td:first-child {
  padding-left: 0;
}
.material-playlist-container > [data-type="ap"] .header-row th:first-child,
.material-playlist-container > [data-type="ap"] .song-row td:first-child .column-content {
  padding-left: 32px;
}
.material-playlist-container > [data-type="ap"] .song-row td:first-child .song-indicator {
  margin: 5px 10px;
}*/
/* --- END Compact listing layouts --- */

/* Always-visible playback controls */
#material-volume-low,
#material-vslider {
  opacity: 1 !important;
}
#material-player-right-wrapper .player-top-right-items .time-label {
  opacity: 0.5;
}
#time_container_current,
#time_container_duration {
  opacity: 1;
}
@media (max-width: 1400px) {
  #playerSongInfo .image-wrapper {
    display: none;
  }
  #playerSongInfo .now-playing-info-wrapper {
    padding-left: 15px;
  }
}
@media (min-width: 1200px) {
  #player.material #playerSongInfo .now-playing-info-wrapper .now-playing-actions {
    opacity: 1!important;
    width: auto!important;
    margin-left: 16px;
  }
}

/* Compact drawers */
#drawer {
  max-width: 240px;
}
.new-playlist-drawer .nav-item-container,
#playlist-drawer .playlist-drawer-item {
  height: 30px;
}
.nav-section [data-type="sub"] {
  display: none;
}
#playlist-drawer #mainPanel iron-icon,
#playlist-drawer #mainPanel sj-play-button {
  top: 4px;
}

/* Compact context menus */
.material .goog-menu {
  padding: 8px 0 !important;
}
.material .goog-menu .goog-menuitem .goog-menuitem-content {
  height: 24px;
  line-height: 24px;
}
.material .goog-menu .goog-submenu iron-icon {
  top: 6px;
}

/* Always show drawers on large displays */
@media (min-width: 1640px) {
  #drawer {
    visibility: visible !important;
    transform: none !important;
    width: 240px !important;
    height: calc(100vh - 90px) !important;
  }
  .paper-drawer-panel-0 .narrow-layout.paper-drawer-panel > #drawer.paper-drawer-panel {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  }
  #material-app-bar {
    margin: 0 240px;
  }
  #playlist-drawer-button,
  #left-nav-open-button {
    visibility: hidden !important;
  }
  #left-nav-close-button {
    display: none;
  }
  .new-playlist-drawer #nav-container .nav-toolbar .menu-logo {
    margin: 0 auto;
  }
  #scrim {
    display: none;
  }
  #player {
    z-index: 5;
  }
  #queue-overlay {
    right: 260px;
  }
}