BrainBlast/ui/src/views/GameControl.vue

<template>
<v-container>
  <v-row no-gutters> 
    <v-col class="align-start">   
      <card-control /> 
    </v-col> 
    <v-col class="pl-3">   
      <card-soundboard /> 
    </v-col>
  </v-row>
</v-container>
  <v-row no-gutters class="pr-4 pl-4"> 
    <v-row no-gutters>   
      <v-col class="align-start">     
        <CardButtonScore />   
      </v-col>   
      <v-col class="pl-3">     
        <card-solution />   
      </v-col> 
    </v-row>
  </v-row>
</template>

<script setup>

import CardSolution from '@/components/CardSolution.vue'
import CardControl from '@/components/CardControl.vue'
import CardSoundboard from '@/components/CardSoundboard.vue';
import CardButtonScore from '@/components/CardButtonScore.vue'

</script>

<style>
@media (min-width: 1024px) {
  .card__title.primary {   
    background-color: #d42828; /* Changez la couleur en fonction de votre thème */
  }
  .card__title.feedback {   
    background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
  }
  .btn{ 
    border-radius:20px!important;
  }
  .btn.red { 
    background-color: #d42828; /* Changez la couleur en fonction de votre thème */ 
  }
  .btn.blue { 
    background-color: #2867d4; /* Changez la couleur en fonction de votre thème */ 
  }
  .btn.orange { 
    background-color: #d48f28; /* Changez la couleur en fonction de votre thème */ 
  }
  .btn.green { 
    background-color: #28d42e; /* Changez la couleur en fonction de votre thème */ 
  }
  .scorediv-style-red { 
    background-color: #d42828 !important; 
    padding: 15px; 
    border-top-left-radius: 10%;
  }
  .scorediv-style-orange { 
    background-color: #d48f28 !important; 
    padding: 15px; 
    border-bottom-left-radius: 10%;
  }
  .scorediv-style-blue { 
    background-color: #2867d4 !important; 
    padding: 15px; 
    border-top-right-radius: 10%;    
  }
  .scorediv-style-green { 
    background-color: #28d42e !important; 
    padding: 15px; 
    border-bottom-right-radius: 10%;
  }
}
</style>