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

Ir para navegação Ir para pesquisar
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
(20 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<style>
<style>
* {
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Sora', sans-serif;
}


a {
a, a:hover {
     text-decoration: none;
     text-decoration: none;
     color: inherit;
     color: inherit;
}
}


#app {
.card h2 {
     padding: 1rem 2rem;
margin-top:0;
border-bottom: 0 !important;
    font-family: "Sora" !important;
}
 
.custom-checkbox {
cursor: pointer;
}
 
#app-quests{
box-sizing: border-box;
     padding: 1rem 0;
     width: 100%;
     width: 100%;
     display: grid;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
     grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
     gap: 1.5rem;
    place-items: center;
     gap: 2rem;
}
}


Linha 36: Linha 43:


.card {
.card {
     width: clamp(37rem, 2vw, 44rem);
    font-family: "Sora";
     height: clamp(11rem, 2vh, 14rem);
     width: clamp(33.5rem, 2vw, 45rem);
     height: clamp(10.7rem, 2vh, 14rem);
     display: flex;
     display: flex;
     align-items: flex-start;
     align-items: flex-start;
Linha 45: Linha 53:
     overflow: hidden;
     overflow: hidden;
     border: 2px solid #9D72D6;
     border: 2px solid #9D72D6;
    transition: all .25s ease;
}
.card:hover {
  transform: scale(.975);
}
}


.card main {
.card main {
    position: relative;
     flex-basis: 60%;
     flex-basis: 60%;
     height: 100%;
     height: 100%;
     padding: 1rem;
     padding: 1rem;
    padding-top: .5rem;
}
}


Linha 57: Linha 72:
     font-weight: 500;
     font-weight: 500;
     color: #200245;
     color: #200245;
     margin-bottom: .35rem;
     margin-bottom: 0;
}
}


Linha 66: Linha 81:
     -ms-box-orient: vertical;
     -ms-box-orient: vertical;
     box-orient: vertical;
     box-orient: vertical;
     -webkit-line-clamp: 5;
     -webkit-line-clamp: 3;
     -moz-line-clamp: 5;
     -moz-line-clamp: 3;
     -ms-line-clamp: 5;
     -ms-line-clamp: 3;
     line-clamp: 5;
     line-clamp: 3;
     overflow: hidden;
     overflow: hidden;


Linha 85: Linha 100:
aside {
aside {
     flex-basis: 40%;
     flex-basis: 40%;
    height: 100%;
     aspect-ratio: 9/8;
     aspect-ratio: 9/7;


     display: flex;
     display: flex;
Linha 94: Linha 108:


aside img {
aside img {
     width: 103%;
     width: 105%;
     height: auto;
     height: auto;
     transition: transform .25s ease;
     transition: transform .25s ease;
}
.card:hover aside img {
    transform: scale(1.17) rotate(2.5deg);
}
}


.icon-container {
.icon-container {
    position: absolute;
    bottom: 1.4rem;
     display: flex;
     display: flex;
     align-items: flex-start;
     align-items: flex-start;
Linha 112: Linha 124:


.icon-container img {
.icon-container img {
     width: 16px;
     width: 28px;
}
 
.search-button {
font-family: 'Sora', sans-serif;
    font-size: 1rem;
    background: #9e63c3;
    border: 2px solid #c981f5;
    padding: .4rem 1.5rem;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: all .25s ease;
}
.search-button:hover {
  transform: scale(.97);
}
}


Menu de navegação