MediaWiki:Common.css: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição |
Sem resumo de edição |
||
Linha 809: | Linha 809: | ||
/* Test 2 */ | /* Test 2 */ | ||
body { | |||
color: #fff; | |||
background: hsl(227, 10%, 10%); | |||
font: 300 1em 'Fira Sans', sans-serif; | |||
justify-content: center; | |||
align-content: center; | |||
align-items: center; | |||
text-align: center; | |||
min-height: 100vh; | |||
display: flex; | |||
} | |||
.buttons { | |||
text-align: center; | |||
} | |||
h1 { | |||
font-weight: 400; | |||
} | |||
code { | |||
color: #e4cb58; | |||
font: inherit; | |||
} | |||
.buttons div { | |||
background: none; | |||
border: 2px solid; | |||
font: inherit; | |||
line-height: 1; | |||
margin: 0.5em; | |||
padding: 1em 2em; | |||
display: inline-block; | |||
} | |||
.fill:hover, | .fill:hover, | ||
.fill:focus { | .fill:focus { | ||
box-shadow: inset 0 0 0 2em var(--hover); | |||
} | } | ||
.pulse:hover, | |||
.pulse:hover, | |||
.pulse:focus { | .pulse:focus { | ||
animation: pulse 1s; | |||
box-shadow: 0 0 0 2em transparent; | |||
} | } | ||
@keyframes pulse { | @keyframes pulse { | ||
0% { | |||
box-shadow: 0 0 0 0 var(--hover); | |||
} | |||
} | } | ||
.close:hover, | .close:hover, | ||
.close:focus { | .close:focus { | ||
box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover); | |||
} | } | ||
.raise:hover, | .raise:hover, | ||
.raise:focus { | .raise:focus { | ||
box-shadow: 0 0.5em 0.5em -0.4em var(--hover); | |||
transform: translateY(-0.25em); | |||
} | } | ||
.up:hover, | .up:hover, | ||
.up:focus { | .up:focus { | ||
box-shadow: inset 0 -3.25em 0 0 var(--hover); | |||
} | } | ||
.slide:hover, | .slide:hover, | ||
.slide:focus { | .slide:focus { | ||
box-shadow: inset 6.5em 0 0 0 var(--hover); | |||
} | } | ||
.offset { | |||
.offset { | box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color); | ||
} | } | ||
.offset:hover, | |||
.offset:focus { | |||
box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover); | |||
} | |||
); | |||
@each $button, $color in $colors { | @each $button, $color in $colors { | ||
.#{$button} { | |||
--color: #{$color}; | |||
--hover: #{adjust-hue($color, 45deg)}; | |||
} | } | ||
} | } |