Something went wrong. Try again.
A work-in-progress chat bot for Streamplace with chat overlay functionality
Something went wrong. Try again.
6.3 kB · 216 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217/* ============================================================ chat-message.css — Streamplace OBS overlay chat component ============================================================ */
/* Google Font — Nunito: round, friendly, legible on stream */@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");
/* ------------------------------------------------------------------ *//* Root wrapper *//* ------------------------------------------------------------------ */.cm-root { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; font-family: "Nunito", sans-serif; animation: cm-slide-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; opacity: 1;}
.cm-root.cm-fading-out { opacity: 0; transition: opacity 1s ease-out;}
@keyframes cm-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); }}
/* ------------------------------------------------------------------ *//* Left column: avatar + pronouns pill *//* ------------------------------------------------------------------ */.cm-left-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; /* Negative margin-bottom so pronouns pill overlaps the bottom of the avatar slightly */ gap: 0; position: relative; width: 48px;}
/* Avatar */.cm-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; /* Subtle ring so the avatar floats cleanly over any stream BG */ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.45);}
/* Pronouns pill — overlaps the avatar's bottom edge */.cm-pronouns-pill { display: inline-block; margin-top: -8px; /* overlap avatar */ padding: 1px 7px; border-radius: 999px; font-size: 0.65em; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); line-height: 1.6; /* color and background-color are set inline */}
/* ------------------------------------------------------------------ *//* Right column: header row + bubble *//* ------------------------------------------------------------------ */.cm-right-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: 1; min-width: 0;}
/* ------------------------------------------------------------------ *//* Header row: service icon · name chip · badges *//* ------------------------------------------------------------------ */.cm-header-row { display: flex; align-items: center; gap: 5px; /* Float the header slightly below the bubble's top edge so the name chip overlaps it — we achieve this with a small positive margin-bottom that gets consumed by the bubble's negative margin-top. */ margin-bottom: -1px; /* Sit above the bubble in z-order */ position: relative; z-index: 1; padding-left: 14px; /* indent to clear the bubble tail */}
/* Streamplace service icon */.cm-service-icon { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); position: relative; z-index: 1;}
/* Streamer avatar icon — same size, sits just behind the service icon */.cm-streamer-icon { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); margin-left: -6px; position: relative; z-index: 0;}
/* Name chip */.cm-name-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78em; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); line-height: 1.6; /* color and background are set inline */}
/* Badge icons */.cm-badge-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));}
/* ------------------------------------------------------------------ *//* Speech bubble *//* ------------------------------------------------------------------ */.cm-bubble { position: relative; border-radius: 12px; padding: 8px 12px 8px 16px; word-break: break-word; overflow-wrap: break-word; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2); /* color and background are set inline */ /* Slight overlap with the header row chips */ margin-top: 0; display: inline-block; max-width: 100%;}
/* Triangle tail — points left toward the avatar */.cm-bubble-tail { position: absolute; left: -9px; top: 14px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right-width: 10px; border-right-style: solid; /* border-right-color is set inline to match msgBg */}
/* ------------------------------------------------------------------ *//* Reply indicator *//* ------------------------------------------------------------------ */.cm-reply-indicator { display: inline-block; font-size: 0.85em; margin-right: 5px; opacity: 0.6; vertical-align: middle; /* rotated slightly so it reads as "reply" rather than "undo" */ transform: scaleX(-1); display: inline-block;}
/* ------------------------------------------------------------------ *//* Message text *//* ------------------------------------------------------------------ */.cm-bubble-text { font-size: 0.95em; font-weight: 600; line-height: 1.45; /* color is set inline via parent */}