90 lines
2.1 KiB
Vue
90 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<button
|
|
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
|
|
@click="AboutUs = true"
|
|
>
|
|
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
|
|
</button>
|
|
|
|
<v-dialog v-model="AboutUs" max-width="500px">
|
|
<v-card>
|
|
<v-card-title>
|
|
À propos
|
|
<br><br>
|
|
<div class="flex justify-center">{{ creator.about }}</div>
|
|
<br>
|
|
</v-card-title>
|
|
<v-card-text class="scrollable-content">
|
|
{{ creator.description }}
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn text class="ml-auto" @click="AboutUs = false">Fermer</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
const AboutUs = ref(false);
|
|
|
|
const props = defineProps({
|
|
creator: { type: Object, required: true },
|
|
});
|
|
|
|
onMounted(() => {
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
.scrollable-content::-webkit-scrollbar-thumb {
|
|
background-color: ${props.creator.colors.menu};
|
|
border-radius: 10px;
|
|
}
|
|
.scrollable-content::-webkit-scrollbar-thumb:hover {
|
|
background-color: ${shadeColor(props.creator.colors.accent, -10)};
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
});
|
|
|
|
function shadeColor(color, percent) {
|
|
const f = parseInt(color.slice(1), 16),
|
|
t = percent < 0 ? 0 : 255,
|
|
p = percent < 0 ? percent * -1 : percent,
|
|
R = f >> 16,
|
|
G = (f >> 8) & 0x00ff,
|
|
B = f & 0x0000ff;
|
|
return (
|
|
"#" +
|
|
(
|
|
0x1000000 +
|
|
(Math.round((t - R) * p) + R) * 0x10000 +
|
|
(Math.round((t - G) * p) + G) * 0x100 +
|
|
(Math.round((t - B) * p) + B)
|
|
)
|
|
.toString(16)
|
|
.slice(1)
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scrollable-content {
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.scrollable-content::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.transparent-btn {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
box-shadow: none;
|
|
}
|
|
</style>
|