Restore shared text button styling
Reintroduce the shared .text-button primitive in WebUI button CSS so model-config preset controls no longer depend on the chat composer being mounted first. Document the shared compact text-action contract and add a focused regression covering Model Presets and Model Configuration text-button usage.
Alessandro committed
Jun 23, 2026 at 17:36 UTC
d707fe7bcf19a9aae813c66d224875cff18ff87f
3 files changed
+73
tests/test_model_config_ui.py
new
+22
@@ -0,0 +1,22 @@
1
+from pathlib import Path
2
+
3
+
4
+PROJECT_ROOT = Path(__file__).resolve().parents[1]
5
+
6
+
7
+def read(*parts: str) -> str:
8
+ return PROJECT_ROOT.joinpath(*parts).read_text(encoding="utf-8")
9
+
10
+
11
+def test_model_config_text_buttons_have_shared_primitive() -> None:
12
+ buttons_css = read("webui", "css", "buttons.css")
13
+ preset_modal = read("plugins", "_model_config", "webui", "main.html")
14
+ config_modal = read("plugins", "_model_config", "webui", "config.html")
15
+
16
+ assert ".text-button {" in buttons_css
17
+ assert "appearance: none;" in buttons_css
18
+ assert ".text-button:hover:not(:disabled)" in buttons_css
19
+ assert ".text-button .material-symbols-outlined" in buttons_css
20
+ assert 'class="text-button preset-add-btn"' in preset_modal
21
+ assert 'class="text-button preset-delete-btn"' in preset_modal
22
+ assert 'class="text-button"' in config_modal
webui/css/AGENTS.md
+1
@@ -19,6 +19,7 @@
19
- Avoid broad selectors that unexpectedly restyle plugin UI or unrelated components.
20
- Keep layout rules responsive and verify text does not overflow fixed controls.
21
- Shared modal buttons use `btn btn-ok` for positive actions and `btn btn-cancel` for dismissive or negative actions.
22
+- Shared compact text actions use `.text-button`; component-local styles may adjust layout or sizing but must not be the only definition of the primitive.
23
- Modal footer action order is positive action first, dismissive or negative action second.
24
- Modal footers use `.modal-footer` plus `data-modal-footer`; do not redefine `.btn`, `.modal-footer`, `.modal-inner`, or `.modal-scroll` inside components.
25
- Shared modal sizing keeps `.modal-inner` centered with `width: 90%`, `max-width: 960px`, and `max-height: 90vh`.
webui/css/buttons.css
+50
@@ -21,6 +21,56 @@
21
box-sizing: border-box;
22
}
23
24
+.text-button {
25
+ appearance: none;
26
+ background-color: transparent;
27
+ border: none;
28
+ border-radius: 5px;
29
+ color: var(--color-text);
30
+ cursor: pointer;
31
+ display: inline-flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+ gap: var(--spacing-xs);
35
+ font-family: "Rubik", Arial, Helvetica, sans-serif;
36
+ font-size: 0.78rem;
37
+ line-height: 1.2;
38
+ opacity: 0.82;
39
+ padding: 6px var(--spacing-sm);
40
+ transition: background-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
41
+}
42
+
43
+.text-button:hover:not(:disabled) {
44
+ opacity: 1;
45
+ background-color: var(--color-background-hover);
46
+}
47
+
48
+.text-button:active:not(:disabled) {
49
+ opacity: 0.5;
50
+}
51
+
52
+.text-button:disabled {
53
+ opacity: 0.4;
54
+ cursor: not-allowed;
55
+}
56
+
57
+.text-button .material-symbols-outlined,
58
+.text-button .material-icons-outlined {
59
+ font-size: 1rem;
60
+ line-height: 1;
61
+ flex-shrink: 0;
62
+}
63
+
64
+.text-button svg {
65
+ width: 14px;
66
+ height: 14px;
67
+ flex-shrink: 0;
68
+}
69
+
70
+.text-button p {
71
+ margin-block: 0;
72
+}
73
+
74
.button.confirm {
75
background: var(--color-highlight);
76
color: #fff;