☰

Mousehunt - Dark UI Theme - Camp

Customizable recolor for the camp page and outer page UI. Default palette is a dark mode. Intended for use with Stylus extension.

/* ==UserStyle==
@name           Mousehunt - Dark UI Theme - Camp
@namespace      https://greasyfork.org/users/918578
@version        1.0.2
@description    Customizable recolor for the camp page and outer page UI. Default palette is a dark mode. Intended for use with Stylus extension.
@author         squash
@var color custom-text-normal "Text Normal - Most text" #dcddde
@var color custom-text-muted "Text Muted - Darker than normal text" #a3a6aa
@var color custom-text-link "Links - Most links" hsl(197, 100%, 47.8%)
@var color custom-text-positive "Text Positive - Trap selector stat values" hsl(139, 51.6%, 52.2%)
@var color custom-text-danger "Text Negative - Trap selector stat values" hsl(359, 82%, 73.9%)
@var color custom-text-contrast "Text Contrast - Rarely used where darker text is needed" #4f545c
@var color custom-background-primary "Background Primary - Most backgrounds" #36393f
@var color custom-background-secondary "Background Secondary - Darker background" #2f3136
@var color custom-background-accent "Background Accent - Lighter background" #4f545c
@var color custom-background-floating "Background Floating - Higher contrast darker background" #18191c
@var color custom-background-trap "Background Behind Trap" #2f3136
@var color custom-background-outer "Background for page outside the UI" #18191c
@var color custom-background-outer-secondary "Background for page immediately outside UI" #232429
@var color custom-background-border "Borders" #4f545c

==/UserStyle== */

