koishi-plugin-chat-patch 3.0.2 → 5.0.0

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

@@ -0,0 +1,843 @@
+/* 桌面端基本样式 */
+
+html,
+body {
+    background: none;
+}
+.ss-button {
+    height: 35px;
+    font-size: 0.8rem;
+}
+.ss-card {
+    padding: 15px;
+}
+.ss-card header {
+    font-size: 0.95rem;
+    font-weight: bold;
+}
+
+.main-body > ul {
+    min-width: 45px;
+}
+.main-body > ul > li {
+    line-height: 30px;
+    margin-top: 10px;
+    min-width: 50px;
+    padding: 0;
+}
+.main-body > ul > li > svg {
+    width: 15px;
+    height: 15px;
+    padding: 10px;
+}
+.login-pan-card {
+    max-width: 250px;
+    padding: 30px 20px;
+}
+.login-pan-card > svg {
+    height: 20%;
+    width: 20%;
+}
+.login-pan-card p {
+    font-size: 0.9rem;
+}
+.login-pan-card label > input {
+    height: 30px;
+    font-size: 0.8rem;
+}
+.login-pan-card a {
+    font-size: 0.7rem;
+}
+.login-pan-card button {
+    height: 30px;
+    width: 95%;
+}
+.login-pan-card button.afd {
+    transform: translateX(calc(-50% + 25px));
+    transition: all 0.3s;
+    position: fixed;
+    width: 240px;
+    left: 50vw;
+    top: 75vh;
+}
+
+.quick-login {
+    background: transparent;
+    padding: 0;
+}
+.quick-login > div.list::-webkit-scrollbar {
+    display: none;
+}
+.quick-login > div.list > div {
+    border: 1px solid var(--color-main);
+    background: transparent;
+    border-radius: 999px;
+}
+.quick-login > div.list > div > div {
+    border: 1px solid var(--color-main);
+    background: transparent;
+}
+
+.global-music-player {
+    left: 50px !important;
+    background-color: rgba(var(--color-card-rgb), 0.4) !important;
+    backdrop-filter: blur(30px);
+}
+.music-controller {
+    background: rgba(var(--color-card-1-rgb), 0.7) !important;
+}
+.music-lyric {
+    background: rgba(var(--color-card-2-rgb), 0.7) !important;
+}
+.music-list::-webkit-scrollbar {
+    display: none;
+}
+
+.friend-list {
+    width: 220px;
+}
+.friend-list > div:first-child label {
+    height: 30px;
+    font-size: 0.8rem;
+    border-bottom: 1px solid var(--color-font-2);
+}
+.friend-list > div:first-child > div.small > span {
+    background: transparent;
+    color: var(--color-font);
+    font-weight: bold;
+    padding: 10px;
+    height: 44px;
+}
+
+.group-assist-message-list {
+    margin-right: -220px;
+}
+.group-assist-message-list.show {
+    margin-left: -220px;
+    margin-right: 0;
+}
+
+.friend-body {
+    margin-bottom: 5px;
+    margin-top: 0;
+}
+.friend-body img {
+    height: 30px;
+    width: 30px;
+}
+.friend-body > div:nth-child(1) {
+    height: 34px;
+}
+.friend-body > div p {
+    font-size: 0.8rem;
+}
+.friend-body > div > div a {
+    font-size: 0.75rem;
+}
+.friend-body:hover {
+    background: transparent !important;
+}
+.friend-body > div > div a.time {
+    font-size: 0.7rem;
+}
+.friend-body > svg {
+    padding: 10px;
+    height: 14px;
+    width: 14px;
+}
+
+.mumber-info > div:first-child {
+    padding: 15px;
+}
+.mumber-info > div:first-child > div {
+    margin-left: 15px;
+}
+.mumber-info > div:first-child > div > div > a {
+    font-size: 0.8rem;
+}
+.mumber-info > div:first-child img {
+    height: 35px;
+    width: 35px;
+}
+.mumber-info > div:first-child > div > span {
+    font-size: 0.75rem;
+}
+.mumber-info > div:first-child > div > div > div > span {
+    font-size: 0.6rem;
+}
+
+.chat-pan {
+    left: 280px;
+}
+.chat-pan > div.info {
+    padding: 10px;
+    width: calc(100% - 50px);
+}
+.chat-pan > div.info > div.info p {
+    font-size: 0.9rem;
+}
+.chat-pan > div.info > div.info span {
+    font-size: 0.75rem;
+}
+.chat-pan > div.info > img {
+    width: 40px;
+    height: 40px;
+}
+.chat-pan > div.chat {
+    margin-top: -80px;
+}
+.chat-pan > div.info > div.more {
+    width: 35px;
+    height: 35px;
+    margin-right: 5px;
+}
+.chat-pan > div.info > div.more > svg {
+    width: 15px;
+    height: 15px;
+}
+.chat-pan > div.more > div:nth-child(2) {
+    padding-top: 10px;
+}
+.chat-pan > div.more > div:nth-child(2) > div > form > input {
+    height: 40px !important;
+}
+.chat-pan > div.more > div:nth-child(2) > div > form > textarea {
+    margin: 8.5px 0;
+}
+.chat-pan > div.more > div:nth-child(2) > div:first-child {
+    margin-right: 10px;
+    width: 40px;
+    height: 40px;
+}
+.chat-pan > div.more > div:nth-child(2) > div:first-child > svg {
+    margin: 12.5px;
+    height: 15px;
+    width: 15px;
+}
+.chat-pan > div.more > div:nth-child(2) > div > div {
+    width: 30px;
+    height: 30px;
+}
+.chat-pan > div.more > div:nth-child(2) > div > div > svg {
+    width: 15px;
+    height: 15px;
+    margin: 7.5px;
+}
+.search-tag.show {
+    margin: 10px 20px 10px 20px !important;
+}
+.replay-tag.show {
+    margin: 10px 20px 0 20px;
+    margin-top: 10px;
+}
+
+.face-pan {
+    border: 1px solid var(--color-card-2);
+}
+.face-pan div.tab-main {
+    margin-top: 10px !important;
+}
+.face-pan div.tab-main > div {
+    margin-bottom: 0 !important;
+}
+.face-pan div.system-face-bar {
+    height: calc(300px - 75px);
+    overflow-y: scroll;
+    width: 100%;
+}
+
+.jin-ppan {
+    max-width: 350px;
+}
+.jin-pan > div:first-child {
+    padding: 10px;
+}
+.jin-pan > div:first-child > svg {
+    height: 1rem;
+}
+.jin-pan > div:first-child > span {
+    font-size: 0.9rem;
+}
+.jin-pan-body {
+    padding: 0 10px 0 10px;
+    margin-bottom: 10px;
+}
+.jin-pan-body > div > div:first-child a {
+    font-size: 0.8rem;
+}
+.jin-pan-body > div > div:first-child span {
+    font-size: 0.65rem;
+}
+.jin-pan-body > div > div:first-child > span {
+    font-size: 0.75rem;
+    flex: 1;
+    text-align: right;
+}
+.jin-pan-body > div > div.context {
+    padding: 10px 10px 5px 10px;
+}
+
+.ss-card:hover {
+    box-shadow: 0 0 3px var(--color-shader);
+}
+
+.message > img {
+    border: 1px solid var(--color-card-2);
+    height: 30px;
+    width: 30px;
+}
+.message-body > span {
+    font-size: 0.6rem;
+}
+.message-body > a {
+    font-size: 0.8rem;
+}
+.message-body > div {
+    font-size: 0.9rem;
+}
+
+.opt-main > div:first-child {
+    width: 250px;
+}
+
+.logo-card {
+    padding: 30px 15px 15px 15px;
+}
+.logo-card > svg {
+    width: 70px;
+}
+.logo-card > div > span {
+    font-size: 1.1rem;
+}
+.logo-card > span {
+    font-size: 0.8rem;
+    margin-top: 5px;
+}
+.logo-card > a {
+    font-size: 0.7rem;
+}
+
+.contributors-card {
+    width: calc(100% - 20px);
+    min-height: 0;
+}
+.contributors-card > div.contributors > div {
+    min-width: calc(20% - 10px);
+    aspect-ratio: 1;
+    margin: 5px;
+}
+
+.buttons > a {
+    height: 35px;
+    font-size: 0.75rem;
+}
+
+.buttons > a:not(:first-child) {
+    margin-left: 10px !important;
+    width: 40px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.logo-card > div,
+.opt-main > div:first-child > div:not(:first-child) {
+    margin-top: 10px;
+}
+
+.end-card {
+    margin: 10px 0 20px 0;
+    padding: 15px 20px;
+}
+.end-card > div > div > span {
+    font-size: 0.9rem;
+}
+.end-card > div > div {
+    margin-bottom: 0;
+}
+.end-card > svg {
+    width: 40px !important;
+    height: 40px !important;
+}
+
+.note-base {
+    padding: 5px 20px 5px 15px;
+    font-size: 0.7rem;
+}
+.exp-header {
+    margin-left: 0 !important;
+    font-size: 0.8rem;
+}
+.chat-pan > div.new-msg {
+    margin: 0 20px -17.5px auto;
+    height: 35px;
+}
+.chat-pan > div.new-msg > div > svg {
+    padding: 10px;
+    width: 13px;
+    height: 13px;
+}
+.chat-pan > div.new-msg > div > span {
+    margin-left: 0;
+}
+.chat-pan > div.info > svg {
+    width: 14px;
+    height: 14px;
+    padding: 14px;
+}
+.menu,
+.msg-menu-body {
+    padding: 5px !important;
+}
+.menu div.item,
+.msg-menu-body > div {
+    padding: 3px 8px !important;
+}
+.menu div.item > svg,
+.msg-menu-body > div > div > svg {
+    color: var(--color-font-1);
+    margin-top: 4px;
+    height: 0.8rem;
+    width: 0.8rem !important;
+    opacity: 0.9;
+    margin-right: 0 !important;
+}
+.menu div.item > a,
+.msg-menu-body > div > a {
+    font-size: 0.8rem !important;
+}
+.more-detail.show {
+    height: 40px;
+}
+.more-detail > div {
+    margin: 0 5px;
+    width: 40px;
+    height: 40px;
+}
+.more-detail > div > svg {
+    margin: 12.5px;
+    height: 15px;
+    width: 15px;
+}
+.chat-info > header > span {
+    font-size: unset;
+}
+.chat-info > header > svg {
+    height: 1.1rem;
+}
+.chat-info-base > div:first-child > img {
+    margin-left: 5px;
+    width: 30px;
+    height: 30px;
+}
+.chat-info-base > div:first-child > div:nth-child(2) > a {
+    font-size: 0.8rem;
+}
+.chat-info-base > div:first-child > div:nth-child(2) > span {
+    color: var(--color-font-2);
+    font-size: 0.7rem;
+}
+.chat-info-base > div:first-child > div:nth-child(3) {
+    height: 20px;
+    width: 20px;
+    padding: 10px;
+}
+.search-view > input {
+    border-bottom: 1px solid var(--color-font-2) !important;
+    height: 30px !important;
+    font-size: 0.8rem;
+}
+
+.img-pan {
+    padding: 5px;
+}
+.img-pan > .imgs > div > .img {
+    height: 13vh;
+}
+.img-pan > .imgs > div > span {
+    font-size: 0.8rem;
+}
+
+.chat-info-tab .tab-bar > li span {
+    font-size: 0.8rem;
+}
+.chat-info-tab-member > div > img {
+    height: 25px;
+    width: 25px;
+}
+.chat-info-tab-member > div > div > a {
+    font-size: 0.8rem;
+}
+.account-info > img {
+    height: 26px;
+}
+.account-info > svg {
+    height: 15px;
+    width: 15px;
+}
+.account-info > div > div > span:first-child {
+    font-size: 0.9rem;
+}
+.account-info > div > div > span:last-child {
+    font-size: 0.8rem;
+}
+.account-info {
+    padding: 10px 20px;
+}
+.opt-page > div > header {
+    font-size: 0.85rem;
+}
+.l10n-info > div > span:first-child {
+    font-size: 0.9rem;
+    margin-bottom: 5px;
+}
+.l10n-info > div > span:first-child > a {
+    font-size: 0.75rem;
+}
+.l10n-info > div > span:last-child {
+    font-size: 0.75rem;
+}
+.l10n-info > svg {
+    margin: 0 15px 0 5px;
+    min-width: unset;
+    width: 2rem;
+    height: 2rem;
+}
+.bot-info > div > span > span:first-child {
+    font-size: 0.9rem;
+}
+.bot-info > div > span > span:last-child {
+    font-size: 0.75rem;
+}
+
+.opt-tab {
+    height: calc(100% - 105px);
+}
+.opt-tab .tab-bar > li span {
+    font-size: 0.8rem;
+}
+.opt-item > div > span:first-child {
+    font-size: 0.85rem;
+}
+.opt-item > div > span:last-child {
+    font-size: 0.7rem;
+}
+.opt-item > svg {
+    height: 1rem;
+    width: 1rem;
+}
+.opt-item input[type='password'],
+.opt-item input[type='text'] {
+    border-bottom: 1px solid var(--color-font-2);
+    line-height: 28px;
+    height: 28px;
+    font-size: 0.75rem;
+}
+.opt-body label[class='ss-switch'] {
+    --switch-height: 24px;
+    min-width: 42px;
+}
+.theme-color-col > input#theme_color_custom,
+.theme-color-col > label {
+    --radio-size: 14px;
+}
+.opt-item select {
+    border-bottom: 1px solid var(--color-font-2);
+    line-height: 28px;
+    font-size: 0.75rem;
+}
+.opt-item .ss-button {
+    height: 30px;
+    font-size: 0.75rem !important;
+    width: 90px !important;
+}
+
+.pop-box-body > div.button {
+    margin: 0 -15px -15px -15px;
+}
+.pop-box-body > div.button > button {
+    height: 30px;
+}
+.pop-box-more {
+    margin-top: 15px;
+}
+
+.view-iframe {
+    margin: -35px -35px -25px -35px;
+    width: calc(100% + 70px);
+    border-radius: 7px;
+    border: none;
+}
+
+.img-sender > div.card {
+    margin: 50vh 0 0 50%;
+    max-height: 70%;
+    width: 70%;
+}
+.img-sender > div.card > div.hander > span {
+    font-size: 0.9rem;
+}
+.img-sender > div.card > div.hander > button {
+    height: 30px;
+    font-size: 0.8rem;
+    width: 90px;
+}
+.img-sender > div.card > div.sender > svg {
+    width: 15px;
+    height: 15px;
+    padding: 12.5px;
+    margin-right: 15px;
+}
+.img-sender > div.card > div.sender > input {
+    height: 40px;
+}
+
+.forward-pan > div.card {
+    height: 70%;
+    width: 70%;
+}
+.forward-pan > div.card > header > span {
+    font-size: 0.9rem;
+}
+.forward-pan > div.card > header > svg {
+    height: 1.1rem;
+}
+.forward-pan > div.card > input {
+    height: 30px;
+    font-size: 0.8rem;
+    border-bottom: 1px solid var(--color-font-2);
+}
+.forward-pan > div.card > div > div > img {
+    width: 35px;
+    height: 35px;
+}
+.forward-pan > div.card > div > div p {
+    font-size: 0.85rem;
+}
+.forward-pan > div.card > div > div span {
+    font-size: 0.7rem;
+}
+
+.app-msg {
+    height: calc(100% - 50px - var(--safe-area-bottom));
+    padding-left: 50px;
+}
+
+.app-msg > div {
+    border-radius: 7px;
+    padding: 9px 15px;
+    max-width: 30%;
+}
+.app-msg > div > a {
+    font-size: 0.75rem;
+}
+.app-msg > div > div:first-child > svg {
+    margin-top: 3px;
+    height: 0.8rem;
+}
+.app-msg > div > div:last-child {
+    margin-right: -5px;
+}
+
+.fase-pan-tab > li > svg {
+    margin-top: 0;
+    margin-left: 0;
+    height: 17px;
+    width: 17px;
+}
+.base-face {
+    padding: 0;
+}
+.base-face > div {
+    width: 35px;
+    height: 35px;
+}
+.base-face > div > img {
+    margin: 8px;
+    height: 19px;
+    width: 19px;
+}
+
+.face-stickers {
+    height: calc(300px - 110px);
+}
+.face-stickers > img {
+    height: 44px;
+    width: 44px;
+}
+
+.respond {
+    width: calc(100% + 40px);
+    margin-top: -50px !important;
+    margin-bottom: 10px !important;
+    margin-left: -5px;
+    min-height: 30px !important;
+    height: 30px !important;
+}
+.respond.open {
+    margin-bottom: 10px !important;
+    margin-top: -125px !important;
+    padding: 5px !important;
+}
+.respond > svg {
+    min-width: 15px;
+    height: 15px;
+}
+.respond > img {
+    margin-right: 3px;
+    padding: 3px;
+    height: 20px;
+    width: 20px;
+}
+
+.emoji-like-body {
+    margin-left: 47px;
+    margin-top: 5px;
+}
+.emoji-like-body div {
+    padding: 3px 10px;
+}
+.emoji-like-body img {
+    width: 13px;
+    height: 13px;
+}
+
+.emoji-like-body span {
+    margin-left: 5px;
+    font-size: 0.65rem;
+}
+
+.account-not-login {
+    margin: 20px auto 0 auto;
+}
+.account-not-login > svg {
+    font-size: 1.5rem;
+    margin-top: 20px;
+}
+.account-not-login > span {
+    font-size: 0.8rem;
+    margin-top: 5px;
+}
+.account-not-login > button {
+    margin-top: 15px;
+    margin-bottom: 10px;
+    font-size: 0.7rem;
+}
+
+.script-view .list {
+    margin-left: -20px;
+}
+.script-view .list > header {
+    margin-top: 35px;
+}
+.script-view .list > header > span {
+    margin: 10px -5px 0 -5px;
+    font-size: 0.75rem;
+}
+.script-view .list-body {
+    margin: 0 -5px;
+}
+.script-view .list-body h2 {
+    font-size: 0.8rem;
+}
+.script-view .list-body span {
+    font-size: 0.75rem;
+}
+.script-view .list-body span svg {
+    margin: 0;
+    font-size: 0.7rem;
+}
+.script-view .editor-main {
+    box-shadow: -5px 0px 4px -5px var(--color-shader);
+}
+.script-view .save-controller > span,
+.script-view .save-controller > svg {
+    font-size: 0.8rem;
+}
+.script-view .opt-item > select,
+.script-view .ss-button {
+    height: 30px !important;
+}
+.script-view .ss-button,
+.script-view .opt-item > select,
+.script-view .ss-button > svg {
+    font-size: 0.75rem;
+}
+.script-view .editor {
+    font-size: 0.8rem;
+}
+
+.sys-not-list > div > div:first-child img {
+    width: 40px;
+    height: 40px;
+}
+.sys-not-list > div > div:first-child a {
+    font-size: 0.75rem;
+}
+.sys-not-list > div > div:last-child button {
+    width: 70px;
+    height: 30px;
+    font-size: 0.75rem;
+}
+
+.update-info > div.info {
+    font-size: 0.8rem;
+}
+
+@media (max-width: 700px) {
+    .main-body > ul {
+        background: var(--color-card-2) !important;
+        height: 60px !important;
+    }
+    .friend-list {
+        width: 75px;
+    }
+    .chat-pan {
+        height: calc(100% - 60px);
+        left: 75px !important;
+    }
+    .chat-info {
+        width: calc(100% - 70px);
+    }
+    .friend-list {
+        background: var(--color-card-1) !important;
+    }
+    .friend-list > div:first-child {
+        margin: 5px 15px 5px 0;
+    }
+    .friend-list > div:last-child {
+        padding: 0 7px 0 5px !important;
+    }
+    .friend-list > div:first-child > div.small {
+        margin-left: 15px;
+        margin-top: 10px;
+        height: 44px;
+    }
+    .friend-list > div:first-child > div.small > div {
+        margin-right: 10px;
+        width: 44px;
+    }
+    .friend-list > div:first-child > div.small > div > svg {
+        height: 14px;
+    }
+    .friend-list > div:first-child > div.small > label {
+        margin-top: 1px;
+        height: 44px;
+    }
+}
+@media (max-width: 500px) {
+    .pop-box-body {
+        width: fit-content !important;
+    }
+    .chat-pan {
+        left: 0 !important;
+    }
+    .chat-info {
+        width: calc(100% - 30px);
+        height: calc(100% - 125px);
+        padding-top: 40px;
+    }
+    .account-not-login {
+        margin: 0 auto;
+        width: calc(100% - 20px);
+    }
+}