2023-07-29 00:12:04 +02:00
/ * Mastodon Bird UI by @ rolle @ mementomori . social
2023-08-27 22:11:08 +02:00
1 . 6 . 4 * /
2023-07-29 00:12:04 +02:00
/* CSS variables */
: root {
/* Brand colors */
--color-brand-twitter : #1d9bf0 ;
--color-brand-twitter-bg : #15202b ;
--color-brand-twitter-dim : #8b98a5 ;
--color-brand-twitter-mud : #273340 ;
--color-brand-twitter-dark : #232543 ;
--color-brand-twitter-threaded-line : #425364 ;
--color-brand-mastodon : #595aff ;
--color-brand-mastodon-links : #8c8dff ;
--color-brand-mastodon-bg : #1e2028 ;
--color-brand-mastodon-dim : #717c9b ;
--color-brand-mastodon-mud : #272c40 ;
--color-brand-mastodon-dark : #232543 ;
--color-brand-mastodon-threaded-line : #434264 ;
--color-brand-mastodon-text-light : #8493a7 ;
/* Colors */
/ * Note : Remember to search for the DIM hex
and replace it inside the SVG icons if you decide to change it * /
--color-bg : var ( -- color - brand-mastodon-bg ) ;
--color-bg-75 : #1e2028 bf ;
--color-fg : #fff ;
--color-border : #38384d ;
--color-dim : var ( -- color - brand-mastodon-dim ) ;
--color-accent : var ( -- color - brand-mastodon-links ) ;
--color-accent-dark : var ( -- color - brand-mastodon ) ;
--color-green : #00ba7c ;
--color-red : #f91880 ;
--color-red-75 : #f91880 bf ;
--color-yellow : #ffac33 ;
--color-light-shade : #ffffff 05 ;
--color-focusable-toot : #ffffff 09 ;
--color-light-text : #f7f9f9 ;
--color-mud : var ( -- color - brand-mastodon-mud ) ;
--color-black-coral : #5a5371 ;
--color-profile-button-hover : #f1eff4 1 a ;
--color-column-link-hover : #f7f7f9 1 a ;
--color-modal-overlay : #5b7083 66 ;
--color-dark : var ( -- color - brand-mastodon-dark ) ;
--color-thread-line : var ( -- color - brand-mastodon-threaded-line ) ;
--color-gainsboro : #dcd9e8 ;
--color-light-purple : #9baec8 ;
--color-lighter-purple : #a5b8d3 ;
--color-dark-electric-blue : #576078 ;
--color-button-text : #f7f9f9 ;
--color-ghost-button-text : var ( -- color - button - text ) ;
--color-verified : #79bd9a ;
--color-destructive : #df405a ;
--color-light-fuchsia-pink : #ff8cfd ;
--color-hashtag : var ( -- color - accent ) ;
--color-mention : var ( -- color - accent ) ;
--color-link : var ( -- color - accent ) ;
/* In the original UI this color is lighten($ui-base-color, 12%) */
--color-outer-space : #42485a ;
/* Font related */
--font-stack : system-ui , - apple-system , BlinkMacSystemFont , avenir next , avenir , segoe ui , Inter , helvetica neue , helvetica , Cantarell , Ubuntu , roboto , not o , arial , sans-serif , ' Apple Color Emoji ' , ' Segoe UI Emoji ' , ' Segoe UI Symbol ' , ' Noto Color Emoji ' ;
--font-size : 15 px ;
--font-size-smaller : 13 px ;
--font-size-12 : 12 px ;
--font-size-mid : 14 px ;
--font-size-bigger : 17 px ;
--font-size-heading : 20 px ;
--font-weight-bold : 700 ;
--line-height : 22 px ;
--line-height-mid : 20 px ;
/* Grids and gaps */
--gap-default : 12 px ;
/* Element sizes */
--size-avatar : 48 px ;
--size-avatar-small : 32 px ;
--size-icon-notification : 30 px ;
--width-main-panel : 600 px ;
--width-side-panel : 260 px ;
--border-radius : 16 px ;
--border-radius-badges : 4 px ;
--badges-distance-from-edge : 12 px ;
/* Misc */
--active-header-box-shadow : 0 1 px 0 rgba ( 140 , 141 , 255 , .3 ) ;
--active-header-radial-gradient : radial-gradient ( ellipse , rgba ( 99 , 100 , 255 , .23 ) 0 , rgba ( 99 , 100 , 255 , 0 ) 60 % ) ;
--compose-form-linear-gradient : linear-gradient ( 180 deg , rgba ( 30 , 32 , 40 , 1 ) 0 % , rgba ( 30 , 32 , 40 , 1 ) 53 % , rgba ( 30 , 32 , 40 , 0 .8141631652661064 ) 76 % , rgba ( 30 , 32 , 40 , 0 .7077205882352942 ) 87 % , rgba ( 30 , 32 , 40 , 0 .458420868347339 ) 97 % , rgba ( 30 , 32 , 40 , 0 ) 100 % ) ;
/* Logo */
--logo : url( 'data:image/svg+xml, %3Csvg class="mastodon-logo" xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" viewBox="0 0 216.4144 232.00976"%3E%3Cdefs xmlns="http://www.w3.org/2000/svg"%3E%3ClinearGradient xmlns="http://www.w3.org/2000/svg" id="gradient" x2="0%25" y2="100%25" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0%25" stop-color="%23595aff"%3E%3C/stop%3E%3Cstop offset="100%25" stop-color="%23595aff"%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns="http://www.w3.org/2000/svg" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="url(%23gradient ) " %3E%3C/path%3E%3Cpath d= " M177 .50984 80 .077 v 60 .94125 h - 24 .14375 v - 59 .15 c 0 - 12 .46875 - 5 .24625 - 18 .7975 - 15 .74 - 18 .7975 - 11 .6025 0 - 17 .4175 7 .5075 - 17 .4175 22 .3525 v 32 .37625 H 96 .20734 V 85 .42325 c 0 - 14 .845 - 5 .81625 - 22 .3525 - 17 .41875 - 22 .3525 - 10 .49375 0 - 15 .74 6 .32875 - 15 .74 18 .7975 v 59 .15 H 38 .90484 V 80 .077 c 0 - 12 .455 3 .17125 - 22 .3525 9 .54125 - 29 .675 6 .56875 - 7 .3225 15 .17125 - 11 .07625 25 .85 - 11 .07625 12 .355 0 21 .71125 4 .74875 27 .8975 14 .2475 l 6 .01375 10 .08125 6 .015 - 10 .08125 c 6 .185 - 9 .49875 15 .54125 - 14 .2475 27 .8975 - 14 .2475 10 .6775 0 19 .28 3 .75375 25 .85 11 .07625 6 .36875 7 .3225 9 .54 17 .22 9 .54 29 .675 " fill= " % 23 fff " %3E%3C/path%3E%3C/svg%3E');
/* Icons */
--icon-follow-hashtag : url( 'data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23717c9b" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23717c9b" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23717c9b" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E' ) ;
--icon-unfollow-hashtag : url( 'data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E' ) ;
--icon-boost : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-active : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-status : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-status-prepend : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E' ) ;
--icon-boost-notification-filter-bar : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-notification-filter-bar-active : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f9f9' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-notification-wrapper : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-reply-nofitication-filter-bar-active : url( 'data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23f7f9f9" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%23f7f9f9" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A' ) ;
--icon-reply : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-reply-detailed-status-action-bar : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-reply-detailed-status-action-bar-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-reply-conversation : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-share-detailed-status-action-bar : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-share-detailed-status-action-bar-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar-active : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-column-link : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-column-link-active : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f7f9f9" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-reply-status-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-list : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E' ) ;
--icon-share : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-share-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-heart : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E" ) ;
--icon-heart-hover : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E" ) ;
--icon-heart-active : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23f7f9f9'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-heart-active-red : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-heart-notification : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-star-column-link : url( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-star-column-link-active : url( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-star-notification : url( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-star-active : ' \f005 ' ;
--icon-heart-column-link : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f9f9' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E" ) ;
--icon-heart-column-link-active : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23f7f9f9'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-direct-messages : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E' ) ;
--icon-direct-messages-active : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23f7f9f9" stroke="%23232543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E' ) ;
--icon-users-column-link : url( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23f7f9f9" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-users-column-link-active : url( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23f7f9f9" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23f7f9f9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-status-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-status-hover-red : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-active : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bell : url( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-active : url( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-header-tabs : url( 'data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-header-tabs-active : url( 'data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-home-notification : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E' ) ;
--icon-home-notification-active : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E' ) ;
--icon-home : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E' ) ;
--icon-globe : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E' ) ;
--icon-home-column-link-active : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E' ) ;
--icon-hashtag : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E' ) ;
--icon-hashtag-active : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E' ) ;
--icon-star : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23717c9b" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A' ) ;
--icon-star-hover : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A' ) ;
--icon-search : url( "data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23535C76' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E" ) ;
}
/* High Contrast theme */
body . theme-elephant-contrast . layout-single-column {
--color-dim : #b8b3c0 ;
/* Icons */
--icon-follow-hashtag : url( 'data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23b8b3c0" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23b8b3c0" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23b8b3c0" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E' ) ;
--icon-boost : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-status : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-notification-filter-bar : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-reply : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-reply-detailed-status-action-bar : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-share-detailed-status-action-bar : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8b3c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-share : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8b3c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-heart : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E" ) ;
--icon-home-notification : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23b8b3c0" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23b8b3c0" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E' ) ;
--icon-star : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23b8b3c0" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A' ) ;
}
/* Light theme */
body . theme-elephant-light . layout-single-column {
--color-bg : #fff ;
--color-fg : #000 ;
--color-border : #e6e1ed ;
--color-dim : #9388a6 ;
--color-green : #17bf63 ;
--color-red : #e0245e ;
--color-red-75 : #e0245e bf ;
--color-light-shade : #000000 05 ;
--color-focusable-toot : rgba ( 0 , 0 , 0 , 0 .035 ) ;
--color-light-text : #1f1b23 ;
--color-mud : #e5e1ed ;
--color-black-coral : #9188a6 ;
--color-profile-button-hover : #1e1b23 1 a ;
--color-column-link-hover : #1e1b23 1 a ;
--color-modal-overlay : #6a5b83 66 ;
--color-dark : #f7f9f9 ;
--color-thread-line : #e1e8ed ;
--color-gainsboro : #8899a6 ;
--color-light-purple : #9588a6 ;
--color-dark-electric-blue : #9088a6 ;
--color-bg-75 : #ffffff bf ;
--color-accent : var ( -- color - accent-dark ) ;
--color-accent-dark-50 : #595aff 80 ;
--color-ghost-button-text : var ( -- color - accent-dark ) ;
/* Misc */
--compose-form-linear-gradient : linear-gradient ( 180 deg , rgba ( 255 , 255 , 255 , 1 ) 0 % , rgba ( 255 , 255 , 255 , 1 ) 53 % , rgba ( 255 , 255 , 255 , 0 .8141631652661064 ) 76 % , rgba ( 255 , 255 , 255 , 0 .7077205882352942 ) 87 % , rgba ( 255 , 255 , 255 , 0 .458420868347339 ) 97 % , rgba ( 255 , 255 , 255 , 0 ) 100 % ) ;
/* Icons for light theme */
--icon-boost : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-active : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-status : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-status-prepend : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E' ) ;
--icon-boost-notification-filter-bar : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-notification-filter-bar-active : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231f1b23' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-boost-notification-wrapper : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E" ) ;
--icon-reply-nofitication-filter-bar-active : url( 'data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%231f1b23" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%231f1b23" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A' ) ;
--icon-reply : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-reply-detailed-status-action-bar : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-reply-detailed-status-action-bar-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-reply-conversation : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-share-detailed-status-action-bar : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-share-detailed-status-action-bar-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-detailed-status-action-bar-active : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark-column-link : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-column-link-active : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231f1b23" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-reply-status-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-list : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E' ) ;
--icon-share : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-share-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E" ) ;
--icon-heart : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E" ) ;
--icon-heart-hover : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E" ) ;
--icon-heart-active : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%231f1b23'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-heart-notification : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-heart-column-link : url( "data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231f1b23' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E" ) ;
--icon-heart-column-link-active : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%231f1b23'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-star-column-link : url( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-star-column-link-active : url( 'data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-direct-messages : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E' ) ;
--icon-direct-messages-active : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%231f1b23" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E' ) ;
--icon-users-column-link : url( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%231f1b23" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%231f1b23" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-users-column-link-active : url( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%231f1b23" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%231f1b23" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%231f1b23" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-status-hover : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bookmark : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bookmark-active : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ) ;
--icon-bell : url( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-active : url( 'data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-header-tabs : url( 'data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-bell-header-tabs-active : url( 'data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E' ) ;
--icon-home-notification : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E' ) ;
--icon-home-notification-active : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E' ) ;
--icon-home : url( 'data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E' ) ;
--icon-globe : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E' ) ;
--icon-home-column-link-active : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E' ) ;
--icon-hashtag : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E' ) ;
--icon-hashtag-active : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E' ) ;
--icon-search : url( "data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239FA4BB' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E" ) ;
}
/* Vars on iPad, landscape */
@media ( min-width : 1175 px ) and ( max-width : 1260 px ) {
: root {
--width-main-panel : 500 px ;
--width-side-panel : 265 px ;
}
}
/* Vars in mobile */
@media ( max-width : 500 px ) {
: root {
--font-size : 16 px ;
--line-height : 1 .4 ;
--font-size-heading : 17 px ;
--badges-distance-from-edge : 10 px ;
}
/* Hide scrollbar on mobile, since we can't pick the handle anyway */
. layout-single-column : : -webkit-scrollbar {
display : none ;
}
}
/* Search popout offset */
. layout-single-column . search__popout ,
. layout-single-column . search-popout {
left : calc ( 30 px / 2 ) ;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
max-width : calc ( 100 % - 30 px ) !important ;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
width : calc ( 100 % - 30 px ) !important ;
}
body . embed ,
body . layout-single-column {
background-color : var ( -- color - bg ) ;
color : var ( -- color - fg ) ;
font-family : var ( -- font-stack ) ;
}
. layout-single-column . ui {
display : flex ;
width : 100 % ;
}
/* Fix weird horizontal overflow */
@media ( min-width : 1175 px ) and ( max-width : 1330 px ) {
. layout-single-column . ui {
width : unset ;
}
}
/* Text color */
. layout-single-column . account__header__tabs__name h1 ,
. layout-single-column . account__header__bio . account__header__content ,
. layout-single-column . reply-indicator__content ,
. layout-single-column . status__content {
color : var ( -- color - fg ) ;
}
/* Link color variants */
. layout-single-column . status-link . hashtag {
color : var ( -- color - hashtag ) ;
}
. layout-single-column . status-link . mention : not ( . hashtag ) {
color : var ( -- color - mention ) ;
}
/* stylelint-disable-next-line */
. layout-single-column . status-link . mention : not ( . hashtag ) : not ( . mention ) {
color : var ( -- color - link ) ;
}
/* Logo */
. layout-single-column . ui__header__logo ,
. layout-single-column . column-link . column-link--logo {
background-image : var ( -- logo ) ;
background-position : center ;
background-repeat : no-repeat ;
background-size : 32 px auto ;
height : 50 px ;
padding : 0 ;
width : 50 px ;
}
2023-08-27 22:11:08 +02:00
. layout-single-column . ui__header__logo img ,
2023-07-29 00:12:04 +02:00
. layout-single-column . ui__header__logo svg {
display : none ;
}
/* Things that should have the default font-size */
. layout-single-column . notification__message ,
. layout-single-column . account__header__tabs__name h1 small ,
. layout-single-column . button ,
. layout-single-column . status__content__read-more-button ,
. layout-single-column . status__prepend ,
. layout-single-column . status__info ,
. layout-single-column . status__relative-time ,
. layout-single-column . status__info . status__display-name ,
. layout-single-column . account__section-headline a ,
. layout-single-column . account__section-headline button ,
. layout-single-column . notification__filter-bar a ,
. layout-single-column . notification__filter-bar button {
font-size : var ( -- font-size ) ;
line-height : var ( -- line - height ) ;
}
/* Things that should have the mid font-size */
. layout-single-column . account__header__extra__links ,
2023-08-27 22:11:08 +02:00
. layout-single-column . columns-area__panels__pane--compositional . account__header__account-note textarea ,
2023-07-29 00:12:04 +02:00
. layout-single-column . account__header__content ,
2023-08-27 22:11:08 +02:00
. layout-single-column . columns-area__panels__pane--compositional . compose-form . autosuggest-textarea__textarea ,
. layout-single-column . columns-area__panels__pane--compositional . compose-form . spoiler-input__input {
2023-07-29 00:12:04 +02:00
font-size : var ( -- font-size-mid ) ;
line-height : var ( -- line - height-mid ) ;
}
/* Exceptions */
. layout-single-column . account__header__content {
line-height : 18 px ;
}
/* Things that will have even smaller font size */
. layout-single-column . account__header__account-note label {
font-size : var ( -- font-size-12 ) ;
}
/* Line heights */
. layout-single-column . reply-indicator__content ,
. layout-single-column . status__content {
line-height : var ( -- line - height ) ;
}
/* Modal overlay */
. layout-single-column . modal-root__overlay {
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
background-color : var ( -- color - modal-overlay ) !important ;
/* stylelint-disable-next-line */
color : var ( -- color - light - text ) !important ;
}
. layout-single-column . modal-root__modal . display-name strong ,
. layout-single-column . modal-root__modal . status__content {
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
color : var ( -- color - light - text ) !important ;
}
/* Hide footer buttons in modals */
. layout-single-column . media-modal__overlay . picture-in-picture__footer {
display : none ;
}
/* Report modal */
. layout-single-column . report-dialog-modal . poll__option . dialog-option > . poll__option__text {
display : grid ;
gap : 6 px ;
}
. layout-single-column . media-modal__navigation . fa-times : : before {
content : url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249 ) ' aria-hidden= ' true ' class= ' r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03 ' %3E%3Cg%3E%3Cpath d= ' M10 .59 12 L 4 .54 5 .96 l 1 .42 - 1 .42 L 12 10 .59 l 6 .04 - 6 .05 1 .42 1 .42 L 13 .41 12 l 6 .05 6 .04 - 1 .42 1 .42 L 12 13 .41 l - 6 .04 6 .05 - 1 .42 - 1 .42 L 10 .59 12 z ' %3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
/* List adder input */
. layout-single-column . list-editor input . setting-text ,
. layout-single-column . list-adder input . setting-text {
background-color : transparent ;
border-color : var ( -- color - black - coral ) ;
height : 38 px ;
}
. layout-single-column . list-editor . column-inline-form button ,
. layout-single-column . list-adder . column-inline-form button ,
. layout-single-column . list-editor . column-inline-form button : : before {
min-height : 38 px ;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
width : 100 % !important ;
}
. layout-single-column . list-editor__search {
padding : 15 px ;
}
. layout-single-column . embed-modal . embed-modal__container . embed-modal__html {
color : var ( -- color - light - text ) ;
}
. layout-single-column . embed-modal . embed-modal__container . embed-modal__html ,
. layout-single-column . list-editor__search . search__input {
background-color : transparent ;
border-color : var ( -- color - black - coral ) ;
height : 38 px ;
}
. layout-single-column . list-editor . drawer__inner . backdrop {
box-shadow : 2 px 4 px 15 px rgba ( 0 , 0 , 0 , .2 ) ;
}
. layout-single-column . list-editor__search . search__icon . fa {
margin : 15 px ;
}
. layout-single-column . list-editor . list__display-name ,
. layout-single-column . list-adder . list__display-name {
display : flex ;
gap : var ( -- gap-default ) ;
}
. layout-single-column . list__display-name . fa-list-ul : : before {
top : - 2 px ;
}
2023-08-27 22:11:08 +02:00
/* Bigger preview cards */
. layout-single-column . status-card ,
. layout-single-column . status-card . compact {
2023-07-29 00:12:04 +02:00
background-color : var ( -- color - bg ) ;
2023-08-27 22:11:08 +02:00
border : 1 px solid var ( -- color - border ) ;
2023-07-29 00:12:04 +02:00
border-radius : var ( -- border-radius ) ;
display : block ;
2023-08-27 22:11:08 +02:00
transition : all 200 ms ;
}
/* Hide empty YouTube description */
. layout-single-column . status-card__description : empty {
display : none ;
}
. layout-single-column . status-card : focus ,
. layout-single-column . status-card : hover {
background-color : rgba ( 255 255 255 / .03 ) ;
2023-07-29 00:12:04 +02:00
}
. layout-single-column . fa-file-text : : before {
content : " " ;
}
2023-08-27 22:11:08 +02:00
. layout-single-column . status-card . status-card__image-image ,
. layout-single-column . status-card . status-card__image-image . compact {
2023-07-29 00:12:04 +02:00
border-radius : 0 ;
}
2023-08-27 22:11:08 +02:00
. layout-single-column . status-card . status-card__content ,
. layout-single-column . status-card . compact . status-card__content {
2023-07-29 00:12:04 +02:00
padding : 15 px ;
}
2023-08-27 22:11:08 +02:00
. layout-single-column . status-card . status-card__title ,
. layout-single-column . status-card . compact . status-card__title {
2023-07-29 00:12:04 +02:00
color : var ( -- color - fg ) ;
font-size : 18 px ;
font-weight : 400 ;
line-height : 1 .3 ;
margin-bottom : 10 px ;
white-space : inherit ;
}
2023-08-27 22:11:08 +02:00
. layout-single-column . status-card . status-card__host ,
. layout-single-column . status-card . compact . status-card__host {
2023-07-29 00:12:04 +02:00
color : var ( -- color - dim ) ;
font-size : var ( -- font-size-mid ) ;
margin-bottom : 5 px ;
margin-top : 0 ;
}
/* Announcements */
. layout-single-column . announcements__pagination . fa ,
. layout-single-column . announcements__pagination {
color : var ( -- color - dim ) ;
}
. layout-single-column . announcements__pagination . icon-button : hover i {
color : var ( -- color - light - purple ) ;
}
/* Dark panels like modals and boxes */
. layout-single-column . about__meta ,
. layout-single-column . about__section__title ,
. layout-single-column . announcements ,
. layout-single-column . report-dialog-modal ,
. layout-single-column . report-modal__target ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions ,
. layout-single-column . privacy-dropdown__dropdown ,
. layout-single-column . drawer__backdrop ,
. layout-single-column . list-editor__account ,
. layout-single-column . list-editor ,
. layout-single-column . list-editor__lists ,
. layout-single-column . list-adder__account ,
. layout-single-column . list-adder ,
. layout-single-column . list-adder__lists ,
. layout-single-column . dropdown-menu__arrow : : before ,
. layout-single-column . dropdown-menu ,
. layout-single-column . dropdown-menu__item a ,
. layout-single-column . dropdown-menu__item button ,
. layout-single-column . emoji-mart-category-label span ,
. layout-single-column . emoji-mart-bar : first-child ,
. layout-single-column . emoji-picker-dropdown__menu ,
. layout-single-column . privacy-dropdown . active . privacy-dropdown__value ,
. layout-single-column . emoji-mart-search input ,
. layout-single-column . emoji-mart-scroll ,
. layout-single-column . emoji-mart-search ,
. layout-single-column . follow_requests-unlocked_explanation ,
. layout-single-column . dismissable-banner ,
. layout-single-column . block-modal__action-bar ,
. layout-single-column . boost-modal__action-bar ,
. layout-single-column . confirmation-modal__action-bar ,
. layout-single-column . mute-modal__action-bar ,
. layout-single-column . setting-text__wrapper ,
. layout-single-column . setting-text ,
. layout-single-column . report-modal__comment ,
. layout-single-column . report-modal__container ,
. layout-single-column . actions-modal ,
. layout-single-column . block-modal ,
. layout-single-column . boost-modal ,
. layout-single-column . compare-history-modal ,
. layout-single-column . confirmation-modal ,
. layout-single-column . mute-modal ,
. layout-single-column . report-modal ,
. layout-single-column . column-header__collapsible-inner {
background-color : var ( -- color - dark ) ;
border-color : var ( -- color - dark ) ;
color : var ( -- color - light - text ) ;
}
/* Has dark 1px border */
. layout-single-column . dismissable-banner {
border : 1 px solid var ( -- color - dark ) ;
}
/* More subtle box-shadow for dropdown-menu */
. layout-single-column . search-popout ,
. layout-single-column . search__popout ,
. layout-single-column . dropdown-menu {
box-shadow : 2 px 4 px 16 px rgb ( 0 0 0 / .01 ) ;
}
/* Autosuggest box shadow reset */
. layout-single-column . search-popout ,
. layout-single-column . search__popout ,
. layout-single-column . dropdown-menu ,
. layout-single-column . emoji-picker-dropdown__menu ,
. layout-single-column . compose-form . compose-form__warning ,
. layout-single-column . privacy-dropdown . active . privacy-dropdown__value ,
. layout-single-column . privacy-dropdown__dropdown ,
. layout-single-column . language-dropdown__dropdown ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions {
box-shadow : none ;
}
/* Composer form warnings */
. layout-single-column . compose-form . compose-form__warning {
background-color : var ( -- color - light - purple ) ;
color : var ( -- color - bg ) ;
}
/* Content warning placeholder */
. layout-single-column . compose-form . autosuggest-textarea__textarea : : placeholder ,
. layout-single-column . compose-form . spoiler-input__input : : placeholder {
color : var ( -- color - dim ) ;
}
/* Border colors */
. layout-single-column . account__header__bar ,
. layout-single-column . about__meta__divider ,
. layout-single-column . poll__footer ,
. layout-single-column . report-dialog-modal . poll__option . dialog-option ,
. layout-single-column . account ,
. layout-single-column . report-dialog-modal__container ,
. layout-single-column . dropdown-menu__item . edited-timestamp__history__item ,
. layout-single-column . dropdown-menu__container__header ,
. layout-single-column . compare-history-modal . report-modal__target ,
. layout-single-column . account__section-headline ,
. layout-single-column . detailed-status__action-bar ,
. layout-single-column . column-back-button ,
. layout-single-column . column-header ,
. layout-single-column . audio-player ,
. layout-single-column . video-player ,
. layout-single-column . media-gallery ,
. layout-single-column . compose-form . spoiler-input__input ,
. layout-single-column . compose-form__autosuggest-wrapper ,
. layout-single-column . compose-form__poll-wrapper ,
. layout-single-column . compose-form__poll-wrapper select ,
. layout-single-column . poll__option input [ type = " text " ] ,
. layout-single-column . report-dialog-modal__textarea ,
. layout-single-column . search__input ,
. layout-single-column . setting-text ,
. layout-single-column . dropdown-menu__separator ,
. layout-single-column . status ,
. layout-single-column . emoji-mart-search input ,
. layout-single-column . conversation ,
. layout-single-column . setting-text__wrapper {
border-color : var ( -- color - border ) ;
}
/* Change panel order */
. layout-single-column . columns-area__panels__pane {
order : 3 ;
}
. layout-single-column . columns-area__panels__main {
order : 2 ;
}
. layout-single-column . columns-area__panels__pane . columns-area__panels__pane--start . columns-area__panels__pane--navigational {
order : 1 ;
}
. layout-single-column . columns-area__panels__pane ,
. layout-single-column . columns-area__panels__pane__inner ,
. layout-single-column . compose-panel {
min-width : var ( -- width - side-panel ) ;
width : var ( -- width - side-panel ) ;
}
. layout-single-column . columns-area__panels__pane--compositional {
flex-grow : 1 ;
height : 100 vh ;
max-width : 350 px ;
overflow : visible ;
position : sticky ;
top : 0 ;
}
. layout-single-column . columns-area__panels__pane--compositional . columns-area__panels__pane__inner {
position : static ;
}
. layout-single-column . columns-area__panels__pane--compositional . columns-area__panels__pane__inner ,
. compose-panel {
/* stylelint-disable-next-line */
width : 100 % !important ;
}
. layout-single-column . search {
margin-inline : 10 px ;
}
/* stylelint-disable-next-line */
@media ( min-width : 1175 px ) {
. layout-single-column . columns-area__panels__main {
max-width : calc ( var ( -- width - main-panel ) + calc ( var ( -- gap-default ) * 4 )) ;
padding-left : calc ( var ( -- gap-default ) * 2 ) ;
padding-right : calc ( var ( -- gap-default ) * 2 ) ;
}
. layout-single-column . navigation-panel {
margin-right : - 20 px ;
/* stylelint-disable-next-line */
padding-left : 0 !important ;
padding-right : 20 px ;
}
}
. layout-single-column . emoji-mart-anchor-bar ,
. layout-single-column . column-link . column-link--logo svg {
display : none ;
}
/* Accented items like links */
. layout-single-column . about__section__title ,
. layout-single-column . account__header__bio . account__header__fields a ,
. layout-single-column . column-back-button ,
. layout-single-column . emoji-mart-anchor . emoji-mart-anchor-selected ,
. layout-single-column . text-icon-button . active ,
. layout-single-column . empty-column-indicator a ,
. layout-single-column . follow_requests-unlocked_explanation a ,
. layout-single-column . column-header__back-button ,
. layout-single-column . link-button ,
. layout-single-column . reply-indicator__content a . unhandled-link ,
. layout-single-column . status__content a . unhandled-link ,
. layout-single-column . column-header > . column-header__back-button ,
. layout-single-column . reply-indicator__content a ,
body . embed . status__content a ,
. layout-single-column . status__content a ,
. layout-single-column . column-link--transparent . active ,
. layout-single-column . status__content__read-more-button {
color : var ( -- color - accent ) ;
}
/* Toggles */
. layout-single-column . react-toggle . react-toggle-track {
background-color : var ( -- color - bg ) ;
}
/* Accented background colors */
. layout-single-column . react-toggle--checked . react-toggle-track ,
. layout-single-column . language-dropdown__dropdown__results__item . active ,
. layout-single-column . icon-with-badge__badge ,
. layout-single-column . button {
background-color : var ( -- color - accent-dark ) ;
}
. layout-single-column . block-modal__cancel-button ,
. layout-single-column . confirmation-modal__cancel-button ,
. layout-single-column . confirmation-modal__secondary-button ,
. layout-single-column . mute-modal__cancel-button {
background-color : transparent ;
color : var ( -- color - dim ) ;
font-size : var ( -- font-size-mid ) ;
}
. layout-single-column . block-modal__cancel-button : focus ,
. layout-single-column . confirmation-modal__cancel-button : focus ,
. layout-single-column . confirmation-modal__secondary-button : focus ,
. layout-single-column . mute-modal__cancel-button : focus ,
. layout-single-column . block-modal__cancel-button : hover ,
. layout-single-column . confirmation-modal__cancel-button : hover ,
. layout-single-column . confirmation-modal__secondary-button : hover ,
. layout-single-column . mute-modal__cancel-button : hover {
background-color : transparent ;
color : var ( -- color - dark - electric-blue ) ;
}
. column-link--transparent . icon-with-badge__badge ,
. layout-single-column . icon-with-badge__badge {
background-color : var ( -- color - accent-dark ) ;
border-color : var ( -- color - bg ) ;
}
/* Accented strokes */
. layout-single-column . trends__item__sparkline path : last-child {
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
stroke : var ( -- color - accent ) !important ;
}
/* Mud background colors */
. layout-single-column . reply-indicator {
background-color : var ( -- color - mud ) ;
color : var ( -- color - light - text ) ;
}
/* Dropdown hovers */
. layout-single-column . language-dropdown__dropdown__results__item : hover ,
. layout-single-column . language-dropdown__dropdown__results__item : focus {
background-color : var ( -- color - accent-dark-50 ) ;
color : var ( -- color - light - text ) ;
}
/* Accented border colors */
. layout-single-column . notification . unread : : before ,
. layout-single-column . status__wrapper . unread : : before {
border-color : var ( -- color - accent ) ;
display : none ;
}
/* Unread message */
. layout-single-column . conversation--unread ,
. layout-single-column . notification . unread : hover ,
. layout-single-column . notification . unread ,
. layout-single-column . status__wrapper . unread {
background-color : var ( -- color - dark ) ;
}
. layout-single-column . notification : hover . notification__message {
background-color : transparent ;
}
/* Things like notification status update text that should be dim */
/* stylelint-disable-next-line selector-not-notation */
. layout-single-column . notification . status-link . mention : not ( . hashtag ) : not ( . mention ) ,
. layout-single-column . notification . status-link . hashtag ,
. layout-single-column . notification . status-link . mention : not ( . hashtag ) ,
. layout-single-column . compose-form . autosuggest-textarea__textarea : : placeholder ,
. layout-single-column . compose-form . icon-button ,
. layout-single-column . compose-form . spoiler-input__input : : placeholder ,
. layout-single-column . compose-form__poll-wrapper . button . button-secondary ,
. layout-single-column . language-dropdown__dropdown__results__item__common-name ,
. layout-single-column . poll__link ,
. layout-single-column . muted . poll ,
. layout-single-column . status . status__relative-time ,
. layout-single-column . status . status__visibility-icon ,
. layout-single-column . block-modal__action-bar > div ,
. layout-single-column . boost-modal__action-bar > div ,
. layout-single-column . confirmation-modal__action-bar > div ,
. layout-single-column . mute-modal__action-bar > div ,
. layout-single-column . search-popout > h4 ,
. layout-single-column . search__popout > h4 ,
. layout-single-column . status-check-box__status . detailed-status__display-name ,
. layout-single-column . report-dialog-modal . poll__option . dialog-option > . poll__option__text ,
. layout-single-column . status-card . status-card__description ,
. layout-single-column . status-card . compact . status-card__description ,
. layout-single-column . report-dialog-modal . dialog-option . poll__input ,
. layout-single-column . dropdown-menu__container__header ,
. layout-single-column . sign-in-banner p ,
. layout-single-column . navigation-bar > a ,
. layout-single-column . character-counter ,
. layout-single-column . text-icon-button ,
. layout-single-column . empty-column-indicator ,
. layout-single-column . follow_requests-unlocked_explanation ,
. layout-single-column . poll__footer ,
. layout-single-column . server-banner h4 ,
. layout-single-column . column-header__button ,
. layout-single-column . search__icon . fa-times-circle ,
. layout-single-column . timeline-hint ,
. layout-single-column . status__display-name . muted ,
. layout-single-column . setting-text-label ,
. layout-single-column . account__header__bio . account__header__fields dt ,
. layout-single-column . account__header__bio . account__header__fields dd ,
. layout-single-column . link-footer p ,
. layout-single-column . account__header__extra__links a ,
. layout-single-column . trends__item__current ,
. layout-single-column . emoji-mart-anchor ,
. layout-single-column . emoji-mart ,
. layout-single-column . emoji-mart-anchors ,
. layout-single-column . reply-indicator . display-name * ,
. layout-single-column . status__display-name ,
. layout-single-column . status__prepend . status__display-name strong ,
. layout-single-column . status__prepend ,
. layout-single-column . compose-form . compose-form__modifiers ,
. layout-single-column . compose-form . autosuggest-textarea__textarea ,
. layout-single-column . compose-form . spoiler-input__input ,
. layout-single-column . autosuggest-textarea__suggestions ,
. layout-single-column . compose-form . autosuggest-account . display-name__account ,
. layout-single-column . compose-panel . compose-form__autosuggest-wrapper ,
. layout-single-column . compose-form . compose-form__buttons-wrapper ,
. layout-single-column . account__section-headline a ,
. layout-single-column . account__section-headline button ,
. layout-single-column . notification__filter-bar a ,
. layout-single-column . notification__filter-bar button ,
. layout-single-column . attachment-list . compact . fa ,
. layout-single-column . attachment-list__list a ,
. layout-single-column . notification__message . fa-user-plus ,
. layout-single-column . notification__message . fa-home ,
. layout-single-column . notification__message . fa-retweet ,
. layout-single-column . link-footer p a ,
. layout-single-column . trends__item__name ,
. layout-single-column . muted . status__content ,
. layout-single-column . muted . status__content a ,
. layout-single-column . muted . status__content p ,
2023-08-27 22:11:08 +02:00
. layout-single-column . muted . status__display-name strong ,
. layout-single-column . privacy-dropdown__option : not ( . active ) . privacy-dropdown__option__content {
2023-07-29 00:12:04 +02:00
color : var ( -- color - dim ) ;
}
/* Dim backgrounds */
. layout-single-column . poll__chart {
background-color : var ( -- color - dim ) ;
}
/* Lighter border colors */
. layout-single-column . report-dialog-modal . dialog-option . poll__input ,
. layout-single-column . poll__input {
border-color : var ( -- color - brand-mastodon-text-light ) ;
}
/* Light grey things */
. layout-single-column . navigation-bar ,
. layout-single-column . navigation-bar strong {
color : var ( -- color - gainsboro ) ;
}
/* CW button */
. layout-single-column . reply-indicator__content . status__content__spoiler-link ,
. layout-single-column . status__content__spoiler-link {
background-color : var ( -- color - dark ) ;
color : var ( -- color - light - purple ) ;
font-weight : 500 ;
/* Need to override forced styles */
/* stylelint-disable-next-line */
margin-left : calc ( var ( -- gap-default ) / 2 ) !important ;
vertical-align : baseline ;
}
. layout-single-column . reply-indicator__content . status__content__spoiler-link : focus ,
. layout-single-column . reply-indicator__content . status__content__spoiler-link : hover ,
. layout-single-column . status__content . status__content__spoiler-link : focus ,
. layout-single-column . status__content . status__content__spoiler-link : hover {
background-color : var ( -- color - dark ) ;
color : var ( -- color - lighter - purple ) ;
}
/* CW button in notifications */
. layout-single-column . notification . reply-indicator__content . status__content__spoiler-link ,
. layout-single-column . notification . status__content__spoiler-link {
background-color : var ( -- color - dark ) ;
color : var ( -- color - dim ) ;
}
. layout-single-column . notification . reply-indicator__content . status__content__spoiler-link : focus ,
. layout-single-column . notification . reply-indicator__content . status__content__spoiler-link : hover ,
. layout-single-column . notification . status__content . status__content__spoiler-link : focus ,
. layout-single-column . notification . status__content . status__content__spoiler-link : hover {
background-color : var ( -- color - dark ) ;
color : var ( -- color - dim ) ;
}
/* Light purple things */
. account__header__tabs__name h1 small ,
. layout-single-column . account . account__display-name ,
. layout-single-column . column-settings__section ,
. layout-single-column . setting-toggle__label {
color : var ( -- color - light - purple ) ;
}
/* White things */
. layout-single-column . compose-form__poll-wrapper select ,
. layout-single-column . actions-modal ul li : not ( : empty ) a ,
. layout-single-column . report-dialog-modal . status__content ,
. layout-single-column . report-dialog-modal . status__content p ,
. layout-single-column . report-dialog-modal . poll__option . dialog-option > . poll__option__text strong ,
. layout-single-column . report-dialog-modal__lead ,
. layout-single-column . detailed-status__display-name strong ,
. layout-single-column . dismissable-banner__message ,
2023-08-27 22:11:08 +02:00
. layout-single-column . privacy-dropdown__option . active ,
. layout-single-column . privacy-dropdown__option : hover . privacy-dropdown__option__content ,
. layout-single-column . privacy-dropdown__option : focus . privacy-dropdown__option__content ,
2023-07-29 00:12:04 +02:00
. layout-single-column . privacy-dropdown__option ,
. layout-single-column . privacy-dropdown__option__content strong ,
. layout-single-column . status__info . display-name strong . display-name__html ,
. layout-single-column . reply-indicator . display-name strong . display-name__html ,
. layout-single-column . notification__message ,
. layout-single-column . getting-started__trends h4 a ,
. layout-single-column . trends__item__name a ,
. layout-single-column . emoji-mart-search input ,
. layout-single-column . language-dropdown__dropdown__results__item ,
. layout-single-column . reply-indicator__content ,
. layout-single-column . compose-form . compose-form__modifiers : focus ,
. layout-single-column . compose-form . autosuggest-textarea__textarea ,
. layout-single-column . compose-form . spoiler-input__input : focus ,
. layout-single-column . compose-panel . compose-form__autosuggest-wrapper : focus ,
. layout-single-column . compose-form . compose-form__buttons-wrapper : focus ,
. layout-single-column . autosuggest-textarea . autosuggest-textarea__textarea : focus ,
. layout-single-column . account__section-headline a . active ,
. layout-single-column . account__section-headline button . active ,
. layout-single-column . notification__filter-bar a . active ,
. layout-single-column . notification__filter-bar button . active {
color : var ( -- color - light - text ) ;
}
. layout-single-column . muted . status__info * ,
. layout-single-column . muted . status__info . display-name * {
color : var ( -- color - light - text ) ;
}
/* Account names */
. layout-single-column . status__info . display-name . display-name__account ,
. layout-single-column . display-name__account {
color : var ( -- color - dim ) ;
}
/* Main panel column */
. layout-single-column . columns-area__panels__main > div {
border-left : 1 px solid var ( -- color - border ) ;
border-right : 1 px solid var ( -- color - border ) ;
}
/* Status header */
. layout-single-column . status . status__info {
align-items : flex-start ;
gap : var ( -- gap-default ) ;
height : calc ( var ( -- gap-default ) * 2 ) ;
justify-content : flex-start ;
margin-bottom : 0 ;
2023-08-27 22:11:08 +02:00
padding-bottom : 0 ;
}
/* Status action bar */
. layout-single-column . status__action-bar {
margin-top : 12 px ;
2023-07-29 00:12:04 +02:00
}
/* Display name */
. layout-single-column . status__info . status__display-name {
align-items : flex-start ;
display : inline-flex ;
gap : var ( -- gap-default ) ;
order : 1 ;
}
. layout-single-column . status__info . display-name {
display : flex ;
gap : calc ( var ( -- gap-default ) / 2 ) ;
}
/* The separator dot */
. layout-single-column . status__info : : before {
color : var ( -- color - dim ) ;
content : " · " ;
display : inline-block ;
font-size : var ( -- font-size ) ;
font-weight : 400 ;
height : 20 px ;
margin-left : - 6 px ;
margin-right : - 10 px ;
order : 2 ;
position : relative ;
}
. layout-single-column . status__info . status__relative-time {
height : unset ;
order : 3 ;
}
/* Visibility icon */
. layout-single-column . status . status__visibility-icon {
font-size : var ( -- font-size-mid ) ;
}
/* Panels and things that should be transparent */
. layout-single-column . status__wrapper-direct ,
. layout-single-column . focusable : focus . detailed-status ,
. layout-single-column . focusable : focus . detailed-status__action-bar ,
. layout-single-column . compose-form__poll-wrapper select ,
. layout-single-column . poll__option input [ type = " text " ] ,
. layout-single-column . language-dropdown__dropdown ,
body . embed . activity-stream . entry ,
. layout-single-column . report-dialog-modal__textarea ,
. layout-single-column . drawer__inner ,
. layout-single-column . column-inline-form ,
. layout-single-column . scrollable . account-card ,
. layout-single-column . scrollable . account-card__title__avatar . account__avatar ,
. layout-single-column . scrollable . account-card__title__avatar img ,
. layout-single-column . explore__search-header ,
. layout-single-column . empty-column-indicator ,
. layout-single-column . follow_requests-unlocked_explanation ,
. layout-single-column . column-link ,
. layout-single-column . columns-area__panels__pane--navigational . navigation-panel ,
. layout-single-column . tabs-bar__wrapper . column-back-button ,
. layout-single-column . account__header ,
. layout-single-column . column-header__back-button ,
. layout-single-column . compose-form . compose-form__modifiers ,
. layout-single-column . compose-form . autosuggest-textarea__textarea ,
. layout-single-column . compose-form . spoiler-input__input ,
. layout-single-column . compose-panel . compose-form__autosuggest-wrapper ,
. layout-single-column . compose-form . compose-form__buttons-wrapper ,
. layout-single-column . column-header__button ,
. layout-single-column . account__section-headline button ,
. layout-single-column . notification__filter-bar button ,
. layout-single-column . account__section-headline ,
. layout-single-column . notification__filter-bar ,
. layout-single-column . tabs-bar__wrapper ,
. layout-single-column . column-header ,
body . embed . detailed-status ,
. layout-single-column . detailed-status ,
. layout-single-column . detailed-status__action-bar ,
. layout-single-column . column > . scrollable {
background-color : transparent ;
}
/* Avatar */
. account__avatar [ style = " width: 46px; height: 46px; " ] ,
. layout-single-column . status__avatar {
/* Need to override inline styles */
/* stylelint-disable-next-line */
height : var ( -- size-avatar ) !important ;
/* stylelint-disable-next-line */
max-height : var ( -- size-avatar ) !important ;
/* stylelint-disable-next-line */
max-width : var ( -- size-avatar ) !important ;
/* stylelint-disable-next-line */
min-height : var ( -- size-avatar ) !important ;
/* stylelint-disable-next-line */
min-width : var ( -- size-avatar ) !important ;
/* Need to override inline styles */
/* stylelint-disable-next-line */
width : var ( -- size-avatar ) !important ;
}
/* Avatars */
. layout-single-column . account-card__title__avatar . account__avatar ,
. layout-single-column . account-card__title__avatar img ,
. layout-single-column . account__avatar > img ,
. layout-single-column . column > . scrollable . status__avatar img {
border : 0 ;
border-radius : 50 % ;
box-shadow : rgb ( 255 255 255 / 0 .03 ) 0 0 2 px inset ;
}
/* Things that should not have border */
. layout-single-column . column-inline-form ,
. layout-single-column . column > . scrollable ,
. layout-single-column . error-column ,
. layout-single-column . getting-started ,
. layout-single-column . regeneration-indicator ,
. layout-single-column . column-back-button ,
. layout-single-column . column-header {
border : 0 ;
}
/* Nice active effect in the column header */
. layout-single-column . column-header__wrapper . active {
box-shadow : var ( -- active-header-box-shadow ) ;
}
. layout-single-column . column-header__wrapper . active : : before {
/* stylelint-disable-next-line */
background : var ( -- active-header-radial-gradient ) ;
}
. layout-single-column . compose-form__autosuggest-wrapper ,
. layout-single-column . compose-form__buttons-wrapper {
border : 0 ;
}
. layout-single-column article ,
. layout-single-column . status__prepend ,
. layout-single-column . notification__message ,
. layout-single-column . status {
transition : all 200 ms ;
}
/* Toot hover effect */
. layout-single-column article : focus ,
. layout-single-column article : hover {
background-color : var ( -- color - light - shade ) ;
}
/* Focusable toot and other hilighted items */
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item . selected ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : active ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : focus ,
. layout-single-column . compose-form . autosuggest-textarea__suggestions__item : hover ,
. layout-single-column . focusable : focus {
/* stylelint-disable-next-line */
background : var ( -- color - focusable-toot ) ;
}
/* URL preview cards */
. layout-single-column a . status-card ,
. layout-single-column a . status-card . compact : hover ,
. layout-single-column a . status-card . compact : focus ,
. layout-single-column a . status-card . compact {
background-color : transparent ;
border-color : var ( -- color - border ) ;
}
/* URL preview card summary text */
. layout-single-column a . status-card . status-card__host ,
. layout-single-column a . status-card . compact . status-card__host ,
. layout-single-column a . status-card . status-card__description ,
. layout-single-column a . status-card . compact . status-card__description {
color : var ( -- color - dim ) ;
}
/* Search panel that opens when focusing Search or paste URL field */
. layout-single-column . explore__search-header . search__popout ,
. layout-single-column . compose-form__poll-wrapper option ,
. layout-single-column . search__popout ,
. layout-single-column . search-popout {
background-color : var ( -- color - dark ) ;
border-color : var ( -- color - dark ) ;
color : var ( -- color - dim ) ;
}
. layout-single-column . search__popout em ,
. layout-single-column . search-popout em {
color : var ( -- color - light - text ) ;
}
/* URL preview card box */
/* stylelint-disable-next-line */
. layout-single-column a . status-card . status-card__content ,
. layout-single-column a . status-card . compact . status-card__content {
display : grid ;
gap : calc ( var ( -- gap-default ) / 2 ) ;
padding : var ( -- gap-default ) ;
}
/* URL preview card fonts */
. layout-single-column a . status-card . status-card__host ,
. layout-single-column a . status-card . compact . status-card__host ,
. layout-single-column a . status-card . status-card__title ,
. layout-single-column a . status-card . compact . status-card__title {
font-size : var ( -- font-size ) ;
margin : 0 ;
}
/* Status update tinted to right */
. layout-single-column . status__action-bar ,
. layout-single-column . attachment-list ,
. layout-single-column . status__content__read-more-button ,
. layout-single-column . status . status__content ,
. layout-single-column . notification . notification-admin-sign-up . display-name__account {
font-size : var ( -- font-size ) ;
padding-left : calc ( var ( -- size-avatar ) + var ( -- gap-default )) ;
padding-top : 0 ;
}
/* Translate link and other padding resets */
. layout-single-column . conversation . attachment-list ,
. layout-single-column . translate ~ . status__content__read-more-button {
padding-left : 0 ;
}
/* Rtl version */
[ dir = " rtl " ] . layout-single-column . status__action-bar ,
2023-08-27 22:11:08 +02:00
[ dir = " rtl " ] . layout-single-column . attachment-list ,
2023-07-29 00:12:04 +02:00
[ dir = " rtl " ] . layout-single-column . status__content__read-more-button ,
[ dir = " rtl " ] . layout-single-column . status . status__content {
padding-left : 0 ;
padding-right : calc ( var ( -- size-avatar ) + var ( -- gap-default )) ;
}
/* Reset padding from attachment-list on reply indicator */
. layout-single-column . reply-indicator . attachment-list {
padding-left : 0 ;
}
. layout-single-column . status__action-bar button ,
. layout-single-column . detailed-status__action-bar button {
border-radius : 50 % ;
}
. layout-single-column . detailed-status__action-bar . icon-button [ disabled ] ,
. layout-single-column . status__action-bar . icon-button [ disabled ] {
opacity : .5 ;
pointer-events : none ;
}
/* Media inside status update tinted to right */
. layout-single-column . status . audio-player ,
. layout-single-column . status . video-player ,
. layout-single-column . status . media-gallery {
margin-left : auto ;
/* Need to override inline styles */
/* stylelint-disable-next-line */
width : calc ( 100 % - calc ( var ( -- size-avatar ) + var ( -- gap-default ))) !important ;
}
. layout-single-column . status . status-card {
margin-left : calc ( var ( -- size-avatar ) + var ( -- gap-default )) ;
}
/* Detailed status update */
. layout-single-column . detailed-status . status__content {
font-size : var ( -- font-size-bigger ) ;
line-height : 1 .4 ;
}
body . embed . detailed-status__meta ,
. layout-single-column . detailed-status__meta {
color : var ( -- color - dim ) ;
font-size : var ( -- font-size ) ;
}
body . embed . detailed-status__meta {
line-height : 1 .5 ;
}
body . embed . detailed-status__reblogs ,
body . embed . detailed-status__favorites ,
. layout-single-column . detailed-status__favorites ,
. layout-single-column . detailed-status__reblogs {
display : inline-flex ;
font-size : var ( -- font-size ) ;
gap : 4 px ;
}
body . embed . detailed-status__meta . animated-number ,
. layout-single-column . detailed-status__meta . animated-number {
color : var ( -- color - light - text ) ;
font-weight : var ( -- font-weight-bold ) ;
}
body . embed . detailed-status__reblogs ,
. layout-single-column . detailed-status__reblogs {
font-size : var ( -- font-size ) ;
}
body . embed . detailed-status__reblogs ,
body . embed . detailed-status__favorites {
color : var ( -- color - light - text ) ;
font-weight : var ( -- font-weight-bold ) ;
}
body . embed . detailed-status__reblogs : : after ,
. layout-single-column . detailed-status__reblogs : : after {
color : var ( -- color - dim ) ;
content : ' Boosts ' ;
font-weight : 500 ;
}
body . embed . detailed-status__favorites : : after ,
. layout-single-column . detailed-status__favorites : : after {
color : var ( -- color - dim ) ;
content : ' Favourites ' ;
font-weight : 500 ;
}
body . embed . detailed-status__meta . detailed-status__link . fa-star ,
body . embed . detailed-status__meta . detailed-status__link . fa-retweet ,
. layout-single-column . detailed-status__meta . detailed-status__link . fa-star ,
. layout-single-column . detailed-status__meta . detailed-status__link . fa-retweet {
display : none ;
}
/* Icon buttons */
. layout-single-column . icon-button {
color : var ( -- color - dim ) ;
}
/* Hide/Show media button */
. layout-single-column . spoiler-button . spoiler-button--minified > button {
background-color : var ( -- color - bg ) ;
border-radius : var ( -- border-radius-badges ) ;
color : var ( -- color - ghost-button-text ) ;
opacity : .5 ;
}
/* Alt badge */
. layout-single-column . media-gallery__item__badges > span {
border-radius : var ( -- border-radius-badges ) ;
}
/* Distance from the edge */
. layout-single-column . spoiler-button--minified {
inset-inline-start : var ( -- badges-distance-from-edge ) ;
top : var ( -- badges-distance-from-edge ) ;
}
. layout-single-column . media-gallery__gifv__label {
bottom : var ( -- badges-distance-from-edge ) ;
inset-inline-start : var ( -- badges-distance-from-edge ) ;
}
. layout-single-column . icon-button : hover {
color : var ( -- color - accent ) ;
}
/* Other general buttons */
. layout-single-column . column-header__button . active : active ,
. column-header__button . active : focus ,
. layout-single-column . column-header__button . active : hover {
background-color : var ( -- color - focusable-toot ) ;
color : var ( -- color - fg ) ;
}
/* Bars on panels */
. layout-single-column . ui__header ,
. layout-single-column . columns-area__panels__main > div . tabs-bar__wrapper ,
. layout-single-column . tabs-bar__wrapper {
backdrop-filter : blur ( 12 px ) ;
background-color : var ( -- color - bg-75 ) ;
border-color : var ( -- color - border ) ;
padding : 0 ;
}
@media ( min-width : 1175 px ) {
. layout-single-column . ui__header ,
. layout-single-column . columns-area__panels__main > div . tabs-bar__wrapper ,
. layout-single-column . tabs-bar__wrapper {
margin-right : - 2 px ;
}
}
/* Hidden things */
/* stylelint-disable-next-line */
. layout-single-column . column-header . column-header__icon : not ( . fa-hashtag ) : not ( . fa-user-plus ) : not ( . fa-user-times ) {
display : none ;
}
/* Column headers */
. layout-single-column . column-header {
font-size : var ( -- font-size-heading ) ;
font-weight : var ( -- font-weight-bold ) ;
}
/* Column sub-headers */
. layout-single-column . column-subheading {
background-color : transparent ;
color : var ( -- color - fg ) ;
font-size : var ( -- font-size-bigger ) ;
font-weight : var ( -- font-weight-bold ) ;
text-transform : unset ;
}
/* "Your lists" view */
. layout-single-column . column-subheading ~ article {
padding-left : var ( -- gap-default ) ;
padding-right : var ( -- gap-default ) ;
}
/* Notifications */
. layout-single-column . notification__message {
display : grid ;
gap : var ( -- gap-default ) ;
grid-template-columns : minmax ( 0 , var ( -- size-avatar )) minmax ( 0 , 1 fr ) ;
height : calc ( var ( -- gap-default ) * 2 ) ;
}
. layout-single-column . notification__message i {
font-size : var ( -- size-icon-notification ) ;
}
/* Make sure notification user is clickable */
. layout-single-column . notification__display-name {
position : relative ;
z-index : 99 ;
}
/* Hack to display notification message title on one line */
. layout-single-column . notification__message > span {
display : block ;
margin-top : calc ( var ( -- size-avatar-small ) + 6 px ) ;
overflow : visible ;
}
. layout-single-column . notification__message > span > span {
display : block ;
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
}
. layout-single-column . notification__message > div {
display : flex ;
justify-content : flex-end ;
}
. layout-single-column . muted . status__avatar {
opacity : 1 ;
}
. layout-single-column . notification . account__avatar-overlay-base {
display : none ;
}
. layout-single-column . notification . account__avatar ,
. layout-single-column . notification . account__avatar-overlay-overlay . account__avatar ,
. layout-single-column . notification . account__avatar-overlay-overlay {
/* Need to override inline styles */
/* stylelint-disable-next-line */
height : var ( -- size-avatar-small ) !important ;
/* stylelint-disable-next-line */
min-height : var ( -- size-avatar-small ) !important ;
/* stylelint-disable-next-line */
min-width : var ( -- size-avatar-small ) !important ;
position : absolute ;
/* stylelint-disable-next-line */
width : var ( -- size-avatar-small ) !important ;
}
. layout-single-column . notification . status__info . status__display-name {
overflow : visible ;
}
/* Fixes: User avatars in notifications are sometimes links to my profile instead of theirs #25 */
. layout-single-column . notification . notification-reblog . status__info . status__display-name ,
. layout-single-column . notification . notification-follow . status__info . status__display-name ,
. layout-single-column . notification . notification-favourite . status__info . status__display-name {
pointer-events : none ;
}
/* Hack to show follow notification more minimal way */
. layout-single-column . notification . notification-admin-report . notification__report ,
. layout-single-column . notification . notification-admin-sign-up . account__wrapper ,
. layout-single-column . notification . notification-update . account__wrapper ,
. layout-single-column . notification . notification-follow . account__wrapper {
position : relative ;
}
. layout-single-column . notification . notification-admin-report . account__avatar-overlay-overlay {
top : calc ( - 1 * calc ( var ( -- size-avatar-small ) + var ( -- gap-default ) + 4 px )) ;
}
/* Hack to show follow notification more minimal way */
. layout-single-column . notification . notification-poll . display-name ,
. layout-single-column . notification . notification-update . display-name__html ,
. layout-single-column . notification . notification-update . display-name__account ,
. layout-single-column . notification . notification-admin-sign-up . display-name__html ,
. layout-single-column . notification . notification-admin-sign-up . display-name ,
. layout-single-column . notification . notification-follow . display-name__html {
visibility : hidden ;
}
. layout-single-column . notification . notification-update . account__avatar-wrapper ,
. layout-single-column . notification . notification-admin-sign-up . account__avatar-wrapper ,
. layout-single-column . notification . notification-follow . account__avatar-wrapper ,
. layout-single-column . notification . account__avatar-overlay {
left : calc ( var ( -- size-avatar-small ) + var ( -- gap-default ) + 18 px ) ;
margin-top : calc ( - 1 * calc ( var ( -- size-avatar-small ) + var ( -- gap-default ))) ;
position : absolute ;
top : 4 px ;
}
. layout-single-column . notification . notification-admin-report . account__avatar-overlay {
margin-top : 0 ;
top : 0 ;
}
. layout-single-column . notification . notification-status . notification__message > span {
display : none ;
}
. layout-single-column . notification . notification-follow . verified-badge ,
. layout-single-column . notification . notification-follow . display-name ,
. layout-single-column . notification . notification-admin-sign-up . display-name + span ,
. layout-single-column . notification . notification-follow . display-name + span ,
. layout-single-column . notification . notification-favourite . status__wrapper-direct . status__prepend ,
. layout-single-column . notification . notification-reblog . display-name ,
. layout-single-column . notification . notification-favourite . display-name {
display : none ;
}
/* Minimal boost notification fix */
. layout-single-column . notification . notification-reblog . notification__message > span {
margin-top : calc ( var ( -- size-avatar-small ) + calc ( var ( -- gap-default ) / 2 )) ;
}
/* Minimal follow notification fix */
. layout-single-column . notification . notification-follow . notification__message > span {
margin-top : calc ( calc ( var ( -- size-avatar-small ) + calc ( var ( -- gap-default ) / 2 )) + 6 px ) ;
}
. layout-single-column . notification . notification . notification-admin-sign-up . account__relationship ,
. layout-single-column . notification . notification-follow . account__relationship {
transform : translateY ( - 8 px ) ;
}
/* stylelint-disable-next-line */
. layout-single-column . notification . notification-follow . account__avatar-wrapper {
top : 6 px ;
}
/* Minimal fav notification fix */
. layout-single-column . notification . notification-favourite . notification__message > span {
margin-top : calc ( var ( -- size-avatar-small ) + calc ( var ( -- gap-default ) / 2 )) ;
}
/* If a status content is empty and there's only attachment, remove gap */
. layout-single-column . notification . status__content : has ( . status__content__text : empty ) + . attachment-list {
margin-top : 0 ;
}
/* Less space before attachments if no status content */
. layout-single-column . status . status__content : has ( . status__content__text : empty ) + . audio-player ,
. layout-single-column . status . status__content : has ( . status__content__text : empty ) + . video-player ,
. layout-single-column . status . status__content : has ( . status__content__text : empty ) + . media-gallery ,
. layout-single-column . detailed-status . status__content : has ( . status__content__text : empty ) + . audio-player ,
. layout-single-column . detailed-status . status__content : has ( . status__content__text : empty ) + . video-player ,
. layout-single-column . detailed-status . status__content : has ( . status__content__text : empty ) + . media-gallery {
margin-top : calc ( var ( -- gap-default ) / 2 ) ;
}
. layout-single-column . notification . notification . notification-admin-sign-up . notification__message + . account ,
. layout-single-column . notification . notification-follow . notification__message + . account {
padding-bottom : 0 ;
}
. layout-single-column . status__prepend {
padding-left : calc ( var ( -- size-avatar ) - 4 px ) ;
}
. layout-single-column . notification . notification-update . account__display-name ,
. layout-single-column . notification . notification-follow . account__display-name {
display : inline-flex ;
gap : var ( -- gap-default ) ;
padding-left : calc ( var ( -- size-avatar ) + var ( -- gap-default )) ;
}
/* Admin reports and other admin notifications */
. layout-single-column . notification-admin-report . notification__report {
border-color : var ( -- color - border ) ;
display : flex ;
font-size : var ( -- font-size ) ;
gap : 16 px ;
margin-top : 22 px ;
padding : 16 px ;
padding-left : calc ( var ( -- size-avatar ) + var ( -- gap-default )) ;
}
. layout-single-column . notification-admin-report . notification__report__details {
color : var ( -- color - dim ) ;
font-size : var ( -- font-size ) ;
}
. layout-single-column . notification-admin-report . notification__report__details strong {
font-weight : 400 ;
}
/* Revert hack for notification admin message that has no avatar visible */
. layout-single-column . notification-admin-report . notification__message > span {
display : block ;
margin-top : calc ( var ( -- size-avatar-small ) + 4 px ) ;
overflow : visible ;
}
/* Hide things in notifications */
. layout-single-column . notification . status__relative-time ,
. layout-single-column . notification . status__info : : before {
display : none ;
}
/* Right side panel */
. layout-single-column . navigation-panel {
box-sizing : border-box ;
margin-top : 0 ;
overflow-y : auto ;
padding : 10 px ;
}
. layout-single-column . navigation-panel hr {
/* Hide but reserve space */
visibility : hidden ;
}
. columns-area__panels__pane--navigational . navigation-panel {
border : 0 ;
height : 100 % ;
}
. layout-single-column . navigation-panel__logo hr {
margin : 0 ;
}
/* Attempt to hide scrollbars for .navigation-panel for Firefox */
. dropdown-menu__container__list--scrollable ,
. layout-single-column . navigation-panel {
scrollbar-width : none ;
}
/* Hide scrollbars for .navigation-panel for Chrome and Safari */
. dropdown-menu__container__list--scrollable : : -webkit-scrollbar ,
. layout-single-column . navigation-panel : : -webkit-scrollbar {
display : none ;
width : 4 px ;
}
. layout-single-column . column-link {
align-items : center ;
color : var ( -- color - light - text ) ;
display : inline-flex ;
font-size : var ( -- font-size-heading ) ;
gap : var ( -- gap-default ) ;
overflow : visible ;
padding-bottom : calc ( var ( -- gap-default ) + 4 px ) ;
padding-left : var ( -- gap-default ) ;
padding-right : calc ( var ( -- gap-default ) * 1 .5 ) ;
padding-top : calc ( var ( -- gap-default ) + 4 px ) ;
transition : all 100 ms ;
}
[ dir = " rtl " ] . layout-single-column . column-link {
margin-left : auto ;
margin-right : 0 ;
}
. layout-single-column . column-link > i {
min-width : 1 .3 em ;
}
. layout-single-column . column-link > span {
position : relative ;
}
. layout-single-column . column-link > span : : before {
background-color : var ( -- color - column - link-hover ) ;
border-radius : 32 px ;
bottom : calc ( 2 px - var ( -- gap-default ) * 1 .5 ) ;
content : " " ;
inset-inline-end : calc ( 0 px - ( var ( -- gap-default ) * 2 )) ;
inset-inline-start : calc ( - 1 .28571429 em - ( var ( -- gap-default ) * 2 )) ;
opacity : 0 ;
position : absolute ;
top : calc ( - 4 px - var ( -- gap-default )) ;
transition : opacity 200 ms ;
}
. layout-single-column . column-link : focus-visible > span : : before ,
. layout-single-column . column-link : hover > span : : before {
opacity : 1 ;
}
. layout-single-column . account__section-headline a {
transition : all 200 ms ;
}
. layout-single-column . notification__filter-bar button : hover ,
. layout-single-column . account__section-headline a : hover {
background-color : var ( -- color - column - link-hover ) ;
}
/* Mobile devices */
@media ( hover : none ) {
. layout-single-column . notification__filter-bar button . active : hover ,
. layout-single-column . account__section-headline a . active : hover {
background-color : transparent ;
}
}
/* Notification filter bar */
. layout-single-column . notification__filter-bar {
border-bottom : 1 px solid var ( -- color - border ) ;
border-left : 0 ;
border-right : 0 ;
}
. layout-single-column . column-link__icon {
margin : 0 ;
}
/* Notification badge on side panel */
. layout-single-column . icon-with-badge__badge {
border-radius : 50 % ;
font-size : 11 px ;
left : 12 px ;
top : - 6 px ;
}
. layout-single-column . column-link--transparent . active {
color : var ( -- color - light - text ) ;
font-weight : var ( -- font-weight-bold ) ;
}
/* Top panel */
. layout-single-column . account__section-headline a . active : : after ,
. layout-single-column . account__section-headline button . active : : after ,
. layout-single-column . notification__filter-bar a . active : : after ,
. layout-single-column . notification__filter-bar button . active : : after {
background-color : var ( -- color - accent ) ;
border : 0 ;
border-bottom-left-radius : 9999 px ;
border-bottom-right-radius : 9999 px ;
border-top-left-radius : 9999 px ;
border-top-right-radius : 9999 px ;
height : 4 px ;
min-width : 56 px ;
}
. layout-single-column . account__section-headline a . active : : before ,
. layout-single-column . account__section-headline button . active : : before ,
. layout-single-column . notification__filter-bar a . active : : before ,
. layout-single-column . notification__filter-bar button . active : : before {
display : none ;
}
. layout-single-column . notification . notification-reblog . status__action-bar ,
. layout-single-column . notification . notification-favourite . status__action-bar {
display : none ;
}
. layout-single-column . search . search__icon . fa-search : : before {
content : ' ' ;
}
. layout-single-column . status__prepend . fa-retweet : : before {
content : var ( -- icon - boost-status-prepend ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . notification . notification__message . fa {
font-size : 27 px ;
margin-right : 4 px ;
max-width : 30 px ;
}
. layout-single-column . notification . fa : not ( . fa-link ) : : before {
font-size : 22 px ;
height : 27 px ;
}
. layout-single-column . notification . fa . fa-user-plus : not ( . fa-link ) : : before {
color : var ( -- color - accent-dark ) ;
font-size : 20 px ;
}
. layout-single-column . account__relationship . fa . fa-user-plus : not ( . fa-link ) : : before ,
. layout-single-column . notification . account__relationship . fa . fa-user-plus : not ( . fa-link ) : : before {
color : var ( -- color - dim ) ;
}
. layout-single-column . notification . fa . fa-flag : : before ,
. layout-single-column . notification . fa . fa-tasks : not ( . fa-link ) : : before {
color : var ( -- color - accent-dark ) ;
}
. layout-single-column . notification . fa . fa-home : not ( . fa-link ) : : before {
color : var ( -- color - accent-dark ) ;
font-size : 24 px ;
}
/* Follow/unfollow button */
. layout-single-column . account__relationship . icon-button ,
. layout-single-column . notification . account__relationship . icon-button {
background-color : transparent ;
}
. layout-single-column . notification . account__relationship . fa : : before {
/* stylelint-disable-next-line */
color : var ( -- color - dim ) ;
font-size : 20 px ;
}
2023-08-27 22:11:08 +02:00
. layout-single-column . list-adder__lists . fa-times : : before ,
2023-07-29 00:12:04 +02:00
. layout-single-column . account__wrapper . account__relationship . icon-button . active . fa : : before ,
. layout-single-column . explore__search-results . account__relationship . icon-button . active . fa : : before ,
. layout-single-column . notification . account__relationship . icon-button . active . fa : : before {
/* stylelint-disable-next-line */
color : var ( -- color - green ) ;
opacity : .75 ;
}
2023-08-27 22:11:08 +02:00
. layout-single-column . list-adder__lists . fa-times : hover : : before ,
2023-07-29 00:12:04 +02:00
. layout-single-column . explore__search-results . icon-button . active : hover . fa : : before ,
. layout-single-column . notification . account__relationship . icon-button . active : hover . fa : : before {
/* stylelint-disable-next-line */
color : var ( -- color - red ) ;
opacity : 1 ;
}
. layout-single-column . explore__search-results . icon-button : focus . fa : : before ,
. layout-single-column . notification . account__relationship . icon-button : focus . fa : : before ,
. layout-single-column . explore__search-results . icon-button . active : focus . fa : : before ,
. layout-single-column . notification . account__relationship . icon-button . active : focus . fa : : before ,
. layout-single-column . explore__search-results . icon-button : hover . fa : : before ,
. layout-single-column . notification . account__relationship . icon-button : hover . fa : : before {
/* stylelint-disable-next-line */
color : var ( -- color - green ) ;
opacity : 1 ;
}
. layout-single-column . notification . account__relationship {
border-radius : 50 % ;
height : 24 px ;
transform : translateY ( - 4 px ) ;
width : 24 px ;
}
. layout-single-column . notification . account__relationship : hover {
background-color : rgba ( 96 , 105 , 132 , .15 ) ;
}
/* Emoji-mart search input */
. layout-single-column . emoji-mart-search-icon svg {
fill : var ( -- color - border ) ;
opacity : 1 ;
}
. layout-single-column . emoji-mart-search > input : focus-visible ~ . emoji-mart-search-icon svg {
fill : var ( -- color - accent ) ;
}
. layout-single-column . emoji-mart-search > input {
font-size : var ( -- font-size-smaller ) ;
}
. layout-single-column . compose-form__autosuggest-wrapper textarea : : placeholder ,
. layout-single-column . report-dialog-modal__textarea : : placeholder ,
. layout-single-column . emoji-mart-search > input : : placeholder {
color : var ( -- color - dim ) ;
opacity : 1 ;
}
. layout-single-column . report-dialog-modal__textarea ,
. layout-single-column . report-dialog-modal__textarea : focus ,
. layout-single-column . emoji-mart-search > input : focus {
color : var ( -- color - light - text ) ;
}
. layout-single-column . emoji-mart-search-icon : disabled {
opacity : 1 ;
}
/* Search */
. layout-single-column . search . search__icon . fa-search {
background-color : var ( -- color - mud ) ;
background-image : var ( -- icon - search ) ;
background-position : center ;
background-repeat : no-repeat ;
background-size : 20 px ;
display : inline-block ;
height : 24 px ;
top : 10 px ;
width : 24 px ;
}
. layout-single-column input . setting-text ,
. layout-single-column . search__input {
background-color : var ( -- color - mud ) ;
border-color : var ( -- color - mud ) ;
border-radius : 32 px ;
color : var ( -- color - dim ) ;
font-size : var ( -- font-size ) ;
height : 42 px ;
padding : 0 20 px ;
}
/* Input texts */
. layout-single-column . poll__option input [ type = " text " ] ,
. layout-single-column input . setting-text : focus ,
. layout-single-column . search__input : focus {
color : var ( -- color - light - text ) ;
}
/* Poll input */
. layout-single-column . poll__option input [ type = " text " ] {
background-color : transparent ;
border-color : var ( -- color - border ) ;
}
. layout-single-column . poll__option input [ type = " text " ] : focus {
border-color : var ( -- color - accent ) ;
}
/* Placeholders */
. layout-single-column . poll__option input [ type = " text " ] : : placeholder ,
. layout-single-column . search__input : : placeholder ,
. layout-single-column input : : placeholder ,
. layout-single-column input . setting-text : : placeholder {
color : var ( -- color - dim ) ;
opacity : 1 ;
}
/* Profile */
. layout-single-column . getting-started__trends h4 ,
. layout-single-column . account__header__bar {
border-color : var ( -- color - border ) ;
}
. layout-single-column . account__header__bio . account__header__fields {
background-color : transparent ;
color : var ( -- color - dim ) ;
display : flex ;
flex-wrap : wrap ;
gap : var ( -- gap-default ) ;
padding : 0 ;
}
/* Hide label */
. layout-single-column . account__header__bio . account__header__fields dt {
display : none ;
}
/* Joined label */
. layout-single-column . account__header__bio . account__header__fields dt : not ( [ title ] ) {
display : inline-flex ;
font-weight : 400 ;
gap : calc ( var ( -- gap-default ) / 2 ) ;
text-transform : unset ;
}
. layout-single-column h4 ,
. layout-single-column . search__popout h4 ,
. layout-single-column . search-popout h4 ,
. layout-single-column . server-banner h4 {
text-transform : unset ;
}
. layout-single-column . account__header__bio . account__header__fields dt : not ( [ title ] ) : : before {
content : url( 'data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="%23717c9b" class="r-115tad6 r-4qtqp9 r-yyyyoo r-1xvli5t r-1d4mawv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E' ) ;
height : 18 .5 px ;
width : 18 .5 px ;
}
. layout-single-column . account__header__bio . account__header__fields dd ,
. layout-single-column . account__header__bio . account__header__fields dt {
color : var ( -- color - dim ) ;
font-size : var ( -- font-size ) ;
}
. layout-single-column . account__header__bio . account__header__fields dl {
background-color : transparent ;
border : 0 ;
color : var ( -- color - dim ) ;
display : inline-flex ;
font-size : var ( -- font-size ) ;
font-weight : 400 ;
gap : calc ( var ( -- gap-default ) / 2 ) ;
padding : 0 ;
}
. layout-single-column . getting-started__trends h4 {
border : 0 ;
font-size : var ( -- font-size-heading ) ;
font-weight : var ( -- font-weight-bold ) ;
line-height : 24 px ;
margin-bottom : var ( -- gap-default ) ;
text-transform : unset ;
}
. layout-single-column . getting-started__trends {
margin-top : calc ( var ( -- gap-default ) * 2 ) ;
}
. layout-single-column . trends__item__name a {
font-size : var ( -- font-size ) ;
}
. layout-single-column . trends__item__name {
display : grid ;
gap : 4 px ;
}
. layout-single-column . account__header__image {
height : 200 px ;
}
. layout-single-column . account__header__bar . avatar . account__avatar {
background-color : transparent ;
border : 0 ;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
height : 133 .5 px !important ;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
width : 133 .5 px !important ;
}
. layout-single-column . account__header__tabs {
overflow : visible ;
}
. layout-single-column . account__header__tabs . account-role {
display : none ;
width : 133 .5 px ;
}
/* Follow/unfollow button */
body . embed . button . logo-button ,
. layout-single-column . notification__report__actions . button ,
. layout-single-column . column-inline-form button ,
. layout-single-column . explore__suggestions . account-card__actions__button button ,
. layout-single-column . account__header__tabs__buttons . button {
background-color : transparent ;
border-bottom-left-radius : 9999 px ;
border-bottom-right-radius : 9999 px ;
border-top-left-radius : 9999 px ;
border-top-right-radius : 9999 px ;
color : var ( -- color - light - text ) ;
font-size : var ( -- font-size ) ;
padding-left : 16 px ;
padding-right : 16 px ;
transition : all 200 ms ;
}
/* Dark button borders and other things that have borders all around */
body . embed . button . logo-button ,
. layout-single-column . notification__report__actions . button ,
. layout-single-column . column-inline-form button ,
. layout-single-column . explore__suggestions . account-card__actions__button button ,
. layout-single-column . account__header__tabs__buttons . button ,
. layout-single-column . account__header__tabs__buttons . icon-button {
border : 1 px solid var ( -- color - outer-space ) ;
}
. layout-single-column . account__header__tabs__buttons . icon-button {
color : var ( -- color - light - text ) ;
}
/* stylelint-disable-next-line */
. layout-single-column . account__header__tabs__buttons . icon-button {
align-items : center ;
border-bottom-left-radius : 9999 px ;
border-bottom-right-radius : 9999 px ;
border-top-left-radius : 9999 px ;
border-top-right-radius : 9999 px ;
display : inline-flex ;
justify-content : center ;
}
body . embed . button . logo-button : hover ,
. layout-single-column . column-inline-form button : hover ,
. layout-single-column . explore__suggestions . account-card__actions__button button : hover ,
. layout-single-column . account__header__tabs__buttons . icon-button . active {
color : var ( -- color - light - text ) ;
}
. layout-single-column . account__header__tabs__buttons . icon-button . fa : : before {
font-size : 17 px ;
}
. layout-single-column . account__header__tabs__buttons . icon-button . fa-bell-o : : before ,
. layout-single-column . account__header__tabs__buttons . icon-button . fa-bell : : before {
content : var ( -- icon - bell-header-tabs ) ;
}
. layout-single-column . account__header__tabs__buttons . icon-button . active . fa-bell-o : : before ,
. layout-single-column . account__header__tabs__buttons . icon-button . active . fa-bell : : before {
content : var ( -- icon - bell-header-tabs-active ) ;
}
. layout-single-column . account__header__tabs__buttons . icon-button . fa-ellipsis-v : : before {
position : relative ;
top : - 2 px ;
}
. layout-single-column . explore__suggestions . account-card__actions__button button : hover ,
. layout-single-column . account__header__tabs__buttons . button : focus ,
. layout-single-column . account__header__tabs__buttons . button : hover {
background-color : var ( -- color - profile-button-hover ) ;
}
. layout-single-column . detailed-status__action-bar . icon-button : focus ,
. layout-single-column . status__action-bar . icon-button : focus ,
. layout-single-column . detailed-status__action-bar . icon-button : hover ,
. layout-single-column . status__action-bar . icon-button : hover {
background-color : transparent ;
}
. layout-single-column . detailed-status__action-bar . icon-button : hover : : after ,
. layout-single-column . status__action-bar . icon-button : hover : : after {
opacity : 1 ;
}
. layout-single-column . detailed-status__action-bar . icon-button : : after ,
. layout-single-column . status__action-bar . icon-button : : after {
background-color : rgba ( 96 , 105 , 132 , .15 ) ;
border-radius : 50 % ;
content : ' ' ;
height : 36 px ;
left : 0 ;
opacity : 0 ;
pointer-events : none ;
position : absolute ;
top : - 8 px ;
transform : translateX ( 8 px ) translateY ( 1 px ) ;
width : 36 px ;
z-index : - 1 ;
}
. layout-single-column . conversation . icon-button : : after {
transform : translateX ( - 8 px ) translateY ( 1 px ) ;
}
. layout-single-column . conversation__content {
overflow : visible ;
}
. layout-single-column . detailed-status__button {
position : relative ;
}
. layout-single-column . detailed-status__button . icon-button . star-icon : : after {
transform : translateX ( 3 px ) ;
}
. layout-single-column . status__action-bar . icon-button . icon-button--with-counter : : after {
transform : translateX ( - 6 px ) translateY ( - 1 px ) ;
}
/* Misc UI fixes */
. layout-single-column . search__icon . fa . active {
opacity : 1 ;
}
/* Explore -> For you shade in bio */
. layout-single-column . scrollable . account-card__bio : : after {
/* stylelint-disable-next-line */
background : linear-gradient ( 270 deg , var ( -- color - bg ) , transparent ) ;
}
/* Empty column */
. layout-single-column . empty-column-indicator {
min-height : 120 px ;
}
. layout-single-column . status__prepend + . status {
padding-top : 10 px ;
}
. layout-single-column . search__icon . fa-times-circle {
top : 14 px ;
}
. layout-single-column . setting-text__toolbar {
align-items : center ;
}
. layout-single-column . timeline-hint strong {
display : block ;
margin-bottom : var ( -- gap-default ) ;
}
. layout-single-column . timeline-hint br {
display : none ;
}
/* General fixes */
. layout-single-column . account__header__bar . avatar {
/* stylelint-disable-next-line */
margin-left : 0 !important ;
}
/* Fix for button line-height */
. layout-single-column . button . logo-button {
line-height : 22 px ;
}
/ * Visual indicator about direct messages
@source https : / / github . com / mastodon / mastodon / issues / 22158 # issuecomment-1353661031 * /
. layout-single-column . detailed-status-direct {
position : relative ;
}
. layout-single-column . status__wrapper-direct : : after ,
. layout-single-column . detailed-status-direct : : after {
border-left : 20 px solid transparent ;
border-top : 20 px solid var ( -- color - accent ) ;
/* Add a ribbon to the corner */
content : ' ' ;
height : 0 ;
position : absolute ;
right : 0 ;
top : 0 ;
width : 0 ;
}
. layout-single-column . notification . status__wrapper-direct : : after {
top : - 40 px ;
}
/* Private message conversations */
. layout-single-column . conversation . status__action-bar {
padding-left : 0 ;
}
/* Default buttons */
. layout-single-column . compose-form__buttons button ,
. layout-single-column . button {
border-bottom-left-radius : 9999 px ;
border-bottom-right-radius : 9999 px ;
border-top-left-radius : 9999 px ;
border-top-right-radius : 9999 px ;
}
/* Compose hover and focus fix */
. layout-single-column . report-dialog-modal__actions . button : hover ,
. layout-single-column . server-banner . button ,
. layout-single-column . sign-in-banner . button ,
. layout-single-column . ui__header__links . button ,
. layout-single-column . compose-form__publish-button-wrapper button {
background-color : var ( -- color - accent-dark ) ;
border-color : var ( -- color - accent-dark ) ;
color : var ( -- color - button - text ) ;
transition : all 200 ms ;
}
/* Compose form */
. layout-single-column . compose-panel . compose-form {
background-color : transparent ;
margin-bottom : 0 ;
position : relative ;
z-index : 4 ;
}
/* Footer items */
. link-footer {
position : relative ;
z-index : 5 ;
}
. layout-single-column . compose-panel . compose-form ,
. layout-single-column . compose-panel ,
. layout-single-column . compose-form__autosuggest-wrapper {
overflow : visible ;
}
/* Compose form and reply indicator box, see https://mastodo.fi/@rmattila74/110140863513856240 */
@media ( min-width : 889 px ) {
. layout-single-column . compose-form . autosuggest-textarea__textarea {
/* stylelint-disable-next-line */
max-height : 20 vh !important ; /* stylelint-disable-next-line */
overflow-y : auto !important ;
resize : none ;
}
}
@media ( min-width : 889 px ) and ( max-height : 1000 px ) {
. layout-single-column . compose-form . autosuggest-textarea__textarea {
/* stylelint-disable-next-line */
max-height : 10 vh !important ;
resize : none ;
}
}
. layout-single-column . server-banner . button : hover ,
. layout-single-column . server-banner . button : focus ,
. layout-single-column . sign-in-banner . button : hover ,
. layout-single-column . sign-in-banner . button : hover : focus ,
. layout-single-column . ui__header__links . button : hover ,
. layout-single-column . ui__header__links . button : focus ,
. layout-single-column . compose-form__publish-button-wrapper button : hover ,
. layout-single-column . compose-form__publish-button-wrapper button : focus {
background-color : var ( -- color - brand-mastodon-links ) ;
border-color : var ( -- color - brand-mastodon-links ) ;
color : var ( -- color - button - text ) ;
}
/* Tertiary button */
. layout-single-column . button . button-tertiary {
/* stylelint-disable-next-line */
background-color : transparent !important ;
/* stylelint-disable-next-line */
border : 1 px solid var ( -- color - accent-dark ) !important ;
color : var ( -- color - ghost-button-text ) ;
padding : 6 px 17 px ;
}
. layout-single-column . button . button-tertiary : active ,
. layout-single-column . button . button-tertiary : focus ,
. layout-single-column . button . button-tertiary : hover {
border : 1 px solid var ( -- color - accent-dark ) ;
}
/* Secondary button */
. layout-single-column . button . button-secondary {
/* stylelint-disable-next-line */
background-color : transparent !important ;
border : 1 px solid var ( -- color - dim ) ;
color : var ( -- color - dim ) ;
}
. layout-single-column . button . button-secondary : hover {
/* stylelint-disable-next-line */
background-color : var ( -- color - light - text ) !important ;
border-color : var ( -- color - light - text ) ;
color : var ( -- color - bg ) ;
}
. layout-single-column . button . button-tertiary : focus ,
. layout-single-column . button . button-tertiary : hover {
/* stylelint-disable-next-line */
background-color : var ( -- color - brand-mastodon-links ) !important ;
/* stylelint-disable-next-line */
border-color : var ( -- color - brand-mastodon-links ) !important ;
/* stylelint-disable-next-line */
color : var ( -- color - bg ) !important ;
/* This is actually wrong in Mastodon default UI as well, hover should not have padding but yet it has */
padding : 6 px 17 px ;
}
/* Smaller icon for back button */
. layout-single-column . column-back-button i ,
. layout-single-column . column-header__back-button i {
font-size : 12 px ;
}
. layout-single-column . icon-button__counter {
font-size : var ( -- font-size-smaller ) ;
}
. layout-single-column . notification__favourite-icon-wrapper . fa . fa-retweet {
color : var ( -- color - green ) ;
}
/* Smaller icons for status action bar */
. layout-single-column . status__action-bar . fa {
font-size : 14 .6 px ;
min-width : 18 px ;
}
. layout-single-column . status__action-bar . icon-button--with-counter {
align-items : center ;
display : inline-flex ;
gap : 6 px ;
}
. layout-single-column . status__action-bar . icon-button {
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
height : unset !important ;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
width : unset !important ;
}
@media screen and ( min-width : 890 px ) {
/* Hide the space between Lists and the actual lists */
. layout-single-column . list-panel > hr ,
. layout-single-column . list-panel + hr {
display : none ;
}
/* Hide lists if there's not enough space on desktop vertically */
. layout-single-column . list-panel {
display : none ;
opacity : 0 ;
transition : all 200 ms ;
}
. layout-single-column . list-panel : focus ,
. layout-single-column . list-panel : hover ,
. layout-single-column . column-link [ href = " /lists " ] : focus ~ . list-panel ,
. layout-single-column . column-link [ href = " /lists " ] : hover ~ . list-panel {
display : block ;
opacity : 1 ;
}
/* Order of the side nav items */
. layout-single-column . navigation-panel__logo {
order : 1 ;
}
. layout-single-column . column-link [ href = " /home " ] {
order : 2 ;
}
. layout-single-column . column-link [ href = " /notifications " ] {
order : 3 ;
}
. layout-single-column . column-link [ href = " /explore " ] {
order : 4 ;
}
. layout-single-column . column-link [ href = " /public/local " ] {
order : 5 ;
}
. layout-single-column . column-link [ href = " /public " ] {
order : 6 ;
}
. layout-single-column . column-link [ href = " /conversations " ] {
order : 7 ;
}
. layout-single-column . column-link [ href = ' /follow_requests ' ] {
order : 8 ;
}
. layout-single-column . column-link [ href = " /bookmarks " ] {
order : 9 ;
}
. layout-single-column . column-link [ href = " /favourites " ] {
order : 10 ;
}
. layout-single-column . column-link [ href = " /lists " ] {
order : 12 ;
}
/* stylelint-disable-next-line no-duplicate-selectors */
. layout-single-column . list-panel {
order : 13 ;
}
. layout-single-column . column-link [ href = " /settings/preferences " ] {
order : 11 ;
}
. layout-single-column . navigation-panel__sign-in-banner ,
. layout-single-column . navigation-panel__legal {
order : 14 ;
}
. layout-single-column . flex-spacer {
order : 15 ;
}
. layout-single-column . getting-started__trends {
order : 16 ;
}
. layout-single-column . status__action-bar . icon-button {
position : relative ;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
width : 50 px !important ;
}
. layout-single-column . conversation . status__action-bar . icon-button {
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
width : auto !important ;
}
/* Fix list links if they are too short */
. layout-single-column . list-panel . column-link {
display : flex ;
}
}
/* Replace bookmark icon */
. layout-single-column . detailed-status . fa-bookmark : : before ,
. layout-single-column . status . fa-bookmark : : before {
content : var ( -- icon - bookmark ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . column-link . fa-bookmark : : before {
content : var ( -- icon - bookmark-column-link ) ;
}
. layout-single-column . column-link . active . fa-bookmark : : before {
content : var ( -- icon - bookmark-column-link-active ) ;
}
/* Replace bookmark icon */
. layout-single-column . status . icon-button : hover : focus . fa-bookmark : : before ,
. layout-single-column . status . icon-button : focus . fa-bookmark : : before ,
. layout-single-column . status . icon-button . active . fa-bookmark : : before {
content : var ( -- icon - bookmark-active ) ;
}
. layout-single-column . status button . icon-button : hover . fa-bookmark : : before {
content : var ( -- icon - bookmark-status-hover ) ;
}
/* Notifications icon */
. layout-single-column . column-link . fa-bell : : before {
content : var ( -- icon - bell ) ;
}
. layout-single-column . column-link . active . fa-bell : : before {
content : var ( -- icon - bell-active ) ;
}
/* Home icon */
. layout-single-column . notification__filter-bar . fa-home : : before {
content : var ( -- icon - home-notification ) ;
}
. layout-single-column . notification__filter-bar . active . fa-home : : before {
content : var ( -- icon - home-notification-active ) ;
}
. layout-single-column . column-link . fa-home : : before {
content : var ( -- icon - home ) ;
position : relative ;
top : 1 px ;
}
/* Federated icon */
. layout-single-column . column-link . fa-globe : : before {
content : var ( -- icon - globe ) ;
}
. layout-single-column . column-link . active . fa-home : : before {
content : var ( -- icon - home-column-link-active ) ;
}
/* Explore icon */
. layout-single-column . column-link . fa-hashtag : : before {
content : var ( -- icon - hashtag ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . column-link . active . fa-hashtag : : before {
content : var ( -- icon - hashtag-active ) ;
position : relative ;
top : 1 px ;
}
/* Local icon */
. layout-single-column . column-link . fa-users : : before {
content : var ( -- icon - users-column-link ) ;
position : relative ;
top : 2 px ;
}
. layout-single-column . column-link . active . fa-users : : before {
content : var ( -- icon - users-column-link-active ) ;
}
/* Direct messages icon */
. layout-single-column . column-link . fa-at : : before {
content : var ( -- icon - direct-messages ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . column-link . active . fa-at {
transform : scale ( 1 .15 ) ;
}
. layout-single-column . column-link . active . fa-at : : before {
content : var ( -- icon - direct-messages-active ) ;
position : relative ;
top : 2 px ;
}
/* Replace share icon */
. layout-single-column . detailed-status . fa-share-alt : : before ,
. layout-single-column . status . fa-share-alt : : before {
content : var ( -- icon - share ) ;
}
. layout-single-column . status button . icon-button : hover . fa-share-alt : : before {
content : var ( -- icon - share-hover ) ;
}
/* Replace retweet icon */
. layout-single-column . notification__filter-bar . fa-retweet : : before {
content : var ( -- icon - boost-notification-filter-bar ) ;
position : relative ;
top : 2 px ;
}
. layout-single-column . notification__filter-bar . active . fa-retweet : : before {
content : var ( -- icon - boost-notification-filter-bar-active ) ;
position : relative ;
top : 2 px ;
}
. layout-single-column . notification__filter-bar . fa-tasks : : before ,
. layout-single-column . notification__filter-bar . fa-user-plus : : before {
font-size : 18 px ;
}
. layout-single-column . notification__filter-bar . active . fa-mailre-ply : : before ,
. layout-single-column . notification__filter-bar . active . fa-reply-all : : before ,
. layout-single-column . notification__filter-bar . active . fa-reply : : before {
content : var ( -- icon - reply-nofitication-filter-bar-active ) ;
}
. layout-single-column . detailed-status button . icon-button i . fa-retweet ,
. layout-single-column . status button . icon-button i . fa-retweet {
background-image : var ( -- icon - boost-status ) ;
background-position : center ;
background-repeat : no-repeat ;
}
/* Replace notification retweet icon */
. layout-single-column . notification__favourite-icon-wrapper . fa-retweet : : before {
content : var ( -- icon - boost-notification-wrapper ) ;
position : relative ;
top : 2 px ;
}
/* stylelint-disable-next-line */
. layout-single-column button . icon-button i . fa-retweet {
background-image : var ( -- icon - boost ) ;
background-position : center ;
background-repeat : no-repeat ;
}
. layout-single-column button . icon-button : hover i . fa-retweet ,
. layout-single-column button . icon-button . active i . fa-retweet {
background-image : var ( -- icon - boost-active ) ;
background-position : center ;
background-repeat : no-repeat ;
}
/* Un-boost and un-bookmark styles */
/* Mobile devices */
. layout-single-column button . icon-button : not ( . active ) : focus i . fa-retweet ,
. layout-single-column button . icon-button : not ( . active ) : hover i . fa-retweet {
animation : none ;
background-image : var ( -- icon - boost ) ;
}
. layout-single-column . status button . icon-button : not ( . active ) : focus . fa-bookmark : : before ,
. layout-single-column . status button . icon-button : not ( . active ) : hover . fa-bookmark : : before {
content : var ( -- icon - bookmark ) ;
}
/* Un-boost and un-bookmark numbers on explore page */
. layout-single-column button . icon-button : not ( . active ) : focus i . fa-retweet ~ span ,
. layout-single-column button . icon-button : not ( . active ) : hover i . fa-retweet ~ span {
color : var ( -- color - dim ) ;
}
/* If a hover device */
@media ( hover : hover ) {
. layout-single-column button . icon-button : not ( . active ) : hover i . fa-retweet ,
. layout-single-column button . icon-button : not ( . active ) : hover i . fa-retweet ~ span {
color : var ( -- color - green ) ;
}
. layout-single-column . status button . icon-button : not ( . active ) : hover i . fa-bookmark : : before {
/* stylelint-disable-next-line */
content : var ( -- icon - bookmark-status-hover-red ) ;
}
. layout-single-column button . icon-button : not ( . active ) : hover i . fa-retweet {
/* stylelint-disable-next-line */
background-image : var ( -- icon - boost-active ) !important ;
}
}
. layout-single-column button . icon-button : hover i . fa-retweet ~ span ,
. layout-single-column button . icon-button . active i . fa-retweet ~ span {
color : var ( -- color - green ) ;
}
. layout-single-column button . icon-button : hover i . fa-star ~ span ,
. layout-single-column button . icon-button . active i . fa-star ~ span {
color : var ( -- color - red ) ;
}
/* Replace reply icon */
. layout-single-column . notification__filter-bar . fa-mail-reply : : before ,
. layout-single-column . notification__filter-bar . fa-reply : : before ,
. layout-single-column . notification__filter-bar . fa-reply-all : : before {
position : relative ;
top : 4 px ;
}
. layout-single-column . conversation . fa-reply : : before ,
. layout-single-column . notification__filter-bar . fa-mail-reply : : before ,
. layout-single-column . notification__filter-bar . fa-reply : : before ,
. layout-single-column . notification__filter-bar . fa-reply-all : : before ,
. layout-single-column . detailed-status . fa-mail-reply : : before ,
. layout-single-column . detailed-status . fa-reply : : before ,
. layout-single-column . detailed-status . fa-reply-all : : before ,
. layout-single-column . status . fa-mail-reply : : before ,
. layout-single-column . status . fa-reply : : before ,
. layout-single-column . status . fa-reply-all : : before {
content : var ( -- icon - reply ) ;
position : relative ;
top : 2 px ;
}
. layout-single-column . detailed-status__action-bar . fa-mail-reply : : before ,
. layout-single-column . detailed-status__action-bar . fa-reply : : before ,
. layout-single-column . detailed-status__action-bar . fa-reply-all : : before {
content : var ( -- icon - reply-detailed-status-action-bar ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . detailed-status__action-bar . icon-button : hover . fa-mail-reply : : before ,
. layout-single-column . detailed-status__action-bar . icon-button : hover . fa-reply : : before ,
. layout-single-column . detailed-status__action-bar . icon-button : hover . fa-reply-all : : before {
content : var ( -- icon - reply-detailed-status-action-bar-hover ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . conversation . icon-button : hover . fa-reply : : before {
content : var ( -- icon - reply-conversation ) ;
}
. layout-single-column . detailed-status__action-bar . fa-share : : before ,
. layout-single-column . detailed-status__action-bar . fa-share-alt : : before {
content : var ( -- icon - share-detailed-status-action-bar ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . detailed-status__action-bar . icon-button : hover . fa-share : : before ,
. layout-single-column . detailed-status__action-bar . icon-button : hover . fa-share-alt : : before {
content : var ( -- icon - share-detailed-status-action-bar-hover ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . detailed-status__action-bar . fa-bookmark : : before {
content : var ( -- icon - bookmark-detailed-status-action-bar ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . detailed-status__action-bar . icon-button : hover . fa-bookmark : : before {
content : var ( -- icon - bookmark-detailed-status-action-bar-hover ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . detailed-status__action-bar . icon-button . active . fa-bookmark : : before {
content : var ( -- icon - bookmark-detailed-status-action-bar-active ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . status button . icon-button : hover . fa-mail-reply : : before ,
. layout-single-column . status button . icon-button : hover . fa-reply : : before ,
. layout-single-column . status button . icon-button : hover . fa-reply-all : : before {
content : var ( -- icon - reply-status-hover ) ;
}
/* More icons */
. layout-single-column . fa-list-ul : : before {
content : var ( -- icon - list ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . relationship-tag {
background-color : var ( -- color - mud ) ;
color : var ( -- color - light - text ) ;
font-size : 11 px ;
font-weight : 500 ;
line-height : 12 px ;
opacity : 1 ;
}
/* iPad etc. */
@media ( max-width : 1174 px ) {
. layout-single-column . detailed-status__action-bar . icon-button : : after ,
. layout-single-column . status__action-bar . icon-button : : after ,
. layout-single-column . detailed-status__action-bar-dropdown . icon-button : : after {
display : none ;
}
. layout-single-column . ui__header ,
. layout-single-column . columns-area__panels__main > div . tabs-bar__wrapper ,
. layout-single-column . tabs-bar__wrapper {
backdrop-filter : unset ;
background-color : transparent ;
padding : 0 ;
}
. layout-single-column . columns-area__panels__main {
width : calc ( 100 % - var ( -- width - side-panel )) ;
}
}
/* In-between breakpoint */
@media ( min-width : 889 px ) and ( max-width : 1174 px ) {
. layout-single-column . columns-area__panels__main > div {
border-right : 0 ;
}
. layout-single-column . ui__header ,
. layout-single-column . columns-area__panels__main > div . tabs-bar__wrapper ,
. layout-single-column . tabs-bar__wrapper {
backdrop-filter : blur ( 12 px ) ;
background-color : var ( -- color - bg-75 ) ;
border-color : var ( -- color - border ) ;
}
. layout-single-column . columns-area__panels {
width : calc ( 100 % - 1 px ) ;
}
. layout-single-column . columns-area__panels__main > . tabs-bar__wrapper {
border-right : 0 ;
}
}
/* Mobile */
@media screen and ( max-width : 889 px ) {
/* Better blur overlay for ui-header */
. layout-single-column . ui : : after {
backdrop-filter : blur ( 12 px ) ;
background-color : var ( -- color - bg-75 ) ;
content : ' ' ;
/* Height is .ui__header + .tabs-bar__wrapper */
height : calc ( 48 px + 56 px ) ;
left : 0 ;
position : fixed ;
top : 0 ;
width : 100 % ;
z-index : 1 ;
}
/* Fix navigation-bar getting underneath layer */
. layout-single-column . navigation-bar {
z-index : 2 ;
}
. layout-single-column . tabs-bar__wrapper {
margin-right : 0 ;
position : sticky ;
top : 55 px ;
z-index : 2 ;
}
. layout-single-column . columns-area__panels__main {
order : 1 ;
position : unset ;
width : 100 % ;
}
. layout-single-column . columns-area__panels {
flex-direction : column ;
justify-content : flex-start ;
}
. layout-single-column . columns-area__panels__main : : -webkit-scrollbar {
display : none ;
}
. layout-single-column . columns-area__panels__pane--navigational . columns-area__panels__pane__inner {
background-color : var ( -- color - bg ) ;
border-top : 1 px solid var ( -- color - border ) ;
bottom : 0 ;
height : 3 .5 rem ;
left : 0 ;
max-height : 16 vh ;
width : 100 vw ;
}
. layout-single-column . columns-area__panels__pane--navigational . navigation-panel {
flex-direction : row ;
gap : 0 ;
height : 100 % ;
overflow-x : auto ;
padding : 0 ;
}
. layout-single-column . columns-area__panels__pane--navigational . navigation-panel . flex-spacer {
display : none ;
}
. layout-single-column . column-link {
justify-content : center ;
margin-right : unset ;
padding-bottom : 0 ;
padding-left : var ( -- gap-default ) ;
padding-right : var ( -- gap-default ) ;
padding-top : 0 ;
width : 38 px ;
}
. layout-single-column . item-list . column-link {
padding-bottom : 4 px ;
padding-top : 4 px ;
width : unset ;
}
. layout-single-column . column-link : hover ,
. layout-single-column . column-link : focus {
/* stylelint-disable-next-line */
background-color : transparent !important ;
}
. columns-area__panels__pane--navigational . column-link__icon . fa-home {
font-size : 27 px ;
}
. columns-area__panels__pane--navigational . column-link__icon . fa-ellipsis-h {
position : relative ;
top : - 4 px ;
}
. columns-area__panels__pane--navigational . column-link__icon . fa-users ,
. columns-area__panels__pane--navigational . column-link__icon . fa-bell {
font-size : 20 px ;
}
. columns-area__panels__pane--navigational . column-link__icon {
font-size : 24 px ;
}
. columns-area__panels__pane--navigational . column-link__icon . fa-fw {
font-size : 22 px ;
}
. columns-area__panels__pane--navigational . column-link__icon . fa-star ,
. columns-area__panels__pane--navigational . column-link__icon . fa-bookmark ,
. columns-area__panels__pane--navigational . column-link__icon . fa-bell {
font-size : 18 px ;
position : relative ;
top : 1 px ;
}
. layout-single-column . columns-area__panels__main > div ,
. layout-single-column . columns-area__panels__main > div . columns-area . columns-area--mobile {
border : 0 ;
}
. layout-single-column . ui__header {
align-items : center ;
border-bottom : 0 ;
box-sizing : border-box ;
display : flex ;
height : 56 px ;
justify-content : space-between ;
position : sticky ;
top : 0 ;
width : 100 % ;
z-index : 2 ;
}
. layout-single-column . account__header__bar . avatar . account__avatar {
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
height : 106 px !important ;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
width : 106 px !important ;
}
. layout-single-column . account__header__image {
height : 157 px ;
}
. layout-single-column . column > . scrollable {
padding-bottom : 55 px ;
}
. layout-single-column . actions-modal ul li : not ( : empty ) a {
color : var ( -- color - light - text ) ;
}
/* "Your lists" view */
. layout-single-column . column-subheading ~ article {
padding-bottom : calc ( var ( -- gap-default ) / 2 ) ;
padding-top : calc ( var ( -- gap-default ) / 2 ) ;
}
. layout-single-column . compose-form {
padding-bottom : calc ( 3 .5 rem + calc ( var ( -- gap-default ) * 2 )) ;
}
/* Column items order */
. layout-single-column . navigation-panel . column-link ,
. layout-single-column . navigation-panel . list-panel ,
. layout-single-column . navigation-panel hr ,
. layout-single-column . navigation-panel . navigation-panel__logo {
order : 99 ;
}
/* Make the column link 1/4 of width of the screen */
. layout-single-column . navigation-panel . navigation-panel__legal ,
. layout-single-column . navigation-panel . column-link {
flex : 0 0 calc ( 100 vw / 4 ) ;
padding : 0 ;
}
. layout-single-column . navigation-panel . navigation-panel__legal {
order : 999 ;
text-align : center ;
}
. layout-single-column . navigation-panel . column-link : nth-child ( 1 ) {
order : 2 ;
}
/* Home */
. layout-single-column . navigation-panel . column-link : nth-child ( 2 ) {
order : 1 ;
}
/* Notifications */
. layout-single-column . navigation-panel . column-link : nth-child ( 3 ) {
order : 4 ;
}
/* Explore */
. layout-single-column . navigation-panel . column-link : nth-child ( 4 ) {
order : 2 ;
}
. layout-single-column . navigation-panel . column-link : nth-child ( 5 ) {
order : 5 ;
}
. layout-single-column . navigation-panel . column-link : nth-child ( 6 ) {
order : 6 ;
}
. layout-single-column . navigation-panel . column-link : nth-child ( 7 ) {
order : 7 ;
}
. layout-single-column . navigation-panel . column-link : nth-child ( 8 ) {
order : 8 ;
}
. layout-single-column . navigation-panel . column-link : nth-child ( 9 ) {
order : 9 ;
}
/* Lists */
. layout-single-column . navigation-panel . column-link : nth-child ( 10 ) {
order : 4 ;
}
. layout-single-column . navigation-panel . column-link : nth-child ( 11 ) {
order : 11 ;
}
. layout-single-column . navigation-panel . column-link : nth-child ( 12 ) {
order : 12 ;
}
}
/* Retweet animation */
/* stylelint-disable-next-line selector-not-notation */
. layout-single-column . no-reduce-motion . icon-button . active : not ( [ aria-label = " Unboost " ] ) : not ( [ aria-label = " Peru tehostus " ] ) . fa-retweet {
/* stylelint-disable-next-line */
animation : spring-rotate-in 1 s linear ;
}
. layout-single-column . no-reduce-motion . icon-button : focus . fa-retweet {
/* stylelint-disable-next-line */
animation : spring-rotate-in 1 s linear ;
}
. layout-single-column . detailed-status__action-bar . icon-button {
position : relative ;
}
. layout-single-column . detailed-status__action-bar-dropdown . icon-button : : after ,
. layout-single-column . detailed-status__button . icon-button : : after {
transform : translateX ( - 6 px ) ;
}
/* Add border radius to media */
. layout-single-column . media-gallery ,
. layout-single-column . audio-player ,
. layout-single-column . video-player ,
. layout-single-column . media-gallery__gifv ,
. layout-single-column . media-gallery__preview {
2023-08-27 22:11:08 +02:00
border : 1 px solid var ( -- color - border ) ;
2023-07-29 00:12:04 +02:00
border-radius : var ( -- border-radius ) ;
overflow : hidden ;
}
. layout-single-column . media-gallery__item-thumbnail : has ( > img : not ( [ alt ] ) ) : : after ,
. layout-single-column . video-player : has ( > video : not ( [ title ] ) ) : : after ,
. layout-single-column . media-gallery__gifv : has ( > video : not ( [ title ] ) ) : : after {
align-self : flex-end ;
background-color : var ( -- color - bg-75 ) ;
border-radius : var ( -- border-radius-badges ) ;
bottom : var ( -- badges-distance-from-edge ) ;
color : var ( -- color - light - text ) ;
content : ' No alt ' ;
display : flex ;
font-size : 9 px ;
font-weight : 500 ;
height : 14 px ;
justify-self : flex-end ;
left : auto ;
line-height : 14 px ;
opacity : 1 ;
padding : 2 px 5 px ;
position : absolute ;
right : var ( -- badges-distance-from-edge ) ;
text-transform : uppercase ;
top : auto ;
width : unset ;
z-index : 3 ;
}
. layout-single-column . media-gallery__item-thumbnail : has ( > img : not ( [ alt ] ) ) : focus : : after ,
. layout-single-column . video-player : has ( > video : not ( [ title ] ) ) : focus : : after ,
. layout-single-column . media-gallery__gifv : has ( > video : not ( [ title ] ) ) : focus : : after ,
. layout-single-column . media-gallery__item-thumbnail : has ( > img : not ( [ alt ] ) ) : hover : : after ,
. layout-single-column . video-player : has ( > video : not ( [ title ] ) ) : hover : : after ,
. layout-single-column . media-gallery__gifv : has ( > video : not ( [ title ] ) ) : hover : : after {
background-color : var ( -- color - red ) ;
}
/* Exception for your own profile media gallery */
. layout-single-column . account-gallery__container . media-gallery__gifv {
border-radius : 0 ;
}
/* More distinct focus color for accessibility, instead of just white */
. layout-single-column input : focus-visible {
outline-color : var ( -- color - accent ) ;
outline-style : solid ;
}
/* Embeds outside Mastodon */
body . embed . entry . detailed-status {
backface-visibility : hidden ;
background-color : #000000 59 ;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
border-radius : 10 px !important ;
overflow : hidden ;
}
/* Verified */
. layout-single-column . account__header__fields . verified a ,
. layout-single-column . account__header__bio . account__header__fields . verified a ,
. layout-single-column . account__header__bio . account__header__fields . verified dd ,
. layout-single-column . account__header__bio . account__header__fields . verified dt {
color : var ( -- color - verified ) ;
}
/* Destructive colors (For you -suggestions, users when focused to the follow button */
. layout-single-column . button . logo-button . button--destructive : active ,
. layout-single-column . button . logo-button . button--destructive : focus {
background-color : var ( -- color - destructive ) ;
border-color : var ( -- color - destructive ) ;
}
/* Fix character counter color when it's over the limit */
. layout-single-column . character-counter . character-counter--over {
color : var ( -- color - destructive ) ;
}
/* Follow hashtag icon */
. layout-single-column . column-header__button . column-header__icon . fa-user-plus : : before {
content : var ( -- icon - follow-hashtag ) ;
position : relative ;
top : 2 px ;
}
/* Unfollow hashtag icon */
. layout-single-column . column-header__button . column-header__icon . fa-user-times : : before {
content : var ( -- icon - unfollow-hashtag ) ;
position : relative ;
top : 2 px ;
}
/* Show more in server banner */
. layout-single-column . server-banner__meta__column {
max-width : 60 % ;
width : unset ;
}
/* stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors, selector-max-specificity, selector-max-pseudo-class, selector-not-notation */
/* Threaded replies, see https://github.com/ronilaukkarinen/mastodon-bird-ui/issues/4 */
. layout-single-column . scrollable > div > div . status . status-reply {
border-color : transparent ;
position : relative ;
}
/* If we don't have threads support yet, just use borders */
. layout-single-column . scrollable > div : not ( : has ( . status__thread ) ) . status . status-reply {
border-color : var ( -- color - border ) ;
}
/* Always have border-bottom in threads on main level to separate the discussions */
. layout-single-column . scrollable > div > div . status__thread ,
. layout-single-column . scrollable > div > div . status__thread : has ( . status__thread ) > div . status__thread : not ( . status__thread--last-item ) ,
. layout-single-column . scrollable > div > div : not ( [ class ] ) > div . status__thread {
border-bottom : 1 px solid var ( -- color - border ) ;
}
. layout-single-column . scrollable > div > div . status__thread > div . status__thread : not ( . status__thread--last-item ) : not ( : has ( . status__thread--last-item ) ) {
border-bottom : 0 ;
}
/* If we don't have threads support yet, hide faux lines */
. layout-single-column . scrollable > div : not ( : has ( . status__thread ) ) . status . status-reply . status__avatar : : before {
background-color : transparent ;
width : 0 ;
}
. layout-single-column . scrollable > div > . status__thread > . status__thread > div > div > . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread ~ . status__thread--first-item + . status__thread--last-item . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread . status__thread--last-item . status__thread--first-item . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread ~ . status__thread . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread . status__thread--first-item + . status__thread . status__thread--last-item . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread + . status__thread ~ . status__thread ~ . status__thread . status . status-reply . status__avatar : : before {
background-color : var ( -- color - thread-line ) ;
content : ' ' ;
height : 100 % ;
left : calc ( calc ( calc ( var ( -- size-avatar ) / 2 ) + 16 px ) - 1 px ) ;
position : absolute ;
top : 24 px ;
width : 2 px ;
}
/* Hide thread lines from the last items for at least 10 levels */
. layout-single-column . scrollable > div > div . status__thread : not ( : has ( . status__thread ) ) . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread : not ( : has ( . status__thread ) ) . status__thread--last-item . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread : has ( . status__thread--last-item ) > . status__thread--last-item : not ( : has ( . status__thread ) ) . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread > . status__thread : has ( . status__thread--last-item ) > . status__thread--last-item : not ( : has ( . status__thread ) ) . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread > . status__thread : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : not ( : has ( . status__thread ) ) . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread > . status__thread : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : not ( : has ( . status__thread ) ) > . status__thread--last-item : not ( : has ( . status__thread ) ) . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread > . status__thread : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : not ( : has ( . status__thread ) ) . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread > . status__thread : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) . status__thread--last-item : not ( : has ( . status__thread ) ) . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread > . status__thread : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : not ( : has ( . status__thread ) ) . status . status-reply . status__avatar : : before ,
. layout-single-column . scrollable > div > . status__thread > . status__thread : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : has ( . status__thread--last-item ) > . status__thread--last-item : not ( : has ( . status__thread ) ) . status . status-reply . status__avatar : : before {
/* stylelint-disable-next-line */
background-color : transparent !important ;
}
. layout-single-column . scrollable > div > . status__thread . status__thread--first-item . status . status-reply . status__avatar : : before {
top : 60 px ;
}
/* Scrollbars */
. layout-single-column textarea : : -webkit-scrollbar ,
. layout-single-column . autosuggest-textarea__textarea : : -webkit-scrollbar ,
. layout-single-column . reply-indicator : : -webkit-scrollbar ,
. layout-single-column : : -webkit-scrollbar {
height : 6 px ;
width : 6 px ;
}
. layout-single-column textarea : : -webkit-scrollbar-thumb ,
. layout-single-column . autosuggest-textarea__textarea : : -webkit-scrollbar-thumb ,
. layout-single-column . reply-indicator : : -webkit-scrollbar-thumb ,
. layout-single-column : : -webkit-scrollbar-thumb {
background-color : var ( -- color - border ) ;
border : 0 px solid var ( -- color - border ) ;
border-radius : 50 px ;
}
. layout-single-column textarea : : -webkit-scrollbar-thumb : hover ,
. layout-single-column . autosuggest-textarea__textarea : : -webkit-scrollbar-thumb : hover ,
. layout-single-column . reply-indicator : : -webkit-scrollbar-thumb : hover ,
. layout-single-column : : -webkit-scrollbar-thumb : hover {
background-color : var ( -- color - light - purple ) ;
}
. layout-single-column textarea : : -webkit-scrollbar-thumb : active ,
. layout-single-column . autosuggest-textarea__textarea : : -webkit-scrollbar-thumb : active ,
. layout-single-column . reply-indicator : : -webkit-scrollbar-thumb : active ,
. layout-single-column : : -webkit-scrollbar-thumb : active {
background-color : var ( -- color - black - coral ) ;
}
. layout-single-column textarea : : -webkit-scrollbar-track ,
. layout-single-column . autosuggest-textarea__textarea : : -webkit-scrollbar-track ,
. layout-single-column . reply-indicator : : -webkit-scrollbar-track ,
. layout-single-column : : -webkit-scrollbar-track {
background-color : var ( -- color - bg ) ;
border : 0 px solid var ( -- color - border ) ;
border-radius : 0 ;
}
. layout-single-column textarea : : -webkit-scrollbar-track : hover ,
. layout-single-column . autosuggest-textarea__textarea : : -webkit-scrollbar-track : hover ,
. layout-single-column . reply-indicator : : -webkit-scrollbar-track : hover ,
. layout-single-column : : -webkit-scrollbar-track : hover {
background-color : var ( -- color - bg ) ;
}
. layout-single-column textarea : : -webkit-scrollbar-track : active ,
. layout-single-column . autosuggest-textarea__textarea : : -webkit-scrollbar-track : active ,
. layout-single-column . reply-indicator : : -webkit-scrollbar-track : active ,
. layout-single-column : : -webkit-scrollbar-track : active {
background-color : var ( -- color - bg ) ;
}
. layout-single-column textarea : : -webkit-scrollbar-corner ,
. layout-single-column . autosuggest-textarea__textarea : : -webkit-scrollbar-corner ,
. layout-single-column . reply-indicator : : -webkit-scrollbar-corner ,
. layout-single-column : : -webkit-scrollbar-corner {
background-color : transparent ;
}
/ *
* Heart animation micro-interactions start
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* /
@keyframes heart-animate {
100 % {
background-position : - 2800 px ;
}
}
/* Left sidebar column links */
. layout-single-column . column-link . fa-star : : before {
content : var ( -- icon - heart-column-link ) ;
}
@media ( min-width : 889 px ) {
. layout-single-column . column-link . fa-star : : before {
position : relative ;
top : 2 px ;
}
}
. layout-single-column . column-link . active . fa-star : : before {
content : var ( -- icon - heart-column-link-active ) ;
}
. layout-single-column . notification__favourite-icon-wrapper . fa-star : : before {
content : var ( -- icon - heart-notification ) ;
}
. layout-single-column . notification__filter-bar . fa-star : : before ,
. layout-single-column . detailed-status__action-bar . icon-button . fa-star : : before ,
. layout-single-column . status__action-bar . icon-button . fa-star : : before {
content : var ( -- icon - heart ) ;
position : relative ;
top : 1 px ;
}
. layout-single-column . notification__filter-bar . active . fa-star : : before {
content : var ( -- icon - heart-active ) ;
}
. layout-single-column . detailed-status__action-bar . active : not ( . activated ) . fa-star : : before ,
. layout-single-column . status__action-bar . active : not ( . activated ) . fa-star : : before {
content : var ( -- icon - heart-active-red ) ;
}
. layout-single-column . notification__filter-bar . fa-star : : before {
position : relative ;
top : 2 px ;
}
. icon-button . star-icon . active ,
. notification__favourite-icon-wrapper . star-icon {
color : var ( -- color - red ) ;
}
. layout-single-column . detailed-status__action-bar . icon-button : hover . fa-star : : before ,
. layout-single-column . detailed-status button . icon-button : hover . fa-star : : before ,
. layout-single-column . status button . icon-button : hover . fa-star : : before {
content : var ( -- icon - heart-hover ) ;
}
. layout-single-column . no-reduce-motion . icon-button . star-icon {
min-height : 23 px ;
min-width : 42 .22 px ;
position : relative ;
}
/* Disable default Mastodon animation: spring-rotate-in 1s linear; */
. layout-single-column . no-reduce-motion . icon-button . star-icon . fa-star {
/* stylelint-disable-next-line */
animation : none !important ;
}
. layout-single-column . no-reduce-motion . icon-button . star-icon . activate : hover . fa-star : : before {
/* stylelint-disable-next-line */
content : ' ' !important ;
}
. layout-single-column . no-reduce-motion . icon-button . star-icon . activate . fa-star : : before {
animation : heart-animate 0 .8 s steps ( 28 ) forwards ;
/* stylelint-disable-next-line */
background-image : url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC1QAAABkCAMAAAAM7mAaAAADAFBMVEUAAACzq8zkMFXkJlOxqc3iJk3jJk3Ci+fiKVTiJk3iJU3LlO3iJ07jJUziJk3jJk3iJk3jJk/hJ0/iJk3iJk3Mj/XiJk3iJk3Nj/XiJk3iJk3iJk3iJk3Mj/biJk2U1avNj/bjJk3Nku3Kk/PjJk3LkfXLkPXjJ1DMj/XNjvaXuNrou4DiJU3MjvXMjvXjJk3Lj/R5vtTiJk3iJk3jJk3MjvbMk/XAXMnjJk3NkPXXZ7PhJUys5qSm7bbMjvXMkPTMjvWf4s+Tr97Nj/biJU2xxria4LeeMOLSjrTiJk3bhL63WM/0ujCwtvrWnPTMkPbjKFHMj/ab2MPgyoCb37rgoJ6Y5cOfx/ozn+/TldOX5sLstpHut3yg3sKT37nVb8LNkvXJrMXqqmfTasHB6pCV0++nn7aclsbVa8CT58Cf5MCV48Kcx/rSasLIxp+Vz/XqwnCz25iJlvNnnNmgZ8zdRoiU0ffJ7IzdmbijyfDgvZHEXNKr5JWq2KGutMQ8oO3Fp/rL6ozeRoiV1fHsl6XdRojimKbev46sUdVgmvPGuouV1POiNd/OZ8PnvI/uuUc+x5bUar/Wb8On5qLTasCrusO306PdRohan+XeRYifNeKspr9cod/aesuTwI2R0vmsu8Myn+/Mp8ymp8PTms2iTNdYw5E7yY2Ll+/xvjfkJU3iJk2V5MKimr1MoOu7y7HLxp0qyo3dRojbj8ToykXL6n22sviVyI1ByI6s1sr3v5CbyPrzvzCqtcHQodOfZ8ud2djdR4iQmN6S4ciw9prnvZCfMOLalctlm+vor5czoe9omuSKmeqU2uWwxcWb3dTCqvr0jqmhmrjLxJa9rPqwy8LEkfSgZ8udL+PdRomquMK/Ws2SlfFVur/qqmdOw54zr+Kw9prbktC/vNyzQt5Qwb7Tyrix063lIlKwkfXi0UziJk3MjvXUar/dRoiquMKR0vqM6MOw1aWW2On0jqew9pqxwsXglMW7vNywkfXi0UyzQt7U4GjBnPJbtsN52bDbH1E9AAAA63RSTlMABAUMCPPkDBT92hQZafm1fSUh7ZRLpp1BzL5zOyPFD7tBHTOuezgslqEeF9T87EcrFWCMhfViFVmIQTIb/uJay/4qrkwzJ/78Uiwi/fz+UTDV/Sf+/F7+/v6hNA1NPXNt/fqPPDP+/ebIinZfW/57UVX9/fvhmHhUSf77rW1pU/7+v76noId2bf360aimlngz+MzMvaudi3VXUUZB/vvn4d6ciXo++rJjOzc04aaPiGf89LWs1J+Jhv373c/Lx8W6ZVD74t7Z2NK9tbWJ8evo4+PgzMK0qZt/c/Hb0MypY/z46ebSm/zx7+bhp+NmuQAAKXNJREFUeNrs3UFIU3EcB/DvHx68wzsPdhmTDaMGxbpMDGXhKMF4EzssCGZGLbBejCBGDysGXYLqUnSZmKF4MzoEExnUoahTJaEkdMuOHiaBChL0VzpEJQTtCw2/H9j5u+OX7/s9HkRERERERERERERERERERERERERERERERERERERERERERERERERa5LADulIKdGEJdEEIuiAAXVAGXakMERGRPSuRiYFtfCoEW3HpEtgKo6cNyAprow7Iii9n6Rmlt+/pGamvk6BrNEBXLoOurwQREZG9yssNdRtwpfP5/D5w9W1ubobgis/PzxdBNtvbS88YXVsbBtnFtbXDILOl2oDMVMqgS6UgIiIiPJGFhU6QHbCFNwOuTpvRDa6btlRPg+uwLdUFkI329h7HH7XXUh2/WMCu2unERERERKiCet0Dl1O1kuDq4BdeZG3GCLi8lc3NYyC79G7JAVnPpWGIiIiI7BGh7/uL4HKr1iC4MrbwJsFlOju6Dci8UI/QRURERFoobDQqBjSuC6DuWy5YYglYi9XqggeWZBLboiNp0IQh6AoF/EoZuzh+HHSOTjJERESogkYjAFng+wHcUxYvKlOtZnaS/AWw2Pk4C8DJjCTAEsnnIyCzbw/2gW1+HnSnT+NP2q7wioiISNsrnbL6TLlSNmBxfcvZSaqAZcHOx4Cp+4slsOTy+RzIMvwXFOGtrHhgKxYhIiIislcEp6yg0mw2K2BJ+ZbnNKhLtb3JWATZYD4/CDKns9OgFboc7Mq0JsKdccF2YsYBW60GNuf2DNi6+Bk4Np0C25U5B2xzc6C7fgVszoMesMWvgy5+HiIibKlyOQWuvp2lurkNNHXfrwOlW40yaGL1egJsnodWGHj27Bq43PsTE0fANTA29ukEuGpbW18MuJb7+5dBdre/fwZkL65eNSD7cOEJ2B49GgbbqwfYRVuValzRpbyIyN9xJ5vNyTi4wjt3Qkw2bRJ4ku3zRS9n6uzzcVCZNxsbGwOgOjMxMXEfXOfGxsbOgOvu1tYWu7jbwvsaZDajBrKPV1+AbfrDONiGbxiwxeMQEZG9JGxaIYi8ZDQaiUSjZRsU4P/nPHy8dAxUN89aBkyJDesaftdmpfqMLdWXwXWbv1Sjxi+8OHF32YDMmemCiIhImzGxaCSbjURjBiTpTHduqGkN5bozabSeSf7891NBNpI0+DfxQtEB1dP19fXHBkxTZy0PTOYzf6nusucf7MLr3vt0zoCsdrsLbK4LERER+YUXGdmf6zh6tCO3fyTigSCRPTB0cPWHg0MHsgm0mDOYO7S6zW82/W/2t3ooN+iglWKRNH6TjsTwD3pmT54cdcC0tG71gGncdurn2FW73FTDDHgQERGR7+zdP2gTURwH8O+LBydkDnQJlYQE45FSh6Q0lDQQ2iFGpIYKbc6mxA5WEeNQ4z+EVKkOalAqoiBIqUPAQTR1EBFFRFy6iIOLgzjJSzGLSO3gi8Y/oU3u7t09EX2fqTSQL78p3/x4ufdvUmK5fRfnr1yZv7gvF1PgvN7+BG2R6O+Fo9ToFrrOlqgK5/i2Nhp1T7J/sMvv9fobx513Nv6x1QdbJn7ds+z3EGyIePzgdmA3swfCNDfVywRCHVtYkHVUkiRJkqS/Vl9u/nLtN5fnc31wkhJN0A0kogqc4g700A31BNxwhi8UpnQk0Ium7R+Zo72BEUrDIR/4HazX6webW2qCtojH+xeX6u6ry7eGIEmSJEmS9L+Kzdc2MB+DU0g0TtuIR4kzEZMR2lZkkjgREYjQcDKI35xp/lgxmAzTSIA7RKk3dAPE4zY6QMMZMrSbGYAkSZIkSZIkRuxKrY0rMTjCn6AdJPxORIzQjkbsh3jZFMletNh++OhxfNObZJN4wWd7vWE7fF0w1OUDl4nxA/JKZ0mSJEmSJMDlgvP6LtY6uNjnxII3TDsKBwhsmmQRBiGTsGcwQuMedOCJ08gg+EyzTj0NvxcmeP1gFu8vKhAse3ZOg2B6+W0GopWrFYiWqRYgGimXIVyhCOEGigqEK3ZDuOwAxJNXiEiSJDlp8/VrszP3Vlbuzcxeu74ZDortr3W0Pwab3FuooS1u2KGEqAkhBdwGxu98DieNjmYkKQ2Aw/De4fHp8e4uN0xxdwGLY2NjC7BgaIjAIm10dPQlzCNDPlj2Np/PW8lIKbCskk6nCUxTU+DwKJ3W8Y3LRFafCg6F1VUN3+gVzTiDgMfSWvOtSaVinAEuU6UBfJeZIjBAwKeo4Tt9ShcUAYX8HGkAwmUyEE7PQrwsgXCaDuF0DeL9Kxk6QRvyC6j0Z7mezq60mH3qgkNyNUM52OIboSaM+MBPXV/bI/F4ZH11VwEbm+QnMBSgtN8dCHhhyUF22nkY6FJND9yFx6xUv7P2ZI7XsCg7ylh7iPQx7lJNspq56w5fKFyl2gUm8/ZtAUbU/TdzsK6afuRCQzmdLsNA38mTO2CdVq2S73+wCm80yY4vF8AjU/gx0eqq0SC37V7vXVhbW0JnNy7AHn2ptKQYzLEDNhVLpQHRH/dTpdIURHt14hxEO/fwEkTTH76EcJeeQ7jsQwLhLukQLqNBPB2SZMD1ZmZlnZk3LjhhX82EfbDBG6emxL3gpbR26p5Q1K+CU
background-position : 0 px ;
background-repeat : no-repeat ;
/* stylelint-disable-next-line */
content : ' ' !important ;
height : 100 px ;
left : - 38 px ;
pointer-events : none ;
position : absolute ;
top : - 38 px ;
transform : scale ( .6 ) ;
width : 100 px ;
}
/* stylelint-disable-next-line */
. layout-single-column . no-reduce-motion . status . icon-button . star-icon . activate . fa-star : : before {
left : - 24 px ;
}
@media screen and ( max-width : 889 px ) {
/* stylelint-disable-next-line */
. layout-single-column . no-reduce-motion . status . icon-button . star-icon . activate . fa-star : : before {
left : - 28 px ;
}
}
/* stylelint-disable-next-line */
. layout-single-column . no-reduce-motion . status . icon-button . icon-button--with-counter . star-icon . activate . fa-star : : before {
left : - 38 px ;
}
/* stylelint-disable-next-line */
. layout-single-column . no-reduce-motion . detailed-status__action-bar . icon-button . star-icon . activate . fa-star : : before {
left : - 29 px ;
}
/ *
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Heart animation micro-interactions end
* /
/ *
* Star animation micro-interactions start ( depends on the heart icon above )
* If you prefer hearts , remove everything below this comment until
* " Star animation micro-interactions end "
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* /
/* If a hover device */
@media ( hover : hover ) {
. layout-single-column button . icon-button : not ( . active ) : hover i . fa-star ,
. layout-single-column button . icon-button : not ( . active ) : hover i . fa-star ~ span ,
. layout-single-column button . icon-button : not ( . active ) : hover i . fa-star : : before {
color : var ( -- color - yellow ) ;
}
. layout-single-column button . icon-button . active : hover i . fa-star ~ span {
color : var ( -- color - dim ) ;
}
}
/* stylelint-disable no-duplicate-selectors */
/* Left sidebar column links */
. layout-single-column . column-link . fa-star : : before {
content : var ( -- icon - star-column-link ) ;
}
. layout-single-column . column-link . active . fa-star : : before {
content : var ( -- icon - star-column-link-active ) ;
}
. layout-single-column . notification__favourite-icon-wrapper . fa-star : : before {
content : var ( -- icon - star-notification ) ;
}
/* Replace notification tab bar icon with star */
. layout-single-column . notification__filter-bar . active . fa-star : : before {
content : var ( -- icon - star-active ) ;
}
/* Numbers on hover */
. layout-single-column button . icon-button : hover i . fa-star ~ span {
color : var ( -- color - dim ) ;
}
/* Numbers when the star is active/activated */
. layout-single-column button . icon-button . activate i . fa-star ~ span ,
. layout-single-column button . icon-button . active i . fa-star ~ span {
color : var ( -- color - yellow ) ;
}
/* The actual star icon */
. layout-single-column . notification__filter-bar . fa-star : : before ,
. layout-single-column . detailed-status__action-bar . icon-button . fa-star : : before ,
. layout-single-column . status__action-bar . icon-button . fa-star : : before {
content : " \f006 " ;
font-size : 20 px ;
left : 0 ;
position : relative ;
top : 0 ;
}
/* Active star icon */
. layout-single-column . notification__filter-bar button . icon-button . active . fa-star : : before ,
. layout-single-column . detailed-status__action-bar button . icon-button . active . fa-star : : before ,
. layout-single-column . status__action-bar button . icon-button . active . fa-star : : before {
/* stylelint-disable-next-line */
content : " \f005 " !important ;
display : block ;
}
/* Active star when activated */
. layout-single-column . no-reduce-motion . icon-button . star-icon . activate . fa-star : : before {
animation : sparkles-width .65 s 1 , sparkles-size .65 s 1 , popping .5 s 1 ;
/* stylelint-disable-next-line */
background-color : unset !important ;
/* stylelint-disable-next-line */
background-image : none !important ;
/* stylelint-disable-next-line */
color : var ( -- color - yellow ) ;
/* stylelint-disable-next-line */
content : " \f005 " !important ;
height : unset ;
/* stylelint-disable-next-line */
left : unset !important ;
position : relative ;
top : 0 ;
transform : none ;
width : unset ;
}
/* Star sparkles, when activated */
. layout-single-column . detailed-status__action-bar button . icon-button . star-icon . activate : : after ,
. layout-single-column . status__action-bar button . icon-button . activate . star-icon : : after {
animation : sparkles-width .65 s 1 , sparkles-size .65 s 1 ;
/* stylelint-disable-next-line */
background-color : unset !important ;
content : ' ' ;
/* stylelint-disable-next-line */
height : 50 px !important ;
/* stylelint-disable-next-line */
left : 50 % !important ;
margin-left : - 24 px ;
margin-top : - 20 px ;
opacity : unset ;
position : absolute ;
top : calc ( 50 % + 1 px ) ;
transform : none ;
/* stylelint-disable-next-line */
width : 50 px !important ;
z-index : unset ;
}
/* Ensure everything shows up on mobile */
. layout-single-column . no-reduce-motion . icon-button . star-icon . activate . fa-star : : before ,
. layout-single-column . detailed-status__action-bar button . icon-button . star-icon . activate : : after ,
. layout-single-column . status__action-bar button . icon-button . activate . star-icon : : after {
/* stylelint-disable-next-line */
display : block !important ;
}
/* Star circle/ring */
. layout-single-column . detailed-status__action-bar button . icon-button . activate . star-icon : : before ,
. layout-single-column . status__action-bar button . icon-button . activate . star-icon : : before {
animation : ring-border-width .35 s 1 , ring-size .35 s 1 ;
border : 0 px solid var ( -- color - yellow ) ;
border-radius : 10 em ;
content : ' ' ;
height : 0 em ;
left : 50 % ;
position : absolute ;
top : 50 % ;
transform : translate ( - 50 % , - 50 % ) ;
transform-origin : 50 px 50 px ;
width : 0 em ;
}
. layout-single-column . icon-button . star-icon . active ,
. layout-single-column . notification__favourite-icon-wrapper . star-icon {
color : var ( -- color - yellow ) ;
}
. layout-single-column . detailed-status__action-bar button . icon-button . star-icon . deactivate : hover . fa-star : : before ,
. layout-single-column . status__action-bar button . icon-button . deactivate . star-icon : hover . fa-star : : before ,
. layout-single-column . detailed-status__action-bar . icon-butto . deactivate . fa-star : : before ,
. layout-single-column . detailed-status button . icon-button . deactivate . fa-star : : before ,
. layout-single-column . status button . icon-button . deactivate . fa-star : : before {
color : var ( -- color - dim ) ;
/* stylelint-disable-next-line */
content : ' \f006 ' !important ;
}
. layout-single-column . detailed-status__action-bar button . icon-button . star-icon . activate : hover . fa-star : : before ,
. layout-single-column . status__action-bar button . icon-button . activate . star-icon : hover . fa-star : : before ,
. layout-single-column . detailed-status__action-bar . icon-button : hover . fa-star : : before ,
. layout-single-column . detailed-status button . icon-button : hover . fa-star : : before ,
. layout-single-column . status button . icon-button : hover . fa-star : : before {
color : var ( -- color - yellow ) ;
/* stylelint-disable-next-line */
content : " \f006 " !important ;
position : relative ;
top : 0 ;
}
/* Prevent the star from being highlighted when the button is focused, especially while logged out */
. layout-single-column . detailed-status__action-bar . icon-button : focus . fa-star : : before ,
. layout-single-column . detailed-status button . icon-button : focus . fa-star : : before ,
. layout-single-column . status button . icon-button : hover . fa-star : : before {
color : var ( -- color - dim ) ;
}
/* Mobile devices */
@media ( hover : none ) {
. layout-single-column . detailed-status__action-bar button . icon-button . star-icon . activate : hover . fa-star : : before ,
. layout-single-column . status__action-bar button . icon-button . activate . star-icon : hover . fa-star : : before ,
. layout-single-column . detailed-status__action-bar . icon-button : hover . fa-star : : before ,
. layout-single-column . detailed-status button . icon-button : hover . fa-star : : before ,
. layout-single-column . status button . icon-button : hover . fa-star : : before {
/* stylelint-disable-next-line */
content : ' \f005 ' !important ;
}
}
/* Sparkle offset on numbered item */
. layout-single-column . detailed-status__action-bar button . icon-button . star-icon . icon-button--with-counter . star-icon . activate : : after ,
. layout-single-column . status__action-bar button . icon-button . icon-button--with-counter . star-icon . activate . star-icon : : after {
/* stylelint-disable-next-line */
left : calc ( 50 % - 14 px ) !important ;
/* stylelint-disable-next-line */
top : calc ( 50 % + - 1 px ) !important ;
}
/* Circle offset on numbered item */
. layout-single-column . detailed-status__action-bar button . icon-button . icon-button--with-counter . activate . star-icon : : before ,
. layout-single-column . status__action-bar button . icon-button . icon-button--with-counter . activate . star-icon : : before {
/* stylelint-disable-next-line */
left : calc ( 50 % - 14 px ) !important ;
}
/* Fix the sparkle and circle position on small screens on the Explore */
@media ( max-width : 888 px ) {
/* Sparkle offset on numbered item */
. layout-single-column . status__action-bar button . icon-button . icon-button--with-counter . star-icon . activate . star-icon : : after {
/* stylelint-disable-next-line */
left : calc ( 50 % - 11 px ) !important ;
}
/* Circle offset on numbered item */
. layout-single-column . detailed-status__action-bar button . icon-button . icon-button--with-counter . activate . star-icon : : before ,
. layout-single-column . status__action-bar button . icon-button . icon-button--with-counter . activate . star-icon : : before {
/* stylelint-disable-next-line */
left : calc ( 50 % - 11 px ) !important ;
}
}
@keyframes popping {
0 % {
transform : scale ( 0 , 0 ) ;
}
40 % {
transform : scale ( 0 , 0 ) ;
}
75 % {
transform : scale ( 1 .3 , 1 .3 ) ;
}
100 % {
transform : scale ( 1 , 1 ) ;
}
}
@keyframes ring-border-width {
0 % {
border-width : 0 ;
}
50 % {
border-width : 0 .22 em ;
}
100 % {
border-width : 0 ;
}
}
@keyframes ring-size {
0 % {
height : 0 ;
width : 0 ;
}
100 % {
height : 2 em ;
width : 2 em ;
}
}
@keyframes sparkles-width {
0 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.3' fill='transparent' /%3E%3C/svg%3E" ) ;
}
1 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
2 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.9' fill='transparent' /%3E%3C/svg%3E" ) ;
}
3 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
4 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.5' fill='transparent' /%3E%3C/svg%3E" ) ;
}
5 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
6 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.1' fill='transparent' /%3E%3C/svg%3E" ) ;
}
7 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
8 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.7' fill='transparent' /%3E%3C/svg%3E" ) ;
}
9 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13' fill='transparent' /%3E%3C/svg%3E" ) ;
}
10 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.3' fill='transparent' /%3E%3C/svg%3E" ) ;
}
11 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='15.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
12 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='16.9' fill='transparent' /%3E%3C/svg%3E" ) ;
}
13 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='17.3' fill='transparent' /%3E%3C/svg%3E" ) ;
}
14 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='17.3' fill='transparent' /%3E%3C/svg%3E" ) ;
}
15 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='18' fill='transparent' /%3E%3C/svg%3E" ) ;
}
16 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
17 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
18 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
19 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
20 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14' fill='transparent' /%3E%3C/svg%3E" ) ;
}
21 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
22 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
23 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
24 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
25 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13' fill='transparent' /%3E%3C/svg%3E" ) ;
}
26 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
27 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
28 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
29 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
30 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12' fill='transparent' /%3E%3C/svg%3E" ) ;
}
31 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
32 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
33 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
34 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
35 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11' fill='transparent' /%3E%3C/svg%3E" ) ;
}
36 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
37 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
38 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
39 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
40 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10' fill='transparent' /%3E%3C/svg%3E" ) ;
}
41 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
42 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
43 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
44 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
45 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9' fill='transparent' /%3E%3C/svg%3E" ) ;
}
46 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
47 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
48 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
49 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
50 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
51 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
52 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
53 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
54 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
55 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7' fill='transparent' /%3E%3C/svg%3E" ) ;
}
56 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
57 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
58 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
59 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
60 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
61 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
62 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
63 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
64 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
65 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
66 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
67 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
68 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
69 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
70 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
71 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
72 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
73 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
74 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3' fill='transparent' /%3E%3C/svg%3E" ) ;
}
75 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
76 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
77 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
78 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
79 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
80 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
81 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
82 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
83 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
84 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1' fill='transparent' /%3E%3C/svg%3E" ) ;
}
86 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.8' fill='transparent' /%3E%3C/svg%3E" ) ;
}
87 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.6' fill='transparent' /%3E%3C/svg%3E" ) ;
}
88 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.4' fill='transparent' /%3E%3C/svg%3E" ) ;
}
89 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.2' fill='transparent' /%3E%3C/svg%3E" ) ;
}
90 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
91 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
92 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
93 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
94 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
95 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
96 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
97 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
98 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
99 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
100 % {
content : url( "data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E" ) ;
}
}
@keyframes sparkles-size {
0 % {
transform : scale ( 0 .1 , 0 .1 ) ;
}
5 % {
transform : scale ( 0 .1 , 0 .1 ) ;
}
85 % {
transform : scale ( 1 , 1 ) ;
}
}
/* stylelint-enable no-duplicate-selectors */
/ *
* Star animation micro-interactions end
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* /