/* * Top action cluster on every maintenance change form * (admin/maintenance/_form_action_bar.html, built by FormActionBarMixin). * * User decision 2026-07-27, extending the 2026-07-23 rule from the request * form to all of them: every action is a labelled, finger-sized button in ONE * row above the fields — no icon-only "⋯" in the header, no submenu inside it, * and no Save stranded at the bottom of the page. * * Written as plain CSS on purpose. Unfold ships a PRECOMPILED Tailwind sheet * holding only the utilities it uses itself; it has no green/red button set and * no `sm:`-tier sizing utilities for this shape. Colours come from Unfold's own * CSS variables so light and dark stay in step with the rest of the admin. * * Scope: `body.app-maintenance.change-form`. The `maint-actionbar` body class * (set by admin/maintenance/change_form.html, and ONLY when the page is not a * `?_popup=1` frame) is what hides the native footer submit-row — the child * forms opened in the reqPopup iframe keep their footer, which is the only way * they can save. * * Sizing mirrors the changelist toolbar (changelist-mobile.css §5): 44px tall, * share the row and wrap on phones, shrink to content from 1024px up. */ body.app-maintenance.change-form .maint-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } body.app-maintenance.change-form .maint-act { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--color-base-200); border-radius: 6px; background: #fff; color: var(--color-base-700); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; } body.app-maintenance.change-form .maint-act:hover { background: var(--color-base-50); } body.app-maintenance.change-form .maint-act .material-symbols-outlined { font-size: 20px; flex: none; } /* Forward step in the workflow (Gửi / Bắt đầu / Hoàn thành / Duyệt / Sinh * lịch). Green, not the brand purple: purple is already the colour of every * neutral primary button in the admin, and "this moves the record forward" * deserves its own signal. */ body.app-maintenance.change-form .maint-act--send { background: var(--color-green-600, #16a34a); border-color: var(--color-green-700, #15803d); color: #fff; } body.app-maintenance.change-form .maint-act--send:hover { background: var(--color-green-700, #15803d); } /* Save: neutral fill, GREEN BORDER (user request 2026-07-27). It is not a * workflow step, so it does not earn the solid green of a forward button — but * it is the button pressed most often, so the outline picks it out of the row of * neutral tools. Label and icon stay neutral. */ body.app-maintenance.change-form .maint-act--save { border-color: var(--color-green-600, #16a34a); } /* Destructive (Loại bỏ / Hủy / Từ chối / Xóa): red text on a white ground, so * it reads as dangerous without competing with the forward button for * attention. */ body.app-maintenance.change-form .maint-act--danger { color: var(--color-red-600, #dc2626); border-color: var(--color-red-200, #fecaca); } body.app-maintenance.change-form .maint-act--danger:hover { background: var(--color-red-50, #fef2f2); } /* Dark theme — Unfold stamps `.dark` on the element, so the descendant * form is the only shape that can match. */ .dark body.app-maintenance.change-form .maint-act { background: var(--color-base-900); border-color: var(--color-base-700); color: var(--color-base-200); } .dark body.app-maintenance.change-form .maint-act:hover { background: var(--color-base-800); } .dark body.app-maintenance.change-form .maint-act--send { background: var(--color-green-600, #16a34a); border-color: var(--color-green-500, #22c55e); color: #fff; } .dark body.app-maintenance.change-form .maint-act--send:hover { background: var(--color-green-700, #15803d); } .dark body.app-maintenance.change-form .maint-act--save { border-color: var(--color-green-500, #22c55e); } .dark body.app-maintenance.change-form .maint-act--danger { background: var(--color-base-900); border-color: var(--color-red-500, #ef4444); color: var(--color-red-400, #f87171); } @media (min-width: 1024px) { body.app-maintenance.change-form .maint-act { flex: 0 0 auto; } } /* Save moved into the cluster above, so the native footer row would only * duplicate it. Never applied to a `?_popup=1` frame — see the header comment. */ body.app-maintenance.change-form.maint-actionbar #submit-row { display: none; }