/**
* WPayme admin styling.
*
* Lives *inside* the normal WordPress admin: the WP sidebar and admin bar stay
* exactly where they are. Everything here is scoped under `.wpayme-app`, a body
* class added only on WPayme screens, so nothing can leak elsewhere.
*
* Colours are declared once as custom properties and re-declared for dark mode;
* no rule below should contain a literal colour.
*/
/* -------------------------------------------------------------------------
* Tokens
* ---------------------------------------------------------------------- */
.wpayme-app {
--wpa-bg: #f6f7f9;
--wpa-surface: #ffffff;
--wpa-surface-muted: #f9fafb;
--wpa-border: #e5e7eb;
--wpa-border-strong: #d1d5db;
--wpa-text: #111827;
--wpa-text-muted: #6b7280;
--wpa-text-faint: #9ca3af;
--wpa-accent: #4f46e5;
--wpa-accent-soft: #eef2ff;
--wpa-success: #10b981;
--wpa-success-soft: #ecfdf5;
--wpa-warn: #f59e0b;
--wpa-warn-soft: #fffbeb;
--wpa-danger: #ef4444;
--wpa-danger-soft: #fef2f2;
/* The rating card at the foot of the sidebar. */
--wpa-rate-bg: #fffbeb;
--wpa-rate-border: #fde68a;
--wpa-star: #d8dbe0;
--wpa-star-on: #f59e0b;
/* Alert channels, in their own colours so each is recognised at a glance. */
--wpa-brand-twilio: #f22f46;
--wpa-brand-slack: #611f69;
--wpa-brand-telegram: #1d8fc7;
--wpa-brand-discord: #5865f2;
--wpa-sidebar-w: 220px;
--wpa-radius: 10px;
--wpa-radius-sm: 8px;
--wpa-radius-pill: 999px;
--wpa-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
--wpa-shadow-lg: 0 10px 30px rgb(0 0 0 / 0.12);
--wpa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
/* Dark mode is an explicit class set server-side from user meta, so there is no
* flash of the light theme while scripts boot. */
.wpayme-app.wpayme-app--dark {
--wpa-bg: #0f1115;
--wpa-surface: #171a21;
--wpa-surface-muted: #1e222b;
--wpa-border: #2a2f3a;
--wpa-border-strong: #3a4150;
--wpa-text: #e5e7eb;
--wpa-text-muted: #9ca3af;
--wpa-text-faint: #6b7280;
--wpa-accent-soft: #1e1b4b;
--wpa-success-soft: #052e23;
--wpa-warn-soft: #2e2408;
--wpa-danger-soft: #2d1215;
--wpa-brand-slack: #d38ad8;
--wpa-brand-telegram: #4fb8ea;
--wpa-brand-discord: #8c95ff;
--wpa-rate-bg: #2a2208;
--wpa-rate-border: #4a3a10;
--wpa-star: #4b5563;
--wpa-star-on: #fbbf24;
--wpa-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
--wpa-shadow-lg: 0 10px 30px rgb(0 0 0 / 0.5);
}
/* The content column only. The WordPress menu and admin bar keep their own
* colour scheme, which is a per-user WordPress setting, not ours to override. */
.wpayme-app.wpayme-app--dark #wpbody-content,
.wpayme-app.wpayme-app--dark #wpcontent {
background: var(--wpa-bg);
}
.wpayme-app #wpbody-content {
padding-bottom: 40px;
}
.wpayme-app .wpayme-page,
.wpayme-app #wpbody-content > .wrap {
font-family: var(--wpa-font);
color: var(--wpa-text);
}
/* WordPress prints its own h1 on some screens; ours replaces it. */
.wpayme-app .wpayme-header + .wp-header-end {
display: none;
}
/* -------------------------------------------------------------------------
* Layout — vertical sidebar beside the page content
*
* #wpbody-content is the grid, not the .wrap, because the sidebar is injected
* on `admin_notices` as one of its first children. That is the only hook inside
* #wpbody-content that runs before the page's own markup, and gridding the
* container rather than the wrap is what lets WordPress's own post-type screens
* take part without being modified.
*
* The sidebar is pinned to column one; every other child sweeps into column two.
* Nothing wraps WordPress markup, so notices, screen meta, list tables and
* metaboxes all keep working.
* ---------------------------------------------------------------------- */
.wpayme-app #wpbody-content {
display: grid;
grid-template-columns: var(--wpa-sidebar-w) minmax(0, 1fr);
gap: 0 20px;
align-items: start;
padding: 16px 0 40px 20px;
box-sizing: border-box;
}
.wpayme-app #wpbody-content > * {
grid-column: 2;
min-width: 0;
max-width: none;
}
.wpayme-app #wpbody-content > .wpayme-sidebar {
/* Implicit rows have no -1 line to reach, so span generously instead. */
grid-area: 1 / 1 / span 200 / span 1;
position: sticky;
top: 46px;
}
/* Full width: WordPress caps some screens, and .wrap adds its own margins. */
.wpayme-app #wpbody-content > .wrap,
.wpayme-app #wpbody-content > .wrap > * {
max-width: none;
}
.wpayme-app #wpbody-content > .wrap {
margin: 0;
}
/* WordPress hides this marker; as a grid item it would still occupy a row. */
.wpayme-app #wpbody-content > .wrap > .wp-header-end,
.wpayme-app #wpbody-content > .wp-header-end {
display: none;
}
/* Screen Options / Help live inside #wpbody-content on list screens, so keep
* them in the content column and hard against the right edge. */
.wpayme-app #wpbody-content > #screen-meta,
.wpayme-app #wpbody-content > #screen-meta-links {
margin-left: 0;
margin-right: auto;
}
/* The list-table screens put their own h1 and Add New button in the wrap; keep
* them, but let the page title sit tight under the top bar. */
.wpayme-app #wpbody-content > .wrap > h1.wp-heading-inline {
margin-top: 0;
padding-top: 0;
font-size: 20px;
font-weight: 700;
color: var(--wpa-text);
}
/* -------------------------------------------------------------------------
* Sidebar
* ---------------------------------------------------------------------- */
.wpayme-sidebar {
padding: 6px 0 10px;
background: var(--wpa-surface);
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
box-shadow: var(--wpa-shadow);
overflow: hidden;
}
/* -------------------------------------------------------------------------
* Sidebar foot
*
* Sits under the navigation rather than pinned to the bottom of the column:
* on a short menu it follows the last link, which reads as the end of the
* list instead of a stranded panel.
* ---------------------------------------------------------------------- */
.wpayme-sidebar-foot {
padding: 14px 14px 12px;
}
.wpayme-rate {
padding: 12px 10px 10px;
border: 1px solid var(--wpa-rate-border);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-rate-bg);
text-align: center;
}
.wpayme-rate-title {
margin: 0 0 6px;
color: var(--wpa-text);
font-size: 12px;
font-weight: 600;
}
.wpayme-rate-stars {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.wpayme-rate-stars a {
display: inline-flex;
padding: 1px;
color: var(--wpa-star);
line-height: 0;
text-decoration: none;
transition: color 0.12s ease, transform 0.12s ease;
}
.wpayme-rate-stars a svg {
width: 17px;
height: 17px;
}
/*
* Hovering the third star should light the first three, not only that one.
* Direction matters: the row is drawn in reverse so a star can be selected by
* its later siblings, which CSS can reach where earlier ones it cannot.
*/
.wpayme-rate-stars {
flex-direction: row-reverse;
}
.wpayme-rate-stars a:hover,
.wpayme-rate-stars a:hover ~ a,
.wpayme-rate-stars a:focus,
.wpayme-rate-stars a:focus ~ a {
color: var(--wpa-star-on);
}
/* Sits beside the name as a small pill, so the version reads as part of the
* brand rather than as another line of text. */
.wpayme-sidebar-version {
margin-right: auto;
padding: 2px 7px;
border-radius: var(--wpa-radius-pill);
background: var(--wpa-accent-soft);
color: var(--wpa-accent);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.6;
white-space: nowrap;
}
.wpayme-sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px 10px;
}
.wpayme-sidebar-brand img {
width: 28px;
height: 28px;
flex: none;
}
.wpayme-sidebar-name {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--wpa-text);
}
.wpayme-sidebar-tag {
margin: 0;
padding: 0 16px 14px;
font-size: 10px;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wpa-text-faint);
}
.wpayme-sidebar-nav {
padding: 0 8px;
}
.wpayme-sidebar-group {
padding: 14px 8px 6px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wpa-text-faint);
}
.wpayme-sidebar-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
margin-bottom: 2px;
border-radius: var(--wpa-radius-sm);
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: var(--wpa-text);
transition: background-color .12s ease, color .12s ease;
}
.wpayme-sidebar-nav a:hover,
.wpayme-sidebar-nav a:focus {
background: var(--wpa-surface-muted);
color: var(--wpa-text);
box-shadow: none;
outline: none;
}
.wpayme-sidebar-nav a:focus-visible {
outline: 2px solid var(--wpa-accent);
outline-offset: -2px;
}
.wpayme-sidebar-nav a.is-current,
.wpayme-sidebar-nav a.is-current:hover {
background: var(--wpa-accent);
color: #fff;
font-weight: 600;
}
.wpayme-sidebar-icon {
width: 18px;
height: 18px;
flex: none;
opacity: .9;
}
.wpayme-sidebar-icon svg {
width: 18px;
height: 18px;
}
.wpayme-sidebar-label {
flex: 1 1 auto;
}
.wpayme-sidebar-count {
min-width: 18px;
padding: 0 6px;
border-radius: var(--wpa-radius-pill);
background: var(--wpa-border);
font-size: 11px;
font-weight: 600;
line-height: 18px;
text-align: center;
color: var(--wpa-text-muted);
}
.wpayme-sidebar-nav a.is-current .wpayme-sidebar-count {
background: rgb(255 255 255 / 0.24);
color: #fff;
}
/* A Pro item in the sidebar: there, and marked as Pro rather than hidden. */
.wpayme-sidebar-pro {
margin-right: auto;
padding: 0 6px;
border-radius: var(--wpa-radius-pill);
background: var(--wpa-accent-soft);
font-size: 10px;
font-weight: 700;
line-height: 18px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--wpa-accent);
}
.wpayme-sidebar-nav a.is-current .wpayme-sidebar-pro {
background: rgb(255 255 255 / 0.24);
color: #fff;
}
/* The page that stands in for a Pro feature. */
.wpayme-app .wpayme-pro-panel {
position: relative;
max-width: 720px;
margin: 24px 0;
padding: 32px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
background: var(--wpa-surface);
box-shadow: var(--wpa-shadow);
}
.wpayme-app .wpayme-pro-panel-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--wpa-radius);
background: var(--wpa-accent-soft);
color: var(--wpa-accent);
}
.wpayme-app .wpayme-pro-panel-icon svg {
width: 24px;
height: 24px;
}
.wpayme-app .wpayme-pro-panel-badge {
position: absolute;
top: 32px;
left: 32px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--wpa-radius-pill);
background: var(--wpa-accent);
font-size: 12px;
font-weight: 700;
color: #fff;
}
.wpayme-app .wpayme-pro-panel-badge svg {
width: 13px;
height: 13px;
}
.wpayme-app .wpayme-pro-panel h2 {
margin: 20px 0 16px;
font-size: 18px;
line-height: 1.4;
color: var(--wpa-text);
}
.wpayme-app .wpayme-pro-panel-points {
display: grid;
gap: 10px;
margin: 0 0 24px;
padding: 0;
list-style: none;
}
.wpayme-app .wpayme-pro-panel-points li {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
color: var(--wpa-text-muted);
}
.wpayme-app .wpayme-pro-panel-points svg {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--wpa-accent);
}
.wpayme-app .wpayme-pro-panel-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
}
/* The same thing, a line long, inside a free screen. */
.wpayme-app .wpayme-pro-note {
padding: 14px 16px;
border: 1px solid var(--wpa-border);
border-right: 3px solid var(--wpa-accent);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface-muted);
color: var(--wpa-text-muted);
}
.wpayme-app .wpayme-pro-note strong {
color: var(--wpa-text);
}
@media (max-width: 600px) {
.wpayme-app .wpayme-pro-panel {
padding: 20px;
}
.wpayme-app .wpayme-pro-panel-badge {
top: 20px;
left: 20px;
}
}
/* -------------------------------------------------------------------------
* Top bar — sits above the content column
* ---------------------------------------------------------------------- */
.wpayme-topbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px;
padding: 12px 16px;
background: var(--wpa-surface);
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
box-shadow: var(--wpa-shadow);
}
.wpayme-topbar-search {
position: relative;
flex: 1 1 240px;
max-width: 460px;
}
.wpayme-topbar-search input[type="search"] {
width: 100%;
height: 34px;
margin: 0;
padding: 0 32px 0 12px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface-muted);
color: var(--wpa-text);
font-size: 13px;
line-height: 32px;
box-shadow: none;
}
.wpayme-topbar-search input:focus {
border-color: var(--wpa-accent);
background: var(--wpa-surface);
outline: none;
box-shadow: 0 0 0 3px var(--wpa-accent-soft);
}
.wpayme-topbar-search-icon {
position: absolute;
top: 50%;
right: 10px;
width: 14px;
height: 14px;
transform: translateY(-50%);
pointer-events: none;
color: var(--wpa-text-faint);
}
.wpayme-topbar-actions {
display: flex;
align-items: center;
gap: 8px;
margin-right: auto;
/* Without this the pills stayed on one line and widened the document on a
* phone - every screen scrolled sideways by about a hundred pixels. */
flex-wrap: wrap;
}
/* Two classes, because .wpayme-icon-btn sets inline-flex further down and
* would otherwise win the cascade on equal specificity. */
.wpayme-app .wpayme-topbar .wpayme-topbar-burger {
display: none;
}
/* -------------------------------------------------------------------------
* Pills, buttons, badges
* ---------------------------------------------------------------------- */
.wpayme-pill {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius-pill);
background: var(--wpa-surface);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
color: var(--wpa-text);
}
a.wpayme-pill:hover {
border-color: var(--wpa-border-strong);
color: var(--wpa-text);
}
.wpayme-pill-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--wpa-text-faint);
}
.wpayme-pill--live {
border-color: transparent;
background: var(--wpa-success);
color: #fff;
}
.wpayme-pill--test {
border-color: transparent;
background: var(--wpa-warn);
color: #fff;
}
.wpayme-pill--live .wpayme-pill-dot,
.wpayme-pill--test .wpayme-pill-dot {
background: #fff;
}
.wpayme-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius-pill);
background: var(--wpa-surface);
color: var(--wpa-text-muted);
cursor: pointer;
text-decoration: none;
}
.wpayme-icon-btn:hover {
border-color: var(--wpa-border-strong);
color: var(--wpa-text);
}
.wpayme-icon-btn svg {
width: 15px;
height: 15px;
}
.wpayme-badge {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: var(--wpa-radius-pill);
background: var(--wpa-border);
font-size: 11px;
font-weight: 600;
color: var(--wpa-text-muted);
}
.wpayme-badge--success { background: var(--wpa-success-soft); color: var(--wpa-success); }
.wpayme-badge--warn { background: var(--wpa-warn-soft); color: var(--wpa-warn); }
.wpayme-badge--danger { background: var(--wpa-danger-soft); color: var(--wpa-danger); }
.wpayme-badge--pro { background: var(--wpa-warn); color: #fff; }
/* -------------------------------------------------------------------------
* Cards and stats
* ---------------------------------------------------------------------- */
.wpayme-card {
background: var(--wpa-surface);
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
box-shadow: var(--wpa-shadow);
}
.wpayme-card + .wpayme-card {
margin-top: 16px;
}
.wpayme-card-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--wpa-border);
}
.wpayme-card-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--wpa-text);
}
.wpayme-card-body {
padding: 18px;
}
/*
* A grid, not wrapping flex: with `flex: 1 1 190px` the last card on a row
* grows to eat whatever is left, so six cards on a five-wide row left
* "Refunded" stretched across the full width on its own. auto-fill keeps the
* empty tracks, so an odd card out stays one column wide.
*/
.wpayme-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.wpayme-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--wpa-surface);
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
box-shadow: var(--wpa-shadow);
}
.wpayme-stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: none;
border-radius: var(--wpa-radius-sm);
background: var(--wpa-accent-soft);
color: var(--wpa-accent);
}
.wpayme-stat-icon svg { width: 18px; height: 18px; }
.wpayme-stat-icon--success { background: var(--wpa-success-soft); color: var(--wpa-success); }
.wpayme-stat-icon--warn { background: var(--wpa-warn-soft); color: var(--wpa-warn); }
.wpayme-stat-icon--danger { background: var(--wpa-danger-soft); color: var(--wpa-danger); }
.wpayme-stat-value {
font-size: 20px;
font-weight: 700;
line-height: 1.15;
color: var(--wpa-text);
}
.wpayme-stat-label {
margin-top: 2px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--wpa-text-muted);
}
.wpayme-empty {
padding: 44px 20px;
text-align: center;
color: var(--wpa-text-muted);
}
.wpayme-empty-title {
margin: 0 0 6px;
font-size: 15px;
font-weight: 600;
color: var(--wpa-text);
}
.wpayme-empty p { margin: 0 0 14px; font-size: 13px; }
/* -------------------------------------------------------------------------
* WordPress elements inside WPayme screens
* ---------------------------------------------------------------------- */
/*
* Metaboxes still carry roughly 640 lines of inline CSS printed by
* page-dashboard.php, with literal colours that ignore the colour scheme. Until
* that view is rebuilt these rules keep the cards coherent; the two-class
* selector beats the inline sheet's single-class rules despite loading earlier.
*/
.wpayme-app .postbox {
background: var(--wpa-surface);
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
box-shadow: var(--wpa-shadow);
color: var(--wpa-text);
}
.wpayme-app .postbox .postbox-header,
.wpayme-app .postbox h2.hndle,
.wpayme-app .postbox h3.hndle {
background: transparent;
border-bottom: 1px solid var(--wpa-border);
color: var(--wpa-text);
font-size: 14px;
font-weight: 600;
}
.wpayme-app .postbox .inside {
color: var(--wpa-text);
}
.wpayme-app .postbox .inside a:not(.button) {
color: var(--wpa-accent);
}
/* Row separators inside the status widget and payment lists. */
.wpayme-app .postbox .inside table th,
.wpayme-app .postbox .inside table td,
.wpayme-app .wpayme-pay-status-widget-row {
border-color: var(--wpa-border);
color: var(--wpa-text);
}
.wpayme-app #dashboard-widgets .postbox-container {
background: transparent;
}
/* The status widget paints its own white panel from inline CSS in AdminModule. */
.wpayme-app .wpayme-pay-status-widget {
background: var(--wpa-surface);
}
.wpayme-app .wpayme-pay-status-widget > * {
border-color: var(--wpa-border);
}
/* Legacy inline rules set literal greys that vanish on a dark ground. */
.wpayme-app .postbox .inside p,
.wpayme-app .postbox .inside li,
.wpayme-app .postbox .inside td,
.wpayme-app .postbox .inside span:not([class]) {
color: var(--wpa-text);
}
.wpayme-app .form-table th {
padding: 16px 0 16px 10px;
font-size: 13px;
font-weight: 600;
color: var(--wpa-text);
}
.wpayme-app .form-table td {
padding: 12px 10px;
font-size: 13px;
color: var(--wpa-text);
}
.wpayme-app .form-table td p.description {
font-size: 12px;
color: var(--wpa-text-muted);
}
.wpayme-app input[type="text"],
.wpayme-app input[type="email"],
.wpayme-app input[type="url"],
.wpayme-app input[type="number"],
.wpayme-app input[type="password"],
.wpayme-app select,
.wpayme-app textarea {
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface);
color: var(--wpa-text);
box-shadow: none;
}
.wpayme-app input[type="text"]:focus,
.wpayme-app input[type="email"]:focus,
.wpayme-app input[type="url"]:focus,
.wpayme-app input[type="number"]:focus,
.wpayme-app input[type="password"]:focus,
.wpayme-app select:focus,
.wpayme-app textarea:focus {
border-color: var(--wpa-accent);
outline: none;
box-shadow: 0 0 0 3px var(--wpa-accent-soft);
}
.wpayme-app .button-primary,
.wpayme-app .button.button-primary {
border: 0;
border-radius: var(--wpa-radius-sm);
background: var(--wpa-accent);
color: #fff;
box-shadow: none;
text-shadow: none;
font-weight: 600;
}
.wpayme-app .button-primary:hover,
.wpayme-app .button-primary:focus,
.wpayme-app .button.button-primary:hover,
.wpayme-app .button.button-primary:focus {
background: var(--wpa-accent);
color: #fff;
filter: brightness(1.08);
box-shadow: none;
}
.wpayme-app .button,
.wpayme-app .button-secondary {
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface);
color: var(--wpa-text);
box-shadow: none;
}
.wpayme-app .nav-tab-wrapper {
border-bottom: 1px solid var(--wpa-border);
padding-right: 0;
}
.wpayme-app .nav-tab {
border: 0;
border-radius: var(--wpa-radius-pill) var(--wpa-radius-pill) 0 0;
margin-right: 0;
margin-left: 4px;
background: transparent;
font-size: 13px;
font-weight: 600;
color: var(--wpa-text-muted);
}
.wpayme-app .nav-tab-active,
.wpayme-app .nav-tab-active:focus,
.wpayme-app .nav-tab-active:hover {
background: var(--wpa-surface);
border-bottom: 2px solid var(--wpa-accent);
color: var(--wpa-text);
}
/* -------------------------------------------------------------------------
* Responsive
* ---------------------------------------------------------------------- */
/* WordPress folds its own menu at 960px; collapse to one column there too. */
@media screen and (max-width: 960px) {
.wpayme-app #wpbody-content {
grid-template-columns: minmax(0, 1fr);
padding-left: 12px;
}
.wpayme-app #wpbody-content > * {
grid-column: 1;
}
/*
* Off-canvas drawer.
*
* The sidebar keeps its place in the DOM - it is the same navigation, only
* lifted out of the flow - so there is no second menu to keep in step. It
* is hidden rather than merely shifted off screen: an element parked at
* -100% is still focusable, and tabbing would walk into an invisible menu.
*/
.wpayme-app #wpbody-content > .wpayme-sidebar {
grid-area: auto;
position: fixed;
z-index: 100001;
top: 0;
bottom: 0;
right: 0;
width: min(84vw, 300px);
margin: 0;
border-width: 0 0 0 1px;
border-radius: 0;
overflow-y: auto;
overscroll-behavior: contain;
visibility: hidden;
transform: translateX(100%);
transition: transform 0.22s ease, visibility 0.22s;
}
.wpayme-app #wpbody-content > .wpayme-sidebar.is-open {
visibility: visible;
transform: none;
}
.wpayme-scrim {
position: fixed;
z-index: 100000;
inset: 0;
background: rgb(15 17 21 / 0.45);
}
/* The page behind a drawer should not scroll under the thumb. */
.wpayme-nav-open {
overflow: hidden;
}
.wpayme-app .wpayme-topbar .wpayme-topbar-burger {
display: inline-flex;
}
/* Keep the top bar above the sidebar it toggles. */
.wpayme-app #wpbody-content > .wpayme-topbar {
order: -1;
}
}
@media screen and (max-width: 782px) {
/*
* Burger and search share the first line and the pills wrap under them.
* The search used to be ordered last, which left the burger alone on a
* line of its own with the whole width beside it empty.
*/
.wpayme-topbar-search {
order: 0;
flex: 1 1 200px;
max-width: none;
}
.wpayme-topbar-actions {
order: 10;
margin-right: 0;
}
}
/* -------------------------------------------------------------------------
* Reports
* ---------------------------------------------------------------------- */
.wpayme-reports-filter {
margin-bottom: 18px;
padding: 14px 16px;
}
.wpayme-reports-filter-row {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.wpayme-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.wpayme-field-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--wpa-text-muted);
}
.wpayme-app .wpayme-field select,
.wpayme-app .wpayme-field input[type="date"] {
height: 34px;
min-width: 150px;
margin: 0;
padding: 0 10px;
line-height: 32px;
}
.wpayme-reports-filter-actions {
display: flex;
align-items: center;
gap: 8px;
margin-right: auto;
}
.wpayme-reports-range-note {
margin: 12px 0 0;
font-size: 12px;
color: var(--wpa-text-muted);
}
/* Chart ----------------------------------------------------------------- */
.wpayme-chart {
height: 340px;
width: 100%;
}
.wpayme-chart-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.wpayme-chart-legend-item {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius-pill);
background: var(--wpa-surface);
font-size: 12px;
color: var(--wpa-text-muted);
cursor: pointer;
}
.wpayme-chart-legend-item:hover {
border-color: var(--wpa-border-strong);
}
/* Series toggled off: dimmed rather than hidden, so the set stays readable. */
.wpayme-chart-legend-item:not(.is-on) {
opacity: .45;
}
.wpayme-chart-legend-item strong {
color: var(--wpa-text);
}
.wpayme-chart-swatch {
width: 9px;
height: 9px;
flex: none;
border-radius: 50%;
background: var(--wpa-text-faint);
}
.wpayme-swatch--completed { background: #10b981; }
.wpayme-swatch--pending { background: #f59e0b; }
.wpayme-swatch--authorized { background: #6366f1; }
.wpayme-swatch--reserved { background: #8b5cf6; }
.wpayme-swatch--refunded { background: #f97316; }
.wpayme-swatch--cancelled { background: #94a3b8; }
.wpayme-swatch--expired { background: #64748b; }
.wpayme-swatch--failed { background: #ef4444; }
/* Flot draws its own tooltip element; give it the app's surface. */
.wpayme-app .wpayme-pay-chart-tooltip,
.wpayme-app #wpayme-pay-chart-tooltip {
padding: 6px 10px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface);
box-shadow: var(--wpa-shadow-lg);
font-size: 12px;
color: var(--wpa-text);
}
/* Tables ---------------------------------------------------------------- */
.wpayme-reports-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
margin-top: 16px;
}
.wpayme-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.wpayme-table th,
.wpayme-table td {
padding: 10px 18px;
text-align: right;
border-bottom: 1px solid var(--wpa-border);
color: var(--wpa-text);
}
.wpayme-table th {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--wpa-text-muted);
}
.wpayme-table tbody tr:last-child td {
border-bottom: 0;
}
.wpayme-table tbody tr:hover td {
background: var(--wpa-surface-muted);
}
.wpayme-table .wpayme-num {
text-align: left;
font-variant-numeric: tabular-nums;
}
.wpayme-table-empty {
padding: 24px 18px;
text-align: center;
color: var(--wpa-text-muted);
}
.wpayme-table td .wpayme-chart-swatch {
display: inline-block;
margin-left: 7px;
vertical-align: middle;
}
@media screen and (max-width: 782px) {
.wpayme-reports-filter-actions {
margin-right: 0;
width: 100%;
}
}
/* Alpine sets this before it boots so templated markup never flashes. */
[x-cloak] {
display: none !important;
}
/* -------------------------------------------------------------------------
* Settings
* ---------------------------------------------------------------------- */
/* Tabs. WP's `.nav-tab-wrapper` draws a faux folder tab that only reads right
* flush against a white page; inside a card layout it floats. */
.wpayme-app .wpayme-tabs {
display: flex;
gap: 4px;
align-items: center;
margin: 0 0 6px;
padding: 4px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
background: var(--wpa-surface-muted);
width: fit-content;
max-width: 100%;
overflow-x: auto;
}
.wpayme-app .wpayme-tab {
display: inline-block;
padding: 7px 16px;
border-radius: var(--wpa-radius-sm);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
color: var(--wpa-text-muted);
transition: background 0.12s ease, color 0.12s ease;
}
.wpayme-app .wpayme-tab:hover {
background: var(--wpa-surface);
color: var(--wpa-text);
}
.wpayme-app .wpayme-tab:focus-visible {
outline: 2px solid var(--wpa-accent);
outline-offset: 1px;
box-shadow: none;
}
.wpayme-app .wpayme-tab.is-active {
background: var(--wpa-accent);
color: #fff;
}
.wpayme-app .wpayme-tabs-blurb {
margin: 0 0 18px;
color: var(--wpa-text-muted);
font-size: 13px;
}
.wpayme-app .wpayme-settings-form {
max-width: 1080px;
}
.wpayme-app .wpayme-settings-card .wpayme-card-body {
padding-top: 4px;
padding-bottom: 4px;
}
/* Settings tables. The stock 200px label column leaves a canyon between label
* and field on a wide screen. */
.wpayme-app .wpayme-settings-card .form-table {
margin: 0;
}
.wpayme-app .wpayme-settings-card .form-table th {
width: 240px;
padding: 16px 0 16px 20px;
font-size: 13px;
font-weight: 600;
color: var(--wpa-text);
vertical-align: top;
line-height: 1.5;
}
.wpayme-app .wpayme-settings-card .form-table td {
padding: 14px 0;
vertical-align: top;
}
.wpayme-app .wpayme-settings-card .form-table tr + tr > th,
.wpayme-app .wpayme-settings-card .form-table tr + tr > td {
border-top: 1px solid var(--wpa-border);
}
.wpayme-app .wpayme-settings-card .form-table .description {
margin: 6px 0 0;
color: var(--wpa-text-muted);
font-size: 12px;
max-width: 62ch;
}
.wpayme-app .wpayme-settings-card .form-table input[type="text"],
.wpayme-app .wpayme-settings-card .form-table input[type="url"],
.wpayme-app .wpayme-settings-card .form-table input[type="email"],
.wpayme-app .wpayme-settings-card .form-table input[type="number"],
.wpayme-app .wpayme-settings-card .form-table input[type="password"],
.wpayme-app .wpayme-settings-card .form-table select,
.wpayme-app .wpayme-settings-card .form-table textarea {
border: 1px solid var(--wpa-border-strong);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface);
color: var(--wpa-text);
box-shadow: none;
min-height: 34px;
padding: 6px 10px;
max-width: 100%;
}
.wpayme-app .wpayme-settings-card .form-table input:focus,
.wpayme-app .wpayme-settings-card .form-table select:focus,
.wpayme-app .wpayme-settings-card .form-table textarea:focus {
border-color: var(--wpa-accent);
outline: 2px solid var(--wpa-accent-soft);
outline-offset: 0;
box-shadow: none;
}
.wpayme-app .wpayme-settings-card .form-table textarea {
width: 100%;
max-width: 62ch;
font-family: var(--wpa-font);
}
/* Sticky save bar, so the button is reachable without scrolling a long form. */
/* The save button reports the outcome in place, so it needs the two states it
* can end in as well as the one it starts in. */
.wpayme-app #submit.is-saving {
opacity: 0.75;
cursor: progress;
}
.wpayme-app #submit.is-saved {
background: var(--wpa-success);
}
.wpayme-app #submit.is-failed {
background: var(--wpa-danger);
}
.wpayme-settings-notices {
margin: 0 0 14px;
}
.wpayme-app .wpayme-settings-actions {
position: sticky;
bottom: 12px;
z-index: 5;
display: flex;
justify-content: flex-end;
margin-top: 18px;
padding: 12px 16px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
background: var(--wpa-surface);
box-shadow: var(--wpa-shadow-lg);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Something on the form differs from what is saved: the bar says so, and the
* button beats until it is pressed. */
.wpayme-app .wpayme-settings-actions.is-dirty {
border-color: var(--wpa-warn);
box-shadow: var(--wpa-shadow-lg), 0 0 0 3px color-mix(in srgb, var(--wpa-warn) 22%, transparent);
}
/*
* The dirty button keeps its amber all the way through hover and focus. Left to
* WordPress, hover put the theme's blue back under text chosen for amber, which
* read as dark on dark, and the flat fill made it look like a label rather than
* the button it is.
*/
.wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving),
.wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):hover,
.wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):focus,
.wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):active {
border: 1px solid color-mix(in srgb, var(--wpa-warn) 70%, #000);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-warn);
color: #1f1300;
font-weight: 600;
text-shadow: none;
box-shadow: 0 1px 2px rgb(31 19 0 / 0.25);
}
.wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving) {
animation: wpayme-heartbeat 1.3s ease-in-out infinite;
}
.wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):hover {
background: color-mix(in srgb, var(--wpa-warn) 88%, #000);
}
.wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:focus-visible {
outline: 2px solid #1f1300;
outline-offset: 2px;
}
.wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:hover,
.wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:focus-visible {
animation-play-state: paused;
}
@keyframes wpayme-heartbeat {
0%, 45%, 100% { transform: scale(1); }
12% { transform: scale(1.07); }
24% { transform: scale(0.98); }
34% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving) {
animation: none;
}
}
/* -------------------------------------------------------------------------
* Toggles
*
* Every checkbox on a settings form is a switch. Styling the input itself
* rather than a sibling span means no markup change and no second mechanism —
* the legacy `.wpayme-toggle-slider` span below is retired for that reason,
* otherwise a toggle_switch() field would draw two of them.
* List-table checkboxes are deliberately excluded: "select all" is not a
* setting and must keep reading as a checkbox.
* ---------------------------------------------------------------------- */
.wpayme-app .form-table input[type="checkbox"],
.wpayme-app .wpayme-toggle-switch input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: 0 0 auto;
width: 42px;
min-width: 42px;
height: 24px;
margin: 0;
padding: 0;
border: 1px solid var(--wpa-border-strong);
border-radius: var(--wpa-radius-pill);
background: var(--wpa-surface-muted);
box-shadow: none;
cursor: pointer;
vertical-align: middle;
transition: background 0.15s ease, border-color 0.15s ease;
}
.wpayme-app .form-table input[type="checkbox"]::before,
.wpayme-app .wpayme-toggle-switch input[type="checkbox"]::before {
content: "";
position: absolute;
/* Centred rather than offset from the top: the padding box is taller than
* the declared height under content-box sizing, which left the knob low. */
top: 50%;
right: 3px;
width: 18px;
height: 18px;
margin: 0;
transform: translateY(-50%);
border-radius: 50%;
background: var(--wpa-surface);
box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
transition: transform 0.15s ease;
}
.wpayme-app .form-table input[type="checkbox"]:checked,
.wpayme-app .wpayme-toggle-switch input[type="checkbox"]:checked {
background: var(--wpa-accent);
border-color: var(--wpa-accent);
}
.wpayme-app .form-table input[type="checkbox"]:checked::before,
.wpayme-app .wpayme-toggle-switch input[type="checkbox"]:checked::before {
transform: translate(-18px, -50%);
}
.wpayme-app .form-table input[type="checkbox"]:focus-visible,
.wpayme-app .wpayme-toggle-switch input[type="checkbox"]:focus-visible {
outline: 2px solid var(--wpa-accent);
outline-offset: 2px;
}
.wpayme-app .form-table input[type="checkbox"]:disabled,
.wpayme-app .wpayme-toggle-switch input[type="checkbox"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* The label text sitting beside a checkbox needs to align with the switch
* rather than the top of the row. */
.wpayme-app .form-table td > label:has( > input[type="checkbox"] ),
.wpayme-app .wpayme-toggle-container {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--wpa-text);
}
/* Retired: the switch is now the input itself. */
.wpayme-app .wpayme-toggle-slider {
display: none;
}
.wpayme-app .wpayme-toggle-switch {
display: inline-flex;
align-items: center;
position: static;
width: auto;
height: auto;
}
.wpayme-app .wpayme-toggle-label {
color: var(--wpa-text);
font-size: 13px;
}
/* -------------------------------------------------------------------------
* List screens
*
* Applies to every WPayme post type - gateways, payments, subscriptions,
* forms, coupons - by styling WP_List_Table itself. None of these screens is
* reimplemented; the stock markup just gets the card treatment.
* ---------------------------------------------------------------------- */
.wpayme-app .wrap > h1.wp-heading-inline {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
margin: 0 0 0 12px;
padding: 0;
color: var(--wpa-text);
}
/* Same outline pill as Export CSV: an accent outline reads as the primary
* action without a block of solid colour sitting beside the page title. */
.wpayme-app .wrap > .page-title-action {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 38px 0 18px;
border: 1px solid var(--wpa-accent);
border-radius: var(--wpa-radius-pill);
background-color: var(--wpa-surface);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 15px 15px;
color: var(--wpa-accent);
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
box-shadow: none;
vertical-align: middle;
transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.wpayme-app .wrap > .page-title-action:hover,
.wpayme-app .wrap > .page-title-action:focus {
background-color: var(--wpa-accent-soft);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 15px 15px;
color: var(--wpa-accent);
box-shadow: 0 1px 3px rgb(79 70 229 / 0.18);
}
/*
* On the post editors the same button sits immediately after the heading, with
* the rest of the line empty. It belongs at the far end, as on the list
* screens - by float rather than by flex, because here .wrap holds the whole
* editing form and turning it into a flex row would rearrange all of it. The
* clear on .wp-header-end below is what keeps the float out of the form.
*/
.wpayme-app.post-php .wrap > .page-title-action,
.wpayme-app.post-new-php .wrap > .page-title-action {
float: left;
margin: 0;
}
/*
* WordPress's own clearing element is display:none on these screens, and a box
* that is not generated cannot clear a float - the button hung nine pixels over
* the top of the form. It gets its box back, with no height and nothing to see.
* The selector carries #wpbody-content because the rule that hides it does.
*/
.wpayme-app.post-php #wpbody-content > .wrap > .wp-header-end,
.wpayme-app.post-new-php #wpbody-content > .wrap > .wp-header-end {
display: block;
visibility: hidden;
clear: both;
height: 0;
margin: 0;
border: 0;
}
/* The status links float, which without a clear pulls "All (0)" up alongside
* the page title and reads as part of the heading. */
.wpayme-app .wrap > .wp-header-end {
visibility: hidden;
clear: both;
margin: 0;
border: 0;
height: 12px;
}
.wpayme-app .subsubsub {
float: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin: 0 0 12px;
padding: 4px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
background: var(--wpa-surface-muted);
width: fit-content;
max-width: 100%;
font-size: 13px;
}
.wpayme-app .subsubsub li {
margin: 0;
color: transparent;
}
/* The separators are literal "|" text nodes between the list items. */
.wpayme-app .subsubsub li::after {
content: none;
}
.wpayme-app .subsubsub a {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 14px;
border-radius: var(--wpa-radius-sm);
color: var(--wpa-text-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
}
.wpayme-app .subsubsub a:hover {
background: var(--wpa-surface);
color: var(--wpa-text);
}
.wpayme-app .subsubsub a.current {
background: var(--wpa-accent);
color: #fff;
font-weight: 600;
}
/* The count reads as a pill, like the category tabs on the browse screens. */
.wpayme-app .subsubsub a .count {
padding: 1px 7px;
border-radius: var(--wpa-radius-pill);
background: var(--wpa-surface-muted);
color: var(--wpa-text-muted);
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.wpayme-app .subsubsub a.current .count {
background: rgb(255 255 255 / 0.22);
color: #fff;
}
/* Table navigation. */
.wpayme-app .tablenav {
height: auto;
margin: 0 0 12px;
padding: 0;
}
.wpayme-app .tablenav.bottom {
margin: 12px 0 0;
}
.wpayme-app .tablenav .tablenav-pages {
margin: 0;
float: left;
color: var(--wpa-text-muted);
font-size: 13px;
}
.wpayme-app .tablenav .tablenav-pages .displaying-num {
color: var(--wpa-text-muted);
font-size: 13px;
}
.wpayme-app .tablenav .tablenav-pages a.page-numbers,
.wpayme-app .tablenav .tablenav-pages span.tablenav-pages-navspan,
.wpayme-app .tablenav .tablenav-pages a.prev-page,
.wpayme-app .tablenav .tablenav-pages a.next-page,
.wpayme-app .tablenav .tablenav-pages a.first-page,
.wpayme-app .tablenav .tablenav-pages a.last-page {
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface);
color: var(--wpa-text);
box-shadow: none;
}
.wpayme-app .search-box input[type="search"],
.wpayme-app .tablenav select,
.wpayme-app .tablenav input[type="text"],
.wpayme-app .tablenav input[type="search"] {
height: 32px;
min-height: 32px;
padding: 0 10px;
border: 1px solid var(--wpa-border-strong);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface);
color: var(--wpa-text);
box-shadow: none;
line-height: 1.4;
}
.wpayme-app .search-box input[type="search"]:focus,
.wpayme-app .tablenav select:focus {
border-color: var(--wpa-accent);
outline: 2px solid var(--wpa-accent-soft);
box-shadow: none;
}
.wpayme-app .tablenav .button,
.wpayme-app .search-box .button {
height: 32px;
border-radius: var(--wpa-radius-sm);
border-color: var(--wpa-border-strong);
background: var(--wpa-surface);
color: var(--wpa-text);
box-shadow: none;
}
.wpayme-app .tablenav .button:hover,
.wpayme-app .search-box .button:hover {
background: var(--wpa-surface-muted);
border-color: var(--wpa-border-strong);
color: var(--wpa-text);
}
/* The table itself becomes the card. */
.wpayme-app .wp-list-table {
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--wpa-surface);
box-shadow: var(--wpa-shadow);
}
/*
* Row striping.
*
* WordPress paints alternate rows a fixed #f6f7f7. That reads as nothing in
* the light theme, which is why it was never overridden - but in the dark one
* it is a white band under light grey text, so half the list was unreadable.
* Both themes take their striping from the tokens instead.
*/
.wpayme-app .wp-list-table tbody tr,
.wpayme-app .wpayme-pay-table-striped tbody tr {
background: var(--wpa-surface);
color: var(--wpa-text);
}
.wpayme-app .wp-list-table.striped > tbody > tr:nth-child(odd),
.wpayme-app .wp-list-table tbody tr.alternate,
.wpayme-app .wpayme-pay-table-striped tbody tr:nth-of-type(odd) {
background: var(--wpa-surface-muted);
}
/* Quick Edit and bulk-edit rows open inside the list and are the same surface. */
.wpayme-app .wp-list-table tbody tr.inline-edit-row,
.wpayme-app .wp-list-table tbody tr.inline-edit-row td,
.wpayme-app .wp-list-table tbody tr.no-items td {
background: var(--wpa-surface);
color: var(--wpa-text);
}
/* The header sits on the card's own surface. The select-all cell is a | ,
* not a | , so it has to be named or it keeps the default shading. */
.wpayme-app .wp-list-table thead th,
.wpayme-app .wp-list-table thead td,
.wpayme-app .wp-list-table tfoot th,
.wpayme-app .wp-list-table tfoot td {
padding: 12px 14px;
border-bottom: 1px solid var(--wpa-border);
background: var(--wpa-surface);
color: var(--wpa-text-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wpayme-app .wp-list-table tfoot th,
.wpayme-app .wp-list-table tfoot td {
border-bottom: 0;
border-top: 1px solid var(--wpa-border);
}
.wpayme-app .wp-list-table thead th a,
.wpayme-app .wp-list-table tfoot th a {
color: inherit;
}
.wpayme-app .wp-list-table tbody td,
.wpayme-app .wp-list-table tbody th {
padding: 14px;
border-bottom: 1px solid var(--wpa-border);
color: var(--wpa-text);
font-size: 13px;
vertical-align: middle;
}
.wpayme-app .wp-list-table tbody tr:last-child td,
.wpayme-app .wp-list-table tbody tr:last-child th {
border-bottom: 0;
}
.wpayme-app .wp-list-table tbody tr:hover > td,
.wpayme-app .wp-list-table tbody tr:hover > th {
background: var(--wpa-surface-muted);
}
.wpayme-app .wp-list-table .row-title,
.wpayme-app .wp-list-table .column-title strong a {
color: var(--wpa-text);
font-weight: 600;
text-decoration: none;
}
.wpayme-app .wp-list-table .row-actions {
color: var(--wpa-text-faint);
font-size: 12px;
padding-top: 4px;
}
.wpayme-app .wp-list-table .row-actions a {
color: var(--wpa-accent);
text-decoration: none;
}
.wpayme-app .wp-list-table .row-actions a:hover,
.wpayme-app .wp-list-table .row-actions a:focus-visible {
color: color-mix(in srgb, var(--wpa-accent) 75%, #000);
text-decoration: underline;
}
/* The coupon code wears a tag icon, so its actions line up under the code itself. */
.wpayme-app.post-type-wpayme_coupon .column-title .row-actions {
margin-right: 23px;
}
/* Empty state. WordPress renders "no items" as a single cell that stops at the
* first column, which reads as a broken table rather than an empty one. */
.wpayme-app .wp-list-table .no-items td {
padding: 44px 20px;
text-align: center;
color: var(--wpa-text-muted);
font-size: 14px;
}
.wpayme-app .wp-list-table .check-column {
width: 40px;
padding-right: 14px;
padding-left: 0;
vertical-align: middle;
}
/* -------------------------------------------------------------------------
* Browse screens
* ---------------------------------------------------------------------- */
/* Category tabs. Horizontally scrollable rather than wrapping: with 9 or 10
* categories a wrapping row pushes the grid down a whole line on narrow
* screens. */
.wpayme-app .wpayme-cat-tabs {
display: flex;
gap: 4px;
align-items: center;
margin: 0 0 18px;
padding: 6px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
background: var(--wpa-surface);
overflow-x: auto;
/* The row scrolls when the categories overflow, but a scrollbar drawn under
* a control strip reads as a broken element rather than an affordance. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.wpayme-app .wpayme-cat-tabs::-webkit-scrollbar {
display: none;
}
.wpayme-app .wpayme-cat-tab {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
height: 34px;
padding: 0 13px;
border: 0;
border-radius: var(--wpa-radius-sm);
background: none;
color: var(--wpa-text-muted);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
}
.wpayme-app .wpayme-cat-tab:hover {
background: var(--wpa-surface-muted);
color: var(--wpa-text);
}
.wpayme-app .wpayme-cat-tab.is-active {
background: var(--wpa-accent);
color: #fff;
}
.wpayme-app .wpayme-cat-count {
padding: 1px 7px;
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface-muted);
color: var(--wpa-text-muted);
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.wpayme-app .wpayme-cat-tab.is-active .wpayme-cat-count {
background: rgb(255 255 255 / 0.22);
color: #fff;
}
/* Grid. */
.wpayme-app .wpayme-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
/*
* Anything the browser filters hides is hidden by the `hidden` attribute, and
* every component here sets its own `display`, which beats the user agent's
* `[hidden] { display: none }`. Without this the category tabs and the search
* box set the attribute on tile after tile and nothing moved on screen.
*/
.wpayme-app [hidden] {
display: none !important;
}
.wpayme-app .wpayme-tile {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
background: var(--wpa-surface);
box-shadow: var(--wpa-shadow);
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.wpayme-app .wpayme-tile:hover {
box-shadow: 0 4px 14px rgb(0 0 0 / 0.07);
}
/* No accent border on a switched-on card: with most of them on, an accent
* outline on 60 tiles is noise, and the switch already carries the state. */
.wpayme-app .wpayme-tile.is-on {
border-color: var(--wpa-border);
box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}
.wpayme-app .wpayme-tile-head {
display: flex;
align-items: flex-start;
gap: 12px;
}
/* Only 16 of 75 gateways ship with brand artwork, so the tile art is a tinted
* initial rather than a logo slot that is empty three times out of four. */
.wpayme-app .wpayme-tile-art {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--wpa-radius-sm);
background: var(--wpa-accent-soft);
color: var(--wpa-accent);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
}
/* Brand marks are drawn for a white ground - several, Easy Digital Downloads
* among them, are near-white themselves and vanish on a tinted or dark plate. */
.wpayme-app .wpayme-tile-art--logo {
background: #fff;
border: 1px solid var(--wpa-border);
padding: 5px;
}
.wpayme-app .wpayme-tile-art--logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Fallback artwork. The tint is picked from the integration key so a given card
* always looks the same, and the grid does not appear to reshuffle its colours
* on every page load. */
.wpayme-app .wpayme-tint-0 { background: #eef2ff; color: #4f46e5; }
.wpayme-app .wpayme-tint-1 { background: #ecfdf5; color: #059669; }
.wpayme-app .wpayme-tint-2 { background: #fff7ed; color: #ea580c; }
.wpayme-app .wpayme-tint-3 { background: #fdf2f8; color: #db2777; }
.wpayme-app .wpayme-tint-4 { background: #eff6ff; color: #2563eb; }
.wpayme-app .wpayme-tint-5 { background: #f5f3ff; color: #7c3aed; }
.wpayme-app .wpayme-tint-6 { background: #fefce8; color: #ca8a04; }
.wpayme-app .wpayme-tint-7 { background: #f0fdfa; color: #0d9488; }
.wpayme-app .wpayme-tint-8 { background: #fef2f2; color: #dc2626; }
.wpayme-app .wpayme-tint-9 { background: #f8fafc; color: #475569; }
/* Dark mode needs the tints re-mixed: the light backgrounds above turn the
* cards into bright squares against a dark surface. */
.wpayme-app--dark .wpayme-tint-0 { background: #1e1b4b; color: #a5b4fc; }
.wpayme-app--dark .wpayme-tint-1 { background: #052e23; color: #6ee7b7; }
.wpayme-app--dark .wpayme-tint-2 { background: #3b1d06; color: #fdba74; }
.wpayme-app--dark .wpayme-tint-3 { background: #3b0a26; color: #f9a8d4; }
.wpayme-app--dark .wpayme-tint-4 { background: #10243f; color: #93c5fd; }
.wpayme-app--dark .wpayme-tint-5 { background: #2a1a4a; color: #c4b5fd; }
.wpayme-app--dark .wpayme-tint-6 { background: #332608; color: #fde047; }
.wpayme-app--dark .wpayme-tint-7 { background: #04302c; color: #5eead4; }
.wpayme-app--dark .wpayme-tint-8 { background: #3b0d0d; color: #fca5a5; }
.wpayme-app--dark .wpayme-tint-9 { background: #1e232b; color: #cbd5e1; }
.wpayme-app .wpayme-tile-id {
flex: 1;
min-width: 0;
}
.wpayme-app .wpayme-tile-name {
margin: 0;
padding: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
color: var(--wpa-text);
overflow-wrap: anywhere;
}
.wpayme-app .wpayme-tile-state {
margin: 3px 0 0;
font-size: 11px;
}
.wpayme-app .wpayme-state {
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wpayme-app .wpayme-state--on {
color: var(--wpa-success);
}
.wpayme-app .wpayme-state--off {
color: var(--wpa-text-faint);
}
.wpayme-app .wpayme-state--idle {
color: var(--wpa-warn);
}
/* The switch is a submit button, so it works with JavaScript disabled. */
.wpayme-app .wpayme-tile-switch {
flex: 0 0 auto;
margin: 0;
}
.wpayme-app .wpayme-switch {
position: relative;
display: block;
width: 42px;
height: 24px;
padding: 0;
border: 1px solid var(--wpa-border-strong);
border-radius: var(--wpa-radius-pill);
background: var(--wpa-surface-muted);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.wpayme-app .wpayme-switch::before {
content: "";
position: absolute;
top: 50%;
right: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
transform: translateY(-50%);
background: var(--wpa-surface);
box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
transition: transform 0.15s ease;
}
.wpayme-app .wpayme-switch[aria-checked="true"] {
background: var(--wpa-accent);
border-color: var(--wpa-accent);
}
.wpayme-app .wpayme-switch[aria-checked="true"]::before {
transform: translate(-18px, -50%);
}
.wpayme-app .wpayme-switch:focus-visible {
outline: 2px solid var(--wpa-accent);
outline-offset: 2px;
}
/* An integration whose host plugin is absent can be switched on - arming it
* before installing the plugin is reasonable - but it is not running. Dimming
* the switch keeps "on" readable as on while still saying it is not live;
* greying it out entirely made almost every card on this screen look off. */
.wpayme-app .wpayme-tile[data-detected="no"] .wpayme-switch[aria-checked="true"] {
opacity: 0.55;
}
.wpayme-app .wpayme-tile[data-detected="no"] {
border-color: var(--wpa-border);
}
.wpayme-app .wpayme-tile[data-detected="no"] .wpayme-tile-art {
background: var(--wpa-surface-muted);
color: var(--wpa-text-faint);
}
.wpayme-app .wpayme-tile-blurb {
margin: 0;
color: var(--wpa-text-muted);
font-size: 12.5px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wpayme-app .wpayme-browse-bulk.is-busy {
opacity: 0.6;
pointer-events: none;
}
.wpayme-app .wpayme-switch:disabled {
opacity: 0.6;
cursor: progress;
}
/* Both scheme icons are in the DOM so the switch can happen without a reload. */
.wpayme-app .wpayme-theme-icon {
display: inline-flex;
}
.wpayme-app .wpayme-theme-icon--dark,
.wpayme-app--dark .wpayme-theme-icon--light {
display: none;
}
.wpayme-app--dark .wpayme-theme-icon--dark {
display: inline-flex;
}
.wpayme-app .wpayme-tile-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.wpayme-app .wpayme-tag {
padding: 2px 8px;
border-radius: var(--wpa-radius-pill);
background: var(--wpa-surface-muted);
color: var(--wpa-text-muted);
font-size: 11px;
font-weight: 500;
text-transform: capitalize;
}
.wpayme-app .wpayme-tile-foot {
margin: auto 0 0;
font-size: 12px;
}
.wpayme-app .wpayme-tile-foot a {
color: var(--wpa-accent);
text-decoration: none;
}
.wpayme-app .wpayme-connect {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
border: 1px solid var(--wpa-border-strong);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface);
color: var(--wpa-text);
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
.wpayme-app .wpayme-connect:hover {
border-color: var(--wpa-accent);
background: var(--wpa-accent-soft);
color: var(--wpa-accent);
}
.wpayme-app .wpayme-connect svg {
width: 14px;
height: 14px;
}
.wpayme-app .wpayme-tile-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.wpayme-app .wpayme-tile-warn {
color: var(--wpa-warn);
font-weight: 500;
}
/*
* The forms list's Image column: as wide as the 40px thumbnail and the cell's
* padding, no wider. The header keeps its icon and hides the word, which would
* otherwise set the column's width; screen readers still hear "Image".
*/
.wpayme-app .wp-list-table .column-wpayme_form_thumbnail {
/* Content width: header cells add 14px of padding either side, so 68px in all. */
width: 40px;
}
.wpayme-app .wp-list-table th.column-wpayme_form_thumbnail .wpayme-th-icon > span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/*
* A form's product image in the list, and the empty frame that stands in for
* one: the same 40px square, radius and border, so the column lines up either
* way. Sized here because the forms stylesheet is not loaded on the list.
*/
.wpayme-app .wpayme-admin-thumbnail {
display: block;
box-sizing: border-box;
width: 40px;
height: 40px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius-sm);
object-fit: cover;
}
.wpayme-app .wpayme-admin-thumbnail--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--wpa-surface-muted);
color: var(--wpa-text-faint);
}
.wpayme-app .wpayme-admin-thumbnail--empty svg {
width: 20px;
height: 20px;
}
/* Test payment: currency and amount side by side, with room between them. */
.wpayme-app .wpayme-test-amount {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.wpayme-app .wpayme-test-amount select,
.wpayme-app .wpayme-test-amount input {
margin: 0;
}
/*
* Inside .form-table so these outrank its 240px select minimum and the
* regular-text width, which together pushed the amount onto its own line in
* the Test box's narrow column.
*/
.wpayme-app .form-table .wpayme-test-amount select {
flex: 0 0 auto;
width: auto;
min-width: 0;
}
/* The amount takes the rest of the row, and drops below only when it cannot fit. */
.wpayme-app .form-table .wpayme-test-amount input {
flex: 1 1 120px;
width: auto;
min-width: 0;
}
/* Secondary to Configure, and pushed against it so the flags keep the right. */
.wpayme-app .wpayme-tile-add {
margin-left: auto;
color: var(--wpa-text-muted) !important;
}
.wpayme-app .wpayme-tile-add:hover,
.wpayme-app .wpayme-tile-add:focus-visible {
color: var(--wpa-accent) !important;
text-decoration: underline;
}
.wpayme-app .wpayme-browse-empty {
padding: 40px;
border: 1px dashed var(--wpa-border-strong);
border-radius: var(--wpa-radius);
color: var(--wpa-text-muted);
text-align: center;
}
/* -------------------------------------------------------------------------
* WordPress submenu sections
*
* The headings are inert rows injected into the flat submenu list, so they must
* not look or behave like links.
* ---------------------------------------------------------------------- */
#adminmenu .wp-submenu a[href="#wpayme-section-commerce"],
#adminmenu .wp-submenu a[href^="#wpayme-section-"] {
pointer-events: none;
cursor: default;
padding-top: 12px;
padding-bottom: 2px;
}
#adminmenu .wp-submenu .wpayme-menu-section {
display: block;
color: #8c8f94;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* -------------------------------------------------------------------------
* Dashboard
* ---------------------------------------------------------------------- */
.wpayme-app .wpayme-dash-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
gap: 16px;
align-items: stretch;
margin-bottom: 24px;
}
/* Setup and activity are one column, not two independently placed cards. Left
* as separate grid items they sized independently of the chart beside them and
* left a hole under whichever side was shorter. */
.wpayme-app .wpayme-dash-side {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
/* Fill the row so the two columns end level whatever the chart contains. */
.wpayme-app .wpayme-dash-chart {
height: 100%;
}
.wpayme-app .wpayme-dash-chart .wpayme-card-body {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
}
.wpayme-app .wpayme-dash-chart {
display: flex;
flex-direction: column;
}
@media screen and (max-width: 1100px) {
.wpayme-app .wpayme-dash-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* The payments table spans the full width; the chart and setup card share a row. */
.wpayme-app .wpayme-dash-recent {
grid-column: 1 / -1;
}
.wpayme-app .wpayme-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.wpayme-app .wpayme-card-action {
color: var(--wpa-accent);
font-size: 12px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
/* Activity feed. */
.wpayme-app .wpayme-feed {
margin: 0;
padding: 0;
list-style: none;
}
.wpayme-app .wpayme-feed-item {
display: flex;
align-items: baseline;
gap: 8px;
padding: 9px 0;
font-size: 13px;
color: var(--wpa-text);
}
.wpayme-app .wpayme-feed-item + .wpayme-feed-item {
border-top: 1px solid var(--wpa-border);
}
.wpayme-app .wpayme-feed-text {
flex: 1;
min-width: 0;
}
.wpayme-app .wpayme-feed-text a {
color: var(--wpa-accent);
text-decoration: none;
}
.wpayme-app .wpayme-feed-when {
flex: 0 0 auto;
color: var(--wpa-text-faint);
font-size: 11px;
white-space: nowrap;
}
.wpayme-app .wpayme-empty-note {
margin: 0;
padding: 26px 0;
color: var(--wpa-text-muted);
font-size: 13px;
text-align: center;
}
/* Area chart. Server-rendered SVG, so it is styled rather than configured. */
.wpayme-app .wpayme-spark {
display: block;
width: 100%;
height: 180px;
overflow: visible;
}
.wpayme-app .wpayme-spark-fill {
fill: var(--wpa-accent);
opacity: 0.12;
}
.wpayme-app .wpayme-spark-line {
fill: none;
stroke: var(--wpa-accent);
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
/* Stat card trend: a faint 30-day line along the bottom edge, behind the text. */
.wpayme-app .wpayme-stats > .wpayme-stat {
position: relative;
overflow: hidden;
}
.wpayme-app .wpayme-spark--mini {
position: absolute;
right: 0;
left: 0;
bottom: 0;
height: 34px;
opacity: 0.55;
pointer-events: none;
}
.wpayme-app .wpayme-spark--mini .wpayme-spark-line { stroke-width: 1.5; }
.wpayme-app .wpayme-spark--mini .wpayme-spark-fill { opacity: 0.1; }
.wpayme-app .wpayme-stat > :not(.wpayme-spark) {
position: relative;
}
.wpayme-app .wpayme-spark--warn .wpayme-spark-line { stroke: var(--wpa-warn); }
.wpayme-app .wpayme-spark--warn .wpayme-spark-fill { fill: var(--wpa-warn); }
.wpayme-app .wpayme-spark--danger .wpayme-spark-line { stroke: var(--wpa-danger); }
.wpayme-app .wpayme-spark--success .wpayme-spark-line { stroke: var(--wpa-success); }
.wpayme-app .wpayme-spark--success .wpayme-spark-fill { fill: var(--wpa-success); }
.wpayme-app .wpayme-spark--danger .wpayme-spark-fill { fill: var(--wpa-danger); }
.wpayme-app .wpayme-chart-foot {
margin: 10px 0 0;
color: var(--wpa-text-muted);
font-size: 12px;
}
/* Setup checklist. */
.wpayme-app .wpayme-checklist {
margin: 0;
padding: 0;
list-style: none;
}
.wpayme-app .wpayme-check {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 0;
font-size: 13px;
color: var(--wpa-text);
}
.wpayme-app .wpayme-check + .wpayme-check {
border-top: 1px solid var(--wpa-border);
}
.wpayme-app .wpayme-check-mark {
flex: 0 0 auto;
width: 18px;
height: 18px;
border: 2px solid var(--wpa-border-strong);
border-radius: 50%;
}
.wpayme-app .wpayme-check.is-done .wpayme-check-mark {
position: relative;
border-color: var(--wpa-success);
background: var(--wpa-success);
}
.wpayme-app .wpayme-check.is-done .wpayme-check-mark::after {
content: "";
position: absolute;
right: 4px;
top: 1px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 0 2px 2px;
transform: rotate(-45deg);
}
.wpayme-app .wpayme-check.is-done .wpayme-check-label {
color: var(--wpa-text-muted);
text-decoration: line-through;
}
.wpayme-app .wpayme-check-label {
flex: 1;
}
.wpayme-app .wpayme-check-cta {
color: var(--wpa-accent);
font-size: 12px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
/* Payment status pills, mapped to the PaymentStatus constants. */
.wpayme-app .wpayme-pill--completed { background: var(--wpa-success-soft); color: var(--wpa-success); }
.wpayme-app .wpayme-pill--pending { background: var(--wpa-warn-soft); color: var(--wpa-warn); }
.wpayme-app .wpayme-pill--failed,
.wpayme-app .wpayme-pill--expired { background: var(--wpa-danger-soft); color: var(--wpa-danger); }
.wpayme-app .wpayme-pill--cancelled,
.wpayme-app .wpayme-pill--refunded { background: var(--wpa-surface-muted); color: var(--wpa-text-muted); }
.wpayme-app .wpayme-stat {
text-decoration: none;
}
/* Every tile grows to share the row, so the last row is never short. */
.wpayme-app .wpayme-stats > .wpayme-stat {
min-width: 0;
}
/* Pro tag. Sits in the card corner, so the tile needs to be a containing block. */
.wpayme-app .wpayme-tile {
position: relative;
}
.wpayme-app .wpayme-tile-pro {
position: absolute;
top: 0;
left: 0;
padding: 3px 9px;
border-radius: var(--wpa-radius) 0 var(--wpa-radius) 0;
background: var(--wpa-warn);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.4;
}
.wpayme-app a.wpayme-tile-pro:hover,
.wpayme-app a.wpayme-tile-pro:focus-visible {
color: #fff;
filter: brightness(1.08);
}
/* Free build: what Pro adds, under the grid. */
.wpayme-app .wpayme-upsell {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
margin-top: 20px;
padding: 18px 20px;
border: 1px solid var(--wpa-border);
border-right: 4px solid var(--wpa-warn);
border-radius: var(--wpa-radius);
background: var(--wpa-surface);
box-shadow: var(--wpa-shadow);
}
.wpayme-app .wpayme-upsell-title {
margin: 0 0 2px;
font-size: 15px;
font-weight: 700;
color: var(--wpa-text);
}
.wpayme-app .wpayme-upsell-text {
margin: 0;
color: var(--wpa-text-muted);
}
/* Keep the switch clear of the tag rather than tucked under it. */
.wpayme-app .wpayme-tile-pro + .wpayme-tile-head {
padding-top: 14px;
}
/* -------------------------------------------------------------------------
* Activity log
* ---------------------------------------------------------------------- */
.wpayme-app .wpayme-retention {
margin-right: 8px;
color: var(--wpa-text-faint);
}
.wpayme-app .wpayme-activity-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 16px;
}
.wpayme-app .wpayme-activity-filters select,
.wpayme-app .wpayme-activity-filters input[type="search"] {
box-sizing: border-box;
height: 34px;
min-height: 34px;
padding: 0 10px;
border: 1px solid var(--wpa-border-strong);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface);
color: var(--wpa-text);
box-shadow: none;
}
.wpayme-app .wpayme-activity-filters input[type="search"] {
min-width: 220px;
}
.wpayme-app .wpayme-log {
width: 100%;
}
.wpayme-app .wpayme-log-when {
color: var(--wpa-text-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Severity reads from a dot rather than a coloured row: a table of tinted rows
* is unreadable once more than a few of them are warnings. */
.wpayme-app .wpayme-log-dot {
display: inline-block;
width: 7px;
height: 7px;
margin-left: 8px;
border-radius: 50%;
background: var(--wpa-text-faint);
vertical-align: middle;
}
.wpayme-app .wpayme-log-row--1 .wpayme-log-dot { background: var(--wpa-success); }
.wpayme-app .wpayme-log-row--2 .wpayme-log-dot { background: var(--wpa-warn); }
.wpayme-app .wpayme-log-row--3 .wpayme-log-dot { background: var(--wpa-danger); }
.wpayme-app .wpayme-log-context {
color: var(--wpa-text-muted);
font-size: 12px;
}
.wpayme-app .wpayme-kv {
display: inline-block;
margin-left: 10px;
white-space: nowrap;
}
.wpayme-app .wpayme-kv em {
color: var(--wpa-text-faint);
font-style: normal;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.04em;
margin-left: 3px;
}
.wpayme-app .wpayme-btn--export {
display: inline-flex;
align-items: center;
margin-right: auto;
border-color: var(--wpa-accent);
color: var(--wpa-accent);
text-decoration: none;
line-height: 32px;
}
.wpayme-app .wpayme-btn--export:hover {
background: var(--wpa-accent-soft);
color: var(--wpa-accent);
}
/* Money inside a stat tile. A single figure keeps the full tile type size; two
* or more currencies step down and stack, because three lines of 20px bold
* overflow the card and read as broken. */
.wpayme-app .wpayme-amounts {
display: block;
}
.wpayme-app .wpayme-amount {
display: block;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.wpayme-app .wpayme-amounts--multi {
font-size: 14px;
line-height: 1.5;
font-weight: 600;
}
.wpayme-app .wpayme-amounts--multi .wpayme-amount + .wpayme-amount {
color: var(--wpa-text-muted);
}
/* -------------------------------------------------------------------------
* Empty states
*
* A card with nothing in it reads as broken. The plate gives the space a
* deliberate shape, and the copy says what will fill it.
* ---------------------------------------------------------------------- */
.wpayme-app .wpayme-blank {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 34px 20px 38px;
text-align: center;
}
.wpayme-app .wpayme-blank-plate {
display: flex;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
margin-bottom: 12px;
border-radius: 50%;
background: var(--wpa-accent-soft);
font-size: 34px;
line-height: 1;
/* Emoji are colour glyphs; a fallback stack keeps them from boxing out. */
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
/* A soft ring, so the plate reads as illustration rather than a stray avatar. */
.wpayme-app .wpayme-blank-plate::before {
content: "";
position: absolute;
width: 106px;
height: 106px;
border: 1px dashed var(--wpa-border-strong);
border-radius: 50%;
opacity: 0.7;
}
.wpayme-app .wpayme-blank {
position: relative;
}
.wpayme-app .wpayme-blank-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--wpa-text);
}
.wpayme-app .wpayme-blank-text {
margin: 0;
max-width: 42ch;
color: var(--wpa-text-muted);
font-size: 13px;
line-height: 1.55;
}
.wpayme-app .wpayme-blank-cta {
display: inline-flex;
align-items: center;
height: 32px;
margin-top: 14px;
padding: 0 16px;
border-radius: var(--wpa-radius-sm);
background: var(--wpa-accent);
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.wpayme-app .wpayme-blank-cta:hover,
.wpayme-app .wpayme-blank-cta:focus {
color: #fff;
filter: brightness(1.08);
}
/* The activity feed sits in a narrow column, so its plate scales down. */
.wpayme-app .wpayme-dash-activity .wpayme-blank {
padding: 22px 12px 26px;
}
.wpayme-app .wpayme-dash-activity .wpayme-blank-plate {
width: 58px;
height: 58px;
font-size: 26px;
}
.wpayme-app .wpayme-dash-activity .wpayme-blank-plate::before {
width: 84px;
height: 84px;
}
/* -------------------------------------------------------------------------
* Post edit screens
*
* The gateway configuration and payment editors are stock WordPress metabox
* screens. Nothing here changes their markup - the settings-field system they
* are built on is the good part - it only brings the chrome in line.
* ---------------------------------------------------------------------- */
.wpayme-app #poststuff .postbox {
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
background: var(--wpa-surface);
box-shadow: var(--wpa-shadow);
overflow: hidden;
}
/*
* A card holding a dropdown cannot clip its own contents.
*
* The overflow above keeps the header's background inside the card's rounded
* corners, but it also cut the multiselect's panel off at the bottom edge of
* the card - the list opened and simply was not visible. Only the cards that
* contain one give that clipping up.
*/
.wpayme-app #poststuff .postbox:has(.wpayme-ms) {
overflow: visible;
}
.wpayme-app #poststuff .postbox-header {
border-bottom: 1px solid var(--wpa-border);
background: var(--wpa-surface);
/* Matches the 16px the title and .inside already use, so the collapse
* control lines up with the panel's content edge. */
padding-left: 16px;
}
.wpayme-app #poststuff .postbox .hndle {
padding: 14px 16px;
border: 0;
font-size: 14px;
font-weight: 600;
color: var(--wpa-text);
}
.wpayme-app #poststuff .postbox .inside {
margin: 0;
padding: 16px;
}
/* Reordering two metaboxes is noise here, but the controls stay reachable for
* keyboard users rather than being removed outright. */
.wpayme-app #poststuff .handle-order-higher,
.wpayme-app #poststuff .handle-order-lower {
opacity: 0;
width: 1.62rem;
}
.wpayme-app #poststuff .postbox-header:hover .handle-order-higher,
.wpayme-app #poststuff .postbox-header:hover .handle-order-lower,
.wpayme-app #poststuff .handle-order-higher:focus,
.wpayme-app #poststuff .handle-order-lower:focus {
opacity: 1;
}
.wpayme-app #poststuff .handlediv,
.wpayme-app #poststuff .handle-order-higher,
.wpayme-app #poststuff .handle-order-lower {
color: var(--wpa-text-faint);
}
/*
* The permalink row under the title.
*
* WordPress prints the container on every screen and fills it only once a
* permalink exists, so on a new post it is an empty 25px strip that reads as a
* gap between the title and the first panel. :empty cannot catch it - the
* container holds whitespace - so emptiness is tested by what it contains, and
* the row reappears by itself the moment WordPress puts something in it.
*/
.wpayme-app #titlediv .inside #edit-slug-box:not(:has(*)) {
display: none;
}
/*
* The permalink Edit button. WordPress gives .button-small a min-height that
* outweighs its own line-height, so it stood 32px tall next to 11px text.
* Sized by its line box instead - and carrying #poststuff, because the button
* height set for that column would otherwise win on specificity.
*/
.wpayme-app .button.button-small,
.wpayme-app #poststuff .button.button-small {
height: auto;
min-height: 0;
padding: 2px 9px;
line-height: 1.6;
}
.wpayme-app #titlediv .inside {
margin: 0;
padding: 0;
}
/* Title. */
.wpayme-app #titlediv #title {
height: 46px;
padding: 0 14px;
border: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
background: var(--wpa-surface);
box-shadow: var(--wpa-shadow);
color: var(--wpa-text);
font-size: 17px;
font-weight: 600;
}
.wpayme-app #titlediv #title:focus {
border-color: var(--wpa-accent);
outline: 2px solid var(--wpa-accent-soft);
box-shadow: none;
}
.wpayme-app #titlediv #title-prompt-text {
padding: 12px 15px;
color: var(--wpa-text-faint);
font-size: 15px;
font-weight: 400;
}
/* Gateway settings tabs. These are plain elements driven by the existing
* jQuery editor, so only their appearance changes. */
.wpayme-app .wpayme-pay-tabs-items {
display: flex;
flex-wrap: wrap;
float: none;
gap: 4px;
width: auto;
margin: 0 0 18px;
padding: 6px;
border: 1px solid var(--wpa-border);
border-bottom: 1px solid var(--wpa-border);
border-radius: var(--wpa-radius);
background: var(--wpa-surface-muted);
}
.wpayme-app .wpayme-pay-tabs-items li {
display: inline-flex;
align-items: center;
float: none;
margin: 0;
padding: 7px 14px;
border: 0;
border-radius: var(--wpa-radius-sm);
background: none;
color: var(--wpa-text-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
.wpayme-app .wpayme-pay-tabs-items li:hover {
background: var(--wpa-surface);
color: var(--wpa-text);
}
.wpayme-app .wpayme-pay-tabs-items li.active {
margin-top: 0;
border: 0;
border-top: 0;
background: var(--wpa-accent);
color: #fff;
font-weight: 600;
}
.wpayme-app .wpayme-pay-tabs-items li.active::after {
content: none;
}
.wpayme-app .wpayme-pay-tab {
clear: both;
}
/* Section heading inside a tab panel. */
.wpayme-app .gateway-config-section-header h4 {
margin: 0 0 6px;
padding: 0;
color: var(--wpa-text-faint);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Settings tables inside a metabox get the same treatment as the Settings
* screen, minus the card wrapper the metabox already provides. */
.wpayme-app #poststuff .postbox .form-table {
margin: 0;
}
.wpayme-app #poststuff .postbox .form-table th {
width: 240px;
/* Breathing room on both axes; the cells were sitting flush to the card. */
padding: 16px 8px 16px 22px;
background: none;
font-size: 13px;
font-weight: 600;
color: var(--wpa-text);
vertical-align: top;
line-height: 1.5;
}
.wpayme-app #poststuff .postbox .form-table td {
padding: 16px 8px;
background: none;
vertical-align: top;
}
/* The alternating row shading fights the card; a hairline reads better. */
.wpayme-app #poststuff .postbox .form-table tr.even > th,
.wpayme-app #poststuff .postbox .form-table tr.even > td,
.wpayme-app #poststuff .postbox .form-table tr.alternate > th,
.wpayme-app #poststuff .postbox .form-table tr.alternate > td {
background: none;
}
.wpayme-app #poststuff .postbox .form-table tr + tr > th,
.wpayme-app #poststuff .postbox .form-table tr + tr > td {
border-top: 1px solid var(--wpa-border);
}
.wpayme-app #poststuff .postbox .form-table input[type="text"],
.wpayme-app #poststuff .postbox .form-table input[type="url"],
.wpayme-app #poststuff .postbox .form-table input[type="email"],
.wpayme-app #poststuff .postbox .form-table input[type="number"],
.wpayme-app #poststuff .postbox .form-table input[type="password"],
.wpayme-app #poststuff .postbox .form-table select,
.wpayme-app #poststuff .postbox .form-table textarea {
min-height: 34px;
padding: 6px 10px;
border: 1px solid var(--wpa-border-strong);
border-radius: var(--wpa-radius-sm);
background: var(--wpa-surface);
color: var(--wpa-text);
box-shadow: none;
max-width: 100%;
}
.wpayme-app #poststuff .postbox .form-table input:focus,
.wpayme-app #poststuff .postbox .form-table select:focus,
.wpayme-app #poststuff .postbox .form-table textarea:focus {
border-color: var(--wpa-accent);
outline: 2px solid var(--wpa-accent-soft);
box-shadow: none;
}
/*
* Fields with a symbol in front of them.
*
* The coupon metabox absolutely positions a currency or percent sign over the
* left of the input and reserves room for it with an id selector. The field
* padding in this stylesheet carries #poststuff, which outweighs that id, so
* the reserved space was quietly lost and the symbol sat on top of the
* placeholder. Restated here at a specificity that holds.
*/
.wpayme-app #poststuff .wpayme-field-row .wpayme-input-group input[type="number"],
.wpayme-app #poststuff .wpayme-field-row .wpayme-input-group input[type="text"] {
padding-right: 28px;
}
.wpayme-app #poststuff .wpayme-field-row .wpayme-input-group-prefix {
right: 11px;
color: var(--wpa-text-muted);
font-weight: 600;
pointer-events: none;
}
/*
* A multiple select is the one |