alvin/Challenge_15_Magazijn_App_Maken
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Challenge_15_Magazijn_App_Maken.git synced 2026-03-06 13:22:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implement multilingual support with Dutch and English translations across the application

Browse Source
This commit is contained in:
Alvin
2025-11-04 11:35:45 +01:00
parent 278e9353f9
commit 1d5b007577
9 changed files with 540 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
public/css/style.css
View File

@@ -475,4 +475,83 @@ body {
background-color: var(--vista-coral);
border-color: var(--vista-coral);
color: var(--vista-white);
}
/* Language Toggle Styles */
.language-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: 1rem;
}
.language-switch {
position: relative;
display: inline-block;
width: 60px;
height: 28px;
}
.language-switch input {
opacity: 0;
width: 0;
height: 0;
}
.language-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--vista-coral);
transition: .4s;
border-radius: 34px;
}
.language-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .language-slider {
background-color: var(--vista-blue);
}
input:checked + .language-slider:before {
transform: translateX(32px);
}
.language-label {
color: var(--vista-white);
font-weight: 500;
min-width: 20px;
text-align: center;
}
.language-label.active {
font-weight: bold;
}
/* Language toggle for login page */
.language-toggle-container {
display: flex;
justify-content: center;
align-items: center;
}
.language-toggle-container .language-toggle {
margin-right: 0;
}
.language-toggle-container .language-label {
color: var(--vista-blue) !important;
}