mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-21 11:18:08 +00:00
Add Lockpicking and Dusting Minigame Styles: Introduce new CSS files for lockpicking and dusting minigames, enhancing visual feedback and user interaction. Update inventory styles for improved scaling and responsiveness. Refactor existing styles to remove legacy dusting game components and ensure consistency across minigame interfaces.
This commit is contained in:
Z. Cliffe Schreuders
@@ -30,7 +30,7 @@
|
||||
min-width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 5px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid rgb(111 112 135 , 0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -43,10 +43,14 @@
|
||||
max-height: 48px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
transform: scale(2);
|
||||
image-rendering: pixelated;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
.inventory-item:hover {
|
||||
transform: scale(1.1);
|
||||
transform: scale(2.2);
|
||||
}
|
||||
|
||||
.inventory-tooltip {
|
||||
|
||||
29
css/lockpicking.css
Normal file
29
css/lockpicking.css
Normal file
@@ -0,0 +1,29 @@
|
||||
/* Lockpicking Minigame Styles */
|
||||
|
||||
/* Lockpicking feedback styling */
|
||||
.lockpick-feedback {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #00ff00;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
border: 1px solid #00ff00;
|
||||
min-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.lockpick-feedback:empty {
|
||||
display: none;
|
||||
}
|
||||
@@ -160,8 +160,8 @@
|
||||
color: white;
|
||||
border: 4px solid #c0392b;
|
||||
cursor: pointer;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 14px;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
@@ -195,30 +195,3 @@
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Lockpicking feedback styling */
|
||||
.lockpick-feedback {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #00ff00;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
border: 1px solid #00ff00;
|
||||
min-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.lockpick-feedback:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -133,187 +133,6 @@
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Dusting Minigame */
|
||||
.dusting-container {
|
||||
width: 75% !important;
|
||||
height: 75% !important;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dusting-game-container {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
margin: 0 auto 20px auto;
|
||||
background: #1a1a1a;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.dusting-grid-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: 20px 20px;
|
||||
background-repeat: repeat;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dusting-tools-container {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.dusting-tool-button {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
transition: opacity 0.2s, transform 0.1s;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dusting-tool-button:hover {
|
||||
opacity: 0.9;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.dusting-tool-button.active {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.dusting-tool-fine {
|
||||
background-color: #3498db;
|
||||
}
|
||||
|
||||
.dusting-tool-medium {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
.dusting-tool-wide {
|
||||
background-color: #e67e22;
|
||||
}
|
||||
|
||||
.dusting-particle-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dusting-particle {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dusting-progress-container {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 14px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.dusting-grid-cell {
|
||||
position: absolute;
|
||||
background: #000;
|
||||
border: 1px solid #222;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.dusting-cell-clean {
|
||||
background: black !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dusting-cell-light-dust {
|
||||
background: #444 !important;
|
||||
box-shadow: inset 0 0 3px rgba(255,255,255,0.2) !important;
|
||||
}
|
||||
|
||||
.dusting-cell-fingerprint {
|
||||
background: #0f0 !important;
|
||||
box-shadow: inset 0 0 5px rgba(0,255,0,0.5), 0 0 5px rgba(0,255,0,0.3) !important;
|
||||
}
|
||||
|
||||
.dusting-cell-medium-dust {
|
||||
background: #888 !important;
|
||||
box-shadow: inset 0 0 4px rgba(255,255,255,0.3) !important;
|
||||
}
|
||||
|
||||
.dusting-cell-heavy-dust {
|
||||
background: #ccc !important;
|
||||
box-shadow: inset 0 0 5px rgba(255,255,255,0.5) !important;
|
||||
}
|
||||
|
||||
.dusting-progress-found {
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
||||
.dusting-progress-over-dusted {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.dusting-progress-normal {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Dusting Game Success/Failure Messages */
|
||||
.dusting-success-message {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
||||
.dusting-success-quality {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dusting-success-details {
|
||||
font-size: 14px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.dusting-failure-message {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.dusting-failure-subtitle {
|
||||
font-size: 16px;
|
||||
margin-top: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Minigame disabled state */
|
||||
.minigame-disabled {
|
||||
@@ -337,6 +156,7 @@
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
z-index: 10000;
|
||||
|
||||
Reference in New Issue
Block a user