MediaWiki:Common.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CrabCodex — Global CSS (dark default, light-safe). Versioned in repo.
Mobile-first: estilos base = mobile; melhorias em min-width: 640px, 768px, 1024px.
Público: jogadores em wiki de jogo — legibilidade e contraste em todo o layout. */
:root {
/* Spacing (8px grid) */
--cc-space-1: 4px;
--cc-space-2: 8px;
--cc-space-3: 12px;
--cc-space-4: 16px;
--cc-space-5: 24px;
--cc-space-6: 32px;
--cc-space-7: 40px;
--cc-space-8: 48px;
--cc-gap: var(--cc-space-4);
--cc-radius: 8px;
--cc-radius-sm: 4px;
/* Dark theme (default) */
--cc-bg: #1a1b1e;
--cc-bg-elevated: #222328;
--cc-bg-card: #25262b;
--cc-border: #3d3e42;
--cc-text: #e4e4e7;
--cc-text-secondary: #b4b4be;
--cc-muted: #9ca3af;
--cc-link: #7dd3fc;
--cc-link-hover: #bae6fd;
--cc-link-visited: #a78bfa;
--cc-accent: #22c55e;
--cc-warn: #eab308;
--cc-info: #0ea5e9;
--cc-focus-ring: 2px solid var(--cc-link);
/* Contraste em áreas escuras (tabelas, headers) */
--cc-bg-table-header: #1c1f26;
--cc-text-on-dark: #f1f5f9;
/* Readability */
--cc-content-max: 86ch;
--cc-container-max: 1200px;
/* Rhythm: section separation (mobile menor, depois aumenta) */
--cc-section-gap: 1.75rem;
--cc-block-gap: 1rem;
/* Ad slot CLS prevention */
--cc-ad-min-height-mobile: 100px;
--cc-ad-min-height-tablet: 120px;
--cc-ad-min-height-desktop: 140px;
}
@media (min-width: 640px) {
:root {
--cc-section-gap: 2rem;
--cc-block-gap: 1.25rem;
}
}
@media (min-width: 1024px) {
:root {
--cc-section-gap: 2.5rem;
--cc-block-gap: 1.5rem;
}
}
/* Force dark background on entire page so no white strips */
body.skin-vector {
background: var(--cc-bg);
}
.skin-vector .mw-body,
.skin-vector #content,
.skin-vector .mw-body-content,
.skin-vector .vector-body,
.vector-body .mw-parser-output {
color: var(--cc-text);
background: var(--cc-bg);
}
.mw-parser-output .cc-container { background: transparent; }
/* First heading (page title) — must be visible on dark */
.skin-vector #firstHeading,
.skin-vector .mw-body h1.firstHeading {
color: var(--cc-text);
}
/* Skin chrome: sidebar integrada ao design system (sem caixas/bordas estranhas) */
.skin-vector #mw-navigation,
.skin-vector #mw-panel,
.skin-vector .vector-sidebar-container,
.skin-vector .vector-sidebar-container-no-toc,
.skin-vector .vector-sidebar {
background: var(--cc-bg-elevated) !important;
border: none !important;
border-right: 1px solid var(--cc-border) !important;
}
.skin-vector #mw-panel .vector-menu,
.skin-vector #mw-panel .vector-menu-heading,
.skin-vector #mw-panel .vector-menu-content,
.skin-vector #mw-panel .vector-menu-content-list,
.skin-vector-2022 #mw-panel .vector-menu,
.skin-vector-2022 #mw-panel .vector-menu-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.skin-vector #mw-panel .vector-menu-heading,
.skin-vector #mw-panel .vector-menu-content li a,
.skin-vector #mw-panel a {
color: var(--cc-link) !important;
}
.skin-vector #mw-panel .vector-menu-content li a:hover {
color: var(--cc-link-hover) !important;
}
/* Top header bar (Ler, Editar, search, user links) — forçar escuro */
.skin-vector #mw-head,
.skin-vector #mw-head .vector-header-container,
.skin-vector .vector-header-container,
.skin-vector .vector-sticky-header,
.skin-vector .vector-sticky-header-visible,
.skin-vector-2022 #mw-head,
.skin-vector-2022 .vector-header-container {
background: var(--cc-bg) !important;
border-color: var(--cc-border) !important;
}
/* Área do título da página — uma só barra, borda do design system */
.skin-vector .mw-body-header,
.skin-vector .vector-page-titlebar,
.skin-vector .vector-page-toolbar-container,
.skin-vector-2022 .mw-body-header,
.skin-vector-2022 .vector-page-titlebar,
.skin-vector-2022 .vector-page-toolbar-container {
background: var(--cc-bg-elevated) !important;
border: none !important;
border-bottom: 1px solid var(--cc-border) !important;
box-shadow: none !important;
}
.skin-vector .vector-header-container a,
.skin-vector .vector-header-container .mw-portlet a,
.skin-vector .vector-header-container .vector-dropdown-label {
color: #bae6fd !important;
}
.skin-vector .vector-search-box input,
.skin-vector .vector-search-box .cdx-text-input__input {
color: var(--cc-text) !important;
background: var(--cc-bg-elevated) !important;
border-color: var(--cc-border) !important;
}
.skin-vector .vector-search-box input::placeholder {
color: var(--cc-muted);
}
/* Footer — force dark so links are readable */
.skin-vector #footer,
.skin-vector .mw-footer,
.skin-vector .vector-footer,
.skin-vector #footer-info {
background: var(--cc-bg-elevated) !important;
border-top: 1px solid var(--cc-border);
color: var(--cc-text-secondary);
padding: var(--cc-space-4);
}
.skin-vector #footer a,
.skin-vector .mw-footer a {
color: var(--cc-link) !important;
}
.skin-vector #footer a:hover {
color: var(--cc-link-hover) !important;
}
/* Categories bar (fundo elevated, texto e links legíveis) */
.skin-vector .catlinks {
background: var(--cc-bg-elevated) !important;
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius-sm);
padding: var(--cc-space-3);
margin-top: var(--cc-space-4);
color: var(--cc-text-secondary);
}
.skin-vector .catlinks a,
.skin-vector .catlinks .mw-normal-catlinks a {
color: var(--cc-link) !important;
}
.skin-vector .catlinks a:hover {
color: var(--cc-link-hover) !important;
}
/* Tabs (Página principal / Discussão) — barra e abas em dark, forçar sobre tema claro */
.skin-vector .vector-tabs,
.skin-vector .vector-tabs .vector-tab-list,
.skin-vector .vector-tabs ul,
.skin-vector-2022 .vector-tabs .vector-tab-list {
background: var(--cc-bg-elevated) !important;
border-color: var(--cc-border) !important;
color: var(--cc-text) !important;
}
.skin-vector .vector-tabs .vector-tab,
.skin-vector-2022 .vector-tabs .vector-tab {
background: transparent !important;
border-color: var(--cc-border) !important;
}
.skin-vector .vector-tabs .vector-tab a,
.skin-vector-2022 .vector-tabs .vector-tab a {
color: var(--cc-text-secondary) !important;
}
.skin-vector .vector-tabs .vector-tab.vector-tab-active,
.skin-vector .vector-tabs .vector-tab.selected,
.skin-vector-2022 .vector-tabs .vector-tab.vector-tab-active {
background: var(--cc-bg-card) !important;
border-color: var(--cc-border) !important;
}
.skin-vector .vector-tabs .vector-tab.vector-tab-active a,
.skin-vector .vector-tabs .vector-tab.selected a,
.skin-vector-2022 .vector-tabs .vector-tab.vector-tab-active a {
color: var(--cc-text) !important;
}
.skin-vector .vector-tabs .vector-tab a:hover,
.skin-vector-2022 .vector-tabs .vector-tab a:hover {
color: var(--cc-link) !important;
}
/* Barra Ler / Editar / Ver histórico — dark (forçar fundo e texto) */
.skin-vector .vector-page-toolbar,
.skin-vector .vector-page-toolbar-container,
.skin-vector #p-views,
.skin-vector .mw-portlet-views,
.skin-vector .vector-dropdown .vector-menu-content,
.skin-vector-2022 .vector-page-toolbar,
.skin-vector-2022 #p-views,
.skin-vector-2022 .mw-portlet-views {
background: var(--cc-bg-elevated) !important;
border-color: var(--cc-border) !important;
color: var(--cc-text) !important;
}
.skin-vector .vector-page-toolbar a,
.skin-vector #p-views a,
.skin-vector .mw-portlet-views a,
.skin-vector .mw-portlet-views .vector-dropdown-label,
.skin-vector-2022 #p-views a,
.skin-vector-2022 .mw-portlet-views a {
color: var(--cc-link) !important;
}
.skin-vector .vector-page-toolbar a:hover,
.skin-vector #p-views a:hover,
.skin-vector-2022 #p-views a:hover {
color: var(--cc-link-hover) !important;
}
.skin-vector .vector-dropdown-label,
.skin-vector-2022 .vector-dropdown-label {
color: var(--cc-text) !important;
}
.skin-vector .vector-dropdown .vector-menu-content,
.skin-vector-2022 .vector-dropdown .vector-menu-content {
background: var(--cc-bg-card) !important;
border: 1px solid var(--cc-border) !important;
}
.skin-vector .vector-dropdown .vector-menu-content li a,
.skin-vector-2022 .vector-dropdown .vector-menu-content li a {
color: var(--cc-link) !important;
}
/* Itens da lista do dropdown (Ler, Editar, etc.) */
.skin-vector .mw-list-item a,
.skin-vector #p-views .mw-list-item a,
.skin-vector-2022 .mw-list-item a {
color: var(--cc-link) !important;
}
/* === FORÇAR TEMA ESCURO: barras Página/Discussão e Ler/Editar/Ver histórico (última tentativa) === */
body.skin-vector #mw-head,
body.skin-vector-2022 #mw-head {
background-color: var(--cc-bg) !important;
border-color: var(--cc-border) !important;
}
/* Barra do título: fundo escuro e todos os filhos com fundo transparente para o escuro aparecer */
body.skin-vector .mw-body-header,
body.skin-vector .vector-page-titlebar,
body.skin-vector .vector-page-toolbar-container,
body.skin-vector .mw-body .mw-indicators,
body.skin-vector-2022 .mw-body-header,
body.skin-vector-2022 .vector-page-titlebar,
body.skin-vector-2022 .vector-page-toolbar-container {
background-color: var(--cc-bg-elevated) !important;
border-color: var(--cc-border) !important;
color: var(--cc-text) !important;
}
/* Qualquer div/span/li dentro da barra do título: fundo transparente (sobrescreve Vector) */
body.skin-vector .mw-body-header div,
body.skin-vector .mw-body-header span,
body.skin-vector .mw-body-header li,
body.skin-vector .vector-page-titlebar div,
body.skin-vector .vector-page-titlebar span,
body.skin-vector .vector-page-titlebar li,
body.skin-vector .vector-page-toolbar-container div,
body.skin-vector .vector-page-toolbar-container span,
body.skin-vector .vector-page-toolbar-container li,
body.skin-vector-2022 .mw-body-header div,
body.skin-vector-2022 .mw-body-header span,
body.skin-vector-2022 .mw-body-header li,
body.skin-vector-2022 .vector-page-titlebar div,
body.skin-vector-2022 .vector-page-titlebar span,
body.skin-vector-2022 .vector-page-titlebar li {
background-color: transparent !important;
border-color: var(--cc-border) !important;
color: inherit !important;
}
body.skin-vector .mw-body-header .vector-tabs,
body.skin-vector .mw-body-header .vector-tab-list,
body.skin-vector .mw-body-header #p-views,
body.skin-vector .mw-body-header .mw-portlet-views,
body.skin-vector .mw-body-header .mw-portlet,
body.skin-vector .vector-page-titlebar .vector-tabs,
body.skin-vector .vector-page-titlebar #p-views,
body.skin-vector-2022 .mw-body-header .vector-tabs,
body.skin-vector-2022 .mw-body-header #p-views,
body.skin-vector-2022 .vector-page-titlebar .vector-tabs,
body.skin-vector-2022 .vector-page-titlebar #p-views {
background-color: transparent !important;
border-color: var(--cc-border) !important;
color: var(--cc-text) !important;
}
body.skin-vector .mw-body-header .vector-tab,
body.skin-vector .vector-page-titlebar .vector-tab,
body.skin-vector-2022 .mw-body-header .vector-tab,
body.skin-vector-2022 .vector-page-titlebar .vector-tab {
background-color: transparent !important;
}
body.skin-vector .mw-body-header .vector-tab-active,
body.skin-vector .mw-body-header .vector-tab.selected,
body.skin-vector .vector-page-titlebar .vector-tab-active,
body.skin-vector-2022 .mw-body-header .vector-tab-active,
body.skin-vector-2022 .vector-page-titlebar .vector-tab-active {
background-color: var(--cc-bg-card) !important;
}
/* Botão dropdown "Ler" / "Editar" (label do portlet) */
body.skin-vector .vector-dropdown-label,
body.skin-vector .mw-portlet .vector-dropdown-label,
body.skin-vector-2022 .vector-dropdown-label,
body.skin-vector-2022 .mw-portlet .vector-dropdown-label {
background-color: transparent !important;
color: var(--cc-link) !important;
border-color: var(--cc-border) !important;
}
/* Links e abas: cor de link */
body.skin-vector .mw-body-header a,
body.skin-vector .vector-page-titlebar a,
body.skin-vector .vector-tabs a,
body.skin-vector #p-views a,
body.skin-vector .vector-page-toolbar a,
body.skin-vector .mw-portlet-views a,
body.skin-vector .mw-portlet a,
body.skin-vector-2022 .mw-body-header a,
body.skin-vector-2022 .vector-page-titlebar a,
body.skin-vector-2022 .vector-tabs a,
body.skin-vector-2022 #p-views a,
body.skin-vector-2022 .vector-page-toolbar a,
body.skin-vector-2022 .mw-portlet-views a,
body.skin-vector-2022 .mw-portlet a {
color: var(--cc-link) !important;
}
body.skin-vector .mw-body-header a:hover,
body.skin-vector .vector-page-titlebar a:hover,
body.skin-vector #p-views a:hover,
body.skin-vector-2022 .mw-body-header a:hover,
body.skin-vector-2022 #p-views a:hover {
color: var(--cc-link-hover) !important;
}
body.skin-vector .vector-tabs .vector-tab-active a,
body.skin-vector .vector-tabs .selected a,
body.skin-vector-2022 .vector-tabs .vector-tab-active a {
color: var(--cc-text) !important;
}
/* Dropdown aberto (Ler / Editar / Ver histórico) */
body.skin-vector .vector-dropdown-content,
body.skin-vector .vector-menu-content,
body.skin-vector .vector-dropdown .vector-menu-content,
body.skin-vector-2022 .vector-dropdown-content,
body.skin-vector-2022 .vector-menu-content,
body.skin-vector-2022 .vector-dropdown .vector-menu-content {
background-color: var(--cc-bg-card) !important;
border: 1px solid var(--cc-border) !important;
}
body.skin-vector .vector-menu-content li a,
body.skin-vector .vector-dropdown .vector-menu-content li a,
body.skin-vector-2022 .vector-menu-content li a,
body.skin-vector-2022 .vector-dropdown .vector-menu-content li a {
color: var(--cc-link) !important;
}
/* Fallback: qualquer elemento com classe que contenha "toolbar" ou "tab" na área do body */
body.skin-vector .mw-body [class*="vector-page-toolbar"],
body.skin-vector .mw-body [class*="VectorPageToolbar"],
body.skin-vector-2022 .mw-body [class*="vector-page-toolbar"],
body.skin-vector-2022 .mw-body [class*="VectorPageToolbar"] {
background-color: transparent !important;
color: var(--cc-text) !important;
}
body.skin-vector .mw-body [class*="vector-page-toolbar"] a,
body.skin-vector-2022 .mw-body [class*="vector-page-toolbar"] a {
color: var(--cc-link) !important;
}
/* === Override por ID (Vector aplica fundo claro nos portlets — forçar escuro) === */
/* Página / Discussão — sem caixa, integrado à barra do título */
body.skin-vector #p-namespaces,
body.skin-vector #p-associated-pages,
body.skin-vector #p-namespaces div,
body.skin-vector #p-associated-pages div,
body.skin-vector #p-namespaces .mw-portlet-body,
body.skin-vector #p-associated-pages .mw-portlet-body,
body.skin-vector-2022 #p-namespaces,
body.skin-vector-2022 #p-associated-pages,
body.skin-vector-2022 #p-namespaces div,
body.skin-vector-2022 #p-associated-pages div {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
body.skin-vector #p-namespaces .vector-menu-content,
body.skin-vector #p-associated-pages .vector-menu-content,
body.skin-vector #p-namespaces .vector-menu-tabs,
body.skin-vector #p-namespaces .mw-list-item,
body.skin-vector #p-associated-pages .mw-list-item,
body.skin-vector-2022 #p-namespaces .vector-menu-content,
body.skin-vector-2022 #p-associated-pages .vector-menu-content,
body.skin-vector-2022 #p-namespaces .mw-list-item,
body.skin-vector-2022 #p-associated-pages .mw-list-item {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
body.skin-vector #p-namespaces .mw-list-item.selected,
body.skin-vector #p-associated-pages .mw-list-item.selected,
body.skin-vector-2022 #p-namespaces .mw-list-item.selected,
body.skin-vector-2022 #p-associated-pages .mw-list-item.selected {
background: var(--cc-bg-card) !important;
}
body.skin-vector #p-namespaces a,
body.skin-vector #p-associated-pages a,
body.skin-vector-2022 #p-namespaces a,
body.skin-vector-2022 #p-associated-pages a {
color: var(--cc-link) !important;
}
body.skin-vector #p-namespaces .mw-list-item.selected a,
body.skin-vector #p-associated-pages .mw-list-item.selected a,
body.skin-vector-2022 #p-namespaces .mw-list-item.selected a,
body.skin-vector-2022 #p-associated-pages .mw-list-item.selected a {
color: var(--cc-text) !important;
}
/* Ler / Editar / Ver histórico (#p-views) — sem caixa: fundo e borda integrados ao título */
body.skin-vector #p-views,
body.skin-vector #p-views .mw-portlet-body,
body.skin-vector #p-views div,
body.skin-vector #p-views .mw-portlet,
body.skin-vector-2022 #p-views,
body.skin-vector-2022 #p-views .mw-portlet-body,
body.skin-vector-2022 #p-views div,
body.skin-vector-2022 #p-views .mw-portlet {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
body.skin-vector #p-views .vector-menu-content,
body.skin-vector #p-views .vector-menu-content-list,
body.skin-vector #p-views .vector-menu-tabs,
body.skin-vector #p-views ul,
body.skin-vector #p-views li,
body.skin-vector #p-views .mw-list-item,
body.skin-vector-2022 #p-views .vector-menu-content,
body.skin-vector-2022 #p-views .vector-menu-content-list,
body.skin-vector-2022 #p-views .vector-menu-tabs,
body.skin-vector-2022 #p-views ul,
body.skin-vector-2022 #p-views li,
body.skin-vector-2022 #p-views .mw-list-item {
background: transparent !important;
border: none !important;
border-color: transparent !important;
box-shadow: none !important;
color: var(--cc-text) !important;
}
body.skin-vector #p-views li.selected,
body.skin-vector #p-views .mw-list-item.selected,
body.skin-vector #p-views #ca-view.selected,
body.skin-vector-2022 #p-views li.selected,
body.skin-vector-2022 #p-views .mw-list-item.selected,
body.skin-vector-2022 #p-views #ca-view.selected {
background: var(--cc-bg-card) !important;
color: var(--cc-text) !important;
}
body.skin-vector #p-views a,
body.skin-vector #p-views .vector-dropdown-label,
body.skin-vector-2022 #p-views a,
body.skin-vector-2022 #p-views .vector-dropdown-label {
color: var(--cc-link) !important;
}
body.skin-vector #p-views li.selected a,
body.skin-vector #p-views .mw-list-item.selected a,
body.skin-vector #p-views #ca-view.selected a,
body.skin-vector-2022 #p-views li.selected a,
body.skin-vector-2022 #p-views .mw-list-item.selected a,
body.skin-vector-2022 #p-views #ca-view.selected a {
color: var(--cc-text) !important;
}
body.skin-vector #p-views a:hover,
body.skin-vector-2022 #p-views a:hover {
color: var(--cc-link-hover) !important;
}
/* Dropdown aberto do #p-views — borda sutil do design system */
body.skin-vector #p-views .vector-dropdown-content,
body.skin-vector #p-views .vector-menu-content,
body.skin-vector-2022 #p-views .vector-dropdown-content,
body.skin-vector-2022 #p-views .vector-menu-content {
background: var(--cc-bg-card) !important;
border: 1px solid var(--cc-border) !important;
border-radius: var(--cc-radius) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}
body.skin-vector #p-views .vector-menu-content li,
body.skin-vector #p-views .vector-menu-content .mw-list-item,
body.skin-vector-2022 #p-views .vector-menu-content li,
body.skin-vector-2022 #p-views .vector-menu-content .mw-list-item {
background: transparent !important;
}
body.skin-vector #p-views .vector-menu-content li a,
body.skin-vector-2022 #p-views .vector-menu-content li a {
color: var(--cc-link) !important;
}
/* Light mode (when body or skin provides light context) */
@media (prefers-color-scheme: light) {
.skin-vector:not(.vector-feature-dark-mode-enabled) .mw-body-content,
.skin-vector:not(.vector-feature-dark-mode-enabled) #content {
--cc-bg: #f4f4f5;
--cc-bg-elevated: #fff;
--cc-bg-card: #fff;
--cc-bg-table-header: #e2e8f0;
--cc-text-on-dark: #0f172a;
--cc-border: #e4e4e7;
--cc-text: #18181b;
--cc-text-secondary: #52525b;
--cc-muted: #71717a;
--cc-link: #0369a1;
--cc-link-hover: #0284c7;
--cc-link-visited: #6d28d9;
}
body.skin-vector:not(.vector-feature-dark-mode-enabled) { background: #f4f4f5; }
.skin-vector:not(.vector-feature-dark-mode-enabled) #mw-navigation,
.skin-vector:not(.vector-feature-dark-mode-enabled) #mw-panel,
.skin-vector:not(.vector-feature-dark-mode-enabled) #mw-head,
.skin-vector:not(.vector-feature-dark-mode-enabled) #footer,
.skin-vector:not(.vector-feature-dark-mode-enabled) .catlinks,
.skin-vector:not(.vector-feature-dark-mode-enabled) .vector-header-container,
.skin-vector:not(.vector-feature-dark-mode-enabled) .vector-footer,
.skin-vector:not(.vector-feature-dark-mode-enabled) .vector-tabs .vector-tab-list,
.skin-vector:not(.vector-feature-dark-mode-enabled) .vector-page-toolbar,
.skin-vector:not(.vector-feature-dark-mode-enabled) #p-views,
.skin-vector:not(.vector-feature-dark-mode-enabled) .mw-portlet-views {
background: #fff !important;
border-color: #e4e4e7;
color: #52525b;
}
.skin-vector:not(.vector-feature-dark-mode-enabled) .vector-page-toolbar a,
.skin-vector:not(.vector-feature-dark-mode-enabled) #p-views a {
color: #0369a1 !important;
}
.skin-vector:not(.vector-feature-dark-mode-enabled) .vector-search-box input {
background: #fff !important;
color: #18181b !important;
border-color: #e4e4e7 !important;
}
.skin-vector:not(.vector-feature-dark-mode-enabled) #mw-panel a {
color: #0369a1 !important;
}
.skin-vector:not(.vector-feature-dark-mode-enabled) #footer a {
color: #0369a1 !important;
}
}
/* Base typography & parser output */
.mw-parser-output {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: var(--cc-text);
max-width: var(--cc-content-max);
margin-left: auto;
margin-right: auto;
padding: 0 var(--cc-space-4);
}
.mw-parser-output > *:first-child { margin-top: 0; }
/* Hierarquia tipográfica: escala clara e espaçamento consistente */
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3 {
font-weight: 700;
line-height: 1.25;
color: var(--cc-text);
margin-left: 0;
margin-right: 0;
}
.mw-parser-output h1 {
font-size: clamp(1.5rem, 4vw, 2rem);
margin-top: 0;
margin-bottom: var(--cc-space-3);
letter-spacing: -0.02em;
}
.mw-parser-output h2 {
font-size: 1.375rem;
margin-top: var(--cc-section-gap);
margin-bottom: var(--cc-block-gap);
padding-bottom: var(--cc-space-2);
border-bottom: 1px solid var(--cc-border);
}
.mw-parser-output h3 {
font-size: 1.125rem;
margin-top: var(--cc-space-5);
margin-bottom: var(--cc-space-2);
}
.mw-parser-output p { margin-bottom: var(--cc-space-4); }
.mw-parser-output ul, .mw-parser-output ol { margin-bottom: var(--cc-space-4); padding-left: var(--cc-space-5); }
.mw-parser-output li { margin-bottom: var(--cc-space-2); }
.mw-parser-output a { color: var(--cc-link); text-decoration: none; }
.mw-parser-output a:hover { color: var(--cc-link-hover); text-decoration: underline; }
.mw-parser-output a:visited { color: var(--cc-link-visited); }
.mw-parser-output a:focus-visible { outline: var(--cc-focus-ring); outline-offset: 2px; border-radius: var(--cc-radius-sm); }
/* Broken/missing file links (Arquivo:...) — keep readable on dark */
.mw-parser-output a.new { color: #b4b4be; }
.mw-parser-output a.new:hover { color: var(--cc-link); }
.mw-parser-output img { max-width: 100%; height: auto; }
/* Pixel-art assets: keep crisp */
.mw-parser-output .cc-card img,
.mw-parser-output .cc-gallery-thumb img,
.mw-parser-output .cc-infobox img,
.mw-parser-output .gallery img {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
/* ---- Layout: container, ritmo e hierarquia ---- */
.cc-container {
max-width: var(--cc-container-max);
margin: 0 auto;
padding: var(--cc-space-4) var(--cc-space-4);
box-sizing: border-box;
}
@media (min-width: 640px) {
.cc-container { padding: var(--cc-space-6) var(--cc-space-5); }
}
@media (min-width: 1024px) {
.cc-container { padding: var(--cc-space-8) var(--cc-space-6); }
}
.cc-hero {
text-align: center;
padding: var(--cc-space-8) var(--cc-space-4);
margin-bottom: var(--cc-space-6);
}
.cc-hero .cc-hero__title { margin-bottom: var(--cc-space-2); }
.cc-hero .cc-hero__sub { color: var(--cc-text-secondary); margin-bottom: var(--cc-space-4); }
.cc-hero .cc-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--cc-space-3); justify-content: center; align-items: center; }
.cc-hero .cc-hero__search-tip {
font-size: 0.875rem;
color: var(--cc-text-secondary);
margin-top: var(--cc-space-4);
}
.cc-hero .cc-hero__ctas a {
display: inline-block;
padding: var(--cc-space-2) var(--cc-space-4);
font-size: 1rem;
font-weight: 600;
border-radius: var(--cc-radius);
border: 1px solid var(--cc-link);
background: var(--cc-bg-elevated);
color: var(--cc-link);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.cc-hero .cc-hero__ctas a:hover {
background: var(--cc-link);
color: var(--cc-bg);
}
.cc-hero .cc-hero__ctas a:first-child {
background: var(--cc-link);
color: var(--cc-bg);
border-color: var(--cc-link);
}
.cc-hero .cc-hero__ctas a:first-child:hover {
background: var(--cc-link-hover);
color: #0f172a;
}
.cc-hero .cc-hero__ctas a:focus-visible { outline: var(--cc-focus-ring); outline-offset: 2px; }
/* ---- Page header & sections (index/detail) — hierarquia e respiro ---- */
.cc-page-header {
margin-bottom: var(--cc-space-6);
padding-bottom: var(--cc-space-4);
border-bottom: 1px solid var(--cc-border);
}
.cc-page-header h1 {
margin-top: 0;
margin-bottom: var(--cc-space-3);
}
.cc-page-lead {
font-size: 1.0625rem;
color: var(--cc-text-secondary);
line-height: 1.5;
margin: 0;
max-width: var(--cc-content-max);
}
.cc-section {
margin-bottom: var(--cc-section-gap);
padding-top: var(--cc-space-2);
}
.cc-section:first-of-type { padding-top: 0; }
.cc-section h2 {
margin-top: 0;
margin-bottom: var(--cc-space-4);
font-size: 1.25rem;
padding-bottom: var(--cc-space-2);
border-bottom: 1px solid var(--cc-border);
}
/* ---- Panels & grid (fundo card, texto legível) ---- */
.cc-panel {
background: var(--cc-bg-card);
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius);
padding: var(--cc-space-5);
margin-bottom: var(--cc-space-6);
color: var(--cc-text);
}
.cc-panel a { color: var(--cc-link); }
@media (min-width: 640px) {
.cc-panel { padding: var(--cc-space-6); }
}
.cc-grid {
display: grid;
gap: var(--cc-space-5);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
@media (min-width: 768px) {
.cc-grid { gap: var(--cc-space-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
/* ---- Cards (fundo elevated, contraste claro) ---- */
.cc-card {
display: block;
background: var(--cc-bg-elevated);
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius);
padding: var(--cc-space-4);
text-align: center;
text-decoration: none;
color: var(--cc-text);
min-height: 120px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-card:hover {
border-color: var(--cc-link);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.cc-card:focus-visible { outline: var(--cc-focus-ring); outline-offset: 2px; }
.cc-card img { display: block; margin: 0 auto var(--cc-space-2); max-height: 120px; object-fit: contain; }
.cc-card .cc-card__title { font-weight: 600; margin-bottom: var(--cc-space-1); color: var(--cc-text); }
.cc-card .cc-card__title a { color: var(--cc-link); }
.cc-muted { color: var(--cc-text-secondary); font-size: 0.875rem; }
.cc-card .cc-muted { color: var(--cc-text-secondary); }
.cc-small { font-size: 0.8125rem; color: var(--cc-text-secondary); }
.cc-divider { height: 1px; background: var(--cc-border); margin: var(--cc-space-4) 0; border: 0; }
/* ---- Badges & chips ---- */
.cc-badge {
display: inline-block;
padding: var(--cc-space-1) var(--cc-space-2);
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--cc-radius-sm);
background: var(--cc-bg-elevated);
color: var(--cc-text-secondary);
border: 1px solid var(--cc-border);
}
.cc-badge--core { background: var(--cc-info); color: #fff; border-color: transparent; }
.cc-badge--meta { background: var(--cc-accent); color: #fff; border-color: transparent; }
.cc-badge--new { background: var(--cc-warn); color: #000; border-color: transparent; }
.cc-chip {
display: inline-block;
padding: var(--cc-space-2) var(--cc-space-3);
margin: var(--cc-space-1);
font-size: 0.875rem;
border-radius: 999px;
background: var(--cc-bg-elevated);
border: 1px solid var(--cc-text-secondary);
color: var(--cc-link);
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
}
.cc-panel .cc-chip { margin: var(--cc-space-2); }
.cc-chip, .cc-chip a { color: var(--cc-link); }
.cc-chip a { text-decoration: none; }
.cc-chip:hover {
border-color: var(--cc-link);
background: var(--cc-bg-card);
}
.cc-chip:hover a { color: var(--cc-link-hover); }
.cc-chip:focus-visible { outline: var(--cc-focus-ring); outline-offset: 2px; }
/* ---- Callouts (fundo elevated, texto legível) ---- */
.cc-callout {
padding: var(--cc-space-4);
border-radius: var(--cc-radius);
border-left: 3px solid var(--cc-info);
background: var(--cc-bg-elevated);
margin-bottom: var(--cc-space-4);
color: var(--cc-text);
}
.cc-callout--tip { border-left-color: rgba(34, 197, 94, 0.55); }
.cc-callout--warn { border-left-color: var(--cc-warn); }
.cc-callout__title { font-weight: 600; margin-bottom: var(--cc-space-2); color: var(--cc-text); }
.cc-callout p, .cc-callout ul { color: var(--cc-text); }
/* ---- Ad slots (placeholders, CLS-safe) ---- */
.cc-ad-slot {
min-height: var(--cc-ad-min-height-mobile);
background: var(--cc-bg-elevated);
border: 1px dashed var(--cc-border);
border-radius: var(--cc-radius);
display: flex;
align-items: center;
justify-content: center;
color: var(--cc-muted);
font-size: 0.875rem;
margin: var(--cc-space-6) 0;
}
.cc-ad-slot .cc-ad-slot__placeholder { color: var(--cc-muted); }
.cc-ad-slot--mid { min-height: var(--cc-ad-min-height-tablet); }
.cc-ad-slot--footer { min-height: var(--cc-ad-min-height-mobile); }
@media (min-width: 768px) {
.cc-ad-slot { min-height: var(--cc-ad-min-height-tablet); }
.cc-ad-slot--footer { min-height: var(--cc-ad-min-height-desktop); }
}
@media (min-width: 1024px) {
.cc-ad-slot { min-height: var(--cc-ad-min-height-desktop); }
}
/* Hide placeholder text when ad script injects content (optional, for production) */
.cc-ad-slot.cc-ad-slot--filled .cc-ad-slot__placeholder { display: none; }
/* ---- Wiki tables (mobile-first: scroll horizontal em telas pequenas) ---- */
.wikitable, .mw-parser-output .wikitable {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
margin: var(--cc-space-4) 0;
background: var(--cc-bg-card);
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius);
overflow: hidden;
}
/* Células: fundo card, texto sempre legível */
.wikitable td, .mw-parser-output .wikitable td {
padding: var(--cc-space-2) var(--cc-space-3);
border: 1px solid var(--cc-border);
text-align: left;
background: var(--cc-bg-card);
color: var(--cc-text) !important;
}
.wikitable td a, .mw-parser-output .wikitable td a {
color: var(--cc-link) !important;
}
.wikitable td a:hover, .mw-parser-output .wikitable td a:hover {
color: var(--cc-link-hover) !important;
}
/* Header da tabela: fundo mais escuro e texto alto contraste (títulos de coluna legíveis) */
.wikitable th, .wikitable thead th, .mw-parser-output .wikitable th, .mw-parser-output .wikitable thead th {
padding: var(--cc-space-2) var(--cc-space-3);
border: 1px solid var(--cc-border);
text-align: left;
background: var(--cc-bg-table-header) !important;
color: var(--cc-text-on-dark) !important;
font-weight: 600;
}
.wikitable th a, .mw-parser-output .wikitable th a {
color: var(--cc-link) !important;
}
.wikitable th a:hover, .mw-parser-output .wikitable th a:hover {
color: var(--cc-link-hover) !important;
}
.wikitable tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
@media (prefers-color-scheme: light) {
.skin-vector:not(.vector-feature-dark-mode-enabled) .wikitable tr:nth-child(even) td { background: rgba(0,0,0,0.03); }
}
.wikitable tbody tr:hover td { background: rgba(125, 211, 252, 0.08); }
.wikitable .cc-num { text-align: right; }
.cc-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: var(--cc-space-4) 0;
}
@media (min-width: 640px) {
.cc-table-wrap { margin: var(--cc-space-5) 0; }
}
.cc-table-wrap .wikitable { margin: 0; min-width: 280px; }
@media (min-width: 640px) {
.cc-table-wrap .wikitable { min-width: 480px; }
}
@media (min-width: 768px) {
.wikitable th, .wikitable thead th { position: sticky; top: 0; z-index: 1; }
}
/* ---- Infobox (templates) — contraste th/td ---- */
.cc-infobox,
.mw-parser-output .wikitable.cc-infobox {
width: 100%;
max-width: 100%;
border-collapse: collapse;
background: var(--cc-bg-card);
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius);
overflow: hidden;
margin: 0 0 var(--cc-space-4) 0;
color: var(--cc-text);
}
.cc-infobox th, .cc-infobox td,
.mw-parser-output .wikitable.cc-infobox th, .mw-parser-output .wikitable.cc-infobox td {
padding: var(--cc-space-2) var(--cc-space-3);
border: 1px solid var(--cc-border);
color: var(--cc-text) !important;
}
.cc-infobox th, .mw-parser-output .wikitable.cc-infobox th {
width: 40%;
font-weight: 600;
background: var(--cc-bg-table-header) !important;
color: var(--cc-text-on-dark) !important;
}
.cc-infobox td a, .mw-parser-output .wikitable.cc-infobox td a { color: var(--cc-link) !important; }
.cc-infobox img { display: block; margin: 0 auto; }
.mw-parser-output .cc-infobox + * { margin-top: var(--cc-space-4); }
/* Mobile: infobox full width; tablet+ sidebar width */
@media (min-width: 768px) {
.cc-infobox, .mw-parser-output .wikitable.cc-infobox { max-width: 280px; }
}
/* ---- Gallery: grid normalizado (largura igual + espaçamento fixo 1.25rem) ---- */
/* List-based gallery (mode=packed): ul > li.gallerybox */
.mw-parser-output ul.gallery,
.mw-parser-output .gallery.mw-gallery-traditional,
.mw-parser-output .gallery {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
gap: 1.25rem !important;
margin: var(--cc-space-6) 0 !important;
list-style: none !important;
padding: 0 !important;
max-width: 100%;
box-sizing: border-box;
}
/* Table-based gallery (fallback): table.gallery > tr > td */
.mw-parser-output table.gallery {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
gap: 1.25rem !important;
margin: var(--cc-space-6) 0 !important;
border: none !important;
background: transparent !important;
box-sizing: border-box;
}
.mw-parser-output table.gallery tbody,
.mw-parser-output table.gallery tr {
display: contents !important;
}
.mw-parser-output table.gallery td.gallerybox {
display: block !important;
width: 100% !important;
min-width: 0 !important;
border: none !important;
vertical-align: top !important;
box-sizing: border-box !important;
}
/* Cada item = card com largura normalizada (preenche a célula do grid) */
.gallery .gallerybox,
.mw-parser-output .gallery .gallerybox {
margin: 0 !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
background: var(--cc-bg-card);
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius);
padding: var(--cc-space-4);
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
display: flex !important;
flex-direction: column;
align-items: center;
min-height: 0;
box-sizing: border-box;
overflow: hidden;
}
.gallery .gallerybox:hover,
.mw-parser-output .gallery .gallerybox:hover {
border-color: var(--cc-link);
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.gallery .gallerybox .thumb,
.mw-parser-output .gallery .gallerybox .thumb {
background: transparent !important;
border: none !important;
margin: 0 auto var(--cc-space-3) !important;
padding: 0 !important;
width: 100%;
min-width: 0;
}
.gallery .gallerybox img,
.mw-parser-output .gallery .gallerybox img {
max-height: 140px;
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
margin: 0 auto;
}
/* Legenda: contraste alto (--cc-text), link em hover */
.gallery .gallerycaption,
.gallery .gallerybox .gallerytext,
.mw-parser-output .gallery .gallerycaption,
.mw-parser-output .gallery .gallerybox .gallerytext {
font-size: 0.875rem;
font-weight: 600;
color: var(--cc-text) !important;
margin-top: 0;
margin-bottom: 0;
line-height: 1.35;
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.gallery .gallerycaption a,
.gallery .gallerybox a,
.mw-parser-output .gallery .gallerybox a {
color: var(--cc-text) !important;
text-decoration: none;
}
.gallery .gallerycaption a:hover,
.gallery .gallerybox a:hover {
color: var(--cc-link-hover) !important;
text-decoration: underline;
}
@media (min-width: 640px) {
.mw-parser-output ul.gallery,
.mw-parser-output .gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem !important; }
.mw-parser-output table.gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem !important; }
}
@media (min-width: 1024px) {
.mw-parser-output ul.gallery,
.mw-parser-output .gallery { grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); gap: 1.25rem !important; }
.mw-parser-output table.gallery { grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); gap: 1.25rem !important; }
}
/* Padrão reutilizável: card de asset (monstro, evolução, etc.) */
.cc-asset-card {
display: block;
background: var(--cc-bg-card);
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius);
padding: var(--cc-space-4);
text-align: center;
text-decoration: none;
color: var(--cc-text);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-asset-card:hover {
border-color: var(--cc-link);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.cc-asset-card img { max-height: 140px; object-fit: contain; }
.cc-asset-card .cc-asset-card__title { font-weight: 600; color: var(--cc-link); }
/* ---- TOC (Índice) — integrado ao design system (sem caixa destacada) ---- */
.toc, #toc, .vector-toc {
background: var(--cc-bg);
border: none;
border-left: 3px solid var(--cc-border);
border-radius: 0 var(--cc-radius) var(--cc-radius) 0;
padding: var(--cc-space-4);
margin: var(--cc-space-4) 0;
font-size: 0.9375rem;
color: var(--cc-text);
}
.toc title, #toc .toctitle, .vector-toc .toctitle,
.toc .toctitle span, #toc .toctitle span {
color: var(--cc-text);
font-weight: 700;
margin-bottom: var(--cc-space-2);
}
.toc .toctitle a, #toc .toctitle a {
color: var(--cc-link);
}
.toc ul { list-style: none; padding-left: var(--cc-space-4); margin: 0; }
.toc li { margin: var(--cc-space-1) 0; }
.toc a, #toc a, .vector-toc a {
color: var(--cc-link);
}
.toc a:hover, #toc a:hover { color: var(--cc-link-hover); }
.toc a:focus-visible, #toc a:focus-visible { outline: var(--cc-focus-ring); outline-offset: 2px; }
.toc .tocnumber, #toc .tocnumber {
margin-right: var(--cc-space-2);
color: var(--cc-text-secondary);
}
.toc a.cc-toc-active, #toc a.cc-toc-active { font-weight: 600; color: var(--cc-text-on-dark); }
.cc-toc-toggle { min-height: 44px; }
/* Sticky TOC on large screens (optional, can be toggled by JS) */
@media (min-width: 1024px) {
.toc.sticky, #toc.sticky { position: sticky; top: var(--cc-space-4); }
}
/* ---- Breadcrumb / back link ---- */
.cc-breadcrumb { font-size: 0.875rem; color: var(--cc-muted); margin-bottom: var(--cc-space-4); }
.cc-breadcrumb a { color: var(--cc-link); }
.cc-back-link { display: inline-block; margin-bottom: var(--cc-space-4); color: var(--cc-link); }
.cc-back-link:hover { color: var(--cc-link-hover); }
/* ---- Buttons (for CTAs in hero) ---- */
.cc-btn {
display: inline-block;
padding: var(--cc-space-2) var(--cc-space-4);
font-size: 1rem;
font-weight: 600;
border-radius: var(--cc-radius);
border: 1px solid var(--cc-link);
background: transparent;
color: var(--cc-link);
text-decoration: none;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.cc-btn:hover { background: var(--cc-link); color: var(--cc-bg); }
.cc-btn:focus-visible { outline: var(--cc-focus-ring); outline-offset: 2px; }
.cc-btn--primary { background: var(--cc-link); color: var(--cc-bg); }
.cc-btn--primary:hover { background: var(--cc-link-hover); color: #000; }
/* ---- Strategy hub cards ---- */
.cc-strategy-grid { display: grid; gap: var(--cc-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cc-strategy-card {
display: block;
padding: var(--cc-space-4);
background: var(--cc-bg-elevated);
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius);
text-decoration: none;
color: var(--cc-text);
transition: border-color 0.15s;
}
.cc-strategy-card:hover { border-color: var(--cc-link); }
.cc-strategy-card .cc-strategy-card__tag { font-size: 0.75rem; color: var(--cc-text-secondary); margin-bottom: var(--cc-space-1); }
.cc-strategy-card .cc-strategy-card__title { font-weight: 600; }
/* Section edit links (editar) — part of normal wiki UI, high contrast */
.mw-parser-output .mw-editsection a,
.mw-parser-output .mw-editsection span {
color: #bae6fd;
font-size: 0.8125rem;
font-weight: 500;
}
.mw-parser-output .mw-editsection a:hover { color: #e0f2fe; }
/* ---- kbd (if used) ---- */
.cc-kbd {
padding: 2px 6px;
font-size: 0.8125rem;
font-family: inherit;
background: var(--cc-bg-elevated);
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius-sm);
}
/* ---- Responsive: single column on small ---- */
@media (max-width: 430px) {
.cc-grid { grid-template-columns: 1fr; }
.cc-hero .cc-hero__ctas { flex-direction: column; }
.cc-card { min-height: 100px; }
}
@media (min-width: 1920px) {
.mw-parser-output { max-width: var(--cc-content-max); }
}
/* Bestiary gallery centering */
.gallery { margin: 0 auto; }
.gallery .gallerybox { text-align: center; margin: 0 auto; }
.gallery .thumb { margin: 0 auto !important; float: none !important; display: block; }
.gallery .gallerytext { text-align: center; }
/* Center hero images in pages */
.cc-container .image > img { display: block; margin: 0 auto; }
.cc-container .thumb { margin: 0 auto; float: none; }
/* Site footer */
.cc-site-footer {
margin-top: var(--cc-space-6);
padding: var(--cc-space-4) var(--cc-space-4);
border-top: 1px solid var(--cc-border);
color: var(--cc-text-secondary);
font-size: 0.95rem;
}
.cc-site-footer a { color: var(--cc-text); text-decoration: none; }
.cc-site-footer a:hover { text-decoration: underline; }
/* Logo */
.mw-logo-icon { content: url("/wiki/Special:FilePath/Logo_crabcodex.png") !important; }
.mw-logo-wordmark { display: none !important; }
.mw-logo { background-image: url("/wiki/Special:FilePath/Logo_crabcodex.png") !important; background-size: contain; background-repeat: no-repeat; }
/* Gallery centering */
.gallery { display:flex; flex-wrap:wrap; justify-content:center; }
.gallery .gallerybox { margin: 8px; float: none !important; display: inline-block !important; }
/* Uniform card/gallery images (pixel art) */
.cc-card img,
.gallery img,
.cc-gallery-wrapper img {
width: 120px !important;
height: 120px !important;
object-fit: contain;
image-rendering: pixelated;
}
.gallerybox img { image-rendering: pixelated; }
.mw-logo-wordmark { display: none !important; }
.mw-file-element { width:auto !important; height:auto !important; max-width:240px; }
.mw-logo-icon { content: url("/wiki/Special:FilePath/Logo_crabcodex.png") !important; }
.mw-logo-wordmark { display:none !important; }