993
edições
Widget:SearchQuestStyle: mudanças entre as edições
Ir para navegação
Ir para pesquisar
sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| (21 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'); | ||
a, a:hover { | |||
text-decoration: none; | text-decoration: none; | ||
color: inherit; | color: inherit; | ||
} | } | ||
#app { | .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 29: | 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 38: | 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 50: | Linha 72: | ||
font-weight: 500; | font-weight: 500; | ||
color: #200245; | color: #200245; | ||
margin-bottom: | margin-bottom: 0; | ||
} | } | ||
| Linha 59: | 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 78: | Linha 100: | ||
aside { | aside { | ||
flex-basis: 40%; | flex-basis: 40%; | ||
aspect-ratio: 9/8; | |||
aspect-ratio: 9/ | |||
display: flex; | display: flex; | ||
| Linha 87: | 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 105: | 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 126: | Linha 160: | ||
} | } | ||
@supports (-webkit- | @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 170: | ||
--disabled: #F6F8FF; | --disabled: #F6F8FF; | ||
--disabled-inner: #E1E6F9; | --disabled-inner: #E1E6F9; | ||
-webkit- | -webkit-appearance: none; | ||
-moz- | -moz-appearance: none; | ||
height: 21px; | height: 21px; | ||
outline: none; | outline: none; | ||
| Linha 223: | Linha 257: | ||
box-sizing: inherit; | box-sizing: inherit; | ||
} | } | ||
</style> | </style> | ||