64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
|
|
|
|
<header class="flex align-center">
|
|
<div class="flex flex1 align-center gap-small">
|
|
<img src="/img/logo.png" alt="logo application" class="app-logo" />
|
|
<div>
|
|
<h1>Ptits Lutins</h1>
|
|
<span class="subtitle">{{ $t("layout.subtitle") }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex align-center gap-small">
|
|
<!-- user name and logo-->
|
|
<span>Bousolle Farceur</span>
|
|
<Icon name="carbon:user-avatar" size="2rem" />
|
|
</div>
|
|
</header>
|
|
<main><slot /></main>
|
|
<div id="background">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { locales, setLocale } = useI18n();
|
|
</script>
|
|
|
|
<style scoped>
|
|
header {
|
|
padding: 0rem 1rem 0rem 0rem;
|
|
margin: 1rem;
|
|
border-radius: 50px;
|
|
|
|
/* box-shadow:
|
|
20px 20px 60px #d3d3d3,
|
|
-20px -20px 60px #ffffff;
|
|
box-shadow:
|
|
5px 5px 10px #e4e4e4,
|
|
-5px -5px 10px #ffffff;
|
|
box-shadow:
|
|
5px 5px 10px #e4e4e4,
|
|
-5px -5px 10px #e4e4e4;
|
|
border: 1px solid #c8c8c8; */
|
|
backdrop-filter: blur(12px);
|
|
border:1px solid oklab(0.928 -0.000571842 -0.00597269 / 0.5);
|
|
background: #f8f8f8db;
|
|
|
|
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px
|
|
|
|
}
|
|
|
|
.app-logo {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
border-radius: 80px 0px 0px 80px;
|
|
border: 1px solid #00004c;
|
|
}
|
|
|
|
h1 {
|
|
line-height: 1em;
|
|
font-size: 1.5rem;
|
|
}
|
|
</style>
|