Widget:AddonsStyle: mudanças entre as edições

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(84 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<style>
<style>
   
   
        .input-group { margin-bottom: 1em; position: relative; }
    .input-group { margin-bottom: 1em; position: relative; text-align: center; }
.dropdown {
.dropdown {
     border: 1px solid #ccc;
display: none;
     display: none;
position: absolute;
background-color: #fff;
overflow-y: auto;
max-width: 30; /* Ajusta a largura mínima */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil */
}
    .image-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .image-item {
        margin-bottom: 1em;
        text-align: center;
    }
    .image-item img {
        display: block;
        margin: 0 auto;
    }
 
    .variations-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 1em;
    }
.variation-item {
    width: 450px; /* Tamanho fixo para os cartões */
    height: 325px; /* Tamanho fixo para os cartões */
    padding: 20px; /* Mais espaço interno para um layout mais arejado */
    box-sizing: border-box;
    text-align: center;
    border: 2px solid #ddd; /* Borda suave e clara */
    border-radius: 12px; /* Bordas arredondadas */
    background-color: #fff; /* Fundo branco para contraste */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidade */
    transition: all 0.3s ease; /* Transição suave ao passar o mouse */
    display: flex;
    flex-direction: column;
    margin-right: 8px;
    justify-content: space-between; /* Garante que o botão fique na parte inferior */
}
 
.variation-item:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Aumenta a sombra no hover */
    background-color: #f9f9f9; /* Muda o fundo no hover */
}
 
.variation-item img {
    display: block;
    margin: 0 auto 15px; /* Ajusta o espaçamento entre a imagem e o texto */
    max-width: 90%; /* Controla a largura da imagem para que não ultrapasse o cartão */
    max-height: 70%; /* Controla a altura da imagem */
    object-fit: contain; /* Garante que a imagem se ajuste sem ser cortada */
    margin-bottom: 15px; /* Mais espaço abaixo da imagem */
}
 
.variation-item .swap-button {
    cursor: pointer;
    width: 19px; /* Tamanho do botão */
    height: 19px; /* Tamanho do botão */
    background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center ;
    background-size: contain;
align-self:center;
}
 
#imageSearch {
    width: 30%;
    padding: 12px 15px; /* Aumenta o tamanho do campo */
    font-size: 18px; /* Tamanho da fonte mais legível */
    border-radius: 14px; /* Bordas arredondadas */
     border: 1px solid #ccc; /* Borda suave */
    background-color: #f9f9f9; /* Cor de fundo mais clara */
    transition: all 0.3s ease; /* Transição suave para foco */
}
 
#imageSearch:focus {
    border-color: #d1c1e0; /* Borda azul quando em foco */
    background-color: #f2e8f8; /* Cor de fundo ao focar */
     outline: none; /* Remove o contorno padrão */
}
#dropdown {
     position: absolute;
     position: absolute;
     background-color: #fff;
     top: 100%; /* Coloca o dropdown abaixo do input */
     z-index: 1000;
     left: 50%; /* Alinha o centro do dropdown com o centro do campo de entrada */
     max-height: 150px;
     transform: translateX(-50%); /* Ajusta para que o centro do dropdown esteja alinhado com o campo de entrada */
     overflow-y: auto;
     overflow-y: auto;
     width: 100%;
     background-color: white;
     min-width: 30; /* Ajusta a largura mínima */
     border-radius: 14px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil */
    border: 1px solid #ccc;
    display: none; /* Inicialmente invisível */
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    text-align: center;
}     
#imageSearch, #dropdown {
    width: 30%;
    box-sizing: border-box; /* Garante que padding e borda sejam incluídos na largura */
    font-size: 18px;
    border-radius: 14px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}
.dropdown-item {
    padding: 10px;
    cursor: pointer;
    display: flex;
}
}


        .dropdown-item {
.dropdown-item:hover {
            padding: 8px;
    background-color: #f2e8f8;
            cursor: pointer;
    border-color: #007bff; /* Altere para a cor que preferir */
            display: flex;
}
            align-items: center;
        }
        .dropdown-item img {
            margin-right: 10px;
        }
        .dropdown-item:hover {
            background-color: #f0f0f0;
        }
        .image-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .image-item {
            margin-bottom: 1em;
            text-align: center;
        }
        .image-item img {
            display: block;
            margin: 0 auto;
        }


        .variations-container {
.dropdown-item:focus {
            display: flex;
    border-color: #007bff; /* Altere para a cor que preferir */
            flex-wrap: wrap;
}
            justify-content: center;
            margin-top: 1em;
        }


        .variation-item {
            width: 35%;
            box-sizing: border-box;
            margin: 5px;
            text-align: center;
            border: 1px solid ;
            padding: 10px;
        }


        .variation-item img {
.dropdown-item img {
            display: block;
    margin-right: 10px;
            margin: 0 auto 10px;
}
        }
 
        .swap-button {
            margin-top: 10px;
            cursor: pointer;
            width: 15px;
            height: 15px;
            background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
            background-size: contain;
            display: block;
            margin: 0 auto;
        }
