static/css/audio-player.css

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");

@font-face {
  font-family: "Qartella";
  src: url("../webfonts/Qartella-Light.woff2") format("woff2"), url("../webfonts/Qartella-Light.woff") format("woff");
  font-weight: normal;
  font-style: light;
}

@font-face {
  font-family: "Qartella";
  src: url("../webfonts/Qartella-Bold.woff2") format("woff2"), url("../webfonts/Qartella-Bold.woff") format("woff");
  font-weight: normal;
  font-style: bold;
}

body {
  color: var(--bulma-body-color);
  font-size: var(--bulma-body-font-size);
  font-weight: var(--bulma-body-weight);
  line-height: var(--bulma-body-line-height);
  background-color: transparent;
}

div#particles-js {
  position: fixed;
  inset: 0;
  opacity: 0.4;
}
div#particles-js::before {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 1) -86%, rgba(0, 0, 0, 0) 100%);
  /* backdrop-filter: blur(1rem); */
  content: "";
  z-index: -20;
}

/* Optimized CSS */
#audio_player_wrapper {
  position: fixed;
  top: -100%;
  left: 0;
  right: 0;
  /* background-color: var(--bulma-body-background-color); */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 1) 100px, rgba(0, 0, 0, 1) 100%);
  padding: 1rem;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  transition: top 0.3s ease-in-out 4s;
  height: min(680px, 50vh);
  z-index: 1000;
  overflow: hidden;
  box-shadow: -1px 9px 73px 20px rgb(20 20 24 / 73%);
}

#audio_player_wrapper::after {
  content: "";
  position: absolute;
  top: -100px !important;
  left: 0;
  right: 0;
  height: 100%;
  background-image: var(--audio-player-background-cover);
  z-index: -1;
  filter: saturate(0.6) blur(2rem);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Style for blurring the player info section */
#player-info-container {
  transition: filter 0.5s ease-in-out; /* Smooth transition for blur */
}
#player-info-container.is-blurring {
  filter: blur(20px);
}

.player-cover-wrapper {
  max-width: 200px;
  min-width: 140px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin: 10px;
}

#audio_player_wrapper.active,
#audio_player_wrapper.active::after {
  top: 0px;
  transition: top 0.3s ease-in-out 0s;
}

#player-title {
  --title-gradient-deg: 40deg;
  color: #131418;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75);
  transition: background 0.3s linear;
  font-size: clamp(0.1rem, -0.7rem + 9vw, 3rem);
  background: linear-gradient(var(--title-gradient-deg), #eeaa52, #e73c6f, #727fa6, #2af3b7);
  background: rgba(var(--color-accent), 1);
  background-size: 200% 200%;
  /* -webkit-text-fill-color: var(--bulma-body-background-color); */
  -webkit-text-stroke: 8px #c8a6a600;
  background-clip: text;
  /* filter: hue-rotate(180deg); */
  font-family: "Qartella";
  padding: 2px;
  line-height: 1.5;
}

.columns.player-active {
  margin-top: 120px;
  transition: margin-top 0.3s ease-in-out;
}

#audio_player_wrapper .player-loading {
  pointer-events: none;
}

#player-genres .button.is-small {
  --bulma-button-padding-vertical: 0.25em;
  --bulma-button-padding-horizontal: 0.5em;
}

#waveform {
  margin: 0 1rem -30px;

  span {
    z-index: 100;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    --bulma-button-padding-vertical: 0.25em;
    --bulma-button-padding-horizontal: 0.5em;
  }

  span#timePlayed {
    left: 20px;
  }
  span#timeComplete {
    right: 20px;
  }
  div {
    width: 100%;
  }
}

