MediaWiki:Common.css
Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.
- Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
- Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
- Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
- Opera: Pressione Ctrl-F5.
/* =========================================================
SPLIXMMO WIKI
MediaWiki:Common.css
FLEXBOX VERSION
========================================================= */
/* =========================================================
1. VARIÃVEIS
========================================================= */
:root {
--splix-blue: #4bbcff;
--splix-blue-strong: #259ee8;
--splix-blue-dark: #2c678f;
--splix-cyan: #8ceeff;
--splix-green: #8beab7;
--splix-purple: #b7a5ff;
--splix-coral: #ff8378;
--splix-yellow: #ffbd43;
--splix-text: #29445f;
--splix-title: #25547d;
--splix-muted: #6e8297;
--splix-bg: #f5fbff;
--splix-bg-secondary: #edf8ff;
--splix-card: #ffffff;
--splix-border: #d9ebf5;
--splix-shadow:
0 10px 30px rgba(65,129,177,.08);
--splix-shadow-hover:
0 16px 38px rgba(65,129,177,.14);
--splix-radius: 18px;
/* Layout */
--splix-shell-width: 1700px;
--splix-sidebar-width: 230px;
--splix-menu-width: 220px;
--splix-layout-gap: 28px;
--splix-shell-padding: 32px;
/* ==========================================================
PALETA AZUL SPLIX
========================================================== */
:root {
/* Fundo azul principal */
--splix-blue-gradient:
linear-gradient(
135deg,
rgba(197, 241, 255, .78) 0%,
rgba(221, 247, 255, .82) 100%
);
/* Tons derivados */
--splix-blue-soft: #d9f5ff;
--splix-blue-soft-strong: #c5f1ff;
/* Bordas */
--splix-blue-border: #8fdcf0;
--splix-blue-border-strong: #11a9c8;
/* Elementos clicáveis */
--splix-blue-accent: #2fa9df;
--splix-blue-accent-hover: #218fbe;
/* Texto */
--splix-blue-text: #25547d;
}
}
/* =========================================================
2. BASE
========================================================= */
html,
body {
margin: 0;
background:
var(--splix-bg);
color:
var(--splix-text);
}
body {
font-family:
"Trebuchet MS",
"Segoe UI",
Arial,
sans-serif;
font-size:
15px;
}
.skin-vector-2022 {
background:
radial-gradient(
circle at 8% 5%,
rgba(77,190,255,.10),
transparent 25%
),
radial-gradient(
circle at 92% 10%,
rgba(183,165,255,.11),
transparent 25%
),
linear-gradient(
180deg,
#f5fbff,
#f9fcff
);
}
/* =========================================================
3. HEADER
========================================================= */
.vector-header-container {
background:
rgba(255,255,255,.97);
border-bottom:
1px solid var(--splix-border);
box-shadow:
0 3px 18px rgba(58,111,157,.05);
}
.vector-header,
.vector-header-container .mw-header {
box-sizing:
border-box;
position:
relative;
display:
flex !important;
align-items:
center !important;
width:
100%;
max-width:
var(--splix-shell-width);
min-height:
88px;
margin-left:
auto;
margin-right:
auto;
padding-left:
var(--splix-shell-padding);
padding-right:
var(--splix-shell-padding);
}
/* =========================================================
4. HEADER — LOGO
========================================================= */
.vector-header-start {
box-sizing:
border-box !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
flex:
0 0 var(--splix-sidebar-width) !important;
width:
var(--splix-sidebar-width) !important;
min-width:
var(--splix-sidebar-width) !important;
max-width:
var(--splix-sidebar-width) !important;
margin:
0 !important;
}
.mw-logo {
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
margin:
0 auto !important;
}
.mw-logo-icon {
width:
112px !important;
height:
auto !important;
max-width:
none !important;
max-height:
72px !important;
object-fit:
contain;
}
.mw-logo-container {
display:
none !important;
}
/* =========================================================
5. HEADER — USUÃRIO
========================================================= */
.vector-header-end {
box-sizing:
border-box !important;
display:
flex !important;
align-items:
center !important;
justify-content:
flex-end !important;
flex:
1 1 auto !important;
width:
auto !important;
min-width:
0 !important;
max-width:
none !important;
margin:
0 !important;
margin-left:
auto !important;
}
.vector-user-links {
display:
flex !important;
align-items:
center !important;
flex:
0 0 auto !important;
margin-left:
auto !important;
margin-right:
0 !important;
position:
relative !important;
z-index:
20 !important;
}
.vector-user-links-wide {
margin-left:
auto !important;
}
/* =========================================================
6. BUSCA
========================================================= */
.vector-header #p-search,
.vector-header .vector-search-box,
.vector-header-container .mw-header #p-search,
.vector-header-container .mw-header .vector-search-box {
position:
absolute !important;
left:
50% !important;
top:
50% !important;
transform:
translate(-50%, -50%) !important;
width:
380px !important;
max-width:
380px !important;
margin:
0 !important;
z-index:
5 !important;
}
.vector-search-box {
overflow:
visible !important;
}
.vector-search-box .cdx-search-input {
display:
flex !important;
flex-direction:
row !important;
align-items:
stretch !important;
width:
100% !important;
height:
36px !important;
gap:
0 !important;
background:
transparent !important;
border:
0 !important;
outline:
0 !important;
box-shadow:
none !important;
}
.vector-search-box .cdx-search-input__input-wrapper {
display:
flex !important;
flex:
1 1 auto !important;
width:
auto !important;
min-width:
0 !important;
height:
36px !important;
margin:
0 !important;
padding:
0 !important;
background:
transparent !important;
border:
0 !important;
outline:
0 !important;
box-shadow:
none !important;
}
.vector-search-box .cdx-text-input {
display:
block !important;
flex:
1 1 auto !important;
width:
100% !important;
min-width:
0 !important;
height:
36px !important;
margin:
0 !important;
padding:
0 !important;
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
}
/* =========================================================
6A. INPUT DA BUSCA
========================================================= */
.vector-search-box .cdx-text-input__input,
.vector-search-box-input {
box-sizing:
border-box !important;
display:
block !important;
width:
100% !important;
height:
36px !important;
min-height:
36px !important;
max-height:
36px !important;
margin:
0 !important;
padding:
0 12px 0 36px !important;
background:
#f9fcff !important;
border:
1px solid #cfe4f2 !important;
border-right:
0 !important;
border-radius:
14px 0 0 14px !important;
color:
var(--splix-text) !important;
font-family:
"Trebuchet MS",
"Segoe UI",
Arial,
sans-serif !important;
font-size:
14px !important;
line-height:
normal !important;
box-shadow:
none !important;
outline:
none !important;
}
.vector-search-box .cdx-text-input__input::placeholder,
.vector-search-box-input::placeholder {
color:
#72879a !important;
opacity:
1;
}
.vector-search-box .cdx-text-input__input:focus,
.vector-search-box .cdx-text-input__input:focus-visible,
.vector-search-box-input:focus,
.vector-search-box-input:focus-visible {
border-color:
var(--splix-blue) !important;
box-shadow:
inset 0 0 0 1px var(--splix-blue) !important;
outline:
none !important;
}
/* =========================================================
6B. BOTÃO PESQUISAR
========================================================= */
.vector-search-box .cdx-search-input__end-button,
.vector-search-box button.cdx-button {
box-sizing:
border-box !important;
display:
inline-flex !important;
flex:
0 0 auto !important;
align-items:
center !important;
justify-content:
center !important;
width:
auto !important;
height:
36px !important;
min-height:
36px !important;
max-height:
36px !important;
margin:
0 !important;
padding:
0 15px !important;
background:
linear-gradient(
180deg,
#ffffff,
#f3faff
) !important;
border:
1px solid #cfe4f2 !important;
border-radius:
0 14px 14px 0 !important;
color:
var(--splix-title) !important;
font-family:
"Trebuchet MS",
"Segoe UI",
Arial,
sans-serif !important;
font-size:
13px !important;
font-weight:
700 !important;
line-height:
1 !important;
white-space:
nowrap !important;
box-shadow:
none !important;
outline:
none !important;
}
.vector-search-box .cdx-search-input__end-button:hover,
.vector-search-box button.cdx-button:hover {
background:
#eaf8ff !important;
border-color:
#b6deef !important;
color:
var(--splix-blue-dark) !important;
}
/* =========================================================
7. SEM HAMBÚRGUER NO DESKTOP
========================================================= */
@media screen and (min-width: 900px) {
#vector-main-menu-dropdown,
.vector-header-start > .vector-main-menu-landmark,
.vector-main-menu-landmark .vector-dropdown {
display:
none !important;
}
.vector-main-menu .vector-pinnable-header-toggle-button,
.vector-main-menu .vector-pinnable-header-pin-button,
.vector-main-menu .vector-pinnable-header-unpin-button {
display:
none !important;
}
}
/* =========================================================
8. SHELL PRINCIPAL — FLEXBOX
========================================================= */
.mw-page-container {
box-sizing:
border-box;
width:
100%;
max-width:
var(--splix-shell-width);
margin-left:
auto !important;
margin-right:
auto !important;
padding-left:
var(--splix-shell-padding);
padding-right:
var(--splix-shell-padding);
background:
transparent !important;
}
.mw-page-container-inner {
display:
flex !important;
flex-direction:
row !important;
flex-wrap:
wrap !important;
align-items:
flex-start !important;
justify-content:
flex-start !important;
column-gap:
var(--splix-layout-gap) !important;
row-gap:
0 !important;
width:
100% !important;
max-width:
none !important;
min-width:
0 !important;
}
/* =========================================================
8A. SITENOTICE
========================================================= */
.vector-sitenotice-container {
box-sizing:
border-box !important;
order:
0 !important;
flex:
0 0 100% !important;
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
}
/* =========================================================
9. SIDEBAR — FLEX
========================================================= */
.vector-column-start {
box-sizing:
border-box !important;
order:
1 !important;
display:
block !important;
align-self:
flex-start !important;
flex:
0 0 var(--splix-sidebar-width) !important;
width:
var(--splix-sidebar-width) !important;
min-width:
var(--splix-sidebar-width) !important;
max-width:
var(--splix-sidebar-width) !important;
margin:
0 !important;
padding:
0 !important;
overflow:
visible !important;
}
/* =========================================================
9A. ALINHAMENTO VERTICAL DO MENU
========================================================= */
/*
Todos os wrappers da sidebar começam exatamente
no mesmo Y do conteúdo principal.
*/
.vector-column-start .vector-main-menu-container,
.vector-column-start #mw-navigation,
.vector-column-start #mw-panel,
.vector-column-start .vector-main-menu-landmark,
.vector-column-start #vector-main-menu-pinned-container,
.vector-column-start .vector-pinned-container,
.vector-column-start .vector-sticky-pinned-container {
box-sizing:
border-box !important;
margin-top:
0 !important;
padding-top:
0 !important;
}
/* =========================================================
9B. CONTAINERS DO MENU
========================================================= */
.vector-main-menu-container,
#vector-main-menu-pinned-container,
#vector-main-menu-pinned-container.vector-pinned-container,
.vector-column-start .vector-pinned-container,
.vector-column-start .vector-sticky-pinned-container {
box-sizing:
border-box !important;
width:
100% !important;
min-width:
0 !important;
max-width:
100% !important;
margin-left:
0 !important;
margin-right:
0 !important;
padding-left:
0 !important;
padding-right:
0 !important;
overflow:
visible !important;
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
}
/* =========================================================
9C. LIMPEZA DO WRAPPER DO MENU
========================================================= */
.vector-column-start,
.vector-main-menu-container,
.vector-column-start #mw-navigation,
.vector-column-start #mw-panel,
.vector-column-start .vector-main-menu-landmark,
#vector-main-menu-pinned-container,
.vector-column-start .vector-pinned-container,
.vector-column-start .vector-sticky-pinned-container {
background-color:
transparent !important;
background-image:
none !important;
border:
0 !important;
box-shadow:
none !important;
}
.vector-column-start::before,
.vector-column-start::after,
.vector-main-menu-container::before,
.vector-main-menu-container::after,
.vector-column-start #mw-navigation::before,
.vector-column-start #mw-navigation::after,
.vector-column-start #mw-panel::before,
.vector-column-start #mw-panel::after,
#vector-main-menu-pinned-container::before,
#vector-main-menu-pinned-container::after,
.vector-column-start .vector-pinned-container::before,
.vector-column-start .vector-pinned-container::after {
content:
none !important;
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
}
/*
IMPORTANTE:
Sem padding superior aqui.
Esse era um dos deslocamentos entre menu e conteúdo.
*/
.vector-main-menu-container {
padding-top:
0 !important;
padding-bottom:
30px !important;
}
/* =========================================================
10. CONTEÚDO — FLEX
========================================================= */
.mw-content-container {
box-sizing:
border-box !important;
order:
2 !important;
align-self:
flex-start !important;
flex:
1 1 0 !important;
width:
auto !important;
min-width:
0 !important;
max-width:
none !important;
margin:
0 !important;
padding-top:
0 !important;
}
/*
Sem terceira coluna permanente.
*/
.vector-column-end {
display:
none !important;
}
/* =========================================================
10A. FOOTER — ABAIXO DE TUDO
========================================================= */
.mw-footer-container {
box-sizing:
border-box !important;
order:
3 !important;
flex:
0 0 100% !important;
width:
100% !important;
min-width:
0 !important;
max-width:
100% !important;
margin:
28px 0 0 0 !important;
padding:
18px 0 8px 0 !important;
border-top:
1px solid var(--splix-border);
}
.mw-footer-container > .mw-footer,
#footer.mw-footer {
box-sizing:
border-box !important;
width:
100% !important;
max-width:
none !important;
margin:
0 !important;
}
/* =========================================================
11. CARD DO MENU
========================================================= */
#vector-main-menu.vector-main-menu,
.vector-column-start #vector-main-menu,
.vector-main-menu {
box-sizing:
border-box !important;
width:
var(--splix-menu-width) !important;
min-width:
0 !important;
max-width:
100% !important;
margin-top:
0 !important;
margin-left:
auto !important;
margin-right:
auto !important;
margin-bottom:
0 !important;
background:
linear-gradient(
180deg,
rgba(255,255,255,.98),
rgba(248,253,255,.98)
) !important;
border:
1px solid #dcecf5 !important;
border-radius:
20px !important;
padding:
15px 12px 17px 12px !important;
box-shadow:
0 10px 30px rgba(64,126,172,.08) !important;
font-size:
14px;
}
/* =========================================================
11A. CABEÇALHO DO MENU
========================================================= */
.vector-main-menu .vector-pinnable-header {
border:
0 !important;
padding:
0 4px 11px;
margin:
0 0 9px;
}
.vector-main-menu .vector-pinnable-header-label {
display:
flex;
align-items:
center;
color:
var(--splix-title);
font-family:
"Arial Rounded MT Bold",
"Trebuchet MS",
"Segoe UI",
sans-serif;
font-size:
14px;
font-weight:
800;
text-transform:
none;
white-space:
nowrap;
}
.vector-main-menu .vector-pinnable-header-label::before {
content:
"";
width:
8px;
height:
8px;
min-width:
8px;
margin-right:
8px;
border-radius:
50%;
background:
linear-gradient(
135deg,
var(--splix-blue),
var(--splix-cyan)
);
box-shadow:
0 0 0 4px rgba(75,188,255,.10);
}
.vector-main-menu .vector-pinnable-header-toggle-button {
display:
none !important;
}
/* =========================================================
11B. SEÇÕES DO MENU
========================================================= */
.vector-main-menu .vector-menu {
margin-top:
9px;
}
.vector-main-menu .vector-menu-heading {
display:
flex;
align-items:
center;
margin:
14px 3px 6px;
padding:
6px 8px;
border-radius:
9px;
background:
linear-gradient(
90deg,
rgba(75,188,255,.10),
rgba(140,238,255,.03)
);
color:
#58809c;
font-size:
10px;
font-weight:
800;
letter-spacing:
.12em;
text-transform:
uppercase;
white-space:
nowrap;
}
.vector-main-menu .vector-menu-heading::before {
content:
"";
width:
3px;
height:
13px;
min-width:
3px;
margin-right:
7px;
border-radius:
4px;
background:
linear-gradient(
180deg,
var(--splix-blue),
var(--splix-purple)
);
}
/* =========================================================
11C. LINKS DO MENU
========================================================= */
.vector-main-menu .vector-menu-content-list {
margin:
0;
padding:
0;
}
.vector-main-menu .vector-menu-content-list li {
margin:
2px 0;
}
.vector-main-menu .vector-menu-content-list a {
position:
relative;
display:
flex;
align-items:
center;
box-sizing:
border-box;
width:
100%;
min-height:
34px;
padding:
7px 10px 7px 13px;
border-radius:
10px;
color:
#49647c;
font-size:
13.5px;
font-weight:
600;
line-height:
1.25;
text-decoration:
none;
white-space:
nowrap;
word-break:
normal;
overflow-wrap:
normal;
hyphens:
none;
transition:
background .16s ease,
color .16s ease,
transform .16s ease,
box-shadow .16s ease;
}
.vector-main-menu .vector-menu-content-list a::before {
content:
"";
width:
5px;
height:
5px;
min-width:
5px;
margin-right:
9px;
border-radius:
50%;
background:
#c1d8e6;
}
.vector-main-menu .vector-menu-content-list a:hover {
background:
linear-gradient(
90deg,
#e9f8ff,
#f3fcff
);
color:
var(--splix-blue-dark);
transform:
translateX(2px);
box-shadow:
0 3px 10px rgba(71,159,214,.07);
}
.vector-main-menu .vector-menu-content-list a:hover::before {
background:
var(--splix-blue);
}
/* Selecionado */
.vector-main-menu
.vector-menu-content-list
.mw-list-item.selected > a,
.vector-main-menu
.vector-menu-content-list
li.selected > a {
background:
linear-gradient(
90deg,
#dff5ff,
#eefcff
);
color:
#187dad;
font-weight:
800;
}
.vector-main-menu
.vector-menu-content-list
.mw-list-item.selected > a::before,
.vector-main-menu
.vector-menu-content-list
li.selected > a::before {
background:
var(--splix-blue);
}
/* Links não criados */
.vector-main-menu a.new {
color:
#e57470;
}
.vector-main-menu a.new::before {
background:
#f2b8b5;
}
.vector-main-menu a.new:hover {
color:
#d65d58;
background:
#fff5f4;
}
/* Detalhe inferior */
.vector-main-menu::after {
content:
"";
display:
block;
width:
50px;
height:
3px;
margin:
17px auto 1px;
border-radius:
10px;
background:
linear-gradient(
90deg,
var(--splix-purple),
var(--splix-blue),
var(--splix-green)
);
opacity:
.65;
}
/* =========================================================
12. CONTEÚDO NORMAL
========================================================= */
.mw-body {
box-sizing:
border-box;
width:
100%;
min-width:
0;
margin-top:
0 !important;
background:
var(--splix-card);
border:
1px solid var(--splix-border);
border-radius:
20px;
box-shadow:
var(--splix-shadow);
padding:
30px 36px;
}
/* =========================================================
13. TÃTULOS E TEXTO
========================================================= */
.firstHeading,
.mw-page-title-main {
font-family:
"Arial Rounded MT Bold",
"Trebuchet MS",
"Segoe UI",
sans-serif;
color:
var(--splix-title);
font-weight:
800;
letter-spacing:
-.02em;
}
.mw-body-header {
border-bottom:
1px solid var(--splix-border);
margin-bottom:
22px;
}
.mw-parser-output {
color:
var(--splix-text);
font-size:
15.5px;
line-height:
1.7;
}
.mw-parser-output p {
margin-bottom:
1em;
}
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
font-family:
"Arial Rounded MT Bold",
"Trebuchet MS",
"Segoe UI",
sans-serif;
}
.mw-parser-output h2 {
color:
var(--splix-title);
font-weight:
800;
margin-top:
2em;
border-bottom:
2px solid var(--splix-border);
padding-bottom:
8px;
}
.mw-parser-output h3 {
color:
#3376a7;
font-weight:
800;
}
.mw-parser-output h4 {
color:
var(--splix-text);
font-weight:
700;
}
/* =========================================================
14. LINKS
========================================================= */
a {
color:
#248fd3;
}
a:hover {
color:
#1479bc;
text-decoration:
none;
}
a.new {
color:
var(--splix-coral);
}
a.new:hover {
color:
#e9675d;
}
/* =========================================================
15. ABAS SUPERIORES
========================================================= */
.vector-page-toolbar-container {
border-bottom-color:
var(--splix-border);
}
.vector-menu-tabs .mw-list-item a {
color:
#65788e;
}
.vector-menu-tabs .mw-list-item.selected a {
color:
var(--splix-blue-strong);
font-weight:
700;
}
/* =========================================================
16. FERRAMENTAS
========================================================= */
.vector-dropdown-content {
background:
#ffffff;
border:
1px solid #dcecf5;
border-radius:
16px;
box-shadow:
0 14px 36px rgba(54,109,151,.14);
overflow:
hidden;
}
.vector-dropdown-content .vector-menu-content {
padding:
7px;
}
.vector-dropdown-content .vector-menu-heading {
color:
var(--splix-title);
font-size:
13px;
font-weight:
800;
}
.vector-dropdown-content .vector-menu-content-list a {
border-radius:
8px;
color:
#4d6a80;
}
.vector-dropdown-content .vector-menu-content-list a:hover {
background:
#eaf8ff;
color:
var(--splix-blue-dark);
}
/* =========================================================
17. TABELAS
========================================================= */
.mw-parser-output table.wikitable {
background:
#ffffff;
border:
1px solid var(--splix-border);
border-collapse:
separate;
border-spacing:
0;
border-radius:
14px;
overflow:
hidden;
box-shadow:
0 5px 18px rgba(66,126,171,.06);
}
.mw-parser-output table.wikitable > tbody > tr > th,
.mw-parser-output table.wikitable > tr > th {
background:
linear-gradient(
135deg,
rgba(197, 241, 255, .78) 0%,
rgba(221, 247, 255, .82) 100%
);
color:
#285576;
font-weight:
800;
padding:
10px 12px;
}
.mw-parser-output table.wikitable td {
border-color:
var(--splix-border);
padding:
9px 12px;
}
.mw-parser-output table.wikitable tr:nth-child(even) td {
background:
#f8fcff;
}
/* =========================================================
18. CÓDIGO
========================================================= */
pre,
.mw-code {
background:
#f4faff;
border:
1px solid var(--splix-border);
border-radius:
12px;
padding:
14px;
}
/* =========================================================
19. SUMÃRIO
========================================================= */
.toc,
#toc {
background:
#f8fcff;
border:
1px solid var(--splix-border);
border-radius:
16px;
padding:
16px 20px;
}
.tocnumber {
color:
var(--splix-blue-strong);
}
/* =========================================================
20. BOTÕES / FORMULÃRIOS
========================================================= */
.mw-ui-button,
.cdx-button {
border-radius:
10px !important;
}
input,
textarea,
select {
border-radius:
9px;
}
/* =========================================================
21. RODAPÉ
========================================================= */
.mw-footer {
color:
var(--splix-muted);
font-size:
12px;
}
.mw-footer a {
color:
#5e82a3;
}
/* =========================================================
22. SCROLLBAR
========================================================= */
::-webkit-scrollbar {
width:
10px;
height:
10px;
}
::-webkit-scrollbar-track {
background:
#eef7fc;
}
::-webkit-scrollbar-thumb {
background:
#b9d6e8;
border-radius:
10px;
border:
2px solid #eef7fc;
}
::-webkit-scrollbar-thumb:hover {
background:
#91bcd6;
}
::selection {
background:
rgba(75,188,255,.25);
color:
var(--splix-title);
}
/* =========================================================
23. HOME — RESET
========================================================= */
.page-Página_principal .firstHeading,
.page-Página_principal .mw-body-header {
display:
none;
}
.page-Página_principal .mw-body {
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
padding:
0 !important;
}
.page-Página_principal .mw-body-content {
margin-top:
0;
}
.splix-home {
width:
100%;
max-width:
1250px;
margin:
0 auto;
padding-bottom:
40px;
}
/* =========================================================
24. HOME — HERO
========================================================= */
.splix-hero {
box-sizing:
border-box;
position:
relative;
overflow:
hidden;
width:
100%;
min-height:
420px;
border-radius:
28px;
padding:
55px 60px;
background-image:
linear-gradient(
90deg,
rgba(245,251,255,.98) 0%,
rgba(245,251,255,.93) 32%,
rgba(245,251,255,.72) 52%,
rgba(245,251,255,.30) 72%,
rgba(245,251,255,.08) 100%
),
url("https://wiki.splix.com.br/images/8/87/Banner.png");
background-size:
cover;
background-position:
center right;
background-repeat:
no-repeat;
border:
1px solid #d8edf5;
box-shadow:
0 20px 45px rgba(67,137,185,.12);
color:
var(--splix-text);
}
.splix-hero-content {
position:
relative;
z-index:
2;
max-width:
720px;
}
/* =========================================================
25. HOME — LOGO INTERNO
========================================================= */
.splix-hero-logo {
width:
280px;
height:
135px;
background-image:
url("/assets/splix-wiki-logo-web.png");
background-repeat:
no-repeat;
background-position:
left center;
background-size:
contain;
margin-bottom:
10px;
}
/* =========================================================
26. HOME — EYEBROW
========================================================= */
.splix-eyebrow {
color:
#2ca7d4;
font-size:
12px;
font-weight:
900;
letter-spacing:
.17em;
margin-bottom:
10px;
}
/* =========================================================
27. HOME — TÃTULO
========================================================= */
.splix-hero-title {
font-family:
"Arial Rounded MT Bold",
"Trebuchet MS",
"Segoe UI",
sans-serif;
color:
#285b85;
font-size:
54px;
font-weight:
800;
line-height:
1.05;
letter-spacing:
-.02em;
margin-bottom:
16px;
}
/* =========================================================
28. HOME — SUBTÃTULO
========================================================= */
.splix-hero-subtitle {
color:
#54708a;
font-size:
19px;
line-height:
1.65;
max-width:
660px;
}
/* =========================================================
29. HOME — BOTÕES
========================================================= */
.splix-actions {
display:
flex;
gap:
13px;
flex-wrap:
wrap;
margin-top:
28px;
}
.splix-button a {
display:
inline-flex;
align-items:
center;
justify-content:
center;
min-height:
47px;
padding:
0 23px;
border-radius:
14px;
font-weight:
800;
font-size:
15px;
text-decoration:
none !important;
transition:
transform .15s ease,
box-shadow .15s ease,
background .15s ease;
}
.splix-button a:hover {
transform:
translateY(-2px);
}
.splix-button-primary a {
background:
linear-gradient(
135deg,
#42b7f7,
#66d9f7
);
color:
#ffffff !important;
box-shadow:
0 8px 22px rgba(66,183,247,.25);
}
.splix-button-primary a:hover {
box-shadow:
0 10px 27px rgba(66,183,247,.34);
}
.splix-button-secondary a {
background:
rgba(255,255,255,.72);
color:
#3b6689 !important;
border:
1px solid #bee3f1;
box-shadow:
0 5px 16px rgba(62,111,151,.07);
}
.splix-button-secondary a:hover {
background:
#ffffff;
}
/* =========================================================
30. HOME — SEÇÕES
========================================================= */
.splix-section {
margin-top:
22px;
}
.splix-section-head {
display:
flex;
justify-content:
space-between;
align-items:
flex-end;
gap:
20px;
margin-bottom:
22px;
}
.splix-section-kicker {
color:
#33a8d4;
font-size:
11px;
font-weight:
900;
letter-spacing:
.16em;
margin-bottom:
5px;
}
.splix-section-title {
font-family:
"Arial Rounded MT Bold",
"Trebuchet MS",
"Segoe UI",
sans-serif;
color:
var(--splix-title);
font-size:
30px;
font-weight:
800;
line-height:
1.15;
}
.splix-section-subtitle {
color:
var(--splix-muted);
font-size:
15px;
margin-top:
5px;
}
/* =========================================================
31. HOME — GRIDS
========================================================= */
.splix-grid {
display:
grid;
gap:
18px;
}
.splix-grid-3 {
grid-template-columns:
repeat(3,minmax(0,1fr));
}
/* =========================================================
32. HOME — CARDS
========================================================= */
.splix-card {
box-sizing:
border-box;
position:
relative;
min-width:
0;
background:
linear-gradient(
180deg,
#ffffff,
#fbfeff
);
border:
1px solid var(--splix-border);
border-radius:
20px;
padding:
25px;
min-height:
185px;
box-shadow:
var(--splix-shadow);
transition:
transform .16s ease,
box-shadow .16s ease,
border-color .16s ease;
}
.splix-card:hover {
transform:
translateY(-4px);
box-shadow:
var(--splix-shadow-hover);
border-color:
#c9e5f4;
}
.splix-card-icon {
display:
inline-flex;
align-items:
center;
justify-content:
center;
width:
42px;
height:
42px;
border-radius:
13px;
background:
#e6f7ff;
color:
#2fa9df;
font-weight:
900;
margin-bottom:
16px;
}
.splix-card-purple .splix-card-icon {
background:
#f0ecff;
color:
#8b76eb;
}
.splix-card-green .splix-card-icon {
background:
#e9faf1;
color:
#33ad7c;
}
.splix-card-title,
.splix-feature-title,
.splix-tribe-name {
font-family:
"Arial Rounded MT Bold",
"Trebuchet MS",
"Segoe UI",
sans-serif;
color:
var(--splix-title);
font-weight:
800;
}
.splix-card-title {
font-size:
20px;
margin-bottom:
7px;
}
.splix-card-text,
.splix-feature-text {
color:
var(--splix-muted);
line-height:
1.6;
}
.splix-card-link {
margin-top:
17px;
font-weight:
800;
}
.splix-card-link a,
.splix-feature > a,
.splix-tribe a {
color:
var(--splix-blue-strong) !important;
text-decoration:
none;
}
/* =========================================================
33. HOME — SISTEMAS
========================================================= */
.splix-feature-grid {
display:
grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:
15px;
}
.splix-feature {
min-width:
0;
background:
linear-gradient(
145deg,
#ffffff,
#f9fdff
);
border:
1px solid var(--splix-border);
border-radius:
18px;
padding:
22px;
box-shadow:
0 8px 24px rgba(65,128,175,.06);
transition:
transform .16s ease,
box-shadow .16s ease;
}
.splix-feature:hover {
transform:
translateY(-3px);
box-shadow:
0 14px 30px rgba(65,128,175,.10);
}
.splix-feature-title {
font-size:
18px;
margin-bottom:
7px;
}
.splix-feature-text {
min-height:
70px;
margin-bottom:
11px;
}
/* =========================================================
34. HOME — TRIBOS
========================================================= */
.splix-tribes {
display:
grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap:
15px;
}
.splix-tribe {
min-width:
0;
background:
linear-gradient(
145deg,
#ffffff,
#f0fbff
);
border:
1px solid var(--splix-border);
border-radius:
18px;
padding:
24px;
min-height:
110px;
box-shadow:
0 8px 22px rgba(66,126,171,.07);
transition:
transform .16s ease,
box-shadow .16s ease;
}
.splix-tribe:hover {
transform:
translateY(-3px);
box-shadow:
0 13px 30px rgba(66,126,171,.11);
}
.splix-tribe-name {
font-size:
21px;
margin-bottom:
19px;
}
/* =========================================================
35. DESKTOP MÉDIO
1200px — 1499px
========================================================= */
@media screen and (min-width: 1200px) and (max-width: 1499px) {
:root {
--splix-sidebar-width: 190px;
--splix-menu-width: 180px;
--splix-layout-gap: 22px;
--splix-shell-padding: 24px;
}
.vector-header #p-search,
.vector-header .vector-search-box,
.vector-header-container .mw-header #p-search,
.vector-header-container .mw-header .vector-search-box {
width:
350px !important;
max-width:
350px !important;
}
.vector-main-menu .vector-menu-content-list a {
font-size:
12.8px;
padding-left:
10px;
padding-right:
7px;
}
.vector-main-menu .vector-menu-content-list a::before {
margin-right:
7px;
}
.splix-hero {
padding:
50px;
}
.splix-hero-title {
font-size:
48px;
}
}
/* =========================================================
36. DESKTOP COMPACTO
900px — 1199px
========================================================= */
@media screen and (min-width: 900px) and (max-width: 1199px) {
:root {
--splix-sidebar-width: 165px;
--splix-menu-width: 158px;
--splix-layout-gap: 18px;
--splix-shell-padding: 18px;
}
.vector-header #p-search,
.vector-header .vector-search-box,
.vector-header-container .mw-header #p-search,
.vector-header-container .mw-header .vector-search-box {
width:
300px !important;
max-width:
300px !important;
}
.mw-logo-icon {
width:
96px !important;
}
.vector-main-menu {
padding:
14px 9px 16px !important;
}
.vector-main-menu .vector-pinnable-header-label {
font-size:
13px;
}
.vector-main-menu .vector-menu-heading {
font-size:
8.5px;
letter-spacing:
.08em;
padding:
6px 5px;
}
.vector-main-menu .vector-menu-content-list a {
font-size:
12px;
padding:
7px 5px 7px 7px;
}
.vector-main-menu .vector-menu-content-list a::before {
width:
4px;
height:
4px;
min-width:
4px;
margin-right:
6px;
}
.mw-body {
padding:
26px;
}
.splix-hero {
padding:
42px 38px;
}
.splix-hero-title {
font-size:
42px;
}
.splix-grid-3,
.splix-feature-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.splix-tribes {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
/* =========================================================
37. TELAS MENORES QUE 900px
========================================================= */
@media screen and (max-width: 899px) {
:root {
--splix-shell-padding: 14px;
}
.vector-header,
.vector-header-container .mw-header {
min-height:
76px;
padding-left:
14px;
padding-right:
14px;
}
.vector-header-start {
flex:
0 0 auto !important;
width:
auto !important;
min-width:
0 !important;
max-width:
none !important;
justify-content:
flex-start !important;
}
.mw-logo-icon {
width:
90px !important;
}
#vector-main-menu-dropdown,
.vector-header-start > .vector-main-menu-landmark,
.vector-main-menu-landmark .vector-dropdown {
display:
none !important;
}
.vector-header #p-search,
.vector-header .vector-search-box,
.vector-header-container .mw-header #p-search,
.vector-header-container .mw-header .vector-search-box {
position:
relative !important;
left:
auto !important;
top:
auto !important;
transform:
none !important;
width:
280px !important;
max-width:
40vw !important;
margin-left:
auto !important;
margin-right:
auto !important;
}
.mw-page-container-inner {
flex-direction:
column !important;
flex-wrap:
nowrap !important;
gap:
18px !important;
}
.vector-sitenotice-container {
order:
0 !important;
}
.vector-column-start {
order:
1 !important;
flex:
0 0 auto !important;
width:
100% !important;
min-width:
0 !important;
max-width:
100% !important;
}
.vector-main-menu-container,
#vector-main-menu-pinned-container,
.vector-column-start .vector-pinned-container {
width:
100% !important;
max-width:
100% !important;
}
#vector-main-menu.vector-main-menu,
.vector-column-start #vector-main-menu {
width:
100% !important;
max-width:
100% !important;
}
.vector-main-menu .vector-menu-content-list {
display:
flex;
flex-wrap:
wrap;
gap:
4px 6px;
}
.vector-main-menu .vector-menu-content-list li {
flex:
0 0 auto;
}
.vector-main-menu .vector-menu-content-list a {
width:
auto;
white-space:
normal;
}
.mw-content-container {
order:
2 !important;
width:
100% !important;
max-width:
100% !important;
}
.mw-footer-container {
order:
3 !important;
width:
100% !important;
flex:
0 0 auto !important;
margin-top:
0 !important;
}
.mw-body {
padding:
22px 18px;
}
.splix-grid-3,
.splix-feature-grid,
.splix-tribes {
grid-template-columns:
1fr;
}
.splix-hero {
min-height:
auto;
padding:
34px 26px;
border-radius:
22px;
}
.splix-hero-title {
font-size:
38px;
}
.splix-hero-subtitle {
font-size:
17px;
}
}
/* =========================================================
38. MOBILE
========================================================= */
@media screen and (max-width: 600px) {
.vector-header,
.vector-header-container .mw-header {
flex-wrap:
wrap !important;
gap:
8px;
padding-top:
8px;
padding-bottom:
8px;
}
.vector-header-start {
order:
1;
}
.vector-header-end {
order:
2;
flex:
1 1 auto !important;
}
.vector-header #p-search,
.vector-header .vector-search-box,
.vector-header-container .mw-header #p-search,
.vector-header-container .mw-header .vector-search-box {
order:
3;
width:
100% !important;
max-width:
100% !important;
}
.splix-hero {
padding:
30px 22px;
}
.splix-hero-logo {
width:
220px;
height:
105px;
}
.splix-hero-title {
font-size:
34px;
}
.splix-hero-subtitle {
font-size:
16px;
}
.splix-section {
margin-top:
40px;
}
.splix-section-head {
display:
block;
}
.splix-section-title {
font-size:
27px;
}
}
.splix-grid.splix-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 900px) {
.splix-grid.splix-grid-2 {
grid-template-columns: 1fr;
}
}
/* ==========================================================
SPLIX FAQ / ACCORDION
========================================================== */
.splix-faq {
margin-top: 18px;
background: linear-gradient(
180deg,
rgba(255,255,255,.98) 0%,
rgba(248,252,255,.98) 100%
);
border: 1px solid var(--splix-border);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(56,136,184,.08);
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.splix-faq:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(56,136,184,.12);
border-color: rgba(75,188,255,.38);
}
/* ==========================================================
PERGUNTA / ÃREA CLICÃVEL
========================================================== */
.splix-faq-question {
position: relative;
display: flex;
align-items: center;
min-height: 68px;
padding: 18px 64px 18px 24px;
color: var(--splix-title);
font-size: 17px;
font-weight: 800;
line-height: 1.35;
cursor: pointer;
user-select: none;
transition: background .18s ease;
}
.splix-faq-question:hover {
background: rgba(75,188,255,.045);
}
/* ==========================================================
BOTÃO + / -
========================================================== */
.splix-faq-icon {
position: absolute;
top: 50%;
right: 20px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
border-radius: 50%;
background: linear-gradient(
135deg,
var(--splix-blue) 0%,
#58cbd7 52%,
var(--splix-green) 100%
);
color: #fff;
box-shadow: 0 5px 14px rgba(58,172,199,.22);
pointer-events: none;
}
/* + padrão */
.splix-faq-icon::before {
content: "+";
color: #fff;
font-size: 22px;
font-weight: 800;
line-height: 1;
}
/* ==========================================================
CONTEÚDO
========================================================== */
.splix-faq-content {
padding: 20px 24px 24px;
border-top: 1px solid var(--splix-border);
color: var(--splix-text);
font-size: 15px;
line-height: 1.65;
background: rgba(255,255,255,.72);
}
.splix-faq-content ul {
margin-top: 10px;
margin-bottom: 0;
}
/* ==========================================================
REMOVE O TOGGLE AUTOMÃTICO DO MEDIAWIKI
========================================================== */
.splix-faq .mw-collapsible-toggle {
display: none !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 700px) {
.splix-faq-question {
min-height: 62px;
padding: 16px 58px 16px 18px;
font-size: 16px;
}
.splix-faq-icon {
right: 14px;
width: 32px;
height: 32px;
}
.splix-faq-content {
padding: 18px;
}
}
/* ==========================================================
SPLIX - REBALANCEAMENTO DE CLASSES
========================================================== */
/* ==========================================================
SPLIX - NAVEGAÇÃO DE CLASSES
4 COLUNAS / 3 LINHAS
========================================================== */
.splix-home .splix-class-nav {
display: grid !important;
grid-template-columns:
repeat(4, 112px) !important;
grid-auto-flow: row !important;
justify-content: center !important;
align-items: stretch !important;
column-gap: 18px !important;
row-gap: 18px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* ==========================================================
CARD
========================================================== */
.splix-home .splix-class-nav
> .splix-class-nav-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
width: 112px !important;
min-width: 112px !important;
max-width: 112px !important;
height: 160px !important;
min-height: 160px !important;
max-height: 160px !important;
margin: 0 !important;
padding: 14px 10px !important;
box-sizing: border-box !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#f6fbff 100%
) !important;
border: 1px solid #cfe8f7 !important;
border-radius: 18px !important;
box-shadow:
0 10px 24px rgba(44, 103, 143, 0.08) !important;
}
/* ==========================================================
ÃREA DO SPRITE
========================================================== */
.splix-home .splix-class-nav-card
.splix-rebalance-class-sprite {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
height: 105px !important;
min-height: 105px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
IMAGEM
========================================================== */
.splix-home .splix-class-nav-card
.splix-rebalance-class-sprite img,
.splix-home .splix-class-nav-card
.splix-rebalance-class-sprite .mw-file-element {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 95px !important;
max-height: 100px !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* ==========================================================
NOME
========================================================== */
.splix-home .splix-class-nav
.splix-class-nav-name {
flex: 0 0 auto !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
line-height: 1.25 !important;
}
/* ==========================================================
CONTAINER PRINCIPAL DA CLASSE
========================================================== */
.splix-rebalance-class {
overflow: hidden;
background:
linear-gradient(
180deg,
rgba(255,255,255,.99) 0%,
rgba(249,253,255,.99) 100%
);
border: 1px solid var(--splix-border);
border-radius: 22px;
box-shadow: 0 10px 30px rgba(56,136,184,.08);
}
/* ==========================================================
CABEÇALHO DA CLASSE
========================================================== */
.splix-rebalance-class-head {
position: relative;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 24px;
width: 100%;
box-sizing: border-box;
padding: 24px 28px !important;
margin: 0 !important;
background:
linear-gradient(
135deg,
rgba(197, 241, 255, .78) 0%,
rgba(221, 247, 255, .82) 100%
);
border-bottom: 1px solid var(--splix-border);
}
/* ==========================================================
SPRITE DA CLASSE
========================================================== */
.splix-rebalance-class-sprite {
flex: 0 0 115px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 115px !important;
min-width: 115px !important;
min-height: 110px !important;
margin: 0 !important;
padding: 0 !important;
}
.splix-rebalance-class-sprite img,
.splix-rebalance-class-sprite .mw-file-element {
display: block !important;
max-width: 105px !important;
max-height: 110px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
CONTEÚDO CENTRAL DA CLASSE
========================================================== */
.splix-rebalance-class-main {
flex: 1 1 auto !important;
display: block !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
/* Label */
.splix-rebalance-class-label {
margin: 0 0 5px !important;
padding: 0 !important;
color: var(--splix-muted);
font-size: 11px;
font-weight: 900;
line-height: 1.2;
letter-spacing: .13em;
text-transform: uppercase;
}
/* Nome */
.splix-rebalance-class-name {
margin: 0 !important;
padding: 0 !important;
color: var(--splix-title);
font-size: 30px;
font-weight: 900;
line-height: 1.1;
}
/* Descrição */
.splix-rebalance-class-subtitle {
margin: 8px 0 0 !important;
padding: 0 !important;
color: var(--splix-muted);
font-size: 14px;
line-height: 1.5;
}
/* ==========================================================
CONTADORES
========================================================== */
.splix-rebalance-stats {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px;
margin: 14px 0 0 !important;
padding: 0 !important;
}
.splix-rebalance-count {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-height: 30px;
margin: 0 !important;
padding: 0 12px !important;
border: 1px solid var(--splix-border);
border-radius: 999px;
background: rgba(255,255,255,.88);
color: var(--splix-title);
font-size: 13px;
font-weight: 800;
line-height: 1;
}
/* Melhoria */
.splix-count-buff {
border-color: rgba(72,190,123,.28);
background: rgba(139,234,183,.18);
color: #21865a;
}
/* Redução */
.splix-count-nerf {
border-color: rgba(255,131,120,.28);
background: rgba(255,131,120,.14);
color: #bf5148;
}
/* Ajuste */
.splix-count-adjust {
border-color: rgba(75,188,255,.25);
background: rgba(75,188,255,.11);
color: var(--splix-blue-dark);
}
/* ==========================================================
LINK "TOPO"
========================================================== */
.splix-rebalance-top {
flex: 0 0 auto !important;
align-self: flex-start !important;
margin: 2px 0 0 auto !important;
padding: 0 !important;
white-space: nowrap;
font-size: 13px;
font-weight: 800;
}
.splix-rebalance-top a,
.splix-rebalance-top a:visited {
color: var(--splix-muted) !important;
text-decoration: none !important;
}
.splix-rebalance-top a:hover {
color: var(--splix-blue-strong) !important;
}
/* ==========================================================
MEDIAWIKI - CORREÇÃO DE MARGENS NO CABEÇALHO
========================================================== */
.splix-rebalance-class-head p,
.splix-rebalance-class-main p,
.splix-rebalance-stats p,
.splix-rebalance-class-sprite p {
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
GRID DE HABILIDADES - MASONRY
========================================================== */
.splix-rebalance-skill-grid {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr));
/*
* Linhas pequenas usadas pelo JS para calcular
* a altura individual de cada card.
*/
grid-auto-rows: 8px;
/*
* ESSENCIAL:
* permite preencher espaços vazios na coluna menor.
*/
grid-auto-flow: dense;
column-gap: 16px;
row-gap: 16px;
align-items: start;
width: 100%;
margin: 0 !important;
padding: 22px;
box-sizing: border-box;
}
/* ==========================================================
CARDS
========================================================== */
.splix-rebalance-skill-grid
> .splix-rebalance-skill {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
min-width: 0;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
/*
* Nada de margin inferior.
* O espaçamento é controlado pelo row-gap.
*/
margin: 0 !important;
box-sizing: border-box;
align-self: start;
}
/* Remove elementos vazios gerados pelo MediaWiki */
.splix-rebalance-skill-grid > p,
.splix-rebalance-skill-grid > br {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 950px) {
.splix-rebalance-skill-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
grid-auto-flow: row;
gap: 13px;
padding: 16px;
}
.splix-rebalance-skill-grid
> .splix-rebalance-skill {
grid-row-end: auto !important;
}
}
/* ==========================================================
CARDS
========================================================== */
.splix-rebalance-skill-grid
> .splix-rebalance-skill {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
min-width: 0;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
margin: 0 0 16px !important;
box-sizing: border-box;
align-self: start;
}
/* ==========================================================
LIMPEZA DO PARSER DO MEDIAWIKI
========================================================== */
.splix-rebalance-skill-grid > p,
.splix-rebalance-skill-grid > br {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
MOBILE / TABLET
========================================================== */
@media (max-width: 950px) {
.splix-rebalance-skill-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: 13px;
padding: 16px;
}
.splix-rebalance-skill-grid
> .splix-rebalance-skill {
grid-row-end: auto !important;
margin: 0 !important;
}
}
/* ==========================================================
CARD DE HABILIDADE
========================================================== */
.splix-rebalance-skill {
display: block !important;
min-width: 0;
width: 100%;
height: auto !important;
box-sizing: border-box;
align-self: start;
padding: 14px 16px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.98) 0%,
rgba(250,253,255,.98) 100%
);
border: 1px solid var(--splix-border);
border-radius: 16px;
box-shadow:
0 5px 18px rgba(56,136,184,.055);
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.splix-rebalance-skill:hover {
transform: translateY(-2px);
border-color:
rgba(75,188,255,.34);
box-shadow:
0 9px 24px rgba(56,136,184,.095);
}
/* ==========================================================
CABEÇALHO DA SKILL
========================================================== */
.splix-rebalance-skill-head {
display: flex;
align-items: center;
gap: 10px;
min-height: 30px;
padding: 0 0 8px;
margin: 0 0 8px;
border-bottom:
1px dashed rgba(44,103,143,.18);
}
/* ==========================================================
ÃCONE DA SKILL
========================================================== */
.splix-rebalance-skill-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0;
padding: 0;
}
.splix-rebalance-skill-icon img,
.splix-rebalance-skill-icon .mw-file-element {
display: block;
max-width: 28px !important;
max-height: 28px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
NOME DA SKILL
========================================================== */
.splix-rebalance-skill-name {
margin: 0;
padding: 0;
color: var(--splix-title);
font-size: 16px;
font-weight: 900;
line-height: 1.25;
}
/* ==========================================================
LINHAS DE ALTERAÇÃO
========================================================== */
.splix-rebalance-change {
display: grid;
grid-template-columns:
22px minmax(0, 1fr);
gap: 8px;
align-items: start;
margin: 5px 0 0 !important;
padding: 0 !important;
color: var(--splix-text);
font-size: 14px;
line-height: 1.4;
}
.splix-rebalance-change:first-of-type {
margin-top: 0 !important;
}
/* ==========================================================
MEDIAWIKI - REMOVE ESPAÇAMENTOS CRIADOS PELO PARSER
========================================================== */
.splix-rebalance-skill p,
.splix-rebalance-change p,
.splix-rebalance-change span p {
margin: 0 !important;
padding: 0 !important;
}
.splix-rebalance-change > span {
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
ÃCONE + / - / •
========================================================== */
.splix-change-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 21px;
height: 21px;
margin: 0;
padding: 0;
border-radius: 7px;
font-size: 12px;
font-weight: 900;
line-height: 1;
}
/* ==========================================================
MELHORIA
========================================================== */
.splix-change-buff .splix-change-icon {
background: rgba(139,234,183,.28);
color: #1b8c58;
}
.splix-change-buff strong {
color: #217f59;
}
/* ==========================================================
REDUÇÃO
========================================================== */
.splix-change-nerf .splix-change-icon {
background: rgba(255,131,120,.19);
color: #cb554b;
}
.splix-change-nerf strong {
color: #b94b44;
}
/* ==========================================================
AJUSTE
========================================================== */
.splix-change-adjust .splix-change-icon {
background: rgba(75,188,255,.16);
color: var(--splix-blue-dark);
}
.splix-change-adjust strong {
color: var(--splix-blue-dark);
}
/* ==========================================================
ÊNFASE DE VALORES
========================================================== */
.splix-rebalance-change strong {
font-weight: 800;
}
/* ==========================================================
ESPAÇAMENTO ENTRE CLASSES
========================================================== */
.splix-rebalance-class
+ .splix-rebalance-class {
margin-top: 32px;
}
/* ==========================================================
ÂNCORAS
========================================================== */
#topo,
.splix-rebalance-class {
scroll-margin-top: 110px;
}
/* ==========================================================
RESPONSIVO - TELAS MÉDIAS
========================================================== */
@media (max-width: 1250px) {
}
/* ==========================================================
RESPONSIVO - TABLETS
========================================================== */
@media (max-width: 950px) {
.splix-rebalance-class-head {
padding: 22px !important;
}
.splix-rebalance-skill-grid {
column-count: 1;
}
.splix-rebalance-class-sprite {
flex-basis: 90px !important;
width: 90px !important;
min-width: 90px !important;
min-height: 90px !important;
}
.splix-rebalance-class-sprite img,
.splix-rebalance-class-sprite .mw-file-element {
max-width: 90px !important;
max-height: 95px !important;
}
.splix-rebalance-class-name {
font-size: 27px;
}
}
/* ==========================================================
RESPONSIVO - MOBILE
========================================================== */
@media (max-width: 700px) {
/* Cabeçalho da classe */
.splix-rebalance-class-head {
display: grid !important;
grid-template-columns:
80px minmax(0, 1fr);
align-items: center !important;
gap: 16px;
padding: 20px 18px !important;
}
.splix-rebalance-class-sprite {
width: 80px !important;
min-width: 80px !important;
min-height: 80px !important;
}
.splix-rebalance-class-sprite img,
.splix-rebalance-class-sprite .mw-file-element {
max-width: 78px !important;
max-height: 90px !important;
}
.splix-rebalance-class-main {
min-width: 0;
}
.splix-rebalance-class-name {
font-size: 24px;
}
.splix-rebalance-class-subtitle {
font-size: 13px;
}
/* Topo */
.splix-rebalance-top {
grid-column: 1 / -1;
width: 100%;
margin:
2px 0 0 !important;
text-align: right;
}
/* Contadores */
.splix-rebalance-stats {
gap: 7px;
}
.splix-rebalance-count {
min-height: 28px;
padding:
0 10px !important;
font-size: 12px;
}
/* Skills */
.splix-rebalance-skill-grid {
grid-template-columns: 1fr;
padding: 16px;
gap: 13px;
}
.splix-rebalance-skill {
padding: 13px 14px;
}
.splix-rebalance-skill-name {
font-size: 15px;
}
.splix-rebalance-change {
grid-template-columns:
21px minmax(0, 1fr);
gap: 7px;
font-size: 13.5px;
line-height: 1.4;
}
.splix-change-icon {
width: 20px;
height: 20px;
}
}
/* ==========================================================
RESPONSIVO - MOBILE PEQUENO
========================================================== */
@media (max-width: 460px) {
/* Cabeçalho */
.splix-rebalance-class-head {
grid-template-columns: 1fr;
align-items: start !important;
}
.splix-rebalance-class-sprite {
width: 82px !important;
min-width: 82px !important;
min-height: 82px !important;
}
.splix-rebalance-class-name {
font-size: 23px;
}
.splix-rebalance-top {
text-align: left;
}
}
/* ==========================================================
CORREÇÃO - PRIMEIRA SKILL SEMPRE NA RAIA 1
========================================================== */
/* Remove elementos vazios criados pelo parser do MediaWiki
dentro do grid de habilidades */
.splix-rebalance-skill-grid > p,
.splix-rebalance-skill-grid > br {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Garante que o primeiro card comece na primeira coluna */
.splix-rebalance-skill-grid
> .splix-rebalance-skill:first-of-type {
grid-column: 1 !important;
}
/* Mantém os demais cards no fluxo normal do grid */
.splix-rebalance-skill-grid
> .splix-rebalance-skill {
grid-column: auto;
}
.splix-rebalance-skill-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
padding: 22px;
align-items: start;
margin: 0 !important;
}
.splix-rebalance-skill-grid
> .splix-rebalance-skill {
margin: 0 !important;
}
/* ==========================================================
FIX DEFINITIVO - TEXTO DAS ALTERAÇÕES
========================================================== */
.splix-rebalance-skill .splix-rebalance-change {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 5px 0 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* + / − / • */
.splix-rebalance-skill
.splix-rebalance-change
.splix-change-icon {
flex: 0 0 21px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 21px !important;
min-width: 21px !important;
max-width: 21px !important;
height: 21px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* TEXTO */
.splix-rebalance-skill
.splix-rebalance-change
> span:not(.splix-change-icon) {
flex: 1 1 0 !important;
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
text-align: left !important;
}
/* Caso o MediaWiki injete <p> */
.splix-rebalance-skill
.splix-rebalance-change
> span:not(.splix-change-icon) p {
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* Primeiro item não precisa de margem superior */
.splix-rebalance-skill
.splix-rebalance-change:first-of-type {
margin-top: 0 !important;
}
/* ==========================================================
FIX MEDIAWIKI - ÃCONE E TEXTO NA MESMA LINHA
========================================================== */
.splix-rebalance-skill .splix-rebalance-change {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
margin: 8px 0 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/*
* O MediaWiki pode criar <p> em volta dos spans.
* display:contents elimina a caixa do <p> sem remover
* seu conteúdo.
*/
.splix-rebalance-skill
.splix-rebalance-change > p {
display: contents !important;
}
/* ==========================================================
+ / − / •
========================================================== */
.splix-rebalance-skill
.splix-rebalance-change
.splix-change-icon {
flex: 0 0 21px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 21px !important;
min-width: 21px !important;
max-width: 21px !important;
height: 21px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
line-height: 21px !important;
}
/* ==========================================================
TEXTO
========================================================== */
.splix-rebalance-skill
.splix-rebalance-change
span:not(.splix-change-icon) {
flex: 1 1 auto !important;
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
text-align: left !important;
line-height: 1.45 !important;
}
/* ==========================================================
LIMPEZA DOS PARÃGRAFOS GERADOS PELO MEDIAWIKI
========================================================== */
.splix-rebalance-skill
.splix-rebalance-change p {
margin: 0 !important;
padding: 0 !important;
}
/* Primeiro ajuste de cada card */
.splix-rebalance-skill
.splix-rebalance-change:first-of-type {
margin-top: 0 !important;
}
/* ==========================================================
FIX MEDIAWIKI - GRID DA NAVEGAÇÃO DE CLASSES
========================================================== */
/*
* Remove a caixa intermediária criada pelo parser do MediaWiki.
* Assim os .splix-class-nav-card voltam a ser filhos visuais
* diretos do grid.
*/
.splix-home .splix-class-nav > p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* Remove <br> soltos que possam virar itens do grid.
*/
.splix-home .splix-class-nav > br {
display: none !important;
}
/*
* Garante que cada card ocupe exatamente UMA coluna.
*/
.splix-home .splix-class-nav .splix-class-nav-card {
grid-column: auto !important;
grid-row: auto !important;
}
/* ==========================================================
CARD INTEIRO CLICÁVEL - NAVEGAÇÃO DE CLASSES
========================================================== */
.splix-class-nav-card[data-anchor] {
cursor: pointer !important;
}
/* ==========================================================
SPLIX - MOLDURA DE IMAGEM AJUSTADA
========================================================== */
.splix-image-frame {
position: relative;
display: table;
width: auto;
max-width: 100%;
margin: 22px auto;
padding: 10px;
box-sizing: border-box;
border-radius: 22px;
background:
linear-gradient(
180deg,
#79f0d4 0%,
#39d7df 48%,
#54e5b4 100%
);
border: 2px solid #11a9c8;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.40),
inset 0 -3px 0 rgba(0,0,0,.07),
0 8px 20px rgba(44,103,143,.10);
overflow: hidden;
}
/* brilho interno */
.splix-image-frame::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 17px;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(255,255,255,.34) 0%,
rgba(255,255,255,.13) 20%,
rgba(255,255,255,0) 38%
);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.25);
}
/* bolhinhas */
.splix-image-frame::after {
content: "";
position: absolute;
right: 16px;
top: 10px;
width: 62px;
height: 20px;
border-radius: 999px;
pointer-events: none;
background:
radial-gradient(circle at 14px 10px, rgba(255,255,255,.80) 0 7px, rgba(255,255,255,0) 8px),
radial-gradient(circle at 36px 9px, rgba(189,255,133,.90) 0 8px, rgba(189,255,133,0) 9px),
radial-gradient(circle at 51px 8px, rgba(255,255,255,.70) 0 6px, rgba(255,255,255,0) 7px);
opacity: .92;
}
/* área da imagem */
.splix-image-frame-inner {
position: relative;
z-index: 2;
display: block;
width: auto;
max-width: 100%;
min-height: 0;
box-sizing: border-box;
border-radius: 16px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.18) 0%,
rgba(255,255,255,.06) 100%
);
box-shadow:
inset 0 0 0 2px rgba(10,142,166,.34),
inset 0 5px 10px rgba(255,255,255,.12),
inset 0 -4px 8px rgba(0,0,0,.035);
}
/* remove wrappers chatos do MediaWiki */
.splix-image-frame-inner .mw-file-description,
.splix-image-frame-inner .thumbinner,
.splix-image-frame-inner .thumb,
.splix-image-frame-inner .tright,
.splix-image-frame-inner .tleft {
display: block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* imagem */
.splix-image-frame-inner img,
.splix-image-frame-inner .mw-file-element {
display: block;
width: auto !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
border-radius: 11px;
}
/* legenda */
.splix-image-caption {
position: relative;
z-index: 2;
margin-top: 8px;
text-align: center;
font-size: 14px;
line-height: 1.45;
color: #1d5f88;
font-weight: 600;
}
/* ==========================================================
VARIAÇÕES
========================================================== */
/* quadrada */
.splix-image-frame-square {
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.splix-image-frame-square .splix-image-frame-inner {
min-height: 300px;
}
/* horizontal / banner */
.splix-image-frame-banner {
max-width: 100%;
}
.splix-image-frame-banner .splix-image-frame-inner {
min-height: 180px;
}
/* pequena */
.splix-image-frame-small {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.splix-image-frame-small .splix-image-frame-inner {
min-height: 180px;
}
/* ==========================================================
RESPONSIVO
========================================================== */
@media (max-width: 700px) {
.splix-image-frame {
padding: 14px;
border-radius: 22px;
}
.splix-image-frame::before {
inset: 8px;
border-radius: 18px;
}
.splix-image-frame-inner {
min-height: 180px;
padding: 12px;
border-radius: 18px;
}
.splix-image-frame-square .splix-image-frame-inner {
min-height: 220px;
}
}
/* ==========================================================
SPLIX CARD - VARIAÇÃO COM IMAGEM
========================================================== */
.splix-card.splix-card-image {
padding: 0 !important;
overflow: hidden;
}
/* ==========================================================
FAIXA VISUAL SUPERIOR
========================================================== */
.splix-card-image-top {
position: relative;
min-height: 195px;
padding: 22px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
background:
var(--splix-blue-gradient) !important;
overflow: hidden;
}
/* ==========================================================
CONTEÚDO DE TEXTO
sempre acima da imagem e do gradiente
========================================================== */
.splix-card-image-content {
position: relative;
z-index: 5;
max-width: 55%;
pointer-events: auto;
}
/* ==========================================================
IMAGEM DECORATIVA
========================================================== */
.splix-card-image-visual {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 60%;
z-index: 1;
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
pointer-events: none;
}
/* ==========================================================
OVERLAY DO TOPO INTEIRO
azul desde o início do card até sobre a imagem
========================================================== */
.splix-card-image-top::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(197, 241, 255, 1) 0%,
rgba(197, 241, 255, .98) 25%,
rgba(197, 241, 255, .92) 38%,
rgba(197, 241, 255, .72) 48%,
rgba(197, 241, 255, .42) 56%,
rgba(197, 241, 255, .16) 63%,
rgba(197, 241, 255, 0) 70%
);
}
/* ==========================================================
WRAPPER DO MEDIAWIKI
========================================================== */
.splix-card-image-visual .mw-file-description {
position: relative;
z-index: 1;
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
/* ==========================================================
IMAGEM
========================================================== */
.splix-card-image-visual img,
.splix-card-image-visual .mw-file-element {
position: relative;
z-index: 1;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: contain !important;
object-position: right center !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
CORPO INFERIOR
========================================================== */
.splix-card-image-body {
padding: 22px 24px 24px;
}
/* ==========================================================
NÚMERO
========================================================== */
.splix-card-image-top .splix-card-icon {
position: relative;
z-index: 6;
margin-bottom: 14px;
}
/* ==========================================================
TÍTULO
========================================================== */
.splix-card-image-top .splix-card-title {
position: relative;
z-index: 6;
margin-bottom: 0;
font-size: 27px;
line-height: 1.15;
max-width: 220px;
}
/* ==========================================================
TEXTO
========================================================== */
.splix-card-image-body .splix-card-text {
margin-bottom: 0;
}
/* ==========================================================
RESPONSIVO
========================================================== */
@media (max-width: 700px) {
.splix-card-image-top {
min-height: 175px;
padding: 18px;
}
.splix-card-image-content {
max-width: 58%;
z-index: 5;
}
.splix-card-image-visual {
width: 100%;
z-index: 1;
}
.splix-card-image-visual::before {
background:
linear-gradient(
90deg,
rgba(197, 241, 255, .98) 0%,
rgba(197, 241, 255, .92) 20%,
rgba(197, 241, 255, .70) 38%,
rgba(197, 241, 255, .35) 55%,
rgba(197, 241, 255, 0) 78%
);
}
.splix-card-image-top .splix-card-title {
font-size: 23px;
}
.splix-card-image-body {
padding: 18px;
}
}
/* ==========================================================
TÍTULO DE CARD COM ÍCONE
========================================================== */
.splix-card-title-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.splix-card-title-icon {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.splix-card-title-icon .mw-file-description,
.splix-card-title-icon a {
display: block !important;
line-height: 0 !important;
}
.splix-card-title-icon img,
.splix-card-title-icon .mw-file-element {
display: block !important;
width: 34px !important;
height: 34px !important;
max-width: 34px !important;
max-height: 34px !important;
object-fit: contain;
margin: 0 !important;
}
.splix-card-title-row .splix-card-title {
margin-bottom: 0 !important;
}
/* ==========================================================
SPLIX - MOLDURA DE TABELA
========================================================== */
.splix-table-frame {
position: relative;
width: 100%;
margin-top: 18px;
padding: 8px;
box-sizing: border-box;
border-radius: 20px;
background:
linear-gradient(
135deg,
rgba(238, 250, 255, .98) 0%,
rgba(248, 253, 255, .98) 100%
);
border: 2px solid #11a9c8;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.42),
inset 0 -3px 0 rgba(0,0,0,.05),
0 8px 20px rgba(44,103,143,.08);
overflow: hidden;
}
/* brilho interno */
.splix-table-frame::before {
content: "";
position: absolute;
inset: 5px;
border-radius: 15px;
pointer-events: none;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.28);
}
/* ==========================================================
TABELA INTERNA
========================================================== */
.splix-table-frame table.wikitable {
position: relative;
z-index: 2;
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: 14px !important;
overflow: hidden;
background: #ffffff !important;
box-shadow: none !important;
}
/* ==========================================================
CABEÇALHO
========================================================== */
.splix-table-frame table.wikitable th {
padding: 13px 15px !important;
var(--splix-blue-gradient) !important;
color: #25547d !important;
font-weight: 800 !important;
border: 0 !important;
border-right: 1px solid rgba(255,255,255,.45) !important;
text-align: left;
}
.splix-table-frame table.wikitable th:last-child {
border-right: 0 !important;
}
/* ==========================================================
CÉLULAS
========================================================== */
.splix-table-frame table.wikitable td {
padding: 12px 15px !important;
border: 0 !important;
border-bottom: 1px solid #dcecf5 !important;
border-right: 1px solid #edf6fa !important;
color: var(--splix-text);
vertical-align: middle;
}
.splix-table-frame table.wikitable td:last-child {
border-right: 0 !important;
}
.splix-table-frame table.wikitable tr:last-child td {
border-bottom: 0 !important;
}
/* linhas alternadas */
.splix-table-frame table.wikitable tr:nth-child(even) td {
background: #f8fcff !important;
}
.splix-table-frame table.wikitable tr:nth-child(odd) td {
background: #ffffff !important;
}
/* hover */
.splix-table-frame table.wikitable tr:hover td {
background: #eefaff !important;
}
/* ==========================================================
RESPONSIVO
========================================================== */
@media (max-width: 700px) {
.splix-table-frame {
padding: 6px;
border-radius: 16px;
}
.splix-table-frame table.wikitable {
border-radius: 11px !important;
}
.splix-table-frame table.wikitable th,
.splix-table-frame table.wikitable td {
padding: 10px 11px !important;
font-size: 13px;
}
}
/* ==========================================================
RARIDADE - BAÚ SEMANAL VIP
========================================================== */
.splix-rarity-common .splix-section-kicker {
color: #6f8396;
}
.splix-rarity-uncommon .splix-section-kicker {
color: #33ad7c;
}
.splix-rarity-rare .splix-section-kicker {
color: #8b76eb;
}
/* ==========================================================
RARIDADES - CORES DOS TÍTULOS
========================================================== */
.splix-rarity-common .splix-section-kicker {
color: #6f8396;
}
.splix-rarity-uncommon .splix-section-kicker {
color: #33ad7c;
}
.splix-rarity-rare .splix-section-kicker {
color: #8b76eb;
}
/* ==========================================================
TABELAS POR RARIDADE
========================================================== */
/* ---------- COMUM ---------- */
.splix-table-frame.splix-table-common {
background:
linear-gradient(
135deg,
rgba(210, 231, 245, .82) 0%,
rgba(230, 241, 248, .86) 100%
);
border-color: #8fb8d1;
}
.splix-table-frame.splix-table-common table.wikitable th {
background:
linear-gradient(
135deg,
#b8d3e3 0%,
#d5e5ef 100%
) !important;
color: #466277 !important;
}
/* ---------- INCOMUM ---------- */
.splix-table-frame.splix-table-uncommon {
background:
linear-gradient(
135deg,
rgba(178, 241, 210, .82) 0%,
rgba(215, 249, 230, .88) 100%
);
border-color: #49b98b;
}
.splix-table-frame.splix-table-uncommon table.wikitable th {
background:
linear-gradient(
135deg,
#73ddb0 0%,
#b8f0d4 100%
) !important;
color: #216447 !important;
}
/* ---------- RARO ---------- */
.splix-table-frame.splix-table-rare {
background:
linear-gradient(
135deg,
rgba(211, 196, 255, .82) 0%,
rgba(235, 227, 255, .88) 100%
);
border-color: #9b7cf0;
}
.splix-table-frame.splix-table-rare table.wikitable th {
background:
linear-gradient(
135deg,
rgba(211, 196, 255, .82) 0%,
rgba(235, 227, 255, .88) 100%
);
color: #51388d !important;
}
/* ==========================================================
TABELA - RESUMO VIP
========================================================== */
.splix-vip-summary-table th:nth-child(2),
.splix-vip-summary-table th:nth-child(3),
.splix-vip-summary-table td:nth-child(2),
.splix-vip-summary-table td:nth-child(3) {
text-align: center;
}
.splix-vip-summary-table th:first-child,
.splix-vip-summary-table td:first-child {
width: 50%;
}
.splix-vip-summary-table th:nth-child(2),
.splix-vip-summary-table th:nth-child(3) {
width: 25%;
}
/* ==========================================================
SELOS - ESTRUTURA EM BLOCOS
========================================================== */
.splix-seal-content {
box-sizing: border-box;
width: 100%;
padding-left: 28px;
padding-right: 28px;
padding-bottom: 30px;
}
.splix-seal-block {
margin-top: 26px;
}
.splix-seal-section-title {
margin: 0 0 14px;
font-size: 13px;
line-height: 1;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #6b89a8;
}
/* ==========================================================
GRID DAS PROVAÇÕES / SKILLS
========================================================== */
.splix-seal-grid-3 {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
.splix-seal-start {
max-width: 100%;
}
/* ==========================================================
PROTEÇÃO CONTRA <p> DO MEDIAWIKI
========================================================== */
.splix-seal-grid-3 > p,
.splix-seal-content > p,
.splix-seal-block > p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
CARD BASE DOS SELOS
========================================================== */
.splix-seal-block .splix-rebalance-skill {
border-radius: 18px;
}
/* cabeçalho interno dos cards */
.splix-seal-block .splix-rebalance-skill-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom:
1px dashed rgba(120, 155, 190, .28);
}
/* nome */
.splix-seal-block .splix-rebalance-skill-name {
margin: 0;
line-height: 1.2;
}
/* espaçamento entre informações */
.splix-seal-block .splix-rebalance-change {
margin-top: 10px;
}
/* ==========================================================
ÍCONE AO LADO DO NOME DA SKILL
========================================================== */
.splix-seal-skill-icon {
box-sizing: border-box;
display: flex;
flex:
0 0 28px;
align-items:
center;
justify-content:
center;
width:
28px;
min-width:
28px;
height:
28px;
line-height:
0;
}
.splix-seal-skill-icon .mw-file-description {
display:
block !important;
width:
28px !important;
height:
28px !important;
margin:
0 !important;
padding:
0 !important;
line-height:
0 !important;
}
.splix-seal-skill-icon img,
.splix-seal-skill-icon .mw-file-element {
display:
block !important;
width:
28px !important;
height:
28px !important;
max-width:
28px !important;
max-height:
28px !important;
margin:
0 !important;
padding:
0 !important;
object-fit:
contain;
}
/* ==========================================================
AURA ROXA NAS HABILIDADES DESPERTADAS
========================================================== */
.splix-seal-skill-awakened {
position:
relative;
border:
1px solid rgba(207, 192, 255, .78) !important;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, .98) 0%,
rgba(250, 246, 255, .96) 100%
) !important;
box-shadow:
0 0 0 1px rgba(208, 182, 255, .10),
0 8px 20px rgba(176, 130, 255, .10),
0 0 18px rgba(187, 146, 255, .14);
}
.splix-seal-skill-awakened::before {
content:
"";
position:
absolute;
inset:
-1px;
border-radius:
18px;
pointer-events:
none;
background:
linear-gradient(
135deg,
rgba(218, 193, 255, .18) 0%,
rgba(196, 168, 255, .10) 42%,
rgba(255, 255, 255, 0) 100%
);
opacity:
.95;
}
.splix-seal-skill-awakened > * {
position:
relative;
z-index:
1;
}
.splix-seal-skill-awakened
.splix-rebalance-skill-name {
color:
#6e4bc2;
}
/* ==========================================================
RESPONSIVO
========================================================== */
@media (max-width: 980px) {
.splix-seal-grid-3 {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.splix-seal-content {
padding-left:
16px;
padding-right:
16px;
padding-bottom:
22px;
}
}
@media (max-width: 640px) {
.splix-seal-grid-3 {
grid-template-columns:
1fr;
}
}
/* ==========================================================
SELOS - CORREÇÃO DOS <p> AUTOMÁTICOS DO MEDIAWIKI
========================================================== */
.splix-seal-class > p {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
min-height: 0 !important;
line-height: 0 !important;
}
.splix-seal-content > p,
.splix-seal-block > p,
.splix-seal-grid-3 > p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
CHEFFENIA - GRID DE MVPS
========================================================== */
.splix-mvp-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
/* ==========================================================
CARD DO MVP
========================================================== */
.splix-mvp-card {
position: relative;
min-width: 0;
padding: 16px 12px 14px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #d7eaf4;
border-radius: 18px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.98) 0%,
rgba(249,253,255,.98) 100%
);
box-shadow:
0 8px 18px rgba(54,112,150,.07);
text-align: center;
}
/* imagem */
.splix-mvp-image {
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
line-height: 0;
}
.splix-mvp-image .mw-file-description {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
.splix-mvp-image img,
.splix-mvp-image .mw-file-element {
display: block !important;
width: 96px !important;
height: 96px !important;
max-width: 96px !important;
max-height: 96px !important;
object-fit: contain;
margin: 0 !important;
}
/* nome */
.splix-mvp-name {
font-size: 14px;
line-height: 1.25;
font-weight: 800;
color: var(--splix-title);
}
/* ==========================================================
TIER FÁCIL
========================================================== */
.splix-mvp-card.splix-mvp-easy {
border-color: rgba(108, 207, 159, .55);
background:
linear-gradient(
180deg,
rgba(250,255,252,.98) 0%,
rgba(239,252,245,.98) 100%
);
box-shadow:
0 8px 18px rgba(72,170,119,.08);
}
/* ==========================================================
TIER MÉDIO
========================================================== */
.splix-mvp-card.splix-mvp-medium {
border-color: rgba(127, 202, 238, .58);
background:
linear-gradient(
180deg,
rgba(252,254,255,.98) 0%,
rgba(239,249,255,.98) 100%
);
box-shadow:
0 8px 18px rgba(83,167,211,.08);
}
/* ==========================================================
TIER DIFÍCIL
========================================================== */
.splix-mvp-card.splix-mvp-hard {
border-color: rgba(194, 168, 255, .62);
background:
linear-gradient(
180deg,
rgba(255,253,255,.98) 0%,
rgba(248,243,255,.98) 100%
);
box-shadow:
0 8px 20px rgba(157,111,225,.10),
0 0 16px rgba(186,145,255,.08);
}
/* ==========================================================
CHEFFENIA ECLIPSE
========================================================== */
.splix-eclipse-card {
border-color:
rgba(184, 151, 255, .58) !important;
background:
linear-gradient(
135deg,
rgba(248,243,255,.96) 0%,
rgba(255,250,255,.98) 100%
) !important;
box-shadow:
0 10px 28px rgba(142,102,211,.10),
0 0 20px rgba(190,151,255,.08);
}
/* ==========================================================
PROTEÇÃO CONTRA <p> DO MEDIAWIKI
========================================================== */
.splix-mvp-grid > p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
RESPONSIVO
========================================================== */
@media (max-width: 1100px) {
.splix-mvp-grid {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.splix-mvp-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.splix-mvp-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================
PETS - GRID
========================================================== */
.splix-pet-grid {
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
gap: 18px;
margin-top: 18px;
}
/* ==========================================================
PET - CARD
========================================================== */
.splix-pet-card {
position: relative;
min-width: 0;
padding: 18px 14px 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
border:
1px solid rgba(116, 210, 185, .55);
border-radius:
20px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.98) 0%,
rgba(245,253,250,.98) 100%
);
box-shadow:
0 8px 20px rgba(68,150,126,.07);
text-align: center;
}
/* ==========================================================
PET - IMAGEM
========================================================== */
.splix-pet-image {
width: 110px;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
line-height: 0;
}
.splix-pet-image .mw-file-description {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
.splix-pet-image img,
.splix-pet-image .mw-file-element {
display: block !important;
width: 110px !important;
height: 110px !important;
max-width: 110px !important;
max-height: 110px !important;
object-fit: contain;
margin: 0 !important;
}
/* ==========================================================
PET - NOME
========================================================== */
.splix-pet-name {
margin-bottom: 10px;
font-size: 16px;
line-height: 1.2;
font-weight: 800;
color:
var(--splix-title);
}
/* ==========================================================
PET - TAGS
========================================================== */
.splix-pet-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.splix-pet-tag {
padding: 5px 9px;
border-radius: 999px;
background:
rgba(218, 249, 236, .88);
border:
1px solid rgba(110, 212, 169, .45);
color:
#287656;
font-size: 11px;
font-weight: 700;
}
/* ==========================================================
MEDIAWIKI
========================================================== */
.splix-pet-grid > p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
RESPONSIVO
========================================================== */
@media (max-width: 1100px) {
.splix-pet-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.splix-pet-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.splix-pet-grid {
grid-template-columns:
1fr;
}
}
/* ==========================================================
ROLETA - GRID FIXO DE 9 POSIÇÕES
========================================================== */
.splix-roulette-slots {
display: grid;
grid-template-columns:
repeat(9, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
justify-content: end;
}
/* ==========================================================
BOX DAS POSIÇÕES
========================================================== */
.splix-roulette-slot {
box-sizing: border-box;
min-height: 72px;
padding: 12px 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #d5e9f4;
border-radius: 14px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.98) 0%,
rgba(248,252,255,.98) 100%
);
text-align: center;
}
/* posição inexistente */
.splix-roulette-slot-empty {
visibility: hidden;
}
/* posição obrigatória */
.splix-roulette-slot.splix-roulette-slot-mandatory {
border-color:
rgba(191,160,255,.72);
background:
linear-gradient(
135deg,
rgba(239,228,255,.94) 0%,
rgba(250,246,255,.98) 100%
);
box-shadow:
0 0 16px rgba(176,126,255,.12);
}
/* textos */
.splix-roulette-slot-chance {
font-size: 13px;
font-weight: 800;
color:
var(--splix-title);
}
.splix-roulette-slot-weight {
margin-top: 4px;
font-size: 10px;
color:
var(--splix-muted);
}
.splix-roulette-slot-mandatory
.splix-roulette-slot-chance {
color:
#6849b7;
}
/* MediaWiki */
.splix-roulette-slots > p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
/* responsivo */
@media (max-width: 900px) {
.splix-roulette-slots {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.splix-roulette-slot-empty {
display: none;
}
}
@media (max-width: 520px) {
.splix-roulette-slots {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}