/* responsive.css Shared mobile-responsive layer for the ZEAL EVENTS pages. Loaded AFTER booking.css so these rules override the desktop-oriented ones. Link this from any page that should adapt to small screens. Note: the media / table / form rules are intentionally NOT scoped to #content, because several admin pages (e.g. the Slack user lists) render directly in without a #content wrapper. Only pages that link this file are affected. */ *, *::before, *::after { box-sizing: border-box; } /* Content column flows as a normal block instead of floating off to the side. */ #content { float: none; width: auto; } /* Fluid media: images, avatars, QR codes, the scan canvas and embedded frames scale down to their container and never push the page wider than the screen. max-width always constrains an inline width:NNNpx, so no !important needed. */ img, canvas, iframe { max-width: 100%; } img, canvas { height: auto; } /* Data tables can be wide (admin lists with many columns). Let them scroll horizontally instead of overflowing the page or being squished unreadably. display:block turns the table itself into its own horizontal scroll box. */ table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Form fields never exceed the viewport (several use fixed pixel widths inline). */ input, select, textarea { max-width: 100%; } /* Info / session cards shrink on narrow screens instead of forcing a min width. `.ofm-card` is the original name; `.card` is the generic alias for other pages. */ .ofm-card, .card { min-width: 0; width: 100%; max-width: 500px; } /* Full-width tap targets on phones, capped on larger screens. More specific than booking.css `button { width:310px }`, so it wins. */ #content button, #content .button { width: 100%; max-width: 340px; } /* The manual check-in autocomplete field already uses width:100%; keep its dropdown and clear button aligned within a fluid wrapper. */ #autocomplete-wrapper { max-width: 500px; } /* ========================================================================= Dark-mode-aware semantic surfaces. These replace inline colours that were invisible in dark mode (a light-gray card, black emphasis text). Each class carries its own light + dark values, so both states live together here. Dark mode is triggered by the global html[data-theme="dark"] attribute set from navigation.php. ========================================================================= */ /* Light-gray info/detail card (was inline `background-color: lightgray`). */ .note-card { background-color: #d3d3d3; /* == the old inline `lightgray` */ } html[data-theme="dark"] .note-card { background-color: #1f1f1f; color: #e6e6e6; } /* Emphasised inline text such as a user name (was inline `color:black`). */ .text-highlight { color: #000; } html[data-theme="dark"] .text-highlight { color: #e6e6e6; } /* ========================================================================= Per-day agenda tabs (one tab per event day; the bar is hidden when the event lasts a single day). Shared by my_agenda.php and ofm_check_in.php. The button rules are scoped under #content so they beat the generic booking.css / responsive.css `button` sizing. Pages with more than one tab set should wrap each set in .agenda-tabgroup so the switching JS can scope to it. Dark-mode variants key off the global html[data-theme="dark"] set by navigation.php. */ .agenda-tabs { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 2px solid #006184; margin-bottom: 20px; } #content .agenda-tab { flex: 0 0 auto; margin: 0; width: auto; max-width: none; height: auto; padding: 8px 16px; border: 0; border-radius: 6px 6px 0 0; background: #f0f0f0; color: #006184; font-weight: bold; font-size: 15px; line-height: 1.2; text-align: center; cursor: pointer; white-space: nowrap; } #content .agenda-tab .agenda-tab-date { display: block; font-size: 12px; font-weight: normal; opacity: 0.85; margin-top: 2px; } #content .agenda-tab--active { background: #006184; color: #fff; } .agenda-panel { display: none; } .agenda-panel--active { display: block; } .agenda-empty { font-style: italic; color: gray; } html[data-theme="dark"] .agenda-tabs { border-bottom-color: #3a6f82; } html[data-theme="dark"] #content .agenda-tab { background: #1f1f1f; color: #4db8d8; } html[data-theme="dark"] #content .agenda-tab--active { background: #006184; color: #fff; } html[data-theme="dark"] .agenda-empty { color: #b0b0b0; } @media (max-width: 480px) { #content { padding-left: 10px; padding-right: 10px; margin-left: 0; margin-right: 0; } #content h2 { font-size: 1.4rem; } }