koishi-plugin-chat-patch 3.0.2 → 5.0.1

package/client/web/src/assets/css/msg.css

@@ -0,0 +1,941 @@
+/*
+    msg.css - 消息的样式
+    2022/04/03 - Stapx Steve [林槐]
+*/
+
+.message {
+    user-select: none;
+    transition: background 0.3s, opacity 0.3s;
+    display: flex;
+    padding: 5px 10px 10px 10px;
+    width: calc(100% - 30px);
+    border-radius: 7px;
+    margin: 5px 0;
+    font-size: 1rem;
+    flex-wrap: wrap;
+}
+.message.me {
+    flex-direction: row-reverse;
+}
+.message.me.right {
+    flex-direction: row-reverse !important;
+}
+.message.me.left {
+    flex-direction: row;
+}
+.message.me.left > img {
+    margin: 10px 15px 0 0;
+}
+.message-body.me.left {
+    align-items: start;
+}
+.message.selected {
+    background: #0000001d;
+}
+/* 多选模式：未选中消息弱化，选中消息显示描边和勾选 */
+.message.selecting {
+    position: relative;
+    padding-left: 36px;
+    opacity: 0.55;
+    cursor: pointer;
+}
+.message.selecting.selected {
+    opacity: 1;
+    background: rgba(var(--color-card-rgb), 0.78);
+    outline: 2px solid var(--color-main);
+    outline-offset: -2px;
+}
+.message.selecting::after {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: 10px;
+    right: auto;
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box;
+    border: 2px solid var(--color-font-2);
+    border-radius: 50%;
+    background: rgba(var(--color-bg-rgb), 0.6);
+    pointer-events: none;
+    z-index: 2;
+}
+.message.selecting.selected::after {
+    content: '';
+    background: var(--color-main);
+    border-color: var(--color-main);
+}
+.message.forward {
+    border: 2px solid var(--color-card-2);
+    width: calc(100% - 45px);
+    margin-bottom: 20px;
+    overflow-y: scroll;
+    max-height: 40vh;
+}
+.message.body-only {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+}
+.message > img {
+    width: 35px;
+    height: 35px;
+    border-radius: 7px;
+    margin: 10px 15px 0 0;
+}
+.message.me > img {
+    margin: 10px 0 0 15px;
+}
+.message.me.right > img {
+    margin: 10px 0 0 15px !important;
+}
+.message > div.sending {
+    width: 13px;
+    height: auto;
+    display: none;
+    align-items: flex-end;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 3px;
+}
+.message > div.sending.me {
+    display: flex;
+}
+.message > div.sending.right.me {
+    display: none;
+}
+.message > div.sending.left.me > svg {
+    animation: rotate 1.5s linear infinite;
+    color: var(--color-font-2);
+    width: 0.8rem;
+}
+
+.message-body {
+    color: var(--color-font);
+    display: flex;
+    flex-direction: column;
+    max-width: 60%;
+}
+.message-body.me {
+    color: var(--color-font-r);
+}
+.message.merge > div.message-body {
+    max-width: calc(100% - 50px);
+}
+.message.revoke {
+    display: none;
+}
+.message.revoke.me {
+    display: flex;
+    opacity: 0.4;
+}
+.message.body-only > div.message-body {
+    max-width: 100%;
+    width: 100%;
+}
+.message-body a {
+    color: var(--color-font);
+}
+.message-body.me,
+.message-body.me.right {
+    align-items: end;
+}
+.message-body.me a {
+    color: var(--color-font-r);
+}
+.message-body.me > header > a {
+    color: var(--color-font);
+}
+.message-body a:link {
+    text-decoration: underline;
+    display: inline-block;
+    padding: 0 5px;
+    opacity: 0.8;
+}
+.message-body a:link:before {
+    text-align: center;
+    content: '🔗';
+    color: transparent;
+    text-shadow: 0 0 0 var(--color-font-1);
+}
+.message-body.me a:link::before {
+    text-shadow: 0 0 0 var(--color-font-1-r);
+}
+.message-body > header {
+    flex-wrap: wrap;
+    display: flex;
+}
+.message-body > header > span {
+    margin-right: 3px;
+    font-size: 0.7rem;
+    background: var(--color-font);
+    color: var(--color-font-r);
+    border-radius: 10px;
+    padding: 1px 4px;
+}
+.message-body > header > span.owner {
+    background: var(--color-yellow);
+}
+.message-body > header > span.admin {
+    background: var(--color-green);
+}
+.message-body > header > span.robot {
+    background: var(--color-blue);
+}
+.message-body > header > a {
+    color: var(--color-font-1);
+    display: inline-block;
+    font-size: 0.8rem;
+    margin: 0 5px;
+}
+.message-body > header > a.time {
+    color: var(--color-font-2);
+    font-size: 0.75rem;
+    opacity: 0.7;
+}
+.message-body > div {
+    background: var(--color-card-1);
+    border-radius: 7px;
+    width: fit-content;
+    margin-top: 5px;
+    padding: 10px;
+}
+/* 限制消息内图片/视频高度，避免长图或大图撑爆聊天区 */
+#msgPan .message-body img,
+.merge-pan .message-body img,
+#msgPan .message-body video,
+.merge-pan .message-body video,
+#msgPan .message-body iframe,
+.merge-pan .message-body iframe {
+    max-height: min(18rem, 40vh) !important;
+}
+.message-body.me > div {
+    background: var(--color-main);
+}
+.message.body-only > div.message-body > div {
+    background: transparent;
+    backdrop-filter: unset;
+    padding: 0;
+}
+.message-body.super-face > div {
+    backdrop-filter: unset;
+    background: transparent;
+}
+.message-body.super-face > div > div {
+    padding: 20px 10px;
+    border: 0;
+}
+
+.message-mine {
+    background: var(--color-main) !important;
+    color: var(--color-font-r) !important;
+}
+.message-mine a {
+    color: var(--color-font-r) !important;
+}
+.message-mine a:link {
+    opacity: 0.8;
+}
+
+.message-mine a:link:before {
+    text-align: center;
+    content: '🔗';
+    color: transparent;
+    text-shadow: 0 0 0 var(--color-font-1-r);
+}
+.message-mine svg {
+    color: var(--color-font-r) !important;
+}
+
+.msg-inline {
+    display: inline-block;
+}
+
+.msg-text {
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+
+.msg-md h1,
+.msg-md h2,
+.msg-md h3,
+.msg-md h4 {
+    align-items: flex-end;
+    flex-direction: row;
+    display: flex;
+    margin: 0;
+}
+.msg-md img {
+    border-radius: 7px;
+    max-width: 100%;
+    max-height: min(18rem, 40vh) !important;
+    width: auto !important;
+    height: auto !important;
+    object-fit: contain;
+}
+.msg-md blockquote {
+    border-left: 3px solid var(--color-font-2);
+    color: var(--color-font-2);
+    border-radius: 3px;
+    font-size: 0.8rem;
+    padding: 0 10px;
+    margin: 0;
+}
+
+.msg-unknown {
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+    font-style: italic;
+    opacity: 0.5;
+}
+
+.msg-img {
+    margin: 5px 0;
+    border-radius: 7px;
+    max-height: 35vh;
+    cursor: pointer;
+    display: block;
+    max-width: 100%;
+}
+.msg-img.top {
+    margin: 0 0 5px 0;
+}
+.msg-img.bottom {
+    margin: 5px 0 0 5px;
+}
+.msg-img.alone {
+    border: 1px solid var(--color-main);
+    max-width: calc(100% + 20px);
+    margin: -10px;
+}
+.msg-img.face {
+	max-width: calc(var(--width) / 2 + 20px);
+}
+.msg-img.face.lottie-face {
+    max-width: 30vh
+}
+.msg-img-placeholder {
+    border: 1px dashed var(--color-card-2) !important;
+    min-width: 180px;
+    min-height: 110px;
+    padding: 16px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 10px;
+    color: var(--color-font-2);
+    cursor: pointer;
+}
+.msg-img-placeholder.alone {
+    margin: 0 !important;
+}
+.msg-img-placeholder svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+.msg-img-placeholder span {
+    font-size: 0.8rem;
+    height: unset !important;
+    white-space: nowrap;
+}
+.message-body.me .msg-img-placeholder {
+    border-color: rgba(var(--color-font-r-rgb), 0.35);
+    color: var(--color-font-1-r);
+}
+/* 长图优化样式 */
+div:has(> .msg-img.long-img)::after {
+    content: '长图';
+    color: #434343;
+    background: rgba(var(--color-card-2-rgb), 0.5);
+    width: calc(100% - 10px);
+    display: block;
+    position: sticky;
+    margin-bottom: -20px;
+    transform: translateY(-100%);
+    text-align: center;
+    padding: 5px;
+    border-radius: 7px;
+    font-size: 0.65rem;
+    backdrop-filter: blur(20px);
+}
+div:has(> .msg-img.long-img.light)::after {
+    color: #dbdbdb;
+}
+.msg-img.long-img {
+    max-height: 40vh;
+    width: 20vw;
+    height: 40vh;
+    object-fit: cover;
+    object-position: top center;
+}
+.msg-img.long-img.alone {
+    max-width: calc(100% + 20px);
+    margin: -10px;
+}
+
+.msg-face {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0 2px -5px 2px;
+    /* image-rendering: pixelated; */
+}
+.msg-face-svg {
+    color: var(--color-font-1);
+    margin: -5px 2px -3px 2px;
+    height: 1.2rem;
+    width: 1.2rem;
+    opacity: 0.7;
+}
+.msg-face-svg.me {
+    color: var(--color-font-1-r);
+}
+.msg-face-long > span {
+    display: inline-block;
+    margin: 5px 0;
+}
+.msg-face-long > span:nth-child(odd) {
+    transform: translateY(5px);
+}
+.msg-face-long > span:nth-child(even) {
+    transform: translateY(-5px);
+}
+.msg-face-long > span:nth-child(3n) {
+    opacity: 0;
+    width: 8px;
+}
+
+.msg-mface {
+    outline: 1px dashed var(--color-main);
+}
+
+.msg-at {
+    display: inline-block;
+}
+.msg-at > a {
+    color: var(--color-main) !important;
+    /* text-decoration: underline; */
+    cursor: pointer;
+    padding: 3px;
+}
+.msg-at.me > a {
+    color: var(--color-font-r) !important;
+}
+.msg-at.atme > a {
+    color: var(--color-font-r) !important;
+    background: var(--color-main);
+    border-radius: 4px;
+}
+
+.msg-replay {
+    background: #00000017;
+    margin-bottom: 10px;
+    border-radius: 7px;
+    overflow: hidden;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+}
+.msg-replay > div:first-child {
+    display: flex;
+}
+.msg-replay > div:first-child span {
+    margin-right: 25px;
+    font-size: 0.75rem;
+    opacity: 0.7;
+    flex: 1;
+}
+.msg-replay > div:first-child svg {
+    height: 0.7rem;
+    opacity: 0.7;
+}
+.msg-replay > div:last-child span,
+.msg-replay > div:last-child a,
+.msg-replay > a:last-child {
+    font-size: 0.8rem !important;
+}
+.msg-replay.me svg {
+    color: var(--color-font-1-r);
+}
+.msg-replay.me,
+.msg-replay.me .message-body,
+.msg-replay.me .msg-text,
+.msg-replay.me span,
+.msg-replay.me a {
+    color: var(--color-font-r);
+}
+
+.msg-xml {
+    padding: 5px 15px;
+}
+.msg-xml p {
+    margin-bottom: 2px;
+}
+.msg-xml hr {
+    display: none;
+}
+.msg-xml-summary {
+    display: block;
+    font-size: 0.9rem;
+    background: #00000017;
+    margin: 0 -25px -15px -25px;
+    padding: 5px 5px 5px 10px;
+    border-radius: 0 0 7px 7px;
+}
+.msg-xml-img {
+    width: 3rem;
+    float: right;
+    margin-left: 15px;
+}
+
+.msg-record {
+    display: flex;
+    margin: 0 5px;
+}
+.msg-record > i {
+    display: inline-block;
+    font-size: 2rem;
+}
+.msg-record > div {
+    margin-left: 10px;
+}
+.msg-record > div a {
+    line-height: 2rem;
+}
+
+.msg-video {
+    margin: -9px;
+    border-radius: 7px;
+    overflow: hidden;
+}
+.msg-video video {
+    width: 100%;
+    max-height: 50vh;
+    margin-bottom: -7px;
+}
+
+.msg-file {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.msg-file svg {
+    color: var(--color-font-1);
+}
+.msg-file.me svg {
+    color: var(--color-font-1-r);
+}
+.msg-file > div:nth-child(1) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.msg-file > div:nth-child(1) a {
+    font-size: 0.75rem;
+    display: block;
+    opacity: 0.7;
+}
+.msg-file > div:nth-child(1) i {
+    font-size: 0.8rem;
+    font-style: normal;
+    overflow-wrap: anywhere;
+}
+.msg-file > div:nth-child(1) p {
+    display: inline-block;
+    font-size: 1rem;
+    margin: 5px 0 0 0;
+}
+.msg-file > div:nth-child(2) {
+    background: #0000002e;
+    border-radius: 100%;
+    margin-left: 40px;
+    margin-right: 5px;
+    cursor: pointer;
+}
+.msg-file > div:nth-child(2) svg {
+    margin: 15px 10px 10px 10px;
+    height: 20px;
+    width: 27px;
+}
+
+.msg-link-view {
+    display: flex;
+    flex-direction: row;
+    background: #00000017;
+    border-radius: 7px;
+    margin-top: 7px;
+    padding: 10px;
+}
+.msg-link-view > div.bar {
+    width: 5px;
+    min-width: 5px;
+    background: #00000030;
+    border-radius: 5px;
+    margin-right: 7px;
+}
+.msg-link-view > div.bar.me {
+    background: var(--color-font-r);
+    opacity: 0.6;
+}
+.msg-link-view > div {
+    display: flex;
+}
+.msg-link-view > div > img {
+    border-radius: 7px;
+    margin-right: 7px;
+    min-height: 5rem;
+    max-height: 7rem;
+    max-width: 50%;
+}
+.msg-link-view > div > div.body {
+    flex-direction: column;
+    display: flex;
+}
+.msg-link-view > div > div.body p {
+    font-weight: bold;
+    margin-bottom: 0;
+}
+.msg-link-view > div > div.body span {
+    font-size: 0.9rem;
+}
+.msg-link-view > div > div.body span:nth-child(3) {
+    font-size: 0.8rem;
+    opacity: 0.7;
+}
+.msg-link-view.large > div {
+    flex-direction: column-reverse;
+    align-items: center;
+    display: flex;
+}
+.msg-link-view.large > div > img {
+    margin-bottom: 5px;
+    border-radius: 7px;
+    max-width: 100%;
+    max-height: unset;
+    margin-top: 15px;
+}
+
+.msg-json {
+    cursor: pointer;
+    width: min-content;
+    min-width: 35vw;
+}
+
+/* QQ 小程序卡片固定为方形卡片，不随屏幕宽度继续拉伸 */
+.msg-json.miniapp-card {
+    width: 18rem;
+    min-width: 0;
+    max-width: min(18rem, 80vw);
+    max-height: 18rem;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-sizing: border-box;
+    border: 1px solid rgba(var(--color-card-2-rgb), 0.5);
+    border-radius: 7px;
+    background: rgba(var(--color-card-rgb), 0.35);
+}
+.msg-json.miniapp-card > p {
+    flex: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.msg-json.miniapp-card > img {
+    width: 100%;
+    max-width: 100%;
+    flex: 1;
+    min-height: 0;
+    object-fit: cover;
+    border-radius: 7px;
+    margin: 7px 0 0;
+    transform: none;
+}
+.msg-json.miniapp-card > div.bottom-bar {
+    margin: 0;
+    padding: 8px;
+}
+
+.msg-json > p {
+    font-weight: bold;
+    margin: 0;
+}
+
+.msg-json > span {
+    opacity: 0.7;
+    font-size: 0.9rem;
+    white-space: pre-wrap;
+}
+
+.msg-json > img {
+    max-width: 30vw;
+    height: 25vh;
+    border-radius: 7px;
+    margin-top: 7px;
+    display: block;
+    margin-left: 50%;
+    transform: translate(-50%);
+}
+
+.msg-json > div.bottom-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: #00000017;
+    margin: 10px -10px -10px -10px;
+    border-radius: 0 0 7px 7px;
+    padding: 5px;
+}
+
+.msg-json > div.bottom-bar > svg,
+.msg-json > div.bottom-bar > img {
+    height: 1.1rem;
+    border-radius: 5px;
+    margin-left: 7px;
+    margin-right: 5px;
+}
+
+.msg-json > div.bottom-bar > svg {
+    opacity: 0.8;
+}
+
+.msg-json > div.bottom-bar > span {
+    display: inline-block;
+    font-size: 0.9rem;
+    opacity: 0.7;
+    margin-left: 7px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.msg-json > div.el-vue-amap-container {
+    width: 37.5vh;
+    height: 25vh;
+    max-width: 30vw;
+    border-radius: 7px;
+    overflow: hidden;
+    margin-top: 10px;
+}
+
+span.user-title {
+    margin-right: 3px;
+    font-size: 0.9rem;
+    height: 1rem;
+    display: inline-block;
+    background: var(--color-main);
+    color: var(--color-font-r);
+    border-radius: 0.5rem;
+    padding: 1px 4px;
+}
+span.user-title.owner {
+    background: var(--color-yellow);
+}
+span.user-title.admin {
+    background: var(--color-green);
+}
+span.user-title.robot {
+    background: var(--color-blue);
+}
+
+.loading {
+    opacity: 0.0;
+}
+.loading > svg {
+    animation: rotate 1.5s linear infinite;
+}
+.loading > .show{
+    opacity: 1.0;
+}
+
+.msg-raw-forward {
+    cursor: pointer;
+    width: 17rem;
+}
+.msg-raw-forward > span {
+    font-weight: bold;
+}
+.msg-raw-forward > div.forward-msg {
+    display: block;
+    margin: 15px 15px 5px 15px;
+}
+.msg-raw-forward > div.forward-msg > div {
+    font-size: 0.9rem;
+    opacity: 0.7;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.msg-raw-forward > div:last-child {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: #00000017;
+    margin: 10px -10px -10px -10px;
+    border-radius: 0 0 7px 7px;
+    padding: 5px;
+    font-size: 0.9rem;
+}
+.msg-raw-forward > div:last-child > span {
+    opacity: 0.7;
+    margin-left: 7px;
+}
+
+.note {
+    justify-content: center;
+    margin: 10px 0;
+    display: flex;
+}
+.note-base {
+    border-radius: calc(3rem + 30px);
+    background: var(--color-card-1);
+    align-items: center;
+    padding: 7px 30px;
+    font-size: 0.8rem;
+    display: flex;
+}
+.note-base > a {
+    color: var(--color-font);
+}
+.note-ban > a {
+    color: var(--color-main);
+    font-weight: bold;
+}
+.note-time {
+    color: var(--color-font-2) !important;
+    display: block;
+}
+.note-nomsg {
+    color: var(--color-font-2);
+    text-align: center;
+    margin: 40px auto;
+    display: block;
+    opacity: 0.5;
+    width: 80%;
+}
+.note-nomsg > a {
+    background: var(--color-card);
+    color: var(--color-font);
+    border-radius: 1rem;
+    position: relative;
+    font-size: 0.8rem;
+    padding: 0 20px;
+    z-index: 1;
+}
+.note-nomsg > hr {
+    border-bottom: 1px solid var(--color-main) !important;
+    margin-bottom: -0.7rem;
+    border: 0 !important;
+    opacity: 0.5;
+}
+.note-recall > a {
+    color: var(--color-main);
+    font-weight: bold;
+    max-width: 19vw;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin: 0 5px;
+}
+
+.note-notify {
+    transition: border 0.5s;
+    border: 1px solid transparent;
+}
+.note-notify img {
+    display: inline-block;
+    width: 1rem;
+    margin: 0 3px;
+}
+.note-notify span {
+    margin: 0 3px;
+    color: var(--color-main);
+    font-weight: bold;
+}
+.note.poking > div.note-notify {
+    border: 1px solid var(--color-main);
+}
+
+.file-view {
+    background: rgba(var(--color-card-rgb), 0.2);
+    justify-content: center;
+    border-radius: 7px;
+    margin-top: 10px;
+    display: flex;
+    padding: 10px;
+    width: 100%;
+}
+
+.file-view > img,
+.file-view > video {
+    border-radius: 7px;
+    max-height: 30vh;
+    max-width: 100%;
+}
+.file-view > video {
+    margin: -10px;
+    width: 100%;
+}
+.file-view > span.txt {
+    font-family: monospace;
+    white-space: pre-wrap;
+    font-size: 0.9rem;
+    opacity: 0.6;
+    width: 100%;
+}
+.file-view > span.txt > a {
+    display: block;
+    width: 100%;
+}
+
+@media (max-width: 992px) {
+    /* 消息体 */
+    .message-body.me {
+        align-items: start;
+    }
+    .message.me {
+        flex-direction: row;
+    }
+    .message > img {
+        display: unset !important;
+    }
+    .message.me > img {
+        margin: 10px 15px 0 0;
+    }
+    .message-body {
+        max-width: calc(100% - 50px);
+    }
+    .message-body > a:first-child {
+        color: var(--color-font-1) !important;
+        display: unset !important;
+    }
+
+    .message > div.sending.right.me {
+        display: flex;
+    }
+    .message > div.sending.left.me {
+        display: none;
+    }
+    .message > div.sending.right.me > svg {
+        animation: rotate 1.5s linear infinite;
+        color: var(--color-font-2);
+        width: 0.75rem;
+    }
+}
+
+@media (max-width: 500px) {
+    .msg-img.face.lottie-face {
+        max-width: 40vw;
+    }
+
+    .msg-json {
+        cursor: pointer;
+        width: min-content;
+        min-width: 50vw;
+    }
+}