aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1/* KidLisp Editor - Keeps (Tezos/NFT) Styles */
2
3/* ============================================
4 KEEPS CONTAINER
5 ============================================ */
6
7#keeps-container {
8 display: flex;
9 flex-direction: column;
10 gap: 0;
11 padding: 0;
12 height: 100%;
13}
14
15/* Compact status bar for contract info */
16.keeps-status-bar {
17 display: flex;
18 align-items: center;
19 gap: 8px;
20 padding: 6px 10px;
21 background: var(--bg-secondary);
22 border-bottom: 1px solid var(--border-subtle);
23 flex-shrink: 0;
24}
25
26.keeps-network {
27 font-size: 10px;
28 padding: 2px 6px;
29 background: #4a9c5d;
30 color: white;
31 border-radius: 8px;
32 font-family: monospace;
33}
34
35/* ============================================
36 WALLET CONNECTION
37 ============================================ */
38
39.keeps-wallet {
40 display: flex;
41 flex-direction: column;
42 gap: 8px;
43}
44
45.keeps-connect-btn {
46 padding: 12px 20px;
47 background: linear-gradient(135deg, #0066ff 0%, #0044cc 100%);
48 color: white;
49 border: none;
50 border-radius: 8px;
51 font-size: 14px;
52 font-weight: bold;
53 cursor: pointer;
54 transition: all 0.2s;
55}
56
57.keeps-connect-btn:hover {
58 transform: translateY(-1px);
59 box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
60}
61
62.keeps-connect-btn.connected {
63 background: linear-gradient(135deg, #4a9c5d 0%, #3a7c4d 100%);
64}
65
66.keeps-address {
67 font-family: monospace;
68 font-size: 12px;
69 color: var(--text-secondary);
70 padding: 8px 12px;
71 background: var(--bg-secondary);
72 border-radius: 6px;
73 word-break: break-all;
74}
75
76/* ============================================
77 MINTING
78 ============================================ */
79
80.keeps-mint-section {
81 display: flex;
82 flex-direction: column;
83 gap: 12px;
84}
85
86.keeps-code-preview {
87 background: var(--bg-secondary);
88 border-radius: 8px;
89 padding: 12px;
90 max-height: 120px;
91 overflow-y: auto;
92}
93
94.keeps-code-label {
95 font-size: 11px;
96 color: var(--text-tertiary);
97 margin-bottom: 8px;
98 text-transform: uppercase;
99 letter-spacing: 0.5px;
100}
101
102#keeps-code-text {
103 font-family: monospace;
104 font-size: 12px;
105 color: var(--text-primary);
106 margin: 0;
107 white-space: pre-wrap;
108 word-break: break-word;
109}
110
111.keeps-mint-btn {
112 padding: 14px 24px;
113 background: linear-gradient(135deg, var(--ac-purple) 0%, rgb(175, 62, 125) 100%);
114 color: white;
115 border: none;
116 border-radius: 8px;
117 font-size: 15px;
118 font-weight: bold;
119 cursor: pointer;
120 transition: all 0.2s;
121}
122
123.keeps-mint-btn:hover:not(:disabled) {
124 transform: translateY(-1px);
125 box-shadow: 0 4px 12px rgba(205, 92, 155, 0.4);
126}
127
128.keeps-mint-btn:disabled {
129 opacity: 0.5;
130 cursor: not-allowed;
131}
132
133/* ============================================
134 STATUS & INFO
135 ============================================ */
136
137.keeps-status {
138 font-size: 13px;
139 color: var(--text-secondary);
140 min-height: 20px;
141}
142
143.keeps-status.error { color: #e74c3c; }
144.keeps-status.success { color: #4a9c5d; }
145
146.keeps-info {
147 font-size: 13px;
148 color: var(--text-tertiary);
149 line-height: 1.5;
150}
151
152.keeps-info p {
153 margin: 0 0 8px 0;
154}
155
156.keeps-hint {
157 font-family: monospace;
158 font-size: 12px;
159}
160
161/* ============================================
162 LOGIN SECTION
163 ============================================ */
164
165.keeps-login-section {
166 display: flex;
167 flex-direction: column;
168 gap: 8px;
169 padding-bottom: 12px;
170 border-bottom: 1px solid var(--border-subtle);
171}
172
173.keeps-login-btn {
174 padding: 12px 20px;
175 background: linear-gradient(135deg, var(--ac-purple) 0%, rgb(175, 62, 125) 100%);
176 color: white;
177 border: none;
178 border-radius: 8px;
179 font-size: 14px;
180 font-weight: bold;
181 cursor: pointer;
182 transition: all 0.2s;
183}
184
185.keeps-login-btn:hover {
186 transform: translateY(-1px);
187 box-shadow: 0 4px 12px rgba(205, 92, 155, 0.3);
188}
189
190.keeps-login-btn.logged-in {
191 background: linear-gradient(135deg, #4a9c5d 0%, #3a7c4d 100%);
192}
193
194.keeps-user-info {
195 display: flex;
196 align-items: center;
197 gap: 10px;
198 padding: 8px 12px;
199 background: var(--bg-secondary);
200 border-radius: 6px;
201}
202
203.keeps-user-avatar {
204 width: 28px;
205 height: 28px;
206 border-radius: 50%;
207 object-fit: cover;
208}
209
210.keeps-user-name {
211 font-size: 13px;
212 font-weight: 500;
213 color: var(--text-primary);
214}
215
216.keeps-logout-btn {
217 margin-left: auto;
218 padding: 4px 10px;
219 background: transparent;
220 border: 1px solid var(--border-color);
221 border-radius: 4px;
222 font-size: 11px;
223 color: var(--text-secondary);
224 cursor: pointer;
225 transition: all 0.2s;
226}
227
228.keeps-logout-btn:hover {
229 background: var(--bg-tertiary);
230 color: var(--text-primary);
231}
232
233/* ============================================
234 LOGGED OUT/IN STATES
235 ============================================ */
236
237.keeps-logged-out {
238 display: flex;
239 flex-direction: column;
240 align-items: center;
241 justify-content: center;
242 padding: 20px 16px;
243 text-align: center;
244 border-top: 1px solid var(--border-subtle);
245}
246
247.keeps-login-prompt {
248 display: flex;
249 flex-direction: column;
250 align-items: center;
251 gap: 10px;
252}
253
254.keeps-login-prompt .keeps-icon {
255 font-size: 24px;
256 opacity: 0.7;
257}
258
259.keeps-login-prompt p {
260 font-size: 13px;
261 color: var(--text-tertiary);
262 margin: 0;
263}
264
265.keeps-logged-in {
266 display: flex;
267 flex-direction: column;
268 gap: 12px;
269 padding: 12px;
270 border-top: 1px solid var(--border-subtle);