A Kubernetes operator that bridges Hardware Security Module (HSM) data storage with Kubernetes Secrets, providing true secret portability th
1* {
2 box-sizing: border-box;
3 margin: 0;
4 padding: 0;
5}
6
7/* Multi-device support styles */
8.device-status {
9 display: flex;
10 flex-direction: column;
11 gap: 15px;
12}
13
14.device-item {
15 border: 2px solid #e2e8f0;
16 border-radius: 8px;
17 padding: 15px;
18 transition: border-color 0.3s ease;
19}
20
21.device-item.connected {
22 border-color: #48bb78;
23 background-color: #f0fff4;
24}
25
26.device-item.disconnected {
27 border-color: #f56565;
28 background-color: #fff5f5;
29}
30
31.device-header {
32 display: flex;
33 justify-content: space-between;
34 align-items: center;
35 margin-bottom: 10px;
36}
37
38.device-name {
39 font-weight: bold;
40 font-size: 1.1em;
41}
42
43.device-status-badge {
44 padding: 4px 8px;
45 border-radius: 4px;
46 font-size: 0.9em;
47}
48
49.device-item.connected .device-status-badge {
50 background-color: #48bb78;
51 color: white;
52}
53
54.device-item.disconnected .device-status-badge {
55 background-color: #f56565;
56 color: white;
57}
58
59.device-details {
60 margin-top: 10px;
61}
62
63.device-info {
64 display: flex;
65 flex-wrap: wrap;
66 gap: 15px;
67 font-size: 0.9em;
68 color: #666;
69}
70
71.device-badge {
72 padding: 2px 8px;
73 border-radius: 12px;
74 font-size: 0.8em;
75 font-weight: bold;
76 margin-left: 10px;
77}
78
79.device-badge.single-device {
80 background-color: #e2e8f0;
81 color: #4a5568;
82}
83
84.device-badge.multi-device {
85 background-color: #667eea;
86 color: white;
87}
88
89.secret-metadata {
90 display: grid;
91 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
92 gap: 10px;
93 margin: 15px 0;
94 padding: 15px;
95 background-color: #f7fafc;
96 border-radius: 6px;
97}
98
99.metadata-item {
100 font-size: 0.9em;
101}
102
103.metadata-item strong {
104 color: #4a5568;
105}
106
107.secret-data {
108 margin-top: 20px;
109}
110
111body {
112 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
113 background-color: #f5f5f5;
114 color: #333;
115}
116
117.container {
118 max-width: 1200px;
119 margin: 0 auto;
120 padding: 20px;
121}
122
123.header {
124 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
125 color: white;
126 padding: 30px;
127 border-radius: 10px;
128 margin-bottom: 30px;
129 text-align: center;
130}
131
132.header h1 {
133 font-size: 2.5em;
134 margin-bottom: 10px;
135}
136
137.header p {
138 font-size: 1.1em;
139 opacity: 0.9;
140}
141
142.section {
143 background: white;
144 border-radius: 10px;
145 padding: 25px;
146 margin-bottom: 25px;
147 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
148}
149
150.section h2 {
151 color: #333;
152 margin-bottom: 20px;
153 font-size: 1.5em;
154 border-bottom: 2px solid #667eea;
155 padding-bottom: 10px;
156}
157
158.form-group {
159 margin-bottom: 20px;
160}
161
162.form-group label {
163 display: block;
164 margin-bottom: 5px;
165 font-weight: 600;
166 color: #555;
167}
168
169.form-group input, .form-group textarea {
170 width: 100%;
171 padding: 12px;
172 border: 2px solid #e1e5e9;
173 border-radius: 6px;
174 font-size: 14px;
175 transition: border-color 0.3s ease;
176}
177
178.form-group input:focus, .form-group textarea:focus {
179 outline: none;
180 border-color: #667eea;
181 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
182}
183
184.form-group textarea {
185 resize: vertical;
186 min-height: 120px;
187 font-family: Monaco, 'Cascadia Code', Consolas, monospace;
188}
189
190.kv-pair {
191 display: flex;
192 gap: 10px;
193 margin-bottom: 10px;
194 align-items: center;
195}
196
197.kv-pair input[type="text"] {
198 flex: 1;
199}
200
201.kv-pair input[name*="key"] {
202 flex: 0 0 30%;
203}
204
205.kv-pair input[name*="value"] {
206 flex: 0 0 60%;
207}
208
209.btn-small {
210 padding: 0;
211 font-size: 14px;
212 width: 28px;
213 height: 28px;
214 display: flex;
215 align-items: center;
216 justify-content: center;
217 line-height: 1;
218}
219
220.btn-add {
221 background: #38a169;
222}
223
224.btn-add:hover {
225 background: #2f855a;
226 box-shadow: 0 4px 12px rgba(56, 161, 105, 0.3);
227}
228
229.btn-remove {
230 background: #e53e3e;
231}
232
233.btn-remove:hover {
234 background: #c53030;
235 box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
236}
237
238.kv-container {
239 border: 2px dashed #e2e8f0;
240 border-radius: 8px;
241 padding: 15px;
242 background: #f8f9fa;
243}
244
245.kv-header {
246 display: flex;
247 justify-content: space-between;
248 align-items: center;
249 margin-bottom: 15px;
250 font-weight: 600;
251 color: #4a5568;
252}
253
254.add-first-pair {
255 text-align: center;
256 color: #666;
257 padding: 20px;
258}
259
260.advanced-section {
261 margin-top: 20px;
262 border: 2px solid #e2e8f0;
263 border-radius: 8px;
264 overflow: hidden;
265}
266
267.advanced-toggle {
268 background: #f7fafc;
269 border: none;
270 width: 100%;
271 padding: 15px;
272 text-align: left;
273 cursor: pointer;
274 font-weight: 600;
275 color: #4a5568;
276 transition: background-color 0.2s ease;
277 display: flex;
278 justify-content: space-between;
279 align-items: center;
280}
281
282.advanced-toggle:hover {
283 background: #edf2f7;
284}
285
286.advanced-toggle .arrow {
287 transition: transform 0.2s ease;
288 font-size: 12px;
289}
290
291.advanced-toggle.expanded .arrow {
292 transform: rotate(180deg);
293}
294
295.advanced-content {
296 display: none;
297 padding: 20px;
298 background: white;
299 border-top: 1px solid #e2e8f0;
300}
301
302.advanced-content.show {
303 display: block;
304}
305
306.metadata-field {
307 margin-bottom: 15px;
308}
309
310.metadata-field label {
311 display: block;
312 margin-bottom: 5px;
313 font-weight: 600;
314 color: #555;
315 font-size: 14px;
316}
317
318.metadata-field input, .metadata-field textarea {
319 width: 100%;
320 padding: 10px;
321 border: 2px solid #e1e5e9;
322 border-radius: 6px;
323 font-size: 14px;
324}
325
326.metadata-field textarea {
327 resize: vertical;
328 min-height: 60px;
329}
330
331.tags-container {
332 border: 2px dashed #e2e8f0;
333 border-radius: 8px;
334 padding: 15px;
335 background: #f8f9fa;
336}
337
338.tags-header {
339 display: flex;
340 justify-content: space-between;
341 align-items: center;
342 margin-bottom: 10px;
343 font-weight: 600;
344 color: #4a5568;
345 font-size: 14px;
346}
347
348.tag-pair {
349 display: flex;
350 gap: 10px;
351 margin-bottom: 8px;
352 align-items: center;
353}
354
355.tag-pair input {
356 flex: 1;
357 padding: 8px;
358 border: 1px solid #d1d5db;
359 border-radius: 4px;
360 font-size: 13px;
361}
362
363.btn {
364 background: #667eea;
365 color: white;
366 border: none;
367 padding: 20px 20px;
368 border-radius: 6px;
369 cursor: pointer;
370 font-size: 14px;
371 font-weight: 600;
372 transition: all 0.3s ease;
373 text-decoration: none;
374}
375
376.btn:hover {
377 background: #5a67d8;
378 transform: translateY(-2px);
379 box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
380}
381
382.btn-danger {
383 background: #e53e3e;
384}
385
386.btn-danger:hover {
387 background: #c53030;
388 box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
389}
390
391.btn-secondary {
392 background: #718096;
393}
394
395.btn-secondary:hover {
396 background: #4a5568;
397 box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3);
398}
399
400.btn-small {
401 padding: 8px 12px;
402 font-size: 12px;
403}
404
405/* Header layout adjustments for authentication */
406.header-content {
407 display: flex;
408 justify-content: space-between;
409 align-items: flex-start;
410 gap: 20px;
411}
412
413.header-text {
414 flex: 1;
415}
416
417.header-auth {
418 display: flex;
419 flex-direction: column;
420 align-items: flex-end;
421 gap: 10px;
422 min-width: 200px;
423}
424
425/* Authentication status styles */
426.auth-status {
427 padding: 8px 12px;
428 border-radius: 6px;
429 font-size: 14px;
430 font-weight: 600;
431 text-align: center;
432 min-width: 180px;
433}
434
435.auth-status.authenticated {
436 background-color: #f0fff4;
437 color: #22543d;
438 border: 2px solid #48bb78;
439}
440
441.auth-status.expired {
442 background-color: #fffbeb;
443 color: #b45309;
444 border: 2px solid #ed8936;
445}
446
447.auth-status.not-authenticated {
448 background-color: #fff5f5;
449 color: #c53030;
450 border: 2px solid #f56565;
451}
452
453/* Authentication modal styles */
454.auth-modal {
455 position: fixed;
456 top: 0;
457 left: 0;
458 width: 100%;
459 height: 100%;
460 background-color: rgba(0, 0, 0, 0.6);
461 display: flex;
462 justify-content: center;
463 align-items: center;
464 z-index: 1000;
465}
466
467.auth-modal-content {
468 background: white;
469 padding: 30px;
470 border-radius: 12px;
471 max-width: 500px;
472 width: 90%;
473 max-height: 80vh;
474 overflow-y: auto;
475 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
476}
477
478.auth-modal-content h2 {
479 margin-bottom: 15px;
480 color: #2d3748;
481 text-align: center;
482}
483
484.auth-modal-content p {
485 margin-bottom: 20px;
486 color: #4a5568;
487 line-height: 1.5;
488}
489
490.auth-instructions {
491 background-color: #f7fafc;
492 padding: 15px;
493 border-radius: 8px;
494 margin-bottom: 20px;
495 border-left: 4px solid #667eea;
496}
497
498.auth-instructions code {
499 background-color: #edf2f7;
500 padding: 2px 6px;
501 border-radius: 4px;
502 font-family: 'Courier New', monospace;
503 color: #2d3748;
504 display: block;
505 margin: 10px 0;
506 padding: 8px 12px;
507 font-size: 14px;
508}
509
510.auth-instructions small {
511 color: #718096;
512}
513
514.auth-modal .form-group {
515 margin-bottom: 20px;
516}
517
518.auth-modal .form-group label {
519 display: block;
520 margin-bottom: 8px;
521 font-weight: 600;
522 color: #2d3748;
523}
524
525.auth-modal textarea {
526 width: 100%;
527 padding: 12px;
528 border: 2px solid #e2e8f0;
529 border-radius: 6px;
530 font-size: 14px;
531 font-family: 'Courier New', monospace;
532 resize: vertical;
533 min-height: 100px;
534}
535
536.auth-modal textarea:focus {
537 border-color: #667eea;
538 outline: none;
539 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
540}
541
542.auth-actions {
543 display: flex;
544 gap: 10px;
545 justify-content: flex-end;
546 margin-top: 20px;
547}
548
549.auth-actions .btn {
550 padding: 12px 20px;
551 min-width: 100px;
552}
553
554/* Responsive adjustments */
555@media (max-width: 768px) {
556 .header-content {
557 flex-direction: column;
558 align-items: stretch;
559 }
560
561 .header-auth {
562 align-items: stretch;
563 min-width: unset;
564 }
565
566 .auth-status {
567 min-width: unset;
568 text-align: left;
569 }
570
571 .auth-modal-content {
572 padding: 20px;
573 margin: 20px;
574 }
575
576 .auth-actions {
577 flex-direction: column;
578 }
579
580 .auth-actions .btn {
581 width: 100%;
582 }
583}
584
585.secrets-list {
586 margin-top: 20px;
587}
588
589.secret-item {
590 background: #f8f9fa;
591 border: 1px solid #e2e8f0;
592 border-radius: 6px;
593 padding: 15px;
594 margin-bottom: 10px;
595 display: flex;
596 justify-content: between;
597 align-items: center;
598}
599
600.secret-name {
601 font-weight: 600;
602 color: #2d3748;
603 flex-grow: 1;
604}
605
606.secret-actions {
607 display: flex;
608 gap: 10px;
609}
610
611.loading {
612 text-align: center;
613 padding: 20px;
614 color: #666;
615}
616
617.error {
618 background: #fed7d7;
619 border: 1px solid #feb2b2;
620 color: #c53030;
621 padding: 15px;
622 border-radius: 6px;
623 margin-bottom: 20px;
624}
625
626.success {
627 background: #c6f6d5;
628 border: 1px solid #9ae6b4;
629 color: #22543d;
630 padding: 15px;
631 border-radius: 6px;
632 margin-bottom: 20px;
633}
634
635.json-preview {
636 background: #1a202c;
637 color: #e2e8f0;
638 padding: 15px;
639 border-radius: 6px;
640 font-family: Monaco, 'Cascadia Code', Consolas, monospace;
641 font-size: 12px;
642 white-space: pre-wrap;
643 max-height: 300px;
644 overflow-y: auto;
645 margin-top: 10px;
646}
647
648.stats {
649 display: grid;
650 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
651 gap: 20px;
652 margin-bottom: 30px;
653}
654
655.stat-card {
656 background: white;
657 padding: 20px;
658 border-radius: 10px;
659 text-align: center;
660 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
661}
662
663.stat-number {
664 font-size: 2em;
665 font-weight: bold;
666 color: #667eea;
667 margin-bottom: 5px;
668}
669
670.stat-label {
671 color: #666;
672 font-size: 0.9em;
673}
674
675.toolbar {
676 display: flex;
677 gap: 10px;
678 margin-bottom: 20px;
679 align-items: center;
680}
681
682@media (max-width: 768px) {
683 .container {
684 padding: 10px;
685 }
686
687 .header h1 {
688 font-size: 1.8em;
689 }
690
691 .secret-item {
692 flex-direction: column;
693 align-items: stretch;
694 }
695
696 .secret-actions {
697 margin-top: 10px;
698 justify-content: flex-end;
699 }
700}