MediaWiki:Timeless.css

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
• Opera: Pressione Ctrl-F5.

/* ===== Synthwave Timeless ===== */

/* ===== Fontes locais ===== */

/* Fonte do corpo: Space Grotesk */
@font-face {
    font-family: "RRBody";
    src: url("/retrorunner/wiki/fonts/SpaceGrotesk-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "RRBody";
    src: url("/retrorunner/wiki/fonts/SpaceGrotesk-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Fonte dos títulos: Orbitron */
@font-face {
    font-family: "RRTitles";
    src: url("/retrorunner/wiki/fonts/Orbitron-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "RRTitles";
    src: url("/retrorunner/wiki/fonts/Orbitron-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Corpo do texto */
body.skin-timeless {
    font-family: "RRBody", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Título da página, títulos das seções e logo da wiki */
body.skin-timeless #firstHeading,
body.skin-timeless .mw-headline,
body.skin-timeless #p-logo-text a {
    font-family: "RRTitles", "RRBody", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Abas "Página / Discussão" */
body.skin-timeless #p-namespaces .mw-portlet-body a {
    font-family: "RRTitles", "RRBody", Arial, sans-serif;
}


/* Fundo geral da página */
html, body {
    background:
        radial-gradient(circle at top, #3f00ff55 0, transparent 60%),
        radial-gradient(circle at bottom, #ff00aa55 0, transparent 60%),
        #050014;
    color: #f5ecff;
}

/* Área de conteúdo principal */
#mw-content, 
.mw-body,
#content {
    background: rgba(5, 0, 25, 0.96);
    border: 1px solid #402272;
    box-shadow: 0 0 25px #ff00aa44;
}

/* Cabeçalho do Timeless */
#mw-header,
#mw-header-container {
    background: linear-gradient(90deg, #1a0033, #330055, #1a0033);
    border-bottom: 1px solid #ff6ad5;
}

/* Barra lateral / menus */
#mw-site-navigation,
#mw-related-navigation,
.mw-portlet {
    background: rgba(10, 0, 40, 0.95);
    border: 1px solid #402272;
}

/* Títulos das portlets (menus) */
.mw-portlet h3,
#p-logo-text a {
    color: #ff6ad5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Links normais */
a {
    color: #2de2e6;
}

a:visited {
    color: #c77dff;
}

a:hover,
a:focus {
    color: #f9f871;
    text-shadow: 0 0 6px #f9f871;
}

/* Links da aba superior (ler / editar / histórico) */
#ca-view a,
#ca-edit a,
#ca-history a,
#ca-talk a {
    background: transparent;
    border-bottom: 2px solid transparent;
}

#ca-view a:hover,
#ca-edit a:hover,
#ca-history a:hover,
#ca-talk a:hover {
    border-bottom-color: #ff6ad5;
}

/* Botões */
.mw-ui-button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background: linear-gradient(135deg, #ff6ad5, #6c2aff);
    border: 1px solid #f9f871;
    color: #050014;
    font-weight: 600;
}

.mw-ui-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 12px #2de2e6;
}

/* Caixas de mensagem (sucesso / aviso / erro) */
.mw-message-box {
    border-radius: 4px;
    border-width: 1px;
}

.mw-message-box-success {
    background: rgba(15, 60, 30, 0.9);
    border-color: #2de2a2;
}

.mw-message-box-warning {
    background: rgba(60, 40, 10, 0.9);
    border-color: #f9f871;
}

.mw-message-box-error {
    background: rgba(70, 10, 25, 0.9);
    border-color: #ff6ad5;
}

/* Tabelas padrão */
table,
.wikitable {
    background: rgba(10, 0, 40, 0.9);
    border: 1px solid #402272;
}

.wikitable th {
    background: linear-gradient(135deg, #330055, #6c2aff);
    color: #f5ecff;
}

/* Rodapé */
#mw-footer {
    background: rgba(5, 0, 20, 0.95);
    border-top: 1px solid #402272;
}

/* Containers grandes que ainda têm fundo claro */
#mw-wrapper,
#mw-content-container,
#mw-footer-container,
#mw-content-block,
.ts-container,
.ts-inner {
    background: transparent !important;
}


/* Bloco central + colunas laterais apoiados no fundo neon */
#mw-content-block {
    background: rgba(5, 0, 25, 0.96) !important;
    border: 1px solid #402272;
    box-shadow: 0 0 25px #ff00aa44;
}

/* Área “estranha” logo acima do rodapé */
#mw-data,
#content-bottom-stuff {
    background: rgba(5, 0, 25, 0.96) !important;
    border-top: 1px solid #402272;
}

/* Rodapé 100% dark */
#mw-footer {
    background: rgba(5, 0, 20, 0.95) !important;
}

/* Moldura geral dos blocos de navegação (esquerda e direita) */
body.skin-timeless #mw-site-navigation .sidebar-chunk,
body.skin-timeless #mw-related-navigation .sidebar-chunk {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* bloco "NAVEGAÇÃO" continua com fundo escuro */
#p-navigation,
#p-navigation .body {
    background: rgba(10, 0, 40, 0.96) !important;
}

/* Textarea principal de edição de páginas */
#wpTextbox1,
.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif {
    background: rgba(5, 0, 25, 0.96) !important;
    color: #f5ecff !important;
    border: 1px solid #402272 !important;
}

/* Opções de edição embaixo da caixa (sumário, checkboxes etc.) */
#editform,
.mw-editform,
.mw-editform .editOptions {
    background: rgba(5, 0, 25, 0.96) !important;
    color: #f5ecff !important;
    border-top: 1px solid #402272;
}

