/* ==UserStyle== @name Mastodon Deck-Like Style (for v2.8) @namespace mizle.net @version 1.0.10 @description Apply TweetDeck style to Mastodon Web. @author Eai (https://mizle.net) @homepageURL https://github.com/eai04191/mastodon-deck-like-style/ @supportURL https://github.com/eai04191/mastodon-deck-like-style/issues @license MIT @preprocessor stylus @var checkbox isCircledAvatar "Circled Avatar." 0 @var select columns "Columns" { "Narrow": "narrow", "Medium": "medium", "Wide": "wide" } @var select fontSize "Font Size" { "Smallest": "smallest", "Small": "small", "Medium": "medium", "Large": "large", "Largest": "largest" } @var text customFontSize "Custom Font Size at CSS, 0 to Disable." 0 @var text customAvatarSize "Custom Avatar Size at PX" 36px ==/UserStyle== */ @-moz-document regexp("https://.+/web/.+") { ::-webkit-scrollbar { width: 10px; height: 11px } ::-webkit-scrollbar-track:active, ::-webkit-scrollbar-track:hover { background: transparent; } .drawer { width: 270px; } :root .drawer, .column { padding: 0; margin-right: 6px; } .column-header__button.active { background: transparent; } .status__wrapper { .status__prepend { padding-bottom: 0; span { padding-top: 1.5px; line-height: 1; } } .status { padding-left: (customAvatarSize + 20px); } .status__relative-time { margin-top: 3px; } .status__avatar { width: 44px; } } .status__avatar .account__avatar, .status__avatar .account__avatar-composite, .navigation-bar .account__avatar { width: customAvatarSize !important; height: customAvatarSize !important; background-size: customAvatarSize !important; } if isCircledAvatar { .account__avatar, .account__avatar-overlay-base, .account__avatar-overlay-overlay { border-radius: 100%; } } .display-name__html, .notification__display-name { font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Verdana, sans-serif; /* If Roboto is installed in Local, it does not become bold even if specify font-weight. */ font-weight: 700; } /* Color */ .reply-indicator__content a, .status__content a, .notification__message .fa, .icon-button.active, .column-header__button { color: #1da1f2 } .notification__favourite-icon-wrapper .star-icon, .star-icon.active { color: #fab41e; } .notification__favourite-icon-wrapper .fa-retweet, .status__prepend-icon.fa-retweet { color: #17bf63; } button.icon-button i.fa-retweet { background-image: url("data:image/svg+xml;utf8,") } button.icon-button i.fa-retweet:hover { background-image: url("data:image/svg+xml;utf8,") } /* Theme */ body.theme-default { --scrollbar-thumb-color: #657786; --scrollbar-thumb-hover-color: #8899a6; --scrollbar-track-border-color: #292f33; --background-color: #151f2a; --header-bg-color: #15202b; --header-bottom-color: #14171a; --column-bg-color: #1b2836; --item-bg-color: #15202b; --item-bottom-color: #000; --mute-text-color: #8899a6; --font-color: #e1e8ed; } body.theme-mastodon-light { --scrollbar-thumb-color: #e1e8ed; --scrollbar-thumb-hover-color: #8899a6; --scrollbar-track-border-color: #e1e8ed; --background-color: #e1e8ed; --header-bg-color: #f5f8fa; --header-bottom-color: #e1e8ed; --column-bg-color: #fff; --item-bg-color: #fff; --item-bottom-color: #e1e8ed; --mute-text-color: #8899a6; --font-color: #292f33; } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 5px; } ::-webkit-scrollbar-thumb:active, ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-color); } ::-webkit-scrollbar-track { border-left: 1px solid var(--scrollbar-track-border-color); } .columns-area { background: var(--background-color); } .column-header, .column-header__back-button, .column-header__button { background-color: var(--header-bg-color); } .column-header__collapsible-inner { background: var(--header-bg-color); border-bottom: 1px solid var(--item-bottom-color) } .column > .scrollable { background-color: var(--column-bg-color); } .account, .column-header, .status, .status__wrapper--filtered, .load-gap { border-bottom: 1px solid var(--item-bottom-color); } .column-header { border-bottom: 1px solid var(--header-bottom-color); } .getting-started, .detailed-status { .detailed-status__display-name span { color: var(--mute-text-color); } background: var(--item-bg-color); } .detailed-status__action-bar { background: var(--item-bg-color); border-top: 1px solid var(--item-bottom-color); border-bottom: 1px solid var(--item-bottom-color); } .item-list article { background: var(--item-bg-color); } .column-back-button { line-height: inherit; background-color: var(--header-bg-color); border-bottom: 1px solid var(--item-bottom-color); } .status__wrapper { .status__display-name, .status__prepend .status__display-name strong, /* Boosted user name */ .status__prepend > span, /* "xxx boosted" */ .status__relative-time { color: var(--mute-text-color); } } body { color: var(--font-color); } /* Columns */ if columns==narrow { .column { width: 270px; } } if columns==medium { .column { width: 310px; } } if columns==wide { .column { width: 350px; } } /* Font Size */ if customFontSize { :root { font-size: customFontSize; } } else { if fontSize==smallest { :root { font-size: 12px; } } if fontSize==small { :root { font-size: 13px; } } if fontSize==medium { :root { font-size: 14px; } } if fontSize==large { :root { font-size: 15px; } } if fontSize==largest { :root { font-size: 16px; } } } .reply-indicator__content, .status__content, .status__info, .status__prepend > span, /* "xxx boosted" */ .detailed-status__display-name strong, .notification__message, .status__content__read-more-button, .notification__relative_time { font-size: 1rem; line-height: 1.28578em; } .detailed-status { .status__content { font-size: 1.28571rem; } .detailed-status__display-name strong { line-height: 1.2; } .detailed-status__display-name span { line-height: 1.28578; } .detailed-status__meta { font-size: 1rem; } } .reply-indicator__content .emojione, .status__content .emojione { width: 1.3rem; height: 1.3rem; } .display-name__account, .status__relative-time { font-size: .8571rem; line-height: 1; } }