melhoria de estilo na barra de tempo

mustache1up · Sep 8, 2023 · 5aa51c6 · 5aa51c6
1 parent a007e82
commit 5aa51c6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -44,7 +44,7 @@ onAuthStateChanged(getAuth(), (user) => {
 
 const telaAtual = computed(() => {
 
-  return BlocoAntessala; // TODO: mudar aqui para testar as telas
+  return BlocoDefinicoes; // TODO: mudar aqui para testar as telas
 
   // if (!estado.sala.etapa) {
   //   return BlocoConexao;

diff --git a/src/components/BlocoDefinicoes.vue b/src/components/BlocoDefinicoes.vue
@@ -91,39 +91,52 @@ onMounted(contagemRegressiva);
 .barra-container {
   width: 100%;
   height: 20px;
-  background-color: #ccc;
+  background-color: #cccccc00;
 }
 
 .barra {
-  height: 100%;
+  text-align: right;
+  height: 12px;
   width: 100%;
+  border-radius: 15px;
   background-color: #4caf50; /* Cor de fundo da barra de progresso */
   transition: width 1s linear; /* Transição suave da largura */
+
+}
+
+.barra::before {
+  left: 16px;
+  top: -7px;
+  position:relative;
+  content: "\23F3"; /* Símbolo da alternativa marcada */
 }
 
 .roxo {
-  height: 100%;
+  height: 12px;
   width: 100%;
   background-color: #6200ff; /* Cor de fundo da barra de progresso */
-  transition: 1s linear; /* Transição suave da largura */
+  transition: 1s linear;
+ /* Transição suave da largura */
 }
 
 .vermelho {
-  height: 100%;
+  height: 12px;
   width: 100%;
   background-color: #ff0000; /* Cor de fundo da barra de progresso */
   transition: 1s linear; /* Transição suave da largura */
 }
 
 .amarelo {
-  height: 100%;
+  height: 12px;
   width: 100%;
   background-color: #fbff00; /* Cor de fundo da barra de progresso */
   transition: 1s linear; /* Transição suave da largura */
 }
+
 .sem-negrito {
   font-weight: 100;
 }
+
 .centralizado {
   text-align: center;
 }