45 lines
1001 B
Vue
45 lines
1001 B
Vue
<script setup>
|
|
import { defineProps } from "vue";
|
|
const props = defineProps({ text: String, shortcut: Array });
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tooltip">
|
|
<div>
|
|
<b>{{ props.text }}</b>
|
|
</div>
|
|
<div v-if="props.shortcut" class="shortcut">
|
|
<span v-for="(code, index) in props.shortcut" :key="index">{{ code }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tooltip {
|
|
background-color: var(--primary-background);
|
|
border: solid 1px var(--border-color);
|
|
padding: 4px;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.shortcut {
|
|
margin: 2px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 3px;
|
|
justify-content: center;
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
border: solid 1px var(--quaternary-background);
|
|
border-bottom-width: 3px;
|
|
border-radius: 3px;
|
|
color: var(--secondary-text);
|
|
background-color: var(--secondary-background);
|
|
font-size: 1.3rem;
|
|
padding: 0.18rem 0.31rem;
|
|
}
|
|
</style>
|