cloud-ide-element 1.1.44 → 1.1.46

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.
Files changed (5) hide show
  1. package/fesm2022/cloud-ide-element.mjs +2 -2
  2. package/fesm2022/cloud-ide-element.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/lib/assets/css/cide-ele-color-variables.scss +212 -212
  5. package/src/lib/assets/css/cide-ele-style.scss +85 -85
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cloud-ide-element",
3
- "version": "1.1.44",
3
+ "version": "1.1.46",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.1.0",
6
6
  "@angular/core": "^20.1.0"
package/src/lib/assets/css/cide-ele-color-variables.scss CHANGED
@@ -1,212 +1,212 @@
1
- /*-------------------------------------------------
2
- * CIDE-ELE Color Variables
3
- * Global color system for theming
4
- * Can be overridden from control project
5
- *--------------------------------------------------*/
6
-
7
- :root {
8
- /* ============================================
9
- * BASE COLORS - Light Mode (Default)
10
- * ============================================ */
11
-
12
- /* Background Colors */
13
- --cide-ele-bg-primary: #ffffff;
14
- --cide-ele-bg-secondary: #f9fafb;
15
- --cide-ele-bg-tertiary: #f3f4f6;
16
- --cide-ele-bg-hover: #f9fafb;
17
- --cide-ele-bg-active: #f3f4f6;
18
-
19
- /* Text Colors */
20
- --cide-ele-text-primary: #1f2937;
21
- --cide-ele-text-secondary: #6b7280;
22
- --cide-ele-text-tertiary: #9ca3af;
23
- --cide-ele-text-disabled: #d1d5db;
24
-
25
- /* Border Colors */
26
- --cide-ele-border-primary: #e5e7eb;
27
- --cide-ele-border-secondary: #d1d5db;
28
- --cide-ele-border-hover: #9ca3af;
29
- --cide-ele-border-active: #3b82f6;
30
-
31
- /* Brand Colors */
32
- --cide-ele-brand-primary: #3b82f6;
33
- --cide-ele-brand-primary-hover: #2563eb;
34
- --cide-ele-brand-primary-light: #dbeafe;
35
- --cide-ele-brand-primary-dark: #1e40af;
36
-
37
- /* Status Colors */
38
- --cide-ele-success: #10b981;
39
- --cide-ele-success-light: #d1fae5;
40
- --cide-ele-warning: #f59e0b;
41
- --cide-ele-warning-light: #fef3c7;
42
- --cide-ele-error: #ef4444;
43
- --cide-ele-error-light: #fee2e2;
44
- --cide-ele-info: #3b82f6;
45
- --cide-ele-info-light: #dbeafe;
46
-
47
- /* ============================================
48
- * DATA GRID SPECIFIC COLORS
49
- * ============================================ */
50
-
51
- /* Grid Backgrounds */
52
- --cide-ele-grid-bg: #ffffff;
53
- --cide-ele-grid-bg-striped: #fafafa;
54
- --cide-ele-grid-bg-hover: #f9fafb;
55
- --cide-ele-grid-bg-header: #fafafa;
56
- --cide-ele-grid-bg-group: #f3f4f6;
57
-
58
- /* Grid Borders */
59
- --cide-ele-grid-border: #e5e7eb;
60
- --cide-ele-grid-border-header: rgba(0, 0, 0, 0.08);
61
- --cide-ele-grid-border-hover: #3b82f6;
62
-
63
- /* Grid Text */
64
- --cide-ele-grid-text: #1f2937;
65
- --cide-ele-grid-text-header: #6b7280;
66
- --cide-ele-grid-text-secondary: #6b7280;
67
-
68
- /* ============================================
69
- * SHADOW & EFFECTS
70
- * ============================================ */
71
-
72
- --cide-ele-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
73
- --cide-ele-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
74
- --cide-ele-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
75
- --cide-ele-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
76
-
77
- /* ============================================
78
- * SCROLLBAR COLORS
79
- * ============================================ */
80
-
81
- --cide-ele-scrollbar-track: #f9fafb;
82
- --cide-ele-scrollbar-thumb: #d1d5db;
83
- --cide-ele-scrollbar-thumb-hover: #9ca3af;
84
- }
85
-
86
- /* ============================================
87
- * DARK MODE COLORS
88
- * ============================================ */
89
-
90
- [data-theme="dark"],
91
- .dark-mode,
92
- html.dark-mode,
93
- body.dark-mode {
94
- /* Background Colors */
95
- --cide-ele-bg-primary: #1f2937;
96
- --cide-ele-bg-secondary: #111827;
97
- --cide-ele-bg-tertiary: #374151;
98
- --cide-ele-bg-hover: #374151;
99
- --cide-ele-bg-active: #4b5563;
100
-
101
- /* Text Colors */
102
- --cide-ele-text-primary: #f9fafb;
103
- --cide-ele-text-secondary: #d1d5db;
104
- --cide-ele-text-tertiary: #9ca3af;
105
- --cide-ele-text-disabled: #6b7280;
106
-
107
- /* Border Colors */
108
- --cide-ele-border-primary: #374151;
109
- --cide-ele-border-secondary: #4b5563;
110
- --cide-ele-border-hover: #60a5fa;
111
- --cide-ele-border-active: #3b82f6;
112
-
113
- /* Brand Colors */
114
- --cide-ele-brand-primary: #60a5fa;
115
- --cide-ele-brand-primary-hover: #3b82f6;
116
- --cide-ele-brand-primary-light: #1e3a8a;
117
- --cide-ele-brand-primary-dark: #1e40af;
118
-
119
- /* Status Colors */
120
- --cide-ele-success: #34d399;
121
- --cide-ele-success-light: #065f46;
122
- --cide-ele-warning: #fbbf24;
123
- --cide-ele-warning-light: #78350f;
124
- --cide-ele-error: #f87171;
125
- --cide-ele-error-light: #7f1d1d;
126
- --cide-ele-info: #60a5fa;
127
- --cide-ele-info-light: #1e3a8a;
128
-
129
- /* Data Grid Dark Mode */
130
- --cide-ele-grid-bg: #1f2937;
131
- --cide-ele-grid-bg-striped: #111827;
132
- --cide-ele-grid-bg-hover: #374151;
133
- --cide-ele-grid-bg-header: #374151;
134
- --cide-ele-grid-bg-group: #374151;
135
-
136
- --cide-ele-grid-border: #374151;
137
- --cide-ele-grid-border-header: rgba(255, 255, 255, 0.1);
138
- --cide-ele-grid-border-hover: #60a5fa;
139
-
140
- --cide-ele-grid-text: #f9fafb;
141
- --cide-ele-grid-text-header: #d1d5db;
142
- --cide-ele-grid-text-secondary: #9ca3af;
143
-
144
- /* Scrollbar Dark Mode */
145
- --cide-ele-scrollbar-track: #1f2937;
146
- --cide-ele-scrollbar-thumb: #4b5563;
147
- --cide-ele-scrollbar-thumb-hover: #6b7280;
148
- }
149
-
150
- /* ============================================
151
- * MEDIA QUERY DARK MODE SUPPORT
152
- * ============================================ */
153
-
154
- @media (prefers-color-scheme: dark) {
155
- :root:not([data-theme="light"]):not(.light-mode) {
156
- /* Background Colors */
157
- --cide-ele-bg-primary: #1f2937;
158
- --cide-ele-bg-secondary: #111827;
159
- --cide-ele-bg-tertiary: #374151;
160
- --cide-ele-bg-hover: #374151;
161
- --cide-ele-bg-active: #4b5563;
162
-
163
- /* Text Colors */
164
- --cide-ele-text-primary: #f9fafb;
165
- --cide-ele-text-secondary: #d1d5db;
166
- --cide-ele-text-tertiary: #9ca3af;
167
- --cide-ele-text-disabled: #6b7280;
168
-
169
- /* Border Colors */
170
- --cide-ele-border-primary: #374151;
171
- --cide-ele-border-secondary: #4b5563;
172
- --cide-ele-border-hover: #60a5fa;
173
- --cide-ele-border-active: #3b82f6;
174
-
175
- /* Brand Colors */
176
- --cide-ele-brand-primary: #60a5fa;
177
- --cide-ele-brand-primary-hover: #3b82f6;
178
- --cide-ele-brand-primary-light: #1e3a8a;
179
- --cide-ele-brand-primary-dark: #1e40af;
180
-
181
- /* Status Colors */
182
- --cide-ele-success: #34d399;
183
- --cide-ele-success-light: #065f46;
184
- --cide-ele-warning: #fbbf24;
185
- --cide-ele-warning-light: #78350f;
186
- --cide-ele-error: #f87171;
187
- --cide-ele-error-light: #7f1d1d;
188
- --cide-ele-info: #60a5fa;
189
- --cide-ele-info-light: #1e3a8a;
190
-
191
- /* Data Grid Dark Mode */
192
- --cide-ele-grid-bg: #1f2937;
193
- --cide-ele-grid-bg-striped: #111827;
194
- --cide-ele-grid-bg-hover: #374151;
195
- --cide-ele-grid-bg-header: #374151;
196
- --cide-ele-grid-bg-group: #374151;
197
-
198
- --cide-ele-grid-border: #374151;
199
- --cide-ele-grid-border-header: rgba(255, 255, 255, 0.1);
200
- --cide-ele-grid-border-hover: #60a5fa;
201
-
202
- --cide-ele-grid-text: #f9fafb;
203
- --cide-ele-grid-text-header: #d1d5db;
204
- --cide-ele-grid-text-secondary: #9ca3af;
205
-
206
- /* Scrollbar Dark Mode */
207
- --cide-ele-scrollbar-track: #1f2937;
208
- --cide-ele-scrollbar-thumb: #4b5563;
209
- --cide-ele-scrollbar-thumb-hover: #6b7280;
210
- }
211
- }
212
-
1
+ /*-------------------------------------------------
2
+ * CIDE-ELE Color Variables
3
+ * Global color system for theming
4
+ * Can be overridden from control project
5
+ *--------------------------------------------------*/
6
+
7
+ :root {
8
+ /* ============================================
9
+ * BASE COLORS - Light Mode (Default)
10
+ * ============================================ */
11
+
12
+ /* Background Colors */
13
+ --cide-ele-bg-primary: #ffffff;
14
+ --cide-ele-bg-secondary: #f9fafb;
15
+ --cide-ele-bg-tertiary: #f3f4f6;
16
+ --cide-ele-bg-hover: #f9fafb;
17
+ --cide-ele-bg-active: #f3f4f6;
18
+
19
+ /* Text Colors */
20
+ --cide-ele-text-primary: #1f2937;
21
+ --cide-ele-text-secondary: #6b7280;
22
+ --cide-ele-text-tertiary: #9ca3af;
23
+ --cide-ele-text-disabled: #d1d5db;
24
+
25
+ /* Border Colors */
26
+ --cide-ele-border-primary: #e5e7eb;
27
+ --cide-ele-border-secondary: #d1d5db;
28
+ --cide-ele-border-hover: #9ca3af;
29
+ --cide-ele-border-active: #3b82f6;
30
+
31
+ /* Brand Colors */
32
+ --cide-ele-brand-primary: #3b82f6;
33
+ --cide-ele-brand-primary-hover: #2563eb;
34
+ --cide-ele-brand-primary-light: #dbeafe;
35
+ --cide-ele-brand-primary-dark: #1e40af;
36
+
37
+ /* Status Colors */
38
+ --cide-ele-success: #10b981;
39
+ --cide-ele-success-light: #d1fae5;
40
+ --cide-ele-warning: #f59e0b;
41
+ --cide-ele-warning-light: #fef3c7;
42
+ --cide-ele-error: #ef4444;
43
+ --cide-ele-error-light: #fee2e2;
44
+ --cide-ele-info: #3b82f6;
45
+ --cide-ele-info-light: #dbeafe;
46
+
47
+ /* ============================================
48
+ * DATA GRID SPECIFIC COLORS
49
+ * ============================================ */
50
+
51
+ /* Grid Backgrounds */
52
+ --cide-ele-grid-bg: #ffffff;
53
+ --cide-ele-grid-bg-striped: #fafafa;
54
+ --cide-ele-grid-bg-hover: #f9fafb;
55
+ --cide-ele-grid-bg-header: #fafafa;
56
+ --cide-ele-grid-bg-group: #f3f4f6;
57
+
58
+ /* Grid Borders */
59
+ --cide-ele-grid-border: #e5e7eb;
60
+ --cide-ele-grid-border-header: rgba(0, 0, 0, 0.08);
61
+ --cide-ele-grid-border-hover: #3b82f6;
62
+
63
+ /* Grid Text */
64
+ --cide-ele-grid-text: #1f2937;
65
+ --cide-ele-grid-text-header: #6b7280;
66
+ --cide-ele-grid-text-secondary: #6b7280;
67
+
68
+ /* ============================================
69
+ * SHADOW & EFFECTS
70
+ * ============================================ */
71
+
72
+ --cide-ele-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
73
+ --cide-ele-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
74
+ --cide-ele-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
75
+ --cide-ele-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
76
+
77
+ /* ============================================
78
+ * SCROLLBAR COLORS
79
+ * ============================================ */
80
+
81
+ --cide-ele-scrollbar-track: #f9fafb;
82
+ --cide-ele-scrollbar-thumb: #d1d5db;
83
+ --cide-ele-scrollbar-thumb-hover: #9ca3af;
84
+ }
85
+
86
+ /* ============================================
87
+ * DARK MODE COLORS
88
+ * ============================================ */
89
+
90
+ [data-theme="dark"],
91
+ .dark-mode,
92
+ html.dark-mode,
93
+ body.dark-mode {
94
+ /* Background Colors */
95
+ --cide-ele-bg-primary: #1f2937;
96
+ --cide-ele-bg-secondary: #111827;
97
+ --cide-ele-bg-tertiary: #374151;
98
+ --cide-ele-bg-hover: #374151;
99
+ --cide-ele-bg-active: #4b5563;
100
+
101
+ /* Text Colors */
102
+ --cide-ele-text-primary: #f9fafb;
103
+ --cide-ele-text-secondary: #d1d5db;
104
+ --cide-ele-text-tertiary: #9ca3af;
105
+ --cide-ele-text-disabled: #6b7280;
106
+
107
+ /* Border Colors */
108
+ --cide-ele-border-primary: #374151;
109
+ --cide-ele-border-secondary: #4b5563;
110
+ --cide-ele-border-hover: #60a5fa;
111
+ --cide-ele-border-active: #3b82f6;
112
+
113
+ /* Brand Colors */
114
+ --cide-ele-brand-primary: #60a5fa;
115
+ --cide-ele-brand-primary-hover: #3b82f6;
116
+ --cide-ele-brand-primary-light: #1e3a8a;
117
+ --cide-ele-brand-primary-dark: #1e40af;
118
+
119
+ /* Status Colors */
120
+ --cide-ele-success: #34d399;
121
+ --cide-ele-success-light: #065f46;
122
+ --cide-ele-warning: #fbbf24;
123
+ --cide-ele-warning-light: #78350f;
124
+ --cide-ele-error: #f87171;
125
+ --cide-ele-error-light: #7f1d1d;
126
+ --cide-ele-info: #60a5fa;
127
+ --cide-ele-info-light: #1e3a8a;
128
+
129
+ /* Data Grid Dark Mode */
130
+ --cide-ele-grid-bg: #1f2937;
131
+ --cide-ele-grid-bg-striped: #111827;
132
+ --cide-ele-grid-bg-hover: #374151;
133
+ --cide-ele-grid-bg-header: #374151;
134
+ --cide-ele-grid-bg-group: #374151;
135
+
136
+ --cide-ele-grid-border: #374151;
137
+ --cide-ele-grid-border-header: rgba(255, 255, 255, 0.1);
138
+ --cide-ele-grid-border-hover: #60a5fa;
139
+
140
+ --cide-ele-grid-text: #f9fafb;
141
+ --cide-ele-grid-text-header: #d1d5db;
142
+ --cide-ele-grid-text-secondary: #9ca3af;
143
+
144
+ /* Scrollbar Dark Mode */
145
+ --cide-ele-scrollbar-track: #1f2937;
146
+ --cide-ele-scrollbar-thumb: #4b5563;
147
+ --cide-ele-scrollbar-thumb-hover: #6b7280;
148
+ }
149
+
150
+ /* ============================================
151
+ * MEDIA QUERY DARK MODE SUPPORT
152
+ * ============================================ */
153
+
154
+ @media (prefers-color-scheme: dark) {
155
+ :root:not([data-theme="light"]):not(.light-mode) {
156
+ /* Background Colors */
157
+ --cide-ele-bg-primary: #1f2937;
158
+ --cide-ele-bg-secondary: #111827;
159
+ --cide-ele-bg-tertiary: #374151;
160
+ --cide-ele-bg-hover: #374151;
161
+ --cide-ele-bg-active: #4b5563;
162
+
163
+ /* Text Colors */
164
+ --cide-ele-text-primary: #f9fafb;
165
+ --cide-ele-text-secondary: #d1d5db;
166
+ --cide-ele-text-tertiary: #9ca3af;
167
+ --cide-ele-text-disabled: #6b7280;
168
+
169
+ /* Border Colors */
170
+ --cide-ele-border-primary: #374151;
171
+ --cide-ele-border-secondary: #4b5563;
172
+ --cide-ele-border-hover: #60a5fa;
173
+ --cide-ele-border-active: #3b82f6;
174
+
175
+ /* Brand Colors */
176
+ --cide-ele-brand-primary: #60a5fa;
177
+ --cide-ele-brand-primary-hover: #3b82f6;
178
+ --cide-ele-brand-primary-light: #1e3a8a;
179
+ --cide-ele-brand-primary-dark: #1e40af;
180
+
181
+ /* Status Colors */
182
+ --cide-ele-success: #34d399;
183
+ --cide-ele-success-light: #065f46;
184
+ --cide-ele-warning: #fbbf24;
185
+ --cide-ele-warning-light: #78350f;
186
+ --cide-ele-error: #f87171;
187
+ --cide-ele-error-light: #7f1d1d;
188
+ --cide-ele-info: #60a5fa;
189
+ --cide-ele-info-light: #1e3a8a;
190
+
191
+ /* Data Grid Dark Mode */
192
+ --cide-ele-grid-bg: #1f2937;
193
+ --cide-ele-grid-bg-striped: #111827;
194
+ --cide-ele-grid-bg-hover: #374151;
195
+ --cide-ele-grid-bg-header: #374151;
196
+ --cide-ele-grid-bg-group: #374151;
197
+
198
+ --cide-ele-grid-border: #374151;
199
+ --cide-ele-grid-border-header: rgba(255, 255, 255, 0.1);
200
+ --cide-ele-grid-border-hover: #60a5fa;
201
+
202
+ --cide-ele-grid-text: #f9fafb;
203
+ --cide-ele-grid-text-header: #d1d5db;
204
+ --cide-ele-grid-text-secondary: #9ca3af;
205
+
206
+ /* Scrollbar Dark Mode */
207
+ --cide-ele-scrollbar-track: #1f2937;
208
+ --cide-ele-scrollbar-thumb: #4b5563;
209
+ --cide-ele-scrollbar-thumb-hover: #6b7280;
210
+ }
211
+ }
212
+
package/src/lib/assets/css/cide-ele-style.scss CHANGED
@@ -1,86 +1,86 @@
1
- // Apply Variables
2
- @import './cide-ele-variable.scss';
3
- @import './cide-ele-color-variables.scss';
4
- @import '../../utils/directives/tooltip/tooltip.directive.scss';
5
- /*----------------------------------------
6
- * ELEMENT CSS STARTS HERE
7
- * HERE WE WILL STORE THE CLASSES
8
- *------------------------------------------*/
9
-
10
- // Sidebar Devider Starts Here
11
- .cide-lyt-devider-horizontal {
12
- width: 2px;
13
- position: absolute;
14
- top: 0;
15
- bottom: 0;
16
- right: -5px;
17
- padding: 0px 7px;
18
- cursor: ew-resize;
19
- z-index: 10;
20
- height: 100%;
21
-
22
- .cide-lyt-devider-track {
23
- width: 2px;
24
- height: 100%;
25
- }
26
- }
27
-
28
- .cide-lyt-devider-horizontal-right-to-left {
29
- left: -9px !important;
30
- right: none;
31
-
32
- .cide-lyt-sidedrawer-wrapper {
33
- height: 100%;
34
- }
35
- }
36
-
37
- .cide-lyt-devider-vertical {
38
- height: 2px;
39
- position: absolute;
40
- left: 0;
41
- right: 0;
42
- top: -5px;
43
- padding: 7px 0px;
44
- cursor: ns-resize;
45
- z-index: 10;
46
- width: 100%;
47
-
48
- .cide-lyt-devider-track {
49
- width: 100%;
50
- height: 2px;
51
- }
52
- }
53
-
54
- // .cide-lyt-devider-track {
55
- // background-color: var(--cide-ele-devider-border-color);
56
- // }
57
-
58
- .panel-resizer:hover {
59
- .cide-lyt-devider-track {
60
- background-color: var(--cide-ele-devider-border-color);
61
- }
62
- }
63
-
64
- .cide-lyt-devider-track {
65
- transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
66
- }
67
-
68
- .cide-lyt-devider-track:hover::after {
69
- content: '';
70
- position: absolute;
71
- left: 50%;
72
- top: 50%;
73
- transform: translate(-50%, -50%);
74
- width: 8px;
75
- height: 50px;
76
- background-color: var(--cide-ele-devider-border-color);
77
- border-radius: 2px;
78
- box-shadow: 0 0 6px var(--cide-ele-devider-border-color);
79
- }
80
-
81
- .cide-lyt-devider-vertical {
82
- .cide-lyt-devider-track:hover::after {
83
- height: 8px !important;
84
- width: 50px !important;
85
- }
1
+ // Apply Variables
2
+ @import './cide-ele-variable.scss';
3
+ @import './cide-ele-color-variables.scss';
4
+ @import '../../utils/directives/tooltip/tooltip.directive.scss';
5
+ /*----------------------------------------
6
+ * ELEMENT CSS STARTS HERE
7
+ * HERE WE WILL STORE THE CLASSES
8
+ *------------------------------------------*/
9
+
10
+ // Sidebar Devider Starts Here
11
+ .cide-lyt-devider-horizontal {
12
+ width: 2px;
13
+ position: absolute;
14
+ top: 0;
15
+ bottom: 0;
16
+ right: -5px;
17
+ padding: 0px 7px;
18
+ cursor: ew-resize;
19
+ z-index: 10;
20
+ height: 100%;
21
+
22
+ .cide-lyt-devider-track {
23
+ width: 2px;
24
+ height: 100%;
25
+ }
26
+ }
27
+
28
+ .cide-lyt-devider-horizontal-right-to-left {
29
+ left: -9px !important;
30
+ right: none;
31
+
32
+ .cide-lyt-sidedrawer-wrapper {
33
+ height: 100%;
34
+ }
35
+ }
36
+
37
+ .cide-lyt-devider-vertical {
38
+ height: 2px;
39
+ position: absolute;
40
+ left: 0;
41
+ right: 0;
42
+ top: -5px;
43
+ padding: 7px 0px;
44
+ cursor: ns-resize;
45
+ z-index: 10;
46
+ width: 100%;
47
+
48
+ .cide-lyt-devider-track {
49
+ width: 100%;
50
+ height: 2px;
51
+ }
52
+ }
53
+
54
+ // .cide-lyt-devider-track {
55
+ // background-color: var(--cide-ele-devider-border-color);
56
+ // }
57
+
58
+ .panel-resizer:hover {
59
+ .cide-lyt-devider-track {
60
+ background-color: var(--cide-ele-devider-border-color);
61
+ }
62
+ }
63
+
64
+ .cide-lyt-devider-track {
65
+ transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
66
+ }
67
+
68
+ .cide-lyt-devider-track:hover::after {
69
+ content: '';
70
+ position: absolute;
71
+ left: 50%;
72
+ top: 50%;
73
+ transform: translate(-50%, -50%);
74
+ width: 8px;
75
+ height: 50px;
76
+ background-color: var(--cide-ele-devider-border-color);
77
+ border-radius: 2px;
78
+ box-shadow: 0 0 6px var(--cide-ele-devider-border-color);
79
+ }
80
+
81
+ .cide-lyt-devider-vertical {
82
+ .cide-lyt-devider-track:hover::after {
83
+ height: 8px !important;
84
+ width: 50px !important;
85
+ }
86
86
  }