/* ========================================================= SMK Theme – Admin + Frontend Base (Bootstrap 5) - Clean, modern, responsif - Radius 6–8px (gunakan var --radius) - Brand/Font/Warna dinamis via inline :root di ========================================================= */ /* Fallback defaults – akan dioverride dari head.php */ :root{ --brand:#0d6efd; --text:#0f172a; --maxw:1150px; --radius:6px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ color:var(--text); background:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ====== Layout width ====== */ .container, .container-lg, .container-xl, .container-xxl{ max-width:var(--maxw) !important; } /* ====== Global radius ====== */ .card, .btn, .form-control, .form-select, .navbar, .dropdown-menu, .modal-content, .list-group-item, .badge{ border-radius:var(--radius) !important; } /* ====== Links & nav ====== */ a{ text-decoration:none; } a:hover{ text-decoration:none; } .navbar{ transition:box-shadow .2s ease; } .navbar.sticky-top{ backdrop-filter:saturate(180%) blur(4px); } .nav-link{ transition:color .2s ease; } .nav-link:hover{ color:var(--brand); } /* ====== Buttons (visibility fix) ====== */ .btn{ transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .btn:active{ transform:translateY(0); } .btn-primary{ color:#fff !important; background-color:var(--brand) !important; border-color:var(--brand) !important; box-shadow:0 2px 0 rgba(0,0,0,.03); } .btn-primary:hover, .btn-primary:focus{ color:#fff !important; background-color:var(--brand) !important; border-color:var(--brand) !important; filter:brightness(.92); transform:translateY(-1px); } .btn-outline-primary{ color:var(--brand) !important; border-color:var(--brand) !important; background:#fff !important; } .btn-outline-primary:hover, .btn-outline-primary:focus{ color:#fff !important; background-color:var(--brand) !important; border-color:var(--brand) !important; } /* ====== Forms ====== */ .form-control, .form-select{ border-color:rgba(0,0,0,.12); } .form-control:focus, .form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(13,110,253,.15); } .input-group-text{ background:#fff; border-color:rgba(0,0,0,.12); color:#555; } /* ====== Cards (interactive) ====== */ .card{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; border:1px solid rgba(0,0,0,.08); } .card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); } .list-group-item:hover{ background:rgba(13,110,253,.06); } .list-group-item.active{ background:var(--brand); border-color:var(--brand); color:#fff; } /* ====== Nav pills (tabs) – supaya terlihat klik-able ====== */ .nav-pills .nav-link{ cursor:pointer; border:1px solid rgba(0,0,0,.12); background-color:#fff; color:var(--text); margin-right:.25rem; border-radius:var(--radius); transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .nav-pills .nav-link:hover{ border-color:rgba(0,0,0,.2); } .nav-pills .nav-link.active{ color:#fff; background-color:var(--brand); border-color:var(--brand); } /* ====== Tables ====== */ .table{ border-color:rgba(0,0,0,.08) !important; } .table thead th{ background:#f8f9fa; border-bottom:1px solid rgba(0,0,0,.08) !important; font-weight:600; } .table-hover tbody tr:hover{ background:rgba(13,110,253,.03); } /* ====== Badges / Alerts in brand ====== */ .badge.text-bg-primary{ background:var(--brand) !important; } .alert-primary{ background:color-mix(in srgb, var(--brand) 12%, white); border-color:var(--brand); color:#0b2a5b; } /* ====== Admin layout helpers ====== */ .topbar{ position:sticky; top:0; z-index:10; } .sidebar{ width:260px; } @media (min-width:992px){ .sidebar{ position:fixed; top:0; bottom:0; border-right:1px solid #eee; padding-top:70px; overflow:auto; } .main{ margin-left:260px; } } @media (max-width:991.98px){ .sidebar{ display:none !important; } .main{ margin-left:0; } } /* ====== Preview & swatches (settings) ====== */ .preview-card{ transition:transform .2s ease, box-shadow .2s ease; } .preview-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); } .swatch{ width:42px; height:42px; border-radius:8px; border:1px solid rgba(0,0,0,.08); } /* ====== Hero (frontend) ====== */ .hero{ background: linear-gradient(180deg, rgba(13,110,253,.08), transparent), url('../img/hero.jpg') center/cover no-repeat; min-height:420px; border-radius:var(--radius); overflow:hidden; } /* ====== Image helpers ====== */ .object-fit-cover{ object-fit:cover; } .ratio > img{ object-fit:cover; } /* ====== Small utilities ====== */ .text-muted{ color:rgba(0,0,0,.55) !important; } .border-light{ border-color:rgba(0,0,0,.08) !important; } /* ====== Back to top button ====== */ #backTop{ right:16px; bottom:16px; display:none; border-radius:var(--radius); box-shadow:0 10px 24px rgba(0,0,0,.12); } /* ====== Reveal on scroll (aktif jika elemen diberi class .reveal) ====== */ .reveal-init{ opacity:0; transform:translateY(12px); transition:.5s ease; } .reveal-init.show{ opacity:1; transform:none; } /* ====== Footer ====== */ footer{ background:#fff; } /* ====== Login page tweaks ====== */ .login-card{ max-width:420px; width:100%; box-shadow:0 10px 24px rgba(0,0,0,.06); } /* ====== Buttons group alignment in tables (optional) ====== */ .table-actions .btn{ margin-right:.25rem; } .table-actions .btn:last-child{ margin-right:0; } /* ====== Headings spacing ====== */ h1, .h1{ margin-bottom:.6rem; } h2, .h2{ margin-bottom:.55rem; } h3, .h3{ margin-bottom:.5rem; } /* ====== Form validation hints ====== */ .form-text{ color:rgba(0,0,0,.55); } /* ====== Carousel controls contrast on images ====== */ .carousel-control-prev-icon, .carousel-control-next-icon{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); } /* ====== Misc ====== */ hr{ border-color:rgba(0,0,0,.12); } /* ===== Admin layout fix: topbar & sidebar ===== */ :root{ --sidebar-w: 260px; --topbar-h: 56px; } .topbar{ position: sticky; top:0; z-index:1030; } #adminSidebar{ --bs-offcanvas-width: var(--sidebar-w); } /* desktop */ @media (min-width: 992px){ #adminSidebar{ position: fixed; top: var(--topbar-h); left: 0; height: calc(100vh - var(--topbar-h)); border-right:1px solid #eee; visibility: visible !important; transform: none !important; } .main{ margin-left: var(--sidebar-w); } #adminSidebar .btn-close{ display:none; } body.sidebar-collapsed #adminSidebar{ margin-left: calc(-1 * var(--sidebar-w)); } body.sidebar-collapsed .main{ margin-left: 0; } } /* list-group (sidebar) */ .list-group-item{ border:1px solid rgba(0,0,0,.08); margin-bottom:.4rem; border-radius: var(--radius); }