47a56e2212
- Updated the glass-card and glass-button styles for improved aesthetics and functionality, including gradient borders and hover effects. - Introduced new info-card and info-card-button components with enhanced styling and interactive features. - Refactored existing HTML structure to utilize new card components, improving consistency across the UI. - Enhanced button interactions for better user experience during settings and logs access.
3.5 KiB
3.5 KiB
Quick Reference: Archipelago App UI Classes
Core CSS Classes
Containers
| Class | Use Case | Features |
|---|---|---|
.glass-card |
Main sections, modals, headers | Gradient border, strong blur (24px), inset highlights |
.info-card |
Status badges, metric displays | Gradient border, no hover effects |
bg-white/5 |
Simple info rows | Plain dark background, no borders |
Buttons
| Class | Use Case | Features |
|---|---|---|
.info-card-button |
Primary actions (Copy Info, View Logs) | Looks like .info-card, lifts and brightens on hover |
.glass-button |
Secondary actions (Settings, Close ×) | Simple glass effect, subtle hover |
HTML Snippets
Info Card (Display Only)
<div class="info-card flex items-center gap-3">
<svg class="w-5 h-5 text-white/60"><!-- icon --></svg>
<div>
<p class="text-xs text-white/60">Label</p>
<p class="text-sm font-medium text-white">Value</p>
</div>
</div>
Action Button
<button class="mt-4 w-full info-card-button text-sm font-medium" onclick="doAction()">
Button Text
</button>
Info Row
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-white/60"><!-- icon --></svg>
<span class="text-white/80 text-sm">Label</span>
</div>
<span class="text-white/60 text-sm">Value</span>
</div>
Service UI Ports
| Service | Port | Status |
|---|---|---|
| Bitcoin Knots | 8334 | ✅ Live |
| LND | 8081 | ✅ Live |
| Core Lightning | 8082 | 🚧 Planned |
| Mempool | 8083 | 🚧 Planned |
Quick Deploy
# From docker/{service}-ui/ directory
sshpass -p "archipelago" rsync -avz --delete ./ archipelago@192.168.1.228:/tmp/{service}-ui-build/
sshpass -p "archipelago" ssh archipelago@192.168.1.228 \
"cd /tmp/{service}-ui-build && \
sudo podman build -t {service}-ui:latest . && \
sudo podman stop {service}-ui 2>/dev/null || true && \
sudo podman rm {service}-ui 2>/dev/null || true && \
sudo podman run -d --name {service}-ui --restart unless-stopped \
--network=host --label 'com.archipelago.parent-app={service-id}' \
{service}-ui:latest"
Visual Hierarchy
┌─────────────────────────────────────┐
│ .glass-card (Main Container) │ ← Strongest visual weight
│ ┌─────────────────────────────────┐ │
│ │ .info-card (Status Badge) │ │ ← Medium weight, no hover
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ │ bg-white/5 (Info Row) │ │ ← Lightest weight
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ │ .info-card-button (Action) │ │ ← Interactive, lifts on hover
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