From 7d94fcbc8c94e7c812babb72b6f7486b6b63733c Mon Sep 17 00:00:00 2001 From: numex-admin Date: Thu, 10 Sep 2026 08:58:50 +0000 Subject: [PATCH] =?UTF-8?q?Numex=20yay=C4=B1n:=20public/css/style.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/style.css | 249 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 249 insertions(+) create mode 100644 public/css/style.css diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..f5d741d --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,249 @@ +/* ============ Envanter Yönetim Sistemi — Stil ============ */ +:root { + --primary: #2563eb; + --primary-dark: #1d4ed8; + --bg: #f1f5f9; + --card: #ffffff; + --border: #e2e8f0; + --text: #1e293b; + --muted: #64748b; + --danger: #dc2626; + --ok: #16a34a; + --warn: #d97706; + --radius: 10px; + --shadow: 0 1px 3px rgba(0,0,0,.08); +} + +* { margin: 0; padding: 0; box-sizing: border-box; } + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + background: var(--bg); + color: var(--text); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.container { width: min(1200px, 95%); margin: 0 auto; } +.hidden { display: none !important; } +.center { text-align: center; } +.muted { color: var(--muted); font-size: .9em; } + +/* ---- Topbar ---- */ +.topbar { + background: var(--primary); + color: #fff; + box-shadow: 0 2px 6px rgba(0,0,0,.15); +} +.topbar-inner { + display: flex; + justify-content: space-between; + align-items: center; + padding: .9rem 0; + flex-wrap: wrap; + gap: .5rem; +} +.brand { color: #fff; font-weight: 800; font-size: 1.15rem; text-decoration: none; } +.nav { display: flex; gap: .25rem; flex-wrap: wrap; } +.nav a { + color: rgba(255,255,255,.85); + text-decoration: none; + padding: .45rem .9rem; + border-radius: 6px; + font-size: .92rem; + transition: background .2s; +} +.nav a:hover { background: rgba(255,255,255,.15); color:#fff; } +.nav a.active { background: rgba(255,255,255,.22); color:#fff; font-weight:600; } + +/* ---- Main ---- */ +main.container { padding: 1.75rem 0 3rem; flex: 1; } +.page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem; } +.page-head h1 { font-size: 1.65rem; } +.page-actions { display: flex; gap: .5rem; } + +/* ---- Buttons ---- */ +.btn { + display: inline-block; + padding: .5rem 1rem; + border: 1px solid var(--border); + border-radius: 7px; + background: #fff; + color: var(--text); + font-size: .9rem; + cursor: pointer; + text-decoration: none; + transition: all .15s; +} +.btn:hover { background: #f8fafc; box-shadow: 0 2px 6px rgba(0,0,0,.08); } +.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } +.btn-primary:hover { background: var(--primary-dark); } +.btn-danger { background: #fee2e2; color: var(--danger); border-color: #fecaca; } +.btn-danger:hover { background: #fecaca; } +.btn-warn { background: var(--warn); color: #fff; border-color: var(--warn); } +.btn-ghost { background: transparent; color: var(--muted); } +.btn-ghost:hover { background: #f8fafc; } +.btn-sm { padding: .28rem .55rem; font-size: .8rem; } +.actions { display: flex; gap: .3rem; } + +/* ---- Cards ---- */ +.card { + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.5rem; + margin-bottom: 1.25rem; + box-shadow: var(--shadow); +} +.card h2 { font-size: 1.2rem; margin-bottom: 1rem; } +.card h3 { font-size: .95rem; color: var(--muted); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em; } +.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } +.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } + +/* ---- Stats ---- */ +.stat-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 1rem; + margin-bottom: 1.5rem; +} +.stat-grid.mini { grid-template-columns: repeat(2, 1fr); max-width: 420px; } +.stat-card { + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.2rem; + display: flex; + align-items: center; + gap: 1rem; + box-shadow: var(--shadow); +} +.stat-card.danger { border-color: #fecaca; background: #fef2f2; } +.stat-icon { font-size: 2rem; } +.stat-value { font-size: 1.7rem; font-weight: 800; } +.stat-value.small { font-size: 1.2rem; } +.stat-label { color: var(--muted); font-size: .85rem; } +.detail-value { font-size: 1.6rem; font-weight: 800; } + +/* ---- Tables ---- */ +.table { width: 100%; border-collapse: collapse; font-size: .92rem; } +.table th { + text-align: left; + padding: .7rem .6rem; + background: #f8fafc; + border-bottom: 2px solid var(--border); + color: var(--muted); + font-size: .8rem; + text-transform: uppercase; + letter-spacing: .03em; +} +.table td { padding: .7rem .6rem; border-bottom: 1px solid var(--border); } +.table tr:hover td { background: #fafbfc; } +.badge-err { color: var(--danger); font-weight: 700; } +.text-danger { color: var(--danger); font-weight: 700; } +.text-ok { color: var(--ok); font-weight: 700; } + +/* ---- Tags ---- */ +.tag { + display: inline-block; + padding: .15rem .6rem; + border-radius: 999px; + font-size: .78rem; + font-weight: 600; +} +.tag-in { background: #dcfce7; color: #15803d; } +.tag-out { background: #fee2e2; color: #b91c1c; } +.tag-ok { background: #dcfce7; color: #15803d; } +.tag-warn { background: #fef3c7; color: #b45309; } + +/* ---- Banners & alerts ---- */ +.low-stock-banner { + background: #fef3c7; + border: 1px solid #fcd34d; + color: #92400e; + padding: .8rem 1rem; + border-radius: 8px; + margin-bottom: 1.25rem; + font-size: .95rem; +} +.alert-danger { + background: #fef2f2; + border: 1px solid #fecaca; + color: #b91c1c; + padding: .8rem 1rem; + border-radius: 8px; + margin-bottom: 1rem; +} + +/* ---- Forms ---- */ +.form { display: block; } +.form-group { margin-bottom: 1rem; } +.form-group label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .9rem; } +.form-group input, .form-group select { + width: 100%; + padding: .6rem .8rem; + border: 1px solid var(--border); + border-radius: 7px; + font-size: .95rem; + background: #fff; +} +.form-group input:focus, .form-group select:focus { + outline: 2px solid var(--primary); + border-color: transparent; +} +.form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } +.hint { font-size: .8rem; color: var(--muted); } +.form-actions { display: flex; gap: .6rem; margin-top: 1rem; } +.form-card { max-width: 640px; } + +/* ---- Filter bar ---- */ +.filter-bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } +.filter-bar input, .filter-bar select { + padding: .55rem .8rem; + border: 1px solid var(--border); + border-radius: 7px; + font-size: .9rem; + min-width: 160px; +} +.filter-bar input[type="text"] { flex: 1; min-width: 200px; } +.report-filter input[type="date"] { min-width: 150px; } + +/* ---- Stock ops ---- */ +.stock-ops { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } +.stock-ops h2 { margin: 0; } +.stock-op-buttons { display: flex; gap: .6rem; } + +/* ---- Modal ---- */ +.modal-overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,.45); + display: flex; + align-items: center; + justify-content: center; + z-index: 100; +} +.modal { + background: #fff; + border-radius: var(--radius); + padding: 1.75rem; + width: min(420px, 92%); + box-shadow: 0 20px 50px rgba(0,0,0,.3); +} +.modal h2 { margin-bottom: 1rem; } + +/* ---- Footer ---- */ +.footer { + background: #0f172a; + color: #94a3b8; + padding: 1.1rem 0; + font-size: .85rem; + text-align: center; +} + +/* ---- Responsive ---- */ +@media (max-width: 900px) { + .grid-2, .grid-3, .form-row { grid-template-columns: 1fr; } + .page-head { flex-direction: column; align-items: flex-start; } +}