Something went wrong. Try again.
A Kubernetes operator that bridges Hardware Security Module (HSM) data storage with Kubernetes Secrets, providing true secret portability th
Something went wrong. Try again.
12 kB · 700 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700* { box-sizing: border-box; margin: 0; padding: 0;}
/* Multi-device support styles */.device-status { display: flex; flex-direction: column; gap: 15px;}
.device-item { border: 2px solid #e2e8f0; border-radius: 8px; padding: 15px; transition: border-color 0.3s ease;}
.device-item.connected { border-color: #48bb78; background-color: #f0fff4;}
.device-item.disconnected { border-color: #f56565; background-color: #fff5f5;}
.device-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.device-name { font-weight: bold; font-size: 1.1em;}
.device-status-badge { padding: 4px 8px; border-radius: 4px; font-size: 0.9em;}
.device-item.connected .device-status-badge { background-color: #48bb78; color: white;}
.device-item.disconnected .device-status-badge { background-color: #f56565; color: white;}
.device-details { margin-top: 10px;}
.device-info { display: flex; flex-wrap: wrap; gap: 15px; font-size: 0.9em; color: #666;}
.device-badge { padding: 2px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold; margin-left: 10px;}
.device-badge.single-device { background-color: #e2e8f0; color: #4a5568;}
.device-badge.multi-device { background-color: #667eea; color: white;}
.secret-metadata { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 15px 0; padding: 15px; background-color: #f7fafc; border-radius: 6px;}
.metadata-item { font-size: 0.9em;}
.metadata-item strong { color: #4a5568;}
.secret-data { margin-top: 20px;}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f5f5f5; color: #333;}
.container { max-width: 1200px; margin: 0 auto; padding: 20px;}
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 10px; margin-bottom: 30px; text-align: center;}
.header h1 { font-size: 2.5em; margin-bottom: 10px;}
.header p { font-size: 1.1em; opacity: 0.9;}
.section { background: white; border-radius: 10px; padding: 25px; margin-bottom: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.section h2 { color: #333; margin-bottom: 20px; font-size: 1.5em; border-bottom: 2px solid #667eea; padding-bottom: 10px;}
.form-group { margin-bottom: 20px;}
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: #555;}
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 6px; font-size: 14px; transition: border-color 0.3s ease;}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);}
.form-group textarea { resize: vertical; min-height: 120px; font-family: Monaco, 'Cascadia Code', Consolas, monospace;}
.kv-pair { display: flex; gap: 10px; margin-bottom: 10px; align-items: center;}
.kv-pair input[type="text"] { flex: 1;}
.kv-pair input[name*="key"] { flex: 0 0 30%;}
.kv-pair input[name*="value"] { flex: 0 0 60%;}
.btn-small { padding: 0; font-size: 14px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; line-height: 1;}
.btn-add { background: #38a169;}
.btn-add:hover { background: #2f855a; box-shadow: 0 4px 12px rgba(56, 161, 105, 0.3);}
.btn-remove { background: #e53e3e;}
.btn-remove:hover { background: #c53030; box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);}
.kv-container { border: 2px dashed #e2e8f0; border-radius: 8px; padding: 15px; background: #f8f9fa;}
.kv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-weight: 600; color: #4a5568;}
.add-first-pair { text-align: center; color: #666; padding: 20px;}
.advanced-section { margin-top: 20px; border: 2px solid #e2e8f0; border-radius: 8px; overflow: hidden;}
.advanced-toggle { background: #f7fafc; border: none; width: 100%; padding: 15px; text-align: left; cursor: pointer; font-weight: 600; color: #4a5568; transition: background-color 0.2s ease; display: flex; justify-content: space-between; align-items: center;}
.advanced-toggle:hover { background: #edf2f7;}
.advanced-toggle .arrow { transition: transform 0.2s ease; font-size: 12px;}
.advanced-toggle.expanded .arrow { transform: rotate(180deg);}
.advanced-content { display: none; padding: 20px; background: white; border-top: 1px solid #e2e8f0;}
.advanced-content.show { display: block;}
.metadata-field { margin-bottom: 15px;}
.metadata-field label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; font-size: 14px;}
.metadata-field input, .metadata-field textarea { width: 100%; padding: 10px; border: 2px solid #e1e5e9; border-radius: 6px; font-size: 14px;}
.metadata-field textarea { resize: vertical; min-height: 60px;}
.tags-container { border: 2px dashed #e2e8f0; border-radius: 8px; padding: 15px; background: #f8f9fa;}
.tags-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 600; color: #4a5568; font-size: 14px;}
.tag-pair { display: flex; gap: 10px; margin-bottom: 8px; align-items: center;}
.tag-pair input { flex: 1; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px;}
.btn { background: #667eea; color: white; border: none; padding: 20px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s ease; text-decoration: none;}
.btn:hover { background: #5a67d8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);}
.btn-danger { background: #e53e3e;}
.btn-danger:hover { background: #c53030; box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);}
.btn-secondary { background: #718096;}
.btn-secondary:hover { background: #4a5568; box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3);}
.btn-small { padding: 8px 12px; font-size: 12px;}
/* Header layout adjustments for authentication */.header-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;}
.header-text { flex: 1;}
.header-auth { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 200px;}
/* Authentication status styles */.auth-status { padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; text-align: center; min-width: 180px;}
.auth-status.authenticated { background-color: #f0fff4; color: #22543d; border: 2px solid #48bb78;}
.auth-status.expired { background-color: #fffbeb; color: #b45309; border: 2px solid #ed8936;}
.auth-status.not-authenticated { background-color: #fff5f5; color: #c53030; border: 2px solid #f56565;}
/* Authentication modal styles */.auth-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000;}
.auth-modal-content { background: white; padding: 30px; border-radius: 12px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);}
.auth-modal-content h2 { margin-bottom: 15px; color: #2d3748; text-align: center;}
.auth-modal-content p { margin-bottom: 20px; color: #4a5568; line-height: 1.5;}
.auth-instructions { background-color: #f7fafc; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #667eea;}
.auth-instructions code { background-color: #edf2f7; padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', monospace; color: #2d3748; display: block; margin: 10px 0; padding: 8px 12px; font-size: 14px;}
.auth-instructions small { color: #718096;}
.auth-modal .form-group { margin-bottom: 20px;}
.auth-modal .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #2d3748;}
.auth-modal textarea { width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 6px; font-size: 14px; font-family: 'Courier New', monospace; resize: vertical; min-height: 100px;}
.auth-modal textarea:focus { border-color: #667eea; outline: none; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);}
.auth-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;}
.auth-actions .btn { padding: 12px 20px; min-width: 100px;}
/* Responsive adjustments */@media (max-width: 768px) { .header-content { flex-direction: column; align-items: stretch; }
.header-auth { align-items: stretch; min-width: unset; }
.auth-status { min-width: unset; text-align: left; }
.auth-modal-content { padding: 20px; margin: 20px; }
.auth-actions { flex-direction: column; }
.auth-actions .btn { width: 100%; }}
.secrets-list { margin-top: 20px;}
.secret-item { background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 6px; padding: 15px; margin-bottom: 10px; display: flex; justify-content: between; align-items: center;}
.secret-name { font-weight: 600; color: #2d3748; flex-grow: 1;}
.secret-actions { display: flex; gap: 10px;}
.loading { text-align: center; padding: 20px; color: #666;}
.error { background: #fed7d7; border: 1px solid #feb2b2; color: #c53030; padding: 15px; border-radius: 6px; margin-bottom: 20px;}
.success { background: #c6f6d5; border: 1px solid #9ae6b4; color: #22543d; padding: 15px; border-radius: 6px; margin-bottom: 20px;}
.json-preview { background: #1a202c; color: #e2e8f0; padding: 15px; border-radius: 6px; font-family: Monaco, 'Cascadia Code', Consolas, monospace; font-size: 12px; white-space: pre-wrap; max-height: 300px; overflow-y: auto; margin-top: 10px;}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;}
.stat-card { background: white; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.stat-number { font-size: 2em; font-weight: bold; color: #667eea; margin-bottom: 5px;}
.stat-label { color: #666; font-size: 0.9em;}
.toolbar { display: flex; gap: 10px; margin-bottom: 20px; align-items: center;}
@media (max-width: 768px) { .container { padding: 10px; } .header h1 { font-size: 1.8em; } .secret-item { flex-direction: column; align-items: stretch; } .secret-actions { margin-top: 10px; justify-content: flex-end; }}