Шаблон:Бегущая строка/styles.css - История изменений

Aeonorien в 13:30, 3 сентября 2026

2026-09-03T13:30:18Z

← Предыдущая версия		Версия от 16:30, 3 сентября 2026
Строка 1:		Строка 1:
	.marquee {		.marquee {
			display: block;
	overflow: hidden;		overflow: hidden;
	white-space: nowrap;		white-space: nowrap;
	width: 100%;		width: 100%;
	~~height~~: ~~2em~~;		padding: 8px 0;
	~~line~~-~~height~~: ~~2em;~~		box-sizing: border-box;
	~~position: relative~~;
	}		}
			.marquee-inner {
	.marquee ~~span~~ {		display: inline-block;
	~~position: absolute;~~
	~~top: 0;~~
	~~left~~: 0;
	white-space: nowrap;		white-space: nowrap;
			padding-left: 100%;
			animation: marquee 22s linear infinite;
	color: #eaeaea;		color: #eaeaea;
	~~opacity: 0;~~
	~~animation: scroll 16s linear infinite;~~
	}		}
			@keyframes marquee {
	~~.marquee span:nth-child(1) { animation-delay: 0s; }~~		0% { transform: translateX(0); }
	~~.marquee span:nth-child(2) { animation-delay: 16s; }~~		100% { transform: translateX(-100%); }
	~~.marquee span:nth-child(3) { animation-delay: 32s; }~~
	~~.marquee span:nth-child(4) { animation-delay: 48s; }~~
	~~.marquee span:nth-child(5) { animation-delay: 64s; }~~

	@keyframes ~~scroll~~ {
	0% {
	transform: translateX(~~100%);~~
	~~opacity:~~ 0;
	}
	~~3% {~~
	~~opacity: 1;~~
	}
	~~70% {~~
	~~transform: translateX(-120%~~);
	~~opacity: 1;~~
	}
	~~75% {~~
	~~opacity: 0;~~
	}
	100% {
	transform: translateX(-~~120~~%);
	~~opacity: 0;~~
	}
	}		}

Aeonorien в 13:27, 3 сентября 2026

2026-09-03T13:27:22Z

← Предыдущая версия		Версия от 16:27, 3 сентября 2026
Строка 1:		Строка 1:
	.~~running~~-~~text {~~		.marquee {
	width: 100%;		overflow: hidden;
	height: ~~30px~~;		white-space: nowrap;
	~~overflow~~: ~~hidden~~;		width: 100%;
	position: relative;		height: 2em;
	~~white-space: nowrap~~;		line-height: 2em;
			position: relative;
	}		}

	.~~running-text__content~~ {		.marquee span {
	position: absolute;		position: absolute;
	~~left: 100%;~~		top: 0;
	top: ~~50%~~;		left: 0;
	~~transform~~: ~~translateY(-50%)~~;		white-space: nowrap;
	white-space: nowrap;		color: #eaeaea;
	animation: ~~running-text-~~scroll ~~10s~~ linear infinite;		opacity: 0;
			animation: scroll 16s linear infinite;
	}		}

	~~@keyframes running~~-~~text~~-~~scroll~~ {		.marquee span:nth-child(1) { animation-delay: 0s; }
	~~from~~ {		.marquee span:nth-child(2) { animation-delay: 16s; }
	~~left~~: ~~100%~~;		.marquee span:nth-child(3) { animation-delay: 32s; }
	}		.marquee span:nth-child(4) { animation-delay: 48s; }
			.marquee span:nth-child(5) { animation-delay: 64s; }

	to {		@keyframes scroll {
	~~left~~: -100%;		0% {
	}		transform: translateX(100%);
			opacity: 0;
			}
			3% {
			opacity: 1;
			}
			70% {
			transform: translateX(-120%);
			opacity: 1;
			}
			75% {
			opacity: 0;
			}
			100% {
			transform: translateX(-120%);
			opacity: 0;
			}
	}		}

Aeonorien в 13:25, 3 сентября 2026

2026-09-03T13:25:11Z

