koishi-plugin-chat-patch 3.0.2 → 5.0.0

package/client/web/src/assets/css/append/append_vibrancy.css

@@ -0,0 +1,113 @@
+/* 桌面端透明附加样式 */
+
+html,
+body {
+    background: transparent;
+}
+
+#app {
+    background: rgba(var(--color-card-rgb), 0.6);
+}
+
+.home-body {
+    background: transparent;
+}
+.login-pan-card {
+    background: transparent;
+    max-width: 240px !important;
+}
+.login-pan-card:hover {
+    box-shadow: none !important;
+}
+.wave-pan {
+    display: none;
+}
+.login-pan-card label {
+    border: 1px solid var(--color-main);
+    opacity: 0.8;
+    background: unset;
+}
+.login-pan-card label:focus-within {
+    background: transparent;
+}
+.main-body > ul {
+    background: transparent;
+}
+.friend-list {
+    background: transparent;
+}
+.friend-list > div:first-child {
+    margin: 15px 15px 0 0;
+}
+.friend-list > div:first-child label {
+    background: rgba(var(--color-card-2-rgb), 0.7) !important;
+}
+.friend-list > div:last-child {
+    width: calc(100% - 6px);
+    padding: 0 6px 0 0;
+}
+.friend-list > div:last-child > div:last-child {
+    margin-bottom: 10px;
+}
+.friend-body {
+    margin-left: 0;
+}
+.friend-body.onmenu,
+.friend-body:hover {
+    background: rgba(var(--color-card-2-rgb), 0.7) !important;
+}
+
+.opt-main {
+    height: calc(100% - 10px);
+    background: transparent;
+    padding-left: 3px;
+}
+.opt-main.active > div:last-child {
+    margin-left: -5px !important;
+}
+.opt-main > div:first-child {
+    width: 285px !important;
+    margin-left: -25px;
+}
+.opt-main > div:last-child {
+    background: var(--color-bg);
+    margin: -5px -5px 0 -65px !important;
+    box-shadow: -5px 0px 4px -5px var(--color-shader);
+    transition: margin 0.3s;
+    height: calc(100% + 7px);
+    padding: 10px 10px 0 10px;
+}
+
+.about-pan > div {
+    box-shadow: none !important;
+    background: transparent;
+}
+.bcd-body {
+    background: rgba(var(--color-card-rgb), 0.7) !important;
+}
+.jump-card {
+    background: rgba(var(--color-card-2-rgb), 0.7) !important;
+    margin-right: 15px !important;
+    margin-left: 10px;
+}
+.friend-list-space {
+    box-shadow: -5px 0px 4px -5px var(--color-shader);
+}
+.chat-pan {
+    box-shadow: -5px 0px 4px -5px var(--color-shader);
+    left: 270px;
+}
+
+.script-view {
+    background: rgba(var(--color-card-rgb), 0.6) !important;
+}
+.script-view .list > header > span,
+.script-view .list-body > div {
+    backdrop-filter: blur(10px);
+}
+
+@media (max-width: 500px) {
+    .chat-pan > div.info {
+        margin-top: 35px;
+    }
+}

package/client/web/src/assets/css/append/append_win32.css

@@ -0,0 +1,109 @@
+/* Windows 桌面端附加样式 */
+
+body,
+input {
+    font: 14px "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif !important;
+}
+
+#base-app.withBar {
+    height: calc(100% - 35px);
+    padding-top: 35px;
+}
+
+.top-bar {
+    margin-bottom: 0 !important;
+    border-radius: 7px 7px 0 0;
+    background: transparent;
+    box-shadow: unset;
+    height: 35px;
+}
+.top-bar > div.controller > div {
+    padding: 7px;
+}
+.top-bar > div.controller > div > svg {
+    height: 14px;
+}
+
+.main-body > div {
+    margin-top: -35px;
+    height: calc(100% + 35px);
+}
+.main-body > ul {
+    margin-top: -35px;
+    height: calc(100% + 35px);
+    padding-left: 5px;
+}
+
+.chat-pan.withBar {
+    left: 275px;
+    top: 0;
+    height: calc(100% - 25px);
+    padding-top: 25px;
+}
+.chat-info {
+    margin: calc(50vh - 20px) 0 0 50%;
+}
+.opt-main > div:last-child {
+    padding-top: 25px !important;
+    height: calc(100% - 17px) !important;
+}
+
+@media (max-width: 700px) {
+    .friend-list {
+        width: 60px !important;
+    }
+    .opt-main > div:last-child {
+        padding-top: 25px !important;
+        height: calc(100% - 37px) !important;
+    }
+    .chat-pan.withBar {
+        left: 60px !important;
+        height: calc(100% - 75px);
+        padding-top: 20px;
+    }
+    .chat-pan.open.withBar {
+        left: 80px !important;
+    }
+    .chat-info {
+        width: calc(100% - 70px);
+        margin: calc(50vh - 20px) 0 0 20px !important;
+    }
+    .chat-info-pan {
+        height: calc(100% + 55px);
+        margin-top: -20px;
+    }
+    .friend-list > div:first-child {
+        margin: 55px 15px 0 10px !important;
+    }
+    .friend-list > div:first-child > div.small > div {
+        width: 35px;
+        height: 35px;
+        margin-right: 0;
+    }
+    .friend-list.open > div:first-child > div.small > div {
+        height: 44px;
+        width: 44px;
+    }
+
+    .friend-list > div:first-child > div.small {
+        margin-top: -20px;
+        margin-left: 5px;
+        margin-bottom: 5px;
+    }
+}
+
+@media (max-width: 500px) {
+    .chat-pan.withBar {
+        padding-top: 0;
+        left: 0 !important;
+    }
+    .friend-list > div:first-child {
+        margin: 80px 15px 0 10px !important;
+    }
+    .chat-info-pan {
+        height: calc(100% + 95px);
+    }
+    .chat-info {
+        margin: calc(50vh - 20px) 0 -20px 0 !important;
+    }
+}

