993
edições
Widget:SearchQuestStyle (ver código-fonte)
Edição das 00h33min de 3 de novembro de 2023
, 3 de novembro de 2023sem sumário de edição
(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 |
||
| Linha 1: | Linha 1: | ||
<style> | |||
a { | a { | ||
text-decoration: none; | text-decoration: none; | ||
| Linha 111: | Linha 112: | ||
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-quests-containerearance: none) or (-moz-quests-containerearance: 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-quests-containerearance: none; | |||
-moz-quests-containerearance: 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> | |||