canvas + browser CSS polish
Alessandro committed
Apr 27, 2026 at 00:16 UTC
10e8f5d01a4f663d7961285f8dfb1d70fef1a6fc
6 files changed
+36
-34
plugins/_browser/webui/browser-panel.html
-5
@@ -305,11 +305,6 @@
305
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
306
}
307
308
- .modal-inner.browser-modal .modal-title {
309
- font-size: 0.95rem;
310
- letter-spacing: 0;
311
- }
312
-
308
.modal-inner.browser-modal .modal-close {
309
font-size: 1.35rem;
310
line-height: 1;
plugins/_office/webui/office-panel.html
+1
-6
@@ -148,12 +148,7 @@
148
background: color-mix(in srgb, var(--color-background) 92%, #000 8%);
149
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
150
}
151
-
152
- .modal-inner.office-modal .modal-title {
153
- font-size: 0.95rem;
154
- letter-spacing: 0;
155
- }
156
-
151
+
152
.modal-inner.office-modal .modal-close {
153
font-size: 1.35rem;
154
line-height: 1;
webui/components/canvas/right-canvas-store.js
+2
-1
@@ -257,10 +257,11 @@ const model = {
257
258
widthStyle() {
259
if (this.isMobileMode) return "";
260
+ if (!this.isOpen) return "width: 0;";
261
if (this.isOverlayMode) {
262
return `width: min(${this.width}px, calc(100vw - 44px));`;
263
}
263
- return `width: ${this.isOpen ? this.width : 52}px;`;
264
+ return `width: ${this.width}px;`;
265
},
266
267
getSurface(id) {
webui/components/canvas/right-canvas.css
+27
-21
@@ -38,10 +38,6 @@ body.right-canvas-resizing {
38
transition: width 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
39
}
40
41
-.right-canvas.is-closed .right-canvas-shell {
42
- display: none;
43
-}
44
-
41
.right-canvas-rail {
42
display: flex;
43
flex: 0 0 52px;
@@ -53,6 +49,33 @@ body.right-canvas-resizing {
49
background: color-mix(in srgb, var(--color-background) 92%, #000 8%);
50
}
51
52
+.right-canvas.is-closed {
53
+ width: 0 !important;
54
+ min-width: 0;
55
+ overflow: visible;
56
+ border-left: 0;
57
+ background: transparent;
58
+}
59
+
60
+.right-canvas.is-closed .right-canvas-shell,
61
+.right-canvas.is-closed .right-canvas-resize-handle {
62
+ display: none;
63
+}
64
+
65
+.right-canvas.is-closed .right-canvas-rail {
66
+ position: absolute;
67
+ top: 50%;
68
+ right: 100%;
69
+ z-index: 2;
70
+ height: auto;
71
+ max-height: min(70vh, calc(100vh - 32px));
72
+ transform: translateY(-50%);
73
+ border: 1px solid var(--right-canvas-border);
74
+ border-right: 0;
75
+ border-radius: 8px 0 0 8px;
76
+ box-shadow: -10px 0 30px rgba(0, 0, 0, 0.24);
77
+}
78
+
79
.right-canvas-rail-button,
80
.right-canvas-icon-button,
81
.right-canvas-tab {
@@ -251,23 +274,6 @@ body.right-canvas-overlay-mode .right-canvas.is-open {
274
transform: translateX(0);
275
}
276
254
-body.right-canvas-overlay-mode .right-canvas.is-closed {
255
- overflow: visible;
256
-}
257
-
258
-body.right-canvas-overlay-mode .right-canvas.is-closed .right-canvas-rail {
259
- position: absolute;
260
- right: 100%;
261
- top: 50%;
262
- height: auto;
263
- max-height: 70vh;
264
- transform: translateY(-50%);
265
- border: 1px solid var(--right-canvas-border);
266
- border-right: 0;
267
- border-radius: 8px 0 0 8px;
268
- box-shadow: -10px 0 30px rgba(0, 0, 0, 0.24);
269
-}
270
-
277
body.right-canvas-overlay-mode .right-canvas-resize-handle {
278
display: none;
279
}
webui/css/modals.css
+5
@@ -95,6 +95,11 @@ some classes like modal-header are shared between the old and the new system */
95
white-space: nowrap;
96
}
97
98
+.modal-title {
99
+ font-size: 0.95rem;
100
+ letter-spacing: 0;
101
+}
102
+
103
/* Modal Subheader */
104
.modal-subheader {
105
display: inline;
webui/index.css
+1
-1
@@ -1335,7 +1335,7 @@ a:active {
1335
.settings-modal-title {
1336
margin-top: 0;
1337
margin-bottom: 24px;
1338
- font-size: 1.8rem;
1338
+ font-size: 0.95rem;
1339
text-align: center;
1340
border-bottom: 1px solid var(--color-border);
1341
padding-bottom: 12px;