/* --- IKON DEFINÍCIÓK (CSS VÁLTOZÓK) --- */
:root {
--icon-hamburger: url('data:image/svg+xml,');
--icon-trash: url('data:image/svg+xml,');
--icon-torch: url('data:image/svg+xml,');
--icon-send: url('data:image/svg+xml,');
--icon-barcode-scan: url('data:image/svg+xml,');
--icon-backspace: url('data:image/svg+xml,');
--icon-library: url('data:image/svg+xml,');
--icon-add-library: url('data:image/svg+xml,');
--icon-ok: url('data:image/svg+xml,');
--icon-cancel: url('data:image/svg+xml,');
--icon-fullscreen: url('data:image/svg+xml,');
--icon-zoom-out: url('data:image/svg+xml,');
--icon-zoom-in: url('data:image/svg+xml,');
--icon-camera-switch: url('data:image/svg+xml,');
--icon-user-switch: url('data:image/svg+xml,');
}
/* --- IKON DEFINÍCIÓK VÉGE --- */
/* --- CHANGELOG --- */
/* 2025-10-01 14:09:52 - CSS frissítése a Keypad új elrendezéséhez. A felső Mégse és OK gombok flex arányainak beállítása (0.7:2.9). */
/* --- CHANGELOG VÉGE --- */
/* --- ÚJ IKON OSZTÁLYOK --- */
.icon {
display: block;
width: 100%;
height: 100%;
background-color: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
.icon-hamburger { mask-image: var(--icon-hamburger); }
.icon-trash { mask-image: var(--icon-trash); }
.icon-torch { mask-image: var(--icon-torch); }
.icon-send { mask-image: var(--icon-send); }
.icon-barcode-scan { mask-image: var(--icon-barcode-scan); }
.icon-backspace { mask-image: var(--icon-backspace); }
.icon-library { mask-image: var(--icon-library); }
.icon-add-library { mask-image: var(--icon-add-library); }
.icon-ok { mask-image: var(--icon-ok); }
.icon-cancel { mask-image: var(--icon-cancel); }
.icon-fullscreen { mask-image: var(--icon-fullscreen); }
.icon-zoom-out { mask-image: var(--icon-zoom-out); }
.icon-zoom-in { mask-image: var(--icon-zoom-in); }
.icon-camera-switch { mask-image: var(--icon-camera-switch); }
.icon-user-switch { mask-image: var(--icon-user-switch); }
/* --- EREDETI, MEGLÉVŐ STÍLUSOK (MÓDOSÍTÁSOKKAL) --- */
/* Alap stílusok */
html, body { height: 100%; margin: 0; }
body {
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
background-color: #000000;
padding: 1rem;
box-sizing: border-box;
font-size: 1em; /* Alapértelmezett betűméret */
line-height: 1.5;
}
#video-container { position: relative; width: 95%; padding-top: 56.25%; margin-bottom: 1rem; margin-left: auto; margin-right: auto; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1); background-color: #1f2937; transition: opacity 0.3s ease-in-out; flex-shrink: 0; }
video { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;}
#message-overlay {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
color: #f3f4f6; padding: 1rem; z-index: 10;
background-color: rgba(0, 0, 0, 0.5); opacity: 1;
transition: opacity 0.3s ease-in-out; white-space: pre-line;
font-size: 1.5rem; /* Üzenet mérete marad */
line-height: 1.5;
}
#message-overlay.hidden { opacity: 0; pointer-events: none; }
#message-overlay.error { color: #f87171; }
#message-overlay.success { color: #4ade80; }
#message-overlay.info { color: #60a5fa; }
.crosshair-line { background-color: red; opacity: 0.75; position: absolute; z-index: 20; }
.crosshair-line-h { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.crosshair-line-v { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }
#canvas { display: none; }
#keypad-container { flex-shrink: 0; }
/* --- Gomb Egységesítés --- */
.btn-base {
display: flex; justify-content: center; align-items: center;
height: 60px; transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
touch-action: manipulation; font-weight: 700; border: none; cursor: pointer;
}
.btn-style-default {
padding: 0.5rem 0.75rem; border-radius: 0.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
color: white; font-size: 1rem;
}
/* Keypad digit gombok speciális stílusa */
.btn-keypad-digit {
font-size: 1.25rem; /* text-xl */
line-height: 1.75rem;
}
/* Keypad OK/Mégse/Törlés gombok speciális stílusa (nagyobb padding) */
.btn-keypad-special { padding-top: 0.75rem; padding-bottom: 0.75rem; }
/* MÓDOSÍTÁS: Az SVG szabály helyett az .icon elem méretezése */
.btn-icon-std .icon {
height: 2rem;
width: 2rem;
}
/* --- Gomb Egységesítés Vége --- */
/* Keypad új elrendezés (A Tailwind flex segédosztályai a gap-et már kezelik) */
#keypad-cancel-button {
flex: 0.33; /* A piros Mégse gomb mérete (kb. 1/4) */
}
#keypad-ok-button {
flex: 0.78; /* A zöld OK gomb mérete (kb. 3/4) */
}
/* Aktív állapotok */
#torch-button.torch-on { background-color: #facc15 !important; color: #1f2937 !important; border-color: #facc15; }
#torch-button.torch-on:hover { background-color: #fcd34d !important; }
#submenu-fullscreen-button.fullscreen-on { background-color: #facc15 !important; color: #1f2937 !important; }
#submenu-fullscreen-button.fullscreen-on:hover { background-color: #fcd34d !important; }
/* Konténerek háttere */
#keypad-container, #control-button-grid, #function-submenu-grid { background-color: #4b5563; }
/* Előzmények */
#scan-history-container { background-color: #374151; color: #f3f4f6; overflow-y: auto; overflow-x: hidden; border-radius: 0.5rem; padding: 1rem; width: 95%; margin: 0 auto 1rem auto; }
/* Lista elemek stílusai */
#scan-history-list li {
border-bottom: 1px solid #4b5563; padding: 0.5rem 0.25rem;
word-break: break-all; cursor: pointer; transition: background-color 0.2s ease;
font-size: 1.5em; /* Csökkentettük az eredeti 1.5em-ről */
line-height: 1.4;
}
/* Dátum kijelzés stílusa a listában */
#scan-history-list li .list-meta {
display: block; /* Új sorba törés */
font-size: 0.85em; /* Kisebb betűméret */
color: #9ca3af; /* Tailwind gray-400 */
margin-top: 0.25rem; /* Kis térköz felette */
}
#scan-history-list li:last-child { border-bottom: none; }
#scan-history-list li:nth-child(even) { background-color: #4B5563; }
#scan-history-list li:hover:not(.selected-history-item) { background-color: #6B7280; }
#scan-history-list li.selected-history-item { background-color: #facc15; color: #1f2937; }
#scan-history-list li.selected-history-item .list-meta { color: #4b5563; } /* Sötétebb dátum sárga háttéren */
/* --- JAVÍTOTT Dinamikus Gomb Elrendezés (Vissza Gomb) --- */
/* A Vissza és Beolvasás gombokat tartalmazó flex konténer */
#capture-button-wrapper {
display: flex;
gap: 0.5rem;
width: 100%;
}
/* A Vissza gomb alapértelmezetten rejtett */
#control-back-button {
display: none;
}
/* A Beolvasás gomb alapértelmezetten teljes szélességű */
#capture-button {
flex: 1 1 100%;
width: 100%;
}
/* AMIKOR A VISSZA GOMB SZÜKSÉGES: */
/* A szülő konténer .has-back-button osztályt kap a JS-től */
/* A Vissza gomb megjelenítése */
#control-button-grid.has-back-button #control-back-button {
display: flex;
flex: 0.7; /* Beállítjuk az arányt (kb. 1/4) */
}
/* A Beolvasás gomb méretének csökkentése */
#control-button-grid.has-back-button #capture-button {
flex: 2.9; /* Beállítjuk az arányt (kb. 3/4) */
}