#audio-control-bar {
  position: relative;
  border-top: 0px solid;
  gap: 0.4rem;
  width: calc(100% + 32px);
  background: rgb(0 0 0 / 40%);
  margin: 0 -56px -16px -16px;
  backdrop-filter: brightness(1) opacity(1) blur(20px) saturate(3);

  > div {
    max-height: 72px;
    margin-top: 28px;
  }
  .button {
    height: 48px;
    i {
      font-size: 3em;
    }
  }

  .button,
  #volume-slider {
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
  }

  #play-pause-button[data-state="playing"] {
    --control-button-color: rgba(var(--color-accent), 0.6) !important;
    color: var(--control-button-color);
  }

  #play-pause-button[data-state="pause"] {
    --control-button-color: rgba(var(--color-accent), 0.6) !important;
    color: var(--control-button-color);
  }

  #volume-slider-srapper {
    width: 260px;
    gap: 0.4rem; /* Adjust gap if needed */
    i {
      --control-button-color: rgba(var(--color-accent), 0.6) !important;
      color: var(--control-button-color);
      width: 1.5em; /* Optional: Give icon a fixed width for alignment */
      text-align: center; /* Optional: Center icon within its space */
    }
    #volume-slider {
      --range-progress: rgba(var(--color-accent), 0.6) !important;
    }
  }

  .button.is-control {
    --is-control-opacity: 0.8;
    background: var(--bulma-button-ghost-background);
    border-color: var(--bulma-button-ghost-border-color);
    box-shadow: none;
    color: rgba(255, 255, 255, var(--is-control-opacity));
    text-decoration: var(--bulma-button-ghost-decoration);
  }

  #play-pause-button[data-state="playing"] {
    i.fa-circle-play {
      display: none;
    }
    i.fa-circle-pause {
      display: block;
    }
  }

  #play-pause-button[data-state="pause"] {
    i.fa--circle-play {
      display: block;
    }
    i.fa-circle-pause {
      display: none;
    }
  }
}
#audio-control-bar::before {
  position: absolute;
  content: "";
  inset: 0;
  width: var(--progress);
  height: 3px;
  background-color: rgba(var(--color-accent), 1);
  pointer-events: none;
  top: -4px;
}

#audio-control-bar::after {
  position: absolute;
  content: "";
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 0%);
  pointer-events: none;
  backdrop-filter: blur(1rem);
  opacity: 1;
  z-index: -1;
}

.card {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0);
  transition: transform 0.3s, border-color 0.8s;
}

.card:hover {
  transform: translateY(-5px);
}

.volume-slider {
  width: 100px;
}

.card {
  position: relative;
  z-index: 10;
  .is-primary {
    background-color: var(--color-accent) !important;
  }
}

.card:has(.card-image.loading),
.card:has(.card-image.pause),
.card:has(.card-image.playing),
.card:hover {
  border-color: var(--color-accent);
  border-width: 1px;
  border-style: solid;
}

.card .card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-size: 100%;
  border-top-left-radius: var(--bulma-card-radius);
  border-top-right-radius: var(--bulma-card-radius);
  opacity: 1;
  transition: background 0.4s ease-in-out, opacity 0.6s ease-in-out;
  overflow: hidden;
  pointer-events: none;
  /* pointer-events: initial; */ /* Allow clicks on the trigger */
  z-index: 50;
}

.card .card-image::after {
  pointer-events: initial;
  /* pointer-events: none; */ /* Prevent clicks on the overlay itself */
  position: absolute;
  content: "";
  inset: 0;
  background-color: rgba(255, 255, 255, 0);
  overflow: hidden;
  backdrop-filter: saturate(1) contrast(1) blur(0);
  backdrop-filter: saturate(0.8) contrast(1.4) blur(0.5rem);
  opacity: 0;

  transition: opacity 0.4s ease-in-out;
}

/* Default state (no hover, not in view, not active) */
/* .card .card-image::after { opacity: 0; } */

/* Active states take precedence */
.card .card-image.playing::after,
.card .card-image.pause::after {
  backdrop-filter: saturate(0.8) contrast(1.4) blur(0.5rem);
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.4s ease-in-out;
}

/* Hover and In-View states */
.card .card-image:hover,
.card .card-image:hover:after,
.card .card-image.is-in-view:not(.playing):not(.pause):not(.loading)::after /* Apply only if not active */ {
  opacity: 1;
  backdrop-filter: saturate(0.8) contrast(1.4) blur(0.5rem);
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.card .card-image.loading::after {
  position: absolute;
  content: "";
  inset: 0;
  background-color: #ff00ff1f;
  overflow: hidden;
  backdrop-filter: saturate(0.8) contrast(1.4) blur(0.5rem);
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.4s ease-in-out;
  opacity: 1;
}

.card .card-image:hover::after,
.card .card-image.pause::after {
  /* Play icon for pause state */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgba(255, 255, 255, 0.35)' d='M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z'/%3E%3C/svg%3E");
}

.card .card-image.playing::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgba(255, 255, 255, 0.35)' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM224 192l0 128c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32s32 14.3 32 32zm128 0l0 128c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32s32 14.3 32 32z'/%3E%3C/svg%3E");
}

/* Play icon for is-in-view state (when not active) */
.card .card-image.is-in-view:not(.playing):not(.pause):not(.loading)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgba(255, 255, 255, 0.35)' d='M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z'/%3E%3C/svg%3E");
}