package/client/web/src/assets/css/append/mobile/append_mobile_horizontal.css

@@ -0,0 +1,349 @@
+/* 移动端附加样式（横向） */
+
+html {
+    -webkit-tap-highlight-color: transparent;
+}
+.ss-card {
+    border-radius: 15px;
+}
+
+.tab-bar>li svg {
+    font-size: 1.2rem !important;
+}
+.tab-bar>span {
+    display: none;
+}
+
+#app {
+    background: var(--color-card);
+}
+.main-body > ul {
+    background: rgba(var(--color-card-rgb), 0.7);
+    backdrop-filter: blur(35px);
+}
+
+.login-pan-card {
+    background: transparent;
+    box-shadow: unset;
+}
+.login-pan-card:hover {
+    box-shadow: unset !important;
+}
+.wave-pan {
+    display: none;
+}
+
+/* 一级侧栏 */
+.main-body > ul {
+    justify-content: space-evenly;
+    padding-bottom: var(--safe-area-bottom);
+    position: absolute;
+    z-index: 20;
+    display: flex;
+    flex-direction: row;
+    width: 365px;
+    height: 75px;
+    left: 0;
+    bottom: 0;
+}
+.side-bar-space {
+    display: none;
+}
+
+.global-music-player {
+    bottom: calc(65px + var(--safe-area-bottom)) !important;
+    left: 10px !important;
+}
+
+.friend-list {
+    padding-bottom: calc(85px + var(--safe-area-bottom));
+    background: var(--color-card);
+    width: 365px;
+}
+.chat-pan {
+    left: 365px;
+}
+.friend-body img {
+    height: 45px;
+    width: 45px;
+}
+
+.group-assist-message-list {
+    margin-right: -365px;
+}
+.group-assist-message-list.show {
+    margin-left: -365px;
+}
+
+.home-body {
+    background: var(--color-card);
+    width: calc(100% - 365px);
+    margin-left: 365px;
+    border-left: 1px solid var(--color-card-2);
+}
+
+/* 聊天面板 */
+.chat-pan > div.info > svg {
+    display: none;
+}
+.main-body > ul > li > span {
+    display: block !important;
+}
+.main-body > ul > li {
+    margin-top: 20px !important;
+    margin-bottom: 0 !important;
+}
+.main-body > ul > li.active > span,
+.main-body > ul > li.active > svg {
+    background-color: transparent;
+    color: var(--color-main);
+}
+.chat-pan {
+    z-index: 21;
+    height: calc(100% + 35px - var(--safe-area-bottom));
+    border-left: 1px solid var(--color-card-2);
+}
+.chat-pan > div.info {
+    margin: 0 0 15px 0;
+    width: calc(100% - 50px);
+    padding: 15px 25px;
+    padding-top: calc(var(--safe-area-top) + 15px);
+    background: rgba(var(--color-card-rgb), 0.7);
+    backdrop-filter: blur(35px);
+    box-shadow: unset;
+    border-bottom: 1px solid var(--color-card-2);
+    border-radius: 0;
+}
+.merge-pan {
+    box-shadow: 0 0 5px var(--color-shader);
+}
+.merge-pan>div:last-child>div:first-child {
+    margin: calc(var(--safe-area-top) + 15px) 35px 0 35px;
+    flex-direction: row-reverse;
+    overflow: hidden;
+    padding: 0;
+}
+.merge-pan>div:last-child>div:first-child svg:first-child {
+    display: none;
+}
+.merge-pan>div:last-child>div:first-child svg {
+    transform: translateX(calc(-50% + 1px));
+}
+.merge-pan>div:last-child>div:first-child span {
+    font-size: 1.5rem;
+}
+.chat-pan > div.bg {
+    height: calc(100% - 34px - var(--append-fs-adaptation));
+}
+.chat-pan > div.chat {
+    padding-bottom: 70px;
+}
+.chat-pan > div.more {
+    padding-bottom: var(--safe-area-bottom);
+    background: rgba(var(--color-card-rgb), 0.7);
+    backdrop-filter: blur(35px);
+}
+.chat-pan > div.more > div:first-child {
+    padding-bottom: 20px;
+}
+.chat-pan > div.more > div:first-child > div:not(.img-pan) {
+    border-radius: 999px;
+}
+.chat-pan > div.more > div:nth-child(2) {
+    padding: 0 20px 20px 20px;
+}
+.chat-pan > div.more > div:nth-child(2) > div:first-child {
+    border-radius: 999px;
+    height: 40px;
+    width: 40px;
+}
+.chat-pan > div.more > div:nth-child(2) > div:first-child > svg {
+    margin: 8px 13px;
+    height: 25px;
+    width: 15px;
+}
+.chat-pan > div.more > div:nth-child(2) > div:nth-child(2) {
+    background: transparent;
+    border: 1px solid var(--color-font-2);
+    opacity: 0.7;
+    border-radius: 40px;
+}
+.chat-pan > div.more > div:nth-child(2) > div:nth-child(2) > div {
+    display: none;
+}
+.chat-pan > div.more > div:nth-child(2) > div > form > textarea {
+    max-height: 30vh;
+}
+.msg-menu-body {
+    max-width: 35%;
+    width: 35%;
+}
+.chat-pan > div.new-msg {
+    margin: -50px 20px 20px auto;
+}
+.face-pan {
+    padding-bottom: 80px;
+}
+.face-pan div.title > span{
+    font-size: 1rem;
+}
+.face-pan div.system-face-bar {
+    height: 315px;
+}
+.base-face, .face-stickers {
+    height: 290px;
+    padding: 0;
+}
+.custom-face-bar .face {
+    margin: 0 10px;
+}
+.face > span {
+    width: 70px;
+    height: 70px;
+}
+.face > div {
+    width: 50px;
+    height: 50px;
+}
+.face > div > .emoji-face {
+    width: 30px;
+    height: 30px;
+}
+.img-sender {
+    height: calc(100% - var(--safe-area-top) - calc(var(--safe-area-bottom) + 15px));
+    margin: calc(var(--safe-area-top) + 15px) 20px 0 20px;
+    width: calc(100% - 40px);
+}
+.img-sender > div.card {
+    box-shadow: 0 0 5px var(--color-shader) !important;
+    border-radius: 7px !important;
+}
+/* 消息 */
+.msg-img {
+    max-height: 40vh;
+}
+.msg-img.alone {
+    max-width: calc(100% + 30px);
+}
+/* 设置面板 */
+.opt-tab {
+    height: calc(100% - 145px);
+}
+.opt-tab > div:first-child {
+    box-shadow: unset !important;
+    margin: 0 -10px 0 -10px !important;
+    padding-top: calc(var(--safe-area-top) + 20px);
+    background: transparent;
+    backdrop-filter: blur(35px);
+}
+.opt-tab > div:first-child > div {
+    box-shadow: 0 0 5px var(--color-shader);
+    width: fit-content;
+    margin: 0 auto 20px auto;
+    background: var(--color-card-2);
+    border-radius: 999px;
+    padding: 0 20px !important;
+}
+.opt-tab > div:first-child svg {
+    font-size: 1.2rem;
+}
+.opt-tab .tab-bar {
+    margin: -17px -10px -17px -50px;
+}
+.opt-tab .tab-bar > li:last-child > div {
+    box-shadow: -10px 0 0 0 var(--color-card), 10px 0 0 0 var(--color-card);
+    background: var(--color-card);
+    height: 30px;
+    margin-top: -30px;
+    border-radius: 999px;
+    z-index: 1;
+}
+.opt-tab .tab-bar > li span {
+    z-index: 2;
+}
+.opt-tab .tab-bar > li:last-child span {
+    transform: translateY(-5px);
+}
+.opt-tab .tab-body {
+    margin-top: -60px;
+    padding-top: 70px;
+}
+.opt-tab .tab-body > div {
+    margin: 0 auto;
+    width: 85%;
+}
+.friend-list-space {
+    border-left: 1px solid var(--color-card-2);
+    background: var(--color-card);
+}
+
+.opt-main {
+    padding-top: 0;
+}
+.opt-main > div:first-child {
+    padding-top: var(--safe-area-top);
+    padding-bottom: calc(85px + var(--safe-area-bottom));
+}
+
+.chat-pan > div.more > div:nth-child(2) > div > form > input,
+.chat-pan > div.more > div:nth-child(2) > div > form > textarea {
+    font-weight: normal;
+}
+.chat-pan > div.more > div:nth-child(2) > div > form > textarea {
+    margin: 10px 0;
+}
+
+.friend-list > div:first-child {
+    padding-top: var(--safe-area-top);
+}
+
+.icon-list {
+    display: flex;
+}
+.icon-list > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px;
+}
+.icon-list > div.selected > img {
+    border: 3px solid var(--color-main);
+}
+.icon-list img {
+    width: 55px;
+    transition: border .3s;
+    border: 3px solid var(--color-card-2);
+    border-radius: 15px;
+}
+.icon-list span {
+    font-size: 0.85rem;
+    color: var(--color-font-1);
+    margin-top: 5px;
+}
+
+.music-entry-small img {
+    --size: calc(var(--safe-area-bottom) + 10px);
+    width: var(--size) !important;
+    height: var(--size) !important;
+}
+.music-entry-small svg {
+    transform: translateY(calc(-100% - 10px)) !important;
+}
+
+.msg-img.long-img {
+    max-height: 20vh;
+    width: 40vw;
+}
+.msg-json > img {
+    height: 15vh;
+    max-width: 100vw;
+}
+
+@media (max-width: 500px) {
+    .global-music-player {
+        bottom: calc(70px + var(--safe-area-bottom)) !important;
+    }
+    .opt-tab .tab-body > div {
+        width: 100%;
+    }
+}

