Widget:SearchQuestStyle: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição |
Sem resumo de edição |
||
(9 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
Linha 2: | Linha 2: | ||
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap'); | ||
a, a:hover { | .card a, .card a:hover { | ||
text-decoration: none; | text-decoration: none; | ||
color: inherit; | color: inherit; | ||
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: | place-items: center; | ||
gap: 2rem; | |||
} | } | ||
Linha 37: | 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 43: | Linha 45: | ||
.card { | .card { | ||
font-family: "Sora"; | font-family: "Sora"; | ||
width: clamp( | width: clamp(33.5rem, 2vw, 45rem); | ||
height: clamp( | height: clamp(10.7rem, 2vh, 14rem); | ||
display: flex; | display: flex; | ||
align-items: flex-start; | align-items: flex-start; | ||
Linha 56: | Linha 58: | ||
.card:hover { | .card:hover { | ||
transform: scale(. | 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 73: | ||
font-weight: 500; | font-weight: 500; | ||
color: #200245; | color: #200245; | ||
margin-bottom: | margin-bottom: 0; | ||
} | } | ||
Linha 78: | Linha 82: | ||
-ms-box-orient: vertical; | -ms-box-orient: vertical; | ||
box-orient: vertical; | box-orient: vertical; | ||
-webkit-line-clamp: | -webkit-line-clamp: 3; | ||
-moz-line-clamp: | -moz-line-clamp: 3; | ||
-ms-line-clamp: | -ms-line-clamp: 3; | ||
line-clamp: | line-clamp: 3; | ||
overflow: hidden; | overflow: hidden; | ||
Linha 95: | Linha 99: | ||
} | } | ||
aside { | .card aside { | ||
flex-basis: 40%; | flex-basis: 40%; | ||
aspect-ratio: 9/8; | aspect-ratio: 9/8; | ||
Linha 104: | Linha 108: | ||
} | } | ||
aside img { | .card aside img { | ||
width: 105%; | width: 105%; | ||
height: auto; | height: auto; | ||
transition: transform .25s ease; | transition: transform .25s ease; | ||
border-left: 2px solid #9D72D6; | |||
} | } | ||
.icon-container { | .icon-container { | ||
position: absolute; | |||
bottom: 1.4rem; | |||
display: flex; | display: flex; | ||
align-items: flex-start; | align-items: flex-start; | ||
Linha 119: | Linha 126: | ||
.icon-container img { | .icon-container img { | ||
width: | width: 28px; | ||
} | } | ||
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;
}
- 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;
}
- 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>