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>
.docaccess-translate-toggle {
 background: inherit;     /* inherits background */
    color: #fff;
}

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

/* Hover state (same color, but kept here in case you want variations later) */
.docaccess-translate-toggle:hover {
    background: #255148;
border-color: #255148;
    color: #fff;
}

.docaccess-translate-toggle:focus {
    background: #255148;
    color: #fff;
    outline: 3px solid #255148;
    outline-offset: 2px;
}

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

.docaccess-translate-toggle:focus-visible {
    background: #255148;
    border-color: #255148;
    color: #fff;
    outline: 3px solid #255148;
    outline-offset: 2px;
}

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

/* Language menu background */
.docaccess-language-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 14rem;
    background: #255148;
    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>