/* ============================================================================ crud.css (modal) — modal de edicao dos quatro cadastros (runtime/src/DemoCrud.pas, classe TDemoCrudModal). Prefixo de classes: `crud`. O TDemoModal monta .crud-overlay > .crud-dialog > .crud-head (.crud-title/.crud-close) > .crud-body > (BodyHtml) > .crud-acoes > (FooterHtml) e poe/tira `.crud-open` no para travar o scroll do fundo. O TDemoForm monta, dentro do body: .crud-form > .crud-field.crud-field--sN > .floating-field .crud-checkrow (corrida de campos logicos) > .crud-checkwrap > .crud-check .crud-input-group / .crud-input-btn (campo com botao colado) .crud-radiogrid / .crud-radio(.crud-radio--on) (grupo de escolha unica) Adaptado de css/modals/usuario-site.css do D2SCI. ============================================================================ */ .crud-open { overflow: hidden; } .crud-overlay { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(15, 18, 24, .55); backdrop-filter: blur(2px); } .crud-overlay.is-open { display: flex; } .crud-dialog { width: min(880px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg, .9rem); box-shadow: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, .35)); overflow: hidden; } .crud-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--card-border); } .crud-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; } .crud-close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; border-radius: var(--radius, .5rem); background: transparent; color: var(--text-muted); cursor: pointer; } .crud-close:hover { background: var(--primary-soft, rgba(0, 0, 0, .05)); color: var(--text); } .crud-body { padding: 1.15rem; overflow-y: auto; } /* Mensagem de erro/sucesso do modal. O runtime alterna a classe `erro`. */ .crud-status { margin: 0 0 .9rem; padding: .55rem .8rem; border-radius: var(--radius, .5rem); font-size: .8rem; font-weight: 600; background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); } .crud-status.erro { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); } /* ---- Grade de campos ---- */ .crud-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem .9rem; } .crud-field { min-width: 0; } .crud-field--s1 { grid-column: span 1; } .crud-field--s2 { grid-column: span 2; } .crud-field--s3 { grid-column: 1 / -1; } /* Campo so-leitura (o codigo): readonly, nunca disabled — campo disabled fica ilegivel nos temas de --card-bg translucido. */ .crud-form input.floating-input:read-only { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-muted); cursor: default; } /* ---- Campo com botao colado (lupa de consulta, etc.) ---- */ .crud-input-group { display: flex; align-items: stretch; gap: .4rem; } .crud-input-group .floating-field { flex: 1; } .crud-input-btn { flex-shrink: 0; width: 2.6rem; border: 1px solid var(--card-border); border-radius: var(--radius, .5rem); background: transparent; color: var(--text-muted); cursor: pointer; } .crud-input-btn:hover { border-color: var(--primary); color: var(--primary); } /* ---- Campos logicos ---- */ .crud-checkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding-top: .35rem; } .crud-checkwrap { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; padding: 0; font: inherit; font-size: .82rem; font-weight: 600; color: var(--text); cursor: pointer; user-select: none; } .crud-check { pointer-events: none; /* so desenho: o estado vive no runtime */ accent-color: var(--primary); width: auto; } /* ---- Grupo de escolha unica (fkRadio) ---- */ .crud-radiogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; } .crud-radio { display: flex; align-items: center; gap: .5rem; text-align: left; border: 1px solid var(--card-border); border-radius: var(--radius, .5rem); background: transparent; color: var(--text); padding: .5rem .65rem; font: inherit; font-size: .78rem; cursor: pointer; } .crud-radio:hover { border-color: var(--primary); } .crud-radio--on { border-color: var(--primary); background: var(--primary-soft, rgba(0, 0, 0, .04)); } .crud-radio-dot { pointer-events: none; accent-color: var(--primary); } .crud-radio-txt { display: flex; align-items: center; gap: .45rem; min-width: 0; } .crud-radio-cod { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary); } .crud-radio-lbl { overflow: hidden; text-overflow: ellipsis; } /* ---- Rodape ---- */ .crud-acoes { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .85rem 1.15rem; border-top: 1px solid var(--card-border); background: color-mix(in srgb, var(--text) 3%, transparent); } .crud-btn { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--card-border); border-radius: var(--radius, .5rem); background: var(--card-bg); color: var(--text); padding: .5rem .9rem; font-size: .8rem; font-weight: 700; cursor: pointer; } .crud-btn:hover { border-color: var(--primary); color: var(--primary); } .crud-btn-primary { border-color: var(--primary); background: var(--primary); color: var(--primary-contrast, #1a1a1a); } .crud-btn-primary:hover { filter: brightness(1.08); color: var(--primary-contrast, #1a1a1a); } .crud-btn-danger { border-color: var(--danger); color: var(--danger); } .crud-btn-danger:hover { background: var(--danger); color: #fff; } @media (max-width: 720px) { .crud-form { grid-template-columns: minmax(0, 1fr); } .crud-field--s1, .crud-field--s2, .crud-field--s3 { grid-column: 1 / -1; } .crud-acoes { flex-wrap: wrap; } .crud-acoes .crud-btn { flex: 1 1 auto; justify-content: center; } }