Jocaru/echoes-of-the-ash
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Unify search bar styles across components

Browse Source
This commit is contained in:
Joan
2026-02-06 11:45:25 +01:00
parent 539377e63d
commit fb92f28a69
7 changed files with 412 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
pwa/src/components/GameHeader.css Normal file
View File

@@ -0,0 +1,308 @@
/* GameHeader.css - Unified Tech HUD Theme */
.game-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
height: 60px;
background-color: rgba(5, 5, 8, 0.9);
border-bottom: 2px solid rgba(225, 29, 72, 0.4);
backdrop-filter: blur(16px);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
inset 0 -1px 0 rgba(225, 29, 72, 0.2);
/* Tech grid background pattern */
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 20px 20px;
}
.header-left {
display: flex;
align-items: center;
}
.header-title-container {
display: flex;
align-items: baseline;
padding: 0.4rem 1.2rem;
background: linear-gradient(135deg, rgba(225, 29, 72, 0.1) 0%, transparent 100%);
border: 1px solid rgba(225, 29, 72, 0.3);
/* Angled Cut */
clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
border-left: 3px solid var(--game-color-primary);
position: relative;
}
.header-left h1 {
margin: 0;
font-size: 1.2rem;
font-weight: 800;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Orbitron', 'Saira Condensed', sans-serif;
text-shadow: 0 0 10px rgba(225, 29, 72, 0.4);
line-height: 1;
}
.header-version {
font-size: 0.65rem;
color: var(--game-color-primary);
margin-left: 0.5rem;
font-family: monospace;
opacity: 0.8;
}
/* --- Navigation Tabs (Unified Angled Style) --- */
.nav-links {
display: flex;
gap: 4px;
/* Tight gaps for HUD feel */
align-items: center;
height: 100%;
margin-left: 1.5rem;
}
.nav-link {
height: 70%;
/* Not full height, more like buttons */
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0 1.2rem;
color: var(--game-text-secondary);
cursor: pointer;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
/* Tech Shape: Angled top-left and bottom-right */
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
position: relative;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
}
.nav-link.active {
background: rgba(225, 29, 72, 0.15);
border-color: var(--game-color-primary);
color: #fff;
box-shadow: inset 0 0 10px rgba(225, 29, 72, 0.1);
}
/* Active indicator "Light" */
.nav-link.active::after {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 6px;
height: 6px;
background: var(--game-color-primary);
box-shadow: 0 0 5px var(--game-color-primary);
}
/* --- User Info Section (Unified Style) --- */
.user-info {
display: flex;
align-items: center;
gap: 0.8rem;
}
/* Tech Player Badge - Matches Nav Link Shape */
.player-count-badge {
height: 36px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(76, 209, 55, 0.3);
clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
font-size: 0.8rem;
color: #aaddaa;
font-family: monospace;
}
.status-dot {
width: 6px;
height: 6px;
background-color: #4cd137;
box-shadow: 0 0 6px #4cd137;
/* Start square/diamond for tech feel */
transform: rotate(45deg);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 4px #4cd137;
opacity: 1;
}
50% {
box-shadow: 0 0 8px #4cd137;
opacity: 0.6;
}
100% {
box-shadow: 0 0 4px #4cd137;
opacity: 1;
}
}
/* Username Link - Matches Nav Link Style exactly */
.username-link {
height: 36px;
background: rgba(10, 10, 15, 0.8);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 0 1.2rem;
color: var(--game-text-primary);
cursor: pointer;
font-size: 0.85rem;
font-weight: 700;
transition: all 0.2s;
/* Same tech shape */
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
text-transform: uppercase;
display: flex;
align-items: center;
}
.username-link:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--game-color-primary);
color: #fff;
}
.username-link.active {
border-color: var(--game-color-primary);
background: rgba(225, 29, 72, 0.15);
box-shadow: 0 0 10px rgba(225, 29, 72, 0.1);
}
/* Icon Buttons (Account/Logout) - Tech Squares */
.header-icon-btn {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--game-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: all 0.2s;
/* Angled corners */
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.header-icon-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--game-text-primary);
color: #fff;
transform: scale(1.05);
}
/* Override Language Selector Styles in Header context */
.game-header .language-btn {
height: 36px;
border-radius: 0;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.game-header .language-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
}
.game-header .language-dropdown {
border-radius: 0;
border: 1px solid var(--game-border-color);
background: rgba(10, 10, 15, 0.95);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
/* Separator line */
.header-sep {
width: 1px;
height: 24px;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
margin: 0 2px;
}
/* Responsive */
@media (max-width: 768px) {
.game-header {
padding: 0 0.5rem;
height: 56px;
}
.header-left h1 {
display: none;
/* Hide full text on mobile */
}
.header-title-container::after {
content: 'EotA';
/* Short title */
color: #fff;
font-weight: 800;
}
.nav-links {
margin-left: 0.5rem;
gap: 4px;
flex: 1;
}
.nav-link {
padding: 0 0.6rem;
font-size: 0.7rem;
clip-path: none;
/* Simplify for mobile touch */
border-radius: 4px;
}
.user-info {
gap: 0.4rem;
}
.player-count-badge {
padding: 0 6px;
}
.count-text {
display: none;
}
/* Dot only */
.username-link {
padding: 0 0.5rem;
max-width: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
/* block for ellipsis */
line-height: 34px;
}
}