<- wrapper, alterna a exibição *

<- overlay *

<- painel, irmão do overlay * * Um modal novo que siga esse contrato já nasce com fundo, borda, raio, faixa * de identidade, centralização e estilo de formulário — sem CSS próprio. */ [aria-hidden="true"]:has(> .panel) { display: none; } [aria-hidden="false"]:has(> .panel) { display: block; } .fixed:has(+ .panel), .fixed:has(> .panel) { background: var(--ui-scrim) !important; backdrop-filter: blur(7px); } .panel { background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-lg) !important; box-shadow: var(--ui-shadow-lg) !important; } .panel::before { background: var(--ui-brand-gradient); content: ""; display: block; height: 4px; } /* Painel irmão do overlay: centralizado na viewport. */ .fixed + .panel { left: 50%; max-height: calc(100vh - 32px); overflow: auto; position: fixed; top: 50%; transform: translate(-50%, -50%); /* Modal mais largo = uma linha só, sobrescrevendo --ui-modal-width. */ width: min(var(--ui-modal-width, 520px), calc(100vw - 32px)); z-index: 60; } .fixed + .panel > div { padding: 24px !important; } .panel .text-xl { color: var(--ui-ink) !important; font-size: 19px !important; letter-spacing: -.02em; } .panel .leading-relaxed { color: var(--ui-muted) !important; font-size: 12px !important; } .panel label { color: var(--ui-ink) !important; display: block; font-size: 12px !important; font-weight: 680 !important; margin-bottom: 7px; } .panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .panel select, .panel textarea, .panel trix-editor, .panel .select2-selection { background: var(--ui-surface-soft) !important; border-color: var(--ui-border) !important; border-radius: var(--ui-radius-sm) !important; box-shadow: none !important; color: var(--ui-ink) !important; font-size: 12px !important; min-height: 42px; width: 100%; } .panel input:focus, .panel select:focus, .panel textarea:focus { border-color: var(--ui-focus-border) !important; box-shadow: var(--ui-focus-ring) !important; outline: none; } .panel button { border-radius: var(--ui-radius-sm) !important; min-height: 40px; } .panel button[type="submit"] { background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-deep)) !important; box-shadow: 0 8px 18px rgba(21, 94, 239, .2); color: #fff !important; padding-left: 18px !important; padding-right: 18px !important; } .panel button[type="button"] { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; } /* * Botões extras do admin (``actions_list``/``actions_detail`` do Unfold). * As classes-âncora vêm dos overrides de ``unfold/helpers/tab_actions.html`` * e ``unfold/helpers/tab_action.html``. */ .ui-actions { gap: 8px; } /* Geometria vale para todos os botões, inclusive os de variante colorida. */ .ui-actions .ui-action { border-radius: var(--ui-radius-sm) !important; box-shadow: var(--ui-shadow-sm); margin: 0 !important; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, color .15s ease; } .ui-actions .ui-action > a { font-size: 13px; font-weight: 600; min-height: 38px; } .ui-actions .ui-action .material-symbols-outlined { font-size: 18px; } /* * Superfície e cor só na variante padrão. As variantes do Unfold * (``ActionVariant.INFO``, ``SUCCESS``, …) trazem ``bg-*`` + ``text-white`` e * precisam manter o próprio fundo — daí o ``:not([class*="bg-"])``. */ .ui-actions .ui-action:not([class*="bg-"]) { background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; } .ui-actions .ui-action:not([class*="bg-"]) > a { color: var(--ui-text) !important; } .ui-actions .ui-action:not([class*="bg-"]) .material-symbols-outlined { color: var(--ui-muted); } .ui-actions .ui-action:not([class*="bg-"]):hover { border-color: var(--ui-primary) !important; box-shadow: var(--ui-shadow-md); } .ui-actions .ui-action:not([class*="bg-"]):hover > a, .ui-actions .ui-action:not([class*="bg-"]):hover .material-symbols-outlined { color: var(--ui-primary) !important; } /* * Barra de ações em massa da listagem. O container do Unfold traz ``text-white``, * por isso a faixa continua escura (gradiente da marca) — trocar por superfície * clara deixaria o texto branco ilegível. */ #changelist-actions > div { background: linear-gradient(100deg, var(--ui-primary), var(--ui-primary-deep) 58%, var(--ui-violet)) !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: var(--ui-radius-md) !important; box-shadow: 0 12px 28px rgba(21, 94, 239, .22) !important; padding: 7px 9px; } #changelist-actions select { border-radius: var(--ui-radius-xs) !important; min-height: 32px; } #changelist-actions button { background: rgba(9, 24, 65, .46) !important; border-radius: var(--ui-radius-xs) !important; min-height: 32px; } /* Rodapé de salvamento, presente em todo changeform. */ #submit-row > div { background: var(--ui-veil) !important; border-color: var(--ui-border) !important; backdrop-filter: blur(16px); } #submit-row button, #submit-row a { border-radius: var(--ui-radius-sm) !important; min-height: 40px; } /* * Telas sem listagem nem formulário (confirmação de exclusão, troca de senha, * índice de app, views customizadas). O Unfold as monta com utilitários * Tailwind; aqui só alinhamos superfície, borda e raio ao restante. */ #content .aligned fieldset, .delete-confirmation #content ul, .app-index #content .rounded-default { border-color: var(--ui-border); } /* Tela de login (fora de ``admin/base_site.html``). */ body.login #page { background: var(--ui-bg); } body.login form { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-md); padding: 24px; position: relative; } body.login form::before { background: var(--ui-brand-gradient); border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; content: ""; height: 4px; left: 0; position: absolute; right: 0; top: 0; } body.login form label { color: var(--ui-ink); font-size: 12px; font-weight: 680; } body.login form input:not([type="checkbox"]) { background: var(--ui-surface-soft) !important; border-color: var(--ui-border) !important; border-radius: var(--ui-radius-sm) !important; color: var(--ui-ink) !important; min-height: 42px; } body.login form input:focus { border-color: var(--ui-focus-border) !important; box-shadow: var(--ui-focus-ring) !important; outline: none; } body.login form button[type="submit"] { background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-deep)) !important; border-radius: var(--ui-radius-sm) !important; box-shadow: 0 8px 18px rgba(21, 94, 239, .2); min-height: 42px; } body.login form .password-reset-link { border-radius: var(--ui-radius-sm) !important; color: var(--ui-muted) !important; font-size: 12px; }