.widget-AlertBox {
position: relative;
}
body,
html {
height: 100%;
width: 100%;
overflow: hidden;
}
#wrap {
position: relative;
height: 100%;
width: 100%;
}
#alert-box {
height: 100%;
width: 100%;
position: absolute;
}
#alert-box.hidden,
.hidden {
opacity: 0;
}
#alert-text {
padding: 20px;
text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-message,
#alert-user-message {
text-align: center;
}
#alert-user-message img {
vertical-align: middle;
height: 1em;
}
#alert-image {
position: relative;
}
#alert-image video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#alert-message > span > span {
display: inline-block;
}
#alert-image {
z-index: 6;
position: relative;
}
#alert-text {
z-index: 6;
position: relative;
}
#alert-text-wrap {
z-index: 6;
position: relative;
}
:root{
--blink-base-color:#ffffff; /* color normal */
--blink-flash-color:#4DC3FF; /* color del parpadeo */
--blink-start-delay:1.3s; /* demora antes de empezar */
--blink-period:0.5217s; /* duración de 1 beat: para 128 BPM → 60/128 ≈ 0.46875s */
}
/* El nombre envuelto en el template */
#alert-message .blink-target{
color:var(--blink-base-color) !important;
font-weight:900;
letter-spacing:.5px;
transition: color .08s linear, text-shadow .08s linear;
/* Animación directa, sin JS */
animation-name: bpm-blink;
animation-duration: var(--blink-period);
animation-timing-function: steps(1,end);
animation-iteration-count: infinite;
animation-delay: var(--blink-start-delay);
}
@keyframes bpm-blink{
0% { color:var(--blink-base-color); text-shadow:none; }
49% { color:var(--blink-base-color); text-shadow:none; }
50% { color:var(--blink-flash-color); text-shadow:0 0 12px var(--blink-flash-color), 0 0 24px var(--blink-flash-color); }
100% { color:var(--blink-flash-color); text-shadow:0 0 12px var(--blink-flash-color), 0 0 24px var(--blink-flash-color); }
}
#alert-message .blink-target{
animation-iteration-count: 18; /* 6 beats aprox. */
animation-fill-mode: forwards; /* conserva el último frame (color final o base) */
}
.widget-AlertBox {
position: relative;
}
body,
html {
height: 100%;
width: 100%;
overflow: hidden;
}
#wrap {
position: relative;
height: 100%;
width: 100%;
}
#alert-box {
height: 100%;
width: 100%;
position: absolute;
}
#alert-box.hidden,
.hidden {
opacity: 0;
}
#alert-text {
padding: 20px;
text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-message,
#alert-user-message {
text-align: center;
}
#alert-user-message img {
vertical-align: middle;
height: 1em;
}
#alert-image {
position: relative;
}
#alert-image video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#alert-message > span > span {
display: inline-block;
}
#alert-image {
z-index: 6;
position: relative;
}
#alert-text {
z-index: 6;
position: relative;
}
#alert-text-wrap {
z-index: 6;
position: relative;
}
:root{
--blink-base-color:#ffffff; /* color normal */
--blink-flash-color:#B066FF; /* color del parpadeo */
--blink-start-delay:7.5s; /* demora antes de empezar */
--blink-period:0.5217s; /* duración de 1 beat: para 128 BPM → 60/128 ≈ 0.46875s */
}
/* El nombre envuelto en el template */
#alert-message .blink-target{
color:var(--blink-base-color) !important;
font-weight:900;
letter-spacing:.5px;
transition: color .08s linear, text-shadow .08s linear;
/* Animación directa, sin JS */
animation-name: bpm-blink;
animation-duration: var(--blink-period);
animation-timing-function: steps(1,end);
animation-iteration-count: infinite;
animation-delay: var(--blink-start-delay);
}
@keyframes bpm-blink{
0% { color:var(--blink-base-color); text-shadow:none; }
49% { color:var(--blink-base-color); text-shadow:none; }
50% { color:var(--blink-flash-color); text-shadow:0 0 12px var(--blink-flash-color), 0 0 24px var(--blink-flash-color); }
100% { color:var(--blink-flash-color); text-shadow:0 0 12px var(--blink-flash-color), 0 0 24px var(--blink-flash-color); }
}
#alert-message .blink-target{
animation-iteration-count: 21; /* 6 beats aprox. */
animation-fill-mode: forwards; /* conserva el último frame (color final o base) */
}
.widget-AlertBox {
position: relative;
}
body,
html {
height: 100%;
width: 100%;
overflow: hidden;
}
#wrap {
position: relative;
height: 100%;
width: 100%;
}
#alert-box {
height: 100%;
width: 100%;
position: absolute;
}
#alert-box.hidden,
.hidden {
opacity: 0;
}
#alert-text {
padding: 20px;
text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-message,
#alert-user-message {
text-align: center;
}
#alert-user-message img {
vertical-align: middle;
height: 1em;
}
#alert-image {
position: relative;
}
#alert-image video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#alert-message > span > span {
display: inline-block;
}
#alert-image {
z-index: 6;
position: relative;
}
#alert-text {
z-index: 6;
position: relative;
}
#alert-text-wrap {
z-index: 6;
position: relative;
}
:root{
--blink-base-color:#ffffff; /* color normal */
--blink-flash-color:#FF1E1E; /* color del parpadeo */
--blink-start-delay:12.15s; /* demora antes de empezar */
--blink-period:0.625s; /* duración de 1 beat: para 128 BPM → 60/128 ≈ 0.46875s */
}
/* El nombre envuelto en el template */
#alert-message .blink-target{
color:var(--blink-base-color) !important;
font-weight:900;
letter-spacing:.5px;
transition: color .08s linear, text-shadow .08s linear;
/* Animación directa, sin JS */
animation-name: bpm-blink;
animation-duration: var(--blink-period);
animation-timing-function: steps(1,end);
animation-iteration-count: infinite;
animation-delay: var(--blink-start-delay);
}
@keyframes bpm-blink{
0% { color:var(--blink-base-color); text-shadow:none; }
49% { color:var(--blink-base-color); text-shadow:none; }
50% { color:var(--blink-flash-color); text-shadow:0 0 12px var(--blink-flash-color), 0 0 24px var(--blink-flash-color); }
100% { color:var(--blink-flash-color); text-shadow:0 0 12px var(--blink-flash-color), 0 0 24px var(--blink-flash-color); }
}
#alert-message .blink-target{
animation-iteration-count: 21; /* 6 beats aprox. */
animation-fill-mode: forwards; /* conserva el último frame (color final o base) */
}