/* * AffKeeper admin — mirrors the panel's look (violet accent, white cards, pill badges, Inter) * so the WordPress screens read as one product with the panel. Everything is scoped under * .affkeeper-wrap so it never leaks into WordPress admin chrome. */ @import url( 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap' ); /* Palette variables for BOTH roots (modals mount outside the wrap). Layout props stay on the wrap only — putting max-width on the modal backdrop once shrank it to a 1180px strip. */ .affkeeper-wrap, .affkeeper-modal-bg { --ak-brand:#8b5cf6; --ak-brand-hover:#7c3aed; --ak-card:#fff; --ak-border:#e4e4e7; --ak-fg:#18181b; --ak-muted:#71717a; --ak-bg:#fafafa; --ak-radius:.75rem; --ak-radius-sm:.5rem; } .affkeeper-modal-bg { font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; letter-spacing:-.011em; } .affkeeper-wrap { font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; letter-spacing:-.011em; color:var(--ak-fg); max-width:1180px; } .affkeeper-wrap * { box-sizing:border-box; } .affkeeper-wrap h1 { font-weight:600; letter-spacing:-.02em; } .affkeeper-muted { color:var(--ak-muted); } /* [hidden] must win over our display rules (e.g. .affkeeper-field > span{display:block}) */ .affkeeper-wrap [hidden], .affkeeper-modal-bg [hidden] { display:none !important; } /* header row */ .affkeeper-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:6px 0 18px; } /* admin notices land after .wp-header-end (see the marker in the templates) — card look, no jumble */ .affkeeper-wrap .notice { border:1px solid var(--ak-border); border-left-width:4px; border-radius:var(--ak-radius-sm); box-shadow:0 1px 2px rgba(0,0,0,.04); margin:0 0 14px; padding:10px 14px; } .affkeeper-wrap .notice p { font-size:13.5px; } .affkeeper-wrap .notice-success { border-left-color:#0a7a48; } .affkeeper-wrap .notice-error { border-left-color:#e5484d; } .affkeeper-wrap .notice-warning { border-left-color:#b45309; } .affkeeper-wrap .notice-info { border-left-color:var(--ak-brand); } /* brand lockup: reserved logo slot (domain wordmark for now) + page title */ .affkeeper-brand { display:flex; align-items:center; gap:14px; min-width:0; } .affkeeper-logo { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:34px; padding:0 12px; border-radius:var(--ak-radius-sm); background:var(--ak-brand); color:#fff; font-weight:700; font-size:14px; letter-spacing:-.01em; white-space:nowrap; } .affkeeper-logo--img { padding:0; background:transparent; max-height:34px; width:auto; } .affkeeper-brand-text { display:flex; flex-direction:column; gap:1px; min-width:0; } .affkeeper-wrap h1.affkeeper-brand-title { margin:0; padding:0; font-size:20px; font-weight:600; line-height:1.25; color:var(--ak-fg); } .affkeeper-brand-sub { font-size:13px; font-weight:400; line-height:1.3; color:var(--ak-muted); } @media (max-width:600px){ .affkeeper-brand-sub { display:none; } } /* summary tiles */ .affkeeper-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; } @media (max-width:782px){ .affkeeper-tiles { grid-template-columns:repeat(2,1fr); } } .affkeeper-tile { background:var(--ak-card); border:1px solid var(--ak-border); border-radius:var(--ak-radius); box-shadow:0 1px 2px rgba(0,0,0,.04); padding:16px 18px; display:flex; flex-direction:column; gap:2px; } .affkeeper-tile-value { font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; } .affkeeper-tile-label { font-size:12px; font-weight:500; color:var(--ak-muted); text-transform:uppercase; letter-spacing:.06em; } .affkeeper-tile-sub { font-size:14px; font-weight:600; color:var(--ak-muted); letter-spacing:0; } .affkeeper-tile--alert .affkeeper-tile-value, .affkeeper-tile--alert .affkeeper-tile-label { color:#c0362c; } .affkeeper-tile--ok .affkeeper-tile-value, .affkeeper-tile--ok .affkeeper-tile-label { color:#0a7a48; } /* connect (upsell) banner — free tier only */ .affkeeper-connect { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; background:linear-gradient(90deg, #f5f3ff, #faf5ff); border:1px solid #e9d5ff; border-radius:var(--ak-radius); padding:14px 18px; margin-bottom:18px; } .affkeeper-connect-text { font-size:13.5px; color:#4b3f6b; line-height:1.5; flex:1 1 340px; } .affkeeper-connect-text strong { display:block; margin-bottom:3px; color:var(--ak-brand-hover); font-weight:700; } .affkeeper-wrap .affkeeper-connect-btn { flex:0 0 auto; } /* toolbar */ .affkeeper-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; } /* higher specificity (input.class) so WordPress's default input[type=search] border doesn't win */ .affkeeper-wrap input.affkeeper-search { flex:1; min-width:220px; max-width:360px; padding:.5rem .8rem; font-size:14px; line-height:1.4; border:1px solid var(--ak-border); border-radius:var(--ak-radius-sm); background:#fff; color:var(--ak-fg); box-shadow:none; min-height:38px; box-sizing:border-box; } .affkeeper-wrap input.affkeeper-search::placeholder { color:var(--ak-muted); } .affkeeper-wrap input.affkeeper-search:focus { outline:none; border-color:var(--ak-brand); box-shadow:0 0 0 3px rgba(139,92,246,.15); } /* filter group height is locked to the search input's so the two line up exactly */ .affkeeper-filters { display:inline-flex; align-items:stretch; gap:4px; background:#f4f4f5; border-radius:var(--ak-radius-sm); padding:4px; min-height:38px; box-sizing:border-box; } .affkeeper-filter { display:inline-flex; align-items:center; border:0; background:transparent; padding:0 .85rem; font-size:13.5px; font-weight:500; color:var(--ak-muted); border-radius:calc(var(--ak-radius-sm) - 2px); cursor:pointer; transition:all .15s; line-height:1; } .affkeeper-filter:hover { color:var(--ak-fg); } .affkeeper-filter.is-active { background:#fff; color:var(--ak-fg); box-shadow:0 1px 2px rgba(0,0,0,.08); } /* sort dropdown (native select, styled) */ .affkeeper-sort-wrap { margin-left:auto; } .affkeeper-wrap select.affkeeper-sort { appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; min-height:38px; box-sizing:border-box; padding:.5rem 32px .5rem .7rem; font-size:13.5px; line-height:1.4; border:1px solid var(--ak-border); border-radius:var(--ak-radius-sm); background-color:#fff; color:var(--ak-fg); box-shadow:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; } .affkeeper-wrap select.affkeeper-sort:focus { outline:none; border-color:var(--ak-brand); box-shadow:0 0 0 3px rgba(139,92,246,.18); } /* styled confirm dialog (replaces window.confirm) */ .affkeeper-confirm-card { max-width:420px; text-align:center; } .affkeeper-confirm-icon { width:48px; height:48px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(244,63,94,.12); color:#c0362c; } .affkeeper-confirm-title { margin:0 0 8px; font-size:18px; font-weight:600; letter-spacing:-.01em; } .affkeeper-confirm-msg { margin:0; font-size:14px; color:var(--ak-muted); line-height:1.6; } .affkeeper-confirm-card .affkeeper-modal-actions { justify-content:center; margin-top:20px; } .affkeeper-wrap .affkeeper-btn-danger, .affkeeper-confirm-card .affkeeper-btn-danger { /* Same box as every other button in our UI — only the colour says "danger". */ display:inline-flex; align-items:center; justify-content:center; height:34px; min-height:34px; padding:0 1rem; line-height:1; font-size:13px; font-weight:600; background:#e5484d; border:1px solid #e5484d; color:#fff; text-shadow:none; border-radius:var(--ak-radius-sm); } .wp-core-ui .affkeeper-wrap .affkeeper-btn-danger:hover, .wp-core-ui .affkeeper-confirm-card .affkeeper-btn-danger:hover, .affkeeper-confirm-card .affkeeper-btn-danger:hover { background:#c0362c; border-color:#c0362c; color:#fff; } /* Danger owns its focus/active too — WP colour schemes (e.g. Modern's indigo) must never bleed in. */ .wp-core-ui .affkeeper-wrap .affkeeper-btn-danger:focus, .wp-core-ui .affkeeper-confirm-card .affkeeper-btn-danger:focus, .affkeeper-confirm-card .affkeeper-btn-danger:focus, .wp-core-ui .affkeeper-wrap .affkeeper-btn-danger:active, .wp-core-ui .affkeeper-confirm-card .affkeeper-btn-danger:active, .affkeeper-confirm-card .affkeeper-btn-danger:active { background:#e5484d; border-color:#c0362c; color:#fff; outline:none; box-shadow:0 0 0 3px rgba(229,72,77,.3); } /* table — panel style */ .affkeeper-table { width:100%; border-collapse:separate; border-spacing:0; background:var(--ak-card); border:1px solid var(--ak-border); border-radius:var(--ak-radius); overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04); } .affkeeper-table thead th { font-size:11px; font-weight:600; color:var(--ak-muted); text-align:left; padding:11px 16px; border-bottom:1px solid var(--ak-border); text-transform:uppercase; letter-spacing:.06em; background:#fafafa; } .affkeeper-table tbody td { font-size:14px; color:var(--ak-fg); padding:12px 16px; border-bottom:1px solid #f0f0f1; vertical-align:middle; } .affkeeper-table tbody tr:last-child td { border-bottom:0; } .affkeeper-table tbody tr:hover { background:#faf9ff; } .affkeeper-num { text-align:center; font-variant-numeric:tabular-nums; } /* badges and counts sit centred under their column headers */ .affkeeper-table th.affkeeper-col-avail, .affkeeper-table td.affkeeper-cell-avail { text-align:center; } .affkeeper-empty { text-align:center; color:var(--ak-muted); padding:28px 16px !important; } .affkeeper-hidden-search, .affkeeper-hidden-filter, .affkeeper-hidden-page { display:none; } /* brand mark inside the Open-panel button — says whose panel it opens */ .affkeeper-btn-mark { width:18px; height:18px; flex:0 0 auto; margin-left:6px; } /* a disabled dependent checkbox reads as unavailable, not broken */ .affkeeper-check input:disabled { cursor:not-allowed; } .affkeeper-check input:disabled + span { opacity:.45; } .affkeeper-check-hint a { color:var(--ak-brand-hover); font-weight:600; text-decoration:none; } .affkeeper-check-hint a:hover { text-decoration:underline; } /* mini brand mark replaces the outbound arrow on panel-opening actions */ .affkeeper-mark-inline { width:15px; height:15px; flex:0 0 auto; margin-top:-2px; } .affkeeper-slug-unlock { float:right; font-size:12px; font-weight:600; color:var(--ak-brand-hover); text-decoration:none; } .affkeeper-slug-unlock:hover { text-decoration:underline; } .affkeeper-field input[readonly] { background:#f6f7f7; color:var(--ak-muted); cursor:default; } /* Every plain link in plugin UI is brand violet — never WP-admin navy. Buttons, row actions and pills style themselves, so they're excluded. */ .affkeeper-wrap a:not(.button):not(.affkeeper-action):not(.affkeeper-dest), .affkeeper-modal-bg a:not(.button):not(.affkeeper-action) { color:var(--ak-brand-hover); } .affkeeper-wrap a:not(.button):not(.affkeeper-action):not(.affkeeper-dest):hover, .affkeeper-modal-bg a:not(.button):not(.affkeeper-action):hover { color:var(--ak-brand); } .affkeeper-wrap a:not(.button):focus, .affkeeper-modal-bg a:not(.button):focus { outline:none; box-shadow:0 0 0 2px rgba(139,92,246,.3); border-radius:3px; } /* pager under the table */ .affkeeper-pager { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:12px; } .affkeeper-pager-info { font-size:13px; color:var(--ak-muted); } .affkeeper-pager .button { min-width:34px; padding:0 .65rem; } .affkeeper-pager .button:disabled { opacity:.45; cursor:default; } .affkeeper-cell-link a { text-decoration:none; } .affkeeper-cell-link code { font-size:12.5px; color:var(--ak-brand-hover); background:transparent; padding:0; } /* links living on THIS site are green like their "On your site" badge; panel-hosted stay violet */ .affkeeper-cell-link code.affkeeper-code--local { color:#0a7a48; } /* second line: where the short link points — a bare "leads to" arrow (not part of the link) followed by a quiet grey URL, so it never reads as another short link */ .affkeeper-dest-line { display:flex; align-items:baseline; gap:5px; margin-top:2px; max-width:360px; } .affkeeper-dest-line .affkeeper-dest-arrow { color:#a7aaad; font-size:12px; line-height:1.3; } .affkeeper-cell-link a.affkeeper-dest { display:block; min-width:0; font-size:12px; line-height:1.3; color:var(--ak-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .affkeeper-cell-link a.affkeeper-dest:hover { color:var(--ak-brand-hover); text-decoration:underline; } .affkeeper-cell-product { max-width:420px; } /* marketplace titles run to hundreds of chars — cap the display, full name in the tooltip */ .affkeeper-cell-product .affkeeper-product-name { display:inline-block; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; color:#50575e; } /* modal header: title left, optional "Edit in panel" jump right */ .affkeeper-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } /* the h2 keeps its usual bottom margin for the intro below — kill it inside the flex row and put the spacing on the row itself, so the jump button sits level with the title */ .affkeeper-modal-bg .affkeeper-modal-head h2 { margin:0 auto 0 0; padding:0; } .affkeeper-modal-head { margin-bottom:10px; } .affkeeper-modal-bg a.affkeeper-panel-jump { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--ak-fg); text-decoration:none; border:1px solid var(--ak-border); border-radius:var(--ak-radius-sm); padding:5px 10px; transition:all .15s; } .affkeeper-modal-bg a.affkeeper-panel-jump:hover { color:var(--ak-fg); border-color:#d4d4d8; background:#fafafa; } .affkeeper-panel-jump .affkeeper-mark-inline { width:15px; height:15px; margin-top:-1px; } /* copy-shortcode: a compact icon button, quiet until row/hover, checkmark on success */ .affkeeper-copy { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:0; background:transparent; color:var(--ak-muted); border-radius:6px; cursor:pointer; opacity:.55; transition:all .15s; padding:0; } .affkeeper-row:hover .affkeeper-copy { opacity:1; } .affkeeper-copy:hover { background:#ede9fe; color:var(--ak-brand-hover); } .affkeeper-copy svg { display:block; } .affkeeper-copy-ok { display:none; } .affkeeper-copy.is-copied { background:rgba(16,185,129,.13); color:#0a7a48; opacity:1; } .affkeeper-copy.is-copied .affkeeper-copy-ic { display:none; } .affkeeper-copy.is-copied .affkeeper-copy-ok { display:inline-flex; } /* pills (availability) — panel palette adapted for a light table */ .affkeeper-pill { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.5; } .affkeeper-pill--ok { background:rgba(16,185,129,.12); color:#0a7a48; box-shadow:inset 0 0 0 1px rgba(16,185,129,.22); } .affkeeper-pill--low { background:rgba(245,158,11,.14); color:#a15c00; box-shadow:inset 0 0 0 1px rgba(245,158,11,.3); } .affkeeper-pill--out { background:rgba(244,63,94,.12); color:#c0362c; box-shadow:inset 0 0 0 1px rgba(244,63,94,.24); } .affkeeper-pill--muted { background:#f0f0f1; color:var(--ak-muted); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); } /* row actions — visible but quiet, panel ghost-button feel; emphasised on row hover */ .affkeeper-actions { text-align:right; white-space:nowrap; } /* Fixed-width, left-aligned Edit slot: rows with the "opens the panel" arrow and rows without start the word "Edit" at the same x — the arrow can't push the label around. */ .affkeeper-actions .affkeeper-action--open { width:66px; min-width:66px; display:inline-flex; align-items:center; justify-content:center; gap:4px; } /* one box model for all three (Details is an , Edit/Delete are