/* ---------- Algemene basis ---------- */ * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { min-height: 100vh; background: radial-gradient( circle at top, #3a241b 0%, #201612 45%, #120e0c 100% ); color: #f1e7d8; font-family: Arial, Helvetica, sans-serif; } /* ---------- Algemene formulieren ---------- */ form { display: flex; flex-direction: column; gap: 18px; } form > div:not(#Character) { display: flex; flex-direction: column; gap: 7px; } label { font-size: 0.9rem; font-weight: bold; color: #d8c3a9; } /* ---------- Loginpagina ---------- */ /* index.html heeft:
...
*/ body > section { width: min(420px, calc(100vw - 32px)); margin: 60px auto; padding: 28px; background: #211713; border: 2px solid #68462f; border-radius: 14px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(255, 180, 100, 0.03); } /* ---------- Profilepagina ---------- */ /* Profile.html heeft het form direct onder body. Daarom gebruiken we body > form. */ body > form { width: min(650px, calc(100vw - 32px)); margin: 40px auto; padding: 32px; background: #211713; border: 2px solid #68462f; border-radius: 14px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(255, 180, 100, 0.03); } /* ---------- Inputs ---------- */ input { width: 100%; padding: 11px 12px; background-color: #171311; color: #f3eadf; border: 1px solid #5e4939; border-radius: 5px; font-size: 1rem; } input:focus { outline: none; border-color: #b67843; box-shadow: 0 0 0 2px rgba(182, 120, 67, 0.2); } input:disabled { background-color: #211b18; color: #b9aa99; } /* ---------- Character selector ---------- */ #Character { width: 100%; height: 320px; position: relative; overflow: hidden; background: #181513; border: 1px solid #68462f; border-radius: 10px; } #Character canvas { display: block; width: 100%; height: 100%; } /* ---------- Knoppen ---------- */ button { width: 100%; padding: 12px 16px; background: linear-gradient( #8b4d2f, #67341f ); color: #fff5e7; border: 1px solid #b26e42; border-radius: 5px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; } button:hover { transform: translateY(-1px); background: linear-gradient( #a55c38, #7a3d24 ); } button:active { transform: translateY(1px); } /* ---------- Game canvas ---------- */ body > canvas { display: block; } /* ---------- Tablet / smaller desktop ---------- */ @media (max-width: 700px) { body > section { width: calc(100vw - 24px); margin: 24px auto; padding: 20px; } body > form { width: calc(100vw - 20px); margin: 16px auto; padding: 18px; } #Character { /* Profile.js kan dit gebruiken om de characters onder elkaar te zetten. */ height: 600px; } } /* ---------- Telefoon ---------- */ @media (max-width: 480px) { body > section, body > form { width: calc(100vw - 16px); margin: 8px auto; padding: 14px; } form { gap: 14px; } input, button { /* 16px voorkomt ook dat sommige mobiele browsers automatisch inzoomen op inputs. */ font-size: 16px; } #Character { height: 620px; } } /*Game layout*/ #gameLayout { display: grid; grid-template-columns: 280px 1fr; gap: 12px; width: 100vw; height: 100vh; padding: 12px; } #leftPanel { display: grid; grid-template-rows: auto 1fr 220px; gap: 12px; min-height: 0; } #statsPanel, #inventoryPanel, #chatPanel, #gamePanel { background: #211713; border: 1px solid #68462f; border-radius: 10px; } #statsPanel, #inventoryPanel, #chatPanel, #turnOrderContainer { padding: 14px } #turnPanel { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } #currentTurnBlock { min-width: 260px; padding: 10px 28px; display: flex; flex-direction: column; align-items: center; background: linear-gradient( 180deg, rgba(49, 34, 26, 0.97), rgba(26, 19, 16, 0.97) ); border: 1px solid #9a6842; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), inset 0 0 14px rgba(255, 184, 104, 0.05); } .turnLabel { font-size: 0.7rem; letter-spacing: 0.18rem; color: #9f8068; } #currentTurn { margin-top: 3px; font-size: 1.15rem; font-weight: bold; color: #f3d1a1; } #turnOrderContainer { padding: 7px 14px; background: rgba(23, 18, 15, 0.92); border: 1px solid #5f4432; border-radius: 6px; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4); color: #cdbba5; font-size: 0.85rem; } #gamePanel { position: relative; overflow: hidden; min-width: 0; min-height: 0; } #pixiContainer { width: 100%; height: 100%; }