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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Linha 20: Linha 20:
       overflow: hidden;
       overflow: hidden;
       cursor: pointer;
       cursor: pointer;
      margin: 0;
    }
    /* Fundo borrado */
    .wiki-social-wrapper .social-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--bg-url);
       background-size: cover;
       background-size: cover;
       background-position: center;
       background-position: center;
       transition: filter 0.3s ease;
       filter: blur(6px) brightness(0.7);
       margin: 0;
      transform: scale(1.1);
       z-index: 0;
     }
     }
     .wiki-social-wrapper .social-card::before {
 
    /* Overlay da cor forte */
     .wiki-social-wrapper .social-card::after {
       content: "";
       content: "";
       position: absolute;
       position: absolute;
       inset: 0;
       inset: 0;
       background-color: var(--overlay-color);
       background-color: var(--overlay-color);
       opacity: 0.6;                   /* overlay mais forte */
       opacity: 0.6;
       pointer-events: none;
       z-index: 1;
       transition: opacity 0.3s ease;
       transition: opacity 0.3s ease;
     }
     }
 
     .wiki-social-wrapper .social-card:hover::after {
    .wiki-social-wrapper .social-card:hover {
       opacity: 0.85;
      filter: brightness(1.05);
    }
     .wiki-social-wrapper .social-card:hover::before {
       opacity: 0.85;                   /* overlay ainda mais forte no hover */
     }
     }


    /* Conteúdo acima de tudo */
     .wiki-social-wrapper .social-card-content {
     .wiki-social-wrapper .social-card-content {
       position: relative;
       position: relative;
      z-index: 2;
       display: flex;
       display: flex;
       align-items: center;
       align-items: center;
Linha 49: Linha 59:
       height: 100%;
       height: 100%;
       color: #fff;
       color: #fff;
      transition: filter 0.3s ease;
    }
    .wiki-social-wrapper .social-card:hover .social-card-content {
      filter: brightness(1.1);
     }
     }
     .wiki-social-wrapper .social-icon {
     .wiki-social-wrapper .social-icon {
       width: 2em;
       width: 2em;
Linha 62: Linha 77:
     }
     }


     /* cores de overlay fortes para cada rede */
     /* URLs e cores */
     .wiki-social-wrapper .social-card.discord   { background-image: url('https://i.imgur.com/cbUqsXp.png');   --overlay-color: rgba(114,137,218,1); }
     .wiki-social-wrapper .social-card.discord {
     .wiki-social-wrapper .social-card.tiktok   { background-image: url('https://i.imgur.com/cbUqsXp.png'); --overlay-color: rgba(0,0,0,1);    }
      --bg-url: url('https://i.imgur.com/3ON2kVj.gif');
     .wiki-social-wrapper .social-card.instagram { background-image: url('https://i.imgur.com/cbUqsXp.png'); --overlay-color: rgba(193,53,132,1); }
      --overlay-color: rgba(114,137,218,1);
     .wiki-social-wrapper .social-card.facebook { background-image: url('https://i.imgur.com/YFNvPlO.png'); --overlay-color: rgba(24,119,242,1); }
    }
     .wiki-social-wrapper .social-card.tiktok {
      --bg-url: url('https://i.imgur.com/oY0Z4PMC.jpg');
      --overlay-color: rgba(0,0,0,1);
     }
     .wiki-social-wrapper .social-card.instagram {
      --bg-url: url('https://i.imgur.com/ZXQ7wq3.jpg');
      --overlay-color: rgba(193,53,132,1);
    }
     .wiki-social-wrapper .social-card.facebook {
      --bg-url: url('https://i.imgur.com/9bGkq7Y.jpg');
      --overlay-color: rgba(24,119,242,1);
    }
   </style>
   </style>



Edição das 01h30min de 25 de abril de 2025

 <style>
   .wiki-social-wrapper .social-cards {
     display: grid;
     grid-template-columns: 1fr;
     gap: 0.25em;
   }
   @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;
     margin: 0;
   }
   /* Fundo borrado */
   .wiki-social-wrapper .social-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: var(--bg-url);
     background-size: cover;
     background-position: center;
     filter: blur(6px) brightness(0.7);
     transform: scale(1.1);
     z-index: 0;
   }
   /* Overlay da cor forte */
   .wiki-social-wrapper .social-card::after {
     content: "";
     position: absolute;
     inset: 0;
     background-color: var(--overlay-color);
     opacity: 0.6;
     z-index: 1;
     transition: opacity 0.3s ease;
   }
   .wiki-social-wrapper .social-card:hover::after {
     opacity: 0.85;
   }
   /* Conteúdo acima de tudo */
   .wiki-social-wrapper .social-card-content {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     padding: 0 1em;
     height: 100%;
     color: #fff;
     transition: filter 0.3s ease;
   }
   .wiki-social-wrapper .social-card:hover .social-card-content {
     filter: brightness(1.1);
   }
   .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;
   }
   /* URLs e cores */
   .wiki-social-wrapper .social-card.discord {
     --bg-url: url('https://i.imgur.com/3ON2kVj.gif');
     --overlay-color: rgba(114,137,218,1);
   }
   .wiki-social-wrapper .social-card.tiktok {
     --bg-url: url('https://i.imgur.com/oY0Z4PMC.jpg');
     --overlay-color: rgba(0,0,0,1);
   }
   .wiki-social-wrapper .social-card.instagram {
     --bg-url: url('https://i.imgur.com/ZXQ7wq3.jpg');
     --overlay-color: rgba(193,53,132,1);
   }
   .wiki-social-wrapper .social-card.facebook {
     --bg-url: url('https://i.imgur.com/9bGkq7Y.jpg');
     --overlay-color: rgba(24,119,242,1);
   }
 </style>