Skip to content

TweakSheezy by knuxify

Homepage Write a review Install Get Stylus

Details

Authorknuxify

LicenseCC0

Categorysheezy

Created

Updated

Size17 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A collection of style tweaks and fixups for Sheezy.Art.

Notes

TweakSheezy

A collection of style tweaks and fixups for Sheezy.Art. Available as an UserCSS style that can be installed using a browser extension like Stylus.

General

  • Use dark theme for HTML/Markdown editor - applies a dark theme to the rich editor.
  • Compact headerbar - makes the top header take up less height.
  • Hide featured artwork - hides the featured artwork on the left and right of the headerbar.

Profiles

  • Match header color with user page - makes the header on the top of the page match the header color of the visited user page.
  • Match footer color with user page - makes the footer match the background color of the visited user page.
    • Use profile background image in footer - attempts to use background image in footer, likely won't loop correctly.
  • Theme input fields on profiles with profile colors - makes input fields on profiles match the block background color.
    • Colors to use for input fields - allows for selecting between block background color and button color for the above option.
  • Theme dropdowns on profiles with profile colors - makes dropdowns on profiles match the block background color.
    • Colors to use for dropdowns - allows for selecting between block background color and button color or copying the input option for the above option.
  • Theme rich editor - themes the rich editor (used for code and profile editing) on the profile page.
  • Partially fix profile information preview jank - attempts to at least partially remedy the large margins/padding in HTML previews in the profile information block, among other things.

Artworks

  • Hide like count - hides the like count displayed on the like button.
  • Hide view counter - hides the view counter on the artwork.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name TweakSheezy
@namespace https://github.com/knuxify
@version 1.2.2
@description A collection of style tweaks and fixups for Sheezy.Art.
@author knuxify
@license CC0
@preprocessor stylus

@var checkbox welcome-notice "Show welcome notice" 1

@var text general-placeholder " --- General --- " "_"
@var checkbox general-rich-editor-dark "General: Use dark theme for HTML/Markdown editor" 0

@var text header-placeholder " --- Header --- " "_"

@var checkbox compact-headerbar "Header: Compact headerbar" 0
@var checkbox hide-featured-artwork "Header: Hide featured artwork" 0

@var text profile-placeholder " --- Profiles --- " "_"

@var checkbox profile-match-header "Profiles: Match header color with user page" 0
@var checkbox profile-match-footer "Profiles: Match footer color with user page" 0
@var checkbox profile-match-footer-page-bg " ↳ Use profile background image in footer (may not loop correctly)" 0
@var checkbox profile-input-bg "Profiles: Theme input fields on profiles with profile colors" 0
@var select profile-input-bg-color " ↳ Colors to use for input fields:" ["block:Block (better results)", "button:Button"]
@var checkbox profile-dropdown-bg "Profiles: Theme dropdowns on profiles with profile colors" 0
@var select profile-dropdown-bg-color " ↳ Colors to use for dropdowns:" ["button:Button", "block:Block", "input:Follow input field colors"]
@var checkbox profile-comment-editor-bg "Profiles: Theme comment editor" 0
@var checkbox profile-fix-preview-jank "Profiles: Partially fix profile information preview jank" 0

@var text artworks-placeholder " --- Artworks --- " "_"

@var checkbox artworks-hide-likes "Artworks: Hide like count" 0
@var checkbox artworks-hide-views "Artworks: Hide view counter" 0
}

==/UserStyle== */

