UI exploration for TwosApp.com. Love you Twos Parker and Joe!
Get Twos app: https://www.TwosApp.com?code=nino
Twos Styled by ninopiamonte
Details
Authorninopiamonte
LicenseNo License
CategoryTwos
Created
Updated
Size115 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Installation
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...