steem-auth-vue
Version:
A Vue 3 authentication component for Steem blockchain and Echelon sidechain
2 lines (1 loc) • 16.1 kB
CSS
.steem-auth-accounts-row{display:flex;gap:1em;margin-bottom:1.5em;justify-content:flex-start;flex-wrap:wrap}.steem-auth-account-card{display:flex;flex-direction:column;align-items:center;background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:.5em 1em .7em;cursor:pointer;transition:box-shadow .15s,border-color .15s;min-width:80px;max-width:110px;box-shadow:0 1px 4px #0000000a}.steem-auth-account-card:hover{border-color:#3182ce;box-shadow:0 2px 8px #3182ce1f}.steem-auth-account-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-bottom:.4em;background:#e2e8f0}.steem-auth-account-username{font-size:.97em;font-weight:500;color:#222;text-align:center;word-break:break-all}.pin-form[data-v-de706b5b]{display:flex;flex-direction:column;align-items:center}.pin-input-row[data-v-de706b5b]{display:flex;gap:.5em;margin-bottom:1em;justify-content:center}.pin-input[data-v-de706b5b]{width:2.5em;height:2.5em;font-size:2em;text-align:center;border:1px solid #cbd5e1;border-radius:8px;background:#f7fafc;outline:none;transition:border-color .2s}.pin-input[data-v-de706b5b]:focus{border-color:#3182ce}.pin-input.error[data-v-de706b5b]{border-color:#e53e3e}.pin-confirm-row[data-v-de706b5b]{margin-bottom:1em;text-align:center}.steem-auth-account-switcher[data-v-b117e7ea]{margin-bottom:1em;display:flex;align-items:center;gap:.5em}.steem-auth-button-danger[data-v-b117e7ea]{background:#e53e3e;color:#fff}.steem-auth-dropdown-wrapper[data-v-b117e7ea]{position:relative;display:inline-block}.steem-auth-dropdown-menu[data-v-b117e7ea]{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ccc;border-radius:4px;min-width:180px;box-shadow:0 2px 8px #0000001f;z-index:1000;padding:.5em 0}.steem-auth-dropdown-current[data-v-b117e7ea]{padding:.5em 1em;font-size:.95em;color:#333;border-bottom:1px solid #eee}.steem-auth-dropdown-list[data-v-b117e7ea]{max-height:180px;overflow-y:auto}.steem-auth-dropdown-item[data-v-b117e7ea]{width:100%;text-align:left;background:none;border:none;padding:.5em 1em;font-size:1em;cursor:pointer;color:#333;transition:background .15s}.steem-auth-dropdown-item[data-v-b117e7ea]:disabled{color:#aaa;cursor:not-allowed}.steem-auth-dropdown-item[data-v-b117e7ea]:not(:disabled):hover{background:#f5f5f5}.steem-auth-dropdown-divider[data-v-b117e7ea]{border-top:1px solid #eee;margin:.5em 0}.steem-auth-add-account-heading[data-v-b117e7ea]{margin-bottom:1em;text-align:left}.steem-auth-current-account-msg[data-v-b117e7ea]{font-size:.98em;color:#444;margin-bottom:.25em}.steem-auth-button[data-v-b117e7ea]{min-width:160px;max-width:220px;width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block}.transaction-status[data-v-8017f550]{margin-bottom:20px;padding:15px;border-radius:8px;box-shadow:0 4px 12px #00000026}.is-pending[data-v-8017f550]{background-color:#f8f9fa;border-left:4px solid #4299e1}.is-success[data-v-8017f550]{background-color:#f0fff4;border-left:4px solid #48bb78}.is-error[data-v-8017f550]{background-color:#fff5f5;border-left:4px solid #f56565}.transaction-pending[data-v-8017f550],.transaction-success[data-v-8017f550],.transaction-error[data-v-8017f550]{display:flex;flex-direction:column;align-items:flex-start}.transaction-spinner[data-v-8017f550]{width:24px;height:24px;border:3px solid rgba(66,153,225,.3);border-radius:50%;border-top-color:#4299e1;animation:spin-8017f550 1s ease-in-out infinite;margin-bottom:10px}@keyframes spin-8017f550{to{transform:rotate(360deg)}}.transaction-success-icon[data-v-8017f550]{width:24px;height:24px;background-color:#48bb78;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:10px}.transaction-error-icon[data-v-8017f550]{width:24px;height:24px;background-color:#f56565;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:10px}.transaction-id[data-v-8017f550]{font-size:.8rem;color:#718096;margin-top:5px;word-break:break-all}.transaction-dismiss[data-v-8017f550]{margin-top:10px;padding:5px 10px;background-color:transparent;border:1px solid #e2e8f0;border-radius:4px;cursor:pointer;font-size:.8rem;transition:all .2s}.transaction-dismiss[data-v-8017f550]:hover{background-color:#edf2f7}.operation-header[data-v-8017f550]{display:flex;align-items:center;margin-bottom:.5em}.operation-label[data-v-8017f550]{font-weight:700;font-size:1.1em;margin-right:.5em}.operation-tooltip[data-v-8017f550]{position:relative;display:inline-block}.tooltip-icon[data-v-8017f550]{background:#eee;border-radius:50%;width:1.2em;height:1.2em;display:inline-flex;align-items:center;justify-content:center;font-size:.9em;cursor:pointer;margin-left:.2em}.tooltip-content[data-v-8017f550]{visibility:hidden;width:220px;background:#333;color:#fff;text-align:left;border-radius:4px;padding:.5em;position:absolute;z-index:10;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s;font-size:.95em}.operation-tooltip:hover .tooltip-content[data-v-8017f550]{visibility:visible;opacity:1}.operation-header[data-v-f134ec20]{display:flex;align-items:center;margin-bottom:.5em}.operation-label[data-v-f134ec20]{font-weight:700;font-size:1.1em;margin-right:.5em}.operation-tooltip[data-v-f134ec20]{position:relative;display:inline-block}.tooltip-icon[data-v-f134ec20]{background:#eee;border-radius:50%;width:1.2em;height:1.2em;display:inline-flex;align-items:center;justify-content:center;font-size:.9em;cursor:pointer;margin-left:.2em}.tooltip-content[data-v-f134ec20]{visibility:hidden;width:220px;background:#333;color:#fff;text-align:left;border-radius:4px;padding:.5em;position:absolute;z-index:10;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s;font-size:.95em}.operation-tooltip:hover .tooltip-content[data-v-f134ec20]{visibility:visible;opacity:1}:root{--steem-auth-primary-color: #1a73e8;--steem-auth-primary-hover: #1557b0;--steem-auth-secondary-color: #10B981;--steem-auth-background: #FFFFFF;--steem-auth-card-background: #FFFFFF;--steem-auth-border-color: #E2E8F0;--steem-auth-error-color: #d93025;--steem-auth-text-color: #FFFFFF;--steem-auth-text-primary: #0F172A;--steem-auth-text-secondary: #64748B;--steem-auth-button-radius: 8px;--steem-auth-input-radius: 8px;--steem-auth-button-padding: .875rem 1.5rem;--steem-auth-input-padding: .875rem 1rem;--steem-auth-button-font-size: .9375rem;--steem-auth-input-font-size: .9375rem;--steem-auth-shadow: 0 2px 4px rgba(0, 0, 0, .1);--transition: all .15s ease}.dark-theme{--steem-auth-primary-color: #3b82f6;--steem-auth-primary-hover: #2563eb;--steem-auth-secondary-color: #10B981;--steem-auth-background: #1e293b;--steem-auth-card-background: #0f172a;--steem-auth-border-color: #334155;--steem-auth-error-color: #ef4444;--steem-auth-text-color: #FFFFFF;--steem-auth-text-primary: #e2e8f0;--steem-auth-text-secondary: #94a3b8;--steem-auth-shadow: 0 4px 6px rgba(0, 0, 0, .3)}.steem-auth-component{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;color:var(--steem-auth-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.steem-auth-button{background-color:var(--steem-auth-primary-color);color:var(--steem-auth-text-color);border:none;padding:var(--steem-auth-button-padding);border-radius:var(--steem-auth-button-radius);cursor:pointer;font-weight:600;font-size:var(--steem-auth-button-font-size);transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.5rem;width:auto}.steem-auth-button:hover{background-color:var(--steem-auth-primary-hover);transform:translateY(-1px)}.steem-auth-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.steem-auth-button.full-width{width:100%}.steem-auth-theme-toggle{background:transparent;border:none;color:var(--steem-auth-text-primary);font-size:1.25rem;padding:.25rem;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:.5rem;transition:var(--transition)}.steem-auth-theme-toggle:hover{background-color:#0000001a}.dark-theme .steem-auth-theme-toggle:hover{background-color:#ffffff1a}.steem-auth-input{max-width:100%;padding:var(--steem-auth-input-padding);border:1px solid var(--steem-auth-border-color);border-radius:var(--steem-auth-input-radius);font-size:var(--steem-auth-input-font-size);transition:var(--transition);background-color:var(--steem-auth-background);color:var(--steem-auth-text-primary)}.steem-auth-input:focus{border-color:var(--steem-auth-primary-color);box-shadow:0 0 0 3px #6366f11a;outline:none}.steem-auth-input.error{border-color:var(--steem-auth-error-color)}.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.form-group label{font-weight:600;color:var(--steem-auth-text-secondary);font-size:.875rem}.steem-auth-success-message{color:var(--steem-auth-secondary-color);padding:10px;margin-top:10px;background-color:#10b9811a;border-radius:var(--steem-auth-button-radius);font-size:14px}.steem-auth-error-message{color:var(--steem-auth-error-color);padding:10px;margin-top:10px;background-color:#ef44441a;border-radius:var(--steem-auth-button-radius);font-size:14px}.steem-auth-error-text{color:var(--steem-auth-error-color);font-size:.875rem;font-weight:500}.steem-auth-card{background:var(--steem-auth-card-background);border-radius:8px;box-shadow:var(--steem-auth-shadow);padding:1.5rem}.steem-auth-spinner{width:1.125rem;height:1.125rem;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.steem-auth-radio-option{display:flex;align-items:center;gap:5px}.steem-auth-checkbox-container{display:flex;align-items:center;gap:.5em;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.steem-auth-checkbox-container input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.steem-auth-checkbox-container input[type=checkbox]:checked+.steem-auth-checkmark:after{content:"";position:absolute;left:5px;top:0;width:6px;height:12px;border:solid #3182ce;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);display:block}.steem-auth-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.25);z-index:2000;display:flex;align-items:center;justify-content:center}.steem-auth-modal-content{background:#fff;border-radius:8px;min-width:340px;max-width:95vw;padding:1.5em 1.5em 1em;box-shadow:0 4px 24px #0000002e;position:relative}.steem-auth-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.steem-auth-modal-header h2{margin:0;font-size:1.25rem;color:var(--steem-auth-text-primary)}.steem-auth-modal-body{padding:0}.steem-auth-close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.steem-auth-close-button:hover{color:var(--steem-auth-text-primary)}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.steem-auth{display:flex;flex-direction:column}.steem-auth-container{display:flex;align-items:center;gap:.5rem}.steem-auth-trigger{display:flex;align-items:center;justify-content:center}.steem-auth-user-profile{display:flex;align-items:center;gap:1rem}.steem-auth-username{font-weight:600;color:var(--steem-auth-text-primary)}.steem-auth-logout-button{padding:.5rem 1rem;font-size:.875rem}.steem-auth-options{display:flex;flex-direction:column;gap:1.5rem}.steem-auth-option{width:100%}.steem-auth-divider{text-align:center;margin:1em 0;color:#888;font-size:.97em;position:relative}.steem-auth-divider:before,.steem-auth-divider:after{content:"";flex:1;border-bottom:1px solid var(--steem-auth-border-color)}.steem-auth-divider span{background:#fff;padding:0 .5em;position:relative;z-index:1}.steem-auth-keychain-download{margin-left:1.5em;font-size:.95em}.steem-auth-keychain-download a{color:#e31337;font-weight:700;text-decoration:none}.steem-auth-keychain-download a:hover{text-decoration:underline}.steem-auth--dark .steem-auth-keychain-download{background-color:#fff2cc26}.steem-auth-keychain-container{display:flex;flex-direction:column;margin-left:10px}.steem-auth-keychain-status{font-size:.95em;margin-left:.5em}.steem-auth-keychain-status.available{color:#38a169}.steem-auth-keychain-status.unavailable{color:#e53e3e}.steem-auth--dark .steem-auth-keychain-status.available{color:#5ce488}.steem-auth--dark .steem-auth-keychain-status.unavailable{color:#ff6b79}.steem-auth-error-icon{font-size:1.125rem}.steem-auth-transactions-component{max-width:800px;margin:20px auto;padding:20px;border-radius:8px;background-color:var(--steem-auth-background);color:var(--steem-auth-text-primary)}.steem-auth-transactions-content{display:flex;flex-direction:column;gap:20px}.steem-auth-transaction-item{background:var(--steem-auth-card-background);padding:20px;border-radius:8px;box-shadow:var(--steem-auth-shadow);margin-bottom:20px}.steem-auth-transaction-form{margin-top:15px}.steem-auth-transaction-form .form-group div{display:grid}.steem-auth-transaction-form .steem-auth-button{width:100%}.steem-auth-transaction-form textarea{min-height:100px;resize:vertical;font-family:monospace;width:100%;padding:8px;border:1px solid var(--steem-auth-border-color);border-radius:4px;background-color:var(--steem-auth-background);color:var(--steem-auth-text-primary)}.steem-auth-auth-type-selector{margin-top:15px;padding:10px;background-color:var(--steem-auth-background);border-radius:4px;border:1px solid var(--steem-auth-border-color)}.steem-auth-radio-options{display:flex;gap:20px;margin-top:5px}.steem-auth-send-button{background:var(--steem-auth-primary-color);color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-weight:500;transition:background .2s;margin-top:15px;display:inline-block}.steem-auth-send-button:hover{background:var(--steem-auth-primary-hover)}.steem-auth-tab-panel{width:100%}.steem-auth-not-authenticated{text-align:center;padding:20px;color:var(--steem-auth-text-secondary)}.steem-auth-login-section{margin-bottom:1em}.steem-auth-add-account-heading{margin-bottom:1em;text-align:left}.steem-auth-current-account-msg{font-size:.98em;color:#444;margin-bottom:.25em}.steem-auth-login-form{display:flex;flex-direction:column;gap:1em}.steem-auth-keychain-option{margin-top:.5em}.steem-auth-checkmark{width:18px;height:18px;border:1.5px solid #3182ce;border-radius:4px;display:inline-block;position:relative}.steem-auth-label-text{font-size:1em;color:#333}.steem-auth-button-danger{background:#e53e3e;color:#fff}.steem-auth-modal-confirm{margin-top:1em;padding:1em;background:#fff5f5;border:1px solid #e53e3e;border-radius:6px;color:#e53e3e;display:flex;align-items:center;gap:1em}.steem-auth-accounts-list{margin-bottom:1em}.steem-auth-accounts-item{display:flex;align-items:center;justify-content:space-between;padding:.5em 0;border-bottom:1px solid #eee}.steem-auth-accounts-info{display:flex;align-items:center;gap:.5em}.steem-auth-accounts-username{font-weight:700}.steem-auth-accounts-auth{color:#888;font-size:.97em}.steem-auth-accounts-current{color:#3182ce;font-size:.97em;margin-left:.5em}.steem-auth-accounts-actions button{margin-left:.5em;min-width:64px}.steem-auth-account-switcher{margin-bottom:1em;display:flex;align-items:center;gap:.5em}.steem-auth-dropdown-wrapper{position:relative;display:inline-block}.steem-auth-dropdown-menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ccc;border-radius:4px;min-width:180px;box-shadow:0 2px 8px #0000001f;z-index:1000;padding:.5em 0}.steem-auth-dropdown-current{padding:.5em 1em;font-size:.95em;color:#333;border-bottom:1px solid #eee}.steem-auth-dropdown-list{max-height:180px;overflow-y:auto}.steem-auth-dropdown-item{width:100%;text-align:left;background:none;border:none;padding:.5em 1em;font-size:1em;cursor:pointer;color:#333;transition:background .15s}.steem-auth-dropdown-item:disabled{color:#aaa;cursor:not-allowed}.steem-auth-dropdown-item:not(:disabled):hover{background:#f5f5f5}.steem-auth-dropdown-divider{border-top:1px solid #eee;margin:.5em 0}