Template:AngelQuarantine/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
No edit summary |
No edit summary |
||
| Line 4: | Line 4: | ||
justify-content: center; |
justify-content: center; |
||
text-align: center; |
text-align: center; |
||
background: #000; |
|||
color: #ffea00; |
|||
animation: title-flash 1.5s infinite; |
|||
} |
} |
||
#subtitle{ |
#subtitle{ |
||
display: inline-block; |
|||
| ⚫ | |||
background: #000; |
|||
color: #ffea00; |
|||
justify-content: center; |
|||
| ⚫ | |||
text-align: center; |
|||
| ⚫ | |||
font-size: 1.2rem; |
|||
| ⚫ | |||
padding: 0.3em 1em; |
|||
border-radius: 0.2em; |
|||
position: relative; |
|||
z-index: 1; |
|||
margin-bottom: 1.2em; |
|||
overflow: visible; |
|||
| ⚫ | |||
} |
} |
||
#subtitle::after { |
|||
| ⚫ | |||
content: ''; |
|||
| ⚫ | |||
position: absolute; |
|||
| ⚫ | |||
left: 50%; |
|||
100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); } |
|||
transform: translateX(-50%); |
|||
bottom: -0.5em; /* sits just below the subtitle */ |
|||
width: calc(100% + 2em); |
|||
height: 0.5em; |
|||
| ⚫ | |||
-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: 0; |
|||
} |
} |
||
| ⚫ | |||
| ⚫ | |||
0% { |
|||
text-shadow: |
0%, 50%, 100% { text-shadow: none; } |
||
| ⚫ | |||
| ⚫ | |||
} |
|||
50% { |
|||
text-shadow: 0 0 20px rgba(204,0,0,0.9); |
|||
| ⚫ | |||
} |
|||
| ⚫ | |||
100% { |
|||
50% { box-shadow: 0 0 20px #ffea00; } |
|||
} |
|||
} |
} |
||
Revision as of 13:26, May 2, 2025
#title{
font-size: 35px;
font-weight: bold;
justify-content: center;
text-align: center;
background: #000;
color: #ffea00;
animation: title-flash 1.5s infinite;
}
#subtitle{
display: inline-block;
background: #000;
color: #ffea00;
font-weight: bold;
text-align: center;
font-size: 1.2rem;
padding: 0.3em 1em;
border-radius: 0.2em;
position: relative;
z-index: 1;
margin-bottom: 1.2em;
overflow: visible;
animation: subtitle-glow 2.5s infinite;
}
#subtitle::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.5em; /* sits just below the subtitle */
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: 0;
}
@keyframes title-flash {
0%, 50%, 100% { text-shadow: none; }
25%, 75% { text-shadow: 0 0 10px #ffea00; }
}
@keyframes subtitle-glow {
0%, 100% { box-shadow: 0 0 5px #ffea00; }
50% { box-shadow: 0 0 20px #ffea00; }
}