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:55:41 +01:00
parent d498aa1dc5
commit 883215ecbe
2 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/src/components/MQTTColorPublisher.vue
View File

@ -15,9 +15,8 @@
<v-btn class="v-btn-style-validate" height="35" @click="publisCustomColor">Publier</v-btn>
</div>
</v-col>
<v-col cols="5.5" class="button-container">
<v-col cols="4" class="button-container-2">
<v-btn color="#D42828" class="team-button" @click="publisButtonColor('#D42828')">Team Rouge</v-btn>
<v-btn color="#FF7518" class="team-button" @click="publisButtonColor('#FF7518')">Team Orange</v-btn>
<v-btn color="#00FF1F" class="team-button" @click="publisButtonColor('#00FF1F')">Team Verte</v-btn>
<v-btn color="#007AFF" class="team-button" @click="publisButtonColor('#007AFF')">Team Bleue</v-btn>
<v-btn color="#FFFC00" class="team-button" @click="publisButtonColor('#FFFC00')">Team Jaune</v-btn>
@ -59,7 +58,7 @@ export default {
}
</script>
<style>
<style scoped>
.v-container-style {
align-items: center;
justify-content: center;
@ -79,17 +78,25 @@ export default {
margin-bottom: 5%;
display: flex;
}
.button-container {
text-align: center;
margin-top: 12px;
margin-bottom: 27px;
margin-left: 15px;
margin-right: 13px;
}
.button-container-2 {
text-align: center;
margin-top: 12px;
margin-bottom: 27px;
margin-left: 15px;
margin-right: 13px;
}
.team-button {
width: 140px;
display: block;
margin: 12% auto 0; /* 5% de marge en bas pour espacer les boutons */
background-color: #d42828;
background-color: rgba(var(--v-theme-primary));
}
.v-btn-style-validate{
align-items: center;
justify-content: center;
width: 100%;
background-color: rgba(var(--v-theme-primary)); /* Changez la couleur en fonction de votre thème */
border-top-right-radius: 0%;
border-top-left-radius: 0%;
}
</style>

9
ui/src/components/MQTTDebugPublish.vue
View File

@ -9,7 +9,7 @@
<v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>
<v-text-field label="Message" v-model="message" prepend-icon="mdi-text-box"></v-text-field>
</div>
<v-btn class="v-btn-style-standalone" height="40" @click="publishBuzzerUnblock">Déblocage<br>Buzzer</v-btn>
<v-btn rounded class="v-btn-style-standalone" height="40" @click="publishBuzzerUnblock">Déblocage<br>Buzzer</v-btn>
<v-btn class="v-btn-style-validate" height="50" @click="publisCustomMessage">Publier</v-btn>
</v-card>
</v-container>
@ -26,6 +26,7 @@ export default {
'wled/all',
'display/control',
'sound/playsound',
'game/score/update',
'game/score'
] // Liste des topics
}
@ -42,7 +43,7 @@ export default {
}
</script>
<style>
<style scoped>
.v-container-style {
align-items: center;
justify-content: center;
@ -51,7 +52,7 @@ export default {
margin: 20px;
}
.v-btn-style-standalone{
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
background-color: rgba(var(--v-theme-primary)); /* Changez la couleur en fonction de votre thème */
margin-bottom: 5%;
margin-left: 5%;
}
@ -59,7 +60,7 @@ export default {
align-items: center;
justify-content: center;
width: 100%;
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
background-color: rgba(var(--v-theme-primary)); /* Changez la couleur en fonction de votre thème */
border-top-right-radius: 0%;
border-top-left-radius: 0%;
}