|
|
| Linha 1: |
Linha 1: |
| <noinclude>{{Documentação}}</noinclude>
| | {{#invoke:Gb|bossInfo |
| | | | img = {{{img|}}} |
| <style>
| | | nome = {{{nome|}}} |
| /* ==========================
| | | frase = {{{frase|}}} |
| ESTILO DO WIDGET (TABS)
| | | hp = {{{hp|}}} |
| ========================== */
| | | exp = {{{exp|}}} |
| | | | nivel = {{{nivel|}}} |
| .ot-tabs {
| | | fresco = {{{fresco|}}} |
| width: 100%;
| | | forte = {{{forte|}}} |
| background: #0d0d0d;
| | | reflete = {{{reflete|}}} |
| border: 1px solid #2a2a2a;
| | | comum = {{{comum|}}} |
| padding: 10px;
| | | semiraro = {{{semiraro|}}} |
| border-radius: 8px;
| | | raro = {{{raro|}}} |
| } | | | muitoraro = {{{muitoraro|}}} |
| | | }} |
| /* Barra de botões */
| |
| .ot-tab-buttons {
| |
| display: flex;
| |
| gap: 8px;
| |
| margin-bottom: 12px;
| |
| } | |
| | |
| /* Botões */
| |
| .ot-tab-buttons button {
| |
| background: #1a1a1a;
| |
| color: #b5b5b5;
| |
| border: 1px solid #333;
| |
| padding: 8px 20px;
| |
| cursor: pointer;
| |
| font-weight: 600;
| |
| border-radius: 6px;
| |
| transition: 0.2s;
| |
| }
| |
| | |
| .ot-tab-buttons button:hover {
| |
| background: #262626;
| |
| color: #e5e5e5;
| |
| }
| |
| | |
| /* Aba ativa (estilo dourado igual ao do seu print) */
| |
| .ot-tab-buttons button.active {
| |
| background: linear-gradient(90deg, #d89c00, #ffcc33);
| |
| color: #000;
| |
| border-color: #d89c00;
| |
| } | |
| | |
| /* Conteúdo das abas */
| |
| .ot-tab-content {
| |
| display: none;
| |
| padding: 15px;
| |
| border: 1px solid #333;
| |
| border-radius: 6px;
| |
| background: #151515;
| |
| } | |
| | |
| .ot-tab-content.active {
| |
| display: block;
| |
| } | |
| </style>
| |
| | |
| <script>
| |
| /* ==========================
| |
| SISTEMA DE TROCA DE TABS
| |
| ========================== */
| |
| document.addEventListener("click", function (e) {
| |
| const btn = e.target.closest(".ot-tab-buttons button"); | |
| if (!btn) return;
| |
| | |
| const container = btn.closest(".ot-tabs");
| |
| const target = btn.dataset.target;
| |
| | |
| // Atualiza botões
| |
| container.querySelectorAll(".ot-tab-buttons button")
| |
| .forEach(b => b.classList.remove("active"));
| |
| btn.classList.add("active");
| |
| | |
| // Atualiza conteúdos
| |
| container.querySelectorAll(".ot-tab-content")
| |
| .forEach(c => c.classList.remove("active"));
| |
| | |
| container.querySelector("#" + target).classList.add("active");
| |
| }); | |
| </script>
| |
| | |
| <div class="ot-tabs">
| |
| | |
| <div class="ot-tab-buttons">
| |
| <button data-target="ot-tab-1" class="active">
| |
| {{{label1|Outfit}}}
| |
| </button>
| |
| <button data-target="ot-tab-2">
| |
| {{{label2|Cursed Backpack}}}
| |
| </button>
| |
| <button data-target="ot-tab-3">
| |
| {{{label3|Crimsonevil's Head}}}
| |
| </button>
| |
| </div>
| |
| | |
| <div class="ot-tab-content active" id="ot-tab-1"> | |
| {{{1|Conteúdo da aba 1}}}
| |
| </div>
| |
| | |
| <div class="ot-tab-content" id="ot-tab-2">
| |
| {{{2|Conteúdo da aba 2}}}
| |
| </div>
| |
| | |
| <div class="ot-tab-content" id="ot-tab-3">
| |
| {{{3|Conteúdo da aba 3}}}
| |
| </div>
| |
| | |
| </div>
| |
