Difference between revisions of "MediaWiki:Common.css"

Revision as of 17:46, 7 May 2025

/* Melhorias para o CSS de imagens NPC */

/* ========== ESTILOS ESPECÍFICOS PARA NPCs ========== */
.tile-row {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 1em;
}

.tile-halves {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid #e4eaee;
    background: #ffffff;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
    position: relative;
}

.tile-halves h2 {
    font-size: 1.4em;
    font-weight: bold;
    border: none;
    margin: 0 0 0.4em;
}

.tile-top {
    width: 100%;
    padding: 1.3rem 1.5rem 0.6rem;
}

/* Melhorias para o container de imagens */
.tile-top.tile-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #949eaa;
    overflow: visible;
    padding: 0;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    min-height: 50px; /* Garante altura mínima mesmo sem imagem */
}

/* Correção para links dentro do tile de imagem */
.tile-top.tile-image a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none; /* Remove sublinhado de links */
}

/* Correções para todas as imagens, incluindo GIFs */
.tile-top.tile-image img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0;
    transition: 0.4s ease-out;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast; /* Melhora renderização em Webkit */
    image-rendering: crisp-edges; /* Melhora renderização em Firefox */
}

/* Correção para tamanhos personalizados */
.tile-top.tile-image img.custom-size {
    width: var(--custom-width, auto) !important;
    height: var(--custom-height, auto) !important;
    max-width: var(--custom-width, 100%) !important;
    max-height: var(--custom-height, none) !important;
}

/* Corrige o problema de dimensionamento zero */
.tile-top.tile-image img[width="0"],
.tile-top.tile-image img[height="0"] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Resto do CSS permanece igual... */

Difference between revisions of "MediaWiki:Common.css"

Revision as of 17:46, 7 May 2025

Navigation menu

Search

@@ Line 1: / Line 1: @@
-CSS
+/* Melhorias para o CSS de imagens NPC */
-/* CSS placed here will be applied to all skins */
-/* ========== ESTILOS GERAIS ========== */
-a {
-    text-underline-offset: 0px;
-}
-.external {
-    background: none !important;
-    padding-right: 0 !important;
-}
-/* ========== WAR COPY (TEXTO E IMAGENS) ========== */
-.warp-copy {
-    color: #0066cc;
-    cursor: pointer;
-    text-decoration: underline dotted #0066cc;
-    text-underline-offset: 2px;
-    position: relative;
-    display: inline-block;
-}
-/* Tooltip padrão */
-.warp-copy::after {
-    content: "Copy";
-    position: absolute;
-    left: 50%;
-    background-color: #333;
-    color: white;
-    padding: 2px 6px;
-    border-radius: 3px;
-    font-size: 12px;
-    white-space: nowrap;
-    z-index: 10;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    transform: translateX(-50%);
-}
-/* Seta do tooltip */
-.warp-copy::before {
-    content: "";
-    position: absolute;
-    left: 50%;
-    border-width: 4px;
-    border-style: solid;
-    z-index: 10;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    transform: translateX(-50%);
-}
-/* Tooltip PARA TEXTO */
-.warp-copy:not(img)::after {
-    bottom: calc(100% + 5px);
-}
-.warp-copy:not(img)::before {
-    bottom: calc(100% + 1px);
-    border-color: #333 transparent transparent transparent;
-}
-/* Tooltip PARA IMAGENS */
-.tile-top.tile-image .warp-copy::after {
-    bottom: -25px;
-    top: auto !important;
-}
-.tile-top.tile-image .warp-copy::before {
-    bottom: -18px;
-    top: auto !important;
-    border-color: #333 transparent transparent transparent !important;
-}
-/* Estados de hover */
-.warp-copy:hover::after,
-.warp-copy:hover::before {
-    opacity: 1;
-    visibility: visible;
-}
-/* Feedback de copiado - APLICA-SE A TODOS OS WARP-COPY */
-.warp-copy.copied::after {
-    content: "Copied!" !important;
-    background-color: #4CAF50 !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-}
-.warp-copy.copied {
-    color: #4CAF50 !important;
-    text-decoration: underline dotted #4CAF50 !important;
-}
 /* ========== ESTILOS ESPECÍFICOS PARA NPCs ========== */
@@ Line 124: / Line 29: @@
 }
