Hackers Black Out (beta) by ltrademark

Hackers Black Out (beta) screenshot
Install Get Stylus Write a review

Details

Authorltrademark

LicenseNO-REDISTRIBUTION

Created

Updated

Categoryuserstyles, mastadon, hackerstown

Statistics

Learn how we calculate statistics in the FAQ.

Total views102

Total installs31

Weekly installs6

Description

A fairly minimal re-skin of mastodons default userstyles.

Features

  • Accent Colours

Personalize your window with a fancy lil colour.

  • Adjust Gaps and window rounding

I've adjusted the CSS (duh) to allow you to nicely add some gaps to posts and other content all at once. the rounding is nice if you dislike sharp corners.

  • Adjust Font sizing

and accessibility feature, has a logic gate so you dont make the font TOO huge now.

  • Change your font! kinda

Since my only limitation is "use the fonts you have", I've added 2 other options aside from the page default, one of which is set as the default when you apply this style.

  • light mode?

All it really does is invert the page with minimal destruction to images/videos, HOWEVER, it also manages to wash out your accent colour, so.. sorry about that.

and lastly

  • Hate the rounded avatar? square it up!

an optional toggle to remove the roundy-roundness of the display pictures, and instead respects whatever value you put as your "border-radius". so if it's zero, then no circles for you~

Notes

Disclaimer

