├── .DS_Store ├── .github ├── .DS_Store ├── ISSUE_TEMPLATE │ └── bug_report.md ├── ImagePreview │ ├── 1chatstyle_flat.png │ ├── 2chatstyle_bubble.png │ ├── 3chatstyle_document.png │ ├── 4chatstyle_echo.png │ ├── 5chatstyle_whisper.png │ ├── 6chatstyle_hush.png │ ├── 7chatstyle_ripple.png │ ├── 8chatstyle_tide.png │ ├── moonlit_theme_presets.png │ ├── system_messages.png │ ├── ui_overview.png │ └── visual_novel_mode.png └── README-zh_Hant.md ├── LICENSE ├── README.md ├── extension.css ├── i18n ├── zh-cn.json └── zh-tw.json ├── index.js ├── manifest.json ├── style.css └── theme ├── Glimmer - by Rivelle.json ├── Moonlit Echoes - by Rivelle.json └── [Moonlit] Glimmer - by Rivelle.json /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.DS_Store -------------------------------------------------------------------------------- /.github/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/.DS_Store -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[BUG]" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Self-Check** 11 | - [ ] Are you using a self-hosted SillyTavern? *If not, I might not be able to help.* 12 | - [ ] Have you tried a different browser or device? 13 | 14 | --- 15 | 16 | ### System Information 17 | - **Device**: [e.g. PC, Mac, iPhone 12] 18 | - **OS**: [e.g. Windows 11, macOS 14, iOS 17] 19 | - **Browser**: [e.g. Chrome, Edge, Safari] 20 | - **Version**: [e.g. 22] 21 | - **Screen Resolution (Optional)**: [e.g. 1920x1080] 22 | 23 | ### Screenshots (Highly Recommended) 24 | - If possible, add a screenshot of the issue. 25 | - Mark relevant areas and provide explanations. 26 | 27 | ### Describe the Issue 28 | A clear and concise description of the problem. 29 | 30 | ### Additional Context 31 | Any other relevant details. 32 | -------------------------------------------------------------------------------- /.github/ImagePreview/1chatstyle_flat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/1chatstyle_flat.png -------------------------------------------------------------------------------- /.github/ImagePreview/2chatstyle_bubble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/2chatstyle_bubble.png -------------------------------------------------------------------------------- /.github/ImagePreview/3chatstyle_document.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/3chatstyle_document.png -------------------------------------------------------------------------------- /.github/ImagePreview/4chatstyle_echo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/4chatstyle_echo.png -------------------------------------------------------------------------------- /.github/ImagePreview/5chatstyle_whisper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/5chatstyle_whisper.png -------------------------------------------------------------------------------- /.github/ImagePreview/6chatstyle_hush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/6chatstyle_hush.png -------------------------------------------------------------------------------- /.github/ImagePreview/7chatstyle_ripple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/7chatstyle_ripple.png -------------------------------------------------------------------------------- /.github/ImagePreview/8chatstyle_tide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/8chatstyle_tide.png -------------------------------------------------------------------------------- /.github/ImagePreview/moonlit_theme_presets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/moonlit_theme_presets.png -------------------------------------------------------------------------------- /.github/ImagePreview/system_messages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/system_messages.png -------------------------------------------------------------------------------- /.github/ImagePreview/ui_overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/ui_overview.png -------------------------------------------------------------------------------- /.github/ImagePreview/visual_novel_mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/7c0790c09f1f1ac54612e0dbdfb6e52a1e7ce407/.github/ImagePreview/visual_novel_mode.png -------------------------------------------------------------------------------- /.github/README-zh_Hant.md: -------------------------------------------------------------------------------- 1 | # Moonlit Echoes Theme 2 | 3 | [English](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/)｜**繁體中文** 4 | 5 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/visual_novel_mode.png) 6 | 7 | **「Moonlit Echoes 月下回聲」** 是一款供 SillyTavern 使用的介面主題。依據我的個人喜好進行調整和修改，旨在讓其更加現代、優雅、簡潔，並盡可能提供桌面與行動端更舒服的使用體驗。 8 | 9 | Moonlit Echoes 最初於 2024 年 11 月 25 日在 SillyTavern Disocord 伺服器公開並更新至今，期間得到許多人的回饋和支持。最終，為了可維護性並方便使用者更新、在其他地方找到它（以及滿足我對更美觀主題的執著），我將其製作為 SillyTavern 擴充功能並於 GitHub 開源。 10 | 11 | | UI Interface | System Messages | 12 | |----------------------|-------------------| 13 | | | | 14 | 15 | ## 功能與特色 16 | 17 | ### 核心功能 18 | - **多種訊息樣式**：除了 SillyTavern 預設的「平面 (Flat)」、「氣泡 (Bubble)」和「文件 (Document)」訊息風格外，還設計了額外的聊天訊息樣式，如「回聲 (Echo)」、「低語 (Whisper)」、「寂靜 (Hush)」、「漣漪 (Ripple)」和「潮汐 (Tide)」——為不同的聊天場景設計，並提供額外的客製化選項。 19 | - **跨平台友好**：致力於改善桌面端和在行動裝置上的使用體驗，如具有更寬的輸入欄位和自適應佈局——非常適合注重細節或想喜歡跨設備使用的使用者。 20 | 21 | ### Moonlit Echoes 主題預設設定檔 22 | 使用者現在可以輕鬆分享基於 Moonlit Echoes Theme 的配色與主題，並與 SillyTavern 內建 UI 主題無縫切換。 23 | 24 | 25 | 26 | ## 螢幕截圖 27 | 以下截圖來自 **2.5.0** 版本，在使用 Chrome 的 MacBook 上截取，展示了 2.5.0 中新增的 **「微光 (Glimmer)」** 主題。 28 | 29 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/1chatstyle_flat.png) 30 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/2chatstyle_bubble.png) 31 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/3chatstyle_document.png) 32 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/4chatstyle_echo.png) 33 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/5chatstyle_whisper.png) 34 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/6chatstyle_hush.png) 35 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/7chatstyle_ripple.png) 36 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/8chatstyle_tide.png) 37 | 38 | ## 安裝說明 39 | 40 | ### 前提條件 41 | 建議使用 **最新版** 的 SillyTavern（無論是 Release 或 Staging 版本）與 Chrome 瀏覽器。 42 | 43 | ### 安裝步驟 44 | 45 | #### 1. 安裝 Moonlit Echoes Theme 46 | 在 **SillyTavern 擴充管理器**中，點選「安裝擴充功能（Install from URL）」，貼入以下 Git URL： 47 | ``` 48 | https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme 49 | ``` 50 | 51 | #### 2. 更新 `/SillyTavern/config.yaml` 的縮圖設定 52 | 雖然先前建議直接禁用縮圖功能，但這可能會影響行動裝置的圖片載入速度。以下是目前推薦並經過測試的設定： 53 | ``` 54 | thumbnails: 55 | enabled: true 56 | format: png 57 | quality: 100 58 | dimensions: 59 | bg: 60 | - 240 61 | - 135 62 | avatar: 63 | - 864 64 | - 1280 65 | ``` 66 | 建議在應用設定前刪除整個縮圖資料夾（通常位於 `/SillyTavern/data/default-user/thumbnails`）。別擔心——SillyTavern 會在重新啟動後自動產生新的縮圖。 67 | 68 | #### 3. 下載並啟用主題（強烈建議！） 69 | 安裝後即可使用月下回聲主題擴充。不過，若想完全重現預覽圖中的畫面，建議下載 **「Glimmer（微光）」** 主題設定檔並匯入 SillyTavern 使用者設定中。 70 | 特別推薦 2.5.0 版本中新增的 **「微光（Glimmer）」** 主題。這個主題是專為本次發布設計的——極簡、通用，非常適合在晚上用手機躲在被窩裡使用。 71 | 72 | 你可以在 GitHub 主題（theme）文件夾中找到它，或直接透過連結下載： 73 | - [Glimmer - by Rivelle.json](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/theme/Glimmer%20-%20by%20Rivelle.json) → 用於 SillyTavern 使用者設定（User Settings） 74 | - [[Moonlit] Glimmer - by Rivelle.json](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/theme/%5BMoonlit%5D%20Glimmer%20-%20by%20Rivelle.json) → 用於月下回聲主題預設（Moonlit Echoes Theme Presets） 75 | 76 | 無需進行任何調整或修改檔名——匯入後即可使用！ 77 | 78 | ### 給 Termux 使用者 📱 79 | 若你透過 Termux 使用 SillyTavern，以下是修改 `config.yaml` 的方法。 80 | 81 | > [!Warning] 82 | > 我對 Android 設備或 Termux 沒有經驗，因此無法解答相關問題、測試步驟或保證結果。以下方法由其他使用者提供。 83 | 84 | > [!NOTE] 85 | > SillyTavern 資料夾內可能會有兩個 `config.yaml` 檔案。請務必編輯 ST 根目錄 下的 `/SillyTavern/config.yaml`。**請勿修改** `/SillyTavern/default/config.yaml` 或 default 資料夾內的任何內容。 86 | 87 | ### 方法 1：透過 Termux 編輯 88 | 1. 打開 Termux，輸入：`cd SillyTavern` 89 | 2. 接著輸入並執行：`nano config.yaml` 以編輯檔案 90 | ### 方法 2：使用 Material Files（Android 檔案管理器） 91 | 1. 開啟 Material Files > 新增儲存空間 > 前往 Termux > SillyTavern 92 | 2. 打開 SillyTavern 資料夾，直接編輯 `config.yaml` 93 | 94 | # 使用指南 95 | 96 | ## 如何使用月下回聲主題預設？ 97 | 月下回聲主題預設與 SillyTavern 的 UI 主題部分同步。若有對應名稱，切換其中一個會自動同步設定。不過，兩者本質上是獨立存在的。月下回聲主題不會創建或修改任何 SillyTavern UI 主題。 98 | 99 | ### 匯入與匯出 100 | - Moonlit Echoes 主題預設設定檔的檔案名稱格式為 `[Moonlit] 預設名稱.json`（如：`[Moonlit] Honey Cream.json`）。`[Moonlit]` 之後有一個半形空格 101 | - 這不會影響功能，你 **「不需要」** 在匯入前移除 `[Moonlit] `前綴，只需直接匯入文件即可 102 | - 若匯入的預設未與 SillyTavern 的 UI 主題同步，請重新載入頁面或選擇其他主題來套用變更 103 | 104 | ## 常見問題 105 | 106 | ### Ｑ：介面損壞、跑版或與不兼容其他擴充？ 107 | **Ａ：** 是的，儘管我盡了最大努力，但我無法保證與每個第三方 SillyTavern 擴充完全兼容。如果你遇到任何問題，請依序嘗試以下排除方式： 108 | 109 | 1. 確保你使用的是最新版本的 SillyTavern 和最新版本的 Chrome。 110 | 2. 暫時禁用此主題擴充，檢查是否是它造成的問題。如果是——或者你使用的第三方擴充尚未得到支持——隨時歡迎回報！ 111 | 112 | 月下回聲是第三方主題擴充，與官方 SillyTavern 項目無關。它是源於對 SillyTavern 的熱愛和對視覺設計的強烈偏好的個人項目。如果你遇到任何問題，請先聯繫我——我會盡力提供協助！ 113 | 114 | ### Ｑ：在預覽圖片中使用了哪些其他擴充？ 115 | **Ａ：** 以下是我強烈推薦並確認與月下回聲完全兼容的擴充： 116 | - **[SillyTavern / Extension-TopInfoBar](https://github.com/SillyTavern/Extension-TopInfoBar)**：官方擴充。支援快速切換聊天、搜尋訊息關鍵字、顯示目前的連線設定⋯我的最愛——強烈推薦！ 117 | - **[SillyTavern / Extension-QuickPersona](https://github.com/SillyTavern/Extension-QuickPersona)**：官方擴充。從聊天輸入區域輕鬆切換角色，帶有時尚的視覺提示。 118 | - **[SillyTavern / Extension-TypingIndicator](https://github.com/SillyTavern/Extension-TypingIndicator)**：官方擴充。在角色回應時顯示可愛的 `{{char}} 正在輸入...` 指示器。 119 | - **[zerofata / SillyTavern-Dialogue-Colorizer-Plus](https://github.com/zerofata/SillyTavern-Dialogue-Colorizer-Plus)**：原始 [SillyTavern-Dialogue-Colorizer](https://github.com/XanadusWorks/SillyTavern-Dialogue-Colorizer) 的分支，改進了自定義角色對話顏色的變數支持。 120 | - **[qvink / SillyTavern-MessageSummarize](https://github.com/qvink/SillyTavern-MessageSummarize)**：進階版的聊天摘要功能，可為 LLM 模擬長期和短期記憶——非常強大且有用！ 121 | - **[LenAnderson / SillyTavern-MoreFlexibleContinues](https://github.com/LenAnderson/SillyTavern-MoreFlexibleContinues/)**：為繼續生成文本添加更多靈活性，並可快速進行切換。 122 | - **[splitclover / rewrite-extension](https://github.com/splitclover/rewrite-extension)**：允許快速部分重寫和刪除訊息內容。 123 | 124 | ### Ｑ：使用月下回聲切換主題時出現延遲和卡頓？ 125 | **Ａ：** 是的，這是行動裝置上的已知問題，而我暫時束手無策。切換時，畫面可能會短暫凍結數秒，請耐心等待載入完成。此問題在桌面端幾乎不會出現。 126 | 127 | # 回饋與建議 128 | 若有任何問題或功能建議，請在 Issues 頁面提交回饋，並使用提供的模板填寫詳細資訊。 129 | 歡迎在 Discussions 區分享配色方案！無論是 SillyTavern UI 主題還是 Moonlit Echoes 主題預設，我都很期待看到美麗的配色。 130 | 131 | # 特別感謝 132 | 由衷感謝所有人一路上的幫助與喜愛。 133 | 134 | - 感謝 ceruleandeep 在 SillyTavern Discord 群組的初期支援——這一切都是從你開始的。 135 | - 特別感謝 IceFog72 鼓勵我製作 SillyTavern 主題，並開發了 [SillyTavern-CustomThemeStyleInputs](https://github.com/IceFog72/SillyTavern-CustomThemeStyleInputs)，這讓我在初期省去了許多麻煩。 136 | - 感謝 Bronya-Rand 的開源貢獻，讓我從你的 SillyTavern 擴充 中學到了許多，並參考了功能排版設計。 137 | - 感謝 vesper，我從你的自定義主題中得到了設計 Ripple 訊息風格的靈感。 138 | 139 | 最後，特別、特別感謝 Wolfsblvt 和 Cohee，為 SillyTavern 增加了 讓第三方擴充能夠使用 SillyTavern i18n（國際化系統） 的功能。這極大地改善了非英語使用者的體驗，真的非常感謝！ 140 | 141 | # 授權協議 142 | AGPLv3 143 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU AFFERO GENERAL PUBLIC LICENSE 2 | Version 3, 19 November 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU Affero General Public License is a free, copyleft license for 11 | software and other kinds of works, specifically designed to ensure 12 | cooperation with the community in the case of network server software. 13 | 14 | The licenses for most software and other practical works are designed 15 | to take away your freedom to share and change the works. By contrast, 16 | our General Public Licenses are intended to guarantee your freedom to 17 | share and change all versions of a program--to make sure it remains free 18 | software for all its users. 19 | 20 | When we speak of free software, we are referring to freedom, not 21 | price. Our General Public Licenses are designed to make sure that you 22 | have the freedom to distribute copies of free software (and charge for 23 | them if you wish), that you receive source code or can get it if you 24 | want it, that you can change the software or use pieces of it in new 25 | free programs, and that you know you can do these things. 26 | 27 | Developers that use our General Public Licenses protect your rights 28 | with two steps: (1) assert copyright on the software, and (2) offer 29 | you this License which gives you legal permission to copy, distribute 30 | and/or modify the software. 31 | 32 | A secondary benefit of defending all users' freedom is that 33 | improvements made in alternate versions of the program, if they 34 | receive widespread use, become available for other developers to 35 | incorporate. Many developers of free software are heartened and 36 | encouraged by the resulting cooperation. However, in the case of 37 | software used on network servers, this result may fail to come about. 38 | The GNU General Public License permits making a modified version and 39 | letting the public access it on a server without ever releasing its 40 | source code to the public. 41 | 42 | The GNU Affero General Public License is designed specifically to 43 | ensure that, in such cases, the modified source code becomes available 44 | to the community. It requires the operator of a network server to 45 | provide the source code of the modified version running there to the 46 | users of that server. Therefore, public use of a modified version, on 47 | a publicly accessible server, gives the public access to the source 48 | code of the modified version. 49 | 50 | An older license, called the Affero General Public License and 51 | published by Affero, was designed to accomplish similar goals. This is 52 | a different license, not a version of the Affero GPL, but Affero has 53 | released a new version of the Affero GPL which permits relicensing under 54 | this license. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | TERMS AND CONDITIONS 60 | 61 | 0. Definitions. 62 | 63 | "This License" refers to version 3 of the GNU Affero General Public License. 64 | 65 | "Copyright" also means copyright-like laws that apply to other kinds of 66 | works, such as semiconductor masks. 67 | 68 | "The Program" refers to any copyrightable work licensed under this 69 | License. Each licensee is addressed as "you". "Licensees" and 70 | "recipients" may be individuals or organizations. 71 | 72 | To "modify" a work means to copy from or adapt all or part of the work 73 | in a fashion requiring copyright permission, other than the making of an 74 | exact copy. The resulting work is called a "modified version" of the 75 | earlier work or a work "based on" the earlier work. 76 | 77 | A "covered work" means either the unmodified Program or a work based 78 | on the Program. 79 | 80 | To "propagate" a work means to do anything with it that, without 81 | permission, would make you directly or secondarily liable for 82 | infringement under applicable copyright law, except executing it on a 83 | computer or modifying a private copy. Propagation includes copying, 84 | distribution (with or without modification), making available to the 85 | public, and in some countries other activities as well. 86 | 87 | To "convey" a work means any kind of propagation that enables other 88 | parties to make or receive copies. Mere interaction with a user through 89 | a computer network, with no transfer of a copy, is not conveying. 90 | 91 | An interactive user interface displays "Appropriate Legal Notices" 92 | to the extent that it includes a convenient and prominently visible 93 | feature that (1) displays an appropriate copyright notice, and (2) 94 | tells the user that there is no warranty for the work (except to the 95 | extent that warranties are provided), that licensees may convey the 96 | work under this License, and how to view a copy of this License. If 97 | the interface presents a list of user commands or options, such as a 98 | menu, a prominent item in the list meets this criterion. 99 | 100 | 1. Source Code. 101 | 102 | The "source code" for a work means the preferred form of the work 103 | for making modifications to it. "Object code" means any non-source 104 | form of a work. 105 | 106 | A "Standard Interface" means an interface that either is an official 107 | standard defined by a recognized standards body, or, in the case of 108 | interfaces specified for a particular programming language, one that 109 | is widely used among developers working in that language. 110 | 111 | The "System Libraries" of an executable work include anything, other 112 | than the work as a whole, that (a) is included in the normal form of 113 | packaging a Major Component, but which is not part of that Major 114 | Component, and (b) serves only to enable use of the work with that 115 | Major Component, or to implement a Standard Interface for which an 116 | implementation is available to the public in source code form. A 117 | "Major Component", in this context, means a major essential component 118 | (kernel, window system, and so on) of the specific operating system 119 | (if any) on which the executable work runs, or a compiler used to 120 | produce the work, or an object code interpreter used to run it. 121 | 122 | The "Corresponding Source" for a work in object code form means all 123 | the source code needed to generate, install, and (for an executable 124 | work) run the object code and to modify the work, including scripts to 125 | control those activities. However, it does not include the work's 126 | System Libraries, or general-purpose tools or generally available free 127 | programs which are used unmodified in performing those activities but 128 | which are not part of the work. For example, Corresponding Source 129 | includes interface definition files associated with source files for 130 | the work, and the source code for shared libraries and dynamically 131 | linked subprograms that the work is specifically designed to require, 132 | such as by intimate data communication or control flow between those 133 | subprograms and other parts of the work. 134 | 135 | The Corresponding Source need not include anything that users 136 | can regenerate automatically from other parts of the Corresponding 137 | Source. 138 | 139 | The Corresponding Source for a work in source code form is that 140 | same work. 141 | 142 | 2. Basic Permissions. 143 | 144 | All rights granted under this License are granted for the term of 145 | copyright on the Program, and are irrevocable provided the stated 146 | conditions are met. This License explicitly affirms your unlimited 147 | permission to run the unmodified Program. The output from running a 148 | covered work is covered by this License only if the output, given its 149 | content, constitutes a covered work. This License acknowledges your 150 | rights of fair use or other equivalent, as provided by copyright law. 151 | 152 | You may make, run and propagate covered works that you do not 153 | convey, without conditions so long as your license otherwise remains 154 | in force. You may convey covered works to others for the sole purpose 155 | of having them make modifications exclusively for you, or provide you 156 | with facilities for running those works, provided that you comply with 157 | the terms of this License in conveying all material for which you do 158 | not control copyright. Those thus making or running the covered works 159 | for you must do so exclusively on your behalf, under your direction 160 | and control, on terms that prohibit them from making any copies of 161 | your copyrighted material outside their relationship with you. 162 | 163 | Conveying under any other circumstances is permitted solely under 164 | the conditions stated below. Sublicensing is not allowed; section 10 165 | makes it unnecessary. 166 | 167 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 168 | 169 | No covered work shall be deemed part of an effective technological 170 | measure under any applicable law fulfilling obligations under article 171 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 172 | similar laws prohibiting or restricting circumvention of such 173 | measures. 174 | 175 | When you convey a covered work, you waive any legal power to forbid 176 | circumvention of technological measures to the extent such circumvention 177 | is effected by exercising rights under this License with respect to 178 | the covered work, and you disclaim any intention to limit operation or 179 | modification of the work as a means of enforcing, against the work's 180 | users, your or third parties' legal rights to forbid circumvention of 181 | technological measures. 182 | 183 | 4. Conveying Verbatim Copies. 184 | 185 | You may convey verbatim copies of the Program's source code as you 186 | receive it, in any medium, provided that you conspicuously and 187 | appropriately publish on each copy an appropriate copyright notice; 188 | keep intact all notices stating that this License and any 189 | non-permissive terms added in accord with section 7 apply to the code; 190 | keep intact all notices of the absence of any warranty; and give all 191 | recipients a copy of this License along with the Program. 192 | 193 | You may charge any price or no price for each copy that you convey, 194 | and you may offer support or warranty protection for a fee. 195 | 196 | 5. Conveying Modified Source Versions. 197 | 198 | You may convey a work based on the Program, or the modifications to 199 | produce it from the Program, in the form of source code under the 200 | terms of section 4, provided that you also meet all of these conditions: 201 | 202 | a) The work must carry prominent notices stating that you modified 203 | it, and giving a relevant date. 204 | 205 | b) The work must carry prominent notices stating that it is 206 | released under this License and any conditions added under section 207 | 7. This requirement modifies the requirement in section 4 to 208 | "keep intact all notices". 209 | 210 | c) You must license the entire work, as a whole, under this 211 | License to anyone who comes into possession of a copy. This 212 | License will therefore apply, along with any applicable section 7 213 | additional terms, to the whole of the work, and all its parts, 214 | regardless of how they are packaged. This License gives no 215 | permission to license the work in any other way, but it does not 216 | invalidate such permission if you have separately received it. 217 | 218 | d) If the work has interactive user interfaces, each must display 219 | Appropriate Legal Notices; however, if the Program has interactive 220 | interfaces that do not display Appropriate Legal Notices, your 221 | work need not make them do so. 222 | 223 | A compilation of a covered work with other separate and independent 224 | works, which are not by their nature extensions of the covered work, 225 | and which are not combined with it such as to form a larger program, 226 | in or on a volume of a storage or distribution medium, is called an 227 | "aggregate" if the compilation and its resulting copyright are not 228 | used to limit the access or legal rights of the compilation's users 229 | beyond what the individual works permit. Inclusion of a covered work 230 | in an aggregate does not cause this License to apply to the other 231 | parts of the aggregate. 232 | 233 | 6. Conveying Non-Source Forms. 234 | 235 | You may convey a covered work in object code form under the terms 236 | of sections 4 and 5, provided that you also convey the 237 | machine-readable Corresponding Source under the terms of this License, 238 | in one of these ways: 239 | 240 | a) Convey the object code in, or embodied in, a physical product 241 | (including a physical distribution medium), accompanied by the 242 | Corresponding Source fixed on a durable physical medium 243 | customarily used for software interchange. 244 | 245 | b) Convey the object code in, or embodied in, a physical product 246 | (including a physical distribution medium), accompanied by a 247 | written offer, valid for at least three years and valid for as 248 | long as you offer spare parts or customer support for that product 249 | model, to give anyone who possesses the object code either (1) a 250 | copy of the Corresponding Source for all the software in the 251 | product that is covered by this License, on a durable physical 252 | medium customarily used for software interchange, for a price no 253 | more than your reasonable cost of physically performing this 254 | conveying of source, or (2) access to copy the 255 | Corresponding Source from a network server at no charge. 256 | 257 | c) Convey individual copies of the object code with a copy of the 258 | written offer to provide the Corresponding Source. This 259 | alternative is allowed only occasionally and noncommercially, and 260 | only if you received the object code with such an offer, in accord 261 | with subsection 6b. 262 | 263 | d) Convey the object code by offering access from a designated 264 | place (gratis or for a charge), and offer equivalent access to the 265 | Corresponding Source in the same way through the same place at no 266 | further charge. You need not require recipients to copy the 267 | Corresponding Source along with the object code. If the place to 268 | copy the object code is a network server, the Corresponding Source 269 | may be on a different server (operated by you or a third party) 270 | that supports equivalent copying facilities, provided you maintain 271 | clear directions next to the object code saying where to find the 272 | Corresponding Source. Regardless of what server hosts the 273 | Corresponding Source, you remain obligated to ensure that it is 274 | available for as long as needed to satisfy these requirements. 275 | 276 | e) Convey the object code using peer-to-peer transmission, provided 277 | you inform other peers where the object code and Corresponding 278 | Source of the work are being offered to the general public at no 279 | charge under subsection 6d. 280 | 281 | A separable portion of the object code, whose source code is excluded 282 | from the Corresponding Source as a System Library, need not be 283 | included in conveying the object code work. 284 | 285 | A "User Product" is either (1) a "consumer product", which means any 286 | tangible personal property which is normally used for personal, family, 287 | or household purposes, or (2) anything designed or sold for incorporation 288 | into a dwelling. In determining whether a product is a consumer product, 289 | doubtful cases shall be resolved in favor of coverage. For a particular 290 | product received by a particular user, "normally used" refers to a 291 | typical or common use of that class of product, regardless of the status 292 | of the particular user or of the way in which the particular user 293 | actually uses, or expects or is expected to use, the product. A product 294 | is a consumer product regardless of whether the product has substantial 295 | commercial, industrial or non-consumer uses, unless such uses represent 296 | the only significant mode of use of the product. 297 | 298 | "Installation Information" for a User Product means any methods, 299 | procedures, authorization keys, or other information required to install 300 | and execute modified versions of a covered work in that User Product from 301 | a modified version of its Corresponding Source. The information must 302 | suffice to ensure that the continued functioning of the modified object 303 | code is in no case prevented or interfered with solely because 304 | modification has been made. 305 | 306 | If you convey an object code work under this section in, or with, or 307 | specifically for use in, a User Product, and the conveying occurs as 308 | part of a transaction in which the right of possession and use of the 309 | User Product is transferred to the recipient in perpetuity or for a 310 | fixed term (regardless of how the transaction is characterized), the 311 | Corresponding Source conveyed under this section must be accompanied 312 | by the Installation Information. But this requirement does not apply 313 | if neither you nor any third party retains the ability to install 314 | modified object code on the User Product (for example, the work has 315 | been installed in ROM). 316 | 317 | The requirement to provide Installation Information does not include a 318 | requirement to continue to provide support service, warranty, or updates 319 | for a work that has been modified or installed by the recipient, or for 320 | the User Product in which it has been modified or installed. Access to a 321 | network may be denied when the modification itself materially and 322 | adversely affects the operation of the network or violates the rules and 323 | protocols for communication across the network. 324 | 325 | Corresponding Source conveyed, and Installation Information provided, 326 | in accord with this section must be in a format that is publicly 327 | documented (and with an implementation available to the public in 328 | source code form), and must require no special password or key for 329 | unpacking, reading or copying. 330 | 331 | 7. Additional Terms. 332 | 333 | "Additional permissions" are terms that supplement the terms of this 334 | License by making exceptions from one or more of its conditions. 335 | Additional permissions that are applicable to the entire Program shall 336 | be treated as though they were included in this License, to the extent 337 | that they are valid under applicable law. If additional permissions 338 | apply only to part of the Program, that part may be used separately 339 | under those permissions, but the entire Program remains governed by 340 | this License without regard to the additional permissions. 341 | 342 | When you convey a copy of a covered work, you may at your option 343 | remove any additional permissions from that copy, or from any part of 344 | it. (Additional permissions may be written to require their own 345 | removal in certain cases when you modify the work.) You may place 346 | additional permissions on material, added by you to a covered work, 347 | for which you have or can give appropriate copyright permission. 348 | 349 | Notwithstanding any other provision of this License, for material you 350 | add to a covered work, you may (if authorized by the copyright holders of 351 | that material) supplement the terms of this License with terms: 352 | 353 | a) Disclaiming warranty or limiting liability differently from the 354 | terms of sections 15 and 16 of this License; or 355 | 356 | b) Requiring preservation of specified reasonable legal notices or 357 | author attributions in that material or in the Appropriate Legal 358 | Notices displayed by works containing it; or 359 | 360 | c) Prohibiting misrepresentation of the origin of that material, or 361 | requiring that modified versions of such material be marked in 362 | reasonable ways as different from the original version; or 363 | 364 | d) Limiting the use for publicity purposes of names of licensors or 365 | authors of the material; or 366 | 367 | e) Declining to grant rights under trademark law for use of some 368 | trade names, trademarks, or service marks; or 369 | 370 | f) Requiring indemnification of licensors and authors of that 371 | material by anyone who conveys the material (or modified versions of 372 | it) with contractual assumptions of liability to the recipient, for 373 | any liability that these contractual assumptions directly impose on 374 | those licensors and authors. 375 | 376 | All other non-permissive additional terms are considered "further 377 | restrictions" within the meaning of section 10. If the Program as you 378 | received it, or any part of it, contains a notice stating that it is 379 | governed by this License along with a term that is a further 380 | restriction, you may remove that term. If a license document contains 381 | a further restriction but permits relicensing or conveying under this 382 | License, you may add to a covered work material governed by the terms 383 | of that license document, provided that the further restriction does 384 | not survive such relicensing or conveying. 385 | 386 | If you add terms to a covered work in accord with this section, you 387 | must place, in the relevant source files, a statement of the 388 | additional terms that apply to those files, or a notice indicating 389 | where to find the applicable terms. 390 | 391 | Additional terms, permissive or non-permissive, may be stated in the 392 | form of a separately written license, or stated as exceptions; 393 | the above requirements apply either way. 394 | 395 | 8. Termination. 396 | 397 | You may not propagate or modify a covered work except as expressly 398 | provided under this License. Any attempt otherwise to propagate or 399 | modify it is void, and will automatically terminate your rights under 400 | this License (including any patent licenses granted under the third 401 | paragraph of section 11). 402 | 403 | However, if you cease all violation of this License, then your 404 | license from a particular copyright holder is reinstated (a) 405 | provisionally, unless and until the copyright holder explicitly and 406 | finally terminates your license, and (b) permanently, if the copyright 407 | holder fails to notify you of the violation by some reasonable means 408 | prior to 60 days after the cessation. 409 | 410 | Moreover, your license from a particular copyright holder is 411 | reinstated permanently if the copyright holder notifies you of the 412 | violation by some reasonable means, this is the first time you have 413 | received notice of violation of this License (for any work) from that 414 | copyright holder, and you cure the violation prior to 30 days after 415 | your receipt of the notice. 416 | 417 | Termination of your rights under this section does not terminate the 418 | licenses of parties who have received copies or rights from you under 419 | this License. If your rights have been terminated and not permanently 420 | reinstated, you do not qualify to receive new licenses for the same 421 | material under section 10. 422 | 423 | 9. Acceptance Not Required for Having Copies. 424 | 425 | You are not required to accept this License in order to receive or 426 | run a copy of the Program. Ancillary propagation of a covered work 427 | occurring solely as a consequence of using peer-to-peer transmission 428 | to receive a copy likewise does not require acceptance. However, 429 | nothing other than this License grants you permission to propagate or 430 | modify any covered work. These actions infringe copyright if you do 431 | not accept this License. Therefore, by modifying or propagating a 432 | covered work, you indicate your acceptance of this License to do so. 433 | 434 | 10. Automatic Licensing of Downstream Recipients. 435 | 436 | Each time you convey a covered work, the recipient automatically 437 | receives a license from the original licensors, to run, modify and 438 | propagate that work, subject to this License. You are not responsible 439 | for enforcing compliance by third parties with this License. 440 | 441 | An "entity transaction" is a transaction transferring control of an 442 | organization, or substantially all assets of one, or subdividing an 443 | organization, or merging organizations. If propagation of a covered 444 | work results from an entity transaction, each party to that 445 | transaction who receives a copy of the work also receives whatever 446 | licenses to the work the party's predecessor in interest had or could 447 | give under the previous paragraph, plus a right to possession of the 448 | Corresponding Source of the work from the predecessor in interest, if 449 | the predecessor has it or can get it with reasonable efforts. 450 | 451 | You may not impose any further restrictions on the exercise of the 452 | rights granted or affirmed under this License. For example, you may 453 | not impose a license fee, royalty, or other charge for exercise of 454 | rights granted under this License, and you may not initiate litigation 455 | (including a cross-claim or counterclaim in a lawsuit) alleging that 456 | any patent claim is infringed by making, using, selling, offering for 457 | sale, or importing the Program or any portion of it. 458 | 459 | 11. Patents. 460 | 461 | A "contributor" is a copyright holder who authorizes use under this 462 | License of the Program or a work on which the Program is based. The 463 | work thus licensed is called the contributor's "contributor version". 464 | 465 | A contributor's "essential patent claims" are all patent claims 466 | owned or controlled by the contributor, whether already acquired or 467 | hereafter acquired, that would be infringed by some manner, permitted 468 | by this License, of making, using, or selling its contributor version, 469 | but do not include claims that would be infringed only as a 470 | consequence of further modification of the contributor version. For 471 | purposes of this definition, "control" includes the right to grant 472 | patent sublicenses in a manner consistent with the requirements of 473 | this License. 474 | 475 | Each contributor grants you a non-exclusive, worldwide, royalty-free 476 | patent license under the contributor's essential patent claims, to 477 | make, use, sell, offer for sale, import and otherwise run, modify and 478 | propagate the contents of its contributor version. 479 | 480 | In the following three paragraphs, a "patent license" is any express 481 | agreement or commitment, however denominated, not to enforce a patent 482 | (such as an express permission to practice a patent or covenant not to 483 | sue for patent infringement). To "grant" such a patent license to a 484 | party means to make such an agreement or commitment not to enforce a 485 | patent against the party. 486 | 487 | If you convey a covered work, knowingly relying on a patent license, 488 | and the Corresponding Source of the work is not available for anyone 489 | to copy, free of charge and under the terms of this License, through a 490 | publicly available network server or other readily accessible means, 491 | then you must either (1) cause the Corresponding Source to be so 492 | available, or (2) arrange to deprive yourself of the benefit of the 493 | patent license for this particular work, or (3) arrange, in a manner 494 | consistent with the requirements of this License, to extend the patent 495 | license to downstream recipients. "Knowingly relying" means you have 496 | actual knowledge that, but for the patent license, your conveying the 497 | covered work in a country, or your recipient's use of the covered work 498 | in a country, would infringe one or more identifiable patents in that 499 | country that you have reason to believe are valid. 500 | 501 | If, pursuant to or in connection with a single transaction or 502 | arrangement, you convey, or propagate by procuring conveyance of, a 503 | covered work, and grant a patent license to some of the parties 504 | receiving the covered work authorizing them to use, propagate, modify 505 | or convey a specific copy of the covered work, then the patent license 506 | you grant is automatically extended to all recipients of the covered 507 | work and works based on it. 508 | 509 | A patent license is "discriminatory" if it does not include within 510 | the scope of its coverage, prohibits the exercise of, or is 511 | conditioned on the non-exercise of one or more of the rights that are 512 | specifically granted under this License. You may not convey a covered 513 | work if you are a party to an arrangement with a third party that is 514 | in the business of distributing software, under which you make payment 515 | to the third party based on the extent of your activity of conveying 516 | the work, and under which the third party grants, to any of the 517 | parties who would receive the covered work from you, a discriminatory 518 | patent license (a) in connection with copies of the covered work 519 | conveyed by you (or copies made from those copies), or (b) primarily 520 | for and in connection with specific products or compilations that 521 | contain the covered work, unless you entered into that arrangement, 522 | or that patent license was granted, prior to 28 March 2007. 523 | 524 | Nothing in this License shall be construed as excluding or limiting 525 | any implied license or other defenses to infringement that may 526 | otherwise be available to you under applicable patent law. 527 | 528 | 12. No Surrender of Others' Freedom. 529 | 530 | If conditions are imposed on you (whether by court order, agreement or 531 | otherwise) that contradict the conditions of this License, they do not 532 | excuse you from the conditions of this License. If you cannot convey a 533 | covered work so as to satisfy simultaneously your obligations under this 534 | License and any other pertinent obligations, then as a consequence you may 535 | not convey it at all. For example, if you agree to terms that obligate you 536 | to collect a royalty for further conveying from those to whom you convey 537 | the Program, the only way you could satisfy both those terms and this 538 | License would be to refrain entirely from conveying the Program. 539 | 540 | 13. Remote Network Interaction; Use with the GNU General Public License. 541 | 542 | Notwithstanding any other provision of this License, if you modify the 543 | Program, your modified version must prominently offer all users 544 | interacting with it remotely through a computer network (if your version 545 | supports such interaction) an opportunity to receive the Corresponding 546 | Source of your version by providing access to the Corresponding Source 547 | from a network server at no charge, through some standard or customary 548 | means of facilitating copying of software. This Corresponding Source 549 | shall include the Corresponding Source for any work covered by version 3 550 | of the GNU General Public License that is incorporated pursuant to the 551 | following paragraph. 552 | 553 | Notwithstanding any other provision of this License, you have 554 | permission to link or combine any covered work with a work licensed 555 | under version 3 of the GNU General Public License into a single 556 | combined work, and to convey the resulting work. The terms of this 557 | License will continue to apply to the part which is the covered work, 558 | but the work with which it is combined will remain governed by version 559 | 3 of the GNU General Public License. 560 | 561 | 14. Revised Versions of this License. 562 | 563 | The Free Software Foundation may publish revised and/or new versions of 564 | the GNU Affero General Public License from time to time. Such new versions 565 | will be similar in spirit to the present version, but may differ in detail to 566 | address new problems or concerns. 567 | 568 | Each version is given a distinguishing version number. If the 569 | Program specifies that a certain numbered version of the GNU Affero General 570 | Public License "or any later version" applies to it, you have the 571 | option of following the terms and conditions either of that numbered 572 | version or of any later version published by the Free Software 573 | Foundation. If the Program does not specify a version number of the 574 | GNU Affero General Public License, you may choose any version ever published 575 | by the Free Software Foundation. 576 | 577 | If the Program specifies that a proxy can decide which future 578 | versions of the GNU Affero General Public License can be used, that proxy's 579 | public statement of acceptance of a version permanently authorizes you 580 | to choose that version for the Program. 581 | 582 | Later license versions may give you additional or different 583 | permissions. However, no additional obligations are imposed on any 584 | author or copyright holder as a result of your choosing to follow a 585 | later version. 586 | 587 | 15. Disclaimer of Warranty. 588 | 589 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 590 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 591 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 592 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 593 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 594 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 595 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 596 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 597 | 598 | 16. Limitation of Liability. 599 | 600 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 601 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 602 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 603 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 604 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 605 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 606 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 607 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 608 | SUCH DAMAGES. 609 | 610 | 17. Interpretation of Sections 15 and 16. 611 | 612 | If the disclaimer of warranty and limitation of liability provided 613 | above cannot be given local legal effect according to their terms, 614 | reviewing courts shall apply local law that most closely approximates 615 | an absolute waiver of all civil liability in connection with the 616 | Program, unless a warranty or assumption of liability accompanies a 617 | copy of the Program in return for a fee. 618 | 619 | END OF TERMS AND CONDITIONS 620 | 621 | How to Apply These Terms to Your New Programs 622 | 623 | If you develop a new program, and you want it to be of the greatest 624 | possible use to the public, the best way to achieve this is to make it 625 | free software which everyone can redistribute and change under these terms. 626 | 627 | To do so, attach the following notices to the program. It is safest 628 | to attach them to the start of each source file to most effectively 629 | state the exclusion of warranty; and each file should have at least 630 | the "copyright" line and a pointer to where the full notice is found. 631 | 632 | 633 | Copyright (C) 634 | 635 | This program is free software: you can redistribute it and/or modify 636 | it under the terms of the GNU Affero General Public License as published 637 | by the Free Software Foundation, either version 3 of the License, or 638 | (at your option) any later version. 639 | 640 | This program is distributed in the hope that it will be useful, 641 | but WITHOUT ANY WARRANTY; without even the implied warranty of 642 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 643 | GNU Affero General Public License for more details. 644 | 645 | You should have received a copy of the GNU Affero General Public License 646 | along with this program. If not, see . 647 | 648 | Also add information on how to contact you by electronic and paper mail. 649 | 650 | If your software can interact with users remotely through a computer 651 | network, you should also make sure that it provides a way for users to 652 | get its source. For example, if your program is a web application, its 653 | interface could display a "Source" link that leads users to an archive 654 | of the code. There are many ways you could offer source, and different 655 | solutions will be better for different programs; see section 13 for the 656 | specific requirements. 657 | 658 | You should also get your employer (if you work as a programmer) or school, 659 | if any, to sign a "copyright disclaimer" for the program, if necessary. 660 | For more information on this, and how to apply and follow the GNU AGPL, see 661 | . 662 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Moonlit Echoes Theme 2 | 3 | **English** | [繁體中文](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/README-zh_Hant.md) 4 | 5 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/visual_novel_mode.png) 6 | 7 | **Moonlit Echoes 月下回聲** is a UI theme designed for SillyTavern. It has been customized and refined based on my personal preferences to create a more modern, elegant, and minimalist interface while enhancing the user experience across both desktop and mobile platforms. 8 | 9 | Moonlit Echoes was first released on the SillyTavern Discord server on November 25, 2024, and has been continuously updated with valuable feedback and support from the community. Eventually, to improve maintainability and ease of updates—and to satisfy my obsession with well-designed themes—I developed this as a SillyTavern extension and made it open-source on GitHub. 10 | 11 | | UI Interface | System Messages | 12 | |----------------------|-------------------| 13 | | | | 14 | 15 | ## Features 16 | 17 | ### Core Features 18 | - **Multiple Message Styles**: In addition to SillyTavern’s default "Flat," "Bubble," and "Document" layouts, this theme introduces unique styles like "Echo," "Whisper," "Hush," "Ripple," and "Tide," designed for different chat scenarios with extra customization options available. 19 | - **Cross-Platform Friendly**: Optimized for both desktop and mobile, with wider input fields and adaptive layouts—ideal for detail-oriented users and those on mobile devices. 20 | 21 | ### Moonlit Echoes Theme Presets 22 | Users can now easily share color schemes and themes based on Moonlit Echoes Theme. These presets can sync with SillyTavern’s built-in UI themes for a seamless transition. 23 | 24 | 25 | 26 | ## Screenshots 27 | The following screenshots are from **version 2.5.0**, taken on a MacBook using Chrome, showcasing the newly added "Glimmer (微光)" theme introduced in 2.5.0. 28 | 29 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/1chatstyle_flat.png) 30 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/2chatstyle_bubble.png) 31 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/3chatstyle_document.png) 32 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/4chatstyle_echo.png) 33 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/5chatstyle_whisper.png) 34 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/6chatstyle_hush.png) 35 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/7chatstyle_ripple.png) 36 | ![](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/.github/ImagePreview/8chatstyle_tide.png) 37 | 38 | # Installation 39 | ## Prerequisites 40 | It is recommended to use the **latest version** of SillyTavern (either Release or Staging) along with Google Chrome. 41 | 42 | ## Installation Steps 43 | 44 | ### 1. **Install Moonlit Echoes Theme** 45 | In the **SillyTavern Extension Manager**, use "Install from URL" and paste the following Git URL: 46 | ``` 47 | https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme 48 | ``` 49 | 50 | ### 2. **Update to `/SillyTavern/config.yaml` for thumbnail settings** 51 | Previously, I recommended disabling thumbnails, but this can slow down image loading on mobile. Here’s a tested configuration I now recommend: 52 | ``` 53 | thumbnails: 54 | enabled: true 55 | format: png 56 | quality: 100 57 | dimensions: 58 | bg: 59 | - 240 60 | - 135 61 | avatar: 62 | - 864 63 | - 1280 64 | ``` 65 | Before applying and restarting SillyTavern, consider deleting the entire thumbnails folder (likely located at `/SillyTavern/data/default-user/thumbnails`) Don’t worry—it will regenerate automatically with better image quality after restart. 66 | 67 | ### 3. **Download and Enable the Theme (Highly Recommended!)** 68 | 69 | The Moonlit Echoes theme extension is ready to use after installation. However, if you’d like your interface to match the style shown in the preview images, please download the theme file and import it into your User Settings, then set it as your UI theme. 70 | 71 | The newly added **"Glimmer (微光)"** theme in version 2.5.0 is especially recommended. This theme was specially designed for this release—minimalist, versatile, and perfect for using your phone under the covers at night. 72 | You can find it in the GitHub theme folder or download it directly below: 73 | 74 | - [Glimmer - by Rivelle.json](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/theme/Glimmer%20-%20by%20Rivelle.json) → for SillyTavern User Settings 75 | - [[Moonlit] Glimmer - by Rivelle.json](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme/blob/main/theme/%5BMoonlit%5D%20Glimmer%20-%20by%20Rivelle.json) → for Moonlit Echoes Theme Presets 76 | 77 | No need to tweak anything—just drop the file in and you’re good to go! 78 | 79 | ## For SillyTavern Users via Termux 📱 80 | If you’re using SillyTavern via Termux, here’s how you can modify `config.yaml`. 81 | 82 | > [!Warning] 83 | > I don’t have experience with Android devices or Termux, so I can’t answer related questions, test the steps, or guarantee results. The following methods are provided by other users. 84 | 85 | > [!NOTE] 86 | > You may find two config.yaml files inside the SillyTavern folder. Make sure to edit the one in the root directory: `/SillyTavern/config.yaml.` **Do NOT modify** `/SillyTavern/default/config.yaml` or anything inside the default folder. 87 | 88 | ### Method 1: Edit via Termux 89 | 1. Open Termux and enter: `cd SillyTavern` 90 | 2. Then, run: `nano config.yaml` to edit the file. 91 | 92 | ### Method 2: Use Material Files (Android File Manager) 93 | 1. **Open Material Files** > **Add Storage** > **Navigate to Termux** > **SillyTavern** 94 | 2. Within the SillyTavern directory, edit `config.yaml` directly 95 | 96 | # Usage Guide 97 | 98 | ## How to Use the Moonlit Echoes Theme Preset? 99 | The Moonlit Echoes theme preset is partially synced with the UI themes in SillyTavern. If there are matching options in the menu, switching either one will sync the settings accordingly. 100 | 101 | However, the Moonlit Echoes theme preset is fundamentally separate from SillyTavern’s UI themes. The Moonlit Echoes Theme does NOT create or modify any SillyTavern UI themes. 102 | 103 | ### Import & Export 104 | - Moonlit Echoes theme preset files follow the format `[Moonlit] PresetName.json` (e.g., `[Moonlit] Honey Cream.json`). There is a half-width space after `[Moonlit]` 105 | - This does not affect functionality. You do **NOT** need to remove `[Moonlit] ` before importing—just import the file directly 106 | - If the imported preset does not sync with SillyTavern UI themes, **reload the page** or **select a different theme** to apply the changes 107 | 108 | ## FAQ 109 | 110 | ### Q: The layout looks broken or doesn’t work with other extensions? 111 | **A:** Yes, despite my best efforts, I can’t guarantee full compatibility with every third-party SillyTavern extension. If you run into any issues, please try the following troubleshooting steps: 112 | 113 | 1. Make sure you're using the latest version of SillyTavern with the latest version of Chrome. 114 | 2. Temporarily disable this theme extension to check whether it’s the cause. 115 | If it is—or if the third-party extension you're using isn't supported yet—feel free to report it. 116 | 117 | Moonlit Echoes is a third-party theme extension and is not affiliated with the official SillyTavern project. It’s a personal project born out of love for SillyTavern and a strong preference for visual design. If you encounter any issues, please reach out to me first—I’ll do my best to help. 118 | 119 | ### Q: What other extensions are you using in the preview images? 120 | **A:** Here are the extensions I highly recommend and can confirm are fully supported by Moonlit Echoes: 121 | - **[SillyTavern / Extension-TopInfoBar](https://github.com/SillyTavern/Extension-TopInfoBar)**: Official extension. Lets you quickly switch chats, jump between files, and search messages. My absolute favorite—highly recommended! 122 | - **[SillyTavern / Extension-QuickPersona](https://github.com/SillyTavern/Extension-QuickPersona)**: Official extension. Easily switch personas from the chat input area, with stylish visual cues. 123 | - **[SillyTavern / Extension-TypingIndicator](https://github.com/SillyTavern/Extension-TypingIndicator)**: Official extension. Shows a cute `{{char}} is typing...` indicator while characters are responding. 124 | - **[zerofata / SillyTavern-Dialogue-Colorizer-Plus](https://github.com/zerofata/SillyTavern-Dialogue-Colorizer-Plus)**: A fork of the original [SillyTavern-Dialogue-Colorizer](https://github.com/XanadusWorks/SillyTavern-Dialogue-Colorizer), with improved variable support for customizing character dialogue colors. 125 | - **[qvink / SillyTavern-MessageSummarize](https://github.com/qvink/SillyTavern-MessageSummarize)**: Adds smart summarization to simulate long- and short-term memory for LLMs—very powerful and useful. 126 | - **[LenAnderson / SillyTavern-MoreFlexibleContinues](https://github.com/LenAnderson/SillyTavern-MoreFlexibleContinues/)**: Adds more flexibility to continue generations. 127 | - **[splitclover / rewrite-extension](https://github.com/splitclover/rewrite-extension)**: Allows fast partial rewrites and deletions of message content. 128 | 129 | ### Q: Experiencing a lag when switching themes with Moonlit Echoes? 130 | **A:** Yes, this is a known issue I haven’t been able to resolve yet. On mobile, the switch may freeze briefly for a few seconds before completing. Just wait a moment and it should load fine. This rarely happens on desktop. 131 | 132 | # Feedback & Suggestions 133 | If you encounter any issues or have feature requests, please submit them in the Issues section using the provided template. 134 | 135 | You’re also welcome to share your color schemes in the Discussions section!
136 | Whether it’s a SillyTavern UI theme or a Moonlit Echoes theme preset, I’d love to see your creative designs. 137 | 138 | # Special Thanks 139 | 140 | A heartfelt thank you to everyone who has supported and contributed to this project. 141 | 142 | - A big thank you to ceruleandeep for your early support in the SillyTavern Discord—this all started because of you. 143 | - Huge thanks to IceFog72 for encouraging me to create SillyTavern themes and for developing [SillyTavern-CustomThemeStyleInputs](https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme), which saved me a lot of hassle in the early stages. 144 | - Much appreciation to Bronya-Rand for your open-source work—I learned a lot from your SillyTavern extension and took inspiration from its feature layout. 145 | - Thanks to vesper—I drew inspiration from your custom themes when designing the Ripple message style. 146 | 147 | Finally, endless gratitude to Wolfsblvt and Cohee for adding i18n support for third-party extensions in SillyTavern. This has greatly improved the experience for non-English users, and I truly appreciate it! 148 | 149 | # License 150 | AGPLv3 151 | -------------------------------------------------------------------------------- /extension.css: -------------------------------------------------------------------------------- 1 | /* --- Quick Replies 快速回覆 --- */ 2 | #qr--bar { 3 | margin-top: 8px !important; 4 | 5 | @media screen and (max-width: 1000px) { 6 | max-height: calc(38px * var(--mobileQRsBarHeight)); 7 | overflow: auto; 8 | margin-bottom: 5px !important; 9 | min-width: 100% !important; 10 | } 11 | 12 | > .qr--buttons { 13 | gap: 3px 0 !important; 14 | 15 | &.qr--color { 16 | background-color: unset; 17 | } 18 | 19 | .qr--button { 20 | font-size: calc(var(--mainFontSize) * 0.9); 21 | margin: 3px !important; 22 | 23 | @media screen and (max-width: 1000px) { 24 | padding: 3px 4px !important; 25 | } 26 | } 27 | } 28 | > .qr--buttons .qr--button { 29 | font-size: calc(var(--mainFontSize) * 0.9); 30 | font-weight: 500; 31 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 50%, transparent); 32 | 33 | @media screen and (max-width: 1000px) { 34 | font-size: calc(var(--mainFontSize) * 0.85); 35 | } 36 | } 37 | .qr--button-expander { 38 | margin-left: 3px; 39 | 40 | @media screen and (max-width: 1000px) { 41 | width: 20px; 42 | } 43 | 44 | .qr--button-expander { 45 | border-left: 1px solid; 46 | opacity: 0.8; 47 | } 48 | } 49 | } 50 | 51 | #qr--popout { 52 | > .qr--body { 53 | > .qr--buttons { 54 | &.qr--color { 55 | background-color: unset; 56 | gap: 3px; 57 | } 58 | } 59 | } 60 | } 61 | 62 | .ctx-menu { 63 | position: absolute; 64 | padding: 5px 8px; 65 | opacity: 1 !important; 66 | background-color: var(--SmartThemeBlurTintColor) !important; 67 | backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))) !important; 68 | -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))) !important; 69 | 70 | @media screen and (max-width: 1000px) { 71 | margin-left: -50px; 72 | } 73 | } 74 | .ctx-sub-menu { 75 | opacity: 1 !important; 76 | background-color: var(--SmartThemeBlurTintColor) !important; 77 | backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))) !important; 78 | -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))) !important; 79 | } 80 | .ctx-blocker { 81 | li { 82 | margin-bottom: 0px !important; 83 | font-size: var(--mainFontSize); 84 | } 85 | } 86 | .ctx-item + .ctx-header { 87 | border-top: 1px dashed color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 88 | margin-top: 5px; 89 | padding-top: 10px; 90 | } 91 | .list-group .list-group-item.ctx-header { 92 | opacity: 0.8 !important; 93 | letter-spacing: 0.2px; 94 | } 95 | .ctx-blocker li:hover { 96 | color: var(--SmartThemeBodyColor); 97 | } 98 | .list-group .list-group-item.ctx-header, 99 | .ctx-item .qr--button-label{ 100 | @media screen and (max-width: 1000px) { 101 | font-size: calc(var(--mainFontSize) * 0.95) !important; 102 | padding-bottom: 2.5px; 103 | } 104 | } 105 | .list-group .list-group-item.ctx-item { 106 | @media screen and (max-width: 1000px) { 107 | padding: 1px 5px !important; 108 | } 109 | } 110 | 111 | /* --- Chat Info 聊天資訊 --- */ 112 | 113 | body:has(#extensionTopBar) { 114 | #sheld { 115 | padding-top: calc(var(--topBarBlockSize)) !important; 116 | } 117 | 118 | @media screen and (max-width: 1000px) { 119 | #sheld { 120 | padding-top: calc(var(--topBarBlockSize) - 5px) !important; 121 | } 122 | 123 | } 124 | } 125 | body.waifuMode:has(#extensionTopBar) { 126 | #sheld { 127 | padding-top: 0 !important; 128 | } 129 | } 130 | 131 | #extensionTopBar { 132 | /* 定位 */ 133 | position: fixed; 134 | top: calc(var(--topBarBlockSize) + 5px) !important; 135 | left: 50%; 136 | bottom: auto; 137 | transform: translateX(-50%); 138 | z-index: 3005; 139 | 140 | /* 尺寸 */ 141 | width: calc(var(--sheldWidth) - 20px) !important; 142 | height: var(--bottomFormBlockSize); 143 | 144 | /* 佈局 */ 145 | display: flex; 146 | flex-direction: row; 147 | flex-wrap: wrap; 148 | flex-shrink: 0; 149 | align-content: center; 150 | align-items: center; 151 | justify-content: center; 152 | gap: 10px; 153 | padding-top: 0; 154 | 155 | /* 樣式 */ 156 | background-color: var(--SmartThemeBlurTintColor); 157 | backdrop-filter: blur(var(--SmartThemeBlurStrength)); 158 | border-radius: 10px !important; 159 | font-size: calc(var(--mainFontSize) * 0.9); 160 | transition: all 0.8s ease; 161 | 162 | @media screen and (max-width: 1000px) { 163 | top: var(--topBarBlockSize) !important; 164 | width: 100% !important; 165 | border-radius: 0 !important; 166 | opacity: 0.8; 167 | border: none !important; 168 | border-top: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 50%, transparent) !important; 169 | border-bottom: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 170 | } 171 | } 172 | body:has(#extensionConnectionProfiles.visible) #extensionTopBar { 173 | border-radius: 10px 10px 0 0 !important; 174 | 175 | @media screen and (max-width: 1000px) { 176 | border-radius: 0 !important; 177 | } 178 | } 179 | body.waifuMode:has(#extensionConnectionProfiles.visible) #extensionTopBar { 180 | border-radius: 10px !important; 181 | } 182 | 183 | #extensionSideBar { 184 | top: var(--topBarBlockSize) !important; 185 | max-height: calc(100dvh - var(--topBarBlockSize)) !important; 186 | min-height: calc(100dvh - var(--topBarBlockSize)) !important; 187 | border-radius: 0 !important; 188 | 189 | &.visible { 190 | display: flex; 191 | padding: 15px; 192 | border: 0; 193 | border-top: 1.25px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 194 | } 195 | 196 | #extensionSideBarContainer { 197 | padding: 10px; 198 | margin-bottom: 5px; 199 | } 200 | } 201 | 202 | #select_chat_popup { 203 | padding: 10px; 204 | box-shadow: 0px 0px 20px var(--SmartThemeBorderColor); 205 | 206 | @media screen and (max-width: 1000px) { 207 | align-items: start; 208 | height: 90dvh; 209 | max-height: 90dvh; 210 | align-content: start; 211 | max-width: unset; 212 | overflow-y: auto; 213 | } 214 | } 215 | #shadow_select_chat_popup { 216 | backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))) !important; 217 | -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))) !important; 218 | background-color: var(--black70a); 219 | } 220 | 221 | .select_chat_block { 222 | margin: 5px 0; 223 | padding: 10px 15px; 224 | border-radius: 10px; 225 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 5%, transparent); 226 | 227 | &:hover { 228 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent); 229 | } 230 | } 231 | 232 | #extensionConnectionProfiles { 233 | width: calc(var(--sheldWidth) - 20px) !important; 234 | transform: translateX(-50%); 235 | left: 50% !important; 236 | right: auto !important; 237 | position: relative !important; 238 | transition: all 0.8s ease; 239 | margin-left: -2.5px; 240 | margin-top: 5px !important; 241 | 242 | @media (max-width: 1000px) { 243 | width: 100% !important; 244 | border-radius: 0 !important; 245 | border: none !important; 246 | border-bottom: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 247 | margin-left: 0; 248 | margin-top: 0 !important; 249 | opacity: 0.65; 250 | } 251 | } 252 | 253 | #extensionTopBar, 254 | #extensionConnectionProfiles { 255 | opacity: 0.8; 256 | transition: all 0.5s ease; 257 | 258 | &:hover { 259 | opacity: 1; 260 | } 261 | } 262 | #extensionSideBar #extensionSideBarContainer { 263 | padding-right: 10px; 264 | } 265 | #extensionSideBar #extensionSideBarContainer .sideBarItem { 266 | letter-spacing: 1px; 267 | opacity: 0.7; 268 | margin-bottom: 5px; 269 | padding: 6px 10px; 270 | background-color: color-mix(in srgb, var(--SmartThemeBodyColor) 5%, transparent); 271 | 272 | &:hover { 273 | background-color: color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 274 | opacity: 9; 275 | } 276 | } 277 | #extensionSideBar #extensionSideBarContainer .sideBarItem .chatStats .counterBlock::after { 278 | color: var(--SmartThemeBodyColor) !important; 279 | font-size: calc(var(--mainFontSize)* 0.85); 280 | } 281 | #extensionSideBar #extensionSideBarContainer .sideBarItem.selected { 282 | background-color: transparent !important; 283 | border-color: var(--customThemeColor); 284 | opacity: 1; 285 | } 286 | 287 | body.waifuMode { 288 | #extensionConnectionProfiles { 289 | border-radius: 10px !important; 290 | margin-bottom: 0px !important; 291 | 292 | @media screen and (max-width: 1000px) { 293 | border-radius: 0 !important; 294 | } 295 | } 296 | } 297 | 298 | /* --- Dialogue Colorizer 對話顏色 --- */ 299 | 300 | .dc-color-picker-wrapper { 301 | border: 0px !important; 302 | } 303 | .dc-color-settings-group { 304 | border: 0px solid var(--SmartThemeBodyColor) !important; 305 | } 306 | 307 | label[for="xdc-char_color_override"] b { 308 | padding: 10px 0; 309 | background-image: none !important; 310 | border-radius: 0px !important; 311 | letter-spacing: 1px; 312 | display: inline-block; 313 | font-weight: bold; 314 | border: none; 315 | } 316 | 317 | /* --- Image Captioning 圖片解析 --- */ 318 | 319 | .mes_img_controls { 320 | .right_menu_button { 321 | color: var(--SmartThemeBodyColor); 322 | text-shadow: 0 0 5px var(--SmartThemeBlurTintColor) !important; 323 | filter: none; 324 | 325 | &:hover { 326 | filter: none; 327 | color: var(--customThemeColor); 328 | text-shadow: 0 0 5px var(--SmartThemeBlurTintColor) !important; 329 | } 330 | } 331 | } 332 | .mes .mes_img_container.img_extra { 333 | border-radius: 10px !important; 334 | } 335 | body.flatchat, 336 | body.bubblechat, 337 | body.ripplestyle { 338 | .mes .mes_img_container { 339 | padding-bottom: 15px; 340 | } 341 | } 342 | 343 | table.img_metadata { 344 | text-align: left; 345 | max-height: 30dvh !important; 346 | border-radius: 10px; 347 | margin-top: 30px !important; 348 | padding: 10px 20px; 349 | } 350 | 351 | .img_enlarged_container { 352 | pre { 353 | max-height: 30dvh; 354 | 355 | code { 356 | text-align: left; 357 | border-radius: 10px; 358 | } 359 | } 360 | } 361 | 362 | /* --- Prome (Visual Novel Extension) 進階視覺小說模式 --- */ 363 | 364 | .promeChatHistoryList { 365 | .mes { 366 | padding: 10px 0 !important; 367 | } 368 | 369 | .mes_text { 370 | text-align: left !important; 371 | padding-right: unset; 372 | padding: 0 5px !important; 373 | } 374 | } 375 | body.bubblechat .promeChatHistoryList { 376 | .mes { 377 | padding: 10px !important; 378 | } 379 | } 380 | 381 | /* --- Quick Persona 使用者快速切換 --- */ 382 | 383 | @media screen and (max-width: 1000px) { 384 | #quickPersona { 385 | margin: 0 calc(var(--bottomFormBlockSize) / 4) !important; 386 | } 387 | } 388 | 389 | #quickPersonaMenu { 390 | backdrop-filter: none !important; 391 | border-radius: 10px !important; 392 | 393 | .list-group { 394 | backdrop-filter: none; 395 | border-radius: 0; 396 | border: 0; 397 | box-shadow: none; 398 | transition: all 0.5s ease; 399 | background-color: unset !important; 400 | opacity: 1; 401 | } 402 | 403 | ul { 404 | gap: 8px; 405 | } 406 | li { 407 | opacity: 1; 408 | transition: all 0.5s ease; 409 | } 410 | } 411 | 412 | .quickPersonaMenuImg { 413 | opacity: 1; 414 | transition: all 0.5s ease; 415 | 416 | &:hover { 417 | box-shadow: 0 0 5px var(--customThemeColor); 418 | filter: brightness(1.1); 419 | } 420 | &.default { 421 | outline-color: var(--customThemeColor) !important; 422 | } 423 | } 424 | 425 | /* --- Codex 法典 --- */ 426 | 427 | .stcdx--root { 428 | top: var(--topBarBlockSize) !important; 429 | padding: 1%; 430 | border-radius: 0px !important; 431 | 432 | > .stcdx--content.stcdx--entry { 433 | section { 434 | padding: 10px; 435 | } 436 | } 437 | 438 | > .stcdx--content, 439 | > .stcdx--editor { 440 | text-align: left !important; 441 | } 442 | } 443 | 444 | /* --- More Flexible Continues 彈性回覆 --- */ 445 | .mes[is_system="false"]:has(.lacommon--quickActions[data-lacommon--anchor="bottom"]) .mes_block { 446 | padding-bottom: 25px !important; 447 | } 448 | body.bubblechat .mes[is_user="true"]:has(.lacommon--quickActions[data-lacommon--anchor="bottom"]) .mes_block { 449 | padding-bottom: 0 !important; 450 | 451 | @media screen and (max-width: 1000px) { 452 | padding-bottom: 25px !important; 453 | } 454 | } 455 | body.echostyle, 456 | body.tidestyle { 457 | .mes:has(.lacommon--quickActions[data-lacommon--anchor="bottom"]) .mes_block { 458 | padding-bottom: 0 !important; 459 | } 460 | } 461 | .lacommon--quickActions[data-lacommon--anchor="bottom"] { 462 | bottom: 25px; 463 | left: calc(var(--custom-ChatAvatar, 40px) + 50px); 464 | } 465 | body.flatchat { 466 | .lacommon--quickActions[data-lacommon--anchor="bottom"] { 467 | bottom: 22px; 468 | left: calc(var(--custom-ChatAvatar, 40px) + 35px); 469 | } 470 | } 471 | body.bubblechat { 472 | .lacommon--quickActions[data-lacommon--anchor="bottom"] { 473 | bottom: 12px; 474 | left: calc(var(--custom-ChatAvatar, 40px) + 45px); 475 | } 476 | 477 | .mes[is_user="true"] { 478 | .lacommon--quickActions[data-lacommon--anchor="bottom"] { 479 | left: 0; 480 | 481 | @media screen and (max-width: 1000px) { 482 | left: calc(var(--custom-ChatAvatar, 40px) - 5px); 483 | } 484 | } 485 | } 486 | } 487 | body.tidestyle { 488 | .lacommon--quickActions[data-lacommon--anchor="bottom"] { 489 | bottom: 10px; 490 | left: 0; 491 | } 492 | } 493 | 494 | .mfc--ctx-blocker:has(.mfc--tree) { 495 | > .mfc--tree { 496 | min-width: calc(var(--sheldWidth) - 15%) !important; 497 | width: calc(var(--sheldWidth) - 15%) !important; 498 | max-width: calc(var(--sheldWidth) - 15%) !important; 499 | max-height: calc(80vh - 1em - var(--triggerTop)); 500 | background-color: var(--SmartThemeBlurTintColor); 501 | white-space: normal; 502 | word-wrap: break-word; 503 | overflow: auto; 504 | border-radius: 15px; 505 | padding: 10px 15px; 506 | backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); 507 | transition: all 0.5s ease; 508 | 509 | &.mfc--flipV { 510 | top: unset; 511 | bottom: calc(100vh - var(--triggerTop)); 512 | max-height: 75dvh !important; 513 | } 514 | } 515 | 516 | @media screen and (max-width: 1000px) { 517 | > .mfc--tree { 518 | min-width: 60dvw !important; 519 | max-width: 60dvw !important; 520 | } 521 | } 522 | 523 | .mfc--treeText { 524 | white-space: pre-line; 525 | padding: 10px 15px; 526 | 527 | &:hover { 528 | text-decoration: none !important; 529 | } 530 | } 531 | 532 | .mfc--active { 533 | > .mfc--tree { 534 | border: 1.5px solid var(--customThemeColor); 535 | 536 | > .mfc--treeText { 537 | font-weight: bold; 538 | } 539 | } 540 | } 541 | } 542 | 543 | body.mes:has(.lacommon--quickActions) { 544 | margin-left: 20px; 545 | align-items: center !important; 546 | 547 | &[data-lacommon--anchor="bottom"] { 548 | position: absolute; 549 | bottom: 20px !important; 550 | left: calc(var(--custom-ChatAvatar, 40px) + 2% + 50px) !important; 551 | display: flex; 552 | gap: 0.5em; 553 | margin: 5px 0; 554 | } 555 | } 556 | body.echostyle .lacommon--quickActions[data-lacommon--anchor="bottom"], 557 | body.echostyle .last_mes .lacommon--quickActions[data-lacommon--anchor="bottom"] { 558 | left: 0 !important; 559 | bottom: 10px !important; 560 | } 561 | body.whisperstyle .lacommon--quickActions[data-lacommon--anchor="bottom"], 562 | body.whisperstyle .last_mes .lacommon--quickActions[data-lacommon--anchor="bottom"], 563 | body.hushstyle .lacommon--quickActions[data-lacommon--anchor="bottom"], 564 | body.hushstyle .last_mes .lacommon--quickActions[data-lacommon--anchor="bottom"], 565 | body.ripplestyle .lacommon--quickActions[data-lacommon--anchor="bottom"], 566 | body.ripplestyle .last_mes .lacommon--quickActions[data-lacommon--anchor="bottom"] { 567 | left: var(--customMesPadding) !important; 568 | bottom: 15px !important; 569 | } 570 | body.hideChatAvatars .lacommon--quickActions[data-lacommon--anchor="bottom"], 571 | body.hideChatAvatars .last_mes .lacommon--quickActions[data-lacommon--anchor="bottom"] { 572 | bottom: 30px !important; 573 | } 574 | body.documentstyle .lacommon--quickActions[data-lacommon--anchor="bottom"], 575 | body.documentstyle .last_mes .lacommon--quickActions[data-lacommon--anchor="bottom"] { 576 | left: 0 !important; 577 | bottom: 0 !important; 578 | margin: 0 !important; 579 | margin-bottom: 1px !important; 580 | } 581 | 582 | .mfc--root { 583 | display: flex; 584 | align-items: center; 585 | height: 100%; 586 | 587 | .mfc--undo, 588 | .mfc--regen, 589 | .mfc--swipes, 590 | .mfc--cont, 591 | .mfc--fav { 592 | font-family: "Font Awesome 6 Free"; 593 | font-weight: 900; 594 | font-size: 1em; 595 | color: inherit; 596 | margin-right: 10px; 597 | opacity: 0.5; 598 | transition: all 0.5s ease; 599 | 600 | &:hover { 601 | opacity: 1 !important; 602 | } 603 | } 604 | 605 | .mfc--undo::before { 606 | content: "\f3e5"; 607 | } 608 | .mfc--regen::before { 609 | content: "\f021"; 610 | } 611 | .mfc--swipes::before { 612 | content: "\f4ad"; 613 | } 614 | .mfc--cont::before { 615 | content: "\f178"; 616 | } 617 | .mfc--fav::before { 618 | content: "\f004"; 619 | } 620 | 621 | .mfc--action { 622 | visibility: hidden; 623 | position: relative; 624 | 625 | &::before { 626 | visibility: visible; 627 | position: absolute; 628 | left: 0; 629 | } 630 | } 631 | } 632 | 633 | /* --- Custom Theme Style Inputs 自定義樣式輸入 --- */ 634 | 635 | .ctsi-flex-container { 636 | display: flex; 637 | flex-direction: column; 638 | align-items: stretch; 639 | } 640 | 641 | .ctsi-button-container { 642 | padding: 5px; 643 | } 644 | 645 | 646 | /* --- Notebook 筆記本 --- */ 647 | 648 | #notebookPanel { 649 | top: var(--topBarBlockSize) !important; 650 | max-height: calc(100dvh - var(--topBarBlockSize)) !important; 651 | height: calc(100dvh - var(--topBarBlockSize)) !important; 652 | padding-top: 30px; 653 | padding-left: 1.2%; 654 | padding-right: 1.2%; 655 | border-radius: 0; 656 | border: 0 !important; 657 | border-top: 1.25px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 658 | } 659 | 660 | /* --- Qvink Memory 進階聊天記憶 --- */ 661 | 662 | .qvink_memory_display.qvink_short_memory { 663 | color: var(--customThemeColor2) !important; 664 | } 665 | 666 | body.bubblechat .qvink_memory_display { 667 | margin-bottom: 20px !important; 668 | } 669 | 670 | /* --- Typing Indicator 角色打字提示 --- */ 671 | 672 | .typing_indicator { 673 | position: sticky; 674 | bottom: 0; 675 | margin: 5px; 676 | font-size: small; 677 | letter-spacing: 0.6px; 678 | opacity: 1 !important; 679 | text-shadow: 0 0 5px var(--SmartThemeBlurTintColor) !important; 680 | width: fit-content; 681 | } 682 | 683 | /* --- Dialogue Colorizer 自定義對話顏色 --- */ 684 | 685 | #xdc-char_color_override, 686 | #xdc-persona_color_override { 687 | label { 688 | font-weight: 600; 689 | letter-spacing: 0.8px; 690 | } 691 | } 692 | 693 | /* --- SimpleQRBarToggle 快速回覆彈出按鈕 --- */ 694 | 695 | #qr_toggle_button { 696 | font-size: calc(var(--mainFontSize) * 0.9); 697 | width: calc(var(--mainFontSize) * 0.9) !important; 698 | height: calc(var(--mainFontSize) * 0.9) !important; 699 | margin-right: calc((var(--mainFontSize) * 0.9) / 2) !important; 700 | 701 | @media screen and (max-width: 1000px) { 702 | height: var(--bottomFormBlockSize) !important; 703 | margin-right: unset !important; 704 | } 705 | } 706 | #qr--bar.sqrbt-toggle_button-collapsed { 707 | margin-top: 0 !important; 708 | } 709 | 710 | /* --- Quick Context Buttons 快速上下文按鈕 --- */ 711 | 712 | .quick_context_size_container { 713 | flex-wrap: wrap !important; 714 | width: fit-content !important; 715 | gap: 2px 8px !important; 716 | margin-top: 15px; 717 | margin-bottom: 10px; 718 | } 719 | .quick_context_size { 720 | flex: 1; 721 | font-size: 0.8em; 722 | padding: 5px 8px !important; 723 | align-items: baseline; 724 | min-width: unset; 725 | min-height: unset; 726 | margin: 0; 727 | margin-bottom: 5px; 728 | } 729 | .quick_context_size small { 730 | margin-left: 2px; 731 | } 732 | 733 | /* --- Char Switch 角色切換 --- */ 734 | 735 | #rightNavHolder { 736 | @media screen and (max-width: 1000px) { 737 | margin-left: 5px; 738 | } 739 | 740 | #unimportantYes { 741 | height: calc(var(--mainFontSize) * 1.45); 742 | width: calc(var(--mainFontSize) * 1.45); 743 | transition: all 0.5s ease; 744 | } 745 | } 746 | body.stcs--nonDiscord .stcs--ctxBlocker > .stcs--ctxMenu { 747 | padding: 5px 8px; 748 | font-size: calc(var(--mainFontSize)); 749 | transition: all 0.5s ease !important; 750 | } 751 | .stcs--ctxBlocker > .stcs--ctxMenu > .stcs--ctxItem { 752 | gap: 10px !important; 753 | } 754 | .stcs--ctxBlocker > .stcs--ctxMenu > .stcs--ctxItem.stcs--fav > .stcs--ctxAvatar { 755 | outline: 1px solid var(--customThemeColor) !important; 756 | } 757 | .stcs--ctxBlocker > .stcs--ctxMenu > .stcs--ctxItem.stcs--fav > .stcs--ctxName { 758 | color: var(--customThemeColor) !important; 759 | 760 | &::before { 761 | content: "♥︎"; 762 | color: var(--customThemeColor); 763 | margin-right: 5px; 764 | animation: pulse 1s infinite; 765 | } 766 | } 767 | 768 | /* --- WorldInfo Info 世界資訊資訊欄 --- */ 769 | 770 | .stwii--trigger { 771 | top: 6px; 772 | left: 20px !important; 773 | bottom: unset !important; 774 | font-size: calc(var(--mainFontSize) * 1.45) !important; 775 | 776 | @media screen and (max-width: 1000px) { 777 | bottom: calc(var(--formSheldHeight)) !important; 778 | top: auto !important; 779 | left: 8px !important; 780 | margin-bottom: 10px; 781 | margin-left: 5px; 782 | z-index: 100 !important; 783 | } 784 | } 785 | @media screen and (max-width: 1000px) { 786 | body:has(.stwii--trigger):not(.waifuMode) .typing_indicator { 787 | left: 40px !important; 788 | } 789 | body.waifuMode .stwii--trigger { 790 | bottom: auto !important; 791 | top: calc(var(--topBarBlockSize) + 10px) !important; 792 | } 793 | body.waifuMode:has(#extensionTopBar) .stwii--trigger { 794 | top: calc(var(--topBarBlockSize) + 50px) !important; 795 | } 796 | body:not(.waifuMode) { 797 | .stwii--trigger { 798 | bottom: calc(var(--formSheldHeight)) !important; 799 | top: auto !important; 800 | } 801 | } 802 | } 803 | 804 | .stwii--panel { 805 | box-shadow: 0 0 25px color-mix(in srgb, var(--SmartThemeBlurTintColor) 80%, transparent); 806 | border: 1px solid var(--SmartThemeBorderColor); 807 | margin-bottom: -10px !important; 808 | max-width: 80dvw !important; 809 | max-height: 70dvh !important; 810 | backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); 811 | } 812 | -------------------------------------------------------------------------------- /i18n/zh-cn.json: -------------------------------------------------------------------------------- 1 | { 2 | "Moonlit Echoes Theme Presets": "Moonlit Echoes 主题默认", 3 | "Primary Theme Color": "主要主题颜色", 4 | "The main interface theme color, used for highlights and accents": "最主要的界面主题颜色，用于强调和点缀", 5 | "Secondary Theme Color": "次要主题颜色", 6 | "A complementary secondary color, used for special highlights": "用于辅助主要颜色的次要颜色，用于特殊提示等", 7 | "Top Menu Color": "顶部选单颜色", 8 | "Background color of the top menu (#top-bar)": "顶部选单（#top-bar）的背景颜色", 9 | "Menu Icon Color": "选单图示颜色", 10 | "Color of icons in the top menu, sidebar, and dropdown menus": "顶部选单、侧边栏和选单中图示的颜色", 11 | "Chat Field Background Color": "聊天栏位背景颜色", 12 | "Background color of the chat field (#sheld)": "聊天栏位（#sheld）的背景色", 13 | "Background Blur Intensity": "背景图片模糊强度", 14 | "Adjusts the blur level of the background image": "设定背景图片的模糊程度", 15 | "Chat Field Background Blur Intensity": "聊天栏位背景模糊强度", 16 | "Blur level of the chat field background (#sheld)": "聊天栏位（#sheld）背景的模糊程度", 17 | "Chat Field Gradient Blur": "聊天栏位渐变模糊", 18 | "Subtle": "轻微", 19 | "Applies a transparent gradient effect to the top and bottom of the chat field (#chat)": "聊天栏位（#chat）顶部和底部的透明渐变效果", 20 | "Chat Field Avatar Size": "聊天栏位头像宽高", 21 | "Width and height of character avatars in the chat field": "聊天栏位中所有角色头像的宽度和高度", 22 | "[Echo] Message Background Avatar Width": "[Echo] 信息背景头像宽度", 23 | "Width of character avatars in the message background for the Echo style": "Echo 风格中信息背景中角色的头像宽度", 24 | "[Whisper] Message Background Avatar Width": "[Whisper] 信息背景头像宽度", 25 | "Width of character avatars in the message background for the Whisper style": "Whisper 风格中信息背景中角色的头像宽度", 26 | "[Whisper] Avatar Alignment": "[Whisper] 头像对齐位置", 27 | "Top Aligned": "顶部对齐", 28 | "Center Aligned": "置中对齐", 29 | "Bottom Aligned": "底部对齐", 30 | "Vertical alignment of character avatars in the message background for the Whisper style": "Whisper 风格中，信息背景中角色头像的垂直对齐位置", 31 | "Visual Novel Mode Chat Field Height": "视觉小说模式聊天栏位高度", 32 | "Maximum height of the chat field (#sheld) in Visual Novel mode": "视觉小说模式中，聊天栏位（#sheld）的最大高度", 33 | "Visual Novel Mode Character Portrait Gradient Transparency": "视觉小说模式角色立绘渐层透明", 34 | "Bottom transparency effect for character portraits in Visual Novel mode": "视觉小说模式中，角色立绘的底部透明效果", 35 | "Enable New Mobile Input Field": "启用新版移动设备信息输入栏位", 36 | "A message input field designed for mobile, providing a wider input box": "专为移动设备设计的信息输入栏位，输入框更宽", 37 | "Enable Moonlit Echoes Theme": "启用 Moonlit Echoes Theme", 38 | "Echo": "Echo（回声）", 39 | "Whisper": "Whisper（低语）", 40 | "Hush": "Hush（寂静）", 41 | "Tide": "Tide（潮汐）", 42 | "Theme Color Settings": "主题颜色设定", 43 | "Background Settings": "背景设定", 44 | "Chat Interface": "聊天界面", 45 | "Visual Novel Mode": "视觉小说模式", 46 | "General Settings": "一般设定", 47 | "Advanced Settings": "进阶设定", 48 | "You are currently using the third-party extension theme": "您目前正在使用第三方扩充主题", 49 | "Thank you for choosing my theme! This extension is unofficial. For issues, please contact": "感谢您选择我所制作的主题！此扩充主题与 SillyTavern 官方无关。如遇问题，请联系", 50 | "customThemeIssue": "此扩充主题与 SillyTavern 官方无关，且可能无法兼容所有自定义主题。如遇问题，请先自行排查；若确认问题由此扩充主题引起，请联系", 51 | "Invalid Moonlit Echoes theme preset format": "无效的 Moonlit Echoes 月下回声主题默认设定档格式", 52 | "Moonlit Echoes theme preset \"${0}\" not found": "未找到月下回声主题默认设定档「${0}」", 53 | "Moonlit Echoes theme preset \"${0}\" exported successfully": "月下回声主题默认设定档「${0}」汇出成功", 54 | "Moonlit Echoes theme preset \"${0}\" updated successfully": "月下回声主题默认设定档「${0}」更新成功", 55 | "Save New Moonlit Echoes Theme Preset": "储存新的月下回声默认设定档", 56 | "Please enter a name for your new Moonlit Echoes theme preset:": "请输入新主题默认设定档名称：", 57 | "Confirm Overwrite": "确认覆盖", 58 | "A preset named \"${0}\" already exists. Do you want to overwrite it?": "已存在名称为「${0}」的默认设定档，是否要覆盖？", 59 | "Preset \"${0}\" saved successfully": "月下回声主题默认设定档「${0}」储存成功", 60 | "Cannot delete the only preset": "无法删除唯一的默认设定档", 61 | "Cannot delete the Moonlit Echoes theme preset": "无法删除月下回声主题默认设定档「Moonlit Echoes」", 62 | "File input element not found": "找不到档案输入元素", 63 | "Invalid Moonlit Echoes theme preset file format": "无效的月下回声主题默认设定档档案格式", 64 | "Delete Theme Preset": "删除主题默认设定档", 65 | "Are you sure you want to delete the preset \"${0}\"?": "是否确定删除「${0}」主题默认设定档？", 66 | "Preset \"${0}\" imported successfully": "月下回声主题默认设定档「${0}」汇入成功", 67 | "Import Preset": "汇入默认设定档", 68 | "Export Preset": "汇出默认设定档", 69 | "Update Current Preset": "更新默认设定档", 70 | "Save as New Preset": "另存新默认设定档", 71 | "Delete Preset": "删除默认设定档", 72 | "Error importing preset:": "汇入时发生错误：", 73 | "Blurry or thumbnail-sized character images in chat?": "角色图片显示略缩图／模糊？", 74 | "SillyTavern's default thumbnail scaling causes avatars to use lower-resolution images. fix this, edit": "由于 SillyTavern 默认启用略缩图缩放，这将导致角色头像使用略缩图。请修改", 75 | "and fully restart the SillyTavern server.": "中的设定并完全重启 SillyTavern 服务器。", 76 | "Recommended settings (please scroll):": "推荐设定（请滚动）：", 77 | "Ripple": "Ripple（涟漪）", 78 | "[Ripple] Message Avatar Width": "[Ripple] 信息头像宽度", 79 | "Width of character avatars in the message for the Ripple style": "Ripple 风格中，信息中角色头像的宽度", 80 | "[Ripple] Mobile Message Avatar Width": "[Ripple] 移动设备信息头像宽度", 81 | "Width of character avatars in the message for the mobile Ripple style": "Ripple 移动设备风格中，信息中角色头像的宽度", 82 | "Hide Additional Message Details": "隐藏信息额外资料详情", 83 | "Message additional details (name, ID, time, token counter, etc.) show only on hover or click": "仅在光标悬停或点选时显示信息额外详情（角色名称、ID、时间、符元计数器⋯等）", 84 | "Preset \"${0}\" deleted successfully": "已成功删除「${0}」月下回声主题默认设定档", 85 | "Message Details Animation Duration": "信息详情动画时长", 86 | "Controls the animation speed for message details appearing/disappearing (e.g. 0.5s, 1.2s)": "控制信息额外详细资讯出现／消失的动画速度（如：0.5 秒、1.2 秒）", 87 | "Scrollbar Color": "卷轴颜色", 88 | "The scrollbar color on SillyTavern": "SillyTavern 上的卷轴颜色", 89 | "Maximum Context Marker Style": "最大上下文标记样式", 90 | "Line style for the maximum context marker": "最大上下文标记的线条样式", 91 | "Main Background Color": "主要背景色", 92 | "The primary background color used across various menus and buttons": "适用于多个选单、按钮的主要背景颜色", 93 | "Secondary Background Color": "次要背景色", 94 | "The secondary background color used across various menus and buttons": "适用于多个选单、按钮的次要背景颜色", 95 | "Background Image Opacity": "背景图片透明度", 96 | "Adjusts the opacity level of the background image": "调整背景图片的透明程度", 97 | "[Echo] Message Background Avatar Height": "[Echo] 信息背景头像高度", 98 | "Height of character avatars in the message background for the Echo style": "Echo 风格中信息背景角色头像的高度", 99 | "Justify Paragraph Text": "段落文字左右对齐", 100 | "Aligns paragraph text for Chinese, Japanese, and Korean for better readability; not suitable for English layout": "适用于中、日、韩等文字，使段落文字更整齐；不适用于英语", 101 | "Please refer to the": "请参阅", 102 | "and complete the necessary setup.": "并完成对应的设定。", 103 | "Fix Tablet Menu Layout": "修复平板选单布局", 104 | "Optimized for tablet users to prevent menu layout issues. Note: Tablet support in SillyTavern is currently limited and may not address all issues": "修复平板横放时，主要选单出现的问题。请注意：目前 SillyTavern 对平板电脑的支援有限，可能无法解决所有问题", 105 | "Enable Mobile Hidden Scrollbar": "在移动设备上隐藏卷轴", 106 | "Hides scrollbars for a clean mobile interface": "在移动设备的屏幕上隐藏卷轴，提供更简洁流畅的界面。", 107 | "Apply Theme Colors to More UI Elements": "将主题颜色应用于更多 UI 元素", 108 | "Applies theme colors to more parts of the UI for a more personalized look": "将主题颜色应用于 UI 的更多部分，以实现更个性化的外观", 109 | "Enable Horizontal HotSwap Scroll on Mobile": "快速角色选单在移动设备上使用水平卷动", 110 | "Allows horizontal scrolling for the quick character selection menu (#HotSwapWrapper) on mobile": "在移动设备上对快速角色选单（#HotSwapWrapper）使用水平卷动", 111 | "Increase Chat Input Field Spacing on Desktop & Tablet": "在桌面与平板装置上增加聊天输入栏间距", 112 | "Add extra bottom margin to chat input fields on larger screens (tablets and desktops)": "在较大屏幕（平板与桌面）上的聊天输入栏底部新增额外间距", 113 | "Increase Chat Input Field Spacing on Mobile": "在移动设备上增加聊天输入栏间距", 114 | "Add extra bottom padding to chat input fields on mobile devices (screen width ≤ 1000px)": "在屏幕宽度 ≤ 1000px 的移动设备上，为聊天输入栏添加额外底部填充", 115 | "[Echo] Mobile Message Background Avatar Width": "[Echo] 手机端信息背景头像宽度", 116 | "Width of character avatars in the message background for the Echo style on mobile devices": "Echo 风格中手机装置信息背景角色头像的宽度", 117 | "[Echo] Mobile Message Background Avatar Height": "[Echo] 手机端信息背景头像高度", 118 | "Height of character avatars in the message background for the Echo style on mobile devices": "Echo 风格中手机装置信息背景角色头像的高度", 119 | "Hide Mobile Echo-Style Message Background": "隐藏手机端 Echo 风格信息背景插图", 120 | "Hide the echo-style background illustration for character messages on mobile devices": "在移动设备上隐藏角色信息的 Echo 风格角色信息背景插图", 121 | "Disable All Border Radius": "完全禁用圆角效果", 122 | "Completely disable all border-radius and outline-radius effects throughout the UI": "在整个界面中完全禁用所有圆角与外框圆角效果", 123 | "Hide Avatar Border": "隐藏角色头像边框", 124 | "Hide the border around character avatars in chat messages": "隐藏聊天信息中角色的头像边框", 125 | "Move QRs Bar Below Input on Mobile": "在移动设备上将 QRs 选单移至输入栏位下方", 126 | "On mobile devices (screen width ≤ 1000px), move the QRs menu below the chat input to avoid interference from message input": "在移动设备（屏幕宽度 ≤ 1000px）上，将 QRs 选单改到下方。避免受信息输入影响。", 127 | "Mobile QRs Bar Height": "移动设备 QRs 选单高度", 128 | "Sets the maximum number of visible rows in the QRs bar on mobile devices (supports scrolling)": "设定移动设备上 QRs 选单的最大可见行数（支持卷轴）", 129 | "Compact (1 row)": "紧凑（1 行）", 130 | "Default (2 rows)": "默认（2 行）", 131 | "Extended (3 rows)": "宽松（3 行）", 132 | "Message Paragraph Spacing": "信息段落间距", 133 | "Sets the spacing between paragraphs in chat messages (e.g. 0.5em, 1em)": "设定聊天信息的段落间距（如：0.5em、1em）", 134 | "Core Settings": "核心设定", 135 | "Background Effects": "背景效果", 136 | "Theme Extras": "主题额外功能", 137 | "General Chat Settings": "一般聊天设定", 138 | "Echo Style Settings": "Echo 风格设定", 139 | "Whisper Style Settings": "Whisper 风格设定", 140 | "Ripple Style Settings": "Ripple 风格设定", 141 | "[Echo] Hide Message Background on Mobile": "[Echo] 在移动设备上隐藏信息背景", 142 | "Hide message background illustrations on mobile for the Echo style": "隐藏移动设备上 Echo 信息风格中的背景插图", 143 | "Mobile Devices": "移动设备", 144 | "Mobile Global Settings": "移动设备全域设定", 145 | "Mobile Detailed Settings": "移动设备细部设定", 146 | "Open Moonlit Echoes Theme Settings": "开启 Moonlit Echoes 主题设定选单", 147 | "Chat Style Slash Commands": "聊天风格斜线指令", 148 | "Available commands:": "可用指令：", 149 | "SillyTavern Safe Switch Commands:": "SillyTavern 安全切换指令：", 150 | "Switch to Echo style": "切换至 Echo（回声）风格", 151 | "Switch to Whisper style": "切换至 Whisper（低语）风格", 152 | "Switch to Hush style": "切换至 Hush（寂静）风格", 153 | "Switch to Ripple style": "切换至 Ripple（涟漪）风格", 154 | "Switch to Tide style": "切换至 Tide（潮汐）风格", 155 | "Moonlit Echoes Styles:": "Moonlit Echoes 风格：", 156 | "SillyTavern Built-in Styles:": "SillyTavern 内置风格：", 157 | "Switch to Flat style": "切换至 Flat（扁平）风格", 158 | "Switch to Bubble style": "切换至 Bubble（气泡）风格", 159 | "Switch to Document style": "切换至 Document（文件）风格", 160 | "For more commands, see": "想了解更多指令，请参阅：", 161 | "STscript Reference": "STscript 语言参考", 162 | "Apply Theme Color to Message Avatar Border": "将角色主题颜色套用至信息头像边框", 163 | "Applies each character’s theme color to message avatar borders. Requires the Character Style Customizer; per-character colors override global settings": "将个别角色主题颜色套用至信息头像边框。需使用「Character Style Customizer」扩充，个别角色颜色优先于全域设定", 164 | "Mobile Chat Field Background Blur Intensity": "移动设备聊天栏位背景模糊强度", 165 | "Blur level of the chat field background on mobile devices (#sheld)": "移动设备上聊天栏位（#sheld）背景的模糊程度", 166 | "Dynamically Adjust Menu Max Height": "动态调整选单最大高度", 167 | "Dynamically adjust the menu’s maximum height based on the message input field. May not work on all devices—disable this option if the menu doesn’t close properly": "按信息输入栏位高度动态调整选单最大高度。可能不适用所有设备；若无法正常关闭选单，请停用此选项", 168 | "Apply Theme Color to Message Background (Experimental)": "将角色主题颜色套用至信息背景（实验性）", 169 | "Applies each character’s theme color to their message background. Requires the Character Style Customizer; per-character colors override global settings": "将个别角色主题颜色套用至信息背景。需使用「Character Style Customizer」扩充，个别角色颜色优先于全域设定", 170 | "Display LLM Icon in Reasoning Block": "在推理区块显示 LLM 图示", 171 | "Shows the LLM icon in the reasoning block header for clearer identification": "在推理区块标题中显示 LLM 图示，以便更清晰地识别" 172 | } 173 | -------------------------------------------------------------------------------- /i18n/zh-tw.json: -------------------------------------------------------------------------------- 1 | { 2 | "Moonlit Echoes Theme Presets": "Moonlit Echoes 主題預設", 3 | "Primary Theme Color": "主要主題顏色", 4 | "The main interface theme color, used for highlights and accents": "最主要的介面主題顏色，用於強調和點綴", 5 | "Secondary Theme Color": "次要主題顏色", 6 | "A complementary secondary color, used for special highlights": "用於輔助主要顏色的次要顏色，用於特殊提示等", 7 | "Top Menu Color": "頂部選單顏色", 8 | "Background color of the top menu (#top-bar)": "頂部選單（#top-bar）的背景顏色", 9 | "Menu Icon Color": "選單圖示顏色", 10 | "Color of icons in the top menu, sidebar, and dropdown menus": "頂部選單、側邊欄和選單中圖示的顏色", 11 | "Chat Field Background Color": "聊天欄位背景顏色", 12 | "Background color of the chat field (#sheld)": "聊天欄位（#sheld）的背景色", 13 | "Background Blur Intensity": "背景圖片模糊強度", 14 | "Adjusts the blur level of the background image": "設定背景圖片的模糊程度", 15 | "Chat Field Background Blur Intensity": "聊天欄位背景模糊強度", 16 | "Blur level of the chat field background (#sheld)": "聊天欄位（#sheld）背景的模糊程度", 17 | "Chat Field Gradient Blur": "聊天欄位漸變模糊", 18 | "Subtle": "輕微", 19 | "Applies a transparent gradient effect to the top and bottom of the chat field (#chat)": "聊天欄位（#chat）頂部和底部的透明漸變效果", 20 | "Chat Field Avatar Size": "聊天欄位頭像寬高", 21 | "Width and height of character avatars in the chat field": "聊天欄位中所有角色頭像的寬度和高度", 22 | "[Echo] Message Background Avatar Width": "[Echo] 訊息背景頭像寬度", 23 | "Width of character avatars in the message background for the Echo style": "Echo 風格中訊息背景中角色的頭像寬度", 24 | "[Whisper] Message Background Avatar Width": "[Whisper] 訊息背景頭像寬度", 25 | "Width of character avatars in the message background for the Whisper style": "Whisper 風格中訊息背景中角色的頭像寬度", 26 | "[Whisper] Avatar Alignment": "[Whisper] 頭像對齊位置", 27 | "Top Aligned": "頂部對齊", 28 | "Center Aligned": "置中對齊", 29 | "Bottom Aligned": "底部對齊", 30 | "Vertical alignment of character avatars in the message background for the Whisper style": "Whisper 風格中，訊息背景中角色頭像的垂直對齊位置", 31 | "Visual Novel Mode Chat Field Height": "視覺小說模式聊天欄位高度", 32 | "Maximum height of the chat field (#sheld) in Visual Novel mode": "視覺小說模式中，聊天欄位（#sheld）的最大高度", 33 | "Visual Novel Mode Character Portrait Gradient Transparency": "視覺小說模式角色立繪漸層透明", 34 | "Bottom transparency effect for character portraits in Visual Novel mode": "視覺小說模式中，角色立繪的底部透明效果", 35 | "Enable New Mobile Input Field": "啟用新版行動裝置訊息輸入欄位", 36 | "A message input field designed for mobile, providing a wider input box": "專為行動裝置設計的訊息輸入欄位，輸入框更寬", 37 | "Enable Moonlit Echoes Theme": "啟用 Moonlit Echoes Theme", 38 | "Echo": "Echo（回聲）", 39 | "Whisper": "Whisper（低語）", 40 | "Hush": "Hush（寂静）", 41 | "Tide": "Tide（潮汐）", 42 | "Theme Color Settings": "主題顏色設定", 43 | "Background Settings": "背景設定", 44 | "Chat Interface": "聊天介面", 45 | "Visual Novel Mode": "視覺小說模式", 46 | "General Settings": "一般設定", 47 | "Advanced Settings": "進階設定", 48 | "You are currently using the third-party extension theme": "您目前正在使用第三方擴充主題", 49 | "Thank you for choosing my theme! This extension is unofficial. For issues, please contact": "感謝您選擇我所製作的主題！此擴充主題與 SillyTavern 官方無關。如遇問題，請聯繫", 50 | "customThemeIssue": "此擴充主題與 SillyTavern 官方無關，且可能無法兼容所有自定義主題。如遇問題，請先自行排查；若確認問題由此擴充主題引起，請聯繫", 51 | "Invalid Moonlit Echoes theme preset format": "無效的 Moonlit Echoes 月下回聲主題預設設定檔格式", 52 | "Moonlit Echoes theme preset \"${0}\" not found": "未找到月下回聲主題預設設定檔「${0}」", 53 | "Moonlit Echoes theme preset \"${0}\" exported successfully": "月下回聲主題預設設定檔「${0}」匯出成功", 54 | "Moonlit Echoes theme preset \"${0}\" updated successfully": "月下回聲主題預設設定檔「${0}」更新成功", 55 | "Save New Moonlit Echoes Theme Preset": "儲存新的月下回聲預設設定檔", 56 | "Please enter a name for your new Moonlit Echoes theme preset:": "請輸入新主題預設設定檔名稱：", 57 | "Confirm Overwrite": "確認覆蓋", 58 | "A preset named \"${0}\" already exists. Do you want to overwrite it?": "已存在名稱為「${0}」的預設設定檔，是否要覆蓋？", 59 | "Preset \"${0}\" saved successfully": "月下回聲主題預設設定檔「${0}」儲存成功", 60 | "Cannot delete the only preset": "無法刪除唯一的預設設定檔", 61 | "Cannot delete the Moonlit Echoes theme preset": "無法刪除月下回聲主題預設設定檔「Moonlit Echoes」", 62 | "File input element not found": "找不到檔案輸入元素", 63 | "Invalid Moonlit Echoes theme preset file format": "無效的月下回聲主題預設設定檔檔案格式", 64 | "Delete Theme Preset": "刪除主題預設設定檔", 65 | "Are you sure you want to delete the preset \"${0}\"?": "是否確定刪除「${0}」主題預設設定檔？", 66 | "Preset \"${0}\" imported successfully": "月下回聲主題預設設定檔「${0}」匯入成功", 67 | "Import Preset": "匯入預設設定檔", 68 | "Export Preset": "匯出預設設定檔", 69 | "Update Current Preset": "更新預設設定檔", 70 | "Save as New Preset": "另存新預設設定檔", 71 | "Delete Preset": "刪除預設設定檔", 72 | "Error importing preset:": "匯入時發生錯誤：", 73 | "Blurry or thumbnail-sized character images in chat?": "角色圖片顯示縮圖／模糊？", 74 | "SillyTavern's default thumbnail scaling causes avatars to use lower-resolution images. fix this, edit": "由於 SillyTavern 預設啟用縮圖縮放，這將導致角色頭像使用縮圖。請修改", 75 | "and fully restart the SillyTavern server.": "中的設定並完全重啟 SillyTavern 伺服器。", 76 | "Recommended settings (please scroll):": "推薦設定（請滾動）：", 77 | "Ripple": "Ripple（漣漪）", 78 | "[Ripple] Message Avatar Width": "[Ripple] 訊息頭像寬度", 79 | "Width of character avatars in the message for the Ripple style": "Ripple 風格中，訊息中角色頭像的寬度", 80 | "[Ripple] Mobile Message Avatar Width": "[Ripple] 行動裝置訊息頭像寬度", 81 | "Width of character avatars in the message for the mobile Ripple style": "Ripple 行動裝置風格中，訊息中角色頭像的寬度", 82 | "Hide Additional Message Details": "隱藏訊息額外資料詳情", 83 | "Message additional details (name, ID, time, token counter, etc.) show only on hover or click": "僅在游標懸停或點選時顯示訊息額外詳情（角色名稱、ID、時間、符元計數器⋯等）", 84 | "Preset \"${0}\" deleted successfully": "已成功刪除「${0}」月下回聲主題預設設定檔", 85 | "Message Details Animation Duration": "訊息詳情動畫時長", 86 | "Controls the animation speed for message details appearing/disappearing (e.g. 0.5s, 1.2s)": "控制訊息額外詳細資訊出現／消失的動畫速度（如：0.5 秒、1.2 秒）", 87 | "Scrollbar Color": "捲軸顏色", 88 | "The scrollbar color on SillyTavern": "SillyTavern 上的捲軸顏色", 89 | "Maximum Context Marker Style": "最大上下文標記樣式", 90 | "Line style for the maximum context marker": "最大上下文標記的線條樣式", 91 | "Main Background Color": "主要背景色", 92 | "The primary background color used across various menus and buttons": "適用於多個選單、按鈕的主要背景顏色", 93 | "Secondary Background Color": "次要背景色", 94 | "The secondary background color used across various menus and buttons": "適用於多個選單、按鈕的次要背景顏色", 95 | "Background Image Opacity": "背景圖片透明度", 96 | "Adjusts the opacity level of the background image": "調整背景圖片的透明程度", 97 | "[Echo] Message Background Avatar Height": "[Echo] 訊息背景頭像高度", 98 | "Height of character avatars in the message background for the Echo style": "Echo 風格中訊息背景角色頭像的高度", 99 | "Justify Paragraph Text": "段落文字左右對齊", 100 | "Aligns paragraph text for Chinese, Japanese, and Korean for better readability; not suitable for English layout": "適用於中、日、韓等文字，使段落文字更整齊；不適用於英語", 101 | "Please refer to the": "請參閱", 102 | "and complete the necessary setup.": "並完成對應的設定。", 103 | "Fix Tablet Menu Layout": "修復平板選單佈局", 104 | "Optimized for tablet users to prevent menu layout issues. Note: Tablet support in SillyTavern is currently limited and may not address all issues": "修復平板橫放時，主要選單出現的問題。請注意：目前 SillyTavern 對平板電腦的支援有限，可能無法解決所有問題", 105 | "Enable Mobile Hidden Scrollbar": "在行動裝置上隱藏捲軸", 106 | "Hides scrollbars for a clean mobile interface": "在行動裝置的螢幕上隱藏捲軸，提供更簡潔流暢的介面。", 107 | "Apply Theme Colors to More UI Elements": "將主題顏色應用於更多 UI 元素", 108 | "Applies theme colors to more parts of the UI for a more personalized look": "將主題顏色應用於 UI 的更多部分，以實現更個性化的外觀", 109 | "Enable Horizontal HotSwap Scroll on Mobile": "快速角色選單在行動裝置上使用水平捲動", 110 | "Allows horizontal scrolling for the quick character selection menu (#HotSwapWrapper) on mobile": "在行動裝置上對快速角色選單（#HotSwapWrapper）使用水平捲動", 111 | "Increase Chat Input Field Spacing on Desktop & Tablet": "在桌面與平板裝置上增加聊天輸入欄間距", 112 | "Add extra bottom margin to chat input fields on larger screens (tablets and desktops)": "在較大螢幕（平板與桌面）上的聊天輸入欄底部新增額外間距", 113 | "Increase Chat Input Field Spacing on Mobile": "在行動裝置上增加聊天輸入欄間距", 114 | "Add extra bottom padding to chat input fields on mobile devices (screen width ≤ 1000px)": "在螢幕寬度 ≤ 1000px 的行動裝置上，為聊天輸入欄添加額外底部填充", 115 | "[Echo] Mobile Message Background Avatar Width": "[Echo] 手機端訊息背景頭像寬度", 116 | "Width of character avatars in the message background for the Echo style on mobile devices": "Echo 風格中手機裝置訊息背景角色頭像的寬度", 117 | "[Echo] Mobile Message Background Avatar Height": "[Echo] 手機端訊息背景頭像高度", 118 | "Height of character avatars in the message background for the Echo style on mobile devices": "Echo 風格中手機裝置訊息背景角色頭像的高度", 119 | "Hide Mobile Echo-Style Message Background": "隱藏手機端 Echo 風格訊息背景插圖", 120 | "Hide the echo-style background illustration for character messages on mobile devices": "在行動裝置上隱藏角色訊息的 Echo 風格角色訊息背景插圖", 121 | "Disable All Border Radius": "完全禁用圓角效果", 122 | "Completely disable all border-radius and outline-radius effects throughout the UI": "在整個介面中完全禁用所有圓角與外框圓角效果", 123 | "Hide Avatar Border": "隱藏角色頭像邊框", 124 | "Hide the border around character avatars in chat messages": "隱藏聊天訊息中角色的頭像邊框", 125 | "Move QRs Bar Below Input on Mobile": "在行動裝置上將 QRs 選單移至輸入欄位下方", 126 | "On mobile devices (screen width ≤ 1000px), move the QRs menu below the chat input to avoid interference from message input": "在行動裝置（螢幕寬度 ≤ 1000px）上，將 QRs 選單改到下方。避免受訊息輸入影響。", 127 | "Mobile QRs Bar Height": "行動裝置 QRs 選單高度", 128 | "Sets the maximum number of visible rows in the QRs bar on mobile devices (supports scrolling)": "設定行動裝置上 QRs 選單的最大可見行數（支持捲軸）", 129 | "Compact (1 row)": "緊湊（1 行）", 130 | "Default (2 rows)": "預設（2 行）", 131 | "Extended (3 rows)": "寬鬆（3 行）", 132 | "Message Paragraph Spacing": "訊息段落間距", 133 | "Sets the spacing between paragraphs in chat messages (e.g. 0.5em, 1em)": "設定聊天訊息的段落間距（如：0.5em、1em）", 134 | "Core Settings": "核心設定", 135 | "Background Effects": "背景效果", 136 | "Theme Extras": "主題額外功能", 137 | "General Chat Settings": "一般聊天設定", 138 | "Echo Style Settings": "Echo 風格設定", 139 | "Whisper Style Settings": "Whisper 風格設定", 140 | "Ripple Style Settings": "Ripple 風格設定", 141 | "[Echo] Hide Message Background on Mobile": "[Echo] 在行動裝置上隱藏訊息背景", 142 | "Hide message background illustrations on mobile for the Echo style": "隱藏行動裝置上 Echo 訊息風格中的背景插圖", 143 | "Mobile Devices": "行動裝置", 144 | "Mobile Global Settings": "行動裝置全域設定", 145 | "Mobile Detailed Settings": "行動裝置細部設定", 146 | "Open Moonlit Echoes Theme Settings": "開啟 Moonlit Echoes 主題設定選單", 147 | "Chat Style Slash Commands": "聊天風格斜線指令", 148 | "Available commands:": "可用指令：", 149 | "SillyTavern Safe Switch Commands:": "SillyTavern 安全切換指令：", 150 | "Switch to Echo style": "切換至 Echo（回聲）風格", 151 | "Switch to Whisper style": "切換至 Whisper（低語）風格", 152 | "Switch to Hush style": "切換至 Hush（寂靜）風格", 153 | "Switch to Ripple style": "切換至 Ripple（漣漪）風格", 154 | "Switch to Tide style": "切換至 Tide（潮汐）風格", 155 | "Moonlit Echoes Styles:": "Moonlit Echoes 風格：", 156 | "SillyTavern Built-in Styles:": "SillyTavern 內建風格：", 157 | "Switch to Flat style": "切換至 Flat（扁平）風格", 158 | "Switch to Bubble style": "切換至 Bubble（氣泡）風格", 159 | "Switch to Document style": "切換至 Document（文件）風格", 160 | "For more commands, see": "想了解更多指令，請參閱：", 161 | "STscript Reference": "STscript 語言參考", 162 | "Apply Theme Color to Message Avatar Border": "將角色主題顏色套用至訊息頭像邊框", 163 | "Applies each character’s theme color to message avatar borders. Requires the Character Style Customizer; per-character colors override global settings": "將個別角色主題顏色套用至訊息頭像邊框。需使用「Character Style Customizer」擴充，個別角色顏色優先於全域設定", 164 | "Mobile Chat Field Background Blur Intensity": "行動裝置聊天欄位背景模糊強度", 165 | "Blur level of the chat field background on mobile devices (#sheld)": "行動裝置上聊天欄位（#sheld）背景的模糊程度", 166 | "Dynamically Adjust Menu Max Height": "動態調整選單最大高度", 167 | "Dynamically adjust the menu’s maximum height based on the message input field. May not work on all devices—disable this option if the menu doesn’t close properly": "按訊息輸入欄位高度動態調整選單最大高度。可能不適用所有設備；若無法正常關閉選單，請停用此選項", 168 | "Apply Theme Color to Message Background (Experimental)": "將角色主題顏色套用至訊息背景（實驗性）", 169 | "Applies each character’s theme color to their message background. Requires the Character Style Customizer; per-character colors override global settings": "將個別角色主題顏色套用至訊息背景。需使用「Character Style Customizer」擴充，個別角色顏色優先於全域設定", 170 | "Display LLM Icon in Reasoning Block": "在推理區塊顯示 LLM 圖示", 171 | "Shows the LLM icon in the reasoning block header for clearer identification": "在推理區塊標題中顯示 LLM 圖示，以便更清晰地識別" 172 | } 173 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "display_name": "Moonlit Echoes Theme", 3 | "description": "A modern, minimalist, and elegant theme for SillyTavern. Inspired by moonlit nights and gentle echoes of serenity.", 4 | "loading_order": 10, 5 | "requires": [], 6 | "optional": [], 7 | "js": "index.js", 8 | "author": "Rivelle ", 9 | "version": "2.8.3", 10 | "license": "AGPL-3.0", 11 | "homepage": "https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme", 12 | "auto_update": true, 13 | "i18n": { 14 | "zh-tw": "i18n/zh-tw.json", 15 | "zh-cn": "i18n/zh-cn.json" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* - - - - - - - - - - - - - - - - - 2 | 3 | "Moonlit Echoes" 月下回聲 4 | ₊*.⊹ ⁎✧‧₊˚ 5 | 6 | Presented by Rivelle, 7 | dedicated to all the lovely souls. 8 | 9 | - - - - - - - - - - - - - - - - - */ 10 | 11 | 12 | body { 13 | --interactable-outline-color: transparent; 14 | --interactable-outline-color-faint: transparent; 15 | } 16 | 17 | 18 | /* CUSTOM STYLES 自定義樣式 19 | - - - - - - - - - - - - - - - - - */ 20 | 21 | /* --- Custom Colors 自定義顏色 --- */ 22 | 23 | :root { 24 | --custom-avatar: calc(var(--avatar-base-width) * 0.8); 25 | --customThemeMenuColor: var(--SmartThemeChatTintColor); 26 | --active: var(--customThemeColor); 27 | --SmartThemeCheckboxTickColor: var(--SmartThemeBlurTintColor); 28 | --customMesPadding: 1em; 29 | --customRippleAvatarRatio: 1.5; 30 | 31 | /* Secondary Colors 次要顏色 */ 32 | --fullred: rgb(229, 57, 53); 33 | --crimson70a: rgb(229, 57, 53); 34 | --black30a: color-mix(in srgb, var(--SmartThemeBlurTintColor) 30%, transparent); 35 | --black50a: color-mix(in srgb, var(--SmartThemeBlurTintColor) 50%, transparent); 36 | --black70a: color-mix(in srgb, var(--SmartThemeBlurTintColor) 70%, transparent); 37 | --cobalt30a: color-mix(in srgb, var(--SmartThemeBodyColor) 10%, transparent); 38 | --okGreen70a: rgb(156, 204, 101, 0.8); 39 | --warning: var(--customThemeColor); 40 | --golden: var(--customThemeColor); 41 | 42 | /* !!! Important: Do Not Modify 不要修改 !!! */ 43 | --topBarBlockSize: calc(var(--topBarIconSize) + var(--topBarBlockPadding) - 1px); 44 | --bottomInputAreaHeight: 115px; 45 | --custom-echo-avatar: calc(var(--custom-ChatAvatar, 40px) + 10px); 46 | } 47 | @media screen and (max-width: 1000px) { 48 | :root { 49 | --topBarBlockSize: calc(var(--topBarIconSize) + var(--topBarBlockPadding) + 5px) !important; 50 | } 51 | } 52 | 53 | /* Alert Red 紅色警告 */ 54 | .redOverlayGlow { 55 | color: var(--fullred); 56 | } 57 | /* Connection Status 連線狀態 */ 58 | .online_status_indicator { 59 | background-color: var(--crimson70a); 60 | } 61 | .online_status_indicator.success { 62 | background-color: var(--okGreen70a); 63 | } 64 | .success { 65 | color: var(--okGreen70a); 66 | } 67 | 68 | /* Remove Black Shadow 消除黑色陰影 */ 69 | button:focus, 70 | a:focus { 71 | outline: none; 72 | } 73 | html * { 74 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 75 | } 76 | .custom-drawer-icon, 77 | .inline-drawer-icon, 78 | .right_menu_button, 79 | input[type='checkbox'] { 80 | filter: none; 81 | box-shadow: none !important; 82 | } 83 | .mes_button, .extraMesButtons > div { 84 | filter: drop-shadow(0px 0px 2px var(--SmartThemeBlurTintColor)); 85 | } 86 | .mes_edit_buttons { 87 | filter: drop-shadow(0px 0px 2px var(--SmartThemeBlurTintColor)); 88 | } 89 | #options, #extensionsMenu, .popup .popper-modal, .list-group { 90 | box-shadow: 0 0 15px color-mix(in srgb, var(--SmartThemeBlurTintColor) 50%, transparent); 91 | } 92 | .menu_button { 93 | filter: none !important; 94 | border-width: 1px !important; 95 | } 96 | .draggable { 97 | filter: drop-shadow(1px 1px 2px transparent) !important; 98 | } 99 | 100 | /* Loading Animation 載入動畫 */ 101 | .transparent_dialogue_popup { 102 | box-shadow: none !important; 103 | } 104 | 105 | /* Background Effect 背景模糊 */ 106 | #bg1, #bg_custom { 107 | opacity: var(--customCSS-bg-opacity , 1); 108 | filter: blur(calc(var(--customCSS-bg-blur) * 1px)) !important; 109 | } 110 | 111 | /* Hyperlinks 超連結 */ 112 | a { 113 | color: var(--customThemeColor); 114 | transition: all 0.5s ease; 115 | font-weight: bold; 116 | 117 | &:hover { 118 | color: var(--customThemeColor2); 119 | filter: none; 120 | } 121 | } 122 | 123 | /* Text Selection 選取文字 */ 124 | ::selection { 125 | background-color: color-mix(in srgb, var(--customThemeColor) 50%, transparent 50%); 126 | color: #FFF; 127 | } 128 | 129 | /* Horizontal Divider 水平分割線 */ 130 | hr { 131 | background-image: none !important; 132 | background-color: var(--SmartThemeBodyColor) !important; 133 | margin: 15px 0; 134 | height: 1px; 135 | min-height: 1px; 136 | border: 0; 137 | opacity: 0.3; 138 | } 139 | 140 | /* --- Headings 標題樣式 --- */ 141 | 142 | /* H1 Title 一級標題 */ 143 | h1 { 144 | font-size: calc(var(--mainFontSize) + 0.6rem); 145 | color: var(--customThemeColor); 146 | margin-bottom: 20px; 147 | padding: 10px 0; 148 | border-top: 3px solid var(--customThemeColor); 149 | border-bottom: 3px solid var(--customThemeColor); 150 | line-height: 32px; 151 | letter-spacing: 1px; 152 | } 153 | /* H2 Title 二級標題 */ 154 | h2 { 155 | font-size: calc(var(--mainFontSize) + 0.5rem); 156 | margin: 15px 0; 157 | line-height: 30px; 158 | letter-spacing: 1px; 159 | } 160 | /* H3 Title 三級標題 */ 161 | h3 { 162 | text-align: left; 163 | margin-top: 5px !important; 164 | margin-bottom: 5px !important; 165 | padding-left: 10px; 166 | letter-spacing: 1px; 167 | border: 0; 168 | border-left: 3.5px solid var(--customThemeColor); 169 | } 170 | .drawer-content h3 { 171 | white-space: nowrap; 172 | } 173 | h4 { 174 | letter-spacing: 0.8px; 175 | margin-top: 10px; 176 | font-weight: 500; 177 | } 178 | 179 | /* General Title 普通標題 */ 180 | .standoutHeader, 181 | .title_restorable { 182 | margin: 15px 0; 183 | padding: 0; 184 | min-height: 33px; 185 | padding-bottom: 8px; 186 | background-image: none !important; 187 | border-radius: 0px !important; 188 | letter-spacing: 0.8px; 189 | display: flex; 190 | align-items: center; 191 | border: 0; 192 | border-bottom: 1.25px solid var(--SmartThemeBodyColor); 193 | font-weight: 600; 194 | 195 | h3 { 196 | margin: unset; 197 | padding-left: unset; 198 | border-left: unset; 199 | } 200 | } 201 | .range-block-title { 202 | margin: 3px 0; 203 | font-weight: 600; 204 | } 205 | 206 | /* --- Lists 列表樣式 --- */ 207 | ol, ul { 208 | margin-block-start: 10px; 209 | margin-block-end: 10px; 210 | margin-inline-start: 3px; 211 | margin-inline-end: 0px; 212 | padding-inline-start: 15px; 213 | unicode-bidi: isolate; 214 | } 215 | ol ::marker, 216 | ol ol ::marker { 217 | color: var(--customThemeColor); 218 | } 219 | li { 220 | padding-left: 5px; 221 | } 222 | 223 | /* --- Code Tags 程式碼標籤 --- */ 224 | 225 | code { 226 | line-height: normal; 227 | background: var(--SmartThemeBlurTintColor); 228 | color: var(--customThemeColor); 229 | } 230 | #sheld code { 231 | border: 0px; 232 | border-radius: 4px; 233 | letter-spacing: 0.8px; 234 | line-height: normal; 235 | background: var(--SmartThemeBlurTintColor); 236 | color: var(--customThemeColor); 237 | font-size: 85%; 238 | padding: 0.2em 0.4em; 239 | margin: 0 3px; 240 | } 241 | .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor code { 242 | letter-spacing: normal; 243 | font-size: 100%; 244 | } 245 | 246 | /* --- Input Fields 輸入框樣式 --- */ 247 | select:focus-visible, 248 | input:focus-visible, 249 | textarea:focus-visible { 250 | outline: 0px solid var(--customThemeColor); 251 | } 252 | .select2-dropdown { 253 | background-color: var(--SmartThemeBlurTintColor); 254 | border: 1px solid var(--SmartThemeBorderColor) !important; 255 | box-shadow: 0 0 3px var(--SmartThemeBlurTintColor); 256 | } 257 | 258 | select, 259 | #char-management-dropdown, 260 | #tagInput { 261 | padding: 5px 8px; 262 | } 263 | #persona_description, 264 | #context_story_string, 265 | #sysprompt_content, 266 | #customCSS, 267 | .world_entry_form_control textarea, 268 | #character_popup textarea, 269 | #logprobsViewer textarea, 270 | #floatingPrompt textarea, 271 | #cfgConfig textarea, 272 | #completion_prompt_manager_popup textarea { 273 | padding: 10px; 274 | } 275 | 276 | /* Text Cursor 文字輸入框光標 */ 277 | textarea { 278 | caret-color: var(--customThemeColor); 279 | text-decoration-color: var(--customThemeColor); 280 | padding: 10px; 281 | 282 | ::-webkit-input-method-composition { 283 | text-decoration-color: var(--customThemeColor); 284 | } 285 | 286 | .composing { 287 | text-decoration-color: var(--customThemeColor); 288 | } 289 | } 290 | 291 | /* Chat Block 聊天選擇框 */ 292 | .select_chat_block { 293 | transition: all 0.5s ease; 294 | } 295 | .select_chat_block[highlight] { 296 | border: 1px solid var(--customThemeColor); 297 | background-color: transparent; 298 | transition: all 0.5s ease; 299 | 300 | &:hover { 301 | border: 1px solid var(--customThemeColor); 302 | transition: all 0.5s ease; 303 | } 304 | } 305 | 306 | /* Radio & Checkbox 單選與多選框 */ 307 | input[type="radio"], 308 | input[type="checkbox"] { 309 | appearance: none; 310 | -webkit-appearance: none; 311 | background-color: transparent; 312 | border: 2px solid var(--SmartThemeBodyColor); 313 | border-radius: 50%; 314 | width: 15px; 315 | height: 15px; 316 | cursor: pointer; 317 | transition: all 0.3s ease; 318 | 319 | &:checked { 320 | background-color: var(--customThemeColor); 321 | } 322 | } 323 | input[type='checkbox'] { 324 | border: none !important; 325 | background-color: var(--SmartThemeBodyColor); 326 | box-shadow: none; 327 | width: 16px; 328 | border-radius: 100% !important; 329 | height: 16px; 330 | transition: all 0.3s ease; 331 | 332 | &:checked { 333 | background-color: var(--customThemeColor) !important; 334 | } 335 | &::before { 336 | color: var(--SmartThemeCheckboxTickColor); 337 | pointer-events: none; 338 | } 339 | } 340 | 341 | /* --- Sliders 滑桿 --- */ 342 | 343 | /* Base Slider 基本滑桿樣式 */ 344 | input[type="range"] { 345 | background: var(--customThemeColor); 346 | box-shadow: inset 0 0 2px var(--customThemeColor); 347 | 348 | &:hover { 349 | filter: brightness(1); 350 | } 351 | } 352 | /* Slider Circle 滑桿圓圈 */ 353 | input[type="range"]::-webkit-slider-thumb { 354 | -webkit-appearance: none; 355 | background: var(--customThemeColor); 356 | border-radius: 50%; 357 | cursor: pointer; 358 | border: 1px solid var(--customThemeColor); 359 | box-shadow: none; 360 | } 361 | /* NEO Slider NEO 滑桿 */ 362 | .neo-range-slider { 363 | background: var(--customThemeColor) !important; 364 | box-shadow: inset 0 0 2px var(--black50a) !important; 365 | 366 | &:hover { 367 | filter: brightness(1); 368 | } 369 | } 370 | 371 | /* --- Popup 彈出視窗 --- */ 372 | 373 | .popup { 374 | max-height: calc(100dvh - 20%); 375 | overflow: visible; 376 | backface-visibility: hidden; 377 | transform: translateZ(0); 378 | -webkit-font-smoothing: subpixel-antialiased; 379 | --popup-animation-speed: var(--animation-duration-slow); 380 | box-shadow: 0px 0px 25px color-mix(in srgb, var(--SmartThemeShadowColor) 90%, transparent);; 381 | 382 | &.vertical_scrolling_dialogue_popup { 383 | .popup-content { 384 | overflow-y: visible !important; 385 | height: fit-content !important; 386 | max-height: none !important; 387 | } 388 | } 389 | } 390 | .popup-controls { 391 | margin-top: 10px; 392 | display: flex; 393 | align-self: center; 394 | gap: 5px; 395 | flex-wrap: wrap; 396 | } 397 | .popup-content { 398 | overflow-y: auto !important; 399 | overflow-x: hidden !important; 400 | -webkit-overflow-scrolling: touch; 401 | margin: 10px 0; 402 | 403 | &:not(:has(.img_enlarged_container)) { 404 | .popup-body { 405 | max-height: 95dvh; 406 | } 407 | } 408 | } 409 | #shadow_popup, 410 | .popup[open]::backdrop { 411 | backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))) !important; 412 | -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))) !important; 413 | background-color: var(--black70a); 414 | } 415 | @media screen and (max-width: 1000px) { 416 | .large_dialogue_popup { 417 | top: 0px; 418 | left: 0px; 419 | box-sizing: border-box; 420 | max-width: 100vw !important; 421 | max-height: 100vh !important; 422 | height: 100vh !important; 423 | padding: 0px 10px; 424 | display: flex; 425 | justify-content: center; 426 | align-items: center; 427 | border-radius: 0; 428 | } 429 | 430 | body.safari .popup .popup-body { 431 | max-height: 90vh; 432 | max-height: 95dvh; 433 | } 434 | } 435 | 436 | .scenario_override { 437 | .standoutHeader, .title_restorable { 438 | border-bottom: unset; 439 | padding-bottom: unset; 440 | 441 | h3 { 442 | margin: unset; 443 | padding-left: 10px !important; 444 | border-left: 3.5px solid var(--customThemeColor) !important; 445 | } 446 | } 447 | 448 | .range-block-range { 449 | margin-top: 10px; 450 | } 451 | } 452 | 453 | /* --- Expand & Collapse 展開＆收合 --- */ 454 | 455 | /* Expand Title 展開標題 */ 456 | .inline-drawer-header { 457 | margin: 5px 0; 458 | padding: 10px; 459 | border-radius: 10px; 460 | font-weight: 500; 461 | transition: all 0.5s ease; 462 | background: var(--customBgColor2); 463 | border: 1px solid var(--SmartThemeBorderColor); 464 | letter-spacing: 0.6px; 465 | 466 | &:hover { 467 | filter: none !important; 468 | background: var(--customBgColor1); 469 | } 470 | } 471 | 472 | /* Expand Icon 展開圖標 */ 473 | .inline-drawer-icon { 474 | font-size: calc(var(--mainFontSize)* 1.1); 475 | } 476 | 477 | /* Expand Content 展開內容 */ 478 | .inline-drawer-content { 479 | padding: 5px !important; 480 | 481 | @media screen and (max-width: 1000px) { 482 | padding: 10px !important; 483 | } 484 | } 485 | #rm_extensions_block .inline-drawer-content { 486 | padding: 5px 0 !important; 487 | 488 | @media screen and (max-width: 1000px) { 489 | padding: 10px 5px !important; 490 | } 491 | } 492 | .standoutHeader { 493 | ~ .inline-drawer-content { 494 | margin-top: 10px; 495 | } 496 | } 497 | 498 | /* --- Menu Buttons 選單按鈕 --- */ 499 | 500 | .menu_button { 501 | min-width: 30px; 502 | min-height: 30px; 503 | } 504 | .popup-controls { 505 | .menu_button { 506 | box-shadow: 0 0 5px color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 507 | } 508 | } 509 | .paginationjs-nav { 510 | letter-spacing: 1px; 511 | } 512 | .paginationjs-size-changer select { 513 | margin: 0 2.5px; 514 | } 515 | .paginationjs-pages li { 516 | margin: 0; 517 | } 518 | .paginationjs-pages ul li a { 519 | padding: 3px 10px; 520 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 5%, transparent) !important; 521 | transition: all 0.5s ease; 522 | 523 | &:hover { 524 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 525 | opacity: 1 !important; 526 | } 527 | } 528 | 529 | /* Base Button 基礎按鈕 */ 530 | .menu_button { 531 | white-space: nowrap; 532 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 5%, transparent) !important; 533 | transition: all 0.5s ease; 534 | 535 | &:hover { 536 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 537 | } 538 | } 539 | .menu_button:not(.disabled):hover, 540 | .menu_button:not(.disabled).active { 541 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 542 | } 543 | .popup-controls { 544 | .menu_button { 545 | width: auto; 546 | padding: 8px 16px; 547 | margin: 5px; 548 | background-color: var(--SmartThemeBlurTintColor); 549 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 550 | border-radius: 8px; 551 | color: var(--SmartThemeBodyColor); 552 | cursor: pointer; 553 | font-size: 14px; 554 | letter-spacing: 0.8px; 555 | transition: all 0.5s ease; 556 | 557 | &:hover { 558 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 559 | } 560 | } 561 | } 562 | .text_pole { 563 | background-color: var(--black30a); 564 | min-height: 30px; 565 | padding-left: 10px; 566 | padding-right: 10px; 567 | } 568 | 569 | /* Confirm Button 確認按鈕 */ 570 | .menu_button.popup-button-ok, 571 | #dialogue_popup_ok { 572 | min-width: fit-content; 573 | color: #fff; 574 | letter-spacing: 0.8px; 575 | background-color: var(--customBgColor1); 576 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 577 | padding: 5px 20px; 578 | border-radius: 8px; 579 | transition: all 0.5s ease; 580 | 581 | &:hover { 582 | background-color: color-mix(in srgb, var(--customThemeColor) 50%, transparent) !important; 583 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 50%, transparent) !important; 584 | transition: all 0.5s ease; 585 | } 586 | } 587 | 588 | /* Default Button 預設按鈕 */ 589 | .menu_button.menu_button_default, 590 | #dialogue_popup_cancel { 591 | min-width: fit-content; 592 | color: var(--SmartThemeBodyColor); 593 | letter-spacing: 0.8px; 594 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 595 | padding: 5px 20px; 596 | border-radius: 8px; 597 | transition: all 0.5s ease; 598 | 599 | &:hover { 600 | background-color: var(--white30a); 601 | color: var(--SmartThemeBodyColor); 602 | border: 1px solid var(--SmartThemeBorderColor); 603 | } 604 | } 605 | 606 | #dialogue_del_mes .menu_button { 607 | padding: 8px 16px; 608 | border-radius: 0.8px; 609 | color: var(--SmartThemeBodyColor); 610 | font-weight: 500; 611 | font-size: 14px; 612 | letter-spacing: 1px; 613 | transition: all 0.5s ease; 614 | border-radius: 8px; 615 | } 616 | 617 | /* --- Scrollbar 捲軸樣式 --- */ 618 | 619 | /* General Scrollbar 通用捲軸 */ 620 | ::-webkit-scrollbar { 621 | width: 5px; 622 | max-width: 5px; 623 | height: 10px; 624 | 625 | /* Scrollbar Track 捲軸軌道 */ 626 | &-track { 627 | background: transparent; 628 | } 629 | /* Scrollbar Thumb 捲軸拇指 */ 630 | &-thumb { 631 | background-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)); 632 | border-radius: 5px !important; 633 | transition: background-color 0.5s ease, opacity 0.5s ease; 634 | 635 | &:hover { 636 | background-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)); 637 | } 638 | &:active { 639 | background-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)); 640 | } 641 | } 642 | } 643 | 644 | /* Firefox Scrollbar Firefox 捲軸樣式 */ 645 | * { 646 | scrollbar-width: thin; 647 | scrollbar-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)) transparent; 648 | 649 | &::-webkit-scrollbar { 650 | scrollbar-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)) transparent; 651 | } 652 | } 653 | 654 | /* General Scrollbar 通用捲軸 */ 655 | ::-webkit-scrollbar { 656 | width: 5px; 657 | max-width: 5px; 658 | height: 10px; 659 | 660 | /* Scrollbar Track 捲軸軌道 */ 661 | &-track { 662 | background: transparent; 663 | } 664 | /* Scrollbar Thumb 捲軸拇指 */ 665 | &-thumb { 666 | background-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)); 667 | border-radius: 5px !important; 668 | transition: background-color 0.5s ease, opacity 0.5s ease; 669 | 670 | &:hover { 671 | background-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)); 672 | } 673 | &:active { 674 | background-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)); 675 | } 676 | } 677 | } 678 | @media screen and (max-width: 1000px) { 679 | ::-webkit-scrollbar-thumb { 680 | background-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)); 681 | } 682 | 683 | * { 684 | scrollbar-width: thin !important; 685 | scrollbar-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)); 686 | } 687 | } 688 | 689 | /* Firefox Scrollbar Firefox 捲軸樣式 */ 690 | * { 691 | scrollbar-width: thin; 692 | scrollbar-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)) transparent; 693 | 694 | &::-webkit-scrollbar { 695 | scrollbar-color: var(--customScrollbarColor, rgba(255, 255, 255, 0.5)) transparent; 696 | } 697 | } 698 | 699 | 700 | 701 | /* IMPORTANT SETTINGS 重要選單與內容設定 702 | - - - - - - - - - - - - - - - - - */ 703 | 704 | /* --- Top Navigation 上方導航選單 --- */ 705 | 706 | /* Top Bar 上方導航條 */ 707 | #top-bar { 708 | height: var(--topBarBlockSize); 709 | background-color: var(--customTopBarColor) !important; 710 | width: auto; 711 | border-radius: 0px !important; 712 | box-shadow: 0 1px 15px 0 var(--SmartThemeShadowColor); 713 | backdrop-filter: blur(var(--SmartThemeBlurStrength)); 714 | box-sizing: border-box; 715 | } 716 | 717 | /* Settings Holder 設置區容器 */ 718 | #top-settings-holder { 719 | display: flex; 720 | margin: 0 auto; 721 | height: var(--topBarBlockSize); 722 | justify-content: center; 723 | z-index: 3005; 724 | position: relative; 725 | box-sizing: border-box; 726 | transition: all 0.8s ease; 727 | width: auto; 728 | border-bottom: 1.25px solid color-mix(in srgb, var(--SmartThemeBodyColor) 5%, transparent); 729 | box-sizing: border-box; 730 | max-height: var(--topBarBlockSize); /* 設置最大高度，防止超出 */ 731 | } 732 | 733 | /* --- Basic Menu 基礎內容選單 --- */ 734 | 735 | /* Menu Icon 選單圖示 */ 736 | .drawer-icon { 737 | position: relative; 738 | object-fit: contain; 739 | font-size: calc(var(--mainFontSize) * 1.45); 740 | color: var(--Drawer-iconColor) !important; 741 | z-index: 9000 !important; 742 | display: inline-flex; 743 | height: 100%; 744 | } 745 | .drawer-icon.openIcon { 746 | color: var(--Drawer-iconColor) !important; 747 | } 748 | @media screen and (max-width: 1000px) { 749 | .drawer { 750 | padding: 0 5px !important; 751 | } 752 | .drawer-icon { 753 | font-size: calc(var(--mainFontSize) * 1.5); 754 | } 755 | .drawer-icon.fa-fw { 756 | width: unset !important; 757 | } 758 | } 759 | 760 | /* Menu Container 選單容器 */ 761 | .drawer { 762 | align-items: center; 763 | justify-content: center; 764 | display: flex; 765 | flex-flow: row; 766 | width: auto; 767 | padding: 0 0.8%; 768 | height: var(--topBarBlockSize); 769 | } 770 | 771 | /* Menu Content 選單內容 */ 772 | .drawer-content { 773 | padding: 1em; 774 | overflow-y: scroll; 775 | border-radius: 0; 776 | background-color: var(--SmartThemeBlurTintColor); 777 | box-shadow: none; 778 | 779 | @media screen and (max-width: 1000px) { 780 | top: calc(var(--topBarBlockSize)); 781 | margin-top: 0; 782 | padding: 15px; 783 | min-width: 100dvw; 784 | } 785 | } 786 | 787 | 788 | .fillLeft, 789 | .fillRight, 790 | #left-nav-panel, 791 | #right-nav-panel { 792 | top: calc(var(--topBarBlockSize)) !important; 793 | width: calc((100dvw - var(--sheldWidth)) / 2); 794 | max-height: calc(100dvh - var(--topBarBlockSize)) !important; 795 | } 796 | 797 | #left-nav-panel, 798 | #right-nav-panel, 799 | .drawer-content { 800 | border: 0; 801 | border-radius: 0 !important; 802 | border-top: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 803 | border-right: 0; 804 | border-bottom: 0; 805 | border-left: 0; 806 | box-sizing: border-box; 807 | 808 | .right_menu_button { 809 | font-size: calc(var(--mainFontSize) * 1.1); 810 | } 811 | } 812 | #right-nav-panel { 813 | background-color: var(--SmartThemeBlurTintColor); 814 | padding: 1em; 815 | position: absolute; 816 | top: calc(var(--topBarBlockSize)); 817 | border-radius: 0; 818 | box-shadow: none; 819 | } 820 | 821 | @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { 822 | .drawer-content { 823 | top: 0 !important; 824 | } 825 | .fillLeft, 826 | .fillRight { 827 | width: 100dvw !important; 828 | min-width: 100dvw !important; 829 | } 830 | } 831 | 832 | /* CHAT AREA 聊天區域 833 | - - - - - - - - - - - - - - - - - */ 834 | 835 | /* --- Main Chat Area 主要聊天區域 --- */ 836 | 837 | #sheld { 838 | padding: 0 10px; 839 | padding-right: 5px; 840 | box-sizing: border-box; 841 | border: 0 !important; 842 | 843 | @media screen and (max-width: 1000px) { 844 | padding: 0; 845 | padding-bottom: 0 !important; 846 | } 847 | 848 | &::before { 849 | content: ""; 850 | position: absolute; 851 | top: 0; 852 | left: 0; 853 | right: 0; 854 | bottom: 0; 855 | background: var(--sheldBackgroundColor); 856 | backdrop-filter: blur(calc(var(--sheldBlurStrength) * 1px)); 857 | z-index: -1 !important; 858 | 859 | @media screen and (max-width: 1000px) { 860 | backdrop-filter: blur(calc(var(--mobileSheldBlurStrength) * 1px)); 861 | } 862 | } 863 | 864 | @media screen and (max-width: 1000px) { 865 | padding-bottom: 0; 866 | 867 | #character_popup, .drawer-content { 868 | width: 100dvw !important; 869 | max-width: 100%; 870 | margin: 0 auto; 871 | left: 0 !important; 872 | resize: none !important; 873 | box-sizing: border-box; 874 | } 875 | } 876 | } 877 | 878 | /* --- Main Chat 聊天主體 --- */ 879 | 880 | #chat { 881 | /* --- Core Settings 主體設定 --- */ 882 | backdrop-filter: none !important; 883 | background-color: transparent !important; 884 | max-height: calc(100dvh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize))); 885 | overflow-x: hidden; 886 | overflow-y: scroll; 887 | padding: 0; 888 | padding-left: 2px; 889 | padding-right: 15px; 890 | padding-bottom: 5px; 891 | display: flex; 892 | flex-direction: column; 893 | flex-grow: 1; 894 | flex-wrap: nowrap; 895 | position: relative; 896 | border-radius: 0px; 897 | mask-image: var(--customCSS-ChatGradientBlur); 898 | -webkit-mask-image: var(--customCSS-ChatGradientBlur); 899 | mask-size: 100% 100%; 900 | -webkit-mask-size: 100% 100%; 901 | mask-repeat: no-repeat; 902 | -webkit-mask-repeat: no-repeat; 903 | border: 0 !important; 904 | position: unset !important; 905 | 906 | @media screen and (max-width: 1000px) { 907 | padding: 0 8px !important; 908 | border: 0 !important; 909 | padding-bottom: 0 !important; 910 | 911 | .mes_buttons { 912 | overflow: visible; 913 | font-size: calc(var(--mainFontSize) * 1.25) !important; 914 | } 915 | } 916 | 917 | /* --- Reasoning 推理 --- */ 918 | .mes_reasoning_summary { 919 | background: none !important; 920 | margin: 0.5em 0px; 921 | 922 | &:hover { 923 | background: none !important; 924 | } 925 | } 926 | .mes_reasoning_header_block { 927 | background: none !important; 928 | } 929 | .mes_reasoning_header { 930 | padding: 8px; 931 | padding-right: calc(0.7em + 18px); 932 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 10%, transparent); 933 | transition: all 0.5s ease; 934 | margin-bottom: 0; 935 | 936 | &:hover { 937 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 20%, transparent); 938 | } 939 | } 940 | .mes_reasoning { 941 | min-width: calc(100% + var(--mes-right-spacing)); 942 | margin-left: 3px; 943 | margin-right: unset; 944 | padding: 0; 945 | padding-left: 12px; 946 | border-radius: 0px; 947 | color: color-mix(in srgb, var(--SmartThemeBodyColor) 75%, transparent); 948 | border-left: 1.5px solid color-mix(in srgb, var(--SmartThemeBodyColor) 75%, transparent); 949 | } 950 | 951 | /* --- Chat Messages 聊天訊息 --- */ 952 | 953 | .mes { 954 | border: none; 955 | box-shadow: none !important; 956 | background-color: unset !important; 957 | padding: 10px 0; 958 | 959 | /* General Avatar 一般頭像 */ 960 | .avatar { 961 | display: flex; 962 | justify-content: center; 963 | align-items: center; 964 | width: calc(var(--custom-ChatAvatar, 40px) + 10px); 965 | height: calc(var(--custom-ChatAvatar, 40px) + 10px); 966 | max-width: calc(var(--custom-ChatAvatar, 40px) + 10px); 967 | max-height: calc(var(--custom-ChatAvatar, 40px) + 10px); 968 | border: 1px solid var(--SmartThemeBodyColor); 969 | 970 | img { 971 | width: var(--custom-ChatAvatar, 40px); 972 | height: var(--custom-ChatAvatar, 40px); 973 | max-width: var(--custom-ChatAvatar) !important; 974 | max-height: var(--custom-ChatAvatar) !important; 975 | border: 0 !important; 976 | } 977 | } 978 | /* User Avatar 使用者頭像 */ 979 | .mesAvatarWrapper { 980 | padding-right: 0; 981 | margin-right: calc(var(--customMesPadding) / 2); 982 | } 983 | .mes_button, .extraMesButtons > div { 984 | font-size: var(--mainFontSize); 985 | filter: drop-shadow(0px 0px 3px var(--SmartThemeBlurTintColor)); 986 | opacity: 0.4; 987 | 988 | &:hover { 989 | opacity: 0.8; 990 | } 991 | 992 | @media screen and (max-width: 1000px) { 993 | font-size: calc(var(--mainFontSize) * 1.2); 994 | } 995 | } 996 | .extraMesButtons { 997 | @media screen and (max-width: 1000px) { 998 | justify-content: flex-start; 999 | margin-top: 2px; 1000 | padding: 0; 1001 | } 1002 | } 1003 | .mes_edit_buttons { 1004 | flex-wrap: wrap; 1005 | gap: 5px; 1006 | } 1007 | .timestamp { 1008 | font-size: calc(var(--mainFontSize) * 0.7); 1009 | font-weight: 400; 1010 | white-space: nowrap; 1011 | min-width: 100px; 1012 | } 1013 | .icon-svg { 1014 | opacity: 0.5; 1015 | } 1016 | 1017 | .mes_block { 1018 | background-color: var(--SmartThemeBotMesBlurTintColor) !important; 1019 | border: var(--SmartThemeBorderColor) solid 0px; 1020 | border-radius: 15px; 1021 | padding: var(--customMesPadding); 1022 | box-shadow: 3px 3px 8px 0px rgba(0,0,0,3%) !important; 1023 | } 1024 | .mes_text { 1025 | padding-right: 0 !important; 1026 | padding-bottom: 10px; 1027 | 1028 | .edit_textarea { 1029 | padding: 8px; 1030 | margin-bottom: 5px; 1031 | 1032 | @media screen and (max-width: 1000px) { 1033 | width: 100% !important; 1034 | } 1035 | } 1036 | } 1037 | 1038 | h3 { 1039 | margin-top: 15px !important; 1040 | margin-bottom: 10px !important; 1041 | } 1042 | } 1043 | 1044 | /* --- User Messages 使用者訊息 --- */ 1045 | .mes[is_user="true"] { 1046 | background-color: unset !important; 1047 | 1048 | .mes_block { 1049 | background-color: var(--SmartThemeUserMesBlurTintColor) !important; 1050 | } 1051 | } 1052 | 1053 | /* --- Last Message 最後一則訊息 --- */ 1054 | .last_mes { 1055 | margin-bottom: 10px !important; 1056 | 1057 | .mes_text { 1058 | padding-right: 0px; 1059 | padding-bottom: 10px; 1060 | } 1061 | 1062 | /* Swipe Message Button Text 滑動訊息按鈕文字 */ 1063 | .fa-chevron-left:before { 1064 | content: "‹"; 1065 | } 1066 | .fa-chevron-right:before { 1067 | content: "›"; 1068 | } 1069 | 1070 | /* Swipe Message Button Position 滑動訊息按鈕位置 */ 1071 | .swipe_left, 1072 | .swipe_right { 1073 | opacity: 0.6; 1074 | transform: scale(0.8); 1075 | transition: all 0.5s ease; 1076 | gap: 5px; 1077 | 1078 | &:hover { 1079 | opacity: 0.8; 1080 | color: var(--customThemeColor); 1081 | } 1082 | } 1083 | .swipeRightBlock { 1084 | position: absolute; 1085 | display: flex; 1086 | flex-direction: row-reverse; 1087 | justify-content: flex-end; 1088 | right: var(--customMesPadding); 1089 | bottom: 20px; 1090 | } 1091 | 1092 | /* Swipe Message Counter 滑動訊息計數器 */ 1093 | .swipes-counter { 1094 | width: 60px; 1095 | text-align: center; 1096 | overflow: visible; 1097 | white-space: nowrap; 1098 | text-overflow: ellipsis; 1099 | opacity: 0.7 !important; 1100 | letter-spacing: 1.5px; 1101 | } 1102 | } 1103 | } 1104 | 1105 | /* --- Chat Message Text Styles 聊天訊息文字樣式 --- */ 1106 | .mes_text { 1107 | /* General Text 一般內文 */ 1108 | p { 1109 | margin: var(--mesParagraphSpacing) 0 !important; 1110 | } 1111 | /* Quoted Text 引號文字 */ 1112 | q { 1113 | strong, 1114 | strong em { 1115 | color: inherit; 1116 | font-weight: bold; 1117 | } 1118 | } 1119 | 1120 | /* Hyperlinks 超連結 */ 1121 | a { 1122 | color: var(--customThemeColor); 1123 | transition: all 0.8s ease; 1124 | font-weight: bold; 1125 | padding-bottom: 1.5px; 1126 | border-bottom: 1px solid var(--customThemeColor); 1127 | 1128 | &:hover { 1129 | color: var(--customThemeColor2); 1130 | padding-bottom: 1.5px; 1131 | border-bottom: 1px solid var(--customThemeColor2); 1132 | filter: none; 1133 | } 1134 | } 1135 | 1136 | /* Blockquote 引用文字 */ 1137 | blockquote { 1138 | border-left: 3px solid var(--customThemeColor); 1139 | margin: 15px 0; 1140 | padding-left: 15px; 1141 | background-color: unset; 1142 | } 1143 | 1144 | /* Ordered & Unordered Lists ol 與 ul 標籤 */ 1145 | ol, 1146 | ul { 1147 | margin-top: 0; 1148 | margin-bottom: 8px; 1149 | } 1150 | 1151 | /* Multi-line Code Block 多行程式碼框 */ 1152 | pre code { 1153 | border-radius: 10px !important; 1154 | padding: 20px !important; 1155 | border: 1.25px solid color-mix(in srgb, var(--customThemeColor) 80%, transparent) !important; 1156 | box-shadow: 0 0 5px color-mix(in srgb, var(--customThemeColor) 50%, transparent); 1157 | } 1158 | } 1159 | 1160 | /* --- Chat Avatar Styles 聊天訊息角色頭像樣式 --- */ 1161 | 1162 | 1163 | /* Avatar: Rectangle 頭像：「矩形」（大頭像） */ 1164 | body.big-avatars #chat .mes { 1165 | .mes_block { 1166 | border-radius: 10px; 1167 | } 1168 | .avatar { 1169 | width: calc((var(--custom-ChatAvatar) * var(--big-avatar-width-factor)) + 10px); 1170 | height: calc((var(--custom-ChatAvatar) * var(--big-avatar-height-factor)) + 10px); 1171 | min-width: calc((var(--custom-ChatAvatar) * var(--big-avatar-width-factor)) + 10px) !important; 1172 | min-height: calc((var(--custom-ChatAvatar) * var(--big-avatar-height-factor)) + 10px) !important; 1173 | 1174 | img { 1175 | width: calc(var(--custom-ChatAvatar) * var(--big-avatar-width-factor)); 1176 | height: calc(var(--custom-ChatAvatar) * var(--big-avatar-height-factor)); 1177 | min-width: calc(var(--custom-ChatAvatar) * var(--big-avatar-width-factor)) !important; 1178 | min-height: calc(var(--custom-ChatAvatar) * var(--big-avatar-height-factor)) !important; 1179 | } 1180 | } 1181 | } 1182 | body.big-avatars #chat .mes[is_user="true"] { 1183 | .avatar { 1184 | width: calc((var(--custom-ChatAvatar) * var(--big-avatar-width-factor)) + 10px); 1185 | height: calc((var(--custom-ChatAvatar) * var(--big-avatar-height-factor)) + 10px); 1186 | 1187 | img { 1188 | width: calc(var(--custom-ChatAvatar) * var(--big-avatar-width-factor)); 1189 | height: calc(var(--custom-ChatAvatar) * var(--big-avatar-height-factor)); 1190 | } 1191 | } 1192 | } 1193 | 1194 | /* Avatar: Hidden 頭像：「隱藏角色頭像」 */ 1195 | body.hideChatAvatars #chat { 1196 | .ch_name { 1197 | margin-left: 10px; 1198 | } 1199 | .mes { 1200 | .mes_timer, 1201 | .mesIDDisplay, 1202 | .tokenCounterDisplay { 1203 | margin-left: 10px; 1204 | transform: translateY(-18px); 1205 | } 1206 | } 1207 | .mes_text { 1208 | margin-top: 10px; 1209 | } 1210 | } 1211 | body.hideChatAvatars { 1212 | .swipe_left, 1213 | .swipeRightBlock { 1214 | bottom: 30px !important; 1215 | } 1216 | } 1217 | 1218 | /* --- Chat Style: Bubble 聊天風格：「氣泡」 --- */ 1219 | body.bubblechat { 1220 | #chat { 1221 | .mes { 1222 | border: none; 1223 | border-radius: 0; 1224 | margin: unset; 1225 | padding: unset; 1226 | margin-bottom: 15px; 1227 | padding-top: 1px; 1228 | 1229 | .mes_block { 1230 | width: auto; 1231 | max-width: 80%; 1232 | display: inline-block; 1233 | word-wrap: break-word; 1234 | overflow: hidden; 1235 | border-radius: 5px 20px 20px 40px; 1236 | } 1237 | } 1238 | 1239 | @media screen and (max-width: 1000px) { 1240 | .mes_block { 1241 | margin-top: 0px; 1242 | } 1243 | } 1244 | 1245 | .mes[is_user="true"] { 1246 | display: flex; 1247 | flex-direction: row-reverse; 1248 | 1249 | .flex-container { 1250 | display: flex; 1251 | gap: 5px; 1252 | flex-wrap: wrap; 1253 | justify-content: flex-end; 1254 | width: 100%; 1255 | 1256 | .alignItemsBaseline { 1257 | > .name_text { 1258 | order: 2; 1259 | } 1260 | > .timestamp { 1261 | order: 1; 1262 | } 1263 | 1264 | @media screen and (max-width: 1000px) { 1265 | > .name_text, 1266 | > .timestamp { 1267 | order: 0; 1268 | } 1269 | 1270 | .timestamp { 1271 | justify-self: flex-end !important; 1272 | } 1273 | } 1274 | } 1275 | } 1276 | 1277 | .mesAvatarWrapper { 1278 | margin-right: 0; 1279 | margin-left: calc(var(--customMesPadding) / 2); 1280 | } 1281 | 1282 | .mes_block { 1283 | position: relative; 1284 | text-align: left; 1285 | border-radius: 20px 5px 40px 20px 1286 | } 1287 | 1288 | @media screen and (max-width: 1000px) { 1289 | .name_text { 1290 | text-align: right !important; 1291 | } 1292 | } 1293 | } 1294 | 1295 | .last_mes { 1296 | .swipeRightBlock { 1297 | right: calc(var(--customMesPadding) * 2); 1298 | bottom: 10px; 1299 | } 1300 | } 1301 | } 1302 | } 1303 | 1304 | /* --- Chat Style: Document 聊天風格：「文件」 --- */ 1305 | 1306 | body.documentstyle { 1307 | #sheld::before { 1308 | background: var(--customTopBarColor); 1309 | backdrop-filter: blur(calc(var(--sheldBlurStrength) * 1px)); 1310 | opacity: 0.7; 1311 | z-index: -1; 1312 | } 1313 | 1314 | #chat { 1315 | @media screen and (max-width: 1000px) { 1316 | padding: 1em !important; 1317 | } 1318 | 1319 | .mes { 1320 | padding: 0 !important; 1321 | 1322 | .mes_block { 1323 | margin-right: 0 !important; 1324 | background-color: unset !important; 1325 | padding: 0; 1326 | border-radius: 0; 1327 | box-shadow: none !important; 1328 | } 1329 | 1330 | .ch_name { 1331 | margin-left: 10px; 1332 | } 1333 | } 1334 | 1335 | .mes_text { 1336 | margin: 0 !important; 1337 | margin-bottom: 20px !important; 1338 | } 1339 | .last_mes .mes_text { 1340 | margin-bottom: 15px !important; 1341 | padding-bottom: 5px; 1342 | } 1343 | 1344 | .swipeRightBlock, 1345 | .swipe_left { 1346 | bottom: 0; 1347 | } 1348 | } 1349 | } 1350 | 1351 | /* --- Chat Style: Echo 聊天風格：「回聲」 --- */ 1352 | 1353 | body.echostyle #chat { 1354 | .mes { 1355 | display: block; 1356 | flex-direction: column; 1357 | align-items: flex-start; 1358 | width: 100%; 1359 | color: var(--SmartThemeBodyColor); 1360 | position: relative; 1361 | padding: 0; 1362 | margin-top: 5px; 1363 | margin-bottom: 0; 1364 | border-radius: 15px; 1365 | 1366 | &::before { 1367 | overflow: hidden; 1368 | border-radius: 15px; 1369 | } 1370 | 1371 | .mes_block { 1372 | display: block; 1373 | padding: 0; 1374 | overflow: visible; 1375 | position: relative; 1376 | transform: translateY( 1377 | calc(var(--custom-ChatAvatar) * (-1 + 0.325)) 1378 | ) !important; 1379 | background-color: unset !important; 1380 | box-shadow: none !important; 1381 | } 1382 | 1383 | .mes_text { 1384 | position: relative; 1385 | display: inline-block; 1386 | width: 100%; 1387 | max-width: 100%; 1388 | min-height: 200px; 1389 | overflow: hidden; 1390 | margin-top: calc(var(--custom-ChatAvatar) * 0.35); 1391 | border-radius: 10px; 1392 | backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); 1393 | -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); 1394 | box-shadow: 3px 3px 8px rgba(0, 0, 0, 3%); 1395 | } 1396 | 1397 | .mes_timer, 1398 | .mesIDDisplay, 1399 | .tokenCounterDisplay { 1400 | display: inline-block; 1401 | transform: translateY(calc(var(--custom-ChatAvatar) * -0.35)); 1402 | } 1403 | 1404 | /* Echo: User Message 回聲：使用者訊息 */ 1405 | &[is_user="true"] { 1406 | .avatar { 1407 | margin-right: 0; 1408 | } 1409 | .mesAvatarWrapper { 1410 | flex-direction: row-reverse; 1411 | padding-right: 0 !important; 1412 | margin-left: 2%; 1413 | margin-right: 0; 1414 | } 1415 | .ch_name { 1416 | flex-direction: row-reverse; 1417 | float: right; 1418 | clear: both; 1419 | margin-right: calc(var(--custom-echo-avatar) + 5px + 8px); 1420 | margin-left: 0; 1421 | width: calc(100% - (var(--custom-echo-avatar) + 5px + 8px)); 1422 | 1423 | .flex-container { 1424 | flex-direction: row-reverse; 1425 | margin-top: -0.5px; 1426 | } 1427 | } 1428 | 1429 | .mes_text { 1430 | float: right; 1431 | clear: both; 1432 | position: relative; 1433 | right: 0; 1434 | left: auto; 1435 | border-radius: 10px; 1436 | overflow: hidden; 1437 | background-color: var(--SmartThemeUserMesBlurTintColor); 1438 | 1439 | &::before { 1440 | content: ""; 1441 | position: absolute; 1442 | top: 0; 1443 | left: 0; 1444 | width: var(--custom-EchoAvatarWidth, 25%); 1445 | height: var(--custom-EchoAvatarHeight, 30px); 1446 | background: var(--mes-avatar-url) center no-repeat; 1447 | background-size: cover; 1448 | background-attachment: fixed; 1449 | -webkit-mask-image: 1450 | linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1451 | linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1) 30%), 1452 | linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1453 | linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) 40%); 1454 | mask-image: 1455 | linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1456 | linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1) 30%), 1457 | linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1458 | linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) 40%); 1459 | -webkit-mask-composite: destination-in; 1460 | mask-composite: intersect; 1461 | border-radius: 10px 0 0 10px; 1462 | z-index: 3; 1463 | 1464 | @media screen and (max-width: 1000px) { 1465 | width: var(--custom-EchoAvatarMobileWidth, 25%); 1466 | height: var(--custom-EchoAvatarMobileHeight, 250px); 1467 | } 1468 | } 1469 | } 1470 | .name_text { 1471 | margin-right: 0; 1472 | text-align: right; 1473 | } 1474 | 1475 | .mes_text, 1476 | .last_mes .mes_text { 1477 | padding: 10px 20px 10px var(--custom-EchoAvatarWidth, 25%) !important; 1478 | background-color: var(--SmartThemeUserMesBlurTintColor); 1479 | 1480 | @media screen and (max-width: 1000px) { 1481 | padding: 10px 20px 10px var(--custom-EchoAvatarMobileWidth, 25%) !important; 1482 | } 1483 | } 1484 | } 1485 | 1486 | /* Echo: Character Message 回聲：角色訊息 */ 1487 | &[is_user="false"] { 1488 | .mes_text { 1489 | background-color: var(--SmartThemeBotMesBlurTintColor); 1490 | 1491 | &::before { 1492 | content: ""; 1493 | position: absolute; 1494 | top: 0; 1495 | right: 0; 1496 | width: var(--custom-EchoAvatarWidth, 25%); 1497 | height: var(--custom-EchoAvatarHeight, 30px); 1498 | background: var(--mes-avatar-url) center no-repeat; 1499 | background-size: cover; 1500 | background-attachment: fixed; 1501 | -webkit-mask-image: 1502 | linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1503 | linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 30%), 1504 | linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1505 | linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) 40%); 1506 | mask-image: 1507 | linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1508 | linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 30%), 1509 | linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1510 | linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) 40%); 1511 | -webkit-mask-composite: destination-in; 1512 | mask-composite: intersect; 1513 | border-radius: 0 10px 10px 0; 1514 | z-index: 3; 1515 | 1516 | @media screen and (max-width: 1000px) { 1517 | width: var(--custom-EchoAvatarMobileWidth, 25%); 1518 | height: var(--custom-EchoAvatarMobileHeight, 250px); 1519 | } 1520 | } 1521 | } 1522 | .mes_text, 1523 | .last_mes .mes_text { 1524 | padding: 10px var(--custom-EchoAvatarWidth, 25%) 10px 20px !important; 1525 | 1526 | @media screen and (max-width: 1000px) { 1527 | padding: 10px var(--custom-EchoAvatarMobileWidth, 25%) 10px 20px !important; 1528 | } 1529 | } 1530 | } 1531 | } 1532 | 1533 | .mesAvatarWrapper { 1534 | display: flex; 1535 | align-items: center; 1536 | gap: 8px; 1537 | flex-wrap: wrap; 1538 | min-height: 45px; 1539 | padding-top: 5px; 1540 | } 1541 | .mesIDDisplay { 1542 | background: rgba(225, 225, 225, 0.2); 1543 | padding: 0 8px; 1544 | border-radius: 8px; 1545 | opacity: 0.8; 1546 | } 1547 | .timestamp { 1548 | font-size: calc(var(--mainFontSize) * 0.7); 1549 | font-weight: 400; 1550 | white-space: nowrap; 1551 | margin-right: 5px; 1552 | } 1553 | 1554 | .mes_reasoning_summary { 1555 | left: calc(var(--custom-echo-avatar) + 5px + 8px); 1556 | } 1557 | .mes_reasoning_header > .icon-svg { 1558 | display: block; 1559 | opacity: 0.8 !important; 1560 | margin-right: 3px; 1561 | } 1562 | 1563 | .last_mes { 1564 | .mes_text { 1565 | margin-bottom: 10px; 1566 | } 1567 | 1568 | .mesAvatarWrapper { 1569 | padding-bottom: unset; 1570 | } 1571 | .swipe_right, 1572 | .swipe_left { 1573 | opacity: 0.6; 1574 | transform: scale(0.8); 1575 | } 1576 | .swipe_left, 1577 | .swipeRightBlock { 1578 | bottom: 10px !important; 1579 | } 1580 | .swipeRightBlock { 1581 | position: absolute; 1582 | display: flex; 1583 | flex-direction: row-reverse; 1584 | justify-content: flex-end; 1585 | right: 0px; 1586 | } 1587 | .swipes-counter { 1588 | width: 60px; 1589 | text-align: center; 1590 | white-space: nowrap; 1591 | text-overflow: ellipsis; 1592 | opacity: 0.9 !important; 1593 | letter-spacing: 1.5px; 1594 | } 1595 | } 1596 | 1597 | .lastInContext { 1598 | border-top: var(--customlastInContext) !important; 1599 | opacity: 1 !important; 1600 | border-radius: 0; 1601 | } 1602 | } 1603 | 1604 | /* --- Chat Style: Whisper 聊天風格：「低語」 --- */ 1605 | 1606 | body.whisperstyle #chat { 1607 | .mes { 1608 | display: block; 1609 | flex-direction: column; 1610 | align-items: flex-start; 1611 | margin-top: 10px; 1612 | width: 100%; 1613 | color: var(--SmartThemeBodyColor); 1614 | position: relative; 1615 | padding: 1em; 1616 | padding-top: 45px !important; 1617 | border-radius: 15px; 1618 | 1619 | &::before { 1620 | content: ""; 1621 | position: absolute; 1622 | top: 0; 1623 | right: 0; 1624 | width: var(--customWhisperAvatarWidth, 50%); 1625 | height: 100px; 1626 | background: var(--mes-avatar-url) var(--customWhisperAvatarAlign) no-repeat; 1627 | background-size: cover; 1628 | mask-image: linear-gradient(to bottom, black 60%, rgba(0, 0, 0, 0) 100%); 1629 | mask-size: 100% 100%; 1630 | mask-repeat: no-repeat; 1631 | -webkit-mask-image: linear-gradient(to left, black 60%, rgba(0, 0, 0, 0) 100%); 1632 | -webkit-mask-size: 100% 100%; 1633 | -webkit-mask-repeat: no-repeat; 1634 | z-index: 0; 1635 | border-radius: 0 15px 0 0 !important; 1636 | opacity: 0.8; 1637 | } 1638 | &.last_mes::before { 1639 | filter: none; 1640 | } 1641 | &::after { 1642 | content: ""; 1643 | position: absolute; 1644 | top: 70px; 1645 | right: 0; 1646 | width: 5px; 1647 | height: 30px; 1648 | opacity: 0.9; 1649 | z-index: 3; 1650 | } 1651 | @media screen and (max-width: 1000px) { 1652 | &::before { 1653 | top: 0; 1654 | width: 55%; 1655 | min-height: 125px !important; 1656 | } 1657 | &::after { 1658 | top: 95px; 1659 | } 1660 | 1661 | } 1662 | 1663 | /* Whisper: User Message 低語：使用者訊息 */ 1664 | &[is_user="true"] { 1665 | background-color: var(--SmartThemeUserMesBlurTintColor) !important; 1666 | 1667 | &::after { 1668 | border-right: 3.5px solid var(--customThemeColor); 1669 | } 1670 | } 1671 | /* Whisper: Character Message 低語：角色訊息 */ 1672 | &[is_user="false"] { 1673 | background-color: var(--SmartThemeBotMesBlurTintColor) !important; 1674 | 1675 | &::after { 1676 | border-right: 3.5px solid var(--SmartThemeBodyColor); 1677 | } 1678 | } 1679 | 1680 | .lastInContext { 1681 | border: 0px; 1682 | box-shadow: none !important; 1683 | border-radius: 0; 1684 | } 1685 | 1686 | .mesAvatarWrapper, 1687 | .mes_buttons, 1688 | .mes_edit_buttons, 1689 | .mes_reasoning_details{ 1690 | z-index: 2; 1691 | } 1692 | .mes_block { 1693 | display: block; 1694 | padding: 0 !important; 1695 | overflow: visible; 1696 | position: relative; 1697 | transform: translateY(calc(var(--custom-ChatAvatar) * (-1 + 0.325))) !important; 1698 | background-color: unset !important; 1699 | box-shadow: unset !important; 1700 | } 1701 | 1702 | .mes_text { 1703 | position: relative; 1704 | display: inline-block; 1705 | width: 100%; 1706 | max-width: 100%; 1707 | margin-bottom: 0 !important; 1708 | padding-bottom: 0 !important; 1709 | } 1710 | 1711 | .mes_timer, 1712 | .mesIDDisplay, 1713 | .tokenCounterDisplay { 1714 | display: inline-block; 1715 | transform: translateY(calc(var(--custom-ChatAvatar) * -0.375)); 1716 | } 1717 | } 1718 | 1719 | .ch_name { 1720 | margin-bottom: 10px; 1721 | 1722 | .name_text { 1723 | display: inline-block !important; 1724 | margin-right: 5px; 1725 | } 1726 | } 1727 | 1728 | .mesAvatarWrapper { 1729 | display: flex; 1730 | align-items: center; 1731 | gap: 8px; 1732 | flex-wrap: wrap; 1733 | min-height: 45px; 1734 | } 1735 | .mesIDDisplay { 1736 | background: var(--customBgColor1); 1737 | padding: 0 8px; 1738 | border-radius: 8px; 1739 | opacity: 0.8; 1740 | } 1741 | .timestamp { 1742 | font-size: calc(var(--mainFontSize) * 0.7); 1743 | font-weight: 400; 1744 | white-space: nowrap; 1745 | margin-right: 5px; 1746 | } 1747 | .mes_reasoning_summary { 1748 | left: calc(var(--custom-echo-avatar) + 5px + 8px); 1749 | 1750 | } 1751 | 1752 | .last_mes { 1753 | padding-bottom: 5px !important; 1754 | 1755 | .mesAvatarWrapper { 1756 | padding-bottom: unset; 1757 | } 1758 | 1759 | .swipe_right, 1760 | .swipe_left { 1761 | opacity: 0.6; 1762 | transform: scale(0.8); 1763 | } 1764 | 1765 | .swipe_left, 1766 | .swipeRightBlock { 1767 | bottom: 10px !important; 1768 | } 1769 | .swipeRightBlock { 1770 | position: absolute; 1771 | display: flex; 1772 | flex-direction: row-reverse; 1773 | justify-content: flex-end; 1774 | right: 20px; 1775 | } 1776 | .swipes-counter { 1777 | width: 60px; 1778 | text-align: center; 1779 | white-space: nowrap; 1780 | text-overflow: ellipsis; 1781 | opacity: 0.9 !important; 1782 | letter-spacing: 1.5px; 1783 | } 1784 | } 1785 | 1786 | .menu_button { 1787 | background: color-mix(in srgb, var(--SmartThemeBlurTintColor) 25%, transparent); 1788 | } 1789 | } 1790 | 1791 | /* --- Chat Style: Hush 聊天風格：「輕聲」 --- */ 1792 | 1793 | body.hushstyle #chat { 1794 | .mes { 1795 | display: block; 1796 | flex-direction: column; 1797 | align-items: flex-start; 1798 | margin-top: 10px; 1799 | width: 100%; 1800 | color: var(--SmartThemeBodyColor); 1801 | position: relative; 1802 | padding: 1.3em 1.2em; 1803 | border-radius: 15px; 1804 | 1805 | &.last_mes::before { 1806 | filter: none; 1807 | } 1808 | &::after { 1809 | content: ""; 1810 | position: absolute; 1811 | top: 40px; 1812 | right: 0; 1813 | width: 5px; 1814 | height: 30px; 1815 | opacity: 0.9; 1816 | z-index: 3; 1817 | } 1818 | 1819 | /* Soft: User Message 輕聲：使用者訊息 */ 1820 | &[is_user="true"] { 1821 | background-color: var(--SmartThemeUserMesBlurTintColor) !important; 1822 | 1823 | &::after { 1824 | border-right: 3.5px solid var(--customThemeColor); 1825 | } 1826 | } 1827 | /* Soft: Character Message 輕聲：角色訊息 */ 1828 | &[is_user="false"] { 1829 | background-color: var(--SmartThemeBotMesBlurTintColor) !important; 1830 | 1831 | &::after { 1832 | border-right: 3.5px solid var(--SmartThemeBodyColor); 1833 | } 1834 | } 1835 | 1836 | .lastInContext { 1837 | border: 0; 1838 | border-top: var(--customlastInContext) !important; 1839 | box-shadow: none !important; 1840 | border-radius: 0; 1841 | } 1842 | 1843 | .mesAvatarWrapper, 1844 | .mes_buttons, 1845 | .mes_edit_buttons, 1846 | .mes_reasoning_details{ 1847 | z-index: 2; 1848 | } 1849 | .mes_block { 1850 | display: block; 1851 | padding: 0 !important; 1852 | overflow: visible; 1853 | position: relative; 1854 | transform: translateY(calc(var(--custom-ChatAvatar) * (-1 + 0.325))) !important; 1855 | background-color: unset !important; 1856 | box-shadow: unset !important; 1857 | } 1858 | 1859 | .mes_text { 1860 | position: relative; 1861 | display: inline-block; 1862 | width: 100%; 1863 | max-width: 100%; 1864 | margin-bottom: 0 !important; 1865 | padding-bottom: 0 !important; 1866 | } 1867 | 1868 | .mes_timer, 1869 | .mesIDDisplay, 1870 | .tokenCounterDisplay { 1871 | display: inline-block; 1872 | transform: translateY(calc(var(--custom-ChatAvatar) * -0.375)); 1873 | } 1874 | } 1875 | 1876 | .ch_name { 1877 | .name_text { 1878 | display: inline-block !important; 1879 | margin-right: 5px; 1880 | } 1881 | } 1882 | 1883 | .mesAvatarWrapper { 1884 | display: flex; 1885 | align-items: center; 1886 | gap: 8px; 1887 | flex-wrap: wrap; 1888 | min-height: 45px; 1889 | } 1890 | .mesIDDisplay { 1891 | background: var(--customBgColor1); 1892 | padding: 0 8px; 1893 | border-radius: 8px; 1894 | opacity: 0.8; 1895 | } 1896 | .timestamp { 1897 | font-size: calc(var(--mainFontSize) * 0.7); 1898 | font-weight: 400; 1899 | white-space: nowrap; 1900 | margin-right: 5px; 1901 | } 1902 | .mes_reasoning_summary { 1903 | left: calc(var(--custom-echo-avatar) + 5px + 8px); 1904 | 1905 | } 1906 | 1907 | .last_mes { 1908 | .mesAvatarWrapper { 1909 | padding-bottom: unset; 1910 | } 1911 | 1912 | .swipe_right, 1913 | .swipe_left { 1914 | opacity: 0.6; 1915 | transform: scale(0.8); 1916 | } 1917 | .swipe_left, 1918 | .swipeRightBlock { 1919 | bottom: 10px !important; 1920 | } 1921 | .swipeRightBlock { 1922 | position: absolute; 1923 | display: flex; 1924 | flex-direction: row-reverse; 1925 | justify-content: flex-end; 1926 | right: 20px; 1927 | } 1928 | 1929 | .swipes-counter { 1930 | width: 60px; 1931 | text-align: center; 1932 | white-space: nowrap; 1933 | text-overflow: ellipsis; 1934 | opacity: 0.9 !important; 1935 | letter-spacing: 1.5px; 1936 | } 1937 | } 1938 | } 1939 | 1940 | /* --- Chat Style: Ripple 聊天風格：「漣漪」 --- */ 1941 | 1942 | body.ripplestyle #chat { 1943 | .mes { 1944 | background: var(--SmartThemeBotMesBlurTintColor) !important; 1945 | border-radius: 15px; 1946 | padding: 0 !important; 1947 | margin: 8px 0 !important; 1948 | 1949 | &[is_user="true"] { 1950 | background-color: var(--SmartThemeUserMesBlurTintColor) !important; 1951 | } 1952 | 1953 | .mesAvatarWrapper { 1954 | position: sticky; 1955 | top: 0; 1956 | padding-bottom: 45px; 1957 | padding-right: 0; 1958 | 1959 | /* General Avatar 一般頭像 */ 1960 | .avatar { 1961 | display: flex; 1962 | top: 0; 1963 | justify-content: center; 1964 | align-items: center; 1965 | width: var(--customRippleAvatarWidth); 1966 | height: calc(var(--customRippleAvatarWidth) * var(--customRippleAvatarRatio)); 1967 | min-width:var(--customRippleAvatarWidth); 1968 | min-height: calc(var(--customRippleAvatarWidth) * var(--customRippleAvatarRatio)); 1969 | aspect-ratio: 2 / 3; 1970 | border: none !important; 1971 | margin-right: unset; 1972 | border-radius: 15px 0 0 0 !important; 1973 | overflow: hidden; 1974 | flex: unset !important; 1975 | 1976 | img { 1977 | width: var(--customRippleAvatarWidth); 1978 | height: calc(var(--customRippleAvatarWidth) * var(--customRippleAvatarRatio)); 1979 | min-width:var(--customRippleAvatarWidth); 1980 | min-height: calc(var(--customRippleAvatarWidth) * var(--customRippleAvatarRatio)); 1981 | border: 0 !important; 1982 | border-radius: 15px 0 0 0 !important; 1983 | -webkit-mask-image: 1984 | linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1985 | linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1) 30%), 1986 | linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1987 | linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) 40%); 1988 | mask-image: 1989 | linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1990 | linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1) 30%), 1991 | linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 0%), 1992 | linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) 40%); 1993 | -webkit-mask-composite: destination-in; 1994 | mask-composite: intersect; 1995 | } 1996 | } 1997 | } 1998 | 1999 | .mes_block { 2000 | background: none !important; 2001 | border: none !important; 2002 | box-shadow: none !important; 2003 | padding-top: 20px; 2004 | padding-left: 5px; 2005 | 2006 | .ch_name::after { 2007 | content: ""; 2008 | width: 100%; 2009 | border-bottom: 1px solid var(--SmartThemeBodyColor); 2010 | padding-bottom: 5px; 2011 | margin-bottom: 5px; 2012 | opacity: 0.45; 2013 | } 2014 | } 2015 | } 2016 | 2017 | .last_mes { 2018 | .swipeRightBlock, 2019 | .swipe_left { 2020 | bottom: 10px !important; 2021 | } 2022 | } 2023 | 2024 | @media screen and (max-width: 1000px) { 2025 | .mes .avatar { 2026 | width: var(--customRippleAvatarMobileWidth) !important; 2027 | height: calc(var(--customRippleAvatarMobileWidth) * var(--customRippleAvatarRatio)) !important; 2028 | min-width:var(--customRippleAvatarMobileWidth) !important; 2029 | min-height: calc(var(--customRippleAvatarMobileWidth) * var(--customRippleAvatarRatio)) !important; 2030 | 2031 | img { 2032 | width: var(--customRippleAvatarMobileWidth) !important; 2033 | height: calc(var(--customRippleAvatarMobileWidth) * var(--customRippleAvatarRatio)) !important; 2034 | min-width: var(--customRippleAvatarMobileWidth) !important; 2035 | min-height: calc(var(--customRippleAvatarMobileWidth) * var(--customRippleAvatarRatio)) !important; 2036 | } 2037 | } 2038 | } 2039 | } 2040 | body.ripplestyle.no-timer.no-mesIDDisplay.no-tokenCount { 2041 | #chat .mes .mesAvatarWrapper { 2042 | padding-bottom: 0 !important; 2043 | } 2044 | } 2045 | body.ripplestyle.big-avatars #chat .mes { 2046 | .avatar { 2047 | width: var(--customRippleAvatarWidth) !important; 2048 | height: calc(var(--customRippleAvatarWidth) * var(--customRippleAvatarRatio)) !important; 2049 | min-width:var(--customRippleAvatarWidth) !important; 2050 | min-height: calc(var(--customRippleAvatarWidth) * var(--customRippleAvatarRatio)) !important; 2051 | 2052 | img { 2053 | width: var(--customRippleAvatarWidth) !important; 2054 | height: calc(var(--customRippleAvatarWidth) * var(--customRippleAvatarRatio)) !important; 2055 | min-width:var(--customRippleAvatarWidth) !important; 2056 | min-height: calc(var(--customRippleAvatarWidth) * var(--customRippleAvatarRatio)) !important; 2057 | } 2058 | } 2059 | 2060 | @media screen and (max-width: 1000px) { 2061 | .avatar { 2062 | width: var(--customRippleAvatarMobileWidth) !important; 2063 | height: calc(var(--customRippleAvatarMobileWidth) * var(--customRippleAvatarRatio)) !important; 2064 | min-width:var(--customRippleAvatarMobileWidth) !important; 2065 | min-height: calc(var(--customRippleAvatarMobileWidth) * var(--customRippleAvatarRatio)) !important; 2066 | 2067 | img { 2068 | width: var(--customRippleAvatarMobileWidth) !important; 2069 | height: calc(var(--customRippleAvatarMobileWidth) * var(--customRippleAvatarRatio)) !important; 2070 | min-width: var(--customRippleAvatarMobileWidth) !important; 2071 | min-height: calc(var(--customRippleAvatarMobileWidth) * var(--customRippleAvatarRatio)) !important; 2072 | } 2073 | } 2074 | } 2075 | } 2076 | 2077 | /* --- Chat Style: Tide 聊天風格：「潮汐」 --- */ 2078 | 2079 | body.tidestyle #chat { 2080 | padding: 0 15px; 2081 | 2082 | @media screen and (max-width: 1000px) { 2083 | padding: 0 1em; 2084 | } 2085 | 2086 | .mes { 2087 | display: block; 2088 | flex-direction: column; 2089 | align-items: flex-start; 2090 | color: var(--SmartThemeBodyColor); 2091 | position: relative; 2092 | padding: 0; 2093 | margin-top: 10px; 2094 | margin-bottom: 0 !important; 2095 | 2096 | .ch_name .flex-container { 2097 | margin-bottom: 5px !important; 2098 | } 2099 | 2100 | .mes_block { 2101 | display: block; 2102 | padding: 0; 2103 | overflow: visible; 2104 | position: relative; 2105 | transform: translateY(calc(var(--custom-ChatAvatar) * (-1 + 0.325))) !important; 2106 | background-color: unset !important; 2107 | box-shadow: none !important; 2108 | 2109 | .flex-container { 2110 | flex-wrap: wrap; 2111 | } 2112 | } 2113 | 2114 | .mes_text { 2115 | position: relative; 2116 | display: inline-block; 2117 | overflow: hidden; 2118 | border-radius: 0; 2119 | padding-top: 10px; 2120 | padding-bottom: 0 !important; 2121 | max-width: 70%; 2122 | 2123 | p { 2124 | display: block; 2125 | width: fit-content; 2126 | margin: 0; 2127 | margin-bottom: 8px !important; 2128 | background: var(--SmartThemeBotMesBlurTintColor); 2129 | padding: 6px 14px !important; 2130 | border-radius: 18px; 2131 | } 2132 | 2133 | @media screen and (max-width: 1000px) { 2134 | max-width: 90%; 2135 | } 2136 | } 2137 | 2138 | .mes_timer, 2139 | .mesIDDisplay, 2140 | .tokenCounterDisplay { 2141 | display: inline-block; 2142 | transform: translateY(calc(var(--custom-ChatAvatar) * -0.375)); 2143 | } 2144 | 2145 | /* Tide: User Message 潮汐：使用者訊息 */ 2146 | &[is_user="true"] { 2147 | .avatar { 2148 | margin-right: 0; 2149 | margin-left: 5px; 2150 | } 2151 | .mesAvatarWrapper { 2152 | flex-direction: row-reverse; 2153 | padding-right: 0 !important; 2154 | padding-left: 2%; 2155 | } 2156 | .ch_name { 2157 | flex-direction: row-reverse; 2158 | float: right; 2159 | clear: both; 2160 | margin-right: calc(var(--custom-echo-avatar) + 5px + 8px); 2161 | margin-left: 0; 2162 | width: calc(100% - (var(--custom-echo-avatar) + 5px + 8px)); 2163 | 2164 | .flex-container { 2165 | flex-direction: row-reverse; 2166 | margin-right: 6px; 2167 | } 2168 | } 2169 | 2170 | .mes_text { 2171 | float: right; 2172 | clear: both; 2173 | position: relative; 2174 | right: 0; 2175 | left: auto; 2176 | border-radius: 10px; 2177 | overflow: hidden; 2178 | display: flex; 2179 | flex-direction: column; 2180 | align-items: flex-end; 2181 | } 2182 | .name_text { 2183 | margin-right: 0; 2184 | text-align: right; 2185 | } 2186 | 2187 | p { 2188 | background: var(--SmartThemeUserMesBlurTintColor); 2189 | border-radius: 18px; 2190 | } 2191 | } 2192 | } 2193 | 2194 | .ch_name { 2195 | .name_text { 2196 | display: inline-block !important; 2197 | margin-right: 5px; 2198 | } 2199 | } 2200 | 2201 | .mesAvatarWrapper { 2202 | display: flex; 2203 | align-items: center; 2204 | gap: 8px; 2205 | flex-wrap: wrap; 2206 | min-height: 45px; 2207 | padding-top: 10px; 2208 | } 2209 | .mesIDDisplay { 2210 | background: rgba(225, 225, 225, 0.2); 2211 | padding: 0 8px; 2212 | border-radius: 8px; 2213 | opacity: 0.8; 2214 | } 2215 | .timestamp { 2216 | font-size: calc(var(--mainFontSize) * 0.7); 2217 | font-weight: 400; 2218 | white-space: nowrap; 2219 | margin-right: 5px; 2220 | } 2221 | 2222 | .mes_reasoning_summary { 2223 | left: calc(var(--custom-echo-avatar) + 5px + 8px); 2224 | 2225 | } 2226 | .mes_reasoning_header > .icon-svg { 2227 | display: block; 2228 | opacity: 0.8 !important; 2229 | margin-right: 3px; 2230 | } 2231 | 2232 | .last_mes { 2233 | .mesAvatarWrapper { 2234 | padding-bottom: unset; 2235 | } 2236 | .swipe_right, 2237 | .swipe_left { 2238 | opacity: 0.6; 2239 | transform: scale(0.8); 2240 | } 2241 | .swipe_left, 2242 | .swipeRightBlock { 2243 | bottom: 8px !important; 2244 | } 2245 | .swipeRightBlock { 2246 | position: absolute; 2247 | display: flex; 2248 | flex-direction: row-reverse; 2249 | justify-content: flex-end; 2250 | right: 0px; 2251 | } 2252 | .swipes-counter { 2253 | width: 60px; 2254 | text-align: center; 2255 | white-space: nowrap; 2256 | text-overflow: ellipsis; 2257 | opacity: 0.9 !important; 2258 | letter-spacing: 1.5px; 2259 | } 2260 | } 2261 | } 2262 | 2263 | /* Character Name Field Fix 角色名稱欄位修正 */ 2264 | body:not(.echostyle):not(.whisperstyle):not(.ripplestyle) .name_text { 2265 | display: inline-block !important; 2266 | } 2267 | @media (max-width: 1000px) { 2268 | body:not(.echostyle) .name_text { 2269 | display: block !important; 2270 | width: 100% !important; 2271 | margin-bottom: 0px !important; 2272 | } 2273 | } 2274 | 2275 | /* Message ID Display 訊息計數器（訊息 ID 顯示）*/ 2276 | body.flatchat, 2277 | body.bubblechat, 2278 | body.documentstyle, 2279 | body.ripplestyle { 2280 | .mesAvatarWrapper { 2281 | display: grid; 2282 | justify-items: center; 2283 | } 2284 | } 2285 | body.flatchat, 2286 | body.bubblechat, 2287 | body.documentstyle, 2288 | body.ripplestyle { 2289 | .mesIDDisplay { 2290 | background: var(--customBgColor2) !important; 2291 | width: fit-content; 2292 | padding: 0 8px; 2293 | border-radius: 8px; 2294 | justify-self: center; 2295 | text-align: center; 2296 | margin-top: 5px !important; 2297 | margin-bottom: 3px; 2298 | } 2299 | } 2300 | 2301 | /* --- Chat Input 聊天訊息輸入 --- */ 2302 | 2303 | /* Chat Input Box 聊天輸入框 */ 2304 | #send_form { 2305 | border-radius: 10px; 2306 | border: 1.25px solid color-mix(in srgb, var(--SmartThemeBodyColor) 60%, transparent); 2307 | background-color: var(--SmartThemeBlurTintColor); 2308 | opacity: 0.6; 2309 | margin-bottom: 5px !important; 2310 | transition: all 0.5s ease; 2311 | 2312 | &:hover { 2313 | opacity: 0.8; 2314 | border: 1.25px solid color-mix(in srgb, var(--SmartThemeBodyColor) 80%, transparent); 2315 | 2316 | #send_but { 2317 | text-shadow: 0 0 5px color-mix(in srgb, var(--SmartThemeBodyColor) 80%, transparent); 2318 | } 2319 | } 2320 | 2321 | &:focus-within { 2322 | border: 1.25px solid var(--customThemeColor) !important; 2323 | opacity: 1; 2324 | 2325 | #send_but { 2326 | color: var(--customThemeColor); 2327 | text-shadow: 0 0 5px color-mix(in srgb, var(--customThemeColor) 80%, transparent); 2328 | opacity: 1; 2329 | transition: all 0.5s ease !important; 2330 | } 2331 | } 2332 | } 2333 | @media screen and (max-width: 1000px) { 2334 | #send_form { 2335 | margin-bottom: 0 !important; 2336 | border-radius: 10px 10px 0 0; 2337 | box-shadow: 0 0 10px color-mix(in srgb, var(--SmartThemeBlurTintColor) 50%, transparent); 2338 | border: unset !important; 2339 | border-top: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 50%, transparent) !important; 2340 | 2341 | &:visited, 2342 | &:focus, 2343 | &:focus-within, 2344 | &:focus-visible { 2345 | border: unset !important; 2346 | border-top: 1.25px solid var(--customThemeColor) !important; 2347 | opacity: 1; 2348 | } 2349 | } 2350 | body:has([data-slide-toggle="shown"]) { 2351 | #send_form { 2352 | border-radius: 0 !important; 2353 | } 2354 | } 2355 | } 2356 | 2357 | #send_textarea { 2358 | --progColor: color-mix(in srgb, var(--SmartThemeBodyColor) 30%, transparent) !important; 2359 | --progFlashColor: color-mix(in srgb, var(--SmartThemeBodyColor) 20%, transparent) !important; 2360 | --progSuccessColor: var(--customThemeColor); 2361 | --progErrorColor: rgb(189, 54, 47); 2362 | --progAbortedColor: color-mix(in srgb, var(--SmartThemeBodyColor) 50%, transparent) !important; 2363 | --progWidth: 1.25px; 2364 | border: 0 !important; 2365 | 2366 | &::placeholder { 2367 | font-size: 14px; 2368 | } 2369 | } 2370 | .select2-search__field { 2371 | &::placeholder { 2372 | font-size: 14px; 2373 | } 2374 | } 2375 | 2376 | /* Chat Menu 聊天選單 */ 2377 | #nonQRFormItems { 2378 | gap: 5px; 2379 | font-size: calc(var(--mainFontSize)); 2380 | padding: 5px 10px; 2381 | transition: all 0.8s ease; 2382 | left: 0; 2383 | 2384 | #options_button { 2385 | font-size: calc(var(--mainFontSize)); 2386 | width: calc(var(--mainFontSize)* 0.9) !important; 2387 | height: calc(var(--mainFontSize)* 0.9) !important; 2388 | } 2389 | } 2390 | #leftSendForm { 2391 | display: flex; 2392 | align-items: center; 2393 | justify-content: center; 2394 | 2395 | > * { 2396 | min-width: calc(var(--mainFontSize)); 2397 | min-height: calc(var(--mainFontSize)) !important; 2398 | display: flex; 2399 | align-items: center; 2400 | justify-content: center; 2401 | } 2402 | } 2403 | 2404 | /* Chat Input Overall 整體聊天輸入欄位 */ 2405 | @media screen and (max-width: 1000px) { 2406 | #form_sheld { 2407 | margin: 0 !important; 2408 | padding: 0 !important; 2409 | border: 0 !important; 2410 | width: 100% !important; 2411 | max-width: 100% !important; 2412 | left: 0 !important; 2413 | right: 0 !important; 2414 | position: relative !important; 2415 | box-sizing: border-box !important; 2416 | transform: translateX(0) !important; 2417 | } 2418 | #form_sheld * { 2419 | box-sizing: border-box !important; 2420 | } 2421 | } 2422 | @supports (-webkit-overflow-scrolling: touch) { 2423 | #form_sheld { 2424 | width: 100% !important; 2425 | min-width: 100% !important; 2426 | max-width: 100% !important; 2427 | left: 0 !important; 2428 | right: 0 !important; 2429 | } 2430 | } 2431 | 2432 | /* --- Chat Bar Menu 聊天選單 --- */ 2433 | 2434 | #logprobsViewer, 2435 | #floatingPrompt, 2436 | #cfgConfig { 2437 | top: var(--topBarBlockSize); 2438 | max-height: calc(100dvh - var(--topBarBlockSize)); 2439 | padding-top: 30px; 2440 | padding-left: 1em; 2441 | padding-right: 1em; 2442 | border-radius: 0; 2443 | border: 0; 2444 | border-top: 1.25px solid var(--SmartThemeBodyColor); 2445 | width: calc(((100dvw - var(--sheldWidth)) / 2)); 2446 | } 2447 | #extensionsMenu, 2448 | .options-content { 2449 | padding: 5px 8px; 2450 | box-shadow: 0 0 25px color-mix(in srgb, var(--SmartThemeBlurTintColor) 80%, transparent); 2451 | } 2452 | .options-content { 2453 | font-size: calc(var(--mainFontSize) * 1); 2454 | 2455 | a { 2456 | font-weight: 500; 2457 | } 2458 | hr { 2459 | margin: 5px 0; 2460 | } 2461 | } 2462 | 2463 | 2464 | /* CHARACTER EXPRESSIONS 角色表情圖示 2465 | - - - - - - - - - - - - - - - - - */ 2466 | 2467 | /* --- Expression Holder 表情容器 --- */ 2468 | 2469 | .expression-holder { 2470 | position: absolute; 2471 | mask-image: var(--VN-expression-holder); 2472 | -webkit-mask-image: var(--VN-expression-holder); 2473 | mask-size: 100% 100%; 2474 | -webkit-mask-size: 100% 100%; 2475 | mask-repeat: no-repeat; 2476 | -webkit-mask-repeat: no-repeat; 2477 | 2478 | .drag-grabber { 2479 | top: 50px; 2480 | } 2481 | } 2482 | .zoomed_avatar { 2483 | backdrop-filter: none !important; 2484 | background-color: transparent !important; 2485 | } 2486 | 2487 | /* --- Visual Novel Mode 視覺小說模式 --- */ 2488 | 2489 | body.waifuMode { 2490 | #sheld { 2491 | height: var(--VN-sheld-height); 2492 | top: calc(100% - var(--VN-sheld-height)); 2493 | border-radius: 20px 20px 0 0; 2494 | padding-top: 0 !important; 2495 | bottom: 0; 2496 | 2497 | @media screen and (max-width: 1000px) { 2498 | border-radius: 0; 2499 | } 2500 | } 2501 | 2502 | #expression-holder { 2503 | .zoomed_avatar, 2504 | .panelControlBar { 2505 | padding-top: 50px !important; 2506 | } 2507 | } 2508 | 2509 | .zoomed_avatar_container { 2510 | bottom: 0px !important; 2511 | } 2512 | } 2513 | 2514 | 2515 | 2516 | /* AI CONFIG & CONNECTION SETTINGS 2517 | AI 配置與 API 連線設定 2518 | - - - - - - - - - - - - - - - - - */ 2519 | 2520 | /* Top Tip 頂部提示 */ 2521 | .editable-slider-notification { 2522 | position: relative; 2523 | width: 100%; 2524 | top: -15px; 2525 | text-align: center; 2526 | color: var(--customThemeColor); 2527 | font-style: italic; 2528 | letter-spacing: 0.8px; 2529 | } 2530 | 2531 | /* AI Config Title AI 配置標題 */ 2532 | #left-nav-panel { 2533 | overflow: hidden; 2534 | padding: 0 1em; 2535 | 2536 | .title_restorable { 2537 | margin: 15px 0; 2538 | padding: 0; 2539 | min-height: 33px; 2540 | padding-bottom: 8px; 2541 | background-image: none !important; 2542 | border-radius: 0px !important; 2543 | letter-spacing: 0.8px; 2544 | display: flex; 2545 | align-items: center; 2546 | border: 0; 2547 | border-bottom: 1.25px solid var(--SmartThemeBodyColor); 2548 | font-weight: 500; 2549 | } 2550 | 2551 | .fillLeft .scrollableInner { 2552 | padding: 0; 2553 | padding-right: 15px; 2554 | } 2555 | } 2556 | 2557 | /* Prompt Sorting 提示詞排序 */ 2558 | .openai_logit_bias_preset_form { 2559 | margin: 5px 0; 2560 | } 2561 | #completion_prompt_manager { 2562 | ul#completion_prompt_manager_list { 2563 | border: 0; 2564 | background: none; 2565 | } 2566 | 2567 | .completion_prompt_manager_header { 2568 | color: var(--SmartThemeBodyColor); 2569 | padding: 0; 2570 | } 2571 | 2572 | .completion_prompt_manager_footer { 2573 | padding: 0; 2574 | } 2575 | 2576 | #completion_prompt_manager_list { 2577 | padding: 0; 2578 | margin: 5px 0; 2579 | 2580 | .completion_prompt_manager_prompt_name { 2581 | .prompt-manager-inspect-action { 2582 | color: var(--SmartThemeBodyColor); 2583 | 2584 | &:hover { 2585 | filter: brightness(1.2); 2586 | text-decoration: none; 2587 | } 2588 | } 2589 | } 2590 | } 2591 | } 2592 | #prompt-manager-reset-character, 2593 | #completion_prompt_manager_popup { 2594 | border: 0; 2595 | 2596 | .completion_prompt_manager_popup_entry_form_footer { 2597 | #completion_prompt_manager_popup_entry_form_reset { 2598 | color: var(--customThemeColor); 2599 | } 2600 | } 2601 | } 2602 | #completion_prompt_manager #completion_prompt_manager_list { 2603 | .completion_prompt_manager_prompt.completion_prompt_manager_prompt_disabled { 2604 | border: 0; 2605 | opacity: 0.5; 2606 | transition: opacity 0.5s ease; 2607 | margin-bottom: 5px !important; 2608 | 2609 | &:hover { 2610 | opacity: 0.8; 2611 | } 2612 | } 2613 | 2614 | .completion_prompt_manager_prompt:not(.completion_prompt_manager_prompt_disabled) { 2615 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 5%, transparent); 2616 | border-radius: 10px; 2617 | transition: background 0.5s ease; 2618 | margin-bottom: 5px !important; 2619 | 2620 | &:hover { 2621 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 10%, transparent); 2622 | } 2623 | } 2624 | } 2625 | #completion_prompt_manager .completion_prompt_manager_header_advanced span { 2626 | filter: drop-shadow(0px 0px 5px var(--SmartThemeShadowColor)); 2627 | } 2628 | 2629 | 2630 | 2631 | /* API CONNECTIONS 2632 | AI 連線設定 2633 | - - - - - - - - - - - - - - - - - */ 2634 | #rm_api_block { 2635 | h4 { 2636 | margin-top: 15px; 2637 | margin-bottom: 5px; 2638 | letter-spacing: 0.8px; 2639 | } 2640 | 2641 | .wide100p .flex-container:has(select) { 2642 | margin-bottom: 20px; 2643 | } 2644 | 2645 | #openai_api { 2646 | margin-bottom: 20px; 2647 | } 2648 | 2649 | input[type='checkbox'] { 2650 | margin-left: unset; 2651 | } 2652 | 2653 | select#main_api, 2654 | select#chat_completion_source { 2655 | margin-top: 5px; 2656 | } 2657 | } 2658 | #completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_disabled .completion_prompt_manager_prompt_name, #completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_disabled .completion_prompt_manager_prompt_name .prompt-manager-inspect-action, 2659 | #completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .completion_prompt_manager_prompt_name .fa-solid { 2660 | color: var(--SmartThemeBodyColor); 2661 | } 2662 | 2663 | 2664 | 2665 | /* ADVANCED FORMATTING 2666 | 進階格式化 2667 | - - - - - - - - - - - - - - - - - */ 2668 | #AdvancedFormatting { 2669 | .spaceEvenly { 2670 | gap: 15px !important; 2671 | } 2672 | } 2673 | 2674 | 2675 | 2676 | /* WORLDS/LOREBOOKS 世界資訊/知識書 2677 | - - - - - - - - - - - - - - - - - */ 2678 | 2679 | /* --- World Info Entries 世界資訊條目 --- */ 2680 | #WorldInfo { 2681 | .standoutHeader { 2682 | margin: 5px 0; 2683 | padding: 5px 10px; 2684 | border-radius: 10px !important; 2685 | font-weight: 500; 2686 | background: var(--customBgColor1); 2687 | transition: all 0.5s ease; 2688 | border: 0px solid var(--SmartThemeBodyColor); 2689 | min-height: 44px; 2690 | 2691 | @media screen and (max-width: 1000px) { 2692 | min-height: 40px; 2693 | } 2694 | } 2695 | 2696 | .select2_multi_sameline+span.select2-container .select2-selection--multiple { 2697 | margin: 5px 0; 2698 | padding: 5px; 2699 | 2700 | li { 2701 | margin-bottom: unset; 2702 | } 2703 | } 2704 | } 2705 | 2706 | /* World Header 條目標題 */ 2707 | .world_entry { 2708 | .inline-drawer-header { 2709 | cursor: initial; 2710 | margin: 0; 2711 | padding: 5px 10px; 2712 | border-radius: 0; 2713 | border: 0; 2714 | font-weight: 500; 2715 | background: none; 2716 | 2717 | &:hover { 2718 | background: none; 2719 | } 2720 | } 2721 | } 2722 | /* World Content 條目內容 */ 2723 | .wi-card-entry { 2724 | border: 1px solid transparent; 2725 | border-radius: 10px; 2726 | padding: 5px; 2727 | margin: 10px 0; 2728 | background: var(--customBgColor2); 2729 | transition: all 0.5s ease; 2730 | 2731 | &:hover { 2732 | filter: brightness(1.25); 2733 | } 2734 | 2735 | &:active { 2736 | background: var(--customBgColor1); 2737 | } 2738 | } 2739 | 2740 | /* Menu Reset 格式重置 */ 2741 | #world_popup { 2742 | all: unset; 2743 | background: transparent !important; 2744 | 2745 | @media screen and (max-width: 1000px) { 2746 | overflow-y: auto; 2747 | background: transparent !important; 2748 | min-width: 700px; 2749 | padding: 0 15px; 2750 | } 2751 | } 2752 | 2753 | /* --- Options 選項 --- */ 2754 | 2755 | /* OPTIONS TITLE 選項標題 */ 2756 | .select2_choice_clickable_buttonstyle + span.select2-container { 2757 | .select2-selection__choice__display { 2758 | color: var(--SmartThemeBodyColor); 2759 | background-color: transparent; 2760 | white-space: break-spaces; 2761 | word-break: break-all; 2762 | transition: all 0.5s ease; 2763 | 2764 | &:hover { 2765 | background-color: transparent; 2766 | color: var(--customThemeColor); 2767 | } 2768 | } 2769 | } 2770 | .select2-container { 2771 | .select2-selection--multiple, 2772 | .select2-selection--single { 2773 | .select2-selection__choice { 2774 | background-color: var(--SmartThemeBlurTintColor); 2775 | } 2776 | } 2777 | &.select2-selection--multiple, 2778 | &.select2-selection--single { 2779 | border-radius: 10px; 2780 | } 2781 | } 2782 | 2783 | /* Option Buttons 選項按鈕 */ 2784 | span.select2.select2-container { 2785 | .select2-selection__choice__remove { 2786 | color: var(--SmartThemeBodyColor); 2787 | min-height: 20px; 2788 | background-color: var(--customThemeColor); 2789 | white-space: break-spaces; 2790 | word-break: break-all; 2791 | transition: all 0.5s ease; 2792 | 2793 | &:hover { 2794 | color: var(--customThemeColor); 2795 | background-color: var(--SmartThemeBlurTintColor); 2796 | } 2797 | } 2798 | } 2799 | 2800 | 2801 | 2802 | /* USER SETTINGS 使用者設定 2803 | - - - - - - - - - - - - - - - - - */ 2804 | 2805 | /* User Settings Title 使用者設定標題 */ 2806 | #user-settings-block { 2807 | h4 { 2808 | margin: 15px 0; 2809 | padding: 0; 2810 | min-height: 33px; 2811 | padding-bottom: 8px; 2812 | background-image: none !important; 2813 | border-radius: 0px !important; 2814 | letter-spacing: 0.8px; 2815 | display: flex; 2816 | align-items: center; 2817 | border: 0; 2818 | color: var(--SmartThemeBodyColor); 2819 | border-bottom: 1.25px solid var(--SmartThemeBodyColor); 2820 | } 2821 | 2822 | @media screen and (max-width: 1000px) { 2823 | div[name="userSettingsRowOne"] { 2824 | display: flex; 2825 | flex-wrap: wrap; 2826 | } 2827 | div[name="userSettingsRowOne"] > div:first-child { 2828 | flex: 0 0 100%; 2829 | } 2830 | 2831 | #ui_language_select { 2832 | width: 300px; 2833 | } 2834 | #version_display { 2835 | padding: 5px 0; 2836 | } 2837 | } 2838 | } 2839 | #ChatMessageHandlingToggles .checkbox-container.flex-container { 2840 | justify-self: center; 2841 | } 2842 | 2843 | /* Field Spacing 欄位間距 */ 2844 | #user-settings-block-content.flex-container.spaceEvenly { 2845 | gap: 15px !important; 2846 | } 2847 | #customCSS { 2848 | max-height: 25dvh; 2849 | } 2850 | 2851 | /* Expand & Collapse Options 展開＆收合選項 */ 2852 | .userSettingsInnerExpandable { 2853 | border: 1px solid transparent; 2854 | background: var(--customBgColor1); 2855 | padding: 5px 10px !important; 2856 | margin-top: 8px; 2857 | transition: all 0.5s ease; 2858 | letter-spacing: 0.6px; 2859 | 2860 | &:hover { 2861 | background: var(--customBgColor2); 2862 | border: 1px solid var(--SmartThemeBorderColor); 2863 | filter: brightness(1.2) !important; 2864 | } 2865 | } 2866 | 2867 | 2868 | 2869 | /* BACKGROUND IMAGE 背景圖片 2870 | - - - - - - - - - - - - - - - - - */ 2871 | 2872 | /* Background Image Preview Title 背景圖片預覽標題 */ 2873 | .BGSampleTitle { 2874 | font-weight: 600; 2875 | background-color: transparent; 2876 | padding: 5px 10px; 2877 | font-style: italic; 2878 | box-sizing: border-box; 2879 | color: #FFF; 2880 | text-shadow: 0 0px 5px var(--SmartThemeBlurTintColor) !important; 2881 | } 2882 | #Backgrounds h3.wide100p.textAlignCenter { 2883 | border: 0; 2884 | padding: 0; 2885 | } 2886 | 2887 | /* Menu Adjustments 選單調整 */ 2888 | .bg_list { 2889 | display: flex; 2890 | flex-wrap: wrap; 2891 | max-width: 100vw; 2892 | justify-content: center; 2893 | margin: 0 auto; 2894 | padding: 0; 2895 | box-sizing: border-box; 2896 | overflow: hidden; 2897 | gap: 5px; 2898 | } 2899 | 2900 | /* Background Image Preview Style 背景圖片預覽樣式 */ 2901 | .bg_example { 2902 | background-repeat: no-repeat; 2903 | background-position: center; 2904 | border-radius: 15px; 2905 | transition: all 0.5s ease; 2906 | box-sizing: border-box; 2907 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent); 2908 | 2909 | &:hover { 2910 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 50%, transparent); 2911 | box-shadow: 0 0 10px color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent); 2912 | } 2913 | 2914 | &.locked { 2915 | outline: 1.25px solid var(--customThemeColor); 2916 | } 2917 | 2918 | @media screen and (max-width: 1000px) { 2919 | flex: 1 1 calc(45%); 2920 | } 2921 | } 2922 | 2923 | 2924 | 2925 | /* EXTENSIONS 擴充功能 2926 | - - - - - - - - - - - - - - - - - */ 2927 | 2928 | #extensionsMenu { 2929 | > .extension_container { 2930 | > div { 2931 | transition: all 0.5s ease; 2932 | 2933 | &:hover { 2934 | color: var(--SmartThemeBodyColor); 2935 | filter: none; 2936 | } 2937 | } 2938 | } 2939 | > div:not(.extension_container) { 2940 | transition: all 0.5s ease; 2941 | &:hover { 2942 | color: var(--customThemeColor); 2943 | filter: none; 2944 | } 2945 | } 2946 | } 2947 | .options-content { 2948 | a { 2949 | transition: all 0.5s ease; 2950 | &:hover { 2951 | color: var(--SmartThemeBodyColor); 2952 | filter: none; 2953 | } 2954 | } 2955 | } 2956 | .list-group-item { 2957 | transition: all 0.5s ease; 2958 | &:hover { 2959 | color: var(--customThemeColor); 2960 | filter: none; 2961 | } 2962 | } 2963 | @media screen and (max-width: 1000px) { 2964 | .list-group .list-group-item.ctx-item { 2965 | padding: 5px !important; 2966 | } 2967 | 2968 | .extensions_toolbar { 2969 | margin-bottom: 20px; 2970 | margin-top: -10px; 2971 | 2972 | 2973 | } 2974 | } 2975 | 2976 | #extensions_settings, 2977 | #extensions_settings2 { 2978 | .inline-drawer-toggle.inline-drawer-header { 2979 | padding: 5px 10px !important; 2980 | border-radius: 10px; 2981 | font-weight: 500; 2982 | background: var(--customBgColor2) !important; 2983 | border: 1px solid transparent; 2984 | transition: all 0.5s ease; 2985 | letter-spacing: 0.6px; 2986 | 2987 | &:hover { 2988 | background: var(--customBgColor1) !important; 2989 | border: 1px solid var(--SmartThemeBorderColor); 2990 | filter: brightness(1.2) !important; 2991 | } 2992 | } 2993 | .note-link-span { 2994 | color: var(--customThemeColor); 2995 | box-shadow: 0 0 0px black; 2996 | } 2997 | } 2998 | 2999 | #extensionSideBar { 3000 | .panelControlBar { 3001 | padding-top: 0px !important; 3002 | } 3003 | #extensionSideBarContainer { 3004 | .sideBarItem { 3005 | transition: all 0.5s ease !important; 3006 | gap: 5px; 3007 | 3008 | .chatStats { 3009 | .counterBlock { 3010 | &::after { 3011 | color: var(--white30a); 3012 | } 3013 | } 3014 | } 3015 | } 3016 | } 3017 | } 3018 | 3019 | .extensions_info .extension_block { 3020 | padding: 6px 10px; 3021 | margin-bottom: 5px; 3022 | border: 0; 3023 | border-radius: 10px; 3024 | transition: all 0.5s ease; 3025 | 3026 | &:hover { 3027 | background: color-mix(in srgb, var(--SmartThemeBodyColor) 10%, transparent); 3028 | } 3029 | } 3030 | 3031 | 3032 | /* PERSONA MANAGEMENT 使用者角色管理 3033 | - - - - - - - - - - - - - - - - - */ 3034 | 3035 | /* 使用者角色名稱 */ 3036 | #persona_controls .persona_name { 3037 | color: var(--customThemeColor); 3038 | opacity: 1 !important; 3039 | } 3040 | 3041 | #user_avatar_block { 3042 | .avatar-container { 3043 | position: relative; 3044 | display: flex; 3045 | flex-direction: row; 3046 | align-items: center; 3047 | gap: 10px; 3048 | padding: 10px; 3049 | border-radius: 12px; 3050 | cursor: pointer; 3051 | width: 100%; 3052 | background-color: var(--customBgColor2) !important; 3053 | transition: all 0.5s ease; 3054 | 3055 | &:hover { 3056 | background-color: var(--customBgColor1) !important; 3057 | filter: brightness(1.1) !important; 3058 | } 3059 | 3060 | &.selected { 3061 | border: 1.25px solid var(--customThemeColor) !important; 3062 | background-color: transparent !important; 3063 | } 3064 | 3065 | &.default_persona { 3066 | .avatar { 3067 | outline: 0 solid var(--customThemeColor); 3068 | } 3069 | } 3070 | } 3071 | } 3072 | 3073 | .avatar-container.default_persona { 3074 | .set_default_persona { 3075 | color: var(--customThemeColor); 3076 | } 3077 | } 3078 | 3079 | .ch_description { 3080 | margin-bottom: 5px; 3081 | } 3082 | #persona-management-block .avatar_container_states .menu_button { 3083 | font-size: small; 3084 | } 3085 | 3086 | 3087 | 3088 | /* CHARACTER/GROUP MANAGEMENT 3089 | 角色／聊天群組管理 3090 | - - - - - - - - - - - - - - - - - */ 3091 | 3092 | /* --- Quick Character Selection 快速角色選擇 --- */ 3093 | 3094 | #HotSwapWrapper .hotswap.avatars_inline { 3095 | display: flex; 3096 | flex-wrap: wrap; 3097 | overflow: hidden; 3098 | justify-content: center; 3099 | scroll-behavior: smooth; 3100 | max-height: calc(var(--avatar-base-height) + 2 * var(--avatar-base-border-radius)); 3101 | -ms-overflow-style: none; 3102 | margin: 5px; 3103 | margin-right: 10px; 3104 | transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); 3105 | 3106 | *:focus { 3107 | outline: none; 3108 | } 3109 | 3110 | &::-webkit-scrollbar { 3111 | display: none; 3112 | } 3113 | 3114 | @media screen and (max-width: 1000px) { 3115 | margin-right: 0; 3116 | padding-right: 30px; 3117 | justify-content: flex-start; 3118 | transition: all 0.5s ease-in-out; 3119 | } 3120 | } 3121 | body.big-avatars #HotSwapWrapper .hotswap.avatars_inline { 3122 | max-height: calc(var(--avatar-base-width) * var(--big-avatar-width-factor) + 35px) 3123 | } 3124 | 3125 | #HotSwapWrapper:hover .hotswap.avatars_inline { 3126 | max-height: 25dvh !important; 3127 | overflow: auto; 3128 | transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1); 3129 | 3130 | @media screen and (max-width: 1000px) { 3131 | max-height: 30dvh !important; 3132 | transition: all 0.5s ease-in-out !important; 3133 | } 3134 | } 3135 | #HotSwapWrapper:not(:hover) .hotswap.avatars_inline { 3136 | transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 3137 | @media screen and (max-width: 1000px) { 3138 | transition: all 0.5s ease-in-out; 3139 | } 3140 | } 3141 | 3142 | /* --- Character/Group Names 角色／群組名稱 --- */ 3143 | 3144 | #rm_button_selected_ch { 3145 | opacity: 1; 3146 | margin-bottom: 8px; 3147 | padding-left: 10px !important; 3148 | border-radius: 0px !important; 3149 | letter-spacing: 0.8px; 3150 | display: flex; 3151 | align-items: center; 3152 | border: 0; 3153 | border-left: 3.5px solid var(--customThemeColor); 3154 | 3155 | h2 { 3156 | font-size: calc(var(--mainFontSize) * 1.1); 3157 | font-weight: 600; 3158 | } 3159 | } 3160 | 3161 | /* --- Transition Effects 過渡動畫 --- */ 3162 | 3163 | .bogus_folder_select, 3164 | .character_select, 3165 | .avatar-container, 3166 | .group_select { 3167 | transition: all 0.3s ease; 3168 | 3169 | &:hover { 3170 | background-color: rgba(170, 170, 170, 0.15); 3171 | filter: brightness(1.25); 3172 | } 3173 | } 3174 | body.charListGrid { 3175 | #rm_print_characters_block { 3176 | transition: all 0.5s ease; 3177 | 3178 | .bogus_folder_select:hover, 3179 | .character_select:hover, 3180 | .group_select:hover { 3181 | transition: all 0.5s ease; 3182 | } 3183 | } 3184 | } 3185 | #user_avatar_block.gridView { 3186 | .avatar-container { 3187 | &:hover { 3188 | transition: all 0.5s ease; 3189 | } 3190 | } 3191 | } 3192 | 3193 | /* --- Character Avatar 頭像 --- */ 3194 | 3195 | #avatar_controls { 3196 | height: auto; 3197 | width: 0 !important; 3198 | } 3199 | 3200 | .avatar { 3201 | img { 3202 | border: 1.25px solid var(--SmartThemeBodyColor) !important; 3203 | } 3204 | } 3205 | .add_avatar { 3206 | filter: drop-shadow(0px 0px 2px); 3207 | 3208 | &:hover { 3209 | filter: drop-shadow(0px 0px 5px var(--SmartThemeBodyColor)); 3210 | } 3211 | } 3212 | 3213 | /* --- Multi-Character Selection 多角色選擇區 --- */ 3214 | 3215 | body.charListGrid #rm_print_characters_block .bogus_folder_select, 3216 | body.charListGrid #rm_print_characters_block .character_select, 3217 | body.charListGrid #rm_print_characters_block .group_select { 3218 | max-width: 110px; 3219 | } 3220 | 3221 | #rm_print_characters_block { 3222 | .flex-container { 3223 | gap: 10px; 3224 | margin-bottom: 5px; 3225 | } 3226 | 3227 | body.charListGrid & { 3228 | .flex-container { 3229 | gap: 5px; 3230 | padding: 5px 10px; 3231 | } 3232 | .avatar { 3233 | transform: scale(1.5); 3234 | transform-origin: center center; 3235 | margin: 25px 0; 3236 | margin-bottom: 20px; 3237 | } 3238 | .avatar.avatar_collage img { 3239 | border: 0 !important; 3240 | } 3241 | > * { 3242 | flex: 0 1 calc(50% - 10px); 3243 | box-sizing: border-box; 3244 | } 3245 | } 3246 | 3247 | &.group_overlay_mode_select { 3248 | .character_select { 3249 | background-color: unset; 3250 | transition: all 0.5s ease; 3251 | 3252 | &.character_selected { 3253 | background-color: rgba(170, 170, 170, 0.15); 3254 | } 3255 | } 3256 | } 3257 | 3258 | .avatar img { 3259 | border: 0 !important; 3260 | outline: 1px solid var(--SmartThemeBodyColor); 3261 | } 3262 | 3263 | .text_block { 3264 | text-align: center; 3265 | justify-self: center; 3266 | } 3267 | } 3268 | body:not(.charListGrid) { 3269 | .bogus_folder_select .avatar, 3270 | .character_select .avatar { 3271 | margin: 0 5px; 3272 | } 3273 | 3274 | .character_name_block { 3275 | margin-bottom: 0; 3276 | } 3277 | } 3278 | body:not(.charListGrid).big-avatars { 3279 | .bogus_folder_select .avatar, 3280 | .character_select .avatar { 3281 | margin: unset; 3282 | } 3283 | } 3284 | .bogus_folder_back_placeholder.flex.alignitemscenter.textAlignCenter { 3285 | font-size: calc(var(--mainFontSize) * 0.8) !important; 3286 | } 3287 | 3288 | @media screen and (max-width: 1000px) { 3289 | body.charListGrid #rm_print_characters_block { 3290 | height: auto !important; 3291 | overflow: visible; 3292 | transition: all 0.5s ease; 3293 | } 3294 | } 3295 | 3296 | /* --- Character Preview 個別角色編輯區 --- */ 3297 | 3298 | #form_create { 3299 | padding-right: 10px; 3300 | } 3301 | @media screen and (max-width: 1000px) { 3302 | #form_create { 3303 | padding-right: 10px !important; 3304 | } 3305 | } 3306 | 3307 | #character_popup { 3308 | padding: 1em; 3309 | box-shadow: none; 3310 | min-height: calc(100dvh - var(--topBarBlockSize)); 3311 | border-radius: 0; 3312 | border: none !important; 3313 | border-top: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 3314 | 3315 | .inline-drawer-header { 3316 | margin: 0; 3317 | padding: 5px 10px; 3318 | 3319 | h4 { 3320 | margin-top: 0px; 3321 | } 3322 | } 3323 | 3324 | @media screen and (max-width: 1000px) { 3325 | min-width: 100vw !important; 3326 | border: none !important; 3327 | border-top: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 25%, transparent) !important; 3328 | } 3329 | } 3330 | 3331 | #rm_ch_create_block { 3332 | .avatar { 3333 | img, 3334 | & { 3335 | width: calc(var(--custom-avatar) * var(--big-avatar-width-factor) * 2.5); 3336 | height: calc(var(--custom-avatar) * var(--big-avatar-height-factor) * 2.5); 3337 | border-radius: 10px !important; 3338 | margin: 10px 0; 3339 | margin-bottom: 15px; 3340 | } 3341 | } 3342 | 3343 | .title_restorable { 3344 | margin: 0; 3345 | padding: 0; 3346 | min-height: unset; 3347 | padding-bottom: unset; 3348 | border: 0 !important; 3349 | } 3350 | } 3351 | 3352 | #right-nav-panel:not([data-menu-type="character_edit"]) #right-nav-panel-tabs, 3353 | #right-nav-panel:not([data-menu-type="character_edit"]) .right-nav-panel-tabs { 3354 | display: none !important; 3355 | } 3356 | 3357 | #export_format_popup { 3358 | padding: 5px; 3359 | } 3360 | 3361 | #firstMessageWrapper { 3362 | .menu_button { 3363 | white-space: nowrap; 3364 | margin-left: 8px; 3365 | min-height: 28px; 3366 | } 3367 | } 3368 | 3369 | .buttons_block .menu_button { 3370 | min-width: 30px; 3371 | min-height: 30px; 3372 | } 3373 | #result_info .right_menu_button { 3374 | font-size: unset !important; 3375 | } 3376 | 3377 | #rm_print_characters_block { 3378 | padding-right: 10px; 3379 | } 3380 | 3381 | /* --- Favorite Name Effects 最愛角色名稱特效 --- */ 3382 | 3383 | .fav_on { 3384 | color: var(--customThemeColor) !important; 3385 | } 3386 | .character_select.is_fav, 3387 | .group_select.is_fav, 3388 | .group_member.is_fav { 3389 | .avatar { 3390 | outline: 1px solid var(--customThemeColor); 3391 | filter: drop-shadow(0 0 1px var(--customThemeColor)); 3392 | } 3393 | .ch_name { 3394 | color: var(--customThemeColor); 3395 | 3396 | /* 特殊符號與閃爍特效 */ 3397 | &::before { 3398 | content: "♥︎"; 3399 | color: var(--customThemeColor); 3400 | margin-right: 5px; 3401 | animation: pulse 1s infinite; 3402 | } 3403 | } 3404 | } 3405 | @keyframes pulse { 3406 | 0%, 100% { 3407 | transform: scale(0.8); 3408 | opacity: 1; 3409 | } 3410 | 50% { 3411 | transform: scale(0.5); 3412 | opacity: 0.5; 3413 | } 3414 | } 3415 | 3416 | .avatar.is_fav { 3417 | outline: 1px solid var(--customThemeColor); 3418 | filter: drop-shadow(0px 0px 2px var(--customThemeColor)); 3419 | } 3420 | 3421 | .avatars_inline_small { 3422 | .avatar.is_fav { 3423 | filter: drop-shadow(0px 0px 0px var(--SmartThemeBodyColor)) !important; 3424 | } 3425 | } 3426 | 3427 | /* --- Tags 標籤 --- */ 3428 | 3429 | .rm_tag_controls { 3430 | display: flex; 3431 | column-gap: 10px; 3432 | row-gap: 5px; 3433 | flex-direction: row; 3434 | flex-wrap: wrap; 3435 | align-items: flex-start; 3436 | margin: 10px 5px; 3437 | } 3438 | 3439 | .tag { 3440 | opacity: 0.6; 3441 | border-color: transparent; 3442 | border-radius: 5px; 3443 | box-sizing: border-box; 3444 | padding: 2px 8px; 3445 | margin: 2px; 3446 | font-size: calc(var(--mainFontSize) * 0.85); 3447 | gap: 5px; 3448 | width: fit-content; 3449 | cursor: pointer; 3450 | transition: all 0.5s ease; 3451 | letter-spacing: 1.25px; 3452 | font-style: italic; 3453 | min-height: 23.5px; 3454 | } 3455 | .tag_view_list { 3456 | h3 { 3457 | min-width: unset !important; 3458 | } 3459 | } 3460 | 3461 | /* --- Folders 資料夾 --- */ 3462 | 3463 | .rm_tag_filter .tag { 3464 | &.actionable { 3465 | justify-content: center; 3466 | align-items: center; 3467 | background-color: transparent !important; 3468 | color: var(--SmartThemeBodyColor); 3469 | text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3); 3470 | box-shadow: none; 3471 | transition: all 0.5s ease; 3472 | cursor: pointer; 3473 | 3474 | &:hover { 3475 | color: var(--customThemeColor); 3476 | border: 1px solid var(--customThemeColor); 3477 | } 3478 | } 3479 | 3480 | &.excluded { 3481 | opacity: 0.5 !important; 3482 | border: 1px dashed; 3483 | position: relative; 3484 | display: inline-flex; 3485 | align-items: center; 3486 | justify-content: center; 3487 | width: fit-content; 3488 | text-align: center; 3489 | box-shadow: none; 3490 | cursor: default; 3491 | color: var(--SmartThemeBodyColor); 3492 | 3493 | &::after { 3494 | content: ""; 3495 | } 3496 | } 3497 | 3498 | &.selected { 3499 | border: 1px solid var(--SmartThemeBodyColor); 3500 | cursor: default; 3501 | } 3502 | } 3503 | 3504 | /* --- Creator Notes 創作者筆記 --- */ 3505 | 3506 | #creator_notes_spoiler { 3507 | img { 3508 | max-width: 100%; 3509 | height: auto; 3510 | display: block; 3511 | object-fit: contain; 3512 | margin: 0 auto; 3513 | } 3514 | } 3515 | 3516 | /* --- Group Chat 群組聊天 --- */ 3517 | 3518 | #rm_group_members, 3519 | #rm_group_add_members { 3520 | padding: 10px; 3521 | } 3522 | 3523 | 3524 | 3525 | /* CHAT MESSAGES FIXED 聊天訊息修正 3526 | - - - - - - - - - - - - - - - - - */ 3527 | 3528 | /* 訊息邊框修正 */ 3529 | body.flatchat, 3530 | body.bubblechat { 3531 | #chat .mes_block { 3532 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 10%, transparent); 3533 | } 3534 | } 3535 | body.echostyle { 3536 | #chat .mes_text { 3537 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 10%, transparent); 3538 | } 3539 | } 3540 | body.whisperstyle, 3541 | body.hushstyle, 3542 | body.ripplestyle { 3543 | #chat .mes { 3544 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 10%, transparent); 3545 | } 3546 | 3547 | } 3548 | body.tidestyle { 3549 | #chat .mes_text p { 3550 | border: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 10%, transparent) !important; 3551 | } 3552 | } 3553 | 3554 | /* 滑動訊息編號 */ 3555 | body.swipeAllMessages .mes:not(.last_mes) .swipes-counter { 3556 | opacity: 0.8 !important; 3557 | margin-bottom: 20px !important; 3558 | margin-right: var(--customMesPadding) !important; 3559 | } 3560 | body.echostyle.swipeAllMessages .mes:not(.last_mes) .swipes-counter { 3561 | margin-right: 0 !important; 3562 | margin-bottom: 10px !important; 3563 | } 3564 | 3565 | /* 訊息推理區塊間距 */ 3566 | body.echostyle, 3567 | body.whisperstyle, 3568 | body.hushstyle, 3569 | body.tidestyle { 3570 | .mes_reasoning_summary { 3571 | margin-top: 15px !important; 3572 | } 3573 | } 3574 | 3575 | /* 最大上下文標記 */ 3576 | .lastInContext { 3577 | margin-top: 15px; 3578 | opacity: 1 !important; 3579 | border-top: var(--customlastInContext) !important; 3580 | } 3581 | body.echostyle, 3582 | body.whisperstyle, 3583 | body.hushstyle, 3584 | body.tidestyle { 3585 | #chat .lastInContext .mes_block { 3586 | transform: translateY(calc(var(--custom-ChatAvatar) * (-1 + 0.17))) !important; 3587 | } 3588 | } 3589 | :not(body.ripplestyle) .lastInContext .mes_block { 3590 | margin-top: 10px; 3591 | } 3592 | body.bubblechat .lastInContext .mesAvatarWrapper, 3593 | body.bubblechat .lastInContext .mes_block { 3594 | margin-top: 10px !important; 3595 | } 3596 | body.flatchat, body.bubblechat { 3597 | #chat .mes_block { 3598 | padding-bottom: 0; 3599 | } 3600 | #chat .last_mes .mes_block { 3601 | padding-bottom: 25px; 3602 | } 3603 | } 3604 | body.whisperstyle #chat { 3605 | .mes { 3606 | padding-bottom: 0; 3607 | } 3608 | } 3609 | 3610 | /* 行動裝置選單高度更正 */ 3611 | @media screen and (max-width: 1000px) { 3612 | #right-nav-panel, 3613 | #left-nav-panel, 3614 | #floatingPrompt, 3615 | #cfgConfig, 3616 | #WorldInfo, 3617 | #logprobsViewer, 3618 | #movingDivs > div { 3619 | min-width: 100% !important; 3620 | padding: 10px 15px !important; 3621 | padding-bottom: 0 !important; 3622 | border: 0; 3623 | } 3624 | 3625 | #select_chat_popup { 3626 | max-height: 100dvh !important; 3627 | min-height: 100dvh !important; 3628 | margin: 0; 3629 | border-radius: 0 !important; 3630 | border: 0; 3631 | } 3632 | 3633 | .large_dialogue_popup { 3634 | border: 0; 3635 | } 3636 | } 3637 | 3638 | /* 滑動訊息左側按鈕修正 */ 3639 | .swipes-counter { 3640 | margin-right: 10px; 3641 | margin-bottom: 2px; 3642 | } 3643 | #chat { 3644 | .swipe_left { 3645 | position: absolute; 3646 | right: calc(var(--customMesPadding) + 100px) !important; 3647 | left: auto; 3648 | bottom: 20px; 3649 | } 3650 | } 3651 | body.bubblechat #chat .swipe_left { 3652 | right: calc((var(--customMesPadding) * 2) + 95px) !important; 3653 | bottom: 10px; 3654 | } 3655 | body.documentstyle #chat .swipe_left { 3656 | left: unset !important; 3657 | right: calc(var(--customMesPadding) + 100px) !important; 3658 | } 3659 | body.echostyle #chat .swipe_left { 3660 | right: calc(var(--customMesPadding) + 85px) !important; 3661 | } 3662 | 3663 | body.whisperstyle #chat .swipe_left { 3664 | right: calc(var(--customMesPadding) + 105px) !important; 3665 | } 3666 | body.hushstyle #chat .swipe_left { 3667 | right: calc(var(--customMesPadding) + 105px) !important; 3668 | } 3669 | body.ripplestyle #chat .swipe_left { 3670 | right: calc(var(--customMesPadding) + 100px) !important; 3671 | } 3672 | body.tidestyle #chat .swipe_left { 3673 | right: calc(var(--customMesPadding) + 90px) !important; 3674 | } 3675 | 3676 | /* 第一則訊息留白修正 */ 3677 | body.flatchat, 3678 | body.bubblechat, 3679 | body.echostyle, 3680 | body.whisperstyle, 3681 | body.hushstyle, 3682 | body.ripplestyle, 3683 | body.tidestyle { 3684 | #chat .mes[mesid="0"] { 3685 | margin-top: 10px !important; 3686 | } 3687 | } 3688 | 3689 | /* 角色名稱容器修正 */ 3690 | body.echostyle, 3691 | body.whisperstyle, 3692 | body.hushstyle, 3693 | body.tidestyle { 3694 | #chat .ch_name { 3695 | margin-top: 3px; 3696 | margin-left: calc(var(--custom-echo-avatar) + 10px); 3697 | 3698 | @media screen and (max-width: 1000px) { 3699 | margin-left: calc(var(--custom-echo-avatar) + 11px) 3700 | } 3701 | } 3702 | } 3703 | body:not(.ripplestyle) .mes .ch_name .flex-container { 3704 | @media screen and (max-width: 1000px) { 3705 | margin-bottom: 0 !important; 3706 | } 3707 | } 3708 | body.big-avatars.echostyle #chat { 3709 | .ch_name { 3710 | margin-top: -22px !important; 3711 | } 3712 | .mesAvatarWrapper { 3713 | margin-bottom: 20px; 3714 | } 3715 | .mes_text { 3716 | margin-bottom: 15px !important; 3717 | } 3718 | .mes_timer, .mesIDDisplay, .tokenCounterDisplay { 3719 | transform: unset !important; 3720 | margin-bottom: 8px; 3721 | } 3722 | 3723 | @media screen and (max-width: 1000px) { 3724 | .mes[is_user="false"] .ch_name { 3725 | padding-left: 6px; 3726 | } 3727 | .mes[is_user="true"] .ch_name { 3728 | padding-right: 6px; 3729 | } 3730 | } 3731 | } 3732 | body.big-avatars.whisperstyle #chat, 3733 | body.big-avatars.hushstyle #chat, 3734 | body.big-avatars.tidestyle #chat { 3735 | .mes_timer, .mesIDDisplay, .tokenCounterDisplay { 3736 | transform: unset !important; 3737 | } 3738 | .ch_name { 3739 | margin-left: calc(var(--custom-echo-avatar) + 18px); 3740 | margin-bottom: 10px; 3741 | } 3742 | } 3743 | 3744 | /* System Message Display Fix 系統訊息顯示修正 */ 3745 | #chat:has(.mes[ch_name="SillyTavern System"]) { 3746 | .lacommon--quickActions[data-lacommon--anchor="bottom"] { 3747 | display: none; 3748 | } 3749 | } 3750 | body.echostyle { 3751 | #chat .mes[is_system="true"] { 3752 | .mes_text { 3753 | min-height: unset; 3754 | } 3755 | } 3756 | } 3757 | .mes.smallSysMes { 3758 | .mesAvatarWrapper { 3759 | display: none !important; 3760 | } 3761 | } 3762 | body.hushstyle { 3763 | .mes.smallSysMes { 3764 | .mesAvatarWrapper { 3765 | display: unset !important; 3766 | visibility: hidden !important; 3767 | } 3768 | } 3769 | } 3770 | .mes.smallSysMes::before, 3771 | .mes.smallSysMes::after { 3772 | display: none !important; 3773 | } 3774 | 3775 | /* 漣漪訊息修正 */ 3776 | body.hideChatAvatars.ripplestyle #chat { 3777 | .ch_name { 3778 | margin-left: unset; 3779 | } 3780 | 3781 | .mes .mesAvatarWrapper { 3782 | margin-top: 35px; 3783 | top: 35px; 3784 | } 3785 | .mes_text { 3786 | margin-top: unset; 3787 | } 3788 | } 3789 | 3790 | /* 標題間距修正 */ 3791 | @media screen and (max-width: 1000px) { 3792 | #Backgrounds h3.margin0.flex2[data-i18n="Background Image"], 3793 | #rm_extensions_block h3.margin0.flex1[data-i18n="Extensions"] { 3794 | flex-basis: 100% !important; 3795 | width: 100%; 3796 | } 3797 | #rm_extensions_block label.checkbox_label.flexNoGap { 3798 | flex-basis: 100% !important; 3799 | width: 100%; 3800 | } 3801 | #rm_extensions_block input#extensions_notify_updates { 3802 | margin-left: unset; 3803 | } 3804 | } 3805 | #user-settings-block:not(#user-settings-block-content) .flex-container.flexFlowColumn { 3806 | margin-bottom: 10px; 3807 | } 3808 | #Backgrounds .flex-container.alignItemsBaseline.wide100p { 3809 | margin-bottom: 20px; 3810 | } 3811 | 3812 | /* 選單高度修正 */ 3813 | #left-nav-panel, 3814 | #right-nav-panel, 3815 | .drawer-content, 3816 | #WorldInfo { 3817 | @media screen and (max-width: 1000px) { 3818 | max-height: calc(100dvh - var(--topBarBlockSize) - var(--bottomFormBlockSize)) !important; 3819 | border-bottom: 1px solid color-mix(in srgb, var(--SmartThemeBodyColor) 50%, transparent); 3820 | } 3821 | } 3822 | -------------------------------------------------------------------------------- /theme/Glimmer - by Rivelle.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Glimmer - by Rivelle", 3 | "blur_strength": 8, 4 | "main_text_color": "rgba(198, 198, 198, 1)", 5 | "italics_text_color": "rgba(108, 108, 108, 1)", 6 | "underline_text_color": "rgba(223, 223, 223, 1)", 7 | "quote_text_color": "rgba(81, 160, 222, 1)", 8 | "blur_tint_color": "rgba(30, 30, 30, 1)", 9 | "chat_tint_color": "rgba(18, 18, 18, 0)", 10 | "user_mes_blur_tint_color": "rgba(30, 30, 30, 0.3)", 11 | "bot_mes_blur_tint_color": "rgba(255, 255, 255, 0.05)", 12 | "shadow_color": "rgba(30, 30, 30, 1)", 13 | "shadow_width": 3, 14 | "border_color": "rgba(198, 198, 198, 0.1)", 15 | "font_scale": 0.98, 16 | "fast_ui_mode": false, 17 | "waifuMode": false, 18 | "avatar_style": 0, 19 | "chat_display": 3, 20 | "noShadows": false, 21 | "chat_width": 50, 22 | "timer_enabled": true, 23 | "timestamps_enabled": true, 24 | "timestamp_model_icon": true, 25 | "mesIDDisplay_enabled": true, 26 | "hideChatAvatars_enabled": false, 27 | "message_token_count_enabled": true, 28 | "expand_message_actions": false, 29 | "enableZenSliders": false, 30 | "enableLabMode": false, 31 | "hotswap_enabled": true, 32 | "custom_css": "/* - - - - - - - - - - - - - - - - -\n\n \"Moonlit Echoes\" 月下回聲\n ₊*.⊹ ⁎✧‧₊˚\n\n 微 光\n Glimmer (a.k.a. Personalityless Black)\n\n Presented by Rivelle,\n dedicated to all the lovely souls.\n\n GitHub: https://github.com/RivelleDays/SillyTavern-MoonlitEchoesTheme\n\n - - - - - - - - - - - - - - - - - */", 33 | "bogus_folders": true, 34 | "zoomed_avatar_magnification": false, 35 | "reduced_motion": false, 36 | "compact_input_area": true, 37 | "show_swipe_num_all_messages": true 38 | } -------------------------------------------------------------------------------- /theme/Moonlit Echoes - by Rivelle.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Moonlit Echoes - by Rivelle", 3 | "blur_strength": 8, 4 | "main_text_color": "rgba(204, 204, 204, 1)", 5 | "italics_text_color": "rgba(150, 150, 150, 1)", 6 | "underline_text_color": "rgba(250, 198, 121, 1)", 7 | "quote_text_color": "rgba(81, 160, 222, 1)", 8 | "blur_tint_color": "rgba(33, 33, 33, 0.65)", 9 | "chat_tint_color": "rgba(255, 255, 255, 0)", 10 | "user_mes_blur_tint_color": "rgba(45, 45, 45, 0.5)", 11 | "bot_mes_blur_tint_color": "rgba(39, 39, 39, 0.65)", 12 | "shadow_color": "rgba(0, 0, 0, 0.5)", 13 | "shadow_width": 3, 14 | "border_color": "rgba(255, 255, 255, 0)", 15 | "font_scale": 1, 16 | "fast_ui_mode": false, 17 | "waifuMode": false, 18 | "avatar_style": 0, 19 | "chat_display": 4, 20 | "noShadows": false, 21 | "chat_width": 50, 22 | "timer_enabled": true, 23 | "timestamps_enabled": true, 24 | "timestamp_model_icon": true, 25 | "mesIDDisplay_enabled": true, 26 | "hideChatAvatars_enabled": false, 27 | "message_token_count_enabled": true, 28 | "expand_message_actions": false, 29 | "enableZenSliders": false, 30 | "enableLabMode": false, 31 | "hotswap_enabled": true, 32 | "custom_css": "/* - - - - - - - - - - - - - - - - -\n\n \"Moonlit Echoes\" 月下回聲\n ₊*.⊹ ⁎✧‧₊˚\n\n Presented by Rivelle,\n dedicated to all the lovely souls.\n\n - - - - - - - - - - - - - - - - - */", 33 | "bogus_folders": true, 34 | "zoomed_avatar_magnification": false, 35 | "reduced_motion": false, 36 | "compact_input_area": true, 37 | "show_swipe_num_all_messages": false 38 | } -------------------------------------------------------------------------------- /theme/[Moonlit] Glimmer - by Rivelle.json: -------------------------------------------------------------------------------- 1 | { 2 | "moonlitEchoesPreset": true, 3 | "presetVersion": "2.4.1", 4 | "presetName": "Glimmer - by Rivelle", 5 | "settings": { 6 | "customThemeColor": "rgba(81, 160, 222, 1)", 7 | "customThemeColor2": "rgba(255, 255, 255, 1)", 8 | "customBgColor1": "rgba(255, 255, 255, 0.1)", 9 | "customBgColor2": "rgba(255, 255, 255, 0.05)", 10 | "customTopBarColor": "rgba(30, 30, 30, 1)", 11 | "Drawer-iconColor": "rgba(198, 198, 198, 1)", 12 | "sheldBackgroundColor": "rgba(30, 30, 30, 0.6)", 13 | "customScrollbarColor": "rgba(198, 198, 198, 0.5)", 14 | "customCSS-bg-blur": "3", 15 | "sheldBlurStrength": "5", 16 | "customCSS-bg-opacity": "1", 17 | "customCSS-ChatGradientBlur": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%)", 18 | "custom-ChatAvatar": "40px", 19 | "customlastInContext": "1.2px solid var(--customThemeColor)", 20 | "custom-EchoAvatarWidth": "20%", 21 | "custom-EchoAvatarHeight": "300px", 22 | "customWhisperAvatarWidth": "50%", 23 | "customWhisperAvatarAlign": "center", 24 | "customRippleAvatarWidth": "180px", 25 | "customRippleAvatarMobileWidth": "100px", 26 | "messageDetailsAnimationDuration": "0.8s", 27 | "VN-sheld-height": "40dvh", 28 | "VN-expression-holder": "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%)", 29 | "enableMobile-send_form": true, 30 | "enableMessageDetails": false, 31 | "justifyParagraphText": false 32 | } 33 | } --------------------------------------------------------------------------------