Difference between revisions of "MediaWiki:Common.css"

From XilePK - Ragnarok Online Server
Jump to navigation Jump to search
Line 1: Line 1:
−
/* ========== ESTILOS GERAIS ========== */
+
/* ===== [ESTILOS GERAIS] ===== */
−
a {
 
−
    text-underline-offset: 0px;
 
−
}
 
−
 
 
−
.external {
 
−
    background: none !important;
 
−
    padding-right: 0 !important;
 
−
}
 
−
 
 
−
/* ========== WAR COPY (TEXTO E IMAGENS) ========== */
 
 
.warp-copy {
 
.warp-copy {
 
     color: #0066cc;
 
     color: #0066cc;
Line 17: Line 7:
 
     position: relative;
 
     position: relative;
 
     display: inline-block;
 
     display: inline-block;
−
    transition: color 0.3s ease; /* Adicionado para transição suave de cor */
 
−
}
 
−
 
−
/* 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%);
 
−
    transition: all 0.2s;
 
−
}
 
−
 
−
/* Seta do tooltip */
 
−
.warp-copy::before {
 
−
    content: "";
 
−
    position: absolute;
 
−
    left: 50%;
 
−
    border-width: 4px;
 
−
    border-style: solid;
 
−
    border-color: #333 transparent transparent transparent;
 
−
    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);
 
−
}
 
−
 
−
/* Tooltip PARA IMAGENS */
 
−
.tile-top.tile-image .warp-copy::after {
 
−
    bottom: -25px;
 
−
    top: auto;
 
−
}
 
−
 
−
.tile-top.tile-image .warp-copy::before {
 
−
    bottom: -18px;
 
−
    top: auto;
 
−
}
 
−
 
−
/* Estados de hover */
 
−
.warp-copy:hover::after,
 
−
.warp-copy:hover::before {
 
−
    opacity: 1;
 
−
    visibility: visible;
 
−
}
 
−
 
−
/* Feedback de copiado - CORREÇÃO DO PROBLEMA 2 */
 
−
.warp-copy.copied {
 
−
    color: green !important;
 
−
}
 
−
.warp-copy.copied::after {
 
−
    content: "Copied!" !important;
 
−
    background-color: #4CAF50 !important;
 
 
}
 
}
  
−
/* ========== CONTAINERS DE NPC ========== */
+
/* ===== [CONTAINERS DE NPC] ===== */
 
.tile-row {
 
.tile-row {
 
     display: flex;
 
     display: flex;
Line 99: Line 18:
  
 
.tile-halves {
 
.tile-halves {
−
    display: flex;
 
−
    flex-flow: row wrap;
 
 
     border: 1px solid #e4eaee;
 
     border: 1px solid #e4eaee;
 
     background: #ffffff;
 
     background: #ffffff;
 
     box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
 
     box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
−
    position: relative;
 
 
     min-width: 150px;
 
     min-width: 150px;
−
    max-width: 200px;
 
 
     flex: 1 0 auto;
 
     flex: 1 0 auto;
 
}
 
}
  
−
/* ========== ÁREA DA IMAGEM - CORREÇÃO DO PROBLEMA 1 ========== */
+
/* ===== [ÁREA DA IMAGEM] ===== */
 
.tile-top.tile-image {
 
.tile-top.tile-image {
 
     display: flex;
 
     display: flex;
Line 117: Line 32:
 
     background-color: #949eaa;
 
     background-color: #949eaa;
 
     padding: 0;
 
     padding: 0;
−
    min-height: 100px; /* Altura mínima reduzida */
 
−
    height: auto; /* Altura automática */
 
 
     overflow: hidden;
 
     overflow: hidden;
−
    width: 100%;
 
 
}
 
}
  
Line 129: Line 41:
 
     justify-content: center;
 
     justify-content: center;
 
     align-items: center;
 
     align-items: center;
−
    padding: 10px; /* Espaçamento interno */
 
 
}
 
}
  
Line 143: Line 54:
 
}
 
}
  
−
/* Imagens com dimensão personalizada */
+
/* ===== [ÁREA DE TEXTO - SEM LINHA] ===== */
−
.tile-top.tile-image img.custom-size {
 
−
    width: var(--custom-width, auto);
 
−
    height: var(--custom-height, auto);
 
−
}
 
−
 
 
−
/* Efeito hover */
 
−
.tile-halves:hover .tile-top img {
 
−
    transform: scale(1.04);
 
−
}
 
−
 
 
−
/* ========== ÁREA DE TEXTO - CORREÇÃO DO PROBLEMA 3 ========== */
 
 
.tile-bottom {
 
.tile-bottom {
 
     background: #ffffff;
 
     background: #ffffff;
−
    border-top: 1px solid #e4eaee;
+
     padding: 1rem;
−
     padding: 1rem 1.5rem 0.6rem;
 
−
    width: 100%;
 
 
     text-align: center;
 
     text-align: center;
−
}
+
     border-top: none !important; /* Remove a linha */
−
 
 
−
.tile-bottom.link-button {
 
−
    align-self: center;
 
−
    padding: 0;
 
−
    width: auto;
 
−
    margin: 0 auto;
 
−
     max-width: fit-content;
 
 
}
 
}
  
