mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-21 11:18:08 +00:00
b1686fc5eb
refactor(js): Remove unused asset loading in preload function feat(js): Implement optimal scale calculation for pixel-perfect rendering in person chat portraits
481 lines
9.8 KiB
CSS
481 lines
9.8 KiB
CSS
/* Container Minigame Styles */
|
|
|
|
.container-minigame {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 20px;
|
|
gap: 20px;
|
|
|
|
max-width: 600px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
/* Desktop Mode Styles */
|
|
.container-minigame.desktop-mode {
|
|
padding: 0;
|
|
gap: 0;
|
|
background: #000;
|
|
}
|
|
|
|
/* Monitor bezel for desktop containers */
|
|
.container-monitor-bezel {
|
|
background: #666;
|
|
border: 8px solid #444;
|
|
clip-path: polygon(
|
|
0px calc(100% - 10px),
|
|
2px calc(100% - 10px),
|
|
2px calc(100% - 6px),
|
|
4px calc(100% - 6px),
|
|
4px calc(100% - 4px),
|
|
6px calc(100% - 4px),
|
|
6px calc(100% - 2px),
|
|
10px calc(100% - 2px),
|
|
10px 100%,
|
|
calc(100% - 10px) 100%,
|
|
calc(100% - 10px) calc(100% - 2px),
|
|
calc(100% - 6px) calc(100% - 2px),
|
|
calc(100% - 6px) calc(100% - 4px),
|
|
calc(100% - 4px) calc(100% - 4px),
|
|
calc(100% - 4px) calc(100% - 6px),
|
|
calc(100% - 2px) calc(100% - 6px),
|
|
calc(100% - 2px) calc(100% - 10px),
|
|
100% calc(100% - 10px),
|
|
100% 10px,
|
|
calc(100% - 2px) 10px,
|
|
calc(100% - 2px) 6px,
|
|
calc(100% - 4px) 6px,
|
|
calc(100% - 4px) 4px,
|
|
calc(100% - 6px) 4px,
|
|
calc(100% - 6px) 2px,
|
|
calc(100% - 10px) 2px,
|
|
calc(100% - 10px) 0px,
|
|
10px 0px,
|
|
10px 2px,
|
|
6px 2px,
|
|
6px 4px,
|
|
4px 4px,
|
|
4px 6px,
|
|
2px 6px,
|
|
2px 10px,
|
|
0px 10px
|
|
);
|
|
padding: 20px;
|
|
box-shadow:
|
|
inset 0 0 20px rgba(0, 0, 0, 0.5),
|
|
0 0 30px rgba(0, 0, 0, 0.8);
|
|
position: relative;
|
|
margin: 20px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.container-monitor-bezel::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -4px;
|
|
left: -4px;
|
|
right: -4px;
|
|
bottom: -4px;
|
|
background: linear-gradient(45deg, #444, #666, #444);
|
|
border-radius: 19px;
|
|
z-index: -1;
|
|
}
|
|
|
|
.container-monitor-bezel::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
/* border-radius: 7px; */
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Post-it notes for container monitor bezel */
|
|
.container-monitor-bezel .postit-note {
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 20px;
|
|
z-index: 15;
|
|
margin: 0;
|
|
transform: rotate(-3deg);
|
|
background: #ffff88;
|
|
border: 1px solid #ddd;
|
|
/* border-radius: 3px; */
|
|
padding: 15px;
|
|
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
|
|
font-family: 'Pixelify Sans', 'Comic Sans MS', cursive;
|
|
font-size: 18px;
|
|
color: #333;
|
|
max-width: 200px;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.container-monitor-bezel .postit-note::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -1px;
|
|
right: -1px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 15px solid transparent;
|
|
border-top: 15px solid #f0f0f0;
|
|
}
|
|
|
|
.container-monitor-bezel .postit-note::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #ff6b6b;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #ff6b6b;
|
|
}
|
|
|
|
.container-monitor-bezel .postit-note:nth-child(2) {
|
|
left: 120px;
|
|
transform: rotate(2deg);
|
|
}
|
|
|
|
.container-monitor-bezel .postit-note:nth-child(3) {
|
|
left: 220px;
|
|
transform: rotate(-1deg);
|
|
}
|
|
|
|
.desktop-background {
|
|
flex: 1;
|
|
position: relative;
|
|
background: #000;
|
|
overflow: hidden;
|
|
min-height: 250px;
|
|
}
|
|
|
|
.desktop-wallpaper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('../assets/mini-games/desktop-wallpaper.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
opacity: 1.0;
|
|
}
|
|
|
|
|
|
.desktop-icons {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px;
|
|
}
|
|
|
|
.desktop-icon {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 80px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.desktop-icon:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.desktop-icon-image {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: contain;
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
/* border-radius: 8px; */
|
|
padding: 4px;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.desktop-icon:hover .desktop-icon-image {
|
|
border-color: #00ff00;
|
|
background: rgba(0, 255, 0, 0.1);
|
|
}
|
|
|
|
.desktop-icon-label {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 8px;
|
|
color: white;
|
|
text-align: center;
|
|
margin-top: 4px;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
word-wrap: break-word;
|
|
max-width: 80px;
|
|
}
|
|
|
|
.desktop-taskbar {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.desktop-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.desktop-title {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 20px;
|
|
color: #00ff00;
|
|
}
|
|
|
|
.desktop-subtitle {
|
|
font-size: 20px;
|
|
color: #ccc;
|
|
}
|
|
|
|
.desktop-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.empty-desktop {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 18px;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
|
|
.container-image-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
object-fit: contain;
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
/* border-radius: 5px; */
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.container-info h4 {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 20px;
|
|
margin: 0 0 10px 0;
|
|
color: #3498db;
|
|
}
|
|
|
|
.container-info p {
|
|
font-size: 20px;
|
|
margin: 0;
|
|
color: #ecf0f1;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.container-contents-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.container-contents-section h4 {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 18px;
|
|
margin: 0;
|
|
color: #e74c3c;
|
|
text-align: center;
|
|
}
|
|
|
|
.container-contents-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
|
gap: 10px;
|
|
padding: 15px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
min-height: 120px;
|
|
max-height: 200px;
|
|
}
|
|
|
|
.container-contents-grid::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.container-contents-grid::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
/* border-radius: 4px; */
|
|
}
|
|
|
|
.container-contents-grid::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
/* border-radius: 4px; */
|
|
}
|
|
|
|
.container-contents-grid::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.container-content-slot {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgb(149 157 216 / 80%);
|
|
/* border-radius: 5px; */
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.container-content-slot:hover {
|
|
border-color: rgba(255, 255, 255, 0.6);
|
|
background: rgb(149 157 216 / 90%);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.container-content-item {
|
|
max-width: 48px;
|
|
max-height: 48px;
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
transition: transform 0.2s ease;
|
|
transform: scale(2);
|
|
}
|
|
|
|
.container-content-item:hover {
|
|
transform: scale(2.2);
|
|
}
|
|
|
|
.container-content-tooltip {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
/* border-radius: 4px; */
|
|
font-size: 18px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.container-content-slot:hover .container-content-tooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
.empty-contents {
|
|
grid-column: 1 / -1;
|
|
text-align: center;
|
|
color: #95a5a6;
|
|
font-size: 20px;
|
|
margin: 20px 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.container-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.container-actions .minigame-button {
|
|
min-width: 120px;
|
|
}
|
|
|
|
.container-message {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 10px 20px;
|
|
/* border-radius: 5px; */
|
|
font-size: 20px;
|
|
z-index: 10001;
|
|
animation: slideDown 0.3s ease;
|
|
}
|
|
|
|
.container-message-success {
|
|
background: rgba(46, 204, 113, 0.9);
|
|
color: white;
|
|
border: 1px solid #27ae60;
|
|
}
|
|
|
|
.container-message-error {
|
|
background: rgba(231, 76, 60, 0.9);
|
|
color: white;
|
|
border: 1px solid #c0392b;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.container-image-section {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.container-contents-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.container-content-slot {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.container-content-item {
|
|
max-width: 40px;
|
|
max-height: 40px;
|
|
}
|
|
}
|