/* SLANIA – Branding */ body { background-color: #061768; color: #FFFFFF; font-family: Inter, sans-serif; } .bg-slania-dark { background-color: #0F1B3D; } .btn-slania-gold { background-color: #C9A34F; border-color: #C9A34F; color: #0F1B3D; } .btn-slania-gold:hover { background-color: #b18f40; border-color: #b18f40; color: #0F1B3D; } .auction-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1rem; transition: 0.2s ease; } .auction-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.1); transform: translateY(-2px); } .price-tag { color: #C9A34F; font-weight: bold; } /* --------------------------------------------------------- SLANIA – DARK MODE THEME Toggle by adding class "dark-mode" to ---------------------------------------------------------- */ body.dark-mode { background-color: #0A0F1F; color: #E6E6E6; } /* NAVBAR */ body.dark-mode .bg-slania-dark { background-color: #050A15 !important; } body.dark-mode .nav-link { color: #E6E6E6 !important; } body.dark-mode .nav-link:hover { color: #C9A34F !important; } /* CARDS */ body.dark-mode .auction-card { background: #111827; border-color: #1F2937; } body.dark-mode .auction-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.6); } /* PRICE TAG */ body.dark-mode .price-tag { color: #D4B15C; } /* FORMS */ body.dark-mode .form-control { background: #1F2937; border-color: #374151; color: #E6E6E6; } body.dark-mode .form-control:focus { background: #111827; border-color: #C9A34F; color: #fff; } /* TABLES */ body.dark-mode .table { background: #111827; } body.dark-mode .table th { background: #050A15; color: #C9A34F; } body.dark-mode .table td { color: #E6E6E6; } /* INFO BOXES */ body.dark-mode .auction-info-box { background: #111827; border-color: #1F2937; } /* FOOTER */ body.dark-mode footer { background: #050A15; color: #C9A34F; } /* -------------------------------------------------- SLANIA MODAL DESIGN -------------------------------------------------- */ /* Modal baggrund (overlay) */ .modal-backdrop.show { opacity: 0.7; background-color: #000; } /* Selve modalboksen */ .modal-content { border-radius: 12px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.35); animation: slaniaModalFade 0.25s ease-out; } /* Header */ .modal-header { background: #111; color: #fff; border-bottom: 1px solid #333; border-top-left-radius: 12px; border-top-right-radius: 12px; } /* Body */ .modal-body { background: #181818; color: #ddd; font-size: 1.1rem; } /* Footer */ .modal-footer { background: #111; border-top: 1px solid #333; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } /* Close button */ .btn-close { filter: invert(1); } /* SLANIA Gold button inside modal */ .modal .btn-slania-gold { background: linear-gradient(135deg, #d4af37, #b68b2e); color: #000; border: none; font-weight: bold; padding: 10px 18px; border-radius: 8px; transition: 0.2s; } .modal .btn-slania-gold:hover { background: linear-gradient(135deg, #e8c45a, #c79a3a); transform: translateY(-2px); } /* Secondary button */ .modal .btn-secondary { background: #444; border: none; color: #fff; border-radius: 8px; } .modal .btn-secondary:hover { background: #555; } /* Fade animation */ @keyframes slaniaModalFade { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* -------------------------------------------------- DARK MODE SUPPORT -------------------------------------------------- */ body.dark-mode .modal-content { background: #1a1a1a; } body.dark-mode .modal-header, body.dark-mode .modal-footer { background: #111; } body.dark-mode .modal-body { background: #181818; color: #ddd; } .navbar .dropdown-menu { background: #111; border: 1px solid #333; border-radius: 8px; padding: 0; } .navbar .dropdown-item { color: #ddd; padding: 10px 16px; } .navbar .dropdown-item:hover { background: #d4af37; color: #000; } body.dark-mode .dropdown-menu { background: #0d0d0d; border-color: #444; } body.dark-mode .dropdown-item { color: #ccc; } body.dark-mode .dropdown-item:hover { background: #e8c45a; color: #000; } .admin-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }