react-dockable-desktop 2.1.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +269 -69
- package/dist/index.cjs +24 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +315 -59
- package/dist/index.d.ts +315 -59
- package/dist/index.js +24 -3
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1092 -52
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
|
+
--rdd-styles-loaded: 1; /* sentinel — checked at mount to detect missing CSS import */
|
|
10
11
|
--bg-primary: #090b11;
|
|
11
12
|
--bg-workspace: #0f111a;
|
|
12
13
|
--bg-panel: #141722;
|
|
@@ -141,11 +142,43 @@ body,
|
|
|
141
142
|
padding-top: 4px;
|
|
142
143
|
padding-left: 6px;
|
|
143
144
|
position: relative;
|
|
145
|
+
z-index: 26; /* above resizer ::before (22) and resizer hover (25) — tabs always win */
|
|
144
146
|
margin-bottom: -1px;
|
|
145
147
|
flex-grow: 1;
|
|
146
148
|
overflow-x: auto;
|
|
147
149
|
}
|
|
148
150
|
|
|
151
|
+
/* Tab bar scroll arrow buttons — appear when tabs overflow */
|
|
152
|
+
.tab-scroll-btn {
|
|
153
|
+
flex-shrink: 0;
|
|
154
|
+
width: 20px;
|
|
155
|
+
height: 35px;
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
justify-content: center;
|
|
159
|
+
background: var(--bg-tab-inactive);
|
|
160
|
+
border: none;
|
|
161
|
+
border-right: 1px solid var(--border-panel);
|
|
162
|
+
cursor: pointer;
|
|
163
|
+
font-size: 16px;
|
|
164
|
+
line-height: 1;
|
|
165
|
+
color: var(--text-tab-inactive);
|
|
166
|
+
padding: 0;
|
|
167
|
+
z-index: 27;
|
|
168
|
+
user-select: none;
|
|
169
|
+
transition: background-color 0.1s ease, color 0.1s ease;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.tab-scroll-btn:hover {
|
|
173
|
+
color: var(--text-primary);
|
|
174
|
+
background: var(--bg-tab-hover, var(--bg-drop-hover, rgba(255,255,255,0.08)));
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.tab-scroll-btn-right {
|
|
178
|
+
border-right: none;
|
|
179
|
+
border-left: 1px solid var(--border-panel);
|
|
180
|
+
}
|
|
181
|
+
|
|
149
182
|
/* Premium Tab styling (VS Code Style) */
|
|
150
183
|
.workspace-tab {
|
|
151
184
|
position: relative;
|
|
@@ -155,7 +188,6 @@ body,
|
|
|
155
188
|
border-right: 1px solid var(--border-panel) !important; /* crisp separator */
|
|
156
189
|
padding: 0 6px 0 14px !important;
|
|
157
190
|
font-size: 0.75rem;
|
|
158
|
-
transition: background-color 0.1s ease, color 0.1s ease;
|
|
159
191
|
display: flex;
|
|
160
192
|
align-items: center;
|
|
161
193
|
border-radius: 0 !important; /* Square edges */
|
|
@@ -165,6 +197,9 @@ body,
|
|
|
165
197
|
user-select: none;
|
|
166
198
|
height: 35px; /* VS Code standard height */
|
|
167
199
|
box-sizing: border-box;
|
|
200
|
+
flex-shrink: 1;
|
|
201
|
+
min-width: 80px; /* compress before scrolling kicks in */
|
|
202
|
+
transition: background-color 0.1s ease, color 0.1s ease;
|
|
168
203
|
}
|
|
169
204
|
|
|
170
205
|
.workspace-tab > .text-truncate {
|
|
@@ -285,12 +320,13 @@ body,
|
|
|
285
320
|
height: 100%;
|
|
286
321
|
}
|
|
287
322
|
|
|
288
|
-
/* Grab hit-box for rows (cursor: row-resize)
|
|
323
|
+
/* Grab hit-box for rows (cursor: row-resize) — extends upward only (into safe content area),
|
|
324
|
+
never downward into the tab bar of the panel below */
|
|
289
325
|
.resizer-bar[style*="cursor: row-resize"]::before {
|
|
290
326
|
left: 0;
|
|
291
327
|
right: 0;
|
|
292
|
-
top: -
|
|
293
|
-
height:
|
|
328
|
+
top: -8px;
|
|
329
|
+
height: 9px;
|
|
294
330
|
width: 100%;
|
|
295
331
|
}
|
|
296
332
|
|
|
@@ -351,9 +387,47 @@ body.resizing-col-active * {
|
|
|
351
387
|
}
|
|
352
388
|
|
|
353
389
|
/* Taskbar Sibling Footer Styling */
|
|
390
|
+
/* ── autohide mode: absolute overlay, collapses to peek strip ── */
|
|
391
|
+
.taskbar-footer-container.taskbar-mode-autohide {
|
|
392
|
+
position: absolute;
|
|
393
|
+
bottom: 0;
|
|
394
|
+
left: 0;
|
|
395
|
+
right: 0;
|
|
396
|
+
transform: translateY(calc(100% - 8px));
|
|
397
|
+
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.taskbar-footer-container.taskbar-mode-autohide.taskbar-expanded {
|
|
401
|
+
transform: translateY(0);
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.taskbar-peek-handle {
|
|
405
|
+
position: absolute;
|
|
406
|
+
top: 3px;
|
|
407
|
+
left: 50%;
|
|
408
|
+
transform: translateX(-50%);
|
|
409
|
+
width: 32px;
|
|
410
|
+
height: 3px;
|
|
411
|
+
border-radius: 999px;
|
|
412
|
+
background: var(--accent-color, #38bdf8);
|
|
413
|
+
opacity: 0.5;
|
|
414
|
+
pointer-events: none;
|
|
415
|
+
transition: opacity 0.2s;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.taskbar-footer-container.taskbar-mode-autohide.taskbar-expanded .taskbar-peek-handle {
|
|
419
|
+
opacity: 0;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
@media (pointer: coarse) {
|
|
423
|
+
.taskbar-footer-container.taskbar-mode-autohide {
|
|
424
|
+
transform: translateY(calc(100% - 12px));
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
|
|
354
428
|
.taskbar-footer-container {
|
|
355
429
|
background-color: var(--taskbar-bg) !important;
|
|
356
|
-
border-top: 1px solid var(--
|
|
430
|
+
border-top: 1px solid var(--border-panel) !important;
|
|
357
431
|
backdrop-filter: blur(12px) saturate(180%);
|
|
358
432
|
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
359
433
|
flex-shrink: 0;
|
|
@@ -631,36 +705,53 @@ body.resizing-col-active * {
|
|
|
631
705
|
cursor: grabbing;
|
|
632
706
|
}
|
|
633
707
|
|
|
634
|
-
/* VS Code
|
|
708
|
+
/* VS Code-style context menu */
|
|
635
709
|
.react-contexify {
|
|
636
710
|
background-color: #1e1e1e !important;
|
|
637
|
-
border: 1px solid #
|
|
638
|
-
box-shadow: 0
|
|
639
|
-
border-radius:
|
|
711
|
+
border: 1px solid #454545 !important;
|
|
712
|
+
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
|
|
713
|
+
border-radius: 5px !important;
|
|
640
714
|
padding: 4px 0 !important;
|
|
641
|
-
min-width:
|
|
715
|
+
min-width: 220px !important;
|
|
642
716
|
z-index: 99999 !important;
|
|
643
717
|
}
|
|
644
718
|
|
|
645
719
|
.react-contexify .react-contexify__item__content {
|
|
646
720
|
color: #cccccc !important;
|
|
647
|
-
font-family: '
|
|
648
|
-
font-size:
|
|
649
|
-
padding:
|
|
721
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
|
|
722
|
+
font-size: 13px !important;
|
|
723
|
+
padding: 5px 22px 5px 10px !important;
|
|
724
|
+
letter-spacing: 0.01em !important;
|
|
650
725
|
}
|
|
651
726
|
|
|
652
727
|
.react-contexify .react-contexify__item:not(.react-contexify__item--disabled):hover > .react-contexify__item__content {
|
|
653
|
-
background-color: #094771 !important;
|
|
728
|
+
background-color: #094771 !important;
|
|
654
729
|
color: #ffffff !important;
|
|
655
730
|
}
|
|
656
731
|
|
|
657
732
|
.react-contexify .react-contexify__separator {
|
|
658
|
-
background-color: #
|
|
733
|
+
background-color: #454545 !important;
|
|
659
734
|
margin: 4px 0 !important;
|
|
660
735
|
}
|
|
661
736
|
|
|
662
737
|
.react-contexify .react-contexify__item-row {
|
|
663
|
-
gap:
|
|
738
|
+
gap: 10px !important;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
/* Let the wrapper class own the column width — library container defers to it */
|
|
742
|
+
.react-contexify .react-contexify__item-icon {
|
|
743
|
+
width: auto !important;
|
|
744
|
+
flex-shrink: 0 !important;
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
/* Icon slot: fixed width so all text aligns regardless of SVG size.
|
|
748
|
+
Override this class to change the icon column width globally. */
|
|
749
|
+
.wm-menu-icon {
|
|
750
|
+
width: 14px;
|
|
751
|
+
display: inline-flex;
|
|
752
|
+
align-items: center;
|
|
753
|
+
justify-content: center;
|
|
754
|
+
flex-shrink: 0;
|
|
664
755
|
}
|
|
665
756
|
|
|
666
757
|
.react-contexify .react-contexify__item-label {
|
|
@@ -756,12 +847,14 @@ body.resizing-col-active * {
|
|
|
756
847
|
color: var(--accent-color);
|
|
757
848
|
}
|
|
758
849
|
|
|
759
|
-
/* Drag hover indicators
|
|
850
|
+
/* Drag hover indicators: glowing insertion line */
|
|
760
851
|
.workspace-tab.drag-hover-left {
|
|
761
|
-
|
|
852
|
+
box-shadow: -3px 0 0 0 var(--accent-color, #38bdf8),
|
|
853
|
+
-10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
|
|
762
854
|
}
|
|
763
855
|
.workspace-tab.drag-hover-right {
|
|
764
|
-
|
|
856
|
+
box-shadow: 3px 0 0 0 var(--accent-color, #38bdf8),
|
|
857
|
+
10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
|
|
765
858
|
}
|
|
766
859
|
|
|
767
860
|
/* Close button for empty LeafGroups inside header */
|
|
@@ -810,6 +903,25 @@ body.resizing-col-active * {
|
|
|
810
903
|
--tab-icon-active: #38bdf8;
|
|
811
904
|
--tab-icon-inactive: #9ea4b0;
|
|
812
905
|
--tab-btn-active-bg: #1e2024; /* Seamless merge look */
|
|
906
|
+
--sidebar-btn-hover-bg: rgba(255, 255, 255, 0.05);
|
|
907
|
+
--sidebar-card-hover-border: rgba(56, 189, 248, 0.25);
|
|
908
|
+
--sidebar-card-hover-bg: rgba(255, 255, 255, 0.04);
|
|
909
|
+
--sidebar-card-active-shadow: rgba(56, 189, 248, 0.08);
|
|
910
|
+
--sidebar-drawer-header-bg: rgba(0, 0, 0, 0.12);
|
|
911
|
+
--toolbar-btn-hover-bg: rgba(255, 255, 255, 0.06);
|
|
912
|
+
--toolbar-btn-radio-active-bg: rgba(56, 189, 248, 0.14);
|
|
913
|
+
--toolbar-btn-toggle-active-bg: rgba(56, 189, 248, 0.08);
|
|
914
|
+
--toolbar-separator-color: rgba(255, 255, 255, 0.09);
|
|
915
|
+
/* Sidebar active-tab design tokens */
|
|
916
|
+
--tab-btn-active-width: 100%;
|
|
917
|
+
--tab-btn-active-radius: 0px;
|
|
918
|
+
--tab-btn-active-shadow: none;
|
|
919
|
+
--tab-btn-active-glow: none;
|
|
920
|
+
--tab-accent-bar-width: 3px;
|
|
921
|
+
/* Toolbar active-button design tokens */
|
|
922
|
+
--toolbar-btn-active-shadow: none;
|
|
923
|
+
--toolbar-btn-active-glow: none;
|
|
924
|
+
--toolbar-accent-bar-width: 3px;
|
|
813
925
|
}
|
|
814
926
|
|
|
815
927
|
[data-color-scheme="light"] {
|
|
@@ -839,6 +951,15 @@ body.resizing-col-active * {
|
|
|
839
951
|
--tab-icon-active: #0066cc;
|
|
840
952
|
--tab-icon-inactive: #555c66;
|
|
841
953
|
--tab-btn-active-bg: #f8f9fa; /* Seamless merge look */
|
|
954
|
+
--sidebar-btn-hover-bg: rgba(0, 0, 0, 0.05);
|
|
955
|
+
--sidebar-card-hover-border: rgba(0, 102, 204, 0.3);
|
|
956
|
+
--sidebar-card-hover-bg: rgba(0, 0, 0, 0.03);
|
|
957
|
+
--sidebar-card-active-shadow: rgba(0, 102, 204, 0.08);
|
|
958
|
+
--sidebar-drawer-header-bg: rgba(0, 0, 0, 0.04);
|
|
959
|
+
--toolbar-btn-hover-bg: rgba(0, 0, 0, 0.05);
|
|
960
|
+
--toolbar-btn-radio-active-bg: rgba(0, 102, 204, 0.1);
|
|
961
|
+
--toolbar-btn-toggle-active-bg: rgba(0, 102, 204, 0.06);
|
|
962
|
+
--toolbar-separator-color: rgba(0, 0, 0, 0.1);
|
|
842
963
|
/* Light skin window overrides */
|
|
843
964
|
--window-bg: rgba(243, 244, 246, var(--window-opacity, 0.9));
|
|
844
965
|
--window-border: rgba(0, 0, 0, 0.08);
|
|
@@ -1104,6 +1225,9 @@ body.resizing-col-active * {
|
|
|
1104
1225
|
--panel-card-border: #3c4043;
|
|
1105
1226
|
--window-text: #ffffff;
|
|
1106
1227
|
--panel-text: #e8eaed;
|
|
1228
|
+
--tab-icon-active: #8ab4f8;
|
|
1229
|
+
--toolbar-btn-radio-active-bg: rgba(138, 180, 248, 0.14);
|
|
1230
|
+
--toolbar-btn-toggle-active-bg: rgba(138, 180, 248, 0.08);
|
|
1107
1231
|
}
|
|
1108
1232
|
|
|
1109
1233
|
[data-workspace-skin="chrome"][data-color-scheme="light"] {
|
|
@@ -1126,6 +1250,9 @@ body.resizing-col-active * {
|
|
|
1126
1250
|
--panel-title-color: #1a73e8;
|
|
1127
1251
|
--close-btn-color: #474747;
|
|
1128
1252
|
--close-btn-active-color: #1f1f1f;
|
|
1253
|
+
--tab-icon-active: #1a73e8;
|
|
1254
|
+
--toolbar-btn-radio-active-bg: rgba(26, 115, 232, 0.12);
|
|
1255
|
+
--toolbar-btn-toggle-active-bg: rgba(26, 115, 232, 0.07);
|
|
1129
1256
|
}
|
|
1130
1257
|
|
|
1131
1258
|
/* Chrome tab angled geometry shapes */
|
|
@@ -1184,6 +1311,9 @@ body.resizing-col-active * {
|
|
|
1184
1311
|
--panel-title-color: #0078d4;
|
|
1185
1312
|
--close-btn-color: #475569;
|
|
1186
1313
|
--close-btn-active-color: #0f172a;
|
|
1314
|
+
--tab-icon-active: #0078d4;
|
|
1315
|
+
--toolbar-btn-radio-active-bg: rgba(0, 120, 212, 0.10);
|
|
1316
|
+
--toolbar-btn-toggle-active-bg: rgba(0, 120, 212, 0.06);
|
|
1187
1317
|
}
|
|
1188
1318
|
|
|
1189
1319
|
[data-workspace-skin="slate"] .workspace-tab.active::before {
|
|
@@ -1216,6 +1346,9 @@ body.resizing-col-active * {
|
|
|
1216
1346
|
--scrollbar-thumb-hover: rgba(136, 192, 208, 0.4);
|
|
1217
1347
|
--window-text: #eceff4;
|
|
1218
1348
|
--panel-text: #eceff4;
|
|
1349
|
+
--tab-icon-active: #88c0d0;
|
|
1350
|
+
--toolbar-btn-radio-active-bg: rgba(136, 192, 208, 0.14);
|
|
1351
|
+
--toolbar-btn-toggle-active-bg: rgba(136, 192, 208, 0.08);
|
|
1219
1352
|
}
|
|
1220
1353
|
|
|
1221
1354
|
[data-workspace-skin="nord"][data-color-scheme="light"] {
|
|
@@ -1240,6 +1373,9 @@ body.resizing-col-active * {
|
|
|
1240
1373
|
--window-text: #2e3440;
|
|
1241
1374
|
--panel-text: #2e3440;
|
|
1242
1375
|
--panel-title-color: #5e81ac;
|
|
1376
|
+
--tab-icon-active: #5e81ac;
|
|
1377
|
+
--toolbar-btn-radio-active-bg: rgba(94, 129, 172, 0.12);
|
|
1378
|
+
--toolbar-btn-toggle-active-bg: rgba(94, 129, 172, 0.07);
|
|
1243
1379
|
}
|
|
1244
1380
|
|
|
1245
1381
|
/* --------------------------------------------------------------------------
|
|
@@ -1267,6 +1403,9 @@ body.resizing-col-active * {
|
|
|
1267
1403
|
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
|
|
1268
1404
|
--window-text: #ffffff;
|
|
1269
1405
|
--panel-text: #ffffff;
|
|
1406
|
+
--tab-icon-active: #ffffff;
|
|
1407
|
+
--toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.10);
|
|
1408
|
+
--toolbar-btn-toggle-active-bg: rgba(255, 255, 255, 0.06);
|
|
1270
1409
|
}
|
|
1271
1410
|
|
|
1272
1411
|
[data-workspace-skin="obsidian"][data-color-scheme="light"] {
|
|
@@ -1292,6 +1431,9 @@ body.resizing-col-active * {
|
|
|
1292
1431
|
--window-text: #000000;
|
|
1293
1432
|
--panel-text: #000000;
|
|
1294
1433
|
--panel-title-color: #000000;
|
|
1434
|
+
--tab-icon-active: #000000;
|
|
1435
|
+
--toolbar-btn-radio-active-bg: rgba(0, 0, 0, 0.10);
|
|
1436
|
+
--toolbar-btn-toggle-active-bg: rgba(0, 0, 0, 0.06);
|
|
1295
1437
|
}
|
|
1296
1438
|
|
|
1297
1439
|
/* Obsidian custom borderless panel elevations */
|
|
@@ -1334,6 +1476,9 @@ body.resizing-col-active * {
|
|
|
1334
1476
|
--scrollbar-thumb-hover: rgba(187, 154, 247, 0.4);
|
|
1335
1477
|
--window-text: #c0caf5;
|
|
1336
1478
|
--panel-text: #c0caf5;
|
|
1479
|
+
--tab-icon-active: #7aa2f7;
|
|
1480
|
+
--toolbar-btn-radio-active-bg: rgba(122, 162, 247, 0.14);
|
|
1481
|
+
--toolbar-btn-toggle-active-bg: rgba(122, 162, 247, 0.08);
|
|
1337
1482
|
}
|
|
1338
1483
|
|
|
1339
1484
|
[data-workspace-skin="tokyo"][data-color-scheme="light"] {
|
|
@@ -1359,13 +1504,287 @@ body.resizing-col-active * {
|
|
|
1359
1504
|
--window-text: #383e56;
|
|
1360
1505
|
--panel-text: #383e56;
|
|
1361
1506
|
--panel-title-color: #9854f1;
|
|
1507
|
+
--tab-icon-active: #385af6;
|
|
1508
|
+
--toolbar-btn-radio-active-bg: rgba(56, 90, 246, 0.12);
|
|
1509
|
+
--toolbar-btn-toggle-active-bg: rgba(56, 90, 246, 0.07);
|
|
1510
|
+
}
|
|
1511
|
+
|
|
1512
|
+
/* ==========================================================================
|
|
1513
|
+
PER-SKIN ACTIVE TAB & TOOLBAR DESIGN LANGUAGE
|
|
1514
|
+
========================================================================== */
|
|
1515
|
+
|
|
1516
|
+
/* --------------------------------------------------------------------------
|
|
1517
|
+
vscode — Accent Bar (2 px, rounded chip, near-zero fill)
|
|
1518
|
+
-------------------------------------------------------------------------- */
|
|
1519
|
+
[data-workspace-skin="vscode"] {
|
|
1520
|
+
--tab-btn-active-bg: rgba(255, 255, 255, 0.07);
|
|
1521
|
+
--tab-btn-active-radius: 6px;
|
|
1522
|
+
--tab-accent-bar-width: 2px;
|
|
1523
|
+
--toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.07);
|
|
1524
|
+
--toolbar-accent-bar-width: 2px;
|
|
1525
|
+
}
|
|
1526
|
+
[data-workspace-skin="vscode"] .sidebar-tab-btn.active {
|
|
1527
|
+
border-top: 1px solid transparent !important;
|
|
1528
|
+
border-bottom: 1px solid transparent !important;
|
|
1529
|
+
}
|
|
1530
|
+
[data-workspace-skin="vscode"] .toolbar-strip .toolbar-btn-radio.active,
|
|
1531
|
+
[data-workspace-skin="vscode"] .toolbar-strip .toolbar-btn-group.active {
|
|
1532
|
+
border-radius: 6px !important;
|
|
1533
|
+
}
|
|
1534
|
+
[data-workspace-skin="vscode"][data-color-scheme="light"] {
|
|
1535
|
+
--tab-btn-active-bg: rgba(0, 0, 0, 0.06);
|
|
1536
|
+
--toolbar-btn-radio-active-bg: rgba(0, 0, 0, 0.06);
|
|
1537
|
+
}
|
|
1538
|
+
|
|
1539
|
+
/* --------------------------------------------------------------------------
|
|
1540
|
+
chrome — Tab Shape (sidebar bridge, toolbar accent-tinted)
|
|
1541
|
+
-------------------------------------------------------------------------- */
|
|
1542
|
+
[data-workspace-skin="chrome"] {
|
|
1543
|
+
--tab-btn-active-bg: var(--sidebar-bg);
|
|
1544
|
+
--tab-accent-bar-width: 0px;
|
|
1545
|
+
--toolbar-accent-bar-width: 2px;
|
|
1546
|
+
}
|
|
1547
|
+
[data-workspace-skin="chrome"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
1548
|
+
border-radius: 0 10px 10px 0 !important;
|
|
1549
|
+
border-left: none !important;
|
|
1550
|
+
}
|
|
1551
|
+
[data-workspace-skin="chrome"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
1552
|
+
border-radius: 10px 0 0 10px !important;
|
|
1553
|
+
border-right: none !important;
|
|
1554
|
+
border-top: 1px solid var(--sidebar-border) !important;
|
|
1555
|
+
border-bottom: 1px solid var(--sidebar-border) !important;
|
|
1556
|
+
}
|
|
1557
|
+
|
|
1558
|
+
/* --------------------------------------------------------------------------
|
|
1559
|
+
slate — Fluent Pill (floating capsule, accent-tinted)
|
|
1560
|
+
-------------------------------------------------------------------------- */
|
|
1561
|
+
[data-workspace-skin="slate"] {
|
|
1562
|
+
--tab-btn-active-bg: rgba(96, 165, 250, 0.14);
|
|
1563
|
+
--tab-btn-active-width: 36px;
|
|
1564
|
+
--tab-btn-active-radius: 8px;
|
|
1565
|
+
--tab-accent-bar-width: 0px;
|
|
1566
|
+
--toolbar-btn-radio-active-bg: rgba(96, 165, 250, 0.14);
|
|
1567
|
+
--toolbar-accent-bar-width: 0px;
|
|
1568
|
+
}
|
|
1569
|
+
[data-workspace-skin="slate"] .sidebar-tab-btn.active {
|
|
1570
|
+
border-top: 1px solid transparent !important;
|
|
1571
|
+
border-bottom: 1px solid transparent !important;
|
|
1572
|
+
}
|
|
1573
|
+
[data-workspace-skin="slate"] .toolbar-strip .toolbar-btn-radio.active,
|
|
1574
|
+
[data-workspace-skin="slate"] .toolbar-strip .toolbar-btn-group.active {
|
|
1575
|
+
border-radius: 8px !important;
|
|
1576
|
+
}
|
|
1577
|
+
[data-workspace-skin="slate"][data-color-scheme="light"] {
|
|
1578
|
+
--tab-btn-active-bg: rgba(0, 120, 212, 0.12);
|
|
1579
|
+
--toolbar-btn-radio-active-bg: rgba(0, 120, 212, 0.12);
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1582
|
+
/* --------------------------------------------------------------------------
|
|
1583
|
+
nord — Nordic Dot (zero fill, zero bar, 4 px accent dot via ::after)
|
|
1584
|
+
-------------------------------------------------------------------------- */
|
|
1585
|
+
[data-workspace-skin="nord"] {
|
|
1586
|
+
--tab-btn-active-bg: transparent;
|
|
1587
|
+
--tab-btn-active-width: 44px;
|
|
1588
|
+
--tab-btn-active-radius: 6px;
|
|
1589
|
+
--tab-accent-bar-width: 0px;
|
|
1590
|
+
--toolbar-btn-radio-active-bg: transparent;
|
|
1591
|
+
--toolbar-accent-bar-width: 0px;
|
|
1592
|
+
}
|
|
1593
|
+
[data-workspace-skin="nord"] .sidebar-tab-btn.active {
|
|
1594
|
+
border-top: 1px solid transparent !important;
|
|
1595
|
+
border-bottom: 1px solid transparent !important;
|
|
1596
|
+
border-left: none !important;
|
|
1597
|
+
border-right: none !important;
|
|
1598
|
+
}
|
|
1599
|
+
[data-workspace-skin="nord"] .sidebar-tab-btn.active::after {
|
|
1600
|
+
content: '';
|
|
1601
|
+
position: absolute;
|
|
1602
|
+
bottom: 5px;
|
|
1603
|
+
left: 50%;
|
|
1604
|
+
transform: translateX(-50%);
|
|
1605
|
+
width: 4px;
|
|
1606
|
+
height: 4px;
|
|
1607
|
+
border-radius: 50%;
|
|
1608
|
+
background-color: var(--tab-icon-active);
|
|
1609
|
+
}
|
|
1610
|
+
[data-workspace-skin="nord"] .toolbar-strip .toolbar-btn-radio.active,
|
|
1611
|
+
[data-workspace-skin="nord"] .toolbar-strip .toolbar-btn-group.active {
|
|
1612
|
+
border-left: none !important;
|
|
1613
|
+
border-right: none !important;
|
|
1614
|
+
border-top: none !important;
|
|
1615
|
+
border-bottom: none !important;
|
|
1616
|
+
}
|
|
1617
|
+
[data-workspace-skin="nord"] .toolbar-strip.left .toolbar-btn-radio.active::after,
|
|
1618
|
+
[data-workspace-skin="nord"] .toolbar-strip.left .toolbar-btn-group.active::after,
|
|
1619
|
+
[data-workspace-skin="nord"] .toolbar-strip.right .toolbar-btn-radio.active::after,
|
|
1620
|
+
[data-workspace-skin="nord"] .toolbar-strip.right .toolbar-btn-group.active::after,
|
|
1621
|
+
[data-workspace-skin="nord"] .toolbar-strip.top .toolbar-btn-radio.active::after,
|
|
1622
|
+
[data-workspace-skin="nord"] .toolbar-strip.top .toolbar-btn-group.active::after {
|
|
1623
|
+
content: '';
|
|
1624
|
+
position: absolute;
|
|
1625
|
+
bottom: 4px;
|
|
1626
|
+
left: 50%;
|
|
1627
|
+
transform: translateX(-50%);
|
|
1628
|
+
width: 4px;
|
|
1629
|
+
height: 4px;
|
|
1630
|
+
border-radius: 50%;
|
|
1631
|
+
background-color: var(--tab-icon-active);
|
|
1632
|
+
}
|
|
1633
|
+
[data-workspace-skin="nord"] .toolbar-strip.bottom .toolbar-btn-radio.active::after,
|
|
1634
|
+
[data-workspace-skin="nord"] .toolbar-strip.bottom .toolbar-btn-group.active::after {
|
|
1635
|
+
content: '';
|
|
1636
|
+
position: absolute;
|
|
1637
|
+
top: 4px;
|
|
1638
|
+
left: 50%;
|
|
1639
|
+
transform: translateX(-50%);
|
|
1640
|
+
width: 4px;
|
|
1641
|
+
height: 4px;
|
|
1642
|
+
border-radius: 50%;
|
|
1643
|
+
background-color: var(--tab-icon-active);
|
|
1644
|
+
}
|
|
1645
|
+
|
|
1646
|
+
/* --------------------------------------------------------------------------
|
|
1647
|
+
obsidian — Deep Glow (near-black fill, 2 px bar, inner glow, icon shadow)
|
|
1648
|
+
-------------------------------------------------------------------------- */
|
|
1649
|
+
[data-workspace-skin="obsidian"] {
|
|
1650
|
+
--tab-btn-active-bg: rgba(255, 255, 255, 0.03);
|
|
1651
|
+
--tab-btn-active-shadow: inset 0 0 12px rgba(255, 255, 255, 0.06);
|
|
1652
|
+
--tab-btn-active-glow: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
|
|
1653
|
+
--tab-accent-bar-width: 2px;
|
|
1654
|
+
--toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.03);
|
|
1655
|
+
--toolbar-btn-active-shadow: inset 0 0 12px rgba(255, 255, 255, 0.06);
|
|
1656
|
+
--toolbar-btn-active-glow: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
|
|
1657
|
+
--toolbar-accent-bar-width: 2px;
|
|
1658
|
+
}
|
|
1659
|
+
[data-workspace-skin="obsidian"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
1660
|
+
box-shadow: var(--tab-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
|
|
1661
|
+
}
|
|
1662
|
+
[data-workspace-skin="obsidian"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
1663
|
+
box-shadow: var(--tab-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
|
|
1664
|
+
}
|
|
1665
|
+
[data-workspace-skin="obsidian"] .toolbar-strip.left .toolbar-btn-radio.active,
|
|
1666
|
+
[data-workspace-skin="obsidian"] .toolbar-strip.left .toolbar-btn-group.active {
|
|
1667
|
+
box-shadow: var(--toolbar-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
|
|
1668
|
+
}
|
|
1669
|
+
[data-workspace-skin="obsidian"] .toolbar-strip.right .toolbar-btn-radio.active,
|
|
1670
|
+
[data-workspace-skin="obsidian"] .toolbar-strip.right .toolbar-btn-group.active {
|
|
1671
|
+
box-shadow: var(--toolbar-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
|
|
1672
|
+
}
|
|
1673
|
+
[data-workspace-skin="obsidian"] .toolbar-strip.top .toolbar-btn-radio.active,
|
|
1674
|
+
[data-workspace-skin="obsidian"] .toolbar-strip.top .toolbar-btn-group.active {
|
|
1675
|
+
box-shadow: var(--toolbar-btn-active-shadow), inset 0 -3px 8px rgba(255, 255, 255, 0.08) !important;
|
|
1676
|
+
}
|
|
1677
|
+
[data-workspace-skin="obsidian"] .toolbar-strip.bottom .toolbar-btn-radio.active,
|
|
1678
|
+
[data-workspace-skin="obsidian"] .toolbar-strip.bottom .toolbar-btn-group.active {
|
|
1679
|
+
box-shadow: var(--toolbar-btn-active-shadow), inset 0 3px 8px rgba(255, 255, 255, 0.08) !important;
|
|
1680
|
+
}
|
|
1681
|
+
[data-workspace-skin="obsidian"][data-color-scheme="light"] {
|
|
1682
|
+
--tab-btn-active-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06);
|
|
1683
|
+
--tab-btn-active-glow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
|
|
1684
|
+
--toolbar-btn-active-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06);
|
|
1685
|
+
--toolbar-btn-active-glow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
|
|
1686
|
+
}
|
|
1687
|
+
|
|
1688
|
+
/* --------------------------------------------------------------------------
|
|
1689
|
+
tokyo — Neon Pulse (accent-blue tint, vivid neon glow)
|
|
1690
|
+
-------------------------------------------------------------------------- */
|
|
1691
|
+
[data-workspace-skin="tokyo"] {
|
|
1692
|
+
--tab-btn-active-bg: rgba(122, 162, 247, 0.10);
|
|
1693
|
+
--tab-btn-active-shadow: inset 0 0 16px rgba(122, 162, 247, 0.12);
|
|
1694
|
+
--tab-btn-active-glow: drop-shadow(0 0 6px rgba(122, 162, 247, 0.65));
|
|
1695
|
+
--tab-accent-bar-width: 2px;
|
|
1696
|
+
--toolbar-btn-radio-active-bg: rgba(122, 162, 247, 0.10);
|
|
1697
|
+
--toolbar-btn-active-shadow: inset 0 0 16px rgba(122, 162, 247, 0.12);
|
|
1698
|
+
--toolbar-btn-active-glow: drop-shadow(0 0 6px rgba(122, 162, 247, 0.65));
|
|
1699
|
+
--toolbar-accent-bar-width: 2px;
|
|
1700
|
+
}
|
|
1701
|
+
[data-workspace-skin="tokyo"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
1702
|
+
box-shadow: var(--tab-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
|
|
1703
|
+
}
|
|
1704
|
+
[data-workspace-skin="tokyo"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
1705
|
+
box-shadow: var(--tab-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
|
|
1706
|
+
}
|
|
1707
|
+
[data-workspace-skin="tokyo"] .toolbar-strip.left .toolbar-btn-radio.active,
|
|
1708
|
+
[data-workspace-skin="tokyo"] .toolbar-strip.left .toolbar-btn-group.active {
|
|
1709
|
+
box-shadow: var(--toolbar-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
|
|
1710
|
+
}
|
|
1711
|
+
[data-workspace-skin="tokyo"] .toolbar-strip.right .toolbar-btn-radio.active,
|
|
1712
|
+
[data-workspace-skin="tokyo"] .toolbar-strip.right .toolbar-btn-group.active {
|
|
1713
|
+
box-shadow: var(--toolbar-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
|
|
1714
|
+
}
|
|
1715
|
+
[data-workspace-skin="tokyo"] .toolbar-strip.top .toolbar-btn-radio.active,
|
|
1716
|
+
[data-workspace-skin="tokyo"] .toolbar-strip.top .toolbar-btn-group.active {
|
|
1717
|
+
box-shadow: var(--toolbar-btn-active-shadow), inset 0 -3px 12px rgba(122, 162, 247, 0.18) !important;
|
|
1718
|
+
}
|
|
1719
|
+
[data-workspace-skin="tokyo"] .toolbar-strip.bottom .toolbar-btn-radio.active,
|
|
1720
|
+
[data-workspace-skin="tokyo"] .toolbar-strip.bottom .toolbar-btn-group.active {
|
|
1721
|
+
box-shadow: var(--toolbar-btn-active-shadow), inset 0 3px 12px rgba(122, 162, 247, 0.18) !important;
|
|
1722
|
+
}
|
|
1723
|
+
|
|
1724
|
+
/* --------------------------------------------------------------------------
|
|
1725
|
+
macos — Glass Merge (frosted glass, rounded outer corners, no bar)
|
|
1726
|
+
-------------------------------------------------------------------------- */
|
|
1727
|
+
[data-workspace-skin="macos"] {
|
|
1728
|
+
--tab-btn-active-bg: rgba(255, 255, 255, 0.16);
|
|
1729
|
+
--tab-accent-bar-width: 0px;
|
|
1730
|
+
--toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.16);
|
|
1731
|
+
--toolbar-accent-bar-width: 0px;
|
|
1732
|
+
}
|
|
1733
|
+
[data-workspace-skin="macos"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
1734
|
+
border-radius: 0 10px 10px 0 !important;
|
|
1735
|
+
backdrop-filter: blur(8px) saturate(160%);
|
|
1736
|
+
-webkit-backdrop-filter: blur(8px) saturate(160%);
|
|
1737
|
+
border-left: none !important;
|
|
1738
|
+
}
|
|
1739
|
+
[data-workspace-skin="macos"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
1740
|
+
border-radius: 10px 0 0 10px !important;
|
|
1741
|
+
backdrop-filter: blur(8px) saturate(160%);
|
|
1742
|
+
-webkit-backdrop-filter: blur(8px) saturate(160%);
|
|
1743
|
+
border-right: none !important;
|
|
1744
|
+
}
|
|
1745
|
+
[data-workspace-skin="macos"] .toolbar-strip.left .toolbar-btn-radio.active,
|
|
1746
|
+
[data-workspace-skin="macos"] .toolbar-strip.left .toolbar-btn-group.active {
|
|
1747
|
+
border-radius: 0 10px 10px 0 !important;
|
|
1748
|
+
border-left: none !important;
|
|
1749
|
+
backdrop-filter: blur(8px) saturate(160%);
|
|
1750
|
+
-webkit-backdrop-filter: blur(8px) saturate(160%);
|
|
1751
|
+
}
|
|
1752
|
+
[data-workspace-skin="macos"] .toolbar-strip.right .toolbar-btn-radio.active,
|
|
1753
|
+
[data-workspace-skin="macos"] .toolbar-strip.right .toolbar-btn-group.active {
|
|
1754
|
+
border-radius: 10px 0 0 10px !important;
|
|
1755
|
+
border-right: none !important;
|
|
1756
|
+
backdrop-filter: blur(8px) saturate(160%);
|
|
1757
|
+
-webkit-backdrop-filter: blur(8px) saturate(160%);
|
|
1758
|
+
}
|
|
1759
|
+
[data-workspace-skin="macos"] .toolbar-strip.top .toolbar-btn-radio.active,
|
|
1760
|
+
[data-workspace-skin="macos"] .toolbar-strip.top .toolbar-btn-group.active {
|
|
1761
|
+
border-radius: 0 0 10px 10px !important;
|
|
1762
|
+
border-bottom: none !important;
|
|
1763
|
+
backdrop-filter: blur(8px) saturate(160%);
|
|
1764
|
+
-webkit-backdrop-filter: blur(8px) saturate(160%);
|
|
1765
|
+
}
|
|
1766
|
+
[data-workspace-skin="macos"] .toolbar-strip.bottom .toolbar-btn-radio.active,
|
|
1767
|
+
[data-workspace-skin="macos"] .toolbar-strip.bottom .toolbar-btn-group.active {
|
|
1768
|
+
border-radius: 10px 10px 0 0 !important;
|
|
1769
|
+
border-top: none !important;
|
|
1770
|
+
backdrop-filter: blur(8px) saturate(160%);
|
|
1771
|
+
-webkit-backdrop-filter: blur(8px) saturate(160%);
|
|
1772
|
+
}
|
|
1773
|
+
[data-workspace-skin="macos"][data-color-scheme="light"] {
|
|
1774
|
+
--tab-btn-active-bg: rgba(255, 255, 255, 0.72);
|
|
1775
|
+
--toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.72);
|
|
1362
1776
|
}
|
|
1363
1777
|
|
|
1364
1778
|
/* --- Modern Sidebar and Tabs UI Theme Customizations --- */
|
|
1365
1779
|
.sidebar-content-drawer {
|
|
1366
1780
|
background-color: var(--sidebar-bg) !important;
|
|
1367
1781
|
color: var(--sidebar-text-title) !important;
|
|
1368
|
-
|
|
1782
|
+
height: 100%;
|
|
1783
|
+
}
|
|
1784
|
+
|
|
1785
|
+
/* Suppress all drawer transitions during pointer-drag resize */
|
|
1786
|
+
.sidebar-resizing .sidebar-content-drawer {
|
|
1787
|
+
transition: none !important;
|
|
1369
1788
|
}
|
|
1370
1789
|
|
|
1371
1790
|
/* Position-specific drawer border and shadow alignment */
|
|
@@ -1432,35 +1851,34 @@ body.resizing-col-active * {
|
|
|
1432
1851
|
/* Micro-interactions & hover tactile feedback for inactive buttons */
|
|
1433
1852
|
.sidebar-tab-btn:not(.active):hover {
|
|
1434
1853
|
color: var(--sidebar-text-title);
|
|
1435
|
-
background-color:
|
|
1854
|
+
background-color: var(--sidebar-btn-hover-bg) !important;
|
|
1436
1855
|
transform: scale(1.05);
|
|
1437
1856
|
}
|
|
1438
|
-
[data-color-scheme="light"] .sidebar-tab-btn:not(.active):hover {
|
|
1439
|
-
background-color: rgba(0, 0, 0, 0.04) !important;
|
|
1440
|
-
}
|
|
1441
1857
|
|
|
1442
1858
|
.sidebar-tab-btn.active {
|
|
1443
|
-
width:
|
|
1859
|
+
width: var(--tab-btn-active-width) !important;
|
|
1444
1860
|
color: var(--tab-icon-active) !important;
|
|
1445
1861
|
background-color: var(--tab-btn-active-bg) !important;
|
|
1446
1862
|
border-top: 1px solid var(--sidebar-border) !important;
|
|
1447
1863
|
border-bottom: 1px solid var(--sidebar-border) !important;
|
|
1448
|
-
border-radius:
|
|
1864
|
+
border-radius: var(--tab-btn-active-radius) !important;
|
|
1865
|
+
box-shadow: var(--tab-btn-active-shadow);
|
|
1866
|
+
filter: var(--tab-btn-active-glow);
|
|
1449
1867
|
z-index: 6;
|
|
1450
|
-
transition: color 0.15s ease
|
|
1868
|
+
transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
1451
1869
|
}
|
|
1452
1870
|
|
|
1453
|
-
/* Position-specific active button border & margin alignments
|
|
1871
|
+
/* Position-specific active button border & margin alignments */
|
|
1454
1872
|
.sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
1455
|
-
border-left:
|
|
1456
|
-
border-right: none !important;
|
|
1457
|
-
margin-right: -2px !important;
|
|
1873
|
+
border-left: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
|
|
1874
|
+
border-right: none !important;
|
|
1875
|
+
margin-right: -2px !important;
|
|
1458
1876
|
margin-left: 0 !important;
|
|
1459
1877
|
}
|
|
1460
1878
|
.sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
1461
|
-
border-left: none !important;
|
|
1462
|
-
border-right:
|
|
1463
|
-
margin-left: -2px !important;
|
|
1879
|
+
border-left: none !important;
|
|
1880
|
+
border-right: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
|
|
1881
|
+
margin-left: -2px !important;
|
|
1464
1882
|
margin-right: 0 !important;
|
|
1465
1883
|
}
|
|
1466
1884
|
|
|
@@ -1477,14 +1895,14 @@ body.resizing-col-active * {
|
|
|
1477
1895
|
}
|
|
1478
1896
|
|
|
1479
1897
|
.sidebar-window-card:hover {
|
|
1480
|
-
border-color:
|
|
1481
|
-
background-color:
|
|
1898
|
+
border-color: var(--sidebar-card-hover-border) !important;
|
|
1899
|
+
background-color: var(--sidebar-card-hover-bg) !important;
|
|
1482
1900
|
}
|
|
1483
1901
|
|
|
1484
1902
|
.sidebar-window-card.active {
|
|
1485
1903
|
background-color: var(--sidebar-card-active-bg) !important;
|
|
1486
1904
|
border-color: var(--sidebar-card-active-border) !important;
|
|
1487
|
-
box-shadow: 0 0 10px
|
|
1905
|
+
box-shadow: 0 0 10px var(--sidebar-card-active-shadow);
|
|
1488
1906
|
}
|
|
1489
1907
|
|
|
1490
1908
|
/* Custom Outlined Front Button */
|
|
@@ -1778,7 +2196,7 @@ html:not(.enable-animations) *::after {
|
|
|
1778
2196
|
top: 0;
|
|
1779
2197
|
left: 24px;
|
|
1780
2198
|
right: 24px;
|
|
1781
|
-
height:
|
|
2199
|
+
height: 10px; /* thin strip — keeps clear of tab bar (38px tall) */
|
|
1782
2200
|
}
|
|
1783
2201
|
|
|
1784
2202
|
.edge-trigger-bottom {
|
|
@@ -1864,6 +2282,15 @@ html:not(.enable-animations) *::after {
|
|
|
1864
2282
|
padding: 0 14px 0 6px !important;
|
|
1865
2283
|
}
|
|
1866
2284
|
|
|
2285
|
+
[dir="rtl"] .workspace-tab.drag-hover-left {
|
|
2286
|
+
box-shadow: 3px 0 0 0 var(--accent-color, #38bdf8),
|
|
2287
|
+
10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
|
|
2288
|
+
}
|
|
2289
|
+
[dir="rtl"] .workspace-tab.drag-hover-right {
|
|
2290
|
+
box-shadow: -3px 0 0 0 var(--accent-color, #38bdf8),
|
|
2291
|
+
-10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
|
|
2292
|
+
}
|
|
2293
|
+
|
|
1867
2294
|
[dir="rtl"] .workspace-tab > .text-truncate {
|
|
1868
2295
|
margin-right: 0 !important;
|
|
1869
2296
|
margin-left: 12px !important;
|
|
@@ -2140,32 +2567,519 @@ html:not(.enable-animations) *::after {
|
|
|
2140
2567
|
border-bottom: 1px solid var(--sidebar-border, rgba(255, 255, 255, 0.08));
|
|
2141
2568
|
padding: 0 0.75rem;
|
|
2142
2569
|
flex-shrink: 0;
|
|
2143
|
-
background:
|
|
2570
|
+
background: var(--sidebar-drawer-header-bg);
|
|
2144
2571
|
min-height: 38px;
|
|
2145
2572
|
}
|
|
2146
2573
|
|
|
2147
|
-
/* Sidebar drawer
|
|
2148
|
-
.sidebar-
|
|
2149
|
-
|
|
2574
|
+
/* Sidebar drawer content body */
|
|
2575
|
+
.sidebar-drawer-body {
|
|
2576
|
+
flex-grow: 1;
|
|
2577
|
+
overflow: auto;
|
|
2578
|
+
}
|
|
2579
|
+
|
|
2580
|
+
/* ==========================================================================
|
|
2581
|
+
SIDEBAR CONTENT PRIMITIVES (.sb-*)
|
|
2582
|
+
Library-native classes for building sidebar tab content.
|
|
2583
|
+
All values reference CSS variables — override via theme or custom CSS.
|
|
2584
|
+
========================================================================== */
|
|
2585
|
+
|
|
2586
|
+
/* Section wrapper — use to group related controls */
|
|
2587
|
+
.sb-section {
|
|
2588
|
+
display: flex;
|
|
2589
|
+
flex-direction: column;
|
|
2590
|
+
gap: 8px;
|
|
2591
|
+
padding: 12px;
|
|
2592
|
+
}
|
|
2593
|
+
|
|
2594
|
+
/* Section heading — UPPERCASE monospace label */
|
|
2595
|
+
.sb-section-title {
|
|
2596
|
+
font-family: monospace;
|
|
2597
|
+
font-size: 0.72rem;
|
|
2598
|
+
font-weight: 700;
|
|
2599
|
+
letter-spacing: 0.08em;
|
|
2600
|
+
text-transform: uppercase;
|
|
2601
|
+
color: var(--sidebar-text-muted, var(--text-secondary));
|
|
2602
|
+
margin: 0 0 4px 0;
|
|
2603
|
+
}
|
|
2604
|
+
|
|
2605
|
+
/* Horizontal rule between sections */
|
|
2606
|
+
.sb-separator {
|
|
2150
2607
|
border: none;
|
|
2151
|
-
|
|
2152
|
-
|
|
2608
|
+
border-top: 1px solid var(--sidebar-border);
|
|
2609
|
+
margin: 4px 0;
|
|
2610
|
+
}
|
|
2611
|
+
|
|
2612
|
+
/* Empty state placeholder */
|
|
2613
|
+
.sb-empty-state {
|
|
2614
|
+
font-size: 0.8rem;
|
|
2615
|
+
color: var(--sidebar-text-muted, var(--text-secondary));
|
|
2616
|
+
text-align: center;
|
|
2617
|
+
padding: 16px 12px;
|
|
2618
|
+
}
|
|
2619
|
+
|
|
2620
|
+
/* Item card */
|
|
2621
|
+
.sb-card {
|
|
2622
|
+
background-color: var(--sidebar-card-bg);
|
|
2623
|
+
border: 1px solid var(--sidebar-card-border);
|
|
2624
|
+
border-radius: 6px;
|
|
2625
|
+
padding: 10px;
|
|
2626
|
+
display: flex;
|
|
2627
|
+
flex-direction: column;
|
|
2628
|
+
gap: 8px;
|
|
2629
|
+
transition: border-color 0.15s ease, background-color 0.15s ease;
|
|
2630
|
+
}
|
|
2631
|
+
.sb-card:hover {
|
|
2632
|
+
border-color: var(--sidebar-card-hover-border);
|
|
2633
|
+
background-color: var(--sidebar-card-hover-bg);
|
|
2634
|
+
}
|
|
2635
|
+
.sb-card.active {
|
|
2636
|
+
background-color: var(--sidebar-card-active-bg);
|
|
2637
|
+
border-color: var(--sidebar-card-active-border);
|
|
2638
|
+
box-shadow: 0 0 10px var(--sidebar-card-active-shadow);
|
|
2639
|
+
}
|
|
2640
|
+
|
|
2641
|
+
/* Card title — truncated single line */
|
|
2642
|
+
.sb-card-title {
|
|
2643
|
+
font-size: 0.82rem;
|
|
2644
|
+
font-weight: 600;
|
|
2645
|
+
color: var(--sidebar-text-title);
|
|
2646
|
+
white-space: nowrap;
|
|
2647
|
+
overflow: hidden;
|
|
2648
|
+
text-overflow: ellipsis;
|
|
2649
|
+
min-width: 0;
|
|
2650
|
+
}
|
|
2651
|
+
|
|
2652
|
+
/* Card metadata row — secondary info, badges, action buttons */
|
|
2653
|
+
.sb-card-meta {
|
|
2153
2654
|
display: flex;
|
|
2154
2655
|
align-items: center;
|
|
2656
|
+
justify-content: space-between;
|
|
2657
|
+
gap: 6px;
|
|
2658
|
+
}
|
|
2659
|
+
|
|
2660
|
+
/* Status badge */
|
|
2661
|
+
.sb-badge {
|
|
2662
|
+
background-color: var(--sidebar-badge-bg);
|
|
2663
|
+
color: var(--sidebar-badge-text);
|
|
2664
|
+
font-family: monospace;
|
|
2665
|
+
font-size: 0.65rem;
|
|
2666
|
+
font-weight: 600;
|
|
2667
|
+
letter-spacing: 0.04em;
|
|
2668
|
+
text-transform: uppercase;
|
|
2669
|
+
padding: 2px 7px;
|
|
2670
|
+
border-radius: 4px;
|
|
2671
|
+
white-space: nowrap;
|
|
2672
|
+
}
|
|
2673
|
+
|
|
2674
|
+
/* Primary filled button */
|
|
2675
|
+
.sb-btn {
|
|
2676
|
+
display: inline-flex;
|
|
2677
|
+
align-items: center;
|
|
2678
|
+
justify-content: center;
|
|
2679
|
+
gap: 4px;
|
|
2680
|
+
background: var(--accent-color);
|
|
2681
|
+
color: var(--bg-primary);
|
|
2682
|
+
border: none;
|
|
2683
|
+
border-radius: 5px;
|
|
2684
|
+
padding: 5px 12px;
|
|
2685
|
+
font-size: 0.78rem;
|
|
2686
|
+
font-weight: 600;
|
|
2687
|
+
cursor: pointer;
|
|
2688
|
+
transition: opacity 0.15s ease, transform 0.1s ease;
|
|
2689
|
+
}
|
|
2690
|
+
.sb-btn:hover { opacity: 0.88; transform: scale(1.02); }
|
|
2691
|
+
.sb-btn:active { transform: scale(0.98); }
|
|
2692
|
+
|
|
2693
|
+
/* Outlined accent button */
|
|
2694
|
+
.sb-btn-outline {
|
|
2695
|
+
display: inline-flex;
|
|
2696
|
+
align-items: center;
|
|
2697
|
+
justify-content: center;
|
|
2698
|
+
gap: 4px;
|
|
2699
|
+
background: transparent;
|
|
2700
|
+
color: var(--sidebar-btn-front-text);
|
|
2701
|
+
border: 1px solid var(--sidebar-btn-front-border);
|
|
2702
|
+
border-radius: 12px;
|
|
2703
|
+
padding: 2px 10px;
|
|
2704
|
+
font-size: 0.68rem;
|
|
2705
|
+
font-weight: 500;
|
|
2155
2706
|
cursor: pointer;
|
|
2707
|
+
transition: background-color 0.15s ease, transform 0.1s ease;
|
|
2708
|
+
line-height: 1;
|
|
2709
|
+
}
|
|
2710
|
+
.sb-btn-outline:hover {
|
|
2711
|
+
background-color: var(--sidebar-btn-front-hover-bg);
|
|
2712
|
+
transform: scale(1.03);
|
|
2713
|
+
}
|
|
2714
|
+
|
|
2715
|
+
/* Icon-only ghost button — for card action rows */
|
|
2716
|
+
.sb-btn-ghost {
|
|
2717
|
+
display: inline-flex;
|
|
2718
|
+
align-items: center;
|
|
2719
|
+
justify-content: center;
|
|
2720
|
+
background: transparent;
|
|
2721
|
+
color: var(--text-secondary);
|
|
2722
|
+
border: none;
|
|
2156
2723
|
border-radius: 4px;
|
|
2157
|
-
|
|
2158
|
-
|
|
2724
|
+
padding: 3px 5px;
|
|
2725
|
+
cursor: pointer;
|
|
2726
|
+
transition: color 0.15s ease, background-color 0.15s ease;
|
|
2159
2727
|
}
|
|
2728
|
+
.sb-btn-ghost:hover {
|
|
2729
|
+
color: var(--text-primary);
|
|
2730
|
+
background-color: var(--sidebar-btn-hover-bg);
|
|
2731
|
+
}
|
|
2732
|
+
.sb-btn-ghost.danger:hover { color: #f87171; }
|
|
2160
2733
|
|
|
2161
|
-
|
|
2162
|
-
|
|
2734
|
+
/* Field: label + control */
|
|
2735
|
+
.sb-field {
|
|
2736
|
+
display: flex;
|
|
2737
|
+
flex-direction: column;
|
|
2738
|
+
gap: 5px;
|
|
2163
2739
|
}
|
|
2164
2740
|
|
|
2165
|
-
/*
|
|
2166
|
-
.
|
|
2167
|
-
|
|
2168
|
-
|
|
2741
|
+
/* Field label */
|
|
2742
|
+
.sb-label {
|
|
2743
|
+
font-size: 0.75rem;
|
|
2744
|
+
font-weight: 500;
|
|
2745
|
+
color: var(--sidebar-text-title);
|
|
2746
|
+
}
|
|
2747
|
+
|
|
2748
|
+
/* Text input */
|
|
2749
|
+
.sb-input {
|
|
2750
|
+
background: var(--bg-panel);
|
|
2751
|
+
color: var(--text-primary);
|
|
2752
|
+
border: 1px solid var(--sidebar-border);
|
|
2753
|
+
border-radius: 5px;
|
|
2754
|
+
padding: 5px 8px;
|
|
2755
|
+
font-size: 0.8rem;
|
|
2756
|
+
width: 100%;
|
|
2757
|
+
box-sizing: border-box;
|
|
2758
|
+
transition: border-color 0.15s ease;
|
|
2759
|
+
outline: none;
|
|
2760
|
+
}
|
|
2761
|
+
.sb-input:focus { border-color: var(--accent-color); }
|
|
2762
|
+
.sb-input::placeholder { color: var(--text-secondary); }
|
|
2763
|
+
|
|
2764
|
+
/* Select control */
|
|
2765
|
+
.sb-select {
|
|
2766
|
+
background: var(--bg-panel);
|
|
2767
|
+
color: var(--text-primary);
|
|
2768
|
+
border: 1px solid var(--sidebar-border);
|
|
2769
|
+
border-radius: 5px;
|
|
2770
|
+
padding: 5px 8px;
|
|
2771
|
+
font-size: 0.8rem;
|
|
2772
|
+
width: 100%;
|
|
2773
|
+
box-sizing: border-box;
|
|
2774
|
+
cursor: pointer;
|
|
2775
|
+
transition: border-color 0.15s ease;
|
|
2776
|
+
outline: none;
|
|
2777
|
+
}
|
|
2778
|
+
.sb-select:focus { border-color: var(--accent-color); }
|
|
2779
|
+
|
|
2780
|
+
/* Range slider */
|
|
2781
|
+
.sb-range {
|
|
2782
|
+
width: 100%;
|
|
2783
|
+
accent-color: var(--accent-color);
|
|
2784
|
+
cursor: pointer;
|
|
2785
|
+
}
|
|
2786
|
+
|
|
2787
|
+
/* Inline row of controls (e.g. range + value label) */
|
|
2788
|
+
.sb-field-row {
|
|
2789
|
+
display: flex;
|
|
2790
|
+
align-items: center;
|
|
2791
|
+
gap: 8px;
|
|
2792
|
+
}
|
|
2793
|
+
|
|
2794
|
+
/* Monospace value readout next to a range */
|
|
2795
|
+
.sb-field-value {
|
|
2796
|
+
font-family: monospace;
|
|
2797
|
+
font-size: 0.78rem;
|
|
2798
|
+
color: var(--text-primary);
|
|
2799
|
+
white-space: nowrap;
|
|
2800
|
+
min-width: 36px;
|
|
2801
|
+
text-align: right;
|
|
2802
|
+
}
|
|
2803
|
+
|
|
2804
|
+
/* Toggle switch row: label on left, switch on right */
|
|
2805
|
+
.sb-toggle-row {
|
|
2806
|
+
display: flex;
|
|
2807
|
+
align-items: center;
|
|
2808
|
+
justify-content: space-between;
|
|
2809
|
+
gap: 8px;
|
|
2810
|
+
}
|
|
2811
|
+
.sb-toggle-label {
|
|
2812
|
+
font-size: 0.8rem;
|
|
2813
|
+
color: var(--text-primary);
|
|
2814
|
+
}
|
|
2815
|
+
|
|
2816
|
+
/* Deprecated aliases — keep existing consumer code working for one release */
|
|
2817
|
+
.sidebar-window-card { background-color: var(--sidebar-card-bg) !important; border: 1px solid var(--sidebar-card-border) !important; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: all 0.15s ease; }
|
|
2818
|
+
.sidebar-window-card:hover { border-color: var(--sidebar-card-hover-border) !important; background-color: var(--sidebar-card-hover-bg) !important; }
|
|
2819
|
+
.sidebar-window-card.active { background-color: var(--sidebar-card-active-bg) !important; border-color: var(--sidebar-card-active-border) !important; box-shadow: 0 0 10px var(--sidebar-card-active-shadow); }
|
|
2820
|
+
.btn-pill-outline { border: 1px solid var(--sidebar-btn-front-border) !important; color: var(--sidebar-btn-front-text) !important; background: var(--sidebar-btn-front-bg) !important; font-size: 0.68rem !important; font-weight: 500 !important; border-radius: 12px !important; padding: 2px 10px !important; transition: all 0.15s ease !important; line-height: 1 !important; text-decoration: none !important; }
|
|
2821
|
+
.btn-pill-outline:hover { background: var(--sidebar-btn-front-hover-bg) !important; transform: scale(1.03); }
|
|
2822
|
+
.badge-pill-dark { background-color: var(--sidebar-badge-bg) !important; color: var(--sidebar-badge-text) !important; font-size: 0.65rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
|
|
2823
|
+
.sidebar-card-title { font-size: 0.82rem; font-weight: 600; color: var(--sidebar-text-title); max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
2824
|
+
|
|
2825
|
+
/* ==========================================================================
|
|
2826
|
+
TOOLBAR STRIP
|
|
2827
|
+
========================================================================== */
|
|
2828
|
+
|
|
2829
|
+
.toolbar-strip {
|
|
2830
|
+
background-color: var(--sidebar-tabs-bg);
|
|
2831
|
+
display: flex;
|
|
2832
|
+
align-items: center;
|
|
2833
|
+
flex-shrink: 0;
|
|
2834
|
+
z-index: 5;
|
|
2835
|
+
}
|
|
2836
|
+
|
|
2837
|
+
.toolbar-strip.left,
|
|
2838
|
+
.toolbar-strip.right {
|
|
2839
|
+
flex-direction: column;
|
|
2840
|
+
width: 48px;
|
|
2841
|
+
height: 100%;
|
|
2842
|
+
padding: 8px 0;
|
|
2843
|
+
gap: 4px;
|
|
2844
|
+
overflow: hidden;
|
|
2845
|
+
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2846
|
+
}
|
|
2847
|
+
|
|
2848
|
+
.toolbar-strip.top,
|
|
2849
|
+
.toolbar-strip.bottom {
|
|
2850
|
+
flex-direction: row;
|
|
2851
|
+
width: 100%;
|
|
2852
|
+
height: 48px;
|
|
2853
|
+
padding: 0 8px;
|
|
2854
|
+
gap: 4px;
|
|
2855
|
+
overflow: hidden;
|
|
2856
|
+
transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2857
|
+
}
|
|
2858
|
+
|
|
2859
|
+
@media (pointer: coarse) {
|
|
2860
|
+
.toolbar-strip.left, .toolbar-strip.right { width: 56px; }
|
|
2861
|
+
.toolbar-strip.top, .toolbar-strip.bottom { height: 56px; }
|
|
2862
|
+
}
|
|
2863
|
+
|
|
2864
|
+
.toolbar-strip.left { border-right: 1px solid var(--sidebar-border); }
|
|
2865
|
+
.toolbar-strip.right { border-left: 1px solid var(--sidebar-border); }
|
|
2866
|
+
.toolbar-strip.top { border-bottom: 1px solid var(--sidebar-border); }
|
|
2867
|
+
.toolbar-strip.bottom{ border-top: 1px solid var(--sidebar-border); }
|
|
2868
|
+
|
|
2869
|
+
/* Base button */
|
|
2870
|
+
.toolbar-btn {
|
|
2871
|
+
width: 36px;
|
|
2872
|
+
height: 36px;
|
|
2873
|
+
display: flex;
|
|
2874
|
+
align-items: center;
|
|
2875
|
+
justify-content: center;
|
|
2876
|
+
background: transparent;
|
|
2877
|
+
border: 1px solid transparent;
|
|
2878
|
+
border-radius: 6px;
|
|
2879
|
+
color: var(--tab-icon-inactive);
|
|
2880
|
+
cursor: pointer;
|
|
2881
|
+
flex-shrink: 0;
|
|
2882
|
+
outline: none !important;
|
|
2883
|
+
position: relative;
|
|
2884
|
+
transition: color 0.15s ease, background-color 0.15s ease;
|
|
2885
|
+
}
|
|
2886
|
+
|
|
2887
|
+
.toolbar-btn:hover:not(:disabled) {
|
|
2888
|
+
background-color: var(--toolbar-btn-hover-bg);
|
|
2889
|
+
color: var(--sidebar-text-title);
|
|
2890
|
+
}
|
|
2891
|
+
|
|
2892
|
+
.toolbar-btn:disabled {
|
|
2893
|
+
opacity: 0.35;
|
|
2894
|
+
cursor: not-allowed;
|
|
2895
|
+
}
|
|
2896
|
+
|
|
2897
|
+
/* Radio active — accent bar on the outer edge */
|
|
2898
|
+
.toolbar-btn-radio.active {
|
|
2899
|
+
color: var(--tab-icon-active);
|
|
2900
|
+
background-color: var(--toolbar-btn-radio-active-bg);
|
|
2901
|
+
box-shadow: var(--toolbar-btn-active-shadow);
|
|
2902
|
+
filter: var(--toolbar-btn-active-glow);
|
|
2903
|
+
transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
2904
|
+
}
|
|
2905
|
+
|
|
2906
|
+
.toolbar-strip.left .toolbar-btn-radio.active { border-left: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
|
|
2907
|
+
.toolbar-strip.right .toolbar-btn-radio.active { border-right: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
|
|
2908
|
+
.toolbar-strip.top .toolbar-btn-radio.active { border-bottom: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
|
|
2909
|
+
.toolbar-strip.bottom .toolbar-btn-radio.active { border-top: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
|
|
2910
|
+
|
|
2911
|
+
/* Toggle active — lighter tint, no directional border */
|
|
2912
|
+
.toolbar-btn-toggle.active {
|
|
2913
|
+
color: var(--tab-icon-active);
|
|
2914
|
+
background-color: var(--toolbar-btn-toggle-active-bg);
|
|
2915
|
+
}
|
|
2916
|
+
|
|
2917
|
+
/* Group button — corner triangle indicator shows a sub-tool family */
|
|
2918
|
+
.toolbar-btn-group {
|
|
2919
|
+
position: relative;
|
|
2920
|
+
}
|
|
2921
|
+
|
|
2922
|
+
.toolbar-btn-group::after {
|
|
2923
|
+
content: '';
|
|
2924
|
+
position: absolute;
|
|
2925
|
+
bottom: 4px;
|
|
2926
|
+
right: 4px;
|
|
2927
|
+
width: 0;
|
|
2928
|
+
height: 0;
|
|
2929
|
+
border: 3.5px solid transparent;
|
|
2930
|
+
border-top-color: currentColor;
|
|
2931
|
+
border-right-color: currentColor;
|
|
2932
|
+
opacity: 0.55;
|
|
2933
|
+
}
|
|
2934
|
+
|
|
2935
|
+
/* Group active state — same directional accent as radio */
|
|
2936
|
+
.toolbar-btn-group.active {
|
|
2937
|
+
color: var(--tab-icon-active);
|
|
2938
|
+
background-color: var(--toolbar-btn-radio-active-bg);
|
|
2939
|
+
box-shadow: var(--toolbar-btn-active-shadow);
|
|
2940
|
+
filter: var(--toolbar-btn-active-glow);
|
|
2941
|
+
transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
2942
|
+
}
|
|
2943
|
+
|
|
2944
|
+
.toolbar-strip.left .toolbar-btn-group.active { border-left: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
|
|
2945
|
+
.toolbar-strip.right .toolbar-btn-group.active { border-right: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
|
|
2946
|
+
.toolbar-strip.top .toolbar-btn-group.active { border-bottom: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
|
|
2947
|
+
.toolbar-strip.bottom .toolbar-btn-group.active { border-top: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
|
|
2948
|
+
|
|
2949
|
+
/* Separators */
|
|
2950
|
+
.toolbar-strip.left .toolbar-separator,
|
|
2951
|
+
.toolbar-strip.right .toolbar-separator {
|
|
2952
|
+
width: 24px;
|
|
2953
|
+
height: 1px;
|
|
2954
|
+
background-color: var(--toolbar-separator-color);
|
|
2955
|
+
flex-shrink: 0;
|
|
2956
|
+
margin: 4px 0;
|
|
2957
|
+
align-self: center;
|
|
2958
|
+
}
|
|
2959
|
+
|
|
2960
|
+
.toolbar-strip.top .toolbar-separator,
|
|
2961
|
+
.toolbar-strip.bottom .toolbar-separator {
|
|
2962
|
+
height: 24px;
|
|
2963
|
+
width: 1px;
|
|
2964
|
+
background-color: var(--toolbar-separator-color);
|
|
2965
|
+
flex-shrink: 0;
|
|
2966
|
+
margin: 0 4px;
|
|
2967
|
+
align-self: center;
|
|
2968
|
+
}
|
|
2969
|
+
|
|
2970
|
+
/* Touch targets on coarse-pointer devices */
|
|
2971
|
+
@media (pointer: coarse) {
|
|
2972
|
+
.toolbar-btn { width: 44px; height: 44px; }
|
|
2973
|
+
}
|
|
2974
|
+
|
|
2975
|
+
/* ==========================================================================
|
|
2976
|
+
TOOLBAR GROUP FLYOUT
|
|
2977
|
+
========================================================================== */
|
|
2978
|
+
|
|
2979
|
+
.toolbar-group-flyout {
|
|
2980
|
+
position: fixed;
|
|
2981
|
+
z-index: 8000;
|
|
2982
|
+
background: var(--sidebar-bg, var(--bg-panel));
|
|
2983
|
+
border: 1px solid var(--sidebar-border);
|
|
2984
|
+
border-radius: 8px;
|
|
2985
|
+
padding: 4px;
|
|
2986
|
+
min-width: 168px;
|
|
2987
|
+
display: flex;
|
|
2988
|
+
flex-direction: column;
|
|
2989
|
+
gap: 1px;
|
|
2990
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
2991
|
+
animation: toolbar-flyout-in 0.12s cubic-bezier(0.16, 1, 0.3, 1);
|
|
2992
|
+
}
|
|
2993
|
+
|
|
2994
|
+
@keyframes toolbar-flyout-in {
|
|
2995
|
+
from { opacity: 0; transform: scale(0.95); }
|
|
2996
|
+
to { opacity: 1; transform: scale(1); }
|
|
2997
|
+
}
|
|
2998
|
+
|
|
2999
|
+
/* Horizontal layout for top/bottom toolbars */
|
|
3000
|
+
.toolbar-group-flyout.top,
|
|
3001
|
+
.toolbar-group-flyout.bottom {
|
|
3002
|
+
flex-direction: row;
|
|
3003
|
+
min-width: unset;
|
|
3004
|
+
}
|
|
3005
|
+
|
|
3006
|
+
.toolbar-group-flyout-item {
|
|
3007
|
+
display: flex;
|
|
3008
|
+
align-items: center;
|
|
3009
|
+
gap: 8px;
|
|
3010
|
+
padding: 5px 8px;
|
|
3011
|
+
border: 1px solid transparent;
|
|
3012
|
+
border-radius: 6px;
|
|
3013
|
+
background: transparent;
|
|
3014
|
+
color: var(--sidebar-text-title, var(--text-primary));
|
|
3015
|
+
cursor: pointer;
|
|
3016
|
+
width: 100%;
|
|
3017
|
+
text-align: left;
|
|
3018
|
+
font-size: 0.8125rem;
|
|
3019
|
+
font-family: inherit;
|
|
3020
|
+
flex-shrink: 0;
|
|
3021
|
+
transition: background-color 0.1s ease, color 0.1s ease;
|
|
3022
|
+
}
|
|
3023
|
+
|
|
3024
|
+
.toolbar-group-flyout-item:hover:not(:disabled) {
|
|
3025
|
+
background-color: var(--toolbar-btn-hover-bg);
|
|
3026
|
+
color: var(--sidebar-text-title, var(--text-primary));
|
|
3027
|
+
}
|
|
3028
|
+
|
|
3029
|
+
.toolbar-group-flyout-item:disabled {
|
|
3030
|
+
opacity: 0.35;
|
|
3031
|
+
cursor: not-allowed;
|
|
3032
|
+
}
|
|
3033
|
+
|
|
3034
|
+
.toolbar-group-flyout-item.active {
|
|
3035
|
+
color: var(--tab-icon-active);
|
|
3036
|
+
background-color: var(--toolbar-btn-radio-active-bg);
|
|
3037
|
+
}
|
|
3038
|
+
|
|
3039
|
+
.toolbar-group-flyout-icon {
|
|
3040
|
+
flex-shrink: 0;
|
|
3041
|
+
width: 16px;
|
|
3042
|
+
height: 16px;
|
|
3043
|
+
display: flex;
|
|
3044
|
+
align-items: center;
|
|
3045
|
+
justify-content: center;
|
|
3046
|
+
}
|
|
3047
|
+
|
|
3048
|
+
/* top/bottom flyout: icon only, hide label and shortcut */
|
|
3049
|
+
.toolbar-group-flyout.top .toolbar-group-flyout-label,
|
|
3050
|
+
.toolbar-group-flyout.bottom .toolbar-group-flyout-label,
|
|
3051
|
+
.toolbar-group-flyout.top .toolbar-group-flyout-shortcut,
|
|
3052
|
+
.toolbar-group-flyout.bottom .toolbar-group-flyout-shortcut {
|
|
3053
|
+
display: none;
|
|
3054
|
+
}
|
|
3055
|
+
|
|
3056
|
+
.toolbar-group-flyout-label {
|
|
3057
|
+
flex: 1;
|
|
3058
|
+
white-space: nowrap;
|
|
3059
|
+
overflow: hidden;
|
|
3060
|
+
text-overflow: ellipsis;
|
|
3061
|
+
}
|
|
3062
|
+
|
|
3063
|
+
.toolbar-group-flyout-shortcut {
|
|
3064
|
+
flex-shrink: 0;
|
|
3065
|
+
font-size: 0.6875rem;
|
|
3066
|
+
color: var(--text-secondary);
|
|
3067
|
+
opacity: 0.7;
|
|
3068
|
+
}
|
|
3069
|
+
|
|
3070
|
+
.toolbar-group-flyout-sep {
|
|
3071
|
+
height: 1px;
|
|
3072
|
+
background: var(--toolbar-separator-color);
|
|
3073
|
+
margin: 3px 4px;
|
|
3074
|
+
flex-shrink: 0;
|
|
3075
|
+
}
|
|
3076
|
+
|
|
3077
|
+
/* Vertical separator for horizontal flyout */
|
|
3078
|
+
.toolbar-group-flyout.top .toolbar-group-flyout-sep,
|
|
3079
|
+
.toolbar-group-flyout.bottom .toolbar-group-flyout-sep {
|
|
3080
|
+
width: 1px;
|
|
3081
|
+
height: 16px;
|
|
3082
|
+
margin: auto 2px;
|
|
2169
3083
|
}
|
|
2170
3084
|
|
|
2171
3085
|
/* Button base — used in ConfirmationForm and similar dialogs */
|
|
@@ -2224,3 +3138,129 @@ html:not(.enable-animations) *::after {
|
|
|
2224
3138
|
[data-color-scheme="light"] .dw-btn-primary {
|
|
2225
3139
|
color: #ffffff;
|
|
2226
3140
|
}
|
|
3141
|
+
|
|
3142
|
+
/* ============================================================
|
|
3143
|
+
TOUCH SUPPORT (Phase 1C, 2A–B, 3B, 4A, 4C)
|
|
3144
|
+
============================================================ */
|
|
3145
|
+
|
|
3146
|
+
/* Phase 1C: touch-action — suppress scroll on drag handles,
|
|
3147
|
+
allow horizontal pan on tab bar */
|
|
3148
|
+
.workspace-tab { touch-action: none; }
|
|
3149
|
+
.floating-window-titlebar { touch-action: none; }
|
|
3150
|
+
.resizer-bar { touch-action: none; }
|
|
3151
|
+
.resize-handle { touch-action: none; }
|
|
3152
|
+
|
|
3153
|
+
/* Phase 2A: Expand resizer hit area to 44px on touch devices */
|
|
3154
|
+
@media (pointer: coarse) {
|
|
3155
|
+
.resizer-bar[style*="cursor: col-resize"]::before {
|
|
3156
|
+
left: -20px;
|
|
3157
|
+
width: 44px;
|
|
3158
|
+
}
|
|
3159
|
+
.resizer-bar[style*="cursor: row-resize"]::before {
|
|
3160
|
+
top: -32px;
|
|
3161
|
+
height: 33px; /* 32px upward into safe content area, 0px downward into tab bar */
|
|
3162
|
+
}
|
|
3163
|
+
}
|
|
3164
|
+
|
|
3165
|
+
/* Phase 3B: 8-direction resize handles on floating windows */
|
|
3166
|
+
.resize-handle {
|
|
3167
|
+
position: absolute;
|
|
3168
|
+
z-index: 30;
|
|
3169
|
+
}
|
|
3170
|
+
|
|
3171
|
+
/* Edge handles */
|
|
3172
|
+
.resize-n { top: -4px; left: 16px; right: 16px; height: 8px; cursor: n-resize; }
|
|
3173
|
+
.resize-s { bottom: -4px; left: 16px; right: 16px; height: 8px; cursor: s-resize; }
|
|
3174
|
+
.resize-e { right: -4px; top: 16px; bottom: 16px; width: 8px; cursor: e-resize; }
|
|
3175
|
+
.resize-w { left: -4px; top: 16px; bottom: 16px; width: 8px; cursor: w-resize; }
|
|
3176
|
+
|
|
3177
|
+
/* Corner handles */
|
|
3178
|
+
.resize-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
|
|
3179
|
+
.resize-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
|
|
3180
|
+
.resize-sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
|
|
3181
|
+
.resize-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
|
|
3182
|
+
|
|
3183
|
+
/* SE corner subtle visual indicator (preserve existing look) */
|
|
3184
|
+
.resize-se::after {
|
|
3185
|
+
content: '';
|
|
3186
|
+
position: absolute;
|
|
3187
|
+
inset: 0;
|
|
3188
|
+
background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.2) 50%);
|
|
3189
|
+
}
|
|
3190
|
+
|
|
3191
|
+
/* Touch: larger 44px hit areas via padding */
|
|
3192
|
+
@media (pointer: coarse) {
|
|
3193
|
+
.resize-ne, .resize-se, .resize-sw, .resize-nw {
|
|
3194
|
+
width: 28px;
|
|
3195
|
+
height: 28px;
|
|
3196
|
+
}
|
|
3197
|
+
.resize-n, .resize-s {
|
|
3198
|
+
left: 28px;
|
|
3199
|
+
right: 28px;
|
|
3200
|
+
height: 12px;
|
|
3201
|
+
top: -6px;
|
|
3202
|
+
}
|
|
3203
|
+
.resize-s { top: auto; bottom: -6px; }
|
|
3204
|
+
.resize-e, .resize-w {
|
|
3205
|
+
top: 28px;
|
|
3206
|
+
bottom: 28px;
|
|
3207
|
+
width: 12px;
|
|
3208
|
+
right: -6px;
|
|
3209
|
+
}
|
|
3210
|
+
.resize-w { right: auto; left: -6px; }
|
|
3211
|
+
}
|
|
3212
|
+
|
|
3213
|
+
/* Phase 2B: Adaptive density for coarse-pointer (touch) devices */
|
|
3214
|
+
@media (pointer: coarse) {
|
|
3215
|
+
/* Taller tabs for touch targets */
|
|
3216
|
+
.workspace-tab {
|
|
3217
|
+
min-height: 44px !important;
|
|
3218
|
+
height: 44px !important;
|
|
3219
|
+
padding: 0 12px 0 14px !important;
|
|
3220
|
+
}
|
|
3221
|
+
|
|
3222
|
+
/* Always-visible close button (no hover-to-reveal) */
|
|
3223
|
+
.workspace-tab .close-tab-x {
|
|
3224
|
+
opacity: 0.8 !important;
|
|
3225
|
+
width: 24px !important;
|
|
3226
|
+
height: 24px !important;
|
|
3227
|
+
}
|
|
3228
|
+
|
|
3229
|
+
/* Larger titlebar action buttons */
|
|
3230
|
+
.custom-tab-btn {
|
|
3231
|
+
width: 28px !important;
|
|
3232
|
+
height: 28px !important;
|
|
3233
|
+
}
|
|
3234
|
+
|
|
3235
|
+
/* Taller taskbar items */
|
|
3236
|
+
.taskbar-glassmorphic-item {
|
|
3237
|
+
width: 48px !important;
|
|
3238
|
+
height: 48px !important;
|
|
3239
|
+
}
|
|
3240
|
+
|
|
3241
|
+
/* Wider tab min-width on touch */
|
|
3242
|
+
.workspace-tab { min-width: 88px; }
|
|
3243
|
+
|
|
3244
|
+
/* Wider scroll arrows on touch */
|
|
3245
|
+
.tab-scroll-btn { width: 32px; height: 44px; }
|
|
3246
|
+
|
|
3247
|
+
/* Keep top edge trigger thin even on touch — avoids collision with tab bar */
|
|
3248
|
+
.edge-trigger-top { height: 14px; }
|
|
3249
|
+
}
|
|
3250
|
+
|
|
3251
|
+
/* Phase 4A: Long-press active animation (visual feedback during 300ms hold) */
|
|
3252
|
+
.long-press-active {
|
|
3253
|
+
animation: rdd-long-press-pulse 0.25s ease-out forwards;
|
|
3254
|
+
transform-origin: center;
|
|
3255
|
+
}
|
|
3256
|
+
|
|
3257
|
+
@keyframes rdd-long-press-pulse {
|
|
3258
|
+
0% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-glow, rgba(56,189,248,0.3)); }
|
|
3259
|
+
60% { transform: scale(1.04); box-shadow: 0 0 0 6px var(--accent-glow, rgba(56,189,248,0.15)); }
|
|
3260
|
+
100% { transform: scale(1.02); box-shadow: 0 0 0 4px var(--accent-glow, rgba(56,189,248,0.1)); }
|
|
3261
|
+
}
|
|
3262
|
+
|
|
3263
|
+
/* Phase 4C: Tab bar horizontal scroll (handled by existing .tab-headers-container overflow-x: auto) */
|
|
3264
|
+
/* Note: touch-action and -webkit-overflow-scrolling intentionally omitted — they cause iOS Safari
|
|
3265
|
+
to fire pointercancel before the 300ms long-press timer can activate tab drag */
|
|
3266
|
+
.tab-headers-container::-webkit-scrollbar { display: none; }
|