Mastodon Theming / CSS Tricks

*mastodon-cssmods *mastodon-theming
Other: NNL


pb td config: https://web.archive.org/web/20230107211151/https://pb.todon.de/custom.css



twitteresque:
https://mementomori.social/custom.css
https://github.com/ronilaukkarinen/mastodon-bird-ui

Introduction to css theming https://blog.atomicpoet.org/s/huRYhaSok#

Advanced scss theming https://glitch-soc.github.io/docs/features/themes/

Highly customized mastodon: https://github.com/koyuspace/mastodon

Instance ticker https://34.si/about https://koyu.space/@weepjp/109671126495963482

Stylesheet to make Mastodon more macOS-like (browser based) https://gist.github.com/pcantrell/5572729080a0ce938572a48f2e12b3ca


=====================
== mastodoncssmods ===

AutoDarkmode Enabler (color-text-swap-broken_choose color between blk/white for text !!)
-------------------
/*darkmode enabler*/
@media (prefers-color-scheme: dark) {
/*Dark Mode CSS Start*/
body,
.tabs-bar__wrapper,
.column > .scrollable,
.detailed-status,
.detailed-status__action-bar,
.column-header__back-button,
.admin-wrapper .sidebar-wrapper__inner,
.search__input,
.account__header,
.account__section-headline, .notification__filter-bar {
  background: #000 !important;}
.column-header > button,
.column-back-button,
.column-header > button,
.column-header__button,
.column-header {
  background: none !important;}
.tabs-bar__wrapper {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px) saturate(200%);}
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
  color: inherit !important;
  background: none !important;}
.compose-panel .compose-form__autosuggest-wrapper {
 background-color: rgba(255, 255, 255, 0.06) !important;}
.compose-form .compose-form__buttons-wrapper,
.compose-form .compose-form__modifiers {
  background: none !important;}
.compose-form .emoji-picker-dropdown {
  display: true;}
/*{
.public-layout .public-account-header__tabs__tabs .counter .counter-number,
.reply-indicator__content, .status__content,
.muted .status__content a, .muted .status__content p, .muted .status__display-name strong,
.status__prepend,
.account__action-bar__tab strong,
.public-layout .public-account-header__tabs__name h1,
.public-layout .public-account-header__extra__links a strong
{color: #fff;
  text-shadow: none;}*/
/*Dark Mode CSS End*/}
(Source: https://github.com/mastodon/mastodon/discussions/22800 )


Disable Emoji picker:
---------------------
}.compose-form .emoji-picker-dropdown {
  display: none;}
(source: https://github.com/mastodon/mastodon/discussions/22800 )


Make Avatars / pfp circular
----------------------------
.account__avatar {
  border-radius: 100%;
  z-index: 1;
}


Retro Terminal Effect
---------------------
body::after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		pointer-events: none !important;
		background: repeating-linear-gradient(
		0deg,
		rgba(0,0,0,0.25),
		rgba(0,0,0,0.25) 1px,
		transparent 1px,
		transparent 2px
		);}



/*Overlay Mastodon Logo with own one*/
--------------------------------------
}
.logo-container h1 a {
  background: transparent url('https://pb.todon.de/system/media_attachments/files/109/649/581/638/053/900/original/3b62d7d036d73159.png') no-repeat bottom/100% auto !important;
  padding: 79px;}
