react-dockable-desktop 4.3.0 → 5.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 +7 -4
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +321 -17
- package/dist/index.d.ts +321 -17
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1122 -1115
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -8,88 +8,95 @@
|
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
10
|
--rdd-styles-loaded: 1; /* sentinel — checked at mount to detect missing CSS import */
|
|
11
|
-
--
|
|
12
|
-
--bg-
|
|
13
|
-
--bg-
|
|
14
|
-
--bg-
|
|
15
|
-
--
|
|
16
|
-
--text-
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--accent-
|
|
20
|
-
--
|
|
11
|
+
--rdd-z-base: 1000; /* base for floating windows + all chrome overlays; override via WindowManagerProvider's zIndexBase */
|
|
12
|
+
--rdd-bg-primary: #090b11;
|
|
13
|
+
--rdd-bg-workspace: #0f111a;
|
|
14
|
+
--rdd-bg-panel: #141722;
|
|
15
|
+
--rdd-bg-tab-bar: #0d0f16;
|
|
16
|
+
--rdd-text-primary: #f1f5f9;
|
|
17
|
+
--rdd-text-secondary: #94a3b8;
|
|
18
|
+
--rdd-border-color: rgba(255, 255, 255, 0.08);
|
|
19
|
+
--rdd-accent-color: #38bdf8; /* Modern Cyan/Sky-blue accent */
|
|
20
|
+
--rdd-accent-glow: rgba(56, 189, 248, 0.15);
|
|
21
|
+
--rdd-header-button-gap: 4px; /* Configurable gap spacing between titlebar action buttons */
|
|
21
22
|
/* Window skins variables */
|
|
22
|
-
--window-bg: rgba(20, 22, 28, var(--window-opacity, 0.85));
|
|
23
|
-
--window-border: rgba(255, 255, 255, 0.08);
|
|
24
|
-
--window-border-focused: rgba(255, 255, 255, 0.28);
|
|
25
|
-
--window-header-bg: rgba(0, 0, 0, 0.25);
|
|
26
|
-
--window-text: #f8f9fa;
|
|
27
|
-
--window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
|
|
28
|
-
--window-shadow-focused: 0 24px 50px rgba(0, 0, 0, 0.55);
|
|
23
|
+
--rdd-window-bg: rgba(20, 22, 28, var(--rdd-window-opacity, 0.85));
|
|
24
|
+
--rdd-window-border: rgba(255, 255, 255, 0.08);
|
|
25
|
+
--rdd-window-border-focused: rgba(255, 255, 255, 0.28);
|
|
26
|
+
--rdd-window-header-bg: rgba(0, 0, 0, 0.25);
|
|
27
|
+
--rdd-window-text: #f8f9fa;
|
|
28
|
+
--rdd-window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
|
|
29
|
+
--rdd-window-shadow-focused: 0 24px 50px rgba(0, 0, 0, 0.55);
|
|
29
30
|
/* Grid/Docked panel theme variables */
|
|
30
|
-
--border-panel: rgba(255, 255, 255, 0.08);
|
|
31
|
-
--bg-tab-inactive: #0c0d12;
|
|
32
|
-
--text-tab-inactive: #858b99;
|
|
33
|
-
--text-tab-active: #ffffff;
|
|
31
|
+
--rdd-border-panel: rgba(255, 255, 255, 0.08);
|
|
32
|
+
--rdd-bg-tab-inactive: #0c0d12;
|
|
33
|
+
--rdd-text-tab-inactive: #858b99;
|
|
34
|
+
--rdd-text-tab-active: #ffffff;
|
|
34
35
|
/* Tab and control button hover colors */
|
|
35
|
-
--bg-tab-hover: #171a22;
|
|
36
|
-
--text-tab-hover: #e2e8f0;
|
|
37
|
-
--close-btn-hover-bg: rgba(255, 255, 255, 0.12);
|
|
38
|
-
--close-btn-hover-color: #ffffff;
|
|
39
|
-
--close-btn-color: #858b99;
|
|
40
|
-
--close-btn-active-color: #e2e8f0;
|
|
36
|
+
--rdd-bg-tab-hover: #171a22;
|
|
37
|
+
--rdd-text-tab-hover: #e2e8f0;
|
|
38
|
+
--rdd-close-btn-hover-bg: rgba(255, 255, 255, 0.12);
|
|
39
|
+
--rdd-close-btn-hover-color: #ffffff;
|
|
40
|
+
--rdd-close-btn-color: #858b99;
|
|
41
|
+
--rdd-close-btn-active-color: #e2e8f0;
|
|
41
42
|
/* Tab focus states */
|
|
42
|
-
--tab-indicator-focused: var(--accent-color, #38bdf8);
|
|
43
|
-
--tab-indicator-unfocused: rgba(255, 255, 255, 0.3);
|
|
44
|
-
--tab-bg-active-focused: var(--bg-panel);
|
|
45
|
-
--tab-bg-active-unfocused: rgba(20, 23, 34, 0.55);
|
|
46
|
-
--tab-text-active-focused: var(--text-tab-active, #ffffff);
|
|
47
|
-
--tab-text-active-unfocused: rgba(255, 255, 255, 0.65);
|
|
48
|
-
--resizer-bg: rgba(255, 255, 255, 0.08);
|
|
49
|
-
--custom-btn-bg: rgba(255, 255, 255, 0.03);
|
|
50
|
-
--custom-btn-border: rgba(255, 255, 255, 0.05);
|
|
51
|
-
--custom-btn-hover-bg: rgba(255, 255, 255, 0.12);
|
|
52
|
-
--custom-btn-hover-color: #ffffff;
|
|
43
|
+
--rdd-tab-indicator-focused: var(--rdd-accent-color, #38bdf8);
|
|
44
|
+
--rdd-tab-indicator-unfocused: rgba(255, 255, 255, 0.3);
|
|
45
|
+
--rdd-tab-bg-active-focused: var(--rdd-bg-panel);
|
|
46
|
+
--rdd-tab-bg-active-unfocused: rgba(20, 23, 34, 0.55);
|
|
47
|
+
--rdd-tab-text-active-focused: var(--rdd-text-tab-active, #ffffff);
|
|
48
|
+
--rdd-tab-text-active-unfocused: rgba(255, 255, 255, 0.65);
|
|
49
|
+
--rdd-resizer-bg: rgba(255, 255, 255, 0.08);
|
|
50
|
+
--rdd-custom-btn-bg: rgba(255, 255, 255, 0.03);
|
|
51
|
+
--rdd-custom-btn-border: rgba(255, 255, 255, 0.05);
|
|
52
|
+
--rdd-custom-btn-hover-bg: rgba(255, 255, 255, 0.12);
|
|
53
|
+
--rdd-custom-btn-hover-color: #ffffff;
|
|
53
54
|
/* Taskbar theme variables */
|
|
54
|
-
--taskbar-bg: rgba(0, 0, 0, 0.75);
|
|
55
|
-
--taskbar-border: rgba(255, 255, 255, 0.1);
|
|
56
|
-
--taskbar-nav-color: rgba(255, 255, 255, 0.5);
|
|
57
|
-
--taskbar-item-bg: rgba(15, 23, 42, 0.6);
|
|
58
|
-
--taskbar-item-hover-bg: rgba(15, 23, 42, 0.8);
|
|
59
|
-
--taskbar-item-border: rgba(255, 255, 255, 0.08);
|
|
60
|
-
--taskbar-item-text: var(--accent-color, #38bdf8);
|
|
55
|
+
--rdd-taskbar-bg: rgba(0, 0, 0, 0.75);
|
|
56
|
+
--rdd-taskbar-border: rgba(255, 255, 255, 0.1);
|
|
57
|
+
--rdd-taskbar-nav-color: rgba(255, 255, 255, 0.5);
|
|
58
|
+
--rdd-taskbar-item-bg: rgba(15, 23, 42, 0.6);
|
|
59
|
+
--rdd-taskbar-item-hover-bg: rgba(15, 23, 42, 0.8);
|
|
60
|
+
--rdd-taskbar-item-border: rgba(255, 255, 255, 0.08);
|
|
61
|
+
--rdd-taskbar-item-text: var(--rdd-accent-color, #38bdf8);
|
|
61
62
|
/* Scrollbar theme variables */
|
|
62
|
-
--scrollbar-thumb: rgba(255, 255, 255, 0.1);
|
|
63
|
-
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
|
|
64
|
-
--scrollbar-track: rgba(255, 255, 255, 0.01);
|
|
63
|
+
--rdd-scrollbar-thumb: rgba(255, 255, 255, 0.1);
|
|
64
|
+
--rdd-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
|
|
65
|
+
--rdd-scrollbar-track: rgba(255, 255, 255, 0.01);
|
|
65
66
|
/* Mockup Panel inner theme variables */
|
|
66
|
-
--panel-card-bg: rgba(0, 0, 0, 0.2);
|
|
67
|
-
--panel-card-border: rgba(255, 255, 255, 0.1);
|
|
68
|
-
--panel-text: var(--text-primary);
|
|
69
|
-
--panel-title-color: var(--accent-color, #38bdf8);
|
|
67
|
+
--rdd-panel-card-bg: rgba(0, 0, 0, 0.2);
|
|
68
|
+
--rdd-panel-card-border: rgba(255, 255, 255, 0.1);
|
|
69
|
+
--rdd-panel-text: var(--rdd-text-primary);
|
|
70
|
+
--rdd-panel-title-color: var(--rdd-accent-color, #38bdf8);
|
|
70
71
|
/* ── Panel Overlay — Toolbar ── */
|
|
71
|
-
--panel-toolbar-padding: 8px;
|
|
72
|
-
--panel-toolbar-gap: 4px;
|
|
73
|
-
--panel-toolbar-btn-size: 32px;
|
|
74
|
-
--panel-toolbar-btn-radius: 6px;
|
|
75
|
-
--panel-toolbar-fg: rgba(255, 255, 255, 0.65);
|
|
76
|
-
--panel-toolbar-fg-hover: rgba(255, 255, 255, 0.95);
|
|
77
|
-
--panel-toolbar-btn-hover-bg: var(--toolbar-btn-hover-bg, rgba(255, 255, 255, 0.08));
|
|
78
|
-
--panel-toolbar-btn-active-bg: var(--toolbar-btn-radio-active-bg, rgba(56, 189, 248, 0.14));
|
|
79
|
-
--panel-toolbar-btn-active-color: var(--tab-icon-active, #38bdf8);
|
|
80
|
-
--panel-toolbar-separator-color: var(--toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
72
|
+
--rdd-panel-toolbar-padding: 8px;
|
|
73
|
+
--rdd-panel-toolbar-gap: 4px;
|
|
74
|
+
--rdd-panel-toolbar-btn-size: 32px;
|
|
75
|
+
--rdd-panel-toolbar-btn-radius: 6px;
|
|
76
|
+
--rdd-panel-toolbar-fg: rgba(255, 255, 255, 0.65);
|
|
77
|
+
--rdd-panel-toolbar-fg-hover: rgba(255, 255, 255, 0.95);
|
|
78
|
+
--rdd-panel-toolbar-btn-hover-bg: var(--toolbar-btn-hover-bg, rgba(255, 255, 255, 0.08));
|
|
79
|
+
--rdd-panel-toolbar-btn-active-bg: var(--toolbar-btn-radio-active-bg, rgba(56, 189, 248, 0.14));
|
|
80
|
+
--rdd-panel-toolbar-btn-active-color: var(--tab-icon-active, #38bdf8);
|
|
81
|
+
--rdd-panel-toolbar-separator-color: var(--toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
81
82
|
/* ── Panel Overlay — Floating Window ── */
|
|
82
|
-
--panel-float-bg: rgba(22, 24, 34, 0.92);
|
|
83
|
-
--panel-float-border: rgba(255, 255, 255, 0.1);
|
|
84
|
-
--panel-float-radius: 8px;
|
|
85
|
-
--panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
|
86
|
-
--panel-float-shadow-active: 0 8px 28px rgba(0, 0, 0, 0.55);
|
|
87
|
-
--panel-float-header-bg: var(--window-header-bg, rgba(0, 0, 0, 0.25));
|
|
88
|
-
--panel-float-header-bg-active: var(--window-header-bg, rgba(0, 0, 0, 0.25));
|
|
89
|
-
--panel-float-title-color: var(--window-text, #f8f9fa);
|
|
90
|
-
--panel-float-title-color-active: var(--window-text, #f8f9fa);
|
|
91
|
-
}
|
|
92
|
-
|
|
83
|
+
--rdd-panel-float-bg: rgba(22, 24, 34, 0.92);
|
|
84
|
+
--rdd-panel-float-border: rgba(255, 255, 255, 0.1);
|
|
85
|
+
--rdd-panel-float-radius: 8px;
|
|
86
|
+
--rdd-panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
|
87
|
+
--rdd-panel-float-shadow-active: 0 8px 28px rgba(0, 0, 0, 0.55);
|
|
88
|
+
--rdd-panel-float-header-bg: var(--rdd-window-header-bg, rgba(0, 0, 0, 0.25));
|
|
89
|
+
--rdd-panel-float-header-bg-active: var(--rdd-window-header-bg, rgba(0, 0, 0, 0.25));
|
|
90
|
+
--rdd-panel-float-title-color: var(--rdd-window-text, #f8f9fa);
|
|
91
|
+
--rdd-panel-float-title-color-active: var(--rdd-window-text, #f8f9fa);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Sizing only — margin/overflow/height/width, no cosmetic properties. This is a
|
|
95
|
+
structural requirement, not a style choice: `.full-viewport-layout` and every
|
|
96
|
+
percentage-height element the workspace nests inside (including WindowManager's
|
|
97
|
+
own root) can only resolve `height: 100%` if this chain has a real height all
|
|
98
|
+
the way up to <html>. Removing this (rather than just the cosmetic properties
|
|
99
|
+
below) collapses the whole page to content-height instead of the viewport. */
|
|
93
100
|
html,
|
|
94
101
|
body,
|
|
95
102
|
#root {
|
|
@@ -98,15 +105,15 @@ body,
|
|
|
98
105
|
width: 100%;
|
|
99
106
|
height: 100%;
|
|
100
107
|
overflow: hidden;
|
|
101
|
-
background-color: var(--bg-primary);
|
|
102
|
-
color: var(--text-primary);
|
|
103
|
-
font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
|
|
104
|
-
-webkit-font-smoothing: antialiased;
|
|
105
108
|
}
|
|
106
109
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
+
/* Cosmetic properties are scoped to the library's own root element only — never
|
|
111
|
+
the consumer's page, html/body, or their own mount div. */
|
|
112
|
+
.rdd-workspace {
|
|
113
|
+
background-color: var(--rdd-bg-primary);
|
|
114
|
+
color: var(--rdd-text-primary);
|
|
115
|
+
font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
|
|
116
|
+
-webkit-font-smoothing: antialiased;
|
|
110
117
|
}
|
|
111
118
|
|
|
112
119
|
/* Premium full viewport layout */
|
|
@@ -115,13 +122,13 @@ body,
|
|
|
115
122
|
flex-direction: column;
|
|
116
123
|
height: 100%;
|
|
117
124
|
width: 100%;
|
|
118
|
-
background-color: var(--bg-primary);
|
|
125
|
+
background-color: var(--rdd-bg-primary);
|
|
119
126
|
}
|
|
120
127
|
|
|
121
128
|
/* Subtle, high-tech grid styling for the window manager workspace */
|
|
122
129
|
.desktop-workspace,
|
|
123
130
|
.window-manager-workspace {
|
|
124
|
-
background-color: var(--bg-workspace);
|
|
131
|
+
background-color: var(--rdd-bg-workspace);
|
|
125
132
|
background-size: 32px 32px;
|
|
126
133
|
position: relative;
|
|
127
134
|
}
|
|
@@ -134,9 +141,9 @@ body,
|
|
|
134
141
|
}
|
|
135
142
|
|
|
136
143
|
/* Workspace Panel Container */
|
|
137
|
-
.workspace-panel {
|
|
138
|
-
background-color: var(--bg-panel);
|
|
139
|
-
border: 1px solid var(--border-panel);
|
|
144
|
+
.rdd-workspace-panel {
|
|
145
|
+
background-color: var(--rdd-bg-panel);
|
|
146
|
+
border: 1px solid var(--rdd-border-panel);
|
|
140
147
|
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.15);
|
|
141
148
|
width: 100%;
|
|
142
149
|
height: 100%;
|
|
@@ -145,9 +152,9 @@ body,
|
|
|
145
152
|
}
|
|
146
153
|
|
|
147
154
|
/* Tab Headers Bar */
|
|
148
|
-
.workspace-tab-bar {
|
|
149
|
-
background-color: var(--bg-tab-bar);
|
|
150
|
-
border-bottom: 1px solid var(--border-panel);
|
|
155
|
+
.rdd-workspace-tab-bar {
|
|
156
|
+
background-color: var(--rdd-bg-tab-bar);
|
|
157
|
+
border-bottom: 1px solid var(--rdd-border-panel);
|
|
151
158
|
padding: 0 4px;
|
|
152
159
|
display: flex;
|
|
153
160
|
flex-direction: row;
|
|
@@ -156,7 +163,7 @@ body,
|
|
|
156
163
|
}
|
|
157
164
|
|
|
158
165
|
/* Tab Headers Container */
|
|
159
|
-
.tab-headers-container {
|
|
166
|
+
.rdd-tab-headers-container {
|
|
160
167
|
display: flex;
|
|
161
168
|
align-items: flex-end;
|
|
162
169
|
height: 100%;
|
|
@@ -170,43 +177,43 @@ body,
|
|
|
170
177
|
}
|
|
171
178
|
|
|
172
179
|
/* Tab bar scroll arrow buttons — appear when tabs overflow */
|
|
173
|
-
.tab-scroll-btn {
|
|
180
|
+
.rdd-tab-scroll-btn {
|
|
174
181
|
flex-shrink: 0;
|
|
175
182
|
width: 20px;
|
|
176
183
|
height: 35px;
|
|
177
184
|
display: flex;
|
|
178
185
|
align-items: center;
|
|
179
186
|
justify-content: center;
|
|
180
|
-
background: var(--bg-tab-inactive);
|
|
187
|
+
background: var(--rdd-bg-tab-inactive);
|
|
181
188
|
border: none;
|
|
182
|
-
border-right: 1px solid var(--border-panel);
|
|
189
|
+
border-right: 1px solid var(--rdd-border-panel);
|
|
183
190
|
cursor: pointer;
|
|
184
191
|
font-size: 16px;
|
|
185
192
|
line-height: 1;
|
|
186
|
-
color: var(--text-tab-inactive);
|
|
193
|
+
color: var(--rdd-text-tab-inactive);
|
|
187
194
|
padding: 0;
|
|
188
195
|
z-index: 27;
|
|
189
196
|
user-select: none;
|
|
190
197
|
transition: background-color 0.1s ease, color 0.1s ease;
|
|
191
198
|
}
|
|
192
199
|
|
|
193
|
-
.tab-scroll-btn:hover {
|
|
194
|
-
color: var(--text-primary);
|
|
195
|
-
background: var(--bg-tab-hover, var(--bg-drop-hover, rgba(255,255,255,0.08)));
|
|
200
|
+
.rdd-tab-scroll-btn:hover {
|
|
201
|
+
color: var(--rdd-text-primary);
|
|
202
|
+
background: var(--rdd-bg-tab-hover, var(--bg-drop-hover, rgba(255,255,255,0.08)));
|
|
196
203
|
}
|
|
197
204
|
|
|
198
|
-
.tab-scroll-btn-right {
|
|
205
|
+
.rdd-tab-scroll-btn-right {
|
|
199
206
|
border-right: none;
|
|
200
|
-
border-left: 1px solid var(--border-panel);
|
|
207
|
+
border-left: 1px solid var(--rdd-border-panel);
|
|
201
208
|
}
|
|
202
209
|
|
|
203
210
|
/* Premium Tab styling (VS Code Style) */
|
|
204
|
-
.workspace-tab {
|
|
211
|
+
.rdd-workspace-tab {
|
|
205
212
|
position: relative;
|
|
206
|
-
background-color: var(--bg-tab-inactive) !important; /* VS Code dark background for inactive tabs */
|
|
207
|
-
color: var(--text-tab-inactive) !important; /* Clear readable gray */
|
|
213
|
+
background-color: var(--rdd-bg-tab-inactive) !important; /* VS Code dark background for inactive tabs */
|
|
214
|
+
color: var(--rdd-text-tab-inactive) !important; /* Clear readable gray */
|
|
208
215
|
border: none !important;
|
|
209
|
-
border-right: 1px solid var(--border-panel) !important; /* crisp separator */
|
|
216
|
+
border-right: 1px solid var(--rdd-border-panel) !important; /* crisp separator */
|
|
210
217
|
padding: 0 6px 0 14px !important;
|
|
211
218
|
font-size: 0.75rem;
|
|
212
219
|
display: flex;
|
|
@@ -223,117 +230,117 @@ body,
|
|
|
223
230
|
transition: background-color 0.1s ease, color 0.1s ease;
|
|
224
231
|
}
|
|
225
232
|
|
|
226
|
-
.workspace-tab > .text-truncate {
|
|
233
|
+
.rdd-workspace-tab > .rdd-text-truncate {
|
|
227
234
|
margin-right: 12px;
|
|
228
235
|
}
|
|
229
236
|
|
|
230
237
|
/* Remove original after element separator */
|
|
231
|
-
.workspace-tab:not(.active):not(:last-child)::after {
|
|
238
|
+
.rdd-workspace-tab:not(.rdd-active):not(:last-child)::after {
|
|
232
239
|
display: none !important;
|
|
233
240
|
}
|
|
234
241
|
|
|
235
|
-
.workspace-tab:hover {
|
|
236
|
-
background-color: var(--bg-tab-hover) !important;
|
|
237
|
-
color: var(--text-tab-hover) !important;
|
|
242
|
+
.rdd-workspace-tab:hover {
|
|
243
|
+
background-color: var(--rdd-bg-tab-hover) !important;
|
|
244
|
+
color: var(--rdd-text-tab-hover) !important;
|
|
238
245
|
}
|
|
239
246
|
|
|
240
247
|
/* Active tab (focused) */
|
|
241
|
-
.workspace-tab.active.workspace-tab-active-focused {
|
|
242
|
-
background-color: var(--tab-bg-active-focused) !important;
|
|
243
|
-
color: var(--tab-text-active-focused) !important;
|
|
248
|
+
.rdd-workspace-tab.rdd-active.rdd-workspace-tab-active-focused {
|
|
249
|
+
background-color: var(--rdd-tab-bg-active-focused) !important;
|
|
250
|
+
color: var(--rdd-tab-text-active-focused) !important;
|
|
244
251
|
font-weight: 500;
|
|
245
|
-
border-right: 1px solid var(--border-panel) !important;
|
|
252
|
+
border-right: 1px solid var(--rdd-border-panel) !important;
|
|
246
253
|
z-index: 2;
|
|
247
254
|
}
|
|
248
255
|
|
|
249
|
-
.workspace-tab.active.workspace-tab-active-focused::before {
|
|
256
|
+
.rdd-workspace-tab.rdd-active.rdd-workspace-tab-active-focused::before {
|
|
250
257
|
content: '';
|
|
251
258
|
position: absolute;
|
|
252
259
|
top: 0;
|
|
253
260
|
left: 0;
|
|
254
261
|
right: 0;
|
|
255
262
|
height: 2px;
|
|
256
|
-
background-color: var(--tab-indicator-focused) !important;
|
|
263
|
+
background-color: var(--rdd-tab-indicator-focused) !important;
|
|
257
264
|
border-radius: 0 !important;
|
|
258
|
-
box-shadow: 0 1px 4px var(--accent-glow);
|
|
265
|
+
box-shadow: 0 1px 4px var(--rdd-accent-glow);
|
|
259
266
|
}
|
|
260
267
|
|
|
261
268
|
/* Active tab (unfocused/inactive group) */
|
|
262
|
-
.workspace-tab.active.workspace-tab-active-unfocused {
|
|
263
|
-
background-color: var(--tab-bg-active-unfocused) !important;
|
|
264
|
-
color: var(--tab-text-active-unfocused) !important;
|
|
269
|
+
.rdd-workspace-tab.rdd-active.rdd-workspace-tab-active-unfocused {
|
|
270
|
+
background-color: var(--rdd-tab-bg-active-unfocused) !important;
|
|
271
|
+
color: var(--rdd-tab-text-active-unfocused) !important;
|
|
265
272
|
font-weight: 500;
|
|
266
|
-
border-right: 1px solid var(--border-panel) !important;
|
|
273
|
+
border-right: 1px solid var(--rdd-border-panel) !important;
|
|
267
274
|
z-index: 2;
|
|
268
275
|
}
|
|
269
276
|
|
|
270
|
-
.workspace-tab.active.workspace-tab-active-unfocused::before {
|
|
277
|
+
.rdd-workspace-tab.rdd-active.rdd-workspace-tab-active-unfocused::before {
|
|
271
278
|
content: '';
|
|
272
279
|
position: absolute;
|
|
273
280
|
top: 0;
|
|
274
281
|
left: 0;
|
|
275
282
|
right: 0;
|
|
276
283
|
height: 2px;
|
|
277
|
-
background-color: var(--tab-indicator-unfocused) !important;
|
|
284
|
+
background-color: var(--rdd-tab-indicator-unfocused) !important;
|
|
278
285
|
border-radius: 0 !important;
|
|
279
286
|
}
|
|
280
287
|
|
|
281
|
-
.workspace-tab-inactive {
|
|
282
|
-
color: var(--close-btn-color) !important;
|
|
288
|
+
.rdd-workspace-tab-inactive {
|
|
289
|
+
color: var(--rdd-close-btn-color) !important;
|
|
283
290
|
}
|
|
284
291
|
|
|
285
|
-
.workspace-tab-inactive:hover {
|
|
286
|
-
color: var(--text-tab-hover) !important;
|
|
292
|
+
.rdd-workspace-tab-inactive:hover {
|
|
293
|
+
color: var(--rdd-text-tab-hover) !important;
|
|
287
294
|
}
|
|
288
295
|
|
|
289
296
|
/* Tab close button (VS Code style visibility) */
|
|
290
|
-
.close-tab-x {
|
|
297
|
+
.rdd-close-tab-x {
|
|
291
298
|
opacity: 0; /* hidden by default on inactive tabs, allows hover/active overrides */
|
|
292
299
|
transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
|
|
293
300
|
margin-left: 8px;
|
|
294
301
|
border-radius: 3px;
|
|
295
|
-
color: var(--close-btn-color) !important;
|
|
302
|
+
color: var(--rdd-close-btn-color) !important;
|
|
296
303
|
display: flex;
|
|
297
304
|
align-items: center;
|
|
298
305
|
justify-content: center;
|
|
299
306
|
}
|
|
300
307
|
|
|
301
308
|
/* Always show close icon on active tab */
|
|
302
|
-
.workspace-tab.active .close-tab-x {
|
|
309
|
+
.rdd-workspace-tab.rdd-active .rdd-close-tab-x {
|
|
303
310
|
opacity: 0.75 !important;
|
|
304
|
-
color: var(--close-btn-active-color) !important;
|
|
311
|
+
color: var(--rdd-close-btn-active-color) !important;
|
|
305
312
|
}
|
|
306
313
|
|
|
307
314
|
/* Show close icon on hover of any tab */
|
|
308
|
-
.workspace-tab:hover .close-tab-x {
|
|
315
|
+
.rdd-workspace-tab:hover .rdd-close-tab-x {
|
|
309
316
|
opacity: 0.75 !important;
|
|
310
|
-
color: var(--close-btn-active-color) !important;
|
|
317
|
+
color: var(--rdd-close-btn-active-color) !important;
|
|
311
318
|
}
|
|
312
319
|
|
|
313
320
|
/* Hover style on the close icon itself (VS Code dark rounded background) */
|
|
314
|
-
.close-tab-x:hover {
|
|
321
|
+
.rdd-close-tab-x:hover {
|
|
315
322
|
opacity: 1 !important;
|
|
316
|
-
background-color: var(--close-btn-hover-bg) !important;
|
|
317
|
-
color: var(--close-btn-hover-color) !important;
|
|
323
|
+
background-color: var(--rdd-close-btn-hover-bg) !important;
|
|
324
|
+
color: var(--rdd-close-btn-hover-color) !important;
|
|
318
325
|
}
|
|
319
326
|
|
|
320
327
|
/* Drag resizer split bars */
|
|
321
|
-
.resizer-bar {
|
|
322
|
-
background-color: var(--border-panel, rgba(255, 255, 255, 0.08)) !important;
|
|
328
|
+
.rdd-resizer-bar {
|
|
329
|
+
background-color: var(--rdd-border-panel, rgba(255, 255, 255, 0.08)) !important;
|
|
323
330
|
transition: background-color 0.15s ease, transform 0.15s ease !important;
|
|
324
331
|
position: relative;
|
|
325
332
|
z-index: 21;
|
|
326
333
|
}
|
|
327
334
|
|
|
328
335
|
/* Invisible 8px hit-box overlay to make grabbing easy */
|
|
329
|
-
.resizer-bar::before {
|
|
336
|
+
.rdd-resizer-bar::before {
|
|
330
337
|
content: '';
|
|
331
338
|
position: absolute;
|
|
332
339
|
z-index: 22;
|
|
333
340
|
}
|
|
334
341
|
|
|
335
342
|
/* Grab hit-box for columns (cursor: col-resize) */
|
|
336
|
-
.resizer-bar[style*="cursor: col-resize"]::before {
|
|
343
|
+
.rdd-resizer-bar[style*="cursor: col-resize"]::before {
|
|
337
344
|
top: 0;
|
|
338
345
|
bottom: 0;
|
|
339
346
|
left: -3px;
|
|
@@ -343,7 +350,7 @@ body,
|
|
|
343
350
|
|
|
344
351
|
/* Grab hit-box for rows (cursor: row-resize) — extends upward only (into safe content area),
|
|
345
352
|
never downward into the tab bar of the panel below */
|
|
346
|
-
.resizer-bar[style*="cursor: row-resize"]::before {
|
|
353
|
+
.rdd-resizer-bar[style*="cursor: row-resize"]::before {
|
|
347
354
|
left: 0;
|
|
348
355
|
right: 0;
|
|
349
356
|
top: -8px;
|
|
@@ -352,41 +359,41 @@ body,
|
|
|
352
359
|
}
|
|
353
360
|
|
|
354
361
|
/* Highlight state (on hover or active drag) */
|
|
355
|
-
.resizer-bar:hover,
|
|
356
|
-
.resizer-bar.active {
|
|
357
|
-
background-color: color-mix(in srgb, var(--accent-color) 35%, transparent) !important;
|
|
362
|
+
.rdd-resizer-bar:hover,
|
|
363
|
+
.rdd-resizer-bar.rdd-active {
|
|
364
|
+
background-color: color-mix(in srgb, var(--rdd-accent-color) 35%, transparent) !important;
|
|
358
365
|
box-shadow: none !important;
|
|
359
366
|
z-index: 25 !important;
|
|
360
367
|
}
|
|
361
368
|
|
|
362
|
-
.resizer-bar[style*="cursor: col-resize"]:hover,
|
|
363
|
-
.resizer-bar[style*="cursor: col-resize"].active {
|
|
369
|
+
.rdd-resizer-bar[style*="cursor: col-resize"]:hover,
|
|
370
|
+
.rdd-resizer-bar[style*="cursor: col-resize"].rdd-active {
|
|
364
371
|
transform: scaleX(2);
|
|
365
372
|
}
|
|
366
373
|
|
|
367
|
-
.resizer-bar[style*="cursor: row-resize"]:hover,
|
|
368
|
-
.resizer-bar[style*="cursor: row-resize"].active {
|
|
374
|
+
.rdd-resizer-bar[style*="cursor: row-resize"]:hover,
|
|
375
|
+
.rdd-resizer-bar[style*="cursor: row-resize"].rdd-active {
|
|
369
376
|
transform: scaleY(2);
|
|
370
377
|
}
|
|
371
378
|
|
|
372
379
|
/* Global body cursor overrides during active resize drag to prevent cursor flickering */
|
|
373
|
-
body.resizing-active {
|
|
380
|
+
body.rdd-resizing-active {
|
|
374
381
|
user-select: none !important;
|
|
375
382
|
}
|
|
376
|
-
body.resizing-row-active,
|
|
377
|
-
body.resizing-row-active * {
|
|
383
|
+
body.rdd-resizing-row-active,
|
|
384
|
+
body.rdd-resizing-row-active * {
|
|
378
385
|
cursor: row-resize !important;
|
|
379
386
|
}
|
|
380
|
-
body.resizing-col-active,
|
|
381
|
-
body.resizing-col-active * {
|
|
387
|
+
body.rdd-resizing-col-active,
|
|
388
|
+
body.rdd-resizing-col-active * {
|
|
382
389
|
cursor: col-resize !important;
|
|
383
390
|
}
|
|
384
391
|
|
|
385
392
|
/* Control buttons inside tabs/windows */
|
|
386
|
-
.custom-tab-btn {
|
|
387
|
-
background: var(--custom-btn-bg);
|
|
388
|
-
border: 1px solid var(--custom-btn-border);
|
|
389
|
-
color: var(--text-secondary);
|
|
393
|
+
.rdd-custom-tab-btn {
|
|
394
|
+
background: var(--rdd-custom-btn-bg);
|
|
395
|
+
border: 1px solid var(--rdd-custom-btn-border);
|
|
396
|
+
color: var(--rdd-text-secondary);
|
|
390
397
|
font-size: 9px;
|
|
391
398
|
width: 18px;
|
|
392
399
|
height: 18px;
|
|
@@ -400,16 +407,16 @@ body.resizing-col-active * {
|
|
|
400
407
|
line-height: 1;
|
|
401
408
|
}
|
|
402
409
|
|
|
403
|
-
.custom-tab-btn:hover {
|
|
404
|
-
background-color: var(--custom-btn-hover-bg);
|
|
405
|
-
color: var(--custom-btn-hover-color);
|
|
406
|
-
border-color: var(--custom-btn-border);
|
|
410
|
+
.rdd-custom-tab-btn:hover {
|
|
411
|
+
background-color: var(--rdd-custom-btn-hover-bg);
|
|
412
|
+
color: var(--rdd-custom-btn-hover-color);
|
|
413
|
+
border-color: var(--rdd-custom-btn-border);
|
|
407
414
|
transform: scale(1.05);
|
|
408
415
|
}
|
|
409
416
|
|
|
410
417
|
/* Taskbar Sibling Footer Styling */
|
|
411
418
|
/* ── autohide mode: absolute overlay, collapses to peek strip ── */
|
|
412
|
-
.taskbar-footer-container.taskbar-mode-autohide {
|
|
419
|
+
.rdd-taskbar-footer-container.rdd-taskbar-mode-autohide {
|
|
413
420
|
position: absolute;
|
|
414
421
|
bottom: 0;
|
|
415
422
|
left: 0;
|
|
@@ -418,11 +425,11 @@ body.resizing-col-active * {
|
|
|
418
425
|
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
419
426
|
}
|
|
420
427
|
|
|
421
|
-
.taskbar-footer-container.taskbar-mode-autohide.taskbar-expanded {
|
|
428
|
+
.rdd-taskbar-footer-container.rdd-taskbar-mode-autohide.rdd-taskbar-expanded {
|
|
422
429
|
transform: translateY(0);
|
|
423
430
|
}
|
|
424
431
|
|
|
425
|
-
.taskbar-peek-handle {
|
|
432
|
+
.rdd-taskbar-peek-handle {
|
|
426
433
|
position: absolute;
|
|
427
434
|
top: 3px;
|
|
428
435
|
left: 50%;
|
|
@@ -430,25 +437,25 @@ body.resizing-col-active * {
|
|
|
430
437
|
width: 32px;
|
|
431
438
|
height: 3px;
|
|
432
439
|
border-radius: 999px;
|
|
433
|
-
background: var(--accent-color, #38bdf8);
|
|
440
|
+
background: var(--rdd-accent-color, #38bdf8);
|
|
434
441
|
opacity: 0.5;
|
|
435
442
|
pointer-events: none;
|
|
436
443
|
transition: opacity 0.2s;
|
|
437
444
|
}
|
|
438
445
|
|
|
439
|
-
.taskbar-footer-container.taskbar-mode-autohide.taskbar-expanded .taskbar-peek-handle {
|
|
446
|
+
.rdd-taskbar-footer-container.rdd-taskbar-mode-autohide.rdd-taskbar-expanded .rdd-taskbar-peek-handle {
|
|
440
447
|
opacity: 0;
|
|
441
448
|
}
|
|
442
449
|
|
|
443
450
|
@media (pointer: coarse) {
|
|
444
|
-
.taskbar-footer-container.taskbar-mode-autohide {
|
|
451
|
+
.rdd-taskbar-footer-container.rdd-taskbar-mode-autohide {
|
|
445
452
|
transform: translateY(calc(100% - 12px));
|
|
446
453
|
}
|
|
447
454
|
}
|
|
448
455
|
|
|
449
|
-
.taskbar-footer-container {
|
|
450
|
-
background-color: var(--taskbar-bg) !important;
|
|
451
|
-
border-top: 1px solid var(--border-panel) !important;
|
|
456
|
+
.rdd-taskbar-footer-container {
|
|
457
|
+
background-color: var(--rdd-taskbar-bg) !important;
|
|
458
|
+
border-top: 1px solid var(--rdd-border-panel) !important;
|
|
452
459
|
backdrop-filter: blur(12px) saturate(180%);
|
|
453
460
|
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
454
461
|
flex-shrink: 0;
|
|
@@ -460,8 +467,8 @@ body.resizing-col-active * {
|
|
|
460
467
|
padding: 0 1rem;
|
|
461
468
|
}
|
|
462
469
|
|
|
463
|
-
.taskbar-nav-btn {
|
|
464
|
-
color: var(--taskbar-nav-color) !important;
|
|
470
|
+
.rdd-taskbar-nav-btn {
|
|
471
|
+
color: var(--rdd-taskbar-nav-color) !important;
|
|
465
472
|
background: transparent;
|
|
466
473
|
border: none;
|
|
467
474
|
cursor: pointer;
|
|
@@ -472,17 +479,17 @@ body.resizing-col-active * {
|
|
|
472
479
|
line-height: 1;
|
|
473
480
|
}
|
|
474
481
|
|
|
475
|
-
.taskbar-nav-btn:hover {
|
|
476
|
-
color: var(--accent-color) !important;
|
|
482
|
+
.rdd-taskbar-nav-btn:hover {
|
|
483
|
+
color: var(--rdd-accent-color) !important;
|
|
477
484
|
}
|
|
478
485
|
|
|
479
486
|
/* macOS/Win11 Glassmorphic Taskbar */
|
|
480
|
-
.taskbar-glassmorphic-item {
|
|
481
|
-
background: var(--taskbar-item-bg) !important;
|
|
487
|
+
.rdd-taskbar-glassmorphic-item {
|
|
488
|
+
background: var(--rdd-taskbar-item-bg) !important;
|
|
482
489
|
backdrop-filter: blur(12px) saturate(180%);
|
|
483
490
|
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
484
|
-
border: 1px solid var(--taskbar-item-border) !important;
|
|
485
|
-
color: var(--taskbar-item-text) !important;
|
|
491
|
+
border: 1px solid var(--rdd-taskbar-item-border) !important;
|
|
492
|
+
color: var(--rdd-taskbar-item-text) !important;
|
|
486
493
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
487
494
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
488
495
|
display: flex;
|
|
@@ -492,14 +499,14 @@ body.resizing-col-active * {
|
|
|
492
499
|
cursor: pointer;
|
|
493
500
|
}
|
|
494
501
|
|
|
495
|
-
.taskbar-glassmorphic-item:hover {
|
|
496
|
-
background: var(--taskbar-item-hover-bg) !important;
|
|
497
|
-
border-color: var(--accent-color, #38bdf8) !important;
|
|
502
|
+
.rdd-taskbar-glassmorphic-item:hover {
|
|
503
|
+
background: var(--rdd-taskbar-item-hover-bg) !important;
|
|
504
|
+
border-color: var(--rdd-accent-color, #38bdf8) !important;
|
|
498
505
|
box-shadow: 0 6px 16px rgba(56, 189, 248, 0.15);
|
|
499
506
|
}
|
|
500
507
|
|
|
501
508
|
/* Minimalist Taskbar Icon-Only & Premium Tooltip Rules */
|
|
502
|
-
.taskbar-item-icon {
|
|
509
|
+
.rdd-taskbar-item-icon {
|
|
503
510
|
font-size: 22px !important;
|
|
504
511
|
line-height: 1 !important;
|
|
505
512
|
display: inline-flex;
|
|
@@ -507,8 +514,8 @@ body.resizing-col-active * {
|
|
|
507
514
|
justify-content: center;
|
|
508
515
|
}
|
|
509
516
|
|
|
510
|
-
.taskbar-item-icon svg,
|
|
511
|
-
.taskbar-item-icon img {
|
|
517
|
+
.rdd-taskbar-item-icon svg,
|
|
518
|
+
.rdd-taskbar-item-icon img {
|
|
512
519
|
width: 22px !important;
|
|
513
520
|
height: 22px !important;
|
|
514
521
|
max-width: 22px !important;
|
|
@@ -528,15 +535,15 @@ body.resizing-col-active * {
|
|
|
528
535
|
}
|
|
529
536
|
}
|
|
530
537
|
|
|
531
|
-
.taskbar-item-tooltip {
|
|
532
|
-
background: var(--bg-panel, #1e1e1e) !important;
|
|
533
|
-
color: var(--text-primary, #ffffff) !important;
|
|
538
|
+
.rdd-taskbar-item-tooltip {
|
|
539
|
+
background: var(--rdd-bg-panel, #1e1e1e) !important;
|
|
540
|
+
color: var(--rdd-text-primary, #ffffff) !important;
|
|
534
541
|
padding: 8px !important;
|
|
535
542
|
border-radius: 6px;
|
|
536
543
|
font-size: 11px !important;
|
|
537
544
|
font-family: 'Outfit', 'Inter', system-ui, sans-serif;
|
|
538
545
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
|
|
539
|
-
border: 1px solid var(--taskbar-item-border, rgba(255, 255, 255, 0.1)) !important;
|
|
546
|
+
border: 1px solid var(--rdd-taskbar-item-border, rgba(255, 255, 255, 0.1)) !important;
|
|
540
547
|
animation: tooltipFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
541
548
|
display: flex;
|
|
542
549
|
flex-direction: column;
|
|
@@ -544,7 +551,7 @@ body.resizing-col-active * {
|
|
|
544
551
|
}
|
|
545
552
|
|
|
546
553
|
/* Invisible bridge so mouse transitions smoothly to tooltip */
|
|
547
|
-
.taskbar-item-tooltip::before {
|
|
554
|
+
.rdd-taskbar-item-tooltip::before {
|
|
548
555
|
content: '';
|
|
549
556
|
position: absolute;
|
|
550
557
|
top: 100%;
|
|
@@ -554,7 +561,7 @@ body.resizing-col-active * {
|
|
|
554
561
|
background: transparent;
|
|
555
562
|
}
|
|
556
563
|
|
|
557
|
-
.taskbar-item-tooltip::after {
|
|
564
|
+
.rdd-taskbar-item-tooltip::after {
|
|
558
565
|
content: '';
|
|
559
566
|
position: absolute;
|
|
560
567
|
top: 100%;
|
|
@@ -562,41 +569,41 @@ body.resizing-col-active * {
|
|
|
562
569
|
transform: translateX(-50%);
|
|
563
570
|
border-width: 5px;
|
|
564
571
|
border-style: solid;
|
|
565
|
-
border-color: var(--bg-panel, #1e1e1e) transparent transparent transparent;
|
|
572
|
+
border-color: var(--rdd-bg-panel, #1e1e1e) transparent transparent transparent;
|
|
566
573
|
}
|
|
567
574
|
|
|
568
575
|
/* Live preview thumbnail styles */
|
|
569
|
-
.taskbar-item-preview-frame {
|
|
576
|
+
.rdd-taskbar-item-preview-frame {
|
|
570
577
|
border-radius: 4px;
|
|
571
578
|
overflow: hidden;
|
|
572
579
|
background: #000000;
|
|
573
|
-
border: 1px solid var(--taskbar-item-border, rgba(255, 255, 255, 0.15));
|
|
580
|
+
border: 1px solid var(--rdd-taskbar-item-border, rgba(255, 255, 255, 0.15));
|
|
574
581
|
position: relative;
|
|
575
582
|
margin-top: 4px;
|
|
576
583
|
pointer-events: none !important;
|
|
577
584
|
user-select: none !important;
|
|
578
585
|
}
|
|
579
586
|
|
|
580
|
-
.taskbar-item-preview-host {
|
|
587
|
+
.rdd-taskbar-item-preview-host {
|
|
581
588
|
transform-origin: top left;
|
|
582
589
|
position: absolute;
|
|
583
590
|
top: 0;
|
|
584
591
|
left: 0;
|
|
585
592
|
}
|
|
586
|
-
.taskbar-item-preview-host * {
|
|
593
|
+
.rdd-taskbar-item-preview-host * {
|
|
587
594
|
pointer-events: none !important;
|
|
588
595
|
user-select: none !important;
|
|
589
596
|
}
|
|
590
597
|
|
|
591
598
|
|
|
592
599
|
|
|
593
|
-
.tooltip-close-x {
|
|
600
|
+
.rdd-tooltip-close-x {
|
|
594
601
|
width: 18px;
|
|
595
602
|
height: 18px;
|
|
596
603
|
border-radius: 3px;
|
|
597
604
|
background: transparent !important;
|
|
598
605
|
border: none !important;
|
|
599
|
-
color: var(--close-btn-color, var(--text-secondary, #888888)) !important;
|
|
606
|
+
color: var(--rdd-close-btn-color, var(--rdd-text-secondary, #888888)) !important;
|
|
600
607
|
cursor: pointer;
|
|
601
608
|
transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
|
|
602
609
|
flex-shrink: 0;
|
|
@@ -606,35 +613,36 @@ body.resizing-col-active * {
|
|
|
606
613
|
opacity: 0.75;
|
|
607
614
|
}
|
|
608
615
|
|
|
609
|
-
.tooltip-close-x:hover {
|
|
610
|
-
background: var(--close-btn-hover-bg) !important;
|
|
611
|
-
color: var(--close-btn-hover-color) !important;
|
|
616
|
+
.rdd-tooltip-close-x:hover {
|
|
617
|
+
background: var(--rdd-close-btn-hover-bg) !important;
|
|
618
|
+
color: var(--rdd-close-btn-hover-color) !important;
|
|
612
619
|
opacity: 1 !important;
|
|
613
620
|
}
|
|
614
|
-
.scrollbar-hidden::-webkit-scrollbar {
|
|
621
|
+
.rdd-scrollbar-hidden::-webkit-scrollbar {
|
|
615
622
|
display: none;
|
|
616
623
|
}
|
|
617
624
|
|
|
618
|
-
/* Cross-browser scrollbar styling (Firefox standard)
|
|
619
|
-
|
|
625
|
+
/* Cross-browser scrollbar styling (Firefox standard) — scoped to the library's
|
|
626
|
+
own workspace subtree, never the consumer's page. */
|
|
627
|
+
.rdd-workspace * {
|
|
620
628
|
scrollbar-width: thin;
|
|
621
|
-
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
629
|
+
scrollbar-color: var(--rdd-scrollbar-thumb) var(--rdd-scrollbar-track);
|
|
622
630
|
}
|
|
623
631
|
|
|
624
632
|
/* WebKit (Chrome, Safari, Edge) scrollbar styling */
|
|
625
|
-
::-webkit-scrollbar {
|
|
633
|
+
.rdd-workspace ::-webkit-scrollbar {
|
|
626
634
|
width: 6px;
|
|
627
635
|
height: 6px;
|
|
628
636
|
}
|
|
629
|
-
::-webkit-scrollbar-track {
|
|
630
|
-
background: var(--scrollbar-track);
|
|
637
|
+
.rdd-workspace ::-webkit-scrollbar-track {
|
|
638
|
+
background: var(--rdd-scrollbar-track);
|
|
631
639
|
}
|
|
632
|
-
::-webkit-scrollbar-thumb {
|
|
633
|
-
background: var(--scrollbar-thumb);
|
|
640
|
+
.rdd-workspace ::-webkit-scrollbar-thumb {
|
|
641
|
+
background: var(--rdd-scrollbar-thumb);
|
|
634
642
|
border-radius: 4px;
|
|
635
643
|
}
|
|
636
|
-
::-webkit-scrollbar-thumb:hover {
|
|
637
|
-
background: var(--scrollbar-thumb-hover);
|
|
644
|
+
.rdd-workspace ::-webkit-scrollbar-thumb:hover {
|
|
645
|
+
background: var(--rdd-scrollbar-thumb-hover);
|
|
638
646
|
}
|
|
639
647
|
|
|
640
648
|
/* Premium Hover Highlight Effects */
|
|
@@ -643,41 +651,41 @@ body.resizing-col-active * {
|
|
|
643
651
|
border-color: rgba(56, 189, 248, 0.25) !important;
|
|
644
652
|
}
|
|
645
653
|
|
|
646
|
-
.floating-window {
|
|
654
|
+
.rdd-floating-window {
|
|
647
655
|
display: flex;
|
|
648
656
|
flex-direction: column;
|
|
649
657
|
border-radius: 8px;
|
|
650
|
-
border: 1px solid var(--window-border);
|
|
651
|
-
box-shadow: var(--window-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
658
|
+
border: 1px solid var(--rdd-window-border);
|
|
659
|
+
box-shadow: var(--rdd-window-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
652
660
|
backdrop-filter: blur(16px) saturate(180%);
|
|
653
661
|
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
|
654
|
-
background-color: var(--window-bg);
|
|
662
|
+
background-color: var(--rdd-window-bg);
|
|
655
663
|
overflow: hidden;
|
|
656
664
|
transition: box-shadow 0.2s, border-color 0.2s;
|
|
657
665
|
}
|
|
658
666
|
|
|
659
|
-
.floating-window.
|
|
660
|
-
box-shadow: var(--window-shadow-focused), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
661
|
-
border-color: var(--window-border-focused);
|
|
667
|
+
.rdd-floating-window.rdd-window-focused {
|
|
668
|
+
box-shadow: var(--rdd-window-shadow-focused), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
669
|
+
border-color: var(--rdd-window-border-focused);
|
|
662
670
|
}
|
|
663
671
|
|
|
664
672
|
/* Dim only titlebar when window is unfocused to keep panel content opaque */
|
|
665
|
-
.floating-window:not(.
|
|
673
|
+
.rdd-floating-window:not(.rdd-window-focused) .rdd-floating-window-titlebar {
|
|
666
674
|
opacity: 0.65;
|
|
667
675
|
transition: opacity 0.2s ease;
|
|
668
676
|
}
|
|
669
677
|
|
|
670
|
-
.floating-window.maximized {
|
|
678
|
+
.rdd-floating-window.maximized {
|
|
671
679
|
border-radius: 0;
|
|
672
680
|
border: none;
|
|
673
681
|
box-shadow: none;
|
|
674
682
|
}
|
|
675
683
|
|
|
676
684
|
|
|
677
|
-
.floating-window-titlebar {
|
|
685
|
+
.rdd-floating-window-titlebar {
|
|
678
686
|
padding: 8px 14px;
|
|
679
|
-
background-color: var(--window-header-bg);
|
|
680
|
-
border-bottom: 1px solid var(--window-border);
|
|
687
|
+
background-color: var(--rdd-window-header-bg);
|
|
688
|
+
border-bottom: 1px solid var(--rdd-window-border);
|
|
681
689
|
min-height: 38px;
|
|
682
690
|
display: flex;
|
|
683
691
|
flex-direction: row;
|
|
@@ -685,11 +693,11 @@ body.resizing-col-active * {
|
|
|
685
693
|
align-items: center;
|
|
686
694
|
}
|
|
687
695
|
|
|
688
|
-
.floating-window-title {
|
|
696
|
+
.rdd-floating-window-title {
|
|
689
697
|
font-family: 'Outfit', sans-serif;
|
|
690
698
|
font-size: 0.78rem;
|
|
691
699
|
font-weight: 600;
|
|
692
|
-
color: var(--window-text);
|
|
700
|
+
color: var(--rdd-window-text);
|
|
693
701
|
letter-spacing: 0.02em;
|
|
694
702
|
display: flex;
|
|
695
703
|
align-items: center;
|
|
@@ -699,20 +707,20 @@ body.resizing-col-active * {
|
|
|
699
707
|
margin-inline-end: 0.5rem;
|
|
700
708
|
}
|
|
701
709
|
|
|
702
|
-
.cursor-move {
|
|
710
|
+
.rdd-cursor-move {
|
|
703
711
|
cursor: grab;
|
|
704
712
|
}
|
|
705
|
-
.cursor-move:active {
|
|
713
|
+
.rdd-cursor-move:active {
|
|
706
714
|
cursor: grabbing;
|
|
707
715
|
}
|
|
708
716
|
|
|
709
717
|
/* ==========================================================================
|
|
710
|
-
CONTEXT MENU (.
|
|
718
|
+
CONTEXT MENU (.rdd-context-menu)
|
|
711
719
|
========================================================================== */
|
|
712
720
|
|
|
713
721
|
/* Icon slot used by both context menu items and toolbar flyout items.
|
|
714
722
|
Fixed width keeps text columns aligned regardless of SVG size. */
|
|
715
|
-
.
|
|
723
|
+
.rdd-menu-icon {
|
|
716
724
|
width: 14px;
|
|
717
725
|
display: inline-flex;
|
|
718
726
|
align-items: center;
|
|
@@ -720,9 +728,9 @@ body.resizing-col-active * {
|
|
|
720
728
|
flex-shrink: 0;
|
|
721
729
|
}
|
|
722
730
|
|
|
723
|
-
.
|
|
731
|
+
.rdd-context-menu {
|
|
724
732
|
position: fixed;
|
|
725
|
-
z-index:
|
|
733
|
+
z-index: calc(var(--rdd-z-base, 1000) + 8500);
|
|
726
734
|
background: var(--sidebar-bg, #1e2024);
|
|
727
735
|
border: 1px solid var(--sidebar-border, rgba(255, 255, 255, 0.08));
|
|
728
736
|
border-radius: 6px;
|
|
@@ -731,27 +739,27 @@ body.resizing-col-active * {
|
|
|
731
739
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
732
740
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
733
741
|
font-size: 13px;
|
|
734
|
-
animation:
|
|
742
|
+
animation: rdd-context-menu-in 0.1s cubic-bezier(0.16, 1, 0.3, 1);
|
|
735
743
|
outline: none;
|
|
736
744
|
}
|
|
737
745
|
|
|
738
|
-
@keyframes
|
|
746
|
+
@keyframes rdd-context-menu-in {
|
|
739
747
|
from { opacity: 0; transform: scale(0.97); }
|
|
740
748
|
to { opacity: 1; transform: scale(1); }
|
|
741
749
|
}
|
|
742
750
|
|
|
743
|
-
.
|
|
744
|
-
z-index:
|
|
751
|
+
.rdd-context-menu--submenu {
|
|
752
|
+
z-index: calc(var(--rdd-z-base, 1000) + 8501);
|
|
745
753
|
}
|
|
746
754
|
|
|
747
|
-
.
|
|
755
|
+
.rdd-context-menu__separator {
|
|
748
756
|
height: 1px;
|
|
749
757
|
background: var(--sidebar-border, rgba(255, 255, 255, 0.08));
|
|
750
758
|
margin: 4px 8px;
|
|
751
759
|
border: none;
|
|
752
760
|
}
|
|
753
761
|
|
|
754
|
-
.
|
|
762
|
+
.rdd-context-menu__item {
|
|
755
763
|
display: flex;
|
|
756
764
|
align-items: center;
|
|
757
765
|
width: calc(100% - 8px);
|
|
@@ -771,23 +779,23 @@ body.resizing-col-active * {
|
|
|
771
779
|
font-family: inherit;
|
|
772
780
|
}
|
|
773
781
|
|
|
774
|
-
.
|
|
782
|
+
.rdd-context-menu__item:hover:not(:disabled):not(.rdd-context-menu__item--disabled) {
|
|
775
783
|
background-color: var(--toolbar-btn-hover-bg, rgba(255, 255, 255, 0.07));
|
|
776
784
|
color: var(--sidebar-text-title, #f8f9fa);
|
|
777
785
|
}
|
|
778
786
|
|
|
779
|
-
.
|
|
780
|
-
.
|
|
787
|
+
.rdd-context-menu__item:disabled,
|
|
788
|
+
.rdd-context-menu__item--disabled {
|
|
781
789
|
opacity: 0.38;
|
|
782
790
|
cursor: default;
|
|
783
791
|
pointer-events: none;
|
|
784
792
|
}
|
|
785
793
|
|
|
786
|
-
.
|
|
794
|
+
.rdd-context-menu__item--has-submenu.rdd-context-menu__item--submenu-open {
|
|
787
795
|
background-color: var(--toolbar-btn-radio-active-bg, rgba(9, 71, 113, 0.35));
|
|
788
796
|
}
|
|
789
797
|
|
|
790
|
-
.
|
|
798
|
+
.rdd-context-menu__icon {
|
|
791
799
|
width: 16px;
|
|
792
800
|
min-width: 16px;
|
|
793
801
|
display: inline-flex;
|
|
@@ -798,13 +806,13 @@ body.resizing-col-active * {
|
|
|
798
806
|
opacity: 0.85;
|
|
799
807
|
}
|
|
800
808
|
|
|
801
|
-
.
|
|
809
|
+
.rdd-context-menu__label {
|
|
802
810
|
flex: 1;
|
|
803
811
|
overflow: hidden;
|
|
804
812
|
text-overflow: ellipsis;
|
|
805
813
|
}
|
|
806
814
|
|
|
807
|
-
.
|
|
815
|
+
.rdd-context-menu__chevron {
|
|
808
816
|
flex-shrink: 0;
|
|
809
817
|
margin-left: auto;
|
|
810
818
|
padding-left: 12px;
|
|
@@ -813,7 +821,7 @@ body.resizing-col-active * {
|
|
|
813
821
|
opacity: 0.6;
|
|
814
822
|
}
|
|
815
823
|
|
|
816
|
-
[dir="rtl"] .
|
|
824
|
+
[dir="rtl"] .rdd-context-menu__chevron {
|
|
817
825
|
margin-left: 0;
|
|
818
826
|
margin-right: auto;
|
|
819
827
|
padding-left: 0;
|
|
@@ -821,14 +829,14 @@ body.resizing-col-active * {
|
|
|
821
829
|
transform: scaleX(-1);
|
|
822
830
|
}
|
|
823
831
|
|
|
824
|
-
[dir="rtl"] .
|
|
832
|
+
[dir="rtl"] .rdd-context-menu__checkbox {
|
|
825
833
|
margin-left: 0;
|
|
826
834
|
margin-right: auto;
|
|
827
835
|
padding-left: 0;
|
|
828
836
|
padding-right: 12px;
|
|
829
837
|
}
|
|
830
838
|
|
|
831
|
-
.
|
|
839
|
+
.rdd-context-menu__checkbox {
|
|
832
840
|
width: 14px;
|
|
833
841
|
min-width: 14px;
|
|
834
842
|
height: 14px;
|
|
@@ -843,12 +851,12 @@ body.resizing-col-active * {
|
|
|
843
851
|
opacity: 0.6;
|
|
844
852
|
}
|
|
845
853
|
|
|
846
|
-
.
|
|
854
|
+
.rdd-context-menu__checkbox--checked {
|
|
847
855
|
opacity: 1;
|
|
848
856
|
}
|
|
849
857
|
|
|
850
858
|
/* Drag split target drop zone overlays */
|
|
851
|
-
.dock-drop-zone-overlay {
|
|
859
|
+
.rdd-dock-drop-zone-overlay {
|
|
852
860
|
position: absolute;
|
|
853
861
|
inset: 0;
|
|
854
862
|
z-index: 100;
|
|
@@ -861,17 +869,17 @@ body.resizing-col-active * {
|
|
|
861
869
|
}
|
|
862
870
|
|
|
863
871
|
/* Translucent overlay preview highlighting the grid section about to split */
|
|
864
|
-
.dock-preview-highlight {
|
|
872
|
+
.rdd-dock-preview-highlight {
|
|
865
873
|
position: absolute;
|
|
866
874
|
background-color: rgba(56, 189, 248, 0.2) !important; /* neon cyan overlay */
|
|
867
|
-
border: 1.5px dashed var(--accent-color) !important;
|
|
875
|
+
border: 1.5px dashed var(--rdd-accent-color) !important;
|
|
868
876
|
transition: all 0.1s ease-out;
|
|
869
877
|
pointer-events: none;
|
|
870
878
|
z-index: 90;
|
|
871
879
|
}
|
|
872
880
|
|
|
873
881
|
/* Central cross layout container */
|
|
874
|
-
.dock-target-cross {
|
|
882
|
+
.rdd-dock-target-cross {
|
|
875
883
|
position: relative;
|
|
876
884
|
width: 140px;
|
|
877
885
|
height: 140px;
|
|
@@ -879,7 +887,7 @@ body.resizing-col-active * {
|
|
|
879
887
|
}
|
|
880
888
|
|
|
881
889
|
/* Visual split target buttons (top, bottom, left, right, center) */
|
|
882
|
-
.dock-target-box {
|
|
890
|
+
.rdd-dock-target-box {
|
|
883
891
|
position: absolute;
|
|
884
892
|
background-color: rgba(15, 23, 42, 0.92);
|
|
885
893
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
@@ -891,63 +899,63 @@ body.resizing-col-active * {
|
|
|
891
899
|
transition: all 0.12s ease-in-out;
|
|
892
900
|
pointer-events: auto;
|
|
893
901
|
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
|
894
|
-
color: var(--text-secondary);
|
|
902
|
+
color: var(--rdd-text-secondary);
|
|
895
903
|
}
|
|
896
904
|
|
|
897
|
-
.dock-target-box:hover {
|
|
898
|
-
background-color: var(--accent-color) !important;
|
|
905
|
+
.rdd-dock-target-box:hover {
|
|
906
|
+
background-color: var(--rdd-accent-color) !important;
|
|
899
907
|
border-color: #ffffff !important;
|
|
900
908
|
color: #090b11 !important;
|
|
901
909
|
transform: scale(1.12);
|
|
902
|
-
box-shadow: 0 0 12px var(--accent-color);
|
|
910
|
+
box-shadow: 0 0 12px var(--rdd-accent-color);
|
|
903
911
|
}
|
|
904
912
|
|
|
905
913
|
/* Specific split target layouts */
|
|
906
|
-
.dock-target-left {
|
|
914
|
+
.rdd-dock-target-left {
|
|
907
915
|
left: 0;
|
|
908
916
|
top: 45px;
|
|
909
917
|
width: 40px;
|
|
910
918
|
height: 50px;
|
|
911
919
|
}
|
|
912
|
-
.dock-target-right {
|
|
920
|
+
.rdd-dock-target-right {
|
|
913
921
|
right: 0;
|
|
914
922
|
top: 45px;
|
|
915
923
|
width: 40px;
|
|
916
924
|
height: 50px;
|
|
917
925
|
}
|
|
918
|
-
.dock-target-top {
|
|
926
|
+
.rdd-dock-target-top {
|
|
919
927
|
left: 45px;
|
|
920
928
|
top: 0;
|
|
921
929
|
width: 50px;
|
|
922
930
|
height: 40px;
|
|
923
931
|
}
|
|
924
|
-
.dock-target-bottom {
|
|
932
|
+
.rdd-dock-target-bottom {
|
|
925
933
|
left: 45px;
|
|
926
934
|
bottom: 0;
|
|
927
935
|
width: 50px;
|
|
928
936
|
height: 40px;
|
|
929
937
|
}
|
|
930
|
-
.dock-target-center {
|
|
938
|
+
.rdd-dock-target-center {
|
|
931
939
|
left: 45px;
|
|
932
940
|
top: 45px;
|
|
933
941
|
width: 50px;
|
|
934
942
|
height: 50px;
|
|
935
943
|
background-color: rgba(30, 41, 59, 0.95);
|
|
936
|
-
color: var(--accent-color);
|
|
944
|
+
color: var(--rdd-accent-color);
|
|
937
945
|
}
|
|
938
946
|
|
|
939
947
|
/* Drag hover indicators: glowing insertion line */
|
|
940
|
-
.workspace-tab.drag-hover-left {
|
|
941
|
-
box-shadow: -3px 0 0 0 var(--accent-color, #38bdf8),
|
|
942
|
-
-10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
|
|
948
|
+
.rdd-workspace-tab.rdd-drag-hover-left {
|
|
949
|
+
box-shadow: -3px 0 0 0 var(--rdd-accent-color, #38bdf8),
|
|
950
|
+
-10px 0 10px -2px var(--rdd-accent-glow, rgba(56,189,248,0.35));
|
|
943
951
|
}
|
|
944
|
-
.workspace-tab.drag-hover-right {
|
|
945
|
-
box-shadow: 3px 0 0 0 var(--accent-color, #38bdf8),
|
|
946
|
-
10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
|
|
952
|
+
.rdd-workspace-tab.rdd-drag-hover-right {
|
|
953
|
+
box-shadow: 3px 0 0 0 var(--rdd-accent-color, #38bdf8),
|
|
954
|
+
10px 0 10px -2px var(--rdd-accent-glow, rgba(56,189,248,0.35));
|
|
947
955
|
}
|
|
948
956
|
|
|
949
957
|
/* Close button for empty LeafGroups inside header */
|
|
950
|
-
.header-close-empty-group {
|
|
958
|
+
.rdd-header-close-empty-group {
|
|
951
959
|
opacity: 0 !important;
|
|
952
960
|
transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease !important;
|
|
953
961
|
display: flex;
|
|
@@ -956,19 +964,19 @@ body.resizing-col-active * {
|
|
|
956
964
|
margin-inline-end: 0.5rem;
|
|
957
965
|
}
|
|
958
966
|
|
|
959
|
-
.workspace-panel:hover .header-close-empty-group {
|
|
967
|
+
.rdd-workspace-panel:hover .rdd-header-close-empty-group {
|
|
960
968
|
opacity: 0.75 !important;
|
|
961
969
|
}
|
|
962
970
|
|
|
963
|
-
.header-close-empty-group:hover {
|
|
971
|
+
.rdd-header-close-empty-group:hover {
|
|
964
972
|
opacity: 1 !important;
|
|
965
973
|
background-color: rgba(255, 255, 255, 0.12) !important;
|
|
966
974
|
color: #ffffff !important;
|
|
967
975
|
}
|
|
968
976
|
|
|
969
977
|
/* Grabbing cursor style during active dragging */
|
|
970
|
-
.dragging-active,
|
|
971
|
-
.dragging-active * {
|
|
978
|
+
.rdd-dragging-active,
|
|
979
|
+
.rdd-dragging-active * {
|
|
972
980
|
cursor: grabbing !important;
|
|
973
981
|
}
|
|
974
982
|
|
|
@@ -1014,13 +1022,13 @@ body.resizing-col-active * {
|
|
|
1014
1022
|
}
|
|
1015
1023
|
|
|
1016
1024
|
[data-color-scheme="light"] {
|
|
1017
|
-
--bg-primary: #f8f9fa;
|
|
1018
|
-
--bg-workspace: #f1f5f9;
|
|
1019
|
-
--bg-panel: #ffffff;
|
|
1020
|
-
--bg-tab-bar: #e9ecef;
|
|
1021
|
-
--text-primary: #212529;
|
|
1022
|
-
--text-secondary: #6c757d;
|
|
1023
|
-
--border-color: rgba(0, 0, 0, 0.08);
|
|
1025
|
+
--rdd-bg-primary: #f8f9fa;
|
|
1026
|
+
--rdd-bg-workspace: #f1f5f9;
|
|
1027
|
+
--rdd-bg-panel: #ffffff;
|
|
1028
|
+
--rdd-bg-tab-bar: #e9ecef;
|
|
1029
|
+
--rdd-text-primary: #212529;
|
|
1030
|
+
--rdd-text-secondary: #6c757d;
|
|
1031
|
+
--rdd-border-color: rgba(0, 0, 0, 0.08);
|
|
1024
1032
|
|
|
1025
1033
|
--sidebar-bg: #f8f9fa;
|
|
1026
1034
|
--sidebar-tabs-bg: #e9ecef;
|
|
@@ -1050,63 +1058,63 @@ body.resizing-col-active * {
|
|
|
1050
1058
|
--toolbar-btn-toggle-active-bg: rgba(0, 102, 204, 0.06);
|
|
1051
1059
|
--toolbar-separator-color: rgba(0, 0, 0, 0.1);
|
|
1052
1060
|
/* Light skin window overrides */
|
|
1053
|
-
--window-bg: rgba(243, 244, 246, var(--window-opacity, 0.9));
|
|
1054
|
-
--window-border: rgba(0, 0, 0, 0.08);
|
|
1055
|
-
--window-border-focused: rgba(0, 0, 0, 0.28);
|
|
1056
|
-
--window-header-bg: rgba(0, 0, 0, 0.04);
|
|
1057
|
-
--window-text: #212529;
|
|
1058
|
-
--window-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
|
|
1059
|
-
--window-shadow-focused: 0 16px 36px rgba(0, 0, 0, 0.12);
|
|
1061
|
+
--rdd-window-bg: rgba(243, 244, 246, var(--rdd-window-opacity, 0.9));
|
|
1062
|
+
--rdd-window-border: rgba(0, 0, 0, 0.08);
|
|
1063
|
+
--rdd-window-border-focused: rgba(0, 0, 0, 0.28);
|
|
1064
|
+
--rdd-window-header-bg: rgba(0, 0, 0, 0.04);
|
|
1065
|
+
--rdd-window-text: #212529;
|
|
1066
|
+
--rdd-window-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
|
|
1067
|
+
--rdd-window-shadow-focused: 0 16px 36px rgba(0, 0, 0, 0.12);
|
|
1060
1068
|
/* Light skin grid/docked panel overrides */
|
|
1061
|
-
--border-panel: rgba(0, 0, 0, 0.08);
|
|
1062
|
-
--bg-tab-inactive: #e9ecef;
|
|
1063
|
-
--text-tab-inactive: #495057;
|
|
1064
|
-
--text-tab-active: #212529;
|
|
1069
|
+
--rdd-border-panel: rgba(0, 0, 0, 0.08);
|
|
1070
|
+
--rdd-bg-tab-inactive: #e9ecef;
|
|
1071
|
+
--rdd-text-tab-inactive: #495057;
|
|
1072
|
+
--rdd-text-tab-active: #212529;
|
|
1065
1073
|
/* Light skin tab and control button hover colors */
|
|
1066
|
-
--bg-tab-hover: #dee2e6;
|
|
1067
|
-
--text-tab-hover: #212529;
|
|
1068
|
-
--close-btn-hover-bg: rgba(0, 0, 0, 0.08);
|
|
1069
|
-
--close-btn-hover-color: #212529;
|
|
1070
|
-
--close-btn-color: #6c757d;
|
|
1071
|
-
--close-btn-active-color: #212529;
|
|
1072
|
-
--tab-indicator-focused: #0066cc;
|
|
1073
|
-
--tab-indicator-unfocused: rgba(0, 0, 0, 0.25);
|
|
1074
|
-
--tab-bg-active-focused: var(--bg-panel);
|
|
1075
|
-
--tab-bg-active-unfocused: rgba(220, 224, 230, 0.65);
|
|
1076
|
-
--tab-text-active-focused: #212529;
|
|
1077
|
-
--tab-text-active-unfocused: #6c757d;
|
|
1078
|
-
--resizer-bg: rgba(0, 0, 0, 0.08);
|
|
1079
|
-
--custom-btn-bg: rgba(0, 0, 0, 0.03);
|
|
1080
|
-
--custom-btn-border: rgba(0, 0, 0, 0.08);
|
|
1081
|
-
--custom-btn-hover-bg: rgba(0, 0, 0, 0.08);
|
|
1082
|
-
--custom-btn-hover-color: #212529;
|
|
1074
|
+
--rdd-bg-tab-hover: #dee2e6;
|
|
1075
|
+
--rdd-text-tab-hover: #212529;
|
|
1076
|
+
--rdd-close-btn-hover-bg: rgba(0, 0, 0, 0.08);
|
|
1077
|
+
--rdd-close-btn-hover-color: #212529;
|
|
1078
|
+
--rdd-close-btn-color: #6c757d;
|
|
1079
|
+
--rdd-close-btn-active-color: #212529;
|
|
1080
|
+
--rdd-tab-indicator-focused: #0066cc;
|
|
1081
|
+
--rdd-tab-indicator-unfocused: rgba(0, 0, 0, 0.25);
|
|
1082
|
+
--rdd-tab-bg-active-focused: var(--rdd-bg-panel);
|
|
1083
|
+
--rdd-tab-bg-active-unfocused: rgba(220, 224, 230, 0.65);
|
|
1084
|
+
--rdd-tab-text-active-focused: #212529;
|
|
1085
|
+
--rdd-tab-text-active-unfocused: #6c757d;
|
|
1086
|
+
--rdd-resizer-bg: rgba(0, 0, 0, 0.08);
|
|
1087
|
+
--rdd-custom-btn-bg: rgba(0, 0, 0, 0.03);
|
|
1088
|
+
--rdd-custom-btn-border: rgba(0, 0, 0, 0.08);
|
|
1089
|
+
--rdd-custom-btn-hover-bg: rgba(0, 0, 0, 0.08);
|
|
1090
|
+
--rdd-custom-btn-hover-color: #212529;
|
|
1083
1091
|
/* Light skin taskbar theme variables */
|
|
1084
|
-
--taskbar-bg: rgba(248, 249, 250, 0.85);
|
|
1085
|
-
--taskbar-border: rgba(0, 0, 0, 0.08);
|
|
1086
|
-
--taskbar-nav-color: rgba(0, 0, 0, 0.5);
|
|
1087
|
-
--taskbar-item-bg: rgba(255, 255, 255, 0.65);
|
|
1088
|
-
--taskbar-item-hover-bg: rgba(255, 255, 255, 0.85);
|
|
1089
|
-
--taskbar-item-border: rgba(0, 0, 0, 0.08);
|
|
1090
|
-
--taskbar-item-text: #0066cc;
|
|
1092
|
+
--rdd-taskbar-bg: rgba(248, 249, 250, 0.85);
|
|
1093
|
+
--rdd-taskbar-border: rgba(0, 0, 0, 0.08);
|
|
1094
|
+
--rdd-taskbar-nav-color: rgba(0, 0, 0, 0.5);
|
|
1095
|
+
--rdd-taskbar-item-bg: rgba(255, 255, 255, 0.65);
|
|
1096
|
+
--rdd-taskbar-item-hover-bg: rgba(255, 255, 255, 0.85);
|
|
1097
|
+
--rdd-taskbar-item-border: rgba(0, 0, 0, 0.08);
|
|
1098
|
+
--rdd-taskbar-item-text: #0066cc;
|
|
1091
1099
|
/* Light skin scrollbar theme variables */
|
|
1092
|
-
--scrollbar-thumb: rgba(0, 0, 0, 0.15);
|
|
1093
|
-
--scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
|
|
1094
|
-
--scrollbar-track: rgba(0, 0, 0, 0.02);
|
|
1100
|
+
--rdd-scrollbar-thumb: rgba(0, 0, 0, 0.15);
|
|
1101
|
+
--rdd-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
|
|
1102
|
+
--rdd-scrollbar-track: rgba(0, 0, 0, 0.02);
|
|
1095
1103
|
/* Light skin mockup panel inner theme variables */
|
|
1096
|
-
--panel-card-bg: rgba(0, 0, 0, 0.03);
|
|
1097
|
-
--panel-card-border: rgba(0, 0, 0, 0.08);
|
|
1098
|
-
--panel-text: #212529;
|
|
1099
|
-
--panel-title-color: #0066cc;
|
|
1104
|
+
--rdd-panel-card-bg: rgba(0, 0, 0, 0.03);
|
|
1105
|
+
--rdd-panel-card-border: rgba(0, 0, 0, 0.08);
|
|
1106
|
+
--rdd-panel-text: #212529;
|
|
1107
|
+
--rdd-panel-title-color: #0066cc;
|
|
1100
1108
|
/* ── Panel Overlay — Toolbar (light) ── */
|
|
1101
|
-
--panel-toolbar-fg: rgba(0, 0, 0, 0.55);
|
|
1102
|
-
--panel-toolbar-fg-hover: rgba(0, 0, 0, 0.85);
|
|
1103
|
-
--panel-toolbar-btn-hover-bg: rgba(0, 0, 0, 0.08);
|
|
1104
|
-
--panel-toolbar-separator-color: rgba(0, 0, 0, 0.1);
|
|
1109
|
+
--rdd-panel-toolbar-fg: rgba(0, 0, 0, 0.55);
|
|
1110
|
+
--rdd-panel-toolbar-fg-hover: rgba(0, 0, 0, 0.85);
|
|
1111
|
+
--rdd-panel-toolbar-btn-hover-bg: rgba(0, 0, 0, 0.08);
|
|
1112
|
+
--rdd-panel-toolbar-separator-color: rgba(0, 0, 0, 0.1);
|
|
1105
1113
|
/* ── Panel Overlay — Floating Window (light) ── */
|
|
1106
|
-
--panel-float-bg: rgba(255, 255, 255, 0.96);
|
|
1107
|
-
--panel-float-border: rgba(0, 0, 0, 0.1);
|
|
1108
|
-
--panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
1109
|
-
--panel-float-shadow-active: 0 8px 28px rgba(0, 0, 0, 0.2);
|
|
1114
|
+
--rdd-panel-float-bg: rgba(255, 255, 255, 0.96);
|
|
1115
|
+
--rdd-panel-float-border: rgba(0, 0, 0, 0.1);
|
|
1116
|
+
--rdd-panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
1117
|
+
--rdd-panel-float-shadow-active: 0 8px 28px rgba(0, 0, 0, 0.2);
|
|
1110
1118
|
}
|
|
1111
1119
|
|
|
1112
1120
|
/* ==========================================================================
|
|
@@ -1124,95 +1132,95 @@ body.resizing-col-active * {
|
|
|
1124
1132
|
SKIN 2: macOS / Glassmorphic Preset
|
|
1125
1133
|
-------------------------------------------------------------------------- */
|
|
1126
1134
|
[data-workspace-skin="macos"] {
|
|
1127
|
-
--bg-workspace: #1a1a24;
|
|
1128
|
-
--bg-panel: rgba(30, 30, 40, 0.45);
|
|
1129
|
-
--bg-tab-bar: rgba(18, 18, 24, 0.3);
|
|
1130
|
-
--window-bg: rgba(25, 25, 35, var(--window-opacity, 0.7));
|
|
1131
|
-
--window-border: rgba(255, 255, 255, 0.1);
|
|
1132
|
-
--window-header-bg: rgba(0, 0, 0, 0.15);
|
|
1133
|
-
--accent-color: #38bdf8;
|
|
1134
|
-
--accent-glow: rgba(56, 189, 248, 0.25);
|
|
1135
|
-
--border-panel: rgba(255, 255, 255, 0.08);
|
|
1136
|
-
--bg-tab-inactive: transparent;
|
|
1137
|
-
--text-tab-inactive: #94a3b8;
|
|
1138
|
-
--text-tab-active: #ffffff;
|
|
1139
|
-
--window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
|
|
1140
|
-
--window-shadow-focused: 0 24px 50px rgba(56, 189, 248, 0.15);
|
|
1141
|
-
--panel-card-bg: rgba(255, 255, 255, 0.03);
|
|
1142
|
-
--panel-card-border: rgba(255, 255, 255, 0.08);
|
|
1135
|
+
--rdd-bg-workspace: #1a1a24;
|
|
1136
|
+
--rdd-bg-panel: rgba(30, 30, 40, 0.45);
|
|
1137
|
+
--rdd-bg-tab-bar: rgba(18, 18, 24, 0.3);
|
|
1138
|
+
--rdd-window-bg: rgba(25, 25, 35, var(--rdd-window-opacity, 0.7));
|
|
1139
|
+
--rdd-window-border: rgba(255, 255, 255, 0.1);
|
|
1140
|
+
--rdd-window-header-bg: rgba(0, 0, 0, 0.15);
|
|
1141
|
+
--rdd-accent-color: #38bdf8;
|
|
1142
|
+
--rdd-accent-glow: rgba(56, 189, 248, 0.25);
|
|
1143
|
+
--rdd-border-panel: rgba(255, 255, 255, 0.08);
|
|
1144
|
+
--rdd-bg-tab-inactive: transparent;
|
|
1145
|
+
--rdd-text-tab-inactive: #94a3b8;
|
|
1146
|
+
--rdd-text-tab-active: #ffffff;
|
|
1147
|
+
--rdd-window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
|
|
1148
|
+
--rdd-window-shadow-focused: 0 24px 50px rgba(56, 189, 248, 0.15);
|
|
1149
|
+
--rdd-panel-card-bg: rgba(255, 255, 255, 0.03);
|
|
1150
|
+
--rdd-panel-card-border: rgba(255, 255, 255, 0.08);
|
|
1143
1151
|
}
|
|
1144
1152
|
|
|
1145
1153
|
[data-workspace-skin="macos"][data-color-scheme="light"] {
|
|
1146
|
-
--bg-primary: #f3f4f6;
|
|
1147
|
-
--bg-workspace: #e5e7eb;
|
|
1148
|
-
--bg-panel: rgba(255, 255, 255, 0.7);
|
|
1149
|
-
--bg-tab-bar: rgba(229, 231, 235, 0.5);
|
|
1150
|
-
--window-bg: rgba(255, 255, 255, var(--window-opacity, 0.85));
|
|
1151
|
-
--window-border: rgba(0, 0, 0, 0.12);
|
|
1152
|
-
--window-header-bg: rgba(243, 244, 246, 0.5);
|
|
1153
|
-
--accent-color: #0066cc;
|
|
1154
|
-
--accent-glow: rgba(0, 102, 204, 0.15);
|
|
1155
|
-
--border-panel: rgba(0, 0, 0, 0.1);
|
|
1156
|
-
--bg-tab-inactive: transparent;
|
|
1157
|
-
--text-tab-inactive: #4b5563;
|
|
1158
|
-
--text-tab-active: #111827;
|
|
1159
|
-
--window-text: #111827;
|
|
1160
|
-
--window-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
|
1161
|
-
--window-shadow-focused: 0 16px 36px rgba(0, 102, 204, 0.18);
|
|
1162
|
-
--panel-card-bg: rgba(0, 0, 0, 0.04);
|
|
1163
|
-
--panel-card-border: rgba(0, 0, 0, 0.08);
|
|
1164
|
-
--panel-text: #111827;
|
|
1165
|
-
--panel-title-color: #0066cc;
|
|
1166
|
-
--close-btn-color: #4b5563;
|
|
1167
|
-
--close-btn-active-color: #111827;
|
|
1154
|
+
--rdd-bg-primary: #f3f4f6;
|
|
1155
|
+
--rdd-bg-workspace: #e5e7eb;
|
|
1156
|
+
--rdd-bg-panel: rgba(255, 255, 255, 0.7);
|
|
1157
|
+
--rdd-bg-tab-bar: rgba(229, 231, 235, 0.5);
|
|
1158
|
+
--rdd-window-bg: rgba(255, 255, 255, var(--rdd-window-opacity, 0.85));
|
|
1159
|
+
--rdd-window-border: rgba(0, 0, 0, 0.12);
|
|
1160
|
+
--rdd-window-header-bg: rgba(243, 244, 246, 0.5);
|
|
1161
|
+
--rdd-accent-color: #0066cc;
|
|
1162
|
+
--rdd-accent-glow: rgba(0, 102, 204, 0.15);
|
|
1163
|
+
--rdd-border-panel: rgba(0, 0, 0, 0.1);
|
|
1164
|
+
--rdd-bg-tab-inactive: transparent;
|
|
1165
|
+
--rdd-text-tab-inactive: #4b5563;
|
|
1166
|
+
--rdd-text-tab-active: #111827;
|
|
1167
|
+
--rdd-window-text: #111827;
|
|
1168
|
+
--rdd-window-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
|
1169
|
+
--rdd-window-shadow-focused: 0 16px 36px rgba(0, 102, 204, 0.18);
|
|
1170
|
+
--rdd-panel-card-bg: rgba(0, 0, 0, 0.04);
|
|
1171
|
+
--rdd-panel-card-border: rgba(0, 0, 0, 0.08);
|
|
1172
|
+
--rdd-panel-text: #111827;
|
|
1173
|
+
--rdd-panel-title-color: #0066cc;
|
|
1174
|
+
--rdd-close-btn-color: #4b5563;
|
|
1175
|
+
--rdd-close-btn-active-color: #111827;
|
|
1168
1176
|
}
|
|
1169
1177
|
|
|
1170
1178
|
/* macOS structural adjustments */
|
|
1171
|
-
[data-workspace-skin="macos"] .floating-window {
|
|
1179
|
+
[data-workspace-skin="macos"] .rdd-floating-window {
|
|
1172
1180
|
border-radius: 12px;
|
|
1173
1181
|
backdrop-filter: blur(20px) saturate(180%);
|
|
1174
1182
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
1175
|
-
border-color: var(--window-border);
|
|
1183
|
+
border-color: var(--rdd-window-border);
|
|
1176
1184
|
}
|
|
1177
|
-
[data-workspace-skin="macos"] .floating-window-titlebar {
|
|
1185
|
+
[data-workspace-skin="macos"] .rdd-floating-window-titlebar {
|
|
1178
1186
|
border-top-left-radius: 12px;
|
|
1179
1187
|
border-top-right-radius: 12px;
|
|
1180
1188
|
}
|
|
1181
|
-
[data-workspace-skin="macos"] .workspace-panel {
|
|
1189
|
+
[data-workspace-skin="macos"] .rdd-workspace-panel {
|
|
1182
1190
|
border-radius: 8px;
|
|
1183
1191
|
backdrop-filter: blur(12px) saturate(180%);
|
|
1184
1192
|
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
1185
1193
|
}
|
|
1186
|
-
[data-workspace-skin="macos"] .workspace-tab {
|
|
1194
|
+
[data-workspace-skin="macos"] .rdd-workspace-tab {
|
|
1187
1195
|
border-radius: 6px !important;
|
|
1188
1196
|
margin: 4px 4px 4px 4px !important;
|
|
1189
1197
|
height: 28px !important;
|
|
1190
|
-
border: 1px solid var(--border-panel) !important;
|
|
1198
|
+
border: 1px solid var(--rdd-border-panel) !important;
|
|
1191
1199
|
}
|
|
1192
|
-
[data-workspace-skin="macos"] .workspace-tab.active {
|
|
1193
|
-
background-color: var(--bg-workspace) !important;
|
|
1200
|
+
[data-workspace-skin="macos"] .rdd-workspace-tab.rdd-active {
|
|
1201
|
+
background-color: var(--rdd-bg-workspace) !important;
|
|
1194
1202
|
}
|
|
1195
|
-
[data-workspace-skin="macos"] .workspace-tab.active::before {
|
|
1203
|
+
[data-workspace-skin="macos"] .rdd-workspace-tab.rdd-active::before {
|
|
1196
1204
|
display: none !important; /* Hide VS Code top line */
|
|
1197
1205
|
}
|
|
1198
1206
|
|
|
1199
1207
|
/* macOS Circle dots controls styling */
|
|
1200
|
-
[data-workspace-skin="macos"] .custom-tab-btn {
|
|
1208
|
+
[data-workspace-skin="macos"] .rdd-custom-tab-btn {
|
|
1201
1209
|
border-radius: 50% !important;
|
|
1202
1210
|
width: 12px !important;
|
|
1203
1211
|
height: 12px !important;
|
|
1204
|
-
background: var(--custom-btn-bg) !important;
|
|
1212
|
+
background: var(--rdd-custom-btn-bg) !important;
|
|
1205
1213
|
border: none !important;
|
|
1206
1214
|
color: transparent !important;
|
|
1207
1215
|
font-size: 0 !important;
|
|
1208
1216
|
overflow: hidden;
|
|
1209
1217
|
margin: 0 2px;
|
|
1210
1218
|
}
|
|
1211
|
-
[data-workspace-skin="macos"] .floating-window-titlebar {
|
|
1219
|
+
[data-workspace-skin="macos"] .rdd-floating-window-titlebar {
|
|
1212
1220
|
flex-direction: row-reverse !important;
|
|
1213
1221
|
position: relative !important;
|
|
1214
1222
|
}
|
|
1215
|
-
[data-workspace-skin="macos"] .floating-window-titlebar .floating-window-title {
|
|
1223
|
+
[data-workspace-skin="macos"] .rdd-floating-window-titlebar .rdd-floating-window-title {
|
|
1216
1224
|
pointer-events: none !important;
|
|
1217
1225
|
margin: 0 !important;
|
|
1218
1226
|
margin-inline-start: 0.5rem !important;
|
|
@@ -1220,28 +1228,28 @@ body.resizing-col-active * {
|
|
|
1220
1228
|
min-width: 0 !important;
|
|
1221
1229
|
justify-content: flex-end !important;
|
|
1222
1230
|
}
|
|
1223
|
-
[data-workspace-skin="macos"] .floating-window-titlebar .floating-window-title > * {
|
|
1231
|
+
[data-workspace-skin="macos"] .rdd-floating-window-titlebar .rdd-floating-window-title > * {
|
|
1224
1232
|
pointer-events: auto;
|
|
1225
1233
|
}
|
|
1226
|
-
[data-workspace-skin="macos"] .floating-window-titlebar .
|
|
1234
|
+
[data-workspace-skin="macos"] .rdd-floating-window-titlebar .rdd-titlebar-actions {
|
|
1227
1235
|
flex-direction: row-reverse !important;
|
|
1228
1236
|
}
|
|
1229
|
-
[data-workspace-skin="macos"] .custom-tab-btn svg {
|
|
1237
|
+
[data-workspace-skin="macos"] .rdd-custom-tab-btn svg {
|
|
1230
1238
|
display: none !important;
|
|
1231
1239
|
}
|
|
1232
|
-
[data-workspace-skin="macos"] .btn-close-tab {
|
|
1240
|
+
[data-workspace-skin="macos"] .rdd-btn-close-tab {
|
|
1233
1241
|
background-color: #ff5f56 !important; /* Red (Close) */
|
|
1234
1242
|
}
|
|
1235
|
-
[data-workspace-skin="macos"] .btn-minimize-tab {
|
|
1243
|
+
[data-workspace-skin="macos"] .rdd-btn-minimize-tab {
|
|
1236
1244
|
background-color: #ffbd2e !important; /* Yellow (Minimize) */
|
|
1237
1245
|
}
|
|
1238
|
-
[data-workspace-skin="macos"] .btn-maximize-tab {
|
|
1246
|
+
[data-workspace-skin="macos"] .rdd-btn-maximize-tab {
|
|
1239
1247
|
background-color: #27c93f !important; /* Green (Maximize) */
|
|
1240
1248
|
}
|
|
1241
1249
|
|
|
1242
1250
|
/* Panel Icon Styling and Alignment */
|
|
1243
|
-
.workspace-tab-icon,
|
|
1244
|
-
.window-title-icon {
|
|
1251
|
+
.rdd-workspace-tab-icon,
|
|
1252
|
+
.rdd-window-title-icon {
|
|
1245
1253
|
display: inline-flex;
|
|
1246
1254
|
align-items: center;
|
|
1247
1255
|
justify-content: center;
|
|
@@ -1251,10 +1259,10 @@ body.resizing-col-active * {
|
|
|
1251
1259
|
margin-inline-end: 4px !important; /* Forces the gap between the icon and the text title */
|
|
1252
1260
|
}
|
|
1253
1261
|
|
|
1254
|
-
.workspace-tab-icon svg,
|
|
1255
|
-
.workspace-tab-icon img,
|
|
1256
|
-
.window-title-icon svg,
|
|
1257
|
-
.window-title-icon img {
|
|
1262
|
+
.rdd-workspace-tab-icon svg,
|
|
1263
|
+
.rdd-workspace-tab-icon img,
|
|
1264
|
+
.rdd-window-title-icon svg,
|
|
1265
|
+
.rdd-window-title-icon img {
|
|
1258
1266
|
width: 14px !important;
|
|
1259
1267
|
height: 14px !important;
|
|
1260
1268
|
max-width: 14px !important;
|
|
@@ -1263,7 +1271,7 @@ body.resizing-col-active * {
|
|
|
1263
1271
|
display: block;
|
|
1264
1272
|
}
|
|
1265
1273
|
|
|
1266
|
-
[data-workspace-skin="macos"] .custom-tab-btn:hover {
|
|
1274
|
+
[data-workspace-skin="macos"] .rdd-custom-tab-btn:hover {
|
|
1267
1275
|
filter: brightness(0.85);
|
|
1268
1276
|
transform: none !important;
|
|
1269
1277
|
}
|
|
@@ -1272,63 +1280,63 @@ body.resizing-col-active * {
|
|
|
1272
1280
|
SKIN 3: Chrome / Browser-Style Preset
|
|
1273
1281
|
-------------------------------------------------------------------------- */
|
|
1274
1282
|
[data-workspace-skin="chrome"] {
|
|
1275
|
-
--bg-workspace: #202124;
|
|
1276
|
-
--bg-panel: #292a2d;
|
|
1277
|
-
--bg-tab-bar: #202124;
|
|
1278
|
-
--window-bg: rgba(41, 42, 45, var(--window-opacity, 1.0));
|
|
1279
|
-
--window-border: #3c4043;
|
|
1280
|
-
--window-header-bg: #202124;
|
|
1281
|
-
--accent-color: #8ab4f8;
|
|
1282
|
-
--accent-glow: rgba(138, 180, 248, 0.15);
|
|
1283
|
-
--border-panel: #3c4043;
|
|
1284
|
-
--bg-tab-inactive: #202124;
|
|
1285
|
-
--text-tab-inactive: #9aa0a6;
|
|
1286
|
-
--text-tab-active: #ffffff;
|
|
1287
|
-
--panel-card-bg: #202124;
|
|
1288
|
-
--panel-card-border: #3c4043;
|
|
1289
|
-
--window-text: #ffffff;
|
|
1290
|
-
--panel-text: #e8eaed;
|
|
1283
|
+
--rdd-bg-workspace: #202124;
|
|
1284
|
+
--rdd-bg-panel: #292a2d;
|
|
1285
|
+
--rdd-bg-tab-bar: #202124;
|
|
1286
|
+
--rdd-window-bg: rgba(41, 42, 45, var(--rdd-window-opacity, 1.0));
|
|
1287
|
+
--rdd-window-border: #3c4043;
|
|
1288
|
+
--rdd-window-header-bg: #202124;
|
|
1289
|
+
--rdd-accent-color: #8ab4f8;
|
|
1290
|
+
--rdd-accent-glow: rgba(138, 180, 248, 0.15);
|
|
1291
|
+
--rdd-border-panel: #3c4043;
|
|
1292
|
+
--rdd-bg-tab-inactive: #202124;
|
|
1293
|
+
--rdd-text-tab-inactive: #9aa0a6;
|
|
1294
|
+
--rdd-text-tab-active: #ffffff;
|
|
1295
|
+
--rdd-panel-card-bg: #202124;
|
|
1296
|
+
--rdd-panel-card-border: #3c4043;
|
|
1297
|
+
--rdd-window-text: #ffffff;
|
|
1298
|
+
--rdd-panel-text: #e8eaed;
|
|
1291
1299
|
--tab-icon-active: #8ab4f8;
|
|
1292
1300
|
--toolbar-btn-radio-active-bg: rgba(138, 180, 248, 0.14);
|
|
1293
1301
|
--toolbar-btn-toggle-active-bg: rgba(138, 180, 248, 0.08);
|
|
1294
1302
|
}
|
|
1295
1303
|
|
|
1296
1304
|
[data-workspace-skin="chrome"][data-color-scheme="light"] {
|
|
1297
|
-
--bg-workspace: #dee1e6;
|
|
1298
|
-
--bg-panel: #ffffff;
|
|
1299
|
-
--bg-tab-bar: #dee1e6;
|
|
1300
|
-
--window-bg: rgba(255, 255, 255, var(--window-opacity, 1.0));
|
|
1301
|
-
--window-border: #cbd5e1;
|
|
1302
|
-
--window-header-bg: #dee1e6;
|
|
1303
|
-
--accent-color: #1a73e8;
|
|
1304
|
-
--accent-glow: rgba(26, 115, 232, 0.15);
|
|
1305
|
-
--border-panel: #dadce0;
|
|
1306
|
-
--bg-tab-inactive: #dee1e6;
|
|
1307
|
-
--text-tab-inactive: #474747;
|
|
1308
|
-
--text-tab-active: #1f1f1f;
|
|
1309
|
-
--panel-card-bg: #f1f3f4;
|
|
1310
|
-
--panel-card-border: #dadce0;
|
|
1311
|
-
--window-text: #1f1f1f;
|
|
1312
|
-
--panel-text: #1f1f1f;
|
|
1313
|
-
--panel-title-color: #1a73e8;
|
|
1314
|
-
--close-btn-color: #474747;
|
|
1315
|
-
--close-btn-active-color: #1f1f1f;
|
|
1305
|
+
--rdd-bg-workspace: #dee1e6;
|
|
1306
|
+
--rdd-bg-panel: #ffffff;
|
|
1307
|
+
--rdd-bg-tab-bar: #dee1e6;
|
|
1308
|
+
--rdd-window-bg: rgba(255, 255, 255, var(--rdd-window-opacity, 1.0));
|
|
1309
|
+
--rdd-window-border: #cbd5e1;
|
|
1310
|
+
--rdd-window-header-bg: #dee1e6;
|
|
1311
|
+
--rdd-accent-color: #1a73e8;
|
|
1312
|
+
--rdd-accent-glow: rgba(26, 115, 232, 0.15);
|
|
1313
|
+
--rdd-border-panel: #dadce0;
|
|
1314
|
+
--rdd-bg-tab-inactive: #dee1e6;
|
|
1315
|
+
--rdd-text-tab-inactive: #474747;
|
|
1316
|
+
--rdd-text-tab-active: #1f1f1f;
|
|
1317
|
+
--rdd-panel-card-bg: #f1f3f4;
|
|
1318
|
+
--rdd-panel-card-border: #dadce0;
|
|
1319
|
+
--rdd-window-text: #1f1f1f;
|
|
1320
|
+
--rdd-panel-text: #1f1f1f;
|
|
1321
|
+
--rdd-panel-title-color: #1a73e8;
|
|
1322
|
+
--rdd-close-btn-color: #474747;
|
|
1323
|
+
--rdd-close-btn-active-color: #1f1f1f;
|
|
1316
1324
|
--tab-icon-active: #1a73e8;
|
|
1317
1325
|
--toolbar-btn-radio-active-bg: rgba(26, 115, 232, 0.12);
|
|
1318
1326
|
--toolbar-btn-toggle-active-bg: rgba(26, 115, 232, 0.07);
|
|
1319
1327
|
}
|
|
1320
1328
|
|
|
1321
1329
|
/* Chrome tab angled geometry shapes */
|
|
1322
|
-
[data-workspace-skin="chrome"] .workspace-tab {
|
|
1330
|
+
[data-workspace-skin="chrome"] .rdd-workspace-tab {
|
|
1323
1331
|
clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 100%, 0% 100%);
|
|
1324
1332
|
padding: 0 18px !important;
|
|
1325
1333
|
margin-right: -4px !important;
|
|
1326
1334
|
border-right: none !important;
|
|
1327
1335
|
}
|
|
1328
|
-
[data-workspace-skin="chrome"] .workspace-tab.active {
|
|
1336
|
+
[data-workspace-skin="chrome"] .rdd-workspace-tab.rdd-active {
|
|
1329
1337
|
z-index: 5;
|
|
1330
1338
|
}
|
|
1331
|
-
[data-workspace-skin="chrome"] .workspace-tab.active::before {
|
|
1339
|
+
[data-workspace-skin="chrome"] .rdd-workspace-tab.rdd-active::before {
|
|
1332
1340
|
display: none !important;
|
|
1333
1341
|
}
|
|
1334
1342
|
|
|
@@ -1336,50 +1344,50 @@ body.resizing-col-active * {
|
|
|
1336
1344
|
SKIN 4: Fluent Slate Preset
|
|
1337
1345
|
-------------------------------------------------------------------------- */
|
|
1338
1346
|
[data-workspace-skin="slate"] {
|
|
1339
|
-
--bg-workspace: #0f172a;
|
|
1340
|
-
--bg-panel: #1e293b;
|
|
1341
|
-
--bg-tab-bar: #0f172a;
|
|
1342
|
-
--window-bg: rgba(30, 41, 59, var(--window-opacity, 1.0));
|
|
1343
|
-
--window-border: #334155;
|
|
1344
|
-
--window-header-bg: #1e293b;
|
|
1345
|
-
--accent-color: #38bdf8;
|
|
1346
|
-
--accent-glow: rgba(56, 189, 248, 0.15);
|
|
1347
|
-
--border-panel: #334155;
|
|
1348
|
-
--bg-tab-inactive: #1e293b;
|
|
1349
|
-
--text-tab-inactive: #64748b;
|
|
1350
|
-
--text-tab-active: #f8fafc;
|
|
1351
|
-
--panel-card-bg: #0f172a;
|
|
1352
|
-
--panel-card-border: #334155;
|
|
1353
|
-
--window-text: #f8fafc;
|
|
1354
|
-
--panel-text: #f8fafc;
|
|
1347
|
+
--rdd-bg-workspace: #0f172a;
|
|
1348
|
+
--rdd-bg-panel: #1e293b;
|
|
1349
|
+
--rdd-bg-tab-bar: #0f172a;
|
|
1350
|
+
--rdd-window-bg: rgba(30, 41, 59, var(--rdd-window-opacity, 1.0));
|
|
1351
|
+
--rdd-window-border: #334155;
|
|
1352
|
+
--rdd-window-header-bg: #1e293b;
|
|
1353
|
+
--rdd-accent-color: #38bdf8;
|
|
1354
|
+
--rdd-accent-glow: rgba(56, 189, 248, 0.15);
|
|
1355
|
+
--rdd-border-panel: #334155;
|
|
1356
|
+
--rdd-bg-tab-inactive: #1e293b;
|
|
1357
|
+
--rdd-text-tab-inactive: #64748b;
|
|
1358
|
+
--rdd-text-tab-active: #f8fafc;
|
|
1359
|
+
--rdd-panel-card-bg: #0f172a;
|
|
1360
|
+
--rdd-panel-card-border: #334155;
|
|
1361
|
+
--rdd-window-text: #f8fafc;
|
|
1362
|
+
--rdd-panel-text: #f8fafc;
|
|
1355
1363
|
}
|
|
1356
1364
|
|
|
1357
1365
|
[data-workspace-skin="slate"][data-color-scheme="light"] {
|
|
1358
|
-
--bg-workspace: #f1f5f9;
|
|
1359
|
-
--bg-panel: #ffffff;
|
|
1360
|
-
--bg-tab-bar: #f1f5f9;
|
|
1361
|
-
--window-bg: rgba(255, 255, 255, var(--window-opacity, 1.0));
|
|
1362
|
-
--window-border: #cbd5e1;
|
|
1363
|
-
--window-header-bg: #f8fafc;
|
|
1364
|
-
--accent-color: #0078d4;
|
|
1365
|
-
--accent-glow: rgba(0, 120, 212, 0.15);
|
|
1366
|
-
--border-panel: #e2e8f0;
|
|
1367
|
-
--bg-tab-inactive: #f8fafc;
|
|
1368
|
-
--text-tab-inactive: #475569;
|
|
1369
|
-
--text-tab-active: #0f172a;
|
|
1370
|
-
--panel-card-bg: #f8fafc;
|
|
1371
|
-
--panel-card-border: #cbd5e1;
|
|
1372
|
-
--window-text: #0f172a;
|
|
1373
|
-
--panel-text: #0f172a;
|
|
1374
|
-
--panel-title-color: #0078d4;
|
|
1375
|
-
--close-btn-color: #475569;
|
|
1376
|
-
--close-btn-active-color: #0f172a;
|
|
1366
|
+
--rdd-bg-workspace: #f1f5f9;
|
|
1367
|
+
--rdd-bg-panel: #ffffff;
|
|
1368
|
+
--rdd-bg-tab-bar: #f1f5f9;
|
|
1369
|
+
--rdd-window-bg: rgba(255, 255, 255, var(--rdd-window-opacity, 1.0));
|
|
1370
|
+
--rdd-window-border: #cbd5e1;
|
|
1371
|
+
--rdd-window-header-bg: #f8fafc;
|
|
1372
|
+
--rdd-accent-color: #0078d4;
|
|
1373
|
+
--rdd-accent-glow: rgba(0, 120, 212, 0.15);
|
|
1374
|
+
--rdd-border-panel: #e2e8f0;
|
|
1375
|
+
--rdd-bg-tab-inactive: #f8fafc;
|
|
1376
|
+
--rdd-text-tab-inactive: #475569;
|
|
1377
|
+
--rdd-text-tab-active: #0f172a;
|
|
1378
|
+
--rdd-panel-card-bg: #f8fafc;
|
|
1379
|
+
--rdd-panel-card-border: #cbd5e1;
|
|
1380
|
+
--rdd-window-text: #0f172a;
|
|
1381
|
+
--rdd-panel-text: #0f172a;
|
|
1382
|
+
--rdd-panel-title-color: #0078d4;
|
|
1383
|
+
--rdd-close-btn-color: #475569;
|
|
1384
|
+
--rdd-close-btn-active-color: #0f172a;
|
|
1377
1385
|
--tab-icon-active: #0078d4;
|
|
1378
1386
|
--toolbar-btn-radio-active-bg: rgba(0, 120, 212, 0.10);
|
|
1379
1387
|
--toolbar-btn-toggle-active-bg: rgba(0, 120, 212, 0.06);
|
|
1380
1388
|
}
|
|
1381
1389
|
|
|
1382
|
-
[data-workspace-skin="slate"] .workspace-tab.active::before {
|
|
1390
|
+
[data-workspace-skin="slate"] .rdd-workspace-tab.rdd-active::before {
|
|
1383
1391
|
top: auto !important;
|
|
1384
1392
|
bottom: 0 !important;
|
|
1385
1393
|
height: 3px !important;
|
|
@@ -1389,53 +1397,53 @@ body.resizing-col-active * {
|
|
|
1389
1397
|
SKIN 5: Nordic Frost Preset (Nord Theme)
|
|
1390
1398
|
-------------------------------------------------------------------------- */
|
|
1391
1399
|
[data-workspace-skin="nord"] {
|
|
1392
|
-
--bg-workspace: #2e3440;
|
|
1393
|
-
--bg-panel: #3b4252;
|
|
1394
|
-
--bg-tab-bar: #2e3440;
|
|
1395
|
-
--window-bg: rgba(59, 66, 82, var(--window-opacity, 1.0));
|
|
1396
|
-
--window-border: #434c5e;
|
|
1397
|
-
--window-header-bg: #2e3440;
|
|
1398
|
-
--accent-color: #88c0d0;
|
|
1399
|
-
--accent-glow: rgba(136, 192, 208, 0.2);
|
|
1400
|
-
--border-panel: #434c5e;
|
|
1401
|
-
--bg-tab-inactive: #2e3440;
|
|
1402
|
-
--text-tab-inactive: #d8dee9;
|
|
1403
|
-
--text-tab-active: #eceff4;
|
|
1404
|
-
--panel-card-bg: #2e3440;
|
|
1405
|
-
--panel-card-border: #4c566a;
|
|
1406
|
-
--close-btn-color: #d8dee9;
|
|
1407
|
-
--close-btn-active-color: #88c0d0;
|
|
1408
|
-
--scrollbar-thumb: rgba(136, 192, 208, 0.25);
|
|
1409
|
-
--scrollbar-thumb-hover: rgba(136, 192, 208, 0.4);
|
|
1410
|
-
--window-text: #eceff4;
|
|
1411
|
-
--panel-text: #eceff4;
|
|
1400
|
+
--rdd-bg-workspace: #2e3440;
|
|
1401
|
+
--rdd-bg-panel: #3b4252;
|
|
1402
|
+
--rdd-bg-tab-bar: #2e3440;
|
|
1403
|
+
--rdd-window-bg: rgba(59, 66, 82, var(--rdd-window-opacity, 1.0));
|
|
1404
|
+
--rdd-window-border: #434c5e;
|
|
1405
|
+
--rdd-window-header-bg: #2e3440;
|
|
1406
|
+
--rdd-accent-color: #88c0d0;
|
|
1407
|
+
--rdd-accent-glow: rgba(136, 192, 208, 0.2);
|
|
1408
|
+
--rdd-border-panel: #434c5e;
|
|
1409
|
+
--rdd-bg-tab-inactive: #2e3440;
|
|
1410
|
+
--rdd-text-tab-inactive: #d8dee9;
|
|
1411
|
+
--rdd-text-tab-active: #eceff4;
|
|
1412
|
+
--rdd-panel-card-bg: #2e3440;
|
|
1413
|
+
--rdd-panel-card-border: #4c566a;
|
|
1414
|
+
--rdd-close-btn-color: #d8dee9;
|
|
1415
|
+
--rdd-close-btn-active-color: #88c0d0;
|
|
1416
|
+
--rdd-scrollbar-thumb: rgba(136, 192, 208, 0.25);
|
|
1417
|
+
--rdd-scrollbar-thumb-hover: rgba(136, 192, 208, 0.4);
|
|
1418
|
+
--rdd-window-text: #eceff4;
|
|
1419
|
+
--rdd-panel-text: #eceff4;
|
|
1412
1420
|
--tab-icon-active: #88c0d0;
|
|
1413
1421
|
--toolbar-btn-radio-active-bg: rgba(136, 192, 208, 0.14);
|
|
1414
1422
|
--toolbar-btn-toggle-active-bg: rgba(136, 192, 208, 0.08);
|
|
1415
1423
|
}
|
|
1416
1424
|
|
|
1417
1425
|
[data-workspace-skin="nord"][data-color-scheme="light"] {
|
|
1418
|
-
--bg-workspace: #e5e9f0;
|
|
1419
|
-
--bg-panel: #eceff4;
|
|
1420
|
-
--bg-tab-bar: #e5e9f0;
|
|
1421
|
-
--window-bg: rgba(236, 239, 244, var(--window-opacity, 1.0));
|
|
1422
|
-
--window-border: #d8dee9;
|
|
1423
|
-
--window-header-bg: #e5e9f0;
|
|
1424
|
-
--accent-color: #5e81ac;
|
|
1425
|
-
--accent-glow: rgba(94, 129, 172, 0.15);
|
|
1426
|
-
--border-panel: #d8dee9;
|
|
1427
|
-
--bg-tab-inactive: #e5e9f0;
|
|
1428
|
-
--text-tab-inactive: #4c566a;
|
|
1429
|
-
--text-tab-active: #2e3440;
|
|
1430
|
-
--panel-card-bg: #e5e9f0;
|
|
1431
|
-
--panel-card-border: #d8dee9;
|
|
1432
|
-
--close-btn-color: #4c566a;
|
|
1433
|
-
--close-btn-active-color: #5e81ac;
|
|
1434
|
-
--scrollbar-thumb: rgba(94, 129, 172, 0.2);
|
|
1435
|
-
--scrollbar-thumb-hover: rgba(94, 129, 172, 0.35);
|
|
1436
|
-
--window-text: #2e3440;
|
|
1437
|
-
--panel-text: #2e3440;
|
|
1438
|
-
--panel-title-color: #5e81ac;
|
|
1426
|
+
--rdd-bg-workspace: #e5e9f0;
|
|
1427
|
+
--rdd-bg-panel: #eceff4;
|
|
1428
|
+
--rdd-bg-tab-bar: #e5e9f0;
|
|
1429
|
+
--rdd-window-bg: rgba(236, 239, 244, var(--rdd-window-opacity, 1.0));
|
|
1430
|
+
--rdd-window-border: #d8dee9;
|
|
1431
|
+
--rdd-window-header-bg: #e5e9f0;
|
|
1432
|
+
--rdd-accent-color: #5e81ac;
|
|
1433
|
+
--rdd-accent-glow: rgba(94, 129, 172, 0.15);
|
|
1434
|
+
--rdd-border-panel: #d8dee9;
|
|
1435
|
+
--rdd-bg-tab-inactive: #e5e9f0;
|
|
1436
|
+
--rdd-text-tab-inactive: #4c566a;
|
|
1437
|
+
--rdd-text-tab-active: #2e3440;
|
|
1438
|
+
--rdd-panel-card-bg: #e5e9f0;
|
|
1439
|
+
--rdd-panel-card-border: #d8dee9;
|
|
1440
|
+
--rdd-close-btn-color: #4c566a;
|
|
1441
|
+
--rdd-close-btn-active-color: #5e81ac;
|
|
1442
|
+
--rdd-scrollbar-thumb: rgba(94, 129, 172, 0.2);
|
|
1443
|
+
--rdd-scrollbar-thumb-hover: rgba(94, 129, 172, 0.35);
|
|
1444
|
+
--rdd-window-text: #2e3440;
|
|
1445
|
+
--rdd-panel-text: #2e3440;
|
|
1446
|
+
--rdd-panel-title-color: #5e81ac;
|
|
1439
1447
|
--tab-icon-active: #5e81ac;
|
|
1440
1448
|
--toolbar-btn-radio-active-bg: rgba(94, 129, 172, 0.12);
|
|
1441
1449
|
--toolbar-btn-toggle-active-bg: rgba(94, 129, 172, 0.07);
|
|
@@ -1445,72 +1453,72 @@ body.resizing-col-active * {
|
|
|
1445
1453
|
SKIN 6: Midnight Obsidian Preset (Vercel Style)
|
|
1446
1454
|
-------------------------------------------------------------------------- */
|
|
1447
1455
|
[data-workspace-skin="obsidian"] {
|
|
1448
|
-
--bg-workspace: #000000;
|
|
1449
|
-
--bg-panel: #0a0a0a;
|
|
1450
|
-
--bg-tab-bar: #000000;
|
|
1451
|
-
--window-bg: rgba(10, 10, 10, var(--window-opacity, 1.0));
|
|
1452
|
-
--window-border: #1a1a1a;
|
|
1453
|
-
--window-border-focused: #333333;
|
|
1454
|
-
--window-header-bg: #000000;
|
|
1455
|
-
--accent-color: #ffffff;
|
|
1456
|
-
--accent-glow: rgba(255, 255, 255, 0.08);
|
|
1457
|
-
--border-panel: #1a1a1a;
|
|
1458
|
-
--bg-tab-inactive: #000000;
|
|
1459
|
-
--text-tab-inactive: #737373;
|
|
1460
|
-
--text-tab-active: #ffffff;
|
|
1461
|
-
--panel-card-bg: #030303;
|
|
1462
|
-
--panel-card-border: #1a1a1a;
|
|
1463
|
-
--close-btn-color: #737373;
|
|
1464
|
-
--close-btn-active-color: #ffffff;
|
|
1465
|
-
--scrollbar-thumb: rgba(255, 255, 255, 0.15);
|
|
1466
|
-
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
|
|
1467
|
-
--window-text: #ffffff;
|
|
1468
|
-
--panel-text: #ffffff;
|
|
1456
|
+
--rdd-bg-workspace: #000000;
|
|
1457
|
+
--rdd-bg-panel: #0a0a0a;
|
|
1458
|
+
--rdd-bg-tab-bar: #000000;
|
|
1459
|
+
--rdd-window-bg: rgba(10, 10, 10, var(--rdd-window-opacity, 1.0));
|
|
1460
|
+
--rdd-window-border: #1a1a1a;
|
|
1461
|
+
--rdd-window-border-focused: #333333;
|
|
1462
|
+
--rdd-window-header-bg: #000000;
|
|
1463
|
+
--rdd-accent-color: #ffffff;
|
|
1464
|
+
--rdd-accent-glow: rgba(255, 255, 255, 0.08);
|
|
1465
|
+
--rdd-border-panel: #1a1a1a;
|
|
1466
|
+
--rdd-bg-tab-inactive: #000000;
|
|
1467
|
+
--rdd-text-tab-inactive: #737373;
|
|
1468
|
+
--rdd-text-tab-active: #ffffff;
|
|
1469
|
+
--rdd-panel-card-bg: #030303;
|
|
1470
|
+
--rdd-panel-card-border: #1a1a1a;
|
|
1471
|
+
--rdd-close-btn-color: #737373;
|
|
1472
|
+
--rdd-close-btn-active-color: #ffffff;
|
|
1473
|
+
--rdd-scrollbar-thumb: rgba(255, 255, 255, 0.15);
|
|
1474
|
+
--rdd-scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
|
|
1475
|
+
--rdd-window-text: #ffffff;
|
|
1476
|
+
--rdd-panel-text: #ffffff;
|
|
1469
1477
|
--tab-icon-active: #ffffff;
|
|
1470
1478
|
--toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.10);
|
|
1471
1479
|
--toolbar-btn-toggle-active-bg: rgba(255, 255, 255, 0.06);
|
|
1472
1480
|
}
|
|
1473
1481
|
|
|
1474
1482
|
[data-workspace-skin="obsidian"][data-color-scheme="light"] {
|
|
1475
|
-
--bg-workspace: #ffffff;
|
|
1476
|
-
--bg-panel: #fafafa;
|
|
1477
|
-
--bg-tab-bar: #ffffff;
|
|
1478
|
-
--window-bg: rgba(250, 250, 250, var(--window-opacity, 1.0));
|
|
1479
|
-
--window-border: #e5e5e5;
|
|
1480
|
-
--window-border-focused: #a3a3a3;
|
|
1481
|
-
--window-header-bg: #ffffff;
|
|
1482
|
-
--accent-color: #000000;
|
|
1483
|
-
--accent-glow: rgba(0, 0, 0, 0.05);
|
|
1484
|
-
--border-panel: #eaeaea;
|
|
1485
|
-
--bg-tab-inactive: #ffffff;
|
|
1486
|
-
--text-tab-inactive: #737373;
|
|
1487
|
-
--text-tab-active: #000000;
|
|
1488
|
-
--panel-card-bg: #ffffff;
|
|
1489
|
-
--panel-card-border: #e5e5e5;
|
|
1490
|
-
--close-btn-color: #737373;
|
|
1491
|
-
--close-btn-active-color: #000000;
|
|
1492
|
-
--scrollbar-thumb: rgba(0, 0, 0, 0.1);
|
|
1493
|
-
--scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
|
|
1494
|
-
--window-text: #000000;
|
|
1495
|
-
--panel-text: #000000;
|
|
1496
|
-
--panel-title-color: #000000;
|
|
1483
|
+
--rdd-bg-workspace: #ffffff;
|
|
1484
|
+
--rdd-bg-panel: #fafafa;
|
|
1485
|
+
--rdd-bg-tab-bar: #ffffff;
|
|
1486
|
+
--rdd-window-bg: rgba(250, 250, 250, var(--rdd-window-opacity, 1.0));
|
|
1487
|
+
--rdd-window-border: #e5e5e5;
|
|
1488
|
+
--rdd-window-border-focused: #a3a3a3;
|
|
1489
|
+
--rdd-window-header-bg: #ffffff;
|
|
1490
|
+
--rdd-accent-color: #000000;
|
|
1491
|
+
--rdd-accent-glow: rgba(0, 0, 0, 0.05);
|
|
1492
|
+
--rdd-border-panel: #eaeaea;
|
|
1493
|
+
--rdd-bg-tab-inactive: #ffffff;
|
|
1494
|
+
--rdd-text-tab-inactive: #737373;
|
|
1495
|
+
--rdd-text-tab-active: #000000;
|
|
1496
|
+
--rdd-panel-card-bg: #ffffff;
|
|
1497
|
+
--rdd-panel-card-border: #e5e5e5;
|
|
1498
|
+
--rdd-close-btn-color: #737373;
|
|
1499
|
+
--rdd-close-btn-active-color: #000000;
|
|
1500
|
+
--rdd-scrollbar-thumb: rgba(0, 0, 0, 0.1);
|
|
1501
|
+
--rdd-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
|
|
1502
|
+
--rdd-window-text: #000000;
|
|
1503
|
+
--rdd-panel-text: #000000;
|
|
1504
|
+
--rdd-panel-title-color: #000000;
|
|
1497
1505
|
--tab-icon-active: #000000;
|
|
1498
1506
|
--toolbar-btn-radio-active-bg: rgba(0, 0, 0, 0.10);
|
|
1499
1507
|
--toolbar-btn-toggle-active-bg: rgba(0, 0, 0, 0.06);
|
|
1500
1508
|
}
|
|
1501
1509
|
|
|
1502
1510
|
/* Obsidian custom borderless panel elevations */
|
|
1503
|
-
[data-workspace-skin="obsidian"] .floating-window {
|
|
1511
|
+
[data-workspace-skin="obsidian"] .rdd-floating-window {
|
|
1504
1512
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.2) !important;
|
|
1505
1513
|
border-radius: 6px;
|
|
1506
1514
|
}
|
|
1507
|
-
[data-workspace-skin="obsidian"] .floating-window.
|
|
1515
|
+
[data-workspace-skin="obsidian"] .rdd-floating-window.rdd-window-focused {
|
|
1508
1516
|
box-shadow: 0 24px 50px rgba(255, 255, 255, 0.06), 0 0 1px rgba(255, 255, 255, 0.4) !important;
|
|
1509
1517
|
}
|
|
1510
|
-
[data-workspace-skin="obsidian"][data-color-scheme="light"] .floating-window {
|
|
1518
|
+
[data-workspace-skin="obsidian"][data-color-scheme="light"] .rdd-floating-window {
|
|
1511
1519
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1) !important;
|
|
1512
1520
|
}
|
|
1513
|
-
[data-workspace-skin="obsidian"][data-color-scheme="light"] .floating-window.
|
|
1521
|
+
[data-workspace-skin="obsidian"][data-color-scheme="light"] .rdd-floating-window.rdd-window-focused {
|
|
1514
1522
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 0 1px rgba(0, 0, 0, 0.2) !important;
|
|
1515
1523
|
}
|
|
1516
1524
|
|
|
@@ -1518,55 +1526,55 @@ body.resizing-col-active * {
|
|
|
1518
1526
|
SKIN 7: Tokyo Night Preset
|
|
1519
1527
|
-------------------------------------------------------------------------- */
|
|
1520
1528
|
[data-workspace-skin="tokyo"] {
|
|
1521
|
-
--bg-workspace: #1a1b26;
|
|
1522
|
-
--bg-panel: #24283c;
|
|
1523
|
-
--bg-tab-bar: #1f2335;
|
|
1524
|
-
--window-bg: rgba(36, 40, 60, var(--window-opacity, 1.0));
|
|
1525
|
-
--window-border: #383e5a;
|
|
1526
|
-
--window-border-focused: #7aa2f7;
|
|
1527
|
-
--window-header-bg: #1f2335;
|
|
1528
|
-
--accent-color: #bb9af7;
|
|
1529
|
-
--accent-glow: rgba(187, 154, 247, 0.25);
|
|
1530
|
-
--border-panel: #383e5a;
|
|
1531
|
-
--bg-tab-inactive: #1f2335;
|
|
1532
|
-
--text-tab-inactive: #787c99;
|
|
1533
|
-
--text-tab-active: #c0caf5;
|
|
1534
|
-
--panel-card-bg: #1a1b26;
|
|
1535
|
-
--panel-card-border: #383e5a;
|
|
1536
|
-
--close-btn-color: #787c99;
|
|
1537
|
-
--close-btn-active-color: #7aa2f7;
|
|
1538
|
-
--scrollbar-thumb: rgba(122, 162, 247, 0.25);
|
|
1539
|
-
--scrollbar-thumb-hover: rgba(187, 154, 247, 0.4);
|
|
1540
|
-
--window-text: #c0caf5;
|
|
1541
|
-
--panel-text: #c0caf5;
|
|
1529
|
+
--rdd-bg-workspace: #1a1b26;
|
|
1530
|
+
--rdd-bg-panel: #24283c;
|
|
1531
|
+
--rdd-bg-tab-bar: #1f2335;
|
|
1532
|
+
--rdd-window-bg: rgba(36, 40, 60, var(--rdd-window-opacity, 1.0));
|
|
1533
|
+
--rdd-window-border: #383e5a;
|
|
1534
|
+
--rdd-window-border-focused: #7aa2f7;
|
|
1535
|
+
--rdd-window-header-bg: #1f2335;
|
|
1536
|
+
--rdd-accent-color: #bb9af7;
|
|
1537
|
+
--rdd-accent-glow: rgba(187, 154, 247, 0.25);
|
|
1538
|
+
--rdd-border-panel: #383e5a;
|
|
1539
|
+
--rdd-bg-tab-inactive: #1f2335;
|
|
1540
|
+
--rdd-text-tab-inactive: #787c99;
|
|
1541
|
+
--rdd-text-tab-active: #c0caf5;
|
|
1542
|
+
--rdd-panel-card-bg: #1a1b26;
|
|
1543
|
+
--rdd-panel-card-border: #383e5a;
|
|
1544
|
+
--rdd-close-btn-color: #787c99;
|
|
1545
|
+
--rdd-close-btn-active-color: #7aa2f7;
|
|
1546
|
+
--rdd-scrollbar-thumb: rgba(122, 162, 247, 0.25);
|
|
1547
|
+
--rdd-scrollbar-thumb-hover: rgba(187, 154, 247, 0.4);
|
|
1548
|
+
--rdd-window-text: #c0caf5;
|
|
1549
|
+
--rdd-panel-text: #c0caf5;
|
|
1542
1550
|
--tab-icon-active: #7aa2f7;
|
|
1543
1551
|
--toolbar-btn-radio-active-bg: rgba(122, 162, 247, 0.14);
|
|
1544
1552
|
--toolbar-btn-toggle-active-bg: rgba(122, 162, 247, 0.08);
|
|
1545
1553
|
}
|
|
1546
1554
|
|
|
1547
1555
|
[data-workspace-skin="tokyo"][data-color-scheme="light"] {
|
|
1548
|
-
--bg-workspace: #e1e2e7;
|
|
1549
|
-
--bg-panel: #f2f4f8;
|
|
1550
|
-
--bg-tab-bar: #d5d6db;
|
|
1551
|
-
--window-bg: rgba(242, 244, 248, var(--window-opacity, 1.0));
|
|
1552
|
-
--window-border: #b4b5b9;
|
|
1553
|
-
--window-border-focused: #385af6;
|
|
1554
|
-
--window-header-bg: #d5d6db;
|
|
1555
|
-
--accent-color: #9854f1;
|
|
1556
|
-
--accent-glow: rgba(152, 84, 241, 0.15);
|
|
1557
|
-
--border-panel: #b4b5b9;
|
|
1558
|
-
--bg-tab-inactive: #d5d6db;
|
|
1559
|
-
--text-tab-inactive: #565a6e;
|
|
1560
|
-
--text-tab-active: #383e56;
|
|
1561
|
-
--panel-card-bg: #e1e2e7;
|
|
1562
|
-
--panel-card-border: #b4b5b9;
|
|
1563
|
-
--close-btn-color: #565a6e;
|
|
1564
|
-
--close-btn-active-color: #385af6;
|
|
1565
|
-
--scrollbar-thumb: rgba(56, 90, 246, 0.2);
|
|
1566
|
-
--scrollbar-thumb-hover: rgba(152, 84, 241, 0.35);
|
|
1567
|
-
--window-text: #383e56;
|
|
1568
|
-
--panel-text: #383e56;
|
|
1569
|
-
--panel-title-color: #9854f1;
|
|
1556
|
+
--rdd-bg-workspace: #e1e2e7;
|
|
1557
|
+
--rdd-bg-panel: #f2f4f8;
|
|
1558
|
+
--rdd-bg-tab-bar: #d5d6db;
|
|
1559
|
+
--rdd-window-bg: rgba(242, 244, 248, var(--rdd-window-opacity, 1.0));
|
|
1560
|
+
--rdd-window-border: #b4b5b9;
|
|
1561
|
+
--rdd-window-border-focused: #385af6;
|
|
1562
|
+
--rdd-window-header-bg: #d5d6db;
|
|
1563
|
+
--rdd-accent-color: #9854f1;
|
|
1564
|
+
--rdd-accent-glow: rgba(152, 84, 241, 0.15);
|
|
1565
|
+
--rdd-border-panel: #b4b5b9;
|
|
1566
|
+
--rdd-bg-tab-inactive: #d5d6db;
|
|
1567
|
+
--rdd-text-tab-inactive: #565a6e;
|
|
1568
|
+
--rdd-text-tab-active: #383e56;
|
|
1569
|
+
--rdd-panel-card-bg: #e1e2e7;
|
|
1570
|
+
--rdd-panel-card-border: #b4b5b9;
|
|
1571
|
+
--rdd-close-btn-color: #565a6e;
|
|
1572
|
+
--rdd-close-btn-active-color: #385af6;
|
|
1573
|
+
--rdd-scrollbar-thumb: rgba(56, 90, 246, 0.2);
|
|
1574
|
+
--rdd-scrollbar-thumb-hover: rgba(152, 84, 241, 0.35);
|
|
1575
|
+
--rdd-window-text: #383e56;
|
|
1576
|
+
--rdd-panel-text: #383e56;
|
|
1577
|
+
--rdd-panel-title-color: #9854f1;
|
|
1570
1578
|
--tab-icon-active: #385af6;
|
|
1571
1579
|
--toolbar-btn-radio-active-bg: rgba(56, 90, 246, 0.12);
|
|
1572
1580
|
--toolbar-btn-toggle-active-bg: rgba(56, 90, 246, 0.07);
|
|
@@ -1585,7 +1593,7 @@ body.resizing-col-active * {
|
|
|
1585
1593
|
--toolbar-btn-radio-active-bg: transparent;
|
|
1586
1594
|
--toolbar-accent-bar-width: 2px;
|
|
1587
1595
|
}
|
|
1588
|
-
[data-workspace-skin="vscode"] .sidebar-tab-btn.active {
|
|
1596
|
+
[data-workspace-skin="vscode"] .rdd-sidebar-tab-btn.rdd-active {
|
|
1589
1597
|
border-top: 1px solid transparent !important;
|
|
1590
1598
|
border-bottom: 1px solid transparent !important;
|
|
1591
1599
|
}
|
|
@@ -1598,11 +1606,11 @@ body.resizing-col-active * {
|
|
|
1598
1606
|
--tab-accent-bar-width: 0px;
|
|
1599
1607
|
--toolbar-accent-bar-width: 2px;
|
|
1600
1608
|
}
|
|
1601
|
-
[data-workspace-skin="chrome"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
1609
|
+
[data-workspace-skin="chrome"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
|
|
1602
1610
|
border-radius: 0 10px 10px 0 !important;
|
|
1603
1611
|
border-left: none !important;
|
|
1604
1612
|
}
|
|
1605
|
-
[data-workspace-skin="chrome"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
1613
|
+
[data-workspace-skin="chrome"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
|
|
1606
1614
|
border-radius: 10px 0 0 10px !important;
|
|
1607
1615
|
border-right: none !important;
|
|
1608
1616
|
border-top: 1px solid var(--sidebar-border) !important;
|
|
@@ -1620,13 +1628,13 @@ body.resizing-col-active * {
|
|
|
1620
1628
|
--toolbar-btn-radio-active-bg: rgba(96, 165, 250, 0.14);
|
|
1621
1629
|
--toolbar-accent-bar-width: 0px;
|
|
1622
1630
|
}
|
|
1623
|
-
[data-workspace-skin="slate"] .sidebar-tab-btn.active {
|
|
1631
|
+
[data-workspace-skin="slate"] .rdd-sidebar-tab-btn.rdd-active {
|
|
1624
1632
|
border-top: 1px solid transparent !important;
|
|
1625
1633
|
border-bottom: 1px solid transparent !important;
|
|
1626
1634
|
margin: 0 !important;
|
|
1627
1635
|
}
|
|
1628
|
-
[data-workspace-skin="slate"] .toolbar-strip .toolbar-btn-radio.active,
|
|
1629
|
-
[data-workspace-skin="slate"] .toolbar-strip .toolbar-btn-group.active {
|
|
1636
|
+
[data-workspace-skin="slate"] .rdd-toolbar-strip .rdd-toolbar-btn-radio.rdd-active,
|
|
1637
|
+
[data-workspace-skin="slate"] .rdd-toolbar-strip .rdd-toolbar-btn-group.rdd-active {
|
|
1630
1638
|
border-radius: 8px !important;
|
|
1631
1639
|
}
|
|
1632
1640
|
[data-workspace-skin="slate"][data-color-scheme="light"] {
|
|
@@ -1645,13 +1653,13 @@ body.resizing-col-active * {
|
|
|
1645
1653
|
--toolbar-btn-radio-active-bg: transparent;
|
|
1646
1654
|
--toolbar-accent-bar-width: 0px;
|
|
1647
1655
|
}
|
|
1648
|
-
[data-workspace-skin="nord"] .sidebar-tab-btn.active {
|
|
1656
|
+
[data-workspace-skin="nord"] .rdd-sidebar-tab-btn.rdd-active {
|
|
1649
1657
|
border-top: 1px solid transparent !important;
|
|
1650
1658
|
border-bottom: 1px solid transparent !important;
|
|
1651
1659
|
border-left: none !important;
|
|
1652
1660
|
border-right: none !important;
|
|
1653
1661
|
}
|
|
1654
|
-
[data-workspace-skin="nord"] .sidebar-tab-btn.active::after {
|
|
1662
|
+
[data-workspace-skin="nord"] .rdd-sidebar-tab-btn.rdd-active::after {
|
|
1655
1663
|
content: '';
|
|
1656
1664
|
position: absolute;
|
|
1657
1665
|
bottom: 5px;
|
|
@@ -1662,19 +1670,19 @@ body.resizing-col-active * {
|
|
|
1662
1670
|
border-radius: 1px;
|
|
1663
1671
|
background-color: var(--tab-icon-active);
|
|
1664
1672
|
}
|
|
1665
|
-
[data-workspace-skin="nord"] .toolbar-strip .toolbar-btn-radio.active,
|
|
1666
|
-
[data-workspace-skin="nord"] .toolbar-strip .toolbar-btn-group.active {
|
|
1673
|
+
[data-workspace-skin="nord"] .rdd-toolbar-strip .rdd-toolbar-btn-radio.rdd-active,
|
|
1674
|
+
[data-workspace-skin="nord"] .rdd-toolbar-strip .rdd-toolbar-btn-group.rdd-active {
|
|
1667
1675
|
border-left: none !important;
|
|
1668
1676
|
border-right: none !important;
|
|
1669
1677
|
border-top: none !important;
|
|
1670
1678
|
border-bottom: none !important;
|
|
1671
1679
|
}
|
|
1672
|
-
[data-workspace-skin="nord"] .toolbar-strip.left .toolbar-btn-radio.active::after,
|
|
1673
|
-
[data-workspace-skin="nord"] .toolbar-strip.left .toolbar-btn-group.active::after,
|
|
1674
|
-
[data-workspace-skin="nord"] .toolbar-strip.right .toolbar-btn-radio.active::after,
|
|
1675
|
-
[data-workspace-skin="nord"] .toolbar-strip.right .toolbar-btn-group.active::after,
|
|
1676
|
-
[data-workspace-skin="nord"] .toolbar-strip.top .toolbar-btn-radio.active::after,
|
|
1677
|
-
[data-workspace-skin="nord"] .toolbar-strip.top .toolbar-btn-group.active::after {
|
|
1680
|
+
[data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-radio.rdd-active::after,
|
|
1681
|
+
[data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-group.rdd-active::after,
|
|
1682
|
+
[data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-radio.rdd-active::after,
|
|
1683
|
+
[data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-group.rdd-active::after,
|
|
1684
|
+
[data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-radio.rdd-active::after,
|
|
1685
|
+
[data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-group.rdd-active::after {
|
|
1678
1686
|
content: '';
|
|
1679
1687
|
position: absolute;
|
|
1680
1688
|
bottom: 4px;
|
|
@@ -1685,8 +1693,8 @@ body.resizing-col-active * {
|
|
|
1685
1693
|
border-radius: 1px;
|
|
1686
1694
|
background-color: var(--tab-icon-active);
|
|
1687
1695
|
}
|
|
1688
|
-
[data-workspace-skin="nord"] .toolbar-strip.bottom .toolbar-btn-radio.active::after,
|
|
1689
|
-
[data-workspace-skin="nord"] .toolbar-strip.bottom .toolbar-btn-group.active::after {
|
|
1696
|
+
[data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-radio.rdd-active::after,
|
|
1697
|
+
[data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-group.rdd-active::after {
|
|
1690
1698
|
content: '';
|
|
1691
1699
|
position: absolute;
|
|
1692
1700
|
top: 4px;
|
|
@@ -1711,26 +1719,26 @@ body.resizing-col-active * {
|
|
|
1711
1719
|
--toolbar-btn-active-glow: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
|
|
1712
1720
|
--toolbar-accent-bar-width: 2px;
|
|
1713
1721
|
}
|
|
1714
|
-
[data-workspace-skin="obsidian"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
1722
|
+
[data-workspace-skin="obsidian"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
|
|
1715
1723
|
box-shadow: var(--tab-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
|
|
1716
1724
|
}
|
|
1717
|
-
[data-workspace-skin="obsidian"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
1725
|
+
[data-workspace-skin="obsidian"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
|
|
1718
1726
|
box-shadow: var(--tab-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
|
|
1719
1727
|
}
|
|
1720
|
-
[data-workspace-skin="obsidian"] .toolbar-strip.left .toolbar-btn-radio.active,
|
|
1721
|
-
[data-workspace-skin="obsidian"] .toolbar-strip.left .toolbar-btn-group.active {
|
|
1728
|
+
[data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-radio.rdd-active,
|
|
1729
|
+
[data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-group.rdd-active {
|
|
1722
1730
|
box-shadow: var(--toolbar-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
|
|
1723
1731
|
}
|
|
1724
|
-
[data-workspace-skin="obsidian"] .toolbar-strip.right .toolbar-btn-radio.active,
|
|
1725
|
-
[data-workspace-skin="obsidian"] .toolbar-strip.right .toolbar-btn-group.active {
|
|
1732
|
+
[data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-radio.rdd-active,
|
|
1733
|
+
[data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-group.rdd-active {
|
|
1726
1734
|
box-shadow: var(--toolbar-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
|
|
1727
1735
|
}
|
|
1728
|
-
[data-workspace-skin="obsidian"] .toolbar-strip.top .toolbar-btn-radio.active,
|
|
1729
|
-
[data-workspace-skin="obsidian"] .toolbar-strip.top .toolbar-btn-group.active {
|
|
1736
|
+
[data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-radio.rdd-active,
|
|
1737
|
+
[data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-group.rdd-active {
|
|
1730
1738
|
box-shadow: var(--toolbar-btn-active-shadow), inset 0 -3px 8px rgba(255, 255, 255, 0.08) !important;
|
|
1731
1739
|
}
|
|
1732
|
-
[data-workspace-skin="obsidian"] .toolbar-strip.bottom .toolbar-btn-radio.active,
|
|
1733
|
-
[data-workspace-skin="obsidian"] .toolbar-strip.bottom .toolbar-btn-group.active {
|
|
1740
|
+
[data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-radio.rdd-active,
|
|
1741
|
+
[data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-group.rdd-active {
|
|
1734
1742
|
box-shadow: var(--toolbar-btn-active-shadow), inset 0 3px 8px rgba(255, 255, 255, 0.08) !important;
|
|
1735
1743
|
}
|
|
1736
1744
|
[data-workspace-skin="obsidian"][data-color-scheme="light"] {
|
|
@@ -1753,26 +1761,26 @@ body.resizing-col-active * {
|
|
|
1753
1761
|
--toolbar-btn-active-glow: drop-shadow(0 0 6px rgba(122, 162, 247, 0.65));
|
|
1754
1762
|
--toolbar-accent-bar-width: 2px;
|
|
1755
1763
|
}
|
|
1756
|
-
[data-workspace-skin="tokyo"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
1764
|
+
[data-workspace-skin="tokyo"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
|
|
1757
1765
|
box-shadow: var(--tab-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
|
|
1758
1766
|
}
|
|
1759
|
-
[data-workspace-skin="tokyo"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
1767
|
+
[data-workspace-skin="tokyo"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
|
|
1760
1768
|
box-shadow: var(--tab-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
|
|
1761
1769
|
}
|
|
1762
|
-
[data-workspace-skin="tokyo"] .toolbar-strip.left .toolbar-btn-radio.active,
|
|
1763
|
-
[data-workspace-skin="tokyo"] .toolbar-strip.left .toolbar-btn-group.active {
|
|
1770
|
+
[data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-radio.rdd-active,
|
|
1771
|
+
[data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-group.rdd-active {
|
|
1764
1772
|
box-shadow: var(--toolbar-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
|
|
1765
1773
|
}
|
|
1766
|
-
[data-workspace-skin="tokyo"] .toolbar-strip.right .toolbar-btn-radio.active,
|
|
1767
|
-
[data-workspace-skin="tokyo"] .toolbar-strip.right .toolbar-btn-group.active {
|
|
1774
|
+
[data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-radio.rdd-active,
|
|
1775
|
+
[data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-group.rdd-active {
|
|
1768
1776
|
box-shadow: var(--toolbar-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
|
|
1769
1777
|
}
|
|
1770
|
-
[data-workspace-skin="tokyo"] .toolbar-strip.top .toolbar-btn-radio.active,
|
|
1771
|
-
[data-workspace-skin="tokyo"] .toolbar-strip.top .toolbar-btn-group.active {
|
|
1778
|
+
[data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-radio.rdd-active,
|
|
1779
|
+
[data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-group.rdd-active {
|
|
1772
1780
|
box-shadow: var(--toolbar-btn-active-shadow), inset 0 -3px 12px rgba(122, 162, 247, 0.18) !important;
|
|
1773
1781
|
}
|
|
1774
|
-
[data-workspace-skin="tokyo"] .toolbar-strip.bottom .toolbar-btn-radio.active,
|
|
1775
|
-
[data-workspace-skin="tokyo"] .toolbar-strip.bottom .toolbar-btn-group.active {
|
|
1782
|
+
[data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-radio.rdd-active,
|
|
1783
|
+
[data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-group.rdd-active {
|
|
1776
1784
|
box-shadow: var(--toolbar-btn-active-shadow), inset 0 3px 12px rgba(122, 162, 247, 0.18) !important;
|
|
1777
1785
|
}
|
|
1778
1786
|
|
|
@@ -1791,13 +1799,13 @@ body.resizing-col-active * {
|
|
|
1791
1799
|
--toolbar-btn-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
|
|
1792
1800
|
--toolbar-accent-bar-width: 0px;
|
|
1793
1801
|
}
|
|
1794
|
-
[data-workspace-skin="macos"] .sidebar-tab-btn.active {
|
|
1802
|
+
[data-workspace-skin="macos"] .rdd-sidebar-tab-btn.rdd-active {
|
|
1795
1803
|
border-top: 1px solid transparent !important;
|
|
1796
1804
|
border-bottom: 1px solid transparent !important;
|
|
1797
1805
|
margin: 0 !important;
|
|
1798
1806
|
}
|
|
1799
|
-
[data-workspace-skin="macos"] .toolbar-strip .toolbar-btn-radio.active,
|
|
1800
|
-
[data-workspace-skin="macos"] .toolbar-strip .toolbar-btn-group.active {
|
|
1807
|
+
[data-workspace-skin="macos"] .rdd-toolbar-strip .rdd-toolbar-btn-radio.rdd-active,
|
|
1808
|
+
[data-workspace-skin="macos"] .rdd-toolbar-strip .rdd-toolbar-btn-group.rdd-active {
|
|
1801
1809
|
border-radius: 10px !important;
|
|
1802
1810
|
}
|
|
1803
1811
|
[data-workspace-skin="macos"][data-color-scheme="light"] {
|
|
@@ -1808,30 +1816,30 @@ body.resizing-col-active * {
|
|
|
1808
1816
|
}
|
|
1809
1817
|
|
|
1810
1818
|
/* --- Modern Sidebar and Tabs UI Theme Customizations --- */
|
|
1811
|
-
.sidebar-content-drawer {
|
|
1819
|
+
.rdd-sidebar-content-drawer {
|
|
1812
1820
|
background-color: var(--sidebar-bg) !important;
|
|
1813
1821
|
color: var(--sidebar-text-title) !important;
|
|
1814
1822
|
height: 100%;
|
|
1815
1823
|
}
|
|
1816
1824
|
|
|
1817
1825
|
/* Suppress all drawer transitions during pointer-drag resize */
|
|
1818
|
-
.sidebar-resizing .sidebar-content-drawer {
|
|
1826
|
+
.rdd-sidebar-resizing .rdd-sidebar-content-drawer {
|
|
1819
1827
|
transition: none !important;
|
|
1820
1828
|
}
|
|
1821
1829
|
|
|
1822
1830
|
/* Position-specific drawer border and shadow alignment */
|
|
1823
|
-
.sidebar-content-drawer.left {
|
|
1831
|
+
.rdd-sidebar-content-drawer.rdd-left {
|
|
1824
1832
|
border-right: 1px solid var(--sidebar-border) !important;
|
|
1825
1833
|
border-left: none !important;
|
|
1826
1834
|
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
|
|
1827
1835
|
}
|
|
1828
|
-
.sidebar-content-drawer.right {
|
|
1836
|
+
.rdd-sidebar-content-drawer.rdd-right {
|
|
1829
1837
|
border-left: 1px solid var(--sidebar-border) !important;
|
|
1830
1838
|
border-right: none !important;
|
|
1831
1839
|
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
|
|
1832
1840
|
}
|
|
1833
1841
|
|
|
1834
|
-
.sidebar-tabs-strip {
|
|
1842
|
+
.rdd-sidebar-tabs-strip {
|
|
1835
1843
|
background-color: var(--sidebar-tabs-bg) !important;
|
|
1836
1844
|
display: flex;
|
|
1837
1845
|
flex-direction: column;
|
|
@@ -1844,17 +1852,17 @@ body.resizing-col-active * {
|
|
|
1844
1852
|
}
|
|
1845
1853
|
|
|
1846
1854
|
/* Position-specific tab strip border alignment */
|
|
1847
|
-
.sidebar-tabs-strip.left {
|
|
1855
|
+
.rdd-sidebar-tabs-strip.rdd-left {
|
|
1848
1856
|
border-right: 1px solid var(--sidebar-border) !important;
|
|
1849
1857
|
border-left: none !important;
|
|
1850
1858
|
}
|
|
1851
|
-
.sidebar-tabs-strip.right {
|
|
1859
|
+
.rdd-sidebar-tabs-strip.rdd-right {
|
|
1852
1860
|
border-left: 1px solid var(--sidebar-border) !important;
|
|
1853
1861
|
border-right: none !important;
|
|
1854
1862
|
}
|
|
1855
1863
|
|
|
1856
1864
|
/* Sidebar Header */
|
|
1857
|
-
.sidebar-header-title {
|
|
1865
|
+
.rdd-sidebar-header-title {
|
|
1858
1866
|
font-family: monospace;
|
|
1859
1867
|
font-weight: 700;
|
|
1860
1868
|
letter-spacing: 0.05em;
|
|
@@ -1864,7 +1872,7 @@ body.resizing-col-active * {
|
|
|
1864
1872
|
}
|
|
1865
1873
|
|
|
1866
1874
|
/* Tab Button with real tabbed integration */
|
|
1867
|
-
.sidebar-tab-btn {
|
|
1875
|
+
.rdd-sidebar-tab-btn {
|
|
1868
1876
|
width: 44px;
|
|
1869
1877
|
height: 44px;
|
|
1870
1878
|
display: flex;
|
|
@@ -1881,13 +1889,13 @@ body.resizing-col-active * {
|
|
|
1881
1889
|
}
|
|
1882
1890
|
|
|
1883
1891
|
/* Micro-interactions & hover tactile feedback for inactive buttons */
|
|
1884
|
-
.sidebar-tab-btn:not(.active):hover {
|
|
1892
|
+
.rdd-sidebar-tab-btn:not(.rdd-active):hover {
|
|
1885
1893
|
color: var(--sidebar-text-title);
|
|
1886
1894
|
background-color: var(--sidebar-btn-hover-bg) !important;
|
|
1887
1895
|
transform: scale(1.05);
|
|
1888
1896
|
}
|
|
1889
1897
|
|
|
1890
|
-
.sidebar-tab-btn.active {
|
|
1898
|
+
.rdd-sidebar-tab-btn.rdd-active {
|
|
1891
1899
|
width: var(--tab-btn-active-width) !important;
|
|
1892
1900
|
color: var(--tab-icon-active) !important;
|
|
1893
1901
|
background-color: var(--tab-btn-active-bg) !important;
|
|
@@ -1901,13 +1909,13 @@ body.resizing-col-active * {
|
|
|
1901
1909
|
}
|
|
1902
1910
|
|
|
1903
1911
|
/* Position-specific active button border & margin alignments */
|
|
1904
|
-
.sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
1912
|
+
.rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
|
|
1905
1913
|
border-left: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
|
|
1906
1914
|
border-right: none !important;
|
|
1907
1915
|
margin-right: -2px !important;
|
|
1908
1916
|
margin-left: 0 !important;
|
|
1909
1917
|
}
|
|
1910
|
-
.sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
1918
|
+
.rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
|
|
1911
1919
|
border-left: none !important;
|
|
1912
1920
|
border-right: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
|
|
1913
1921
|
margin-left: -2px !important;
|
|
@@ -1931,7 +1939,7 @@ body.resizing-col-active * {
|
|
|
1931
1939
|
background-color: var(--sidebar-card-hover-bg) !important;
|
|
1932
1940
|
}
|
|
1933
1941
|
|
|
1934
|
-
.sidebar-window-card.active {
|
|
1942
|
+
.sidebar-window-card.rdd-active {
|
|
1935
1943
|
background-color: var(--sidebar-card-active-bg) !important;
|
|
1936
1944
|
border-color: var(--sidebar-card-active-border) !important;
|
|
1937
1945
|
box-shadow: 0 0 10px var(--sidebar-card-active-shadow);
|
|
@@ -1979,10 +1987,18 @@ body.resizing-col-active * {
|
|
|
1979
1987
|
}
|
|
1980
1988
|
|
|
1981
1989
|
|
|
1982
|
-
/*
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1990
|
+
/* Animations are on by default. `animations={false}` on <WindowManager /> adds
|
|
1991
|
+
`rdd-no-animations` to the workspace root and mirrors it onto <html> (so
|
|
1992
|
+
portaled elements — ContextMenu, Toast, Toolbar's flyout — are covered too).
|
|
1993
|
+
Scoped to only the library's own elements ([class*="rdd-"]) via the new
|
|
1994
|
+
unified prefix — this never touches the consumer's own transitions/animations
|
|
1995
|
+
elsewhere on the page, in either state. */
|
|
1996
|
+
.rdd-no-animations [class*="rdd-"],
|
|
1997
|
+
.rdd-no-animations [class*="rdd-"]::before,
|
|
1998
|
+
.rdd-no-animations [class*="rdd-"]::after,
|
|
1999
|
+
html.rdd-no-animations [class*="rdd-"],
|
|
2000
|
+
html.rdd-no-animations [class*="rdd-"]::before,
|
|
2001
|
+
html.rdd-no-animations [class*="rdd-"]::after {
|
|
1986
2002
|
transition: none !important;
|
|
1987
2003
|
animation: none !important;
|
|
1988
2004
|
}
|
|
@@ -2000,24 +2016,24 @@ html:not(.enable-animations) *::after {
|
|
|
2000
2016
|
}
|
|
2001
2017
|
|
|
2002
2018
|
/* Stacked Modal Classes */
|
|
2003
|
-
.
|
|
2019
|
+
.rdd-modal-overlay {
|
|
2004
2020
|
position: fixed;
|
|
2005
2021
|
inset: 0;
|
|
2006
2022
|
display: flex;
|
|
2007
2023
|
align-items: center;
|
|
2008
2024
|
justify-content: center;
|
|
2009
|
-
z-index:
|
|
2025
|
+
z-index: calc(var(--rdd-z-base, 1000) + 9000);
|
|
2010
2026
|
animation: fadeIn 0.18s ease-out;
|
|
2011
2027
|
}
|
|
2012
2028
|
|
|
2013
|
-
.
|
|
2029
|
+
.rdd-modal-curtain {
|
|
2014
2030
|
position: absolute;
|
|
2015
2031
|
inset: 0;
|
|
2016
2032
|
background-color: rgba(9, 11, 17, 0.65);
|
|
2017
2033
|
backdrop-filter: blur(6px);
|
|
2018
2034
|
}
|
|
2019
2035
|
|
|
2020
|
-
.
|
|
2036
|
+
.rdd-modal-window {
|
|
2021
2037
|
position: relative;
|
|
2022
2038
|
background: rgba(20, 23, 34, 0.95);
|
|
2023
2039
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
@@ -2025,14 +2041,14 @@ html:not(.enable-animations) *::after {
|
|
|
2025
2041
|
border-radius: 12px;
|
|
2026
2042
|
display: flex;
|
|
2027
2043
|
flex-direction: column;
|
|
2028
|
-
color: var(--text-primary);
|
|
2044
|
+
color: var(--rdd-text-primary);
|
|
2029
2045
|
max-width: 90%;
|
|
2030
2046
|
max-height: 90vh;
|
|
2031
2047
|
animation: scaleUp 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
2032
2048
|
overflow: hidden;
|
|
2033
2049
|
}
|
|
2034
2050
|
|
|
2035
|
-
.
|
|
2051
|
+
.rdd-modal-header {
|
|
2036
2052
|
display: flex;
|
|
2037
2053
|
align-items: center;
|
|
2038
2054
|
padding: 12px 20px;
|
|
@@ -2040,24 +2056,24 @@ html:not(.enable-animations) *::after {
|
|
|
2040
2056
|
background-color: rgba(0, 0, 0, 0.15);
|
|
2041
2057
|
}
|
|
2042
2058
|
|
|
2043
|
-
.
|
|
2059
|
+
.rdd-modal-icon {
|
|
2044
2060
|
margin-right: 10px;
|
|
2045
2061
|
font-size: 1.1rem;
|
|
2046
2062
|
display: flex;
|
|
2047
2063
|
align-items: center;
|
|
2048
2064
|
}
|
|
2049
2065
|
|
|
2050
|
-
.
|
|
2066
|
+
.rdd-modal-title {
|
|
2051
2067
|
font-size: 1rem;
|
|
2052
2068
|
font-weight: 600;
|
|
2053
2069
|
margin: 0;
|
|
2054
2070
|
flex-grow: 1;
|
|
2055
2071
|
}
|
|
2056
2072
|
|
|
2057
|
-
.
|
|
2073
|
+
.rdd-modal-close-button {
|
|
2058
2074
|
background: transparent;
|
|
2059
2075
|
border: none;
|
|
2060
|
-
color: var(--text-secondary);
|
|
2076
|
+
color: var(--rdd-text-secondary);
|
|
2061
2077
|
cursor: pointer;
|
|
2062
2078
|
padding: 4px;
|
|
2063
2079
|
display: flex;
|
|
@@ -2067,38 +2083,38 @@ html:not(.enable-animations) *::after {
|
|
|
2067
2083
|
transition: all 0.15s ease;
|
|
2068
2084
|
}
|
|
2069
2085
|
|
|
2070
|
-
.
|
|
2086
|
+
.rdd-modal-close-button:hover {
|
|
2071
2087
|
background-color: rgba(255, 255, 255, 0.08);
|
|
2072
2088
|
color: #fff;
|
|
2073
2089
|
}
|
|
2074
2090
|
|
|
2075
|
-
.
|
|
2091
|
+
.rdd-modal-body {
|
|
2076
2092
|
padding: 10px;
|
|
2077
2093
|
overflow-y: auto;
|
|
2078
2094
|
max-height: calc(90vh - 70px);
|
|
2079
2095
|
}
|
|
2080
2096
|
|
|
2081
2097
|
/* Modal Sizes */
|
|
2082
|
-
.
|
|
2098
|
+
.rdd-modal-size-small {
|
|
2083
2099
|
width: 420px;
|
|
2084
2100
|
}
|
|
2085
|
-
.
|
|
2101
|
+
.rdd-modal-size-medium {
|
|
2086
2102
|
width: 560px;
|
|
2087
2103
|
}
|
|
2088
|
-
.
|
|
2104
|
+
.rdd-modal-size-large {
|
|
2089
2105
|
width: 800px;
|
|
2090
2106
|
}
|
|
2091
|
-
.
|
|
2107
|
+
.rdd-modal-size-fullscreen {
|
|
2092
2108
|
width: 98vw;
|
|
2093
2109
|
height: 96vh;
|
|
2094
2110
|
}
|
|
2095
|
-
.
|
|
2111
|
+
.rdd-modal-size-auto {
|
|
2096
2112
|
width: auto;
|
|
2097
2113
|
min-width: 300px;
|
|
2098
2114
|
}
|
|
2099
2115
|
|
|
2100
2116
|
/* Side Drawer Panels */
|
|
2101
|
-
.
|
|
2117
|
+
.rdd-side-panel {
|
|
2102
2118
|
position: absolute;
|
|
2103
2119
|
top: 0;
|
|
2104
2120
|
bottom: 0;
|
|
@@ -2107,32 +2123,32 @@ html:not(.enable-animations) *::after {
|
|
|
2107
2123
|
backdrop-filter: blur(20px) saturate(180%);
|
|
2108
2124
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
2109
2125
|
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
|
2110
|
-
z-index:
|
|
2126
|
+
z-index: calc(var(--rdd-z-base, 1000) + 8000);
|
|
2111
2127
|
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
|
|
2112
2128
|
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
2113
2129
|
display: flex;
|
|
2114
2130
|
flex-direction: column;
|
|
2115
2131
|
}
|
|
2116
2132
|
|
|
2117
|
-
.
|
|
2133
|
+
.rdd-side-panel-right {
|
|
2118
2134
|
right: 0;
|
|
2119
2135
|
border-right: none;
|
|
2120
2136
|
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
|
2121
2137
|
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
|
|
2122
2138
|
}
|
|
2123
2139
|
|
|
2124
|
-
.
|
|
2140
|
+
.rdd-side-panel-left {
|
|
2125
2141
|
left: 0;
|
|
2126
2142
|
}
|
|
2127
2143
|
|
|
2128
|
-
.
|
|
2144
|
+
.rdd-side-panel-window {
|
|
2129
2145
|
display: flex;
|
|
2130
2146
|
flex-direction: column;
|
|
2131
2147
|
height: 100%;
|
|
2132
2148
|
width: 100%;
|
|
2133
2149
|
}
|
|
2134
2150
|
|
|
2135
|
-
.
|
|
2151
|
+
.rdd-side-panel-header {
|
|
2136
2152
|
display: flex;
|
|
2137
2153
|
align-items: center;
|
|
2138
2154
|
padding: 12px 20px;
|
|
@@ -2141,25 +2157,25 @@ html:not(.enable-animations) *::after {
|
|
|
2141
2157
|
min-height: 44px;
|
|
2142
2158
|
}
|
|
2143
2159
|
|
|
2144
|
-
.
|
|
2160
|
+
.rdd-side-panel-icon {
|
|
2145
2161
|
margin-right: 10px;
|
|
2146
2162
|
font-size: 1.1rem;
|
|
2147
2163
|
display: flex;
|
|
2148
2164
|
align-items: center;
|
|
2149
2165
|
}
|
|
2150
2166
|
|
|
2151
|
-
.
|
|
2167
|
+
.rdd-side-panel-title {
|
|
2152
2168
|
font-size: 0.95rem;
|
|
2153
2169
|
font-weight: 600;
|
|
2154
2170
|
margin: 0;
|
|
2155
2171
|
flex-grow: 1;
|
|
2156
|
-
color: var(--text-primary);
|
|
2172
|
+
color: var(--rdd-text-primary);
|
|
2157
2173
|
}
|
|
2158
2174
|
|
|
2159
|
-
.
|
|
2175
|
+
.rdd-side-panel-close-button {
|
|
2160
2176
|
background: transparent;
|
|
2161
2177
|
border: none;
|
|
2162
|
-
color: var(--text-secondary);
|
|
2178
|
+
color: var(--rdd-text-secondary);
|
|
2163
2179
|
cursor: pointer;
|
|
2164
2180
|
padding: 4px;
|
|
2165
2181
|
display: flex;
|
|
@@ -2169,22 +2185,22 @@ html:not(.enable-animations) *::after {
|
|
|
2169
2185
|
transition: all 0.15s ease;
|
|
2170
2186
|
}
|
|
2171
2187
|
|
|
2172
|
-
.
|
|
2188
|
+
.rdd-side-panel-close-button:hover {
|
|
2173
2189
|
background-color: rgba(255, 255, 255, 0.08);
|
|
2174
2190
|
color: #fff;
|
|
2175
2191
|
}
|
|
2176
2192
|
|
|
2177
|
-
.
|
|
2193
|
+
.rdd-side-panel-body {
|
|
2178
2194
|
flex-grow: 1;
|
|
2179
2195
|
overflow-y: auto;
|
|
2180
2196
|
padding: 10px;
|
|
2181
2197
|
}
|
|
2182
2198
|
|
|
2183
|
-
.
|
|
2199
|
+
.rdd-side-panel-left.rdd-side-panel-visible {
|
|
2184
2200
|
animation: slideInLeft 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
2185
2201
|
}
|
|
2186
2202
|
|
|
2187
|
-
.
|
|
2203
|
+
.rdd-side-panel-right.rdd-side-panel-visible {
|
|
2188
2204
|
animation: slideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
2189
2205
|
}
|
|
2190
2206
|
|
|
@@ -2199,48 +2215,48 @@ html:not(.enable-animations) *::after {
|
|
|
2199
2215
|
}
|
|
2200
2216
|
|
|
2201
2217
|
/* Outer Workspace Edge Drop Zones */
|
|
2202
|
-
.workspace-edge-trigger {
|
|
2218
|
+
.rdd-workspace-edge-trigger {
|
|
2203
2219
|
position: absolute;
|
|
2204
|
-
z-index:
|
|
2220
|
+
z-index: calc(var(--rdd-z-base, 1000) + 8999);
|
|
2205
2221
|
background-color: rgba(0, 123, 255, 0.01);
|
|
2206
2222
|
transition: background-color 0.2s;
|
|
2207
2223
|
}
|
|
2208
2224
|
|
|
2209
|
-
.workspace-edge-trigger:hover {
|
|
2225
|
+
.rdd-workspace-edge-trigger:hover {
|
|
2210
2226
|
background-color: rgba(0, 123, 255, 0.12);
|
|
2211
2227
|
}
|
|
2212
2228
|
|
|
2213
|
-
.edge-trigger-left {
|
|
2229
|
+
.rdd-edge-trigger-left {
|
|
2214
2230
|
left: 0;
|
|
2215
2231
|
top: 0;
|
|
2216
2232
|
bottom: 0;
|
|
2217
2233
|
width: 24px;
|
|
2218
2234
|
}
|
|
2219
2235
|
|
|
2220
|
-
.edge-trigger-right {
|
|
2236
|
+
.rdd-edge-trigger-right {
|
|
2221
2237
|
right: 0;
|
|
2222
2238
|
top: 0;
|
|
2223
2239
|
bottom: 0;
|
|
2224
2240
|
width: 24px;
|
|
2225
2241
|
}
|
|
2226
2242
|
|
|
2227
|
-
.edge-trigger-top {
|
|
2243
|
+
.rdd-edge-trigger-top {
|
|
2228
2244
|
top: 0;
|
|
2229
2245
|
left: 24px;
|
|
2230
2246
|
right: 24px;
|
|
2231
2247
|
height: 10px; /* thin strip — keeps clear of tab bar (38px tall) */
|
|
2232
2248
|
}
|
|
2233
2249
|
|
|
2234
|
-
.edge-trigger-bottom {
|
|
2250
|
+
.rdd-edge-trigger-bottom {
|
|
2235
2251
|
bottom: 0;
|
|
2236
2252
|
left: 24px;
|
|
2237
2253
|
right: 24px;
|
|
2238
2254
|
height: 24px;
|
|
2239
2255
|
}
|
|
2240
2256
|
|
|
2241
|
-
.workspace-edge-preview {
|
|
2257
|
+
.rdd-workspace-edge-preview {
|
|
2242
2258
|
position: absolute;
|
|
2243
|
-
z-index:
|
|
2259
|
+
z-index: calc(var(--rdd-z-base, 1000) + 8998);
|
|
2244
2260
|
background-color: rgba(0, 123, 255, 0.2);
|
|
2245
2261
|
border: 2px dashed #007bff;
|
|
2246
2262
|
pointer-events: none;
|
|
@@ -2248,39 +2264,39 @@ html:not(.enable-animations) *::after {
|
|
|
2248
2264
|
}
|
|
2249
2265
|
|
|
2250
2266
|
/* Workspace corner anchor drop zones */
|
|
2251
|
-
.
|
|
2267
|
+
.rdd-corner-zone {
|
|
2252
2268
|
position: absolute;
|
|
2253
2269
|
width: 80px;
|
|
2254
2270
|
height: 80px;
|
|
2255
|
-
border: 2px dashed var(--accent-color, #38bdf8);
|
|
2271
|
+
border: 2px dashed var(--rdd-accent-color, #38bdf8);
|
|
2256
2272
|
border-radius: 8px;
|
|
2257
2273
|
background: rgba(56, 189, 248, 0.06);
|
|
2258
2274
|
pointer-events: auto;
|
|
2259
|
-
z-index:
|
|
2275
|
+
z-index: calc(var(--rdd-z-base, 1000) + 9000);
|
|
2260
2276
|
opacity: 0.55;
|
|
2261
2277
|
transition: opacity 0.15s ease, background 0.15s ease, border-style 0.15s ease;
|
|
2262
2278
|
}
|
|
2263
|
-
.
|
|
2264
|
-
.
|
|
2265
|
-
.
|
|
2266
|
-
.
|
|
2267
|
-
.
|
|
2279
|
+
.rdd-corner-zone--top-left { top: 0; left: 0; }
|
|
2280
|
+
.rdd-corner-zone--top-right { top: 0; right: 0; }
|
|
2281
|
+
.rdd-corner-zone--bottom-left { bottom: 0; left: 0; }
|
|
2282
|
+
.rdd-corner-zone--bottom-right { bottom: 0; right: 0; }
|
|
2283
|
+
.rdd-corner-zone--hovered {
|
|
2268
2284
|
opacity: 1;
|
|
2269
2285
|
background: rgba(56, 189, 248, 0.18);
|
|
2270
2286
|
border-style: solid;
|
|
2271
2287
|
}
|
|
2272
2288
|
|
|
2273
|
-
[dir="rtl"] .
|
|
2274
|
-
[dir="rtl"] .
|
|
2275
|
-
[dir="rtl"] .
|
|
2276
|
-
[dir="rtl"] .
|
|
2289
|
+
[dir="rtl"] .rdd-corner-zone--top-right { right: auto; left: 0; }
|
|
2290
|
+
[dir="rtl"] .rdd-corner-zone--top-left { left: auto; right: 0; }
|
|
2291
|
+
[dir="rtl"] .rdd-corner-zone--bottom-right { right: auto; left: 0; }
|
|
2292
|
+
[dir="rtl"] .rdd-corner-zone--bottom-left { left: auto; right: 0; }
|
|
2277
2293
|
|
|
2278
2294
|
|
|
2279
2295
|
/*
|
|
2280
2296
|
* Counteract scale for canvas and its siblings inside Luciad containers.
|
|
2281
2297
|
*
|
|
2282
2298
|
* When rendering a panel's mini hover-preview in the taskbar, the parent container
|
|
2283
|
-
* is scaled down using CSS transform scale(var(--preview-scale)). For standard HTML UI,
|
|
2299
|
+
* is scaled down using CSS transform scale(var(--rdd-preview-scale)). For standard HTML UI,
|
|
2284
2300
|
* this works natively. However, for web maps (like WebGL / canvas-based engines such as
|
|
2285
2301
|
* LuciadRIA), scaling down the browser container causes the rendering canvas and its absolute
|
|
2286
2302
|
* siblings (e.g. HTML overlays, labels, shapes) to blur or offset.
|
|
@@ -2289,49 +2305,49 @@ html:not(.enable-animations) *::after {
|
|
|
2289
2305
|
* of the canvas and its siblings by the scale factor. This forces the map engine to render
|
|
2290
2306
|
* at full resolution inside the preview container without positioning glitches.
|
|
2291
2307
|
*/
|
|
2292
|
-
.taskbar-item-preview-host .luciad canvas,
|
|
2293
|
-
.taskbar-item-preview-host .luciad canvas ~ * {
|
|
2294
|
-
transform: scale(calc(1 / var(--preview-scale, 1))) !important;
|
|
2308
|
+
.rdd-taskbar-item-preview-host .luciad canvas,
|
|
2309
|
+
.rdd-taskbar-item-preview-host .luciad canvas ~ * {
|
|
2310
|
+
transform: scale(calc(1 / var(--rdd-preview-scale, 1))) !important;
|
|
2295
2311
|
transform-origin: top left;
|
|
2296
|
-
width: calc(100% * var(--preview-scale, 1)) !important;
|
|
2297
|
-
height: calc(100% * var(--preview-scale, 1)) !important;
|
|
2312
|
+
width: calc(100% * var(--rdd-preview-scale, 1)) !important;
|
|
2313
|
+
height: calc(100% * var(--rdd-preview-scale, 1)) !important;
|
|
2298
2314
|
}
|
|
2299
2315
|
|
|
2300
2316
|
/* ==========================================
|
|
2301
2317
|
RTL (Right-to-Left) Support
|
|
2302
2318
|
========================================== */
|
|
2303
2319
|
|
|
2304
|
-
[dir="rtl"] .workspace-tab {
|
|
2320
|
+
[dir="rtl"] .rdd-workspace-tab {
|
|
2305
2321
|
border-right: none !important;
|
|
2306
|
-
border-left: 1px solid var(--border-panel) !important;
|
|
2322
|
+
border-left: 1px solid var(--rdd-border-panel) !important;
|
|
2307
2323
|
padding: 0 14px 0 6px !important;
|
|
2308
2324
|
}
|
|
2309
2325
|
|
|
2310
|
-
[dir="rtl"] .workspace-tab.drag-hover-left {
|
|
2311
|
-
box-shadow: 3px 0 0 0 var(--accent-color, #38bdf8),
|
|
2312
|
-
10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
|
|
2326
|
+
[dir="rtl"] .rdd-workspace-tab.rdd-drag-hover-left {
|
|
2327
|
+
box-shadow: 3px 0 0 0 var(--rdd-accent-color, #38bdf8),
|
|
2328
|
+
10px 0 10px -2px var(--rdd-accent-glow, rgba(56,189,248,0.35));
|
|
2313
2329
|
}
|
|
2314
|
-
[dir="rtl"] .workspace-tab.drag-hover-right {
|
|
2315
|
-
box-shadow: -3px 0 0 0 var(--accent-color, #38bdf8),
|
|
2316
|
-
-10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
|
|
2330
|
+
[dir="rtl"] .rdd-workspace-tab.rdd-drag-hover-right {
|
|
2331
|
+
box-shadow: -3px 0 0 0 var(--rdd-accent-color, #38bdf8),
|
|
2332
|
+
-10px 0 10px -2px var(--rdd-accent-glow, rgba(56,189,248,0.35));
|
|
2317
2333
|
}
|
|
2318
2334
|
|
|
2319
|
-
[dir="rtl"] .workspace-tab > .text-truncate {
|
|
2335
|
+
[dir="rtl"] .rdd-workspace-tab > .rdd-text-truncate {
|
|
2320
2336
|
margin-right: 0 !important;
|
|
2321
2337
|
margin-left: 12px !important;
|
|
2322
2338
|
}
|
|
2323
2339
|
|
|
2324
|
-
[dir="rtl"] .workspace-tab-icon {
|
|
2340
|
+
[dir="rtl"] .rdd-workspace-tab-icon {
|
|
2325
2341
|
margin-right: 0 !important;
|
|
2326
2342
|
margin-left: 6px !important;
|
|
2327
2343
|
}
|
|
2328
2344
|
|
|
2329
|
-
[dir="rtl"] .tab-header-actions {
|
|
2345
|
+
[dir="rtl"] .rdd-tab-header-actions {
|
|
2330
2346
|
margin-left: 0 !important;
|
|
2331
2347
|
margin-right: auto !important;
|
|
2332
2348
|
}
|
|
2333
2349
|
|
|
2334
|
-
[dir="rtl"] .close-tab-x {
|
|
2350
|
+
[dir="rtl"] .rdd-close-tab-x {
|
|
2335
2351
|
margin-left: 0 !important;
|
|
2336
2352
|
margin-right: auto !important;
|
|
2337
2353
|
}
|
|
@@ -2339,36 +2355,36 @@ html:not(.enable-animations) *::after {
|
|
|
2339
2355
|
/* Floating window title bar RTL — inherited direction:rtl on the titlebar flex container
|
|
2340
2356
|
moves buttons (last in DOM) to the LEFT and title (first in DOM) to the RIGHT.
|
|
2341
2357
|
No explicit row-reverse needed; only prevent the button group from reordering internally. */
|
|
2342
|
-
[dir="rtl"] .
|
|
2358
|
+
[dir="rtl"] .rdd-titlebar-actions { flex-direction: row; }
|
|
2343
2359
|
|
|
2344
2360
|
/* Side Panels transitions slide-in direction */
|
|
2345
|
-
[dir="rtl"] .
|
|
2361
|
+
[dir="rtl"] .rdd-side-panel-left {
|
|
2346
2362
|
left: auto !important;
|
|
2347
2363
|
right: 0 !important;
|
|
2348
2364
|
transform: translateX(100%) !important;
|
|
2349
2365
|
}
|
|
2350
|
-
[dir="rtl"] .
|
|
2366
|
+
[dir="rtl"] .rdd-side-panel-left.rdd-side-panel-visible {
|
|
2351
2367
|
transform: translateX(0) !important;
|
|
2352
2368
|
border-right: none !important;
|
|
2353
|
-
border-left: 1px solid var(--border-panel, #3c3c3c) !important;
|
|
2369
|
+
border-left: 1px solid var(--rdd-border-panel, #3c3c3c) !important;
|
|
2354
2370
|
}
|
|
2355
2371
|
|
|
2356
|
-
[dir="rtl"] .
|
|
2372
|
+
[dir="rtl"] .rdd-side-panel-right {
|
|
2357
2373
|
right: auto !important;
|
|
2358
2374
|
left: 0 !important;
|
|
2359
2375
|
transform: translateX(-100%) !important;
|
|
2360
2376
|
}
|
|
2361
|
-
[dir="rtl"] .
|
|
2377
|
+
[dir="rtl"] .rdd-side-panel-right.rdd-side-panel-visible {
|
|
2362
2378
|
transform: translateX(0) !important;
|
|
2363
2379
|
border-left: none !important;
|
|
2364
|
-
border-right: 1px solid var(--border-panel, #3c3c3c) !important;
|
|
2380
|
+
border-right: 1px solid var(--rdd-border-panel, #3c3c3c) !important;
|
|
2365
2381
|
}
|
|
2366
2382
|
|
|
2367
2383
|
/* Minimize Taskbar adjustments */
|
|
2368
|
-
[dir="rtl"] .taskbar-footer-container {
|
|
2384
|
+
[dir="rtl"] .rdd-taskbar-footer-container {
|
|
2369
2385
|
flex-direction: row-reverse !important;
|
|
2370
2386
|
}
|
|
2371
|
-
[dir="rtl"] .taskbar-item-icon {
|
|
2387
|
+
[dir="rtl"] .rdd-taskbar-item-icon {
|
|
2372
2388
|
margin-right: 0 !important;
|
|
2373
2389
|
margin-left: 4px !important;
|
|
2374
2390
|
}
|
|
@@ -2377,22 +2393,22 @@ html:not(.enable-animations) *::after {
|
|
|
2377
2393
|
Dots must stay on the LEFT in both LTR and RTL (real macOS behavior).
|
|
2378
2394
|
In RTL context flex-direction:row flows items right-to-left, so
|
|
2379
2395
|
DOM [title][buttons] → title at RIGHT, buttons at LEFT. */
|
|
2380
|
-
[dir="rtl"] [data-workspace-skin="macos"] .floating-window-titlebar {
|
|
2396
|
+
[dir="rtl"] [data-workspace-skin="macos"] .rdd-floating-window-titlebar {
|
|
2381
2397
|
flex-direction: row !important;
|
|
2382
2398
|
}
|
|
2383
2399
|
/* Title: pack icon+text toward the visual right (flex-start = right in RTL) */
|
|
2384
|
-
[dir="rtl"] [data-workspace-skin="macos"] .floating-window-titlebar .floating-window-title {
|
|
2400
|
+
[dir="rtl"] [data-workspace-skin="macos"] .rdd-floating-window-titlebar .rdd-floating-window-title {
|
|
2385
2401
|
justify-content: flex-start !important;
|
|
2386
2402
|
}
|
|
2387
2403
|
/* Button group: keep dots in correct visual order (Red → Yellow → Green, close at far left).
|
|
2388
2404
|
direction:rtl (inherited) + flex-direction:row = right-to-left → DOM first item (more) at right,
|
|
2389
2405
|
last item (close) at left. */
|
|
2390
|
-
[dir="rtl"] [data-workspace-skin="macos"] .floating-window-titlebar .
|
|
2406
|
+
[dir="rtl"] [data-workspace-skin="macos"] .rdd-floating-window-titlebar .rdd-titlebar-actions {
|
|
2391
2407
|
flex-direction: row !important;
|
|
2392
2408
|
}
|
|
2393
2409
|
|
|
2394
2410
|
/* Mirror close-button margins for macOS tabs under RTL */
|
|
2395
|
-
[dir="rtl"][data-workspace-skin="macos"] .close-tab-x {
|
|
2411
|
+
[dir="rtl"][data-workspace-skin="macos"] .rdd-close-tab-x {
|
|
2396
2412
|
margin-left: 0 !important;
|
|
2397
2413
|
margin-right: 2px !important;
|
|
2398
2414
|
}
|
|
@@ -2402,60 +2418,60 @@ html:not(.enable-animations) *::after {
|
|
|
2402
2418
|
.left strips move visually to the RIGHT and .right strips to the LEFT.
|
|
2403
2419
|
All physical border-left/border-right and box-shadow directions must swap. */
|
|
2404
2420
|
|
|
2405
|
-
[dir="rtl"] .sidebar-tabs-strip.left {
|
|
2421
|
+
[dir="rtl"] .rdd-sidebar-tabs-strip.rdd-left {
|
|
2406
2422
|
border-left: 1px solid var(--sidebar-border) !important;
|
|
2407
2423
|
border-right: none !important;
|
|
2408
2424
|
}
|
|
2409
|
-
[dir="rtl"] .sidebar-tabs-strip.right {
|
|
2425
|
+
[dir="rtl"] .rdd-sidebar-tabs-strip.rdd-right {
|
|
2410
2426
|
border-right: 1px solid var(--sidebar-border) !important;
|
|
2411
2427
|
border-left: none !important;
|
|
2412
2428
|
}
|
|
2413
2429
|
|
|
2414
|
-
[dir="rtl"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
2430
|
+
[dir="rtl"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
|
|
2415
2431
|
border-left: none !important;
|
|
2416
2432
|
border-right: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
|
|
2417
2433
|
margin-left: -2px !important;
|
|
2418
2434
|
margin-right: 0 !important;
|
|
2419
2435
|
}
|
|
2420
|
-
[dir="rtl"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
2436
|
+
[dir="rtl"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
|
|
2421
2437
|
border-right: none !important;
|
|
2422
2438
|
border-left: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
|
|
2423
2439
|
margin-right: -2px !important;
|
|
2424
2440
|
margin-left: 0 !important;
|
|
2425
2441
|
}
|
|
2426
2442
|
|
|
2427
|
-
[dir="rtl"] .sidebar-content-drawer.left {
|
|
2443
|
+
[dir="rtl"] .rdd-sidebar-content-drawer.rdd-left {
|
|
2428
2444
|
border-left: 1px solid var(--sidebar-border) !important;
|
|
2429
2445
|
border-right: none !important;
|
|
2430
2446
|
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
|
|
2431
2447
|
}
|
|
2432
|
-
[dir="rtl"] .sidebar-content-drawer.right {
|
|
2448
|
+
[dir="rtl"] .rdd-sidebar-content-drawer.rdd-right {
|
|
2433
2449
|
border-right: 1px solid var(--sidebar-border) !important;
|
|
2434
2450
|
border-left: none !important;
|
|
2435
2451
|
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
|
|
2436
2452
|
}
|
|
2437
2453
|
|
|
2438
2454
|
/* obsidian & tokyo — flip the inset glow X offset sign */
|
|
2439
|
-
[dir="rtl"] [data-workspace-skin="obsidian"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
2455
|
+
[dir="rtl"] [data-workspace-skin="obsidian"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
|
|
2440
2456
|
box-shadow: var(--tab-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
|
|
2441
2457
|
}
|
|
2442
|
-
[dir="rtl"] [data-workspace-skin="obsidian"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
2458
|
+
[dir="rtl"] [data-workspace-skin="obsidian"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
|
|
2443
2459
|
box-shadow: var(--tab-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
|
|
2444
2460
|
}
|
|
2445
|
-
[dir="rtl"] [data-workspace-skin="tokyo"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
2461
|
+
[dir="rtl"] [data-workspace-skin="tokyo"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
|
|
2446
2462
|
box-shadow: var(--tab-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
|
|
2447
2463
|
}
|
|
2448
|
-
[dir="rtl"] [data-workspace-skin="tokyo"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
2464
|
+
[dir="rtl"] [data-workspace-skin="tokyo"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
|
|
2449
2465
|
box-shadow: var(--tab-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
|
|
2450
2466
|
}
|
|
2451
2467
|
|
|
2452
2468
|
/* chrome — swap the capsule border-radius when strips change sides */
|
|
2453
|
-
[dir="rtl"] [data-workspace-skin="chrome"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
|
|
2469
|
+
[dir="rtl"] [data-workspace-skin="chrome"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
|
|
2454
2470
|
border-radius: 10px 0 0 10px !important;
|
|
2455
2471
|
margin-left: 0 !important;
|
|
2456
2472
|
margin-right: 0 !important;
|
|
2457
2473
|
}
|
|
2458
|
-
[dir="rtl"] [data-workspace-skin="chrome"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
|
|
2474
|
+
[dir="rtl"] [data-workspace-skin="chrome"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
|
|
2459
2475
|
border-radius: 0 10px 10px 0 !important;
|
|
2460
2476
|
margin-right: 0 !important;
|
|
2461
2477
|
margin-left: 0 !important;
|
|
@@ -2466,45 +2482,45 @@ html:not(.enable-animations) *::after {
|
|
|
2466
2482
|
(replaces Bootstrap utility class dependencies)
|
|
2467
2483
|
========================================================================== */
|
|
2468
2484
|
|
|
2469
|
-
/* Text truncation (equivalent to Bootstrap .text-truncate) */
|
|
2470
|
-
.text-truncate {
|
|
2485
|
+
/* Text truncation (equivalent to Bootstrap .rdd-text-truncate) */
|
|
2486
|
+
.rdd-text-truncate {
|
|
2471
2487
|
overflow: hidden;
|
|
2472
2488
|
text-overflow: ellipsis;
|
|
2473
2489
|
white-space: nowrap;
|
|
2474
2490
|
}
|
|
2475
2491
|
|
|
2476
2492
|
/* Floating window titlebar button group */
|
|
2477
|
-
.
|
|
2493
|
+
.rdd-titlebar-actions {
|
|
2478
2494
|
display: flex;
|
|
2479
2495
|
align-items: center;
|
|
2480
2496
|
}
|
|
2481
2497
|
|
|
2482
2498
|
/* Window custom header actions slot */
|
|
2483
|
-
.window-header-actions {
|
|
2499
|
+
.rdd-window-header-actions {
|
|
2484
2500
|
display: flex;
|
|
2485
2501
|
align-items: center;
|
|
2486
2502
|
margin-inline-end: 0.25rem;
|
|
2487
|
-
gap: var(--header-button-gap, 4px);
|
|
2503
|
+
gap: var(--rdd-header-button-gap, 4px);
|
|
2488
2504
|
}
|
|
2489
2505
|
|
|
2490
2506
|
/* Tab header custom actions slot */
|
|
2491
|
-
.tab-header-actions {
|
|
2507
|
+
.rdd-tab-header-actions {
|
|
2492
2508
|
margin-inline-start: auto;
|
|
2493
2509
|
display: flex;
|
|
2494
2510
|
align-items: center;
|
|
2495
2511
|
margin-inline-end: 0.25rem;
|
|
2496
|
-
gap: var(--header-button-gap, 4px);
|
|
2512
|
+
gap: var(--rdd-header-button-gap, 4px);
|
|
2497
2513
|
}
|
|
2498
2514
|
|
|
2499
2515
|
/* Panel body (tab content area / floating window content area) */
|
|
2500
|
-
.
|
|
2516
|
+
.rdd-panel-body {
|
|
2501
2517
|
flex-grow: 1;
|
|
2502
2518
|
width: 100%;
|
|
2503
2519
|
height: 100%;
|
|
2504
2520
|
}
|
|
2505
2521
|
|
|
2506
2522
|
/* Empty workspace section placeholder text */
|
|
2507
|
-
.empty-leaf-placeholder {
|
|
2523
|
+
.rdd-empty-leaf-placeholder {
|
|
2508
2524
|
width: 100%;
|
|
2509
2525
|
height: 100%;
|
|
2510
2526
|
display: flex;
|
|
@@ -2512,23 +2528,23 @@ html:not(.enable-animations) *::after {
|
|
|
2512
2528
|
justify-content: center;
|
|
2513
2529
|
font-family: monospace;
|
|
2514
2530
|
font-size: 0.875rem;
|
|
2515
|
-
color: var(--text-secondary, #94a3b8);
|
|
2531
|
+
color: var(--rdd-text-secondary, #94a3b8);
|
|
2516
2532
|
}
|
|
2517
2533
|
|
|
2518
2534
|
/* Empty workspace grid (no panels loaded) */
|
|
2519
|
-
.empty-workspace-grid {
|
|
2535
|
+
.rdd-empty-workspace-grid {
|
|
2520
2536
|
width: 100%;
|
|
2521
2537
|
height: 100%;
|
|
2522
2538
|
display: flex;
|
|
2523
2539
|
align-items: center;
|
|
2524
2540
|
justify-content: center;
|
|
2525
|
-
color: var(--text-secondary, #94a3b8);
|
|
2541
|
+
color: var(--rdd-text-secondary, #94a3b8);
|
|
2526
2542
|
font-family: monospace;
|
|
2527
2543
|
font-size: 0.875rem;
|
|
2528
2544
|
}
|
|
2529
2545
|
|
|
2530
2546
|
/* Unregistered component error panel */
|
|
2531
|
-
.
|
|
2547
|
+
.rdd-unregistered-panel {
|
|
2532
2548
|
width: 100%;
|
|
2533
2549
|
height: 100%;
|
|
2534
2550
|
display: flex;
|
|
@@ -2544,7 +2560,7 @@ html:not(.enable-animations) *::after {
|
|
|
2544
2560
|
}
|
|
2545
2561
|
|
|
2546
2562
|
/* Taskbar scrollable items row */
|
|
2547
|
-
.taskbar-items-container {
|
|
2563
|
+
.rdd-taskbar-items-container {
|
|
2548
2564
|
display: flex;
|
|
2549
2565
|
flex-direction: row;
|
|
2550
2566
|
gap: 0.5rem;
|
|
@@ -2557,12 +2573,12 @@ html:not(.enable-animations) *::after {
|
|
|
2557
2573
|
max-width: 800px;
|
|
2558
2574
|
}
|
|
2559
2575
|
|
|
2560
|
-
.taskbar-items-container::-webkit-scrollbar {
|
|
2576
|
+
.rdd-taskbar-items-container::-webkit-scrollbar {
|
|
2561
2577
|
display: none;
|
|
2562
2578
|
}
|
|
2563
2579
|
|
|
2564
2580
|
/* Tooltip header row (title + close button) */
|
|
2565
|
-
.tooltip-header-row {
|
|
2581
|
+
.rdd-tooltip-header-row {
|
|
2566
2582
|
display: flex;
|
|
2567
2583
|
flex-direction: row;
|
|
2568
2584
|
align-items: center;
|
|
@@ -2573,13 +2589,13 @@ html:not(.enable-animations) *::after {
|
|
|
2573
2589
|
}
|
|
2574
2590
|
|
|
2575
2591
|
/* Drag ghost tab preview (floating label while dragging) */
|
|
2576
|
-
.drag-ghost-tab {
|
|
2592
|
+
.rdd-drag-ghost-tab {
|
|
2577
2593
|
position: fixed;
|
|
2578
2594
|
background: rgba(0, 0, 0, 0.8);
|
|
2579
|
-
border: 1px solid var(--accent-color, #38bdf8);
|
|
2580
|
-
border-left: 3px solid var(--accent-color, #38bdf8);
|
|
2595
|
+
border: 1px solid var(--rdd-accent-color, #38bdf8);
|
|
2596
|
+
border-left: 3px solid var(--rdd-accent-color, #38bdf8);
|
|
2581
2597
|
border-radius: 4px;
|
|
2582
|
-
color: var(--accent-color, #38bdf8);
|
|
2598
|
+
color: var(--rdd-accent-color, #38bdf8);
|
|
2583
2599
|
font-family: monospace;
|
|
2584
2600
|
padding: 0.375rem 1rem;
|
|
2585
2601
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
@@ -2592,14 +2608,14 @@ html:not(.enable-animations) *::after {
|
|
|
2592
2608
|
}
|
|
2593
2609
|
|
|
2594
2610
|
/* ConfirmationForm component styles */
|
|
2595
|
-
.confirmation-form-body {
|
|
2611
|
+
.rdd-confirmation-form-body {
|
|
2596
2612
|
padding: 0.75rem;
|
|
2597
2613
|
display: flex;
|
|
2598
2614
|
flex-direction: column;
|
|
2599
2615
|
gap: 0.75rem;
|
|
2600
2616
|
}
|
|
2601
2617
|
|
|
2602
|
-
.confirmation-alert {
|
|
2618
|
+
.rdd-confirmation-alert {
|
|
2603
2619
|
display: flex;
|
|
2604
2620
|
align-items: center;
|
|
2605
2621
|
gap: 0.5rem;
|
|
@@ -2609,38 +2625,38 @@ html:not(.enable-animations) *::after {
|
|
|
2609
2625
|
border-radius: 0.375rem;
|
|
2610
2626
|
}
|
|
2611
2627
|
|
|
2612
|
-
.confirmation-alert-danger {
|
|
2628
|
+
.rdd-confirmation-alert-danger {
|
|
2613
2629
|
background: rgba(220, 53, 69, 0.15);
|
|
2614
2630
|
border: 1px solid rgba(220, 53, 69, 0.3);
|
|
2615
2631
|
color: #f87171;
|
|
2616
2632
|
}
|
|
2617
2633
|
|
|
2618
|
-
.confirmation-alert-info {
|
|
2634
|
+
.rdd-confirmation-alert-info {
|
|
2619
2635
|
background: rgba(13, 202, 240, 0.15);
|
|
2620
2636
|
border: 1px solid rgba(13, 202, 240, 0.3);
|
|
2621
2637
|
color: #67e8f9;
|
|
2622
2638
|
}
|
|
2623
2639
|
|
|
2624
|
-
.confirmation-alert-warning {
|
|
2640
|
+
.rdd-confirmation-alert-warning {
|
|
2625
2641
|
background: rgba(255, 193, 7, 0.15);
|
|
2626
2642
|
border: 1px solid rgba(255, 193, 7, 0.3);
|
|
2627
2643
|
color: #fbbf24;
|
|
2628
2644
|
}
|
|
2629
2645
|
|
|
2630
|
-
.confirmation-alert-success {
|
|
2646
|
+
.rdd-confirmation-alert-success {
|
|
2631
2647
|
background: rgba(25, 135, 84, 0.15);
|
|
2632
2648
|
border: 1px solid rgba(25, 135, 84, 0.3);
|
|
2633
2649
|
color: #4ade80;
|
|
2634
2650
|
}
|
|
2635
2651
|
|
|
2636
|
-
.confirmation-actions {
|
|
2652
|
+
.rdd-confirmation-actions {
|
|
2637
2653
|
display: flex;
|
|
2638
2654
|
justify-content: flex-end;
|
|
2639
2655
|
gap: 0.5rem;
|
|
2640
2656
|
}
|
|
2641
2657
|
|
|
2642
2658
|
/* Sidebar drawer header */
|
|
2643
|
-
.sidebar-drawer-header {
|
|
2659
|
+
.rdd-sidebar-drawer-header {
|
|
2644
2660
|
display: flex;
|
|
2645
2661
|
align-items: center;
|
|
2646
2662
|
justify-content: space-between;
|
|
@@ -2652,7 +2668,7 @@ html:not(.enable-animations) *::after {
|
|
|
2652
2668
|
}
|
|
2653
2669
|
|
|
2654
2670
|
/* Sidebar drawer content body */
|
|
2655
|
-
.sidebar-drawer-body {
|
|
2671
|
+
.rdd-sidebar-drawer-body {
|
|
2656
2672
|
flex-grow: 1;
|
|
2657
2673
|
overflow: auto;
|
|
2658
2674
|
}
|
|
@@ -2678,7 +2694,7 @@ html:not(.enable-animations) *::after {
|
|
|
2678
2694
|
font-weight: 700;
|
|
2679
2695
|
letter-spacing: 0.08em;
|
|
2680
2696
|
text-transform: uppercase;
|
|
2681
|
-
color: var(--sidebar-text-muted, var(--text-secondary));
|
|
2697
|
+
color: var(--sidebar-text-muted, var(--rdd-text-secondary));
|
|
2682
2698
|
margin: 0 0 4px 0;
|
|
2683
2699
|
}
|
|
2684
2700
|
|
|
@@ -2692,7 +2708,7 @@ html:not(.enable-animations) *::after {
|
|
|
2692
2708
|
/* Empty state placeholder */
|
|
2693
2709
|
.sb-empty-state {
|
|
2694
2710
|
font-size: 0.8rem;
|
|
2695
|
-
color: var(--sidebar-text-muted, var(--text-secondary));
|
|
2711
|
+
color: var(--sidebar-text-muted, var(--rdd-text-secondary));
|
|
2696
2712
|
text-align: center;
|
|
2697
2713
|
padding: 16px 12px;
|
|
2698
2714
|
}
|
|
@@ -2712,7 +2728,7 @@ html:not(.enable-animations) *::after {
|
|
|
2712
2728
|
border-color: var(--sidebar-card-hover-border);
|
|
2713
2729
|
background-color: var(--sidebar-card-hover-bg);
|
|
2714
2730
|
}
|
|
2715
|
-
.sb-card.active {
|
|
2731
|
+
.sb-card.rdd-active {
|
|
2716
2732
|
background-color: var(--sidebar-card-active-bg);
|
|
2717
2733
|
border-color: var(--sidebar-card-active-border);
|
|
2718
2734
|
box-shadow: 0 0 10px var(--sidebar-card-active-shadow);
|
|
@@ -2757,8 +2773,8 @@ html:not(.enable-animations) *::after {
|
|
|
2757
2773
|
align-items: center;
|
|
2758
2774
|
justify-content: center;
|
|
2759
2775
|
gap: 4px;
|
|
2760
|
-
background: var(--accent-color);
|
|
2761
|
-
color: var(--bg-primary);
|
|
2776
|
+
background: var(--rdd-accent-color);
|
|
2777
|
+
color: var(--rdd-bg-primary);
|
|
2762
2778
|
border: none;
|
|
2763
2779
|
border-radius: 5px;
|
|
2764
2780
|
padding: 5px 12px;
|
|
@@ -2798,7 +2814,7 @@ html:not(.enable-animations) *::after {
|
|
|
2798
2814
|
align-items: center;
|
|
2799
2815
|
justify-content: center;
|
|
2800
2816
|
background: transparent;
|
|
2801
|
-
color: var(--text-secondary);
|
|
2817
|
+
color: var(--rdd-text-secondary);
|
|
2802
2818
|
border: none;
|
|
2803
2819
|
border-radius: 4px;
|
|
2804
2820
|
padding: 3px 5px;
|
|
@@ -2806,7 +2822,7 @@ html:not(.enable-animations) *::after {
|
|
|
2806
2822
|
transition: color 0.15s ease, background-color 0.15s ease;
|
|
2807
2823
|
}
|
|
2808
2824
|
.sb-btn-ghost:hover {
|
|
2809
|
-
color: var(--text-primary);
|
|
2825
|
+
color: var(--rdd-text-primary);
|
|
2810
2826
|
background-color: var(--sidebar-btn-hover-bg);
|
|
2811
2827
|
}
|
|
2812
2828
|
.sb-btn-ghost.danger:hover { color: #f87171; }
|
|
@@ -2827,8 +2843,8 @@ html:not(.enable-animations) *::after {
|
|
|
2827
2843
|
|
|
2828
2844
|
/* Text input */
|
|
2829
2845
|
.sb-input {
|
|
2830
|
-
background: var(--bg-panel);
|
|
2831
|
-
color: var(--text-primary);
|
|
2846
|
+
background: var(--rdd-bg-panel);
|
|
2847
|
+
color: var(--rdd-text-primary);
|
|
2832
2848
|
border: 1px solid var(--sidebar-border);
|
|
2833
2849
|
border-radius: 5px;
|
|
2834
2850
|
padding: 5px 8px;
|
|
@@ -2838,13 +2854,13 @@ html:not(.enable-animations) *::after {
|
|
|
2838
2854
|
transition: border-color 0.15s ease;
|
|
2839
2855
|
outline: none;
|
|
2840
2856
|
}
|
|
2841
|
-
.sb-input:focus { border-color: var(--accent-color); }
|
|
2842
|
-
.sb-input::placeholder { color: var(--text-secondary); }
|
|
2857
|
+
.sb-input:focus { border-color: var(--rdd-accent-color); }
|
|
2858
|
+
.sb-input::placeholder { color: var(--rdd-text-secondary); }
|
|
2843
2859
|
|
|
2844
2860
|
/* Select control */
|
|
2845
2861
|
.sb-select {
|
|
2846
|
-
background: var(--bg-panel);
|
|
2847
|
-
color: var(--text-primary);
|
|
2862
|
+
background: var(--rdd-bg-panel);
|
|
2863
|
+
color: var(--rdd-text-primary);
|
|
2848
2864
|
border: 1px solid var(--sidebar-border);
|
|
2849
2865
|
border-radius: 5px;
|
|
2850
2866
|
padding: 5px 8px;
|
|
@@ -2855,12 +2871,12 @@ html:not(.enable-animations) *::after {
|
|
|
2855
2871
|
transition: border-color 0.15s ease;
|
|
2856
2872
|
outline: none;
|
|
2857
2873
|
}
|
|
2858
|
-
.sb-select:focus { border-color: var(--accent-color); }
|
|
2874
|
+
.sb-select:focus { border-color: var(--rdd-accent-color); }
|
|
2859
2875
|
|
|
2860
2876
|
/* Range slider */
|
|
2861
2877
|
.sb-range {
|
|
2862
2878
|
width: 100%;
|
|
2863
|
-
accent-color: var(--accent-color);
|
|
2879
|
+
accent-color: var(--rdd-accent-color);
|
|
2864
2880
|
cursor: pointer;
|
|
2865
2881
|
}
|
|
2866
2882
|
|
|
@@ -2875,7 +2891,7 @@ html:not(.enable-animations) *::after {
|
|
|
2875
2891
|
.sb-field-value {
|
|
2876
2892
|
font-family: monospace;
|
|
2877
2893
|
font-size: 0.78rem;
|
|
2878
|
-
color: var(--text-primary);
|
|
2894
|
+
color: var(--rdd-text-primary);
|
|
2879
2895
|
white-space: nowrap;
|
|
2880
2896
|
min-width: 36px;
|
|
2881
2897
|
text-align: right;
|
|
@@ -2890,23 +2906,14 @@ html:not(.enable-animations) *::after {
|
|
|
2890
2906
|
}
|
|
2891
2907
|
.sb-toggle-label {
|
|
2892
2908
|
font-size: 0.8rem;
|
|
2893
|
-
color: var(--text-primary);
|
|
2909
|
+
color: var(--rdd-text-primary);
|
|
2894
2910
|
}
|
|
2895
2911
|
|
|
2896
|
-
/* Deprecated aliases — keep existing consumer code working for one release */
|
|
2897
|
-
.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; }
|
|
2898
|
-
.sidebar-window-card:hover { border-color: var(--sidebar-card-hover-border) !important; background-color: var(--sidebar-card-hover-bg) !important; }
|
|
2899
|
-
.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); }
|
|
2900
|
-
.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; }
|
|
2901
|
-
.btn-pill-outline:hover { background: var(--sidebar-btn-front-hover-bg) !important; transform: scale(1.03); }
|
|
2902
|
-
.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; }
|
|
2903
|
-
.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; }
|
|
2904
|
-
|
|
2905
2912
|
/* ==========================================================================
|
|
2906
2913
|
TOOLBAR STRIP
|
|
2907
2914
|
========================================================================== */
|
|
2908
2915
|
|
|
2909
|
-
.toolbar-strip {
|
|
2916
|
+
.rdd-toolbar-strip {
|
|
2910
2917
|
background-color: var(--sidebar-tabs-bg);
|
|
2911
2918
|
display: flex;
|
|
2912
2919
|
align-items: center;
|
|
@@ -2914,8 +2921,8 @@ html:not(.enable-animations) *::after {
|
|
|
2914
2921
|
z-index: 5;
|
|
2915
2922
|
}
|
|
2916
2923
|
|
|
2917
|
-
.toolbar-strip.left,
|
|
2918
|
-
.toolbar-strip.right {
|
|
2924
|
+
.rdd-toolbar-strip.rdd-left,
|
|
2925
|
+
.rdd-toolbar-strip.rdd-right {
|
|
2919
2926
|
flex-direction: column;
|
|
2920
2927
|
width: 48px;
|
|
2921
2928
|
height: 100%;
|
|
@@ -2925,8 +2932,8 @@ html:not(.enable-animations) *::after {
|
|
|
2925
2932
|
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2926
2933
|
}
|
|
2927
2934
|
|
|
2928
|
-
.toolbar-strip.top,
|
|
2929
|
-
.toolbar-strip.bottom {
|
|
2935
|
+
.rdd-toolbar-strip.rdd-top,
|
|
2936
|
+
.rdd-toolbar-strip.rdd-bottom {
|
|
2930
2937
|
flex-direction: row;
|
|
2931
2938
|
width: 100%;
|
|
2932
2939
|
height: 48px;
|
|
@@ -2937,17 +2944,17 @@ html:not(.enable-animations) *::after {
|
|
|
2937
2944
|
}
|
|
2938
2945
|
|
|
2939
2946
|
@media (pointer: coarse) {
|
|
2940
|
-
.toolbar-strip.left, .toolbar-strip.right { width: 56px; }
|
|
2941
|
-
.toolbar-strip.top, .toolbar-strip.bottom { height: 56px; }
|
|
2947
|
+
.rdd-toolbar-strip.rdd-left, .rdd-toolbar-strip.rdd-right { width: 56px; }
|
|
2948
|
+
.rdd-toolbar-strip.rdd-top, .rdd-toolbar-strip.rdd-bottom { height: 56px; }
|
|
2942
2949
|
}
|
|
2943
2950
|
|
|
2944
|
-
.toolbar-strip.left { border-right: 1px solid var(--sidebar-border); }
|
|
2945
|
-
.toolbar-strip.right { border-left: 1px solid var(--sidebar-border); }
|
|
2946
|
-
.toolbar-strip.top { border-bottom: 1px solid var(--sidebar-border); }
|
|
2947
|
-
.toolbar-strip.bottom{ border-top: 1px solid var(--sidebar-border); }
|
|
2951
|
+
.rdd-toolbar-strip.rdd-left { border-right: 1px solid var(--sidebar-border); }
|
|
2952
|
+
.rdd-toolbar-strip.rdd-right { border-left: 1px solid var(--sidebar-border); }
|
|
2953
|
+
.rdd-toolbar-strip.rdd-top { border-bottom: 1px solid var(--sidebar-border); }
|
|
2954
|
+
.rdd-toolbar-strip.rdd-bottom{ border-top: 1px solid var(--sidebar-border); }
|
|
2948
2955
|
|
|
2949
2956
|
/* Base button */
|
|
2950
|
-
.toolbar-btn {
|
|
2957
|
+
.rdd-toolbar-btn {
|
|
2951
2958
|
width: 36px;
|
|
2952
2959
|
height: 36px;
|
|
2953
2960
|
display: flex;
|
|
@@ -2964,18 +2971,18 @@ html:not(.enable-animations) *::after {
|
|
|
2964
2971
|
transition: color 0.15s ease, background-color 0.15s ease;
|
|
2965
2972
|
}
|
|
2966
2973
|
|
|
2967
|
-
.toolbar-btn:hover:not(:disabled) {
|
|
2974
|
+
.rdd-toolbar-btn:hover:not(:disabled) {
|
|
2968
2975
|
background-color: var(--toolbar-btn-hover-bg);
|
|
2969
2976
|
color: var(--sidebar-text-title);
|
|
2970
2977
|
}
|
|
2971
2978
|
|
|
2972
|
-
.toolbar-btn:disabled {
|
|
2979
|
+
.rdd-toolbar-btn:disabled {
|
|
2973
2980
|
opacity: 0.35;
|
|
2974
2981
|
cursor: not-allowed;
|
|
2975
2982
|
}
|
|
2976
2983
|
|
|
2977
2984
|
/* Radio active — accent bar on the outer edge */
|
|
2978
|
-
.toolbar-btn-radio.active {
|
|
2985
|
+
.rdd-toolbar-btn-radio.rdd-active {
|
|
2979
2986
|
color: var(--tab-icon-active);
|
|
2980
2987
|
background-color: var(--toolbar-btn-radio-active-bg);
|
|
2981
2988
|
box-shadow: var(--toolbar-btn-active-shadow);
|
|
@@ -2983,23 +2990,23 @@ html:not(.enable-animations) *::after {
|
|
|
2983
2990
|
transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
2984
2991
|
}
|
|
2985
2992
|
|
|
2986
|
-
.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; }
|
|
2987
|
-
.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; }
|
|
2988
|
-
.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; }
|
|
2989
|
-
.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; }
|
|
2993
|
+
.rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-radio.rdd-active { border-left: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
|
|
2994
|
+
.rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-radio.rdd-active { border-right: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
|
|
2995
|
+
.rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-radio.rdd-active { border-bottom: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
|
|
2996
|
+
.rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-radio.rdd-active { border-top: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
|
|
2990
2997
|
|
|
2991
2998
|
/* Toggle active — lighter tint, no directional border */
|
|
2992
|
-
.toolbar-btn-toggle.active {
|
|
2999
|
+
.rdd-toolbar-btn-toggle.rdd-active {
|
|
2993
3000
|
color: var(--tab-icon-active);
|
|
2994
3001
|
background-color: var(--toolbar-btn-toggle-active-bg);
|
|
2995
3002
|
}
|
|
2996
3003
|
|
|
2997
3004
|
/* Group button — corner triangle indicator shows a sub-tool family */
|
|
2998
|
-
.toolbar-btn-group {
|
|
3005
|
+
.rdd-toolbar-btn-group {
|
|
2999
3006
|
position: relative;
|
|
3000
3007
|
}
|
|
3001
3008
|
|
|
3002
|
-
.toolbar-btn-group::after {
|
|
3009
|
+
.rdd-toolbar-btn-group::after {
|
|
3003
3010
|
content: '';
|
|
3004
3011
|
position: absolute;
|
|
3005
3012
|
bottom: 4px;
|
|
@@ -3013,7 +3020,7 @@ html:not(.enable-animations) *::after {
|
|
|
3013
3020
|
}
|
|
3014
3021
|
|
|
3015
3022
|
/* Group active state — same directional accent as radio */
|
|
3016
|
-
.toolbar-btn-group.active {
|
|
3023
|
+
.rdd-toolbar-btn-group.rdd-active {
|
|
3017
3024
|
color: var(--tab-icon-active);
|
|
3018
3025
|
background-color: var(--toolbar-btn-radio-active-bg);
|
|
3019
3026
|
box-shadow: var(--toolbar-btn-active-shadow);
|
|
@@ -3021,14 +3028,14 @@ html:not(.enable-animations) *::after {
|
|
|
3021
3028
|
transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
3022
3029
|
}
|
|
3023
3030
|
|
|
3024
|
-
.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; }
|
|
3025
|
-
.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; }
|
|
3026
|
-
.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; }
|
|
3027
|
-
.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; }
|
|
3031
|
+
.rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-group.rdd-active { border-left: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
|
|
3032
|
+
.rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-group.rdd-active { border-right: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
|
|
3033
|
+
.rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-group.rdd-active { border-bottom: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
|
|
3034
|
+
.rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-group.rdd-active { border-top: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
|
|
3028
3035
|
|
|
3029
3036
|
/* Separators */
|
|
3030
|
-
.toolbar-strip.left .toolbar-separator,
|
|
3031
|
-
.toolbar-strip.right .toolbar-separator {
|
|
3037
|
+
.rdd-toolbar-strip.rdd-left .rdd-toolbar-separator,
|
|
3038
|
+
.rdd-toolbar-strip.rdd-right .rdd-toolbar-separator {
|
|
3032
3039
|
width: 24px;
|
|
3033
3040
|
height: 1px;
|
|
3034
3041
|
background-color: var(--toolbar-separator-color);
|
|
@@ -3037,8 +3044,8 @@ html:not(.enable-animations) *::after {
|
|
|
3037
3044
|
align-self: center;
|
|
3038
3045
|
}
|
|
3039
3046
|
|
|
3040
|
-
.toolbar-strip.top .toolbar-separator,
|
|
3041
|
-
.toolbar-strip.bottom .toolbar-separator {
|
|
3047
|
+
.rdd-toolbar-strip.rdd-top .rdd-toolbar-separator,
|
|
3048
|
+
.rdd-toolbar-strip.rdd-bottom .rdd-toolbar-separator {
|
|
3042
3049
|
height: 24px;
|
|
3043
3050
|
width: 1px;
|
|
3044
3051
|
background-color: var(--toolbar-separator-color);
|
|
@@ -3049,17 +3056,17 @@ html:not(.enable-animations) *::after {
|
|
|
3049
3056
|
|
|
3050
3057
|
/* Touch targets on coarse-pointer devices */
|
|
3051
3058
|
@media (pointer: coarse) {
|
|
3052
|
-
.toolbar-btn { width: 44px; height: 44px; }
|
|
3059
|
+
.rdd-toolbar-btn { width: 44px; height: 44px; }
|
|
3053
3060
|
}
|
|
3054
3061
|
|
|
3055
3062
|
/* ==========================================================================
|
|
3056
3063
|
TOOLBAR GROUP FLYOUT
|
|
3057
3064
|
========================================================================== */
|
|
3058
3065
|
|
|
3059
|
-
.toolbar-group-flyout {
|
|
3066
|
+
.rdd-toolbar-group-flyout {
|
|
3060
3067
|
position: fixed;
|
|
3061
|
-
z-index:
|
|
3062
|
-
background: var(--sidebar-bg, var(--bg-panel));
|
|
3068
|
+
z-index: calc(var(--rdd-z-base, 1000) + 7000);
|
|
3069
|
+
background: var(--sidebar-bg, var(--rdd-bg-panel));
|
|
3063
3070
|
border: 1px solid var(--sidebar-border);
|
|
3064
3071
|
border-radius: 8px;
|
|
3065
3072
|
padding: 4px;
|
|
@@ -3077,21 +3084,21 @@ html:not(.enable-animations) *::after {
|
|
|
3077
3084
|
}
|
|
3078
3085
|
|
|
3079
3086
|
/* Animation origin matches the edge closest to the toolbar button */
|
|
3080
|
-
.toolbar-group-flyout.left { transform-origin: top left; }
|
|
3081
|
-
.toolbar-group-flyout.right { transform-origin: top right; }
|
|
3082
|
-
.toolbar-group-flyout.top { transform-origin: top left; }
|
|
3083
|
-
.toolbar-group-flyout.bottom { transform-origin: bottom left; }
|
|
3087
|
+
.rdd-toolbar-group-flyout.rdd-left { transform-origin: top left; }
|
|
3088
|
+
.rdd-toolbar-group-flyout.rdd-right { transform-origin: top right; }
|
|
3089
|
+
.rdd-toolbar-group-flyout.rdd-top { transform-origin: top left; }
|
|
3090
|
+
.rdd-toolbar-group-flyout.rdd-bottom { transform-origin: bottom left; }
|
|
3084
3091
|
/* RTL: physical sides swap, so animation origin flips horizontally */
|
|
3085
|
-
[dir="rtl"] .toolbar-group-flyout.left { transform-origin: top right; }
|
|
3086
|
-
[dir="rtl"] .toolbar-group-flyout.right { transform-origin: top left; }
|
|
3087
|
-
[dir="rtl"] .toolbar-group-flyout.top { transform-origin: top right; }
|
|
3088
|
-
[dir="rtl"] .toolbar-group-flyout.bottom { transform-origin: bottom right; }
|
|
3092
|
+
[dir="rtl"] .rdd-toolbar-group-flyout.rdd-left { transform-origin: top right; }
|
|
3093
|
+
[dir="rtl"] .rdd-toolbar-group-flyout.rdd-right { transform-origin: top left; }
|
|
3094
|
+
[dir="rtl"] .rdd-toolbar-group-flyout.rdd-top { transform-origin: top right; }
|
|
3095
|
+
[dir="rtl"] .rdd-toolbar-group-flyout.rdd-bottom { transform-origin: bottom right; }
|
|
3089
3096
|
|
|
3090
|
-
[dir="rtl"] .toolbar-group-flyout-label {
|
|
3097
|
+
[dir="rtl"] .rdd-toolbar-group-flyout-label {
|
|
3091
3098
|
text-align: right;
|
|
3092
3099
|
}
|
|
3093
3100
|
|
|
3094
|
-
.toolbar-group-flyout-item {
|
|
3101
|
+
.rdd-toolbar-group-flyout-item {
|
|
3095
3102
|
display: flex;
|
|
3096
3103
|
align-items: center;
|
|
3097
3104
|
gap: 8px;
|
|
@@ -3099,7 +3106,7 @@ html:not(.enable-animations) *::after {
|
|
|
3099
3106
|
border: 1px solid transparent;
|
|
3100
3107
|
border-radius: 6px;
|
|
3101
3108
|
background: transparent;
|
|
3102
|
-
color: var(--sidebar-text-title, var(--text-primary));
|
|
3109
|
+
color: var(--sidebar-text-title, var(--rdd-text-primary));
|
|
3103
3110
|
cursor: pointer;
|
|
3104
3111
|
width: 100%;
|
|
3105
3112
|
text-align: start;
|
|
@@ -3109,22 +3116,22 @@ html:not(.enable-animations) *::after {
|
|
|
3109
3116
|
transition: background-color 0.1s ease, color 0.1s ease;
|
|
3110
3117
|
}
|
|
3111
3118
|
|
|
3112
|
-
.toolbar-group-flyout-item:hover:not(:disabled) {
|
|
3119
|
+
.rdd-toolbar-group-flyout-item:hover:not(:disabled) {
|
|
3113
3120
|
background-color: var(--toolbar-btn-hover-bg);
|
|
3114
|
-
color: var(--sidebar-text-title, var(--text-primary));
|
|
3121
|
+
color: var(--sidebar-text-title, var(--rdd-text-primary));
|
|
3115
3122
|
}
|
|
3116
3123
|
|
|
3117
|
-
.toolbar-group-flyout-item:disabled {
|
|
3124
|
+
.rdd-toolbar-group-flyout-item:disabled {
|
|
3118
3125
|
opacity: 0.35;
|
|
3119
3126
|
cursor: not-allowed;
|
|
3120
3127
|
}
|
|
3121
3128
|
|
|
3122
|
-
.toolbar-group-flyout-item.active {
|
|
3129
|
+
.rdd-toolbar-group-flyout-item.rdd-active {
|
|
3123
3130
|
color: var(--tab-icon-active);
|
|
3124
3131
|
background-color: var(--toolbar-btn-radio-active-bg);
|
|
3125
3132
|
}
|
|
3126
3133
|
|
|
3127
|
-
.toolbar-group-flyout-icon {
|
|
3134
|
+
.rdd-toolbar-group-flyout-icon {
|
|
3128
3135
|
flex-shrink: 0;
|
|
3129
3136
|
width: 16px;
|
|
3130
3137
|
height: 16px;
|
|
@@ -3134,21 +3141,21 @@ html:not(.enable-animations) *::after {
|
|
|
3134
3141
|
}
|
|
3135
3142
|
|
|
3136
3143
|
|
|
3137
|
-
.toolbar-group-flyout-label {
|
|
3144
|
+
.rdd-toolbar-group-flyout-label {
|
|
3138
3145
|
flex: 1;
|
|
3139
3146
|
white-space: nowrap;
|
|
3140
3147
|
overflow: hidden;
|
|
3141
3148
|
text-overflow: ellipsis;
|
|
3142
3149
|
}
|
|
3143
3150
|
|
|
3144
|
-
.toolbar-group-flyout-shortcut {
|
|
3151
|
+
.rdd-toolbar-group-flyout-shortcut {
|
|
3145
3152
|
flex-shrink: 0;
|
|
3146
3153
|
font-size: 0.6875rem;
|
|
3147
|
-
color: var(--text-secondary);
|
|
3154
|
+
color: var(--rdd-text-secondary);
|
|
3148
3155
|
opacity: 0.7;
|
|
3149
3156
|
}
|
|
3150
3157
|
|
|
3151
|
-
.toolbar-group-flyout-sep {
|
|
3158
|
+
.rdd-toolbar-group-flyout-sep {
|
|
3152
3159
|
height: 1px;
|
|
3153
3160
|
background: var(--toolbar-separator-color);
|
|
3154
3161
|
margin: 3px 4px;
|
|
@@ -3157,7 +3164,7 @@ html:not(.enable-animations) *::after {
|
|
|
3157
3164
|
|
|
3158
3165
|
|
|
3159
3166
|
/* Button base — used in ConfirmationForm and similar dialogs */
|
|
3160
|
-
.
|
|
3167
|
+
.rdd-btn {
|
|
3161
3168
|
display: inline-flex;
|
|
3162
3169
|
align-items: center;
|
|
3163
3170
|
justify-content: center;
|
|
@@ -3171,45 +3178,45 @@ html:not(.enable-animations) *::after {
|
|
|
3171
3178
|
line-height: 1.2;
|
|
3172
3179
|
}
|
|
3173
3180
|
|
|
3174
|
-
.
|
|
3181
|
+
.rdd-btn-sm {
|
|
3175
3182
|
padding: 0.25rem 0.75rem;
|
|
3176
3183
|
font-size: 0.8125rem;
|
|
3177
3184
|
}
|
|
3178
3185
|
|
|
3179
|
-
.
|
|
3186
|
+
.rdd-btn-outline {
|
|
3180
3187
|
background: transparent;
|
|
3181
|
-
border: 1px solid var(--text-secondary, #6c757d);
|
|
3182
|
-
color: var(--text-secondary, #6c757d);
|
|
3188
|
+
border: 1px solid var(--rdd-text-secondary, #6c757d);
|
|
3189
|
+
color: var(--rdd-text-secondary, #6c757d);
|
|
3183
3190
|
}
|
|
3184
3191
|
|
|
3185
|
-
.
|
|
3192
|
+
.rdd-btn-outline:hover {
|
|
3186
3193
|
background: rgba(255, 255, 255, 0.08);
|
|
3187
|
-
border-color: var(--text-primary, #f1f5f9);
|
|
3188
|
-
color: var(--text-primary, #f1f5f9);
|
|
3194
|
+
border-color: var(--rdd-text-primary, #f1f5f9);
|
|
3195
|
+
color: var(--rdd-text-primary, #f1f5f9);
|
|
3189
3196
|
}
|
|
3190
3197
|
|
|
3191
|
-
[data-color-scheme="light"] .
|
|
3198
|
+
[data-color-scheme="light"] .rdd-btn-outline {
|
|
3192
3199
|
border-color: #6c757d;
|
|
3193
3200
|
color: #6c757d;
|
|
3194
3201
|
}
|
|
3195
3202
|
|
|
3196
|
-
[data-color-scheme="light"] .
|
|
3203
|
+
[data-color-scheme="light"] .rdd-btn-outline:hover {
|
|
3197
3204
|
background: rgba(0, 0, 0, 0.05);
|
|
3198
3205
|
border-color: #495057;
|
|
3199
3206
|
color: #495057;
|
|
3200
3207
|
}
|
|
3201
3208
|
|
|
3202
|
-
.
|
|
3203
|
-
background: var(--accent-color, #38bdf8);
|
|
3204
|
-
border: 1px solid var(--accent-color, #38bdf8);
|
|
3209
|
+
.rdd-btn-primary {
|
|
3210
|
+
background: var(--rdd-accent-color, #38bdf8);
|
|
3211
|
+
border: 1px solid var(--rdd-accent-color, #38bdf8);
|
|
3205
3212
|
color: #090b11;
|
|
3206
3213
|
}
|
|
3207
3214
|
|
|
3208
|
-
.
|
|
3215
|
+
.rdd-btn-primary:hover {
|
|
3209
3216
|
filter: brightness(1.1);
|
|
3210
3217
|
}
|
|
3211
3218
|
|
|
3212
|
-
[data-color-scheme="light"] .
|
|
3219
|
+
[data-color-scheme="light"] .rdd-btn-primary {
|
|
3213
3220
|
color: #ffffff;
|
|
3214
3221
|
}
|
|
3215
3222
|
|
|
@@ -3219,43 +3226,43 @@ html:not(.enable-animations) *::after {
|
|
|
3219
3226
|
|
|
3220
3227
|
/* Phase 1C: touch-action — suppress scroll on drag handles,
|
|
3221
3228
|
allow horizontal pan on tab bar */
|
|
3222
|
-
.workspace-tab { touch-action: none; }
|
|
3223
|
-
.floating-window-titlebar { touch-action: none; }
|
|
3224
|
-
.resizer-bar { touch-action: none; }
|
|
3225
|
-
.resize-handle { touch-action: none; }
|
|
3229
|
+
.rdd-workspace-tab { touch-action: none; }
|
|
3230
|
+
.rdd-floating-window-titlebar { touch-action: none; }
|
|
3231
|
+
.rdd-resizer-bar { touch-action: none; }
|
|
3232
|
+
.rdd-resize-handle { touch-action: none; }
|
|
3226
3233
|
|
|
3227
3234
|
/* Phase 2A: Expand resizer hit area to 44px on touch devices */
|
|
3228
3235
|
@media (pointer: coarse) {
|
|
3229
|
-
.resizer-bar[style*="cursor: col-resize"]::before {
|
|
3236
|
+
.rdd-resizer-bar[style*="cursor: col-resize"]::before {
|
|
3230
3237
|
left: -20px;
|
|
3231
3238
|
width: 44px;
|
|
3232
3239
|
}
|
|
3233
|
-
.resizer-bar[style*="cursor: row-resize"]::before {
|
|
3240
|
+
.rdd-resizer-bar[style*="cursor: row-resize"]::before {
|
|
3234
3241
|
top: -32px;
|
|
3235
3242
|
height: 33px; /* 32px upward into safe content area, 0px downward into tab bar */
|
|
3236
3243
|
}
|
|
3237
3244
|
}
|
|
3238
3245
|
|
|
3239
3246
|
/* Phase 3B: 8-direction resize handles on floating windows */
|
|
3240
|
-
.resize-handle {
|
|
3247
|
+
.rdd-resize-handle {
|
|
3241
3248
|
position: absolute;
|
|
3242
3249
|
z-index: 30;
|
|
3243
3250
|
}
|
|
3244
3251
|
|
|
3245
3252
|
/* Edge handles */
|
|
3246
|
-
.resize-n { top: -4px; left: 16px; right: 16px; height: 8px; cursor: n-resize; }
|
|
3247
|
-
.resize-s { bottom: -4px; left: 16px; right: 16px; height: 8px; cursor: s-resize; }
|
|
3248
|
-
.resize-e { right: -4px; top: 16px; bottom: 16px; width: 8px; cursor: e-resize; }
|
|
3249
|
-
.resize-w { left: -4px; top: 16px; bottom: 16px; width: 8px; cursor: w-resize; }
|
|
3253
|
+
.rdd-resize-n { top: -4px; left: 16px; right: 16px; height: 8px; cursor: n-resize; }
|
|
3254
|
+
.rdd-resize-s { bottom: -4px; left: 16px; right: 16px; height: 8px; cursor: s-resize; }
|
|
3255
|
+
.rdd-resize-e { right: -4px; top: 16px; bottom: 16px; width: 8px; cursor: e-resize; }
|
|
3256
|
+
.rdd-resize-w { left: -4px; top: 16px; bottom: 16px; width: 8px; cursor: w-resize; }
|
|
3250
3257
|
|
|
3251
3258
|
/* Corner handles */
|
|
3252
|
-
.resize-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
|
|
3253
|
-
.resize-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
|
|
3254
|
-
.resize-sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
|
|
3255
|
-
.resize-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
|
|
3259
|
+
.rdd-resize-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
|
|
3260
|
+
.rdd-resize-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
|
|
3261
|
+
.rdd-resize-sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
|
|
3262
|
+
.rdd-resize-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
|
|
3256
3263
|
|
|
3257
3264
|
/* SE corner subtle visual indicator (preserve existing look) */
|
|
3258
|
-
.resize-se::after {
|
|
3265
|
+
.rdd-resize-se::after {
|
|
3259
3266
|
content: '';
|
|
3260
3267
|
position: absolute;
|
|
3261
3268
|
inset: 0;
|
|
@@ -3264,111 +3271,111 @@ html:not(.enable-animations) *::after {
|
|
|
3264
3271
|
|
|
3265
3272
|
/* Touch: larger 44px hit areas via padding */
|
|
3266
3273
|
@media (pointer: coarse) {
|
|
3267
|
-
.resize-ne, .resize-se, .resize-sw, .resize-nw {
|
|
3274
|
+
.rdd-resize-ne, .rdd-resize-se, .rdd-resize-sw, .rdd-resize-nw {
|
|
3268
3275
|
width: 28px;
|
|
3269
3276
|
height: 28px;
|
|
3270
3277
|
}
|
|
3271
|
-
.resize-n, .resize-s {
|
|
3278
|
+
.rdd-resize-n, .rdd-resize-s {
|
|
3272
3279
|
left: 28px;
|
|
3273
3280
|
right: 28px;
|
|
3274
3281
|
height: 12px;
|
|
3275
3282
|
top: -6px;
|
|
3276
3283
|
}
|
|
3277
|
-
.resize-s { top: auto; bottom: -6px; }
|
|
3278
|
-
.resize-e, .resize-w {
|
|
3284
|
+
.rdd-resize-s { top: auto; bottom: -6px; }
|
|
3285
|
+
.rdd-resize-e, .rdd-resize-w {
|
|
3279
3286
|
top: 28px;
|
|
3280
3287
|
bottom: 28px;
|
|
3281
3288
|
width: 12px;
|
|
3282
3289
|
right: -6px;
|
|
3283
3290
|
}
|
|
3284
|
-
.resize-w { right: auto; left: -6px; }
|
|
3291
|
+
.rdd-resize-w { right: auto; left: -6px; }
|
|
3285
3292
|
}
|
|
3286
3293
|
|
|
3287
3294
|
/* Phase 2B: Adaptive density for coarse-pointer (touch) devices */
|
|
3288
3295
|
@media (pointer: coarse) {
|
|
3289
3296
|
/* Taller tabs for touch targets */
|
|
3290
|
-
.workspace-tab {
|
|
3297
|
+
.rdd-workspace-tab {
|
|
3291
3298
|
min-height: 44px !important;
|
|
3292
3299
|
height: 44px !important;
|
|
3293
3300
|
padding: 0 12px 0 14px !important;
|
|
3294
3301
|
}
|
|
3295
3302
|
|
|
3296
3303
|
/* Always-visible close button (no hover-to-reveal) */
|
|
3297
|
-
.workspace-tab .close-tab-x {
|
|
3304
|
+
.rdd-workspace-tab .rdd-close-tab-x {
|
|
3298
3305
|
opacity: 0.8 !important;
|
|
3299
3306
|
width: 24px !important;
|
|
3300
3307
|
height: 24px !important;
|
|
3301
3308
|
}
|
|
3302
3309
|
|
|
3303
3310
|
/* Larger titlebar action buttons */
|
|
3304
|
-
.custom-tab-btn {
|
|
3311
|
+
.rdd-custom-tab-btn {
|
|
3305
3312
|
width: 28px !important;
|
|
3306
3313
|
height: 28px !important;
|
|
3307
3314
|
}
|
|
3308
3315
|
|
|
3309
3316
|
/* Taller taskbar items */
|
|
3310
|
-
.taskbar-glassmorphic-item {
|
|
3317
|
+
.rdd-taskbar-glassmorphic-item {
|
|
3311
3318
|
width: 48px !important;
|
|
3312
3319
|
height: 48px !important;
|
|
3313
3320
|
}
|
|
3314
3321
|
|
|
3315
3322
|
/* Wider tab min-width on touch */
|
|
3316
|
-
.workspace-tab { min-width: 88px; }
|
|
3323
|
+
.rdd-workspace-tab { min-width: 88px; }
|
|
3317
3324
|
|
|
3318
3325
|
/* Wider scroll arrows on touch */
|
|
3319
|
-
.tab-scroll-btn { width: 32px; height: 44px; }
|
|
3326
|
+
.rdd-tab-scroll-btn { width: 32px; height: 44px; }
|
|
3320
3327
|
|
|
3321
3328
|
/* Keep top edge trigger thin even on touch — avoids collision with tab bar */
|
|
3322
|
-
.edge-trigger-top { height: 14px; }
|
|
3329
|
+
.rdd-edge-trigger-top { height: 14px; }
|
|
3323
3330
|
}
|
|
3324
3331
|
|
|
3325
3332
|
/* Phase 4A: Long-press active animation (visual feedback during 300ms hold) */
|
|
3326
|
-
.long-press-active {
|
|
3333
|
+
.rdd-long-press-active {
|
|
3327
3334
|
animation: rdd-long-press-pulse 0.25s ease-out forwards;
|
|
3328
3335
|
transform-origin: center;
|
|
3329
3336
|
}
|
|
3330
3337
|
|
|
3331
3338
|
@keyframes rdd-long-press-pulse {
|
|
3332
|
-
0% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-glow, rgba(56,189,248,0.3)); }
|
|
3333
|
-
60% { transform: scale(1.04); box-shadow: 0 0 0 6px var(--accent-glow, rgba(56,189,248,0.15)); }
|
|
3334
|
-
100% { transform: scale(1.02); box-shadow: 0 0 0 4px var(--accent-glow, rgba(56,189,248,0.1)); }
|
|
3339
|
+
0% { transform: scale(1); box-shadow: 0 0 0 0 var(--rdd-accent-glow, rgba(56,189,248,0.3)); }
|
|
3340
|
+
60% { transform: scale(1.04); box-shadow: 0 0 0 6px var(--rdd-accent-glow, rgba(56,189,248,0.15)); }
|
|
3341
|
+
100% { transform: scale(1.02); box-shadow: 0 0 0 4px var(--rdd-accent-glow, rgba(56,189,248,0.1)); }
|
|
3335
3342
|
}
|
|
3336
3343
|
|
|
3337
|
-
/* Phase 4C: Tab bar horizontal scroll (handled by existing .tab-headers-container overflow-x: auto) */
|
|
3344
|
+
/* Phase 4C: Tab bar horizontal scroll (handled by existing .rdd-tab-headers-container overflow-x: auto) */
|
|
3338
3345
|
/* Note: touch-action and -webkit-overflow-scrolling intentionally omitted — they cause iOS Safari
|
|
3339
3346
|
to fire pointercancel before the 300ms long-press timer can activate tab drag */
|
|
3340
|
-
.tab-headers-container::-webkit-scrollbar { display: none; }
|
|
3347
|
+
.rdd-tab-headers-container::-webkit-scrollbar { display: none; }
|
|
3341
3348
|
|
|
3342
3349
|
/* ==========================================================================
|
|
3343
3350
|
PANEL OVERLAY — Per-skin token overrides
|
|
3344
3351
|
========================================================================== */
|
|
3345
3352
|
|
|
3346
3353
|
[data-workspace-skin="vscode"] {
|
|
3347
|
-
--panel-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.12);
|
|
3354
|
+
--rdd-panel-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.12);
|
|
3348
3355
|
}
|
|
3349
3356
|
|
|
3350
3357
|
[data-workspace-skin="macos"] {
|
|
3351
|
-
--panel-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.18);
|
|
3358
|
+
--rdd-panel-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.18);
|
|
3352
3359
|
}
|
|
3353
3360
|
|
|
3354
3361
|
[data-workspace-skin="slate"] {
|
|
3355
|
-
--panel-toolbar-btn-active-color: #60a5fa;
|
|
3356
|
-
--panel-toolbar-btn-active-bg: rgba(96, 165, 250, 0.15);
|
|
3362
|
+
--rdd-panel-toolbar-btn-active-color: #60a5fa;
|
|
3363
|
+
--rdd-panel-toolbar-btn-active-bg: rgba(96, 165, 250, 0.15);
|
|
3357
3364
|
}
|
|
3358
3365
|
|
|
3359
3366
|
[data-workspace-skin="nord"] {
|
|
3360
|
-
--panel-toolbar-btn-active-color: #88c0d0;
|
|
3361
|
-
--panel-toolbar-btn-active-bg: rgba(136, 192, 208, 0.15);
|
|
3367
|
+
--rdd-panel-toolbar-btn-active-color: #88c0d0;
|
|
3368
|
+
--rdd-panel-toolbar-btn-active-bg: rgba(136, 192, 208, 0.15);
|
|
3362
3369
|
}
|
|
3363
3370
|
|
|
3364
3371
|
[data-workspace-skin="obsidian"] {
|
|
3365
|
-
--panel-toolbar-btn-active-color: #a78bfa;
|
|
3366
|
-
--panel-toolbar-btn-active-bg: rgba(167, 139, 250, 0.15);
|
|
3372
|
+
--rdd-panel-toolbar-btn-active-color: #a78bfa;
|
|
3373
|
+
--rdd-panel-toolbar-btn-active-bg: rgba(167, 139, 250, 0.15);
|
|
3367
3374
|
}
|
|
3368
3375
|
|
|
3369
3376
|
[data-workspace-skin="tokyo"] {
|
|
3370
|
-
--panel-toolbar-btn-active-color: #7aa2f7;
|
|
3371
|
-
--panel-toolbar-btn-active-bg: rgba(122, 162, 247, 0.15);
|
|
3377
|
+
--rdd-panel-toolbar-btn-active-color: #7aa2f7;
|
|
3378
|
+
--rdd-panel-toolbar-btn-active-bg: rgba(122, 162, 247, 0.15);
|
|
3372
3379
|
}
|
|
3373
3380
|
|
|
3374
3381
|
/* ==========================================================================
|
|
@@ -3376,7 +3383,7 @@ html:not(.enable-animations) *::after {
|
|
|
3376
3383
|
========================================================================== */
|
|
3377
3384
|
|
|
3378
3385
|
/* ── Root container ── */
|
|
3379
|
-
.
|
|
3386
|
+
.rdd-panel-overlay-root {
|
|
3380
3387
|
position: relative;
|
|
3381
3388
|
width: 100%;
|
|
3382
3389
|
height: 100%;
|
|
@@ -3384,198 +3391,198 @@ html:not(.enable-animations) *::after {
|
|
|
3384
3391
|
}
|
|
3385
3392
|
|
|
3386
3393
|
/* ── Toolbar container ── */
|
|
3387
|
-
.
|
|
3394
|
+
.rdd-panel-toolbar {
|
|
3388
3395
|
position: absolute;
|
|
3389
3396
|
z-index: 5;
|
|
3390
3397
|
pointer-events: none;
|
|
3391
3398
|
display: flex;
|
|
3392
3399
|
align-items: center;
|
|
3393
|
-
gap: var(--panel-toolbar-gap, 4px);
|
|
3394
|
-
padding: var(--panel-toolbar-padding, 8px);
|
|
3400
|
+
gap: var(--rdd-panel-toolbar-gap, 4px);
|
|
3401
|
+
padding: var(--rdd-panel-toolbar-padding, 8px);
|
|
3395
3402
|
box-sizing: border-box;
|
|
3396
3403
|
}
|
|
3397
3404
|
|
|
3398
|
-
.
|
|
3399
|
-
.
|
|
3405
|
+
.rdd-panel-toolbar--top,
|
|
3406
|
+
.rdd-panel-toolbar--bottom {
|
|
3400
3407
|
flex-direction: row;
|
|
3401
3408
|
}
|
|
3402
3409
|
|
|
3403
|
-
.
|
|
3404
|
-
.
|
|
3410
|
+
.rdd-panel-toolbar--left,
|
|
3411
|
+
.rdd-panel-toolbar--right {
|
|
3405
3412
|
flex-direction: column;
|
|
3406
3413
|
}
|
|
3407
3414
|
|
|
3408
3415
|
/* Restore pointer-events on every direct child */
|
|
3409
|
-
.
|
|
3416
|
+
.rdd-panel-toolbar > * {
|
|
3410
3417
|
pointer-events: auto;
|
|
3411
3418
|
}
|
|
3412
3419
|
|
|
3413
3420
|
/* ── Toolbar button (shared by ToolbarButton + ToolbarToggle) ── */
|
|
3414
|
-
.
|
|
3421
|
+
.rdd-panel-toolbar-btn {
|
|
3415
3422
|
display: inline-flex;
|
|
3416
3423
|
align-items: center;
|
|
3417
3424
|
justify-content: center;
|
|
3418
|
-
width: var(--panel-toolbar-btn-size, 32px);
|
|
3419
|
-
height: var(--panel-toolbar-btn-size, 32px);
|
|
3425
|
+
width: var(--rdd-panel-toolbar-btn-size, 32px);
|
|
3426
|
+
height: var(--rdd-panel-toolbar-btn-size, 32px);
|
|
3420
3427
|
flex-shrink: 0;
|
|
3421
|
-
border-radius: var(--panel-toolbar-btn-radius, 6px);
|
|
3428
|
+
border-radius: var(--rdd-panel-toolbar-btn-radius, 6px);
|
|
3422
3429
|
border: none;
|
|
3423
3430
|
background: transparent;
|
|
3424
|
-
color: var(--panel-toolbar-fg, rgba(255, 255, 255, 0.65));
|
|
3431
|
+
color: var(--rdd-panel-toolbar-fg, rgba(255, 255, 255, 0.65));
|
|
3425
3432
|
cursor: pointer;
|
|
3426
3433
|
padding: 0;
|
|
3427
3434
|
transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease, border-color 0.12s ease;
|
|
3428
3435
|
}
|
|
3429
3436
|
|
|
3430
|
-
.
|
|
3431
|
-
background: var(--panel-toolbar-btn-hover-bg, rgba(255, 255, 255, 0.15));
|
|
3432
|
-
color: var(--panel-toolbar-fg-hover, rgba(255, 255, 255, 0.95));
|
|
3437
|
+
.rdd-panel-toolbar-btn:hover:not(:disabled) {
|
|
3438
|
+
background: var(--rdd-panel-toolbar-btn-hover-bg, rgba(255, 255, 255, 0.15));
|
|
3439
|
+
color: var(--rdd-panel-toolbar-fg-hover, rgba(255, 255, 255, 0.95));
|
|
3433
3440
|
transform: scale(1.07);
|
|
3434
3441
|
}
|
|
3435
3442
|
|
|
3436
|
-
.
|
|
3443
|
+
.rdd-panel-toolbar-btn:active:not(:disabled) {
|
|
3437
3444
|
transform: scale(0.94);
|
|
3438
3445
|
}
|
|
3439
3446
|
|
|
3440
|
-
.
|
|
3441
|
-
background: var(--panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.14));
|
|
3442
|
-
color: var(--panel-toolbar-btn-active-color, #38bdf8);
|
|
3447
|
+
.rdd-panel-toolbar-btn--active {
|
|
3448
|
+
background: var(--rdd-panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.14));
|
|
3449
|
+
color: var(--rdd-panel-toolbar-btn-active-color, #38bdf8);
|
|
3443
3450
|
}
|
|
3444
3451
|
|
|
3445
|
-
.
|
|
3446
|
-
background: var(--panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.22));
|
|
3452
|
+
.rdd-panel-toolbar-btn--active:hover:not(:disabled) {
|
|
3453
|
+
background: var(--rdd-panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.22));
|
|
3447
3454
|
}
|
|
3448
3455
|
|
|
3449
|
-
.
|
|
3456
|
+
.rdd-panel-toolbar-btn:disabled {
|
|
3450
3457
|
opacity: 0.38;
|
|
3451
3458
|
cursor: not-allowed;
|
|
3452
3459
|
}
|
|
3453
3460
|
|
|
3454
3461
|
/* ── Toolbar strip variants ── */
|
|
3455
|
-
.
|
|
3462
|
+
.rdd-panel-toolbar[data-variant="frosted"] {
|
|
3456
3463
|
background: rgba(15, 20, 30, 0.55);
|
|
3457
3464
|
backdrop-filter: blur(10px) saturate(150%);
|
|
3458
3465
|
-webkit-backdrop-filter: blur(10px) saturate(150%);
|
|
3459
3466
|
}
|
|
3460
|
-
.
|
|
3461
|
-
background: var(--bg-tab-bar, #0d0f16);
|
|
3467
|
+
.rdd-panel-toolbar[data-variant="solid"] {
|
|
3468
|
+
background: var(--rdd-bg-tab-bar, #0d0f16);
|
|
3462
3469
|
}
|
|
3463
|
-
[data-color-scheme="light"] .
|
|
3470
|
+
[data-color-scheme="light"] .rdd-panel-toolbar[data-variant="frosted"] {
|
|
3464
3471
|
background: rgba(233, 236, 239, 0.72);
|
|
3465
3472
|
}
|
|
3466
|
-
.
|
|
3467
|
-
.
|
|
3468
|
-
border-bottom: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
3473
|
+
.rdd-panel-toolbar--top[data-variant="frosted"],
|
|
3474
|
+
.rdd-panel-toolbar--top[data-variant="solid"] {
|
|
3475
|
+
border-bottom: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
3469
3476
|
}
|
|
3470
|
-
.
|
|
3471
|
-
.
|
|
3472
|
-
border-top: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
3477
|
+
.rdd-panel-toolbar--bottom[data-variant="frosted"],
|
|
3478
|
+
.rdd-panel-toolbar--bottom[data-variant="solid"] {
|
|
3479
|
+
border-top: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
3473
3480
|
}
|
|
3474
|
-
.
|
|
3475
|
-
.
|
|
3476
|
-
border-right: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
3481
|
+
.rdd-panel-toolbar--left[data-variant="frosted"],
|
|
3482
|
+
.rdd-panel-toolbar--left[data-variant="solid"] {
|
|
3483
|
+
border-right: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
3477
3484
|
}
|
|
3478
|
-
.
|
|
3479
|
-
.
|
|
3480
|
-
border-left: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
3485
|
+
.rdd-panel-toolbar--right[data-variant="frosted"],
|
|
3486
|
+
.rdd-panel-toolbar--right[data-variant="solid"] {
|
|
3487
|
+
border-left: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
3481
3488
|
}
|
|
3482
3489
|
|
|
3483
3490
|
/* ── Button variants — toolbar-level default ── */
|
|
3484
3491
|
|
|
3485
3492
|
/* soft */
|
|
3486
|
-
.
|
|
3487
|
-
.
|
|
3493
|
+
.rdd-panel-toolbar[data-btn-variant="soft"] .rdd-panel-toolbar-btn,
|
|
3494
|
+
.rdd-panel-toolbar-btn[data-variant="soft"] {
|
|
3488
3495
|
background: rgba(255, 255, 255, 0.06);
|
|
3489
3496
|
}
|
|
3490
|
-
.
|
|
3491
|
-
.
|
|
3497
|
+
.rdd-panel-toolbar[data-btn-variant="soft"] .rdd-panel-toolbar-btn:hover:not(:disabled),
|
|
3498
|
+
.rdd-panel-toolbar-btn[data-variant="soft"]:hover:not(:disabled) {
|
|
3492
3499
|
background: rgba(255, 255, 255, 0.15);
|
|
3493
3500
|
}
|
|
3494
|
-
[data-color-scheme="light"] .
|
|
3495
|
-
[data-color-scheme="light"] .
|
|
3501
|
+
[data-color-scheme="light"] .rdd-panel-toolbar[data-btn-variant="soft"] .rdd-panel-toolbar-btn,
|
|
3502
|
+
[data-color-scheme="light"] .rdd-panel-toolbar-btn[data-variant="soft"] {
|
|
3496
3503
|
background: rgba(0, 0, 0, 0.04);
|
|
3497
3504
|
}
|
|
3498
|
-
[data-color-scheme="light"] .
|
|
3499
|
-
[data-color-scheme="light"] .
|
|
3505
|
+
[data-color-scheme="light"] .rdd-panel-toolbar[data-btn-variant="soft"] .rdd-panel-toolbar-btn:hover:not(:disabled),
|
|
3506
|
+
[data-color-scheme="light"] .rdd-panel-toolbar-btn[data-variant="soft"]:hover:not(:disabled) {
|
|
3500
3507
|
background: rgba(0, 0, 0, 0.08);
|
|
3501
3508
|
}
|
|
3502
3509
|
|
|
3503
3510
|
/* outlined */
|
|
3504
|
-
.
|
|
3505
|
-
.
|
|
3506
|
-
border: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.18));
|
|
3511
|
+
.rdd-panel-toolbar[data-btn-variant="outlined"] .rdd-panel-toolbar-btn,
|
|
3512
|
+
.rdd-panel-toolbar-btn[data-variant="outlined"] {
|
|
3513
|
+
border: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.18));
|
|
3507
3514
|
}
|
|
3508
|
-
.
|
|
3509
|
-
.
|
|
3515
|
+
.rdd-panel-toolbar[data-btn-variant="outlined"] .rdd-panel-toolbar-btn:hover:not(:disabled),
|
|
3516
|
+
.rdd-panel-toolbar-btn[data-variant="outlined"]:hover:not(:disabled) {
|
|
3510
3517
|
background: rgba(255, 255, 255, 0.12);
|
|
3511
3518
|
border-color: rgba(255, 255, 255, 0.38);
|
|
3512
3519
|
}
|
|
3513
|
-
[data-color-scheme="light"] .
|
|
3514
|
-
[data-color-scheme="light"] .
|
|
3520
|
+
[data-color-scheme="light"] .rdd-panel-toolbar[data-btn-variant="outlined"] .rdd-panel-toolbar-btn:hover:not(:disabled),
|
|
3521
|
+
[data-color-scheme="light"] .rdd-panel-toolbar-btn[data-variant="outlined"]:hover:not(:disabled) {
|
|
3515
3522
|
background: rgba(0, 0, 0, 0.06);
|
|
3516
3523
|
border-color: rgba(0, 0, 0, 0.25);
|
|
3517
3524
|
}
|
|
3518
3525
|
|
|
3519
3526
|
/* filled */
|
|
3520
|
-
.
|
|
3521
|
-
.
|
|
3522
|
-
background: var(--panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.2));
|
|
3523
|
-
color: var(--panel-toolbar-btn-active-color, #38bdf8);
|
|
3524
|
-
border: 1px solid var(--panel-toolbar-btn-active-color, #38bdf8);
|
|
3525
|
-
}
|
|
3526
|
-
.
|
|
3527
|
-
.
|
|
3528
|
-
background: var(--panel-toolbar-btn-active-color, #38bdf8);
|
|
3527
|
+
.rdd-panel-toolbar[data-btn-variant="filled"] .rdd-panel-toolbar-btn,
|
|
3528
|
+
.rdd-panel-toolbar-btn[data-variant="filled"] {
|
|
3529
|
+
background: var(--rdd-panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.2));
|
|
3530
|
+
color: var(--rdd-panel-toolbar-btn-active-color, #38bdf8);
|
|
3531
|
+
border: 1px solid var(--rdd-panel-toolbar-btn-active-color, #38bdf8);
|
|
3532
|
+
}
|
|
3533
|
+
.rdd-panel-toolbar[data-btn-variant="filled"] .rdd-panel-toolbar-btn:hover:not(:disabled),
|
|
3534
|
+
.rdd-panel-toolbar-btn[data-variant="filled"]:hover:not(:disabled) {
|
|
3535
|
+
background: var(--rdd-panel-toolbar-btn-active-color, #38bdf8);
|
|
3529
3536
|
color: #000;
|
|
3530
3537
|
border-color: transparent;
|
|
3531
3538
|
}
|
|
3532
3539
|
|
|
3533
3540
|
/* ── Separator ── */
|
|
3534
|
-
.
|
|
3541
|
+
.rdd-panel-toolbar__sep {
|
|
3535
3542
|
flex-shrink: 0;
|
|
3536
|
-
background: var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
3543
|
+
background: var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
|
|
3537
3544
|
align-self: center;
|
|
3538
3545
|
}
|
|
3539
3546
|
|
|
3540
|
-
.
|
|
3541
|
-
.
|
|
3547
|
+
.rdd-panel-toolbar--top .rdd-panel-toolbar__sep,
|
|
3548
|
+
.rdd-panel-toolbar--bottom .rdd-panel-toolbar__sep {
|
|
3542
3549
|
width: 1px;
|
|
3543
3550
|
height: 18px;
|
|
3544
3551
|
}
|
|
3545
3552
|
|
|
3546
|
-
.
|
|
3547
|
-
.
|
|
3553
|
+
.rdd-panel-toolbar--left .rdd-panel-toolbar__sep,
|
|
3554
|
+
.rdd-panel-toolbar--right .rdd-panel-toolbar__sep {
|
|
3548
3555
|
height: 1px;
|
|
3549
3556
|
width: 18px;
|
|
3550
3557
|
}
|
|
3551
3558
|
|
|
3552
3559
|
/* ── Spacer — pushes subsequent items to the opposite end ── */
|
|
3553
|
-
.
|
|
3560
|
+
.rdd-panel-toolbar__spacer {
|
|
3554
3561
|
flex: 1;
|
|
3555
3562
|
pointer-events: none;
|
|
3556
3563
|
}
|
|
3557
3564
|
|
|
3558
3565
|
/* ── ToolbarItem wrapper (restores pointer-events for custom controls) ── */
|
|
3559
|
-
.
|
|
3566
|
+
.rdd-panel-toolbar__item {
|
|
3560
3567
|
display: inline-flex;
|
|
3561
3568
|
align-items: center;
|
|
3562
3569
|
pointer-events: auto;
|
|
3563
3570
|
}
|
|
3564
3571
|
|
|
3565
3572
|
/* ── ToolbarCenter — absolutely centered, independent of left/right widths ── */
|
|
3566
|
-
.
|
|
3573
|
+
.rdd-panel-toolbar__center {
|
|
3567
3574
|
position: absolute;
|
|
3568
3575
|
display: flex;
|
|
3569
3576
|
align-items: center;
|
|
3570
|
-
gap: var(--panel-toolbar-gap, 4px);
|
|
3577
|
+
gap: var(--rdd-panel-toolbar-gap, 4px);
|
|
3571
3578
|
pointer-events: none;
|
|
3572
3579
|
}
|
|
3573
|
-
.
|
|
3580
|
+
.rdd-panel-toolbar__center > * {
|
|
3574
3581
|
pointer-events: auto;
|
|
3575
3582
|
}
|
|
3576
3583
|
/* Horizontal toolbars: center horizontally */
|
|
3577
|
-
.
|
|
3578
|
-
.
|
|
3584
|
+
.rdd-panel-toolbar--top .rdd-panel-toolbar__center,
|
|
3585
|
+
.rdd-panel-toolbar--bottom .rdd-panel-toolbar__center {
|
|
3579
3586
|
flex-direction: row;
|
|
3580
3587
|
top: 0;
|
|
3581
3588
|
bottom: 0;
|
|
@@ -3583,8 +3590,8 @@ html:not(.enable-animations) *::after {
|
|
|
3583
3590
|
transform: translateX(-50%);
|
|
3584
3591
|
}
|
|
3585
3592
|
/* Vertical toolbars: center vertically */
|
|
3586
|
-
.
|
|
3587
|
-
.
|
|
3593
|
+
.rdd-panel-toolbar--left .rdd-panel-toolbar__center,
|
|
3594
|
+
.rdd-panel-toolbar--right .rdd-panel-toolbar__center {
|
|
3588
3595
|
flex-direction: column;
|
|
3589
3596
|
left: 0;
|
|
3590
3597
|
right: 0;
|
|
@@ -3593,17 +3600,17 @@ html:not(.enable-animations) *::after {
|
|
|
3593
3600
|
}
|
|
3594
3601
|
|
|
3595
3602
|
/* ── ToolbarSearchInput ── */
|
|
3596
|
-
.
|
|
3603
|
+
.rdd-panel-toolbar-search {
|
|
3597
3604
|
display: inline-flex;
|
|
3598
3605
|
align-items: center;
|
|
3599
3606
|
gap: 4px;
|
|
3600
3607
|
}
|
|
3601
3608
|
|
|
3602
|
-
.
|
|
3603
|
-
height: var(--panel-toolbar-btn-size, 28px);
|
|
3609
|
+
.rdd-panel-toolbar-search__input {
|
|
3610
|
+
height: var(--rdd-panel-toolbar-btn-size, 28px);
|
|
3604
3611
|
width: 200px;
|
|
3605
|
-
border: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.15));
|
|
3606
|
-
border-radius: var(--panel-toolbar-btn-radius, 6px);
|
|
3612
|
+
border: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.15));
|
|
3613
|
+
border-radius: var(--rdd-panel-toolbar-btn-radius, 6px);
|
|
3607
3614
|
background: rgba(0, 0, 0, 0.18);
|
|
3608
3615
|
color: inherit;
|
|
3609
3616
|
padding: 0 8px;
|
|
@@ -3612,25 +3619,25 @@ html:not(.enable-animations) *::after {
|
|
|
3612
3619
|
box-sizing: border-box;
|
|
3613
3620
|
}
|
|
3614
3621
|
|
|
3615
|
-
.
|
|
3622
|
+
.rdd-panel-toolbar-search__input::placeholder {
|
|
3616
3623
|
opacity: 0.45;
|
|
3617
3624
|
}
|
|
3618
3625
|
|
|
3619
|
-
.
|
|
3620
|
-
border-color: var(--panel-toolbar-btn-active-color, #38bdf8);
|
|
3626
|
+
.rdd-panel-toolbar-search__input:focus {
|
|
3627
|
+
border-color: var(--rdd-panel-toolbar-btn-active-color, #38bdf8);
|
|
3621
3628
|
}
|
|
3622
3629
|
|
|
3623
|
-
.
|
|
3624
|
-
background: var(--panel-float-bg, rgba(22, 24, 34, 0.95));
|
|
3625
|
-
border: 1px solid var(--panel-float-border, rgba(255, 255, 255, 0.1));
|
|
3626
|
-
border-radius: var(--panel-float-radius, 8px);
|
|
3627
|
-
box-shadow: var(--panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
|
|
3630
|
+
.rdd-panel-toolbar-search__dropdown {
|
|
3631
|
+
background: var(--rdd-panel-float-bg, rgba(22, 24, 34, 0.95));
|
|
3632
|
+
border: 1px solid var(--rdd-panel-float-border, rgba(255, 255, 255, 0.1));
|
|
3633
|
+
border-radius: var(--rdd-panel-float-radius, 8px);
|
|
3634
|
+
box-shadow: var(--rdd-panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
|
|
3628
3635
|
overflow: hidden;
|
|
3629
3636
|
max-height: 300px;
|
|
3630
3637
|
overflow-y: auto;
|
|
3631
3638
|
}
|
|
3632
3639
|
|
|
3633
|
-
.
|
|
3640
|
+
.rdd-panel-toolbar-search__group {
|
|
3634
3641
|
padding: 6px 12px 2px;
|
|
3635
3642
|
font-size: 10px;
|
|
3636
3643
|
font-weight: 600;
|
|
@@ -3639,7 +3646,7 @@ html:not(.enable-animations) *::after {
|
|
|
3639
3646
|
opacity: 0.45;
|
|
3640
3647
|
}
|
|
3641
3648
|
|
|
3642
|
-
.
|
|
3649
|
+
.rdd-panel-toolbar-search__item {
|
|
3643
3650
|
display: flex;
|
|
3644
3651
|
align-items: center;
|
|
3645
3652
|
gap: 8px;
|
|
@@ -3653,68 +3660,68 @@ html:not(.enable-animations) *::after {
|
|
|
3653
3660
|
font-size: 12px;
|
|
3654
3661
|
}
|
|
3655
3662
|
|
|
3656
|
-
.
|
|
3657
|
-
background: var(--panel-toolbar-btn-hover-bg, rgba(255, 255, 255, 0.08));
|
|
3663
|
+
.rdd-panel-toolbar-search__item:hover {
|
|
3664
|
+
background: var(--rdd-panel-toolbar-btn-hover-bg, rgba(255, 255, 255, 0.08));
|
|
3658
3665
|
}
|
|
3659
3666
|
|
|
3660
|
-
.
|
|
3661
|
-
.
|
|
3662
|
-
.
|
|
3667
|
+
.rdd-panel-toolbar-search__item-icon { flex-shrink: 0; opacity: 0.7; }
|
|
3668
|
+
.rdd-panel-toolbar-search__item-label { flex: 1; }
|
|
3669
|
+
.rdd-panel-toolbar-search__item-desc { opacity: 0.45; font-size: 11px; }
|
|
3663
3670
|
|
|
3664
3671
|
/* ── Floating window ── */
|
|
3665
|
-
.
|
|
3672
|
+
.rdd-panel-float {
|
|
3666
3673
|
position: absolute;
|
|
3667
3674
|
min-width: 120px;
|
|
3668
3675
|
min-height: 60px;
|
|
3669
3676
|
display: flex;
|
|
3670
3677
|
flex-direction: column;
|
|
3671
|
-
border-radius: var(--panel-float-radius, 8px);
|
|
3672
|
-
background: var(--panel-float-bg, rgba(22, 24, 34, 0.92));
|
|
3673
|
-
border: 1px solid var(--panel-float-border, rgba(255, 255, 255, 0.1));
|
|
3674
|
-
box-shadow: var(--panel-float-shadow, 0 4px 16px rgba(0, 0, 0, 0.35));
|
|
3678
|
+
border-radius: var(--rdd-panel-float-radius, 8px);
|
|
3679
|
+
background: var(--rdd-panel-float-bg, rgba(22, 24, 34, 0.92));
|
|
3680
|
+
border: 1px solid var(--rdd-panel-float-border, rgba(255, 255, 255, 0.1));
|
|
3681
|
+
box-shadow: var(--rdd-panel-float-shadow, 0 4px 16px rgba(0, 0, 0, 0.35));
|
|
3675
3682
|
backdrop-filter: blur(8px);
|
|
3676
3683
|
overflow: hidden;
|
|
3677
3684
|
}
|
|
3678
3685
|
|
|
3679
|
-
.
|
|
3680
|
-
box-shadow: var(--panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
|
|
3686
|
+
.rdd-panel-float--active {
|
|
3687
|
+
box-shadow: var(--rdd-panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
|
|
3681
3688
|
}
|
|
3682
3689
|
|
|
3683
|
-
.
|
|
3690
|
+
.rdd-panel-float__header {
|
|
3684
3691
|
display: flex;
|
|
3685
3692
|
align-items: center;
|
|
3686
3693
|
gap: 6px;
|
|
3687
3694
|
padding: 0 8px;
|
|
3688
3695
|
height: 28px;
|
|
3689
3696
|
flex-shrink: 0;
|
|
3690
|
-
background: var(--panel-float-header-bg, rgba(255, 255, 255, 0.04));
|
|
3697
|
+
background: var(--rdd-panel-float-header-bg, rgba(255, 255, 255, 0.04));
|
|
3691
3698
|
cursor: grab;
|
|
3692
3699
|
user-select: none;
|
|
3693
3700
|
}
|
|
3694
3701
|
|
|
3695
|
-
.
|
|
3702
|
+
.rdd-panel-float__header:active {
|
|
3696
3703
|
cursor: grabbing;
|
|
3697
3704
|
}
|
|
3698
3705
|
|
|
3699
|
-
.
|
|
3700
|
-
background: var(--panel-float-header-bg-active, rgba(56, 189, 248, 0.08));
|
|
3706
|
+
.rdd-panel-float--active .rdd-panel-float__header {
|
|
3707
|
+
background: var(--rdd-panel-float-header-bg-active, rgba(56, 189, 248, 0.08));
|
|
3701
3708
|
}
|
|
3702
3709
|
|
|
3703
|
-
.
|
|
3710
|
+
.rdd-panel-float__title {
|
|
3704
3711
|
flex: 1;
|
|
3705
3712
|
font-size: 11px;
|
|
3706
3713
|
font-weight: 500;
|
|
3707
|
-
color: var(--panel-float-title-color, rgba(255, 255, 255, 0.6));
|
|
3714
|
+
color: var(--rdd-panel-float-title-color, rgba(255, 255, 255, 0.6));
|
|
3708
3715
|
overflow: hidden;
|
|
3709
3716
|
text-overflow: ellipsis;
|
|
3710
3717
|
white-space: nowrap;
|
|
3711
3718
|
}
|
|
3712
3719
|
|
|
3713
|
-
.
|
|
3714
|
-
color: var(--panel-float-title-color-active, rgba(255, 255, 255, 0.9));
|
|
3720
|
+
.rdd-panel-float--active .rdd-panel-float__title {
|
|
3721
|
+
color: var(--rdd-panel-float-title-color-active, rgba(255, 255, 255, 0.9));
|
|
3715
3722
|
}
|
|
3716
3723
|
|
|
3717
|
-
.
|
|
3724
|
+
.rdd-panel-float__icon {
|
|
3718
3725
|
flex-shrink: 0;
|
|
3719
3726
|
width: 14px;
|
|
3720
3727
|
height: 14px;
|
|
@@ -3722,23 +3729,23 @@ html:not(.enable-animations) *::after {
|
|
|
3722
3729
|
align-items: center;
|
|
3723
3730
|
justify-content: center;
|
|
3724
3731
|
opacity: 0.7;
|
|
3725
|
-
color: var(--panel-float-title-color, rgba(255, 255, 255, 0.6));
|
|
3732
|
+
color: var(--rdd-panel-float-title-color, rgba(255, 255, 255, 0.6));
|
|
3726
3733
|
}
|
|
3727
|
-
.
|
|
3734
|
+
.rdd-panel-float--active .rdd-panel-float__icon {
|
|
3728
3735
|
opacity: 1;
|
|
3729
|
-
color: var(--panel-float-title-color-active, rgba(255, 255, 255, 0.9));
|
|
3736
|
+
color: var(--rdd-panel-float-title-color-active, rgba(255, 255, 255, 0.9));
|
|
3730
3737
|
}
|
|
3731
3738
|
|
|
3732
|
-
.
|
|
3739
|
+
.rdd-panel-float__close {
|
|
3733
3740
|
display: inline-flex;
|
|
3734
3741
|
align-items: center;
|
|
3735
3742
|
justify-content: center;
|
|
3736
3743
|
width: 18px;
|
|
3737
3744
|
height: 18px;
|
|
3738
3745
|
flex-shrink: 0;
|
|
3739
|
-
background: var(--custom-btn-bg, rgba(255, 255, 255, 0.03));
|
|
3740
|
-
border: 1px solid var(--custom-btn-border, rgba(255, 255, 255, 0.05));
|
|
3741
|
-
color: var(--text-secondary, #94a3b8);
|
|
3746
|
+
background: var(--rdd-custom-btn-bg, rgba(255, 255, 255, 0.03));
|
|
3747
|
+
border: 1px solid var(--rdd-custom-btn-border, rgba(255, 255, 255, 0.05));
|
|
3748
|
+
color: var(--rdd-text-secondary, #94a3b8);
|
|
3742
3749
|
cursor: pointer;
|
|
3743
3750
|
border-radius: 4px;
|
|
3744
3751
|
padding: 0;
|
|
@@ -3746,21 +3753,21 @@ html:not(.enable-animations) *::after {
|
|
|
3746
3753
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3747
3754
|
}
|
|
3748
3755
|
|
|
3749
|
-
.
|
|
3750
|
-
background-color: var(--custom-btn-hover-bg, rgba(255, 255, 255, 0.12));
|
|
3751
|
-
color: var(--custom-btn-hover-color, #ffffff);
|
|
3752
|
-
border-color: var(--custom-btn-border, rgba(255, 255, 255, 0.05));
|
|
3756
|
+
.rdd-panel-float__close:hover {
|
|
3757
|
+
background-color: var(--rdd-custom-btn-hover-bg, rgba(255, 255, 255, 0.12));
|
|
3758
|
+
color: var(--rdd-custom-btn-hover-color, #ffffff);
|
|
3759
|
+
border-color: var(--rdd-custom-btn-border, rgba(255, 255, 255, 0.05));
|
|
3753
3760
|
transform: scale(1.05);
|
|
3754
3761
|
}
|
|
3755
3762
|
|
|
3756
|
-
.
|
|
3763
|
+
.rdd-panel-float__body {
|
|
3757
3764
|
flex: 1;
|
|
3758
3765
|
overflow: auto;
|
|
3759
3766
|
min-height: 0;
|
|
3760
3767
|
}
|
|
3761
3768
|
|
|
3762
3769
|
/* Resize grip — bottom-right corner */
|
|
3763
|
-
.
|
|
3770
|
+
.rdd-panel-float__resize {
|
|
3764
3771
|
position: absolute;
|
|
3765
3772
|
bottom: 0;
|
|
3766
3773
|
right: 0;
|
|
@@ -3770,11 +3777,11 @@ html:not(.enable-animations) *::after {
|
|
|
3770
3777
|
}
|
|
3771
3778
|
|
|
3772
3779
|
/* ── Docking drop zones (visible while dragging a floating window) ── */
|
|
3773
|
-
.
|
|
3780
|
+
.rdd-panel-float-dropzone {
|
|
3774
3781
|
position: absolute;
|
|
3775
3782
|
width: 80px;
|
|
3776
3783
|
height: 80px;
|
|
3777
|
-
border: 2px dashed var(--accent-color, #38bdf8);
|
|
3784
|
+
border: 2px dashed var(--rdd-accent-color, #38bdf8);
|
|
3778
3785
|
border-radius: 8px;
|
|
3779
3786
|
background: rgba(56, 189, 248, 0.06);
|
|
3780
3787
|
pointer-events: none;
|
|
@@ -3783,68 +3790,68 @@ html:not(.enable-animations) *::after {
|
|
|
3783
3790
|
transition: opacity 0.15s ease, background 0.15s ease, border-style 0.15s ease;
|
|
3784
3791
|
}
|
|
3785
3792
|
|
|
3786
|
-
.
|
|
3793
|
+
.rdd-panel-float-dropzone--hovered {
|
|
3787
3794
|
opacity: 1;
|
|
3788
3795
|
background: rgba(56, 189, 248, 0.18);
|
|
3789
3796
|
border-style: solid;
|
|
3790
3797
|
}
|
|
3791
3798
|
|
|
3792
|
-
.
|
|
3793
|
-
.
|
|
3794
|
-
.
|
|
3795
|
-
.
|
|
3799
|
+
.rdd-panel-float-dropzone--top-left { top: 8px; left: 8px; }
|
|
3800
|
+
.rdd-panel-float-dropzone--top-right { top: 8px; right: 8px; }
|
|
3801
|
+
.rdd-panel-float-dropzone--bottom-left { bottom: 8px; left: 8px; }
|
|
3802
|
+
.rdd-panel-float-dropzone--bottom-right { bottom: 8px; right: 8px; }
|
|
3796
3803
|
|
|
3797
|
-
[dir="rtl"] .
|
|
3798
|
-
[dir="rtl"] .
|
|
3799
|
-
[dir="rtl"] .
|
|
3800
|
-
[dir="rtl"] .
|
|
3804
|
+
[dir="rtl"] .rdd-panel-float-dropzone--top-right { right: auto; left: 8px; }
|
|
3805
|
+
[dir="rtl"] .rdd-panel-float-dropzone--top-left { left: auto; right: 8px; }
|
|
3806
|
+
[dir="rtl"] .rdd-panel-float-dropzone--bottom-right { right: auto; left: 8px; }
|
|
3807
|
+
[dir="rtl"] .rdd-panel-float-dropzone--bottom-left { left: auto; right: 8px; }
|
|
3801
3808
|
|
|
3802
|
-
[dir="rtl"] .
|
|
3809
|
+
[dir="rtl"] .rdd-panel-float__title { text-align: right; }
|
|
3803
3810
|
|
|
3804
3811
|
/* ── Toast ── */
|
|
3805
3812
|
|
|
3806
3813
|
/* Color tokens — match confirmation-alert-* palette exactly */
|
|
3807
3814
|
:root {
|
|
3808
|
-
--toast-info-color: #67e8f9;
|
|
3809
|
-
--toast-success-color: #4ade80;
|
|
3810
|
-
--toast-warning-color: #fbbf24;
|
|
3811
|
-
--toast-error-color: #f87171;
|
|
3812
|
-
--toast-bg: #2a2d32;
|
|
3813
|
-
--toast-border: rgba(255, 255, 255, 0.14);
|
|
3815
|
+
--rdd-toast-info-color: #67e8f9;
|
|
3816
|
+
--rdd-toast-success-color: #4ade80;
|
|
3817
|
+
--rdd-toast-warning-color: #fbbf24;
|
|
3818
|
+
--rdd-toast-error-color: #f87171;
|
|
3819
|
+
--rdd-toast-bg: #2a2d32;
|
|
3820
|
+
--rdd-toast-border: rgba(255, 255, 255, 0.14);
|
|
3814
3821
|
}
|
|
3815
3822
|
[data-color-scheme="light"] {
|
|
3816
|
-
--toast-info-color: #0369a1;
|
|
3817
|
-
--toast-success-color: #15803d;
|
|
3818
|
-
--toast-warning-color: #b45309;
|
|
3819
|
-
--toast-error-color: #b91c1c;
|
|
3820
|
-
--toast-bg: #ffffff;
|
|
3821
|
-
--toast-border: rgba(0, 0, 0, 0.14);
|
|
3823
|
+
--rdd-toast-info-color: #0369a1;
|
|
3824
|
+
--rdd-toast-success-color: #15803d;
|
|
3825
|
+
--rdd-toast-warning-color: #b45309;
|
|
3826
|
+
--rdd-toast-error-color: #b91c1c;
|
|
3827
|
+
--rdd-toast-bg: #ffffff;
|
|
3828
|
+
--rdd-toast-border: rgba(0, 0, 0, 0.14);
|
|
3822
3829
|
}
|
|
3823
3830
|
|
|
3824
3831
|
/* Position containers */
|
|
3825
|
-
.
|
|
3826
|
-
position: fixed; z-index:
|
|
3832
|
+
.rdd-toast-container {
|
|
3833
|
+
position: fixed; z-index: calc(var(--rdd-z-base, 1000) + 9100);
|
|
3827
3834
|
display: flex; gap: 8px; padding: 16px;
|
|
3828
3835
|
pointer-events: none;
|
|
3829
3836
|
box-sizing: border-box;
|
|
3830
3837
|
}
|
|
3831
|
-
.
|
|
3832
|
-
.
|
|
3833
|
-
.
|
|
3834
|
-
.
|
|
3838
|
+
.rdd-toast-container--top-right { top: var(--rdd-toast-offset-top, 0px); right: 0; flex-direction: column; }
|
|
3839
|
+
.rdd-toast-container--top-left { top: var(--rdd-toast-offset-top, 0px); left: 0; flex-direction: column; }
|
|
3840
|
+
.rdd-toast-container--bottom-right { bottom: var(--rdd-toast-offset-bottom, 0px); right: 0; flex-direction: column-reverse; }
|
|
3841
|
+
.rdd-toast-container--bottom-left { bottom: var(--rdd-toast-offset-bottom, 0px); left: 0; flex-direction: column-reverse; }
|
|
3835
3842
|
/* newestOnTop override inverts the column direction */
|
|
3836
|
-
.
|
|
3837
|
-
.
|
|
3838
|
-
.
|
|
3839
|
-
.
|
|
3843
|
+
.rdd-toast-container--newest-top.rdd-toast-container--bottom-right,
|
|
3844
|
+
.rdd-toast-container--newest-top.rdd-toast-container--bottom-left { flex-direction: column; }
|
|
3845
|
+
.rdd-toast-container--newest-bottom.rdd-toast-container--top-right,
|
|
3846
|
+
.rdd-toast-container--newest-bottom.rdd-toast-container--top-left { flex-direction: column-reverse; }
|
|
3840
3847
|
|
|
3841
3848
|
/* Individual toast — base card */
|
|
3842
|
-
.
|
|
3849
|
+
.rdd-toast {
|
|
3843
3850
|
pointer-events: all; position: relative; overflow: hidden;
|
|
3844
3851
|
display: flex; align-items: flex-start; gap: 10px;
|
|
3845
3852
|
padding: 20px 14px; border-radius: 6px;
|
|
3846
|
-
background: var(--toast-bg, #2a2d32);
|
|
3847
|
-
border: 1px solid var(--toast-border, rgba(255,255,255,0.14)); border-inline-start-width: 3px;
|
|
3853
|
+
background: var(--rdd-toast-bg, #2a2d32);
|
|
3854
|
+
border: 1px solid var(--rdd-toast-border, rgba(255,255,255,0.14)); border-inline-start-width: 3px;
|
|
3848
3855
|
box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
|
|
3849
3856
|
color: var(--sidebar-text-title, #cccccc);
|
|
3850
3857
|
font-size: 13.5px; line-height: 1.4; width: 100%;
|
|
@@ -3852,54 +3859,54 @@ html:not(.enable-animations) *::after {
|
|
|
3852
3859
|
max-height 300ms ease, padding 300ms ease, margin 300ms ease;
|
|
3853
3860
|
}
|
|
3854
3861
|
/* Reserve space for the absolute-positioned close button */
|
|
3855
|
-
.
|
|
3862
|
+
.rdd-toast:has(.rdd-toast__close) { padding-inline-end: 32px; }
|
|
3856
3863
|
|
|
3857
3864
|
/* Type-specific: solid background, accent inline-start border only */
|
|
3858
|
-
.
|
|
3859
|
-
.
|
|
3860
|
-
.
|
|
3861
|
-
.
|
|
3865
|
+
.rdd-toast--info { border-inline-start-color: var(--rdd-toast-info-color); }
|
|
3866
|
+
.rdd-toast--success { border-inline-start-color: var(--rdd-toast-success-color); }
|
|
3867
|
+
.rdd-toast--warning { border-inline-start-color: var(--rdd-toast-warning-color); }
|
|
3868
|
+
.rdd-toast--error { border-inline-start-color: var(--rdd-toast-error-color); }
|
|
3862
3869
|
|
|
3863
3870
|
/* Entry animation classes toggled by JS on next frame */
|
|
3864
|
-
.
|
|
3865
|
-
.
|
|
3866
|
-
.
|
|
3867
|
-
.
|
|
3871
|
+
.rdd-toast--entering { opacity: 0; transform: translateX(110%); }
|
|
3872
|
+
.rdd-toast--entering-left { opacity: 0; transform: translateX(-110%); }
|
|
3873
|
+
.rdd-toast--fade-entering { opacity: 0; transform: translateX(0); }
|
|
3874
|
+
.rdd-toast--visible { opacity: 1; transform: translateX(0); }
|
|
3868
3875
|
/* Exit: fade out + height collapse for gravity slide effect */
|
|
3869
|
-
.
|
|
3876
|
+
.rdd-toast--exiting {
|
|
3870
3877
|
opacity: 0; max-height: 0 !important;
|
|
3871
3878
|
padding-top: 0; padding-bottom: 0; margin: 0;
|
|
3872
3879
|
}
|
|
3873
3880
|
|
|
3874
3881
|
/* Icon */
|
|
3875
|
-
.
|
|
3876
|
-
.
|
|
3877
|
-
.
|
|
3878
|
-
.
|
|
3879
|
-
.
|
|
3882
|
+
.rdd-toast__icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
|
|
3883
|
+
.rdd-toast--info .rdd-toast__icon { color: var(--rdd-toast-info-color); }
|
|
3884
|
+
.rdd-toast--success .rdd-toast__icon { color: var(--rdd-toast-success-color); }
|
|
3885
|
+
.rdd-toast--warning .rdd-toast__icon { color: var(--rdd-toast-warning-color); }
|
|
3886
|
+
.rdd-toast--error .rdd-toast__icon { color: var(--rdd-toast-error-color); }
|
|
3880
3887
|
|
|
3881
3888
|
/* Body & close button */
|
|
3882
|
-
.
|
|
3883
|
-
.
|
|
3889
|
+
.rdd-toast__body { flex: 1; min-width: 0; word-break: break-word; }
|
|
3890
|
+
.rdd-toast__close {
|
|
3884
3891
|
position: absolute; top: 8px; inset-inline-end: 10px;
|
|
3885
3892
|
background: none; border: none; cursor: pointer;
|
|
3886
3893
|
opacity: .5; padding: 2px; color: inherit; line-height: 1;
|
|
3887
3894
|
}
|
|
3888
|
-
.
|
|
3895
|
+
.rdd-toast__close:hover { opacity: 1; }
|
|
3889
3896
|
|
|
3890
3897
|
/* Progress bar */
|
|
3891
|
-
.
|
|
3898
|
+
.rdd-toast__progress {
|
|
3892
3899
|
position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
|
|
3893
|
-
transform-origin: left; animation:
|
|
3900
|
+
transform-origin: left; animation: rdd-toast-shrink linear forwards;
|
|
3894
3901
|
}
|
|
3895
|
-
.
|
|
3896
|
-
.
|
|
3897
|
-
.
|
|
3898
|
-
.
|
|
3899
|
-
.
|
|
3902
|
+
.rdd-toast--paused .rdd-toast__progress { animation-play-state: paused; }
|
|
3903
|
+
.rdd-toast--info .rdd-toast__progress { background: var(--rdd-toast-info-color); }
|
|
3904
|
+
.rdd-toast--success .rdd-toast__progress { background: var(--rdd-toast-success-color); }
|
|
3905
|
+
.rdd-toast--warning .rdd-toast__progress { background: var(--rdd-toast-warning-color); }
|
|
3906
|
+
.rdd-toast--error .rdd-toast__progress { background: var(--rdd-toast-error-color); }
|
|
3900
3907
|
|
|
3901
|
-
@keyframes
|
|
3908
|
+
@keyframes rdd-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
|
|
3902
3909
|
|
|
3903
3910
|
/* Toast RTL: flip icon/body order and progress bar collapse direction */
|
|
3904
|
-
[dir="rtl"] .
|
|
3905
|
-
[dir="rtl"] .
|
|
3911
|
+
[dir="rtl"] .rdd-toast { flex-direction: row-reverse; }
|
|
3912
|
+
[dir="rtl"] .rdd-toast__progress { transform-origin: right; }
|