Function SettingsContent

theme.js:6776–7865

(props)

   triangle fades in, the leading one runs out of the viewBox. End state equals
   start state, which is why dropping the class again is invisible. */
.${SKIPPING} .${ICON}__row { animation: glowifySkipFlow 0.52s cubic-bezier(0.3, 1.75, 0.44, 1) both; }
.${SKIPPING} .${ICON}__in { animation: glowifySkipIn 0.52s cubic-bezier(0.32, 0.72, 0.22, 1) both; }
.${SKIPPING} .${ICON}__out { animation: glowifySkipOut 0.52s cubic-bezier(0.32, 0.72, 0.22, 1) both; }

@keyframes glowifySkipFlow { from { transform: translateX(0); } to { transform: translateX(9.6px); } }
@keyframes glowifySkipIn { 0% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes glowifySkipOut { 0% { opacity: 1; } 55%, 100% { opacity: 0; } }

${tintedControls("#fff")}

/* Both are role=switch, so aria-checked carries the engaged state \u2014 repeat
   reports "mixed" for repeat-one, hence the negated match rather than ="true".
   The descendants come along for the same reason as above. */
${SHUFFLE}[aria-checked]:not([aria-checked="false"]),
${SHUFFLE}[aria-checked]:not([aria-checked="false"]) *,
${REPEAT}[aria-checked]:not([aria-checked="false"]),
${REPEAT}[aria-checked]:not([aria-checked="false"]) * {
  color: ${ACCENT_COLOR} !important;
}

${SCALE_PLAY_BUTTON}

@media (prefers-reduced-motion: reduce) {
  ${TRANSPORT}, .${ICON}__a, .${ICON}__b { transition: none !important; }
  .${SKIPPING} .${ICON}__row,
  .${SKIPPING} .${ICON}__in,
  .${SKIPPING} .${ICON}__out { animation: none !important; }
}
`;
  }
  function getPlayerControlIconsDisabledCss() {
    return `
${SCALE_PLAY_BUTTON}

${BARE_PLAY_BUTTON}

${eachTransport("")},
${eachTransport(" *")} {
  color: #fff !important;
}
${eachTransport(" svg")}, ${eachTransport(" path")} { fill: currentColor !important; }

[class*="-legacy-button"]:hover { color: #fff !important; }
`;
  }
  function isPlayerControlIconsEnabled() {
    return (localStorage.getItem(PLAYER_ICONS_KEY) || "on") === "on";
  }
  function removeIcons() {
    document.querySelectorAll(`.${ICON}`).forEach((icon) => icon.remove());
  }
  function ensureIcon(button, markup) {
    let icon = button.querySelector(`.${ICON}`);
    if (!icon) {
      const holder = document.createElement("div");
      holder.innerHTML = markup;
      icon = holder.firstElementChild;
      button.appendChild(icon);