diff --git a/files/fido2-ui-sdk.css b/files/fido2-ui-sdk.css index 67905ff..ed6d224 100644 --- a/files/fido2-ui-sdk.css +++ b/files/fido2-ui-sdk.css @@ -16,6 +16,7 @@ display: flex; align-items: center; gap: 12px; + flex-wrap: wrap; } .fido2-sdk-logo { @@ -86,33 +87,9 @@ border-radius: 6px; background-color: #e7f1ff; border-left: 4px solid #0d6efd; -} + } -.fido2-sdk-standalone { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - min-height: 100vh; - padding: 40px 20px; -} - -.fido2-sdk-standalone .container { - max-width: 1000px; -} - -.fido2-sdk-standalone .card { - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - border: none; -} - -.fido2-sdk-standalone .card-header { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - border-bottom: 2px solid #dee2e6; -} - -.fido2-sdk-standalone .card-body { - background-color: #ffffff; -} - -.fido2-sdk-table .text-danger { + .fido2-sdk-table .text-danger { color: #dc3545 !important; text-decoration: none; transition: all 0.2s ease; @@ -134,15 +111,11 @@ @media (max-width: 768px) { .fido2-sdk-modal .modal-dialog { - margin: 10px; - max-width: calc(100% - 20px); - } + margin: 10px; + max-width: calc(100% - 20px); + } - .fido2-sdk-standalone { - padding: 20px 10px; - } - - .fido2-sdk-table th, + .fido2-sdk-table th, .fido2-sdk-table td { padding: 8px 12px; font-size: 14px; @@ -156,6 +129,25 @@ .fido2-sdk-logo { max-height: 30px; } + + .fido2-sdk-status-badge { + width: 100%; + order: 3; + margin-top: 8px; + } + + .fido2-sdk-header .btn-close { + order: 2; + margin-left: auto; + } + + .fido2-sdk-header .modal-title { + order: 1; + } + + .fido2-sdk-header .fido2-sdk-logo { + order: 0; + } } .fido2-sdk-loading {