diff --git a/.env.example b/.env.example index 14245de..87c9636 100644 --- a/.env.example +++ b/.env.example @@ -40,6 +40,7 @@ PS_COMPONENTS=["header", "cpu_mem", "disk", "network", "process", "footer"] # 如要使用插件内置 CSS,请使用 res: 前缀 # 内置 CSS 列表: # - "res:theme-dark.css": 深色主题 +# - "res:theme-vanilla.css": Doki Theme: NekoPara: Vanilla 配色主题 # - "res:no-blur.css": 禁用卡片毛玻璃效果 # - “res:no-radius.css”: 禁用圆角 # - “res:no-shadow.css”: 禁用阴影 diff --git a/.gitignore b/.gitignore index f8e5555..937edf6 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ .pdm-python build/ __pycache__ +/nonebot_plugin_picstatus/res/picstatus-debug.html diff --git a/README.md b/README.md index d9ca24b..33cac0b 100644 --- a/README.md +++ b/README.md @@ -167,6 +167,11 @@ Telegram:[@lgc2333](https://t.me/lgc2333) ## 📝 更新日志 +### 1.1.1 + +- 新增内置 CSS `theme-vanilla.css` +- 微调默认 CSS + ### 1.1.0 - 支持 Pydantic V2 diff --git a/nonebot_plugin_picstatus/__init__.py b/nonebot_plugin_picstatus/__init__.py index 4940fe1..a6be3b0 100644 --- a/nonebot_plugin_picstatus/__init__.py +++ b/nonebot_plugin_picstatus/__init__.py @@ -19,7 +19,7 @@ if config.ps_only_su: usage += "\n注意:仅SuperUser可以使用此指令" -__version__ = "1.1.0" +__version__ = "1.1.1" __plugin_meta__ = PluginMetadata( name="PicStatus", description="以图片形式显示当前设备的运行状态", diff --git a/nonebot_plugin_picstatus/res/css/index.css b/nonebot_plugin_picstatus/res/css/index.css index 822def5..030dfc5 100644 --- a/nonebot_plugin_picstatus/res/css/index.css +++ b/nonebot_plugin_picstatus/res/css/index.css @@ -14,15 +14,14 @@ --card-background-color: #fafafaaa; --default-box-shadow: 2px 2px 6px #6a6a6a66; - --color: var(--secondary-text-color); - --label-red-text-color: var(--status-default-text-color); - --label-orange-text-color: var(--status-default-text-color); - --label-yellow-text-color: var(--status-default-text-color); - --label-green-text-color: var(--status-default-text-color); - --label-cyan-text-color: var(--status-default-text-color); - --label-blue-text-color: var(--status-default-text-color); - --label-purple-text-color: var(--status-default-text-color); - --label-gray-text-color: var(--status-default-text-color); + --label-red-text-color: var(--secondary-text-color); + --label-orange-text-color: var(--secondary-text-color); + --label-yellow-text-color: var(--secondary-text-color); + --label-green-text-color: var(--secondary-text-color); + --label-cyan-text-color: var(--secondary-text-color); + --label-blue-text-color: var(--secondary-text-color); + --label-purple-text-color: var(--secondary-text-color); + --label-gray-text-color: var(--secondary-text-color); --label-black-text-color: #fafafa; --background-color: var(--card-background-color); @@ -36,52 +35,74 @@ --label-gray-bg-color: #bebebeaa; --label-black-bg-color: #3a3a3aaa; + --prog-low-text-color: var(--secondary-text-color); + --prog-medium-text-color: var(--secondary-text-color); + --prog-high-text-color: var(--secondary-text-color); + --prog-low-bg-color: var(--label-green-bg-color); + --prog-medium-bg-color: var(--label-orange-bg-color); + --prog-high-bg-color: var(--label-red-bg-color); + --segment-color: #bebebe; } .red { --background-color: var(--label-red-bg-color); - --color: var(--label-red-text-color); + --secondary-text-color: var(--label-red-text-color); } .orange { --background-color: var(--label-orange-bg-color); - --color: var(--label-orange-text-color); + --secondary-text-color: var(--label-orange-text-color); } .yellow { --background-color: var(--label-yellow-bg-color); - --color: var(--label-yellow-text-color); + --secondary-text-color: var(--label-yellow-text-color); } .green { --background-color: var(--label-green-bg-color); - --color: var(--label-green-text-color); + --secondary-text-color: var(--label-green-text-color); } .cyan { --background-color: var(--label-cyan-bg-color); - --color: var(--label-cyan-text-color); + --secondary-text-color: var(--label-cyan-text-color); } .blue { --background-color: var(--label-blue-bg-color); - --color: var(--label-blue-text-color); + --secondary-text-color: var(--label-blue-text-color); } .purple { --background-color: var(--label-purple-bg-color); - --color: var(--label-purple-text-color); + --secondary-text-color: var(--label-purple-text-color); } .gray { --background-color: var(--label-gray-bg-color); - --color: var(--label-gray-text-color); + --secondary-text-color: var(--label-gray-text-color); } .black { --background-color: var(--label-black-bg-color); - --color: var(--label-black-text-color); + --secondary-text-color: var(--label-black-text-color); +} + +.prog-low { + --background-color: var(--prog-low-bg-color); + --secondary-text-color: var(--prog-low-text-color); +} + +.prog-medium { + --background-color: var(--prog-medium-bg-color); + --secondary-text-color: var(--prog-medium-text-color); +} + +.prog-high { + --background-color: var(--prog-high-bg-color); + --secondary-text-color: var(--prog-high-text-color); } .monospace { @@ -139,7 +160,7 @@ span.label { border-radius: 4px; box-shadow: var(--default-box-shadow); background-color: var(--background-color); - color: var(--color); + color: var(--secondary-text-color); } .label-container { @@ -252,6 +273,7 @@ span.label { .donut-chart .desc { font-size: 12px; word-break: break-word; + color: var(--secondary-text-color); } /* Progress Bar */ @@ -343,5 +365,5 @@ span.label { font-size: 14px; text-align: center; color: var(--primary-text-color); - text-shadow: 1px 1px 1px var(--label-black-text-color); + text-shadow: var(--default-box-shadow); } diff --git a/nonebot_plugin_picstatus/res/css/theme-vanilla.css b/nonebot_plugin_picstatus/res/css/theme-vanilla.css new file mode 100644 index 0000000..b23a9ca --- /dev/null +++ b/nonebot_plugin_picstatus/res/css/theme-vanilla.css @@ -0,0 +1,35 @@ +* { + --font-family: 'Xiaolai SC', 'Xiaolai Mono SC', 'HarmonyOS Sans SC', + 'Source Han Sans SC', 'Source Han Sans', sans-serif; + --monospace-font-family: 'Xiaolai Mono SC', 'JetBrains Mono', 'Cascadia Code', + 'Consolas', monospace; + + --primary-text-color: #cdcdcd; + --secondary-text-color: #686a80; + + --default-background: #272935aa; + --background-mask-color: #3b3c4c55; + --card-background-color: #2b2c3daa; + --default-box-shadow: 2px 2px 6px #9debff9a; + + --background-color: var(--card-background-color); + --label-red-bg-color: #ff5555aa; + --label-orange-bg-color: #efa554aa; + --label-yellow-bg-color: #ffd448aa; + --label-green-bg-color: #1da912aa; + --label-cyan-bg-color: #9debffaa; + --label-blue-bg-color: #6a96e9aa; + --label-purple-bg-color: #9d8df6aa; + --label-gray-bg-color: #6c6f7daa; + --label-black-bg-color: #272935aa; + + --prog-low-bg-color: var(--label-cyan-bg-color); + --prog-medium-bg-color: var(--label-blue-bg-color); + --prog-high-bg-color: var(--label-purple-bg-color); + + --segment-color: var(--primary-text-color); +} + +body { + background-color: #272935; +} diff --git a/nonebot_plugin_picstatus/util.py b/nonebot_plugin_picstatus/util.py index 4f60510..12118be 100644 --- a/nonebot_plugin_picstatus/util.py +++ b/nonebot_plugin_picstatus/util.py @@ -39,7 +39,7 @@ def match_list_regexp(reg_list: List[str], txt: str) -> Optional[re.Match]: def percent_to_color(percent: float) -> str: if percent < 70: - return "green" + return "prog-low" if percent < 90: - return "orange" - return "red" + return "prog-medium" + return "prog-high"