first commit all files
This commit is contained in:
dwindown
119
assets/css/admin-v2.css
Normal file
119
assets/css/admin-v2.css
Normal file
@@ -0,0 +1,119 @@
|
||||
/** 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;
|
||||
}
|
||||
964
assets/css/admin.css
Normal file
964
assets/css/admin.css
Normal file
@@ -0,0 +1,964 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
449
assets/css/agentic-bootstrap-custom.css
Normal file
449
assets/css/agentic-bootstrap-custom.css
Normal file
@@ -0,0 +1,449 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
532
assets/css/agentic-components.css
Normal file
532
assets/css/agentic-components.css
Normal file
@@ -0,0 +1,532 @@
|
||||
/**
|
||||
* Agentic Vibe - Component Library
|
||||
* Reusable UI components for settings page
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
* @since 0.2.0
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
Stat Cards
|
||||
============================================ */
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.wpaw-stat-value.text-success {
|
||||
color: var(--wpaw-success);
|
||||
}
|
||||
|
||||
.wpaw-stat-value.text-warning {
|
||||
color: var(--wpaw-warning);
|
||||
}
|
||||
|
||||
.wpaw-stat-value.text-danger {
|
||||
color: var(--wpaw-error);
|
||||
}
|
||||
|
||||
.wpaw-stat-value.text-info {
|
||||
color: var(--wpaw-info);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Status Badges
|
||||
============================================ */
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.wpaw-status-online {
|
||||
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);
|
||||
}
|
||||
|
||||
.wpaw-status-processing {
|
||||
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);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Code/Monospace Elements
|
||||
============================================ */
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Header Section
|
||||
============================================ */
|
||||
|
||||
.wpaw-agentic-header {
|
||||
margin-bottom: var(--wpaw-space-xl);
|
||||
}
|
||||
|
||||
.wpaw-agentic-header h1 {
|
||||
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);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Model Cards
|
||||
============================================ */
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.wpaw-model-card:hover {
|
||||
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);
|
||||
}
|
||||
|
||||
.wpaw-model-header h5 {
|
||||
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;
|
||||
}
|
||||
|
||||
.wpaw-model-stat {
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.wpaw-metric {
|
||||
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;
|
||||
}
|
||||
|
||||
.wpaw-metric-value {
|
||||
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);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Cost Table Enhancements
|
||||
============================================ */
|
||||
|
||||
.wpaw-cost-table {
|
||||
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;
|
||||
}
|
||||
|
||||
.wpaw-cost-table tbody tr {
|
||||
transition: background-color var(--wpaw-transition-fast);
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.wpaw-cost-table tbody tr:hover {
|
||||
background: var(--wpaw-bg-secondary) !important;
|
||||
}
|
||||
|
||||
.wpaw-cost-table tbody tr.row-success {
|
||||
border-left-color: var(--wpaw-success);
|
||||
}
|
||||
|
||||
.wpaw-cost-table tbody tr.row-warning {
|
||||
border-left-color: var(--wpaw-warning);
|
||||
}
|
||||
|
||||
.wpaw-cost-table tbody tr.row-error {
|
||||
border-left-color: var(--wpaw-error);
|
||||
}
|
||||
|
||||
.wpaw-cost-table .wpaw-code {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Animations
|
||||
============================================ */
|
||||
|
||||
/* Pulse Animation */
|
||||
@keyframes wpaw-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.wpaw-animate-pulse {
|
||||
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); }
|
||||
}
|
||||
|
||||
.wpaw-animate-spin {
|
||||
animation: wpaw-spin 2s linear infinite;
|
||||
}
|
||||
|
||||
/* Fade In */
|
||||
@keyframes wpaw-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-fade-in {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-slide-in-right {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.wpaw-scale-in {
|
||||
animation: wpaw-scale-in 200ms ease-out;
|
||||
}
|
||||
|
||||
/* Shimmer Loading */
|
||||
@keyframes wpaw-shimmer {
|
||||
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;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Utility Classes
|
||||
============================================ */
|
||||
|
||||
/* Hover Lift */
|
||||
.wpaw-hover-lift {
|
||||
transition: transform var(--wpaw-transition-normal);
|
||||
}
|
||||
|
||||
.wpaw-hover-lift:hover {
|
||||
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);
|
||||
}
|
||||
|
||||
.wpaw-glow-primary:hover {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Icon Dot */
|
||||
.wpaw-icon-dot {
|
||||
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;
|
||||
}
|
||||
|
||||
.wpaw-skeleton-text {
|
||||
height: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.wpaw-skeleton-heading {
|
||||
height: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.wpaw-divider {
|
||||
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);
|
||||
}
|
||||
|
||||
/* Section Spacing */
|
||||
.wpaw-section {
|
||||
margin-bottom: var(--wpaw-space-2xl);
|
||||
}
|
||||
|
||||
.wpaw-section-header {
|
||||
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);
|
||||
}
|
||||
|
||||
.wpaw-section-description {
|
||||
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);
|
||||
}
|
||||
|
||||
.wpaw-empty-state-icon {
|
||||
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);
|
||||
}
|
||||
|
||||
.wpaw-empty-state-description {
|
||||
font-size: var(--wpaw-text-sm);
|
||||
color: var(--wpaw-text-tertiary);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Responsive Utilities
|
||||
============================================ */
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Print Styles
|
||||
============================================ */
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
98
assets/css/agentic-variables.css
Normal file
98
assets/css/agentic-variables.css
Normal file
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
54
assets/css/cost-log-grouped.css
Normal file
54
assets/css/cost-log-grouped.css
Normal file
@@ -0,0 +1,54 @@
|
||||
/* 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;
|
||||
}
|
||||
103
assets/css/editor.css
Normal file
103
assets/css/editor.css
Normal file
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* WP Agentic Writer - Editor Styles
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
*/
|
||||
|
||||
/* Image Placeholders in Editor */
|
||||
.wpaw-image-placeholder {
|
||||
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;
|
||||
}
|
||||
|
||||
.wpaw-placeholder-icon {
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wpaw-placeholder-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wpaw-placeholder-text strong {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Editor-specific styles for image placeholders */
|
||||
.block-editor-block-list__block .wpaw-image-placeholder {
|
||||
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);
|
||||
}
|
||||
|
||||
/* Block Refine Toolbar Button */
|
||||
.wpaw-refine-toolbar-button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.wpaw-refine-toolbar-button button {
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wpaw-refine-toolbar-button button:hover {
|
||||
color: #135e96;
|
||||
}
|
||||
|
||||
/* Refine Modal */
|
||||
.wpaw-refine-modal .components-modal__content {
|
||||
padding: 24px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.wpaw-refine-modal .components-modal__header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wpaw-refine-modal p {
|
||||
margin-bottom: 16px;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wpaw-refine-modal .components-textarea-control__input {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.wpaw-refine-modal-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.wpaw-refine-modal-actions button {
|
||||
flex: 0;
|
||||
}
|
||||
572
assets/css/settings-v2.css
Normal file
572
assets/css/settings-v2.css
Normal file
@@ -0,0 +1,572 @@
|
||||
/**
|
||||
* WP Agentic Writer Settings V2
|
||||
* Bootstrap-based settings page styles
|
||||
*/
|
||||
|
||||
/* Container override for WordPress admin */
|
||||
.wpaw-settings-v2-wrap {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap a {
|
||||
color: var(--wpaw-primary);
|
||||
}
|
||||
|
||||
/* Card enhancements */
|
||||
.wpaw-settings-v2-wrap .card {
|
||||
transition: box-shadow 0.2s ease;
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .card:hover {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Preset cards */
|
||||
.wpaw-settings-v2-wrap .preset-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .preset-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .preset-card:focus {
|
||||
outline: 2px solid var(--bs-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .preset-card.border-primary {
|
||||
background-color: rgba(13, 110, 253, 0.05);
|
||||
}
|
||||
|
||||
/* Select2 Bootstrap 5 theme adjustments - Dark Theme */
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection {
|
||||
min-height: 38px;
|
||||
border-color: #3a4a5e !important;
|
||||
background-color: #2d3e52 !important;
|
||||
color: #e8eaed !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
|
||||
line-height: 1.5;
|
||||
color: #e8eaed !important;
|
||||
}
|
||||
|
||||
ul.select2-results__options{
|
||||
padding: unset!important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
|
||||
color: #b8bcc4 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-dropdown {
|
||||
border-color: #3a4a5e !important;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
|
||||
background-color: #243447 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option {
|
||||
color: #e8eaed !important;
|
||||
background-color: #243447 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option--highlighted {
|
||||
background-color: #17a2b8 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option--selected {
|
||||
background-color: #2d3e52 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-search__field {
|
||||
background-color: #2d3e52 !important;
|
||||
color: #e8eaed !important;
|
||||
border-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear, .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
|
||||
right: 1.25rem;
|
||||
}
|
||||
|
||||
/* Form controls - Dark Theme */
|
||||
.wpaw-settings-v2-wrap .form-control,
|
||||
.wpaw-settings-v2-wrap .form-select,
|
||||
.wpaw-settings-v2-wrap input[type="text"],
|
||||
.wpaw-settings-v2-wrap input[type="number"],
|
||||
.wpaw-settings-v2-wrap input[type="email"],
|
||||
.wpaw-settings-v2-wrap input[type="password"],
|
||||
.wpaw-settings-v2-wrap input[type="date"],
|
||||
.wpaw-settings-v2-wrap textarea {
|
||||
background-color: #2d3e52 !important;
|
||||
color: #e8eaed !important;
|
||||
border-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-control:focus,
|
||||
.wpaw-settings-v2-wrap .form-select:focus,
|
||||
.wpaw-settings-v2-wrap input:focus,
|
||||
.wpaw-settings-v2-wrap textarea:focus {
|
||||
border-color: #17a2b8 !important;
|
||||
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25) !important;
|
||||
background-color: #2d3e52 !important;
|
||||
color: #e8eaed !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-control::placeholder,
|
||||
.wpaw-settings-v2-wrap input::placeholder,
|
||||
.wpaw-settings-v2-wrap textarea::placeholder {
|
||||
color: #8a8f98 !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
/* Nav pills styling - Dark Theme */
|
||||
.wpaw-settings-v2-wrap .nav-pills {
|
||||
border: 1px solid #17a2b8;
|
||||
border-radius: .75em;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .nav-pills .nav-link {
|
||||
color: #b8bcc4 !important;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .nav-pills .nav-link:hover:not(.active) {
|
||||
background-color: #243447 !important;
|
||||
color: #e8eaed !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .nav-pills .nav-link.active {
|
||||
background-color: #17a2b8 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* Sticky save buttons */
|
||||
.wpaw-settings-v2-wrap .sticky-bottom {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Table styles - Dark Theme */
|
||||
.wpaw-settings-v2-wrap .table {
|
||||
margin-bottom: 0;
|
||||
color: #e8eaed !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table th {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
color: #b8bcc4 !important;
|
||||
border-bottom-width: 1px;
|
||||
border-color: #3a4a5e !important;
|
||||
background-color: #2d3e52 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table td {
|
||||
vertical-align: middle;
|
||||
color: #e8eaed !important;
|
||||
border-color: #3a4a5e !important;
|
||||
background-color: #243447 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table tbody tr {
|
||||
background-color: #243447 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table tbody tr:hover {
|
||||
background-color: #2d3e52 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table tbody tr:hover td {
|
||||
background-color: #2d3e52 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: #243447 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(odd) td {
|
||||
background-color: #243447 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(even) {
|
||||
background-color: #2d3e52 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(even) td {
|
||||
background-color: #2d3e52 !important;
|
||||
}
|
||||
|
||||
/* Badge enhancements - Dark Theme */
|
||||
.wpaw-settings-v2-wrap *:not(td,label) > .badge {
|
||||
font-weight: 500;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .badge.bg-secondary {
|
||||
background-color: #6c757d !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .badge.bg-success {
|
||||
background-color: #28a745 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .badge.bg-warning {
|
||||
background-color: #ffc107 !important;
|
||||
color: #212529 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .badge.bg-danger {
|
||||
background-color: #dc3545 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .badge.bg-info {
|
||||
background-color: #17a2b8 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Custom language items */
|
||||
.wpaw-settings-v2-wrap .wpaw-custom-language-item .btn {
|
||||
padding: 0.375rem 0.5rem;
|
||||
}
|
||||
|
||||
/* Cost estimate display */
|
||||
.wpaw-settings-v2-wrap #wpaw-cost-estimate {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Toast positioning */
|
||||
.wpaw-settings-v2-wrap .toast-container {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Dashicons in buttons */
|
||||
.wpaw-settings-v2-wrap .dashicons {
|
||||
font-size: 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn .dashicons {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
/* Filter section */
|
||||
.wpaw-settings-v2-wrap #wpaw-filter-post,
|
||||
.wpaw-settings-v2-wrap #wpaw-filter-date-from,
|
||||
.wpaw-settings-v2-wrap #wpaw-filter-date-to {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.wpaw-settings-v2-wrap .pagination {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .page-link {
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.wpaw-settings-v2-wrap .spinner-border {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 0.15em;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.wpaw-settings-v2-wrap .nav-pills {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .nav-pills .nav-link {
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .preset-card {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .sticky-bottom {
|
||||
position: relative !important;
|
||||
bottom: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* WordPress admin bar offset */
|
||||
@media (min-width: 601px) {
|
||||
.admin-bar .wpaw-settings-v2-wrap .sticky-top {
|
||||
top: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.admin-bar .wpaw-settings-v2-wrap .sticky-top {
|
||||
top: 46px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form text helper */
|
||||
.wpaw-settings-v2-wrap .form-text {
|
||||
font-size: 0.8125rem;
|
||||
margin: 0.375rem 0;
|
||||
}
|
||||
|
||||
/* Alert styling */
|
||||
.wpaw-settings-v2-wrap .alert {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* Focus states for accessibility */
|
||||
.wpaw-settings-v2-wrap .btn:focus,
|
||||
.wpaw-settings-v2-wrap .nav-link:focus {
|
||||
outline: 2px solid var(--bs-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Animation for cost estimate */
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap #wpaw-cost-estimate.updating {
|
||||
animation: pulse 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* Customization - Dark Theme */
|
||||
#wpcontent {
|
||||
background-color: #1d2227 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .container-fluid {
|
||||
background: #1d2227 !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
/* Checkboxes and Form Switches */
|
||||
.wpaw-settings-v2-wrap .form-check-input {
|
||||
background-color: #2d3e52 !important;
|
||||
border-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-check-input:checked {
|
||||
background-color: #17a2b8 !important;
|
||||
border-color: #17a2b8 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .form-check-label {
|
||||
color: #e8eaed !important;
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
.wpaw-settings-v2-wrap label,
|
||||
.wpaw-settings-v2-wrap .form-label {
|
||||
color: #b8bcc4 !important;
|
||||
}
|
||||
|
||||
/* Small text / help text */
|
||||
.wpaw-settings-v2-wrap small,
|
||||
.wpaw-settings-v2-wrap .small,
|
||||
.wpaw-settings-v2-wrap .form-text {
|
||||
color: #8a8f98 !important;
|
||||
}
|
||||
|
||||
/* Headings in cards */
|
||||
.wpaw-settings-v2-wrap h1,
|
||||
.wpaw-settings-v2-wrap h2,
|
||||
.wpaw-settings-v2-wrap h3,
|
||||
.wpaw-settings-v2-wrap h4,
|
||||
.wpaw-settings-v2-wrap h5,
|
||||
.wpaw-settings-v2-wrap h6 {
|
||||
color: #e8eaed !important;
|
||||
}
|
||||
|
||||
/* Paragraph text */
|
||||
.wpaw-settings-v2-wrap p {
|
||||
color: #b8bcc4 !important;
|
||||
}
|
||||
|
||||
/* Button text colors */
|
||||
.wpaw-settings-v2-wrap .btn {
|
||||
color: #e8eaed !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn-primary {
|
||||
background-color: #17a2b8 !important;
|
||||
border-color: #17a2b8 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn-secondary {
|
||||
background-color: #6c757d !important;
|
||||
border-color: #6c757d !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn-outline-primary {
|
||||
color: #17a2b8 !important;
|
||||
border-color: #17a2b8 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn-outline-primary:hover {
|
||||
background-color: #17a2b8 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn-outline-secondary {
|
||||
color: #b8bcc4 !important;
|
||||
border-color: #6c757d !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .btn-outline-secondary:hover {
|
||||
background-color: #6c757d !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* List group items */
|
||||
.wpaw-settings-v2-wrap .list-group-item {
|
||||
background-color: #243447 !important;
|
||||
color: #e8eaed !important;
|
||||
border-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .list-group-item:hover {
|
||||
background-color: #2d3e52 !important;
|
||||
}
|
||||
|
||||
/* Dropdown menus */
|
||||
.wpaw-settings-v2-wrap .dropdown-menu {
|
||||
background-color: #243447 !important;
|
||||
border-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .dropdown-item {
|
||||
color: #e8eaed !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .dropdown-item:hover {
|
||||
background-color: #2d3e52 !important;
|
||||
color: #17a2b8 !important;
|
||||
}
|
||||
|
||||
/* Modal dialogs */
|
||||
.wpaw-settings-v2-wrap .modal-content {
|
||||
background-color: #243447 !important;
|
||||
color: #e8eaed !important;
|
||||
border-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .modal-header {
|
||||
background-color: #2d3e52 !important;
|
||||
border-bottom-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .modal-footer {
|
||||
background-color: #2d3e52 !important;
|
||||
border-top-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.wpaw-settings-v2-wrap .pagination .page-link {
|
||||
background-color: #243447 !important;
|
||||
color: #e8eaed !important;
|
||||
border-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .pagination .page-link:hover {
|
||||
background-color: #2d3e52 !important;
|
||||
color: #17a2b8 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .pagination .page-item.active .page-link {
|
||||
background-color: #17a2b8 !important;
|
||||
border-color: #17a2b8 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.wpaw-settings-v2-wrap code {
|
||||
background-color: #2d3e52 !important;
|
||||
color: #17a2b8 !important;
|
||||
border: 1px solid #3a4a5e;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap pre {
|
||||
background-color: #2d3e52 !important;
|
||||
color: #e8eaed !important;
|
||||
border: 1px solid #3a4a5e;
|
||||
}
|
||||
|
||||
/* Breadcrumb */
|
||||
.wpaw-settings-v2-wrap .breadcrumb {
|
||||
background-color: #243447 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .breadcrumb-item {
|
||||
color: #b8bcc4 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .breadcrumb-item.active {
|
||||
color: #e8eaed !important;
|
||||
}
|
||||
|
||||
/* Progress bars */
|
||||
.wpaw-settings-v2-wrap .progress {
|
||||
background-color: #2d3e52 !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .progress-bar {
|
||||
background-color: #17a2b8 !important;
|
||||
}
|
||||
|
||||
/* Tooltips */
|
||||
.wpaw-settings-v2-wrap .tooltip-inner {
|
||||
background-color: #243447 !important;
|
||||
color: #e8eaed !important;
|
||||
}
|
||||
|
||||
/* Popovers */
|
||||
.wpaw-settings-v2-wrap .popover {
|
||||
background-color: #243447 !important;
|
||||
border-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .popover-header {
|
||||
background-color: #2d3e52 !important;
|
||||
color: #e8eaed !important;
|
||||
border-bottom-color: #3a4a5e !important;
|
||||
}
|
||||
|
||||
.wpaw-settings-v2-wrap .popover-body {
|
||||
color: #b8bcc4 !important;
|
||||
}
|
||||
2779
assets/css/sidebar.css
Normal file
2779
assets/css/sidebar.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user