Unify search bar styles across components
This commit is contained in:
Joan
@@ -207,7 +207,6 @@ html {
|
||||
.username-link {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.2rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
cursor: pointer;
|
||||
@@ -335,12 +334,54 @@ html {
|
||||
border-bottom: 3px solid var(--game-color-primary);
|
||||
}
|
||||
|
||||
|
||||
.game-main {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Unified Search Bar */
|
||||
.game-search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid var(--game-border-color);
|
||||
border-radius: var(--game-radius-sm);
|
||||
padding: 0 0.8rem;
|
||||
transition: all 0.2s ease;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.game-search-container:focus-within {
|
||||
border-color: var(--game-text-secondary);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.game-search-icon {
|
||||
font-size: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
opacity: 0.7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.game-search-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-family: var(--game-font-main);
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.game-search-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Explore Tab - Desktop 3-Column Layout */
|
||||
.explore-tab-desktop {
|
||||
display: grid;
|
||||
|
||||
308
pwa/src/components/GameHeader.css
Normal file
308
pwa/src/components/GameHeader.css
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,9 @@ import './Game.css'
|
||||
|
||||
import { GameTooltip } from './common/GameTooltip'
|
||||
|
||||
// Import the new specific header styles
|
||||
import './GameHeader.css'
|
||||
|
||||
interface GameHeaderProps {
|
||||
className?: string
|
||||
}
|
||||
@@ -61,43 +64,61 @@ export default function GameHeader({ className = '' }: GameHeaderProps) {
|
||||
return (
|
||||
<header className={`game-header ${className}`}>
|
||||
<div className="header-left">
|
||||
<div className="header-title-container">
|
||||
<h1>Echoes of the Ash</h1>
|
||||
<span className="header-version">v0.9</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="nav-links">
|
||||
<button
|
||||
onClick={() => navigate('/game')}
|
||||
className={`nav-link ${isActive('/game') ? 'active' : ''}`}
|
||||
>
|
||||
🎮 {t('common.game')}
|
||||
<span style={{ fontSize: '1.1em' }}>🎮</span> {t('common.game')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigate('/leaderboards')}
|
||||
className={`nav-link ${isActive('/leaderboards') ? 'active' : ''}`}
|
||||
>
|
||||
🏆 {t('common.leaderboards')}
|
||||
<span style={{ fontSize: '1.1em' }}>🏆</span> {t('common.leaderboards')}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div className="user-info">
|
||||
<LanguageSelector />
|
||||
<GameTooltip content={t('game.onlineCount', { count: playerCount })}>
|
||||
<div className="player-count-badge">
|
||||
<span className="status-dot"></span>
|
||||
<span className="count-text">{t('game.onlineCount', { count: playerCount })}</span>
|
||||
<span className="count-text">{playerCount}</span>
|
||||
</div>
|
||||
</GameTooltip>
|
||||
|
||||
<LanguageSelector />
|
||||
|
||||
<button
|
||||
onClick={() => navigate(`/profile/${currentCharacter?.id}`)}
|
||||
className={`username-link ${isOnOwnProfile ? 'active' : ''}`}
|
||||
>
|
||||
{currentCharacter?.name}
|
||||
</button>
|
||||
|
||||
<div className="header-sep"></div>
|
||||
|
||||
<GameTooltip content={t('common.account')}>
|
||||
<button
|
||||
onClick={() => navigate('/account')}
|
||||
className="button-secondary"
|
||||
className="header-icon-btn"
|
||||
aria-label={t('common.account')}
|
||||
>
|
||||
{t('common.account')}
|
||||
⚙️
|
||||
</button>
|
||||
<button onClick={logout} className="button-secondary">{t('auth.logout')}</button>
|
||||
</GameTooltip>
|
||||
|
||||
<GameTooltip content={t('auth.logout')}>
|
||||
<button onClick={logout} className="header-icon-btn" aria-label={t('auth.logout')}>
|
||||
🚪
|
||||
</button>
|
||||
</GameTooltip>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
@@ -91,6 +91,7 @@
|
||||
|
||||
/* Items List */
|
||||
.items-list {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
|
||||
@@ -55,14 +55,17 @@ export const CombatInventoryModal: React.FC<CombatInventoryModalProps> = ({
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<div className="game-search-container" style={{ marginBottom: '1.5rem' }}>
|
||||
<span className="game-search-icon">🔍</span>
|
||||
<input
|
||||
type="text"
|
||||
className="search-input"
|
||||
className="game-search-input"
|
||||
placeholder={t('combat.modal.search_items')}
|
||||
value={searchTerm}
|
||||
onChange={e => setSearchTerm(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="items-list">
|
||||
{combatItems.length === 0 ? (
|
||||
|
||||
@@ -428,9 +428,10 @@ function InventoryModal({
|
||||
|
||||
{/* Right Content: Search & List */}
|
||||
<div className="inventory-content-area">
|
||||
<div className="inventory-search-bar">
|
||||
<span className="search-icon">🔍</span>
|
||||
<div className="game-search-container" style={{ marginBottom: '1.5rem' }}>
|
||||
<span className="game-search-icon">🔍</span>
|
||||
<input
|
||||
className="game-search-input"
|
||||
type="text"
|
||||
placeholder={t('game.searchItems')}
|
||||
value={inventoryFilter}
|
||||
|
||||
@@ -488,6 +488,8 @@ function Workbench({
|
||||
{/* Column 2: Items List */}
|
||||
<div className="workbench-items-column">
|
||||
<div className="workbench-filters">
|
||||
<div className="game-search-container">
|
||||
<span className="game-search-icon">🔍</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('game.searchItems')}
|
||||
@@ -497,9 +499,10 @@ function Workbench({
|
||||
else if (workbenchTab === 'repair') onSetRepairFilter(e.target.value)
|
||||
else onSetUncraftFilter(e.target.value)
|
||||
}}
|
||||
className="filter-input"
|
||||
className="game-search-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="workbench-items-list">
|
||||
{items.filter(item => {
|
||||
|
||||
Reference in New Issue
Block a user