Mudanças entre as edições de "Widget:Teste"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 42: Linha 42:
     .island-card .island-img img {
     .island-card .island-img img {
         display: block;
         display: block;
        width: auto;
        height: 220px;
        max-width: 100%;
        object-fit: contain;
         pointer-events: none;
         pointer-events: none;
     }
     }
Linha 100: Linha 96:
         .island-card {
         .island-card {
             padding: 12px;
             padding: 12px;
        }
        .island-card .island-img img {
            height: 180px;
         }
         }



Edição das 22h51min de 12 de março de 2026

<style>

   .island-grid {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       padding: 12px 0;
       justify-content: center;
   }
   .island-card {
       background: #eeeded;
       box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px;
       border-radius: 8px;
       text-align: center;
       padding: 16px;
       width: min-content;
       min-width: 0;
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 8px;
       transition: transform 0.15s, box-shadow 0.15s;
       color: inherit;
       cursor: pointer;
   }
   .island-card:hover {
       transform: translateY(-2px);
       box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px;
   }
   .island-card:visited {
       color: inherit;
   }
   .island-card .island-img {
       display: block;
       line-height: 0;
   }
   .island-card .island-img img {
       display: block;
       pointer-events: none;
   }
   .island-card .island-name {
       font-size: 0.9em;
       font-weight: bold;
       color: #000;
       pointer-events: none;
       line-height: 1.2;
       word-break: break-word;
   }
   .island-card .island-chests {
       display: flex;
       align-items: flex-end;
       justify-content: center;
       gap: 8px;
       pointer-events: none;
   }
   .island-card .island-chest-group {
       position: relative;
       display: inline-block;
       width: 32px;
       height: 32px;
   }
   .island-card .island-chest-group img {
       display: block;
       width: 32px;
       height: 32px;
       object-fit: contain;
   }
   /* Quantidade no canto da imagem do baú (estilo itemdata) */
   .island-card .island-chest-count {
       position: absolute;
       right: 0;
       bottom: 0;
       font-size: 11px;
       font-weight: bold;
       color: #fff;
       background: rgba(0, 0, 0, 0.75);
       padding: 1px 3px;
       border-radius: 3px;
       line-height: 1;
       white-space: nowrap;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
       z-index: 10;
   }
   @media (max-width: 600px) {
       .island-card {
           padding: 12px;
       }
       .island-card .island-name {
           font-size: 0.9em;
       }
       .island-card .island-chest-group,
       .island-card .island-chest-group img {
           width: 28px;
           height: 28px;
       }
       .island-card .island-chest-count {
           font-size: 10px;
           padding: 0 2px;
       }
   }

</style> <script>

   (function () {
       function initClickable() {
           document.querySelectorAll('.island-card[data-href]').forEach(function (el) {
               if (el._icClick) return;
               el._icClick = true;
               el.addEventListener('click', function () {
                   var href = el.getAttribute('data-href');
                   if (href) window.location.href = href;
               });
               el.addEventListener('keydown', function (e) {
                   if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault();
                       var href = el.getAttribute('data-href');
                       if (href) window.location.href = href;
                   }
               });
           });
       }
       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', initClickable);
       } else {
           initClickable();
       }
   })();

</script>