5 805
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 5: | Linha 5: | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title> | <title>Seleção e Exibição de Imagens</title> | ||
<style> | <style> | ||
.d-flex { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
flex-direction: column; | |||
margin-top: -15px; | |||
/* Ajuste este valor conforme necessário para subir o botão */ | |||
} | |||
.hidden { | .hidden { | ||
display: none; | display: none; | ||
Linha 14: | Linha 23: | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
justify-content: center; | |||
gap: 10px; | gap: 10px; | ||
margin-top: 5px; | |||
} | } | ||
.image-item { | .image-container .image-item { | ||
flex: 1 0 30%; | |||
text-align: center; | text-align: center; | ||
} | } | ||
.image-container img { | |||
object-fit: cover; /* Mantém a proporção da imagem, cortando se necessário */ | |||
margin-bottom: 5px; | |||
} | |||
.image-info { | .image-info { | ||
margin-top: | margin-top: 5px; | ||
} | |||
select, | |||
input[type="text"], | |||
button { | |||
margin: 5px; | |||
} | |||
#filterButton, | |||
#searchButton { | |||
background: none; | |||
/* Remove o fundo do botão */ | |||
border: none; | |||
/* Remove a borda do botão */ | |||
padding: 0; | |||
/* Remove o padding do botão */ | |||
cursor: pointer; | |||
/* Mostra o cursor de ponteiro ao passar sobre o botão */ | |||
margin-top: 5px; | |||
/* Ajuste a margem superior para subir o botão */ | |||
} | |||
#filterButton img, | |||
#searchButton img { | |||
border-radius: 12px; | |||
width: auto; | |||
/* Garante que a largura se ajuste ao tamanho original da imagem */ | |||
height: auto; | |||
/* Garante que a altura se ajuste ao tamanho original da imagem */ | |||
} | |||
.mw-body-content { | |||
display: flex; | |||
} | } | ||
.mw-parser-output { | |||
display: inline-block; | |||
padding: .5rem 2rem; | |||
margin: 0 auto; | |||
border: 30px solid transparent; | |||
border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38; | |||
min-width: 340px; | |||
min-height: 270px; | |||
} | |||
.input-group { | .input-group { | ||
margin- | position: relative; | ||
margin: 20px 0; | |||
/* Ajuste a margem para mover o campo para cima */ | |||
} | |||
.input-group label { | |||
position: absolute; | |||
top: -18px; | |||
/* Eleva o texto para cima */ | |||
background: none; | |||
padding: 0 5px; | |||
font-size: 14px; | |||
font-weight: bold; | |||
color: #0d0d0d; | |||
} | } | ||
.maps__select { | .maps__select { | ||
width: 100%; | width: 100%; | ||
padding: 5px; | /* Mantém a largura total disponível */ | ||
padding: 10px; | |||
font-size: 16px; | |||
border-radius: 5px; | |||
border: 1px solid #ccc; | |||
appearance: none; | |||
background-color: #fff; | |||
/* Adiciona um fundo branco */ | |||
box-sizing: border-box; | |||
/* Inclui o padding e a borda na largura total */ | |||
} | |||
.input-group input[type="text"] { | |||
width: 100%; | |||
/* Mantém a largura total disponível */ | |||
padding: 10px; | |||
font-size: 16px; | |||
border-radius: 5px; | |||
border: 1px solid #ccc; | |||
box-sizing: border-box; | |||
/* Inclui o padding e a borda na largura total */ | |||
} | } | ||
.maps__label { | .maps__label { | ||
position: absolute; | |||
top: -18px; | |||
/* Eleva o texto um pouco mais para cima */ | |||
background: none; | |||
padding: 0 5px; | |||
font-size: 14px; | |||
font-weight: bold; | font-weight: bold; | ||
/* Deixa o texto em negrito */ | |||
color: #0d0d0d; | |||
} | |||
.hover-minimize:hover { | |||
transform: scale(0.95); | |||
/* Adiciona um efeito de minimizar ao passar o mouse */ | |||
} | } | ||
.filter-container { | .filter-container { | ||
margin- | display: flex; | ||
margin- | align-items: center; | ||
} | |||
.filter-container input[type="checkbox"] { | |||
margin: 0; | |||
padding: 0; | |||
width: auto; | |||
/* Ajusta o tamanho da checkbox conforme necessário */ | |||
height: auto; | |||
/* Ajusta o tamanho da checkbox conforme necessário */ | |||
/* Alinha verticalmente a checkbox com o texto */ | |||
vertical-align: middle; | |||
} | |||
.filter-label { | |||
margin-left: 10px; | |||
/* Espaço entre a checkbox e o texto */ | |||
font-size: 14px; | |||
font-weight: bold; | |||
color: #0d0d0d; | |||
line-height: 1.5; | |||
/* Ajusta a altura da linha para um alinhamento adequado */ | |||
} | } | ||
</style> | </style> |