690991c526
Major refactoring cleanup: - Add new controller architecture (class-controller-*.php) - Add new settings-v2 UI (views/settings-v2/) - Add new CSS architecture (agentic-sidebar.css, tokens) - Add esbuild build pipeline (scripts/build.js, package.json) - Add composer dependencies (vendor/) - Add frontend src directory (assets/js/src/index.jsx) - Add documentation files - Remove old/obsolete files (class-settings.php, old CSS) This commits all pending changes from previous refactoring efforts.
2656 lines
66 KiB
CSS
2656 lines
66 KiB
CSS
/**
|
|
* WP Agentic Writer — Dark Sidebar Override (Stitch Design System)
|
|
*
|
|
* This file is loaded AFTER agentic-sidebar.css to override the light theme
|
|
* with a dark sidebar that matches the Stitch design references.
|
|
*
|
|
* The sidebar is ALWAYS dark (--aw-inverse-surface: #2c3137).
|
|
* All text, borders, inputs, and interactive elements are overridden
|
|
* for dark-context legibility.
|
|
*
|
|
* Three reference patterns:
|
|
* Pattern 1 — Welcome/Empty Chat
|
|
* Pattern 2 — Clarity Quiz (Dark)
|
|
* Pattern 3 — Executing/Writing (Dark + animated)
|
|
*
|
|
* @package WP_Agentic_Writer
|
|
* @since 0.4.0
|
|
*/
|
|
|
|
/* =========================================================================
|
|
0. DARK THEME TOKEN OVERRIDES
|
|
========================================================================= */
|
|
|
|
#wp-agentic-writer\:wp-agentic-writer {
|
|
--aw-dark-surface: #2c3137;
|
|
--aw-dark-surface-deep: #1e1e1e;
|
|
--aw-dark-surface-deeper: #121212;
|
|
--aw-dark-bubble: #2d2d2d;
|
|
--aw-dark-text: #edf1f9;
|
|
--aw-dark-text-muted: #8b95a5;
|
|
--aw-dark-accent: #92ccff;
|
|
--aw-dark-accent-bright: #007cba;
|
|
--aw-dark-border: rgba(255, 255, 255, 0.1);
|
|
--aw-dark-border-subtle: rgba(255, 255, 255, 0.05);
|
|
--aw-dark-border-strong: rgba(255, 255, 255, 0.2);
|
|
--aw-dark-card-bg: rgba(255, 255, 255, 0.05);
|
|
--aw-dark-option-bg: rgba(64, 72, 80, 0.1);
|
|
--aw-dark-option-bg-active: rgba(64, 72, 80, 0.2);
|
|
--aw-dark-progress-track: rgba(0, 0, 0, 0.4);
|
|
--aw-dark-selected-pill: rgba(0, 124, 186, 0.2);
|
|
--aw-dark-scrollbar: #404850;
|
|
--aw-dark-scrollbar-hover: #707881;
|
|
}
|
|
|
|
/* =========================================================================
|
|
1. ROOT SCAFFOLDING — Dark Background
|
|
========================================================================= */
|
|
|
|
#wp-agentic-writer\:wp-agentic-writer .components-panel,
|
|
#wp-agentic-writer\:wp-agentic-writer .components-panel__body {
|
|
background: var(--aw-dark-surface) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
2. TAB NAVIGATION — Bottom to Top Restyle
|
|
========================================================================= */
|
|
|
|
/*
|
|
* The bottom tab bar is rendered as the LAST child of .wpaw-tab-content-wrapper.
|
|
* We use order: -1 to visually move it to the top and restyle as a top nav bar
|
|
* with dark theme colors.
|
|
*/
|
|
|
|
/* The wrapper must use order-aware layout */
|
|
.wpaw-tab-content-wrapper {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
/* Move bottom tab bar to the top via flexbox order */
|
|
.wpaw-bottom-tab-bar {
|
|
order: -1 !important;
|
|
border-top: none !important;
|
|
border-bottom: 1px solid var(--aw-dark-border) !important;
|
|
background: var(--aw-dark-surface) !important;
|
|
position: static !important;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.wpaw-bottom-tab-btn {
|
|
border-top: 2px solid transparent !important;
|
|
border-bottom: 2px solid transparent !important;
|
|
color: var(--aw-dark-text-muted) !important;
|
|
transition:
|
|
color 150ms ease-out,
|
|
border-color 150ms ease-out,
|
|
background 150ms ease-out;
|
|
}
|
|
|
|
.wpaw-bottom-tab-btn:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
background: rgba(255, 255, 255, 0.05) !important;
|
|
}
|
|
|
|
.wpaw-bottom-tab-btn.active {
|
|
color: var(--aw-dark-accent) !important;
|
|
font-weight: 700 !important;
|
|
border-bottom-color: var(--aw-dark-accent-bright) !important;
|
|
border-top-color: transparent !important;
|
|
}
|
|
|
|
/* Also restyle the top tab navigation (.wpaw-tabs) if present */
|
|
.wpaw-tabs {
|
|
background: var(--aw-dark-surface) !important;
|
|
border-bottom-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-tab-btn {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-tab-btn:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-tab-btn.active {
|
|
color: var(--aw-dark-accent) !important;
|
|
border-bottom-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
/* Minimal tabs variant */
|
|
.wpaw-tabs-minimal .wpaw-tab-btn {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-tabs-minimal .wpaw-tab-btn:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-tabs-minimal .wpaw-tab-btn.active {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
3. CHAT AREA — Dark Backgrounds
|
|
========================================================================= */
|
|
|
|
.wpaw-chat-tab {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-chat-container {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-messages {
|
|
background: var(--aw-dark-surface) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-messages-inner {
|
|
/*background: var(--aw-dark-surface) !important;*/
|
|
background: #1f2327 !important;
|
|
}
|
|
|
|
/* Dark scrollbar */
|
|
.wpaw-messages-inner::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.wpaw-messages-inner::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.wpaw-messages-inner::-webkit-scrollbar-thumb {
|
|
background: var(--aw-dark-scrollbar) !important;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.wpaw-messages-inner::-webkit-scrollbar-thumb:hover {
|
|
background: var(--aw-dark-scrollbar-hover) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
4. STATUS BAR — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-status-bar {
|
|
background: var(--aw-dark-surface) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
border-bottom-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-status-label {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-status-cost {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Status dot — green for idle on dark */
|
|
.wpaw-status-dot.idle {
|
|
background: #4caf50 !important;
|
|
}
|
|
|
|
/* Active states use the accent blue */
|
|
.wpaw-status-dot.checking,
|
|
.wpaw-status-dot.refining,
|
|
.wpaw-status-dot.writing {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
/* Green-dot animation for header avatar indicator */
|
|
@keyframes blink {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* =========================================================================
|
|
5. MESSAGES — Dark Bubbles
|
|
========================================================================= */
|
|
|
|
/* AI message bubble — always #2d2d2d with rounded corners */
|
|
.wpaw-message {
|
|
background: var(--aw-dark-bubble) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
/* First AI message gets top-left flatten */
|
|
.wpaw-message:not(.wpaw-message-user):not(.wpaw-message-error):first-of-type,
|
|
.wpaw-message:first-child {
|
|
border-top-left-radius: 0 !important;
|
|
}
|
|
|
|
/* User message — accent blue background on dark */
|
|
.wpaw-message-user {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
/* Error message — red on dark */
|
|
.wpaw-message-error {
|
|
background: rgba(186, 26, 26, 0.2) !important;
|
|
border-color: #ba1a1a !important;
|
|
border-left-color: #ba1a1a !important;
|
|
color: #ff8a80 !important;
|
|
}
|
|
|
|
.wpaw-message-error .wpaw-error-title {
|
|
color: #ff8a80 !important;
|
|
}
|
|
|
|
.wpaw-message-error .wpaw-error-detail {
|
|
color: #ffab91 !important;
|
|
}
|
|
|
|
.wpaw-message-error details summary {
|
|
color: #ff8a80 !important;
|
|
}
|
|
|
|
.wpaw-message-error button.is-secondary {
|
|
background: rgba(186, 26, 26, 0.3) !important;
|
|
color: #ff8a80 !important;
|
|
border-color: #ba1a1a !important;
|
|
}
|
|
|
|
.wpaw-message-error button.is-secondary:hover {
|
|
background: rgba(186, 26, 26, 0.45) !important;
|
|
}
|
|
|
|
/* Research message */
|
|
.wpaw-message[type="research"] {
|
|
background: var(--aw-dark-bubble) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
border-left-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
/* Message content */
|
|
.wpaw-message-content {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-citation {
|
|
color: var(--aw-dark-accent) !important;
|
|
background: var(--aw-dark-selected-pill) !important;
|
|
}
|
|
|
|
/* Links in messages */
|
|
.wpaw-message-error a,
|
|
.wpaw-message a[rel="noopener"] {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-message-error a:hover,
|
|
.wpaw-message a[rel="noopener"]:hover {
|
|
color: #b4dbff !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
6. AI RESPONSE & ITERATION HISTORY
|
|
========================================================================= */
|
|
|
|
.wpaw-ai-response {
|
|
border-left-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
/* Iteration history timeline — dark variant */
|
|
.wpaw-timeline-entry {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-timeline-entry.inactive {
|
|
border-color: var(--aw-dark-border) !important;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.wpaw-timeline-entry.complete {
|
|
background: rgba(0, 108, 28, 0.08) !important;
|
|
}
|
|
|
|
/* Timeline dots */
|
|
.wpaw-timeline-dot {
|
|
background: var(--aw-dark-surface) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
/* Active/current iteration dot — blue accent */
|
|
.wpaw-timeline-entry.is-current .wpaw-timeline-dot {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.5) !important;
|
|
}
|
|
|
|
/* Completed iteration dot */
|
|
.wpaw-timeline-entry.complete .wpaw-timeline-dot {
|
|
background: rgba(0, 108, 28, 0.15) !important;
|
|
border-color: #4caf50 !important;
|
|
box-shadow: 0 0 0 1px #4caf50 !important;
|
|
}
|
|
|
|
/* Old/inactive dot */
|
|
.wpaw-timeline-entry.inactive .wpaw-timeline-dot {
|
|
background: rgba(255, 255, 255, 0.2) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.wpaw-timeline-content {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-timeline-message {
|
|
color: rgba(237, 241, 249, 0.7) !important;
|
|
}
|
|
|
|
.wpaw-timeline-complete {
|
|
color: #4caf50 !important;
|
|
}
|
|
|
|
.wpaw-timeline-elapsed {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Timeline colored lines */
|
|
.wpaw-timeline-entry.active:not(:first-of-type)::before {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-timeline-entry.complete:not(:first-of-type)::before {
|
|
background: #4caf50 !important;
|
|
}
|
|
|
|
/* Pulse ring for active dot */
|
|
@keyframes pulse-ring-dark {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(0, 124, 186, 0.6);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 6px rgba(0, 124, 186, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(0, 124, 186, 0);
|
|
}
|
|
}
|
|
|
|
.wpaw-timeline-entry.is-current .wpaw-timeline-dot {
|
|
animation: pulse-ring-dark 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
7. INPUT AREA — Dark Backgrounds
|
|
========================================================================= */
|
|
|
|
.wpaw-input-area {
|
|
background: var(--aw-dark-surface) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-input-label {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Mode select dropdown */
|
|
.wpaw-mode-select {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-mode-select:hover {
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
}
|
|
|
|
.wpaw-mode-select:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
#agentMode {
|
|
background-color: var(--aw-dark-option-bg) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Command input area */
|
|
.wpaw-command-area {
|
|
background: var(--aw-dark-surface) !important;
|
|
border-top-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-command-toolbar {
|
|
/* inherits from command area */
|
|
}
|
|
|
|
.wpaw-command-mode {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-command-mode-value {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* Command input wrapper — textarea background */
|
|
.wpaw-command-input-wrapper {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-command-input-wrapper textarea,
|
|
.wpaw-command-input-wrapper .components-textarea-control__input {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-command-input-wrapper textarea::placeholder {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-command-prefix {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* Expanded input — darker */
|
|
.wpaw-command-input-wrapper.expanded textarea {
|
|
/* inherits dark */
|
|
}
|
|
|
|
/* =========================================================================
|
|
8. WELCOME SCREEN — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-welcome-screen {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-welcome-title {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-welcome-subtitle {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-welcome-icon {
|
|
color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
/* Welcome input field */
|
|
.wpaw-welcome-input {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.wpaw-welcome-input:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.3) !important;
|
|
}
|
|
|
|
.wpaw-welcome-input::placeholder {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Suggestion chips */
|
|
.wpaw-welcome-pills button {
|
|
/* reset */
|
|
}
|
|
|
|
.wpaw-welcome-pill {
|
|
background: transparent !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
border-radius: 9999px !important;
|
|
}
|
|
|
|
.wpaw-welcome-pill:hover {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-welcome-pill.active {
|
|
background: var(--aw-dark-selected-pill) !important;
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* Session list */
|
|
.wpaw-session-list {
|
|
/* inherits dark */
|
|
}
|
|
|
|
.wpaw-session-open-btn:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Start button */
|
|
.wpaw-welcome-start-btn {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
9. CLARIFICATION QUIZ — Dark Context
|
|
========================================================================= */
|
|
|
|
.wpaw-clarification-quiz {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-quiz-header h3 {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-quiz-header span {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Quiz progress bar */
|
|
.wpaw-progress-bar {
|
|
background: var(--aw-dark-progress-track) !important;
|
|
}
|
|
|
|
.wpaw-progress-fill {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
/* Question cards */
|
|
.wpaw-question-card {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-question-card h4 {
|
|
color: var(--aw-dark-text) !important;
|
|
font: var(--aw-text-label-caps) !important;
|
|
letter-spacing: var(--aw-tracking-label-caps) !important;
|
|
text-transform: uppercase !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
/* Answer option buttons */
|
|
.wpaw-answer-options label {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.wpaw-answer-options label:hover {
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
}
|
|
|
|
/* Selected option */
|
|
.wpaw-answer-options label:has(input:checked) {
|
|
border-color: rgba(0, 124, 186, 0.5) !important;
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
/* Quiz textarea */
|
|
.wpaw-answer-options textarea {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-answer-options textarea:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.3) !important;
|
|
}
|
|
|
|
/* Previous answers */
|
|
.wpaw-previous-answers {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-previous-answers strong {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-question-label {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-answer-text {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Custom answer input */
|
|
.wpaw-custom-answer-wrapper {
|
|
border-top-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-custom-text-input {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-custom-text-input:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
/* Quiz action buttons */
|
|
.wpaw-quiz-actions button.is-primary {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
border-radius: 8px !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.wpaw-quiz-actions button.is-secondary {
|
|
border: 1px solid var(--aw-dark-accent-bright) !important;
|
|
color: var(--aw-dark-accent-bright) !important;
|
|
border-radius: 8px !important;
|
|
font-weight: 700 !important;
|
|
box-shadow: none;
|
|
background-color: #007cba0f !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
10. PLAN CARDS & SECTIONS — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-plan-card,
|
|
.wpaw-edit-plan {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.wpaw-plan-card:hover {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
|
|
.wpaw-plan-title {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-plan-section-status {
|
|
/* inherits */
|
|
}
|
|
|
|
.wpaw-plan-section.pending .wpaw-plan-section-status {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: var(--aw-dark-option-bg) !important;
|
|
}
|
|
|
|
.wpaw-plan-section.done .wpaw-plan-section-status {
|
|
color: #4caf50 !important;
|
|
background: rgba(76, 175, 80, 0.15) !important;
|
|
}
|
|
|
|
.wpaw-plan-section.in_progress .wpaw-plan-section-status {
|
|
color: var(--aw-dark-accent) !important;
|
|
background: rgba(0, 124, 186, 0.15) !important;
|
|
}
|
|
|
|
.wpaw-plan-sections,
|
|
.wpaw-edit-plan-list {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-plan-section {
|
|
/* inherits */
|
|
}
|
|
|
|
.wpaw-plan-section-title {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-plan-section-desc {
|
|
color: rgba(237, 241, 249, 0.7) !important;
|
|
}
|
|
|
|
/* Plan section edit */
|
|
.wpaw-plan-section-edit-input {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-plan-section-edit-input:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-plan-section-edit-save {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
.wpaw-plan-section-edit-cancel {
|
|
background: transparent !important;
|
|
color: var(--aw-dark-text-muted) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-plan-section-edit-cancel:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
}
|
|
|
|
.wpaw-plan-section-wordcount {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Edit plan items */
|
|
.wpaw-edit-plan-item {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
|
|
.wpaw-edit-plan-item-target {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-edit-plan-item-target:hover:not(:disabled) {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-edit-plan-item-target:disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.wpaw-edit-plan-accept-btn {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
.wpaw-edit-plan-reject-btn {
|
|
background: transparent !important;
|
|
color: var(--aw-dark-text-muted) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-edit-plan-reject-btn:hover {
|
|
color: #ff8a80 !important;
|
|
border-color: #ba1a1a !important;
|
|
}
|
|
|
|
/* Plan header */
|
|
.wpaw-plan-header {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-plan-version {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
11. BUTTONS & ACTIONS — Dark Context
|
|
========================================================================= */
|
|
|
|
/* Primary buttons */
|
|
.wpaw-actions .is-primary,
|
|
.wpaw-actions .components-button.is-primary,
|
|
.wpaw-plan-actions .is-primary {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
.wpaw-actions .is-primary:hover,
|
|
.wpaw-actions .components-button.is-primary:hover,
|
|
.wpaw-plan-actions .is-primary:hover {
|
|
background: #005f8a !important;
|
|
border-color: #005f8a !important;
|
|
}
|
|
|
|
.wpaw-actions .is-primary:disabled {
|
|
background: var(--aw-dark-text-muted) !important;
|
|
border-color: var(--aw-dark-text-muted) !important;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Command buttons */
|
|
.wpaw-command-btn {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
.wpaw-command-btn:hover {
|
|
background: #005f8a !important;
|
|
}
|
|
|
|
.wpaw-command-btn:disabled {
|
|
background: var(--aw-dark-text-muted) !important;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.wpaw-command-btn.secondary {
|
|
background: transparent !important;
|
|
color: var(--aw-dark-text) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
}
|
|
|
|
.wpaw-command-btn.secondary:hover {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
}
|
|
|
|
/* Circle buttons */
|
|
.wpaw-command-circle-btn {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
.wpaw-send-circle-btn {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
.wpaw-send-circle-btn:hover:not(:disabled) {
|
|
box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.4) !important;
|
|
}
|
|
|
|
.wpaw-send-circle-btn:disabled {
|
|
background: var(--aw-dark-text-muted) !important;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.wpaw-stop-circle-btn {
|
|
background: #c2410c !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
.wpaw-stop-circle-btn.is-stopping,
|
|
.wpaw-stop-circle-btn.is-stopping:hover {
|
|
background: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Command stop button */
|
|
.wpaw-command-stop-btn {
|
|
background: rgba(194, 65, 12, 0.2) !important;
|
|
color: #ff8a80 !important;
|
|
border-color: #c2410c !important;
|
|
}
|
|
|
|
.wpaw-command-stop-btn:hover {
|
|
background: rgba(194, 65, 12, 0.3) !important;
|
|
}
|
|
|
|
/* Text buttons */
|
|
.wpaw-command-text-btn {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-command-text-btn:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Status action buttons */
|
|
.wpaw-status-icon-btn {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-status-icon-btn:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
background: var(--aw-dark-card-bg) !important;
|
|
}
|
|
|
|
.wpaw-status-icon-btn:disabled {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Undo button */
|
|
.wpaw-undo-btn {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-undo-btn:hover:not(:disabled) {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Back button */
|
|
.wpaw-back-btn {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-back-btn:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Link button */
|
|
.wpaw-link-button {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-link-button:hover {
|
|
color: var(--aw-dark-accent) !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Session delete button */
|
|
.wpaw-session-delete {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-session-delete:hover {
|
|
color: #ff8a80 !important;
|
|
background: rgba(186, 26, 26, 0.2) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
12. CONFIG TAB — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-config-tab {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-config-tab .wpaw-config-unavailable {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-config-tab h3 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-config-section {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-config-section:hover {
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
}
|
|
|
|
.wpaw-config-section label {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-config-section h4 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Select dropdown */
|
|
.wpaw-select {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-select:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
/* Tab content inputs */
|
|
.wpaw-select,
|
|
.wpaw-tab-content input[type="text"],
|
|
.wpaw-tab-content select {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-tab-content input[type="text"]::placeholder {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-tab-content .description,
|
|
.wpaw-tab-content .components-checkbox-control__help {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-tab-content textarea {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-tab-content textarea::placeholder {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-tab-content label {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-tab-content.wpaw-insights-tab,
|
|
.wpaw-tab-content.wpaw-config-tab {
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Config divider */
|
|
.wpaw-config-divider {
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-config-divider span {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
/* Config form fields */
|
|
.wpaw-config-field {
|
|
/* inherits */
|
|
}
|
|
|
|
.wpaw-config-label-text {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-config-description {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Toggle slider */
|
|
.wpaw-toggle-slider {
|
|
background: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-toggle-slider:before {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-config-toggle input:checked + .wpaw-toggle-slider {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-config-text-input {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-config-text-input:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-config-text-input::placeholder {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Generic input */
|
|
.wpaw-input {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Meta info */
|
|
.wpaw-meta-info span {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-meta-info span.good {
|
|
color: #4caf50 !important;
|
|
}
|
|
|
|
.wpaw-meta-info span.warning {
|
|
color: #ff9800 !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
13. COST TAB — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-tab-content.wpaw-cost-tab {
|
|
overflow: auto;
|
|
}
|
|
|
|
.wpaw-cost-tab {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-cost-tab h3 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-cost-card {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-cost-stat {
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-cost-stat:hover {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
}
|
|
|
|
.wpaw-cost-stat label {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-cost-value {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Budget bar */
|
|
.wpaw-budget-bar {
|
|
background: var(--aw-dark-progress-track) !important;
|
|
}
|
|
|
|
.wpaw-budget-fill {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-budget-fill.warning {
|
|
background: #ff9800 !important;
|
|
}
|
|
|
|
.wpaw-budget-fill.danger {
|
|
background: #ba1a1a !important;
|
|
}
|
|
|
|
.wpaw-budget-bar ~ .description {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-budget-label {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-budget-warning {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-budget-warning.warning {
|
|
color: #ff9800 !important;
|
|
}
|
|
|
|
.wpaw-budget-warning.danger {
|
|
color: #ff8a80 !important;
|
|
}
|
|
|
|
/* Cost table */
|
|
.wpaw-cost-table-wrapper {
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-cost-table {
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-cost-table thead {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
}
|
|
|
|
.wpaw-cost-table th {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-cost-table td {
|
|
color: var(--aw-dark-text) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-cost-table tbody tr:hover {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
}
|
|
|
|
/* Cost colors */
|
|
.wpaw-cost-value.ok {
|
|
color: #4caf50 !important;
|
|
}
|
|
|
|
.wpaw-cost-value.warning {
|
|
color: #ff9800 !important;
|
|
}
|
|
|
|
.wpaw-cost-value.danger {
|
|
color: #ff8a80 !important;
|
|
}
|
|
|
|
.wpaw-cost-remaining .wpaw-cost-value {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* Cost footer */
|
|
.wpaw-cost-footer {
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-cost-settings-link {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-cost-settings-link:hover {
|
|
color: #b4dbff !important;
|
|
}
|
|
|
|
/* Cost history */
|
|
.wpaw-cost-history h4 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Refresh button */
|
|
.wpaw-refresh-btn {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.wpaw-refresh-btn:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
background: var(--aw-dark-card-bg) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
14. ACTIVITY LOG — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-activity-log {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-log-entry {
|
|
border-bottom-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
/* User command */
|
|
.wpaw-log-entry.user-command {
|
|
background: rgba(0, 124, 186, 0.1) !important;
|
|
border-left-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-log-entry.user-command::before {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* Agent status */
|
|
.wpaw-log-entry.agent-status {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-log-entry.agent-status::before {
|
|
color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-log-entry.agent-status.active::before {
|
|
color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
/* Agent success */
|
|
.wpaw-log-entry.agent-success {
|
|
border-left-color: #4caf50 !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-log-entry.agent-success::before {
|
|
color: #4caf50 !important;
|
|
}
|
|
|
|
/* Agent error */
|
|
.wpaw-log-entry.agent-error {
|
|
background: rgba(186, 26, 26, 0.15) !important;
|
|
border-left-color: #ba1a1a !important;
|
|
color: #ff8a80 !important;
|
|
}
|
|
|
|
.wpaw-log-entry.agent-error::before {
|
|
color: #ff8a80 !important;
|
|
}
|
|
|
|
/* Agent response */
|
|
.wpaw-log-entry.agent-response {
|
|
border-left-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
15. WORKSPACE CARDS — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-agent-workspace-card {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-agent-workspace-header {
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-agent-workspace-heading {
|
|
/* inherits */
|
|
}
|
|
|
|
.wpaw-agent-workspace-kicker {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-agent-workspace-title {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-agent-workspace-status {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: var(--aw-dark-option-bg) !important;
|
|
}
|
|
|
|
.wpaw-agent-workspace-toggle {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-agent-workspace-toggle:hover,
|
|
.wpaw-agent-workspace-toggle:focus {
|
|
color: var(--aw-dark-text) !important;
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
}
|
|
|
|
/* Context grid */
|
|
.wpaw-agent-context-grid {
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-agent-context-item {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-agent-context-item span {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-agent-context-item strong {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Keyword input */
|
|
.wpaw-agent-keyword-input {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-agent-keyword-input:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
/* Resume card */
|
|
.wpaw-agent-resume-card {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-agent-resume-card strong {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-agent-resume-card span {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
16. HISTORY TAB — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-history-tab {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-history-header h3 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-history-count {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-history-empty {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-history-empty p {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-history-item {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-history-item:hover {
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
}
|
|
|
|
.wpaw-history-item.active {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-history-item-title {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-history-item-meta {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-history-restore-btn {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-history-restore-btn:hover {
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-history-item.active .wpaw-history-restore-btn {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-history-delete-btn {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.wpaw-history-delete-btn:hover {
|
|
color: #ff8a80 !important;
|
|
background: rgba(186, 26, 26, 0.2) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
17. INSIGHTS TAB — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-insights-tab {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-insights-header h3 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-insights-refresh-btn {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: transparent !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-insights-refresh-btn:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
}
|
|
|
|
.wpaw-insights-card {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-insights-card-title {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-insights-stat-value {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-insights-stat-label {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Budget section */
|
|
.wpaw-insights-budget-label {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-insights-budget-track {
|
|
background: var(--aw-dark-progress-track) !important;
|
|
}
|
|
|
|
.wpaw-insights-budget-fill {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-insights-budget-fill.warning {
|
|
background: #ff9800 !important;
|
|
}
|
|
|
|
.wpaw-insights-budget-fill.danger {
|
|
background: #ba1a1a !important;
|
|
}
|
|
|
|
/* Activity list */
|
|
.wpaw-insights-activity-item {
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-insights-activity-item:nth-child(even) {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
}
|
|
|
|
.wpaw-insights-activity-action {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-insights-activity-cost {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-insights-settings-link {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-insights-settings-link:hover {
|
|
color: #b4dbff !important;
|
|
}
|
|
|
|
.wpaw-insights-audit-btn {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-insights-audit-btn:hover {
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
18. SEO TAB — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-seo-tab {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-seo-header h3 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-seo-section h4 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-seo-field input,
|
|
.wpaw-seo-field textarea {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-seo-field input:focus,
|
|
.wpaw-seo-field textarea:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-char-count {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* SEO preview */
|
|
.wpaw-seo-preview {
|
|
background: #ffffff !important;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.wpaw-seo-preview-title {
|
|
color: #1a0dab !important;
|
|
}
|
|
|
|
.wpaw-seo-preview-url {
|
|
color: #006621 !important;
|
|
}
|
|
|
|
.wpaw-seo-preview-desc {
|
|
color: #545454 !important;
|
|
}
|
|
|
|
/* SEO audit */
|
|
.wpaw-seo-audit-header label {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-seo-score {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-seo-score .score-value {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-seo-score .score-label {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-seo-stat .stat-label {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-seo-stat .stat-value {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-seo-check {
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-seo-check .check-label {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-seo-fix-button.components-button.is-secondary.is-small {
|
|
color: var(--aw-dark-accent) !important;
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.wpaw-seo-fix-button.components-button.is-secondary.is-small:hover:not(
|
|
:disabled
|
|
),
|
|
.wpaw-seo-fix-button.components-button.is-secondary.is-small:focus:not(
|
|
:disabled
|
|
) {
|
|
background: var(--aw-dark-selected-pill) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* Score colors */
|
|
.wpaw-seo-score.good,
|
|
.wpaw-score-value.good {
|
|
color: #4caf50 !important;
|
|
}
|
|
|
|
.wpaw-seo-score.warning,
|
|
.wpaw-score-value.warning {
|
|
color: #ff9800 !important;
|
|
}
|
|
|
|
.wpaw-seo-score.poor,
|
|
.wpaw-score-value.bad {
|
|
color: #ff8a80 !important;
|
|
}
|
|
|
|
/* Issue items */
|
|
.wpaw-issue-item {
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-issue-name {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-issue-message {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-issue-item.good .wpaw-issue-severity {
|
|
color: #4caf50 !important;
|
|
background: rgba(76, 175, 80, 0.15) !important;
|
|
}
|
|
|
|
.wpaw-issue-item.error .wpaw-issue-severity,
|
|
.wpaw-issue-item.failed .wpaw-issue-severity {
|
|
color: #ff8a80 !important;
|
|
background: rgba(186, 26, 26, 0.2) !important;
|
|
}
|
|
|
|
.wpaw-issue-item.warning .wpaw-issue-severity {
|
|
color: #ff9800 !important;
|
|
background: rgba(255, 152, 0, 0.15) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
19. OUTLINE PANEL — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-outline-panel {
|
|
background: var(--aw-dark-surface) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-outline-title {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-outline-close {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.wpaw-outline-close:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
background: var(--aw-dark-card-bg) !important;
|
|
}
|
|
|
|
.wpaw-outline-item {
|
|
color: var(--aw-dark-text) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-outline-item:hover {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
}
|
|
|
|
.wpaw-outline-label {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-outline-text {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-outline-count {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-outline-footer {
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-outline-empty {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
20. CONTEXT INDICATOR — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-context-indicator {
|
|
background: var(--aw-dark-surface) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-context-info {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-context-count,
|
|
.wpaw-context-tokens,
|
|
.wpaw-context-cost {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-context-toggle {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-context-toggle:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
21. FOCUS KEYWORD BAR — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-focus-keyword-bar {
|
|
background: var(--aw-dark-surface) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-fk-select,
|
|
.wpaw-fk-select-full {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-fk-input {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-fk-input:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-fk-input::placeholder {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-fk-custom-input {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-fk-custom-input::placeholder {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-fk-select:focus,
|
|
.wpaw-fk-select-full:focus {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-fk-select option,
|
|
.wpaw-fk-select-full option {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-fk-cost {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-fk-expand,
|
|
.wpaw-fk-collapse {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-fk-expand:hover,
|
|
.wpaw-fk-collapse:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
}
|
|
|
|
.wpaw-fk-header {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-fk-suggestions {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-fk-suggestions-label {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-fk-suggestion-item {
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-fk-suggestion-item:hover {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
}
|
|
|
|
.wpaw-fk-suggestion-item.selected {
|
|
background: var(--aw-dark-selected-pill) !important;
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-fk-suggestion-text {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-fk-suggestion-source {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-fk-stats {
|
|
border-top-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-fk-divider {
|
|
color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
22. SESSIONS LIST — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-sessions-list-view {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-sessions-header-bar {
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-sessions-title {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-new-conversation-btn {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-sessions-list {
|
|
/* inherits */
|
|
}
|
|
|
|
.wpaw-no-sessions {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-session-item {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-session-item:hover {
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
}
|
|
|
|
.wpaw-session-title {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-session-meta {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
23. CONTEXTUAL ACTION — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-contextual-action {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-action-content h4 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-action-content p {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-action-content .components-button {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
.wpaw-action-content .components-button:hover {
|
|
background: #005f8a !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
24. WRITING EMPTY STATE — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-writing-empty-state {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
.wpaw-empty-state-content h3 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-empty-state-content p {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-empty-state-button {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
.wpaw-empty-state-hint {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
25. AUTOCOMPLETE / MENTION — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-mention-autocomplete {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-mention-option {
|
|
border-bottom-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-mention-option.selected,
|
|
.wpaw-mention-option:hover {
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
}
|
|
|
|
.wpaw-mention-option strong {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-mention-option span {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Block mentioned */
|
|
.wpaw-block-mentioned {
|
|
background: var(--aw-dark-selected-pill) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-block-mentioned:hover {
|
|
background: rgba(0, 124, 186, 0.35) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
26. LOADING & ANIMATION
|
|
========================================================================= */
|
|
|
|
/* Loading bar — top of sidebar during execution */
|
|
.wpaw-loading-bar {
|
|
height: 4px;
|
|
background: var(--aw-dark-surface-deeper);
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.wpaw-loading-bar-fill {
|
|
height: 100%;
|
|
background: var(--aw-dark-accent-bright);
|
|
animation: loading-bar 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes loading-bar {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(200%);
|
|
}
|
|
}
|
|
|
|
/* AI pulse background for executing state */
|
|
.wpaw-ai-pulse-bg {
|
|
animation: pulse-bg 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-bg {
|
|
0%,
|
|
100% {
|
|
background-color: var(--aw-dark-surface);
|
|
}
|
|
50% {
|
|
background-color: #31373d;
|
|
}
|
|
}
|
|
|
|
/* Dots loader */
|
|
.wpaw-dots-loader {
|
|
background-color: var(--aw-dark-accent) !important;
|
|
box-shadow:
|
|
12px 0 var(--aw-dark-accent),
|
|
-12px 0 var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* Streaming indicator */
|
|
.wpaw-streaming-indicator {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-streaming-indicator::after {
|
|
background: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* Typing indicator */
|
|
.wpaw-typing-indicator {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-typing-dots span {
|
|
background: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Processing indicator */
|
|
.wpaw-processing-indicator {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* Spinning icon */
|
|
.wpaw-spinning-icon svg {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
27. PROGRESS BAR — Dark Track, Blue Fill (Pattern 3)
|
|
========================================================================= */
|
|
|
|
.wpaw-progress-bar {
|
|
background: var(--aw-dark-progress-track) !important;
|
|
height: 6px !important;
|
|
border-radius: 3px !important;
|
|
}
|
|
|
|
.wpaw-progress-fill {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
border-radius: 3px !important;
|
|
}
|
|
|
|
/* Status card for executing state */
|
|
.wpaw-status-card {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border: 1px solid var(--aw-dark-border) !important;
|
|
border-radius: 8px !important;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.wpaw-status-card .wpaw-progress-text {
|
|
color: var(--aw-dark-accent) !important;
|
|
font: var(--aw-text-code-sm);
|
|
}
|
|
|
|
.wpaw-status-card .wpaw-progress-percentage {
|
|
color: var(--aw-dark-accent) !important;
|
|
font: var(--aw-text-code-sm);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* =========================================================================
|
|
28. SUGGESTIONS — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-suggestions-banner {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-analyzing {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-item {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-header {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-location {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-priority {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-content {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-issue {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-text {
|
|
color: rgba(237, 241, 249, 0.7) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-actions .wpaw-btn {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-actions .wpaw-btn-apply {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
.wpaw-suggestion-dismiss-all {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-suggestion-dismiss-all:hover {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
29. COMMAND PALETTE — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-command-palette-overlay {
|
|
background: rgba(0, 0, 0, 0.6) !important;
|
|
}
|
|
|
|
.wpaw-command-palette {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
|
|
.wpaw-command-palette-input {
|
|
background: var(--aw-dark-surface-deeper) !important;
|
|
border-color: var(--aw-dark-border-strong) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-command-palette-input::placeholder {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-command-palette-results {
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-command-palette-item {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-command-palette-item:hover,
|
|
.wpaw-command-palette-item.selected {
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
}
|
|
|
|
.wpaw-command-palette-item.selected {
|
|
border-left-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
.wpaw-command-icon {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-command-label {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Command palette scrollbar */
|
|
.wpaw-command-palette-results::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.wpaw-command-palette-results::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.wpaw-command-palette-results::-webkit-scrollbar-thumb {
|
|
background: var(--aw-dark-scrollbar) !important;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.wpaw-command-palette-results::-webkit-scrollbar-thumb:hover {
|
|
background: var(--aw-dark-scrollbar-hover) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
30. OVERLAYS & MODALS — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-refine-confirm-overlay,
|
|
.wpaw-write-confirm-overlay {
|
|
background: rgba(0, 0, 0, 0.7) !important;
|
|
}
|
|
|
|
.wpaw-refine-confirm-modal,
|
|
.wpaw-write-confirm-modal {
|
|
background: var(--aw-dark-surface-deep) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
|
|
.wpaw-refine-confirm-title,
|
|
.wpaw-write-confirm-title {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-refine-confirm-body,
|
|
.wpaw-write-confirm-body {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-refine-confirm-actions .components-button.is-primary,
|
|
.wpaw-write-confirm-actions .components-button.is-primary {
|
|
background: var(--aw-dark-accent-bright) !important;
|
|
color: #fffeff !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
31. EDITOR LOCK BANNER — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-editor-lock-banner {
|
|
background: rgba(0, 124, 186, 0.15) !important;
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-refinement-lock-banner {
|
|
background: rgba(194, 65, 12, 0.15) !important;
|
|
border-color: #c2410c !important;
|
|
color: #ff9800 !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
32. INFO PANEL — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-info {
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-info a {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-info a:hover {
|
|
color: #b4dbff !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
33. RESPONSE CONTENT — Dark Typography
|
|
========================================================================= */
|
|
|
|
#wp-agentic-writer\:wp-agentic-writer .interface-complementary-area h3,
|
|
.wpaw-response-content h3,
|
|
.wpaw-messages-inner h3 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-response-content h1 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-response-content h2 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-response-content h4,
|
|
.wpaw-response-content h5,
|
|
.wpaw-response-content h6 {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-response-content table {
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-response-content table th,
|
|
.wpaw-response-content table td {
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-response-content {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-response-content p {
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Code blocks in AI response */
|
|
.wpaw-ai-response pre {
|
|
background: var(--aw-dark-surface-deeper) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-ai-response code {
|
|
background: var(--aw-dark-option-bg) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
34. MODE BADGE — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-mode-badge {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-mode-badge.mode-chat {
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-mode-badge.mode-planning {
|
|
border-color: #ff9800 !important;
|
|
color: #ff9800 !important;
|
|
}
|
|
|
|
.wpaw-mode-badge.mode-writing {
|
|
border-color: #4caf50 !important;
|
|
color: #4caf50 !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
35. PROVIDER BADGES — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-provider-info {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: var(--aw-dark-card-bg) !important;
|
|
}
|
|
|
|
.wpaw-provider-info:hover {
|
|
background: var(--aw-dark-option-bg-active) !important;
|
|
}
|
|
|
|
.wpaw-provider-badge {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-provider-badge[title*="warning"],
|
|
.wpaw-provider-badge[title*="Warning"],
|
|
.wpaw-provider-info:has(.wpaw-fallback) {
|
|
color: #ff9800 !important;
|
|
background: rgba(255, 152, 0, 0.15) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
36. WEB SEARCH TOGGLE — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-web-search-toggle {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-web-search-toggle:hover {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
.wpaw-web-search-icon {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-web-search-label {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-web-search-toggle input:checked ~ .wpaw-web-search-label {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-web-search-toggle.wpaw-search-blocked {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.wpaw-web-search-toggle.wpaw-search-blocked .wpaw-web-search-label {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
37. KEYBOARD HINTS — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-keyboard-hints {
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-kbd kbd {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* Input hint */
|
|
.wpaw-input-hint {
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
.wpaw-input-hint kbd {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
color: var(--aw-dark-text) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
38. NOTICES — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-heartbeat-notice {
|
|
background: rgba(255, 152, 0, 0.1) !important;
|
|
border-color: rgba(255, 152, 0, 0.3) !important;
|
|
color: #ff9800 !important;
|
|
}
|
|
|
|
.wpaw-provider-warning {
|
|
background: rgba(186, 26, 26, 0.1) !important;
|
|
border-color: rgba(186, 26, 26, 0.3) !important;
|
|
color: #ff8a80 !important;
|
|
}
|
|
|
|
.wpaw-provider-warning a {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
.wpaw-health-notice {
|
|
background: rgba(255, 152, 0, 0.1) !important;
|
|
border-color: rgba(255, 152, 0, 0.3) !important;
|
|
color: #ff9800 !important;
|
|
}
|
|
|
|
.wpaw-health-notice a {
|
|
color: var(--aw-dark-accent) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
39. CLEAR CONTEXT BUTTON — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-clear-context {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
background: transparent !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-clear-context:disabled {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* =========================================================================
|
|
40. MEMANTO BADGE — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-memanto-badge {
|
|
background: rgba(0, 124, 186, 0.2) !important;
|
|
color: var(--aw-dark-accent) !important;
|
|
border-color: var(--aw-dark-accent-bright) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
41. CONFIG SUMMARY — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-plan-config-summary {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border) !important;
|
|
}
|
|
|
|
.wpaw-config-summary-item {
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
42. GENERIC DARK SCROLLBAR FOR ALL SIDEBAR SCROLLABLE AREAS
|
|
========================================================================= */
|
|
|
|
#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar-thumb {
|
|
background: var(--aw-dark-scrollbar) !important;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar-thumb:hover {
|
|
background: var(--aw-dark-scrollbar-hover) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
43. AI ITEM INFO TYPE — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-ai-item[data-type="info"] {
|
|
background: var(--aw-dark-card-bg) !important;
|
|
border-color: var(--aw-dark-border-subtle) !important;
|
|
}
|
|
|
|
.wpaw-ai-item[data-type="info"] .wpaw-ai-content {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
44. TYPING INDICATOR — Dark
|
|
========================================================================= */
|
|
|
|
.wpaw-typing-indicator {
|
|
color: var(--aw-dark-text-muted) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
45. GLOBAL DARK RESETS — Catch-all for WordPress component overrides
|
|
========================================================================= */
|
|
|
|
/* Force dark background on any WP panel elements inside the sidebar */
|
|
#wp-agentic-writer\:wp-agentic-writer .components-panel__body {
|
|
background: var(--aw-dark-surface) !important;
|
|
}
|
|
|
|
/* Ensure all text inside the sidebar is light by default */
|
|
#wp-agentic-writer\:wp-agentic-writer,
|
|
#wp-agentic-writer\:wp-agentic-writer * {
|
|
--aw-surface: #2c3137;
|
|
--aw-surface-container-lowest: #2c3137;
|
|
--aw-surface-container-low: #333a40;
|
|
--aw-surface-container: #383f45;
|
|
--aw-surface-container-high: #3d444a;
|
|
--aw-surface-container-highest: #424950;
|
|
--aw-on-surface: #edf1f9;
|
|
--aw-on-surface-variant: #8b9298;
|
|
--aw-outline: rgba(255, 255, 255, 0.15);
|
|
--aw-outline-variant: rgba(255, 255, 255, 0.1);
|
|
--aw-outline-subtle: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Override the sidebar toggle icon inversion — the WP block editor makes the button dark when active, so we always need inversion */
|
|
.is-pressed[aria-controls="wp-agentic-writer:wp-agentic-writer"] img,
|
|
.components-button.is-pressed[aria-controls="wp-agentic-writer:wp-agentic-writer"]
|
|
img {
|
|
filter: invert(1) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
END OF DARK THEME OVERRIDES
|
|
========================================================================= */
|