Refonte mini-player flottant, nettoyage GrateWizard, corrections UI
- PlayerPersistent: widget compact pill + panneau extensible, aligné au contenu - BookPlayer: ajustements scroll mode, suppression bordures boutons - UnoCSS: ajout border-none au shortcut btn-ghost - GrateWizard: suppression composants, services et utils obsolètes - Ajout du PDF source des paroles (media/) - Mises à jour config et dépendances Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
@@ -1,15 +1,5 @@
|
||||
<template>
|
||||
<!-- Popup mode: standalone app, no Librodrome layout -->
|
||||
<main v-if="isPopup" class="gw-app flex flex-col items-center sm:p-4 overflow-x-hidden h-screen">
|
||||
<div class="sm:max-w-screen-sm w-full">
|
||||
<div class="gw-card">
|
||||
<GratewizardGwTabs />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Info mode: Librodrome layout with feature cards -->
|
||||
<NuxtLayout v-else>
|
||||
<NuxtLayout>
|
||||
<div class="section-padding">
|
||||
<div class="container-content max-w-3xl mx-auto">
|
||||
<!-- Back link -->
|
||||
@@ -70,36 +60,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ layout: false })
|
||||
|
||||
const route = useRoute()
|
||||
const isPopup = computed(() => route.query.popup !== undefined)
|
||||
|
||||
const { data: content } = await usePageContent('gratewizard')
|
||||
|
||||
useHead(isPopup.value
|
||||
? {
|
||||
title: 'grateWizard',
|
||||
htmlAttrs: { lang: 'fr' },
|
||||
meta: [{ name: 'color-scheme', content: 'dark' }],
|
||||
link: [
|
||||
{ rel: 'preconnect', href: 'https://fonts.bunny.net' },
|
||||
{
|
||||
rel: 'stylesheet',
|
||||
href: 'https://fonts.bunny.net/css?family=space-grotesk:300,400,500,600,700',
|
||||
},
|
||||
],
|
||||
}
|
||||
: {
|
||||
title: content.value?.meta?.title ?? 'grateWizard \u2014 Coefficients relatifs',
|
||||
},
|
||||
)
|
||||
useHead({
|
||||
title: content.value?.meta?.title ?? 'grateWizard \u2014 Coefficients relatifs',
|
||||
})
|
||||
|
||||
const { url, launch } = useGrateWizard()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Info page styles */
|
||||
.page-title {
|
||||
font-size: clamp(2rem, 5vw, 2.75rem);
|
||||
}
|
||||
@@ -125,301 +95,3 @@ code {
|
||||
background: hsl(40 80% 50% / 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* Standalone popup app styles — unscoped so child components inherit */
|
||||
.gw-app {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
background-color: hsl(20 8% 3.5%);
|
||||
color: white;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.gw-app button,
|
||||
.gw-app select {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.gw-card {
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid hsl(20 8% 18% / 0.5);
|
||||
background: hsl(20 8% 8%);
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
/* --- Typography --- */
|
||||
.gw-metric {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.gw-title {
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.gw-text {
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(0 0% 75%);
|
||||
}
|
||||
|
||||
.gw-chip {
|
||||
display: inline-block;
|
||||
padding: 0.0625rem 0.375rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
background: hsl(36 80% 52% / 0.15);
|
||||
color: hsl(36 80% 52%);
|
||||
}
|
||||
|
||||
/* --- Tab buttons --- */
|
||||
.gw-tab-btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gw-tab-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.gw-tab-active {
|
||||
background: hsl(36 80% 52%);
|
||||
color: hsl(20 8% 3.5%);
|
||||
box-shadow: 0 1px 3px hsl(36 80% 52% / 0.3);
|
||||
}
|
||||
|
||||
.gw-tab-inactive {
|
||||
color: hsl(0 0% 100% / 0.5);
|
||||
}
|
||||
|
||||
.gw-tab-inactive:not(:disabled):hover {
|
||||
color: hsl(0 0% 100% / 0.8);
|
||||
background: hsl(0 0% 100% / 0.05);
|
||||
}
|
||||
|
||||
/* --- Buttons --- */
|
||||
.gw-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.3125rem 0.875rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.gw-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.gw-btn-accent {
|
||||
background: hsl(36 80% 52%);
|
||||
color: hsl(20 8% 3.5%);
|
||||
box-shadow: 0 1px 2px hsl(36 80% 52% / 0.25);
|
||||
}
|
||||
|
||||
.gw-btn-accent:not(:disabled):hover {
|
||||
background: hsl(36 80% 58%);
|
||||
box-shadow: 0 2px 6px hsl(36 80% 52% / 0.3);
|
||||
}
|
||||
|
||||
.gw-btn-accent:not(:disabled):active {
|
||||
background: hsl(36 80% 46%);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.gw-btn-danger {
|
||||
background: hsl(0 72% 50%);
|
||||
color: white;
|
||||
box-shadow: 0 1px 2px hsl(0 72% 50% / 0.25);
|
||||
}
|
||||
|
||||
.gw-btn-danger:not(:disabled):hover {
|
||||
background: hsl(0 72% 56%);
|
||||
box-shadow: 0 2px 6px hsl(0 72% 50% / 0.3);
|
||||
}
|
||||
|
||||
.gw-btn-danger:not(:disabled):active {
|
||||
background: hsl(0 72% 44%);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* --- Inputs --- */
|
||||
.gw-input {
|
||||
padding: 0.3125rem 0.625rem;
|
||||
font-size: 0.8125rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(20 8% 22%);
|
||||
background: hsl(20 8% 6%);
|
||||
color: white;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.gw-input:focus {
|
||||
border-color: hsl(36 80% 52%);
|
||||
box-shadow: 0 0 0 2px hsl(36 80% 52% / 0.12);
|
||||
}
|
||||
|
||||
/* --- Icon button --- */
|
||||
.gw-icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 9999px;
|
||||
background: hsl(36 80% 52%);
|
||||
color: hsl(20 8% 3.5%);
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gw-icon-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.gw-icon-btn:not(:disabled):hover {
|
||||
background: hsl(36 80% 58%);
|
||||
box-shadow: 0 2px 6px hsl(36 80% 52% / 0.3);
|
||||
}
|
||||
|
||||
.gw-icon-btn:not(:disabled):active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
/* --- Toggle --- */
|
||||
.gw-toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.gw-toggle input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.gw-toggle-slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 9999px;
|
||||
background: hsl(20 8% 22%);
|
||||
transition: background 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gw-toggle-slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
left: 0.1875rem;
|
||||
bottom: 0.1875rem;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.gw-toggle input:checked + .gw-toggle-slider {
|
||||
background: hsl(36 80% 52%);
|
||||
}
|
||||
|
||||
.gw-toggle input:checked + .gw-toggle-slider::before {
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
|
||||
/* --- Spinner --- */
|
||||
.gw-spinner {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border: 2px solid hsl(20 8% 22%);
|
||||
border-top-color: hsl(36 80% 52%);
|
||||
border-radius: 50%;
|
||||
animation: gw-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gw-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* --- Card surface --- */
|
||||
.card-surface {
|
||||
border-radius: 0.625rem;
|
||||
background: hsl(20 8% 7%);
|
||||
border: 1px solid hsl(0 0% 100% / 0.06);
|
||||
padding: 1rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/* --- Perimeter list items --- */
|
||||
.gw-perimeter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
background: hsl(20 8% 12%);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.gw-perimeter-item:hover {
|
||||
background: hsl(20 8% 16%);
|
||||
}
|
||||
|
||||
.gw-perimeter-delete {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1;
|
||||
color: hsl(0 60% 60%);
|
||||
background: hsl(0 60% 50% / 0.1);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.gw-perimeter-delete:hover {
|
||||
background: hsl(0 60% 50% / 0.2);
|
||||
color: hsl(0 60% 70%);
|
||||
}
|
||||
|
||||
/* --- Scrollbar --- */
|
||||
.gw-app ::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
.gw-app ::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.gw-app ::-webkit-scrollbar-thumb {
|
||||
background: hsl(0 0% 100% / 0.12);
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user