/* Floppy Theme — Old-school flat boxes, hard shadows, white surfaces */ /* ========================================================================== Floppy Theme — Old-school flat boxes, hard shadows, white surfaces Activated via data-theme="floppy" on ========================================================================== */ [data-theme="floppy"] { --nn-green: #1a6b3c; --nn-green-dark: #145530; --nn-green-hover: #1f7d46; --nn-pink: #c0392b; --nn-pink-hover: #d44637; --nn-purple: #6c3483; --nn-amber: #b8860b; --nn-bg: #f0f0f0; --nn-surface: #ffffff; --nn-surface-alt: #e8e8e8; --nn-border: #222222; --nn-border-hover: #444444; --nn-text: #1a1a1a; --nn-text-muted: #555555; --nn-text-faint: #888888; /* Override Bootstrap color variables */ --bs-primary: #1a6b3c; --bs-primary-rgb: 26, 107, 60; --bs-secondary: #555555; --bs-secondary-rgb: 85, 85, 85; --bs-success: #1a6b3c; --bs-success-rgb: 26, 107, 60; --bs-info: #6c3483; --bs-info-rgb: 108, 52, 131; --bs-warning: #b8860b; --bs-warning-rgb: 184, 134, 11; --bs-danger: #c0392b; --bs-danger-rgb: 192, 57, 43; --bs-light: #ffffff; --bs-light-rgb: 255, 255, 255; --bs-dark: #222222; --bs-dark-rgb: 34, 34, 34; --bs-body-color: #1a1a1a; --bs-body-color-rgb: 26, 26, 26; --bs-body-bg: #f0f0f0; --bs-body-bg-rgb: 240, 240, 240; --bs-link-color: #1a6b3c; --bs-link-hover-color: #1f7d46; } /* --- Retro structural overrides --- */ [data-theme="floppy"] * { border-radius: 0; } [data-theme="floppy"] body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; } [data-theme="floppy"] h1, [data-theme="floppy"] h2, [data-theme="floppy"] h3, [data-theme="floppy"] h4, [data-theme="floppy"] h5, [data-theme="floppy"] h6, [data-theme="floppy"] .h1, [data-theme="floppy"] .h2, [data-theme="floppy"] .h3, [data-theme="floppy"] .h4, [data-theme="floppy"] .h5, [data-theme="floppy"] .h6 { font-family: 'Courier New', Courier, monospace; } [data-theme="floppy"] ::selection { background: rgba(26, 107, 60, 0.3); color: #000; } [data-theme="floppy"] .navbar { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 2px solid #222; box-shadow: 0 2px 0 #222; } [data-theme="floppy"] .navbar-brand { color: #1a1a1a; } [data-theme="floppy"] .navbar-brand i { color: #1a6b3c; } [data-theme="floppy"] .navbar-dark .navbar-nav .nav-link { color: #555; } [data-theme="floppy"] .navbar-dark .navbar-nav .nav-link:hover, [data-theme="floppy"] .navbar-dark .navbar-nav .nav-link.active { color: #1a1a1a; text-shadow: none; } [data-theme="floppy"] .card { background: #ffffff; border: 2px solid #222; box-shadow: 4px 4px 0 #222; } [data-theme="floppy"] .card:hover { border-color: #222; } [data-theme="floppy"] .card-header { background: #e8e8e8; border-bottom: 2px solid #222; } [data-theme="floppy"] .nn-card-header { background: #1a6b3c; color: #fff; border-bottom: 2px solid #222; } [data-theme="floppy"] .card-footer { background: #e8e8e8; border-top: 2px solid #222; } [data-theme="floppy"] .shadow-sm { box-shadow: 4px 4px 0 #222; } [data-theme="floppy"] .btn-primary { background: #1a6b3c; border: 2px solid #222; color: #fff; box-shadow: 3px 3px 0 #222; } [data-theme="floppy"] .btn-primary:hover { background: #1f7d46; border-color: #222; color: #fff; box-shadow: 2px 2px 0 #222; transform: translate(1px, 1px); } [data-theme="floppy"] .btn-outline-primary { color: #1a6b3c; border: 2px solid #222; box-shadow: 3px 3px 0 #222; } [data-theme="floppy"] .btn-outline-primary:hover { background: #1a6b3c; color: #fff; box-shadow: 2px 2px 0 #222; transform: translate(1px, 1px); } [data-theme="floppy"] .btn-danger { background: #c0392b; border: 2px solid #222; box-shadow: 3px 3px 0 #222; } [data-theme="floppy"] .btn-danger:hover { background: #d44637; box-shadow: 2px 2px 0 #222; transform: translate(1px, 1px); } [data-theme="floppy"] .btn-outline-danger { border: 2px solid #222; box-shadow: 3px 3px 0 #222; } [data-theme="floppy"] .btn-outline-secondary { border: 2px solid #222; color: #555; box-shadow: 3px 3px 0 #222; } [data-theme="floppy"] .btn-outline-secondary:hover { background: #e8e8e8; color: #1a1a1a; box-shadow: 2px 2px 0 #222; transform: translate(1px, 1px); } [data-theme="floppy"] .badge.bg-primary { background: #1a6b3c; color: #fff; border: 1px solid #222; } [data-theme="floppy"] .badge.bg-success { background: #d4edda; color: #fff; border: 1px solid #222; } [data-theme="floppy"] .badge.bg-danger { background: #f8d7da; color: #c0392b; border: 1px solid #222; } [data-theme="floppy"] .badge.bg-warning { background: #fff3cd; color: #856404; border: 1px solid #222; } [data-theme="floppy"] .badge.bg-secondary { background: #e8e8e8; color: #555; border: 1px solid #222; } [data-theme="floppy"] .badge.bg-info { background: #e8daef; color: #6c3483; border: 1px solid #222; } [data-theme="floppy"] .form-control, [data-theme="floppy"] .form-select { background-color: #fff; border: 2px solid #222; color: #1a1a1a; } [data-theme="floppy"] .form-control:focus, [data-theme="floppy"] .form-select:focus { border-color: #1a6b3c; box-shadow: 3px 3px 0 #222; } [data-theme="floppy"] .form-control::placeholder { color: #888; } [data-theme="floppy"] .input-group-text { background-color: #e8e8e8; border: 2px solid #222; color: #555; } [data-theme="floppy"] .form-label { font-family: 'Courier New', monospace; color: #555; } [data-theme="floppy"] .dropdown-menu { background: #fff; border: 2px solid #222; box-shadow: 4px 4px 0 #222; } [data-theme="floppy"] .dropdown-item { color: #555; } [data-theme="floppy"] .dropdown-item:hover { background: #e8e8e8; color: #1a1a1a; } [data-theme="floppy"] .dropdown-divider { border-color: #222; } [data-theme="floppy"] .alert { border: 2px solid #222; box-shadow: 3px 3px 0 #222; } [data-theme="floppy"] .alert-success { background: #d4edda; color: #155724; border-color: #222; } [data-theme="floppy"] .alert-danger { background: #f8d7da; color: #721c24; border-color: #222; } [data-theme="floppy"] .alert-warning { background: #fff3cd; color: #856404; border-color: #222; } [data-theme="floppy"] .alert-info { background: #e8daef; color: #4a235a; border-color: #222; } [data-theme="floppy"] .btn-close { filter: none; } [data-theme="floppy"] .table > :not(caption) > * > * { border-bottom: 1px solid #222; } [data-theme="floppy"] .table > thead { border-bottom: 2px solid #222; } [data-theme="floppy"] .table-light, [data-theme="floppy"] thead.table-light > tr > th { background-color: #e8e8e8; color: #555; font-family: 'Courier New', monospace; border-color: #222; } [data-theme="floppy"] .table-dark, [data-theme="floppy"] thead.table-dark > tr > th { background-color: #e8e8e8; color: #555; border-color: #222; } [data-theme="floppy"] .auth-card { background: #fff; border: 2px solid #222; box-shadow: 6px 6px 0 #222; } [data-theme="floppy"] .auth-card::before { background: #1a6b3c; height: 3px; } [data-theme="floppy"] .nn-gradient-text { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: #1a6b3c; background-clip: unset; } [data-theme="floppy"] .nn-glow { filter: none; } [data-theme="floppy"] .modal-content { background: #fff; border: 2px solid #222; box-shadow: 6px 6px 0 #222; } [data-theme="floppy"] .modal-header { border-bottom: 2px solid #222; } [data-theme="floppy"] .modal-footer { border-top: 2px solid #222; } [data-theme="floppy"] .list-group-item { background-color: #fff; border: 1px solid #222; } [data-theme="floppy"] .progress { background-color: #e8e8e8; border: 2px solid #222; } [data-theme="floppy"] .nav-pills .nav-link.active { background: #d4edda; color: #1a6b3c; border: 2px solid #222; box-shadow: 2px 2px 0 #222; } [data-theme="floppy"] .page-link { background-color: #fff; border: 1px solid #222; color: #555; } [data-theme="floppy"] .page-item.active .page-link { background-color: #1a6b3c; border-color: #222; color: #fff; } [data-theme="floppy"] .stepper-circle { border: 2px solid #222; box-shadow: 2px 2px 0 #222; } [data-theme="floppy"] .stepper-step.active .stepper-circle { background: #1a6b3c; box-shadow: 2px 2px 0 #222; } [data-theme="floppy"] .navbar-toggler { border: 2px solid #222; } [data-theme="floppy"] .navbar-toggler-icon { filter: invert(0); } [data-theme="floppy"] ::-webkit-scrollbar-track { background: #f0f0f0; } [data-theme="floppy"] ::-webkit-scrollbar-thumb { background: #aaa; } [data-theme="floppy"] ::-webkit-scrollbar-thumb:hover { background: #888; }