diff --git a/static/editor.css b/static/editor.css index 41750b6..ab6a8dd 100644 --- a/static/editor.css +++ b/static/editor.css @@ -1085,4 +1085,86 @@ header .actions { @media (max-width: 860px) { header .brand { margin-right: 10px; } header .actions { margin-left: 6px; } +} +/* Danmaku (bullet chat) over header */ +header { position: relative; } + +#danmaku-layer { + position: fixed; /* покрывает весь вьюпорт, не только шапку */ + inset: 0; + pointer-events: none; /* не перехватывать клики по кнопкам */ + overflow: hidden; + opacity: 0; + transition: opacity .18s ease-in-out; + z-index: 8000; /* ниже боковых панелей/дроверов (run-drawer ~10000), выше канваса */ +} +#danmaku-layer.is-on { opacity: 1; } + +/* Базовый стиль «пули» */ +.danmaku-bullet { + position: absolute; + left: 100%; /* старт за правым краем */ + top: 8px; + white-space: nowrap; + color: #e5e7eb; + text-shadow: 0 1px 2px rgba(0,0,0,.6); + background: rgba(15, 20, 26, .35); + border: 1px solid rgba(96,165,250,.28); + border-radius: 8px; + padding: 2px 8px; + line-height: 1.15; + transform: translateZ(0); /* чуть сгладить анимацию */ + animation-name: danmaku-move; + animation-timing-function: linear; + animation-fill-mode: forwards; +} + +/* Вариации размера/выразительности */ +.danmaku-bullet.sm { font: 11px/1.15 Inter, system-ui, Arial, sans-serif; opacity: .9; } +.danmaku-bullet.md { font: 12px/1.15 Inter, system-ui, Arial, sans-serif; } +.danmaku-bullet.lg { font: 13px/1.15 Inter, system-ui, Arial, sans-serif; box-shadow: 0 0 0 2px rgba(59,130,246,.12), 0 2px 6px rgba(0,0,0,.35); } + +.danmaku-bullet.tint-blue { border-color: rgba(96,165,250,.35); color:#eaf2ff; } +.danmaku-bullet.tint-green { border-color: rgba(52,211,153,.35); color:#dcfce7; } +.danmaku-bullet.tint-pink { border-color: rgba(236,72,153,.35); color:#fde2f2; } +.danmaku-bullet.tint-amber { border-color: rgba(245,158,11,.35); color:#fff3d6; } + +/* Движение слева направо (через всю ширину хедера + небольшой запас) */ +@keyframes danmaku-move { + from { left: 100%; } + to { left: -40%; } +} +/* Rune highlight inside danmaku bullets */ +.danmaku-bullet .rune { + color: var(--accent-2); /* фирменный синий */ + font-size: 1.35em; /* немного крупнее текста пули */ + letter-spacing: .06em; + text-shadow: + 0 0 2px rgba(96,165,250,.95), + 0 0 6px rgba(96,165,250,.75), + 0 0 12px rgba(96,165,250,.45), + 0 0 20px rgba(96,165,250,.30); + animation: rune-glow 1.8s ease-in-out infinite alternate; +} +@keyframes rune-glow { + 0% { text-shadow: 0 0 2px rgba(96,165,250,.85), 0 0 6px rgba(96,165,250,.60), 0 0 10px rgba(96,165,250,.35); } + 50% { text-shadow: 0 0 3px rgba(96,165,250,1), 0 0 10px rgba(96,165,250,.85), 0 0 18px rgba(96,165,250,.55); } + 100% { text-shadow: 0 0 2px rgba(96,165,250,.90), 0 0 8px rgba(96,165,250,.70), 0 0 14px rgba(96,165,250,.45); } +} +/* Sisters highlight inside danmaku bullets (pleasant pink + gentle glow) */ +.danmaku-bullet .sisters { + color: #f9a8d4; /* soft pink */ + font-weight: 600; + letter-spacing: .02em; + text-shadow: + 0 0 2px rgba(249,168,212,.95), + 0 0 6px rgba(249,168,212,.70), + 0 0 12px rgba(249,168,212,.40), + 0 0 18px rgba(249,168,212,.28); + animation: sisters-glow 1.8s ease-in-out infinite alternate; +} +@keyframes sisters-glow { + 0% { text-shadow: 0 0 2px rgba(249,168,212,.85), 0 0 6px rgba(249,168,212,.60), 0 0 10px rgba(249,168,212,.35); } + 50% { text-shadow: 0 0 3px rgba(249,168,212,1), 0 0 10px rgba(249,168,212,.85), 0 0 18px rgba(249,168,212,.55); } + 100% { text-shadow: 0 0 2px rgba(249,168,212,.90), 0 0 8px rgba(249,168,212,.70), 0 0 14px rgba(249,168,212,.45); } } \ No newline at end of file diff --git a/static/editor.html b/static/editor.html index d4d37a1..7208a38 100644 --- a/static/editor.html +++ b/static/editor.html @@ -81,6 +81,8 @@ ДОМОЙ + +
@@ -2392,6 +2394,142 @@ function toggleLeft() { setTimeout(applyLOD, 0); })(); +