☰

Greasy Fork is available in English.

trainingpeaks.com - Dark Mode

trainingpeaks.com Dark Mode

/* ==UserStyle==
@name         trainingpeaks.com - Dark Mode
@version      20241107.04.57
@namespace    typpi.online
@description  trainingpeaks.com Dark Mode
@author       Nick2bad4u
@license      UnLicense
@homepageURL  https://github.com/Nick2bad4u/UserStyles
@supportURL   https://github.com/Nick2bad4u/UserStyles/issues
==/UserStyle== */
@-moz-document domain("trainingpeaks.com") {
	/* Invert colors except images and videos */
	:is(html:not([stylus-iframe]), img, svg, video):not(png),
	.tomahawkButton,
	.profilePicture > fieldset > div {
		filter: invert(1) hue-rotate(180deg) !important;
	}

	/* Ensure background images are not inverted */
	:is(
			html:not([stylus-iframe]),
			img,
			svg,
			video,
			#workOutQuickView
				> div.QVHeader
				> div.QVHeaderItemsContain.cf
				> div.workoutBarView
				> div:nth-child(2)
				> div
				> div
		):not(z#z.z[z]) {
		background-color: inherit !important;
	}

	.appContainerMainContentContainer,
	.userControls,
	.todaysWorkouts > div:nth-child(n) > div.workoutHeader {
		background: #fff !important;
	}

	#wrapper
		> div
		> div
		> div.appContainerLibrayAndContentContainer
		> div.appContainerMainContentContainer
		> div
		> div
		> div.trainingPeaksAthleteHomeHeader
		> div.athleteName,
	.value {
		color: #9612b2 !important;
		text-decoration-line: underline;
		text-decoration-color: blue;
	}

	.appHeaderLogoLargeScreen,
	.appHeaderUserPhoto,
	span,
	button,
	.athletePhoto > div > div,
	.tpVirtualButtonContainer
		> button
		> svg
		> path:nth-child(n) {
		filter: invert(1) hue-rotate(180deg);
	}

	a:hover,
	button:hover {
		text-decoration-line: underline !important;
		text-decoration-color: #b41289 !important;
	}

	.tabbedLayoutNav li,
	.overlayBoxBody > ul > li.active > span {
		color: white;
	}

	.tabbedLayoutNav li:hover,
	.overlayBoxBody > ul > li.active > span:hover {
		color: #006bb9;
	}

	.css-37jdci-MuiTypography-root.title.newActivityUItitle.MuiTypography-H6.MuiTypography-root,
	.zoneSetContain.heartrate
		> fieldset
		> label:nth-child(n)
		> span,
	.zones.zonesConfigGroupView.ui-sortable
		> div:nth-child(n)
		> span,
	span.zoneEntryTo,
	span.zoneSetTitle {
		color: white;
	}

	.MuiTypography-root {
		color: #cb0808;
	}

	.units {
		color: #007580 !important;
	}

	.zoneSetContain.heartrate
		> fieldset
		> label:nth-child(n)
		> input,
	.heartRateZones
		> div
		> div
		> div.zones.zonesConfigGroupView.ui-sortable
		> div:nth-child(n)
		> input,
	.zoneSetContain.power > fieldset > label > input,
	.zones.zonesConfigGroupView.ui-sortable
		> div:nth-child(n)
		> input.numberInput.tpSettingsInput.min.first {
		color: black;
	}

	div.workoutStatsColumn.workoutStatsUnitLabel > label,
	div.workoutStatsColumn.workoutStatsLabel > label,
	div.workoutStatsColumn.workoutStatsMinMaxAvgLabel > label,
	div.equipment > div > div:nth-child(2) > div > label,
	div.equipment > div > div:nth-child(3) > label {
		color: green;
	}

	.activityHeader.metricsTileHeader
		> div
		> div
		> span.metricKeyStat.activitySubText,
	.activityHeader.metricsTileHeader
		> div
		> span:nth-child(n) {
		color: red;
	}

	.workoutTagsContainer
		> div
		> div
		> div:nth-child(n)
		> span,
	.dreamingSeasonPencilBannerContainer
		> div
		> span.MuiTypography-root.MuiTypography-body1.css-1njuh5f-MuiTypography-root,
	.dreamingSeasonPencilBannerContainer
		> div
		> span.MuiTypography-root.MuiTypography-body1.css-1d9r2xn-MuiTypography-root,
	.form.TSB > span.label,
	#workOutQuickView
		> div.QVHeader
		> div.QVHeaderItemsContain.cf
		> div.dateAndTime
		> div
		> div
		> div
		> span,
	.activityHeader.metricsTileHeader
		> div
		> div
		> span:nth-child(1) {
		color: white;
	}

	.workoutBarView > div:nth-child(2) > div > div {
		border: white !important;
		border-style: dashed !important;
		border-color: #cb0808 !important;
	}

	.css-70qvj9.MuiBox-root.athleteHealthMetricsCalendarCardHeaderRight
		> svg
		> path {
		fill: #ff0000 !important;
		/* changes the color to red */
	}

	.activities
		> div:nth-child(n)
		> div
		> div
		> div.lowerWorkoutCard
		> div.PRCommentRPEContainer {
		filter: invert(20%) sepia(90%) saturate(700%)
			hue-rotate(180deg) brightness(90%) contrast(90%);
	}

	.emojiScale > div:nth-child(n) {
		filter: invert(70%) sepia(100%) saturate(500%)
			hue-rotate(18deg) brightness(50%) contrast(100%);
	}

	#chartsContainer > div > div.dashboardChart {
		border: 2px solid pink;
	}
}