/** * WP Agentic Writer Settings V2 * Bootstrap-based settings page styles */ /* Container override for WordPress admin */ .wpaw-settings-v2-wrap { margin: 0; padding: 0; } .wpaw-settings-v2-wrap * { box-sizing: border-box; } .wpaw-settings-v2-wrap a { color: var(--wpaw-primary); } /* Card enhancements */ .wpaw-settings-v2-wrap .card { transition: box-shadow 0.2s ease; padding: unset; } .wpaw-settings-v2-wrap .card:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important; } /* Preset cards */ .wpaw-settings-v2-wrap .preset-card { cursor: pointer; transition: all 0.2s ease; } .wpaw-settings-v2-wrap .preset-card:hover { transform: translateY(-2px); box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); } .wpaw-settings-v2-wrap .preset-card:focus { outline: 2px solid var(--bs-primary); outline-offset: 2px; } .wpaw-settings-v2-wrap .preset-card.border-primary { background-color: rgba(13, 110, 253, 0.05); } /* Select2 Bootstrap 5 theme adjustments - Dark Theme */ .wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection { min-height: 38px; border-color: #3a4a5e !important; background-color: #2d3e52 !important; color: #e8eaed !important; } .wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { line-height: 1.5; color: #e8eaed !important; } ul.select2-results__options{ padding: unset!important; } .wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow { color: #b8bcc4 !important; } .wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-dropdown { border-color: #3a4a5e !important; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); background-color: #243447 !important; } .wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option { color: #e8eaed !important; background-color: #243447 !important; } .wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: #17a2b8 !important; color: white !important; } .wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option--selected { background-color: #2d3e52 !important; } .wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-search__field { background-color: #2d3e52 !important; color: #e8eaed !important; border-color: #3a4a5e !important; } .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear, .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear { right: 1.25rem; } /* Form controls - Dark Theme */ .wpaw-settings-v2-wrap .form-control, .wpaw-settings-v2-wrap .form-select, .wpaw-settings-v2-wrap input[type="text"], .wpaw-settings-v2-wrap input[type="number"], .wpaw-settings-v2-wrap input[type="email"], .wpaw-settings-v2-wrap input[type="password"], .wpaw-settings-v2-wrap input[type="date"], .wpaw-settings-v2-wrap textarea { background-color: #2d3e52 !important; color: #e8eaed !important; border-color: #3a4a5e !important; } .wpaw-settings-v2-wrap .form-control:focus, .wpaw-settings-v2-wrap .form-select:focus, .wpaw-settings-v2-wrap input:focus, .wpaw-settings-v2-wrap textarea:focus { border-color: #17a2b8 !important; box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25) !important; background-color: #2d3e52 !important; color: #e8eaed !important; } .wpaw-settings-v2-wrap .form-control::placeholder, .wpaw-settings-v2-wrap input::placeholder, .wpaw-settings-v2-wrap textarea::placeholder { color: #8a8f98 !important; opacity: 0.7 !important; } /* Nav pills styling - Dark Theme */ .wpaw-settings-v2-wrap .nav-pills { border: 1px solid #17a2b8; border-radius: .75em; } .wpaw-settings-v2-wrap .nav-pills .nav-link { color: #b8bcc4 !important; border-radius: 0.5rem; padding: 0.75rem 1.25rem; font-weight: 500; transition: all 0.2s ease; background-color: transparent !important; } .wpaw-settings-v2-wrap .nav-pills .nav-link:hover:not(.active) { background-color: #243447 !important; color: #e8eaed !important; } .wpaw-settings-v2-wrap .nav-pills .nav-link.active { background-color: #17a2b8 !important; color: #fff !important; } /* Sticky save buttons */ .wpaw-settings-v2-wrap .sticky-bottom { z-index: 100; } /* Table styles - Dark Theme */ .wpaw-settings-v2-wrap .table { margin-bottom: 0; color: #e8eaed !important; background-color: transparent !important; } .wpaw-settings-v2-wrap .table th { font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.025em; color: #b8bcc4 !important; border-bottom-width: 1px; border-color: #3a4a5e !important; background-color: #2d3e52 !important; } .wpaw-settings-v2-wrap .table td { vertical-align: middle; color: #e8eaed !important; border-color: #3a4a5e !important; background-color: #243447 !important; } .wpaw-settings-v2-wrap .table tbody tr { background-color: #243447 !important; } .wpaw-settings-v2-wrap .table tbody tr:hover { background-color: #2d3e52 !important; } .wpaw-settings-v2-wrap .table tbody tr:hover td { background-color: #2d3e52 !important; } .wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(odd) { background-color: #243447 !important; } .wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(odd) td { background-color: #243447 !important; } .wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(even) { background-color: #2d3e52 !important; } .wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(even) td { background-color: #2d3e52 !important; } /* Badge enhancements - Dark Theme */ .wpaw-settings-v2-wrap *:not(td,label) > .badge { font-weight: 500; color: white !important; } .wpaw-settings-v2-wrap .badge.bg-secondary { background-color: #6c757d !important; color: white !important; } .wpaw-settings-v2-wrap .badge.bg-success { background-color: #28a745 !important; color: white !important; } .wpaw-settings-v2-wrap .badge.bg-warning { background-color: #ffc107 !important; color: #212529 !important; } .wpaw-settings-v2-wrap .badge.bg-danger { background-color: #dc3545 !important; color: white !important; } .wpaw-settings-v2-wrap .badge.bg-info { background-color: #17a2b8 !important; color: white !important; } /* Custom language items */ .wpaw-settings-v2-wrap .wpaw-custom-language-item .btn { padding: 0.375rem 0.5rem; } /* Cost estimate display */ .wpaw-settings-v2-wrap #wpaw-cost-estimate { transition: all 0.3s ease; } /* Toast positioning */ .wpaw-settings-v2-wrap .toast-container { z-index: 9999; } /* Dashicons in buttons */ .wpaw-settings-v2-wrap .dashicons { font-size: 1rem; width: 1rem; height: 1rem; vertical-align: middle; } .wpaw-settings-v2-wrap .btn .dashicons { margin-top: -2px; } /* Filter section */ .wpaw-settings-v2-wrap #wpaw-filter-post, .wpaw-settings-v2-wrap #wpaw-filter-date-from, .wpaw-settings-v2-wrap #wpaw-filter-date-to { max-width: 100%; } /* Pagination */ .wpaw-settings-v2-wrap .pagination { margin-bottom: 0; } .wpaw-settings-v2-wrap .page-link { padding: 0.375rem 0.75rem; } /* Loading states */ .wpaw-settings-v2-wrap .spinner-border { width: 1rem; height: 1rem; border-width: 0.15em; } /* Responsive adjustments */ @media (max-width: 768px) { .wpaw-settings-v2-wrap .nav-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .wpaw-settings-v2-wrap .nav-pills .nav-link { white-space: nowrap; padding: 0.5rem 1rem; } .wpaw-settings-v2-wrap .preset-card { margin-bottom: 0.5rem; } .wpaw-settings-v2-wrap .sticky-bottom { position: relative !important; bottom: auto !important; } } /* WordPress admin bar offset */ @media (min-width: 601px) { .admin-bar .wpaw-settings-v2-wrap .sticky-top { top: 32px !important; } } @media (max-width: 600px) { .admin-bar .wpaw-settings-v2-wrap .sticky-top { top: 46px !important; } } /* Form text helper */ .wpaw-settings-v2-wrap .form-text { font-size: 0.8125rem; margin: 0.375rem 0; } /* Alert styling */ .wpaw-settings-v2-wrap .alert { border-radius: 0.5rem; } /* Focus states for accessibility */ .wpaw-settings-v2-wrap .btn:focus, .wpaw-settings-v2-wrap .nav-link:focus { outline: 2px solid var(--bs-primary); outline-offset: 2px; } /* Animation for cost estimate */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .wpaw-settings-v2-wrap #wpaw-cost-estimate.updating { animation: pulse 0.5s ease-in-out; } /* Customization - Dark Theme */ #wpcontent { background-color: #1d2227 !important; } .wpaw-settings-v2-wrap .container-fluid { background: #1d2227 !important; } .card { max-width: unset; } /* Checkboxes and Form Switches */ .wpaw-settings-v2-wrap .form-check-input { background-color: #2d3e52 !important; border-color: #3a4a5e !important; } .wpaw-settings-v2-wrap .form-check-input:checked { background-color: #17a2b8 !important; border-color: #17a2b8 !important; } .wpaw-settings-v2-wrap .form-check-label { color: #e8eaed !important; } /* Labels */ .wpaw-settings-v2-wrap label, .wpaw-settings-v2-wrap .form-label { color: #b8bcc4 !important; } /* Small text / help text */ .wpaw-settings-v2-wrap small, .wpaw-settings-v2-wrap .small, .wpaw-settings-v2-wrap .form-text { color: #8a8f98 !important; } /* Headings in cards */ .wpaw-settings-v2-wrap h1, .wpaw-settings-v2-wrap h2, .wpaw-settings-v2-wrap h3, .wpaw-settings-v2-wrap h4, .wpaw-settings-v2-wrap h5, .wpaw-settings-v2-wrap h6 { color: #e8eaed !important; } /* Paragraph text */ .wpaw-settings-v2-wrap p { color: #b8bcc4 !important; } /* Button text colors */ .wpaw-settings-v2-wrap .btn { color: #e8eaed !important; } .wpaw-settings-v2-wrap .btn-primary { background-color: #17a2b8 !important; border-color: #17a2b8 !important; color: white !important; } .wpaw-settings-v2-wrap .btn-secondary { background-color: #6c757d !important; border-color: #6c757d !important; color: white !important; } .wpaw-settings-v2-wrap .btn-outline-primary { color: #17a2b8 !important; border-color: #17a2b8 !important; background-color: transparent !important; } .wpaw-settings-v2-wrap .btn-outline-primary:hover { background-color: #17a2b8 !important; color: white !important; } .wpaw-settings-v2-wrap .btn-outline-secondary { color: #b8bcc4 !important; border-color: #6c757d !important; background-color: transparent !important; } .wpaw-settings-v2-wrap .btn-outline-secondary:hover { background-color: #6c757d !important; color: white !important; } /* List group items */ .wpaw-settings-v2-wrap .list-group-item { background-color: #243447 !important; color: #e8eaed !important; border-color: #3a4a5e !important; } .wpaw-settings-v2-wrap .list-group-item:hover { background-color: #2d3e52 !important; } /* Dropdown menus */ .wpaw-settings-v2-wrap .dropdown-menu { background-color: #243447 !important; border-color: #3a4a5e !important; } .wpaw-settings-v2-wrap .dropdown-item { color: #e8eaed !important; } .wpaw-settings-v2-wrap .dropdown-item:hover { background-color: #2d3e52 !important; color: #17a2b8 !important; } /* Modal dialogs */ .wpaw-settings-v2-wrap .modal-content { background-color: #243447 !important; color: #e8eaed !important; border-color: #3a4a5e !important; } .wpaw-settings-v2-wrap .modal-header { background-color: #2d3e52 !important; border-bottom-color: #3a4a5e !important; } .wpaw-settings-v2-wrap .modal-footer { background-color: #2d3e52 !important; border-top-color: #3a4a5e !important; } /* Pagination */ .wpaw-settings-v2-wrap .pagination .page-link { background-color: #243447 !important; color: #e8eaed !important; border-color: #3a4a5e !important; } .wpaw-settings-v2-wrap .pagination .page-link:hover { background-color: #2d3e52 !important; color: #17a2b8 !important; } .wpaw-settings-v2-wrap .pagination .page-item.active .page-link { background-color: #17a2b8 !important; border-color: #17a2b8 !important; color: white !important; } /* Code blocks */ .wpaw-settings-v2-wrap code { background-color: #2d3e52 !important; color: #17a2b8 !important; border: 1px solid #3a4a5e; } .wpaw-settings-v2-wrap pre { background-color: #2d3e52 !important; color: #e8eaed !important; border: 1px solid #3a4a5e; } /* Breadcrumb */ .wpaw-settings-v2-wrap .breadcrumb { background-color: #243447 !important; } .wpaw-settings-v2-wrap .breadcrumb-item { color: #b8bcc4 !important; } .wpaw-settings-v2-wrap .breadcrumb-item.active { color: #e8eaed !important; } /* Progress bars */ .wpaw-settings-v2-wrap .progress { background-color: #2d3e52 !important; } .wpaw-settings-v2-wrap .progress-bar { background-color: #17a2b8 !important; } /* Tooltips */ .wpaw-settings-v2-wrap .tooltip-inner { background-color: #243447 !important; color: #e8eaed !important; } /* Popovers */ .wpaw-settings-v2-wrap .popover { background-color: #243447 !important; border-color: #3a4a5e !important; } .wpaw-settings-v2-wrap .popover-header { background-color: #2d3e52 !important; color: #e8eaed !important; border-bottom-color: #3a4a5e !important; } .wpaw-settings-v2-wrap .popover-body { color: #b8bcc4 !important; }