Skip to content

Twos Styled by ninopiamonte

Screenshot of Twos Styled

Details

Authorninopiamonte

LicenseNo License

CategoryTwos

Created

Updated

Size115 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Twos Styled
@namespace      userstyles.world/user/ninopiamonte
@version        1.8.16
@description    UI exploration and improvements for TwosApp.com
@author         Nino <t.me/ninopiamonte>
@preprocessor	stylus

@var checkbox compactSidemenuViews "Compact side menu Views" 0
@var checkbox compactBookmarksRecents "Compact Bookmarks/Recents" 0
@var checkbox moveTwosColumns "Enable twos-column Move modal" 0
@var checkbox compactSelectActions "Compact select action sheet" 0
@var checkbox hideSpaceActions "Hide Space actions in select action sheet" 0
@var checkbox noColorSelectActions "No border colors on select action buttons" 0
@var checkbox compactNavBar "Compact nav bar" 0
@var checkbox compactFAB "Compact floating action button" 0
@var checkbox shortBottomSpace "Shorter bottom spacing when viewing lists" 0
@var checkbox hideCloseList "Hide 'Close lists' buttons" 0
@var checkbox hideHappyTwosday "Hide Happy Twosday and Coins header in Home" 0
@var checkbox hideWorldFollow "Hide Follow button in World" 0
@var checkbox enableBlur "Enable blur effects" 0
==/UserStyle== */
@-moz-document url-prefix("https://www.twosapp.com") {


	/* Stylus-lang Helper Variables */
	/* @var checkbox thingHoverHighlight "Disable highlight when hovering over things" 0 */
	/* 	@import url("https://github.com/nishatrhythm/Font-Collection/blob/c1d3aced23c3a4a81816bbd11d42b79095946043/JetBrainsMono%20Typeface/JetBrainsMono-Regular.ttf") format('ttf'); */
	/*@var checkbox swapSettingsInvite "Swap Settings and Invite icon in side menu" 0*/
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

	i = !important;
/* font-family: 'SF Pro Display', 'Söhne', 'Inter', 'Lato', sans-serif i; */
	
	* {
		font-family: 'Inter', 'Söhne', 'Inter', 'Lato', sans-serif i;
		&:hover {
			transition: var(--ts-short);
		}

		scroll-behavior: smooth;
	}

	if enableBlur {
		@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
			#modalOverlay {
				background-color: var(--bc-modal-overlay-blur) i;
				backdrop-filter: var(--bf-modal-overlay) i;
				opacity: unset i;
			}
		}


		#modalModal:has(#promptField) {
			width: 100% i;
			background: none i;
			box-shadow: none i;
			border: none i;
			border-radius: 0 i;

			/* Prompt Field Container */
			.dOSqZR,
			.gYPehh {
				box-shadow: none i;
			}
		}
	}


	/* 	Nav Bar */
	if compactNavBar {
		.krZJQD > div,
		.hsBcrg > div {
			/* 			box-shadow: var(--bs-bd-thin); */
			box-shadow: var(--bs-sheet);

			> a.Button-sc-5xs03r-0,
			button.Button-sc-5xs03r-0 {
				min-width: 38px;
				min-height: 38px;

				> p {
					display: none;
				}
			}
		}
	}


	/* Thing Hover Highlight */
	if thingHoverHighlight {
		.dSksqn,
		.chvdQL {
			background-color: rgba(0, 0, 0, 0) i;
		}
	}

	if compactBookmarksRecents {
		/* Bookmark Button */
		[id ^= "list"] > button[title] > div:has(div[user] + p[lines]) {
			> div:first-of-type {
				margin-top: 0px i;
				padding: 4px 8px i;
			}

			/* Sublist Toggle */
			> div:nth-of-type(2):has([type ^= "chevron"]) {
				margin-top: 0px;
				padding: 4px 8px;
			}

			/* List Name */
			> p {
				margin-bottom: 0px i;
				margin-top: 0px i;
				padding: 4px 0px i;
				font-size: 14px;
			}

			/* Bookmark Icon */
			[type = "bookmarked"] {
				width: 16px;
			}

			[type = "bookmark"] {
				width: 16px;
				opacity: 40%;
			}
		}
	}

	if moveTwosColumns {
		#modal > #modalContainer > .Body__Content-sc-cdxwfb-0 > .Body__InnerContent-sc-cdxwfb-1 {

			/* Bookmarks Section Expanded */
			> div:has(div > [type = "bookmark"]),
			> div:has(div > [type = "lists"]) {
				width: 47% i;
				flex-grow: 1 i;
				margin-inline: 8px i;
				margin-top 8px i;
				padding: 0px i;
				span {
					padding-top: 4px i;
					padding-bottom: 4px i;
				}
			}
		}
	}


	if shortBottomSpace {
		#newNoteDropArea > div {
			padding-bottom: 96px;
		}

		#listContainer > .Body__Content-sc-cdxwfb-0 {
			padding-bottom: 76px;
		}
	}

	if hideCloseList {
		.Button-sc-5xs03r-0:has( > div[type = "collapse"]) {
			display: none;
		}
	}





	if noColorSelectActions {
		.selectActionBar > div:nth-child(2) button {
			/* 						border-color: var(--bdc-btn-selectaction) i; */
			border: none;
			margin-right: 2px i;
			/* 			background-color: rgba(0,0,0,0.04); */
		}
	}

	/* 	if swapSettingsInvite {
		.fade-in-side-menu:has([type = "settings"],
		[type = "gift"]) {
			flex-direction: row-reverse i;
		}
	} */
	if hideHappyTwosday {
		main:has(.SectionLabel-sc-1nwntc1-0 + button > [type = "chevronRight"]) {
			.header:has(button + h1) {
				display: none;
			}
		}

		/* Home View Top Padding Removed */
		:has(button + h1) main {
			#listsContainer > div {
				/* 				padding-top: 60px; */
				/* 				padding-bottom: 80px; */
			}
		}
	}



	/* Variables */
	:root {
		--br-small: 4px; // BORDER RADIUS
		--br-switch: 4px;
		--br-btn: 8px;
		--br-btn-header: 4px;
		--br-btn-confirm: 8px;
		--br-photo: 8px;
		--br-list-preview: 8px;
		--br-normal: 12px;
		--br-input: 8px;
		--br-search: 8px;
		--br-sheet: 16px;
		--br-modal: 12px;
		--br-inner-box: 8px;
		--br-full: 2rem;

		--tf-scale-normal: scale(0.98); // TRANSFORM
		--tf-scale-tiny: scale(0.90);
		--tf-scale-small: scale(0.95);
		--tf-scale-normal: scale(0.98);
		/* 			--ts-short: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1); */
		/* 			--ts-short: all 400ms cubic-bezier(0.68, -0.6, 0.32, 1.6) */
		--ts-short: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); // TRANSITION
		--ts-400: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1);

		--fs-btn-footer-label: 12px; // FONT SCALE
		--fs-btn: 16px;
		--fs-btn-confirm: 18px;
		--fs-btn-header: 14px;
		--fs-input: 18px;
		--fs-input-big: 24px;

		--fw-btn: 400; // FONT WEIGHT
		--fw-btn-confirm: 500;
		--fw-normal: 400;
		--fw-header: 500;
		--fw-list-sidemenu: 600;

		--animation: fadeIn 200ms ease-in-out; // ANIMATION
		--animation-modal: fadeInFromBottomModal .4s;
	}


	@media (prefers-color-scheme: light) {
		:root {
			/* Background Color */
			--bc-surface: rgba(255, 255, 255, 0.5);
			--bc-surface-2: rgba(255, 255, 255, 0.6);
			--bc-input-ai: rgba(255, 255, 255, 0.6);
			--bc-sheet: rgba(255, 255, 255, .1);
			--bc-btn-selectaction: rgba(102, 102, 102, 0.04);
			--bc-btn-selectaction-active: rgba(200, 200, 200, 0.4);
			/* 			--bc-modal-overlay: rgba(51, 51, 51, .2); */
			--bc-modal-overlay: rgba(200, 200, 200, .4);
			--bc-modal-overlay-2: rgba(200, 200, 200, .9);
			--bc-modal-overlay-default: rgba(60, 60, 60, .9);
			--bc-modal-overlay-default-out: rgba(60, 60, 60, .7);
			--bc-modal-overlay-blur: rgba(60, 60, 60, .8);
			--bc-modal-overlay-2-out: rgba(200, 200, 200, .8);
			--bc-btn-hover: rgba(0, 0, 0, .02); // BORDER COLOR
			--bdc-btn-selectaction: rgba(0, 0, 0, 0.1);
			--bdc-calendar: rgba(0, 0, 0, .1); // COLOR
			--c-text-primary: rgb(33, 33, 33);
			--monochrome: rgb(33, 33, 33); // BOX SHADOW BORDER
			/* Modal */
			--bs: 0px 2px 4px 0px rgba(0, 0, 0, 0.06),
			0px 0px 0px 0.5px rgba(0, 0, 0, 0.10);
			--bs-tag: 0px 1px 2px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.04);

			--bs-bd: 0px 0px 0px 1px rgba(0, 0, 0, .1);
			--bs-bd-thin: 0px 0px 0px .5px rgba(0, 0, 0, .1);
			--bs-btn-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.2),
			0px 0px 0px 0.5px rgba(0, 0, 0, 0.1);
			--bs-input-hover: 0px 2px 8px 1px rgba(226, 129, 220, .05),
			0px 0px 0px 1.5px rgba(0, 0, 0, .5);
			--bs-fab: 0px 2px 4px 0px rgba(0, 0, 0, .05),
			0px 24px 24px 0px rgba(0, 0, 0, 0.1),
			0px 0px 0px 1px rgba(0, 0, 0, .1);
			--bs-fab-hovered: 0px 2px 4px 0px rgba(0, 0, 0, .1),
			0px 24px 24px 0px rgba(0, 0, 0, 0.1),
			0px 0px 0px 1px rgba(0, 0, 0, .15);
			/* Sheet, Pop-up */
			--bs-sheet: 0px 12px 24px 0px rgba(0, 0, 0, 0.1),
			0px 0px 0px .5px rgba(0, 0, 0, .1);
			--bs-modal: 0px 4px 8px 0px rgba(0, 0, 0, 0.08),
			0px 0px 0px .5px rgba(0, 0, 0, .1);
			/* Search box */
			--bs-search: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
			--bs-accordion: 0 -1px 1px 0 rgba(0, 0, 0, .16) inset, 0 1px 2px 0 rgba(0, 0, 0, .1), 0px 0px 0px .4px rgba(0, 0, 0, .1);
			--bs-card: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 2px 0px 0px, rgba(0, 0, 0, 0.02) 0px 1px 3px, rgba(0, 0, 0, 0.02) 0px 0px 12px;
			--bd: 1px solid rgba(33, 33, 33, 0.2);
			--bd-thin: 1px solid rgba(33, 33, 33, 0.2);
			--bd-input-focus: 1.5px solid rgba(0, 0, 0, .5);
			--bd-event-item: 3px solid rgba(0, 0, 0, .1);
			--bs-btn-active: 0px 0px 0px 2px rgba(102, 102, 102, .5);
			--ol-btn-active: 1.5px solid rgba(102, 102, 102, 0.4);

			/* FILTER */
			--ft-icon: invert(0); // FILTER
			// Surfaces, backdrop filter, filter
			--bf-overflow-arrow: blur(24px); // BACKGRONUD FILTER
			/* 			--bf-modal-overlay: blur(4px); */
			--bf-modal-overlay: blur(4px);
			--bf-sheet: blur(12px);
			--bf-sheet-2: blur(24px);
			--bf-surface: brightness(150%);

			--bi-activity-separator: linear-gradient(to right, rgba(255, 255, 255, 0) 68px, rgba(33, 33, 33, 0.2) 68px, rgba(33, 33, 33, 0.2) 100%); // BACKGROUND IMAGE
			/* 			--bi-activity-separator-2: linear-gradient(to right, rgba(255, 255, 255, 0) 60px, rgba(33, 33, 33, 0.2) 60px, rgba(33, 33, 33, 0.2) 100%); */
			--op-link-icon: .2; // OPACITY
			--text-generating: linear-gradient(to right, #000, #E2E2E2, #000, #E2E2E2, #000);
			--text-subtitle: rgba(0, 0, 0, .6);
		}
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--bc-surface: rgba(255, 255, 255, .04);
			--bc-surface-2: rgba(255, 255, 255, .04);
			--bc-input-ai: rgba(0, 0, 0, .6);
			--bc-sheet: rgba(0, 0, 0, .1);
			--bc-btn-selectaction: rgba(102, 102, 102, .1);
			--bc-btn-selectaction-active: rgba(255, 255, 255, .1);
			--bc-modal-overlay: rgba(0, 0, 0, .4);
			--bc-modal-overlay-2: rgba(0, 0, 0, .9);
			--bc-modal-overlay-default: rgba(0, 0, 0, 1);
			--bc-modal-overlay-default-out: rgba(0, 0, 0, .8);
			--bc-modal-overlay-blur: rgba(0, 0, 0, .4);
			--bc-modal-overlay-2-out: rgba(0, 0, 0, .8);
			--bc-btn-hover: rgba(255, 255, 255, .01);
			--bdc-b...

Reviews

No reviews yet.