145 lines
3.2 KiB
Svelte
145 lines
3.2 KiB
Svelte
<script>
|
|
import { locale, SUPPORTED_LOCALES } from '$lib/translations';
|
|
|
|
const isEnglish = $derived($locale === SUPPORTED_LOCALES.EN_US);
|
|
|
|
/**
|
|
* Switches the current locale to the opposite language (EN_US <-> PT_BR).
|
|
* Prevents the default link behavior (e.g., page jump).
|
|
*/
|
|
const onSwitchToOppositeLang = () => {
|
|
$locale =
|
|
$locale === SUPPORTED_LOCALES.EN_US
|
|
? SUPPORTED_LOCALES.PT_BR
|
|
: SUPPORTED_LOCALES.EN_US;
|
|
};
|
|
</script>
|
|
|
|
<center>
|
|
<div class="switch">
|
|
<input
|
|
id="language-toggle"
|
|
class="check-toggle check-toggle-round-flat"
|
|
type="checkbox"
|
|
onclick={onSwitchToOppositeLang}
|
|
checked={isEnglish}
|
|
onkeydown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
onSwitchToOppositeLang();
|
|
}
|
|
}}
|
|
/>
|
|
<label for="language-toggle"></label>
|
|
<span class="off">EN</span>
|
|
<span class="on">PT</span>
|
|
</div>
|
|
</center>
|
|
|
|
<style>
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 0;
|
|
font-weight: 700;
|
|
z-index: 1;
|
|
}
|
|
|
|
.switch > span {
|
|
position: absolute;
|
|
top: 7px;
|
|
pointer-events: none;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
|
|
width: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
input.check-toggle-round-flat:checked ~ .off {
|
|
color: white !important;
|
|
}
|
|
|
|
input.check-toggle-round-flat:checked ~ .on {
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
.switch > span.on {
|
|
left: 0;
|
|
padding-left: 2px;
|
|
color: white;
|
|
}
|
|
|
|
.switch > span.off {
|
|
right: 0;
|
|
padding-right: 4px;
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
.check-toggle {
|
|
position: absolute;
|
|
margin-left: -9999px;
|
|
visibility: hidden;
|
|
}
|
|
.check-toggle + label {
|
|
display: block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
outline: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
input.check-toggle-round-flat + label {
|
|
padding: 2px;
|
|
width: 97px;
|
|
height: 35px;
|
|
background-color: white;
|
|
-webkit-border-radius: 60px;
|
|
-moz-border-radius: 60px;
|
|
-ms-border-radius: 60px;
|
|
-o-border-radius: 60px;
|
|
border-radius: 60px;
|
|
}
|
|
input.check-toggle-round-flat + label:before,
|
|
input.check-toggle-round-flat + label:after {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
}
|
|
|
|
input.check-toggle-round-flat + label:before {
|
|
top: 2px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
right: 2px;
|
|
background-color: white;
|
|
|
|
-moz-border-radius: 60px;
|
|
-ms-border-radius: 60px;
|
|
-o-border-radius: 60px;
|
|
border-radius: 60px;
|
|
}
|
|
input.check-toggle-round-flat + label:after {
|
|
top: 4px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
width: 48px;
|
|
background-color: var(--color-primary);
|
|
-webkit-border-radius: 52px;
|
|
-moz-border-radius: 52px;
|
|
-ms-border-radius: 52px;
|
|
-o-border-radius: 52px;
|
|
border-radius: 52px;
|
|
-webkit-transition: margin 0.2s;
|
|
-moz-transition: margin 0.2s;
|
|
-o-transition: margin 0.2s;
|
|
transition: margin 0.2s;
|
|
}
|
|
|
|
input.check-toggle-round-flat:checked + label:after {
|
|
margin-left: 42px;
|
|
}
|
|
</style>
|