/* Retro Theme Styles */ :root { --primary-color: #4361ee; --secondary-color: #3f37c9; --accent-color: #4895ef; --light-color: #f8f9fa; --dark-color: #212529; --success-color: #4bb543; --warning-color: #f9c74f; --danger-color: #ef476f; --border-radius: 0.5rem; } /* General Styles */ body.modern-theme { background-color: #f5f7fa; color: #333; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Navigation */ .menu-container { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 0.5rem 1rem; } .menu-left { display: flex; align-items: center; } .menu-right { display: flex; align-items: center; justify-content: flex-end; } /* Cards */ .card { border: none; border-radius: var(--border-radius); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); transition: transform 0.2s, box-shadow 0.2s; margin-bottom: 1.5rem; } .card:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .card-header { background-color: white; border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-weight: 600; } /* Buttons */ .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); border-radius: var(--border-radius); padding: 0.375rem 1rem; font-weight: 500; transition: all 0.2s; } .btn-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); transform: translateY(-1px); } /* Forms */ .form-control { border-radius: var(--border-radius); border: 1px solid #e1e5eb; padding: 0.5rem 0.75rem; } .form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25); } /* Tables */ .table { background-color: white; border-radius: var(--border-radius); overflow: hidden; } .table thead th { background-color: #f8f9fa; border-bottom: 2px solid #e9ecef; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; } /* Alerts */ .alert { border-radius: var(--border-radius); border: none; padding: 1rem 1.25rem; } .alert-success { background-color: rgba(75, 181, 67, 0.1); color: var(--success-color); } .alert-warning { background-color: rgba(249, 199, 79, 0.1); color: #c9a227; } .alert-danger { background-color: rgba(239, 71, 111, 0.1); color: var(--danger-color); } /* Theme Switcher */ .theme-switcher { margin-left: 1rem; } .theme-switcher .dropdown-toggle { background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: white; transition: all 0.2s; } .theme-switcher .dropdown-toggle:hover { background: rgba(255, 255, 255, 0.2); } .theme-option { display: flex; align-items: center; padding: 0.5rem 1rem; cursor: pointer; transition: background-color 0.2s; } .theme-option:hover { background-color: rgba(0, 0, 0, 0.05); } .theme-preview { width: 20px; height: 20px; border-radius: 4px; margin-right: 10px; border: 1px solid rgba(0, 0, 0, 0.1); } /* Responsive adjustments */ @media (max-width: 768px) { .menu-container { flex-direction: column; padding: 0.5rem; } .menu-left, .menu-right { width: 100%; justify-content: space-between; padding: 0.25rem 0; } }