Widget:SearchQuestStyle
<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;
}
- app-quests{
box-sizing: border-box;
padding: 1rem 2rem; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr)); gap: 1.5rem;
}
- 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(37rem, 2vw, 44rem); height: clamp(11rem, 2vh, 14rem); display: flex; align-items: flex-start;
gap: .725rem; border-radius: 8px; overflow: hidden; border: 2px solid #9D72D6;
}
.card main {
flex-basis: 60%; height: 100%; padding: 1rem;
}
.card main h2 {
font-size: 1.5rem; font-weight: 500; color: #200245; margin-bottom: .35rem;
}
.description-container {
display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 5; -moz-line-clamp: 5; -ms-line-clamp: 5; line-clamp: 5; 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 { transform: translateX(-15%);
width: 150%; height: auto; transition: transform .25s ease;
}
.card:hover aside img {
transform: scale(1.1) rotate(2deg) translateX(-15%);
}
.icon-container {
display: flex; align-items: flex-start; gap: .5rem;
margin-block-end: .3rem;
}
.icon-container img {
width: 16px;
}
.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>