</style>
</style>

Edição atual tal como às 13h35min de 24 de dezembro de 2024

<style>

   .input-group { margin-bottom: 1em; position: relative; text-align: center; }

.dropdown { display: none; position: absolute; background-color: #fff; overflow-y: auto; max-width: 30; /* Ajusta a largura mínima */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil */ }

   .image-container {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }
   .image-item { 
       margin-bottom: 1em; 
       text-align: center;
   }
   .image-item img {
       display: block;
       margin: 0 auto;
   }
   .variations-container {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       margin-top: 1em;
   }

.variation-item {

   width: 450px; /* Tamanho fixo para os cartões */
   height: 325px; /* Tamanho fixo para os cartões */
   padding: 20px; /* Mais espaço interno para um layout mais arejado */
   box-sizing: border-box;
   text-align: center;
   border: 2px solid #ddd; /* Borda suave e clara */
   border-radius: 12px; /* Bordas arredondadas */
   background-color: #fff; /* Fundo branco para contraste */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidade */
   transition: all 0.3s ease; /* Transição suave ao passar o mouse */
   display: flex;
   flex-direction: column;
   margin-right: 8px;
   justify-content: space-between; /* Garante que o botão fique na parte inferior */

}

.variation-item:hover {

   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Aumenta a sombra no hover */
   background-color: #f9f9f9; /* Muda o fundo no hover */

}

.variation-item img {

   display: block;
   margin: 0 auto 15px; /* Ajusta o espaçamento entre a imagem e o texto */
   max-width: 90%; /* Controla a largura da imagem para que não ultrapasse o cartão */
   max-height: 70%; /* Controla a altura da imagem */
   object-fit: contain; /* Garante que a imagem se ajuste sem ser cortada */
   margin-bottom: 15px; /* Mais espaço abaixo da imagem */

}

.variation-item .swap-button {

   cursor: pointer;
   width: 19px; /* Tamanho do botão */
   height: 19px; /* Tamanho do botão */
   background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center ;
   background-size: contain;

align-self:center; }

  1. imageSearch {
   width: 30%;
   padding: 12px 15px; /* Aumenta o tamanho do campo */
   font-size: 18px; /* Tamanho da fonte mais legível */
   border-radius: 14px; /* Bordas arredondadas */
   border: 1px solid #ccc; /* Borda suave */
   background-color: #f9f9f9; /* Cor de fundo mais clara */
   transition: all 0.3s ease; /* Transição suave para foco */

}

  1. imageSearch:focus {
   border-color: #d1c1e0; /* Borda azul quando em foco */
   background-color: #f2e8f8; /* Cor de fundo ao focar */
   outline: none; /* Remove o contorno padrão */

}

  1. dropdown {
   position: absolute;
   top: 100%; /* Coloca o dropdown abaixo do input */
   left: 50%; /* Alinha o centro do dropdown com o centro do campo de entrada */
   transform: translateX(-50%); /* Ajusta para que o centro do dropdown esteja alinhado com o campo de entrada */ 
   overflow-y: auto;
   background-color: white;
   border-radius: 14px;
   border: 1px solid #ccc;
   display: none; /* Inicialmente invisível */
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   z-index: 10;
   text-align: center;

}

  1. imageSearch, #dropdown {
   width: 30%;
   box-sizing: border-box; /* Garante que padding e borda sejam incluídos na largura */
   font-size: 18px;
   border-radius: 14px;
   border: 1px solid #ccc;
   transition: all 0.3s ease;

} .dropdown-item {

   padding: 10px;
   cursor: pointer;
   display: flex;

}

.dropdown-item:hover {

   background-color: #f2e8f8;
   border-color: #007bff; /* Altere para a cor que preferir */

}

.dropdown-item:focus {

   border-color: #007bff; /* Altere para a cor que preferir */

}


.dropdown-item img {

   margin-right: 10px;

} </style>