wplit

%root% .splide__track {

  --x-slider-mask-edge: 20%;
  --x-slider-mask-edge-slope: 2;

  mask-image: linear-gradient(to right, black 0%, black 100%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 100%);
}

wplit

<script>
  
document.addEventListener("DOMContentLoaded", () => {

  const headerSearch = document.querySelector('.brxe-xheadersearch')

  if (!headerSearch) return;
  
  headerSearch.addEventListener('x_header_search:open', () => {
    headerSearch.querySelector('input[type=search]').setAttribute('value','')

wplit

%root% .x-tabs_content:not(.x-tabs_content-accordion) {
    flex-direction: row;
}

%root% .x-tabs_content:not(.x-tabs_content-accordion) .x-tabs_panel {
    display: flex!important; /* undo "display: none;" */
    opacity: 0;
    visibility: hidden;
    width: 100%;
}

wplit

<script>

document.addEventListener("DOMContentLoaded", () => {

    const players = document.querySelectorAll('.my-player') /* change my-player with the class of your media player elements that need this feature */

    
    players.forEach(player => {

        player.addEventListener('mouseover', () => {

wplit

<script>
document.addEventListener('DOMContentLoaded', () => {
  
  setTimeout(() => {
    
    const myChart = xChart.Instances.kruygi; /* change kruygi for element identifier */

    /* Update datalabels formatter */ 
    Object.assign(myChart.options.plugins.datalabels, {
      formatter: function(value, context) {

wplit

/* hide layout while waiting for new media to load */

media-player media-layout {
    transition: opacity 0.1s ease, visibility 0.1s ease;
}

media-player[data-x-wait] media-layout {
    opacity: 0!important;
    visibility: hidden;
}

wplit

<script>
  
document.addEventListener('DOMContentLoaded', () => {
  
  const playlistItems = document.querySelectorAll('.brxe-xmediaplaylist');  /* replace with class of playlist elements */
  const player = document.querySelector('.brxe-xmediaplayer');              /* replace with class of media player */

  if (!player) return;

  playlistItems.forEach(button => {

wplit

<script>

document.addEventListener('DOMContentLoaded', () => {

  const localKey = 'toggle';    /* the local storage key */
  const button = '.my-button';  /* the button selector to click */

  if (!document.querySelector(button)) { return; }

  document.querySelector(button).onclick = () => {

wplit

<script>
  
document.addEventListener('DOMContentLoaded', () => {

    const mediaPlayer = '.my-media-player-element'; /* media player class */
    const mediaPlayList = '.my-playlist-element'; /* media playlist class */

    if (!mediaPlayer || !mediaPlayList) return;

    const player = document.querySelector(mediaPlayer);

wplit

<script>
  
document.addEventListener('DOMContentLoaded', () => {
  
  const accordion = document.querySelector('.my-accordion'); /* change .my-accordion to the class of the accordion element */
  if (!accordion) return;

  const updateAccordion = el =>
    el.querySelectorAll('.x-accordion_item').forEach(item => {
      const btn = item.querySelector('.x-accordion_header');