Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
5.2 kB · 270 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271/* KidLisp Editor - Keeps (Tezos/NFT) Styles */
/* ============================================ KEEPS CONTAINER ============================================ */
#keeps-container { display: flex; flex-direction: column; gap: 0; padding: 0; height: 100%;}
/* Compact status bar for contract info */.keeps-status-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;}
.keeps-network { font-size: 10px; padding: 2px 6px; background: #4a9c5d; color: white; border-radius: 8px; font-family: monospace;}
/* ============================================ WALLET CONNECTION ============================================ */
.keeps-wallet { display: flex; flex-direction: column; gap: 8px;}
.keeps-connect-btn { padding: 12px 20px; background: linear-gradient(135deg, #0066ff 0%, #0044cc 100%); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.2s;}
.keeps-connect-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);}
.keeps-connect-btn.connected { background: linear-gradient(135deg, #4a9c5d 0%, #3a7c4d 100%);}
.keeps-address { font-family: monospace; font-size: 12px; color: var(--text-secondary); padding: 8px 12px; background: var(--bg-secondary); border-radius: 6px; word-break: break-all;}
/* ============================================ MINTING ============================================ */
.keeps-mint-section { display: flex; flex-direction: column; gap: 12px;}
.keeps-code-preview { background: var(--bg-secondary); border-radius: 8px; padding: 12px; max-height: 120px; overflow-y: auto;}
.keeps-code-label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;}
#keeps-code-text { font-family: monospace; font-size: 12px; color: var(--text-primary); margin: 0; white-space: pre-wrap; word-break: break-word;}
.keeps-mint-btn { padding: 14px 24px; background: linear-gradient(135deg, var(--ac-purple) 0%, rgb(175, 62, 125) 100%); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer; transition: all 0.2s;}
.keeps-mint-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(205, 92, 155, 0.4);}
.keeps-mint-btn:disabled { opacity: 0.5; cursor: not-allowed;}
/* ============================================ STATUS & INFO ============================================ */
.keeps-status { font-size: 13px; color: var(--text-secondary); min-height: 20px;}
.keeps-status.error { color: #e74c3c; }.keeps-status.success { color: #4a9c5d; }
.keeps-info { font-size: 13px; color: var(--text-tertiary); line-height: 1.5;}
.keeps-info p { margin: 0 0 8px 0;}
.keeps-hint { font-family: monospace; font-size: 12px;}
/* ============================================ LOGIN SECTION ============================================ */
.keeps-login-section { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle);}
.keeps-login-btn { padding: 12px 20px; background: linear-gradient(135deg, var(--ac-purple) 0%, rgb(175, 62, 125) 100%); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.2s;}
.keeps-login-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(205, 92, 155, 0.3);}
.keeps-login-btn.logged-in { background: linear-gradient(135deg, #4a9c5d 0%, #3a7c4d 100%);}
.keeps-user-info { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-secondary); border-radius: 6px;}
.keeps-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover;}
.keeps-user-name { font-size: 13px; font-weight: 500; color: var(--text-primary);}
.keeps-logout-btn { margin-left: auto; padding: 4px 10px; background: transparent; border: 1px solid var(--border-color); border-radius: 4px; font-size: 11px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s;}
.keeps-logout-btn:hover { background: var(--bg-tertiary); color: var(--text-primary);}
/* ============================================ LOGGED OUT/IN STATES ============================================ */
.keeps-logged-out { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; text-align: center; border-top: 1px solid var(--border-subtle);}
.keeps-login-prompt { display: flex; flex-direction: column; align-items: center; gap: 10px;}
.keeps-login-prompt .keeps-icon { font-size: 24px; opacity: 0.7;}
.keeps-login-prompt p { font-size: 13px; color: var(--text-tertiary); margin: 0;}
.keeps-logged-in { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-top: 1px solid var(--border-subtle);