Mudanças entre as edições de "Predefinição:Skillbox/styles.css"
Ir para navegação
Ir para pesquisar
| (6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
. | .skillbox-container { | ||
width: 100%; | |||
font-family: sans-serif; | |||
color: #222; | |||
margin: 0 auto; | |||
overflow-x: clip; /* <-- este é o isolamento */ | |||
position: relative; /* necessário para o clip funcionar */ | |||
} | |||
.skillbox-inner { | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
width: 100%; | width: 100%; | ||
padding: 0; | |||
} | } | ||
. | .skillbox-info-area { | ||
width: 100%; | width: 100%; | ||
max-width: 900px; | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
margin: 24px 0 0; | |||
padding: 0; | |||
} | } | ||
. | .skillbox-wrapper { | ||
width: 100%; | width: 100%; | ||
max-width: 900px; | max-width: 900px; | ||
box-sizing: border-box; | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
margin: 0 auto; | |||
} | |||
.skillbox-tabs-separator { | |||
width: 100vw; | |||
height: 2px; | |||
background: #ccc; | |||
margin: 0 calc(-50vw + 50%); | |||
} | } | ||
. | .skillbox-tabs { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
justify-content: center; | justify-content: center; | ||
width: 100%; | width: 100%; | ||
gap: 6px; | |||
padding: 0; | |||
margin-bottom: -2px; | |||
} | } | ||
. | .skillbox-tab { | ||
cursor: pointer; | cursor: pointer; | ||
background: # | background: #eaf1fb; | ||
color: # | color: #1d3f63; | ||
border: 2px solid # | border: 2px solid #337ab7; | ||
border-radius: | border-bottom: none; | ||
border-radius: 6px 6px 0 0; | |||
padding: 8px 16px; | padding: 8px 16px; | ||
font-size: 1em; | font-size: 1em; | ||
font-weight: bold; | font-weight: bold; | ||
transition: 0.2s | transition: background 0.2s ease; | ||
} | } | ||
. | .skillbox-tab.active, | ||
. | .skillbox-tab:hover { | ||
background: #337ab7; | |||
color: #fff; | |||
color: # | border-color: #337ab7; | ||
border- | border-bottom: none; | ||
} | } | ||
. | .skillbox-desc { | ||
font-size: 1em; | font-size: 1em; | ||
width: 100%; | width: 100%; | ||
max-width: 840px; | |||
text-align: center; | text-align: center; | ||
font-weight: 500; | font-weight: 500; | ||
line-height: 1. | line-height: 1.6; | ||
margin: 0; | margin: 0 auto; | ||
color: #222; | color: #222; | ||
padding: 12px 0 8px; | |||
padding: | |||
} | } | ||
. | .skillbox-video-area { | ||
width: 100%; | width: 100%; | ||
max-width: 900px; | max-width: 900px; | ||
display: flex; | display: flex; | ||
justify-content: center; | |||
align-items: center; | align-items: center; | ||
padding: 0 !important; | |||
margin: 0 auto !important; | |||
padding: | |||
margin: 0 auto; | |||
} | } | ||
. | .skillbox-video video { | ||
width: 100%; | |||
max-width: 720px; | |||
min-height: 270px; | |||
background: #000; | |||
border-radius: 6px; | |||
display: block; | |||
margin: 0 auto; | |||
padding: 0; | |||
vertical-align: middle; | |||
} | } | ||
@media (max-width: | @media (max-width: 768px) { | ||
. | .skillbox-tab { | ||
padding: 8px 14px; | |||
font-size: 1.05em; | |||
padding: | |||
} | } | ||
. | .skillbox-desc { | ||
font-size: 0.95em; | |||
padding: 10px 0 6px; | |||
} | } | ||
. | .skillbox-video video { | ||
max-width: 100%; | |||
min-height: 220px; | |||
} | } | ||
} | } | ||
Edição atual tal como às 11h50min de 9 de junho de 2025
.skillbox-container {
width: 100%;
font-family: sans-serif;
color: #222;
margin: 0 auto;
overflow-x: clip; /* <-- este é o isolamento */
position: relative; /* necessário para o clip funcionar */
}
.skillbox-inner {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 0;
}
.skillbox-info-area {
width: 100%;
max-width: 900px;
display: flex;
flex-direction: column;
align-items: center;
margin: 24px 0 0;
padding: 0;
}
.skillbox-wrapper {
width: 100%;
max-width: 900px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.skillbox-tabs-separator {
width: 100vw;
height: 2px;
background: #ccc;
margin: 0 calc(-50vw + 50%);
}
.skillbox-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 6px;
padding: 0;
margin-bottom: -2px;
}
.skillbox-tab {
cursor: pointer;
background: #eaf1fb;
color: #1d3f63;
border: 2px solid #337ab7;
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 8px 16px;
font-size: 1em;
font-weight: bold;
transition: background 0.2s ease;
}
.skillbox-tab.active,
.skillbox-tab:hover {
background: #337ab7;
color: #fff;
border-color: #337ab7;
border-bottom: none;
}
.skillbox-desc {
font-size: 1em;
width: 100%;
max-width: 840px;
text-align: center;
font-weight: 500;
line-height: 1.6;
margin: 0 auto;
color: #222;
padding: 12px 0 8px;
}
.skillbox-video-area {
width: 100%;
max-width: 900px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 !important;
margin: 0 auto !important;
}
.skillbox-video video {
width: 100%;
max-width: 720px;
min-height: 270px;
background: #000;
border-radius: 6px;
display: block;
margin: 0 auto;
padding: 0;
vertical-align: middle;
}
@media (max-width: 768px) {
.skillbox-tab {
padding: 8px 14px;
font-size: 1.05em;
}
.skillbox-desc {
font-size: 0.95em;
padding: 10px 0 6px;
}
.skillbox-video video {
max-width: 100%;
min-height: 220px;
}
}