7 864
edições
MediaWiki:Common.css: mudanças entre as edições
Ir para navegação
Ir para pesquisar
MediaWiki:Common.css (ver código-fonte)
Edição das 16h46min de 4 de dezembro de 2023
, 4 de dezembro de 2023sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 806: | Linha 806: | ||
top: -10px; | top: -10px; | ||
box-shadow: 0 118px deeppink; | box-shadow: 0 118px deeppink; | ||
} | |||
/* Test 2 */ | |||
.fill:hover, | |||
.fill:focus { | |||
box-shadow: inset 0 0 0 2em var(--hover); | |||
} | |||
// Animate the size, outside | |||
.pulse:hover, | |||
.pulse:focus { | |||
animation: pulse 1s; | |||
box-shadow: 0 0 0 2em transparent; | |||
} | |||
@keyframes pulse { | |||
0% { box-shadow: 0 0 0 0 var(--hover); } | |||
} | |||
// Stack multiple shadows, one from the left, the other from the right | |||
.close:hover, | |||
.close:focus { | |||
box-shadow: | |||
inset -3.5em 0 0 0 var(--hover), | |||
inset 3.5em 0 0 0 var(--hover); | |||
} | |||
// Size can also be negative; see how it's smaller than the element | |||
.raise:hover, | |||
.raise:focus { | |||
box-shadow: 0 0.5em 0.5em -0.4em var(--hover); | |||
transform: translateY(-0.25em); | |||
} | |||
// Animating from the bottom | |||
.up:hover, | |||
.up:focus { | |||
box-shadow: inset 0 -3.25em 0 0 var(--hover); | |||
} | |||
// And from the left | |||
.slide:hover, | |||
.slide:focus { | |||
box-shadow: inset 6.5em 0 0 0 var(--hover); | |||
} | |||
// Multiple shadows, one on the outside, another on the inside | |||
.offset { | |||
box-shadow: | |||
0.3em 0.3em 0 0 var(--color), | |||
inset 0.3em 0.3em 0 0 var(--color); | |||
&:hover, | |||
&:focus { | |||
box-shadow: | |||
0 0 0 0 var(--hover), | |||
inset 6em 3.5em 0 0 var(--hover); | |||
} | |||
} | |||
$colors: ( | |||
fill: #a972cb, | |||
pulse: #ef6eae, | |||
close: #ff7f82, | |||
raise: #ffa260, | |||
up: #e4cb58, | |||
slide: #8fc866, | |||
offset: #19bc8b | |||
); | |||
// Sass variables compile to a static string; CSS variables are dynamic and inherited | |||
// Loop through the map and set CSS custom properties using Sass variables | |||
@each $button, $color in $colors { | |||
.#{$button} { | |||
--color: #{$color}; | |||
--hover: #{adjust-hue($color, 45deg)}; | |||
} | |||
} | |||
// Now every button will have different colors as set above. We get to use the same structure, only changing the custom properties. | |||
.buttons div{ | |||
color: var(--color); | |||
transition: 0.25s; | |||
&:hover, | |||
&:focus { | |||
border-color: var(--hover); | |||
color: #fff; | |||
} | |||
} | |||
//=== Pen styling, ignore | |||
body { | |||
color: #fff; | |||
background: hsl(227, 10%, 10%); | |||
font: 300 1em 'Fira Sans', sans-serif; | |||
// Center everything ever | |||
justify-content: center; | |||
align-content: center; | |||
align-items: center; | |||
text-align: center; | |||
min-height: 100vh; | |||
display: flex; | |||
} | |||
// Basic button styles | |||
.buttons div{ | |||
background: none; | |||
border: 2px solid; | |||
font: inherit; | |||
line-height: 1; | |||
margin: 0.5em; | |||
padding: 1em 2em; | |||
} | |||
h1 { font-weight: 400; } | |||
code { | |||
color: #e4cb58; | |||
font: inherit; | |||
} | } | ||