asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Passage des couleur CSS en variable de thème vuetify, oui j'ai enfin trouvé bordel

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-12-23 21:56:36 +01:00
parent 71d4445d27
commit 183d2fcf26
1 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/src/views/MQTTDebugView.vue
View File

@ -1,22 +1,11 @@
<template> <template>
<v-row>
</v-row>
<div> <!-- Zone pour publier sur MQTT -->
<!-- Zone pour afficher la console MQTT -->
</div>
<v-container> <v-container>
<v-row> <v-row>
<!-- Colonne gauche avec les deux composants empilés --> <!-- Colonne gauche avec les trois composants empilés -->
<v-col cols="6"> <v-col cols="6" class="d-flex flex-column" style="align-items: stretch; height: 100%;">
<!-- Composant 1 -->
<v-row>
<v-col>
<PublishMQTTComponent /> <PublishMQTTComponent />
<MQTTColorPublisher /> <MQTTColorPublisher />
<WSDebugControl />
</v-col>
</v-row>
</v-col> </v-col>
<!-- Colonne droite avec le composant unique --> <!-- Colonne droite avec le composant unique -->
@ -31,23 +20,30 @@
import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer le composant pour publier sur MQTT import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer le composant pour publier sur MQTT
import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour publier sur MQTT import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour publier sur MQTT
import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue' // Importer le composant pour publier sur MQTT import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue' // Importer le composant pour publier sur MQTT
import WSDebugControl from '@/components/WSDebugControl.vue' // Importer le composant pour publier sur MQTT
export default { export default {
components: { components: {
PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT
MQTTConsoleComponent, // Composant pour la console MQTT MQTTConsoleComponent, // Composant pour la console MQTT
MQTTColorPublisher, // Composant pour publier une couleur custom dans un topic MQTTColorPublisher, // Composant pour publier une couleur custom dans un topic
WSDebugControl,
} }
} }
</script> </script>
<style> <style>
@media (min-width: 1024px) { @media (min-width: 1024px) {
.card__title.primary { background-color: #d42828; /* Changez la couleur en fonction de votre thème */ .card__title.primary {
background-color: rgba(var(--v-theme-primary)); /* Changez la couleur en fonction de votre thème */
} }
.card__title.feedback { background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */ .card__title.feedback {
background-color: rgba(var(--v-theme-success)); /* Changez la couleur en fonction de votre thème */
} }
.btn{ border-radius:30px!important; background-color: #d42828; /* Changez la couleur en fonction de votre thème */ .btn{
border-radius:30px!important;
background-color: rgba(var(--v-theme-primary)); /* Changez la couleur en fonction de votre thème */
} }
} }
</style> </style>