language switch functionality added

2024-11-25 00:17:13 +01:00
parent 083e9fd771
commit 558df41289
14 changed files with 579 additions and 108 deletions
--- a/public/css/language-switcher.css
+++ b/public/css/language-switcher.css
@@ -0,0 +1,98 @@
+.language-switcher {
+    display: flex;
+    gap: var(--space-xs);
+    padding: var(--space-xs);
+    border-radius: var(--radius-sm);
+    transition: var(--theme-transition);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+.lang-btn {
+    background: none;
+    border: 2px solid var(--lang-switcher-border);
+    color: var(--lang-switcher-text);
+    padding: var(--space-xxs) var(--space-xs);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    transition: all var(--transition-speed) var(--transition-timing);
+    min-width: 40px;
+    min-height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.lang-btn:hover {
+    background-color: var(--lang-switcher-active-bg);
+    color: var(--lang-switcher-active-text);
+    opacity: var(--lang-switcher-hover-opacity);
+}
+
+.lang-btn.active {
+    background-color: var(--lang-switcher-active-bg);
+    color: var(--lang-switcher-active-text);
+}
+
+/* Tablet Devices */
+@media (max-width: 768px) {
+    .lang-btn {
+        font-size: var(--font-size-xs);
+        min-width: 36px;
+        min-height: 28px;
+    }
+}
+
+/* Mobile Devices */
+@media (max-width: 480px) {
+    .language-switcher {
+        padding: var(--space-xxs);
+    }
+}
+
+/* Small Mobile Devices */
+@media (max-width: 320px) {
+    .language-switcher {
+        padding: var(--space-xxs);
+    }
+}
+
+/* Ensure touch targets are large enough on mobile */
+@media (hover: none) {
+    .lang-btn {
+        min-width: 44px;
+        min-height: 44px;
+        padding: var(--space-xs);
+    }
+}
+
+/* Animations */
+.lang-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.lang-btn::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background: var(--lang-switcher-active-bg);
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform var(--transition-speed) var(--transition-timing),
+                opacity var(--transition-speed) var(--transition-timing);
+    border-radius: var(--radius-sm);
+    pointer-events: none;
+}
+
+.lang-btn:active::after {
+    opacity: 0.1;
+    transform: translate(-50%, -50%) scale(1);
+}