Widget:SearchQuestStyle: 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
(5 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 23: Linha 23:
     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 43: Linha 44:
.card {
.card {
     font-family: "Sora";
     font-family: "Sora";
     width: clamp(36rem, 2vw, 45rem);
     width: clamp(33.5rem, 2vw, 45rem);
     height: clamp(11rem, 2vh, 14rem);
     height: clamp(10.7rem, 2vh, 14rem);
     display: flex;
     display: flex;
     align-items: flex-start;
     align-items: flex-start;
Linha 56: Linha 57:


.card:hover {  
.card:hover {  
   transform: scale(.95) rotate(-2deg);
   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 69: Linha 72:
     font-weight: 500;
     font-weight: 500;
     color: #200245;
     color: #200245;
     margin-bottom: .35rem;
     margin-bottom: 0;
}
}


Linha 78: 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 111: Linha 114:


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


.icon-container img {
.icon-container img {
     width: 16px;
     width: 28px;
}
}



Edição das 13h29min de 8 de maio de 2024

<style> @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

a, a:hover {

   text-decoration: none;
   color: inherit;

}

.card h2 {

margin-top:0;
border-bottom: 0 !important;
   font-family: "Sora" !important;

}

.custom-checkbox {

cursor: pointer;

}

  1. app-quests{

box-sizing: border-box;

   padding: 1rem 0;
   width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
   place-items: center;
   gap: 2rem;

}

  1. quests-form {
   padding: 2rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;

}

.level {

 opacity: .6;
 font-size: .8rem;
 letter-spacing: .05rem;
 padding-inline-start: .2rem;

}

.card {

   font-family: "Sora";
   width: clamp(33.5rem, 2vw, 45rem);
   height: clamp(10.7rem, 2vh, 14rem);
   display: flex;
   align-items: flex-start;
   gap: .725rem;
   border-radius: 8px;
   overflow: hidden;
   border: 2px solid #9D72D6;
   transition: all .25s ease;

}

.card:hover {

 transform: scale(.975);

}

.card main {

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

}

.card main h2 {

   font-size: 1.5rem;
   font-weight: 500;
   color: #200245;
   margin-bottom: 0;

}

.description-container {

   display: -webkit-box;
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
   -ms-box-orient: vertical;
   box-orient: vertical;
   -webkit-line-clamp: 3;
   -moz-line-clamp: 3;
   -ms-line-clamp: 3;
   line-clamp: 3;
   overflow: hidden;
   text-overflow: ellipsis;
   overflow: hidden;

}

.card main p {

   font-size: clamp(.75rem, 1vw, .8rem);
   font-weight: 400;
   text-align: justify;
   color: #717072;

}

aside {

   flex-basis: 40%;
   aspect-ratio: 9/8;
   display: flex;
   align-items: stretch;
   overflow: hidden;

}

aside img {

   width: 105%;
   height: auto;
   transition: transform .25s ease;

}

.icon-container {

   position: absolute;
   bottom: 1.4rem;
   display: flex;
   align-items: flex-start;
   gap: .5rem;
   margin-block-end: .3rem;

}

.icon-container img {

   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);

}

.d-flex {

   display: flex;
   gap: 1.5rem;

}

.checkbox-container {

   display: flex;
   flex-direction: column-reverse;
   justify-content: center;
   align-items: center;
   gap: .35rem;

}

.checkbox-container label {

   font-size: 1.02rem;

}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {

   .custom-checkbox input[type=checkbox] {
     --active: #275EFE;
     --active-inner: #fff;
     --focus: 2px rgba(39, 94, 254, .3);
     --border: #BBC1E1;
     --border-hover: #275EFE;
     --background: #fff;
     --disabled: #F6F8FF;
     --disabled-inner: #E1E6F9;
     -webkit-appearance: none;
     -moz-appearance: none;
     height: 21px;
     outline: none;
     display: inline-block;
     vertical-align: top;
     position: relative;
     margin: 0;
     cursor: pointer;
     border: 1px solid var(--bc, var(--border));
     background: var(--b, var(--background));
     transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
   }
   .custom-checkbox input[type=checkbox]:after {
     content: "";
     display: block;
     left: 0;
     top: 0;
     position: absolute;
     transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
   }
   .custom-checkbox input[type=checkbox]:checked {
     --b: var(--active);
     --bc: var(--active);
     --d-o: .3s;
     --d-t: .6s;
     --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
   }
   .custom-checkbox input[type=checkbox]:disabled {
     --b: var(--disabled);
     cursor: not-allowed;
     opacity: 0.9;
   }
   .custom-checkbox input[type=checkbox]:disabled:checked {
     --b: var(--disabled-inner);
     --bc: var(--border);
   }
   .custom-checkbox input[type=checkbox]:disabled + label {
     cursor: not-allowed;
   }
   .custom-checkbox input[type=checkbox]:hover:not(:checked):not(:disabled) {
     --bc: var(--border-hover);
   }
   .custom-checkbox input[type=checkbox]:focus {
     box-shadow: 0 0 0 var(--focus);
   }
   .custom-checkbox input[type=checkbox]:not(.switch) {
     width: 21px;
   }
   .custom-checkbox input[type=checkbox]:not(.switch):after {
     opacity: var(--o, 0);
   }
   .custom-checkbox input[type=checkbox]:not(.switch):checked {
     --o: 1;
   }
   .custom-checkbox input[type=checkbox] + label {
     display: inline-block;
     vertical-align: middle;
     cursor: pointer;
     margin-left: 4px;
   }
   .custom-checkbox input[type=checkbox]:not(.switch) {
     border-radius: 7px;
   }
   .custom-checkbox input[type=checkbox]:not(.switch):after {
     width: 5px;
     height: 9px;
     border: 2px solid var(--active-inner);
     border-top: 0;
     border-left: 0;
     left: 7px;
     top: 4px;
     transform: rotate(var(--r, 20deg));
   }
   .custom-checkbox input[type=checkbox]:not(.switch):checked {
     --r: 43deg;
   }
 }
 .custom-checkbox * {
   box-sizing: inherit;
 }
 .custom-checkbox *:before,
 .custom-checkbox *:after {
   box-sizing: inherit;
 }

</style>