Line 174: Line 65:
 
     font-size: 0.8em;
 
     font-size: 0.8em;
 
     color: #666;
 
     color: #666;
−
     margin-top: 5px; /* Corrigido margin negativo */
+
     margin-top: 5px;
−
    text-align: center;
 
 
     font-style: italic;
 
     font-style: italic;
 
     line-height: 1.2;
 
     line-height: 1.2;
−
    border-top: none !important; /* Remove linha extra */
 
 
}
 
}
  
−
/* ========== TÍTULO DO NPC ========== */
+
/* ===== [TOOLTIPS] ===== */
−
.tile-bottom.link-button h2 .warp-copy {
+
.warp-copy::after {
−
     color: #000080;
+
    content: "Copy";
−
     font-weight: bold;
+
    position: absolute;
−
     display: block;
+
    left: 50%;
−
     text-align: center;
+
    transform: translateX(-50%);
−
     text-decoration: none;
+
    background: #333;
 +
     color: white;
 +
    padding: 2px 6px;
 +
    border-radius: 3px;
 +
     font-size: 12px;
 +
     opacity: 0;
 +
     visibility: hidden;
 +
     transition: all 0.2s;
 
}
 
}
  
−
.tile-bottom.link-button h2 {
+
.tile-top.tile-image .warp-copy::after {
−
    position: relative;
+
     bottom: -25px;
−
    overflow: visible;
+
     top: auto;
−
    margin: 0;
 
−
     padding: 0;
 
−
     white-space: nowrap;
 
 
}
 
}
  
−
/* ========== CLASSES DE TAMANHO ========== */
+
.tile-bottom .warp-copy::after {
−
.npc-image-small {
+
     bottom: calc(100% + 5px);
−
     max-width: 150px !important;
 
 
}
 
}
  
−
.npc-image-medium {
+
.warp-copy:hover::after {
−
     max-width: 200px !important;
+
     opacity: 1;
 +
    visibility: visible;
 
}
 
}
  
−
.npc-image-large {
+
.warp-copy.copied::after {
−
     max-width: 250px !important;
+
     content: "Copied!";
 +
    background: #4CAF50;
 
}
 
}
  
−
/* Redimensionamento customizado */
+
/* ===== [REDIMENSIONAMENTO] ===== */
−
.npc-custom-size {
+
.tile-image-custom img {
−
     width: var(--custom-width) !important;
+
     width: var(--custom-width, auto) !important;
−
     height: auto !important;
+
     height: var(--custom-height, auto) !important;
−
     max-height: none !important; /* Remove limite de altura */
+
    max-width: none !important;
 +
     max-height: none !important;
 
}
 
}

Revision as of 16:18, 30 April 2025

/* ===== [ESTILOS GERAIS] ===== */
.warp-copy {
    color: #0066cc;
    cursor: pointer;
    text-decoration: underline dotted #0066cc;
    text-underline-offset: 2px;
    position: relative;
    display: inline-block;
}

/* ===== [CONTAINERS DE NPC] ===== */
.tile-row {
    display: flex;
    flex-flow: row wrap;
    gap: 15px;
    margin-bottom: 1em;
}

.tile-halves {
    border: 1px solid #e4eaee;
    background: #ffffff;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
    min-width: 150px;
    flex: 1 0 auto;
}

/* ===== [ÁREA DA IMAGEM] ===== */
.tile-top.tile-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #949eaa;
    padding: 0;
    overflow: hidden;
}

.tile-top.tile-image a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tile-top.tile-image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    transition: 0.4s ease-out;
}

/* ===== [ÁREA DE TEXTO - SEM LINHA] ===== */
.tile-bottom {
    background: #ffffff;
    padding: 1rem;
    text-align: center;
    border-top: none !important; /* Remove a linha */
}

.npc-subtitle {
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
    font-style: italic;
    line-height: 1.2;
}

/* ===== [TOOLTIPS] ===== */
.warp-copy::after {
    content: "Copy";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.tile-top.tile-image .warp-copy::after {
    bottom: -25px;
    top: auto;
}

.tile-bottom .warp-copy::after {
    bottom: calc(100% + 5px);
}

.warp-copy:hover::after {
    opacity: 1;
    visibility: visible;
}

.warp-copy.copied::after {
    content: "Copied!";
    background: #4CAF50;
}

/* ===== [REDIMENSIONAMENTO] ===== */
.tile-image-custom img {
    width: var(--custom-width, auto) !important;
    height: var(--custom-height, auto) !important;
    max-width: none !important;
    max-height: none !important;
}
Retrieved from "https://wiki.xilepk.net/wiki/index.php?title=MediaWiki:Common.css&oldid=937"