Mudanças entre as edições de "Predefinição:Teste/styles.css"
Ir para navegação
Ir para pesquisar
| Linha 1: | Linha 1: | ||
.skillbox-container { | .skillbox-container { | ||
width: 100%; | width: 100%; | ||
max-width: 100%; | |||
font-family: sans-serif; | |||
color: #222; | |||
margin: 0 auto; | |||
background: none; | background: none; | ||
border: none; | border: none; | ||
box-shadow: none; | box-shadow: none; | ||
} | } | ||
.skillbox-inner { | .skillbox-inner { | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: | align-items: stretch; | ||
justify-content: | justify-content: flex-start; | ||
width: 100%; | |||
padding: 0; | padding: 0; | ||
} | } | ||
| Linha 26: | Linha 21: | ||
.skillbox-info-area { | .skillbox-info-area { | ||
width: 100%; | width: 100%; | ||
max-width: | max-width: 100%; | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: | align-items: stretch; | ||
justify-content: | justify-content: flex-start; | ||
padding: 0; | padding: 0; | ||
gap: 0; | |||
border-top: 2px solid #ccc; | |||
margin-top: 16px; | |||
} | |||
.skillbox-wrapper { | |||
display: flex; | |||
flex-direction: column; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | } | ||
| Linha 39: | Linha 42: | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
width: 100%; | width: 100%; | ||
border-bottom: 1px solid #ccc; | |||
padding: | background: #f9f9f9; | ||
padding: 8px 12px; | |||
gap: 6px; | |||
} | } | ||
.skillbox-tab { | .skillbox-tab { | ||
background: # | cursor: pointer; | ||
color: # | background: #eaf3ff; | ||
border: | color: #2c4e7a; | ||
border-radius: | border: 1px solid #a8c7e0; | ||
padding: | border-bottom: none; | ||
font-size: | border-radius: 6px 6px 0 0; | ||
padding: 6px 12px; | |||
font-size: 0.95em; | |||
font-weight: bold; | font-weight: bold; | ||
transition: 0.2s | transition: background 0.2s ease; | ||
} | } | ||
.skillbox-tab.active | .skillbox-tab.active { | ||
background: #dbeeff; | |||
color: #000; | |||
background: # | border-bottom: 2px solid white; | ||
color: # | |||
border- | |||
} | } | ||
.skillbox-desc { | .skillbox-desc { | ||
width: 100%; | width: 100%; | ||
background: #f5f7fa; | |||
color: #222; | color: #222; | ||
font-size: 1em; | |||
padding: 12px | line-height: 1.5; | ||
border- | padding: 12px 16px; | ||
box-sizing: border-box; | |||
border-bottom: 1px solid #ccc; | |||
} | } | ||
.skillbox-video-area { | .skillbox-video-area { | ||
width: 100%; | width: 100%; | ||
display: flex; | display: flex; | ||
justify-content: center; | |||
align-items: center; | align-items: center; | ||
background: transparent; | background: transparent; | ||
padding: 16px 0 24px; | |||
padding: 0 | |||
} | } | ||
.skillbox-video video { | .skillbox-video video { | ||
width: 100%; | width: 100%; | ||
max-width: 720px; | |||
max-width: | |||
min-height: 270px; | min-height: 270px; | ||
background: #000; | background: #000; | ||
border-radius: 6px; | |||
display: block; | display: block; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
/* Responsivo */ | |||
@media (max-width: 768px) { | |||
@media (max-width: | |||
.skillbox-tab { | .skillbox-tab { | ||
padding: 6px | padding: 6px 10px; | ||
font-size: 0.9em; | font-size: 0.9em; | ||
} | } | ||
| Linha 143: | Linha 107: | ||
.skillbox-desc { | .skillbox-desc { | ||
font-size: 0.95em; | font-size: 0.95em; | ||
padding: | padding: 10px 12px; | ||
} | |||
.skillbox-video video { | |||
max-width: 100%; | |||
min-height: 220px; | |||
} | } | ||
} | } | ||
Edição das 01h10min de 24 de maio de 2025
.skillbox-container {
width: 100%;
max-width: 100%;
font-family: sans-serif;
color: #222;
margin: 0 auto;
background: none;
border: none;
box-shadow: none;
}
.skillbox-inner {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
width: 100%;
padding: 0;
}
.skillbox-info-area {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 0;
gap: 0;
border-top: 2px solid #ccc;
margin-top: 16px;
}
.skillbox-wrapper {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
.skillbox-tabs {
display: flex;
flex-wrap: wrap;
width: 100%;
border-bottom: 1px solid #ccc;
background: #f9f9f9;
padding: 8px 12px;
gap: 6px;
}
.skillbox-tab {
cursor: pointer;
background: #eaf3ff;
color: #2c4e7a;
border: 1px solid #a8c7e0;
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 6px 12px;
font-size: 0.95em;
font-weight: bold;
transition: background 0.2s ease;
}
.skillbox-tab.active {
background: #dbeeff;
color: #000;
border-bottom: 2px solid white;
}
.skillbox-desc {
width: 100%;
background: #f5f7fa;
color: #222;
font-size: 1em;
line-height: 1.5;
padding: 12px 16px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
}
.skillbox-video-area {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
padding: 16px 0 24px;
}
.skillbox-video video {
width: 100%;
max-width: 720px;
min-height: 270px;
background: #000;
border-radius: 6px;
display: block;
margin: 0 auto;
}
/* Responsivo */
@media (max-width: 768px) {
.skillbox-tab {
padding: 6px 10px;
font-size: 0.9em;
}
.skillbox-desc {
font-size: 0.95em;
padding: 10px 12px;
}
.skillbox-video video {
max-width: 100%;
min-height: 220px;
}
}