← Предыдущая версия		Версия от 16:25, 3 сентября 2026
Строка 1:		Строка 1:
	.~~ticker~~ {		.running-text {
	width: 100%;		width: 100%;
			height: 30px;
	overflow: hidden;		overflow: hidden;
	position: relative;		position: relative;
Строка 6:		Строка 7:
	}		}

	.~~ticker__track~~ {		.running-text__content {
	~~display~~: ~~inline-flex~~;		position: absolute;
	~~width~~: ~~max-content~~;		left: 100%;
	~~animation~~: ~~ticker-scroll 30s linear infinite~~;		top: 50%;
	}		transform: translateY(-50%);
			white-space: nowrap;
	~~.ticker__track span {~~		animation: running-text-scroll 10s linear infinite;
	~~display~~: ~~inline~~-~~block~~;
	~~flex~~-~~shrink~~: 0;
	~~padding~~-~~right: 80px~~;
	}		}

	@keyframes ~~ticker~~-scroll {		@keyframes running-text-scroll {
	from {		from {
	~~transform~~: ~~translateX(~~100%);		left: 100%;
	}		}

	to {		to {
	~~transform~~: ~~translateX(~~-100%);		left: -100%;
	}		}
	}		}

Aeonorien в 13:23, 3 сентября 2026

2026-09-03T13:23:58Z

← Предыдущая версия		Версия от 16:23, 3 сентября 2026
Строка 1:		Строка 1:
	.~~wiki-~~ticker {		.ticker {
	~~position: relative;~~
	width: 100%;		width: 100%;
	~~height: 32px;~~
	overflow: hidden;		overflow: hidden;
			position: relative;
	white-space: nowrap;		white-space: nowrap;
	}		}

	.~~wiki-ticker > span~~ {		.ticker__track {
	~~position~~: ~~absolute;~~		display: inline-flex;
	~~top: 50%~~;		width: max-content;
	~~left~~: ~~100%;~~		animation: ticker-scroll 30s linear infinite;
	~~transform: translateY(~~-~~50%);~~
	~~white-space: nowrap;~~
	~~opacity: 0~~;
	animation~~-name~~: ~~wiki-~~ticker-~~animation;~~
	~~animation-duration: 60s;~~
	~~animation-timing-function:~~ linear;
	~~animation-iteration-count:~~ infinite;
	}

	~~/* Первый текст */~~
	~~.wiki-ticker > span:nth-child(1) {~~
	~~animation-delay: 0s;~~
	}

	~~/* Второй текст */~~
	~~.wiki-ticker > span:nth-child(2) {~~
	~~animation-delay: -12s~~;
	}		}

	~~/* Третий текст */~~		.ticker__track span {
	.~~wiki-ticker >~~ span:~~nth~~-~~child(3) {~~		display: inline-block;
	~~animation~~-~~delay~~: -~~24s~~;		flex-shrink: 0;
			padding-right: 80px;
	}		}

	~~/* Четвёртый текст */~~		@keyframes ticker-scroll {
	~~.wiki-ticker > span:nth-child(4) {~~		from {
	~~animation-delay: -36s;~~		transform: translateX(100%);
	}

	~~/* Пятый текст */~~
	~~.wiki-ticker > span:nth-child(5) {~~
	~~animation-delay: -48s;~~
	}

	@keyframes ~~wiki-~~ticker-~~animation~~ {
	~~0% {~~
	~~left: 100%;~~
	~~transform: translateY(-50%);~~
	~~opacity: 1;~~
	}

	~~20%~~ {
	~~left: 0;~~
	transform: ~~translate~~(-100~~%, -50~~%);
	~~opacity: 1;~~
	}

	~~20.01% {~~
	~~opacity: 0~~;
	}		}

	~~100%~~ {		to {
	~~opacity~~: 0;		transform: translateX(-100%);
	}		}
	}		}

Aeonorien в 13:22, 3 сентября 2026

2026-09-03T13:22:32Z

