html { }
body { background-color: black; color: lightblue; overflow: hidden; margin: 0; font-size: 12px; padding: 0; }
a,h1,h2,h3,h4,th,hr { color: cyan; margin: 0; }
hr { border-color: #001; }
a { cursor: pointer; text-decoration: none; }
table,th,td { border-width: 0px; vertical-align: top; font-size: 12px; }
td,th { text-align: left; }
th,code,input,select { background-color: #112; }
input,select { color: lightblue; padding-left: 5px; padding-right: 5px; border-radius: 8px; }
ul { margin: 0; }
li { margin-left: -28px; }
button { background-color: black; color: lightblue; padding-left: 15px; padding-right: 15px; border-radius: 8px; cursor: pointer; }
.right { text-align: right; }
.point { cursor: pointer; }
.help { cursor: help; }
.oddCol { color: gray; }
.border { border-width: 1px; }
#divMain { width: 100%; table-layout: fixed; }
#mainTable { width: 100%; }
#mainTableMenu { width: 10%; }
#mainTablePage { position: relative; top: 3px; width: 80%; border-width: 3px; border-style: outset; border-color: #446; overflow: hidden; }
#mainTableRight { width: 10%; }
#popwin { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); display: none; text-align: center; }
#inpopwin { position: relative; top: 10%; background-color: rgba(0, 0, 0, 1); display: inline-block; border-style: outset; border-width: 0.1px; border-color: #001; }
#divGame { position: absolute; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.99); display: none; text-align: center; }
#divMainPage { width: 100%; height: 100%; overflow: hidden; }
#mainChat { background-color: #001; width: 100%; overflow: auto; display: flex; flex-direction: column-reverse; }
#mainChatInput { width: 99%; border-radius: 5px; }
#homeGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 5px;
margin-top: 30px;
padding: 10px;
}
#logGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 5px;
margin-top: 15px;
padding: 5px;
}
/* De basiskaart: overal dezelfde rustige basis */
.grid-item {
min-height: 20px;
background-color: #000;
border: 1px solid #024;
border-radius: 12px;
padding: 5px;
padding-top: 10px;
text-align: center;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
/* De dynamische data lichten we een klein beetje op in jouw lightblue */
.live-data {
color: lightblue;
font-weight: bold;
display: block; /* Zorgt dat lange info netjes op een nieuwe regel start indien nodig */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* Voorkomt dat een lange logregel de knop uit elkaar trekt */
}
/* Hover/Active: Geef ze ALLEMAAL dezelfde subtiele oplichting */
.grid-item:hover, .grid-item:active {
transform: translate(-1px, -2px);
background-color: #000;
box-shadow: -1px -2px 3px 1px rgba(25,150,255,0.4);
}
/* Titels: Geef ze ALLEMAAL dezelfde strakke kleur, bijvoorbeeld lightblue of cyan */
.grid-item h2 {
margin: 0 0 8px 0;
font-size: 1.4em;
color: cyan;
}
.grid-item p {
margin: 0;
font-size: 0.9em;
color: #888 !important; /* Donkergrijs voor de omschrijving */
}
/*-
.grid-icon {
font-size: 2.5em;
display: block;
margin-bottom: 10px;
}
.item-log:hover { border-color: cyan; }
.item-mail:hover { border-color: #4b97ff; }
.item-barcode:hover { border-color: lime; }
.item-games:hover { border-color: darkmagenta; }
.item-chat:hover { border-color: #b58900; }
*/
#logoff,#linkReload,#terug,#terugLog { position: fixed; right: 5px; top: 3px; font-size: 12px; }
#versieNum,#consoleLogOpslag { position: fixed; right: 0; bottom: 0; font-size: 8px; }
#pageEnd { font-size: 6px; color: #001; text-align: center; margin-top: 44px; }
#divRegister, #divLogin, #divRecover { background-color: #003; display: block !important; box-sizing: border-box; padding: 5px; border-radius: 8px; }
/* De hoofd-container die de formulieren positioneert */
.auth-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, 220px) !important;
gap: 25px;
width: 100% !important;
}
.auth-grid > div {
min-width: 0;
width: 100%;
position: relative; /* Voorkomt absolute overlap van kinderen */
}
/* Zorg dat de interne tabellen van de formulieren netjes 100% breed worden */
.auth-grid form {
width: 100%;
display: block;
}
/* barcodeLijst */
/* De UL container */
#ulBarcodeLijst {
padding: 0; /* Forceert het weghalen van de browser-inspring */
margin: 0;
}
/* Een individuele rij */
.barcode-item {
align-items: center;
padding: 3px 10px; /* Iets minder hoogte aangezien de tekst kleiner is */
border-bottom: 1px solid #111122; /* Subtiele scheidingslijn die past bij het blauw */
background: #000011; /* Jouw diepblauwe/zwarte kleur */
cursor: pointer;
}
/* Linkerkant: Alles op 1 regel */
.product-info {
overflow: hidden; /* Voorkomt dat te lange namen de boel oprekken */
}
.product-name {
font-weight: 600;
color: #e0e0e0;
font-size: 10px; /* Jouw gewenste kleine formaat */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Plakt netjes '...' als de naam te lang is */
}
.barcode-number {
font-size: 8px; /* Gelijk aan de normale tekst */
color: #777; /* Iets lichter grijs voor het contrast */
white-space: nowrap;
}
/* Rechterkant: Voorraad badge (Ook compact gemaakt voor 10px stijl) */
.stock-info {
text-align: right;
}
.stock-badge {
background-color: rgba(76, 175, 80, 0.15);
color: #81c784;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px; /* Gelijk getrokken met de rest */
font-weight: 500;
border: 1px solid rgba(76, 175, 80, 0.3);
white-space: nowrap;
}
/* Styling wanneer een product is uitverkocht */
.barcode-item.out-of-stock .stock-badge {
background-color: rgba(244, 67, 54, 0.15);
color: #e57373;
border: 1px solid rgba(244, 67, 54, 0.3);
}
.barcode-item.out-of-stock .product-name {
color: #444; /* Lekker donker zodat je direct ziet wat op is */
}
#barcode-font {
font-family: 'Libre Barcode 128', sans-serif;
font-size: 8px;
color: #ffffff; /* Werkt ook in dark mode */
}