Difference between revisions of "MediaWiki:Common.css"

From XilePK - Ragnarok Online Server
Jump to navigation Jump to search
Line 1: Line 1:
−
/* CSS placed here will be applied to all skins */
+
/* ===== [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 21: Line 9:
 
}
 
}
  
−
/* Tooltip padrão */
+
/* ===== [CONTAINERS DE NPC] ===== */
−
.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 */
 
−
.warp-copy.copied::after {
 
−
    content: "Copied!" !important;
 
−
    background-color: #4CAF50 !important;
 
−
    opacity: 1 !important;
 
−
    visibility: visible !important;
 
−
}
 
−
 
 
−
/* ========== ESTILOS ESPECÍFICOS PARA NPCs ========== */
 
 
.tile-row {
 
.tile-row {
 
     display: flex;
 
     display: flex;
 
     flex-flow: row wrap;
 
     flex-flow: row wrap;
 +
    gap: 15px;
 
     margin-bottom: 1em;
 
     margin-bottom: 1em;
 
}
 
}
  
 
.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;
−
}
+
     max-width: 200px;
−
 
+
     flex: 1 0 auto;
−
.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;
 
 
}
 
}
  
 +
/* ===== [ÁREA DA IMAGEM] ===== */
 
.tile-top.tile-image {
 
.tile-top.tile-image {
 
     display: flex;
 
     display: flex;
Line 123: Line 32:
 
     justify-content: center;
 
     justify-content: center;
 
     background-color: #949eaa;
 
     background-color: #949eaa;
−
    overflow: visible;
 
 
     padding: 0;
 
     padding: 0;
−
     height: auto;
+
     height: 180px; /* Altura fixa para uniformidade */
−
     width: 100%;
+
     overflow: hidden;
−
    box-sizing: border-box;
 
−
}
 
−
 
 
−
.tile-top.tile-image a {
 
−
    width: 100%;
 
−
    height: 100%;
 
−
    display: flex;
 
−
    justify-content: center;
 
−
    align-items: center;
 
 
}
 
}
  
 +
/* Imagem padrão (auto-size) */
 
.tile-top.tile-image img {
 
.tile-top.tile-image img {
 
     display: block;
 
     display: block;
 
     max-width: 100%;
 
     max-width: 100%;
 +
    max-height: 100%;
 
     width: auto;
 
     width: auto;
 
     height: auto;
 
     height: auto;
−
     margin: 0;
+
     margin: 0 auto;
 +
    object-fit: contain;
 
     transition: 0.4s ease-out;
 
     transition: 0.4s ease-out;
−
    object-fit: contain;
 
 
}
 
}
  
−
.tile-bottom {
+
/* Imagens com dimensão personalizada */
−
     background: #ffffff;
+
.tile-top.tile-image img.custom-size {
−
    border-top: 1px solid #e4eaee;
+
     width: var(--custom-width, auto);
−
    width: 100%;
+
     height: var(--custom-height, auto);
−
     padding: 1rem 1.5rem 0.6rem;
 
 
}
 
}
  
−
.tile-bottom.link-button {
+
/* Efeito hover */
−
    align-self: center;
+
.tile-halves:hover .tile-top img {
−
    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);
 
     transform: scale(1.04);
 
}
 
}
  
−
.mainpage-contents .tile-halves:last-child {
+
/* ===== [ÁREA DE TEXTO] ===== */
−
     margin-right: 0;
+
.tile-bottom {
 +
    background: #ffffff;
 +
    border-top: 1px solid #e4eaee;
 +
    padding: 1rem;
 +
     text-align: center;
 
}
 
}
  
Line 182: Line 71:
 
     font-size: 0.8em;
 
     font-size: 0.8em;
 
     color: #666;
 
     color: #666;
−
     margin-top: -5px;
+
     margin-top: 5px;
−
    text-align: center;
 
 
     font-style: italic;
 
     font-style: italic;
−
    line-height: 1.2;
 
 
}
 
}
  
−
.mainpage-contents.tile-row {
+
/* ===== [TOOLTIPS] ===== */
−
     display: flex;
+
.warp-copy::after {
−
     flex-flow: row wrap;
+
     content: "Copy";
−
     gap: 15px;
+
    position: absolute;
−
     justify-content: flex-start;
+
     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;
 
}
 
}
  
−
.mainpage-contents .contents-equipment.tile-halves {
+
/* Posicionamento do tooltip para imagens */
−
     margin-right: 0;
+
.tile-top.tile-image .warp-copy::after {
−
     flex: 0 0 auto;
+
     bottom: -25px;
−
    min-width: 150px;
+
     top: auto;
−
    max-width: 200px;
 
 
}
 
}
  
−
/* Título do NPC */
+
/* Posicionamento do tooltip para texto */
−
.tile-bottom.link-button h2 .warp-copy {
+
.tile-bottom .warp-copy::after {
−
    color: #000080;
+
     bottom: calc(100% + 5px);
−
    font-weight: bold;
 
−
     display: block;
 
−
    text-align: center;
 
−
    text-decoration: none;
 
 
}
 
}
  
−
.tile-bottom.link-button h2 {
+
.warp-copy:hover::after {
−
     position: relative;
+
     opacity: 1;
−
     overflow: visible;
+
     visibility: visible;
 
}
 
}
−
/* Classes para dimensionamento manual */
+
 
−
.npc-image-small {
+
.warp-copy.copied::after {
−
    max-width: 150px !important;
+
     content: "Copied!";
−
}
+
     background: #4CAF50;
−
.npc-image-medium {
 
−
     max-width: 200px !important;
 
−
}
 
−
.npc-image-large {
 
−
     max-width: 250px !important;
 
 
}
 
}

Revision as of 15:38, 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;
    max-width: 200px;
    flex: 1 0 auto;
}

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

/* Imagem padrão (auto-size) */
.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;
}

/* Imagens com dimensão personalizada */
.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] ===== */
.tile-bottom {
    background: #ffffff;
    border-top: 1px solid #e4eaee;
    padding: 1rem;
    text-align: center;
}

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

/* ===== [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;
}

/* Posicionamento do tooltip para imagens */
.tile-top.tile-image .warp-copy::after {
    bottom: -25px;
    top: auto;
}

/* Posicionamento do tooltip para texto */
.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;
}
Retrieved from "https://xilepk.net/wiki/index.php?title=MediaWiki:Common.css&oldid=922"