koishi-plugin-chat-patch 3.0.2 → 5.0.1

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

@@ -0,0 +1,2105 @@
+html,
+body {
+    font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
+    background: var(--color-main);
+    position: relative;
+    text-autospace: normal;
+    user-select: none;
+    overflow: hidden;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+*, *::before, *::after {
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    user-select: none !important;
+}
+input, textarea, [contenteditable="true"] {
+    -webkit-user-select: text !important;
+    -moz-user-select: text !important;
+    user-select: text !important;
+}
+input::placeholder {
+    color: var(--color-font-2);
+}
+select:focus,
+textarea:focus {
+    outline: none;
+}
+::-webkit-scrollbar {
+    height: 7px;
+}
+
+.custom-focus {
+    outline: none;
+}
+.custom-focus:focus-visible {
+    animation: custom-focus .1s ease-out forwards;
+}
+
+@keyframes custom-focus {
+  0% {
+    outline: 15px solid rgba(127, 145, 222, 0);
+  }
+  100% {
+    outline: 3px solid rgba(127, 145, 222, 1);
+  }
+}
+
+.vc-switch {
+    background: var(--color-main) !important;
+    display: none !important;
+}
+
+.mac-controller {
+    -webkit-app-region: drag;
+    z-index: 100;
+    position: absolute;
+    width: 100%;
+    height: 30px;
+}
+
+.dev-bar {
+    transition: opacity 0.3s, transform 0.4s;
+    background: var(--color-bg-yellow);
+    display: flex;
+    align-items: end;
+    justify-content: center;
+    color: var(--color-font-2);
+    font-size: 0.7rem;
+    box-shadow: 0 0 10px var(--color-shader);
+    position: absolute;
+    width: 100%;
+    padding: 10px 0;
+    z-index: 100;
+    height: calc(var(--safe-area-top) + 10px);
+}
+.dev-bar.onloading {
+    transform: translateY(-100%);
+}
+.dev-bar.win {
+    background: transparent !important;
+    width: calc(100% - 180px);
+    box-shadow: unset;
+    left: 90px;
+}
+.lyric-bar {
+    transition: opacity 0.3s;
+    background: var(--color-card-2);
+    display: flex;
+    align-items: end;
+    justify-content: center;
+    color: var(--color-font-2);
+    font-size: 0.7rem;
+    box-shadow: 0 0 10px var(--color-shader);
+    position: absolute;
+    width: 100%;
+    padding: 10px 0;
+    z-index: 99;
+    height: calc(var(--safe-area-top) + 10px);
+}
+
+.top-bar {
+    -webkit-app-region: drag;
+    box-shadow: 0 0 10px 0 rgb(0 0 0 / 28%);
+    background: var(--color-card-2);
+    margin-bottom: 10px;
+    flex-direction: row;
+    position: absolute;
+    display: flex;
+    height: 40px;
+    width: 100%;
+    z-index: 999;
+}
+.top-bar.win {
+    background: var(--color-bg-yellow);
+}
+.top-bar > div.bar-button {
+    -webkit-app-region: no-drag;
+    cursor: pointer;
+    height: 40px;
+    width: 55px;
+}
+.top-bar > div.space {
+    flex: 1;
+}
+.top-bar > div.controller {
+    -webkit-app-region: no-drag;
+    display: flex;
+}
+.top-bar > div.controller > div {
+    cursor: pointer;
+    transition: background 0.2s;
+    justify-content: center;
+    border-radius: 7px;
+    display: flex;
+    margin: 4px 1px;
+    padding: 9px;
+    width: 26px;
+}
+.top-bar > div.controller > div.min > svg {
+    transform: scale(0.9);
+}
+.top-bar > div.controller > div.reflush > svg {
+    transform: scale(0.9);
+}
+.top-bar > div.controller > div.close {
+    margin-right: 4px;
+}
+.top-bar > div.controller > div:hover {
+    background: var(--color-card-1);
+}
+.top-bar > div.controller > div.close:hover {
+    background: #f20000dd;
+}
+.top-bar > div.controller > div > svg {
+    color: var(--color-font);
+    height: 16px;
+}
+.top-bar > div.controller > div.close:hover > svg {
+    color: #fff;
+}
+
+.load-view {
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    height: 100vh;
+    z-index: 99;
+    width: 100vw;
+    left: 0;
+    top: 0;
+}
+.load-view svg {
+    animation: rotate 1.5s linear infinite;
+    color: var(--color-font-r);
+    opacity: 0.5;
+    width: 5vw;
+    height: 100vh;
+}
+#app,
+#base-app {
+    overflow: hidden;
+    height: 100%;
+}
+#base-app {
+    transition: transform 0.2s;
+}
+#base-app.no-touch {
+    transform: rotate(180deg);
+    padding-bottom: 30px;
+}
+#base-app.withBar {
+    height: calc(100% - 40px);
+    padding-top: 40px;
+}
+
+.main-bg {
+    transition: transform 0.4s, opacity 0.8s;
+    opacity: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: -999;
+}
+.main-bg.onloading {
+    transform: scale(0.9);
+    opacity: 0;
+}
+
+.main-body {
+    transition: transform 0.4s, opacity 0.5s;
+    flex-direction: row;
+    margin-top: 0;
+    display: flex;
+    height: 100%;
+    opacity: 1;
+}
+.main-body.onloading {
+    transform: scale(0.9);
+    opacity: 0;
+}
+.main-body > ul {
+    transition: transform 0.4s;
+    cursor: pointer;
+    list-style-type: none;
+    background: var(--color-card-2);
+    flex-direction: column;
+    display: flex;
+    height: 100%;
+    border: none;
+    min-width: 75px;
+    padding: 0 0 calc(var(--safe-area-bottom) + 10px) 0;
+    margin: 0;
+}
+.main-body > ul.onloading {
+    transform: translateX(-100%);
+}
+.side-bar-space {
+    flex: 1;
+}
+.main-body > ul > li {
+    padding: 0 3px;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    flex-direction: column;
+    align-items: center;
+}
+.main-body > ul > li > svg {
+    padding-bottom: 10px !important;
+}
+.main-body > ul > li > span {
+    font-size: 0.85rem;
+    text-align: center;
+    color: var(--color-font);
+    display: none;
+}
+.main-body > ul > li:first-child {
+    margin-top: 10px;
+}
+.main-body > ul > li:last-child {
+    margin-bottom: 10px;
+}
+.main-body > ul > li::after {
+    display: none;
+}
+.main-body > ul > li.active > svg {
+    background-color: var(--color-main);
+    color: var(--color-font-r);
+}
+.main-body > ul > li > svg {
+    transition:
+        background 0.3s,
+        fill 0.3s;
+    color: var(--color-font-1);
+    border-radius: 7px;
+    padding: 15px;
+    height: 20px;
+    width: 20px;
+}
+.main-body > div {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    flex: 1;
+}
+.main-body > div > div {
+    height: 100%;
+}
+
+.home-body {
+    background: var(--color-bg);
+    justify-content: center;
+    flex-direction: row;
+    align-items: center;
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+
+.quick-login {
+    background: var(--color-card-1);
+    box-shadow: unset !important;
+    padding: 15px;
+}
+.quick-login > div.title {
+    align-items: center;
+    margin-bottom: 15px;
+    display: flex;
+}
+.quick-login > div.title > span {
+    flex: 1;
+    text-align: left;
+    color: var(--color-font-1);
+    margin-left: 10px;
+    font-size: 0.9rem;
+    display: block;
+}
+.quick-login > div.title > a {
+    background: var(--color-main);
+    margin: 0;
+    color: var(--color-font-r);
+    border-radius: 7px;
+    padding: 3px 10px;
+    cursor: pointer;
+}
+.quick-login > div.list {
+    max-height: calc(calc(1rem + 30px) * 2);
+    overflow-y: scroll;
+}
+.quick-login > div.list > div {
+    background: var(--color-card-2);
+    margin-top: 5px;
+    padding: 10px 15px;
+    border-radius: 7px;
+    cursor: pointer;
+    display: flex;
+}
+.quick-login > div.list > div > span {
+    flex: 1;
+    text-align: left;
+    color: var(--color-font-1);
+}
+.quick-login > div.list > div > div {
+    width: 1rem;
+    height: 1rem;
+    background: var(--color-card-1);
+    border-radius: 100%;
+    margin-top: 0.2rem;
+}
+.quick-login > div.list > div > div > div {
+    background: var(--color-card-1);
+    width: calc(100% - 0.4rem);
+    height: calc(100% - 0.4rem);
+    border: 0.2rem solid var(--color-card-1);
+    border-radius: 100%;
+}
+.quick-login > div.list > div.select > div > div {
+    background: var(--color-main);
+}
+
+.login-pan-card {
+    background: var(--color-card);
+    padding: 40px 30px;
+    text-align: center;
+    max-width: 310px;
+    overflow: visible;
+}
+.login-pan-card > svg {
+    color: var(--color-main);
+    height: 25%;
+    width: 25%;
+}
+.login-pan-card p {
+    color: var(--color-main);
+    font-size: 1rem;
+    margin: 20px;
+}
+.login-pan-card label {
+    background: var(--color-card-1);
+    width: calc(100% - 42px);
+    align-items: center;
+    transition: all 0.3s;
+    border-radius: 50px;
+    margin-top: 10px;
+    padding: 0 20px;
+    display: flex;
+}
+.login-pan-card label:focus-within {
+    background: var(--color-card-2);
+}
+.login-pan-card label:focus-within > svg {
+    color: var(--color-main);
+}
+.login-pan-card label:focus-within > input {
+    outline: none;
+}
+.login-pan-card label > input {
+    background: transparent;
+    width: 100%;
+    height: 40px;
+    flex: 1;
+}
+.login-pan-card label > svg {
+    color: var(--color-font);
+    transition: fill 0.3s;
+    height: 15px;
+    width: 15px;
+}
+.login-pan-card label.default {
+    background: unset;
+    border: none;
+}
+.login-pan-card label.default > input {
+    background: unset;
+    height: auto;
+    flex: unset;
+    width: auto;
+}
+.login-pan-card label.default > a {
+    margin-left: 10px;
+    margin-top: 0;
+}
+.login-pan-card button {
+    margin-top: 30px;
+    height: 40px;
+    width: 100%;
+}
+.login-pan-card a {
+    color: var(--color-font);
+    font-size: 0.9rem;
+    margin-top: 10px;
+    cursor: pointer;
+    display: block;
+    opacity: 0.7;
+}
+
+/* 地址输入区域容器 */
+.address-input-container {
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* 地址输入框容器 */
+.address-input-wrapper {
+    position: relative !important;
+    overflow: visible !important;
+    width: 100%;
+    margin: 0 !important;
+}
+
+/* 历史选择下拉触发按钮 */
+.history-dropdown-trigger {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: all 0.2s;
+    color: var(--color-font-2);
+    z-index: 2;
+}
+.history-dropdown-trigger:hover {
+    color: var(--color-main);
+}
+.history-dropdown-trigger > svg {
+    width: 14px;
+    height: 14px;
+    transition: transform 0.2s;
+}
+.history-dropdown-trigger:hover > svg {
+    transform: translateY(2px);
+}
+
+/* 历史下拉菜单 */
+.history-dropdown-menu {
+    background: rgba(var(--color-card-rgb), 0.4) !important;
+    backdrop-filter: blur(10px);
+    position: absolute;
+    top: calc(100% + 5px);
+    left: 0;
+    right: 0;
+    max-height: 320px;
+    overflow-y: auto;
+    padding: 6px !important;
+    z-index: 1000;
+    box-shadow: 0 0 5px var(--color-shader);
+    animation: dropdown-appear 0.2s ease;
+    border-radius: 15px;
+}
+
+@keyframes dropdown-appear {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.history-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 7px 9px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin-bottom: 4px;
+}
+.history-dropdown-item:last-child {
+    margin-bottom: 0;
+}
+.history-dropdown-item:hover {
+    background: var(--color-card-2);
+}
+.history-dropdown-item.selected {
+    background: var(--color-card-2);
+}
+
+.history-item-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    background: var(--color-card-1);
+}
+.history-item-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.history-item-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.history-item-name {
+    color: var(--color-font-1);
+    font-size: 0.9rem;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.history-item-detail {
+    color: var(--color-font-2);
+    font-size: 0.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.history-item-delete {
+    padding: 6px;
+    border-radius: 6px;
+    color: var(--color-font-2);
+    transition: all 0.2s;
+    flex-shrink: 0;
+    opacity: 0.6;
+}
+.history-item-delete:hover {
+    background: var(--color-card-2);
+    color: var(--color-error);
+    opacity: 1;
+}
+.history-item-delete > svg {
+    width: 13px;
+    height: 13px;
+}
+
+.wave-pan {
+    width: calc(100% + 60px);
+    margin-bottom: -50px;
+    margin-top: -90px;
+    overflow: hidden;
+    z-index: -1;
+    float: left;
+}
+.wave-pan > svg {
+    fill: var(--color-card-2);
+}
+.wave-pan > svg > g > use {
+    opacity: 0.5;
+}
+.wave-pan > svg > g > use:last-child {
+    opacity: 1;
+}
+
+.friend-view {
+    overflow: hidden;
+    flex-direction: row;
+    user-select: none;
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+.friend-view > div:last-child {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex: 1;
+}
+.friend-view > div:last-child > div {
+    background: var(--color-card-1);
+    text-align: center;
+    padding: 40px;
+}
+.friend-view > div:last-child > div > svg {
+    color: var(--color-main);
+    width: 50px;
+    height: 50px;
+}
+.friend-view > div:last-child > div > span {
+    font-size: 0.9rem;
+    margin-top: 10px;
+    display: block;
+}
+
+.friend-list {
+    background: var(--color-card-1);
+    transition: transform 0.3s;
+    flex-direction: column;
+    overflow: hidden;
+    display: flex;
+    width: 300px;
+}
+.friend-list > div {
+    transition: opacity 0.3s;
+}
+.friend-list .small {
+    display: none;
+}
+.friend-list > div:first-child {
+    margin: 15px;
+}
+.friend-list > div:first-child > div.base {
+    border-radius: 7px 7px 0 0;
+    align-items: center;
+    font-size: 1rem;
+    padding: 10px;
+    display: flex;
+    color: var(--color-font);
+}
+.friend-list > div:first-child > div.base > svg {
+    margin: 5px;
+}
+.friend-list > div:first-child > div.base > span {
+    font-weight: bold;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: clip;
+    -webkit-mask-image: linear-gradient(to right, black 0%, black 65%, transparent 100%);
+    mask-image: linear-gradient(to right, black 0%, black 65%, transparent 100%);
+}
+.friend-list > div:first-child > div.base > a,
+.friend-list > div:first-child > div.small > span > a {
+    background: var(--color-main);
+    color: var(--color-font-r);
+    font-weight: normal;
+    border-radius: 1rem;
+    padding: 3px 10px;
+    font-size: 0.7rem;
+}
+.friend-list > div:first-child > div.small > span > a {
+    margin-left: 10px;
+}
+.friend-list > div:first-child > div.base.only {
+    border-radius: 7px;
+}
+.friend-list > div:first-child > div.small {
+    display: none;
+}
+.friend-list > div:first-child > div.small > span {
+    background: var(--color-main);
+    color: var(--color-font-r);
+    align-items: center;
+    border-radius: 7px;
+    text-wrap: nowrap;
+    padding: 0 20px;
+    font-size: 1rem;
+    display: flex;
+    height: 50px;
+    flex: 1;
+}
+.friend-list > div:first-child > div > svg {
+    color: var(--color-font);
+    cursor: pointer;
+    opacity: 0.7;
+    height: 1rem;
+}
+.friend-list > div:first-child label {
+    height: calc(1rem + 20px);
+    align-items: center;
+    display: flex;
+    width: 100%;
+    background: var(--color-card-2);
+    border-bottom: 1px solid var(--color-font-2);
+    border-radius: 7px;
+    opacity: 0.7;
+}
+.friend-list > div:first-child label > svg {
+    color: var(--color-font-1);
+    margin: 0 10px;
+    height: 0.9rem;
+}
+.friend-list > div:first-child label > input {
+    background: transparent;
+    font-size: 0.8rem;
+    padding: 0 15px;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    border: 0;
+    flex: 1;
+}
+.friend-list > div:last-child {
+    width: calc(100% - 5px);
+    padding: 0 1px 0 5px;
+    -webkit-box-flex: 1;
+    overflow-y: scroll;
+    font-size: 1rem;
+    height: 100%;
+    flex: 1;
+}
+.friend-list > div:last-child::-webkit-scrollbar {
+    display: none;
+}
+.friend-list > div:last-child.open > div.active {
+    background: var(--color-main) !important;
+    color: var(--color-font-r) !important;
+}
+.friend-list-space {
+    background: var(--color-bg);
+}
+
+.friend-list.show {
+    transform: translateX(-100%);
+}
+.friend-list.show > div {
+    opacity: 0;
+}
+.group-assist-message-list {
+    transition: margin 0.3s, opacity 0.4s;
+    margin-right: -300px;
+    opacity: 0;
+    z-index: 1;
+}
+.group-assist-message-list.show {
+    margin-left: -300px;
+    margin-right: 0;
+    transform: unset;
+    opacity: 1;
+}
+.group-assist-message-list.show > div {
+    opacity: 1;
+}
+
+.friend-body {
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    color: var(--color-font);
+    margin: 10px;
+    padding: 10px;
+    border-radius: 7px;
+    transform: translate(0, 0);
+    transition:
+        background 0.2s,
+        color 0.2s,
+        backdrop-filter 0.2s,
+        transform 0.2s;
+}
+.friend-body.active {
+    background: var(--color-main);
+    color: var(--color-font-r);
+}
+.friend-body.active > svg {
+    background: var(--color-card-2);
+    color: var(--color-main);
+}
+.friend-body.onmenu,
+.friend-body:hover {
+    background: var(--color-card-2) !important;
+}
+.friend-body.active:hover {
+    background: var(--color-main) !important;
+}
+.friend-body img {
+    border: 2px solid var(--color-card-2);
+    pointer-events: none;
+    border-radius: 7px;
+    height: 50px;
+    width: 50px;
+    object-fit: cover;
+}
+.friend-body > svg {
+    transition:
+        background 0.3s,
+        color 0.3s;
+    background: var(--color-card-2);
+    color: var(--color-font);
+    pointer-events: none;
+    border-radius: 7px;
+    padding: 15px;
+    height: 25px;
+    width: 25px;
+}
+.friend-body > div {
+    flex: 1;
+    margin-left: 10px;
+    overflow: hidden;
+}
+.friend-body > div:nth-child(1) {
+    flex: unset;
+    width: 4px;
+    background: var(--color-main);
+    border-radius: 4px;
+    margin-right: 10px;
+    transform: scaleY(0);
+    display: unset !important;
+    transition:
+        transform 0.3s,
+        margin 0.3s;
+    margin-left: -13px;
+}
+.friend-body.active > div:nth-child(1) {
+    background: var(--color-font);
+}
+.friend-body > div:nth-child(1).new {
+    transform: scaleY(0.5);
+    margin-left: 3px;
+}
+.friend-body > div p {
+    font-weight: bold;
+    margin: 0;
+    margin-top: 3px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.friend-body > div > div {
+    align-items: center;
+    display: flex;
+}
+.friend-body > div > div a {
+    color: var(--color-font-1);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 0.9rem;
+    flex: 1;
+}
+.friend-body > div > div a.highlight {
+    color: #f20000dd;
+}
+/* .friend-body > div > div a.nick {
+} */
+.friend-body.active > div > div a {
+    color: var(--color-font-1-r);
+}
+.friend-body > div > div a.time {
+    flex: unset;
+    margin-left: 15px;
+    font-size: 0.8rem;
+    opacity: 0.7;
+    overflow: unset;
+}
+.friend-body > div > div svg {
+    width: 0.6rem;
+    color: var(--color-font);
+    opacity: 0.7;
+    transform: rotate(45deg);
+    margin-right: 5px;
+}
+.friend-body.active > div > div svg {
+    color: var(--color-font-r);
+}
+.friend-body > a {
+    font-size: 0.9rem;
+    color: var(--color-font-2);
+}
+.friend-body.active > a {
+    color: var(--color-font-1-r);
+}
+
+.msg-menu-body {
+    border: 1px solid var(--color-shader);
+    background: rgba(var(--color-bg-rgb), 0.7);
+    box-shadow: 0 0 5px var(--color-shader);
+    backdrop-filter: blur(50px);
+    transition: transform 0.1s;
+    transform-origin: top;
+    transform: scaleY(0);
+    pointer-events: all;
+    min-height: unset;
+    min-width: 100px;
+    max-width: 130px;
+    padding: 10px;
+}
+.msg-menu-body.topOut {
+    transition:
+        transform 0.1s,
+        margin-top 0.2s;
+}
+.msg-menu-body.show {
+    transform: scaleY(1);
+}
+.menu div.item,
+.msg-menu-body > div {
+    transition: background 0.3s;
+    background: transparent;
+    align-items: center;
+    border-radius: 7px;
+    padding: 3px 15px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+}
+.msg-menu-body > div:hover {
+    background: var(--color-main);
+}
+.menu div.item > svg {
+    margin-right: 0 !important;
+    height: 1rem;
+    width: 1rem !important;
+}
+.msg-menu-body > div > div > svg {
+    transition:
+        color 0.3s,
+        opacity 0.3s;
+    color: var(--color-font-1);
+    margin-top: 7px;
+    height: 1rem;
+    width: 1rem;
+}
+.msg-menu-body > div:hover > div > svg {
+    color: var(--color-font-r);
+    opacity: 1;
+}
+.msg-menu-body > div > a {
+    color: var(--color-font);
+    text-overflow: ellipsis;
+    transition: color 0.3s;
+    white-space: nowrap;
+    overflow: hidden;
+    margin-right: 10px;
+}
+.msg-menu-body > div:hover > a {
+    color: var(--color-font-r);
+}
+
+.ss-range {
+    --range-dot-height: 26px;
+    --range-dot-border: 3px;
+    --range-dot-width: 3px;
+    --range-height: 26px;
+
+    --range-width: calc(var(--range-dot-width) + calc(var(--range-dot-border) * 2));
+    --range-width-half: calc(var(--range-width) / 2);
+
+    position: relative;
+    flex-direction: row !important;
+    display: flex !important;
+}
+.ss-range input {
+    background-image: linear-gradient(var(--color-main), var(--color-main));
+    background-size: calc(var(--range-precent) - var(--range-width)) 100%;
+    background-color: var(--color-card-1);
+    background-repeat: no-repeat;
+    height: var(--range-height);
+    border-radius: 7px;
+    cursor: pointer;
+    min-width: 100%;
+
+    -webkit-appearance: none;
+    appearance: none;
+}
+.ss-range div {
+    margin-left: max(calc(var(--range-width-half) + 1px),
+        calc(var(--range-precent) - var(--range-width-half) - 1px));
+
+    border: var(--range-dot-border) solid var(--color-card);
+    box-shadow: 0 0 5px var(--color-shader);
+    border-radius: var(--range-width-half);
+    height: var(--range-dot-height);
+    width: var(--range-dot-width);
+    background: var(--color-main);
+    transform: translateX(-50%);
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+    top: 1px;
+}
+.ss-range span {
+    line-height: var(--range-height);
+    transform: translateX(-50%);
+    color: var(--color-font);
+    pointer-events: none;
+    margin-left: -50%;
+}
+.ss-range input::-webkit-slider-thumb,
+.ss-range input::-moz-range-thumb {
+    opacity: 0;
+}
+.ss-range input::-webkit-slider-runnable-track {
+    opacity: 0;
+}
+
+.app-msg {
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+    height: calc(100% - 20px - var(--safe-area-bottom));
+    width: calc(100% - 20px);
+    pointer-events: none;
+    position: absolute;
+    padding-left: 90px;
+    display: flex;
+    z-index: 10;
+    left: 0;
+    top: 0;
+}
+.app-msg > div {
+    box-shadow: 0 0 5px var(--color-shader);
+    background: var(--color-main);
+    overflow-wrap: anywhere;
+    align-items: center;
+    pointer-events: all;
+    width: fit-content;
+    border-radius: 7px;
+    padding: 10px 20px;
+    margin-top: 5px;
+    max-width: 20%;
+    display: flex;
+}
+.app-msg > div svg {
+    color: var(--color-font-r);
+}
+.app-msg > div > div:first-child > svg {
+    color: var(--color-font-r);
+    margin-top: 5px;
+    height: 1rem;
+}
+.app-msg > div > a {
+    color: var(--color-font-r);
+    margin: 0 10px;
+}
+.app-msg > div > div:last-child {
+    border-radius: 7px;
+    cursor: pointer;
+    height: 20px;
+    width: 20px;
+}
+.app-msg > div > div:last-child:hover {
+    background: rgba(0, 0, 0, 0.03);
+}
+.app-msg > div > div:last-child > svg {
+    color: var(--color-font-1-r);
+    margin-left: 5px;
+    margin-top: 3px;
+    height: 1rem;
+}
+
+.pop-box {
+    position: absolute;
+    user-select: none;
+    height: 100%;
+    z-index: 50;
+    width: 100%;
+    left: 0;
+    top: 0;
+}
+.pop-box > div:last-child {
+    background: var(--color-card-2);
+    height: calc(100% + 40px);
+    width: calc(100% + 40px);
+    opacity: 0.7;
+    margin: -20px;
+}
+.pop-box-body {
+    transform: translate(-50%, -50%);
+    flex-direction: column;
+    transition: all 0.3s;
+    margin-top: 50vh;
+    position: absolute;
+    width: fit-content;
+    margin-left: 50%;
+    min-width: 360px;
+    display: flex;
+    z-index: 20;
+    overflow: visible;
+}
+.pop-box-body.full {
+    height: calc(100vh - 120px);
+    transform: unset !important;
+    margin: 60px 20px 0 20px;
+    width: calc(100% - 80px);
+}
+.pop-box-body.full iframe {
+    height: calc(100vh - 145px);
+}
+.pop-box-body.full.window {
+    height: calc(100vh - 80px);
+    margin: 30px 20px 0 20px;
+}
+.pop-box-body.full.window iframe {
+    height: calc(100vh - 105px);
+}
+.pop-box-body > header {
+    align-items: center;
+    display: flex;
+}
+.pop-box-body > header > div:first-child {
+    background: transparent;
+    margin-right: 10px;
+    height: 1rem;
+    width: unset;
+}
+.pop-box-body > header svg {
+    color: var(--color-font);
+    height: 1rem;
+}
+.pop-box-body > header svg:last-child {
+    cursor: pointer;
+}
+.pop-box-body > header a {
+    color: var(--color-font);
+    font-weight: bold;
+    font-size: 1rem;
+    flex: 1;
+}
+.pop-box-body > div:not(:last-child) {
+    padding: 20px;
+}
+.pop-box-body > div.button {
+    background: var(--color-card-1);
+    margin: 0 -20px -20px -20px;
+    border-radius: 0 0 7px 7px;
+    justify-content: flex-end;
+    flex-direction: row;
+    align-items: center;
+    padding: 15px;
+    display: flex;
+}
+.pop-box-body > div.button > button {
+    background: var(--color-card-2);
+    color: var(--color-font);
+    margin-left: 10px;
+    padding: 0 15px;
+    cursor: pointer;
+}
+.pop-box-body > div.button > button.master {
+    background: var(--color-main);
+    color: var(--color-font-r);
+}
+
+.pop-box-more {
+    position: absolute;
+    margin-left: -20px;
+    margin-top: 20px;
+    z-index: -1;
+    width: 100%;
+}
+.pop-box-more > div {
+    box-shadow: 0 0 3px var(--color-bg);
+    background: var(--color-card);
+    border-radius: 0 0 7px 7px;
+    margin: 0 10px;
+    height: 10px;
+}
+.pop-box-more > div.hid {
+    height: 0;
+}
+
+.update-info {
+    margin: -20px -20px 0px;
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+}
+.update-info > span {
+    color: var(--color-main);
+    font-weight: bold;
+    font-size: 1rem;
+}
+.update-info > a {
+    color: var(--color-font-2);
+    font-size: 0.8rem;
+}
+.update-info > div {
+    width: calc(100% - 30px);
+}
+
+.update-info > div.title {
+    align-items: center;
+    margin-top: 10px;
+    display: flex;
+}
+.update-info > div.title > img {
+    outline: 2px solid var(--color-main);
+    border: 1px solid var(--color-bg);
+    height: calc(1.5rem - 3px);
+    border-radius: 100%;
+}
+.update-info > div.title > a {
+    color: var(--color-main);
+    margin-left: 10px;
+    flex: 1;
+}
+.update-info > div.title > span {
+    color: var(--color-font-2);
+    font-size: 0.8rem;
+}
+.update-info > div.info {
+    background: var(--color-bg);
+    flex-direction: column;
+    align-items: flex-start;
+    border-radius: 7px;
+    margin-top: 15px;
+    padding: 15px;
+    display: flex;
+}
+.update-info > div.info > span {
+    color: var(--color-main);
+}
+.update-info > div.info > span::before {
+    content: '\2022';
+}
+.update-info > div.info > div {
+    overflow-y: scroll;
+    max-height: 20vh;
+    margin-top: 10px;
+    width: 100%;
+}
+.update-info > div.info > div > div > span {
+    color: var(--color-font);
+}
+
+.hiden-home {
+    display: none !important;
+}
+
+.qq-err-card {
+    margin: -40px -30px -20px -30px;
+}
+.qq-err-card > div:first-child {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: -5px;
+    height: 2rem;
+}
+.qq-err-card > div:first-child img {
+    margin-right: 10px;
+}
+.qq-err-card > div:first-child span {
+    font-size: 0.9rem;
+    color: var(--color-font);
+    flex: 1;
+}
+.qq-err-card > div:first-child span span {
+    opacity: 0.1;
+    margin-left: 5px;
+    color: var(--color-font-2);
+}
+.qq-err-card > div:first-child svg {
+    cursor: pointer;
+    height: 1.5rem;
+    width: 1.5rem;
+    color: var(--color-font-2);
+}
+.qq-err-card > div:last-child {
+    padding: 10px;
+    color: var(--color-font);
+    margin: 0 -8px -3px -8px;
+}
+
+.qq-err-card > div:last-child hr {
+    margin: 5px 0;
+    background: var(--color-font-2);
+    opacity: 0.7;
+    border-bottom: 1px solid #fff;
+}
+.qq-err-card > div:last-child > div:first-child {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px;
+}
+.qq-err-card > div:last-child > div:first-child img {
+    margin-right: 15px;
+}
+.qq-err-card > div:last-child > div:first-child span {
+    font-size: 0.7rem;
+}
+.qq-err-card > div:last-child > div:last-child {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.7rem;
+}
+.qq-err-card > div:last-child > div:last-child div {
+    display: flex;
+    align-items: center;
+    margin: 5px 0;
+}
+.qq-err-card > div:last-child > div:last-child textarea {
+    max-height: 100px;
+    height: 100px;
+    border: 0;
+    margin: 10px 0;
+    border-bottom: 1px solid var(--color-font-2);
+    border-radius: 3px;
+    background: var(--color-bg);
+    padding: 10px;
+    color: var(--color-font-2);
+}
+.qq-err-card > div:last-child > div:last-child button {
+    width: 90px;
+    border: 1px solid #007bff;
+    border-radius: 7px;
+    background: var(--color-bg);
+    color: var(--color-font);
+}
+.qq-err-card-err {
+    color: var(--color-font-2);
+    margin-bottom: 10px;
+}
+.qq-err-card-err span:last-child {
+    flex: 1;
+    text-align: center;
+}
+.qq-err-card-err a {
+    color: #007bff;
+    position: absolute;
+    right: 15px;
+    cursor: pointer;
+}
+.qq-err-card-err a span:first-child {
+    transform: rotate(90deg);
+    display: inline-block;
+    margin-right: 5px;
+}
+
+.view-iframe {
+    margin: -40px -40px -20px -40px;
+    width: calc(100% + 80px);
+    border-radius: 7px;
+    border: none;
+}
+
+.mask-background {
+    background-color: rgba(var(--color-card-2-rgb), 0.7);
+    transition: background 0.3s;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 50;
+}
+
+.global-session-search-bar {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    width: 60vw;
+    top: 20vh;
+    left: 50%;
+    transform: translateX(-50%);
+    max-height: 50vh;
+    transition: height 0.2s;
+    z-index: 20;
+    box-shadow: 0 0 5px var(--color-shader);
+}
+
+.global-session-search-bar > hr {
+    color: var(--color-card-2);
+    width: 100%;
+}
+
+.global-session-search-bar > input {
+    max-width: unset;
+    min-height: 35px;
+}
+
+.global-session-search-bar > div {
+    padding-right: 5px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+.global-session-search-bar > div > div {
+    display: flex;
+    align-items: center;
+}
+
+.global-session-search-bar > div > div > :nth-child(1) {
+    flex: 1;
+}
+
+.global-session-search-bar > div > div.session-item {
+    margin-bottom: 5px;
+    border-radius: 7px;
+}
+
+.global-session-search-bar > div > div.session-item:hover {
+    background-color: var(--color-card-2);
+}
+
+.global-session-search-bar > div > div.session-item.selected {
+    background-color: var(--color-card-2);
+}
+
+.global-session-search-bar > div > div.session-item > div {
+    width: -webkit-fill-available;
+    pointer-events: none;
+}
+
+.global-session-search-bar > div > div.session-item > span {
+    color: var(--color-font-1);
+    font-size: 0.8rem;
+    margin-right: 10px;
+}
+
+.global-session-search-bar-enter-active,
+.global-session-search-bar-leave-active {
+    z-index: 20;
+    transition: opacity 0.2s;
+}
+
+.global-session-search-bar-enter-from,
+.global-session-search-bar-leave-to {
+    opacity: 0.0;
+}
+
+.viewer-bar {
+    position: absolute;
+    z-index: 31;
+    width: 80%;
+    margin-left: 10%;
+    margin-right: 10%;
+    display: flex;
+    transition: opacity 0.2s;
+}
+
+.viewer-bar::before,
+.viewer-bar::after {
+    content: '';
+    margin: auto;
+}
+
+.viewer-tool-config-bar {
+    bottom: calc(3% + 80px + var(--safe-area-bottom));
+}
+
+.viewer-tool-config-bar > div.color {
+    width: 24px;
+    height: 24px;
+    border: solid 3px var(--color-card);
+    background-color: var(--color);
+    margin: 5px;
+    border-radius: 7px;
+    transition: 0.2s;
+}
+
+.viewer-tool-config-bar > div.line-width {
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+    margin: 5px;
+    background-color: var(--color-main);
+    border-radius: 7px;
+    transition: 0.2s;
+    display: flex;
+}
+
+.viewer-tool-config-bar > div.line-width > div {
+    width: var(--line-width);
+    height: var(--line-width);
+    background-color: var(--color-card);
+    margin: auto;
+    border-radius: var(--line-width);
+}
+
+.viewer-tool-config-bar > div.color:hover,
+.viewer-tool-config-bar > div.line-width:hover {
+    transform: rotate(45deg);
+}
+
+.viewer-tool-config-bar > svg.rect-is-fill {
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+    margin: 5px;
+    color: var(--color-card);
+    background-color: var(--color-main);
+    border-radius: 7px;
+    transition: 0.2s;
+}
+
+.viewer-tool-config-bar > hr {
+    width: 0px;
+    margin: auto 2px;
+    height: 15px;
+    border: solid 1px var(--color-font);
+}
+
+.viewer-tool-config-bar > svg:hover {
+    background-color: var(--color-font);
+}
+
+.viewer-tool-config-bar > div.active {
+    border-radius: 15px;
+}
+
+.viewer-button-bar {
+    bottom: calc(3% + var(--safe-area-bottom));
+    opacity: 0;
+}
+
+.viewer-button-bar.force-show,
+.viewer-button-bar:hover {
+    opacity: 1;
+}
+
+.viewer-button-bar > svg {
+    cursor: pointer;
+    width: 15px;
+    height: 15px;
+    margin: 0 5px;
+    padding: 15px;
+    background-color: var(--color-main);
+    color: var(--color-card);
+    border-radius: 10px;
+    transition: background 0.2s;
+    flex-shrink: 1;
+}
+
+.viewer-button-bar > svg:hover {
+    background-color: var(--color-font-2);
+    color: var(--color-font-r);
+}
+
+.viewer-button-bar > svg.active {
+    border-radius: 30px;
+}
+
+.viewer-button-bar > hr {
+    display: block;
+    height: 25px;
+    margin: auto 10px;
+    border: solid 1px var(--color-font-2);
+    border-radius: 2px;
+    opacity: 0.7;
+    flex-shrink: 1;
+}
+
+.viewer-button-enter-active,
+.viewer-button-leave-active {
+    transition: all 0.2s;
+}
+
+.viewer-button-enter-from,
+.viewer-button-leave-to {
+    transform: translate(0, 100%);
+    opacity: 1;
+}
+
+.viewer-tool-config-enter-from,
+.viewer-tool-config-leave-to {
+    width: 1px !important;
+    height: 1px !important;
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+    opacity: 0;
+}
+
+.viewer-bar.dragging {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.viewer-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+}
+
+.viewer-img > canvas {
+    display: block;
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+}
+
+.viewer-img > img,
+.viewer-img > canvas {
+    margin-top: calc(50vh - var(--height) * var(--scale) / 2 + var(--y));
+    margin-left: calc(50vw - var(--width) * var(--scale) / 2 + var(--x));
+    transition: all 0.2s;
+    width: calc(var(--width) * var(--scale));
+    height: calc(var(--height) * var(--scale));
+    transform-origin: center;
+    transform: rotate(var(--rotate));
+}
+
+.viewer-img.grab > img,
+.viewer-img.grab > canvas {
+    transition: none;
+}
+
+.viewer.loading {
+    box-shadow: 0 0 5px var(--color-shader);
+    transform: translate(-50%, -50%);
+    background: var(--color-card);
+    flex-direction: column;
+    border-radius: 7px;
+    position: absolute;
+    padding: 10px;
+    display: flex;
+    opacity: 1;
+    left: 50%;
+    top: 50%;
+}
+
+.viewer.loading > svg {
+    color: var(--color-main);
+    font-size: 1.1rem;
+}
+
+.viewer-img > div.scrollbar {
+    user-select: none;
+    cursor: pointer;
+    position: absolute;
+    background: rgba(var(--color-bg-rgb), 0.7);
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.viewer-img > div.x {
+    left: 0;
+    bottom: 8px;
+    width: 100vw;
+    height: 12px;
+}
+
+.viewer-img > div.y {
+    right: 8px;
+    top: 0;
+    width: 12px;
+    height: 100vh;
+}
+
+.viewer-img.grab > div.scrollbar,
+.viewer-img.zooming > div.scrollbar,
+.viewer-img > div.scrollbar.dragging,
+.viewer-img > div.scrollbar:hover {
+    opacity: 1;
+}
+
+.viewer-img > div.scrollbar > div.scrollbar-thumb {
+    position: absolute;
+    background: var(--color-main);
+    opacity: 0.7;
+    border-radius: 4px;
+}
+
+.viewer-img > div.x > div.scrollbar-thumb {
+    left: calc(var(--pos) * 100vw);
+    top: 2px;
+    width: max(calc(var(--thumb) * 100vw), 40px);
+    height: 8px;
+}
+
+.viewer-img > div.y > div.scrollbar-thumb {
+    top: calc(var(--pos) * 100vh);
+    right: 2px;
+    height: max(calc(var(--thumb) * 100vh), 40px);
+    width: 8px;
+}
+
+.viewer-change-img-next-leave-active,
+.viewer-change-img-next-enter-active,
+.viewer-change-img-prev-leave-active,
+.viewer-change-img-prev-enter-active {
+    transition: all 0.15s ease-in-out;
+}
+
+.viewer-change-img-prev-enter-from,
+.viewer-change-img-next-leave-to {
+    transform: translateX(-100%);
+}
+
+.viewer-change-img-prev-leave-to,
+.viewer-change-img-next-enter-from {
+    transform: translateX(100%);
+}
+
+.cursor-grab {
+    cursor: grab;
+}
+
+.cursor-grabbing {
+    cursor: grabbing;
+}
+
+.cursor-exit {
+    cursor: url(../../assets/img/icons/exit.png), auto;
+}
+
+.cursor-not-allowed {
+    cursor: not-allowed
+}
+
+.cursor-pen {
+    cursor: url(../../assets/img/icons/pen.png) 0 24, auto;
+}
+
+.cursor-crosshair {
+    cursor: crosshair;
+}
+
+
+@media (max-width: 700px) {
+    /* 侧栏及主布局自适应 */
+    .main-body {
+        flex-direction: column-reverse;
+    }
+    .main-body > div {
+        height: calc(100% - 75px);
+    }
+    .main-body > ul {
+        padding-top: 0 !important;
+        justify-content: center;
+        height: 75px !important;
+        align-items: center;
+        flex-direction: row;
+        min-width: 100% !important;
+        z-index: 20;
+    }
+    .main-body > ul.onloading {
+        transform: translateY(100%);
+    }
+    .main-body > ul > li {
+        margin-top: 0;
+        margin-bottom: 0 !important;
+    }
+    .side-bar-space {
+        display: none;
+    }
+    /* 二级侧栏 */
+    .friend-list {
+        transition: width 0.3s;
+        width: 80px;
+    }
+    .friend-list.open {
+        width: 300px;
+    }
+    .friend-list.open .small {
+        display: flex;
+    }
+    .friend-list > div:first-child {
+        margin-bottom: 0 !important;
+    }
+    .friend-list > div:first-child > div.base {
+        display: none;
+    }
+    .friend-list > div:first-child > div.small {
+        align-items: center;
+        display: flex;
+        height: 60px;
+        width: 100%;
+    }
+    .group-assist-message-list:not(.open) > div:first-child > div.small {
+        flex-direction: column;
+        height: 120px;
+    }
+    .friend-list > div:first-child > div.small > div.reload {
+        display: none;
+    }
+    .friend-list.open > div:first-child > div.small > div.reload {
+        background: var(--color-card-2);
+        display: flex !important;
+        margin-right: 10px;
+    }
+    .friend-list.open > div:first-child > div.small > div.reload > svg {
+        color: var(--color-font);
+    }
+    .friend-list > div:first-child > div.small > div {
+        background: var(--color-main);
+        justify-content: center;
+        align-items: center;
+        border-radius: 7px;
+        cursor: pointer;
+        display: flex;
+        height: 50px;
+        width: 50px;
+    }
+    .group-assist-message-list:not(.open) > div:first-child > div.small > div {
+        margin: 0 0 10px 0 !important;
+    }
+    .friend-list > div:first-child > div.small > label {
+        margin-right: 10px;
+        height: 50px;
+        flex: 1;
+    }
+    .friend-list.open > div:first-child > div.small > label {
+        display: flex !important;
+    }
+
+    .friend-list.open > div:first-child > div.small > div:last-child {
+        margin-left: 10px;
+    }
+    .friend-list > div:first-child > div.small > div > svg {
+        color: var(--color-font-r);
+        height: 17px;
+        opacity: 1;
+    }
+    .friend-list > div:first-child label {
+        border-radius: 7px;
+        display: none;
+    }
+    .friend-list > div:last-child.open > div:not(.list),
+    .friend-list > div:last-child.open > div.list > div > div {
+        padding: 10px !important;
+        margin: 10px !important;
+    }
+    .friend-list > div:last-child.open > div > div,
+    .friend-list > div:last-child.open > div.list > div > div > div {
+        display: block;
+    }
+    .friend-list > div:first-child > div.small > span {
+        display: none;
+    }
+    .friend-list.open > div:first-child > div.small > span {
+        display: flex;
+    }
+
+    .group-assist-message-list {
+        margin-right: -100%;
+    }
+    .group-assist-message-list.show {
+        margin-left: -50%;
+        margin-right: 0;
+    }
+
+    .friend-body {
+        background: transparent !important;
+        justify-content: center;
+        padding: 10px 0;
+        margin: 0;
+    }
+    .friend-body > div {
+        display: none;
+    }
+    .friend-body img {
+        height: 45px;
+        width: 45px;
+    }
+    .friend-body > svg {
+        height: 20px;
+        width: 20px;
+    }
+    .friend-body.active:hover {
+        background: var(--color-card-2) !important;
+    }
+    .friend-body.active img {
+        border: 2px solid var(--color-main);
+    }
+    .friend-body > div:nth-child(1) {
+        transform: scaleY(1) !important;
+        position: absolute;
+        display: none !important;
+    }
+    .friend-body > div:nth-child(1).new {
+        border-radius: 100%;
+        display: block !important;
+        height: 15px;
+        width: 15px;
+        right: -3px;
+        top: 4px;
+    }
+    /* 应用消息 */
+    .app-msg {
+        height: calc(100% - 90px - var(--safe-area-bottom));
+        padding-left: 20px;
+    }
+    .app-msg > div {
+        max-width: calc(100% - 80px);
+    }
+    /* 右击菜单 */
+    .msg-menu-body {
+        width: 30%;
+    }
+    .msg-menu-body > div {
+        padding: 5px 15px;
+    }
+}
+
+@media (max-width: 500px) {
+    /* 全局通用弹窗 */
+    .pop-box-body {
+        max-height: calc(100vh - 80px);
+        transform: unset !important;
+        width: calc(100% - 80px);
+        min-width: unset;
+        margin: 20px;
+        bottom: 0;
+    }
+    .pop-box-body.full {
+        width: calc(100% - 70px) !important;
+        margin-bottom: 20px !important;
+    }
+    .pop-box-more {
+        display: none;
+    }
+    /* 二级侧栏 */
+    .friend-list {
+        width: 100% !important;
+    }
+    .friend-list .small {
+        display: flex !important;
+    }
+    .friend-body > div {
+        display: block !important;
+    }
+    .friend-view > div:last-child {
+        display: none !important;
+    }
+    .friend-list > div:last-child > div:not(.list),
+    .friend-list > div:last-child > div.list > div > div {
+        padding: 10px !important;
+        margin: 10px !important;
+    }
+    .friend-list > div:first-child > div.small > span {
+        display: flex !important;
+        margin-right: 0;
+    }
+    .friend-list > div:first-child > div.small > div:last-child {
+        display: none;
+    }
+    .friend-list > div:first-child > div.small > div:not(:last-child) {
+        margin-right: 20px !important;
+    }
+    .friend-list > div:first-child > div.small > div.reload,
+    .friend-list > div:first-child > div.small > label {
+        display: flex !important;
+    }
+    .friend-list-space {
+        overflow: hidden;
+        width: 0;
+    }
+
+    .group-assist-message-list {
+        margin-right: -100% !important;
+    }
+    .group-assist-message-list.show {
+        margin-left: -100% !important;
+        margin-right: 0;
+    }
+
+    .viewer-bar {
+        width: 25px;
+        margin: 20px;
+    }
+    .viewer-button-bar {
+        top: var(--safe-area--viewer-top);
+        left: 0;
+        flex-direction: column;
+    }
+    .viewer-button-bar > svg {
+        margin: 5px 0;
+    }
+    .viewer-button-bar > hr {
+        margin:  10px 0;
+        transform: translate(calc(-25px / 4), 0);
+        width: 25px;
+        height: 0;
+    }
+
+    .viewer-button-enter-from,
+    .viewer-button-leave-to {
+        transform: translate(75px, 0);
+        opacity: 1;
+    }
+
+    .viewer-tool-config-bar {
+        bottom: var(--safe-area-bottom);
+        justify-content: center;
+        flex-wrap: wrap;
+        width: 90%;
+    }
+    .viewer-tool-config-bar::before,
+    .viewer-tool-config-bar::after {
+        display: none;
+    }
+    .viewer-tool-config-bar > hr:not(:nth-last-child(2)) {
+        width: 100%;
+        height: 5px;
+        opacity: 0;
+    }
+}
+
+/* 全局淡入淡出动画 */
+.v-enter-active,
+.v-leave-active {
+    transition: all 0.4s ease;
+}
+.v-enter-active > div.ss-card,
+.v-leave-active > div.ss-card {
+    transition: all 0.2s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+}
+/* 如果里面有卡片，触发卡片浮入浮出动画 */
+/* TODO: 对于本来就使用 translate 定位的卡片会失效（或者出问题） */
+.v-enter-from > div.ss-card {
+    transform: translateY(-20px);
+}
+.v-leave-to > div.ss-card {
+    transform: translateY(20px);
+}
+
+.history-box > .space {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30px;
+}
+.history-box > .space > svg {
+    font-size: 50px;
+    color: var(--color-main);
+}
+
+.history-box > .main {
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    max-height: 60vh;
+}
+
+.history-box > .main > div {
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    border-radius: 7px;
+}
+
+.history-box > .main > div:hover {
+    background-color: var(--color-card-2);
+}
+
+.history-box > .main > div > img {
+    width: 30px;
+    height: 30px;
+    object-fit: cover;
+    border-radius: 7px;
+    border: 2px solid var(--color-main);
+    margin-right: 5px;
+}
+
+@keyframes wordsLoop {
+    0% {
+        transform: translateX(0px);
+    }
+    25% {
+        transform: translateX(0px);
+    }
+    75% {
+        transform: translateX(calc(-100% + 2.35rem));
+    }
+    100% {
+        transform: translateX(calc(-100% + 2.35rem));
+    }
+}