65 lines
7.0 KiB
CSS
65 lines
7.0 KiB
CSS
/* =====================================================================
|
|
NetMonster Admin - Theme commun
|
|
===================================================================== */
|
|
:root {
|
|
--bg: #eef1f6; --surface: #ffffff; --surface-alt: #f7f9fc;
|
|
--border: #e2e6ef; --text: #1c2333; --text-muted: #6b7386;
|
|
--primary: #2f5fe0; --primary-dark: #2447b3;
|
|
--success: #1f9d55; --success-dark: #17803f;
|
|
--danger: #e0392f; --danger-dark: #b82c24;
|
|
--warning: #f0a500; --radius: 12px; --radius-sm: 8px;
|
|
--shadow: 0 1px 3px rgba(20,25,40,.06), 0 8px 20px rgba(20,25,40,.04);
|
|
--font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { font-family: var(--font); background: var(--bg); color: var(--text); margin: 0; }
|
|
.page-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 2rem 4rem; }
|
|
.topbar { display:flex; align-items:center; justify-content:space-between; background:var(--surface); border-bottom:1px solid var(--border); padding:.9rem 2rem; margin-bottom:2rem; }
|
|
.topbar .brand { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.05rem; }
|
|
.topbar .brand .dot, .brand .dot { width:10px; height:10px; border-radius:50%; background:var(--primary); display:inline-block; }
|
|
.topbar nav { display:flex; gap:1.4rem; }
|
|
.topbar nav a { color:var(--text-muted); text-decoration:none; font-size:.88rem; font-weight:500; padding:.4rem .2rem; border-bottom:2px solid transparent; }
|
|
.topbar nav a.active, .topbar nav a:hover { color:var(--primary); border-bottom-color:var(--primary); }
|
|
.topbar .user { font-size:.82rem; color:var(--text-muted); }
|
|
h1 { font-size:1.5rem; font-weight:700; margin:0 0 .3rem; }
|
|
.page-subtitle { color:var(--text-muted); margin:0 0 1.5rem; font-size:.92rem; }
|
|
.card, section, .group-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem 1.4rem; margin-bottom:1.4rem; box-shadow:var(--shadow); }
|
|
.card h2, section h2 { margin-top:0; font-size:1.02rem; }
|
|
#map { height:440px; width:100%; border-radius:var(--radius); border:1px solid var(--border); margin-bottom:1.2rem; overflow:hidden; }
|
|
.map-controls { display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--text-muted); margin-bottom:.8rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .9rem; width:fit-content; }
|
|
.map-controls.disabled { opacity:.6; }
|
|
.filters { display:flex; gap:.6rem; margin-bottom:1.4rem; flex-wrap:wrap; }
|
|
.filters select, .filters input { padding:.5rem .8rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:.85rem; }
|
|
.group-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; flex-wrap:wrap; gap:.5rem; }
|
|
.group-header h3 { margin:0; font-size:.98rem; font-weight:600; }
|
|
.badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.72rem; font-weight:600; }
|
|
.badge-dup { background:#fdeceb; color:var(--danger-dark); } .badge-info { background:#eaf0fe; color:var(--primary-dark); }
|
|
table { width:100%; border-collapse:collapse; }
|
|
table.cells-table, table.data-table { margin-bottom:1rem; }
|
|
table.cells-table th, table.cells-table td, table.data-table th, table.data-table td { padding:.55rem .7rem; border-bottom:1px solid var(--border); font-size:.85rem; text-align:left; }
|
|
table.cells-table th, table.data-table th { background:var(--surface-alt); color:var(--text-muted); font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.03em; }
|
|
table.cells-table tr:hover, table.data-table tr:hover { background:var(--surface-alt); }
|
|
button, .btn { font-family:inherit; font-size:.85rem; font-weight:600; border:none; border-radius:var(--radius-sm); padding:.55rem 1rem; cursor:pointer; transition:filter .15s ease, transform .05s ease; }
|
|
button:active, .btn:active { transform:scale(.98); }
|
|
button.validate, .btn-success { background:var(--success); color:#fff; } button.validate:hover, .btn-success:hover { background:var(--success-dark); }
|
|
button.add-missing, .btn-warning { background:var(--warning); color:#22252c; }
|
|
button.reject, button.reject-small, .btn-danger { background:var(--danger); color:#fff; }
|
|
button.reject-small { padding:.2rem .5rem; font-size:.72rem; } button.reject:hover, button.reject-small:hover { background:var(--danger-dark); }
|
|
button.primary, .btn-primary { background:var(--primary); color:#fff; } button.primary:hover, .btn-primary:hover { background:var(--primary-dark); }
|
|
button.link-btn { background:none; border:none; color:var(--primary); text-decoration:underline; font-size:.8rem; padding:0; font-weight:500; }
|
|
.actions-row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
|
|
fieldset { border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.2rem 1.2rem; margin-bottom:1.4rem; }
|
|
legend { font-weight:700; font-size:.85rem; color:var(--text-muted); padding:0 .4rem; text-transform:uppercase; letter-spacing:.03em; }
|
|
label { display:block; font-size:.8rem; color:var(--text-muted); margin-bottom:.25rem; margin-top:.6rem; font-weight:500; }
|
|
input, select, textarea { width:100%; padding:.55rem .7rem; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.88rem; font-family:inherit; background:var(--surface); color:var(--text); }
|
|
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,95,224,.12); }
|
|
.form-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:.9rem; }.form-grid.wide-3 { grid-template-columns:repeat(3, 1fr); }.full-width { grid-column:1 / -1; }
|
|
.missing-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:.7rem; }
|
|
.missing-form { display:none; margin-top:.9rem; padding:1rem; background:#fff9ea; border:1px solid #f5e2a8; border-radius:var(--radius); }
|
|
.msg-ok, .msg-err { padding:.7rem 1rem; border-radius:var(--radius-sm); margin-bottom:1.2rem; font-size:.88rem; font-weight:500; }
|
|
.msg-ok { background:#e8f7ee; color:var(--success-dark); border:1px solid #b8e6c8; }.msg-err { background:#fdeceb; color:var(--danger-dark); border:1px solid #f3c1bd; }
|
|
.cadastre-badge { background:#eaf0fe; color:var(--primary-dark); padding:.15rem .5rem; border-radius:999px; font-size:.7rem; font-weight:600; }.no-cadastre { color:var(--text-muted); font-size:.75rem; font-style:italic; }
|
|
.stats-bar { display:flex; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }.stat-chip { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.7rem 1rem; font-size:.85rem; color:var(--text-muted); }.stat-chip strong { color:var(--text); font-size:1.1rem; display:block; }
|
|
details.help { margin-top:.7rem; font-size:.8rem; color:var(--text-muted); background:var(--surface-alt); padding:.6rem .9rem; border-radius:var(--radius-sm); }
|
|
@media (max-width: 800px) { .topbar { padding:.8rem 1rem; flex-wrap:wrap; gap:.7rem; }.topbar nav { order:3; width:100%; gap:1rem; }.page-wrap { padding:1.2rem 1rem 3rem; }.form-grid, .form-grid.wide-3, .missing-grid { grid-template-columns:1fr; } table { display:block; overflow-x:auto; } }
|