/* * RS-Chat – rschat.css * Discord-inspiriertes Dark-Theme mit eigenem Charakter. * Schriftart: "Syne" (Display) + "DM Sans" (Body) via Google Fonts. * Alle Variablen über :root steuerbar. */ /* ── Google Fonts ─────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap'); /* ════════════════════════════════════════════════════════ CSS-VARIABLEN ════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════ THEMES – über data-theme="..." auf gesteuert Standard: dark ════════════════════════════════════════════════════════ */ /* Layout-Konstanten (theme-unabhängig) */ :root { --rsc-sidebar-w: 240px; --rsc-header-h: 52px; --rsc-footer-h: 72px; --rsc-avatar-size: 38px; --rsc-avatar-sm: 28px; --rsc-radius: 8px; --rsc-radius-sm: 5px; --rsc-font-display: "Syne", sans-serif; --rsc-font-body: "DM Sans", sans-serif; --rsc-font-size: 14px; --rsc-line-height: 1.5; --rsc-transition: 160ms ease; --rsc-danger: #ed4245; --rsc-success: #3ba55c; --rsc-op-glow: 0 0 8px currentColor, 0 0 18px rgba(0,212,255,0.35); } /* ── DARK (Standard) ─────────────────────────────────── */ :root, [data-theme="dark"] { --rsc-bg-deep: #0d0e12; --rsc-bg-base: #15161c; --rsc-bg-surface: #1e1f28; --rsc-bg-raised: #26273a; --rsc-bg-hover: #2e3050; --rsc-bg-main: #15161c; --rsc-border: rgba(255,255,255,0.07); --rsc-text-primary: #e8eaf0; --rsc-text-secondary:#8b8fa8; --rsc-text-muted: #555872; --rsc-text-link: #7b9cff; --rsc-accent: #5865f2; --rsc-accent-hover: #4752c4; --rsc-op-color: #00d4ff; --rsc-mention-bg: rgba(88,101,242,0.18); --rsc-mention-self: rgba(250,166,26,0.22); --rsc-sys-color: #a8abbe; --rsc-sys-bg: #13163a; --rsc-sys-border: rgba(37,42,101,0.8); } /* ── LIGHT ───────────────────────────────────────────── */ [data-theme="light"] { --rsc-bg-deep: #e8e9f0; --rsc-bg-base: #f0f1f7; --rsc-bg-surface: #ffffff; --rsc-bg-raised: #f5f6fc; --rsc-bg-hover: #e2e4f0; --rsc-bg-main: #f0f1f7; --rsc-border: rgba(0,0,0,0.09); --rsc-text-primary: #1a1b2e; --rsc-text-secondary:#5a5c78; --rsc-text-muted: #9294ae; --rsc-text-link: #4055d4; --rsc-accent: #5865f2; --rsc-accent-hover: #4752c4; --rsc-op-color: #0099cc; --rsc-mention-bg: rgba(88,101,242,0.10); --rsc-mention-self: rgba(220,120,0,0.12); --rsc-sys-color: #7c7e9a; --rsc-sys-bg: #e8eaf8; --rsc-sys-border: rgba(88,101,242,0.2); } /* ── DARK BLUE ───────────────────────────────────────── */ [data-theme="darkblue"] { --rsc-bg-deep: #060b14; --rsc-bg-base: #0d1626; --rsc-bg-surface: #122036; --rsc-bg-raised: #1a2d4a; --rsc-bg-hover: #1e3457; --rsc-bg-main: #0d1626; --rsc-border: rgba(100,160,255,0.10); --rsc-text-primary: #d6e8ff; --rsc-text-secondary:#6a90c0; --rsc-text-muted: #3a5a80; --rsc-text-link: #5ba8ff; --rsc-accent: #1e7fff; --rsc-accent-hover: #1060cc; --rsc-op-color: #00eaff; --rsc-mention-bg: rgba(30,127,255,0.15); --rsc-mention-self: rgba(255,180,0,0.18); --rsc-sys-color: #5a7a9a; --rsc-sys-bg: #0a1a30; --rsc-sys-border: rgba(30,127,255,0.25); } /* ── ORANGE / RADIO SUNSHINE ─────────────────────────── */ [data-theme="orange"] { --rsc-bg-deep: #0f0800; --rsc-bg-base: #1a0e00; --rsc-bg-surface: #231400; --rsc-bg-raised: #2e1a00; --rsc-bg-hover: #3a2200; --rsc-bg-main: #1a0e00; --rsc-border: rgba(255,69,0,0.15); --rsc-text-primary: #fff0e6; --rsc-text-secondary:#cc6633; --rsc-text-muted: #7a4422; --rsc-text-link: #ff7733; --rsc-accent: #ff4500; --rsc-accent-hover: #cc3700; --rsc-op-color: #ffaa00; --rsc-mention-bg: rgba(255,69,0,0.15); --rsc-mention-self: rgba(255,170,0,0.18); --rsc-sys-color: #cc6633; --rsc-sys-bg: #1f0f00; --rsc-sys-border: rgba(255,69,0,0.35); } /* ════════════════════════════════════════════════════════ RESET & BASE ════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--rsc-bg-deep); color: var(--rsc-text-primary); font-family: var(--rsc-font-body); font-size: var(--rsc-font-size); line-height: var(--rsc-line-height); -webkit-font-smoothing: antialiased; } a { color: var(--rsc-text-link); text-decoration: none; } a:hover { text-decoration: underline; } /* ════════════════════════════════════════════════════════ CHAT WRAPPER ════════════════════════════════════════════════════════ */ #rschat-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; } /* Hintergrundbild */ #rschat-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .08; pointer-events: none; z-index: 0; } /* ════════════════════════════════════════════════════════ HEADER ════════════════════════════════════════════════════════ */ #rschat-header { display: flex; align-items: center; gap: 10px; height: var(--rsc-header-h); padding: 0 16px; background: var(--rsc-bg-surface); border-bottom: 1px solid var(--rsc-border); position: relative; z-index: 10; flex-shrink: 0; } #rschat-header .rschat-room-name { font-family: var(--rsc-font-display); font-size: 1rem; font-weight: 700; letter-spacing: .02em; color: var(--rsc-text-primary); margin: 0; } #rschat-header .rschat-room-desc { font-size: .78rem; color: var(--rsc-text-secondary); margin-left: 8px; border-left: 1px solid var(--rsc-border); padding-left: 10px; } .rschat-header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } /* ════════════════════════════════════════════════════════ HAUPT-LAYOUT (Sidebars + Mitte) ════════════════════════════════════════════════════════ */ #rschat-body { display: flex; flex: 1; overflow: hidden; position: relative; z-index: 1; } /* ── Sidebar allgemein ─────────────────────────────────── */ .rschat-sidebar { width: var(--rsc-sidebar-w); background: var(--rsc-bg-surface); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; transition: width var(--rsc-transition), opacity var(--rsc-transition); border-right: 1px solid var(--rsc-border); } .rschat-sidebar--right { border-right: none; border-left: 1px solid var(--rsc-border); } .rschat-sidebar--hidden { width: 0 !important; opacity: 0; pointer-events: none; } .rschat-sidebar__header { padding: 10px 14px; font-family: var(--rsc-font-display); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rsc-text-muted); border-bottom: 1px solid var(--rsc-border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; } /* ── Sidebar PM links ──────────────────────────────────── */ #rschat-sidebar-pm { position: absolute; top: 0; left: 0; bottom: 0; width: 50%; min-width: 280px; max-width: 600px; z-index: 20; border-right: 1px solid var(--rsc-border); border-left: none; box-shadow: 4px 0 20px rgba(0,0,0,.4); } /* ── Sidebar Users rechts ─────────────────────────────── */ #rschat-sidebar-users { overflow-y: auto; } /* ════════════════════════════════════════════════════════ CHAT-BEREICH (Mitte) ════════════════════════════════════════════════════════ */ #rschat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative; } /* ── Nachrichten-Liste ────────────────────────────────── */ #rschat-messages { flex: 1; overflow-y: auto; padding: 16px 12px 8px; display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth; } /* Scrollbar anpassen */ #rschat-messages::-webkit-scrollbar { width: 6px; } #rschat-messages::-webkit-scrollbar-track { background: transparent; } #rschat-messages::-webkit-scrollbar-thumb { background: var(--rsc-bg-raised); border-radius: 3px; } /* ════════════════════════════════════════════════════════ NACHRICHTEN ════════════════════════════════════════════════════════ */ .rschat-msg { display: flex; gap: 10px; padding: 3px 8px; border-radius: var(--rsc-radius-sm); position: relative; transition: background var(--rsc-transition); } .rschat-msg:hover { background: var(--rsc-bg-hover); } /* Raum verlassen Button */ .rschat-leave-btn { opacity: .7; transition: opacity .2s, color .2s; } .rschat-leave-btn:hover { opacity: 1; color: #e05c5c !important; } /* Systemnachricht */ .rschat-sys-msg { text-align: center; color: var(--rsc-sys-color) !important; font-size: .82rem; font-style: italic; font-weight: 600; padding: 6px 24px; margin: 10px 40px; background: var(--rsc-sys-bg); border: 1px solid var(--rsc-sys-border); border-radius: 20px; text-shadow: 0 1px 3px rgba(0,0,0,.3); } /* Avatar */ .rschat-msg__avatar { flex-shrink: 0; padding-top: 2px; } .rschat-avatar { width: var(--rsc-avatar-size); height: var(--rsc-avatar-size); border-radius: 50%; object-fit: cover; } .rschat-avatar--sm { width: var(--rsc-avatar-sm); height: var(--rsc-avatar-sm); } .rschat-avatar--fallback { display: flex; align-items: center; justify-content: center; background: var(--rsc-bg-raised); color: var(--rsc-text-secondary); font-family: var(--rsc-font-display); font-weight: 700; font-size: .85rem; } /* Nachrichteninhalt */ .rschat-msg__body { flex: 1; min-width: 0; } .rschat-msg__meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; } .rschat-msg__name { font-family: var(--rsc-font-display); font-weight: 700; font-size: .85rem; color: var(--rsc-text-primary); cursor: pointer; transition: color var(--rsc-transition); } .rschat-msg__name:hover { color: var(--rsc-accent); } /* OP-Name in Cyan mit Glow */ .rschat-msg__name.rschat-op, .rschat-user-item--op .rschat-user-item__name { color: var(--rsc-op-color) !important; text-shadow: var(--rsc-op-glow); } .rschat-msg__time { font-size: .72rem; color: var(--rsc-text-muted); } .rschat-msg__text { color: var(--rsc-text-primary); word-break: break-word; font-size: .9rem; line-height: 1.5; } .rschat-msg__text a { color: var(--rsc-text-link); word-break: break-all; } /* Bearbeitet-Hinweis */ .rschat-edited { font-size: .7rem; color: var(--rsc-text-muted); margin-left: 4px; } /* @mention Hervorhebung */ .rschat-mention { background: var(--rsc-mention-bg); color: var(--rsc-accent); padding: 0 3px; border-radius: 3px; font-weight: 500; } .rschat-mention--self { background: var(--rsc-mention-self); color: #faa61a; } /* ── Hover-Bar ────────────────────────────────────────── */ .rschat-msg__hover { position: absolute; top: -16px; right: 8px; display: flex; gap: 2px; background: var(--rsc-bg-raised); border: 1px solid var(--rsc-border); border-radius: var(--rsc-radius-sm); padding: 2px 4px; opacity: 0; pointer-events: none; transition: opacity var(--rsc-transition); z-index: 5; } .rschat-msg__hover--visible { opacity: 1; pointer-events: all; } .rschat-hover-btn { background: none; border: none; cursor: pointer; padding: 3px 5px; font-size: .9rem; border-radius: 3px; transition: background var(--rsc-transition); line-height: 1; } .rschat-hover-btn:hover { background: var(--rsc-bg-hover); } .rschat-hover-btn--mod:hover { background: rgba(237,66,69,.25); } /* ── Reaktionen ──────────────────────────────────────── */ .rschat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .rschat-reaction-badge { background: var(--rsc-bg-raised); border: 1px solid var(--rsc-border); border-radius: 10px; padding: 1px 7px; font-size: .82rem; cursor: pointer; transition: background var(--rsc-transition), border-color var(--rsc-transition); color: var(--rsc-text-primary); line-height: 1.6; } .rschat-reaction-badge:hover { background: var(--rsc-bg-hover); border-color: var(--rsc-accent); } /* ── Smiley in Text ──────────────────────────────────── */ .rschat-smiley { max-height: 32px; width: auto; vertical-align: middle; } /* ════════════════════════════════════════════════════════ TYPING-INDIKATOR ════════════════════════════════════════════════════════ */ #rschat-typing { min-height: 18px; padding: 0 20px; font-size: .78rem; color: var(--rsc-text-secondary); font-style: italic; } /* ════════════════════════════════════════════════════════ EDIT-INDIKATOR ════════════════════════════════════════════════════════ */ #rschat-edit-indicator { display: flex; align-items: center; gap: 8px; padding: 4px 14px; background: rgba(88,101,242,.12); border-top: 1px solid rgba(88,101,242,.3); font-size: .78rem; color: var(--rsc-accent); } #rschat-edit-indicator button { margin-left: auto; background: none; border: none; color: var(--rsc-text-muted); cursor: pointer; font-size: .8rem; padding: 2px 6px; } #rschat-edit-indicator button:hover { color: var(--rsc-danger); } /* ════════════════════════════════════════════════════════ FOOTER / EINGABEBEREICH ════════════════════════════════════════════════════════ */ #rschat-footer { padding: 8px 14px 10px; background: var(--rsc-bg-surface); border-top: 1px solid var(--rsc-border); flex-shrink: 0; position: relative; } .rschat-input-row { display: flex; align-items: flex-end; gap: 8px; background: var(--rsc-bg-raised); border: 1px solid var(--rsc-border); border-radius: var(--rsc-radius); padding: 6px 10px; transition: border-color var(--rsc-transition); } .rschat-input-row:focus-within { border-color: var(--rsc-accent); } #rschat-input { flex: 1; background: none; border: none; outline: none; color: var(--rsc-text-primary); font-family: var(--rsc-font-body); font-size: .9rem; resize: none; max-height: 130px; min-height: 22px; overflow-y: auto; line-height: 1.5; padding: 0; } #rschat-input::placeholder { color: var(--rsc-text-muted); } #rschat-input::-webkit-scrollbar { width: 4px; } #rschat-input::-webkit-scrollbar-thumb { background: var(--rsc-bg-hover); border-radius: 2px; } .rschat-input-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .rschat-icon-btn { background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: var(--rsc-radius-sm); color: var(--rsc-text-secondary); font-size: 1.1rem; transition: color var(--rsc-transition), background var(--rsc-transition); line-height: 1; } .rschat-icon-btn:hover { color: var(--rsc-text-primary); background: var(--rsc-bg-hover); } #rschat-send-btn { background: var(--rsc-accent); color: #fff; border: none; border-radius: var(--rsc-radius-sm); padding: 5px 13px; font-family: var(--rsc-font-display); font-size: .82rem; font-weight: 700; cursor: pointer; transition: background var(--rsc-transition); white-space: nowrap; } #rschat-send-btn:hover { background: var(--rsc-accent-hover); } .rschat-char-counter { font-size: .7rem; color: var(--rsc-text-muted); align-self: flex-end; padding-bottom: 2px; } /* ════════════════════════════════════════════════════════ USERLISTE (rechte Sidebar) ════════════════════════════════════════════════════════ */ #rschat-user-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; } #rschat-user-list::-webkit-scrollbar { width: 4px; } #rschat-user-list::-webkit-scrollbar-thumb { background: var(--rsc-bg-raised); border-radius: 2px; } .rschat-user-item { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--rsc-radius-sm); cursor: pointer; transition: background var(--rsc-transition); position: relative; } .rschat-user-item:hover { background: var(--rsc-bg-hover); } .rschat-user-item__name { font-size: .85rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rschat-guest-tag { font-size: .68rem; margin-left: 3px; padding: 1px 5px; border-radius: 3px; background: rgba(128,128,160,0.25); color: #b0b3c8; } [data-theme="light"] .rschat-guest-tag { background: rgba(88,101,242,0.12); color: #5a5c78; } [data-theme="orange"] .rschat-guest-tag { background: rgba(255,69,0,0.18); color: #cc8866; } .rschat-op-badge { font-size: .8rem; flex-shrink: 0; } /* ════════════════════════════════════════════════════════ PM-BADGE (oben in User-Sidebar) ════════════════════════════════════════════════════════ */ .rschat-pm-badge-btn { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--rsc-border); color: var(--rsc-text-primary); padding: 9px 14px; font-family: var(--rsc-font-body); font-size: .85rem; cursor: pointer; text-align: left; transition: background var(--rsc-transition); } .rschat-pm-badge-btn:hover { background: var(--rsc-bg-hover); } #rschat-pm-badge { background: var(--rsc-danger); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 8px; padding: 0 5px; min-width: 18px; text-align: center; line-height: 18px; height: 18px; } /* ════════════════════════════════════════════════════════ PN-SIDEBAR (links) ════════════════════════════════════════════════════════ */ #rschat-sidebar-pm { display: flex; flex-direction: column; } /* Panel: Konversationsliste */ #rschat-pm-list-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; } #rschat-pm-conv-list { flex: 1; overflow-y: auto; padding: 4px 0; } .rschat-pm-conv-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; border-radius: var(--rsc-radius-sm); transition: background var(--rsc-transition); position: relative; } .rschat-pm-conv-item:hover { background: var(--rsc-bg-hover); } .rschat-pm-conv-item.active { background: var(--rsc-bg-raised); } .rschat-pm-conv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rschat-pm-conv-name { font-size: .85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rschat-pm-conv-time { font-size: .72rem; } .rschat-pm-badge-conv { font-size: .7rem; min-width: 18px; height: 18px; line-height: 18px; padding: 0 4px; border-radius: 9px; text-align: center; flex-shrink: 0; } /* Panel: Nachrichten */ #rschat-pm-msg-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; } #rschat-pm-msg-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--rsc-border); flex-shrink: 0; } #rschat-pm-partner-name { font-family: var(--rsc-font-display); font-size: .85rem; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rschat-pm-messages { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .rschat-pm-msg { display: flex; gap: 7px; align-items: flex-start; } .rschat-pm-msg--own { flex-direction: row-reverse; } .rschat-pm-msg__bubble { background: var(--rsc-bg-raised); border-radius: var(--rsc-radius); padding: 6px 10px; max-width: 80%; } .rschat-pm-msg--own .rschat-pm-msg__bubble { background: var(--rsc-accent); color: #fff; } .rschat-pm-msg__text { font-size: .85rem; word-break: break-word; } #rschat-pm-input-row { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--rsc-border); flex-shrink: 0; } #rschat-pm-input { flex: 1; background: var(--rsc-bg-raised); border: 1px solid var(--rsc-border); border-radius: var(--rsc-radius-sm); color: var(--rsc-text-primary); font-family: var(--rsc-font-body); font-size: .85rem; padding: 6px 10px; resize: none; outline: none; transition: border-color var(--rsc-transition); } #rschat-pm-input:focus { border-color: var(--rsc-accent); } #rschat-pm-send-btn { background: var(--rsc-accent); color: #fff; border: none; border-radius: var(--rsc-radius-sm); padding: 6px 12px; font-family: var(--rsc-font-display); font-weight: 700; font-size: .8rem; cursor: pointer; transition: background var(--rsc-transition); white-space: nowrap; } #rschat-pm-send-btn:hover { background: var(--rsc-accent-hover); } .rschat-pm-empty { padding: 16px; color: var(--rsc-text-muted); font-size: .82rem; text-align: center; } /* ════════════════════════════════════════════════════════ KONTEXTMENÜ ════════════════════════════════════════════════════════ */ #rschat-ctx-menu { position: absolute; z-index: 9998; background: var(--rsc-bg-raised); border: 1px solid var(--rsc-border); border-radius: var(--rsc-radius); box-shadow: 0 8px 32px rgba(0,0,0,.5); min-width: 180px; padding: 4px 0; animation: rsc-fade-in .1s ease; } #rschat-ctx-menu .dropdown-item { color: var(--rsc-text-primary); padding: 7px 14px; font-size: .85rem; transition: background var(--rsc-transition); } #rschat-ctx-menu .dropdown-item:hover { background: var(--rsc-bg-hover); color: #fff; } /* ════════════════════════════════════════════════════════ EMOJI-PICKER ════════════════════════════════════════════════════════ */ .rschat-emoji-picker { display: flex; flex-wrap: wrap; gap: 2px; background: var(--rsc-bg-raised); border: 1px solid var(--rsc-border); border-radius: var(--rsc-radius); padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.45); animation: rsc-fade-in .1s ease; max-width: 200px; } .rschat-emoji-btn { background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 4px 5px; border-radius: 5px; transition: background var(--rsc-transition); line-height: 1; } .rschat-emoji-btn:hover { background: var(--rsc-bg-hover); } /* ════════════════════════════════════════════════════════ SMILEY-PICKER ════════════════════════════════════════════════════════ */ #rschat-smiley-picker { position: absolute; bottom: calc(100% + 6px); left: 14px; width: 280px; background: var(--rsc-bg-raised); border: 1px solid var(--rsc-border); border-radius: var(--rsc-radius); box-shadow: 0 -8px 32px rgba(0,0,0,.45); z-index: 100; animation: rsc-fade-in .15s ease; overflow: hidden; } .rschat-smiley-tabs { border-bottom-color: var(--rsc-border); background: var(--rsc-bg-surface); } .rschat-smiley-tabs .nav-link { color: var(--rsc-text-secondary); font-size: .78rem; padding: 6px 10px; border: none; border-radius: 0; } .rschat-smiley-tabs .nav-link.active { color: var(--rsc-text-primary); background: var(--rsc-bg-raised); border-bottom: 2px solid var(--rsc-accent); } .rschat-smiley-panes { max-height: 180px; overflow-y: auto; } .rschat-smiley-grid { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; } .rschat-smiley-item { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px; transition: background var(--rsc-transition); } .rschat-smiley-item:hover { background: var(--rsc-bg-hover); } .rschat-smiley-item img { display: block; } /* ════════════════════════════════════════════════════════ TOAST-CONTAINER ════════════════════════════════════════════════════════ */ #rschat-toasts { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; align-items: flex-end; } /* ════════════════════════════════════════════════════════ GAST-NICK-MODAL (Overlay) ════════════════════════════════════════════════════════ */ #rschat-guest-modal { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 9999; display: flex; align-items: center; justify-content: center; } .rschat-guest-modal__box { background: var(--rsc-bg-raised); border: 1px solid var(--rsc-border); border-radius: var(--rsc-radius); padding: 28px 32px; width: 100%; max-width: 380px; box-shadow: 0 16px 64px rgba(0,0,0,.6); } .rschat-guest-modal__title { font-family: var(--rsc-font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; } .rschat-guest-input { width: 100%; background: var(--rsc-bg-surface); border: 1px solid var(--rsc-border); border-radius: var(--rsc-radius-sm); color: var(--rsc-text-primary); font-family: var(--rsc-font-body); padding: 9px 12px; font-size: .9rem; outline: none; margin-bottom: 12px; transition: border-color var(--rsc-transition); } .rschat-guest-input:focus { border-color: var(--rsc-accent); } .rschat-guest-submit { width: 100%; background: var(--rsc-accent); color: #fff; border: none; border-radius: var(--rsc-radius-sm); padding: 9px; font-family: var(--rsc-font-display); font-weight: 700; font-size: .9rem; cursor: pointer; transition: background var(--rsc-transition); } .rschat-guest-submit:hover { background: var(--rsc-accent-hover); } .rschat-guest-error { font-size: .78rem; color: var(--rsc-danger); margin-bottom: 8px; display: none; } /* ════════════════════════════════════════════════════════ ANIMATIONEN ════════════════════════════════════════════════════════ */ @keyframes rsc-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes rsc-slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .rschat-msg { animation: rsc-slide-in .12s ease; } /* ════════════════════════════════════════════════════════ RESPONSIVE (Mobile) ════════════════════════════════════════════════════════ */ @media (max-width: 767px) { :root { --rsc-sidebar-w: 100%; --rsc-avatar-size: 32px; } /* Sidebars überlagern den Chat auf Mobile */ .rschat-sidebar { position: absolute; top: 0; bottom: 0; z-index: 20; border: none; box-shadow: 4px 0 20px rgba(0,0,0,.5); } #rschat-sidebar-pm { left: 0; width: 100%; min-width: unset; max-width: unset; } #rschat-sidebar-users { right: 0; } .rschat-sidebar--hidden { width: 0 !important; box-shadow: none; } #rschat-header .rschat-room-desc { display: none; } #rschat-send-btn { padding: 5px 10px; } } @media (max-width: 480px) { #rschat-messages { padding: 8px 6px; } .rschat-msg { gap: 7px; } } /* ── Kick/Ban: Input gesperrt ─────────────────────────── */ .rschat-locked-notice { background: rgba(237,66,69,.15); border: 1px solid rgba(237,66,69,.4); color: #ed4245; border-radius: 8px; padding: 8px 14px; font-size: .85rem; font-weight: 600; text-align: center; margin-top: 8px; } #rschat-input:disabled { opacity: .4; cursor: not-allowed; } /* ════════════════════════════════════════════════════ SMILEY INLINE (im Nachrichtentext) ════════════════════════════════════════════════════ */ .rschat-smiley-inline { max-height: 32px; width: auto; vertical-align: middle; margin: 0 1px; } /* ════════════════════════════════════════════════════ SMILEY-PICKER ════════════════════════════════════════════════════ */ .rschat-smiley-panel { display: none; position: fixed; z-index: 9999; width: 320px; max-height: 280px; background: var(--rsc-bg-raised); border: 1px solid var(--rsc-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); overflow: hidden; flex-direction: column; } .rschat-smiley-panel--visible { display: flex; } /* Tabs */ .rschat-smiley-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--rsc-border); background: var(--rsc-bg-main); } .rschat-smiley-tab { background: none; border: none; color: var(--rsc-text-muted); font-size: .75rem; padding: 4px 10px; border-radius: 6px 6px 0 0; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .rschat-smiley-tab:hover { background: var(--rsc-bg-raised); color: var(--rsc-text-primary); } .rschat-smiley-tab.active { background: var(--rsc-accent); color: #fff; } /* Grid */ .rschat-smiley-grids { overflow-y: auto; flex: 1; padding: 6px; } .rschat-smiley-grid { display: none; flex-wrap: wrap; gap: 4px; } .rschat-smiley-grid.active { display: flex; } .rschat-smiley-img { max-height: 40px; width: auto; cursor: pointer; border-radius: 4px; padding: 2px; transition: background .15s, transform .1s; } .rschat-smiley-img:hover { background: var(--rsc-bg-main); transform: scale(1.2); } .rschat-smiley-empty { padding: 16px; color: var(--rsc-text-muted); font-size: .85rem; text-align: center; } /* ════════════════════════════════════════════════════ THEME-SWITCHER DROPDOWN ════════════════════════════════════════════════════ */ .rschat-theme-menu { background: var(--rsc-bg-raised); border: 1px solid var(--rsc-border); border-radius: var(--rsc-radius); padding: 4px; min-width: 150px; } .rschat-theme-item { color: var(--rsc-text-secondary); border-radius: var(--rsc-radius-sm); padding: 6px 12px; font-size: .88rem; transition: background .15s, color .15s; } .rschat-theme-item:hover { background: var(--rsc-bg-hover); color: var(--rsc-text-primary); } .rschat-theme-item.active { color: var(--rsc-accent); font-weight: 700; } /* ════════════════════════════════════════════════════ LIGHT-MODE OVERRIDES ════════════════════════════════════════════════════ */ [data-theme="light"] #rschat-wrapper, [data-theme="light"] body { background: var(--rsc-bg-base); color: var(--rsc-text-primary); } [data-theme="light"] .rschat-msg__bubble--own { background: #dce0ff; } [data-theme="light"] #rschat-send-btn, [data-theme="light"] #rschat-pm-send-btn { background: var(--rsc-accent); color: #fff; } [data-theme="light"] .dropdown-menu { background: var(--rsc-bg-surface); border-color: var(--rsc-border); } [data-theme="light"] .dropdown-item { color: var(--rsc-text-primary); } [data-theme="light"] .dropdown-item:hover { background: var(--rsc-bg-hover); }