Mudanças entre as edições de "Widget:Gurren"
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; | ||
filter: blur(6px) brightness(0.7); | |||
transform: scale(1.1); | |||
z-index: 0; | |||
} | } | ||
.wiki-social-wrapper .social-card:: | |||
/* 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; | opacity: 0.6; | ||
z-index: 1; | |||
transition: opacity 0.3s ease; | transition: opacity 0.3s ease; | ||
} | } | ||
.wiki-social-wrapper .social-card:hover::after { | |||
opacity: 0.85; | |||
.wiki-social-wrapper .social-card:hover:: | |||
opacity: 0.85; | |||
} | } | ||
/* 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 | /* URLs e cores */ | ||
.wiki-social-wrapper .social-card.discord | .wiki-social-wrapper .social-card.discord { | ||
.wiki-social-wrapper .social-card.tiktok | --bg-url: url('https://i.imgur.com/3ON2kVj.gif'); | ||
.wiki-social-wrapper .social-card.instagram { | --overlay-color: rgba(114,137,218,1); | ||
.wiki-social-wrapper .social-card.facebook | } | ||
.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> | ||