cybersecurity/BreakEscape
1
0
Fork 0
mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-21 11:18:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(css): Improve caption area layout and adjust font sizes for better readability

Browse Source
This commit is contained in:
Z. Cliffe Schreuders
2025-11-06 11:18:54 +00:00
parent 09d35af661
commit 75b7b3c5b2
1 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
css/person-chat-minigame.css
View File

@@ -86,15 +86,18 @@
.person-chat-caption-area {
position: absolute;
bottom: 0;
left: 0;
right: 0;
left: 50%;
transform: translateX(-50%);
max-width: 1200px;
width: calc(100% - 40px);
height: 33%;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.95));
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
align-content: flex-end;
padding: 20px;
gap: 20px;
z-index: 10;
@@ -106,8 +109,8 @@
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
min-width: 0;
flex: 1 1 400px;
min-width: 300px;
}
/* Header row: speaker name on left, controls on right */
@@ -127,6 +130,7 @@
font-weight: bold;
min-height: 20px;
flex: 0 0 auto;
font-family: 'Press Start 2P', monospace;
}
.person-chat-speaker-name.npc-speaker {
@@ -150,7 +154,7 @@
}
.person-chat-dialogue-text {
font-size: 20px;
font-size: 30px;
line-height: 1.5;
color: #fff;
margin: 0;
@@ -164,9 +168,9 @@
display: flex;
flex-direction: column;
gap: 8px;
flex: 0 0 auto;
flex: 0 1 auto;
align-items: stretch;
min-width: 200px;
min-width: 180px;
}
/* Choices container - displayed in controls area */
@@ -282,7 +286,7 @@
}
/* Responsive adjustments */
@media (max-width: 1200px) {
/* @media (max-width: 1200px) {
.person-chat-caption-area {
height: 40%;
}
@@ -295,19 +299,11 @@
gap: 10px;
}
.person-chat-speaker-name {
font-size: 20px;
}
.person-chat-dialogue-text {
font-size: 20px;
}
.person-chat-choice-button {
font-size: 18px;
padding: 8px 12px;
}
}
} */
/* Animations */
@keyframes fadeIn {