This has only been tested on the only instance I've been on (hackers.town). If this borks your timeline style, then I'm... sorry? I'll try to set up a github for better bug management, but the code should be available to tweak. If you wanna yell at me, feel free to do so on the plethora of social networks I'm on. Or just google "Ltrademark" and you should find me, I hope.

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==UserStyle==
@name           Hackers Black Out
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Blacked out theme for the hackers.town mastadon instance
@author         ltrademark (https://ltrdmrk.co)
@preprocessor   less

@var checkbox hideDrawerHeader "Hide Drawer Header" 0
@var checkbox collapseCompose "Collapse Compose Sidebar" 0
@var color accent "Accent" "#1155ee"
@var range gap "Gap" [0,0,20,1,'px']
@var range borderRadius "Border Radius" [0,0,15,1,'px']
@var checkbox roundedAvi "Rounded Avatars" 1
@var select font "Font" {
"Default": "'mastodon-font-sans-serif', sans-serif",
"Monospace*" : "monospace",
"Sans Serif": "sans-serif",
}
@var range fontSize "Font-size" [14,12,18,1,'px']
@var checkbox cornerCover "Stretch Corner Instance Image" 0
@var checkbox flipEverything "Swap to light mode" 0

==/UserStyle== */
@-moz-document regexp("https\\:\\/\\/hackers.town\\/.*") {
	@post-button-color: #555555;
	@proccessed-post-button-color: replace(@post-button-color, "#", "%23");
	
	@curve: cubic-bezier(.7,-0.01,1,.65);
	
	@check-mark: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='arcs'><polyline points='20 6 9 17 4 12'></polyline></svg>";
	
	@arrows: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTA1IiB2aWV3Qm94PSIwIDAgMjAgMTA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBvcGFjaXR5PSIwLjQ1IiBkPSJNOCAxM0wxMiAxNy41TDggMjJWMTNaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBvcGFjaXR5PSIwLjQ1IiBkPSJNOCA0OEwxMiA1Mi41TDggNTdWNDhaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBvcGFjaXR5PSIwLjQ1IiBkPSJNOCA4M0wxMiA4Ny41TDggOTJWODNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K";
	@dots: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iOTAiIHZpZXdCb3g9IjAgMCAyMCA5MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iNCIgZmlsbD0id2hpdGUiLz4KPGNpcmNsZSBjeD0iMTAiIGN5PSI0NSIgcj0iNCIgZmlsbD0id2hpdGUiLz4KPGNpcmNsZSBjeD0iMTAiIGN5PSI4MCIgcj0iNCIgZmlsbD0id2hpdGUiLz4KPGNpcmNsZSBjeD0iMTAiIGN5PSI2MiIgcj0iNCIgZmlsbD0id2hpdGUiLz4KPGNpcmNsZSBjeD0iMTAiIGN5PSIyNyIgcj0iNCIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
	
	.modeSwitch(@mode) {
		& when (@mode = 1) {
			filter: invert(1) hue-rotate(180deg);
    }
	}
	
	:root {
		--radius: @borderRadius;
		--accent: @accent;
		--compliment: spin(@accent, 50%);
		
		--column-header-background: #000; /*#313543*/
		--column-body-background: #000; /*#282c37*/
		--column-body-background--offset: #000; /*#1f232b*/
		
		--border-color: #333; /*#393f4f*/
		--post-button-color: @post-button-color; /*#8d9ac2*/
		--post-text-color: #fff;
		--post-text-color--muted: var(--post-button-color); /*#c2cede*/
		
		--compose-foreground:#fafafa;
		--compose-background: #000;
		--compose-foreground--offset: var(--compose-foreground);
		--compose-background--offset: var(--compose-background);
		
		--text-global: #fff;
		--text-global--muted: rgba(255,255,255,0.3);
		
		--header-height: 50px;
		--header-font-size: @fontSize;
		
		--gap: ~'@{gap}';
		
		--touch-width: 20px;
	}
	
	*, *:before, &:after {
		box-sizing: border-box;
	}
	
	::selection {
		background-color: fade(@accent, 10%);
		/*color: var(--compliment); */
		color: @accent;
	}
	.columns-area,
	html {
		scrollbar-color: var(--accent) rgba(0,0,0,.1);
		scrollbar-width: none;
	}
	body {
		accent-color: var(--accent);
		font-family: @font;
		font-size: @fontSize;
		.modeSwitch(@flipEverything);
	}
	
	img {
		.modeSwitch(@flipEverything);
	}
	
	.ui,
	.columns-area {
		background-image: none;
		background-color: var(--column-body-background--offset);
	}
	
	.glitch.local-settings__page,
	.drawer--results,
	.column-header__wrapper ~ .scrollable,
	.column-header ~ .scrollable {
		scrollbar-width: none;
	}
	
	.drawer--header when (@hideDrawerHeader = 1) {
		display: none;
	}
	
	.character-counter {
		font-family: @font;
	}
	
	.poll__footer,
	.loading-indicator span,
	.account__header__content > span,
	.accounts-table__count time,
	.accounts-table__count > span,
	.directory__card__bar .display-name strong,
	.account__header__content p,
	.composer--reply > .content,
	.composer--reply > header > .account.small,
	.trends__item__name > a,
	.account__action-bar__tab strong,
	.notification__filter-bar button,
	.button,
	.search__input,
	.column-header__back-button,
	.column-header__back-button span,
	.account__section-headline a,
	.account__header__bio .account__header__joined,
	.account__header__content,
	.account__header__fields dl,
	.account__header__tabs__name,
	.notification__filter-bar,
	.status.collapsed .status__info .notification__message > span,
	.character-counter,
	.status__relative-time,
	.status__prepend > span,
	.display-name,
	.status__content p {
		font-size: @fontSize;
	}
	.accounts-table__count small,
	.account__header__content small,
	.directory__card__bar .display-name span,
	.trends__item__name > span,
	.account__action-bar__tab > span,
	.account__disclaimer,
	.account__header__tabs__name h1 small,
	.display-name__account {
		font-size: .85em;
	}
	.trends__item__current span {
		font-size: 1.15em;
	}
	.notification__message span a,
	.account__header__content > span,
	.directory__card__bar .display-name strong,
	.column-subheading,
	.display-name.inline strong,
	.character-counter,
	.trends__item__name > a,
	.search-results__section h5,
	.account__section-headline a,
	.account__action-bar__tab strong,
	.account__action-bar__tab strong span,
	.notification__filter-bar button,
	.status__display-name b,
	.account__header__fields dt,
	.button.logo-button,
	.button.primary,
	.account__header__tabs__name h1,
	.account__display-name strong, 
	.status__display-name strong,
	.column-header > button,
	.drawer--account .acct strong,
	.font-weight {
		font-weight: 700;
	}
	.account__header__fields dt,
	.account__header__fields dd {
		text-align: left;
	}
	
	.media-gallery__item.letterbox,
	.media-gallery.full-width,
	.video-player.full-width {
		height: auto !important;
	}
	
	.video-player.inline video {
		top: 0;
		transform: unset;
		max-height: unset;
		width: 100%;
		height: auto;
	}
	.media-gallery__item-thumbnail img {
		height: 100%;
		object-fit: cover;
	}
	
	.scrollable.detailed-status__wrapper .focusable,
	.scrollable.detailed-status__wrapper .status,
	.drawer__inner__mastodon,
	.composer--reply,
	.modal-root__modal,
	.poll__option input[type="text"],
	button,
	.button,
	.logo-button,
	.icon-button,
	.dropdown-menu,
	.composer--options--dropdown--content,
	.text-icon-button,
	.column-link,
	.composer,
	.column,
	.composer--spoiler input {
		border-radius: var(--radius) !important;
	}
	
	.drawer--header,
	.compose-form__sensitive-button .checkbox,
	.glitch.local-settings,
	.emoji-picker-dropdown__menu,
	.item-list article .conversation,
	.item-list article .status {
		border-radius: var(--radius);
		overflow: hidden;
	}
		
	.icon-button.overlayed,
	.account__avatar-overlay-base,
	.account__avatar-overlay-overlay,
	.account__avatar-overlay-base img,
	.account__avatar {
		border-radius: if((@roundedAvi = 1), e("1e3px"), @borderRadius);
	}
	
	.drawer__inner__mastodon img {
		border-radius: calc(var(--radius) / 2);
	}
	
	.account__avatar-overlay-overlay {
		border: 3px solid var(--column-body-background);
	}
	
	.emoji-mart-bar:first-child {
		border-radius: var(--radius) var(--radius) 0 0;
	}
	
	.compose-panel .compose-form__autosuggest-wrapper,
	.autosuggest-input label .autosuggest-textarea__textarea, 
	.compose-form__autosuggest-wrapper label .autosuggest-textarea__textarea,
	.column-header__wrapper,
	.column-header {
		border-radius: var(--radius) var(--radius) 0 0;
		overflow: hidden;
	}
		
	.column-header__wrapper ~ .scrollable,
	.column-header ~ .scrollable {
		border-radius: 0 0 var(--radius) var(--radius);
	}
	
	.account__avatar-overlay-base,
	.account__avatar-overlay-overlay,
	.account__avatar-overlay-base img,
	.account__avatar {
		.modeSwitch(@flipEverything);
	}
	
	.icon-button:active, 
	.icon-button:focus, 
	.icon-button:hover,
	.poll__link,
	.status__action-bar .icon-button:hover,
	.icon-button.star-icon.active,
	.notification__dismiss-overlay .ckbox,
	.button.button-secondary:not(:disabled),
	.announcements__item__content a.unhandled-link,
	.icon-button.inverted.active,
	.column-link--transparent.active,
	.composer--reply > .content a,
	.link-button,
	.composer--options > .icon-button.inverted.active,
	.poll__cancel .icon-button,
	.column-inline-form .icon-button,
	.column-header.active,
	.account__section-headline a.active, 
	.account__section-headline button.active, 
	.notification__filter-bar a.active, 
	.notification__filter-bar button.active,
	.account__header__bio .account__header__fields a,
	.column-header__back-button,
	.emoji-mart-anchor-selected,
	.emoji-mart-anchor-selected:hover,
	.status__content a.unhandled-link,
	.column-back-button,
	.text-icon-button.active,
	.landing-page__short-description p a, 
	.reply-indicator__content a, 
	.rich-formatting a, 
	.rich-formatting li a, 
	.rich-formatting p a, 
	.status__content a {
		color: var(--accent);
	}
	
	.status__content a.unhandled-link .link-origin-tag {
		color: var(--compliment);
	}

	.video-player__volume__current,
	.video-player__volume__handle,
	.video-player__volume::before,
	.video-player__seek__buffer, 
	.video-player__seek__progress,
	.video-player__seek__handle,
	.poll__chart.leading,
	.poll__input.active,
	.pillbar-button:not([disabled]).active,
	.icon-badge,
	.radio-button__input.checked,
	.react-toggle--checked:is(:hover, 
	:focus-within):not(.react-toggle--disabled) .react-toggle-track,
	.react-toggle--checked .react-toggle-track,
	.composer--options--dropdown.open > .value, {
		background-color: var(--accent);
	}
	.button:disabled {
		background-color: var(--accent);
		filter: grayscale(1);
		opacity: .54;
	}
	
	.video-player__volume::before,
	.video-player__seek__buffer {
		opacity: .1;
	}
	
	.pillbar-button:not([disabled]).active:focus,
	.pillbar-button:not([disabled]).active:hover,
	.status__content .status__content__spoiler-link:hover,
	.button.logo-button:active, 
	.button.logo-button:focus, 
	.button.logo-button:hover,
	.composer--options--dropdown--content--item:active,
	.composer--options--dropdown--content--item:hover {
		background-color: contrast(@accent, darken(@accent, 10%), lighten(@accent, 10%));
		color: contrast(@accent, #000, #fff);
	}
	
	.compose-form__sensitive-button .checkbox.active,
	.button.button-secondary:active, 
	.button.button-secondary:focus, 
	.button.button-secondary:hover,
	.drawer--header a:focus, .drawer--header a:hover,
	.column-link__badge,
	.report-modal__comment .button,
	.confirmation-modal__action-bar .button:not(.confirmation-modal__cancel-button),
	.compose-form__poll-wrapper .button.button-secondary:hover,
	.reactions-bar__item.active,
	.drawer--account a.edit:hover,
	.composer--options--dropdown--content--item.active,
	.glitch.local-settings__navigation__item.active,
	.search__input:focus,
	.dropdown-menu__item a:active, 
	.dropdown-menu__item a:focus, 
	.dropdown-menu__item a:hover,
	.load-more:hover,
	.status__content .status__content__spoiler-link,
	.button.logo-button,
	.button.primary,
	.column-link:active, 
	.column-link:focus, 
	.column-link:hover {
		background-color: var(--accent);
		color: contrast(@accent, #000, #fff);
	}
	
	.drawer--header a:hover .icon-badge {
		background-color: contrast(@accent, #000, #fff);
		border: 2px solid @accent;
	}
	
	.column-link--transparent.active .fa,
	.composer--reply > header > .account.small,
	.composer--reply .icon-button.inverted,
	.composer--reply > .content,
	.reactions-bar__item.active .reactions-bar__item__count,
	.composer--options--dropdown--content--item > .content strong,
	.composer--options--dropdown--content--item.active > .content strong,
	.composer--options--dropdown--content--item > .content,
	.composer--options--dropdown--content--item.active > .content,
	.column-link:active > *, 
	.column-link:focus > *, 
	.column-link:hover > * {
		color: currentColor !important;
	}
	
	.tabs-bar,
	.drawer--header,
	.column-back-button,
	.column-header,
	.column-header__button, 
	.column-header__notif-cleaning-buttons button,
	.search__input {
		background-color: var(--column-header-background);
	}
	
	.directory__card__bar,
	.directory__card__extra,
	.filter-form,
	.tabs-bar__wrapper,
	.modal-root__modal:not(.media-modal),
	.modal-root__modal.confirmation-modal,
	.flex-spacer, 
	.getting-started__wrapper, 
	.getting_started,
	.glitch.local-settings,
	.column-inline-form,
	.empty-column-indicator, 
	.error-column, 
	.follow_requests-unlocked_explanation,
	.search-results__section h5,
	.drawer__inner,
	.drawer__inner.darker,
	.account__header__bar,
	.item-list article .status,
	.item-list article .conversation,
	.mbstobon-1 .drawer__inner__mastodon,
	.status.status-direct,
	.column > .scrollable,
	.column-link {
		background-color: var(--column-body-background);
	}

	.report-modal__comment,
	.notification__dismiss-overlay .wrappy,
	.notification__dismiss-overlay .ckbox,
	.detailed-status__action-bar,
	.tabs-bar__link,
	.status-card.compact,
	.directory__card__extra .account__header__content,
	.radio-button__input,
	.report-modal__container,
	.compose-form__sensitive-button .checkbox,
	.poll__input,
	.poll__option input[type="text"],
	.compose-form__poll-wrapper .poll__footer,
	.compose-form__poll-wrapper,
	.setting-text,
	.account__header__bar,
	.account__action-bar,
	.glitch.local-settings__navigation__item,
	.account,
	.search-results__section h5,
	.composer--options > hr,
	.dropdown-menu__separator,
	.account__header__bio .account__header__fields,
	.account__header__fields dl,
	.account__header__tabs__buttons .icon-button,
	.column-header__wrapper,
	.status.status-direct,
	.account__section-headline, 
	.notification__filter-bar {
		border-color: var(--border-color);
	}
	
	.poll__chart,
	.reactions-bar__item:active, 
	.reactions-bar__item:focus, 
	.reactions-bar__item:hover,
	a.status-card.compact:hover,
	.status-card__image {
		background-color: var(--border-color);
	}
	
	.account__action-bar__tab {
		border-left-color: var(--border-color);
	}
	
	.compose-form__sensitive-button .checkbox.active,
	.button.button-secondary:active, 
	.button.button-secondary:focus, 
	.button.button-secondary:hover,
	.button.button-secondary,
	.poll__input.active,
	.loading-indicator__figure,
	.radio-button__input.checked,
	.notification.unread::before, 
	.status.unread::before,
	.setting-text:active, 
	.setting-text:focus,
	.account__action-bar__tab.active {
		border-color: var(--accent);
	}
	
	.account__header__bar .avatar .account__avatar {
		border-color: var(--column-body-background);
	}
	
	.dropdown-menu__arrow.top {
		border-top-color: var(--column-body-background);
	}
	.dropdown-menu__arrow.bottom {
		border-bottom-color: var(--column-body-background);
	}
		
	.media-gallery__item-thumbnail img:not([alt]), 
	.audio-player__canvas:not([title]), 
	.video-player video:not([title]), 
	.media-gallery__gifv video:not([title]),
	.load-gap,
	.status {
		border: none;
	}
	
	.icon-button,
	.composer--textarea--icons > .textarea_icon,
	.column-header__button, 
	.column-header__notif-cleaning-buttons button,
	.account--panel__button .icon-button, 
	.detailed-status__button .icon-button,
	.detailed-status__action-bar-dropdown .icon-button,
	.report-modal__target .icon-button,
	.announcements__pagination .icon-button,
	.column-header__setting-arrows .icon-button,
	.account__relationship button.icon-button,
	.status__action-bar .icon-button,
	.account__header__tabs__buttons .icon-button,
	.status__info__icons .icon-button,
	.status__info__icons {
		color: var(--post-button-color);
	}
	
	.detailed-status__meta,
	.glitch.local-settings__navigation__item:not(.active) i,
	.glitch.local-settings__navigation__item:not(.active) .text-icon-button,
	.glitch.local-settings span.hint,
	.text-icon-button:hover,
	.column-link__icon,
	.load-more,
	.status__prepend,
	.column-header__collapsible,
	.status__display-name, 
	.status__relative-time {
		color: var(--post-text-color--muted);
	}
	
	.picture-in-picture__footer, 
	.picture-in-picture__header,
	.dropdown-menu,
	.dropdown-menu__item a,
	.notification__dismiss-overlay .wrappy,
	.autosuggest-input label .autosuggest-textarea__textarea:disabled, 
	.compose-form__autosuggest-wrapper label .autosuggest-textarea__textarea:disabled,
	.compose-panel .compose-form__autosuggest-wrapper,
	.modal-root__modal.confirmation-modal .confirmation-modal__action-bar,
	.compose-form__modifiers,
	.poll__option input[type="text"],
	.compose-form__poll-wrapper,
	.account__header__fields dt,
	.glitch.local-settings__navigation__item.close, 
	.glitch.local-settings__navigation__item.close:hover,
	.glitch.local-settings__navigation__item:hover,
	.glitch.local-settings__navigation__item,
	.glitch.local-settings__navigation,
	.search-results__header,
	.account__header .account__header__fields dd, 
	.public-account-bio .account__header__fields dd, 
	div[class*="mbstobon-"] .drawer__inner__mastodon,
	.drawer__inner, .drawer__inner__mastodon,
	.account__section-headline, .notification__filter-bar,
	.detailed-status,
	.column-header__back-button,
	.focusable:focus,
	.announcements,
	.column-header__button.active, 
	.column-header__button.active:hover, 
	.column-header__notif-cleaning-buttons button.active, 
	.column-header__notif-cleaning-buttons button.active:hover,
	.column-header__collapsible-inner,
	.account__section-headline button, 
	.notification__filter-bar button,
	.notification__filter-bar,
	.column-subheading {
		background-color: var(--column-body-background--offset);
	}
	
	.icon-button.inverted.disabled,
	.composer--options--dropdown--content--item.active:active,
	.composer--options--dropdown--content--item.active:hover,
	.glitch.local-settings__navigation__item.active:hover {
		pointer-events: none;
	}
	
	.composer--options--dropdown--content {
		z-index: 2;
	}
	
	.glitch.local-settings__navigation__item:hover {
		box-shadow: inset 5px 0 0 0 var(--accent);
	}
	
	.glitch.local-settings__navigation__item.close, 
	.glitch.local-settings__navigation__item.close i{
		color: #df405a;
	}
	
	.glitch.local-settings__navigation__item.close:hover {
		background-color: #df405a;
		color: #fff;
		box-shadow: none;
	}
	
	.account__section-headline a.active::before, 
	.account__section-headline button.active::before, 
	.notification__filter-bar a.active::before, 
	.notification__filter-bar button.active::before {
		border-color: transparent transparent var(--border-color);
	}
	
	.account__section-headline a.active::after, 
	.account__section-headline button.active::after, 
	.notification__filter-bar a.active::after, 
	.notification__filter-bar button.active::after {
		border-color: transparent transparent var(--column-body-background--offset);
	}
	
	.status.collapsed.status-direct > .status__content::after,
	.status.collapsed .status__content::after {
		background: linear-gradient(rgba(40,44,55,0), var(--column-body-background));
	}
	
	.status.collapsed:focus > .status__content::after {
		background: linear-gradient(rgba(40,44,55,0), var(--column-body-background--offset));
	}
	
	.column-header when (@gap < 1) and (@borderRadius < 1) {
		border-left: 1px solid var(--border-color);
	}
	
	.notification__dismiss-overlay:focus .ckbox,
	.pillbar-button:not([disabled]).active,
	.column-header__wrapper.active {
		box-shadow: none;
	}
	.column-header.active::before {
		--max-opacity: .2;
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, var(--accent) 0%, transparent 50%);
		animation: new-posts 5s @curve infinite;
		opacity: .2;
		pointer-events: none;
	}
	.column-header__wrapper.active::before {
		--max-opacity: 1;
		bottom: unset;
		top: -13px;
		background: radial-gradient(ellipse,var(--accent) 0,rgba(43,95,217,0) 60%);
		animation: new-posts 5s @curve infinite;
		text-align: center;
		width: 90%;
		z-index: 3;
	}
	
	.column-header__wrapper.active + .scrollable {
		& when (@gap > 0) {
			background-image: linear-gradient(to right,transparent 0%, var(--accent) 2%, transparent 6%, transparent 93%, var(--accent) 98%, transparent 99%);
			background-size: 100% 30px;
			background-repeat: no-repeat;
			background-position: 0 0;
			animation: pulse 6s @curve infinite 4s;
			margin: 0 calc(var(--gap) * -1);
			padding: 0 var(--gap);
		}
	}
	
	.column-header__wrapper {
		overflow: visible;
	}
	.column-header__wrapper::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: var(--gap);
		background: linear-gradient(to bottom, var(--column-body-background), transparent);
	}
	
	.column-header.active .column-header__button {
		background: none;
	}
	
	.composer--options--dropdown.open > .value {
		box-shadow: none;
	}
	
	.picture-in-picture__header .display-name,
	.picture-in-picture__header .display-name span,
	.dropdown-menu__item a,
	.composer--upload_form--actions .icon-button,
	.composer--upload_form--actions .icon-button:active, 
	.composer--upload_form--actions .icon-button:focus, 
	.composer--upload_form--actions .icon-button:hover,
	.composer--upload_form--progress,
	.poll__footer,
	.column-header__setting-btn:focus, 
	.column-header__setting-btn:hover,
	.drawer--header > *,
	.status__content a .fa,
	.status-card__title,
	.notification__message,
	.notification__message span a,
	.loading-indicator span,
	.accounts-table__count > span,
	.account__header__content,
	.directory__card__bar .display-name bdi,
	.modal-root__modal,
	.modal-root__modal.confirmation-modal,
	.compose-form__sensitive-button .icon-button,
	.reactions-bar .emoji-button,
	.announcements__pagination,
	.getting-started__trends h4,
	.trends__item__current,
	.trends__item__name a,
	.search-results__header,
	.setting-text,
	.account__header__fields dt,
	.account__header__fields dd,
	.account__header__bio .account__header__joined,
	.glitch.local-settings,
	.column-subheading,
	.search-results__section h5 {
		color: var(--text-global);
	}
	
	.link-button:disabled,
	.icon-button.inverted.disabled,
	.notification__message span,
	.accounts-table__count small,
	.directory__card__bar .display-name span,
	.muted .status__content, .muted .status__content__text, 
	.muted .status__content a, 
	.muted .status__content p, 
	.muted .status__display-name strong,
	.compose-form__poll-wrapper .icon-button.disabled,
	.trends__item__name > span,
	.search-results__section h5 i,
	.account__header__tabs__name h1 small,
	.icon-button.disabled,
	.account__section-headline a, 
	.account__section-headline button, 
	.notification__filter-bar a, 
	.notification__filter-bar button,
	.account__action-bar__tab > span,
	.account__disclaimer,
	.getting-started__footer p a,
	.getting-started__footer p,
	.getting-started__footer li,
	.getting-started__footer li a {
		color: var(--text-global--muted);
	}
		
	button.icon-button i.fa-retweet {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='@{proccessed-post-button-color}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='@{proccessed-post-button-color}' stroke-width='0'/></svg>");
	}
	
		button.icon-button:hover i.fa-retweet {
			@raw-accent: ~'@{accent}';
			@proccessed-retweet: replace(@raw-accent, '#', '%23');
			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='@{proccessed-post-button-color}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='@{proccessed-retweet}' stroke-width='0'/></svg>");
			background-position: 0 100%;
	}
	
	button.icon-button.disabled:hover i.fa-retweet, 
	button.icon-button.disabled i.fa-retweet {
		@muted-global: #222;
		@proccessed-retweet: replace(@muted-global, '#', '%23');
		
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='209' width='22'><path d='M 18.972656 1.2011719 C 18.829825 1.1881782 18.685932 1.2302188 18.572266 1.3300781 L 15.990234 3.5996094 C 15.58109 3.6070661 15.297269 3.609375 14.730469 3.609375 L 7.0996094 3.609375 L 9.4199219 6.4609375 L 9.4492188 6.5195312 L 12.664062 6.5195312 L 6.5761719 11.867188 C 6.5674697 11.818249 6.5507813 11.773891 6.5507812 11.720703 L 6.5507812 9.0195312 L 9.0507812 9.0195312 C 9.4207813 9.0495313 9.6792188 8.54 9.4492188 8.25 L 5.5 3.3496094 C 5.38 3.1796094 5.1607031 3.1003906 4.9707031 3.1503906 L 4.9707031 3.1601562 C 4.8707031 3.1901563 4.8 3.2598438 4.75 3.3398438 L 0.80078125 8.2402344 C 0.60078125 8.5402344 0.8292187 9.0190625 1.1992188 9.0390625 L 3.5996094 9.0390625 L 3.5996094 11.720703 C 3.5996094 13.045739 3.5690668 13.895038 3.6503906 14.4375 L 2.6152344 15.347656 C 2.3879011 15.547375 2.3754917 15.901081 2.5859375 16.140625 L 3.1464844 16.78125 C 3.3569308 17.020794 3.7101667 17.053234 3.9375 16.853516 L 19.892578 2.8359375 C 20.119911 2.6362188 20.134275 2.282513 19.923828 2.0429688 L 19.361328 1.4023438 C 19.256105 1.282572 19.115488 1.2141655 18.972656 1.2011719 z M 18.410156 6.7753906 L 15.419922 9.4042969 L 15.419922 9.9394531 L 14.810547 9.9394531 L 13.148438 11.400391 L 16.539062 15.640625 C 16.719062 15.890625 17.140313 15.890625 17.320312 15.640625 L 21.259766 10.740234 C 21.519766 10.460234 21.260625 9.9094531 20.890625 9.9394531 L 18.400391 9.9394531 L 18.400391 7.2402344 C 18.400391 7.0470074 18.407711 6.9489682 18.410156 6.7753906 z M 11.966797 12.439453 L 8.6679688 15.339844 L 14.919922 15.339844 L 12.619141 12.5 C 12.589141 12.48 12.590313 12.459453 12.570312 12.439453 L 11.966797 12.439453 z' fill='@{proccessed-retweet}' stroke-width='0'/></svg>");
	}
	
	button.icon-button.active:hover i.fa-retweet, 
	button.icon-button.active i.fa-retweet {
		@raw-accent: ~'@{accent}';
		@proccessed-retweet: replace(@raw-accent, '#', '%23');
		
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='209' width='22'><path d='M 18.972656 1.2011719 C 18.829825 1.1881782 18.685932 1.2302188 18.572266 1.3300781 L 15.990234 3.5996094 C 15.58109 3.6070661 15.297269 3.609375 14.730469 3.609375 L 7.0996094 3.609375 L 9.4199219 6.4609375 L 9.4492188 6.5195312 L 12.664062 6.5195312 L 6.5761719 11.867188 C 6.5674697 11.818249 6.5507813 11.773891 6.5507812 11.720703 L 6.5507812 9.0195312 L 9.0507812 9.0195312 C 9.4207813 9.0495313 9.6792188 8.54 9.4492188 8.25 L 5.5 3.3496094 C 5.38 3.1796094 5.1607031 3.1003906 4.9707031 3.1503906 L 4.9707031 3.1601562 C 4.8707031 3.1901563 4.8 3.2598438 4.75 3.3398438 L 0.80078125 8.2402344 C 0.60078125 8.5402344 0.8292187 9.0190625 1.1992188 9.0390625 L 3.5996094 9.0390625 L 3.5996094 11.720703 C 3.5996094 13.045739 3.5690668 13.895038 3.6503906 14.4375 L 2.6152344 15.347656 C 2.3879011 15.547375 2.3754917 15.901081 2.5859375 16.140625 L 3.1464844 16.78125 C 3.3569308 17.020794 3.7101667 17.053234 3.9375 16.853516 L 19.892578 2.8359375 C 20.119911 2.6362188 20.134275 2.282513 19.923828 2.0429688 L 19.361328 1.4023438 C 19.256105 1.282572 19.115488 1.2141655 18.972656 1.2011719 z M 18.410156 6.7753906 L 15.419922 9.4042969 L 15.419922 9.9394531 L 14.810547 9.9394531 L 13.148438 11.400391 L 16.539062 15.640625 C 16.719062 15.890625 17.140313 15.890625 17.320312 15.640625 L 21.259766 10.740234 C 21.519766 10.460234 21.260625 9.9094531 20.890625 9.9394531 L 18.400391 9.9394531 L 18.400391 7.2402344 C 18.400391 7.0470074 18.407711 6.9489682 18.410156 6.7753906 z M 11.966797 12.439453 L 8.6679688 15.339844 L 14.919922 15.339844 L 12.619141 12.5 C 12.589141 12.48 12.590313 12.459453 12.570312 12.439453 L 11.966797 12.439453 z' fill='@{proccessed-retweet}' stroke-width='0'/></svg>");
		background-position: 0 0;
	}
	
	.icon-button:active, 
	.icon-button:focus, 
	.icon-button:hover {
		background: none;
		/*outline: 1px dotted currentColor;
		outline-offset: 2px;*/
	}
	
	/* ------------- */
	
	.drawer:first-child,
	.column {
		padding: 0;
	}
	.column__wrapper, 
	.columns-area {
		gap: var(--gap);
		padding: var(--gap);
	}
	
	/* -------------- */
	
	.navigation-bar__profile {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .5em;
	}
	
	.drawer--account a.edit {
		display: inline-block;
		color: var(--text-global);
		font-size: .8em;
		padding: 0 .5em;
		border: 1px solid var(--border-color);
		border-radius: var(--radius);
	}
	
	.dropdown-menu {
		padding: 0;
	}
	.dropdown-menu ul {
		overflow: hidden;
	}
	.dropdown-menu__item a {
		padding: .5rem;
	}
	
	.dropdown-menu__separator {
		margin-left: 0;
		margin-right: 0;
	}
	
	.picture-in-picture,
	.react-toggle-thumb,
	.react-toggle-track {
		border-radius: var(--radius);
	}
	
	.emoji-picker-dropdown__modifiers__menu,
	.emoji-mart-search input {
		border-radius: calc(var(--radius) * 2);
	}
	
	.item-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.column > .scrollable,
	.item-list article + article {
		padding-top: var(--gap);
		box-sizing: border-box;
	}
	
	.account-timeline__header,
	.item-list article {
		width: 100%;
	}
	
	.item-list article .conversation,
	.item-list article .status {
		margin-top: -1px;
		border-top: 1px solid var(--border-color);
		& when (@gap > 0) or (@borderRadius > 0) {
			border: 1px solid var(--border-color);
			margin: 0;
		}
	}
	
	.item-list article + article:before when (@gap < 1) and (@borderRadius < 1) {
		content: '';
		display: block;
		height: 1px;
		width: 100%;
		background-color: var(--border-color);
	}
	.search,
	.column-header {
		min-height: var(--header-height);
	}
	
	.account__header__fields dt {
		border-right: 1px solid var(--border-color);
	}
	
	.column {
		overflow: visible;
	}
	
	.column-header > button {
		font-size: var(--header-font-size);
	}
	
	.column-header when (@gap < 1) and (@borderRadius < 1) {
		border-bottom: 1px solid var(--border-color);
	}
	
	.account__section-headline a + a,
	.notification__filter-bar button + button,
	.glitch.local-settings__page {
		border-left: 1px solid var(--border-color);
	}
	
	.notification__filter-bar button + button {
		border-radius: 0 var(--radius) var(--radius) 0 !important;
	}

	.column .scrollable,
	.column:last-child .getting-started__trends {
		& when (@gap < 1) and (@borderRadius < 1) {
        border-left: 1px solid var(--border-color);
    }
	}
	
	.getting-started__trends h4,
	.column-subheading {
		& when (@gap > 0) {
			border-radius: var(--radius);
			background-color: var(--border-color);
		}
		& when (@borderRadius < 1) {
			border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
			&:first-child {
				border-top: none;
			}
    }
		& when (@borderRadius > 0) {
			border-radius: var(--radius);
			border: 1px solid var(--border-color);
    }
	}
	
	.search {
		margin-bottom: 0;
		border-radius: var(--radius);
		overflow: hidden;
		& when (@gap < 1) and (@borderRadius < 1) {
			border-bottom: 1px solid var(--border-color);
		}
		& when (@borderRadius > 0) {
			border: none;
		}
		& when (@gap > 0) {
			border: 1px solid var(--border-color);
		}
	}
	
	.notification__filter-bar {
		& when (@gap < 1) and (@borderRadius < 1) {
			border-bottom: 1px solid var(--border-color);
			border-left: 1px solid var(--border-color);
		}
		& when (@gap > 0) or (@borderRadius > 0) {
			border: 1px solid var(--border-color);
			margin-top: var(--gap);
		}
		& when (@borderRadius > 0) {
			border-radius: var(--radius);
		}
	}
	
	.picture-in-picture,
	.glitch.local-settings {
		border: 1px solid var(--border-color);
	}
	
	.glitch.local-settings__navigation__item {
		--gutter: .65rem;
		padding: var(--gutter);
		border: none;
	}
	.glitch.local-settings__navigation__item + .glitch.local-settings__navigation__item {
		border-top: 1px solid var(--border-color);
	}
	.getting-started__trends {
		margin-top: 0;
	}
	
	.glitch.local-settings__navigation__item i, 
	.glitch.local-settings__navigation__item .text-icon-button {
		padding: 0;
		margin-right: calc(var(--gutter) - 3.71667px);
	}
	
	.composer--publisher {
		gap: 10px;
	}
	.composer--publisher button {
		margin: 0 !important;
	}
	.composer--publisher button.primary {
		order: -1;
	}
	
	.column-header.active .column-header__icon {
		text-shadow: none;
		color: currentColor;
	}
	.column-header__button:focus, 
	.column-header__notif-cleaning-buttons button:focus {
		text-shadow: none;
	}
	
	
	/* -- Trend Arrow Colour -- */
	.trends__item__sparkline path:first-child {
		fill: fade(@accent, 40%) !important;
	}
	.trends__item__sparkline path:last-child {
		stroke: var(--accent) !important;
	}
	
	/* -- Composer -- */
	.composer {
		border-top: 1px solid var(--border-color);
		border-bottom: 1px solid var(--border-color);
		& when (@gap > 0) {
			border: 1px solid var(--border-color);
    }
	}
	
	.autosuggest-input label .autosuggest-textarea__textarea:disabled, 
	.compose-form__autosuggest-wrapper label .autosuggest-textarea__textarea:disabled {
		color: fade(#fff, 30%);
	}
	
	.compose-form__autosuggest-wrapper label .autosuggest-textarea__textarea {
		background-color: var(--compose-background, #fff);
		color: var(--compose-foreground, #000);
		border: 1px solid var(--border-color);
		border-bottom: none;
	}
	.report-modal__comment .setting-text__wrapper,
	.compose-form__poll-wrapper .poll__footer button, 
	.compose-form__poll-wrapper .poll__footer select,
	.poll__option input[type="text"],
	.composer--spoiler input {
		background-color: var(--compose-background, #fff);
		color: var(--compose-foreground, #000);
		border: 1px solid var(--border-color);
	}
	.report-modal__comment .setting-text__wrapper .setting-text::placeholder,
	.poll__option input[type="text"]::placeholder,
	.composer--spoiler input::placeholder,
	.compose-form__autosuggest-wrapper label .autosuggest-textarea__textarea::placeholder {
		color: var(--compose-foreground, #000) !important;
	}
	.composer--options-wrapper {
		height: unset;
		background-color: var(--compose-background--offset, #ebebeb);
		color: var(--compose-foreground--offset, #000);
		border: 1px solid var(--border-color);
		border-radius: 0 0 var(--radius) var(--radius);
		overflow: hidden;
	}
	
	
	.glitch.local-settings__navigation__item.close:hover i,
	.composer--options > button,
	.composer--options > .inverted,
	.composer--options .composer--options--dropdown > button,
	.character-counter,
	.icon-button.inverted:active,
	.icon-button.inverted:focus,
	.icon-button.inverted:hover {
		color: currentColor;
	}
	.icon-button.inverted:active,
	.icon-button.inverted:focus,
	.icon-button.inverted:hover {
		opacity: .6;
	}
	.composer--publisher > .primary {
		width: 100%;
	}
	
	/* -- Media gallery / posts with image -- */
	.media-gallery.full-width {
		display: grid;
		grid-template-columns: repeat(2, minmax(180px, 1fr));
		grid-gap: .2rem;
	}
	.media-gallery.full-width .media-gallery__item {
		width: 100% !important;
		height: 100% !important;
		min-height: 130px;
		inset: 0 !important;
		&:nth-child(2n) {
			&:last-child {
				grid-column: 1 / -1;
			}
		}
	}
	.composer--publisher,
	.account-gallery__container .account-gallery__item {
		display: flex;
	}
	
	.composer--reply,
	.compose-form__poll-wrapper .button.button-secondary,
	.reactions-bar__item,
	.button.side_arm,
	.button.logo-button.button--destructive {
		color: #fff;
		background-color:var(--compose-background--offset);
		box-shadow: inset 0 0 0 1px var(--border-color);
		border: none;
	}
	
	.compose-form__poll-wrapper .poll__footer {
		gap: 10px;
	}
	
	/* -- Account timeline styles -- */
	.account-timeline__header {
		overflow: hidden;
		border-radius: var(--radius);
		& when (@gap > 0) or (@borderRadius > 0) {
			margin-bottom: var(--gap);
			border: 1px solid var(--border-color);
			border-bottom: none;
		}
	}
	
	.search-results__section h5 {
		border-radius: var(--radius);
		& when (@gap > 0) {
			border: none;
			background-color: var(--border-color);
		}
	}
	.account {
		border-radius: var(--radius);
		& when (@gap > 0) {
			border: 1px solid var(--border-color);
			margin-top: var(--gap);
		}
	}
	.column-header__collapsible.collapsed {
		overflow: hidden;
	}
	.column-header__collapsible {
		position: relative;
		overflow: visible;
		max-height: 100vh;
		z-index: 3;
	}
	
	.announcements {
		border-radius: var(--radius);
		& when (@gap < 1) and (@borderRadius < 1) {
			border-left: 1px solid var(--border-color);
			border-right: 1px solid var(--border-color);
			border-bottom: 1px solid var(--border-color);
		}
		& when (@gap > 0) {
			--size: 10px;
			z-index: 3 !important;
			border: 1px solid var(--border-color);
			&:before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				width: var(--size);
				height: var(--size);
				background: var(--column-body-background);
				border-top: 1px solid var(--border-color);
				border-right: 1px solid var(--border-color);
				transform: rotate(-45deg) translate(-43px, -55px);
				transform-origin: top right;
			}
		}
	}
	
	.column-header__collapsible-inner {
		border-radius: var(--radius);
		& when (@gap < 1) and (@borderRadius < 1) {
			border-left: 1px solid var(--border-color);
			border-right: 1px solid var(--border-color);
			border-bottom: 1px solid var(--border-color);
		}
		& when (@gap > 0) {
			--size: 10px;
			border: 1px solid var(--border-color);
			&:before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				width: var(--size);
				height: var(--size);
				background: var(--column-body-background);
				border-top: 1px solid var(--border-color);
				border-right: 1px solid var(--border-color);
				transform: rotate(-45deg) translate(-10px, -200%);
				transform-origin: top right;
			}
		}
	}
	
	.reactions-bar {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
		gap: .5em;
	}
	
	.reactions-bar__item {
		border-radius: var(--radius);
		padding: .25em .5em;
		margin: 0;
		font-size: @fontSize;
		&.active {
			box-shadow: none;
		}
	}
	.announcements__pagination {
		padding: .2rem;
	}
	.reactions-bar .emoji-button {
		opacity: 1;
	}
	.text-icon-button {
		font-family: sans-serif;
		font-weight: 800;
		transform: scale(1,1.4);
		transform-origin: center;
	}
	
	.compose-form__modifiers {
		border-left: 1px solid var(--border-color);
		border-right: 1px solid var(--border-color)
	}
	.modal-root__modal {
		border: 1px solid var(--border-color)
	}
	.modal-root__modal.confirmation-modal .confirmation-modal__action-bar {
		border-top: 1px solid var(--border-color)
	}
	.report-modal__comment .setting-text,
	.report-modal__comment .setting-text:focus {
		color: currentColor;
		background: none;
	}
	
	.search {
		&__input {
			height: 100%;
		}
		&__icon {
			.fa {
				color: #fff;
				mix-blend-mode: exclusion;
				&-times-circle.active {
					opacity: 1;
				}
			}
		}
	}
	
	.drawer__inner {
		gap: var(--gap);
	}
	.drawer__inner__mastodon img & when (@cornerCover = 1) {
		object-fit: cover;
		object-position: center;
	}
	.react-toggle-track-check {
		color: contrast(@accent, #000,#fff);
		svg path {
			fill: currentColor;
		}
	}
	
	.directory__card__bar__relationship {
		flex-shrink: 0;
		width: unset;
		height: unset;
	}
	
	.directory__list {
		display: flex;
		flex-direction: column;
		margin: 0;
		& when (@gap < 1) and (@borderRadius < 1) {
			.directory__card + .directory__card {
				border-top: 1px solid var(--border-color);
			}
    }
		& when (@gap > 0) {
			gap: var(--gap);
			.directory__card {
				border: 1px solid var(--border-color);
			}
		}
	}
	.directory__card {
		color: var(--text-global);
		border-radius: var(--radius);
		overflow: hidden;
		margin: 0;
		.directory__card__bar {
			border-top: 1px solid var(--border-color);
		}
	}
	.accounts-table__count {
		+ .accounts-table__count {
			border-left: 1px solid var(--border-color);
		}
	}
	
	.react-toggle--checked .react-toggle-thumb {
		background-color: contrast(@accent, #000,#fff);
		border-color: contrast(@accent, #000,#fff);
	}
	
	.drawer--header {
		& when (@gap < 1) or (@borderRadius < 1) {
			border-bottom: 1px solid var(--border-color);
    }
		& when (@gap > 0) {
			border: 1px solid var(--border-color);
		}
	}
	
	.announcements__item__content { 
		scrollbar-width: thin;
	}
	
	.compose-form__sensitive-button .checkbox.active:before {
		content:'';
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: none;
		background-image: url(@check-mark);
		background-origin: content-box;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 12px;
	}
	
	.scrollable.detailed-status__wrapper {
		.focusable,
		.status {
			position: relative;
			& when (@gap < 1) and (@borderRadius < 1) {
        border-left: 1px solid var(--border-color);
    	}
			& when (@gap > 0) {
				border: 1px solid var(--border-color);
				.detailed-status__action-bar {
					border-bottom: none;
				}
			}
			margin-top: var(--gap);
			&:before {
				& when (@gap > 0) {
					content: '';
				}
				position: absolute;
				bottom: 100%;
				left: 0;
				height: var(--gap);
				width: 1px;
				background-color: var(--border-color);
				margin: 0 1rem 1px;
			}
		}
		.focusable {
			.detailed-status,
			.detailed-status__action-bar {
				background: none;
			}
		}
		> div {
			&:first-child {
				[tabindex] {
					&:first-child {
						.focusable {
							margin-top: 0;
							&:before {
								display: none;
							}
						}
					}
				}
			}
		}
	}
	
	/* -- Experimental | Hide compose bar -- */
	.drawer:first-child when (@collapseCompose = 1) {
		background-color: var(--column-body-background);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		border-right: 1px solid var(--border-color);
		padding: var(--gap);
		margin-right: var(--touch-width);
		transform: translateX(-100%);
		transition: 335ms ease-in-out all;
		overflow: visible;
		&:hover {
			transform: translateX(0);
			&:after,
			&:before {
				opacity: 0;
			}
		}
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 100%;
			bottom: 0;
			width: var(--touch-width);
			background-image: linear-gradient(to bottom, var(--column-body-background) 40%, transparent 45%, transparent 65%, var(--column-body-background) 100%);
			background-size: 20px 305px;
			background-position: 0 0;
			animation: compose-reveal 10s linear infinite;
			z-index: 2;
		}
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 100%;
			bottom: 0;
			width: var(--touch-width);
			transition: 335ms ease-in-out all;
  		background-image: url(@arrows);
			background-size: 20px auto;
			background-position: 0 0;
			background-repeat: repeat-y;
			z-index: 1;
		}
	}
	.columns-area when (@collapseCompose = 1) {
		padding-left: var(--touch-width);
	}
	
	/* -- SIMPLE (not advanced) MODE VIEW -- */
	.layout-single-column {
		.composer {
			border: none !important;
		}
		.columns-area__panels__main {
			.tabs-bar__wrapper + div {
				.react-swipeable-view-container {
					div {
						scrollbar-width: none;
					}
				}
			}
		}
	}
	
	@keyframes new-posts {
		0%, 100% {
			opacity: 0.05;
		}
		50% {
			opacity: var(--max-opacity);
		}
	}
	
	@keyframes pulse {
		0% {
			background-position: 0 -100%;
		}
		70%, 100% {
			background-position: 0 110%;
		}
	}
	@keyframes compose-reveal {
		0% {
			background-position: 0 -100%;
		}
		100% {
			background-position: 0 100%;
		}
	}
}

Reviews

No reviews yet.