{{ message.text }}
@@ -111,9 +160,22 @@ const addFilterSchool = () => { align-items: start; padding: 0.28rem 0.4rem; border-radius: 0.4rem; + border: 1px solid transparent; background: var(--danmu-item-bg); } +.danmu-item.is-red-side { + border-color: rgba(251, 113, 133, 0.82); + background: linear-gradient(90deg, rgba(190, 24, 93, 0.16), rgba(15, 23, 42, 0.03) 72%), rgba(190, 24, 93, 0.08); + box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.1); +} + +.danmu-item.is-blue-side { + border-color: rgba(56, 189, 248, 0.82); + background: linear-gradient(90deg, rgba(3, 105, 161, 0.16), rgba(15, 23, 42, 0.03) 72%), rgba(3, 105, 161, 0.08); + box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.1); +} + .meta-col { min-width: 0; } @@ -143,6 +205,30 @@ const addFilterSchool = () => { opacity: 0.72; } +.side-badge { + display: inline-flex; + align-items: center; + width: fit-content; + margin: 0.2rem 0 0; + padding: 0.1rem 0.38rem; + border-radius: 999px; + font-size: 0.62rem; + line-height: 1.2; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: #f8fafc; + background: rgba(15, 23, 42, 0.78); +} + +.danmu-item.is-red-side .side-badge { + background: rgba(190, 24, 93, 0.92); +} + +.danmu-item.is-blue-side .side-badge { + background: rgba(2, 132, 199, 0.92); +} + .content { margin: 0; min-width: 0; diff --git a/src/components/danmu/DanmuPanel.vue b/src/components/danmu/DanmuPanel.vue index b55c5ef..77a6fd9 100644 --- a/src/components/danmu/DanmuPanel.vue +++ b/src/components/danmu/DanmuPanel.vue @@ -1,4 +1,5 @@