ranger
8c38d38a3a
Buddy now has a fourth mood tone — wink — with one eye closed, an asymmetric smirk, and rosier cheeks. Renders as a small variant inside the existing inline-SVG sprite (still zero image files, no new assets). When overall mood is >= 75, there's a 30% chance on each page render that the wink replaces the standard happy face — gives the pet a touch of unpredictable personality. Why this commit exists: v0.1.0 had three tones (happy / neutral / sad). Adding wink is the smallest possible demo that the SVG expression engine is properly extensible — every future mood, state, accessory or species can land via the same pattern. ~20 lines of PHP, ~2 lines of CSS, no bundle weight, no dependencies. CHANGES - inc/sprite.php: wink added to allowed-tones list. Left eye renders as a closed-eye arc instead of the open circle. Mouth shifts to an asymmetric smirk. Cheek opacity 0.55 → 0.75 for extra cheekiness. - inc/state.php: buddy_mood_label() returns wink ~30% of the time when mood >= 75. - assets/css/buddy.css: new .buddy-widget__mood--wink and .buddy-main__mood--wink rules — warm amber pill. - About-page version-history leads with v0.1.1; v0.1.0 demoted. VERSION - buddy.php header 0.1.0 → 0.1.1 - BUDDY_VERSION constant 0.1.0 → 0.1.1 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
156 lines
4.3 KiB
CSS
156 lines
4.3 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 */
|
|
}
|
|
|
|
@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); }
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|