Mudanças entre as edições de "MediaWiki:Common.css"
Ir para navegação
Ir para pesquisar
m Etiquetas: Reversão manual Revertido |
m Etiqueta: Revertido |
||
| Linha 1: | Linha 1: | ||
/* ========================================================================== | |||
1. ROOT VARIABLES | |||
========================================================================== */ | |||
:root { | |||
/* Cores principais */ | |||
--mw-bg-primary: #ffffff; | |||
--mw-bg-secondary: #f8f9fa; | |||
--mw-bg-tertiary: #eaecf0; | |||
--mw-bg-accent: #eef3ff; | |||
/* | /* Texto */ | ||
--mw-text-primary: #202122; | |||
--mw-text-secondary: #54595d; | |||
text- | --mw-text-muted: #72777d; | ||
--mw-text-inverse: #ffffff; | |||
/* | /* Links */ | ||
--mw-link: #3366cc; | |||
--mw-link-hover: #1a4d99; | |||
--mw-link-visited: #6b4ba1; | |||
--mw-link-new: #ba0000; | |||
--mw-link-new-hover: #8a0000; | |||
/* Bordas */ | |||
--mw-border-light: #e0e3e7; | |||
--mw-border-medium: #c8ccd1; | |||
--mw-border-dark: #a2a9b1; | |||
/* Acentos e estados */ | |||
--mw-accent-primary: #3366cc; | |||
--mw-accent-success: #14866d; | |||
--mw-accent-warning: #edab00; | |||
--mw-accent-danger: #d73333; | |||
. | /* Sombras */ | ||
--mw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); | |||
--mw-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); | |||
--mw-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12); | |||
/* Radius */ | |||
--mw-radius-sm: 3px; | |||
--mw-radius-md: 6px; | |||
--mw-radius-lg: 10px; | |||
/* Espaçamento */ | |||
--mw-space-xs: 4px; | |||
--mw-space-sm: 8px; | |||
--mw-space-md: 16px; | |||
--mw-space-lg: 24px; | |||
--mw-space-xl: 32px; | |||
/* | /* Tipografia */ | ||
--mw-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |||
--mw-font-mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace; | |||
--mw-font-size-base: 15px; | |||
--mw-line-height: 1.65; | |||
/* Transições */ | |||
--mw-transition-fast: 0.15s ease; | |||
--mw-transition-normal: 0.25s ease; | |||
} | } | ||
/* === | /* ========================================================================== | ||
. | 2. BASE & RESET | ||
========================================================================== */ | |||
body { | |||
font-family: var(--mw-font-sans); | |||
font-size: var(--mw-font-size-base); | |||
line-height: var(--mw-line-height); | |||
color: var(--mw-text-primary); | |||
background-color: var(--mw-bg-secondary); | |||
-webkit-font-smoothing: antialiased; | |||
-moz-osx-font-smoothing: grayscale; | |||
} | } | ||
. | /* ========================================================================== | ||
3. TYPOGRAPHY | |||
========================================================================== */ | |||
. | /* Títulos */ | ||
#firstHeading, | |||
height: | .firstHeading { | ||
font-size: 2rem; | |||
font-weight: 600; | |||
padding: | line-height: 1.3; | ||
color: var(--mw-text-primary); | |||
border-bottom: 2px solid var(--mw-border-light); | |||
padding-bottom: var(--mw-space-sm); | |||
margin-bottom: var(--mw-space-lg); | |||
} | } | ||
.mw-parser-output h2 { | |||
font-size: 1.5rem; | |||
font-weight: 600; | |||
padding: | color: var(--mw-text-primary); | ||
border-bottom: 1px solid var(--mw-border-light); | |||
padding-bottom: var(--mw-space-xs); | |||
margin-top: var(--mw-space-xl); | |||
margin-bottom: var(--mw-space-md); | |||
} | } | ||
.mw-parser-output h3 { | |||
font-size: 1.25rem; | |||
font-size: | font-weight: 600; | ||
color: var(--mw-text-primary); | |||
margin-top: var(--mw-space-lg); | |||
margin-bottom: var(--mw-space-sm); | |||
} | } | ||
.mw-parser-output h4 { | |||
font-size: 1.1rem; | |||
font-weight: 600; | |||
color: var(--mw-text-secondary); | |||
margin-top: var(--mw-space-md); | |||
margin-bottom: var(--mw-space-xs); | |||
} | } | ||
.mw-parser-output h5, | |||
.mw-parser-output h6 { | |||
font-weight: | font-size: 1rem; | ||
font-weight: 600; | |||
color: var(--mw-text-secondary); | |||
margin-top: var(--mw-space-md); | |||
margin-bottom: var(--mw-space-xs); | |||
} | } | ||
/* Parágrafos */ | |||
.mw-parser-output p { | |||
margin-bottom: var(--mw-space-md); | |||
} | } | ||
/* Listas */ | |||
.mw-parser-output ul, | |||
.mw-parser-output ol { | |||
margin: var(--mw-space-sm) 0 var(--mw-space-md) var(--mw-space-lg); | |||
} | } | ||
.mw-parser-output li { | |||
margin-bottom: var(--mw-space-xs); | |||
} | } | ||
/* | /* ========================================================================== | ||
4. LINKS | |||
========================================================================== */ | |||
a { | a { | ||
color: var(--link- | color: var(--mw-link); | ||
text-decoration: none; | |||
transition: color var(--mw-transition-fast); | |||
} | } | ||
a:hover { | |||
color: var(--mw-link-hover); | |||
text-decoration: underline; | |||
} | } | ||
a:visited { | |||
color: var(--mw-link-visited); | |||
} | } | ||
/* | /* Links novos (páginas inexistentes) */ | ||
a.new { | |||
color: var(--mw-link-new); | |||
} | } | ||
a.new:hover { | |||
color: var(--mw-link-new-hover); | |||
} | } | ||
/* Links externos */ | |||
.mw-parser-output a.external { | |||
color: var(--mw-link); | |||
} | } | ||
.mw-parser-output a.external:after { | |||
opacity: 0.6; | |||
} | } | ||
/* ========================================================================== | |||
5. LAYOUT — CONTENT AREA | |||
========================================================================== */ | |||
/* Área principal de conteúdo */ | |||
#content, | |||
.mw-body { | .mw-body { | ||
background: var(--mw-bg-primary); | |||
border: | border: 1px solid var(--mw-border-light); | ||
border- | border-radius: var(--mw-radius-md); | ||
box-shadow: var(--mw-shadow-sm); | |||
padding: var(--mw-space-lg); | |||
margin-top: var(--mw-space-md); | |||
} | } | ||
#bodyContent { | |||
line-height: var(--mw-line-height); | |||
- | |||
} | } | ||
/* | /* Subtítulo */ | ||
#siteSub { | |||
color: var(--mw-text-muted); | |||
font-size: 0.85rem; | |||
margin-bottom: var(--mw-space-md); | |||
} | } | ||
/* Categorias */ | |||
/* | #catlinks { | ||
background: var(--mw-bg-secondary); | |||
border: 1px solid var(--mw-border-light); | |||
border-radius: var(--mw-radius-sm); | |||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
margin-top: var(--mw-space-lg); | |||
font-size: 0.9rem; | |||
} | } | ||
/* | /* ========================================================================== | ||
6. SIDEBAR (Painel Lateral) | |||
========================================================================== */ | |||
#mw-panel { | |||
- | padding-top: var(--mw-space-md); | ||
} | } | ||
/* Logo */ | |||
- | #p-logo { | ||
margin-bottom: var(--mw-space-md); | |||
} | } | ||
/* | /* Portlets / Menus laterais */ | ||
.mw-portlet, | |||
.portal { | |||
margin-bottom: var(--mw-space-md); | |||
} | } | ||
.mw-portlet .vector-menu-heading, | |||
.portal h3 { | |||
font-size: 0.8rem; | |||
font-weight: 600; | |||
text-transform: uppercase; | |||
letter-spacing: 0.05em; | |||
color: var(--mw-text-muted); | |||
padding: var(--mw-space-xs) var(--mw-space-md); | |||
margin-bottom: var(--mw-space-xs); | |||
} | } | ||
.mw-portlet .vector-menu-content-list, | |||
.portal .body ul { | |||
padding: 0; | |||
margin: 0; | |||
. | |||
margin | |||
} | } | ||
. | .mw-portlet .vector-menu-content-list li, | ||
.portal .body li { | |||
padding: var(--mw-space-xs) var(--mw-space-md); | |||
margin: 0; | |||
. | font-size: 0.9rem; | ||
margin | |||
. | |||
} | } | ||
. | .mw-portlet .vector-menu-content-list li a, | ||
.portal .body li a { | |||
color: var(--mw-text-secondary); | |||
display: block; | display: block; | ||
padding: 2px 0; | |||
border-radius: var(--mw-radius-sm); | |||
transition: | |||
color var(--mw-transition-fast), | |||
background-color var(--mw-transition-fast); | |||
} | } | ||
. | .mw-portlet .vector-menu-content-list li a:hover, | ||
.portal .body li a:hover { | |||
color: var(--mw-link); | |||
text-decoration: none; | |||
} | } | ||
. | /* ========================================================================== | ||
7. HEADER & NAVIGATION TABS | |||
========================================================================== */ | |||
. | /* Tabs de namespaces e views */ | ||
.vector-menu-tabs .vector-menu-content-list li { | |||
margin: 0; | |||
} | } | ||
. | .vector-menu-tabs .vector-menu-content-list li a { | ||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
border-radius: var(--mw-radius-sm) var(--mw-radius-sm) 0 0; | |||
font-size: 0.9rem; | |||
color: var(--mw-text-secondary); | |||
transition: | |||
background-color var(--mw-transition-fast), | |||
color var(--mw-transition-fast); | |||
} | } | ||
. | .vector-menu-tabs .vector-menu-content-list li a:hover { | ||
background-color: var(--mw-bg-secondary); | |||
color: var(--mw-text-primary); | |||
text-decoration: none; | |||
} | } | ||
. | .vector-menu-tabs .vector-menu-content-list li.selected a { | ||
background: var(--mw-bg-primary); | |||
color: var(--mw-text-primary); | |||
font-weight: 500; | |||
} | } | ||
/* Menu pessoal (usuário) */ | |||
#p-personal .vector-menu-content-list { | |||
# | |||
. | |||
display: flex; | display: flex; | ||
gap: var(--mw-space-xs); | |||
flex-wrap: wrap; | flex-wrap: wrap; | ||
} | } | ||
. | #p-personal .vector-menu-content-list li a { | ||
padding: var(--mw-space-xs) var(--mw-space-sm); | |||
font-size: 0.85rem; | |||
color: var(--mw-text-secondary); | |||
border-radius: var(--mw-radius-sm); | |||
transition: background-color var(--mw-transition-fast); | |||
} | } | ||
. | #p-personal .vector-menu-content-list li a:hover { | ||
background-color: var(--mw-bg-tertiary); | |||
text-decoration: none; | |||
} | } | ||
. | /* Dropdown menus */ | ||
width: | .vector-menu-dropdown .vector-menu-content { | ||
background: var(--mw-bg-primary); | |||
border: 1px solid var(--mw-border-light); | |||
border-radius: var(--mw-radius-md); | |||
box-shadow: var(--mw-shadow-md); | |||
padding: var(--mw-space-xs) 0; | |||
min-width: 140px; | |||
} | } | ||
. | .vector-menu-dropdown .vector-menu-content-list li a { | ||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
color: var(--mw-text-primary); | |||
padding: | |||
display: block; | display: block; | ||
} | } | ||
. | .vector-menu-dropdown .vector-menu-content-list li a:hover { | ||
background-color: var(--mw-bg-accent); | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
. | /* ========================================================================== | ||
8. SEARCH | |||
========================================================================== */ | |||
#simpleSearch { | |||
background: var(--mw-bg-primary); | |||
border: 1px solid var(--mw-border-medium); | |||
transition: | border-radius: var(--mw-radius-md); | ||
transition: | |||
border-color var(--mw-transition-fast), | |||
box-shadow var(--mw-transition-fast); | |||
} | } | ||
#simpleSearch:focus-within { | |||
border-color: var(--mw-accent-primary); | |||
box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.15); | |||
} | } | ||
#searchInput { | |||
font-size: 0.9rem; | |||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
border: none; | |||
background: transparent; | background: transparent; | ||
} | } | ||
# | #searchInput::placeholder { | ||
color: | color: var(--mw-text-muted); | ||
} | } | ||
. | .searchButton { | ||
background: transparent; | background: transparent; | ||
border: none; | |||
padding: var(--mw-space-sm); | |||
cursor: pointer; | cursor: pointer; | ||
opacity: 0.6; | |||
transition: opacity var(--mw-transition-fast); | |||
} | } | ||
. | .searchButton:hover { | ||
opacity: 1; | |||
} | } | ||
/* ========================================================================== | |||
. | 9. TABLE OF CONTENTS (TOC) | ||
========================================================================== */ | |||
. | .toc, | ||
#toc { | |||
background: var(--mw-bg-secondary); | |||
border: 1px solid var(--mw-border-light); | |||
border: | border-radius: var(--mw-radius-md); | ||
padding: var(--mw-space-md); | |||
border-radius: | margin: var(--mw-space-md) 0; | ||
display: inline-block; | display: inline-block; | ||
min-width: 200px; | |||
max-width: 100%; | |||
} | } | ||
. | .toc h2, | ||
#toc .toctitle { | |||
font-size: 1rem; | |||
font-weight: 600; | |||
color: var(--mw-text-primary); | |||
margin-bottom: var(--mw-space-sm); | |||
border: none; | |||
padding: 0; | |||
border: | |||
} | } | ||
. | .toc ul, | ||
#toc ul { | |||
margin: 0; | margin: 0; | ||
padding-left: var(--mw-space-md); | |||
list-style: none; | |||
} | } | ||
. | .toc ul ul, | ||
#toc ul ul { | |||
padding-left: var(--mw-space-md); | |||
} | } | ||
. | .toc li, | ||
#toc li { | |||
margin: var(--mw-space-xs) 0; | |||
line-height: 1.5; | |||
} | } | ||
. | .toc a, | ||
#toc a { | |||
color: var(--mw-link); | |||
font-size: 0.9rem; | |||
} | } | ||
.toc a:hover, | |||
#toc a:hover { | |||
color: var(--mw-link-hover); | |||
color: | |||
} | } | ||
.tocnumber { | |||
color: | color: var(--mw-text-muted); | ||
margin-right: var(--mw-space-xs); | |||
} | } | ||
.toctogglespan { | |||
font-size: 0.85rem; | |||
margin-left: var(--mw-space-sm); | |||
} | } | ||
/* ========================================================================== | |||
10. TABLES | |||
========================================================================== */ | |||
. | /* Wikitable */ | ||
margin- | table.wikitable { | ||
background: var(--mw-bg-primary); | |||
border: 1px solid var(--mw-border-medium); | |||
border-collapse: collapse; | |||
border-radius: var(--mw-radius-sm); | |||
margin: var(--mw-space-md) 0; | |||
font-size: 0.95rem; | |||
} | } | ||
. | table.wikitable>tr>th, | ||
table.wikitable>tr>td, | |||
table.wikitable>*>tr>th, | |||
table.wikitable>*>tr>td { | |||
border: 1px solid var(--mw-border-light); | |||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
} | } | ||
table.wikitable>tr>th, | |||
table.wikitable>*>tr>th { | |||
background: var(--mw-bg-tertiary); | |||
font-weight: 600; | |||
text-align: left; | |||
color: var(--mw-text-primary); | |||
} | } | ||
table.wikitable>tr>td, | |||
table.wikitable>*>tr>td { | |||
background: var(--mw-bg-primary); | |||
} | } | ||
/* Zebra striping para wikitable */ | |||
table.wikitable>tbody>tr:nth-child(even)>td { | |||
background: var(--mw-bg-secondary); | |||
} | } | ||
/* Tabelas genéricas em conteúdo */ | |||
.mw-parser-output table:not(.wikitable):not(.infobox):not(.navbox) { | |||
margin: var(--mw-space-md) 0; | |||
} | } | ||
/* Sortable table headers */ | |||
table.sortable th.headerSort { | |||
cursor: pointer; | |||
. | |||
position: relative; | position: relative; | ||
padding-right: 24px; | |||
} | } | ||
. | table.sortable th.headerSort:hover { | ||
background: var(--mw-bg-accent); | |||
} | } | ||
. | /* ========================================================================== | ||
11. INFOBOX | |||
========================================================================== */ | |||
. | .infobox { | ||
width: | background: var(--mw-bg-secondary); | ||
border: 1px solid var(--mw-border-light); | |||
border-radius: var(--mw-radius-md); | |||
margin: 0 0 var(--mw-space-md) var(--mw-space-md); | |||
padding: var(--mw-space-md); | |||
float: right; | |||
clear: right; | |||
width: 300px; | |||
max-width: 40%; | |||
font-size: 0.9rem; | |||
box-shadow: var(--mw-shadow-sm); | |||
} | } | ||
. | .infobox th, | ||
.infobox td { | |||
vertical-align: top; | |||
padding: var(--mw-space-xs) var(--mw-space-sm); | |||
border: none !important; | |||
} | } | ||
. | .infobox th { | ||
text-align: left; | |||
font-weight: 600; | |||
color: var(--mw-text-secondary); | |||
width: 40%; | |||
} | } | ||
. | /* Cabeçalho da infobox */ | ||
.infobox caption, | |||
.infobox .infobox-title, | |||
.infobox>tbody>tr:first-child>th[colspan] { | |||
font-size: 1.1rem; | |||
font-weight: 600; | |||
color: var(--mw-text-primary); | |||
text-align: center; | |||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
background: var(--mw-bg-tertiary); | |||
border-radius: var(--mw-radius-sm) var(--mw-radius-sm) 0 0; | |||
} | } | ||
/* Imagem na infobox */ | |||
.infobox-image, | |||
.infobox .image { | |||
. | |||
. | |||
. | |||
text-align: center; | text-align: center; | ||
padding: var(--mw-space-sm) 0; | |||
} | } | ||
. | .infobox-image img, | ||
.infobox .image img { | |||
. | |||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
border-radius: var(--mw-radius-sm); | |||
} | } | ||
. | /* Labels da infobox */ | ||
.infobox-label { | |||
font-weight: 600; | |||
color: var(--mw-text-secondary); | |||
} | } | ||
. | .infobox-data { | ||
color: var(--mw-text-primary); | |||
} | } | ||
. | /* Subcabeçalhos */ | ||
.infobox-header { | |||
background: var(--mw-bg-tertiary); | |||
font-weight: 600; | |||
text-align: center; | |||
padding: var(--mw-space-xs) var(--mw-space-sm); | |||
} | } | ||
. | /* ========================================================================== | ||
12. NAVBOX & CAIXAS DE NAVEGAÇÃO | |||
========================================================================== */ | |||
. | .navbox { | ||
background: var(--mw-bg-secondary); | |||
border: 1px solid var(--mw-border-light); | |||
border-radius: var(--mw-radius-md); | |||
margin: var(--mw-space-lg) 0; | |||
padding: 0; | |||
clear: both; | |||
font-size: 0.9rem; | |||
box-shadow: var(--mw-shadow-sm); | |||
} | } | ||
. | .navbox-title { | ||
background: var(--mw-bg-tertiary); | |||
align | padding: var(--mw-space-sm) var(--mw-space-md); | ||
font-weight: 600; | |||
text-align: center; | |||
border-radius: var(--mw-radius-md) var(--mw-radius-md) 0 0; | |||
} | } | ||
. | .navbox-group { | ||
background: var(--mw-bg-tertiary); | |||
font-weight: 600; | |||
padding: var(--mw-space-xs) var(--mw-space-md); | |||
text-align: right; | |||
white-space: nowrap; | |||
vertical-align: top; | |||
} | } | ||
. | .navbox-list { | ||
padding: var(--mw-space-xs) var(--mw-space-md); | |||
} | } | ||
. | .navbox-odd { | ||
background: var(--mw-bg-primary); | |||
background: var(-- | |||
} | } | ||
. | .navbox-even { | ||
background: var(-- | background: var(--mw-bg-secondary); | ||
} | } | ||
. | .navbox-abovebelow { | ||
background: var(--mw-bg-tertiary); | |||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
text-align: center; | |||
} | } | ||
. | /* Collapsible */ | ||
.mw-collapsible-toggle { | |||
font-size: 0.85rem; | |||
font-weight: normal; | |||
} | } | ||
/* ========================================================================== | |||
13. AVISOS E CAIXAS DE MENSAGEM (AMBOX, TMBOX, ETC) | |||
========================================================================== */ | |||
. | .ambox, | ||
.tmbox, | |||
.ombox, | |||
.cmbox, | |||
.fmbox { | |||
background: var(--mw-bg-secondary); | |||
border: 1px solid var(--mw-border-medium); | |||
border-left-width: 4px; | |||
border-radius: var(--mw-radius-sm); | |||
margin: var(--mw-space-md) 0; | |||
padding: var(--mw-space-md); | |||
font-size: 0.95rem; | |||
} | } | ||
. | /* Tipos de avisos */ | ||
.ambox-notice, | |||
.tmbox-notice { | |||
border-left-color: var(--mw-accent-primary); | |||
background: var(--mw-bg-accent); | |||
} | } | ||
. | .ambox-warning, | ||
color: | .tmbox-move { | ||
border-left-color: var(--mw-accent-warning); | |||
background: #fef6e7; | |||
} | } | ||
.ambox-serious, | |||
. | .ambox-delete { | ||
border-left-color: var(--mw-accent-danger); | |||
background: #fef0f0; | |||
} | } | ||
. | .ambox-style, | ||
.ambox-content { | |||
border-left-color: #e9a43e; | |||
background: #fef9ee; | |||
} | } | ||
. | .ambox-merge, | ||
.ambox-protection { | |||
border-left-color: #9b7dbd; | |||
background: #f5f2f8; | |||
} | } | ||
. | /* Stub */ | ||
.stub { | |||
background: var(--mw-bg-secondary); | |||
border: 1px dashed var(--mw-border-medium); | |||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
font-size: 0.9rem; | |||
margin-top: var(--mw-space-lg); | |||
text-align: center; | text-align: center; | ||
text- | color: var(--mw-text-muted); | ||
border-radius: var(--mw-radius-sm); | |||
} | } | ||
/* | /* ========================================================================== | ||
14. CODE & PRE | |||
========================================================================== */ | |||
. | code, | ||
.mw-code { | |||
font-family: var(--mw-font-mono); | |||
font-size: 0.9em; | |||
background: var(--mw-bg-tertiary); | |||
padding: 2px 6px; | |||
border-radius: var(--mw-radius-sm); | |||
color: #c7254e; | |||
} | } | ||
pre, | |||
.mw-code { | |||
font-family: | font-family: var(--mw-font-mono); | ||
font-size: 0.9rem; | |||
line-height: 1.5; | |||
background: var(--mw-bg-secondary); | |||
border: | border: 1px solid var(--mw-border-light); | ||
border-radius: | border-radius: var(--mw-radius-md); | ||
padding: var(--mw-space-md); | |||
margin: var(--mw-space-md) 0; | |||
overflow-x: auto; | |||
white-space: pre-wrap; | |||
word-wrap: break-word; | |||
} | } | ||
. | /* Syntax highlight */ | ||
.mw-highlight pre { | |||
background: #1e1e1e; | |||
color: #d4d4d4; | |||
border: none; | |||
} | } | ||
. | /* Nowiki e outros */ | ||
.nowrap { | |||
white-space: nowrap; | |||
} | } | ||
. | /* ========================================================================== | ||
15. IMAGENS E THUMBNAILS | |||
========================================================================== */ | |||
. | .thumb { | ||
margin: var(--mw-space-sm) 0 var(--mw-space-md); | |||
border: 1px solid var(--mw-border-light); | |||
border-radius: var(--mw-radius-md); | |||
background: var(--mw-bg-secondary); | |||
overflow: hidden; | |||
} | } | ||
. | .thumb.tright { | ||
margin-left: var(--mw-space-md); | |||
float: right; | |||
clear: right; | |||
} | } | ||
.thumb.tleft { | |||
margin-right: var(--mw-space-md); | |||
float: left; | |||
clear: left; | |||
} | } | ||
.thumb.tnone { | |||
margin: var(--mw-space-md) 0; | |||
} | } | ||
.thumbinner { | |||
padding: var(--mw-space-xs); | |||
border: none; | border: none; | ||
background: transparent; | |||
} | } | ||
. | .thumbcaption { | ||
font-size: 0.85rem; | |||
color: var(--mw-text-secondary); | |||
padding: var(--mw-space-xs) var(--mw-space-sm); | |||
line-height: 1.4; | |||
padding: | |||
text-align: center; | text-align: center; | ||
} | } | ||
. | .thumbimage { | ||
border: none; | border: none; | ||
border-radius: var(--mw-radius-sm); | |||
} | } | ||
. | /* Galeria */ | ||
.gallery { | |||
margin: var(--mw-space-md) 0; | |||
} | } | ||
. | .gallerybox { | ||
margin: var(--mw-space-xs); | |||
} | } | ||
. | .gallerybox .thumb { | ||
margin: 0; | margin: 0; | ||
border: 1px solid var(--mw-border-light); | |||
border-radius: var(--mw-radius-sm); | |||
} | } | ||
. | .gallerytext { | ||
font-size: 0.85rem; | |||
color: var(--mw-text-secondary); | |||
padding: var(--mw-space-xs); | |||
. | |||
text-align: center; | text-align: center; | ||
} | } | ||
. | /* ========================================================================== | ||
16. FORMULÁRIOS E INPUTS | |||
========================================================================== */ | |||
input[type="text"], | |||
input[type="search"], | |||
input[type="password"], | |||
input[type="email"], | |||
input[type="url"], | |||
input[type="number"], | |||
textarea, | |||
select { | |||
font-family: var(--mw-font-sans); | |||
font-size: 0.95rem; | |||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
border: 1px solid var(--mw-border-medium); | |||
border-radius: var(--mw-radius-sm); | |||
background: var(--mw-bg-primary); | |||
color: var(--mw-text-primary); | |||
transition: | |||
border-color var(--mw-transition-fast), | |||
box-shadow var(--mw-transition-fast); | |||
} | } | ||
input[type="text"]:focus, | |||
input[type="search"]:focus, | |||
color: | input[type="password"]:focus, | ||
input[type="email"]:focus, | |||
input[type="url"]:focus, | |||
input[type="number"]:focus, | |||
textarea:focus, | |||
select:focus { | |||
border-color: var(--mw-accent-primary); | |||
outline: none; | |||
box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.15); | |||
} | } | ||
/* Botões */ | |||
input[type="submit"], | |||
input[type="button"], | |||
button, | |||
.mw-ui-button { | |||
font-family: var(--mw-font-sans); | |||
font-size: 0.9rem; | |||
font-weight: 500; | |||
- | padding: var(--mw-space-sm) var(--mw-space-md); | ||
- | border: 1px solid var(--mw-border-medium); | ||
- | border-radius: var(--mw-radius-sm); | ||
- | background: var(--mw-bg-secondary); | ||
color: var(--mw-text-primary); | |||
cursor: pointer; | |||
transition: | |||
background-color var(--mw-transition-fast), | |||
border-color var(--mw-transition-fast); | |||
} | } | ||
. | input[type="submit"]:hover, | ||
input[type="button"]:hover, | |||
button:hover, | |||
color: | .mw-ui-button:hover { | ||
background: var(--mw-bg-tertiary); | |||
border-color: var(--mw-border-dark); | |||
} | } | ||
. | /* Botão primário */ | ||
.mw-ui-progressive, | |||
input[type="submit"].mw-ui-progressive { | |||
background: var(--mw-accent-primary); | |||
border-color: var(--mw-accent-primary); | |||
color: var(--mw-text-inverse); | |||
} | } | ||
.mw-ui-progressive:hover { | |||
background: var(--mw-link-hover); | |||
border-color: var(--mw-link-hover); | |||
. | |||
} | } | ||
/* Botão destrutivo */ | |||
.mw-ui-destructive { | |||
background: var(--mw-accent-danger); | |||
border-color: var(--mw-accent-danger); | |||
color: var(--mw-text-inverse); | |||
} | } | ||
.mw-ui-destructive:hover { | |||
background: #c12929; | |||
border-color: #c12929; | |||
} | } | ||
/* ========================================================================== | |||
17. FOOTER | |||
========================================================================== */ | |||
. | #footer, | ||
.mw-footer { | |||
background: var(--mw-bg-secondary); | |||
border-top: 1px solid var(--mw-border-light); | |||
padding: var(--mw-space-lg) var(--mw-space-md); | |||
margin-top: var(--mw-space-xl); | |||
font-size: 0.85rem; | |||
color: var(--mw-text-muted); | |||
} | } | ||
#footer ul { | |||
list-style: none; | |||
ul { | |||
list-style: | |||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
} | } | ||
#footer li { | |||
display: inline-block; | |||
margin-right: var(--mw-space-md); | |||
} | } | ||
#footer a { | |||
color: var(--mw-text-muted); | |||
} | } | ||
#footer a:hover { | |||
color: | color: var(--mw-link); | ||
} | } | ||
#footer-icons { | |||
float: right; | |||
} | } | ||
#footer-icons img { | |||
opacity: 0.6; | |||
transition: opacity var(--mw-transition-fast); | |||
} | } | ||
#footer-icons img:hover { | |||
opacity: 1; | |||
} | } | ||
/* | /* ========================================================================== | ||
. | 18. DIFF & HISTÓRICO | ||
========================================================================== */ | |||
.diff-context { | |||
background: var(--mw-bg-primary); | |||
} | } | ||
.diff-deletedline { | |||
background: #ffeef0; | |||
# | border-color: #f5c6cb; | ||
} | } | ||
.diff-addedline { | |||
background: #e6ffed; | |||
border-color: #b7e4c7; | |||
background | |||
border-color: # | |||
} | } | ||
.diffchange { | |||
color: inherit; | |||
font-weight: 600; | |||
} | } | ||
.diff-deletedline .diffchange { | |||
. | background: #fdb8c0; | ||
background | |||
} | } | ||
. | .diff-addedline .diffchange { | ||
background: #acf2bd; | |||
} | } | ||
. | /* ========================================================================== | ||
19. ESPECIAL PAGES | |||
========================================================================== */ | |||
/* Mudanças recentes */ | |||
.mw-changeslist { | |||
font-size: 0.95rem; | |||
} | } | ||
.mw-changeslist-line { | |||
padding: var(--mw-space-xs) 0; | |||
border-bottom: 1px solid var(--mw-border-light); | |||
} | } | ||
.mw-changeslist-legend { | |||
background: | background: var(--mw-bg-secondary); | ||
border | border: 1px solid var(--mw-border-light); | ||
border-radius: var(--mw-radius-sm); | |||
padding: | padding: var(--mw-space-md); | ||
margin-bottom: var(--mw-space-md); | |||
} | } | ||
. | /* Contribuições */ | ||
.mw-contributions-list { | |||
font-size: 0.95rem; | |||
} | } | ||
. | /* Busca */ | ||
.mw-search-results { | |||
list-style: none; | |||
padding: 0 | padding: 0; | ||
} | } | ||
. | .mw-search-result { | ||
padding: var(--mw-space-md) 0; | |||
border-bottom: 1px solid var(--mw-border-light); | |||
} | } | ||
. | .mw-search-result-heading { | ||
font-size: 1.1rem; | |||
margin-bottom: var(--mw-space-xs); | |||
margin: | |||
} | } | ||
. | .searchresult { | ||
color: var(--mw-text-secondary); | |||
font-size: 0.95rem; | |||
} | } | ||
.searchmatch { | |||
color: | font-weight: 600; | ||
color: var(--mw-text-primary); | |||
} | } | ||
/* ========================================================================== | |||
20. MISC & UTILITIES | |||
========================================================================== */ | |||
/* | /* Separador horizontal */ | ||
hr { | |||
border: none; | border: none; | ||
border- | border-top: 1px solid var(--mw-border-light); | ||
margin: var(--mw-space-lg) 0; | |||
} | } | ||
/* Blockquote */ | |||
blockquote { | |||
border-left: 4px solid var(--mw-border-medium); | |||
background: var(--mw-bg-secondary); | |||
margin: var(--mw-space-md) 0; | |||
padding: var(--mw-space-md) var(--mw-space-lg); | |||
color: var(--mw-text-secondary); | |||
font-style: italic; | |||
border-radius: 0 var(--mw-radius-sm) var(--mw-radius-sm) 0; | |||
} | } | ||
/* Referências */ | |||
.reference { | |||
font-size: 0.8em; | |||
vertical-align: super; | |||
} | } | ||
.references { | |||
. | font-size: 0.9rem; | ||
} | } | ||
. | /* Hatnotes */ | ||
.hatnote { | |||
font-style: italic; | |||
color: var(--mw-text-muted); | |||
padding-left: var(--mw-space-lg); | |||
margin-bottom: var(--mw-space-md); | |||
} | } | ||
. | /* Error messages */ | ||
color: # | .error, | ||
.errorbox { | |||
color: var(--mw-accent-danger); | |||
background: #fef0f0; | |||
border: 1px solid var(--mw-accent-danger); | |||
border-radius: var(--mw-radius-sm); | |||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
} | } | ||
/* Success messages */ | |||
.success, | |||
.successbox { | |||
color: var(--mw-accent-success); | |||
background: #e6f7ef; | |||
border: 1px solid var(--mw-accent-success); | |||
border: | border-radius: var(--mw-radius-sm); | ||
padding: | padding: var(--mw-space-sm) var(--mw-space-md); | ||
} | } | ||
/* Warning messages */ | |||
.warning, | |||
.warningbox { | |||
background: # | color: #7d5c00; | ||
background: #fef6e7; | |||
border: 1px solid var(--mw-accent-warning); | |||
border-radius: var(--mw-radius-sm); | |||
padding: var(--mw-space-sm) var(--mw-space-md); | |||
} | } | ||
/* Print footer oculto em tela */ | |||
.printfooter { | |||
display: none; | |||
} | } | ||
/* Plainlinks */ | |||
.plainlinks a { | |||
background: none !important; | |||
background- | padding-right: 0 !important; | ||
} | } | ||
/* Nowiki */ | |||
.nowiki { | |||
font-family: var(--mw-font-mono); | |||
white-space: pre-wrap; | |||
} | } | ||
/* Template-related */ | |||
.template-documentation { | |||
background: var(--mw-bg-secondary); | |||
background: | border: 1px solid var(--mw-border-light); | ||
border-radius: var(--mw-radius-md); | |||
border- | padding: var(--mw-space-md); | ||
padding: | margin-top: var(--mw-space-lg); | ||
} | } | ||
/* Mbox (message boxes gerais) */ | |||
.mbox-small { | |||
font-size: 0.9rem; | |||
font- | |||
} | } | ||
/* ========================================================================== | |||
21. ANIMAÇÕES SUTIS | |||
========================================================================== */ | |||
/* Transição suave para links e botões */ | |||
a, | |||
button, | |||
input[type="submit"], | |||
input[type="button"], | |||
.mw-ui-button { | |||
transition: | |||
color var(--mw-transition-fast), | |||
background-color var(--mw-transition-fast), | |||
border-color var(--mw-transition-fast), | |||
box-shadow var(--mw-transition-fast); | |||
} | } | ||
/* Focus ring acessível */ | |||
:focus-visible { | |||
outline: 2px solid var(--mw-accent-primary); | |||
outline-offset: 2px; | |||
} | } | ||
/* ========================================================================== | |||
22. RESPONSIVE AJUSTES | |||
========================================================================== */ | |||
@media screen and (max-width: 720px) { | |||
.infobox { | |||
float: none; | |||
margin: var(--mw-space-md) 0; | |||
. | |||
width: 100%; | width: 100%; | ||
max-width: 100%; | |||
} | } | ||
. | .thumb.tright, | ||
.thumb.tleft { | |||
float: none; | |||
margin: var(--mw-space-md) 0; | |||
} | } | ||
. | table.wikitable { | ||
display: block; | |||
overflow-x: auto; | |||
white-space: nowrap; | |||
} | } | ||
#content, | |||
.mw-body { | |||
.mw- | padding: var(--mw-space-md); | ||
padding: | |||
} | } | ||
. | #firstHeading, | ||
.firstHeading { | |||
font-size: 1.6rem; | |||
} | } | ||
} | } | ||
Edição das 23h30min de 17 de janeiro de 2026
/* ==========================================================================
1. ROOT VARIABLES
========================================================================== */
:root {
/* Cores principais */
--mw-bg-primary: #ffffff;
--mw-bg-secondary: #f8f9fa;
--mw-bg-tertiary: #eaecf0;
--mw-bg-accent: #eef3ff;
/* Texto */
--mw-text-primary: #202122;
--mw-text-secondary: #54595d;
--mw-text-muted: #72777d;
--mw-text-inverse: #ffffff;
/* Links */
--mw-link: #3366cc;
--mw-link-hover: #1a4d99;
--mw-link-visited: #6b4ba1;
--mw-link-new: #ba0000;
--mw-link-new-hover: #8a0000;
/* Bordas */
--mw-border-light: #e0e3e7;
--mw-border-medium: #c8ccd1;
--mw-border-dark: #a2a9b1;
/* Acentos e estados */
--mw-accent-primary: #3366cc;
--mw-accent-success: #14866d;
--mw-accent-warning: #edab00;
--mw-accent-danger: #d73333;
/* Sombras */
--mw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--mw-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
--mw-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
/* Radius */
--mw-radius-sm: 3px;
--mw-radius-md: 6px;
--mw-radius-lg: 10px;
/* Espaçamento */
--mw-space-xs: 4px;
--mw-space-sm: 8px;
--mw-space-md: 16px;
--mw-space-lg: 24px;
--mw-space-xl: 32px;
/* Tipografia */
--mw-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mw-font-mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
--mw-font-size-base: 15px;
--mw-line-height: 1.65;
/* Transições */
--mw-transition-fast: 0.15s ease;
--mw-transition-normal: 0.25s ease;
}
/* ==========================================================================
2. BASE & RESET
========================================================================== */
body {
font-family: var(--mw-font-sans);
font-size: var(--mw-font-size-base);
line-height: var(--mw-line-height);
color: var(--mw-text-primary);
background-color: var(--mw-bg-secondary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
3. TYPOGRAPHY
========================================================================== */
/* Títulos */
#firstHeading,
.firstHeading {
font-size: 2rem;
font-weight: 600;
line-height: 1.3;
color: var(--mw-text-primary);
border-bottom: 2px solid var(--mw-border-light);
padding-bottom: var(--mw-space-sm);
margin-bottom: var(--mw-space-lg);
}
.mw-parser-output h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--mw-text-primary);
border-bottom: 1px solid var(--mw-border-light);
padding-bottom: var(--mw-space-xs);
margin-top: var(--mw-space-xl);
margin-bottom: var(--mw-space-md);
}
.mw-parser-output h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--mw-text-primary);
margin-top: var(--mw-space-lg);
margin-bottom: var(--mw-space-sm);
}
.mw-parser-output h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--mw-text-secondary);
margin-top: var(--mw-space-md);
margin-bottom: var(--mw-space-xs);
}
.mw-parser-output h5,
.mw-parser-output h6 {
font-size: 1rem;
font-weight: 600;
color: var(--mw-text-secondary);
margin-top: var(--mw-space-md);
margin-bottom: var(--mw-space-xs);
}
/* Parágrafos */
.mw-parser-output p {
margin-bottom: var(--mw-space-md);
}
/* Listas */
.mw-parser-output ul,
.mw-parser-output ol {
margin: var(--mw-space-sm) 0 var(--mw-space-md) var(--mw-space-lg);
}
.mw-parser-output li {
margin-bottom: var(--mw-space-xs);
}
/* ==========================================================================
4. LINKS
========================================================================== */
a {
color: var(--mw-link);
text-decoration: none;
transition: color var(--mw-transition-fast);
}
a:hover {
color: var(--mw-link-hover);
text-decoration: underline;
}
a:visited {
color: var(--mw-link-visited);
}
/* Links novos (páginas inexistentes) */
a.new {
color: var(--mw-link-new);
}
a.new:hover {
color: var(--mw-link-new-hover);
}
/* Links externos */
.mw-parser-output a.external {
color: var(--mw-link);
}
.mw-parser-output a.external:after {
opacity: 0.6;
}
/* ==========================================================================
5. LAYOUT — CONTENT AREA
========================================================================== */
/* Área principal de conteúdo */
#content,
.mw-body {
background: var(--mw-bg-primary);
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-md);
box-shadow: var(--mw-shadow-sm);
padding: var(--mw-space-lg);
margin-top: var(--mw-space-md);
}
#bodyContent {
line-height: var(--mw-line-height);
}
/* Subtítulo */
#siteSub {
color: var(--mw-text-muted);
font-size: 0.85rem;
margin-bottom: var(--mw-space-md);
}
/* Categorias */
#catlinks {
background: var(--mw-bg-secondary);
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-sm);
padding: var(--mw-space-sm) var(--mw-space-md);
margin-top: var(--mw-space-lg);
font-size: 0.9rem;
}
/* ==========================================================================
6. SIDEBAR (Painel Lateral)
========================================================================== */
#mw-panel {
padding-top: var(--mw-space-md);
}
/* Logo */
#p-logo {
margin-bottom: var(--mw-space-md);
}
/* Portlets / Menus laterais */
.mw-portlet,
.portal {
margin-bottom: var(--mw-space-md);
}
.mw-portlet .vector-menu-heading,
.portal h3 {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--mw-text-muted);
padding: var(--mw-space-xs) var(--mw-space-md);
margin-bottom: var(--mw-space-xs);
}
.mw-portlet .vector-menu-content-list,
.portal .body ul {
padding: 0;
margin: 0;
}
.mw-portlet .vector-menu-content-list li,
.portal .body li {
padding: var(--mw-space-xs) var(--mw-space-md);
margin: 0;
font-size: 0.9rem;
}
.mw-portlet .vector-menu-content-list li a,
.portal .body li a {
color: var(--mw-text-secondary);
display: block;
padding: 2px 0;
border-radius: var(--mw-radius-sm);
transition:
color var(--mw-transition-fast),
background-color var(--mw-transition-fast);
}
.mw-portlet .vector-menu-content-list li a:hover,
.portal .body li a:hover {
color: var(--mw-link);
text-decoration: none;
}
/* ==========================================================================
7. HEADER & NAVIGATION TABS
========================================================================== */
/* Tabs de namespaces e views */
.vector-menu-tabs .vector-menu-content-list li {
margin: 0;
}
.vector-menu-tabs .vector-menu-content-list li a {
padding: var(--mw-space-sm) var(--mw-space-md);
border-radius: var(--mw-radius-sm) var(--mw-radius-sm) 0 0;
font-size: 0.9rem;
color: var(--mw-text-secondary);
transition:
background-color var(--mw-transition-fast),
color var(--mw-transition-fast);
}
.vector-menu-tabs .vector-menu-content-list li a:hover {
background-color: var(--mw-bg-secondary);
color: var(--mw-text-primary);
text-decoration: none;
}
.vector-menu-tabs .vector-menu-content-list li.selected a {
background: var(--mw-bg-primary);
color: var(--mw-text-primary);
font-weight: 500;
}
/* Menu pessoal (usuário) */
#p-personal .vector-menu-content-list {
display: flex;
gap: var(--mw-space-xs);
flex-wrap: wrap;
}
#p-personal .vector-menu-content-list li a {
padding: var(--mw-space-xs) var(--mw-space-sm);
font-size: 0.85rem;
color: var(--mw-text-secondary);
border-radius: var(--mw-radius-sm);
transition: background-color var(--mw-transition-fast);
}
#p-personal .vector-menu-content-list li a:hover {
background-color: var(--mw-bg-tertiary);
text-decoration: none;
}
/* Dropdown menus */
.vector-menu-dropdown .vector-menu-content {
background: var(--mw-bg-primary);
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-md);
box-shadow: var(--mw-shadow-md);
padding: var(--mw-space-xs) 0;
min-width: 140px;
}
.vector-menu-dropdown .vector-menu-content-list li a {
padding: var(--mw-space-sm) var(--mw-space-md);
color: var(--mw-text-primary);
display: block;
}
.vector-menu-dropdown .vector-menu-content-list li a:hover {
background-color: var(--mw-bg-accent);
text-decoration: none;
}
/* ==========================================================================
8. SEARCH
========================================================================== */
#simpleSearch {
background: var(--mw-bg-primary);
border: 1px solid var(--mw-border-medium);
border-radius: var(--mw-radius-md);
transition:
border-color var(--mw-transition-fast),
box-shadow var(--mw-transition-fast);
}
#simpleSearch:focus-within {
border-color: var(--mw-accent-primary);
box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.15);
}
#searchInput {
font-size: 0.9rem;
padding: var(--mw-space-sm) var(--mw-space-md);
border: none;
background: transparent;
}
#searchInput::placeholder {
color: var(--mw-text-muted);
}
.searchButton {
background: transparent;
border: none;
padding: var(--mw-space-sm);
cursor: pointer;
opacity: 0.6;
transition: opacity var(--mw-transition-fast);
}
.searchButton:hover {
opacity: 1;
}
/* ==========================================================================
9. TABLE OF CONTENTS (TOC)
========================================================================== */
.toc,
#toc {
background: var(--mw-bg-secondary);
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-md);
padding: var(--mw-space-md);
margin: var(--mw-space-md) 0;
display: inline-block;
min-width: 200px;
max-width: 100%;
}
.toc h2,
#toc .toctitle {
font-size: 1rem;
font-weight: 600;
color: var(--mw-text-primary);
margin-bottom: var(--mw-space-sm);
border: none;
padding: 0;
}
.toc ul,
#toc ul {
margin: 0;
padding-left: var(--mw-space-md);
list-style: none;
}
.toc ul ul,
#toc ul ul {
padding-left: var(--mw-space-md);
}
.toc li,
#toc li {
margin: var(--mw-space-xs) 0;
line-height: 1.5;
}
.toc a,
#toc a {
color: var(--mw-link);
font-size: 0.9rem;
}
.toc a:hover,
#toc a:hover {
color: var(--mw-link-hover);
}
.tocnumber {
color: var(--mw-text-muted);
margin-right: var(--mw-space-xs);
}
.toctogglespan {
font-size: 0.85rem;
margin-left: var(--mw-space-sm);
}
/* ==========================================================================
10. TABLES
========================================================================== */
/* Wikitable */
table.wikitable {
background: var(--mw-bg-primary);
border: 1px solid var(--mw-border-medium);
border-collapse: collapse;
border-radius: var(--mw-radius-sm);
margin: var(--mw-space-md) 0;
font-size: 0.95rem;
}
table.wikitable>tr>th,
table.wikitable>tr>td,
table.wikitable>*>tr>th,
table.wikitable>*>tr>td {
border: 1px solid var(--mw-border-light);
padding: var(--mw-space-sm) var(--mw-space-md);
}
table.wikitable>tr>th,
table.wikitable>*>tr>th {
background: var(--mw-bg-tertiary);
font-weight: 600;
text-align: left;
color: var(--mw-text-primary);
}
table.wikitable>tr>td,
table.wikitable>*>tr>td {
background: var(--mw-bg-primary);
}
/* Zebra striping para wikitable */
table.wikitable>tbody>tr:nth-child(even)>td {
background: var(--mw-bg-secondary);
}
/* Tabelas genéricas em conteúdo */
.mw-parser-output table:not(.wikitable):not(.infobox):not(.navbox) {
margin: var(--mw-space-md) 0;
}
/* Sortable table headers */
table.sortable th.headerSort {
cursor: pointer;
position: relative;
padding-right: 24px;
}
table.sortable th.headerSort:hover {
background: var(--mw-bg-accent);
}
/* ==========================================================================
11. INFOBOX
========================================================================== */
.infobox {
background: var(--mw-bg-secondary);
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-md);
margin: 0 0 var(--mw-space-md) var(--mw-space-md);
padding: var(--mw-space-md);
float: right;
clear: right;
width: 300px;
max-width: 40%;
font-size: 0.9rem;
box-shadow: var(--mw-shadow-sm);
}
.infobox th,
.infobox td {
vertical-align: top;
padding: var(--mw-space-xs) var(--mw-space-sm);
border: none !important;
}
.infobox th {
text-align: left;
font-weight: 600;
color: var(--mw-text-secondary);
width: 40%;
}
/* Cabeçalho da infobox */
.infobox caption,
.infobox .infobox-title,
.infobox>tbody>tr:first-child>th[colspan] {
font-size: 1.1rem;
font-weight: 600;
color: var(--mw-text-primary);
text-align: center;
padding: var(--mw-space-sm) var(--mw-space-md);
background: var(--mw-bg-tertiary);
border-radius: var(--mw-radius-sm) var(--mw-radius-sm) 0 0;
}
/* Imagem na infobox */
.infobox-image,
.infobox .image {
text-align: center;
padding: var(--mw-space-sm) 0;
}
.infobox-image img,
.infobox .image img {
max-width: 100%;
height: auto;
border-radius: var(--mw-radius-sm);
}
/* Labels da infobox */
.infobox-label {
font-weight: 600;
color: var(--mw-text-secondary);
}
.infobox-data {
color: var(--mw-text-primary);
}
/* Subcabeçalhos */
.infobox-header {
background: var(--mw-bg-tertiary);
font-weight: 600;
text-align: center;
padding: var(--mw-space-xs) var(--mw-space-sm);
}
/* ==========================================================================
12. NAVBOX & CAIXAS DE NAVEGAÇÃO
========================================================================== */
.navbox {
background: var(--mw-bg-secondary);
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-md);
margin: var(--mw-space-lg) 0;
padding: 0;
clear: both;
font-size: 0.9rem;
box-shadow: var(--mw-shadow-sm);
}
.navbox-title {
background: var(--mw-bg-tertiary);
padding: var(--mw-space-sm) var(--mw-space-md);
font-weight: 600;
text-align: center;
border-radius: var(--mw-radius-md) var(--mw-radius-md) 0 0;
}
.navbox-group {
background: var(--mw-bg-tertiary);
font-weight: 600;
padding: var(--mw-space-xs) var(--mw-space-md);
text-align: right;
white-space: nowrap;
vertical-align: top;
}
.navbox-list {
padding: var(--mw-space-xs) var(--mw-space-md);
}
.navbox-odd {
background: var(--mw-bg-primary);
}
.navbox-even {
background: var(--mw-bg-secondary);
}
.navbox-abovebelow {
background: var(--mw-bg-tertiary);
padding: var(--mw-space-sm) var(--mw-space-md);
text-align: center;
}
/* Collapsible */
.mw-collapsible-toggle {
font-size: 0.85rem;
font-weight: normal;
}
/* ==========================================================================
13. AVISOS E CAIXAS DE MENSAGEM (AMBOX, TMBOX, ETC)
========================================================================== */
.ambox,
.tmbox,
.ombox,
.cmbox,
.fmbox {
background: var(--mw-bg-secondary);
border: 1px solid var(--mw-border-medium);
border-left-width: 4px;
border-radius: var(--mw-radius-sm);
margin: var(--mw-space-md) 0;
padding: var(--mw-space-md);
font-size: 0.95rem;
}
/* Tipos de avisos */
.ambox-notice,
.tmbox-notice {
border-left-color: var(--mw-accent-primary);
background: var(--mw-bg-accent);
}
.ambox-warning,
.tmbox-move {
border-left-color: var(--mw-accent-warning);
background: #fef6e7;
}
.ambox-serious,
.ambox-delete {
border-left-color: var(--mw-accent-danger);
background: #fef0f0;
}
.ambox-style,
.ambox-content {
border-left-color: #e9a43e;
background: #fef9ee;
}
.ambox-merge,
.ambox-protection {
border-left-color: #9b7dbd;
background: #f5f2f8;
}
/* Stub */
.stub {
background: var(--mw-bg-secondary);
border: 1px dashed var(--mw-border-medium);
padding: var(--mw-space-sm) var(--mw-space-md);
font-size: 0.9rem;
margin-top: var(--mw-space-lg);
text-align: center;
color: var(--mw-text-muted);
border-radius: var(--mw-radius-sm);
}
/* ==========================================================================
14. CODE & PRE
========================================================================== */
code,
.mw-code {
font-family: var(--mw-font-mono);
font-size: 0.9em;
background: var(--mw-bg-tertiary);
padding: 2px 6px;
border-radius: var(--mw-radius-sm);
color: #c7254e;
}
pre,
.mw-code {
font-family: var(--mw-font-mono);
font-size: 0.9rem;
line-height: 1.5;
background: var(--mw-bg-secondary);
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-md);
padding: var(--mw-space-md);
margin: var(--mw-space-md) 0;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Syntax highlight */
.mw-highlight pre {
background: #1e1e1e;
color: #d4d4d4;
border: none;
}
/* Nowiki e outros */
.nowrap {
white-space: nowrap;
}
/* ==========================================================================
15. IMAGENS E THUMBNAILS
========================================================================== */
.thumb {
margin: var(--mw-space-sm) 0 var(--mw-space-md);
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-md);
background: var(--mw-bg-secondary);
overflow: hidden;
}
.thumb.tright {
margin-left: var(--mw-space-md);
float: right;
clear: right;
}
.thumb.tleft {
margin-right: var(--mw-space-md);
float: left;
clear: left;
}
.thumb.tnone {
margin: var(--mw-space-md) 0;
}
.thumbinner {
padding: var(--mw-space-xs);
border: none;
background: transparent;
}
.thumbcaption {
font-size: 0.85rem;
color: var(--mw-text-secondary);
padding: var(--mw-space-xs) var(--mw-space-sm);
line-height: 1.4;
text-align: center;
}
.thumbimage {
border: none;
border-radius: var(--mw-radius-sm);
}
/* Galeria */
.gallery {
margin: var(--mw-space-md) 0;
}
.gallerybox {
margin: var(--mw-space-xs);
}
.gallerybox .thumb {
margin: 0;
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-sm);
}
.gallerytext {
font-size: 0.85rem;
color: var(--mw-text-secondary);
padding: var(--mw-space-xs);
text-align: center;
}
/* ==========================================================================
16. FORMULÁRIOS E INPUTS
========================================================================== */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select {
font-family: var(--mw-font-sans);
font-size: 0.95rem;
padding: var(--mw-space-sm) var(--mw-space-md);
border: 1px solid var(--mw-border-medium);
border-radius: var(--mw-radius-sm);
background: var(--mw-bg-primary);
color: var(--mw-text-primary);
transition:
border-color var(--mw-transition-fast),
box-shadow var(--mw-transition-fast);
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
border-color: var(--mw-accent-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.15);
}
/* Botões */
input[type="submit"],
input[type="button"],
button,
.mw-ui-button {
font-family: var(--mw-font-sans);
font-size: 0.9rem;
font-weight: 500;
padding: var(--mw-space-sm) var(--mw-space-md);
border: 1px solid var(--mw-border-medium);
border-radius: var(--mw-radius-sm);
background: var(--mw-bg-secondary);
color: var(--mw-text-primary);
cursor: pointer;
transition:
background-color var(--mw-transition-fast),
border-color var(--mw-transition-fast);
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.mw-ui-button:hover {
background: var(--mw-bg-tertiary);
border-color: var(--mw-border-dark);
}
/* Botão primário */
.mw-ui-progressive,
input[type="submit"].mw-ui-progressive {
background: var(--mw-accent-primary);
border-color: var(--mw-accent-primary);
color: var(--mw-text-inverse);
}
.mw-ui-progressive:hover {
background: var(--mw-link-hover);
border-color: var(--mw-link-hover);
}
/* Botão destrutivo */
.mw-ui-destructive {
background: var(--mw-accent-danger);
border-color: var(--mw-accent-danger);
color: var(--mw-text-inverse);
}
.mw-ui-destructive:hover {
background: #c12929;
border-color: #c12929;
}
/* ==========================================================================
17. FOOTER
========================================================================== */
#footer,
.mw-footer {
background: var(--mw-bg-secondary);
border-top: 1px solid var(--mw-border-light);
padding: var(--mw-space-lg) var(--mw-space-md);
margin-top: var(--mw-space-xl);
font-size: 0.85rem;
color: var(--mw-text-muted);
}
#footer ul {
list-style: none;
margin: 0;
padding: 0;
}
#footer li {
display: inline-block;
margin-right: var(--mw-space-md);
}
#footer a {
color: var(--mw-text-muted);
}
#footer a:hover {
color: var(--mw-link);
}
#footer-icons {
float: right;
}
#footer-icons img {
opacity: 0.6;
transition: opacity var(--mw-transition-fast);
}
#footer-icons img:hover {
opacity: 1;
}
/* ==========================================================================
18. DIFF & HISTÓRICO
========================================================================== */
.diff-context {
background: var(--mw-bg-primary);
}
.diff-deletedline {
background: #ffeef0;
border-color: #f5c6cb;
}
.diff-addedline {
background: #e6ffed;
border-color: #b7e4c7;
}
.diffchange {
color: inherit;
font-weight: 600;
}
.diff-deletedline .diffchange {
background: #fdb8c0;
}
.diff-addedline .diffchange {
background: #acf2bd;
}
/* ==========================================================================
19. ESPECIAL PAGES
========================================================================== */
/* Mudanças recentes */
.mw-changeslist {
font-size: 0.95rem;
}
.mw-changeslist-line {
padding: var(--mw-space-xs) 0;
border-bottom: 1px solid var(--mw-border-light);
}
.mw-changeslist-legend {
background: var(--mw-bg-secondary);
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-sm);
padding: var(--mw-space-md);
margin-bottom: var(--mw-space-md);
}
/* Contribuições */
.mw-contributions-list {
font-size: 0.95rem;
}
/* Busca */
.mw-search-results {
list-style: none;
padding: 0;
}
.mw-search-result {
padding: var(--mw-space-md) 0;
border-bottom: 1px solid var(--mw-border-light);
}
.mw-search-result-heading {
font-size: 1.1rem;
margin-bottom: var(--mw-space-xs);
}
.searchresult {
color: var(--mw-text-secondary);
font-size: 0.95rem;
}
.searchmatch {
font-weight: 600;
color: var(--mw-text-primary);
}
/* ==========================================================================
20. MISC & UTILITIES
========================================================================== */
/* Separador horizontal */
hr {
border: none;
border-top: 1px solid var(--mw-border-light);
margin: var(--mw-space-lg) 0;
}
/* Blockquote */
blockquote {
border-left: 4px solid var(--mw-border-medium);
background: var(--mw-bg-secondary);
margin: var(--mw-space-md) 0;
padding: var(--mw-space-md) var(--mw-space-lg);
color: var(--mw-text-secondary);
font-style: italic;
border-radius: 0 var(--mw-radius-sm) var(--mw-radius-sm) 0;
}
/* Referências */
.reference {
font-size: 0.8em;
vertical-align: super;
}
.references {
font-size: 0.9rem;
}
/* Hatnotes */
.hatnote {
font-style: italic;
color: var(--mw-text-muted);
padding-left: var(--mw-space-lg);
margin-bottom: var(--mw-space-md);
}
/* Error messages */
.error,
.errorbox {
color: var(--mw-accent-danger);
background: #fef0f0;
border: 1px solid var(--mw-accent-danger);
border-radius: var(--mw-radius-sm);
padding: var(--mw-space-sm) var(--mw-space-md);
}
/* Success messages */
.success,
.successbox {
color: var(--mw-accent-success);
background: #e6f7ef;
border: 1px solid var(--mw-accent-success);
border-radius: var(--mw-radius-sm);
padding: var(--mw-space-sm) var(--mw-space-md);
}
/* Warning messages */
.warning,
.warningbox {
color: #7d5c00;
background: #fef6e7;
border: 1px solid var(--mw-accent-warning);
border-radius: var(--mw-radius-sm);
padding: var(--mw-space-sm) var(--mw-space-md);
}
/* Print footer oculto em tela */
.printfooter {
display: none;
}
/* Plainlinks */
.plainlinks a {
background: none !important;
padding-right: 0 !important;
}
/* Nowiki */
.nowiki {
font-family: var(--mw-font-mono);
white-space: pre-wrap;
}
/* Template-related */
.template-documentation {
background: var(--mw-bg-secondary);
border: 1px solid var(--mw-border-light);
border-radius: var(--mw-radius-md);
padding: var(--mw-space-md);
margin-top: var(--mw-space-lg);
}
/* Mbox (message boxes gerais) */
.mbox-small {
font-size: 0.9rem;
}
/* ==========================================================================
21. ANIMAÇÕES SUTIS
========================================================================== */
/* Transição suave para links e botões */
a,
button,
input[type="submit"],
input[type="button"],
.mw-ui-button {
transition:
color var(--mw-transition-fast),
background-color var(--mw-transition-fast),
border-color var(--mw-transition-fast),
box-shadow var(--mw-transition-fast);
}
/* Focus ring acessível */
:focus-visible {
outline: 2px solid var(--mw-accent-primary);
outline-offset: 2px;
}
/* ==========================================================================
22. RESPONSIVE AJUSTES
========================================================================== */
@media screen and (max-width: 720px) {
.infobox {
float: none;
margin: var(--mw-space-md) 0;
width: 100%;
max-width: 100%;
}
.thumb.tright,
.thumb.tleft {
float: none;
margin: var(--mw-space-md) 0;
}
table.wikitable {
display: block;
overflow-x: auto;
white-space: nowrap;
}
#content,
.mw-body {
padding: var(--mw-space-md);
}
#firstHeading,
.firstHeading {
font-size: 1.6rem;
}
}