Widget:C.Base
Revisão de 21h33min de 31 de dezembro de 2025 por Gurren1 (discussão | contribs) (Criou página com '<style> →===========================BASE STYLES & RESET===========================: img { pointer-events: none; -webkit-user-select: none;...')
<style>
/* ===========================BASE STYLES & RESET=========================== */
img {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
video {
max-height: none;
}
.mw-body {
padding: unset !important;
}
.mw-body-content {
line-height: 1.5;
}
.mw-body-content p {
display: none;
}
/* ===========================CHARACTER CONTAINER & BACKGROUND=========================== */
.banner {
display: none !important;
}
.character-box {
color: #000;
font-family: 'Noto Sans', sans-serif;
width: 100%;
margin: auto;
position: relative;
-webkit-user-select: none;
user-select: none;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.character-box p {
display: unset;
}
.character-box::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, .60));
z-index: 0;
}
/* ===========================CHARACTER HEADER & INFO=========================== */
.character-header {
position: relative;
overflow: hidden;
display: flex;
gap: 10px;
flex-direction: column;
z-index: 1;
}
.character-art {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.character-topbar {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 8px 20px 0;
z-index: 1;
}
.character-name-box {
display: flex;
align-items: center;
gap: 14px;
}
.topbar-icon {
margin-top: 8px;
width: 100px;
height: 100px;
object-fit: none;
aspect-ratio: 1 / 1;
}
.character-name {
color: #fff;
font-size: 56px;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
text-shadow: 0 0 6px #000, 0 0 9px #000;
}
.topbar-description {
display: none;
}
.class-tags {
display: flex;
gap: 9px;
flex-wrap: wrap;
margin-left: .28rem;
}
.class-tag {
background: #353420;
color: #fff;
outline: 2px solid #000;
padding: 1px 6px;
border-radius: 4px;
font-size: .9em;
font-weight: 700;
box-shadow: 0 0 2px rgb(0 0 0 / 70%);
}
.character-info .tier,
.character-info .class-tag {
font-size: 18px;
color: #e0e0e0;
}
/* ===========================TABS SYSTEM=========================== */
.character-tabs {
margin: 4px 0 4px 8px;
display: flex;
gap: 12px;
}
.tab-btn {
padding: 6px 20px;
min-width: 44px;
background: #333;
color: #fff;
border: 2px solid transparent;
border-radius: 8px;
font-size: 20px;
cursor: pointer;
font-weight: 600;
line-height: 1;
transition: background .15s, border-color .15s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tab-btn.active {
background: #156bc7;
border-color: #156bc7;
}
.tab-content {
display: none;
padding: 0 8px 8px;
position: relative;
z-index: 2;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
.tab-content.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.tabs-height-wrapper {
position: relative;
overflow: visible;
will-change: height;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body.transitioning-tabs {
overflow-x: hidden !important;
}
body.transitioning-tabs .character-box {
overflow: hidden;
}
body.transitioning-tabs .tabs-height-wrapper {
overflow: hidden;
}
.character-box {
overflow: visible;
}
/* ===========================SKILLS SYSTEM=========================== */
.skills-container {
display: flex;
gap: 20px;
align-items: flex-start;
}
.skills-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
width: auto;
justify-content: center;
}
/* ===========================SKILL ICONS & BAR=========================== */
.icon-scroll-x {
display: block;
overflow-x: auto;
overflow-y: hidden;
padding-top: 10px;
padding-bottom: 10px;
margin-top: -10px;
margin-bottom: -10px;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: #ababab transparent;
position: relative;
z-index: 4;
}
.icon-scroll-x::-webkit-scrollbar {
height: 6px;
}
.icon-scroll-x::-webkit-scrollbar-track {
background: transparent;
}
.icon-scroll-x::-webkit-scrollbar-thumb {
background: #151515;
border-radius: 3px;
}
.icon-bar {
display: flex;
flex-wrap: nowrap;
gap: 10px;
width: 100%;
overflow-x: auto;
overflow-y: visible;
padding: 6px 6px;
margin-bottom: 6px;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: #ababab transparent;
justify-content: flex-start;
align-items: center;
position: relative;
z-index: 4;
}
.top-rail.skills .icon-bar {
overflow: visible !important;
width: max-content;
max-width: none;
margin: 0;
padding: 6px 6px;
}
.icon-bar::-webkit-scrollbar {
height: 6px;
}
.icon-bar::-webkit-scrollbar-track {
background: transparent;
}
.icon-bar::-webkit-scrollbar-thumb {
background: #151515;
border-radius: 3px;
}
:root {
--icon-size: 50px;
--icon-radius: 10px;
--icon-idle: #d0d0d0;
--icon-active: #FFD95A;
--icon-active-ring: rgba(255, 217, 90, 0.45);
--icon-active-glow: rgba(255, 217, 90, 0.30);
--icon-ring-w: 2px;
}
.icon-bar .skill-icon {
width: var(--icon-size) !important;
height: var(--icon-size) !important;
position: relative;
border: none !important;
outline: none !important;
overflow: hidden;
border-radius: var(--icon-radius);
contain: paint;
isolation: isolate;
will-change: transform;
transform: translateZ(0);
padding: 0 !important;
margin: 0 !important;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
background-clip: padding-box;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 1px solid rgba(255, 255, 255, 0.05);
background-color: rgba(15, 15, 23, 0.95);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.icon-bar .skill-icon .sub-badge {
position: absolute;
right: 2px;
bottom: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #156bc7;
color: #fff;
font-weight: 900;
font-size: 12px;
line-height: 16px;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
cursor: pointer;
z-index: 3;
-webkit-user-select: none;
user-select: none;
}
.icon-bar .skill-icon .back-badge {
position: absolute;
right: 2px;
bottom: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #c74615;
color: #fff;
font-weight: 900;
font-size: 14px;
line-height: 16px;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
cursor: pointer;
z-index: 3;
-webkit-user-select: none;
user-select: none;
}
.icon-bar .skill-icon img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
border-radius: inherit;
-webkit-clip-path: inset(0 round var(--icon-radius));
clip-path: inset(0 round var(--icon-radius));
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform .12s ease;
object-fit: cover;
}
.icon-bar .skill-icon::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 2;
box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle) !important;
transition: box-shadow .12s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
.icon-bar .skill-icon::before {
content: "";
position: absolute;
inset: -2px;
border-radius: calc(var(--icon-radius) + 2px);
pointer-events: none;
z-index: 1;
box-shadow: none;
opacity: 0;
transition: opacity .12s ease, box-shadow .12s ease;
}
.icon-bar .skill-icon.active {
transform: scale(1.10) translateZ(0) !important;
z-index: 5;
}
.icon-bar .skill-icon.active::after {
box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active) !important;
}
.icon-bar .skill-icon.active::before {
opacity: 1 !important;
box-shadow: 0 0 14px 4px var(--icon-active-glow), 0 0 0 calc(var(--icon-ring-w) * 2) var(--icon-active-ring) !important;
}
.icon-bar .skill-icon.active img {
transform: none !important;
}
.icon-bar .skill-icon:hover:not(.active)::after {
box-shadow: inset 0 0 0 var(--icon-ring-w) #e6e6e6 !important;
}
.icon-bar .skill-icon,
.icon-bar .skill-icon img,
.icon-bar .skill-icon::after,
.icon-bar .skill-icon::before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
/* ===========================SKILL DESCRIPTION & CONTENT=========================== */
.skill-title {
margin: 0 0 12px;
display: flex;
justify-content: center;
align-items: center;
}
.skill-title h3 {
margin: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #fff;
}
.desc-box {
padding: 12px 18px;
background: transparent;
border-radius: 6px;
position: relative;
box-shadow: none;
color: #fff;
transition: all .3s ease;
z-index: 2;
display: flex;
flex-direction: column;
overflow: hidden;
text-shadow: none;
height: auto;
min-height: 0;
font-size: 16px;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.desc-box h3 {
font-size: 2.7em;
margin: 0;
text-align: center;
padding-top: 0;
}
.desc {
font-size: 17px !important;
line-height: 1.75 !important;
letter-spacing: .01em;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
margin-top: 5px;
padding-right: 8px;
color: #f5f5f5;
overflow-wrap: anywhere;
word-break: break-word;
white-space: normal;
flex: 0 0 auto !important;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
max-height: none;
}
.desc b,
.desc strong {
font-weight: 700;
color: #fff;
}
.desc::-webkit-scrollbar {
width: 7px;
height: 7px;
}
.desc::-webkit-scrollbar-thumb {
background: #156bc7;
border-radius: 10px;
}
.desc::-webkit-scrollbar-track {
background: #151515a8;
border-radius: 10px;
}
/* ===========================ATTRIBUTES & STATS=========================== */
.attrs,
.attr-list {
display: block;
}
.desc-box .attrs,
.desc-box .attr-list,
.desc-box .attrs *,
.desc-box .attr-list * {
text-shadow: none;
font-family: 'Noto Sans', sans-serif;
}
.attrs__row,
.attr-row {
display: flex;
align-items: center;
gap: 5px;
min-height: 22px;
line-height: 1.2;
}
.attrs__row--empty,
.attr-row.is-empty {
display: none;
}
.attrs__label,
.attr-label {
font-weight: 700;
color: #f0c87b;
font-size: .98rem;
white-space: nowrap;
margin: 0;
}
.attrs__value,
.attr-value {
color: #fff;
font-weight: 800;
font-size: .98rem;
letter-spacing: .01em;
margin: 0;
}
/* ===========================VIDEO CONTAINER=========================== */
.video-container {
position: relative;
width: 100%;
max-width: 100%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: none;
overflow: hidden;
padding: 0;
z-index: 2;
}
.video-container>video {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: contain;
object-position: center;
z-index: 2;
display: block;
border-radius: 6px;
background: #000;
}
.video-placeholder {
position: absolute;
inset: 0;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 1;
transition: opacity .28s ease;
background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
}
.video-placeholder img {
max-width: 160px;
width: auto;
height: auto;
opacity: 0.98;
display: block;
}
.video-placeholder.fade-out {
opacity: 0;
}
/* ===========================LAYOUT COMPONENTS=========================== */
.top-rail {
display: flex;
align-items: center;
justify-content: center;
width: max-content;
max-width: 96vw;
margin: 0px auto;
padding: 5px 5px;
background: rgba(28, 28, 34, .95);
border: 2px solid rgba(255, 255, 255, .08);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.top-rail .rail-title {
display: none;
}
.top-rail.skins .rail-title {
display: block;
font-weight: 800;
font-size: clamp(20px, 2.2vw, 28px);
color: #fff;
margin-right: auto;
}
.top-rail .icon-bar {
width: auto;
justify-content: center;
margin: 0;
overflow-x: auto;
}
.content-card {
width: min(1600px, 96vw);
max-width: 96vw;
margin: 10px auto;
background: rgba(28, 28, 34, .95);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .30);
padding: 18px;
z-index: 2;
}
.content-card.skills-grid {
display: grid;
grid-template-columns: minmax(320px, 60%) minmax(320px, 45%);
gap: 16px;
align-items: start;
grid-auto-rows: auto;
margin: 10px auto 0;
}
/* ===========================TIER SYSTEM=========================== */
.tier-bronze .topbar-icon,
.tier-bronze .tier {
outline: 2px solid #7b4e2f;
}
.tier-silver .topbar-icon,
.tier-silver .tier {
outline: 2px solid #d6d2d2;
}
.tier-gold .topbar-icon,
.tier-gold .tier {
outline: 2px solid #fcd300;
}
.tier-diamond .topbar-icon,
.tier-diamond .tier {
outline: 2px solid #60dae2;
}
/* ===========================SKILL FLAGS=========================== */
.video-container {
position: relative;
}
.skill-flags {
position: absolute;
top: 8px;
left: 8px;
display: flex;
flex-direction: row;
gap: 6px;
z-index: 10;
pointer-events: auto;
}
.skill-flag {
display: inline-block;
pointer-events: all;
cursor: pointer;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
width: 32px;
height: 32px;
aspect-ratio: 1 / 1;
object-fit: contain;
}
/* ===========================TOOLTIP SYSTEM=========================== */
.skill-tooltip {
position: fixed;
z-index: 10000;
pointer-events: none;
padding: 8px 10px;
border-radius: 8px;
background: rgba(28, 28, 34, .95);
color: #eaeaea;
font-size: 13px;
line-height: 1.25;
text-align: center;
max-width: 360px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
left: -9999px;
top: -9999px;
transform: none;
opacity: 0;
transition: opacity .12s ease;
white-space: normal;
}
.skill-tooltip.flag-tooltip {
background: rgba(80, 80, 85, .98) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
}
/* ===========================RESPONSIVE DESIGN & MOBILE=========================== */
@media (max-width:1100px) {
.top-rail {
flex-direction: column;
align-items: stretch;
}
.top-rail .icon-scroll-x {
order: 2;
width: 100%;
}
.top-rail .icon-bar {
order: 2;
width: 100%;
flex-wrap: wrap;
}
.content-card.skills-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.video-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
}
@media (max-width:600px) {
.content-card {
box-sizing: border-box;
max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
width: 100%;
margin: 10px auto;
padding: 12px;
border-radius: 10px;
overflow: hidden;
}
.content-card.skills-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.top-rail {
width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
max-width: 100%;
margin: 0 auto 8px;
padding: 6px 8px;
border-radius: 0;
box-sizing: border-box;
overflow: hidden;
}
.top-rail.skills {
overflow: visible !important;
}
.top-rail .icon-scroll-x {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
margin-top: -10px;
margin-bottom: -10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.top-rail .icon-bar {
width: 100%;
padding: 0 6px;
gap: 12px;
justify-content: flex-start;
overflow: visible !important;
-webkit-overflow-scrolling: touch;
}
:root {
--icon-size: 92px;
}
.icon-bar .skill-icon {
width: var(--icon-size);
height: var(--icon-size);
flex: 0 0 auto;
}
.video-container,
.skins-carousel-wrapper,
.skins-carousel {
max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
box-sizing: border-box;
}
.video-container {
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.video-container>video,
.video-container img,
.skins-carousel img {
max-width: 100%;
width: 100%;
height: auto;
}
html,
body,
.mw-body,
.mw-body-content {
overflow-x: hidden;
}
.desc-box {
font-size: 16px !important;
-webkit-text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
}
.desc-box * {
-webkit-text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
}
.attrs__label,
.attr-label {
font-size: 20px !important;
}
.attrs__value,
.attr-value {
font-size: 20px !important;
}
.attr-row {
margin-bottom: 12px;
}
#skills .desc-box .skill-level-line .attr-label {
font-size: 22px !important;
}
.desc {
font-size: 24px !important;
line-height: 1.95 !important;
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
}
.desc-box h3 {
font-size: 32px !important;
}
}
/* ===========================OVERFLOW PROTECTION=========================== */
html,
body,
.mw-body,
.mw-body-content {
box-sizing: border-box;
max-width: 100vw;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.content-card,
.top-rail,
.video-container,
.skins-carousel-wrapper,
.skins-carousel {
box-sizing: border-box;
max-width: 100%;
}
.content-card *,
.top-rail *,
.video-container * {
max-width: 100%;
box-sizing: border-box;
}
</style> <script>
(function () {
'use strict';
// ===== Helpers compartilhados =====
const $ = (s, root = document) => root.querySelector(s);
const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));
const ensureRemoved = sel => {
Array.from(document.querySelectorAll(sel)).forEach(n => n.remove());
};
const onceFlag = (el, key) => {
if (!el) return false;
if (el.dataset[key]) return false;
el.dataset[key] = '1';
return true;
};
const addOnce = (el, ev, fn) => {
if (!el) return;
const attr = `data-wired-${ev}`;
if (el.hasAttribute(attr)) return;
el.addEventListener(ev, fn);
el.setAttribute(attr, '1');
};
// ===== Cache global melhorado =====
const subBarTemplateCache = window.__skillSubBarTemplateCache || (window.__skillSubBarTemplateCache = new Map());
const imagePreloadCache = window.__skillImagePreloadCache || (window.__skillImagePreloadCache = new Map());
const videoPreloadCache = window.__skillVideoPreloadCache || (window.__skillVideoPreloadCache = new Set());
const flagRowCache = window.__skillFlagRowCache || (window.__skillFlagRowCache = new Map());
const flagIconURLCache = window.__skillFlagIconURLCache || (window.__skillFlagIconURLCache = new Map());
// ===== Funções utilitárias compartilhadas =====
function filePathURL(fileName) {
if (!fileName || fileName.trim() === || fileName === 'Nada.png' || fileName.toLowerCase() === 'nada.png') {
return ;
}
const f = encodeURIComponent(fileName.replace(/^Arquivo:|^File:/, ));
const base = (window.mw && mw.util && typeof mw.util.wikiScript === 'function') ? mw.util.wikiScript() : (window.mw && window.mw.config ? (mw.config.get('wgScript') || '/index.php') : '/index.php');
let url = `${base}?title=Especial:FilePath/${f}`;
if (window.location.protocol === 'https:' && url.startsWith('http://')) {
url = url.replace('http://', 'https://');
}
return url;
}
function slugify(s) {
if (!s) return ;
return String(s).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ).replace(/[^\w\s-]/g, ).replace(/[\s:/\-]+/g, '-').replace(/^-+|-+$/g, ).replace(/-+/g, '-');
}
function getLangKey() {
const skillsRoot = document.getElementById('skills');
const raw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
return raw === 'pt-br' ? 'pt' : (raw.split('-')[0] || 'pt');
}
function chooseDescFrom(obj) {
const lang = getLangKey();
const pack = obj.desc_i18n || obj.desc || {
pt: obj.descPt, en: obj.descEn, es: obj.descEs, pl: obj.descPl
};
return (pack && (pack[lang] || pack.pt || pack.en || pack.es || pack.pl)) || ;
}
// ===== Exporta para uso global =====
window.__CBase = {
$, $$, ensureRemoved, onceFlag, addOnce,
filePathURL, slugify, getLangKey, chooseDescFrom,
subBarTemplateCache, imagePreloadCache, videoPreloadCache,
flagRowCache, flagIconURLCache
};
// Compatibilidade com código antigo
window.__skillSlugify = slugify;
})();
</script>