xlsxrb 0.1.2 → 0.1.3

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.
@@ -4,34 +4,74 @@
4
4
  position: relative;
5
5
  }
6
6
 
7
- /* 'Try in Browser' Button */
8
- .wasm-try-btn {
7
+ /* Quick Actions Button Bar */
8
+ .wasm-quick-action-bar {
9
+ display: flex;
10
+ flex-wrap: wrap;
11
+ gap: 8px;
12
+ margin-bottom: 12px;
13
+ }
14
+
15
+ .wasm-quick-btn {
9
16
  display: inline-flex;
10
17
  align-items: center;
11
18
  justify-content: center;
12
- background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
13
- color: white !important;
14
- border: none;
15
19
  padding: 8px 16px;
16
20
  font-size: 13px;
17
21
  font-weight: 600;
22
+ font-family: inherit; /* Inherit font-family from RDoc/Aliki theme */
18
23
  border-radius: 6px;
19
24
  cursor: pointer;
20
- box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
21
- transition: all 0.2s ease;
22
- margin-bottom: 8px;
25
+ transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
23
26
  outline: none;
27
+ border: 1px solid transparent;
28
+ }
29
+
30
+ /* 1. Live Preview Button: High-visibility Accent Green */
31
+ .wasm-quick-preview-btn {
32
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
33
+ color: white !important;
34
+ box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
35
+ }
36
+
37
+ .wasm-quick-preview-btn:hover {
38
+ background: linear-gradient(135deg, #059669 0%, #047857 100%);
39
+ transform: translateY(-1px);
40
+ box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
41
+ }
42
+
43
+ /* 2. Edit Code Button: Sleek Indigo */
44
+ .wasm-quick-edit-btn {
45
+ background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
46
+ color: white !important;
47
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
48
+ }
49
+
50
+ .wasm-quick-edit-btn:hover {
51
+ background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
52
+ transform: translateY(-1px);
53
+ box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
54
+ }
55
+
56
+ /* 3. Download XLSX Button: Clean slate style */
57
+ .wasm-quick-download-btn {
58
+ background-color: #ffffff;
59
+ color: #475569 !important;
60
+ border: 1px solid #e2e8f0;
61
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
24
62
  }
25
63
 
26
- .wasm-try-btn:hover {
27
- background: linear-gradient(135deg, #4338ca 0%, #2563eb 100%);
64
+ .wasm-quick-download-btn:hover {
65
+ background-color: #f8fafc;
66
+ color: #0f172a !important;
67
+ border-color: #cbd5e1;
28
68
  transform: translateY(-1px);
29
- box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
69
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
30
70
  }
31
71
 
32
- .wasm-try-btn:active {
72
+ .wasm-quick-btn:active {
33
73
  transform: translateY(1px);
34
- box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
74
+ box-shadow: none;
35
75
  }
36
76
 
37
77
  /* Loader indicator */
@@ -64,126 +104,248 @@
64
104
  to { transform: rotate(360deg); }
65
105
  }
66
106
 
67
- /* Playground main container */
68
- .wasm-playground-container {
69
- display: flex;
70
- flex-direction: column;
71
- border: 1px solid #e5e7eb;
107
+ /* Inline Editor Overlay and Wrapper */
108
+ .wasm-playground-wrapper {
109
+ position: relative;
110
+ border: 1px solid #e2e8f0;
72
111
  border-radius: 8px;
73
- overflow: hidden;
74
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
75
- background: #ffffff;
76
- transition: border-color 0.3s ease;
112
+ background-color: #f8fafc; /* Matches Aliki/RDoc tones */
113
+ transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
114
+ margin: 1.5em 0 8px 0;
115
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
116
+ cursor: text;
77
117
  }
78
118
 
79
- /* Editor (textarea) */
80
- .wasm-editor {
81
- width: 100%;
82
- box-sizing: border-box;
83
- padding: 16px;
84
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
85
- font-size: 13.5px;
86
- line-height: 1.6;
87
- color: #1f2937;
88
- background-color: #fafafa;
89
- border: none;
90
- border-bottom: 1px solid #e5e7eb;
91
- resize: vertical;
92
- outline: none;
93
- tab-size: 2;
119
+ .wasm-playground-wrapper:hover {
120
+ border-color: #cbd5e1;
94
121
  }
95
122
 
96
- .wasm-editor:focus {
123
+ .wasm-playground-wrapper:focus-within {
124
+ border-color: #2563eb;
125
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
97
126
  background-color: #ffffff;
98
127
  }
99
128
 
100
- /* Action bar container */
101
- .wasm-action-bar {
129
+ .wasm-inline-editor {
130
+ background-color: transparent !important;
131
+ color: transparent !important;
132
+ caret-color: #2563eb !important; /* Indigo caret visible over transparent text */
133
+ border: none !important;
134
+ resize: none !important;
135
+ outline: none !important;
136
+ box-sizing: border-box !important;
137
+ white-space: pre-wrap !important;
138
+ word-wrap: break-word !important;
139
+ overflow-wrap: break-word !important;
140
+ overflow: hidden !important;
141
+ }
142
+
143
+ /* Reset Button Style */
144
+ .wasm-quick-reset-btn {
145
+ background-color: white;
146
+ color: #64748b !important;
147
+ border: 1px solid #e2e8f0;
148
+ }
149
+
150
+ .wasm-quick-reset-btn:hover {
151
+ background-color: #f8fafc;
152
+ color: #0f172a !important;
153
+ border-color: #cbd5e1;
154
+ }
155
+
156
+ /* Ruby highlight custom classes override to align with Aliki theme */
157
+ .wasm-playground-wrapper pre.ruby {
158
+ background-color: transparent !important;
159
+ border: none !important;
160
+ padding: 16px !important;
161
+ margin: 0 !important;
162
+ white-space: pre-wrap !important;
163
+ word-wrap: break-word !important;
164
+ overflow-wrap: break-word !important;
165
+ overflow: hidden !important;
166
+ box-sizing: border-box !important;
167
+ }
168
+
169
+ /* Align inline bar styles */
170
+ .wasm-quick-action-bar {
102
171
  display: flex;
172
+ flex-wrap: wrap;
103
173
  gap: 8px;
104
174
  padding: 10px 16px;
105
- background-color: #f9fafb;
106
- border-bottom: 1px solid #e5e7eb;
175
+ background-color: #f8fafc;
176
+ border-top: 1px solid #e2e8f0;
177
+ border-radius: 0 0 8px 8px;
178
+ }
179
+
180
+ /* Sliding Drawer Panel */
181
+ .wasm-preview-drawer {
182
+ position: fixed;
183
+ top: 0;
184
+ right: 0;
185
+ bottom: 0;
186
+ width: 50vw;
187
+ max-width: 800px;
188
+ min-width: 480px;
189
+ background-color: #ffffff; /* Premium white background to match RDoc */
190
+ border-left: 1px solid #e2e8f0;
191
+ box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
192
+ z-index: 10000;
193
+ display: flex;
194
+ flex-direction: column;
195
+ transform: translateX(100%);
196
+ transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
197
+ }
198
+
199
+ .wasm-preview-drawer.open {
200
+ transform: translateX(0);
107
201
  }
108
202
 
109
- /* Common action buttons style */
110
- .wasm-action-bar button {
111
- padding: 6px 12px;
112
- font-size: 12.5px;
203
+ /* Drawer Header */
204
+ .drawer-header {
205
+ display: flex;
206
+ justify-content: space-between;
207
+ align-items: center;
208
+ padding: 16px 20px;
209
+ background-color: #f8fafc;
210
+ border-bottom: 1px solid #e2e8f0;
211
+ }
212
+
213
+ .drawer-title {
214
+ color: #1e293b;
215
+ font-size: 15px;
113
216
  font-weight: 600;
114
- border-radius: 4px;
217
+ }
218
+
219
+ .drawer-close-btn {
220
+ background: none;
221
+ border: none;
222
+ color: #64748b;
223
+ font-size: 24px;
115
224
  cursor: pointer;
116
- transition: all 0.15s ease;
117
- outline: none;
225
+ line-height: 1;
226
+ padding: 4px;
227
+ transition: color 0.15s ease;
118
228
  }
119
229
 
120
- .wasm-run-btn {
121
- background-color: #10b981;
122
- color: white;
123
- border: 1px solid #059669;
230
+ .drawer-close-btn:hover {
231
+ color: #0f172a;
124
232
  }
125
233
 
126
- .wasm-run-btn:hover:not(:disabled) {
127
- background-color: #059669;
234
+ /* Drawer Body & IFrame */
235
+ .drawer-body {
236
+ flex: 1;
237
+ overflow: hidden;
238
+ position: relative;
239
+ background-color: #ffffff;
128
240
  }
129
241
 
130
- .wasm-run-btn:disabled {
131
- background-color: #a7f3d0;
132
- border-color: #a7f3d0;
133
- cursor: not-allowed;
242
+ .drawer-iframe {
243
+ width: 100%;
244
+ height: 100%;
245
+ border: none;
246
+ background-color: transparent;
134
247
  }
135
248
 
136
- .wasm-reset-btn {
137
- background-color: white;
138
- color: #4b5563;
139
- border: 1px solid #d1d5db;
249
+ /* ==========================================
250
+ Dark Mode Support (RDoc data-theme="dark")
251
+ ========================================== */
252
+ [data-theme="dark"] .wasm-playground-wrapper {
253
+ border-color: #334155;
254
+ background-color: #0f172a;
255
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
140
256
  }
141
257
 
142
- .wasm-reset-btn:hover {
143
- background-color: #f3f4f6;
144
- color: #1f2937;
145
- border-color: #9ca3af;
258
+ [data-theme="dark"] .wasm-playground-wrapper:hover {
259
+ border-color: #475569;
146
260
  }
147
261
 
148
- .wasm-close-btn {
149
- background-color: white;
150
- color: #ef4444;
151
- border: 1px solid #fca5a5;
152
- margin-left: auto; /* Align to the right edge */
262
+ [data-theme="dark"] .wasm-playground-wrapper:focus-within {
263
+ border-color: #3b82f6;
264
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
265
+ background-color: #020617;
153
266
  }
154
267
 
155
- .wasm-close-btn:hover {
156
- background-color: #fef2f2;
157
- border-color: #ef4444;
268
+ [data-theme="dark"] .wasm-inline-editor {
269
+ caret-color: #60a5fa !important;
158
270
  }
159
271
 
160
- /* Console output logs area */
161
- .wasm-console {
162
- margin: 0;
163
- padding: 14px 16px;
164
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
165
- font-size: 12.5px;
166
- line-height: 1.5;
272
+ [data-theme="dark"] .wasm-quick-action-bar {
167
273
  background-color: #1e293b;
274
+ border-top: 1px solid #334155;
275
+ }
276
+
277
+ [data-theme="dark"] .wasm-quick-btn {
278
+ background-color: #334155;
168
279
  color: #e2e8f0;
169
- overflow-x: auto;
170
- max-height: 200px;
171
- border-top: none;
280
+ border-color: #475569;
172
281
  }
173
282
 
174
- .wasm-console.running {
175
- color: #93c5fd;
283
+ [data-theme="dark"] .wasm-quick-btn:hover {
284
+ background-color: #475569;
285
+ border-color: #64748b;
286
+ color: #ffffff;
176
287
  }
177
288
 
178
- .wasm-console.success {
179
- color: #a7f3d0;
289
+ [data-theme="dark"] .wasm-quick-preview-btn {
290
+ background-color: #064e3b;
291
+ color: #6ee7b7;
292
+ border-color: #047857;
180
293
  }
181
294
 
182
- .wasm-console.error {
183
- color: #fca5a5;
295
+ [data-theme="dark"] .wasm-quick-preview-btn:hover {
296
+ background-color: #047857;
297
+ color: #ffffff;
184
298
  }
185
299
 
186
- .wasm-error {
187
- color: #ef4444;
188
- font-weight: 600;
300
+ [data-theme="dark"] .wasm-quick-download-btn {
301
+ background-color: #334155;
302
+ color: #cbd5e1 !important;
303
+ border-color: #475569;
304
+ }
305
+
306
+ [data-theme="dark"] .wasm-quick-download-btn:hover {
307
+ background-color: #475569;
308
+ color: #ffffff !important;
309
+ border-color: #cbd5e1;
310
+ }
311
+
312
+ [data-theme="dark"] .wasm-quick-reset-btn {
313
+ background-color: #334155;
314
+ color: #94a3b8 !important;
315
+ border-color: #475569;
316
+ }
317
+
318
+ [data-theme="dark"] .wasm-quick-reset-btn:hover {
319
+ background-color: #475569;
320
+ color: #cbd5e1 !important;
321
+ }
322
+
323
+ /* Side Drawer Dark Theme */
324
+ [data-theme="dark"] .wasm-preview-drawer {
325
+ background-color: #0f172a;
326
+ border-left: 1px solid #334155;
327
+ box-shadow: -8px 0 25px rgba(0, 0, 0, 0.3);
328
+ }
329
+
330
+ [data-theme="dark"] .drawer-header {
331
+ background-color: #1e293b;
332
+ border-bottom: 1px solid #334155;
333
+ color: #f1f5f9;
334
+ }
335
+
336
+ [data-theme="dark"] .drawer-title {
337
+ color: #f1f5f9;
338
+ }
339
+
340
+ [data-theme="dark"] .drawer-close-btn {
341
+ color: #94a3b8;
342
+ }
343
+
344
+ [data-theme="dark"] .drawer-close-btn:hover {
345
+ color: #f1f5f9;
346
+ background-color: #334155;
347
+ }
348
+
349
+ [data-theme="dark"] .drawer-body {
350
+ background-color: #0f172a;
189
351
  }