Sharpen the cyberpunk visuals — too diffused/hard to read
- Removed the whole-app animated scanline overlay entirely — biggest single contributor to the hazy look. - text-shadow glow blur cut from 8px to 2px across the board (headers keep a hint of neon, body text is now crisp). - hud-panel: solid 0.97-alpha background (was 0.88 + backdrop-blur(10px), which softened everything behind/inside it), tighter box-shadow. - Map: dropped the saturate/hue-rotate tile filter (just brightness now), halved drop-shadow blur radii on markers/links/fields/clusters. - Bumped low-opacity text (many labels were down at /30-/60 which reads fine on a mockup but is genuinely hard to read against a busy map) up to /75-/95 across Login/TeamPick/MapView.
This commit is contained in:
+34
-48
@@ -17,39 +17,25 @@ h1, h2, .font-display {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
/* Subtle animated scanline field over the whole app — cheap, pure-CSS. */
|
||||
#app::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 2000;
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 255, 242, 0.035) 0px,
|
||||
rgba(0, 255, 242, 0.035) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.text-glow-cyan { text-shadow: 0 0 8px rgba(0, 255, 242, 0.85); }
|
||||
.text-glow-orange { text-shadow: 0 0 8px rgba(255, 95, 31, 0.9); }
|
||||
.text-glow-green { text-shadow: 0 0 8px rgba(57, 255, 20, 0.9); }
|
||||
/* Tight, crisp glow — a hint of neon without blurring the text itself.
|
||||
These were 8px before, which read as diffused/hard to read; kept short
|
||||
enough here to add color without softening edges. */
|
||||
.text-glow-cyan { text-shadow: 0 0 2px rgba(0, 255, 242, 0.9); }
|
||||
.text-glow-orange { text-shadow: 0 0 2px rgba(255, 95, 31, 0.9); }
|
||||
.text-glow-green { text-shadow: 0 0 2px rgba(57, 255, 20, 0.9); }
|
||||
|
||||
.hud-panel {
|
||||
background: rgba(8, 10, 20, 0.88);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(0, 255, 242, 0.35);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 242, 0.12), inset 0 0 30px rgba(0, 255, 242, 0.04);
|
||||
background: rgba(6, 8, 16, 0.97);
|
||||
border: 1px solid rgba(0, 255, 242, 0.5);
|
||||
box-shadow: 0 0 6px rgba(0, 255, 242, 0.15);
|
||||
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
|
||||
}
|
||||
|
||||
/* Darken + tint the CARTO dark tiles a bit further and desaturate slightly
|
||||
so our neon markers/links pop harder against the basemap. */
|
||||
/* Darken the CARTO dark tiles a bit further so our neon markers/links pop
|
||||
harder against the basemap. Dropped the earlier saturate/hue-rotate —
|
||||
it was adding a slight haze over the whole map. */
|
||||
.leaflet-tile-pane {
|
||||
filter: brightness(0.75) saturate(1.3) hue-rotate(-6deg);
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
@@ -58,31 +44,31 @@ h1, h2, .font-display {
|
||||
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-tooltip {
|
||||
background: rgba(8, 10, 20, 0.92) !important;
|
||||
color: #d8fbff !important;
|
||||
border: 1px solid rgba(0, 255, 242, 0.4) !important;
|
||||
background: rgba(6, 8, 16, 0.97) !important;
|
||||
color: #f0feff !important;
|
||||
border: 1px solid rgba(0, 255, 242, 0.5) !important;
|
||||
font-family: 'Share Tech Mono', monospace !important;
|
||||
box-shadow: 0 0 12px rgba(0, 255, 242, 0.25) !important;
|
||||
box-shadow: 0 0 4px rgba(0, 255, 242, 0.2) !important;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
background: rgba(8, 10, 20, 0.92) !important;
|
||||
background: rgba(6, 8, 16, 0.97) !important;
|
||||
}
|
||||
|
||||
.regress-portal-marker {
|
||||
filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af));
|
||||
filter: drop-shadow(0 0 2px var(--portal-glow, #9ca3af));
|
||||
}
|
||||
.regress-portal-marker.claimed {
|
||||
animation: portal-pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes portal-pulse {
|
||||
0%, 100% { filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af)); }
|
||||
50% { filter: drop-shadow(0 0 10px var(--portal-glow, #9ca3af)); }
|
||||
0%, 100% { filter: drop-shadow(0 0 2px var(--portal-glow, #9ca3af)); }
|
||||
50% { filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af)); }
|
||||
}
|
||||
|
||||
.regress-link-orange { filter: drop-shadow(0 0 4px #ff5f1f); }
|
||||
.regress-link-green { filter: drop-shadow(0 0 4px #39ff14); }
|
||||
.regress-field-orange { filter: drop-shadow(0 0 6px #ff5f1f); }
|
||||
.regress-field-green { filter: drop-shadow(0 0 6px #39ff14); }
|
||||
.regress-link-orange { filter: drop-shadow(0 0 1.5px #ff5f1f); }
|
||||
.regress-link-green { filter: drop-shadow(0 0 1.5px #39ff14); }
|
||||
.regress-field-orange { filter: drop-shadow(0 0 2px #ff5f1f); }
|
||||
.regress-field-green { filter: drop-shadow(0 0 2px #39ff14); }
|
||||
|
||||
/* Reskin leaflet.markercluster's default light-green bubble look to match
|
||||
the HUD theme — overrides MarkerCluster.Default.css. Color reflects what's
|
||||
@@ -97,32 +83,32 @@ h1, h2, .font-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #d8fbff;
|
||||
color: #f0feff;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.regress-cluster--neutral div {
|
||||
background: radial-gradient(circle at 35% 35%, rgba(0, 255, 242, 0.35), rgba(0, 255, 242, 0.12) 70%);
|
||||
background: rgba(0, 255, 242, 0.22);
|
||||
border: 2px solid #00fff2;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 242, 0.5);
|
||||
box-shadow: 0 0 4px rgba(0, 255, 242, 0.4);
|
||||
}
|
||||
|
||||
.regress-cluster--orange div {
|
||||
background: radial-gradient(circle at 35% 35%, rgba(255, 95, 31, 0.45), rgba(255, 95, 31, 0.15) 70%);
|
||||
background: rgba(255, 95, 31, 0.3);
|
||||
border: 2px solid #ff5f1f;
|
||||
box-shadow: 0 0 12px rgba(255, 95, 31, 0.65);
|
||||
box-shadow: 0 0 5px rgba(255, 95, 31, 0.5);
|
||||
}
|
||||
|
||||
.regress-cluster--green div {
|
||||
background: radial-gradient(circle at 35% 35%, rgba(57, 255, 20, 0.45), rgba(57, 255, 20, 0.15) 70%);
|
||||
background: rgba(57, 255, 20, 0.3);
|
||||
border: 2px solid #39ff14;
|
||||
box-shadow: 0 0 12px rgba(57, 255, 20, 0.65);
|
||||
box-shadow: 0 0 5px rgba(57, 255, 20, 0.5);
|
||||
}
|
||||
|
||||
.regress-cluster--contested div {
|
||||
background: linear-gradient(135deg, rgba(255, 95, 31, 0.45) 50%, rgba(57, 255, 20, 0.45) 50%);
|
||||
background: linear-gradient(135deg, rgba(255, 95, 31, 0.35) 50%, rgba(57, 255, 20, 0.35) 50%);
|
||||
border: 2px solid #ffffff;
|
||||
box-shadow: 0 0 12px rgba(255, 0, 229, 0.55);
|
||||
box-shadow: 0 0 5px rgba(255, 0, 229, 0.4);
|
||||
}
|
||||
|
||||
@@ -43,7 +43,7 @@ async function handleNsecLogin() {
|
||||
></div>
|
||||
|
||||
<h1 class="font-display text-5xl font-black tracking-[0.3em] text-cyan-neon text-glow-cyan">REGRESS</h1>
|
||||
<p class="max-w-sm text-cyan-neon/60">
|
||||
<p class="max-w-sm text-cyan-neon/90">
|
||||
Real-world nodes. Two factions. Claim them for orange or green — sign in with Nostr to jack in.
|
||||
</p>
|
||||
<button
|
||||
@@ -53,11 +53,11 @@ async function handleNsecLogin() {
|
||||
>
|
||||
{{ loggingIn ? 'Authenticating…' : 'Connect with Nostr' }}
|
||||
</button>
|
||||
<p v-if="!hasNip07()" class="text-sm text-cyan-neon/40">
|
||||
<p v-if="!hasNip07()" class="text-sm text-cyan-neon/75">
|
||||
No NIP-07 extension detected — install Alby or nos2x, or open this app from the Archipelago dashboard.
|
||||
</p>
|
||||
|
||||
<button class="text-xs text-cyan-neon/30 underline hover:text-magenta-neon" @click="showNsecForm = !showNsecForm">
|
||||
<button class="text-xs text-cyan-neon/60 underline hover:text-magenta-neon" @click="showNsecForm = !showNsecForm">
|
||||
{{ showNsecForm ? 'Hide' : 'Or paste an nsec (unsafe)' }}
|
||||
</button>
|
||||
|
||||
|
||||
@@ -230,20 +230,20 @@ watch(linkSourceId, redraw);
|
||||
<div class="flex items-center gap-5">
|
||||
<span class="font-display text-lg font-black tracking-widest text-cyan-neon text-glow-cyan">REGRESS</span>
|
||||
<span class="flex items-center gap-1 font-bold text-orange-neon text-glow-orange">
|
||||
▲ {{ orangeScore?.claimedPlaces ?? 0 }} <span class="text-orange-neon/60">nodes</span> ·
|
||||
{{ orangeScore?.links ?? 0 }} <span class="text-orange-neon/60">links</span> ·
|
||||
{{ orangeScore?.fields ?? 0 }} <span class="text-orange-neon/60">fields</span> ·
|
||||
▲ {{ orangeScore?.claimedPlaces ?? 0 }} <span class="text-orange-neon/90">nodes</span> ·
|
||||
{{ orangeScore?.links ?? 0 }} <span class="text-orange-neon/90">links</span> ·
|
||||
{{ orangeScore?.fields ?? 0 }} <span class="text-orange-neon/90">fields</span> ·
|
||||
{{ (orangeScore?.areaKm2 ?? 0).toFixed(2) }} km²
|
||||
</span>
|
||||
<span class="flex items-center gap-1 font-bold text-green-neon text-glow-green">
|
||||
▲ {{ greenScore?.claimedPlaces ?? 0 }} <span class="text-green-neon/60">nodes</span> ·
|
||||
{{ greenScore?.links ?? 0 }} <span class="text-green-neon/60">links</span> ·
|
||||
{{ greenScore?.fields ?? 0 }} <span class="text-green-neon/60">fields</span> ·
|
||||
▲ {{ greenScore?.claimedPlaces ?? 0 }} <span class="text-green-neon/90">nodes</span> ·
|
||||
{{ greenScore?.links ?? 0 }} <span class="text-green-neon/90">links</span> ·
|
||||
{{ greenScore?.fields ?? 0 }} <span class="text-green-neon/90">fields</span> ·
|
||||
{{ (greenScore?.areaKm2 ?? 0).toFixed(2) }} km²
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-cyan-neon/70">
|
||||
<span class="text-cyan-neon/95">
|
||||
{{ auth.displayName ?? auth.pubkey?.slice(0, 8) }}//<span
|
||||
:class="auth.team === 'orange' ? 'text-orange-neon text-glow-orange' : 'text-green-neon text-glow-green'"
|
||||
class="font-bold uppercase"
|
||||
@@ -279,12 +279,12 @@ watch(linkSourceId, redraw);
|
||||
<h2 class="font-display font-bold text-cyan-neon text-glow-cyan">
|
||||
{{ selectedPlace.name || `Node ${selectedPlace.id}` }}
|
||||
</h2>
|
||||
<button class="text-cyan-neon/50 hover:text-cyan-neon" @click="selectedPlaceId = null">✕</button>
|
||||
<button class="text-cyan-neon/80 hover:text-cyan-neon" @click="selectedPlaceId = null">✕</button>
|
||||
</div>
|
||||
<p v-if="selectedPlace.address" class="mb-2 text-cyan-neon/50">{{ selectedPlace.address }}</p>
|
||||
<p v-if="selectedPlace.address" class="mb-2 text-cyan-neon/80">{{ selectedPlace.address }}</p>
|
||||
<p class="mb-3">
|
||||
STATUS:
|
||||
<span v-if="!selectedPlace.claim_team" class="text-cyan-neon/60">UNCLAIMED</span>
|
||||
<span v-if="!selectedPlace.claim_team" class="text-cyan-neon/90">UNCLAIMED</span>
|
||||
<span
|
||||
v-else
|
||||
class="font-bold uppercase"
|
||||
|
||||
@@ -23,7 +23,7 @@ async function pick(team: Team) {
|
||||
<template>
|
||||
<div class="flex h-full flex-col items-center justify-center gap-6 px-6 text-center">
|
||||
<h1 class="font-display text-3xl font-black tracking-widest text-cyan-neon text-glow-cyan">CHOOSE YOUR FACTION</h1>
|
||||
<p class="max-w-sm text-cyan-neon/60">
|
||||
<p class="max-w-sm text-cyan-neon/90">
|
||||
This choice is permanent — you can't switch teams later, so pick the side you're actually playing for.
|
||||
</p>
|
||||
<div class="flex gap-6">
|
||||
|
||||
Reference in New Issue
Block a user