Something went wrong. Try again.
add or update alt text on your media forked from psingletary.com/verifier
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295/* Verifier — witchsky cyan base theme */
:root { --text: #F9FAFB; --text-muted: #A5B2C5; --button-bg: hsl(174, 83%, 38%); --button-text: #FFFFFF; --button-hover-bg: hsl(174, 78%, 32%); --card-bg: #1C2B35; --card-border: #394A58; --navbar-bg: #15232C; --success-bg: rgba(45, 242, 143, 0.12); --success-text: #2CF28F; --success-border: rgba(45, 242, 143, 0.25); --error-bg: rgba(246, 90, 127, 0.12); --error-text: hsl(348, 92%, 64%); --error-border: rgba(246, 90, 127, 0.25);}
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 18px; background: #111822; color: var(--text); min-height: 100vh;}
h1, h2, h3 { color: var(--text); }h1 { font-size: 2em; margin: 0.5em 0; }h2 { font-size: 1.5em; margin: 1em 0 0.5em; }h3 { font-size: 1.2em; margin: 0.8em 0 0.4em; }p { line-height: 1.6; margin: 0.8em 0; }a { color: var(--button-bg); text-decoration: none; }a:hover { text-decoration: underline; }a:visited { color: var(--button-hover-bg); }
.app-container { min-height: 100vh; display: flex; flex-direction: column; }.main-container { max-width: 800px; margin: 0 auto; padding: 20px; width: 100%; flex: 1; }
form { display: flex; flex-direction: column; gap: 12px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 20px;}
input, select { padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); color: var(--text); font-size: 1em; min-height: 48px;}
input:focus, select:focus { border-color: var(--button-bg); outline: none; }
button { padding: 10px 20px; border: none; border-radius: 6px; font-size: 1em; font-weight: 600; cursor: pointer; min-height: 48px; background: var(--button-bg); color: var(--button-text);}
button:hover { background: var(--button-hover-bg); }button:disabled { opacity: 0.6; cursor: not-allowed; }
/* Navbar */.navbar { background: var(--navbar-bg); padding: 12px 24px; border-bottom: 1px solid var(--card-border); display: flex; justify-content: space-between; align-items: center;}
.navbar-logo { font-size: 1.4em; font-weight: 700; }.navbar-logo a { color: var(--button-bg); text-decoration: none; }.navbar-logo a:hover { text-decoration: none; }.navbar-actions { display: flex; gap: 10px; align-items: center; }
.navbar .login-button { background: var(--button-bg); color: var(--button-text); }.navbar .logout-button { background: transparent; border: 1px solid var(--card-border); color: var(--text); }
/* Footer */.footer { background: var(--navbar-bg); padding: 14px 24px; border-top: 1px solid var(--card-border); text-align: center; color: var(--text-muted); font-size: 0.9em;}
/* Home & Login */.home-page, .login-page { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 20px; text-align: center;}
.home-content, .login-content { max-width: 500px; width: 100%; padding: 30px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;}
.home-content h1, .login-content h1 { margin-top: 0; }.home-content p, .login-content p { margin-bottom: 20px; }
.home-button { display: inline-block; padding: 12px 30px; background: var(--button-bg); color: var(--button-text); border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 1.1em;}
.home-button:hover { background: var(--button-hover-bg); text-decoration: none; }
/* Verifier */.verifier-container { max-width: 600px; margin: 30px auto; padding: 0 20px; }
.verifier-section { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 24px; margin-bottom: 16px;}
.verifier-section h2 { margin-top: 0; font-size: 1.3em; }
.verifier-form-container { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; padding: 0; border: 0; background: none; border-radius: 0;}
.verifier-form-container input,.verifier-form-container select { flex: 1; min-width: 150px; }
.verifier-submit-button { white-space: nowrap; }
/* Suggestions */.verifier-suggestions-list { list-style: none; padding: 0; margin: 10px 0 0 0; border: 1px solid var(--card-border); border-radius: 6px; max-height: 250px; overflow-y: auto; background: var(--card-bg);}
.verifier-suggestion-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: 10px; min-height: 44px;}
.verifier-suggestion-item:last-child { border-bottom: none; }.verifier-suggestion-item:hover { background: var(--button-bg); color: var(--button-text); }.verifier-suggestion-item.loading, .verifier-suggestion-item.none { color: var(--text-muted); font-style: italic; }.verifier-suggestion-item:hover.loading, .verifier-suggestion-item:hover.none { background: none; color: var(--text-muted); }
.verifier-suggestion-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }.verifier-suggestion-text { display: flex; flex-direction: column; overflow: hidden; }.verifier-suggestion-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.verifier-suggestion-handle { font-size: 0.9em; color: var(--text-muted); }
/* Duplicate note */.verifier-duplicate-note { margin: 10px 0 0 0; padding: 10px 14px; background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); border-radius: 6px; font-style: italic;}
/* Status Box */.verifier-status-box { padding: 14px; border-radius: 6px; margin: 14px 0;}
.verifier-status-box-success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }.verifier-status-box-error { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); }.verifier-status-box p { margin: 0; }.verifier-status-box a { color: var(--success-text); font-weight: 600; text-decoration: underline; }
/* Verifier list */.verifier-list { list-style: none; padding: 0; margin: 0; }
.verifier-list-item { display: flex; align-items: center; justify-content: space-between; padding: 14px; border: 1px solid var(--card-border); border-radius: 6px; margin-bottom: 8px; background: var(--card-bg); gap: 10px; flex-wrap: wrap;}
.verifier-list-item-content { flex: 1; min-width: 200px; }
.verifier-display-name { font-weight: 600; display: block; }.verifier-display-name a { color: var(--text); text-decoration: none; }.verifier-display-name a:hover { color: var(--button-bg); }
.verifier-list-item-handle { font-size: 0.9em; color: var(--text-muted); }.verifier-list-item-date { font-size: 0.85em; color: var(--text-muted); margin-top: 4px; }
.verifier-list-item-actions { flex-shrink: 0; }
/* Revoke button — only flash animation kept */@keyframes flash-red-warning { 0%, 100% { background-color: var(--error-bg); color: var(--error-text); box-shadow: 0 0 0 0 rgba(246, 90, 127, 0.4); } 50% { background-color: var(--error-text); color: var(--button-text); box-shadow: 0 0 0 8px rgba(246, 90, 127, 0); }}
.verifier-revoke-button { background: transparent; border: 1px solid var(--error-text); color: var(--error-text); font-weight: 600; border-radius: 6px; padding: 8px 16px; cursor: pointer; min-height: 44px; font-size: 0.95em;}
.verifier-revoke-button:hover { animation: flash-red-warning 2.5s ease-in-out infinite; border-color: var(--error-text); }.verifier-revoke-button:disabled { animation: none; opacity: 0.6; cursor: not-allowed; }
/* Load more */.verifier-load-more-container { margin-top: 14px; text-align: center; }
.verifier-action-button { background: var(--button-bg); color: var(--button-text); border: none; border-radius: 6px; padding: 10px 24px; font-weight: 600; cursor: pointer;}
.verifier-action-button:hover { background: var(--button-hover-bg); }.verifier-action-button:disabled { opacity: 0.6; cursor: not-allowed; }
/* Mobile */@media (max-width: 480px) { .verifier-list-item { flex-direction: column; align-items: flex-start; } .verifier-list-item-actions { align-self: flex-end; } .verifier-form-container { flex-direction: column; }}