refactor: Cleanup git state - commit all staged changes
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.
This commit is contained in:
Dwindi Ramadhana
@@ -1,119 +0,0 @@
|
||||
/** Gobal SMM **/
|
||||
body {
|
||||
background: #f0f0f1;
|
||||
}
|
||||
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: #999999!important;
|
||||
opacity: .5!important; /* Firefox */
|
||||
}
|
||||
|
||||
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: #999999!important;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: #999999!important;
|
||||
}
|
||||
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
|
||||
border: 1px solid #8c8f94!important;
|
||||
}
|
||||
.tooltip > .tooltip-inner {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
border-radius: 10px;
|
||||
max-width: 240px;
|
||||
box-shadow: 0 .25em .5em -.1em rgb(0 0 0/10%)!important;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-arrow:before, .tooltip .tooltip-arrow {
|
||||
display: none;
|
||||
}
|
||||
.bs-checkbox .th-inner {
|
||||
text-overflow: unset!important;
|
||||
}
|
||||
.th-inner {
|
||||
padding-top: 0.5em!important;
|
||||
padding-bottom: 0.5em!important;
|
||||
}
|
||||
.bootstrap-table div:not(.page-list) > .btn-group:not(.export) > * {
|
||||
height: 38px;
|
||||
}
|
||||
.borderless td, .borderless th {
|
||||
border: none;
|
||||
}
|
||||
.borderless .column-title .post-btn-group{
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
.borderless .column-title:hover .post-btn-group{
|
||||
display: block;
|
||||
}
|
||||
a {
|
||||
color: #125e96;
|
||||
}
|
||||
img.fa-icon.copy {
|
||||
width: 20px;
|
||||
filter: invert(30%) sepia(98%) saturate(550%) hue-rotate(166deg) brightness(88%) contrast(98%);
|
||||
cursor: pointer;
|
||||
}
|
||||
.top-40px{
|
||||
top: 40px!important;
|
||||
}
|
||||
.form-switch .form-check-input {
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 0;
|
||||
height: 18px;
|
||||
}
|
||||
@media screen and (max-width: 482px) {
|
||||
.wrap, .create-form-card {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Form Setting SMM **/
|
||||
.form-post tr th {
|
||||
width: 250px;
|
||||
max-width: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
.form-post input:not[type=checkbox], .form-setting-table.table select.form-select{
|
||||
height: 38px!important;
|
||||
border-radius: .25em!important;
|
||||
}
|
||||
@media screen and (max-width: 482px){
|
||||
.form-post th{
|
||||
display: none;
|
||||
}
|
||||
td::before {
|
||||
content: attr(data-title);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/** Form Field Input **/
|
||||
.validate-success img{
|
||||
filter: invert(35%) sepia(32%) saturate(6298%) hue-rotate(138deg) brightness(84%) contrast(80%);
|
||||
}
|
||||
.validate-error img{
|
||||
filter: invert(26%) sepia(74%) saturate(2359%) hue-rotate(335deg) brightness(90%) contrast(90%);
|
||||
}
|
||||
span.validate-error img {
|
||||
width: 14px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.form-switch input[type=checkbox]:checked::before {
|
||||
content: '';
|
||||
}
|
||||
/** Form Field Table **/
|
||||
tbody#sortable tr {
|
||||
cursor: grab;
|
||||
cursor: -webkit-grab;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
font-size: 1rem!important;
|
||||
}
|
||||
@@ -1,964 +0,0 @@
|
||||
/**
|
||||
* WP Agentic Writer - Admin Settings Styles
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
*/
|
||||
|
||||
/* ===========================
|
||||
BASE STYLES
|
||||
=========================== */
|
||||
.wpaw-settings-wrap {
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.wpaw-settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.wpaw-settings-logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.wpaw-settings-title {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wpaw-settings-subtitle {
|
||||
margin: 4px 0 0;
|
||||
color: #646970;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
NAVIGATION TABS
|
||||
=========================== */
|
||||
.wpaw-settings-nav {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.wpaw-settings-nav-btn {
|
||||
padding: 12px 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #646970;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.wpaw-settings-nav-btn:hover {
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-settings-nav-btn.active {
|
||||
color: #2271b1;
|
||||
border-bottom-color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-settings-nav-btn .dashicons {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
CARD SECTIONS
|
||||
=========================== */
|
||||
.wpaw-settings-section {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wpaw-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.wpaw-section-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.wpaw-section-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wpaw-section-desc {
|
||||
margin: 2px 0 0;
|
||||
font-size: 13px;
|
||||
color: #646970;
|
||||
}
|
||||
|
||||
.wpaw-section-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
PRESET CARDS (AI Models)
|
||||
=========================== */
|
||||
.wpaw-preset-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.wpaw-preset-card {
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wpaw-preset-card:hover {
|
||||
border-color: #2271b1;
|
||||
box-shadow: 0 2px 8px rgba(34, 113, 177, 0.15);
|
||||
}
|
||||
|
||||
.wpaw-preset-card.selected {
|
||||
border-color: #2271b1;
|
||||
background: rgba(34, 113, 177, 0.05);
|
||||
}
|
||||
|
||||
.wpaw-preset-card.selected::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #2271b1;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpaw-preset-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d2327;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.wpaw-preset-cost {
|
||||
font-size: 13px;
|
||||
color: #646970;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.wpaw-preset-models {
|
||||
font-size: 12px;
|
||||
color: #8c8f94;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.wpaw-preset-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: #f0f6fc;
|
||||
color: #2271b1;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.wpaw-preset-badge.recommended {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
FORM FIELDS
|
||||
=========================== */
|
||||
.wpaw-field-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.wpaw-field-row:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.wpaw-field-label {
|
||||
flex: 0 0 200px;
|
||||
font-weight: 500;
|
||||
color: #1d2327;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.wpaw-field-label small {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
color: #646970;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.wpaw-field-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wpaw-field-input input[type="text"],
|
||||
.wpaw-field-input input[type="password"],
|
||||
.wpaw-field-input input[type="number"],
|
||||
.wpaw-field-input select {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d0d5dd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.wpaw-field-input input:focus,
|
||||
.wpaw-field-input select:focus {
|
||||
border-color: #2271b1;
|
||||
box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wpaw-field-input .description {
|
||||
margin-top: 8px;
|
||||
color: #646970;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wpaw-field-input .description a {
|
||||
color: #2271b1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wpaw-field-input .description a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TOGGLE SWITCHES
|
||||
=========================== */
|
||||
.wpaw-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.wpaw-toggle-switch {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: #c3c4c7;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.wpaw-toggle-switch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.wpaw-toggle input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wpaw-toggle input:checked + .wpaw-toggle-switch {
|
||||
background: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-toggle input:checked + .wpaw-toggle-switch::after {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.wpaw-toggle-label {
|
||||
font-size: 14px;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
BUDGET DISPLAY
|
||||
=========================== */
|
||||
.wpaw-budget-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wpaw-budget-stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpaw-budget-stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wpaw-budget-stat-label {
|
||||
font-size: 12px;
|
||||
color: #646970;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.wpaw-budget-bar-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wpaw-budget-bar-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #646970;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.wpaw-budget-bar-track {
|
||||
height: 8px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wpaw-budget-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #4caf50, #66bb6a);
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.wpaw-budget-bar-fill.warning {
|
||||
background: linear-gradient(90deg, #ff9800, #ffa726);
|
||||
}
|
||||
|
||||
.wpaw-budget-bar-fill.danger {
|
||||
background: linear-gradient(90deg, #f44336, #ef5350);
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
SUBMIT BUTTON
|
||||
=========================== */
|
||||
.wpaw-submit-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.wpaw-submit-section .button-primary {
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.wpaw-submit-section .button-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.wpaw-submit-info {
|
||||
color: #646970;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
ALERTS & NOTICES
|
||||
=========================== */
|
||||
.wpaw-notice {
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.wpaw-notice-info {
|
||||
background: #f0f6fc;
|
||||
border: 1px solid #c5d9ed;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-notice-warning {
|
||||
background: #fcf9e8;
|
||||
border: 1px solid #f0c33c;
|
||||
color: #826200;
|
||||
}
|
||||
|
||||
.wpaw-notice-success {
|
||||
background: #edfaef;
|
||||
border: 1px solid #46b450;
|
||||
color: #2a6f31;
|
||||
}
|
||||
|
||||
.wpaw-notice-error {
|
||||
background: #fcf0f1;
|
||||
border: 1px solid #d63638;
|
||||
color: #8a1f1f;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
COST ESTIMATE BOX
|
||||
=========================== */
|
||||
.wpaw-cost-estimate-box {
|
||||
margin-top: 20px;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(135deg, #f0f6fc 0%, #e8f4fd 100%);
|
||||
border: 1px solid #c5d9ed;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpaw-cost-estimate-label {
|
||||
font-size: 13px;
|
||||
color: #646970;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.wpaw-cost-estimate-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-cost-estimate-note {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
color: #8c8f94;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TAB CONTENT
|
||||
=========================== */
|
||||
.wpaw-tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wpaw-tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
GUIDE TABLES
|
||||
=========================== */
|
||||
.wpaw-guide-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wpaw-guide-table th,
|
||||
.wpaw-guide-table td {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.wpaw-guide-table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wpaw-guide-table tbody tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.wpaw-guide-row-highlight {
|
||||
background: #f0f6fc !important;
|
||||
}
|
||||
|
||||
.wpaw-guide-row-highlight:hover {
|
||||
background: #e5f0fa !important;
|
||||
}
|
||||
|
||||
/* Model Badges */
|
||||
.wpaw-model-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wpaw-model-badge.planning {
|
||||
background: #e8f4fd;
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
.wpaw-model-badge.execution {
|
||||
background: #fef3e8;
|
||||
color: #b54708;
|
||||
}
|
||||
|
||||
.wpaw-model-badge.chat {
|
||||
background: #e8fdf0;
|
||||
color: #067647;
|
||||
}
|
||||
|
||||
.wpaw-model-badge.search {
|
||||
background: #f3e8fd;
|
||||
color: #6941c6;
|
||||
}
|
||||
|
||||
.wpaw-model-badge.image {
|
||||
background: #fde8f0;
|
||||
color: #c01574;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
COST EXAMPLES
|
||||
=========================== */
|
||||
.wpaw-cost-examples {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.wpaw-cost-example {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.wpaw-cost-example-title {
|
||||
font-weight: 600;
|
||||
color: #1d2327;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpaw-cost-example-breakdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: #646970;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.wpaw-cost-example-total {
|
||||
font-size: 14px;
|
||||
color: #1d2327;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.wpaw-cost-example-total strong {
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
SELECT2 CUSTOMIZATION
|
||||
=========================== */
|
||||
.wpaw-settings-section .select2-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-section .select2-container--default .select2-selection--single {
|
||||
height: 38px;
|
||||
border: 1px solid #8c8f94;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.wpaw-settings-section .select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
line-height: 36px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.wpaw-settings-section .select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
border: 1px solid #8c8f94;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.select2-search--dropdown .select2-search__field {
|
||||
border: 1px solid #8c8f94;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #2271b1 !important;
|
||||
}
|
||||
|
||||
span.select2-search.select2-search--inline textarea {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.select2-results__options li {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.select2-results__option {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.select2-results__option.select2-results__option--selectable.select2-results__option--selected{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.select2-results__option.select2-results__option--selectable.select2-results__option--selected:hover > span{
|
||||
color: white!important;
|
||||
}
|
||||
.select2-results__option.select2-results__option--selectable.select2-results__option--selected::after {
|
||||
content: 'SELECTED';
|
||||
font-size: smaller;
|
||||
font-family: ui-monospace, monospace;
|
||||
color: #868686;
|
||||
}
|
||||
.select2-results__option.select2-results__option--selectable.select2-results__option--selected:hover::after {
|
||||
color: #d6d6d6!important;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
RESPONSIVE
|
||||
=========================== */
|
||||
@media (max-width: 782px) {
|
||||
.wpaw-preset-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.wpaw-field-row {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.wpaw-field-label {
|
||||
flex: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.wpaw-settings-nav {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
LANGUAGE PREFERENCES
|
||||
=========================== */
|
||||
.wpaw-language-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.wpaw-language-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #dcdcde;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.wpaw-language-checkbox:hover {
|
||||
border-color: #2271b1;
|
||||
background: #f6f7f7;
|
||||
}
|
||||
|
||||
.wpaw-language-checkbox input[type="checkbox"] {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wpaw-language-checkbox input[type="checkbox"]:checked + span {
|
||||
font-weight: 500;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-custom-language-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.wpaw-custom-language-item input[type="text"] {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #dcdcde;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpaw-custom-language-item .wpaw-remove-language {
|
||||
padding: 8px 12px;
|
||||
background: #dc3232;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.wpaw-custom-language-item .wpaw-remove-language:hover {
|
||||
background: #a00;
|
||||
}
|
||||
|
||||
#wpaw-add-custom-language {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
COST SHORTCUTS
|
||||
=========================== */
|
||||
.wpaw-cost-shortcuts {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpaw-cost-shortcut-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
background: #f0f6fc;
|
||||
border: 1px solid #0066cc;
|
||||
border-radius: 6px;
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.wpaw-cost-shortcut-link:hover {
|
||||
background: #0066cc;
|
||||
color: #fff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.wpaw-cost-shortcut-link .dashicons {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
COST STATS GRID
|
||||
=========================== */
|
||||
.wpaw-cost-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.wpaw-cost-stat-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.wpaw-cost-stat-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.wpaw-cost-stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.wpaw-cost-stat-label {
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
COST FILTERS
|
||||
=========================== */
|
||||
.wpaw-cost-filters {
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.wpaw-filter-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.wpaw-filter-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.wpaw-filter-field label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wpaw-filter-field input,
|
||||
.wpaw-filter-field select {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpaw-filter-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
COST LOG TABLE
|
||||
=========================== */
|
||||
.wpaw-cost-log-table-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.wpaw-cost-log-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.wpaw-cost-log-table thead {
|
||||
background: #f9f9f9;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.wpaw-cost-log-table th {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #1d2327;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wpaw-cost-log-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 13px;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wpaw-cost-log-table tbody tr:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.wpaw-cost-log-table code {
|
||||
background: #f0f0f0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.wpaw-removed-post {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
PAGINATION
|
||||
=========================== */
|
||||
.wpaw-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.wpaw-pagination-info {
|
||||
padding: 6px 12px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -1,449 +0,0 @@
|
||||
/**
|
||||
* Agentic Vibe - Bootstrap Customization
|
||||
* Override Bootstrap defaults with our design system
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
* @since 0.2.0
|
||||
*/
|
||||
|
||||
/* Apply variables to settings wrapper */
|
||||
.wpaw-settings-v2-wrap {
|
||||
--bs-primary: var(--wpaw-primary);
|
||||
--bs-primary-rgb: 23, 162, 184;
|
||||
--bs-success: var(--wpaw-success);
|
||||
--bs-success-rgb: 40, 167, 69;
|
||||
--bs-warning: var(--wpaw-warning);
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger: var(--wpaw-error);
|
||||
--bs-danger-rgb: 220, 53, 69;
|
||||
--bs-info: var(--wpaw-info);
|
||||
--bs-info-rgb: 23, 162, 184;
|
||||
--bs-body-bg: var(--wpaw-bg-primary);
|
||||
--bs-body-color: var(--wpaw-text-primary);
|
||||
--bs-border-color: var(--wpaw-border);
|
||||
|
||||
background: var(--wpaw-bg-primary) !important;
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
}
|
||||
|
||||
/* Button Enhancements */
|
||||
.wpaw-settings-v2-wrap .btn {
|
||||
transition: all var(--wpaw-transition-fast);
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn-sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: var(--wpaw-text-sm);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn-primary {
|
||||
background: var(--wpaw-primary);
|
||||
border-color: var(--wpaw-primary);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn-primary:hover {
|
||||
background: var(--wpaw-primary-dark);
|
||||
border-color: var(--wpaw-primary-dark);
|
||||
box-shadow: var(--wpaw-shadow-sm);
|
||||
}
|
||||
|
||||
/* Form Controls */
|
||||
.wpaw-settings-v2-wrap .form-control,
|
||||
.wpaw-settings-v2-wrap .form-select {
|
||||
border-radius: var(--wpaw-radius-sm);
|
||||
border-color: var(--wpaw-border) !important;
|
||||
background: var(--wpaw-bg-tertiary) !important;
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
transition: all var(--wpaw-transition-fast);
|
||||
font-size: var(--wpaw-text-base);
|
||||
max-width: unset !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-control:focus,
|
||||
.wpaw-settings-v2-wrap .form-select:focus {
|
||||
border-color: var(--wpaw-primary) !important;
|
||||
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25) !important;
|
||||
background: var(--wpaw-bg-tertiary) !important;
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-control::placeholder {
|
||||
color: var(--wpaw-text-tertiary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-label {
|
||||
color: var(--wpaw-text-secondary);
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--wpaw-space-sm);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-text {
|
||||
color: var(--wpaw-text-tertiary);
|
||||
font-size: var(--wpaw-text-sm);
|
||||
font-family: var(--wpaw-font-mono);
|
||||
}
|
||||
|
||||
/* Card Enhancements */
|
||||
.wpaw-settings-v2-wrap .card {
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
background: var(--wpaw-bg-secondary) !important;
|
||||
transition: all var(--wpaw-transition-normal);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .card:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
border-color: var(--wpaw-primary);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .card-header {
|
||||
background: var(--wpaw-bg-tertiary) !important;
|
||||
border-bottom: 1px solid var(--wpaw-border);
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .card-body {
|
||||
background: var(--wpaw-bg-secondary) !important;
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .card-footer {
|
||||
background: var(--wpaw-bg-tertiary) !important;
|
||||
border-top: 1px solid var(--wpaw-border);
|
||||
}
|
||||
|
||||
/* Badge Enhancements */
|
||||
.wpaw-settings-v2-wrap .badge {
|
||||
font-weight: 500;
|
||||
padding: 0.35em 0.65em;
|
||||
border-radius: var(--wpaw-radius-sm);
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .badge.bg-success {
|
||||
background: var(--wpaw-success) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .badge.bg-warning {
|
||||
background: var(--wpaw-warning) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .badge.bg-danger {
|
||||
background: var(--wpaw-error) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .badge.bg-info {
|
||||
background: var(--wpaw-info) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .badge.bg-primary {
|
||||
background: var(--wpaw-primary) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Alert Enhancements */
|
||||
.wpaw-settings-v2-wrap .alert {
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
border: 1px solid;
|
||||
font-size: var(--wpaw-text-sm);
|
||||
background: var(--wpaw-bg-secondary) !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .alert-success {
|
||||
border-color: var(--wpaw-success);
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
border-left: 4px solid var(--wpaw-success);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .alert-warning {
|
||||
border-color: var(--wpaw-warning);
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
border-left: 4px solid var(--wpaw-warning);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .alert-danger {
|
||||
border-color: var(--wpaw-error);
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
border-left: 4px solid var(--wpaw-error);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .alert-info {
|
||||
border-color: var(--wpaw-info);
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
border-left: 4px solid var(--wpaw-info);
|
||||
}
|
||||
|
||||
/* Table Enhancements */
|
||||
.wpaw-settings-v2-wrap .table {
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
font-size: var(--wpaw-text-sm);
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table thead {
|
||||
background: var(--wpaw-bg-tertiary) !important;
|
||||
color: var(--wpaw-text-secondary) !important;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--wpaw-text-xs);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table tbody tr {
|
||||
transition: background-color var(--wpaw-transition-fast);
|
||||
border-bottom: 1px solid var(--wpaw-border);
|
||||
background: var(--wpaw-bg-secondary) !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table tbody tr:hover {
|
||||
background: var(--wpaw-bg-tertiary) !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table-light {
|
||||
background: var(--wpaw-bg-tertiary) !important;
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table-hover tbody tr:hover {
|
||||
background: var(--wpaw-bg-tertiary) !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table-responsive {
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
overflow: hidden;
|
||||
background: var(--wpaw-bg-secondary) !important;
|
||||
}
|
||||
|
||||
/* Nav Tabs/Pills Enhancements */
|
||||
.wpaw-settings-v2-wrap .nav-tabs {
|
||||
border-bottom: 2px solid var(--wpaw-border);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .nav-tabs .nav-link {
|
||||
border: none;
|
||||
color: var(--wpaw-text-secondary) !important;
|
||||
font-weight: 500;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all var(--wpaw-transition-fast);
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .nav-tabs .nav-link:hover {
|
||||
color: var(--wpaw-primary) !important;
|
||||
background: var(--wpaw-bg-secondary) !important;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .nav-tabs .nav-link.active {
|
||||
background: transparent !important;
|
||||
color: var(--wpaw-primary) !important;
|
||||
border-bottom-color: var(--wpaw-primary);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .nav-pills .nav-link {
|
||||
color: var(--wpaw-text-secondary) !important;
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-weight: 500;
|
||||
transition: all var(--wpaw-transition-fast);
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .nav-pills .nav-link:hover:not(.active) {
|
||||
background: var(--wpaw-bg-secondary) !important;
|
||||
color: var(--wpaw-text-primary) !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .nav-pills .nav-link.active {
|
||||
background: var(--wpaw-primary) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Tab Content Animation */
|
||||
.wpaw-settings-v2-wrap .tab-content {
|
||||
animation: wpawFadeInTab 200ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes wpawFadeInTab {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.wpaw-settings-v2-wrap .progress {
|
||||
height: 8px;
|
||||
border-radius: var(--wpaw-radius-full);
|
||||
background: var(--wpaw-bg-tertiary);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .progress-bar {
|
||||
background: var(--wpaw-primary);
|
||||
border-radius: var(--wpaw-radius-full);
|
||||
transition: width var(--wpaw-transition-slow);
|
||||
}
|
||||
|
||||
/* Modal Enhancements */
|
||||
.wpaw-settings-v2-wrap .modal-content {
|
||||
border-radius: var(--wpaw-radius-lg);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
background: var(--wpaw-bg-primary);
|
||||
box-shadow: var(--wpaw-shadow-xl);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .modal-header {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border-bottom: 1px solid var(--wpaw-border);
|
||||
border-radius: var(--wpaw-radius-lg) var(--wpaw-radius-lg) 0 0;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .modal-body {
|
||||
color: var(--wpaw-text-primary);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .modal-footer {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border-top: 1px solid var(--wpaw-border);
|
||||
border-radius: 0 0 var(--wpaw-radius-lg) var(--wpaw-radius-lg);
|
||||
}
|
||||
|
||||
/* Dropdown Enhancements */
|
||||
.wpaw-settings-v2-wrap .dropdown-menu {
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
background: var(--wpaw-bg-primary);
|
||||
box-shadow: var(--wpaw-shadow-lg);
|
||||
padding: var(--wpaw-space-sm);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .dropdown-item {
|
||||
border-radius: var(--wpaw-radius-sm);
|
||||
color: var(--wpaw-text-primary);
|
||||
transition: all var(--wpaw-transition-fast);
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .dropdown-item:hover {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
color: var(--wpaw-primary);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .dropdown-item.active {
|
||||
background: var(--wpaw-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Toast Notifications */
|
||||
.wpaw-settings-v2-wrap .toast {
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
background: var(--wpaw-bg-primary);
|
||||
box-shadow: var(--wpaw-shadow-lg);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .toast-header {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border-bottom: 1px solid var(--wpaw-border);
|
||||
color: var(--wpaw-text-primary);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .toast-body {
|
||||
color: var(--wpaw-text-primary);
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.wpaw-settings-v2-wrap .pagination .page-link {
|
||||
color: var(--wpaw-text-primary);
|
||||
background: var(--wpaw-bg-primary);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
transition: all var(--wpaw-transition-fast);
|
||||
border-radius: var(--wpaw-radius-sm);
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .pagination .page-link:hover {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border-color: var(--wpaw-primary);
|
||||
color: var(--wpaw-primary);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .pagination .page-item.active .page-link {
|
||||
background: var(--wpaw-primary);
|
||||
border-color: var(--wpaw-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .pagination .page-item.disabled .page-link {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border-color: var(--wpaw-border);
|
||||
color: var(--wpaw-text-tertiary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
.wpaw-settings-v2-wrap .spinner-border {
|
||||
border-color: var(--wpaw-primary);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
/* Input Group */
|
||||
.wpaw-settings-v2-wrap .input-group-text {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border-color: var(--wpaw-border);
|
||||
color: var(--wpaw-text-secondary);
|
||||
}
|
||||
|
||||
/* List Group */
|
||||
.wpaw-settings-v2-wrap .list-group-item {
|
||||
background: var(--wpaw-bg-primary);
|
||||
border-color: var(--wpaw-border);
|
||||
color: var(--wpaw-text-primary);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .list-group-item:hover {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .list-group-item.active {
|
||||
background: var(--wpaw-primary);
|
||||
border-color: var(--wpaw-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap input[type=checkbox]:checked::before {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap input[type=checkbox]:checked ~ label {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .preset-card .card-body {
|
||||
cursor: pointer;
|
||||
border-radius: inherit;
|
||||
}
|
||||
@@ -11,57 +11,57 @@
|
||||
============================================ */
|
||||
|
||||
.wpaw-stat-card {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
padding: var(--wpaw-space-md);
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
border-left: 3px solid var(--wpaw-primary);
|
||||
transition: all var(--wpaw-transition-normal);
|
||||
height: 100%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
background: var(--wpaw-bg-secondary);
|
||||
padding: var(--wpaw-space-md);
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
border-left: 3px solid var(--wpaw-primary);
|
||||
transition: all var(--wpaw-transition-normal);
|
||||
height: 100%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.wpaw-stat-card:hover {
|
||||
background: var(--wpaw-bg-tertiary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
border-left-width: 4px;
|
||||
background: var(--wpaw-bg-tertiary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
border-left-width: 4px;
|
||||
}
|
||||
|
||||
.wpaw-stat-label {
|
||||
font-size: var(--wpaw-text-xs);
|
||||
text-transform: uppercase;
|
||||
font-family: var(--wpaw-font-mono);
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--wpaw-text-tertiary);
|
||||
margin-bottom: var(--wpaw-space-sm);
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
font-size: var(--wpaw-text-xs);
|
||||
text-transform: uppercase;
|
||||
font-family: var(--wpaw-font-mono);
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--wpaw-text-tertiary);
|
||||
margin-bottom: var(--wpaw-space-sm);
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpaw-stat-value {
|
||||
font-size: var(--wpaw-text-3xl);
|
||||
font-weight: 700;
|
||||
color: var(--wpaw-primary);
|
||||
font-family: var(--wpaw-font-sans);
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
font-size: var(--wpaw-text-3xl);
|
||||
font-weight: 700;
|
||||
color: var(--wpaw-primary);
|
||||
font-family: var(--wpaw-font-sans);
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpaw-stat-value.text-success {
|
||||
color: var(--wpaw-success);
|
||||
color: var(--wpaw-success);
|
||||
}
|
||||
|
||||
.wpaw-stat-value.text-warning {
|
||||
color: var(--wpaw-warning);
|
||||
color: var(--wpaw-warning);
|
||||
}
|
||||
|
||||
.wpaw-stat-value.text-danger {
|
||||
color: var(--wpaw-error);
|
||||
color: var(--wpaw-error);
|
||||
}
|
||||
|
||||
.wpaw-stat-value.text-info {
|
||||
color: var(--wpaw-info);
|
||||
color: var(--wpaw-info);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -69,38 +69,38 @@
|
||||
============================================ */
|
||||
|
||||
.wpaw-status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--wpaw-space-xs);
|
||||
padding: var(--wpaw-space-xs) var(--wpaw-space-sm);
|
||||
border-radius: var(--wpaw-radius-sm);
|
||||
font-size: var(--wpaw-text-sm);
|
||||
font-weight: 500;
|
||||
transition: all var(--wpaw-transition-fast);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--wpaw-space-xs);
|
||||
padding: var(--wpaw-space-xs) var(--wpaw-space-sm);
|
||||
border-radius: var(--wpaw-radius-sm);
|
||||
font-size: var(--wpaw-text-sm);
|
||||
font-weight: 500;
|
||||
transition: all var(--wpaw-transition-fast);
|
||||
}
|
||||
|
||||
.wpaw-status-online {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--wpaw-success);
|
||||
border: 1px solid var(--wpaw-success);
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--wpaw-success);
|
||||
border: 1px solid var(--wpaw-success);
|
||||
}
|
||||
|
||||
.wpaw-status-offline {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--wpaw-error);
|
||||
border: 1px solid var(--wpaw-error);
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--wpaw-error);
|
||||
border: 1px solid var(--wpaw-error);
|
||||
}
|
||||
|
||||
.wpaw-status-processing {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: var(--wpaw-primary);
|
||||
border: 1px solid var(--wpaw-primary);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: var(--wpaw-primary);
|
||||
border: 1px solid var(--wpaw-primary);
|
||||
}
|
||||
|
||||
.wpaw-status-warning {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: var(--wpaw-warning);
|
||||
border: 1px solid var(--wpaw-warning);
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: var(--wpaw-warning);
|
||||
border: 1px solid var(--wpaw-warning);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -109,29 +109,30 @@
|
||||
|
||||
.wpaw-code,
|
||||
.wpaw-settings-v2-wrap code {
|
||||
font-family: var(--wpaw-font-mono);
|
||||
background: var(--wpaw-bg-secondary);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--wpaw-radius-sm);
|
||||
font-size: 0.85em;
|
||||
color: var(--wpaw-text-primary);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
font-family: var(--wpaw-font-mono);
|
||||
background: var(--wpaw-bg-secondary);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--wpaw-radius-sm);
|
||||
font-size: 0.85em;
|
||||
color: var(--wpaw-text-primary);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
}
|
||||
|
||||
.wpaw-code-muted, .text-muted {
|
||||
color: var(--wpaw-text-tertiary);
|
||||
font-family: var(--wpaw-font-mono);
|
||||
.wpaw-code-muted,
|
||||
.text-muted {
|
||||
color: var(--wpaw-text-tertiary);
|
||||
font-family: var(--wpaw-font-mono);
|
||||
}
|
||||
|
||||
.wpaw-code-block {
|
||||
font-family: var(--wpaw-font-mono);
|
||||
background: var(--wpaw-bg-secondary);
|
||||
padding: var(--wpaw-space-md);
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
overflow-x: auto;
|
||||
font-size: var(--wpaw-text-sm);
|
||||
line-height: 1.6;
|
||||
font-family: var(--wpaw-font-mono);
|
||||
background: var(--wpaw-bg-secondary);
|
||||
padding: var(--wpaw-space-md);
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
overflow-x: auto;
|
||||
font-size: var(--wpaw-text-sm);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -139,17 +140,17 @@
|
||||
============================================ */
|
||||
|
||||
.wpaw-agentic-header {
|
||||
margin-bottom: var(--wpaw-space-xl);
|
||||
margin-bottom: var(--wpaw-space-xl);
|
||||
}
|
||||
|
||||
.wpaw-agentic-header h1 {
|
||||
color: var(--wpaw-text-primary);
|
||||
margin-bottom: var(--wpaw-space-xs);
|
||||
color: var(--wpaw-text-primary);
|
||||
margin-bottom: var(--wpaw-space-xs);
|
||||
}
|
||||
|
||||
.wpaw-agentic-header .text-muted {
|
||||
color: var(--wpaw-text-secondary);
|
||||
font-family: var(--wpaw-font-mono);
|
||||
color: var(--wpaw-text-secondary);
|
||||
font-family: var(--wpaw-font-mono);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -157,84 +158,84 @@
|
||||
============================================ */
|
||||
|
||||
.wpaw-model-card {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
padding: var(--wpaw-space-lg);
|
||||
transition: all var(--wpaw-transition-normal);
|
||||
height: 100%;
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border: 1px solid var(--wpaw-border);
|
||||
border-radius: var(--wpaw-radius-md);
|
||||
padding: var(--wpaw-space-lg);
|
||||
transition: all var(--wpaw-transition-normal);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wpaw-model-card:hover {
|
||||
border-color: var(--wpaw-primary);
|
||||
box-shadow: var(--wpaw-shadow-md);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--wpaw-primary);
|
||||
box-shadow: var(--wpaw-shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.wpaw-model-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--wpaw-space-md);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--wpaw-space-md);
|
||||
}
|
||||
|
||||
.wpaw-model-header h5 {
|
||||
margin-bottom: var(--wpaw-space-xs);
|
||||
color: var(--wpaw-text-primary);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--wpaw-space-xs);
|
||||
color: var(--wpaw-text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wpaw-model-header p {
|
||||
font-size: var(--wpaw-text-sm);
|
||||
color: var(--wpaw-text-tertiary);
|
||||
font-family: var(--wpaw-font-mono);
|
||||
margin: 0;
|
||||
font-size: var(--wpaw-text-sm);
|
||||
color: var(--wpaw-text-tertiary);
|
||||
font-family: var(--wpaw-font-mono);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wpaw-model-stat {
|
||||
margin-top: var(--wpaw-space-md);
|
||||
margin-top: var(--wpaw-space-md);
|
||||
}
|
||||
|
||||
.wpaw-model-stat label {
|
||||
font-size: var(--wpaw-text-xs);
|
||||
text-transform: uppercase;
|
||||
color: var(--wpaw-text-tertiary);
|
||||
margin-bottom: var(--wpaw-space-xs);
|
||||
font-weight: 600;
|
||||
font-size: var(--wpaw-text-xs);
|
||||
text-transform: uppercase;
|
||||
color: var(--wpaw-text-tertiary);
|
||||
margin-bottom: var(--wpaw-space-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wpaw-model-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--wpaw-space-md);
|
||||
padding-top: var(--wpaw-space-md);
|
||||
border-top: 1px solid var(--wpaw-border);
|
||||
margin-top: var(--wpaw-space-md);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--wpaw-space-md);
|
||||
padding-top: var(--wpaw-space-md);
|
||||
border-top: 1px solid var(--wpaw-border);
|
||||
margin-top: var(--wpaw-space-md);
|
||||
}
|
||||
|
||||
.wpaw-metric {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpaw-metric-label {
|
||||
display: block;
|
||||
font-size: var(--wpaw-text-xs);
|
||||
text-transform: uppercase;
|
||||
color: var(--wpaw-text-tertiary);
|
||||
margin-bottom: var(--wpaw-space-xs);
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
font-size: var(--wpaw-text-xs);
|
||||
text-transform: uppercase;
|
||||
color: var(--wpaw-text-tertiary);
|
||||
margin-bottom: var(--wpaw-space-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wpaw-metric-value {
|
||||
display: block;
|
||||
font-size: var(--wpaw-text-xl);
|
||||
font-weight: 600;
|
||||
color: var(--wpaw-primary);
|
||||
font-family: var(--wpaw-font-sans);
|
||||
display: block;
|
||||
font-size: var(--wpaw-text-xl);
|
||||
font-weight: 600;
|
||||
color: var(--wpaw-primary);
|
||||
font-family: var(--wpaw-font-sans);
|
||||
}
|
||||
|
||||
.wpaw-model-actions {
|
||||
margin-top: var(--wpaw-space-md);
|
||||
margin-top: var(--wpaw-space-md);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -242,40 +243,40 @@
|
||||
============================================ */
|
||||
|
||||
.wpaw-cost-table {
|
||||
font-size: var(--wpaw-text-sm);
|
||||
font-size: var(--wpaw-text-sm);
|
||||
}
|
||||
|
||||
.wpaw-cost-table thead {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--wpaw-text-xs);
|
||||
letter-spacing: 0.05em;
|
||||
background: var(--wpaw-bg-secondary);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--wpaw-text-xs);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.wpaw-cost-table tbody tr {
|
||||
transition: background-color var(--wpaw-transition-fast);
|
||||
border-left: 3px solid transparent;
|
||||
transition: background-color var(--wpaw-transition-fast);
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.wpaw-cost-table tbody tr:hover {
|
||||
background: var(--wpaw-bg-secondary) !important;
|
||||
background: var(--wpaw-bg-secondary) !important;
|
||||
}
|
||||
|
||||
.wpaw-cost-table tbody tr.row-success {
|
||||
border-left-color: var(--wpaw-success);
|
||||
border-left-color: var(--wpaw-success);
|
||||
}
|
||||
|
||||
.wpaw-cost-table tbody tr.row-warning {
|
||||
border-left-color: var(--wpaw-warning);
|
||||
border-left-color: var(--wpaw-warning);
|
||||
}
|
||||
|
||||
.wpaw-cost-table tbody tr.row-error {
|
||||
border-left-color: var(--wpaw-error);
|
||||
border-left-color: var(--wpaw-error);
|
||||
}
|
||||
|
||||
.wpaw-cost-table .wpaw-code {
|
||||
font-size: 0.85em;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -284,91 +285,100 @@
|
||||
|
||||
/* Pulse Animation */
|
||||
@keyframes wpaw-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-animate-pulse {
|
||||
animation: wpaw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
animation: wpaw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* Spin Animation */
|
||||
@keyframes wpaw-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-animate-spin {
|
||||
animation: wpaw-spin 2s linear infinite;
|
||||
animation: wpaw-spin 2s linear infinite;
|
||||
}
|
||||
|
||||
/* Fade In */
|
||||
@keyframes wpaw-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-fade-in {
|
||||
animation: wpaw-fade-in 300ms ease-out;
|
||||
animation: wpaw-fade-in 300ms ease-out;
|
||||
}
|
||||
|
||||
/* Slide In Right */
|
||||
@keyframes wpaw-slide-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-slide-in-right {
|
||||
animation: wpaw-slide-in-right 300ms ease-out;
|
||||
animation: wpaw-slide-in-right 300ms ease-out;
|
||||
}
|
||||
|
||||
/* Scale In */
|
||||
@keyframes wpaw-scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-scale-in {
|
||||
animation: wpaw-scale-in 200ms ease-out;
|
||||
animation: wpaw-scale-in 200ms ease-out;
|
||||
}
|
||||
|
||||
/* Shimmer Loading */
|
||||
@keyframes wpaw-shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--wpaw-bg-secondary) 0%,
|
||||
var(--wpaw-bg-tertiary) 50%,
|
||||
var(--wpaw-bg-secondary) 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
animation: wpaw-shimmer 2s infinite;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--wpaw-bg-secondary) 0%,
|
||||
var(--wpaw-bg-tertiary) 50%,
|
||||
var(--wpaw-bg-secondary) 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
animation: wpaw-shimmer 2s infinite;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -377,112 +387,112 @@
|
||||
|
||||
/* Hover Lift */
|
||||
.wpaw-hover-lift {
|
||||
transition: transform var(--wpaw-transition-normal);
|
||||
transition: transform var(--wpaw-transition-normal);
|
||||
}
|
||||
|
||||
.wpaw-hover-lift:hover {
|
||||
transform: translateY(-4px);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* Glow Effect */
|
||||
.wpaw-glow-primary {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
transition: box-shadow var(--wpaw-transition-normal);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
transition: box-shadow var(--wpaw-transition-normal);
|
||||
}
|
||||
|
||||
.wpaw-glow-primary:hover {
|
||||
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
|
||||
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Smooth Height Transition */
|
||||
.wpaw-smooth-height {
|
||||
transition: height var(--wpaw-transition-slow);
|
||||
overflow: hidden;
|
||||
transition: height var(--wpaw-transition-slow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Icon Dot */
|
||||
.wpaw-icon-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
/* Loading Skeleton */
|
||||
.wpaw-skeleton {
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border-radius: var(--wpaw-radius-sm);
|
||||
animation: wpaw-shimmer 2s infinite;
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border-radius: var(--wpaw-radius-sm);
|
||||
animation: wpaw-shimmer 2s infinite;
|
||||
}
|
||||
|
||||
.wpaw-skeleton-text {
|
||||
height: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
height: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.wpaw-skeleton-heading {
|
||||
height: 2em;
|
||||
margin-bottom: 1em;
|
||||
height: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.wpaw-divider {
|
||||
height: 1px;
|
||||
background: var(--wpaw-border);
|
||||
margin: var(--wpaw-space-lg) 0;
|
||||
height: 1px;
|
||||
background: var(--wpaw-border);
|
||||
margin: var(--wpaw-space-lg) 0;
|
||||
}
|
||||
|
||||
.wpaw-divider-vertical {
|
||||
width: 1px;
|
||||
background: var(--wpaw-border);
|
||||
margin: 0 var(--wpaw-space-md);
|
||||
width: 1px;
|
||||
background: var(--wpaw-border);
|
||||
margin: 0 var(--wpaw-space-md);
|
||||
}
|
||||
|
||||
/* Section Spacing */
|
||||
.wpaw-section {
|
||||
margin-bottom: var(--wpaw-space-2xl);
|
||||
margin-bottom: var(--wpaw-space-2xl);
|
||||
}
|
||||
|
||||
.wpaw-section-header {
|
||||
margin-bottom: var(--wpaw-space-lg);
|
||||
margin-bottom: var(--wpaw-space-lg);
|
||||
}
|
||||
|
||||
.wpaw-section-title {
|
||||
font-size: var(--wpaw-text-2xl);
|
||||
font-weight: 600;
|
||||
color: var(--wpaw-text-primary);
|
||||
margin-bottom: var(--wpaw-space-xs);
|
||||
font-size: var(--wpaw-text-2xl);
|
||||
font-weight: 600;
|
||||
color: var(--wpaw-text-primary);
|
||||
margin-bottom: var(--wpaw-space-xs);
|
||||
}
|
||||
|
||||
.wpaw-section-description {
|
||||
font-size: var(--wpaw-text-sm);
|
||||
color: var(--wpaw-text-secondary);
|
||||
font-size: var(--wpaw-text-sm);
|
||||
color: var(--wpaw-text-secondary);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.wpaw-empty-state {
|
||||
text-align: center;
|
||||
padding: var(--wpaw-space-3xl) var(--wpaw-space-xl);
|
||||
color: var(--wpaw-text-tertiary);
|
||||
text-align: center;
|
||||
padding: var(--wpaw-space-3xl) var(--wpaw-space-xl);
|
||||
color: var(--wpaw-text-tertiary);
|
||||
}
|
||||
|
||||
.wpaw-empty-state-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--wpaw-space-md);
|
||||
opacity: 0.5;
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--wpaw-space-md);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.wpaw-empty-state-title {
|
||||
font-size: var(--wpaw-text-lg);
|
||||
font-weight: 600;
|
||||
color: var(--wpaw-text-secondary);
|
||||
margin-bottom: var(--wpaw-space-sm);
|
||||
font-size: var(--wpaw-text-lg);
|
||||
font-weight: 600;
|
||||
color: var(--wpaw-text-secondary);
|
||||
margin-bottom: var(--wpaw-space-sm);
|
||||
}
|
||||
|
||||
.wpaw-empty-state-description {
|
||||
font-size: var(--wpaw-text-sm);
|
||||
color: var(--wpaw-text-tertiary);
|
||||
font-size: var(--wpaw-text-sm);
|
||||
color: var(--wpaw-text-tertiary);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -490,22 +500,22 @@
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.wpaw-stat-card {
|
||||
margin-bottom: var(--wpaw-space-md);
|
||||
}
|
||||
|
||||
.wpaw-model-metrics {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--wpaw-space-sm);
|
||||
}
|
||||
|
||||
.wpaw-section {
|
||||
margin-bottom: var(--wpaw-space-xl);
|
||||
}
|
||||
|
||||
.wpaw-stat-value {
|
||||
font-size: var(--wpaw-text-2xl);
|
||||
}
|
||||
.wpaw-stat-card {
|
||||
margin-bottom: var(--wpaw-space-md);
|
||||
}
|
||||
|
||||
.wpaw-model-metrics {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--wpaw-space-sm);
|
||||
}
|
||||
|
||||
.wpaw-section {
|
||||
margin-bottom: var(--wpaw-space-xl);
|
||||
}
|
||||
|
||||
.wpaw-stat-value {
|
||||
font-size: var(--wpaw-text-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -513,60 +523,102 @@
|
||||
============================================ */
|
||||
|
||||
@media print {
|
||||
.wpaw-settings-v2-wrap {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.wpaw-stat-card,
|
||||
.wpaw-model-card {
|
||||
break-inside: avoid;
|
||||
box-shadow: none;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.wpaw-animate-pulse,
|
||||
.wpaw-animate-spin {
|
||||
animation: none;
|
||||
}
|
||||
.wpaw-settings-v2-wrap {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.wpaw-stat-card,
|
||||
.wpaw-model-card {
|
||||
break-inside: avoid;
|
||||
box-shadow: none;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.wpaw-animate-pulse,
|
||||
.wpaw-animate-spin {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* GEO Score Indicator */
|
||||
.wpaw-geo-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 16px;
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border-top: 1px solid var(--wpaw-border);
|
||||
font-size: var(--wpaw-text-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 16px;
|
||||
background: var(--wpaw-bg-secondary);
|
||||
border-top: 1px solid var(--wpaw-border);
|
||||
font-size: var(--wpaw-text-sm);
|
||||
}
|
||||
|
||||
.wpaw-geo-score {
|
||||
font-weight: 600;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wpaw-geo-score.excellent {
|
||||
color: var(--wpaw-success);
|
||||
color: var(--wpaw-success);
|
||||
}
|
||||
|
||||
.wpaw-geo-score.good {
|
||||
color: var(--wpaw-info);
|
||||
color: var(--wpaw-info);
|
||||
}
|
||||
|
||||
.wpaw-geo-score.fair {
|
||||
color: var(--wpaw-warning);
|
||||
color: var(--wpaw-warning);
|
||||
}
|
||||
|
||||
.wpaw-geo-score.poor {
|
||||
color: var(--wpaw-error);
|
||||
color: var(--wpaw-error);
|
||||
}
|
||||
|
||||
.wpaw-geo-eligible {
|
||||
background: var(--wpaw-success);
|
||||
color: #000;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--wpaw-success);
|
||||
color: #000;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Session edit-lock banner (multi-tab safety) */
|
||||
.wpaw-session-lock-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
margin: 0 0 4px;
|
||||
background: var(--wpaw-warning-bg, #fef3cd);
|
||||
border: 1px solid var(--wpaw-warning-border, #ffc107);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: var(--wpaw-warning-text, #856404);
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-session-lock-banner {
|
||||
background: rgba(255, 193, 7, 0.12);
|
||||
border-color: rgba(255, 193, 7, 0.3);
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-session-lock-banner button {
|
||||
color: #ffc107;
|
||||
background-color: unset;
|
||||
border: 1px solid #ffc107;
|
||||
outline: unset !important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
|
||||
.dark-theme .wpaw-session-lock-banner button:is(:hover, :focus) {
|
||||
color: #2c3137 !important;
|
||||
background-color: #ffc107 !important;
|
||||
outline: unset !important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
|
||||
.wpaw-session-lock-takeover {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
2655
assets/css/agentic-sidebar-dark.css
Normal file
2655
assets/css/agentic-sidebar-dark.css
Normal file
File diff suppressed because it is too large
Load Diff
7344
assets/css/agentic-sidebar.css
Normal file
7344
assets/css/agentic-sidebar.css
Normal file
File diff suppressed because it is too large
Load Diff
807
assets/css/agentic-tokens.css
Normal file
807
assets/css/agentic-tokens.css
Normal file
@@ -0,0 +1,807 @@
|
||||
/**
|
||||
* Agentic Design System — Tokens & Utilities
|
||||
* Source: stitch/wp_agentic_interface/DESIGN.md
|
||||
*
|
||||
* This is the canonical design token layer for the Stitch design system.
|
||||
* Phase 0: Lands alongside existing --wpaw-* tokens (no breakage).
|
||||
* All new UI should use --aw-* tokens exclusively.
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
* @since 0.3.0
|
||||
*/
|
||||
|
||||
/* =========================================================================
|
||||
1. FONT FACES
|
||||
========================================================================= */
|
||||
|
||||
/* Inter — Variable font (weights 100–900 via font-weight) */
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("../fonts/inter/Inter-Variable.woff2") format("woff2");
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("../fonts/inter/Inter-Variable-Italic.woff2") format("woff2");
|
||||
font-weight: 100 900;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* JetBrains Mono — Monospace for technical data */
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2")
|
||||
format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("../fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
2. DESIGN TOKENS (Custom Properties)
|
||||
========================================================================= */
|
||||
|
||||
:root {
|
||||
/* ---- Surface (tonal depth — NOT shadows) ---- */
|
||||
--aw-surface: #f7f9ff;
|
||||
--aw-surface-dim: #d3dbe5;
|
||||
--aw-surface-bright: #f7f9ff;
|
||||
--aw-surface-container-lowest: #ffffff;
|
||||
--aw-surface-container-low: #edf4ff;
|
||||
--aw-surface-container: #e7eff9;
|
||||
--aw-surface-container-high: #e1e9f3;
|
||||
--aw-surface-container-highest: #dbe3ed;
|
||||
--aw-surface-variant: #dbe3ed;
|
||||
--aw-surface-faint: #f7f9ff;
|
||||
|
||||
/* ---- On-surface (text) ---- */
|
||||
--aw-on-surface: #151c24;
|
||||
--aw-on-surface-variant: #40474f;
|
||||
--aw-inverse-surface: #293139;
|
||||
--aw-inverse-on-surface: #eaf1fc;
|
||||
|
||||
/* ---- Outline ---- */
|
||||
--aw-outline: #717880;
|
||||
--aw-outline-variant: #c0c7d0;
|
||||
--aw-outline-subtle: #bfc7d1;
|
||||
|
||||
/* ---- Surface tint ---- */
|
||||
--aw-surface-tint: #046397;
|
||||
|
||||
/* ---- Primary ---- */
|
||||
--aw-primary: #004971;
|
||||
--aw-on-primary: #ffffff;
|
||||
--aw-primary-container: #006295;
|
||||
--aw-on-primary-container: #b4dbff;
|
||||
--aw-inverse-primary: #92ccff;
|
||||
--aw-primary-fixed: #cce5ff;
|
||||
--aw-primary-fixed-dim: #92ccff;
|
||||
--aw-on-primary-fixed: #001d31;
|
||||
--aw-on-primary-fixed-variant: #004b73;
|
||||
|
||||
/* ---- Secondary ---- */
|
||||
--aw-secondary: #585f65;
|
||||
--aw-on-secondary: #ffffff;
|
||||
--aw-secondary-container: #dce3ea;
|
||||
--aw-on-secondary-container: #5e656b;
|
||||
--aw-secondary-fixed: #dce3ea;
|
||||
--aw-secondary-fixed-dim: #c0c7ce;
|
||||
--aw-on-secondary-fixed: #161c21;
|
||||
--aw-on-secondary-fixed-variant: #41484d;
|
||||
|
||||
/* ---- Tertiary (Success) ---- */
|
||||
--aw-tertiary: #005112;
|
||||
--aw-on-tertiary: #ffffff;
|
||||
--aw-tertiary-container: #006c1c;
|
||||
--aw-on-tertiary-container: #87ec85;
|
||||
--aw-tertiary-fixed: #94f990;
|
||||
--aw-tertiary-fixed-dim: #78dc77;
|
||||
--aw-on-tertiary-fixed: #002204;
|
||||
--aw-on-tertiary-fixed-variant: #005313;
|
||||
|
||||
/* ---- Error ---- */
|
||||
--aw-error: #ba1a1a;
|
||||
--aw-on-error: #ffffff;
|
||||
--aw-error-container: #ffdad6;
|
||||
--aw-on-error-container: #93000a;
|
||||
|
||||
/* ---- WordPress-specific ---- */
|
||||
--aw-wp-dark-sidebar: #2c3338;
|
||||
--aw-wp-active-blue: #2271b1;
|
||||
--aw-wp-hover-dark: #191e23;
|
||||
--aw-wp-link-alt: #72aee6;
|
||||
|
||||
/* ---- Typography ---- */
|
||||
--aw-font-sans:
|
||||
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif;
|
||||
--aw-font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
|
||||
|
||||
/* Type scale */
|
||||
--aw-text-headline-lg: 600 24px/32px var(--aw-font-sans);
|
||||
--aw-text-headline-md: 600 18px/24px var(--aw-font-sans);
|
||||
--aw-text-body-md: 400 14px/20px var(--aw-font-sans);
|
||||
--aw-text-body-sm: 400 13px/18px var(--aw-font-sans);
|
||||
--aw-text-label-caps: 700 11px/16px var(--aw-font-sans);
|
||||
--aw-text-code-sm: 400 12px/18px var(--aw-font-mono);
|
||||
|
||||
/* Letter-spacing */
|
||||
--aw-tracking-headline-lg: -0.02em;
|
||||
--aw-tracking-headline-md: -0.01em;
|
||||
--aw-tracking-label-caps: 0.05em;
|
||||
|
||||
/* ---- Border Radius ---- */
|
||||
--aw-radius-sm: 0.125rem; /* 2px */
|
||||
--aw-radius: 0.25rem; /* 4px */
|
||||
--aw-radius-md: 0.375rem; /* 6px */
|
||||
--aw-radius-lg: 0.5rem; /* 8px */
|
||||
--aw-radius-xl: 0.75rem; /* 12px */
|
||||
--aw-radius-full: 9999px;
|
||||
|
||||
/* ---- Spacing ---- */
|
||||
--aw-space-sidebar: 192px;
|
||||
--aw-space-sidebar-collapsed: 64px;
|
||||
--aw-space-page: 32px;
|
||||
--aw-space-stack: 12px;
|
||||
--aw-space-section: 40px;
|
||||
--aw-space-max-content: 840px;
|
||||
|
||||
/* ---- Transitions ---- */
|
||||
--aw-transition-fast: 150ms ease-out;
|
||||
--aw-transition-normal: 200ms ease-out;
|
||||
--aw-transition-slow: 300ms ease-out;
|
||||
|
||||
/* ---- Shadows (minimal usage) ---- */
|
||||
--aw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
3. TYPOGRAPHY UTILITY CLASSES
|
||||
========================================================================= */
|
||||
|
||||
.aw-headline-lg {
|
||||
font: var(--aw-text-headline-lg);
|
||||
letter-spacing: var(--aw-tracking-headline-lg);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
.aw-headline-md {
|
||||
font: var(--aw-text-headline-md);
|
||||
letter-spacing: var(--aw-tracking-headline-md);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
.aw-body-md {
|
||||
font: var(--aw-text-body-md);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
.aw-body-sm {
|
||||
font: var(--aw-text-body-sm);
|
||||
color: var(--aw-on-surface-variant);
|
||||
}
|
||||
|
||||
.aw-label-caps {
|
||||
font: var(--aw-text-label-caps);
|
||||
letter-spacing: var(--aw-tracking-label-caps);
|
||||
text-transform: uppercase;
|
||||
color: var(--aw-on-surface-variant);
|
||||
}
|
||||
|
||||
.aw-code-sm {
|
||||
font: var(--aw-text-code-sm);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
4. SURFACE UTILITY CLASSES
|
||||
========================================================================= */
|
||||
|
||||
.aw-surface {
|
||||
background: var(--aw-surface);
|
||||
}
|
||||
.aw-surface-dim {
|
||||
background: var(--aw-surface-dim);
|
||||
}
|
||||
.aw-surface-bright {
|
||||
background: var(--aw-surface-bright);
|
||||
}
|
||||
.aw-surface-lowest {
|
||||
background: var(--aw-surface-container-lowest);
|
||||
}
|
||||
.aw-surface-low {
|
||||
background: var(--aw-surface-container-low);
|
||||
}
|
||||
.aw-surface-mid {
|
||||
background: var(--aw-surface-container);
|
||||
}
|
||||
.aw-surface-high {
|
||||
background: var(--aw-surface-container-high);
|
||||
}
|
||||
.aw-surface-highest {
|
||||
background: var(--aw-surface-container-highest);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
5. CARD CONTAINER
|
||||
========================================================================= */
|
||||
|
||||
.aw-card {
|
||||
background: var(--aw-surface-container-lowest);
|
||||
border: none;
|
||||
border-radius: var(--aw-radius-xl);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.aw-card--elevated {
|
||||
box-shadow: var(--aw-shadow-sm);
|
||||
}
|
||||
|
||||
.aw-card__header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.aw-card__title {
|
||||
font: var(--aw-text-headline-md);
|
||||
letter-spacing: var(--aw-tracking-headline-md);
|
||||
color: var(--aw-on-surface);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aw-card__title i.bi {
|
||||
color: var(--aw-on-surface-variant);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.aw-card__subtitle {
|
||||
font: var(--aw-text-body-sm);
|
||||
color: var(--aw-on-surface-variant);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
6. BUTTONS
|
||||
========================================================================= */
|
||||
|
||||
.aw-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font: 600 14px/20px var(--aw-font-sans);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--aw-radius);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all var(--aw-transition-normal);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.aw-btn:focus-visible {
|
||||
outline: 2px solid var(--aw-primary);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* Primary */
|
||||
.aw-btn--primary {
|
||||
background: var(--aw-primary);
|
||||
color: var(--aw-on-primary);
|
||||
}
|
||||
|
||||
.aw-btn--primary:hover {
|
||||
background: var(--aw-primary-container);
|
||||
}
|
||||
|
||||
.aw-btn--primary:active {
|
||||
background: var(--aw-on-primary-fixed-variant);
|
||||
}
|
||||
|
||||
/* Secondary */
|
||||
.aw-btn--secondary {
|
||||
background: transparent;
|
||||
color: var(--aw-primary);
|
||||
border-color: var(--aw-outline-variant);
|
||||
}
|
||||
|
||||
.aw-btn--secondary:hover {
|
||||
background: var(--aw-surface-container-low);
|
||||
border-color: var(--aw-primary);
|
||||
}
|
||||
|
||||
.aw-btn--secondary:active {
|
||||
background: var(--aw-surface-container);
|
||||
}
|
||||
|
||||
/* Ghost */
|
||||
.aw-btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--aw-on-surface-variant);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.aw-btn--ghost:hover {
|
||||
background: var(--aw-surface-container-low);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
.aw-btn--danger {
|
||||
background: var(--aw-error);
|
||||
color: var(--aw-on-error);
|
||||
}
|
||||
|
||||
.aw-btn--danger:hover {
|
||||
background: #9b1515;
|
||||
}
|
||||
|
||||
/* Size variants */
|
||||
.aw-btn--sm {
|
||||
font-size: 13px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.aw-btn--lg {
|
||||
font-size: 15px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
7. INPUTS
|
||||
========================================================================= */
|
||||
|
||||
.aw-input,
|
||||
.aw-select,
|
||||
.aw-textarea {
|
||||
font: var(--aw-text-body-md);
|
||||
color: var(--aw-on-surface);
|
||||
background: var(--aw-surface-container-lowest);
|
||||
border: 1px solid var(--aw-outline-variant);
|
||||
border-radius: var(--aw-radius-md);
|
||||
padding: 7px 11px;
|
||||
transition: all var(--aw-transition-fast);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aw-input:hover,
|
||||
.aw-select:hover,
|
||||
.aw-textarea:hover {
|
||||
border-color: var(--aw-outline);
|
||||
}
|
||||
|
||||
.aw-input:focus,
|
||||
.aw-select:focus,
|
||||
.aw-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--aw-primary);
|
||||
box-shadow: 0 0 0 1px var(--aw-primary);
|
||||
}
|
||||
|
||||
.aw-input::placeholder,
|
||||
.aw-textarea::placeholder {
|
||||
color: var(--aw-outline);
|
||||
}
|
||||
|
||||
.aw-input--code {
|
||||
font: var(--aw-text-code-sm);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.aw-textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
8. FORM GROUP
|
||||
========================================================================= */
|
||||
|
||||
.aw-form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.aw-form-group__label {
|
||||
display: block;
|
||||
font: var(--aw-text-label-caps);
|
||||
letter-spacing: var(--aw-tracking-label-caps);
|
||||
text-transform: uppercase;
|
||||
color: var(--aw-on-surface-variant);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.aw-form-group__label span[style*="aw-error"] {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.aw-form-group__hint {
|
||||
font: var(--aw-text-body-sm);
|
||||
color: var(--aw-outline);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
9. STATUS / BANNER
|
||||
========================================================================= */
|
||||
|
||||
.aw-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--aw-radius-lg);
|
||||
font: var(--aw-text-body-sm);
|
||||
}
|
||||
|
||||
.aw-banner--info {
|
||||
background: rgba(0, 98, 149, 0.08);
|
||||
border: 1px solid rgba(0, 98, 149, 0.15);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
.aw-banner--success {
|
||||
background: rgba(0, 81, 18, 0.08);
|
||||
border: 1px solid rgba(0, 81, 18, 0.15);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
.aw-banner--warning {
|
||||
background: rgba(255, 193, 7, 0.1);
|
||||
border: 1px solid rgba(255, 193, 7, 0.2);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
.aw-banner--error {
|
||||
background: rgba(186, 26, 26, 0.08);
|
||||
border: 1px solid rgba(186, 26, 26, 0.15);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
10. PROGRESS BAR
|
||||
========================================================================= */
|
||||
|
||||
.aw-progress {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--aw-surface-container);
|
||||
border-radius: var(--aw-radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aw-progress__fill {
|
||||
height: 100%;
|
||||
background: var(--aw-primary);
|
||||
border-radius: var(--aw-radius-full);
|
||||
transition: width var(--aw-transition-normal);
|
||||
}
|
||||
|
||||
.aw-progress__fill--success {
|
||||
background: var(--aw-tertiary-container);
|
||||
}
|
||||
|
||||
.aw-progress__fill--error {
|
||||
background: var(--aw-error);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
11. BADGE / TAG
|
||||
========================================================================= */
|
||||
|
||||
.aw-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font: 600 12px/16px var(--aw-font-sans);
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--aw-radius-full);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aw-badge--primary {
|
||||
background: var(--aw-primary-fixed);
|
||||
color: var(--aw-on-primary-fixed);
|
||||
}
|
||||
|
||||
.aw-badge--success {
|
||||
background: var(--aw-tertiary-fixed);
|
||||
color: var(--aw-on-tertiary-fixed);
|
||||
}
|
||||
|
||||
.aw-badge--error {
|
||||
background: var(--aw-error-container);
|
||||
color: var(--aw-on-error-container);
|
||||
}
|
||||
|
||||
.aw-badge--neutral {
|
||||
background: var(--aw-secondary-fixed);
|
||||
color: var(--aw-on-secondary-fixed);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
12. TABLE
|
||||
========================================================================= */
|
||||
|
||||
.aw-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font: var(--aw-text-body-sm);
|
||||
}
|
||||
|
||||
.aw-table th {
|
||||
font: var(--aw-text-label-caps);
|
||||
letter-spacing: var(--aw-tracking-label-caps);
|
||||
text-transform: uppercase;
|
||||
text-align: left;
|
||||
color: var(--aw-on-surface-variant);
|
||||
padding: 8px 12px;
|
||||
border-bottom: 2px solid var(--aw-outline-subtle);
|
||||
}
|
||||
|
||||
.aw-table td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--aw-outline-subtle);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
.aw-table tbody tr:nth-child(even) {
|
||||
background: var(--aw-surface-container-low);
|
||||
}
|
||||
|
||||
.aw-table tbody tr:hover {
|
||||
background: var(--aw-surface-container);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
13. SIDEBAR NAV (for admin settings)
|
||||
========================================================================= */
|
||||
|
||||
.aw-nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
font: var(--aw-text-body-md);
|
||||
color: var(--aw-on-surface-variant);
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: var(--aw-radius-md);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all var(--aw-transition-fast);
|
||||
}
|
||||
|
||||
.aw-nav-item:hover {
|
||||
background: var(--aw-surface-container-low);
|
||||
color: var(--aw-on-surface);
|
||||
}
|
||||
|
||||
.aw-nav-item--active {
|
||||
background: var(--aw-wp-active-blue);
|
||||
color: var(--aw-on-primary);
|
||||
}
|
||||
|
||||
.aw-nav-item--active:hover {
|
||||
background: var(--aw-wp-active-blue);
|
||||
color: var(--aw-on-primary);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
14. TOGGLE SWITCH
|
||||
========================================================================= */
|
||||
|
||||
.aw-toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.aw-toggle input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.aw-toggle__track {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
inset: 0;
|
||||
background: var(--aw-outline-variant);
|
||||
border-radius: var(--aw-radius-full);
|
||||
transition: background var(--aw-transition-fast);
|
||||
}
|
||||
|
||||
.aw-toggle__track::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
background: var(--aw-surface-container-lowest);
|
||||
border-radius: var(--aw-radius-full);
|
||||
transition: transform var(--aw-transition-fast);
|
||||
}
|
||||
|
||||
.aw-toggle input:checked + .aw-toggle__track {
|
||||
background: var(--aw-primary);
|
||||
}
|
||||
|
||||
.aw-toggle input:checked + .aw-toggle__track::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
.aw-toggle input:focus-visible + .aw-toggle__track {
|
||||
outline: 2px solid var(--aw-primary);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
15. DIVIDER
|
||||
========================================================================= */
|
||||
|
||||
.aw-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--aw-outline-subtle);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.aw-divider--strong {
|
||||
border-top-color: var(--aw-outline-variant);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
16. SKELETON / LOADING
|
||||
========================================================================= */
|
||||
|
||||
.aw-skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--aw-surface-container) 25%,
|
||||
var(--aw-surface-container-low) 50%,
|
||||
var(--aw-surface-container) 75%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: aw-shimmer 1.5s ease-in-out infinite;
|
||||
border-radius: var(--aw-radius);
|
||||
}
|
||||
|
||||
@keyframes aw-shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
17. LAYOUT PRIMITIVES
|
||||
========================================================================= */
|
||||
|
||||
.aw-app-shell {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: var(--aw-surface);
|
||||
}
|
||||
|
||||
.aw-app-shell__sidebar {
|
||||
width: var(--aw-space-sidebar);
|
||||
flex-shrink: 0;
|
||||
background: var(--aw-wp-dark-sidebar);
|
||||
color: var(--aw-inverse-on-surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.aw-app-shell__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.aw-content-canvas {
|
||||
max-width: var(--aw-space-max-content);
|
||||
padding: var(--aw-space-page);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Stack / flex utilities */
|
||||
.aw-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--aw-space-stack);
|
||||
}
|
||||
|
||||
.aw-section-gap {
|
||||
margin-bottom: var(--aw-space-section);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
18. FOOTER ACTION BAR
|
||||
========================================================================= */
|
||||
|
||||
.aw-footer-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: var(--aw-surface-container-low);
|
||||
border-top: 1px solid var(--aw-outline-subtle);
|
||||
}
|
||||
|
||||
.aw-footer-bar--sticky {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
19. TAB BAR (horizontal, for Gutenberg sidebar)
|
||||
========================================================================= */
|
||||
|
||||
.aw-tab-bar {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--aw-outline-subtle);
|
||||
background: var(--aw-surface-container-lowest);
|
||||
}
|
||||
|
||||
.aw-tab-bar__item {
|
||||
flex: 1;
|
||||
padding: 10px 12px;
|
||||
font: 600 13px/18px var(--aw-font-sans);
|
||||
color: var(--aw-on-surface-variant);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all var(--aw-transition-fast);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.aw-tab-bar__item:hover {
|
||||
color: var(--aw-on-surface);
|
||||
background: var(--aw-surface-container-low);
|
||||
}
|
||||
|
||||
.aw-tab-bar__item--active {
|
||||
color: var(--aw-primary);
|
||||
border-bottom-color: var(--aw-primary);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
20. DARK MODE OVERRIDE (future — scaffold only)
|
||||
========================================================================= */
|
||||
|
||||
[data-aw-theme="dark"] {
|
||||
--aw-surface: #1a2332;
|
||||
--aw-surface-dim: #111827;
|
||||
--aw-surface-bright: #243447;
|
||||
--aw-surface-container-lowest: #0f172a;
|
||||
--aw-surface-container-low: #1e293b;
|
||||
--aw-surface-container: #243447;
|
||||
--aw-surface-container-high: #2d3e52;
|
||||
--aw-surface-container-highest: #374757;
|
||||
--aw-on-surface: #e8eaed;
|
||||
--aw-on-surface-variant: #b8bcc4;
|
||||
--aw-outline: #5a6a7e;
|
||||
--aw-outline-variant: #3a4a5e;
|
||||
--aw-outline-subtle: #2d3e52;
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
/**
|
||||
* Agentic Vibe - CSS Variables
|
||||
* Design System Foundation
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
* @since 0.2.0
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Primary Colors - Cyan/Blue (matching V1) */
|
||||
--wpaw-primary: #17a2b8;
|
||||
--wpaw-primary-dark: #138496;
|
||||
--wpaw-primary-light: #5bc0de;
|
||||
|
||||
/* Dark Theme (matching V1) */
|
||||
--wpaw-bg-primary: #1a2332;
|
||||
--wpaw-bg-secondary: #243447;
|
||||
--wpaw-bg-tertiary: #2d3e52;
|
||||
--wpaw-text-primary: #e8eaed;
|
||||
--wpaw-text-secondary: #b8bcc4;
|
||||
--wpaw-text-tertiary: #8a8f98;
|
||||
--wpaw-border: #3a4a5e;
|
||||
|
||||
/* Status Colors - Functional & Meaningful */
|
||||
--wpaw-success: #28a745;
|
||||
--wpaw-success-light: #1e7e34;
|
||||
--wpaw-warning: #ffc107;
|
||||
--wpaw-warning-light: #e0a800;
|
||||
--wpaw-error: #dc3545;
|
||||
--wpaw-error-light: #bd2130;
|
||||
--wpaw-info: #17a2b8;
|
||||
--wpaw-info-light: #138496;
|
||||
|
||||
/* Typography */
|
||||
--wpaw-font-mono: 'Fira Code', 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
|
||||
--wpaw-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
/* Font Sizes */
|
||||
--wpaw-text-xs: 0.75rem; /* 12px */
|
||||
--wpaw-text-sm: 0.875rem; /* 14px */
|
||||
--wpaw-text-base: 1rem; /* 16px */
|
||||
--wpaw-text-lg: 1.125rem; /* 18px */
|
||||
--wpaw-text-xl: 1.25rem; /* 20px */
|
||||
--wpaw-text-2xl: 1.5rem; /* 24px */
|
||||
--wpaw-text-3xl: 1.875rem; /* 30px */
|
||||
|
||||
/* Spacing Scale - Consistent rhythm */
|
||||
--wpaw-space-xs: 0.25rem; /* 4px */
|
||||
--wpaw-space-sm: 0.5rem; /* 8px */
|
||||
--wpaw-space-md: 1rem; /* 16px */
|
||||
--wpaw-space-lg: 1.5rem; /* 24px */
|
||||
--wpaw-space-xl: 2rem; /* 32px */
|
||||
--wpaw-space-2xl: 3rem; /* 48px */
|
||||
--wpaw-space-3xl: 4rem; /* 64px */
|
||||
|
||||
/* Border Radius */
|
||||
--wpaw-radius-sm: 4px;
|
||||
--wpaw-radius-md: 8px;
|
||||
--wpaw-radius-lg: 12px;
|
||||
--wpaw-radius-xl: 16px;
|
||||
--wpaw-radius-full: 9999px;
|
||||
|
||||
/* Shadows - Subtle elevation */
|
||||
--wpaw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--wpaw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
--wpaw-shadow-md: 0 4px 12px rgba(59, 130, 246, 0.1);
|
||||
--wpaw-shadow-lg: 0 8px 24px rgba(59, 130, 246, 0.15);
|
||||
--wpaw-shadow-xl: 0 12px 32px rgba(59, 130, 246, 0.2);
|
||||
|
||||
/* Transitions - Smooth & performant */
|
||||
--wpaw-transition-fast: 150ms ease-out;
|
||||
--wpaw-transition-normal: 200ms ease-out;
|
||||
--wpaw-transition-slow: 300ms ease-out;
|
||||
--wpaw-transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
/* Z-index Scale */
|
||||
--wpaw-z-base: 1;
|
||||
--wpaw-z-dropdown: 1000;
|
||||
--wpaw-z-sticky: 1020;
|
||||
--wpaw-z-fixed: 1030;
|
||||
--wpaw-z-modal-backdrop: 1040;
|
||||
--wpaw-z-modal: 1050;
|
||||
--wpaw-z-popover: 1060;
|
||||
--wpaw-z-tooltip: 1070;
|
||||
}
|
||||
|
||||
/* Dark Mode Variables - Already dark by default, no override needed */
|
||||
|
||||
/* Light Mode Override (if needed in future) */
|
||||
.wpaw-light-mode {
|
||||
--wpaw-bg-primary: #ffffff;
|
||||
--wpaw-bg-secondary: #f8f9fa;
|
||||
--wpaw-bg-tertiary: #e9ecef;
|
||||
--wpaw-text-primary: #212529;
|
||||
--wpaw-text-secondary: #6c757d;
|
||||
--wpaw-text-tertiary: #adb5bd;
|
||||
--wpaw-border: #dee2e6;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
/* Cost Log Grouped/Collapsible Styles */
|
||||
|
||||
/* Group row styles */
|
||||
.wpaw-group-row {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.wpaw-group-row:hover {
|
||||
background-color: var(--agentic-bg-hover) !important;
|
||||
}
|
||||
|
||||
.wpaw-group-row .wpaw-collapse-icon {
|
||||
transition: transform 0.2s ease;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Collapsible row styles */
|
||||
.wpaw-collapse-row {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.wpaw-collapse-row td {
|
||||
background-color: var(--agentic-bg-tertiary) !important;
|
||||
border-top: 1px solid var(--agentic-border-color) !important;
|
||||
}
|
||||
|
||||
/* Details table inside collapse */
|
||||
.wpaw-details-table {
|
||||
background-color: transparent !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.wpaw-details-table thead th {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
border-bottom: 1px solid var(--agentic-border-color) !important;
|
||||
font-weight: 500;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.wpaw-details-table tbody tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-details-table tbody tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.wpaw-details-table code {
|
||||
background-color: var(--agentic-bg-secondary);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
@@ -6,98 +6,153 @@
|
||||
|
||||
/* Image Placeholders in Editor */
|
||||
.wpaw-image-placeholder {
|
||||
margin: 20px 0;
|
||||
padding: 0;
|
||||
border: 2px dashed #2271b1;
|
||||
border-radius: 8px;
|
||||
background: #f0f6ff;
|
||||
margin: 20px 0;
|
||||
padding: 0;
|
||||
border: 2px dashed #2271b1;
|
||||
border-radius: 8px;
|
||||
background: #f0f6ff;
|
||||
}
|
||||
|
||||
.wpaw-placeholder-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.wpaw-placeholder-icon {
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpaw-placeholder-text {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wpaw-placeholder-text strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #2271b1;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #2271b1;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.wpaw-placeholder-text p {
|
||||
margin: 0;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Editor-specific styles for image placeholders */
|
||||
.block-editor-block-list__block .wpaw-image-placeholder {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.block-editor-block-list__block .wpaw-image-placeholder:hover {
|
||||
border-color: #135e96;
|
||||
background: #e7f3ff;
|
||||
box-shadow: 0 2px 8px rgba(34, 113, 177, 0.1);
|
||||
border-color: #135e96;
|
||||
background: #e7f3ff;
|
||||
box-shadow: 0 2px 8px rgba(34, 113, 177, 0.1);
|
||||
}
|
||||
|
||||
/* Block Refine Toolbar Button */
|
||||
.wpaw-refine-toolbar-button {
|
||||
margin-right: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.wpaw-refine-toolbar-button button {
|
||||
color: #2271b1;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-refine-toolbar-button button:hover {
|
||||
color: #135e96;
|
||||
color: #135e96;
|
||||
}
|
||||
|
||||
/* Refine Modal */
|
||||
.wpaw-refine-modal .components-modal__content {
|
||||
padding: 24px;
|
||||
max-width: 500px;
|
||||
padding: 24px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.wpaw-refine-modal .components-modal__header {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wpaw-refine-modal p {
|
||||
margin-bottom: 16px;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpaw-refine-modal .components-textarea-control__input {
|
||||
min-height: 100px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.wpaw-refine-modal-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.wpaw-refine-modal-actions button {
|
||||
flex: 0;
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
/* Gutenberg Editor Diff Highlights */
|
||||
.block-editor-block-list__block.wpaw-diff-removed,
|
||||
.editor-styles-wrapper .wpaw-diff-removed {
|
||||
background-color: #f1cbcb !important;
|
||||
position: relative;
|
||||
padding: 20px !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.block-editor-block-list__block.wpaw-diff-removed::before,
|
||||
.editor-styles-wrapper .wpaw-diff-removed::before {
|
||||
content: "-";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
transform: translateX(-36px);
|
||||
background-color: red;
|
||||
color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 2px;
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.block-editor-block-list__block.wpaw-diff-added,
|
||||
.editor-styles-wrapper .wpaw-diff-added {
|
||||
background-color: #c9f3c9 !important;
|
||||
position: relative;
|
||||
padding: 20px !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.block-editor-block-list__block.wpaw-diff-added::before,
|
||||
.editor-styles-wrapper .wpaw-diff-added::before {
|
||||
content: "+";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
transform: translateX(-36px);
|
||||
background-color: green;
|
||||
color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 2px;
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
716
assets/css/settings-v2-stitch.css
Normal file
716
assets/css/settings-v2-stitch.css
Normal file
@@ -0,0 +1,716 @@
|
||||
/* WP Agentic Writer Settings V2 — Stitch implementation */
|
||||
:root {
|
||||
--aw2-canvas: #f7f9ff;
|
||||
--aw2-surface: #ffffff;
|
||||
--aw2-surface-soft: #edf4ff;
|
||||
--aw2-surface-mid: #e7eff9;
|
||||
--aw2-border: #d3dbe5;
|
||||
--aw2-border-soft: #e1e9f3;
|
||||
--aw2-text: #171c20;
|
||||
--aw2-muted: #54606a;
|
||||
--aw2-primary: #004971;
|
||||
--aw2-primary-2: #006295;
|
||||
--aw2-primary-soft: #cce5ff;
|
||||
--aw2-success: #005112;
|
||||
--aw2-success-soft: #e1f8df;
|
||||
--aw2-error: #ba1a1a;
|
||||
--aw2-error-soft: #ffdad6;
|
||||
--aw2-warning: #8a4b00;
|
||||
--aw2-warning-soft: #ffefd6;
|
||||
--aw2-rail: #2c3338;
|
||||
--aw2-rail-active: #2271b1;
|
||||
--aw2-radius-sm: 4px;
|
||||
--aw2-radius: 8px;
|
||||
--aw2-radius-lg: 12px;
|
||||
--aw2-radius-full: 999px;
|
||||
--aw2-font:
|
||||
Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--aw2-mono: "JetBrains Mono", SFMono-Regular, Consolas, monospace;
|
||||
}
|
||||
|
||||
#wpcontent {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
#wpbody-content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.wpaw2-settings * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wpaw2-settings {
|
||||
margin: 0;
|
||||
color: var(--aw2-text);
|
||||
background: var(--aw2-canvas);
|
||||
font-family: var(--aw2-font);
|
||||
min-height: calc(100vh - 32px);
|
||||
}
|
||||
.wpaw2-settings button,
|
||||
.wpaw2-settings input,
|
||||
.wpaw2-settings select,
|
||||
.wpaw2-settings textarea {
|
||||
font: inherit;
|
||||
}
|
||||
.wpaw2-settings a {
|
||||
color: var(--aw2-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.wpaw2-settings h1,
|
||||
.wpaw2-settings h2,
|
||||
.wpaw2-settings h3,
|
||||
.wpaw2-settings p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 248px minmax(0, 1fr);
|
||||
min-height: calc(100vh - 32px);
|
||||
}
|
||||
.wp-rail {
|
||||
background: var(--aw2-rail);
|
||||
color: #fff;
|
||||
padding: 18px 12px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.wp-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 8px 18px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.wp-logo-mark {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--aw2-radius);
|
||||
background: #fff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--aw2-primary);
|
||||
font-weight: 800;
|
||||
}
|
||||
.wp-logo small {
|
||||
display: block;
|
||||
color: #c8d1d8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 11px;
|
||||
}
|
||||
.wp-logo strong {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.rail-group {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.rail-group-title {
|
||||
padding: 0 8px 8px;
|
||||
color: #bac4cc;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.rail-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--aw2-radius-sm);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
.rail-link:hover,
|
||||
.rail-link[aria-selected="true"] {
|
||||
background: var(--aw2-rail-active);
|
||||
color: #fff;
|
||||
}
|
||||
.rail-pill {
|
||||
min-width: 22px;
|
||||
padding: 1px 7px;
|
||||
border-radius: var(--aw2-radius-full);
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.admin-top {
|
||||
height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32px;
|
||||
border-bottom: 1px solid var(--aw2-border);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
backdrop-filter: blur(8px);
|
||||
position: sticky;
|
||||
top: 32px;
|
||||
z-index: 5;
|
||||
}
|
||||
.crumb {
|
||||
color: var(--aw2-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.top-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.page {
|
||||
width: min(1120px, calc(100% - 48px));
|
||||
margin: 24px auto 0;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
min-height: 36px;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--aw2-border);
|
||||
border-radius: var(--aw2-radius-sm);
|
||||
background: var(--aw2-surface);
|
||||
color: var(--aw2-text);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
.btn:hover {
|
||||
border-color: var(--aw2-primary);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--aw2-primary);
|
||||
border-color: var(--aw2-primary);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-danger {
|
||||
color: var(--aw2-error);
|
||||
}
|
||||
.btn-small {
|
||||
min-height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.hero-card,
|
||||
.panel,
|
||||
.tile {
|
||||
background: var(--aw2-surface);
|
||||
border: 1px solid var(--aw2-border-soft);
|
||||
border-radius: var(--aw2-radius-lg);
|
||||
}
|
||||
.hero-card {
|
||||
position: relative;
|
||||
padding: 28px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
right: -80px;
|
||||
top: -100px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--aw2-primary-soft),
|
||||
transparent 70%
|
||||
);
|
||||
}
|
||||
.eyebrow {
|
||||
color: var(--aw2-primary);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 800;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: clamp(28px, 4vw, 42px);
|
||||
line-height: 1.05;
|
||||
max-width: 660px;
|
||||
}
|
||||
.hero-copy {
|
||||
margin-top: 12px;
|
||||
color: var(--aw2-muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
max-width: 660px;
|
||||
}
|
||||
.status-panel {
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.workflow {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.workflow-step {
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 9px;
|
||||
background: var(--aw2-surface-soft);
|
||||
border-radius: var(--aw2-radius);
|
||||
}
|
||||
.step-dot {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--aw2-primary);
|
||||
color: #fff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.step-label {
|
||||
font-weight: 700;
|
||||
}
|
||||
.step-state {
|
||||
color: var(--aw2-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tabs-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: 236px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
.tab-sidebar {
|
||||
background: var(--aw2-surface);
|
||||
border: 1px solid var(--aw2-border-soft);
|
||||
border-radius: var(--aw2-radius-lg);
|
||||
padding: 12px;
|
||||
position: sticky;
|
||||
top: 82px;
|
||||
}
|
||||
.tab-group + .tab-group {
|
||||
margin-top: 14px;
|
||||
}
|
||||
.tab-group-title {
|
||||
padding: 7px 8px;
|
||||
color: var(--aw2-muted);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tab-btn {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--aw2-text);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: var(--aw2-radius);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tab-btn:hover,
|
||||
.tab-btn[aria-selected="true"] {
|
||||
background: var(--aw2-surface-soft);
|
||||
color: var(--aw2-primary);
|
||||
}
|
||||
.tab-count {
|
||||
color: var(--aw2-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.tab-panel {
|
||||
display: none;
|
||||
}
|
||||
.tab-panel.active {
|
||||
display: block;
|
||||
}
|
||||
.section-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.section-head h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.section-head p {
|
||||
color: var(--aw2-muted);
|
||||
margin-top: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid var(--aw2-border-soft);
|
||||
}
|
||||
.panel-title h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.panel-title p {
|
||||
color: var(--aw2-muted);
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.panel-body {
|
||||
padding: 20px;
|
||||
}
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
.grid-4 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.field label,
|
||||
.field-label {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--aw2-text);
|
||||
}
|
||||
.help {
|
||||
color: var(--aw2-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.field-control {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--aw2-border);
|
||||
border-radius: var(--aw2-radius-sm);
|
||||
background: var(--aw2-surface);
|
||||
color: var(--aw2-text);
|
||||
}
|
||||
textarea.field-control {
|
||||
min-height: 82px;
|
||||
resize: vertical;
|
||||
}
|
||||
.password-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
}
|
||||
.switch-row,
|
||||
.check-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-row input[type="checkbox"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.switch {
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
border-radius: var(--aw2-radius-full);
|
||||
background: var(--aw2-border);
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
transition: background 0.18s ease;
|
||||
}
|
||||
.switch::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
transition: transform 0.18s ease;
|
||||
}
|
||||
input[type="checkbox"]:checked + .switch {
|
||||
background: var(--aw2-primary);
|
||||
}
|
||||
input[type="checkbox"]:checked + .switch::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.checkbox-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.chip-list {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.chip {
|
||||
border: 1px solid var(--aw2-border);
|
||||
border-radius: var(--aw2-radius-full);
|
||||
padding: 5px 9px;
|
||||
background: var(--aw2-surface);
|
||||
color: var(--aw2-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.chip.on {
|
||||
background: var(--aw2-primary-soft);
|
||||
color: var(--aw2-primary);
|
||||
border-color: var(--aw2-primary-soft);
|
||||
}
|
||||
.status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
border-radius: var(--aw2-radius-full);
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--aw2-muted);
|
||||
background: var(--aw2-surface-soft);
|
||||
}
|
||||
.status::before {
|
||||
content: "";
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
.status.connected {
|
||||
color: var(--aw2-success);
|
||||
background: var(--aw2-success-soft);
|
||||
}
|
||||
.status.warn {
|
||||
color: var(--aw2-warning);
|
||||
background: var(--aw2-warning-soft);
|
||||
}
|
||||
.status.error {
|
||||
color: var(--aw2-error);
|
||||
background: var(--aw2-error-soft);
|
||||
}
|
||||
.metric-card,
|
||||
.preset-card,
|
||||
.guide-card {
|
||||
padding: 16px;
|
||||
background: var(--aw2-surface-soft);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--aw2-radius);
|
||||
}
|
||||
.preset-card {
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
.preset-card:hover,
|
||||
.preset-card.active {
|
||||
border-color: var(--aw2-primary);
|
||||
background: #fff;
|
||||
}
|
||||
.metric-value {
|
||||
font-family: var(--aw2-mono);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--aw2-primary);
|
||||
}
|
||||
.metric-label {
|
||||
color: var(--aw2-muted);
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.progress {
|
||||
height: 8px;
|
||||
border-radius: var(--aw2-radius-full);
|
||||
background: var(--aw2-surface-mid);
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress > span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: var(--aw2-primary);
|
||||
}
|
||||
.ds-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
preset-card h3 {
|
||||
font-size: 15px;
|
||||
argin-bottom: 8px;
|
||||
}
|
||||
.prse-meta {
|
||||
colo: var(--aw2-muted);
|
||||
font-sze: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.metri.ds-table th,
|
||||
.ds-table td {
|
||||
padding: 11px 12px;
|
||||
border-bottom: 1px solid var(--aw2-border-soft);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ds-table th {
|
||||
background: var(--aw2-surface-soft);
|
||||
color: var(--aw2-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 11px;
|
||||
}
|
||||
.ds-table tbody tr:hover {
|
||||
background: rgba(0, 73, 113, 0.035);
|
||||
}
|
||||
.code,
|
||||
.command {
|
||||
font-family: var(--aw2-mono);
|
||||
background: var(--aw2-surface-soft);
|
||||
border: 1px solid var(--aw2-border-soft);
|
||||
border-radius: var(--aw2-radius-sm);
|
||||
padding: 3px 6px;
|
||||
}
|
||||
.command {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.custom-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) 130px auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
/* Hide default WP admin notices on our settings page */
|
||||
.wpaw2-settings > .notice,
|
||||
.wpaw2-settings > .settings-error,
|
||||
.wpaw2-settings .notice.settings-error {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 76px;
|
||||
max-width: 360px;
|
||||
background: var(--aw2-surface);
|
||||
border: 1px solid var(--aw2-border);
|
||||
border-left: 4px solid var(--aw2-primary);
|
||||
border-radius: var(--aw2-radius);
|
||||
padding: 12px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--aw2-text);
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition:
|
||||
opacity 250ms ease,
|
||||
transform 250ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.wp-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.wp-rail {
|
||||
position: static;
|
||||
display: none;
|
||||
}
|
||||
.admin-top {
|
||||
top: 32px;
|
||||
}
|
||||
.hero,
|
||||
.tabs-wrap {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.tab-sidebar {
|
||||
position: static;
|
||||
}
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.admin-top {
|
||||
height: auto;
|
||||
padding: 14px 16px;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page {
|
||||
width: calc(100% - 24px);
|
||||
margin-top: 14px;
|
||||
}
|
||||
.hero-card,
|
||||
.panel-body {
|
||||
padding: 16px;
|
||||
}
|
||||
.panel-head,
|
||||
.section-head {
|
||||
flex-direction: column;
|
||||
}
|
||||
.grid-2,
|
||||
.grid-3,
|
||||
.grid-4,
|
||||
.checkbox-grid,
|
||||
.custom-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.password-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user