Rounded, blurred Heimdall setup with pinned app

Rounded, blurred Heimdall setup with pinned app

Settings -> Advanced -> Custom CSS

.tooltip {background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);}
.item {border-radius: 9999px; backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
.add-item {border-radius: 9999px;}
#add-item {text-decoration: none;}
#config-buttons {opacity:0;}
#config-buttons:hover {opacity:100;}
#config-buttons a {border-radius:50%; margin-right:5px; margin-bottom:5px;}

Settings -> Advanced -> Custom JavaScript

const main = document.getElementById('main');
const sortable = document.getElementById('sortable');
const configBtn = document.querySelector('#config-buttons > *');
let pinned, pinnedItem, originalStyles = {};

function toggleLayout() {
  if (!sortable) {
    return;
  }

  if (!pinned) {
    pinned = document.createElement('div');
    pinned.id = 'pinned';
    pinned.style.cssText = 'display:flex;justify-content:center;width:100%;height:fit-content';
    pinnedItem = sortable.children[sortable.children.length - 2];  // Second-to-last item
    sortable.after(pinned);
    pinned.appendChild(pinnedItem);
    
    let itemDiv = pinnedItem.querySelector('.item');

    // Save original styles for itemDiv
    originalStyles.itemDivStyle = itemDiv.style.cssText;

    // Modify styles for itemDiv
    itemDiv.style.width = '140px';
    itemDiv.style.height = '50px';
    itemDiv.style.padding = 'unset';
    // Set background color with 0.4 opacity for pinnedItem
    itemDiv.style.backgroundColor = modifyBackgroundColor(window.getComputedStyle(itemDiv).backgroundColor, 0.4);

    // Save original styles for iconContainer and modify styles
    let iconContainer = itemDiv.querySelector('.app-icon-container');
    originalStyles.iconContainerMarginRight = iconContainer.style.marginRight;
    iconContainer.style.marginRight = 'unset';

    // Save original styles for iconImg and modify styles
    let iconImg = iconContainer.querySelector('img');
    originalStyles.iconImgWidth = iconImg.style.width;
    originalStyles.iconImgHeight = iconImg.style.height;
    iconImg.style.width = '25px';
    iconImg.style.height = '25px';

    // Save original styles for svgLink if it exists and modify styles
    let svgLink = null;
    let isSvgLinkPatched = false;
    do {
      svgLink = itemDiv.querySelector('a > svg');
      if (svgLink) {
        originalStyles.svgLinkDisplay = svgLink.style.display;
        svgLink.style.display = 'none';
        isSvgLinkPatched = true;
      }
    } while (isSvgLinkPatched === false);

    // Save original styles for liveStatsContainer if it exists and modify styles
    let liveStatsContainer = itemDiv.querySelector('.details .livestats-container');
    if (liveStatsContainer) {
      originalStyles.liveStatsContainerDisplay = liveStatsContainer.style.display;
      liveStatsContainer.style.display = 'none';
    }

    // Hide the ::after pseudo-element
    let style = document.createElement('style');
    style.id = 'pinned-after-style';
    style.textContent = '#pinned .item::after { display: none !important; }';
    document.head.appendChild(style);
  } else {
    let itemDiv = pinnedItem.querySelector('.item');

    // Restore original styles for itemDiv
    itemDiv.style.cssText = originalStyles.itemDivStyle;

    // Restore original styles for iconContainer
    let iconContainer = itemDiv.querySelector('.app-icon-container');
    iconContainer.style.marginRight = originalStyles.iconContainerMarginRight;

    // Restore original styles for iconImg
    let iconImg = iconContainer.querySelector('img');
    iconImg.style.width = originalStyles.iconImgWidth;
    iconImg.style.height = originalStyles.iconImgHeight;

    // Restore original styles for svgLink if it exists
    let svgLink = itemDiv.querySelector('a > svg');
    if (svgLink) {
      svgLink.style.display = originalStyles.svgLinkDisplay;
    }

    // Restore original styles for liveStatsContainer if it exists
    let liveStatsContainer = itemDiv.querySelector('.details .livestats-container');
    if (liveStatsContainer) {
      liveStatsContainer.style.display = originalStyles.liveStatsContainerDisplay;
    }

    sortable.insertBefore(pinnedItem, sortable.lastElementChild);  // Insert before the last item
    pinned.remove();
    pinned = null;

    // Remove the style for ::after pseudo-element
    document.getElementById('pinned-after-style').remove();
  }

  setTimeout(function() {
    const itemsToModify = Array.from(sortable.querySelectorAll('.item')); // All items except the last one
    itemsToModify.forEach(function(item) {
      const currentColor = window.getComputedStyle(item).backgroundColor;
      item.style.backgroundColor = modifyBackgroundColor(currentColor, 0.7);
    });
  }, 300);
}

// Function to modify background color
function modifyBackgroundColor(currentColor, opacity) {
  return currentColor.replace(/rgba?\((.+?)\)/, (_, p1) => {
    const [r, g, b] = p1.split(',').map(n => n.trim());
    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
  });
}

configBtn.addEventListener('click', toggleLayout);

// Execute toggleLayout automatically on load
setTimeout(toggleLayout, 10);