Template:AngelQuarantine/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
No edit summary |
simpler names, other anims, danger stripes fix...? |
||
| Line 6: | Line 6: | ||
background: #000; |
background: #000; |
||
color: #ffea00; |
color: #ffea00; |
||
animation: |
animation: flash 2s infinite ease-in-out; |
||
} |
} |
||
#subtitle{ |
#subtitle{ |
||
display: |
display: block; |
||
width: max-content; |
|||
margin: 1em auto; |
|||
background: #000; |
background: #000; |
||
color: #ffea00; |
color: #ffea00; |
||
font-weight: bold; |
font-weight: bold; |
||
text-align: center; |
text-align: center; |
||
justify-content: center; |
|||
font-size: 1.2rem; |
font-size: 1.2rem; |
||
padding: 0.3em 1em; |
|||
border-radius: 0.2em; |
|||
| ⚫ | |||
animation: |
animation: glow 2s infinite ease-in-out; |
||
position: relative; |
|||
| ⚫ | |||
} |
} |
||
#subtitle::after { |
#subtitle::after { |
||
content: ''; |
content: ''; |
||
position: absolute; |
|||
justify-content: center; |
|||
left: 50%; |
left: 50%; |
||
transform: translateX(-50%); |
transform: translateX(-50%); |
||
bottom: -0. |
bottom: -0.6em; |
||
width: calc(100% + 2em); |
width: calc(100% + 2em); |
||
height: 0.5em; |
height: 0.5em; |
||
| Line 39: | Line 42: | ||
background-size: 0.8em 0.8em; |
background-size: 0.8em 0.8em; |
||
border-radius: 0 0 0.2em 0.2em; |
border-radius: 0 0 0.2em 0.2em; |
||
z-index: |
z-index: -1; |
||
} |
} |
||
@keyframes |
@keyframes flash { |
||
0 |
0%, 100% { text-shadow: none; } |
||
50% { text-shadow: 0 0 15px #ffea00; } |
|||
} |
} |
||
@keyframes |
@keyframes glow { |
||
0%, 100% { box-shadow: 0 0 |
0%, 100% { box-shadow: 0 0 0px transparent; } |
||
50% { box-shadow: 0 0 |
50% { box-shadow: 0 0 15px #ffea00; } |
||
} |
} |
||
Revision as of 13:35, May 2, 2025
#title{
font-size: 35px;
font-weight: bold;
justify-content: center;
text-align: center;
background: #000;
color: #ffea00;
animation: flash 2s infinite ease-in-out;
}
#subtitle{
display: block;
width: max-content;
margin: 1em auto;
background: #000;
color: #ffea00;
font-weight: bold;
text-align: center;
font-size: 1.2rem;
padding: 0.3em 1em;
border-radius: 0.2em;
animation: glow 2s infinite ease-in-out;
position: relative;
overflow: visible;
}
#subtitle::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.6em;
width: calc(100% + 2em);
height: 0.5em;
background: repeating-linear-gradient(
-45deg,
#ffea00 0,
#ffea00 25%,
#000 25%,
#000 50%
);
background-size: 0.8em 0.8em;
border-radius: 0 0 0.2em 0.2em;
z-index: -1;
}
@keyframes flash {
0%, 100% { text-shadow: none; }
50% { text-shadow: 0 0 15px #ffea00; }
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 0px transparent; }
50% { box-shadow: 0 0 15px #ffea00; }
}