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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 13: Linha 13:
         border-radius: 8px;
         border-radius: 8px;
         text-align: center;
         text-align: center;
         padding: 12px 10px;
         padding: 16px;
         width: 120px;
         width: min-content;
         min-width: 120px;
         min-width: 0;
         box-sizing: border-box;
         box-sizing: border-box;
         display: flex;
         display: flex;
         flex-direction: column;
         flex-direction: column;
         align-items: center;
         align-items: center;
         gap: 4px;
         gap: 8px;
         transition: transform 0.15s, box-shadow 0.15s;
         transition: transform 0.15s, box-shadow 0.15s;
         color: inherit;
         color: inherit;
Linha 33: Linha 33:
     .island-card:visited {
     .island-card:visited {
         color: inherit;
         color: inherit;
    }
    .island-card .island-img {
        display: block;
        line-height: 0;
     }
     }


     .island-card .island-img img {
     .island-card .island-img img {
         width: 100px;
        display: block;
         height: 100px;
         width: auto;
         height: 150px;
        max-width: 100%;
         object-fit: contain;
         object-fit: contain;
         pointer-events: none;
         pointer-events: none;
Linha 61: Linha 68:
     .island-card .island-chest-group {
     .island-card .island-chest-group {
         position: relative;
         position: relative;
         display: inline-flex;
         display: inline-block;
         flex-direction: column;
         width: 32px;
         align-items: center;
         height: 32px;
     }
     }


     .island-card .island-chest-group img {
     .island-card .island-chest-group img {
        display: block;
         width: 32px;
         width: 32px;
         height: 32px;
         height: 32px;
         object-fit: contain;
         object-fit: contain;
        display: block;
     }
     }


     /* Estilo da quantidade (igual itemdata.css) */
     /* Quantidade no canto da imagem do baú (estilo itemdata) */
     .island-card .island-chest-count {
     .island-card .island-chest-count {
         position: absolute;
         position: absolute;
         bottom: -10px;
         right: 0;
         left: 50%;
         bottom: 0;
        transform: translateX(-50%);
         font-size: 11px;
         font-size: 12px;
         font-weight: bold;
         font-weight: bold;
         color: #fff;
         color: #fff;
         background: rgba(0, 0, 0, 0.75);
         background: rgba(0, 0, 0, 0.75);
         padding: 1px 4px;
         padding: 1px 3px;
         border-radius: 4px;
         border-radius: 3px;
         line-height: 1;
         line-height: 1;
         white-space: nowrap;
         white-space: nowrap;
Linha 93: Linha 99:
     @media (max-width: 600px) {
     @media (max-width: 600px) {
         .island-card {
         .island-card {
            width: 100px;
             padding: 12px;
            min-width: 100px;
             padding: 10px 8px;
         }
         }


         .island-card .island-img img {
         .island-card .island-img img {
            width: 80px;
             height: 120px;
             height: 80px;
         }
         }


         .island-card .island-name {
         .island-card .island-name {
             font-size: 0.85em;
             font-size: 0.9em;
         }
         }


        .island-card .island-chest-group,
         .island-card .island-chest-group img {
         .island-card .island-chest-group img {
             width: 28px;
             width: 28px;
Linha 113: Linha 117:


         .island-card .island-chest-count {
         .island-card .island-chest-count {
             font-size: 11px;
             font-size: 10px;
             bottom: -8px;
             padding: 0 2px;
         }
         }
     }
     }

Edição das 22h47min 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;
       width: auto;
       height: 150px;
       max-width: 100%;
       object-fit: contain;
       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-img img {
           height: 120px;
       }
       .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>