package/client/web/src/assets/css/append/mobile/append_mobile_vertical.css

@@ -0,0 +1,96 @@
+/* 移动端附加样式（纵向） */
+
+.main-body > div {
+    height: calc(100% - 75px - var(--safe-area-top) - var(--safe-area-bottom));
+    padding-bottom: calc(75px + var(--safe-area-bottom));
+    margin-top: var(--safe-area-top);
+}
+
+.opt-main-tab,
+.main-body > div > div#homeTab {
+    margin-top: calc(1px - var(--safe-area-top)) !important;
+    height: calc(100% + var(--safe-area-top) + var(--safe-area-bottom) - 20px) !important;
+}
+
+.main-body > div > div#messageTab,
+.main-body > div > div#friendTab {
+    height: calc(100% + var(--safe-area-top) + var(--safe-area-bottom) - 20px) !important;
+}
+
+.chat-pan {
+    box-shadow: 0 0 5px var(--color-shader);
+}
+
+/* 联系人列表 */
+.friend-list .small {
+    display: none !important;
+}
+.friend-list .base {
+    display: flex !important;
+}
+.friend-list .base > span {
+    font-size: 1.5rem;
+}
+.friend-list .base > svg {
+    height: 1.3rem !important;
+}
+.friend-list > div:first-child {
+    padding-top: 0;
+}
+.friend-list > div:first-child label {
+    height: calc(1rem + 25px);
+    margin-top: 10px;
+    display: flex;
+}
+.friend-list > div:first-child label > input {
+    font-size: 1rem;
+}
+.friend-body > div:nth-child(1) {
+    transform: scaleY(0) !important;
+    height: unset !important;
+    width: 6px !important;
+    border-radius: 6px !important;
+    position: unset !important;
+}
+.friend-body > div:nth-child(1).new {
+    transform: scaleY(0.5) !important;
+}
+.exp-header:not(.open) {
+    display: flex !important;
+}
+
+.chat-info > header {
+    margin-top: calc(var(--safe-area-top));
+    flex-direction: row-reverse;
+    overflow: hidden;
+    transform: translateX(20px);
+}
+.chat-info>header>span {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+.chat-info>header>svg {
+    width: 2.2rem;
+    height: 2.2rem;
+    transform: translateX(calc(-50% + 0.5px));
+    margin-right: -10px;
+}
+
+.msg-img {
+    max-height: 20vh;
+}
+
+.home-body {
+    width: 100%;
+    margin-left: 0;
+}
+
+.opt-tab .tab-body > div {
+    padding: 0;
+}
+
+.pop-box-body.full.window {
+    height: calc(100vh - calc(var(--safe-area-top) + 80px + var(--safe-area-bottom)));
+    margin-bottom: var(--safe-area-bottom);
+}