b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
92 lines
1.9 KiB
CSS
Executable file
92 lines
1.9 KiB
CSS
Executable file
#marquee-h-wrapper {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
/* Subtract padding-left and amount of padding desired on the right side */
|
|
width: calc(100% - 3rem - 2rem);
|
|
}
|
|
|
|
/*
|
|
action_menu.css will default the element to overflow hidden, with a text
|
|
overflow of ellipsis. However for the scrolling marquee to work, the full text
|
|
needs to be visible for length calcluations.
|
|
*/
|
|
#marquee-h-text {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* --- Right to left (RTL) marquee styles --- */
|
|
.marquee-rtl-start-linear {
|
|
transform: translateX(0);
|
|
/* 12s duration of animation: 0% -> -100%;
|
|
* 3s start delay */
|
|
animation: left-marquee 12s linear 3s 1;
|
|
}
|
|
|
|
.marquee-rtl-start-ease {
|
|
transform: translateX(0);
|
|
/* 12s duration of animation: 0% -> -100%;
|
|
* 3s start delay */
|
|
animation: left-marquee 12s ease-in 3s 1;
|
|
}
|
|
|
|
.marquee-rtl {
|
|
/* 20s duration of animation: +100% -> -100%; */
|
|
animation: left-marquee 20s linear 0s infinite;
|
|
}
|
|
|
|
@keyframes left-marquee {
|
|
100% {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
/* --- Alternate (alt: RTL <-> LTR) marquee styles --- */
|
|
.marquee-alt-linear {
|
|
transform: translateX(0);
|
|
animation: alt-marquee 15s linear 0s infinite;
|
|
}
|
|
|
|
.marquee-alt-ease {
|
|
transform: translateX(0);
|
|
animation: alt-marquee 15s ease-in-out 0s infinite;
|
|
}
|
|
|
|
.marquee-alt-ease-rtl {
|
|
transform: translateX(0);
|
|
animation: alt-marquee-rtl 15s ease-in-out 0s infinite;
|
|
}
|
|
|
|
@keyframes alt-marquee {
|
|
/* 3s delay in start (1.5s = 10%) */
|
|
20% {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
transform: translateX(-100%);
|
|
}
|
|
/* 3s delay when aligned right */
|
|
70% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes alt-marquee-rtl {
|
|
/* 3s delay in start (1.5s = 10%) */
|
|
20% {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
transform: translateX(100%);
|
|
}
|
|
/* 3s delay when aligned right */
|
|
70% {
|
|
transform: translateX(100%);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|