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
@@ -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