@-moz-document url-prefix("https://www.mousehuntgame.com"),
url-prefix("http://www.mousehuntgame.com") {
	:root {
		--text-normal: var(--custom-text-normal, #dcddde);
		--text-muted: var(--custom-text-muted, #a3a6aa);
		--text-link: var(--custom-text-link, hsl(197, 100%, 47.8%));
		--text-positive: var(--custom-text-positive, hsl(139, 51.6%, 52.2%));
		--text-danger: var(--custom-text-danger, hsl(359, 82%, 73.9%));
		--background-primary: var(--custom-background-primary, #36393f);
		/* background color for most elements */
		--background-secondary: var(--custom-background-secondary, #2f3136);
		/* should be darker than primary */
		--background-accent: var(--custom-background-accent, #4f545c);
		/* should be lighter than primary */
		--background-floating: var(--custom-background-floating, #18191c);
		/* should be darker than secondary */
		--text-contrast: var(--custom-text-contrast, #4f545c);
		/* used in situations where darker text is needed */
		--background-trap: var(--custom-background-trap, var(--background-secondary));
		/* background behind trap art */
		--background-outer: var(--custom-background-outer, var(--background-floating));

		--background-outer-secondary: var(--custom-background-outer-secondary, #232429);
		/* page background outside UI */
		--background-border: var(--custom-background-border, var(--background-accent));
		/* almost every border */

		--loader-brightness: 0.2;
		/* used to dim full page instances of the white loader mouse */
		--hg-default-black: #000;
		--hg-default-grey: #333;
		--hg-default-white: #fff;
		/* for resetting various things back to hg defaults */
	}

	/*** Events ***/

	body.halloween .pageFrameView-column.left,
	body.halloween .pageFrameView-column.right {
		filter: brightness(0.25);
	}

	body.great_winter_hunt .pageFrameView-column.left,
	body.great_winter_hunt .pageFrameView-column.right {
		filter: brightness(0.20);
	}

	body .pageFrameView-column.left,
	body .pageFrameView-column.right {
		filter: brightness(0.20);
	}


	#overlayPopup.greatWinterHuntDialog {
		-webkit-transform: inherit !important;
		-moz-transform: inherit !important;
		-o-transform: inherit !important;
		transform: inherit !important;
		position: absolute;
		left: 0;
	}


	/*** General/Outer HUD ***/

	.pageSidebarView a,
	.pageFrameView-footer a {
		color: var(--text-link);
	}

	body.hasSidebar {
		background-color: var(--background-outer);
	}

	.pageFrameView-column.left,
	.pageFrameView-column.right {
		background-image: none;
		background-color: var(--background-outer);
		border-color: var(--background-outer-secondary);
	}

	#mousehuntContainer.PageCamp {
		box-shadow: inset 0px 0px 0px 1px var(--background-border);
		/* darkens the 1px line on either side of the camp background image */
	}

	.pageFrameView-content {
		background-color: var(--background-outer-secondary);
	}

	.PageDataBridgeError .pageFrameView-content {
		background-color: var(--hg-default-white);
	}

	.pageFrameView-contentContainer {
		background-color: var(--background-outer-secondary);
	}

	.mousehuntHeaderView {
		background-color: var(--background-outer-secondary);
	}

	#mousehuntContainer:not(.PageCamp) {
		background-color: var(--hg-default-white);
	}

	.mousehuntHeaderView-gameTabs,
	.mousehuntHeaderView .menuItem {
		background-image: none;
		color: var(--text-normal);
		box-shadow: none;
		border-color: var(--background-border);
		background-color: var(--background-primary);
	}

	.mousehuntHud-gameInfo {
		background-color: var(--background-primary);
		color: var(--text-normal);
	}

	.mousehuntHud-gameInfo a {
		color: var(--text-link);
	}

	.mousehuntHeaderView-newsTicker .label {
		color: var(--text-normal);
	}

	.mousehuntHeaderView-newsTicker a {
		color: var(--text-link);
	}

	.mousehuntHeaderView-newsTicker {
		background-color: var(--background-primary);
		color: var(--text-normal);
		border-color: var(--background-border);
	}

	.pageSidebarView {
		background-color: var(--background-outer-secondary);
		color: var(--text-normal);
	}

	.pageSidebarView .fb-page {
		background-color: var(--background-outer);
		color: var(--text-muted);
		border-color: transparent;
		height: auto;
	}

	.pageSidebarView-user {
		border-color: var(--background-border);
		color: var(--text-normal);
	}

	.mousehuntHeaderView .dropdownContent {
		background-color: var(--background-floating);
		border-color: var(--background-border);
		color: var(--text-normal);
	}

	.mousehuntHeaderView .dropdownContent a,
	.mousehuntHeaderView .dropdownContent a span {
		color: var(--text-normal);
		border-color: var(--background-border);
	}

	.scoreboardRelativeRankingTableView-table tr.highlight {
		background-color: var(--background-accent);
	}

	.scoreboardRelativeRankingTableView-table {
		border: none;
		color: var(--text-normal);
	}

	/*** Camp ***/
	.campPage-trap {
		background-color: var(--background-secondary);
		border-color: var(--background-border);
		box-shadow: none;
	}

	.campPage-trap .trapImageView {
		background-color: var(--background-trap);
		border-color: var(--background-border);
	}

	.campPage-trap-armedItem {
		box-shadow: none;
	}

	.campPage-trap-armedItem.bait {
		background-color: var(--background-primary);
		border-color: var(--background-border);
		box-shadow: none;
	}

	.campPage-trap-armedItem.bait .campPage-trap-armedItem-image {
		border-color: var(--background-border);
	}

	.campPage-trap-armedItem .quantity span {
		background-color: var(--background-primary);
		border-color: var(--background-border);
		color: var(--text-normal);
		box-shadow: none;
	}

	.campPage-trap-baitLabel {
		color: var(--text-muted);
	}

	.campPage-trap-baitDetails {
		color: var(--text-normal);
		text-shadow: none;
	}

	.campPage-trap-armedItem.skin {
		background-color: var(--background-primary);
		border-color: var(--background-border);
		box-shadow: none;
	}

	.campPage-trap-armedItem-empty {
		background-color: var(--background-primary);
		color: var(--text-muted);
	}

	.campPage-trap-armedItem-skin-description {
		color: var(--text-normal);
	}

	.campPage-trap-armedItem-skin-description-content b {
		color: var(--text-muted);
	}

	.campPage-trap-armedItem.skin .campPage-trap-armedItem-skin-description-content span {
		color: var(--text-normal);
	}

	.campPage-trap-armedItem-image {
		border-color: var(--background-border);
	}

	.campPage-trap-armedItem.inactive {
		background-color: var(--background-secondary);
	}

	.campPage-trap-armedItem.active {
		box-shadow: -1px -1px 1px var(--background-secondary) inset,
			2px 2px 8px var(--background-accent);
	}

	.campPage-trap-statsContainer {
		box-shadow: none;
		background-color: var(--background-accent);
	}

	.PageCamp .campPage-trap-itemStats {
		background-color: var(--background-secondary);
		border-color: var(--background-border);
		box-shadow: none;
	}

	.PageCamp .campPage-trap-trapStat .value {
		background-color: var(--background-primary);
		border-color: var(--background-border);
		color: var(--text-normal);
	}

	.campPage-trap-trapStat .math {
		background-color: var(--background-floating);
		color: var(--text-normal);
		border-color: var(--background-border);
		box-shadow: none;
	}

	.campPage-trap-trapStat .math .arrow {
		border-color: var(--background-border) transparent transparent transparent;
	}

	.campPage-trap-trapStat .math .arrow span {
		border-color: var(--background-floating) transparent transparent transparent;
	}

	.campPage-trap-trapEffectiveness {
		background-color: var(--background-secondary);
		border-color: var(--background-border);
		box-shadow: none;
		color: var(--text-muted);
	}

	.campPage-trap-trapEffectiveness span {
		color: var(--text-normal);
	}

	.campPage-trap-friendContainer .label {
		color: var(--text-muted);
	}

	.campPage-trap-friendContainer span {
		color: var(--text-normal);
	}

	.campPage-trap-friendContainer-toggleFriendsButton {
		color: var(--text-normal);
	}

	.campPage-trap-friendContainer-toggleFriendsButton-arrow {
		border-color: var(--text-normal) transparent transparent transparent;
	}

	.campPage-trap-friendContainer.full .campPage-trap-friendContainer-toggleFriendsButton-arrow {
		border-color: transparent transparent var(--text-normal) transparent;
	}

	.campPage-trap-friendList.full {
		background-color: var(--background-primary);
		color: var(--text-normal);
	}

	.campPage-trap-friendContainer-environment a {
		color: var(--text-link);
	}

	.campPage-tabs-tabHeader span {
		background-color: var(--background-secondary);
		color: var(--text-normal);
		border-color: var(--background-border);
		box-shadow: none;
	}

	.campPage-tabs-tabHeader.active span {
		background-color: var(--background-primary);
		border-bottom-color: var(--background-primary);
	}

	.campPage-tabs-tabRow:hover .campPage-tabs-tabHeader span {
		border-bottom-color: var(--background-border);
		background-color: var(--background-secondary);
	}

	.campPage-tabs-tabRow .campPage-tabs-tabHeader:hover span {
		border-bottom-color: var(--background-primary);
		background-color: var(--background-primary);
	}

	.campPage-tabs-tabContentContainer {
		background-color: var(--background-primary);
		box-shadow: none;
		border-color: var(--background-border);
	}

	.campPage-tabs-tabContent[data-tab='journal'] {
		background-color: var(--background-primary);
	}

	.adventureBookBanner-adventureName {
		background-color: var(--background-primary);
		color: var(--text-normal);
	}

	.journal-detailLinkContainer a {
		color: var(--text-link);
	}

	/*** Trap Selector ***/
	.campPage-trap-itemBrowser-favorite-item-image-quantity {
		color: var(--text-contrast);
	}

	.campPage-trap-itemBrowser-item-powerType:after {
		color: var(--text-normal);
	}

	.cannotDisarm .campPage-trap-itemBrowser-item-armButton {
		color: var(--hg-default-black);
	}

	.armed .campPage-trap-itemBrowser-item-armButton {
		color: var(--hg-default-white);
	}

	.campPage-trap-itemBrowser-armed-item-content .campPage-trap-itemBrowser-item-disarmButton {
		color: var(--hg-default-white);
	}

	.campPage-trap-itemBrowser-armed-label {
		color: var(--text-normal);
	}

	.campPage-trap-itemBrowser-tagGroup-name {
		color: var(--text-normal);
		border-color: var(--background-border);
	}

	.campPage-trap-itemBrowser-tagGroup-empty {
		background-color: var(--background-primary);
		border-color: var(--background-border);
		color: var(--text-normal);
	}

	.empty .campPage-trap-itemBrowser-favorite-item-image {
		background-color: var(--background-primary);
	}

	.campPage-trap-itemBrowser-favorite-item-image-frame {
		box-shadow: none;
		border-color: var(--background-border);
	}

	.campPage-trap-itemBrowser-armed,
	.campPage-trap-itemBrowser-itemContainer,
	.campPage-trap-itemBrowser-favorites {
		background-color: var(--background-secondary);
		color: var(--text-normal);
	}

	.campPage-trap-itemBrowser-armed-item,
	.campPage-trap-itemBrowser-item {
		background-color: var(--background-primary);
		color: var(--text-normal);
		border-color: var(--background-border);
	}

	.campPage-trap-itemBrowser-item-statContainer {
		border-radius: 5px;
	}

	.campPage-trap-itemBrowser-item-stat .value span {
		color: var(--text-normal);
	}

	.campPage-trap-itemBrowser-item-stat {
		background-color: var(--background-secondary);
	}

	.campPage-trap-itemBrowser-item-stat.worse .value span {
		color: var(--text-danger);
	}

	.campPage-trap-itemBrowser-item-stat.better .value span {
		color: var(--text-positive);
	}

	.campPage-trap-trapEffectivenessContainer {
		background-color: var(--background-secondary);
	}

	.campPage-trap-trapEffectiveness-header {
		color: var(--text-normal);
	}

	.campPage-trap-trapEffectiveness-difficultyGroup-label {
		border-color: var(--background-border);
	}

	.campPage-trap-trapEffectiveness-difficultyGroup {
		background-color: var(--background-primary);
		border-color: var(--background-border);
		color: var(--text-normal);
	}

	.campPage-trap-trapEffectiveness-mouse {
		border-color: var(--background-border);
		color: var(--text-normal);
	}

	.campPage-trap-trapEffectiveness-mouse:hover {
		background-color: var(--background-accent);
	}

	.campPage-trap-blueprint-closeButton {
		background-color: var(--background-secondary);
		color: var(--text-normal);
	}

	.campPage-trap-blueprintContainer input[type='text'],
	.campPage-trap-blueprintContainer select {
		background-color: var(--background-primary);
		border-color: var(--background-accent);
		color: var(--text-normal);
	}

	.trapSelectorView__outerBlock {
		background-color: var(--background-primary);
		border-color: var(--background-border);
		color: var(--text-normal);
		box-shadow: none;
		-webkit-box-shadow: none;
	}

	.trapSelectorView__innerBlock {
		background-color: var(--background-secondary);
		border-color: var(--background-border);
		color: var(--text-normal);
	}

	.trapSelectorView__armedItemBorder {
		border-color: var(--background-border);
		box-shadow: none;
		-webkit-box-shadow: none;
	}

	.trapSelectorView__trapStatSummary {
		background-color: var(--background-secondary);
		color: var(--text-normal);
		box-shadow: none;
		-webkit-box-shadow: none;

	}

	.trapSelectorView__trapStatSummaryContainer {
		background-color: var(--background-accent);
		border-color: var(--background-border);
		color: var(--text-normal);
		box-shadow: none;
		-webkit-box-shadow: none;
	}


	/*** Journal ***/

	.journal .content {
		padding: 0 7px 0 10px;
	}

	.journal .entry {
		color: var(--hg-default-grey);
	}

	/*** Common/Pagination ***/

	#overlayBg {
		background-image: none;
		background-color: rgb(0, 0, 0, 0.3);
	}

	.PageCamp .pagerView-container {
		background-color: var(--background-primary);
		color: var(--text-normal);
	}

	.PageCamp .pagerView-section.previous .pagerView-link,
	.PageCamp .pagerView-section.next .pagerView-link {
		color: var(--text-muted);
		border-color: var(--background-border);
	}

	.PageCamp .pagerView-section.previous.active .pagerView-link,
	.PageCamp .pagerView-section.next.active .pagerView-link {
		color: var(--text-link);
		border-color: var(--background-border);
	}

	.PageCamp .mousehuntHud-page-tabContent-loading,
	.PageCamp .mousehuntHud-page-subTabContent-loading,
	.PageCamp .campPage-trap-trapEffectivenessContainer .loading,
	.PageCamp .campPage-trap-itemBrowser-armed .loading,
	.PageCamp .campPage-trap-itemBrowser-items .loading,
	.PageCamp .campPage-tabs-tabContent-loading,
	.PageCamp .campPage-trap-friendList.loading .campPage-trap-friendList-loading {
		filter: brightness(var(--loader-brightness));
	}
}