MediaWiki:Common.css - Revision history

Editor at 11:45, 6 March 2026

2026-03-06T11:45:26Z

← Older revision		Revision as of 11:45, 6 March 2026
Line 672:		Line 672:
	}		}

	~~/* scrolling track */~~
	.ts-device-track {		.ts-device-track {
	display: flex;		display: flex;
	~~gap: 30px;~~
	width: max-content;		width: max-content;
	animation: ts-scroll ~~35s~~ linear infinite;		animation: ts-scroll 30s linear infinite;
	}		}

	~~/* device card */~~
	.ts-device-item {		.ts-device-item {
	flex: 0 0 auto;		flex: 0 0 auto;
	~~width~~: ~~220px~~;		margin: 0 24px;
	padding: ~~20px~~;		padding: 16px;
	border-radius: 16px;		border-radius: 16px;
	background: #fff;		background: #fff;
	box-shadow: 0 12px 30px rgba(0,0,0,0.08);		box-shadow: 0 12px 30px rgba(0,0,0,0.08);
	~~text-align: center;~~
	transition: transform 0.3s ease;		transition: transform 0.3s ease;
	}		}
Line 696:		Line 692:
	}		}

	/* ~~remove mediawiki~~ image ~~wrapper effects~~ */		/* Fix MediaWiki image wrappers */
	.ts-device-item ~~.thumb,~~		.ts-device-item a {
	~~.ts-device-item .image,~~		display: block;
	~~.ts-device-item figure~~ {
	~~margin: 0 !important;~~
	~~padding: 0 !important;~~
	~~border~~: ~~none !important~~;
	}		}

	~~/* image container */~~
	.ts-device-item img {		.ts-device-item img {
	~~width: 160px;~~
	height: 160px;		height: 160px;
	~~object-fit~~: ~~contain~~;		width: auto;
	display: block;		display: block;
	~~margin: auto;~~
	}		}

	/* ~~device~~ name */		@keyframes ts-scroll {
			from { transform: translateX(0); }
			to { transform: translateX(-50%); }
			}
			/* Device name text */
	.ts-device-name {		.ts-device-name {
	margin-top: ~~12px~~;		margin-top: 10px;
			text-align: center;
	font-size: 14px;		font-size: 14px;
	font-weight: 600;		font-weight: 600;
	letter-spacing: 0.6px;		letter-spacing: 0.6px;
	color: #7a0c2e;		color: #7a0c2e; /* burgundy to match header */
	text-transform: uppercase;		text-transform: uppercase;
	}		}
			/* Ensure image + text stay centered */
			.ts-device-item {
			text-align: center;
			}
	.ts-device-item:hover .ts-device-name {		.ts-device-item:hover .ts-device-name {
	color: #000000;		color: #000000;
	}

	~~/* scroll animation */~~
	~~@keyframes ts-scroll {~~
	~~from { transform: translateX(0); }~~
	~~to { transform: translateX(-50%); }~~
	}

	~~.ts-device-strip:hover .ts-device-track{~~
	~~animation-play-state: paused;~~
	}		}

Editor at 11:42, 6 March 2026

2026-03-06T11:42:05Z

← Older revision		Revision as of 11:42, 6 March 2026
Line 664:		Line 664:
	}		}

	/~~Device image~~ scrolling ~~effect in home page~~ /		/* === Auto flowing device strip === */
			.ts-device-strip {
			width: 100%;
			overflow: hidden;
			padding: 40px 0;
			background: #ffffff;
			}

			/* scrolling track */
			.ts-device-track {
			display: flex;
			gap: 30px;
			width: max-content;
			animation: ts-scroll 35s linear infinite;
			}

			/* device card */
			.ts-device-item {
			flex: 0 0 auto;
			width: 220px;
			padding: 20px;
			border-radius: 16px;
			background: #fff;
			box-shadow: 0 12px 30px rgba(0,0,0,0.08);
			text-align: center;
			transition: transform 0.3s ease;
			}

			.ts-device-item:hover {
			transform: translateY(-8px);
			}

	.ts-device-~~strip~~{		/* remove mediawiki image wrapper effects */
	~~width~~:~~100%;~~		.ts-device-item .thumb,
	~~overflow:hidden~~;		.ts-device-item .image,
	padding:~~40px~~ 0;		.ts-device-item figure {
	~~background~~:~~#fff~~;		margin: 0 !important;
			padding: 0 !important;
			border: none !important;
	}		}

	.ts-device-~~track~~{		/* image container */
	~~display~~:~~flex~~;		.ts-device-item img {
	~~width~~:~~max~~-~~content~~;		width: 160px;
	~~animation~~:~~ts-scroll 60s linear infinite~~;		height: 160px;
	~~will-change~~:~~transform~~;		object-fit: contain;
			display: block;
			margin: auto;
	}		}

	.ts-device-~~item~~{		/* device name */
	~~flex~~:~~0 0 auto~~;		.ts-device-name {
	~~margin~~:~~0 24px~~;		margin-top: 12px;
	~~padding~~:~~16px~~;		font-size: 14px;
	~~border~~-~~radius~~:~~16px~~;		font-weight: 600;
	~~background~~:#~~fff;~~		letter-spacing: 0.6px;
	~~box-shadow:0 12px 30px rgba(0,0,0,0.08)~~;		color: #7a0c2e;
	text-~~align~~:~~center~~;		text-transform: uppercase;
	}		}

	.ts-device-item ~~img~~{		.ts-device-item:hover .ts-device-name {
	~~width:160px;~~		color: #000000;
	~~height:auto;~~
	~~display:block;~~
	~~margin~~:~~auto~~;
	}		}

	.ts-~~device-name~~{		/* scroll animation */
	~~margin-top~~:~~10px~~;		@keyframes ts-scroll {
	~~font-size~~:~~14px;~~		from { transform: translateX(0); }
	~~font~~-~~weight:600;~~		to { transform: translateX(-50%); }
	~~color:#7a0c2e~~;
	}		}

	~~@keyframes~~ ts-~~scroll~~{		.ts-device-strip:hover .ts-device-track{
	~~from{transform:translateX(0)}~~		animation-play-state: paused;
	~~to{transform~~:~~translateX(-50%)}~~
	}		}

