Mudanças entre as edições de "Predefinição:BossLayout/styles.css"
Ir para navegação
Ir para pesquisar
(Criou página com '→Container Geral: .boss-container { font-family: sans-serif; color: #333; } →Grid de Cards (Usado em Fases, Personagens e Recompensas): .boss-grid { displ...') |
|||
| Linha 1: | Linha 1: | ||
/* Container | /* Container que engloba tudo */ | ||
.boss- | .boss-main-wrapper { | ||
background: #f4f4f4; | |||
padding: 15px; | |||
border-radius: 10px; | |||
border: 1px solid #ddd; | |||
} | } | ||
/* | /* Navegação por Botões Estilo Widget */ | ||
.boss- | .boss-navigation { | ||
display: flex; | display: flex; | ||
gap: 10px; | |||
justify-content: center; | |||
margin-bottom: 20px; | |||
flex-wrap: wrap; | flex-wrap: wrap; | ||
} | } | ||
.boss-nav-btn { | |||
.boss- | padding: 12px 25px; | ||
background: #fff; | background: #fff; | ||
border: | border: 2px solid #459cca; | ||
border-radius: | color: #459cca; | ||
box-shadow: 0 4px | border-radius: 6px; | ||
font-weight: bold; | |||
cursor: pointer; | |||
transition: 0.3s; | |||
text-transform: uppercase; | |||
font-size: 13px; | |||
box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |||
} | } | ||
.boss-nav-btn:hover { | |||
. | |||
background: #459cca; | background: #459cca; | ||
color: #fff; | |||
} | |||
.boss-nav-btn.active { | |||
background: #5684c8; | |||
color: #fff; | |||
border-color: #5684c8; | |||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); | |||
} | } | ||
/* | /* Grid de Cards (Fases e Personagens) */ | ||
. | .boss-grid { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | |||
gap: | gap: 15px; | ||
} | } | ||
.boss-card { | |||
.boss- | flex: 1 1 300px; | ||
background: #fff; | |||
background: # | border: 1px solid #e0e0e0; | ||
border-radius: 8px; | |||
overflow: hidden; | |||
border-radius: | box-shadow: 0 4px 12px rgba(0,0,0,0.08); | ||
} | } | ||
/* | /* Esconder seções inativas */ | ||
. | .boss-section { | ||
display: none; | |||
} | } | ||
. | .boss-section.active { | ||
display: block; | |||
animation: slideUp 0.4s ease-out; | |||
} | } | ||
@keyframes slideUp { | |||
@ | from { opacity: 0; transform: translateY(15px); } | ||
to { opacity: 1; transform: translateY(0); } | |||
} | } | ||
Edição das 23h55min de 16 de abril de 2026
/* Container que engloba tudo */
.boss-main-wrapper {
background: #f4f4f4;
padding: 15px;
border-radius: 10px;
border: 1px solid #ddd;
}
/* Navegação por Botões Estilo Widget */
.boss-navigation {
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 20px;
flex-wrap: wrap;
}
.boss-nav-btn {
padding: 12px 25px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
text-transform: uppercase;
font-size: 13px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.boss-nav-btn:hover {
background: #459cca;
color: #fff;
}
.boss-nav-btn.active {
background: #5684c8;
color: #fff;
border-color: #5684c8;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
/* Grid de Cards (Fases e Personagens) */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* Esconder seções inativas */
.boss-section {
display: none;
}
.boss-section.active {
display: block;
animation: slideUp 0.4s ease-out;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}