/** * Agentic Vibe - Bootstrap Customization * Override Bootstrap defaults with our design system * * @package WP_Agentic_Writer * @since 0.2.0 */ /* Apply variables to settings wrapper */ .wpaw-settings-v2-wrap { --bs-primary: var(--wpaw-primary); --bs-primary-rgb: 23, 162, 184; --bs-success: var(--wpaw-success); --bs-success-rgb: 40, 167, 69; --bs-warning: var(--wpaw-warning); --bs-warning-rgb: 255, 193, 7; --bs-danger: var(--wpaw-error); --bs-danger-rgb: 220, 53, 69; --bs-info: var(--wpaw-info); --bs-info-rgb: 23, 162, 184; --bs-body-bg: var(--wpaw-bg-primary); --bs-body-color: var(--wpaw-text-primary); --bs-border-color: var(--wpaw-border); background: var(--wpaw-bg-primary) !important; color: var(--wpaw-text-primary) !important; } /* Button Enhancements */ .wpaw-settings-v2-wrap .btn { transition: all var(--wpaw-transition-fast); border-radius: var(--wpaw-radius-md); font-weight: 500; padding: 0.5rem 1rem; } .wpaw-settings-v2-wrap .btn:active { transform: scale(0.98); } .wpaw-settings-v2-wrap .btn:focus { box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25); } .wpaw-settings-v2-wrap .btn-sm { padding: 0.375rem 0.75rem; font-size: var(--wpaw-text-sm); } .wpaw-settings-v2-wrap .btn-primary { background: var(--wpaw-primary); border-color: var(--wpaw-primary); } .wpaw-settings-v2-wrap .btn-primary:hover { background: var(--wpaw-primary-dark); border-color: var(--wpaw-primary-dark); box-shadow: var(--wpaw-shadow-sm); } /* Form Controls */ .wpaw-settings-v2-wrap .form-control, .wpaw-settings-v2-wrap .form-select { border-radius: var(--wpaw-radius-sm); border-color: var(--wpaw-border) !important; background: var(--wpaw-bg-tertiary) !important; color: var(--wpaw-text-primary) !important; transition: all var(--wpaw-transition-fast); font-size: var(--wpaw-text-base); max-width: unset !important; } .wpaw-settings-v2-wrap .form-control:focus, .wpaw-settings-v2-wrap .form-select:focus { border-color: var(--wpaw-primary) !important; box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25) !important; background: var(--wpaw-bg-tertiary) !important; color: var(--wpaw-text-primary) !important; } .wpaw-settings-v2-wrap .form-control::placeholder { color: var(--wpaw-text-tertiary); opacity: 0.7; } .wpaw-settings-v2-wrap .form-label { color: var(--wpaw-text-secondary); font-weight: 500; margin-bottom: var(--wpaw-space-sm); } .wpaw-settings-v2-wrap .form-text { color: var(--wpaw-text-tertiary); font-size: var(--wpaw-text-sm); font-family: var(--wpaw-font-mono); } /* Card Enhancements */ .wpaw-settings-v2-wrap .card { border-radius: var(--wpaw-radius-md); border: 1px solid var(--wpaw-border); background: var(--wpaw-bg-secondary) !important; transition: all var(--wpaw-transition-normal); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .wpaw-settings-v2-wrap .card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); border-color: var(--wpaw-primary); } .wpaw-settings-v2-wrap .card-header { background: var(--wpaw-bg-tertiary) !important; border-bottom: 1px solid var(--wpaw-border); color: var(--wpaw-text-primary) !important; font-weight: 600; } .wpaw-settings-v2-wrap .card-body { background: var(--wpaw-bg-secondary) !important; color: var(--wpaw-text-primary) !important; } .wpaw-settings-v2-wrap .card-footer { background: var(--wpaw-bg-tertiary) !important; border-top: 1px solid var(--wpaw-border); } /* Badge Enhancements */ .wpaw-settings-v2-wrap .badge { font-weight: 500; padding: 0.35em 0.65em; border-radius: var(--wpaw-radius-sm); font-size: 0.875em; } .wpaw-settings-v2-wrap .badge.bg-success { background: var(--wpaw-success) !important; color: white; } .wpaw-settings-v2-wrap .badge.bg-warning { background: var(--wpaw-warning) !important; color: white; } .wpaw-settings-v2-wrap .badge.bg-danger { background: var(--wpaw-error) !important; color: white; } .wpaw-settings-v2-wrap .badge.bg-info { background: var(--wpaw-info) !important; color: white; } .wpaw-settings-v2-wrap .badge.bg-primary { background: var(--wpaw-primary) !important; color: white; } /* Alert Enhancements */ .wpaw-settings-v2-wrap .alert { border-radius: var(--wpaw-radius-md); border: 1px solid; font-size: var(--wpaw-text-sm); background: var(--wpaw-bg-secondary) !important; } .wpaw-settings-v2-wrap .alert-success { border-color: var(--wpaw-success); color: var(--wpaw-text-primary) !important; border-left: 4px solid var(--wpaw-success); } .wpaw-settings-v2-wrap .alert-warning { border-color: var(--wpaw-warning); color: var(--wpaw-text-primary) !important; border-left: 4px solid var(--wpaw-warning); } .wpaw-settings-v2-wrap .alert-danger { border-color: var(--wpaw-error); color: var(--wpaw-text-primary) !important; border-left: 4px solid var(--wpaw-error); } .wpaw-settings-v2-wrap .alert-info { border-color: var(--wpaw-info); color: var(--wpaw-text-primary) !important; border-left: 4px solid var(--wpaw-info); } /* Table Enhancements */ .wpaw-settings-v2-wrap .table { color: var(--wpaw-text-primary) !important; font-size: var(--wpaw-text-sm); background: transparent !important; } .wpaw-settings-v2-wrap .table thead { background: var(--wpaw-bg-tertiary) !important; color: var(--wpaw-text-secondary) !important; font-weight: 600; text-transform: uppercase; font-size: var(--wpaw-text-xs); letter-spacing: 0.05em; } .wpaw-settings-v2-wrap .table tbody tr { transition: background-color var(--wpaw-transition-fast); border-bottom: 1px solid var(--wpaw-border); background: var(--wpaw-bg-secondary) !important; } .wpaw-settings-v2-wrap .table tbody tr:hover { background: var(--wpaw-bg-tertiary) !important; } .wpaw-settings-v2-wrap .table-light { background: var(--wpaw-bg-tertiary) !important; color: var(--wpaw-text-primary) !important; } .wpaw-settings-v2-wrap .table-hover tbody tr:hover { background: var(--wpaw-bg-tertiary) !important; } .wpaw-settings-v2-wrap .table-responsive { border-radius: var(--wpaw-radius-md); border: 1px solid var(--wpaw-border); overflow: hidden; background: var(--wpaw-bg-secondary) !important; } /* Nav Tabs/Pills Enhancements */ .wpaw-settings-v2-wrap .nav-tabs { border-bottom: 2px solid var(--wpaw-border); } .wpaw-settings-v2-wrap .nav-tabs .nav-link { border: none; color: var(--wpaw-text-secondary) !important; font-weight: 500; border-bottom: 3px solid transparent; transition: all var(--wpaw-transition-fast); padding: 0.75rem 1.25rem; background: transparent !important; } .wpaw-settings-v2-wrap .nav-tabs .nav-link:hover { color: var(--wpaw-primary) !important; background: var(--wpaw-bg-secondary) !important; border-color: transparent; } .wpaw-settings-v2-wrap .nav-tabs .nav-link.active { background: transparent !important; color: var(--wpaw-primary) !important; border-bottom-color: var(--wpaw-primary); } .wpaw-settings-v2-wrap .nav-pills .nav-link { color: var(--wpaw-text-secondary) !important; border-radius: var(--wpaw-radius-md); padding: 0.75rem 1.25rem; font-weight: 500; transition: all var(--wpaw-transition-fast); background: transparent !important; } .wpaw-settings-v2-wrap .nav-pills .nav-link:hover:not(.active) { background: var(--wpaw-bg-secondary) !important; color: var(--wpaw-text-primary) !important; } .wpaw-settings-v2-wrap .nav-pills .nav-link.active { background: var(--wpaw-primary) !important; color: white !important; } /* Tab Content Animation */ .wpaw-settings-v2-wrap .tab-content { animation: wpawFadeInTab 200ms ease-out; } @keyframes wpawFadeInTab { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Progress Bar */ .wpaw-settings-v2-wrap .progress { height: 8px; border-radius: var(--wpaw-radius-full); background: var(--wpaw-bg-tertiary); } .wpaw-settings-v2-wrap .progress-bar { background: var(--wpaw-primary); border-radius: var(--wpaw-radius-full); transition: width var(--wpaw-transition-slow); } /* Modal Enhancements */ .wpaw-settings-v2-wrap .modal-content { border-radius: var(--wpaw-radius-lg); border: 1px solid var(--wpaw-border); background: var(--wpaw-bg-primary); box-shadow: var(--wpaw-shadow-xl); } .wpaw-settings-v2-wrap .modal-header { background: var(--wpaw-bg-secondary); border-bottom: 1px solid var(--wpaw-border); border-radius: var(--wpaw-radius-lg) var(--wpaw-radius-lg) 0 0; } .wpaw-settings-v2-wrap .modal-body { color: var(--wpaw-text-primary); } .wpaw-settings-v2-wrap .modal-footer { background: var(--wpaw-bg-secondary); border-top: 1px solid var(--wpaw-border); border-radius: 0 0 var(--wpaw-radius-lg) var(--wpaw-radius-lg); } /* Dropdown Enhancements */ .wpaw-settings-v2-wrap .dropdown-menu { border-radius: var(--wpaw-radius-md); border: 1px solid var(--wpaw-border); background: var(--wpaw-bg-primary); box-shadow: var(--wpaw-shadow-lg); padding: var(--wpaw-space-sm); } .wpaw-settings-v2-wrap .dropdown-item { border-radius: var(--wpaw-radius-sm); color: var(--wpaw-text-primary); transition: all var(--wpaw-transition-fast); padding: 0.5rem 1rem; } .wpaw-settings-v2-wrap .dropdown-item:hover { background: var(--wpaw-bg-secondary); color: var(--wpaw-primary); } .wpaw-settings-v2-wrap .dropdown-item.active { background: var(--wpaw-primary); color: white; } /* Toast Notifications */ .wpaw-settings-v2-wrap .toast { border-radius: var(--wpaw-radius-md); border: 1px solid var(--wpaw-border); background: var(--wpaw-bg-primary); box-shadow: var(--wpaw-shadow-lg); } .wpaw-settings-v2-wrap .toast-header { background: var(--wpaw-bg-secondary); border-bottom: 1px solid var(--wpaw-border); color: var(--wpaw-text-primary); } .wpaw-settings-v2-wrap .toast-body { color: var(--wpaw-text-primary); } /* Pagination */ .wpaw-settings-v2-wrap .pagination .page-link { color: var(--wpaw-text-primary); background: var(--wpaw-bg-primary); border: 1px solid var(--wpaw-border); transition: all var(--wpaw-transition-fast); border-radius: var(--wpaw-radius-sm); margin: 0 2px; } .wpaw-settings-v2-wrap .pagination .page-link:hover { background: var(--wpaw-bg-secondary); border-color: var(--wpaw-primary); color: var(--wpaw-primary); } .wpaw-settings-v2-wrap .pagination .page-item.active .page-link { background: var(--wpaw-primary); border-color: var(--wpaw-primary); color: white; } .wpaw-settings-v2-wrap .pagination .page-item.disabled .page-link { background: var(--wpaw-bg-secondary); border-color: var(--wpaw-border); color: var(--wpaw-text-tertiary); opacity: 0.5; } /* Spinner */ .wpaw-settings-v2-wrap .spinner-border { border-color: var(--wpaw-primary); border-right-color: transparent; } /* Input Group */ .wpaw-settings-v2-wrap .input-group-text { background: var(--wpaw-bg-secondary); border-color: var(--wpaw-border); color: var(--wpaw-text-secondary); } /* List Group */ .wpaw-settings-v2-wrap .list-group-item { background: var(--wpaw-bg-primary); border-color: var(--wpaw-border); color: var(--wpaw-text-primary); } .wpaw-settings-v2-wrap .list-group-item:hover { background: var(--wpaw-bg-secondary); } .wpaw-settings-v2-wrap .list-group-item.active { background: var(--wpaw-primary); border-color: var(--wpaw-primary); color: white; } .wpaw-settings-v2-wrap input[type=checkbox]:checked::before { filter: brightness(0) invert(1); } .wpaw-settings-v2-wrap input[type=checkbox]:checked ~ label { color: white !important; } .wpaw-settings-v2-wrap .preset-card .card-body { cursor: pointer; border-radius: inherit; }