992
edições
(Criou página com 'a { text-decoration: none; color: inherit; } #quests-container { 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 { width: clamp(37...') |
Sem resumo de edição |
||
(23 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
Linha 1: | Linha 1: | ||
a { | <style> | ||
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap'); | |||
a, a:hover { | |||
text-decoration: none; | text-decoration: none; | ||
color: inherit; | color: inherit; | ||
} | } | ||
#quests- | .card h2 { | ||
padding: 1rem | 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: | place-items: center; | ||
gap: 2rem; | |||
} | } | ||
Linha 28: | Linha 43: | ||
.card { | .card { | ||
width: clamp( | font-family: "Sora"; | ||
height: clamp( | 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 37: | 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 49: | Linha 72: | ||
font-weight: 500; | font-weight: 500; | ||
color: #200245; | color: #200245; | ||
margin-bottom: | margin-bottom: 0; | ||
} | } | ||
Linha 58: | Linha 81: | ||
-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 77: | Linha 100: | ||
aside { | aside { | ||
flex-basis: 40%; | flex-basis: 40%; | ||
aspect-ratio: 9/8; | |||
aspect-ratio: 9/ | |||
display: flex; | display: flex; | ||
Linha 86: | Linha 108: | ||
aside img { | aside img { | ||
width: | width: 105%; | ||
height: auto; | height: auto; | ||
transition: transform .25s ease; | transition: transform .25s ease; | ||
} | } | ||
.icon-container { | .icon-container { | ||
position: absolute; | |||
bottom: 1.4rem; | |||
display: flex; | display: flex; | ||
align-items: flex-start; | align-items: flex-start; | ||
Linha 104: | Linha 124: | ||
.icon-container img { | .icon-container img { | ||
width: | 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 111: | Linha 146: | ||
gap: 1.5rem; | 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> |