Editor at 11:38, 6 March 2026

2026-03-06T11:38:09Z

← Older revision		Revision as of 11:38, 6 March 2026
Line 664:		Line 664:
	}		}

	/* ~~=== Auto flowing device strip ===~~ */		/Device image scrolling effect in home page /
	~~.ts-device-strip {~~
	~~width: 100%;~~
	~~overflow: hidden;~~
	~~padding: 40px 0;~~
	~~background: #ffffff;~~
	}

	.ts-device-~~track~~ {		.ts-device-strip{
	~~display~~: ~~flex~~;		width:100%;
	~~width~~: ~~max-content~~;		overflow:hidden;
	~~animation~~: ~~ts-scroll 30s linear infinite~~;		padding:40px 0;
			background:#fff;
	}		}

	.ts-device-~~item~~ {		.ts-device-track{
	flex~~: 0 0 auto~~;		display:flex;
	~~margin~~: ~~0 24px~~;		width:max-content;
	~~padding~~: ~~16px;~~		animation:ts-scroll 60s linear infinite;
	~~border~~-~~radius: 16px~~;		will-change:transform;
	~~background: #fff;~~
	~~box~~-~~shadow: 0 12px 30px rgba(0,0,0,0.08);~~
	~~transition~~: transform ~~0.3s ease~~;
	}		}

	.ts-device-item:~~hover {~~		.ts-device-item{
	~~transform~~: ~~translateY~~(-~~8px)~~;		flex:0 0 auto;
			margin:0 24px;
			padding:16px;
			border-radius:16px;
			background:#fff;
			box-shadow:0 12px 30px rgba(0,0,0,0.08);
			text-align:center;
	}		}

	~~/* Fix MediaWiki image wrappers */~~		.ts-device-item img{
	.ts-device-item a {		width:160px;
	display: block;		height:auto;
			display:block;
			margin:auto;
	}		}

	.ts-device-~~item img~~ {		.ts-device-name{
	~~height~~: ~~160px~~;		margin-top:10px;
	~~width~~: ~~auto~~;		font-size:14px;
	~~display~~: ~~block~~;		font-weight:600;
			color:#7a0c2e;
	}		}

	@keyframes ts-scroll {		@keyframes ts-scroll{
	from { transform: translateX(0); }		from{transform:translateX(0)}
	to { transform: translateX(-50%)~~; }~~		to{transform:translateX(-50%)}
	}
	~~/* Device name text */~~
	~~.ts-device-name {~~
	~~margin-top: 10px;~~
	~~text-align: center;~~
	~~font-size: 14px;~~
	~~font-weight: 600;~~
	~~letter-spacing: 0.6px;~~
	~~color: #7a0c2e; /* burgundy to match header */~~
	~~text-transform: uppercase;~~
	}
	~~/* Ensure image + text stay centered */~~
	~~.ts-device-item {~~
	~~text-align: center;~~
	}
	~~.ts-device-item:hover .ts-device-name {~~
	~~color: #000000;~~
	}		}

Editor at 08:34, 5 January 2026

2026-01-05T08:34:18Z

@@ Line 723: / Line 723: @@
 .ts-device-item:hover .ts-device-name {
    color: #000000;
+}

Editor at 08:32, 5 January 2026

2026-01-05T08:32:11Z

