spicetify-themes/SharkBlue/user.css

/* Round Now Playing Bar */
:root {
  --border-radius-1: 8px;
  /* Play Bar */
  --margin-bottom-now-playing-bar: 0.5rem;
  --now-playing-bar-height: 5.625rem;
  --padding-now-playing-bar: 0.25rem;
  --border-radius-now-playing-bar: 0.5rem;
}
.Root__now-playing-bar,
.Root__now-playing-bar footer {
  border-radius: var(--border-radius-1) !important;
}
#main::after {
  content: ""; /* Empty content */
  position: fixed; /* Fix element to viewport */
  top: 0;
  right: 0;
  z-index: 999; /* Position above all other content */
  -webkit-backdrop-filter: brightness(
    2.12
  ); /* Apply brightness filter to background */
  backdrop-filter: brightness(2.12); /* Cross-browser brightness filter */
  /* Page zoom control */
  /* Adjust width and height based on zoom level */
  width: 135px;
  height: 40px;
}

/* Page titles */
h1 {
  font-weight: 700 !important;
}

/* Song name in player */
.main-nowPlayingWidget-nowPlaying .main-trackInfo-name {
  overflow: unset;
  font-size: 20px !important;
}

/* Artist name in player */
.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists {
  overflow: unset;
  font-size: 15px;
}

.main-type-finale {
  line-height: 17px;
}

/* Icons */
.main-trackList-rowPlayPauseIcon {
  transform: scale(1.3);
}

.x-downloadButton-button svg {
  height: 32px;
  width: 32px;
}

/* Progress and remaining time */
.main-playbackBarRemainingTime-container,
.playback-bar__progress-time-elapsed,
.playback-bar__progress-time {
  font-size: 15px;
  margin-left: 5px;
  margin-right: 5px;
}

/* Player play button */
.main-playPauseButton-button {
  background-color: unset;
  color: var(--spice-subtext);
}

.main-playPauseButton-button svg {
  height: 28px;
  width: 28px;
}

/* Progress bar */
.progress-bar {
  --fg-color: var(--spice-button);
}

.progress-bar__bg,
.progress-bar__fg,
.progress-bar__fg_wrapper {
  height: 5px;
}

.progress-bar-wrapper {
  margin-left: 5px;
  margin-right: 5px;
}

/* Extra controls */
.control-button::before {
  font-size: 20px;
}

.ExtraControls svg {
  height: 20px;
  width: 20px;
}

/* Removing gradients */
.main-entityHeader-backgroundColor,
.main-actionBarBackground-background {
  background-color: unset !important;
  background-image: none;
}

/* Cover shadow */
.main-entityHeader-shadow {
  -webkit-box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
  box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
}

/* Top bar */
.main-topBar-background {
  background-color: #3a3d42 !important;
}

/* Playing icon */
.main-trackList-playingIcon {
  filter: saturate(0%);
}

/* Playlist like button */
.main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 {
  height: unset;
  width: unset;
}

/* Order button */
.x-sortBox-sortDropdown {
  margin-top: 3px;
}

/* Sidebar playlists menu */
.main-rootlist-rootlistDividerGradient {
  background: unset;
}

.main-rootlist-rootlistDivider {
  background-color: var(--spice-button);
}

/* Search box */
.x-searchInput-searchInputInput {
  font-size: 18px;
}

/* Aritsts names */
.main-type-mesto {
  font-size: 16px;
  line-height: 20px;
}

/* Songs names */
.main-type-ballad {
  font-size: 18px;
}

/* Cards descriptions */
.main-cardSubHeader-root {
  overflow: hidden !important;
}

/* Ad title */
.desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header {
  font-weight: 700 !important;
}

/* Friends names */
.main-buddyFeed-username a {
  color: var(--spice-text) !important;
  font-size: 17px;
  font-weight: 500;
}

/* Friends songs and artists */
.main-buddyFeed-artistAndTrackName a,
.main-buddyFeed-playbackContextLink span {
  font-size: 13px;
}

