/* ============================================= J1mmy Portaal – site.css Laad dit NA de Radzen theme CSS in App.razor. ============================================= */ /* ============================================== Lichtmodus (standaard) ============================================== */ :root { --rz-primary: #0C2C65; --rz-primary-light: #1a4a8a; --rz-primary-lighter: #96BFE7; --rz-primary-dark: #061f4a; --rz-primary-darker: #041530; /* Secondary donkerder voor beter contrast op wit */ --rz-secondary: #4a86b8; --rz-secondary-light: #6aa3d4; --rz-secondary-lighter: #c2ddf0; --rz-secondary-dark: #2d6899; --rz-secondary-darker: #1a4f7a; /* Border radius – minder rond */ --rz-border-radius: 5px; /* Eigen portal kleuren */ --jp-bg: #ffffff; --jp-bg-subtle: #f4f7fb; --jp-border: var(--rz-secondary-lighter); --jp-text: #1a1a1a; --jp-text-muted: #4a5568; } /* ============================================== Donkermodus Activeren door class="dark" op of te zetten. Zie dark-mode.js voor implementatie. ============================================== */ .dark { --rz-primary: #0C2C65; --rz-primary-light: #1a4a8a; --rz-primary-lighter: #96BFE7; --rz-primary-dark: #061f4a; --rz-primary-darker: #041530; --rz-secondary: #6aa3d4; --rz-secondary-light: #96BFE7; --rz-secondary-lighter: #1e3a5f; --rz-secondary-dark: #4a86b8; --rz-secondary-darker: #2d6899; --jp-bg: #0f1923; --jp-bg-subtle: #1a2535; --jp-border: #1e3a5f; --jp-text: #e8edf2; --jp-text-muted: #8fafc8; /* Radzen base kleuren overschrijven */ --rz-base-background-color: #0f1923; --rz-text-color: #e8edf2; --rz-white: #1a2535; color-scheme: dark; } /* Body achtergrond dark mode */ .dark body, .dark .rz-body { background-color: #0f1923 !important; } /* E-mail in header beter zichtbaar in dark mode */ .dark .jp-header-email { opacity: 1 !important; color: #c2ddf0 !important; } /* Primary kleur tekst beter leesbaar op donkere achtergrond */ .dark .jp-list-titel, .dark .jp-back-icon, .dark .jp-back-link, .dark .jp-detail-titel, .dark .jp-list-icon { color: #96BFE7 !important; } .dark .rz-color-primary { color: #96BFE7 !important; } /* ============================================= Logo ============================================= */ .jp-panel-logo { height: 90px; width: auto; display: block; } /* ============================================= Login wrapper ============================================= */ .jp-wrapper { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background-color: var(--rz-primary); } .jp-panel { flex: 1; background: var(--jp-bg); display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.25rem 2.5rem; order: 2; } .jp-visual { display: none; } /* Stap badge extra padding */ .rz-badge { padding: 6px 14px !important; } /* Veld wrapper */ .jp-field { margin-bottom: 0.5rem; } /* Debug balk */ .jp-debug-hint { display: flex; align-items: center; gap: 10px; background: var(--rz-warning-lighter); border: 1px dashed var(--rz-warning); border-radius: var(--rz-border-radius); padding: 8px 12px; font-size: 12.5px; color: var(--rz-warning-darker); margin-top: 0.75rem; } .jp-debug-btn { background: var(--rz-warning); border: none; border-radius: var(--rz-border-radius); padding: 4px 10px; font-size: 12px; font-weight: 500; color: #fff; cursor: pointer; font-family: inherit; } /* Visueel paneel orbs */ .jp-visual-orb { position: absolute; border-radius: 50%; background: rgba(150, 191, 231, 0.12); pointer-events: none; } .jp-visual-orb--1 { width: 400px; height: 400px; bottom: -120px; right: -80px; } .jp-visual-orb--2 { width: 220px; height: 220px; top: 60px; right: 40px; background: rgba(150, 191, 231, 0.08); } /* ============================================= 404 / Error pagina ============================================= */ .jp-error-wrapper { min-height: 100vh; min-height: 100dvh; background-color: var(--rz-primary); display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; } .jp-error-card { background: var(--jp-bg); border-radius: 12px; padding: 2.5rem 2.25rem; width: 100%; max-width: 440px; box-shadow: var(--rz-shadow-8); } .jp-error-logo { height: 32px; width: auto; display: block; margin-bottom: 2rem; } .jp-error-code { font-size: 6rem !important; line-height: 1 !important; margin-bottom: 0.5rem; opacity: 0.15; } /* ============================================== Tablet – 640px+ ============================================== */ @media (min-width: 640px) { .jp-wrapper { align-items: center; justify-content: center; padding: 2rem 1.5rem; } .jp-panel { flex: none; width: 100%; max-width: 460px; border-radius: 12px; padding: 2.75rem 2.5rem 2.25rem; order: unset; box-shadow: var(--rz-shadow-8); } } /* ============================================== Desktop – 1024px+ ============================================== */ @media (min-width: 1024px) { .jp-wrapper { flex-direction: row; align-items: stretch; padding: 0; } .jp-visual { display: flex; flex: 1; align-items: center; justify-content: center; background-color: var(--rz-primary); background-image: radial-gradient(circle at 20% 80%, rgba(150,191,231,0.22) 0%, transparent 55%), radial-gradient(circle at 80% 20%, rgba(150,191,231,0.14) 0%, transparent 50%); position: relative; overflow: hidden; order: 1; } .jp-visual-content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 3rem; position: relative; z-index: 1; max-width: 480px; } .jp-panel { flex: none; width: 480px; max-width: none; border-radius: 0; padding: 0 3.5rem; box-shadow: none; order: 2; } } /* ============================================== Groot scherm – 1280px+ ============================================== */ @media (min-width: 1280px) { .jp-panel { width: 520px; padding: 0 4rem; } } /* ============================================== Radzen validatie – rode rand op rz-form-field-content ============================================== */ .jp-field-error .rz-form-field-content { border-color: var(--rz-danger) !important; } /* ============================================== App header (gedeelde layout) ============================================== */ .jp-app-header { height: 60px; background: var(--rz-primary); display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; } .jp-header-left { display: flex; align-items: center; gap: 8px; } /* PWA back button – standaard verborgen */ .jp-ios-back { display: none; color: #ffffff; text-decoration: none; align-items: center; } /* Zichtbaar in PWA standalone modus */ @media (display-mode: standalone) { .jp-ios-back { display: flex; } } .jp-header-logo img { height: 28px; width: auto; filter: brightness(0) invert(1); display: block; } .jp-header-right { display: flex; align-items: center; gap: 8px; } .jp-header-email { display: none; opacity: 0.85; font-size: 14px !important; line-height: 60px !important; margin: 0 !important; } /* RadzenBody padding weghalen op mobiel */ @media (max-width: 639px) { .rz-body { padding: 0 !important; } } /* ============================================== Lijst (orders en uren) – herbruikbare stijlen ============================================== */ .jp-list-container { padding: 0; max-width: 800px; margin: 0 auto; background: var(--jp-bg); height: 100%; } .jp-list-loading { display: flex; justify-content: center; padding: 4rem 0; } .jp-list-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4rem 1rem; gap: 0.5rem; } .jp-list-empty-icon { font-size: 48px !important; color: var(--rz-secondary) !important; margin-bottom: 0.5rem; } .jp-list { display: flex; flex-direction: column; gap: 0; } .jp-list-item-link { text-decoration: none; display: block; color: inherit; } /* Gewijzigd: border-left en transition toegevoegd voor klikbaarheid indicator */ .jp-list-card { cursor: pointer; border-radius: 0 !important; border: none !important; border-bottom: 1px solid var(--jp-border) !important; border-left: 3px solid transparent !important; box-shadow: none !important; padding: 0 !important; background: var(--jp-bg) !important; transition: border-left-color 0.15s, background 0.15s; } /* Gewijzigd: opacity toegevoegd zodat niet-klikbare items subtieler zijn */ .jp-list-card--static { cursor: default; opacity: 0.92; } .jp-list-card--static:hover, .jp-list-card--static:active { background: var(--jp-bg) !important; box-shadow: none !important; transform: none !important; } /* Gewijzigd: border-left-color bij hover als klikbaarheidsindicator */ .jp-list-card:not(.jp-list-card--static):hover { background: var(--jp-bg-subtle) !important; border-left-color: var(--rz-primary) !important; } .jp-list-card:not(.jp-list-card--static):active { background: var(--jp-border) !important; } .jp-list-card-inner { display: flex; align-items: center; gap: 0.75rem; padding: 14px 16px; } .jp-list-icon-wrap { display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: none; } .jp-list-icon { color: var(--rz-primary) !important; font-size: 32px !important; } .jp-list-info { flex: 1; min-width: 0; } .jp-list-titel { color: var(--rz-primary) !important; font-weight: 600 !important; margin: 0 !important; } .jp-list-subtitel { color: var(--jp-text-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; } .jp-list-chevron { color: var(--rz-secondary) !important; font-size: 24px !important; flex-shrink: 0; } /* Detail header – terugknop + titel */ .jp-detail-header { display: flex; align-items: center; gap: 0.25rem; padding: 12px 16px; border-bottom: 1px solid var(--jp-border); } .jp-detail-titel { margin: 0 !important; } .jp-back-link { display: flex; align-items: center; text-decoration: none; color: var(--rz-primary); flex-shrink: 0; } .jp-back-icon { font-size: 24px !important; color: var(--rz-primary) !important; } /* Tablet 640px+ */ @media (min-width: 640px) { .jp-header-email { display: inline; } .jp-app-header { padding: 0 2rem; } .jp-list-container { padding: 1.5rem; } .jp-list { gap: 0.5rem; } .jp-detail-header { padding: 0 0 1rem; border-bottom: none; } /* Gewijzigd: border-left toegevoegd */ .jp-list-card { /* border-radius: var(--rz-border-radius) !important;*/ border-bottom: 1.5px solid var(--jp-border) !important; border-left: 3px solid transparent !important; } /* Gewijzigd: border-left-color en bg-subtle bij hover */ .jp-list-card:not(.jp-list-card--static):hover { box-shadow: var(--rz-shadow-4) !important; background: var(--jp-bg-subtle) !important; transform: translateY(-1px); border-left-color: var(--rz-primary) !important; } } /* Desktop 1024px+ */ @media (min-width: 1024px) { .jp-app-header { padding: 0 2.5rem; } .jp-list-container { padding: 2rem; } } /* ============================================== Uren boeken component ============================================== */ .jp-uren-form { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem; } .jp-uren-samenvatting { display: flex; justify-content: flex-end; padding: 0 0.25rem; margin-top: -0.25rem; } @media (min-width: 640px) { .jp-uren-form { padding: 1.5rem; } } /* ============================================== OrderTicket – subheader en scrollbaar content ============================================== */ .jp-subheader { height: 48px; display: flex; align-items: center; padding: 0 1rem; gap: 0.5rem; background: var(--jp-bg); border-bottom: 1px solid var(--jp-border); flex-shrink: 0; } .jp-subheader-action { margin-left: auto; display: none; } .jp-scroll-content { height: calc(100dvh - 60px - 48px); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--jp-bg); } /* Mobiel: FAB zichtbaar */ @media (max-width: 639px) { .jp-uren-fab-wrapper { display: block; position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; } .jp-uren-fab { border-radius: 50% !important; width: 56px !important; height: 56px !important; padding: 0 !important; min-width: unset !important; box-shadow: var(--rz-shadow-6) !important; } .jp-list { padding-bottom: 6rem; } } /* Tablet/desktop: FAB verborgen, subheader knop zichtbaar */ @media (min-width: 640px) { .jp-uren-fab-wrapper { display: none; } .jp-subheader-action { display: flex; } .jp-subheader { padding: 0 1.5rem; } } @media (min-width: 1024px) { .jp-subheader { padding: 0 2rem; } } /* ============================================== ListItem – acties, overlay en mobiel ============================================== */ /* Wrapper zodat overlay relatief gepositioneerd kan worden */ .jp-list-item-wrapper { position: relative; } /* Actie knoppen rechts in het item */ .jp-list-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; align-self: start; } /* Icoon verbergen op mobiel voor ruimtebesparing */ .jp-list-icon-desktop { display: none; } @media (min-width: 640px) { .jp-list-icon-desktop { display: flex; } } /* Verwijder bevestiging overlay */ .jp-list-delete-overlay { position: absolute; inset: 0; background: rgba(1, 1, 1, 0.82); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; gap: 1rem; border-radius: var(--rz-border-radius); animation: jp-slide-in 0.2s ease; z-index: 10; } .jp-list-delete-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } @keyframes jp-slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } /* Dark mode overlay */ .dark .jp-list-delete-overlay { background: rgba(1, 1, 1, 0.85); } /* ============================================== RadzenDialog stijlen voor uren boeken ============================================== */ @media (max-width: 639px) { .jp-uren-dialog .rz-dialog-wrapper { align-items: flex-end !important; padding: 0 !important; } .jp-uren-dialog .rz-dialog { width: 100vw !important; max-width: 100vw !important; max-height: 95dvh !important; border-radius: 16px 16px 0 0 !important; margin: 0 !important; } } @media (min-width: 640px) { .jp-uren-dialog .rz-dialog { width: min(100vw, 480px) !important; border-radius: 12px !important; } }