Customizable recolor for the camp page and outer page UI. Default palette is a dark mode. Intended for use with Stylus extension.
As of
/* ==UserStyle==
@name Mousehunt - Dark UI Theme - Camp
@namespace https://greatest.deepsurf.us/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));
}
}