← Предыдущая версия		Версия от 16:22, 3 сентября 2026
Строка 1:		Строка 1:
	.~~running~~-~~line~~ {		.wiki-ticker {
	position: relative;		position: relative;
	width: 100%;		width: 100%;
Строка 7:		Строка 7:
	}		}

	.~~running~~-~~line__item~~ {		.wiki-ticker > span {
	position: absolute;		position: absolute;
	top: 50%;		top: 50%;
			left: 100%;
	transform: translateY(-50%);		transform: translateY(-50%);
	~~left~~: ~~100%~~;		white-space: nowrap;
			opacity: 0;
	animation-name: ~~running~~-~~line~~-~~scroll~~;		animation-name: wiki-ticker-animation;
	animation-duration: ~~15s~~;		animation-duration: 60s;
	animation-timing-function: linear;		animation-timing-function: linear;
	animation-iteration-count: infinite;		animation-iteration-count: infinite;
	}		}

	/* ~~Следующий~~ текст ~~появляется после окончания предыдущего~~ */		/* Первый текст */
	.~~running~~-~~line__item~~:nth-child(1) {		.wiki-ticker > span:nth-child(1) {
	animation-delay: 0s;		animation-delay: 0s;
	}		}

	.~~running~~-~~line__item~~:nth-child(2) {		/* Второй текст */
	animation-delay: ~~15s~~;		.wiki-ticker > span:nth-child(2) {
			animation-delay: -12s;
	}		}

	.~~running~~-~~line__item~~:nth-child(3) {		/* Третий текст */
	animation-delay: ~~30s~~;		.wiki-ticker > span:nth-child(3) {
			animation-delay: -24s;
	}		}

	.~~running~~-~~line__item~~:nth-child(4) {		/* Четвёртый текст */
	animation-delay: ~~45s~~;		.wiki-ticker > span:nth-child(4) {
			animation-delay: -36s;
	}		}

	.~~running~~-~~line__item~~:nth-child(5) {		/* Пятый текст */
	animation-delay: ~~60s~~;		.wiki-ticker > span:nth-child(5) {
			animation-delay: -48s;
	}		}

	@keyframes ~~running~~-~~line~~-~~scroll~~ {		@keyframes wiki-ticker-animation {
	0% {		0% {
	left: 100%;		left: 100%;
			transform: translateY(-50%);
			opacity: 1;
			}

			20% {
			left: 0;
			transform: translate(-100%, -50%);
			opacity: 1;
			}

			20.01% {
			opacity: 0;
	}		}

	100% {		100% {
	~~left~~: ~~-100%~~;		opacity: 0;
	}		}
	}		}

Aeonorien в 13:20, 3 сентября 2026

2026-09-03T13:20:30Z

← Предыдущая версия		Версия от 16:20, 3 сентября 2026
Строка 1:		Строка 1:
	.~~marquee~~ {		.running-line {
	~~overflow~~: ~~hidden~~;		position: relative;
	~~height~~: ~~2.2em~~;		width: 100%;
	~~line-~~height: ~~2.2em~~;		height: 32px;
	~~position~~: ~~relative~~;		overflow: hidden;
	~~width~~: ~~100%~~;		white-space: nowrap;
	}		}

	.~~marquee~~-~~inner~~ {		.running-line__item {
	position: absolute;		position: absolute;
	~~width~~: 100%;		top: 50%;
	animation: ~~vertical~~-scroll ~~16s cubic~~-~~bezier~~(0.~~4, 0, 0~~.~~2, 1~~) ~~infinite~~;		transform: translateY(-50%);
			left: 100%;

			animation-name: running-line-scroll;
			animation-duration: 15s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
			}

			/* Следующий текст появляется после окончания предыдущего */
			.running-line__item:nth-child(1) {
			animation-delay: 0s;
			}

			.running-line__item:nth-child(2) {
			animation-delay: 15s;
			}

			.running-line__item:nth-child(3) {
			animation-delay: 30s;
	}		}

	.~~marquee~~-~~inner span {~~		.running-line__item:nth-child(4) {
	~~display: block;~~		animation-delay: 45s;
	~~height~~: ~~2.2em;~~
	~~line~~-~~height: 2.2em;~~
	~~color: #eaeaea;~~
	~~white-space: nowrap;~~
	~~overflow: hidden;~~
	~~text~~-~~overflow~~: ~~ellipsis~~;
	}		}

	~~@keyframes vertical~~-~~scroll {~~		.running-line__item:nth-child(5) {
	~~0%, 18% { transform~~: ~~translateY~~(0)~~; }~~		animation-delay: 60s;
	~~22%, 40% { transform~~: ~~translateY(-2.2em)~~; }		}
	~~44%, 62%~~ { ~~transform: translateY(-4.4em); }~~
	66%~~, 84%~~ { ~~transform~~: ~~translateY(-6.6em)~~; }		@keyframes running-line-scroll {
	~~88%,~~ 100% { ~~transform~~: ~~translateY(~~-~~8.8em)~~; }		0% {
			left: 100%;
			}

			100% {
			left: -100%;
			}
	}		}

Aeonorien в 13:18, 3 сентября 2026

2026-09-03T13:18:21Z

