Light the Stream

add to advanced preferences before </head>

 

<!-- add color line to wave  -->
 

<script>
(function () {
  function styleTopWave() {
    var svg = document.querySelector('.amplify-media-banner-container .wave-svg.wave-top');
    if (!svg) return false;

    var base = svg.querySelector('path');
    if (!base) return false;

    // Base wave: fill only
    base.setAttribute('fill', '#FFFFFF');
    base.setAttribute('stroke', 'none');

    // Remove previous injected stroke/mask (safe rerun)
    var oldStroke = svg.querySelector('path[data-wave-stroke="1"]');
    if (oldStroke) oldStroke.remove();

    var oldMask = svg.querySelector('#waveStrokeMaskTop');
    if (oldMask) oldMask.remove();

    // Ensure defs exists
    var defs = svg.querySelector('defs');
    if (!defs) {
      defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
      svg.insertBefore(defs, svg.firstChild);
    }

    // Stroke clone (orange ribbon)
    var strokePath = base.cloneNode(true);
    strokePath.setAttribute('fill', 'none');
    strokePath.setAttribute('stroke', '#DE5F29');
    strokePath.setAttribute('stroke-width', '18');
    strokePath.setAttribute('stroke-linecap', 'round');
    strokePath.setAttribute('stroke-linejoin', 'round');
    strokePath.setAttribute('vector-effect', 'non-scaling-stroke');
    strokePath.style.paintOrder = 'stroke fill';
    strokePath.setAttribute('data-wave-stroke', '1');

    // Mask out ONLY the TOP 1px of the stroke (kills the hairline above the wave)
    // If the seam is below instead, swap to bottom-cut (I included that option below).
    var bb = base.getBBox();
    var CUT_PX = 1;

    var mask = document.createElementNS('http://www.w3.org/2000/svg', 'mask');
    mask.setAttribute('id', 'waveStrokeMaskTop');
    mask.setAttribute('maskUnits', 'userSpaceOnUse');

    // Keep everything EXCEPT the top strip
    var keepRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    keepRect.setAttribute('x', bb.x);
    keepRect.setAttribute('y', bb.y + CUT_PX);
    keepRect.setAttribute('width', bb.width);
    keepRect.setAttribute('height', Math.max(0, bb.height - CUT_PX));
    keepRect.setAttribute('fill', 'white');

    // Hide the top strip
    var hideRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    hideRect.setAttribute('x', bb.x);
    hideRect.setAttribute('y', bb.y);
    hideRect.setAttribute('width', bb.width);
    hideRect.setAttribute('height', CUT_PX);
    hideRect.setAttribute('fill', 'black');

    mask.appendChild(keepRect);
    mask.appendChild(hideRect);
    defs.appendChild(mask);

    strokePath.setAttribute('mask', 'url(#waveStrokeMaskTop)');

    // Put stroke above fill
    base.parentNode.appendChild(strokePath);

    return true;
  }

  if (!styleTopWave()) {
    var mo = new MutationObserver(function () {
      if (styleTopWave()) mo.disconnect();
    });
    mo.observe(document.documentElement, { childList: true, subtree: true });
    setTimeout(function(){ mo.disconnect(); }, 8000);
  }
})();
</script>

<style>
/* seam insurance for TOP wave */
.wave-svg.wave-top{
  display:block;
  line-height:0;

  /* tiny overlap so no seam can peek through */
  margin-top:-1px;
}
</style>