Skip to content

Commit

Permalink
Merge pull request #8 from falvojr/new_api_return
Browse files Browse the repository at this point in the history 
New api return
  • Loading branch information
@falvojr
falvojr authored Jan 3, 2024
2 parents 3e57dd8 + c3569c7 commit 918ed77
Show file tree
Hide file tree
Showing 4 changed files with 244 additions and 164 deletions.
3 changes: 2 additions & 1 deletion 6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/lib.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
/* Esse arquivo contém as estilizações do tipo biblioteca, para criar classes comuns e úteis (tipo uma framework)*/

body{
padding: 2vw;
padding: .5vw;
padding-bottom: 2vw;
}
/* For mobile phones: */
[class*="col-"] {
Expand Down
250 changes: 145 additions & 105 deletions 6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,139 +1,136 @@
/* Criar aqui um sumário ou cabeçlho */
/* Esse arquivo contém as estilizações gerais*/

.bg{
background-color: #F0F5FF;
/* Global Styles */
.bg {
background-color: #f0f5ff;
}

.bg.dark{
.bg.dark {
background-color: #000000;
}

.border-btn{
font-size: 12px;
padding: 6px;
min-width: 160px;
min-height: 48px;
border-radius: 24px;
border: 3px solid var(--Primary, #4785FF);
color: #4785FF;
background-color: transparent;
font-weight: bold;

transition: all .2s ease-in-out;
.border-btn {
font-size: 12px;
padding: 6px;
min-width: 160px;
min-height: 48px;
border-radius: 24px;
border: 3px solid var(--Primary, #4785ff);
color: #4785ff;
background-color: transparent;
font-weight: bold;
transition: all 0.2s ease-in-out;
}

.border-btn:hover{
transform: scale(1.05);
cursor: pointer;
background-color: #4785FF;
color: #FFF;
.border-btn:hover {
transform: scale(0.955);
cursor: pointer;
background-color: #4785ff;
color: #fff;
}

.toggle-theme{
border: 3px solid var(--Primary, black);
color: black;
.toggle-theme,
.toggle-theme.dark {
border: 3px solid var(--Primary, black);
color: black;
font-size: 12px;
padding: 6px;
min-width: 100px;
min-height: 48px;
}

.toggle-theme:hover{
background-color: black;
.toggle-theme:hover,
.toggle-theme.dark:hover {
background-color: var(--Primary, black);
color: var(--Secondary, white);
}

.toggle-theme.dark{
.toggle-theme.dark {
border: 3px solid var(--Primary, white);
color: white;
color: white;
}

.toggle-theme.dark:hover{
background-color: white;
color: black;
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #FFFFFF;
color: #4785FF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
background-color: #0099cc;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #ffffff;
color: #4785ff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}


.aside, .bottom {
background-color: #FFFFFF;
padding: 15px;
font-size: 14px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
border-radius: 16px;

/*min-width: 33vw;*/
/*min-height: 94vh;*/
padding: 3vw
}
.menu li:hover {
background-color: #0099cc;
}

.aside.dark, .bottom.dark{
background-color: #36393E;
color: #fff;
}
.aside,
.bottom {
background-color: #ffffff;
font-size: 14px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
border-radius: 16px;
height: 100%;
padding: 2vw;
}

.text-area{
max-height: 41.4vh;
margin-bottom: 4vh;
overflow-y: scroll
}
.bottom{
margin-top: 4vh;
}
.aside.dark,
.bottom.dark {
background-color: #36393e;
color: #fff;
}

video{
width: 100%;
height: auto;
border-radius: 16px;
}
.aside {
display: flex;
flex-direction: column;
flex-grow: 0;
max-height: 100%;
}

.resume-text {
color: #465f96;
}
.bottom {
margin-top: 4vh;
}

/* Estilo para o contêiner dos botões de idioma */
video {
width: 100%;
height: 100%;
border-radius: 16px;
z-index: -5;
}

.resume-text {
color: #465f96;
}

/* Language Buttons Styles */
#idioma-buttons-container {
background-color: #0099cc31; /* Cor de fundo preto */
display: flex; /* Exibe os botões em uma linha */
justify-content: center; /* Centraliza os botões horizontalmente */
padding: 10px; /* Espaçamento interno para os botões */
background-color: #0099cc31;
display: flex;
justify-content: center;
padding: 10px;
border-radius: 12px;
}

/* Estilo para os botões de idioma */
button.resumo-idioma {
background-color: #00000000; /* Cor de fundo preto */
background-color: #00000000;
border: none;
padding: 10px; /* Espaçamento interno para os botões */
padding: 10px;
cursor: pointer;
display: flex;
align-items: center;
}

/* Estilo para os ícones de bandeira */
button.resumo-idioma img {
width: 24px; /* Ajuste o tamanho do ícone conforme necessário */
height: 24px; /* Ajuste o tamanho do ícone conforme necessário */
margin-right: 8px; /* Espaço entre o ícone e o texto */
width: 24px;
height: 24px;
margin-right: 8px;
}

/* Estilo para o texto do botão de idioma */
button.resumo-idioma span {
font-size: 16px; /* Ajuste o tamanho da fonte conforme necessário */
color: #fff; /* Cor do texto (branco) */
font-size: 16px;
color: #fff;
}

.carousel-controllers {
Expand All @@ -142,22 +139,65 @@ button.resumo-idioma span {
display: flex;
justify-content: space-between;
gap: 10px;
width: 250px; /* Adjust the width as needed */
width: 250px;
}

.controller {
width: 82px;
height: 16px;
height: 46px;
border-radius: 8px;
background: #D6E4FF;
transition: all .2s ease-in-out;
background: #d6e4ff;
transition: all 0.2s ease-in-out;
}

.controller p {
margin: 0;
}

.controller:hover{
.controller:hover {
cursor: pointer;
transform: scale(1.05);
transform: scale(0.955);
}
.controller:nth-child(1) {
background: #4785FF; /* Different color for the third controller */

.controller.active {
background: #4785ff;
color: #fff;
}

#title-text {
font-weight: bold;
}

.container {
padding: 5vh;
height: auto;
max-height: 620px;
display: flex;
flex-basis: 0;
flex-grow: 1;
}

.text-area {
flex-grow: 0;
margin-bottom: 2vh;
overflow: auto;
}

.left,
.right {
display: flex;
flex-direction: column;
flex-grow: 1;
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
.container {
flex-direction: column;
}

.left,
.right {
width: 100% !important;
}
}
Loading

0 comments on commit 918ed77

Please sign in to comment.