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
 
(25 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<style>
<style>
a {
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');
 
.card a, .card a:hover {
     text-decoration: none;
     text-decoration: none;
     color: inherit;
     color: inherit;
}
}


#quests-container {
.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 24: Linha 38:
   opacity: .6;
   opacity: .6;
   font-size: .8rem;
   font-size: .8rem;
  font-weight: bolder;
   letter-spacing: .05rem;
   letter-spacing: .05rem;
   padding-inline-start: .2rem;
   padding-inline-start: .2rem;
Linha 29: Linha 44:


.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 38: Linha 54:
     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 50: Linha 73:
     font-weight: 500;
     font-weight: 500;
     color: #200245;
     color: #200245;
     margin-bottom: .35rem;
     margin-bottom: 0;
}
}


Linha 59: Linha 82:
     -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 76: Linha 99:
}
}


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


     display: flex;
     display: flex;
Linha 86: Linha 108:
}
}


aside img {
.card aside img {
     width: 103%;
     width: 105%;
     height: auto;
     height: auto;
     transition: transform .25s ease;
     transition: transform .25s ease;
}
     border-left: 2px solid #9D72D6;
 
.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 105: Linha 126:


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


Linha 126: Linha 162:
}
}


@supports (-webkit-quests-containerearance: none) or (-moz-quests-containerearance: none) {
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
     .custom-checkbox input[type=checkbox] {
     .custom-checkbox input[type=checkbox] {
       --active: #275EFE;
       --active: #275EFE;
Linha 136: Linha 172:
       --disabled: #F6F8FF;
       --disabled: #F6F8FF;
       --disabled-inner: #E1E6F9;
       --disabled-inner: #E1E6F9;
       -webkit-quests-containerearance: none;
       -webkit-appearance: none;
       -moz-quests-containerearance: none;
       -moz-appearance: none;
       height: 21px;
       height: 21px;
       outline: none;
       outline: none;
Linha 223: Linha 259:
     box-sizing: inherit;
     box-sizing: inherit;
   }
   }
</style>
</style>

Edição atual tal como às 11h53min de 29 de maio de 2024

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

.card a, .card 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;
 font-weight: bolder;
 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;

}

.card aside {

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

}

.card aside img {

   width: 105%;
   height: auto;
   transition: transform .25s ease;
   border-left: 2px solid #9D72D6;

}

.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>