Adds Twitter-like view to Mastodon.
Obeys browser's light/dark mode.
Twitter-like Mastodon jxduran by jxduran
Details
Authorjxduran
LicenseNo License
Categorymastodon.social
Created
Updated
Code size8.8 kB
Code checksum92acf60c
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Twitter-like Mastodon
@namespace USO Archive
@version 20230714.19.20
@description "<div>Check out the original style at <a rel=\"nofollow\" href=\"https://userstyles.org/styles/256364\" target=\"_blank\">userstyles.org</a><br/></div>Cleaner, more white space, more like Twitter in 2022"
@author zettaJon, Stephen Frank
@license NO-REDISTRIBUTION==/UserStyle== */
@-moz-document domain(mastodon.social) {
:root {
--mas-theme-color-1: rgb(58, 59, 255);
--mas-theme-color-2: rgb(63, 63, 221);
--mas-background-color-1: rgb(255, 255, 255);
--mas-background-color-t: rgb(255, 255, 255, 0.7);
--mas-text-color-1: rgb(0, 0, 0);
--mas-text-color-2: rgb(48, 50, 51);
--mas-element-color-1: rgb(255, 255, 255);
--mas-element-color-2: rgb(215, 217, 226);
--mas-border-color-1: rgb(239, 243, 244);
--mas-border-color-2: rgb(195, 199, 200);
}
@media(prefers-color-scheme:dark) {
:root {
--mas-theme-color-1: rgb(186, 187, 253);
--mas-theme-color-2: rgb(157, 158, 228);
--mas-background-color-1: rgb(30, 32, 40);
--mas-background-color-t: rgb(30, 32, 40, 0.7);
--mas-text-color-1: rgb(247, 247, 247);
--mas-text-color-2: rgb(196, 198, 204);
--mas-element-color-1: rgb(39, 44, 64);
--mas-element-color-2: rgb(64, 71, 98);
--mas-border-color-1: rgb(150, 150, 169);
--mas-border-color-2: rgb(100, 100, 126);
}
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
background-color: var(--mas-background-color-1) !important;
color: var(--mas-text-color-1) !important;
}
.column-inline-form, .column > .scrollable, .error-column, .getting-started, .regeneration-indicator,
.compose-form .compose-form__modifiers,
.compose-panel .compose-form__autosuggest-wrapper,
textarea {
background-color: var(--mas-background-color-1) !important;
color: var(--mas-text-color-1) !important;
}
.dropdown-menu, .dropdown-menu__item a, .dropdown-menu__item button,
.compose-form .autosuggest-textarea__suggestions, .compose-form .compose-form__buttons-wrapper,
.search__popout {
background-color: var(--mas-element-color-1) !important;
color: var(--mas-text-color-1) !important;
}
.dropdown-menu__item a:hover {
background-color: var(--mas-element-color-2) !important;
}
/* TEXT COLOR 1 */
.navigation-panel .logo,
.navigation-bar strong,
.navigation-bar__profile-edit span,
.account__display-name .display-name strong,
.status__display-name .display-name strong,
.link-footer p,
.trends__item__name,
.reply-indicator__content,
.status__content,
.getting-started__trends h4 a,
.account__header__tabs__name h1,
.account__header__bio .account__header__content,
.account__header__extra__links a strong,
.account__section-headline a.active,
.search__input,
.search__icon *,
.icon-button:active, .icon-button:focus, .icon-button:hover {
color: var(--mas-text-color-1) !important;
}
/* TEXT COLOR 2 */
.status__relative-time,
.navigation-bar strong:hover,
.navigation-bar__profile-edit span:hover,
.reply-indicator__content:hover,
/*.status__content:hover,*/
.navigation-panel .column-link--transparent,
.getting-started__trends h4 a:hover,
.icon-button,
.character-counter,
.text-icon-button,
.column-settings__section,
.setting-toggle__label,
.account__header__tabs__name h1 small,
.account__header__account-note label,
.account__header__extra__links a,
.account__section-headline a,
.status__prepend,
.status__prepend .status__display-name strong,
.display-name__account,
.search__popout h4, .search__popout__menu__message,
input[type="text"]::placeholder,
textarea::placeholder {
color: var(--mas-text-color-2) !important;
}
/* LINK COLORS */
.link-footer p a,
.reply-indicator__content a.unhandled-link,
.status__content a.unhandled-link,
.trends__item__name a,
.column-back-button,
.navigation-panel .column-link--transparent:hover {
color: var(--mas-theme-color-1) !important;
}
.reply-indicator__content a.unhandled-link:hover,
.status__content a.unhandled-link:hover,
.trends__item__name a:hover {
color: var(--mas-theme-color-2) !important;
}
.trends__item__sparkline path:first-child {
fill: var(--mas-theme-color-2) !important;
}
.trends__item__sparkline path:last-child {
stroke: var(--mas-theme-color-1) !important;
}
.column > .scrollable,
.column .detailed-status__action-bar,
.story,
.column-header__collapsible {
border-color: var(--mas-border-color-1) !important;
}
.navigation-panel .column-link--transparent {
font-size: 20px;
}
.column-header,
.column-header__collapsible-inner {
background-color: var(--mas-background-color-1) !important;
opacity: 0.9;
}
.column-header__button.active:active, .column-header__button.active:focus, .column-header__button.active:hover {
background-color: var(--mas-element-color-2) !important;
}
.search__input {
background-color: var(--mas-background-color-1) !important;
border-radius: 8px;
border: 0;
}
.search__popout {
border-radius: 8px;
margin-top: 1px;
border: 1px solid var(--mas-border-color-2);
box-shadow: none;
}
::-webkit-input-placeholder {
color: rgb(156, 163, 175) !important;
}
.status__content {
font-weight: 400;
}
.status__content__text {
font-size: 15px;
}
.detailed-status .status__content__text {
font-size: 23px;
line-height: 1.3;
}
.dismissable-banner {
border: none;
}
@media screen and (min-width: 1175px) {
.columns-area__panels__main {
padding: 0 40px;
max-width: 680px;
}
}
.column>.scrollable,
.column .detailed-status__action-bar,
.story {
border-color: var(--mas-border-color-1);
}
.status {
padding-bottom: 32px;
padding-top: 32px;
padding-left: 24px;
padding-right: 24px;
}
.status {
border-bottom: 1px solid var(--mas-border-color-1);
}
.status>*:not(.status__info) {
margin-left: 56px;
}
.detailed-status>* {
margin-left: 0px;
}
.column-back-button,
.column-header {
backdrop-filter: blur(5px);
border-top: 0;
border-bottom: 0;
border-radius: 0;
}
.column-back-button,
.column-header {
background: var(--mas-background-color-t);
border-color: var(--mas-border-color-1);
}
.account__header, .column-header__back-button, .column-header__button, .column-header__button.active {
background: transparent;
color: var(--mas-text-color-1) !important;
}
.tabs-bar__wrapper {
background: transparent;
padding-top: 0px;
}
.notification__filter-bar,
.account__section-headline {
background: none;
border-color: rgb(239, 243, 244);
}
.notification__filter-bar .active,
.account__section-headline .active {
border-bottom: 2px solid #3a3bff;
}
.account__section-headline a.active:after,
.account__section-headline a.active:before,
.account__section-headline button.active:after,
.account__section-headline button.active:before,
.notification__filter-bar a.active:after,
.notification__filter-bar a.active:before,
.notification__filter-bar button.active:after,
.notification__filter-bar button.active:before {
display: none;
}
.display-name__html {
font-weight: bold;
}
.display-name__account {
color: #64748b;
font-size: 14px
}
.story:hover {
background-color: #f1f5f9;
}
.scrollable .account-card {
background: transparent;
margin: 20px;
padding: 0px;
overflow: hidden;
border-radius: 10px;
}
.scrollable .account-card {
border: 1px solid var(--mas-border-color-1);
}
.scrollable .account-card .account-card__header {
padding: 0;
}
.scrollable .account-card__bio:after {
display: none;
}
.columns-area__panels {
flex-direction: row-reverse;
}
.audio-player,
.compose-form .spoiler-input__input,
.compose-form__autosuggest-wrapper,
.compose-form__poll-wrapper select,
.poll__option input[type=text],
.report-dialog-modal__textarea,
.setting-text,
.compose-form .compose-form__buttons-wrapper {
border: 1px solid var(--mas-border-color-1);
}
.search__input {
border: 1px solid var(--mas-border-color-2);
}
.column-inline-form {
border-color: var(--mas-border-color-1);
}
.compose-form {
padding: 0 !important;
height: min-content;
flex: 0 !important;
margin-bottom: 0 !important;
}
.compose-form .compose-form__highlightable {
border: 1px solid var(--mas-border-color-2);
box-shadow: none;
}
}