+/* Melhorias para o container de imagens */
 .tile-top.tile-image {
      display: flex;
@@ Line 134: / Line 40: @@
      width: 100%;
      box-sizing: border-box;
+    min-height: 50px; /* Garante altura mínima mesmo sem imagem */
 }
+/* Correção para links dentro do tile de imagem */
 .tile-top.tile-image a {
      width: 100%;
@@ Line 142: / Line 50: @@
      justify-content: center;
      align-items: center;
+    text-decoration: none; /* Remove sublinhado de links */
 }
+/* Correções para todas as imagens, incluindo GIFs */
 .tile-top.tile-image img {
      display: block;
@@ Line 152: / Line 62: @@
      transition: 0.4s ease-out;
      object-fit: contain;
+    image-rendering: -webkit-optimize-contrast; /* Melhora renderização em Webkit */
+    image-rendering: crisp-edges; /* Melhora renderização em Firefox */
 }
-/* Estilo para tamanhos personalizados */
+/* Correção para tamanhos personalizados */
 .tile-top.tile-image img.custom-size {
-     width: var(--custom-width, auto);
+     width: var(--custom-width, auto) !important;
-     height: var(--custom-height, auto);
+     height: var(--custom-height, auto) !important;
-     max-width: var(--custom-width, 100%);
+     max-width: var(--custom-width, 100%) !important;
-     max-height: var(--custom-height, none);
+     max-height: var(--custom-height, none) !important;
 }
-.tile-bottom {
+/* Corrige o problema de dimensionamento zero */
-     background: #ffffff;
+.tile-top.tile-image img[width="0"],
-     border-top: 1px solid #e4eaee;
+.tile-top.tile-image img[height="0"] {
-     width: 100%;
+     width: auto !important;
-     padding: 1rem 1.5rem 0.6rem;
+     height: auto !important;
+     max-width: 100% !important;
+     max-height: 100% !important;
 }
-.tile-bottom.link-button {
+/* Resto do CSS permanece igual... */
-    align-self: center;
-    padding: 0;
-    width: auto;
-    margin: 0 auto;
-    max-width: fit-content;
-}
-.mainpage-contents .tile-halves {
-    display: inline-block;
-    flex: 0 0 auto;
-    margin-right: 0.9rem;
-    width: auto;
-    max-width: max-content;
-}
-.mainpage-contents .tile-halves:hover .tile-top img {
-    transform: scale(1.04);
-}
-.mainpage-contents .tile-halves:last-child {
-    margin-right: 0;
-}
-.npc-subtitle {
-    font-size: 0.8em;
-    color: #666;
-    margin-top: -5px;
-    text-align: center;
-    font-style: italic;
-    line-height: 1.2;
-}
-.mainpage-contents.tile-row {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 15px;
-    justify-content: flex-start;
-}
-.mainpage-contents .contents-equipment.tile-halves {
-    margin-right: 0;
-    flex: 0 0 auto;
-    min-width: 150px;
-    max-width: 200px;
-}
-/* Título do NPC */
-.tile-bottom.link-button h2 .warp-copy {
-    color: #000080;
-    font-weight: bold;
-    display: block;
-    text-align: center;
-    text-decoration: none;
-}
-.tile-bottom.link-button h2 {
-    position: relative;
-    overflow: visible;
-}
-/* Classes para dimensionamento manual */
-.npc-image-small {
-    max-width: 150px !important;
-}
-.npc-image-medium {
-    max-width: 200px !important;
-}
-.npc-image-large {
-    max-width: 250px !important;
-}