dennii/Connect-5
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Connect-5.git synced 2026-04-17 20:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign status bar to split Turn Info (left) and Player Identity (right)

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-21 20:15:46 +11:00
parent 91535dc8fc
commit acf32d0418
3 changed files with 111 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
styles.css
View File

@@ -432,51 +432,69 @@ body {
}
}
/* Status Message */
/* Merged Status Container */
.status-container {
/* Game Status Bar */
.game-status-bar {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
gap: 1.5rem;
padding: 1rem;
padding: 0.75rem 1.5rem;
background: var(--bg-tertiary);
border-radius: 12px;
border: 1px solid var(--border-light);
width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
min-height: 70px;
}
.status-divider {
width: 1px;
height: 24px;
background: var(--border-light);
/* Left Side: Turn Info + Text */
.status-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 0.25rem;
}
.status-text {
.turn-display {
display: flex;
align-items: center;
gap: 1rem;
}
.status-text-small {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
margin-top: 2px;
}
/* Right Side: Identity */
.status-right {
display: flex;
align-items: center;
gap: 1rem;
padding-left: 1.5rem;
border-left: 1px solid var(--border-light);
}
.status-right .label {
color: var(--text-secondary);
font-weight: 600;
font-size: 1rem;
flex: 1;
text-align: left;
font-weight: 600;
white-space: nowrap;
}
/* Status variants applied to the container */
.status-container.success {
border-color: var(--success);
background: rgba(16, 185, 129, 0.05);
}
.status-container.success .status-text {
/* Dynamic status colors applied to the text, not full bg */
.status-text-small.success {
color: var(--success);
}
.status-container.info {
border-color: var(--accent-secondary);
background: rgba(56, 189, 248, 0.05);
.status-text-small.info {
color: var(--accent-secondary);
}
.status-container.info .status-text {
color: var(--accent-secondary);
.status-text-small.error {
color: #ef4444;
}
/* Victory Overlay */