.input-with-keyboard {
position: relative;
display: block;
width: 100%;
} .input-with-keyboard input,
.input-with-keyboard textarea {
width: 100% !important;
box-sizing: border-box;
} .list-filters .input-with-keyboard {
flex: 1;
min-width: 250px;
} .keyboard-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
cursor: pointer;
color: var(--blanc-gris, #ADADAD);
transition: all 0.2s ease;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 4px;
}
.keyboard-icon:hover {
color: var(--accent-color, #FFD700);
background: rgba(255, 255, 255, 0.1);
}
.keyboard-icon svg {
width: 100%;
height: 100%;
} .virtual-keyboard-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(17, 17, 17, 0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1000000;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
padding: 1rem;
}
.virtual-keyboard-overlay.active {
display: flex;
opacity: 1;
} .virtual-keyboard-container {
background: var(--secondary-fonce, #2d2d2d);
border: 2px solid var(--blanc-gris, #ADADAD);
border-radius: 12px;
padding: 1.5rem;
max-width: 1000px;
width: 100%;
transform: translateY(20px);
transition: transform 0.3s ease;
}
.virtual-keyboard-overlay.active .virtual-keyboard-container {
transform: translateY(0);
} .virtual-keyboard-header {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 1rem;
}
.virtual-keyboard-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-color, #ffffff);
margin: 0;
}
.virtual-keyboard-close {
background: transparent;
border: 2px solid var(--blanc-gris, #ADADAD);
color: var(--text-color, #ffffff);
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 24px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
padding: 0;
}
.virtual-keyboard-close:hover {
background: var(--accent-color, #FFD700);
border-color: var(--accent-color, #FFD700);
color: var(--primary-fonce, #111111);
} .virtual-keyboard-preview {
background: var(--primary-fonce, #111111);
border: 1px solid var(--blanc-gris, #ADADAD);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
min-height: 60px;
font-size: 1.25rem;
color: var(--text-color, #ffffff);
word-wrap: break-word;
overflow-wrap: break-word;
position: relative;
}
.virtual-keyboard-preview::after {
content: '';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 1.5rem;
background: var(--accent-color, #FFD700);
animation: blink 1s infinite;
}
@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
} .virtual-keyboard-keys {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.virtual-keyboard-row {
display: flex;
gap: 0.5rem;
justify-content: center;
}
.virtual-keyboard-row.accent-row {
margin-top: 0.25rem;
} .virtual-key {
background: var(--primary-fonce, #111111);
border: 2px solid var(--blanc-gris, #ADADAD);
border-radius: 8px;
color: var(--text-color, #ffffff);
font-size: 1.5rem;
font-weight: 400;
padding: 1rem;
min-width: 50px;
height: 60px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
flex: 1;
}
.virtual-key:hover {
background: var(--accent-color, #FFD700);
border-color: var(--accent-color, #FFD700);
color: var(--primary-fonce, #111111);
transform: translateY(-2px);
}
.virtual-key:active {
transform: translateY(0);
} .virtual-key.space {
flex: 4;
}
.virtual-key.backspace,
.virtual-key.shift,
.virtual-key.enter {
flex: 1.5;
}
.virtual-key.tab {
flex: 1.2;
}
.virtual-key.accent {
font-size: 1.2rem;
font-weight: 500;
} .virtual-key.shift.active {
background: var(--accent-color, #FFD700);
border-color: var(--accent-color, #FFD700);
color: var(--primary-fonce, #111111);
} @media (max-width: 1024px) {
.virtual-keyboard-container {
max-width: 700px;
padding: 1.25rem;
}
.virtual-key {
min-width: 40px;
height: 55px;
font-size: 0.95rem;
padding: 0.75rem;
}
.keyboard-icon {
width: 22px;
height: 22px;
}
} @media (max-width: 768px) {
.virtual-keyboard-overlay {
padding: 0.5rem;
align-items: flex-end;
}
.virtual-keyboard-container {
max-width: 100%;
padding: 1rem;
border-radius: 12px 12px 0 0;
}
.virtual-keyboard-header {
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
}
.virtual-keyboard-title {
font-size: 1.1rem;
}
.virtual-keyboard-close {
width: 36px;
height: 36px;
font-size: 20px;
}
.virtual-keyboard-preview {
padding: 0.75rem;
min-height: 50px;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.virtual-keyboard-keys {
gap: 0.4rem;
}
.virtual-keyboard-row {
gap: 0.4rem;
}
.virtual-key {
min-width: 32px;
height: 48px;
font-size: 0.875rem;
padding: 0.5rem;
border-radius: 6px;
}
.virtual-key.backspace,
.virtual-key.shift,
.virtual-key.enter {
font-size: 0.75rem;
}
.virtual-key.accent {
font-size: 0.95rem;
}
.keyboard-icon {
width: 20px;
height: 20px;
right: 12px;
}
} @media (max-width: 480px) {
.virtual-keyboard-container {
padding: 0.75rem;
}
.virtual-keyboard-preview {
font-size: 1rem;
padding: 0.65rem;
min-height: 45px;
}
.virtual-key {
min-width: 28px;
height: 44px;
font-size: 0.8rem;
padding: 0.4rem;
}
.virtual-key.backspace,
.virtual-key.shift,
.virtual-key.enter,
.virtual-key.tab {
font-size: 0.7rem;
}
.virtual-key.accent {
font-size: 0.85rem;
}
}