diff --git a/assets/objects/text_file.png b/assets/objects/text_file.png new file mode 100644 index 0000000..90ed349 Binary files /dev/null and b/assets/objects/text_file.png differ diff --git a/css/container-minigame.css b/css/container-minigame.css index af8a541..395452e 100644 --- a/css/container-minigame.css +++ b/css/container-minigame.css @@ -15,11 +15,105 @@ background: #000; } +/* Monitor bezel for desktop containers */ +.container-monitor-bezel { + background: #666; + border: 8px solid #444; + border-radius: 15px; + 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: 'Press Start 2P', monospace; + font-size: 8px; + 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: 400px; } .desktop-wallpaper { @@ -28,6 +122,8 @@ 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; @@ -35,18 +131,9 @@ image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; - opacity: 0.8; + opacity: 1.0; } -.desktop-wallpaper::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.2); -} .desktop-icons { position: relative; diff --git a/css/minigames.css b/css/minigames.css index da49885..99eb195 100644 --- a/css/minigames.css +++ b/css/minigames.css @@ -38,7 +38,6 @@ border-radius: 5px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset; position: relative; - overflow: hidden; } .minigame-message-container { @@ -191,384 +190,4 @@ border-radius: 5px; } -/* Password Minigame Specific Styles */ -.password-minigame-area { - display: flex; - flex-direction: column; - height: 100%; - padding: 20px; - gap: 15px; - background: #1a1a1a; - position: relative; -} -.password-input-container { - display: flex; - flex-direction: column; - gap: 10px; -} - -.monitor-bezel { - background: #2a2a2a; - border: 8px solid #1a1a1a; - border-radius: 15px; - 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; - 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; -} - -.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; -} - -.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; -} - -.monitor-screen { - border: 2px solid #333; - border-radius: 8px; - padding: 15px; - min-height: 120px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; - z-index: 2; -} - -.monitor-screen::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(0, 255, 0, 0.1), rgba(0, 255, 255, 0.1)); - border-radius: 6px; - z-index: 1; -} - -.monitor-screen > * { - position: relative; - z-index: 2; -} - -.password-input-container label { - font-size: 12px; - color: #00ff00; - margin-bottom: 5px; -} - -.password-field-wrapper { - position: relative; - display: flex; - align-items: center; -} - -.password-field { - width: 100%; - padding: 12px 45px 12px 12px; - background: #1a1a1a; - border: 2px solid #00ff00; - border-radius: 5px; - color: white; - font-family: 'Press Start 2P', monospace; - font-size: 10px; - outline: none; - transition: border-color 0.3s ease; -} - -.password-field:focus { - border-color: #00ffff; - box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); -} - -.password-field::placeholder { - color: #666; -} - -.toggle-password-btn { - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - background: none; - border: none; - color: #00ff00; - cursor: pointer; - font-size: 16px; - padding: 5px; - border-radius: 3px; - transition: background-color 0.3s ease; -} - -.toggle-password-btn:hover { - background: rgba(0, 255, 0, 0.1); -} - -.password-hint-container { - display: flex; - flex-direction: column; - gap: 10px; -} - -.hint-btn { - background: #f39c12; - color: white; - border: none; - padding: 8px 16px; - border-radius: 5px; - cursor: pointer; - font-family: 'Press Start 2P', monospace; - font-size: 8px; - transition: background 0.3s ease; - align-self: flex-start; -} - -.hint-btn:hover { - background: #e67e22; -} - -.password-hint { - background: rgba(243, 156, 18, 0.1); - border: 1px solid #f39c12; - border-radius: 5px; - padding: 10px; - font-size: 10px; - color: #f39c12; -} - -.postit-note { - background: #ffff88; - border: 1px solid #ddd; - border-radius: 3px; - padding: 15px; - margin: 10px 0; - box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); - position: relative; - transform: rotate(-2deg); - font-family: 'Press Start 2P', monospace; - font-size: 8px; - color: #333; - max-width: 200px; - word-wrap: break-word; -} - -.postit-note::before { - content: ''; - position: absolute; - top: -1px; - right: -1px; - width: 0; - height: 0; - border-left: 15px solid transparent; - border-top: 15px solid #f0f0f0; -} - -.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; -} - -.onscreen-keyboard { - display: flex; - flex-direction: column; - gap: 5px; - background: #2a2a2a; - border: 2px solid #444; - border-radius: 8px; - padding: 10px; - margin: 10px 0; -} - -.keyboard-row { - display: flex; - justify-content: center; - gap: 3px; - flex-wrap: wrap; -} - -.key { - background: #444; - color: white; - border: 1px solid #666; - border-radius: 4px; - padding: 8px 12px; - cursor: pointer; - font-family: 'Press Start 2P', monospace; - font-size: 8px; - min-width: 35px; - text-align: center; - transition: all 0.2s ease; - user-select: none; -} - -.key:hover { - background: #555; - border-color: #00ff00; -} - -.key:active { - background: #00ff00; - color: black; - transform: scale(0.95); -} - -.key-backspace { - background: #e74c3c; - min-width: 60px; -} - -.key-backspace:hover { - background: #c0392b; -} - -.key-space { - background: #3498db; - min-width: 100px; -} - -.key-space:hover { - background: #2980b9; -} - -.key-special { - background: #9b59b6; - min-width: 80px; -} - -.key-special:hover { - background: #8e44ad; -} - -.password-actions { - display: flex; - justify-content: center; - gap: 15px; - margin-top: 10px; -} - -.submit-btn { - background: #2ecc71; - color: white; - border: none; - padding: 12px 24px; - border-radius: 5px; - cursor: pointer; - font-family: 'Press Start 2P', monospace; - font-size: 10px; - transition: background 0.3s ease; -} - -.submit-btn:hover { - background: #27ae60; -} - -.submit-btn:active { - background: #229954; -} - -.cancel-btn { - background: #e74c3c; - color: white; - border: none; - padding: 12px 24px; - border-radius: 5px; - cursor: pointer; - font-family: 'Press Start 2P', monospace; - font-size: 10px; - transition: background 0.3s ease; -} - -.cancel-btn:hover { - background: #c0392b; -} - -.cancel-btn:active { - background: #a93226; -} - -.attempts-counter { - text-align: center; - font-size: 10px; - color: #f39c12; - background: rgba(243, 156, 18, 0.1); - border: 1px solid #f39c12; - border-radius: 5px; - padding: 8px; - margin-top: 10px; -} - -.attempts-counter span { - color: #e74c3c; - font-weight: bold; -} - -/* Responsive design for smaller screens */ -@media (max-width: 768px) { - .onscreen-keyboard { - padding: 5px; - } - - .key { - padding: 6px 8px; - font-size: 7px; - min-width: 30px; - } - - .key-backspace { - min-width: 50px; - } - - .key-space { - min-width: 80px; - } - - .key-special { - min-width: 60px; - } - - .password-field { - font-size: 9px; - padding: 10px 40px 10px 10px; - } - - .submit-btn, .cancel-btn { - padding: 10px 20px; - font-size: 9px; - } -} diff --git a/css/password-minigame.css b/css/password-minigame.css new file mode 100644 index 0000000..160c2eb --- /dev/null +++ b/css/password-minigame.css @@ -0,0 +1,448 @@ +/* Password Minigame Specific Styles */ + +.password-minigame-area { + display: flex; + flex-direction: column; + height: 100%; + padding: 20px; + gap: 15px; + background: #1a1a1a; + position: relative; +} + +.password-input-container { + display: flex; + flex-direction: column; + gap: 10px; +} + +.monitor-bezel { + background: #666; + border: 8px solid #444; + border-radius: 15px; + padding: 20px; + box-shadow: + inset 0 0 20px rgba(0, 0, 0, 0.5), + 0 0 30px rgba(0, 0, 0, 0.8); +} + +.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; +} + +.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; +} + +.monitor-screen { + border: 2px solid #333; + border-radius: 8px; + padding: 15px; + min-height: 180px; + position: relative; + 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; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + z-index: 2; +} + +.monitor-screen::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(0, 255, 0, 0.1), rgba(0, 255, 255, 0.1)); + border-radius: 6px; + z-index: 1; +} + +.monitor-screen > * { + position: relative; + z-index: 2; +} + +.password-input-container label { + font-size: 12px; + color: #00ff00; + margin-bottom: 5px; +} + +.password-field-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.password-field { + width: 100%; + padding: 12px 45px 12px 12px; + background: #1a1a1a; + border: 2px solid #00ff00; + border-radius: 5px; + color: white; + font-family: 'Press Start 2P', monospace; + font-size: 10px; + outline: none; + transition: border-color 0.3s ease; +} + +.password-field:focus { + border-color: #00ffff; + box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); +} + +.password-field::placeholder { + color: #666; +} + +.toggle-password-btn { + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + color: #00ff00; + cursor: pointer; + font-size: 16px; + padding: 5px; + border-radius: 3px; + transition: background-color 0.3s ease; +} + +.toggle-password-btn:hover { + background: rgba(0, 255, 0, 0.1); +} + +.password-hint-container { + display: flex; + flex-direction: column; + gap: 10px; +} + +.hint-btn { + background: #f39c12; + color: white; + border: none; + padding: 8px 16px; + border-radius: 5px; + cursor: pointer; + font-family: 'Press Start 2P', monospace; + font-size: 8px; + transition: background 0.3s ease; + align-self: flex-start; +} + +.hint-btn:hover { + background: #e67e22; +} + +.password-hint { + background: rgba(243, 156, 18, 0.1); + border: 1px solid #f39c12; + border-radius: 5px; + padding: 10px; + font-size: 10px; + color: #f39c12; +} + +.postit-note { + background: #ffff88; + border: 1px solid #ddd; + border-radius: 3px; + padding: 15px; + margin: 10px 0; + box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); + position: relative; + transform: rotate(-2deg); + font-family: 'Press Start 2P', monospace; + font-size: 8px; + color: #333; + max-width: 200px; + word-wrap: break-word; + top: -40px; + z-index: 15; +} + +/* Post-it notes stuck to monitor bezel */ +.monitor-bezel .postit-note { + bottom: -15px; + left: 20px; + z-index: 15; + margin: 0; + transform: rotate(-3deg); +} + +/* Post-it notes between monitor-bezel and keyboard */ +.password-minigame-area .postit-note { + position: relative; + margin: 15px 20px; + z-index: 15; + transform: rotate(-3deg); + align-self: flex-start; +} + +.password-minigame-area .postit-note:nth-child(2) { + margin-left: 140px; + transform: rotate(2deg); +} + +.password-minigame-area .postit-note:nth-child(3) { + margin-left: 260px; + transform: rotate(-1deg); +} + +.monitor-bezel .postit-note:nth-child(2) { + left: 120px; + transform: rotate(2deg); +} + +.monitor-bezel .postit-note:nth-child(3) { + left: 220px; + transform: rotate(-1deg); +} + +.postit-note::before { + content: ''; + position: absolute; + top: -1px; + right: -1px; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-top: 15px solid #f0f0f0; +} + +.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; +} + +.onscreen-keyboard { + display: flex; + flex-direction: column; + gap: 5px; + background: #2a2a2a; + border: 2px solid #444; + border-radius: 8px; + padding: 10px; + margin: 10px 0; + position: relative; + z-index: 10; +} + +.keyboard-row { + display: flex; + justify-content: center; + gap: 3px; + flex-wrap: wrap; +} + +.key { + background: #444; + color: white; + border: 1px solid #666; + border-radius: 4px; + padding: 8px 12px; + cursor: pointer; + font-family: 'Press Start 2P', monospace; + font-size: 8px; + min-width: 35px; + text-align: center; + transition: all 0.2s ease; + user-select: none; + position: relative; + z-index: 11; +} + +.key:hover { + background: #555; + border-color: #00ff00; +} + +.key:active { + background: #00ff00; + color: black; + transform: scale(0.95); +} + +.key-backspace { + background: #e74c3c; + min-width: 60px; +} + +.key-backspace:hover { + background: #c0392b; +} + +.key-space { + background: #3498db; + min-width: 100px; +} + +.key-space:hover { + background: #2980b9; +} + +.key-special { + background: #9b59b6; + min-width: 80px; +} + +.key-special:hover { + background: #8e44ad; +} + +.key-shift { + background: #e67e22; + min-width: 60px; +} + +.key-shift:hover { + background: #d35400; +} + +.key-shift.active { + background: #f39c12; + color: #000; +} + +.password-actions { + display: flex; + justify-content: center; + gap: 15px; + margin-top: 10px; + position: relative; + z-index: 10; +} + +.submit-btn { + background: #2ecc71; + color: white; + border: none; + padding: 12px 24px; + border-radius: 5px; + cursor: pointer; + font-family: 'Press Start 2P', monospace; + font-size: 10px; + transition: background 0.3s ease; + position: relative; + z-index: 11; +} + +.submit-btn:hover { + background: #27ae60; +} + +.submit-btn:active { + background: #229954; +} + +.cancel-btn { + background: #e74c3c; + color: white; + border: none; + padding: 12px 24px; + border-radius: 5px; + cursor: pointer; + font-family: 'Press Start 2P', monospace; + font-size: 10px; + transition: background 0.3s ease; + position: relative; + z-index: 11; +} + +.cancel-btn:hover { + background: #c0392b; +} + +.cancel-btn:active { + background: #a93226; +} + +.attempts-counter { + text-align: center; + font-size: 10px; + color: #f39c12; + background: rgba(243, 156, 18, 0.1); + border: 1px solid #f39c12; + border-radius: 5px; + padding: 8px; + margin-top: 10px; + position: relative; + z-index: 10; +} + +.attempts-counter span { + color: #e74c3c; + font-weight: bold; +} + +/* Responsive design for smaller screens */ +@media (max-width: 768px) { + .onscreen-keyboard { + padding: 5px; + } + + .key { + padding: 6px 8px; + font-size: 7px; + min-width: 30px; + } + + .key-backspace { + min-width: 50px; + } + + .key-space { + min-width: 80px; + } + + .key-special { + min-width: 60px; + } + + .password-field { + font-size: 9px; + padding: 10px 40px 10px 10px; + } + + .submit-btn, .cancel-btn { + padding: 10px 20px; + font-size: 9px; + } +} diff --git a/css/text-file-minigame.css b/css/text-file-minigame.css new file mode 100644 index 0000000..9bfa450 --- /dev/null +++ b/css/text-file-minigame.css @@ -0,0 +1,433 @@ +/* Text File Minigame Styles */ + +/* Import VT font */ +@import url('https://fonts.googleapis.com/css2?family=VT323:wght@400&display=swap'); + +/* Text File Minigame Container */ +.text-file-container { + display: flex; + flex-direction: column; + height: 100%; + background: #ffffff; + border-radius: 12px; + border: 1px solid #d1d5db; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); + overflow: hidden; + font-family: 'VT323', monospace; +} + +/* Mac-style Window Title Bar */ +.text-file-window-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 12px; + background: linear-gradient(to bottom, #f6f6f6 0%, #e8e8e8 100%); + border-bottom: 1px solid #d1d5db; + border-radius: 12px 12px 0 0; + min-height: 28px; +} + +.window-controls { + display: flex; + gap: 6px; + align-items: center; +} + +.window-control { + width: 12px; + height: 12px; + border-radius: 50%; + border: none; + cursor: pointer; + transition: all 0.2s ease; +} + +.window-control.close { + background: #ff5f57; +} + +.window-control.minimize { + background: #ffbd2e; +} + +.window-control.maximize { + background: #28ca42; +} + +.window-control:hover { + transform: scale(1.1); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.window-title { + font-size: 13px; + font-weight: 500; + color: #333333; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + flex: 1; + text-align: center; + margin: 0 20px; +} + +/* File Header Section */ +.file-header { + display: flex; + align-items: center; + padding: 16px 20px; + background: #f8f9fa; + border-bottom: 1px solid #e9ecef; +} + +.file-icon { + font-size: 24px; + margin-right: 12px; + color: #495057; +} + +.file-info { + flex: 1; +} + +.file-name { + font-size: 18px; + font-weight: bold; + color: #212529; + margin-bottom: 4px; + font-family: 'VT323', monospace; +} + +.file-meta { + display: flex; + gap: 12px; + font-size: 14px; + color: #6c757d; + font-family: 'VT323', monospace; +} + +.file-type { + background: #e9ecef; + padding: 2px 8px; + border-radius: 4px; + border: 1px solid #dee2e6; + color: #495057; +} + +.file-size { + color: #6c757d; +} + +/* File Content Area */ +.file-content-area { + flex: 1; + display: flex; + flex-direction: column; + background: #ffffff; + overflow: hidden; +} + +.content-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 16px; + background: #f8f9fa; + border-bottom: 1px solid #e9ecef; + min-height: 36px; +} + +.content-label { + font-size: 14px; + color: #495057; + font-weight: 500; + font-family: 'VT323', monospace; +} + +.content-actions { + display: flex; + gap: 8px; +} + +.action-btn { + background: #ffffff; + border: 1px solid #d1d5db; + color: #374151; + padding: 4px 12px; + border-radius: 6px; + font-size: 12px; + cursor: pointer; + font-family: 'VT323', monospace; + transition: all 0.2s ease; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.action-btn:hover { + background: #f3f4f6; + border-color: #9ca3af; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.action-btn:active { + background: #e5e7eb; + transform: translateY(1px); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +/* File Content Display */ +.file-content { + flex: 1; + padding: 16px 20px; + overflow: auto; + background: #ffffff; + border: none; + margin: 0; +} + +.file-text { + color: #000000; + font-family: 'VT323', monospace; + font-size: 16px; + line-height: 1.5; + margin: 0; + white-space: pre-wrap; + word-wrap: break-word; + user-select: text; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; +} + +/* File Observations Section */ +.file-observations { + margin: 0; + padding: 16px 20px; + background: #fff3cd; + border-top: 1px solid #ffeaa7; +} + +.file-observations h4 { + color: #856404; + font-size: 14px; + margin: 0 0 8px 0; + font-family: 'VT323', monospace; + font-weight: bold; +} + +.file-observations p { + color: #6c5700; + font-size: 14px; + line-height: 1.4; + margin: 0; + font-family: 'VT323', monospace; +} + +/* Text Selection Styling */ +.file-content ::selection { + background: #3b82f6; + color: #ffffff; +} + +.file-content ::-moz-selection { + background: #3b82f6; + color: #ffffff; +} + +/* Custom Scrollbar Styling */ +.file-content::-webkit-scrollbar { + width: 12px; +} + +.file-content::-webkit-scrollbar-track { + background: #f1f5f9; + border-radius: 6px; +} + +.file-content::-webkit-scrollbar-thumb { + background: #cbd5e1; + border-radius: 6px; + border: 2px solid #f1f5f9; +} + +.file-content::-webkit-scrollbar-thumb:hover { + background: #94a3b8; +} + +.file-content::-webkit-scrollbar-corner { + background: #f1f5f9; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .text-file-container { + border-radius: 8px; + } + + .text-file-window-header { + border-radius: 8px 8px 0 0; + padding: 6px 10px; + min-height: 24px; + } + + .window-control { + width: 10px; + height: 10px; + } + + .window-title { + font-size: 12px; + margin: 0 15px; + } + + .file-header { + padding: 12px 16px; + } + + .file-name { + font-size: 16px; + } + + .file-meta { + font-size: 12px; + gap: 8px; + } + + .content-header { + padding: 6px 12px; + min-height: 32px; + } + + .content-label { + font-size: 12px; + } + + .action-btn { + padding: 3px 8px; + font-size: 11px; + } + + .file-content { + padding: 12px 16px; + } + + .file-text { + font-size: 14px; + } + + .file-observations { + padding: 12px 16px; + } + + .file-observations h4 { + font-size: 12px; + } + + .file-observations p { + font-size: 12px; + } +} + +/* Dark Mode Support (Optional) */ +@media (prefers-color-scheme: dark) { + .text-file-container { + background: #1f2937; + border-color: #374151; + } + + .text-file-window-header { + background: linear-gradient(to bottom, #374151 0%, #1f2937 100%); + border-bottom-color: #374151; + } + + .window-title { + color: #f9fafb; + } + + .file-header { + background: #374151; + border-bottom-color: #4b5563; + } + + .file-icon { + color: #d1d5db; + } + + .file-name { + color: #f9fafb; + } + + .file-meta { + color: #9ca3af; + } + + .file-type { + background: #4b5563; + border-color: #6b7280; + color: #d1d5db; + } + + .file-size { + color: #9ca3af; + } + + .content-header { + background: #374151; + border-bottom-color: #4b5563; + } + + .content-label { + color: #d1d5db; + } + + .action-btn { + background: #4b5563; + border-color: #6b7280; + color: #f9fafb; + } + + .action-btn:hover { + background: #6b7280; + border-color: #9ca3af; + } + + .action-btn:active { + background: #374151; + } + + .file-content { + background: #1f2937; + } + + .file-text { + color: #f9fafb; + } + + .file-observations { + background: #451a03; + border-top-color: #92400e; + } + + .file-observations h4 { + color: #fbbf24; + } + + .file-observations p { + color: #fcd34d; + } + + .file-content::-webkit-scrollbar-track { + background: #374151; + } + + .file-content::-webkit-scrollbar-thumb { + background: #6b7280; + border-color: #374151; + } + + .file-content::-webkit-scrollbar-thumb:hover { + background: #9ca3af; + } + + .file-content::-webkit-scrollbar-corner { + background: #374151; + } +} diff --git a/index.html b/index.html index 0795eb2..35bf7c5 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,8 @@ + + diff --git a/js/minigames/container/container-minigame.js b/js/minigames/container/container-minigame.js index a0bcf0e..9fcd877 100644 --- a/js/minigames/container/container-minigame.js +++ b/js/minigames/container/container-minigame.js @@ -92,12 +92,18 @@ export class ContainerMinigame extends MinigameScene { createDesktopUI() { this.gameContainer.innerHTML = `