/* Cover height */
.main-coverSlotExpanded-container {
  height: var(--nav-bar-width) + 8px;
}

/* Scrollbars */
.os-scrollbar-handle {
  background: var(--spice-button) !important;
  border-radius: 8px;
}

/* Make Scrollbar look better */

.os-theme-spotify.os-host-transition
  > .os-scrollbar-vertical
  > .os-scrollbar-track
  > .os-scrollbar-handle {
  border-radius: 8px;
  width: 4px;
  background-color: var(--spice-button-disabled);
}
.os-theme-spotify.os-host-transition
  > .os-scrollbar-vertical
  > .os-scrollbar-track {
  width: 4px;
}

/* Making index column wider so that lighter background that 
highlights selected song contains multi-digit song numbers */
/* It looks good up to 4 digits, I figured that no one has playlists with more music than that ;) */
.main-trackList-trackList.main-trackList-indexable
  .main-trackList-trackListRowGrid {
  grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(
      120px,
      1fr
    ) !important;
}

/* Text boxes in settings */
.main-dropDown-dropDown {
  background-color: var(--spice-button-disabled);
}

/* Facebook button */
.x-settings-facebookButton {
  background-color: unset !important;
}

/* Playlist play button color */
.encore-dark-theme .encore-bright-accent-set,
.encore-dark-theme .encore-bright-accent-set:hover {
  --background-base: var(--spice-button-active);
  --background-highlight: var(--spice-play-hover);
  --background-press: var(--spice-play-hover);
}

/* Player bar */

.main-nowPlayingBar-container {
  justify-content: center;
  height: var(--now-playing-bar-height);
  width: 100%;
  border-radius: var(--border-radius-now-playing-bar);
  padding: var(--padding-now-playing-bar);
  bottom: var(--margin-bottom-now-playing-bar);
  border: var(--default-border-thickness) solid var(--shadow-rgb);
  background-color: rgba(var(--spice-rgb-main));
  backdrop-filter: blur(var(--blur-radius)) saturate(0.5) brightness(100%);
}

.main-nowPlayingBar-container .GlueDropTarget,
.main-coverSlotCollapsed-container {
  max-height: 56px;
  max-width: 56px;
}

/**** ROUND IMAGES ****/

/* Expanded Cover Art Image (+ position fix) */
.main-navBar-navBar > :nth-child(3) {
  margin: 0 0 0 1px;
  border-radius: 6px;
}

/* Collapsed Cover Art Image */
.cover-art-image,
.artist-artistOverview-sideBlock
  > div
  > section
  > div:nth-child(3)
  > section:nth-child(2)
  > div
  > img,
.view-homeShortcutsGrid-image {
  border-radius: 4px;
}

/*
	Playlist Header
	Search Category Card Image
	List Cards
	Local Files Card
	Placeholder Profile Card
	Artist Overview Side Block
	*/
.main-entityHeader-shadow,
.x-categoryCard-image,
.x-entityImage-circle,
.main-cardImage-image,
.main-cardImage-imageWrapper,
.main-entityHeader-imagePlaceholder > div,
.artist-artistOverview-sideBlock > div > section {
  border-radius: 6px;
}

/* Circled Artist + Profile Cards (force) */
.main-cardImage-circular,
.main-entityHeader-imagePlaceholder,
.main-entityHeader-circle {
  border-radius: 50% !important;
}

/* Track List Image */
.main-trackList-rowImage {
  border-radius: 3px;
}

/* Home gradient */
.main-home-homeHeader {
  background-color: rgba(var(--spice-rgb-button)) !important;
}

/* Volume bar margins */
.volume-bar .progress-bar {
  margin: 0 0.4rem;
}

.volume-bar .playback-progressbar {
  width: 70%;
}

.volume-bar {
  flex: 0 150px;
}

.ellipsis-one-line.main-type-mesto {
  font-size: 14px;
}

/* Removal of empty space above playlist cover and title on narrow viewports */
.main-entityHeader-container.main-entityHeader-nonWrapped {
  min-height: 325px;
  height: 15vh;
}