ultimatepos/Modules/AssetExchange/Resources/views/layouts/styles.blade.php

108 lines
5.4 KiB
PHP

<style>
.mt-page { margin-top: 4px; }
.mt-nav-wrap {
margin: 0 15px 16px;
border-radius: 10px;
background: #fff;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
overflow: visible;
position: relative;
z-index: 10;
}
.mt-nav-wrap .container-fluid { padding: 0 8px; display: flex; flex-wrap: wrap; align-items: center; }
.mt-nav-wrap .navbar-header { display: flex; align-items: center; flex-shrink: 0; }
.mt-nav-wrap .navbar-collapse { flex: 1; padding: 0; }
.mt-nav-brand {
display: flex; align-items: center; gap: 10px;
color: #0f172a !important; font-size: 15px; font-weight: 700; padding: 12px 14px !important;
}
.mt-nav-brand i {
width: 34px; height: 34px; border-radius: 8px;
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.mt-nav-groups {
display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 !important; float: none !important;
}
.mt-nav-groups > li { float: none !important; }
.mt-nav-groups > li > a {
color: #475569 !important; font-weight: 600; font-size: 13px; padding: 10px 14px !important;
border-radius: 8px; margin: 6px 2px; display: inline-flex; align-items: center; gap: 6px;
}
.mt-nav-groups > li > a:hover, .mt-nav-groups > li > a:focus { background: #f1f5f9 !important; color: #2563eb !important; }
.mt-nav-groups > li.active > a { background: #eff6ff !important; color: #2563eb !important; }
.mt-page-header {
margin: 0 15px 20px; padding: 20px 24px; border-radius: 16px; background: #fff;
border: 1px solid #e8edf5; box-shadow: 0 6px 24px rgba(27,39,51,0.05);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.mt-page-header h1 { margin: 0; font-size: 22px; font-weight: 700; color: #0f172a; }
.mt-card {
margin: 0 15px 20px; border-radius: 16px; background: #fff;
border: 1px solid #e8edf5; box-shadow: 0 6px 24px rgba(27,39,51,0.05); overflow: hidden;
}
.mt-card-header {
padding: 16px 20px; border-bottom: 1px solid #eef2f7;
display: flex; align-items: center; justify-content: space-between;
background: #fafbfe; flex-wrap: wrap; gap: 8px;
}
.mt-card-title { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; }
.mt-card-body { padding: 18px 20px; }
.mt-btn-primary {
border: none; border-radius: 10px; padding: 8px 16px; font-weight: 600;
color: #fff; background: linear-gradient(90deg, #2563eb, #3b82f6);
box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}
.mt-btn-primary:hover { opacity: 0.92; color: #fff; }
.mt-kpi-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px; margin: 0 15px 20px;
}
.mt-kpi-card {
border-radius: 14px; background: #fff; border: 1px solid #e8edf5;
padding: 18px 16px; box-shadow: 0 4px 16px rgba(27,39,51,0.04);
}
.mt-kpi-card .kpi-label { font-size: 12px; color: #64748b; font-weight: 600; margin-bottom: 6px; }
.mt-kpi-card .kpi-value { font-size: 24px; font-weight: 700; color: #0f172a; }
.mt-kpi-card .kpi-icon { float: left; margin-left: 10px; font-size: 22px; color: #3b82f6; opacity: 0.7; }
.aex-pipeline-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.aex-pipeline-col {
min-width: 240px; max-width: 280px; flex: 0 0 auto; background: #f8fafc;
border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px;
}
.aex-pipeline-col h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #334155; }
.aex-pipeline-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
padding: 10px; margin-bottom: 8px; font-size: 12px;
}
.aex-pipeline-card a { font-weight: 700; color: #2563eb; }
.mm-quick-links { display: flex; flex-wrap: wrap; gap: 10px; }
.mm-quick-links a {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 14px; border-radius: 10px; background: #f8fafc;
border: 1px solid #e2e8f0; color: #334155; font-weight: 600; font-size: 13px;
}
.mm-quick-links a:hover { background: #eff6ff; color: #2563eb; text-decoration: none; }
@media (max-width: 1199px) {
.mt-nav-wrap .navbar-toggle { display: block !important; }
.mt-nav-wrap .navbar-collapse.collapse { display: none !important; }
.mt-nav-wrap .navbar-collapse.collapse.in { display: block !important; width: 100%; }
.mt-nav-groups { flex-direction: column; width: 100%; }
.mt-page-header, .mt-card { margin: 0 8px 14px; }
.mt-kpi-grid { margin: 0 8px 14px; grid-template-columns: repeat(2, 1fr); }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var nav = document.getElementById('aex-navbar');
if (!nav) return;
nav.addEventListener('click', function(e) {
if (window.innerWidth >= 1200 || !e.target.closest('a')) return;
nav.classList.remove('in');
var btn = document.querySelector('.mt-nav-wrap [data-target="#aex-navbar"]');
if (btn) { btn.classList.add('collapsed'); btn.setAttribute('aria-expanded', 'false'); }
});
});
</script>