@-moz-document domain("sheezy.art") {
	if welcome-notice {
		#root > #content:before {
			display: block;
			font-size: 1.85rem;
			text-align: center;
			padding: 2rem;
			white-space: pre-line;

			width: 90%;
			max-width: var(--width, 124rem);
			margin: 2rem auto;
			border-radius: 8px;
		}
		@css {
			#root > #content:before {
				background-color: rgb(var(--theme-sheezy-900, 40 49 67));
				color: rgb(var(--theme-sheezy-50, 236 242 246));
				border: 2px solid rgb(var(--theme-sheezy-600));
				content: "Thanks for installing TweakSheezy!\a"
				"Note that most tweaks are disabled by default; you can toggle them in the userstyle settings (on Stylus, click on the gear icon next to the userstyle name).\a\aTo hide this message, disable the 'Show welcome notice' option.";
			}
		}
	}
	
	/* Workaround for stylus (the preprocessor we use) not liking rgb(var()) tags */
	@css {
		:root {
			--theme-sheezy-200-color: rgb(var(--theme-sheezy-200));
			--theme-sheezy-1100-color: rgb(var(--theme-sheezy-1100));
		}
	}

	/* General */
	if general-rich-editor-dark {
		span[data-active-tab="edit"], span[data-active-tab="preview"] {
			background-color: var(--rich-editor-background) !important;
			color: var(--rich-editor-foreground) !important;
			border-radius: 8px;
			
			& > span:first-child {
				background-color: var(--rich-editor-background); color: var(--rich-editor-foreground);
				border-top-color: rgba(255, 255, 255, 0.08);
				backdrop-filter: brightness(0.75);
				border-bottom-left-radius: 8px;
				border-bottom-right-radius: 8px;
			}

			& > span:first-child > span {
				color: var(--rich-editor-foreground) !important;
			}

			/* Hover effect for edit/preview buttons */
			/* :not(:has(button)) here is used to not match the markdown tools section */
			& > span:first-child > span:not(:has(button)):hover {
				background-color: transparent !important;
				backdrop-filter: brightness(1.1) contrast(0.85);
			}

			& > span:first-child > span[data-active] {
				background-color: transparent;
				backdrop-filter: brightness(1.3) contrast(0.8);
			}

			/* Markdown textarea */
			& > span:nth-child(2) > span > textarea {
				background-color: transparent;
				color: var(--rich-editor-foreground);
				backdrop-filter: brightness(0.95);
			}

			/* Markdown editor buttons in the corner */
			& > span:first-child > span:last-child > span:first-child > button,
			& > span:first-child > span:last-child > a {
				color:var(--rich-editor-foreground);
			}

			& > span:first-child > span:last-child > span:first-child > button:hover,
			& > span:first-child > span:last-child > a:hover {
				background-color: transparent;
				backdrop-filter: brightness(1.1) contrast(0.85);
			}
			
			& .w-tc-editor {
				--color-fg-default: #c9d1d9;
				--color-canvas-subtle: #161b22;
				--color-prettylights-syntax-comment: #8b949e;
				--color-prettylights-syntax-entity-tag: #7ee787;
				--color-prettylights-syntax-entity: #d2a8ff;
				--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
				--color-prettylights-syntax-constant: #79c0ff;
				--color-prettylights-syntax-string: #a5d6ff;
				--color-prettylights-syntax-keyword: #ff7b72;
				--color-prettylights-syntax-markup-bold: #c9d1d9;
			}

			& {
				--rich-editor-background: var(--theme-sheezy-1100-color);
				--rich-editor-foreground: #c9d1d9;
				--rich-editor-button-active: #2A2E35;
				--rich-editor-button-hover: #22262D;
			}
		}
	}

	
	/* Header tweaks */

	/* hide-featured-artwork: Hide the featured artwork on the top bar. */
	if hide-featured-artwork {
		#root > header:first-child > aside:first-child,
		#root > header:first-child > aside:last-child {
			display: none;
		}
	}
	
	/* compact-headerbar: Makes the headerbar more compact */
	if compact-headerbar {
		#root > header:first-child{
			height: 7.5rem;
		}
		#root > header:first-child > aside {
			height: 7rem;
		}
	}
	
	/* Profile tweaks */
	:root {
		if profile-input-bg or profile-dropdown-bg-color == "input" {
			if profile-input-bg-color == "block" {
				--profile-input-background-color: var(--profile-block-background-color);
				--profile-input-text: var(--profile-block-text);
			} else if profile-input-bg-color == "button" {
				--profile-input-background-color: var(--button-override-background);
				--profile-dropdown-text: var(--button-override-text, var(--fallback-text, rgb(255,255,255)));
			}
		}
		
		if profile-dropdown-bg {
			if profile-dropdown-bg-color == "input" {
				--profile-dropdown-background-color: var(--profile-input-background-color);
				--profile-dropdown-text: var(--profile-input-text);
			} else if profile-dropdown-bg-color == "block" {
				--profile-dropdown-background-color: var(--profile-block-background-color);
				--profile-dropdown-text: var(--profile-block-text);
			} else if profile-dropdown-bg-color == "button" {
				--profile-dropdown-text: var(--button-override-text, var(--fallback-text, rgb(255,255,255)));
				--profile-dropdown-background-color: var(--button-override-background);
			}
		}
	}
	
	/* match-header: Match headerbar color with user page */
	if profile-match-header {
		/* Explaination of this selector: this selects only pages if 1. the #profile-page element is present, and 2. a style element is present (profile colors are stored a style tag inside of #content) */
		#root:has(#profile-page):has(#content > style) > header:first-child {
			border-bottom: #0000000d .1rem solid;
			background-image: linear-gradient(to bottom,var(--tw-gradient-stops));
			--tw-gradient-from: var(--profile-ribbon-background-top) var(--tw-gradient-from-position);
			--tw-gradient-to: var(--profile-ribbon-background-bottom) var(--tw-gradient-to-position);
			--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
			color: var(--profile-ribbon-text,#FFF);
			--tw-shadow: 0 1px rgba(255, 255, 255, .2), inset 0 1px rgba(255, 255, 255, .2), inset 0 -1px rgba(0, 0, 0, .1);
			--tw-shadow-colored: 0 1px var(--tw-shadow-color), inset 0 1px var(--tw-shadow-color), inset 0 -1px var(--tw-shadow-color);
			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);

			& > div:nth-last-child(2) a {
				--button-background: var(--button-override-background, var(--fallback-background));
				--button-background-hover: var(--button-override-background-hover, var(--fallback-background-hover));
				--button-background-active: var(--button-override-background-active, var(--fallback-background-active));
				--button-text: var(--button-override-text, var(--fallback-text));
				--button-text-hover: var(--button-override-text-hover, var(--fallback-text-hover));
			}

			/* Make the borders next to featured artwork more uniform */
			@media (max-width: 1650px) {
				& > aside:first-child > a::after,
				& > aside:last-child > a::after {
					border-left: none;
					border-right: none;
					background-color: rgba(255, 255, 255, .2);
				}
				& > aside:first-child > a::after {
					right: -2.6rem;
				}
				& > aside:last-child > a::after {
					left: -2.6rem;
				}
			}
			@media (max-width: 900px) {
				& > aside:first-child > a::after,
				& > aside:last-child > a::after {
					transform: unset;
				}
				& > aside:first-child > a::after {
					right: -3.85rem;
				}
			}

			if profile-input-bg {
				& > form > label {
					background-color: var(--profile-input-background-color);
					--tw-shadow: 0 -1px rgba(255, 255, 255, 0.075), inset 0 -1px rgba(255, 255, 255, .075);
				}
				& > form > label > input::placeholder {
					color: var(--profile-input-text);
				}
				& > form > label > input {
					color: var(--profile-input-text);
				}
				& > form > label:hover,
				& > form > label:has(input:focus) {
					filter: brightness(1.05);
				}

				& > form > label:has(input:active) {
					filter: brightness(1.025);
				}
			}
		}
	}
	
	/* match-header: Match footer color with user page */
	if profile-match-footer {
		#root:has(#profile-page):has(#content > style) > #content > footer {
			background-color: var(--profile-body-background-color);
			color: var(--profile-block-text);
			if profile-match-footer-page-bg {
				background-color: var(--profile-body-background-color, none);
				background-image: var(--p...

Reviews

No reviews yet.