Add AI writing assistant plugin with local backend, brave search, and image generation support
- Implement local backend AI provider with Ollama integration - Add Brave Search API integration for real-time search suggestions - Add image generation manager with multiple AI providers - Create hybrid provider system with local/cloud fallback - Add comprehensive settings UI with provider management - Implement Gutenberg sidebar with writing assistance controls - Add SEO schema generation for AI-generated content - Multiple provider support: OpenRouter, local backend, Codex
This commit is contained in:
Dwindi Ramadhana
@@ -7,6 +7,7 @@
|
||||
.wpaw-settings-v2-wrap {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap * {
|
||||
@@ -19,12 +20,23 @@
|
||||
|
||||
/* Card enhancements */
|
||||
.wpaw-settings-v2-wrap .card {
|
||||
transition: box-shadow 0.2s ease;
|
||||
padding: unset;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
margin-bottom: 2rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .card:hover {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
|
||||
.wpaw-settings-v2-wrap .card-header,
|
||||
.wpaw-settings-v2-wrap .card-body {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .card-header {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
/* Preset cards */
|
||||
@@ -47,45 +59,83 @@
|
||||
background-color: rgba(13, 110, 253, 0.05);
|
||||
}
|
||||
|
||||
/* Select2 Bootstrap 5 theme adjustments - Dark Theme */
|
||||
/* Select2 Bootstrap 5 theme adjustments - Dark Theme (VSCode match) */
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection {
|
||||
min-height: 38px;
|
||||
border-color: #3a4a5e !important;
|
||||
background-color: #2d3e52 !important;
|
||||
color: #e8eaed !important;
|
||||
border-color: #3c3c3c !important;
|
||||
background-color: #3c3c3c !important;
|
||||
color: #cccccc !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
|
||||
line-height: 1.5;
|
||||
color: #e8eaed !important;
|
||||
color: #cccccc !important;
|
||||
}
|
||||
|
||||
ul.select2-results__options{
|
||||
padding: unset!important;
|
||||
ul.select2-results__options {
|
||||
padding: unset !important;
|
||||
background-color: #252526 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
|
||||
color: #b8bcc4 !important;
|
||||
color: #858585 !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;
|
||||
border-color: #3c3c3c !important;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
|
||||
background-color: #252526 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option {
|
||||
color: #e8eaed !important;
|
||||
background-color: #243447 !important;
|
||||
color: #cccccc !important;
|
||||
background-color: #252526 !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--highlighted,
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option:hover {
|
||||
background-color: #04395e !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option--selected {
|
||||
background-color: #2d3e52 !important;
|
||||
background-color: #37373d !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.select2-results ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.select2-results li {
|
||||
font-family: 'Consolas', 'Courier New', monospace !important;
|
||||
font-size: 13px !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.select2-results ul::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.select2-results ul::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.select2-results ul::-webkit-scrollbar-thumb {
|
||||
background-color: darkgrey;
|
||||
outline: 1px solid slategrey;
|
||||
}
|
||||
|
||||
span.select2-search.select2-search--dropdown {
|
||||
background: #252526 !important;
|
||||
}
|
||||
|
||||
span.select2-search.select2-search--dropdown input {
|
||||
background: #252526 !important;
|
||||
border-radius: unset !important;
|
||||
color: white !important;
|
||||
font-family: 'Consolas', 'Courier New', monospace !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-search__field {
|
||||
@@ -94,11 +144,12 @@ ul.select2-results__options{
|
||||
border-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear, .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
|
||||
.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 */
|
||||
/* Form controls - Dark Theme (VSCode match) */
|
||||
.wpaw-settings-v2-wrap .form-control,
|
||||
.wpaw-settings-v2-wrap .form-select,
|
||||
.wpaw-settings-v2-wrap input[type="text"],
|
||||
@@ -107,25 +158,25 @@ ul.select2-results__options{
|
||||
.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;
|
||||
background-color: #3c3c3c !important;
|
||||
color: #cccccc !important;
|
||||
border-color: #3c3c3c !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;
|
||||
border-color: #007fd4 !important;
|
||||
box-shadow: 0 0 0 1px #007fd4 !important;
|
||||
background-color: #3c3c3c !important;
|
||||
color: #cccccc !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-control::placeholder,
|
||||
.wpaw-settings-v2-wrap input::placeholder,
|
||||
.wpaw-settings-v2-wrap textarea::placeholder {
|
||||
color: #8a8f98 !important;
|
||||
color: #858585 !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
@@ -213,7 +264,7 @@ ul.select2-results__options{
|
||||
}
|
||||
|
||||
/* Badge enhancements - Dark Theme */
|
||||
.wpaw-settings-v2-wrap *:not(td,label) > .badge {
|
||||
.wpaw-settings-v2-wrap *:not(td, label)>.badge {
|
||||
font-weight: 500;
|
||||
color: white !important;
|
||||
}
|
||||
@@ -350,25 +401,32 @@ ul.select2-results__options{
|
||||
|
||||
/* Animation for cost estimate */
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
|
||||
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 */
|
||||
/* Customization - Dark Theme (VSCode Match) */
|
||||
#wpcontent {
|
||||
background-color: #1d2227 !important;
|
||||
background-color: #1e1e1e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .container-fluid {
|
||||
background: #1d2227 !important;
|
||||
background: #1e1e1e !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: unset;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
/* Checkboxes and Form Switches */
|
||||
@@ -569,4 +627,187 @@ ul.select2-results__options{
|
||||
|
||||
.wpaw-settings-v2-wrap .popover-body {
|
||||
color: #b8bcc4 !important;
|
||||
}
|
||||
|
||||
/* ------------------------------------- */
|
||||
/* AGENTIC IDE UI - VSCODE STYLE OVERRIDE */
|
||||
/* ------------------------------------- */
|
||||
|
||||
/* Monospace fonts for technical inputs */
|
||||
.wpaw-settings-v2-wrap input[type="text"],
|
||||
.wpaw-settings-v2-wrap input[type="url"],
|
||||
.wpaw-settings-v2-wrap input[type="url"],
|
||||
.wpaw-settings-v2-wrap input[type="password"],
|
||||
.wpaw-settings-v2-wrap select,
|
||||
.wpaw-settings-v2-wrap .select2-selection__rendered,
|
||||
.wpaw-settings-v2-wrap code,
|
||||
.wpaw-settings-v2-wrap pre {
|
||||
font-family: 'Consolas', 'Courier New', monospace !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* Layout Dimensions */
|
||||
.wpaw-ide-container {
|
||||
height: calc(100vh - 32px);
|
||||
background-color: #1e1e1e;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.admin-bar .wpaw-ide-container {
|
||||
height: calc(100vh - 46px);
|
||||
}
|
||||
}
|
||||
|
||||
/* VSCode Sidebar Navigation Tree */
|
||||
.wpaw-sidebar-nav {
|
||||
width: 260px;
|
||||
background-color: #252526;
|
||||
border-right: 1px solid #3c3c3c;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wpaw-nav-tree .nav-link {
|
||||
color: #cccccc !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0.35rem 0.75rem !important;
|
||||
font-size: 13px;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 2px;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-nav-tree .nav-link:hover {
|
||||
background-color: #2a2d2e !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.wpaw-nav-tree .nav-link.active {
|
||||
background-color: #37373d !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #007fd4;
|
||||
}
|
||||
|
||||
.wpaw-nav-tree .nav-link i {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.wpaw-nav-tree .nav-link.active i {
|
||||
color: #007fd4;
|
||||
}
|
||||
|
||||
/* Save Bar (VSCode Status Bar style) */
|
||||
.wpaw-save-bar {
|
||||
background-color: #007fd4 !important;
|
||||
padding: 4px 12px !important;
|
||||
}
|
||||
|
||||
.wpaw-save-bar * {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.wpaw-save-bar .btn-primary {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.wpaw-save-bar .btn-primary:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.wpaw-save-bar .btn-outline-secondary {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-save-bar .btn-outline-secondary:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
/* Force Override Bootstrap Background Utilities */
|
||||
.wpaw-settings-v2-wrap .bg-white {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .bg-light {
|
||||
background-color: #252526 !important;
|
||||
}
|
||||
|
||||
/* Force Override ALL Border Radius (User Request: "bot" style) */
|
||||
.wpaw-settings-v2-wrap * {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Fix WP Admin Container Spacing */
|
||||
#wpbody-content {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#wpcontent {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.wpaw-ide-container {
|
||||
height: calc(100vh - 32px);
|
||||
/* WP Admin height */
|
||||
}
|
||||
|
||||
/* Ensure inputs dont look like boxes inside boxes */
|
||||
.wpaw-settings-v2-wrap .form-control {
|
||||
border: 1px solid #3c3c3c !important;
|
||||
}
|
||||
|
||||
/* Fix WordPress Admin Notices overlaying our IDE layout */
|
||||
.wpaw-settings-v2-wrap .notice {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
margin: 0;
|
||||
padding: 12px 20px;
|
||||
background-color: var(--wpaw-bg);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
border-left: 4px solid var(--wpaw-primary);
|
||||
color: var(--wpaw-text);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
min-width: 250px;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice.notice-success {
|
||||
border-left-color: var(--bs-success);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice.notice-error {
|
||||
border-left-color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice.notice-warning {
|
||||
border-left-color: var(--bs-warning);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice.is-dismissible {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice .notice-dismiss {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .notice p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#setting-error-settings_updated {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
#connection-status {
|
||||
font-family: 'Consolas', 'Courier New', monospace !important;
|
||||
}
|
||||
@@ -230,6 +230,7 @@
|
||||
text-transform: capitalize;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#agentMode:active,
|
||||
#agentMode:focus {
|
||||
text-decoration: unset;
|
||||
@@ -620,7 +621,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.wpaw-response-content > * {
|
||||
.wpaw-response-content>* {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@@ -660,7 +661,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
margin: 4px 0 6px;
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-response-content *:is(h1,h2,h3,h4,h5,h6){
|
||||
.dark-theme .wpaw-response-content *:is(h1, h2, h3, h4, h5, h6) {
|
||||
color: #cecece;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -670,6 +671,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wpaw-response-content table th,
|
||||
.wpaw-response-content table td {
|
||||
border: 1px solid;
|
||||
@@ -713,11 +715,11 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
/* .wpaw-timeline-entry.active { */
|
||||
/* background: #fff; */
|
||||
/* border: 1px solid #bfdbfe; */
|
||||
/* box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06); */
|
||||
/* margin-bottom: 15px; */
|
||||
/* border-radius: 6px; */
|
||||
/* background: #fff; */
|
||||
/* border: 1px solid #bfdbfe; */
|
||||
/* box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06); */
|
||||
/* margin-bottom: 15px; */
|
||||
/* border-radius: 6px; */
|
||||
/* } */
|
||||
|
||||
.wpaw-timeline-entry.inactive {
|
||||
@@ -864,45 +866,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpaw-header-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 0 4px;
|
||||
}
|
||||
|
||||
.wpaw-header-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 1px solid #dcdcde;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wpaw-header-action svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #1d2227;
|
||||
}
|
||||
|
||||
.wpaw-header-action:hover {
|
||||
border-color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-header-action.active {
|
||||
border-color: #2271b1;
|
||||
background: #e8f1fb;
|
||||
}
|
||||
|
||||
.wpaw-header-action.active svg {
|
||||
fill: #2271b1;
|
||||
}
|
||||
/* (Dead wpaw-header-actions CSS removed — P1 cleanup) */
|
||||
|
||||
/* ===========================
|
||||
CONFIG TAB
|
||||
@@ -917,7 +881,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.wpaw-config-tab > *:nth-child(2){
|
||||
.wpaw-config-tab>*:nth-child(2) {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
@@ -960,8 +924,8 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
.wpaw-config-section .wpaw-select {
|
||||
width: 100%!important;
|
||||
max-width: unset!important;
|
||||
width: 100% !important;
|
||||
max-width: unset !important;
|
||||
}
|
||||
|
||||
.wpaw-select:focus {
|
||||
@@ -1029,7 +993,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wpaw-budget-bar ~ .description {
|
||||
.wpaw-budget-bar~.description {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
@@ -1457,11 +1421,11 @@ input.wpaw-plan-section-check:checked::before {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.wpaw-config-toggle input:checked + .wpaw-toggle-slider {
|
||||
.wpaw-config-toggle input:checked+.wpaw-toggle-slider {
|
||||
background-color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-config-toggle input:checked + .wpaw-toggle-slider:before {
|
||||
.wpaw-config-toggle input:checked+.wpaw-toggle-slider:before {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
@@ -1512,15 +1476,17 @@ input.wpaw-plan-section-check:checked::before {
|
||||
.wpaw-question-card .wpaw-config-form {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.wpaw-question-card .wpaw-config-form .wpaw-config-field {
|
||||
border-radius: unset!important;
|
||||
border-radius: unset !important;
|
||||
border-width: 1px 0;
|
||||
background-color: unset;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.wpaw-question-card .wpaw-config-form .wpaw-config-field input[type=text] {
|
||||
background-color: #1a1a1a!important;
|
||||
background-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-question-card {
|
||||
@@ -1533,6 +1499,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-question-card textarea {
|
||||
background: #252830;
|
||||
color: white;
|
||||
@@ -1542,12 +1509,15 @@ input.wpaw-plan-section-check:checked::before {
|
||||
letter-spacing: 1px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-question-card textarea::placeholder {
|
||||
color: #6c6c6c
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-question-card textarea::focus,
|
||||
.dark-theme .wpaw-question-card textarea::active {
|
||||
border-color: #252830!important;;
|
||||
border-color: #252830 !important;
|
||||
;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
@@ -1649,8 +1619,9 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
@media (max-width: 482px) {
|
||||
|
||||
.interface-complementary-area__fill:has(#wp-agentic-writer\:wp-agentic-writer),
|
||||
#wp-agentic-writer\:wp-agentic-writer {
|
||||
#wp-agentic-writer\:wp-agentic-writer {
|
||||
width: 100vw !important;
|
||||
}
|
||||
}
|
||||
@@ -1995,6 +1966,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
color: #fff;
|
||||
border-bottom-color: #2271b1;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
UI REVAMP - PHASE 2
|
||||
=========================== */
|
||||
@@ -2090,8 +2062,8 @@ input.wpaw-plan-section-check:checked::before {
|
||||
|
||||
/* Web Search Toggle */
|
||||
.wpaw-web-search-toggle {
|
||||
display: flex!important;
|
||||
margin-bottom: 0!important;
|
||||
display: flex !important;
|
||||
margin-bottom: 0 !important;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
@@ -2114,11 +2086,11 @@ input.wpaw-plan-section-check:checked::before {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.wpaw-web-search-toggle input:checked + .wpaw-web-search-icon {
|
||||
.wpaw-web-search-toggle input:checked+.wpaw-web-search-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wpaw-web-search-toggle input:checked + .wpaw-web-search-icon * {
|
||||
.wpaw-web-search-toggle input:checked+.wpaw-web-search-icon * {
|
||||
stroke: #4caf50;
|
||||
}
|
||||
|
||||
@@ -2131,10 +2103,25 @@ input.wpaw-plan-section-check:checked::before {
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.wpaw-web-search-toggle input:checked ~ .wpaw-web-search-label {
|
||||
.wpaw-web-search-toggle input:checked~.wpaw-web-search-label {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
/* Blocked state (no Brave API key for local models) */
|
||||
.wpaw-web-search-toggle.wpaw-search-blocked {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.wpaw-web-search-toggle.wpaw-search-blocked:hover {
|
||||
background: rgba(255, 80, 80, 0.08);
|
||||
}
|
||||
|
||||
.wpaw-web-search-toggle.wpaw-search-blocked .wpaw-web-search-label {
|
||||
color: #ff6b6b;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.wpaw-command-text-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
@@ -2149,7 +2136,8 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
.wpaw-command-text-btn:hover {
|
||||
color: #d63638; /* Red on hover for clear */
|
||||
color: #d63638;
|
||||
/* Red on hover for clear */
|
||||
}
|
||||
|
||||
.wpaw-command-stop-btn {
|
||||
@@ -2181,8 +2169,8 @@ input.wpaw-plan-section-check:checked::before {
|
||||
|
||||
/* Circle Icon Buttons */
|
||||
.wpaw-command-circle-btn {
|
||||
width: 40px!important;
|
||||
height: 40px!important;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -2221,14 +2209,15 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
.wpaw-command-circle-btn svg {
|
||||
width: 20px!important;
|
||||
height: 20px!important;
|
||||
margin-bottom: unset!important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin-bottom: unset !important;
|
||||
}
|
||||
|
||||
/* Dark Theme Tabs (Config & Cost) */
|
||||
.wpaw-tab-content.dark-theme {
|
||||
background: #1d2227; /* Match status bar / command area */
|
||||
background: #1d2227;
|
||||
/* Match status bar / command area */
|
||||
color: #fff;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
@@ -2290,7 +2279,7 @@ input.wpaw-plan-section-check:checked::before {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.wpaw-select,
|
||||
.wpaw-select,
|
||||
.wpaw-tab-content.dark-theme input[type="text"],
|
||||
.wpaw-tab-content.dark-theme select {
|
||||
background: #252830 !important;
|
||||
@@ -2535,18 +2524,18 @@ input.wpaw-plan-section-check:checked::before {
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-meta-info > button.components-button.is-secondary.is-small {
|
||||
outline: unset!important;
|
||||
.wpaw-meta-info>button.components-button.is-secondary.is-small {
|
||||
outline: unset !important;
|
||||
color: #fbbf24;
|
||||
border: 1px solid #fbbf24;
|
||||
box-shadow: unset!important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
|
||||
.wpaw-seo-audit-header .components-button.is-secondary.is-small {
|
||||
outline: unset!important;
|
||||
outline: unset !important;
|
||||
color: #4ade80;
|
||||
border: 1px solid #4ade80;
|
||||
box-shadow: unset!important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
|
||||
.wpaw-spinning-icon svg {
|
||||
@@ -2554,8 +2543,13 @@ input.wpaw-plan-section-check:checked::before {
|
||||
}
|
||||
|
||||
@keyframes wpaw-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
@@ -2642,24 +2636,30 @@ input.wpaw-plan-section-check:checked::before {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wpaw-context-count {
|
||||
/* .wpaw-context-count {
|
||||
color: #0066cc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.wpaw-context-tokens {
|
||||
color: #666;
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-context-cost {
|
||||
color: #28a745;
|
||||
color: #a7aaad;
|
||||
font-weight: 600;
|
||||
} */
|
||||
|
||||
.wpaw-context-count,
|
||||
.wpaw-context-tokens,
|
||||
.wpaw-context-cost {
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-context-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0066cc;
|
||||
color: #a7aaad;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
@@ -2679,6 +2679,353 @@ input.wpaw-plan-section-check:checked::before {
|
||||
transition: min-height 0.3s ease;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
FOCUS KEYWORD BAR
|
||||
=========================== */
|
||||
.wpaw-focus-keyword-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 10px;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wpaw-focus-keyword-bar.wpaw-compact {
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.wpaw-focus-keyword-bar.wpaw-expanded {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.wpaw-fk-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wpaw-fk-icon {
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpaw-fk-select,
|
||||
.wpaw-fk-select-full {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-fk-select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.wpaw-fk-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-fk-input:focus {
|
||||
border-color: #007cba;
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-fk-input::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.wpaw-fk-select-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input:focus {
|
||||
border-color: #007cba;
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.wpaw-fk-select:focus,
|
||||
.wpaw-fk-select-full:focus {
|
||||
border-color: #007cba;
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-fk-select:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.wpaw-fk-select option,
|
||||
.wpaw-fk-select-full option {
|
||||
background: #1e1e1e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpaw-fk-cost {
|
||||
color: #a7aaad;
|
||||
font-size: 11px;
|
||||
font-family: ui-monospace, monospace;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpaw-fk-expand,
|
||||
.wpaw-fk-collapse {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #a7aaad;
|
||||
cursor: pointer;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-fk-expand:hover,
|
||||
.wpaw-fk-collapse:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpaw-fk-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-fk-main-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: #fff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input:focus {
|
||||
border-color: #007cba;
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-fk-custom-input::placeholder {
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestions {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestions-label {
|
||||
font-size: 11px;
|
||||
color: #a7aaad;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestion-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestion-item.selected {
|
||||
background: rgba(0, 124, 186, 0.2);
|
||||
}
|
||||
|
||||
.wpaw-fk-radio {
|
||||
color: #007cba;
|
||||
font-size: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestion-text {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wpaw-fk-suggestion-source {
|
||||
color: #666;
|
||||
font-size: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpaw-fk-stats {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: #a7aaad;
|
||||
font-family: ui-monospace, monospace;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.wpaw-fk-divider {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
WELCOME SCREEN
|
||||
=========================== */
|
||||
.wpaw-welcome-screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1.5rem;
|
||||
text-align: center;
|
||||
min-height: 400px;
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.wpaw-welcome-content {
|
||||
max-width: 320px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpaw-welcome-icon {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-welcome-icon svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.wpaw-welcome-title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpaw-welcome-subtitle {
|
||||
margin: 0 0 1.5rem 0;
|
||||
font-size: 0.95rem;
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-welcome-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-bottom: 1rem;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-welcome-input:focus {
|
||||
outline: none;
|
||||
border-color: #2271b1;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-welcome-input::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.wpaw-welcome-pills {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.wpaw-welcome-pill {
|
||||
flex: 1;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
color: #a7aaad;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-welcome-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpaw-welcome-pill.active {
|
||||
background: rgba(34, 113, 177, 0.2);
|
||||
border-color: #2271b1;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-welcome-start-btn {
|
||||
width: 100%;
|
||||
padding: 12px 24px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
CONTEXTUAL ACTION CARDS
|
||||
=========================== */
|
||||
@@ -2730,15 +3077,15 @@ input.wpaw-plan-section-check:checked::before {
|
||||
|
||||
/* Variant for different intent types */
|
||||
.wpaw-contextual-action.intent-create-outline {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, #2271b1 0%, #135e96 100%);
|
||||
}
|
||||
|
||||
.wpaw-contextual-action.intent-start-writing {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
background: linear-gradient(135deg, #d63638 0%, #8a1e1e 100%);
|
||||
}
|
||||
|
||||
.wpaw-contextual-action.intent-refine-content {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
background: linear-gradient(135deg, #2271b1 0%, #00a32a 100%);
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
@@ -2772,8 +3119,97 @@ input.wpaw-plan-section-check:checked::before {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
P2: TYPING ANIMATION
|
||||
=========================== */
|
||||
@keyframes wpaw-typewriter-cursor {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: #a7aaad;
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-typing-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 12px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.wpaw-typing-dots {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.wpaw-typing-dots span {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #a7aaad;
|
||||
border-radius: 50%;
|
||||
animation: wpaw-typing-bounce 1.2s infinite;
|
||||
}
|
||||
|
||||
.wpaw-typing-dots span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-typing-dots span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes wpaw-typing-bounce {
|
||||
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateY(-4px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* P3: KEYBOARD HINTS */
|
||||
.wpaw-keyboard-hints {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 6px 0 0;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: #50575e;
|
||||
}
|
||||
|
||||
.wpaw-kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wpaw-kbd kbd {
|
||||
background: #2c2c2c;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 2px;
|
||||
padding: 1px 4px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
color: #a7aaad;
|
||||
}
|
||||
Reference in New Issue
Block a user