← Предыдущая версия		Версия от 16:18, 3 сентября 2026
Строка 1:		Строка 1:
	.marquee {		.marquee {
	overflow: hidden;		overflow: hidden;
	~~white~~-~~space~~: ~~nowrap~~;		height: 2.2em;
			line-height: 2.2em;
			position: relative;
	width: 100%;		width: 100%;
	~~height: 2em;~~
	~~line-height: 2em;~~
	~~position: relative;~~
	}		}

	.marquee ~~span~~ {		.marquee-inner {
	position: absolute;		position: absolute;
	~~top~~: 0;		width: 100%;
	~~left~~: 0;		animation: vertical-scroll 16s cubic-bezier(0.4, 0, 0.2, 1) infinite;
			}

			.marquee-inner span {
			display: block;
			height: 2.2em;
			line-height: 2.2em;
			color: #eaeaea;
	white-space: nowrap;		white-space: nowrap;
	~~color~~: ~~#eaeaea~~;		overflow: hidden;
	~~opacity~~: 0;		text-overflow: ellipsis;
	~~animation: scroll 14s linear infinite~~;
	}		}

	~~.marquee span:nth~~-~~child(1)~~ { ~~animation-delay: 0s; }~~		@keyframes vertical-scroll {
	~~.marquee span~~:~~nth-child~~(2) ~~{ animation-delay: 14s~~; }		0%, 18% { transform: translateY(0); }
	~~.marquee span:nth-child(3)~~ { ~~animation-delay~~: ~~28s; }~~		22%, 40% { transform: translateY(-2.2em); }
	~~.marquee span:nth-child~~(~~4) { animation~~-~~delay: 42s; }~~		44%, 62% { transform: translateY(-4.4em); }
	.~~marquee span:nth-child(5~~) ~~{ animation-delay: 56s~~; }		66%, 84% { transform: translateY(-6.6em); }
			88%, 100% { transform: translateY(-8.8em); }
	~~@keyframes scroll {~~
	0% {
	transform: ~~translateX~~(~~100%~~);
	~~opacity: 0;~~
	}
	5% {
	~~opacity: 1;~~
	}
	75% {
	transform: ~~translateX~~(-~~110%~~);
	~~opacity: 1;~~
	}
	80% {
	~~opacity: 0;~~
	}
	100% {
	transform: ~~translateX~~(-~~110%~~);
	~~opacity: 0;~~
	}
	}		}

Aeonorien в 13:14, 3 сентября 2026

2026-09-03T13:14:53Z

← Предыдущая версия		Версия от 16:14, 3 сентября 2026
Строка 1:		Строка 1:
	.marquee {		.marquee {
	overflow: hidden;		overflow: hidden;
	height: 2.2em;		white-space: nowrap;
	line-height: 2.2em;		width: 100%;
			height: 2em;
			line-height: 2em;
	position: relative;		position: relative;
	~~width: 100%;~~
	}		}

	.marquee~~-inner~~ {		.marquee span {
	position: absolute;		position: absolute;
	~~width~~: ~~100%~~;		top: 0;
	animation: scroll ~~15s cubic-bezier(0.25, 0.1, 0.25, 1)~~ infinite;		left: 0;
			white-space: nowrap;
			color: #eaeaea;
			opacity: 0;
			animation: scroll 14s linear infinite;
	}		}

	.marquee-~~inner span~~ {		.marquee span:nth-child(1) { animation-delay: 0s; }
	~~display~~: ~~block~~;		.marquee span:nth-child(2) { animation-delay: 14s; }
	~~height~~: 2~~.2em~~;		.marquee span:nth-child(3) { animation-delay: 28s; }
	~~line~~-~~height~~: ~~2.2em~~;		.marquee span:nth-child(4) { animation-delay: 42s; }
	~~color~~: ~~#eaeaea;~~		.marquee span:nth-child(5) { animation-delay: 56s; }
	~~white~~-~~space~~: ~~nowrap~~;
	~~overflow~~: ~~hidden;~~
	~~text~~-~~overflow~~: ~~ellipsis~~;
	}

	@keyframes scroll {		@keyframes scroll {
	0%~~, 20%~~ { transform: ~~translateY~~(0); }		0% {
	~~25%, 45~~% { ~~transform~~: ~~translateY(-2.2em)~~; }		transform: translateX(100%);
	~~50%, 70~~% { transform: ~~translateY~~(-~~4.4em~~); }		opacity: 0;
	~~75%, 95~~% { ~~transform~~: ~~translateY(-6.6em)~~; }		}
	100% { transform: ~~translateY~~(-~~8.8em~~); }		5% {
			opacity: 1;
			}
			75% {
			transform: translateX(-110%);
			opacity: 1;
			}
			80% {
			opacity: 0;
			}
			100% {
			transform: translateX(-110%);
			opacity: 0;
			}
	}		}

