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

Refactor global UI to Tech-HUD style (clip-path)

Browse Source
This commit is contained in:
Joan
2026-02-06 11:51:58 +01:00
parent fb92f28a69
commit dcfc91b82b
6 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pwa/src/components/Game.css
View File

@@ -347,11 +347,11 @@ html {
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;
clip-path: var(--game-clip-path-sm);
}
.game-search-container:focus-within {
@@ -433,10 +433,10 @@ html {
.location-info {
background: var(--game-bg-panel);
padding: 1.5rem;
border-radius: var(--game-radius-md);
margin-bottom: 1.5rem;
border: 1px solid var(--game-border-color);
box-shadow: var(--game-shadow-card);
clip-path: var(--game-clip-path);
}
.location-info h2 {
@@ -775,9 +775,9 @@ html {
.movement-controls {
background: var(--game-bg-panel);
padding: 1.5rem;
border-radius: var(--game-radius-md);
border: 1px solid var(--game-border-color);
box-shadow: var(--game-shadow-card);
clip-path: var(--game-clip-path);
}
.movement-controls h3 {

3
pwa/src/components/common/GameProgressBar.tsx
View File

@@ -91,7 +91,8 @@ export const GameProgressBar: React.FC<GameProgressBarProps> = ({
<div className="progress-track" style={{
height,
backgroundColor: '#2d3748',
borderRadius: '4px',
borderRadius: '0px',
clipPath: 'var(--game-clip-path-sm)',
overflow: 'hidden',
display: 'flex',
justifyContent: align === 'right' ? 'flex-end' : 'flex-start'

2
pwa/src/components/game/CombatInventoryModal.css
View File

@@ -23,12 +23,12 @@
flex-direction: column;
background: linear-gradient(135deg, #1e2a38 0%, #121820 100%);
border: 1px solid #3a4b5c;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
overflow: hidden;
color: #e0e6ed;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
z-index: 2001;
clip-path: var(--game-clip-path);
}
/* Header */

8
pwa/src/components/game/InventoryModal.css
View File

@@ -46,11 +46,11 @@
max-width: 1400px;
background: var(--game-bg-modal);
border: 1px solid var(--game-border-color);
border-radius: var(--game-radius-lg);
box-shadow: var(--game-shadow-modal);
overflow: hidden;
color: var(--game-text-primary);
font-family: var(--game-font-main);
clip-path: var(--game-clip-path);
}
/* Top Bar */
@@ -97,9 +97,9 @@
.metric-bar {
height: 8px;
background: rgba(0, 0, 0, 0.5);
border-radius: var(--game-radius-sm);
overflow: hidden;
border: 1px solid var(--game-border-color);
clip-path: var(--game-clip-path-sm);
}
.metric-fill {
@@ -127,8 +127,8 @@
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
clip-path: var(--game-clip-path-sm);
}
.backpack-status.active {
@@ -238,11 +238,11 @@
padding: 0.75rem 1rem;
background: var(--game-bg-input);
border: 1px solid var(--game-border-color);
border-radius: var(--game-radius-md);
margin-bottom: 1.5rem;
color: var(--game-text-primary);
width: 100%;
box-sizing: border-box;
clip-path: var(--game-clip-path-sm);
}
.inventory-search-bar input {

4
pwa/src/components/game/Workbench.css
View File

@@ -19,13 +19,13 @@
height: 85vh;
background: var(--game-bg-modal);
border: 1px solid var(--game-border-color);
border-radius: var(--game-radius-lg);
display: flex;
flex-direction: column;
box-shadow: var(--game-shadow-modal);
overflow: hidden;
color: var(--game-text-primary);
font-family: var(--game-font-main);
clip-path: var(--game-clip-path);
}
.workbench-header {
@@ -56,10 +56,10 @@
border: 1px solid transparent;
color: #a0aec0;
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
clip-path: var(--game-clip-path-sm);
}
.tab-btn:hover {

15
pwa/src/index.css
View File

@@ -18,9 +18,11 @@
/* Red accent border */
/* --- Dimensions --- */
--game-radius-xs: 2px;
--game-radius-sm: 4px;
--game-radius-md: 6px;
--game-radius-xs: 0px;
--game-radius-sm: 0px;
--game-radius-md: 0px;
--game-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
--game-clip-path-sm: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
/* --- Typography --- */
--game-font-main: 'Saira Condensed', system-ui, sans-serif;
@@ -73,8 +75,8 @@
background: var(--game-bg-panel);
border: 1px solid var(--game-border-color);
box-shadow: var(--game-shadow-panel);
border-radius: var(--game-radius-sm);
backdrop-filter: blur(8px);
clip-path: var(--game-clip-path);
}
.game-modal-overlay {
@@ -103,7 +105,7 @@
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.2s ease;
border-radius: var(--game-radius-xs);
clip-path: var(--game-clip-path-sm);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -140,7 +142,6 @@
.game-btn-icon {
padding: 0.5rem;
border-radius: 50%;
/* Or keep square for industrial look */
line-height: 1;
}
@@ -149,13 +150,13 @@
.game-slot {
background: var(--game-bg-slot);
border: 1px solid var(--game-border-color);
border-radius: var(--game-radius-xs);
position: relative;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
clip-path: var(--game-clip-path-sm);
}
.game-slot:hover {