Pixel RPG

Classic JRPG dialog boxes: blue panels, white frames, a blinking arrow and a menu cursor.

0 uses · 0 likes

Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.

See the CSS

/* Pixel RPG */
body.zbr-page {
  font-size: 18px;
  background:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent) 0 0 / 150px 130px,
    radial-gradient(1.5px 1.5px at 90px 80px, #8fa8ff, transparent) 0 0 / 190px 170px,
    radial-gradient(1px 1px at 60px 110px, #fff, transparent) 0 0 / 110px 140px,
    #0b0b3b;
}
.zbr-col { gap: 22px; }
.zbr-card {
  position: relative; backdrop-filter: none; border: 3px solid #f8f8f8; border-radius: 6px;
  background-image: linear-gradient(180deg, #2a3cc4, #0d1560);
  box-shadow: 0 0 0 3px #4a5fd6, 0 0 0 6px #050530, 6px 10px 0 6px rgba(0, 0, 0, .4);
}
/* "press to continue" arrow */
.zbr-box-profile::after, .cols-1 .zbr-card::after {
  content: '▼'; position: absolute; right: 14px; bottom: 8px; font-size: .8rem; animation: blink 1s steps(1) infinite;
}
.zbr-box-title { font-size: 1.1rem; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: #fff; }
.zbr-box-title::before { content: '★ '; color: var(--accent); }
.zbr-avatar { border: 3px solid #f8f8f8; border-radius: 0; image-rendering: pixelated; }
.zbr-name { font-size: 1.9rem; font-weight: 400; color: var(--accent); text-shadow: 2px 2px 0 #000; line-height: 1.1; overflow-wrap: anywhere; }
.zbr-bio { opacity: 1; }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 6px 0; font-weight: 400; font-size: 1.1rem; }
.zbr-link::before { content: '▶ '; visibility: hidden; color: var(--accent); }
.zbr-link:hover { background: none; color: var(--accent); transform: none; }
.zbr-link:hover::before { visibility: visible; animation: blink .8s steps(1) infinite; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(255, 255, 255, .22); border-top-style: dotted; }
.zbr-table th { color: var(--accent); opacity: 1; font-weight: 400; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 0; border: 2px solid #f8f8f8; image-rendering: pixelated; }
.zbr-noavatar { background: #4a5fd6; }
.zbr-online { color: #7dff9b; }
.zbr-wall-form { border-bottom-style: dotted; }
.zbr-btn { background: #f8f8f8; color: #0d1560; border-radius: 0; font-weight: 400; box-shadow: 3px 3px 0 #000; }
.zbr-views { color: #fff; opacity: .9; }
.zbr-views::before { content: 'EXP '; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }