raucao/marco
1
0
Fork 0
Code Issues 18 Pull Requests Actions Releases 21 Activity

Refactor markup and styles to re-use existing code where possible

Browse Source
This commit is contained in:
raucao
2026-08-20 14:58:00 -06:00
parent 99ebdf3378
commit 135a30f1cd
5 changed files with 290 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/styles/app.css
+90 -236
View File
@@ -2427,259 +2427,113 @@ button.create-place {
border-radius: 10px;
}
/* Zap Photo Modal */
.zap-photo-modal-overlay {
position: fixed;
inset: 0;
background: rgb(0 0 0 / 70%);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
/* Generic modal heading reset (shared by all modals) */
.modal-content h2,
.modal-content h3 {
margin-top: 0;
}
/* Zap Photo Modal — scoped, nested styles */
.zap-photo-modal {
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
width: 100%;
max-width: 420px;
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.zap-photo-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--divider-color);
}
.zap-photo-modal-header h3 {
margin: 0;
}
.zap-modal-close {
background: none;
border: none;
padding: 0.25rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #898989;
}
.zap-modal-close:hover {
color: var(--body-text-color);
}
.zap-modal-status {
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--divider-color);
min-height: 2.5rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.zap-modal-loading {
font-size: 0.85rem;
color: #898989;
}
.zap-modal-address {
display: flex;
align-items: center;
gap: 0.5rem;
}
.zap-modal-badge {
background: #f7b500;
color: white;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.zap-modal-address-text {
font-family: monospace;
font-size: 0.8rem;
color: #555;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zap-modal-error-msg {
color: var(--danger-color);
font-size: 0.85rem;
padding: 0.5rem 0.75rem;
background: rgb(234 67 53 / 8%);
border-radius: 4px;
}
.zap-modal-body {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.zap-modal-center {
align-items: center;
text-align: center;
}
.zap-amount-display {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.4rem;
}
& h2 {
margin-bottom: 1rem;
}
.zap-amount-value {
font-size: 2rem;
font-weight: 700;
color: #f7b500;
}
& .amount-display {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.4rem;
}
.zap-amount-unit {
font-size: 0.9rem;
color: #898989;
}
& .amount-value {
font-size: 2rem;
font-weight: 700;
color: var(--default-list-color);
}
.zap-slider {
width: 100%;
accent-color: #f7b500;
cursor: pointer;
}
& .amount-unit {
font-size: 0.9rem;
color: var(--body-text-color);
opacity: 0.7;
}
.zap-slider-ticks {
display: flex;
justify-content: space-between;
font-size: 0.7rem;
color: #aaa;
padding: 0 0.25rem;
}
& .zap-slider {
width: 100%;
accent-color: var(--default-list-color);
cursor: pointer;
}
.zap-min-max {
font-size: 0.75rem;
color: #898989;
text-align: center;
}
& .slider-ticks {
display: flex;
justify-content: space-between;
font-size: 0.7rem;
color: var(--body-text-color);
opacity: 0.5;
padding: 0 0.25rem;
}
.zap-message-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
& .min-max {
font-size: 0.75rem;
color: var(--body-text-color);
opacity: 0.7;
}
.zap-message-field label {
font-size: 0.8rem;
color: #898989;
}
& .lightning-address {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.zap-message-field textarea {
width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.5rem;
font-family: inherit;
font-size: 0.9rem;
resize: vertical;
}
& .lightning-badge {
background: var(--default-list-color);
color: white;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.zap-message-field textarea:focus {
outline: none;
border-color: var(--link-color);
}
& .lightning-address-text {
font-family: monospace;
font-size: 0.8rem;
color: var(--body-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zap-modal-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
& .centered {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.zap-modal-hint {
font-size: 0.8rem;
color: #898989;
text-align: center;
}
& .success {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.zap-spinner {
width: 32px;
height: 32px;
border: 3px solid #eee;
border-top-color: #f7b500;
border-radius: 50%;
animation: zap-spin 0.8s linear infinite;
}
& .success-icon {
font-size: 3rem;
}
@keyframes zap-spin {
to {
transform: rotate(360deg);
& .success h4 {
margin: 0;
font-size: 1.2rem;
}
& .success p {
margin: 0;
font-size: 0.9rem;
color: var(--body-text-color);
}
}
.zap-pay-prompt {
text-align: center;
font-size: 0.9rem;
}
.zap-qr-container {
display: flex;
justify-content: center;
}
.zap-qr-container canvas {
border-radius: 8px;
background: white;
padding: 8px;
}
.zap-qr-container a {
display: block;
}
.zap-webln-btn {
width: 100%;
}
.zap-open-wallet-link {
width: 100%;
text-align: center;
text-decoration: none;
}
.zap-invoice-details {
display: flex;
justify-content: center;
font-size: 0.8rem;
}
.zap-success {
gap: 0.5rem;
}
.zap-success-icon {
font-size: 3rem;
}
.zap-success h4 {
margin: 0;
font-size: 1.2rem;
}
.zap-success p {
margin: 0;
font-size: 0.9rem;
color: #555;
}