EduardoDev
/
line-gestao-frontend
mirror of https://github.com/eduardolopesx03/line-gestao-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Shrink Mureg detail modal

This commit is contained in:
Eduardo Lopes 2026-01-22 17:59:34 -03:00
parent 7877ef1ff8
commit 128c573f0a
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/pages/mureg/mureg.scss
View File

@ -280,7 +280,7 @@
.modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9990; backdrop-filter: blur(4px); } .modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9990; backdrop-filter: blur(4px); }
.modal-custom { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9995; padding: 16px; } .modal-custom { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9995; padding: 16px; }
.modal-card { background: #ffffff; border: 1px solid rgba(255,255,255,0.8); border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; display: flex; flex-direction: column; animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); width: min(850px, 100%); max-height: 90vh; } .modal-card { background: #ffffff; border: 1px solid rgba(255,255,255,0.8); border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; display: flex; flex-direction: column; animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); width: min(850px, 100%); max-height: 90vh; }
.modal-card.modal-xl-custom { width: min(980px, 92vw); max-height: 82vh; } .modal-card.modal-xl-custom { width: min(920px, 90vw); max-height: 78vh; }
.modal-card.modal-sm { width: min(480px, 100%); } .modal-card.modal-sm { width: min(480px, 100%); }
@keyframes modalPop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes modalPop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header { padding: 16px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); background: #fff; display: flex; justify-content: space-between; align-items: center; .modal-title { font-size: 1.1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 12px; } .modal-header { padding: 16px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); background: #fff; display: flex; justify-content: space-between; align-items: center; .modal-title { font-size: 1.1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 12px; }
@ -291,7 +291,7 @@
} }
.btn-icon { color: var(--muted); background: transparent; font-size: 1.2rem; border:none; cursor: pointer; &:hover { color: var(--brand); } } .btn-icon { color: var(--muted); background: transparent; font-size: 1.2rem; border:none; cursor: pointer; &:hover { color: var(--brand); } }
} }
.modal-body { padding: 24px; overflow-y: auto; &.bg-light-gray { background-color: #f8f9fa; } } .modal-body { padding: 20px; overflow-y: auto; &.bg-light-gray { background-color: #f8f9fa; } }
/* FORM & DETAILS */ /* FORM & DETAILS */
.details-dashboard { display: grid; grid-template-columns: 1fr; gap: 20px; } .details-dashboard { display: grid; grid-template-columns: 1fr; gap: 20px; }
@ -300,14 +300,14 @@ div.box-header { padding: 10px 16px; font-size: 0.8rem; font-weight: 800; text-t
div.box-body { padding: 16px; } div.box-body { padding: 16px; }
/* INFO GRID (detalhes) */ /* INFO GRID (detalhes) */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0; }
.info-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 10px; background: rgba(245, 245, 247, 0.5); border-radius: 12px; border: 1px solid rgba(0,0,0,0.03); transition: background 0.2s; .info-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5px 8px; background: rgba(245, 245, 247, 0.5); border-radius: 10px; border: 1px solid rgba(0,0,0,0.03); transition: background 0.2s;
&:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } &:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
&.span-2 { grid-column: span 2; } &.span-2 { grid-column: span 2; }
.lbl { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--muted); margin-bottom: 2px; } .lbl { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--muted); margin-bottom: 2px; }
.val { font-size: 0.9rem; font-weight: 700; color: var(--text); word-break: break-word; line-height: 1.2; .val { font-size: 0.85rem; font-weight: 700; color: var(--text); word-break: break-word; line-height: 1.2;
&.fs-4 { font-size: 1.1rem !important; } &.fs-4 { font-size: 1rem !important; }
&.small-text { font-size: 0.75rem; font-family: monospace; } &.small-text { font-size: 0.7rem; font-family: monospace; }
} }
} }