Mudanças entre as edições de "Widget:Gurren"
Ir para navegação
Ir para pesquisar
Etiqueta: Revertido |
|||
| Linha 84: | Linha 84: | ||
.home-button-row { | .home-button-row { | ||
display: flex; | display: flex; | ||
flex-wrap: | flex-wrap: nowrap; | ||
overflow-x: auto; | |||
gap: 16px; | gap: 16px; | ||
padding: 10px; | padding: 10px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
scrollbar-width: thin; | |||
scrollbar-color: #333 transparent; | |||
} | |||
.home-button-row::-webkit-scrollbar { | |||
height: 6px; | |||
} | |||
.home-button-row::-webkit-scrollbar-thumb { | |||
background-color: #444; | |||
border-radius: 6px; | |||
} | |||
.home-button-row::-webkit-scrollbar-track { | |||
background: transparent; | |||
} | } | ||
.home-button-item { | .home-button-item { | ||
flex: 0 0 auto; | |||
width: 180px; | width: 180px; | ||
border: 1px solid #333; | border: 1px solid #333; | ||
border-radius: 12px; | border-radius: 12px; | ||
background-color: #1a1a1a; | background-color: #1a1a1a; | ||
overflow: hidden; | |||
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out; | transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out; | ||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); | ||
} | } | ||
| Linha 127: | Linha 139: | ||
width: 100%; | width: 100%; | ||
aspect-ratio: 16/9; | aspect-ratio: 16/9; | ||
} | } | ||
| Linha 136: | Linha 145: | ||
height: 100%; | height: 100%; | ||
object-fit: cover; | object-fit: cover; | ||
border-top-left-radius: 12px; | border-top-left-radius: 12px; | ||
border-top-right-radius: 12px; | border-top-right-radius: 12px; | ||
| Linha 153: | Linha 161: | ||
background: #1a1a1a; | background: #1a1a1a; | ||
color: #3392FF; | color: #3392FF; | ||
padding: 10px 5px; | padding: 10px 5px; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
text-align: center; | text-align: center; | ||
text-decoration: none; | text-decoration: none; | ||
min-height: 2.8em; | min-height: 2.8em; | ||
display: flex; | display: flex; | ||
Edição das 22h53min de 29 de maio de 2025
<style> .home-button-row {
display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 16px; padding: 10px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.home-button-row::-webkit-scrollbar {
height: 6px;
}
.home-button-row::-webkit-scrollbar-thumb {
background-color: #444; border-radius: 6px;
}
.home-button-row::-webkit-scrollbar-track {
background: transparent;
}
.home-button-item {
flex: 0 0 auto; width: 180px; border: 1px solid #333; border-radius: 12px; background-color: #1a1a1a; overflow: hidden; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: light) {
.home-button-item {
border: 1px solid #ccc;
background-color: #fff;
}
}
.home-button-item:hover {
transform: translateY(-3px); border-color: #007bff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.home-button-item a {
display: block; text-decoration: none; color: inherit;
}
.home-button-image {
width: 100%; aspect-ratio: 16/9;
}
.home-button-image img {
width: 100%; height: 100%; object-fit: cover; border-top-left-radius: 12px; border-top-right-radius: 12px; transition: filter 0.3s ease;
}
.home-button-item:hover .home-button-image img {
filter: brightness(1.1);
}
.home-button-title {
font-family: sans-serif; font-weight: bold; font-size: 1em; line-height: 1.3em; background: #1a1a1a; color: #3392FF; padding: 10px 5px; text-transform: uppercase; text-align: center; text-decoration: none; min-height: 2.8em; display: flex; align-items: center; justify-content: center;
}
@media (prefers-color-scheme: light) {
.home-button-title {
background: #fff;
color: #0645AD;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
}
.home-button-item:hover .home-button-title {
background-color: #181818;
}
@media (prefers-color-scheme: light) {
.home-button-item:hover .home-button-title {
background-color: #f9f9f9;
}
}
.home-button-item.disabled {
opacity: 0.4; pointer-events: none; transform: none !important; box-shadow: none !important; border-color: rgba(0, 0, 0, 0.08) !important;
}
.home-button-item.disabled .home-button-title {
color: #aaa;
} </style>