@composy/keyboard-vue 0.0.1 → 0.0.2

package/dist/index.min.css

@@ -1 +1 @@
-/* style/index.less */ /*# sourceMappingURL=src/style/index.less.map */ /* styles/index.less */ /** * LDesign Keyboard 样式 * @module styles */ /* 核心样式 */ @import 'keyboard.css';/* 主题样式 */ @import 'themes.css';/* 深色主题 */ .dark,[data-theme="dark"]{--keyboard-bg:#374151;--keyboard-key-bg:#4b5563;--keyboard-key-color:#f9fafb;--keyboard-key-active-bg:#6b7280;--keyboard-fn-key-bg:#1f2937;--keyboard-fn-key-color:#f9fafb;--keyboard-fn-key-active-bg:#111827;--keyboard-primary-bg:#2563eb;--keyboard-primary-active-bg:#1d4ed8;}/* iOS 风格主题 */ .keyboard-theme-ios{--keyboard-bg:#d1d5db;--keyboard-key-bg:#ffffff;--keyboard-key-color:#000000;--keyboard-key-active-bg:#c4c7cc;--keyboard-fn-key-bg:#adb3bc;--keyboard-fn-key-color:#000000;--keyboard-fn-key-active-bg:#8e9399;--keyboard-primary-bg:#007aff;--keyboard-primary-active-bg:#0062cc;--keyboard-key-radius:5px;}/* Android 风格主题 */ .keyboard-theme-android{--keyboard-bg:#263238;--keyboard-key-bg:#37474f;--keyboard-key-color:#ffffff;--keyboard-key-active-bg:#455a64;--keyboard-fn-key-bg:#455a64;--keyboard-fn-key-color:#90a4ae;--keyboard-fn-key-active-bg:#546e7a;--keyboard-primary-bg:#4285f4;--keyboard-primary-active-bg:#3367d6;--keyboard-key-radius:4px;}/* 基础重置 */ .virtual-keyboard,.virtual-keyboard *{box-sizing:border-box;}.virtual-keyboard{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}/* 禁止选中 */ .virtual-keyboard,.keyboard-popup{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}/* 禁止 iOS 点击高亮 */ .keyboard-key{-webkit-tap-highlight-color:transparent;}/* 移动端优化 */ @media (max-width:768px){:root{--keyboard-key-height:46px;--keyboard-font-size:18px;}.virtual-keyboard{padding:6px 2px;}.keyboard-key{margin:3px;}}/* 横屏优化 */ @media (orientation:landscape) and (max-height:500px){:root{--keyboard-key-height:36px;--keyboard-font-size:14px;}.virtual-keyboard{padding:4px 2px;}}/* 安全区域适配 */ @supports (padding-bottom:env(safe-area-inset-bottom)){.keyboard-popup--mobile{padding-bottom:calc(8px + env(safe-area-inset-bottom));}}/* ========================= 数字键盘专用样式 ========================= */ .number-keyboard-row{display:flex;justify-content:center;width:100%;}.number-keyboard-row .keyboard-key{flex:1;max-width:25%;height:52px;font-size:22px;font-weight:500;}.number-keyboard-row .key-number{background-color:var(--keyboard-key-bg,#fff);color:var(--keyboard-key-color,#333);}.number-keyboard-row .key-side{background-color:var(--keyboard-fn-key-bg,#d4d6dc);color:var(--keyboard-fn-key-color,#333);font-size:14px;}.number-keyboard-row .key-side:active{background-color:var(--keyboard-fn-key-active-bg,#b8bac0);}.number-keyboard-row .key-done{background-color:var(--keyboard-primary-bg,#007aff);color:#fff;}.number-keyboard-row .key-done:active{background-color:var(--keyboard-primary-active-bg,#0062cc);}.number-keyboard-row .key-decimal,.number-keyboard-row .key-double-zero{background-color:var(--keyboard-key-bg,#fff);font-size:18px;}.number-keyboard-row .key-placeholder{background-color:transparent;box-shadow:none;cursor:default;}.number-keyboard-row .key-placeholder:active{transform:none;background-color:transparent;}/* ========================= PC端专用样式 ========================= */ .keyboard-popup--desktop{min-width:320px;}.keyboard-popup--desktop .keyboard-key{height:40px;font-size:15px;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);}.keyboard-popup--desktop .keyboard-key:hover{background-color:var(--keyboard-key-active-bg,#e5e7eb);}.keyboard-popup--desktop .keyboard-key--backspace:hover,.keyboard-popup--desktop .keyboard-key--shift:hover,.keyboard-popup--desktop .keyboard-key--tab:hover,.keyboard-popup--desktop .keyboard-key--clear:hover,.keyboard-popup--desktop .keyboard-key--close:hover{background-color:var(--keyboard-fn-key-active-bg,#b8bac0);}.keyboard-popup--desktop .keyboard-key--done:hover,.keyboard-popup--desktop .keyboard-key--enter:hover{background-color:var(--keyboard-primary-active-bg,#0062cc);}/* PC端数字键盘 */ .keyboard-popup--desktop .number-keyboard-row .keyboard-key{height:44px;font-size:18px;}.keyboard-popup--desktop .number-keyboard-row .key-side{font-size:13px;}/* ========================= 移动端专用样式 ========================= */ .keyboard-popup--mobile{width:100%;}.keyboard-popup--mobile .keyboard-key{height:46px;font-size:18px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.1);}/* 移动端数字键盘 */ .keyboard-popup--mobile .number-keyboard-row .keyboard-key{height:54px;font-size:24px;border-radius:8px;}.keyboard-popup--mobile .number-keyboard-row .key-side{font-size:15px;}/* ========================= 键盘顶部栅栏（移动端） ========================= */ .keyboard-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:var(--keyboard-bg,#d1d5db);border-bottom:1px solid rgba(0,0,0,0.1);}.keyboard-toolbar__title{font-size:14px;color:var(--keyboard-fn-key-color,#666);}.keyboard-toolbar__done{padding:6px 16px;background:none;border:none;color:var(--keyboard-primary-bg,#007aff);font-size:15px;font-weight:500;cursor:pointer;}.keyboard-toolbar__done:active{opacity:0.7;}/*# sourceMappingURL=src/styles/index.less.map */ /* styles/keyboard.less */ /** * LDesign Keyboard - 核心样式 * 简洁现代的默认主题 */ /* ==================== CSS 变量 - 简洁主题 ==================== */:root{/* 键盘背景 */ --keyboard-bg:#f7f7f7;/* 普通按键 */ --keyboard-key-bg:#ffffff;--keyboard-key-color:#333333;--keyboard-key-active-bg:#e5e5e5;--keyboard-key-border:#e0e0e0;/* 功能键 */ --keyboard-fn-bg:#e8e8e8;--keyboard-fn-color:#666666;--keyboard-fn-active-bg:#d8d8d8;/* 主色调按键 */ --keyboard-primary-bg:#2563eb;--keyboard-primary-active-bg:#1d4ed8;--keyboard-primary-color:#ffffff;/* 按键尺寸 */ --keyboard-key-height:48px;--keyboard-key-radius:8px;--keyboard-key-gap:6px;/* 字体 */ --keyboard-font-size:20px;--keyboard-fn-font-size:14px;/* 动画 */ --keyboard-transition:80ms ease-out;}/* ==================== 基础重置 ==================== */ .virtual-keyboard,.virtual-keyboard *,.keyboard-popup,.keyboard-popup *{box-sizing:border-box;margin:0;padding:0;}.virtual-keyboard{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}/* ==================== 键盘容器 ==================== */ .virtual-keyboard{display:flex;flex-direction:column;padding:8px;background-color:var(--keyboard-bg);width:100%;}.virtual-keyboard__row{display:flex;justify-content:center;width:100%;gap:var(--keyboard-key-gap);margin-bottom:var(--keyboard-key-gap);}.virtual-keyboard__row:last-child{margin-bottom:0;}/* ==================== 按键基础样式 ==================== */ .keyboard-key{display:inline-flex;align-items:center;justify-content:center;flex:1;height:var(--keyboard-key-height);min-width:0;padding:0 4px;border:none;border-radius:var(--keyboard-key-radius);background-color:var(--keyboard-key-bg);color:var(--keyboard-key-color);font-size:var(--keyboard-font-size);font-weight:500;cursor:pointer;touch-action:manipulation;transition:background-color var(--keyboard-transition),transform var(--keyboard-transition);-webkit-tap-highlight-color:transparent;box-shadow:0 1px 0 var(--keyboard-key-border);}.keyboard-key:active{background-color:var(--keyboard-key-active-bg);transform:scale(0.98);}.keyboard-key--disabled{opacity:0;cursor:default;pointer-events:none;}/* ==================== 功能键样式 ==================== */ .keyboard-key--backspace,.keyboard-key--shift,.keyboard-key--tab,.keyboard-key--clear,.keyboard-key--close{background-color:var(--keyboard-fn-bg);color:var(--keyboard-fn-color);font-size:var(--keyboard-fn-font-size);font-weight:400;box-shadow:0 1px 0 var(--keyboard-key-border);}.keyboard-key--backspace:active,.keyboard-key--shift:active,.keyboard-key--tab:active,.keyboard-key--clear:active,.keyboard-key--close:active{background-color:var(--keyboard-fn-active-bg);}/* Shift 激活状态 */ .keyboard-key--shift.keyboard-key--active{background-color:var(--keyboard-primary-bg);color:var(--keyboard-primary-color);}/* ==================== 主色按键（完成/确认） ==================== */ .keyboard-key--done,.keyboard-key--enter{background-color:var(--keyboard-primary-bg);color:var(--keyboard-primary-color);font-size:var(--keyboard-fn-font-size);font-weight:500;box-shadow:none;}.keyboard-key--done:active,.keyboard-key--enter:active{background-color:var(--keyboard-primary-active-bg);}/* ==================== 空格键 ==================== */ .keyboard-key--space{flex:4;}/* ==================== 占位键（透明） ==================== */ .key-placeholder{background-color:transparent !important;box-shadow:none !important;cursor:default;pointer-events:none;}/* ==================== 数字键盘通用样式 ==================== */ .numpad-row{display:flex;gap:var(--keyboard-key-gap);width:100%;}.numpad-row .keyboard-key{flex:1;height:54px;font-size:24px;font-weight:500;}/* 数字键 */ .key-num{background-color:var(--keyboard-key-bg);color:var(--keyboard-key-color);}/* 功能键 */ .key-numpad-fn{background-color:var(--keyboard-fn-bg);color:var(--keyboard-fn-color);font-size:14px;font-weight:400;}/* 完成键 */ .key-numpad-done{background-color:var(--keyboard-primary-bg);color:var(--keyboard-primary-color);font-size:16px;font-weight:500;box-shadow:none;}.key-numpad-done:active{background-color:var(--keyboard-primary-active-bg);}/* ==================== 车牌键盘样式 ==================== */ .virtual-keyboard:has(.plate-keyboard-row){min-width:340px;}.plate-keyboard-row{display:flex;gap:3px;width:100%;flex-wrap:nowrap;}.plate-keyboard-row .keyboard-key{flex:1 1 0;height:42px;min-width:28px;max-width:none;padding:0 2px;font-size:15px;font-weight:500;border-radius:5px;}.key-plate-province,.key-plate-letter,.key-plate-number{background-color:var(--keyboard-key-bg);}.key-plate-fn{background-color:var(--keyboard-fn-bg);font-size:12px;flex:1.2 1 0 !important;}.key-plate-done{background-color:var(--keyboard-primary-bg);color:var(--keyboard-primary-color);font-size:13px;box-shadow:none;flex:1.5 1 0 !important;}.key-plate-switch{background-color:var(--keyboard-fn-bg);font-size:12px;flex:1.3 1 0 !important;}.key-plate-special{background-color:#fef3c7;color:#92400e;}/* ==================== 弹出层样式 ==================== */ .keyboard-popup{position:fixed;z-index:1000;background-color:var(--keyboard-bg);overflow:hidden;}.keyboard-popup--desktop{border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.05);min-width:300px;}.keyboard-popup--mobile{position:fixed;left:0;right:0;bottom:0;border-radius:0;border-top-left-radius:12px;border-top-right-radius:12px;box-shadow:0 -2px 16px rgba(0,0,0,0.08);}/* 安全区域 */ @supports (padding-bottom:env(safe-area-inset-bottom)){.keyboard-popup--mobile{padding-bottom:env(safe-area-inset-bottom);}}/* ==================== 遮罩层 ==================== */ .keyboard-mask{position:fixed;inset:0;background-color:rgba(0,0,0,0.3);z-index:999;}/* ==================== 动画 ==================== */ .keyboard-mask-enter-active,.keyboard-mask-leave-active{transition:opacity 0.2s ease;}.keyboard-mask-enter-from,.keyboard-mask-leave-to{opacity:0;}.keyboard-fade-enter-active,.keyboard-fade-leave-active{transition:opacity 0.15s ease,transform 0.15s ease;}.keyboard-fade-enter-from,.keyboard-fade-leave-to{opacity:0;transform:translateY(-4px) scale(0.98);}.keyboard-slide-enter-active,.keyboard-slide-leave-active{transition:transform 0.25s cubic-bezier(0.32,0.72,0,1);}.keyboard-slide-enter-from,.keyboard-slide-leave-to{transform:translateY(100%);}/* ==================== 移动端适配 ==================== */ @media (max-width:768px){.virtual-keyboard{padding:6px;}.keyboard-key{height:44px;}.numpad-row .keyboard-key{height:52px;font-size:22px;}.plate-keyboard-row .keyboard-key{height:40px;font-size:15px;}}/* ==================== 横屏适配 ==================== */ @media (orientation:landscape) and (max-height:500px){.keyboard-key{height:36px;font-size:16px;}.numpad-row .keyboard-key{height:42px;font-size:18px;}}/*# sourceMappingURL=src/styles/keyboard.less.map */ /* styles/themes.less */ /** * LDesign Keyboard - 主题预设 * 简洁 · 现代 · 优雅 */ /* ==================== MIUI 主题 - 小米风格（默认） ==================== */ [data-theme="miui"],.keyboard-theme-miui{--keyboard-bg:#f5f5f5;--keyboard-key-bg:#ffffff;--keyboard-key-color:#1a1a1a;--keyboard-key-active-bg:#e8e8e8;--keyboard-fn-key-bg:#e0e0e0;--keyboard-fn-key-color:#666666;--keyboard-fn-key-active-bg:#d0d0d0;--keyboard-primary-bg:#ff6700;--keyboard-primary-active-bg:#e55d00;--keyboard-primary-color:#ffffff;--keyboard-key-radius:8px;--keyboard-key-gap:6px;--keyboard-key-height:46px;--keyboard-font-size:18px;--keyboard-fn-font-size:14px;--keyboard-padding:8px;--keyboard-key-shadow:none;}[data-theme="miui"] .keyboard-key,.keyboard-theme-miui .keyboard-key{font-weight:500;}/* ==================== iOS 主题 - 苹果风格 ==================== */ [data-theme="ios"],.keyboard-theme-ios{--keyboard-bg:#d1d3d9;--keyboard-key-bg:#ffffff;--keyboard-key-color:#000000;--keyboard-key-active-bg:#c8cad0;--keyboard-key-border:#a8aab4;--keyboard-fn-key-bg:#adb0b8;--keyboard-fn-key-color:#000000;--keyboard-fn-key-active-bg:#9ea1a9;--keyboard-primary-bg:#007aff;--keyboard-primary-active-bg:#0066d6;--keyboard-primary-color:#ffffff;--keyboard-key-radius:5px;--keyboard-key-gap:6px;--keyboard-key-height:43px;--keyboard-font-size:23px;--keyboard-fn-font-size:15px;--keyboard-padding:4px;--keyboard-key-shadow:0 1px 0 #a8aab4;}[data-theme="ios"] .keyboard-key,.keyboard-theme-ios .keyboard-key{font-weight:400;}[data-theme="ios"] .keyboard-key:active,.keyboard-theme-ios .keyboard-key:active{transform:none;}/* ==================== Material 主题 - 质感设计 ==================== */ [data-theme="material"],.keyboard-theme-material{--keyboard-bg:#263238;--keyboard-key-bg:#37474f;--keyboard-key-color:#ffffff;--keyboard-key-active-bg:#455a64;--keyboard-fn-key-bg:#455a64;--keyboard-fn-key-color:#b0bec5;--keyboard-fn-key-active-bg:#546e7a;--keyboard-primary-bg:#4caf50;--keyboard-primary-active-bg:#43a047;--keyboard-primary-color:#ffffff;--keyboard-key-radius:4px;--keyboard-key-gap:4px;--keyboard-key-height:48px;--keyboard-font-size:20px;--keyboard-fn-font-size:14px;--keyboard-padding:6px;--keyboard-key-shadow:0 1px 3px rgba(0,0,0,0.2);}[data-theme="material"] .keyboard-key,.keyboard-theme-material .keyboard-key{box-shadow:0 1px 2px rgba(0,0,0,0.12);}[data-theme="material"] .keyboard-key:active,.keyboard-theme-material .keyboard-key:active{transform:none;box-shadow:0 2px 4px rgba(0,0,0,0.2);}/* ==================== Minimal 极简主题 - 无边框 ==================== */ [data-theme="minimal"],.keyboard-theme-minimal{--keyboard-bg:rgba(250,250,250,0.95);--keyboard-key-bg:transparent;--keyboard-key-color:#333333;--keyboard-key-active-bg:rgba(0,0,0,0.08);--keyboard-fn-key-bg:transparent;--keyboard-fn-key-color:#888888;--keyboard-fn-key-active-bg:rgba(0,0,0,0.08);--keyboard-primary-bg:#333333;--keyboard-primary-active-bg:#1a1a1a;--keyboard-primary-color:#ffffff;--keyboard-key-radius:12px;--keyboard-key-gap:8px;--keyboard-key-height:44px;--keyboard-font-size:17px;--keyboard-fn-font-size:13px;--keyboard-padding:12px;--keyboard-key-shadow:none;}[data-theme="minimal"] .keyboard-key,.keyboard-theme-minimal .keyboard-key{box-shadow:none;}[data-theme="minimal"] .keyboard-key:active,.keyboard-theme-minimal .keyboard-key:active{transform:scale(0.95);}/* ==================== Dark 深色主题 ==================== */ [data-theme="dark"],.keyboard-theme-dark{--keyboard-bg:#1c1c1e;--keyboard-key-bg:#3a3a3c;--keyboard-key-color:#ffffff;--keyboard-key-active-bg:#4a4a4c;--keyboard-fn-key-bg:#2c2c2e;--keyboard-fn-key-color:#ebebf5;--keyboard-fn-key-active-bg:#3c3c3e;--keyboard-primary-bg:#0a84ff;--keyboard-primary-active-bg:#0070e0;--keyboard-primary-color:#ffffff;--keyboard-key-radius:8px;--keyboard-key-gap:6px;--keyboard-key-height:45px;--keyboard-font-size:18px;--keyboard-fn-font-size:14px;--keyboard-padding:8px;--keyboard-key-shadow:0 1px 2px rgba(0,0,0,0.4);}[data-theme="dark"] .keyboard-key,.keyboard-theme-dark .keyboard-key{box-shadow:0 1px 0 rgba(0,0,0,0.4);}/* 深色车牌键盘特殊样式 */ [data-theme="dark"] .key-plate-special,.keyboard-theme-dark .key-plate-special{background-color:#4a3728;color:#fcd34d;}/* ==================== Green 护眼主题 ==================== */ [data-theme="green"],.keyboard-theme-green{--keyboard-bg:#e8f5e9;--keyboard-key-bg:#ffffff;--keyboard-key-color:#2e7d32;--keyboard-key-active-bg:#c8e6c9;--keyboard-key-border:#a5d6a7;--keyboard-fn-bg:#c8e6c9;--keyboard-fn-color:#388e3c;--keyboard-fn-active-bg:#a5d6a7;--keyboard-primary-bg:#43a047;--keyboard-primary-active-bg:#388e3c;--keyboard-primary-color:#ffffff;--keyboard-key-radius:8px;}/* ==================== Blue 蓝色主题 ==================== */ [data-theme="blue"],.keyboard-theme-blue{--keyboard-bg:#e3f2fd;--keyboard-key-bg:#ffffff;--keyboard-key-color:#1565c0;--keyboard-key-active-bg:#bbdefb;--keyboard-key-border:#90caf9;--keyboard-fn-bg:#bbdefb;--keyboard-fn-color:#1976d2;--keyboard-fn-active-bg:#90caf9;--keyboard-primary-bg:#1976d2;--keyboard-primary-active-bg:#1565c0;--keyboard-primary-color:#ffffff;--keyboard-key-radius:8px;}/* ==================== 主题工具类 ==================== */ .keyboard-theme-light{color-scheme:light;}.keyboard-theme-dark{color-scheme:dark;}/* 平滑主题切换 */ .keyboard-popup,.virtual-keyboard{transition:background-color 0.2s ease;}.keyboard-key{transition:background-color var(--keyboard-transition) ease,transform var(--keyboard-transition) ease;}/*# sourceMappingURL=src/styles/themes.less.map */
+:root{--keyboard-bg:var(--ld-bg-surface);--keyboard-key-bg:var(--ld-bg-container);--keyboard-key-color:var(--ld-text-primary);--keyboard-key-active-bg:var(--ld-primary-50);--keyboard-key-border:var(--ld-border);--keyboard-fn-key-bg:var(--ld-bg-elevated);--keyboard-fn-key-color:var(--ld-text-secondary);--keyboard-fn-key-active-bg:var(--ld-primary-100);--keyboard-primary-bg:var(--ld-primary-500);--keyboard-primary-active-bg:var(--ld-primary-600);--keyboard-primary-color:var(--ld-text-inverse);--keyboard-mask-bg:color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));--keyboard-key-height:var(--ld-px-48);--keyboard-key-radius:var(--ld-radius-md);--keyboard-key-gap:var(--ld-spacing-sm);--keyboard-font-size:var(--ld-font-lg);--keyboard-fn-font-size:var(--ld-font-sm);--keyboard-padding:var(--ld-spacing-sm);--keyboard-key-shadow:var(--ld-shadow-sm, none)}.keyboard-popup,.keyboard-popup *,.virtual-keyboard,.virtual-keyboard *{box-sizing:border-box;margin:0;padding:0}.virtual-keyboard{display:flex;flex-direction:column;width:100%;padding:var(--keyboard-padding);background-color:var(--keyboard-bg);font-family:var(--ld-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.numpad-row,.virtual-keyboard__row{display:flex;justify-content:center;width:100%;gap:var(--keyboard-key-gap);margin-bottom:var(--keyboard-key-gap)}.virtual-keyboard__row:last-child{margin-bottom:0}.keyboard-key{display:inline-flex;flex:1;align-items:center;justify-content:center;min-width:0;height:var(--keyboard-key-height);padding:0 var(--ld-spacing-xs);border:0;border-radius:var(--keyboard-key-radius);background-color:var(--keyboard-key-bg);color:var(--keyboard-key-color);font-size:var(--keyboard-font-size);font-weight:500;cursor:pointer;touch-action:manipulation;transition:background-color var(--ld-duration-fast),transform var(--ld-duration-fast);-webkit-tap-highlight-color:transparent;box-shadow:var(--keyboard-key-shadow)}.keyboard-key:active{background-color:var(--keyboard-key-active-bg);transform:scale(.98)}.keyboard-key--disabled{opacity:0;cursor:default;pointer-events:none}.keyboard-key--backspace,.keyboard-key--clear,.keyboard-key--close,.keyboard-key--shift,.keyboard-key--tab{background-color:var(--keyboard-fn-key-bg);color:var(--keyboard-fn-key-color);font-size:var(--keyboard-fn-font-size);font-weight:400}.keyboard-key--backspace:active,.keyboard-key--clear:active,.keyboard-key--close:active,.keyboard-key--shift:active,.keyboard-key--tab:active{background-color:var(--keyboard-fn-key-active-bg)}.keyboard-key--done,.keyboard-key--enter,.keyboard-key--shift.keyboard-key--active{background-color:var(--keyboard-primary-bg);color:var(--keyboard-primary-color)}.keyboard-key--done:active,.keyboard-key--enter:active{background-color:var(--keyboard-primary-active-bg)}.keyboard-key--space{flex:4}.key-placeholder{background-color:transparent;box-shadow:none;cursor:default;pointer-events:none}.numpad-row .keyboard-key{height:var(--ld-px-56);font-size:var(--ld-font-xl)}.key-num,.key-plate-letter,.key-plate-number,.key-plate-province{background-color:var(--keyboard-key-bg);color:var(--keyboard-key-color)}.key-numpad-fn,.key-plate-fn,.key-plate-switch{background-color:var(--keyboard-fn-key-bg);color:var(--keyboard-fn-key-color);font-size:var(--keyboard-fn-font-size)}.key-numpad-done,.key-plate-done{background-color:var(--keyboard-primary-bg);color:var(--keyboard-primary-color);font-size:var(--keyboard-fn-font-size);box-shadow:none}.key-numpad-done:active,.key-plate-done:active{background-color:var(--keyboard-primary-active-bg)}.virtual-keyboard:has(.plate-keyboard-row){min-width:var(--ld-px-280)}.plate-keyboard-row{display:flex;flex-wrap:nowrap;width:100%;gap:var(--ld-spacing-xs)}.plate-keyboard-row .keyboard-key{flex:1 1 0;min-width:var(--ld-px-28);height:var(--ld-px-42);padding:0 var(--ld-px-2);font-size:var(--ld-font-sm);border-radius:var(--ld-radius-sm)}.key-plate-fn{flex:1.2 1 0!important}.key-plate-done{flex:1.5 1 0!important}.key-plate-switch{flex:1.3 1 0!important}.key-plate-special{background-color:var(--ld-warning-50);color:var(--ld-warning-700)}.keyboard-popup{position:fixed;z-index:1000;overflow:hidden;background-color:var(--keyboard-bg)}.keyboard-popup--desktop{min-width:var(--ld-px-280);border-radius:var(--ld-radius-lg);box-shadow:var(--ld-shadow-lg,none)}.keyboard-popup--mobile{right:0;bottom:0;left:0;border-radius:0;border-top-left-radius:var(--ld-radius-lg);border-top-right-radius:var(--ld-radius-lg);box-shadow:var(--ld-shadow-md,none)}.keyboard-mask{position:fixed;inset:0;z-index:999;background-color:var(--keyboard-mask-bg)}.keyboard-mask-enter-active,.keyboard-mask-leave-active{transition:opacity var(--ld-duration-fast)}.keyboard-mask-enter-from,.keyboard-mask-leave-to{opacity:0}.keyboard-fade-enter-active,.keyboard-fade-leave-active{transition:opacity var(--ld-duration-fast),transform var(--ld-duration-fast)}.keyboard-fade-enter-from,.keyboard-fade-leave-to{opacity:0;transform:translateY(calc(-1 * var(--ld-px-4))) scale(.98)}.keyboard-slide-enter-active,.keyboard-slide-leave-active{transition:transform var(--ld-duration-normal)}.keyboard-slide-enter-from,.keyboard-slide-leave-to{transform:translateY(100%)}@media (max-width:48em){.virtual-keyboard{padding:var(--ld-spacing-xs)}.keyboard-key{height:var(--ld-px-48)}}@media (orientation:landscape) and (max-height:32em){.keyboard-key{height:var(--ld-px-36);font-size:var(--ld-font-base)}}@supports (padding-bottom:env(safe-area-inset-bottom)){.keyboard-popup--mobile{padding-bottom:env(safe-area-inset-bottom)}}.keyboard-theme-miui,[data-theme=miui]{--keyboard-bg:var(--ld-bg-surface);--keyboard-key-bg:var(--ld-bg-container);--keyboard-key-color:var(--ld-text-primary);--keyboard-key-active-bg:var(--ld-warning-50);--keyboard-fn-key-bg:var(--ld-bg-elevated);--keyboard-fn-key-color:var(--ld-text-secondary);--keyboard-fn-key-active-bg:var(--ld-warning-100);--keyboard-primary-bg:var(--ld-warning-500);--keyboard-primary-active-bg:var(--ld-warning-600);--keyboard-primary-color:var(--ld-text-inverse);--keyboard-mask-bg:color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));--keyboard-key-border:var(--ld-border);--keyboard-key-radius:var(--ld-radius-md);--keyboard-key-gap:var(--ld-spacing-sm);--keyboard-key-height:var(--ld-px-48);--keyboard-font-size:var(--ld-font-lg);--keyboard-fn-font-size:var(--ld-font-sm);--keyboard-padding:var(--ld-spacing-sm);--keyboard-key-shadow:var(--ld-shadow-sm, none)}.keyboard-theme-ios,[data-theme=ios]{--keyboard-bg:var(--ld-bg-surface);--keyboard-key-bg:var(--ld-bg-container);--keyboard-key-color:var(--ld-text-primary);--keyboard-key-active-bg:var(--ld-primary-50);--keyboard-fn-key-bg:var(--ld-bg-elevated);--keyboard-fn-key-color:var(--ld-text-primary);--keyboard-fn-key-active-bg:var(--ld-primary-100);--keyboard-primary-bg:var(--ld-primary-500);--keyboard-primary-active-bg:var(--ld-primary-600);--keyboard-primary-color:var(--ld-text-inverse);--keyboard-mask-bg:color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));--keyboard-key-border:var(--ld-border);--keyboard-key-radius:var(--ld-radius-sm);--keyboard-key-gap:var(--ld-spacing-sm);--keyboard-key-height:var(--ld-px-42);--keyboard-font-size:var(--ld-font-xl);--keyboard-fn-font-size:var(--ld-font-base);--keyboard-padding:var(--ld-spacing-xs);--keyboard-key-shadow:var(--ld-shadow-sm, none)}.keyboard-theme-material,[data-theme=material]{--keyboard-bg:var(--ld-bg-elevated);--keyboard-key-bg:var(--ld-bg-container);--keyboard-key-color:var(--ld-text-primary);--keyboard-key-active-bg:var(--ld-success-50);--keyboard-fn-key-bg:var(--ld-bg-surface);--keyboard-fn-key-color:var(--ld-text-secondary);--keyboard-fn-key-active-bg:var(--ld-success-100);--keyboard-primary-bg:var(--ld-success-500);--keyboard-primary-active-bg:var(--ld-success-600);--keyboard-primary-color:var(--ld-text-inverse);--keyboard-mask-bg:color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));--keyboard-key-border:var(--ld-border);--keyboard-key-radius:var(--ld-radius-sm);--keyboard-key-gap:var(--ld-spacing-xs);--keyboard-key-height:var(--ld-px-48);--keyboard-font-size:var(--ld-font-lg);--keyboard-fn-font-size:var(--ld-font-sm);--keyboard-padding:var(--ld-spacing-sm);--keyboard-key-shadow:var(--ld-shadow-sm, none)}.keyboard-theme-minimal,[data-theme=minimal]{--keyboard-bg:var(--ld-bg-surface);--keyboard-key-bg:var(--ld-bg-container);--keyboard-key-color:var(--ld-text-primary);--keyboard-key-active-bg:var(--ld-primary-50);--keyboard-fn-key-bg:var(--ld-bg-surface);--keyboard-fn-key-color:var(--ld-text-secondary);--keyboard-fn-key-active-bg:var(--ld-primary-100);--keyboard-primary-bg:var(--ld-text-primary);--keyboard-primary-active-bg:var(--ld-text-secondary);--keyboard-primary-color:var(--ld-bg-container);--keyboard-key-border:var(--ld-border-subtle);--keyboard-key-radius:var(--ld-radius-lg);--keyboard-key-gap:var(--ld-spacing-sm);--keyboard-key-height:var(--ld-px-48);--keyboard-font-size:var(--ld-font-base);--keyboard-fn-font-size:var(--ld-font-sm);--keyboard-padding:var(--ld-spacing-md);--keyboard-key-shadow:none}.keyboard-theme-dark,[data-theme=dark]{--keyboard-bg:var(--ld-bg-surface);--keyboard-key-bg:var(--ld-bg-elevated);--keyboard-key-color:var(--ld-text-primary);--keyboard-key-active-bg:var(--ld-primary-100);--keyboard-fn-key-bg:var(--ld-bg-container);--keyboard-fn-key-color:var(--ld-text-secondary);--keyboard-fn-key-active-bg:var(--ld-primary-200);--keyboard-primary-bg:var(--ld-primary-500);--keyboard-primary-active-bg:var(--ld-primary-600);--keyboard-primary-color:var(--ld-text-inverse);--keyboard-mask-bg:color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));--keyboard-key-border:var(--ld-border);--keyboard-key-radius:var(--ld-radius-md);--keyboard-key-gap:var(--ld-spacing-sm);--keyboard-key-height:var(--ld-px-48);--keyboard-font-size:var(--ld-font-lg);--keyboard-fn-font-size:var(--ld-font-sm);--keyboard-padding:var(--ld-spacing-sm);--keyboard-key-shadow:var(--ld-shadow-sm, none)}.keyboard-theme-green,[data-theme=green]{--keyboard-primary-bg:var(--ld-success-500);--keyboard-primary-active-bg:var(--ld-success-600)}.keyboard-theme-blue,[data-theme=blue]{--keyboard-primary-bg:var(--ld-info-500);--keyboard-primary-active-bg:var(--ld-info-600)}.keyboard-theme-light{color-scheme:light}.keyboard-theme-dark{color-scheme:dark}.keyboard-popup,.virtual-keyboard{transition:background-color var(--ld-duration-fast)}.keyboard-key{transition:background-color var(--ld-duration-fast),transform var(--ld-duration-fast)}