The Dream Stream

Place in Site-wide custom HTML before </head>

 

<link rel="stylesheet" href="https://docaccess.com/tools/sl-translate.css">
<script src="https://docaccess.com/tools/sl-translate.js"></script>

<style>
/* Non-interactive: match surrounding nav item */
.docaccess-translate-toggle{
  background: inherit;
  color: inherit;
}

.docaccess-translate-toggle svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: fill 0.2s ease;
  padding-top: 5px;
}

/* Interactive states: follow site navbar behavior (colors learned automatically) */
.docaccess-translate-toggle:hover{
  background: var(--sl-nav-hover-bg);
  border-color: var(--sl-nav-hover-bg);
  color: #fff;
}

.docaccess-translate-toggle:focus{
  background: var(--sl-nav-focus-bg);
  border-color: var(--sl-nav-focus-bg);
  color: #fff;
  outline: 3px solid var(--sl-nav-focus-bg);
  outline-offset: 2px;
}

.docaccess-translate-toggle:focus:not(:focus-visible){
  outline: none;
}

.docaccess-translate-toggle:focus-visible{
  background: var(--sl-nav-focus-bg);
  border-color: var(--sl-nav-focus-bg);
  color: #fff;
  outline: 3px solid var(--sl-nav-focus-bg);
  outline-offset: 2px;
}

/* Icon stays white on interactive states */
.docaccess-translate-toggle:hover svg,
.docaccess-translate-toggle:focus svg,
.docaccess-translate-toggle:focus-visible svg{
  fill: #fff;
}

/* Menu background: match dropdown-menu */
.docaccess-language-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 14rem;
  background: var(--sl-dropdown-bg);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.25rem 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  display: none;
  z-index: 9999;
}
</style>

<script>
(function () {
  // Reads background colors from stylesheet rules like:
  // "#app .navbar-nav > li > a:hover { background: ... }"
  function getBgFromCss(selectorTextIncludes) {
    for (const sheet of Array.from(document.styleSheets)) {
      let rules;
      try { rules = sheet.cssRules; } catch (e) { continue; } // skip cross-origin sheets
      if (!rules) continue;

      for (const rule of Array.from(rules)) {
        if (!rule.selectorText) continue;
        if (!rule.selectorText.includes(selectorTextIncludes)) continue;

        const bg = rule.style.backgroundColor || rule.style.background;
        if (bg) return bg;
      }
    }
    return "";
  }

  // Fallback: computed background from an existing element
  function getComputedBg(selector) {
    const el = document.querySelector(selector);
    if (!el) return "";
    const bg = getComputedStyle(el).backgroundColor;
    return (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") ? bg : "";
  }

  function applyVars() {
    const root = document.documentElement;

    // Try exact rule lookup first (best cross-theme match)
    const hoverBg =
      getBgFromCss('#app .navbar-nav > li > a:hover') ||
      getBgFromCss('#app .navbar-nav > li > .sl-menu__toggle:hover');

    const focusBg =
      getBgFromCss('#app .navbar-nav > li > a:focus') ||
      getBgFromCss('#app .navbar-nav > li > .sl-menu__toggle:focus') ||
      getBgFromCss('#app .navbar-nav > li.sl-menu--open > a') ||
      getBgFromCss('#app .navbar-nav > li.sl-menu--open > .sl-menu__toggle');

    const dropdownBg =
      getBgFromCss('#app .dropdown-menu') ||
      getComputedBg('#app .dropdown-menu');

    // Final fallbacks if rule parsing fails
    const fallbackFocus = focusBg || dropdownBg || getComputedBg('#app .navbar-toggle');
    const fallbackHover = hoverBg || getBgFromCss('#app .navbar-toggle:hover') || dropdownBg || fallbackFocus;

    root.style.setProperty('--sl-nav-hover-bg', fallbackHover || '#000');
    root.style.setProperty('--sl-nav-focus-bg', fallbackFocus || fallbackHover || '#000');
    root.style.setProperty('--sl-dropdown-bg', dropdownBg || fallbackFocus || fallbackHover || '#000');
  }

  applyVars();
})();
</script>