====== Customize your interface: CSS Styles ======

**Copy the full text inside the (darker) code block and paste that in the large code field in [[customize your interface|Stylus]].**\\ \\ 

=== Replace Hide button with ⛛ ===

This replaces the annoying //Hide// button on images with a simple //⏷//. You can of course use another character as well.\\ \\ 

<code>
.media-gallery__actions {
    inset-inline-end: 9px;
    top: 9px;    
}

.media-gallery__actions__pill {
    border-radius: 4px;
    padding: 3px 8px;
    line-height: 1 !important;
}

.media-gallery__actions__pill > span {
    font-size: 0
}

.media-gallery__actions__pill > span::after {
    	content: '⛛';
    	font-size: 12px;
}
</code>
\\ \\ 
=== Green boost icon ===

<code>
/* Green boost icon */

.icon-button.active .icon-retweet {
  color: #19A341 !important;
}

.status__action-bar__button.icon-button.active.icon-button--with-counter .icon-button__counter {
  color: #19A341;
}

.status__action-bar__button.star-icon.icon-button.active.icon-button--with-counter .icon-button__counter .animated-number {
  color: #ca8f04 !important;
}
</code>
\\ \\ 
=== Screaming content warning ===

This is the Mastodon default.

<code>
/* Screaming content warning  */

.content-warning::after, .content-warning::before {
  background: url(/packs/media/images/warning-stripes-9bb6a826bc6215da538d09fe7e6c1917.svg) repeat-y;
  border-left: unset;
  border-right: unset;
  border-end-start-radius: 4px;
  border-start-start-radius: 4px;  
  border-end-end-radius: 4px;
  border-start-end-radius: 4px;
}

.compose-form .spoiler-input__border {
  background: url(/packs/media/images/warning-stripes-9bb6a826bc6215da538d09fe7e6c1917.svg) repeat-y;
}
</code>
\\ \\ 
=== Todon Classic Dark ===
As the title says, this is only for the Mastodon dark theme. You can of course change the background-color to your liking. You can also use our Todon Classic Dark theme (see preferences > appearance), that includes also the green boost icon.\\ \\ 

<code>
/* Classic Todon dark  */

.column > .scrollable, .columns-area .scrollable {
  background-color: #292938;
}

.flash-message, .admin-wrapper .content-wrapper .content .table-wrapper .table > tbody > tr > th, .admin-wrapper .content-wrapper .content .table > tbody > tr > td, .admin-wrapper .content-wrapper .content .batch-table__row  {
    background-color: #292938;
}

.drawer__header, .drawer__inner, .column-header__wrapper, .notification__filter-bar, .account__section-headline, .column-inline-form, .dropdown-menu, .hover-card, .language-dropdown__dropdown, .privacy-dropdown__dropdown, .language-dropdown__dropdown .emoji-mart-scroll, .language-dropdown__dropdown .emoji-mart-search, .actions-modal, .boost-modal, .compare-history-modal, .report-modal, .report-dialog-modal, .dialog-modal, .safety-action-modal__bottom, .safety-action-modal__top {
  background-color: #20202c;           
}

.admin-wrapper, .admin-wrapper .sidebar-wrapper__inner, .admin-wrapper .sidebar ul ul, .admin-wrapper .content-wrapper .content .table-wrapper .table th, .admin-wrapper .content-wrapper .content .batch-table__toolbar {
  background-color: #20202c;           
}

.notification-group--direct, .notification-ungrouped--direct, .status__wrapper-direct {
  background: rgba(99,100,255,.035);
}
</code>