ranger
117eaddaa0
Reviewer flagged inc/about.php line 19 — an inline <style> block — asking us to use wp_enqueue_style instead. Per their hint that the team may not list every instance of an issue, fixed the entire CSS inline-styling pattern across the plugin: - inc/about.php: <style> block (lines 19-59) → moved to buddy.css - inc/about.php: <span style="color:#646970; font-weight:400;"> → .buddy-about-intro__version class - inc/about.php: <p style="margin-bottom:0;"> → .buddy-about-intro__cta - inc/settings.php: <form style="..."> → .buddy-settings-form class - inc/settings.php: <h2 style="margin-top:0;"> → scoped under form class - inc/admin-page.php: <p style="max-width:720px;"> → .buddy-admin-description utility class The only remaining inline style is in inc/dashboard-widget.php at the stat-bar width — that is a runtime-computed %d value, legitimately inline. The buddy.css file was already enqueued on the About / Settings / Admin / Dashboard pages via the existing buddy_enqueue_admin_assets function, so no new enqueue logic was needed. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
252 lines
7.0 KiB
CSS
252 lines
7.0 KiB
CSS
/*
|
|
* Buddy plugin styles.
|
|
* Scoped via .buddy-* class names so we don't bleed into the WP admin.
|
|
* No external fonts, no @import, no images — just inline-SVG + plain CSS.
|
|
*/
|
|
|
|
/* ── Sprite (the character) ──────────────────────────────────────── */
|
|
|
|
.buddy-sprite {
|
|
display: block;
|
|
user-select: none;
|
|
animation: buddyBob 4s ease-in-out infinite;
|
|
}
|
|
.buddy-sprite--sm { width: 64px; height: 64px; }
|
|
.buddy-sprite--md { width: 96px; height: 96px; }
|
|
.buddy-sprite--lg { width: 160px; height: 160px; }
|
|
|
|
/* Eyes blink every ~5s. The fast-step keyframes simulate a quick blink. */
|
|
.buddy-sprite__eye {
|
|
transform-origin: center;
|
|
animation: buddyBlink 5s infinite;
|
|
}
|
|
.buddy-sprite--sad .buddy-sprite__eye {
|
|
animation-duration: 7s; /* sadder Buddy blinks slower */
|
|
}
|
|
|
|
/* Cheeky wink: when the mood-label picks the 'wink' tone, the LEFT eye
|
|
runs a faster, more dramatic keyframe that closes for ~250ms every
|
|
2.5s. The right eye keeps its normal 5s blink — that asymmetry is
|
|
what makes it read as a wink rather than a synchronised blink.
|
|
v0.1.3 fix: previously the wink was a static SVG render (left eye
|
|
drawn as a closed curve), which got stuck on the page until the next
|
|
render. Now it's a real transient animation, so Buddy unblinks. */
|
|
.buddy-sprite--wink .buddy-sprite__eye--left {
|
|
animation: buddyWink 2.5s infinite;
|
|
}
|
|
|
|
@keyframes buddyBob {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-4px); }
|
|
}
|
|
@keyframes buddyBlink {
|
|
0%, 92%, 100% { transform: scaleY(1); }
|
|
94%, 98% { transform: scaleY(0.1); }
|
|
}
|
|
@keyframes buddyWink {
|
|
0%, 80%, 100% { transform: scaleY(1); } /* eye open most of the cycle */
|
|
85%, 95% { transform: scaleY(0.1); } /* closes briefly = the wink */
|
|
}
|
|
|
|
/* ── Dashboard widget ───────────────────────────────────────────── */
|
|
|
|
.buddy-widget {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
.buddy-widget__pet { flex: 0 0 auto; }
|
|
.buddy-widget__info { flex: 1 1 auto; min-width: 0; }
|
|
.buddy-widget__name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
.buddy-widget__mood {
|
|
display: inline-block;
|
|
margin-left: 6px;
|
|
padding: 2px 8px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
border-radius: 9px;
|
|
vertical-align: middle;
|
|
}
|
|
.buddy-widget__mood--happy { background:#e8f5ea; color:#1b6f2d; }
|
|
.buddy-widget__mood--wink { background:#fef3c7; color:#92400e; }
|
|
.buddy-widget__mood--neutral { background:#f0f0f1; color:#3c434a; }
|
|
.buddy-widget__mood--sad { background:#fcf0f1; color:#8a2424; }
|
|
|
|
.buddy-widget__cta { margin: 10px 0 0; }
|
|
|
|
/* ── Stats bars ─────────────────────────────────────────────────── */
|
|
|
|
.buddy-stats {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.buddy-stat {
|
|
display: grid;
|
|
grid-template-columns: 22px 80px 1fr 36px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 4px 0;
|
|
}
|
|
.buddy-stat__icon { text-align: center; font-size: 14px; }
|
|
.buddy-stat__label { font-size: 12px; color: #3c434a; }
|
|
.buddy-stat__bar {
|
|
height: 8px;
|
|
background: #f0f0f1;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.buddy-stat__fill {
|
|
display: block;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4ade80, #22c55e);
|
|
border-radius: 4px;
|
|
transition: width 0.4s ease;
|
|
}
|
|
.buddy-stat__fill--low {
|
|
background: linear-gradient(90deg, #f97316, #ef4444);
|
|
}
|
|
.buddy-stat__num {
|
|
text-align: right;
|
|
font-size: 12px;
|
|
color: #646970;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── Main admin page layout ─────────────────────────────────────── */
|
|
|
|
.buddy-main {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr;
|
|
gap: 22px;
|
|
margin-top: 20px;
|
|
}
|
|
@media (max-width: 782px) {
|
|
.buddy-main { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
.buddy-main__card {
|
|
background: #fff;
|
|
border: 1px solid #ccd0d4;
|
|
border-radius: 4px;
|
|
padding: 22px;
|
|
}
|
|
.buddy-main__card--pet {
|
|
text-align: center;
|
|
}
|
|
.buddy-main__name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin: 14px 0 4px;
|
|
}
|
|
.buddy-main__mood {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
padding: 2px 9px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
.buddy-main__mood--happy { background:#e8f5ea; color:#1b6f2d; }
|
|
.buddy-main__mood--wink { background:#fef3c7; color:#92400e; }
|
|
.buddy-main__mood--neutral { background:#f0f0f1; color:#3c434a; }
|
|
.buddy-main__mood--sad { background:#fcf0f1; color:#8a2424; }
|
|
|
|
.buddy-main__age { color: #646970; font-size: 13px; margin: 0; }
|
|
.buddy-main__note {
|
|
margin-top: 14px;
|
|
padding: 10px 12px;
|
|
background: #f0f6fc;
|
|
border-left: 3px solid #2271b1;
|
|
color: #135e96;
|
|
font-size: 13px;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
/* ── About page ──────────────────────────────────────────────────── */
|
|
|
|
.buddy-about-intro {
|
|
display: flex;
|
|
gap: 24px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin: 16px 0 28px;
|
|
padding: 18px;
|
|
background: #fff;
|
|
border: 1px solid #ccd0d4;
|
|
border-radius: 4px;
|
|
}
|
|
.buddy-about-intro__sprite {
|
|
flex: 0 0 160px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.buddy-about-intro__body {
|
|
flex: 1 1 320px;
|
|
min-width: 0;
|
|
}
|
|
.buddy-about-intro__body h2 { margin-top: 0; }
|
|
.buddy-about-intro__version {
|
|
color: #646970;
|
|
font-weight: 400;
|
|
}
|
|
.buddy-about-intro__cta {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.buddy-about-card {
|
|
background: #fff;
|
|
border: 1px solid #ccd0d4;
|
|
border-radius: 4px;
|
|
padding: 20px 24px;
|
|
margin: 0 0 22px;
|
|
max-width: 720px;
|
|
}
|
|
.buddy-about-card h2 { margin: 0 0 10px; font-size: 16px; }
|
|
.buddy-about-card p:last-child { margin-bottom: 0; }
|
|
.buddy-about-card ul { margin: 8px 0 0 18px; list-style: disc; }
|
|
.buddy-about-card ul li { margin-bottom: 4px; }
|
|
.buddy-about-card--versions ul { list-style: none; margin-left: 0; }
|
|
.buddy-about-card--versions li { margin-bottom: 12px; }
|
|
.buddy-about-card--versions .ver { font-weight: 600; color: #2271b1; }
|
|
.buddy-about-card--versions .latest {
|
|
display: inline-block;
|
|
margin-left: 6px;
|
|
padding: 1px 7px;
|
|
background: #00a32a;
|
|
color: #fff;
|
|
border-radius: 9px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.buddy-about-changelog-link {
|
|
display: inline-block;
|
|
margin-top: 6px;
|
|
font-size: 13px;
|
|
color: #646970;
|
|
}
|
|
|
|
/* ── Settings page form + admin-page description ─────────────────── */
|
|
|
|
.buddy-admin-description {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.buddy-settings-form {
|
|
max-width: 720px;
|
|
background: #fff;
|
|
padding: 18px 22px;
|
|
border: 1px solid #ccd0d4;
|
|
border-radius: 4px;
|
|
margin-top: 16px;
|
|
}
|
|
.buddy-settings-form h2 {
|
|
margin-top: 0;
|
|
}
|