/* ======================================================
ANBOKS-819 GLITCH THEME (PANSEXUAL REMOVED EDITION)
====================================================== */
:root {
--theme-base: "black-highlighter";
--theme-id: "anboks-glitch";
--theme-name: "Anboks-819";
--
--logo-image: url("https://backrooms-wiki.wikidot.com/local--files/theme:uec/EUC%20%282%29.png");
--header-title: "Anboks-819";
--header-subtitle: "Joining Trouble to Rumbling";
--background-blue: 18, 42, 98;
--glitch-green: 90, 255, 90;
--accent-orange-light: 255, 180, 90;
--accent-orange-strong: 255, 120, 0;
}
/* ======================================================
FUNDO DIGITAL (AZUL)
====================================================== */
body {
background: linear-gradient(
180deg,
rgba(var(--background-blue), 1),
rgba(var(--background-blue), .88)
) !important;
animation: bgNoisePulse 1.6s infinite linear;
}
@keyframes bgNoisePulse {
0% { filter: brightness(100%); }
50% { filter: brightness(110%); }
100% { filter: brightness(100%); }
}
/* ======================================================
BANNER LARANJA
====================================================== */
#header {
background: linear-gradient(
90deg,
rgba(var(--accent-orange-light), 1),
rgba(var(--accent-orange-strong), 1)
) !important;
animation: bannerGlitch 0.12s infinite steps(2);
}
@keyframes bannerGlitch {
0% { transform: translateX(0); }
50% { transform: translateX(-2px); }
100% { transform: translateX(0); }
}
/* ======================================================
TÍTULO — PISCANDO / GLITCHING
====================================================== */
#header h1, #header h1 a {
color: white !important;
text-shadow: 0 0 6px white;
animation: titleGlitch 0.11s infinite;
}
@keyframes titleGlitch {
0% { opacity: 1; transform: translateX(0); }
40% { opacity: .75; transform: translateX(-1px); }
70% { opacity: .95; transform: translateX(1px); }
100% { opacity: 1; transform: translateX(0); }
}
/* ======================================================
SUBTÍTULO — GLITCH SUAVE
====================================================== */
#header h2 {
color: #e8e8e8 !important;
opacity: .85;
text-shadow: 0 0 4px #fff;
animation: subtitleGlitch 0.18s infinite;
}
@keyframes subtitleGlitch {
0% { opacity: .85; }
50% { opacity: .55; }
100% { opacity: .85; }
}
/* ======================================================
HEADERS VERDE–GLITCH
====================================================== */
h1, h2, h3, h4, h5, h6 {
color: rgb(var(--glitch-green)) !important;
text-shadow: 0 0 6px rgba(var(--glitch-green), 0.85);
animation: headerGlitch 0.11s infinite;
}
@keyframes headerGlitch {
0% { transform: skewX(0deg); opacity: 1; }
50% { transform: skewX(1.5deg); opacity: .87; }
100% { transform: skewX(0deg); opacity: 1; }
}
/* ======================================================
ANIMAÇÃO DE MONTAGEM DIGITAL (LEGO EFFECT)
====================================================== */
* {
animation: assemble 0.6s ease-out;
}
@keyframes assemble {
0% { transform: translateY(35px) scale(.94); opacity: 0; }
60% { transform: translateY(-4px) scale(1.01); opacity: .85; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* ======================================================
LINKS COM FLASH DIGITAL
====================================================== */
a {
animation: linkFlash 1.5s infinite;
}
@keyframes linkFlash {
0% { text-shadow: 0 0 0px transparent; }
50% { text-shadow: 0 0 6px white; }
100% { text-shadow: 0 0 0px transparent; }
}
/* ======================================================
EFEITO DE CARREGAMENTO (GLOBAIS COM GLITCH SUAVE)
====================================================== */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: rgba(255,255,255,0.03);
animation: globalGlitch 0.2s infinite steps(3);
z-index: 999999;
}
@keyframes globalGlitch {
0% { opacity: .03; transform: translateX(0); }
50% { opacity: .06; transform: translateX(-1px); }
100% { opacity: .03; transform: translateX(0); }
}
/* ======================================================
CARREGAMENTO EM LINKS / BOTÕES / ITEMS
====================================================== */
a,
button,
input[type=button],
input[type=submit],
.wikidot-button {
position: relative;
text-decoration: none !important;
}
a::after,
button::after,
input[type=button]::after,
input[type=submit]::after,
.wikidot-button::after {
content: "";
position: absolute;
left: 0; bottom: -3px;
width: 0%;
height: 2px;
background: rgb(var(--glitch-green));
box-shadow: 0 0 6px rgba(var(--glitch-green), .8);
transition: width .28s ease-out;
}
a:hover::after,
button:hover::after,
input[type=button]:hover::after,
input[type=submit]:hover::after,
.wikidot-button:hover::after {
width: 100%;
}
/* ======================================================
🔥 ADD-ON 1: ARQUIVOS QUE AMPLIAM +100PX NO HOVER
====================================================== */
a[href$=".png"] img,
a[href$=".jpg"] img,
a[href$=".jpeg"] img,
a[href$=".gif"] img,
a[href$=".bmp"] img,
a[href$=".webp"] img,
a[href$=".svg"] img,
a[href$=".mp4"],
a[href$=".webm"],
a[href$=".mp3"],
a[href$=".wav"] {
transition: transform .25s ease-out !important;
}
a[href$=".png"]:hover img,
a[href$=".jpg"]:hover img,
a[href$=".jpeg"]:hover img,
a[href$=".gif"]:hover img,
a[href$=".bmp"]:hover img,
a[href$=".webp"]:hover img,
a[href$=".svg"]:hover img,
a[href$=".mp4"]:hover,
a[href$=".webm"]:hover,
a[href$=".mp3"]:hover,
a[href$=".wav"]:hover {
transform: scale(1.25) !important;
}
/* ======================================================
🔥 ADD-ON 2: AVISOS WIKIDOT — AZUL + AMARELO
====================================================== */
.yui-info,
.yui-warning,
.yui-error,
.yui-success,
#system-message,
.rate-box,
div.notify {
background: #002f7a !important;
border: 4px solid #ffdf4e !important;
color: #fef9d3 !important;
padding: 14px 18px !important;
border-radius: 10px !important;
box-shadow: 0 0 15px #ffe86b;
animation: pulseWarn 2.4s infinite ease-in-out;
}
@keyframes pulseWarn {
0% { box-shadow: 0 0 10px #ffe86b; }
50% { box-shadow: 0 0 23px #fff8a8; }
100% { box-shadow: 0 0 10px #ffe86b; }
}
.yui-info:before { content: "ℹ️ "; }
.yui-warning:before { content: "⚠️ "; }
.yui-error:before { content: "❌ "; }
.yui-success:before { content: "✔️ "; }
/* NAVBOX / PAGE OPTIONS */
.page-options, .navbox {
background-color: #2e7d32 !important; /* verde */
border: 2px solid #3f51b5 !important; /* azul */
border-radius: 5px;
/* Remove o logo original */
#header h1 a img,
.site-logo img,
.logo img {
display: none !important;
}
/* Adiciona seu novo logo */
#header h1 a,
.site-logo,
.logo {
display: block;
width: 250px; /* ajuste o tamanho */
height: 250px; /* ajuste o tamanho */
background-image: url("https://backrooms-wiki.wikidot.com/local--files/theme:uec/EUC%20%282%29.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
/* Links das abas */
.page-options a, .navbox a {
color: white !important;
text-decoration: none;
position: relative;
}
/* Efeito hover: barra inferior animada */
.page-options a::after, .navbox a::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
height: 2px;
width: 0%;
background-color: #90ee90; /* verde brilhante */
transition: width 0.3s ease-out;
}
/* barras */
#top-bar ul li a {
background: #1e5aff !important; /* azul padrão */
border-bottom: 3px solid #24d64a !important; /* borda verde */
color: #e9f1ff !important;
}
#top-bar ul li:hover > a {
background: #3b73ff !important; /* azul mais claro */
border-bottom-color: #ff9d23 !important; /* borda laranja */
color: white !important;
}
/* dropdown */
#top-bar ul li ul {
background: #1e5aff !important; /* azul igual */
}
#top-bar ul li ul li a {
background: #1e5aff !important; /* azul padrão */
border-bottom: 1px solid #24d64a !important; /* verde */
}
#top-bar ul li ul li a:hover {
background: #3b73ff !important; /* hover azul claro */
}
.page-options a:hover::after, .navbox a:hover::after {
width: 100%;
}
/* Barra de conta laranja */
#account-options {
background: #D2691E !important; /* laranja */
border-bottom: 3px solid #8B4513 !important; /* laranja escuro/marrom */
}
#account-options a {
color: white !important;
font-weight: bold;
}
#account-options a:hover {
color: #fff8d6 !important;
text-shadow: 0 0 4px #fff1a5;
}
/* ===========================================
SEARCH BAR — HOVER ROXO
=========================================== */
/* Campo de texto da barra de busca */
#search-top-box-input {
border: 2px solid #444 !important;
background: #fff !important;
color: #000 !important;
transition: border-color .25s ease, box-shadow .25s ease;
}
/* Hover do campo — roxo */
#search-top-box-input:hover,
#search-top-box-input:focus {
border-color: #7b2cff !important;
box-shadow: 0 0 6px #b78aff !important;
}
/* Botão da busca */
#search-top-box-form input[type="submit"] {
background: #ddd !important;
color: black !important;
border: 2px solid #444 !important;
padding: 4px 10px !important;
transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Hover do botão — roxo */
#search-top-box-form input[type="submit"]:hover {
background: #7b2cff !important;
border-color: #b78aff !important;
color: white !important;
box-shadow: 0 0 6px #b78aff !important;
}
/* ===========================================
SEARCH BAR — HOVER BRANCO
=========================================== */
/* Campo de texto da barra de busca */
#search-top-box-input {
border: 2px solid #444 !important;
background: #fff !important;
color: #000 !important;
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
/* Hover / foco — agora branco total */
#search-top-box-input:hover,
#search-top-box-input:focus {
background: #ffffff !important;
border-color: #ffffff !important;
box-shadow: 0 0 6px #ffffff !important;
color: #000 !important;
}
/* Botão da busca (continua roxo no hover) */
#search-top-box-form input[type="submit"] {
background: #ddd !important;
color: black !important;
border: 2px solid #444 !important;
padding: 4px 10px !important;
transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Hover do botão — roxo */
#search-top-box-form input[type="submit"]:hover {
background: #7b2cff !important;
border-color: #b78aff !important;
color: white !important;
box-shadow: 0 0 6px #b78aff !important;
}
/* ===========================================
PAGE OPTIONS BAR — Verde
=========================================== */
/* Caixa que contém as opções */
.page-options,
.page-options-bottom {
background: #0f3b0f !important; /* verde escuro */
border: 2px solid #3cff3c !important;
padding: 4px;
border-radius: 4px;
}
/* Cada botão */
.page-options a,
.page-options-bottom a {
background: #145d14 !important; /* verde médio */
color: #eaffea !important; /* verde bem claro */
border: 1px solid #3cff3c !important;
padding: 4px 12px !important;
border-radius: 3px;
text-decoration: none !important;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
/* Hover */
.page-options a:hover,
.page-options-bottom a:hover {
background: #1f8f1f !important; /* verde mais vivo */
border-color: #7bff7b !important;
color: #ffffff !important;
}
/* ====== NAVBOX ====== */
.navbox,
.navbox tr,
.navbox table {
border: 2px solid #7CFC00; /* verde-alaranjado */
}
.navbox-title,
.navbox .title,
.navbox .header {
background: #0066ff !important; /* barra azul */
color: white !important;
}
/* ====== BLOCK-HEADING (contornadores) ====== */
/* Caixas Wikidot tipo [[div class="block"]] etc */
.block-heading,
.heading,
div[class*="block"] > .heading,
.page-content .heading {
border: 2px solid #D2691E !important; /* laranja */
background-color: #D2691E !important; /* fundo laranja */
color: white !important;
}
/* Algumas variantes comuns de block-containers */
.block,
.block-content,
.block-title,
.block-box .title {
border-color: #D2691E !important;
}
/* ====== BARRINHAS GERAIS MARRONS → LARANJA ====== */
div, table, td, th, .bar, .line, .section {
border-color: #D2691E !important;
}
/* ====== BARRA DE "VER CONTA" ====== */
#account-top,
#login-status,
#login-status a {
background: #FFA500 !important; /* laranja */
color: white !important;
}
/* ====== BARRA DE BUSCA ====== */
#search-top-box input[type="text"],
#search-top-box {
border: 2px solid #D2691E !important; /* laranja */
}
/* Hover: barra fica roxa */
#search-top-box input[type="text"]:hover {
background: #8000FF !important; /* roxo */
color: white !important;
}
/* Hover da área inteira fica branco */
#search-top-box:hover {
background: white !important;
}
/* ====== SEU BLOCO DE TABELA ESPECIAL (para preservar estilo) ====== */
.wikidot-table-custom {
width: 100%;
border-collapse: collapse;
background: #f0eb8c;
text-align: center;
}
