101 lines
2.0 KiB
Vue
101 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from '@/composables/useI18n'
|
|
|
|
const emit = defineEmits<{
|
|
resume: []
|
|
saveLoad: []
|
|
settings: []
|
|
quitToMenu: []
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="pause-overlay" @click.self="emit('resume')" @keydown.escape="emit('resume')">
|
|
<div class="pause-menu">
|
|
<h2 class="pause-title">{{ t('ui.paused') }}</h2>
|
|
|
|
<div class="pause-actions">
|
|
<button class="pause-btn primary" @click="emit('resume')">{{ t('ui.pauseResume') }}</button>
|
|
<button class="pause-btn" @click="emit('saveLoad')">{{ t('ui.saveLoad') }}</button>
|
|
<button class="pause-btn" @click="emit('settings')">{{ t('ui.settings') }}</button>
|
|
<button class="pause-btn danger" @click="emit('quitToMenu')">{{ t('ui.quitToMenu') }}</button>
|
|
</div>
|
|
|
|
<div class="pause-hint">{{ t('ui.pauseHint') }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pause-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 200;
|
|
}
|
|
|
|
.pause-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.pause-title {
|
|
font-size: 32px;
|
|
font-weight: 400;
|
|
letter-spacing: 6px;
|
|
color: #ddd;
|
|
}
|
|
|
|
.pause-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-width: 280px;
|
|
}
|
|
|
|
.pause-btn {
|
|
padding: 14px 32px;
|
|
font-size: 16px;
|
|
color: #ccc;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
letter-spacing: 2px;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
|
|
.pause-btn:hover {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
color: #fff;
|
|
}
|
|
|
|
.pause-btn.primary {
|
|
color: #fff;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.pause-btn.danger {
|
|
color: #e57373;
|
|
border-color: rgba(229, 115, 115, 0.2);
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.pause-btn.danger:hover {
|
|
background: rgba(229, 115, 115, 0.1);
|
|
}
|
|
|
|
.pause-hint {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
</style>
|