☰

trainingpeaks.com - Dark Mode

trainingpeaks.com Dark Mode

Verzia zo dňa 14.12.2024. Pozri najnovšiu verziu.

/* ==UserStyle==
@name         trainingpeaks.com - Dark Mode
@version      20241107.04.55
@namespace    typpi.online
@description  trainingpeaks.com Dark Mode
@author       Nick2bad4u
@license      UnLicense
@homepageURL  https://github.com/Nick2bad4u/UserStyles
==/UserStyle== */
@document domain("trainingpeaks.com") {
	/* Invert colors except images and videos */
	:is(
			html:not([stylus-iframe]),
			img,
			svg,
			video
		):not(png),
	#workOutQuickView
		> div.QVHeader
		> div.QVHeaderItemsContain.cf
		> div.workoutBarView
		> div:nth-child(2)
		> div
		> div
		> div.workoutIconAndKeyStats
		> div.tomahawkButton,
	body
		> div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
		> div.overlayBoxBody
		> div.tabbedLayoutBody.scrollable
		> div
		> div
		> div
		> div
		> div:nth-child(1)
		> div.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;
	}

	#wrapper
		> div
		> div
		> div.appContainerLibrayAndContentContainer
		> div.appContainerMainContentContainer,
	#wrapper
		> div
		> div
		> div.appHeader
		> div.userControls,
	#wrapper
		> div
		> div
		> div.appContainerLibrayAndContentContainer
		> div.appContainerMainContentContainer
		> div
		> div
		> div.trainingPeaksAthleteHomeContent
		> div.columns
		> div.column__center
		> div
		> div.todaysWorkouts
		> div:nth-child(n)
		> div
		> div
		> 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;
	}

	#wrapper
		> div
		> div
		> div.appHeader
		> div.userControls
		> div.logoAndUserType
		> a.appHeaderLogoLargeScreen,
	#wrapper
		> div
		> div
		> div.appHeader
		> div.userControls
		> div.secondaryNavigation
		> div.appHeaderUserSettings
		> div.appHeaderUserPhoto,
	span,
	button,
	#wrapper
		> div
		> div
		> div.appContainerLibrayAndContentContainer
		> div.appContainerMainContentContainer
		> div
		> div
		> div.trainingPeaksAthleteHomeHeader
		> div.athletePhoto
		> div
		> div,
	#wrapper
		> div
		> div
		> div.appHeader
		> div.userControls
		> div.secondaryNavigation
		> 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,
	body
		> div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
		> div.overlayBoxBody
		> div.tabbedLayoutBody.scrollable
		> div
		> div
		> div:nth-child(n)
		> div.heartRateZones
		> div
		> div
		> div.zoneSetContain.heartrate
		> fieldset
		> label:nth-child(n)
		> span,
	body
		> div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
		> div.overlayBoxBody
		> div.tabbedLayoutBody.scrollable
		> div
		> div
		> div:nth-child(n)
		> div.heartRateZones
		> div
		> div
		> div.zones.zonesConfigGroupView.ui-sortable
		> div:nth-child(n)
		> span,
	span.zoneEntryTo,
	span.zoneSetTitle {
		color: white;
	}

	.MuiTypography-root {
		color: #cb0808;
	}

	.units {
		color: #007580 !important;
	}

	body
		> div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
		> div.overlayBoxBody
		> div.tabbedLayoutBody.scrollable
		> div
		> div
		> div:nth-child(n)
		> div.heartRateZones
		> div
		> div
		> div.zoneSetContain.heartrate
		> fieldset
		> label:nth-child(n)
		> input,
	.heartRateZones
		> div
		> div
		> div.zones.zonesConfigGroupView.ui-sortable
		> div:nth-child(n)
		> input,
	body
		> div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
		> div.overlayBoxBody
		> div.tabbedLayoutBody.scrollable
		> div
		> div
		> div:nth-child()
		> div.powerZones
		> div
		> div
		> div.zoneSetContain.power
		> fieldset
		> label
		> input,
	body
		> div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
		> div.overlayBoxBody
		> div.tabbedLayoutBody.scrollable
		> div
		> div
		> div:nth-child(2)
		> div.powerZones
		> div
		> div
		> div.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;
	}

	#wrapper
		> div
		> div
		> div.appContainerLibrayAndContentContainer
		> div.appContainerMainContentContainer
		> div
		> div
		> div.trainingPeaksAthleteHomeContent
		> div.columns
		> div.column__center
		> div
		> div.todaysWorkouts
		> div.metric
		> div
		> div.activityHeader.metricsTileHeader
		> div
		> div
		> span.metricKeyStat.activitySubText,
	#wrapper
		> div
		> div
		> div.appContainerLibrayAndContentContainer
		> div.appContainerMainContentContainer
		> div
		> div
		> div.trainingPeaksAthleteHomeContent
		> div.columns
		> div.column__center
		> div
		> div.todaysWorkouts
		> div.metric
		> div
		> div.activityHeader.metricsTileHeader
		> div
		> span:nth-child(n) {
		color: red;
	}

	#quickViewContent
		> div.tabContent.tabContentRegion
		> div
		> div
		> div.rightColumn
		> div.otherThanCommentsContainer
		> div.workoutTagsContainer
		> div
		> div
		> div:nth-child(n)
		> span,
	#wrapper
		> div
		> div
		> div.appHeader
		> div.dreamingSeasonPencilBanner
		> div.dreamingSeasonPencilBannerContainer
		> div
		> span.MuiTypography-root.MuiTypography-body1.css-1njuh5f-MuiTypography-root,
	#wrapper
		> div
		> div
		> div.appHeader
		> div.dreamingSeasonPencilBanner
		> div.dreamingSeasonPencilBannerContainer
		> div
		> span.MuiTypography-root.MuiTypography-body1.css-1d9r2xn-MuiTypography-root,
	#workOutQuickView
		> div.QVHeader
		> div.QVHeaderItemsContain.cf
		> div.performanceData
		> div
		> div
		> div
		> div.form.TSB
		> span.label,
	#workOutQuickView
		> div.QVHeader
		> div.QVHeaderItemsContain.cf
		> div.dateAndTime
		> div
		> div
		> div
		> span,
	#wrapper
		> div
		> div
		> div.appContainerLibrayAndContentContainer
		> div.appContainerMainContentContainer
		> div
		> div
		> div.trainingPeaksAthleteHomeContent
		> div.columns
		> div.column__center
		> div
		> div.todaysWorkouts
		> div.metric
		> div
		> div.activityHeader.metricsTileHeader
		> div
		> div
		> span:nth-child(1) {
		color: white;
	}

	#workOutQuickView
		> div.QVHeader
		> div.QVHeaderItemsContain.cf
		> div.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 */
	}

	#wrapper
		> div
		> div
		> div.appContainerLibrayAndContentContainer
		> div.appContainerMainContentContainer
		> div
		> div.frameworkMainWrapper
		> div
		> div.calendarContainer
		> div
		> div
		> div.contents.scrollable
		> div.focusedWeeks
		> div.calendarWeekContainer.inView
		> div
		> div:nth-child(n)
		> div.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%);
	}

	#commentsContainer
		> div
		> div
		> div:nth-child(1)
		> div.rpeContainer
		> div
		> div
		> div.emojiSelector.greatToBrutal
		> div.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;
	}
}