.public-layout .header .brand {
  background: transparent url(https://pb.todon.de/system/media_attachments/files/109/649/581/638/053/900/original/3b62d7d036d73159.png) no-repeat center/160% auto !important;
  margin-top: 1px;
  margin-left: 10px;}
.landing-page__logo {
  background: transparent url(https://pb.todon.de/system/media_attachments/files/109/649/581/638/053/900/original/3b62d7d036d73159.png) no-repeat bottom/100% auto !important;
  padding: 30px;}
@media(min-width:800px) {
  a[href="/"]:not(.logofont):not(.button) {
    background: transparent url(https://pb.todon.de/system/media_attachments/files/109/649/581/638/053/900/original/3b62d7d036d73159.png) no-repeat center/75% auto !important;
    box-sizing: border-box;
    display: block;
    margin-left: -24px;
    margin-top: 1px;}}
@media(max-width:800px) {
  a[href="/"]:not(.button) {
    background: transparent url(https://pb.todon.de/system/media_attachments/files/109/649/581/638/053/900/original/3b62d7d036d73159.png) no-repeat top/50% auto !important;
    box-sizing: border-box;
    display: block;
    margin-left: -160px;
    margin-top: 8px;}}
.brand {
  background: transparent url(https://pb.todon.de/system/media_attachments/files/109/649/581/638/053/900/original/3b62d7d036d73159.png) no-repeat top/170% auto !important;
  padding: 60px;
  width: 90px;}
.public-layout .footer .brand {
  display: inline-block;
  padding: 30px;}
.landing-page h1 small:after {
  content: "A cute Mastodon server!";
  visibility: visible;
  display: block;
  position: absolute;}
img[alt="Mastodon"],
.landing-page h1 small,
a[href="/"] svg {
  visibility: hidden;}
.modal-layout__mastodon,
.public-layout .header .brand svg,
.brand__tagline,
a[href="https://joinmastodon.org/"],
.landing-page__forms .button[href="https://joinmastodon.org"],
.landing__brand svg,
.public-layout .footer .brand svg,
.logo-container h1 svg {
  display: none;}
a.logofont {
  background: transparent !important;}
.button.logo-button svg {
  display: none;}
.logo-container > h1:nth-child(1) > a:nth-child(1) {
  background-size: 160% !important;}
.logo-container {
  margin: 0 !important;}
.column-title .logo > use {
  visibility: hidden;}
.column-title .logo {
  background: transparent url(https://pb.todon.de/system/media_attachments/files/109/649/581/638/053/900/original/3b62d7d036d73159.png) no-repeat top/100% auto !important;}
.column-actions {
  padding: 40px;}
.column-actions__background {
  display: none;}
.scrollable.follow-recommendations-container {
  background-image: url(https://pb.todon.de/system/media_attachments/files/109/649/581/638/053/900/original/3b62d7d036d73159.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 20%;
  background-position-y: 10px;}
.follow-recommendations-container > .column-title > svg {
  visibility: hidden;}
.logo-container h1 {
  display: auto;}
b {
  font-weight: bold !important;}
#web a {
  background: transparent !important;
  margin: 0;}
(Source: https://github.com/koyuspace/styles/tree/d4b4267515a97abeb3a0b2c07a4abce6125eb510 )
( https://github.com/koyuspace/styles/blob/d4b4267515a97abeb3a0b2c07a4abce6125eb510/custom.css  )


/*mastodon长图补丁 v2.1 by Shioko*/
----------------------------------
.image-loader {
	align-items:center;}
.zoomable-image {
	display: flex;
    height:auto;
	max-height: 100%;
    width: auto;
    max-width: 95%;
	overflow: auto !important;
	align-items:center;}
.zoomable-image:hover {
	align-items: flex-start;}
.zoomable-image img {
	max-height: 100%;
    max-width:95%;}
.zoomable-image img:hover {
	max-height: 2000%;
    max-width:95%;}




/*hashtag style by @[email protected] and @[email protected]*/
-----------------------
.mention.hashtag.status-link{
background-color: #93AEFD36;
padding: 0px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
border-style: dashed;
border-color: #93AEFD;
border-width: 0.5px;
border-radius: 5px;
}.mention.hashtag.status-link:hover{
background-color: #cdd2f54f;


emoji zoom (hover) css:
-------------
.emojione:hover { width: 50px !important; /* set the width and height of the expanded emojo here */ height: 50px !important; transition: all 0.3s ease-in-out !important; /* the 0.3s is the animation time for growing the emojo, it can be set to 0 */; } .emojione { transition: all 0.2s ease-in-out; /* the 0.2s is the animation time for shrinking the emojo, it can be set to 0 */; }
(source: https://github.com/trwnh/mastomods/blob/main/app/javascript/styles/mods/display_emojizoom.css

stars to hearts:
----------------------
.notification__favourite-icon-wrapper .star-icon,
.star-icon.active,
.star-icon:hover,
.star-icon:active
{color: crimson !important;}
.fa-star:before {content: "♥";}
(source: https://github.com/trwnh/mastomods/blob/main/app/javascript/styles/mods/display_starstohearts.css )


Personalize "register reason field"
------------------------------------
https://pad.wolkenbar.de/mastodon-css
https://chaos.social/@rstockm/109389657065945836


/*Red Line Around #noalttext content*/ mark noalttext
-------------------------------------
a.status-link:not(.mention) {
  text-decoration: underline;}
.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title]),
.media-gallery__gifv video:not([title]),
.media-gallery__item-thumbnail img[alt=""], .audio-player__canvas[title=""], .video-player video[title=""], .media-gallery__gifv video[title=""]
 {
    border: 1px dashed rgba(251, 47, 47, 0.5);
    box-sizing: border-box;}
(Source: https://artisan.chat/custom.css)
(https://gist.github.com/FiXato/3de505b04efefd49a1e3568b70545234 )



Remove Follower Count
-----------------------------------

.item-list .display-name__account {
  display: block;
}

.item-list .account__details > span:first-child {
  display: none;
}

https://mastodon.art/@Curator/111109871658587044


=========================================================================
===================== mastodontheming ===================================



Change mouse cursor:
--------------------
}
*:not(textarea):not(a):not(input):not(p), .link-button:disabled, .button:disabled, .icon-button:disabled, .text-icon-button:disabled, .column-header__button:not(:disabled), .status, .navigationbar, .character-counter, .media-gallery__item-thumbnail, .notification__message, .navigation-bar, .column-subheading, .timeline-hint, .regeneration-indicator, .column-settings__section, .empty-column-indicator, .follow_requests-unlocked_explanation, .error-column, .search__icon.fa, .search-results__header, .icon-button:disabled, .notification__filter-bar, .account__section-headline, .account__avatar, .notification-bar {
  cursor: url(data:image/gif;base64,R0lGODlhDAATAMZHAAAAAAAABAAABQABFwABGQABGgACGwACHAACHQVFVxtIWglZcJo6iZ08jA1qhg9vjKhAlqtBmBF3l7VEobZEohJ4mL1HqMBIqhR/oBWBpC57msZKsBWFqNFOutRQvdpSwt1TxReSueZXzRmex/Rc2hqm0v9g4/9h5Rus2f9k7Rut2v9l7f9l7/9m8P9m8f9n9f9s//9u/x235x266kOx3R7B8/+M/0zL/03N/7W1tU/T/7q6usLCwlXh/1Xi/1jo/8rKyljp/1nr/1ru/9PT0+Li4ujo6P///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEKAH8ALAAAAAAMABMAAAeHgAh/g4SFfwgAhoYHQYmKgwZDOI6KBj8+KJSFBT1CNSOagwUvMS0gF6EFLjA2JB0WmgVHs0dFQDuUsrRGRDw5jgUrLCYiHhsTEAyJBSknHxQRDQzTAAAFOjMZDhIP1d4FNyEJAhgcmgQ0CokAKOaEAxqOADIqlAABhQAlC6GEABXVHg0KOCgQADs=), auto;
}

Source: https://pb.todon.de/@[email protected]/111117793270694721
        https://social.animeprincess.net/@zoe/111117793210585926
        social.animeprincess.net/custom.css


/*custom publish box*/
.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
  background: linear-gradient(to right, #ffffff, #f0f8ff);}
.compose-form .compose-form__modifiers .compose-form__uploads-wrapper {
  background: #ffdbe0;}
.compose-form .compose-form__buttons-wrapper {
  background: #ffdbe0;}


/*header*/
account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button {
  color: #ffffff;}
.tabs-bar__wrapper {
  background: #ffffff;}


/*Flex Spacer*/
.status {
  border-bottom: 1px solid #b5485d;
.flex-spacer, .getting-started, .getting-started__wrapper {
  background: #b5485d;}
.iu__header {
  background: #b5485d; }


/*Searchbar*/
.column-header {
  background: #b5485d;}
.search__input { background: #b5485d; }



Change Publish Button Text (broken)
-----------------------------
.compose-panel button.button.button--block::after {
    content: "Hop!";
    text-indent: 0;
    display: block;
    line-height: initial;}
.compose-panel button.button.button--block {
    text-indent: -9999px;
    line-height: 0;}
(Source: reddit.com/r/Mastodon/comments/yruwts/are_you_tired_of_tooting_and_want_to_try/ )


Change "Toot" Text
------------------------------
.compose-form__publish-button-wrapper .button--block {
	text-indent: -9999px;
    line-height: 0;
}
.compose-form__publish-button-wrapper .button--block::before {
	content: "Toot !";
    text-indent: 0;
    display: block;
    line-height: initial;
    padding: 7px;
}
https://jsfiddle.net/yb98seug/
https://mastodon.social/@[email protected]/103442328974196985


Force all #hashtags & #hyperlinks into same color:
------------
.status-link {
  color: #fca3b7 !important;
}

More:
https://pb.todon.de/@admin/109647888787131567



/* Make property fields inline-blocks instead of blocks, allowing them
   to sit next to each other instead of line breaking between them. */
.account__header__fields dl dt,
.account__header__fields dl dd {
    display: inline-block;}

/* Make header mixed-case and cap the max width at 40%  */
.account__header__fields dl dt {
    text-transform: none !important;
    min-width: 40%; }

/* Add a ":" after the header */
.account__header__fields dl dt:after {
    content: ":";
    padding-right: 0.5em;}
(Source: https://infosec.exchange/custom.css )



Disable Toast messages/notification-bar ("Post published"):
-----------------------------------------------------------
.notification-bar {
display: none !important;
}



/* Make Header Fields 2x2 */
.account__header__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
}
.account__header__fields a {
  animation: colorAnimation 6s infinite;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 13ch;
  width: 100%;
  box-sizing: border-box;
}
.account__header__fields::before {
  content: "";
  align-self: stretch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes colorAnimation {
0% { color: blue; }50% { color: violet; }100% { color: darkviolet; }}



/* Cool pink 3D Button */
.btn,
.button {
	background-color:#ffaec9!important;
	border:3px outset #ffcfdf!important;
	color:black!important;
}
.btn:hover,
.button:hover {
	border-style:inset!important;
	color:black!important;
}
(Source: https://gamemaking.social/custom.css )