mirror of
https://github.com/Heretek-AI/heretek-control-core.git
synced 2026-10-12 02:03:55 +00:00
Mian Shahzad RazaandClaude Opus 4.8
02f449bbde
Both the "Import a bundle" and "Cloud Library" rows were plain disclosure-triangle text, easy to miss. Restyle both <details> as bordered cards with a filled summary bar, dashicon, and a right-aligned chevron that rotates on open (.emcp-sb-disclosure). The Cloud Library gets an accent variant (purple tint + "Cross-site" pill) since it's the headline cross-site feature. Flat colors, no gradients. Import summary drops the manual "+" for an upload dashicon. CSS in admin.css; markup across the 3 sandbox views + the renderer. Co-Authored-By: Claude Opus 4.8 <[email protected]>
4548 lines
126 KiB
CSS
4548 lines
126 KiB
CSS
/**
|
|
* MCP Tools for Elementor — Admin Settings Styles
|
|
*
|
|
* @package Elementor_MCP
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* =========================================================================
|
|
* Fonts — Geist (self-hosted, SIL OFL). Used for headings + accents to match
|
|
* the marketing site; body text stays on the WP system stack. Variable font,
|
|
* one file covers all weights.
|
|
* ========================================================================= */
|
|
|
|
@font-face {
|
|
font-family: "Geist";
|
|
src: url("../fonts/Geist-Variable.woff2") format("woff2");
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* CSS Custom Properties
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin {
|
|
--mcp-font-heading: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
--mcp-primary: #6366f1;
|
|
--mcp-primary-hover: #4f46e5;
|
|
--mcp-primary-light: #eef2ff;
|
|
--mcp-success: #10b981;
|
|
--mcp-success-light: #ecfdf5;
|
|
--mcp-danger: #ef4444;
|
|
--mcp-danger-light: #fef2f2;
|
|
--mcp-warning: #f59e0b;
|
|
--mcp-pro: #8b5cf6;
|
|
--mcp-pro-light: #f5f3ff;
|
|
--mcp-gray-50: #f9fafb;
|
|
--mcp-gray-100: #f3f4f6;
|
|
--mcp-gray-200: #e5e7eb;
|
|
--mcp-gray-300: #d1d5db;
|
|
--mcp-gray-400: #9ca3af;
|
|
--mcp-gray-500: #6b7280;
|
|
--mcp-gray-600: #4b5563;
|
|
--mcp-gray-700: #374151;
|
|
--mcp-gray-800: #1f2937;
|
|
--mcp-gray-900: #111827;
|
|
--mcp-white: #ffffff;
|
|
--mcp-radius: 10px;
|
|
--mcp-radius-sm: 6px;
|
|
--mcp-radius-lg: 14px;
|
|
--mcp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--mcp-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
--mcp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
--mcp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
--mcp-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Geist on headings + accent text (matches the marketing site); body copy
|
|
stays on the WP system stack for legibility. */
|
|
.elementor-mcp-admin h1,
|
|
.elementor-mcp-admin h2,
|
|
.elementor-mcp-admin h3,
|
|
.elementor-mcp-admin .emcp-appbar-title,
|
|
.elementor-mcp-admin .elementor-mcp-header-title,
|
|
.elementor-mcp-admin .elementor-mcp-section > h2,
|
|
.elementor-mcp-admin .elementor-mcp-stat-value,
|
|
.elementor-mcp-admin .emcp-dash-section-title,
|
|
.elementor-mcp-admin .emcp-dash-stat-value,
|
|
.elementor-mcp-admin .emcp-dash-card-title,
|
|
.elementor-mcp-admin .emcp-dash-video-title,
|
|
.elementor-mcp-admin .emcp-dash-help-title {
|
|
font-family: var(--mcp-font-heading);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Page Layout & Header
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin {
|
|
/* Full-width admin page so the app-bar header can bleed edge-to-edge. */
|
|
max-width: none;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.elementor-mcp-admin > h1 {
|
|
display: none;
|
|
}
|
|
|
|
.elementor-mcp-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 20px 24px;
|
|
margin: 20px 0 0;
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-lg) var(--mcp-radius-lg) 0 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.elementor-mcp-header-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: var(--mcp-radius);
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.elementor-mcp-header-icon img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.elementor-mcp-header-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.elementor-mcp-header-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--mcp-gray-900);
|
|
margin: 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.elementor-mcp-header-version {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--mcp-gray-400);
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.elementor-mcp-header-subtitle {
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-500);
|
|
margin: 2px 0 0;
|
|
}
|
|
|
|
.elementor-mcp-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.elementor-mcp-header-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border-radius: var(--mcp-radius-sm);
|
|
text-decoration: none;
|
|
transition: all var(--mcp-transition);
|
|
white-space: nowrap;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.elementor-mcp-header-btn svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
fill: currentColor;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.elementor-mcp-header-btn--secondary {
|
|
background: var(--mcp-white);
|
|
color: var(--mcp-gray-600);
|
|
border: 1px solid var(--mcp-gray-300);
|
|
}
|
|
|
|
.elementor-mcp-header-btn--secondary:hover {
|
|
background: var(--mcp-gray-50);
|
|
border-color: var(--mcp-gray-400);
|
|
color: var(--mcp-gray-700);
|
|
}
|
|
|
|
.elementor-mcp-header-btn--primary {
|
|
background: var(--mcp-primary);
|
|
color: var(--mcp-white);
|
|
border: 1px solid var(--mcp-primary);
|
|
}
|
|
|
|
.elementor-mcp-header-btn--primary:hover {
|
|
background: var(--mcp-primary-hover);
|
|
border-color: var(--mcp-primary-hover);
|
|
color: var(--mcp-white);
|
|
box-shadow: var(--mcp-shadow-md);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Stats Bar
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-stats {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 16px 22px;
|
|
background: var(--mcp-gray-50);
|
|
border-bottom: 1px solid var(--mcp-gray-200);
|
|
margin: 0 -20px 20px -22px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.elementor-mcp-stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 16px;
|
|
background: var(--mcp-white);
|
|
border-radius: var(--mcp-radius-sm);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
min-width: 0;
|
|
}
|
|
|
|
.elementor-mcp-stat-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.elementor-mcp-stat-icon--tools {
|
|
background: var(--mcp-primary-light);
|
|
color: var(--mcp-primary);
|
|
}
|
|
|
|
.elementor-mcp-stat-icon--active {
|
|
background: var(--mcp-success-light);
|
|
color: var(--mcp-success);
|
|
}
|
|
|
|
.elementor-mcp-stat-icon--pro {
|
|
background: var(--mcp-pro-light);
|
|
color: var(--mcp-pro);
|
|
}
|
|
|
|
.elementor-mcp-stat-icon--prompts {
|
|
background: #fef3c7;
|
|
color: var(--mcp-warning);
|
|
}
|
|
|
|
.elementor-mcp-stat-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.elementor-mcp-stat-content {
|
|
min-width: 0;
|
|
}
|
|
|
|
.elementor-mcp-stat-value {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--mcp-gray-900);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.elementor-mcp-stat-label {
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-500);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Tab Navigation
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin .nav-tab-wrapper {
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-top: none;
|
|
border-bottom: 2px solid var(--mcp-gray-200);
|
|
padding: 0 24px;
|
|
margin: 0;
|
|
background: var(--mcp-white);
|
|
display: flex;
|
|
gap: 0;
|
|
}
|
|
|
|
.elementor-mcp-admin .nav-tab {
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
margin: 0 0 -2px;
|
|
padding: 12px 20px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--mcp-gray-500);
|
|
background: transparent;
|
|
transition: color var(--mcp-transition), border-color var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-admin .nav-tab:hover {
|
|
color: var(--mcp-gray-700);
|
|
background: transparent;
|
|
}
|
|
|
|
.elementor-mcp-admin .nav-tab-active,
|
|
.elementor-mcp-admin .nav-tab-active:hover,
|
|
.elementor-mcp-admin .nav-tab-active:focus {
|
|
color: var(--mcp-primary);
|
|
border-bottom-color: var(--mcp-primary);
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Tab Content
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin .tab-content {
|
|
margin-top: 0;
|
|
padding: 24px;
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-top: none;
|
|
border-radius: var(--mcp-radius-lg);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Bulk Actions
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-bulk-actions {
|
|
margin: 0 0 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Tool-count summary sits at the left of the bar; its auto right-margin pushes
|
|
the action buttons over to the right edge — count left, buttons right, one row. */
|
|
.elementor-mcp-bulk-actions .elementor-mcp-tools-summary {
|
|
margin: 0 auto 0 0;
|
|
}
|
|
|
|
/* Secondary buttons (Enable All / Disable All) — match the plugin's header
|
|
buttons (flat, neutral) instead of WordPress's blue defaults. */
|
|
.elementor-mcp-bulk-actions .button {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
line-height: 1.3;
|
|
height: auto;
|
|
min-height: 0;
|
|
border-radius: var(--mcp-radius-sm);
|
|
background: var(--mcp-white);
|
|
color: var(--mcp-gray-600);
|
|
border: 1px solid var(--mcp-gray-300);
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
transition: all var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-bulk-actions .button:hover,
|
|
.elementor-mcp-bulk-actions .button:focus {
|
|
background: var(--mcp-gray-50);
|
|
border-color: var(--mcp-gray-400);
|
|
color: var(--mcp-gray-700);
|
|
}
|
|
|
|
/* Primary "Save Changes" — the brand indigo fill. A small extra gap sets it
|
|
apart from the Enable/Disable pair. */
|
|
.elementor-mcp-bulk-actions .button.elementor-mcp-bulk-save {
|
|
margin-left: 0px;
|
|
background: var(--mcp-primary);
|
|
border-color: var(--mcp-primary);
|
|
color: var(--mcp-white);
|
|
}
|
|
|
|
.elementor-mcp-bulk-actions .button.elementor-mcp-bulk-save:hover,
|
|
.elementor-mcp-bulk-actions .button.elementor-mcp-bulk-save:focus {
|
|
background: var(--mcp-primary-hover);
|
|
border-color: var(--mcp-primary-hover);
|
|
color: var(--mcp-white);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Category Sections
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-category {
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.elementor-mcp-category:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.elementor-mcp-category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border-bottom: 1px solid var(--mcp-gray-200);
|
|
margin: 0;
|
|
}
|
|
|
|
/* The collapse/expand trigger: chevron + title + count, fills the row. */
|
|
.elementor-mcp-category-toggle {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 8px 8px 12px 6px;
|
|
background: none;
|
|
border: 0;
|
|
border-radius: 6px 6px 0 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-800);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-category-toggle:hover {
|
|
background: var(--mcp-gray-50);
|
|
}
|
|
|
|
.elementor-mcp-category-toggle:focus-visible {
|
|
outline: 2px solid var(--mcp-primary);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.elementor-mcp-category-chevron {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
color: var(--mcp-gray-400);
|
|
transition: transform var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-category.is-collapsed .elementor-mcp-category-chevron {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.elementor-mcp-category-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.elementor-mcp-category-count {
|
|
flex-shrink: 0;
|
|
color: var(--mcp-gray-500);
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
background: var(--mcp-gray-100);
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Collapsed: hide the tool grid. */
|
|
.elementor-mcp-category.is-collapsed .elementor-mcp-tools-grid {
|
|
display: none;
|
|
}
|
|
|
|
/* ---- Plugin integration groups (Plugins tab) ---------------------------- */
|
|
/* Each group clusters related integrations (Dynamic Content, E-Commerce, …);
|
|
inside a group every plugin becomes a self-contained card so the tab stays
|
|
organized as integrations grow. */
|
|
.elementor-mcp-plugin-group {
|
|
margin: 0 0 32px;
|
|
}
|
|
.elementor-mcp-plugin-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.elementor-mcp-plugin-group-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin: 0 0 14px;
|
|
}
|
|
.elementor-mcp-plugin-group-title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: var(--mcp-gray-800);
|
|
}
|
|
.elementor-mcp-plugin-group-desc {
|
|
font-size: 12.5px;
|
|
color: var(--mcp-gray-500);
|
|
}
|
|
.elementor-mcp-plugin-group-count {
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--mcp-gray-500);
|
|
font-variant-numeric: tabular-nums;
|
|
background: var(--mcp-gray-100);
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
}
|
|
/* Two plugin cards per row on wide screens; a lone card fills the row. */
|
|
.elementor-mcp-plugin-group-body {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
.elementor-mcp-plugin-group-body .elementor-mcp-category {
|
|
margin: 0;
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-lg);
|
|
padding: 4px 14px 12px;
|
|
}
|
|
/* Slimmer toggle cards inside a plugin card: stack one-per-row, tighter. */
|
|
.elementor-mcp-plugin-group-body .elementor-mcp-tools-grid.is-two-up {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
.elementor-mcp-plugin-group-body .elementor-mcp-tool-card {
|
|
padding: 12px;
|
|
}
|
|
@media screen and (max-width: 782px) {
|
|
.elementor-mcp-plugin-group-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Segmented All / None control. */
|
|
.elementor-mcp-cat-toggle-group {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.elementor-mcp-cat-btn {
|
|
appearance: none;
|
|
margin: 0;
|
|
border: 0;
|
|
background: none;
|
|
padding: 5px 14px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1.6;
|
|
color: var(--mcp-gray-600);
|
|
cursor: pointer;
|
|
transition: background var(--mcp-transition), color var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-cat-btn + .elementor-mcp-cat-btn {
|
|
border-left: 1px solid var(--mcp-gray-200);
|
|
}
|
|
|
|
.elementor-mcp-cat-enable-all:hover {
|
|
background: var(--mcp-primary-light);
|
|
color: var(--mcp-primary);
|
|
}
|
|
|
|
.elementor-mcp-cat-disable-all:hover {
|
|
background: var(--mcp-gray-100);
|
|
color: var(--mcp-gray-800);
|
|
}
|
|
|
|
.elementor-mcp-cat-btn:focus-visible {
|
|
outline: 2px solid var(--mcp-primary);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Tool Cards Grid
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-tools-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
gap: 10px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.elementor-mcp-tool-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius);
|
|
cursor: pointer;
|
|
transition: all var(--mcp-transition);
|
|
position: relative;
|
|
}
|
|
|
|
.elementor-mcp-tool-card:hover {
|
|
border-color: var(--mcp-primary);
|
|
box-shadow: var(--mcp-shadow-sm);
|
|
}
|
|
|
|
.elementor-mcp-tool-card.is-enabled {
|
|
background: var(--mcp-white);
|
|
border-color: var(--mcp-gray-200);
|
|
}
|
|
|
|
.elementor-mcp-tool-card.is-disabled {
|
|
background: var(--mcp-gray-50);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.elementor-mcp-tool-card.is-disabled:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Hide the native checkbox */
|
|
.elementor-mcp-tool-card input[type="checkbox"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Toggle Switch
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-toggle {
|
|
position: relative;
|
|
width: 38px;
|
|
height: 22px;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.elementor-mcp-toggle-track {
|
|
display: block;
|
|
width: 38px;
|
|
height: 22px;
|
|
background: var(--mcp-gray-300);
|
|
border-radius: 11px;
|
|
transition: background var(--mcp-transition);
|
|
position: relative;
|
|
}
|
|
|
|
.elementor-mcp-toggle-track::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: var(--mcp-white);
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
transition: transform var(--mcp-transition);
|
|
}
|
|
|
|
/* Enabled state */
|
|
.elementor-mcp-tool-card.is-enabled .elementor-mcp-toggle-track {
|
|
background: var(--mcp-primary);
|
|
}
|
|
|
|
.elementor-mcp-tool-card.is-enabled .elementor-mcp-toggle-track::after {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
/* Focus state for accessibility */
|
|
.elementor-mcp-tool-card input[type="checkbox"]:focus-visible ~ .elementor-mcp-toggle .elementor-mcp-toggle-track {
|
|
box-shadow: 0 0 0 2px var(--mcp-white), 0 0 0 4px var(--mcp-primary);
|
|
}
|
|
|
|
/* Danger sections (Filesystem / Database) — powerful, sensitive capabilities.
|
|
A flat light-red zone with red toggles signals the elevated risk. */
|
|
.elementor-mcp-category.is-danger {
|
|
background: var(--mcp-danger-light);
|
|
border: 1px solid #fecaca;
|
|
border-left: 3px solid var(--mcp-danger);
|
|
border-radius: var(--mcp-radius, 8px);
|
|
padding: 16px 18px;
|
|
}
|
|
.elementor-mcp-category.is-danger .elementor-mcp-category-title,
|
|
.elementor-mcp-category.is-danger .elementor-mcp-category-chevron {
|
|
color: var(--mcp-danger);
|
|
}
|
|
.elementor-mcp-category.is-danger .elementor-mcp-tool-card {
|
|
background: var(--mcp-white);
|
|
}
|
|
.elementor-mcp-category.is-danger .elementor-mcp-tool-card.is-enabled .elementor-mcp-toggle-track {
|
|
background: var(--mcp-danger);
|
|
}
|
|
.elementor-mcp-category.is-danger .elementor-mcp-tool-card input[type="checkbox"]:focus-visible ~ .elementor-mcp-toggle .elementor-mcp-toggle-track {
|
|
box-shadow: 0 0 0 2px var(--mcp-white), 0 0 0 4px var(--mcp-danger);
|
|
}
|
|
/* Danger-section polish: deeper title, warm borders, red-tinted header hover +
|
|
count badge, and disabled cards that read against the red zone. */
|
|
.elementor-mcp-category.is-danger .elementor-mcp-category-title,
|
|
.elementor-mcp-category.is-danger .elementor-mcp-category-chevron {
|
|
color: #dc2626;
|
|
}
|
|
.elementor-mcp-category.is-danger .elementor-mcp-category-header {
|
|
border-bottom-color: #fecaca;
|
|
}
|
|
.elementor-mcp-category.is-danger .elementor-mcp-category-toggle:hover {
|
|
background: #fde4e4;
|
|
}
|
|
.elementor-mcp-category.is-danger .elementor-mcp-category-count {
|
|
background: #fde4e4;
|
|
color: #b91c1c;
|
|
}
|
|
.elementor-mcp-category.is-danger .elementor-mcp-tool-card,
|
|
.elementor-mcp-category.is-danger .elementor-mcp-tool-card.is-enabled {
|
|
border-color: #fecaca;
|
|
}
|
|
/* Disabled cards in danger sections: keep them on white so they read as cards
|
|
against the pink zone, and dim only gently (the global 0.6 opacity washes the
|
|
text out on the tint). The gray toggle still signals the off state. */
|
|
.elementor-mcp-category.is-danger .elementor-mcp-tool-card.is-disabled {
|
|
background: var(--mcp-white);
|
|
opacity: 0.85;
|
|
}
|
|
.elementor-mcp-category.is-danger .elementor-mcp-tool-card.is-disabled .elementor-mcp-tool-name {
|
|
color: var(--mcp-gray-900);
|
|
}
|
|
.elementor-mcp-category.is-danger .elementor-mcp-tool-card.is-disabled .elementor-mcp-tool-desc {
|
|
color: var(--mcp-gray-600);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Tool Info
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-tool-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.elementor-mcp-tool-name {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-800);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.elementor-mcp-tool-desc {
|
|
color: var(--mcp-gray-500);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.elementor-mcp-tool-slug {
|
|
font-size: 11px;
|
|
color: var(--mcp-gray-400);
|
|
background: var(--mcp-gray-100);
|
|
padding: 2px 7px;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Plugin-integration categories: "how it works" note + two-up cards + operation pills */
|
|
.elementor-mcp-cat-note {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
margin: 12px 0 0;
|
|
padding: 10px 14px;
|
|
background: var(--mcp-primary-light);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-left: 3px solid var(--mcp-primary);
|
|
border-radius: var(--mcp-radius-sm);
|
|
color: var(--mcp-gray-700);
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.elementor-mcp-cat-note-icon {
|
|
color: var(--mcp-primary);
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
line-height: 0;
|
|
}
|
|
|
|
/* Tab-level variant: pinned to the top of the tab, above all category sections */
|
|
.elementor-mcp-tab-note {
|
|
margin: 0 0 18px;
|
|
}
|
|
|
|
.elementor-mcp-tools-grid.is-two-up {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
@media (max-width: 782px) {
|
|
.elementor-mcp-tools-grid.is-two-up {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.elementor-mcp-tool-ops {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.elementor-mcp-tool-ops-label {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
color: var(--mcp-gray-400);
|
|
}
|
|
|
|
.elementor-mcp-op-pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.elementor-mcp-op-pill {
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
color: var(--mcp-gray-600);
|
|
background: var(--mcp-gray-100);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.elementor-mcp-tool-card.is-enabled .elementor-mcp-op-pill {
|
|
color: var(--mcp-primary-hover);
|
|
background: var(--mcp-primary-light);
|
|
border-color: #dfe3ff;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Badges
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 1px 7px;
|
|
border-radius: 10px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.elementor-mcp-badge--read-only {
|
|
background: #dbeafe;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.elementor-mcp-badge--destructive {
|
|
background: var(--mcp-danger-light);
|
|
color: var(--mcp-danger);
|
|
}
|
|
|
|
.elementor-mcp-badge--pro {
|
|
background: var(--mcp-pro-light);
|
|
color: var(--mcp-pro);
|
|
}
|
|
|
|
/* "Elementor Pro" — distinct from the EMCP "PRO" badge. Marks tools that need
|
|
Elementor Pro (widget shortcuts, theme builder, popups, Pro custom code),
|
|
not the EMCP Tools Pro license. Pink reads as Elementor; lowercase keeps it
|
|
readable as a dependency note rather than a plan badge. */
|
|
.elementor-mcp-badge--elementor-pro {
|
|
background: #fce7f3;
|
|
color: #be185d;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.elementor-mcp-badge--free {
|
|
background: var(--mcp-success-light);
|
|
color: var(--mcp-success);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Save Button
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin .submit {
|
|
margin-top: 8px;
|
|
padding: 0;
|
|
border-top: 1px solid var(--mcp-gray-200);
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.elementor-mcp-admin .submit #submit {
|
|
background: var(--mcp-primary);
|
|
border-color: var(--mcp-primary);
|
|
color: var(--mcp-white);
|
|
padding: 8px 24px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border-radius: var(--mcp-radius-sm);
|
|
transition: all var(--mcp-transition);
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
height: auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.elementor-mcp-admin .submit #submit:hover {
|
|
background: var(--mcp-primary-hover);
|
|
border-color: var(--mcp-primary-hover);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Connection Page
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-connection {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.elementor-mcp-section {
|
|
margin-bottom: 32px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid var(--mcp-gray-200);
|
|
}
|
|
|
|
.elementor-mcp-section:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.elementor-mcp-section > h2 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-800);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.elementor-mcp-section > p.description {
|
|
color: var(--mcp-gray-500);
|
|
font-size: 13px;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.elementor-mcp-section h3 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-700);
|
|
margin: 20px 0 8px;
|
|
}
|
|
|
|
.elementor-mcp-section h4 {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-700);
|
|
margin: 20px 0 4px;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Status Cards (Connection Tab)
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-status-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.elementor-mcp-status-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
background: var(--mcp-gray-50);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius);
|
|
}
|
|
|
|
.elementor-mcp-status-card-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.elementor-mcp-status-card-icon--ok {
|
|
background: var(--mcp-success-light);
|
|
color: var(--mcp-success);
|
|
}
|
|
|
|
.elementor-mcp-status-card-icon--warn {
|
|
background: var(--mcp-danger-light);
|
|
color: var(--mcp-danger);
|
|
}
|
|
|
|
.elementor-mcp-status-card-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.elementor-mcp-status-card-info {
|
|
min-width: 0;
|
|
}
|
|
|
|
.elementor-mcp-status-card-label {
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-500);
|
|
}
|
|
|
|
.elementor-mcp-status-card-value {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-800);
|
|
}
|
|
|
|
/* Legacy status badges — still used in status table fallback */
|
|
.elementor-mcp-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 3px 10px;
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.elementor-mcp-status--active {
|
|
background: var(--mcp-success-light);
|
|
color: #059669;
|
|
}
|
|
|
|
.elementor-mcp-status--inactive {
|
|
background: var(--mcp-danger-light);
|
|
color: var(--mcp-danger);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Endpoint URL
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-endpoint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
background: var(--mcp-gray-50);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-sm);
|
|
margin: 12px 0 0;
|
|
}
|
|
|
|
.elementor-mcp-endpoint code {
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-700);
|
|
background: none;
|
|
padding: 0;
|
|
word-break: break-all;
|
|
flex: 1;
|
|
}
|
|
|
|
.elementor-mcp-endpoint .elementor-mcp-copy-btn {
|
|
position: static;
|
|
background: var(--mcp-white) !important;
|
|
border: 1px solid var(--mcp-gray-300) !important;
|
|
color: var(--mcp-gray-600) !important;
|
|
font-size: 11px !important;
|
|
padding: 3px 10px !important;
|
|
min-height: auto !important;
|
|
border-radius: 4px !important;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.elementor-mcp-endpoint .elementor-mcp-copy-btn:hover {
|
|
background: var(--mcp-gray-100) !important;
|
|
border-color: var(--mcp-gray-400) !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Credential Form
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-cred-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.elementor-mcp-cred-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.elementor-mcp-cred-field label {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--mcp-gray-700);
|
|
}
|
|
|
|
.elementor-mcp-cred-field input {
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--mcp-gray-300);
|
|
border-radius: var(--mcp-radius-sm);
|
|
font-size: 13px;
|
|
transition: border-color var(--mcp-transition), box-shadow var(--mcp-transition);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.elementor-mcp-cred-field input:focus {
|
|
border-color: var(--mcp-primary);
|
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.elementor-mcp-cred-field .description {
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-400);
|
|
margin: 0;
|
|
}
|
|
|
|
.elementor-mcp-generate-btn {
|
|
align-self: flex-start;
|
|
background: var(--mcp-primary) !important;
|
|
border-color: var(--mcp-primary) !important;
|
|
color: var(--mcp-white) !important;
|
|
padding: 8px 20px !important;
|
|
border-radius: var(--mcp-radius-sm) !important;
|
|
font-size: 13px !important;
|
|
font-weight: 500 !important;
|
|
transition: all var(--mcp-transition) !important;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
height: auto !important;
|
|
line-height: 1.5 !important;
|
|
}
|
|
|
|
.elementor-mcp-generate-btn:hover {
|
|
background: var(--mcp-primary-hover) !important;
|
|
border-color: var(--mcp-primary-hover) !important;
|
|
}
|
|
|
|
/* Auth result */
|
|
.elementor-mcp-auth-result {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
background: var(--mcp-success-light);
|
|
border: 1px solid #a7f3d0;
|
|
border-radius: var(--mcp-radius-sm);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.elementor-mcp-auth-result code {
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-700);
|
|
background: none;
|
|
word-break: break-all;
|
|
flex: 1;
|
|
}
|
|
|
|
.elementor-mcp-auth-result .elementor-mcp-copy-btn {
|
|
position: static;
|
|
background: var(--mcp-white) !important;
|
|
border: 1px solid #a7f3d0 !important;
|
|
color: #059669 !important;
|
|
font-size: 11px !important;
|
|
padding: 3px 10px !important;
|
|
min-height: auto !important;
|
|
border-radius: 4px !important;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Config Code Blocks
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-config-card {
|
|
margin: 12px 0 20px;
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Client-specific setup guide (e.g. Codex custom-MCP form field mapping). */
|
|
.emcp-conn-guide {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
margin: 6px 0 2px;
|
|
}
|
|
.emcp-conn-guide th {
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
padding: 6px 14px 6px 0;
|
|
color: var(--mcp-gray-800, #1d2327);
|
|
font-weight: 600;
|
|
vertical-align: top;
|
|
width: 1%;
|
|
}
|
|
.emcp-conn-guide td {
|
|
padding: 6px 0;
|
|
color: var(--mcp-gray-600, #50575e);
|
|
vertical-align: top;
|
|
}
|
|
.emcp-conn-guide code {
|
|
background: var(--mcp-gray-100, #f0f0f1);
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.elementor-mcp-config-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 14px;
|
|
background: var(--mcp-gray-50);
|
|
border-bottom: 1px solid var(--mcp-gray-200);
|
|
}
|
|
|
|
.elementor-mcp-config-card-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-700);
|
|
}
|
|
|
|
.elementor-mcp-config-card-header .elementor-mcp-copy-btn {
|
|
position: static;
|
|
background: var(--mcp-white) !important;
|
|
border: 1px solid var(--mcp-gray-300) !important;
|
|
color: var(--mcp-gray-600) !important;
|
|
font-size: 11px !important;
|
|
padding: 3px 12px !important;
|
|
min-height: auto !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.elementor-mcp-config-card-header .elementor-mcp-copy-btn:hover {
|
|
background: var(--mcp-gray-100) !important;
|
|
border-color: var(--mcp-gray-400) !important;
|
|
}
|
|
|
|
.elementor-mcp-config-card-body {
|
|
padding: 14px 16px;
|
|
}
|
|
.elementor-mcp-config-card-body > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
.elementor-mcp-config-card-body > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.elementor-mcp-config-card pre {
|
|
margin: 0;
|
|
padding: 14px 16px;
|
|
background: var(--mcp-gray-900);
|
|
color: #e2e8f0;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.elementor-mcp-config-card code {
|
|
background: none;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
|
|
/* Legacy code block style — kept for backward compat */
|
|
.elementor-mcp-code-block {
|
|
position: relative;
|
|
margin: 8px 0 16px;
|
|
}
|
|
|
|
.elementor-mcp-code-block pre {
|
|
background: var(--mcp-gray-900);
|
|
color: #e2e8f0;
|
|
padding: 14px 16px;
|
|
border-radius: var(--mcp-radius-sm);
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.elementor-mcp-code-block code {
|
|
background: none;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
/* Copy button — generic */
|
|
.elementor-mcp-copy-btn {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
font-size: 11px !important;
|
|
padding: 3px 10px !important;
|
|
min-height: 24px !important;
|
|
background: rgba(255, 255, 255, 0.1) !important;
|
|
border-color: rgba(255, 255, 255, 0.2) !important;
|
|
color: #e2e8f0 !important;
|
|
border-radius: 4px !important;
|
|
cursor: pointer;
|
|
/* Specific properties only — `transition: all` on 50+ buttons makes hover/focus jank. */
|
|
transition: background-color var(--mcp-transition), border-color var(--mcp-transition), color var(--mcp-transition) !important;
|
|
}
|
|
|
|
.elementor-mcp-copy-btn:hover {
|
|
background: rgba(255, 255, 255, 0.2) !important;
|
|
border-color: rgba(255, 255, 255, 0.3) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/* Hidden textarea for copy source.
|
|
* MUST be display:none, not just off-screen. An off-screen textarea
|
|
* (left:-9999px; width:1px) is still in the layout tree, so the browser
|
|
* reflows its full multi-KB value wrapped into a 1px-wide column. With 50+
|
|
* prompt cards that pathological reflow froze the whole tab for seconds on
|
|
* the Prompts page. display:none removes it from layout entirely; reading
|
|
* .value (used by the copy handler) still works. */
|
|
.elementor-mcp-copy-source {
|
|
display: none;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Tools Summary (beneath bulk actions)
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-tools-summary {
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-500);
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.elementor-mcp-tools-summary strong {
|
|
color: var(--mcp-gray-700);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Low-tools mode card
|
|
* ========================================================================= */
|
|
|
|
/* Top-of-Tools mode cards laid out two-up (Compact tool mode + Themer PHP);
|
|
a single card still fills the row when the other isn't shown. */
|
|
.elementor-mcp-mode-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.elementor-mcp-mode-cards .elementor-mcp-low-mode-card {
|
|
margin: 0;
|
|
}
|
|
|
|
.elementor-mcp-low-mode-card {
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
background: #fff;
|
|
padding: 14px 18px;
|
|
margin: 0 0 20px;
|
|
transition: all var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-low-mode-card:has(input[type="checkbox"]:checked) {
|
|
border-color: var(--mcp-primary, #4f46e5);
|
|
background: rgba(79, 70, 229, 0.04);
|
|
}
|
|
|
|
.elementor-mcp-low-mode-toggle {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.elementor-mcp-low-mode-toggle input[type="checkbox"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Drive the toggle pill from the checkbox sibling state. */
|
|
.elementor-mcp-low-mode-toggle input[type="checkbox"]:checked + .elementor-mcp-toggle .elementor-mcp-toggle-track {
|
|
background: var(--mcp-primary);
|
|
}
|
|
|
|
.elementor-mcp-low-mode-toggle input[type="checkbox"]:checked + .elementor-mcp-toggle .elementor-mcp-toggle-track::after {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
.elementor-mcp-low-mode-toggle input[type="checkbox"]:focus-visible + .elementor-mcp-toggle .elementor-mcp-toggle-track {
|
|
box-shadow: 0 0 0 2px var(--mcp-white), 0 0 0 4px var(--mcp-primary);
|
|
}
|
|
|
|
.elementor-mcp-low-mode-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.elementor-mcp-low-mode-title {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: var(--mcp-gray-700);
|
|
}
|
|
|
|
.elementor-mcp-low-mode-desc {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--mcp-gray-500);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Premium prompts library
|
|
* ========================================================================= */
|
|
.elementor-mcp-pro-prompts-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.elementor-mcp-pro-prompts-heading h2 {
|
|
margin: 0 0 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.elementor-mcp-pro-prompts-heading .description {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Big "N Agent Skills" count in the Skills-tab header (sits to the right) */
|
|
.elementor-mcp-skills .elementor-mcp-pro-prompts-heading {
|
|
flex: 1 1 360px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.emcp-skills-count {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
min-width: 108px;
|
|
padding: 12px 24px;
|
|
background: var(--mcp-primary-light);
|
|
border: 1px solid #e0e3ff;
|
|
border-radius: var(--mcp-radius-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.emcp-skills-count__num {
|
|
font-size: 46px;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
letter-spacing: -0.03em;
|
|
color: var(--mcp-primary-hover);
|
|
}
|
|
|
|
.emcp-skills-count__label {
|
|
margin-top: 6px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--mcp-primary);
|
|
}
|
|
|
|
.elementor-mcp-pro-prompts-meta {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-500);
|
|
}
|
|
|
|
/* The element this targets is a <button class="button elementor-mcp-pro-sync-btn">.
|
|
* WP's core admin button rules are namespaced under `.wp-core-ui .button`
|
|
* (specificity 0,2,0), so we match that prefix to win the cascade without
|
|
* needing !important. .wp-core-ui is always present on the admin body. */
|
|
.wp-core-ui button.elementor-mcp-pro-sync-btn,
|
|
.wp-core-ui .elementor-mcp-pro-sync-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 9px 18px;
|
|
min-height: 0;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: #fff;
|
|
background: var(--mcp-primary, #6366f1);
|
|
border: 1px solid var(--mcp-primary, #6366f1);
|
|
border-radius: var(--mcp-radius-sm, 6px);
|
|
box-shadow: none;
|
|
cursor: pointer;
|
|
text-shadow: none;
|
|
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
|
|
}
|
|
|
|
.wp-core-ui button.elementor-mcp-pro-sync-btn:hover,
|
|
.wp-core-ui button.elementor-mcp-pro-sync-btn:focus,
|
|
.wp-core-ui .elementor-mcp-pro-sync-btn:hover,
|
|
.wp-core-ui .elementor-mcp-pro-sync-btn:focus {
|
|
background: var(--mcp-primary-hover, #4f46e5);
|
|
border-color: var(--mcp-primary-hover, #4f46e5);
|
|
color: #fff;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.wp-core-ui button.elementor-mcp-pro-sync-btn:active,
|
|
.wp-core-ui .elementor-mcp-pro-sync-btn:active {
|
|
transform: translateY(1px);
|
|
background: var(--mcp-primary-hover, #4f46e5);
|
|
border-color: var(--mcp-primary-hover, #4f46e5);
|
|
color: #fff;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.wp-core-ui button.elementor-mcp-pro-sync-btn:focus-visible,
|
|
.wp-core-ui .elementor-mcp-pro-sync-btn:focus-visible {
|
|
outline: 2px solid var(--mcp-primary, #6366f1);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.wp-core-ui button.elementor-mcp-pro-sync-btn:disabled,
|
|
.wp-core-ui button.elementor-mcp-pro-sync-btn[disabled],
|
|
.wp-core-ui .elementor-mcp-pro-sync-btn:disabled {
|
|
opacity: 0.7;
|
|
cursor: progress;
|
|
background: var(--mcp-primary, #6366f1);
|
|
border-color: var(--mcp-primary, #6366f1);
|
|
color: #fff;
|
|
}
|
|
|
|
.wp-core-ui .elementor-mcp-pro-sync-btn .dashicons,
|
|
.wp-core-ui .elementor-mcp-pro-sync-btn:hover .dashicons,
|
|
.wp-core-ui .elementor-mcp-pro-sync-btn:focus .dashicons,
|
|
.wp-core-ui .elementor-mcp-pro-sync-btn:active .dashicons {
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.elementor-mcp-pro-sync-btn .spin {
|
|
animation: elementor-mcp-spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes elementor-mcp-spin {
|
|
from { transform: rotate( 0deg ); }
|
|
to { transform: rotate( 360deg ); }
|
|
}
|
|
|
|
.elementor-mcp-pro-filters {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.elementor-mcp-pro-filter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
border: 1px solid var(--mcp-gray-200);
|
|
background: #fff;
|
|
border-radius: 999px;
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-700, #374151);
|
|
cursor: pointer;
|
|
transition: background-color var(--mcp-transition), border-color var(--mcp-transition), color var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-pro-filter:hover {
|
|
border-color: var(--mcp-primary, #4f46e5);
|
|
color: var(--mcp-primary, #4f46e5);
|
|
}
|
|
|
|
.elementor-mcp-pro-filter.is-active {
|
|
background: var(--mcp-primary, #4f46e5);
|
|
border-color: var(--mcp-primary, #4f46e5);
|
|
color: #fff;
|
|
}
|
|
|
|
.elementor-mcp-pro-filter-count {
|
|
display: inline-block;
|
|
min-width: 20px;
|
|
padding: 1px 6px;
|
|
border-radius: 999px;
|
|
background: rgba(0, 0, 0, 0.08);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.elementor-mcp-pro-filter.is-active .elementor-mcp-pro-filter-count {
|
|
background: rgba(255, 255, 255, 0.22);
|
|
}
|
|
|
|
.elementor-mcp-pro-prompt-card {
|
|
position: relative;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Skills page — download CTA + per-client install guides
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-skills-download {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 9px 18px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: #fff;
|
|
background: var(--mcp-primary, #6366f1);
|
|
border: 1px solid var(--mcp-primary, #6366f1);
|
|
border-radius: var(--mcp-radius-sm, 6px);
|
|
text-decoration: none;
|
|
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.elementor-mcp-skills-download:hover,
|
|
.elementor-mcp-skills-download:focus {
|
|
background: var(--mcp-primary-hover, #4f46e5);
|
|
border-color: var(--mcp-primary-hover, #4f46e5);
|
|
color: #fff;
|
|
}
|
|
|
|
.elementor-mcp-skills-download:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.elementor-mcp-skills-download:focus-visible {
|
|
outline: 2px solid var(--mcp-primary, #6366f1);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.elementor-mcp-skills-download svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Two download buttons side by side (folder bundle + Claude Desktop bundle). */
|
|
.emcp-skills-download-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Secondary (Claude Desktop) button: outlined so the folder bundle stays primary. */
|
|
.elementor-mcp-skills-download--alt {
|
|
color: var(--mcp-primary, #6366f1);
|
|
background: transparent;
|
|
}
|
|
|
|
.elementor-mcp-skills-download--alt:hover,
|
|
.elementor-mcp-skills-download--alt:focus {
|
|
color: #fff;
|
|
background: var(--mcp-primary, #6366f1);
|
|
border-color: var(--mcp-primary, #6366f1);
|
|
}
|
|
|
|
/* Industry skill packs */
|
|
.elementor-mcp-skills-packs {
|
|
margin: 0 0 22px;
|
|
padding: 18px 20px;
|
|
background: var(--mcp-gray-50, #f9fafb);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
}
|
|
|
|
.elementor-mcp-skills-packs__title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 0 0 6px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-900, #111827);
|
|
}
|
|
|
|
.elementor-mcp-skills-packs .description {
|
|
margin: 0 0 14px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.elementor-mcp-skills-packs__grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.elementor-mcp-skills-pack {
|
|
margin: 0;
|
|
padding: 6px 12px;
|
|
background: #fff;
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: 999px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
color: var(--mcp-gray-700, #374151);
|
|
}
|
|
|
|
.elementor-mcp-skills-guides {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.elementor-mcp-skills-guide {
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
background: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.elementor-mcp-skills-guide > summary {
|
|
cursor: pointer;
|
|
padding: 14px 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 14px;
|
|
color: var(--mcp-gray-700, #374151);
|
|
list-style: none;
|
|
position: relative;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
.elementor-mcp-skills-guide > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.elementor-mcp-skills-guide > summary::after {
|
|
content: '+';
|
|
position: absolute;
|
|
right: 18px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
color: var(--mcp-gray-500);
|
|
transition: transform var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-skills-guide[open] > summary::after {
|
|
content: '\2212';
|
|
}
|
|
|
|
.elementor-mcp-skills-guide__hint {
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-500);
|
|
font-weight: 400;
|
|
margin-left: auto;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.elementor-mcp-skills-guide__body {
|
|
padding: 0 18px 16px;
|
|
font-size: 13.5px;
|
|
line-height: 1.55;
|
|
color: var(--mcp-gray-700, #374151);
|
|
border-top: 1px solid var(--mcp-gray-100);
|
|
padding-top: 14px;
|
|
}
|
|
|
|
.elementor-mcp-skills-guide__body p { margin: 0 0 10px; }
|
|
.elementor-mcp-skills-guide__body ol,
|
|
.elementor-mcp-skills-guide__body ul { margin: 8px 0 8px 22px; padding: 0; }
|
|
.elementor-mcp-skills-guide__body ol > li,
|
|
.elementor-mcp-skills-guide__body ul > li { margin: 6px 0; }
|
|
.elementor-mcp-skills-guide__body ul ul { margin-top: 4px; }
|
|
.elementor-mcp-skills-guide__body code {
|
|
font-size: 12.5px;
|
|
padding: 1px 6px;
|
|
background: var(--mcp-gray-100);
|
|
border-radius: 4px;
|
|
color: var(--mcp-gray-800, #1f2937);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Skills page — "Two ways to use these skills" callout
|
|
* ========================================================================= */
|
|
|
|
.emcp-skills-ways {
|
|
margin: 20px 0 24px;
|
|
}
|
|
|
|
.emcp-skills-ways__title {
|
|
margin: 0 0 12px;
|
|
font-family: var(--mcp-font-heading, inherit);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--mcp-gray-900, #111827);
|
|
}
|
|
|
|
.emcp-skills-ways__grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
@media (max-width: 782px) {
|
|
.emcp-skills-ways__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.emcp-skills-way {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 18px;
|
|
background: var(--mcp-white, #fff);
|
|
border: 1px solid var(--mcp-gray-200, #e5e7eb);
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
}
|
|
|
|
.emcp-skills-way--runtime {
|
|
border-color: var(--mcp-primary, #6366f1);
|
|
background: var(--mcp-primary-light, #eef2ff);
|
|
}
|
|
|
|
.emcp-skills-way__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.emcp-skills-way__num {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--mcp-white, #fff);
|
|
background: var(--mcp-primary, #6366f1);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.emcp-skills-way__title {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-900, #111827);
|
|
}
|
|
|
|
.emcp-skills-way__badge {
|
|
margin-left: auto;
|
|
padding: 2px 8px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
color: var(--mcp-success, #16a34a);
|
|
background: var(--mcp-success-light, #dcfce7);
|
|
border-radius: var(--mcp-radius-sm, 6px);
|
|
}
|
|
|
|
/* Offline state — module and/or MCP server off */
|
|
.emcp-skills-way__badge.is-offline {
|
|
color: var(--mcp-danger, #dc2626);
|
|
background: var(--mcp-danger-light, #fee2e2);
|
|
}
|
|
|
|
.emcp-skills-way__desc {
|
|
flex: 1 1 auto;
|
|
margin: 0 0 14px;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--mcp-gray-600, #4b5563);
|
|
}
|
|
|
|
.emcp-skills-way__status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
margin: 0;
|
|
font-size: 12.5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.emcp-skills-way__status.is-on {
|
|
color: var(--mcp-success, #16a34a);
|
|
}
|
|
|
|
.emcp-skills-way__status.is-off {
|
|
color: var(--mcp-gray-600, #4b5563);
|
|
}
|
|
|
|
.emcp-skills-way__dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
.emcp-skills-way__status a {
|
|
color: var(--mcp-primary, #6366f1);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Templates page — "more coming" inline notice
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-coming-soon {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
margin: 0 0 20px;
|
|
background: var(--mcp-primary-light, #eef2ff);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-left: 3px solid var(--mcp-primary, #6366f1);
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--mcp-gray-700, #374151);
|
|
}
|
|
|
|
.elementor-mcp-coming-soon__icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
color: var(--mcp-primary, #6366f1);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.elementor-mcp-coming-soon__text {
|
|
min-width: 0;
|
|
}
|
|
|
|
.elementor-mcp-coming-soon__text strong {
|
|
display: inline;
|
|
margin-right: 4px;
|
|
color: var(--mcp-gray-700, #374151);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Premium templates grid
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-template-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.elementor-mcp-template-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
background: #fff;
|
|
overflow: hidden;
|
|
transition: border-color var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-template-card:hover {
|
|
border-color: var(--mcp-gray-400);
|
|
}
|
|
|
|
.elementor-mcp-template-thumb {
|
|
aspect-ratio: 16 / 10;
|
|
background: var(--mcp-gray-100);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.elementor-mcp-template-thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.elementor-mcp-template-thumb--placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.elementor-mcp-template-thumb--placeholder svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
fill: var(--mcp-gray-400);
|
|
}
|
|
|
|
.elementor-mcp-template-body {
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.elementor-mcp-template-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.elementor-mcp-template-title {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-700, #374151);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.elementor-mcp-template-desc {
|
|
margin: 0 0 14px;
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-500);
|
|
line-height: 1.5;
|
|
flex: 1;
|
|
}
|
|
|
|
.elementor-mcp-template-actions {
|
|
margin-top: auto;
|
|
padding-top: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.elementor-mcp-template-actions-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.elementor-mcp-template-actions-row .button {
|
|
flex: 1;
|
|
min-width: 0;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.elementor-mcp-template-preview {
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
width: 100%;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.elementor-mcp-template-preview svg {
|
|
fill: currentColor;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Prompts Tab
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-prompts-intro {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.elementor-mcp-prompts-intro h2 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-800);
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.elementor-mcp-prompts-intro .description {
|
|
color: var(--mcp-gray-500);
|
|
font-size: 13px;
|
|
margin: 0;
|
|
max-width: 680px;
|
|
}
|
|
|
|
.elementor-mcp-prompts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.elementor-mcp-prompt-card {
|
|
position: relative;
|
|
padding: 20px;
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius);
|
|
/* Only transition cheap properties — `transition: all` + box-shadow + transform
|
|
* on hover across 50+ cards causes paint/composite churn that feels like a hang. */
|
|
transition: border-color var(--mcp-transition);
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Skip rendering work for cards scrolled out of view. The browser still includes
|
|
* them in the grid layout (intrinsic-size keeps the scrollbar stable), but doesn't
|
|
* paint or run hover styles until they actually enter the viewport. Massive win
|
|
* with 50+ cards. Supported in Chrome/Edge/Opera; gracefully ignored elsewhere. */
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: 220px;
|
|
}
|
|
|
|
.elementor-mcp-prompt-card:hover {
|
|
border-color: var(--mcp-primary);
|
|
}
|
|
|
|
.elementor-mcp-prompt-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.elementor-mcp-prompt-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-800);
|
|
margin: 0;
|
|
}
|
|
|
|
.elementor-mcp-prompt-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 9px;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
background: var(--mcp-primary-light);
|
|
color: var(--mcp-primary);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.elementor-mcp-prompt-desc {
|
|
color: var(--mcp-gray-500);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
margin: 0 0 16px;
|
|
flex: 1;
|
|
}
|
|
|
|
.elementor-mcp-prompt-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.elementor-mcp-prompt-actions .elementor-mcp-copy-btn {
|
|
position: static;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--mcp-gray-50) !important;
|
|
border: 1px solid var(--mcp-gray-300) !important;
|
|
color: var(--mcp-gray-600) !important;
|
|
font-size: 12px !important;
|
|
padding: 6px 14px !important;
|
|
min-height: auto !important;
|
|
border-radius: var(--mcp-radius-sm) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.elementor-mcp-prompt-actions .elementor-mcp-copy-btn:hover {
|
|
background: var(--mcp-primary-light) !important;
|
|
border-color: var(--mcp-primary) !important;
|
|
color: var(--mcp-primary) !important;
|
|
}
|
|
|
|
.elementor-mcp-prompt-actions .elementor-mcp-copy-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: currentColor;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Prompts CTA Banner */
|
|
.elementor-mcp-prompts-cta {
|
|
background: linear-gradient(135deg, var(--mcp-primary), #818cf8);
|
|
border-radius: var(--mcp-radius);
|
|
padding: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.elementor-mcp-prompts-cta-content h3 {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--mcp-white);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.elementor-mcp-prompts-cta-content p {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-size: 14px;
|
|
margin: 0 0 20px;
|
|
max-width: 540px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.elementor-mcp-prompts-cta-btn.button.button-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: var(--mcp-white) !important;
|
|
color: var(--mcp-primary) !important;
|
|
border: none !important;
|
|
padding: 10px 24px !important;
|
|
font-size: 14px !important;
|
|
font-weight: 600 !important;
|
|
border-radius: var(--mcp-radius-sm) !important;
|
|
text-decoration: none;
|
|
transition: all var(--mcp-transition) !important;
|
|
box-shadow: var(--mcp-shadow) !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
.elementor-mcp-prompts-cta-btn.button.button-primary:hover {
|
|
background: var(--mcp-gray-50) !important;
|
|
box-shadow: var(--mcp-shadow-lg) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.elementor-mcp-prompts-cta-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: currentColor;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Changelog Tab
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-changelog-intro {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.elementor-mcp-changelog-intro h2 {
|
|
margin: 0 0 8px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-900);
|
|
}
|
|
|
|
.elementor-mcp-changelog-intro .description {
|
|
color: var(--mcp-gray-500);
|
|
font-size: 14px;
|
|
margin: 0;
|
|
}
|
|
|
|
.elementor-mcp-changelog-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.elementor-mcp-changelog-version {
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-lg);
|
|
padding: 20px 24px;
|
|
transition: border-color var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-changelog-version:hover {
|
|
border-color: var(--mcp-gray-300);
|
|
}
|
|
|
|
.elementor-mcp-changelog-version.is-latest {
|
|
border-color: var(--mcp-primary);
|
|
border-width: 2px;
|
|
}
|
|
|
|
.elementor-mcp-changelog-version-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.elementor-mcp-changelog-version-header h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-900);
|
|
}
|
|
|
|
.elementor-mcp-changelog-badge {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--mcp-white);
|
|
background: var(--mcp-primary);
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.elementor-mcp-changelog-items {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.elementor-mcp-changelog-items > li {
|
|
padding: 11px 0;
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
color: var(--mcp-gray-700);
|
|
border-bottom: 1px solid var(--mcp-gray-100);
|
|
}
|
|
|
|
.elementor-mcp-changelog-items > li:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.elementor-mcp-changelog-items strong {
|
|
color: var(--mcp-gray-900);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.elementor-mcp-changelog-items code,
|
|
.elementor-mcp-changelog-note code {
|
|
padding: 1px 6px;
|
|
font-size: 12px;
|
|
background: var(--mcp-gray-50);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: 4px;
|
|
font-family: Menlo, Consolas, monospace;
|
|
color: var(--mcp-gray-800);
|
|
}
|
|
|
|
.elementor-mcp-changelog-items a,
|
|
.elementor-mcp-changelog-note a {
|
|
color: var(--mcp-primary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.elementor-mcp-changelog-items a:hover,
|
|
.elementor-mcp-changelog-note a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Nested sub-items. */
|
|
.elementor-mcp-changelog-subitems {
|
|
list-style: none;
|
|
margin: 8px 0 2px;
|
|
padding: 0 0 0 16px;
|
|
border-left: 2px solid var(--mcp-gray-200);
|
|
}
|
|
|
|
.elementor-mcp-changelog-subitems li {
|
|
padding: 4px 0;
|
|
border: 0;
|
|
font-size: 12.5px;
|
|
color: var(--mcp-gray-500);
|
|
}
|
|
|
|
/* Blockquote note callout (e.g. a Pro re-activation notice). */
|
|
.elementor-mcp-changelog-note {
|
|
margin: 0 0 14px;
|
|
padding: 12px 14px;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: #92400e;
|
|
background: #fffbeb;
|
|
border: 1px solid #fde68a;
|
|
border-left: 3px solid #f59e0b;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.elementor-mcp-changelog-note strong {
|
|
color: #78350f;
|
|
}
|
|
|
|
/* Color-coded category tags. */
|
|
.elementor-mcp-cl-tag {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
padding: 1px 8px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
border-radius: 4px;
|
|
vertical-align: 1px;
|
|
}
|
|
|
|
.elementor-mcp-cl-tag--new { background: #dcfce7; color: #166534; }
|
|
.elementor-mcp-cl-tag--fixed { background: #fef3c7; color: #92400e; }
|
|
.elementor-mcp-cl-tag--improved { background: #dbeafe; color: #1e40af; }
|
|
.elementor-mcp-cl-tag--changed { background: #ede9fe; color: #5b21b6; }
|
|
.elementor-mcp-cl-tag--removed { background: #fee2e2; color: #991b1b; }
|
|
.elementor-mcp-cl-tag--security { background: #fee2e2; color: #991b1b; }
|
|
.elementor-mcp-cl-tag--deprecated { background: var(--mcp-gray-100); color: var(--mcp-gray-600); }
|
|
.elementor-mcp-cl-tag--note { background: var(--mcp-gray-100); color: var(--mcp-gray-600); }
|
|
|
|
/* =========================================================================
|
|
* Responsive
|
|
* ========================================================================= */
|
|
|
|
@media screen and (max-width: 960px) {
|
|
.elementor-mcp-stats {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.elementor-mcp-stat {
|
|
flex: 1 1 140px;
|
|
}
|
|
|
|
.elementor-mcp-header {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.elementor-mcp-header-actions {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.elementor-mcp-prompts-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.elementor-mcp-admin {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.elementor-mcp-header {
|
|
padding: 16px;
|
|
}
|
|
|
|
.elementor-mcp-header-btn {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.elementor-mcp-stats {
|
|
flex-direction: column;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.elementor-mcp-stat {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.elementor-mcp-admin .nav-tab-wrapper {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.elementor-mcp-admin .tab-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
.elementor-mcp-tools-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.elementor-mcp-category-toggle {
|
|
min-width: 0;
|
|
}
|
|
|
|
.elementor-mcp-status-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.elementor-mcp-prompts-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.elementor-mcp-prompts-cta {
|
|
padding: 24px 16px;
|
|
}
|
|
|
|
.elementor-mcp-changelog-version {
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------
|
|
* Brand Kits
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
.elementor-mcp-stat-icon--brand-kits {
|
|
background: var(--mcp-primary-light);
|
|
color: var(--mcp-primary);
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
background: #fff;
|
|
overflow: hidden;
|
|
transition: border-color var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-card:hover {
|
|
border-color: var(--mcp-gray-400);
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-preview {
|
|
aspect-ratio: 16 / 10;
|
|
background: var(--mcp-gray-100);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* Fallback swatch strip when no pre-rendered preview ships. */
|
|
.elementor-mcp-brand-kit-swatches {
|
|
display: flex;
|
|
height: 64px;
|
|
width: 100%;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-swatch {
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-body {
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-title {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-700, #374151);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-desc {
|
|
margin: 0 0 14px;
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-500);
|
|
line-height: 1.5;
|
|
flex: 1;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-actions {
|
|
margin-top: auto;
|
|
padding-top: 6px;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-actions .button {
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Restore from backup */
|
|
.elementor-mcp-brand-kit-restore {
|
|
margin-top: 28px;
|
|
padding: 20px;
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
background: var(--mcp-gray-100);
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-restore h3 {
|
|
margin: 0 0 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-restore-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin: 12px 0 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-backup-select {
|
|
min-width: 280px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-clobber {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-600, #4b5563);
|
|
}
|
|
|
|
/* Apply confirmation modal */
|
|
.elementor-mcp-brand-kit-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-modal[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-modal__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(17, 24, 39, 0.55);
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-modal__dialog {
|
|
position: relative;
|
|
background: #fff;
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
box-shadow: var(--mcp-shadow-lg);
|
|
width: 460px;
|
|
max-width: calc(100vw - 40px);
|
|
padding: 24px;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-modal__title {
|
|
margin: 0 0 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-modal__body {
|
|
margin: 0 0 16px;
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-600, #4b5563);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-modal__backup {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.elementor-mcp-brand-kit-modal__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Success toast */
|
|
.elementor-mcp-bk-toast {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
z-index: 100001;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
background: #111827;
|
|
color: #fff;
|
|
padding: 14px 18px;
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
box-shadow: var(--mcp-shadow-lg);
|
|
font-size: 13px;
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.elementor-mcp-bk-toast.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.elementor-mcp-bk-toast a {
|
|
color: #a5b4fc;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.elementor-mcp-bk-toast a:hover {
|
|
color: #c7d2fe;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Activate Abilities API card (Connection tab)
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-activate-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.elementor-mcp-activate-head h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.elementor-mcp-step-num {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
flex-shrink: 0;
|
|
border-radius: 999px;
|
|
background: var(--mcp-gray-900, #111827);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.elementor-mcp-activate-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 0 0 14px;
|
|
font-size: 14px;
|
|
color: var(--mcp-gray-900, #111827);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.elementor-mcp-activate-toggle input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.elementor-mcp-activate-note {
|
|
margin: 0 0 10px;
|
|
max-width: 80ch;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--mcp-gray-700, #374151);
|
|
}
|
|
|
|
.elementor-mcp-activate-note--security strong {
|
|
color: #b91c1c;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Pagination (Prompts / Templates / Brand Kits grids)
|
|
* Client-side, filter-aware pager rendered by initGridPagination() in admin.js.
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-pager {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin: 24px 0 8px;
|
|
}
|
|
|
|
.elementor-mcp-pager:empty {
|
|
display: none;
|
|
}
|
|
|
|
.elementor-mcp-pager-btn {
|
|
min-width: 34px;
|
|
height: 34px;
|
|
padding: 0 10px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: var(--mcp-gray-700);
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-pager-btn:hover:not(:disabled):not(.is-current) {
|
|
border-color: var(--mcp-primary);
|
|
color: var(--mcp-primary);
|
|
background: var(--mcp-primary-light);
|
|
}
|
|
|
|
.elementor-mcp-pager-btn.is-current {
|
|
color: var(--mcp-white);
|
|
background: var(--mcp-primary);
|
|
border-color: var(--mcp-primary);
|
|
cursor: default;
|
|
}
|
|
|
|
.elementor-mcp-pager-btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.elementor-mcp-pager-ellipsis {
|
|
min-width: 22px;
|
|
text-align: center;
|
|
color: var(--mcp-gray-400);
|
|
font-size: 13px;
|
|
user-select: none;
|
|
}
|
|
|
|
.elementor-mcp-pager-status {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin: 4px 0 0;
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-500);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Code Viewer Overlay (slide-in sidebar with copy + download)
|
|
* ========================================================================= */
|
|
|
|
.emcp-code-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100000;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease, visibility 0s linear 0.2s;
|
|
}
|
|
|
|
.emcp-code-overlay.is-open {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.emcp-code-overlay__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.55);
|
|
}
|
|
|
|
.emcp-code-overlay__panel {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 640px;
|
|
max-width: 92vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #1e1e1e;
|
|
color: #d4d4d4;
|
|
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
|
|
transform: translateX(100%);
|
|
transition: transform 0.22s ease;
|
|
}
|
|
|
|
.emcp-code-overlay.is-open .emcp-code-overlay__panel {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.emcp-code-overlay__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 18px;
|
|
background: #252526;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.emcp-code-overlay__title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.emcp-code-overlay__close {
|
|
flex-shrink: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: #d4d4d4;
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.emcp-code-overlay__close:hover {
|
|
background: #37373d;
|
|
color: #fff;
|
|
}
|
|
|
|
.emcp-code-overlay__toolbar {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 10px 18px;
|
|
background: #252526;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.emcp-code-overlay__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
border: 1px solid #3c3c3c;
|
|
border-radius: 6px;
|
|
background: #2d2d2d;
|
|
color: #d4d4d4;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.emcp-code-overlay__btn:hover {
|
|
background: #094771;
|
|
border-color: #0e639c;
|
|
color: #fff;
|
|
}
|
|
|
|
.emcp-code-overlay__body {
|
|
flex: 1;
|
|
margin: 0;
|
|
padding: 16px 18px;
|
|
overflow: auto;
|
|
background: #1e1e1e;
|
|
}
|
|
|
|
.emcp-code-overlay__body code {
|
|
display: block;
|
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: #d4d4d4;
|
|
white-space: pre;
|
|
tab-size: 4;
|
|
}
|
|
|
|
/* Hidden per-row code source feeding the overlay. */
|
|
.emcp-code-src {
|
|
display: none;
|
|
}
|
|
|
|
@media ( max-width: 782px ) {
|
|
.emcp-code-overlay__panel {
|
|
width: 100vw;
|
|
max-width: 100vw;
|
|
}
|
|
}
|
|
|
|
/* Click-to-copy chip (e.g. a snippet shortcode). */
|
|
.emcp-copy-text {
|
|
position: relative;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.emcp-copy-text:hover {
|
|
background: var(--mcp-primary-light);
|
|
color: var(--mcp-primary);
|
|
}
|
|
|
|
.emcp-copy-text:focus-visible {
|
|
outline: 2px solid var(--mcp-primary);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.emcp-copy-text::after {
|
|
content: attr(data-emcp-copied);
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 6px);
|
|
transform: translateX(-50%) translateY(4px);
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
background: var(--mcp-gray-900);
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease, transform 0.15s ease;
|
|
}
|
|
|
|
.emcp-copy-text.is-copied::after {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
/* Divider inside the Connection "Activate" card (between toggles). */
|
|
.elementor-mcp-activate-divider {
|
|
margin: 16px 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--mcp-gray-200);
|
|
}
|
|
|
|
/* Connection tab — auth self-test (#41). */
|
|
.elementor-mcp-authtest-ok { color: #157347; font-weight: 600; }
|
|
.elementor-mcp-authtest-bad { color: #b32d2e; font-weight: 600; }
|
|
.elementor-mcp-authtest-fix {
|
|
margin-top: 10px;
|
|
padding: 12px 14px;
|
|
background: #fcf6e6;
|
|
border: 1px solid #e6d8a8;
|
|
border-radius: 6px;
|
|
}
|
|
.elementor-mcp-authtest-snippet {
|
|
background: #1e1e1e;
|
|
color: #e6e6e6;
|
|
padding: 10px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
overflow-x: auto;
|
|
margin: 4px 0 12px;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* ── Tools page platform sub-tabs ─────────────────────────────── */
|
|
.elementor-mcp-subtabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin: 16px 0 18px;
|
|
border-bottom: 1px solid var(--mcp-gray-200);
|
|
}
|
|
.elementor-mcp-subtab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 18px;
|
|
margin-bottom: -1px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-bottom: 2px solid transparent;
|
|
border-radius: 6px 6px 0 0;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-500);
|
|
cursor: pointer;
|
|
}
|
|
.elementor-mcp-subtab:hover { color: var(--mcp-gray-800); background: var(--mcp-gray-100); }
|
|
.elementor-mcp-subtab.is-active {
|
|
color: var(--mcp-gray-800);
|
|
border-bottom-color: #2271b1;
|
|
}
|
|
.elementor-mcp-subtab-count {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-500);
|
|
background: var(--mcp-gray-100);
|
|
border-radius: 10px;
|
|
padding: 1px 8px;
|
|
}
|
|
.elementor-mcp-subtab.is-active .elementor-mcp-subtab-count {
|
|
color: var(--mcp-white);
|
|
background: #2271b1;
|
|
}
|
|
.elementor-mcp-tabpanel { display: none; }
|
|
.elementor-mcp-tabpanel.is-active { display: block; }
|
|
|
|
/* Compact tool mode: an info banner above the still-interactive per-tool grid. */
|
|
.elementor-mcp-compact-banner {
|
|
margin: 0 0 14px;
|
|
padding: 10px 14px;
|
|
background: #eef0ff;
|
|
border: 1px solid #c9cdf5;
|
|
border-left: 3px solid #5145e5;
|
|
border-radius: 6px;
|
|
}
|
|
.elementor-mcp-compact-banner p { margin: 0; font-size: 13px; color: #2b2f44; }
|
|
|
|
/* Connection-tab client picker */
|
|
.elementor-mcp-client-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
|
|
gap: 12px;
|
|
margin: 12px 0 20px;
|
|
}
|
|
.elementor-mcp-client-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 16px 12px;
|
|
background: #fff;
|
|
border: 1px solid var( --mcp-gray-300, #d1d5db );
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: border-color .15s, box-shadow .15s;
|
|
}
|
|
.elementor-mcp-client-card:hover { border-color: var( --mcp-primary, #6366f1 ); }
|
|
.elementor-mcp-client-card.is-selected {
|
|
border-color: var( --mcp-primary, #6366f1 );
|
|
box-shadow: 0 0 0 1px var( --mcp-primary, #6366f1 ) inset;
|
|
}
|
|
.elementor-mcp-client-card .dashicons { font-size: 28px; width: 28px; height: 28px; color: var( --mcp-gray-600, #4b5563 ); }
|
|
.elementor-mcp-client-card.is-selected .dashicons { color: var( --mcp-primary, #6366f1 ); }
|
|
.elementor-mcp-client-card-logo { width: 32px; height: 32px; object-fit: contain; display: block; }
|
|
|
|
/* Context page */
|
|
.elementor-mcp-context-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin: 8px 0;
|
|
}
|
|
.elementor-mcp-context-counter {
|
|
font-size: 12px;
|
|
color: var( --mcp-gray-600, #4b5563 );
|
|
}
|
|
.elementor-mcp-context-counter.is-warn {
|
|
color: #b45309;
|
|
font-weight: 600;
|
|
}
|
|
.elementor-mcp-context-preview {
|
|
margin: 0;
|
|
padding: 14px 16px;
|
|
background: var( --mcp-gray-900, #0f172a );
|
|
color: #e2e8f0;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
border-radius: var( --mcp-radius, 8px );
|
|
white-space: pre-wrap;
|
|
max-height: 360px;
|
|
overflow: auto;
|
|
}
|
|
.elementor-mcp-client-card-label { font-weight: 600; font-size: 13px; text-align: center; }
|
|
|
|
/* Elementor-inactive state: tools not registered */
|
|
.elementor-mcp-tool-card.is-unavailable { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
|
|
.elementor-mcp-tool-card.is-unavailable .elementor-mcp-toggle-track { cursor: not-allowed; }
|
|
.elementor-mcp-elementor-inactive { margin: 0 0 16px; }
|
|
|
|
/* Per-tool "install/activate X to enable" hint (e.g. Astra + Spectra combo). */
|
|
.elementor-mcp-tool-unavailable-note {
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--mcp-amber-600, #b45309);
|
|
}
|
|
|
|
/* Section-level notice (e.g. Astra + Spectra File Generation heads-up). */
|
|
.elementor-mcp-cat-notice {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
margin: 0 0 14px;
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
}
|
|
.elementor-mcp-cat-notice.is-warning {
|
|
background: var(--mcp-amber-50, #fffbeb);
|
|
border: 1px solid var(--mcp-amber-200, #fde68a);
|
|
color: var(--mcp-amber-800, #92400e);
|
|
}
|
|
.elementor-mcp-cat-notice.is-info {
|
|
background: var(--mcp-blue-50, #eff6ff);
|
|
border: 1px solid var(--mcp-blue-200, #bfdbfe);
|
|
color: var(--mcp-blue-800, #1e40af);
|
|
}
|
|
.elementor-mcp-cat-notice-icon { flex: 0 0 auto; margin-top: 1px; opacity: 0.9; }
|
|
|
|
/* Modules tab ----------------------------------------------------------- */
|
|
.emcp-modules-grid { grid-template-columns: repeat( auto-fill, minmax( 360px, 1fr ) ); }
|
|
.emcp-module-card { flex-direction: column; cursor: default; gap: 0; }
|
|
.emcp-module-card.is-disabled { opacity: 1; background: var(--mcp-gray-50); }
|
|
.emcp-module-card.is-disabled .elementor-mcp-tool-info { opacity: 0.7; }
|
|
.emcp-module-head { display: flex; align-items: flex-start; gap: 12px; width: 100%; cursor: pointer; }
|
|
.emcp-module-card.is-unavailable .emcp-module-head { cursor: not-allowed; }
|
|
|
|
/* Live toggle flip (no Tools-grid JS on this tab). */
|
|
.emcp-switch input[type="checkbox"]:checked + .elementor-mcp-toggle .elementor-mcp-toggle-track { background: var(--mcp-primary); }
|
|
.emcp-switch input[type="checkbox"]:checked + .elementor-mcp-toggle .elementor-mcp-toggle-track::after { transform: translateX(16px); }
|
|
.emcp-switch input[type="checkbox"]:focus-visible + .elementor-mcp-toggle .elementor-mcp-toggle-track { box-shadow: 0 0 0 2px var(--mcp-white), 0 0 0 4px var(--mcp-primary); }
|
|
|
|
.emcp-module-unavailable { color: #b32d2e; font-style: italic; margin: 12px 0 0 50px; }
|
|
.emcp-module-settings { margin: 14px 0 0 50px; }
|
|
.emcp-module-knobs { display: flex; flex-direction: column; gap: 10px; }
|
|
.emcp-module-knob { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mcp-gray-700, #3c434a); }
|
|
.emcp-module-knob input[type="number"] { width: 90px; }
|
|
.emcp-module-bulk { margin: 14px 0 0 50px; padding-top: 14px; border-top: 1px solid var(--mcp-gray-200); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
|
.emcp-bulk-progress { flex-basis: 100%; margin-top: 8px; }
|
|
.emcp-bulk-bar { height: 8px; background: var(--mcp-gray-200); border-radius: 4px; overflow: hidden; }
|
|
.emcp-bulk-bar span { display: block; height: 100%; width: 0; background: var(--mcp-primary); transition: width .2s; }
|
|
.emcp-bulk-status { font-size: 12px; color: var(--mcp-gray-600, #50575e); }
|
|
/* Shared switch (Connection cards, Modules) --------------------------------- */
|
|
.emcp-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
|
|
.emcp-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
|
|
.emcp-switch-label { font-weight: 600; font-size: 14px; }
|
|
|
|
/* Connection sub-tab: two cards in a row ------------------------------------ */
|
|
.emcp-conn-cards { display: grid; grid-template-columns: repeat( auto-fit, minmax( 340px, 1fr ) ); gap: 16px; margin: 4px 0 16px; }
|
|
.emcp-conn-card { border: 1px solid var(--mcp-gray-200); border-radius: var(--mcp-radius); background: var(--mcp-white); padding: 18px 20px; }
|
|
.emcp-conn-card-title { margin: 0 0 14px; font-size: 15px; }
|
|
.emcp-conn-toggle { margin-bottom: 12px; }
|
|
|
|
/* 3rd Party Services: aligned key fields ------------------------------------ */
|
|
.emcp-services-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 340px, 1fr ) ); gap: 18px; margin: 16px 0 20px; }
|
|
.emcp-service-field { display: flex; flex-direction: column; gap: 6px; }
|
|
.emcp-service-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
|
|
.emcp-service-field-head label { font-weight: 600; }
|
|
.emcp-service-field-head a { font-size: 12px; text-decoration: none; }
|
|
.emcp-service-field input[type="text"] { width: 100%; }
|
|
.emcp-service-field input[type="text"]:disabled { background: var(--mcp-gray-50); color: var(--mcp-gray-600, #50575e); }
|
|
/* Connection sub-tab header: tabs left, Save button right -------------------- */
|
|
.emcp-conn-subhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 18px; border-bottom: 1px solid var(--mcp-gray-200); }
|
|
.elementor-mcp-subtabs--flush { border-bottom: none; margin: 0; }
|
|
.emcp-subtab-actions { display: flex; align-items: center; padding-bottom: 6px; }
|
|
.emcp-subtab-save { margin: 0 !important; }
|
|
/* [hidden] alone loses to WP's .button { display:inline-block } — force it. */
|
|
.emcp-subtab-save[hidden] { display: none !important; }
|
|
/* 3rd Party Services: saved-key badge + clear control ----------------------- */
|
|
.emcp-service-badge { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #1a7a34; background: #edfaef; border-radius: 3px; padding: 1px 6px; vertical-align: middle; }
|
|
.emcp-service-clear { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--mcp-gray-600, #50575e); }
|
|
/* Image Optimization module knobs ------------------------------------------- */
|
|
.emcp-io { display: flex; flex-direction: column; gap: 14px; }
|
|
.emcp-io-toggle { align-items: flex-start; }
|
|
.emcp-io-toggle .elementor-mcp-toggle { margin-top: 2px; }
|
|
.emcp-io-toggle-text { display: flex; flex-direction: column; gap: 2px; }
|
|
.emcp-io-toggle-title { font-weight: 600; font-size: 13px; color: var(--mcp-gray-800, #1d2327); }
|
|
.emcp-io-toggle-desc { font-size: 12px; color: var(--mcp-gray-600, #50575e); line-height: 1.4; }
|
|
.emcp-io-toggle--child { margin-left: 26px; padding-left: 14px; border-left: 2px solid var(--mcp-gray-200); }
|
|
.emcp-io-sep { border: none; border-top: 1px solid var(--mcp-gray-200); margin: 2px 0; }
|
|
|
|
.emcp-io-field { display: flex; flex-direction: column; gap: 8px; }
|
|
.emcp-io-field-head { display: flex; align-items: center; justify-content: space-between; }
|
|
.emcp-io-field-head label { font-weight: 600; font-size: 13px; color: var(--mcp-gray-800, #1d2327); }
|
|
.emcp-io-range-out { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--mcp-white); background: var(--mcp-primary); border-radius: 4px; padding: 1px 8px; min-width: 34px; text-align: center; }
|
|
.emcp-io-range-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--mcp-gray-500, #787c82); }
|
|
.emcp-io-hint { font-size: 12px; color: var(--mcp-gray-600, #50575e); }
|
|
.emcp-io-inline { display: flex; align-items: center; gap: 8px; }
|
|
.emcp-io-number { width: 110px; }
|
|
.emcp-io-unit { font-size: 12px; color: var(--mcp-gray-600, #50575e); }
|
|
|
|
/* Range slider */
|
|
.emcp-io-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--mcp-primary) 0, var(--mcp-primary) var(--emcp-fill, 0%), var(--mcp-gray-200) var(--emcp-fill, 0%), var(--mcp-gray-200) 100%); outline: none; margin: 2px 0; }
|
|
.emcp-io-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--mcp-primary); border: 2px solid var(--mcp-white); box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; }
|
|
.emcp-io-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--mcp-primary); border: 2px solid var(--mcp-white); box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; }
|
|
.emcp-io-range:focus-visible { box-shadow: 0 0 0 2px var(--mcp-white), 0 0 0 4px var(--mcp-primary); }
|
|
/* Module card action row + settings overlay --------------------------------- */
|
|
.emcp-module-card-actions { margin: auto 0 0 50px; padding-top: 14px; }
|
|
.emcp-module-settings-btn { display: inline-flex; align-items: center; }
|
|
|
|
.emcp-modal[hidden] { display: none; }
|
|
.emcp-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; }
|
|
.emcp-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
|
|
.emcp-modal-panel { position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--mcp-white); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
|
|
.emcp-modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--mcp-gray-200); background: var(--mcp-white); }
|
|
.emcp-modal-head h2 { margin: 0; font-size: 16px; }
|
|
.emcp-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--mcp-gray-600, #50575e); border-radius: 6px; cursor: pointer; }
|
|
.emcp-modal-close:hover { background: var(--mcp-gray-100); color: var(--mcp-gray-800, #1d2327); }
|
|
.emcp-modal-body { padding: 20px; }
|
|
.emcp-modal-foot { padding: 0 20px 20px; }
|
|
.emcp-modal-foot .button { margin: 0 !important; }
|
|
.emcp-modal-bulk { padding: 16px 20px 20px; border-top: 1px solid var(--mcp-gray-200); }
|
|
.emcp-modal-bulk-title { margin: 0 0 10px; font-weight: 600; font-size: 13px; }
|
|
.emcp-modal-bulk .emcp-module-bulk { margin: 0; padding: 0; border: none; }
|
|
body.emcp-modal-open { overflow: hidden; }
|
|
.emcp-modules-unsaved { margin-left: 12px; font-size: 12px; font-weight: 600; color: #a15c00; }
|
|
/* Module card buttons (Show Settings / Configure) — match the theme primary. */
|
|
.button.emcp-module-settings-btn { border: 1px solid var(--mcp-primary); color: var(--mcp-primary); background: var(--mcp-white); box-shadow: none; font-weight: 600; text-decoration: none; }
|
|
.button.emcp-module-settings-btn:hover, .button.emcp-module-settings-btn:focus { background: var(--mcp-primary); color: var(--mcp-white); border-color: var(--mcp-primary); box-shadow: none; }
|
|
.button.emcp-module-settings-btn:focus-visible { outline: 2px solid var(--mcp-primary); outline-offset: 1px; }
|
|
/* Full-width admin header (app bar + tab nav + Help dropdown) ---------------- */
|
|
.elementor-mcp-admin > h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
|
|
|
|
.emcp-appbar { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--mcp-white); border-bottom: 1px solid var(--mcp-gray-200); padding: 0 20px 0 20px; margin: 0 -20px 0 -22px; border-top: 1px solid var(--mcp-gray-200); }
|
|
.emcp-appbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 15px 0; width: 40%;}
|
|
.emcp-appbar-logo { width: 34px; height: 34px; border-radius: 6px; object-fit: contain; }
|
|
.emcp-appbar-title { font-size: 18px; font-weight: 700; color: var(--mcp-gray-800, #1d2327); }
|
|
.emcp-appbar-version { font-size: 11px; font-weight: 700; color: var(--mcp-primary); background: var(--mcp-primary-light); border-radius: 10px; padding: 2px 8px; }
|
|
.emcp-appbar-actions { display: flex; align-items: center; gap: 10px; }
|
|
|
|
.emcp-help-menu { position: relative; }
|
|
/* Match the Changelog / Affiliate Program pill buttons (.emcp-appbar-changelog). */
|
|
.emcp-help-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; background: var(--mcp-white); border: 1px solid var(--mcp-gray-200); border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--mcp-gray-800, #1d2327); text-decoration: none; cursor: pointer; }
|
|
.emcp-help-toggle:hover { border-color: var(--mcp-primary); color: var(--mcp-primary); }
|
|
.emcp-help-toggle .dashicons { font-size: 16px; width: 16px; height: 16px; }
|
|
.emcp-help-caret { font-size: 16px; width: 16px; height: 16px; line-height: 1; color: var(--mcp-gray-500, #787c82); }
|
|
.emcp-help-toggle:hover .emcp-help-caret { color: var(--mcp-primary); }
|
|
.emcp-help-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--mcp-white); border: 1px solid var(--mcp-gray-200); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; z-index: 1000; }
|
|
.emcp-help-dropdown::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
|
|
.emcp-help-menu:hover .emcp-help-dropdown, .emcp-help-menu:focus-within .emcp-help-dropdown { display: block; }
|
|
.emcp-help-dropdown a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--mcp-gray-800, #1d2327); text-decoration: none; font-size: 13px; }
|
|
.emcp-help-dropdown a:hover { background: var(--mcp-primary-light); color: var(--mcp-primary); }
|
|
.emcp-help-dropdown .dashicons { font-size: 18px; width: 18px; height: 18px; color: var(--mcp-gray-500, #787c82); }
|
|
.emcp-help-dropdown a:hover .dashicons { color: var(--mcp-primary); }
|
|
|
|
.emcp-appbar-upgrade { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--mcp-primary); color: var(--mcp-white); border: 1px solid var(--mcp-primary); border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; }
|
|
.emcp-appbar-upgrade:hover { background: var(--mcp-primary-hover); border-color: var(--mcp-primary-hover); color: var(--mcp-white); }
|
|
.emcp-appbar-upgrade .dashicons { font-size: 15px; width: 15px; height: 15px; }
|
|
|
|
.emcp-appnav { display: flex; align-items: stretch; gap: 0px; background: var(--mcp-white); border-bottom: 1px solid var(--mcp-gray-200); padding: 0 14px; overflow-x: auto; overflow-y: hidden; margin: 0; }
|
|
.emcp-appnav-item { display: inline-flex; align-items: center; gap: 7px; padding: 14px 16px; margin-bottom: -1px; white-space: nowrap; color: var(--mcp-gray-600, #50575e); text-decoration: none; font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; flex: 1; justify-content: center; text-align: center; border-right: 1px solid var(--mcp-gray-200); }
|
|
.emcp-appnav-item:hover { color: var(--mcp-gray-800, #1d2327); background: var(--mcp-gray-50); }
|
|
.emcp-appnav-item.is-active { color: var(--mcp-primary); border-bottom-color: var(--mcp-primary); }
|
|
.emcp-appnav-item .dashicons { font-size: 16px; width: 16px; height: 16px; }
|
|
.emcp-appbar-changelog { display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; background: var(--mcp-white); border: 1px solid var(--mcp-gray-200); border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--mcp-gray-800, #1d2327); text-decoration: none; }
|
|
.emcp-appbar-changelog:hover, .emcp-appbar-changelog.is-active { border-color: var(--mcp-primary); color: var(--mcp-primary); }
|
|
.emcp-appbar-changelog .dashicons { font-size: 16px; width: 16px; height: 16px; }
|
|
/* =========================================================================
|
|
* Focus reset (utility) — remove the default WP/browser outline + box-shadow
|
|
* that flashes on click for our themed anchors/buttons; show a subtle indigo
|
|
* (theme) ring only on real keyboard focus (:focus-visible) for a11y. Inputs,
|
|
* selects and the toggle switches keep their own focus styling.
|
|
* Order matters: :focus (reset) first, :focus-visible (ring) second.
|
|
* ========================================================================= */
|
|
.elementor-mcp-admin a:focus,
|
|
.elementor-mcp-admin button:focus,
|
|
.elementor-mcp-admin .button:focus,
|
|
.elementor-mcp-admin [role="menuitem"]:focus {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.elementor-mcp-admin a:focus-visible,
|
|
.elementor-mcp-admin button:focus-visible,
|
|
.elementor-mcp-admin .button:focus-visible,
|
|
.elementor-mcp-admin [role="menuitem"]:focus-visible {
|
|
outline: 2px solid var(--mcp-primary) !important;
|
|
outline-offset: 2px;
|
|
box-shadow: none !important;
|
|
}
|
|
.elementor-mcp-stat-icon--templates { background: #e0f7f4; color: #0d9488; }
|
|
|
|
/* Swipeable header rows: keep horizontal scroll (touch/drag/trackpad) but hide
|
|
the scrollbar so small screens read as a swipeable menu, not a scrolling box. */
|
|
.emcp-appnav, .elementor-mcp-stats { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
|
|
.emcp-appnav::-webkit-scrollbar, .elementor-mcp-stats::-webkit-scrollbar { width: 0; height: 0; display: none; }
|
|
/* Drag-to-scroll affordance for the header nav (mouse). */
|
|
.emcp-appnav { cursor: grab; }
|
|
.emcp-appnav.is-dragging { cursor: grabbing; user-select: none; }
|
|
.emcp-appnav.is-dragging .emcp-appnav-item { cursor: grabbing; }
|
|
/* Header nav overflow arrows (small desktops). Wrapper carries the full-bleed;
|
|
arrows overlay the edges and only show when the tabs overflow. */
|
|
.emcp-appnav-wrap { position: relative; margin: 0 -20px 20px -22px; }
|
|
.emcp-appnav-arrow { position: absolute; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-bottom: 1px solid var(--mcp-gray-200); background: var(--mcp-white); color: var(--mcp-gray-600, #50575e); cursor: pointer; z-index: 3; }
|
|
.emcp-appnav-arrow[hidden] { display: none !important; }
|
|
.emcp-appnav-arrow:hover { color: var(--mcp-primary); }
|
|
.emcp-appnav-arrow .dashicons { font-size: 22px; width: 22px; height: 22px; }
|
|
.emcp-appnav-arrow--prev { left: 0; box-shadow: 8px 0 10px -6px rgba(0,0,0,.18); }
|
|
.emcp-appnav-arrow--next { right: 0; box-shadow: -8px 0 10px -6px rgba(0,0,0,.18); }
|
|
|
|
@media (max-width: 900px) {
|
|
.emcp-appbar-brand {
|
|
width: 30%;
|
|
}
|
|
}
|
|
/* Compact header title on small screens: show "MCP Tools" instead of the full
|
|
name wrapping to multiple lines. */
|
|
.emcp-appbar-title--short { display: none; }
|
|
@media screen and (max-width: 900px) {
|
|
.emcp-appbar-title--full { display: none; }
|
|
.emcp-appbar-title--short { display: inline; white-space: nowrap; }
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Dashboard tab
|
|
* ========================================================================= */
|
|
|
|
/* On the Dashboard the shared content box goes flush so each section can be
|
|
its own card panel instead of everything sharing one big container. */
|
|
.elementor-mcp-admin .tab-content--flush {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.emcp-dash {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
/* Each dashboard section is a standalone white card panel. */
|
|
.emcp-dash-stats,
|
|
.emcp-dash-section {
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-lg);
|
|
padding: 22px 24px;
|
|
}
|
|
|
|
/* ---- Video guides + Help, side by side (70 / 30) ------------------------- */
|
|
|
|
.emcp-dash-row {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.emcp-dash-section--videos {
|
|
flex: 7 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.emcp-dash-section--help {
|
|
flex: 3 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Two videos per row inside the 70% column. */
|
|
.emcp-dash-section--videos .emcp-dash-videos {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
/* Help links stack in a single column inside the 30% column. */
|
|
.emcp-dash-section--help .emcp-dash-help {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Stack the row on narrower screens. */
|
|
@media screen and (max-width: 1200px) {
|
|
.emcp-dash-row {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/* ---- Headline stats ------------------------------------------------------ */
|
|
|
|
.emcp-dash-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Stat tiles sit flat inside the stats panel (the panel is the container). */
|
|
.emcp-dash-stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.emcp-dash-stat + .emcp-dash-stat {
|
|
border-left: 1px solid var(--mcp-gray-200);
|
|
}
|
|
|
|
.emcp-dash-stat-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: var(--mcp-radius-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.emcp-dash-stat-icon svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.emcp-dash-stat-icon--tools { background: var(--mcp-primary-light); color: var(--mcp-primary); }
|
|
.emcp-dash-stat-icon--active { background: var(--mcp-success-light); color: var(--mcp-success); }
|
|
.emcp-dash-stat-icon--pro { background: var(--mcp-pro-light); color: var(--mcp-pro); }
|
|
.emcp-dash-stat-icon--prompts { background: #fef3c7; color: var(--mcp-warning); }
|
|
.emcp-dash-stat-icon--brand-kits { background: #ffe4e6; color: #e11d48; }
|
|
.emcp-dash-stat-icon--templates { background: #dbeafe; color: #2563eb; }
|
|
|
|
.emcp-dash-stat-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.emcp-dash-stat-value {
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
color: var(--mcp-gray-900);
|
|
}
|
|
|
|
.emcp-dash-stat-label {
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-500);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ---- Section scaffolding ------------------------------------------------- */
|
|
|
|
.emcp-dash-section-head {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.emcp-dash-section-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--mcp-gray-900);
|
|
margin: 0 0 10px 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.emcp-dash-section-sub {
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-500);
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
/* ---- Feature grid -------------------------------------------------------- */
|
|
|
|
.emcp-dash-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.emcp-dash-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
padding: 18px;
|
|
background: var(--mcp-gray-50);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius);
|
|
text-decoration: none;
|
|
transition: box-shadow var(--mcp-transition), border-color var(--mcp-transition), background var(--mcp-transition), transform var(--mcp-transition);
|
|
position: relative;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.emcp-dash-card:hover,
|
|
.emcp-dash-card:focus {
|
|
background: var(--mcp-white);
|
|
border-color: var(--mcp-primary);
|
|
box-shadow: var(--mcp-shadow-md);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.emcp-dash-card-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--mcp-radius-sm);
|
|
background: var(--mcp-primary-light);
|
|
color: var(--mcp-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.emcp-dash-card-icon .dashicons {
|
|
font-size: 22px;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.emcp-dash-card-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.emcp-dash-card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-900);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.emcp-dash-card-desc {
|
|
display: block;
|
|
font-size: 12.5px;
|
|
color: var(--mcp-gray-500);
|
|
line-height: 1.5;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.emcp-dash-card-arrow {
|
|
color: var(--mcp-gray-300);
|
|
flex-shrink: 0;
|
|
align-self: center;
|
|
transition: color var(--mcp-transition), transform var(--mcp-transition);
|
|
position: absolute;
|
|
top: 25px;
|
|
right: 15px;
|
|
}
|
|
|
|
.emcp-dash-card:hover .emcp-dash-card-arrow {
|
|
color: var(--mcp-primary);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.emcp-dash-badge {
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
padding: 2px 7px;
|
|
border-radius: 999px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.emcp-dash-badge--pro {
|
|
background: var(--mcp-pro-light);
|
|
color: var(--mcp-pro);
|
|
}
|
|
|
|
/* ---- Video guides -------------------------------------------------------- */
|
|
|
|
.emcp-dash-videos {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.emcp-dash-video {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--mcp-gray-50);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius);
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
transition: box-shadow var(--mcp-transition), border-color var(--mcp-transition), transform var(--mcp-transition);
|
|
}
|
|
|
|
.emcp-dash-video:hover,
|
|
.emcp-dash-video:focus {
|
|
border-color: var(--mcp-primary);
|
|
box-shadow: var(--mcp-shadow-md);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.emcp-dash-video-thumb {
|
|
position: relative;
|
|
display: block;
|
|
aspect-ratio: 16 / 9;
|
|
background: var(--mcp-gray-100);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.emcp-dash-video-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
transition: transform var(--mcp-transition);
|
|
}
|
|
|
|
.emcp-dash-video:hover .emcp-dash-video-img {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
.emcp-dash-video-play {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 50%;
|
|
background: rgba(17, 24, 39, 0.72);
|
|
color: var(--mcp-white);
|
|
transition: background var(--mcp-transition);
|
|
}
|
|
|
|
.emcp-dash-video:hover .emcp-dash-video-play {
|
|
background: var(--mcp-primary);
|
|
}
|
|
|
|
.emcp-dash-video-play .dashicons {
|
|
font-size: 26px;
|
|
width: 26px;
|
|
height: 26px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.emcp-dash-video-meta {
|
|
display: block;
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.emcp-dash-video-title {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-800);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.emcp-dash-video-channel {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-500);
|
|
}
|
|
|
|
.emcp-dash-video-channel .dashicons {
|
|
font-size: 15px;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
/* "Watch More" CTA card — last item in the video grid. */
|
|
.emcp-dash-video--more {
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 180px;
|
|
padding: 24px;
|
|
background: var(--mcp-primary-light);
|
|
border-style: dashed;
|
|
border-color: var(--mcp-primary);
|
|
text-align: center;
|
|
}
|
|
|
|
.emcp-dash-video--more:hover,
|
|
.emcp-dash-video--more:focus {
|
|
background: var(--mcp-white);
|
|
border-style: solid;
|
|
}
|
|
|
|
.emcp-dash-more-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--mcp-primary);
|
|
}
|
|
|
|
.emcp-dash-more-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 2px;
|
|
border-radius: 50%;
|
|
background: var(--mcp-white);
|
|
color: var(--mcp-primary);
|
|
transition: background var(--mcp-transition), color var(--mcp-transition);
|
|
}
|
|
|
|
.emcp-dash-video--more:hover .emcp-dash-more-icon,
|
|
.emcp-dash-video--more:focus .emcp-dash-more-icon {
|
|
background: var(--mcp-primary);
|
|
color: var(--mcp-white);
|
|
}
|
|
|
|
.emcp-dash-more-icon .dashicons {
|
|
font-size: 26px;
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.emcp-dash-more-title {
|
|
font-family: var(--mcp-font-heading);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: var(--mcp-primary);
|
|
}
|
|
|
|
.emcp-dash-more-sub {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-500);
|
|
}
|
|
|
|
.emcp-dash-more-sub .dashicons {
|
|
font-size: 15px;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
/* ---- Help & resources ---------------------------------------------------- */
|
|
|
|
/* Version / update-status indicator (top of the Help panel). */
|
|
.emcp-dash-version {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
margin-bottom: 14px;
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.emcp-dash-version--ok {
|
|
background: var(--mcp-success-light);
|
|
border-color: #a7f3d0;
|
|
}
|
|
|
|
.emcp-dash-version--update {
|
|
background: #fffbeb;
|
|
border-color: #fde68a;
|
|
transition: box-shadow var(--mcp-transition), border-color var(--mcp-transition);
|
|
}
|
|
|
|
.emcp-dash-version--update:hover,
|
|
.emcp-dash-version--update:focus {
|
|
border-color: var(--mcp-warning);
|
|
box-shadow: var(--mcp-shadow-md);
|
|
}
|
|
|
|
.emcp-dash-version-dot {
|
|
flex-shrink: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.emcp-dash-version--ok .emcp-dash-version-dot {
|
|
background: var(--mcp-success);
|
|
}
|
|
|
|
.emcp-dash-version--update .emcp-dash-version-dot {
|
|
background: var(--mcp-warning);
|
|
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
|
|
}
|
|
|
|
.emcp-dash-version-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.emcp-dash-version-title {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-900);
|
|
}
|
|
|
|
.emcp-dash-version--ok .emcp-dash-version-title {
|
|
color: #065f46;
|
|
}
|
|
|
|
.emcp-dash-version--update .emcp-dash-version-title {
|
|
color: #92400e;
|
|
}
|
|
|
|
.emcp-dash-version-sub {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-500);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.emcp-dash-version-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #92400e;
|
|
}
|
|
|
|
.emcp-dash-version-cta .dashicons {
|
|
font-size: 15px;
|
|
width: 15px;
|
|
height: 15px;
|
|
transition: transform var(--mcp-transition);
|
|
}
|
|
|
|
.emcp-dash-version--update:hover .emcp-dash-version-cta .dashicons {
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.emcp-dash-help {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.emcp-dash-help-link {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 16px 18px;
|
|
background: var(--mcp-gray-50);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius);
|
|
text-decoration: none;
|
|
transition: box-shadow var(--mcp-transition), border-color var(--mcp-transition), background var(--mcp-transition);
|
|
}
|
|
|
|
.emcp-dash-help-link:hover,
|
|
.emcp-dash-help-link:focus {
|
|
background: var(--mcp-white);
|
|
border-color: var(--mcp-primary);
|
|
box-shadow: var(--mcp-shadow-md);
|
|
}
|
|
|
|
.emcp-dash-help-link .dashicons {
|
|
color: var(--mcp-primary);
|
|
font-size: 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.emcp-dash-help-title {
|
|
display: block;
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
color: var(--mcp-gray-900);
|
|
}
|
|
|
|
.emcp-dash-help-desc {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--mcp-gray-500);
|
|
margin-top: 2px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.emcp-dash-stat-value {
|
|
font-size: 26px;
|
|
}
|
|
|
|
/* Stat tiles stack — drop the vertical dividers. */
|
|
.emcp-dash-stat + .emcp-dash-stat {
|
|
border-left: none;
|
|
}
|
|
}
|
|
|
|
/* =========================================================================
|
|
* "Prompts have been rewritten" notice — flat, dismissible, one-time.
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-prompts-whatsnew {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
margin: 0 0 24px;
|
|
padding: 18px 44px 18px 20px;
|
|
background: var(--mcp-primary-light, #eef2ff);
|
|
border: 1px solid #c7d2fe;
|
|
border-left: 3px solid var(--mcp-primary, #6366f1);
|
|
border-radius: var(--mcp-radius-sm, 6px);
|
|
}
|
|
|
|
.elementor-mcp-prompts-whatsnew-body {
|
|
min-width: 0;
|
|
}
|
|
|
|
.elementor-mcp-prompts-whatsnew h3 {
|
|
margin: 0 0 6px;
|
|
font-family: var(--mcp-font-heading);
|
|
font-size: 15px;
|
|
line-height: 1.3;
|
|
color: var(--mcp-gray-900, #111827);
|
|
}
|
|
|
|
.elementor-mcp-prompts-whatsnew p {
|
|
margin: 0 0 6px;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--mcp-gray-700, #374151);
|
|
}
|
|
|
|
.elementor-mcp-prompts-whatsnew p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.elementor-mcp-prompts-whatsnew-dismiss {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: var(--mcp-radius-sm, 6px);
|
|
color: var(--mcp-gray-500, #6b7280);
|
|
text-decoration: none;
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.elementor-mcp-prompts-whatsnew-dismiss:hover,
|
|
.elementor-mcp-prompts-whatsnew-dismiss:focus {
|
|
background: #dbe1fd;
|
|
color: var(--mcp-gray-900, #111827);
|
|
}
|
|
|
|
.elementor-mcp-prompts-whatsnew-dismiss .dashicons {
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Prompts v1 (legacy) download — secondary button beside "Sync Library".
|
|
* Flat, no gradient; mirrors the sync button's geometry so the pair aligns.
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-pro-prompts-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.wp-core-ui a.elementor-mcp-legacy-btn,
|
|
.wp-core-ui .elementor-mcp-legacy-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 9px 18px;
|
|
min-height: 0;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: var(--mcp-gray-700, #374151);
|
|
background: var(--mcp-white, #fff);
|
|
border: 1px solid var(--mcp-gray-300, #d1d5db);
|
|
border-radius: var(--mcp-radius-sm, 6px);
|
|
box-shadow: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.wp-core-ui a.elementor-mcp-legacy-btn:hover,
|
|
.wp-core-ui a.elementor-mcp-legacy-btn:focus,
|
|
.wp-core-ui .elementor-mcp-legacy-btn:hover,
|
|
.wp-core-ui .elementor-mcp-legacy-btn:focus {
|
|
background: var(--mcp-gray-50, #f9fafb);
|
|
border-color: var(--mcp-gray-400, #9ca3af);
|
|
color: var(--mcp-gray-900, #111827);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.wp-core-ui a.elementor-mcp-legacy-btn:focus-visible {
|
|
outline: 2px solid var(--mcp-primary, #6366f1);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.elementor-mcp-legacy-btn .dashicons {
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 16px;
|
|
color: var(--mcp-gray-500, #6b7280);
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.elementor-mcp-pro-prompts-actions {
|
|
width: 100%;
|
|
}
|
|
}
|
|
/* ---------------------------------------------------------------------------
|
|
History tab — AI-safe change ledger (flat, no gradients)
|
|
--------------------------------------------------------------------------- */
|
|
.emcp-history__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
margin: 8px 0 16px;
|
|
}
|
|
.emcp-history__title { margin: 0 0 4px; }
|
|
.emcp-history__intro { margin: 0; color: #50575e; max-width: 640px; }
|
|
.emcp-history__filters {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin: 0;
|
|
list-style: none;
|
|
flex-wrap: wrap;
|
|
}
|
|
.emcp-history__filters li a {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border: 1px solid #c3c4c7;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
color: #2c3338;
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
}
|
|
.emcp-history__filters li.is-active a {
|
|
background: #2271b1;
|
|
border-color: #2271b1;
|
|
color: #fff;
|
|
}
|
|
.emcp-history__table { margin-top: 8px; }
|
|
.emcp-history__ago { display: block; color: #787c82; font-size: 11px; }
|
|
.emcp-history__summary { color: #50575e; font-size: 12px; }
|
|
.emcp-history__target { font-family: Consolas, Monaco, monospace; font-size: 12px; word-break: break-all; }
|
|
.emcp-history__badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 3px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: #646970;
|
|
}
|
|
.emcp-history__badge--elementor { background: #2271b1; }
|
|
.emcp-history__badge--filesystem { background: #8c6d1f; }
|
|
.emcp-history__badge--database { background: #7c3aed; }
|
|
.emcp-history__actions-col { white-space: nowrap; }
|
|
.emcp-history__rollback .dashicons { margin: 3px 2px 0 -2px; font-size: 15px; }
|
|
.emcp-history__state { color: #787c82; }
|
|
.emcp-history__state--done { color: #2271b1; font-weight: 600; }
|
|
.emcp-history__empty {
|
|
text-align: center;
|
|
padding: 48px 24px;
|
|
border: 1px dashed #c3c4c7;
|
|
border-radius: 6px;
|
|
color: #787c82;
|
|
}
|
|
.emcp-history__empty .dashicons { font-size: 32px; width: 32px; height: 32px; opacity: .5; }
|
|
.emcp-history__note { color: #787c82; font-size: 12px; margin-top: 10px; }
|
|
|
|
/* .mcpb bundle credential warning (Connection tab) */
|
|
.elementor-mcp-mcpb-warning {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
margin: 10px 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid #dba617;
|
|
border-left-width: 4px;
|
|
border-radius: 4px;
|
|
background: #fcf9e8;
|
|
color: #674e00;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
.elementor-mcp-mcpb-warning .dashicons {
|
|
color: #dba617;
|
|
flex: 0 0 auto;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* ===== Connection: authentication-method chooser + OAuth ===== */
|
|
.emcp-auth-methods {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
max-width: 720px;
|
|
}
|
|
.emcp-auth-card {
|
|
display: block;
|
|
position: relative;
|
|
padding: 18px 20px;
|
|
border: 2px solid var(--mcp-line, #e2e4ea);
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
transition: border-color .15s ease, box-shadow .15s ease;
|
|
}
|
|
.emcp-auth-card:hover { border-color: #c7cbe0; }
|
|
.emcp-auth-card:has(input:checked) {
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 0 0 1px #4f46e5 inset;
|
|
}
|
|
.emcp-auth-card.is-disabled { opacity: .55; cursor: not-allowed; }
|
|
.emcp-auth-card.is-disabled:hover { border-color: var(--mcp-line, #e2e4ea); }
|
|
.emcp-auth-card input { position: absolute; opacity: 0; pointer-events: none; }
|
|
.emcp-auth-card__title {
|
|
display: flex; align-items: center; gap: 10px;
|
|
font-size: 15px; font-weight: 600; color: #1e1f2b; margin-bottom: 6px;
|
|
}
|
|
.emcp-auth-card__desc { display: block; font-size: 13px; color: #64677a; line-height: 1.5; }
|
|
.emcp-auth-card__note { display: block; margin-top: 8px; font-size: 12.5px; color: #9497a8; }
|
|
.emcp-auth-badge {
|
|
font-size: 11px; font-weight: 600; color: #16794a;
|
|
background: #dff3e6; border-radius: 999px; padding: 2px 9px;
|
|
}
|
|
.emcp-manage-apps-link { font-size: 13px; }
|
|
.emcp-oauth-signin { margin-top: 4px; }
|
|
.emcp-oauth-signin-title { margin: 0 0 4px; }
|
|
body[data-emcp-auth="oauth"] [data-authfor="app-password"] { display: none; }
|
|
body[data-emcp-auth="app-password"] [data-authfor="oauth"] { display: none; }
|
|
@media (max-width: 600px) { .emcp-auth-methods { grid-template-columns: 1fr; } }
|
|
/* OAuth per-client step layout */
|
|
.emcp-oauth-step { margin: 16px 0 6px; font-size: 14px; color: #1e1f2b; }
|
|
.emcp-oauth-step:first-child { margin-top: 0; }
|
|
.emcp-oauth-desc { margin: 0 0 8px; }
|
|
.emcp-oauth-path-label { color: #9497a8; font-size: 12.5px; }
|
|
.emcp-oauth-deeplink { margin-bottom: 6px; }
|
|
/* Dashboard "Your usage" — 4-card activity grid. Flat, no gradients. */
|
|
.emcp-dash-usage-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.emcp-dash-ucard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
padding: 16px 16px 14px;
|
|
background: var(--mcp-gray-50);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: 10px;
|
|
text-decoration: none;
|
|
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
|
|
}
|
|
.emcp-dash-ucard:hover {
|
|
background: var(--mcp-white);
|
|
border-color: var(--mcp-primary);
|
|
box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
|
|
}
|
|
.emcp-dash-ucard:focus-visible { outline: 2px solid var(--mcp-primary); outline-offset: 2px; }
|
|
.emcp-dash-ucard-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
|
|
.emcp-dash-ucard-ico {
|
|
width: 28px; height: 28px; flex: none;
|
|
border-radius: 8px;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
}
|
|
.emcp-dash-ucard-ico .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }
|
|
.emcp-dash-ucard-ico--usage { background: var(--mcp-primary-light); color: var(--mcp-primary); }
|
|
.emcp-dash-ucard-ico--history { background: var(--mcp-success-light); color: var(--mcp-success); }
|
|
.emcp-dash-ucard-ico--tools { background: #dbeafe; color: #2563eb; }
|
|
.emcp-dash-ucard-ico--sandbox { background: #fef3c7; color: var(--mcp-warning); }
|
|
.emcp-dash-ucard-title {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font-size: 12px; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: .04em;
|
|
color: var(--mcp-gray-500);
|
|
}
|
|
.emcp-dash-ucard-num { font-size: 30px; font-weight: 700; line-height: 1; color: #1f2430; font-variant-numeric: tabular-nums; }
|
|
.emcp-dash-ucard-sub { font-size: 12.5px; color: var(--mcp-gray-500); margin-top: 4px; }
|
|
.emcp-dash-ucard-foot { margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--mcp-gray-500); }
|
|
/* KPI pair (Usage card) */
|
|
.emcp-dash-ucard-kpis { display: flex; gap: 22px; }
|
|
.emcp-dash-ucard-kpi { display: flex; flex-direction: column; }
|
|
.emcp-dash-ucard-kpi .emcp-dash-ucard-num { font-size: 26px; }
|
|
/* Most-used list */
|
|
.emcp-dash-ucard-list { margin: 0; padding: 0; list-style: none; width: 100%; }
|
|
.emcp-dash-ucard-list li {
|
|
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
|
|
padding: 5px 0; border-bottom: 1px solid var(--mcp-gray-100);
|
|
font-size: 12.5px;
|
|
}
|
|
.emcp-dash-ucard-list li:last-child { border-bottom: 0; }
|
|
.emcp-dash-ucard-act { color: #374151; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.emcp-dash-ucard-dom { color: var(--mcp-gray-500); }
|
|
.emcp-dash-ucard-cnt { color: var(--mcp-primary); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
|
|
.emcp-dash-ucard-empty { font-size: 12.5px; color: var(--mcp-gray-500); }
|
|
@media screen and (max-width: 1200px) {
|
|
.emcp-dash-usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
.emcp-dash-usage-grid { grid-template-columns: 1fr; }
|
|
}
|
|
.elementor-mcp-template-usage { display: inline-block; font-size: 11.5px; color: #6b7280; margin: 2px 0 0; }
|
|
|
|
/* =========================================================================
|
|
* Sandbox overview — Blocks / Widgets / PHP Snippets navigation cards.
|
|
* The whole card is one click target into its pillar; a hover lift + arrow
|
|
* replace the old floating button, and the count is a compact inline line
|
|
* (no giant stat number). Flat, no gradients.
|
|
* ========================================================================= */
|
|
.emcp-sandbox-overview > h2 { margin: 0 0 4px; font-size: 18px; }
|
|
.emcp-sandbox-overview > .description { margin: 0 0 20px; max-width: 820px; }
|
|
.emcp-sandbox-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.emcp-sb-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 11px;
|
|
padding: 18px 18px 16px;
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
|
|
transition: border-color .15s ease, box-shadow .15s ease;
|
|
}
|
|
.emcp-sb-card:hover,
|
|
.emcp-sb-card:focus-visible {
|
|
border-color: var(--mcp-primary);
|
|
box-shadow: 0 6px 18px rgba(79, 70, 229, .12);
|
|
outline: none;
|
|
}
|
|
.emcp-sb-card-top { display: flex; align-items: center; gap: 12px; }
|
|
.emcp-sb-card-ico {
|
|
width: 44px; height: 44px; flex: none;
|
|
border-radius: 11px;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
}
|
|
.emcp-sb-card-ico .dashicons { font-size: 25px; width: 25px; height: 25px; line-height: 25px; }
|
|
.emcp-sb-card-titles { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.emcp-sb-card-title { font-size: 16px; font-weight: 700; color: #1f2430; }
|
|
.emcp-sb-card-arrow {
|
|
margin-left: auto;
|
|
font-size: 20px; line-height: 1;
|
|
color: var(--mcp-gray-400);
|
|
transition: transform .15s ease, color .15s ease;
|
|
}
|
|
.emcp-sb-card:hover .emcp-sb-card-arrow,
|
|
.emcp-sb-card:focus-visible .emcp-sb-card-arrow { color: var(--mcp-primary); transform: translateX(4px); }
|
|
.emcp-sb-card-desc { font-size: 13px; line-height: 1.55; color: var(--mcp-gray-500); }
|
|
.emcp-sb-card-meta {
|
|
margin-top: auto;
|
|
padding-top: 4px;
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-500);
|
|
display: flex; align-items: center; gap: 5px;
|
|
}
|
|
.emcp-sb-card-meta-active { font-weight: 700; color: var(--mcp-primary); }
|
|
.emcp-sb-card-meta-draft { font-weight: 700; color: #1f2430; }
|
|
.emcp-sb-card-dot { color: var(--mcp-gray-300); }
|
|
.emcp-sb-card-locked { display: inline-flex; align-items: center; gap: 5px; color: var(--mcp-gray-500); }
|
|
.emcp-sb-card-locked .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 15px; }
|
|
@media screen and (max-width: 1200px) {
|
|
.emcp-sandbox-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
@media screen and (max-width: 782px) {
|
|
.emcp-sandbox-cards { grid-template-columns: 1fr; }
|
|
}
|
|
/* "Back to Sandbox" outlined button on each pillar page. */
|
|
.emcp-sandbox-back { margin: 0 0 16px; }
|
|
.emcp-sandbox-back .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 1; }
|
|
|
|
/* History: delete one / clear all. */
|
|
.emcp-history__clear-wrap { margin: 10px 0 0; }
|
|
.emcp-history__clear { display: inline-flex; align-items: center; gap: 4px; color: #b32d2e; text-decoration: none; }
|
|
.emcp-history__clear:hover { color: #8a2424; }
|
|
.emcp-history__clear .dashicons { font-size: 16px; width: 16px; height: 16px; }
|
|
.emcp-history__delete { display: inline-flex; align-items: center; margin-left: 8px; color: #b32d2e; text-decoration: none; vertical-align: middle; }
|
|
.emcp-history__delete:hover { color: #8a2424; }
|
|
.emcp-history__delete .dashicons { font-size: 16px; width: 16px; height: 16px; }
|
|
|
|
/* Pro-locked tool section: upgrade CTA in the category header. */
|
|
.elementor-mcp-cat-upgrade {
|
|
display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
|
|
font-size: 12px; font-weight: 600; color: #8a2be2; text-decoration: none;
|
|
padding: 4px 10px; border: 1px solid rgba(138, 43, 226, .35); border-radius: 999px;
|
|
background: rgba(138, 43, 226, .06); white-space: nowrap;
|
|
}
|
|
.elementor-mcp-cat-upgrade:hover { background: rgba(138, 43, 226, .12); color: #6d1fb0; }
|
|
.elementor-mcp-cat-upgrade .dashicons { font-size: 14px; width: 14px; height: 14px; }
|
|
|
|
/* ── Sandbox action buttons: plugin styling over WP .button + dashicons ── */
|
|
.emcp-sb-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
|
.emcp-sb-actions .emcp-sb-cloud { display: contents; }
|
|
.emcp-sb-actions .button,
|
|
.emcp-sb-actions .button:visited {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
min-height: 30px; padding: 4px 12px; margin: 0;
|
|
font-size: 12.5px; font-weight: 500; line-height: 1.4;
|
|
border-radius: var(--mcp-radius-sm);
|
|
background: var(--mcp-white); color: var(--mcp-gray-600);
|
|
border: 1px solid var(--mcp-gray-300); box-shadow: none;
|
|
transition: all var(--mcp-transition);
|
|
}
|
|
.emcp-sb-actions .button:hover { background: var(--mcp-gray-50); border-color: var(--mcp-gray-400); color: var(--mcp-gray-800); }
|
|
.emcp-sb-actions .button:focus { outline: none; border-color: var(--mcp-primary); box-shadow: 0 0 0 2px var(--mcp-primary-light); }
|
|
.emcp-sb-actions .button .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 1; margin: 0; }
|
|
.emcp-sb-actions .button-primary,
|
|
.emcp-sb-actions .button-primary:visited { background: var(--mcp-primary); color: var(--mcp-white); border-color: var(--mcp-primary); }
|
|
.emcp-sb-actions .button-primary:hover { background: var(--mcp-primary-hover); border-color: var(--mcp-primary-hover); color: var(--mcp-white); }
|
|
.emcp-sb-actions .emcp-sb-danger,
|
|
.emcp-sb-actions .emcp-sb-danger:visited { color: #b32d2e; border-color: #e6b3b2; }
|
|
.emcp-sb-actions .emcp-sb-danger:hover { background: #fbeaea; border-color: #d63638; color: #b32d2e; }
|
|
.emcp-sb-actions .button[disabled], .emcp-sb-actions .button:disabled { opacity: .55; cursor: default; }
|
|
.emcp-sb-tag { display: inline-block; margin-left: 2px; font-size: 11px; font-weight: 600; color: #8a6d00; background: #fcf3d9; padding: 2px 9px; border-radius: 10px; }
|
|
.emcp-sb-msg { font-size: 12px; color: var(--mcp-gray-500); }
|
|
.emcp-sb-actions .button-primary .dashicons,
|
|
.emcp-sb-actions .button-primary:hover .dashicons,
|
|
.emcp-sb-actions .button-primary:focus .dashicons { color: var(--mcp-white); }
|
|
|
|
/* ── Rotating announcement / promo bar ─────────────────────────────────── */
|
|
/* Full-width edge-to-edge permanent top strip, matching the app-bar breakout. */
|
|
.emcp-annc { position: relative; margin: -10px -20px 0 -22px; overflow: hidden; }
|
|
.emcp-annc-slides { position: relative; }
|
|
.emcp-annc-slide { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 10px 56px 10px 20px; text-decoration: none; box-sizing: border-box; }
|
|
.emcp-annc-slide.is-active { display: flex; }
|
|
.emcp-annc-slide--cloud { background: var(--mcp-primary); }
|
|
.emcp-annc-slide--ltd { background: #c2410c; }
|
|
.emcp-annc-badge { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.22); color: #fff; padding: 2px 8px; border-radius: 999px; }
|
|
.emcp-annc-icon { flex: none; color: rgba(255,255,255,.85); font-size: 18px; width: 18px; height: 18px; }
|
|
.emcp-annc-text { flex: 1 1 auto; min-width: 0; font-size: 13px; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.emcp-annc-text strong { color: #fff; font-weight: 700; }
|
|
.emcp-annc-cta { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); padding: 5px 12px; border-radius: 999px; transition: background .15s; }
|
|
.emcp-annc-slide:hover .emcp-annc-cta { background: rgba(255,255,255,.28); }
|
|
.emcp-annc-cta .dashicons { font-size: 15px; width: 15px; height: 15px; }
|
|
.emcp-annc-dots { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; gap: 5px; z-index: 2; }
|
|
.emcp-annc-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: background .15s; }
|
|
.emcp-annc-dot.is-active { background: #fff; }
|
|
.emcp-annc-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: rgba(255,255,255,.7); cursor: pointer; padding: 3px; line-height: 0; z-index: 2; }
|
|
.emcp-annc-close:hover { color: #fff; }
|
|
.emcp-annc-close .dashicons { font-size: 18px; width: 18px; height: 18px; }
|
|
@media screen and (max-width: 782px) {
|
|
.emcp-annc-slide { padding-right: 66px; gap: 8px; }
|
|
.emcp-annc-badge, .emcp-annc-icon, .emcp-annc-dots { display: none; }
|
|
.emcp-annc-text { white-space: normal; font-size: 12px; }
|
|
}
|
|
|
|
/* ── Explore your toolkit + EMCP Cloud banner (75/25) ──────────────────── */
|
|
.emcp-dash-row--toolkit { display: flex; gap: 20px; align-items: stretch; margin-bottom: 26px; }
|
|
.emcp-dash-section--toolkit { flex: 75 1 0; min-width: 0; }
|
|
/* Right column: two stacked promo banners (Cloud + Pro). */
|
|
.emcp-dash-side { flex: 25 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
|
|
.emcp-dash-promo { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; border-radius: var(--mcp-radius); padding: 20px; color: #fff; }
|
|
.emcp-dash-promo--cloud { background: var(--mcp-primary); }
|
|
.emcp-dash-promo--pro { background: var(--mcp-pro); }
|
|
.emcp-dash-promo-badge { align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.2); padding: 3px 9px; border-radius: 999px; }
|
|
.emcp-dash-promo-icon { font-size: 26px; width: 26px; height: 26px; color: rgba(255,255,255,.92); margin-top: 2px; }
|
|
.emcp-dash-promo-title { color: #fff; font-family: 'Geist', sans-serif; font-size: 17px; font-weight: 600; margin: 2px 0 0; letter-spacing: -0.01em; }
|
|
.emcp-dash-promo-desc { color: rgba(255,255,255,.85); font-size: 12.5px; line-height: 1.5; margin: 0; }
|
|
.emcp-dash-promo-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
|
|
.emcp-dash-promo-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.92); }
|
|
.emcp-dash-promo-list li .dashicons { flex: none; font-size: 15px; width: 15px; height: 15px; color: #fff; }
|
|
.emcp-dash-promo-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: #fff; color: var(--mcp-primary); font-weight: 600; font-size: 13px; padding: 9px 14px; border-radius: 8px; text-decoration: none; transition: background .15s; }
|
|
.emcp-dash-promo--pro .emcp-dash-promo-cta { color: var(--mcp-pro); }
|
|
.emcp-dash-promo-cta:hover { background: rgba(255,255,255,.92); }
|
|
.emcp-dash-promo-cta .dashicons { font-size: 15px; width: 15px; height: 15px; }
|
|
.emcp-dash-promo-note { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; }
|
|
.emcp-dash-promo-note .dashicons { font-size: 16px; width: 16px; height: 16px; }
|
|
@media screen and (max-width: 1200px) { .emcp-dash-row--toolkit { flex-direction: column; } }
|
|
|
|
/* -------------------------------------------------------------------------
|
|
* Prominent disclosure cards on the sandbox screens.
|
|
* Turns the "Import a bundle" and "Cloud Library" <details> into eye-catching
|
|
* cards instead of plain disclosure-triangle text. Flat colors, no gradients.
|
|
* ---------------------------------------------------------------------- */
|
|
.emcp-sb-disclosure { margin: 16px 0; border: 1px solid #dcdce1; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
|
|
.emcp-sb-disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 15px 18px; font-size: 15px; font-weight: 600; color: #1d2327; background: #f6f7f9; transition: background .15s ease, color .15s ease; }
|
|
.emcp-sb-disclosure > summary::-webkit-details-marker { display: none; }
|
|
.emcp-sb-disclosure > summary::after { content: "\f347"; font-family: dashicons; margin-left: auto; font-size: 18px; line-height: 1; color: #787c82; transition: transform .15s ease; }
|
|
.emcp-sb-disclosure[open] > summary::after { transform: rotate(180deg); }
|
|
.emcp-sb-disclosure > summary:hover { background: #eef0f3; }
|
|
.emcp-sb-disclosure > summary:focus-visible { outline: 2px solid #2271b1; outline-offset: -2px; }
|
|
.emcp-sb-disclosure > summary .dashicons { font-size: 20px; width: 20px; height: 20px; color: #50575e; flex: 0 0 auto; }
|
|
.emcp-sb-disclosure > *:not(summary) { padding: 4px 18px 16px; }
|
|
|
|
/* Cloud Library — accent variant (the cross-site highlight). */
|
|
.emcp-sb-disclosure--cloud { border-color: #cbb6ef; }
|
|
.emcp-sb-disclosure--cloud > summary { background: #f4eefc; color: #4a1f8f; }
|
|
.emcp-sb-disclosure--cloud > summary:hover { background: #ece2fb; }
|
|
.emcp-sb-disclosure--cloud > summary .dashicons-cloud { color: #6a11cb; }
|
|
.emcp-sb-disclosure--cloud > summary::after { color: #6a11cb; }
|
|
.emcp-sb-disclosure__badge { margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #6a11cb; background: #fff; border: 1px solid #cbb6ef; border-radius: 999px; padding: 2px 9px; }
|