/* * SNSSave.com — White Theme Override * Usage: add class="white" to your tag * Paste this file AFTER your existing style.css */ /* ===================================================== 1. BASE / BODY ===================================================== */ body.white { background-color: #f5f7fa !important; color: #16192c !important; } /* ===================================================== 2. GLOBAL DARK BACKGROUND OVERRIDES ===================================================== */ body.white .bg-dark, body.white .bg-surface-dark, body.white [class*="bg-dark"] { background-color: #ffffff !important; } body.white .bg-gray-900, body.white .bg-gray-800, body.white .bg-gray-700 { background-color: #f5f7fa !important; } body.white .bg-black { background-color: #ffffff !important; } /* ===================================================== 3. NAVBAR / TOP HEADER ===================================================== */ body.white .navbar, body.white .navbar-dark, body.white [class*="navbar-dark"] { background-color: #ffffff !important; border-bottom: 1px solid #e7eaf0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; } body.white .navbar-dark .navbar-brand, body.white .navbar-dark .navbar-text, body.white .navbar-dark .nav-link, body.white .navbar-dark .navbar-nav .nav-link { color: #16192c !important; } body.white .navbar-dark .navbar-nav .nav-link:hover, body.white .navbar-dark .navbar-nav .nav-link:focus { color: #e53935 !important; } body.white .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2316192C' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; } body.white .navbar-dark .navbar-toggler { border-color: #e7eaf0 !important; } /* Status bar strip (e.g. [2026년 3월 27일…] banners) */ body.white .bg-danger, body.white [class*="alert-danger"], body.white .bg-red-500 { /* keep red — it's the brand accent */ background-color: #e53935 !important; color: #ffffff !important; } /* ===================================================== 4. VERTICAL SIDEBAR / LEFT NAVIGATION ===================================================== */ body.white .navbar-vertical, body.white .navbar-vertical.navbar-dark { background-color: #ffffff !important; border-right: 1px solid #e7eaf0 !important; } body.white .navbar-vertical.navbar-dark .navbar-nav .nav-link, body.white .navbar-vertical .navbar-nav .nav-link { color: #525f7f !important; } body.white .navbar-vertical.navbar-dark .navbar-nav .nav-link i, body.white .navbar-vertical.navbar-dark .navbar-nav .nav-link svg { color: #6b7b93 !important; } body.white .navbar-vertical.navbar-dark .navbar-nav > .nav-item > .nav-link:hover, body.white .navbar-vertical.navbar-dark .navbar-nav > .nav-item > .nav-link.active { background-color: #fff1f1 !important; color: #e53935 !important; } body.white .navbar-vertical.navbar-dark .nav-link-text, body.white .navbar-vertical.navbar-dark .navbar-heading { color: #16192c !important; } body.white .navbar-vertical.navbar-dark .navbar-nav .nav-link[data-bs-toggle=collapse]:after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' fill='%2316192C' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important; } /* ===================================================== 5. CARDS & PANELS ===================================================== */ body.white .card { background-color: #ffffff !important; border-color: #e7eaf0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; color: #16192c !important; } body.white .card-header { background-color: #f9fafc !important; border-bottom-color: #e7eaf0 !important; color: #16192c !important; } body.white .card-footer { background-color: #f9fafc !important; border-top-color: #e7eaf0 !important; color: #16192c !important; } body.white .card-body { color: #16192c !important; background-color: #ffffff !important; } body.white .card-title { color: #16192c !important; } /* ===================================================== 6. MAIN CONTENT / WRAPPERS ===================================================== */ body.white .main-content, body.white main, body.white .container, body.white .container-fluid, body.white .content-wrapper { background-color: #f5f7fa !important; } /* Section / page backgrounds */ body.white section, body.white .page-body, body.white .page-wrapper { background-color: #f5f7fa !important; } /* ===================================================== 7. TYPOGRAPHY & TEXT COLORS ===================================================== */ body.white .text-white { color: #16192c !important; } body.white .text-white-50 { color: rgba(22,25,44,0.5) !important; } body.white .text-white-80 { color: rgba(22,25,44,0.8) !important; } body.white h1, body.white h2, body.white h3, body.white h4, body.white h5, body.white h6, body.white .h1, body.white .h2, body.white .h3, body.white .h4, body.white .h5, body.white .h6 { color: #16192c !important; } body.white p, body.white span, body.white li, body.white label, body.white td, body.white th { color: #525f7f; } body.white .proposal-btn span, body.white .order-status-wrap span { color: #ffffff !important; } body.white .text-white.btn-outline-dark:hover { color: #ffffff !important; } body.white .text-heading { color: #16192c !important; } body.white .text-body { color: #525f7f !important; } body.white .text-muted { color: #6b7b93 !important; } /* ===================================================== 8. BUTTONS ===================================================== */ /* Keep primary (red/danger) buttons as-is */ body.white .btn-danger, body.white .btn-primary { /* retain brand colors */ } /* Fix dark buttons */ body.white .btn-dark { background-color: #16192c !important; border-color: #16192c !important; color: #ffffff !important; } body.white .btn-dark:hover { background-color: #2d3041 !important; } body.white .btn-secondary { background-color: #f5f7f9 !important; border-color: #e7eaf0 !important; color: #16192c !important; } body.white .btn-neutral { background-color: #ffffff !important; border-color: #e7eaf0 !important; color: #16192c !important; } body.white .btn-neutral:hover { background-color: #f5f7f9 !important; } /* ===================================================== 9. FORMS & INPUTS ===================================================== */ body.white .form-control { background-color: #ffffff !important; border-color: #e7eaf0 !important; color: #16192c !important; } body.white .form-control:focus { background-color: #ffffff !important; border-color: #e53935 !important; box-shadow: 0 0 0 0.25rem rgba(229,57,53,0.15) !important; color: #16192c !important; } body.white .form-control::placeholder { color: #8898a9 !important; } body.white .form-select { background-color: #ffffff !important; border-color: #e7eaf0 !important; color: #16192c !important; } body.white .form-label { color: #16192c !important; } body.white .input-group-text { background-color: #f5f9fc !important; border-color: #e7eaf0 !important; color: #6b7b93 !important; } body.white .form-dark .form-control { background-color: #f5f7f9 !important; border-color: #e7eaf0 !important; color: #16192c !important; } body.white .form-dark .form-control::placeholder { color: #8898a9 !important; } body.white select { background-color: #ffffff !important; border-color: #e7eaf0 !important; color: #16192c !important; } /* ===================================================== 10. TABLES ===================================================== */ body.white .table { color: #525f7f !important; border-color: #e7eaf0 !important; } body.white .table thead th { background-color: #f9fafc !important; color: #525f7f !important; border-bottom-color: #e7eaf0 !important; } body.white .table > :not(caption) > * > * { background-color: #ffffff !important; } body.white .table-dark { background-color: #ffffff !important; color: #16192c !important; border-color: #e7eaf0 !important; } body.white .table-dark thead th, body.white .table.table-dark thead th, body.white .table .thead-dark th { background-color: #f9fafc !important; color: #525f7f !important; } /* ===================================================== 11. MODALS ===================================================== */ body.white .modal-content { background-color: #ffffff !important; color: #16192c !important; } body.white .modal-header { background-color: #f9fafc !important; border-bottom-color: #e7eaf0 !important; color: #16192c !important; } body.white .modal-footer { background-color: #f9fafc !important; border-top-color: #e7eaf0 !important; } body.white .modal-dark .modal-content { background-color: #ffffff !important; color: #16192c !important; } /* ===================================================== 12. DROPDOWNS ===================================================== */ body.white .dropdown-menu { background-color: #ffffff !important; border-color: #e7eaf0 !important; color: #16192c !important; } body.white .dropdown-item { color: #16192c !important; } body.white .dropdown-item:hover, body.white .dropdown-item:focus { background-color: #fff1f1 !important; color: #e53935 !important; } body.white .dropdown-menu-dark { background-color: #ffffff !important; border-color: #e7eaf0 !important; color: #16192c !important; } body.white .dropdown-menu-dark .dropdown-item { color: #16192c !important; } body.white .dropdown-divider { border-color: #e7eaf0 !important; } /* ===================================================== 13. LIST GROUPS ===================================================== */ body.white .list-group-item { background-color: #ffffff !important; border-color: #e7eaf0 !important; color: #16192c !important; } body.white .list-group-item:hover, body.white .list-group-item-action:hover { background-color: #f9fafc !important; } body.white .list-group-item.active { background-color: #fff1f1 !important; border-color: #e7eaf0 !important; color: #e53935 !important; } /* ===================================================== 14. BORDERS & DIVIDERS ===================================================== */ body.white .border-dark { border-color: #e7eaf0 !important; } body.white hr { border-color: #e7eaf0 !important; opacity: 0.9; } body.white .navbar-dark .border-bottom { border-bottom-color: #e7eaf0 !important; } /* ===================================================== 15. BADGES ===================================================== */ body.white .badge-dark, body.white .bg-dark.badge { background-color: #f0f2f6 !important; color: #16192c !important; } /* ===================================================== 16. ALERTS ===================================================== */ body.white .alert-dark { background-color: #f0f2f6 !important; border-color: #e7eaf0 !important; color: #16192c !important; } /* ===================================================== 17. ACCORDION ===================================================== */ body.white .accordion-item { background-color: #ffffff !important; border-color: #e7eaf0 !important; } body.white .accordion-button { background-color: #f9fafc !important; color: #16192c !important; } body.white .accordion-button:not(.collapsed) { background-color: #fff1f1 !important; color: #e53935 !important; box-shadow: inset 0 -1px 0 #e7eaf0 !important; } /* ===================================================== 18. PAGINATION ===================================================== */ body.white .page-link { background-color: #ffffff !important; border-color: #e7eaf0 !important; color: #525f7f !important; } body.white .page-item.active .page-link { background-color: #e53935 !important; border-color: #e53935 !important; color: #ffffff !important; } body.white .page-link:hover { background-color: #f9fafc !important; color: #e53935 !important; } /* ===================================================== 19. TABS & NAVIGATION ===================================================== */ body.white .nav-tabs { border-bottom-color: #e7eaf0 !important; } body.white .nav-tabs .nav-link { color: #525f7f !important; } body.white .nav-tabs .nav-link.active, body.white .nav-tabs .nav-item.show .nav-link { background-color: transparent !important; border-color: transparent transparent #e53935 !important; color: #e53935 !important; } body.white .nav-link { color: #525f7f !important; } body.white .nav-link:hover, body.white .nav-link:focus { color: #e53935 !important; } body.white .nav-pills .nav-link.active, body.white .nav-pills .show > .nav-link { background-color: #e53935 !important; color: #ffffff !important; } /* ===================================================== 20. TOASTS & POPOVERS ===================================================== */ body.white .toast { background-color: rgba(255,255,255,0.95) !important; border-color: #e7eaf0 !important; color: #16192c !important; } body.white .toast-header { background-color: rgba(255,255,255,0.9) !important; border-bottom-color: #e7eaf0 !important; color: #6b7b93 !important; } body.white .popover { background-color: #ffffff !important; border-color: rgba(0,0,0,0.05) !important; } body.white .popover-header { background-color: #f9fafc !important; color: #16192c !important; } body.white .popover-body { color: #525f7f !important; } /* ===================================================== 21. SCROLLBARS (optional polish) ===================================================== */ body.white ::-webkit-scrollbar { width: 6px; height: 6px; } body.white ::-webkit-scrollbar-track { background: #f5f7fa; } body.white ::-webkit-scrollbar-thumb { background: #cfd6df; border-radius: 3px; } body.white ::-webkit-scrollbar-thumb:hover { background: #abb6c5; } /* ===================================================== 22. MISCELLANEOUS OVERRIDES ===================================================== */ /* Status / info bars at top of page */ body.white .bg-primary-dark, body.white [style*="background:#1a1a1a"], body.white [style*="background: #1a1a1a"], body.white [style*="background-color:#1a1a1a"] { background-color: #ffffff !important; color: #16192c !important; } /* Sidebar section headers */ body.white .navbar-heading { color: #6b7b93 !important; } /* Active/selected states */ body.white .active > .nav-link, body.white .nav-link.active { color: #e53935 !important; } /* Focus rings — use red tint */ body.white .btn:focus, body.white .form-control:focus, body.white .form-select:focus { box-shadow: 0 0 0 0.25rem rgba(229,57,53,0.15) !important; } /* Dark offcanvas */ body.white .offcanvas { background-color: #ffffff !important; color: #16192c !important; } /* Progress bars keep brand colour */ body.white .progress { background-color: #e7eaf0 !important; } /* Kbd element */ body.white kbd { background-color: #16192c !important; color: #ffffff !important; } /* Code elements */ body.white pre { background-color: #f5f7fa !important; color: #16192c !important; } /* Surface tokens */ body.white .bg-surface-primary { background-color: #ffffff !important; } body.white .bg-surface-secondary { background-color: #f5f9fc !important; } body.white .bg-surface-tertiary { background-color: #fafafa !important; } /* ===================================================== 23. SITE-SPECIFIC HELPERS (snssave) ===================================================== */ /* SNS platform selection cards */ body.white .platform-card, body.white [class*="platform-"] { background-color: #ffffff !important; border: 1px solid #e7eaf0 !important; color: #16192c !important; } /* Order / FAQ boxes in the right panel */ body.white .faq-item, body.white .notice-item, body.white .announcement-item { background-color: #ffffff !important; border-color: #e7eaf0 !important; color: #16192c !important; } /* Info/help box — special-word stays red */ body.white .special-word { background: #fff1f1 !important; color: #e53935 !important; border: none !important; } /* Order button at bottom stays red */ body.white .btn-submit, body.white button[type="submit"] { background-color: #e53935 !important; border-color: #e53935 !important; color: #ffffff !important; } body.white .btn-submit:hover, body.white button[type="submit"]:hover { background-color: #c62828 !important; border-color: #c62828 !important; } /* Footer links */ body.white footer, body.white .footer { background-color: #f9fafc !important; color: #6b7b93 !important; border-top: 1px solid #e7eaf0 !important; } body.white footer a, body.white .footer a { color: #6b7b93 !important; } body.white footer a:hover, body.white .footer a:hover { color: #e53935 !important; } /* KakaoTalk / Telegram chat buttons — keep their brand colours */ body.white a[href*="kakao"], body.white a[href*="t.me"] { /* leave untouched */ }