.card .card-image.loading::before {
  content: "";
  z-index: 2000;
  position: absolute;
  inset: 0;
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgba(255, 255, 255, 0.35)' d='M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z'/%3E%3C/svg%3E");
  animation: spin 2s linear infinite;
}

.card .track-duration {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 200;
  /* filter: invert(1); */
  /* opacity: 0.5; */
  background-color: rgba(0, 0, 0, 0.6);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.card .card-image-2 {
  top: 0;
  /* left: -40px; */
  opacity: 0;
  filter: blur(80px);
  position: absolute;
  width: 100%;
  aspect-ratio: 2/3;
  z-index: -1000;
  transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Zoom effect for active states, hover, and in-view */
.card .card-image.loading,
.card .card-image.playing,
.card .card-image.pause,
.card:hover .card-image,
.card-image:hover,
.card-image:has(.loading),
.card .card-image.is-in-view:not(.playing):not(.pause):not(.loading) /* Apply only if not active */ {
  background-size: 110%;
}
/* Glow effect for active states, hover, and in-view */
.card:has(.card-image.loading) .card-image-2,
.card:has(.card-image.pause) .card-image-2, /* Keep glow on pause */
.card:has(.card-image.playing) .card-image-2,
.card:hover .card-image-2 {
  background-size: 110%;
  opacity: 0.2;
}
.card:hover .card-image-2,
.card-image-2:hover {
  background-size: 110%;
  opacity: 0.2;
}
/* Apply glow effect when in view but not active */
.card:has(.card-image.is-in-view:not(.playing):not(.pause):not(.loading)) .card-image-2 {
  background-size: 110%;
  opacity: 0.2;
}

/*.card:hover .card-image-2,
    .card .card-image:hover .card-image-2 {
      background-size: 110%;
      opacity: 0.2;
    }*/

section#track-list {
  margin-top: 0;
  transition: margin 0.4s ease-in 2s;

  .container > .title {
    --title-gradient-deg: 3deg;
    transition: background 0.3s linear, top 0.3s ease-in-out;
    font-size: clamp(1rem, -0.5rem + 17vw, 5rem);
    background: linear-gradient(var(--title-gradient-deg), #eeaa52, #e73c6f, #2394d5, #2af3b7);
    background-size: 200% 200%;
    -webkit-text-fill-color: var(--bulma-body-background-color);
    -webkit-text-stroke: 6px transparent;
    background-clip: text;
    -webkit-background-clip: text;
    padding-bottom: 10px;
  }
  .subtitle {
  }
}

section#track-list .player-loading {
  pointer-events: none !important;
  cursor: not-allowed;
}

#audio_player_wrapper.active + section#track-list {
  transition: top 0.3s ease-in-out 0s;
  margin-top: min(680px, 50vh);
}

.card:has(.card-image.playing),
.card:has(.card-image.loading),
.card:has(.card-image.pause) {
  border-color: var(--color-accent);
}

/* Animation für überlaufende Track-Titel */
.card-content .media-content {
  overflow: hidden;
}

.card-content .content {
  min-height: 108px;
}

/* Animation für überlaufende Track-Titel */
.card-content .media-content .title.track-title {
  position: relative; /* Nötig für transform */
  display: block; /* Sicherstellen, dass es die volle Breite nimmt */
  white-space: nowrap;
  text-overflow: ellipsis; /* Standardmäßig ... anzeigen */
  /* Kein transform hier im Ruhezustand */
}

/* Die Animation wird nur angewendet, wenn die Klasse .is-overflowing vorhanden ist */
.card-content .media-content .title.track-title.is-overflowing {
  text-overflow: clip; /* Ellipsis entfernen, wenn animiert wird */
  animation: slide-left-right 10s linear infinite alternate; /* Dauer angepasst, infinite alternate */
}

/* Die Keyframes bleiben ähnlich, können aber vereinfacht werden */
@keyframes slide-left-right {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Nur soweit verschieben, wie nötig, um das Ende sichtbar zu machen */
    /* Dies ist schwer dynamisch in CSS, daher verschieben wir um einen festen Wert */
    /* oder lassen es komplett durchlaufen. Ein fester Wert ist oft nicht ideal. */
    /* Komplette Verschiebung, damit der Anfang wieder sichtbar wird: */
    transform: translateX(calc(-100% + 80px)); /* Beispiel: 80px weniger als volle Breite */
    /* Alternativ: Voll durchlaufen lassen und `alternate` nutzen */
    /* transform: translateX(-100%); */ /* Würde mit alternate gut funktionieren */
  }
}

#track-list.section.player-loading .card {
  pointer-events: none;
  cursor: not-allowed;
}