/* Qualquer textarea e campo de texto em geral */
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
select {
    background: rgba(10, 0, 40, 0.96) !important;
    color: #f5ecff !important;
    border: 1px solid #402272 !important;
}

/* Texto de placeholder mais suave */
textarea::placeholder,
input::placeholder {
    color: #c77dff !important;
}

/* Header com gradiente sólido */
body.skin-timeless #mw-header,
body.skin-timeless #mw-header-container {
    background: linear-gradient(90deg, #1a0033, #330055, #1a0033) !important;
}

/* Caixa e botão de busca em dark + ícone roxo */
#p-search,
#searchform,
#simpleSearch {
    background: rgba(10, 0, 40, 0.96) !important;
    border: 1px solid #402272 !important;
}

/* some o ícone padrão (svg/background) */
#p-search .mw-ui-icon,
#p-search .oo-ui-iconElement-icon,
#p-search .searchButton {
    background: none !important;
}

/* coloca ícone unicode roxo */
#p-search .mw-ui-icon::before,
#p-search .oo-ui-iconElement-icon::before,
#p-search .searchButton::before {
    content: "🔍";
    display: inline-block;
    font-size: 16px;
    color: #ff6ad5;
    line-height: 1;
    text-align: center;
}

/* Texto do input de busca */
#simpleSearch input,
#p-search input {
    background: transparent !important;
    border: none !important;
    color: #f5ecff !important;
}

#simpleSearch input::placeholder,
#p-search input::placeholder {
    color: #ff6ad5 !important;
}

/* Nome de usuário roxo na barra superior */
body.skin-timeless #p-personal,
body.skin-timeless #p-personal a,
body.skin-timeless #user-tools,
body.skin-timeless #user-tools a,
body.skin-timeless #pt-userpage a {
    color: #ff6ad5 !important;
}

/* Índice das páginas (TOC) em modo synthwave */
#toc,
.toc {
    background: rgba(10, 0, 40, 0.96) !important;
    border: 1px solid #402272 !important;
    color: #f5ecff !important;
}

#toc a,
.toc a {
    color: #2de2e6 !important;
}

#toc a:hover,
.toc a:hover {
    color: #f9f871 !important;
}

/* ===== Dropdown do usuário (Retrorunner) em dark ===== */

/* Caixa branca do menu */
body.skin-timeless #personal .dropdown,
body.skin-timeless #personal .dropdown ul {
    background: #000000 !important;          /* preto pra sumir o branco */
    border: 1px solid #402272 !important;    /* borda roxo-escuro, na sua paleta */
    box-shadow: 0 0 15px #ff00aa55;
}

/* Título "AUTENTICADO COMO..." dentro do balão */
body.skin-timeless #personal .dropdown h3 {
    background: transparent !important;
    color: #ff6ad5 !important;
}

/* Triângulo (a setinha do balão) que também herda o branco */
body.skin-timeless #personal .dropdown::before {
    background: #000000 !important;
    border-color: #000000 transparent transparent transparent !important;
}

/* ===== Tabs "Página / Discussão" e links para a própria página ===== */

/* Texto dentro das abas de namespace (Página, Discussão etc.) */
body.skin-timeless #p-namespaces .mw-portlet-body a,
body.skin-timeless #p-namespaces .mw-portlet-body .mw-selflink,
body.skin-timeless #p-namespaces .selected a,
body.skin-timeless #p-namespaces .selected .mw-selflink {
    color: #f5ecff !important;   /* mesmo branco-azulado do resto do tema */
}

/* Qualquer link para a própria página */
body.skin-timeless .mw-selflink,
body.skin-timeless .mw-selflink:visited {
    color: #f5ecff !important;
}

/* ===== Ajuste do retângulo do logo RETRORUNNER WIKI ===== */

/* Centraliza o texto dentro do retângulo */
body.skin-timeless #p-logo-text {
    display: flex;
    align-items: center;          /* centraliza na vertical */
    justify-content: center;      /* centraliza na horizontal */
    padding: 0 6px;
    box-sizing: border-box;
    overflow: hidden;             /* evita qualquer vazamento pra fora */
}

/* Tamanho e espaçamento do texto do logo */
body.skin-timeless #p-logo-text a {
    display: block;
    text-align: center;
    font-size: 19px;              /* aumenta/diminui o tamanho da fonte do logo */
    line-height: 1.0;
}

/* Levanta o texto RETRORUNNER WIKI alguns pixels */
body.skin-timeless #p-logo-text a {
    position: relative;
    top: -3px; */
}

/* Logo sem a caixa de portlet */
body.skin-timeless #p-logo.mw-portlet,
body.skin-timeless #p-logo-text {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hero da página inicial da Retrorunner Wiki */
.rr-hero {
    text-align: center;
    padding: 18px 10px 10px;
}

.rr-hero-title {
    font-family: "RRTitles", "RRBody";
    font-size: 28px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ff6ad5;
}

.rr-hero-subtitle {
    margin-top: 4px;
    font-size: 14px;
    color: #f5ecff;
    opacity: 0.9;
}

/* Grade da página inicial */
.rr-main-grid .rr-main-col {
    vertical-align: top;
}

/* Fonte padrão do texto da wiki */
body.skin-timeless,
body.skin-timeless #mw-content,
body.skin-timeless .mw-body,
body.skin-timeless #content,
body.skin-timeless .mw-parser-output {
    font-family: "RRBody", "Space Grotesk", system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}