Skip to content

Twitter for Mastodon [Broken 4.0+] by Freeplay

Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/Mastodon-Twitter_For_Mastodon.user.css

Screenshot of Twitter for Mastodon [Broken 4.0+]
Homepage Write a review Install Get Stylus

Details

AuthorFreeplay

LicenseNo License

CategoryMastodon

Created

Updated

Size23 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Makes Mastodon look like Twitter.

Notes

May not work on instances with heavy modification.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Twitter for Mastodon
@version        1.0.4
@description    Makes Mastodon look like Twitter.
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues

@var select theme "Theme" ["dim:Dim", "light:Light", "black:Lights out", "custom:Custom - Edit inside script"]
@var color themeColor "Theme Color" rgb(32, 160, 239)
@var checkbox noBorders "No Borders" 0

==/UserStyle== */



 
/*      \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\		
		!! If you aren't on one of the instances below, add your instance URL below !!
		//////////////////////////////////////////////////////////////////////////////		*/
@-moz-document domain("mstdn.social"), domain("mastodon.social"), domain("mastodon.online") {	

	:root {
		
		/* OTHER SETTINGS */
		--column-width: 597.5px;
		
		--theme: themeColor;
		--theme-transparent: rgba( themeColor, .1);
		
		if theme == custom { 
			
			/*** EDIT YOUR CUSTOM COLORS HERE ***/ // You can copy & paste values from other themes below to edit
			
			--color-primary: #15202b;
			--color-secondary: #192734;
			--color-tertiary: #253341;

			--color-text: rgb(217, 217, 217);
			--color-text-muted: rgb(136, 153, 166);

			--color-hover: rgba(255,255,255,0.03);

			--border: 1px solid rgb(47, 51, 54);

			--shadow: rgba(136, 153, 166, 0.2) 0px 0px 15px, rgba(136, 153, 166, 0.15) 0px 0px 3px 1px;
			
			
		} else if theme == dim { 

			/*** DIM COLORS ***/

			--color-primary: #15202b;
			--color-secondary: #192734;
			--color-tertiary: #253341;

			--color-text: white;
			--color-text-muted: rgb(136, 153, 166);

			--color-hover: rgba(255,255,255,0.03);

			--border: 1px solid rgb(56, 68, 77);

			--shadow: rgba(136, 153, 166, 0.2) 0px 0px 15px, rgba(136, 153, 166, 0.15) 0px 0px 3px 1px;
			
			
		} else if theme == light { 

			/*** LIGHT COLORS ***/

			--color-primary: white;
			--color-secondary: #f7f9fa;
			--color-tertiary: #ebeef0;

			--color-text: rgb(15, 20, 25);
			--color-text-muted: rgb(91, 112, 131);

			--color-hover: rgba(0,0,0,0.03);

			--border: 1px solid rgb(235, 238, 240);

			--shadow: rgba(136, 153, 166, 0.2) 0px 0px 15px, rgba(136, 153, 166, 0.15) 0px 0px 3px 1px;
			
			
		} else if theme == black {
			
			/*** LIGHTS OUT COLORS ***/

			--color-primary: #000;
			--color-secondary: #15181c;
			--color-tertiary: #202327;

			--color-text: white;
			--color-text-muted: rgb(110, 118, 125);

			--color-hover: rgba(255,255,255,0.03);

			--border: 1px solid rgb(56, 68, 77);

			--shadow: rgba(255, 255, 255, 0.2) 0px 0px 15px, rgba(255, 255, 255, 0.15) 0px 0px 3px 1px;
			
			
		}
		
		if noBorders {
			--border: none !important;
		}
		
	}
	
	body {
		background-color: var(--color-primary);
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		font-size: 15px;
	}
	
	/* TEXT */
	h1, .getting-started__trends h4 {
		font-size: 19px !important;
		font-weight: 800 !important;
		color: var(--color-text) !important;
	}
	
	/* OTHER GLOBAL STUFF */
	button, .icon-button {
		border-radius: 100px !important;
		overflow: hidden;
	}
	.account__avatar, .account__avatar-overlay > div {
		border-radius: 100%;
	}
	
	.column-header__collapsible-inner, .column-back-button,
	.filter-form,
	.empty-column-indicator, .error-column, .follow_requests-unlocked_explanation,
	.drawer__inner.darker,
	.column-inline-form,
	.tabs-bar__link,
 	.flex-spacer, .getting-started, .getting-started__wrapper {
		background-color: var(--color-primary);
	}
	.column-header__collapsible {
		border-top: var(--border);
	}
	input, select {
		background-color: var(--color-tertiary) !important;
		border-radius: 100px !important;
		color: var(--color-text) !important;
		border: 1px solid transparent !important;
	}
	input:focus {
		border: var(--border) !important;
		border-color: var(--theme) !important;
		background-color: var(--color-primary) !important;
	}
	hr {
		border-top: var(--border) !important;
	}
	
	/*** LEFT SIDEBAR ***/
	.search {
		margin: 0 10px !important;
		margin-bottom: 10px !important;
	}
	.search__input {
		border-radius: 100px;
		background-color: var(--color-tertiary);
		padding: 10px 20px !important;
		color: var(--color-text) !important;
	}
	.search__input::placeholder {
		color: var(--color-text-muted);
		opacity: 1;
	}
	.search__icon .fa-times-circle {
		top: 15px !important;
	}
	.search__icon .fa-search {
		top: 12px !important
	}
	.search .search__icon i {
		color: var(--color-text-muted) !important;
	}
	.search:focus-within i {
		color: var(--theme) !important;
	}
	.search:focus-within i.active {
		opacity: 1 !important;
	}
	.search__icon .active {
		opacity: .5 !important;
	}
	
	.navigation-bar {
		padding: 10px !important;
		margin: 20px 10px !important;
		margin-top: 10px !important;
		min-height: 0 !important;
		flex: none !important;
		border-radius: 100px;
		transition: background-color .2s;
	}
	.navigation-bar:hover {
		background-color: rgba(29,161,242,0.1);
	}
	.navigation-bar .account__avatar {
		width: 39px !important;
		height: 39px !important;
		background-size: 39px !important;
	}
	.navigation-bar__profile {
		margin-left: 10px !important;
	}
	.navigation-bar a {
		font-weight: 400;
		font-size: 15px;
		color: var(--color-text-muted);
	}
	.navigation-bar a strong {
		font-weight: 700;
		font-size: 15px;
		color: var(--color-text);
	}
	.navigation-bar__actions {
		margin-right: 5px;
	}
	
	
	.reply-indicator {
		background-color: var(--color-primary);
		color: var(--color-text) !important;
		padding: 0 !important;
		border: var(--border);
		border-radius: 16px;
	}
	.reply-indicator__header {
		border-bottom: var(--border);
		padding: 10px;
	}
	.reply-indicator__display-name {
		color: var(--color-text) !important;
	}
	.reply-indicator__display-name .account__avatar {
		width: 24px !important;
		height: 24px !important;
		background-size: 24px !important;
	}
	.reply-indicator__content {
		color: white !important;
		padding: 0 10px;
		padding-bottom: 5px;
		font-size: 14px;
	}
	.attachment-list.compact {
		padding: 10px;
		padding-top: 0;
		margin-top: -5px;
		padding-bottom: 5px;
	}
	
	.compose-form {
		padding-top: 0 !important;
	}
	.compose-form__warning {
		border: var(--border) !important;
		border-radius: 16px !important;
		padding: 10px !important;
		background-color: var(--color-primary) !important;
		color: var(--color-text) !important;
		box-shadow: none !important;
	}
	.compose-form__warning a {
		color: var(--theme) !important;
	}
	.compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea, .compose-form__modifiers, .compose-form__buttons-wrapper, .compose-form__modifiers {
		background-color: var(--color-secondary) !important;
		color: var(--color-text) !important;
	}
	.compose-form__modifiers > div:not(.compose-form__upload-wrapper) {
		margin: 10px;
		border: var(--border) !important;
		border-radius: 16px;
	}
	.compose-form__uploads-wrapper:not(:empty) {
		border: var(--border);
		border-radius: 16px;
		overflow: hidden;
		padding: 0 !important;
		margin: 10px !important;
		grid-gap: 4px;
	}
	.compose-form__upload {
		margin: 0 !important;
	}
	.compose-form__poll-wrapper, .poll__footer {
		border: none !important;
	}
	.compose-form__autosuggest-wrapper {
		border-radius: 16px 16px 0 0 !important;
	}
	.compose-form__buttons-wrapper {
		border-radius: 0 0 16px 16px !important;
		border-top: var(--border);
	}
	.compose-form__publish-button-wrapper button {
		font-size: 15px !important;
		font-weight: 700;
		min-height: 39px;
		text-transform: capitalize;
	}
	.autosuggest-textarea__suggestions {
		background-color: var(--color-primary) !important;
		color: var(--color-text) !important;
		font-size: 15px !important;
		line-height: 1.3125 !important;
		box-shadow: var(--shadow) !important;
		border-radius: 4px !important;
		padding: 0 !important;
	}
	.autosuggest-textarea__suggestions__item {
		padding: 10px 15px !important;
		border-radius: 0 !important;
		border-bottom: var(--border);
	}
	.autosuggest-textarea__suggestions__item .display-name bdi {
		font-weight: 700;
	}
	.compose-form .autosuggest-textarea__suggestions__item.selected, .compose-form .autosuggest-textarea__suggestions__item:active, .compose-form .autosuggest-textarea__suggestions__item:focus, .compose-form .autosuggest-textarea__suggestions__item:hover {
		background-color: var(--color-hover) !important;
	}
	
	.getting-started__footer {
		font-size: 13px;
		line-height: 19.6833px;
		font-weight: 400;
	}
	.getting-started__footer a {
		color: var(--color-text-muted);
	}
	
	/*** MAIN SECTION ***/
	.columns-area__panels__main {
		padding: 0;
		margin: 0 20px;
		width: var(--column-width);
		max-width: calc(100vw - 17px);
		border: var(--border);
		border-top-width: 0;
		border-bottom-width: 0;
		min-height: 100vh;
	}
	.column > .scrollable, .search-results {
		background: transparent;
		padding-bottom: calc(100vh - 56px);
	}
	.tabs-bar__wrapper {
		padding-top: 0 !important;
		font-weight: 800;
		border-bottom: var(--border);
		background-color: var(--color-primary) !important;
	}
	.tabs-bar {
		position: fixed;
		bottom: 0;
		max-width: calc( var(--column-width) - 2px );
		border-top: var(--border);
		margin-bottom: 0 !important;
		background-color: var(--color-primary) !important;
	}
	.tabs-bar__link {
		border-bottom: none !important;
		color: var(--color-text);
	}
	.tabs-bar__link:active, .tabs-bar__link:focus, .tabs-bar__link:hover {
		...

Reviews

No reviews yet.