/* =================================================================== UNATU admin — global mobile responsiveness. Loaded on every admin page via UNFOLD["EXTRA_CSS"], so it applies regardless of template-block inheritance (events, corporate wear, EDRMS, community, attendance, default admin). Additive only: every rule is scoped to a max-width media query, so desktop layouts are unchanged. =================================================================== */ /* Tablet & phone: wide result tables scroll inside their own box instead of forcing the whole page to scroll sideways. */ @media (max-width: 1023px) { #content table { max-width: 100%; } #changelist .results, .change-list .results, #result_list_container, .results { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Phone: keep everything inside the viewport. */ @media (max-width: 767px) { /* Header action buttons (Import / Export / Add / Download Template…) wrap to new lines instead of overflowing off the right edge. */ .object-tools, ul.object-tools, .object-tools ul { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100%; margin-left: 0 !important; padding-left: 0 !important; } .object-tools li { margin: 0 !important; float: none !important; } .object-tools li a, .object-tools .utm-btn-header, .object-tools a.utm-btn-header { white-space: normal !important; word-break: break-word; font-size: 12px !important; padding: 8px 12px !important; } /* Search box and filters take the full width and stack. */ #toolbar, #toolbar form, #changelist-search, #changelist-search form { width: 100% !important; box-sizing: border-box; } #changelist-search input[type="text"], #searchbar { width: 100% !important; box-sizing: border-box; } /* Forms: label above field, inputs fill the width. */ .form-row { display: block !important; } .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="url"], .form-row input[type="number"], .form-row input[type="password"], .form-row input[type="date"], .form-row input[type="time"], .form-row input[type="datetime-local"], .form-row textarea, .form-row select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Media never exceeds the screen. */ #content img { max-width: 100%; height: auto; } /* Action / submit button rows wrap. */ .submit-row, .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } } /* =================================================================== Mobile slide-in sidebar. admin_custom.js adds .unatu-show to Unfold's sidebar wrapper and .unatu-sidebar-open to . The wrapper is hidden with display:none on mobile, so we override it here, lift the sidebar above the content, and dim the rest behind a tappable backdrop. =================================================================== */ @media (max-width: 1279px) { .unatu-show { display: block !important; } body.unatu-sidebar-open #nav-sidebar { left: 0 !important; z-index: 90 !important; max-height: 100vh; overflow-y: auto; box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); } #unatu-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 80; display: none; } body.unatu-sidebar-open #unatu-sidebar-backdrop { display: block; } } /* Desktop: never show the fallback backdrop. */ @media (min-width: 1280px) { #unatu-sidebar-backdrop { display: none !important; } } /* =================================================================== Modern polish — change form (create/edit) & changelist (listing). Visual only: targets Unfold's own DOM (fieldset.module, #submit-row button[name="_save"], #result_list). No markup/behaviour changes, reuses the orange primary palette. Applies to every model admin. =================================================================== */ /* --- Change form: fieldsets become elevated "cards" --- */ #content-main fieldset.module { background: #ffffff; border: 1px solid #e7ebf0; border-radius: 16px; padding: 20px 22px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: box-shadow 160ms ease, border-color 160ms ease; } #content-main fieldset.module:focus-within { border-color: #fdba74; box-shadow: 0 8px 26px -10px rgba(234, 88, 12, 0.22); } /* Section header inside a fieldset: add a primary accent bar */ #content-main fieldset.module > h2 { position: relative; padding-left: 16px !important; border-radius: 10px; } #content-main fieldset.module > h2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; min-height: 16px; border-radius: 999px; background: #ea580c; } /* Inputs: soft focus ring in the brand orange */ #content-main input[type="text"]:focus, #content-main input[type="email"]:focus, #content-main input[type="url"]:focus, #content-main input[type="number"]:focus, #content-main input[type="password"]:focus, #content-main input[type="date"]:focus, #content-main input[type="time"]:focus, #content-main input[type="datetime-local"]:focus, #content-main input[type="search"]:focus, #content-main textarea:focus, #content-main select:focus { border-color: #f97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16) !important; outline: none !important; } /* Primary save button: solid brand orange with a subtle depth (name="_save" intact) */ #submit-row button[name="_save"], .submit-row button[name="_save"] { box-shadow: 0 4px 12px -4px rgba(234, 88, 12, 0.4) !important; transition: background-color 140ms ease, box-shadow 140ms ease !important; } #submit-row button[name="_save"]:hover, .submit-row button[name="_save"]:hover { background-color: #c2410c !important; box-shadow: 0 6px 16px -4px rgba(234, 88, 12, 0.45) !important; } /* --- Changelist: modern table treatment --- */ #result_list thead th { font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b !important; } @media (min-width: 1024px) { #result_list thead th { background: #f8fafc; border-bottom: 1px solid #e7ebf0 !important; } /* Row hover tint in the brand orange */ #result_list tbody tr:hover > * { background-color: #fff7ed !important; } } /* "Add" object-tool button: solid brand orange */ .object-tools a.addlink, .object-tools li a[href$="/add/"] { background-color: #ea580c; border-color: transparent; color: #fff; } .object-tools a.addlink:hover, .object-tools li a[href$="/add/"]:hover { background-color: #c2410c; } body.app-edrms.model-mail .select2-selection--multiple .select2-search--inline .select2-search__field { box-sizing: border-box !important; min-width: 12rem !important; width: 12rem !important; height: 32px !important; padding-left: 30px !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 8px center !important; background-size: 16px 16px !important; } /* =================================================================== Recent actions panel — colour the "Recent actions" heading so it reads as a section header instead of plain near-black. Applies on every admin site that shows the widget (main, community, EDRMS). =================================================================== */ #recent-actions-module > h2, #content-related #recent-actions-module h2 { color: #c2410c !important; }