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

Edição das 00h38min de 25 de abril de 2025

@media screen and (max-width: 1024px) { .wiki-social-wrapper .social-cards { grid-template-columns: repeat(2, 1fr); gap: 0.5em; } }

.wiki-social-wrapper .social-card { position: relative; height: 4em; border-radius: 0.75em; overflow: hidden; cursor: pointer; background-size: cover; background-position: center; transition: filter 0.3s ease, box-shadow 0.3s ease; margin: 0; }

.wiki-social-wrapper .social-card::before { content: ""; position: absolute; inset: 0; background-color: var(--overlay-color); opacity: 0.3; /* overlay suave */ pointer-events: none; transition: opacity 0.3s ease; }

.wiki-social-wrapper .social-card:hover { filter: brightness(1.05); /* leve brilho */ }

.wiki-social-wrapper .social-card:hover::before { opacity: 0.5; /* overlay um pouco mais forte */ }

.wiki-social-wrapper .social-card-content { position: relative; display: flex; align-items: center; padding: 0 1em; height: 100%; color: #fff; }

.wiki-social-wrapper .social-icon { width: 2em; height: 2em; margin-right: 0.75em; flex-shrink: 0; }

.wiki-social-wrapper .social-name { font-size: 1.25em; line-height: 1; font-weight: bold; }

/* cada rede define sua cor de overlay forte aqui */ .wiki-social-wrapper .social-card.discord { background-image: url('https://i.imgur.com/3ON2kVj.gif'); --overlay-color: rgba(114, 137, 218, 1); }

.wiki-social-wrapper .social-card.tiktok { background-image: url('https://i.imgur.com/oY0Z4PMC.jpg'); --overlay-color: rgba(0, 0, 0, 1); }

.wiki-social-wrapper .social-card.instagram { background-image: url('https://i.imgur.com/ZXQ7wq3.jpg'); --overlay-color: rgba(193, 53, 132, 1); }

.wiki-social-wrapper .social-card.facebook { background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); --overlay-color: rgba(24, 119, 242, 1); } </style>

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

Edição das 00h38min de 25 de abril de 2025

Menu de navegação

Pesquisa

@@ Linha 20: / Linha 20: @@
 overflow: hidden;
 cursor: pointer;
-transition: transform .2s, box-shadow .2s;
 background-size: cover;
 background-position: center;
+transition: filter 0.3s ease, box-shadow 0.3s ease;
 margin: 0;
 }
@@ Linha 30: / Linha 30: @@
 position: absolute;
 inset: 0;
-background-color: rgba(0, 0, 0, 0.3);
+background-color: var(--overlay-color);
-mix-blend-mode: multiply;
+opacity: 0.3;
+/* overlay suave */
 pointer-events: none;
-transition: background-color .2s;
+transition: opacity 0.3s ease;
 }
 .wiki-social-wrapper .social-card:hover {
-transform: translateY(-2px);
+filter: brightness(1.05);
-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+/* leve brilho */
 }
 .wiki-social-wrapper .social-card:hover::before {
-background-color: rgba(0, 0, 0, 0.5);
+opacity: 0.5;
+/* overlay um pouco mais forte */
 }
@@ Linha 49: / Linha 51: @@
 display: flex;
 align-items: center;
-/* garante alinhamento vertical */
 padding: 0 1em;
 height: 100%;
@@ Linha 57: / Linha 58: @@
 .wiki-social-wrapper .social-icon {
 width: 2em;
-/* ligeiramente maior */
 height: 2em;
 margin-right: 0.75em;
@@ Linha 65: / Linha 65: @@
 .wiki-social-wrapper .social-name {
 font-size: 1.25em;
-/* fonte maior */
 line-height: 1;
-/* evita desalinhamento */
 font-weight: bold;
 }
-/* backgrounds individuais */
+/* cada rede define sua cor de overlay forte aqui */
 .wiki-social-wrapper .social-card.discord {
 background-image: url('https://i.imgur.com/3ON2kVj.gif');
+--overlay-color: rgba(114, 137, 218, 1);
 }
 .wiki-social-wrapper .social-card.tiktok {
 background-image: url('https://i.imgur.com/oY0Z4PMC.jpg');
+--overlay-color: rgba(0, 0, 0, 1);
 }
 .wiki-social-wrapper .social-card.instagram {
 background-image: url('https://i.imgur.com/ZXQ7wq3.jpg');
+--overlay-color: rgba(193, 53, 132, 1);
 }
 .wiki-social-wrapper .social-card.facebook {
 background-image: url('https://i.imgur.com/9bGkq7Y.jpg');
+--overlay-color: rgba(24, 119, 242, 1);
 }
 </style>