← Older revision		Revision as of 08:32, 5 January 2026
Line 726:		Line 726:

	/* Telemetry Animation*/		/* Telemetry Animation*/
	.~~gps~~-packet {		.binary-packet {
	position: fixed;		position: fixed;
	top: -20px;		top: -20px;
	~~width~~: ~~6px~~;		color: #00ff9c; /* telematics green */
	~~height~~: ~~6px~~;		font-family: "Courier New", monospace;
	~~background~~: ~~#334203~~;		z-index: 9999;
	~~border~~-~~radius: 50%;~~		pointer-events: none;
	~~opacity~~: ~~0.6~~;		animation-name: binaryFall;
	animation-name: ~~gpsFall~~;
	animation-timing-function: linear;		animation-timing-function: linear;
	animation-iteration-count: infinite;		animation-iteration-count: infinite;
	~~z-index: 1;~~
	}		}

	@keyframes ~~gpsFall~~ {		@keyframes binaryFall {
	~~from {~~
	~~transform: translateY(0);~~
	}
	to {		to {
	transform: translateY(110vh);		transform: translateY(110vh);
	}		}
	}


	~~/* cards to feel clickable */~~
	~~.transight-trackers td > div.mw-customtoggle-1,~~
	~~.transight-trackers td > div.mw-customtoggle-2,~~
	~~.transight-trackers td > div.mw-customtoggle-3 {~~
	~~padding: 10px;~~
	}		}

Editor at 08:25, 5 January 2026

2026-01-05T08:25:59Z

← Older revision		Revision as of 08:25, 5 January 2026
Line 731:		Line 731:
	width: 6px;		width: 6px;
	height: 6px;		height: 6px;
	background: #~~00bcd4~~;		background: #334203;
	border-radius: 50%;		border-radius: 50%;
	opacity: 0.6;		opacity: 0.6;

Editor at 08:18, 5 January 2026

2026-01-05T08:18:17Z

@@ Line 741: / Line 741: @@
 @keyframes gpsFall {
-     from { transform: translateY(0); }
+     from {
-     to { transform: translateY(110vh); }
+        transform: translateY(0);
+}
 /* cards to feel clickable */

Editor at 08:05, 5 January 2026

2026-01-05T08:05:47Z

← Older revision		Revision as of 08:05, 5 January 2026
Line 725:		Line 725:
	}		}

	/* ~~snowflake~~ */		/* Telemetry Animation*/
	.~~snowflake~~ {		.gps-packet {
	position: fixed;		position: fixed;
	top: -~~10px~~;		top: -20px;
	~~z-index~~: ~~9999~~;		width: 6px;
	~~color~~: ~~white~~;		height: 6px;
	~~user~~-~~select~~: ~~none~~;		background: #00bcd4;
	~~pointer-events~~: ~~none~~;		border-radius: 50%;
	animation-name: ~~fall~~;		opacity: 0.6;
			animation-name: gpsFall;
	animation-timing-function: linear;		animation-timing-function: linear;
	animation-iteration-count: infinite;		animation-iteration-count: infinite;
			z-index: 1;
	}		}

	@keyframes ~~fall~~ {		@keyframes gpsFall {
	0% {		from { transform: translateY(0); }
	transform: translateY(0);		to { transform: translateY(110vh); }
	}		}
	~~100%~~ {
	transform: translateY(~~100vh~~);		/* Toggle button style */
	}		.gps-toggle {
			cursor: pointer;
			padding: 6px 12px;
			border-radius: 4px;
			background: #0a2540;
			color: #ffffff;
			font-size: 13px;
			display: inline-block;
			margin: 8px 0;
			}

			.gps-toggle:hover {
			background: #143b66;
	}		}

Editor at 09:21, 2 January 2026

2026-01-02T09:21:55Z

← Older revision		Revision as of 09:21, 2 January 2026
Line 752:		Line 752:
	.transight-trackers td > div.mw-customtoggle-3 {		.transight-trackers td > div.mw-customtoggle-3 {
	padding: 10px;		padding: 10px;
	}

	~~.transight-trackers td > div:hover {~~
	~~background-color: #f0e6eb;~~
	}		}

Editor at 09:21, 2 January 2026

2026-01-02T09:21:06Z

← Older revision		Revision as of 09:21, 2 January 2026
Line 748:		Line 748:

	/* cards to feel clickable */		/* cards to feel clickable */
	.transight-trackers td:hover {		.transight-trackers td > div.mw-customtoggle-1,
			.transight-trackers td > div.mw-customtoggle-2,
			.transight-trackers td > div.mw-customtoggle-3 {
			padding: 10px;
			}

			.transight-trackers td > div:hover {
	background-color: #f0e6eb;		background-color: #f0e6eb;
	}		}