mirror of
https://github.com/Heretek-AI/heretek-control-core.git
synced 2026-10-12 02:03:55 +00:00
John SmithandClaude
024e736dd9
A wholesale reset on every form inside any EMCP admin page so no ancestor can stretch it past its content height: min-height: 0 !important, height: auto !important, display: block. The AI Chat settings page wrap-only rule from #3 was necessary but not sufficient — the stretch came from an inherited rule (wp-admin/css/common.css in WP 7.1 uses form { display:flex; flex-direction:column } combined with the shell's min-height: calc(100vh - 32px), which resolved the inline form to ~1700 px on a tall page even with the wrap flush. This scoped override does not affect non-admin pages (the selector is gated by .elementor-mcp-admin) and is intentionally !important so it defeats an inherited core style with the same specificity instead of needing deeper !important chains for every ancestor. Co-Authored-By: Claude <[email protected]>
5462 lines
156 KiB
CSS
5462 lines
156 KiB
CSS
/**
|
|
* MCP Tools for Elementor — Admin Settings Styles
|
|
*
|
|
* @package Elementor_MCP
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* =========================================================================
|
|
* Fonts — Cinzel & Geist (self-hosted, SIL OFL). Cinzel provides the
|
|
* gothic-tech / Mechanicus heading aesthetic from Heretek AI; Geist and the
|
|
* WP system stack are used for body copy and dense UI controls.
|
|
* ========================================================================= */
|
|
|
|
@font-face {
|
|
font-family: "Cinzel";
|
|
src: url("../fonts/Cinzel-Bold.woff2") format("woff2");
|
|
font-weight: 600 800;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@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 — Heretek AI (Blood & Steel Theme)
|
|
* ========================================================================= */
|
|
|
|
:root,
|
|
body.emcp-admin-page,
|
|
body.emcp-theme-dark,
|
|
body:has(.elementor-mcp-admin),
|
|
.elementor-mcp-admin {
|
|
--mcp-font-heading: "Cinzel", "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
--mcp-primary: #dc2626;
|
|
--mcp-primary-hover: #b91c1c;
|
|
--mcp-primary-light: rgba(220, 38, 38, 0.14);
|
|
--mcp-primary-glow: rgba(220, 38, 38, 0.45);
|
|
--mcp-success: #10b981;
|
|
--mcp-success-light: rgba(16, 185, 129, 0.14);
|
|
--mcp-danger: #ef4444;
|
|
--mcp-danger-light: rgba(239, 68, 68, 0.14);
|
|
--mcp-warning: #f59e0b;
|
|
--mcp-warning-light: rgba(245, 158, 11, 0.14);
|
|
--mcp-pro: #dc2626;
|
|
--mcp-pro-light: rgba(220, 38, 38, 0.18);
|
|
--mcp-gray-50: #0a0a0d;
|
|
--mcp-gray-100: #111115;
|
|
--mcp-gray-200: #1f1f27;
|
|
--mcp-gray-300: #2c2c38;
|
|
--mcp-gray-400: #6b6b7a;
|
|
--mcp-gray-500: #9898a6;
|
|
--mcp-gray-600: #c4c4cf;
|
|
--mcp-gray-700: #dedee6;
|
|
--mcp-gray-800: #f1f1f5;
|
|
--mcp-gray-900: #ffffff;
|
|
--mcp-white: #111116;
|
|
--mcp-radius: 8px;
|
|
--mcp-radius-sm: 4px;
|
|
--mcp-radius-lg: 12px;
|
|
--mcp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
|
|
--mcp-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 10px rgba(220, 38, 38, 0.08);
|
|
--mcp-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 18px rgba(220, 38, 38, 0.15);
|
|
--mcp-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.9), 0 0 28px rgba(220, 38, 38, 0.22);
|
|
--mcp-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Blood & Steel Typography — High Contrast Headings & Labels
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin h1,
|
|
.elementor-mcp-admin h2,
|
|
.elementor-mcp-admin h3,
|
|
.elementor-mcp-admin h4,
|
|
.elementor-mcp-admin h5,
|
|
.elementor-mcp-admin h6,
|
|
body.emcp-admin-page h1,
|
|
body.emcp-admin-page h2,
|
|
body.emcp-admin-page h3,
|
|
body.emcp-admin-page h4,
|
|
body.emcp-admin-page h5,
|
|
body.emcp-admin-page h6,
|
|
body:has(.elementor-mcp-admin) h1,
|
|
body:has(.elementor-mcp-admin) h2,
|
|
body:has(.elementor-mcp-admin) h3,
|
|
body:has(.elementor-mcp-admin) h4,
|
|
body:has(.elementor-mcp-admin) h5,
|
|
body:has(.elementor-mcp-admin) h6 {
|
|
font-family: var(--mcp-font-heading);
|
|
letter-spacing: -0.01em;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.elementor-mcp-admin h1,
|
|
body.emcp-admin-page h1,
|
|
body:has(.elementor-mcp-admin) h1 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.elementor-mcp-admin h2,
|
|
body.emcp-admin-page h2,
|
|
body:has(.elementor-mcp-admin) h2 {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.elementor-mcp-admin h3,
|
|
body.emcp-admin-page h3,
|
|
body:has(.elementor-mcp-admin) h3 {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #f1f1f5 !important;
|
|
}
|
|
|
|
.elementor-mcp-admin h4,
|
|
body.emcp-admin-page h4,
|
|
body:has(.elementor-mcp-admin) h4 {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #e4e4e7 !important;
|
|
}
|
|
|
|
/* Descriptions, Paragraphs & Labels */
|
|
.elementor-mcp-admin p.description,
|
|
.elementor-mcp-admin .description,
|
|
.elementor-mcp-admin span.description,
|
|
body.emcp-admin-page p.description,
|
|
body.emcp-admin-page .description,
|
|
body:has(.elementor-mcp-admin) p.description,
|
|
body:has(.elementor-mcp-admin) .description {
|
|
color: #a1a1aa !important;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.elementor-mcp-admin label,
|
|
body.emcp-admin-page label,
|
|
body:has(.elementor-mcp-admin) label {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Inline code chips */
|
|
.elementor-mcp-admin code,
|
|
.elementor-mcp-admin kbd,
|
|
body.emcp-admin-page code,
|
|
body.emcp-admin-page kbd,
|
|
body:has(.elementor-mcp-admin) code,
|
|
body:has(.elementor-mcp-admin) kbd {
|
|
background: #050507 !important;
|
|
color: #f1f1f5 !important;
|
|
border: 1px solid var(--mcp-gray-200) !important;
|
|
border-radius: 4px !important;
|
|
padding: 2px 6px !important;
|
|
font-size: 12px !important;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Page Layout & Shell (Heretek Obsidian Void Canvas)
|
|
* ========================================================================= */
|
|
|
|
html:has(.elementor-mcp-admin),
|
|
body.emcp-admin-page,
|
|
body.emcp-theme-dark,
|
|
body:has(.elementor-mcp-admin) {
|
|
background: #09090b !important;
|
|
color: #f1f1f5 !important;
|
|
overflow-x: hidden !important;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
body.emcp-admin-page #wpwrap,
|
|
body.emcp-admin-page #wpcontent,
|
|
body.emcp-admin-page #wpbody,
|
|
body.emcp-admin-page #wpbody-content,
|
|
body:has(.elementor-mcp-admin) #wpwrap,
|
|
body:has(.elementor-mcp-admin) #wpcontent,
|
|
body:has(.elementor-mcp-admin) #wpbody,
|
|
body:has(.elementor-mcp-admin) #wpbody-content {
|
|
background: #09090b !important;
|
|
color: #f1f1f5 !important;
|
|
overflow-x: clip !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body.emcp-admin-page #wpbody-content,
|
|
body:has(.elementor-mcp-admin) #wpbody-content {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 40px !important;
|
|
float: none !important;
|
|
width: auto !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Reset WordPress core .wrap so EMCP docks flush to #wpadminbar and viewport */
|
|
body.emcp-admin-page .wrap.elementor-mcp-admin,
|
|
body.emcp-theme-dark .wrap.elementor-mcp-admin,
|
|
body:has(.elementor-mcp-admin) .wrap.elementor-mcp-admin,
|
|
.wrap.elementor-mcp-admin,
|
|
.elementor-mcp-admin {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
background: #09090b !important;
|
|
min-height: calc(100vh - 32px);
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
overflow-x: clip !important;
|
|
color: var(--mcp-gray-800);
|
|
}
|
|
|
|
.elementor-mcp-admin hr.wp-header-end {
|
|
display: none !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Heretek Scrollbar - Dark Steel Track & Blood Thumb */
|
|
.elementor-mcp-admin ::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
.elementor-mcp-admin ::-webkit-scrollbar-track {
|
|
background: #0a0a0d;
|
|
border-left: 1px solid #1f1f27;
|
|
}
|
|
.elementor-mcp-admin ::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 50%, #7f1d1d 100%);
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(220, 38, 38, 0.35);
|
|
}
|
|
.elementor-mcp-admin ::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 50%, #b91c1c 100%);
|
|
}
|
|
|
|
/* Heretek Graphical Effects — Blood & Steel */
|
|
.elementor-mcp-admin .machine-icon {
|
|
filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.6));
|
|
transition: filter 0.3s ease;
|
|
}
|
|
.elementor-mcp-admin .machine-icon:hover {
|
|
filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.9));
|
|
}
|
|
|
|
.elementor-mcp-admin .blood-border {
|
|
border: 1px solid transparent;
|
|
background:
|
|
linear-gradient(var(--mcp-white), var(--mcp-white)) padding-box,
|
|
linear-gradient(135deg, #991b1b 0%, #450a0a 25%, #dc2626 50%, #450a0a 75%, #991b1b 100%) border-box;
|
|
}
|
|
|
|
.elementor-mcp-admin .corruption-glow {
|
|
box-shadow:
|
|
0 0 16px rgba(220, 38, 38, 0.25),
|
|
0 0 32px rgba(185, 28, 28, 0.15),
|
|
inset 0 0 16px rgba(220, 38, 38, 0.08);
|
|
}
|
|
|
|
@keyframes corrupted-pulse {
|
|
0%, 100% {
|
|
box-shadow: 0 0 10px rgba(220, 38, 38, 0.3), 0 0 20px rgba(185, 28, 28, 0.15);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 18px rgba(220, 38, 38, 0.55), 0 0 32px rgba(185, 28, 28, 0.25);
|
|
}
|
|
}
|
|
|
|
.elementor-mcp-admin .corrupted-pulse {
|
|
animation: corrupted-pulse 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
.elementor-mcp-admin .circuit-pulse {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.elementor-mcp-admin .circuit-pulse::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, transparent 0%, rgba(220, 38, 38, 0.25) 50%, transparent 100%);
|
|
animation: circuit-flow 2.5s linear infinite;
|
|
}
|
|
@keyframes circuit-flow {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.elementor-mcp-admin .scan-lines {
|
|
position: relative;
|
|
}
|
|
.elementor-mcp-admin .scan-lines::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.25) 2px, rgba(0, 0, 0, 0.25) 4px);
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.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 0 20px 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
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: 600;
|
|
color: var(--mcp-gray-500);
|
|
background: transparent;
|
|
transition: all var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-admin .nav-tab:hover {
|
|
color: #ffffff;
|
|
background: rgba(220, 38, 38, 0.08);
|
|
}
|
|
|
|
.elementor-mcp-admin .nav-tab-active,
|
|
.elementor-mcp-admin .nav-tab-active:hover,
|
|
.elementor-mcp-admin .nav-tab-active:focus {
|
|
color: #ffffff;
|
|
border-bottom-color: var(--mcp-primary);
|
|
background: rgba(220, 38, 38, 0.14);
|
|
text-shadow: 0 0 8px rgba(220, 38, 38, 0.5);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Tab Content
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin .tab-content {
|
|
margin: 0 24px 40px 24px;
|
|
padding: 24px;
|
|
background: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-lg);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* 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;
|
|
}
|
|
|
|
/* "Needs X" — the tool cannot be switched on because software it depends on is
|
|
missing. A disabled toggle looks the same as one the admin turned off, and
|
|
users read the second case as broken or not-in-my-plan, so the card names the
|
|
dependency instead. Deliberately not red: nothing is wrong, something is
|
|
simply absent. Sentence case, like the Elementor Pro badge, so it reads as a
|
|
dependency note rather than a plan tier. */
|
|
.elementor-mcp-badge--requires {
|
|
background: #f3f4f6;
|
|
color: #4b5563;
|
|
border: 1px solid #d1d5db;
|
|
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: #050507 !important;
|
|
color: #f1f1f5 !important;
|
|
border-top: 1px solid var(--mcp-gray-200);
|
|
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: #050507 !important;
|
|
color: #f1f1f5 !important;
|
|
border: 1px solid var(--mcp-gray-200);
|
|
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) !important;
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
background: var(--mcp-white) !important;
|
|
padding: 16px 20px;
|
|
margin: 0 0 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
transition: all var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-low-mode-card:has(input[type="checkbox"]:checked) {
|
|
border-color: var(--mcp-primary) !important;
|
|
background: rgba(220, 38, 38, 0.1) !important;
|
|
}
|
|
|
|
.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: 700 !important;
|
|
font-size: 15px !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.elementor-mcp-low-mode-desc {
|
|
font-size: 13px !important;
|
|
line-height: 1.55 !important;
|
|
color: #a1a1aa !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* 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: var(--mcp-white);
|
|
border-radius: 999px;
|
|
font-size: 13px;
|
|
color: var(--mcp-gray-800);
|
|
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);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.elementor-mcp-pro-filter.is-active {
|
|
background: var(--mcp-primary);
|
|
border-color: var(--mcp-primary);
|
|
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: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: 999px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
color: var(--mcp-gray-800);
|
|
}
|
|
|
|
.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: var(--mcp-white);
|
|
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-800);
|
|
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: var(--mcp-white);
|
|
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: 0 !important;
|
|
}
|
|
|
|
.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: var(--mcp-white);
|
|
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: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: var(--mcp-radius-md, 8px);
|
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
|
|
width: 460px;
|
|
max-width: calc(100vw - 40px);
|
|
padding: 24px;
|
|
color: var(--mcp-gray-800);
|
|
}
|
|
|
|
.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: var(--mcp-white);
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: border-color .15s, box-shadow .15s;
|
|
}
|
|
.elementor-mcp-client-card:hover { border-color: var(--mcp-primary); }
|
|
.elementor-mcp-client-card.is-selected {
|
|
border-color: var(--mcp-primary);
|
|
box-shadow: 0 0 0 1px var(--mcp-primary) inset;
|
|
}
|
|
.elementor-mcp-client-card .dashicons { font-size: 28px; width: 28px; height: 28px; color: var(--mcp-gray-500); }
|
|
.elementor-mcp-client-card.is-selected .dashicons { color: var(--mcp-primary); }
|
|
.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: #050507 !important;
|
|
color: #f1f1f5 !important;
|
|
border: 1px solid var(--mcp-gray-200) !important;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
|
|
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: #0d0d11; border-top: none; border-bottom: 1px solid rgba(220, 38, 38, 0.35); padding: 10px 24px; margin: 0; width: 100%; box-sizing: border-box; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
|
|
.emcp-appbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px 0; width: 40%;}
|
|
.emcp-appbar-logo { width: 34px; height: 34px; border-radius: 6px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.6)); transition: filter 0.3s ease; }
|
|
.emcp-appbar-logo:hover { filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.95)); }
|
|
.emcp-appbar-title { font-family: var(--mcp-font-heading); font-size: 19px; font-weight: 700; color: var(--mcp-gray-800); letter-spacing: 0.02em; }
|
|
.emcp-appbar-version { font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%); border: 1px solid rgba(220, 38, 38, 0.5); border-radius: 10px; padding: 2px 8px; box-shadow: 0 0 8px rgba(220, 38, 38, 0.35); }
|
|
.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; height: 42px; padding: 0 18px; box-sizing: border-box; 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); text-decoration: none; cursor: pointer; transition: all 0.2s; }
|
|
.emcp-help-toggle:hover { border-color: var(--mcp-primary); color: #fff; background: rgba(220, 38, 38, 0.1); box-shadow: 0 0 10px rgba(220, 38, 38, 0.2); }
|
|
.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); }
|
|
.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: #131318; border: 1px solid var(--mcp-gray-200); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.6); 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); 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); }
|
|
.emcp-help-dropdown a:hover .dashicons { color: var(--mcp-primary); }
|
|
|
|
/* Notifications bell + dropdown (Cloud-fed) — mirrors .emcp-help-menu. */
|
|
.emcp-notif { position: relative; }
|
|
.emcp-notif-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; box-sizing: border-box; background: var(--mcp-white); border: 1px solid var(--mcp-gray-200); border-radius: 4px; cursor: pointer; transition: all 0.2s; }
|
|
.emcp-notif-toggle:hover { border-color: var(--mcp-primary); background: rgba(220, 38, 38, 0.1); box-shadow: 0 0 10px rgba(220, 38, 38, 0.2); }
|
|
.emcp-notif-toggle .dashicons { font-size: 18px; width: 18px; height: 18px; color: var(--mcp-gray-800); }
|
|
.emcp-notif-toggle:hover .dashicons { color: var(--mcp-primary); }
|
|
.emcp-notif-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--mcp-danger); color: #fff; border-radius: 9px; font-size: 10px; line-height: 1; font-weight: 700; box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
|
|
.emcp-notif-badge.is-empty { display: none; }
|
|
/* Notifications slide-in drawer (right side) + overlay. */
|
|
.emcp-notif-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; z-index: 100000; }
|
|
.emcp-notif.is-open .emcp-notif-overlay { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
|
|
.emcp-notif-drawer { display: none; position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 90vw; flex-direction: column; background: #131318; border-left: 1px solid var(--mcp-gray-200); box-shadow: -8px 0 32px rgba(0,0,0,.6); transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .25s ease, opacity .25s ease, visibility .25s ease; z-index: 100001; }
|
|
.emcp-notif.is-open .emcp-notif-drawer { display: flex; transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; }
|
|
.emcp-notif-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; font-size: 15px; font-weight: 700; color: var(--mcp-gray-800); border-bottom: 1px solid var(--mcp-gray-200); }
|
|
.emcp-notif-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: none; border: none; border-radius: 4px; color: var(--mcp-gray-500); cursor: pointer; }
|
|
.emcp-notif-close:hover { background: var(--mcp-gray-100); color: var(--mcp-primary); }
|
|
.emcp-notif-list { flex: 1; overflow-y: auto; }
|
|
.emcp-notif-empty { padding: 24px 14px; text-align: center; font-size: 13px; color: var(--mcp-gray-500); }
|
|
.emcp-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--mcp-gray-100); border-left: 3px solid transparent; }
|
|
.emcp-notif-item:last-child { border-bottom: none; }
|
|
.emcp-notif-item.is-unread { background: var(--mcp-primary-light); border-left-color: var(--mcp-primary); }
|
|
.emcp-notif-item-icon { flex: 0 0 auto; margin-top: 2px; font-size: 16px; width: 16px; height: 16px; color: var(--mcp-primary); }
|
|
.emcp-notif-item-body { min-width: 0; flex: 1; }
|
|
.emcp-notif-item-body strong { display: block; font-size: 13px; color: var(--mcp-gray-800); }
|
|
.emcp-notif-item-body p { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: var(--mcp-gray-600); }
|
|
.emcp-notif-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
|
|
.emcp-notif-item-time { font-size: 11px; color: var(--mcp-gray-500); }
|
|
.emcp-notif-item-cta { font-size: 11px; font-weight: 700; color: var(--mcp-primary); text-decoration: none; }
|
|
.emcp-notif-item-cta:hover { text-decoration: underline; }
|
|
.emcp-notif-item--warning .emcp-notif-item-icon { color: #a15c00; }
|
|
.emcp-notif-item--critical .emcp-notif-item-icon,
|
|
.emcp-notif-item--error .emcp-notif-item-icon { color: var(--mcp-danger); }
|
|
.emcp-notif-item--success .emcp-notif-item-icon { color: #22c55e; }
|
|
|
|
/* Cloud / avatar button. */
|
|
.emcp-cloud-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; box-sizing: border-box; background: var(--mcp-white); border: 1px solid var(--mcp-gray-200); border-radius: 4px; text-decoration: none; transition: all 0.2s; }
|
|
.emcp-cloud-btn:hover { border-color: var(--mcp-primary); background: rgba(220, 38, 38, 0.1); box-shadow: 0 0 10px rgba(220, 38, 38, 0.2); }
|
|
.emcp-cloud-icon { display: block; font-size: 20px; width: 20px; height: 20px; color: var(--mcp-gray-800); }
|
|
.emcp-cloud-btn:hover .emcp-cloud-icon { color: var(--mcp-primary); }
|
|
.emcp-cloud-dot { position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--mcp-gray-400); border: 2px solid var(--mcp-white); }
|
|
.emcp-cloud-dot.is-connected { background: #22c55e; }
|
|
|
|
.emcp-appbar-upgrade { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--mcp-primary); color: #fff; border: 1px solid var(--mcp-primary); border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 0 10px rgba(220, 38, 38, 0.35); transition: all 0.2s; }
|
|
.emcp-appbar-upgrade:hover { background: var(--mcp-primary-hover); border-color: var(--mcp-primary-hover); color: #fff; box-shadow: 0 0 16px rgba(220, 38, 38, 0.6); }
|
|
.emcp-appbar-upgrade .dashicons { font-size: 15px; width: 15px; height: 15px; }
|
|
|
|
.emcp-appnav { display: flex; align-items: stretch; gap: 0px; background: #0c0c10; border-bottom: 1px solid var(--mcp-gray-200); padding: 0 24px; overflow-x: auto; overflow-y: hidden; margin: 0; box-sizing: border-box; }
|
|
.emcp-appnav-item { display: inline-flex; align-items: center; gap: 7px; padding: 14px 16px; margin-bottom: -1px; white-space: nowrap; color: var(--mcp-gray-500); 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); transition: all 0.2s; }
|
|
.emcp-appnav-item:hover { color: #fff; background: rgba(220, 38, 38, 0.08); }
|
|
.emcp-appnav-item.is-active { color: #fff; border-bottom-color: var(--mcp-primary); background: rgba(220, 38, 38, 0.12); text-shadow: 0 0 8px rgba(220, 38, 38, 0.5); }
|
|
.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); text-decoration: none; transition: all 0.2s; }
|
|
.emcp-appbar-changelog:hover, .emcp-appbar-changelog.is-active { border-color: var(--mcp-primary); color: #fff; background: rgba(220, 38, 38, 0.1); box-shadow: 0 0 10px rgba(220, 38, 38, 0.2); }
|
|
.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; }
|
|
|
|
/* Themed Inputs, Selects & Textareas for Heretek Dark Metal */
|
|
.elementor-mcp-admin input[type="text"],
|
|
.elementor-mcp-admin input[type="password"],
|
|
.elementor-mcp-admin input[type="search"],
|
|
.elementor-mcp-admin input[type="url"],
|
|
.elementor-mcp-admin input[type="number"],
|
|
.elementor-mcp-admin select,
|
|
.elementor-mcp-admin textarea {
|
|
background: #14141a !important;
|
|
color: #f4f4f5 !important;
|
|
border: 1px solid var(--mcp-gray-200) !important;
|
|
border-radius: var(--mcp-radius-sm);
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
transition: border-color var(--mcp-transition), box-shadow var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-admin input[type="text"]:focus,
|
|
.elementor-mcp-admin input[type="password"]:focus,
|
|
.elementor-mcp-admin input[type="search"]:focus,
|
|
.elementor-mcp-admin input[type="url"]:focus,
|
|
.elementor-mcp-admin input[type="number"]:focus,
|
|
.elementor-mcp-admin select:focus,
|
|
.elementor-mcp-admin textarea:focus {
|
|
border-color: var(--mcp-primary) !important;
|
|
box-shadow: 0 0 0 1px var(--mcp-primary), 0 0 10px rgba(220, 38, 38, 0.35) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* 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; }
|
|
.emcp-appnav-wrap { position: relative; margin: 0 0 24px 0; width: 100%; box-sizing: border-box; }
|
|
.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;
|
|
margin: 0 24px 40px 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.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 {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Help links grid: clean responsive 4-column cards across the full-width section. */
|
|
.emcp-dash-section--help .emcp-dash-help {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
/* 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 var(--mcp-gray-200);
|
|
border-radius: 4px;
|
|
background: var(--mcp-white);
|
|
color: var(--mcp-gray-800);
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
.emcp-history__filters li a:hover {
|
|
border-color: var(--mcp-primary);
|
|
color: #fff;
|
|
background: rgba(220, 38, 38, 0.1);
|
|
}
|
|
.emcp-history__filters li.is-active a {
|
|
background: var(--mcp-primary);
|
|
border-color: var(--mcp-primary);
|
|
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: 1px solid var(--mcp-gray-200);
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
background: var(--mcp-white);
|
|
transition: border-color .15s ease, box-shadow .15s ease;
|
|
}
|
|
.emcp-auth-card:hover { border-color: var(--mcp-primary); }
|
|
.emcp-auth-card:has(input:checked) {
|
|
border-color: var(--mcp-primary);
|
|
box-shadow: 0 0 0 1px var(--mcp-primary) inset, 0 0 12px rgba(220, 38, 38, 0.25);
|
|
}
|
|
.emcp-auth-card.is-disabled { opacity: .55; cursor: not-allowed; }
|
|
.emcp-auth-card.is-disabled:hover { border-color: var(--mcp-gray-200); }
|
|
.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: #ffffff; margin-bottom: 6px;
|
|
}
|
|
.emcp-auth-card__desc { display: block; font-size: 13px; color: var(--mcp-gray-500); line-height: 1.5; }
|
|
.emcp-auth-card__note { display: block; margin-top: 8px; font-size: 12.5px; color: var(--mcp-gray-400); }
|
|
.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); }
|
|
|
|
/* ── Explore your toolkit (full width) ─────────────────────────────────── */
|
|
.emcp-dash-section--toolkit {
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
|
|
/* -------------------------------------------------------------------------
|
|
* 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 var(--mcp-gray-200); border-radius: 10px; background: var(--mcp-white); overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
|
|
.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: var(--mcp-gray-800); background: #16161d; 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: var(--mcp-gray-500); transition: transform .15s ease; }
|
|
.emcp-sb-disclosure[open] > summary::after { transform: rotate(180deg); }
|
|
.emcp-sb-disclosure > summary:hover { background: #1c1c25; color: #fff; }
|
|
.emcp-sb-disclosure > summary:focus-visible { outline: 2px solid var(--mcp-primary); outline-offset: -2px; }
|
|
.emcp-sb-disclosure > summary .dashicons { font-size: 20px; width: 20px; height: 20px; color: var(--mcp-gray-500); flex: 0 0 auto; }
|
|
.emcp-sb-disclosure > *:not(summary) { padding: 4px 18px 16px; }
|
|
|
|
/* Cloud Library — accent variant */
|
|
.emcp-sb-disclosure--cloud { border-color: rgba(220, 38, 38, 0.4); }
|
|
.emcp-sb-disclosure--cloud > summary { background: rgba(220, 38, 38, 0.12); color: #fecaca; }
|
|
.emcp-sb-disclosure--cloud > summary:hover { background: rgba(220, 38, 38, 0.18); }
|
|
.emcp-sb-disclosure--cloud > summary .dashicons-cloud { color: var(--mcp-primary); }
|
|
.emcp-sb-disclosure--cloud > summary::after { color: var(--mcp-primary); }
|
|
.emcp-sb-disclosure__badge { margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--mcp-primary); background: rgba(220, 38, 38, 0.15); border: 1px solid rgba(220, 38, 38, 0.35); border-radius: 999px; padding: 2px 9px; }
|
|
|
|
/* "Save all to Cloud" bulk button — plugin-branded (indigo), not WP blue. */
|
|
.button.emcp-sb-save-all { background: var(--mcp-primary); border-color: var(--mcp-primary); color: var(--mcp-white); font-weight: 600; }
|
|
.button.emcp-sb-save-all:hover, .button.emcp-sb-save-all:focus { background: var(--mcp-primary-hover); border-color: var(--mcp-primary-hover); color: var(--mcp-white); }
|
|
.button.emcp-sb-save-all:disabled { opacity: .6; }
|
|
.button.emcp-sb-save-all .dashicons { margin-right: 2px; color: var(--mcp-white); }
|
|
.button.emcp-sb-save-all:hover .dashicons, .button.emcp-sb-save-all:focus .dashicons { color: var(--mcp-white); }
|
|
|
|
/* Pending-count badge on the Memory app-nav tab (project-memory proposals awaiting review). */
|
|
.emcp-appnav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #d63638; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
|
|
|
|
/* ---- the settings-saved toast -----------------------------------------------
|
|
WordPress stacks this above the page, shifting the whole screen down just as
|
|
you look at what you changed. Only this one confirmation sits bottom-right;
|
|
every other notice stays where it is, because some carry buttons or explain
|
|
page state and a corner toast is the wrong place for those. PHP renders the
|
|
whole toast, so these rules place it on the very first paint. */
|
|
.emcp-toasts {
|
|
position: fixed;
|
|
right: 24px;
|
|
bottom: 24px;
|
|
z-index: 100001; /* above the admin bar (99999) and WP's own overlays */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: min(400px, calc(100vw - 48px));
|
|
pointer-events: none; /* the gap between toasts must not eat clicks */
|
|
}
|
|
|
|
.emcp-toast {
|
|
position: relative;
|
|
pointer-events: auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 4px 4px 4px 0;
|
|
background: #fff;
|
|
border: 1px solid var(--mcp-rule, #dcdcde);
|
|
border-left-width: 4px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 28px -6px rgba(10, 10, 20, 0.22);
|
|
animation: emcpToastIn 0.22s ease-out both;
|
|
}
|
|
|
|
.emcp-toast--success { border-left-color: #00a32a; }
|
|
|
|
/* The notice keeps its own markup so links and buttons still work; only the
|
|
chrome WordPress gave it for the stacked layout is neutralised. */
|
|
.emcp-toast__notice {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
margin: 0 !important;
|
|
padding: 10px 0 10px 12px !important;
|
|
border: 0 !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.emcp-toast__notice p {
|
|
margin: 0 0 4px;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.emcp-toast__notice p:last-child { margin-bottom: 0; }
|
|
|
|
/* WordPress's own dismiss button would sit under ours. */
|
|
.emcp-toast__notice .notice-dismiss { display: none !important; }
|
|
|
|
.emcp-toast__close {
|
|
flex: 0 0 auto;
|
|
margin: 6px 6px 0 0;
|
|
padding: 0;
|
|
width: 22px;
|
|
height: 22px;
|
|
line-height: 20px;
|
|
font-size: 17px;
|
|
color: var(--mcp-ink-3, #646970);
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.emcp-toast__close:hover { color: var(--mcp-ink, #1d2327); background: rgba(10, 10, 20, 0.06); }
|
|
.emcp-toast__close:focus-visible { outline: 2px solid #2271b1; outline-offset: 1px; }
|
|
|
|
.emcp-toast.is-leaving {
|
|
animation: emcpToastOut 0.24s ease-in both;
|
|
}
|
|
|
|
@keyframes emcpToastIn {
|
|
from { opacity: 0; transform: translateY(10px) scale(0.98); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
@keyframes emcpToastOut {
|
|
from { opacity: 1; transform: none; }
|
|
to { opacity: 0; transform: translateY(6px) scale(0.98); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.emcp-toast,
|
|
.emcp-toast.is-leaving { animation: none; }
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.emcp-toasts { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------
|
|
* Pagination (EMCP_Tools_Admin_Pager)
|
|
*
|
|
* Shared by the Marketplace grid and the three Sandbox artifact tables. The
|
|
* disabled Prev/Next placeholders keep the control the same width at either
|
|
* end of the run, so it does not shift as you page through.
|
|
* ---------------------------------------------------------------------- */
|
|
|
|
.emcp-pager {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
margin: 24px 0 4px;
|
|
}
|
|
|
|
.emcp-pager__num {
|
|
min-width: 34px;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.emcp-pager__gap {
|
|
padding: 0 4px;
|
|
color: #787c82;
|
|
}
|
|
|
|
.emcp-pager .button.disabled {
|
|
pointer-events: none;
|
|
opacity: .5;
|
|
}
|
|
|
|
/* The "Showing 1-20 of 57" line above a paged table. */
|
|
.emcp-pager-count {
|
|
margin: 12px 0 4px;
|
|
font-size: 12px;
|
|
color: #787c82;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------
|
|
* OAuth client registrations (Connection tab > Connected apps)
|
|
*
|
|
* The callback address is the field people come to this table to compare
|
|
* against a refused authorization, so it gets its own line under the name
|
|
* rather than a title attribute.
|
|
* ---------------------------------------------------------------------- */
|
|
|
|
.emcp-oauth-clients__uri {
|
|
display: block;
|
|
max-width: 440px;
|
|
margin-top: 4px;
|
|
padding: 2px 6px;
|
|
font-size: 11px;
|
|
color: var(--mcp-gray-400);
|
|
background: #14141a;
|
|
border: 1px solid var(--mcp-gray-200);
|
|
border-radius: 4px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.emcp-oauth-clients__actions {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.emcp-oauth-clients__actions .button {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* WordPress Admin Notices & Footer (Heretek Dark Metal)
|
|
* ========================================================================= */
|
|
|
|
body.emcp-admin-page .notice,
|
|
body.emcp-admin-page div.updated,
|
|
body.emcp-admin-page div.error,
|
|
body.emcp-theme-dark .notice,
|
|
body.emcp-theme-dark div.updated,
|
|
body.emcp-theme-dark div.error,
|
|
.elementor-mcp-admin .notice,
|
|
.elementor-mcp-admin div.updated,
|
|
.elementor-mcp-admin div.error {
|
|
background: #121217 !important;
|
|
color: #f1f1f5 !important;
|
|
border: 1px solid #1f1f27 !important;
|
|
border-left-width: 4px !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
margin: 16px 24px !important;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
body.emcp-admin-page .notice-success,
|
|
body.emcp-theme-dark .notice-success,
|
|
.elementor-mcp-admin .notice-success,
|
|
.elementor-mcp-admin div.updated {
|
|
border-left-color: #10b981 !important;
|
|
}
|
|
|
|
body.emcp-admin-page .notice-error,
|
|
body.emcp-theme-dark .notice-error,
|
|
.elementor-mcp-admin .notice-error,
|
|
.elementor-mcp-admin div.error {
|
|
border-left-color: #dc2626 !important;
|
|
}
|
|
|
|
body.emcp-admin-page .notice-warning,
|
|
body.emcp-theme-dark .notice-warning,
|
|
.elementor-mcp-admin .notice-warning {
|
|
border-left-color: #f59e0b !important;
|
|
}
|
|
|
|
body.emcp-admin-page .notice-info,
|
|
body.emcp-theme-dark .notice-info,
|
|
.elementor-mcp-admin .notice-info {
|
|
border-left-color: #dc2626 !important;
|
|
}
|
|
|
|
body.emcp-admin-page .notice p,
|
|
body.emcp-theme-dark .notice p,
|
|
.elementor-mcp-admin .notice p {
|
|
color: #f1f1f5 !important;
|
|
}
|
|
|
|
/* Footer obsidian dark theme */
|
|
body.emcp-admin-page #wpfooter,
|
|
body.emcp-theme-dark #wpfooter,
|
|
body:has(.elementor-mcp-admin) #wpfooter {
|
|
background: #09090b !important;
|
|
color: #6b6b7a !important;
|
|
border-top: 1px solid #1f1f27 !important;
|
|
}
|
|
|
|
body.emcp-admin-page #wpfooter a,
|
|
body.emcp-theme-dark #wpfooter a,
|
|
body:has(.elementor-mcp-admin) #wpfooter a {
|
|
color: #9898a6 !important;
|
|
}
|
|
|
|
body.emcp-admin-page #wpfooter a:hover,
|
|
body.emcp-theme-dark #wpfooter a:hover,
|
|
body:has(.elementor-mcp-admin) #wpfooter a:hover {
|
|
color: #dc2626 !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* Form Tables & Sub-screens (AI Chat, Settings, High Contrast)
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin .form-table {
|
|
color: #f1f1f5 !important;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.elementor-mcp-admin .form-table th {
|
|
color: #ffffff !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
padding: 16px 12px 16px 0;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.elementor-mcp-admin .form-table th label {
|
|
color: #ffffff !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.elementor-mcp-admin .form-table td {
|
|
color: #dedee6 !important;
|
|
padding: 16px 0;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.elementor-mcp-admin .form-table .description,
|
|
.elementor-mcp-admin .form-table p.description,
|
|
.elementor-mcp-admin p.description {
|
|
color: #a1a1aa !important;
|
|
font-size: 13px !important;
|
|
line-height: 1.55 !important;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.elementor-mcp-admin .form-table input[type="text"],
|
|
.elementor-mcp-admin .form-table input[type="url"],
|
|
.elementor-mcp-admin .form-table input[type="password"],
|
|
.elementor-mcp-admin .form-table input[type="number"],
|
|
.elementor-mcp-admin .form-table select,
|
|
.elementor-mcp-admin .form-table textarea {
|
|
background: #14141a !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid var(--mcp-gray-200) !important;
|
|
border-radius: 6px !important;
|
|
padding: 8px 12px !important;
|
|
font-size: 13px !important;
|
|
box-shadow: none !important;
|
|
transition: border-color var(--mcp-transition), box-shadow var(--mcp-transition);
|
|
}
|
|
|
|
.elementor-mcp-admin .form-table input:focus,
|
|
.elementor-mcp-admin .form-table select:focus,
|
|
.elementor-mcp-admin .form-table textarea:focus {
|
|
border-color: var(--mcp-primary) !important;
|
|
box-shadow: 0 0 0 1px var(--mcp-primary) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
.elementor-mcp-admin .form-table select option {
|
|
background: #14141a;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* AI Chat sub-view high contrast polish */
|
|
.elementor-mcp-ai-chat h2 {
|
|
color: #ffffff !important;
|
|
font-family: var(--mcp-font-heading);
|
|
font-size: 20px;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.elementor-mcp-ai-chat p.description {
|
|
color: #a1a1aa !important;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
max-width: 720px;
|
|
}
|
|
|
|
/* The AI Chat settings page has only one short card. Without this rule the
|
|
* stub .tab-content (margin 24px / padding 24px) makes the small form look
|
|
* stranded in a tall card on a normal viewport. Make the page flush to the
|
|
* shell and present the form like an inline admin notice so the controls sit
|
|
* high in the viewport at every zoom level. */
|
|
.elementor-mcp-ai-chat {
|
|
background: transparent !important;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* The tiny hero line under the h2 (just one <p class="description">) gets a
|
|
* bit too tight when the .tab-content padding is gone. */
|
|
.elementor-mcp-ai-chat > h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.elementor-mcp-ai-chat > p.description {
|
|
margin-top: 4px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
/* The form has its own max-width inline; tighten its top spacing too. */
|
|
.elementor-mcp-ai-chat > form {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Belt-and-braces reset: stop any ancestor from stretching the form, no
|
|
* matter which stylesheet is doing the stretch. WP 7.1 sometimes inherits a
|
|
* form { display: flex; flex-direction: column; } from a core admin stylesheet
|
|
* which combined with the parent's min-height: calc(100vh - 32px) makes the
|
|
* inline form resolve to ~1700px on a tall page. Anchor the form to its
|
|
* content height (min-height:0) and prefer flex-start alignment in
|
|
* column-stretching ancestors, and ask the wrap to behave like inline-flow
|
|
* rather than a flex item when it ends up as one. */
|
|
.elementor-mcp-admin form,
|
|
.elementor-mcp-admin .elementor-mcp-ai-chat > form {
|
|
min-height: 0 !important;
|
|
height: auto !important;
|
|
max-height: none;
|
|
display: block;
|
|
}
|
|
|
|
/* Some WP core admin stylesheets (notably common.css in 6.9/7.x) apply
|
|
* `form { min-height: 100vh }`-style rules for accessibility on long pages.
|
|
* The !important above neutralizes that on every form inside an EMCP admin
|
|
* page, not only the AI Chat settings form, because the same admin shell
|
|
* wrapping it is the source of the stretch. */
|
|
|
|
/* =========================================================================
|
|
* WordPress Postboxes — Dark Metal Cards
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin .postbox,
|
|
body.emcp-admin-page .postbox,
|
|
body:has(.elementor-mcp-admin) .postbox {
|
|
background: var(--mcp-white) !important;
|
|
border: 1px solid var(--mcp-gray-200) !important;
|
|
border-radius: 8px !important;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
|
|
color: #dedee6 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.elementor-mcp-admin .postbox-header,
|
|
body.emcp-admin-page .postbox-header,
|
|
body:has(.elementor-mcp-admin) .postbox-header {
|
|
background: #16161d !important;
|
|
border-bottom: 1px solid var(--mcp-gray-200) !important;
|
|
border-radius: 8px 8px 0 0 !important;
|
|
padding: 12px 18px !important;
|
|
}
|
|
|
|
.elementor-mcp-admin .postbox-header h2,
|
|
.elementor-mcp-admin .postbox-header h3,
|
|
.elementor-mcp-admin .postbox-header .hndle,
|
|
body.emcp-admin-page .postbox-header h2,
|
|
body.emcp-admin-page .postbox-header h3,
|
|
body.emcp-admin-page .postbox-header .hndle,
|
|
body:has(.elementor-mcp-admin) .postbox-header h2,
|
|
body:has(.elementor-mcp-admin) .postbox-header h3,
|
|
body:has(.elementor-mcp-admin) .postbox-header .hndle {
|
|
color: #ffffff !important;
|
|
font-family: var(--mcp-font-heading) !important;
|
|
font-weight: 700 !important;
|
|
font-size: 15px !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.elementor-mcp-admin .postbox .inside,
|
|
body.emcp-admin-page .postbox .inside,
|
|
body:has(.elementor-mcp-admin) .postbox .inside {
|
|
padding: 18px !important;
|
|
color: #dedee6 !important;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* WordPress Tables — Dark Steel Widefat / List Tables
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin table.widefat,
|
|
.elementor-mcp-admin .wp-list-table,
|
|
body.emcp-admin-page table.widefat,
|
|
body.emcp-admin-page .wp-list-table,
|
|
body:has(.elementor-mcp-admin) table.widefat,
|
|
body:has(.elementor-mcp-admin) .wp-list-table {
|
|
background: var(--mcp-white) !important;
|
|
border: 1px solid var(--mcp-gray-200) !important;
|
|
border-radius: 8px !important;
|
|
overflow: hidden;
|
|
color: #dedee6 !important;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
|
|
}
|
|
|
|
.elementor-mcp-admin table.widefat thead th,
|
|
.elementor-mcp-admin table.widefat tfoot th,
|
|
.elementor-mcp-admin .wp-list-table thead th,
|
|
.elementor-mcp-admin .wp-list-table tfoot th,
|
|
body.emcp-admin-page table.widefat thead th,
|
|
body.emcp-admin-page table.widefat tfoot th,
|
|
body.emcp-admin-page .wp-list-table thead th,
|
|
body.emcp-admin-page .wp-list-table tfoot th,
|
|
body:has(.elementor-mcp-admin) table.widefat thead th,
|
|
body:has(.elementor-mcp-admin) table.widefat tfoot th,
|
|
body:has(.elementor-mcp-admin) .wp-list-table thead th,
|
|
body:has(.elementor-mcp-admin) .wp-list-table tfoot th {
|
|
background: #16161d !important;
|
|
color: #ffffff !important;
|
|
border-bottom: 1px solid var(--mcp-gray-200) !important;
|
|
font-weight: 700 !important;
|
|
font-size: 12px !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.05em !important;
|
|
padding: 12px 14px !important;
|
|
}
|
|
|
|
.elementor-mcp-admin table.widefat td,
|
|
.elementor-mcp-admin .wp-list-table td,
|
|
body.emcp-admin-page table.widefat td,
|
|
body.emcp-admin-page .wp-list-table td,
|
|
body:has(.elementor-mcp-admin) table.widefat td,
|
|
body:has(.elementor-mcp-admin) .wp-list-table td {
|
|
color: #dedee6 !important;
|
|
border-top: 1px solid var(--mcp-gray-200) !important;
|
|
padding: 12px 14px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.elementor-mcp-admin table.widefat.striped > tbody > :nth-child(odd),
|
|
.elementor-mcp-admin .wp-list-table.striped > tbody > :nth-child(odd),
|
|
body.emcp-admin-page table.widefat.striped > tbody > :nth-child(odd),
|
|
body.emcp-admin-page .wp-list-table.striped > tbody > :nth-child(odd),
|
|
body:has(.elementor-mcp-admin) table.widefat.striped > tbody > :nth-child(odd),
|
|
body:has(.elementor-mcp-admin) .wp-list-table.striped > tbody > :nth-child(odd) {
|
|
background: #14141a !important;
|
|
}
|
|
|
|
.elementor-mcp-admin table.widefat.striped > tbody > :nth-child(even),
|
|
.elementor-mcp-admin .wp-list-table.striped > tbody > :nth-child(even),
|
|
body.emcp-admin-page table.widefat.striped > tbody > :nth-child(even),
|
|
body.emcp-admin-page .wp-list-table.striped > tbody > :nth-child(even),
|
|
body:has(.elementor-mcp-admin) table.widefat.striped > tbody > :nth-child(even),
|
|
body:has(.elementor-mcp-admin) .wp-list-table.striped > tbody > :nth-child(even) {
|
|
background: #101015 !important;
|
|
}
|
|
|
|
.elementor-mcp-admin table.widefat tbody tr:hover,
|
|
.elementor-mcp-admin .wp-list-table tbody tr:hover,
|
|
body.emcp-admin-page table.widefat tbody tr:hover,
|
|
body:has(.elementor-mcp-admin) table.widefat tbody tr:hover {
|
|
background: rgba(220, 38, 38, 0.06) !important;
|
|
}
|
|
|
|
.elementor-mcp-admin table.widefat td strong,
|
|
body.emcp-admin-page table.widefat td strong,
|
|
body:has(.elementor-mcp-admin) table.widefat td strong {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.elementor-mcp-admin table.widefat a,
|
|
body.emcp-admin-page table.widefat a,
|
|
body:has(.elementor-mcp-admin) table.widefat a {
|
|
color: #f87171 !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.elementor-mcp-admin table.widefat a:hover,
|
|
body.emcp-admin-page table.widefat a:hover,
|
|
body:has(.elementor-mcp-admin) table.widefat a:hover {
|
|
color: #ffffff !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* =========================================================================
|
|
* WordPress Form Controls & Buttons
|
|
* ========================================================================= */
|
|
|
|
.elementor-mcp-admin input[type="text"],
|
|
.elementor-mcp-admin input[type="search"],
|
|
.elementor-mcp-admin input[type="url"],
|
|
.elementor-mcp-admin input[type="password"],
|
|
.elementor-mcp-admin input[type="number"],
|
|
.elementor-mcp-admin input[type="email"],
|
|
.elementor-mcp-admin select,
|
|
.elementor-mcp-admin textarea,
|
|
body.emcp-admin-page input[type="text"],
|
|
body.emcp-admin-page input[type="search"],
|
|
body.emcp-admin-page input[type="url"],
|
|
body.emcp-admin-page input[type="password"],
|
|
body.emcp-admin-page input[type="number"],
|
|
body.emcp-admin-page input[type="email"],
|
|
body.emcp-admin-page select,
|
|
body.emcp-admin-page textarea,
|
|
body:has(.elementor-mcp-admin) input[type="text"],
|
|
body:has(.elementor-mcp-admin) input[type="search"],
|
|
body:has(.elementor-mcp-admin) input[type="url"],
|
|
body:has(.elementor-mcp-admin) input[type="password"],
|
|
body:has(.elementor-mcp-admin) input[type="number"],
|
|
body:has(.elementor-mcp-admin) input[type="email"],
|
|
body:has(.elementor-mcp-admin) select,
|
|
body:has(.elementor-mcp-admin) textarea {
|
|
background: #14141a !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid var(--mcp-gray-200) !important;
|
|
border-radius: 6px !important;
|
|
padding: 8px 12px !important;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.elementor-mcp-admin input:focus,
|
|
.elementor-mcp-admin select:focus,
|
|
.elementor-mcp-admin textarea:focus,
|
|
body.emcp-admin-page input:focus,
|
|
body.emcp-admin-page select:focus,
|
|
body.emcp-admin-page textarea:focus,
|
|
body:has(.elementor-mcp-admin) input:focus,
|
|
body:has(.elementor-mcp-admin) select:focus,
|
|
body:has(.elementor-mcp-admin) textarea:focus {
|
|
border-color: var(--mcp-primary) !important;
|
|
box-shadow: 0 0 0 1px var(--mcp-primary), 0 0 8px rgba(220, 38, 38, 0.3) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
.elementor-mcp-admin .wp-core-ui .button,
|
|
.elementor-mcp-admin .button,
|
|
body.emcp-admin-page .wp-core-ui .button,
|
|
body.emcp-admin-page .button,
|
|
body:has(.elementor-mcp-admin) .wp-core-ui .button,
|
|
body:has(.elementor-mcp-admin) .button {
|
|
background: #16161d !important;
|
|
color: #f1f1f5 !important;
|
|
border: 1px solid var(--mcp-gray-200) !important;
|
|
border-radius: 6px !important;
|
|
font-weight: 600 !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
transition: all 0.15s ease !important;
|
|
}
|
|
|
|
.elementor-mcp-admin .wp-core-ui .button:hover,
|
|
.elementor-mcp-admin .button:hover,
|
|
body.emcp-admin-page .wp-core-ui .button:hover,
|
|
body.emcp-admin-page .button:hover,
|
|
body:has(.elementor-mcp-admin) .wp-core-ui .button:hover,
|
|
body:has(.elementor-mcp-admin) .button:hover {
|
|
background: #202028 !important;
|
|
border-color: var(--mcp-primary) !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 0 8px rgba(220, 38, 38, 0.25) !important;
|
|
}
|
|
|
|
.elementor-mcp-admin .wp-core-ui .button-primary,
|
|
.elementor-mcp-admin .button.button-primary,
|
|
body.emcp-admin-page .wp-core-ui .button-primary,
|
|
body.emcp-admin-page .button.button-primary,
|
|
body:has(.elementor-mcp-admin) .wp-core-ui .button-primary,
|
|
body:has(.elementor-mcp-admin) .button.button-primary {
|
|
background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
|
|
border-color: #ef4444 !important;
|
|
color: #ffffff !important;
|
|
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5) !important;
|
|
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4) !important;
|
|
}
|
|
|
|
.elementor-mcp-admin .wp-core-ui .button-primary:hover,
|
|
.elementor-mcp-admin .button.button-primary:hover,
|
|
body.emcp-admin-page .wp-core-ui .button-primary:hover,
|
|
body.emcp-admin-page .button.button-primary:hover,
|
|
body:has(.elementor-mcp-admin) .wp-core-ui .button-primary:hover,
|
|
body:has(.elementor-mcp-admin) .button.button-primary:hover {
|
|
background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%) !important;
|
|
border-color: #f87171 !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 0 16px rgba(220, 38, 38, 0.6) !important;
|
|
}
|