Aeonorien в 13:10, 3 сентября 2026

2026-09-03T13:10:26Z

← Предыдущая версия		Версия от 16:10, 3 сентября 2026
Строка 1:		Строка 1:
	.marquee {		.marquee {
	overflow: hidden;		overflow: hidden;
	~~white~~-~~space~~: ~~nowrap~~;		height: 2.2em;
			line-height: 2.2em;
			position: relative;
	width: 100%;		width: 100%;
	~~height: 2em;~~
	~~line-height: 2em;~~
	~~position: relative;~~
	}		}

	.marquee ~~span~~ {		.marquee-inner {
	position: absolute;		position: absolute;
	~~left~~: 0;		width: 100%;
	~~top~~: 0;		animation: scroll 15s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
			}

			.marquee-inner span {
			display: block;
			height: 2.2em;
			line-height: 2.2em;
			color: #eaeaea;
	white-space: nowrap;		white-space: nowrap;
	~~color~~: ~~#eaeaea~~;		overflow: hidden;
	~~opacity~~: 0;		text-overflow: ellipsis;
	~~animation: scroll 12s linear infinite~~;
	}		}

	~~.marquee span:nth-child(1) { animation-delay: 0s; }~~
	~~.marquee span:nth-child(2) { animation-delay: 12s; }~~
	~~.marquee span:nth-child(3) { animation-delay: 24s; }~~
	~~.marquee span:nth-child(4) { animation-delay: 36s; }~~
	~~.marquee span:nth-child(5) { animation-delay: 48s; }~~

	@keyframes scroll {		@keyframes scroll {
	0% {		0%, 20% { transform: translateY(0); }
	transform: ~~translateX~~(~~100%~~);		25%, 45% { transform: translateY(-2.2em); }
	~~opacity: 1;~~		50%, 70% { transform: translateY(-4.4em); }
	}		75%, 95% { transform: translateY(-6.6em); }
	10% {		100% { transform: translateY(-8.8em); }
	transform: ~~translateX~~(~~100%~~);
	~~opacity: 1;~~
	}
	80% {
	transform: ~~translateX~~(-~~110%~~);
	~~opacity: 1;~~
	}
	85% {
	~~opacity~~: 0;
	}
	100% {
	transform: ~~translateX~~(-~~110%~~);
	~~opacity: 0;~~
	}
	}		}

Aeonorien в 13:08, 3 сентября 2026

2026-09-03T13:08:22Z

← Предыдущая версия		Версия от 16:08, 3 сентября 2026
Строка 3:		Строка 3:
	white-space: nowrap;		white-space: nowrap;
	width: 100%;		width: 100%;
	height: ~~1.8em~~;		height: 2em;
	line-height: ~~1.8em~~;		line-height: 2em;
	position: relative;		position: relative;
	}		}
Строка 14:		Строка 14:
	white-space: nowrap;		white-space: nowrap;
	color: #eaeaea;		color: #eaeaea;
	~~animation: scroll 15s linear infinite;~~
	opacity: 0;		opacity: 0;
			animation: scroll 12s linear infinite;
	}		}

	.marquee span:nth-child(1) { animation-delay: 0s; }		.marquee span:nth-child(1) { animation-delay: 0s; }
	.marquee span:nth-child(2) { animation-delay: ~~15s~~; }		.marquee span:nth-child(2) { animation-delay: 12s; }
	.marquee span:nth-child(3) { animation-delay: ~~30s~~; }		.marquee span:nth-child(3) { animation-delay: 24s; }
	.marquee span:nth-child(4) { animation-delay: ~~45s~~; }		.marquee span:nth-child(4) { animation-delay: 36s; }
	.marquee span:nth-child(5) { animation-delay: ~~60s~~; }		.marquee span:nth-child(5) { animation-delay: 48s; }

	@keyframes scroll {		@keyframes scroll {
Строка 29:		Строка 29:
	opacity: 1;		opacity: 1;
	}		}
	70% {		10% {
			transform: translateX(100%);
			opacity: 1;
			}
			80% {
	transform: translateX(-110%);		transform: translateX(-110%);
	opacity: 1;		opacity: 1;
	}		}
	71%, 100% {		85% {
			opacity: 0;
			}
			100% {
	transform: translateX(-110%);		transform: translateX(-110%);
	opacity: 0;		opacity: 0;
	}		}
	}		}