Customizable Twitter/X! ✧･ﾟ☆ by birb-naise

/* ==UserStyle==
@name           Customizable Twitter/X! ✧･ﾟ☆
@namespace      github.com/openstyles/stylus
@version        20241009.0
@description    Simple, customizable theme for Twitter/X
@author         birb-naise


@advanced dropdown notice "Custom images need to be uploaded to Twitter first!" {
    n-blank "←" <<<EOT   EOT;
}

@advanced dropdown bg "Background" {
    mafuyu "Mafuyu*" <<<EOT https://pbs.twimg.com/media/GPBgI0OWwAAdY9T?format=jpg&name=large EOT;
	emu "Emu" <<<EOT https://pbs.twimg.com/media/GPBgTTnXYAAbKqs?format=jpg&name=large EOT;
	ena "Ena" <<<EOT https://pbs.twimg.com/media/GNUaw_TXoAAb2DG?format=jpg&name=large EOT;
 	a "Starry" <<<EOT https://pbs.twimg.com/media/DljPXShXcAA_30D?format=jpg&name=4096x4096 EOT;
	bg-custom-dropdown "Custom" <<<EOT /*[[bg-custom]]*\/ EOT;
}

@advanced text bg-custom "Custom Background" "https://pbs.twimg.com/media/example"
@advanced text bg-dim "Background Dim" "0.65"
@advanced color theme-color "Theme Color" #c3735f

@advanced dropdown icon "Icon" {
  i-x "X*" <<<EOT EOT;
  i-twt-white "Twitter (White)" <<<EOT
	a[aria-label="X"] > * > * {
		opacity: 0;
	}
	a[aria-label="X"] *,
	[aria-label="Loading…"] > * {
		background: url("https://pbs.twimg.com/media/F11tdlXaMAAeY6R?format=png&name=medium") center no-repeat;
	}
 	EOT;
  i-twt-blue "Twitter (Blue)" <<<EOT
	a[aria-label="X"] > * > * {
		opacity: 0;
	}
	a[aria-label="X"] *,
	[aria-label="Loading…"] > * {
		background: url("https://pbs.twimg.com/media/F11tdlqaIAIc9oZ?format=png&name=medium") center no-repeat;
	}
 	EOT;
  i-twt-pink "Twitter (Pink)" <<<EOT
	a[aria-label="X"] > * > * {
		opacity: 0;
	}
	a[aria-label="X"] *,
	[aria-label="Loading…"] > * {
		background: url("https://pbs.twimg.com/media/F11tdloaEAAPV6I?format=png&name=medium") center no-repeat;
	}
 	EOT;
  i-twt-custom "Custom" <<<EOT
	a[aria-label="X"] > * > * {
		opacity: 0;
	}
	a[aria-label="X"] *,
	[aria-label="Loading…"] > * {
		background: url(/*[[icon-custom]]*\/) center no-repeat;
	}
 	EOT;
}
@advanced text icon-custom "Custom Icon" "https://pbs.twimg.com/media/example"

@advanced dropdown font "Font" {
  twitterchirp "Twitter Chirp (Default)*" <<<EOT TwitterChirp EOT;
  arialblack "Arial Black" <<<EOT Arial Black EOT;
  Consolas "Consolas" <<<EOT Consolas EOT;
  cambria "Cambria" <<<EOT Cambria EOT;
  candara "Candara" <<<EOT Candara EOT;
  centurygothic "Century Gothic" <<<EOT Century Gothic EOT;
  couriernew "Courier New" <<<EOT Courier New EOT;
  segoeui "Segoe UI" <<<EOT Segoe UI EOT;
  verdana "Verdana" <<<EOT Verdana EOT;
  arial "Arial" <<<EOT Arial EOT;
  comicsansms "Comic Sans MS" <<<EOT Comic Sans MS EOT;
}

@advanced dropdown theme "Display Theme" {
  dark-mode "Lights Out (Dark)*" <<<EOT
	/*------------ DARK MODE COLORS ------------*\/
	:root {
    	--theme-popup: rgba(0, 0, 0, .8);
    	--theme-bg-dim: rgba(0 ,0, 0, /*[[bg-dim]]*\/);
	}
 	EOT;
  light-mode "Default (Light)" <<<EOT
	/*------------ LIGHT MODE COLORS ------------*\/
	:root {
    	--theme-popup: rgba(255, 255, 255, .8);
		--theme-bg-dim: rgba(225 ,230, 240, /*[[bg-dim]]*\/);
	}
 	EOT;
}

@advanced dropdown show-premium "Show Premium Menus" {
  show-pr "Show" <<<EOT EOT;
  hide-pr "Hide*" <<<EOT 
	aside[aria-label="Subscribe to Premium"],
	aside[aria-label="Stay organized with Bookmark Folders"],
	aside[aria-label="Subscribe to Premium to write your own longer posts"],
	aside[aria-label="Expiring soon!"],
	a[aria-label="Grok"],
	a[aria-label="Premium"],
	a[aria-label="Verified Orgs"],
	a[aria-label="Business"],
	EOT;
}
@advanced dropdown show-explore "Show Explore" {
  show-ex "Show" <<<EOT EOT;
  hide-ex "Hide*" <<<EOT 
	a[aria-label="Search and explore"],
	EOT;
}
@advanced dropdown show-communities "Show Communities" {
  show-co "Show" <<<EOT EOT;
  hide-co "Hide*" <<<EOT 
	a[aria-label="Communities"],
	EOT;
}
@advanced dropdown show-lists "Show Lists" {
  show-li "Show" <<<EOT EOT;
  hide-li "Hide*" <<<EOT 
	a[aria-label="Lists"],
	EOT;
}
@advanced dropdown show-jobs "Show Jobs" {
  show-jo "Show" <<<EOT EOT;
  hide-jo "Hide*" <<<EOT 
	a[aria-label="Jobs"],
	EOT;
}

==/UserStyle== */
@-moz-document domain("x.com"), domain("twitter.com") {

	/*////////////// DARK/LIGHT MODE COLORS //////////////*/
	/*[[theme]]*/
	
	
	/*////////////// BACKGROUND //////////////*/
	:root {
		background: url('/*[[bg]]*/') fixed center;
		background-size: cover;
		--theme-color: /*[[theme-color]]*/;
	}
	body {
		background-color: var(--theme-bg-dim) !important;
		outline: solid var(--theme-bg-dim) 99999vh !important;
	}

	
	/*////////////// BACKGROUND COLORS //////////////*/
	[data-testid="primaryColumn"],		/* main feed */
	[aria-label="Trending"] > * > *,	/* sidebar */
	[aria-label="Home timeline"] > *> *,/* For You/Following tabs */
	[aria-label="Search"] > * > *{		/* search bar */
		background: transparent !important;
	}
	select,								/* built-in browser dropdowns*/
	[data-testid="Dropdown"], 			/* dropdowns */
	[data-testid="hoverCardParent"],	/* profile hover preview */
	[data-testid="DMDrawer"] > div,		/* DMs tab in home */
	div[role="dialog"],					/* pop-ups */
	div[role="listbox"], 				/* search results */
	div[role="radio"] {					/* poll options */
		background: var(--theme-popup) !important;
	}

	
	/*////////////// THEME COLOR //////////////*/
	button[style*="rgb(29, 155, 240);"]:not(.css-146c3p1), /* most large buttons (no translate) */
	div[role="status"] > *:not([data-testid="thumbnail"]),	/* new tweets alert (no reply restrictions) */
	[aria-label="Post"],				/* Post button */
	[href="/messages/compose"],			/* New message button */
	::selection,						/* text highlight */
	.r-l5o3uw,							/* DMs bubbles */
	.r-m5arl1,							/* thread line */
	.r-hdaws3,							/* feed tab selected */
	.r-615f2u {							/* home icon badge */
		background: var(--theme-color) !important;
	}
	[data-testid="searchPeople_label"] > *,
	[style*="color: rgb(29, 155, 240)"],/*tweet composer, sidebar, show .. posts, mentions */
	svg[aria-label="Verified account"],	/* verified check */
	.r-1cvl2hr {						/* search bar magnifying glass*/
		color: var(--theme-color) !important;
	}
	
	
	/*////////////// WEBSITE ICON //////////////*/
	/*[[icon]]*/
	[aria-label="Loading…"] {
		opacity: 0;
	}

	a[aria-label="X"] *,
	[aria-label="Loading…"] > * {				/* custom icon size adjustment */
		background-size: 70%;
	}
	
	
	/*////////////// FONT //////////////*/
	.css-146c3p1 {
		font-family: "/*[[font]]*/";
	}
	
	
	/*////////////// MISC //////////////*/
	div[style="text-overflow: unset; color: rgb(113, 118, 123);"] { /* muted text */
		color: #b8b8b8 !important;
	}
	.r-kemksi,							/* main feed */
	.css-175oi2r {						/* tweets */
		border: none;
	}
	[role="status"] > * {				/* border */
		box-shadow: var(--theme-color);
	}
	/* theme adjustments */
	.r-kemksi,							/* Dark mode */
	.r-5zmot,
	.r-14lw9ot,							/* Light mode */
	.r-6026j {
		background: transparent !important;
	}

	
	/*////////////// HIDE ELEMENTS //////////////*/
	/*[[show-premium]]*/
	/*[[show-explore]]*/
	/*[[show-communities]]*/
	/*[[show-lists]]*/
	/*[[show-jobs]]*/
	nav[aria-label="Footer"],
	.r-109y4c4 { /* tweet compose border */
		display: none;
	}
}